From 2d17dfa45fcb8cdbd17b790138465d9a7383e7b2 Mon Sep 17 00:00:00 2001 From: sanjay rajpoot Date: Mon, 29 Mar 2021 20:30:16 +0530 Subject: [PATCH 01/10] Avenir Font files Removed --- package-lock.json | 81 ++++++++++++++---- package.json | 2 +- src/assets/js/reference.js | 16 ++-- src/data/data.yml | 2 +- .../pages/reference/assets/Avenir.otf | Bin 127448 -> 0 bytes .../reference/assets/AvenirNextLTPro-Demi.otf | Bin 69940 -> 0 bytes 6 files changed, 73 insertions(+), 28 deletions(-) delete mode 100644 src/templates/pages/reference/assets/Avenir.otf delete mode 100644 src/templates/pages/reference/assets/AvenirNextLTPro-Demi.otf diff --git a/package-lock.json b/package-lock.json index 2d76bdc862..95bdaf7153 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1391,8 +1391,7 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", - "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", + "resolved": "", "dev": true } } @@ -2807,9 +2806,9 @@ } }, "bl": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/bl/-/bl-1.2.2.tgz", - "integrity": "sha512-e8tQYnZodmebYDWGH7KMRvtzKXaJHx3BbilrgZCfvyLUYdKpK1t5PSPmpkny/SgiTSCnjfLW7v5rlONXVFkQEA==", + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/bl/-/bl-1.2.3.tgz", + "integrity": "sha512-pvcNpa0UU69UT341rO6AYy4FVAIkUHuZXRIWbq+zHnsVcRzDDjIAhGuuYoi0d//cwIwtt4pkpKycWEfjdV+vww==", "dev": true, "requires": { "readable-stream": "^2.3.5", @@ -4963,9 +4962,9 @@ "optional": true }, "diff": { - "version": "2.2.3", - "resolved": "https://registry.npmjs.org/diff/-/diff-2.2.3.tgz", - "integrity": "sha1-YOr9DSjukG5Oj/ClLBIpUhAzv5k=", + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz", + "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==", "dev": true }, "digits": { @@ -8190,14 +8189,62 @@ } }, "grunt-postcss": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/grunt-postcss/-/grunt-postcss-0.8.0.tgz", - "integrity": "sha1-jzCor2B5A84MRfAfC+QsYOMc6w4=", + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/grunt-postcss/-/grunt-postcss-0.9.0.tgz", + "integrity": "sha512-lglLcVaoOIqH0sFv7RqwUKkEFGQwnlqyAKbatxZderwZGV1nDyKHN7gZS9LUiTx1t5GOvRBx0BEalHMyVwFAIA==", "dev": true, "requires": { - "chalk": "^1.0.0", - "diff": "^2.0.2", - "postcss": "^5.0.0" + "chalk": "^2.1.0", + "diff": "^3.0.0", + "postcss": "^6.0.11" + }, + "dependencies": { + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "requires": { + "color-convert": "^1.9.0" + } + }, + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + }, + "has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", + "dev": true + }, + "postcss": { + "version": "6.0.23", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", + "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", + "dev": true, + "requires": { + "chalk": "^2.4.1", + "source-map": "^0.6.1", + "supports-color": "^5.4.0" + } + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } } }, "grunt-serve": { @@ -18219,8 +18266,7 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", - "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", + "resolved": "", "dev": true } } @@ -19697,8 +19743,7 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", - "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==", + "resolved": "", "dev": true } } diff --git a/package.json b/package.json index 8a92f3b068..81a56887a2 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,7 @@ "grunt-file-append": "0.0.7", "grunt-html": "^11.1.1", "grunt-newer": "^1.3.0", - "grunt-postcss": "^0.8.0", + "grunt-postcss": "^0.9.0", "grunt-serve": "^0.1.6", "grunt-shell": "^3.0.1", "grunt-uncss": "^0.8.6", diff --git a/src/assets/js/reference.js b/src/assets/js/reference.js index 37150da749..499651487e 100644 --- a/src/assets/js/reference.js +++ b/src/assets/js/reference.js @@ -448,10 +448,10 @@ define('text',['module'], function (module) { }); -define('text!tpl/search.html',[],function () { return '

search

\n
\n \n \n
\n\n';}); +define('text!tpl/search.html',[],function () { return '

search

\r\n
\r\n \r\n \r\n
\r\n\r\n';}); -define('text!tpl/search_suggestion.html',[],function () { return '

\n\n <%=name%>\n\n \n <% if (final) { %>\n constant\n <% } else if (itemtype) { %>\n <%=itemtype%> \n <% } %>\n\n <% if (className) { %>\n in <%=className%>\n <% } %>\n\n <% if (typeof is_constructor !== \'undefined\' && is_constructor) { %>\n constructor\n <% } %>\n \n\n

';}); +define('text!tpl/search_suggestion.html',[],function () { return '

\r\n\r\n <%=name%>\r\n\r\n \r\n <% if (final) { %>\r\n constant\r\n <% } else if (itemtype) { %>\r\n <%=itemtype%> \r\n <% } %>\r\n\r\n <% if (className) { %>\r\n in <%=className%>\r\n <% } %>\r\n\r\n <% if (typeof is_constructor !== \'undefined\' && is_constructor) { %>\r\n constructor\r\n <% } %>\r\n \r\n\r\n

';}); /*! * typeahead.js 0.10.2 @@ -2303,7 +2303,7 @@ define('searchView',[ }); -define('text!tpl/list.html',[],function () { return '<% _.each(groups, function(group){ %>\n
\n

<%=group.name%>

\n
\n <% _.each(group.subgroups, function(subgroup, ind) { %>\n
\n <% if (subgroup.name !== \'0\') { %>\n

<%=subgroup.name%>

\n <% } %>\n \n
\n <% }); %>\n
\n
\n<% }); %>\n';}); +define('text!tpl/list.html',[],function () { return '<% _.each(groups, function(group){ %>\r\n
\r\n

<%=group.name%>

\r\n
\r\n <% _.each(group.subgroups, function(subgroup, ind) { %>\r\n
\r\n <% if (subgroup.name !== \'0\') { %>\r\n

<%=subgroup.name%>

\r\n <% } %>\r\n \r\n
\r\n <% }); %>\r\n
\r\n
\r\n<% }); %>\r\n';}); define('listView',[ 'App', @@ -2445,13 +2445,13 @@ define('listView',[ }); -define('text!tpl/item.html',[],function () { return '

<%=item.name%><% if (item.isMethod) { %>()<% } %>

\n\n<% if (item.example) { %>\n
\n

Examples

\n\n
\n <% _.each(item.example, function(example, i){ %>\n <%= example %>\n <% }); %>\n
\n
\n<% } %>\n\n
\n\n

Description

\n\n <% if (item.deprecated) { %>\n

\n Deprecated: <%=item.name%><% if (item.isMethod) { %>()<% } %> is deprecated and will be removed in a future version of p5. <% if (item.deprecationMessage) { %><%=item.deprecationMessage%><% } %>\n

\n <% } %>\n\n\n <%= item.description %>\n\n <% if (item.extends) { %>\n

Extends <%=item.extends%>

\n <% } %>\n\n <% if (item.module === \'p5.sound\') { %>\n

This function requires you include the p5.sound library. Add the following into the head of your index.html file:\n 

<script src="path/to/p5.sound.js"></script>
\n

\n <% } %>\n\n <% if (item.constRefs) { %>\n

Used by:\n <%\n var refs = item.constRefs;\n for (var i = 0; i < refs.length; i ++) {\n var ref = refs[i];\n var name = ref;\n if (name.substr(0, 3) === \'p5.\') {\n name = name.substr(3);\n }\n if (i !== 0) {\n if (i == refs.length - 1) {\n %> and <%\n } else {\n %>, <%\n }\n }\n %><%= name %>()<%\n }\n %>\n

\n <% } %>\n
\n\n<% if (isConstructor || !isClass) { %>\n\n
\n

Syntax

\n

\n <% syntaxes.forEach(function(syntax) { %>\n 

<%= syntax %>
\n <% }) %>\n

\n
\n\n\n<% if (item.params) { %>\n
\n

Parameters

\n \n
\n<% } %>\n\n<% if (item.return && item.return.type) { %>\n
\n

Returns

\n

<%=item.return.type%>: <%= item.return.description %>

\n
\n<% } %>\n\n<% } %>\n';}); +define('text!tpl/item.html',[],function () { return '

<%=item.name%><% if (item.isMethod) { %>()<% } %>

\r\n\r\n<% if (item.example) { %>\r\n
\r\n

Examples

\r\n\r\n
\r\n <% _.each(item.example, function(example, i){ %>\r\n <%= example %>\r\n <% }); %>\r\n
\r\n
\r\n<% } %>\r\n\r\n
\r\n\r\n

Description

\r\n\r\n <% if (item.deprecated) { %>\r\n

\r\n Deprecated: <%=item.name%><% if (item.isMethod) { %>()<% } %> is deprecated and will be removed in a future version of p5. <% if (item.deprecationMessage) { %><%=item.deprecationMessage%><% } %>\r\n

\r\n <% } %>\r\n\r\n\r\n <%= item.description %>\r\n\r\n <% if (item.extends) { %>\r\n

Extends <%=item.extends%>

\r\n <% } %>\r\n\r\n <% if (item.module === \'p5.sound\') { %>\r\n

This function requires you include the p5.sound library. Add the following into the head of your index.html file:\r\n 

<script src="path/to/p5.sound.js"></script>
\r\n

\r\n <% } %>\r\n\r\n <% if (item.constRefs) { %>\r\n

Used by:\r\n <%\r\n var refs = item.constRefs;\r\n for (var i = 0; i < refs.length; i ++) {\r\n var ref = refs[i];\r\n var name = ref;\r\n if (name.substr(0, 3) === \'p5.\') {\r\n name = name.substr(3);\r\n }\r\n if (i !== 0) {\r\n if (i == refs.length - 1) {\r\n %> and <%\r\n } else {\r\n %>, <%\r\n }\r\n }\r\n %><%= name %>()<%\r\n }\r\n %>\r\n

\r\n <% } %>\r\n
\r\n\r\n<% if (isConstructor || !isClass) { %>\r\n\r\n
\r\n

Syntax

\r\n

\r\n <% syntaxes.forEach(function(syntax) { %>\r\n 

<%= syntax %>
\r\n <% }) %>\r\n

\r\n
\r\n\r\n\r\n<% if (item.params) { %>\r\n
\r\n

Parameters

\r\n \r\n
\r\n<% } %>\r\n\r\n<% if (item.return && item.return.type) { %>\r\n
\r\n

Returns

\r\n

<%=item.return.type%>: <%= item.return.description %>

\r\n
\r\n<% } %>\r\n\r\n<% } %>\r\n';}); -define('text!tpl/class.html',[],function () { return '\n<% if (typeof constructor !== \'undefined\') { %>\n
\n <%=constructor%>\n
\n<% } %>\n\n<% let fields = _.filter(things, function(item) { return item.itemtype === \'property\' && item.access !== \'private\' }); %>\n<% if (fields.length > 0) { %>\n

Fields

\n \n<% } %>\n\n<% let methods = _.filter(things, function(item) { return item.itemtype === \'method\' && item.access !== \'private\' }); %>\n<% if (methods.length > 0) { %>\n

Methods

\n \n<% } %>\n';}); +define('text!tpl/class.html',[],function () { return '\r\n<% if (typeof constructor !== \'undefined\') { %>\r\n
\r\n <%=constructor%>\r\n
\r\n<% } %>\r\n\r\n<% let fields = _.filter(things, function(item) { return item.itemtype === \'property\' && item.access !== \'private\' }); %>\r\n<% if (fields.length > 0) { %>\r\n

Fields

\r\n \r\n<% } %>\r\n\r\n<% let methods = _.filter(things, function(item) { return item.itemtype === \'method\' && item.access !== \'private\' }); %>\r\n<% if (methods.length > 0) { %>\r\n

Methods

\r\n \r\n<% } %>\r\n';}); -define('text!tpl/itemEnd.html',[],function () { return '\n

\n\n
\n<% if (item.file && item.line) { %>\nNotice any errors or typos? Please let us know. Please feel free to edit <%= item.file %> and issue a pull request!\n<% } %>\n
\n\ncreative commons logo\n

\n';}); +define('text!tpl/itemEnd.html',[],function () { return '\r\n

\r\n\r\n
\r\n<% if (item.file && item.line) { %>\r\nNotice any errors or typos? Please let us know. Please feel free to edit <%= item.file %> and issue a pull request!\r\n<% } %>\r\n
\r\n\r\ncreative commons logo\r\n

\r\n';}); // Copyright (C) 2006 Google Inc. // @@ -4335,7 +4335,7 @@ define('itemView',[ }); -define('text!tpl/menu.html',[],function () { return '
\n
\n Can\'t find what you\'re looking for? You may want to check out\n p5.sound.
You can also download an offline version of the reference.\n
\n\n
\n

Categories

\n<% var i=0; %>\n<% var max=Math.floor(groups.length/4); %>\n<% var rem=groups.length%4; %>\n\n<% _.each(groups, function(group){ %>\n <% var m = rem > 0 ? 1 : 0 %>\n <% if (i === 0) { %>\n \n \t<% rem-- %>\n \t<% i=0 %>\n <% } else { %>\n \t<% i++ %>\n <% } %>\n<% }); %>\n
\n';}); +define('text!tpl/menu.html',[],function () { return '
\r\n
\r\n Can\'t find what you\'re looking for? You may want to check out\r\n p5.sound.
You can also download an offline version of the reference.\r\n
\r\n\r\n
\r\n

Categories

\r\n<% var i=0; %>\r\n<% var max=Math.floor(groups.length/4); %>\r\n<% var rem=groups.length%4; %>\r\n\r\n<% _.each(groups, function(group){ %>\r\n <% var m = rem > 0 ? 1 : 0 %>\r\n <% if (i === 0) { %>\r\n \r\n \t<% rem-- %>\r\n \t<% i=0 %>\r\n <% } else { %>\r\n \t<% i++ %>\r\n <% } %>\r\n<% }); %>\r\n
\r\n';}); define('menuView',[ 'App', @@ -4404,7 +4404,7 @@ define('menuView',[ }); -define('text!tpl/library.html',[],function () { return '

<%= module.name %> library

\n\n

<%= module.description %>

\n\n
\n\n<% var t = 0; col = 0; %>\n\n<% _.each(groups, function(group){ %>\n <% if (t == 0) { %> \n
\n <% } %>\n <% if (group.name !== module.name && group.name !== \'p5\') { %>\n <% if (group.hash) { %> class="core"<% } %>><% } %> \n

<%=group.name%>

\n <% if (group.hash) { %>
<% } %>\n <% } %>\n <% _.each(group.items.filter(function(item) {return item.access !== \'private\'}), function(item) { %>\n class="core"<% } %>><%=item.name%><% if (item.itemtype === \'method\') { %>()<%}%>
\n <% t++; %>\n <% }); %>\n <% if (t >= Math.floor(totalItems/4)) { col++; t = 0; %>\n
\n <% } %>\n<% }); %>\n
\n';}); +define('text!tpl/library.html',[],function () { return '

<%= module.name %> library

\r\n\r\n

<%= module.description %>

\r\n\r\n
\r\n\r\n<% var t = 0; col = 0; %>\r\n\r\n<% _.each(groups, function(group){ %>\r\n <% if (t == 0) { %> \r\n
\r\n <% } %>\r\n <% if (group.name !== module.name && group.name !== \'p5\') { %>\r\n <% if (group.hash) { %> class="core"<% } %>><% } %> \r\n

<%=group.name%>

\r\n <% if (group.hash) { %>
<% } %>\r\n <% } %>\r\n <% _.each(group.items.filter(function(item) {return item.access !== \'private\'}), function(item) { %>\r\n class="core"<% } %>><%=item.name%><% if (item.itemtype === \'method\') { %>()<%}%>
\r\n <% t++; %>\r\n <% }); %>\r\n <% if (t >= Math.floor(totalItems/4)) { col++; t = 0; %>\r\n
\r\n <% } %>\r\n<% }); %>\r\n
\r\n';}); define( 'libraryView',[ diff --git a/src/data/data.yml b/src/data/data.yml index f6e0a9acca..ad2433e73d 100644 --- a/src/data/data.yml +++ b/src/data/data.yml @@ -1,2 +1,2 @@ title: p5.js -version: 1.1.9 +version: 1.2.0 diff --git a/src/templates/pages/reference/assets/Avenir.otf b/src/templates/pages/reference/assets/Avenir.otf deleted file mode 100644 index 38941ae72f5c9b0d9f3ba46c812778261177698c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 127448 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 diff --git a/src/templates/pages/reference/assets/AvenirNextLTPro-Demi.otf b/src/templates/pages/reference/assets/AvenirNextLTPro-Demi.otf deleted file mode 100644 index 750b0c599400e4ed4480a40e96fc7691a646d329..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 69940 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 From bd7a6745cf7bcaa3b2088a2090297b9eb6b293b7 Mon Sep 17 00:00:00 2001 From: sanjay rajpoot Date: Mon, 29 Mar 2021 20:39:40 +0530 Subject: [PATCH 02/10] Files changed --- package.json | 4 +- src/assets/js/reference.js | 9528 ++++++++++++++++++------------------ 2 files changed, 4766 insertions(+), 4766 deletions(-) diff --git a/package.json b/package.json index 81a56887a2..5ae6e6345c 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,7 @@ "grunt-file-append": "0.0.7", "grunt-html": "^11.1.1", "grunt-newer": "^1.3.0", - "grunt-postcss": "^0.9.0", + "grunt-postcss": "^0.8.0", "grunt-serve": "^0.1.6", "grunt-shell": "^3.0.1", "grunt-uncss": "^0.8.6", @@ -92,4 +92,4 @@ "dependencies": { "upath": "^1.2.0" } -} +} \ No newline at end of file diff --git a/src/assets/js/reference.js b/src/assets/js/reference.js index 499651487e..5b4baa0ecd 100644 --- a/src/assets/js/reference.js +++ b/src/assets/js/reference.js @@ -1,4948 +1,4948 @@ (function () { -// https://github.com/umdjs/umd/blob/master/templates/returnExports.js -(function (root, factory) { - if (typeof define === 'function' && define.amd) { - define('documented-method',[], factory); - } else if (typeof module === 'object' && module.exports) { - module.exports = factory(); - } else { - root.DocumentedMethod = factory(); - } -}(this, function () { - function extend(target, src) { - Object.keys(src).forEach(function(prop) { - target[prop] = src[prop]; - }); - return target; - } - - function DocumentedMethod(classitem) { - extend(this, classitem); - - if (this.overloads) { - // Make each overload inherit properties from their parent - // classitem. - this.overloads = this.overloads.map(function(overload) { - return extend(Object.create(this), overload); - }, this); - - if (this.params) { - throw new Error('params for overloaded methods should be undefined'); - } - - this.params = this._getMergedParams(); + // https://github.com/umdjs/umd/blob/master/templates/returnExports.js + (function (root, factory) { + if (typeof define === 'function' && define.amd) { + define('documented-method',[], factory); + } else if (typeof module === 'object' && module.exports) { + module.exports = factory(); + } else { + root.DocumentedMethod = factory(); } - } - - DocumentedMethod.prototype = { - // Merge parameters across all overloaded versions of this item. - _getMergedParams: function() { - var paramNames = {}; - var params = []; - - this.overloads.forEach(function(overload) { - if (!overload.params) { - return; - } - overload.params.forEach(function(param) { - if (param.name in paramNames) { - return; - } - paramNames[param.name] = param; - params.push(param); - }); + }(this, function () { + function extend(target, src) { + Object.keys(src).forEach(function(prop) { + target[prop] = src[prop]; }); - - return params; + return target; } - }; - - return DocumentedMethod; -})); - -/** - * @license RequireJS text 2.0.10 Copyright (c) 2010-2012, The Dojo Foundation All Rights Reserved. - * Available via the MIT or new BSD license. - * see: http://github.com/requirejs/text for details - */ -/*jslint regexp: true */ -/*global require, XMLHttpRequest, ActiveXObject, - define, window, process, Packages, - java, location, Components, FileUtils */ - -define('text',['module'], function (module) { - 'use strict'; - - var text, fs, Cc, Ci, xpcIsWindows, - progIds = ['Msxml2.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.4.0'], - xmlRegExp = /^\s*<\?xml(\s)+version=[\'\"](\d)*.(\d)*[\'\"](\s)*\?>/im, - bodyRegExp = /]*>\s*([\s\S]+)\s*<\/body>/im, - hasLocation = typeof location !== 'undefined' && location.href, - defaultProtocol = hasLocation && location.protocol && location.protocol.replace(/\:/, ''), - defaultHostName = hasLocation && location.hostname, - defaultPort = hasLocation && (location.port || undefined), - buildMap = {}, - masterConfig = (module.config && module.config()) || {}; - - text = { - version: '2.0.10', - - strip: function (content) { - //Strips declarations so that external SVG and XML - //documents can be added to a document without worry. Also, if the string - //is an HTML document, only the part inside the body tag is returned. - if (content) { - content = content.replace(xmlRegExp, ""); - var matches = content.match(bodyRegExp); - if (matches) { - content = matches[1]; - } - } else { - content = ""; - } - return content; - }, - - jsEscape: function (content) { - return content.replace(/(['\\])/g, '\\$1') - .replace(/[\f]/g, "\\f") - .replace(/[\b]/g, "\\b") - .replace(/[\n]/g, "\\n") - .replace(/[\t]/g, "\\t") - .replace(/[\r]/g, "\\r") - .replace(/[\u2028]/g, "\\u2028") - .replace(/[\u2029]/g, "\\u2029"); - }, - - createXhr: masterConfig.createXhr || function () { - //Would love to dump the ActiveX crap in here. Need IE 6 to die first. - var xhr, i, progId; - if (typeof XMLHttpRequest !== "undefined") { - return new XMLHttpRequest(); - } else if (typeof ActiveXObject !== "undefined") { - for (i = 0; i < 3; i += 1) { - progId = progIds[i]; - try { - xhr = new ActiveXObject(progId); - } catch (e) {} - - if (xhr) { - progIds = [progId]; // so faster next time - break; - } - } - } - - return xhr; - }, - - /** - * Parses a resource name into its component parts. Resource names - * look like: module/name.ext!strip, where the !strip part is - * optional. - * @param {String} name the resource name - * @returns {Object} with properties "moduleName", "ext" and "strip" - * where strip is a boolean. - */ - parseName: function (name) { - var modName, ext, temp, - strip = false, - index = name.indexOf("."), - isRelative = name.indexOf('./') === 0 || - name.indexOf('../') === 0; - - if (index !== -1 && (!isRelative || index > 1)) { - modName = name.substring(0, index); - ext = name.substring(index + 1, name.length); - } else { - modName = name; - } - - temp = ext || modName; - index = temp.indexOf("!"); - if (index !== -1) { - //Pull off the strip arg. - strip = temp.substring(index + 1) === "strip"; - temp = temp.substring(0, index); - if (ext) { - ext = temp; - } else { - modName = temp; - } - } - - return { - moduleName: modName, - ext: ext, - strip: strip - }; - }, - - xdRegExp: /^((\w+)\:)?\/\/([^\/\\]+)/, - - /** - * Is an URL on another domain. Only works for browser use, returns - * false in non-browser environments. Only used to know if an - * optimized .js version of a text resource should be loaded - * instead. - * @param {String} url - * @returns Boolean - */ - useXhr: function (url, protocol, hostname, port) { - var uProtocol, uHostName, uPort, - match = text.xdRegExp.exec(url); - if (!match) { - return true; - } - uProtocol = match[2]; - uHostName = match[3]; - - uHostName = uHostName.split(':'); - uPort = uHostName[1]; - uHostName = uHostName[0]; - - return (!uProtocol || uProtocol === protocol) && - (!uHostName || uHostName.toLowerCase() === hostname.toLowerCase()) && - ((!uPort && !uHostName) || uPort === port); - }, - - finishLoad: function (name, strip, content, onLoad) { - content = strip ? text.strip(content) : content; - if (masterConfig.isBuild) { - buildMap[name] = content; - } - onLoad(content); - }, - - load: function (name, req, onLoad, config) { - //Name has format: some.module.filext!strip - //The strip part is optional. - //if strip is present, then that means only get the string contents - //inside a body tag in an HTML string. For XML/SVG content it means - //removing the declarations so the content can be inserted - //into the current doc without problems. - - // Do not bother with the work if a build and text will - // not be inlined. - if (config.isBuild && !config.inlineText) { - onLoad(); - return; - } - - masterConfig.isBuild = config.isBuild; - - var parsed = text.parseName(name), - nonStripName = parsed.moduleName + - (parsed.ext ? '.' + parsed.ext : ''), - url = req.toUrl(nonStripName), - useXhr = (masterConfig.useXhr) || - text.useXhr; - - // Do not load if it is an empty: url - if (url.indexOf('empty:') === 0) { - onLoad(); - return; - } - - //Load the text. Use XHR if possible and in a browser. - if (!hasLocation || useXhr(url, defaultProtocol, defaultHostName, defaultPort)) { - text.get(url, function (content) { - text.finishLoad(name, parsed.strip, content, onLoad); - }, function (err) { - if (onLoad.error) { - onLoad.error(err); - } - }); - } else { - //Need to fetch the resource across domains. Assume - //the resource has been optimized into a JS module. Fetch - //by the module name + extension, but do not include the - //!strip part to avoid file system issues. - req([nonStripName], function (content) { - text.finishLoad(parsed.moduleName + '.' + parsed.ext, - parsed.strip, content, onLoad); - }); - } - }, - - write: function (pluginName, moduleName, write, config) { - if (buildMap.hasOwnProperty(moduleName)) { - var content = text.jsEscape(buildMap[moduleName]); - write.asModule(pluginName + "!" + moduleName, - "define(function () { return '" + - content + - "';});\n"); - } - }, - - writeFile: function (pluginName, moduleName, req, write, config) { - var parsed = text.parseName(moduleName), - extPart = parsed.ext ? '.' + parsed.ext : '', - nonStripName = parsed.moduleName + extPart, - //Use a '.js' file name so that it indicates it is a - //script that can be loaded across domains. - fileName = req.toUrl(parsed.moduleName + extPart) + '.js'; - - //Leverage own load() method to load plugin value, but only - //write out values that do not have the strip argument, - //to avoid any potential issues with ! in file names. - text.load(nonStripName, req, function (value) { - //Use own write() method to construct full module value. - //But need to create shell that translates writeFile's - //write() to the right interface. - var textWrite = function (contents) { - return write(fileName, contents); - }; - textWrite.asModule = function (moduleName, contents) { - return write.asModule(moduleName, fileName, contents); - }; - - text.write(pluginName, nonStripName, textWrite, config); - }, config); + + function DocumentedMethod(classitem) { + extend(this, classitem); + + if (this.overloads) { + // Make each overload inherit properties from their parent + // classitem. + this.overloads = this.overloads.map(function(overload) { + return extend(Object.create(this), overload); + }, this); + + if (this.params) { + throw new Error('params for overloaded methods should be undefined'); } - }; - - if (masterConfig.env === 'node' || (!masterConfig.env && - typeof process !== "undefined" && - process.versions && - !!process.versions.node && - !process.versions['node-webkit'])) { - //Using special require.nodeRequire, something added by r.js. - fs = require.nodeRequire('fs'); - - text.get = function (url, callback, errback) { - try { - var file = fs.readFileSync(url, 'utf8'); - //Remove BOM (Byte Mark Order) from utf8 files if it is there. - if (file.indexOf('\uFEFF') === 0) { - file = file.substring(1); - } - callback(file); - } catch (e) { - errback(e); - } - }; - } else if (masterConfig.env === 'xhr' || (!masterConfig.env && - text.createXhr())) { - text.get = function (url, callback, errback, headers) { - var xhr = text.createXhr(), header; - xhr.open('GET', url, true); - - //Allow plugins direct access to xhr headers - if (headers) { - for (header in headers) { - if (headers.hasOwnProperty(header)) { - xhr.setRequestHeader(header.toLowerCase(), headers[header]); - } - } - } - - //Allow overrides specified in config - if (masterConfig.onXhr) { - masterConfig.onXhr(xhr, url); - } - - xhr.onreadystatechange = function (evt) { - var status, err; - //Do not explicitly handle errors, those should be - //visible via console output in the browser. - if (xhr.readyState === 4) { - status = xhr.status; - if (status > 399 && status < 600) { - //An http 4xx or 5xx error. Signal an error. - err = new Error(url + ' HTTP status: ' + status); - err.xhr = xhr; - errback(err); - } else { - callback(xhr.responseText); - } - - if (masterConfig.onXhrComplete) { - masterConfig.onXhrComplete(xhr, url); - } - } - }; - xhr.send(null); - }; - } else if (masterConfig.env === 'rhino' || (!masterConfig.env && - typeof Packages !== 'undefined' && typeof java !== 'undefined')) { - //Why Java, why is this so awkward? - text.get = function (url, callback) { - var stringBuffer, line, - encoding = "utf-8", - file = new java.io.File(url), - lineSeparator = java.lang.System.getProperty("line.separator"), - input = new java.io.BufferedReader(new java.io.InputStreamReader(new java.io.FileInputStream(file), encoding)), - content = ''; - try { - stringBuffer = new java.lang.StringBuffer(); - line = input.readLine(); - - // Byte Order Mark (BOM) - The Unicode Standard, version 3.0, page 324 - // http://www.unicode.org/faq/utf_bom.html - - // Note that when we use utf-8, the BOM should appear as "EF BB BF", but it doesn't due to this bug in the JDK: - // http://bugs.sun.com/bugdatabase/view_bug.do?bug_id=4508058 - if (line && line.length() && line.charAt(0) === 0xfeff) { - // Eat the BOM, since we've already found the encoding on this file, - // and we plan to concatenating this buffer with others; the BOM should - // only appear at the top of a file. - line = line.substring(1); - } - - if (line !== null) { - stringBuffer.append(line); - } - - while ((line = input.readLine()) !== null) { - stringBuffer.append(lineSeparator); - stringBuffer.append(line); - } - //Make sure we return a JavaScript string and not a Java string. - content = String(stringBuffer.toString()); //String - } finally { - input.close(); - } - callback(content); - }; - } else if (masterConfig.env === 'xpconnect' || (!masterConfig.env && - typeof Components !== 'undefined' && Components.classes && - Components.interfaces)) { - //Avert your gaze! - Cc = Components.classes, - Ci = Components.interfaces; - Components.utils['import']('resource://gre/modules/FileUtils.jsm'); - xpcIsWindows = ('@mozilla.org/windows-registry-key;1' in Cc); - - text.get = function (url, callback) { - var inStream, convertStream, fileObj, - readData = {}; - - if (xpcIsWindows) { - url = url.replace(/\//g, '\\'); - } - - fileObj = new FileUtils.File(url); - - //XPCOM, you so crazy - try { - inStream = Cc['@mozilla.org/network/file-input-stream;1'] - .createInstance(Ci.nsIFileInputStream); - inStream.init(fileObj, 1, 0, false); - - convertStream = Cc['@mozilla.org/intl/converter-input-stream;1'] - .createInstance(Ci.nsIConverterInputStream); - convertStream.init(inStream, "utf-8", inStream.available(), - Ci.nsIConverterInputStream.DEFAULT_REPLACEMENT_CHARACTER); - - convertStream.readString(inStream.available(), readData); - convertStream.close(); - inStream.close(); - callback(readData.value); - } catch (e) { - throw new Error((fileObj && fileObj.path || '') + ': ' + e); - } - }; + + this.params = this._getMergedParams(); + } } - return text; -}); - - -define('text!tpl/search.html',[],function () { return '

search

\r\n
\r\n \r\n \r\n
\r\n\r\n';}); - - -define('text!tpl/search_suggestion.html',[],function () { return '

\r\n\r\n <%=name%>\r\n\r\n \r\n <% if (final) { %>\r\n constant\r\n <% } else if (itemtype) { %>\r\n <%=itemtype%> \r\n <% } %>\r\n\r\n <% if (className) { %>\r\n in <%=className%>\r\n <% } %>\r\n\r\n <% if (typeof is_constructor !== \'undefined\' && is_constructor) { %>\r\n constructor\r\n <% } %>\r\n \r\n\r\n

';}); - -/*! - * typeahead.js 0.10.2 - * https://github.com/twitter/typeahead.js - * Copyright 2013-2014 Twitter, Inc. and other contributors; Licensed MIT - */ -define('typeahead',[], function() { - -//(function($) { - - - var _ = { - isMsie: function() { - return /(msie|trident)/i.test(navigator.userAgent) ? navigator.userAgent.match(/(msie |rv:)(\d+(.\d+)?)/i)[2] : false; - }, - isBlankString: function(str) { - return !str || /^\s*$/.test(str); - }, - escapeRegExChars: function(str) { - return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); - }, - isString: function(obj) { - return typeof obj === "string"; - }, - isNumber: function(obj) { - return typeof obj === "number"; - }, - isArray: $.isArray, - isFunction: $.isFunction, - isObject: $.isPlainObject, - isUndefined: function(obj) { - return typeof obj === "undefined"; - }, - bind: $.proxy, - each: function(collection, cb) { - $.each(collection, reverseArgs); - function reverseArgs(index, value) { - return cb(value, index); - } - }, - map: $.map, - filter: $.grep, - every: function(obj, test) { - var result = true; - if (!obj) { - return result; - } - $.each(obj, function(key, val) { - if (!(result = test.call(null, val, key, obj))) { - return false; - } - }); - return !!result; - }, - some: function(obj, test) { - var result = false; - if (!obj) { - return result; - } - $.each(obj, function(key, val) { - if (result = test.call(null, val, key, obj)) { - return false; - } - }); - return !!result; - }, - mixin: $.extend, - getUniqueId: function() { - var counter = 0; - return function() { - return counter++; - }; - }(), - templatify: function templatify(obj) { - return $.isFunction(obj) ? obj : template; - function template() { - return String(obj); - } - }, - defer: function(fn) { - setTimeout(fn, 0); - }, - debounce: function(func, wait, immediate) { - var timeout, result; - return function() { - var context = this, args = arguments, later, callNow; - later = function() { - timeout = null; - if (!immediate) { - result = func.apply(context, args); - } - }; - callNow = immediate && !timeout; - clearTimeout(timeout); - timeout = setTimeout(later, wait); - if (callNow) { - result = func.apply(context, args); - } - return result; - }; - }, - throttle: function(func, wait) { - var context, args, timeout, result, previous, later; - previous = 0; - later = function() { - previous = new Date(); - timeout = null; - result = func.apply(context, args); - }; - return function() { - var now = new Date(), remaining = wait - (now - previous); - context = this; - args = arguments; - if (remaining <= 0) { - clearTimeout(timeout); - timeout = null; - previous = now; - result = func.apply(context, args); - } else if (!timeout) { - timeout = setTimeout(later, remaining); - } - return result; - }; - }, - noop: function() {} - }; - var VERSION = "0.10.2"; - var tokenizers = function(root) { - return { - nonword: nonword, - whitespace: whitespace, - obj: { - nonword: getObjTokenizer(nonword), - whitespace: getObjTokenizer(whitespace) - } - }; - function whitespace(s) { - return s.split(/\s+/); - } - function nonword(s) { - return s.split(/\W+/); - } - function getObjTokenizer(tokenizer) { - return function setKey(key) { - return function tokenize(o) { - return tokenizer(o[key]); - }; - }; - } - }(); - var LruCache = function() { - function LruCache(maxSize) { - this.maxSize = maxSize || 100; - this.size = 0; - this.hash = {}; - this.list = new List(); - } - _.mixin(LruCache.prototype, { - set: function set(key, val) { - var tailItem = this.list.tail, node; - if (this.size >= this.maxSize) { - this.list.remove(tailItem); - delete this.hash[tailItem.key]; - } - if (node = this.hash[key]) { - node.val = val; - this.list.moveToFront(node); - } else { - node = new Node(key, val); - this.list.add(node); - this.hash[key] = node; - this.size++; - } - }, - get: function get(key) { - var node = this.hash[key]; - if (node) { - this.list.moveToFront(node); - return node.val; - } - } - }); - function List() { - this.head = this.tail = null; - } - _.mixin(List.prototype, { - add: function add(node) { - if (this.head) { - node.next = this.head; - this.head.prev = node; - } - this.head = node; - this.tail = this.tail || node; - }, - remove: function remove(node) { - node.prev ? node.prev.next = node.next : this.head = node.next; - node.next ? node.next.prev = node.prev : this.tail = node.prev; - }, - moveToFront: function(node) { - this.remove(node); - this.add(node); - } - }); - function Node(key, val) { - this.key = key; - this.val = val; - this.prev = this.next = null; - } - return LruCache; - }(); - var PersistentStorage = function() { - var ls, methods; - try { - ls = window.localStorage; - ls.setItem("~~~", "!"); - ls.removeItem("~~~"); - } catch (err) { - ls = null; - } - function PersistentStorage(namespace) { - this.prefix = [ "__", namespace, "__" ].join(""); - this.ttlKey = "__ttl__"; - this.keyMatcher = new RegExp("^" + this.prefix); - } - if (ls && window.JSON) { - methods = { - _prefix: function(key) { - return this.prefix + key; - }, - _ttlKey: function(key) { - return this._prefix(key) + this.ttlKey; - }, - get: function(key) { - if (this.isExpired(key)) { - this.remove(key); - } - return decode(ls.getItem(this._prefix(key))); - }, - set: function(key, val, ttl) { - if (_.isNumber(ttl)) { - ls.setItem(this._ttlKey(key), encode(now() + ttl)); - } else { - ls.removeItem(this._ttlKey(key)); - } - return ls.setItem(this._prefix(key), encode(val)); - }, - remove: function(key) { - ls.removeItem(this._ttlKey(key)); - ls.removeItem(this._prefix(key)); - return this; - }, - clear: function() { - var i, key, keys = [], len = ls.length; - for (i = 0; i < len; i++) { - if ((key = ls.key(i)).match(this.keyMatcher)) { - keys.push(key.replace(this.keyMatcher, "")); - } - } - for (i = keys.length; i--; ) { - this.remove(keys[i]); - } - return this; - }, - isExpired: function(key) { - var ttl = decode(ls.getItem(this._ttlKey(key))); - return _.isNumber(ttl) && now() > ttl ? true : false; - } - }; - } else { - methods = { - get: _.noop, - set: _.noop, - remove: _.noop, - clear: _.noop, - isExpired: _.noop - }; - } - _.mixin(PersistentStorage.prototype, methods); - return PersistentStorage; - function now() { - return new Date().getTime(); - } - function encode(val) { - return JSON.stringify(_.isUndefined(val) ? null : val); - } - function decode(val) { - return JSON.parse(val); - } - }(); - var Transport = function() { - var pendingRequestsCount = 0, pendingRequests = {}, maxPendingRequests = 6, requestCache = new LruCache(10); - function Transport(o) { - o = o || {}; - this._send = o.transport ? callbackToDeferred(o.transport) : $.ajax; - this._get = o.rateLimiter ? o.rateLimiter(this._get) : this._get; - } - Transport.setMaxPendingRequests = function setMaxPendingRequests(num) { - maxPendingRequests = num; - }; - Transport.resetCache = function clearCache() { - requestCache = new LruCache(10); - }; - _.mixin(Transport.prototype, { - _get: function(url, o, cb) { - var that = this, jqXhr; - if (jqXhr = pendingRequests[url]) { - jqXhr.done(done).fail(fail); - } else if (pendingRequestsCount < maxPendingRequests) { - pendingRequestsCount++; - pendingRequests[url] = this._send(url, o).done(done).fail(fail).always(always); - } else { - this.onDeckRequestArgs = [].slice.call(arguments, 0); - } - function done(resp) { - cb && cb(null, resp); - requestCache.set(url, resp); - } - function fail() { - cb && cb(true); - } - function always() { - pendingRequestsCount--; - delete pendingRequests[url]; - if (that.onDeckRequestArgs) { - that._get.apply(that, that.onDeckRequestArgs); - that.onDeckRequestArgs = null; - } - } - }, - get: function(url, o, cb) { - var resp; - if (_.isFunction(o)) { - cb = o; - o = {}; - } - if (resp = requestCache.get(url)) { - _.defer(function() { - cb && cb(null, resp); - }); - } else { - this._get(url, o, cb); - } - return !!resp; - } - }); - return Transport; - function callbackToDeferred(fn) { - return function customSendWrapper(url, o) { - var deferred = $.Deferred(); - fn(url, o, onSuccess, onError); - return deferred; - function onSuccess(resp) { - _.defer(function() { - deferred.resolve(resp); - }); - } - function onError(err) { - _.defer(function() { - deferred.reject(err); - }); - } - }; - } - }(); - var SearchIndex = function() { - function SearchIndex(o) { - o = o || {}; - if (!o.datumTokenizer || !o.queryTokenizer) { - $.error("datumTokenizer and queryTokenizer are both required"); - } - this.datumTokenizer = o.datumTokenizer; - this.queryTokenizer = o.queryTokenizer; - this.reset(); - } - _.mixin(SearchIndex.prototype, { - bootstrap: function bootstrap(o) { - this.datums = o.datums; - this.trie = o.trie; - }, - add: function(data) { - var that = this; - data = _.isArray(data) ? data : [ data ]; - _.each(data, function(datum) { - var id, tokens; - id = that.datums.push(datum) - 1; - tokens = normalizeTokens(that.datumTokenizer(datum)); - _.each(tokens, function(token) { - var node, chars, ch; - node = that.trie; - chars = token.split(""); - while (ch = chars.shift()) { - node = node.children[ch] || (node.children[ch] = newNode()); - node.ids.push(id); - } - }); - }); - }, - get: function get(query) { - var that = this, tokens, matches; - tokens = normalizeTokens(this.queryTokenizer(query)); - _.each(tokens, function(token) { - var node, chars, ch, ids; - if (matches && matches.length === 0) { - return false; - } - node = that.trie; - chars = token.split(""); - while (node && (ch = chars.shift())) { - node = node.children[ch]; - } - if (node && chars.length === 0) { - ids = node.ids.slice(0); - matches = matches ? getIntersection(matches, ids) : ids; - } else { - matches = []; - return false; - } - }); - return matches ? _.map(unique(matches), function(id) { - return that.datums[id]; - }) : []; - }, - reset: function reset() { - this.datums = []; - this.trie = newNode(); - }, - serialize: function serialize() { - return { - datums: this.datums, - trie: this.trie - }; - } - }); - return SearchIndex; - function normalizeTokens(tokens) { - tokens = _.filter(tokens, function(token) { - return !!token; - }); - tokens = _.map(tokens, function(token) { - return token.toLowerCase(); - }); - return tokens; - } - function newNode() { - return { - ids: [], - children: {} - }; - } - function unique(array) { - var seen = {}, uniques = []; - for (var i = 0; i < array.length; i++) { - if (!seen[array[i]]) { - seen[array[i]] = true; - uniques.push(array[i]); - } - } - return uniques; - } - function getIntersection(arrayA, arrayB) { - var ai = 0, bi = 0, intersection = []; - arrayA = arrayA.sort(compare); - arrayB = arrayB.sort(compare); - while (ai < arrayA.length && bi < arrayB.length) { - if (arrayA[ai] < arrayB[bi]) { - ai++; - } else if (arrayA[ai] > arrayB[bi]) { - bi++; - } else { - intersection.push(arrayA[ai]); - ai++; - bi++; - } - } - return intersection; - function compare(a, b) { - return a - b; - } - } - }(); - var oParser = function() { - return { - local: getLocal, - prefetch: getPrefetch, - remote: getRemote - }; - function getLocal(o) { - return o.local || null; - } - function getPrefetch(o) { - var prefetch, defaults; - defaults = { - url: null, - thumbprint: "", - ttl: 24 * 60 * 60 * 1e3, - filter: null, - ajax: {} - }; - if (prefetch = o.prefetch || null) { - prefetch = _.isString(prefetch) ? { - url: prefetch - } : prefetch; - prefetch = _.mixin(defaults, prefetch); - prefetch.thumbprint = VERSION + prefetch.thumbprint; - prefetch.ajax.type = prefetch.ajax.type || "GET"; - prefetch.ajax.dataType = prefetch.ajax.dataType || "json"; - !prefetch.url && $.error("prefetch requires url to be set"); - } - return prefetch; - } - function getRemote(o) { - var remote, defaults; - defaults = { - url: null, - wildcard: "%QUERY", - replace: null, - rateLimitBy: "debounce", - rateLimitWait: 300, - send: null, - filter: null, - ajax: {} - }; - if (remote = o.remote || null) { - remote = _.isString(remote) ? { - url: remote - } : remote; - remote = _.mixin(defaults, remote); - remote.rateLimiter = /^throttle$/i.test(remote.rateLimitBy) ? byThrottle(remote.rateLimitWait) : byDebounce(remote.rateLimitWait); - remote.ajax.type = remote.ajax.type || "GET"; - remote.ajax.dataType = remote.ajax.dataType || "json"; - delete remote.rateLimitBy; - delete remote.rateLimitWait; - !remote.url && $.error("remote requires url to be set"); - } - return remote; - function byDebounce(wait) { - return function(fn) { - return _.debounce(fn, wait); - }; - } - function byThrottle(wait) { - return function(fn) { - return _.throttle(fn, wait); - }; - } - } - }(); - (function(root) { - var old, keys; - old = root.Bloodhound; - keys = { - data: "data", - protocol: "protocol", - thumbprint: "thumbprint" - }; - root.Bloodhound = Bloodhound; - function Bloodhound(o) { - if (!o || !o.local && !o.prefetch && !o.remote) { - $.error("one of local, prefetch, or remote is required"); - } - this.limit = o.limit || 5; - this.sorter = getSorter(o.sorter); - this.dupDetector = o.dupDetector || ignoreDuplicates; - this.local = oParser.local(o); - this.prefetch = oParser.prefetch(o); - this.remote = oParser.remote(o); - this.cacheKey = this.prefetch ? this.prefetch.cacheKey || this.prefetch.url : null; - this.index = new SearchIndex({ - datumTokenizer: o.datumTokenizer, - queryTokenizer: o.queryTokenizer - }); - this.storage = this.cacheKey ? new PersistentStorage(this.cacheKey) : null; - } - Bloodhound.noConflict = function noConflict() { - root.Bloodhound = old; - return Bloodhound; - }; - Bloodhound.tokenizers = tokenizers; - _.mixin(Bloodhound.prototype, { - _loadPrefetch: function loadPrefetch(o) { - var that = this, serialized, deferred; - if (serialized = this._readFromStorage(o.thumbprint)) { - this.index.bootstrap(serialized); - deferred = $.Deferred().resolve(); - } else { - deferred = $.ajax(o.url, o.ajax).done(handlePrefetchResponse); - } - return deferred; - function handlePrefetchResponse(resp) { - that.clear(); - that.add(o.filter ? o.filter(resp) : resp); - that._saveToStorage(that.index.serialize(), o.thumbprint, o.ttl); - } - }, - _getFromRemote: function getFromRemote(query, cb) { - var that = this, url, uriEncodedQuery; - query = query || ""; - uriEncodedQuery = encodeURIComponent(query); - url = this.remote.replace ? this.remote.replace(this.remote.url, query) : this.remote.url.replace(this.remote.wildcard, uriEncodedQuery); - return this.transport.get(url, this.remote.ajax, handleRemoteResponse); - function handleRemoteResponse(err, resp) { - err ? cb([]) : cb(that.remote.filter ? that.remote.filter(resp) : resp); - } - }, - _saveToStorage: function saveToStorage(data, thumbprint, ttl) { - if (this.storage) { - this.storage.set(keys.data, data, ttl); - this.storage.set(keys.protocol, location.protocol, ttl); - this.storage.set(keys.thumbprint, thumbprint, ttl); - } - }, - _readFromStorage: function readFromStorage(thumbprint) { - var stored = {}, isExpired; - if (this.storage) { - stored.data = this.storage.get(keys.data); - stored.protocol = this.storage.get(keys.protocol); - stored.thumbprint = this.storage.get(keys.thumbprint); - } - isExpired = stored.thumbprint !== thumbprint || stored.protocol !== location.protocol; - return stored.data && !isExpired ? stored.data : null; - }, - _initialize: function initialize() { - var that = this, local = this.local, deferred; - deferred = this.prefetch ? this._loadPrefetch(this.prefetch) : $.Deferred().resolve(); - local && deferred.done(addLocalToIndex); - this.transport = this.remote ? new Transport(this.remote) : null; - return this.initPromise = deferred.promise(); - function addLocalToIndex() { - that.add(_.isFunction(local) ? local() : local); - } - }, - initialize: function initialize(force) { - return !this.initPromise || force ? this._initialize() : this.initPromise; - }, - add: function add(data) { - this.index.add(data); - }, - get: function get(query, cb) { - var that = this, matches = [], cacheHit = false; - matches = this.index.get(query); - matches = this.sorter(matches).slice(0, this.limit); - if (matches.length < this.limit && this.transport) { - cacheHit = this._getFromRemote(query, returnRemoteMatches); - } - if (!cacheHit) { - (matches.length > 0 || !this.transport) && cb && cb(matches); - } - function returnRemoteMatches(remoteMatches) { - var matchesWithBackfill = matches.slice(0); - _.each(remoteMatches, function(remoteMatch) { - var isDuplicate; - isDuplicate = _.some(matchesWithBackfill, function(match) { - return that.dupDetector(remoteMatch, match); - }); - !isDuplicate && matchesWithBackfill.push(remoteMatch); - return matchesWithBackfill.length < that.limit; - }); - cb && cb(that.sorter(matchesWithBackfill)); - } - }, - clear: function clear() { - this.index.reset(); - }, - clearPrefetchCache: function clearPrefetchCache() { - this.storage && this.storage.clear(); - }, - clearRemoteCache: function clearRemoteCache() { - this.transport && Transport.resetCache(); - }, - ttAdapter: function ttAdapter() { - return _.bind(this.get, this); + + DocumentedMethod.prototype = { + // Merge parameters across all overloaded versions of this item. + _getMergedParams: function() { + var paramNames = {}; + var params = []; + + this.overloads.forEach(function(overload) { + if (!overload.params) { + return; + } + overload.params.forEach(function(param) { + if (param.name in paramNames) { + return; } + paramNames[param.name] = param; + params.push(param); + }); }); - return Bloodhound; - function getSorter(sortFn) { - return _.isFunction(sortFn) ? sort : noSort; - function sort(array) { - return array.sort(sortFn); - } - function noSort(array) { - return array; - } - } - function ignoreDuplicates() { - return false; - } - })(this); - var html = { - wrapper: '', - dropdown: '', - dataset: '
', - suggestions: '', - suggestion: '
' - }; - var css = { - wrapper: { - position: "relative", - display: "inline-block" - }, - hint: { - position: "absolute", - top: "0", - left: "0", - borderColor: "transparent", - boxShadow: "none" - }, - input: { - position: "relative", - verticalAlign: "top", - backgroundColor: "transparent" - }, - inputWithNoHint: { - position: "relative", - verticalAlign: "top" - }, - dropdown: { - position: "absolute", - top: "100%", - left: "0", - zIndex: "100", - display: "none" - }, - suggestions: { - display: "block" - }, - suggestion: { - whiteSpace: "nowrap", - cursor: "pointer" - }, - suggestionChild: { - whiteSpace: "normal" - }, - ltr: { - left: "0", - right: "auto" - }, - rtl: { - left: "auto", - right: " 0" - } + + return params; + } }; - if (_.isMsie()) { - _.mixin(css.input, { - backgroundImage: "url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)" - }); - } - if (_.isMsie() && _.isMsie() <= 7) { - _.mixin(css.input, { - marginTop: "-1px" - }); - } - var EventBus = function() { - var namespace = "typeahead:"; - function EventBus(o) { - if (!o || !o.el) { - $.error("EventBus initialized without el"); - } - this.$el = $(o.el); - } - _.mixin(EventBus.prototype, { - trigger: function(type) { - var args = [].slice.call(arguments, 1); - this.$el.trigger(namespace + type, args); - } - }); - return EventBus; - }(); - var EventEmitter = function() { - var splitter = /\s+/, nextTick = getNextTick(); - return { - onSync: onSync, - onAsync: onAsync, - off: off, - trigger: trigger - }; - function on(method, types, cb, context) { - var type; - if (!cb) { - return this; - } - types = types.split(splitter); - cb = context ? bindContext(cb, context) : cb; - this._callbacks = this._callbacks || {}; - while (type = types.shift()) { - this._callbacks[type] = this._callbacks[type] || { - sync: [], - async: [] - }; - this._callbacks[type][method].push(cb); - } - return this; - } - function onAsync(types, cb, context) { - return on.call(this, "async", types, cb, context); - } - function onSync(types, cb, context) { - return on.call(this, "sync", types, cb, context); - } - function off(types) { - var type; - if (!this._callbacks) { - return this; - } - types = types.split(splitter); - while (type = types.shift()) { - delete this._callbacks[type]; - } - return this; - } - function trigger(types) { - var type, callbacks, args, syncFlush, asyncFlush; - if (!this._callbacks) { - return this; - } - types = types.split(splitter); - args = [].slice.call(arguments, 1); - while ((type = types.shift()) && (callbacks = this._callbacks[type])) { - syncFlush = getFlush(callbacks.sync, this, [ type ].concat(args)); - asyncFlush = getFlush(callbacks.async, this, [ type ].concat(args)); - syncFlush() && nextTick(asyncFlush); - } - return this; - } - function getFlush(callbacks, context, args) { - return flush; - function flush() { - var cancelled; - for (var i = 0; !cancelled && i < callbacks.length; i += 1) { - cancelled = callbacks[i].apply(context, args) === false; - } - return !cancelled; - } - } - function getNextTick() { - var nextTickFn; - if (window.setImmediate) { - nextTickFn = function nextTickSetImmediate(fn) { - setImmediate(function() { - fn(); - }); - }; - } else { - nextTickFn = function nextTickSetTimeout(fn) { - setTimeout(function() { - fn(); - }, 0); - }; - } - return nextTickFn; - } - function bindContext(fn, context) { - return fn.bind ? fn.bind(context) : function() { - fn.apply(context, [].slice.call(arguments, 0)); - }; - } - }(); - var highlight = function(doc) { - var defaults = { - node: null, - pattern: null, - tagName: "strong", - className: null, - wordsOnly: false, - caseSensitive: false - }; - return function hightlight(o) { - var regex; - o = _.mixin({}, defaults, o); - if (!o.node || !o.pattern) { - return; - } - o.pattern = _.isArray(o.pattern) ? o.pattern : [ o.pattern ]; - regex = getRegex(o.pattern, o.caseSensitive, o.wordsOnly); - traverse(o.node, hightlightTextNode); - function hightlightTextNode(textNode) { - var match, patternNode; - if (match = regex.exec(textNode.data)) { - wrapperNode = doc.createElement(o.tagName); - o.className && (wrapperNode.className = o.className); - patternNode = textNode.splitText(match.index); - patternNode.splitText(match[0].length); - wrapperNode.appendChild(patternNode.cloneNode(true)); - textNode.parentNode.replaceChild(wrapperNode, patternNode); - } - return !!match; - } - function traverse(el, hightlightTextNode) { - var childNode, TEXT_NODE_TYPE = 3; - for (var i = 0; i < el.childNodes.length; i++) { - childNode = el.childNodes[i]; - if (childNode.nodeType === TEXT_NODE_TYPE) { - i += hightlightTextNode(childNode) ? 1 : 0; - } else { - traverse(childNode, hightlightTextNode); - } - } - } - }; - function getRegex(patterns, caseSensitive, wordsOnly) { - var escapedPatterns = [], regexStr; - for (var i = 0; i < patterns.length; i++) { - escapedPatterns.push(_.escapeRegExChars(patterns[i])); - } - regexStr = wordsOnly ? "\\b(" + escapedPatterns.join("|") + ")\\b" : "(" + escapedPatterns.join("|") + ")"; - return caseSensitive ? new RegExp(regexStr) : new RegExp(regexStr, "i"); - } - }(window.document); - var Input = function() { - var specialKeyCodeMap; - specialKeyCodeMap = { - 9: "tab", - 27: "esc", - 37: "left", - 39: "right", - 13: "enter", - 38: "up", - 40: "down" - }; - function Input(o) { - var that = this, onBlur, onFocus, onKeydown, onInput; - o = o || {}; - if (!o.input) { - $.error("input is missing"); - } - onBlur = _.bind(this._onBlur, this); - onFocus = _.bind(this._onFocus, this); - onKeydown = _.bind(this._onKeydown, this); - onInput = _.bind(this._onInput, this); - this.$hint = $(o.hint); - this.$input = $(o.input).on("blur.tt", onBlur).on("focus.tt", onFocus).on("keydown.tt", onKeydown); - if (this.$hint.length === 0) { - this.setHint = this.getHint = this.clearHint = this.clearHintIfInvalid = _.noop; - } - if (!_.isMsie()) { - this.$input.on("input.tt", onInput); - } else { - this.$input.on("keydown.tt keypress.tt cut.tt paste.tt", function($e) { - if (specialKeyCodeMap[$e.which || $e.keyCode]) { - return; - } - _.defer(_.bind(that._onInput, that, $e)); - }); - } - this.query = this.$input.val(); - this.$overflowHelper = buildOverflowHelper(this.$input); - } - Input.normalizeQuery = function(str) { - return (str || "").replace(/^\s*/g, "").replace(/\s{2,}/g, " "); - }; - _.mixin(Input.prototype, EventEmitter, { - _onBlur: function onBlur() { - this.resetInputValue(); - this.trigger("blurred"); - }, - _onFocus: function onFocus() { - this.trigger("focused"); - }, - _onKeydown: function onKeydown($e) { - var keyName = specialKeyCodeMap[$e.which || $e.keyCode]; - this._managePreventDefault(keyName, $e); - if (keyName && this._shouldTrigger(keyName, $e)) { - this.trigger(keyName + "Keyed", $e); - } - }, - _onInput: function onInput() { - this._checkInputValue(); - }, - _managePreventDefault: function managePreventDefault(keyName, $e) { - var preventDefault, hintValue, inputValue; - switch (keyName) { - case "tab": - hintValue = this.getHint(); - inputValue = this.getInputValue(); - preventDefault = hintValue && hintValue !== inputValue && !withModifier($e); - break; - - case "up": - case "down": - preventDefault = !withModifier($e); - break; - - default: - preventDefault = false; - } - preventDefault && $e.preventDefault(); - }, - _shouldTrigger: function shouldTrigger(keyName, $e) { - var trigger; - switch (keyName) { - case "tab": - trigger = !withModifier($e); - break; - - default: - trigger = true; - } - return trigger; - }, - _checkInputValue: function checkInputValue() { - var inputValue, areEquivalent, hasDifferentWhitespace; - inputValue = this.getInputValue(); - areEquivalent = areQueriesEquivalent(inputValue, this.query); - hasDifferentWhitespace = areEquivalent ? this.query.length !== inputValue.length : false; - if (!areEquivalent) { - this.trigger("queryChanged", this.query = inputValue); - } else if (hasDifferentWhitespace) { - this.trigger("whitespaceChanged", this.query); - } - }, - focus: function focus() { - this.$input.focus(); - }, - blur: function blur() { - this.$input.blur(); - }, - getQuery: function getQuery() { - return this.query; - }, - setQuery: function setQuery(query) { - this.query = query; - }, - getInputValue: function getInputValue() { - return this.$input.val(); - }, - setInputValue: function setInputValue(value, silent) { - this.$input.val(value); - silent ? this.clearHint() : this._checkInputValue(); - }, - resetInputValue: function resetInputValue() { - this.setInputValue(this.query, true); - }, - getHint: function getHint() { - return this.$hint.val(); - }, - setHint: function setHint(value) { - this.$hint.val(value); - }, - clearHint: function clearHint() { - this.setHint(""); - }, - clearHintIfInvalid: function clearHintIfInvalid() { - var val, hint, valIsPrefixOfHint, isValid; - val = this.getInputValue(); - hint = this.getHint(); - valIsPrefixOfHint = val !== hint && hint.indexOf(val) === 0; - isValid = val !== "" && valIsPrefixOfHint && !this.hasOverflow(); - !isValid && this.clearHint(); - }, - getLanguageDirection: function getLanguageDirection() { - return (this.$input.css("direction") || "ltr").toLowerCase(); - }, - hasOverflow: function hasOverflow() { - var constraint = this.$input.width() - 2; - this.$overflowHelper.text(this.getInputValue()); - return this.$overflowHelper.width() >= constraint; - }, - isCursorAtEnd: function() { - var valueLength, selectionStart, range; - valueLength = this.$input.val().length; - selectionStart = this.$input[0].selectionStart; - if (_.isNumber(selectionStart)) { - return selectionStart === valueLength; - } else if (document.selection) { - range = document.selection.createRange(); - range.moveStart("character", -valueLength); - return valueLength === range.text.length; - } - return true; - }, - destroy: function destroy() { - this.$hint.off(".tt"); - this.$input.off(".tt"); - this.$hint = this.$input = this.$overflowHelper = null; - } - }); - return Input; - function buildOverflowHelper($input) { - return $('').css({ - position: "absolute", - visibility: "hidden", - whiteSpace: "pre", - fontFamily: $input.css("font-family"), - fontSize: $input.css("font-size"), - fontStyle: $input.css("font-style"), - fontVariant: $input.css("font-variant"), - fontWeight: $input.css("font-weight"), - wordSpacing: $input.css("word-spacing"), - letterSpacing: $input.css("letter-spacing"), - textIndent: $input.css("text-indent"), - textRendering: $input.css("text-rendering"), - textTransform: $input.css("text-transform") - }).insertAfter($input); - } - function areQueriesEquivalent(a, b) { - return Input.normalizeQuery(a) === Input.normalizeQuery(b); - } - function withModifier($e) { - return $e.altKey || $e.ctrlKey || $e.metaKey || $e.shiftKey; - } - }(); - var Dataset = function() { - var datasetKey = "ttDataset", valueKey = "ttValue", datumKey = "ttDatum"; - function Dataset(o) { - o = o || {}; - o.templates = o.templates || {}; - if (!o.source) { - $.error("missing source"); - } - if (o.name && !isValidName(o.name)) { - $.error("invalid dataset name: " + o.name); - } - this.query = null; - this.highlight = !!o.highlight; - this.name = o.name || _.getUniqueId(); - this.source = o.source; - this.displayFn = getDisplayFn(o.display || o.displayKey); - this.templates = getTemplates(o.templates, this.displayFn); - this.$el = $(html.dataset.replace("%CLASS%", this.name)); - } - Dataset.extractDatasetName = function extractDatasetName(el) { - return $(el).data(datasetKey); - }; - Dataset.extractValue = function extractDatum(el) { - return $(el).data(valueKey); - }; - Dataset.extractDatum = function extractDatum(el) { - return $(el).data(datumKey); - }; - _.mixin(Dataset.prototype, EventEmitter, { - _render: function render(query, suggestions) { - if (!this.$el) { - return; - } - var that = this, hasSuggestions; - this.$el.empty(); - hasSuggestions = suggestions && suggestions.length; - if (!hasSuggestions && this.templates.empty) { - this.$el.html(getEmptyHtml()).prepend(that.templates.header ? getHeaderHtml() : null).append(that.templates.footer ? getFooterHtml() : null); - } else if (hasSuggestions) { - this.$el.html(getSuggestionsHtml()).prepend(that.templates.header ? getHeaderHtml() : null).append(that.templates.footer ? getFooterHtml() : null); - } - this.trigger("rendered"); - function getEmptyHtml() { - return that.templates.empty({ - query: query, - isEmpty: true - }); - } - function getSuggestionsHtml() { - var $suggestions, nodes; - $suggestions = $(html.suggestions).css(css.suggestions); - nodes = _.map(suggestions, getSuggestionNode); - $suggestions.append.apply($suggestions, nodes); - that.highlight && highlight({ - node: $suggestions[0], - pattern: query - }); - return $suggestions; - function getSuggestionNode(suggestion) { - var $el; - $el = $(html.suggestion).append(that.templates.suggestion(suggestion)).data(datasetKey, that.name).data(valueKey, that.displayFn(suggestion)).data(datumKey, suggestion); - $el.children().each(function() { - $(this).css(css.suggestionChild); - }); - return $el; - } - } - function getHeaderHtml() { - return that.templates.header({ - query: query, - isEmpty: !hasSuggestions - }); - } - function getFooterHtml() { - return that.templates.footer({ - query: query, - isEmpty: !hasSuggestions - }); - } - }, - getRoot: function getRoot() { - return this.$el; - }, - update: function update(query) { - var that = this; - this.query = query; - this.canceled = false; - this.source(query, render); - function render(suggestions) { - if (!that.canceled && query === that.query) { - that._render(query, suggestions); - } - } - }, - cancel: function cancel() { - this.canceled = true; - }, - clear: function clear() { - this.cancel(); - this.$el.empty(); - this.trigger("rendered"); - }, - isEmpty: function isEmpty() { - return this.$el.is(":empty"); - }, - destroy: function destroy() { - this.$el = null; - } + + return DocumentedMethod; + })); + + /** + * @license RequireJS text 2.0.10 Copyright (c) 2010-2012, The Dojo Foundation All Rights Reserved. + * Available via the MIT or new BSD license. + * see: http://github.com/requirejs/text for details + */ + /*jslint regexp: true */ + /*global require, XMLHttpRequest, ActiveXObject, + define, window, process, Packages, + java, location, Components, FileUtils */ + + define('text',['module'], function (module) { + 'use strict'; + + var text, fs, Cc, Ci, xpcIsWindows, + progIds = ['Msxml2.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.4.0'], + xmlRegExp = /^\s*<\?xml(\s)+version=[\'\"](\d)*.(\d)*[\'\"](\s)*\?>/im, + bodyRegExp = /]*>\s*([\s\S]+)\s*<\/body>/im, + hasLocation = typeof location !== 'undefined' && location.href, + defaultProtocol = hasLocation && location.protocol && location.protocol.replace(/\:/, ''), + defaultHostName = hasLocation && location.hostname, + defaultPort = hasLocation && (location.port || undefined), + buildMap = {}, + masterConfig = (module.config && module.config()) || {}; + + text = { + version: '2.0.10', + + strip: function (content) { + //Strips declarations so that external SVG and XML + //documents can be added to a document without worry. Also, if the string + //is an HTML document, only the part inside the body tag is returned. + if (content) { + content = content.replace(xmlRegExp, ""); + var matches = content.match(bodyRegExp); + if (matches) { + content = matches[1]; + } + } else { + content = ""; + } + return content; + }, + + jsEscape: function (content) { + return content.replace(/(['\\])/g, '\\$1') + .replace(/[\f]/g, "\\f") + .replace(/[\b]/g, "\\b") + .replace(/[\n]/g, "\\n") + .replace(/[\t]/g, "\\t") + .replace(/[\r]/g, "\\r") + .replace(/[\u2028]/g, "\\u2028") + .replace(/[\u2029]/g, "\\u2029"); + }, + + createXhr: masterConfig.createXhr || function () { + //Would love to dump the ActiveX crap in here. Need IE 6 to die first. + var xhr, i, progId; + if (typeof XMLHttpRequest !== "undefined") { + return new XMLHttpRequest(); + } else if (typeof ActiveXObject !== "undefined") { + for (i = 0; i < 3; i += 1) { + progId = progIds[i]; + try { + xhr = new ActiveXObject(progId); + } catch (e) {} + + if (xhr) { + progIds = [progId]; // so faster next time + break; + } + } + } + + return xhr; + }, + + /** + * Parses a resource name into its component parts. Resource names + * look like: module/name.ext!strip, where the !strip part is + * optional. + * @param {String} name the resource name + * @returns {Object} with properties "moduleName", "ext" and "strip" + * where strip is a boolean. + */ + parseName: function (name) { + var modName, ext, temp, + strip = false, + index = name.indexOf("."), + isRelative = name.indexOf('./') === 0 || + name.indexOf('../') === 0; + + if (index !== -1 && (!isRelative || index > 1)) { + modName = name.substring(0, index); + ext = name.substring(index + 1, name.length); + } else { + modName = name; + } + + temp = ext || modName; + index = temp.indexOf("!"); + if (index !== -1) { + //Pull off the strip arg. + strip = temp.substring(index + 1) === "strip"; + temp = temp.substring(0, index); + if (ext) { + ext = temp; + } else { + modName = temp; + } + } + + return { + moduleName: modName, + ext: ext, + strip: strip + }; + }, + + xdRegExp: /^((\w+)\:)?\/\/([^\/\\]+)/, + + /** + * Is an URL on another domain. Only works for browser use, returns + * false in non-browser environments. Only used to know if an + * optimized .js version of a text resource should be loaded + * instead. + * @param {String} url + * @returns Boolean + */ + useXhr: function (url, protocol, hostname, port) { + var uProtocol, uHostName, uPort, + match = text.xdRegExp.exec(url); + if (!match) { + return true; + } + uProtocol = match[2]; + uHostName = match[3]; + + uHostName = uHostName.split(':'); + uPort = uHostName[1]; + uHostName = uHostName[0]; + + return (!uProtocol || uProtocol === protocol) && + (!uHostName || uHostName.toLowerCase() === hostname.toLowerCase()) && + ((!uPort && !uHostName) || uPort === port); + }, + + finishLoad: function (name, strip, content, onLoad) { + content = strip ? text.strip(content) : content; + if (masterConfig.isBuild) { + buildMap[name] = content; + } + onLoad(content); + }, + + load: function (name, req, onLoad, config) { + //Name has format: some.module.filext!strip + //The strip part is optional. + //if strip is present, then that means only get the string contents + //inside a body tag in an HTML string. For XML/SVG content it means + //removing the declarations so the content can be inserted + //into the current doc without problems. + + // Do not bother with the work if a build and text will + // not be inlined. + if (config.isBuild && !config.inlineText) { + onLoad(); + return; + } + + masterConfig.isBuild = config.isBuild; + + var parsed = text.parseName(name), + nonStripName = parsed.moduleName + + (parsed.ext ? '.' + parsed.ext : ''), + url = req.toUrl(nonStripName), + useXhr = (masterConfig.useXhr) || + text.useXhr; + + // Do not load if it is an empty: url + if (url.indexOf('empty:') === 0) { + onLoad(); + return; + } + + //Load the text. Use XHR if possible and in a browser. + if (!hasLocation || useXhr(url, defaultProtocol, defaultHostName, defaultPort)) { + text.get(url, function (content) { + text.finishLoad(name, parsed.strip, content, onLoad); + }, function (err) { + if (onLoad.error) { + onLoad.error(err); + } + }); + } else { + //Need to fetch the resource across domains. Assume + //the resource has been optimized into a JS module. Fetch + //by the module name + extension, but do not include the + //!strip part to avoid file system issues. + req([nonStripName], function (content) { + text.finishLoad(parsed.moduleName + '.' + parsed.ext, + parsed.strip, content, onLoad); + }); + } + }, + + write: function (pluginName, moduleName, write, config) { + if (buildMap.hasOwnProperty(moduleName)) { + var content = text.jsEscape(buildMap[moduleName]); + write.asModule(pluginName + "!" + moduleName, + "define(function () { return '" + + content + + "';});\n"); + } + }, + + writeFile: function (pluginName, moduleName, req, write, config) { + var parsed = text.parseName(moduleName), + extPart = parsed.ext ? '.' + parsed.ext : '', + nonStripName = parsed.moduleName + extPart, + //Use a '.js' file name so that it indicates it is a + //script that can be loaded across domains. + fileName = req.toUrl(parsed.moduleName + extPart) + '.js'; + + //Leverage own load() method to load plugin value, but only + //write out values that do not have the strip argument, + //to avoid any potential issues with ! in file names. + text.load(nonStripName, req, function (value) { + //Use own write() method to construct full module value. + //But need to create shell that translates writeFile's + //write() to the right interface. + var textWrite = function (contents) { + return write(fileName, contents); + }; + textWrite.asModule = function (moduleName, contents) { + return write.asModule(moduleName, fileName, contents); + }; + + text.write(pluginName, nonStripName, textWrite, config); + }, config); + } + }; + + if (masterConfig.env === 'node' || (!masterConfig.env && + typeof process !== "undefined" && + process.versions && + !!process.versions.node && + !process.versions['node-webkit'])) { + //Using special require.nodeRequire, something added by r.js. + fs = require.nodeRequire('fs'); + + text.get = function (url, callback, errback) { + try { + var file = fs.readFileSync(url, 'utf8'); + //Remove BOM (Byte Mark Order) from utf8 files if it is there. + if (file.indexOf('\uFEFF') === 0) { + file = file.substring(1); + } + callback(file); + } catch (e) { + errback(e); + } + }; + } else if (masterConfig.env === 'xhr' || (!masterConfig.env && + text.createXhr())) { + text.get = function (url, callback, errback, headers) { + var xhr = text.createXhr(), header; + xhr.open('GET', url, true); + + //Allow plugins direct access to xhr headers + if (headers) { + for (header in headers) { + if (headers.hasOwnProperty(header)) { + xhr.setRequestHeader(header.toLowerCase(), headers[header]); + } + } + } + + //Allow overrides specified in config + if (masterConfig.onXhr) { + masterConfig.onXhr(xhr, url); + } + + xhr.onreadystatechange = function (evt) { + var status, err; + //Do not explicitly handle errors, those should be + //visible via console output in the browser. + if (xhr.readyState === 4) { + status = xhr.status; + if (status > 399 && status < 600) { + //An http 4xx or 5xx error. Signal an error. + err = new Error(url + ' HTTP status: ' + status); + err.xhr = xhr; + errback(err); + } else { + callback(xhr.responseText); + } + + if (masterConfig.onXhrComplete) { + masterConfig.onXhrComplete(xhr, url); + } + } + }; + xhr.send(null); + }; + } else if (masterConfig.env === 'rhino' || (!masterConfig.env && + typeof Packages !== 'undefined' && typeof java !== 'undefined')) { + //Why Java, why is this so awkward? + text.get = function (url, callback) { + var stringBuffer, line, + encoding = "utf-8", + file = new java.io.File(url), + lineSeparator = java.lang.System.getProperty("line.separator"), + input = new java.io.BufferedReader(new java.io.InputStreamReader(new java.io.FileInputStream(file), encoding)), + content = ''; + try { + stringBuffer = new java.lang.StringBuffer(); + line = input.readLine(); + + // Byte Order Mark (BOM) - The Unicode Standard, version 3.0, page 324 + // http://www.unicode.org/faq/utf_bom.html + + // Note that when we use utf-8, the BOM should appear as "EF BB BF", but it doesn't due to this bug in the JDK: + // http://bugs.sun.com/bugdatabase/view_bug.do?bug_id=4508058 + if (line && line.length() && line.charAt(0) === 0xfeff) { + // Eat the BOM, since we've already found the encoding on this file, + // and we plan to concatenating this buffer with others; the BOM should + // only appear at the top of a file. + line = line.substring(1); + } + + if (line !== null) { + stringBuffer.append(line); + } + + while ((line = input.readLine()) !== null) { + stringBuffer.append(lineSeparator); + stringBuffer.append(line); + } + //Make sure we return a JavaScript string and not a Java string. + content = String(stringBuffer.toString()); //String + } finally { + input.close(); + } + callback(content); + }; + } else if (masterConfig.env === 'xpconnect' || (!masterConfig.env && + typeof Components !== 'undefined' && Components.classes && + Components.interfaces)) { + //Avert your gaze! + Cc = Components.classes, + Ci = Components.interfaces; + Components.utils['import']('resource://gre/modules/FileUtils.jsm'); + xpcIsWindows = ('@mozilla.org/windows-registry-key;1' in Cc); + + text.get = function (url, callback) { + var inStream, convertStream, fileObj, + readData = {}; + + if (xpcIsWindows) { + url = url.replace(/\//g, '\\'); + } + + fileObj = new FileUtils.File(url); + + //XPCOM, you so crazy + try { + inStream = Cc['@mozilla.org/network/file-input-stream;1'] + .createInstance(Ci.nsIFileInputStream); + inStream.init(fileObj, 1, 0, false); + + convertStream = Cc['@mozilla.org/intl/converter-input-stream;1'] + .createInstance(Ci.nsIConverterInputStream); + convertStream.init(inStream, "utf-8", inStream.available(), + Ci.nsIConverterInputStream.DEFAULT_REPLACEMENT_CHARACTER); + + convertStream.readString(inStream.available(), readData); + convertStream.close(); + inStream.close(); + callback(readData.value); + } catch (e) { + throw new Error((fileObj && fileObj.path || '') + ': ' + e); + } + }; + } + return text; + }); + + + define('text!tpl/search.html',[],function () { return '

search

\n
\n \n \n
\n\n';}); + + + define('text!tpl/search_suggestion.html',[],function () { return '

\n\n <%=name%>\n\n \n <% if (final) { %>\n constant\n <% } else if (itemtype) { %>\n <%=itemtype%> \n <% } %>\n\n <% if (className) { %>\n in <%=className%>\n <% } %>\n\n <% if (typeof is_constructor !== \'undefined\' && is_constructor) { %>\n constructor\n <% } %>\n \n\n

';}); + + /*! + * typeahead.js 0.10.2 + * https://github.com/twitter/typeahead.js + * Copyright 2013-2014 Twitter, Inc. and other contributors; Licensed MIT + */ + define('typeahead',[], function() { + + //(function($) { + + + var _ = { + isMsie: function() { + return /(msie|trident)/i.test(navigator.userAgent) ? navigator.userAgent.match(/(msie |rv:)(\d+(.\d+)?)/i)[2] : false; + }, + isBlankString: function(str) { + return !str || /^\s*$/.test(str); + }, + escapeRegExChars: function(str) { + return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); + }, + isString: function(obj) { + return typeof obj === "string"; + }, + isNumber: function(obj) { + return typeof obj === "number"; + }, + isArray: $.isArray, + isFunction: $.isFunction, + isObject: $.isPlainObject, + isUndefined: function(obj) { + return typeof obj === "undefined"; + }, + bind: $.proxy, + each: function(collection, cb) { + $.each(collection, reverseArgs); + function reverseArgs(index, value) { + return cb(value, index); + } + }, + map: $.map, + filter: $.grep, + every: function(obj, test) { + var result = true; + if (!obj) { + return result; + } + $.each(obj, function(key, val) { + if (!(result = test.call(null, val, key, obj))) { + return false; + } + }); + return !!result; + }, + some: function(obj, test) { + var result = false; + if (!obj) { + return result; + } + $.each(obj, function(key, val) { + if (result = test.call(null, val, key, obj)) { + return false; + } + }); + return !!result; + }, + mixin: $.extend, + getUniqueId: function() { + var counter = 0; + return function() { + return counter++; + }; + }(), + templatify: function templatify(obj) { + return $.isFunction(obj) ? obj : template; + function template() { + return String(obj); + } + }, + defer: function(fn) { + setTimeout(fn, 0); + }, + debounce: function(func, wait, immediate) { + var timeout, result; + return function() { + var context = this, args = arguments, later, callNow; + later = function() { + timeout = null; + if (!immediate) { + result = func.apply(context, args); + } + }; + callNow = immediate && !timeout; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + if (callNow) { + result = func.apply(context, args); + } + return result; + }; + }, + throttle: function(func, wait) { + var context, args, timeout, result, previous, later; + previous = 0; + later = function() { + previous = new Date(); + timeout = null; + result = func.apply(context, args); + }; + return function() { + var now = new Date(), remaining = wait - (now - previous); + context = this; + args = arguments; + if (remaining <= 0) { + clearTimeout(timeout); + timeout = null; + previous = now; + result = func.apply(context, args); + } else if (!timeout) { + timeout = setTimeout(later, remaining); + } + return result; + }; + }, + noop: function() {} + }; + var VERSION = "0.10.2"; + var tokenizers = function(root) { + return { + nonword: nonword, + whitespace: whitespace, + obj: { + nonword: getObjTokenizer(nonword), + whitespace: getObjTokenizer(whitespace) + } + }; + function whitespace(s) { + return s.split(/\s+/); + } + function nonword(s) { + return s.split(/\W+/); + } + function getObjTokenizer(tokenizer) { + return function setKey(key) { + return function tokenize(o) { + return tokenizer(o[key]); + }; + }; + } + }(); + var LruCache = function() { + function LruCache(maxSize) { + this.maxSize = maxSize || 100; + this.size = 0; + this.hash = {}; + this.list = new List(); + } + _.mixin(LruCache.prototype, { + set: function set(key, val) { + var tailItem = this.list.tail, node; + if (this.size >= this.maxSize) { + this.list.remove(tailItem); + delete this.hash[tailItem.key]; + } + if (node = this.hash[key]) { + node.val = val; + this.list.moveToFront(node); + } else { + node = new Node(key, val); + this.list.add(node); + this.hash[key] = node; + this.size++; + } + }, + get: function get(key) { + var node = this.hash[key]; + if (node) { + this.list.moveToFront(node); + return node.val; + } + } + }); + function List() { + this.head = this.tail = null; + } + _.mixin(List.prototype, { + add: function add(node) { + if (this.head) { + node.next = this.head; + this.head.prev = node; + } + this.head = node; + this.tail = this.tail || node; + }, + remove: function remove(node) { + node.prev ? node.prev.next = node.next : this.head = node.next; + node.next ? node.next.prev = node.prev : this.tail = node.prev; + }, + moveToFront: function(node) { + this.remove(node); + this.add(node); + } + }); + function Node(key, val) { + this.key = key; + this.val = val; + this.prev = this.next = null; + } + return LruCache; + }(); + var PersistentStorage = function() { + var ls, methods; + try { + ls = window.localStorage; + ls.setItem("~~~", "!"); + ls.removeItem("~~~"); + } catch (err) { + ls = null; + } + function PersistentStorage(namespace) { + this.prefix = [ "__", namespace, "__" ].join(""); + this.ttlKey = "__ttl__"; + this.keyMatcher = new RegExp("^" + this.prefix); + } + if (ls && window.JSON) { + methods = { + _prefix: function(key) { + return this.prefix + key; + }, + _ttlKey: function(key) { + return this._prefix(key) + this.ttlKey; + }, + get: function(key) { + if (this.isExpired(key)) { + this.remove(key); + } + return decode(ls.getItem(this._prefix(key))); + }, + set: function(key, val, ttl) { + if (_.isNumber(ttl)) { + ls.setItem(this._ttlKey(key), encode(now() + ttl)); + } else { + ls.removeItem(this._ttlKey(key)); + } + return ls.setItem(this._prefix(key), encode(val)); + }, + remove: function(key) { + ls.removeItem(this._ttlKey(key)); + ls.removeItem(this._prefix(key)); + return this; + }, + clear: function() { + var i, key, keys = [], len = ls.length; + for (i = 0; i < len; i++) { + if ((key = ls.key(i)).match(this.keyMatcher)) { + keys.push(key.replace(this.keyMatcher, "")); + } + } + for (i = keys.length; i--; ) { + this.remove(keys[i]); + } + return this; + }, + isExpired: function(key) { + var ttl = decode(ls.getItem(this._ttlKey(key))); + return _.isNumber(ttl) && now() > ttl ? true : false; + } + }; + } else { + methods = { + get: _.noop, + set: _.noop, + remove: _.noop, + clear: _.noop, + isExpired: _.noop + }; + } + _.mixin(PersistentStorage.prototype, methods); + return PersistentStorage; + function now() { + return new Date().getTime(); + } + function encode(val) { + return JSON.stringify(_.isUndefined(val) ? null : val); + } + function decode(val) { + return JSON.parse(val); + } + }(); + var Transport = function() { + var pendingRequestsCount = 0, pendingRequests = {}, maxPendingRequests = 6, requestCache = new LruCache(10); + function Transport(o) { + o = o || {}; + this._send = o.transport ? callbackToDeferred(o.transport) : $.ajax; + this._get = o.rateLimiter ? o.rateLimiter(this._get) : this._get; + } + Transport.setMaxPendingRequests = function setMaxPendingRequests(num) { + maxPendingRequests = num; + }; + Transport.resetCache = function clearCache() { + requestCache = new LruCache(10); + }; + _.mixin(Transport.prototype, { + _get: function(url, o, cb) { + var that = this, jqXhr; + if (jqXhr = pendingRequests[url]) { + jqXhr.done(done).fail(fail); + } else if (pendingRequestsCount < maxPendingRequests) { + pendingRequestsCount++; + pendingRequests[url] = this._send(url, o).done(done).fail(fail).always(always); + } else { + this.onDeckRequestArgs = [].slice.call(arguments, 0); + } + function done(resp) { + cb && cb(null, resp); + requestCache.set(url, resp); + } + function fail() { + cb && cb(true); + } + function always() { + pendingRequestsCount--; + delete pendingRequests[url]; + if (that.onDeckRequestArgs) { + that._get.apply(that, that.onDeckRequestArgs); + that.onDeckRequestArgs = null; + } + } + }, + get: function(url, o, cb) { + var resp; + if (_.isFunction(o)) { + cb = o; + o = {}; + } + if (resp = requestCache.get(url)) { + _.defer(function() { + cb && cb(null, resp); + }); + } else { + this._get(url, o, cb); + } + return !!resp; + } + }); + return Transport; + function callbackToDeferred(fn) { + return function customSendWrapper(url, o) { + var deferred = $.Deferred(); + fn(url, o, onSuccess, onError); + return deferred; + function onSuccess(resp) { + _.defer(function() { + deferred.resolve(resp); + }); + } + function onError(err) { + _.defer(function() { + deferred.reject(err); + }); + } + }; + } + }(); + var SearchIndex = function() { + function SearchIndex(o) { + o = o || {}; + if (!o.datumTokenizer || !o.queryTokenizer) { + $.error("datumTokenizer and queryTokenizer are both required"); + } + this.datumTokenizer = o.datumTokenizer; + this.queryTokenizer = o.queryTokenizer; + this.reset(); + } + _.mixin(SearchIndex.prototype, { + bootstrap: function bootstrap(o) { + this.datums = o.datums; + this.trie = o.trie; + }, + add: function(data) { + var that = this; + data = _.isArray(data) ? data : [ data ]; + _.each(data, function(datum) { + var id, tokens; + id = that.datums.push(datum) - 1; + tokens = normalizeTokens(that.datumTokenizer(datum)); + _.each(tokens, function(token) { + var node, chars, ch; + node = that.trie; + chars = token.split(""); + while (ch = chars.shift()) { + node = node.children[ch] || (node.children[ch] = newNode()); + node.ids.push(id); + } + }); + }); + }, + get: function get(query) { + var that = this, tokens, matches; + tokens = normalizeTokens(this.queryTokenizer(query)); + _.each(tokens, function(token) { + var node, chars, ch, ids; + if (matches && matches.length === 0) { + return false; + } + node = that.trie; + chars = token.split(""); + while (node && (ch = chars.shift())) { + node = node.children[ch]; + } + if (node && chars.length === 0) { + ids = node.ids.slice(0); + matches = matches ? getIntersection(matches, ids) : ids; + } else { + matches = []; + return false; + } + }); + return matches ? _.map(unique(matches), function(id) { + return that.datums[id]; + }) : []; + }, + reset: function reset() { + this.datums = []; + this.trie = newNode(); + }, + serialize: function serialize() { + return { + datums: this.datums, + trie: this.trie + }; + } + }); + return SearchIndex; + function normalizeTokens(tokens) { + tokens = _.filter(tokens, function(token) { + return !!token; + }); + tokens = _.map(tokens, function(token) { + return token.toLowerCase(); + }); + return tokens; + } + function newNode() { + return { + ids: [], + children: {} + }; + } + function unique(array) { + var seen = {}, uniques = []; + for (var i = 0; i < array.length; i++) { + if (!seen[array[i]]) { + seen[array[i]] = true; + uniques.push(array[i]); + } + } + return uniques; + } + function getIntersection(arrayA, arrayB) { + var ai = 0, bi = 0, intersection = []; + arrayA = arrayA.sort(compare); + arrayB = arrayB.sort(compare); + while (ai < arrayA.length && bi < arrayB.length) { + if (arrayA[ai] < arrayB[bi]) { + ai++; + } else if (arrayA[ai] > arrayB[bi]) { + bi++; + } else { + intersection.push(arrayA[ai]); + ai++; + bi++; + } + } + return intersection; + function compare(a, b) { + return a - b; + } + } + }(); + var oParser = function() { + return { + local: getLocal, + prefetch: getPrefetch, + remote: getRemote + }; + function getLocal(o) { + return o.local || null; + } + function getPrefetch(o) { + var prefetch, defaults; + defaults = { + url: null, + thumbprint: "", + ttl: 24 * 60 * 60 * 1e3, + filter: null, + ajax: {} + }; + if (prefetch = o.prefetch || null) { + prefetch = _.isString(prefetch) ? { + url: prefetch + } : prefetch; + prefetch = _.mixin(defaults, prefetch); + prefetch.thumbprint = VERSION + prefetch.thumbprint; + prefetch.ajax.type = prefetch.ajax.type || "GET"; + prefetch.ajax.dataType = prefetch.ajax.dataType || "json"; + !prefetch.url && $.error("prefetch requires url to be set"); + } + return prefetch; + } + function getRemote(o) { + var remote, defaults; + defaults = { + url: null, + wildcard: "%QUERY", + replace: null, + rateLimitBy: "debounce", + rateLimitWait: 300, + send: null, + filter: null, + ajax: {} + }; + if (remote = o.remote || null) { + remote = _.isString(remote) ? { + url: remote + } : remote; + remote = _.mixin(defaults, remote); + remote.rateLimiter = /^throttle$/i.test(remote.rateLimitBy) ? byThrottle(remote.rateLimitWait) : byDebounce(remote.rateLimitWait); + remote.ajax.type = remote.ajax.type || "GET"; + remote.ajax.dataType = remote.ajax.dataType || "json"; + delete remote.rateLimitBy; + delete remote.rateLimitWait; + !remote.url && $.error("remote requires url to be set"); + } + return remote; + function byDebounce(wait) { + return function(fn) { + return _.debounce(fn, wait); + }; + } + function byThrottle(wait) { + return function(fn) { + return _.throttle(fn, wait); + }; + } + } + }(); + (function(root) { + var old, keys; + old = root.Bloodhound; + keys = { + data: "data", + protocol: "protocol", + thumbprint: "thumbprint" + }; + root.Bloodhound = Bloodhound; + function Bloodhound(o) { + if (!o || !o.local && !o.prefetch && !o.remote) { + $.error("one of local, prefetch, or remote is required"); + } + this.limit = o.limit || 5; + this.sorter = getSorter(o.sorter); + this.dupDetector = o.dupDetector || ignoreDuplicates; + this.local = oParser.local(o); + this.prefetch = oParser.prefetch(o); + this.remote = oParser.remote(o); + this.cacheKey = this.prefetch ? this.prefetch.cacheKey || this.prefetch.url : null; + this.index = new SearchIndex({ + datumTokenizer: o.datumTokenizer, + queryTokenizer: o.queryTokenizer + }); + this.storage = this.cacheKey ? new PersistentStorage(this.cacheKey) : null; + } + Bloodhound.noConflict = function noConflict() { + root.Bloodhound = old; + return Bloodhound; + }; + Bloodhound.tokenizers = tokenizers; + _.mixin(Bloodhound.prototype, { + _loadPrefetch: function loadPrefetch(o) { + var that = this, serialized, deferred; + if (serialized = this._readFromStorage(o.thumbprint)) { + this.index.bootstrap(serialized); + deferred = $.Deferred().resolve(); + } else { + deferred = $.ajax(o.url, o.ajax).done(handlePrefetchResponse); + } + return deferred; + function handlePrefetchResponse(resp) { + that.clear(); + that.add(o.filter ? o.filter(resp) : resp); + that._saveToStorage(that.index.serialize(), o.thumbprint, o.ttl); + } + }, + _getFromRemote: function getFromRemote(query, cb) { + var that = this, url, uriEncodedQuery; + query = query || ""; + uriEncodedQuery = encodeURIComponent(query); + url = this.remote.replace ? this.remote.replace(this.remote.url, query) : this.remote.url.replace(this.remote.wildcard, uriEncodedQuery); + return this.transport.get(url, this.remote.ajax, handleRemoteResponse); + function handleRemoteResponse(err, resp) { + err ? cb([]) : cb(that.remote.filter ? that.remote.filter(resp) : resp); + } + }, + _saveToStorage: function saveToStorage(data, thumbprint, ttl) { + if (this.storage) { + this.storage.set(keys.data, data, ttl); + this.storage.set(keys.protocol, location.protocol, ttl); + this.storage.set(keys.thumbprint, thumbprint, ttl); + } + }, + _readFromStorage: function readFromStorage(thumbprint) { + var stored = {}, isExpired; + if (this.storage) { + stored.data = this.storage.get(keys.data); + stored.protocol = this.storage.get(keys.protocol); + stored.thumbprint = this.storage.get(keys.thumbprint); + } + isExpired = stored.thumbprint !== thumbprint || stored.protocol !== location.protocol; + return stored.data && !isExpired ? stored.data : null; + }, + _initialize: function initialize() { + var that = this, local = this.local, deferred; + deferred = this.prefetch ? this._loadPrefetch(this.prefetch) : $.Deferred().resolve(); + local && deferred.done(addLocalToIndex); + this.transport = this.remote ? new Transport(this.remote) : null; + return this.initPromise = deferred.promise(); + function addLocalToIndex() { + that.add(_.isFunction(local) ? local() : local); + } + }, + initialize: function initialize(force) { + return !this.initPromise || force ? this._initialize() : this.initPromise; + }, + add: function add(data) { + this.index.add(data); + }, + get: function get(query, cb) { + var that = this, matches = [], cacheHit = false; + matches = this.index.get(query); + matches = this.sorter(matches).slice(0, this.limit); + if (matches.length < this.limit && this.transport) { + cacheHit = this._getFromRemote(query, returnRemoteMatches); + } + if (!cacheHit) { + (matches.length > 0 || !this.transport) && cb && cb(matches); + } + function returnRemoteMatches(remoteMatches) { + var matchesWithBackfill = matches.slice(0); + _.each(remoteMatches, function(remoteMatch) { + var isDuplicate; + isDuplicate = _.some(matchesWithBackfill, function(match) { + return that.dupDetector(remoteMatch, match); + }); + !isDuplicate && matchesWithBackfill.push(remoteMatch); + return matchesWithBackfill.length < that.limit; + }); + cb && cb(that.sorter(matchesWithBackfill)); + } + }, + clear: function clear() { + this.index.reset(); + }, + clearPrefetchCache: function clearPrefetchCache() { + this.storage && this.storage.clear(); + }, + clearRemoteCache: function clearRemoteCache() { + this.transport && Transport.resetCache(); + }, + ttAdapter: function ttAdapter() { + return _.bind(this.get, this); + } + }); + return Bloodhound; + function getSorter(sortFn) { + return _.isFunction(sortFn) ? sort : noSort; + function sort(array) { + return array.sort(sortFn); + } + function noSort(array) { + return array; + } + } + function ignoreDuplicates() { + return false; + } + })(this); + var html = { + wrapper: '', + dropdown: '', + dataset: '
', + suggestions: '', + suggestion: '
' + }; + var css = { + wrapper: { + position: "relative", + display: "inline-block" + }, + hint: { + position: "absolute", + top: "0", + left: "0", + borderColor: "transparent", + boxShadow: "none" + }, + input: { + position: "relative", + verticalAlign: "top", + backgroundColor: "transparent" + }, + inputWithNoHint: { + position: "relative", + verticalAlign: "top" + }, + dropdown: { + position: "absolute", + top: "100%", + left: "0", + zIndex: "100", + display: "none" + }, + suggestions: { + display: "block" + }, + suggestion: { + whiteSpace: "nowrap", + cursor: "pointer" + }, + suggestionChild: { + whiteSpace: "normal" + }, + ltr: { + left: "0", + right: "auto" + }, + rtl: { + left: "auto", + right: " 0" + } + }; + if (_.isMsie()) { + _.mixin(css.input, { + backgroundImage: "url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)" + }); + } + if (_.isMsie() && _.isMsie() <= 7) { + _.mixin(css.input, { + marginTop: "-1px" + }); + } + var EventBus = function() { + var namespace = "typeahead:"; + function EventBus(o) { + if (!o || !o.el) { + $.error("EventBus initialized without el"); + } + this.$el = $(o.el); + } + _.mixin(EventBus.prototype, { + trigger: function(type) { + var args = [].slice.call(arguments, 1); + this.$el.trigger(namespace + type, args); + } + }); + return EventBus; + }(); + var EventEmitter = function() { + var splitter = /\s+/, nextTick = getNextTick(); + return { + onSync: onSync, + onAsync: onAsync, + off: off, + trigger: trigger + }; + function on(method, types, cb, context) { + var type; + if (!cb) { + return this; + } + types = types.split(splitter); + cb = context ? bindContext(cb, context) : cb; + this._callbacks = this._callbacks || {}; + while (type = types.shift()) { + this._callbacks[type] = this._callbacks[type] || { + sync: [], + async: [] + }; + this._callbacks[type][method].push(cb); + } + return this; + } + function onAsync(types, cb, context) { + return on.call(this, "async", types, cb, context); + } + function onSync(types, cb, context) { + return on.call(this, "sync", types, cb, context); + } + function off(types) { + var type; + if (!this._callbacks) { + return this; + } + types = types.split(splitter); + while (type = types.shift()) { + delete this._callbacks[type]; + } + return this; + } + function trigger(types) { + var type, callbacks, args, syncFlush, asyncFlush; + if (!this._callbacks) { + return this; + } + types = types.split(splitter); + args = [].slice.call(arguments, 1); + while ((type = types.shift()) && (callbacks = this._callbacks[type])) { + syncFlush = getFlush(callbacks.sync, this, [ type ].concat(args)); + asyncFlush = getFlush(callbacks.async, this, [ type ].concat(args)); + syncFlush() && nextTick(asyncFlush); + } + return this; + } + function getFlush(callbacks, context, args) { + return flush; + function flush() { + var cancelled; + for (var i = 0; !cancelled && i < callbacks.length; i += 1) { + cancelled = callbacks[i].apply(context, args) === false; + } + return !cancelled; + } + } + function getNextTick() { + var nextTickFn; + if (window.setImmediate) { + nextTickFn = function nextTickSetImmediate(fn) { + setImmediate(function() { + fn(); + }); + }; + } else { + nextTickFn = function nextTickSetTimeout(fn) { + setTimeout(function() { + fn(); + }, 0); + }; + } + return nextTickFn; + } + function bindContext(fn, context) { + return fn.bind ? fn.bind(context) : function() { + fn.apply(context, [].slice.call(arguments, 0)); + }; + } + }(); + var highlight = function(doc) { + var defaults = { + node: null, + pattern: null, + tagName: "strong", + className: null, + wordsOnly: false, + caseSensitive: false + }; + return function hightlight(o) { + var regex; + o = _.mixin({}, defaults, o); + if (!o.node || !o.pattern) { + return; + } + o.pattern = _.isArray(o.pattern) ? o.pattern : [ o.pattern ]; + regex = getRegex(o.pattern, o.caseSensitive, o.wordsOnly); + traverse(o.node, hightlightTextNode); + function hightlightTextNode(textNode) { + var match, patternNode; + if (match = regex.exec(textNode.data)) { + wrapperNode = doc.createElement(o.tagName); + o.className && (wrapperNode.className = o.className); + patternNode = textNode.splitText(match.index); + patternNode.splitText(match[0].length); + wrapperNode.appendChild(patternNode.cloneNode(true)); + textNode.parentNode.replaceChild(wrapperNode, patternNode); + } + return !!match; + } + function traverse(el, hightlightTextNode) { + var childNode, TEXT_NODE_TYPE = 3; + for (var i = 0; i < el.childNodes.length; i++) { + childNode = el.childNodes[i]; + if (childNode.nodeType === TEXT_NODE_TYPE) { + i += hightlightTextNode(childNode) ? 1 : 0; + } else { + traverse(childNode, hightlightTextNode); + } + } + } + }; + function getRegex(patterns, caseSensitive, wordsOnly) { + var escapedPatterns = [], regexStr; + for (var i = 0; i < patterns.length; i++) { + escapedPatterns.push(_.escapeRegExChars(patterns[i])); + } + regexStr = wordsOnly ? "\\b(" + escapedPatterns.join("|") + ")\\b" : "(" + escapedPatterns.join("|") + ")"; + return caseSensitive ? new RegExp(regexStr) : new RegExp(regexStr, "i"); + } + }(window.document); + var Input = function() { + var specialKeyCodeMap; + specialKeyCodeMap = { + 9: "tab", + 27: "esc", + 37: "left", + 39: "right", + 13: "enter", + 38: "up", + 40: "down" + }; + function Input(o) { + var that = this, onBlur, onFocus, onKeydown, onInput; + o = o || {}; + if (!o.input) { + $.error("input is missing"); + } + onBlur = _.bind(this._onBlur, this); + onFocus = _.bind(this._onFocus, this); + onKeydown = _.bind(this._onKeydown, this); + onInput = _.bind(this._onInput, this); + this.$hint = $(o.hint); + this.$input = $(o.input).on("blur.tt", onBlur).on("focus.tt", onFocus).on("keydown.tt", onKeydown); + if (this.$hint.length === 0) { + this.setHint = this.getHint = this.clearHint = this.clearHintIfInvalid = _.noop; + } + if (!_.isMsie()) { + this.$input.on("input.tt", onInput); + } else { + this.$input.on("keydown.tt keypress.tt cut.tt paste.tt", function($e) { + if (specialKeyCodeMap[$e.which || $e.keyCode]) { + return; + } + _.defer(_.bind(that._onInput, that, $e)); + }); + } + this.query = this.$input.val(); + this.$overflowHelper = buildOverflowHelper(this.$input); + } + Input.normalizeQuery = function(str) { + return (str || "").replace(/^\s*/g, "").replace(/\s{2,}/g, " "); + }; + _.mixin(Input.prototype, EventEmitter, { + _onBlur: function onBlur() { + this.resetInputValue(); + this.trigger("blurred"); + }, + _onFocus: function onFocus() { + this.trigger("focused"); + }, + _onKeydown: function onKeydown($e) { + var keyName = specialKeyCodeMap[$e.which || $e.keyCode]; + this._managePreventDefault(keyName, $e); + if (keyName && this._shouldTrigger(keyName, $e)) { + this.trigger(keyName + "Keyed", $e); + } + }, + _onInput: function onInput() { + this._checkInputValue(); + }, + _managePreventDefault: function managePreventDefault(keyName, $e) { + var preventDefault, hintValue, inputValue; + switch (keyName) { + case "tab": + hintValue = this.getHint(); + inputValue = this.getInputValue(); + preventDefault = hintValue && hintValue !== inputValue && !withModifier($e); + break; + + case "up": + case "down": + preventDefault = !withModifier($e); + break; + + default: + preventDefault = false; + } + preventDefault && $e.preventDefault(); + }, + _shouldTrigger: function shouldTrigger(keyName, $e) { + var trigger; + switch (keyName) { + case "tab": + trigger = !withModifier($e); + break; + + default: + trigger = true; + } + return trigger; + }, + _checkInputValue: function checkInputValue() { + var inputValue, areEquivalent, hasDifferentWhitespace; + inputValue = this.getInputValue(); + areEquivalent = areQueriesEquivalent(inputValue, this.query); + hasDifferentWhitespace = areEquivalent ? this.query.length !== inputValue.length : false; + if (!areEquivalent) { + this.trigger("queryChanged", this.query = inputValue); + } else if (hasDifferentWhitespace) { + this.trigger("whitespaceChanged", this.query); + } + }, + focus: function focus() { + this.$input.focus(); + }, + blur: function blur() { + this.$input.blur(); + }, + getQuery: function getQuery() { + return this.query; + }, + setQuery: function setQuery(query) { + this.query = query; + }, + getInputValue: function getInputValue() { + return this.$input.val(); + }, + setInputValue: function setInputValue(value, silent) { + this.$input.val(value); + silent ? this.clearHint() : this._checkInputValue(); + }, + resetInputValue: function resetInputValue() { + this.setInputValue(this.query, true); + }, + getHint: function getHint() { + return this.$hint.val(); + }, + setHint: function setHint(value) { + this.$hint.val(value); + }, + clearHint: function clearHint() { + this.setHint(""); + }, + clearHintIfInvalid: function clearHintIfInvalid() { + var val, hint, valIsPrefixOfHint, isValid; + val = this.getInputValue(); + hint = this.getHint(); + valIsPrefixOfHint = val !== hint && hint.indexOf(val) === 0; + isValid = val !== "" && valIsPrefixOfHint && !this.hasOverflow(); + !isValid && this.clearHint(); + }, + getLanguageDirection: function getLanguageDirection() { + return (this.$input.css("direction") || "ltr").toLowerCase(); + }, + hasOverflow: function hasOverflow() { + var constraint = this.$input.width() - 2; + this.$overflowHelper.text(this.getInputValue()); + return this.$overflowHelper.width() >= constraint; + }, + isCursorAtEnd: function() { + var valueLength, selectionStart, range; + valueLength = this.$input.val().length; + selectionStart = this.$input[0].selectionStart; + if (_.isNumber(selectionStart)) { + return selectionStart === valueLength; + } else if (document.selection) { + range = document.selection.createRange(); + range.moveStart("character", -valueLength); + return valueLength === range.text.length; + } + return true; + }, + destroy: function destroy() { + this.$hint.off(".tt"); + this.$input.off(".tt"); + this.$hint = this.$input = this.$overflowHelper = null; + } + }); + return Input; + function buildOverflowHelper($input) { + return $('').css({ + position: "absolute", + visibility: "hidden", + whiteSpace: "pre", + fontFamily: $input.css("font-family"), + fontSize: $input.css("font-size"), + fontStyle: $input.css("font-style"), + fontVariant: $input.css("font-variant"), + fontWeight: $input.css("font-weight"), + wordSpacing: $input.css("word-spacing"), + letterSpacing: $input.css("letter-spacing"), + textIndent: $input.css("text-indent"), + textRendering: $input.css("text-rendering"), + textTransform: $input.css("text-transform") + }).insertAfter($input); + } + function areQueriesEquivalent(a, b) { + return Input.normalizeQuery(a) === Input.normalizeQuery(b); + } + function withModifier($e) { + return $e.altKey || $e.ctrlKey || $e.metaKey || $e.shiftKey; + } + }(); + var Dataset = function() { + var datasetKey = "ttDataset", valueKey = "ttValue", datumKey = "ttDatum"; + function Dataset(o) { + o = o || {}; + o.templates = o.templates || {}; + if (!o.source) { + $.error("missing source"); + } + if (o.name && !isValidName(o.name)) { + $.error("invalid dataset name: " + o.name); + } + this.query = null; + this.highlight = !!o.highlight; + this.name = o.name || _.getUniqueId(); + this.source = o.source; + this.displayFn = getDisplayFn(o.display || o.displayKey); + this.templates = getTemplates(o.templates, this.displayFn); + this.$el = $(html.dataset.replace("%CLASS%", this.name)); + } + Dataset.extractDatasetName = function extractDatasetName(el) { + return $(el).data(datasetKey); + }; + Dataset.extractValue = function extractDatum(el) { + return $(el).data(valueKey); + }; + Dataset.extractDatum = function extractDatum(el) { + return $(el).data(datumKey); + }; + _.mixin(Dataset.prototype, EventEmitter, { + _render: function render(query, suggestions) { + if (!this.$el) { + return; + } + var that = this, hasSuggestions; + this.$el.empty(); + hasSuggestions = suggestions && suggestions.length; + if (!hasSuggestions && this.templates.empty) { + this.$el.html(getEmptyHtml()).prepend(that.templates.header ? getHeaderHtml() : null).append(that.templates.footer ? getFooterHtml() : null); + } else if (hasSuggestions) { + this.$el.html(getSuggestionsHtml()).prepend(that.templates.header ? getHeaderHtml() : null).append(that.templates.footer ? getFooterHtml() : null); + } + this.trigger("rendered"); + function getEmptyHtml() { + return that.templates.empty({ + query: query, + isEmpty: true + }); + } + function getSuggestionsHtml() { + var $suggestions, nodes; + $suggestions = $(html.suggestions).css(css.suggestions); + nodes = _.map(suggestions, getSuggestionNode); + $suggestions.append.apply($suggestions, nodes); + that.highlight && highlight({ + node: $suggestions[0], + pattern: query + }); + return $suggestions; + function getSuggestionNode(suggestion) { + var $el; + $el = $(html.suggestion).append(that.templates.suggestion(suggestion)).data(datasetKey, that.name).data(valueKey, that.displayFn(suggestion)).data(datumKey, suggestion); + $el.children().each(function() { + $(this).css(css.suggestionChild); + }); + return $el; + } + } + function getHeaderHtml() { + return that.templates.header({ + query: query, + isEmpty: !hasSuggestions + }); + } + function getFooterHtml() { + return that.templates.footer({ + query: query, + isEmpty: !hasSuggestions + }); + } + }, + getRoot: function getRoot() { + return this.$el; + }, + update: function update(query) { + var that = this; + this.query = query; + this.canceled = false; + this.source(query, render); + function render(suggestions) { + if (!that.canceled && query === that.query) { + that._render(query, suggestions); + } + } + }, + cancel: function cancel() { + this.canceled = true; + }, + clear: function clear() { + this.cancel(); + this.$el.empty(); + this.trigger("rendered"); + }, + isEmpty: function isEmpty() { + return this.$el.is(":empty"); + }, + destroy: function destroy() { + this.$el = null; + } + }); + return Dataset; + function getDisplayFn(display) { + display = display || "value"; + return _.isFunction(display) ? display : displayFn; + function displayFn(obj) { + return obj[display]; + } + } + function getTemplates(templates, displayFn) { + return { + empty: templates.empty && _.templatify(templates.empty), + header: templates.header && _.templatify(templates.header), + footer: templates.footer && _.templatify(templates.footer), + suggestion: templates.suggestion || suggestionTemplate + }; + function suggestionTemplate(context) { + return "

" + displayFn(context) + "

"; + } + } + function isValidName(str) { + return /^[_a-zA-Z0-9-]+$/.test(str); + } + }(); + var Dropdown = function() { + function Dropdown(o) { + var that = this, onSuggestionClick, onSuggestionMouseEnter, onSuggestionMouseLeave; + o = o || {}; + if (!o.menu) { + $.error("menu is required"); + } + this.isOpen = false; + this.isEmpty = true; + this.datasets = _.map(o.datasets, initializeDataset); + onSuggestionClick = _.bind(this._onSuggestionClick, this); + onSuggestionMouseEnter = _.bind(this._onSuggestionMouseEnter, this); + onSuggestionMouseLeave = _.bind(this._onSuggestionMouseLeave, this); + this.$menu = $(o.menu).on("click.tt", ".tt-suggestion", onSuggestionClick).on("mouseenter.tt", ".tt-suggestion", onSuggestionMouseEnter).on("mouseleave.tt", ".tt-suggestion", onSuggestionMouseLeave); + _.each(this.datasets, function(dataset) { + that.$menu.append(dataset.getRoot()); + dataset.onSync("rendered", that._onRendered, that); + }); + } + _.mixin(Dropdown.prototype, EventEmitter, { + _onSuggestionClick: function onSuggestionClick($e) { + this.trigger("suggestionClicked", $($e.currentTarget)); + }, + _onSuggestionMouseEnter: function onSuggestionMouseEnter($e) { + this._removeCursor(); + this._setCursor($($e.currentTarget), true); + }, + _onSuggestionMouseLeave: function onSuggestionMouseLeave() { + this._removeCursor(); + }, + _onRendered: function onRendered() { + this.isEmpty = _.every(this.datasets, isDatasetEmpty); + this.isEmpty ? this._hide() : this.isOpen && this._show(); + this.trigger("datasetRendered"); + function isDatasetEmpty(dataset) { + return dataset.isEmpty(); + } + }, + _hide: function() { + this.$menu.hide(); + }, + _show: function() { + this.$menu.css("display", "block"); + }, + _getSuggestions: function getSuggestions() { + return this.$menu.find(".tt-suggestion"); + }, + _getCursor: function getCursor() { + return this.$menu.find(".tt-cursor").first(); + }, + _setCursor: function setCursor($el, silent) { + $el.first().addClass("tt-cursor"); + !silent && this.trigger("cursorMoved"); + }, + _removeCursor: function removeCursor() { + this._getCursor().removeClass("tt-cursor"); + }, + _moveCursor: function moveCursor(increment) { + var $suggestions, $oldCursor, newCursorIndex, $newCursor; + if (!this.isOpen) { + return; + } + $oldCursor = this._getCursor(); + $suggestions = this._getSuggestions(); + this._removeCursor(); + newCursorIndex = $suggestions.index($oldCursor) + increment; + newCursorIndex = (newCursorIndex + 1) % ($suggestions.length + 1) - 1; + if (newCursorIndex === -1) { + this.trigger("cursorRemoved"); + return; + } else if (newCursorIndex < -1) { + newCursorIndex = $suggestions.length - 1; + } + this._setCursor($newCursor = $suggestions.eq(newCursorIndex)); + this._ensureVisible($newCursor); + }, + _ensureVisible: function ensureVisible($el) { + var elTop, elBottom, menuScrollTop, menuHeight; + elTop = $el.position().top; + elBottom = elTop + $el.outerHeight(true); + menuScrollTop = this.$menu.scrollTop(); + menuHeight = this.$menu.height() + parseInt(this.$menu.css("paddingTop"), 10) + parseInt(this.$menu.css("paddingBottom"), 10); + if (elTop < 0) { + this.$menu.scrollTop(menuScrollTop + elTop); + } else if (menuHeight < elBottom) { + this.$menu.scrollTop(menuScrollTop + (elBottom - menuHeight)); + } + }, + close: function close() { + if (this.isOpen) { + this.isOpen = false; + this._removeCursor(); + this._hide(); + this.trigger("closed"); + } + }, + open: function open() { + if (!this.isOpen) { + this.isOpen = true; + !this.isEmpty && this._show(); + this.trigger("opened"); + } + }, + setLanguageDirection: function setLanguageDirection(dir) { + this.$menu.css(dir === "ltr" ? css.ltr : css.rtl); + }, + moveCursorUp: function moveCursorUp() { + this._moveCursor(-1); + }, + moveCursorDown: function moveCursorDown() { + this._moveCursor(+1); + }, + getDatumForSuggestion: function getDatumForSuggestion($el) { + var datum = null; + if ($el.length) { + datum = { + raw: Dataset.extractDatum($el), + value: Dataset.extractValue($el), + datasetName: Dataset.extractDatasetName($el) + }; + } + return datum; + }, + getDatumForCursor: function getDatumForCursor() { + return this.getDatumForSuggestion(this._getCursor().first()); + }, + getDatumForTopSuggestion: function getDatumForTopSuggestion() { + return this.getDatumForSuggestion(this._getSuggestions().first()); + }, + update: function update(query) { + _.each(this.datasets, updateDataset); + function updateDataset(dataset) { + dataset.update(query); + } + }, + empty: function empty() { + _.each(this.datasets, clearDataset); + this.isEmpty = true; + function clearDataset(dataset) { + dataset.clear(); + } + }, + isVisible: function isVisible() { + return this.isOpen && !this.isEmpty; + }, + destroy: function destroy() { + this.$menu.off(".tt"); + this.$menu = null; + _.each(this.datasets, destroyDataset); + function destroyDataset(dataset) { + dataset.destroy(); + } + } + }); + return Dropdown; + function initializeDataset(oDataset) { + return new Dataset(oDataset); + } + }(); + var Typeahead = function() { + var attrsKey = "ttAttrs"; + function Typeahead(o) { + var $menu, $input, $hint; + o = o || {}; + if (!o.input) { + $.error("missing input"); + } + this.isActivated = false; + this.autoselect = !!o.autoselect; + this.minLength = _.isNumber(o.minLength) ? o.minLength : 1; + this.$node = buildDomStructure(o.input, o.withHint); + $menu = this.$node.find(".tt-dropdown-menu"); + $input = this.$node.find(".tt-input"); + $hint = this.$node.find(".tt-hint"); + $input.on("blur.tt", function($e) { + var active, isActive, hasActive; + active = document.activeElement; + isActive = $menu.is(active); + hasActive = $menu.has(active).length > 0; + if (_.isMsie() && (isActive || hasActive)) { + $e.preventDefault(); + $e.stopImmediatePropagation(); + _.defer(function() { + $input.focus(); + }); + } + }); + $menu.on("mousedown.tt", function($e) { + $e.preventDefault(); + }); + this.eventBus = o.eventBus || new EventBus({ + el: $input + }); + this.dropdown = new Dropdown({ + menu: $menu, + datasets: o.datasets + }).onSync("suggestionClicked", this._onSuggestionClicked, this).onSync("cursorMoved", this._onCursorMoved, this).onSync("cursorRemoved", this._onCursorRemoved, this).onSync("opened", this._onOpened, this).onSync("closed", this._onClosed, this).onAsync("datasetRendered", this._onDatasetRendered, this); + this.input = new Input({ + input: $input, + hint: $hint + }).onSync("focused", this._onFocused, this).onSync("blurred", this._onBlurred, this).onSync("enterKeyed", this._onEnterKeyed, this).onSync("tabKeyed", this._onTabKeyed, this).onSync("escKeyed", this._onEscKeyed, this).onSync("upKeyed", this._onUpKeyed, this).onSync("downKeyed", this._onDownKeyed, this).onSync("leftKeyed", this._onLeftKeyed, this).onSync("rightKeyed", this._onRightKeyed, this).onSync("queryChanged", this._onQueryChanged, this).onSync("whitespaceChanged", this._onWhitespaceChanged, this); + this._setLanguageDirection(); + } + _.mixin(Typeahead.prototype, { + _onSuggestionClicked: function onSuggestionClicked(type, $el) { + var datum; + if (datum = this.dropdown.getDatumForSuggestion($el)) { + this._select(datum); + } + }, + _onCursorMoved: function onCursorMoved() { + var datum = this.dropdown.getDatumForCursor(); + this.input.setInputValue(datum.value, true); + this.eventBus.trigger("cursorchanged", datum.raw, datum.datasetName); + }, + _onCursorRemoved: function onCursorRemoved() { + this.input.resetInputValue(); + this._updateHint(); + }, + _onDatasetRendered: function onDatasetRendered() { + this._updateHint(); + }, + _onOpened: function onOpened() { + this._updateHint(); + this.eventBus.trigger("opened"); + }, + _onClosed: function onClosed() { + this.input.clearHint(); + this.eventBus.trigger("closed"); + }, + _onFocused: function onFocused() { + this.isActivated = true; + this.dropdown.open(); + }, + _onBlurred: function onBlurred() { + this.isActivated = false; + this.dropdown.empty(); + this.dropdown.close(); + this.setVal("", true); //LM + }, + _onEnterKeyed: function onEnterKeyed(type, $e) { + var cursorDatum, topSuggestionDatum; + cursorDatum = this.dropdown.getDatumForCursor(); + topSuggestionDatum = this.dropdown.getDatumForTopSuggestion(); + if (cursorDatum) { + this._select(cursorDatum); + $e.preventDefault(); + } else if (this.autoselect && topSuggestionDatum) { + this._select(topSuggestionDatum); + $e.preventDefault(); + } + }, + _onTabKeyed: function onTabKeyed(type, $e) { + var datum; + if (datum = this.dropdown.getDatumForCursor()) { + this._select(datum); + $e.preventDefault(); + } else { + this._autocomplete(true); + } + }, + _onEscKeyed: function onEscKeyed() { + this.dropdown.close(); + this.input.resetInputValue(); + }, + _onUpKeyed: function onUpKeyed() { + var query = this.input.getQuery(); + this.dropdown.isEmpty && query.length >= this.minLength ? this.dropdown.update(query) : this.dropdown.moveCursorUp(); + this.dropdown.open(); + }, + _onDownKeyed: function onDownKeyed() { + var query = this.input.getQuery(); + this.dropdown.isEmpty && query.length >= this.minLength ? this.dropdown.update(query) : this.dropdown.moveCursorDown(); + this.dropdown.open(); + }, + _onLeftKeyed: function onLeftKeyed() { + this.dir === "rtl" && this._autocomplete(); + }, + _onRightKeyed: function onRightKeyed() { + this.dir === "ltr" && this._autocomplete(); + }, + _onQueryChanged: function onQueryChanged(e, query) { + this.input.clearHintIfInvalid(); + query.length >= this.minLength ? this.dropdown.update(query) : this.dropdown.empty(); + this.dropdown.open(); + this._setLanguageDirection(); + }, + _onWhitespaceChanged: function onWhitespaceChanged() { + this._updateHint(); + this.dropdown.open(); + }, + _setLanguageDirection: function setLanguageDirection() { + var dir; + if (this.dir !== (dir = this.input.getLanguageDirection())) { + this.dir = dir; + this.$node.css("direction", dir); + this.dropdown.setLanguageDirection(dir); + } + }, + _updateHint: function updateHint() { + var datum, val, query, escapedQuery, frontMatchRegEx, match; + datum = this.dropdown.getDatumForTopSuggestion(); + if (datum && this.dropdown.isVisible() && !this.input.hasOverflow()) { + val = this.input.getInputValue(); + query = Input.normalizeQuery(val); + escapedQuery = _.escapeRegExChars(query); + frontMatchRegEx = new RegExp("^(?:" + escapedQuery + ")(.+$)", "i"); + match = frontMatchRegEx.exec(datum.value); + match ? this.input.setHint(val + match[1]) : this.input.clearHint(); + } else { + this.input.clearHint(); + } + }, + _autocomplete: function autocomplete(laxCursor) { + var hint, query, isCursorAtEnd, datum; + hint = this.input.getHint(); + query = this.input.getQuery(); + isCursorAtEnd = laxCursor || this.input.isCursorAtEnd(); + if (hint && query !== hint && isCursorAtEnd) { + datum = this.dropdown.getDatumForTopSuggestion(); + datum && this.input.setInputValue(datum.value); + this.eventBus.trigger("autocompleted", datum.raw, datum.datasetName); + } + }, + _select: function select(datum) { + this.input.setQuery(datum.value); + this.input.setInputValue(datum.value, true); + this._setLanguageDirection(); + this.eventBus.trigger("selected", datum.raw, datum.datasetName); + this.dropdown.close(); + _.defer(_.bind(this.dropdown.empty, this.dropdown)); + }, + open: function open() { + this.dropdown.open(); + }, + close: function close() { + this.dropdown.close(); + }, + setVal: function setVal(val) { + if (this.isActivated) { + this.input.setInputValue(val); + } else { + this.input.setQuery(val); + this.input.setInputValue(val, true); + } + this._setLanguageDirection(); + }, + getVal: function getVal() { + return this.input.getQuery(); + }, + destroy: function destroy() { + this.input.destroy(); + this.dropdown.destroy(); + destroyDomStructure(this.$node); + this.$node = null; + } + }); + return Typeahead; + function buildDomStructure(input, withHint) { + var $input, $wrapper, $dropdown, $hint; + $input = $(input); + $wrapper = $(html.wrapper).css(css.wrapper); + $dropdown = $(html.dropdown).css(css.dropdown); + $hint = $input.clone().css(css.hint).css(getBackgroundStyles($input)); + $hint.val("").removeData().addClass("tt-hint").removeAttr("id name placeholder").prop("disabled", true).attr({ + autocomplete: "off", + spellcheck: "false" + }); + $input.data(attrsKey, { + dir: $input.attr("dir"), + autocomplete: $input.attr("autocomplete"), + spellcheck: $input.attr("spellcheck"), + style: $input.attr("style") + }); + $input.addClass("tt-input").attr({ + autocomplete: "off", + spellcheck: false + }).css(withHint ? css.input : css.inputWithNoHint); + try { + !$input.attr("dir") && $input.attr("dir", "auto"); + } catch (e) {} + return $input.wrap($wrapper).parent().prepend(withHint ? $hint : null).append($dropdown); + } + function getBackgroundStyles($el) { + return { + backgroundAttachment: $el.css("background-attachment"), + backgroundClip: $el.css("background-clip"), + backgroundColor: $el.css("background-color"), + backgroundImage: $el.css("background-image"), + backgroundOrigin: $el.css("background-origin"), + backgroundPosition: $el.css("background-position"), + backgroundRepeat: $el.css("background-repeat"), + backgroundSize: $el.css("background-size") + }; + } + function destroyDomStructure($node) { + var $input = $node.find(".tt-input"); + _.each($input.data(attrsKey), function(val, key) { + _.isUndefined(val) ? $input.removeAttr(key) : $input.attr(key, val); + }); + $input.detach().removeData(attrsKey).removeClass("tt-input").insertAfter($node); + $node.remove(); + } + }(); + (function() { + var old, typeaheadKey, methods; + old = $.fn.typeahead; + typeaheadKey = "ttTypeahead"; + methods = { + initialize: function initialize(o, datasets) { + datasets = _.isArray(datasets) ? datasets : [].slice.call(arguments, 1); + o = o || {}; + return this.each(attach); + function attach() { + var $input = $(this), eventBus, typeahead; + _.each(datasets, function(d) { + d.highlight = !!o.highlight; + }); + typeahead = new Typeahead({ + input: $input, + eventBus: eventBus = new EventBus({ + el: $input + }), + withHint: _.isUndefined(o.hint) ? true : !!o.hint, + minLength: o.minLength, + autoselect: o.autoselect, + datasets: datasets + }); + $input.data(typeaheadKey, typeahead); + } + }, + open: function open() { + return this.each(openTypeahead); + function openTypeahead() { + var $input = $(this), typeahead; + if (typeahead = $input.data(typeaheadKey)) { + typeahead.open(); + } + } + }, + close: function close() { + return this.each(closeTypeahead); + function closeTypeahead() { + var $input = $(this), typeahead; + if (typeahead = $input.data(typeaheadKey)) { + typeahead.close(); + } + } + }, + val: function val(newVal) { + return !arguments.length ? getVal(this.first()) : this.each(setVal); + function setVal() { + var $input = $(this), typeahead; + if (typeahead = $input.data(typeaheadKey)) { + typeahead.setVal(newVal); + } + } + function getVal($input) { + var typeahead, query; + if (typeahead = $input.data(typeaheadKey)) { + query = typeahead.getVal(); + } + return query; + } + }, + destroy: function destroy() { + return this.each(unattach); + function unattach() { + var $input = $(this), typeahead; + if (typeahead = $input.data(typeaheadKey)) { + typeahead.destroy(); + $input.removeData(typeaheadKey); + } + } + } + }; + $.fn.typeahead = function(method) { + if (methods[method]) { + return methods[method].apply(this, [].slice.call(arguments, 1)); + } else { + return methods.initialize.apply(this, arguments); + } + }; + $.fn.typeahead.noConflict = function noConflict() { + $.fn.typeahead = old; + return this; + }; + })(); + + + + //})(window.jQuery); + + + }); + define('searchView',[ + 'App', + // Templates + 'text!tpl/search.html', + 'text!tpl/search_suggestion.html', + // Tools + 'typeahead' + ], function(App, searchTpl, suggestionTpl) { + + var searchView = Backbone.View.extend({ + el: '#search', + /** + * Init. + */ + init: function() { + var tpl = _.template(searchTpl); + var className = 'form-control input-lg'; + var placeholder = 'Search reference'; + this.searchHtml = tpl({ + 'placeholder': placeholder, + 'className': className }); - return Dataset; - function getDisplayFn(display) { - display = display || "value"; - return _.isFunction(display) ? display : displayFn; - function displayFn(obj) { - return obj[display]; - } - } - function getTemplates(templates, displayFn) { - return { - empty: templates.empty && _.templatify(templates.empty), - header: templates.header && _.templatify(templates.header), - footer: templates.footer && _.templatify(templates.footer), - suggestion: templates.suggestion || suggestionTemplate - }; - function suggestionTemplate(context) { - return "

" + displayFn(context) + "

"; - } - } - function isValidName(str) { - return /^[_a-zA-Z0-9-]+$/.test(str); - } - }(); - var Dropdown = function() { - function Dropdown(o) { - var that = this, onSuggestionClick, onSuggestionMouseEnter, onSuggestionMouseLeave; - o = o || {}; - if (!o.menu) { - $.error("menu is required"); - } - this.isOpen = false; - this.isEmpty = true; - this.datasets = _.map(o.datasets, initializeDataset); - onSuggestionClick = _.bind(this._onSuggestionClick, this); - onSuggestionMouseEnter = _.bind(this._onSuggestionMouseEnter, this); - onSuggestionMouseLeave = _.bind(this._onSuggestionMouseLeave, this); - this.$menu = $(o.menu).on("click.tt", ".tt-suggestion", onSuggestionClick).on("mouseenter.tt", ".tt-suggestion", onSuggestionMouseEnter).on("mouseleave.tt", ".tt-suggestion", onSuggestionMouseLeave); - _.each(this.datasets, function(dataset) { - that.$menu.append(dataset.getRoot()); - dataset.onSync("rendered", that._onRendered, that); - }); - } - _.mixin(Dropdown.prototype, EventEmitter, { - _onSuggestionClick: function onSuggestionClick($e) { - this.trigger("suggestionClicked", $($e.currentTarget)); - }, - _onSuggestionMouseEnter: function onSuggestionMouseEnter($e) { - this._removeCursor(); - this._setCursor($($e.currentTarget), true); - }, - _onSuggestionMouseLeave: function onSuggestionMouseLeave() { - this._removeCursor(); - }, - _onRendered: function onRendered() { - this.isEmpty = _.every(this.datasets, isDatasetEmpty); - this.isEmpty ? this._hide() : this.isOpen && this._show(); - this.trigger("datasetRendered"); - function isDatasetEmpty(dataset) { - return dataset.isEmpty(); - } - }, - _hide: function() { - this.$menu.hide(); - }, - _show: function() { - this.$menu.css("display", "block"); - }, - _getSuggestions: function getSuggestions() { - return this.$menu.find(".tt-suggestion"); - }, - _getCursor: function getCursor() { - return this.$menu.find(".tt-cursor").first(); - }, - _setCursor: function setCursor($el, silent) { - $el.first().addClass("tt-cursor"); - !silent && this.trigger("cursorMoved"); - }, - _removeCursor: function removeCursor() { - this._getCursor().removeClass("tt-cursor"); - }, - _moveCursor: function moveCursor(increment) { - var $suggestions, $oldCursor, newCursorIndex, $newCursor; - if (!this.isOpen) { - return; - } - $oldCursor = this._getCursor(); - $suggestions = this._getSuggestions(); - this._removeCursor(); - newCursorIndex = $suggestions.index($oldCursor) + increment; - newCursorIndex = (newCursorIndex + 1) % ($suggestions.length + 1) - 1; - if (newCursorIndex === -1) { - this.trigger("cursorRemoved"); - return; - } else if (newCursorIndex < -1) { - newCursorIndex = $suggestions.length - 1; - } - this._setCursor($newCursor = $suggestions.eq(newCursorIndex)); - this._ensureVisible($newCursor); - }, - _ensureVisible: function ensureVisible($el) { - var elTop, elBottom, menuScrollTop, menuHeight; - elTop = $el.position().top; - elBottom = elTop + $el.outerHeight(true); - menuScrollTop = this.$menu.scrollTop(); - menuHeight = this.$menu.height() + parseInt(this.$menu.css("paddingTop"), 10) + parseInt(this.$menu.css("paddingBottom"), 10); - if (elTop < 0) { - this.$menu.scrollTop(menuScrollTop + elTop); - } else if (menuHeight < elBottom) { - this.$menu.scrollTop(menuScrollTop + (elBottom - menuHeight)); - } - }, - close: function close() { - if (this.isOpen) { - this.isOpen = false; - this._removeCursor(); - this._hide(); - this.trigger("closed"); - } - }, - open: function open() { - if (!this.isOpen) { - this.isOpen = true; - !this.isEmpty && this._show(); - this.trigger("opened"); - } - }, - setLanguageDirection: function setLanguageDirection(dir) { - this.$menu.css(dir === "ltr" ? css.ltr : css.rtl); - }, - moveCursorUp: function moveCursorUp() { - this._moveCursor(-1); - }, - moveCursorDown: function moveCursorDown() { - this._moveCursor(+1); - }, - getDatumForSuggestion: function getDatumForSuggestion($el) { - var datum = null; - if ($el.length) { - datum = { - raw: Dataset.extractDatum($el), - value: Dataset.extractValue($el), - datasetName: Dataset.extractDatasetName($el) - }; - } - return datum; - }, - getDatumForCursor: function getDatumForCursor() { - return this.getDatumForSuggestion(this._getCursor().first()); - }, - getDatumForTopSuggestion: function getDatumForTopSuggestion() { - return this.getDatumForSuggestion(this._getSuggestions().first()); - }, - update: function update(query) { - _.each(this.datasets, updateDataset); - function updateDataset(dataset) { - dataset.update(query); - } - }, - empty: function empty() { - _.each(this.datasets, clearDataset); - this.isEmpty = true; - function clearDataset(dataset) { - dataset.clear(); - } - }, - isVisible: function isVisible() { - return this.isOpen && !this.isEmpty; - }, - destroy: function destroy() { - this.$menu.off(".tt"); - this.$menu = null; - _.each(this.datasets, destroyDataset); - function destroyDataset(dataset) { - dataset.destroy(); - } + this.items = App.classes.concat(App.allItems); + + return this; + }, + /** + * Render input field with Typehead activated. + */ + render: function() { + // Append the view to the dom + this.$el.append(this.searchHtml); + + // Render Typeahead + var $searchInput = this.$el.find('input[type=text]'); + this.typeaheadRender($searchInput); + this.typeaheadEvents($searchInput); + + return this; + }, + /** + * Apply Twitter Typeahead to the search input field. + * @param {jquery} $input + */ + typeaheadRender: function($input) { + var self = this; + $input.typeahead(null, { + 'displayKey': 'name', + 'minLength': 2, + //'highlight': true, + 'source': self.substringMatcher(this.items), + 'templates': { + 'empty': '

Unable to find any item that match the current query

', + 'suggestion': _.template(suggestionTpl) + } + }); + }, + /** + * Setup typeahead custom events (item selected). + */ + typeaheadEvents: function($input) { + var self = this; + $input.on('typeahead:selected', function(e, item, datasetName) { + var selectedItem = self.items[item.idx]; + select(selectedItem); + }); + $input.on('keydown', function(e) { + if (e.which === 13) { // enter + var txt = $input.val(); + var f = _.find(self.items, function(it) { return it.name == txt; }); + if (f) { + select(f); } + } else if (e.which === 27) { + $input.blur(); + } }); - return Dropdown; - function initializeDataset(oDataset) { - return new Dataset(oDataset); + + function select(selectedItem) { + var hash = App.router.getHash(selectedItem);// + App.router.navigate(hash, {'trigger': true}); + $('#item').focus(); } - }(); - var Typeahead = function() { - var attrsKey = "ttAttrs"; - function Typeahead(o) { - var $menu, $input, $hint; - o = o || {}; - if (!o.input) { - $.error("missing input"); + }, + /** + * substringMatcher function for Typehead (search for strings in an array). + * @param {array} array + * @returns {Function} + */ + substringMatcher: function(array) { + return function findMatches(query, callback) { + var matches = [], substrRegex, arrayLength = array.length; + + // regex used to determine if a string contains the substring `query` + substrRegex = new RegExp(query, 'i'); + + // iterate through the pool of strings and for any string that + // contains the substring `query`, add it to the `matches` array + for (var i=0; i < arrayLength; i++) { + var item = array[i]; + if (substrRegex.test(item.name)) { + // typeahead expects suggestions to be a js object + matches.push({ + 'itemtype': item.itemtype, + 'name': item.name, + 'className': item.class, + 'is_constructor': !!item.is_constructor, + 'final': item.final, + 'idx': i + }); } - this.isActivated = false; - this.autoselect = !!o.autoselect; - this.minLength = _.isNumber(o.minLength) ? o.minLength : 1; - this.$node = buildDomStructure(o.input, o.withHint); - $menu = this.$node.find(".tt-dropdown-menu"); - $input = this.$node.find(".tt-input"); - $hint = this.$node.find(".tt-hint"); - $input.on("blur.tt", function($e) { - var active, isActive, hasActive; - active = document.activeElement; - isActive = $menu.is(active); - hasActive = $menu.has(active).length > 0; - if (_.isMsie() && (isActive || hasActive)) { - $e.preventDefault(); - $e.stopImmediatePropagation(); - _.defer(function() { - $input.focus(); - }); - } - }); - $menu.on("mousedown.tt", function($e) { - $e.preventDefault(); - }); - this.eventBus = o.eventBus || new EventBus({ - el: $input - }); - this.dropdown = new Dropdown({ - menu: $menu, - datasets: o.datasets - }).onSync("suggestionClicked", this._onSuggestionClicked, this).onSync("cursorMoved", this._onCursorMoved, this).onSync("cursorRemoved", this._onCursorRemoved, this).onSync("opened", this._onOpened, this).onSync("closed", this._onClosed, this).onAsync("datasetRendered", this._onDatasetRendered, this); - this.input = new Input({ - input: $input, - hint: $hint - }).onSync("focused", this._onFocused, this).onSync("blurred", this._onBlurred, this).onSync("enterKeyed", this._onEnterKeyed, this).onSync("tabKeyed", this._onTabKeyed, this).onSync("escKeyed", this._onEscKeyed, this).onSync("upKeyed", this._onUpKeyed, this).onSync("downKeyed", this._onDownKeyed, this).onSync("leftKeyed", this._onLeftKeyed, this).onSync("rightKeyed", this._onRightKeyed, this).onSync("queryChanged", this._onQueryChanged, this).onSync("whitespaceChanged", this._onWhitespaceChanged, this); - this._setLanguageDirection(); - } - _.mixin(Typeahead.prototype, { - _onSuggestionClicked: function onSuggestionClicked(type, $el) { - var datum; - if (datum = this.dropdown.getDatumForSuggestion($el)) { - this._select(datum); - } - }, - _onCursorMoved: function onCursorMoved() { - var datum = this.dropdown.getDatumForCursor(); - this.input.setInputValue(datum.value, true); - this.eventBus.trigger("cursorchanged", datum.raw, datum.datasetName); - }, - _onCursorRemoved: function onCursorRemoved() { - this.input.resetInputValue(); - this._updateHint(); - }, - _onDatasetRendered: function onDatasetRendered() { - this._updateHint(); - }, - _onOpened: function onOpened() { - this._updateHint(); - this.eventBus.trigger("opened"); - }, - _onClosed: function onClosed() { - this.input.clearHint(); - this.eventBus.trigger("closed"); - }, - _onFocused: function onFocused() { - this.isActivated = true; - this.dropdown.open(); - }, - _onBlurred: function onBlurred() { - this.isActivated = false; - this.dropdown.empty(); - this.dropdown.close(); - this.setVal("", true); //LM - }, - _onEnterKeyed: function onEnterKeyed(type, $e) { - var cursorDatum, topSuggestionDatum; - cursorDatum = this.dropdown.getDatumForCursor(); - topSuggestionDatum = this.dropdown.getDatumForTopSuggestion(); - if (cursorDatum) { - this._select(cursorDatum); - $e.preventDefault(); - } else if (this.autoselect && topSuggestionDatum) { - this._select(topSuggestionDatum); - $e.preventDefault(); - } - }, - _onTabKeyed: function onTabKeyed(type, $e) { - var datum; - if (datum = this.dropdown.getDatumForCursor()) { - this._select(datum); - $e.preventDefault(); - } else { - this._autocomplete(true); - } - }, - _onEscKeyed: function onEscKeyed() { - this.dropdown.close(); - this.input.resetInputValue(); - }, - _onUpKeyed: function onUpKeyed() { - var query = this.input.getQuery(); - this.dropdown.isEmpty && query.length >= this.minLength ? this.dropdown.update(query) : this.dropdown.moveCursorUp(); - this.dropdown.open(); - }, - _onDownKeyed: function onDownKeyed() { - var query = this.input.getQuery(); - this.dropdown.isEmpty && query.length >= this.minLength ? this.dropdown.update(query) : this.dropdown.moveCursorDown(); - this.dropdown.open(); - }, - _onLeftKeyed: function onLeftKeyed() { - this.dir === "rtl" && this._autocomplete(); - }, - _onRightKeyed: function onRightKeyed() { - this.dir === "ltr" && this._autocomplete(); - }, - _onQueryChanged: function onQueryChanged(e, query) { - this.input.clearHintIfInvalid(); - query.length >= this.minLength ? this.dropdown.update(query) : this.dropdown.empty(); - this.dropdown.open(); - this._setLanguageDirection(); - }, - _onWhitespaceChanged: function onWhitespaceChanged() { - this._updateHint(); - this.dropdown.open(); - }, - _setLanguageDirection: function setLanguageDirection() { - var dir; - if (this.dir !== (dir = this.input.getLanguageDirection())) { - this.dir = dir; - this.$node.css("direction", dir); - this.dropdown.setLanguageDirection(dir); - } - }, - _updateHint: function updateHint() { - var datum, val, query, escapedQuery, frontMatchRegEx, match; - datum = this.dropdown.getDatumForTopSuggestion(); - if (datum && this.dropdown.isVisible() && !this.input.hasOverflow()) { - val = this.input.getInputValue(); - query = Input.normalizeQuery(val); - escapedQuery = _.escapeRegExChars(query); - frontMatchRegEx = new RegExp("^(?:" + escapedQuery + ")(.+$)", "i"); - match = frontMatchRegEx.exec(datum.value); - match ? this.input.setHint(val + match[1]) : this.input.clearHint(); - } else { - this.input.clearHint(); - } - }, - _autocomplete: function autocomplete(laxCursor) { - var hint, query, isCursorAtEnd, datum; - hint = this.input.getHint(); - query = this.input.getQuery(); - isCursorAtEnd = laxCursor || this.input.isCursorAtEnd(); - if (hint && query !== hint && isCursorAtEnd) { - datum = this.dropdown.getDatumForTopSuggestion(); - datum && this.input.setInputValue(datum.value); - this.eventBus.trigger("autocompleted", datum.raw, datum.datasetName); - } - }, - _select: function select(datum) { - this.input.setQuery(datum.value); - this.input.setInputValue(datum.value, true); - this._setLanguageDirection(); - this.eventBus.trigger("selected", datum.raw, datum.datasetName); - this.dropdown.close(); - _.defer(_.bind(this.dropdown.empty, this.dropdown)); - }, - open: function open() { - this.dropdown.open(); - }, - close: function close() { - this.dropdown.close(); - }, - setVal: function setVal(val) { - if (this.isActivated) { - this.input.setInputValue(val); - } else { - this.input.setQuery(val); - this.input.setInputValue(val, true); + } + + callback(matches); + }; + } + + }); + + return searchView; + + }); + + + define('text!tpl/list.html',[],function () { return '<% _.each(groups, function(group){ %>\n
\n

<%=group.name%>

\n
\n <% _.each(group.subgroups, function(subgroup, ind) { %>\n
\n <% if (subgroup.name !== \'0\') { %>\n

<%=subgroup.name%>

\n <% } %>\n \n
\n <% }); %>\n
\n
\n<% }); %>\n';}); + + define('listView',[ + 'App', + // Templates + 'text!tpl/list.html' + ], function (App, listTpl) { + var striptags = function(html) { + var div = document.createElement('div'); + div.innerHTML = html; + return div.textContent; + }; + + var listView = Backbone.View.extend({ + el: '#list', + events: {}, + /** + * Init. + */ + init: function () { + this.listTpl = _.template(listTpl); + + return this; + }, + /** + * Render the list. + */ + render: function (items, listCollection) { + if (items && listCollection) { + var self = this; + + // Render items and group them by module + // module === group + this.groups = {}; + _.each(items, function (item, i) { + + if (!item.private && item.file.indexOf('addons') === -1) { //addons don't get displayed on main page + + var group = item.module || '_'; + var subgroup = item.submodule || '_'; + if (group === subgroup) { + subgroup = '0'; + } + var hash = App.router.getHash(item); + + // fixes broken links for #/p5/> and #/p5/>= + item.hash = item.hash.replace('>', '>'); + + // Create a group list + if (!self.groups[group]) { + self.groups[group] = { + name: group.replace('_', ' '), + subgroups: {} + }; + } + + // Create a subgroup list + if (!self.groups[group].subgroups[subgroup]) { + self.groups[group].subgroups[subgroup] = { + name: subgroup.replace('_', ' '), + items: [] + }; + } + + // hide the un-interesting constants + if (group === 'Constants' && !item.example) + return; + + if (item.class === 'p5') { + + self.groups[group].subgroups[subgroup].items.push(item); + + } else { + + var found = _.find(self.groups[group].subgroups[subgroup].items, + function(i){ return i.name == item.class; }); + + if (!found) { + + // FIX TO INVISIBLE OBJECTS: DH (see also router.js) + var ind = hash.lastIndexOf('/'); + hash = item.hash.substring(0, ind).replace('p5/','p5.'); + self.groups[group].subgroups[subgroup].items.push({ + name: item.class, + hash: hash + }); } - this._setLanguageDirection(); - }, - getVal: function getVal() { - return this.input.getQuery(); - }, - destroy: function destroy() { - this.input.destroy(); - this.dropdown.destroy(); - destroyDomStructure(this.$node); - this.$node = null; + + } } - }); - return Typeahead; - function buildDomStructure(input, withHint) { - var $input, $wrapper, $dropdown, $hint; - $input = $(input); - $wrapper = $(html.wrapper).css(css.wrapper); - $dropdown = $(html.dropdown).css(css.dropdown); - $hint = $input.clone().css(css.hint).css(getBackgroundStyles($input)); - $hint.val("").removeData().addClass("tt-hint").removeAttr("id name placeholder").prop("disabled", true).attr({ - autocomplete: "off", - spellcheck: "false" - }); - $input.data(attrsKey, { - dir: $input.attr("dir"), - autocomplete: $input.attr("autocomplete"), - spellcheck: $input.attr("spellcheck"), - style: $input.attr("style") - }); - $input.addClass("tt-input").attr({ - autocomplete: "off", - spellcheck: false - }).css(withHint ? css.input : css.inputWithNoHint); - try { - !$input.attr("dir") && $input.attr("dir", "auto"); - } catch (e) {} - return $input.wrap($wrapper).parent().prepend(withHint ? $hint : null).append($dropdown); - } - function getBackgroundStyles($el) { - return { - backgroundAttachment: $el.css("background-attachment"), - backgroundClip: $el.css("background-clip"), - backgroundColor: $el.css("background-color"), - backgroundImage: $el.css("background-image"), - backgroundOrigin: $el.css("background-origin"), - backgroundPosition: $el.css("background-position"), - backgroundRepeat: $el.css("background-repeat"), - backgroundSize: $el.css("background-size") - }; + }); + + // Put the
  • items html into the list
      + var listHtml = self.listTpl({ + 'striptags': striptags, + 'title': self.capitalizeFirst(listCollection), + 'groups': self.groups, + 'listCollection': listCollection + }); + + // Render the view + this.$el.html(listHtml); } - function destroyDomStructure($node) { - var $input = $node.find(".tt-input"); - _.each($input.data(attrsKey), function(val, key) { - _.isUndefined(val) ? $input.removeAttr(key) : $input.attr(key, val); - }); - $input.detach().removeData(attrsKey).removeClass("tt-input").insertAfter($node); - $node.remove(); + + var renderEvent = new Event('reference-rendered'); + window.dispatchEvent(renderEvent); + + return this; + }, + /** + * Show a list of items. + * @param {array} items Array of item objects. + * @returns {object} This view. + */ + show: function (listGroup) { + if (App[listGroup]) { + this.render(App[listGroup], listGroup); } - }(); - (function() { - var old, typeaheadKey, methods; - old = $.fn.typeahead; - typeaheadKey = "ttTypeahead"; - methods = { - initialize: function initialize(o, datasets) { - datasets = _.isArray(datasets) ? datasets : [].slice.call(arguments, 1); - o = o || {}; - return this.each(attach); - function attach() { - var $input = $(this), eventBus, typeahead; - _.each(datasets, function(d) { - d.highlight = !!o.highlight; - }); - typeahead = new Typeahead({ - input: $input, - eventBus: eventBus = new EventBus({ - el: $input - }), - withHint: _.isUndefined(o.hint) ? true : !!o.hint, - minLength: o.minLength, - autoselect: o.autoselect, - datasets: datasets - }); - $input.data(typeaheadKey, typeahead); - } - }, - open: function open() { - return this.each(openTypeahead); - function openTypeahead() { - var $input = $(this), typeahead; - if (typeahead = $input.data(typeaheadKey)) { - typeahead.open(); - } - } - }, - close: function close() { - return this.each(closeTypeahead); - function closeTypeahead() { - var $input = $(this), typeahead; - if (typeahead = $input.data(typeaheadKey)) { - typeahead.close(); - } - } - }, - val: function val(newVal) { - return !arguments.length ? getVal(this.first()) : this.each(setVal); - function setVal() { - var $input = $(this), typeahead; - if (typeahead = $input.data(typeaheadKey)) { - typeahead.setVal(newVal); - } - } - function getVal($input) { - var typeahead, query; - if (typeahead = $input.data(typeaheadKey)) { - query = typeahead.getVal(); - } - return query; - } - }, - destroy: function destroy() { - return this.each(unattach); - function unattach() { - var $input = $(this), typeahead; - if (typeahead = $input.data(typeaheadKey)) { - typeahead.destroy(); - $input.removeData(typeaheadKey); - } - } - } - }; - $.fn.typeahead = function(method) { - if (methods[method]) { - return methods[method].apply(this, [].slice.call(arguments, 1)); - } else { - return methods.initialize.apply(this, arguments); - } - }; - $.fn.typeahead.noConflict = function noConflict() { - $.fn.typeahead = old; - return this; - }; - })(); - - - -//})(window.jQuery); - - -}); -define('searchView',[ - 'App', - // Templates - 'text!tpl/search.html', - 'text!tpl/search_suggestion.html', - // Tools - 'typeahead' -], function(App, searchTpl, suggestionTpl) { - - var searchView = Backbone.View.extend({ - el: '#search', + App.pageView.hideContentViews(); + + this.$el.show(); + + return this; + }, + /** + * Helper method to capitalize the first letter of a string + * @param {string} str + * @returns {string} Returns the string. + */ + capitalizeFirst: function (str) { + return str.substr(0, 1).toUpperCase() + str.substr(1); + } + + + + }); + + return listView; + + }); + + + define('text!tpl/item.html',[],function () { return '

      <%=item.name%><% if (item.isMethod) { %>()<% } %>

      \n\n<% if (item.example) { %>\n
      \n

      Examples

      \n\n
      \n <% _.each(item.example, function(example, i){ %>\n <%= example %>\n <% }); %>\n
      \n
      \n<% } %>\n\n
      \n\n

      Description

      \n\n <% if (item.deprecated) { %>\n

      \n Deprecated: <%=item.name%><% if (item.isMethod) { %>()<% } %> is deprecated and will be removed in a future version of p5. <% if (item.deprecationMessage) { %><%=item.deprecationMessage%><% } %>\n

      \n <% } %>\n\n\n <%= item.description %>\n\n <% if (item.extends) { %>\n

      Extends <%=item.extends%>

      \n <% } %>\n\n <% if (item.module === \'p5.sound\') { %>\n

      This function requires you include the p5.sound library. Add the following into the head of your index.html file:\n 

      <script src="path/to/p5.sound.js"></script>
      \n

      \n <% } %>\n\n <% if (item.constRefs) { %>\n

      Used by:\n <%\n var refs = item.constRefs;\n for (var i = 0; i < refs.length; i ++) {\n var ref = refs[i];\n var name = ref;\n if (name.substr(0, 3) === \'p5.\') {\n name = name.substr(3);\n }\n if (i !== 0) {\n if (i == refs.length - 1) {\n %> and <%\n } else {\n %>, <%\n }\n }\n %><%= name %>()<%\n }\n %>\n

      \n <% } %>\n
      \n\n<% if (isConstructor || !isClass) { %>\n\n
      \n

      Syntax

      \n

      \n <% syntaxes.forEach(function(syntax) { %>\n 

      <%= syntax %>
      \n <% }) %>\n

      \n
      \n\n\n<% if (item.params) { %>\n
      \n

      Parameters

      \n
        \n <% for (var i=0; i\n <% var p = item.params[i] %>\n
      • \n
        <%=p.name%>
        \n <% if (p.type) { %>\n
        \n <% var type = p.type.replace(/(p5\\.[A-Z][A-Za-z]*)/, \'$1\'); %>\n <%=type%>: <%=p.description%>\n <% if (p.optional) { %> (Optional)<% } %>\n
        \n <% } %>\n
        • \n <% } %>\n
      \n
      \n<% } %>\n\n<% if (item.return && item.return.type) { %>\n
      \n

      Returns

      \n

      <%=item.return.type%>: <%= item.return.description %>

      \n
      \n<% } %>\n\n<% } %>\n';}); + + + define('text!tpl/class.html',[],function () { return '\n<% if (typeof constructor !== \'undefined\') { %>\n
      \n <%=constructor%>\n
      \n<% } %>\n\n<% let fields = _.filter(things, function(item) { return item.itemtype === \'property\' && item.access !== \'private\' }); %>\n<% if (fields.length > 0) { %>\n

      Fields

      \n \n<% } %>\n\n<% let methods = _.filter(things, function(item) { return item.itemtype === \'method\' && item.access !== \'private\' }); %>\n<% if (methods.length > 0) { %>\n

      Methods

      \n \n<% } %>\n';}); + + + define('text!tpl/itemEnd.html',[],function () { return '\n

      \n\n
      \n<% if (item.file && item.line) { %>\nNotice any errors or typos? Please let us know. Please feel free to edit <%= item.file %> and issue a pull request!\n<% } %>\n
      \n\ncreative commons logo\n

      \n';}); + + // Copyright (C) 2006 Google Inc. + // + // Licensed under the Apache License, Version 2.0 (the "License"); + // you may not use this file except in compliance with the License. + // You may obtain a copy of the License at + // + // http://www.apache.org/licenses/LICENSE-2.0 + // + // Unless required by applicable law or agreed to in writing, software + // distributed under the License is distributed on an "AS IS" BASIS, + // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + // See the License for the specific language governing permissions and + // limitations under the License. + + + /** + * @fileoverview + * some functions for browser-side pretty printing of code contained in html. + * + *

      + * For a fairly comprehensive set of languages see the + * README + * file that came with this source. At a minimum, the lexer should work on a + * number of languages including C and friends, Java, Python, Bash, SQL, HTML, + * XML, CSS, Javascript, and Makefiles. It works passably on Ruby, PHP and Awk + * and a subset of Perl, but, because of commenting conventions, doesn't work on + * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class. + *

      + * Usage:

        + *
      1. include this source file in an html page via + * {@code } + *
      2. define style rules. See the example page for examples. + *
      3. mark the {@code 
        } and {@code } tags in your source with
+   *    {@code class=prettyprint.}
+   *    You can also use the (html deprecated) {@code } tag, but the pretty
+   *    printer needs to do more substantial DOM manipulations to support that, so
+   *    some css styles may not be preserved.
+   * </ol>
+   * That's it.  I wanted to keep the API as simple as possible, so there's no
+   * need to specify which language the code is in, but if you wish, you can add
+   * another class to the {@code <pre>} or {@code <code>} element to specify the
+   * language, as in {@code <pre class="prettyprint lang-java">}.  Any class that
+   * starts with "lang-" followed by a file extension, specifies the file type.
+   * See the "lang-*.js" files in this directory for code that implements
+   * per-language file handlers.
+   * <p>
+   * Change log:<br>
+   * cbeust, 2006/08/22
+   * <blockquote>
+   *   Java annotations (start with "@") are now captured as literals ("lit")
+   * </blockquote>
+   * @requires console
+   */
+  
+  // JSLint declarations
+  /*global console, document, navigator, setTimeout, window, define */
+  
+  /** @define {boolean} */
+  var IN_GLOBAL_SCOPE = true;
+  
+  /**
+   * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
+   * UI events.
+   * If set to {@code false}, {@code prettyPrint()} is synchronous.
+   */
+  window['PR_SHOULD_USE_CONTINUATION'] = true;
+  
+  /**
+   * Pretty print a chunk of code.
+   * @param {string} sourceCodeHtml The HTML to pretty print.
+   * @param {string} opt_langExtension The language name to use.
+   *     Typically, a filename extension like 'cpp' or 'java'.
+   * @param {number|boolean} opt_numberLines True to number lines,
+   *     or the 1-indexed number of the first line in sourceCodeHtml.
+   * @return {string} code as html, but prettier
+   */
+  var prettyPrintOne;
+  /**
+   * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
+   * {@code class=prettyprint} and prettify them.
+   *
+   * @param {Function} opt_whenDone called when prettifying is done.
+   * @param {HTMLElement|HTMLDocument} opt_root an element or document
+   *   containing all the elements to pretty print.
+   *   Defaults to {@code document.body}.
+   */
+  var prettyPrint;
+  
+  
+  (function () {
+    var win = window;
+    // Keyword lists for various languages.
+    // We use things that coerce to strings to make them compact when minified
+    // and to defeat aggressive optimizers that fold large string constants.
+    var FLOW_CONTROL_KEYWORDS = ["break,continue,do,else,for,if,return,while"];
+    var C_KEYWORDS = [FLOW_CONTROL_KEYWORDS,"auto,case,char,const,default," + 
+        "double,enum,extern,float,goto,inline,int,long,register,short,signed," +
+        "sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"];
+    var COMMON_KEYWORDS = [C_KEYWORDS,"catch,class,delete,false,import," +
+        "new,operator,private,protected,public,this,throw,true,try,typeof"];
+    var CPP_KEYWORDS = [COMMON_KEYWORDS,"alignof,align_union,asm,axiom,bool," +
+        "concept,concept_map,const_cast,constexpr,decltype,delegate," +
+        "dynamic_cast,explicit,export,friend,generic,late_check," +
+        "mutable,namespace,nullptr,property,reinterpret_cast,static_assert," +
+        "static_cast,template,typeid,typename,using,virtual,where"];
+    var JAVA_KEYWORDS = [COMMON_KEYWORDS,
+        "abstract,assert,boolean,byte,extends,final,finally,implements,import," +
+        "instanceof,interface,null,native,package,strictfp,super,synchronized," +
+        "throws,transient"];
+    var CSHARP_KEYWORDS = [JAVA_KEYWORDS,
+        "as,base,by,checked,decimal,delegate,descending,dynamic,event," +
+        "fixed,foreach,from,group,implicit,in,internal,into,is,let," +
+        "lock,object,out,override,orderby,params,partial,readonly,ref,sbyte," +
+        "sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort," +
+        "var,virtual,where"];
+    var COFFEE_KEYWORDS = "all,and,by,catch,class,else,extends,false,finally," +
+        "for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then," +
+        "throw,true,try,unless,until,when,while,yes";
+    var JSCRIPT_KEYWORDS = [COMMON_KEYWORDS,
+        "debugger,eval,export,function,get,null,set,undefined,var,with," +
+        "Infinity,NaN"];
+    var PERL_KEYWORDS = "caller,delete,die,do,dump,elsif,eval,exit,foreach,for," +
+        "goto,if,import,last,local,my,next,no,our,print,package,redo,require," +
+        "sub,undef,unless,until,use,wantarray,while,BEGIN,END";
+    var PYTHON_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "and,as,assert,class,def,del," +
+        "elif,except,exec,finally,from,global,import,in,is,lambda," +
+        "nonlocal,not,or,pass,print,raise,try,with,yield," +
+        "False,True,None"];
+    var RUBY_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "alias,and,begin,case,class," +
+        "def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo," +
+        "rescue,retry,self,super,then,true,undef,unless,until,when,yield," +
+        "BEGIN,END"];
+     var RUST_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "as,assert,const,copy,drop," +
+        "enum,extern,fail,false,fn,impl,let,log,loop,match,mod,move,mut,priv," +
+        "pub,pure,ref,self,static,struct,true,trait,type,unsafe,use"];
+    var SH_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "case,done,elif,esac,eval,fi," +
+        "function,in,local,set,then,until"];
+    var ALL_KEYWORDS = [
+        CPP_KEYWORDS, CSHARP_KEYWORDS, JSCRIPT_KEYWORDS, PERL_KEYWORDS,
+        PYTHON_KEYWORDS, RUBY_KEYWORDS, SH_KEYWORDS];
+    var C_TYPES = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)\b/;
+  
+    // token style names.  correspond to css classes
     /**
-     * Init.
+     * token style for a string literal
+     * @const
      */
-    init: function() {
-      var tpl = _.template(searchTpl);
-      var className = 'form-control input-lg';
-      var placeholder = 'Search reference';
-      this.searchHtml = tpl({
-        'placeholder': placeholder,
-        'className': className
-      });
-      this.items = App.classes.concat(App.allItems);
-
-      return this;
-    },
+    var PR_STRING = 'str';
     /**
-     * Render input field with Typehead activated.
+     * token style for a keyword
+     * @const
      */
-    render: function() {
-      // Append the view to the dom
-      this.$el.append(this.searchHtml);
-
-      // Render Typeahead
-      var $searchInput = this.$el.find('input[type=text]');
-      this.typeaheadRender($searchInput);
-      this.typeaheadEvents($searchInput);
-
-      return this;
-    },
+    var PR_KEYWORD = 'kwd';
     /**
-     * Apply Twitter Typeahead to the search input field.
-     * @param {jquery} $input
+     * token style for a comment
+     * @const
      */
-    typeaheadRender: function($input) {
-      var self = this;
-      $input.typeahead(null, {
-        'displayKey': 'name',
-        'minLength': 2,
-        //'highlight': true,
-        'source': self.substringMatcher(this.items),
-        'templates': {
-          'empty': '<p class="empty-message">Unable to find any item that match the current query</p>',
-          'suggestion': _.template(suggestionTpl)
-        }
-      });
-    },
+    var PR_COMMENT = 'com';
     /**
-     * Setup typeahead custom events (item selected).
+     * token style for a type
+     * @const
      */
-    typeaheadEvents: function($input) {
-      var self = this;
-      $input.on('typeahead:selected', function(e, item, datasetName) {
-        var selectedItem = self.items[item.idx];
-        select(selectedItem);
-      });
-      $input.on('keydown', function(e) {
-        if (e.which === 13) { // enter
-          var txt = $input.val();
-          var f = _.find(self.items, function(it) { return it.name == txt; });
-          if (f) {
-            select(f);
-          }
-        } else if (e.which === 27) {
-          $input.blur();
-        }
-      });
-
-      function select(selectedItem) {
-        var hash = App.router.getHash(selectedItem);//
-        App.router.navigate(hash, {'trigger': true});
-        $('#item').focus();
-      }
-    },
+    var PR_TYPE = 'typ';
     /**
-     * substringMatcher function for Typehead (search for strings in an array).
-     * @param {array} array
-     * @returns {Function}
+     * token style for a literal value.  e.g. 1, null, true.
+     * @const
      */
-    substringMatcher: function(array) {
-      return function findMatches(query, callback) {
-        var matches = [], substrRegex, arrayLength = array.length;
-
-        // regex used to determine if a string contains the substring `query`
-        substrRegex = new RegExp(query, 'i');
-
-        // iterate through the pool of strings and for any string that
-        // contains the substring `query`, add it to the `matches` array
-        for (var i=0; i < arrayLength; i++) {
-          var item = array[i];
-          if (substrRegex.test(item.name)) {
-            // typeahead expects suggestions to be a js object
-            matches.push({
-              'itemtype': item.itemtype,
-              'name': item.name,
-              'className': item.class,
-              'is_constructor': !!item.is_constructor,
-              'final': item.final,
-              'idx': i
-            });
-          }
-        }
-
-        callback(matches);
-      };
-    }
-
-  });
-
-  return searchView;
-
-});
-
-
-define('text!tpl/list.html',[],function () { return '<% _.each(groups, function(group){ %>\r\n  <div class="reference-group clearfix main-ref-page">  \r\n    <h2 class="group-name" id="group-<%=group.name%>" tab-index="-1"><%=group.name%></h2>\r\n    <div class="reference-subgroups clearfix main-ref-page">  \r\n    <% _.each(group.subgroups, function(subgroup, ind) { %>\r\n      <div class="reference-subgroup">\r\n        <% if (subgroup.name !== \'0\') { %>\r\n          <h3 id="<%=group.name%><%=ind%>" class="subgroup-name subgroup-<%=subgroup.name%>"><%=subgroup.name%></h3>\r\n        <% } %>\r\n        <ul aria-labelledby="<%=group.name%> <%=ind%>">\r\n        <% _.each(subgroup.items, function(item) { %>\r\n        <li><a href="<%=item.hash%>"><%=item.name%><% if (item.itemtype === \'method\') { %>()<%}%></a></li>\r\n        <% }); %>\r\n        </ul>\r\n      </div>\r\n    <% }); %>\r\n    </div>\r\n  </div>\r\n<% }); %>\r\n';});
-
-define('listView',[
-  'App',
-  // Templates
-  'text!tpl/list.html'
-], function (App, listTpl) {
-  var striptags = function(html) {
-    var div = document.createElement('div');
-    div.innerHTML = html;
-    return div.textContent;
-  };
-
-  var listView = Backbone.View.extend({
-    el: '#list',
-    events: {},
+    var PR_LITERAL = 'lit';
     /**
-     * Init.
+     * token style for a punctuation string.
+     * @const
      */
-    init: function () {
-      this.listTpl = _.template(listTpl);
-
-      return this;
-    },
+    var PR_PUNCTUATION = 'pun';
     /**
-     * Render the list.
+     * token style for plain text.
+     * @const
      */
-    render: function (items, listCollection) {
-      if (items && listCollection) {
-        var self = this;
-
-        // Render items and group them by module
-        // module === group
-        this.groups = {};
-        _.each(items, function (item, i) {
-
-          if (!item.private && item.file.indexOf('addons') === -1) { //addons don't get displayed on main page
-
-            var group = item.module || '_';
-            var subgroup = item.submodule || '_';
-            if (group === subgroup) {
-              subgroup = '0';
-            }
-            var hash = App.router.getHash(item);
-
-            // fixes broken links for #/p5/> and #/p5/>=
-            item.hash = item.hash.replace('>', '&gt;');
-
-            // Create a group list
-            if (!self.groups[group]) {
-              self.groups[group] = {
-                name: group.replace('_', '&nbsp;'),
-                subgroups: {}
-              };
-            }
-
-            // Create a subgroup list
-            if (!self.groups[group].subgroups[subgroup]) {
-              self.groups[group].subgroups[subgroup] = {
-                name: subgroup.replace('_', '&nbsp;'),
-                items: []
-              };
-            }
-
-            // hide the un-interesting constants
-            if (group === 'Constants' && !item.example)
-              return;
-
-            if (item.class === 'p5') {
-
-              self.groups[group].subgroups[subgroup].items.push(item);
-
-            } else {
-
-              var found = _.find(self.groups[group].subgroups[subgroup].items,
-                function(i){ return i.name == item.class; });
-
-              if (!found) {
-
-                // FIX TO INVISIBLE OBJECTS: DH (see also router.js)
-                var ind = hash.lastIndexOf('/');
-                hash = item.hash.substring(0, ind).replace('p5/','p5.');
-                self.groups[group].subgroups[subgroup].items.push({
-                  name: item.class,
-                  hash: hash
-                });
-              }
-
-            }
-          }
-        });
-
-        // Put the <li> items html into the list <ul>
-        var listHtml = self.listTpl({
-          'striptags': striptags,
-          'title': self.capitalizeFirst(listCollection),
-          'groups': self.groups,
-          'listCollection': listCollection
-        });
-
-        // Render the view
-        this.$el.html(listHtml);
-      }
-
-      var renderEvent = new Event('reference-rendered');
-      window.dispatchEvent(renderEvent);
-
-      return this;
-    },
+    var PR_PLAIN = 'pln';
+  
     /**
-     * Show a list of items.
-     * @param {array} items Array of item objects.
-     * @returns {object} This view.
+     * token style for an sgml tag.
+     * @const
      */
-    show: function (listGroup) {
-      if (App[listGroup]) {
-        this.render(App[listGroup], listGroup);
-      }
-      App.pageView.hideContentViews();
-
-      this.$el.show();
-
-      return this;
-    },
+    var PR_TAG = 'tag';
     /**
-     * Helper method to capitalize the first letter of a string
-     * @param {string} str
-     * @returns {string} Returns the string.
+     * token style for a markup declaration such as a DOCTYPE.
+     * @const
      */
-    capitalizeFirst: function (str) {
-      return str.substr(0, 1).toUpperCase() + str.substr(1);
-    }
-
-
-
-  });
-
-  return listView;
-
-});
-
-
-define('text!tpl/item.html',[],function () { return '<h2><%=item.name%><% if (item.isMethod) { %>()<% } %></h2>\r\n\r\n<% if (item.example) { %>\r\n<div class="example">\r\n  <h3 id="reference-example">Examples</h3>\r\n\r\n  <div class="example-content" data-alt="<%= item.alt %>">\r\n    <% _.each(item.example, function(example, i){ %>\r\n      <%= example %>\r\n    <% }); %>\r\n  </div>\r\n</div>\r\n<% } %>\r\n\r\n<div class="description">\r\n\r\n  <h3 id="reference-description">Description</h3>\r\n\r\n  <% if (item.deprecated) { %>\r\n    <p>\r\n      Deprecated: <%=item.name%><% if (item.isMethod) { %>()<% } %> is deprecated and will be removed in a future version of p5. <% if (item.deprecationMessage) { %><%=item.deprecationMessage%><% } %>\r\n    </p>\r\n  <% } %>\r\n\r\n\r\n  <span class=\'description-text\'><%= item.description %></span>\r\n\r\n  <% if (item.extends) { %>\r\n    <p><span id="reference-extends">Extends</span> <a href="/reference/#/<%=item.extends%>" title="<%=item.extends%> reference"><%=item.extends%></a></p>\r\n  <% } %>\r\n\r\n  <% if (item.module === \'p5.sound\') { %>\r\n    <p>This function requires you include the p5.sound library.  Add the following into the head of your index.html file:\r\n      <pre><code class="language-javascript">&lt;script src="path/to/p5.sound.js"&gt;&lt;/script&gt;</code></pre>\r\n    </p>\r\n  <% } %>\r\n\r\n  <% if (item.constRefs) { %>\r\n    <p>Used by:\r\n  <%\r\n      var refs = item.constRefs;\r\n      for (var i = 0; i < refs.length; i ++) {\r\n        var ref = refs[i];\r\n        var name = ref;\r\n        if (name.substr(0, 3) === \'p5.\') {\r\n          name = name.substr(3);\r\n        }\r\n  if (i !== 0) {\r\n          if (i == refs.length - 1) {\r\n            %> and <%\r\n          } else {\r\n            %>, <%\r\n          }\r\n        }\r\n        %><a href="./#/<%= ref.replace(\'.\', \'/\') %>"><%= name %>()</a><%\r\n      }\r\n  %>\r\n    </p>\r\n  <% } %>\r\n</div>\r\n\r\n<% if (isConstructor || !isClass) { %>\r\n\r\n<div class="syntax">\r\n  <h3 id="reference-syntax">Syntax</h3>\r\n  <p>\r\n    <% syntaxes.forEach(function(syntax) { %>\r\n    <pre class="language-javascript"><%= syntax %></pre>\r\n    <% }) %>\r\n  </p>\r\n</div>\r\n\r\n\r\n<% if (item.params) { %>\r\n  <div class="params">\r\n    <h3 id="reference-parameters">Parameters</h3>\r\n    <ul aria-labelledby=\'reference-parameters\'>\r\n    <% for (var i=0; i<item.params.length; i++) { %>\r\n      <% var p = item.params[i] %>\r\n      <li>\r\n        <div class=\'paramname\'><%=p.name%></div>\r\n        <% if (p.type) { %>\r\n          <div class=\'paramtype\'>\r\n          <% var type = p.type.replace(/(p5\\.[A-Z][A-Za-z]*)/, \'<a href="#/$1">$1</a>\'); %>\r\n          <span class="param-type label label-info"><%=type%></span>: <%=p.description%>\r\n          <% if (p.optional) { %> (Optional)<% } %>\r\n          </div>\r\n        <% } %>\r\n      </li>\r\n    <% } %>\r\n    </ul>\r\n  </div>\r\n<% } %>\r\n\r\n<% if (item.return && item.return.type) { %>\r\n  <div>\r\n    <h3 id="reference-returns">Returns</h3>\r\n    <p class=\'returns\'><span class="param-type label label-info"><%=item.return.type%></span>: <%= item.return.description %></p>\r\n  </div>\r\n<% } %>\r\n\r\n<% } %>\r\n';});
-
-
-define('text!tpl/class.html',[],function () { return '\r\n<% if (typeof constructor !== \'undefined\') { %>\r\n<div class="constructor">\r\n  <%=constructor%>\r\n</div>\r\n<% } %>\r\n\r\n<% let fields = _.filter(things, function(item) { return item.itemtype === \'property\' && item.access !== \'private\' }); %>\r\n<% if (fields.length > 0) { %>\r\n  <h3 id=\'reference-fields\'>Fields</h3>\r\n  <ul aria-labelledby=\'reference-fields\'>\r\n  <% _.each(fields, function(item) { %>\r\n    <li>\r\n      <div class=\'paramname\'><a href="<%=item.hash%>" <% if (item.module !== module) { %>class="addon"<% } %>><%=item.name%></a></div>\r\n      <div class=\'paramtype\'><%= item.description %></div>\r\n    </li>\r\n  <% }); %>\r\n  </ul>\r\n<% } %>\r\n\r\n<% let methods = _.filter(things, function(item) { return item.itemtype === \'method\' && item.access !== \'private\' }); %>\r\n<% if (methods.length > 0) { %>\r\n  <h3 id=\'reference-methods\'>Methods</h3>\r\n  <ul aria-labelledby=\'reference-methods\'>\r\n    <% _.each(methods, function(item) { %>\r\n      <li>\r\n        <div class=\'paramname\'><a href="<%=item.hash%>" <% if (item.module !== module) { %>class="addon"<% } %>><%=item.name%><% if (item.itemtype === \'method\') { %>()<%}%></a></div>\r\n        <div class=\'paramtype\'><%= item.description %></div>\r\n      </li>\r\n    <% }); %>\r\n  </ul>\r\n<% } %>\r\n';});
-
-
-define('text!tpl/itemEnd.html',[],function () { return '\r\n<br><br>\r\n\r\n<div>\r\n<% if (item.file && item.line) { %>\r\n<span id="reference-error1">Notice any errors or typos?</span> <a href="https://github.com/processing/p5.js/issues"><span id="reference-contribute2">Please let us know.</span></a> <span id="reference-error3">Please feel free to edit</span> <a href="https://github.com/processing/p5.js/blob/<%= appVersion %>/<%= item.file %>#L<%= item.line %>" target="_blank" ><%= item.file %></a> <span id="reference-error5">and issue a pull request!</span>\r\n<% } %>\r\n</div>\r\n\r\n<a style="border-bottom:none !important;" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target=_blank><img src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" style="width:88px" alt="creative commons logo"/></a>\r\n<br><br>\r\n';});
-
-// Copyright (C) 2006 Google Inc.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-
-/**
- * @fileoverview
- * some functions for browser-side pretty printing of code contained in html.
- *
- * <p>
- * For a fairly comprehensive set of languages see the
- * <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html#langs">README</a>
- * file that came with this source.  At a minimum, the lexer should work on a
- * number of languages including C and friends, Java, Python, Bash, SQL, HTML,
- * XML, CSS, Javascript, and Makefiles.  It works passably on Ruby, PHP and Awk
- * and a subset of Perl, but, because of commenting conventions, doesn't work on
- * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class.
- * <p>
- * Usage: <ol>
- * <li> include this source file in an html page via
- *   {@code <script src="/path/to/prettify.js"></script>}
- * <li> define style rules.  See the example page for examples.
- * <li> mark the {@code <pre>} and {@code <code>} tags in your source with
- *    {@code class=prettyprint.}
- *    You can also use the (html deprecated) {@code <xmp>} tag, but the pretty
- *    printer needs to do more substantial DOM manipulations to support that, so
- *    some css styles may not be preserved.
- * </ol>
- * That's it.  I wanted to keep the API as simple as possible, so there's no
- * need to specify which language the code is in, but if you wish, you can add
- * another class to the {@code <pre>} or {@code <code>} element to specify the
- * language, as in {@code <pre class="prettyprint lang-java">}.  Any class that
- * starts with "lang-" followed by a file extension, specifies the file type.
- * See the "lang-*.js" files in this directory for code that implements
- * per-language file handlers.
- * <p>
- * Change log:<br>
- * cbeust, 2006/08/22
- * <blockquote>
- *   Java annotations (start with "@") are now captured as literals ("lit")
- * </blockquote>
- * @requires console
- */
-
-// JSLint declarations
-/*global console, document, navigator, setTimeout, window, define */
-
-/** @define {boolean} */
-var IN_GLOBAL_SCOPE = true;
-
-/**
- * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
- * UI events.
- * If set to {@code false}, {@code prettyPrint()} is synchronous.
- */
-window['PR_SHOULD_USE_CONTINUATION'] = true;
-
-/**
- * Pretty print a chunk of code.
- * @param {string} sourceCodeHtml The HTML to pretty print.
- * @param {string} opt_langExtension The language name to use.
- *     Typically, a filename extension like 'cpp' or 'java'.
- * @param {number|boolean} opt_numberLines True to number lines,
- *     or the 1-indexed number of the first line in sourceCodeHtml.
- * @return {string} code as html, but prettier
- */
-var prettyPrintOne;
-/**
- * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
- * {@code class=prettyprint} and prettify them.
- *
- * @param {Function} opt_whenDone called when prettifying is done.
- * @param {HTMLElement|HTMLDocument} opt_root an element or document
- *   containing all the elements to pretty print.
- *   Defaults to {@code document.body}.
- */
-var prettyPrint;
-
-
-(function () {
-  var win = window;
-  // Keyword lists for various languages.
-  // We use things that coerce to strings to make them compact when minified
-  // and to defeat aggressive optimizers that fold large string constants.
-  var FLOW_CONTROL_KEYWORDS = ["break,continue,do,else,for,if,return,while"];
-  var C_KEYWORDS = [FLOW_CONTROL_KEYWORDS,"auto,case,char,const,default," + 
-      "double,enum,extern,float,goto,inline,int,long,register,short,signed," +
-      "sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"];
-  var COMMON_KEYWORDS = [C_KEYWORDS,"catch,class,delete,false,import," +
-      "new,operator,private,protected,public,this,throw,true,try,typeof"];
-  var CPP_KEYWORDS = [COMMON_KEYWORDS,"alignof,align_union,asm,axiom,bool," +
-      "concept,concept_map,const_cast,constexpr,decltype,delegate," +
-      "dynamic_cast,explicit,export,friend,generic,late_check," +
-      "mutable,namespace,nullptr,property,reinterpret_cast,static_assert," +
-      "static_cast,template,typeid,typename,using,virtual,where"];
-  var JAVA_KEYWORDS = [COMMON_KEYWORDS,
-      "abstract,assert,boolean,byte,extends,final,finally,implements,import," +
-      "instanceof,interface,null,native,package,strictfp,super,synchronized," +
-      "throws,transient"];
-  var CSHARP_KEYWORDS = [JAVA_KEYWORDS,
-      "as,base,by,checked,decimal,delegate,descending,dynamic,event," +
-      "fixed,foreach,from,group,implicit,in,internal,into,is,let," +
-      "lock,object,out,override,orderby,params,partial,readonly,ref,sbyte," +
-      "sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort," +
-      "var,virtual,where"];
-  var COFFEE_KEYWORDS = "all,and,by,catch,class,else,extends,false,finally," +
-      "for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then," +
-      "throw,true,try,unless,until,when,while,yes";
-  var JSCRIPT_KEYWORDS = [COMMON_KEYWORDS,
-      "debugger,eval,export,function,get,null,set,undefined,var,with," +
-      "Infinity,NaN"];
-  var PERL_KEYWORDS = "caller,delete,die,do,dump,elsif,eval,exit,foreach,for," +
-      "goto,if,import,last,local,my,next,no,our,print,package,redo,require," +
-      "sub,undef,unless,until,use,wantarray,while,BEGIN,END";
-  var PYTHON_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "and,as,assert,class,def,del," +
-      "elif,except,exec,finally,from,global,import,in,is,lambda," +
-      "nonlocal,not,or,pass,print,raise,try,with,yield," +
-      "False,True,None"];
-  var RUBY_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "alias,and,begin,case,class," +
-      "def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo," +
-      "rescue,retry,self,super,then,true,undef,unless,until,when,yield," +
-      "BEGIN,END"];
-   var RUST_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "as,assert,const,copy,drop," +
-      "enum,extern,fail,false,fn,impl,let,log,loop,match,mod,move,mut,priv," +
-      "pub,pure,ref,self,static,struct,true,trait,type,unsafe,use"];
-  var SH_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "case,done,elif,esac,eval,fi," +
-      "function,in,local,set,then,until"];
-  var ALL_KEYWORDS = [
-      CPP_KEYWORDS, CSHARP_KEYWORDS, JSCRIPT_KEYWORDS, PERL_KEYWORDS,
-      PYTHON_KEYWORDS, RUBY_KEYWORDS, SH_KEYWORDS];
-  var C_TYPES = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)\b/;
-
-  // token style names.  correspond to css classes
-  /**
-   * token style for a string literal
-   * @const
-   */
-  var PR_STRING = 'str';
-  /**
-   * token style for a keyword
-   * @const
-   */
-  var PR_KEYWORD = 'kwd';
-  /**
-   * token style for a comment
-   * @const
-   */
-  var PR_COMMENT = 'com';
-  /**
-   * token style for a type
-   * @const
-   */
-  var PR_TYPE = 'typ';
-  /**
-   * token style for a literal value.  e.g. 1, null, true.
-   * @const
-   */
-  var PR_LITERAL = 'lit';
-  /**
-   * token style for a punctuation string.
-   * @const
-   */
-  var PR_PUNCTUATION = 'pun';
-  /**
-   * token style for plain text.
-   * @const
-   */
-  var PR_PLAIN = 'pln';
-
-  /**
-   * token style for an sgml tag.
-   * @const
-   */
-  var PR_TAG = 'tag';
-  /**
-   * token style for a markup declaration such as a DOCTYPE.
-   * @const
-   */
-  var PR_DECLARATION = 'dec';
-  /**
-   * token style for embedded source.
-   * @const
-   */
-  var PR_SOURCE = 'src';
-  /**
-   * token style for an sgml attribute name.
-   * @const
-   */
-  var PR_ATTRIB_NAME = 'atn';
-  /**
-   * token style for an sgml attribute value.
-   * @const
-   */
-  var PR_ATTRIB_VALUE = 'atv';
-
-  /**
-   * A class that indicates a section of markup that is not code, e.g. to allow
-   * embedding of line numbers within code listings.
-   * @const
-   */
-  var PR_NOCODE = 'nocode';
-
-  
+    var PR_DECLARATION = 'dec';
+    /**
+     * token style for embedded source.
+     * @const
+     */
+    var PR_SOURCE = 'src';
+    /**
+     * token style for an sgml attribute name.
+     * @const
+     */
+    var PR_ATTRIB_NAME = 'atn';
+    /**
+     * token style for an sgml attribute value.
+     * @const
+     */
+    var PR_ATTRIB_VALUE = 'atv';
   
-  /**
-   * A set of tokens that can precede a regular expression literal in
-   * javascript
-   * http://web.archive.org/web/20070717142515/http://www.mozilla.org/js/language/js20/rationale/syntax.html
-   * has the full list, but I've removed ones that might be problematic when
-   * seen in languages that don't support regular expression literals.
-   *
-   * <p>Specifically, I've removed any keywords that can't precede a regexp
-   * literal in a syntactically legal javascript program, and I've removed the
-   * "in" keyword since it's not a keyword in many languages, and might be used
-   * as a count of inches.
-   *
-   * <p>The link above does not accurately describe EcmaScript rules since
-   * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
-   * very well in practice.
-   *
-   * @private
-   * @const
-   */
-  var REGEXP_PRECEDER_PATTERN = '(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<<?=?|>>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*';
-  
-  // CAVEAT: this does not properly handle the case where a regular
-  // expression immediately follows another since a regular expression may
-  // have flags for case-sensitivity and the like.  Having regexp tokens
-  // adjacent is not valid in any language I'm aware of, so I'm punting.
-  // TODO: maybe style special characters inside a regexp as punctuation.
-
-  /**
-   * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
-   * matches the union of the sets of strings matched by the input RegExp.
-   * Since it matches globally, if the input strings have a start-of-input
-   * anchor (/^.../), it is ignored for the purposes of unioning.
-   * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
-   * @return {RegExp} a global regex.
-   */
-  function combinePrefixPatterns(regexs) {
-    var capturedGroupIndex = 0;
-  
-    var needToFoldCase = false;
-    var ignoreCase = false;
-    for (var i = 0, n = regexs.length; i < n; ++i) {
-      var regex = regexs[i];
-      if (regex.ignoreCase) {
-        ignoreCase = true;
-      } else if (/[a-z]/i.test(regex.source.replace(
-                     /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
-        needToFoldCase = true;
-        ignoreCase = false;
-        break;
-      }
-    }
+    /**
+     * A class that indicates a section of markup that is not code, e.g. to allow
+     * embedding of line numbers within code listings.
+     * @const
+     */
+    var PR_NOCODE = 'nocode';
   
-    var escapeCharToCodeUnit = {
-      'b': 8,
-      't': 9,
-      'n': 0xa,
-      'v': 0xb,
-      'f': 0xc,
-      'r': 0xd
-    };
+    
+    
+    /**
+     * A set of tokens that can precede a regular expression literal in
+     * javascript
+     * http://web.archive.org/web/20070717142515/http://www.mozilla.org/js/language/js20/rationale/syntax.html
+     * has the full list, but I've removed ones that might be problematic when
+     * seen in languages that don't support regular expression literals.
+     *
+     * <p>Specifically, I've removed any keywords that can't precede a regexp
+     * literal in a syntactically legal javascript program, and I've removed the
+     * "in" keyword since it's not a keyword in many languages, and might be used
+     * as a count of inches.
+     *
+     * <p>The link above does not accurately describe EcmaScript rules since
+     * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
+     * very well in practice.
+     *
+     * @private
+     * @const
+     */
+    var REGEXP_PRECEDER_PATTERN = '(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<<?=?|>>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*';
+    
+    // CAVEAT: this does not properly handle the case where a regular
+    // expression immediately follows another since a regular expression may
+    // have flags for case-sensitivity and the like.  Having regexp tokens
+    // adjacent is not valid in any language I'm aware of, so I'm punting.
+    // TODO: maybe style special characters inside a regexp as punctuation.
   
-    function decodeEscape(charsetPart) {
-      var cc0 = charsetPart.charCodeAt(0);
-      if (cc0 !== 92 /* \\ */) {
-        return cc0;
+    /**
+     * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
+     * matches the union of the sets of strings matched by the input RegExp.
+     * Since it matches globally, if the input strings have a start-of-input
+     * anchor (/^.../), it is ignored for the purposes of unioning.
+     * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
+     * @return {RegExp} a global regex.
+     */
+    function combinePrefixPatterns(regexs) {
+      var capturedGroupIndex = 0;
+    
+      var needToFoldCase = false;
+      var ignoreCase = false;
+      for (var i = 0, n = regexs.length; i < n; ++i) {
+        var regex = regexs[i];
+        if (regex.ignoreCase) {
+          ignoreCase = true;
+        } else if (/[a-z]/i.test(regex.source.replace(
+                       /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
+          needToFoldCase = true;
+          ignoreCase = false;
+          break;
+        }
       }
-      var c1 = charsetPart.charAt(1);
-      cc0 = escapeCharToCodeUnit[c1];
-      if (cc0) {
-        return cc0;
-      } else if ('0' <= c1 && c1 <= '7') {
-        return parseInt(charsetPart.substring(1), 8);
-      } else if (c1 === 'u' || c1 === 'x') {
-        return parseInt(charsetPart.substring(2), 16);
-      } else {
-        return charsetPart.charCodeAt(1);
+    
+      var escapeCharToCodeUnit = {
+        'b': 8,
+        't': 9,
+        'n': 0xa,
+        'v': 0xb,
+        'f': 0xc,
+        'r': 0xd
+      };
+    
+      function decodeEscape(charsetPart) {
+        var cc0 = charsetPart.charCodeAt(0);
+        if (cc0 !== 92 /* \\ */) {
+          return cc0;
+        }
+        var c1 = charsetPart.charAt(1);
+        cc0 = escapeCharToCodeUnit[c1];
+        if (cc0) {
+          return cc0;
+        } else if ('0' <= c1 && c1 <= '7') {
+          return parseInt(charsetPart.substring(1), 8);
+        } else if (c1 === 'u' || c1 === 'x') {
+          return parseInt(charsetPart.substring(2), 16);
+        } else {
+          return charsetPart.charCodeAt(1);
+        }
       }
-    }
-  
-    function encodeEscape(charCode) {
-      if (charCode < 0x20) {
-        return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
+    
+      function encodeEscape(charCode) {
+        if (charCode < 0x20) {
+          return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
+        }
+        var ch = String.fromCharCode(charCode);
+        return (ch === '\\' || ch === '-' || ch === ']' || ch === '^')
+            ? "\\" + ch : ch;
       }
-      var ch = String.fromCharCode(charCode);
-      return (ch === '\\' || ch === '-' || ch === ']' || ch === '^')
-          ? "\\" + ch : ch;
-    }
-  
-    function caseFoldCharset(charSet) {
-      var charsetParts = charSet.substring(1, charSet.length - 1).match(
-          new RegExp(
-              '\\\\u[0-9A-Fa-f]{4}'
-              + '|\\\\x[0-9A-Fa-f]{2}'
-              + '|\\\\[0-3][0-7]{0,2}'
-              + '|\\\\[0-7]{1,2}'
-              + '|\\\\[\\s\\S]'
-              + '|-'
-              + '|[^-\\\\]',
-              'g'));
-      var ranges = [];
-      var inverse = charsetParts[0] === '^';
-  
-      var out = ['['];
-      if (inverse) { out.push('^'); }
-  
-      for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
-        var p = charsetParts[i];
-        if (/\\[bdsw]/i.test(p)) {  // Don't muck with named groups.
-          out.push(p);
-        } else {
-          var start = decodeEscape(p);
-          var end;
-          if (i + 2 < n && '-' === charsetParts[i + 1]) {
-            end = decodeEscape(charsetParts[i + 2]);
-            i += 2;
+    
+      function caseFoldCharset(charSet) {
+        var charsetParts = charSet.substring(1, charSet.length - 1).match(
+            new RegExp(
+                '\\\\u[0-9A-Fa-f]{4}'
+                + '|\\\\x[0-9A-Fa-f]{2}'
+                + '|\\\\[0-3][0-7]{0,2}'
+                + '|\\\\[0-7]{1,2}'
+                + '|\\\\[\\s\\S]'
+                + '|-'
+                + '|[^-\\\\]',
+                'g'));
+        var ranges = [];
+        var inverse = charsetParts[0] === '^';
+    
+        var out = ['['];
+        if (inverse) { out.push('^'); }
+    
+        for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
+          var p = charsetParts[i];
+          if (/\\[bdsw]/i.test(p)) {  // Don't muck with named groups.
+            out.push(p);
           } else {
-            end = start;
-          }
-          ranges.push([start, end]);
-          // If the range might intersect letters, then expand it.
-          // This case handling is too simplistic.
-          // It does not deal with non-latin case folding.
-          // It works for latin source code identifiers though.
-          if (!(end < 65 || start > 122)) {
-            if (!(end < 65 || start > 90)) {
-              ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
+            var start = decodeEscape(p);
+            var end;
+            if (i + 2 < n && '-' === charsetParts[i + 1]) {
+              end = decodeEscape(charsetParts[i + 2]);
+              i += 2;
+            } else {
+              end = start;
             }
-            if (!(end < 97 || start > 122)) {
-              ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
+            ranges.push([start, end]);
+            // If the range might intersect letters, then expand it.
+            // This case handling is too simplistic.
+            // It does not deal with non-latin case folding.
+            // It works for latin source code identifiers though.
+            if (!(end < 65 || start > 122)) {
+              if (!(end < 65 || start > 90)) {
+                ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
+              }
+              if (!(end < 97 || start > 122)) {
+                ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
+              }
             }
           }
         }
-      }
-  
-      // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
-      // -> [[1, 12], [14, 14], [16, 17]]
-      ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1]  - a[1]); });
-      var consolidatedRanges = [];
-      var lastRange = [];
-      for (var i = 0; i < ranges.length; ++i) {
-        var range = ranges[i];
-        if (range[0] <= lastRange[1] + 1) {
-          lastRange[1] = Math.max(lastRange[1], range[1]);
-        } else {
-          consolidatedRanges.push(lastRange = range);
+    
+        // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
+        // -> [[1, 12], [14, 14], [16, 17]]
+        ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1]  - a[1]); });
+        var consolidatedRanges = [];
+        var lastRange = [];
+        for (var i = 0; i < ranges.length; ++i) {
+          var range = ranges[i];
+          if (range[0] <= lastRange[1] + 1) {
+            lastRange[1] = Math.max(lastRange[1], range[1]);
+          } else {
+            consolidatedRanges.push(lastRange = range);
+          }
         }
-      }
-  
-      for (var i = 0; i < consolidatedRanges.length; ++i) {
-        var range = consolidatedRanges[i];
-        out.push(encodeEscape(range[0]));
-        if (range[1] > range[0]) {
-          if (range[1] + 1 > range[0]) { out.push('-'); }
-          out.push(encodeEscape(range[1]));
+    
+        for (var i = 0; i < consolidatedRanges.length; ++i) {
+          var range = consolidatedRanges[i];
+          out.push(encodeEscape(range[0]));
+          if (range[1] > range[0]) {
+            if (range[1] + 1 > range[0]) { out.push('-'); }
+            out.push(encodeEscape(range[1]));
+          }
         }
+        out.push(']');
+        return out.join('');
       }
-      out.push(']');
-      return out.join('');
-    }
-  
-    function allowAnywhereFoldCaseAndRenumberGroups(regex) {
-      // Split into character sets, escape sequences, punctuation strings
-      // like ('(', '(?:', ')', '^'), and runs of characters that do not
-      // include any of the above.
-      var parts = regex.source.match(
-          new RegExp(
-              '(?:'
-              + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]'  // a character set
-              + '|\\\\u[A-Fa-f0-9]{4}'  // a unicode escape
-              + '|\\\\x[A-Fa-f0-9]{2}'  // a hex escape
-              + '|\\\\[0-9]+'  // a back-reference or octal escape
-              + '|\\\\[^ux0-9]'  // other escape sequence
-              + '|\\(\\?[:!=]'  // start of a non-capturing group
-              + '|[\\(\\)\\^]'  // start/end of a group, or line start
-              + '|[^\\x5B\\x5C\\(\\)\\^]+'  // run of other characters
-              + ')',
-              'g'));
-      var n = parts.length;
-  
-      // Maps captured group numbers to the number they will occupy in
-      // the output or to -1 if that has not been determined, or to
-      // undefined if they need not be capturing in the output.
-      var capturedGroups = [];
-  
-      // Walk over and identify back references to build the capturedGroups
-      // mapping.
-      for (var i = 0, groupIndex = 0; i < n; ++i) {
-        var p = parts[i];
-        if (p === '(') {
-          // groups are 1-indexed, so max group index is count of '('
-          ++groupIndex;
-        } else if ('\\' === p.charAt(0)) {
-          var decimalValue = +p.substring(1);
-          if (decimalValue) {
-            if (decimalValue <= groupIndex) {
-              capturedGroups[decimalValue] = -1;
-            } else {
-              // Replace with an unambiguous escape sequence so that
-              // an octal escape sequence does not turn into a backreference
-              // to a capturing group from an earlier regex.
-              parts[i] = encodeEscape(decimalValue);
+    
+      function allowAnywhereFoldCaseAndRenumberGroups(regex) {
+        // Split into character sets, escape sequences, punctuation strings
+        // like ('(', '(?:', ')', '^'), and runs of characters that do not
+        // include any of the above.
+        var parts = regex.source.match(
+            new RegExp(
+                '(?:'
+                + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]'  // a character set
+                + '|\\\\u[A-Fa-f0-9]{4}'  // a unicode escape
+                + '|\\\\x[A-Fa-f0-9]{2}'  // a hex escape
+                + '|\\\\[0-9]+'  // a back-reference or octal escape
+                + '|\\\\[^ux0-9]'  // other escape sequence
+                + '|\\(\\?[:!=]'  // start of a non-capturing group
+                + '|[\\(\\)\\^]'  // start/end of a group, or line start
+                + '|[^\\x5B\\x5C\\(\\)\\^]+'  // run of other characters
+                + ')',
+                'g'));
+        var n = parts.length;
+    
+        // Maps captured group numbers to the number they will occupy in
+        // the output or to -1 if that has not been determined, or to
+        // undefined if they need not be capturing in the output.
+        var capturedGroups = [];
+    
+        // Walk over and identify back references to build the capturedGroups
+        // mapping.
+        for (var i = 0, groupIndex = 0; i < n; ++i) {
+          var p = parts[i];
+          if (p === '(') {
+            // groups are 1-indexed, so max group index is count of '('
+            ++groupIndex;
+          } else if ('\\' === p.charAt(0)) {
+            var decimalValue = +p.substring(1);
+            if (decimalValue) {
+              if (decimalValue <= groupIndex) {
+                capturedGroups[decimalValue] = -1;
+              } else {
+                // Replace with an unambiguous escape sequence so that
+                // an octal escape sequence does not turn into a backreference
+                // to a capturing group from an earlier regex.
+                parts[i] = encodeEscape(decimalValue);
+              }
             }
           }
         }
-      }
-  
-      // Renumber groups and reduce capturing groups to non-capturing groups
-      // where possible.
-      for (var i = 1; i < capturedGroups.length; ++i) {
-        if (-1 === capturedGroups[i]) {
-          capturedGroups[i] = ++capturedGroupIndex;
+    
+        // Renumber groups and reduce capturing groups to non-capturing groups
+        // where possible.
+        for (var i = 1; i < capturedGroups.length; ++i) {
+          if (-1 === capturedGroups[i]) {
+            capturedGroups[i] = ++capturedGroupIndex;
+          }
         }
-      }
-      for (var i = 0, groupIndex = 0; i < n; ++i) {
-        var p = parts[i];
-        if (p === '(') {
-          ++groupIndex;
-          if (!capturedGroups[groupIndex]) {
-            parts[i] = '(?:';
+        for (var i = 0, groupIndex = 0; i < n; ++i) {
+          var p = parts[i];
+          if (p === '(') {
+            ++groupIndex;
+            if (!capturedGroups[groupIndex]) {
+              parts[i] = '(?:';
+            }
+          } else if ('\\' === p.charAt(0)) {
+            var decimalValue = +p.substring(1);
+            if (decimalValue && decimalValue <= groupIndex) {
+              parts[i] = '\\' + capturedGroups[decimalValue];
+            }
           }
-        } else if ('\\' === p.charAt(0)) {
-          var decimalValue = +p.substring(1);
-          if (decimalValue && decimalValue <= groupIndex) {
-            parts[i] = '\\' + capturedGroups[decimalValue];
+        }
+    
+        // Remove any prefix anchors so that the output will match anywhere.
+        // ^^ really does mean an anchored match though.
+        for (var i = 0; i < n; ++i) {
+          if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
+        }
+    
+        // Expand letters to groups to handle mixing of case-sensitive and
+        // case-insensitive patterns if necessary.
+        if (regex.ignoreCase && needToFoldCase) {
+          for (var i = 0; i < n; ++i) {
+            var p = parts[i];
+            var ch0 = p.charAt(0);
+            if (p.length >= 2 && ch0 === '[') {
+              parts[i] = caseFoldCharset(p);
+            } else if (ch0 !== '\\') {
+              // TODO: handle letters in numeric escapes.
+              parts[i] = p.replace(
+                  /[a-zA-Z]/g,
+                  function (ch) {
+                    var cc = ch.charCodeAt(0);
+                    return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
+                  });
+            }
           }
         }
+    
+        return parts.join('');
       }
-  
-      // Remove any prefix anchors so that the output will match anywhere.
-      // ^^ really does mean an anchored match though.
-      for (var i = 0; i < n; ++i) {
-        if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
+    
+      var rewritten = [];
+      for (var i = 0, n = regexs.length; i < n; ++i) {
+        var regex = regexs[i];
+        if (regex.global || regex.multiline) { throw new Error('' + regex); }
+        rewritten.push(
+            '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
       }
+    
+      return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
+    }
   
-      // Expand letters to groups to handle mixing of case-sensitive and
-      // case-insensitive patterns if necessary.
-      if (regex.ignoreCase && needToFoldCase) {
-        for (var i = 0; i < n; ++i) {
-          var p = parts[i];
-          var ch0 = p.charAt(0);
-          if (p.length >= 2 && ch0 === '[') {
-            parts[i] = caseFoldCharset(p);
-          } else if (ch0 !== '\\') {
-            // TODO: handle letters in numeric escapes.
-            parts[i] = p.replace(
-                /[a-zA-Z]/g,
-                function (ch) {
-                  var cc = ch.charCodeAt(0);
-                  return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
-                });
+    /**
+     * Split markup into a string of source code and an array mapping ranges in
+     * that string to the text nodes in which they appear.
+     *
+     * <p>
+     * The HTML DOM structure:</p>
+     * <pre>
+     * (Element   "p"
+     *   (Element "b"
+     *     (Text  "print "))       ; #1
+     *   (Text    "'Hello '")      ; #2
+     *   (Element "br")            ; #3
+     *   (Text    "  + 'World';")) ; #4
+     * </pre>
+     * <p>
+     * corresponds to the HTML
+     * {@code <p><b>print </b>'Hello '<br>  + 'World';</p>}.</p>
+     *
+     * <p>
+     * It will produce the output:</p>
+     * <pre>
+     * {
+     *   sourceCode: "print 'Hello '\n  + 'World';",
+     *   //                     1          2
+     *   //           012345678901234 5678901234567
+     *   spans: [0, #1, 6, #2, 14, #3, 15, #4]
+     * }
+     * </pre>
+     * <p>
+     * where #1 is a reference to the {@code "print "} text node above, and so
+     * on for the other text nodes.
+     * </p>
+     *
+     * <p>
+     * The {@code} spans array is an array of pairs.  Even elements are the start
+     * indices of substrings, and odd elements are the text nodes (or BR elements)
+     * that contain the text for those substrings.
+     * Substrings continue until the next index or the end of the source.
+     * </p>
+     *
+     * @param {Node} node an HTML DOM subtree containing source-code.
+     * @param {boolean} isPreformatted true if white-space in text nodes should
+     *    be considered significant.
+     * @return {Object} source code and the text nodes in which they occur.
+     */
+    function extractSourceSpans(node, isPreformatted) {
+      var nocode = /(?:^|\s)nocode(?:\s|$)/;
+    
+      var chunks = [];
+      var length = 0;
+      var spans = [];
+      var k = 0;
+    
+      function walk(node) {
+        var type = node.nodeType;
+        if (type == 1) {  // Element
+          if (nocode.test(node.className)) { return; }
+          for (var child = node.firstChild; child; child = child.nextSibling) {
+            walk(child);
+          }
+          var nodeName = node.nodeName.toLowerCase();
+          if ('br' === nodeName || 'li' === nodeName) {
+            chunks[k] = '\n';
+            spans[k << 1] = length++;
+            spans[(k++ << 1) | 1] = node;
+          }
+        } else if (type == 3 || type == 4) {  // Text
+          var text = node.nodeValue;
+          if (text.length) {
+            if (!isPreformatted) {
+              text = text.replace(/[ \t\r\n]+/g, ' ');
+            } else {
+              text = text.replace(/\r\n?/g, '\n');  // Normalize newlines.
+            }
+            // TODO: handle tabs here?
+            chunks[k] = text;
+            spans[k << 1] = length;
+            length += text.length;
+            spans[(k++ << 1) | 1] = node;
           }
         }
       }
-  
-      return parts.join('');
+    
+      walk(node);
+    
+      return {
+        sourceCode: chunks.join('').replace(/\n$/, ''),
+        spans: spans
+      };
     }
   
-    var rewritten = [];
-    for (var i = 0, n = regexs.length; i < n; ++i) {
-      var regex = regexs[i];
-      if (regex.global || regex.multiline) { throw new Error('' + regex); }
-      rewritten.push(
-          '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
+    /**
+     * Apply the given language handler to sourceCode and add the resulting
+     * decorations to out.
+     * @param {number} basePos the index of sourceCode within the chunk of source
+     *    whose decorations are already present on out.
+     */
+    function appendDecorations(basePos, sourceCode, langHandler, out) {
+      if (!sourceCode) { return; }
+      var job = {
+        sourceCode: sourceCode,
+        basePos: basePos
+      };
+      langHandler(job);
+      out.push.apply(out, job.decorations);
     }
   
-    return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
-  }
-
-  /**
-   * Split markup into a string of source code and an array mapping ranges in
-   * that string to the text nodes in which they appear.
-   *
-   * <p>
-   * The HTML DOM structure:</p>
-   * <pre>
-   * (Element   "p"
-   *   (Element "b"
-   *     (Text  "print "))       ; #1
-   *   (Text    "'Hello '")      ; #2
-   *   (Element "br")            ; #3
-   *   (Text    "  + 'World';")) ; #4
-   * </pre>
-   * <p>
-   * corresponds to the HTML
-   * {@code <p><b>print </b>'Hello '<br>  + 'World';</p>}.</p>
-   *
-   * <p>
-   * It will produce the output:</p>
-   * <pre>
-   * {
-   *   sourceCode: "print 'Hello '\n  + 'World';",
-   *   //                     1          2
-   *   //           012345678901234 5678901234567
-   *   spans: [0, #1, 6, #2, 14, #3, 15, #4]
-   * }
-   * </pre>
-   * <p>
-   * where #1 is a reference to the {@code "print "} text node above, and so
-   * on for the other text nodes.
-   * </p>
-   *
-   * <p>
-   * The {@code} spans array is an array of pairs.  Even elements are the start
-   * indices of substrings, and odd elements are the text nodes (or BR elements)
-   * that contain the text for those substrings.
-   * Substrings continue until the next index or the end of the source.
-   * </p>
-   *
-   * @param {Node} node an HTML DOM subtree containing source-code.
-   * @param {boolean} isPreformatted true if white-space in text nodes should
-   *    be considered significant.
-   * @return {Object} source code and the text nodes in which they occur.
-   */
-  function extractSourceSpans(node, isPreformatted) {
-    var nocode = /(?:^|\s)nocode(?:\s|$)/;
-  
-    var chunks = [];
-    var length = 0;
-    var spans = [];
-    var k = 0;
-  
-    function walk(node) {
-      var type = node.nodeType;
-      if (type == 1) {  // Element
-        if (nocode.test(node.className)) { return; }
-        for (var child = node.firstChild; child; child = child.nextSibling) {
-          walk(child);
-        }
-        var nodeName = node.nodeName.toLowerCase();
-        if ('br' === nodeName || 'li' === nodeName) {
-          chunks[k] = '\n';
-          spans[k << 1] = length++;
-          spans[(k++ << 1) | 1] = node;
-        }
-      } else if (type == 3 || type == 4) {  // Text
-        var text = node.nodeValue;
-        if (text.length) {
-          if (!isPreformatted) {
-            text = text.replace(/[ \t\r\n]+/g, ' ');
-          } else {
-            text = text.replace(/\r\n?/g, '\n');  // Normalize newlines.
-          }
-          // TODO: handle tabs here?
-          chunks[k] = text;
-          spans[k << 1] = length;
-          length += text.length;
-          spans[(k++ << 1) | 1] = node;
-        }
+    var notWs = /\S/;
+  
+    /**
+     * Given an element, if it contains only one child element and any text nodes
+     * it contains contain only space characters, return the sole child element.
+     * Otherwise returns undefined.
+     * <p>
+     * This is meant to return the CODE element in {@code <pre><code ...>} when
+     * there is a single child element that contains all the non-space textual
+     * content, but not to return anything where there are multiple child elements
+     * as in {@code <pre><code>...</code><code>...</code></pre>} or when there
+     * is textual content.
+     */
+    function childContentWrapper(element) {
+      var wrapper = undefined;
+      for (var c = element.firstChild; c; c = c.nextSibling) {
+        var type = c.nodeType;
+        wrapper = (type === 1)  // Element Node
+            ? (wrapper ? element : c)
+            : (type === 3)  // Text Node
+            ? (notWs.test(c.nodeValue) ? element : wrapper)
+            : wrapper;
       }
+      return wrapper === element ? undefined : wrapper;
     }
   
-    walk(node);
-  
-    return {
-      sourceCode: chunks.join('').replace(/\n$/, ''),
-      spans: spans
-    };
-  }
-
-  /**
-   * Apply the given language handler to sourceCode and add the resulting
-   * decorations to out.
-   * @param {number} basePos the index of sourceCode within the chunk of source
-   *    whose decorations are already present on out.
-   */
-  function appendDecorations(basePos, sourceCode, langHandler, out) {
-    if (!sourceCode) { return; }
-    var job = {
-      sourceCode: sourceCode,
-      basePos: basePos
-    };
-    langHandler(job);
-    out.push.apply(out, job.decorations);
-  }
-
-  var notWs = /\S/;
-
-  /**
-   * Given an element, if it contains only one child element and any text nodes
-   * it contains contain only space characters, return the sole child element.
-   * Otherwise returns undefined.
-   * <p>
-   * This is meant to return the CODE element in {@code <pre><code ...>} when
-   * there is a single child element that contains all the non-space textual
-   * content, but not to return anything where there are multiple child elements
-   * as in {@code <pre><code>...</code><code>...</code></pre>} or when there
-   * is textual content.
-   */
-  function childContentWrapper(element) {
-    var wrapper = undefined;
-    for (var c = element.firstChild; c; c = c.nextSibling) {
-      var type = c.nodeType;
-      wrapper = (type === 1)  // Element Node
-          ? (wrapper ? element : c)
-          : (type === 3)  // Text Node
-          ? (notWs.test(c.nodeValue) ? element : wrapper)
-          : wrapper;
-    }
-    return wrapper === element ? undefined : wrapper;
-  }
-
-  /** Given triples of [style, pattern, context] returns a lexing function,
-    * The lexing function interprets the patterns to find token boundaries and
-    * returns a decoration list of the form
-    * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
-    * where index_n is an index into the sourceCode, and style_n is a style
-    * constant like PR_PLAIN.  index_n-1 <= index_n, and style_n-1 applies to
-    * all characters in sourceCode[index_n-1:index_n].
-    *
-    * The stylePatterns is a list whose elements have the form
-    * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
-    *
-    * Style is a style constant like PR_PLAIN, or can be a string of the
-    * form 'lang-FOO', where FOO is a language extension describing the
-    * language of the portion of the token in $1 after pattern executes.
-    * E.g., if style is 'lang-lisp', and group 1 contains the text
-    * '(hello (world))', then that portion of the token will be passed to the
-    * registered lisp handler for formatting.
-    * The text before and after group 1 will be restyled using this decorator
-    * so decorators should take care that this doesn't result in infinite
-    * recursion.  For example, the HTML lexer rule for SCRIPT elements looks
-    * something like ['lang-js', /<[s]cript>(.+?)<\/script>/].  This may match
-    * '<script>foo()<\/script>', which would cause the current decorator to
-    * be called with '<script>' which would not match the same rule since
-    * group 1 must not be empty, so it would be instead styled as PR_TAG by
-    * the generic tag rule.  The handler registered for the 'js' extension would
-    * then be called with 'foo()', and finally, the current decorator would
-    * be called with '<\/script>' which would not match the original rule and
-    * so the generic tag rule would identify it as a tag.
-    *
-    * Pattern must only match prefixes, and if it matches a prefix, then that
-    * match is considered a token with the same style.
-    *
-    * Context is applied to the last non-whitespace, non-comment token
-    * recognized.
-    *
-    * Shortcut is an optional string of characters, any of which, if the first
-    * character, gurantee that this pattern and only this pattern matches.
-    *
-    * @param {Array} shortcutStylePatterns patterns that always start with
-    *   a known character.  Must have a shortcut string.
-    * @param {Array} fallthroughStylePatterns patterns that will be tried in
-    *   order if the shortcut ones fail.  May have shortcuts.
-    *
-    * @return {function (Object)} a
-    *   function that takes source code and returns a list of decorations.
-    */
-  function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
-    var shortcuts = {};
-    var tokenizer;
-    (function () {
-      var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
-      var allRegexs = [];
-      var regexKeys = {};
-      for (var i = 0, n = allPatterns.length; i < n; ++i) {
-        var patternParts = allPatterns[i];
-        var shortcutChars = patternParts[3];
-        if (shortcutChars) {
-          for (var c = shortcutChars.length; --c >= 0;) {
-            shortcuts[shortcutChars.charAt(c)] = patternParts;
+    /** Given triples of [style, pattern, context] returns a lexing function,
+      * The lexing function interprets the patterns to find token boundaries and
+      * returns a decoration list of the form
+      * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
+      * where index_n is an index into the sourceCode, and style_n is a style
+      * constant like PR_PLAIN.  index_n-1 <= index_n, and style_n-1 applies to
+      * all characters in sourceCode[index_n-1:index_n].
+      *
+      * The stylePatterns is a list whose elements have the form
+      * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
+      *
+      * Style is a style constant like PR_PLAIN, or can be a string of the
+      * form 'lang-FOO', where FOO is a language extension describing the
+      * language of the portion of the token in $1 after pattern executes.
+      * E.g., if style is 'lang-lisp', and group 1 contains the text
+      * '(hello (world))', then that portion of the token will be passed to the
+      * registered lisp handler for formatting.
+      * The text before and after group 1 will be restyled using this decorator
+      * so decorators should take care that this doesn't result in infinite
+      * recursion.  For example, the HTML lexer rule for SCRIPT elements looks
+      * something like ['lang-js', /<[s]cript>(.+?)<\/script>/].  This may match
+      * '<script>foo()<\/script>', which would cause the current decorator to
+      * be called with '<script>' which would not match the same rule since
+      * group 1 must not be empty, so it would be instead styled as PR_TAG by
+      * the generic tag rule.  The handler registered for the 'js' extension would
+      * then be called with 'foo()', and finally, the current decorator would
+      * be called with '<\/script>' which would not match the original rule and
+      * so the generic tag rule would identify it as a tag.
+      *
+      * Pattern must only match prefixes, and if it matches a prefix, then that
+      * match is considered a token with the same style.
+      *
+      * Context is applied to the last non-whitespace, non-comment token
+      * recognized.
+      *
+      * Shortcut is an optional string of characters, any of which, if the first
+      * character, gurantee that this pattern and only this pattern matches.
+      *
+      * @param {Array} shortcutStylePatterns patterns that always start with
+      *   a known character.  Must have a shortcut string.
+      * @param {Array} fallthroughStylePatterns patterns that will be tried in
+      *   order if the shortcut ones fail.  May have shortcuts.
+      *
+      * @return {function (Object)} a
+      *   function that takes source code and returns a list of decorations.
+      */
+    function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
+      var shortcuts = {};
+      var tokenizer;
+      (function () {
+        var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
+        var allRegexs = [];
+        var regexKeys = {};
+        for (var i = 0, n = allPatterns.length; i < n; ++i) {
+          var patternParts = allPatterns[i];
+          var shortcutChars = patternParts[3];
+          if (shortcutChars) {
+            for (var c = shortcutChars.length; --c >= 0;) {
+              shortcuts[shortcutChars.charAt(c)] = patternParts;
+            }
+          }
+          var regex = patternParts[1];
+          var k = '' + regex;
+          if (!regexKeys.hasOwnProperty(k)) {
+            allRegexs.push(regex);
+            regexKeys[k] = null;
           }
         }
-        var regex = patternParts[1];
-        var k = '' + regex;
-        if (!regexKeys.hasOwnProperty(k)) {
-          allRegexs.push(regex);
-          regexKeys[k] = null;
-        }
-      }
-      allRegexs.push(/[\0-\uffff]/);
-      tokenizer = combinePrefixPatterns(allRegexs);
-    })();
-
-    var nPatterns = fallthroughStylePatterns.length;
-
-    /**
-     * Lexes job.sourceCode and produces an output array job.decorations of
-     * style classes preceded by the position at which they start in
-     * job.sourceCode in order.
-     *
-     * @param {Object} job an object like <pre>{
-     *    sourceCode: {string} sourceText plain text,
-     *    basePos: {int} position of job.sourceCode in the larger chunk of
-     *        sourceCode.
-     * }</pre>
-     */
-    var decorate = function (job) {
-      var sourceCode = job.sourceCode, basePos = job.basePos;
-      /** Even entries are positions in source in ascending order.  Odd enties
-        * are style markers (e.g., PR_COMMENT) that run from that position until
-        * the end.
-        * @type {Array.<number|string>}
-        */
-      var decorations = [basePos, PR_PLAIN];
-      var pos = 0;  // index into sourceCode
-      var tokens = sourceCode.match(tokenizer) || [];
-      var styleCache = {};
-
-      for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
-        var token = tokens[ti];
-        var style = styleCache[token];
-        var match = void 0;
-
-        var isEmbedded;
-        if (typeof style === 'string') {
-          isEmbedded = false;
-        } else {
-          var patternParts = shortcuts[token.charAt(0)];
-          if (patternParts) {
-            match = token.match(patternParts[1]);
-            style = patternParts[0];
+        allRegexs.push(/[\0-\uffff]/);
+        tokenizer = combinePrefixPatterns(allRegexs);
+      })();
+  
+      var nPatterns = fallthroughStylePatterns.length;
+  
+      /**
+       * Lexes job.sourceCode and produces an output array job.decorations of
+       * style classes preceded by the position at which they start in
+       * job.sourceCode in order.
+       *
+       * @param {Object} job an object like <pre>{
+       *    sourceCode: {string} sourceText plain text,
+       *    basePos: {int} position of job.sourceCode in the larger chunk of
+       *        sourceCode.
+       * }</pre>
+       */
+      var decorate = function (job) {
+        var sourceCode = job.sourceCode, basePos = job.basePos;
+        /** Even entries are positions in source in ascending order.  Odd enties
+          * are style markers (e.g., PR_COMMENT) that run from that position until
+          * the end.
+          * @type {Array.<number|string>}
+          */
+        var decorations = [basePos, PR_PLAIN];
+        var pos = 0;  // index into sourceCode
+        var tokens = sourceCode.match(tokenizer) || [];
+        var styleCache = {};
+  
+        for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
+          var token = tokens[ti];
+          var style = styleCache[token];
+          var match = void 0;
+  
+          var isEmbedded;
+          if (typeof style === 'string') {
+            isEmbedded = false;
           } else {
-            for (var i = 0; i < nPatterns; ++i) {
-              patternParts = fallthroughStylePatterns[i];
+            var patternParts = shortcuts[token.charAt(0)];
+            if (patternParts) {
               match = token.match(patternParts[1]);
-              if (match) {
-                style = patternParts[0];
-                break;
+              style = patternParts[0];
+            } else {
+              for (var i = 0; i < nPatterns; ++i) {
+                patternParts = fallthroughStylePatterns[i];
+                match = token.match(patternParts[1]);
+                if (match) {
+                  style = patternParts[0];
+                  break;
+                }
+              }
+  
+              if (!match) {  // make sure that we make progress
+                style = PR_PLAIN;
               }
             }
-
-            if (!match) {  // make sure that we make progress
-              style = PR_PLAIN;
+  
+            isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
+            if (isEmbedded && !(match && typeof match[1] === 'string')) {
+              isEmbedded = false;
+              style = PR_SOURCE;
             }
+  
+            if (!isEmbedded) { styleCache[token] = style; }
           }
-
-          isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
-          if (isEmbedded && !(match && typeof match[1] === 'string')) {
-            isEmbedded = false;
-            style = PR_SOURCE;
+  
+          var tokenStart = pos;
+          pos += token.length;
+  
+          if (!isEmbedded) {
+            decorations.push(basePos + tokenStart, style);
+          } else {  // Treat group 1 as an embedded block of source code.
+            var embeddedSource = match[1];
+            var embeddedSourceStart = token.indexOf(embeddedSource);
+            var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
+            if (match[2]) {
+              // If embeddedSource can be blank, then it would match at the
+              // beginning which would cause us to infinitely recurse on the
+              // entire token, so we catch the right context in match[2].
+              embeddedSourceEnd = token.length - match[2].length;
+              embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
+            }
+            var lang = style.substring(5);
+            // Decorate the left of the embedded source
+            appendDecorations(
+                basePos + tokenStart,
+                token.substring(0, embeddedSourceStart),
+                decorate, decorations);
+            // Decorate the embedded source
+            appendDecorations(
+                basePos + tokenStart + embeddedSourceStart,
+                embeddedSource,
+                langHandlerForExtension(lang, embeddedSource),
+                decorations);
+            // Decorate the right of the embedded section
+            appendDecorations(
+                basePos + tokenStart + embeddedSourceEnd,
+                token.substring(embeddedSourceEnd),
+                decorate, decorations);
           }
-
-          if (!isEmbedded) { styleCache[token] = style; }
         }
-
-        var tokenStart = pos;
-        pos += token.length;
-
-        if (!isEmbedded) {
-          decorations.push(basePos + tokenStart, style);
-        } else {  // Treat group 1 as an embedded block of source code.
-          var embeddedSource = match[1];
-          var embeddedSourceStart = token.indexOf(embeddedSource);
-          var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
-          if (match[2]) {
-            // If embeddedSource can be blank, then it would match at the
-            // beginning which would cause us to infinitely recurse on the
-            // entire token, so we catch the right context in match[2].
-            embeddedSourceEnd = token.length - match[2].length;
-            embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
+        job.decorations = decorations;
+      };
+      return decorate;
+    }
+  
+    /** returns a function that produces a list of decorations from source text.
+      *
+      * This code treats ", ', and ` as string delimiters, and \ as a string
+      * escape.  It does not recognize perl's qq() style strings.
+      * It has no special handling for double delimiter escapes as in basic, or
+      * the tripled delimiters used in python, but should work on those regardless
+      * although in those cases a single string literal may be broken up into
+      * multiple adjacent string literals.
+      *
+      * It recognizes C, C++, and shell style comments.
+      *
+      * @param {Object} options a set of optional parameters.
+      * @return {function (Object)} a function that examines the source code
+      *     in the input job and builds the decoration list.
+      */
+    function sourceDecorator(options) {
+      var shortcutStylePatterns = [], fallthroughStylePatterns = [];
+      if (options['tripleQuotedStrings']) {
+        // '''multi-line-string''', 'single-line-string', and double-quoted
+        shortcutStylePatterns.push(
+            [PR_STRING,  /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
+             null, '\'"']);
+      } else if (options['multiLineStrings']) {
+        // 'multi-line-string', "multi-line-string"
+        shortcutStylePatterns.push(
+            [PR_STRING,  /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
+             null, '\'"`']);
+      } else {
+        // 'single-line-string', "single-line-string"
+        shortcutStylePatterns.push(
+            [PR_STRING,
+             /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
+             null, '"\'']);
+      }
+      if (options['verbatimStrings']) {
+        // verbatim-string-literal production from the C# grammar.  See issue 93.
+        fallthroughStylePatterns.push(
+            [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
+      }
+      var hc = options['hashComments'];
+      if (hc) {
+        if (options['cStyleComments']) {
+          if (hc > 1) {  // multiline hash comments
+            shortcutStylePatterns.push(
+                [PR_COMMENT, /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, null, '#']);
+          } else {
+            // Stop C preprocessor declarations at an unclosed open comment
+            shortcutStylePatterns.push(
+                [PR_COMMENT, /^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\r\n]*)/,
+                 null, '#']);
           }
-          var lang = style.substring(5);
-          // Decorate the left of the embedded source
-          appendDecorations(
-              basePos + tokenStart,
-              token.substring(0, embeddedSourceStart),
-              decorate, decorations);
-          // Decorate the embedded source
-          appendDecorations(
-              basePos + tokenStart + embeddedSourceStart,
-              embeddedSource,
-              langHandlerForExtension(lang, embeddedSource),
-              decorations);
-          // Decorate the right of the embedded section
-          appendDecorations(
-              basePos + tokenStart + embeddedSourceEnd,
-              token.substring(embeddedSourceEnd),
-              decorate, decorations);
+          // #include <stdio.h>
+          fallthroughStylePatterns.push(
+              [PR_STRING,
+               /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/,
+               null]);
+        } else {
+          shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
         }
       }
-      job.decorations = decorations;
-    };
-    return decorate;
-  }
-
-  /** returns a function that produces a list of decorations from source text.
-    *
-    * This code treats ", ', and ` as string delimiters, and \ as a string
-    * escape.  It does not recognize perl's qq() style strings.
-    * It has no special handling for double delimiter escapes as in basic, or
-    * the tripled delimiters used in python, but should work on those regardless
-    * although in those cases a single string literal may be broken up into
-    * multiple adjacent string literals.
-    *
-    * It recognizes C, C++, and shell style comments.
-    *
-    * @param {Object} options a set of optional parameters.
-    * @return {function (Object)} a function that examines the source code
-    *     in the input job and builds the decoration list.
-    */
-  function sourceDecorator(options) {
-    var shortcutStylePatterns = [], fallthroughStylePatterns = [];
-    if (options['tripleQuotedStrings']) {
-      // '''multi-line-string''', 'single-line-string', and double-quoted
-      shortcutStylePatterns.push(
-          [PR_STRING,  /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
-           null, '\'"']);
-    } else if (options['multiLineStrings']) {
-      // 'multi-line-string', "multi-line-string"
-      shortcutStylePatterns.push(
-          [PR_STRING,  /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
-           null, '\'"`']);
-    } else {
-      // 'single-line-string', "single-line-string"
-      shortcutStylePatterns.push(
-          [PR_STRING,
-           /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
-           null, '"\'']);
-    }
-    if (options['verbatimStrings']) {
-      // verbatim-string-literal production from the C# grammar.  See issue 93.
-      fallthroughStylePatterns.push(
-          [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
-    }
-    var hc = options['hashComments'];
-    if (hc) {
       if (options['cStyleComments']) {
-        if (hc > 1) {  // multiline hash comments
-          shortcutStylePatterns.push(
-              [PR_COMMENT, /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, null, '#']);
-        } else {
-          // Stop C preprocessor declarations at an unclosed open comment
-          shortcutStylePatterns.push(
-              [PR_COMMENT, /^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\r\n]*)/,
-               null, '#']);
-        }
-        // #include <stdio.h>
+        fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
         fallthroughStylePatterns.push(
-            [PR_STRING,
-             /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/,
+            [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
+      }
+      var regexLiterals = options['regexLiterals'];
+      if (regexLiterals) {
+        /**
+         * @const
+         */
+        var regexExcls = regexLiterals > 1
+          ? ''  // Multiline regex literals
+          : '\n\r';
+        /**
+         * @const
+         */
+        var regexAny = regexExcls ? '.' : '[\\S\\s]';
+        /**
+         * @const
+         */
+        var REGEX_LITERAL = (
+            // A regular expression literal starts with a slash that is
+            // not followed by * or / so that it is not confused with
+            // comments.
+            '/(?=[^/*' + regexExcls + '])'
+            // and then contains any number of raw characters,
+            + '(?:[^/\\x5B\\x5C' + regexExcls + ']'
+            // escape sequences (\x5C),
+            +    '|\\x5C' + regexAny
+            // or non-nesting character sets (\x5B\x5D);
+            +    '|\\x5B(?:[^\\x5C\\x5D' + regexExcls + ']'
+            +             '|\\x5C' + regexAny + ')*(?:\\x5D|$))+'
+            // finally closed by a /.
+            + '/');
+        fallthroughStylePatterns.push(
+            ['lang-regex',
+             RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
+             ]);
+      }
+  
+      var types = options['types'];
+      if (types) {
+        fallthroughStylePatterns.push([PR_TYPE, types]);
+      }
+  
+      var keywords = ("" + options['keywords']).replace(/^ | $/g, '');
+      if (keywords.length) {
+        fallthroughStylePatterns.push(
+            [PR_KEYWORD,
+             new RegExp('^(?:' + keywords.replace(/[\s,]+/g, '|') + ')\\b'),
              null]);
-      } else {
-        shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
       }
-    }
-    if (options['cStyleComments']) {
-      fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
-      fallthroughStylePatterns.push(
-          [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
-    }
-    var regexLiterals = options['regexLiterals'];
-    if (regexLiterals) {
-      /**
-       * @const
-       */
-      var regexExcls = regexLiterals > 1
-        ? ''  // Multiline regex literals
-        : '\n\r';
-      /**
-       * @const
-       */
-      var regexAny = regexExcls ? '.' : '[\\S\\s]';
-      /**
-       * @const
-       */
-      var REGEX_LITERAL = (
-          // A regular expression literal starts with a slash that is
-          // not followed by * or / so that it is not confused with
-          // comments.
-          '/(?=[^/*' + regexExcls + '])'
-          // and then contains any number of raw characters,
-          + '(?:[^/\\x5B\\x5C' + regexExcls + ']'
-          // escape sequences (\x5C),
-          +    '|\\x5C' + regexAny
-          // or non-nesting character sets (\x5B\x5D);
-          +    '|\\x5B(?:[^\\x5C\\x5D' + regexExcls + ']'
-          +             '|\\x5C' + regexAny + ')*(?:\\x5D|$))+'
-          // finally closed by a /.
-          + '/');
-      fallthroughStylePatterns.push(
-          ['lang-regex',
-           RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
-           ]);
-    }
-
-    var types = options['types'];
-    if (types) {
-      fallthroughStylePatterns.push([PR_TYPE, types]);
-    }
-
-    var keywords = ("" + options['keywords']).replace(/^ | $/g, '');
-    if (keywords.length) {
+  
+      shortcutStylePatterns.push([PR_PLAIN,       /^\s+/, null, ' \r\n\t\xA0']);
+  
+      var punctuation =
+        // The Bash man page says
+  
+        // A word is a sequence of characters considered as a single
+        // unit by GRUB. Words are separated by metacharacters,
+        // which are the following plus space, tab, and newline: { }
+        // | & $ ; < >
+        // ...
+        
+        // A word beginning with # causes that word and all remaining
+        // characters on that line to be ignored.
+  
+        // which means that only a '#' after /(?:^|[{}|&$;<>\s])/ starts a
+        // comment but empirically
+        // $ echo {#}
+        // {#}
+        // $ echo \$#
+        // $#
+        // $ echo }#
+        // }#
+  
+        // so /(?:^|[|&;<>\s])/ is more appropriate.
+  
+        // http://gcc.gnu.org/onlinedocs/gcc-2.95.3/cpp_1.html#SEC3
+        // suggests that this definition is compatible with a
+        // default mode that tries to use a single token definition
+        // to recognize both bash/python style comments and C
+        // preprocessor directives.
+  
+        // This definition of punctuation does not include # in the list of
+        // follow-on exclusions, so # will not be broken before if preceeded
+        // by a punctuation character.  We could try to exclude # after
+        // [|&;<>] but that doesn't seem to cause many major problems.
+        // If that does turn out to be a problem, we should change the below
+        // when hc is truthy to include # in the run of punctuation characters
+        // only when not followint [|&;<>].
+        '^.[^\\s\\w.$@\'"`/\\\\]*';
+      if (options['regexLiterals']) {
+        punctuation += '(?!\s*\/)';
+      }
+  
       fallthroughStylePatterns.push(
-          [PR_KEYWORD,
-           new RegExp('^(?:' + keywords.replace(/[\s,]+/g, '|') + ')\\b'),
-           null]);
-    }
-
-    shortcutStylePatterns.push([PR_PLAIN,       /^\s+/, null, ' \r\n\t\xA0']);
-
-    var punctuation =
-      // The Bash man page says
-
-      // A word is a sequence of characters considered as a single
-      // unit by GRUB. Words are separated by metacharacters,
-      // which are the following plus space, tab, and newline: { }
-      // | & $ ; < >
-      // ...
-      
-      // A word beginning with # causes that word and all remaining
-      // characters on that line to be ignored.
-
-      // which means that only a '#' after /(?:^|[{}|&$;<>\s])/ starts a
-      // comment but empirically
-      // $ echo {#}
-      // {#}
-      // $ echo \$#
-      // $#
-      // $ echo }#
-      // }#
-
-      // so /(?:^|[|&;<>\s])/ is more appropriate.
-
-      // http://gcc.gnu.org/onlinedocs/gcc-2.95.3/cpp_1.html#SEC3
-      // suggests that this definition is compatible with a
-      // default mode that tries to use a single token definition
-      // to recognize both bash/python style comments and C
-      // preprocessor directives.
-
-      // This definition of punctuation does not include # in the list of
-      // follow-on exclusions, so # will not be broken before if preceeded
-      // by a punctuation character.  We could try to exclude # after
-      // [|&;<>] but that doesn't seem to cause many major problems.
-      // If that does turn out to be a problem, we should change the below
-      // when hc is truthy to include # in the run of punctuation characters
-      // only when not followint [|&;<>].
-      '^.[^\\s\\w.$@\'"`/\\\\]*';
-    if (options['regexLiterals']) {
-      punctuation += '(?!\s*\/)';
+          // TODO(mikesamuel): recognize non-latin letters and numerals in idents
+          [PR_LITERAL,     /^@[a-z_$][a-z_$@0-9]*/i, null],
+          [PR_TYPE,        /^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/, null],
+          [PR_PLAIN,       /^[a-z_$][a-z_$@0-9]*/i, null],
+          [PR_LITERAL,
+           new RegExp(
+               '^(?:'
+               // A hex number
+               + '0x[a-f0-9]+'
+               // or an octal or decimal number,
+               + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
+               // possibly in scientific notation
+               + '(?:e[+\\-]?\\d+)?'
+               + ')'
+               // with an optional modifier like UL for unsigned long
+               + '[a-z]*', 'i'),
+           null, '0123456789'],
+          // Don't treat escaped quotes in bash as starting strings.
+          // See issue 144.
+          [PR_PLAIN,       /^\\[\s\S]?/, null],
+          [PR_PUNCTUATION, new RegExp(punctuation), null]);
+  
+      return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
     }
-
-    fallthroughStylePatterns.push(
-        // TODO(mikesamuel): recognize non-latin letters and numerals in idents
-        [PR_LITERAL,     /^@[a-z_$][a-z_$@0-9]*/i, null],
-        [PR_TYPE,        /^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/, null],
-        [PR_PLAIN,       /^[a-z_$][a-z_$@0-9]*/i, null],
-        [PR_LITERAL,
-         new RegExp(
-             '^(?:'
-             // A hex number
-             + '0x[a-f0-9]+'
-             // or an octal or decimal number,
-             + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
-             // possibly in scientific notation
-             + '(?:e[+\\-]?\\d+)?'
-             + ')'
-             // with an optional modifier like UL for unsigned long
-             + '[a-z]*', 'i'),
-         null, '0123456789'],
-        // Don't treat escaped quotes in bash as starting strings.
-        // See issue 144.
-        [PR_PLAIN,       /^\\[\s\S]?/, null],
-        [PR_PUNCTUATION, new RegExp(punctuation), null]);
-
-    return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
-  }
-
-  var decorateSource = sourceDecorator({
-        'keywords': ALL_KEYWORDS,
-        'hashComments': true,
-        'cStyleComments': true,
-        'multiLineStrings': true,
-        'regexLiterals': true
-      });
-
-  /**
-   * Given a DOM subtree, wraps it in a list, and puts each line into its own
-   * list item.
-   *
-   * @param {Node} node modified in place.  Its content is pulled into an
-   *     HTMLOListElement, and each line is moved into a separate list item.
-   *     This requires cloning elements, so the input might not have unique
-   *     IDs after numbering.
-   * @param {boolean} isPreformatted true iff white-space in text nodes should
-   *     be treated as significant.
-   */
-  function numberLines(node, opt_startLineNum, isPreformatted) {
-    var nocode = /(?:^|\s)nocode(?:\s|$)/;
-    var lineBreak = /\r\n?|\n/;
   
-    var document = node.ownerDocument;
+    var decorateSource = sourceDecorator({
+          'keywords': ALL_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        });
   
-    var li = document.createElement('li');
-    while (node.firstChild) {
-      li.appendChild(node.firstChild);
-    }
-    // An array of lines.  We split below, so this is initialized to one
-    // un-split line.
-    var listItems = [li];
-  
-    function walk(node) {
-      var type = node.nodeType;
-      if (type == 1 && !nocode.test(node.className)) {  // Element
-        if ('br' === node.nodeName) {
-          breakAfter(node);
-          // Discard the <BR> since it is now flush against a </LI>.
-          if (node.parentNode) {
-            node.parentNode.removeChild(node);
+    /**
+     * Given a DOM subtree, wraps it in a list, and puts each line into its own
+     * list item.
+     *
+     * @param {Node} node modified in place.  Its content is pulled into an
+     *     HTMLOListElement, and each line is moved into a separate list item.
+     *     This requires cloning elements, so the input might not have unique
+     *     IDs after numbering.
+     * @param {boolean} isPreformatted true iff white-space in text nodes should
+     *     be treated as significant.
+     */
+    function numberLines(node, opt_startLineNum, isPreformatted) {
+      var nocode = /(?:^|\s)nocode(?:\s|$)/;
+      var lineBreak = /\r\n?|\n/;
+    
+      var document = node.ownerDocument;
+    
+      var li = document.createElement('li');
+      while (node.firstChild) {
+        li.appendChild(node.firstChild);
+      }
+      // An array of lines.  We split below, so this is initialized to one
+      // un-split line.
+      var listItems = [li];
+    
+      function walk(node) {
+        var type = node.nodeType;
+        if (type == 1 && !nocode.test(node.className)) {  // Element
+          if ('br' === node.nodeName) {
+            breakAfter(node);
+            // Discard the <BR> since it is now flush against a </LI>.
+            if (node.parentNode) {
+              node.parentNode.removeChild(node);
+            }
+          } else {
+            for (var child = node.firstChild; child; child = child.nextSibling) {
+              walk(child);
+            }
           }
-        } else {
-          for (var child = node.firstChild; child; child = child.nextSibling) {
-            walk(child);
+        } else if ((type == 3 || type == 4) && isPreformatted) {  // Text
+          var text = node.nodeValue;
+          var match = text.match(lineBreak);
+          if (match) {
+            var firstLine = text.substring(0, match.index);
+            node.nodeValue = firstLine;
+            var tail = text.substring(match.index + match[0].length);
+            if (tail) {
+              var parent = node.parentNode;
+              parent.insertBefore(
+                document.createTextNode(tail), node.nextSibling);
+            }
+            breakAfter(node);
+            if (!firstLine) {
+              // Don't leave blank text nodes in the DOM.
+              node.parentNode.removeChild(node);
+            }
           }
         }
-      } else if ((type == 3 || type == 4) && isPreformatted) {  // Text
-        var text = node.nodeValue;
-        var match = text.match(lineBreak);
-        if (match) {
-          var firstLine = text.substring(0, match.index);
-          node.nodeValue = firstLine;
-          var tail = text.substring(match.index + match[0].length);
-          if (tail) {
-            var parent = node.parentNode;
-            parent.insertBefore(
-              document.createTextNode(tail), node.nextSibling);
-          }
-          breakAfter(node);
-          if (!firstLine) {
-            // Don't leave blank text nodes in the DOM.
-            node.parentNode.removeChild(node);
+      }
+    
+      // Split a line after the given node.
+      function breakAfter(lineEndNode) {
+        // If there's nothing to the right, then we can skip ending the line
+        // here, and move root-wards since splitting just before an end-tag
+        // would require us to create a bunch of empty copies.
+        while (!lineEndNode.nextSibling) {
+          lineEndNode = lineEndNode.parentNode;
+          if (!lineEndNode) { return; }
+        }
+    
+        function breakLeftOf(limit, copy) {
+          // Clone shallowly if this node needs to be on both sides of the break.
+          var rightSide = copy ? limit.cloneNode(false) : limit;
+          var parent = limit.parentNode;
+          if (parent) {
+            // We clone the parent chain.
+            // This helps us resurrect important styling elements that cross lines.
+            // E.g. in <i>Foo<br>Bar</i>
+            // should be rewritten to <li><i>Foo</i></li><li><i>Bar</i></li>.
+            var parentClone = breakLeftOf(parent, 1);
+            // Move the clone and everything to the right of the original
+            // onto the cloned parent.
+            var next = limit.nextSibling;
+            parentClone.appendChild(rightSide);
+            for (var sibling = next; sibling; sibling = next) {
+              next = sibling.nextSibling;
+              parentClone.appendChild(sibling);
+            }
           }
+          return rightSide;
+        }
+    
+        var copiedListItem = breakLeftOf(lineEndNode.nextSibling, 0);
+    
+        // Walk the parent chain until we reach an unattached LI.
+        for (var parent;
+             // Check nodeType since IE invents document fragments.
+             (parent = copiedListItem.parentNode) && parent.nodeType === 1;) {
+          copiedListItem = parent;
         }
+        // Put it on the list of lines for later processing.
+        listItems.push(copiedListItem);
       }
+    
+      // Split lines while there are lines left to split.
+      for (var i = 0;  // Number of lines that have been split so far.
+           i < listItems.length;  // length updated by breakAfter calls.
+           ++i) {
+        walk(listItems[i]);
+      }
+    
+      // Make sure numeric indices show correctly.
+      if (opt_startLineNum === (opt_startLineNum|0)) {
+        listItems[0].setAttribute('value', opt_startLineNum);
+      }
+    
+      var ol = document.createElement('ol');
+      ol.className = 'linenums';
+      var offset = Math.max(0, ((opt_startLineNum - 1 /* zero index */)) | 0) || 0;
+      for (var i = 0, n = listItems.length; i < n; ++i) {
+        li = listItems[i];
+        // Stick a class on the LIs so that stylesheets can
+        // color odd/even rows, or any other row pattern that
+        // is co-prime with 10.
+        li.className = 'L' + ((i + offset) % 10);
+        if (!li.firstChild) {
+          li.appendChild(document.createTextNode('\xA0'));
+        }
+        ol.appendChild(li);
+      }
+    
+      node.appendChild(ol);
     }
-  
-    // Split a line after the given node.
-    function breakAfter(lineEndNode) {
-      // If there's nothing to the right, then we can skip ending the line
-      // here, and move root-wards since splitting just before an end-tag
-      // would require us to create a bunch of empty copies.
-      while (!lineEndNode.nextSibling) {
-        lineEndNode = lineEndNode.parentNode;
-        if (!lineEndNode) { return; }
+    /**
+     * Breaks {@code job.sourceCode} around style boundaries in
+     * {@code job.decorations} and modifies {@code job.sourceNode} in place.
+     * @param {Object} job like <pre>{
+     *    sourceCode: {string} source as plain text,
+     *    sourceNode: {HTMLElement} the element containing the source,
+     *    spans: {Array.<number|Node>} alternating span start indices into source
+     *       and the text node or element (e.g. {@code <BR>}) corresponding to that
+     *       span.
+     *    decorations: {Array.<number|string} an array of style classes preceded
+     *       by the position at which they start in job.sourceCode in order
+     * }</pre>
+     * @private
+     */
+    function recombineTagsAndDecorations(job) {
+      var isIE8OrEarlier = /\bMSIE\s(\d+)/.exec(navigator.userAgent);
+      isIE8OrEarlier = isIE8OrEarlier && +isIE8OrEarlier[1] <= 8;
+      var newlineRe = /\n/g;
+    
+      var source = job.sourceCode;
+      var sourceLength = source.length;
+      // Index into source after the last code-unit recombined.
+      var sourceIndex = 0;
+    
+      var spans = job.spans;
+      var nSpans = spans.length;
+      // Index into spans after the last span which ends at or before sourceIndex.
+      var spanIndex = 0;
+    
+      var decorations = job.decorations;
+      var nDecorations = decorations.length;
+      // Index into decorations after the last decoration which ends at or before
+      // sourceIndex.
+      var decorationIndex = 0;
+    
+      // Remove all zero-length decorations.
+      decorations[nDecorations] = sourceLength;
+      var decPos, i;
+      for (i = decPos = 0; i < nDecorations;) {
+        if (decorations[i] !== decorations[i + 2]) {
+          decorations[decPos++] = decorations[i++];
+          decorations[decPos++] = decorations[i++];
+        } else {
+          i += 2;
+        }
       }
-  
-      function breakLeftOf(limit, copy) {
-        // Clone shallowly if this node needs to be on both sides of the break.
-        var rightSide = copy ? limit.cloneNode(false) : limit;
-        var parent = limit.parentNode;
-        if (parent) {
-          // We clone the parent chain.
-          // This helps us resurrect important styling elements that cross lines.
-          // E.g. in <i>Foo<br>Bar</i>
-          // should be rewritten to <li><i>Foo</i></li><li><i>Bar</i></li>.
-          var parentClone = breakLeftOf(parent, 1);
-          // Move the clone and everything to the right of the original
-          // onto the cloned parent.
-          var next = limit.nextSibling;
-          parentClone.appendChild(rightSide);
-          for (var sibling = next; sibling; sibling = next) {
-            next = sibling.nextSibling;
-            parentClone.appendChild(sibling);
-          }
+      nDecorations = decPos;
+    
+      // Simplify decorations.
+      for (i = decPos = 0; i < nDecorations;) {
+        var startPos = decorations[i];
+        // Conflate all adjacent decorations that use the same style.
+        var startDec = decorations[i + 1];
+        var end = i + 2;
+        while (end + 2 <= nDecorations && decorations[end + 1] === startDec) {
+          end += 2;
         }
-        return rightSide;
+        decorations[decPos++] = startPos;
+        decorations[decPos++] = startDec;
+        i = end;
       }
-  
-      var copiedListItem = breakLeftOf(lineEndNode.nextSibling, 0);
-  
-      // Walk the parent chain until we reach an unattached LI.
-      for (var parent;
-           // Check nodeType since IE invents document fragments.
-           (parent = copiedListItem.parentNode) && parent.nodeType === 1;) {
-        copiedListItem = parent;
+    
+      nDecorations = decorations.length = decPos;
+    
+      var sourceNode = job.sourceNode;
+      var oldDisplay;
+      if (sourceNode) {
+        oldDisplay = sourceNode.style.display;
+        sourceNode.style.display = 'none';
       }
-      // Put it on the list of lines for later processing.
-      listItems.push(copiedListItem);
-    }
-  
-    // Split lines while there are lines left to split.
-    for (var i = 0;  // Number of lines that have been split so far.
-         i < listItems.length;  // length updated by breakAfter calls.
-         ++i) {
-      walk(listItems[i]);
-    }
-  
-    // Make sure numeric indices show correctly.
-    if (opt_startLineNum === (opt_startLineNum|0)) {
-      listItems[0].setAttribute('value', opt_startLineNum);
-    }
-  
-    var ol = document.createElement('ol');
-    ol.className = 'linenums';
-    var offset = Math.max(0, ((opt_startLineNum - 1 /* zero index */)) | 0) || 0;
-    for (var i = 0, n = listItems.length; i < n; ++i) {
-      li = listItems[i];
-      // Stick a class on the LIs so that stylesheets can
-      // color odd/even rows, or any other row pattern that
-      // is co-prime with 10.
-      li.className = 'L' + ((i + offset) % 10);
-      if (!li.firstChild) {
-        li.appendChild(document.createTextNode('\xA0'));
+      try {
+        var decoration = null;
+        while (spanIndex < nSpans) {
+          var spanStart = spans[spanIndex];
+          var spanEnd = spans[spanIndex + 2] || sourceLength;
+    
+          var decEnd = decorations[decorationIndex + 2] || sourceLength;
+    
+          var end = Math.min(spanEnd, decEnd);
+    
+          var textNode = spans[spanIndex + 1];
+          var styledText;
+          if (textNode.nodeType !== 1  // Don't muck with <BR>s or <LI>s
+              // Don't introduce spans around empty text nodes.
+              && (styledText = source.substring(sourceIndex, end))) {
+            // This may seem bizarre, and it is.  Emitting LF on IE causes the
+            // code to display with spaces instead of line breaks.
+            // Emitting Windows standard issue linebreaks (CRLF) causes a blank
+            // space to appear at the beginning of every line but the first.
+            // Emitting an old Mac OS 9 line separator makes everything spiffy.
+            if (isIE8OrEarlier) {
+              styledText = styledText.replace(newlineRe, '\r');
+            }
+            textNode.nodeValue = styledText;
+            var document = textNode.ownerDocument;
+            var span = document.createElement('span');
+            span.className = decorations[decorationIndex + 1];
+            var parentNode = textNode.parentNode;
+            parentNode.replaceChild(span, textNode);
+            span.appendChild(textNode);
+            if (sourceIndex < spanEnd) {  // Split off a text node.
+              spans[spanIndex + 1] = textNode
+                  // TODO: Possibly optimize by using '' if there's no flicker.
+                  = document.createTextNode(source.substring(end, spanEnd));
+              parentNode.insertBefore(textNode, span.nextSibling);
+            }
+          }
+    
+          sourceIndex = end;
+    
+          if (sourceIndex >= spanEnd) {
+            spanIndex += 2;
+          }
+          if (sourceIndex >= decEnd) {
+            decorationIndex += 2;
+          }
+        }
+      } finally {
+        if (sourceNode) {
+          sourceNode.style.display = oldDisplay;
+        }
       }
-      ol.appendChild(li);
     }
   
-    node.appendChild(ol);
-  }
-  /**
-   * Breaks {@code job.sourceCode} around style boundaries in
-   * {@code job.decorations} and modifies {@code job.sourceNode} in place.
-   * @param {Object} job like <pre>{
-   *    sourceCode: {string} source as plain text,
-   *    sourceNode: {HTMLElement} the element containing the source,
-   *    spans: {Array.<number|Node>} alternating span start indices into source
-   *       and the text node or element (e.g. {@code <BR>}) corresponding to that
-   *       span.
-   *    decorations: {Array.<number|string} an array of style classes preceded
-   *       by the position at which they start in job.sourceCode in order
-   * }</pre>
-   * @private
-   */
-  function recombineTagsAndDecorations(job) {
-    var isIE8OrEarlier = /\bMSIE\s(\d+)/.exec(navigator.userAgent);
-    isIE8OrEarlier = isIE8OrEarlier && +isIE8OrEarlier[1] <= 8;
-    var newlineRe = /\n/g;
-  
-    var source = job.sourceCode;
-    var sourceLength = source.length;
-    // Index into source after the last code-unit recombined.
-    var sourceIndex = 0;
-  
-    var spans = job.spans;
-    var nSpans = spans.length;
-    // Index into spans after the last span which ends at or before sourceIndex.
-    var spanIndex = 0;
-  
-    var decorations = job.decorations;
-    var nDecorations = decorations.length;
-    // Index into decorations after the last decoration which ends at or before
-    // sourceIndex.
-    var decorationIndex = 0;
-  
-    // Remove all zero-length decorations.
-    decorations[nDecorations] = sourceLength;
-    var decPos, i;
-    for (i = decPos = 0; i < nDecorations;) {
-      if (decorations[i] !== decorations[i + 2]) {
-        decorations[decPos++] = decorations[i++];
-        decorations[decPos++] = decorations[i++];
-      } else {
-        i += 2;
+    /** Maps language-specific file extensions to handlers. */
+    var langHandlerRegistry = {};
+    /** Register a language handler for the given file extensions.
+      * @param {function (Object)} handler a function from source code to a list
+      *      of decorations.  Takes a single argument job which describes the
+      *      state of the computation.   The single parameter has the form
+      *      {@code {
+      *        sourceCode: {string} as plain text.
+      *        decorations: {Array.<number|string>} an array of style classes
+      *                     preceded by the position at which they start in
+      *                     job.sourceCode in order.
+      *                     The language handler should assigned this field.
+      *        basePos: {int} the position of source in the larger source chunk.
+      *                 All positions in the output decorations array are relative
+      *                 to the larger source chunk.
+      *      } }
+      * @param {Array.<string>} fileExtensions
+      */
+    function registerLangHandler(handler, fileExtensions) {
+      for (var i = fileExtensions.length; --i >= 0;) {
+        var ext = fileExtensions[i];
+        if (!langHandlerRegistry.hasOwnProperty(ext)) {
+          langHandlerRegistry[ext] = handler;
+        } else if (win['console']) {
+          console['warn']('cannot override language handler %s', ext);
+        }
       }
     }
-    nDecorations = decPos;
-  
-    // Simplify decorations.
-    for (i = decPos = 0; i < nDecorations;) {
-      var startPos = decorations[i];
-      // Conflate all adjacent decorations that use the same style.
-      var startDec = decorations[i + 1];
-      var end = i + 2;
-      while (end + 2 <= nDecorations && decorations[end + 1] === startDec) {
-        end += 2;
+    function langHandlerForExtension(extension, source) {
+      if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
+        // Treat it as markup if the first non whitespace character is a < and
+        // the last non-whitespace character is a >.
+        extension = /^\s*</.test(source)
+            ? 'default-markup'
+            : 'default-code';
       }
-      decorations[decPos++] = startPos;
-      decorations[decPos++] = startDec;
-      i = end;
+      return langHandlerRegistry[extension];
     }
+    registerLangHandler(decorateSource, ['default-code']);
+    registerLangHandler(
+        createSimpleLexer(
+            [],
+            [
+             [PR_PLAIN,       /^[^<?]+/],
+             [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
+             [PR_COMMENT,     /^<\!--[\s\S]*?(?:-\->|$)/],
+             // Unescaped content in an unknown language
+             ['lang-',        /^<\?([\s\S]+?)(?:\?>|$)/],
+             ['lang-',        /^<%([\s\S]+?)(?:%>|$)/],
+             [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
+             ['lang-',        /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
+             // Unescaped content in javascript.  (Or possibly vbscript).
+             ['lang-js',      /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
+             // Contains unescaped stylesheet content
+             ['lang-css',     /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
+             ['lang-in.tag',  /^(<\/?[a-z][^<>]*>)/i]
+            ]),
+        ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
+    registerLangHandler(
+        createSimpleLexer(
+            [
+             [PR_PLAIN,        /^[\s]+/, null, ' \t\r\n'],
+             [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
+             ],
+            [
+             [PR_TAG,          /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
+             [PR_ATTRIB_NAME,  /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
+             ['lang-uq.val',   /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
+             [PR_PUNCTUATION,  /^[=<>\/]+/],
+             ['lang-js',       /^on\w+\s*=\s*\"([^\"]+)\"/i],
+             ['lang-js',       /^on\w+\s*=\s*\'([^\']+)\'/i],
+             ['lang-js',       /^on\w+\s*=\s*([^\"\'>\s]+)/i],
+             ['lang-css',      /^style\s*=\s*\"([^\"]+)\"/i],
+             ['lang-css',      /^style\s*=\s*\'([^\']+)\'/i],
+             ['lang-css',      /^style\s*=\s*([^\"\'>\s]+)/i]
+             ]),
+        ['in.tag']);
+    registerLangHandler(
+        createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
+    registerLangHandler(sourceDecorator({
+            'keywords': CPP_KEYWORDS,
+            'hashComments': true,
+            'cStyleComments': true,
+            'types': C_TYPES
+          }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
+    registerLangHandler(sourceDecorator({
+            'keywords': 'null,true,false'
+          }), ['json']);
+    registerLangHandler(sourceDecorator({
+            'keywords': CSHARP_KEYWORDS,
+            'hashComments': true,
+            'cStyleComments': true,
+            'verbatimStrings': true,
+            'types': C_TYPES
+          }), ['cs']);
+    registerLangHandler(sourceDecorator({
+            'keywords': JAVA_KEYWORDS,
+            'cStyleComments': true
+          }), ['java']);
+    registerLangHandler(sourceDecorator({
+            'keywords': SH_KEYWORDS,
+            'hashComments': true,
+            'multiLineStrings': true
+          }), ['bash', 'bsh', 'csh', 'sh']);
+    registerLangHandler(sourceDecorator({
+            'keywords': PYTHON_KEYWORDS,
+            'hashComments': true,
+            'multiLineStrings': true,
+            'tripleQuotedStrings': true
+          }), ['cv', 'py', 'python']);
+    registerLangHandler(sourceDecorator({
+            'keywords': PERL_KEYWORDS,
+            'hashComments': true,
+            'multiLineStrings': true,
+            'regexLiterals': 2  // multiline regex literals
+          }), ['perl', 'pl', 'pm']);
+    registerLangHandler(sourceDecorator({
+            'keywords': RUBY_KEYWORDS,
+            'hashComments': true,
+            'multiLineStrings': true,
+            'regexLiterals': true
+          }), ['rb', 'ruby']);
+    registerLangHandler(sourceDecorator({
+            'keywords': JSCRIPT_KEYWORDS,
+            'cStyleComments': true,
+            'regexLiterals': true
+          }), ['javascript', 'js']);
+    registerLangHandler(sourceDecorator({
+            'keywords': COFFEE_KEYWORDS,
+            'hashComments': 3,  // ### style block comments
+            'cStyleComments': true,
+            'multilineStrings': true,
+            'tripleQuotedStrings': true,
+            'regexLiterals': true
+          }), ['coffee']);
+    registerLangHandler(sourceDecorator({
+            'keywords': RUST_KEYWORDS,
+            'cStyleComments': true,
+            'multilineStrings': true
+          }), ['rc', 'rs', 'rust']);
+    registerLangHandler(
+        createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
   
-    nDecorations = decorations.length = decPos;
+    function applyDecorator(job) {
+      var opt_langExtension = job.langExtension;
   
-    var sourceNode = job.sourceNode;
-    var oldDisplay;
-    if (sourceNode) {
-      oldDisplay = sourceNode.style.display;
-      sourceNode.style.display = 'none';
-    }
-    try {
-      var decoration = null;
-      while (spanIndex < nSpans) {
-        var spanStart = spans[spanIndex];
-        var spanEnd = spans[spanIndex + 2] || sourceLength;
-  
-        var decEnd = decorations[decorationIndex + 2] || sourceLength;
-  
-        var end = Math.min(spanEnd, decEnd);
-  
-        var textNode = spans[spanIndex + 1];
-        var styledText;
-        if (textNode.nodeType !== 1  // Don't muck with <BR>s or <LI>s
-            // Don't introduce spans around empty text nodes.
-            && (styledText = source.substring(sourceIndex, end))) {
-          // This may seem bizarre, and it is.  Emitting LF on IE causes the
-          // code to display with spaces instead of line breaks.
-          // Emitting Windows standard issue linebreaks (CRLF) causes a blank
-          // space to appear at the beginning of every line but the first.
-          // Emitting an old Mac OS 9 line separator makes everything spiffy.
-          if (isIE8OrEarlier) {
-            styledText = styledText.replace(newlineRe, '\r');
-          }
-          textNode.nodeValue = styledText;
-          var document = textNode.ownerDocument;
-          var span = document.createElement('span');
-          span.className = decorations[decorationIndex + 1];
-          var parentNode = textNode.parentNode;
-          parentNode.replaceChild(span, textNode);
-          span.appendChild(textNode);
-          if (sourceIndex < spanEnd) {  // Split off a text node.
-            spans[spanIndex + 1] = textNode
-                // TODO: Possibly optimize by using '' if there's no flicker.
-                = document.createTextNode(source.substring(end, spanEnd));
-            parentNode.insertBefore(textNode, span.nextSibling);
-          }
-        }
+      try {
+        // Extract tags, and convert the source code to plain text.
+        var sourceAndSpans = extractSourceSpans(job.sourceNode, job.pre);
+        /** Plain text. @type {string} */
+        var source = sourceAndSpans.sourceCode;
+        job.sourceCode = source;
+        job.spans = sourceAndSpans.spans;
+        job.basePos = 0;
   
-        sourceIndex = end;
+        // Apply the appropriate language handler
+        langHandlerForExtension(opt_langExtension, source)(job);
   
-        if (sourceIndex >= spanEnd) {
-          spanIndex += 2;
+        // Integrate the decorations and tags back into the source code,
+        // modifying the sourceNode in place.
+        recombineTagsAndDecorations(job);
+      } catch (e) {
+        if (win['console']) {
+          console['log'](e && e['stack'] || e);
         }
-        if (sourceIndex >= decEnd) {
-          decorationIndex += 2;
-        }
-      }
-    } finally {
-      if (sourceNode) {
-        sourceNode.style.display = oldDisplay;
       }
     }
-  }
-
-  /** Maps language-specific file extensions to handlers. */
-  var langHandlerRegistry = {};
-  /** Register a language handler for the given file extensions.
-    * @param {function (Object)} handler a function from source code to a list
-    *      of decorations.  Takes a single argument job which describes the
-    *      state of the computation.   The single parameter has the form
-    *      {@code {
-    *        sourceCode: {string} as plain text.
-    *        decorations: {Array.<number|string>} an array of style classes
-    *                     preceded by the position at which they start in
-    *                     job.sourceCode in order.
-    *                     The language handler should assigned this field.
-    *        basePos: {int} the position of source in the larger source chunk.
-    *                 All positions in the output decorations array are relative
-    *                 to the larger source chunk.
-    *      } }
-    * @param {Array.<string>} fileExtensions
-    */
-  function registerLangHandler(handler, fileExtensions) {
-    for (var i = fileExtensions.length; --i >= 0;) {
-      var ext = fileExtensions[i];
-      if (!langHandlerRegistry.hasOwnProperty(ext)) {
-        langHandlerRegistry[ext] = handler;
-      } else if (win['console']) {
-        console['warn']('cannot override language handler %s', ext);
+  
+    /**
+     * Pretty print a chunk of code.
+     * @param sourceCodeHtml {string} The HTML to pretty print.
+     * @param opt_langExtension {string} The language name to use.
+     *     Typically, a filename extension like 'cpp' or 'java'.
+     * @param opt_numberLines {number|boolean} True to number lines,
+     *     or the 1-indexed number of the first line in sourceCodeHtml.
+     */
+    function $prettyPrintOne(sourceCodeHtml, opt_langExtension, opt_numberLines) {
+      var container = document.createElement('div');
+      // This could cause images to load and onload listeners to fire.
+      // E.g. <img onerror="alert(1337)" src="nosuchimage.png">.
+      // We assume that the inner HTML is from a trusted source.
+      // The pre-tag is required for IE8 which strips newlines from innerHTML
+      // when it is injected into a <pre> tag.
+      // http://stackoverflow.com/questions/451486/pre-tag-loses-line-breaks-when-setting-innerhtml-in-ie
+      // http://stackoverflow.com/questions/195363/inserting-a-newline-into-a-pre-tag-ie-javascript
+      container.innerHTML = '<pre>' + sourceCodeHtml + '</pre>';
+      container = container.firstChild;
+      if (opt_numberLines) {
+        numberLines(container, opt_numberLines, true);
       }
+  
+      var job = {
+        langExtension: opt_langExtension,
+        numberLines: opt_numberLines,
+        sourceNode: container,
+        pre: 1
+      };
+      applyDecorator(job);
+      return container.innerHTML;
     }
-  }
-  function langHandlerForExtension(extension, source) {
-    if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
-      // Treat it as markup if the first non whitespace character is a < and
-      // the last non-whitespace character is a >.
-      extension = /^\s*</.test(source)
-          ? 'default-markup'
-          : 'default-code';
-    }
-    return langHandlerRegistry[extension];
-  }
-  registerLangHandler(decorateSource, ['default-code']);
-  registerLangHandler(
-      createSimpleLexer(
-          [],
-          [
-           [PR_PLAIN,       /^[^<?]+/],
-           [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
-           [PR_COMMENT,     /^<\!--[\s\S]*?(?:-\->|$)/],
-           // Unescaped content in an unknown language
-           ['lang-',        /^<\?([\s\S]+?)(?:\?>|$)/],
-           ['lang-',        /^<%([\s\S]+?)(?:%>|$)/],
-           [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
-           ['lang-',        /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
-           // Unescaped content in javascript.  (Or possibly vbscript).
-           ['lang-js',      /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
-           // Contains unescaped stylesheet content
-           ['lang-css',     /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
-           ['lang-in.tag',  /^(<\/?[a-z][^<>]*>)/i]
-          ]),
-      ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
-  registerLangHandler(
-      createSimpleLexer(
-          [
-           [PR_PLAIN,        /^[\s]+/, null, ' \t\r\n'],
-           [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
-           ],
-          [
-           [PR_TAG,          /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
-           [PR_ATTRIB_NAME,  /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
-           ['lang-uq.val',   /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
-           [PR_PUNCTUATION,  /^[=<>\/]+/],
-           ['lang-js',       /^on\w+\s*=\s*\"([^\"]+)\"/i],
-           ['lang-js',       /^on\w+\s*=\s*\'([^\']+)\'/i],
-           ['lang-js',       /^on\w+\s*=\s*([^\"\'>\s]+)/i],
-           ['lang-css',      /^style\s*=\s*\"([^\"]+)\"/i],
-           ['lang-css',      /^style\s*=\s*\'([^\']+)\'/i],
-           ['lang-css',      /^style\s*=\s*([^\"\'>\s]+)/i]
-           ]),
-      ['in.tag']);
-  registerLangHandler(
-      createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
-  registerLangHandler(sourceDecorator({
-          'keywords': CPP_KEYWORDS,
-          'hashComments': true,
-          'cStyleComments': true,
-          'types': C_TYPES
-        }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
-  registerLangHandler(sourceDecorator({
-          'keywords': 'null,true,false'
-        }), ['json']);
-  registerLangHandler(sourceDecorator({
-          'keywords': CSHARP_KEYWORDS,
-          'hashComments': true,
-          'cStyleComments': true,
-          'verbatimStrings': true,
-          'types': C_TYPES
-        }), ['cs']);
-  registerLangHandler(sourceDecorator({
-          'keywords': JAVA_KEYWORDS,
-          'cStyleComments': true
-        }), ['java']);
-  registerLangHandler(sourceDecorator({
-          'keywords': SH_KEYWORDS,
-          'hashComments': true,
-          'multiLineStrings': true
-        }), ['bash', 'bsh', 'csh', 'sh']);
-  registerLangHandler(sourceDecorator({
-          'keywords': PYTHON_KEYWORDS,
-          'hashComments': true,
-          'multiLineStrings': true,
-          'tripleQuotedStrings': true
-        }), ['cv', 'py', 'python']);
-  registerLangHandler(sourceDecorator({
-          'keywords': PERL_KEYWORDS,
-          'hashComments': true,
-          'multiLineStrings': true,
-          'regexLiterals': 2  // multiline regex literals
-        }), ['perl', 'pl', 'pm']);
-  registerLangHandler(sourceDecorator({
-          'keywords': RUBY_KEYWORDS,
-          'hashComments': true,
-          'multiLineStrings': true,
-          'regexLiterals': true
-        }), ['rb', 'ruby']);
-  registerLangHandler(sourceDecorator({
-          'keywords': JSCRIPT_KEYWORDS,
-          'cStyleComments': true,
-          'regexLiterals': true
-        }), ['javascript', 'js']);
-  registerLangHandler(sourceDecorator({
-          'keywords': COFFEE_KEYWORDS,
-          'hashComments': 3,  // ### style block comments
-          'cStyleComments': true,
-          'multilineStrings': true,
-          'tripleQuotedStrings': true,
-          'regexLiterals': true
-        }), ['coffee']);
-  registerLangHandler(sourceDecorator({
-          'keywords': RUST_KEYWORDS,
-          'cStyleComments': true,
-          'multilineStrings': true
-        }), ['rc', 'rs', 'rust']);
-  registerLangHandler(
-      createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
-
-  function applyDecorator(job) {
-    var opt_langExtension = job.langExtension;
-
-    try {
-      // Extract tags, and convert the source code to plain text.
-      var sourceAndSpans = extractSourceSpans(job.sourceNode, job.pre);
-      /** Plain text. @type {string} */
-      var source = sourceAndSpans.sourceCode;
-      job.sourceCode = source;
-      job.spans = sourceAndSpans.spans;
-      job.basePos = 0;
-
-      // Apply the appropriate language handler
-      langHandlerForExtension(opt_langExtension, source)(job);
-
-      // Integrate the decorations and tags back into the source code,
-      // modifying the sourceNode in place.
-      recombineTagsAndDecorations(job);
-    } catch (e) {
-      if (win['console']) {
-        console['log'](e && e['stack'] || e);
+  
+     /**
+      * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
+      * {@code class=prettyprint} and prettify them.
+      *
+      * @param {Function} opt_whenDone called when prettifying is done.
+      * @param {HTMLElement|HTMLDocument} opt_root an element or document
+      *   containing all the elements to pretty print.
+      *   Defaults to {@code document.body}.
+      */
+    function $prettyPrint(opt_whenDone, opt_root) {
+      var root = opt_root || document.body;
+      var doc = root.ownerDocument || document;
+      function byTagName(tn) { return root.getElementsByTagName(tn); }
+      // fetch a list of nodes to rewrite
+      var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
+      var elements = [];
+      for (var i = 0; i < codeSegments.length; ++i) {
+        for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
+          elements.push(codeSegments[i][j]);
+        }
       }
-    }
-  }
-
-  /**
-   * Pretty print a chunk of code.
-   * @param sourceCodeHtml {string} The HTML to pretty print.
-   * @param opt_langExtension {string} The language name to use.
-   *     Typically, a filename extension like 'cpp' or 'java'.
-   * @param opt_numberLines {number|boolean} True to number lines,
-   *     or the 1-indexed number of the first line in sourceCodeHtml.
-   */
-  function $prettyPrintOne(sourceCodeHtml, opt_langExtension, opt_numberLines) {
-    var container = document.createElement('div');
-    // This could cause images to load and onload listeners to fire.
-    // E.g. <img onerror="alert(1337)" src="nosuchimage.png">.
-    // We assume that the inner HTML is from a trusted source.
-    // The pre-tag is required for IE8 which strips newlines from innerHTML
-    // when it is injected into a <pre> tag.
-    // http://stackoverflow.com/questions/451486/pre-tag-loses-line-breaks-when-setting-innerhtml-in-ie
-    // http://stackoverflow.com/questions/195363/inserting-a-newline-into-a-pre-tag-ie-javascript
-    container.innerHTML = '<pre>' + sourceCodeHtml + '</pre>';
-    container = container.firstChild;
-    if (opt_numberLines) {
-      numberLines(container, opt_numberLines, true);
-    }
-
-    var job = {
-      langExtension: opt_langExtension,
-      numberLines: opt_numberLines,
-      sourceNode: container,
-      pre: 1
-    };
-    applyDecorator(job);
-    return container.innerHTML;
-  }
-
-   /**
-    * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
-    * {@code class=prettyprint} and prettify them.
-    *
-    * @param {Function} opt_whenDone called when prettifying is done.
-    * @param {HTMLElement|HTMLDocument} opt_root an element or document
-    *   containing all the elements to pretty print.
-    *   Defaults to {@code document.body}.
-    */
-  function $prettyPrint(opt_whenDone, opt_root) {
-    var root = opt_root || document.body;
-    var doc = root.ownerDocument || document;
-    function byTagName(tn) { return root.getElementsByTagName(tn); }
-    // fetch a list of nodes to rewrite
-    var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
-    var elements = [];
-    for (var i = 0; i < codeSegments.length; ++i) {
-      for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
-        elements.push(codeSegments[i][j]);
+      codeSegments = null;
+  
+      var clock = Date;
+      if (!clock['now']) {
+        clock = { 'now': function () { return +(new Date); } };
       }
-    }
-    codeSegments = null;
-
-    var clock = Date;
-    if (!clock['now']) {
-      clock = { 'now': function () { return +(new Date); } };
-    }
-
-    // The loop is broken into a series of continuations to make sure that we
-    // don't make the browser unresponsive when rewriting a large page.
-    var k = 0;
-    var prettyPrintingJob;
-
-    var langExtensionRe = /\blang(?:uage)?-([\w.]+)(?!\S)/;
-    var prettyPrintRe = /\bprettyprint\b/;
-    var prettyPrintedRe = /\bprettyprinted\b/;
-    var preformattedTagNameRe = /pre|xmp/i;
-    var codeRe = /^code$/i;
-    var preCodeXmpRe = /^(?:pre|code|xmp)$/i;
-    var EMPTY = {};
-
-    function doWork() {
-      var endTime = (win['PR_SHOULD_USE_CONTINUATION'] ?
-                     clock['now']() + 250 /* ms */ :
-                     Infinity);
-      for (; k < elements.length && clock['now']() < endTime; k++) {
-        var cs = elements[k];
-
-        // Look for a preceding comment like
-        // <?prettify lang="..." linenums="..."?>
-        var attrs = EMPTY;
-        {
-          for (var preceder = cs; (preceder = preceder.previousSibling);) {
-            var nt = preceder.nodeType;
-            // <?foo?> is parsed by HTML 5 to a comment node (8)
-            // like <!--?foo?-->, but in XML is a processing instruction
-            var value = (nt === 7 || nt === 8) && preceder.nodeValue;
-            if (value
-                ? !/^\??prettify\b/.test(value)
-                : (nt !== 3 || /\S/.test(preceder.nodeValue))) {
-              // Skip over white-space text nodes but not others.
-              break;
-            }
-            if (value) {
-              attrs = {};
-              value.replace(
-                  /\b(\w+)=([\w:.%+-]+)/g,
-                function (_, name, value) { attrs[name] = value; });
-              break;
-            }
-          }
-        }
-
-        var className = cs.className;
-        if ((attrs !== EMPTY || prettyPrintRe.test(className))
-            // Don't redo this if we've already done it.
-            // This allows recalling pretty print to just prettyprint elements
-            // that have been added to the page since last call.
-            && !prettyPrintedRe.test(className)) {
-
-          // make sure this is not nested in an already prettified element
-          var nested = false;
-          for (var p = cs.parentNode; p; p = p.parentNode) {
-            var tn = p.tagName;
-            if (preCodeXmpRe.test(tn)
-                && p.className && prettyPrintRe.test(p.className)) {
-              nested = true;
-              break;
+  
+      // The loop is broken into a series of continuations to make sure that we
+      // don't make the browser unresponsive when rewriting a large page.
+      var k = 0;
+      var prettyPrintingJob;
+  
+      var langExtensionRe = /\blang(?:uage)?-([\w.]+)(?!\S)/;
+      var prettyPrintRe = /\bprettyprint\b/;
+      var prettyPrintedRe = /\bprettyprinted\b/;
+      var preformattedTagNameRe = /pre|xmp/i;
+      var codeRe = /^code$/i;
+      var preCodeXmpRe = /^(?:pre|code|xmp)$/i;
+      var EMPTY = {};
+  
+      function doWork() {
+        var endTime = (win['PR_SHOULD_USE_CONTINUATION'] ?
+                       clock['now']() + 250 /* ms */ :
+                       Infinity);
+        for (; k < elements.length && clock['now']() < endTime; k++) {
+          var cs = elements[k];
+  
+          // Look for a preceding comment like
+          // <?prettify lang="..." linenums="..."?>
+          var attrs = EMPTY;
+          {
+            for (var preceder = cs; (preceder = preceder.previousSibling);) {
+              var nt = preceder.nodeType;
+              // <?foo?> is parsed by HTML 5 to a comment node (8)
+              // like <!--?foo?-->, but in XML is a processing instruction
+              var value = (nt === 7 || nt === 8) && preceder.nodeValue;
+              if (value
+                  ? !/^\??prettify\b/.test(value)
+                  : (nt !== 3 || /\S/.test(preceder.nodeValue))) {
+                // Skip over white-space text nodes but not others.
+                break;
+              }
+              if (value) {
+                attrs = {};
+                value.replace(
+                    /\b(\w+)=([\w:.%+-]+)/g,
+                  function (_, name, value) { attrs[name] = value; });
+                break;
+              }
             }
           }
-          if (!nested) {
-            // Mark done.  If we fail to prettyprint for whatever reason,
-            // we shouldn't try again.
-            cs.className += ' prettyprinted';
-
-            // If the classes includes a language extensions, use it.
-            // Language extensions can be specified like
-            //     <pre class="prettyprint lang-cpp">
-            // the language extension "cpp" is used to find a language handler
-            // as passed to PR.registerLangHandler.
-            // HTML5 recommends that a language be specified using "language-"
-            // as the prefix instead.  Google Code Prettify supports both.
-            // http://dev.w3.org/html5/spec-author-view/the-code-element.html
-            var langExtension = attrs['lang'];
-            if (!langExtension) {
-              langExtension = className.match(langExtensionRe);
-              // Support <pre class="prettyprint"><code class="language-c">
-              var wrapper;
-              if (!langExtension && (wrapper = childContentWrapper(cs))
-                  && codeRe.test(wrapper.tagName)) {
-                langExtension = wrapper.className.match(langExtensionRe);
+  
+          var className = cs.className;
+          if ((attrs !== EMPTY || prettyPrintRe.test(className))
+              // Don't redo this if we've already done it.
+              // This allows recalling pretty print to just prettyprint elements
+              // that have been added to the page since last call.
+              && !prettyPrintedRe.test(className)) {
+  
+            // make sure this is not nested in an already prettified element
+            var nested = false;
+            for (var p = cs.parentNode; p; p = p.parentNode) {
+              var tn = p.tagName;
+              if (preCodeXmpRe.test(tn)
+                  && p.className && prettyPrintRe.test(p.className)) {
+                nested = true;
+                break;
               }
-
-              if (langExtension) { langExtension = langExtension[1]; }
-            }
-
-            var preformatted;
-            if (preformattedTagNameRe.test(cs.tagName)) {
-              preformatted = 1;
-            } else {
-              var currentStyle = cs['currentStyle'];
-              var defaultView = doc.defaultView;
-              var whitespace = (
-                  currentStyle
-                  ? currentStyle['whiteSpace']
-                  : (defaultView
-                     && defaultView.getComputedStyle)
-                  ? defaultView.getComputedStyle(cs, null)
-                  .getPropertyValue('white-space')
-                  : 0);
-              preformatted = whitespace
-                  && 'pre' === whitespace.substring(0, 3);
             }
-
-            // Look for a class like linenums or linenums:<n> where <n> is the
-            // 1-indexed number of the first line.
-            var lineNums = attrs['linenums'];
-            if (!(lineNums = lineNums === 'true' || +lineNums)) {
-              lineNums = className.match(/\blinenums\b(?::(\d+))?/);
-              lineNums =
-                lineNums
-                ? lineNums[1] && lineNums[1].length
-                  ? +lineNums[1] : true
-                : false;
+            if (!nested) {
+              // Mark done.  If we fail to prettyprint for whatever reason,
+              // we shouldn't try again.
+              cs.className += ' prettyprinted';
+  
+              // If the classes includes a language extensions, use it.
+              // Language extensions can be specified like
+              //     <pre class="prettyprint lang-cpp">
+              // the language extension "cpp" is used to find a language handler
+              // as passed to PR.registerLangHandler.
+              // HTML5 recommends that a language be specified using "language-"
+              // as the prefix instead.  Google Code Prettify supports both.
+              // http://dev.w3.org/html5/spec-author-view/the-code-element.html
+              var langExtension = attrs['lang'];
+              if (!langExtension) {
+                langExtension = className.match(langExtensionRe);
+                // Support <pre class="prettyprint"><code class="language-c">
+                var wrapper;
+                if (!langExtension && (wrapper = childContentWrapper(cs))
+                    && codeRe.test(wrapper.tagName)) {
+                  langExtension = wrapper.className.match(langExtensionRe);
+                }
+  
+                if (langExtension) { langExtension = langExtension[1]; }
+              }
+  
+              var preformatted;
+              if (preformattedTagNameRe.test(cs.tagName)) {
+                preformatted = 1;
+              } else {
+                var currentStyle = cs['currentStyle'];
+                var defaultView = doc.defaultView;
+                var whitespace = (
+                    currentStyle
+                    ? currentStyle['whiteSpace']
+                    : (defaultView
+                       && defaultView.getComputedStyle)
+                    ? defaultView.getComputedStyle(cs, null)
+                    .getPropertyValue('white-space')
+                    : 0);
+                preformatted = whitespace
+                    && 'pre' === whitespace.substring(0, 3);
+              }
+  
+              // Look for a class like linenums or linenums:<n> where <n> is the
+              // 1-indexed number of the first line.
+              var lineNums = attrs['linenums'];
+              if (!(lineNums = lineNums === 'true' || +lineNums)) {
+                lineNums = className.match(/\blinenums\b(?::(\d+))?/);
+                lineNums =
+                  lineNums
+                  ? lineNums[1] && lineNums[1].length
+                    ? +lineNums[1] : true
+                  : false;
+              }
+              if (lineNums) { numberLines(cs, lineNums, preformatted); }
+  
+              // do the pretty printing
+              prettyPrintingJob = {
+                langExtension: langExtension,
+                sourceNode: cs,
+                numberLines: lineNums,
+                pre: preformatted
+              };
+              applyDecorator(prettyPrintingJob);
             }
-            if (lineNums) { numberLines(cs, lineNums, preformatted); }
-
-            // do the pretty printing
-            prettyPrintingJob = {
-              langExtension: langExtension,
-              sourceNode: cs,
-              numberLines: lineNums,
-              pre: preformatted
-            };
-            applyDecorator(prettyPrintingJob);
           }
         }
+        if (k < elements.length) {
+          // finish up in a continuation
+          setTimeout(doWork, 250);
+        } else if ('function' === typeof opt_whenDone) {
+          opt_whenDone();
+        }
       }
-      if (k < elements.length) {
-        // finish up in a continuation
-        setTimeout(doWork, 250);
-      } else if ('function' === typeof opt_whenDone) {
-        opt_whenDone();
-      }
+  
+      doWork();
     }
-
-    doWork();
-  }
-
-  /**
-   * Contains functions for creating and registering new language handlers.
-   * @type {Object}
-   */
-  var PR = win['PR'] = {
-        'createSimpleLexer': createSimpleLexer,
-        'registerLangHandler': registerLangHandler,
-        'sourceDecorator': sourceDecorator,
-        'PR_ATTRIB_NAME': PR_ATTRIB_NAME,
-        'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE,
-        'PR_COMMENT': PR_COMMENT,
-        'PR_DECLARATION': PR_DECLARATION,
-        'PR_KEYWORD': PR_KEYWORD,
-        'PR_LITERAL': PR_LITERAL,
-        'PR_NOCODE': PR_NOCODE,
-        'PR_PLAIN': PR_PLAIN,
-        'PR_PUNCTUATION': PR_PUNCTUATION,
-        'PR_SOURCE': PR_SOURCE,
-        'PR_STRING': PR_STRING,
-        'PR_TAG': PR_TAG,
-        'PR_TYPE': PR_TYPE,
-        'prettyPrintOne':
-           IN_GLOBAL_SCOPE
-             ? (win['prettyPrintOne'] = $prettyPrintOne)
-             : (prettyPrintOne = $prettyPrintOne),
-        'prettyPrint': prettyPrint =
-           IN_GLOBAL_SCOPE
-             ? (win['prettyPrint'] = $prettyPrint)
-             : (prettyPrint = $prettyPrint)
-      };
-
-  // Make PR available via the Asynchronous Module Definition (AMD) API.
-  // Per https://github.com/amdjs/amdjs-api/wiki/AMD:
-  // The Asynchronous Module Definition (AMD) API specifies a
-  // mechanism for defining modules such that the module and its
-  // dependencies can be asynchronously loaded.
-  // ...
-  // To allow a clear indicator that a global define function (as
-  // needed for script src browser loading) conforms to the AMD API,
-  // any global define function SHOULD have a property called "amd"
-  // whose value is an object. This helps avoid conflict with any
-  // other existing JavaScript code that could have defined a define()
-  // function that does not conform to the AMD API.
-  if (typeof define === "function" && define['amd']) {
-    define("google-code-prettify", [], function () {
-      return PR; 
-    });
-  }
-})();
-
-define("prettify", function(){});
-
-define('itemView',[
-  'App',
-  // Templates
-  'text!tpl/item.html',
-  'text!tpl/class.html',
-  'text!tpl/itemEnd.html',
-  // Tools
-  'prettify'
-], function(App, itemTpl, classTpl, endTpl) {
-  'use strict';
-
-  var appVersion = App.project.version || 'master';
-
-  var itemView = Backbone.View.extend({
-    el: '#item',
-    init: function() {
-      this.$html = $('html');
-      this.$body = $('body');
-      this.$scrollBody = $('html, body'); // hack for Chrome/Firefox scroll
-
-      this.tpl = _.template(itemTpl);
-      this.classTpl = _.template(classTpl);
-      this.endTpl = _.template(endTpl);
-
-      return this;
-    },
-    getSyntax: function(isMethod, cleanItem) {
-      var isConstructor = cleanItem.is_constructor;
-      var syntax = '';
-      if (isConstructor) {
-        syntax += 'new ';
-      } else if (cleanItem.static && cleanItem.class) {
-        syntax += cleanItem.class + '.';
-      }
-      syntax += cleanItem.name;
-
-      if (isMethod || isConstructor) {
-        syntax += '(';
-        if (cleanItem.params) {
-          for (var i = 0; i < cleanItem.params.length; i++) {
-            var p = cleanItem.params[i];
-            if (p.optional) {
-              syntax += '[';
-            }
-            syntax += p.name;
-            if (p.optdefault) {
-              syntax += '=' + p.optdefault;
-            }
-            if (p.optional) {
-              syntax += ']';
-            }
-            if (i !== cleanItem.params.length - 1) {
-              syntax += ', ';
+  
+    /**
+     * Contains functions for creating and registering new language handlers.
+     * @type {Object}
+     */
+    var PR = win['PR'] = {
+          'createSimpleLexer': createSimpleLexer,
+          'registerLangHandler': registerLangHandler,
+          'sourceDecorator': sourceDecorator,
+          'PR_ATTRIB_NAME': PR_ATTRIB_NAME,
+          'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE,
+          'PR_COMMENT': PR_COMMENT,
+          'PR_DECLARATION': PR_DECLARATION,
+          'PR_KEYWORD': PR_KEYWORD,
+          'PR_LITERAL': PR_LITERAL,
+          'PR_NOCODE': PR_NOCODE,
+          'PR_PLAIN': PR_PLAIN,
+          'PR_PUNCTUATION': PR_PUNCTUATION,
+          'PR_SOURCE': PR_SOURCE,
+          'PR_STRING': PR_STRING,
+          'PR_TAG': PR_TAG,
+          'PR_TYPE': PR_TYPE,
+          'prettyPrintOne':
+             IN_GLOBAL_SCOPE
+               ? (win['prettyPrintOne'] = $prettyPrintOne)
+               : (prettyPrintOne = $prettyPrintOne),
+          'prettyPrint': prettyPrint =
+             IN_GLOBAL_SCOPE
+               ? (win['prettyPrint'] = $prettyPrint)
+               : (prettyPrint = $prettyPrint)
+        };
+  
+    // Make PR available via the Asynchronous Module Definition (AMD) API.
+    // Per https://github.com/amdjs/amdjs-api/wiki/AMD:
+    // The Asynchronous Module Definition (AMD) API specifies a
+    // mechanism for defining modules such that the module and its
+    // dependencies can be asynchronously loaded.
+    // ...
+    // To allow a clear indicator that a global define function (as
+    // needed for script src browser loading) conforms to the AMD API,
+    // any global define function SHOULD have a property called "amd"
+    // whose value is an object. This helps avoid conflict with any
+    // other existing JavaScript code that could have defined a define()
+    // function that does not conform to the AMD API.
+    if (typeof define === "function" && define['amd']) {
+      define("google-code-prettify", [], function () {
+        return PR; 
+      });
+    }
+  })();
+  
+  define("prettify", function(){});
+  
+  define('itemView',[
+    'App',
+    // Templates
+    'text!tpl/item.html',
+    'text!tpl/class.html',
+    'text!tpl/itemEnd.html',
+    // Tools
+    'prettify'
+  ], function(App, itemTpl, classTpl, endTpl) {
+    'use strict';
+  
+    var appVersion = App.project.version || 'master';
+  
+    var itemView = Backbone.View.extend({
+      el: '#item',
+      init: function() {
+        this.$html = $('html');
+        this.$body = $('body');
+        this.$scrollBody = $('html, body'); // hack for Chrome/Firefox scroll
+  
+        this.tpl = _.template(itemTpl);
+        this.classTpl = _.template(classTpl);
+        this.endTpl = _.template(endTpl);
+  
+        return this;
+      },
+      getSyntax: function(isMethod, cleanItem) {
+        var isConstructor = cleanItem.is_constructor;
+        var syntax = '';
+        if (isConstructor) {
+          syntax += 'new ';
+        } else if (cleanItem.static && cleanItem.class) {
+          syntax += cleanItem.class + '.';
+        }
+        syntax += cleanItem.name;
+  
+        if (isMethod || isConstructor) {
+          syntax += '(';
+          if (cleanItem.params) {
+            for (var i = 0; i < cleanItem.params.length; i++) {
+              var p = cleanItem.params[i];
+              if (p.optional) {
+                syntax += '[';
+              }
+              syntax += p.name;
+              if (p.optdefault) {
+                syntax += '=' + p.optdefault;
+              }
+              if (p.optional) {
+                syntax += ']';
+              }
+              if (i !== cleanItem.params.length - 1) {
+                syntax += ', ';
+              }
             }
           }
+          syntax += ')';
         }
-        syntax += ')';
-      }
-
-      return syntax;
-    },
-    // Return a list of valid syntaxes across all overloaded versions of
-    // this item.
-    //
-    // For reference, we ultimately want to replicate something like this:
-    //
-    // https://processing.org/reference/color_.html
-    getSyntaxes: function(isMethod, cleanItem) {
-      var overloads = cleanItem.overloads || [cleanItem];
-      return overloads.map(this.getSyntax.bind(this, isMethod));
-    },
-    render: function(item) {
-      if (item) {
-        var itemHtml = '';
-        var cleanItem = this.clean(item);
-        var isClass = item.hasOwnProperty('itemtype') ? 0 : 1;
-        var collectionName = isClass
-            ? 'Constructor'
-            : this.capitalizeFirst(cleanItem.itemtype),
-          isConstructor = cleanItem.is_constructor;
-        cleanItem.isMethod = collectionName === 'Method';
-
-        var syntaxes = this.getSyntaxes(cleanItem.isMethod, cleanItem);
-
-        // Set the item header (title)
-
-        // Set item contents
-        if (isClass) {
-          var constructor = this.tpl({
-            item: cleanItem,
-            isClass: true,
-            isConstructor: isConstructor,
-            syntaxes: syntaxes
-          });
-          cleanItem.constructor = constructor;
-
-          var contents = _.find(App.classes, function(c) {
-            return c.name === cleanItem.name;
-          });
-          cleanItem.things = contents.items;
-
-          itemHtml = this.classTpl(cleanItem);
-        } else {
-          cleanItem.constRefs =
-            item.module === 'Constants' && App.data.consts[item.name];
-
-          itemHtml = this.tpl({
-            item: cleanItem,
-            isClass: false,
-            isConstructor: false,
-            syntaxes: syntaxes
-          });
+  
+        return syntax;
+      },
+      // Return a list of valid syntaxes across all overloaded versions of
+      // this item.
+      //
+      // For reference, we ultimately want to replicate something like this:
+      //
+      // https://processing.org/reference/color_.html
+      getSyntaxes: function(isMethod, cleanItem) {
+        var overloads = cleanItem.overloads || [cleanItem];
+        return overloads.map(this.getSyntax.bind(this, isMethod));
+      },
+      render: function(item) {
+        if (item) {
+          var itemHtml = '';
+          var cleanItem = this.clean(item);
+          var isClass = item.hasOwnProperty('itemtype') ? 0 : 1;
+          var collectionName = isClass
+              ? 'Constructor'
+              : this.capitalizeFirst(cleanItem.itemtype),
+            isConstructor = cleanItem.is_constructor;
+          cleanItem.isMethod = collectionName === 'Method';
+  
+          var syntaxes = this.getSyntaxes(cleanItem.isMethod, cleanItem);
+  
+          // Set the item header (title)
+  
+          // Set item contents
+          if (isClass) {
+            var constructor = this.tpl({
+              item: cleanItem,
+              isClass: true,
+              isConstructor: isConstructor,
+              syntaxes: syntaxes
+            });
+            cleanItem.constructor = constructor;
+  
+            var contents = _.find(App.classes, function(c) {
+              return c.name === cleanItem.name;
+            });
+            cleanItem.things = contents.items;
+  
+            itemHtml = this.classTpl(cleanItem);
+          } else {
+            cleanItem.constRefs =
+              item.module === 'Constants' && App.data.consts[item.name];
+  
+            itemHtml = this.tpl({
+              item: cleanItem,
+              isClass: false,
+              isConstructor: false,
+              syntaxes: syntaxes
+            });
+          }
+  
+          itemHtml += this.endTpl({ item: cleanItem, appVersion: appVersion });
+  
+          // Insert the view in the dom
+          this.$el.html(itemHtml);
+  
+          renderCode(cleanItem.name);
+  
+          // Set the document title based on the item name.
+          // If it is a method, add parentheses to the name
+          if (item.itemtype === 'method') {
+            App.pageView.appendToDocumentTitle(item.name + '()');
+          } else {
+            App.pageView.appendToDocumentTitle(item.name);
+          }
+  
+          // Hook up alt-text for examples
+          setTimeout(function() {
+            var alts = $('.example-content')[0];
+            if (alts) {
+              alts = $(alts)
+                .data('alt')
+                .split('\n');
+  
+              var canvases = $('.cnv_div');
+              for (var j = 0; j < alts.length; j++) {
+                if (j < canvases.length) {
+                  $(canvases[j]).append(
+                    '<span class="sr-only">' + alts[j] + '</span>'
+                  );
+                }
+              }
+            }
+          }, 1000);
+          Prism.highlightAll();
         }
-
-        itemHtml += this.endTpl({ item: cleanItem, appVersion: appVersion });
-
-        // Insert the view in the dom
-        this.$el.html(itemHtml);
-
-        renderCode(cleanItem.name);
-
-        // Set the document title based on the item name.
-        // If it is a method, add parentheses to the name
-        if (item.itemtype === 'method') {
-          App.pageView.appendToDocumentTitle(item.name + '()');
-        } else {
-          App.pageView.appendToDocumentTitle(item.name);
+  
+        var renderEvent = new Event('reference-rendered');
+        window.dispatchEvent(renderEvent);
+  
+        return this;
+      },
+      /**
+       * Clean item properties: url encode properties containing paths.
+       * @param {object} item The item object.
+       * @returns {object} Returns the same item object with urlencoded paths.
+       */
+      clean: function(item) {
+        var cleanItem = item;
+  
+        if (cleanItem.hasOwnProperty('file')) {
+          cleanItem.urlencodedfile = encodeURIComponent(item.file);
         }
-
-        // Hook up alt-text for examples
-        setTimeout(function() {
-          var alts = $('.example-content')[0];
-          if (alts) {
-            alts = $(alts)
-              .data('alt')
-              .split('\n');
-
-            var canvases = $('.cnv_div');
-            for (var j = 0; j < alts.length; j++) {
-              if (j < canvases.length) {
-                $(canvases[j]).append(
-                  '<span class="sr-only">' + alts[j] + '</span>'
-                );
-              }
+        return cleanItem;
+      },
+      /**
+       * Show a single item.
+       * @param {object} item Item object.
+       * @returns {object} This view.
+       */
+      show: function(item) {
+        if (item) {
+          this.render(item);
+        }
+  
+        App.pageView.hideContentViews();
+  
+        this.$el.show();
+  
+        this.scrollTop();
+        $('#item').focus();
+        return this;
+      },
+      /**
+       * Show a message if no item is found.
+       * @returns {object} This view.
+       */
+      nothingFound: function() {
+        this.$el.html(
+          '<p><br><br>Ouch. I am unable to find any item that match the current query.</p>'
+        );
+        App.pageView.hideContentViews();
+        this.$el.show();
+  
+        return this;
+      },
+      /**
+       * Scroll to the top of the window with an animation.
+       */
+      scrollTop: function() {
+        // Hack for Chrome/Firefox scroll animation
+        // Chrome scrolls 'body', Firefox scrolls 'html'
+        var scroll = this.$body.scrollTop() > 0 || this.$html.scrollTop() > 0;
+        if (scroll) {
+          this.$scrollBody.animate({ scrollTop: 0 }, 600);
+        }
+      },
+      /**
+       * Helper method to capitalize the first letter of a string
+       * @param {string} str
+       * @returns {string} Returns the string.
+       */
+      capitalizeFirst: function(str) {
+        return str.substr(0, 1).toUpperCase() + str.substr(1);
+      }
+    });
+  
+    return itemView;
+  });
+  
+  
+  define('text!tpl/menu.html',[],function () { return '<div>\n  <br>\n  <span id="reference-description1">Can\'t find what you\'re looking for? You may want to check out</span>\n  <a href="#/libraries/p5.sound">p5.sound</a>.<br><a href=\'https://p5js.org/offline-reference/p5-reference.zip\' target=_blank><span id="reference-description3">You can also download an offline version of the reference.</span></a>\n</div>\n\n<div id=\'collection-list-categories\'>\n<h2 class="sr-only" id="categories">Categories</h2>\n<% var i=0; %>\n<% var max=Math.floor(groups.length/4); %>\n<% var rem=groups.length%4; %>\n\n<% _.each(groups, function(group){ %>\n  <% var m = rem > 0 ? 1 : 0 %>\n  <% if (i === 0) { %>\n    <ul aria-labelledby="categories">\n    <% } %>\n    <li><a href="#group-<%=group%>"><%=group%></a></li>\n    <% if (i === (max+m-1)) { %>\n    </ul>\n  \t<% rem-- %>\n  \t<% i=0 %>\n  <% } else { %>\n  \t<% i++ %>\n  <% } %>\n<% }); %>\n</div>\n';});
+  
+  define('menuView',[
+    'App',
+    'text!tpl/menu.html'
+  ], function(App, menuTpl) {
+  
+    var menuView = Backbone.View.extend({
+      el: '#collection-list-nav',
+      /**
+       * Init.
+       * @returns {object} This view.
+       */
+      init: function() {
+        this.menuTpl = _.template(menuTpl);
+        return this;
+      },
+      /**
+       * Render.
+       * @returns {object} This view.
+       */
+      render: function() {
+  
+        var groups = [];
+        _.each(App.modules, function (item, i) {
+          if (!item.is_submodule) {
+            if (!item.file || item.file.indexOf('addons') === -1) { //addons don't get displayed on main page
+              groups.push(item.name);
             }
           }
-        }, 1000);
-        Prism.highlightAll();
-      }
-
-      var renderEvent = new Event('reference-rendered');
-      window.dispatchEvent(renderEvent);
-
-      return this;
-    },
-    /**
-     * Clean item properties: url encode properties containing paths.
-     * @param {object} item The item object.
-     * @returns {object} Returns the same item object with urlencoded paths.
-     */
-    clean: function(item) {
-      var cleanItem = item;
-
-      if (cleanItem.hasOwnProperty('file')) {
-        cleanItem.urlencodedfile = encodeURIComponent(item.file);
-      }
-      return cleanItem;
-    },
-    /**
-     * Show a single item.
-     * @param {object} item Item object.
-     * @returns {object} This view.
-     */
-    show: function(item) {
-      if (item) {
-        this.render(item);
-      }
-
-      App.pageView.hideContentViews();
-
-      this.$el.show();
-
-      this.scrollTop();
-      $('#item').focus();
-      return this;
-    },
-    /**
-     * Show a message if no item is found.
-     * @returns {object} This view.
-     */
-    nothingFound: function() {
-      this.$el.html(
-        '<p><br><br>Ouch. I am unable to find any item that match the current query.</p>'
-      );
-      App.pageView.hideContentViews();
-      this.$el.show();
-
-      return this;
-    },
-    /**
-     * Scroll to the top of the window with an animation.
-     */
-    scrollTop: function() {
-      // Hack for Chrome/Firefox scroll animation
-      // Chrome scrolls 'body', Firefox scrolls 'html'
-      var scroll = this.$body.scrollTop() > 0 || this.$html.scrollTop() > 0;
-      if (scroll) {
-        this.$scrollBody.animate({ scrollTop: 0 }, 600);
+          //}
+        });
+  
+        // Sort groups by name A-Z
+        groups.sort();
+  
+        var menuHtml = this.menuTpl({
+          'groups': groups
+        });
+  
+        // Render the view
+        this.$el.html(menuHtml);
+      },
+  
+      hide: function() {
+        this.$el.hide();
+      },
+  
+      show: function() {
+        this.$el.show();
+      },
+  
+      /**
+       * Update the menu.
+       * @param {string} el The name of the current route.
+       */
+      update: function(menuItem) {
+        //console.log(menuItem);
+        // this.$menuItems.removeClass('active');
+        // this.$menuItems.find('a[href=#'+menuItem+']').parent().addClass('active');
+  
       }
-    },
-    /**
-     * Helper method to capitalize the first letter of a string
-     * @param {string} str
-     * @returns {string} Returns the string.
-     */
-    capitalizeFirst: function(str) {
-      return str.substr(0, 1).toUpperCase() + str.substr(1);
-    }
+    });
+  
+    return menuView;
+  
   });
-
-  return itemView;
-});
-
-
-define('text!tpl/menu.html',[],function () { return '<div>\r\n  <br>\r\n  <span id="reference-description1">Can\'t find what you\'re looking for? You may want to check out</span>\r\n  <a href="#/libraries/p5.sound">p5.sound</a>.<br><a href=\'https://p5js.org/offline-reference/p5-reference.zip\' target=_blank><span id="reference-description3">You can also download an offline version of the reference.</span></a>\r\n</div>\r\n\r\n<div id=\'collection-list-categories\'>\r\n<h2 class="sr-only" id="categories">Categories</h2>\r\n<% var i=0; %>\r\n<% var max=Math.floor(groups.length/4); %>\r\n<% var rem=groups.length%4; %>\r\n\r\n<% _.each(groups, function(group){ %>\r\n  <% var m = rem > 0 ? 1 : 0 %>\r\n  <% if (i === 0) { %>\r\n    <ul aria-labelledby="categories">\r\n    <% } %>\r\n    <li><a href="#group-<%=group%>"><%=group%></a></li>\r\n    <% if (i === (max+m-1)) { %>\r\n    </ul>\r\n  \t<% rem-- %>\r\n  \t<% i=0 %>\r\n  <% } else { %>\r\n  \t<% i++ %>\r\n  <% } %>\r\n<% }); %>\r\n</div>\r\n';});
-
-define('menuView',[
-  'App',
-  'text!tpl/menu.html'
-], function(App, menuTpl) {
-
-  var menuView = Backbone.View.extend({
-    el: '#collection-list-nav',
-    /**
-     * Init.
-     * @returns {object} This view.
-     */
-    init: function() {
-      this.menuTpl = _.template(menuTpl);
-      return this;
-    },
-    /**
-     * Render.
-     * @returns {object} This view.
-     */
-    render: function() {
-
-      var groups = [];
-      _.each(App.modules, function (item, i) {
-        if (!item.is_submodule) {
-          if (!item.file || item.file.indexOf('addons') === -1) { //addons don't get displayed on main page
-            groups.push(item.name);
+  
+  
+  define('text!tpl/library.html',[],function () { return '<h3><%= module.name %> library</h3>\n\n<p><%= module.description %></p>\n\n<div id="library-page" class="reference-group clearfix">  \n\n<% var t = 0; col = 0; %>\n\n<% _.each(groups, function(group){ %>\n  <% if (t == 0) { %> \n    <div class="column_<%=col%>">\n  <% } %>\n  <% if (group.name !== module.name && group.name !== \'p5\') { %>\n    <% if (group.hash) { %> <a href="<%=group.hash%>" <% if (group.module !== module.name) { %>class="core"<% } %>><% } %>  \n    <h2 class="group-name <% if (t == 0) { %> first<%}%>"><%=group.name%></h2>\n    <% if (group.hash) { %> </a><br> <% } %>\n  <% } %>\n  <% _.each(group.items.filter(function(item) {return item.access !== \'private\'}), function(item) { %>\n    <a href="<%=item.hash%>" <% if (item.module !== module.name) { %>class="core"<% } %>><%=item.name%><% if (item.itemtype === \'method\') { %>()<%}%></a><br>\n    <% t++; %>\n  <% }); %>\n  <% if (t >= Math.floor(totalItems/4)) { col++; t = 0; %>\n    </div>\n  <% } %>\n<% }); %>\n</div>\n';});
+  
+  define(
+    'libraryView',[
+      'App',
+      // Templates
+      'text!tpl/library.html'
+    ],
+    function(App, libraryTpl) {
+      var libraryView = Backbone.View.extend({
+        el: '#list',
+        events: {},
+        /**
+         * Init.
+         */
+        init: function() {
+          this.libraryTpl = _.template(libraryTpl);
+  
+          return this;
+        },
+        /**
+         * Render the list.
+         */
+        render: function(m, listCollection) {
+          if (m && listCollection) {
+            var self = this;
+  
+            // Render items and group them by module
+            // module === group
+            this.groups = {};
+            _.each(m.items, function(item, i) {
+              var module = item.module || '_';
+              var group;
+              // Override default group with a selected category
+              // TODO: Overwriting with the first category might not be the best choice
+              // We might also want to have links for categories
+              if (item.category && item.category[0]) {
+                group = item.category[0];
+                // Populate item.hash
+                App.router.getHash(item);
+  
+                // Create a group list without link hash
+                if (!self.groups[group]) {
+                  self.groups[group] = {
+                    name: group.replace('_', '&nbsp;'),
+                    module: module,
+                    hash: undefined,
+                    items: []
+                  };
+                }
+              } else {
+                group = item.class || '_';
+                var hash = App.router.getHash(item);
+  
+                var ind = hash.lastIndexOf('/');
+                hash = hash.substring(0, ind);
+  
+                // Create a group list
+                if (!self.groups[group]) {
+                  self.groups[group] = {
+                    name: group.replace('_', '&nbsp;'),
+                    module: module,
+                    hash: hash,
+                    items: []
+                  };
+                }
+              }
+  
+              self.groups[group].items.push(item);
+            });
+  
+            // Sort groups by name A-Z
+            self.groups = _.sortBy(self.groups, this.sortByName);
+  
+            // Put the <li> items html into the list <ul>
+            var libraryHtml = self.libraryTpl({
+              title: self.capitalizeFirst(listCollection),
+              module: m.module,
+              totalItems: m.items.length,
+              groups: self.groups
+            });
+  
+            // Render the view
+            this.$el.html(libraryHtml);
+          }
+  
+          return this;
+        },
+        /**
+         * Show a list of items.
+         * @param {array} items Array of item objects.
+         * @returns {object} This view.
+         */
+        show: function(listGroup) {
+          if (App[listGroup]) {
+            this.render(App[listGroup], listGroup);
           }
+          App.pageView.hideContentViews();
+  
+          this.$el.show();
+  
+          return this;
+        },
+        /**
+         * Helper method to capitalize the first letter of a string
+         * @param {string} str
+         * @returns {string} Returns the string.
+         */
+        capitalizeFirst: function(str) {
+          return str.substr(0, 1).toUpperCase() + str.substr(1);
+        },
+        /**
+         * Sort function (for the Array.prototype.sort() native method): from A to Z.
+         * @param {string} a
+         * @param {string} b
+         * @returns {Array} Returns an array with elements sorted from A to Z.
+         */
+        sortAZ: function(a, b) {
+          return a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase() ? 1 : -1;
+        },
+  
+        sortByName: function(a, b) {
+          if (a.name === 'p5') return -1;
+          else return 0;
         }
-        //}
-      });
-
-      // Sort groups by name A-Z
-      groups.sort();
-
-      var menuHtml = this.menuTpl({
-        'groups': groups
       });
-
-      // Render the view
-      this.$el.html(menuHtml);
-    },
-
-    hide: function() {
-      this.$el.hide();
-    },
-
-    show: function() {
-      this.$el.show();
-    },
-
-    /**
-     * Update the menu.
-     * @param {string} el The name of the current route.
-     */
-    update: function(menuItem) {
-      //console.log(menuItem);
-      // this.$menuItems.removeClass('active');
-      // this.$menuItems.find('a[href=#'+menuItem+']').parent().addClass('active');
-
+  
+      return libraryView;
     }
-  });
-
-  return menuView;
-
-});
-
-
-define('text!tpl/library.html',[],function () { return '<h3><%= module.name %> library</h3>\r\n\r\n<p><%= module.description %></p>\r\n\r\n<div id="library-page" class="reference-group clearfix">  \r\n\r\n<% var t = 0; col = 0; %>\r\n\r\n<% _.each(groups, function(group){ %>\r\n  <% if (t == 0) { %> \r\n    <div class="column_<%=col%>">\r\n  <% } %>\r\n  <% if (group.name !== module.name && group.name !== \'p5\') { %>\r\n    <% if (group.hash) { %> <a href="<%=group.hash%>" <% if (group.module !== module.name) { %>class="core"<% } %>><% } %>  \r\n    <h2 class="group-name <% if (t == 0) { %> first<%}%>"><%=group.name%></h2>\r\n    <% if (group.hash) { %> </a><br> <% } %>\r\n  <% } %>\r\n  <% _.each(group.items.filter(function(item) {return item.access !== \'private\'}), function(item) { %>\r\n    <a href="<%=item.hash%>" <% if (item.module !== module.name) { %>class="core"<% } %>><%=item.name%><% if (item.itemtype === \'method\') { %>()<%}%></a><br>\r\n    <% t++; %>\r\n  <% }); %>\r\n  <% if (t >= Math.floor(totalItems/4)) { col++; t = 0; %>\r\n    </div>\r\n  <% } %>\r\n<% }); %>\r\n</div>\r\n';});
-
-define(
-  'libraryView',[
+  );
+  
+  define('pageView',[
     'App',
-    // Templates
-    'text!tpl/library.html'
-  ],
-  function(App, libraryTpl) {
-    var libraryView = Backbone.View.extend({
-      el: '#list',
-      events: {},
+  
+    // Views
+    'searchView',
+    'listView',
+    'itemView',
+    'menuView',
+    'libraryView'
+  ], function(App, searchView, listView, itemView, menuView, libraryView) {
+  
+    // Store the original title parts so we can substitue different endings.
+    var _originalDocumentTitle = window.document.title;
+  
+    var pageView = Backbone.View.extend({
+      el: 'body',
       /**
        * Init.
        */
       init: function() {
-        this.libraryTpl = _.template(libraryTpl);
-
+        App.$container = $('#container');
+        App.contentViews = [];
+  
         return this;
       },
       /**
-       * Render the list.
+       * Render.
        */
-      render: function(m, listCollection) {
-        if (m && listCollection) {
-          var self = this;
-
-          // Render items and group them by module
-          // module === group
-          this.groups = {};
-          _.each(m.items, function(item, i) {
-            var module = item.module || '_';
-            var group;
-            // Override default group with a selected category
-            // TODO: Overwriting with the first category might not be the best choice
-            // We might also want to have links for categories
-            if (item.category && item.category[0]) {
-              group = item.category[0];
-              // Populate item.hash
-              App.router.getHash(item);
-
-              // Create a group list without link hash
-              if (!self.groups[group]) {
-                self.groups[group] = {
-                  name: group.replace('_', '&nbsp;'),
-                  module: module,
-                  hash: undefined,
-                  items: []
-                };
-              }
-            } else {
-              group = item.class || '_';
-              var hash = App.router.getHash(item);
-
-              var ind = hash.lastIndexOf('/');
-              hash = hash.substring(0, ind);
-
-              // Create a group list
-              if (!self.groups[group]) {
-                self.groups[group] = {
-                  name: group.replace('_', '&nbsp;'),
-                  module: module,
-                  hash: hash,
-                  items: []
-                };
-              }
-            }
-
-            self.groups[group].items.push(item);
-          });
-
-          // Sort groups by name A-Z
-          self.groups = _.sortBy(self.groups, this.sortByName);
-
-          // Put the <li> items html into the list <ul>
-          var libraryHtml = self.libraryTpl({
-            title: self.capitalizeFirst(listCollection),
-            module: m.module,
-            totalItems: m.items.length,
-            groups: self.groups
-          });
-
-          // Render the view
-          this.$el.html(libraryHtml);
+      render: function() {
+  
+        // Menu view
+        if (!App.menuView) {
+          App.menuView = new menuView();
+          App.menuView.init().render();
+        }
+  
+        // Item view
+        if (!App.itemView) {
+          App.itemView = new itemView();
+          App.itemView.init().render();
+          // Add the item view to the views array
+          App.contentViews.push(App.itemView);
+        }
+  
+        // List view
+        if (!App.listView) {
+          App.listView = new listView();
+          App.listView.init().render();
+          // Add the list view to the views array
+          App.contentViews.push(App.listView);
+        }
+  
+        // Library view
+        if (!App.libraryView) {
+          App.libraryView = new libraryView();
+          App.libraryView.init().render();
+          // Add the list view to the views array
+          App.contentViews.push(App.libraryView);
+        }
+  
+        // Search
+        if (!App.searchView) {
+          App.searchView = new searchView();
+          App.searchView.init().render();
         }
-
         return this;
       },
       /**
-       * Show a list of items.
-       * @param {array} items Array of item objects.
+       * Hide item and list views.
        * @returns {object} This view.
        */
-      show: function(listGroup) {
-        if (App[listGroup]) {
-          this.render(App[listGroup], listGroup);
-        }
-        App.pageView.hideContentViews();
-
-        this.$el.show();
-
+      hideContentViews: function() {
+        _.each(App.contentViews, function(view, i) {
+          view.$el.hide();
+        });
+  
         return this;
       },
       /**
-       * Helper method to capitalize the first letter of a string
-       * @param {string} str
-       * @returns {string} Returns the string.
+       * Append the supplied name to the first part of original document title.
+       * If no name is supplied, the title will reset to the original one.
        */
-      capitalizeFirst: function(str) {
-        return str.substr(0, 1).toUpperCase() + str.substr(1);
+      appendToDocumentTitle: function(name){
+        if(name){
+          let firstTitlePart = _originalDocumentTitle.split(" | ")[0];
+          window.document.title = [firstTitlePart, name].join(" | ");
+        } else {
+          window.document.title = _originalDocumentTitle;
+        }
+      }    
+    });
+  
+    return pageView;
+  
+  });
+  
+  define('router',[
+    'App'
+  ], function(App) {
+  
+    'use strict'; //
+  
+    var Router = Backbone.Router.extend({
+  
+      routes: {
+        '': 'list',
+        'p5': 'list',
+        'p5/': 'list',
+        'classes': 'list',
+        'search': 'search',
+        'libraries/:lib': 'library',
+        ':searchClass(/:searchItem)': 'get'
       },
       /**
-       * Sort function (for the Array.prototype.sort() native method): from A to Z.
-       * @param {string} a
-       * @param {string} b
-       * @returns {Array} Returns an array with elements sorted from A to Z.
+       * Whether the json API data was loaded.
        */
-      sortAZ: function(a, b) {
-        return a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase() ? 1 : -1;
-      },
-
-      sortByName: function(a, b) {
-        if (a.name === 'p5') return -1;
-        else return 0;
-      }
-    });
-
-    return libraryView;
-  }
-);
-
-define('pageView',[
-  'App',
-
-  // Views
-  'searchView',
-  'listView',
-  'itemView',
-  'menuView',
-  'libraryView'
-], function(App, searchView, listView, itemView, menuView, libraryView) {
-
-  // Store the original title parts so we can substitue different endings.
-  var _originalDocumentTitle = window.document.title;
-
-  var pageView = Backbone.View.extend({
-    el: 'body',
-    /**
-     * Init.
-     */
-    init: function() {
-      App.$container = $('#container');
-      App.contentViews = [];
-
-      return this;
-    },
-    /**
-     * Render.
-     */
-    render: function() {
-
-      // Menu view
-      if (!App.menuView) {
-        App.menuView = new menuView();
-        App.menuView.init().render();
-      }
-
-      // Item view
-      if (!App.itemView) {
-        App.itemView = new itemView();
-        App.itemView.init().render();
-        // Add the item view to the views array
-        App.contentViews.push(App.itemView);
-      }
-
-      // List view
-      if (!App.listView) {
-        App.listView = new listView();
-        App.listView.init().render();
-        // Add the list view to the views array
-        App.contentViews.push(App.listView);
-      }
-
-      // Library view
-      if (!App.libraryView) {
-        App.libraryView = new libraryView();
-        App.libraryView.init().render();
-        // Add the list view to the views array
-        App.contentViews.push(App.libraryView);
-      }
-
-      // Search
-      if (!App.searchView) {
-        App.searchView = new searchView();
-        App.searchView.init().render();
-      }
-      return this;
-    },
-    /**
-     * Hide item and list views.
-     * @returns {object} This view.
-     */
-    hideContentViews: function() {
-      _.each(App.contentViews, function(view, i) {
-        view.$el.hide();
-      });
-
-      return this;
-    },
-    /**
-     * Append the supplied name to the first part of original document title.
-     * If no name is supplied, the title will reset to the original one.
-     */
-    appendToDocumentTitle: function(name){
-      if(name){
-        let firstTitlePart = _originalDocumentTitle.split(" | ")[0];
-        window.document.title = [firstTitlePart, name].join(" | ");
-      } else {
-        window.document.title = _originalDocumentTitle;
-      }
-    }    
-  });
-
-  return pageView;
-
-});
-
-define('router',[
-  'App'
-], function(App) {
-
-  'use strict'; //
-
-  var Router = Backbone.Router.extend({
-
-    routes: {
-      '': 'list',
-      'p5': 'list',
-      'p5/': 'list',
-      'classes': 'list',
-      'search': 'search',
-      'libraries/:lib': 'library',
-      ':searchClass(/:searchItem)': 'get'
-    },
-    /**
-     * Whether the json API data was loaded.
-     */
-    _initialized: false,
-    /**
-     * Initialize the app: load json API data and create searchable arrays.
-     */
-    init: function(callback) {
-      var self = this;
-      require(['pageView'], function(pageView) {
-
-        // If already initialized, move away from here!
-        if (self._initialized) {
+      _initialized: false,
+      /**
+       * Initialize the app: load json API data and create searchable arrays.
+       */
+      init: function(callback) {
+        var self = this;
+        require(['pageView'], function(pageView) {
+  
+          // If already initialized, move away from here!
+          if (self._initialized) {
+            if (callback)
+              callback();
+            return;
+          }
+  
+          // Update initialization state: must be done now to avoid recursive mess
+          self._initialized = true;
+  
+          // Render views
+          if (!App.pageView) {
+            App.pageView = new pageView();
+            App.pageView.init().render();
+          }
+  
+          // If a callback is set (a route has already been called), run it
+          // otherwise, show the default list
           if (callback)
             callback();
+          else
+            self.list();
+        });
+      },
+      /**
+       * Start route. Simply check if initialized.
+       */
+      start: function() {
+        this.init();
+      },
+      /**
+       * Show item details by searching a class or a class item (method, property or event).
+       * @param {string} searchClass The class name (mandatory).
+       * @param {string} searchItem The class item name: can be a method, property or event name.
+       */
+      get: function(searchClass, searchItem) {
+  
+        // if looking for a library page, redirect
+        if (searchClass === 'p5.sound' && !searchItem) {
+          window.location.hash = '/libraries/'+searchClass;
           return;
         }
-
-        // Update initialization state: must be done now to avoid recursive mess
-        self._initialized = true;
-
-        // Render views
-        if (!App.pageView) {
-          App.pageView = new pageView();
-          App.pageView.init().render();
-        }
-
-        // If a callback is set (a route has already been called), run it
-        // otherwise, show the default list
-        if (callback)
-          callback();
-        else
-          self.list();
-      });
-    },
-    /**
-     * Start route. Simply check if initialized.
-     */
-    start: function() {
-      this.init();
-    },
-    /**
-     * Show item details by searching a class or a class item (method, property or event).
-     * @param {string} searchClass The class name (mandatory).
-     * @param {string} searchItem The class item name: can be a method, property or event name.
-     */
-    get: function(searchClass, searchItem) {
-
-      // if looking for a library page, redirect
-      if (searchClass === 'p5.sound' && !searchItem) {
-        window.location.hash = '/libraries/'+searchClass;
-        return;
-      }
-
-      var self = this;
-      this.init(function() {
-        var item = self.getItem(searchClass, searchItem);
-
-        App.menuView.hide();
-
-        if (item) {
-          App.itemView.show(item);
-        } else {
-          //App.itemView.nothingFound();
-
-          self.list();
-        }
-
-        styleCodeLinks();
-      });
-    },
-    /**
-     * Returns one item object by searching a class or a class item (method, property or event).
-     * @param {string} searchClass The class name (mandatory).
-     * @param {string} searchItem The class item name: can be a method, property or event name.
-     * @returns {object} The item found or undefined if nothing was found.
-     */
-    getItem: function(searchClass, searchItem) {
-      var classes = App.classes,
-              items = App.allItems,
-              classesCount = classes.length,
-              itemsCount = items.length,
-              className = searchClass ? searchClass.toLowerCase() : undefined,
-              itemName = searchItem ? searchItem : undefined,
-              found;
-
-      // Only search for a class, if itemName is undefined
-      if (className && !itemName) {
-        for (var i = 0; i < classesCount; i++) {
-          if (classes[i].name.toLowerCase() === className) {
-            found = classes[i];
-            _.each(found.items, function(i, idx) {
-              i.hash = App.router.getHash(i);
-            });
-            break;
+  
+        var self = this;
+        this.init(function() {
+          var item = self.getItem(searchClass, searchItem);
+  
+          App.menuView.hide();
+  
+          if (item) {
+            App.itemView.show(item);
+          } else {
+            //App.itemView.nothingFound();
+  
+            self.list();
           }
-        }
-        // Search for a class item
-      } else if (className && itemName) {
-        // Search case sensitively
-        for (var i = 0; i < itemsCount; i++) {
-          if (items[i].class.toLowerCase() === className &&
-            items[i].name === itemName) {
-            found = items[i];
-            break;
+  
+          styleCodeLinks();
+        });
+      },
+      /**
+       * Returns one item object by searching a class or a class item (method, property or event).
+       * @param {string} searchClass The class name (mandatory).
+       * @param {string} searchItem The class item name: can be a method, property or event name.
+       * @returns {object} The item found or undefined if nothing was found.
+       */
+      getItem: function(searchClass, searchItem) {
+        var classes = App.classes,
+                items = App.allItems,
+                classesCount = classes.length,
+                itemsCount = items.length,
+                className = searchClass ? searchClass.toLowerCase() : undefined,
+                itemName = searchItem ? searchItem : undefined,
+                found;
+  
+        // Only search for a class, if itemName is undefined
+        if (className && !itemName) {
+          for (var i = 0; i < classesCount; i++) {
+            if (classes[i].name.toLowerCase() === className) {
+              found = classes[i];
+              _.each(found.items, function(i, idx) {
+                i.hash = App.router.getHash(i);
+              });
+              break;
+            }
           }
-        }
-
-        // If no match was found, fallback to search case insensitively
-        if(!found){
+          // Search for a class item
+        } else if (className && itemName) {
+          // Search case sensitively
           for (var i = 0; i < itemsCount; i++) {
-            if(items[i].class.toLowerCase() === className &&
-              items[i].name.toLowerCase() === itemName.toLowerCase()){
+            if (items[i].class.toLowerCase() === className &&
+              items[i].name === itemName) {
               found = items[i];
               break;
             }
           }
+  
+          // If no match was found, fallback to search case insensitively
+          if(!found){
+            for (var i = 0; i < itemsCount; i++) {
+              if(items[i].class.toLowerCase() === className &&
+                items[i].name.toLowerCase() === itemName.toLowerCase()){
+                found = items[i];
+                break;
+              }
+            }
+          }
         }
-      }
-
-      return found;
-    },
-    /**
-     * List items.
-     * @param {string} collection The name of the collection to list.
-     */
-    list: function(collection) {
-
-      collection = 'allItems';
-
-      // Make sure collection is valid
-      if (App.collections.indexOf(collection) < 0) {
-        return;
-      }
-
-      this.init(function() {
-        App.menuView.show(collection);
-        App.menuView.update(collection);
-        App.listView.show(collection);
-        styleCodeLinks();
-      });
-    },
-    /**
-     * Display information for a library.
-     * @param {string} collection The name of the collection to list.
-     */
-    library: function(collection) {
-      this.init(function() {
-        App.menuView.hide();
-        App.libraryView.show(collection.substring(3)); //remove p5.
-        styleCodeLinks();
-      });
-    },
-    /**
-     * Close all content views.
-     */
-    search: function() {
-      this.init(function() {
-        App.menuView.hide();
-        App.pageView.hideContentViews();
-      });
-    },
-
-    /**
-     * Create an hash/url for the item.
-     * @param {Object} item A class, method, property or event object.
-     * @returns {String} The hash string, including the '#'.
-     */
-     getHash: function(item) {
-
-       if (!item.hash) {
-
-         // FIX TO INVISIBLE OBJECTS: DH (see also listView.js)
-
-         if (item.class) {
-           var clsFunc = '#/' + item.class + '.' + item.name;
-           var idx = clsFunc.lastIndexOf('.');
-           item.hash = clsFunc.substring(0,idx) + '/' + clsFunc.substring(idx+1);
-         } else {
-          item.hash = '#/' + item.name;
+  
+        return found;
+      },
+      /**
+       * List items.
+       * @param {string} collection The name of the collection to list.
+       */
+      list: function(collection) {
+  
+        collection = 'allItems';
+  
+        // Make sure collection is valid
+        if (App.collections.indexOf(collection) < 0) {
+          return;
+        }
+  
+        this.init(function() {
+          App.menuView.show(collection);
+          App.menuView.update(collection);
+          App.listView.show(collection);
+          styleCodeLinks();
+        });
+      },
+      /**
+       * Display information for a library.
+       * @param {string} collection The name of the collection to list.
+       */
+      library: function(collection) {
+        this.init(function() {
+          App.menuView.hide();
+          App.libraryView.show(collection.substring(3)); //remove p5.
+          styleCodeLinks();
+        });
+      },
+      /**
+       * Close all content views.
+       */
+      search: function() {
+        this.init(function() {
+          App.menuView.hide();
+          App.pageView.hideContentViews();
+        });
+      },
+  
+      /**
+       * Create an hash/url for the item.
+       * @param {Object} item A class, method, property or event object.
+       * @returns {String} The hash string, including the '#'.
+       */
+       getHash: function(item) {
+  
+         if (!item.hash) {
+  
+           // FIX TO INVISIBLE OBJECTS: DH (see also listView.js)
+  
+           if (item.class) {
+             var clsFunc = '#/' + item.class + '.' + item.name;
+             var idx = clsFunc.lastIndexOf('.');
+             item.hash = clsFunc.substring(0,idx) + '/' + clsFunc.substring(idx+1);
+           } else {
+            item.hash = '#/' + item.name;
+           }
          }
-       }
-
-       return item.hash;
-    }
-  });
-
-  
-  function styleCodeLinks() {
-    var links = document.getElementsByTagName("a");
-    for (var iLink = 0; iLink < links.length; iLink++) {
-      var link = links[iLink];
-      if (link.hash.startsWith('#/p5')) {
-        link.classList.add('code');
-      }
-    }
-  }
-
-
-  // Get the router
-  App.router = new Router();
-
-  // Start history
-  Backbone.history.start();
-
-  return App.router;
-
-});
-
-/**
- * Define global App.
- */
-var App = window.App || {};
-define('App', [],function() {
-  return App;
-});
-
-/**
- * Load json API data and start the router.
- * @param {module} App
- * @param {module} router
- */
-require([
-  'App',
-  './documented-method'], function(App, DocumentedMethod) {
-
-  // Set collections
-  App.collections = ['allItems', 'classes', 'events', 'methods', 'properties', 'p5.sound'];
-
-  // Get json API data
-  $.getJSON('data.min.json', function(data) {
-    App.data = data;
-    App.classes = [];
-    App.methods = [];
-    App.properties = [];
-    App.events = [];
-    App.allItems = [];
-    App.sound = { items: [] };
-    App.dom = { items: [] };
-    App.modules = [];
-    App.project = data.project;
-
-
-    var modules = data.modules;
-
-    // Get class items (methods, properties, events)
-    _.each(modules, function(m, idx, array) {
-      App.modules.push(m);
-      if (m.name == "p5.sound") {
-        App.sound.module = m;
+  
+         return item.hash;
       }
     });
-
-
-    var items = data.classitems;
-    var classes = data.classes;
-
-    // Get classes
-    _.each(classes, function(c, idx, array) {
-      if (!c.private) {
-        App.classes.push(c);
+  
+    
+    function styleCodeLinks() {
+      var links = document.getElementsByTagName("a");
+      for (var iLink = 0; iLink < links.length; iLink++) {
+        var link = links[iLink];
+        if (link.hash.startsWith('#/p5')) {
+          link.classList.add('code');
+        }
       }
-    });
-
-
-    // Get class items (methods, properties, events)
-    _.each(items, function(el, idx, array) {
-      if (el.itemtype) {
-        if (el.itemtype === "method") {
-          el = new DocumentedMethod(el);
-          App.methods.push(el);
-          App.allItems.push(el);
-        } else if (el.itemtype === "property") {
-          App.properties.push(el);
-          App.allItems.push(el);
-        } else if (el.itemtype === "event") {
-          App.events.push(el);
-          App.allItems.push(el);
+    }
+  
+  
+    // Get the router
+    App.router = new Router();
+  
+    // Start history
+    Backbone.history.start();
+  
+    return App.router;
+  
+  });
+  
+  /**
+   * Define global App.
+   */
+  var App = window.App || {};
+  define('App', [],function() {
+    return App;
+  });
+  
+  /**
+   * Load json API data and start the router.
+   * @param {module} App
+   * @param {module} router
+   */
+  require([
+    'App',
+    './documented-method'], function(App, DocumentedMethod) {
+  
+    // Set collections
+    App.collections = ['allItems', 'classes', 'events', 'methods', 'properties', 'p5.sound'];
+  
+    // Get json API data
+    $.getJSON('data.min.json', function(data) {
+      App.data = data;
+      App.classes = [];
+      App.methods = [];
+      App.properties = [];
+      App.events = [];
+      App.allItems = [];
+      App.sound = { items: [] };
+      App.dom = { items: [] };
+      App.modules = [];
+      App.project = data.project;
+  
+  
+      var modules = data.modules;
+  
+      // Get class items (methods, properties, events)
+      _.each(modules, function(m, idx, array) {
+        App.modules.push(m);
+        if (m.name == "p5.sound") {
+          App.sound.module = m;
+        }
+      });
+  
+  
+      var items = data.classitems;
+      var classes = data.classes;
+  
+      // Get classes
+      _.each(classes, function(c, idx, array) {
+        if (!c.private) {
+          App.classes.push(c);
         }
-
-        // libraries
-        if (el.module === "p5.sound") {
-          App.sound.items.push(el);
+      });
+  
+  
+      // Get class items (methods, properties, events)
+      _.each(items, function(el, idx, array) {
+        if (el.itemtype) {
+          if (el.itemtype === "method") {
+            el = new DocumentedMethod(el);
+            App.methods.push(el);
+            App.allItems.push(el);
+          } else if (el.itemtype === "property") {
+            App.properties.push(el);
+            App.allItems.push(el);
+          } else if (el.itemtype === "event") {
+            App.events.push(el);
+            App.allItems.push(el);
+          }
+  
+          // libraries
+          if (el.module === "p5.sound") {
+            App.sound.items.push(el);
+          }
         }
-      }
-    });
-
-    _.each(App.classes, function(c, idx) {
-      c.items = _.filter(App.allItems, function(it){ return it.class === c.name; });
+      });
+  
+      _.each(App.classes, function(c, idx) {
+        c.items = _.filter(App.allItems, function(it){ return it.class === c.name; });
+      });
+  
+      require(['router']);
     });
-
-    require(['router']);
   });
-});
-
-define("main", function(){});
-
-}());
\ No newline at end of file
+  
+  define("main", function(){});
+  
+  }());
\ No newline at end of file

From fef9dfd4d14893aca4a958ee0188234e4b1f97de Mon Sep 17 00:00:00 2001
From: Sanjay Singh Rajpoot
 <67458417+SanjaySinghRajpoot@users.noreply.github.com>
Date: Mon, 29 Mar 2021 21:20:39 +0530
Subject: [PATCH 03/10] Updating package.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 5ae6e6345c..8a92f3b068 100644
--- a/package.json
+++ b/package.json
@@ -92,4 +92,4 @@
   "dependencies": {
     "upath": "^1.2.0"
   }
-}
\ No newline at end of file
+}

From 33a4379cd7d43a6a6b7f8c6a359768f2c608ccf5 Mon Sep 17 00:00:00 2001
From: sanjay rajpoot <iamsanjayrajpoot@gmail.com>
Date: Mon, 29 Mar 2021 21:24:50 +0530
Subject: [PATCH 04/10] Updating Files

---
 .github/workflows/deploy.yaml                 |   25 +
 .github/workflows/test.yml                    |   22 +-
 .travis.yml                                   |   12 -
 Gruntfile.js                                  |    5 +-
 package-lock.json                             |   81 +-
 package.json                                  |    2 +-
 src/assets/js/reference.js                    | 9530 ++++++++---------
 src/data/data.yml                             |    2 +-
 .../en/10_Interaction/11_WeightLine.js        |   55 +
 src/data/reference/en.json                    |   31 +-
 src/data/reference/es.json                    |   25 +-
 src/data/reference/ko.json                    |   25 +-
 src/data/reference/zh-Hans.json               |   25 +-
 .../pages/reference/assets/Avenir.otf         |  Bin 0 -> 127448 bytes
 .../reference/assets/AvenirNextLTPro-Demi.otf |  Bin 0 -> 69940 bytes
 src/templates/pages/reference/data.json       |  663 +-
 src/templates/pages/reference/data.min.json   |    2 +-
 17 files changed, 5322 insertions(+), 5183 deletions(-)
 create mode 100644 .github/workflows/deploy.yaml
 delete mode 100644 .travis.yml
 create mode 100644 src/data/examples/en/10_Interaction/11_WeightLine.js
 create mode 100644 src/templates/pages/reference/assets/Avenir.otf
 create mode 100644 src/templates/pages/reference/assets/AvenirNextLTPro-Demi.otf

diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
new file mode 100644
index 0000000000..b54408558c
--- /dev/null
+++ b/.github/workflows/deploy.yaml
@@ -0,0 +1,25 @@
+name: Test and Deploy
+
+on:
+  push:
+    branches: [ main ]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js
+      uses: actions/setup-node@v1
+      with:
+        node-version: "14.x"
+    - name: Install node modules
+      run: npm ci
+    - name: Build
+      run: npm run build
+    - name: Deploy 🚀
+      uses: JamesIves/github-pages-deploy-action@4.0.0
+      with:
+        branch: gh-pages # The branch the action should deploy to.
+        folder: dist/ # The folder the action should deploy.
+        single-commit: false # "false" here means "preserve git history on the gh-pages branch"
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index ebd18f91fd..9a36127654 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -1,29 +1,23 @@
 # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
 # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 
-name: Node.js CI
+name: Test
 
 on:
-  push:
-    branches: [ main ]
   pull_request:
     branches: [ main ]
 
 jobs:
   test:
-
     runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [14.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
     steps:
     - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
+    - name: Use Node.js
       uses: actions/setup-node@v1
       with:
-        node-version: ${{ matrix.node-version }}
-    - run: npm ci
-    - run: npm test
+        node-version: "14.x"
+    - name: Install node modules
+      run: npm ci
+    - name: Run tests
+      run: npm test
+      
\ No newline at end of file
diff --git a/.travis.yml b/.travis.yml
deleted file mode 100644
index 35b3cd5383..0000000000
--- a/.travis.yml
+++ /dev/null
@@ -1,12 +0,0 @@
-language: node_js
-node_js:
-  - "lts/*"
-
-deploy:
-  provider: pages
-  skip-cleanup: true
-  github-token: $GITHUB_TOKEN
-  keep-history: true
-  local-dir: dist/
-  on:
-    branch: main
diff --git a/Gruntfile.js b/Gruntfile.js
index f715c31d72..e17104a143 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -442,8 +442,11 @@ module.exports = function(grunt) {
   grunt.registerTask('move_dataJSON', function() {
     const dataJSON_p5js = 'tmp/p5.js/docs/reference/data.json';
     const dataJSON_p5jswebsite = 'src/templates/pages/reference/data.json';
-    // move the data.json from the cloned p5.js repository to the p5.js-website repository
+    const dataJSONmin_p5js = 'tmp/p5.js/docs/reference/data.min.json';
+    const dataJSONmin_p5jswebsite = 'src/templates/pages/reference/data.min.json';
+    // move the data.json files from the cloned p5.js repository to the p5.js-website repository
     fse.moveSync(dataJSON_p5js, dataJSON_p5jswebsite, { overwrite: true });
+    fse.moveSync(dataJSONmin_p5js, dataJSONmin_p5jswebsite, { overwrite: true });
     // delete the tmp folder that contained the p5.js repository
     fse.removeSync('tmp/');
   });
diff --git a/package-lock.json b/package-lock.json
index 95bdaf7153..2d76bdc862 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1391,7 +1391,8 @@
         },
         "kind-of": {
           "version": "6.0.2",
-          "resolved": "",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+          "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
           "dev": true
         }
       }
@@ -2806,9 +2807,9 @@
       }
     },
     "bl": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/bl/-/bl-1.2.3.tgz",
-      "integrity": "sha512-pvcNpa0UU69UT341rO6AYy4FVAIkUHuZXRIWbq+zHnsVcRzDDjIAhGuuYoi0d//cwIwtt4pkpKycWEfjdV+vww==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-1.2.2.tgz",
+      "integrity": "sha512-e8tQYnZodmebYDWGH7KMRvtzKXaJHx3BbilrgZCfvyLUYdKpK1t5PSPmpkny/SgiTSCnjfLW7v5rlONXVFkQEA==",
       "dev": true,
       "requires": {
         "readable-stream": "^2.3.5",
@@ -4962,9 +4963,9 @@
       "optional": true
     },
     "diff": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",
-      "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-2.2.3.tgz",
+      "integrity": "sha1-YOr9DSjukG5Oj/ClLBIpUhAzv5k=",
       "dev": true
     },
     "digits": {
@@ -8189,62 +8190,14 @@
       }
     },
     "grunt-postcss": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/grunt-postcss/-/grunt-postcss-0.9.0.tgz",
-      "integrity": "sha512-lglLcVaoOIqH0sFv7RqwUKkEFGQwnlqyAKbatxZderwZGV1nDyKHN7gZS9LUiTx1t5GOvRBx0BEalHMyVwFAIA==",
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/grunt-postcss/-/grunt-postcss-0.8.0.tgz",
+      "integrity": "sha1-jzCor2B5A84MRfAfC+QsYOMc6w4=",
       "dev": true,
       "requires": {
-        "chalk": "^2.1.0",
-        "diff": "^3.0.0",
-        "postcss": "^6.0.11"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
-          "requires": {
-            "color-convert": "^1.9.0"
-          }
-        },
-        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
-          }
-        },
-        "has-flag": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-          "dev": true
-        },
-        "postcss": {
-          "version": "6.0.23",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
-          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.1",
-            "source-map": "^0.6.1",
-            "supports-color": "^5.4.0"
-          }
-        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
+        "chalk": "^1.0.0",
+        "diff": "^2.0.2",
+        "postcss": "^5.0.0"
       }
     },
     "grunt-serve": {
@@ -18266,7 +18219,8 @@
         },
         "kind-of": {
           "version": "6.0.2",
-          "resolved": "",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+          "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
           "dev": true
         }
       }
@@ -19743,7 +19697,8 @@
         },
         "kind-of": {
           "version": "6.0.2",
-          "resolved": "",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+          "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
           "dev": true
         }
       }
diff --git a/package.json b/package.json
index 5ae6e6345c..8a92f3b068 100644
--- a/package.json
+++ b/package.json
@@ -92,4 +92,4 @@
   "dependencies": {
     "upath": "^1.2.0"
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/js/reference.js b/src/assets/js/reference.js
index 5b4baa0ecd..37150da749 100644
--- a/src/assets/js/reference.js
+++ b/src/assets/js/reference.js
@@ -1,4948 +1,4948 @@
 (function () {
-  // https://github.com/umdjs/umd/blob/master/templates/returnExports.js
-  (function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-      define('documented-method',[], factory);
-    } else if (typeof module === 'object' && module.exports) {
-      module.exports = factory();
-    } else {
-      root.DocumentedMethod = factory();
-    }
-  }(this, function () {
-    function extend(target, src) {
-      Object.keys(src).forEach(function(prop) {
-        target[prop] = src[prop];
-      });
-      return target;
-    }
-  
-    function DocumentedMethod(classitem) {
-      extend(this, classitem);
-  
-      if (this.overloads) {
-        // Make each overload inherit properties from their parent
-        // classitem.
-        this.overloads = this.overloads.map(function(overload) {
-          return extend(Object.create(this), overload);
-        }, this);
-  
-        if (this.params) {
-          throw new Error('params for overloaded methods should be undefined');
-        }
-  
-        this.params = this._getMergedParams();
+// https://github.com/umdjs/umd/blob/master/templates/returnExports.js
+(function (root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define('documented-method',[], factory);
+  } else if (typeof module === 'object' && module.exports) {
+    module.exports = factory();
+  } else {
+    root.DocumentedMethod = factory();
+  }
+}(this, function () {
+  function extend(target, src) {
+    Object.keys(src).forEach(function(prop) {
+      target[prop] = src[prop];
+    });
+    return target;
+  }
+
+  function DocumentedMethod(classitem) {
+    extend(this, classitem);
+
+    if (this.overloads) {
+      // Make each overload inherit properties from their parent
+      // classitem.
+      this.overloads = this.overloads.map(function(overload) {
+        return extend(Object.create(this), overload);
+      }, this);
+
+      if (this.params) {
+        throw new Error('params for overloaded methods should be undefined');
       }
+
+      this.params = this._getMergedParams();
     }
-  
-    DocumentedMethod.prototype = {
-      // Merge parameters across all overloaded versions of this item.
-      _getMergedParams: function() {
-        var paramNames = {};
-        var params = [];
-  
-        this.overloads.forEach(function(overload) {
-          if (!overload.params) {
+  }
+
+  DocumentedMethod.prototype = {
+    // Merge parameters across all overloaded versions of this item.
+    _getMergedParams: function() {
+      var paramNames = {};
+      var params = [];
+
+      this.overloads.forEach(function(overload) {
+        if (!overload.params) {
+          return;
+        }
+        overload.params.forEach(function(param) {
+          if (param.name in paramNames) {
             return;
           }
-          overload.params.forEach(function(param) {
-            if (param.name in paramNames) {
-              return;
-            }
-            paramNames[param.name] = param;
-            params.push(param);
-          });
-        });
-  
-        return params;
-      }
-    };
-  
-    return DocumentedMethod;
-  }));
-  
-  /**
-   * @license RequireJS text 2.0.10 Copyright (c) 2010-2012, The Dojo Foundation All Rights Reserved.
-   * Available via the MIT or new BSD license.
-   * see: http://github.com/requirejs/text for details
-   */
-  /*jslint regexp: true */
-  /*global require, XMLHttpRequest, ActiveXObject,
-    define, window, process, Packages,
-    java, location, Components, FileUtils */
-  
-  define('text',['module'], function (module) {
-      'use strict';
-  
-      var text, fs, Cc, Ci, xpcIsWindows,
-          progIds = ['Msxml2.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.4.0'],
-          xmlRegExp = /^\s*<\?xml(\s)+version=[\'\"](\d)*.(\d)*[\'\"](\s)*\?>/im,
-          bodyRegExp = /<body[^>]*>\s*([\s\S]+)\s*<\/body>/im,
-          hasLocation = typeof location !== 'undefined' && location.href,
-          defaultProtocol = hasLocation && location.protocol && location.protocol.replace(/\:/, ''),
-          defaultHostName = hasLocation && location.hostname,
-          defaultPort = hasLocation && (location.port || undefined),
-          buildMap = {},
-          masterConfig = (module.config && module.config()) || {};
-  
-      text = {
-          version: '2.0.10',
-  
-          strip: function (content) {
-              //Strips <?xml ...?> declarations so that external SVG and XML
-              //documents can be added to a document without worry. Also, if the string
-              //is an HTML document, only the part inside the body tag is returned.
-              if (content) {
-                  content = content.replace(xmlRegExp, "");
-                  var matches = content.match(bodyRegExp);
-                  if (matches) {
-                      content = matches[1];
-                  }
-              } else {
-                  content = "";
-              }
-              return content;
-          },
-  
-          jsEscape: function (content) {
-              return content.replace(/(['\\])/g, '\\$1')
-                  .replace(/[\f]/g, "\\f")
-                  .replace(/[\b]/g, "\\b")
-                  .replace(/[\n]/g, "\\n")
-                  .replace(/[\t]/g, "\\t")
-                  .replace(/[\r]/g, "\\r")
-                  .replace(/[\u2028]/g, "\\u2028")
-                  .replace(/[\u2029]/g, "\\u2029");
-          },
-  
-          createXhr: masterConfig.createXhr || function () {
-              //Would love to dump the ActiveX crap in here. Need IE 6 to die first.
-              var xhr, i, progId;
-              if (typeof XMLHttpRequest !== "undefined") {
-                  return new XMLHttpRequest();
-              } else if (typeof ActiveXObject !== "undefined") {
-                  for (i = 0; i < 3; i += 1) {
-                      progId = progIds[i];
-                      try {
-                          xhr = new ActiveXObject(progId);
-                      } catch (e) {}
-  
-                      if (xhr) {
-                          progIds = [progId];  // so faster next time
-                          break;
-                      }
-                  }
-              }
-  
-              return xhr;
-          },
-  
-          /**
-           * Parses a resource name into its component parts. Resource names
-           * look like: module/name.ext!strip, where the !strip part is
-           * optional.
-           * @param {String} name the resource name
-           * @returns {Object} with properties "moduleName", "ext" and "strip"
-           * where strip is a boolean.
-           */
-          parseName: function (name) {
-              var modName, ext, temp,
-                  strip = false,
-                  index = name.indexOf("."),
-                  isRelative = name.indexOf('./') === 0 ||
-                               name.indexOf('../') === 0;
-  
-              if (index !== -1 && (!isRelative || index > 1)) {
-                  modName = name.substring(0, index);
-                  ext = name.substring(index + 1, name.length);
-              } else {
-                  modName = name;
-              }
-  
-              temp = ext || modName;
-              index = temp.indexOf("!");
-              if (index !== -1) {
-                  //Pull off the strip arg.
-                  strip = temp.substring(index + 1) === "strip";
-                  temp = temp.substring(0, index);
-                  if (ext) {
-                      ext = temp;
-                  } else {
-                      modName = temp;
-                  }
-              }
-  
-              return {
-                  moduleName: modName,
-                  ext: ext,
-                  strip: strip
-              };
-          },
-  
-          xdRegExp: /^((\w+)\:)?\/\/([^\/\\]+)/,
-  
-          /**
-           * Is an URL on another domain. Only works for browser use, returns
-           * false in non-browser environments. Only used to know if an
-           * optimized .js version of a text resource should be loaded
-           * instead.
-           * @param {String} url
-           * @returns Boolean
-           */
-          useXhr: function (url, protocol, hostname, port) {
-              var uProtocol, uHostName, uPort,
-                  match = text.xdRegExp.exec(url);
-              if (!match) {
-                  return true;
-              }
-              uProtocol = match[2];
-              uHostName = match[3];
-  
-              uHostName = uHostName.split(':');
-              uPort = uHostName[1];
-              uHostName = uHostName[0];
-  
-              return (!uProtocol || uProtocol === protocol) &&
-                     (!uHostName || uHostName.toLowerCase() === hostname.toLowerCase()) &&
-                     ((!uPort && !uHostName) || uPort === port);
-          },
-  
-          finishLoad: function (name, strip, content, onLoad) {
-              content = strip ? text.strip(content) : content;
-              if (masterConfig.isBuild) {
-                  buildMap[name] = content;
-              }
-              onLoad(content);
-          },
-  
-          load: function (name, req, onLoad, config) {
-              //Name has format: some.module.filext!strip
-              //The strip part is optional.
-              //if strip is present, then that means only get the string contents
-              //inside a body tag in an HTML string. For XML/SVG content it means
-              //removing the <?xml ...?> declarations so the content can be inserted
-              //into the current doc without problems.
-  
-              // Do not bother with the work if a build and text will
-              // not be inlined.
-              if (config.isBuild && !config.inlineText) {
-                  onLoad();
-                  return;
-              }
-  
-              masterConfig.isBuild = config.isBuild;
-  
-              var parsed = text.parseName(name),
-                  nonStripName = parsed.moduleName +
-                      (parsed.ext ? '.' + parsed.ext : ''),
-                  url = req.toUrl(nonStripName),
-                  useXhr = (masterConfig.useXhr) ||
-                           text.useXhr;
-  
-              // Do not load if it is an empty: url
-              if (url.indexOf('empty:') === 0) {
-                  onLoad();
-                  return;
-              }
-  
-              //Load the text. Use XHR if possible and in a browser.
-              if (!hasLocation || useXhr(url, defaultProtocol, defaultHostName, defaultPort)) {
-                  text.get(url, function (content) {
-                      text.finishLoad(name, parsed.strip, content, onLoad);
-                  }, function (err) {
-                      if (onLoad.error) {
-                          onLoad.error(err);
-                      }
-                  });
-              } else {
-                  //Need to fetch the resource across domains. Assume
-                  //the resource has been optimized into a JS module. Fetch
-                  //by the module name + extension, but do not include the
-                  //!strip part to avoid file system issues.
-                  req([nonStripName], function (content) {
-                      text.finishLoad(parsed.moduleName + '.' + parsed.ext,
-                                      parsed.strip, content, onLoad);
-                  });
-              }
-          },
-  
-          write: function (pluginName, moduleName, write, config) {
-              if (buildMap.hasOwnProperty(moduleName)) {
-                  var content = text.jsEscape(buildMap[moduleName]);
-                  write.asModule(pluginName + "!" + moduleName,
-                                 "define(function () { return '" +
-                                     content +
-                                 "';});\n");
-              }
-          },
-  
-          writeFile: function (pluginName, moduleName, req, write, config) {
-              var parsed = text.parseName(moduleName),
-                  extPart = parsed.ext ? '.' + parsed.ext : '',
-                  nonStripName = parsed.moduleName + extPart,
-                  //Use a '.js' file name so that it indicates it is a
-                  //script that can be loaded across domains.
-                  fileName = req.toUrl(parsed.moduleName + extPart) + '.js';
-  
-              //Leverage own load() method to load plugin value, but only
-              //write out values that do not have the strip argument,
-              //to avoid any potential issues with ! in file names.
-              text.load(nonStripName, req, function (value) {
-                  //Use own write() method to construct full module value.
-                  //But need to create shell that translates writeFile's
-                  //write() to the right interface.
-                  var textWrite = function (contents) {
-                      return write(fileName, contents);
-                  };
-                  textWrite.asModule = function (moduleName, contents) {
-                      return write.asModule(moduleName, fileName, contents);
-                  };
-  
-                  text.write(pluginName, nonStripName, textWrite, config);
-              }, config);
-          }
-      };
-  
-      if (masterConfig.env === 'node' || (!masterConfig.env &&
-              typeof process !== "undefined" &&
-              process.versions &&
-              !!process.versions.node &&
-              !process.versions['node-webkit'])) {
-          //Using special require.nodeRequire, something added by r.js.
-          fs = require.nodeRequire('fs');
-  
-          text.get = function (url, callback, errback) {
-              try {
-                  var file = fs.readFileSync(url, 'utf8');
-                  //Remove BOM (Byte Mark Order) from utf8 files if it is there.
-                  if (file.indexOf('\uFEFF') === 0) {
-                      file = file.substring(1);
-                  }
-                  callback(file);
-              } catch (e) {
-                  errback(e);
-              }
-          };
-      } else if (masterConfig.env === 'xhr' || (!masterConfig.env &&
-              text.createXhr())) {
-          text.get = function (url, callback, errback, headers) {
-              var xhr = text.createXhr(), header;
-              xhr.open('GET', url, true);
-  
-              //Allow plugins direct access to xhr headers
-              if (headers) {
-                  for (header in headers) {
-                      if (headers.hasOwnProperty(header)) {
-                          xhr.setRequestHeader(header.toLowerCase(), headers[header]);
-                      }
-                  }
-              }
-  
-              //Allow overrides specified in config
-              if (masterConfig.onXhr) {
-                  masterConfig.onXhr(xhr, url);
-              }
-  
-              xhr.onreadystatechange = function (evt) {
-                  var status, err;
-                  //Do not explicitly handle errors, those should be
-                  //visible via console output in the browser.
-                  if (xhr.readyState === 4) {
-                      status = xhr.status;
-                      if (status > 399 && status < 600) {
-                          //An http 4xx or 5xx error. Signal an error.
-                          err = new Error(url + ' HTTP status: ' + status);
-                          err.xhr = xhr;
-                          errback(err);
-                      } else {
-                          callback(xhr.responseText);
-                      }
-  
-                      if (masterConfig.onXhrComplete) {
-                          masterConfig.onXhrComplete(xhr, url);
-                      }
-                  }
-              };
-              xhr.send(null);
-          };
-      } else if (masterConfig.env === 'rhino' || (!masterConfig.env &&
-              typeof Packages !== 'undefined' && typeof java !== 'undefined')) {
-          //Why Java, why is this so awkward?
-          text.get = function (url, callback) {
-              var stringBuffer, line,
-                  encoding = "utf-8",
-                  file = new java.io.File(url),
-                  lineSeparator = java.lang.System.getProperty("line.separator"),
-                  input = new java.io.BufferedReader(new java.io.InputStreamReader(new java.io.FileInputStream(file), encoding)),
-                  content = '';
-              try {
-                  stringBuffer = new java.lang.StringBuffer();
-                  line = input.readLine();
-  
-                  // Byte Order Mark (BOM) - The Unicode Standard, version 3.0, page 324
-                  // http://www.unicode.org/faq/utf_bom.html
-  
-                  // Note that when we use utf-8, the BOM should appear as "EF BB BF", but it doesn't due to this bug in the JDK:
-                  // http://bugs.sun.com/bugdatabase/view_bug.do?bug_id=4508058
-                  if (line && line.length() && line.charAt(0) === 0xfeff) {
-                      // Eat the BOM, since we've already found the encoding on this file,
-                      // and we plan to concatenating this buffer with others; the BOM should
-                      // only appear at the top of a file.
-                      line = line.substring(1);
-                  }
-  
-                  if (line !== null) {
-                      stringBuffer.append(line);
-                  }
-  
-                  while ((line = input.readLine()) !== null) {
-                      stringBuffer.append(lineSeparator);
-                      stringBuffer.append(line);
-                  }
-                  //Make sure we return a JavaScript string and not a Java string.
-                  content = String(stringBuffer.toString()); //String
-              } finally {
-                  input.close();
-              }
-              callback(content);
-          };
-      } else if (masterConfig.env === 'xpconnect' || (!masterConfig.env &&
-              typeof Components !== 'undefined' && Components.classes &&
-              Components.interfaces)) {
-          //Avert your gaze!
-          Cc = Components.classes,
-          Ci = Components.interfaces;
-          Components.utils['import']('resource://gre/modules/FileUtils.jsm');
-          xpcIsWindows = ('@mozilla.org/windows-registry-key;1' in Cc);
-  
-          text.get = function (url, callback) {
-              var inStream, convertStream, fileObj,
-                  readData = {};
-  
-              if (xpcIsWindows) {
-                  url = url.replace(/\//g, '\\');
-              }
-  
-              fileObj = new FileUtils.File(url);
-  
-              //XPCOM, you so crazy
-              try {
-                  inStream = Cc['@mozilla.org/network/file-input-stream;1']
-                             .createInstance(Ci.nsIFileInputStream);
-                  inStream.init(fileObj, 1, 0, false);
-  
-                  convertStream = Cc['@mozilla.org/intl/converter-input-stream;1']
-                                  .createInstance(Ci.nsIConverterInputStream);
-                  convertStream.init(inStream, "utf-8", inStream.available(),
-                  Ci.nsIConverterInputStream.DEFAULT_REPLACEMENT_CHARACTER);
-  
-                  convertStream.readString(inStream.available(), readData);
-                  convertStream.close();
-                  inStream.close();
-                  callback(readData.value);
-              } catch (e) {
-                  throw new Error((fileObj && fileObj.path || '') + ': ' + e);
-              }
-          };
-      }
-      return text;
-  });
-  
-  
-  define('text!tpl/search.html',[],function () { return '<h2 class="sr-only">search</h2>\n<form>\n  <input id="search_reference_field" type="text" class="<%=className%>" value="" placeholder="<%=placeholder%>" aria-label="search reference">\n  <label class="sr-only" for="search_reference_field">Search reference</label>\n</form>\n\n';});
-  
-  
-  define('text!tpl/search_suggestion.html',[],function () { return '<p id="index-<%=idx%>" class="search-suggestion">\n\n  <strong><%=name%></strong>\n\n  <span class="small">\n    <% if (final) { %>\n    constant\n    <% } else if (itemtype) { %>\n    <%=itemtype%> \n    <% } %>\n\n    <% if (className) { %>\n    in <strong><%=className%></strong>\n    <% } %>\n\n    <% if (typeof is_constructor !== \'undefined\' && is_constructor) { %>\n    <strong><span class="glyphicon glyphicon-star"></span> constructor</strong>\n    <% } %>\n  </span>\n\n</p>';});
-  
-  /*!
-   * typeahead.js 0.10.2
-   * https://github.com/twitter/typeahead.js
-   * Copyright 2013-2014 Twitter, Inc. and other contributors; Licensed MIT
-   */
-  define('typeahead',[], function() {
-  
-  //(function($) {
-  
-  
-      var _ = {
-          isMsie: function() {
-              return /(msie|trident)/i.test(navigator.userAgent) ? navigator.userAgent.match(/(msie |rv:)(\d+(.\d+)?)/i)[2] : false;
-          },
-          isBlankString: function(str) {
-              return !str || /^\s*$/.test(str);
-          },
-          escapeRegExChars: function(str) {
-              return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
-          },
-          isString: function(obj) {
-              return typeof obj === "string";
-          },
-          isNumber: function(obj) {
-              return typeof obj === "number";
-          },
-          isArray: $.isArray,
-          isFunction: $.isFunction,
-          isObject: $.isPlainObject,
-          isUndefined: function(obj) {
-              return typeof obj === "undefined";
-          },
-          bind: $.proxy,
-          each: function(collection, cb) {
-              $.each(collection, reverseArgs);
-              function reverseArgs(index, value) {
-                  return cb(value, index);
-              }
-          },
-          map: $.map,
-          filter: $.grep,
-          every: function(obj, test) {
-              var result = true;
-              if (!obj) {
-                  return result;
-              }
-              $.each(obj, function(key, val) {
-                  if (!(result = test.call(null, val, key, obj))) {
-                      return false;
-                  }
-              });
-              return !!result;
-          },
-          some: function(obj, test) {
-              var result = false;
-              if (!obj) {
-                  return result;
-              }
-              $.each(obj, function(key, val) {
-                  if (result = test.call(null, val, key, obj)) {
-                      return false;
-                  }
-              });
-              return !!result;
-          },
-          mixin: $.extend,
-          getUniqueId: function() {
-              var counter = 0;
-              return function() {
-                  return counter++;
-              };
-          }(),
-          templatify: function templatify(obj) {
-              return $.isFunction(obj) ? obj : template;
-              function template() {
-                  return String(obj);
-              }
-          },
-          defer: function(fn) {
-              setTimeout(fn, 0);
-          },
-          debounce: function(func, wait, immediate) {
-              var timeout, result;
-              return function() {
-                  var context = this, args = arguments, later, callNow;
-                  later = function() {
-                      timeout = null;
-                      if (!immediate) {
-                          result = func.apply(context, args);
-                      }
-                  };
-                  callNow = immediate && !timeout;
-                  clearTimeout(timeout);
-                  timeout = setTimeout(later, wait);
-                  if (callNow) {
-                      result = func.apply(context, args);
-                  }
-                  return result;
-              };
-          },
-          throttle: function(func, wait) {
-              var context, args, timeout, result, previous, later;
-              previous = 0;
-              later = function() {
-                  previous = new Date();
-                  timeout = null;
-                  result = func.apply(context, args);
-              };
-              return function() {
-                  var now = new Date(), remaining = wait - (now - previous);
-                  context = this;
-                  args = arguments;
-                  if (remaining <= 0) {
-                      clearTimeout(timeout);
-                      timeout = null;
-                      previous = now;
-                      result = func.apply(context, args);
-                  } else if (!timeout) {
-                      timeout = setTimeout(later, remaining);
-                  }
-                  return result;
-              };
-          },
-          noop: function() {}
-      };
-      var VERSION = "0.10.2";
-      var tokenizers = function(root) {
-          return {
-              nonword: nonword,
-              whitespace: whitespace,
-              obj: {
-                  nonword: getObjTokenizer(nonword),
-                  whitespace: getObjTokenizer(whitespace)
-              }
-          };
-          function whitespace(s) {
-              return s.split(/\s+/);
-          }
-          function nonword(s) {
-              return s.split(/\W+/);
-          }
-          function getObjTokenizer(tokenizer) {
-              return function setKey(key) {
-                  return function tokenize(o) {
-                      return tokenizer(o[key]);
-                  };
-              };
-          }
-      }();
-      var LruCache = function() {
-          function LruCache(maxSize) {
-              this.maxSize = maxSize || 100;
-              this.size = 0;
-              this.hash = {};
-              this.list = new List();
-          }
-          _.mixin(LruCache.prototype, {
-              set: function set(key, val) {
-                  var tailItem = this.list.tail, node;
-                  if (this.size >= this.maxSize) {
-                      this.list.remove(tailItem);
-                      delete this.hash[tailItem.key];
-                  }
-                  if (node = this.hash[key]) {
-                      node.val = val;
-                      this.list.moveToFront(node);
-                  } else {
-                      node = new Node(key, val);
-                      this.list.add(node);
-                      this.hash[key] = node;
-                      this.size++;
-                  }
-              },
-              get: function get(key) {
-                  var node = this.hash[key];
-                  if (node) {
-                      this.list.moveToFront(node);
-                      return node.val;
-                  }
-              }
-          });
-          function List() {
-              this.head = this.tail = null;
-          }
-          _.mixin(List.prototype, {
-              add: function add(node) {
-                  if (this.head) {
-                      node.next = this.head;
-                      this.head.prev = node;
-                  }
-                  this.head = node;
-                  this.tail = this.tail || node;
-              },
-              remove: function remove(node) {
-                  node.prev ? node.prev.next = node.next : this.head = node.next;
-                  node.next ? node.next.prev = node.prev : this.tail = node.prev;
-              },
-              moveToFront: function(node) {
-                  this.remove(node);
-                  this.add(node);
-              }
-          });
-          function Node(key, val) {
-              this.key = key;
-              this.val = val;
-              this.prev = this.next = null;
-          }
-          return LruCache;
-      }();
-      var PersistentStorage = function() {
-          var ls, methods;
-          try {
-              ls = window.localStorage;
-              ls.setItem("~~~", "!");
-              ls.removeItem("~~~");
-          } catch (err) {
-              ls = null;
-          }
-          function PersistentStorage(namespace) {
-              this.prefix = [ "__", namespace, "__" ].join("");
-              this.ttlKey = "__ttl__";
-              this.keyMatcher = new RegExp("^" + this.prefix);
-          }
-          if (ls && window.JSON) {
-              methods = {
-                  _prefix: function(key) {
-                      return this.prefix + key;
-                  },
-                  _ttlKey: function(key) {
-                      return this._prefix(key) + this.ttlKey;
-                  },
-                  get: function(key) {
-                      if (this.isExpired(key)) {
-                          this.remove(key);
-                      }
-                      return decode(ls.getItem(this._prefix(key)));
-                  },
-                  set: function(key, val, ttl) {
-                      if (_.isNumber(ttl)) {
-                          ls.setItem(this._ttlKey(key), encode(now() + ttl));
-                      } else {
-                          ls.removeItem(this._ttlKey(key));
-                      }
-                      return ls.setItem(this._prefix(key), encode(val));
-                  },
-                  remove: function(key) {
-                      ls.removeItem(this._ttlKey(key));
-                      ls.removeItem(this._prefix(key));
-                      return this;
-                  },
-                  clear: function() {
-                      var i, key, keys = [], len = ls.length;
-                      for (i = 0; i < len; i++) {
-                          if ((key = ls.key(i)).match(this.keyMatcher)) {
-                              keys.push(key.replace(this.keyMatcher, ""));
-                          }
-                      }
-                      for (i = keys.length; i--; ) {
-                          this.remove(keys[i]);
-                      }
-                      return this;
-                  },
-                  isExpired: function(key) {
-                      var ttl = decode(ls.getItem(this._ttlKey(key)));
-                      return _.isNumber(ttl) && now() > ttl ? true : false;
-                  }
-              };
-          } else {
-              methods = {
-                  get: _.noop,
-                  set: _.noop,
-                  remove: _.noop,
-                  clear: _.noop,
-                  isExpired: _.noop
-              };
-          }
-          _.mixin(PersistentStorage.prototype, methods);
-          return PersistentStorage;
-          function now() {
-              return new Date().getTime();
-          }
-          function encode(val) {
-              return JSON.stringify(_.isUndefined(val) ? null : val);
-          }
-          function decode(val) {
-              return JSON.parse(val);
-          }
-      }();
-      var Transport = function() {
-          var pendingRequestsCount = 0, pendingRequests = {}, maxPendingRequests = 6, requestCache = new LruCache(10);
-          function Transport(o) {
-              o = o || {};
-              this._send = o.transport ? callbackToDeferred(o.transport) : $.ajax;
-              this._get = o.rateLimiter ? o.rateLimiter(this._get) : this._get;
-          }
-          Transport.setMaxPendingRequests = function setMaxPendingRequests(num) {
-              maxPendingRequests = num;
-          };
-          Transport.resetCache = function clearCache() {
-              requestCache = new LruCache(10);
-          };
-          _.mixin(Transport.prototype, {
-              _get: function(url, o, cb) {
-                  var that = this, jqXhr;
-                  if (jqXhr = pendingRequests[url]) {
-                      jqXhr.done(done).fail(fail);
-                  } else if (pendingRequestsCount < maxPendingRequests) {
-                      pendingRequestsCount++;
-                      pendingRequests[url] = this._send(url, o).done(done).fail(fail).always(always);
-                  } else {
-                      this.onDeckRequestArgs = [].slice.call(arguments, 0);
-                  }
-                  function done(resp) {
-                      cb && cb(null, resp);
-                      requestCache.set(url, resp);
-                  }
-                  function fail() {
-                      cb && cb(true);
-                  }
-                  function always() {
-                      pendingRequestsCount--;
-                      delete pendingRequests[url];
-                      if (that.onDeckRequestArgs) {
-                          that._get.apply(that, that.onDeckRequestArgs);
-                          that.onDeckRequestArgs = null;
-                      }
-                  }
-              },
-              get: function(url, o, cb) {
-                  var resp;
-                  if (_.isFunction(o)) {
-                      cb = o;
-                      o = {};
-                  }
-                  if (resp = requestCache.get(url)) {
-                      _.defer(function() {
-                          cb && cb(null, resp);
-                      });
-                  } else {
-                      this._get(url, o, cb);
-                  }
-                  return !!resp;
-              }
-          });
-          return Transport;
-          function callbackToDeferred(fn) {
-              return function customSendWrapper(url, o) {
-                  var deferred = $.Deferred();
-                  fn(url, o, onSuccess, onError);
-                  return deferred;
-                  function onSuccess(resp) {
-                      _.defer(function() {
-                          deferred.resolve(resp);
-                      });
-                  }
-                  function onError(err) {
-                      _.defer(function() {
-                          deferred.reject(err);
-                      });
-                  }
-              };
-          }
-      }();
-      var SearchIndex = function() {
-          function SearchIndex(o) {
-              o = o || {};
-              if (!o.datumTokenizer || !o.queryTokenizer) {
-                  $.error("datumTokenizer and queryTokenizer are both required");
-              }
-              this.datumTokenizer = o.datumTokenizer;
-              this.queryTokenizer = o.queryTokenizer;
-              this.reset();
-          }
-          _.mixin(SearchIndex.prototype, {
-              bootstrap: function bootstrap(o) {
-                  this.datums = o.datums;
-                  this.trie = o.trie;
-              },
-              add: function(data) {
-                  var that = this;
-                  data = _.isArray(data) ? data : [ data ];
-                  _.each(data, function(datum) {
-                      var id, tokens;
-                      id = that.datums.push(datum) - 1;
-                      tokens = normalizeTokens(that.datumTokenizer(datum));
-                      _.each(tokens, function(token) {
-                          var node, chars, ch;
-                          node = that.trie;
-                          chars = token.split("");
-                          while (ch = chars.shift()) {
-                              node = node.children[ch] || (node.children[ch] = newNode());
-                              node.ids.push(id);
-                          }
-                      });
-                  });
-              },
-              get: function get(query) {
-                  var that = this, tokens, matches;
-                  tokens = normalizeTokens(this.queryTokenizer(query));
-                  _.each(tokens, function(token) {
-                      var node, chars, ch, ids;
-                      if (matches && matches.length === 0) {
-                          return false;
-                      }
-                      node = that.trie;
-                      chars = token.split("");
-                      while (node && (ch = chars.shift())) {
-                          node = node.children[ch];
-                      }
-                      if (node && chars.length === 0) {
-                          ids = node.ids.slice(0);
-                          matches = matches ? getIntersection(matches, ids) : ids;
-                      } else {
-                          matches = [];
-                          return false;
-                      }
-                  });
-                  return matches ? _.map(unique(matches), function(id) {
-                      return that.datums[id];
-                  }) : [];
-              },
-              reset: function reset() {
-                  this.datums = [];
-                  this.trie = newNode();
-              },
-              serialize: function serialize() {
-                  return {
-                      datums: this.datums,
-                      trie: this.trie
-                  };
-              }
-          });
-          return SearchIndex;
-          function normalizeTokens(tokens) {
-              tokens = _.filter(tokens, function(token) {
-                  return !!token;
-              });
-              tokens = _.map(tokens, function(token) {
-                  return token.toLowerCase();
-              });
-              return tokens;
-          }
-          function newNode() {
-              return {
-                  ids: [],
-                  children: {}
-              };
-          }
-          function unique(array) {
-              var seen = {}, uniques = [];
-              for (var i = 0; i < array.length; i++) {
-                  if (!seen[array[i]]) {
-                      seen[array[i]] = true;
-                      uniques.push(array[i]);
-                  }
-              }
-              return uniques;
-          }
-          function getIntersection(arrayA, arrayB) {
-              var ai = 0, bi = 0, intersection = [];
-              arrayA = arrayA.sort(compare);
-              arrayB = arrayB.sort(compare);
-              while (ai < arrayA.length && bi < arrayB.length) {
-                  if (arrayA[ai] < arrayB[bi]) {
-                      ai++;
-                  } else if (arrayA[ai] > arrayB[bi]) {
-                      bi++;
-                  } else {
-                      intersection.push(arrayA[ai]);
-                      ai++;
-                      bi++;
-                  }
-              }
-              return intersection;
-              function compare(a, b) {
-                  return a - b;
-              }
-          }
-      }();
-      var oParser = function() {
-          return {
-              local: getLocal,
-              prefetch: getPrefetch,
-              remote: getRemote
-          };
-          function getLocal(o) {
-              return o.local || null;
-          }
-          function getPrefetch(o) {
-              var prefetch, defaults;
-              defaults = {
-                  url: null,
-                  thumbprint: "",
-                  ttl: 24 * 60 * 60 * 1e3,
-                  filter: null,
-                  ajax: {}
-              };
-              if (prefetch = o.prefetch || null) {
-                  prefetch = _.isString(prefetch) ? {
-                      url: prefetch
-                  } : prefetch;
-                  prefetch = _.mixin(defaults, prefetch);
-                  prefetch.thumbprint = VERSION + prefetch.thumbprint;
-                  prefetch.ajax.type = prefetch.ajax.type || "GET";
-                  prefetch.ajax.dataType = prefetch.ajax.dataType || "json";
-                  !prefetch.url && $.error("prefetch requires url to be set");
-              }
-              return prefetch;
-          }
-          function getRemote(o) {
-              var remote, defaults;
-              defaults = {
-                  url: null,
-                  wildcard: "%QUERY",
-                  replace: null,
-                  rateLimitBy: "debounce",
-                  rateLimitWait: 300,
-                  send: null,
-                  filter: null,
-                  ajax: {}
-              };
-              if (remote = o.remote || null) {
-                  remote = _.isString(remote) ? {
-                      url: remote
-                  } : remote;
-                  remote = _.mixin(defaults, remote);
-                  remote.rateLimiter = /^throttle$/i.test(remote.rateLimitBy) ? byThrottle(remote.rateLimitWait) : byDebounce(remote.rateLimitWait);
-                  remote.ajax.type = remote.ajax.type || "GET";
-                  remote.ajax.dataType = remote.ajax.dataType || "json";
-                  delete remote.rateLimitBy;
-                  delete remote.rateLimitWait;
-                  !remote.url && $.error("remote requires url to be set");
-              }
-              return remote;
-              function byDebounce(wait) {
-                  return function(fn) {
-                      return _.debounce(fn, wait);
-                  };
-              }
-              function byThrottle(wait) {
-                  return function(fn) {
-                      return _.throttle(fn, wait);
-                  };
-              }
-          }
-      }();
-      (function(root) {
-          var old, keys;
-          old = root.Bloodhound;
-          keys = {
-              data: "data",
-              protocol: "protocol",
-              thumbprint: "thumbprint"
-          };
-          root.Bloodhound = Bloodhound;
-          function Bloodhound(o) {
-              if (!o || !o.local && !o.prefetch && !o.remote) {
-                  $.error("one of local, prefetch, or remote is required");
-              }
-              this.limit = o.limit || 5;
-              this.sorter = getSorter(o.sorter);
-              this.dupDetector = o.dupDetector || ignoreDuplicates;
-              this.local = oParser.local(o);
-              this.prefetch = oParser.prefetch(o);
-              this.remote = oParser.remote(o);
-              this.cacheKey = this.prefetch ? this.prefetch.cacheKey || this.prefetch.url : null;
-              this.index = new SearchIndex({
-                  datumTokenizer: o.datumTokenizer,
-                  queryTokenizer: o.queryTokenizer
-              });
-              this.storage = this.cacheKey ? new PersistentStorage(this.cacheKey) : null;
-          }
-          Bloodhound.noConflict = function noConflict() {
-              root.Bloodhound = old;
-              return Bloodhound;
-          };
-          Bloodhound.tokenizers = tokenizers;
-          _.mixin(Bloodhound.prototype, {
-              _loadPrefetch: function loadPrefetch(o) {
-                  var that = this, serialized, deferred;
-                  if (serialized = this._readFromStorage(o.thumbprint)) {
-                      this.index.bootstrap(serialized);
-                      deferred = $.Deferred().resolve();
-                  } else {
-                      deferred = $.ajax(o.url, o.ajax).done(handlePrefetchResponse);
-                  }
-                  return deferred;
-                  function handlePrefetchResponse(resp) {
-                      that.clear();
-                      that.add(o.filter ? o.filter(resp) : resp);
-                      that._saveToStorage(that.index.serialize(), o.thumbprint, o.ttl);
-                  }
-              },
-              _getFromRemote: function getFromRemote(query, cb) {
-                  var that = this, url, uriEncodedQuery;
-                  query = query || "";
-                  uriEncodedQuery = encodeURIComponent(query);
-                  url = this.remote.replace ? this.remote.replace(this.remote.url, query) : this.remote.url.replace(this.remote.wildcard, uriEncodedQuery);
-                  return this.transport.get(url, this.remote.ajax, handleRemoteResponse);
-                  function handleRemoteResponse(err, resp) {
-                      err ? cb([]) : cb(that.remote.filter ? that.remote.filter(resp) : resp);
-                  }
-              },
-              _saveToStorage: function saveToStorage(data, thumbprint, ttl) {
-                  if (this.storage) {
-                      this.storage.set(keys.data, data, ttl);
-                      this.storage.set(keys.protocol, location.protocol, ttl);
-                      this.storage.set(keys.thumbprint, thumbprint, ttl);
-                  }
-              },
-              _readFromStorage: function readFromStorage(thumbprint) {
-                  var stored = {}, isExpired;
-                  if (this.storage) {
-                      stored.data = this.storage.get(keys.data);
-                      stored.protocol = this.storage.get(keys.protocol);
-                      stored.thumbprint = this.storage.get(keys.thumbprint);
-                  }
-                  isExpired = stored.thumbprint !== thumbprint || stored.protocol !== location.protocol;
-                  return stored.data && !isExpired ? stored.data : null;
-              },
-              _initialize: function initialize() {
-                  var that = this, local = this.local, deferred;
-                  deferred = this.prefetch ? this._loadPrefetch(this.prefetch) : $.Deferred().resolve();
-                  local && deferred.done(addLocalToIndex);
-                  this.transport = this.remote ? new Transport(this.remote) : null;
-                  return this.initPromise = deferred.promise();
-                  function addLocalToIndex() {
-                      that.add(_.isFunction(local) ? local() : local);
-                  }
-              },
-              initialize: function initialize(force) {
-                  return !this.initPromise || force ? this._initialize() : this.initPromise;
-              },
-              add: function add(data) {
-                  this.index.add(data);
-              },
-              get: function get(query, cb) {
-                  var that = this, matches = [], cacheHit = false;
-                  matches = this.index.get(query);
-                  matches = this.sorter(matches).slice(0, this.limit);
-                  if (matches.length < this.limit && this.transport) {
-                      cacheHit = this._getFromRemote(query, returnRemoteMatches);
-                  }
-                  if (!cacheHit) {
-                      (matches.length > 0 || !this.transport) && cb && cb(matches);
-                  }
-                  function returnRemoteMatches(remoteMatches) {
-                      var matchesWithBackfill = matches.slice(0);
-                      _.each(remoteMatches, function(remoteMatch) {
-                          var isDuplicate;
-                          isDuplicate = _.some(matchesWithBackfill, function(match) {
-                              return that.dupDetector(remoteMatch, match);
-                          });
-                          !isDuplicate && matchesWithBackfill.push(remoteMatch);
-                          return matchesWithBackfill.length < that.limit;
-                      });
-                      cb && cb(that.sorter(matchesWithBackfill));
-                  }
-              },
-              clear: function clear() {
-                  this.index.reset();
-              },
-              clearPrefetchCache: function clearPrefetchCache() {
-                  this.storage && this.storage.clear();
-              },
-              clearRemoteCache: function clearRemoteCache() {
-                  this.transport && Transport.resetCache();
-              },
-              ttAdapter: function ttAdapter() {
-                  return _.bind(this.get, this);
-              }
-          });
-          return Bloodhound;
-          function getSorter(sortFn) {
-              return _.isFunction(sortFn) ? sort : noSort;
-              function sort(array) {
-                  return array.sort(sortFn);
-              }
-              function noSort(array) {
-                  return array;
-              }
-          }
-          function ignoreDuplicates() {
-              return false;
-          }
-      })(this);
-      var html = {
-          wrapper: '<span class="twitter-typeahead"></span>',
-          dropdown: '<span class="tt-dropdown-menu"></span>',
-          dataset: '<div class="tt-dataset-%CLASS%"></div>',
-          suggestions: '<span class="tt-suggestions"></span>',
-          suggestion: '<div class="tt-suggestion"></div>'
-      };
-      var css = {
-          wrapper: {
-              position: "relative",
-              display: "inline-block"
-          },
-          hint: {
-              position: "absolute",
-              top: "0",
-              left: "0",
-              borderColor: "transparent",
-              boxShadow: "none"
-          },
-          input: {
-              position: "relative",
-              verticalAlign: "top",
-              backgroundColor: "transparent"
-          },
-          inputWithNoHint: {
-              position: "relative",
-              verticalAlign: "top"
-          },
-          dropdown: {
-              position: "absolute",
-              top: "100%",
-              left: "0",
-              zIndex: "100",
-              display: "none"
-          },
-          suggestions: {
-              display: "block"
-          },
-          suggestion: {
-              whiteSpace: "nowrap",
-              cursor: "pointer"
-          },
-          suggestionChild: {
-              whiteSpace: "normal"
-          },
-          ltr: {
-              left: "0",
-              right: "auto"
-          },
-          rtl: {
-              left: "auto",
-              right: " 0"
-          }
-      };
-      if (_.isMsie()) {
-          _.mixin(css.input, {
-              backgroundImage: "url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)"
-          });
-      }
-      if (_.isMsie() && _.isMsie() <= 7) {
-          _.mixin(css.input, {
-              marginTop: "-1px"
-          });
-      }
-      var EventBus = function() {
-          var namespace = "typeahead:";
-          function EventBus(o) {
-              if (!o || !o.el) {
-                  $.error("EventBus initialized without el");
-              }
-              this.$el = $(o.el);
-          }
-          _.mixin(EventBus.prototype, {
-              trigger: function(type) {
-                  var args = [].slice.call(arguments, 1);
-                  this.$el.trigger(namespace + type, args);
-              }
-          });
-          return EventBus;
-      }();
-      var EventEmitter = function() {
-          var splitter = /\s+/, nextTick = getNextTick();
-          return {
-              onSync: onSync,
-              onAsync: onAsync,
-              off: off,
-              trigger: trigger
-          };
-          function on(method, types, cb, context) {
-              var type;
-              if (!cb) {
-                  return this;
-              }
-              types = types.split(splitter);
-              cb = context ? bindContext(cb, context) : cb;
-              this._callbacks = this._callbacks || {};
-              while (type = types.shift()) {
-                  this._callbacks[type] = this._callbacks[type] || {
-                      sync: [],
-                      async: []
-                  };
-                  this._callbacks[type][method].push(cb);
-              }
-              return this;
-          }
-          function onAsync(types, cb, context) {
-              return on.call(this, "async", types, cb, context);
-          }
-          function onSync(types, cb, context) {
-              return on.call(this, "sync", types, cb, context);
-          }
-          function off(types) {
-              var type;
-              if (!this._callbacks) {
-                  return this;
-              }
-              types = types.split(splitter);
-              while (type = types.shift()) {
-                  delete this._callbacks[type];
-              }
-              return this;
-          }
-          function trigger(types) {
-              var type, callbacks, args, syncFlush, asyncFlush;
-              if (!this._callbacks) {
-                  return this;
-              }
-              types = types.split(splitter);
-              args = [].slice.call(arguments, 1);
-              while ((type = types.shift()) && (callbacks = this._callbacks[type])) {
-                  syncFlush = getFlush(callbacks.sync, this, [ type ].concat(args));
-                  asyncFlush = getFlush(callbacks.async, this, [ type ].concat(args));
-                  syncFlush() && nextTick(asyncFlush);
-              }
-              return this;
-          }
-          function getFlush(callbacks, context, args) {
-              return flush;
-              function flush() {
-                  var cancelled;
-                  for (var i = 0; !cancelled && i < callbacks.length; i += 1) {
-                      cancelled = callbacks[i].apply(context, args) === false;
-                  }
-                  return !cancelled;
-              }
-          }
-          function getNextTick() {
-              var nextTickFn;
-              if (window.setImmediate) {
-                  nextTickFn = function nextTickSetImmediate(fn) {
-                      setImmediate(function() {
-                          fn();
-                      });
-                  };
-              } else {
-                  nextTickFn = function nextTickSetTimeout(fn) {
-                      setTimeout(function() {
-                          fn();
-                      }, 0);
-                  };
-              }
-              return nextTickFn;
-          }
-          function bindContext(fn, context) {
-              return fn.bind ? fn.bind(context) : function() {
-                  fn.apply(context, [].slice.call(arguments, 0));
-              };
-          }
-      }();
-      var highlight = function(doc) {
-          var defaults = {
-              node: null,
-              pattern: null,
-              tagName: "strong",
-              className: null,
-              wordsOnly: false,
-              caseSensitive: false
-          };
-          return function hightlight(o) {
-              var regex;
-              o = _.mixin({}, defaults, o);
-              if (!o.node || !o.pattern) {
-                  return;
-              }
-              o.pattern = _.isArray(o.pattern) ? o.pattern : [ o.pattern ];
-              regex = getRegex(o.pattern, o.caseSensitive, o.wordsOnly);
-              traverse(o.node, hightlightTextNode);
-              function hightlightTextNode(textNode) {
-                  var match, patternNode;
-                  if (match = regex.exec(textNode.data)) {
-                      wrapperNode = doc.createElement(o.tagName);
-                      o.className && (wrapperNode.className = o.className);
-                      patternNode = textNode.splitText(match.index);
-                      patternNode.splitText(match[0].length);
-                      wrapperNode.appendChild(patternNode.cloneNode(true));
-                      textNode.parentNode.replaceChild(wrapperNode, patternNode);
-                  }
-                  return !!match;
-              }
-              function traverse(el, hightlightTextNode) {
-                  var childNode, TEXT_NODE_TYPE = 3;
-                  for (var i = 0; i < el.childNodes.length; i++) {
-                      childNode = el.childNodes[i];
-                      if (childNode.nodeType === TEXT_NODE_TYPE) {
-                          i += hightlightTextNode(childNode) ? 1 : 0;
-                      } else {
-                          traverse(childNode, hightlightTextNode);
-                      }
-                  }
-              }
-          };
-          function getRegex(patterns, caseSensitive, wordsOnly) {
-              var escapedPatterns = [], regexStr;
-              for (var i = 0; i < patterns.length; i++) {
-                  escapedPatterns.push(_.escapeRegExChars(patterns[i]));
-              }
-              regexStr = wordsOnly ? "\\b(" + escapedPatterns.join("|") + ")\\b" : "(" + escapedPatterns.join("|") + ")";
-              return caseSensitive ? new RegExp(regexStr) : new RegExp(regexStr, "i");
-          }
-      }(window.document);
-      var Input = function() {
-          var specialKeyCodeMap;
-          specialKeyCodeMap = {
-              9: "tab",
-              27: "esc",
-              37: "left",
-              39: "right",
-              13: "enter",
-              38: "up",
-              40: "down"
-          };
-          function Input(o) {
-              var that = this, onBlur, onFocus, onKeydown, onInput;
-              o = o || {};
-              if (!o.input) {
-                  $.error("input is missing");
-              }
-              onBlur = _.bind(this._onBlur, this);
-              onFocus = _.bind(this._onFocus, this);
-              onKeydown = _.bind(this._onKeydown, this);
-              onInput = _.bind(this._onInput, this);
-              this.$hint = $(o.hint);
-              this.$input = $(o.input).on("blur.tt", onBlur).on("focus.tt", onFocus).on("keydown.tt", onKeydown);
-              if (this.$hint.length === 0) {
-                  this.setHint = this.getHint = this.clearHint = this.clearHintIfInvalid = _.noop;
-              }
-              if (!_.isMsie()) {
-                  this.$input.on("input.tt", onInput);
-              } else {
-                  this.$input.on("keydown.tt keypress.tt cut.tt paste.tt", function($e) {
-                      if (specialKeyCodeMap[$e.which || $e.keyCode]) {
-                          return;
-                      }
-                      _.defer(_.bind(that._onInput, that, $e));
-                  });
-              }
-              this.query = this.$input.val();
-              this.$overflowHelper = buildOverflowHelper(this.$input);
-          }
-          Input.normalizeQuery = function(str) {
-              return (str || "").replace(/^\s*/g, "").replace(/\s{2,}/g, " ");
-          };
-          _.mixin(Input.prototype, EventEmitter, {
-              _onBlur: function onBlur() {
-                  this.resetInputValue();
-                  this.trigger("blurred");
-              },
-              _onFocus: function onFocus() {
-                  this.trigger("focused");
-              },
-              _onKeydown: function onKeydown($e) {
-                  var keyName = specialKeyCodeMap[$e.which || $e.keyCode];
-                  this._managePreventDefault(keyName, $e);
-                  if (keyName && this._shouldTrigger(keyName, $e)) {
-                      this.trigger(keyName + "Keyed", $e);
-                  }
-              },
-              _onInput: function onInput() {
-                  this._checkInputValue();
-              },
-              _managePreventDefault: function managePreventDefault(keyName, $e) {
-                  var preventDefault, hintValue, inputValue;
-                  switch (keyName) {
-                    case "tab":
-                      hintValue = this.getHint();
-                      inputValue = this.getInputValue();
-                      preventDefault = hintValue && hintValue !== inputValue && !withModifier($e);
-                      break;
-  
-                    case "up":
-                    case "down":
-                      preventDefault = !withModifier($e);
-                      break;
-  
-                    default:
-                      preventDefault = false;
-                  }
-                  preventDefault && $e.preventDefault();
-              },
-              _shouldTrigger: function shouldTrigger(keyName, $e) {
-                  var trigger;
-                  switch (keyName) {
-                    case "tab":
-                      trigger = !withModifier($e);
-                      break;
-  
-                    default:
-                      trigger = true;
-                  }
-                  return trigger;
-              },
-              _checkInputValue: function checkInputValue() {
-                  var inputValue, areEquivalent, hasDifferentWhitespace;
-                  inputValue = this.getInputValue();
-                  areEquivalent = areQueriesEquivalent(inputValue, this.query);
-                  hasDifferentWhitespace = areEquivalent ? this.query.length !== inputValue.length : false;
-                  if (!areEquivalent) {
-                      this.trigger("queryChanged", this.query = inputValue);
-                  } else if (hasDifferentWhitespace) {
-                      this.trigger("whitespaceChanged", this.query);
-                  }
-              },
-              focus: function focus() {
-                  this.$input.focus();
-              },
-              blur: function blur() {
-                  this.$input.blur();
-              },
-              getQuery: function getQuery() {
-                  return this.query;
-              },
-              setQuery: function setQuery(query) {
-                  this.query = query;
-              },
-              getInputValue: function getInputValue() {
-                  return this.$input.val();
-              },
-              setInputValue: function setInputValue(value, silent) {
-                  this.$input.val(value);
-                  silent ? this.clearHint() : this._checkInputValue();
-              },
-              resetInputValue: function resetInputValue() {
-                  this.setInputValue(this.query, true);
-              },
-              getHint: function getHint() {
-                  return this.$hint.val();
-              },
-              setHint: function setHint(value) {
-                  this.$hint.val(value);
-              },
-              clearHint: function clearHint() {
-                  this.setHint("");
-              },
-              clearHintIfInvalid: function clearHintIfInvalid() {
-                  var val, hint, valIsPrefixOfHint, isValid;
-                  val = this.getInputValue();
-                  hint = this.getHint();
-                  valIsPrefixOfHint = val !== hint && hint.indexOf(val) === 0;
-                  isValid = val !== "" && valIsPrefixOfHint && !this.hasOverflow();
-                  !isValid && this.clearHint();
-              },
-              getLanguageDirection: function getLanguageDirection() {
-                  return (this.$input.css("direction") || "ltr").toLowerCase();
-              },
-              hasOverflow: function hasOverflow() {
-                  var constraint = this.$input.width() - 2;
-                  this.$overflowHelper.text(this.getInputValue());
-                  return this.$overflowHelper.width() >= constraint;
-              },
-              isCursorAtEnd: function() {
-                  var valueLength, selectionStart, range;
-                  valueLength = this.$input.val().length;
-                  selectionStart = this.$input[0].selectionStart;
-                  if (_.isNumber(selectionStart)) {
-                      return selectionStart === valueLength;
-                  } else if (document.selection) {
-                      range = document.selection.createRange();
-                      range.moveStart("character", -valueLength);
-                      return valueLength === range.text.length;
-                  }
-                  return true;
-              },
-              destroy: function destroy() {
-                  this.$hint.off(".tt");
-                  this.$input.off(".tt");
-                  this.$hint = this.$input = this.$overflowHelper = null;
-              }
-          });
-          return Input;
-          function buildOverflowHelper($input) {
-              return $('<pre aria-hidden="true"></pre>').css({
-                  position: "absolute",
-                  visibility: "hidden",
-                  whiteSpace: "pre",
-                  fontFamily: $input.css("font-family"),
-                  fontSize: $input.css("font-size"),
-                  fontStyle: $input.css("font-style"),
-                  fontVariant: $input.css("font-variant"),
-                  fontWeight: $input.css("font-weight"),
-                  wordSpacing: $input.css("word-spacing"),
-                  letterSpacing: $input.css("letter-spacing"),
-                  textIndent: $input.css("text-indent"),
-                  textRendering: $input.css("text-rendering"),
-                  textTransform: $input.css("text-transform")
-              }).insertAfter($input);
-          }
-          function areQueriesEquivalent(a, b) {
-              return Input.normalizeQuery(a) === Input.normalizeQuery(b);
-          }
-          function withModifier($e) {
-              return $e.altKey || $e.ctrlKey || $e.metaKey || $e.shiftKey;
-          }
-      }();
-      var Dataset = function() {
-          var datasetKey = "ttDataset", valueKey = "ttValue", datumKey = "ttDatum";
-          function Dataset(o) {
-              o = o || {};
-              o.templates = o.templates || {};
-              if (!o.source) {
-                  $.error("missing source");
-              }
-              if (o.name && !isValidName(o.name)) {
-                  $.error("invalid dataset name: " + o.name);
-              }
-              this.query = null;
-              this.highlight = !!o.highlight;
-              this.name = o.name || _.getUniqueId();
-              this.source = o.source;
-              this.displayFn = getDisplayFn(o.display || o.displayKey);
-              this.templates = getTemplates(o.templates, this.displayFn);
-              this.$el = $(html.dataset.replace("%CLASS%", this.name));
-          }
-          Dataset.extractDatasetName = function extractDatasetName(el) {
-              return $(el).data(datasetKey);
-          };
-          Dataset.extractValue = function extractDatum(el) {
-              return $(el).data(valueKey);
-          };
-          Dataset.extractDatum = function extractDatum(el) {
-              return $(el).data(datumKey);
-          };
-          _.mixin(Dataset.prototype, EventEmitter, {
-              _render: function render(query, suggestions) {
-                  if (!this.$el) {
-                      return;
-                  }
-                  var that = this, hasSuggestions;
-                  this.$el.empty();
-                  hasSuggestions = suggestions && suggestions.length;
-                  if (!hasSuggestions && this.templates.empty) {
-                      this.$el.html(getEmptyHtml()).prepend(that.templates.header ? getHeaderHtml() : null).append(that.templates.footer ? getFooterHtml() : null);
-                  } else if (hasSuggestions) {
-                      this.$el.html(getSuggestionsHtml()).prepend(that.templates.header ? getHeaderHtml() : null).append(that.templates.footer ? getFooterHtml() : null);
-                  }
-                  this.trigger("rendered");
-                  function getEmptyHtml() {
-                      return that.templates.empty({
-                          query: query,
-                          isEmpty: true
-                      });
-                  }
-                  function getSuggestionsHtml() {
-                      var $suggestions, nodes;
-                      $suggestions = $(html.suggestions).css(css.suggestions);
-                      nodes = _.map(suggestions, getSuggestionNode);
-                      $suggestions.append.apply($suggestions, nodes);
-                      that.highlight && highlight({
-                          node: $suggestions[0],
-                          pattern: query
-                      });
-                      return $suggestions;
-                      function getSuggestionNode(suggestion) {
-                          var $el;
-                          $el = $(html.suggestion).append(that.templates.suggestion(suggestion)).data(datasetKey, that.name).data(valueKey, that.displayFn(suggestion)).data(datumKey, suggestion);
-                          $el.children().each(function() {
-                              $(this).css(css.suggestionChild);
-                          });
-                          return $el;
-                      }
-                  }
-                  function getHeaderHtml() {
-                      return that.templates.header({
-                          query: query,
-                          isEmpty: !hasSuggestions
-                      });
-                  }
-                  function getFooterHtml() {
-                      return that.templates.footer({
-                          query: query,
-                          isEmpty: !hasSuggestions
-                      });
-                  }
-              },
-              getRoot: function getRoot() {
-                  return this.$el;
-              },
-              update: function update(query) {
-                  var that = this;
-                  this.query = query;
-                  this.canceled = false;
-                  this.source(query, render);
-                  function render(suggestions) {
-                      if (!that.canceled && query === that.query) {
-                          that._render(query, suggestions);
-                      }
-                  }
-              },
-              cancel: function cancel() {
-                  this.canceled = true;
-              },
-              clear: function clear() {
-                  this.cancel();
-                  this.$el.empty();
-                  this.trigger("rendered");
-              },
-              isEmpty: function isEmpty() {
-                  return this.$el.is(":empty");
-              },
-              destroy: function destroy() {
-                  this.$el = null;
-              }
-          });
-          return Dataset;
-          function getDisplayFn(display) {
-              display = display || "value";
-              return _.isFunction(display) ? display : displayFn;
-              function displayFn(obj) {
-                  return obj[display];
-              }
-          }
-          function getTemplates(templates, displayFn) {
-              return {
-                  empty: templates.empty && _.templatify(templates.empty),
-                  header: templates.header && _.templatify(templates.header),
-                  footer: templates.footer && _.templatify(templates.footer),
-                  suggestion: templates.suggestion || suggestionTemplate
-              };
-              function suggestionTemplate(context) {
-                  return "<p>" + displayFn(context) + "</p>";
-              }
-          }
-          function isValidName(str) {
-              return /^[_a-zA-Z0-9-]+$/.test(str);
-          }
-      }();
-      var Dropdown = function() {
-          function Dropdown(o) {
-              var that = this, onSuggestionClick, onSuggestionMouseEnter, onSuggestionMouseLeave;
-              o = o || {};
-              if (!o.menu) {
-                  $.error("menu is required");
-              }
-              this.isOpen = false;
-              this.isEmpty = true;
-              this.datasets = _.map(o.datasets, initializeDataset);
-              onSuggestionClick = _.bind(this._onSuggestionClick, this);
-              onSuggestionMouseEnter = _.bind(this._onSuggestionMouseEnter, this);
-              onSuggestionMouseLeave = _.bind(this._onSuggestionMouseLeave, this);
-              this.$menu = $(o.menu).on("click.tt", ".tt-suggestion", onSuggestionClick).on("mouseenter.tt", ".tt-suggestion", onSuggestionMouseEnter).on("mouseleave.tt", ".tt-suggestion", onSuggestionMouseLeave);
-              _.each(this.datasets, function(dataset) {
-                  that.$menu.append(dataset.getRoot());
-                  dataset.onSync("rendered", that._onRendered, that);
-              });
-          }
-          _.mixin(Dropdown.prototype, EventEmitter, {
-              _onSuggestionClick: function onSuggestionClick($e) {
-                  this.trigger("suggestionClicked", $($e.currentTarget));
-              },
-              _onSuggestionMouseEnter: function onSuggestionMouseEnter($e) {
-                  this._removeCursor();
-                  this._setCursor($($e.currentTarget), true);
-              },
-              _onSuggestionMouseLeave: function onSuggestionMouseLeave() {
-                  this._removeCursor();
-              },
-              _onRendered: function onRendered() {
-                  this.isEmpty = _.every(this.datasets, isDatasetEmpty);
-                  this.isEmpty ? this._hide() : this.isOpen && this._show();
-                  this.trigger("datasetRendered");
-                  function isDatasetEmpty(dataset) {
-                      return dataset.isEmpty();
-                  }
-              },
-              _hide: function() {
-                  this.$menu.hide();
-              },
-              _show: function() {
-                  this.$menu.css("display", "block");
-              },
-              _getSuggestions: function getSuggestions() {
-                  return this.$menu.find(".tt-suggestion");
-              },
-              _getCursor: function getCursor() {
-                  return this.$menu.find(".tt-cursor").first();
-              },
-              _setCursor: function setCursor($el, silent) {
-                  $el.first().addClass("tt-cursor");
-                  !silent && this.trigger("cursorMoved");
-              },
-              _removeCursor: function removeCursor() {
-                  this._getCursor().removeClass("tt-cursor");
-              },
-              _moveCursor: function moveCursor(increment) {
-                  var $suggestions, $oldCursor, newCursorIndex, $newCursor;
-                  if (!this.isOpen) {
-                      return;
-                  }
-                  $oldCursor = this._getCursor();
-                  $suggestions = this._getSuggestions();
-                  this._removeCursor();
-                  newCursorIndex = $suggestions.index($oldCursor) + increment;
-                  newCursorIndex = (newCursorIndex + 1) % ($suggestions.length + 1) - 1;
-                  if (newCursorIndex === -1) {
-                      this.trigger("cursorRemoved");
-                      return;
-                  } else if (newCursorIndex < -1) {
-                      newCursorIndex = $suggestions.length - 1;
-                  }
-                  this._setCursor($newCursor = $suggestions.eq(newCursorIndex));
-                  this._ensureVisible($newCursor);
-              },
-              _ensureVisible: function ensureVisible($el) {
-                  var elTop, elBottom, menuScrollTop, menuHeight;
-                  elTop = $el.position().top;
-                  elBottom = elTop + $el.outerHeight(true);
-                  menuScrollTop = this.$menu.scrollTop();
-                  menuHeight = this.$menu.height() + parseInt(this.$menu.css("paddingTop"), 10) + parseInt(this.$menu.css("paddingBottom"), 10);
-                  if (elTop < 0) {
-                      this.$menu.scrollTop(menuScrollTop + elTop);
-                  } else if (menuHeight < elBottom) {
-                      this.$menu.scrollTop(menuScrollTop + (elBottom - menuHeight));
-                  }
-              },
-              close: function close() {
-                  if (this.isOpen) {
-                      this.isOpen = false;
-                      this._removeCursor();
-                      this._hide();
-                      this.trigger("closed");
-                  }
-              },
-              open: function open() {
-                  if (!this.isOpen) {
-                      this.isOpen = true;
-                      !this.isEmpty && this._show();
-                      this.trigger("opened");
-                  }
-              },
-              setLanguageDirection: function setLanguageDirection(dir) {
-                  this.$menu.css(dir === "ltr" ? css.ltr : css.rtl);
-              },
-              moveCursorUp: function moveCursorUp() {
-                  this._moveCursor(-1);
-              },
-              moveCursorDown: function moveCursorDown() {
-                  this._moveCursor(+1);
-              },
-              getDatumForSuggestion: function getDatumForSuggestion($el) {
-                  var datum = null;
-                  if ($el.length) {
-                      datum = {
-                          raw: Dataset.extractDatum($el),
-                          value: Dataset.extractValue($el),
-                          datasetName: Dataset.extractDatasetName($el)
-                      };
-                  }
-                  return datum;
-              },
-              getDatumForCursor: function getDatumForCursor() {
-                  return this.getDatumForSuggestion(this._getCursor().first());
-              },
-              getDatumForTopSuggestion: function getDatumForTopSuggestion() {
-                  return this.getDatumForSuggestion(this._getSuggestions().first());
-              },
-              update: function update(query) {
-                  _.each(this.datasets, updateDataset);
-                  function updateDataset(dataset) {
-                      dataset.update(query);
-                  }
-              },
-              empty: function empty() {
-                  _.each(this.datasets, clearDataset);
-                  this.isEmpty = true;
-                  function clearDataset(dataset) {
-                      dataset.clear();
-                  }
-              },
-              isVisible: function isVisible() {
-                  return this.isOpen && !this.isEmpty;
-              },
-              destroy: function destroy() {
-                  this.$menu.off(".tt");
-                  this.$menu = null;
-                  _.each(this.datasets, destroyDataset);
-                  function destroyDataset(dataset) {
-                      dataset.destroy();
-                  }
-              }
-          });
-          return Dropdown;
-          function initializeDataset(oDataset) {
-              return new Dataset(oDataset);
-          }
-      }();
-      var Typeahead = function() {
-          var attrsKey = "ttAttrs";
-          function Typeahead(o) {
-              var $menu, $input, $hint;
-              o = o || {};
-              if (!o.input) {
-                  $.error("missing input");
-              }
-              this.isActivated = false;
-              this.autoselect = !!o.autoselect;
-              this.minLength = _.isNumber(o.minLength) ? o.minLength : 1;
-              this.$node = buildDomStructure(o.input, o.withHint);
-              $menu = this.$node.find(".tt-dropdown-menu");
-              $input = this.$node.find(".tt-input");
-              $hint = this.$node.find(".tt-hint");
-              $input.on("blur.tt", function($e) {
-                  var active, isActive, hasActive;
-                  active = document.activeElement;
-                  isActive = $menu.is(active);
-                  hasActive = $menu.has(active).length > 0;
-                  if (_.isMsie() && (isActive || hasActive)) {
-                      $e.preventDefault();
-                      $e.stopImmediatePropagation();
-                      _.defer(function() {
-                          $input.focus();
-                      });
-                  }
-              });
-              $menu.on("mousedown.tt", function($e) {
-                  $e.preventDefault();
-              });
-              this.eventBus = o.eventBus || new EventBus({
-                  el: $input
-              });
-              this.dropdown = new Dropdown({
-                  menu: $menu,
-                  datasets: o.datasets
-              }).onSync("suggestionClicked", this._onSuggestionClicked, this).onSync("cursorMoved", this._onCursorMoved, this).onSync("cursorRemoved", this._onCursorRemoved, this).onSync("opened", this._onOpened, this).onSync("closed", this._onClosed, this).onAsync("datasetRendered", this._onDatasetRendered, this);
-              this.input = new Input({
-                  input: $input,
-                  hint: $hint
-              }).onSync("focused", this._onFocused, this).onSync("blurred", this._onBlurred, this).onSync("enterKeyed", this._onEnterKeyed, this).onSync("tabKeyed", this._onTabKeyed, this).onSync("escKeyed", this._onEscKeyed, this).onSync("upKeyed", this._onUpKeyed, this).onSync("downKeyed", this._onDownKeyed, this).onSync("leftKeyed", this._onLeftKeyed, this).onSync("rightKeyed", this._onRightKeyed, this).onSync("queryChanged", this._onQueryChanged, this).onSync("whitespaceChanged", this._onWhitespaceChanged, this);
-              this._setLanguageDirection();
-          }
-          _.mixin(Typeahead.prototype, {
-              _onSuggestionClicked: function onSuggestionClicked(type, $el) {
-                  var datum;
-                  if (datum = this.dropdown.getDatumForSuggestion($el)) {
-                      this._select(datum);
-                  }
-              },
-              _onCursorMoved: function onCursorMoved() {
-                  var datum = this.dropdown.getDatumForCursor();
-                  this.input.setInputValue(datum.value, true);
-                  this.eventBus.trigger("cursorchanged", datum.raw, datum.datasetName);
-              },
-              _onCursorRemoved: function onCursorRemoved() {
-                  this.input.resetInputValue();
-                  this._updateHint();
-              },
-              _onDatasetRendered: function onDatasetRendered() {
-                  this._updateHint();
-              },
-              _onOpened: function onOpened() {
-                  this._updateHint();
-                  this.eventBus.trigger("opened");
-              },
-              _onClosed: function onClosed() {
-                  this.input.clearHint();
-                  this.eventBus.trigger("closed");
-              },
-              _onFocused: function onFocused() {
-                  this.isActivated = true;
-                  this.dropdown.open();
-              },
-              _onBlurred: function onBlurred() {
-                  this.isActivated = false;
-                  this.dropdown.empty();
-                  this.dropdown.close();
-                  this.setVal("", true); //LM
-              },
-              _onEnterKeyed: function onEnterKeyed(type, $e) {
-                  var cursorDatum, topSuggestionDatum;
-                  cursorDatum = this.dropdown.getDatumForCursor();
-                  topSuggestionDatum = this.dropdown.getDatumForTopSuggestion();
-                  if (cursorDatum) {
-                      this._select(cursorDatum);
-                      $e.preventDefault();
-                  } else if (this.autoselect && topSuggestionDatum) {
-                      this._select(topSuggestionDatum);
-                      $e.preventDefault();
-                  }
-              },
-              _onTabKeyed: function onTabKeyed(type, $e) {
-                  var datum;
-                  if (datum = this.dropdown.getDatumForCursor()) {
-                      this._select(datum);
-                      $e.preventDefault();
-                  } else {
-                      this._autocomplete(true);
-                  }
-              },
-              _onEscKeyed: function onEscKeyed() {
-                  this.dropdown.close();
-                  this.input.resetInputValue();
-              },
-              _onUpKeyed: function onUpKeyed() {
-                  var query = this.input.getQuery();
-                  this.dropdown.isEmpty && query.length >= this.minLength ? this.dropdown.update(query) : this.dropdown.moveCursorUp();
-                  this.dropdown.open();
-              },
-              _onDownKeyed: function onDownKeyed() {
-                  var query = this.input.getQuery();
-                  this.dropdown.isEmpty && query.length >= this.minLength ? this.dropdown.update(query) : this.dropdown.moveCursorDown();
-                  this.dropdown.open();
-              },
-              _onLeftKeyed: function onLeftKeyed() {
-                  this.dir === "rtl" && this._autocomplete();
-              },
-              _onRightKeyed: function onRightKeyed() {
-                  this.dir === "ltr" && this._autocomplete();
-              },
-              _onQueryChanged: function onQueryChanged(e, query) {
-                  this.input.clearHintIfInvalid();
-                  query.length >= this.minLength ? this.dropdown.update(query) : this.dropdown.empty();
-                  this.dropdown.open();
-                  this._setLanguageDirection();
-              },
-              _onWhitespaceChanged: function onWhitespaceChanged() {
-                  this._updateHint();
-                  this.dropdown.open();
-              },
-              _setLanguageDirection: function setLanguageDirection() {
-                  var dir;
-                  if (this.dir !== (dir = this.input.getLanguageDirection())) {
-                      this.dir = dir;
-                      this.$node.css("direction", dir);
-                      this.dropdown.setLanguageDirection(dir);
-                  }
-              },
-              _updateHint: function updateHint() {
-                  var datum, val, query, escapedQuery, frontMatchRegEx, match;
-                  datum = this.dropdown.getDatumForTopSuggestion();
-                  if (datum && this.dropdown.isVisible() && !this.input.hasOverflow()) {
-                      val = this.input.getInputValue();
-                      query = Input.normalizeQuery(val);
-                      escapedQuery = _.escapeRegExChars(query);
-                      frontMatchRegEx = new RegExp("^(?:" + escapedQuery + ")(.+$)", "i");
-                      match = frontMatchRegEx.exec(datum.value);
-                      match ? this.input.setHint(val + match[1]) : this.input.clearHint();
-                  } else {
-                      this.input.clearHint();
-                  }
-              },
-              _autocomplete: function autocomplete(laxCursor) {
-                  var hint, query, isCursorAtEnd, datum;
-                  hint = this.input.getHint();
-                  query = this.input.getQuery();
-                  isCursorAtEnd = laxCursor || this.input.isCursorAtEnd();
-                  if (hint && query !== hint && isCursorAtEnd) {
-                      datum = this.dropdown.getDatumForTopSuggestion();
-                      datum && this.input.setInputValue(datum.value);
-                      this.eventBus.trigger("autocompleted", datum.raw, datum.datasetName);
-                  }
-              },
-              _select: function select(datum) {
-                  this.input.setQuery(datum.value);
-                  this.input.setInputValue(datum.value, true);
-                  this._setLanguageDirection();
-                  this.eventBus.trigger("selected", datum.raw, datum.datasetName);
-                  this.dropdown.close();
-                  _.defer(_.bind(this.dropdown.empty, this.dropdown));
-              },
-              open: function open() {
-                  this.dropdown.open();
-              },
-              close: function close() {
-                  this.dropdown.close();
-              },
-              setVal: function setVal(val) {
-                  if (this.isActivated) {
-                      this.input.setInputValue(val);
-                  } else {
-                      this.input.setQuery(val);
-                      this.input.setInputValue(val, true);
-                  }
-                  this._setLanguageDirection();
-              },
-              getVal: function getVal() {
-                  return this.input.getQuery();
-              },
-              destroy: function destroy() {
-                  this.input.destroy();
-                  this.dropdown.destroy();
-                  destroyDomStructure(this.$node);
-                  this.$node = null;
-              }
-          });
-          return Typeahead;
-          function buildDomStructure(input, withHint) {
-              var $input, $wrapper, $dropdown, $hint;
-              $input = $(input);
-              $wrapper = $(html.wrapper).css(css.wrapper);
-              $dropdown = $(html.dropdown).css(css.dropdown);
-              $hint = $input.clone().css(css.hint).css(getBackgroundStyles($input));
-              $hint.val("").removeData().addClass("tt-hint").removeAttr("id name placeholder").prop("disabled", true).attr({
-                  autocomplete: "off",
-                  spellcheck: "false"
-              });
-              $input.data(attrsKey, {
-                  dir: $input.attr("dir"),
-                  autocomplete: $input.attr("autocomplete"),
-                  spellcheck: $input.attr("spellcheck"),
-                  style: $input.attr("style")
-              });
-              $input.addClass("tt-input").attr({
-                  autocomplete: "off",
-                  spellcheck: false
-              }).css(withHint ? css.input : css.inputWithNoHint);
-              try {
-                  !$input.attr("dir") && $input.attr("dir", "auto");
-              } catch (e) {}
-              return $input.wrap($wrapper).parent().prepend(withHint ? $hint : null).append($dropdown);
-          }
-          function getBackgroundStyles($el) {
-              return {
-                  backgroundAttachment: $el.css("background-attachment"),
-                  backgroundClip: $el.css("background-clip"),
-                  backgroundColor: $el.css("background-color"),
-                  backgroundImage: $el.css("background-image"),
-                  backgroundOrigin: $el.css("background-origin"),
-                  backgroundPosition: $el.css("background-position"),
-                  backgroundRepeat: $el.css("background-repeat"),
-                  backgroundSize: $el.css("background-size")
-              };
-          }
-          function destroyDomStructure($node) {
-              var $input = $node.find(".tt-input");
-              _.each($input.data(attrsKey), function(val, key) {
-                  _.isUndefined(val) ? $input.removeAttr(key) : $input.attr(key, val);
-              });
-              $input.detach().removeData(attrsKey).removeClass("tt-input").insertAfter($node);
-              $node.remove();
-          }
-      }();
-      (function() {
-          var old, typeaheadKey, methods;
-          old = $.fn.typeahead;
-          typeaheadKey = "ttTypeahead";
-          methods = {
-              initialize: function initialize(o, datasets) {
-                  datasets = _.isArray(datasets) ? datasets : [].slice.call(arguments, 1);
-                  o = o || {};
-                  return this.each(attach);
-                  function attach() {
-                      var $input = $(this), eventBus, typeahead;
-                      _.each(datasets, function(d) {
-                          d.highlight = !!o.highlight;
-                      });
-                      typeahead = new Typeahead({
-                          input: $input,
-                          eventBus: eventBus = new EventBus({
-                              el: $input
-                          }),
-                          withHint: _.isUndefined(o.hint) ? true : !!o.hint,
-                          minLength: o.minLength,
-                          autoselect: o.autoselect,
-                          datasets: datasets
-                      });
-                      $input.data(typeaheadKey, typeahead);
-                  }
-              },
-              open: function open() {
-                  return this.each(openTypeahead);
-                  function openTypeahead() {
-                      var $input = $(this), typeahead;
-                      if (typeahead = $input.data(typeaheadKey)) {
-                          typeahead.open();
-                      }
-                  }
-              },
-              close: function close() {
-                  return this.each(closeTypeahead);
-                  function closeTypeahead() {
-                      var $input = $(this), typeahead;
-                      if (typeahead = $input.data(typeaheadKey)) {
-                          typeahead.close();
-                      }
-                  }
-              },
-              val: function val(newVal) {
-                  return !arguments.length ? getVal(this.first()) : this.each(setVal);
-                  function setVal() {
-                      var $input = $(this), typeahead;
-                      if (typeahead = $input.data(typeaheadKey)) {
-                          typeahead.setVal(newVal);
-                      }
-                  }
-                  function getVal($input) {
-                      var typeahead, query;
-                      if (typeahead = $input.data(typeaheadKey)) {
-                          query = typeahead.getVal();
-                      }
-                      return query;
-                  }
-              },
-              destroy: function destroy() {
-                  return this.each(unattach);
-                  function unattach() {
-                      var $input = $(this), typeahead;
-                      if (typeahead = $input.data(typeaheadKey)) {
-                          typeahead.destroy();
-                          $input.removeData(typeaheadKey);
-                      }
-                  }
-              }
-          };
-          $.fn.typeahead = function(method) {
-              if (methods[method]) {
-                  return methods[method].apply(this, [].slice.call(arguments, 1));
-              } else {
-                  return methods.initialize.apply(this, arguments);
-              }
-          };
-          $.fn.typeahead.noConflict = function noConflict() {
-              $.fn.typeahead = old;
-              return this;
-          };
-      })();
-      
-      
-      
-  //})(window.jQuery);
-  
-  
-  });
-  define('searchView',[
-    'App',
-    // Templates
-    'text!tpl/search.html',
-    'text!tpl/search_suggestion.html',
-    // Tools
-    'typeahead'
-  ], function(App, searchTpl, suggestionTpl) {
-  
-    var searchView = Backbone.View.extend({
-      el: '#search',
-      /**
-       * Init.
-       */
-      init: function() {
-        var tpl = _.template(searchTpl);
-        var className = 'form-control input-lg';
-        var placeholder = 'Search reference';
-        this.searchHtml = tpl({
-          'placeholder': placeholder,
-          'className': className
-        });
-        this.items = App.classes.concat(App.allItems);
-  
-        return this;
-      },
-      /**
-       * Render input field with Typehead activated.
-       */
-      render: function() {
-        // Append the view to the dom
-        this.$el.append(this.searchHtml);
-  
-        // Render Typeahead
-        var $searchInput = this.$el.find('input[type=text]');
-        this.typeaheadRender($searchInput);
-        this.typeaheadEvents($searchInput);
-  
-        return this;
-      },
-      /**
-       * Apply Twitter Typeahead to the search input field.
-       * @param {jquery} $input
-       */
-      typeaheadRender: function($input) {
-        var self = this;
-        $input.typeahead(null, {
-          'displayKey': 'name',
-          'minLength': 2,
-          //'highlight': true,
-          'source': self.substringMatcher(this.items),
-          'templates': {
-            'empty': '<p class="empty-message">Unable to find any item that match the current query</p>',
-            'suggestion': _.template(suggestionTpl)
-          }
-        });
-      },
-      /**
-       * Setup typeahead custom events (item selected).
-       */
-      typeaheadEvents: function($input) {
-        var self = this;
-        $input.on('typeahead:selected', function(e, item, datasetName) {
-          var selectedItem = self.items[item.idx];
-          select(selectedItem);
+          paramNames[param.name] = param;
+          params.push(param);
         });
-        $input.on('keydown', function(e) {
-          if (e.which === 13) { // enter
-            var txt = $input.val();
-            var f = _.find(self.items, function(it) { return it.name == txt; });
-            if (f) {
-              select(f);
+      });
+
+      return params;
+    }
+  };
+
+  return DocumentedMethod;
+}));
+
+/**
+ * @license RequireJS text 2.0.10 Copyright (c) 2010-2012, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/requirejs/text for details
+ */
+/*jslint regexp: true */
+/*global require, XMLHttpRequest, ActiveXObject,
+  define, window, process, Packages,
+  java, location, Components, FileUtils */
+
+define('text',['module'], function (module) {
+    'use strict';
+
+    var text, fs, Cc, Ci, xpcIsWindows,
+        progIds = ['Msxml2.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.4.0'],
+        xmlRegExp = /^\s*<\?xml(\s)+version=[\'\"](\d)*.(\d)*[\'\"](\s)*\?>/im,
+        bodyRegExp = /<body[^>]*>\s*([\s\S]+)\s*<\/body>/im,
+        hasLocation = typeof location !== 'undefined' && location.href,
+        defaultProtocol = hasLocation && location.protocol && location.protocol.replace(/\:/, ''),
+        defaultHostName = hasLocation && location.hostname,
+        defaultPort = hasLocation && (location.port || undefined),
+        buildMap = {},
+        masterConfig = (module.config && module.config()) || {};
+
+    text = {
+        version: '2.0.10',
+
+        strip: function (content) {
+            //Strips <?xml ...?> declarations so that external SVG and XML
+            //documents can be added to a document without worry. Also, if the string
+            //is an HTML document, only the part inside the body tag is returned.
+            if (content) {
+                content = content.replace(xmlRegExp, "");
+                var matches = content.match(bodyRegExp);
+                if (matches) {
+                    content = matches[1];
+                }
+            } else {
+                content = "";
+            }
+            return content;
+        },
+
+        jsEscape: function (content) {
+            return content.replace(/(['\\])/g, '\\$1')
+                .replace(/[\f]/g, "\\f")
+                .replace(/[\b]/g, "\\b")
+                .replace(/[\n]/g, "\\n")
+                .replace(/[\t]/g, "\\t")
+                .replace(/[\r]/g, "\\r")
+                .replace(/[\u2028]/g, "\\u2028")
+                .replace(/[\u2029]/g, "\\u2029");
+        },
+
+        createXhr: masterConfig.createXhr || function () {
+            //Would love to dump the ActiveX crap in here. Need IE 6 to die first.
+            var xhr, i, progId;
+            if (typeof XMLHttpRequest !== "undefined") {
+                return new XMLHttpRequest();
+            } else if (typeof ActiveXObject !== "undefined") {
+                for (i = 0; i < 3; i += 1) {
+                    progId = progIds[i];
+                    try {
+                        xhr = new ActiveXObject(progId);
+                    } catch (e) {}
+
+                    if (xhr) {
+                        progIds = [progId];  // so faster next time
+                        break;
+                    }
+                }
+            }
+
+            return xhr;
+        },
+
+        /**
+         * Parses a resource name into its component parts. Resource names
+         * look like: module/name.ext!strip, where the !strip part is
+         * optional.
+         * @param {String} name the resource name
+         * @returns {Object} with properties "moduleName", "ext" and "strip"
+         * where strip is a boolean.
+         */
+        parseName: function (name) {
+            var modName, ext, temp,
+                strip = false,
+                index = name.indexOf("."),
+                isRelative = name.indexOf('./') === 0 ||
+                             name.indexOf('../') === 0;
+
+            if (index !== -1 && (!isRelative || index > 1)) {
+                modName = name.substring(0, index);
+                ext = name.substring(index + 1, name.length);
+            } else {
+                modName = name;
+            }
+
+            temp = ext || modName;
+            index = temp.indexOf("!");
+            if (index !== -1) {
+                //Pull off the strip arg.
+                strip = temp.substring(index + 1) === "strip";
+                temp = temp.substring(0, index);
+                if (ext) {
+                    ext = temp;
+                } else {
+                    modName = temp;
+                }
+            }
+
+            return {
+                moduleName: modName,
+                ext: ext,
+                strip: strip
+            };
+        },
+
+        xdRegExp: /^((\w+)\:)?\/\/([^\/\\]+)/,
+
+        /**
+         * Is an URL on another domain. Only works for browser use, returns
+         * false in non-browser environments. Only used to know if an
+         * optimized .js version of a text resource should be loaded
+         * instead.
+         * @param {String} url
+         * @returns Boolean
+         */
+        useXhr: function (url, protocol, hostname, port) {
+            var uProtocol, uHostName, uPort,
+                match = text.xdRegExp.exec(url);
+            if (!match) {
+                return true;
+            }
+            uProtocol = match[2];
+            uHostName = match[3];
+
+            uHostName = uHostName.split(':');
+            uPort = uHostName[1];
+            uHostName = uHostName[0];
+
+            return (!uProtocol || uProtocol === protocol) &&
+                   (!uHostName || uHostName.toLowerCase() === hostname.toLowerCase()) &&
+                   ((!uPort && !uHostName) || uPort === port);
+        },
+
+        finishLoad: function (name, strip, content, onLoad) {
+            content = strip ? text.strip(content) : content;
+            if (masterConfig.isBuild) {
+                buildMap[name] = content;
+            }
+            onLoad(content);
+        },
+
+        load: function (name, req, onLoad, config) {
+            //Name has format: some.module.filext!strip
+            //The strip part is optional.
+            //if strip is present, then that means only get the string contents
+            //inside a body tag in an HTML string. For XML/SVG content it means
+            //removing the <?xml ...?> declarations so the content can be inserted
+            //into the current doc without problems.
+
+            // Do not bother with the work if a build and text will
+            // not be inlined.
+            if (config.isBuild && !config.inlineText) {
+                onLoad();
+                return;
             }
-          } else if (e.which === 27) {
-            $input.blur();
-          }
-        });
-  
-        function select(selectedItem) {
-          var hash = App.router.getHash(selectedItem);//
-          App.router.navigate(hash, {'trigger': true});
-          $('#item').focus();
+
+            masterConfig.isBuild = config.isBuild;
+
+            var parsed = text.parseName(name),
+                nonStripName = parsed.moduleName +
+                    (parsed.ext ? '.' + parsed.ext : ''),
+                url = req.toUrl(nonStripName),
+                useXhr = (masterConfig.useXhr) ||
+                         text.useXhr;
+
+            // Do not load if it is an empty: url
+            if (url.indexOf('empty:') === 0) {
+                onLoad();
+                return;
+            }
+
+            //Load the text. Use XHR if possible and in a browser.
+            if (!hasLocation || useXhr(url, defaultProtocol, defaultHostName, defaultPort)) {
+                text.get(url, function (content) {
+                    text.finishLoad(name, parsed.strip, content, onLoad);
+                }, function (err) {
+                    if (onLoad.error) {
+                        onLoad.error(err);
+                    }
+                });
+            } else {
+                //Need to fetch the resource across domains. Assume
+                //the resource has been optimized into a JS module. Fetch
+                //by the module name + extension, but do not include the
+                //!strip part to avoid file system issues.
+                req([nonStripName], function (content) {
+                    text.finishLoad(parsed.moduleName + '.' + parsed.ext,
+                                    parsed.strip, content, onLoad);
+                });
+            }
+        },
+
+        write: function (pluginName, moduleName, write, config) {
+            if (buildMap.hasOwnProperty(moduleName)) {
+                var content = text.jsEscape(buildMap[moduleName]);
+                write.asModule(pluginName + "!" + moduleName,
+                               "define(function () { return '" +
+                                   content +
+                               "';});\n");
+            }
+        },
+
+        writeFile: function (pluginName, moduleName, req, write, config) {
+            var parsed = text.parseName(moduleName),
+                extPart = parsed.ext ? '.' + parsed.ext : '',
+                nonStripName = parsed.moduleName + extPart,
+                //Use a '.js' file name so that it indicates it is a
+                //script that can be loaded across domains.
+                fileName = req.toUrl(parsed.moduleName + extPart) + '.js';
+
+            //Leverage own load() method to load plugin value, but only
+            //write out values that do not have the strip argument,
+            //to avoid any potential issues with ! in file names.
+            text.load(nonStripName, req, function (value) {
+                //Use own write() method to construct full module value.
+                //But need to create shell that translates writeFile's
+                //write() to the right interface.
+                var textWrite = function (contents) {
+                    return write(fileName, contents);
+                };
+                textWrite.asModule = function (moduleName, contents) {
+                    return write.asModule(moduleName, fileName, contents);
+                };
+
+                text.write(pluginName, nonStripName, textWrite, config);
+            }, config);
         }
-      },
-      /**
-       * substringMatcher function for Typehead (search for strings in an array).
-       * @param {array} array
-       * @returns {Function}
-       */
-      substringMatcher: function(array) {
-        return function findMatches(query, callback) {
-          var matches = [], substrRegex, arrayLength = array.length;
-  
-          // regex used to determine if a string contains the substring `query`
-          substrRegex = new RegExp(query, 'i');
-  
-          // iterate through the pool of strings and for any string that
-          // contains the substring `query`, add it to the `matches` array
-          for (var i=0; i < arrayLength; i++) {
-            var item = array[i];
-            if (substrRegex.test(item.name)) {
-              // typeahead expects suggestions to be a js object
-              matches.push({
-                'itemtype': item.itemtype,
-                'name': item.name,
-                'className': item.class,
-                'is_constructor': !!item.is_constructor,
-                'final': item.final,
-                'idx': i
-              });
+    };
+
+    if (masterConfig.env === 'node' || (!masterConfig.env &&
+            typeof process !== "undefined" &&
+            process.versions &&
+            !!process.versions.node &&
+            !process.versions['node-webkit'])) {
+        //Using special require.nodeRequire, something added by r.js.
+        fs = require.nodeRequire('fs');
+
+        text.get = function (url, callback, errback) {
+            try {
+                var file = fs.readFileSync(url, 'utf8');
+                //Remove BOM (Byte Mark Order) from utf8 files if it is there.
+                if (file.indexOf('\uFEFF') === 0) {
+                    file = file.substring(1);
+                }
+                callback(file);
+            } catch (e) {
+                errback(e);
             }
-          }
-  
-          callback(matches);
         };
-      }
-  
-    });
-  
-    return searchView;
-  
-  });
-  
-  
-  define('text!tpl/list.html',[],function () { return '<% _.each(groups, function(group){ %>\n  <div class="reference-group clearfix main-ref-page">  \n    <h2 class="group-name" id="group-<%=group.name%>" tab-index="-1"><%=group.name%></h2>\n    <div class="reference-subgroups clearfix main-ref-page">  \n    <% _.each(group.subgroups, function(subgroup, ind) { %>\n      <div class="reference-subgroup">\n        <% if (subgroup.name !== \'0\') { %>\n          <h3 id="<%=group.name%><%=ind%>" class="subgroup-name subgroup-<%=subgroup.name%>"><%=subgroup.name%></h3>\n        <% } %>\n        <ul aria-labelledby="<%=group.name%> <%=ind%>">\n        <% _.each(subgroup.items, function(item) { %>\n        <li><a href="<%=item.hash%>"><%=item.name%><% if (item.itemtype === \'method\') { %>()<%}%></a></li>\n        <% }); %>\n        </ul>\n      </div>\n    <% }); %>\n    </div>\n  </div>\n<% }); %>\n';});
-  
-  define('listView',[
-    'App',
-    // Templates
-    'text!tpl/list.html'
-  ], function (App, listTpl) {
-    var striptags = function(html) {
-      var div = document.createElement('div');
-      div.innerHTML = html;
-      return div.textContent;
-    };
-  
-    var listView = Backbone.View.extend({
-      el: '#list',
-      events: {},
-      /**
-       * Init.
-       */
-      init: function () {
-        this.listTpl = _.template(listTpl);
-  
-        return this;
-      },
-      /**
-       * Render the list.
-       */
-      render: function (items, listCollection) {
-        if (items && listCollection) {
-          var self = this;
-  
-          // Render items and group them by module
-          // module === group
-          this.groups = {};
-          _.each(items, function (item, i) {
-  
-            if (!item.private && item.file.indexOf('addons') === -1) { //addons don't get displayed on main page
-  
-              var group = item.module || '_';
-              var subgroup = item.submodule || '_';
-              if (group === subgroup) {
-                subgroup = '0';
-              }
-              var hash = App.router.getHash(item);
-  
-              // fixes broken links for #/p5/> and #/p5/>=
-              item.hash = item.hash.replace('>', '&gt;');
-  
-              // Create a group list
-              if (!self.groups[group]) {
-                self.groups[group] = {
-                  name: group.replace('_', '&nbsp;'),
-                  subgroups: {}
+    } else if (masterConfig.env === 'xhr' || (!masterConfig.env &&
+            text.createXhr())) {
+        text.get = function (url, callback, errback, headers) {
+            var xhr = text.createXhr(), header;
+            xhr.open('GET', url, true);
+
+            //Allow plugins direct access to xhr headers
+            if (headers) {
+                for (header in headers) {
+                    if (headers.hasOwnProperty(header)) {
+                        xhr.setRequestHeader(header.toLowerCase(), headers[header]);
+                    }
+                }
+            }
+
+            //Allow overrides specified in config
+            if (masterConfig.onXhr) {
+                masterConfig.onXhr(xhr, url);
+            }
+
+            xhr.onreadystatechange = function (evt) {
+                var status, err;
+                //Do not explicitly handle errors, those should be
+                //visible via console output in the browser.
+                if (xhr.readyState === 4) {
+                    status = xhr.status;
+                    if (status > 399 && status < 600) {
+                        //An http 4xx or 5xx error. Signal an error.
+                        err = new Error(url + ' HTTP status: ' + status);
+                        err.xhr = xhr;
+                        errback(err);
+                    } else {
+                        callback(xhr.responseText);
+                    }
+
+                    if (masterConfig.onXhrComplete) {
+                        masterConfig.onXhrComplete(xhr, url);
+                    }
+                }
+            };
+            xhr.send(null);
+        };
+    } else if (masterConfig.env === 'rhino' || (!masterConfig.env &&
+            typeof Packages !== 'undefined' && typeof java !== 'undefined')) {
+        //Why Java, why is this so awkward?
+        text.get = function (url, callback) {
+            var stringBuffer, line,
+                encoding = "utf-8",
+                file = new java.io.File(url),
+                lineSeparator = java.lang.System.getProperty("line.separator"),
+                input = new java.io.BufferedReader(new java.io.InputStreamReader(new java.io.FileInputStream(file), encoding)),
+                content = '';
+            try {
+                stringBuffer = new java.lang.StringBuffer();
+                line = input.readLine();
+
+                // Byte Order Mark (BOM) - The Unicode Standard, version 3.0, page 324
+                // http://www.unicode.org/faq/utf_bom.html
+
+                // Note that when we use utf-8, the BOM should appear as "EF BB BF", but it doesn't due to this bug in the JDK:
+                // http://bugs.sun.com/bugdatabase/view_bug.do?bug_id=4508058
+                if (line && line.length() && line.charAt(0) === 0xfeff) {
+                    // Eat the BOM, since we've already found the encoding on this file,
+                    // and we plan to concatenating this buffer with others; the BOM should
+                    // only appear at the top of a file.
+                    line = line.substring(1);
+                }
+
+                if (line !== null) {
+                    stringBuffer.append(line);
+                }
+
+                while ((line = input.readLine()) !== null) {
+                    stringBuffer.append(lineSeparator);
+                    stringBuffer.append(line);
+                }
+                //Make sure we return a JavaScript string and not a Java string.
+                content = String(stringBuffer.toString()); //String
+            } finally {
+                input.close();
+            }
+            callback(content);
+        };
+    } else if (masterConfig.env === 'xpconnect' || (!masterConfig.env &&
+            typeof Components !== 'undefined' && Components.classes &&
+            Components.interfaces)) {
+        //Avert your gaze!
+        Cc = Components.classes,
+        Ci = Components.interfaces;
+        Components.utils['import']('resource://gre/modules/FileUtils.jsm');
+        xpcIsWindows = ('@mozilla.org/windows-registry-key;1' in Cc);
+
+        text.get = function (url, callback) {
+            var inStream, convertStream, fileObj,
+                readData = {};
+
+            if (xpcIsWindows) {
+                url = url.replace(/\//g, '\\');
+            }
+
+            fileObj = new FileUtils.File(url);
+
+            //XPCOM, you so crazy
+            try {
+                inStream = Cc['@mozilla.org/network/file-input-stream;1']
+                           .createInstance(Ci.nsIFileInputStream);
+                inStream.init(fileObj, 1, 0, false);
+
+                convertStream = Cc['@mozilla.org/intl/converter-input-stream;1']
+                                .createInstance(Ci.nsIConverterInputStream);
+                convertStream.init(inStream, "utf-8", inStream.available(),
+                Ci.nsIConverterInputStream.DEFAULT_REPLACEMENT_CHARACTER);
+
+                convertStream.readString(inStream.available(), readData);
+                convertStream.close();
+                inStream.close();
+                callback(readData.value);
+            } catch (e) {
+                throw new Error((fileObj && fileObj.path || '') + ': ' + e);
+            }
+        };
+    }
+    return text;
+});
+
+
+define('text!tpl/search.html',[],function () { return '<h2 class="sr-only">search</h2>\n<form>\n  <input id="search_reference_field" type="text" class="<%=className%>" value="" placeholder="<%=placeholder%>" aria-label="search reference">\n  <label class="sr-only" for="search_reference_field">Search reference</label>\n</form>\n\n';});
+
+
+define('text!tpl/search_suggestion.html',[],function () { return '<p id="index-<%=idx%>" class="search-suggestion">\n\n  <strong><%=name%></strong>\n\n  <span class="small">\n    <% if (final) { %>\n    constant\n    <% } else if (itemtype) { %>\n    <%=itemtype%> \n    <% } %>\n\n    <% if (className) { %>\n    in <strong><%=className%></strong>\n    <% } %>\n\n    <% if (typeof is_constructor !== \'undefined\' && is_constructor) { %>\n    <strong><span class="glyphicon glyphicon-star"></span> constructor</strong>\n    <% } %>\n  </span>\n\n</p>';});
+
+/*!
+ * typeahead.js 0.10.2
+ * https://github.com/twitter/typeahead.js
+ * Copyright 2013-2014 Twitter, Inc. and other contributors; Licensed MIT
+ */
+define('typeahead',[], function() {
+
+//(function($) {
+
+
+    var _ = {
+        isMsie: function() {
+            return /(msie|trident)/i.test(navigator.userAgent) ? navigator.userAgent.match(/(msie |rv:)(\d+(.\d+)?)/i)[2] : false;
+        },
+        isBlankString: function(str) {
+            return !str || /^\s*$/.test(str);
+        },
+        escapeRegExChars: function(str) {
+            return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
+        },
+        isString: function(obj) {
+            return typeof obj === "string";
+        },
+        isNumber: function(obj) {
+            return typeof obj === "number";
+        },
+        isArray: $.isArray,
+        isFunction: $.isFunction,
+        isObject: $.isPlainObject,
+        isUndefined: function(obj) {
+            return typeof obj === "undefined";
+        },
+        bind: $.proxy,
+        each: function(collection, cb) {
+            $.each(collection, reverseArgs);
+            function reverseArgs(index, value) {
+                return cb(value, index);
+            }
+        },
+        map: $.map,
+        filter: $.grep,
+        every: function(obj, test) {
+            var result = true;
+            if (!obj) {
+                return result;
+            }
+            $.each(obj, function(key, val) {
+                if (!(result = test.call(null, val, key, obj))) {
+                    return false;
+                }
+            });
+            return !!result;
+        },
+        some: function(obj, test) {
+            var result = false;
+            if (!obj) {
+                return result;
+            }
+            $.each(obj, function(key, val) {
+                if (result = test.call(null, val, key, obj)) {
+                    return false;
+                }
+            });
+            return !!result;
+        },
+        mixin: $.extend,
+        getUniqueId: function() {
+            var counter = 0;
+            return function() {
+                return counter++;
+            };
+        }(),
+        templatify: function templatify(obj) {
+            return $.isFunction(obj) ? obj : template;
+            function template() {
+                return String(obj);
+            }
+        },
+        defer: function(fn) {
+            setTimeout(fn, 0);
+        },
+        debounce: function(func, wait, immediate) {
+            var timeout, result;
+            return function() {
+                var context = this, args = arguments, later, callNow;
+                later = function() {
+                    timeout = null;
+                    if (!immediate) {
+                        result = func.apply(context, args);
+                    }
                 };
-              }
-  
-              // Create a subgroup list
-              if (!self.groups[group].subgroups[subgroup]) {
-                self.groups[group].subgroups[subgroup] = {
-                  name: subgroup.replace('_', '&nbsp;'),
-                  items: []
+                callNow = immediate && !timeout;
+                clearTimeout(timeout);
+                timeout = setTimeout(later, wait);
+                if (callNow) {
+                    result = func.apply(context, args);
+                }
+                return result;
+            };
+        },
+        throttle: function(func, wait) {
+            var context, args, timeout, result, previous, later;
+            previous = 0;
+            later = function() {
+                previous = new Date();
+                timeout = null;
+                result = func.apply(context, args);
+            };
+            return function() {
+                var now = new Date(), remaining = wait - (now - previous);
+                context = this;
+                args = arguments;
+                if (remaining <= 0) {
+                    clearTimeout(timeout);
+                    timeout = null;
+                    previous = now;
+                    result = func.apply(context, args);
+                } else if (!timeout) {
+                    timeout = setTimeout(later, remaining);
+                }
+                return result;
+            };
+        },
+        noop: function() {}
+    };
+    var VERSION = "0.10.2";
+    var tokenizers = function(root) {
+        return {
+            nonword: nonword,
+            whitespace: whitespace,
+            obj: {
+                nonword: getObjTokenizer(nonword),
+                whitespace: getObjTokenizer(whitespace)
+            }
+        };
+        function whitespace(s) {
+            return s.split(/\s+/);
+        }
+        function nonword(s) {
+            return s.split(/\W+/);
+        }
+        function getObjTokenizer(tokenizer) {
+            return function setKey(key) {
+                return function tokenize(o) {
+                    return tokenizer(o[key]);
                 };
-              }
-  
-              // hide the un-interesting constants
-              if (group === 'Constants' && !item.example)
-                return;
-  
-              if (item.class === 'p5') {
-  
-                self.groups[group].subgroups[subgroup].items.push(item);
-  
-              } else {
-  
-                var found = _.find(self.groups[group].subgroups[subgroup].items,
-                  function(i){ return i.name == item.class; });
-  
-                if (!found) {
-  
-                  // FIX TO INVISIBLE OBJECTS: DH (see also router.js)
-                  var ind = hash.lastIndexOf('/');
-                  hash = item.hash.substring(0, ind).replace('p5/','p5.');
-                  self.groups[group].subgroups[subgroup].items.push({
-                    name: item.class,
-                    hash: hash
-                  });
+            };
+        }
+    }();
+    var LruCache = function() {
+        function LruCache(maxSize) {
+            this.maxSize = maxSize || 100;
+            this.size = 0;
+            this.hash = {};
+            this.list = new List();
+        }
+        _.mixin(LruCache.prototype, {
+            set: function set(key, val) {
+                var tailItem = this.list.tail, node;
+                if (this.size >= this.maxSize) {
+                    this.list.remove(tailItem);
+                    delete this.hash[tailItem.key];
+                }
+                if (node = this.hash[key]) {
+                    node.val = val;
+                    this.list.moveToFront(node);
+                } else {
+                    node = new Node(key, val);
+                    this.list.add(node);
+                    this.hash[key] = node;
+                    this.size++;
+                }
+            },
+            get: function get(key) {
+                var node = this.hash[key];
+                if (node) {
+                    this.list.moveToFront(node);
+                    return node.val;
                 }
-  
-              }
             }
-          });
-  
-          // Put the <li> items html into the list <ul>
-          var listHtml = self.listTpl({
-            'striptags': striptags,
-            'title': self.capitalizeFirst(listCollection),
-            'groups': self.groups,
-            'listCollection': listCollection
-          });
-  
-          // Render the view
-          this.$el.html(listHtml);
+        });
+        function List() {
+            this.head = this.tail = null;
         }
-  
-        var renderEvent = new Event('reference-rendered');
-        window.dispatchEvent(renderEvent);
-  
-        return this;
-      },
-      /**
-       * Show a list of items.
-       * @param {array} items Array of item objects.
-       * @returns {object} This view.
-       */
-      show: function (listGroup) {
-        if (App[listGroup]) {
-          this.render(App[listGroup], listGroup);
+        _.mixin(List.prototype, {
+            add: function add(node) {
+                if (this.head) {
+                    node.next = this.head;
+                    this.head.prev = node;
+                }
+                this.head = node;
+                this.tail = this.tail || node;
+            },
+            remove: function remove(node) {
+                node.prev ? node.prev.next = node.next : this.head = node.next;
+                node.next ? node.next.prev = node.prev : this.tail = node.prev;
+            },
+            moveToFront: function(node) {
+                this.remove(node);
+                this.add(node);
+            }
+        });
+        function Node(key, val) {
+            this.key = key;
+            this.val = val;
+            this.prev = this.next = null;
         }
-        App.pageView.hideContentViews();
-  
-        this.$el.show();
-  
-        return this;
-      },
-      /**
-       * Helper method to capitalize the first letter of a string
-       * @param {string} str
-       * @returns {string} Returns the string.
-       */
-      capitalizeFirst: function (str) {
-        return str.substr(0, 1).toUpperCase() + str.substr(1);
-      }
-  
-  
-  
-    });
-  
-    return listView;
-  
-  });
-  
-  
-  define('text!tpl/item.html',[],function () { return '<h2><%=item.name%><% if (item.isMethod) { %>()<% } %></h2>\n\n<% if (item.example) { %>\n<div class="example">\n  <h3 id="reference-example">Examples</h3>\n\n  <div class="example-content" data-alt="<%= item.alt %>">\n    <% _.each(item.example, function(example, i){ %>\n      <%= example %>\n    <% }); %>\n  </div>\n</div>\n<% } %>\n\n<div class="description">\n\n  <h3 id="reference-description">Description</h3>\n\n  <% if (item.deprecated) { %>\n    <p>\n      Deprecated: <%=item.name%><% if (item.isMethod) { %>()<% } %> is deprecated and will be removed in a future version of p5. <% if (item.deprecationMessage) { %><%=item.deprecationMessage%><% } %>\n    </p>\n  <% } %>\n\n\n  <span class=\'description-text\'><%= item.description %></span>\n\n  <% if (item.extends) { %>\n    <p><span id="reference-extends">Extends</span> <a href="/reference/#/<%=item.extends%>" title="<%=item.extends%> reference"><%=item.extends%></a></p>\n  <% } %>\n\n  <% if (item.module === \'p5.sound\') { %>\n    <p>This function requires you include the p5.sound library.  Add the following into the head of your index.html file:\n      <pre><code class="language-javascript">&lt;script src="path/to/p5.sound.js"&gt;&lt;/script&gt;</code></pre>\n    </p>\n  <% } %>\n\n  <% if (item.constRefs) { %>\n    <p>Used by:\n  <%\n      var refs = item.constRefs;\n      for (var i = 0; i < refs.length; i ++) {\n        var ref = refs[i];\n        var name = ref;\n        if (name.substr(0, 3) === \'p5.\') {\n          name = name.substr(3);\n        }\n  if (i !== 0) {\n          if (i == refs.length - 1) {\n            %> and <%\n          } else {\n            %>, <%\n          }\n        }\n        %><a href="./#/<%= ref.replace(\'.\', \'/\') %>"><%= name %>()</a><%\n      }\n  %>\n    </p>\n  <% } %>\n</div>\n\n<% if (isConstructor || !isClass) { %>\n\n<div class="syntax">\n  <h3 id="reference-syntax">Syntax</h3>\n  <p>\n    <% syntaxes.forEach(function(syntax) { %>\n    <pre class="language-javascript"><%= syntax %></pre>\n    <% }) %>\n  </p>\n</div>\n\n\n<% if (item.params) { %>\n  <div class="params">\n    <h3 id="reference-parameters">Parameters</h3>\n    <ul aria-labelledby=\'reference-parameters\'>\n    <% for (var i=0; i<item.params.length; i++) { %>\n      <% var p = item.params[i] %>\n      <li>\n        <div class=\'paramname\'><%=p.name%></div>\n        <% if (p.type) { %>\n          <div class=\'paramtype\'>\n          <% var type = p.type.replace(/(p5\\.[A-Z][A-Za-z]*)/, \'<a href="#/$1">$1</a>\'); %>\n          <span class="param-type label label-info"><%=type%></span>: <%=p.description%>\n          <% if (p.optional) { %> (Optional)<% } %>\n          </div>\n        <% } %>\n      </li>\n    <% } %>\n    </ul>\n  </div>\n<% } %>\n\n<% if (item.return && item.return.type) { %>\n  <div>\n    <h3 id="reference-returns">Returns</h3>\n    <p class=\'returns\'><span class="param-type label label-info"><%=item.return.type%></span>: <%= item.return.description %></p>\n  </div>\n<% } %>\n\n<% } %>\n';});
-  
-  
-  define('text!tpl/class.html',[],function () { return '\n<% if (typeof constructor !== \'undefined\') { %>\n<div class="constructor">\n  <%=constructor%>\n</div>\n<% } %>\n\n<% let fields = _.filter(things, function(item) { return item.itemtype === \'property\' && item.access !== \'private\' }); %>\n<% if (fields.length > 0) { %>\n  <h3 id=\'reference-fields\'>Fields</h3>\n  <ul aria-labelledby=\'reference-fields\'>\n  <% _.each(fields, function(item) { %>\n    <li>\n      <div class=\'paramname\'><a href="<%=item.hash%>" <% if (item.module !== module) { %>class="addon"<% } %>><%=item.name%></a></div>\n      <div class=\'paramtype\'><%= item.description %></div>\n    </li>\n  <% }); %>\n  </ul>\n<% } %>\n\n<% let methods = _.filter(things, function(item) { return item.itemtype === \'method\' && item.access !== \'private\' }); %>\n<% if (methods.length > 0) { %>\n  <h3 id=\'reference-methods\'>Methods</h3>\n  <ul aria-labelledby=\'reference-methods\'>\n    <% _.each(methods, function(item) { %>\n      <li>\n        <div class=\'paramname\'><a href="<%=item.hash%>" <% if (item.module !== module) { %>class="addon"<% } %>><%=item.name%><% if (item.itemtype === \'method\') { %>()<%}%></a></div>\n        <div class=\'paramtype\'><%= item.description %></div>\n      </li>\n    <% }); %>\n  </ul>\n<% } %>\n';});
-  
-  
-  define('text!tpl/itemEnd.html',[],function () { return '\n<br><br>\n\n<div>\n<% if (item.file && item.line) { %>\n<span id="reference-error1">Notice any errors or typos?</span> <a href="https://github.com/processing/p5.js/issues"><span id="reference-contribute2">Please let us know.</span></a> <span id="reference-error3">Please feel free to edit</span> <a href="https://github.com/processing/p5.js/blob/<%= appVersion %>/<%= item.file %>#L<%= item.line %>" target="_blank" ><%= item.file %></a> <span id="reference-error5">and issue a pull request!</span>\n<% } %>\n</div>\n\n<a style="border-bottom:none !important;" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target=_blank><img src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" style="width:88px" alt="creative commons logo"/></a>\n<br><br>\n';});
-  
-  // Copyright (C) 2006 Google Inc.
-  //
-  // Licensed under the Apache License, Version 2.0 (the "License");
-  // you may not use this file except in compliance with the License.
-  // You may obtain a copy of the License at
-  //
-  //      http://www.apache.org/licenses/LICENSE-2.0
-  //
-  // Unless required by applicable law or agreed to in writing, software
-  // distributed under the License is distributed on an "AS IS" BASIS,
-  // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  // See the License for the specific language governing permissions and
-  // limitations under the License.
-  
-  
-  /**
-   * @fileoverview
-   * some functions for browser-side pretty printing of code contained in html.
-   *
-   * <p>
-   * For a fairly comprehensive set of languages see the
-   * <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html#langs">README</a>
-   * file that came with this source.  At a minimum, the lexer should work on a
-   * number of languages including C and friends, Java, Python, Bash, SQL, HTML,
-   * XML, CSS, Javascript, and Makefiles.  It works passably on Ruby, PHP and Awk
-   * and a subset of Perl, but, because of commenting conventions, doesn't work on
-   * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class.
-   * <p>
-   * Usage: <ol>
-   * <li> include this source file in an html page via
-   *   {@code <script src="/path/to/prettify.js"></script>}
-   * <li> define style rules.  See the example page for examples.
-   * <li> mark the {@code <pre>} and {@code <code>} tags in your source with
-   *    {@code class=prettyprint.}
-   *    You can also use the (html deprecated) {@code <xmp>} tag, but the pretty
-   *    printer needs to do more substantial DOM manipulations to support that, so
-   *    some css styles may not be preserved.
-   * </ol>
-   * That's it.  I wanted to keep the API as simple as possible, so there's no
-   * need to specify which language the code is in, but if you wish, you can add
-   * another class to the {@code <pre>} or {@code <code>} element to specify the
-   * language, as in {@code <pre class="prettyprint lang-java">}.  Any class that
-   * starts with "lang-" followed by a file extension, specifies the file type.
-   * See the "lang-*.js" files in this directory for code that implements
-   * per-language file handlers.
-   * <p>
-   * Change log:<br>
-   * cbeust, 2006/08/22
-   * <blockquote>
-   *   Java annotations (start with "@") are now captured as literals ("lit")
-   * </blockquote>
-   * @requires console
-   */
-  
-  // JSLint declarations
-  /*global console, document, navigator, setTimeout, window, define */
-  
-  /** @define {boolean} */
-  var IN_GLOBAL_SCOPE = true;
-  
-  /**
-   * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
-   * UI events.
-   * If set to {@code false}, {@code prettyPrint()} is synchronous.
-   */
-  window['PR_SHOULD_USE_CONTINUATION'] = true;
-  
-  /**
-   * Pretty print a chunk of code.
-   * @param {string} sourceCodeHtml The HTML to pretty print.
-   * @param {string} opt_langExtension The language name to use.
-   *     Typically, a filename extension like 'cpp' or 'java'.
-   * @param {number|boolean} opt_numberLines True to number lines,
-   *     or the 1-indexed number of the first line in sourceCodeHtml.
-   * @return {string} code as html, but prettier
-   */
-  var prettyPrintOne;
-  /**
-   * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
-   * {@code class=prettyprint} and prettify them.
-   *
-   * @param {Function} opt_whenDone called when prettifying is done.
-   * @param {HTMLElement|HTMLDocument} opt_root an element or document
-   *   containing all the elements to pretty print.
-   *   Defaults to {@code document.body}.
-   */
-  var prettyPrint;
-  
-  
-  (function () {
-    var win = window;
-    // Keyword lists for various languages.
-    // We use things that coerce to strings to make them compact when minified
-    // and to defeat aggressive optimizers that fold large string constants.
-    var FLOW_CONTROL_KEYWORDS = ["break,continue,do,else,for,if,return,while"];
-    var C_KEYWORDS = [FLOW_CONTROL_KEYWORDS,"auto,case,char,const,default," + 
-        "double,enum,extern,float,goto,inline,int,long,register,short,signed," +
-        "sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"];
-    var COMMON_KEYWORDS = [C_KEYWORDS,"catch,class,delete,false,import," +
-        "new,operator,private,protected,public,this,throw,true,try,typeof"];
-    var CPP_KEYWORDS = [COMMON_KEYWORDS,"alignof,align_union,asm,axiom,bool," +
-        "concept,concept_map,const_cast,constexpr,decltype,delegate," +
-        "dynamic_cast,explicit,export,friend,generic,late_check," +
-        "mutable,namespace,nullptr,property,reinterpret_cast,static_assert," +
-        "static_cast,template,typeid,typename,using,virtual,where"];
-    var JAVA_KEYWORDS = [COMMON_KEYWORDS,
-        "abstract,assert,boolean,byte,extends,final,finally,implements,import," +
-        "instanceof,interface,null,native,package,strictfp,super,synchronized," +
-        "throws,transient"];
-    var CSHARP_KEYWORDS = [JAVA_KEYWORDS,
-        "as,base,by,checked,decimal,delegate,descending,dynamic,event," +
-        "fixed,foreach,from,group,implicit,in,internal,into,is,let," +
-        "lock,object,out,override,orderby,params,partial,readonly,ref,sbyte," +
-        "sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort," +
-        "var,virtual,where"];
-    var COFFEE_KEYWORDS = "all,and,by,catch,class,else,extends,false,finally," +
-        "for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then," +
-        "throw,true,try,unless,until,when,while,yes";
-    var JSCRIPT_KEYWORDS = [COMMON_KEYWORDS,
-        "debugger,eval,export,function,get,null,set,undefined,var,with," +
-        "Infinity,NaN"];
-    var PERL_KEYWORDS = "caller,delete,die,do,dump,elsif,eval,exit,foreach,for," +
-        "goto,if,import,last,local,my,next,no,our,print,package,redo,require," +
-        "sub,undef,unless,until,use,wantarray,while,BEGIN,END";
-    var PYTHON_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "and,as,assert,class,def,del," +
-        "elif,except,exec,finally,from,global,import,in,is,lambda," +
-        "nonlocal,not,or,pass,print,raise,try,with,yield," +
-        "False,True,None"];
-    var RUBY_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "alias,and,begin,case,class," +
-        "def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo," +
-        "rescue,retry,self,super,then,true,undef,unless,until,when,yield," +
-        "BEGIN,END"];
-     var RUST_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "as,assert,const,copy,drop," +
-        "enum,extern,fail,false,fn,impl,let,log,loop,match,mod,move,mut,priv," +
-        "pub,pure,ref,self,static,struct,true,trait,type,unsafe,use"];
-    var SH_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "case,done,elif,esac,eval,fi," +
-        "function,in,local,set,then,until"];
-    var ALL_KEYWORDS = [
-        CPP_KEYWORDS, CSHARP_KEYWORDS, JSCRIPT_KEYWORDS, PERL_KEYWORDS,
-        PYTHON_KEYWORDS, RUBY_KEYWORDS, SH_KEYWORDS];
-    var C_TYPES = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)\b/;
-  
-    // token style names.  correspond to css classes
-    /**
-     * token style for a string literal
-     * @const
-     */
-    var PR_STRING = 'str';
-    /**
-     * token style for a keyword
-     * @const
-     */
-    var PR_KEYWORD = 'kwd';
-    /**
-     * token style for a comment
-     * @const
-     */
-    var PR_COMMENT = 'com';
-    /**
-     * token style for a type
-     * @const
-     */
-    var PR_TYPE = 'typ';
-    /**
-     * token style for a literal value.  e.g. 1, null, true.
-     * @const
-     */
-    var PR_LITERAL = 'lit';
-    /**
-     * token style for a punctuation string.
-     * @const
-     */
-    var PR_PUNCTUATION = 'pun';
-    /**
-     * token style for plain text.
-     * @const
-     */
-    var PR_PLAIN = 'pln';
-  
-    /**
-     * token style for an sgml tag.
-     * @const
-     */
-    var PR_TAG = 'tag';
-    /**
-     * token style for a markup declaration such as a DOCTYPE.
-     * @const
-     */
-    var PR_DECLARATION = 'dec';
-    /**
-     * token style for embedded source.
-     * @const
-     */
-    var PR_SOURCE = 'src';
-    /**
-     * token style for an sgml attribute name.
-     * @const
-     */
-    var PR_ATTRIB_NAME = 'atn';
-    /**
-     * token style for an sgml attribute value.
-     * @const
-     */
-    var PR_ATTRIB_VALUE = 'atv';
-  
-    /**
-     * A class that indicates a section of markup that is not code, e.g. to allow
-     * embedding of line numbers within code listings.
-     * @const
-     */
-    var PR_NOCODE = 'nocode';
-  
-    
-    
-    /**
-     * A set of tokens that can precede a regular expression literal in
-     * javascript
-     * http://web.archive.org/web/20070717142515/http://www.mozilla.org/js/language/js20/rationale/syntax.html
-     * has the full list, but I've removed ones that might be problematic when
-     * seen in languages that don't support regular expression literals.
-     *
-     * <p>Specifically, I've removed any keywords that can't precede a regexp
-     * literal in a syntactically legal javascript program, and I've removed the
-     * "in" keyword since it's not a keyword in many languages, and might be used
-     * as a count of inches.
-     *
-     * <p>The link above does not accurately describe EcmaScript rules since
-     * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
-     * very well in practice.
-     *
-     * @private
-     * @const
-     */
-    var REGEXP_PRECEDER_PATTERN = '(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<<?=?|>>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*';
-    
-    // CAVEAT: this does not properly handle the case where a regular
-    // expression immediately follows another since a regular expression may
-    // have flags for case-sensitivity and the like.  Having regexp tokens
-    // adjacent is not valid in any language I'm aware of, so I'm punting.
-    // TODO: maybe style special characters inside a regexp as punctuation.
-  
-    /**
-     * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
-     * matches the union of the sets of strings matched by the input RegExp.
-     * Since it matches globally, if the input strings have a start-of-input
-     * anchor (/^.../), it is ignored for the purposes of unioning.
-     * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
-     * @return {RegExp} a global regex.
-     */
-    function combinePrefixPatterns(regexs) {
-      var capturedGroupIndex = 0;
-    
-      var needToFoldCase = false;
-      var ignoreCase = false;
-      for (var i = 0, n = regexs.length; i < n; ++i) {
-        var regex = regexs[i];
-        if (regex.ignoreCase) {
-          ignoreCase = true;
-        } else if (/[a-z]/i.test(regex.source.replace(
-                       /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
-          needToFoldCase = true;
-          ignoreCase = false;
-          break;
+        return LruCache;
+    }();
+    var PersistentStorage = function() {
+        var ls, methods;
+        try {
+            ls = window.localStorage;
+            ls.setItem("~~~", "!");
+            ls.removeItem("~~~");
+        } catch (err) {
+            ls = null;
+        }
+        function PersistentStorage(namespace) {
+            this.prefix = [ "__", namespace, "__" ].join("");
+            this.ttlKey = "__ttl__";
+            this.keyMatcher = new RegExp("^" + this.prefix);
+        }
+        if (ls && window.JSON) {
+            methods = {
+                _prefix: function(key) {
+                    return this.prefix + key;
+                },
+                _ttlKey: function(key) {
+                    return this._prefix(key) + this.ttlKey;
+                },
+                get: function(key) {
+                    if (this.isExpired(key)) {
+                        this.remove(key);
+                    }
+                    return decode(ls.getItem(this._prefix(key)));
+                },
+                set: function(key, val, ttl) {
+                    if (_.isNumber(ttl)) {
+                        ls.setItem(this._ttlKey(key), encode(now() + ttl));
+                    } else {
+                        ls.removeItem(this._ttlKey(key));
+                    }
+                    return ls.setItem(this._prefix(key), encode(val));
+                },
+                remove: function(key) {
+                    ls.removeItem(this._ttlKey(key));
+                    ls.removeItem(this._prefix(key));
+                    return this;
+                },
+                clear: function() {
+                    var i, key, keys = [], len = ls.length;
+                    for (i = 0; i < len; i++) {
+                        if ((key = ls.key(i)).match(this.keyMatcher)) {
+                            keys.push(key.replace(this.keyMatcher, ""));
+                        }
+                    }
+                    for (i = keys.length; i--; ) {
+                        this.remove(keys[i]);
+                    }
+                    return this;
+                },
+                isExpired: function(key) {
+                    var ttl = decode(ls.getItem(this._ttlKey(key)));
+                    return _.isNumber(ttl) && now() > ttl ? true : false;
+                }
+            };
+        } else {
+            methods = {
+                get: _.noop,
+                set: _.noop,
+                remove: _.noop,
+                clear: _.noop,
+                isExpired: _.noop
+            };
+        }
+        _.mixin(PersistentStorage.prototype, methods);
+        return PersistentStorage;
+        function now() {
+            return new Date().getTime();
+        }
+        function encode(val) {
+            return JSON.stringify(_.isUndefined(val) ? null : val);
+        }
+        function decode(val) {
+            return JSON.parse(val);
+        }
+    }();
+    var Transport = function() {
+        var pendingRequestsCount = 0, pendingRequests = {}, maxPendingRequests = 6, requestCache = new LruCache(10);
+        function Transport(o) {
+            o = o || {};
+            this._send = o.transport ? callbackToDeferred(o.transport) : $.ajax;
+            this._get = o.rateLimiter ? o.rateLimiter(this._get) : this._get;
+        }
+        Transport.setMaxPendingRequests = function setMaxPendingRequests(num) {
+            maxPendingRequests = num;
+        };
+        Transport.resetCache = function clearCache() {
+            requestCache = new LruCache(10);
+        };
+        _.mixin(Transport.prototype, {
+            _get: function(url, o, cb) {
+                var that = this, jqXhr;
+                if (jqXhr = pendingRequests[url]) {
+                    jqXhr.done(done).fail(fail);
+                } else if (pendingRequestsCount < maxPendingRequests) {
+                    pendingRequestsCount++;
+                    pendingRequests[url] = this._send(url, o).done(done).fail(fail).always(always);
+                } else {
+                    this.onDeckRequestArgs = [].slice.call(arguments, 0);
+                }
+                function done(resp) {
+                    cb && cb(null, resp);
+                    requestCache.set(url, resp);
+                }
+                function fail() {
+                    cb && cb(true);
+                }
+                function always() {
+                    pendingRequestsCount--;
+                    delete pendingRequests[url];
+                    if (that.onDeckRequestArgs) {
+                        that._get.apply(that, that.onDeckRequestArgs);
+                        that.onDeckRequestArgs = null;
+                    }
+                }
+            },
+            get: function(url, o, cb) {
+                var resp;
+                if (_.isFunction(o)) {
+                    cb = o;
+                    o = {};
+                }
+                if (resp = requestCache.get(url)) {
+                    _.defer(function() {
+                        cb && cb(null, resp);
+                    });
+                } else {
+                    this._get(url, o, cb);
+                }
+                return !!resp;
+            }
+        });
+        return Transport;
+        function callbackToDeferred(fn) {
+            return function customSendWrapper(url, o) {
+                var deferred = $.Deferred();
+                fn(url, o, onSuccess, onError);
+                return deferred;
+                function onSuccess(resp) {
+                    _.defer(function() {
+                        deferred.resolve(resp);
+                    });
+                }
+                function onError(err) {
+                    _.defer(function() {
+                        deferred.reject(err);
+                    });
+                }
+            };
         }
-      }
-    
-      var escapeCharToCodeUnit = {
-        'b': 8,
-        't': 9,
-        'n': 0xa,
-        'v': 0xb,
-        'f': 0xc,
-        'r': 0xd
-      };
-    
-      function decodeEscape(charsetPart) {
-        var cc0 = charsetPart.charCodeAt(0);
-        if (cc0 !== 92 /* \\ */) {
-          return cc0;
+    }();
+    var SearchIndex = function() {
+        function SearchIndex(o) {
+            o = o || {};
+            if (!o.datumTokenizer || !o.queryTokenizer) {
+                $.error("datumTokenizer and queryTokenizer are both required");
+            }
+            this.datumTokenizer = o.datumTokenizer;
+            this.queryTokenizer = o.queryTokenizer;
+            this.reset();
         }
-        var c1 = charsetPart.charAt(1);
-        cc0 = escapeCharToCodeUnit[c1];
-        if (cc0) {
-          return cc0;
-        } else if ('0' <= c1 && c1 <= '7') {
-          return parseInt(charsetPart.substring(1), 8);
-        } else if (c1 === 'u' || c1 === 'x') {
-          return parseInt(charsetPart.substring(2), 16);
-        } else {
-          return charsetPart.charCodeAt(1);
+        _.mixin(SearchIndex.prototype, {
+            bootstrap: function bootstrap(o) {
+                this.datums = o.datums;
+                this.trie = o.trie;
+            },
+            add: function(data) {
+                var that = this;
+                data = _.isArray(data) ? data : [ data ];
+                _.each(data, function(datum) {
+                    var id, tokens;
+                    id = that.datums.push(datum) - 1;
+                    tokens = normalizeTokens(that.datumTokenizer(datum));
+                    _.each(tokens, function(token) {
+                        var node, chars, ch;
+                        node = that.trie;
+                        chars = token.split("");
+                        while (ch = chars.shift()) {
+                            node = node.children[ch] || (node.children[ch] = newNode());
+                            node.ids.push(id);
+                        }
+                    });
+                });
+            },
+            get: function get(query) {
+                var that = this, tokens, matches;
+                tokens = normalizeTokens(this.queryTokenizer(query));
+                _.each(tokens, function(token) {
+                    var node, chars, ch, ids;
+                    if (matches && matches.length === 0) {
+                        return false;
+                    }
+                    node = that.trie;
+                    chars = token.split("");
+                    while (node && (ch = chars.shift())) {
+                        node = node.children[ch];
+                    }
+                    if (node && chars.length === 0) {
+                        ids = node.ids.slice(0);
+                        matches = matches ? getIntersection(matches, ids) : ids;
+                    } else {
+                        matches = [];
+                        return false;
+                    }
+                });
+                return matches ? _.map(unique(matches), function(id) {
+                    return that.datums[id];
+                }) : [];
+            },
+            reset: function reset() {
+                this.datums = [];
+                this.trie = newNode();
+            },
+            serialize: function serialize() {
+                return {
+                    datums: this.datums,
+                    trie: this.trie
+                };
+            }
+        });
+        return SearchIndex;
+        function normalizeTokens(tokens) {
+            tokens = _.filter(tokens, function(token) {
+                return !!token;
+            });
+            tokens = _.map(tokens, function(token) {
+                return token.toLowerCase();
+            });
+            return tokens;
         }
-      }
-    
-      function encodeEscape(charCode) {
-        if (charCode < 0x20) {
-          return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
+        function newNode() {
+            return {
+                ids: [],
+                children: {}
+            };
         }
-        var ch = String.fromCharCode(charCode);
-        return (ch === '\\' || ch === '-' || ch === ']' || ch === '^')
-            ? "\\" + ch : ch;
-      }
-    
-      function caseFoldCharset(charSet) {
-        var charsetParts = charSet.substring(1, charSet.length - 1).match(
-            new RegExp(
-                '\\\\u[0-9A-Fa-f]{4}'
-                + '|\\\\x[0-9A-Fa-f]{2}'
-                + '|\\\\[0-3][0-7]{0,2}'
-                + '|\\\\[0-7]{1,2}'
-                + '|\\\\[\\s\\S]'
-                + '|-'
-                + '|[^-\\\\]',
-                'g'));
-        var ranges = [];
-        var inverse = charsetParts[0] === '^';
-    
-        var out = ['['];
-        if (inverse) { out.push('^'); }
-    
-        for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
-          var p = charsetParts[i];
-          if (/\\[bdsw]/i.test(p)) {  // Don't muck with named groups.
-            out.push(p);
-          } else {
-            var start = decodeEscape(p);
-            var end;
-            if (i + 2 < n && '-' === charsetParts[i + 1]) {
-              end = decodeEscape(charsetParts[i + 2]);
-              i += 2;
+        function unique(array) {
+            var seen = {}, uniques = [];
+            for (var i = 0; i < array.length; i++) {
+                if (!seen[array[i]]) {
+                    seen[array[i]] = true;
+                    uniques.push(array[i]);
+                }
+            }
+            return uniques;
+        }
+        function getIntersection(arrayA, arrayB) {
+            var ai = 0, bi = 0, intersection = [];
+            arrayA = arrayA.sort(compare);
+            arrayB = arrayB.sort(compare);
+            while (ai < arrayA.length && bi < arrayB.length) {
+                if (arrayA[ai] < arrayB[bi]) {
+                    ai++;
+                } else if (arrayA[ai] > arrayB[bi]) {
+                    bi++;
+                } else {
+                    intersection.push(arrayA[ai]);
+                    ai++;
+                    bi++;
+                }
+            }
+            return intersection;
+            function compare(a, b) {
+                return a - b;
+            }
+        }
+    }();
+    var oParser = function() {
+        return {
+            local: getLocal,
+            prefetch: getPrefetch,
+            remote: getRemote
+        };
+        function getLocal(o) {
+            return o.local || null;
+        }
+        function getPrefetch(o) {
+            var prefetch, defaults;
+            defaults = {
+                url: null,
+                thumbprint: "",
+                ttl: 24 * 60 * 60 * 1e3,
+                filter: null,
+                ajax: {}
+            };
+            if (prefetch = o.prefetch || null) {
+                prefetch = _.isString(prefetch) ? {
+                    url: prefetch
+                } : prefetch;
+                prefetch = _.mixin(defaults, prefetch);
+                prefetch.thumbprint = VERSION + prefetch.thumbprint;
+                prefetch.ajax.type = prefetch.ajax.type || "GET";
+                prefetch.ajax.dataType = prefetch.ajax.dataType || "json";
+                !prefetch.url && $.error("prefetch requires url to be set");
+            }
+            return prefetch;
+        }
+        function getRemote(o) {
+            var remote, defaults;
+            defaults = {
+                url: null,
+                wildcard: "%QUERY",
+                replace: null,
+                rateLimitBy: "debounce",
+                rateLimitWait: 300,
+                send: null,
+                filter: null,
+                ajax: {}
+            };
+            if (remote = o.remote || null) {
+                remote = _.isString(remote) ? {
+                    url: remote
+                } : remote;
+                remote = _.mixin(defaults, remote);
+                remote.rateLimiter = /^throttle$/i.test(remote.rateLimitBy) ? byThrottle(remote.rateLimitWait) : byDebounce(remote.rateLimitWait);
+                remote.ajax.type = remote.ajax.type || "GET";
+                remote.ajax.dataType = remote.ajax.dataType || "json";
+                delete remote.rateLimitBy;
+                delete remote.rateLimitWait;
+                !remote.url && $.error("remote requires url to be set");
+            }
+            return remote;
+            function byDebounce(wait) {
+                return function(fn) {
+                    return _.debounce(fn, wait);
+                };
+            }
+            function byThrottle(wait) {
+                return function(fn) {
+                    return _.throttle(fn, wait);
+                };
+            }
+        }
+    }();
+    (function(root) {
+        var old, keys;
+        old = root.Bloodhound;
+        keys = {
+            data: "data",
+            protocol: "protocol",
+            thumbprint: "thumbprint"
+        };
+        root.Bloodhound = Bloodhound;
+        function Bloodhound(o) {
+            if (!o || !o.local && !o.prefetch && !o.remote) {
+                $.error("one of local, prefetch, or remote is required");
+            }
+            this.limit = o.limit || 5;
+            this.sorter = getSorter(o.sorter);
+            this.dupDetector = o.dupDetector || ignoreDuplicates;
+            this.local = oParser.local(o);
+            this.prefetch = oParser.prefetch(o);
+            this.remote = oParser.remote(o);
+            this.cacheKey = this.prefetch ? this.prefetch.cacheKey || this.prefetch.url : null;
+            this.index = new SearchIndex({
+                datumTokenizer: o.datumTokenizer,
+                queryTokenizer: o.queryTokenizer
+            });
+            this.storage = this.cacheKey ? new PersistentStorage(this.cacheKey) : null;
+        }
+        Bloodhound.noConflict = function noConflict() {
+            root.Bloodhound = old;
+            return Bloodhound;
+        };
+        Bloodhound.tokenizers = tokenizers;
+        _.mixin(Bloodhound.prototype, {
+            _loadPrefetch: function loadPrefetch(o) {
+                var that = this, serialized, deferred;
+                if (serialized = this._readFromStorage(o.thumbprint)) {
+                    this.index.bootstrap(serialized);
+                    deferred = $.Deferred().resolve();
+                } else {
+                    deferred = $.ajax(o.url, o.ajax).done(handlePrefetchResponse);
+                }
+                return deferred;
+                function handlePrefetchResponse(resp) {
+                    that.clear();
+                    that.add(o.filter ? o.filter(resp) : resp);
+                    that._saveToStorage(that.index.serialize(), o.thumbprint, o.ttl);
+                }
+            },
+            _getFromRemote: function getFromRemote(query, cb) {
+                var that = this, url, uriEncodedQuery;
+                query = query || "";
+                uriEncodedQuery = encodeURIComponent(query);
+                url = this.remote.replace ? this.remote.replace(this.remote.url, query) : this.remote.url.replace(this.remote.wildcard, uriEncodedQuery);
+                return this.transport.get(url, this.remote.ajax, handleRemoteResponse);
+                function handleRemoteResponse(err, resp) {
+                    err ? cb([]) : cb(that.remote.filter ? that.remote.filter(resp) : resp);
+                }
+            },
+            _saveToStorage: function saveToStorage(data, thumbprint, ttl) {
+                if (this.storage) {
+                    this.storage.set(keys.data, data, ttl);
+                    this.storage.set(keys.protocol, location.protocol, ttl);
+                    this.storage.set(keys.thumbprint, thumbprint, ttl);
+                }
+            },
+            _readFromStorage: function readFromStorage(thumbprint) {
+                var stored = {}, isExpired;
+                if (this.storage) {
+                    stored.data = this.storage.get(keys.data);
+                    stored.protocol = this.storage.get(keys.protocol);
+                    stored.thumbprint = this.storage.get(keys.thumbprint);
+                }
+                isExpired = stored.thumbprint !== thumbprint || stored.protocol !== location.protocol;
+                return stored.data && !isExpired ? stored.data : null;
+            },
+            _initialize: function initialize() {
+                var that = this, local = this.local, deferred;
+                deferred = this.prefetch ? this._loadPrefetch(this.prefetch) : $.Deferred().resolve();
+                local && deferred.done(addLocalToIndex);
+                this.transport = this.remote ? new Transport(this.remote) : null;
+                return this.initPromise = deferred.promise();
+                function addLocalToIndex() {
+                    that.add(_.isFunction(local) ? local() : local);
+                }
+            },
+            initialize: function initialize(force) {
+                return !this.initPromise || force ? this._initialize() : this.initPromise;
+            },
+            add: function add(data) {
+                this.index.add(data);
+            },
+            get: function get(query, cb) {
+                var that = this, matches = [], cacheHit = false;
+                matches = this.index.get(query);
+                matches = this.sorter(matches).slice(0, this.limit);
+                if (matches.length < this.limit && this.transport) {
+                    cacheHit = this._getFromRemote(query, returnRemoteMatches);
+                }
+                if (!cacheHit) {
+                    (matches.length > 0 || !this.transport) && cb && cb(matches);
+                }
+                function returnRemoteMatches(remoteMatches) {
+                    var matchesWithBackfill = matches.slice(0);
+                    _.each(remoteMatches, function(remoteMatch) {
+                        var isDuplicate;
+                        isDuplicate = _.some(matchesWithBackfill, function(match) {
+                            return that.dupDetector(remoteMatch, match);
+                        });
+                        !isDuplicate && matchesWithBackfill.push(remoteMatch);
+                        return matchesWithBackfill.length < that.limit;
+                    });
+                    cb && cb(that.sorter(matchesWithBackfill));
+                }
+            },
+            clear: function clear() {
+                this.index.reset();
+            },
+            clearPrefetchCache: function clearPrefetchCache() {
+                this.storage && this.storage.clear();
+            },
+            clearRemoteCache: function clearRemoteCache() {
+                this.transport && Transport.resetCache();
+            },
+            ttAdapter: function ttAdapter() {
+                return _.bind(this.get, this);
+            }
+        });
+        return Bloodhound;
+        function getSorter(sortFn) {
+            return _.isFunction(sortFn) ? sort : noSort;
+            function sort(array) {
+                return array.sort(sortFn);
+            }
+            function noSort(array) {
+                return array;
+            }
+        }
+        function ignoreDuplicates() {
+            return false;
+        }
+    })(this);
+    var html = {
+        wrapper: '<span class="twitter-typeahead"></span>',
+        dropdown: '<span class="tt-dropdown-menu"></span>',
+        dataset: '<div class="tt-dataset-%CLASS%"></div>',
+        suggestions: '<span class="tt-suggestions"></span>',
+        suggestion: '<div class="tt-suggestion"></div>'
+    };
+    var css = {
+        wrapper: {
+            position: "relative",
+            display: "inline-block"
+        },
+        hint: {
+            position: "absolute",
+            top: "0",
+            left: "0",
+            borderColor: "transparent",
+            boxShadow: "none"
+        },
+        input: {
+            position: "relative",
+            verticalAlign: "top",
+            backgroundColor: "transparent"
+        },
+        inputWithNoHint: {
+            position: "relative",
+            verticalAlign: "top"
+        },
+        dropdown: {
+            position: "absolute",
+            top: "100%",
+            left: "0",
+            zIndex: "100",
+            display: "none"
+        },
+        suggestions: {
+            display: "block"
+        },
+        suggestion: {
+            whiteSpace: "nowrap",
+            cursor: "pointer"
+        },
+        suggestionChild: {
+            whiteSpace: "normal"
+        },
+        ltr: {
+            left: "0",
+            right: "auto"
+        },
+        rtl: {
+            left: "auto",
+            right: " 0"
+        }
+    };
+    if (_.isMsie()) {
+        _.mixin(css.input, {
+            backgroundImage: "url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)"
+        });
+    }
+    if (_.isMsie() && _.isMsie() <= 7) {
+        _.mixin(css.input, {
+            marginTop: "-1px"
+        });
+    }
+    var EventBus = function() {
+        var namespace = "typeahead:";
+        function EventBus(o) {
+            if (!o || !o.el) {
+                $.error("EventBus initialized without el");
+            }
+            this.$el = $(o.el);
+        }
+        _.mixin(EventBus.prototype, {
+            trigger: function(type) {
+                var args = [].slice.call(arguments, 1);
+                this.$el.trigger(namespace + type, args);
+            }
+        });
+        return EventBus;
+    }();
+    var EventEmitter = function() {
+        var splitter = /\s+/, nextTick = getNextTick();
+        return {
+            onSync: onSync,
+            onAsync: onAsync,
+            off: off,
+            trigger: trigger
+        };
+        function on(method, types, cb, context) {
+            var type;
+            if (!cb) {
+                return this;
+            }
+            types = types.split(splitter);
+            cb = context ? bindContext(cb, context) : cb;
+            this._callbacks = this._callbacks || {};
+            while (type = types.shift()) {
+                this._callbacks[type] = this._callbacks[type] || {
+                    sync: [],
+                    async: []
+                };
+                this._callbacks[type][method].push(cb);
+            }
+            return this;
+        }
+        function onAsync(types, cb, context) {
+            return on.call(this, "async", types, cb, context);
+        }
+        function onSync(types, cb, context) {
+            return on.call(this, "sync", types, cb, context);
+        }
+        function off(types) {
+            var type;
+            if (!this._callbacks) {
+                return this;
+            }
+            types = types.split(splitter);
+            while (type = types.shift()) {
+                delete this._callbacks[type];
+            }
+            return this;
+        }
+        function trigger(types) {
+            var type, callbacks, args, syncFlush, asyncFlush;
+            if (!this._callbacks) {
+                return this;
+            }
+            types = types.split(splitter);
+            args = [].slice.call(arguments, 1);
+            while ((type = types.shift()) && (callbacks = this._callbacks[type])) {
+                syncFlush = getFlush(callbacks.sync, this, [ type ].concat(args));
+                asyncFlush = getFlush(callbacks.async, this, [ type ].concat(args));
+                syncFlush() && nextTick(asyncFlush);
+            }
+            return this;
+        }
+        function getFlush(callbacks, context, args) {
+            return flush;
+            function flush() {
+                var cancelled;
+                for (var i = 0; !cancelled && i < callbacks.length; i += 1) {
+                    cancelled = callbacks[i].apply(context, args) === false;
+                }
+                return !cancelled;
+            }
+        }
+        function getNextTick() {
+            var nextTickFn;
+            if (window.setImmediate) {
+                nextTickFn = function nextTickSetImmediate(fn) {
+                    setImmediate(function() {
+                        fn();
+                    });
+                };
             } else {
-              end = start;
+                nextTickFn = function nextTickSetTimeout(fn) {
+                    setTimeout(function() {
+                        fn();
+                    }, 0);
+                };
             }
-            ranges.push([start, end]);
-            // If the range might intersect letters, then expand it.
-            // This case handling is too simplistic.
-            // It does not deal with non-latin case folding.
-            // It works for latin source code identifiers though.
-            if (!(end < 65 || start > 122)) {
-              if (!(end < 65 || start > 90)) {
-                ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
-              }
-              if (!(end < 97 || start > 122)) {
-                ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
-              }
+            return nextTickFn;
+        }
+        function bindContext(fn, context) {
+            return fn.bind ? fn.bind(context) : function() {
+                fn.apply(context, [].slice.call(arguments, 0));
+            };
+        }
+    }();
+    var highlight = function(doc) {
+        var defaults = {
+            node: null,
+            pattern: null,
+            tagName: "strong",
+            className: null,
+            wordsOnly: false,
+            caseSensitive: false
+        };
+        return function hightlight(o) {
+            var regex;
+            o = _.mixin({}, defaults, o);
+            if (!o.node || !o.pattern) {
+                return;
             }
-          }
+            o.pattern = _.isArray(o.pattern) ? o.pattern : [ o.pattern ];
+            regex = getRegex(o.pattern, o.caseSensitive, o.wordsOnly);
+            traverse(o.node, hightlightTextNode);
+            function hightlightTextNode(textNode) {
+                var match, patternNode;
+                if (match = regex.exec(textNode.data)) {
+                    wrapperNode = doc.createElement(o.tagName);
+                    o.className && (wrapperNode.className = o.className);
+                    patternNode = textNode.splitText(match.index);
+                    patternNode.splitText(match[0].length);
+                    wrapperNode.appendChild(patternNode.cloneNode(true));
+                    textNode.parentNode.replaceChild(wrapperNode, patternNode);
+                }
+                return !!match;
+            }
+            function traverse(el, hightlightTextNode) {
+                var childNode, TEXT_NODE_TYPE = 3;
+                for (var i = 0; i < el.childNodes.length; i++) {
+                    childNode = el.childNodes[i];
+                    if (childNode.nodeType === TEXT_NODE_TYPE) {
+                        i += hightlightTextNode(childNode) ? 1 : 0;
+                    } else {
+                        traverse(childNode, hightlightTextNode);
+                    }
+                }
+            }
+        };
+        function getRegex(patterns, caseSensitive, wordsOnly) {
+            var escapedPatterns = [], regexStr;
+            for (var i = 0; i < patterns.length; i++) {
+                escapedPatterns.push(_.escapeRegExChars(patterns[i]));
+            }
+            regexStr = wordsOnly ? "\\b(" + escapedPatterns.join("|") + ")\\b" : "(" + escapedPatterns.join("|") + ")";
+            return caseSensitive ? new RegExp(regexStr) : new RegExp(regexStr, "i");
         }
-    
-        // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
-        // -> [[1, 12], [14, 14], [16, 17]]
-        ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1]  - a[1]); });
-        var consolidatedRanges = [];
-        var lastRange = [];
-        for (var i = 0; i < ranges.length; ++i) {
-          var range = ranges[i];
-          if (range[0] <= lastRange[1] + 1) {
-            lastRange[1] = Math.max(lastRange[1], range[1]);
-          } else {
-            consolidatedRanges.push(lastRange = range);
-          }
+    }(window.document);
+    var Input = function() {
+        var specialKeyCodeMap;
+        specialKeyCodeMap = {
+            9: "tab",
+            27: "esc",
+            37: "left",
+            39: "right",
+            13: "enter",
+            38: "up",
+            40: "down"
+        };
+        function Input(o) {
+            var that = this, onBlur, onFocus, onKeydown, onInput;
+            o = o || {};
+            if (!o.input) {
+                $.error("input is missing");
+            }
+            onBlur = _.bind(this._onBlur, this);
+            onFocus = _.bind(this._onFocus, this);
+            onKeydown = _.bind(this._onKeydown, this);
+            onInput = _.bind(this._onInput, this);
+            this.$hint = $(o.hint);
+            this.$input = $(o.input).on("blur.tt", onBlur).on("focus.tt", onFocus).on("keydown.tt", onKeydown);
+            if (this.$hint.length === 0) {
+                this.setHint = this.getHint = this.clearHint = this.clearHintIfInvalid = _.noop;
+            }
+            if (!_.isMsie()) {
+                this.$input.on("input.tt", onInput);
+            } else {
+                this.$input.on("keydown.tt keypress.tt cut.tt paste.tt", function($e) {
+                    if (specialKeyCodeMap[$e.which || $e.keyCode]) {
+                        return;
+                    }
+                    _.defer(_.bind(that._onInput, that, $e));
+                });
+            }
+            this.query = this.$input.val();
+            this.$overflowHelper = buildOverflowHelper(this.$input);
         }
-    
-        for (var i = 0; i < consolidatedRanges.length; ++i) {
-          var range = consolidatedRanges[i];
-          out.push(encodeEscape(range[0]));
-          if (range[1] > range[0]) {
-            if (range[1] + 1 > range[0]) { out.push('-'); }
-            out.push(encodeEscape(range[1]));
-          }
+        Input.normalizeQuery = function(str) {
+            return (str || "").replace(/^\s*/g, "").replace(/\s{2,}/g, " ");
+        };
+        _.mixin(Input.prototype, EventEmitter, {
+            _onBlur: function onBlur() {
+                this.resetInputValue();
+                this.trigger("blurred");
+            },
+            _onFocus: function onFocus() {
+                this.trigger("focused");
+            },
+            _onKeydown: function onKeydown($e) {
+                var keyName = specialKeyCodeMap[$e.which || $e.keyCode];
+                this._managePreventDefault(keyName, $e);
+                if (keyName && this._shouldTrigger(keyName, $e)) {
+                    this.trigger(keyName + "Keyed", $e);
+                }
+            },
+            _onInput: function onInput() {
+                this._checkInputValue();
+            },
+            _managePreventDefault: function managePreventDefault(keyName, $e) {
+                var preventDefault, hintValue, inputValue;
+                switch (keyName) {
+                  case "tab":
+                    hintValue = this.getHint();
+                    inputValue = this.getInputValue();
+                    preventDefault = hintValue && hintValue !== inputValue && !withModifier($e);
+                    break;
+
+                  case "up":
+                  case "down":
+                    preventDefault = !withModifier($e);
+                    break;
+
+                  default:
+                    preventDefault = false;
+                }
+                preventDefault && $e.preventDefault();
+            },
+            _shouldTrigger: function shouldTrigger(keyName, $e) {
+                var trigger;
+                switch (keyName) {
+                  case "tab":
+                    trigger = !withModifier($e);
+                    break;
+
+                  default:
+                    trigger = true;
+                }
+                return trigger;
+            },
+            _checkInputValue: function checkInputValue() {
+                var inputValue, areEquivalent, hasDifferentWhitespace;
+                inputValue = this.getInputValue();
+                areEquivalent = areQueriesEquivalent(inputValue, this.query);
+                hasDifferentWhitespace = areEquivalent ? this.query.length !== inputValue.length : false;
+                if (!areEquivalent) {
+                    this.trigger("queryChanged", this.query = inputValue);
+                } else if (hasDifferentWhitespace) {
+                    this.trigger("whitespaceChanged", this.query);
+                }
+            },
+            focus: function focus() {
+                this.$input.focus();
+            },
+            blur: function blur() {
+                this.$input.blur();
+            },
+            getQuery: function getQuery() {
+                return this.query;
+            },
+            setQuery: function setQuery(query) {
+                this.query = query;
+            },
+            getInputValue: function getInputValue() {
+                return this.$input.val();
+            },
+            setInputValue: function setInputValue(value, silent) {
+                this.$input.val(value);
+                silent ? this.clearHint() : this._checkInputValue();
+            },
+            resetInputValue: function resetInputValue() {
+                this.setInputValue(this.query, true);
+            },
+            getHint: function getHint() {
+                return this.$hint.val();
+            },
+            setHint: function setHint(value) {
+                this.$hint.val(value);
+            },
+            clearHint: function clearHint() {
+                this.setHint("");
+            },
+            clearHintIfInvalid: function clearHintIfInvalid() {
+                var val, hint, valIsPrefixOfHint, isValid;
+                val = this.getInputValue();
+                hint = this.getHint();
+                valIsPrefixOfHint = val !== hint && hint.indexOf(val) === 0;
+                isValid = val !== "" && valIsPrefixOfHint && !this.hasOverflow();
+                !isValid && this.clearHint();
+            },
+            getLanguageDirection: function getLanguageDirection() {
+                return (this.$input.css("direction") || "ltr").toLowerCase();
+            },
+            hasOverflow: function hasOverflow() {
+                var constraint = this.$input.width() - 2;
+                this.$overflowHelper.text(this.getInputValue());
+                return this.$overflowHelper.width() >= constraint;
+            },
+            isCursorAtEnd: function() {
+                var valueLength, selectionStart, range;
+                valueLength = this.$input.val().length;
+                selectionStart = this.$input[0].selectionStart;
+                if (_.isNumber(selectionStart)) {
+                    return selectionStart === valueLength;
+                } else if (document.selection) {
+                    range = document.selection.createRange();
+                    range.moveStart("character", -valueLength);
+                    return valueLength === range.text.length;
+                }
+                return true;
+            },
+            destroy: function destroy() {
+                this.$hint.off(".tt");
+                this.$input.off(".tt");
+                this.$hint = this.$input = this.$overflowHelper = null;
+            }
+        });
+        return Input;
+        function buildOverflowHelper($input) {
+            return $('<pre aria-hidden="true"></pre>').css({
+                position: "absolute",
+                visibility: "hidden",
+                whiteSpace: "pre",
+                fontFamily: $input.css("font-family"),
+                fontSize: $input.css("font-size"),
+                fontStyle: $input.css("font-style"),
+                fontVariant: $input.css("font-variant"),
+                fontWeight: $input.css("font-weight"),
+                wordSpacing: $input.css("word-spacing"),
+                letterSpacing: $input.css("letter-spacing"),
+                textIndent: $input.css("text-indent"),
+                textRendering: $input.css("text-rendering"),
+                textTransform: $input.css("text-transform")
+            }).insertAfter($input);
         }
-        out.push(']');
-        return out.join('');
-      }
-    
-      function allowAnywhereFoldCaseAndRenumberGroups(regex) {
-        // Split into character sets, escape sequences, punctuation strings
-        // like ('(', '(?:', ')', '^'), and runs of characters that do not
-        // include any of the above.
-        var parts = regex.source.match(
-            new RegExp(
-                '(?:'
-                + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]'  // a character set
-                + '|\\\\u[A-Fa-f0-9]{4}'  // a unicode escape
-                + '|\\\\x[A-Fa-f0-9]{2}'  // a hex escape
-                + '|\\\\[0-9]+'  // a back-reference or octal escape
-                + '|\\\\[^ux0-9]'  // other escape sequence
-                + '|\\(\\?[:!=]'  // start of a non-capturing group
-                + '|[\\(\\)\\^]'  // start/end of a group, or line start
-                + '|[^\\x5B\\x5C\\(\\)\\^]+'  // run of other characters
-                + ')',
-                'g'));
-        var n = parts.length;
-    
-        // Maps captured group numbers to the number they will occupy in
-        // the output or to -1 if that has not been determined, or to
-        // undefined if they need not be capturing in the output.
-        var capturedGroups = [];
-    
-        // Walk over and identify back references to build the capturedGroups
-        // mapping.
-        for (var i = 0, groupIndex = 0; i < n; ++i) {
-          var p = parts[i];
-          if (p === '(') {
-            // groups are 1-indexed, so max group index is count of '('
-            ++groupIndex;
-          } else if ('\\' === p.charAt(0)) {
-            var decimalValue = +p.substring(1);
-            if (decimalValue) {
-              if (decimalValue <= groupIndex) {
-                capturedGroups[decimalValue] = -1;
-              } else {
-                // Replace with an unambiguous escape sequence so that
-                // an octal escape sequence does not turn into a backreference
-                // to a capturing group from an earlier regex.
-                parts[i] = encodeEscape(decimalValue);
-              }
+        function areQueriesEquivalent(a, b) {
+            return Input.normalizeQuery(a) === Input.normalizeQuery(b);
+        }
+        function withModifier($e) {
+            return $e.altKey || $e.ctrlKey || $e.metaKey || $e.shiftKey;
+        }
+    }();
+    var Dataset = function() {
+        var datasetKey = "ttDataset", valueKey = "ttValue", datumKey = "ttDatum";
+        function Dataset(o) {
+            o = o || {};
+            o.templates = o.templates || {};
+            if (!o.source) {
+                $.error("missing source");
             }
-          }
+            if (o.name && !isValidName(o.name)) {
+                $.error("invalid dataset name: " + o.name);
+            }
+            this.query = null;
+            this.highlight = !!o.highlight;
+            this.name = o.name || _.getUniqueId();
+            this.source = o.source;
+            this.displayFn = getDisplayFn(o.display || o.displayKey);
+            this.templates = getTemplates(o.templates, this.displayFn);
+            this.$el = $(html.dataset.replace("%CLASS%", this.name));
         }
-    
-        // Renumber groups and reduce capturing groups to non-capturing groups
-        // where possible.
-        for (var i = 1; i < capturedGroups.length; ++i) {
-          if (-1 === capturedGroups[i]) {
-            capturedGroups[i] = ++capturedGroupIndex;
-          }
+        Dataset.extractDatasetName = function extractDatasetName(el) {
+            return $(el).data(datasetKey);
+        };
+        Dataset.extractValue = function extractDatum(el) {
+            return $(el).data(valueKey);
+        };
+        Dataset.extractDatum = function extractDatum(el) {
+            return $(el).data(datumKey);
+        };
+        _.mixin(Dataset.prototype, EventEmitter, {
+            _render: function render(query, suggestions) {
+                if (!this.$el) {
+                    return;
+                }
+                var that = this, hasSuggestions;
+                this.$el.empty();
+                hasSuggestions = suggestions && suggestions.length;
+                if (!hasSuggestions && this.templates.empty) {
+                    this.$el.html(getEmptyHtml()).prepend(that.templates.header ? getHeaderHtml() : null).append(that.templates.footer ? getFooterHtml() : null);
+                } else if (hasSuggestions) {
+                    this.$el.html(getSuggestionsHtml()).prepend(that.templates.header ? getHeaderHtml() : null).append(that.templates.footer ? getFooterHtml() : null);
+                }
+                this.trigger("rendered");
+                function getEmptyHtml() {
+                    return that.templates.empty({
+                        query: query,
+                        isEmpty: true
+                    });
+                }
+                function getSuggestionsHtml() {
+                    var $suggestions, nodes;
+                    $suggestions = $(html.suggestions).css(css.suggestions);
+                    nodes = _.map(suggestions, getSuggestionNode);
+                    $suggestions.append.apply($suggestions, nodes);
+                    that.highlight && highlight({
+                        node: $suggestions[0],
+                        pattern: query
+                    });
+                    return $suggestions;
+                    function getSuggestionNode(suggestion) {
+                        var $el;
+                        $el = $(html.suggestion).append(that.templates.suggestion(suggestion)).data(datasetKey, that.name).data(valueKey, that.displayFn(suggestion)).data(datumKey, suggestion);
+                        $el.children().each(function() {
+                            $(this).css(css.suggestionChild);
+                        });
+                        return $el;
+                    }
+                }
+                function getHeaderHtml() {
+                    return that.templates.header({
+                        query: query,
+                        isEmpty: !hasSuggestions
+                    });
+                }
+                function getFooterHtml() {
+                    return that.templates.footer({
+                        query: query,
+                        isEmpty: !hasSuggestions
+                    });
+                }
+            },
+            getRoot: function getRoot() {
+                return this.$el;
+            },
+            update: function update(query) {
+                var that = this;
+                this.query = query;
+                this.canceled = false;
+                this.source(query, render);
+                function render(suggestions) {
+                    if (!that.canceled && query === that.query) {
+                        that._render(query, suggestions);
+                    }
+                }
+            },
+            cancel: function cancel() {
+                this.canceled = true;
+            },
+            clear: function clear() {
+                this.cancel();
+                this.$el.empty();
+                this.trigger("rendered");
+            },
+            isEmpty: function isEmpty() {
+                return this.$el.is(":empty");
+            },
+            destroy: function destroy() {
+                this.$el = null;
+            }
+        });
+        return Dataset;
+        function getDisplayFn(display) {
+            display = display || "value";
+            return _.isFunction(display) ? display : displayFn;
+            function displayFn(obj) {
+                return obj[display];
+            }
         }
-        for (var i = 0, groupIndex = 0; i < n; ++i) {
-          var p = parts[i];
-          if (p === '(') {
-            ++groupIndex;
-            if (!capturedGroups[groupIndex]) {
-              parts[i] = '(?:';
+        function getTemplates(templates, displayFn) {
+            return {
+                empty: templates.empty && _.templatify(templates.empty),
+                header: templates.header && _.templatify(templates.header),
+                footer: templates.footer && _.templatify(templates.footer),
+                suggestion: templates.suggestion || suggestionTemplate
+            };
+            function suggestionTemplate(context) {
+                return "<p>" + displayFn(context) + "</p>";
             }
-          } else if ('\\' === p.charAt(0)) {
-            var decimalValue = +p.substring(1);
-            if (decimalValue && decimalValue <= groupIndex) {
-              parts[i] = '\\' + capturedGroups[decimalValue];
+        }
+        function isValidName(str) {
+            return /^[_a-zA-Z0-9-]+$/.test(str);
+        }
+    }();
+    var Dropdown = function() {
+        function Dropdown(o) {
+            var that = this, onSuggestionClick, onSuggestionMouseEnter, onSuggestionMouseLeave;
+            o = o || {};
+            if (!o.menu) {
+                $.error("menu is required");
             }
-          }
+            this.isOpen = false;
+            this.isEmpty = true;
+            this.datasets = _.map(o.datasets, initializeDataset);
+            onSuggestionClick = _.bind(this._onSuggestionClick, this);
+            onSuggestionMouseEnter = _.bind(this._onSuggestionMouseEnter, this);
+            onSuggestionMouseLeave = _.bind(this._onSuggestionMouseLeave, this);
+            this.$menu = $(o.menu).on("click.tt", ".tt-suggestion", onSuggestionClick).on("mouseenter.tt", ".tt-suggestion", onSuggestionMouseEnter).on("mouseleave.tt", ".tt-suggestion", onSuggestionMouseLeave);
+            _.each(this.datasets, function(dataset) {
+                that.$menu.append(dataset.getRoot());
+                dataset.onSync("rendered", that._onRendered, that);
+            });
         }
-    
-        // Remove any prefix anchors so that the output will match anywhere.
-        // ^^ really does mean an anchored match though.
-        for (var i = 0; i < n; ++i) {
-          if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
+        _.mixin(Dropdown.prototype, EventEmitter, {
+            _onSuggestionClick: function onSuggestionClick($e) {
+                this.trigger("suggestionClicked", $($e.currentTarget));
+            },
+            _onSuggestionMouseEnter: function onSuggestionMouseEnter($e) {
+                this._removeCursor();
+                this._setCursor($($e.currentTarget), true);
+            },
+            _onSuggestionMouseLeave: function onSuggestionMouseLeave() {
+                this._removeCursor();
+            },
+            _onRendered: function onRendered() {
+                this.isEmpty = _.every(this.datasets, isDatasetEmpty);
+                this.isEmpty ? this._hide() : this.isOpen && this._show();
+                this.trigger("datasetRendered");
+                function isDatasetEmpty(dataset) {
+                    return dataset.isEmpty();
+                }
+            },
+            _hide: function() {
+                this.$menu.hide();
+            },
+            _show: function() {
+                this.$menu.css("display", "block");
+            },
+            _getSuggestions: function getSuggestions() {
+                return this.$menu.find(".tt-suggestion");
+            },
+            _getCursor: function getCursor() {
+                return this.$menu.find(".tt-cursor").first();
+            },
+            _setCursor: function setCursor($el, silent) {
+                $el.first().addClass("tt-cursor");
+                !silent && this.trigger("cursorMoved");
+            },
+            _removeCursor: function removeCursor() {
+                this._getCursor().removeClass("tt-cursor");
+            },
+            _moveCursor: function moveCursor(increment) {
+                var $suggestions, $oldCursor, newCursorIndex, $newCursor;
+                if (!this.isOpen) {
+                    return;
+                }
+                $oldCursor = this._getCursor();
+                $suggestions = this._getSuggestions();
+                this._removeCursor();
+                newCursorIndex = $suggestions.index($oldCursor) + increment;
+                newCursorIndex = (newCursorIndex + 1) % ($suggestions.length + 1) - 1;
+                if (newCursorIndex === -1) {
+                    this.trigger("cursorRemoved");
+                    return;
+                } else if (newCursorIndex < -1) {
+                    newCursorIndex = $suggestions.length - 1;
+                }
+                this._setCursor($newCursor = $suggestions.eq(newCursorIndex));
+                this._ensureVisible($newCursor);
+            },
+            _ensureVisible: function ensureVisible($el) {
+                var elTop, elBottom, menuScrollTop, menuHeight;
+                elTop = $el.position().top;
+                elBottom = elTop + $el.outerHeight(true);
+                menuScrollTop = this.$menu.scrollTop();
+                menuHeight = this.$menu.height() + parseInt(this.$menu.css("paddingTop"), 10) + parseInt(this.$menu.css("paddingBottom"), 10);
+                if (elTop < 0) {
+                    this.$menu.scrollTop(menuScrollTop + elTop);
+                } else if (menuHeight < elBottom) {
+                    this.$menu.scrollTop(menuScrollTop + (elBottom - menuHeight));
+                }
+            },
+            close: function close() {
+                if (this.isOpen) {
+                    this.isOpen = false;
+                    this._removeCursor();
+                    this._hide();
+                    this.trigger("closed");
+                }
+            },
+            open: function open() {
+                if (!this.isOpen) {
+                    this.isOpen = true;
+                    !this.isEmpty && this._show();
+                    this.trigger("opened");
+                }
+            },
+            setLanguageDirection: function setLanguageDirection(dir) {
+                this.$menu.css(dir === "ltr" ? css.ltr : css.rtl);
+            },
+            moveCursorUp: function moveCursorUp() {
+                this._moveCursor(-1);
+            },
+            moveCursorDown: function moveCursorDown() {
+                this._moveCursor(+1);
+            },
+            getDatumForSuggestion: function getDatumForSuggestion($el) {
+                var datum = null;
+                if ($el.length) {
+                    datum = {
+                        raw: Dataset.extractDatum($el),
+                        value: Dataset.extractValue($el),
+                        datasetName: Dataset.extractDatasetName($el)
+                    };
+                }
+                return datum;
+            },
+            getDatumForCursor: function getDatumForCursor() {
+                return this.getDatumForSuggestion(this._getCursor().first());
+            },
+            getDatumForTopSuggestion: function getDatumForTopSuggestion() {
+                return this.getDatumForSuggestion(this._getSuggestions().first());
+            },
+            update: function update(query) {
+                _.each(this.datasets, updateDataset);
+                function updateDataset(dataset) {
+                    dataset.update(query);
+                }
+            },
+            empty: function empty() {
+                _.each(this.datasets, clearDataset);
+                this.isEmpty = true;
+                function clearDataset(dataset) {
+                    dataset.clear();
+                }
+            },
+            isVisible: function isVisible() {
+                return this.isOpen && !this.isEmpty;
+            },
+            destroy: function destroy() {
+                this.$menu.off(".tt");
+                this.$menu = null;
+                _.each(this.datasets, destroyDataset);
+                function destroyDataset(dataset) {
+                    dataset.destroy();
+                }
+            }
+        });
+        return Dropdown;
+        function initializeDataset(oDataset) {
+            return new Dataset(oDataset);
         }
-    
-        // Expand letters to groups to handle mixing of case-sensitive and
-        // case-insensitive patterns if necessary.
-        if (regex.ignoreCase && needToFoldCase) {
-          for (var i = 0; i < n; ++i) {
-            var p = parts[i];
-            var ch0 = p.charAt(0);
-            if (p.length >= 2 && ch0 === '[') {
-              parts[i] = caseFoldCharset(p);
-            } else if (ch0 !== '\\') {
-              // TODO: handle letters in numeric escapes.
-              parts[i] = p.replace(
-                  /[a-zA-Z]/g,
-                  function (ch) {
-                    var cc = ch.charCodeAt(0);
-                    return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
-                  });
+    }();
+    var Typeahead = function() {
+        var attrsKey = "ttAttrs";
+        function Typeahead(o) {
+            var $menu, $input, $hint;
+            o = o || {};
+            if (!o.input) {
+                $.error("missing input");
             }
-          }
+            this.isActivated = false;
+            this.autoselect = !!o.autoselect;
+            this.minLength = _.isNumber(o.minLength) ? o.minLength : 1;
+            this.$node = buildDomStructure(o.input, o.withHint);
+            $menu = this.$node.find(".tt-dropdown-menu");
+            $input = this.$node.find(".tt-input");
+            $hint = this.$node.find(".tt-hint");
+            $input.on("blur.tt", function($e) {
+                var active, isActive, hasActive;
+                active = document.activeElement;
+                isActive = $menu.is(active);
+                hasActive = $menu.has(active).length > 0;
+                if (_.isMsie() && (isActive || hasActive)) {
+                    $e.preventDefault();
+                    $e.stopImmediatePropagation();
+                    _.defer(function() {
+                        $input.focus();
+                    });
+                }
+            });
+            $menu.on("mousedown.tt", function($e) {
+                $e.preventDefault();
+            });
+            this.eventBus = o.eventBus || new EventBus({
+                el: $input
+            });
+            this.dropdown = new Dropdown({
+                menu: $menu,
+                datasets: o.datasets
+            }).onSync("suggestionClicked", this._onSuggestionClicked, this).onSync("cursorMoved", this._onCursorMoved, this).onSync("cursorRemoved", this._onCursorRemoved, this).onSync("opened", this._onOpened, this).onSync("closed", this._onClosed, this).onAsync("datasetRendered", this._onDatasetRendered, this);
+            this.input = new Input({
+                input: $input,
+                hint: $hint
+            }).onSync("focused", this._onFocused, this).onSync("blurred", this._onBlurred, this).onSync("enterKeyed", this._onEnterKeyed, this).onSync("tabKeyed", this._onTabKeyed, this).onSync("escKeyed", this._onEscKeyed, this).onSync("upKeyed", this._onUpKeyed, this).onSync("downKeyed", this._onDownKeyed, this).onSync("leftKeyed", this._onLeftKeyed, this).onSync("rightKeyed", this._onRightKeyed, this).onSync("queryChanged", this._onQueryChanged, this).onSync("whitespaceChanged", this._onWhitespaceChanged, this);
+            this._setLanguageDirection();
+        }
+        _.mixin(Typeahead.prototype, {
+            _onSuggestionClicked: function onSuggestionClicked(type, $el) {
+                var datum;
+                if (datum = this.dropdown.getDatumForSuggestion($el)) {
+                    this._select(datum);
+                }
+            },
+            _onCursorMoved: function onCursorMoved() {
+                var datum = this.dropdown.getDatumForCursor();
+                this.input.setInputValue(datum.value, true);
+                this.eventBus.trigger("cursorchanged", datum.raw, datum.datasetName);
+            },
+            _onCursorRemoved: function onCursorRemoved() {
+                this.input.resetInputValue();
+                this._updateHint();
+            },
+            _onDatasetRendered: function onDatasetRendered() {
+                this._updateHint();
+            },
+            _onOpened: function onOpened() {
+                this._updateHint();
+                this.eventBus.trigger("opened");
+            },
+            _onClosed: function onClosed() {
+                this.input.clearHint();
+                this.eventBus.trigger("closed");
+            },
+            _onFocused: function onFocused() {
+                this.isActivated = true;
+                this.dropdown.open();
+            },
+            _onBlurred: function onBlurred() {
+                this.isActivated = false;
+                this.dropdown.empty();
+                this.dropdown.close();
+                this.setVal("", true); //LM
+            },
+            _onEnterKeyed: function onEnterKeyed(type, $e) {
+                var cursorDatum, topSuggestionDatum;
+                cursorDatum = this.dropdown.getDatumForCursor();
+                topSuggestionDatum = this.dropdown.getDatumForTopSuggestion();
+                if (cursorDatum) {
+                    this._select(cursorDatum);
+                    $e.preventDefault();
+                } else if (this.autoselect && topSuggestionDatum) {
+                    this._select(topSuggestionDatum);
+                    $e.preventDefault();
+                }
+            },
+            _onTabKeyed: function onTabKeyed(type, $e) {
+                var datum;
+                if (datum = this.dropdown.getDatumForCursor()) {
+                    this._select(datum);
+                    $e.preventDefault();
+                } else {
+                    this._autocomplete(true);
+                }
+            },
+            _onEscKeyed: function onEscKeyed() {
+                this.dropdown.close();
+                this.input.resetInputValue();
+            },
+            _onUpKeyed: function onUpKeyed() {
+                var query = this.input.getQuery();
+                this.dropdown.isEmpty && query.length >= this.minLength ? this.dropdown.update(query) : this.dropdown.moveCursorUp();
+                this.dropdown.open();
+            },
+            _onDownKeyed: function onDownKeyed() {
+                var query = this.input.getQuery();
+                this.dropdown.isEmpty && query.length >= this.minLength ? this.dropdown.update(query) : this.dropdown.moveCursorDown();
+                this.dropdown.open();
+            },
+            _onLeftKeyed: function onLeftKeyed() {
+                this.dir === "rtl" && this._autocomplete();
+            },
+            _onRightKeyed: function onRightKeyed() {
+                this.dir === "ltr" && this._autocomplete();
+            },
+            _onQueryChanged: function onQueryChanged(e, query) {
+                this.input.clearHintIfInvalid();
+                query.length >= this.minLength ? this.dropdown.update(query) : this.dropdown.empty();
+                this.dropdown.open();
+                this._setLanguageDirection();
+            },
+            _onWhitespaceChanged: function onWhitespaceChanged() {
+                this._updateHint();
+                this.dropdown.open();
+            },
+            _setLanguageDirection: function setLanguageDirection() {
+                var dir;
+                if (this.dir !== (dir = this.input.getLanguageDirection())) {
+                    this.dir = dir;
+                    this.$node.css("direction", dir);
+                    this.dropdown.setLanguageDirection(dir);
+                }
+            },
+            _updateHint: function updateHint() {
+                var datum, val, query, escapedQuery, frontMatchRegEx, match;
+                datum = this.dropdown.getDatumForTopSuggestion();
+                if (datum && this.dropdown.isVisible() && !this.input.hasOverflow()) {
+                    val = this.input.getInputValue();
+                    query = Input.normalizeQuery(val);
+                    escapedQuery = _.escapeRegExChars(query);
+                    frontMatchRegEx = new RegExp("^(?:" + escapedQuery + ")(.+$)", "i");
+                    match = frontMatchRegEx.exec(datum.value);
+                    match ? this.input.setHint(val + match[1]) : this.input.clearHint();
+                } else {
+                    this.input.clearHint();
+                }
+            },
+            _autocomplete: function autocomplete(laxCursor) {
+                var hint, query, isCursorAtEnd, datum;
+                hint = this.input.getHint();
+                query = this.input.getQuery();
+                isCursorAtEnd = laxCursor || this.input.isCursorAtEnd();
+                if (hint && query !== hint && isCursorAtEnd) {
+                    datum = this.dropdown.getDatumForTopSuggestion();
+                    datum && this.input.setInputValue(datum.value);
+                    this.eventBus.trigger("autocompleted", datum.raw, datum.datasetName);
+                }
+            },
+            _select: function select(datum) {
+                this.input.setQuery(datum.value);
+                this.input.setInputValue(datum.value, true);
+                this._setLanguageDirection();
+                this.eventBus.trigger("selected", datum.raw, datum.datasetName);
+                this.dropdown.close();
+                _.defer(_.bind(this.dropdown.empty, this.dropdown));
+            },
+            open: function open() {
+                this.dropdown.open();
+            },
+            close: function close() {
+                this.dropdown.close();
+            },
+            setVal: function setVal(val) {
+                if (this.isActivated) {
+                    this.input.setInputValue(val);
+                } else {
+                    this.input.setQuery(val);
+                    this.input.setInputValue(val, true);
+                }
+                this._setLanguageDirection();
+            },
+            getVal: function getVal() {
+                return this.input.getQuery();
+            },
+            destroy: function destroy() {
+                this.input.destroy();
+                this.dropdown.destroy();
+                destroyDomStructure(this.$node);
+                this.$node = null;
+            }
+        });
+        return Typeahead;
+        function buildDomStructure(input, withHint) {
+            var $input, $wrapper, $dropdown, $hint;
+            $input = $(input);
+            $wrapper = $(html.wrapper).css(css.wrapper);
+            $dropdown = $(html.dropdown).css(css.dropdown);
+            $hint = $input.clone().css(css.hint).css(getBackgroundStyles($input));
+            $hint.val("").removeData().addClass("tt-hint").removeAttr("id name placeholder").prop("disabled", true).attr({
+                autocomplete: "off",
+                spellcheck: "false"
+            });
+            $input.data(attrsKey, {
+                dir: $input.attr("dir"),
+                autocomplete: $input.attr("autocomplete"),
+                spellcheck: $input.attr("spellcheck"),
+                style: $input.attr("style")
+            });
+            $input.addClass("tt-input").attr({
+                autocomplete: "off",
+                spellcheck: false
+            }).css(withHint ? css.input : css.inputWithNoHint);
+            try {
+                !$input.attr("dir") && $input.attr("dir", "auto");
+            } catch (e) {}
+            return $input.wrap($wrapper).parent().prepend(withHint ? $hint : null).append($dropdown);
+        }
+        function getBackgroundStyles($el) {
+            return {
+                backgroundAttachment: $el.css("background-attachment"),
+                backgroundClip: $el.css("background-clip"),
+                backgroundColor: $el.css("background-color"),
+                backgroundImage: $el.css("background-image"),
+                backgroundOrigin: $el.css("background-origin"),
+                backgroundPosition: $el.css("background-position"),
+                backgroundRepeat: $el.css("background-repeat"),
+                backgroundSize: $el.css("background-size")
+            };
+        }
+        function destroyDomStructure($node) {
+            var $input = $node.find(".tt-input");
+            _.each($input.data(attrsKey), function(val, key) {
+                _.isUndefined(val) ? $input.removeAttr(key) : $input.attr(key, val);
+            });
+            $input.detach().removeData(attrsKey).removeClass("tt-input").insertAfter($node);
+            $node.remove();
         }
+    }();
+    (function() {
+        var old, typeaheadKey, methods;
+        old = $.fn.typeahead;
+        typeaheadKey = "ttTypeahead";
+        methods = {
+            initialize: function initialize(o, datasets) {
+                datasets = _.isArray(datasets) ? datasets : [].slice.call(arguments, 1);
+                o = o || {};
+                return this.each(attach);
+                function attach() {
+                    var $input = $(this), eventBus, typeahead;
+                    _.each(datasets, function(d) {
+                        d.highlight = !!o.highlight;
+                    });
+                    typeahead = new Typeahead({
+                        input: $input,
+                        eventBus: eventBus = new EventBus({
+                            el: $input
+                        }),
+                        withHint: _.isUndefined(o.hint) ? true : !!o.hint,
+                        minLength: o.minLength,
+                        autoselect: o.autoselect,
+                        datasets: datasets
+                    });
+                    $input.data(typeaheadKey, typeahead);
+                }
+            },
+            open: function open() {
+                return this.each(openTypeahead);
+                function openTypeahead() {
+                    var $input = $(this), typeahead;
+                    if (typeahead = $input.data(typeaheadKey)) {
+                        typeahead.open();
+                    }
+                }
+            },
+            close: function close() {
+                return this.each(closeTypeahead);
+                function closeTypeahead() {
+                    var $input = $(this), typeahead;
+                    if (typeahead = $input.data(typeaheadKey)) {
+                        typeahead.close();
+                    }
+                }
+            },
+            val: function val(newVal) {
+                return !arguments.length ? getVal(this.first()) : this.each(setVal);
+                function setVal() {
+                    var $input = $(this), typeahead;
+                    if (typeahead = $input.data(typeaheadKey)) {
+                        typeahead.setVal(newVal);
+                    }
+                }
+                function getVal($input) {
+                    var typeahead, query;
+                    if (typeahead = $input.data(typeaheadKey)) {
+                        query = typeahead.getVal();
+                    }
+                    return query;
+                }
+            },
+            destroy: function destroy() {
+                return this.each(unattach);
+                function unattach() {
+                    var $input = $(this), typeahead;
+                    if (typeahead = $input.data(typeaheadKey)) {
+                        typeahead.destroy();
+                        $input.removeData(typeaheadKey);
+                    }
+                }
+            }
+        };
+        $.fn.typeahead = function(method) {
+            if (methods[method]) {
+                return methods[method].apply(this, [].slice.call(arguments, 1));
+            } else {
+                return methods.initialize.apply(this, arguments);
+            }
+        };
+        $.fn.typeahead.noConflict = function noConflict() {
+            $.fn.typeahead = old;
+            return this;
+        };
+    })();
     
-        return parts.join('');
-      }
     
-      var rewritten = [];
-      for (var i = 0, n = regexs.length; i < n; ++i) {
-        var regex = regexs[i];
-        if (regex.global || regex.multiline) { throw new Error('' + regex); }
-        rewritten.push(
-            '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
-      }
     
-      return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
-    }
-  
+//})(window.jQuery);
+
+
+});
+define('searchView',[
+  'App',
+  // Templates
+  'text!tpl/search.html',
+  'text!tpl/search_suggestion.html',
+  // Tools
+  'typeahead'
+], function(App, searchTpl, suggestionTpl) {
+
+  var searchView = Backbone.View.extend({
+    el: '#search',
     /**
-     * Split markup into a string of source code and an array mapping ranges in
-     * that string to the text nodes in which they appear.
-     *
-     * <p>
-     * The HTML DOM structure:</p>
-     * <pre>
-     * (Element   "p"
-     *   (Element "b"
-     *     (Text  "print "))       ; #1
-     *   (Text    "'Hello '")      ; #2
-     *   (Element "br")            ; #3
-     *   (Text    "  + 'World';")) ; #4
-     * </pre>
-     * <p>
-     * corresponds to the HTML
-     * {@code <p><b>print </b>'Hello '<br>  + 'World';</p>}.</p>
-     *
-     * <p>
-     * It will produce the output:</p>
-     * <pre>
-     * {
-     *   sourceCode: "print 'Hello '\n  + 'World';",
-     *   //                     1          2
-     *   //           012345678901234 5678901234567
-     *   spans: [0, #1, 6, #2, 14, #3, 15, #4]
-     * }
-     * </pre>
-     * <p>
-     * where #1 is a reference to the {@code "print "} text node above, and so
-     * on for the other text nodes.
-     * </p>
-     *
-     * <p>
-     * The {@code} spans array is an array of pairs.  Even elements are the start
-     * indices of substrings, and odd elements are the text nodes (or BR elements)
-     * that contain the text for those substrings.
-     * Substrings continue until the next index or the end of the source.
-     * </p>
-     *
-     * @param {Node} node an HTML DOM subtree containing source-code.
-     * @param {boolean} isPreformatted true if white-space in text nodes should
-     *    be considered significant.
-     * @return {Object} source code and the text nodes in which they occur.
+     * Init.
      */
-    function extractSourceSpans(node, isPreformatted) {
-      var nocode = /(?:^|\s)nocode(?:\s|$)/;
-    
-      var chunks = [];
-      var length = 0;
-      var spans = [];
-      var k = 0;
-    
-      function walk(node) {
-        var type = node.nodeType;
-        if (type == 1) {  // Element
-          if (nocode.test(node.className)) { return; }
-          for (var child = node.firstChild; child; child = child.nextSibling) {
-            walk(child);
+    init: function() {
+      var tpl = _.template(searchTpl);
+      var className = 'form-control input-lg';
+      var placeholder = 'Search reference';
+      this.searchHtml = tpl({
+        'placeholder': placeholder,
+        'className': className
+      });
+      this.items = App.classes.concat(App.allItems);
+
+      return this;
+    },
+    /**
+     * Render input field with Typehead activated.
+     */
+    render: function() {
+      // Append the view to the dom
+      this.$el.append(this.searchHtml);
+
+      // Render Typeahead
+      var $searchInput = this.$el.find('input[type=text]');
+      this.typeaheadRender($searchInput);
+      this.typeaheadEvents($searchInput);
+
+      return this;
+    },
+    /**
+     * Apply Twitter Typeahead to the search input field.
+     * @param {jquery} $input
+     */
+    typeaheadRender: function($input) {
+      var self = this;
+      $input.typeahead(null, {
+        'displayKey': 'name',
+        'minLength': 2,
+        //'highlight': true,
+        'source': self.substringMatcher(this.items),
+        'templates': {
+          'empty': '<p class="empty-message">Unable to find any item that match the current query</p>',
+          'suggestion': _.template(suggestionTpl)
+        }
+      });
+    },
+    /**
+     * Setup typeahead custom events (item selected).
+     */
+    typeaheadEvents: function($input) {
+      var self = this;
+      $input.on('typeahead:selected', function(e, item, datasetName) {
+        var selectedItem = self.items[item.idx];
+        select(selectedItem);
+      });
+      $input.on('keydown', function(e) {
+        if (e.which === 13) { // enter
+          var txt = $input.val();
+          var f = _.find(self.items, function(it) { return it.name == txt; });
+          if (f) {
+            select(f);
           }
-          var nodeName = node.nodeName.toLowerCase();
-          if ('br' === nodeName || 'li' === nodeName) {
-            chunks[k] = '\n';
-            spans[k << 1] = length++;
-            spans[(k++ << 1) | 1] = node;
+        } else if (e.which === 27) {
+          $input.blur();
+        }
+      });
+
+      function select(selectedItem) {
+        var hash = App.router.getHash(selectedItem);//
+        App.router.navigate(hash, {'trigger': true});
+        $('#item').focus();
+      }
+    },
+    /**
+     * substringMatcher function for Typehead (search for strings in an array).
+     * @param {array} array
+     * @returns {Function}
+     */
+    substringMatcher: function(array) {
+      return function findMatches(query, callback) {
+        var matches = [], substrRegex, arrayLength = array.length;
+
+        // regex used to determine if a string contains the substring `query`
+        substrRegex = new RegExp(query, 'i');
+
+        // iterate through the pool of strings and for any string that
+        // contains the substring `query`, add it to the `matches` array
+        for (var i=0; i < arrayLength; i++) {
+          var item = array[i];
+          if (substrRegex.test(item.name)) {
+            // typeahead expects suggestions to be a js object
+            matches.push({
+              'itemtype': item.itemtype,
+              'name': item.name,
+              'className': item.class,
+              'is_constructor': !!item.is_constructor,
+              'final': item.final,
+              'idx': i
+            });
           }
-        } else if (type == 3 || type == 4) {  // Text
-          var text = node.nodeValue;
-          if (text.length) {
-            if (!isPreformatted) {
-              text = text.replace(/[ \t\r\n]+/g, ' ');
+        }
+
+        callback(matches);
+      };
+    }
+
+  });
+
+  return searchView;
+
+});
+
+
+define('text!tpl/list.html',[],function () { return '<% _.each(groups, function(group){ %>\n  <div class="reference-group clearfix main-ref-page">  \n    <h2 class="group-name" id="group-<%=group.name%>" tab-index="-1"><%=group.name%></h2>\n    <div class="reference-subgroups clearfix main-ref-page">  \n    <% _.each(group.subgroups, function(subgroup, ind) { %>\n      <div class="reference-subgroup">\n        <% if (subgroup.name !== \'0\') { %>\n          <h3 id="<%=group.name%><%=ind%>" class="subgroup-name subgroup-<%=subgroup.name%>"><%=subgroup.name%></h3>\n        <% } %>\n        <ul aria-labelledby="<%=group.name%> <%=ind%>">\n        <% _.each(subgroup.items, function(item) { %>\n        <li><a href="<%=item.hash%>"><%=item.name%><% if (item.itemtype === \'method\') { %>()<%}%></a></li>\n        <% }); %>\n        </ul>\n      </div>\n    <% }); %>\n    </div>\n  </div>\n<% }); %>\n';});
+
+define('listView',[
+  'App',
+  // Templates
+  'text!tpl/list.html'
+], function (App, listTpl) {
+  var striptags = function(html) {
+    var div = document.createElement('div');
+    div.innerHTML = html;
+    return div.textContent;
+  };
+
+  var listView = Backbone.View.extend({
+    el: '#list',
+    events: {},
+    /**
+     * Init.
+     */
+    init: function () {
+      this.listTpl = _.template(listTpl);
+
+      return this;
+    },
+    /**
+     * Render the list.
+     */
+    render: function (items, listCollection) {
+      if (items && listCollection) {
+        var self = this;
+
+        // Render items and group them by module
+        // module === group
+        this.groups = {};
+        _.each(items, function (item, i) {
+
+          if (!item.private && item.file.indexOf('addons') === -1) { //addons don't get displayed on main page
+
+            var group = item.module || '_';
+            var subgroup = item.submodule || '_';
+            if (group === subgroup) {
+              subgroup = '0';
+            }
+            var hash = App.router.getHash(item);
+
+            // fixes broken links for #/p5/> and #/p5/>=
+            item.hash = item.hash.replace('>', '&gt;');
+
+            // Create a group list
+            if (!self.groups[group]) {
+              self.groups[group] = {
+                name: group.replace('_', '&nbsp;'),
+                subgroups: {}
+              };
+            }
+
+            // Create a subgroup list
+            if (!self.groups[group].subgroups[subgroup]) {
+              self.groups[group].subgroups[subgroup] = {
+                name: subgroup.replace('_', '&nbsp;'),
+                items: []
+              };
+            }
+
+            // hide the un-interesting constants
+            if (group === 'Constants' && !item.example)
+              return;
+
+            if (item.class === 'p5') {
+
+              self.groups[group].subgroups[subgroup].items.push(item);
+
             } else {
-              text = text.replace(/\r\n?/g, '\n');  // Normalize newlines.
+
+              var found = _.find(self.groups[group].subgroups[subgroup].items,
+                function(i){ return i.name == item.class; });
+
+              if (!found) {
+
+                // FIX TO INVISIBLE OBJECTS: DH (see also router.js)
+                var ind = hash.lastIndexOf('/');
+                hash = item.hash.substring(0, ind).replace('p5/','p5.');
+                self.groups[group].subgroups[subgroup].items.push({
+                  name: item.class,
+                  hash: hash
+                });
+              }
+
             }
-            // TODO: handle tabs here?
-            chunks[k] = text;
-            spans[k << 1] = length;
-            length += text.length;
-            spans[(k++ << 1) | 1] = node;
           }
-        }
+        });
+
+        // Put the <li> items html into the list <ul>
+        var listHtml = self.listTpl({
+          'striptags': striptags,
+          'title': self.capitalizeFirst(listCollection),
+          'groups': self.groups,
+          'listCollection': listCollection
+        });
+
+        // Render the view
+        this.$el.html(listHtml);
       }
-    
-      walk(node);
-    
-      return {
-        sourceCode: chunks.join('').replace(/\n$/, ''),
-        spans: spans
-      };
-    }
-  
+
+      var renderEvent = new Event('reference-rendered');
+      window.dispatchEvent(renderEvent);
+
+      return this;
+    },
     /**
-     * Apply the given language handler to sourceCode and add the resulting
-     * decorations to out.
-     * @param {number} basePos the index of sourceCode within the chunk of source
-     *    whose decorations are already present on out.
+     * Show a list of items.
+     * @param {array} items Array of item objects.
+     * @returns {object} This view.
      */
-    function appendDecorations(basePos, sourceCode, langHandler, out) {
-      if (!sourceCode) { return; }
-      var job = {
-        sourceCode: sourceCode,
-        basePos: basePos
-      };
-      langHandler(job);
-      out.push.apply(out, job.decorations);
+    show: function (listGroup) {
+      if (App[listGroup]) {
+        this.render(App[listGroup], listGroup);
+      }
+      App.pageView.hideContentViews();
+
+      this.$el.show();
+
+      return this;
+    },
+    /**
+     * Helper method to capitalize the first letter of a string
+     * @param {string} str
+     * @returns {string} Returns the string.
+     */
+    capitalizeFirst: function (str) {
+      return str.substr(0, 1).toUpperCase() + str.substr(1);
     }
+
+
+
+  });
+
+  return listView;
+
+});
+
+
+define('text!tpl/item.html',[],function () { return '<h2><%=item.name%><% if (item.isMethod) { %>()<% } %></h2>\n\n<% if (item.example) { %>\n<div class="example">\n  <h3 id="reference-example">Examples</h3>\n\n  <div class="example-content" data-alt="<%= item.alt %>">\n    <% _.each(item.example, function(example, i){ %>\n      <%= example %>\n    <% }); %>\n  </div>\n</div>\n<% } %>\n\n<div class="description">\n\n  <h3 id="reference-description">Description</h3>\n\n  <% if (item.deprecated) { %>\n    <p>\n      Deprecated: <%=item.name%><% if (item.isMethod) { %>()<% } %> is deprecated and will be removed in a future version of p5. <% if (item.deprecationMessage) { %><%=item.deprecationMessage%><% } %>\n    </p>\n  <% } %>\n\n\n  <span class=\'description-text\'><%= item.description %></span>\n\n  <% if (item.extends) { %>\n    <p><span id="reference-extends">Extends</span> <a href="/reference/#/<%=item.extends%>" title="<%=item.extends%> reference"><%=item.extends%></a></p>\n  <% } %>\n\n  <% if (item.module === \'p5.sound\') { %>\n    <p>This function requires you include the p5.sound library.  Add the following into the head of your index.html file:\n      <pre><code class="language-javascript">&lt;script src="path/to/p5.sound.js"&gt;&lt;/script&gt;</code></pre>\n    </p>\n  <% } %>\n\n  <% if (item.constRefs) { %>\n    <p>Used by:\n  <%\n      var refs = item.constRefs;\n      for (var i = 0; i < refs.length; i ++) {\n        var ref = refs[i];\n        var name = ref;\n        if (name.substr(0, 3) === \'p5.\') {\n          name = name.substr(3);\n        }\n  if (i !== 0) {\n          if (i == refs.length - 1) {\n            %> and <%\n          } else {\n            %>, <%\n          }\n        }\n        %><a href="./#/<%= ref.replace(\'.\', \'/\') %>"><%= name %>()</a><%\n      }\n  %>\n    </p>\n  <% } %>\n</div>\n\n<% if (isConstructor || !isClass) { %>\n\n<div class="syntax">\n  <h3 id="reference-syntax">Syntax</h3>\n  <p>\n    <% syntaxes.forEach(function(syntax) { %>\n    <pre class="language-javascript"><%= syntax %></pre>\n    <% }) %>\n  </p>\n</div>\n\n\n<% if (item.params) { %>\n  <div class="params">\n    <h3 id="reference-parameters">Parameters</h3>\n    <ul aria-labelledby=\'reference-parameters\'>\n    <% for (var i=0; i<item.params.length; i++) { %>\n      <% var p = item.params[i] %>\n      <li>\n        <div class=\'paramname\'><%=p.name%></div>\n        <% if (p.type) { %>\n          <div class=\'paramtype\'>\n          <% var type = p.type.replace(/(p5\\.[A-Z][A-Za-z]*)/, \'<a href="#/$1">$1</a>\'); %>\n          <span class="param-type label label-info"><%=type%></span>: <%=p.description%>\n          <% if (p.optional) { %> (Optional)<% } %>\n          </div>\n        <% } %>\n      </li>\n    <% } %>\n    </ul>\n  </div>\n<% } %>\n\n<% if (item.return && item.return.type) { %>\n  <div>\n    <h3 id="reference-returns">Returns</h3>\n    <p class=\'returns\'><span class="param-type label label-info"><%=item.return.type%></span>: <%= item.return.description %></p>\n  </div>\n<% } %>\n\n<% } %>\n';});
+
+
+define('text!tpl/class.html',[],function () { return '\n<% if (typeof constructor !== \'undefined\') { %>\n<div class="constructor">\n  <%=constructor%>\n</div>\n<% } %>\n\n<% let fields = _.filter(things, function(item) { return item.itemtype === \'property\' && item.access !== \'private\' }); %>\n<% if (fields.length > 0) { %>\n  <h3 id=\'reference-fields\'>Fields</h3>\n  <ul aria-labelledby=\'reference-fields\'>\n  <% _.each(fields, function(item) { %>\n    <li>\n      <div class=\'paramname\'><a href="<%=item.hash%>" <% if (item.module !== module) { %>class="addon"<% } %>><%=item.name%></a></div>\n      <div class=\'paramtype\'><%= item.description %></div>\n    </li>\n  <% }); %>\n  </ul>\n<% } %>\n\n<% let methods = _.filter(things, function(item) { return item.itemtype === \'method\' && item.access !== \'private\' }); %>\n<% if (methods.length > 0) { %>\n  <h3 id=\'reference-methods\'>Methods</h3>\n  <ul aria-labelledby=\'reference-methods\'>\n    <% _.each(methods, function(item) { %>\n      <li>\n        <div class=\'paramname\'><a href="<%=item.hash%>" <% if (item.module !== module) { %>class="addon"<% } %>><%=item.name%><% if (item.itemtype === \'method\') { %>()<%}%></a></div>\n        <div class=\'paramtype\'><%= item.description %></div>\n      </li>\n    <% }); %>\n  </ul>\n<% } %>\n';});
+
+
+define('text!tpl/itemEnd.html',[],function () { return '\n<br><br>\n\n<div>\n<% if (item.file && item.line) { %>\n<span id="reference-error1">Notice any errors or typos?</span> <a href="https://github.com/processing/p5.js/issues"><span id="reference-contribute2">Please let us know.</span></a> <span id="reference-error3">Please feel free to edit</span> <a href="https://github.com/processing/p5.js/blob/<%= appVersion %>/<%= item.file %>#L<%= item.line %>" target="_blank" ><%= item.file %></a> <span id="reference-error5">and issue a pull request!</span>\n<% } %>\n</div>\n\n<a style="border-bottom:none !important;" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target=_blank><img src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" style="width:88px" alt="creative commons logo"/></a>\n<br><br>\n';});
+
+// Copyright (C) 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+/**
+ * @fileoverview
+ * some functions for browser-side pretty printing of code contained in html.
+ *
+ * <p>
+ * For a fairly comprehensive set of languages see the
+ * <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html#langs">README</a>
+ * file that came with this source.  At a minimum, the lexer should work on a
+ * number of languages including C and friends, Java, Python, Bash, SQL, HTML,
+ * XML, CSS, Javascript, and Makefiles.  It works passably on Ruby, PHP and Awk
+ * and a subset of Perl, but, because of commenting conventions, doesn't work on
+ * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class.
+ * <p>
+ * Usage: <ol>
+ * <li> include this source file in an html page via
+ *   {@code <script src="/path/to/prettify.js"></script>}
+ * <li> define style rules.  See the example page for examples.
+ * <li> mark the {@code <pre>} and {@code <code>} tags in your source with
+ *    {@code class=prettyprint.}
+ *    You can also use the (html deprecated) {@code <xmp>} tag, but the pretty
+ *    printer needs to do more substantial DOM manipulations to support that, so
+ *    some css styles may not be preserved.
+ * </ol>
+ * That's it.  I wanted to keep the API as simple as possible, so there's no
+ * need to specify which language the code is in, but if you wish, you can add
+ * another class to the {@code <pre>} or {@code <code>} element to specify the
+ * language, as in {@code <pre class="prettyprint lang-java">}.  Any class that
+ * starts with "lang-" followed by a file extension, specifies the file type.
+ * See the "lang-*.js" files in this directory for code that implements
+ * per-language file handlers.
+ * <p>
+ * Change log:<br>
+ * cbeust, 2006/08/22
+ * <blockquote>
+ *   Java annotations (start with "@") are now captured as literals ("lit")
+ * </blockquote>
+ * @requires console
+ */
+
+// JSLint declarations
+/*global console, document, navigator, setTimeout, window, define */
+
+/** @define {boolean} */
+var IN_GLOBAL_SCOPE = true;
+
+/**
+ * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
+ * UI events.
+ * If set to {@code false}, {@code prettyPrint()} is synchronous.
+ */
+window['PR_SHOULD_USE_CONTINUATION'] = true;
+
+/**
+ * Pretty print a chunk of code.
+ * @param {string} sourceCodeHtml The HTML to pretty print.
+ * @param {string} opt_langExtension The language name to use.
+ *     Typically, a filename extension like 'cpp' or 'java'.
+ * @param {number|boolean} opt_numberLines True to number lines,
+ *     or the 1-indexed number of the first line in sourceCodeHtml.
+ * @return {string} code as html, but prettier
+ */
+var prettyPrintOne;
+/**
+ * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
+ * {@code class=prettyprint} and prettify them.
+ *
+ * @param {Function} opt_whenDone called when prettifying is done.
+ * @param {HTMLElement|HTMLDocument} opt_root an element or document
+ *   containing all the elements to pretty print.
+ *   Defaults to {@code document.body}.
+ */
+var prettyPrint;
+
+
+(function () {
+  var win = window;
+  // Keyword lists for various languages.
+  // We use things that coerce to strings to make them compact when minified
+  // and to defeat aggressive optimizers that fold large string constants.
+  var FLOW_CONTROL_KEYWORDS = ["break,continue,do,else,for,if,return,while"];
+  var C_KEYWORDS = [FLOW_CONTROL_KEYWORDS,"auto,case,char,const,default," + 
+      "double,enum,extern,float,goto,inline,int,long,register,short,signed," +
+      "sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"];
+  var COMMON_KEYWORDS = [C_KEYWORDS,"catch,class,delete,false,import," +
+      "new,operator,private,protected,public,this,throw,true,try,typeof"];
+  var CPP_KEYWORDS = [COMMON_KEYWORDS,"alignof,align_union,asm,axiom,bool," +
+      "concept,concept_map,const_cast,constexpr,decltype,delegate," +
+      "dynamic_cast,explicit,export,friend,generic,late_check," +
+      "mutable,namespace,nullptr,property,reinterpret_cast,static_assert," +
+      "static_cast,template,typeid,typename,using,virtual,where"];
+  var JAVA_KEYWORDS = [COMMON_KEYWORDS,
+      "abstract,assert,boolean,byte,extends,final,finally,implements,import," +
+      "instanceof,interface,null,native,package,strictfp,super,synchronized," +
+      "throws,transient"];
+  var CSHARP_KEYWORDS = [JAVA_KEYWORDS,
+      "as,base,by,checked,decimal,delegate,descending,dynamic,event," +
+      "fixed,foreach,from,group,implicit,in,internal,into,is,let," +
+      "lock,object,out,override,orderby,params,partial,readonly,ref,sbyte," +
+      "sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort," +
+      "var,virtual,where"];
+  var COFFEE_KEYWORDS = "all,and,by,catch,class,else,extends,false,finally," +
+      "for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then," +
+      "throw,true,try,unless,until,when,while,yes";
+  var JSCRIPT_KEYWORDS = [COMMON_KEYWORDS,
+      "debugger,eval,export,function,get,null,set,undefined,var,with," +
+      "Infinity,NaN"];
+  var PERL_KEYWORDS = "caller,delete,die,do,dump,elsif,eval,exit,foreach,for," +
+      "goto,if,import,last,local,my,next,no,our,print,package,redo,require," +
+      "sub,undef,unless,until,use,wantarray,while,BEGIN,END";
+  var PYTHON_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "and,as,assert,class,def,del," +
+      "elif,except,exec,finally,from,global,import,in,is,lambda," +
+      "nonlocal,not,or,pass,print,raise,try,with,yield," +
+      "False,True,None"];
+  var RUBY_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "alias,and,begin,case,class," +
+      "def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo," +
+      "rescue,retry,self,super,then,true,undef,unless,until,when,yield," +
+      "BEGIN,END"];
+   var RUST_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "as,assert,const,copy,drop," +
+      "enum,extern,fail,false,fn,impl,let,log,loop,match,mod,move,mut,priv," +
+      "pub,pure,ref,self,static,struct,true,trait,type,unsafe,use"];
+  var SH_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "case,done,elif,esac,eval,fi," +
+      "function,in,local,set,then,until"];
+  var ALL_KEYWORDS = [
+      CPP_KEYWORDS, CSHARP_KEYWORDS, JSCRIPT_KEYWORDS, PERL_KEYWORDS,
+      PYTHON_KEYWORDS, RUBY_KEYWORDS, SH_KEYWORDS];
+  var C_TYPES = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)\b/;
+
+  // token style names.  correspond to css classes
+  /**
+   * token style for a string literal
+   * @const
+   */
+  var PR_STRING = 'str';
+  /**
+   * token style for a keyword
+   * @const
+   */
+  var PR_KEYWORD = 'kwd';
+  /**
+   * token style for a comment
+   * @const
+   */
+  var PR_COMMENT = 'com';
+  /**
+   * token style for a type
+   * @const
+   */
+  var PR_TYPE = 'typ';
+  /**
+   * token style for a literal value.  e.g. 1, null, true.
+   * @const
+   */
+  var PR_LITERAL = 'lit';
+  /**
+   * token style for a punctuation string.
+   * @const
+   */
+  var PR_PUNCTUATION = 'pun';
+  /**
+   * token style for plain text.
+   * @const
+   */
+  var PR_PLAIN = 'pln';
+
+  /**
+   * token style for an sgml tag.
+   * @const
+   */
+  var PR_TAG = 'tag';
+  /**
+   * token style for a markup declaration such as a DOCTYPE.
+   * @const
+   */
+  var PR_DECLARATION = 'dec';
+  /**
+   * token style for embedded source.
+   * @const
+   */
+  var PR_SOURCE = 'src';
+  /**
+   * token style for an sgml attribute name.
+   * @const
+   */
+  var PR_ATTRIB_NAME = 'atn';
+  /**
+   * token style for an sgml attribute value.
+   * @const
+   */
+  var PR_ATTRIB_VALUE = 'atv';
+
+  /**
+   * A class that indicates a section of markup that is not code, e.g. to allow
+   * embedding of line numbers within code listings.
+   * @const
+   */
+  var PR_NOCODE = 'nocode';
+
   
-    var notWs = /\S/;
   
-    /**
-     * Given an element, if it contains only one child element and any text nodes
-     * it contains contain only space characters, return the sole child element.
-     * Otherwise returns undefined.
-     * <p>
-     * This is meant to return the CODE element in {@code <pre><code ...>} when
-     * there is a single child element that contains all the non-space textual
-     * content, but not to return anything where there are multiple child elements
-     * as in {@code <pre><code>...</code><code>...</code></pre>} or when there
-     * is textual content.
-     */
-    function childContentWrapper(element) {
-      var wrapper = undefined;
-      for (var c = element.firstChild; c; c = c.nextSibling) {
-        var type = c.nodeType;
-        wrapper = (type === 1)  // Element Node
-            ? (wrapper ? element : c)
-            : (type === 3)  // Text Node
-            ? (notWs.test(c.nodeValue) ? element : wrapper)
-            : wrapper;
+  /**
+   * A set of tokens that can precede a regular expression literal in
+   * javascript
+   * http://web.archive.org/web/20070717142515/http://www.mozilla.org/js/language/js20/rationale/syntax.html
+   * has the full list, but I've removed ones that might be problematic when
+   * seen in languages that don't support regular expression literals.
+   *
+   * <p>Specifically, I've removed any keywords that can't precede a regexp
+   * literal in a syntactically legal javascript program, and I've removed the
+   * "in" keyword since it's not a keyword in many languages, and might be used
+   * as a count of inches.
+   *
+   * <p>The link above does not accurately describe EcmaScript rules since
+   * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
+   * very well in practice.
+   *
+   * @private
+   * @const
+   */
+  var REGEXP_PRECEDER_PATTERN = '(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<<?=?|>>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*';
+  
+  // CAVEAT: this does not properly handle the case where a regular
+  // expression immediately follows another since a regular expression may
+  // have flags for case-sensitivity and the like.  Having regexp tokens
+  // adjacent is not valid in any language I'm aware of, so I'm punting.
+  // TODO: maybe style special characters inside a regexp as punctuation.
+
+  /**
+   * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
+   * matches the union of the sets of strings matched by the input RegExp.
+   * Since it matches globally, if the input strings have a start-of-input
+   * anchor (/^.../), it is ignored for the purposes of unioning.
+   * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
+   * @return {RegExp} a global regex.
+   */
+  function combinePrefixPatterns(regexs) {
+    var capturedGroupIndex = 0;
+  
+    var needToFoldCase = false;
+    var ignoreCase = false;
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.ignoreCase) {
+        ignoreCase = true;
+      } else if (/[a-z]/i.test(regex.source.replace(
+                     /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
+        needToFoldCase = true;
+        ignoreCase = false;
+        break;
       }
-      return wrapper === element ? undefined : wrapper;
     }
   
-    /** Given triples of [style, pattern, context] returns a lexing function,
-      * The lexing function interprets the patterns to find token boundaries and
-      * returns a decoration list of the form
-      * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
-      * where index_n is an index into the sourceCode, and style_n is a style
-      * constant like PR_PLAIN.  index_n-1 <= index_n, and style_n-1 applies to
-      * all characters in sourceCode[index_n-1:index_n].
-      *
-      * The stylePatterns is a list whose elements have the form
-      * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
-      *
-      * Style is a style constant like PR_PLAIN, or can be a string of the
-      * form 'lang-FOO', where FOO is a language extension describing the
-      * language of the portion of the token in $1 after pattern executes.
-      * E.g., if style is 'lang-lisp', and group 1 contains the text
-      * '(hello (world))', then that portion of the token will be passed to the
-      * registered lisp handler for formatting.
-      * The text before and after group 1 will be restyled using this decorator
-      * so decorators should take care that this doesn't result in infinite
-      * recursion.  For example, the HTML lexer rule for SCRIPT elements looks
-      * something like ['lang-js', /<[s]cript>(.+?)<\/script>/].  This may match
-      * '<script>foo()<\/script>', which would cause the current decorator to
-      * be called with '<script>' which would not match the same rule since
-      * group 1 must not be empty, so it would be instead styled as PR_TAG by
-      * the generic tag rule.  The handler registered for the 'js' extension would
-      * then be called with 'foo()', and finally, the current decorator would
-      * be called with '<\/script>' which would not match the original rule and
-      * so the generic tag rule would identify it as a tag.
-      *
-      * Pattern must only match prefixes, and if it matches a prefix, then that
-      * match is considered a token with the same style.
-      *
-      * Context is applied to the last non-whitespace, non-comment token
-      * recognized.
-      *
-      * Shortcut is an optional string of characters, any of which, if the first
-      * character, gurantee that this pattern and only this pattern matches.
-      *
-      * @param {Array} shortcutStylePatterns patterns that always start with
-      *   a known character.  Must have a shortcut string.
-      * @param {Array} fallthroughStylePatterns patterns that will be tried in
-      *   order if the shortcut ones fail.  May have shortcuts.
-      *
-      * @return {function (Object)} a
-      *   function that takes source code and returns a list of decorations.
-      */
-    function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
-      var shortcuts = {};
-      var tokenizer;
-      (function () {
-        var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
-        var allRegexs = [];
-        var regexKeys = {};
-        for (var i = 0, n = allPatterns.length; i < n; ++i) {
-          var patternParts = allPatterns[i];
-          var shortcutChars = patternParts[3];
-          if (shortcutChars) {
-            for (var c = shortcutChars.length; --c >= 0;) {
-              shortcuts[shortcutChars.charAt(c)] = patternParts;
-            }
-          }
-          var regex = patternParts[1];
-          var k = '' + regex;
-          if (!regexKeys.hasOwnProperty(k)) {
-            allRegexs.push(regex);
-            regexKeys[k] = null;
-          }
-        }
-        allRegexs.push(/[\0-\uffff]/);
-        tokenizer = combinePrefixPatterns(allRegexs);
-      })();
-  
-      var nPatterns = fallthroughStylePatterns.length;
+    var escapeCharToCodeUnit = {
+      'b': 8,
+      't': 9,
+      'n': 0xa,
+      'v': 0xb,
+      'f': 0xc,
+      'r': 0xd
+    };
   
-      /**
-       * Lexes job.sourceCode and produces an output array job.decorations of
-       * style classes preceded by the position at which they start in
-       * job.sourceCode in order.
-       *
-       * @param {Object} job an object like <pre>{
-       *    sourceCode: {string} sourceText plain text,
-       *    basePos: {int} position of job.sourceCode in the larger chunk of
-       *        sourceCode.
-       * }</pre>
-       */
-      var decorate = function (job) {
-        var sourceCode = job.sourceCode, basePos = job.basePos;
-        /** Even entries are positions in source in ascending order.  Odd enties
-          * are style markers (e.g., PR_COMMENT) that run from that position until
-          * the end.
-          * @type {Array.<number|string>}
-          */
-        var decorations = [basePos, PR_PLAIN];
-        var pos = 0;  // index into sourceCode
-        var tokens = sourceCode.match(tokenizer) || [];
-        var styleCache = {};
+    function decodeEscape(charsetPart) {
+      var cc0 = charsetPart.charCodeAt(0);
+      if (cc0 !== 92 /* \\ */) {
+        return cc0;
+      }
+      var c1 = charsetPart.charAt(1);
+      cc0 = escapeCharToCodeUnit[c1];
+      if (cc0) {
+        return cc0;
+      } else if ('0' <= c1 && c1 <= '7') {
+        return parseInt(charsetPart.substring(1), 8);
+      } else if (c1 === 'u' || c1 === 'x') {
+        return parseInt(charsetPart.substring(2), 16);
+      } else {
+        return charsetPart.charCodeAt(1);
+      }
+    }
   
-        for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
-          var token = tokens[ti];
-          var style = styleCache[token];
-          var match = void 0;
+    function encodeEscape(charCode) {
+      if (charCode < 0x20) {
+        return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
+      }
+      var ch = String.fromCharCode(charCode);
+      return (ch === '\\' || ch === '-' || ch === ']' || ch === '^')
+          ? "\\" + ch : ch;
+    }
   
-          var isEmbedded;
-          if (typeof style === 'string') {
-            isEmbedded = false;
+    function caseFoldCharset(charSet) {
+      var charsetParts = charSet.substring(1, charSet.length - 1).match(
+          new RegExp(
+              '\\\\u[0-9A-Fa-f]{4}'
+              + '|\\\\x[0-9A-Fa-f]{2}'
+              + '|\\\\[0-3][0-7]{0,2}'
+              + '|\\\\[0-7]{1,2}'
+              + '|\\\\[\\s\\S]'
+              + '|-'
+              + '|[^-\\\\]',
+              'g'));
+      var ranges = [];
+      var inverse = charsetParts[0] === '^';
+  
+      var out = ['['];
+      if (inverse) { out.push('^'); }
+  
+      for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
+        var p = charsetParts[i];
+        if (/\\[bdsw]/i.test(p)) {  // Don't muck with named groups.
+          out.push(p);
+        } else {
+          var start = decodeEscape(p);
+          var end;
+          if (i + 2 < n && '-' === charsetParts[i + 1]) {
+            end = decodeEscape(charsetParts[i + 2]);
+            i += 2;
           } else {
-            var patternParts = shortcuts[token.charAt(0)];
-            if (patternParts) {
-              match = token.match(patternParts[1]);
-              style = patternParts[0];
-            } else {
-              for (var i = 0; i < nPatterns; ++i) {
-                patternParts = fallthroughStylePatterns[i];
-                match = token.match(patternParts[1]);
-                if (match) {
-                  style = patternParts[0];
-                  break;
-                }
-              }
-  
-              if (!match) {  // make sure that we make progress
-                style = PR_PLAIN;
-              }
+            end = start;
+          }
+          ranges.push([start, end]);
+          // If the range might intersect letters, then expand it.
+          // This case handling is too simplistic.
+          // It does not deal with non-latin case folding.
+          // It works for latin source code identifiers though.
+          if (!(end < 65 || start > 122)) {
+            if (!(end < 65 || start > 90)) {
+              ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
             }
-  
-            isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
-            if (isEmbedded && !(match && typeof match[1] === 'string')) {
-              isEmbedded = false;
-              style = PR_SOURCE;
+            if (!(end < 97 || start > 122)) {
+              ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
             }
-  
-            if (!isEmbedded) { styleCache[token] = style; }
           }
+        }
+      }
   
-          var tokenStart = pos;
-          pos += token.length;
+      // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
+      // -> [[1, 12], [14, 14], [16, 17]]
+      ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1]  - a[1]); });
+      var consolidatedRanges = [];
+      var lastRange = [];
+      for (var i = 0; i < ranges.length; ++i) {
+        var range = ranges[i];
+        if (range[0] <= lastRange[1] + 1) {
+          lastRange[1] = Math.max(lastRange[1], range[1]);
+        } else {
+          consolidatedRanges.push(lastRange = range);
+        }
+      }
   
-          if (!isEmbedded) {
-            decorations.push(basePos + tokenStart, style);
-          } else {  // Treat group 1 as an embedded block of source code.
-            var embeddedSource = match[1];
-            var embeddedSourceStart = token.indexOf(embeddedSource);
-            var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
-            if (match[2]) {
-              // If embeddedSource can be blank, then it would match at the
-              // beginning which would cause us to infinitely recurse on the
-              // entire token, so we catch the right context in match[2].
-              embeddedSourceEnd = token.length - match[2].length;
-              embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
-            }
-            var lang = style.substring(5);
-            // Decorate the left of the embedded source
-            appendDecorations(
-                basePos + tokenStart,
-                token.substring(0, embeddedSourceStart),
-                decorate, decorations);
-            // Decorate the embedded source
-            appendDecorations(
-                basePos + tokenStart + embeddedSourceStart,
-                embeddedSource,
-                langHandlerForExtension(lang, embeddedSource),
-                decorations);
-            // Decorate the right of the embedded section
-            appendDecorations(
-                basePos + tokenStart + embeddedSourceEnd,
-                token.substring(embeddedSourceEnd),
-                decorate, decorations);
-          }
+      for (var i = 0; i < consolidatedRanges.length; ++i) {
+        var range = consolidatedRanges[i];
+        out.push(encodeEscape(range[0]));
+        if (range[1] > range[0]) {
+          if (range[1] + 1 > range[0]) { out.push('-'); }
+          out.push(encodeEscape(range[1]));
         }
-        job.decorations = decorations;
-      };
-      return decorate;
+      }
+      out.push(']');
+      return out.join('');
     }
   
-    /** returns a function that produces a list of decorations from source text.
-      *
-      * This code treats ", ', and ` as string delimiters, and \ as a string
-      * escape.  It does not recognize perl's qq() style strings.
-      * It has no special handling for double delimiter escapes as in basic, or
-      * the tripled delimiters used in python, but should work on those regardless
-      * although in those cases a single string literal may be broken up into
-      * multiple adjacent string literals.
-      *
-      * It recognizes C, C++, and shell style comments.
-      *
-      * @param {Object} options a set of optional parameters.
-      * @return {function (Object)} a function that examines the source code
-      *     in the input job and builds the decoration list.
-      */
-    function sourceDecorator(options) {
-      var shortcutStylePatterns = [], fallthroughStylePatterns = [];
-      if (options['tripleQuotedStrings']) {
-        // '''multi-line-string''', 'single-line-string', and double-quoted
-        shortcutStylePatterns.push(
-            [PR_STRING,  /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
-             null, '\'"']);
-      } else if (options['multiLineStrings']) {
-        // 'multi-line-string', "multi-line-string"
-        shortcutStylePatterns.push(
-            [PR_STRING,  /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
-             null, '\'"`']);
-      } else {
-        // 'single-line-string', "single-line-string"
-        shortcutStylePatterns.push(
-            [PR_STRING,
-             /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
-             null, '"\'']);
-      }
-      if (options['verbatimStrings']) {
-        // verbatim-string-literal production from the C# grammar.  See issue 93.
-        fallthroughStylePatterns.push(
-            [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
-      }
-      var hc = options['hashComments'];
-      if (hc) {
-        if (options['cStyleComments']) {
-          if (hc > 1) {  // multiline hash comments
-            shortcutStylePatterns.push(
-                [PR_COMMENT, /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, null, '#']);
-          } else {
-            // Stop C preprocessor declarations at an unclosed open comment
-            shortcutStylePatterns.push(
-                [PR_COMMENT, /^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\r\n]*)/,
-                 null, '#']);
+    function allowAnywhereFoldCaseAndRenumberGroups(regex) {
+      // Split into character sets, escape sequences, punctuation strings
+      // like ('(', '(?:', ')', '^'), and runs of characters that do not
+      // include any of the above.
+      var parts = regex.source.match(
+          new RegExp(
+              '(?:'
+              + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]'  // a character set
+              + '|\\\\u[A-Fa-f0-9]{4}'  // a unicode escape
+              + '|\\\\x[A-Fa-f0-9]{2}'  // a hex escape
+              + '|\\\\[0-9]+'  // a back-reference or octal escape
+              + '|\\\\[^ux0-9]'  // other escape sequence
+              + '|\\(\\?[:!=]'  // start of a non-capturing group
+              + '|[\\(\\)\\^]'  // start/end of a group, or line start
+              + '|[^\\x5B\\x5C\\(\\)\\^]+'  // run of other characters
+              + ')',
+              'g'));
+      var n = parts.length;
+  
+      // Maps captured group numbers to the number they will occupy in
+      // the output or to -1 if that has not been determined, or to
+      // undefined if they need not be capturing in the output.
+      var capturedGroups = [];
+  
+      // Walk over and identify back references to build the capturedGroups
+      // mapping.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          // groups are 1-indexed, so max group index is count of '('
+          ++groupIndex;
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue) {
+            if (decimalValue <= groupIndex) {
+              capturedGroups[decimalValue] = -1;
+            } else {
+              // Replace with an unambiguous escape sequence so that
+              // an octal escape sequence does not turn into a backreference
+              // to a capturing group from an earlier regex.
+              parts[i] = encodeEscape(decimalValue);
+            }
           }
-          // #include <stdio.h>
-          fallthroughStylePatterns.push(
-              [PR_STRING,
-               /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/,
-               null]);
-        } else {
-          shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
         }
       }
-      if (options['cStyleComments']) {
-        fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
-        fallthroughStylePatterns.push(
-            [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
-      }
-      var regexLiterals = options['regexLiterals'];
-      if (regexLiterals) {
-        /**
-         * @const
-         */
-        var regexExcls = regexLiterals > 1
-          ? ''  // Multiline regex literals
-          : '\n\r';
-        /**
-         * @const
-         */
-        var regexAny = regexExcls ? '.' : '[\\S\\s]';
-        /**
-         * @const
-         */
-        var REGEX_LITERAL = (
-            // A regular expression literal starts with a slash that is
-            // not followed by * or / so that it is not confused with
-            // comments.
-            '/(?=[^/*' + regexExcls + '])'
-            // and then contains any number of raw characters,
-            + '(?:[^/\\x5B\\x5C' + regexExcls + ']'
-            // escape sequences (\x5C),
-            +    '|\\x5C' + regexAny
-            // or non-nesting character sets (\x5B\x5D);
-            +    '|\\x5B(?:[^\\x5C\\x5D' + regexExcls + ']'
-            +             '|\\x5C' + regexAny + ')*(?:\\x5D|$))+'
-            // finally closed by a /.
-            + '/');
-        fallthroughStylePatterns.push(
-            ['lang-regex',
-             RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
-             ]);
-      }
   
-      var types = options['types'];
-      if (types) {
-        fallthroughStylePatterns.push([PR_TYPE, types]);
+      // Renumber groups and reduce capturing groups to non-capturing groups
+      // where possible.
+      for (var i = 1; i < capturedGroups.length; ++i) {
+        if (-1 === capturedGroups[i]) {
+          capturedGroups[i] = ++capturedGroupIndex;
+        }
       }
-  
-      var keywords = ("" + options['keywords']).replace(/^ | $/g, '');
-      if (keywords.length) {
-        fallthroughStylePatterns.push(
-            [PR_KEYWORD,
-             new RegExp('^(?:' + keywords.replace(/[\s,]+/g, '|') + ')\\b'),
-             null]);
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          ++groupIndex;
+          if (!capturedGroups[groupIndex]) {
+            parts[i] = '(?:';
+          }
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            parts[i] = '\\' + capturedGroups[decimalValue];
+          }
+        }
       }
   
-      shortcutStylePatterns.push([PR_PLAIN,       /^\s+/, null, ' \r\n\t\xA0']);
-  
-      var punctuation =
-        // The Bash man page says
-  
-        // A word is a sequence of characters considered as a single
-        // unit by GRUB. Words are separated by metacharacters,
-        // which are the following plus space, tab, and newline: { }
-        // | & $ ; < >
-        // ...
-        
-        // A word beginning with # causes that word and all remaining
-        // characters on that line to be ignored.
-  
-        // which means that only a '#' after /(?:^|[{}|&$;<>\s])/ starts a
-        // comment but empirically
-        // $ echo {#}
-        // {#}
-        // $ echo \$#
-        // $#
-        // $ echo }#
-        // }#
-  
-        // so /(?:^|[|&;<>\s])/ is more appropriate.
-  
-        // http://gcc.gnu.org/onlinedocs/gcc-2.95.3/cpp_1.html#SEC3
-        // suggests that this definition is compatible with a
-        // default mode that tries to use a single token definition
-        // to recognize both bash/python style comments and C
-        // preprocessor directives.
-  
-        // This definition of punctuation does not include # in the list of
-        // follow-on exclusions, so # will not be broken before if preceeded
-        // by a punctuation character.  We could try to exclude # after
-        // [|&;<>] but that doesn't seem to cause many major problems.
-        // If that does turn out to be a problem, we should change the below
-        // when hc is truthy to include # in the run of punctuation characters
-        // only when not followint [|&;<>].
-        '^.[^\\s\\w.$@\'"`/\\\\]*';
-      if (options['regexLiterals']) {
-        punctuation += '(?!\s*\/)';
+      // Remove any prefix anchors so that the output will match anywhere.
+      // ^^ really does mean an anchored match though.
+      for (var i = 0; i < n; ++i) {
+        if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
       }
   
-      fallthroughStylePatterns.push(
-          // TODO(mikesamuel): recognize non-latin letters and numerals in idents
-          [PR_LITERAL,     /^@[a-z_$][a-z_$@0-9]*/i, null],
-          [PR_TYPE,        /^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/, null],
-          [PR_PLAIN,       /^[a-z_$][a-z_$@0-9]*/i, null],
-          [PR_LITERAL,
-           new RegExp(
-               '^(?:'
-               // A hex number
-               + '0x[a-f0-9]+'
-               // or an octal or decimal number,
-               + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
-               // possibly in scientific notation
-               + '(?:e[+\\-]?\\d+)?'
-               + ')'
-               // with an optional modifier like UL for unsigned long
-               + '[a-z]*', 'i'),
-           null, '0123456789'],
-          // Don't treat escaped quotes in bash as starting strings.
-          // See issue 144.
-          [PR_PLAIN,       /^\\[\s\S]?/, null],
-          [PR_PUNCTUATION, new RegExp(punctuation), null]);
+      // Expand letters to groups to handle mixing of case-sensitive and
+      // case-insensitive patterns if necessary.
+      if (regex.ignoreCase && needToFoldCase) {
+        for (var i = 0; i < n; ++i) {
+          var p = parts[i];
+          var ch0 = p.charAt(0);
+          if (p.length >= 2 && ch0 === '[') {
+            parts[i] = caseFoldCharset(p);
+          } else if (ch0 !== '\\') {
+            // TODO: handle letters in numeric escapes.
+            parts[i] = p.replace(
+                /[a-zA-Z]/g,
+                function (ch) {
+                  var cc = ch.charCodeAt(0);
+                  return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
+                });
+          }
+        }
+      }
   
-      return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
+      return parts.join('');
     }
   
-    var decorateSource = sourceDecorator({
-          'keywords': ALL_KEYWORDS,
-          'hashComments': true,
-          'cStyleComments': true,
-          'multiLineStrings': true,
-          'regexLiterals': true
-        });
+    var rewritten = [];
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.global || regex.multiline) { throw new Error('' + regex); }
+      rewritten.push(
+          '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
+    }
   
-    /**
-     * Given a DOM subtree, wraps it in a list, and puts each line into its own
-     * list item.
-     *
-     * @param {Node} node modified in place.  Its content is pulled into an
-     *     HTMLOListElement, and each line is moved into a separate list item.
-     *     This requires cloning elements, so the input might not have unique
-     *     IDs after numbering.
-     * @param {boolean} isPreformatted true iff white-space in text nodes should
-     *     be treated as significant.
-     */
-    function numberLines(node, opt_startLineNum, isPreformatted) {
-      var nocode = /(?:^|\s)nocode(?:\s|$)/;
-      var lineBreak = /\r\n?|\n/;
-    
-      var document = node.ownerDocument;
-    
-      var li = document.createElement('li');
-      while (node.firstChild) {
-        li.appendChild(node.firstChild);
-      }
-      // An array of lines.  We split below, so this is initialized to one
-      // un-split line.
-      var listItems = [li];
-    
-      function walk(node) {
-        var type = node.nodeType;
-        if (type == 1 && !nocode.test(node.className)) {  // Element
-          if ('br' === node.nodeName) {
-            breakAfter(node);
-            // Discard the <BR> since it is now flush against a </LI>.
-            if (node.parentNode) {
-              node.parentNode.removeChild(node);
-            }
+    return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
+  }
+
+  /**
+   * Split markup into a string of source code and an array mapping ranges in
+   * that string to the text nodes in which they appear.
+   *
+   * <p>
+   * The HTML DOM structure:</p>
+   * <pre>
+   * (Element   "p"
+   *   (Element "b"
+   *     (Text  "print "))       ; #1
+   *   (Text    "'Hello '")      ; #2
+   *   (Element "br")            ; #3
+   *   (Text    "  + 'World';")) ; #4
+   * </pre>
+   * <p>
+   * corresponds to the HTML
+   * {@code <p><b>print </b>'Hello '<br>  + 'World';</p>}.</p>
+   *
+   * <p>
+   * It will produce the output:</p>
+   * <pre>
+   * {
+   *   sourceCode: "print 'Hello '\n  + 'World';",
+   *   //                     1          2
+   *   //           012345678901234 5678901234567
+   *   spans: [0, #1, 6, #2, 14, #3, 15, #4]
+   * }
+   * </pre>
+   * <p>
+   * where #1 is a reference to the {@code "print "} text node above, and so
+   * on for the other text nodes.
+   * </p>
+   *
+   * <p>
+   * The {@code} spans array is an array of pairs.  Even elements are the start
+   * indices of substrings, and odd elements are the text nodes (or BR elements)
+   * that contain the text for those substrings.
+   * Substrings continue until the next index or the end of the source.
+   * </p>
+   *
+   * @param {Node} node an HTML DOM subtree containing source-code.
+   * @param {boolean} isPreformatted true if white-space in text nodes should
+   *    be considered significant.
+   * @return {Object} source code and the text nodes in which they occur.
+   */
+  function extractSourceSpans(node, isPreformatted) {
+    var nocode = /(?:^|\s)nocode(?:\s|$)/;
+  
+    var chunks = [];
+    var length = 0;
+    var spans = [];
+    var k = 0;
+  
+    function walk(node) {
+      var type = node.nodeType;
+      if (type == 1) {  // Element
+        if (nocode.test(node.className)) { return; }
+        for (var child = node.firstChild; child; child = child.nextSibling) {
+          walk(child);
+        }
+        var nodeName = node.nodeName.toLowerCase();
+        if ('br' === nodeName || 'li' === nodeName) {
+          chunks[k] = '\n';
+          spans[k << 1] = length++;
+          spans[(k++ << 1) | 1] = node;
+        }
+      } else if (type == 3 || type == 4) {  // Text
+        var text = node.nodeValue;
+        if (text.length) {
+          if (!isPreformatted) {
+            text = text.replace(/[ \t\r\n]+/g, ' ');
           } else {
-            for (var child = node.firstChild; child; child = child.nextSibling) {
-              walk(child);
-            }
-          }
-        } else if ((type == 3 || type == 4) && isPreformatted) {  // Text
-          var text = node.nodeValue;
-          var match = text.match(lineBreak);
-          if (match) {
-            var firstLine = text.substring(0, match.index);
-            node.nodeValue = firstLine;
-            var tail = text.substring(match.index + match[0].length);
-            if (tail) {
-              var parent = node.parentNode;
-              parent.insertBefore(
-                document.createTextNode(tail), node.nextSibling);
-            }
-            breakAfter(node);
-            if (!firstLine) {
-              // Don't leave blank text nodes in the DOM.
-              node.parentNode.removeChild(node);
-            }
+            text = text.replace(/\r\n?/g, '\n');  // Normalize newlines.
           }
+          // TODO: handle tabs here?
+          chunks[k] = text;
+          spans[k << 1] = length;
+          length += text.length;
+          spans[(k++ << 1) | 1] = node;
         }
       }
-    
-      // Split a line after the given node.
-      function breakAfter(lineEndNode) {
-        // If there's nothing to the right, then we can skip ending the line
-        // here, and move root-wards since splitting just before an end-tag
-        // would require us to create a bunch of empty copies.
-        while (!lineEndNode.nextSibling) {
-          lineEndNode = lineEndNode.parentNode;
-          if (!lineEndNode) { return; }
-        }
-    
-        function breakLeftOf(limit, copy) {
-          // Clone shallowly if this node needs to be on both sides of the break.
-          var rightSide = copy ? limit.cloneNode(false) : limit;
-          var parent = limit.parentNode;
-          if (parent) {
-            // We clone the parent chain.
-            // This helps us resurrect important styling elements that cross lines.
-            // E.g. in <i>Foo<br>Bar</i>
-            // should be rewritten to <li><i>Foo</i></li><li><i>Bar</i></li>.
-            var parentClone = breakLeftOf(parent, 1);
-            // Move the clone and everything to the right of the original
-            // onto the cloned parent.
-            var next = limit.nextSibling;
-            parentClone.appendChild(rightSide);
-            for (var sibling = next; sibling; sibling = next) {
-              next = sibling.nextSibling;
-              parentClone.appendChild(sibling);
-            }
+    }
+  
+    walk(node);
+  
+    return {
+      sourceCode: chunks.join('').replace(/\n$/, ''),
+      spans: spans
+    };
+  }
+
+  /**
+   * Apply the given language handler to sourceCode and add the resulting
+   * decorations to out.
+   * @param {number} basePos the index of sourceCode within the chunk of source
+   *    whose decorations are already present on out.
+   */
+  function appendDecorations(basePos, sourceCode, langHandler, out) {
+    if (!sourceCode) { return; }
+    var job = {
+      sourceCode: sourceCode,
+      basePos: basePos
+    };
+    langHandler(job);
+    out.push.apply(out, job.decorations);
+  }
+
+  var notWs = /\S/;
+
+  /**
+   * Given an element, if it contains only one child element and any text nodes
+   * it contains contain only space characters, return the sole child element.
+   * Otherwise returns undefined.
+   * <p>
+   * This is meant to return the CODE element in {@code <pre><code ...>} when
+   * there is a single child element that contains all the non-space textual
+   * content, but not to return anything where there are multiple child elements
+   * as in {@code <pre><code>...</code><code>...</code></pre>} or when there
+   * is textual content.
+   */
+  function childContentWrapper(element) {
+    var wrapper = undefined;
+    for (var c = element.firstChild; c; c = c.nextSibling) {
+      var type = c.nodeType;
+      wrapper = (type === 1)  // Element Node
+          ? (wrapper ? element : c)
+          : (type === 3)  // Text Node
+          ? (notWs.test(c.nodeValue) ? element : wrapper)
+          : wrapper;
+    }
+    return wrapper === element ? undefined : wrapper;
+  }
+
+  /** Given triples of [style, pattern, context] returns a lexing function,
+    * The lexing function interprets the patterns to find token boundaries and
+    * returns a decoration list of the form
+    * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
+    * where index_n is an index into the sourceCode, and style_n is a style
+    * constant like PR_PLAIN.  index_n-1 <= index_n, and style_n-1 applies to
+    * all characters in sourceCode[index_n-1:index_n].
+    *
+    * The stylePatterns is a list whose elements have the form
+    * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
+    *
+    * Style is a style constant like PR_PLAIN, or can be a string of the
+    * form 'lang-FOO', where FOO is a language extension describing the
+    * language of the portion of the token in $1 after pattern executes.
+    * E.g., if style is 'lang-lisp', and group 1 contains the text
+    * '(hello (world))', then that portion of the token will be passed to the
+    * registered lisp handler for formatting.
+    * The text before and after group 1 will be restyled using this decorator
+    * so decorators should take care that this doesn't result in infinite
+    * recursion.  For example, the HTML lexer rule for SCRIPT elements looks
+    * something like ['lang-js', /<[s]cript>(.+?)<\/script>/].  This may match
+    * '<script>foo()<\/script>', which would cause the current decorator to
+    * be called with '<script>' which would not match the same rule since
+    * group 1 must not be empty, so it would be instead styled as PR_TAG by
+    * the generic tag rule.  The handler registered for the 'js' extension would
+    * then be called with 'foo()', and finally, the current decorator would
+    * be called with '<\/script>' which would not match the original rule and
+    * so the generic tag rule would identify it as a tag.
+    *
+    * Pattern must only match prefixes, and if it matches a prefix, then that
+    * match is considered a token with the same style.
+    *
+    * Context is applied to the last non-whitespace, non-comment token
+    * recognized.
+    *
+    * Shortcut is an optional string of characters, any of which, if the first
+    * character, gurantee that this pattern and only this pattern matches.
+    *
+    * @param {Array} shortcutStylePatterns patterns that always start with
+    *   a known character.  Must have a shortcut string.
+    * @param {Array} fallthroughStylePatterns patterns that will be tried in
+    *   order if the shortcut ones fail.  May have shortcuts.
+    *
+    * @return {function (Object)} a
+    *   function that takes source code and returns a list of decorations.
+    */
+  function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
+    var shortcuts = {};
+    var tokenizer;
+    (function () {
+      var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
+      var allRegexs = [];
+      var regexKeys = {};
+      for (var i = 0, n = allPatterns.length; i < n; ++i) {
+        var patternParts = allPatterns[i];
+        var shortcutChars = patternParts[3];
+        if (shortcutChars) {
+          for (var c = shortcutChars.length; --c >= 0;) {
+            shortcuts[shortcutChars.charAt(c)] = patternParts;
           }
-          return rightSide;
         }
-    
-        var copiedListItem = breakLeftOf(lineEndNode.nextSibling, 0);
-    
-        // Walk the parent chain until we reach an unattached LI.
-        for (var parent;
-             // Check nodeType since IE invents document fragments.
-             (parent = copiedListItem.parentNode) && parent.nodeType === 1;) {
-          copiedListItem = parent;
-        }
-        // Put it on the list of lines for later processing.
-        listItems.push(copiedListItem);
-      }
-    
-      // Split lines while there are lines left to split.
-      for (var i = 0;  // Number of lines that have been split so far.
-           i < listItems.length;  // length updated by breakAfter calls.
-           ++i) {
-        walk(listItems[i]);
-      }
-    
-      // Make sure numeric indices show correctly.
-      if (opt_startLineNum === (opt_startLineNum|0)) {
-        listItems[0].setAttribute('value', opt_startLineNum);
-      }
-    
-      var ol = document.createElement('ol');
-      ol.className = 'linenums';
-      var offset = Math.max(0, ((opt_startLineNum - 1 /* zero index */)) | 0) || 0;
-      for (var i = 0, n = listItems.length; i < n; ++i) {
-        li = listItems[i];
-        // Stick a class on the LIs so that stylesheets can
-        // color odd/even rows, or any other row pattern that
-        // is co-prime with 10.
-        li.className = 'L' + ((i + offset) % 10);
-        if (!li.firstChild) {
-          li.appendChild(document.createTextNode('\xA0'));
+        var regex = patternParts[1];
+        var k = '' + regex;
+        if (!regexKeys.hasOwnProperty(k)) {
+          allRegexs.push(regex);
+          regexKeys[k] = null;
         }
-        ol.appendChild(li);
       }
-    
-      node.appendChild(ol);
-    }
+      allRegexs.push(/[\0-\uffff]/);
+      tokenizer = combinePrefixPatterns(allRegexs);
+    })();
+
+    var nPatterns = fallthroughStylePatterns.length;
+
     /**
-     * Breaks {@code job.sourceCode} around style boundaries in
-     * {@code job.decorations} and modifies {@code job.sourceNode} in place.
-     * @param {Object} job like <pre>{
-     *    sourceCode: {string} source as plain text,
-     *    sourceNode: {HTMLElement} the element containing the source,
-     *    spans: {Array.<number|Node>} alternating span start indices into source
-     *       and the text node or element (e.g. {@code <BR>}) corresponding to that
-     *       span.
-     *    decorations: {Array.<number|string} an array of style classes preceded
-     *       by the position at which they start in job.sourceCode in order
+     * Lexes job.sourceCode and produces an output array job.decorations of
+     * style classes preceded by the position at which they start in
+     * job.sourceCode in order.
+     *
+     * @param {Object} job an object like <pre>{
+     *    sourceCode: {string} sourceText plain text,
+     *    basePos: {int} position of job.sourceCode in the larger chunk of
+     *        sourceCode.
      * }</pre>
-     * @private
      */
-    function recombineTagsAndDecorations(job) {
-      var isIE8OrEarlier = /\bMSIE\s(\d+)/.exec(navigator.userAgent);
-      isIE8OrEarlier = isIE8OrEarlier && +isIE8OrEarlier[1] <= 8;
-      var newlineRe = /\n/g;
-    
-      var source = job.sourceCode;
-      var sourceLength = source.length;
-      // Index into source after the last code-unit recombined.
-      var sourceIndex = 0;
-    
-      var spans = job.spans;
-      var nSpans = spans.length;
-      // Index into spans after the last span which ends at or before sourceIndex.
-      var spanIndex = 0;
-    
-      var decorations = job.decorations;
-      var nDecorations = decorations.length;
-      // Index into decorations after the last decoration which ends at or before
-      // sourceIndex.
-      var decorationIndex = 0;
-    
-      // Remove all zero-length decorations.
-      decorations[nDecorations] = sourceLength;
-      var decPos, i;
-      for (i = decPos = 0; i < nDecorations;) {
-        if (decorations[i] !== decorations[i + 2]) {
-          decorations[decPos++] = decorations[i++];
-          decorations[decPos++] = decorations[i++];
+    var decorate = function (job) {
+      var sourceCode = job.sourceCode, basePos = job.basePos;
+      /** Even entries are positions in source in ascending order.  Odd enties
+        * are style markers (e.g., PR_COMMENT) that run from that position until
+        * the end.
+        * @type {Array.<number|string>}
+        */
+      var decorations = [basePos, PR_PLAIN];
+      var pos = 0;  // index into sourceCode
+      var tokens = sourceCode.match(tokenizer) || [];
+      var styleCache = {};
+
+      for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
+        var token = tokens[ti];
+        var style = styleCache[token];
+        var match = void 0;
+
+        var isEmbedded;
+        if (typeof style === 'string') {
+          isEmbedded = false;
         } else {
-          i += 2;
-        }
-      }
-      nDecorations = decPos;
-    
-      // Simplify decorations.
-      for (i = decPos = 0; i < nDecorations;) {
-        var startPos = decorations[i];
-        // Conflate all adjacent decorations that use the same style.
-        var startDec = decorations[i + 1];
-        var end = i + 2;
-        while (end + 2 <= nDecorations && decorations[end + 1] === startDec) {
-          end += 2;
-        }
-        decorations[decPos++] = startPos;
-        decorations[decPos++] = startDec;
-        i = end;
-      }
-    
-      nDecorations = decorations.length = decPos;
-    
-      var sourceNode = job.sourceNode;
-      var oldDisplay;
-      if (sourceNode) {
-        oldDisplay = sourceNode.style.display;
-        sourceNode.style.display = 'none';
-      }
-      try {
-        var decoration = null;
-        while (spanIndex < nSpans) {
-          var spanStart = spans[spanIndex];
-          var spanEnd = spans[spanIndex + 2] || sourceLength;
-    
-          var decEnd = decorations[decorationIndex + 2] || sourceLength;
-    
-          var end = Math.min(spanEnd, decEnd);
-    
-          var textNode = spans[spanIndex + 1];
-          var styledText;
-          if (textNode.nodeType !== 1  // Don't muck with <BR>s or <LI>s
-              // Don't introduce spans around empty text nodes.
-              && (styledText = source.substring(sourceIndex, end))) {
-            // This may seem bizarre, and it is.  Emitting LF on IE causes the
-            // code to display with spaces instead of line breaks.
-            // Emitting Windows standard issue linebreaks (CRLF) causes a blank
-            // space to appear at the beginning of every line but the first.
-            // Emitting an old Mac OS 9 line separator makes everything spiffy.
-            if (isIE8OrEarlier) {
-              styledText = styledText.replace(newlineRe, '\r');
+          var patternParts = shortcuts[token.charAt(0)];
+          if (patternParts) {
+            match = token.match(patternParts[1]);
+            style = patternParts[0];
+          } else {
+            for (var i = 0; i < nPatterns; ++i) {
+              patternParts = fallthroughStylePatterns[i];
+              match = token.match(patternParts[1]);
+              if (match) {
+                style = patternParts[0];
+                break;
+              }
             }
-            textNode.nodeValue = styledText;
-            var document = textNode.ownerDocument;
-            var span = document.createElement('span');
-            span.className = decorations[decorationIndex + 1];
-            var parentNode = textNode.parentNode;
-            parentNode.replaceChild(span, textNode);
-            span.appendChild(textNode);
-            if (sourceIndex < spanEnd) {  // Split off a text node.
-              spans[spanIndex + 1] = textNode
-                  // TODO: Possibly optimize by using '' if there's no flicker.
-                  = document.createTextNode(source.substring(end, spanEnd));
-              parentNode.insertBefore(textNode, span.nextSibling);
+
+            if (!match) {  // make sure that we make progress
+              style = PR_PLAIN;
             }
           }
-    
-          sourceIndex = end;
-    
-          if (sourceIndex >= spanEnd) {
-            spanIndex += 2;
-          }
-          if (sourceIndex >= decEnd) {
-            decorationIndex += 2;
+
+          isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
+          if (isEmbedded && !(match && typeof match[1] === 'string')) {
+            isEmbedded = false;
+            style = PR_SOURCE;
           }
+
+          if (!isEmbedded) { styleCache[token] = style; }
         }
-      } finally {
-        if (sourceNode) {
-          sourceNode.style.display = oldDisplay;
-        }
-      }
-    }
-  
-    /** Maps language-specific file extensions to handlers. */
-    var langHandlerRegistry = {};
-    /** Register a language handler for the given file extensions.
-      * @param {function (Object)} handler a function from source code to a list
-      *      of decorations.  Takes a single argument job which describes the
-      *      state of the computation.   The single parameter has the form
-      *      {@code {
-      *        sourceCode: {string} as plain text.
-      *        decorations: {Array.<number|string>} an array of style classes
-      *                     preceded by the position at which they start in
-      *                     job.sourceCode in order.
-      *                     The language handler should assigned this field.
-      *        basePos: {int} the position of source in the larger source chunk.
-      *                 All positions in the output decorations array are relative
-      *                 to the larger source chunk.
-      *      } }
-      * @param {Array.<string>} fileExtensions
-      */
-    function registerLangHandler(handler, fileExtensions) {
-      for (var i = fileExtensions.length; --i >= 0;) {
-        var ext = fileExtensions[i];
-        if (!langHandlerRegistry.hasOwnProperty(ext)) {
-          langHandlerRegistry[ext] = handler;
-        } else if (win['console']) {
-          console['warn']('cannot override language handler %s', ext);
+
+        var tokenStart = pos;
+        pos += token.length;
+
+        if (!isEmbedded) {
+          decorations.push(basePos + tokenStart, style);
+        } else {  // Treat group 1 as an embedded block of source code.
+          var embeddedSource = match[1];
+          var embeddedSourceStart = token.indexOf(embeddedSource);
+          var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
+          if (match[2]) {
+            // If embeddedSource can be blank, then it would match at the
+            // beginning which would cause us to infinitely recurse on the
+            // entire token, so we catch the right context in match[2].
+            embeddedSourceEnd = token.length - match[2].length;
+            embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
+          }
+          var lang = style.substring(5);
+          // Decorate the left of the embedded source
+          appendDecorations(
+              basePos + tokenStart,
+              token.substring(0, embeddedSourceStart),
+              decorate, decorations);
+          // Decorate the embedded source
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceStart,
+              embeddedSource,
+              langHandlerForExtension(lang, embeddedSource),
+              decorations);
+          // Decorate the right of the embedded section
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceEnd,
+              token.substring(embeddedSourceEnd),
+              decorate, decorations);
         }
       }
+      job.decorations = decorations;
+    };
+    return decorate;
+  }
+
+  /** returns a function that produces a list of decorations from source text.
+    *
+    * This code treats ", ', and ` as string delimiters, and \ as a string
+    * escape.  It does not recognize perl's qq() style strings.
+    * It has no special handling for double delimiter escapes as in basic, or
+    * the tripled delimiters used in python, but should work on those regardless
+    * although in those cases a single string literal may be broken up into
+    * multiple adjacent string literals.
+    *
+    * It recognizes C, C++, and shell style comments.
+    *
+    * @param {Object} options a set of optional parameters.
+    * @return {function (Object)} a function that examines the source code
+    *     in the input job and builds the decoration list.
+    */
+  function sourceDecorator(options) {
+    var shortcutStylePatterns = [], fallthroughStylePatterns = [];
+    if (options['tripleQuotedStrings']) {
+      // '''multi-line-string''', 'single-line-string', and double-quoted
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
+           null, '\'"']);
+    } else if (options['multiLineStrings']) {
+      // 'multi-line-string', "multi-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
+           null, '\'"`']);
+    } else {
+      // 'single-line-string', "single-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,
+           /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
+           null, '"\'']);
     }
-    function langHandlerForExtension(extension, source) {
-      if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
-        // Treat it as markup if the first non whitespace character is a < and
-        // the last non-whitespace character is a >.
-        extension = /^\s*</.test(source)
-            ? 'default-markup'
-            : 'default-code';
-      }
-      return langHandlerRegistry[extension];
+    if (options['verbatimStrings']) {
+      // verbatim-string-literal production from the C# grammar.  See issue 93.
+      fallthroughStylePatterns.push(
+          [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
     }
-    registerLangHandler(decorateSource, ['default-code']);
-    registerLangHandler(
-        createSimpleLexer(
-            [],
-            [
-             [PR_PLAIN,       /^[^<?]+/],
-             [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
-             [PR_COMMENT,     /^<\!--[\s\S]*?(?:-\->|$)/],
-             // Unescaped content in an unknown language
-             ['lang-',        /^<\?([\s\S]+?)(?:\?>|$)/],
-             ['lang-',        /^<%([\s\S]+?)(?:%>|$)/],
-             [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
-             ['lang-',        /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
-             // Unescaped content in javascript.  (Or possibly vbscript).
-             ['lang-js',      /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
-             // Contains unescaped stylesheet content
-             ['lang-css',     /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
-             ['lang-in.tag',  /^(<\/?[a-z][^<>]*>)/i]
-            ]),
-        ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
-    registerLangHandler(
-        createSimpleLexer(
-            [
-             [PR_PLAIN,        /^[\s]+/, null, ' \t\r\n'],
-             [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
-             ],
-            [
-             [PR_TAG,          /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
-             [PR_ATTRIB_NAME,  /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
-             ['lang-uq.val',   /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
-             [PR_PUNCTUATION,  /^[=<>\/]+/],
-             ['lang-js',       /^on\w+\s*=\s*\"([^\"]+)\"/i],
-             ['lang-js',       /^on\w+\s*=\s*\'([^\']+)\'/i],
-             ['lang-js',       /^on\w+\s*=\s*([^\"\'>\s]+)/i],
-             ['lang-css',      /^style\s*=\s*\"([^\"]+)\"/i],
-             ['lang-css',      /^style\s*=\s*\'([^\']+)\'/i],
-             ['lang-css',      /^style\s*=\s*([^\"\'>\s]+)/i]
-             ]),
-        ['in.tag']);
-    registerLangHandler(
-        createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
-    registerLangHandler(sourceDecorator({
-            'keywords': CPP_KEYWORDS,
-            'hashComments': true,
-            'cStyleComments': true,
-            'types': C_TYPES
-          }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
-    registerLangHandler(sourceDecorator({
-            'keywords': 'null,true,false'
-          }), ['json']);
-    registerLangHandler(sourceDecorator({
-            'keywords': CSHARP_KEYWORDS,
-            'hashComments': true,
-            'cStyleComments': true,
-            'verbatimStrings': true,
-            'types': C_TYPES
-          }), ['cs']);
-    registerLangHandler(sourceDecorator({
-            'keywords': JAVA_KEYWORDS,
-            'cStyleComments': true
-          }), ['java']);
-    registerLangHandler(sourceDecorator({
-            'keywords': SH_KEYWORDS,
-            'hashComments': true,
-            'multiLineStrings': true
-          }), ['bash', 'bsh', 'csh', 'sh']);
-    registerLangHandler(sourceDecorator({
-            'keywords': PYTHON_KEYWORDS,
-            'hashComments': true,
-            'multiLineStrings': true,
-            'tripleQuotedStrings': true
-          }), ['cv', 'py', 'python']);
-    registerLangHandler(sourceDecorator({
-            'keywords': PERL_KEYWORDS,
-            'hashComments': true,
-            'multiLineStrings': true,
-            'regexLiterals': 2  // multiline regex literals
-          }), ['perl', 'pl', 'pm']);
-    registerLangHandler(sourceDecorator({
-            'keywords': RUBY_KEYWORDS,
-            'hashComments': true,
-            'multiLineStrings': true,
-            'regexLiterals': true
-          }), ['rb', 'ruby']);
-    registerLangHandler(sourceDecorator({
-            'keywords': JSCRIPT_KEYWORDS,
-            'cStyleComments': true,
-            'regexLiterals': true
-          }), ['javascript', 'js']);
-    registerLangHandler(sourceDecorator({
-            'keywords': COFFEE_KEYWORDS,
-            'hashComments': 3,  // ### style block comments
-            'cStyleComments': true,
-            'multilineStrings': true,
-            'tripleQuotedStrings': true,
-            'regexLiterals': true
-          }), ['coffee']);
-    registerLangHandler(sourceDecorator({
-            'keywords': RUST_KEYWORDS,
-            'cStyleComments': true,
-            'multilineStrings': true
-          }), ['rc', 'rs', 'rust']);
-    registerLangHandler(
-        createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
-  
-    function applyDecorator(job) {
-      var opt_langExtension = job.langExtension;
-  
-      try {
-        // Extract tags, and convert the source code to plain text.
-        var sourceAndSpans = extractSourceSpans(job.sourceNode, job.pre);
-        /** Plain text. @type {string} */
-        var source = sourceAndSpans.sourceCode;
-        job.sourceCode = source;
-        job.spans = sourceAndSpans.spans;
-        job.basePos = 0;
-  
-        // Apply the appropriate language handler
-        langHandlerForExtension(opt_langExtension, source)(job);
-  
-        // Integrate the decorations and tags back into the source code,
-        // modifying the sourceNode in place.
-        recombineTagsAndDecorations(job);
-      } catch (e) {
-        if (win['console']) {
-          console['log'](e && e['stack'] || e);
+    var hc = options['hashComments'];
+    if (hc) {
+      if (options['cStyleComments']) {
+        if (hc > 1) {  // multiline hash comments
+          shortcutStylePatterns.push(
+              [PR_COMMENT, /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, null, '#']);
+        } else {
+          // Stop C preprocessor declarations at an unclosed open comment
+          shortcutStylePatterns.push(
+              [PR_COMMENT, /^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\r\n]*)/,
+               null, '#']);
         }
+        // #include <stdio.h>
+        fallthroughStylePatterns.push(
+            [PR_STRING,
+             /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/,
+             null]);
+      } else {
+        shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
       }
     }
-  
-    /**
-     * Pretty print a chunk of code.
-     * @param sourceCodeHtml {string} The HTML to pretty print.
-     * @param opt_langExtension {string} The language name to use.
-     *     Typically, a filename extension like 'cpp' or 'java'.
-     * @param opt_numberLines {number|boolean} True to number lines,
-     *     or the 1-indexed number of the first line in sourceCodeHtml.
-     */
-    function $prettyPrintOne(sourceCodeHtml, opt_langExtension, opt_numberLines) {
-      var container = document.createElement('div');
-      // This could cause images to load and onload listeners to fire.
-      // E.g. <img onerror="alert(1337)" src="nosuchimage.png">.
-      // We assume that the inner HTML is from a trusted source.
-      // The pre-tag is required for IE8 which strips newlines from innerHTML
-      // when it is injected into a <pre> tag.
-      // http://stackoverflow.com/questions/451486/pre-tag-loses-line-breaks-when-setting-innerhtml-in-ie
-      // http://stackoverflow.com/questions/195363/inserting-a-newline-into-a-pre-tag-ie-javascript
-      container.innerHTML = '<pre>' + sourceCodeHtml + '</pre>';
-      container = container.firstChild;
-      if (opt_numberLines) {
-        numberLines(container, opt_numberLines, true);
-      }
-  
-      var job = {
-        langExtension: opt_langExtension,
-        numberLines: opt_numberLines,
-        sourceNode: container,
-        pre: 1
-      };
-      applyDecorator(job);
-      return container.innerHTML;
+    if (options['cStyleComments']) {
+      fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
+      fallthroughStylePatterns.push(
+          [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
     }
+    var regexLiterals = options['regexLiterals'];
+    if (regexLiterals) {
+      /**
+       * @const
+       */
+      var regexExcls = regexLiterals > 1
+        ? ''  // Multiline regex literals
+        : '\n\r';
+      /**
+       * @const
+       */
+      var regexAny = regexExcls ? '.' : '[\\S\\s]';
+      /**
+       * @const
+       */
+      var REGEX_LITERAL = (
+          // A regular expression literal starts with a slash that is
+          // not followed by * or / so that it is not confused with
+          // comments.
+          '/(?=[^/*' + regexExcls + '])'
+          // and then contains any number of raw characters,
+          + '(?:[^/\\x5B\\x5C' + regexExcls + ']'
+          // escape sequences (\x5C),
+          +    '|\\x5C' + regexAny
+          // or non-nesting character sets (\x5B\x5D);
+          +    '|\\x5B(?:[^\\x5C\\x5D' + regexExcls + ']'
+          +             '|\\x5C' + regexAny + ')*(?:\\x5D|$))+'
+          // finally closed by a /.
+          + '/');
+      fallthroughStylePatterns.push(
+          ['lang-regex',
+           RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
+           ]);
+    }
+
+    var types = options['types'];
+    if (types) {
+      fallthroughStylePatterns.push([PR_TYPE, types]);
+    }
+
+    var keywords = ("" + options['keywords']).replace(/^ | $/g, '');
+    if (keywords.length) {
+      fallthroughStylePatterns.push(
+          [PR_KEYWORD,
+           new RegExp('^(?:' + keywords.replace(/[\s,]+/g, '|') + ')\\b'),
+           null]);
+    }
+
+    shortcutStylePatterns.push([PR_PLAIN,       /^\s+/, null, ' \r\n\t\xA0']);
+
+    var punctuation =
+      // The Bash man page says
+
+      // A word is a sequence of characters considered as a single
+      // unit by GRUB. Words are separated by metacharacters,
+      // which are the following plus space, tab, and newline: { }
+      // | & $ ; < >
+      // ...
+      
+      // A word beginning with # causes that word and all remaining
+      // characters on that line to be ignored.
+
+      // which means that only a '#' after /(?:^|[{}|&$;<>\s])/ starts a
+      // comment but empirically
+      // $ echo {#}
+      // {#}
+      // $ echo \$#
+      // $#
+      // $ echo }#
+      // }#
+
+      // so /(?:^|[|&;<>\s])/ is more appropriate.
+
+      // http://gcc.gnu.org/onlinedocs/gcc-2.95.3/cpp_1.html#SEC3
+      // suggests that this definition is compatible with a
+      // default mode that tries to use a single token definition
+      // to recognize both bash/python style comments and C
+      // preprocessor directives.
+
+      // This definition of punctuation does not include # in the list of
+      // follow-on exclusions, so # will not be broken before if preceeded
+      // by a punctuation character.  We could try to exclude # after
+      // [|&;<>] but that doesn't seem to cause many major problems.
+      // If that does turn out to be a problem, we should change the below
+      // when hc is truthy to include # in the run of punctuation characters
+      // only when not followint [|&;<>].
+      '^.[^\\s\\w.$@\'"`/\\\\]*';
+    if (options['regexLiterals']) {
+      punctuation += '(?!\s*\/)';
+    }
+
+    fallthroughStylePatterns.push(
+        // TODO(mikesamuel): recognize non-latin letters and numerals in idents
+        [PR_LITERAL,     /^@[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_TYPE,        /^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/, null],
+        [PR_PLAIN,       /^[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_LITERAL,
+         new RegExp(
+             '^(?:'
+             // A hex number
+             + '0x[a-f0-9]+'
+             // or an octal or decimal number,
+             + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
+             // possibly in scientific notation
+             + '(?:e[+\\-]?\\d+)?'
+             + ')'
+             // with an optional modifier like UL for unsigned long
+             + '[a-z]*', 'i'),
+         null, '0123456789'],
+        // Don't treat escaped quotes in bash as starting strings.
+        // See issue 144.
+        [PR_PLAIN,       /^\\[\s\S]?/, null],
+        [PR_PUNCTUATION, new RegExp(punctuation), null]);
+
+    return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
+  }
+
+  var decorateSource = sourceDecorator({
+        'keywords': ALL_KEYWORDS,
+        'hashComments': true,
+        'cStyleComments': true,
+        'multiLineStrings': true,
+        'regexLiterals': true
+      });
+
+  /**
+   * Given a DOM subtree, wraps it in a list, and puts each line into its own
+   * list item.
+   *
+   * @param {Node} node modified in place.  Its content is pulled into an
+   *     HTMLOListElement, and each line is moved into a separate list item.
+   *     This requires cloning elements, so the input might not have unique
+   *     IDs after numbering.
+   * @param {boolean} isPreformatted true iff white-space in text nodes should
+   *     be treated as significant.
+   */
+  function numberLines(node, opt_startLineNum, isPreformatted) {
+    var nocode = /(?:^|\s)nocode(?:\s|$)/;
+    var lineBreak = /\r\n?|\n/;
   
-     /**
-      * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
-      * {@code class=prettyprint} and prettify them.
-      *
-      * @param {Function} opt_whenDone called when prettifying is done.
-      * @param {HTMLElement|HTMLDocument} opt_root an element or document
-      *   containing all the elements to pretty print.
-      *   Defaults to {@code document.body}.
-      */
-    function $prettyPrint(opt_whenDone, opt_root) {
-      var root = opt_root || document.body;
-      var doc = root.ownerDocument || document;
-      function byTagName(tn) { return root.getElementsByTagName(tn); }
-      // fetch a list of nodes to rewrite
-      var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
-      var elements = [];
-      for (var i = 0; i < codeSegments.length; ++i) {
-        for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
-          elements.push(codeSegments[i][j]);
-        }
-      }
-      codeSegments = null;
-  
-      var clock = Date;
-      if (!clock['now']) {
-        clock = { 'now': function () { return +(new Date); } };
-      }
-  
-      // The loop is broken into a series of continuations to make sure that we
-      // don't make the browser unresponsive when rewriting a large page.
-      var k = 0;
-      var prettyPrintingJob;
-  
-      var langExtensionRe = /\blang(?:uage)?-([\w.]+)(?!\S)/;
-      var prettyPrintRe = /\bprettyprint\b/;
-      var prettyPrintedRe = /\bprettyprinted\b/;
-      var preformattedTagNameRe = /pre|xmp/i;
-      var codeRe = /^code$/i;
-      var preCodeXmpRe = /^(?:pre|code|xmp)$/i;
-      var EMPTY = {};
-  
-      function doWork() {
-        var endTime = (win['PR_SHOULD_USE_CONTINUATION'] ?
-                       clock['now']() + 250 /* ms */ :
-                       Infinity);
-        for (; k < elements.length && clock['now']() < endTime; k++) {
-          var cs = elements[k];
-  
-          // Look for a preceding comment like
-          // <?prettify lang="..." linenums="..."?>
-          var attrs = EMPTY;
-          {
-            for (var preceder = cs; (preceder = preceder.previousSibling);) {
-              var nt = preceder.nodeType;
-              // <?foo?> is parsed by HTML 5 to a comment node (8)
-              // like <!--?foo?-->, but in XML is a processing instruction
-              var value = (nt === 7 || nt === 8) && preceder.nodeValue;
-              if (value
-                  ? !/^\??prettify\b/.test(value)
-                  : (nt !== 3 || /\S/.test(preceder.nodeValue))) {
-                // Skip over white-space text nodes but not others.
-                break;
-              }
-              if (value) {
-                attrs = {};
-                value.replace(
-                    /\b(\w+)=([\w:.%+-]+)/g,
-                  function (_, name, value) { attrs[name] = value; });
-                break;
-              }
-            }
-          }
-  
-          var className = cs.className;
-          if ((attrs !== EMPTY || prettyPrintRe.test(className))
-              // Don't redo this if we've already done it.
-              // This allows recalling pretty print to just prettyprint elements
-              // that have been added to the page since last call.
-              && !prettyPrintedRe.test(className)) {
-  
-            // make sure this is not nested in an already prettified element
-            var nested = false;
-            for (var p = cs.parentNode; p; p = p.parentNode) {
-              var tn = p.tagName;
-              if (preCodeXmpRe.test(tn)
-                  && p.className && prettyPrintRe.test(p.className)) {
-                nested = true;
-                break;
-              }
-            }
-            if (!nested) {
-              // Mark done.  If we fail to prettyprint for whatever reason,
-              // we shouldn't try again.
-              cs.className += ' prettyprinted';
-  
-              // If the classes includes a language extensions, use it.
-              // Language extensions can be specified like
-              //     <pre class="prettyprint lang-cpp">
-              // the language extension "cpp" is used to find a language handler
-              // as passed to PR.registerLangHandler.
-              // HTML5 recommends that a language be specified using "language-"
-              // as the prefix instead.  Google Code Prettify supports both.
-              // http://dev.w3.org/html5/spec-author-view/the-code-element.html
-              var langExtension = attrs['lang'];
-              if (!langExtension) {
-                langExtension = className.match(langExtensionRe);
-                // Support <pre class="prettyprint"><code class="language-c">
-                var wrapper;
-                if (!langExtension && (wrapper = childContentWrapper(cs))
-                    && codeRe.test(wrapper.tagName)) {
-                  langExtension = wrapper.className.match(langExtensionRe);
-                }
-  
-                if (langExtension) { langExtension = langExtension[1]; }
-              }
-  
-              var preformatted;
-              if (preformattedTagNameRe.test(cs.tagName)) {
-                preformatted = 1;
-              } else {
-                var currentStyle = cs['currentStyle'];
-                var defaultView = doc.defaultView;
-                var whitespace = (
-                    currentStyle
-                    ? currentStyle['whiteSpace']
-                    : (defaultView
-                       && defaultView.getComputedStyle)
-                    ? defaultView.getComputedStyle(cs, null)
-                    .getPropertyValue('white-space')
-                    : 0);
-                preformatted = whitespace
-                    && 'pre' === whitespace.substring(0, 3);
-              }
-  
-              // Look for a class like linenums or linenums:<n> where <n> is the
-              // 1-indexed number of the first line.
-              var lineNums = attrs['linenums'];
-              if (!(lineNums = lineNums === 'true' || +lineNums)) {
-                lineNums = className.match(/\blinenums\b(?::(\d+))?/);
-                lineNums =
-                  lineNums
-                  ? lineNums[1] && lineNums[1].length
-                    ? +lineNums[1] : true
-                  : false;
-              }
-              if (lineNums) { numberLines(cs, lineNums, preformatted); }
+    var document = node.ownerDocument;
   
-              // do the pretty printing
-              prettyPrintingJob = {
-                langExtension: langExtension,
-                sourceNode: cs,
-                numberLines: lineNums,
-                pre: preformatted
-              };
-              applyDecorator(prettyPrintingJob);
-            }
+    var li = document.createElement('li');
+    while (node.firstChild) {
+      li.appendChild(node.firstChild);
+    }
+    // An array of lines.  We split below, so this is initialized to one
+    // un-split line.
+    var listItems = [li];
+  
+    function walk(node) {
+      var type = node.nodeType;
+      if (type == 1 && !nocode.test(node.className)) {  // Element
+        if ('br' === node.nodeName) {
+          breakAfter(node);
+          // Discard the <BR> since it is now flush against a </LI>.
+          if (node.parentNode) {
+            node.parentNode.removeChild(node);
+          }
+        } else {
+          for (var child = node.firstChild; child; child = child.nextSibling) {
+            walk(child);
           }
         }
-        if (k < elements.length) {
-          // finish up in a continuation
-          setTimeout(doWork, 250);
-        } else if ('function' === typeof opt_whenDone) {
-          opt_whenDone();
+      } else if ((type == 3 || type == 4) && isPreformatted) {  // Text
+        var text = node.nodeValue;
+        var match = text.match(lineBreak);
+        if (match) {
+          var firstLine = text.substring(0, match.index);
+          node.nodeValue = firstLine;
+          var tail = text.substring(match.index + match[0].length);
+          if (tail) {
+            var parent = node.parentNode;
+            parent.insertBefore(
+              document.createTextNode(tail), node.nextSibling);
+          }
+          breakAfter(node);
+          if (!firstLine) {
+            // Don't leave blank text nodes in the DOM.
+            node.parentNode.removeChild(node);
+          }
         }
       }
-  
-      doWork();
-    }
-  
-    /**
-     * Contains functions for creating and registering new language handlers.
-     * @type {Object}
-     */
-    var PR = win['PR'] = {
-          'createSimpleLexer': createSimpleLexer,
-          'registerLangHandler': registerLangHandler,
-          'sourceDecorator': sourceDecorator,
-          'PR_ATTRIB_NAME': PR_ATTRIB_NAME,
-          'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE,
-          'PR_COMMENT': PR_COMMENT,
-          'PR_DECLARATION': PR_DECLARATION,
-          'PR_KEYWORD': PR_KEYWORD,
-          'PR_LITERAL': PR_LITERAL,
-          'PR_NOCODE': PR_NOCODE,
-          'PR_PLAIN': PR_PLAIN,
-          'PR_PUNCTUATION': PR_PUNCTUATION,
-          'PR_SOURCE': PR_SOURCE,
-          'PR_STRING': PR_STRING,
-          'PR_TAG': PR_TAG,
-          'PR_TYPE': PR_TYPE,
-          'prettyPrintOne':
-             IN_GLOBAL_SCOPE
-               ? (win['prettyPrintOne'] = $prettyPrintOne)
-               : (prettyPrintOne = $prettyPrintOne),
-          'prettyPrint': prettyPrint =
-             IN_GLOBAL_SCOPE
-               ? (win['prettyPrint'] = $prettyPrint)
-               : (prettyPrint = $prettyPrint)
-        };
-  
-    // Make PR available via the Asynchronous Module Definition (AMD) API.
-    // Per https://github.com/amdjs/amdjs-api/wiki/AMD:
-    // The Asynchronous Module Definition (AMD) API specifies a
-    // mechanism for defining modules such that the module and its
-    // dependencies can be asynchronously loaded.
-    // ...
-    // To allow a clear indicator that a global define function (as
-    // needed for script src browser loading) conforms to the AMD API,
-    // any global define function SHOULD have a property called "amd"
-    // whose value is an object. This helps avoid conflict with any
-    // other existing JavaScript code that could have defined a define()
-    // function that does not conform to the AMD API.
-    if (typeof define === "function" && define['amd']) {
-      define("google-code-prettify", [], function () {
-        return PR; 
-      });
     }
-  })();
-  
-  define("prettify", function(){});
-  
-  define('itemView',[
-    'App',
-    // Templates
-    'text!tpl/item.html',
-    'text!tpl/class.html',
-    'text!tpl/itemEnd.html',
-    // Tools
-    'prettify'
-  ], function(App, itemTpl, classTpl, endTpl) {
-    'use strict';
   
-    var appVersion = App.project.version || 'master';
-  
-    var itemView = Backbone.View.extend({
-      el: '#item',
-      init: function() {
-        this.$html = $('html');
-        this.$body = $('body');
-        this.$scrollBody = $('html, body'); // hack for Chrome/Firefox scroll
-  
-        this.tpl = _.template(itemTpl);
-        this.classTpl = _.template(classTpl);
-        this.endTpl = _.template(endTpl);
-  
-        return this;
-      },
-      getSyntax: function(isMethod, cleanItem) {
-        var isConstructor = cleanItem.is_constructor;
-        var syntax = '';
-        if (isConstructor) {
-          syntax += 'new ';
-        } else if (cleanItem.static && cleanItem.class) {
-          syntax += cleanItem.class + '.';
-        }
-        syntax += cleanItem.name;
+    // Split a line after the given node.
+    function breakAfter(lineEndNode) {
+      // If there's nothing to the right, then we can skip ending the line
+      // here, and move root-wards since splitting just before an end-tag
+      // would require us to create a bunch of empty copies.
+      while (!lineEndNode.nextSibling) {
+        lineEndNode = lineEndNode.parentNode;
+        if (!lineEndNode) { return; }
+      }
   
-        if (isMethod || isConstructor) {
-          syntax += '(';
-          if (cleanItem.params) {
-            for (var i = 0; i < cleanItem.params.length; i++) {
-              var p = cleanItem.params[i];
-              if (p.optional) {
-                syntax += '[';
-              }
-              syntax += p.name;
-              if (p.optdefault) {
-                syntax += '=' + p.optdefault;
-              }
-              if (p.optional) {
-                syntax += ']';
-              }
-              if (i !== cleanItem.params.length - 1) {
-                syntax += ', ';
-              }
-            }
+      function breakLeftOf(limit, copy) {
+        // Clone shallowly if this node needs to be on both sides of the break.
+        var rightSide = copy ? limit.cloneNode(false) : limit;
+        var parent = limit.parentNode;
+        if (parent) {
+          // We clone the parent chain.
+          // This helps us resurrect important styling elements that cross lines.
+          // E.g. in <i>Foo<br>Bar</i>
+          // should be rewritten to <li><i>Foo</i></li><li><i>Bar</i></li>.
+          var parentClone = breakLeftOf(parent, 1);
+          // Move the clone and everything to the right of the original
+          // onto the cloned parent.
+          var next = limit.nextSibling;
+          parentClone.appendChild(rightSide);
+          for (var sibling = next; sibling; sibling = next) {
+            next = sibling.nextSibling;
+            parentClone.appendChild(sibling);
           }
-          syntax += ')';
         }
+        return rightSide;
+      }
   
-        return syntax;
-      },
-      // Return a list of valid syntaxes across all overloaded versions of
-      // this item.
-      //
-      // For reference, we ultimately want to replicate something like this:
-      //
-      // https://processing.org/reference/color_.html
-      getSyntaxes: function(isMethod, cleanItem) {
-        var overloads = cleanItem.overloads || [cleanItem];
-        return overloads.map(this.getSyntax.bind(this, isMethod));
-      },
-      render: function(item) {
-        if (item) {
-          var itemHtml = '';
-          var cleanItem = this.clean(item);
-          var isClass = item.hasOwnProperty('itemtype') ? 0 : 1;
-          var collectionName = isClass
-              ? 'Constructor'
-              : this.capitalizeFirst(cleanItem.itemtype),
-            isConstructor = cleanItem.is_constructor;
-          cleanItem.isMethod = collectionName === 'Method';
-  
-          var syntaxes = this.getSyntaxes(cleanItem.isMethod, cleanItem);
-  
-          // Set the item header (title)
-  
-          // Set item contents
-          if (isClass) {
-            var constructor = this.tpl({
-              item: cleanItem,
-              isClass: true,
-              isConstructor: isConstructor,
-              syntaxes: syntaxes
-            });
-            cleanItem.constructor = constructor;
+      var copiedListItem = breakLeftOf(lineEndNode.nextSibling, 0);
   
-            var contents = _.find(App.classes, function(c) {
-              return c.name === cleanItem.name;
-            });
-            cleanItem.things = contents.items;
+      // Walk the parent chain until we reach an unattached LI.
+      for (var parent;
+           // Check nodeType since IE invents document fragments.
+           (parent = copiedListItem.parentNode) && parent.nodeType === 1;) {
+        copiedListItem = parent;
+      }
+      // Put it on the list of lines for later processing.
+      listItems.push(copiedListItem);
+    }
   
-            itemHtml = this.classTpl(cleanItem);
-          } else {
-            cleanItem.constRefs =
-              item.module === 'Constants' && App.data.consts[item.name];
+    // Split lines while there are lines left to split.
+    for (var i = 0;  // Number of lines that have been split so far.
+         i < listItems.length;  // length updated by breakAfter calls.
+         ++i) {
+      walk(listItems[i]);
+    }
   
-            itemHtml = this.tpl({
-              item: cleanItem,
-              isClass: false,
-              isConstructor: false,
-              syntaxes: syntaxes
-            });
-          }
+    // Make sure numeric indices show correctly.
+    if (opt_startLineNum === (opt_startLineNum|0)) {
+      listItems[0].setAttribute('value', opt_startLineNum);
+    }
   
-          itemHtml += this.endTpl({ item: cleanItem, appVersion: appVersion });
+    var ol = document.createElement('ol');
+    ol.className = 'linenums';
+    var offset = Math.max(0, ((opt_startLineNum - 1 /* zero index */)) | 0) || 0;
+    for (var i = 0, n = listItems.length; i < n; ++i) {
+      li = listItems[i];
+      // Stick a class on the LIs so that stylesheets can
+      // color odd/even rows, or any other row pattern that
+      // is co-prime with 10.
+      li.className = 'L' + ((i + offset) % 10);
+      if (!li.firstChild) {
+        li.appendChild(document.createTextNode('\xA0'));
+      }
+      ol.appendChild(li);
+    }
   
-          // Insert the view in the dom
-          this.$el.html(itemHtml);
+    node.appendChild(ol);
+  }
+  /**
+   * Breaks {@code job.sourceCode} around style boundaries in
+   * {@code job.decorations} and modifies {@code job.sourceNode} in place.
+   * @param {Object} job like <pre>{
+   *    sourceCode: {string} source as plain text,
+   *    sourceNode: {HTMLElement} the element containing the source,
+   *    spans: {Array.<number|Node>} alternating span start indices into source
+   *       and the text node or element (e.g. {@code <BR>}) corresponding to that
+   *       span.
+   *    decorations: {Array.<number|string} an array of style classes preceded
+   *       by the position at which they start in job.sourceCode in order
+   * }</pre>
+   * @private
+   */
+  function recombineTagsAndDecorations(job) {
+    var isIE8OrEarlier = /\bMSIE\s(\d+)/.exec(navigator.userAgent);
+    isIE8OrEarlier = isIE8OrEarlier && +isIE8OrEarlier[1] <= 8;
+    var newlineRe = /\n/g;
+  
+    var source = job.sourceCode;
+    var sourceLength = source.length;
+    // Index into source after the last code-unit recombined.
+    var sourceIndex = 0;
+  
+    var spans = job.spans;
+    var nSpans = spans.length;
+    // Index into spans after the last span which ends at or before sourceIndex.
+    var spanIndex = 0;
+  
+    var decorations = job.decorations;
+    var nDecorations = decorations.length;
+    // Index into decorations after the last decoration which ends at or before
+    // sourceIndex.
+    var decorationIndex = 0;
+  
+    // Remove all zero-length decorations.
+    decorations[nDecorations] = sourceLength;
+    var decPos, i;
+    for (i = decPos = 0; i < nDecorations;) {
+      if (decorations[i] !== decorations[i + 2]) {
+        decorations[decPos++] = decorations[i++];
+        decorations[decPos++] = decorations[i++];
+      } else {
+        i += 2;
+      }
+    }
+    nDecorations = decPos;
+  
+    // Simplify decorations.
+    for (i = decPos = 0; i < nDecorations;) {
+      var startPos = decorations[i];
+      // Conflate all adjacent decorations that use the same style.
+      var startDec = decorations[i + 1];
+      var end = i + 2;
+      while (end + 2 <= nDecorations && decorations[end + 1] === startDec) {
+        end += 2;
+      }
+      decorations[decPos++] = startPos;
+      decorations[decPos++] = startDec;
+      i = end;
+    }
   
-          renderCode(cleanItem.name);
+    nDecorations = decorations.length = decPos;
   
-          // Set the document title based on the item name.
-          // If it is a method, add parentheses to the name
-          if (item.itemtype === 'method') {
-            App.pageView.appendToDocumentTitle(item.name + '()');
-          } else {
-            App.pageView.appendToDocumentTitle(item.name);
+    var sourceNode = job.sourceNode;
+    var oldDisplay;
+    if (sourceNode) {
+      oldDisplay = sourceNode.style.display;
+      sourceNode.style.display = 'none';
+    }
+    try {
+      var decoration = null;
+      while (spanIndex < nSpans) {
+        var spanStart = spans[spanIndex];
+        var spanEnd = spans[spanIndex + 2] || sourceLength;
+  
+        var decEnd = decorations[decorationIndex + 2] || sourceLength;
+  
+        var end = Math.min(spanEnd, decEnd);
+  
+        var textNode = spans[spanIndex + 1];
+        var styledText;
+        if (textNode.nodeType !== 1  // Don't muck with <BR>s or <LI>s
+            // Don't introduce spans around empty text nodes.
+            && (styledText = source.substring(sourceIndex, end))) {
+          // This may seem bizarre, and it is.  Emitting LF on IE causes the
+          // code to display with spaces instead of line breaks.
+          // Emitting Windows standard issue linebreaks (CRLF) causes a blank
+          // space to appear at the beginning of every line but the first.
+          // Emitting an old Mac OS 9 line separator makes everything spiffy.
+          if (isIE8OrEarlier) {
+            styledText = styledText.replace(newlineRe, '\r');
+          }
+          textNode.nodeValue = styledText;
+          var document = textNode.ownerDocument;
+          var span = document.createElement('span');
+          span.className = decorations[decorationIndex + 1];
+          var parentNode = textNode.parentNode;
+          parentNode.replaceChild(span, textNode);
+          span.appendChild(textNode);
+          if (sourceIndex < spanEnd) {  // Split off a text node.
+            spans[spanIndex + 1] = textNode
+                // TODO: Possibly optimize by using '' if there's no flicker.
+                = document.createTextNode(source.substring(end, spanEnd));
+            parentNode.insertBefore(textNode, span.nextSibling);
           }
-  
-          // Hook up alt-text for examples
-          setTimeout(function() {
-            var alts = $('.example-content')[0];
-            if (alts) {
-              alts = $(alts)
-                .data('alt')
-                .split('\n');
-  
-              var canvases = $('.cnv_div');
-              for (var j = 0; j < alts.length; j++) {
-                if (j < canvases.length) {
-                  $(canvases[j]).append(
-                    '<span class="sr-only">' + alts[j] + '</span>'
-                  );
-                }
-              }
-            }
-          }, 1000);
-          Prism.highlightAll();
         }
   
-        var renderEvent = new Event('reference-rendered');
-        window.dispatchEvent(renderEvent);
-  
-        return this;
-      },
-      /**
-       * Clean item properties: url encode properties containing paths.
-       * @param {object} item The item object.
-       * @returns {object} Returns the same item object with urlencoded paths.
-       */
-      clean: function(item) {
-        var cleanItem = item;
+        sourceIndex = end;
   
-        if (cleanItem.hasOwnProperty('file')) {
-          cleanItem.urlencodedfile = encodeURIComponent(item.file);
+        if (sourceIndex >= spanEnd) {
+          spanIndex += 2;
         }
-        return cleanItem;
-      },
-      /**
-       * Show a single item.
-       * @param {object} item Item object.
-       * @returns {object} This view.
-       */
-      show: function(item) {
-        if (item) {
-          this.render(item);
+        if (sourceIndex >= decEnd) {
+          decorationIndex += 2;
         }
-  
-        App.pageView.hideContentViews();
-  
-        this.$el.show();
-  
-        this.scrollTop();
-        $('#item').focus();
-        return this;
-      },
-      /**
-       * Show a message if no item is found.
-       * @returns {object} This view.
-       */
-      nothingFound: function() {
-        this.$el.html(
-          '<p><br><br>Ouch. I am unable to find any item that match the current query.</p>'
-        );
-        App.pageView.hideContentViews();
-        this.$el.show();
-  
-        return this;
-      },
-      /**
-       * Scroll to the top of the window with an animation.
-       */
-      scrollTop: function() {
-        // Hack for Chrome/Firefox scroll animation
-        // Chrome scrolls 'body', Firefox scrolls 'html'
-        var scroll = this.$body.scrollTop() > 0 || this.$html.scrollTop() > 0;
-        if (scroll) {
-          this.$scrollBody.animate({ scrollTop: 0 }, 600);
+      }
+    } finally {
+      if (sourceNode) {
+        sourceNode.style.display = oldDisplay;
+      }
+    }
+  }
+
+  /** Maps language-specific file extensions to handlers. */
+  var langHandlerRegistry = {};
+  /** Register a language handler for the given file extensions.
+    * @param {function (Object)} handler a function from source code to a list
+    *      of decorations.  Takes a single argument job which describes the
+    *      state of the computation.   The single parameter has the form
+    *      {@code {
+    *        sourceCode: {string} as plain text.
+    *        decorations: {Array.<number|string>} an array of style classes
+    *                     preceded by the position at which they start in
+    *                     job.sourceCode in order.
+    *                     The language handler should assigned this field.
+    *        basePos: {int} the position of source in the larger source chunk.
+    *                 All positions in the output decorations array are relative
+    *                 to the larger source chunk.
+    *      } }
+    * @param {Array.<string>} fileExtensions
+    */
+  function registerLangHandler(handler, fileExtensions) {
+    for (var i = fileExtensions.length; --i >= 0;) {
+      var ext = fileExtensions[i];
+      if (!langHandlerRegistry.hasOwnProperty(ext)) {
+        langHandlerRegistry[ext] = handler;
+      } else if (win['console']) {
+        console['warn']('cannot override language handler %s', ext);
+      }
+    }
+  }
+  function langHandlerForExtension(extension, source) {
+    if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
+      // Treat it as markup if the first non whitespace character is a < and
+      // the last non-whitespace character is a >.
+      extension = /^\s*</.test(source)
+          ? 'default-markup'
+          : 'default-code';
+    }
+    return langHandlerRegistry[extension];
+  }
+  registerLangHandler(decorateSource, ['default-code']);
+  registerLangHandler(
+      createSimpleLexer(
+          [],
+          [
+           [PR_PLAIN,       /^[^<?]+/],
+           [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
+           [PR_COMMENT,     /^<\!--[\s\S]*?(?:-\->|$)/],
+           // Unescaped content in an unknown language
+           ['lang-',        /^<\?([\s\S]+?)(?:\?>|$)/],
+           ['lang-',        /^<%([\s\S]+?)(?:%>|$)/],
+           [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
+           ['lang-',        /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
+           // Unescaped content in javascript.  (Or possibly vbscript).
+           ['lang-js',      /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
+           // Contains unescaped stylesheet content
+           ['lang-css',     /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
+           ['lang-in.tag',  /^(<\/?[a-z][^<>]*>)/i]
+          ]),
+      ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
+  registerLangHandler(
+      createSimpleLexer(
+          [
+           [PR_PLAIN,        /^[\s]+/, null, ' \t\r\n'],
+           [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
+           ],
+          [
+           [PR_TAG,          /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
+           [PR_ATTRIB_NAME,  /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
+           ['lang-uq.val',   /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
+           [PR_PUNCTUATION,  /^[=<>\/]+/],
+           ['lang-js',       /^on\w+\s*=\s*\"([^\"]+)\"/i],
+           ['lang-js',       /^on\w+\s*=\s*\'([^\']+)\'/i],
+           ['lang-js',       /^on\w+\s*=\s*([^\"\'>\s]+)/i],
+           ['lang-css',      /^style\s*=\s*\"([^\"]+)\"/i],
+           ['lang-css',      /^style\s*=\s*\'([^\']+)\'/i],
+           ['lang-css',      /^style\s*=\s*([^\"\'>\s]+)/i]
+           ]),
+      ['in.tag']);
+  registerLangHandler(
+      createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CPP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'types': C_TYPES
+        }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': 'null,true,false'
+        }), ['json']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CSHARP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'verbatimStrings': true,
+          'types': C_TYPES
+        }), ['cs']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JAVA_KEYWORDS,
+          'cStyleComments': true
+        }), ['java']);
+  registerLangHandler(sourceDecorator({
+          'keywords': SH_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true
+        }), ['bash', 'bsh', 'csh', 'sh']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PYTHON_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'tripleQuotedStrings': true
+        }), ['cv', 'py', 'python']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PERL_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': 2  // multiline regex literals
+        }), ['perl', 'pl', 'pm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': RUBY_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['rb', 'ruby']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JSCRIPT_KEYWORDS,
+          'cStyleComments': true,
+          'regexLiterals': true
+        }), ['javascript', 'js']);
+  registerLangHandler(sourceDecorator({
+          'keywords': COFFEE_KEYWORDS,
+          'hashComments': 3,  // ### style block comments
+          'cStyleComments': true,
+          'multilineStrings': true,
+          'tripleQuotedStrings': true,
+          'regexLiterals': true
+        }), ['coffee']);
+  registerLangHandler(sourceDecorator({
+          'keywords': RUST_KEYWORDS,
+          'cStyleComments': true,
+          'multilineStrings': true
+        }), ['rc', 'rs', 'rust']);
+  registerLangHandler(
+      createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
+
+  function applyDecorator(job) {
+    var opt_langExtension = job.langExtension;
+
+    try {
+      // Extract tags, and convert the source code to plain text.
+      var sourceAndSpans = extractSourceSpans(job.sourceNode, job.pre);
+      /** Plain text. @type {string} */
+      var source = sourceAndSpans.sourceCode;
+      job.sourceCode = source;
+      job.spans = sourceAndSpans.spans;
+      job.basePos = 0;
+
+      // Apply the appropriate language handler
+      langHandlerForExtension(opt_langExtension, source)(job);
+
+      // Integrate the decorations and tags back into the source code,
+      // modifying the sourceNode in place.
+      recombineTagsAndDecorations(job);
+    } catch (e) {
+      if (win['console']) {
+        console['log'](e && e['stack'] || e);
+      }
+    }
+  }
+
+  /**
+   * Pretty print a chunk of code.
+   * @param sourceCodeHtml {string} The HTML to pretty print.
+   * @param opt_langExtension {string} The language name to use.
+   *     Typically, a filename extension like 'cpp' or 'java'.
+   * @param opt_numberLines {number|boolean} True to number lines,
+   *     or the 1-indexed number of the first line in sourceCodeHtml.
+   */
+  function $prettyPrintOne(sourceCodeHtml, opt_langExtension, opt_numberLines) {
+    var container = document.createElement('div');
+    // This could cause images to load and onload listeners to fire.
+    // E.g. <img onerror="alert(1337)" src="nosuchimage.png">.
+    // We assume that the inner HTML is from a trusted source.
+    // The pre-tag is required for IE8 which strips newlines from innerHTML
+    // when it is injected into a <pre> tag.
+    // http://stackoverflow.com/questions/451486/pre-tag-loses-line-breaks-when-setting-innerhtml-in-ie
+    // http://stackoverflow.com/questions/195363/inserting-a-newline-into-a-pre-tag-ie-javascript
+    container.innerHTML = '<pre>' + sourceCodeHtml + '</pre>';
+    container = container.firstChild;
+    if (opt_numberLines) {
+      numberLines(container, opt_numberLines, true);
+    }
+
+    var job = {
+      langExtension: opt_langExtension,
+      numberLines: opt_numberLines,
+      sourceNode: container,
+      pre: 1
+    };
+    applyDecorator(job);
+    return container.innerHTML;
+  }
+
+   /**
+    * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
+    * {@code class=prettyprint} and prettify them.
+    *
+    * @param {Function} opt_whenDone called when prettifying is done.
+    * @param {HTMLElement|HTMLDocument} opt_root an element or document
+    *   containing all the elements to pretty print.
+    *   Defaults to {@code document.body}.
+    */
+  function $prettyPrint(opt_whenDone, opt_root) {
+    var root = opt_root || document.body;
+    var doc = root.ownerDocument || document;
+    function byTagName(tn) { return root.getElementsByTagName(tn); }
+    // fetch a list of nodes to rewrite
+    var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
+    var elements = [];
+    for (var i = 0; i < codeSegments.length; ++i) {
+      for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
+        elements.push(codeSegments[i][j]);
+      }
+    }
+    codeSegments = null;
+
+    var clock = Date;
+    if (!clock['now']) {
+      clock = { 'now': function () { return +(new Date); } };
+    }
+
+    // The loop is broken into a series of continuations to make sure that we
+    // don't make the browser unresponsive when rewriting a large page.
+    var k = 0;
+    var prettyPrintingJob;
+
+    var langExtensionRe = /\blang(?:uage)?-([\w.]+)(?!\S)/;
+    var prettyPrintRe = /\bprettyprint\b/;
+    var prettyPrintedRe = /\bprettyprinted\b/;
+    var preformattedTagNameRe = /pre|xmp/i;
+    var codeRe = /^code$/i;
+    var preCodeXmpRe = /^(?:pre|code|xmp)$/i;
+    var EMPTY = {};
+
+    function doWork() {
+      var endTime = (win['PR_SHOULD_USE_CONTINUATION'] ?
+                     clock['now']() + 250 /* ms */ :
+                     Infinity);
+      for (; k < elements.length && clock['now']() < endTime; k++) {
+        var cs = elements[k];
+
+        // Look for a preceding comment like
+        // <?prettify lang="..." linenums="..."?>
+        var attrs = EMPTY;
+        {
+          for (var preceder = cs; (preceder = preceder.previousSibling);) {
+            var nt = preceder.nodeType;
+            // <?foo?> is parsed by HTML 5 to a comment node (8)
+            // like <!--?foo?-->, but in XML is a processing instruction
+            var value = (nt === 7 || nt === 8) && preceder.nodeValue;
+            if (value
+                ? !/^\??prettify\b/.test(value)
+                : (nt !== 3 || /\S/.test(preceder.nodeValue))) {
+              // Skip over white-space text nodes but not others.
+              break;
+            }
+            if (value) {
+              attrs = {};
+              value.replace(
+                  /\b(\w+)=([\w:.%+-]+)/g,
+                function (_, name, value) { attrs[name] = value; });
+              break;
+            }
+          }
         }
-      },
-      /**
-       * Helper method to capitalize the first letter of a string
-       * @param {string} str
-       * @returns {string} Returns the string.
-       */
-      capitalizeFirst: function(str) {
-        return str.substr(0, 1).toUpperCase() + str.substr(1);
+
+        var className = cs.className;
+        if ((attrs !== EMPTY || prettyPrintRe.test(className))
+            // Don't redo this if we've already done it.
+            // This allows recalling pretty print to just prettyprint elements
+            // that have been added to the page since last call.
+            && !prettyPrintedRe.test(className)) {
+
+          // make sure this is not nested in an already prettified element
+          var nested = false;
+          for (var p = cs.parentNode; p; p = p.parentNode) {
+            var tn = p.tagName;
+            if (preCodeXmpRe.test(tn)
+                && p.className && prettyPrintRe.test(p.className)) {
+              nested = true;
+              break;
+            }
+          }
+          if (!nested) {
+            // Mark done.  If we fail to prettyprint for whatever reason,
+            // we shouldn't try again.
+            cs.className += ' prettyprinted';
+
+            // If the classes includes a language extensions, use it.
+            // Language extensions can be specified like
+            //     <pre class="prettyprint lang-cpp">
+            // the language extension "cpp" is used to find a language handler
+            // as passed to PR.registerLangHandler.
+            // HTML5 recommends that a language be specified using "language-"
+            // as the prefix instead.  Google Code Prettify supports both.
+            // http://dev.w3.org/html5/spec-author-view/the-code-element.html
+            var langExtension = attrs['lang'];
+            if (!langExtension) {
+              langExtension = className.match(langExtensionRe);
+              // Support <pre class="prettyprint"><code class="language-c">
+              var wrapper;
+              if (!langExtension && (wrapper = childContentWrapper(cs))
+                  && codeRe.test(wrapper.tagName)) {
+                langExtension = wrapper.className.match(langExtensionRe);
+              }
+
+              if (langExtension) { langExtension = langExtension[1]; }
+            }
+
+            var preformatted;
+            if (preformattedTagNameRe.test(cs.tagName)) {
+              preformatted = 1;
+            } else {
+              var currentStyle = cs['currentStyle'];
+              var defaultView = doc.defaultView;
+              var whitespace = (
+                  currentStyle
+                  ? currentStyle['whiteSpace']
+                  : (defaultView
+                     && defaultView.getComputedStyle)
+                  ? defaultView.getComputedStyle(cs, null)
+                  .getPropertyValue('white-space')
+                  : 0);
+              preformatted = whitespace
+                  && 'pre' === whitespace.substring(0, 3);
+            }
+
+            // Look for a class like linenums or linenums:<n> where <n> is the
+            // 1-indexed number of the first line.
+            var lineNums = attrs['linenums'];
+            if (!(lineNums = lineNums === 'true' || +lineNums)) {
+              lineNums = className.match(/\blinenums\b(?::(\d+))?/);
+              lineNums =
+                lineNums
+                ? lineNums[1] && lineNums[1].length
+                  ? +lineNums[1] : true
+                : false;
+            }
+            if (lineNums) { numberLines(cs, lineNums, preformatted); }
+
+            // do the pretty printing
+            prettyPrintingJob = {
+              langExtension: langExtension,
+              sourceNode: cs,
+              numberLines: lineNums,
+              pre: preformatted
+            };
+            applyDecorator(prettyPrintingJob);
+          }
+        }
+      }
+      if (k < elements.length) {
+        // finish up in a continuation
+        setTimeout(doWork, 250);
+      } else if ('function' === typeof opt_whenDone) {
+        opt_whenDone();
       }
+    }
+
+    doWork();
+  }
+
+  /**
+   * Contains functions for creating and registering new language handlers.
+   * @type {Object}
+   */
+  var PR = win['PR'] = {
+        'createSimpleLexer': createSimpleLexer,
+        'registerLangHandler': registerLangHandler,
+        'sourceDecorator': sourceDecorator,
+        'PR_ATTRIB_NAME': PR_ATTRIB_NAME,
+        'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE,
+        'PR_COMMENT': PR_COMMENT,
+        'PR_DECLARATION': PR_DECLARATION,
+        'PR_KEYWORD': PR_KEYWORD,
+        'PR_LITERAL': PR_LITERAL,
+        'PR_NOCODE': PR_NOCODE,
+        'PR_PLAIN': PR_PLAIN,
+        'PR_PUNCTUATION': PR_PUNCTUATION,
+        'PR_SOURCE': PR_SOURCE,
+        'PR_STRING': PR_STRING,
+        'PR_TAG': PR_TAG,
+        'PR_TYPE': PR_TYPE,
+        'prettyPrintOne':
+           IN_GLOBAL_SCOPE
+             ? (win['prettyPrintOne'] = $prettyPrintOne)
+             : (prettyPrintOne = $prettyPrintOne),
+        'prettyPrint': prettyPrint =
+           IN_GLOBAL_SCOPE
+             ? (win['prettyPrint'] = $prettyPrint)
+             : (prettyPrint = $prettyPrint)
+      };
+
+  // Make PR available via the Asynchronous Module Definition (AMD) API.
+  // Per https://github.com/amdjs/amdjs-api/wiki/AMD:
+  // The Asynchronous Module Definition (AMD) API specifies a
+  // mechanism for defining modules such that the module and its
+  // dependencies can be asynchronously loaded.
+  // ...
+  // To allow a clear indicator that a global define function (as
+  // needed for script src browser loading) conforms to the AMD API,
+  // any global define function SHOULD have a property called "amd"
+  // whose value is an object. This helps avoid conflict with any
+  // other existing JavaScript code that could have defined a define()
+  // function that does not conform to the AMD API.
+  if (typeof define === "function" && define['amd']) {
+    define("google-code-prettify", [], function () {
+      return PR; 
     });
-  
-    return itemView;
-  });
-  
-  
-  define('text!tpl/menu.html',[],function () { return '<div>\n  <br>\n  <span id="reference-description1">Can\'t find what you\'re looking for? You may want to check out</span>\n  <a href="#/libraries/p5.sound">p5.sound</a>.<br><a href=\'https://p5js.org/offline-reference/p5-reference.zip\' target=_blank><span id="reference-description3">You can also download an offline version of the reference.</span></a>\n</div>\n\n<div id=\'collection-list-categories\'>\n<h2 class="sr-only" id="categories">Categories</h2>\n<% var i=0; %>\n<% var max=Math.floor(groups.length/4); %>\n<% var rem=groups.length%4; %>\n\n<% _.each(groups, function(group){ %>\n  <% var m = rem > 0 ? 1 : 0 %>\n  <% if (i === 0) { %>\n    <ul aria-labelledby="categories">\n    <% } %>\n    <li><a href="#group-<%=group%>"><%=group%></a></li>\n    <% if (i === (max+m-1)) { %>\n    </ul>\n  \t<% rem-- %>\n  \t<% i=0 %>\n  <% } else { %>\n  \t<% i++ %>\n  <% } %>\n<% }); %>\n</div>\n';});
-  
-  define('menuView',[
-    'App',
-    'text!tpl/menu.html'
-  ], function(App, menuTpl) {
-  
-    var menuView = Backbone.View.extend({
-      el: '#collection-list-nav',
-      /**
-       * Init.
-       * @returns {object} This view.
-       */
-      init: function() {
-        this.menuTpl = _.template(menuTpl);
-        return this;
-      },
-      /**
-       * Render.
-       * @returns {object} This view.
-       */
-      render: function() {
-  
-        var groups = [];
-        _.each(App.modules, function (item, i) {
-          if (!item.is_submodule) {
-            if (!item.file || item.file.indexOf('addons') === -1) { //addons don't get displayed on main page
-              groups.push(item.name);
+  }
+})();
+
+define("prettify", function(){});
+
+define('itemView',[
+  'App',
+  // Templates
+  'text!tpl/item.html',
+  'text!tpl/class.html',
+  'text!tpl/itemEnd.html',
+  // Tools
+  'prettify'
+], function(App, itemTpl, classTpl, endTpl) {
+  'use strict';
+
+  var appVersion = App.project.version || 'master';
+
+  var itemView = Backbone.View.extend({
+    el: '#item',
+    init: function() {
+      this.$html = $('html');
+      this.$body = $('body');
+      this.$scrollBody = $('html, body'); // hack for Chrome/Firefox scroll
+
+      this.tpl = _.template(itemTpl);
+      this.classTpl = _.template(classTpl);
+      this.endTpl = _.template(endTpl);
+
+      return this;
+    },
+    getSyntax: function(isMethod, cleanItem) {
+      var isConstructor = cleanItem.is_constructor;
+      var syntax = '';
+      if (isConstructor) {
+        syntax += 'new ';
+      } else if (cleanItem.static && cleanItem.class) {
+        syntax += cleanItem.class + '.';
+      }
+      syntax += cleanItem.name;
+
+      if (isMethod || isConstructor) {
+        syntax += '(';
+        if (cleanItem.params) {
+          for (var i = 0; i < cleanItem.params.length; i++) {
+            var p = cleanItem.params[i];
+            if (p.optional) {
+              syntax += '[';
+            }
+            syntax += p.name;
+            if (p.optdefault) {
+              syntax += '=' + p.optdefault;
+            }
+            if (p.optional) {
+              syntax += ']';
+            }
+            if (i !== cleanItem.params.length - 1) {
+              syntax += ', ';
             }
           }
-          //}
-        });
-  
-        // Sort groups by name A-Z
-        groups.sort();
-  
-        var menuHtml = this.menuTpl({
-          'groups': groups
-        });
-  
-        // Render the view
-        this.$el.html(menuHtml);
-      },
-  
-      hide: function() {
-        this.$el.hide();
-      },
-  
-      show: function() {
-        this.$el.show();
-      },
-  
-      /**
-       * Update the menu.
-       * @param {string} el The name of the current route.
-       */
-      update: function(menuItem) {
-        //console.log(menuItem);
-        // this.$menuItems.removeClass('active');
-        // this.$menuItems.find('a[href=#'+menuItem+']').parent().addClass('active');
-  
+        }
+        syntax += ')';
       }
-    });
-  
-    return menuView;
-  
-  });
-  
-  
-  define('text!tpl/library.html',[],function () { return '<h3><%= module.name %> library</h3>\n\n<p><%= module.description %></p>\n\n<div id="library-page" class="reference-group clearfix">  \n\n<% var t = 0; col = 0; %>\n\n<% _.each(groups, function(group){ %>\n  <% if (t == 0) { %> \n    <div class="column_<%=col%>">\n  <% } %>\n  <% if (group.name !== module.name && group.name !== \'p5\') { %>\n    <% if (group.hash) { %> <a href="<%=group.hash%>" <% if (group.module !== module.name) { %>class="core"<% } %>><% } %>  \n    <h2 class="group-name <% if (t == 0) { %> first<%}%>"><%=group.name%></h2>\n    <% if (group.hash) { %> </a><br> <% } %>\n  <% } %>\n  <% _.each(group.items.filter(function(item) {return item.access !== \'private\'}), function(item) { %>\n    <a href="<%=item.hash%>" <% if (item.module !== module.name) { %>class="core"<% } %>><%=item.name%><% if (item.itemtype === \'method\') { %>()<%}%></a><br>\n    <% t++; %>\n  <% }); %>\n  <% if (t >= Math.floor(totalItems/4)) { col++; t = 0; %>\n    </div>\n  <% } %>\n<% }); %>\n</div>\n';});
-  
-  define(
-    'libraryView',[
-      'App',
-      // Templates
-      'text!tpl/library.html'
-    ],
-    function(App, libraryTpl) {
-      var libraryView = Backbone.View.extend({
-        el: '#list',
-        events: {},
-        /**
-         * Init.
-         */
-        init: function() {
-          this.libraryTpl = _.template(libraryTpl);
-  
-          return this;
-        },
-        /**
-         * Render the list.
-         */
-        render: function(m, listCollection) {
-          if (m && listCollection) {
-            var self = this;
-  
-            // Render items and group them by module
-            // module === group
-            this.groups = {};
-            _.each(m.items, function(item, i) {
-              var module = item.module || '_';
-              var group;
-              // Override default group with a selected category
-              // TODO: Overwriting with the first category might not be the best choice
-              // We might also want to have links for categories
-              if (item.category && item.category[0]) {
-                group = item.category[0];
-                // Populate item.hash
-                App.router.getHash(item);
-  
-                // Create a group list without link hash
-                if (!self.groups[group]) {
-                  self.groups[group] = {
-                    name: group.replace('_', '&nbsp;'),
-                    module: module,
-                    hash: undefined,
-                    items: []
-                  };
-                }
-              } else {
-                group = item.class || '_';
-                var hash = App.router.getHash(item);
-  
-                var ind = hash.lastIndexOf('/');
-                hash = hash.substring(0, ind);
-  
-                // Create a group list
-                if (!self.groups[group]) {
-                  self.groups[group] = {
-                    name: group.replace('_', '&nbsp;'),
-                    module: module,
-                    hash: hash,
-                    items: []
-                  };
-                }
+
+      return syntax;
+    },
+    // Return a list of valid syntaxes across all overloaded versions of
+    // this item.
+    //
+    // For reference, we ultimately want to replicate something like this:
+    //
+    // https://processing.org/reference/color_.html
+    getSyntaxes: function(isMethod, cleanItem) {
+      var overloads = cleanItem.overloads || [cleanItem];
+      return overloads.map(this.getSyntax.bind(this, isMethod));
+    },
+    render: function(item) {
+      if (item) {
+        var itemHtml = '';
+        var cleanItem = this.clean(item);
+        var isClass = item.hasOwnProperty('itemtype') ? 0 : 1;
+        var collectionName = isClass
+            ? 'Constructor'
+            : this.capitalizeFirst(cleanItem.itemtype),
+          isConstructor = cleanItem.is_constructor;
+        cleanItem.isMethod = collectionName === 'Method';
+
+        var syntaxes = this.getSyntaxes(cleanItem.isMethod, cleanItem);
+
+        // Set the item header (title)
+
+        // Set item contents
+        if (isClass) {
+          var constructor = this.tpl({
+            item: cleanItem,
+            isClass: true,
+            isConstructor: isConstructor,
+            syntaxes: syntaxes
+          });
+          cleanItem.constructor = constructor;
+
+          var contents = _.find(App.classes, function(c) {
+            return c.name === cleanItem.name;
+          });
+          cleanItem.things = contents.items;
+
+          itemHtml = this.classTpl(cleanItem);
+        } else {
+          cleanItem.constRefs =
+            item.module === 'Constants' && App.data.consts[item.name];
+
+          itemHtml = this.tpl({
+            item: cleanItem,
+            isClass: false,
+            isConstructor: false,
+            syntaxes: syntaxes
+          });
+        }
+
+        itemHtml += this.endTpl({ item: cleanItem, appVersion: appVersion });
+
+        // Insert the view in the dom
+        this.$el.html(itemHtml);
+
+        renderCode(cleanItem.name);
+
+        // Set the document title based on the item name.
+        // If it is a method, add parentheses to the name
+        if (item.itemtype === 'method') {
+          App.pageView.appendToDocumentTitle(item.name + '()');
+        } else {
+          App.pageView.appendToDocumentTitle(item.name);
+        }
+
+        // Hook up alt-text for examples
+        setTimeout(function() {
+          var alts = $('.example-content')[0];
+          if (alts) {
+            alts = $(alts)
+              .data('alt')
+              .split('\n');
+
+            var canvases = $('.cnv_div');
+            for (var j = 0; j < alts.length; j++) {
+              if (j < canvases.length) {
+                $(canvases[j]).append(
+                  '<span class="sr-only">' + alts[j] + '</span>'
+                );
               }
-  
-              self.groups[group].items.push(item);
-            });
-  
-            // Sort groups by name A-Z
-            self.groups = _.sortBy(self.groups, this.sortByName);
-  
-            // Put the <li> items html into the list <ul>
-            var libraryHtml = self.libraryTpl({
-              title: self.capitalizeFirst(listCollection),
-              module: m.module,
-              totalItems: m.items.length,
-              groups: self.groups
-            });
-  
-            // Render the view
-            this.$el.html(libraryHtml);
+            }
           }
-  
-          return this;
-        },
-        /**
-         * Show a list of items.
-         * @param {array} items Array of item objects.
-         * @returns {object} This view.
-         */
-        show: function(listGroup) {
-          if (App[listGroup]) {
-            this.render(App[listGroup], listGroup);
+        }, 1000);
+        Prism.highlightAll();
+      }
+
+      var renderEvent = new Event('reference-rendered');
+      window.dispatchEvent(renderEvent);
+
+      return this;
+    },
+    /**
+     * Clean item properties: url encode properties containing paths.
+     * @param {object} item The item object.
+     * @returns {object} Returns the same item object with urlencoded paths.
+     */
+    clean: function(item) {
+      var cleanItem = item;
+
+      if (cleanItem.hasOwnProperty('file')) {
+        cleanItem.urlencodedfile = encodeURIComponent(item.file);
+      }
+      return cleanItem;
+    },
+    /**
+     * Show a single item.
+     * @param {object} item Item object.
+     * @returns {object} This view.
+     */
+    show: function(item) {
+      if (item) {
+        this.render(item);
+      }
+
+      App.pageView.hideContentViews();
+
+      this.$el.show();
+
+      this.scrollTop();
+      $('#item').focus();
+      return this;
+    },
+    /**
+     * Show a message if no item is found.
+     * @returns {object} This view.
+     */
+    nothingFound: function() {
+      this.$el.html(
+        '<p><br><br>Ouch. I am unable to find any item that match the current query.</p>'
+      );
+      App.pageView.hideContentViews();
+      this.$el.show();
+
+      return this;
+    },
+    /**
+     * Scroll to the top of the window with an animation.
+     */
+    scrollTop: function() {
+      // Hack for Chrome/Firefox scroll animation
+      // Chrome scrolls 'body', Firefox scrolls 'html'
+      var scroll = this.$body.scrollTop() > 0 || this.$html.scrollTop() > 0;
+      if (scroll) {
+        this.$scrollBody.animate({ scrollTop: 0 }, 600);
+      }
+    },
+    /**
+     * Helper method to capitalize the first letter of a string
+     * @param {string} str
+     * @returns {string} Returns the string.
+     */
+    capitalizeFirst: function(str) {
+      return str.substr(0, 1).toUpperCase() + str.substr(1);
+    }
+  });
+
+  return itemView;
+});
+
+
+define('text!tpl/menu.html',[],function () { return '<div>\n  <br>\n  <span id="reference-description1">Can\'t find what you\'re looking for? You may want to check out</span>\n  <a href="#/libraries/p5.sound">p5.sound</a>.<br><a href=\'https://p5js.org/offline-reference/p5-reference.zip\' target=_blank><span id="reference-description3">You can also download an offline version of the reference.</span></a>\n</div>\n\n<div id=\'collection-list-categories\'>\n<h2 class="sr-only" id="categories">Categories</h2>\n<% var i=0; %>\n<% var max=Math.floor(groups.length/4); %>\n<% var rem=groups.length%4; %>\n\n<% _.each(groups, function(group){ %>\n  <% var m = rem > 0 ? 1 : 0 %>\n  <% if (i === 0) { %>\n    <ul aria-labelledby="categories">\n    <% } %>\n    <li><a href="#group-<%=group%>"><%=group%></a></li>\n    <% if (i === (max+m-1)) { %>\n    </ul>\n  \t<% rem-- %>\n  \t<% i=0 %>\n  <% } else { %>\n  \t<% i++ %>\n  <% } %>\n<% }); %>\n</div>\n';});
+
+define('menuView',[
+  'App',
+  'text!tpl/menu.html'
+], function(App, menuTpl) {
+
+  var menuView = Backbone.View.extend({
+    el: '#collection-list-nav',
+    /**
+     * Init.
+     * @returns {object} This view.
+     */
+    init: function() {
+      this.menuTpl = _.template(menuTpl);
+      return this;
+    },
+    /**
+     * Render.
+     * @returns {object} This view.
+     */
+    render: function() {
+
+      var groups = [];
+      _.each(App.modules, function (item, i) {
+        if (!item.is_submodule) {
+          if (!item.file || item.file.indexOf('addons') === -1) { //addons don't get displayed on main page
+            groups.push(item.name);
           }
-          App.pageView.hideContentViews();
-  
-          this.$el.show();
-  
-          return this;
-        },
-        /**
-         * Helper method to capitalize the first letter of a string
-         * @param {string} str
-         * @returns {string} Returns the string.
-         */
-        capitalizeFirst: function(str) {
-          return str.substr(0, 1).toUpperCase() + str.substr(1);
-        },
-        /**
-         * Sort function (for the Array.prototype.sort() native method): from A to Z.
-         * @param {string} a
-         * @param {string} b
-         * @returns {Array} Returns an array with elements sorted from A to Z.
-         */
-        sortAZ: function(a, b) {
-          return a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase() ? 1 : -1;
-        },
-  
-        sortByName: function(a, b) {
-          if (a.name === 'p5') return -1;
-          else return 0;
         }
+        //}
       });
-  
-      return libraryView;
+
+      // Sort groups by name A-Z
+      groups.sort();
+
+      var menuHtml = this.menuTpl({
+        'groups': groups
+      });
+
+      // Render the view
+      this.$el.html(menuHtml);
+    },
+
+    hide: function() {
+      this.$el.hide();
+    },
+
+    show: function() {
+      this.$el.show();
+    },
+
+    /**
+     * Update the menu.
+     * @param {string} el The name of the current route.
+     */
+    update: function(menuItem) {
+      //console.log(menuItem);
+      // this.$menuItems.removeClass('active');
+      // this.$menuItems.find('a[href=#'+menuItem+']').parent().addClass('active');
+
     }
-  );
-  
-  define('pageView',[
+  });
+
+  return menuView;
+
+});
+
+
+define('text!tpl/library.html',[],function () { return '<h3><%= module.name %> library</h3>\n\n<p><%= module.description %></p>\n\n<div id="library-page" class="reference-group clearfix">  \n\n<% var t = 0; col = 0; %>\n\n<% _.each(groups, function(group){ %>\n  <% if (t == 0) { %> \n    <div class="column_<%=col%>">\n  <% } %>\n  <% if (group.name !== module.name && group.name !== \'p5\') { %>\n    <% if (group.hash) { %> <a href="<%=group.hash%>" <% if (group.module !== module.name) { %>class="core"<% } %>><% } %>  \n    <h2 class="group-name <% if (t == 0) { %> first<%}%>"><%=group.name%></h2>\n    <% if (group.hash) { %> </a><br> <% } %>\n  <% } %>\n  <% _.each(group.items.filter(function(item) {return item.access !== \'private\'}), function(item) { %>\n    <a href="<%=item.hash%>" <% if (item.module !== module.name) { %>class="core"<% } %>><%=item.name%><% if (item.itemtype === \'method\') { %>()<%}%></a><br>\n    <% t++; %>\n  <% }); %>\n  <% if (t >= Math.floor(totalItems/4)) { col++; t = 0; %>\n    </div>\n  <% } %>\n<% }); %>\n</div>\n';});
+
+define(
+  'libraryView',[
     'App',
-  
-    // Views
-    'searchView',
-    'listView',
-    'itemView',
-    'menuView',
-    'libraryView'
-  ], function(App, searchView, listView, itemView, menuView, libraryView) {
-  
-    // Store the original title parts so we can substitue different endings.
-    var _originalDocumentTitle = window.document.title;
-  
-    var pageView = Backbone.View.extend({
-      el: 'body',
+    // Templates
+    'text!tpl/library.html'
+  ],
+  function(App, libraryTpl) {
+    var libraryView = Backbone.View.extend({
+      el: '#list',
+      events: {},
       /**
        * Init.
        */
       init: function() {
-        App.$container = $('#container');
-        App.contentViews = [];
-  
+        this.libraryTpl = _.template(libraryTpl);
+
         return this;
       },
       /**
-       * Render.
+       * Render the list.
        */
-      render: function() {
-  
-        // Menu view
-        if (!App.menuView) {
-          App.menuView = new menuView();
-          App.menuView.init().render();
-        }
-  
-        // Item view
-        if (!App.itemView) {
-          App.itemView = new itemView();
-          App.itemView.init().render();
-          // Add the item view to the views array
-          App.contentViews.push(App.itemView);
-        }
-  
-        // List view
-        if (!App.listView) {
-          App.listView = new listView();
-          App.listView.init().render();
-          // Add the list view to the views array
-          App.contentViews.push(App.listView);
-        }
-  
-        // Library view
-        if (!App.libraryView) {
-          App.libraryView = new libraryView();
-          App.libraryView.init().render();
-          // Add the list view to the views array
-          App.contentViews.push(App.libraryView);
-        }
-  
-        // Search
-        if (!App.searchView) {
-          App.searchView = new searchView();
-          App.searchView.init().render();
+      render: function(m, listCollection) {
+        if (m && listCollection) {
+          var self = this;
+
+          // Render items and group them by module
+          // module === group
+          this.groups = {};
+          _.each(m.items, function(item, i) {
+            var module = item.module || '_';
+            var group;
+            // Override default group with a selected category
+            // TODO: Overwriting with the first category might not be the best choice
+            // We might also want to have links for categories
+            if (item.category && item.category[0]) {
+              group = item.category[0];
+              // Populate item.hash
+              App.router.getHash(item);
+
+              // Create a group list without link hash
+              if (!self.groups[group]) {
+                self.groups[group] = {
+                  name: group.replace('_', '&nbsp;'),
+                  module: module,
+                  hash: undefined,
+                  items: []
+                };
+              }
+            } else {
+              group = item.class || '_';
+              var hash = App.router.getHash(item);
+
+              var ind = hash.lastIndexOf('/');
+              hash = hash.substring(0, ind);
+
+              // Create a group list
+              if (!self.groups[group]) {
+                self.groups[group] = {
+                  name: group.replace('_', '&nbsp;'),
+                  module: module,
+                  hash: hash,
+                  items: []
+                };
+              }
+            }
+
+            self.groups[group].items.push(item);
+          });
+
+          // Sort groups by name A-Z
+          self.groups = _.sortBy(self.groups, this.sortByName);
+
+          // Put the <li> items html into the list <ul>
+          var libraryHtml = self.libraryTpl({
+            title: self.capitalizeFirst(listCollection),
+            module: m.module,
+            totalItems: m.items.length,
+            groups: self.groups
+          });
+
+          // Render the view
+          this.$el.html(libraryHtml);
         }
+
         return this;
       },
       /**
-       * Hide item and list views.
+       * Show a list of items.
+       * @param {array} items Array of item objects.
        * @returns {object} This view.
        */
-      hideContentViews: function() {
-        _.each(App.contentViews, function(view, i) {
-          view.$el.hide();
-        });
-  
+      show: function(listGroup) {
+        if (App[listGroup]) {
+          this.render(App[listGroup], listGroup);
+        }
+        App.pageView.hideContentViews();
+
+        this.$el.show();
+
         return this;
       },
       /**
-       * Append the supplied name to the first part of original document title.
-       * If no name is supplied, the title will reset to the original one.
+       * Helper method to capitalize the first letter of a string
+       * @param {string} str
+       * @returns {string} Returns the string.
        */
-      appendToDocumentTitle: function(name){
-        if(name){
-          let firstTitlePart = _originalDocumentTitle.split(" | ")[0];
-          window.document.title = [firstTitlePart, name].join(" | ");
-        } else {
-          window.document.title = _originalDocumentTitle;
-        }
-      }    
-    });
-  
-    return pageView;
-  
-  });
-  
-  define('router',[
-    'App'
-  ], function(App) {
-  
-    'use strict'; //
-  
-    var Router = Backbone.Router.extend({
-  
-      routes: {
-        '': 'list',
-        'p5': 'list',
-        'p5/': 'list',
-        'classes': 'list',
-        'search': 'search',
-        'libraries/:lib': 'library',
-        ':searchClass(/:searchItem)': 'get'
+      capitalizeFirst: function(str) {
+        return str.substr(0, 1).toUpperCase() + str.substr(1);
       },
       /**
-       * Whether the json API data was loaded.
+       * Sort function (for the Array.prototype.sort() native method): from A to Z.
+       * @param {string} a
+       * @param {string} b
+       * @returns {Array} Returns an array with elements sorted from A to Z.
        */
-      _initialized: false,
-      /**
-       * Initialize the app: load json API data and create searchable arrays.
-       */
-      init: function(callback) {
-        var self = this;
-        require(['pageView'], function(pageView) {
-  
-          // If already initialized, move away from here!
-          if (self._initialized) {
-            if (callback)
-              callback();
-            return;
-          }
-  
-          // Update initialization state: must be done now to avoid recursive mess
-          self._initialized = true;
-  
-          // Render views
-          if (!App.pageView) {
-            App.pageView = new pageView();
-            App.pageView.init().render();
-          }
-  
-          // If a callback is set (a route has already been called), run it
-          // otherwise, show the default list
+      sortAZ: function(a, b) {
+        return a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase() ? 1 : -1;
+      },
+
+      sortByName: function(a, b) {
+        if (a.name === 'p5') return -1;
+        else return 0;
+      }
+    });
+
+    return libraryView;
+  }
+);
+
+define('pageView',[
+  'App',
+
+  // Views
+  'searchView',
+  'listView',
+  'itemView',
+  'menuView',
+  'libraryView'
+], function(App, searchView, listView, itemView, menuView, libraryView) {
+
+  // Store the original title parts so we can substitue different endings.
+  var _originalDocumentTitle = window.document.title;
+
+  var pageView = Backbone.View.extend({
+    el: 'body',
+    /**
+     * Init.
+     */
+    init: function() {
+      App.$container = $('#container');
+      App.contentViews = [];
+
+      return this;
+    },
+    /**
+     * Render.
+     */
+    render: function() {
+
+      // Menu view
+      if (!App.menuView) {
+        App.menuView = new menuView();
+        App.menuView.init().render();
+      }
+
+      // Item view
+      if (!App.itemView) {
+        App.itemView = new itemView();
+        App.itemView.init().render();
+        // Add the item view to the views array
+        App.contentViews.push(App.itemView);
+      }
+
+      // List view
+      if (!App.listView) {
+        App.listView = new listView();
+        App.listView.init().render();
+        // Add the list view to the views array
+        App.contentViews.push(App.listView);
+      }
+
+      // Library view
+      if (!App.libraryView) {
+        App.libraryView = new libraryView();
+        App.libraryView.init().render();
+        // Add the list view to the views array
+        App.contentViews.push(App.libraryView);
+      }
+
+      // Search
+      if (!App.searchView) {
+        App.searchView = new searchView();
+        App.searchView.init().render();
+      }
+      return this;
+    },
+    /**
+     * Hide item and list views.
+     * @returns {object} This view.
+     */
+    hideContentViews: function() {
+      _.each(App.contentViews, function(view, i) {
+        view.$el.hide();
+      });
+
+      return this;
+    },
+    /**
+     * Append the supplied name to the first part of original document title.
+     * If no name is supplied, the title will reset to the original one.
+     */
+    appendToDocumentTitle: function(name){
+      if(name){
+        let firstTitlePart = _originalDocumentTitle.split(" | ")[0];
+        window.document.title = [firstTitlePart, name].join(" | ");
+      } else {
+        window.document.title = _originalDocumentTitle;
+      }
+    }    
+  });
+
+  return pageView;
+
+});
+
+define('router',[
+  'App'
+], function(App) {
+
+  'use strict'; //
+
+  var Router = Backbone.Router.extend({
+
+    routes: {
+      '': 'list',
+      'p5': 'list',
+      'p5/': 'list',
+      'classes': 'list',
+      'search': 'search',
+      'libraries/:lib': 'library',
+      ':searchClass(/:searchItem)': 'get'
+    },
+    /**
+     * Whether the json API data was loaded.
+     */
+    _initialized: false,
+    /**
+     * Initialize the app: load json API data and create searchable arrays.
+     */
+    init: function(callback) {
+      var self = this;
+      require(['pageView'], function(pageView) {
+
+        // If already initialized, move away from here!
+        if (self._initialized) {
           if (callback)
             callback();
-          else
-            self.list();
-        });
-      },
-      /**
-       * Start route. Simply check if initialized.
-       */
-      start: function() {
-        this.init();
-      },
-      /**
-       * Show item details by searching a class or a class item (method, property or event).
-       * @param {string} searchClass The class name (mandatory).
-       * @param {string} searchItem The class item name: can be a method, property or event name.
-       */
-      get: function(searchClass, searchItem) {
-  
-        // if looking for a library page, redirect
-        if (searchClass === 'p5.sound' && !searchItem) {
-          window.location.hash = '/libraries/'+searchClass;
           return;
         }
-  
-        var self = this;
-        this.init(function() {
-          var item = self.getItem(searchClass, searchItem);
-  
-          App.menuView.hide();
-  
-          if (item) {
-            App.itemView.show(item);
-          } else {
-            //App.itemView.nothingFound();
-  
-            self.list();
+
+        // Update initialization state: must be done now to avoid recursive mess
+        self._initialized = true;
+
+        // Render views
+        if (!App.pageView) {
+          App.pageView = new pageView();
+          App.pageView.init().render();
+        }
+
+        // If a callback is set (a route has already been called), run it
+        // otherwise, show the default list
+        if (callback)
+          callback();
+        else
+          self.list();
+      });
+    },
+    /**
+     * Start route. Simply check if initialized.
+     */
+    start: function() {
+      this.init();
+    },
+    /**
+     * Show item details by searching a class or a class item (method, property or event).
+     * @param {string} searchClass The class name (mandatory).
+     * @param {string} searchItem The class item name: can be a method, property or event name.
+     */
+    get: function(searchClass, searchItem) {
+
+      // if looking for a library page, redirect
+      if (searchClass === 'p5.sound' && !searchItem) {
+        window.location.hash = '/libraries/'+searchClass;
+        return;
+      }
+
+      var self = this;
+      this.init(function() {
+        var item = self.getItem(searchClass, searchItem);
+
+        App.menuView.hide();
+
+        if (item) {
+          App.itemView.show(item);
+        } else {
+          //App.itemView.nothingFound();
+
+          self.list();
+        }
+
+        styleCodeLinks();
+      });
+    },
+    /**
+     * Returns one item object by searching a class or a class item (method, property or event).
+     * @param {string} searchClass The class name (mandatory).
+     * @param {string} searchItem The class item name: can be a method, property or event name.
+     * @returns {object} The item found or undefined if nothing was found.
+     */
+    getItem: function(searchClass, searchItem) {
+      var classes = App.classes,
+              items = App.allItems,
+              classesCount = classes.length,
+              itemsCount = items.length,
+              className = searchClass ? searchClass.toLowerCase() : undefined,
+              itemName = searchItem ? searchItem : undefined,
+              found;
+
+      // Only search for a class, if itemName is undefined
+      if (className && !itemName) {
+        for (var i = 0; i < classesCount; i++) {
+          if (classes[i].name.toLowerCase() === className) {
+            found = classes[i];
+            _.each(found.items, function(i, idx) {
+              i.hash = App.router.getHash(i);
+            });
+            break;
           }
-  
-          styleCodeLinks();
-        });
-      },
-      /**
-       * Returns one item object by searching a class or a class item (method, property or event).
-       * @param {string} searchClass The class name (mandatory).
-       * @param {string} searchItem The class item name: can be a method, property or event name.
-       * @returns {object} The item found or undefined if nothing was found.
-       */
-      getItem: function(searchClass, searchItem) {
-        var classes = App.classes,
-                items = App.allItems,
-                classesCount = classes.length,
-                itemsCount = items.length,
-                className = searchClass ? searchClass.toLowerCase() : undefined,
-                itemName = searchItem ? searchItem : undefined,
-                found;
-  
-        // Only search for a class, if itemName is undefined
-        if (className && !itemName) {
-          for (var i = 0; i < classesCount; i++) {
-            if (classes[i].name.toLowerCase() === className) {
-              found = classes[i];
-              _.each(found.items, function(i, idx) {
-                i.hash = App.router.getHash(i);
-              });
-              break;
-            }
+        }
+        // Search for a class item
+      } else if (className && itemName) {
+        // Search case sensitively
+        for (var i = 0; i < itemsCount; i++) {
+          if (items[i].class.toLowerCase() === className &&
+            items[i].name === itemName) {
+            found = items[i];
+            break;
           }
-          // Search for a class item
-        } else if (className && itemName) {
-          // Search case sensitively
+        }
+
+        // If no match was found, fallback to search case insensitively
+        if(!found){
           for (var i = 0; i < itemsCount; i++) {
-            if (items[i].class.toLowerCase() === className &&
-              items[i].name === itemName) {
+            if(items[i].class.toLowerCase() === className &&
+              items[i].name.toLowerCase() === itemName.toLowerCase()){
               found = items[i];
               break;
             }
           }
-  
-          // If no match was found, fallback to search case insensitively
-          if(!found){
-            for (var i = 0; i < itemsCount; i++) {
-              if(items[i].class.toLowerCase() === className &&
-                items[i].name.toLowerCase() === itemName.toLowerCase()){
-                found = items[i];
-                break;
-              }
-            }
-          }
-        }
-  
-        return found;
-      },
-      /**
-       * List items.
-       * @param {string} collection The name of the collection to list.
-       */
-      list: function(collection) {
-  
-        collection = 'allItems';
-  
-        // Make sure collection is valid
-        if (App.collections.indexOf(collection) < 0) {
-          return;
         }
-  
-        this.init(function() {
-          App.menuView.show(collection);
-          App.menuView.update(collection);
-          App.listView.show(collection);
-          styleCodeLinks();
-        });
-      },
-      /**
-       * Display information for a library.
-       * @param {string} collection The name of the collection to list.
-       */
-      library: function(collection) {
-        this.init(function() {
-          App.menuView.hide();
-          App.libraryView.show(collection.substring(3)); //remove p5.
-          styleCodeLinks();
-        });
-      },
-      /**
-       * Close all content views.
-       */
-      search: function() {
-        this.init(function() {
-          App.menuView.hide();
-          App.pageView.hideContentViews();
-        });
-      },
-  
-      /**
-       * Create an hash/url for the item.
-       * @param {Object} item A class, method, property or event object.
-       * @returns {String} The hash string, including the '#'.
-       */
-       getHash: function(item) {
-  
-         if (!item.hash) {
-  
-           // FIX TO INVISIBLE OBJECTS: DH (see also listView.js)
-  
-           if (item.class) {
-             var clsFunc = '#/' + item.class + '.' + item.name;
-             var idx = clsFunc.lastIndexOf('.');
-             item.hash = clsFunc.substring(0,idx) + '/' + clsFunc.substring(idx+1);
-           } else {
-            item.hash = '#/' + item.name;
-           }
-         }
-  
-         return item.hash;
       }
-    });
-  
-    
-    function styleCodeLinks() {
-      var links = document.getElementsByTagName("a");
-      for (var iLink = 0; iLink < links.length; iLink++) {
-        var link = links[iLink];
-        if (link.hash.startsWith('#/p5')) {
-          link.classList.add('code');
-        }
+
+      return found;
+    },
+    /**
+     * List items.
+     * @param {string} collection The name of the collection to list.
+     */
+    list: function(collection) {
+
+      collection = 'allItems';
+
+      // Make sure collection is valid
+      if (App.collections.indexOf(collection) < 0) {
+        return;
       }
+
+      this.init(function() {
+        App.menuView.show(collection);
+        App.menuView.update(collection);
+        App.listView.show(collection);
+        styleCodeLinks();
+      });
+    },
+    /**
+     * Display information for a library.
+     * @param {string} collection The name of the collection to list.
+     */
+    library: function(collection) {
+      this.init(function() {
+        App.menuView.hide();
+        App.libraryView.show(collection.substring(3)); //remove p5.
+        styleCodeLinks();
+      });
+    },
+    /**
+     * Close all content views.
+     */
+    search: function() {
+      this.init(function() {
+        App.menuView.hide();
+        App.pageView.hideContentViews();
+      });
+    },
+
+    /**
+     * Create an hash/url for the item.
+     * @param {Object} item A class, method, property or event object.
+     * @returns {String} The hash string, including the '#'.
+     */
+     getHash: function(item) {
+
+       if (!item.hash) {
+
+         // FIX TO INVISIBLE OBJECTS: DH (see also listView.js)
+
+         if (item.class) {
+           var clsFunc = '#/' + item.class + '.' + item.name;
+           var idx = clsFunc.lastIndexOf('.');
+           item.hash = clsFunc.substring(0,idx) + '/' + clsFunc.substring(idx+1);
+         } else {
+          item.hash = '#/' + item.name;
+         }
+       }
+
+       return item.hash;
     }
-  
-  
-    // Get the router
-    App.router = new Router();
-  
-    // Start history
-    Backbone.history.start();
-  
-    return App.router;
-  
-  });
-  
-  /**
-   * Define global App.
-   */
-  var App = window.App || {};
-  define('App', [],function() {
-    return App;
   });
-  
-  /**
-   * Load json API data and start the router.
-   * @param {module} App
-   * @param {module} router
-   */
-  require([
-    'App',
-    './documented-method'], function(App, DocumentedMethod) {
-  
-    // Set collections
-    App.collections = ['allItems', 'classes', 'events', 'methods', 'properties', 'p5.sound'];
-  
-    // Get json API data
-    $.getJSON('data.min.json', function(data) {
-      App.data = data;
-      App.classes = [];
-      App.methods = [];
-      App.properties = [];
-      App.events = [];
-      App.allItems = [];
-      App.sound = { items: [] };
-      App.dom = { items: [] };
-      App.modules = [];
-      App.project = data.project;
-  
-  
-      var modules = data.modules;
-  
-      // Get class items (methods, properties, events)
-      _.each(modules, function(m, idx, array) {
-        App.modules.push(m);
-        if (m.name == "p5.sound") {
-          App.sound.module = m;
-        }
-      });
-  
-  
-      var items = data.classitems;
-      var classes = data.classes;
-  
-      // Get classes
-      _.each(classes, function(c, idx, array) {
-        if (!c.private) {
-          App.classes.push(c);
+
+  
+  function styleCodeLinks() {
+    var links = document.getElementsByTagName("a");
+    for (var iLink = 0; iLink < links.length; iLink++) {
+      var link = links[iLink];
+      if (link.hash.startsWith('#/p5')) {
+        link.classList.add('code');
+      }
+    }
+  }
+
+
+  // Get the router
+  App.router = new Router();
+
+  // Start history
+  Backbone.history.start();
+
+  return App.router;
+
+});
+
+/**
+ * Define global App.
+ */
+var App = window.App || {};
+define('App', [],function() {
+  return App;
+});
+
+/**
+ * Load json API data and start the router.
+ * @param {module} App
+ * @param {module} router
+ */
+require([
+  'App',
+  './documented-method'], function(App, DocumentedMethod) {
+
+  // Set collections
+  App.collections = ['allItems', 'classes', 'events', 'methods', 'properties', 'p5.sound'];
+
+  // Get json API data
+  $.getJSON('data.min.json', function(data) {
+    App.data = data;
+    App.classes = [];
+    App.methods = [];
+    App.properties = [];
+    App.events = [];
+    App.allItems = [];
+    App.sound = { items: [] };
+    App.dom = { items: [] };
+    App.modules = [];
+    App.project = data.project;
+
+
+    var modules = data.modules;
+
+    // Get class items (methods, properties, events)
+    _.each(modules, function(m, idx, array) {
+      App.modules.push(m);
+      if (m.name == "p5.sound") {
+        App.sound.module = m;
+      }
+    });
+
+
+    var items = data.classitems;
+    var classes = data.classes;
+
+    // Get classes
+    _.each(classes, function(c, idx, array) {
+      if (!c.private) {
+        App.classes.push(c);
+      }
+    });
+
+
+    // Get class items (methods, properties, events)
+    _.each(items, function(el, idx, array) {
+      if (el.itemtype) {
+        if (el.itemtype === "method") {
+          el = new DocumentedMethod(el);
+          App.methods.push(el);
+          App.allItems.push(el);
+        } else if (el.itemtype === "property") {
+          App.properties.push(el);
+          App.allItems.push(el);
+        } else if (el.itemtype === "event") {
+          App.events.push(el);
+          App.allItems.push(el);
         }
-      });
-  
-  
-      // Get class items (methods, properties, events)
-      _.each(items, function(el, idx, array) {
-        if (el.itemtype) {
-          if (el.itemtype === "method") {
-            el = new DocumentedMethod(el);
-            App.methods.push(el);
-            App.allItems.push(el);
-          } else if (el.itemtype === "property") {
-            App.properties.push(el);
-            App.allItems.push(el);
-          } else if (el.itemtype === "event") {
-            App.events.push(el);
-            App.allItems.push(el);
-          }
-  
-          // libraries
-          if (el.module === "p5.sound") {
-            App.sound.items.push(el);
-          }
+
+        // libraries
+        if (el.module === "p5.sound") {
+          App.sound.items.push(el);
         }
-      });
-  
-      _.each(App.classes, function(c, idx) {
-        c.items = _.filter(App.allItems, function(it){ return it.class === c.name; });
-      });
-  
-      require(['router']);
+      }
+    });
+
+    _.each(App.classes, function(c, idx) {
+      c.items = _.filter(App.allItems, function(it){ return it.class === c.name; });
     });
+
+    require(['router']);
   });
-  
-  define("main", function(){});
-  
-  }());
\ No newline at end of file
+});
+
+define("main", function(){});
+
+}());
\ No newline at end of file
diff --git a/src/data/data.yml b/src/data/data.yml
index ad2433e73d..e354d417b0 100644
--- a/src/data/data.yml
+++ b/src/data/data.yml
@@ -1,2 +1,2 @@
 title: p5.js
-version: 1.2.0
+version: 1.3.1
diff --git a/src/data/examples/en/10_Interaction/11_WeightLine.js b/src/data/examples/en/10_Interaction/11_WeightLine.js
new file mode 100644
index 0000000000..a455dcb781
--- /dev/null
+++ b/src/data/examples/en/10_Interaction/11_WeightLine.js
@@ -0,0 +1,55 @@
+/* 
+ * @name Weight Line
+ * @frame 710,400
+ * @description contributed by <a href="https://www.rit.edu/directory/wmhics-w-michelle-harris">
+   <b>Prof WM Harris,</b></a> using the random function with events to color/weight a line<br/>
+  <b>How</b> to use the random function with events to color/ weight a line
+	dependent on mouse location, left mouse button clicks, character key types, and
+	random key releases.<br/>
+  <b>Functions</b> are created for both the canvas set up as well as the creation of
+	the line. Depending on the action taken by the user the line can
+	vary in width and color. Left mouse button clicks result in a color
+	change to blue, while the typing of any character key will change
+	the color to turquoise, each resulting in a variable stroke weight;
+	the width of the former will be between 0 – 1 while the width of
+	the latter will be 0 – 5. The release of any key will result in a
+  random hue, saturation, and brightness change to the line.
+ */
+
+
+function setup() {
+    createCanvas(400, 400);
+    background("beige");
+    colorMode(HSB);
+  }
+  
+  function draw() {
+    //Line from prev pt to current pt
+    //of mouse position
+    line(mouseX, mouseY, pmouseX, pmouseY);
+  }
+  
+  //listen when we click the mouse
+  function mouseClicked() {
+    //weights 0 to 1
+    stroke("slateBlue");
+    strokeWeight(random());
+  
+    //what if want weights 0 to .4?
+    //strokeWeight( random(.4) );
+  }
+  
+  //listen when we release *any* key
+  function keyReleased() {
+    //color hue values between 20 and 145
+    //saturation 0 to 100
+    //brightness 80 to 100
+    stroke(random(20, 145), random(100), random(80, 100));
+  }
+  
+  //listen for only character keys
+  function keyTyped() {
+    //weights 0 to 5
+    stroke("turquoise");
+    strokeWeight(random(5));
+  }
\ No newline at end of file
diff --git a/src/data/reference/en.json b/src/data/reference/en.json
index 608d1b0272..6a6d7ffb0e 100644
--- a/src/data/reference/en.json
+++ b/src/data/reference/en.json
@@ -329,20 +329,20 @@
         "start": "Number: angle to start the arc, specified in radians",
         "stop": "Number: angle to stop the arc, specified in radians",
         "mode": "Constant: (Optional) optional parameter to determine the way of drawing  the arc. either CHORD, PIE or OPEN",
-        "detail": "Number: (Optional) optional parameter for WebGL mode only. This is to  specify the number of vertices that makes up the  perimeter of the arc. Default value is 25."
+        "detail": "Integer: (Optional) optional parameter for WebGL mode only. This is to  specify the number of vertices that makes up the  perimeter of the arc. Default value is 25. Won't  draw a stroke for a detail of more than 50."
       }
     },
     "ellipse": {
       "description": [
         "Draws an ellipse (oval) to the screen. By default, the first two parameters set the location of the center of the ellipse, and the third and fourth parameters set the shape's width and height. If no height is specified, the value of width is used for both the width and height. If a negative height or width is specified, the absolute value is taken. ",
-        "An ellipse with equal width and height is a circle.The origin may be changed with the <a href=\"#/p5/ellipseMode\">ellipseMode()</a> function."
+        "An ellipse with equal width and height is a circle. The origin may be changed with the <a href=\"#/p5/ellipseMode\">ellipseMode()</a> function."
       ],
       "params": {
         "x": "Number: x-coordinate of the center of ellipse.",
         "y": "Number: y-coordinate of the center of ellipse.",
         "w": "Number: width of the ellipse.",
         "h": "Number: (Optional) height of the ellipse.",
-        "detail": "Integer: number of radial sectors to draw (for WebGL mode)"
+        "detail": "Integer: (Optional) optional parameter for WebGL mode only. This is to  specify the number of vertices that makes up the  perimeter of the ellipse. Default value is 25. Won't  draw a stroke for a detail of more than 50."
       }
     },
     "circle": {
@@ -709,6 +709,11 @@
         "v": "Number: (Optional) the vertex's texture v-coordinate"
       }
     },
+    "VERSION": {
+      "description": [
+        "Version of this p5.js."
+      ]
+    },
     "P2D": {
       "description": [
         "The default, two-dimensional renderer."
@@ -934,7 +939,10 @@
     "windowResized": {
       "description": [
         "The <a href=\"#/p5/windowResized\">windowResized()</a> function is called once every time the browser window is resized. This is a good place to resize the canvas or do any other adjustments to accommodate the new window size."
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional Event callback argument."
+      }
     },
     "width": {
       "description": [
@@ -1745,18 +1753,27 @@
         "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 <a href=\"#/p5/keyTyped\">keyTyped()</a> 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 <a href=\"#/p5/keyTyped\">keyTyped()</a> (and <a href=\"#/p5/keyReleased\">keyReleased()</a> 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."
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional KeyboardEvent callback argument."
+      }
     },
     "keyReleased": {
       "description": [
         "The <a href=\"#/p5/keyReleased\">keyReleased()</a> function is called once every time a key is released. See <a href=\"#/p5/key\">key</a> and <a href=\"#/p5/keyCode\">keyCode</a> for more information. Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add \"return false\" to the end of the method."
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional KeyboardEvent callback argument."
+      }
     },
     "keyTyped": {
       "description": [
         "The <a href=\"#/p5/keyTyped\">keyTyped()</a> 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 <a href=\"#/p5/keyPressed\">keyPressed()</a> 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 <a href=\"#/p5/keyTyped\">keyTyped()</a> (and <a href=\"#/p5/keyReleased\">keyReleased()</a> 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."
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional KeyboardEvent callback argument."
+      }
     },
     "keyIsDown": {
       "description": [
diff --git a/src/data/reference/es.json b/src/data/reference/es.json
index cd3bcba34a..f033bac4b0 100644
--- a/src/data/reference/es.json
+++ b/src/data/reference/es.json
@@ -709,6 +709,11 @@
         "v": "Number: (Optional) the vertex's texture v-coordinate"
       }
     },
+    "VERSION": {
+      "description": [
+        "Version of this p5.js."
+      ]
+    },
     "P2D": {
       "description": [
         "The default, two-dimensional renderer."
@@ -934,7 +939,10 @@
     "windowResized": {
       "description": [
         "La función windowResized() es llamada cada vez que la ventana del navegador cambia de tamaño. Es un buen lugar para cambiar las dimensiones del lienzo o hacer cualquier otro ajuste necesario para acomodar las nuevas dimensiones de la ventana."
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional Event callback argument."
+      }
     },
     "width": {
       "description": [
@@ -1745,18 +1753,27 @@
         "",
         "",
         ""
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional KeyboardEvent callback argument."
+      }
     },
     "keyReleased": {
       "description": [
         "La función keyReleased() es llamada una vez cada vez que una tecla es soltada. Ver key y keyCode para más información. Los navegadores tienen distintos comportamientos por defecto asociados a distintos eventos gatillados por teclas. Para prevenir cualquier comportamiento por defecto para este evento, añade return false al final de este método."
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional KeyboardEvent callback argument."
+      }
     },
     "keyTyped": {
       "description": [
         "la función keyTyped es llamada cava vez que una tecla es presionada, excepto cuando son presionadas la steclas de acción como Ctrl, Shift y Alt, que son ignoradas. La tecla presionada más reciente será almacenada en la variable key. Por la forma en que los sistemas operativos manejan la repetición de teclas, mantener presionada una tecla puede causar múltiples llamadas a keyTyped() (y también keyReleased()). La tasa de repetición es definida por el sistema operativo y según cómo cada computador está configurado. Los navegadores tienen distintos comportamientos por defecto asociados a distintos eventos gatillados por teclas. Para prevenir cualquier comportamiento por defecto para este evento, añade return false al final de este método.",
         ""
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional KeyboardEvent callback argument."
+      }
     },
     "keyIsDown": {
       "description": [
diff --git a/src/data/reference/ko.json b/src/data/reference/ko.json
index 1ebce5db36..fe0d2cfa0c 100644
--- a/src/data/reference/ko.json
+++ b/src/data/reference/ko.json
@@ -709,6 +709,11 @@
         "v": "숫자: 꼭지점의 v좌표값(선택 사항)"
       }
     },
+    "VERSION": {
+      "description": [
+        "Version of this p5.js."
+      ]
+    },
     "P2D": {
       "description": [
         "The default, two-dimensional renderer."
@@ -934,7 +939,10 @@
     "windowResized": {
       "description": [
         "windowResized() 함수는 브라우저 창의 크기가 조정될 때마다 한 번씩 호출됩니다. 캔버스 크기를 재조정하거나 새 윈도우 화면의 크기에 맞춰 조정할 때 유용합니다."
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional Event callback argument."
+      }
     },
     "width": {
       "description": [
@@ -1745,18 +1753,27 @@
         "",
         "",
         ""
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional KeyboardEvent callback argument."
+      }
     },
     "keyReleased": {
       "description": [
         "keyReleased() 함수는 자판을 놓을 때마다 한 번씩 호출됩니다. 자세한 내용은 <a href='https://p5js.org/reference/#/p5/key'>key</a>와 <a href='https://p5js.org/reference/#/p5/keyCode'>keyCode</a>를 참고하세요.<br><br>자판키 입력을 통한 이벤트 발생이 브라우저 기본값으로 설정되어있는 경우, 메소드 말미에 \"return false\"를 넣어 브라우저 기본값 이벤트 발생을 방지할 수 있습니다."
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional KeyboardEvent callback argument."
+      }
     },
     "keyTyped": {
       "description": [
         "keyTyped() 함수는 자판을 누를 때마다 한번씩 호출되지만, 백스페이즈, 딜리트, 컨트롤, 쉬프트, 알트키는 무시됩니다. 언급된 자판키 입력 감지를 원할 경우, keyPressed() 함수를 사용하면 됩니다. 가장 마지막으로 입력된 자판키값이 key 변수에 저장됩니다.<br><br>컴퓨터 운영 체제의 자판키 입력 반복 처리 방식으로 인해, 자판키를 계속 누르면 keyTyped()를 여러 번 호출하는 경우가 발생할 수 있습니다. (keyReleased()도 마찬가지 입니다.) 반복 속도는 운영 체제와 컴퓨터 구성 방식마다 다릅니다.<br><br>자판키 입력을 통한 이벤트 발생이 브라우저 기본값으로 설정되어있는 경우, 메소드 말미에 \"return false\"를 넣어 브라우저 기본값 이벤트 발생을 방지할 수 있습니다.",
         ""
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional KeyboardEvent callback argument."
+      }
     },
     "keyIsDown": {
       "description": [
diff --git a/src/data/reference/zh-Hans.json b/src/data/reference/zh-Hans.json
index 6efea6e9c5..072a54e1f1 100644
--- a/src/data/reference/zh-Hans.json
+++ b/src/data/reference/zh-Hans.json
@@ -709,6 +709,11 @@
         "v": "数字：顶点的纹理 v 坐标"
       }
     },
+    "VERSION": {
+      "description": [
+        "Version of this p5.js."
+      ]
+    },
     "P2D": {
       "description": [
         "The default, two-dimensional renderer."
@@ -934,7 +939,10 @@
     "windowResized": {
       "description": [
         "windowResized() 函数将在每次浏览器窗口缩放时被调用。这是个适合缩放画布及或任何其他调整以符合新的窗口大小的地方。"
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional Event callback argument."
+      }
     },
     "width": {
       "description": [
@@ -1745,18 +1753,27 @@
         "",
         "",
         ""
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional KeyboardEvent callback argument."
+      }
     },
     "keyReleased": {
       "description": [
         "keyReleased() 函数将会在每一次任何键被释放时被调用。请查看 key 及 keyCode 以知更多详情。<br><br>不同浏览器可能会有不同附属于个别键盘事件的默认行为。以防止这些默认行为发生，只需在函数尾端加 “return false”。"
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional KeyboardEvent callback argument."
+      }
     },
     "keyTyped": {
       "description": [
         "keyTyped() 函数将会在每一次任何键被按下时被调用，可是会忽略操作键如 Ctrl、Shift 及 Alt。被按下的键的 keyCode 将被储存在 keyCode 变量内。<br><br>取决于操作系统如何处理按键重复，按住一个键可能使 keyTyped() （及 keyReleased()）被调用多过一次。重复的速度应操作系统及该电脑的设置而定。<br><br>不同浏览器可能会有不同附属于个别键盘事件的默认行为。以防止这些默认行为发生，只需在函数尾端加 “return false”。",
         ""
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional KeyboardEvent callback argument."
+      }
     },
     "keyIsDown": {
       "description": [
diff --git a/src/templates/pages/reference/assets/Avenir.otf b/src/templates/pages/reference/assets/Avenir.otf
new file mode 100644
index 0000000000000000000000000000000000000000..38941ae72f5c9b0d9f3ba46c812778261177698c
GIT binary patch
literal 127448
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

literal 0
HcmV?d00001

diff --git a/src/templates/pages/reference/assets/AvenirNextLTPro-Demi.otf b/src/templates/pages/reference/assets/AvenirNextLTPro-Demi.otf
new file mode 100644
index 0000000000000000000000000000000000000000..750b0c599400e4ed4480a40e96fc7691a646d329
GIT binary patch
literal 69940
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

literal 0
HcmV?d00001

diff --git a/src/templates/pages/reference/data.json b/src/templates/pages/reference/data.json
index b4629190d7..68c8222865 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.2.0",
+        "version": "1.3.1",
         "url": "https://github.com/processing/p5.js#readme"
     },
     "files": {
@@ -1107,7 +1107,7 @@
             "namespaces": {},
             "module": "DOM",
             "file": "src/dom/dom.js",
-            "line": 3487,
+            "line": 3490,
             "description": "<p>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 <a href=\"#/p5.Element\">p5.Element</a> that supports a range of HTML elements. See the\n<a href='https://github.com/processing/p5.js/wiki/Beyond-the-canvas'>\nbeyond the canvas tutorial</a> for a full overview of how this addon works.</p>\n<p>See <a href='https://github.com/processing/p5.js/wiki/Beyond-the-canvas'>tutorial: beyond the canvas</a>\nfor more info on how to use this library.</a></p>\n",
             "requires": [
                 "p5"
@@ -2132,7 +2132,7 @@
             "submodule": "DOM",
             "namespace": "",
             "file": "src/dom/dom.js",
-            "line": 2331,
+            "line": 2334,
             "description": "<p>Extends <a href=\"#/p5.Element\">p5.Element</a> to handle audio and video. In addition to the methods\nof <a href=\"#/p5.Element\">p5.Element</a>, it also contains methods for controlling media. It is not\ncalled directly, but <a href=\"#/p5.MediaElement\">p5.MediaElement</a>s are created by calling <a href=\"#/p5/createVideo\">createVideo</a>,\n<a href=\"#/p5/createAudio\">createAudio</a>, and <a href=\"#/p5/createCapture\">createCapture</a>.</p>\n",
             "is_constructor": 1,
             "params": [
@@ -2155,7 +2155,7 @@
             "submodule": "DOM",
             "namespace": "",
             "file": "src/dom/dom.js",
-            "line": 3487,
+            "line": 3490,
             "description": "<p>Base class for a file.\nUsed for Element.drop and createFileInput.</p>\n",
             "is_constructor": 1,
             "params": [
@@ -4652,8 +4652,8 @@
                 },
                 {
                     "name": "detail",
-                    "description": "<p>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.</p>\n",
-                    "type": "Number",
+                    "description": "<p>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.</p>\n",
+                    "type": "Integer",
                     "optional": true
                 }
             ],
@@ -4668,8 +4668,8 @@
         },
         {
             "file": "src/core/shape/2d_primitives.js",
-            "line": 231,
-            "description": "<p>Draws an ellipse (oval) to the screen. By default, the first two parameters\nset the location of the center of the ellipse, and the third and fourth\nparameters set the shape's width and height. If no height is specified, the\nvalue of width is used for both the width and height. If a negative height or\nwidth is specified, the absolute value is taken.</p>\n<p>An ellipse with equal width and height is a circle.The origin may be changed\nwith the <a href=\"#/p5/ellipseMode\">ellipseMode()</a> function.</p>\n",
+            "line": 232,
+            "description": "<p>Draws an ellipse (oval) to the screen. By default, the first two parameters\nset the location of the center of the ellipse, and the third and fourth\nparameters set the shape's width and height. If no height is specified, the\nvalue of width is used for both the width and height. If a negative height or\nwidth is specified, the absolute value is taken.</p>\n<p>An ellipse with equal width and height is a circle. The origin may be changed\nwith the <a href=\"#/p5/ellipseMode\">ellipseMode()</a> function.</p>\n",
             "itemtype": "method",
             "name": "ellipse",
             "chainable": 1,
@@ -4682,7 +4682,7 @@
             "submodule": "2D Primitives",
             "overloads": [
                 {
-                    "line": 231,
+                    "line": 232,
                     "params": [
                         {
                             "name": "x",
@@ -4709,7 +4709,7 @@
                     "chainable": 1
                 },
                 {
-                    "line": 258,
+                    "line": 259,
                     "params": [
                         {
                             "name": "x",
@@ -4733,8 +4733,9 @@
                         },
                         {
                             "name": "detail",
-                            "description": "<p>number of radial sectors to draw (for WebGL mode)</p>\n",
-                            "type": "Integer"
+                            "description": "<p>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.</p>\n",
+                            "type": "Integer",
+                            "optional": true
                         }
                     ]
                 }
@@ -4742,7 +4743,7 @@
         },
         {
             "file": "src/core/shape/2d_primitives.js",
-            "line": 271,
+            "line": 275,
             "description": "<p>Draws a circle to the screen. A circle is a simple closed shape. It is the set\nof all points in a plane that are at a given distance from a given point,\nthe centre. This function is a special case of the ellipse() function, where\nthe width and height of the ellipse are the same. Height and width of the\nellipse correspond to the diameter of the circle. By default, the first two\nparameters set the location of the centre of the circle, the third sets the\ndiameter of the circle.</p>\n",
             "itemtype": "method",
             "name": "circle",
@@ -4774,7 +4775,7 @@
         },
         {
             "file": "src/core/shape/2d_primitives.js",
-            "line": 335,
+            "line": 339,
             "description": "<p>Draws a line (a direct path between two points) to the screen. If called with\nonly 4 parameters, it will draw a line in 2D with a default width of 1 pixel.\nThis width can be modified by using the <a href=\"#/p5/strokeWeight\">\nstrokeWeight()</a> function. A line cannot be filled, therefore the <a\nhref=\"#/p5/fill\">fill()</a> function will not affect the color of a line. So to\ncolor a line, use the <a href=\"#/p5/stroke\">stroke()</a> function.</p>\n",
             "itemtype": "method",
             "name": "line",
@@ -4788,7 +4789,7 @@
             "submodule": "2D Primitives",
             "overloads": [
                 {
-                    "line": 335,
+                    "line": 339,
                     "params": [
                         {
                             "name": "x1",
@@ -4814,7 +4815,7 @@
                     "chainable": 1
                 },
                 {
-                    "line": 371,
+                    "line": 375,
                     "params": [
                         {
                             "name": "x1",
@@ -4853,7 +4854,7 @@
         },
         {
             "file": "src/core/shape/2d_primitives.js",
-            "line": 396,
+            "line": 400,
             "description": "<p>Draws a point, a coordinate in space at the dimension of one pixel.\nThe first parameter is the horizontal value for the point, the second\nparam is the vertical value for the point. The color of the point is\nchanged with the <a href=\"#/p5/stroke\">stroke()</a> function. The size of the point\ncan be changed with the <a href=\"#/p5/strokeWeight\">strokeWeight()</a> function.</p>\n",
             "itemtype": "method",
             "name": "point",
@@ -4867,7 +4868,7 @@
             "submodule": "2D Primitives",
             "overloads": [
                 {
-                    "line": 396,
+                    "line": 400,
                     "params": [
                         {
                             "name": "x",
@@ -4889,7 +4890,7 @@
                     "chainable": 1
                 },
                 {
-                    "line": 446,
+                    "line": 450,
                     "params": [
                         {
                             "name": "coordinate_vector",
@@ -4903,7 +4904,7 @@
         },
         {
             "file": "src/core/shape/2d_primitives.js",
-            "line": 474,
+            "line": 478,
             "description": "<p>Draws a quad on the canvas. A quad is a quadrilateral, a four sided polygon. It is\nsimilar to a rectangle, but the angles between its edges are not\nconstrained to ninety degrees. The first pair of parameters (x1,y1)\nsets the first vertex and the subsequent pairs should proceed\nclockwise or counter-clockwise around the defined shape.\nz-arguments only work when quad() is used in WEBGL mode.</p>\n",
             "itemtype": "method",
             "name": "quad",
@@ -4917,7 +4918,7 @@
             "submodule": "2D Primitives",
             "overloads": [
                 {
-                    "line": 474,
+                    "line": 478,
                     "params": [
                         {
                             "name": "x1",
@@ -4975,7 +4976,7 @@
                     "chainable": 1
                 },
                 {
-                    "line": 504,
+                    "line": 508,
                     "params": [
                         {
                             "name": "x1",
@@ -5056,7 +5057,7 @@
         },
         {
             "file": "src/core/shape/2d_primitives.js",
-            "line": 548,
+            "line": 552,
             "description": "<p>Draws a rectangle on the canvas. A rectangle is a four-sided closed shape with\nevery angle at ninety degrees. By default, the first two parameters set\nthe location of the upper-left corner, the third sets the width, and the\nfourth sets the height. The way these parameters are interpreted, may be\nchanged with the <a href=\"#/p5/rectMode\">rectMode()</a> function.</p>\n<p>The fifth, sixth, seventh and eighth parameters, if specified,\ndetermine corner radius for the top-left, top-right, lower-right and\nlower-left corners, respectively. An omitted corner radius parameter is set\nto the value of the previously specified radius value in the parameter list.</p>\n",
             "itemtype": "method",
             "name": "rect",
@@ -5070,7 +5071,7 @@
             "submodule": "2D Primitives",
             "overloads": [
                 {
-                    "line": 548,
+                    "line": 552,
                     "params": [
                         {
                             "name": "x",
@@ -5121,7 +5122,7 @@
                     "chainable": 1
                 },
                 {
-                    "line": 599,
+                    "line": 603,
                     "params": [
                         {
                             "name": "x",
@@ -5162,7 +5163,7 @@
         },
         {
             "file": "src/core/shape/2d_primitives.js",
-            "line": 614,
+            "line": 618,
             "description": "<p>Draws a square to the screen. A square is a four-sided shape with every angle\nat ninety degrees, and equal side size. This function is a special case of the\nrect() function, where the width and height are the same, and the parameter\nis called \"s\" for side size. By default, the first two parameters set the\nlocation of the upper-left corner, the third sets the side size of the square.\nThe way these parameters are interpreted, may be changed with the <a\nhref=\"#/p5/rectMode\">rectMode()</a> function.</p>\n<p>The fourth, fifth, sixth and seventh parameters, if specified,\ndetermine corner radius for the top-left, top-right, lower-right and\nlower-left corners, respectively. An omitted corner radius parameter is set\nto the value of the previously specified radius value in the parameter list.</p>\n",
             "itemtype": "method",
             "name": "square",
@@ -5218,7 +5219,7 @@
         },
         {
             "file": "src/core/shape/2d_primitives.js",
-            "line": 703,
+            "line": 707,
             "description": "<p>Draws a triangle to the canvas. A triangle is a plane created by connecting\nthree points. The first two arguments specify the first point, the middle two\narguments specify the second point, and the last two arguments specify the\nthird point.</p>\n",
             "itemtype": "method",
             "name": "triangle",
@@ -6288,7 +6289,19 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 10,
+            "line": 9,
+            "description": "<p>Version of this p5.js.</p>\n",
+            "itemtype": "property",
+            "name": "VERSION",
+            "type": "String",
+            "final": 1,
+            "class": "p5",
+            "module": "Constants",
+            "submodule": "Constants"
+        },
+        {
+            "file": "src/core/constants.js",
+            "line": 18,
             "description": "<p>The default, two-dimensional renderer.</p>\n",
             "itemtype": "property",
             "name": "P2D",
@@ -6300,7 +6313,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 16,
+            "line": 24,
             "description": "<p>One of the two render modes in p5.js: P2D (default renderer) and WEBGL\nEnables 3D render by introducing the third dimension: Z</p>\n",
             "itemtype": "property",
             "name": "WEBGL",
@@ -6312,7 +6325,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 25,
+            "line": 33,
             "itemtype": "property",
             "name": "ARROW",
             "type": "String",
@@ -6323,7 +6336,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 30,
+            "line": 38,
             "itemtype": "property",
             "name": "CROSS",
             "type": "String",
@@ -6334,7 +6347,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 35,
+            "line": 43,
             "itemtype": "property",
             "name": "HAND",
             "type": "String",
@@ -6345,7 +6358,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 40,
+            "line": 48,
             "itemtype": "property",
             "name": "MOVE",
             "type": "String",
@@ -6356,7 +6369,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 45,
+            "line": 53,
             "itemtype": "property",
             "name": "TEXT",
             "type": "String",
@@ -6367,7 +6380,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 50,
+            "line": 58,
             "itemtype": "property",
             "name": "WAIT",
             "type": "String",
@@ -6378,7 +6391,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 58,
+            "line": 66,
             "description": "<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n",
             "itemtype": "property",
             "name": "HALF_PI",
@@ -6394,7 +6407,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 76,
+            "line": 84,
             "description": "<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n",
             "itemtype": "property",
             "name": "PI",
@@ -6410,7 +6423,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 94,
+            "line": 102,
             "description": "<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n",
             "itemtype": "property",
             "name": "QUARTER_PI",
@@ -6426,7 +6439,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 112,
+            "line": 120,
             "description": "<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n",
             "itemtype": "property",
             "name": "TAU",
@@ -6442,7 +6455,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 130,
+            "line": 138,
             "description": "<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n",
             "itemtype": "property",
             "name": "TWO_PI",
@@ -6458,7 +6471,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 148,
+            "line": 156,
             "description": "<p>Constant to be used with <a href=\"#/p5/angleMode\">angleMode()</a> function, to set the mode which\np5.js interprates and calculates angles (either DEGREES or RADIANS).</p>\n",
             "itemtype": "property",
             "name": "DEGREES",
@@ -6473,7 +6486,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 162,
+            "line": 170,
             "description": "<p>Constant to be used with <a href=\"#/p5/angleMode\">angleMode()</a> function, to set the mode which\np5.js interprates and calculates angles (either RADIANS or DEGREES).</p>\n",
             "itemtype": "property",
             "name": "RADIANS",
@@ -6488,7 +6501,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 180,
+            "line": 188,
             "itemtype": "property",
             "name": "CORNER",
             "type": "String",
@@ -6499,7 +6512,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 185,
+            "line": 193,
             "itemtype": "property",
             "name": "CORNERS",
             "type": "String",
@@ -6510,7 +6523,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 190,
+            "line": 198,
             "itemtype": "property",
             "name": "RADIUS",
             "type": "String",
@@ -6521,7 +6534,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 195,
+            "line": 203,
             "itemtype": "property",
             "name": "RIGHT",
             "type": "String",
@@ -6532,7 +6545,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 200,
+            "line": 208,
             "itemtype": "property",
             "name": "LEFT",
             "type": "String",
@@ -6543,7 +6556,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 205,
+            "line": 213,
             "itemtype": "property",
             "name": "CENTER",
             "type": "String",
@@ -6554,7 +6567,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 210,
+            "line": 218,
             "itemtype": "property",
             "name": "TOP",
             "type": "String",
@@ -6565,7 +6578,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 215,
+            "line": 223,
             "itemtype": "property",
             "name": "BOTTOM",
             "type": "String",
@@ -6576,7 +6589,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 220,
+            "line": 228,
             "itemtype": "property",
             "name": "BASELINE",
             "type": "String",
@@ -6588,7 +6601,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 226,
+            "line": 234,
             "itemtype": "property",
             "name": "POINTS",
             "type": "Number",
@@ -6600,7 +6613,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 232,
+            "line": 240,
             "itemtype": "property",
             "name": "LINES",
             "type": "Number",
@@ -6612,7 +6625,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 238,
+            "line": 246,
             "itemtype": "property",
             "name": "LINE_STRIP",
             "type": "Number",
@@ -6624,7 +6637,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 244,
+            "line": 252,
             "itemtype": "property",
             "name": "LINE_LOOP",
             "type": "Number",
@@ -6636,7 +6649,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 250,
+            "line": 258,
             "itemtype": "property",
             "name": "TRIANGLES",
             "type": "Number",
@@ -6648,7 +6661,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 256,
+            "line": 264,
             "itemtype": "property",
             "name": "TRIANGLE_FAN",
             "type": "Number",
@@ -6660,7 +6673,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 262,
+            "line": 270,
             "itemtype": "property",
             "name": "TRIANGLE_STRIP",
             "type": "Number",
@@ -6672,7 +6685,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 268,
+            "line": 276,
             "itemtype": "property",
             "name": "QUADS",
             "type": "String",
@@ -6683,7 +6696,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 273,
+            "line": 281,
             "itemtype": "property",
             "name": "QUAD_STRIP",
             "type": "String",
@@ -6695,7 +6708,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 279,
+            "line": 287,
             "itemtype": "property",
             "name": "TESS",
             "type": "String",
@@ -6707,7 +6720,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 285,
+            "line": 293,
             "itemtype": "property",
             "name": "CLOSE",
             "type": "String",
@@ -6718,7 +6731,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 290,
+            "line": 298,
             "itemtype": "property",
             "name": "OPEN",
             "type": "String",
@@ -6729,7 +6742,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 295,
+            "line": 303,
             "itemtype": "property",
             "name": "CHORD",
             "type": "String",
@@ -6740,7 +6753,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 300,
+            "line": 308,
             "itemtype": "property",
             "name": "PIE",
             "type": "String",
@@ -6751,7 +6764,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 305,
+            "line": 313,
             "itemtype": "property",
             "name": "PROJECT",
             "type": "String",
@@ -6763,7 +6776,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 311,
+            "line": 319,
             "itemtype": "property",
             "name": "SQUARE",
             "type": "String",
@@ -6775,7 +6788,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 317,
+            "line": 325,
             "itemtype": "property",
             "name": "ROUND",
             "type": "String",
@@ -6786,7 +6799,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 322,
+            "line": 330,
             "itemtype": "property",
             "name": "BEVEL",
             "type": "String",
@@ -6797,7 +6810,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 327,
+            "line": 335,
             "itemtype": "property",
             "name": "MITER",
             "type": "String",
@@ -6808,7 +6821,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 334,
+            "line": 342,
             "itemtype": "property",
             "name": "RGB",
             "type": "String",
@@ -6819,7 +6832,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 339,
+            "line": 347,
             "description": "<p>HSB (hue, saturation, brightness) is a type of color model.\nYou can learn more about it at\n<a href=\"https://learnui.design/blog/the-hsb-color-system-practicioners-primer.html\">HSB</a>.</p>\n",
             "itemtype": "property",
             "name": "HSB",
@@ -6831,7 +6844,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 348,
+            "line": 356,
             "itemtype": "property",
             "name": "HSL",
             "type": "String",
@@ -6842,7 +6855,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 355,
+            "line": 363,
             "description": "<p>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 <a href=\"/#/p5.Element/size\">size</a> function as AUTO, at a time.</p>\n",
             "itemtype": "property",
             "name": "AUTO",
@@ -6854,7 +6867,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 365,
+            "line": 373,
             "itemtype": "property",
             "name": "ALT",
             "type": "Number",
@@ -6865,7 +6878,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 371,
+            "line": 379,
             "itemtype": "property",
             "name": "BACKSPACE",
             "type": "Number",
@@ -6876,7 +6889,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 376,
+            "line": 384,
             "itemtype": "property",
             "name": "CONTROL",
             "type": "Number",
@@ -6887,7 +6900,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 381,
+            "line": 389,
             "itemtype": "property",
             "name": "DELETE",
             "type": "Number",
@@ -6898,7 +6911,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 386,
+            "line": 394,
             "itemtype": "property",
             "name": "DOWN_ARROW",
             "type": "Number",
@@ -6909,7 +6922,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 391,
+            "line": 399,
             "itemtype": "property",
             "name": "ENTER",
             "type": "Number",
@@ -6920,7 +6933,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 396,
+            "line": 404,
             "itemtype": "property",
             "name": "ESCAPE",
             "type": "Number",
@@ -6931,7 +6944,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 401,
+            "line": 409,
             "itemtype": "property",
             "name": "LEFT_ARROW",
             "type": "Number",
@@ -6942,7 +6955,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 406,
+            "line": 414,
             "itemtype": "property",
             "name": "OPTION",
             "type": "Number",
@@ -6953,7 +6966,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 411,
+            "line": 419,
             "itemtype": "property",
             "name": "RETURN",
             "type": "Number",
@@ -6964,7 +6977,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 416,
+            "line": 424,
             "itemtype": "property",
             "name": "RIGHT_ARROW",
             "type": "Number",
@@ -6975,7 +6988,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 421,
+            "line": 429,
             "itemtype": "property",
             "name": "SHIFT",
             "type": "Number",
@@ -6986,7 +6999,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 426,
+            "line": 434,
             "itemtype": "property",
             "name": "TAB",
             "type": "Number",
@@ -6997,7 +7010,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 431,
+            "line": 439,
             "itemtype": "property",
             "name": "UP_ARROW",
             "type": "Number",
@@ -7008,7 +7021,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 438,
+            "line": 446,
             "itemtype": "property",
             "name": "BLEND",
             "type": "String",
@@ -7020,7 +7033,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 444,
+            "line": 452,
             "itemtype": "property",
             "name": "REMOVE",
             "type": "String",
@@ -7032,7 +7045,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 450,
+            "line": 458,
             "itemtype": "property",
             "name": "ADD",
             "type": "String",
@@ -7044,7 +7057,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 458,
+            "line": 466,
             "itemtype": "property",
             "name": "DARKEST",
             "type": "String",
@@ -7055,7 +7068,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 463,
+            "line": 471,
             "itemtype": "property",
             "name": "LIGHTEST",
             "type": "String",
@@ -7067,7 +7080,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 469,
+            "line": 477,
             "itemtype": "property",
             "name": "DIFFERENCE",
             "type": "String",
@@ -7078,7 +7091,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 474,
+            "line": 482,
             "itemtype": "property",
             "name": "SUBTRACT",
             "type": "String",
@@ -7089,7 +7102,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 479,
+            "line": 487,
             "itemtype": "property",
             "name": "EXCLUSION",
             "type": "String",
@@ -7100,7 +7113,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 484,
+            "line": 492,
             "itemtype": "property",
             "name": "MULTIPLY",
             "type": "String",
@@ -7111,7 +7124,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 489,
+            "line": 497,
             "itemtype": "property",
             "name": "SCREEN",
             "type": "String",
@@ -7122,7 +7135,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 494,
+            "line": 502,
             "itemtype": "property",
             "name": "REPLACE",
             "type": "String",
@@ -7134,7 +7147,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 500,
+            "line": 508,
             "itemtype": "property",
             "name": "OVERLAY",
             "type": "String",
@@ -7145,7 +7158,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 505,
+            "line": 513,
             "itemtype": "property",
             "name": "HARD_LIGHT",
             "type": "String",
@@ -7156,7 +7169,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 510,
+            "line": 518,
             "itemtype": "property",
             "name": "SOFT_LIGHT",
             "type": "String",
@@ -7167,7 +7180,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 515,
+            "line": 523,
             "itemtype": "property",
             "name": "DODGE",
             "type": "String",
@@ -7179,7 +7192,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 521,
+            "line": 529,
             "itemtype": "property",
             "name": "BURN",
             "type": "String",
@@ -7191,7 +7204,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 529,
+            "line": 537,
             "itemtype": "property",
             "name": "THRESHOLD",
             "type": "String",
@@ -7202,7 +7215,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 534,
+            "line": 542,
             "itemtype": "property",
             "name": "GRAY",
             "type": "String",
@@ -7213,7 +7226,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 539,
+            "line": 547,
             "itemtype": "property",
             "name": "OPAQUE",
             "type": "String",
@@ -7224,7 +7237,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 544,
+            "line": 552,
             "itemtype": "property",
             "name": "INVERT",
             "type": "String",
@@ -7235,7 +7248,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 549,
+            "line": 557,
             "itemtype": "property",
             "name": "POSTERIZE",
             "type": "String",
@@ -7246,7 +7259,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 554,
+            "line": 562,
             "itemtype": "property",
             "name": "DILATE",
             "type": "String",
@@ -7257,7 +7270,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 559,
+            "line": 567,
             "itemtype": "property",
             "name": "ERODE",
             "type": "String",
@@ -7268,7 +7281,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 564,
+            "line": 572,
             "itemtype": "property",
             "name": "BLUR",
             "type": "String",
@@ -7279,7 +7292,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 571,
+            "line": 579,
             "itemtype": "property",
             "name": "NORMAL",
             "type": "String",
@@ -7290,7 +7303,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 576,
+            "line": 584,
             "itemtype": "property",
             "name": "ITALIC",
             "type": "String",
@@ -7301,7 +7314,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 581,
+            "line": 589,
             "itemtype": "property",
             "name": "BOLD",
             "type": "String",
@@ -7312,7 +7325,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 586,
+            "line": 594,
             "itemtype": "property",
             "name": "BOLDITALIC",
             "type": "String",
@@ -7323,7 +7336,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 598,
+            "line": 606,
             "itemtype": "property",
             "name": "LINEAR",
             "type": "String",
@@ -7334,7 +7347,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 603,
+            "line": 611,
             "itemtype": "property",
             "name": "QUADRATIC",
             "type": "String",
@@ -7345,7 +7358,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 608,
+            "line": 616,
             "itemtype": "property",
             "name": "BEZIER",
             "type": "String",
@@ -7356,7 +7369,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 613,
+            "line": 621,
             "itemtype": "property",
             "name": "CURVE",
             "type": "String",
@@ -7367,7 +7380,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 620,
+            "line": 628,
             "itemtype": "property",
             "name": "STROKE",
             "type": "String",
@@ -7378,7 +7391,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 625,
+            "line": 633,
             "itemtype": "property",
             "name": "FILL",
             "type": "String",
@@ -7389,7 +7402,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 630,
+            "line": 638,
             "itemtype": "property",
             "name": "TEXTURE",
             "type": "String",
@@ -7400,7 +7413,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 635,
+            "line": 643,
             "itemtype": "property",
             "name": "IMMEDIATE",
             "type": "String",
@@ -7411,7 +7424,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 643,
+            "line": 651,
             "itemtype": "property",
             "name": "IMAGE",
             "type": "String",
@@ -7422,7 +7435,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 651,
+            "line": 659,
             "itemtype": "property",
             "name": "NEAREST",
             "type": "String",
@@ -7433,7 +7446,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 656,
+            "line": 664,
             "itemtype": "property",
             "name": "REPEAT",
             "type": "String",
@@ -7444,7 +7457,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 661,
+            "line": 669,
             "itemtype": "property",
             "name": "CLAMP",
             "type": "String",
@@ -7455,7 +7468,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 666,
+            "line": 674,
             "itemtype": "property",
             "name": "MIRROR",
             "type": "String",
@@ -7466,7 +7479,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 673,
+            "line": 681,
             "itemtype": "property",
             "name": "LANDSCAPE",
             "type": "String",
@@ -7477,7 +7490,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 678,
+            "line": 686,
             "itemtype": "property",
             "name": "PORTRAIT",
             "type": "String",
@@ -7488,7 +7501,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 688,
+            "line": 696,
             "itemtype": "property",
             "name": "GRID",
             "type": "String",
@@ -7499,7 +7512,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 694,
+            "line": 702,
             "itemtype": "property",
             "name": "AXES",
             "type": "String",
@@ -7510,7 +7523,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 700,
+            "line": 708,
             "itemtype": "property",
             "name": "LABEL",
             "type": "String",
@@ -7521,7 +7534,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 705,
+            "line": 713,
             "itemtype": "property",
             "name": "FALLBACK",
             "type": "String",
@@ -7752,6 +7765,14 @@
             "description": "<p>The <a href=\"#/p5/windowResized\">windowResized()</a> function is called once\nevery time the browser window is resized. This is a good place to resize the\ncanvas or do any other adjustments to accommodate the new window size.</p>\n",
             "itemtype": "method",
             "name": "windowResized",
+            "params": [
+                {
+                    "name": "event",
+                    "description": "<p>optional Event callback argument.</p>\n",
+                    "type": "Object",
+                    "optional": true
+                }
+            ],
             "example": [
                 "\n<div class=\"norender\"><code>\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</code></div>"
             ],
@@ -7762,7 +7783,7 @@
         },
         {
             "file": "src/core/environment.js",
-            "line": 475,
+            "line": 476,
             "description": "<p>System variable that stores the width of the drawing canvas. This value\nis set by the first parameter of the <a href=\"#/p5/createCanvas\">createCanvas()</a> function.\nFor example, the function call createCanvas(320, 240) sets the width\nvariable to the value 320. The value of width defaults to 100 if\n<a href=\"#/p5/createCanvas\">createCanvas()</a> is not used in a program.</p>\n",
             "itemtype": "property",
             "name": "width",
@@ -7774,7 +7795,7 @@
         },
         {
             "file": "src/core/environment.js",
-            "line": 487,
+            "line": 488,
             "description": "<p>System variable that stores the height of the drawing canvas. This value\nis set by the second parameter of the <a href=\"#/p5/createCanvas\">createCanvas()</a> function. For\nexample, the function call createCanvas(320, 240) sets the height\nvariable to the value 240. The value of height defaults to 100 if\n<a href=\"#/p5/createCanvas\">createCanvas()</a> is not used in a program.</p>\n",
             "itemtype": "property",
             "name": "height",
@@ -7786,7 +7807,7 @@
         },
         {
             "file": "src/core/environment.js",
-            "line": 499,
+            "line": 500,
             "description": "<p>If argument is given, sets the sketch to fullscreen or not based on the\nvalue of the argument. If no argument is given, returns the current\nfullscreen state. Note that due to browser restrictions this can only\nbe called on user input, for example, on mouse press like the example\nbelow.</p>\n",
             "itemtype": "method",
             "name": "fullscreen",
@@ -7812,7 +7833,7 @@
         },
         {
             "file": "src/core/environment.js",
-            "line": 549,
+            "line": 550,
             "description": "<p>Sets the pixel scaling for high pixel density displays. By default\npixel density is set to match display density, call pixelDensity(1)\nto turn this off. Calling <a href=\"#/p5/pixelDensity\">pixelDensity()</a> with no arguments returns\nthe current pixel density of the sketch.</p>\n",
             "itemtype": "method",
             "name": "pixelDensity",
@@ -7826,7 +7847,7 @@
             "submodule": "Environment",
             "overloads": [
                 {
-                    "line": 549,
+                    "line": 550,
                     "params": [
                         {
                             "name": "val",
@@ -7837,7 +7858,7 @@
                     "chainable": 1
                 },
                 {
-                    "line": 585,
+                    "line": 586,
                     "params": [],
                     "return": {
                         "description": "current pixel density of the sketch",
@@ -7848,7 +7869,7 @@
         },
         {
             "file": "src/core/environment.js",
-            "line": 604,
+            "line": 605,
             "description": "<p>Returns the pixel density of the current display the sketch is running on.</p>\n",
             "itemtype": "method",
             "name": "displayDensity",
@@ -7866,7 +7887,7 @@
         },
         {
             "file": "src/core/environment.js",
-            "line": 659,
+            "line": 660,
             "description": "<p>Gets the current URL. Note: when using the\np5 Editor, this will return an empty object because the sketch\nis embedded in an iframe. It will work correctly if you view the\nsketch using sketch the edtior's present or share URLs.</p>\n",
             "itemtype": "method",
             "name": "getURL",
@@ -7884,7 +7905,7 @@
         },
         {
             "file": "src/core/environment.js",
-            "line": 690,
+            "line": 691,
             "description": "<p>Gets the current URL path as an array. Note: when using the\np5 Editor, this will return an empty object because the sketch\nis embedded in an iframe. It will work correctly if you view the\nsketch using sketch the edtior's present or share URLs.</p>\n",
             "itemtype": "method",
             "name": "getURLPath",
@@ -7902,7 +7923,7 @@
         },
         {
             "file": "src/core/environment.js",
-            "line": 712,
+            "line": 713,
             "description": "<p>Gets the current URL params as an Object. Note: when using the\np5 Editor, this will return an empty object because the sketch\nis embedded in an iframe. It will work correctly if you view the\nsketch using sketch the edtior's present or share URLs.</p>\n",
             "itemtype": "method",
             "name": "getURLParams",
@@ -8479,7 +8500,7 @@
         },
         {
             "file": "src/core/p5.Renderer.js",
-            "line": 365,
+            "line": 344,
             "description": "<p>Helper fxn to check font type (system or otf)</p>\n",
             "class": "p5.Renderer",
             "module": "Rendering",
@@ -8487,7 +8508,7 @@
         },
         {
             "file": "src/core/p5.Renderer.js",
-            "line": 417,
+            "line": 396,
             "description": "<p>Helper fxn to measure ascent and descent.\nAdapted from <a href=\"http://stackoverflow.com/a/25355178\">http://stackoverflow.com/a/25355178</a></p>\n",
             "class": "p5.Renderer",
             "module": "Rendering",
@@ -9123,7 +9144,7 @@
         },
         {
             "file": "src/core/transform.js",
-            "line": 167,
+            "line": 168,
             "description": "<p>Replaces the current matrix with the identity matrix.</p>\n",
             "itemtype": "method",
             "name": "resetMatrix",
@@ -9138,7 +9159,7 @@
         },
         {
             "file": "src/core/transform.js",
-            "line": 192,
+            "line": 193,
             "description": "<p>Rotates a shape by the amount specified by the angle parameter. This\nfunction accounts for <a href=\"#/p5/angleMode\">angleMode</a>, so angles\ncan be entered in either RADIANS or DEGREES.</p>\n<p>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 accumulates the effect. For example, calling\nrotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI).\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n<p>Technically, <a href=\"#/p5/rotate\">rotate()</a> multiplies the current transformation matrix\nby a rotation matrix. This function can be further controlled by\nthe <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a>.</p>\n",
             "itemtype": "method",
             "name": "rotate",
@@ -9166,7 +9187,7 @@
         },
         {
             "file": "src/core/transform.js",
-            "line": 231,
+            "line": 232,
             "description": "<p>Rotates a shape around X axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.</p>\n<p>Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n",
             "itemtype": "method",
             "name": "rotateX",
@@ -9188,7 +9209,7 @@
         },
         {
             "file": "src/core/transform.js",
-            "line": 267,
+            "line": 268,
             "description": "<p>Rotates a shape around Y axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.</p>\n<p>Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n",
             "itemtype": "method",
             "name": "rotateY",
@@ -9210,7 +9231,7 @@
         },
         {
             "file": "src/core/transform.js",
-            "line": 303,
+            "line": 304,
             "description": "<p>Rotates a shape around Z axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.</p>\n<p>This method works in WEBGL mode only.</p>\n<p>Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n",
             "itemtype": "method",
             "name": "rotateZ",
@@ -9232,7 +9253,7 @@
         },
         {
             "file": "src/core/transform.js",
-            "line": 341,
+            "line": 342,
             "description": "<p>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%.</p>\n<p>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 <a href=\"#/p5/scale\">scale()</a> is called\nwithin <a href=\"#/p5/draw\">draw()</a>, the transformation is reset when the loop begins again.</p>\n<p>Using this function with the z parameter is only available in WEBGL mode.\nThis function can be further controlled with <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a>.</p>\n",
             "itemtype": "method",
             "name": "scale",
@@ -9246,7 +9267,7 @@
             "submodule": "Transform",
             "overloads": [
                 {
-                    "line": 341,
+                    "line": 342,
                     "params": [
                         {
                             "name": "s",
@@ -9269,7 +9290,7 @@
                     "chainable": 1
                 },
                 {
-                    "line": 385,
+                    "line": 386,
                     "params": [
                         {
                             "name": "scales",
@@ -9283,7 +9304,7 @@
         },
         {
             "file": "src/core/transform.js",
-            "line": 415,
+            "line": 416,
             "description": "<p>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.</p>\n<p>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 <a href=\"#/p5/shearX\">shearX()</a> is called within the <a href=\"#/p5/draw\">draw()</a>,\nthe transformation is reset when the loop begins again.</p>\n<p>Technically, <a href=\"#/p5/shearX\">shearX()</a> multiplies the current\ntransformation matrix by a rotation matrix. This function can be further\ncontrolled by the <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions.</p>\n",
             "itemtype": "method",
             "name": "shearX",
@@ -9305,7 +9326,7 @@
         },
         {
             "file": "src/core/transform.js",
-            "line": 454,
+            "line": 455,
             "description": "<p>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.</p>\n<p>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\n<a href=\"#/p5/shearY\">shearY()</a> is called within the <a href=\"#/p5/draw\">draw()</a>, the transformation is reset when\nthe loop begins again.</p>\n<p>Technically, <a href=\"#/p5/shearY\">shearY()</a> multiplies the current transformation matrix by a\nrotation matrix. This function can be further controlled by the\n<a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions.</p>\n",
             "itemtype": "method",
             "name": "shearY",
@@ -9327,7 +9348,7 @@
         },
         {
             "file": "src/core/transform.js",
-            "line": 493,
+            "line": 494,
             "description": "<p>Specifies an amount to displace objects within the display window.\nThe x parameter specifies left/right translation, the y parameter\nspecifies up/down translation.</p>\n<p>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 <a href=\"#/p5/translate\">translate()</a> is called within <a href=\"#/p5/draw\">draw()</a>, the\ntransformation is reset when the loop begins again. This function can be\nfurther controlled by using <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a>.</p>\n",
             "itemtype": "method",
             "name": "translate",
@@ -9341,7 +9362,7 @@
             "submodule": "Transform",
             "overloads": [
                 {
-                    "line": 493,
+                    "line": 494,
                     "params": [
                         {
                             "name": "x",
@@ -9363,7 +9384,7 @@
                     "chainable": 1
                 },
                 {
-                    "line": 546,
+                    "line": 547,
                     "params": [
                         {
                             "name": "vector",
@@ -11043,7 +11064,7 @@
                 "type": "String"
             },
             "example": [
-                "\n<div><code class='norender'>\nlet myDiv = createDiv('I like pandas.');\nmyDiv.style('font-size', '18px');\nmyDiv.style('color', '#ff0000');\n</code></div>\n<div><code class='norender'>\nlet col = color(25, 23, 200, 50);\nlet button = createButton('button');\nbutton.style('background-color', col);\nbutton.position(10, 10);\n</code></div>\n<div><code class='norender'>\nlet myDiv;\nfunction setup() {\n  background(200);\n  myDiv = createDiv('I like gray.');\n  myDiv.position(20, 20);\n}\n\nfunction draw() {\n  myDiv.style('font-size', mouseX + 'px');\n}\n</code></div>"
+                "\n<div><code class='norender'>\nlet myDiv = createDiv('I like pandas.');\nmyDiv.style('font-size', '18px');\nmyDiv.style('color', '#ff0000');\nmyDiv.position(0, 0);\n</code></div>\n<div><code class='norender'>\nlet col = color(25, 23, 200, 50);\nlet button = createButton('button');\nbutton.style('background-color', col);\nbutton.position(0, 0);\n</code></div>\n<div><code class='norender'>\nlet myDiv, fontSize;\nfunction setup() {\n  background(200);\n  myDiv = createDiv('I like gray.');\n  myDiv.position(0, 0);\n  myDiv.style('z-index', 10);\n}\n\nfunction draw() {\n  fontSize = min(mouseX, 90);\n  myDiv.style('font-size', fontSize + 'px');\n}\n</code></div>"
             ],
             "class": "p5.Element",
             "module": "DOM",
@@ -11064,7 +11085,7 @@
                     }
                 },
                 {
-                    "line": 1877,
+                    "line": 1880,
                     "params": [
                         {
                             "name": "property",
@@ -11087,7 +11108,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 1934,
+            "line": 1937,
             "description": "<p>Adds a new attribute or changes the value of an existing attribute\n on the specified element. If no value is specified, returns the\n value of the given attribute, or null if attribute is not set.</p>\n",
             "itemtype": "method",
             "name": "attribute",
@@ -11103,7 +11124,7 @@
             "submodule": "DOM",
             "overloads": [
                 {
-                    "line": 1934,
+                    "line": 1937,
                     "params": [],
                     "return": {
                         "description": "value of attribute",
@@ -11111,7 +11132,7 @@
                     }
                 },
                 {
-                    "line": 1949,
+                    "line": 1952,
                     "params": [
                         {
                             "name": "attr",
@@ -11130,7 +11151,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 1978,
+            "line": 1981,
             "description": "<p>Removes an attribute on the specified element.</p>\n",
             "itemtype": "method",
             "name": "removeAttribute",
@@ -11151,7 +11172,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2023,
+            "line": 2026,
             "description": "<p>Either returns the value of the element if no arguments\ngiven, or sets the value of the element.</p>\n",
             "itemtype": "method",
             "name": "value",
@@ -11167,7 +11188,7 @@
             "submodule": "DOM",
             "overloads": [
                 {
-                    "line": 2023,
+                    "line": 2026,
                     "params": [],
                     "return": {
                         "description": "value of the element",
@@ -11175,7 +11196,7 @@
                     }
                 },
                 {
-                    "line": 2053,
+                    "line": 2056,
                     "params": [
                         {
                             "name": "value",
@@ -11189,7 +11210,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2069,
+            "line": 2072,
             "description": "<p>Shows the current element. Essentially, setting display:block for the style.</p>\n",
             "itemtype": "method",
             "name": "show",
@@ -11203,7 +11224,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2087,
+            "line": 2090,
             "description": "<p>Hides the current element. Essentially, setting display:none for the style.</p>\n",
             "itemtype": "method",
             "name": "hide",
@@ -11217,7 +11238,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2103,
+            "line": 2106,
             "description": "<p>Sets the width and height of the element. AUTO can be used to\n only adjust one dimension at a time. If no arguments are given, it\n returns the width and height of the element in an object. In case of\n elements which need to be loaded, such as images, it is recommended\n to call the function after the element has finished loading.</p>\n",
             "itemtype": "method",
             "name": "size",
@@ -11233,7 +11254,7 @@
             "submodule": "DOM",
             "overloads": [
                 {
-                    "line": 2103,
+                    "line": 2106,
                     "params": [],
                     "return": {
                         "description": "the width and height of the element in an object",
@@ -11241,7 +11262,7 @@
                     }
                 },
                 {
-                    "line": 2127,
+                    "line": 2130,
                     "params": [
                         {
                             "name": "w",
@@ -11261,7 +11282,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2184,
+            "line": 2187,
             "description": "<p>Removes the element, stops all media streams, and deregisters all listeners.</p>\n",
             "itemtype": "method",
             "name": "remove",
@@ -11274,7 +11295,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2222,
+            "line": 2225,
             "description": "<p>Registers a callback that gets called every time a file that is\ndropped on the element has been loaded.\np5 will load every dropped file into memory and pass it as a p5.File object to the callback.\nMultiple files dropped at the same time will result in multiple calls to the callback.</p>\n<p>You can optionally pass a second callback which will be registered to the raw\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/Events/drop\">drop</a> event.\nThe callback will thus be provided the original\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/DragEvent\">DragEvent</a>.\nDropping multiple files at the same time will trigger the second callback once per drop,\nwhereas the first callback will trigger for each loaded file.</p>\n",
             "itemtype": "method",
             "name": "drop",
@@ -11302,7 +11323,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2354,
+            "line": 2357,
             "description": "<p>Path to the media element source.</p>\n",
             "itemtype": "property",
             "name": "src",
@@ -11319,7 +11340,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2420,
+            "line": 2423,
             "description": "<p>Play an HTML5 media element.</p>\n",
             "itemtype": "method",
             "name": "play",
@@ -11333,7 +11354,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2484,
+            "line": 2487,
             "description": "<p>Stops an HTML5 media element (sets current time to zero).</p>\n",
             "itemtype": "method",
             "name": "stop",
@@ -11347,7 +11368,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2548,
+            "line": 2551,
             "description": "<p>Pauses an HTML5 media element.</p>\n",
             "itemtype": "method",
             "name": "pause",
@@ -11361,7 +11382,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2610,
+            "line": 2613,
             "description": "<p>Set 'loop' to true for an HTML5 media element, and starts playing.</p>\n",
             "itemtype": "method",
             "name": "loop",
@@ -11375,7 +11396,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2666,
+            "line": 2669,
             "description": "<p>Set 'loop' to false for an HTML5 media element. Element will stop\nwhen it reaches the end.</p>\n",
             "itemtype": "method",
             "name": "noLoop",
@@ -11389,7 +11410,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2732,
+            "line": 2735,
             "description": "<p>Set HTML5 media element to autoplay or not. If no argument is specified, by\ndefault it will autoplay.</p>\n",
             "itemtype": "method",
             "name": "autoplay",
@@ -11411,7 +11432,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2799,
+            "line": 2802,
             "description": "<p>Sets volume for this HTML5 media element. If no argument is given,\nreturns the current volume.</p>\n",
             "itemtype": "method",
             "name": "volume",
@@ -11427,7 +11448,7 @@
             "submodule": "DOM",
             "overloads": [
                 {
-                    "line": 2799,
+                    "line": 2802,
                     "params": [],
                     "return": {
                         "description": "current volume",
@@ -11435,7 +11456,7 @@
                     }
                 },
                 {
-                    "line": 2872,
+                    "line": 2875,
                     "params": [
                         {
                             "name": "val",
@@ -11449,7 +11470,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2885,
+            "line": 2888,
             "description": "<p>If no arguments are given, returns the current playback speed of the\nelement. The speed parameter sets the speed where 2.0 will play the\nelement twice as fast, 0.5 will play at half the speed, and -1 will play\nthe element in normal speed in reverse.(Note that not all browsers support\nbackward playback and even if they do, playback might not be smooth.)</p>\n",
             "itemtype": "method",
             "name": "speed",
@@ -11465,7 +11486,7 @@
             "submodule": "DOM",
             "overloads": [
                 {
-                    "line": 2885,
+                    "line": 2888,
                     "params": [],
                     "return": {
                         "description": "current playback speed of the element",
@@ -11473,7 +11494,7 @@
                     }
                 },
                 {
-                    "line": 2957,
+                    "line": 2960,
                     "params": [
                         {
                             "name": "speed",
@@ -11487,7 +11508,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2974,
+            "line": 2977,
             "description": "<p>If no arguments are given, returns the current time of the element.\nIf an argument is given the current time of the element is set to it.</p>\n",
             "itemtype": "method",
             "name": "time",
@@ -11503,7 +11524,7 @@
             "submodule": "DOM",
             "overloads": [
                 {
-                    "line": 2974,
+                    "line": 2977,
                     "params": [],
                     "return": {
                         "description": "current time (in seconds)",
@@ -11511,7 +11532,7 @@
                     }
                 },
                 {
-                    "line": 3019,
+                    "line": 3022,
                     "params": [
                         {
                             "name": "time",
@@ -11525,7 +11546,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3033,
+            "line": 3036,
             "description": "<p>Returns the duration of the HTML5 media element.</p>\n",
             "itemtype": "method",
             "name": "duration",
@@ -11542,7 +11563,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3155,
+            "line": 3158,
             "description": "<p>Schedule an event to be called when the audio or video\nelement reaches the end. If the element is looping,\nthis will not be called. The element is passed in\nas the argument to the onended callback.</p>\n",
             "itemtype": "method",
             "name": "onended",
@@ -11563,14 +11584,14 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3186,
+            "line": 3189,
             "class": "p5.MediaElement",
             "module": "DOM",
             "submodule": "DOM"
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3188,
+            "line": 3191,
             "description": "<p>Send the audio output of this element to a specified audioNode or\np5.sound object. If no element is provided, connects to p5's main\noutput. That connection is established when this method is first called.\nAll connections are removed by the .disconnect() method.</p>\n<p>This method is meant to be used with the p5.sound.js addon library.</p>\n",
             "itemtype": "method",
             "name": "connect",
@@ -11587,7 +11608,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3237,
+            "line": 3240,
             "description": "<p>Disconnect all Web Audio routing, including to main output.\nThis is useful if you want to re-route the output through\naudio effects, for example.</p>\n",
             "itemtype": "method",
             "name": "disconnect",
@@ -11597,14 +11618,14 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3252,
+            "line": 3255,
             "class": "p5.MediaElement",
             "module": "DOM",
             "submodule": "DOM"
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3254,
+            "line": 3257,
             "description": "<p>Show the default MediaElement controls, as determined by the web browser.</p>\n",
             "itemtype": "method",
             "name": "showControls",
@@ -11617,7 +11638,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3285,
+            "line": 3288,
             "description": "<p>Hide the default mediaElement controls.</p>\n",
             "itemtype": "method",
             "name": "hideControls",
@@ -11630,14 +11651,14 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3314,
+            "line": 3317,
             "class": "p5.MediaElement",
             "module": "DOM",
             "submodule": "DOM"
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3325,
+            "line": 3328,
             "description": "<p>Schedule events to trigger every time a MediaElement\n(audio/video) reaches a playback cue point.</p>\n<p>Accepts a callback function, a time (in seconds) at which to trigger\nthe callback, and an optional parameter for the callback.</p>\n<p>Time will be passed as the first parameter to the callback function,\nand param will be the second parameter.</p>\n",
             "itemtype": "method",
             "name": "addCue",
@@ -11672,7 +11693,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3388,
+            "line": 3391,
             "description": "<p>Remove a callback based on its ID. The ID is returned by the\naddCue method.</p>\n",
             "itemtype": "method",
             "name": "removeCue",
@@ -11692,7 +11713,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3430,
+            "line": 3433,
             "description": "<p>Remove all of the callbacks that had originally been scheduled\nvia the addCue method.</p>\n",
             "itemtype": "method",
             "name": "clearCues",
@@ -11712,7 +11733,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3496,
+            "line": 3499,
             "description": "<p>Underlying File object. All normal File methods can be called on this.</p>\n",
             "itemtype": "property",
             "name": "file",
@@ -11722,7 +11743,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3508,
+            "line": 3511,
             "description": "<p>File type (image, text, etc.)</p>\n",
             "itemtype": "property",
             "name": "type",
@@ -11732,7 +11753,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3514,
+            "line": 3517,
             "description": "<p>File subtype (usually the file extension jpg, png, xml, etc.)</p>\n",
             "itemtype": "property",
             "name": "subtype",
@@ -11742,7 +11763,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3520,
+            "line": 3523,
             "description": "<p>File name</p>\n",
             "itemtype": "property",
             "name": "name",
@@ -11752,7 +11773,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3526,
+            "line": 3529,
             "description": "<p>File size</p>\n",
             "itemtype": "property",
             "name": "size",
@@ -11762,7 +11783,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3533,
+            "line": 3536,
             "description": "<p>URL string containing either image data, the text contents of the file or\na parsed object if file is JSON and p5.XML if XML</p>\n",
             "itemtype": "property",
             "name": "data",
@@ -12116,6 +12137,14 @@
             "description": "<p>The <a href=\"#/p5/keyPressed\">keyPressed()</a> function is called once every time a key is pressed. The\nkeyCode for the key that was pressed is stored in the <a href=\"#/p5/keyCode\">keyCode</a> variable.</p>\n<p>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.</p>\n<p>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 <a href=\"#/p5/keyTyped\">keyTyped()</a> to read the key variable, in which the\ncase of the variable will be distinguished.</p>\n<p>Because of how operating systems handle key repeats, holding down a key\nmay cause multiple calls to <a href=\"#/p5/keyTyped\">keyTyped()</a> (and <a href=\"#/p5/keyReleased\">keyReleased()</a> as well). The\nrate of repeat is set by the operating system and how each computer is\nconfigured.<br><br>\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.</p>\n",
             "itemtype": "method",
             "name": "keyPressed",
+            "params": [
+                {
+                    "name": "event",
+                    "description": "<p>optional KeyboardEvent callback argument.</p>\n",
+                    "type": "Object",
+                    "optional": true
+                }
+            ],
             "example": [
                 "\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyPressed() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyPressed() {\n  if (keyCode === LEFT_ARROW) {\n    value = 255;\n  } else if (keyCode === RIGHT_ARROW) {\n    value = 0;\n  }\n}\n</code>\n</div>\n<div class=\"norender\">\n<code>\nfunction keyPressed() {\n  // Do something\n  return false; // prevent any default behaviour\n}\n</code>\n</div>"
             ],
@@ -12126,10 +12155,18 @@
         },
         {
             "file": "src/events/keyboard.js",
-            "line": 189,
+            "line": 190,
             "description": "<p>The <a href=\"#/p5/keyReleased\">keyReleased()</a> function is called once every time a key is released.\nSee <a href=\"#/p5/key\">key</a> and <a href=\"#/p5/keyCode\">keyCode</a> for more information.<br><br>\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.</p>\n",
             "itemtype": "method",
             "name": "keyReleased",
+            "params": [
+                {
+                    "name": "event",
+                    "description": "<p>optional KeyboardEvent callback argument.</p>\n",
+                    "type": "Object",
+                    "optional": true
+                }
+            ],
             "example": [
                 "\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyReleased() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n  return false; // prevent any default behavior\n}\n</code>\n</div>"
             ],
@@ -12140,10 +12177,18 @@
         },
         {
             "file": "src/events/keyboard.js",
-            "line": 241,
+            "line": 243,
             "description": "<p>The <a href=\"#/p5/keyTyped\">keyTyped()</a> 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 <a href=\"#/p5/keyPressed\">keyPressed()</a> function instead.\nThe most recent key typed will be stored in the key variable.</p>\n<p>Because of how operating systems handle key repeats, holding down a key\nwill cause multiple calls to <a href=\"#/p5/keyTyped\">keyTyped()</a> (and <a href=\"#/p5/keyReleased\">keyReleased()</a> as well). The\nrate of repeat is set by the operating system and how each computer is\nconfigured.<br><br>\nBrowsers may have different default behaviors attached to various key\nevents. To prevent any default behavior for this event, add \"return false\"\nto the end of the method.</p>\n",
             "itemtype": "method",
             "name": "keyTyped",
+            "params": [
+                {
+                    "name": "event",
+                    "description": "<p>optional KeyboardEvent callback argument.</p>\n",
+                    "type": "Object",
+                    "optional": true
+                }
+            ],
             "example": [
                 "\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyTyped() {\n  if (key === 'a') {\n    value = 255;\n  } else if (key === 'b') {\n    value = 0;\n  }\n  // uncomment to prevent any default behavior\n  // return false;\n}\n</code>\n</div>"
             ],
@@ -12154,7 +12199,7 @@
         },
         {
             "file": "src/events/keyboard.js",
-            "line": 295,
+            "line": 298,
             "description": "<p>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.</p>\n",
             "class": "p5",
             "module": "Events",
@@ -12162,7 +12207,7 @@
         },
         {
             "file": "src/events/keyboard.js",
-            "line": 305,
+            "line": 308,
             "description": "<p>The <a href=\"#/p5/keyIsDown\">keyIsDown()</a> 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 <a href=\"#/p5/keyCode\">keyCode</a> names listed\n<a href=\"http://p5js.org/reference/#p5/keyCode\">here</a>.</p>\n",
             "itemtype": "method",
             "name": "keyIsDown",
@@ -12822,7 +12867,7 @@
         },
         {
             "file": "src/image/loading_displaying.js",
-            "line": 153,
+            "line": 162,
             "description": "<p>Helper function for loading GIF-based images</p>\n",
             "class": "p5",
             "module": "Image",
@@ -12830,7 +12875,7 @@
         },
         {
             "file": "src/image/loading_displaying.js",
-            "line": 260,
+            "line": 269,
             "description": "<p>Draw an image to the p5.js canvas.</p>\n<p>This function can be used with different numbers of parameters. The\nsimplest use requires only three parameters: img, x, and y—where (x, y) is\nthe position of the image. Two more parameters can optionally be added to\nspecify the width and height of the image.</p>\n<p>This function can also be used with all eight Number parameters. To\ndifferentiate between all these parameters, p5.js uses the language of\n\"destination rectangle\" (which corresponds to \"dx\", \"dy\", etc.) and \"source\nimage\" (which corresponds to \"sx\", \"sy\", etc.) below. Specifying the\n\"source image\" dimensions can be useful when you want to display a\nsubsection of the source image instead of the whole thing. Here's a diagram\nto explain further:\n<img src=\"assets/drawImage.png\"></img></p>\n",
             "itemtype": "method",
             "name": "image",
@@ -12843,7 +12888,7 @@
             "submodule": "Loading & Displaying",
             "overloads": [
                 {
-                    "line": 260,
+                    "line": 269,
                     "params": [
                         {
                             "name": "img",
@@ -12875,7 +12920,7 @@
                     ]
                 },
                 {
-                    "line": 347,
+                    "line": 356,
                     "params": [
                         {
                             "name": "img",
@@ -12930,7 +12975,7 @@
         },
         {
             "file": "src/image/loading_displaying.js",
-            "line": 430,
+            "line": 439,
             "description": "<p>Sets the fill value for displaying images. Images can be tinted to\nspecified colors or made transparent by including an alpha value.</p>\n<p>To apply transparency to an image without affecting its color, use\nwhite as the tint color and specify an alpha value. For instance,\ntint(255, 128) will make an image 50% transparent (assuming the default\nalpha range of 0-255, which can be changed with <a href=\"#/p5/colorMode\">colorMode()</a>).</p>\n<p>The value for the gray parameter must be less than or equal to the current\nmaximum value as specified by <a href=\"#/p5/colorMode\">colorMode()</a>. The default maximum value is\n255.</p>\n",
             "itemtype": "method",
             "name": "tint",
@@ -12943,7 +12988,7 @@
             "submodule": "Loading & Displaying",
             "overloads": [
                 {
-                    "line": 430,
+                    "line": 439,
                     "params": [
                         {
                             "name": "v1",
@@ -12969,7 +13014,7 @@
                     ]
                 },
                 {
-                    "line": 501,
+                    "line": 510,
                     "params": [
                         {
                             "name": "value",
@@ -12979,7 +13024,7 @@
                     ]
                 },
                 {
-                    "line": 506,
+                    "line": 515,
                     "params": [
                         {
                             "name": "gray",
@@ -12995,7 +13040,7 @@
                     ]
                 },
                 {
-                    "line": 512,
+                    "line": 521,
                     "params": [
                         {
                             "name": "values",
@@ -13005,7 +13050,7 @@
                     ]
                 },
                 {
-                    "line": 518,
+                    "line": 527,
                     "params": [
                         {
                             "name": "color",
@@ -13018,7 +13063,7 @@
         },
         {
             "file": "src/image/loading_displaying.js",
-            "line": 528,
+            "line": 537,
             "description": "<p>Removes the current fill value for displaying images and reverts to\ndisplaying images with their original hues.</p>\n",
             "itemtype": "method",
             "name": "noTint",
@@ -13032,7 +13077,7 @@
         },
         {
             "file": "src/image/loading_displaying.js",
-            "line": 592,
+            "line": 601,
             "description": "<p>Set image mode. Modifies the location from which images are drawn by\nchanging the way in which parameters given to <a href=\"#/p5/image\">image()</a> are interpreted.\nThe default mode is imageMode(CORNER), which interprets the second and\nthird parameters of <a href=\"#/p5/image\">image()</a> as the upper-left corner of the image. If\ntwo additional parameters are specified, they are used to set the image's\nwidth and height.</p>\n<p>imageMode(CORNERS) interprets the second and third parameters of <a href=\"#/p5/image\">image()</a>\nas the location of one corner, and the fourth and fifth parameters as the\nopposite corner.</p>\n<p>imageMode(CENTER) interprets the second and third parameters of <a href=\"#/p5/image\">image()</a>\nas the image's center point. If two additional parameters are specified,\nthey are used to set the image's width and height.</p>\n",
             "itemtype": "method",
             "name": "imageMode",
@@ -19608,6 +19653,12 @@
                             "name": "ns",
                             "description": "<p>values to parse</p>\n",
                             "type": "Array"
+                        },
+                        {
+                            "name": "radix",
+                            "description": "",
+                            "type": "Integer",
+                            "optional": true
                         }
                     ],
                     "return": {
@@ -19619,7 +19670,7 @@
         },
         {
             "file": "src/utilities/conversion.js",
-            "line": 87,
+            "line": 88,
             "description": "<p>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.</p>\n",
             "itemtype": "method",
             "name": "str",
@@ -19643,7 +19694,7 @@
         },
         {
             "file": "src/utilities/conversion.js",
-            "line": 113,
+            "line": 114,
             "description": "<p>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.</p>\n",
             "itemtype": "method",
             "name": "boolean",
@@ -19667,7 +19718,7 @@
         },
         {
             "file": "src/utilities/conversion.js",
-            "line": 145,
+            "line": 146,
             "description": "<p>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.</p>\n",
             "itemtype": "method",
             "name": "byte",
@@ -19683,7 +19734,7 @@
             "submodule": "Conversion",
             "overloads": [
                 {
-                    "line": 145,
+                    "line": 146,
                     "params": [
                         {
                             "name": "n",
@@ -19697,7 +19748,7 @@
                     }
                 },
                 {
-                    "line": 167,
+                    "line": 168,
                     "params": [
                         {
                             "name": "ns",
@@ -19714,7 +19765,7 @@
         },
         {
             "file": "src/utilities/conversion.js",
-            "line": 181,
+            "line": 182,
             "description": "<p>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.</p>\n",
             "itemtype": "method",
             "name": "char",
@@ -19730,7 +19781,7 @@
             "submodule": "Conversion",
             "overloads": [
                 {
-                    "line": 181,
+                    "line": 182,
                     "params": [
                         {
                             "name": "n",
@@ -19744,7 +19795,7 @@
                     }
                 },
                 {
-                    "line": 200,
+                    "line": 201,
                     "params": [
                         {
                             "name": "ns",
@@ -19761,7 +19812,7 @@
         },
         {
             "file": "src/utilities/conversion.js",
-            "line": 215,
+            "line": 216,
             "description": "<p>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.</p>\n",
             "itemtype": "method",
             "name": "unchar",
@@ -19777,7 +19828,7 @@
             "submodule": "Conversion",
             "overloads": [
                 {
-                    "line": 215,
+                    "line": 216,
                     "params": [
                         {
                             "name": "n",
@@ -19791,7 +19842,7 @@
                     }
                 },
                 {
-                    "line": 231,
+                    "line": 232,
                     "params": [
                         {
                             "name": "ns",
@@ -19808,7 +19859,7 @@
         },
         {
             "file": "src/utilities/conversion.js",
-            "line": 244,
+            "line": 245,
             "description": "<p>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.</p>\n",
             "itemtype": "method",
             "name": "hex",
@@ -19824,7 +19875,7 @@
             "submodule": "Conversion",
             "overloads": [
                 {
-                    "line": 244,
+                    "line": 245,
                     "params": [
                         {
                             "name": "n",
@@ -19844,7 +19895,7 @@
                     }
                 },
                 {
-                    "line": 264,
+                    "line": 265,
                     "params": [
                         {
                             "name": "ns",
@@ -19867,7 +19918,7 @@
         },
         {
             "file": "src/utilities/conversion.js",
-            "line": 294,
+            "line": 295,
             "description": "<p>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.</p>\n",
             "itemtype": "method",
             "name": "unhex",
@@ -19883,7 +19934,7 @@
             "submodule": "Conversion",
             "overloads": [
                 {
-                    "line": 294,
+                    "line": 295,
                     "params": [
                         {
                             "name": "n",
@@ -19897,7 +19948,7 @@
                     }
                 },
                 {
-                    "line": 310,
+                    "line": 311,
                     "params": [
                         {
                             "name": "ns",
@@ -28091,35 +28142,35 @@
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/shape/2d_primitives.js:231"
+            "line": " src/core/shape/2d_primitives.js:232"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/shape/2d_primitives.js:271"
+            "line": " src/core/shape/2d_primitives.js:275"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/shape/2d_primitives.js:335"
+            "line": " src/core/shape/2d_primitives.js:339"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/shape/2d_primitives.js:396"
+            "line": " src/core/shape/2d_primitives.js:400"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/shape/2d_primitives.js:474"
+            "line": " src/core/shape/2d_primitives.js:478"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/shape/2d_primitives.js:548"
+            "line": " src/core/shape/2d_primitives.js:552"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/shape/2d_primitives.js:614"
+            "line": " src/core/shape/2d_primitives.js:618"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/shape/2d_primitives.js:703"
+            "line": " src/core/shape/2d_primitives.js:707"
         },
         {
             "message": "unknown tag: alt",
@@ -28223,23 +28274,23 @@
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/constants.js:58"
+            "line": " src/core/constants.js:66"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/constants.js:76"
+            "line": " src/core/constants.js:84"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/constants.js:94"
+            "line": " src/core/constants.js:102"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/constants.js:112"
+            "line": " src/core/constants.js:120"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/constants.js:130"
+            "line": " src/core/constants.js:138"
         },
         {
             "message": "unknown tag: alt",
@@ -28291,35 +28342,35 @@
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/environment.js:499"
+            "line": " src/core/environment.js:500"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/environment.js:549"
+            "line": " src/core/environment.js:550"
         },
         {
             "message": "replacing incorrect tag: returns with return",
-            "line": " src/core/environment.js:585"
+            "line": " src/core/environment.js:586"
         },
         {
             "message": "replacing incorrect tag: returns with return",
-            "line": " src/core/environment.js:604"
+            "line": " src/core/environment.js:605"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/environment.js:604"
+            "line": " src/core/environment.js:605"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/environment.js:659"
+            "line": " src/core/environment.js:660"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/environment.js:690"
+            "line": " src/core/environment.js:691"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/environment.js:712"
+            "line": " src/core/environment.js:713"
         },
         {
             "message": "replacing incorrect tag: function with method",
@@ -28551,39 +28602,39 @@
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/transform.js:167"
+            "line": " src/core/transform.js:168"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/transform.js:192"
+            "line": " src/core/transform.js:193"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/transform.js:231"
+            "line": " src/core/transform.js:232"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/transform.js:267"
+            "line": " src/core/transform.js:268"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/transform.js:303"
+            "line": " src/core/transform.js:304"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/transform.js:341"
+            "line": " src/core/transform.js:342"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/transform.js:415"
+            "line": " src/core/transform.js:416"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/transform.js:454"
+            "line": " src/core/transform.js:455"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/transform.js:493"
+            "line": " src/core/transform.js:494"
         },
         {
             "message": "unknown tag: alt",
@@ -28623,11 +28674,11 @@
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/dom/dom.js:2222"
+            "line": " src/dom/dom.js:2225"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/dom/dom.js:2732"
+            "line": " src/dom/dom.js:2735"
         },
         {
             "message": "unknown tag: alt",
@@ -28707,15 +28758,15 @@
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/events/keyboard.js:189"
+            "line": " src/events/keyboard.js:190"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/events/keyboard.js:241"
+            "line": " src/events/keyboard.js:243"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/events/keyboard.js:305"
+            "line": " src/events/keyboard.js:308"
         },
         {
             "message": "unknown tag: alt",
@@ -28835,23 +28886,23 @@
         },
         {
             "message": "replacing incorrect tag: returns with return",
-            "line": " src/image/loading_displaying.js:243"
+            "line": " src/image/loading_displaying.js:252"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/image/loading_displaying.js:260"
+            "line": " src/image/loading_displaying.js:269"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/image/loading_displaying.js:430"
+            "line": " src/image/loading_displaying.js:439"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/image/loading_displaying.js:528"
+            "line": " src/image/loading_displaying.js:537"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/image/loading_displaying.js:592"
+            "line": " src/image/loading_displaying.js:601"
         },
         {
             "message": "unknown tag: alt",
@@ -29779,11 +29830,11 @@
         },
         {
             "message": "Missing item type\nHelper fxn to check font type (system or otf)",
-            "line": " src/core/p5.Renderer.js:365"
+            "line": " src/core/p5.Renderer.js:344"
         },
         {
             "message": "Missing item type\nHelper fxn to measure ascent and descent.\nAdapted from http://stackoverflow.com/a/25355178",
-            "line": " src/core/p5.Renderer.js:417"
+            "line": " src/core/p5.Renderer.js:396"
         },
         {
             "message": "Missing item type\np5.Renderer2D\nThe 2D graphics canvas renderer class.\nextends p5.Renderer",
@@ -29851,15 +29902,15 @@
         },
         {
             "message": "Missing item type",
-            "line": " src/dom/dom.js:3186"
+            "line": " src/dom/dom.js:3189"
         },
         {
             "message": "Missing item type",
-            "line": " src/dom/dom.js:3252"
+            "line": " src/dom/dom.js:3255"
         },
         {
             "message": "Missing item type",
-            "line": " src/dom/dom.js:3314"
+            "line": " src/dom/dom.js:3317"
         },
         {
             "message": "Missing item type\n_updatePAccelerations updates the pAcceleration values",
@@ -29867,11 +29918,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:295"
+            "line": " src/events/keyboard.js:298"
         },
         {
             "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:381"
+            "line": " src/events/keyboard.js:384"
         },
         {
             "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.",
@@ -29883,51 +29934,51 @@
         },
         {
             "message": "Missing item type\nReturns a 32 bit number containing ARGB data at ith pixel in the\n1D array containing pixels data.",
-            "line": " src/image/filters.js:44"
+            "line": " src/image/filters.js:60"
         },
         {
             "message": "Missing item type\nModifies pixels RGBA values to values contained in the data object.",
-            "line": " src/image/filters.js:65"
+            "line": " src/image/filters.js:81"
         },
         {
             "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:85"
+            "line": " src/image/filters.js:101"
         },
         {
             "message": "Missing item type\nReturns a blank ImageData object.",
-            "line": " src/image/filters.js:105"
+            "line": " src/image/filters.js:121"
         },
         {
             "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:120"
+            "line": " src/image/filters.js:136"
         },
         {
             "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:173"
+            "line": " src/image/filters.js:189"
         },
         {
             "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:207"
+            "line": " src/image/filters.js:223"
         },
         {
             "message": "Missing item type\nSets the alpha channel to entirely opaque. No parameter is used.",
-            "line": " src/image/filters.js:230"
+            "line": " src/image/filters.js:246"
         },
         {
             "message": "Missing item type\nSets each pixel to its inverse value. No parameter is used.",
-            "line": " src/image/filters.js:246"
+            "line": " src/image/filters.js:262"
         },
         {
             "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:261"
+            "line": " src/image/filters.js:277"
         },
         {
             "message": "Missing item type\nreduces the bright areas in an image",
-            "line": " src/image/filters.js:293"
+            "line": " src/image/filters.js:309"
         },
         {
             "message": "Missing item type\nincreases the bright areas in an image",
-            "line": " src/image/filters.js:380"
+            "line": " src/image/filters.js:396"
         },
         {
             "message": "Missing item type\nThis module defines the p5 methods for the <a href=\"#/p5.Image\">p5.Image</a> class\nfor drawing images to the main display canvas.",
@@ -29935,15 +29986,15 @@
         },
         {
             "message": "Missing item type\nHelper function for loading GIF-based images",
-            "line": " src/image/loading_displaying.js:153"
+            "line": " src/image/loading_displaying.js:162"
         },
         {
             "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:243"
+            "line": " src/image/loading_displaying.js:252"
         },
         {
             "message": "Missing item type\nApply the current tint color to the input image, return the resulting\ncanvas.",
-            "line": " src/image/loading_displaying.js:556"
+            "line": " src/image/loading_displaying.js:565"
         },
         {
             "message": "Missing item type\nThis module defines the <a href=\"#/p5.Image\">p5.Image</a> class and P5 methods for\ndrawing images to the main display canvas.",
@@ -30035,7 +30086,7 @@
         },
         {
             "message": "Missing item type\nDraw a line given two points",
-            "line": " src/webgl/3d_primitives.js:1391"
+            "line": " src/webgl/3d_primitives.js:1393"
         },
         {
             "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",
diff --git a/src/templates/pages/reference/data.min.json b/src/templates/pages/reference/data.min.json
index 51aa2c9369..28fa6cc7ba 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.1.9","url":"https://github.com/processing/p5.js#readme"},"files":{"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/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":{"Environment":1},"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":{"Rendering":1},"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/shim.js":{"name":"src/core/shim.js","modules":{},"classes":{},"fors":{},"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":{"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/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.Geometry.js":{"name":"src/webgl/p5.Geometry.js","modules":{},"classes":{"p5.Geometry":1},"fors":{"p5":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.Effect":1,"p5.Filter":1,"p5.LowPass":1,"p5.HighPass":1,"p5.BandPass":1,"p5.Oscillator":1,"p5.SinOsc":1,"p5.TriOsc":1,"p5.SawOsc":1,"p5.SqrOsc":1,"p5.MonoSynth":1,"p5.AudioVoice":1,"p5.PolySynth":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Signal":1,"p5.Envelope":1,"p5.Pulse":1,"p5.Noise":1,"p5.AudioIn":1,"p5.EQ":1,"p5.Panner3D":1,"p5.Delay":1,"p5.Reverb":1,"p5.Convolver":1,"p5.Phrase":1,"p5.Part":1,"p5.Score":1,"p5.SoundLoop":1,"p5.Compressor":1,"p5.SoundRecorder":1,"p5.PeakDetect":1,"p5.Gain":1,"p5.Distortion":1},"fors":{"p5.sound":1,"p5.Effect":1,"p5":1,"p5.Oscillator":1,"p5.MonoSynth":1,"p5.AudioVoice":1,"p5.PolySynth":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Signal":1,"p5.Envelope":1,"p5.AudioIn":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.Gain":1,"p5.Distortion":1},"namespaces":{}},"lib/addons/p5.sound.min.js":{"name":"lib/addons/p5.sound.min.js","modules":{},"classes":{},"fors":{},"namespaces":{}}},"modules":{"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":14},"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":14,"requires":["core","constants"],"description":"<p>Each color stores the color mode and level maxes that was applied at the\ntime of its construction. These are used to interpret the input arguments\n(at construction and later for that instance of color) and to format the\noutput e.g. when <a href=\"#/p5/saturation\">saturation()</a> is requested.</p>\n<p>Internally, we store an array representing the ideal RGBA values in floating\npoint form, normalized from 0 to 1. From this we calculate the closest\nscreen color (RGBA levels from 0 to 255) and expose this to the renderer.</p>\n<p>We also cache normalized, floating point components of the color in various\nrepresentations as they are calculated. This is done to prevent repeating a\nconversion that has already been performed.</p>\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":{},"fors":{"p5":1},"namespaces":{}},"2D Primitives":{"name":"2D Primitives","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src/core/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},"Environment":{"name":"Environment","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"namespaces":{},"module":"Environment","file":"src/core/environment.js","line":1,"requires":["core","constants"]},"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":3459,"description":"<p>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 <a href=\"#/p5.Element\">p5.Element</a> that supports a range of HTML elements. See the\n<a href='https://github.com/processing/p5.js/wiki/Beyond-the-canvas'>\nbeyond the canvas tutorial</a> for a full overview of how this addon works.</p>\n<p>See <a href='https://github.com/processing/p5.js/wiki/Beyond-the-canvas'>tutorial: beyond the canvas</a>\nfor more info on how to use this library.</a></p>\n","requires":["p5"]},"Rendering":{"name":"Rendering","submodules":{"undefined":1},"elements":{},"classes":{"p5.RendererGL":1,"p5.Graphics":1,"p5.Renderer":1},"fors":{"p5":1},"namespaces":{},"module":"Rendering","file":"src/webgl/p5.RendererGL.js","line":600,"description":"<p>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.</p>\n"},"Foundation":{"name":"Foundation","submodules":{},"elements":{},"classes":{"JSON":1,"console":1},"fors":{"p5":1,"JSON":1,"console":1},"namespaces":{},"tag":"module","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":410},"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":410,"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":"<p>Base class for all p5.Dictionary types. Specifically\n typed Dictionary classes inherit from this class.</p>\n"},"Events":{"name":"Events","submodules":{"Acceleration":1,"Keyboard":1,"Mouse":1,"Touch":1},"elements":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"Acceleration":{"name":"Acceleration","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/acceleration.js","line":1,"requires":["core"]},"Keyboard":{"name":"Keyboard","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/keyboard.js","line":1,"requires":["core"]},"Mouse":{"name":"Mouse","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/mouse.js","line":1,"requires":["core","constants"]},"Touch":{"name":"Touch","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/touch.js","line":1,"requires":["core"]},"Image":{"name":"Image","submodules":{"Pixels":1},"elements":{},"classes":{"p5.Image":1},"fors":{"p5":1},"namespaces":{},"module":"Image","file":"src/image/p5.Image.js","line":21,"requires":["core"],"description":"<p>Creates a new <a href=\"#/p5.Image\">p5.Image</a>. A <a href=\"#/p5.Image\">p5.Image</a> is a canvas backed representation of an\nimage.</p>\n<p>p5 can display .gif, .jpg and .png images. Images may be displayed\nin 2D and 3D space. Before an image is used, it must be loaded with the\n<a href=\"#/p5/loadImage\">loadImage()</a> function. The <a href=\"#/p5.Image\">p5.Image</a> class contains fields for the width and\nheight of the image, as well as an array called <a href=\"#/p5.Image/pixels\">pixels[]</a> that contains the\nvalues for every pixel in the image.</p>\n<p>The methods described below allow easy access to the image's pixels and\nalpha channel and simplify the process of compositing.</p>\n<p>Before using the <a href=\"#/p5.Image/pixels\">pixels[]</a> array, be sure to use the <a href=\"#/p5.Image/loadPixels\">loadPixels()</a> method on\nthe image to make sure that the pixel data is properly loaded.</p>\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":"<p>This module defines the <a href=\"#/p5.Font\">p5.Font</a> class and functions for\ndrawing text to the display canvas.</p>\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":"<p>XML is a representation of an XML object, able to parse XML code. Use\n<a href=\"#/p5/loadXML\">loadXML()</a> to load external XML files and create XML objects.</p>\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":1205,"description":"<p>This is the p5 instance constructor.</p>\n<p>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 <a href=\"#/p5/preload\">preload()</a>,\n<a href=\"#/p5/setup\">setup()</a>, and/or\n<a href=\"#/p5/draw\">draw()</a> properties on it for running a sketch.</p>\n<p>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</p>\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":"<p><a href=\"#/p5.Table\">Table</a> 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.</p>\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":10},"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":10,"requires":["core"],"description":"<p>A class to describe a two or three dimensional vector, specifically\na Euclidean (also known as geometric) vector. A vector is an entity\nthat has both magnitude and direction. The datatype, however, stores\nthe components of the vector (x, y for 2D, and x, y, z for 3D). The magnitude\nand direction can be accessed via the methods <a href=\"#/p5.Vector/mag\">mag()</a> and <a href=\"#/p5.Vector/heading\">heading()</a>.</p>\n<p>In many of the p5.js examples, you will see <a href=\"#/p5.Vector\">p5.Vector</a> used to describe a\nposition, velocity, or acceleration. For example, if you consider a rectangle\nmoving across the screen, at any given instant it has a position (a vector\nthat points from the origin to its location), a velocity (the rate at which\nthe object's position changes per time unit, expressed as a vector), and\nacceleration (the rate at which the object's velocity changes per time\nunit, expressed as a vector).</p>\n<p>Since vectors represent groupings of values, we cannot simply use\ntraditional addition/multiplication/etc. Instead, we'll need to do some\n\"vector\" math, which is made easy by the methods inside the <a href=\"#/p5.Vector\">p5.Vector</a> class.</p>\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":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src/webgl/3d_primitives.js","line":1,"requires":["core","p5.Geometry"]},"Lights, Camera":{"name":"Lights, Camera","submodules":{"Interaction":1,"Lights":1,"Material":1,"Camera":1},"elements":{},"classes":{"p5.Camera":1,"p5.Geometry":1,"p5.Matrix":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":260},"Interaction":{"name":"Interaction","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Lights, Camera","namespace":"","file":"src/webgl/interaction.js","line":1,"requires":["core"]},"Lights":{"name":"Lights","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Lights, Camera","namespace":"","file":"src/webgl/light.js","line":1,"requires":["core"]},"3D Models":{"name":"3D Models","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src/webgl/loading.js","line":1,"requires":["core","p5.Geometry"]},"Material":{"name":"Material","submodules":{},"elements":{},"classes":{"p5.Geometry":1,"p5.Shader":1,"p5.Texture":1},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Lights, Camera","namespace":"","file":"src/webgl/p5.Texture.js","line":12,"requires":["core"],"description":"<p>This module defines the p5.Shader class</p>\n"},"Camera":{"name":"Camera","submodules":{},"elements":{},"classes":{"p5.Camera":1},"fors":{"p5":1,"p5.Camera":1},"is_submodule":1,"namespaces":{},"module":"Lights, Camera","namespace":"","file":"src/webgl/p5.Camera.js","line":339,"requires":["core"],"description":"<p>This class describes a camera for use in p5's\n<a href=\"https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5\">\nWebGL mode</a>. It contains camera position, orientation, and projection\ninformation necessary for rendering a 3D scene.</p>\n<p>New p5.Camera objects can be made through the\n<a href=\"#/p5/createCamera\">createCamera()</a> 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 <a href=\"#/p5/setCamera\">setCamera()</a> method.</p>\n<p>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 <a href=\"#/p5.Camera/move\">move()</a> method,\nfor instance, moves the camera along its own axes, whereas the\n<a href=\"#/p5.Camera/setPosition\">setPosition()</a>\nmethod sets the camera's position in world-space.</p>\n"},"p5.sound":{"name":"p5.sound","submodules":{},"elements":{},"classes":{"p5.sound":1,"p5.Effect":1,"p5.Filter":1,"p5.LowPass":1,"p5.HighPass":1,"p5.BandPass":1,"p5.Oscillator":1,"p5.SinOsc":1,"p5.TriOsc":1,"p5.SawOsc":1,"p5.SqrOsc":1,"p5.MonoSynth":1,"p5.AudioVoice":1,"p5.PolySynth":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Signal":1,"p5.Envelope":1,"p5.Pulse":1,"p5.Noise":1,"p5.AudioIn":1,"p5.EQ":1,"p5.Panner3D":1,"p5.Delay":1,"p5.Reverb":1,"p5.Convolver":1,"p5.Phrase":1,"p5.Part":1,"p5.Score":1,"p5.SoundLoop":1,"p5.Compressor":1,"p5.SoundRecorder":1,"p5.PeakDetect":1,"p5.Gain":1,"p5.Distortion":1},"fors":{"p5.sound":1,"p5.Effect":1,"p5":1,"p5.Oscillator":1,"p5.MonoSynth":1,"p5.AudioVoice":1,"p5.PolySynth":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Signal":1,"p5.Envelope":1,"p5.AudioIn":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.Gain":1,"p5.Distortion":1},"namespaces":{},"module":"p5.sound","file":"lib/addons/p5.sound.js","line":11703,"description":"<p>p5.sound extends p5 with <a href=\"http://caniuse.com/audio-api\"\ntarget=\"_blank\">Web Audio</a> functionality including audio input,\nplayback, analysis and synthesis.\n</p>\n<ul>\n<li><a href=\"#/p5.SoundFile\"><b>p5.SoundFile</b></a>: Load and play sound files.</li>\n<li><a href=\"#/p5.Amplitude\"><b>p5.Amplitude</b></a>: Get the current volume of a sound.</li>\n<li><a href=\"#/p5.AudioIn\"><b>p5.AudioIn</b></a>: Get sound from an input source, typically\n  a computer microphone.</li>\n<li><a href=\"#/p5.FFT\"><b>p5.FFT</b></a>: Analyze the frequency of sound. Returns\n  results from the frequency spectrum or time domain (waveform).</li>\n<li><a href=\"#/p5.Oscillator\"><b>p5.Oscillator</b></a>: Generate Sine,\n  Triangle, Square and Sawtooth waveforms. Base class of\n  <li><a href=\"#/p5.Noise\">p5.Noise</a> and <a href=\"#/p5.Pulse\">p5.Pulse</a>.\n  </li>\n<li>\n  <a href=\"#/p5.MonoSynth\">p5.MonoSynth</a> and <a href=\"#/p5.PolySynth\">p5.PolySynth</a>: Play musical notes\n</li>\n<li><a href=\"#/p5.Envelope\"><b>p5.Envelope</b></a>: 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.</li>\n<li><a href=\"#/p5.Delay\"><b>p5.Delay</b></a>: A delay effect with\n  parameters for feedback, delayTime, and lowpass filter.</li>\n<li><a href=\"#/p5.Filter\"><b>p5.Filter</b></a>: Filter the frequency range of a\n  sound.\n</li>\n<li><a href=\"#/p5.Reverb\"><b>p5.Reverb</b></a>: Add reverb to a sound by specifying\n  duration and decay. </li>\n<b><li><a href=\"#/p5.Convolver\">p5.Convolver</a>:</b> Extends\n<a href=\"#/p5.Reverb\">p5.Reverb</a> to simulate the sound of real\n  physical spaces through convolution.</li>\n<b><li><a href=\"#/p5.SoundRecorder\">p5.SoundRecorder</a></b>: Record sound for playback\n  / save the .wav file.\n<b><li><a href=\"#/p5.SoundLoop\">p5.SoundLoop</a>, <a href=\"#/p5.Phrase\">p5.Phrase</a></b>, <b><a href=\"#/p5.Part\">p5.Part</a></b> and\n<b><a href=\"#/p5.Score\">p5.Score</a></b>: Compose musical sequences.\n</li>\n<li><a href=\"#/p5/userStartAudio\">userStartAudio</a>: Enable audio in a\nbrowser- and user-friendly way.</a>\n<p>p5.sound is on <a href=\"https://github.com/therewasaguy/p5.sound/\">GitHub</a>.\nDownload the latest version\n<a href=\"https://github.com/therewasaguy/p5.sound/blob/master/lib/p5.sound.js\">here</a>.</p>","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":13,"description":"<p>This is the p5 instance constructor.</p>\n<p>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 <a href=\"#/p5/preload\">preload()</a>,\n<a href=\"#/p5/setup\">setup()</a>, and/or\n<a href=\"#/p5/draw\">draw()</a> properties on it for running a sketch.</p>\n<p>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</p>\n","is_constructor":1,"params":[{"name":"sketch","description":"<p>a closure that can set optional <a href=\"#/p5/preload\">preload()</a>,\n                             <a href=\"#/p5/setup\">setup()</a>, and/or <a href=\"#/p5/draw\">draw()</a> properties on the\n                             given p5 instance</p>\n","type":"Function"},{"name":"node","description":"<p>element to attach canvas to</p>\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":14,"description":"<p>Each color stores the color mode and level maxes that was applied at the\ntime of its construction. These are used to interpret the input arguments\n(at construction and later for that instance of color) and to format the\noutput e.g. when <a href=\"#/p5/saturation\">saturation()</a> is requested.</p>\n<p>Internally, we store an array representing the ideal RGBA values in floating\npoint form, normalized from 0 to 1. From this we calculate the closest\nscreen color (RGBA levels from 0 to 255) and expose this to the renderer.</p>\n<p>We also cache normalized, floating point components of the color in various\nrepresentations as they are calculated. This is done to prevent repeating a\nconversion that has already been performed.</p>\n","is_constructor":1},"p5.Element":{"name":"p5.Element","shortname":"p5.Element","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"DOM","submodule":"DOM","namespace":"","file":"src/core/p5.Element.js","line":9,"description":"<p>Base class for all elements added to a sketch, including canvas,\ngraphics buffers, and other HTML elements. It is not called directly, but <a href=\"#/p5.Element\">p5.Element</a>\nobjects are created by calling <a href=\"#/p5/createCanvas\">createCanvas</a>, <a href=\"#/p5/createGraphics\">createGraphics</a>,\n<a href=\"#/p5/createDiv\">createDiv</a>, <a href=\"#/p5/createImg\">createImg</a>, <a href=\"#/p5/createInput\">createInput</a>, etc.</p>\n","is_constructor":1,"params":[{"name":"elt","description":"<p>DOM node that is wrapped</p>\n","type":"String"},{"name":"pInst","description":"<p>pointer to p5 instance</p>\n","type":"P5","optional":true}]},"p5.Graphics":{"name":"p5.Graphics","shortname":"p5.Graphics","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Rendering","submodule":"Rendering","namespace":"","file":"src/core/p5.Graphics.js","line":10,"description":"<p>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.</p>\n","is_constructor":1,"extends":"p5.Element","params":[{"name":"w","description":"<p>width</p>\n","type":"Number"},{"name":"h","description":"<p>height</p>\n","type":"Number"},{"name":"renderer","description":"<p>the renderer to use, either P2D or WEBGL</p>\n","type":"Constant"},{"name":"pInst","description":"<p>pointer to p5 instance</p>\n","type":"P5","optional":true}]},"p5.Renderer":{"name":"p5.Renderer","shortname":"p5.Renderer","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Rendering","submodule":"Rendering","namespace":"","file":"src/core/p5.Renderer.js","line":10,"description":"<p>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.</p>\n","is_constructor":1,"extends":"p5.Element","params":[{"name":"elt","description":"<p>DOM node that is wrapped</p>\n","type":"String"},{"name":"pInst","description":"<p>pointer to p5 instance</p>\n","type":"P5","optional":true},{"name":"isMainCanvas","description":"<p>whether we're using it as main canvas</p>\n","type":"Boolean","optional":true}]},"JSON":{"name":"JSON","shortname":"JSON","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Foundation","namespace":""},"console":{"name":"console","shortname":"console","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"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":"<p>Base class for all p5.Dictionary types. Specifically\n typed Dictionary classes inherit from this class.</p>\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":394,"description":"<p>A simple Dictionary class for Strings.</p>\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":410,"description":"<p>A simple Dictionary class for Numbers.</p>\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":2304,"description":"<p>Extends <a href=\"#/p5.Element\">p5.Element</a> to handle audio and video. In addition to the methods\nof <a href=\"#/p5.Element\">p5.Element</a>, it also contains methods for controlling media. It is not\ncalled directly, but <a href=\"#/p5.MediaElement\">p5.MediaElement</a>s are created by calling <a href=\"#/p5/createVideo\">createVideo</a>,\n<a href=\"#/p5/createAudio\">createAudio</a>, and <a href=\"#/p5/createCapture\">createCapture</a>.</p>\n","is_constructor":1,"params":[{"name":"elt","description":"<p>DOM node that is wrapped</p>\n","type":"String"}]},"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":3459,"description":"<p>Base class for a file.\nUsed for Element.drop and createFileInput.</p>\n","is_constructor":1,"params":[{"name":"file","description":"<p>File that is wrapped</p>\n","type":"File"}]},"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":"<p>Creates a new <a href=\"#/p5.Image\">p5.Image</a>. A <a href=\"#/p5.Image\">p5.Image</a> is a canvas backed representation of an\nimage.</p>\n<p>p5 can display .gif, .jpg and .png images. Images may be displayed\nin 2D and 3D space. Before an image is used, it must be loaded with the\n<a href=\"#/p5/loadImage\">loadImage()</a> function. The <a href=\"#/p5.Image\">p5.Image</a> class contains fields for the width and\nheight of the image, as well as an array called <a href=\"#/p5.Image/pixels\">pixels[]</a> that contains the\nvalues for every pixel in the image.</p>\n<p>The methods described below allow easy access to the image's pixels and\nalpha channel and simplify the process of compositing.</p>\n<p>Before using the <a href=\"#/p5.Image/pixels\">pixels[]</a> array, be sure to use the <a href=\"#/p5.Image/loadPixels\">loadPixels()</a> method on\nthe image to make sure that the pixel data is properly loaded.</p>\n","example":["\n<div><code>\nfunction setup() {\n  let img = createImage(100, 100); // same as new p5.Image(100, 100);\n  img.loadPixels();\n  createCanvas(100, 100);\n  background(0);\n\n  // helper for writing color to array\n  function writeColor(image, x, y, red, green, blue, alpha) {\n    let index = (x + y * width) * 4;\n    image.pixels[index] = red;\n    image.pixels[index + 1] = green;\n    image.pixels[index + 2] = blue;\n    image.pixels[index + 3] = alpha;\n  }\n\n  let x, y;\n  // fill with random colors\n  for (y = 0; y < img.height; y++) {\n    for (x = 0; x < img.width; x++) {\n      let red = random(255);\n      let green = random(255);\n      let blue = random(255);\n      let alpha = 255;\n      writeColor(img, x, y, red, green, blue, alpha);\n    }\n  }\n\n  // draw a red line\n  y = 0;\n  for (x = 0; x < img.width; x++) {\n    writeColor(img, x, y, 255, 0, 0, 255);\n  }\n\n  // draw a green line\n  y = img.height - 1;\n  for (x = 0; x < img.width; x++) {\n    writeColor(img, x, y, 0, 255, 0, 255);\n  }\n\n  img.updatePixels();\n  image(img, 0, 0);\n}\n</code></div>"],"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":1205,"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":"<p><a href=\"#/p5.Table\">Table</a> 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.</p>\n","is_constructor":1,"params":[{"name":"rows","description":"<p>An array of p5.TableRow objects</p>\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":"<p>A TableRow object represents a single row of data values,\nstored in columns, from a table.</p>\n<p>A Table Row contains both an ordered array, and an unordered\nJSON object.</p>\n","is_constructor":1,"params":[{"name":"str","description":"<p>optional: populate the row with a\n                            string of values, separated by the\n                            separator</p>\n","type":"String","optional":true},{"name":"separator","description":"<p>comma separated values (csv) by default</p>\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":"<p>XML is a representation of an XML object, able to parse XML code. Use\n<a href=\"#/p5/loadXML\">loadXML()</a> to load external XML files and create XML objects.</p>\n","is_constructor":1,"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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\n// Sketch prints:\n// 0, Capra hircus, Goat\n// 1, Panthera pardus, Leopard\n// 2, Equus zebra, Zebra\n</code></div>"],"alt":"no image displayed"},"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":10,"description":"<p>A class to describe a two or three dimensional vector, specifically\na Euclidean (also known as geometric) vector. A vector is an entity\nthat has both magnitude and direction. The datatype, however, stores\nthe components of the vector (x, y for 2D, and x, y, z for 3D). The magnitude\nand direction can be accessed via the methods <a href=\"#/p5.Vector/mag\">mag()</a> and <a href=\"#/p5.Vector/heading\">heading()</a>.</p>\n<p>In many of the p5.js examples, you will see <a href=\"#/p5.Vector\">p5.Vector</a> used to describe a\nposition, velocity, or acceleration. For example, if you consider a rectangle\nmoving across the screen, at any given instant it has a position (a vector\nthat points from the origin to its location), a velocity (the rate at which\nthe object's position changes per time unit, expressed as a vector), and\nacceleration (the rate at which the object's velocity changes per time\nunit, expressed as a vector).</p>\n<p>Since vectors represent groupings of values, we cannot simply use\ntraditional addition/multiplication/etc. Instead, we'll need to do some\n\"vector\" math, which is made easy by the methods inside the <a href=\"#/p5.Vector\">p5.Vector</a> class.</p>\n","is_constructor":1,"params":[{"name":"x","description":"<p>x component of the vector</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>z component of the vector</p>\n","type":"Number","optional":true}],"example":["\n<div>\n<code>\nlet v1 = createVector(40, 50);\nlet v2 = createVector(40, 50);\n\nellipse(v1.x, v1.y, 50, 50);\nellipse(v2.x, v2.y, 50, 50);\nv1.add(v2);\nellipse(v1.x, v1.y, 50, 50);\n</code>\n</div>"],"alt":"2 white ellipses. One center-left the other bottom right and off canvas"},"p5.Font":{"name":"p5.Font","shortname":"p5.Font","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Typography","submodule":"Loading & Displaying","namespace":"","file":"src/typography/p5.Font.js","line":13,"description":"<p>Base class for font handling</p>\n","is_constructor":1,"params":[{"name":"pInst","description":"<p>pointer to p5 instance</p>\n","type":"P5","optional":true}]},"p5.Camera":{"name":"p5.Camera","shortname":"p5.Camera","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Lights, Camera","submodule":"Camera","namespace":"","file":"src/webgl/p5.Camera.js","line":339,"description":"<p>This class describes a camera for use in p5's\n<a href=\"https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5\">\nWebGL mode</a>. It contains camera position, orientation, and projection\ninformation necessary for rendering a 3D scene.</p>\n<p>New p5.Camera objects can be made through the\n<a href=\"#/p5/createCamera\">createCamera()</a> 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 <a href=\"#/p5/setCamera\">setCamera()</a> method.</p>\n<p>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 <a href=\"#/p5.Camera/move\">move()</a> method,\nfor instance, moves the camera along its own axes, whereas the\n<a href=\"#/p5.Camera/setPosition\">setPosition()</a>\nmethod sets the camera's position in world-space.</p>\n","params":[{"name":"rendererGL","description":"<p>instance of WebGL renderer</p>\n","type":"RendererGL"}],"example":["\n<div>\n<code>\nlet cam;\nlet delta = 0.01;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n  cam = createCamera();\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</code>\n</div>"],"alt":"camera view pans left and right across a series of rotating 3D boxes."},"p5.Geometry":{"name":"p5.Geometry","shortname":"p5.Geometry","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Lights, Camera","submodule":"Material","namespace":"","file":"src/webgl/p5.Geometry.js","line":12,"description":"<p>p5 Geometry class</p>\n","is_constructor":1,"params":[{"name":"detailX","description":"<p>number of vertices on horizontal surface</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of vertices on horizontal surface</p>\n","type":"Integer","optional":true},{"name":"callback","description":"<p>function to call upon object instantiation.</p>\n","type":"Function","optional":true}]},"p5.Shader":{"name":"p5.Shader","shortname":"p5.Shader","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Lights, Camera","submodule":"Material","namespace":"","file":"src/webgl/p5.Shader.js","line":11,"description":"<p>Shader class for WEBGL Mode</p>\n","is_constructor":1,"params":[{"name":"renderer","description":"<p>an instance of p5.RendererGL that\nwill provide the GL context for this new p5.Shader</p>\n","type":"p5.RendererGL"},{"name":"vertSrc","description":"<p>source code for the vertex shader (as a string)</p>\n","type":"String"},{"name":"fragSrc","description":"<p>source code for the fragment shader (as a string)</p>\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.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":264,"description":"<p>Effect is a base class for audio effects in p5. <br>\nThis module handles the nodes and methods that are\ncommon and useful for current and future effects.</p>\n<p>This class is extended by <a href=\"/reference/#/p5.Distortion\">p5.Distortion</a>,\n<a href=\"/reference/#/p5.Compressor\">p5.Compressor</a>,\n<a href=\"/reference/#/p5.Delay\">p5.Delay</a>,\n<a href=\"/reference/#/p5.Filter\">p5.Filter</a>,\n<a href=\"/reference/#/p5.Reverb\">p5.Reverb</a>.</p>\n","is_constructor":1,"params":[{"name":"ac","description":"<p>Reference to the audio context of the p5 object</p>\n","type":"Object","optional":true},{"name":"input","description":"<p>Gain Node effect wrapper</p>\n","type":"AudioNode","optional":true},{"name":"output","description":"<p>Gain Node effect wrapper</p>\n","type":"AudioNode","optional":true},{"name":"_drywet","description":"<p>Tone.JS CrossFade node (defaults to value: 1)</p>\n","type":"Object","optional":true},{"name":"wet","description":"<p>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.</p>\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":883,"description":"<p>A p5.Filter uses a Web Audio Biquad Filter to filter\nthe frequency response of an input source. Subclasses\ninclude:</p>\n<a href=\"/reference/#/p5.LowPass\"><code>p5.LowPass</code></a>:\nAllows frequencies below the cutoff frequency to pass through,\nand attenuates frequencies above the cutoff.<br/>\n<a href=\"/reference/#/p5.HighPass\"><code>p5.HighPass</code></a>:\nThe opposite of a lowpass filter. <br/>\n<a href=\"/reference/#/p5.BandPass\"><code>p5.BandPass</code></a>:\nAllows a range of frequencies to pass through and attenuates\nthe frequencies below and above this frequency range.<br/>\n\n<p>The <code>.res()</code> method controls either width of the\nbandpass, or resonance of the low/highpass cutoff frequency.</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","extends":"p5.Effect","is_constructor":1,"params":[{"name":"type","description":"<p>'lowpass' (default), 'highpass', 'bandpass'</p>\n","type":"String","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":1147,"description":"<p>Constructor: <code>new p5.LowPass()</code> Filter.\nThis is the same as creating a p5.Filter and then calling\nits method <code>setType('lowpass')</code>.\nSee p5.Filter for methods.</p>\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":1164,"description":"<p>Constructor: <code>new p5.HighPass()</code> Filter.\nThis is the same as creating a p5.Filter and then calling\nits method <code>setType('highpass')</code>.\nSee p5.Filter for methods.</p>\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":1180,"description":"<p>Constructor: <code>new p5.BandPass()</code> Filter.\nThis is the same as creating a p5.Filter and then calling\nits method <code>setType('bandpass')</code>.\nSee p5.Filter for methods.</p>\n","is_constructor":1,"extends":"p5.Filter"},"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":1375,"description":"<p>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).</p>\n\n<p>Set the type of oscillation with setType(), or by instantiating a\nspecific oscillator: <a href=\"/reference/#/p5.SinOsc\">p5.SinOsc</a>, <a\nhref=\"/reference/#/p5.TriOsc\">p5.TriOsc</a>, <a\nhref=\"/reference/#/p5.SqrOsc\">p5.SqrOsc</a>, or <a\nhref=\"/reference/#/p5.SawOsc\">p5.SawOsc</a>.\n</p>","is_constructor":1,"params":[{"name":"freq","description":"<p>frequency defaults to 440Hz</p>\n","type":"Number","optional":true},{"name":"type","description":"<p>type of oscillator. Options:\n                       'sine' (default), 'triangle',\n                       'sawtooth', 'square'</p>\n","type":"String","optional":true}],"example":["\n<div><code>\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</code> </div>"]},"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":1890,"description":"<p>Constructor: <code>new p5.SinOsc()</code>.\nThis creates a Sine Wave Oscillator and is\nequivalent to <code> new p5.Oscillator('sine')\n</code> or creating a p5.Oscillator and then calling\nits method <code>setType('sine')</code>.\nSee p5.Oscillator for methods.</p>\n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"<p>Set the frequency</p>\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":1910,"description":"<p>Constructor: <code>new p5.TriOsc()</code>.\nThis creates a Triangle Wave Oscillator and is\nequivalent to <code>new p5.Oscillator('triangle')\n</code> or creating a p5.Oscillator and then calling\nits method <code>setType('triangle')</code>.\nSee p5.Oscillator for methods.</p>\n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"<p>Set the frequency</p>\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":1929,"description":"<p>Constructor: <code>new p5.SawOsc()</code>.\nThis creates a SawTooth Wave Oscillator and is\nequivalent to <code> new p5.Oscillator('sawtooth')\n</code> or creating a p5.Oscillator and then calling\nits method <code>setType('sawtooth')</code>.\nSee p5.Oscillator for methods.</p>\n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"<p>Set the frequency</p>\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":1948,"description":"<p>Constructor: <code>new p5.SqrOsc()</code>.\nThis creates a Square Wave Oscillator and is\nequivalent to <code> new p5.Oscillator('square')\n</code> or creating a p5.Oscillator and then calling\nits method <code>setType('square')</code>.\nSee p5.Oscillator for methods.</p>\n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"<p>Set the frequency</p>\n","type":"Number","optional":true}]},"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":2008,"description":"<p>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.</p>\n","is_constructor":1,"example":["\n<div><code>\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</code></div>"]},"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":2356,"description":"<p>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();</p>\n","is_constructor":1},"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":2426,"description":"<p>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.</p>\n","is_constructor":1,"params":[{"name":"synthVoice","description":"<p>A monophonic synth voice inheriting\n                               the AudioVoice class. Defaults to p5.MonoSynth</p>\n","type":"Number","optional":true},{"name":"maxVoices","description":"<p>Number of voices, defaults to 8;</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":3360,"description":"<p>SoundFile object with a path to a file.</p>\n\n<p>The p5.SoundFile may not be available immediately because\nit loads the file information asynchronously.</p>\n\n<p>To do something with the sound as soon as it loads\npass the name of a function as the second parameter.</p>\n\n<p>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.</p>","is_constructor":1,"params":[{"name":"path","description":"<p>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.</p>\n","type":"String|Array"},{"name":"successCallback","description":"<p>Name of a function to call once file loads</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>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.</p>\n","type":"Function","optional":true},{"name":"whileLoadingCallback","description":"<p>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.</p>\n","type":"Function","optional":true}],"example":["\n<div><code>\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 </code></div>"]},"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":5186,"description":"<p>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.</p>\n","is_constructor":1,"params":[{"name":"smoothing","description":"<p>between 0.0 and .999 to smooth\n                           amplitude readings (defaults to 0)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\nlet sound, amplitude;\n\nfunction preload(){\n  sound = loadSound('assets/beat.mp3');\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);\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 (sound.isPlaying() ){\n    sound.stop();\n  } else {\n    sound.play();\n  }\n}\n\n</code></div>"]},"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":5499,"description":"<p>FFT (Fast Fourier Transform) is an analysis algorithm that\nisolates individual\n<a href=\"https://en.wikipedia.org/wiki/Audio_frequency\">\naudio frequencies</a> within a waveform.</p>\n\n<p>Once instantiated, a p5.FFT object can return an array based on\ntwo types of analyses: <br> • <code>FFT.waveform()</code> 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.<br>\n• <code>FFT.analyze() </code> 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 <code>getEnergy()</code> to measure amplitude at specific\nfrequencies, or within a range of frequencies. </p>\n\n<p>FFT analyzes a very short snapshot of sound called a sample\nbuffer. It returns an array of amplitude measurements, referred\nto as <code>bins</code>. 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.</p>","is_constructor":1,"params":[{"name":"smoothing","description":"<p>Smooth results of Freq Spectrum.\n                              0.0 < smoothing < 1.0.\n                              Defaults to 0.8.</p>\n","type":"Number","optional":true},{"name":"bins","description":"<p>Length of resulting array.\n                          Must be a power of two between\n                          16 and 1024. Defaults to 1024.</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"p5.Signal":{"name":"p5.Signal","shortname":"p5.Signal","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":6146,"description":"<p>p5.Signal is a constant audio-rate signal used by p5.Oscillator\nand p5.Envelope for modulation math.</p>\n\n<p>This is necessary because Web Audio is processed on a seprate clock.\nFor example, the p5 draw loop runs about 60 times per second. But\nthe audio clock must process samples 44100 times per second. If we\nwant to add a value to each of those samples, we can't do it in the\ndraw loop, but we can do it by adding a constant-rate audio signal.</p.\n\n<p>This class mostly functions behind the scenes in p5.sound, and returns\na Tone.Signal from the Tone.js library by Yotam Mann.\nIf you want to work directly with audio signals for modular\nsynthesis, check out\n<a href='http://bit.ly/1oIoEng' target=_'blank'>tone.js.</a></p>","is_constructor":1,"return":{"description":"A Signal object from the Tone.js library","type":"Tone.Signal"},"example":["\n<div><code>\nlet carrier, modulator;\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  carrier = new p5.Oscillator('sine');\n  carrier.start();\n  carrier.amp(1); // set amplitude\n  carrier.freq(220); // set frequency\n\n  modulator = new p5.Oscillator('sawtooth');\n  modulator.disconnect();\n  modulator.start();\n  modulator.amp(1);\n  modulator.freq(4);\n\n  // Modulator's default amplitude range is -1 to 1.\n  // Multiply it by -200, so the range is -200 to 200\n  // then add 220 so the range is 20 to 420\n  carrier.freq( modulator.mult(-400).add(220) );\n}\n\nfunction canvasPressed() {\n  userStartAudio();\n  carrier.amp(1.0);\n}\n\nfunction mouseReleased() {\n  carrier.amp(0);\n}\n</code></div>"]},"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":6350,"description":"<p>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 (\n<a href=\"https://upload.wikimedia.org/wikipedia/commons/e/ea/ADSR_parameter.svg\">ADSR</a>\n). Envelopes can also control other Web Audio Parameters—for example, a p5.Envelope can\ncontrol an Oscillator's frequency like this: <code>osc.freq(env)</code>.</p>\n<p>Use <code><a href=\"#/p5.Envelope/setRange\">setRange</a></code> to change the attack/release level.\nUse <code><a href=\"#/p5.Envelope/setADSR\">setADSR</a></code> to change attackTime, decayTime, sustainPercent and releaseTime.</p>\n<p>Use the <code><a href=\"#/p5.Envelope/play\">play</a></code> method to play the entire envelope,\nthe <code><a href=\"#/p5.Envelope/ramp\">ramp</a></code> method for a pingable trigger,\nor <code><a href=\"#/p5.Envelope/triggerAttack\">triggerAttack</a></code>/\n<code><a href=\"#/p5.Envelope/triggerRelease\">triggerRelease</a></code> to trigger noteOn/noteOff.</p>","is_constructor":1,"example":["\n<div><code>\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</code></div>"]},"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":7192,"description":"<p>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 <a href=\"\nhttp://p5js.org/reference/#/p5.Oscillator\">\n<code>p5.Oscillator</code> for a full list of methods.</p>\n","extends":"p5.Oscillator","is_constructor":1,"params":[{"name":"freq","description":"<p>Frequency in oscillations per second (Hz)</p>\n","type":"Number","optional":true},{"name":"w","description":"<p>Width between the pulses (0 to 1.0,\n                       defaults to 0)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":7399,"description":"<p>Noise is a type of oscillator that generates a buffer with random values.</p>\n","extends":"p5.Oscillator","is_constructor":1,"params":[{"name":"type","description":"<p>Type of noise can be 'white' (default),\n                     'brown' or 'pink'.</p>\n","type":"String"}]},"p5.AudioIn":{"name":"p5.AudioIn","shortname":"p5.AudioIn","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":7583,"description":"<p>Get audio from an input, i.e. your computer's microphone.</p>\n\n<p>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.</p>\n\n<p>If you want to hear the AudioIn, use the .connect() method.\nAudioIn does not connect to p5.sound output by default to prevent\nfeedback.</p>\n\n<p><em>Note: This uses the <a href=\"http://caniuse.com/stream\">getUserMedia/\nStream</a> 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.</em></p>","is_constructor":1,"params":[{"name":"errorCallback","description":"<p>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.</p>\n","type":"Function","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":8021,"description":"<p>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).</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","is_constructor":1,"extends":"p5.Effect","params":[{"name":"_eqsize","description":"<p>Constructor will accept 3 or 8, defaults to 3</p>\n","type":"Number","optional":true}],"return":{"description":"p5.EQ object","type":"Object"},"example":["\n<div><code>\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</code></div>"]},"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":8301,"description":"<p>Panner3D is based on the <a title=\"Web Audio Panner docs\"  href=\n\"https://developer.mozilla.org/en-US/docs/Web/API/PannerNode\">\nWeb Audio Spatial Panner Node</a>.\nThis panner is a spatial processing node that allows audio to be positioned\nand oriented in 3D space.</p>\n<p>The position is relative to an <a title=\"Web Audio Listener docs\" href=\n\"https://developer.mozilla.org/en-US/docs/Web/API/AudioListener\">\nAudio Context Listener</a>, which can be accessed\nby <code>p5.soundOut.audiocontext.listener</code></p>\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":8829,"description":"<p>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.</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","extends":"p5.Effect","is_constructor":1,"example":["\n<div><code>\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</code></div>"]},"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":9175,"description":"<p>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.</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","extends":"p5.Effect","is_constructor":1,"example":["\n<div><code>\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</code></div>"]},"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":9397,"description":"<p>p5.Convolver extends p5.Reverb. It can emulate the sound of real\nphysical spaces through a process called <a href=\"\nhttps://en.wikipedia.org/wiki/Convolution_reverb#Real_space_simulation\">\nconvolution</a>.</p>\n\n<p>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.</p>\n\n<p>Use the method <code>createConvolution(path)</code> to instantiate a\np5.Convolver with a path to your impulse response audio file.</p>","extends":"p5.Effect","is_constructor":1,"params":[{"name":"path","description":"<p>path to a sound file</p>\n","type":"String"},{"name":"callback","description":"<p>function to call when loading succeeds</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to call if loading fails.\n                                   This function will receive an error or\n                                   XMLHttpRequest object with information\n                                   about what went wrong.</p>\n","type":"Function","optional":true}],"example":["\n<div><code>\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 master output...\n  sound.disconnect();\n\n  // ...and process with cVerb\n  // so that we only hear the convolution\n  cVerb.process(sound);\n}\n\nfunction playSound() {\n  sound.play();\n}\n</code></div>"]},"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":9922,"description":"<p>A phrase is a pattern of musical events over time, i.e.\na series of notes and rests.</p>\n\n<p>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.</p>\n\n<p>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 <code>playNote(value){}</code>. 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).</p>","is_constructor":1,"params":[{"name":"name","description":"<p>Name so that you can access the Phrase.</p>\n","type":"String"},{"name":"callback","description":"<p>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.</p>\n","type":"Function"},{"name":"sequence","description":"<p>Array of values to pass into the callback\n                          at each step of the phrase.</p>\n","type":"Array"}],"example":["\n<div><code>\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</code></div>"]},"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":10002,"description":"<p>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.</p>\n\n<p>See p5.Phrase for more about musical timing.</p>","is_constructor":1,"params":[{"name":"steps","description":"<p>Steps in the part</p>\n","type":"Number","optional":true},{"name":"tatums","description":"<p>Divisions of a beat, e.g. use 1/4, or 0.25 for a quater note (default is 1/16, a sixteenth note)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":10288,"description":"<p>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\n<code>new p5.Score(a, a, b, a, c)</code></p>\n","is_constructor":1,"params":[{"name":"parts","description":"<p>One or multiple parts, to be played in sequence.</p>\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":10454,"description":"<p>SoundLoop</p>\n","is_constructor":1,"params":[{"name":"callback","description":"<p>this function will be called on each iteration of theloop</p>\n","type":"Function"},{"name":"interval","description":"<p>amount of time (if a number) or beats (if a string, following <a href = \"https://github.com/Tonejs/Tone.js/wiki/Time\">Tone.Time</a> convention) for each iteration of the loop. Defaults to 1 second.</p>\n","type":"Number|String","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":10792,"description":"<p>Compressor is an audio effect class that performs dynamics compression\non an audio input source. This is a very commonly used technique in music\nand sound production. Compression creates an overall louder, richer,\nand fuller sound by lowering the volume of louds and raising that of softs.\nCompression can be used to avoid clipping (sound distortion due to\npeaks in volume) and is especially useful when many sounds are played\nat once. Compression can be used on indivudal sound sources in addition\nto the master output.</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","is_constructor":1,"extends":"p5.Effect"},"p5.SoundRecorder":{"name":"p5.SoundRecorder","shortname":"p5.SoundRecorder","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":11056,"description":"<p>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().</p>\n<p>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.</p>","is_constructor":1,"example":["\n<div><code>\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</div></code>"]},"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":11286,"description":"<p>PeakDetect works in conjunction with p5.FFT to\nlook for onsets in some or all of the frequency spectrum.\n</p>\n<p>\nTo use p5.PeakDetect, call <code>update</code> in the draw loop\nand pass in a p5.FFT object.\n</p>\n<p>\nYou can listen for a specific part of the frequency spectrum by\nsetting the range between <code>freq1</code> and <code>freq2</code>.\n</p>\n\n<p><code>threshold</code> 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.</p>\n\n<p>\nThe update method is meant to be run in the draw loop, and\n<b>frames</b> 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<code> framesPerPeak = 60 / (estimatedBPM / 60 );</code>\n</p>\n\n<p>\nBased on example contribtued by @b2renger, and a simple beat detection\nexplanation by <a\nhref=\"http://www.airtightinteractive.com/2013/10/making-audio-reactive-visuals/\"\ntarget=\"_blank\">Felix Turner</a>.\n</p>","is_constructor":1,"params":[{"name":"freq1","description":"<p>lowFrequency - defaults to 20Hz</p>\n","type":"Number","optional":true},{"name":"freq2","description":"<p>highFrequency - defaults to 20000 Hz</p>\n","type":"Number","optional":true},{"name":"threshold","description":"<p>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.</p>\n","type":"Number","optional":true},{"name":"framesPerPeak","description":"<p>Defaults to 20.</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":11521,"description":"<p>A gain node is usefull to set the relative volume of sound.\nIt's typically used to build mixers.</p>\n","is_constructor":1,"example":["\n<div><code>\n\n// load two soundfile and crossfade beetween them\nlet sound1,sound2;\nlet sound1Gain, sound2Gain, masterGain;\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 'master' gain to which we will connect both soundfiles\n  masterGain = new p5.Gain();\n  masterGain.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(masterGain); // connect its output to the 'master'\n  sound2.disconnect();\n  sound2Gain = new p5.Gain();\n  sound2Gain.setInput(sound2);\n  sound2Gain.connect(masterGain);\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 'master    *  volume control'\n  var masterVolume = constrain(map(mouseY,height,0,0,1), 0, 1);\n  masterGain.amp(masterVolume);\n  text('master', width/2, height - masterVolume * 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</code></div>"]},"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":11703,"description":"<p>A Distortion effect created with a Waveshaper Node,\nwith an approach adapted from\n<a href=\"http://stackoverflow.com/questions/22312841/waveshaper-node-in-webaudio-how-to-emulate-distortion\">Kevin Ennis</a></p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","extends":"p5.Effect","is_constructor":1,"params":[{"name":"amount","description":"<p>Unbounded distortion amount.\n                               Normal values range from 0-1.</p>\n","type":"Number","optional":true,"optdefault":"0.25"},{"name":"oversample","description":"<p>'none', '2x', or '4x'.</p>\n","type":"String","optional":true,"optdefault":"'none'"}]}},"elements":{},"classitems":[{"file":"src/color/color_conversion.js","line":8,"description":"<p>Conversions adapted from <a href=\"http://www.easyrgb.com/en/math.php\">http://www.easyrgb.com/en/math.php</a>.</p>\n<p>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.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":19,"description":"<p>Convert an HSBA array to HSLA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":45,"description":"<p>Convert an HSBA array to RGBA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":100,"description":"<p>Convert an HSLA array to HSBA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":123,"description":"<p>Convert an HSLA array to RGBA.</p>\n<p>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.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":187,"description":"<p>Convert an RGBA array to HSBA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":226,"description":"<p>Convert an RGBA array to HSLA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/creating_reading.js","line":16,"description":"<p>Extracts the alpha value from a color or pixel array.</p>\n","itemtype":"method","name":"alpha","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the alpha value","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\nlet c = color(0, 126, 255, 102);\nfill(c);\nrect(15, 15, 35, 70);\nlet value = alpha(c); // Sets 'value' to 102\nfill(value);\nrect(50, 15, 35, 70);\n</code>\n</div>"],"alt":"Left half of canvas light blue and right half light charcoal grey.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":45,"description":"<p>Extracts the blue value from a color or pixel array.</p>\n","itemtype":"method","name":"blue","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the blue value","type":"Number"},"example":["\n<div>\n<code>\nlet c = color(175, 100, 220);\nfill(c);\nrect(15, 20, 35, 60); // Draw left rectangle\nlet blueValue = blue(c);\nfill(0, 0, blueValue);\nrect(50, 20, 35, 60); // Draw right rectangle\n</code>\n</div>"],"alt":"Left half of canvas light purple and right half a royal blue.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":72,"description":"<p>Extracts the HSB brightness value from a color or pixel array.</p>\n","itemtype":"method","name":"brightness","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the brightness value","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 255);\nlet c = color(0, 126, 255);\nfill(c);\nrect(15, 20, 35, 60);\nlet value = brightness(c); // Sets 'value' to 255\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>\n\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 255);\nlet c = color('hsb(60, 100%, 50%)');\nfill(c);\nrect(15, 20, 35, 60);\nlet value = brightness(c); // A 'value' of 50% is 127.5\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>"],"alt":"Left half of canvas salmon pink and the right half with it's brightness colored white.\nLeft half of canvas olive colored and the right half with it's brightness color gray.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":116,"description":"<p>Creates colors for storing in variables of the color datatype. The\nparameters are interpreted as RGB or HSB values depending on the\ncurrent <a href=\"#/p5/colorMode\">colorMode()</a>. The default mode is RGB values from 0 to 255\nand, therefore, the function call color(255, 204, 0) will return a\nbright yellow color.</p>\n<p>Note that if only one value is provided to <a href=\"#/p5/color\">color()</a>, it will be interpreted\nas a grayscale value. Add a second value, and it will be used for alpha\ntransparency. When three values are specified, they are interpreted as\neither RGB or HSB values. Adding a fourth value applies alpha\ntransparency.</p>\n<p>If a single string argument is provided, RGB, RGBA and Hex CSS color\nstrings and all named color strings are supported. In this case, an alpha\nnumber value as a second argument is not supported, the RGBA form should be\nused.</p>\n","itemtype":"method","name":"color","return":{"description":"resulting color","type":"p5.Color"},"example":["\n<div>\n<code>\nlet c = color(255, 204, 0);\nfill(c);\nnoStroke();\nrect(30, 20, 55, 55);\n</code>\n</div>\n\n<div>\n<code>\nlet c = color(255, 204, 0);\nfill(c);\nnoStroke();\nellipse(25, 25, 80, 80); // Draw left circle\n// Using only one value generates a grayscale value.\nc = color(65);\nfill(c);\nellipse(75, 75, 80, 80);\n</code>\n</div>\n\n<div>\n<code>\n// You can use named SVG & CSS colors\nlet c = color('magenta');\nfill(c);\nnoStroke();\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// Example of hex color codes\nnoStroke();\nlet c = color('#0f0');\nfill(c);\nrect(0, 10, 45, 80);\nc = color('#00ff00');\nfill(c);\nrect(55, 10, 45, 80);\n</code>\n</div>\n\n<div>\n<code>\n// RGB and RGBA color strings are also supported\n// these all set to the same color (solid blue)\nlet c;\nnoStroke();\nc = color('rgb(0,0,255)');\nfill(c);\nrect(10, 10, 35, 35); // Draw rectangle\nc = color('rgb(0%, 0%, 100%)');\nfill(c);\nrect(55, 10, 35, 35); // Draw rectangle\nc = color('rgba(0, 0, 255, 1)');\nfill(c);\nrect(10, 55, 35, 35); // Draw rectangle\nc = color('rgba(0%, 0%, 100%, 1)');\nfill(c);\nrect(55, 55, 35, 35); // Draw rectangle\n</code>\n</div>\n\n<div>\n<code>\n// HSL color can also be specified by value\nlet c = color('hsl(160, 100%, 50%)');\nnoStroke();\nfill(c);\nrect(0, 10, 45, 80); // Draw rectangle\nc = color('hsla(160, 100%, 50%, 0.5)');\nfill(c);\nrect(55, 10, 45, 80); // Draw rectangle\n</code>\n</div>\n\n<div>\n<code>\n// HSB color can also be specified\nlet c = color('hsb(160, 100%, 50%)');\nnoStroke();\nfill(c);\nrect(0, 10, 45, 80); // Draw rectangle\nc = color('hsba(160, 100%, 50%, 0.5)');\nfill(c);\nrect(55, 10, 45, 80); // Draw rectangle\n</code>\n</div>\n\n<div>\n<code>\nnoStroke();\nlet c = color(50, 55, 100);\nfill(c);\nrect(0, 10, 45, 80); // Draw left rect\ncolorMode(HSB, 100);\nc = color(50, 55, 100);\nfill(c);\nrect(55, 10, 45, 80);\n</code>\n</div>"],"alt":"Yellow rect in middle right of canvas, with 55 pixel width and height.\nYellow ellipse in top left of canvas, black ellipse in bottom right,both 80x80.\nBright fuchsia rect in middle of canvas, 60 pixel width and height.\nTwo bright green rects on opposite sides of the canvas, both 45x80.\nFour blue rects in each corner of the canvas, each are 35x35.\nBright sea green rect on left and darker rect on right of canvas, both 45x80.\nDark green rect on left and lighter green rect on right of canvas, both 45x80.\nDark blue rect on left and light teal rect on right of canvas, both 45x80.","class":"p5","module":"Color","submodule":"Creating & Reading","overloads":[{"line":116,"params":[{"name":"gray","description":"<p>number specifying value between white and black.</p>\n","type":"Number"},{"name":"alpha","description":"<p>alpha value relative to current color range\n                                (default is 0-255)</p>\n","type":"Number","optional":true}],"return":{"description":"resulting color","type":"p5.Color"}},{"line":257,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"return":{"description":"","type":"p5.Color"}},{"line":269,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"return":{"description":"","type":"p5.Color"}},{"line":275,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"return":{"description":"","type":"p5.Color"}},{"line":282,"params":[{"name":"color","description":"","type":"p5.Color"}],"return":{"description":"","type":"p5.Color"}}]},{"file":"src/color/creating_reading.js","line":297,"description":"<p>Extracts the green value from a color or pixel array.</p>\n","itemtype":"method","name":"green","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the green value","type":"Number"},"example":["\n<div>\n<code>\nlet c = color(20, 75, 200); // Define color 'c'\nfill(c); // Use color variable 'c' as fill color\nrect(15, 20, 35, 60); // Draw left rectangle\n\nlet greenValue = green(c); // Get green in 'c'\nprint(greenValue); // Print \"75.0\"\nfill(0, greenValue, 0); // Use 'greenValue' in new fill\nrect(50, 20, 35, 60); // Draw right rectangle\n</code>\n</div>"],"alt":"blue rect on left and green on right, both with black outlines & 35x60.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":326,"description":"<p>Extracts the hue value from a color or pixel array.</p>\n<p>Hue exists in both HSB and HSL. This function will return the\nHSB-normalized hue when supplied with an HSB color object (or when supplied\nwith a pixel array while the color mode is HSB), but will default to the\nHSL-normalized hue otherwise. (The values will only be different if the\nmaximum hue setting for each system is different.)</p>\n","itemtype":"method","name":"hue","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the hue","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 255);\nlet c = color(0, 126, 255);\nfill(c);\nrect(15, 20, 35, 60);\nlet value = hue(c); // Sets 'value' to \"0\"\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>"],"alt":"salmon pink rect on left and black on right, both 35x60.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":361,"description":"<p>Blends two colors to find a third color somewhere between them. The amt\nparameter is the amount to interpolate between the two values where 0.0\nequal to the first color, 0.1 is very near the first color, 0.5 is halfway\nin between, etc. An amount below 0 will be treated as 0. Likewise, amounts\nabove 1 will be capped at 1. This is different from the behavior of <a href=\"#/p5/lerp\">lerp()</a>,\nbut necessary because otherwise numbers outside the range will produce\nstrange and unexpected colors.</p>\n<p>The way that colors are interpolated depends on the current color mode.</p>\n","itemtype":"method","name":"lerpColor","params":[{"name":"c1","description":"<p>interpolate from this color</p>\n","type":"p5.Color"},{"name":"c2","description":"<p>interpolate to this color</p>\n","type":"p5.Color"},{"name":"amt","description":"<p>number between 0 and 1</p>\n","type":"Number"}],"return":{"description":"interpolated color","type":"p5.Color"},"example":["\n<div>\n<code>\ncolorMode(RGB);\nstroke(255);\nbackground(51);\nlet from = color(218, 165, 32);\nlet to = color(72, 61, 139);\ncolorMode(RGB); // Try changing to HSB.\nlet interA = lerpColor(from, to, 0.33);\nlet interB = lerpColor(from, to, 0.66);\nfill(from);\nrect(10, 20, 20, 60);\nfill(interA);\nrect(30, 20, 20, 60);\nfill(interB);\nrect(50, 20, 20, 60);\nfill(to);\nrect(70, 20, 20, 60);\n</code>\n</div>"],"alt":"4 rects one tan, brown, brownish purple, purple, with white outlines & 20x60","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":452,"description":"<p>Extracts the HSL lightness value from a color or pixel array.</p>\n","itemtype":"method","name":"lightness","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the lightness","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(HSL);\nlet c = color(156, 100, 50, 1);\nfill(c);\nrect(15, 20, 35, 60);\nlet value = lightness(c); // Sets 'value' to 50\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>"],"alt":"light pastel green rect on left and dark grey rect on right, both 35x60.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":482,"description":"<p>Extracts the red value from a color or pixel array.</p>\n","itemtype":"method","name":"red","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the red value","type":"Number"},"example":["\n<div>\n<code>\nlet c = color(255, 204, 0); // Define color 'c'\nfill(c); // Use color variable 'c' as fill color\nrect(15, 20, 35, 60); // Draw left rectangle\n\nlet redValue = red(c); // Get red in 'c'\nprint(redValue); // Print \"255.0\"\nfill(redValue, 0, 0); // Use 'redValue' in new fill\nrect(50, 20, 35, 60); // Draw right rectangle\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\ncolorMode(RGB, 255); // Sets the range for red, green, and blue to 255\nlet c = color(127, 255, 0);\ncolorMode(RGB, 1); // Sets the range for red, green, and blue to 1\nlet myColor = red(c);\nprint(myColor); // 0.4980392156862745\n</code>\n</div>"],"alt":"yellow rect on left and red rect on right, both with black outlines and 35x60.\ngrey canvas","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":522,"description":"<p>Extracts the saturation value from a color or pixel array.</p>\n<p>Saturation is scaled differently in HSB and HSL. This function will return\nthe HSB saturation when supplied with an HSB color object (or when supplied\nwith a pixel array while the color mode is HSB), but will default to the\nHSL saturation otherwise.</p>\n","itemtype":"method","name":"saturation","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the saturation value","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 255);\nlet c = color(0, 126, 255);\nfill(c);\nrect(15, 20, 35, 60);\nlet value = saturation(c); // Sets 'value' to 126\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>"],"alt":"deep pink rect on left and grey rect on right, both 35x60.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":51,"description":"<p>This function returns the color formatted as a string. This can be useful\nfor debugging, or for using p5.js with other libraries.</p>\n","itemtype":"method","name":"toString","params":[{"name":"format","description":"<p>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.</p>\n","type":"String","optional":true}],"return":{"description":"the formatted string","type":"String"},"example":["\n<div>\n<code>\ncreateCanvas(200, 100);\nlet myColor;\nstroke(255);\nmyColor = color(100, 100, 250);\nfill(myColor);\nrotate(HALF_PI);\ntext(myColor.toString(), 0, -5);\ntext(myColor.toString('#rrggbb'), 0, -30);\ntext(myColor.toString('rgba%'), 0, -55);\n</code>\n</div>"],"alt":"A canvas with 3 text representation of thier color.","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":249,"description":"<p>The setRed function sets the red component of a color.\nThe range depends on your color mode, in the default RGB mode it's between 0 and 255.</p>\n","itemtype":"method","name":"setRed","params":[{"name":"red","description":"<p>the new red value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet backgroundColor;\n\nfunction setup() {\n  backgroundColor = color(100, 50, 150);\n}\n\nfunction draw() {\n  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));\n  background(backgroundColor);\n}\n</code>\n</div>"],"alt":"canvas with gradually changing background color","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":278,"description":"<p>The setGreen function sets the green component of a color.\nThe range depends on your color mode, in the default RGB mode it's between 0 and 255.</p>\n","itemtype":"method","name":"setGreen","params":[{"name":"green","description":"<p>the new green value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet backgroundColor = color(100, 50, 150);\nfunction draw() {\n  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));\n  background(backgroundColor);\n}\n</code>\n</div>"],"alt":"canvas with gradually changing background color","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":302,"description":"<p>The setBlue function sets the blue component of a color.\nThe range depends on your color mode, in the default RGB mode it's between 0 and 255.</p>\n","itemtype":"method","name":"setBlue","params":[{"name":"blue","description":"<p>the new blue value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet backgroundColor = color(100, 50, 150);\nfunction draw() {\n  backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));\n  background(backgroundColor);\n}\n</code>\n</div>"],"alt":"canvas with gradually changing background color","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":326,"description":"<p>The setAlpha function sets the transparency (alpha) value of a color.\nThe range depends on your color mode, in the default RGB mode it's between 0 and 255.</p>\n","itemtype":"method","name":"setAlpha","params":[{"name":"alpha","description":"<p>the new alpha value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nfunction draw() {\n  clear();\n  background(200);\n  squareColor = color(100, 50, 100);\n  squareColor.setAlpha(128 + 128 * sin(millis() / 1000));\n  fill(squareColor);\n  rect(13, 13, width - 26, height - 26);\n}\n</code>\n</div>"],"alt":"a square with gradually changing opacity on a gray background","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":397,"description":"<p>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.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":428,"description":"<p>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.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":447,"description":"<p>CSS named colors.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":601,"description":"<p>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.</p>\n<p>Note that RGB values of .9 are not parsed by IE, but are supported here for\ncolor string consistency.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":614,"description":"<p>Full color string patterns. The capture groups are necessary.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":962,"description":"<p>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.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/setting.js","line":13,"description":"<p>The <a href=\"#/p5/background\">background()</a> function sets the color used\nfor the background of the p5.js canvas. The default background is transparent.\nThis function is typically used within <a href=\"#/p5/draw\">draw()</a> to clear\nthe display window at the beginning of each frame, but it can be used inside\n<a href=\"#/p5/setup\">setup()</a> to set the background on the first frame of\nanimation or if the background need only be set once.</p>\n<p>The color is either specified in terms of the RGB, HSB, or HSL color depending\non the current <a href=\"#/p5/colorMode\">colorMode</a>. (The default color space\nis RGB, with each value in the range from 0 to 255). The alpha range by default\nis also 0 to 255.<br><br></p>\n<p>If a single string argument is provided, RGB, RGBA and Hex CSS color strings\nand all named color strings are supported. In this case, an alpha number\nvalue as a second argument is not supported, the RGBA form should be used.</p>\n<p>A <a href=\"#/p5.Color\">p5.Color</a> object can also be provided to set the background color.</p>\n<p>A <a href=\"#/p5.Image\">p5.Image</a> can also be provided to set the background image.</p>\n","itemtype":"method","name":"background","chainable":1,"example":["\n<div>\n<code>\n// Grayscale integer value\nbackground(51);\n</code>\n</div>\n\n<div>\n<code>\n// R, G & B integer values\nbackground(255, 204, 0);\n</code>\n</div>\n\n<div>\n<code>\n// H, S & B integer values\ncolorMode(HSB);\nbackground(255, 204, 100);\n</code>\n</div>\n\n<div>\n<code>\n// Named SVG/CSS color string\nbackground('red');\n</code>\n</div>\n\n<div>\n<code>\n// three-digit hexadecimal RGB notation\nbackground('#fae');\n</code>\n</div>\n\n<div>\n<code>\n// six-digit hexadecimal RGB notation\nbackground('#222222');\n</code>\n</div>\n\n<div>\n<code>\n// integer RGB notation\nbackground('rgb(0,255,0)');\n</code>\n</div>\n\n<div>\n<code>\n// integer RGBA notation\nbackground('rgba(0,255,0, 0.25)');\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGB notation\nbackground('rgb(100%,0%,10%)');\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGBA notation\nbackground('rgba(100%,0%,100%,0.5)');\n</code>\n</div>\n\n<div>\n<code>\n// p5 Color object\nbackground(color(0, 0, 255));\n</code>\n</div>"],"alt":"canvas with darkest charcoal grey background.\ncanvas with yellow background.\ncanvas with royal blue background.\ncanvas with red background.\ncanvas with pink background.\ncanvas with black background.\ncanvas with bright green background.\ncanvas with soft green background.\ncanvas with red background.\ncanvas with light purple background.\ncanvas with blue background.","class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":13,"params":[{"name":"color","description":"<p>any value created by the <a href=\"#/p5/color\">color()</a> function</p>\n","type":"p5.Color"}],"chainable":1},{"line":131,"params":[{"name":"colorstring","description":"<p>color string, possible formats include: integer\n                        rgb() or rgba(), percentage rgb() or rgba(),\n                        3-digit hex, 6-digit hex</p>\n","type":"String"},{"name":"a","description":"<p>opacity of the background relative to current\n                            color range (default is 0-255)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":141,"params":[{"name":"gray","description":"<p>specifies a value between white and black</p>\n","type":"Number"},{"name":"a","description":"","type":"Number","optional":true}],"chainable":1},{"line":148,"params":[{"name":"v1","description":"<p>red or hue value (depending on the current color\n                       mode)</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value (depending on the current\n                       color mode)</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value (depending on the current\n                       color mode)</p>\n","type":"Number"},{"name":"a","description":"","type":"Number","optional":true}],"chainable":1},{"line":160,"params":[{"name":"values","description":"<p>an array containing the red, green, blue\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":167,"params":[{"name":"image","description":"<p>image created with <a href=\"#/p5/loadImage\">loadImage()</a> or <a href=\"#/p5/createImage\">createImage()</a>,\n                            to set as background\n                            (must be same size as the sketch window)</p>\n","type":"p5.Image"},{"name":"a","description":"","type":"Number","optional":true}],"chainable":1}]},{"file":"src/color/setting.js","line":180,"description":"<p>Clears the pixels within a buffer. This function only clears the canvas.\nIt will not clear objects created by createX() methods such as\n<a href=\"#/p5/createVideo\">createVideo()</a> or <a href=\"#/p5/createDiv\">createDiv()</a>.\nUnlike the main graphics context, pixels in additional graphics areas created\nwith <a href=\"#/p5/createGraphics\">createGraphics()</a> can be entirely\nor partially transparent. This function clears everything to make all of\nthe pixels 100% transparent.</p>\n","itemtype":"method","name":"clear","chainable":1,"example":["\n<div>\n<code>\n// Clear the screen on mouse press.\nfunction draw() {\n  ellipse(mouseX, mouseY, 20, 20);\n}\nfunction mousePressed() {\n  clear();\n  background(128);\n}\n</code>\n</div>"],"alt":"small white ellipses are continually drawn at mouse's x and y coordinates.","class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":214,"description":"<p><a href=\"#/p5/colorMode\">colorMode()</a> changes the way p5.js interprets\ncolor data. By default, the parameters for <a href=\"#/p5/fill\">fill()</a>,\n<a href=\"#/p5/stroke\">stroke()</a>, <a href=\"#/p5/background\">background()</a>,\nand <a href=\"#/p5/color\">color()</a> are defined by values between 0 and 255\nusing the RGB color model. This is equivalent to setting colorMode(RGB, 255).\nSetting colorMode(HSB) lets you use the HSB system instead. By default, this\nis colorMode(HSB, 360, 100, 100, 1). You can also use HSL.</p>\n<p>Note: existing color objects remember the mode that they were created in,\nso you can change modes as you like without affecting their appearance.</p>\n","itemtype":"method","name":"colorMode","chainable":1,"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(RGB, 100);\nfor (let i = 0; i < 100; i++) {\n  for (let j = 0; j < 100; j++) {\n    stroke(i, j, 0);\n    point(i, j);\n  }\n}\n</code>\n</div>\n\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 100);\nfor (let i = 0; i < 100; i++) {\n  for (let j = 0; j < 100; j++) {\n    stroke(i, j, 100);\n    point(i, j);\n  }\n}\n</code>\n</div>\n\n<div>\n<code>\ncolorMode(RGB, 255);\nlet c = color(127, 255, 0);\ncolorMode(RGB, 1);\nlet myColor = c._getRed();\ntext(myColor, 10, 10, 80, 80);\n</code>\n</div>\n\n<div>\n<code>\nnoFill();\ncolorMode(RGB, 255, 255, 255, 1);\nbackground(255);\nstrokeWeight(4);\nstroke(255, 0, 10, 0.3);\nellipse(40, 40, 50, 50);\nellipse(50, 50, 40, 40);\n</code>\n</div>"],"alt":"Green to red gradient from bottom L to top R. shading originates from top left.\nRainbow gradient from left to right. Brightness increasing to white at top.\nunknown image.\n50x50 ellipse at middle L & 40x40 ellipse at center. Translucent pink outlines.","class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":214,"params":[{"name":"mode","description":"<p>either RGB, HSB or HSL, corresponding to\n                         Red/Green/Blue and Hue/Saturation/Brightness\n                         (or Lightness)</p>\n","type":"Constant"},{"name":"max","description":"<p>range for all values</p>\n","type":"Number","optional":true}],"chainable":1},{"line":289,"params":[{"name":"mode","description":"","type":"Constant"},{"name":"max1","description":"<p>range for the red or hue depending on the\n                             current color mode</p>\n","type":"Number"},{"name":"max2","description":"<p>range for the green or saturation depending\n                             on the current color mode</p>\n","type":"Number"},{"name":"max3","description":"<p>range for the blue or brightness/lightness\n                             depending on the current color mode</p>\n","type":"Number"},{"name":"maxA","description":"<p>range for the alpha</p>\n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/color/setting.js","line":333,"description":"<p>Sets the color used to fill shapes. For example, if you run fill(204, 102, 0),\nall shapes drawn after the fill command will be filled with the color orange.\nThis color is either specified in terms of the RGB or HSB color depending on\nthe current <a href=\"#/p5/colorMode\">colorMode()</a>. (The default color space\nis RGB, with each value in the range from 0 to 255). The alpha range by default\nis also 0 to 255.</p>\n<p>If a single string argument is provided, RGB, RGBA and Hex CSS color strings\nand all named color strings are supported. In this case, an alpha number\nvalue as a second argument is not supported, the RGBA form should be used.</p>\n<p>A p5 <a href=\"#/p5.Color\">Color</a> object can also be provided to set the fill color.</p>\n","itemtype":"method","name":"fill","chainable":1,"example":["\n<div>\n<code>\n// Grayscale integer value\nfill(51);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// R, G & B integer values\nfill(255, 204, 0);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// H, S & B integer values\ncolorMode(HSB);\nfill(255, 204, 100);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// Named SVG/CSS color string\nfill('red');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// three-digit hexadecimal RGB notation\nfill('#fae');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// six-digit hexadecimal RGB notation\nfill('#222222');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// integer RGB notation\nfill('rgb(0,255,0)');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// integer RGBA notation\nfill('rgba(0,255,0, 0.25)');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGB notation\nfill('rgb(100%,0%,10%)');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGBA notation\nfill('rgba(100%,0%,100%,0.5)');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// p5 Color object\nfill(color(0, 0, 255));\nrect(20, 20, 60, 60);\n</code>\n</div>"],"alt":"60x60 dark charcoal grey rect with black outline in center of canvas.\n60x60 yellow rect with black outline in center of canvas.\n60x60 royal blue rect with black outline in center of canvas.\n60x60 red rect with black outline in center of canvas.\n60x60 pink rect with black outline in center of canvas.\n60x60 black rect with black outline in center of canvas.\n60x60 light green rect with black outline in center of canvas.\n60x60 soft green rect with black outline in center of canvas.\n60x60 red rect with black outline in center of canvas.\n60x60 dark fuchsia rect with black outline in center of canvas.\n60x60 blue rect with black outline in center of canvas.","class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":333,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":460,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"chainable":1},{"line":466,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":473,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":480,"params":[{"name":"color","description":"<p>the fill color</p>\n","type":"p5.Color"}],"chainable":1}]},{"file":"src/color/setting.js","line":492,"description":"<p>Disables filling geometry. If both <a href=\"#/p5/noStroke\">noStroke()</a> and <a href=\"#/p5/noFill\">noFill()</a> are called,\nnothing will be drawn to the screen.</p>\n","itemtype":"method","name":"noFill","chainable":1,"example":["\n<div>\n<code>\nrect(15, 10, 55, 55);\nnoFill();\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  noFill();\n  stroke(100, 100, 240);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  box(45, 45, 45);\n}\n</code>\n</div>"],"alt":"white rect top middle and noFill rect center. Both 60x60 with black outlines.\nblack canvas with purple cube wireframe spinning","class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":533,"description":"<p>Disables drawing the stroke (outline). If both <a href=\"#/p5/noStroke\">noStroke()</a> and <a href=\"#/p5/noFill\">noFill()</a>\nare called, nothing will be drawn to the screen.</p>\n","itemtype":"method","name":"noStroke","chainable":1,"example":["\n<div>\n<code>\nnoStroke();\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  noStroke();\n  fill(240, 150, 150);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  box(45, 45, 45);\n}\n</code>\n</div>"],"alt":"60x60 white rect at center. no outline.\nblack canvas with pink cube spinning","class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":573,"description":"<p>Sets the color used to draw lines and borders around shapes. This color\nis either specified in terms of the RGB or HSB color depending on the\ncurrent <a href=\"#/p5/colorMode\">colorMode()</a> (the default color space\nis RGB, with each value in the range from 0 to 255). The alpha range by\ndefault is also 0 to 255.</p>\n<p>If a single string argument is provided, RGB, RGBA and Hex CSS color\nstrings and all named color strings are supported. In this case, an alpha\nnumber value as a second argument is not supported, the RGBA form should be\nused.</p>\n<p>A p5 <a href=\"#/p5.Color\">Color</a> object can also be provided to set the stroke color.</p>\n","itemtype":"method","name":"stroke","chainable":1,"example":["\n<div>\n<code>\n// Grayscale integer value\nstrokeWeight(4);\nstroke(51);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// R, G & B integer values\nstroke(255, 204, 0);\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// H, S & B integer values\ncolorMode(HSB);\nstrokeWeight(4);\nstroke(255, 204, 100);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// Named SVG/CSS color string\nstroke('red');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// three-digit hexadecimal RGB notation\nstroke('#fae');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// six-digit hexadecimal RGB notation\nstroke('#222222');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// integer RGB notation\nstroke('rgb(0,255,0)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// integer RGBA notation\nstroke('rgba(0,255,0,0.25)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGB notation\nstroke('rgb(100%,0%,10%)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGBA notation\nstroke('rgba(100%,0%,100%,0.5)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// p5 Color object\nstroke(color(0, 0, 255));\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>"],"alt":"60x60 white rect at center. Dark charcoal grey outline.\n60x60 white rect at center. Yellow outline.\n60x60 white rect at center. Royal blue outline.\n60x60 white rect at center. Red outline.\n60x60 white rect at center. Pink outline.\n60x60 white rect at center. Black outline.\n60x60 white rect at center. Bright green outline.\n60x60 white rect at center. Soft green outline.\n60x60 white rect at center. Red outline.\n60x60 white rect at center. Dark fuchsia outline.\n60x60 white rect at center. Blue outline.","class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":573,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":712,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"chainable":1},{"line":718,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":725,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":732,"params":[{"name":"color","description":"<p>the stroke color</p>\n","type":"p5.Color"}],"chainable":1}]},{"file":"src/color/setting.js","line":745,"description":"<p>All drawing that follows <a href=\"#/p5/erase\">erase()</a> will subtract from\nthe canvas.Erased areas will reveal the web page underneath the canvas.Erasing\ncan be canceled with <a href=\"#/p5/noErase\">noErase()</a>.</p>\n<p>Drawing done with <a href=\"#/p5/image\">image()</a> and <a href=\"#/p5/background\">\nbackground()</a> in between <a href=\"#/p5/erase\">erase()</a> and\n<a href=\"#/p5/noErase\">noErase()</a> will not erase the canvas but works as usual.</p>\n","itemtype":"method","name":"erase","params":[{"name":"strengthFill","description":"<p>A number (0-255) for the strength of erasing for a shape's fill.\n                                       This will default to 255 when no argument is given, which\n                                       is full strength.</p>\n","type":"Number","optional":true},{"name":"strengthStroke","description":"<p>A number (0-255) for the strength of erasing for a shape's stroke.\n                                       This will default to 255 when no argument is given, which\n                                       is full strength.</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nbackground(100, 100, 250);\nfill(250, 100, 100);\nrect(20, 20, 60, 60);\nerase();\nellipse(25, 30, 30);\nnoErase();\n</code>\n</div>\n\n<div>\n<code>\nbackground(150, 250, 150);\nfill(100, 100, 250);\nrect(20, 20, 60, 60);\nstrokeWeight(5);\nerase(150, 255);\ntriangle(50, 10, 70, 50, 90, 10);\nnoErase();\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  smooth();\n  createCanvas(100, 100, WEBGL);\n  // Make a &lt;p&gt; element and put it behind the canvas\n  let p = createP('I am a dom element');\n  p.center();\n  p.style('font-size', '20px');\n  p.style('text-align', 'center');\n  p.style('z-index', '-9999');\n}\n\nfunction draw() {\n  background(250, 250, 150);\n  fill(15, 195, 185);\n  noStroke();\n  sphere(30);\n  erase();\n  rotateY(frameCount * 0.02);\n  translate(0, 0, 40);\n  torus(15, 5);\n  noErase();\n}\n</code>\n</div>"],"alt":"60x60 centered pink rect, purple background. Elliptical area in top-left of rect is erased white.\n60x60 centered purple rect, mint green background. Triangle in top-right is partially erased with fully erased outline.\n60x60 centered teal sphere, yellow background. Torus rotating around sphere erases to reveal black text underneath.","class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":825,"description":"<p>Ends erasing that was started with <a href=\"#/p5/erase\">erase()</a>.\nThe <a href=\"#/p5/fill\">fill()</a>, <a href=\"#/p5/stroke\">stroke()</a>, and\n<a href=\"#/p5/blendMode\">blendMode()</a> settings will return to what they were\nprior to calling <a href=\"#/p5/erase\">erase()</a>.</p>\n","itemtype":"method","name":"noErase","chainable":1,"example":["\n<div>\n<code>\nbackground(235, 145, 15);\nnoStroke();\nfill(30, 45, 220);\nrect(30, 10, 10, 80);\nerase();\nellipse(50, 50, 60);\nnoErase();\nrect(70, 10, 10, 80);\n</code>\n</div>"],"alt":"Orange background, with two tall blue rectangles. A centered ellipse erased the first blue rect but not the second.","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). Here is a\nbrief outline of the functions called in this system.\n\nThe FES may be invoked by a call to either (1) _validateParameters","(2) _friendlyFileLoadError","(3) _friendlyError","or (4) helpForMisusedAtTopLevelCode.\n\nhelpForMisusedAtTopLevelCode is called by this file on window load to check for use\nof p5.js functions outside of setup() or draw()\nItems 1-3 above are called by functions in the p5 library located in other files.\n\n_friendlyFileLoadError is called by the loadX() methods.\n_friendlyError can be called by any function to offer a helpful error message.\n\n_validateParameters is called by functions in the p5.js API to help users ensure\nther are calling p5 function with the right parameter types. The property\ndisableFriendlyErrors = false can be set from a p5.js sketch to turn off parameter\nchecking. The call sequence from _validateParameters looks something like this:\n\n_validateParameters\n  lookupParamDoc\n  scoreOverload\n    testParamTypes\n    testParamType\n  getOverloadErrors\n  _friendlyParamError\n    ValidationError\n    report\n      friendlyWelcome\n\nThe call sequences to _friendlyFileLoadError and _friendlyError are like this:\n_friendlyFileLoadError\n  report\n\n_friendlyError\n  report\n\nreport() is the main function that prints directly to console with the output\nof the error helper message. Note: friendlyWelcome() also prints to console directly."],"class":"p5","module":"Color"},{"file":"src/core/friendly_errors/fes_core.js","line":675,"description":"<p>Prints out all the colors in the color pallete with white text.\nFor color blindness testing.</p>\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/stacktrace.js","line":1,"requires":["core"],"class":"p5","module":"Color"},{"file":"src/core/friendly_errors/stacktrace.js","line":34,"description":"<p>Given an Error object, extract the most information from it.</p>\n","params":[{"name":"error","description":"<p>object</p>\n","type":"Error"}],"return":{"description":"of stack frames","type":"Array"},"class":"p5","module":"Color"},{"file":"src/core/friendly_errors/validate_params.js","line":1,"requires":["core"],"class":"p5","module":"Color"},{"file":"src/core/friendly_errors/validate_params.js","line":623,"description":"<p>Validates parameters\nparam  {String}               func    the name of the function\nparam  {Array}                args    user input arguments</p>\n<p>example:\n const a;\n ellipse(10,10,a,5);\nconsole ouput:\n \"It looks like ellipse received an empty variable in spot #2.\"</p>\n<p>example:\n ellipse(10,\"foo\",5,5);\nconsole output:\n \"ellipse was expecting a number for parameter #1,\n          received \"foo\" instead.\"</p>\n","class":"p5","module":"Color"},{"file":"src/core/shape/2d_primitives.js","line":16,"description":"<p>This function does 3 things:</p>\n<ol>\n<li><p>Bounds the desired start/stop angles for an arc (in radians) so that:</p>\n<pre><code>0 <= start < TWO_PI ;    start <= stop < start + TWO_PI</code></pre><p>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.</p>\n</li>\n<li><p>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.</p>\n</li>\n<li><p>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).</p>\n</li>\n</ol>\n","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":102,"description":"<p>Draw an arc to the screen. If called with only x, y, w, h, start and stop,\nthe arc will be drawn and filled as an open pie segment. If a mode parameter\nis provided, the arc will be filled like an open semi-circle (OPEN), a closed\nsemi-circle (CHORD), or as a closed pie segment (PIE). The origin may be changed\nwith the <a href=\"#/p5/ellipseMode\">ellipseMode()</a> function.</p>\n<p>The arc is always drawn clockwise from wherever start falls to wherever stop\nfalls on the ellipse.Adding or subtracting TWO_PI to either angle does not\nchange where they fall. If both start and stop fall at the same place, a full\nellipse will be drawn. Be aware that the y-axis increases in the downward\ndirection, therefore angles are measured clockwise from the positive\nx-direction (\"3 o'clock\").</p>\n","itemtype":"method","name":"arc","params":[{"name":"x","description":"<p>x-coordinate of the arc's ellipse</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the arc's ellipse</p>\n","type":"Number"},{"name":"w","description":"<p>width of the arc's ellipse by default</p>\n","type":"Number"},{"name":"h","description":"<p>height of the arc's ellipse by default</p>\n","type":"Number"},{"name":"start","description":"<p>angle to start the arc, specified in radians</p>\n","type":"Number"},{"name":"stop","description":"<p>angle to stop the arc, specified in radians</p>\n","type":"Number"},{"name":"mode","description":"<p>optional parameter to determine the way of drawing\n                        the arc. either CHORD, PIE or OPEN</p>\n","type":"Constant","optional":true},{"name":"detail","description":"<p>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.</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\narc(50, 55, 50, 50, 0, HALF_PI);\nnoFill();\narc(50, 55, 60, 60, HALF_PI, PI);\narc(50, 55, 70, 70, PI, PI + QUARTER_PI);\narc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);\n</code>\n</div>\n\n<div>\n<code>\narc(50, 50, 80, 80, 0, PI + QUARTER_PI);\n</code>\n</div>\n\n<div>\n<code>\narc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);\n</code>\n</div>\n\n<div>\n<code>\narc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);\n</code>\n</div>\n\n<div>\n<code>\narc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);\n</code>\n</div>"],"alt":"shattered outline of an ellipse with a quarter of a white circle bottom-right.\nwhite ellipse with top right quarter missing.\nwhite ellipse with black outline with top right missing.\nwhite ellipse with top right missing with black outline around shape.\nwhite ellipse with top right quarter missing with black outline around the shape.","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":218,"description":"<p>Draws an ellipse (oval) to the screen. By default, the first two parameters\nset the location of the center of the ellipse, and the third and fourth\nparameters set the shape's width and height. If no height is specified, the\nvalue of width is used for both the width and height. If a negative height or\nwidth is specified, the absolute value is taken.</p>\n<p>An ellipse with equal width and height is a circle.The origin may be changed\nwith the <a href=\"#/p5/ellipseMode\">ellipseMode()</a> function.</p>\n","itemtype":"method","name":"ellipse","chainable":1,"example":["\n<div>\n<code>\nellipse(56, 46, 55, 55);\n</code>\n</div>"],"alt":"white ellipse with black outline in middle-right of canvas that is 55x55","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":218,"params":[{"name":"x","description":"<p>x-coordinate of the center of ellipse.</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the center of ellipse.</p>\n","type":"Number"},{"name":"w","description":"<p>width of the ellipse.</p>\n","type":"Number"},{"name":"h","description":"<p>height of the ellipse.</p>\n","type":"Number","optional":true}],"chainable":1},{"line":245,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"w","description":"","type":"Number"},{"name":"h","description":"","type":"Number"},{"name":"detail","description":"<p>number of radial sectors to draw (for WebGL mode)</p>\n","type":"Integer"}]}]},{"file":"src/core/shape/2d_primitives.js","line":258,"description":"<p>Draws a circle to the screen. A circle is a simple closed shape.It is the set\nof all points in a plane that are at a given distance from a given point,\nthe centre.This function is a special case of the ellipse() function, where\nthe width and height of the ellipse are the same. Height and width of the\nellipse correspond to the diameter of the circle. By default, the first two\nparameters set the location of the centre of the circle, the third sets the\ndiameter of the circle.</p>\n","itemtype":"method","name":"circle","params":[{"name":"x","description":"<p>x-coordinate of the centre of the circle.</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the centre of the circle.</p>\n","type":"Number"},{"name":"d","description":"<p>diameter of the circle.</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\n// Draw a circle at location (30, 30) with a diameter of 20.\ncircle(30, 30, 20);\n</code>\n</div>"],"alt":"white circle with black outline in mid of canvas that is 55x55.","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":317,"description":"<p>Draws a line (a direct path between two points) to the screen. If called with\nonly 4 parameters, it will draw a line in 2D with a default width of 1 pixel.\nThis width can be modified by using the <a href=\"#/p5/strokeWeight\">\nstrokeWeight()</a> function. A line cannot be filled, therefore the <a\nhref=\"#/p5/fill\">fill()</a> function will not affect the color of a line. So to\ncolor a line, use the <a href=\"#/p5/stroke\">stroke()</a> function.</p>\n","itemtype":"method","name":"line","chainable":1,"example":["\n<div>\n<code>\nline(30, 20, 85, 75);\n</code>\n</div>\n\n<div>\n<code>\nline(30, 20, 85, 20);\nstroke(126);\nline(85, 20, 85, 75);\nstroke(255);\nline(85, 75, 30, 75);\n</code>\n</div>"],"alt":"An example showing a line 78 pixels long running from mid-top to bottom-right of canvas.\nAn example showing 3 lines of various stroke sizes. Form top, bottom and right sides of a square.","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":317,"params":[{"name":"x1","description":"<p>the x-coordinate of the first point</p>\n","type":"Number"},{"name":"y1","description":"<p>the y-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"<p>the x-coordinate of the second point</p>\n","type":"Number"},{"name":"y2","description":"<p>the y-coordinate of the second point</p>\n","type":"Number"}],"chainable":1},{"line":353,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>the z-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>the z-coordinate of the second point</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/2d_primitives.js","line":373,"description":"<p>Draws a point, a coordinate in space at the dimension of one pixel.\nThe first parameter is the horizontal value for the point, the second\nparam is the vertical value for the point. The color of the point is\nchanged with the <a href=\"#/p5/stroke\">stroke()</a> function. The size of the point\ncan be changed with the <a href=\"#/p5/strokeWeight\">strokeWeight()</a> function.</p>\n","itemtype":"method","name":"point","chainable":1,"example":["\n<div>\n<code>\npoint(30, 20);\npoint(85, 20);\npoint(85, 75);\npoint(30, 75);\n</code>\n</div>\n\n<div>\n<code>\npoint(30, 20);\npoint(85, 20);\nstroke('purple'); // Change the color\nstrokeWeight(10); // Make the points 10 pixels in size\npoint(85, 75);\npoint(30, 75);\n</code>\n</div>\n\n<div>\n<code>\nlet a = createVector(10, 10);\npoint(a);\nlet b = createVector(10, 20);\npoint(b);\npoint(createVector(20, 10));\npoint(createVector(20, 20));\n</code>\n</div>"],"alt":"4 points centered in the middle-right of the canvas.\n2 large points and 2 large purple points centered in the middle-right of the canvas.\nVertices of a square of length 10 pixels towards the top-left of the canvas.","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":373,"params":[{"name":"x","description":"<p>the x-coordinate</p>\n","type":"Number"},{"name":"y","description":"<p>the y-coordinate</p>\n","type":"Number"},{"name":"z","description":"<p>the z-coordinate (for WebGL mode)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":423,"params":[{"name":"coordinate_vector","description":"<p>the coordinate vector</p>\n","type":"p5.Vector"}],"chainable":1}]},{"file":"src/core/shape/2d_primitives.js","line":447,"description":"<p>Draws a quad on the canvas. A quad is a quadrilateral, a four sided polygon. It is\nsimilar to a rectangle, but the angles between its edges are not\nconstrained to ninety degrees. The first pair of parameters (x1,y1)\nsets the first vertex and the subsequent pairs should proceed\nclockwise or counter-clockwise around the defined shape.\nz-arguments only work when quad() is used in WEBGL mode.</p>\n","itemtype":"method","name":"quad","chainable":1,"example":["\n<div>\n<code>\nquad(38, 31, 86, 20, 69, 63, 30, 76);\n</code>\n</div>"],"alt":"irregular white quadrilateral shape with black outline mid-right of canvas.","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":447,"params":[{"name":"x1","description":"<p>the x-coordinate of the first point</p>\n","type":"Number"},{"name":"y1","description":"<p>the y-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"<p>the x-coordinate of the second point</p>\n","type":"Number"},{"name":"y2","description":"<p>the y-coordinate of the second point</p>\n","type":"Number"},{"name":"x3","description":"<p>the x-coordinate of the third point</p>\n","type":"Number"},{"name":"y3","description":"<p>the y-coordinate of the third point</p>\n","type":"Number"},{"name":"x4","description":"<p>the x-coordinate of the fourth point</p>\n","type":"Number"},{"name":"y4","description":"<p>the y-coordinate of the fourth point</p>\n","type":"Number"}],"chainable":1},{"line":475,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>the z-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>the z-coordinate of the second point</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>the z-coordinate of the third point</p>\n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"<p>the z-coordinate of the fourth point</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/2d_primitives.js","line":512,"description":"<p>Draws a rectangle on the canvas. A rectangle is a four-sided closed shape with\nevery angle at ninety degrees. By default, the first two parameters set\nthe location of the upper-left corner, the third sets the width, and the\nfourth sets the height. The way these parameters are interpreted, may be\nchanged with the <a href=\"#/p5/rectMode\">rectMode()</a> function.</p>\n<p>The fifth, sixth, seventh and eighth parameters, if specified,\ndetermine corner radius for the top-left, top-right, lower-right and\nlower-left corners, respectively. An omitted corner radius parameter is set\nto the value of the previously specified radius value in the parameter list.</p>\n","itemtype":"method","name":"rect","chainable":1,"example":["\n<div>\n<code>\n// Draw a rectangle at location (30, 20) with a width and height of 55.\nrect(30, 20, 55, 55);\n</code>\n</div>\n\n<div>\n<code>\n// Draw a rectangle with rounded corners, each having a radius of 20.\nrect(30, 20, 55, 55, 20);\n</code>\n</div>\n\n<div>\n<code>\n// Draw a rectangle with rounded corners having the following radii:\n// top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.\nrect(30, 20, 55, 55, 20, 15, 10, 5);\n</code>\n</div>"],"alt":"55x55 white rect with black outline in mid-right of canvas.\n55x55 white rect with black outline and rounded edges in mid-right of canvas.\n55x55 white rect with black outline and rounded edges of different radii.","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":512,"params":[{"name":"x","description":"<p>x-coordinate of the rectangle.</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the rectangle.</p>\n","type":"Number"},{"name":"w","description":"<p>width of the rectangle.</p>\n","type":"Number"},{"name":"h","description":"<p>height of the rectangle.</p>\n","type":"Number","optional":true},{"name":"tl","description":"<p>optional radius of top-left corner.</p>\n","type":"Number","optional":true},{"name":"tr","description":"<p>optional radius of top-right corner.</p>\n","type":"Number","optional":true},{"name":"br","description":"<p>optional radius of bottom-right corner.</p>\n","type":"Number","optional":true},{"name":"bl","description":"<p>optional radius of bottom-left corner.</p>\n","type":"Number","optional":true}],"chainable":1},{"line":563,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"w","description":"","type":"Number"},{"name":"h","description":"","type":"Number"},{"name":"detailX","description":"<p>number of segments in the x-direction (for WebGL mode)</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of segments in the y-direction (for WebGL mode)</p>\n","type":"Integer","optional":true}],"chainable":1}]},{"file":"src/core/shape/2d_primitives.js","line":578,"description":"<p>Draws a square to the screen. A square is a four-sided shape with every angle\nat ninety degrees, and equal side size. This function is a special case of the\nrect() function, where the width and height are the same, and the parameter\nis called \"s\" for side size. By default, the first two parameters set the\nlocation of the upper-left corner, the third sets the side size of the square.\nThe way these parameters are interpreted, may be changed with the <a\nhref=\"#/p5/rectMode\">rectMode()</a> function.</p>\n<p>The fourth, fifth, sixth and seventh parameters, if specified,\ndetermine corner radius for the top-left, top-right, lower-right and\nlower-left corners, respectively. An omitted corner radius parameter is set\nto the value of the previously specified radius value in the parameter list.</p>\n","itemtype":"method","name":"square","params":[{"name":"x","description":"<p>x-coordinate of the square.</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the square.</p>\n","type":"Number"},{"name":"s","description":"<p>side size of the square.</p>\n","type":"Number"},{"name":"tl","description":"<p>optional radius of top-left corner.</p>\n","type":"Number","optional":true},{"name":"tr","description":"<p>optional radius of top-right corner.</p>\n","type":"Number","optional":true},{"name":"br","description":"<p>optional radius of bottom-right corner.</p>\n","type":"Number","optional":true},{"name":"bl","description":"<p>optional radius of bottom-left corner.</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// Draw a square at location (30, 20) with a side size of 55.\nsquare(30, 20, 55);\n</code>\n</div>\n\n<div>\n<code>\n// Draw a square with rounded corners, each having a radius of 20.\nsquare(30, 20, 55, 20);\n</code>\n</div>\n\n<div>\n<code>\n// Draw a square with rounded corners having the following radii:\n// top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.\nsquare(30, 20, 55, 20, 15, 10, 5);\n</code>\n</div>"],"alt":"55x55 white square with black outline in mid-right of canvas.\n55x55 white square with black outline and rounded edges in mid-right of canvas.\n55x55 white square with black outline and rounded edges of different radii.","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":662,"description":"<p>Draws a trangle to the canvas. A triangle is a plane created by connecting\nthree points. The first two arguments specify the first point, the middle two\narguments specify the second point, and the last two arguments specify the\nthird point.</p>\n","itemtype":"method","name":"triangle","params":[{"name":"x1","description":"<p>x-coordinate of the first point</p>\n","type":"Number"},{"name":"y1","description":"<p>y-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"<p>x-coordinate of the second point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate of the second point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate of the third point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate of the third point</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\ntriangle(30, 75, 58, 20, 86, 75);\n</code>\n</div>"],"alt":"white triangle with black outline in mid-right of canvas.","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/attributes.js","line":12,"description":"<p>Modifies the location from which ellipses are drawn by changing the way in\nwhich parameters given to <a href=\"#/p5/ellipse\">ellipse()</a>,\n<a href=\"#/p5/circle\">circle()</a> and <a href=\"#/p5/arc\">arc()</a> are interpreted.</p>\n<p>The default mode is CENTER, in which the first two parameters are interpreted\nas the shape's center point's x and y coordinates respectively, while the third\nand fourth parameters are its width and height.</p>\n<p>ellipseMode(RADIUS) also uses the first two parameters as the shape's center\npoint's x and y coordinates, but uses the third and fourth parameters to\nspecify half of the shapes's width and height.</p>\n<p>ellipseMode(CORNER) interprets the first two parameters as the upper-left\ncorner of the shape, while the third and fourth parameters are its width\nand height.</p>\n<p>ellipseMode(CORNERS) interprets the first two parameters as the location of\none corner of the ellipse's bounding box, and the third and fourth parameters\nas the location of the opposite corner.</p>\n<p>The parameter to this method must be written in ALL CAPS because they are\npredefined as constants in ALL CAPS and Javascript is a case-sensitive language.</p>\n","itemtype":"method","name":"ellipseMode","params":[{"name":"mode","description":"<p>either CENTER, RADIUS, CORNER, or CORNERS</p>\n","type":"Constant"}],"chainable":1,"example":["\n<div>\n<code>\n// Example showing RADIUS and CENTER ellipsemode with 2 overlaying ellipses\nellipseMode(RADIUS);\nfill(255);\nellipse(50, 50, 30, 30); // Outer white ellipse\nellipseMode(CENTER);\nfill(100);\nellipse(50, 50, 30, 30); // Inner gray ellipse\n</code>\n</div>\n\n<div>\n<code>\n// Example showing CORNER and CORNERS ellipseMode with 2 overlaying ellipses\nellipseMode(CORNER);\nfill(255);\nellipse(25, 25, 50, 50); // Outer white ellipse\nellipseMode(CORNERS);\nfill(100);\nellipse(25, 25, 50, 50); // Inner gray ellipse\n</code>\n</div>"],"alt":"60x60 white ellipse and 30x30 grey ellipse with black outlines at center.\n60x60 white ellipse and 30x30 grey ellipse top-right with black outlines.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":81,"description":"<p>Draws all geometry with jagged (aliased) edges. Note that <a href=\"#/p5/smooth\">smooth()</a> is\nactive by default in 2D mode, so it is necessary to call <a href=\"#/p5/noSmooth\">noSmooth()</a> to disable\nsmoothing of geometry, images, and fonts. In 3D mode, <a href=\"#/p5/noSmooth\">noSmooth()</a> is enabled\nby default, so it is necessary to call <a href=\"#/p5/smooth\">smooth()</a> if you would like\nsmooth (antialiased) edges on your geometry.</p>\n","itemtype":"method","name":"noSmooth","chainable":1,"example":["\n<div>\n<code>\nbackground(0);\nnoStroke();\nsmooth();\nellipse(30, 48, 36, 36);\nnoSmooth();\nellipse(70, 48, 36, 36);\n</code>\n</div>"],"alt":"2 pixelated 36x36 white ellipses to left & right of center, black background","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":115,"description":"<p>Modifies the location from which rectangles are drawn by changing the way\nin which parameters given to <a href=\"#/p5/rect\">rect()</a> are interpreted.</p>\n<p>The default mode is CORNER, which interprets the first two parameters as the\nupper-left corner of the shape, while the third and fourth parameters are its\nwidth and height.</p>\n<p>rectMode(CORNERS) interprets the first two parameters as the location of\none of the corner, and the third and fourth parameters as the location of\nthe diagonally opposite corner. Note, the rectangle is drawn between the\ncoordinates, so it is not neccesary that the first corner be the upper left\ncorner.</p>\n<p>rectMode(CENTER) interprets the first two parameters as the shape's center\npoint, while the third and fourth parameters are its width and height.</p>\n<p>rectMode(RADIUS) also uses the first two parameters as the shape's center\npoint, but uses the third and fourth parameters to specify half of the shapes's\nwidth and height respectively.</p>\n<p>The parameter to this method must be written in ALL CAPS because they are\npredefined as constants in ALL CAPS and Javascript is a case-sensitive language.</p>\n","itemtype":"method","name":"rectMode","params":[{"name":"mode","description":"<p>either CORNER, CORNERS, CENTER, or RADIUS</p>\n","type":"Constant"}],"chainable":1,"example":["\n<div>\n<code>\nrectMode(CORNER);\nfill(255);\nrect(25, 25, 50, 50); // Draw white rectangle using CORNER mode\n\nrectMode(CORNERS);\nfill(100);\nrect(25, 25, 50, 50); // Draw gray rectanle using CORNERS mode\n</code>\n</div>\n\n<div>\n<code>\nrectMode(RADIUS);\nfill(255);\nrect(50, 50, 30, 30); // Draw white rectangle using RADIUS mode\n\nrectMode(CENTER);\nfill(100);\nrect(50, 50, 30, 30); // Draw gray rectangle using CENTER mode\n</code>\n</div>"],"alt":"50x50 white rect at center and 25x25 grey rect in the top left of the other.\n50x50 white rect at center and 25x25 grey rect in the center of the other.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":184,"description":"<p>Draws all geometry with smooth (anti-aliased) edges. <a href=\"#/p5/smooth\">smooth()</a> will also\nimprove image quality of resized images. Note that <a href=\"#/p5/smooth\">smooth()</a> is active by\ndefault in 2D mode; <a href=\"#/p5/noSmooth\">noSmooth()</a> can be used to disable smoothing of geometry,\nimages, and fonts. In 3D mode, <a href=\"#/p5/noSmooth\">noSmooth()</a> is enabled\nby default, so it is necessary to call <a href=\"#/p5/smooth\">smooth()</a> if you would like\nsmooth (antialiased) edges on your geometry.</p>\n","itemtype":"method","name":"smooth","chainable":1,"example":["\n<div>\n<code>\nbackground(0);\nnoStroke();\nsmooth();\nellipse(30, 48, 36, 36);\nnoSmooth();\nellipse(70, 48, 36, 36);\n</code>\n</div>"],"alt":"2 pixelated 36x36 white ellipses one left one right of center. On black.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":219,"description":"<p>Sets the style for rendering line endings. These ends are either rounded,\nsquared or extended, each of which specified with the corresponding\nparameters: ROUND, SQUARE and PROJECT. The default cap is ROUND.</p>\n<p>The parameter to this method must be written in ALL CAPS because they are\npredefined as constants in ALL CAPS and Javascript is a case-sensitive language.</p>\n","itemtype":"method","name":"strokeCap","params":[{"name":"cap","description":"<p>either ROUND, SQUARE or PROJECT</p>\n","type":"Constant"}],"chainable":1,"example":["\n<div>\n<code>\n// Example of different strokeCaps\nstrokeWeight(12.0);\nstrokeCap(ROUND);\nline(20, 30, 80, 30);\nstrokeCap(SQUARE);\nline(20, 50, 80, 50);\nstrokeCap(PROJECT);\nline(20, 70, 80, 70);\n</code>\n</div>"],"alt":"3 lines. Top line: rounded ends, mid: squared, bottom:longer squared ends.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":259,"description":"<p>Sets the style of the joints which connect line segments. These joints\nare either mitered, beveled or rounded and specified with the\ncorresponding parameters MITER, BEVEL and ROUND. The default joint is\nMITER.</p>\n<p>The parameter to this method must be written in ALL CAPS because they are\npredefined as constants in ALL CAPS and Javascript is a case-sensitive language.</p>\n","itemtype":"method","name":"strokeJoin","params":[{"name":"join","description":"<p>either MITER, BEVEL, ROUND</p>\n","type":"Constant"}],"chainable":1,"example":["\n<div>\n<code>\n// Example of MITER type of joints\nnoFill();\nstrokeWeight(10.0);\nstrokeJoin(MITER);\nbeginShape();\nvertex(35, 20);\nvertex(65, 50);\nvertex(35, 80);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\n// Example of BEVEL type of joints\nnoFill();\nstrokeWeight(10.0);\nstrokeJoin(BEVEL);\nbeginShape();\nvertex(35, 20);\nvertex(65, 50);\nvertex(35, 80);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\n// Example of ROUND type of joints\nnoFill();\nstrokeWeight(10.0);\nstrokeJoin(ROUND);\nbeginShape();\nvertex(35, 20);\nvertex(65, 50);\nvertex(35, 80);\nendShape();\n</code>\n</div>"],"alt":"Right-facing arrowhead shape with pointed tip in center of canvas.\nRight-facing arrowhead shape with flat tip in center of canvas.\nRight-facing arrowhead shape with rounded tip in center of canvas.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":331,"description":"<p>Sets the width of the stroke used for lines, points and the border around\nshapes. All widths are set in units of pixels.</p>\n","itemtype":"method","name":"strokeWeight","params":[{"name":"weight","description":"<p>the weight of the stroke (in pixels)</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\n// Example of different stroke weights\nstrokeWeight(1); // Default\nline(20, 20, 80, 20);\nstrokeWeight(4); // Thicker\nline(20, 40, 80, 40);\nstrokeWeight(10); // Beastly\nline(20, 70, 80, 70);\n</code>\n</div>"],"alt":"3 horizontal black lines. Top line: thin, mid: medium, bottom:thick.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/curves.js","line":13,"description":"<p>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.</p>\n<p>Bezier curves were developed by French automotive engineer Pierre Bezier,\nand are commonly used in computer graphics to define gently sloping curves.\nSee also <a href=\"#/p5/curve\">curve()</a>.</p>\n","itemtype":"method","name":"bezier","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\nbackground(0, 0, 0);\nnoFill();\nstroke(255);\nbezier(250, 250, 0, 100, 100, 0, 100, 0, 0, 0, 100, 0);\n</code>\n</div>"],"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":"<p>x-coordinate for the first anchor point</p>\n","type":"Number"},{"name":"y1","description":"<p>y-coordinate for the first anchor point</p>\n","type":"Number"},{"name":"x2","description":"<p>x-coordinate for the first control point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate for the first control point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate for the second control point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate for the second control point</p>\n","type":"Number"},{"name":"x4","description":"<p>x-coordinate for the second anchor point</p>\n","type":"Number"},{"name":"y4","description":"<p>y-coordinate for the second anchor point</p>\n","type":"Number"}],"chainable":1},{"line":62,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>z-coordinate for the first anchor point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>z-coordinate for the first control point</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>z-coordinate for the second control point</p>\n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"<p>z-coordinate for the second anchor point</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/curves.js","line":92,"description":"<p>Sets the resolution at which Bezier's curve is displayed. The default value is 20.</p>\n<p>Note, This function is only useful when using the WEBGL renderer\nas the default canvas renderer does not use this information.</p>\n","itemtype":"method","name":"bezierDetail","params":[{"name":"detail","description":"<p>resolution of the curves</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  noFill();\n  bezierDetail(5);\n}\n\nfunction draw() {\n  background(200);\n  bezier(-40, -40, 0,\n          90, -40, 0,\n         -90,  40, 0,\n          40,  40, 0);\n}\n</code>\n</div>"],"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":130,"description":"<p>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.</p>\n","itemtype":"method","name":"bezierPoint","params":[{"name":"a","description":"<p>coordinate of first point on the curve</p>\n","type":"Number"},{"name":"b","description":"<p>coordinate of first control point</p>\n","type":"Number"},{"name":"c","description":"<p>coordinate of second control point</p>\n","type":"Number"},{"name":"d","description":"<p>coordinate of second point on the curve</p>\n","type":"Number"},{"name":"t","description":"<p>value between 0 and 1</p>\n","type":"Number"}],"return":{"description":"the value of the Bezier at position t","type":"Number"},"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"10 points plotted on a given bezier at equal distances.","class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":185,"description":"<p>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.</p>\n","itemtype":"method","name":"bezierTangent","params":[{"name":"a","description":"<p>coordinate of first point on the curve</p>\n","type":"Number"},{"name":"b","description":"<p>coordinate of first control point</p>\n","type":"Number"},{"name":"c","description":"<p>coordinate of second control point</p>\n","type":"Number"},{"name":"d","description":"<p>coordinate of second point on the curve</p>\n","type":"Number"},{"name":"t","description":"<p>value between 0 and 1</p>\n","type":"Number"}],"return":{"description":"the tangent at position t","type":"Number"},"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":264,"description":"<p>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. <br /><br />\nLonger curves can be created by putting a series of <a href=\"#/p5/curve\">curve()</a> functions\ntogether or using <a href=\"#/p5/curveVertex\">curveVertex()</a>. An additional function called\n<a href=\"#/p5/curveTightness\">curveTightness()</a> provides control for the visual quality of the curve.\nThe <a href=\"#/p5/curve\">curve()</a> function is an implementation of Catmull-Rom splines.</p>\n","itemtype":"method","name":"curve","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":264,"params":[{"name":"x1","description":"<p>x-coordinate for the beginning control point</p>\n","type":"Number"},{"name":"y1","description":"<p>y-coordinate for the beginning control point</p>\n","type":"Number"},{"name":"x2","description":"<p>x-coordinate for the first point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate for the first point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate for the second point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate for the second point</p>\n","type":"Number"},{"name":"x4","description":"<p>x-coordinate for the ending control point</p>\n","type":"Number"},{"name":"y4","description":"<p>y-coordinate for the ending control point</p>\n","type":"Number"}],"chainable":1},{"line":332,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>z-coordinate for the beginning control point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>z-coordinate for the first point</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>z-coordinate for the second point</p>\n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"<p>z-coordinate for the ending control point</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/curves.js","line":358,"description":"<p>Sets the resolution at which curves display. The default value is 20 while\nthe minimum value is 3.</p>\n<p>This function is only useful when using the WEBGL renderer\nas the default canvas renderer does not use this\ninformation.</p>\n","itemtype":"method","name":"curveDetail","params":[{"name":"resolution","description":"<p>resolution of the curves</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\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</code>\n</div>"],"alt":"white arch shape with a low level of curve detail.","class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":398,"description":"<p>Modifies the quality of forms created with <a href=\"#/p5/curve\">curve()</a>\nand <a href=\"#/p5/curveVertex\">curveVertex()</a>.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.</p>\n","itemtype":"method","name":"curveTightness","params":[{"name":"amount","description":"<p>amount of deformation from the original vertices</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"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":444,"description":"<p>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.</p>\n","itemtype":"method","name":"curvePoint","params":[{"name":"a","description":"<p>coordinate of first control point of the curve</p>\n","type":"Number"},{"name":"b","description":"<p>coordinate of first point</p>\n","type":"Number"},{"name":"c","description":"<p>coordinate of second point</p>\n","type":"Number"},{"name":"d","description":"<p>coordinate of second control point</p>\n","type":"Number"},{"name":"t","description":"<p>value between 0 and 1</p>\n","type":"Number"}],"return":{"description":"bezier value at position t","type":"Number"},"example":["\n<div>\n<code>\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</code>\n</div>\n\nline hooking down to right-bottom with 13 5x5 white ellipse points"],"class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":493,"description":"<p>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.</p>\n","itemtype":"method","name":"curveTangent","params":[{"name":"a","description":"<p>coordinate of first control point</p>\n","type":"Number"},{"name":"b","description":"<p>coordinate of first point on the curve</p>\n","type":"Number"},{"name":"c","description":"<p>coordinate of second point on the curve</p>\n","type":"Number"},{"name":"d","description":"<p>coordinate of second conrol point</p>\n","type":"Number"},{"name":"t","description":"<p>value between 0 and 1</p>\n","type":"Number"}],"return":{"description":"the tangent at position t","type":"Number"},"example":["\n<div>\n<code>\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</code>\n</div>"],"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":"<p>Use the <a href=\"#/p5/beginContour\">beginContour()</a> and\n<a href=\"#/p5/endContour\">endContour()</a> functions to create negative shapes\nwithin shapes such as the center of the letter 'O'. <a href=\"#/p5/beginContour\">beginContour()</a>\nbegins recording vertices for the shape and <a href=\"#/p5/endContour\">endContour()</a> 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.</p>\n<p>These functions can only be used within a <a href=\"#/p5/beginShape\">beginShape()</a>/<a href=\"#/p5/endShape\">endShape()</a> pair and\ntransformations such as <a href=\"#/p5/translate\">translate()</a>, <a href=\"#/p5/rotate\">rotate()</a>, and <a href=\"#/p5/scale\">scale()</a> do not work\nwithin a <a href=\"#/p5/beginContour\">beginContour()</a>/<a href=\"#/p5/endContour\">endContour()</a> pair. It is also not possible to use\nother shapes, such as <a href=\"#/p5/ellipse\">ellipse()</a> or <a href=\"#/p5/rect\">rect()</a> within.</p>\n","itemtype":"method","name":"beginContour","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"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":67,"description":"<p>Using the <a href=\"#/p5/beginShape\">beginShape()</a> and <a href=\"#/p5/endShape\">endShape()</a> functions allow creating more\ncomplex forms. <a href=\"#/p5/beginShape\">beginShape()</a> begins recording vertices for a shape and\n<a href=\"#/p5/endShape\">endShape()</a> 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.</p>\n<p>The parameters available for <a href=\"#/p5/beginShape\">beginShape()</a> are POINTS, LINES, TRIANGLES,\nTRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIP, and TESS (WebGL only). After calling the\n<a href=\"#/p5/beginShape\">beginShape()</a> function, a series of <a href=\"#/p5/vertex\">vertex()</a> commands must follow. To stop\ndrawing the shape, call <a href=\"#/p5/endShape\">endShape()</a>. Each shape will be outlined with the\ncurrent stroke color and filled with the fill color.</p>\n<p>Transformations such as <a href=\"#/p5/translate\">translate()</a>, <a href=\"#/p5/rotate\">rotate()</a>, and <a href=\"#/p5/scale\">scale()</a> do not work\nwithin <a href=\"#/p5/beginShape\">beginShape()</a>. It is also not possible to use other shapes, such as\n<a href=\"#/p5/ellipse\">ellipse()</a> or <a href=\"#/p5/rect\">rect()</a> within <a href=\"#/p5/beginShape\">beginShape()</a>.</p>\n","itemtype":"method","name":"beginShape","params":[{"name":"kind","description":"<p>either POINTS, LINES, TRIANGLES, TRIANGLE_FAN\n                               TRIANGLE_STRIP, QUADS, QUAD_STRIP or TESS</p>\n","type":"Constant","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape(CLOSE);\n</code>\n</div>\n\n<div>\n<code>\nbeginShape(POINTS);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\nbeginShape(LINES);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\nnoFill();\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\nnoFill();\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape(CLOSE);\n</code>\n</div>\n\n<div>\n<code>\nbeginShape(TRIANGLES);\nvertex(30, 75);\nvertex(40, 20);\nvertex(50, 75);\nvertex(60, 20);\nvertex(70, 75);\nvertex(80, 20);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\nbeginShape();\nvertex(20, 20);\nvertex(40, 20);\nvertex(40, 40);\nvertex(60, 40);\nvertex(60, 60);\nvertex(20, 60);\nendShape(CLOSE);\n</code>\n</div>"],"alt":"white square-shape with black outline in middle-right of canvas.\n4 black points in a square shape in middle-right of canvas.\n2 horizontal black lines. In the top-right and bottom-right of canvas.\n3 line shape with horizontal on top, vertical in middle and horizontal bottom.\nsquare line shape in middle-right of canvas.\n2 white triangle shapes mid-right canvas. left one pointing up and right down.\n5 horizontal interlocking and alternating white triangles in mid-right canvas.\n4 interlocking white triangles in 45 degree rotated square-shape.\n2 white rectangle shapes in mid-right canvas. Both 20x55.\n3 side-by-side white rectangles center rect is smaller in mid-right canvas.\nThick white l-shape with black outline mid-top-left of canvas.","class":"p5","module":"Shape","submodule":"Vertex"},{"file":"src/core/shape/vertex.js","line":267,"description":"<p>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).</p>\n<p>The first time bezierVertex() is used within a <a href=\"#/p5/beginShape\">beginShape()</a>\ncall, it must be prefaced with a call to <a href=\"#/p5/vertex\">vertex()</a> to set the first anchor\npoint. This function must be used between <a href=\"#/p5/beginShape\">beginShape()</a> and <a href=\"#/p5/endShape\">endShape()</a>\nand only when there is no MODE or POINTS parameter specified to\n<a href=\"#/p5/beginShape\">beginShape()</a>.</p>\n","itemtype":"method","name":"bezierVertex","chainable":1,"example":["\n<div>\n<code>\nnoFill();\nbeginShape();\nvertex(30, 20);\nbezierVertex(80, 0, 80, 75, 30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\nbeginShape();\nvertex(30, 20);\nbezierVertex(80, 0, 80, 75, 30, 75);\nbezierVertex(50, 80, 60, 25, 30, 20);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":267,"params":[{"name":"x2","description":"<p>x-coordinate for the first control point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate for the first control point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate for the second control point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate for the second control point</p>\n","type":"Number"},{"name":"x4","description":"<p>x-coordinate for the anchor point</p>\n","type":"Number"},{"name":"y4","description":"<p>y-coordinate for the anchor point</p>\n","type":"Number"}],"chainable":1},{"line":349,"params":[{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>z-coordinate for the first control point (for WebGL mode)</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>z-coordinate for the second control point (for WebGL mode)</p>\n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"<p>z-coordinate for the anchor point (for WebGL mode)</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/vertex.js","line":389,"description":"<p>Specifies vertex coordinates for curves. This function may only\nbe used between <a href=\"#/p5/beginShape\">beginShape()</a> and <a href=\"#/p5/endShape\">endShape()</a> and only when there\nis no MODE parameter specified to <a href=\"#/p5/beginShape\">beginShape()</a>.\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.</p>\n<p>The first and last points in a series of curveVertex() lines will be used to\nguide the beginning and end of a the curve. A minimum of four\npoints is required to draw a tiny curve between the second and\nthird points. Adding a fifth point with curveVertex() will draw\nthe curve between the second, third, and fourth points. The\ncurveVertex() function is an implementation of Catmull-Rom\nsplines.</p>\n","itemtype":"method","name":"curveVertex","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"Upside-down u-shape line, mid canvas. left point extends beyond canvas view.","class":"p5","module":"Shape","submodule":"Vertex","overloads":[{"line":389,"params":[{"name":"x","description":"<p>x-coordinate of the vertex</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the vertex</p>\n","type":"Number"}],"chainable":1},{"line":434,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"<p>z-coordinate of the vertex (for WebGL mode)</p>\n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/core/shape/vertex.js","line":498,"description":"<p>Use the <a href=\"#/p5/beginContour\">beginContour()</a> and <a href=\"#/p5/endContour\">endContour()</a> functions to create negative\nshapes within shapes such as the center of the letter 'O'. <a href=\"#/p5/beginContour\">beginContour()</a>\nbegins recording vertices for the shape and <a href=\"#/p5/endContour\">endContour()</a> 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.</p>\n<p>These functions can only be used within a <a href=\"#/p5/beginShape\">beginShape()</a>/<a href=\"#/p5/endShape\">endShape()</a> pair and\ntransformations such as <a href=\"#/p5/translate\">translate()</a>, <a href=\"#/p5/rotate\">rotate()</a>, and <a href=\"#/p5/scale\">scale()</a> do not work\nwithin a <a href=\"#/p5/beginContour\">beginContour()</a>/<a href=\"#/p5/endContour\">endContour()</a> pair. It is also not possible to use\nother shapes, such as <a href=\"#/p5/ellipse\">ellipse()</a> or <a href=\"#/p5/rect\">rect()</a> within.</p>\n","itemtype":"method","name":"endContour","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"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":557,"description":"<p>The <a href=\"#/p5/endShape\">endShape()</a> function is the companion to <a href=\"#/p5/beginShape\">beginShape()</a> and may only be\ncalled after <a href=\"#/p5/beginShape\">beginShape()</a>. When <a href=\"#/p5/endshape\">endShape()</a> is called, all of image data\ndefined since the previous call to <a href=\"#/p5/beginShape\">beginShape()</a> is written into the image\nbuffer. The constant CLOSE as the value for the MODE parameter to close\nthe shape (to connect the beginning and the end).</p>\n","itemtype":"method","name":"endShape","params":[{"name":"mode","description":"<p>use CLOSE to close the shape</p>\n","type":"Constant","optional":true}],"chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"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":642,"description":"<p>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 <a href=\"#/p5/beginShape\">beginShape()</a> call, it\nmust be prefaced with a call to <a href=\"#/p5/vertex\">vertex()</a> 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).</p>\n<p>This function must be used between <a href=\"#/p5/beginShape\">beginShape()</a> and <a href=\"#/p5/endShape\">endShape()</a>\nand only when there is no MODE or POINTS parameter specified to\n<a href=\"#/p5/beginShape\">beginShape()</a>.</p>\n","itemtype":"method","name":"quadraticVertex","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":642,"params":[{"name":"cx","description":"<p>x-coordinate for the control point</p>\n","type":"Number"},{"name":"cy","description":"<p>y-coordinate for the control point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate for the anchor point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate for the anchor point</p>\n","type":"Number"}],"chainable":1},{"line":707,"params":[{"name":"cx","description":"","type":"Number"},{"name":"cy","description":"","type":"Number"},{"name":"cz","description":"<p>z-coordinate for the control point (for WebGL mode)</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>z-coordinate for the anchor point (for WebGL mode)</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/vertex.js","line":800,"description":"<p>All shapes are constructed by connecting a series of vertices. <a href=\"#/p5/vertex\">vertex()</a>\nis used to specify the vertex coordinates for points, lines, triangles,\nquads, and polygons. It is used exclusively within the <a href=\"#/p5/beginShape\">beginShape()</a> and\n<a href=\"#/p5/endShape\">endShape()</a> functions.</p>\n","itemtype":"method","name":"vertex","chainable":1,"example":["\n<div>\n<code>\nstrokeWeight(3);\nbeginShape(POINTS);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":800,"params":[{"name":"x","description":"<p>x-coordinate of the vertex</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the vertex</p>\n","type":"Number"}],"chainable":1},{"line":931,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"<p>z-coordinate of the vertex</p>\n","type":"Number"},{"name":"u","description":"<p>the vertex's texture u-coordinate</p>\n","type":"Number","optional":true},{"name":"v","description":"<p>the vertex's texture v-coordinate</p>\n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/core/constants.js","line":10,"description":"<p>The default, two-dimensional renderer.</p>\n","itemtype":"property","name":"P2D","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":16,"description":"<p>One of the two render modes in p5.js: P2D (default renderer) and WEBGL\nEnables 3D render by introducing the third dimension: Z</p>\n","itemtype":"property","name":"WEBGL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":25,"itemtype":"property","name":"ARROW","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":30,"itemtype":"property","name":"CROSS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":35,"itemtype":"property","name":"HAND","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":40,"itemtype":"property","name":"MOVE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":45,"itemtype":"property","name":"TEXT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":50,"itemtype":"property","name":"WAIT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":58,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"HALF_PI","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, HALF_PI);\n</code></div>"],"alt":"80x80 white quarter-circle with curve toward bottom right of canvas.","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":76,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"PI","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, PI);\n</code></div>"],"alt":"white half-circle with curve toward bottom of canvas.","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":94,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"QUARTER_PI","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, QUARTER_PI);\n</code></div>"],"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":112,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"TAU","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, TAU);\n</code></div>"],"alt":"80x80 white ellipse shape in center of canvas.","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":130,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"TWO_PI","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, TWO_PI);\n</code></div>"],"alt":"80x80 white ellipse shape in center of canvas.","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":148,"description":"<p>Constant to be used with <a href=\"#/p5/angleMode\">angleMode()</a> function, to set the mode which\np5.js interprates and calculates angles (either DEGREES or RADIANS).</p>\n","itemtype":"property","name":"DEGREES","type":"String","final":1,"example":["\n<div class='norender'><code>\nfunction setup() {\n  angleMode(DEGREES);\n}\n</code></div>"],"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":162,"description":"<p>Constant to be used with <a href=\"#/p5/angleMode\">angleMode()</a> function, to set the mode which\np5.js interprates and calculates angles (either RADIANS or DEGREES).</p>\n","itemtype":"property","name":"RADIANS","type":"String","final":1,"example":["\n<div class='norender'><code>\nfunction setup() {\n  angleMode(RADIANS);\n}\n</code></div>"],"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":180,"itemtype":"property","name":"CORNER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":185,"itemtype":"property","name":"CORNERS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":190,"itemtype":"property","name":"RADIUS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":195,"itemtype":"property","name":"RIGHT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":200,"itemtype":"property","name":"LEFT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":205,"itemtype":"property","name":"CENTER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":210,"itemtype":"property","name":"TOP","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":215,"itemtype":"property","name":"BOTTOM","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":220,"itemtype":"property","name":"BASELINE","type":"String","final":1,"default":"alphabetic","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":226,"itemtype":"property","name":"POINTS","type":"Number","final":1,"default":"0x0000","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":232,"itemtype":"property","name":"LINES","type":"Number","final":1,"default":"0x0001","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":238,"itemtype":"property","name":"LINE_STRIP","type":"Number","final":1,"default":"0x0003","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":244,"itemtype":"property","name":"LINE_LOOP","type":"Number","final":1,"default":"0x0002","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":250,"itemtype":"property","name":"TRIANGLES","type":"Number","final":1,"default":"0x0004","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":256,"itemtype":"property","name":"TRIANGLE_FAN","type":"Number","final":1,"default":"0x0006","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":262,"itemtype":"property","name":"TRIANGLE_STRIP","type":"Number","final":1,"default":"0x0005","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":268,"itemtype":"property","name":"QUADS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":273,"itemtype":"property","name":"QUAD_STRIP","type":"String","final":1,"default":"quad_strip","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":279,"itemtype":"property","name":"TESS","type":"String","final":1,"default":"tess","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":285,"itemtype":"property","name":"CLOSE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":290,"itemtype":"property","name":"OPEN","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":295,"itemtype":"property","name":"CHORD","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":300,"itemtype":"property","name":"PIE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":305,"itemtype":"property","name":"PROJECT","type":"String","final":1,"default":"square","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":311,"itemtype":"property","name":"SQUARE","type":"String","final":1,"default":"butt","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":317,"itemtype":"property","name":"ROUND","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":322,"itemtype":"property","name":"BEVEL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":327,"itemtype":"property","name":"MITER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":334,"itemtype":"property","name":"RGB","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":339,"description":"<p>HSB (hue, saturation, brightness) is a type of color model.\nYou can learn more about it at\n<a href=\"https://learnui.design/blog/the-hsb-color-system-practicioners-primer.html\">HSB</a>.</p>\n","itemtype":"property","name":"HSB","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":348,"itemtype":"property","name":"HSL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":355,"description":"<p>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 <a href=\"/#/p5.Element/size\">size</a> function as AUTO, at a time.</p>\n","itemtype":"property","name":"AUTO","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":365,"itemtype":"property","name":"ALT","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":371,"itemtype":"property","name":"BACKSPACE","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":376,"itemtype":"property","name":"CONTROL","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":381,"itemtype":"property","name":"DELETE","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":386,"itemtype":"property","name":"DOWN_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":391,"itemtype":"property","name":"ENTER","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":396,"itemtype":"property","name":"ESCAPE","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":401,"itemtype":"property","name":"LEFT_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":406,"itemtype":"property","name":"OPTION","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":411,"itemtype":"property","name":"RETURN","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":416,"itemtype":"property","name":"RIGHT_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":421,"itemtype":"property","name":"SHIFT","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":426,"itemtype":"property","name":"TAB","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":431,"itemtype":"property","name":"UP_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":438,"itemtype":"property","name":"BLEND","type":"String","final":1,"default":"source-over","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":444,"itemtype":"property","name":"REMOVE","type":"String","final":1,"default":"destination-out","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":450,"itemtype":"property","name":"ADD","type":"String","final":1,"default":"lighter","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":458,"itemtype":"property","name":"DARKEST","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":463,"itemtype":"property","name":"LIGHTEST","type":"String","final":1,"default":"lighten","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":469,"itemtype":"property","name":"DIFFERENCE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":474,"itemtype":"property","name":"SUBTRACT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":479,"itemtype":"property","name":"EXCLUSION","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":484,"itemtype":"property","name":"MULTIPLY","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":489,"itemtype":"property","name":"SCREEN","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":494,"itemtype":"property","name":"REPLACE","type":"String","final":1,"default":"copy","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":500,"itemtype":"property","name":"OVERLAY","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":505,"itemtype":"property","name":"HARD_LIGHT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":510,"itemtype":"property","name":"SOFT_LIGHT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":515,"itemtype":"property","name":"DODGE","type":"String","final":1,"default":"color-dodge","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":521,"itemtype":"property","name":"BURN","type":"String","final":1,"default":"color-burn","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":529,"itemtype":"property","name":"THRESHOLD","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":534,"itemtype":"property","name":"GRAY","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":539,"itemtype":"property","name":"OPAQUE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":544,"itemtype":"property","name":"INVERT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":549,"itemtype":"property","name":"POSTERIZE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":554,"itemtype":"property","name":"DILATE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":559,"itemtype":"property","name":"ERODE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":564,"itemtype":"property","name":"BLUR","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":571,"itemtype":"property","name":"NORMAL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":576,"itemtype":"property","name":"ITALIC","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":581,"itemtype":"property","name":"BOLD","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":586,"itemtype":"property","name":"BOLDITALIC","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":598,"itemtype":"property","name":"LINEAR","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":603,"itemtype":"property","name":"QUADRATIC","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":608,"itemtype":"property","name":"BEZIER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":613,"itemtype":"property","name":"CURVE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":620,"itemtype":"property","name":"STROKE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":625,"itemtype":"property","name":"FILL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":630,"itemtype":"property","name":"TEXTURE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":635,"itemtype":"property","name":"IMMEDIATE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":643,"itemtype":"property","name":"IMAGE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":651,"itemtype":"property","name":"NEAREST","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":656,"itemtype":"property","name":"REPEAT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":661,"itemtype":"property","name":"CLAMP","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":666,"itemtype":"property","name":"MIRROR","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":673,"itemtype":"property","name":"LANDSCAPE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":678,"itemtype":"property","name":"PORTRAIT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":688,"itemtype":"property","name":"GRID","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":694,"itemtype":"property","name":"AXES","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/environment.js","line":20,"description":"<p>The <a href=\"#/p5/print\">print()</a> function writes to the console area of\nyour browser. This function is often helpful for looking at the data a program\nis producing. This function creates a new line of text for each call to\nthe function. Individual elements can be separated with quotes (\"\") and joined\nwith the addition operator (+).</p>\n<p>Note that calling print() without any arguments invokes the window.print()\nfunction which opens the browser's print dialog. To print a blank line\nto console you can write print('\\n').</p>\n","itemtype":"method","name":"print","params":[{"name":"contents","description":"<p>any combination of Number, String, Object, Boolean,\n                      Array to print</p>\n","type":"Any"}],"example":["\n<div><code class='norender'>\nlet x = 10;\nprint('The value of x is ' + x);\n// prints \"The value of x is 10\"\n</code></div>"],"alt":"default grey canvas","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":52,"description":"<p>The system variable <a href=\"#/p5/frameCount\">frameCount</a> contains the\nnumber of frames that have been displayed since the program started. Inside\n<a href=\"#/p5/setup\">setup()</a> the value is 0, after the first iteration\nof draw it is 1, etc.</p>\n","itemtype":"property","name":"frameCount","type":"Integer","readonly":"","example":["\n<div><code>\nfunction setup() {\n  frameRate(30);\n  textSize(30);\n  textAlign(CENTER);\n}\n\nfunction draw() {\n  background(200);\n  text(frameCount, width / 2, height / 2);\n}\n</code></div>"],"alt":"numbers rapidly counting upward with frame count set to 30.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":79,"description":"<p>The system variable <a href=\"#/p5/deltaTime\">deltaTime</a> contains the time\ndifference between the beginning of the previous frame and the beginning\nof the current frame in milliseconds.</p>\n<p>This variable is useful for creating time sensitive animation or physics\ncalculation that should stay constant regardless of frame rate.</p>\n","itemtype":"property","name":"deltaTime","type":"Integer","readonly":"","example":["\n<div><code>\nlet rectX = 0;\nlet fr = 30; //starting FPS\nlet clr;\n\nfunction setup() {\n  background(200);\n  frameRate(fr); // Attempt to refresh at starting FPS\n  clr = color(255, 0, 0);\n}\n\nfunction draw() {\n  background(200);\n  rectX = rectX + 1 * (deltaTime / 50); // Move Rectangle in relation to deltaTime\n\n  if (rectX >= width) {\n    // If you go off screen.\n    if (fr === 30) {\n      clr = color(0, 0, 255);\n      fr = 10;\n      frameRate(fr); // make frameRate 10 FPS\n    } else {\n      clr = color(255, 0, 0);\n      fr = 30;\n      frameRate(fr); // make frameRate 30 FPS\n    }\n    rectX = 0;\n  }\n  fill(clr);\n  rect(rectX, 40, 20, 20);\n}\n</code></div>"],"alt":"red rect moves left to right, followed by blue rect moving at the same speed\nwith a lower frame rate. Loops.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":129,"description":"<p>Confirms if the window a p5.js program is in is \"focused,\" meaning that\nthe sketch will accept mouse or keyboard input. This variable is\n\"true\" if the window is focused and \"false\" if not.</p>\n","itemtype":"property","name":"focused","type":"Boolean","readonly":"","example":["\n<div><code>\n// To demonstrate, put two windows side by side.\n// Click on the window that the p5 sketch isn't in!\nfunction draw() {\n  background(200);\n  noStroke();\n  fill(0, 200, 0);\n  ellipse(25, 25, 50, 50);\n\n  if (!focused) {\n   // or \"if (focused === false)\"\n    stroke(200, 0, 0);\n    line(0, 0, 100, 100);\n    line(100, 0, 0, 100);\n  }\n}\n</code></div>"],"alt":"green 50x50 ellipse at top left. Red X covers canvas when page focus changes","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":160,"description":"<p>Sets the cursor to a predefined symbol or an image, or makes it visible\nif already hidden. If you are trying to set an image as the cursor, the\nrecommended size is 16x16 or 32x32 pixels. The values for parameters x and y\nmust be less than the dimensions of the image.</p>\n","itemtype":"method","name":"cursor","params":[{"name":"type","description":"<p>Built-In: either ARROW, CROSS, HAND, MOVE, TEXT and WAIT\n                              Native CSS properties: 'grab', 'progress', 'cell' etc.\n                              External: path for cursor's images\n                              (Allowed File extensions: .cur, .gif, .jpg, .jpeg, .png)\n                              For more information on Native CSS cursors and url visit:\n                              <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/cursor\">https://developer.mozilla.org/en-US/docs/Web/CSS/cursor</a></p>\n","type":"String|Constant"},{"name":"x","description":"<p>the horizontal active spot of the cursor (must be less than 32)</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>the vertical active spot of the cursor (must be less than 32)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\n// Move the mouse across the quadrants\n// to see the cursor change\nfunction draw() {\n  line(width / 2, 0, width / 2, height);\n  line(0, height / 2, width, height / 2);\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</code></div>"],"alt":"canvas is divided into four quadrants. cursor on first is a cross, second is a progress,\nthird is a custom cursor using path to the cursor and fourth is a grab.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":228,"description":"<p>Specifies the number of frames to be displayed every second. For example,\nthe function call frameRate(30) will attempt to refresh 30 times a second.\nIf the processor is not fast enough to maintain the specified rate, the\nframe rate will not be achieved. Setting the frame rate within \n<a href=\"#/p5/setup\">setup()</a> is recommended. The default frame rate is\nbased on the frame rate of the display (here also called \"refresh rate\"), \nwhich is set to 60 frames per second on most computers. A frame rate of 24\nframes per second (usual for movies) or above will be enough for smooth \nanimations. This is the same as setFrameRate(val).</p>\n<p>Calling <a href=\"#/p5/frameRate\">frameRate()</a> with no arguments returns\nthe current framerate. The draw function must run at least once before it will\nreturn a value. This is the same as <a href=\"#/p5/getFrameRate\">getFrameRate()</a>.</p>\n<p>Calling <a href=\"#/p5/frameRate\">frameRate()</a> with arguments that are not\nof the type numbers or are non positive also returns current framerate.</p>\n","itemtype":"method","name":"frameRate","chainable":1,"example":["\n\n<div><code>\nlet rectX = 0;\nlet fr = 30; //starting FPS\nlet clr;\n\nfunction setup() {\n  background(200);\n  frameRate(fr); // Attempt to refresh at starting FPS\n  clr = color(255, 0, 0);\n}\n\nfunction draw() {\n  background(200);\n  rectX = rectX += 1; // Move Rectangle\n\n  if (rectX >= width) {\n   // If you go off screen.\n    if (fr === 30) {\n      clr = color(0, 0, 255);\n      fr = 10;\n      frameRate(fr); // make frameRate 10 FPS\n    } else {\n      clr = color(255, 0, 0);\n      fr = 30;\n      frameRate(fr); // make frameRate 30 FPS\n    }\n    rectX = 0;\n  }\n  fill(clr);\n  rect(rectX, 40, 20, 20);\n}\n</code></div>"],"alt":"blue rect moves left to right, followed by red rect moving faster. Loops.","class":"p5","module":"Environment","submodule":"Environment","overloads":[{"line":228,"params":[{"name":"fps","description":"<p>number of frames to be displayed every second</p>\n","type":"Number"}],"chainable":1},{"line":288,"params":[],"return":{"description":"current frameRate","type":"Number"}}]},{"file":"src/core/environment.js","line":331,"description":"<p>Hides the cursor from view.</p>\n","itemtype":"method","name":"noCursor","example":["\n<div><code>\nfunction setup() {\n  noCursor();\n}\n\nfunction draw() {\n  background(200);\n  ellipse(mouseX, mouseY, 10, 10);\n}\n</code></div>"],"alt":"cursor becomes 10x 10 white ellipse the moves with mouse x and y.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":354,"description":"<p>System variable that stores the width of the screen display according to The\ndefault <a href=\"#/p5/pixelDensity\">pixelDensity</a>. This is used to run a\nfull-screen program on any display size. To return actual screen size,\nmultiply this by pixelDensity.</p>\n","itemtype":"property","name":"displayWidth","type":"Number","readonly":"","example":["\n<div class=\"norender\"><code>\ncreateCanvas(displayWidth, displayHeight);\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":372,"description":"<p>System variable that stores the height of the screen display according to The\ndefault <a href=\"#/p5/pixelDensity\">pixelDensity</a>. This is used to run a\nfull-screen program on any display size. To return actual screen size,\nmultiply this by pixelDensity.</p>\n","itemtype":"property","name":"displayHeight","type":"Number","readonly":"","example":["\n<div class=\"norender\"><code>\ncreateCanvas(displayWidth, displayHeight);\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":390,"description":"<p>System variable that stores the width of the inner window, it maps to\nwindow.innerWidth.</p>\n","itemtype":"property","name":"windowWidth","type":"Number","readonly":"","example":["\n<div class=\"norender\"><code>\ncreateCanvas(windowWidth, windowHeight);\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":405,"description":"<p>System variable that stores the height of the inner window, it maps to\nwindow.innerHeight.</p>\n","itemtype":"property","name":"windowHeight","type":"Number","readonly":"","example":["\n<div class=\"norender\"><code>\ncreateCanvas(windowWidth, windowHeight);\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":421,"description":"<p>The <a href=\"#/p5/windowResized\">windowResized()</a> function is called once\nevery time the browser window is resized. This is a good place to resize the\ncanvas or do any other adjustments to accommodate the new window size.</p>\n","itemtype":"method","name":"windowResized","example":["\n<div class=\"norender\"><code>\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</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":475,"description":"<p>System variable that stores the width of the drawing canvas. This value\nis set by the first parameter of the <a href=\"#/p5/createCanvas\">createCanvas()</a> function.\nFor example, the function call createCanvas(320, 240) sets the width\nvariable to the value 320. The value of width defaults to 100 if\n<a href=\"#/p5/createCanvas\">createCanvas()</a> is not used in a program.</p>\n","itemtype":"property","name":"width","type":"Number","readonly":"","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":487,"description":"<p>System variable that stores the height of the drawing canvas. This value\nis set by the second parameter of the <a href=\"#/p5/createCanvas\">createCanvas()</a> function. For\nexample, the function call createCanvas(320, 240) sets the height\nvariable to the value 240. The value of height defaults to 100 if\n<a href=\"#/p5/createCanvas\">createCanvas()</a> is not used in a program.</p>\n","itemtype":"property","name":"height","type":"Number","readonly":"","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":499,"description":"<p>If argument is given, sets the sketch to fullscreen or not based on the\nvalue of the argument. If no argument is given, returns the current\nfullscreen state. Note that due to browser restrictions this can only\nbe called on user input, for example, on mouse press like the example\nbelow.</p>\n","itemtype":"method","name":"fullscreen","params":[{"name":"val","description":"<p>whether the sketch should be in fullscreen mode\nor not</p>\n","type":"Boolean","optional":true}],"return":{"description":"current fullscreen state","type":"Boolean"},"example":["\n<div>\n<code>\n// Clicking in the box toggles fullscreen on and off.\nfunction setup() {\n  background(200);\n}\nfunction mousePressed() {\n  if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n    let fs = fullscreen();\n    fullscreen(!fs);\n  }\n}\n</code>\n</div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":549,"description":"<p>Sets the pixel scaling for high pixel density displays. By default\npixel density is set to match display density, call pixelDensity(1)\nto turn this off. Calling <a href=\"#/p5/pixelDensity\">pixelDensity()</a> with no arguments returns\nthe current pixel density of the sketch.</p>\n","itemtype":"method","name":"pixelDensity","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  pixelDensity(1);\n  createCanvas(100, 100);\n  background(200);\n  ellipse(width / 2, height / 2, 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  pixelDensity(3.0);\n  createCanvas(100, 100);\n  background(200);\n  ellipse(width / 2, height / 2, 50, 50);\n}\n</code>\n</div>"],"alt":"fuzzy 50x50 white ellipse with black outline in center of canvas.\nsharp 50x50 white ellipse with black outline in center of canvas.","class":"p5","module":"Environment","submodule":"Environment","overloads":[{"line":549,"params":[{"name":"val","description":"<p>whether or how much the sketch should scale</p>\n","type":"Number"}],"chainable":1},{"line":585,"params":[],"return":{"description":"current pixel density of the sketch","type":"Number"}}]},{"file":"src/core/environment.js","line":604,"description":"<p>Returns the pixel density of the current display the sketch is running on.</p>\n","itemtype":"method","name":"displayDensity","return":{"description":"current pixel density of the display","type":"Number"},"example":["\n<div>\n<code>\nfunction setup() {\n  let density = displayDensity();\n  pixelDensity(density);\n  createCanvas(100, 100);\n  background(200);\n  ellipse(width / 2, height / 2, 50, 50);\n}\n</code>\n</div>"],"alt":"50x50 white ellipse with black outline in center of canvas.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":659,"description":"<p>Gets the current URL.</p>\n","itemtype":"method","name":"getURL","return":{"description":"url","type":"String"},"example":["\n<div>\n<code>\nlet url;\nlet x = 100;\n\nfunction setup() {\n  fill(0);\n  noStroke();\n  url = getURL();\n}\n\nfunction draw() {\n  background(200);\n  text(url, x, height / 2);\n  x--;\n}\n</code>\n</div>"],"alt":"current url (http://p5js.org/reference/#/p5/getURL) moves right to left.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":687,"description":"<p>Gets the current URL path as an array.</p>\n","itemtype":"method","name":"getURLPath","return":{"description":"path components","type":"String[]"},"example":["\n<div class='norender'><code>\nfunction setup() {\n  let urlPath = getURLPath();\n  for (let i = 0; i < urlPath.length; i++) {\n    text(urlPath[i], 10, i * 20 + 20);\n  }\n}\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":706,"description":"<p>Gets the current URL params as an Object.</p>\n","itemtype":"method","name":"getURLParams","return":{"description":"URL params","type":"Object"},"example":["\n<div class='norender notest'>\n<code>\n// Example: http://p5js.org?year=2014&month=May&day=15\n\nfunction setup() {\n  let params = getURLParams();\n  text(params.day, 10, 20);\n  text(params.month, 10, 40);\n  text(params.year, 10, 60);\n}\n</code>\n</div>"],"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":27,"description":"<p>Set up our translation function, with loaded languages</p>\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":42,"description":"<p>Called directly before <a href=\"#/p5/setup\">setup()</a>, the <a href=\"#/p5/preload\">preload()</a> function is used to handle\nasynchronous loading of external files in a blocking way. If a preload\nfunction is defined, <a href=\"#/p5/setup\">setup()</a> will wait until any load calls within have\nfinished. Nothing besides load calls (<a href=\"#/p5/loadImage\">loadImage</a>, <a href=\"#/p5/loadJSON\">loadJSON</a>, <a href=\"#/p5/loadFont\">loadFont</a>,\n<a href=\"#/p5/loadStrings\">loadStrings</a>, etc.) should be inside the preload function. If asynchronous\nloading is preferred, the load methods can instead be called in <a href=\"#/p5/setup\">setup()</a>\nor anywhere else with the use of a callback parameter.</p>\n<p>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 <a href=\"http://bit.ly/2kQ6Nio\">here</a>.</p>\n","itemtype":"method","name":"preload","example":["\n<div><code>\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</code></div>"],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":83,"description":"<p>The <a href=\"#/p5/setup\">setup()</a> 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 <a href=\"#/p5/setup\">setup()</a> function for each program and it shouldn't\nbe called again after its initial execution.</p>\n<p>Note: Variables declared within <a href=\"#/p5/setup\">setup()</a> are not accessible within other\nfunctions, including <a href=\"#/p5/draw\">draw()</a>.</p>\n","itemtype":"method","name":"setup","example":["\n<div><code>\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</code></div>"],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":114,"description":"<p>Called directly after <a href=\"#/p5/setup\">setup()</a>, the <a href=\"#/p5/draw\">draw()</a> function continuously executes\nthe lines of code contained inside its block until the program is stopped\nor <a href=\"#/p5/noLoop\">noLoop()</a> is called. Note if <a href=\"#/p5/noLoop\">noLoop()</a> is called in <a href=\"#/p5/setup\">setup()</a>, <a href=\"#/p5/draw\">draw()</a> will\nstill be executed once before stopping. <a href=\"#/p5/draw\">draw()</a> is called automatically and\nshould never be called explicitly.</p>\n<p>It should always be controlled with <a href=\"#/p5/noLoop\">noLoop()</a>, <a href=\"#/p5/redraw\">redraw()</a> and <a href=\"#/p5/loop\">loop()</a>. After\n<a href=\"#/p5/noLoop\">noLoop()</a> stops the code in <a href=\"#/p5/draw\">draw()</a> from executing, <a href=\"#/p5/redraw\">redraw()</a> causes the\ncode inside <a href=\"#/p5/draw\">draw()</a> to execute once, and <a href=\"#/p5/loop\">loop()</a> will cause the code\ninside <a href=\"#/p5/draw\">draw()</a> to resume executing continuously.</p>\n<p>The number of times <a href=\"#/p5/draw\">draw()</a> executes in each second may be controlled with\nthe <a href=\"#/p5/frameRate\">frameRate()</a> function.</p>\n<p>There can only be one <a href=\"#/p5/draw\">draw()</a> function for each sketch, and <a href=\"#/p5/draw\">draw()</a> must\nexist if you want the code to run continuously, or to process events such\nas <a href=\"#/p5/mousePressed\">mousePressed()</a>. Sometimes, you might have an empty call to <a href=\"#/p5/draw\">draw()</a> in\nyour program, as shown in the above example.</p>\n<p>It is important to note that the drawing coordinate system will be reset\nat the beginning of each <a href=\"#/p5/draw\">draw()</a> call. If any transformations are performed\nwithin <a href=\"#/p5/draw\">draw()</a> (ex: scale, rotate, translate), their effects will be\nundone at the beginning of <a href=\"#/p5/draw\">draw()</a>, so transformations will not accumulate\nover time. On the other hand, styling applied (ex: fill, stroke, etc) will\nremain in effect.</p>\n","itemtype":"method","name":"draw","example":["\n<div><code>\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</code></div>"],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":411,"description":"<p>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.</p>\n","itemtype":"method","name":"remove","example":["\n<div class='norender'><code>\nfunction draw() {\n  ellipse(50, 50, 10, 10);\n}\n\nfunction mousePressed() {\n  remove(); // remove whole sketch on mouse press\n}\n</code></div>"],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":683,"description":"<p>Allows for the friendly error system (FES) to be turned off when creating a sketch,\nwhich can give a significant boost to performance when needed.\nSee <a href='https://github.com/processing/p5.js/wiki/Optimizing-p5.js-Code-for-Performance#disable-the-friendly-error-system-fes'>\ndisabling the friendly error system</a>.</p>\n","itemtype":"property","name":"disableFriendlyErrors","type":"Boolean","example":["\n<div class=\"norender notest\"><code>\np5.disableFriendlyErrors = true;\n\nfunction setup() {\n  createCanvas(100, 50);\n}\n</code></div>"],"class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/p5.Element.js","line":21,"description":"<p>Underlying HTML element. All normal HTML methods can be called on this.</p>\n","example":["\n<div>\n<code>\nfunction setup() {\n  let c = createCanvas(50, 50);\n  c.elt.style.border = '5px solid red';\n}\n\nfunction draw() {\n  background(220);\n}\n</code>\n</div>"],"itemtype":"property","name":"elt","readonly":"","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":47,"description":"<p>Attaches the element to the parent specified. A way of setting\n the container for the element. Accepts either a string ID, DOM\n node, or <a href=\"#/p5.Element\">p5.Element</a>. If no arguments given, parent node is returned.\n For more ways to position the canvas, see the\n <a href='https://github.com/processing/p5.js/wiki/Positioning-your-canvas'>\n positioning the canvas</a> wiki page.</p>\n","itemtype":"method","name":"parent","chainable":1,"example":["\n <div class=\"norender notest\"><code>\n // Add the following comment to html file.\n // &lt;div id=\"myContainer\">&lt;/div>\n// The js code\n let cnv = createCanvas(100, 100);\n cnv.parent('myContainer');\n </code></div>\n<div class='norender'><code>\n let div0 = createDiv('this is the parent');\n let div1 = createDiv('this is the child');\n div1.parent(div0); // use p5.Element\n </code></div>\n<div class='norender'><code>\n let div0 = createDiv('this is the parent');\n div0.id('apples');\n let div1 = createDiv('this is the child');\n div1.parent('apples'); // use id\n </code></div>\n<div class='norender notest'><code>\n let elt = document.getElementById('myParentDiv');\n let div1 = createDiv('this is the child');\n div1.parent(elt); // use element from page\n </code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":47,"params":[{"name":"parent","description":"<p>the ID, DOM node, or <a href=\"#/p5.Element\">p5.Element</a>\n                         of desired parent element</p>\n","type":"String|p5.Element|Object"}],"chainable":1},{"line":93,"params":[],"return":{"description":"","type":"p5.Element"}}]},{"file":"src/core/p5.Element.js","line":114,"description":"<p>Sets the ID of the element. If no ID argument is passed in, it instead\n returns the current ID of the element.\n Note that only one element can have a particular id in a page.\n The <a href=\"#/p5.Element/class\">.class()</a> function can be used\n to identify multiple elements with the same class name.</p>\n","itemtype":"method","name":"id","chainable":1,"example":["\n <div class='norender'><code>\n function setup() {\n   let cnv = createCanvas(100, 100);\n   // Assigns a CSS selector ID to\n   // the canvas element.\n   cnv.id('mycanvas');\n }\n </code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":114,"params":[{"name":"id","description":"<p>ID of the element</p>\n","type":"String"}],"chainable":1},{"line":139,"params":[],"return":{"description":"the id of the element","type":"String"}}]},{"file":"src/core/p5.Element.js","line":154,"description":"<p>Adds given class to the element. If no class argument is passed in, it\n instead returns a string containing the current class(es) of the element.</p>\n","itemtype":"method","name":"class","chainable":1,"example":["\n <div class='norender'><code>\n function setup() {\n   let cnv = createCanvas(100, 100);\n   // Assigns a CSS selector class 'small'\n   // to the canvas element.\n   cnv.class('small');\n }\n </code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":154,"params":[{"name":"class","description":"<p>class to add</p>\n","type":"String"}],"chainable":1},{"line":176,"params":[],"return":{"description":"the class of the element","type":"String"}}]},{"file":"src/core/p5.Element.js","line":189,"description":"<p>The .<a href=\"#/p5.Element/mousePressed\">mousePressed()</a> function is called\nonce after every time a mouse button is pressed over the element. Some mobile\nbrowsers may also trigger this event on a touch screen, if the user performs\na quick tap. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"mousePressed","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               pressed over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mousePressed(changeGray); // attach listener for\n  // canvas click only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any click anywhere\nfunction mousePressed() {\n  d = d + 10;\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":246,"description":"<p>The .<a href=\"#/p5.Element/doubleClicked\">doubleClicked()</a> function is called once after every time a\nmouse button is pressed twice over the element. This can be used to\nattach element and action specific event listeners.</p>\n","itemtype":"method","name":"doubleClicked","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               double clicked over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"return":{"description":"","type":"p5.Element"},"example":["\n<div class='norender'><code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.doubleClicked(changeGray); // attach listener for\n  // canvas double click only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any double click anywhere\nfunction doubleClicked() {\n  d = d + 10;\n}\n\n// this function fires only when cnv is double clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":292,"description":"<p>The <a href=\"#/p5.Element/mouseWheel\">mouseWheel()</a> function is called\nonce after every time a mouse wheel is scrolled over the element. This can\nbe used to attach element specific event listeners.</p>\n<p>The function accepts a callback function as argument which will be executed\nwhen the <code>wheel</code> event is triggered on the element, the callback function is\npassed one argument <code>event</code>. The <code>event.deltaY</code> property returns negative\nvalues if the mouse wheel is rotated up or away from the user and positive\nin the other direction. The <code>event.deltaX</code> does the same as <code>event.deltaY</code>\nexcept it reads the horizontal wheel scroll of the mouse wheel.</p>\n<p>On OS X with \"natural\" scrolling enabled, the <code>event.deltaY</code> values are\nreversed.</p>\n","itemtype":"method","name":"mouseWheel","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               scrolled over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseWheel(changeSize); // attach listener for\n  // activity on canvas only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with mousewheel movement\n// anywhere on screen\nfunction mouseWheel() {\n  g = g + 10;\n}\n\n// this function fires with mousewheel movement\n// over canvas only\nfunction changeSize(event) {\n  if (event.deltaY > 0) {\n    d = d + 10;\n  } else {\n    d = d - 10;\n  }\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":354,"description":"<p>The <a href=\"#/p5.Element/mouseReleased\">mouseReleased()</a> function is\ncalled once after every time a mouse button is released over the element.\nSome mobile browsers may also trigger this event on a touch screen, if the\nuser performs a quick tap. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"mouseReleased","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               released over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseReleased(changeGray); // attach listener for\n  // activity on canvas only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires after the mouse has been\n// released\nfunction mouseReleased() {\n  d = d + 10;\n}\n\n// this function fires after the mouse has been\n// released while on canvas\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":403,"description":"<p>The .<a href=\"#/p5.Element/mouseClicked\">mouseClicked()</a> function is\ncalled once after a mouse button is pressed and released over the element.\nSome mobile browsers may also trigger this event on a touch screen, if the\nuser performs a quick tap.This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"mouseClicked","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               clicked over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseClicked(changeGray); // attach listener for\n  // activity on canvas only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires after the mouse has been\n// clicked anywhere\nfunction mouseClicked() {\n  d = d + 10;\n}\n\n// this function fires after the mouse has been\n// clicked on canvas\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code>\n</div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":454,"description":"<p>The .<a href=\"#/p5.Element/mouseMoved\">mouseMoved()</a> function is called once every time a\nmouse moves over the element. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"mouseMoved","params":[{"name":"fxn","description":"<p>function to be fired when a mouse moves\n                               over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d = 30;\nlet g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseMoved(changeSize); // attach listener for\n  // activity on canvas only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  fill(200);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires when mouse moves anywhere on\n// page\nfunction mouseMoved() {\n  g = g + 5;\n  if (g > 255) {\n    g = 0;\n  }\n}\n\n// this function fires when mouse moves over canvas\nfunction changeSize() {\n  d = d + 2;\n  if (d > 100) {\n    d = 0;\n  }\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":510,"description":"<p>The .<a href=\"#/p5.Element/mouseOver\">mouseOver()</a> function is called once after every time a\nmouse moves onto the element. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"mouseOver","params":[{"name":"fxn","description":"<p>function to be fired when a mouse moves\n                               onto the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseOver(changeGray);\n  d = 10;\n}\n\nfunction draw() {\n  ellipse(width / 2, height / 2, d, d);\n}\n\nfunction changeGray() {\n  d = d + 10;\n  if (d > 100) {\n    d = 0;\n  }\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":551,"description":"<p>The .<a href=\"#/p5.Element/mouseOut\">mouseOut()</a> function is called once after every time a\nmouse moves off the element. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"mouseOut","params":[{"name":"fxn","description":"<p>function to be fired when a mouse\n                               moves off of an element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseOut(changeGray);\n  d = 10;\n}\n\nfunction draw() {\n  ellipse(width / 2, height / 2, d, d);\n}\n\nfunction changeGray() {\n  d = d + 10;\n  if (d > 100) {\n    d = 0;\n  }\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":592,"description":"<p>The .<a href=\"#/p5.Element/touchStarted\">touchStarted()</a> function is called once after every time a touch is\nregistered. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"touchStarted","params":[{"name":"fxn","description":"<p>function to be fired when a touch\n                               starts over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d;\nlet g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.touchStarted(changeGray); // attach listener for\n  // canvas click only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any touch anywhere\nfunction touchStarted() {\n  d = d + 10;\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":639,"description":"<p>The .<a href=\"#/p5.Element/touchMoved\">touchMoved()</a> function is called once after every time a touch move is\nregistered. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"touchMoved","params":[{"name":"fxn","description":"<p>function to be fired when a touch moves over\n                               the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.touchMoved(changeGray); // attach listener for\n  // canvas click only\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":678,"description":"<p>The .<a href=\"#/p5.Element/touchEnded\">touchEnded()</a> function is called once after every time a touch is\nregistered. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"touchEnded","params":[{"name":"fxn","description":"<p>function to be fired when a touch ends\n                               over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d;\nlet g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.touchEnded(changeGray); // attach listener for\n  // canvas click only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any touch anywhere\nfunction touchEnded() {\n  d = d + 10;\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":725,"description":"<p>The .<a href=\"#/p5.Element/dragOver\">dragOver()</a> function is called once after every time a\nfile is dragged over the element. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"dragOver","params":[{"name":"fxn","description":"<p>function to be fired when a file is\n                               dragged over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div><code>\n// To test this sketch, simply drag a\n// file over the canvas\nfunction setup() {\n  let c = createCanvas(100, 100);\n  background(200);\n  textAlign(CENTER);\n  text('Drag file', width / 2, height / 2);\n  c.dragOver(dragOverCallback);\n}\n\n// This function will be called whenever\n// a file is dragged over the canvas\nfunction dragOverCallback() {\n  background(240);\n  text('Dragged over', width / 2, height / 2);\n}\n</code></div>"],"alt":"nothing displayed","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":763,"description":"<p>The .dragLeave() function is called once after every time a\ndragged file leaves the element area. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"dragLeave","params":[{"name":"fxn","description":"<p>function to be fired when a file is\n                               dragged off the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div><code>\n// To test this sketch, simply drag a file\n// over and then out of the canvas area\nfunction setup() {\n  let c = createCanvas(100, 100);\n  background(200);\n  textAlign(CENTER);\n  text('Drag file', width / 2, height / 2);\n  c.dragLeave(dragLeaveCallback);\n}\n\n// This function will be called whenever\n// a file is dragged out of the canvas\nfunction dragLeaveCallback() {\n  background(240);\n  text('Dragged off', width / 2, height / 2);\n}\n</code></div>"],"alt":"nothing displayed","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":827,"description":"<p>Helper fxn for sharing pixel methods</p>\n","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Graphics.js","line":70,"description":"<p>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 <a href='#/p5/draw'>draw()</a> will copy the behavior\nof the standard canvas.</p>\n","itemtype":"method","name":"reset","example":["\n\n<div><code>\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</code></div>"],"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":122,"description":"<p>Removes a Graphics object from the page and frees any resources\nassociated with it.</p>\n","itemtype":"method","name":"remove","example":["\n<div class='norender'><code>\nlet bg;\nfunction setup() {\n  bg = createCanvas(100, 100);\n  bg.background(0);\n  image(bg, 0, 0);\n  bg.remove();\n}\n</code></div>\n\n<div><code>\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</code></div>"],"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.Renderer.js","line":95,"description":"<p>Resize our canvas element.</p>\n","class":"p5.Renderer","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Renderer.js","line":341,"description":"<p>Helper fxn to check font type (system or otf)</p>\n","class":"p5.Renderer","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Renderer.js","line":393,"description":"<p>Helper fxn to measure ascent and descent.\nAdapted from <a href=\"http://stackoverflow.com/a/25355178\">http://stackoverflow.com/a/25355178</a></p>\n","class":"p5.Renderer","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Renderer2D.js","line":7,"description":"<p>p5.Renderer2D\nThe 2D graphics canvas renderer class.\nextends p5.Renderer</p>\n","class":"p5","module":"Rendering"},{"file":"src/core/p5.Renderer2D.js","line":386,"description":"<p>Generate a cubic Bezier representing an arc on the unit circle of total\nangle <code>size</code> radians, beginning <code>start</code> radians above the x-axis. Up to\nfour of these curves are combined to make a full arc.</p>\n<p>See <a href=\"http://www.joecridge.me/bezier.pdf\">www.joecridge.me/bezier.pdf</a> for an explanation of the method.</p>\n","class":"p5","module":"Rendering"},{"file":"src/core/reference.js","line":6,"description":"<p>Creates and names a new variable. A variable is a container for a value.</p>\n<p>Variables that are declared with <a href=\"#/p5/let\">let</a> will have block-scope.\nThis means that the variable only exists within the\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block\">\nblock</a> that it is created within.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let\">the MDN entry</a>:\nDeclares a block scope local variable, optionally initializing it to a value.</p>\n","itemtype":"property","name":"let","example":["\n<div class='norender'>\n<code>\nlet x = 2;\nconsole.log(x); // prints 2 to the console\nx = 1;\nconsole.log(x); // prints 1 to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":33,"description":"<p>Creates and names a new constant. Like a variable created with <a href=\"#/p5/let\">let</a>,\na constant that is created with <a href=\"#/p5/const\">const</a> 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 <code>let</code>, you cannot declare variables without value\nusing const.</p>\n<p>Constants have block-scope. This means that the constant only exists within\nthe <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block\">\nblock</a> that it is created within. A constant cannot be redeclared within a scope in which it\nalready exists.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const\">the MDN entry</a>:\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.</p>\n","itemtype":"property","name":"const","example":["\n<div class='norender'>\n<code>\n// define myFavNumber as a constant and give it the value 7\nconst myFavNumber = 7;\nconsole.log('my favorite number is: ' + myFavNumber);\n</code>\n</div>\n\n<div class='norender'>\n<code>\nconst bigCats = ['lion', 'tiger', 'panther'];\nbigCats.push('leopard');\nconsole.log(bigCats);\n// bigCats = ['cat']; // throws error as re-assigning not allowed for const\n</code>\n</div>\n\n<div class='norender'>\n<code>\nconst wordFrequency = {};\nwordFrequency['hello'] = 2;\nwordFrequency['bye'] = 1;\nconsole.log(wordFrequency);\n// wordFrequency = { 'a': 2, 'b': 3}; // throws error here\n</code>\n</div>"],"alt":"These examples do not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":86,"description":"<p>The strict equality operator <a href=\"#/p5/===\">===</a>\nchecks to see if two values are equal and of the same type.</p>\n<p>A comparison expression always evaluates to a <a href=\"#/p5/boolean\">boolean</a>.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">the MDN entry</a>:\nThe non-identity operator returns true if the operands are not equal and/or not of the same type.</p>\n<p>Note: In some examples around the web you may see a double-equals-sign\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality\">==</a>,\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.</p>\n","itemtype":"property","name":"===","example":["\n<div class='norender'>\n<code>\nconsole.log(1 === 1); // prints true to the console\nconsole.log(1 === '1'); // prints false to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":114,"description":"<p>The greater than operator <a href=\"#/p5/>\">></a>\nevaluates to true if the left value is greater than\nthe right value.</p>\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">\nThere is more info on comparison operators on MDN.</a>","itemtype":"property","name":">","example":["\n<div class='norender'>\n<code>\nconsole.log(100 > 1); // prints true to the console\nconsole.log(1 > 100); // prints false to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":136,"description":"<p>The greater than or equal to operator <a href=\"#/p5/>=\">>=</a>\nevaluates to true if the left value is greater than or equal to\nthe right value.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">There is more info on comparison operators on MDN.</a></p>\n","itemtype":"property","name":">=","example":["\n<div class='norender'>\n<code>\nconsole.log(100 >= 100); // prints true to the console\nconsole.log(101 >= 100); // prints true to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":157,"description":"<p>The less than operator <a href=\"#/p5/<\"><</a>\nevaluates to true if the left value is less than\nthe right value.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">There is more info on comparison operators on MDN.</a></p>\n","itemtype":"property","name":"<","example":["\n<div class='norender'>\n<code>\nconsole.log(1 < 100); // prints true to the console\nconsole.log(100 < 99); // prints false to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":178,"description":"<p>The less than or equal to operator <a href=\"#/p5/<=\"><=</a>\nevaluates to true if the left value is less than or equal to\nthe right value.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">There is more info on comparison operators on MDN.</a></p>\n","itemtype":"property","name":"<=","example":["\n<div class='norender'>\n<code>\nconsole.log(100 <= 100); // prints true to the console\nconsole.log(99 <= 100); // prints true to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":199,"description":"<p>The <a href=\"#/p5/if-else\">if-else</a> statement helps control the flow of your code.</p>\n<p>A condition is placed between the parenthesis following 'if',\nwhen that condition evalues to <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/truthy\">truthy</a>,\nthe code between the following curly braces is run.\nAlternatively, when the condition evaluates to <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Falsy\">falsy</a>,\nthe code between the curly braces of 'else' block is run instead. Writing an\nelse block is optional.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else\">the MDN entry</a>:\nThe 'if' statement executes a statement if a specified condition is truthy.\nIf the condition is falsy, another statement can be executed</p>\n","itemtype":"property","name":"if-else","example":["\n<div class='norender'>\n<code>\nlet a = 4;\nif (a > 0) {\n  console.log('positive');\n} else {\n  console.log('negative');\n}\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":230,"description":"<p>Creates and names a <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions\">function</a>.\nA <a href=\"#/p5/function\">function</a> is a set of statements that perform a task.</p>\n<p>Optionally, functions can have parameters. <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Parameter\">Parameters</a>\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.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function\">the MDN entry</a>:\nDeclares a function with the specified parameters.</p>\n","itemtype":"property","name":"function","example":["\n<div class='norender'>\n<code>\nlet myName = 'Hridi';\nfunction sayHello(name) {\n  console.log('Hello ' + name + '!');\n}\nsayHello(myName); // calling the function, prints \"Hello Hridi!\" to console.\n</code>\n</div>\n\n<div class='norender'>\n<code>\nlet square = number => number * number;\nconsole.log(square(5));\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":266,"description":"<p>Specifies the value to be returned by a function.\nFor more info checkout <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return\">\nthe MDN entry for return</a>.</p>\n","itemtype":"property","name":"return","example":["\n<div class='norender'>\n<code>\nfunction calculateSquare(x) {\n  return x * x;\n}\nconst result = calculateSquare(4); // returns 16\nconsole.log(result); // prints '16' to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":287,"description":"<p>A <a href=\"#/p5/boolean\">boolean</a> is one of the 7 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Primitive_values\">primitive data types</a> in Javascript.\nA boolean can only be <code>true</code> or <code>false</code>.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type\">the MDN entry</a>:\nBoolean represents a logical entity and can have two values: true, and false.</p>\n","itemtype":"property","name":"boolean","example":["\n<div class='norender'>\n<code>\nlet myBoolean = false;\nconsole.log(typeof myBoolean); // prints 'boolean' to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":308,"description":"<p>A <a href=\"#/p5/string\">string</a> is one of the 7 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Primitive_values\">primitive data types</a> 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(\").</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/string\">the MDN entry</a>:\nA string is a sequence of characters used to represent text.</p>\n","itemtype":"property","name":"string","example":["\n<div class='norender'>\n<code>\nlet mood = 'chill';\nconsole.log(typeof mood); // prints 'string' to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":330,"description":"<p>A <a href=\"#/p5/number\">number</a> is one of the 7 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Primitive_values\">primitive data types</a> in Javascript.\nA number can be a whole number or a decimal number.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Glossary/number\">The MDN entry for number</a></p>\n","itemtype":"property","name":"number","example":["\n<div class='norender'>\n<code>\nlet num = 46.5;\nconsole.log(typeof num); // prints 'number' to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":350,"description":"<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics\">MDN's object basics</a>:\n An <a href=\"#/p5/object\">object</a> 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.)</p>\n","itemtype":"property","name":"object","example":["\n <div class='norender'>\n <code>\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 </code>\n </div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":378,"description":"<p>Creates and names a <a href=\"#/p5/class\">class</a> which is a template for\nthe creation of <a href=\"#/p5/objects\">objects</a>.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class\">the MDN entry</a>:\nThe class declaration creates a new Class with a given name using\nprototype-based inheritance.</p>\n","itemtype":"property","name":"class","example":["\n<div class='norender'>\n<code>\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</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":407,"description":"<p><a href=\"#/p5/for\">for</a> creates a loop that is useful for executing one\nsection of code multiple times.</p>\n<p>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 seperated by ; (semi-colon).In case of an empty expression,\nonly a semi-colon is written.</p>\n<p>The code inside of the loop body (in between the curly braces) is executed between the evaluation of the second\nand third expression.</p>\n<p>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 <a href=\"#/p5/for\">for</a> 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.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for\">the MDN entry</a>:\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.</p>\n","itemtype":"property","name":"for","example":["\n<div class='norender'>\n<code>\nfor (let i = 0; i < 9; i++) {\n  console.log(i);\n}\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":447,"description":"<p><a href=\"#/p5/while\">while</a> creates a loop that is useful for executing\none section of code multiple times.</p>\n<p>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 <a href=\"#/p5/while\">while</a>, so if the condition is initially false\nthe loop body, or statement, will never execute.</p>\n<p>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.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/while\">the MDN entry</a>:\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.</p>\n","itemtype":"property","name":"while","example":["\n<div class='norender'>\n<code>\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</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":489,"description":"<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify\">the MDN entry</a>:\nThe JSON.stringify() method converts a JavaScript object or value to a JSON <a href=\"#/p5/string\">string</a>.</p>\n","itemtype":"method","name":"stringify","static":1,"params":[{"name":"object","description":"<p>:Javascript object that you would like to convert to JSON</p>\n","type":"Object"}],"example":["\n<div class='norender'>\n<code>\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</code>\n</div>"],"alt":"This example does not render anything","class":"JSON","module":"Foundation"},{"file":"src/core/reference.js","line":511,"description":"<p>Prints a message to your browser's web console. When using p5, you can use <a href=\"#/p5/print\">print</a>\nand <a href=\"#/p5/console/log\">console.log</a> interchangeably.</p>\n<p>The console is opened differently depending on which browser you are using.\nHere are links on how to open the console in <a href=\"https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Opening_the_Web_Console\">Firefox</a>\n, <a href=\"https://developers.google.com/web/tools/chrome-devtools/open\">Chrome</a>, <a href=\"https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/console\">Edge</a>,\nand <a href=\"https://support.apple.com/en-ca/guide/safari/sfri20948/mac\">Safari</a>.\nWith the <a href=\"https://editor.p5js.org/\">online p5 editor</a> the console\nis embedded directly in the page underneath the code editor.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Console/log\">the MDN entry</a>:\nThe Console method log() outputs a message to the web console. The message may\nbe a single <a href=\"#/p5/string\">string</a> (with optional substitution values),\nor it may be any one or more JavaScript <a href=\"#/p5/object\">objects</a>.</p>\n","itemtype":"method","name":"log","static":1,"params":[{"name":"message","description":"<p>:Message that you would like to print to the console</p>\n","type":"String|Expression|Object"}],"example":["\n<div class='norender'>\n<code>\nlet myNum = 5;\nconsole.log(myNum); // prints 5 to the console\nconsole.log(myNum + 12); // prints 17 to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"console","module":"Foundation"},{"file":"src/core/rendering.js","line":15,"description":"<p>Creates a canvas element in the document, and sets the dimensions of it\nin pixels. This method should be called only once at the start of setup.\nCalling <a href=\"#/p5/createCanvas\">createCanvas</a> more than once in a\nsketch will result in very unpredictable behavior. If you want more than\none drawing canvas you could use <a href=\"#/p5/createGraphics\">createGraphics</a>\n(hidden by default but it can be shown).</p>\n<p>The system variables width and height are set by the parameters passed to this\nfunction. If <a href=\"#/p5/createCanvas\">createCanvas()</a> is not used, the\nwindow will be given a default size of 100x100 pixels.</p>\n<p>For more ways to position the canvas, see the\n<a href='https://github.com/processing/p5.js/wiki/Positioning-your-canvas'>\npositioning the canvas</a> wiki page.</p>\n","itemtype":"method","name":"createCanvas","params":[{"name":"w","description":"<p>width of the canvas</p>\n","type":"Number"},{"name":"h","description":"<p>height of the canvas</p>\n","type":"Number"},{"name":"renderer","description":"<p>either P2D or WEBGL</p>\n","type":"Constant","optional":true}],"return":{"description":"","type":"p5.Renderer"},"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 50);\n  background(153);\n  line(0, 0, width, height);\n}\n</code>\n</div>"],"alt":"Black line extending from top-left of canvas to bottom right.","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":120,"description":"<p>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.</p>\n","itemtype":"method","name":"resizeCanvas","params":[{"name":"w","description":"<p>width of the canvas</p>\n","type":"Number"},{"name":"h","description":"<p>height of the canvas</p>\n","type":"Number"},{"name":"noRedraw","description":"<p>don't redraw the canvas immediately</p>\n","type":"Boolean","optional":true}],"example":["\n<div class=\"norender\"><code>\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</code></div>"],"alt":"No image displayed.","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":174,"description":"<p>Removes the default canvas for a p5 sketch that doesn't require a canvas</p>\n","itemtype":"method","name":"noCanvas","example":["\n<div>\n<code>\nfunction setup() {\n  noCanvas();\n}\n</code>\n</div>"],"alt":"no image displayed","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":195,"description":"<p>Creates and returns a new p5.Renderer object. Use this class if you need\nto draw into an off-screen graphics buffer. The two parameters define the\nwidth and height in pixels.</p>\n","itemtype":"method","name":"createGraphics","params":[{"name":"w","description":"<p>width of the offscreen graphics buffer</p>\n","type":"Number"},{"name":"h","description":"<p>height of the offscreen graphics buffer</p>\n","type":"Number"},{"name":"renderer","description":"<p>either P2D or WEBGL\n                              undefined defaults to p2d</p>\n","type":"Constant","optional":true}],"return":{"description":"offscreen graphics buffer","type":"p5.Graphics"},"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"4 grey squares alternating light and dark grey. White quarter circle mid-left.","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":234,"description":"<p>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):</p>\n<ul>\n<li><code>BLEND</code> - linear interpolation of colours: C =\nA\\*factor + B. <b>This is the default blending mode.</b></li>\n<li><code>ADD</code> - sum of A and B</li>\n<li><code>DARKEST</code> - only the darkest colour succeeds: C =\nmin(A\\*factor, B).</li>\n<li><code>LIGHTEST</code> - only the lightest colour succeeds: C =\nmax(A\\*factor, B).</li>\n<li><code>DIFFERENCE</code> - subtract colors from underlying image.</li>\n<li><code>EXCLUSION</code> - similar to <code>DIFFERENCE</code>, but less\nextreme.</li>\n<li><code>MULTIPLY</code> - multiply the colors, result will always be\ndarker.</li>\n<li><code>SCREEN</code> - opposite multiply, uses inverse values of the\ncolors.</li>\n<li><code>REPLACE</code> - the pixels entirely replace the others and\ndon't utilize alpha (transparency) values.</li>\n<li><code>REMOVE</code> - removes pixels from B with the alpha strength of A.</li>\n<li><code>OVERLAY</code> - mix of <code>MULTIPLY</code> and <code>SCREEN\n</code>. Multiplies dark values, and screens light values. <em>(2D)</em></li>\n<li><code>HARD_LIGHT</code> - <code>SCREEN</code> when greater than 50%\ngray, <code>MULTIPLY</code> when lower. <em>(2D)</em></li>\n<li><code>SOFT_LIGHT</code> - mix of <code>DARKEST</code> and\n<code>LIGHTEST</code>. Works like <code>OVERLAY</code>, but not as harsh. <em>(2D)</em>\n</li>\n<li><code>DODGE</code> - lightens light tones and increases contrast,\nignores darks. <em>(2D)</em></li>\n<li><code>BURN</code> - darker areas are applied, increasing contrast,\nignores lights. <em>(2D)</em></li>\n<li><code>SUBTRACT</code> - remainder of A and B <em>(3D)</em></li>\n</ul>\n\n<p><em>(2D)</em> indicates that this blend mode <b>only</b> works in the 2D renderer.<br>\n<em>(3D)</em> indicates that this blend mode <b>only</b> works in the WEBGL renderer.</p>\n","itemtype":"method","name":"blendMode","params":[{"name":"mode","description":"<p>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</p>\n","type":"Constant"}],"example":["\n<div>\n<code>\nblendMode(LIGHTEST);\nstrokeWeight(30);\nstroke(80, 150, 255);\nline(25, 25, 75, 75);\nstroke(255, 50, 50);\nline(75, 25, 25, 75);\n</code>\n</div>\n\n<div>\n<code>\nblendMode(MULTIPLY);\nstrokeWeight(30);\nstroke(80, 150, 255);\nline(25, 25, 75, 75);\nstroke(255, 50, 50);\nline(75, 25, 25, 75);\n</code>\n</div>"],"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":317,"description":"<p>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 <code>drawingContext</code>, as in the example shown. This is\nthe equivalent of calling <code>canvas.getContext('2d');</code> or <code>canvas.getContext('webgl');</code>.\nSee this\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D\">\nreference for the native canvas API</a> for possible drawing functions you can call.</p>\n","itemtype":"property","name":"drawingContext","example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"white ellipse with shadow blur effect around edges","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/shim.js","line":18,"description":"<p>shim for Uint8ClampedArray.slice\n(allows arrayCopy to work with pixels[])\nwith thanks to <a href=\"http://halfpapstudios.com/blog/tag/html5-canvas/\">http://halfpapstudios.com/blog/tag/html5-canvas/</a>\nEnumerable set to false to protect for...in from\nUint8ClampedArray.prototype pollution.</p>\n","class":"p5","module":"Rendering"},{"file":"src/core/shim.js","line":39,"description":"<p>this is implementation of Object.assign() which is unavailable in\nIE11 and (non-Chrome) Android browsers.\nThe assign() method is used to copy the values of all enumerable\nown properties from one or more source objects to a target object.\nIt will return the target object.\nModified from <a href=\"https://github.com/ljharb/object.assign\">https://github.com/ljharb/object.assign</a></p>\n","class":"p5","module":"Rendering"},{"file":"src/core/structure.js","line":10,"description":"<p>Stops p5.js from continuously executing the code within <a href=\"#/p5/draw\">draw()</a>.\nIf <a href=\"#/p5/loop\">loop()</a> is called, the code in <a href=\"#/p5/draw\">draw()</a>\nbegins to run continuously again. If using <a href=\"#/p5/noLoop\">noLoop()</a>\nin <a href=\"#/p5/setup\">setup()</a>, it should be the last line inside the block.</p>\n<p>When <a href=\"#/p5/noLoop\">noLoop()</a> is used, it's not possible to manipulate\nor access the screen inside event handling functions such as\n<a href=\"#/p5/mousePressed\">mousePressed()</a> or\n<a href=\"#/p5/keyPressed\">keyPressed()</a>. Instead, use those functions to\ncall <a href=\"#/p5/redraw\">redraw()</a> or <a href=\"#/p5/loop\">loop()</a>,\nwhich will run <a href=\"#/p5/draw\">draw()</a>, which can update the screen\nproperly. This means that when <a href=\"#/p5/noLoop\">noLoop()</a> has been\ncalled, no drawing can happen, and functions like <a href=\"#/p5/saveFrame\">saveFrame()</a>\nor <a href=\"#/p5/loadPixels\">loadPixels()</a> may not be used.</p>\n<p>Note that if the sketch is resized, <a href=\"#/p5/redraw\">redraw()</a> will\nbe called to update the sketch, even after <a href=\"#/p5/noLoop\">noLoop()</a>\nhas been specified. Otherwise, the sketch would enter an odd state until\n<a href=\"#/p5/loop\">loop()</a> was called.</p>\n<p>Use <a href=\"#/p5/isLooping\">isLooping()</a> to check current state of loop().</p>\n","itemtype":"method","name":"noLoop","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n  background(200);\n  noLoop();\n}\n\nfunction draw() {\n  line(10, 10, 90, 90);\n}\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":83,"description":"<p>By default, p5.js loops through draw() continuously, executing the code within\nit. However, the <a href=\"#/p5/draw\">draw()</a> loop may be stopped by calling\n<a href=\"#/p5/noLoop\">noLoop()</a>. In that case, the <a href=\"#/p5/draw\">draw()</a>\nloop can be resumed with loop().</p>\n<p>Avoid calling loop() from inside setup().</p>\n<p>Use <a href=\"#/p5/isLooping\">isLooping()</a> to check current state of loop().</p>\n","itemtype":"method","name":"loop","example":["\n<div>\n<code>\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</code>\n</div>"],"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":134,"description":"<p>By default, p5.js loops through <a href=\"#/p5/draw\">draw()</a> continuously,\nexecuting the code within it. If the sketch is stopped with\n<a href=\"#/p5/noLoop\">noLoop()</a> or resumed with <a href=\"#/p5/loop\">loop()</a>,\nisLooping() returns the current state for use within custom event handlers.</p>\n","itemtype":"method","name":"isLooping","example":["\n<div>\n<code>\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</code>\n</div>"],"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":"<p>The <a href=\"#/p5/push\">push()</a> function saves the current drawing style\nsettings and transformations, while <a href=\"#/p5/pop\">pop()</a> 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 <a href=\"#/p5/push\">push()</a>, it builds on\nthe current style and transform information. The <a href=\"#/p5/push\">push()</a>\nand <a href=\"#/p5/pop\">pop()</a> functions can be embedded to provide more\ncontrol. (See the second example for a demonstration.)</p>\n<p><a href=\"#/p5/push\">push()</a> stores information related to the current transformation state\nand style settings controlled by the following functions:\n<a href=\"#/p5/fill\">fill()</a>,\n<a href=\"#/p5/noFill\">noFill()</a>,\n<a href=\"#/p5/noStroke\">noStroke()</a>,\n<a href=\"#/p5/stroke\">stroke()</a>,\n<a href=\"#/p5/tint\">tint()</a>,\n<a href=\"#/p5/noTint\">noTint()</a>,\n<a href=\"#/p5/strokeWeight\">strokeWeight()</a>,\n<a href=\"#/p5/strokeCap\">strokeCap()</a>,\n<a href=\"#/p5/strokeJoin\">strokeJoin()</a>,\n<a href=\"#/p5/imageMode\">imageMode()</a>,\n<a href=\"#/p5/rectMode\">rectMode()</a>,\n<a href=\"#/p5/ellipseMode\">ellipseMode()</a>,\n<a href=\"#/p5/colorMode\">colorMode()</a>,\n<a href=\"#/p5/textAlign\">textAlign()</a>,\n<a href=\"#/p5/textFont\">textFont()</a>,\n<a href=\"#/p5/textSize\">textSize()</a>,\n<a href=\"#/p5/textLeading\">textLeading()</a>,\n<a href=\"#/p5/applyMatrix\">applyMatrix()</a>,\n<a href=\"#/p5/resetMatrix\">resetMatrix()</a>,\n<a href=\"#/p5/rotate\">rotate()</a>,\n<a href=\"#/p5/scale\">scale()</a>,\n<a href=\"#/p5/shearX\">shearX()</a>,\n<a href=\"#/p5/shearY\">shearY()</a>,\n<a href=\"#/p5/translate\">translate()</a>,\n<a href=\"#/p5/noiseSeed\">noiseSeed()</a>.</p>\n<p>In WEBGL mode additional style settings are stored. These are controlled by the\nfollowing functions: <a href=\"#/p5/setCamera\">setCamera()</a>,\n<a href=\"#/p5/ambientLight\">ambientLight()</a>,\n<a href=\"#/p5/directionalLight\">directionalLight()</a>,\n<a href=\"#/p5/pointLight\">pointLight()</a>, <a href=\"#/p5/texture\">texture()</a>,\n<a href=\"#/p5/specularMaterial\">specularMaterial()</a>,\n<a href=\"#/p5/shininess\">shininess()</a>,\n<a href=\"#/p5/normalMaterial\">normalMaterial()</a>\nand <a href=\"#/p5/shader\">shader()</a>.</p>\n","itemtype":"method","name":"push","example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":"<p>The <a href=\"#/p5/push\">push()</a> function saves the current drawing style\nsettings and transformations, while <a href=\"#/p5/pop\">pop()</a> 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 <a href=\"#/p5/push\">push()</a>, it\nbuilds on the current style and transform information. The <a href=\"#/p5/push\">push()</a>\nand <a href=\"#/p5/pop\">pop()</a> functions can be embedded to provide more\ncontrol. (See the second example for a demonstration.)</p>\n<p><a href=\"#/p5/push\">push()</a> stores information related to the current transformation state\nand style settings controlled by the following functions:\n<a href=\"#/p5/fill\">fill()</a>,\n<a href=\"#/p5/noFill\">noFill()</a>,\n<a href=\"#/p5/noStroke\">noStroke()</a>,\n<a href=\"#/p5/stroke\">stroke()</a>,\n<a href=\"#/p5/tint\">tint()</a>,\n<a href=\"#/p5/noTint\">noTint()</a>,\n<a href=\"#/p5/strokeWeight\">strokeWeight()</a>,\n<a href=\"#/p5/strokeCap\">strokeCap()</a>,\n<a href=\"#/p5/strokeJoin\">strokeJoin()</a>,\n<a href=\"#/p5/imageMode\">imageMode()</a>,\n<a href=\"#/p5/rectMode\">rectMode()</a>,\n<a href=\"#/p5/ellipseMode\">ellipseMode()</a>,\n<a href=\"#/p5/colorMode\">colorMode()</a>,\n<a href=\"#/p5/textAlign\">textAlign()</a>,\n<a href=\"#/p5/textFont\">textFont()</a>,\n<a href=\"#/p5/textSize\">textSize()</a>,\n<a href=\"#/p5/textLeading\">textLeading()</a>,\n<a href=\"#/p5/applyMatrix\">applyMatrix()</a>,\n<a href=\"#/p5/resetMatrix\">resetMatrix()</a>,\n<a href=\"#/p5/rotate\">rotate()</a>,\n<a href=\"#/p5/scale\">scale()</a>,\n<a href=\"#/p5/shearX\">shearX()</a>,\n<a href=\"#/p5/shearY\">shearY()</a>,\n<a href=\"#/p5/translate\">translate()</a>,\n<a href=\"#/p5/noiseSeed\">noiseSeed()</a>.</p>\n<p>In WEBGL mode additional style settings are stored. These are controlled by\nthe following functions:\n<a href=\"#/p5/setCamera\">setCamera()</a>,\n<a href=\"#/p5/ambientLight\">ambientLight()</a>,\n<a href=\"#/p5/directionalLight\">directionalLight()</a>,\n<a href=\"#/p5/pointLight\">pointLight()</a>,\n<a href=\"#/p5/texture\">texture()</a>,\n<a href=\"#/p5/specularMaterial\">specularMaterial()</a>,\n<a href=\"#/p5/shininess\">shininess()</a>,\n<a href=\"#/p5/normalMaterial\">normalMaterial()</a> and\n<a href=\"#/p5/shader\">shader()</a>.</p>\n","itemtype":"method","name":"pop","example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":"<p>Executes the code within <a href=\"#/p5/draw\">draw()</a> one time. This\nfunction allows the program to update the display window only when necessary,\nfor example when an event registered by <a href=\"#/p5/mousePressed\">mousePressed()</a>\nor <a href=\"#/p5/keyPressed\">keyPressed()</a> occurs.</p>\n<p>In structuring a program, it only makes sense to call <a href=\"#/p5/redraw\">redraw()</a>\nwithin events such as <a href=\"#/p5/mousePressed\">mousePressed()</a>. This\nis because <a href=\"#/p5/redraw\">redraw()</a> does not run\n<a href=\"#/p5/draw\">draw()</a> immediately (it only sets a flag that indicates\nan update is needed).</p>\n<p>The <a href=\"#/p5/redraw\">redraw()</a> function does not work properly when\ncalled inside <a href=\"#/p5/draw\">draw()</a>.To enable/disable animations,\nuse <a href=\"#/p5/loop\">loop()</a> and <a href=\"#/p5/noLoop\">noLoop()</a>.</p>\n<p>In addition you can set the number of redraws per method call. Just\nadd an integer as single parameter for the number of redraws.</p>\n","itemtype":"method","name":"redraw","params":[{"name":"n","description":"<p>Redraw for n-times. The default value is 1.</p>\n","type":"Integer","optional":true}],"example":["\n<div><code>\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</code>\n</div>\n\n<div class='norender'>\n<code>\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</code>\n</div>"],"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":496,"description":"<p>The <code>p5()</code> 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<a target=\"blank\" href=\"https://www.youtube.com/watch?v=Su792jEauZg&feature=youtu.be\">\nDan Shiffman's Coding Train video tutorial</a> or this\n<a target=\"blank\" href=\"https://github.com/processing/p5.js/wiki/p5.js-overview#instantiation--namespace\">tutorial page</a>\nfor more info.</p>\n<p>By default, all p5.js functions are in the global namespace (i.e. bound to the window\nobject), meaning you can call them simply <code>ellipse()</code>, <code>fill()</code>, 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.</p>\n<p>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.</p>\n<p>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.</p>\n","itemtype":"method","name":"p5","params":[{"name":"sketch","description":"<p>a function containing a p5.js sketch</p>\n","type":"Object"},{"name":"node","description":"<p>ID or pointer to HTML DOM node to contain sketch in</p>\n","type":"String|Object"}],"example":["\n<div class='norender'><code>\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</code></div>"],"alt":"white rectangle on black background","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/transform.js","line":11,"description":"<p>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 <a href=\"https://en.wikipedia.org/wiki/Transformation_matrix\">\nWikipedia</a>.</p>\n<p>The naming of the arguments here follows the naming of the <a href=\n\"https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-transform\">\nWHATWG specification</a> and corresponds to a\ntransformation matrix of the\nform:</p>\n<blockquote>\n<p><img style=\"max-width: 150px\" src=\"assets/transformation-matrix.png\"\nalt=\"The transformation matrix used when applyMatrix is called\"/></p>\n</blockquote>\n","itemtype":"method","name":"applyMatrix","params":[{"name":"a","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"},{"name":"b","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"},{"name":"c","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"},{"name":"d","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"},{"name":"e","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"},{"name":"f","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\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(  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  stroke(255);\n  box(50);\n}\n</code>\n</div>"],"alt":"A rectangle translating to the right\nA rectangle shrinking to the center\nA rectangle rotating clockwise about the center\nA rectangle shearing","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":151,"description":"<p>Replaces the current matrix with the identity matrix.</p>\n","itemtype":"method","name":"resetMatrix","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"A rotated retangle in the center with another at the top left corner","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":176,"description":"<p>Rotates a shape by the amount specified by the angle parameter. This\nfunction accounts for <a href=\"#/p5/angleMode\">angleMode</a>, so angles\ncan be entered in either RADIANS or DEGREES.</p>\n<p>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 accumulates the effect. For example, calling\nrotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI).\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n<p>Technically, <a href=\"#/p5/rotate\">rotate()</a> multiplies the current transformation matrix\nby a rotation matrix. This function can be further controlled by\nthe <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a>.</p>\n","itemtype":"method","name":"rotate","params":[{"name":"angle","description":"<p>the angle of rotation, specified in radians\n                       or degrees, depending on current angleMode</p>\n","type":"Number"},{"name":"axis","description":"<p>(in 3d) the axis to rotate around</p>\n","type":"p5.Vector|Number[]","optional":true}],"chainable":1,"example":["\n<div>\n<code>\ntranslate(width / 2, height / 2);\nrotate(PI / 3.0);\nrect(-26, -26, 52, 52);\n</code>\n</div>"],"alt":"white 52x52 rect with black outline at center rotated counter 45 degrees","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":215,"description":"<p>Rotates a shape around X axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.</p>\n<p>Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n","itemtype":"method","name":"rotateX","params":[{"name":"angle","description":"<p>the angle of rotation, specified in radians\n                       or degrees, depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(255);\n  rotateX(millis() / 1000);\n  box();\n}\n</code>\n</div>"],"alt":"3d box rotating around the x axis.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":251,"description":"<p>Rotates a shape around Y axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.</p>\n<p>Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n","itemtype":"method","name":"rotateY","params":[{"name":"angle","description":"<p>the angle of rotation, specified in radians\n                       or degrees, depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(255);\n  rotateY(millis() / 1000);\n  box();\n}\n</code>\n</div>"],"alt":"3d box rotating around the y axis.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":287,"description":"<p>Rotates a shape around Z axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.</p>\n<p>This method works in WEBGL mode only.</p>\n<p>Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n","itemtype":"method","name":"rotateZ","params":[{"name":"angle","description":"<p>the angle of rotation, specified in radians\n                       or degrees, depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(255);\n  rotateZ(millis() / 1000);\n  box();\n}\n</code>\n</div>"],"alt":"3d box rotating around the z axis.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":325,"description":"<p>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%.</p>\n<p>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 <a href=\"#/p5/scale\">scale()</a> is called\nwithin <a href=\"#/p5/draw\">draw()</a>, the transformation is reset when the loop begins again.</p>\n<p>Using this function with the z parameter is only available in WEBGL mode.\nThis function can be further controlled with <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a>.</p>\n","itemtype":"method","name":"scale","chainable":1,"example":["\n<div>\n<code>\nrect(30, 20, 50, 50);\nscale(0.5);\nrect(30, 20, 50, 50);\n</code>\n</div>\n\n<div>\n<code>\nrect(30, 20, 50, 50);\nscale(0.5, 1.3);\nrect(30, 20, 50, 50);\n</code>\n</div>"],"alt":"white 52x52 rect with black outline at center rotated counter 45 degrees\n2 white rects with black outline- 1 50x50 at center. other 25x65 bottom left","class":"p5","module":"Transform","submodule":"Transform","overloads":[{"line":325,"params":[{"name":"s","description":"<p>percent to scale the object, or percentage to\n                     scale the object in the x-axis if multiple arguments\n                     are given</p>\n","type":"Number|p5.Vector|Number[]"},{"name":"y","description":"<p>percent to scale the object in the y-axis</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>percent to scale the object in the z-axis (webgl only)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":369,"params":[{"name":"scales","description":"<p>per-axis percents to scale the object</p>\n","type":"p5.Vector|Number[]"}],"chainable":1}]},{"file":"src/core/transform.js","line":399,"description":"<p>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.</p>\n<p>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 <a href=\"#/p5/shearX\">shearX()</a> is called within the <a href=\"#/p5/draw\">draw()</a>,\nthe transformation is reset when the loop begins again.</p>\n<p>Technically, <a href=\"#/p5/shearX\">shearX()</a> multiplies the current\ntransformation matrix by a rotation matrix. This function can be further\ncontrolled by the <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions.</p>\n","itemtype":"method","name":"shearX","params":[{"name":"angle","description":"<p>angle of shear specified in radians or degrees,\n                       depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\ntranslate(width / 4, height / 4);\nshearX(PI / 4.0);\nrect(0, 0, 30, 30);\n</code>\n</div>"],"alt":"white irregular quadrilateral with black outline at top middle.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":438,"description":"<p>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.</p>\n<p>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\n<a href=\"#/p5/shearY\">shearY()</a> is called within the <a href=\"#/p5/draw\">draw()</a>, the transformation is reset when\nthe loop begins again.</p>\n<p>Technically, <a href=\"#/p5/shearY\">shearY()</a> multiplies the current transformation matrix by a\nrotation matrix. This function can be further controlled by the\n<a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions.</p>\n","itemtype":"method","name":"shearY","params":[{"name":"angle","description":"<p>angle of shear specified in radians or degrees,\n                       depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\ntranslate(width / 4, height / 4);\nshearY(PI / 4.0);\nrect(0, 0, 30, 30);\n</code>\n</div>"],"alt":"white irregular quadrilateral with black outline at middle bottom.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":477,"description":"<p>Specifies an amount to displace objects within the display window.\nThe x parameter specifies left/right translation, the y parameter\nspecifies up/down translation.</p>\n<p>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 <a href=\"#/p5/translate\">translate()</a> is called within <a href=\"#/p5/draw\">draw()</a>, the\ntransformation is reset when the loop begins again. This function can be\nfurther controlled by using <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a>.</p>\n","itemtype":"method","name":"translate","chainable":1,"example":["\n<div>\n<code>\ntranslate(30, 20);\nrect(0, 0, 55, 55);\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n\n<div>\n<code>\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</code>\n</div>"],"alt":"white 55x55 rect with black outline at center right.\n3 white 55x55 rects with black outlines at top-l, center-r and bottom-r.\na 20x20 white rect moving in a circle around the canvas","class":"p5","module":"Transform","submodule":"Transform","overloads":[{"line":477,"params":[{"name":"x","description":"<p>left/right translation</p>\n","type":"Number"},{"name":"y","description":"<p>up/down translation</p>\n","type":"Number"},{"name":"z","description":"<p>forward/backward translation (webgl only)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":530,"params":[{"name":"vector","description":"<p>the vector to translate by</p>\n","type":"p5.Vector"}],"chainable":1}]},{"file":"src/data/local_storage.js","line":10,"description":"<p>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 <a href=\"#/p5/getItem\">getItem</a>.\nSensitive data such as passwords or personal information\n should not be stored in local storage.</p>\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 <div><code>\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 }\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 </code></div>"],"alt":"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.","class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/local_storage.js","line":101,"description":"<p>Returns the value of an item that was stored in local storage\n using storeItem()</p>\n","itemtype":"method","name":"getItem","params":[{"name":"key","description":"<p>name that you wish to use to store in local storage</p>\n","type":"String"}],"return":{"description":"Value of stored item","type":"Number|Object|String|Boolean|p5.Color|p5.Vector"},"example":["\n <div><code>\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 }\nfunction mousePressed() {\n   myColor = color(random(255), random(255), random(255));\n   storeItem('myColor', myColor);\n }\n </code></div>"],"alt":"If you click, the canvas changes to a random color.\n If you reload the page, the canvas is still the color it\n was when the page was previously loaded.","class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/local_storage.js","line":177,"description":"<p>Clears all local storage items set with storeItem()\n for the current domain.</p>\n","itemtype":"method","name":"clearStorage","example":["\n <div class=\"norender\">\n <code>\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 </code></div>"],"class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/local_storage.js","line":205,"description":"<p>Removes an item that was stored with storeItem()</p>\n","itemtype":"method","name":"removeItem","params":[{"name":"key","description":"","type":"String"}],"example":["\n <div class=\"norender\">\n <code>\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 </code></div>"],"class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/p5.TypedDict.js","line":14,"description":"<p>Creates a new instance of p5.StringDict using the key-value pair\n or the object you provide.</p>\n","itemtype":"method","name":"createStringDict","return":{"description":"","type":"p5.StringDict"},"example":["\n <div class=\"norender\">\n <code>\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 </code></div>"],"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":"<p>object</p>\n","type":"Object"}],"return":{"description":"","type":"p5.StringDict"}}]},{"file":"src/data/p5.TypedDict.js","line":48,"description":"<p>Creates a new instance of <a href=\"#/p5.NumberDict\">p5.NumberDict</a> using the key-value pair\n or object you provide.</p>\n","itemtype":"method","name":"createNumberDict","return":{"description":"","type":"p5.NumberDict"},"example":["\n <div class=\"norender\">\n <code>\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 </code></div>"],"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":"<p>object</p>\n","type":"Object"}],"return":{"description":"","type":"p5.NumberDict"}}]},{"file":"src/data/p5.TypedDict.js","line":101,"description":"<p>Returns the number of key-value pairs currently stored in the Dictionary.</p>\n","itemtype":"method","name":"size","return":{"description":"the number of key-value pairs in the Dictionary","type":"Integer"},"example":["\n<div class=\"norender\">\n<code>\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</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":122,"description":"<p>Returns true if the given key exists in the Dictionary,\notherwise returns false.</p>\n","itemtype":"method","name":"hasKey","params":[{"name":"key","description":"<p>that you want to look up</p>\n","type":"Number|String"}],"return":{"description":"whether that key exists in Dictionary","type":"Boolean"},"example":["\n<div class=\"norender\">\n<code>\nfunction setup() {\n  let myDictionary = createStringDict('p5', 'js');\n  print(myDictionary.hasKey('p5')); // logs true to console\n}\n</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":144,"description":"<p>Returns the value stored at the given key.</p>\n","itemtype":"method","name":"get","params":[{"name":"the","description":"<p>key you want to access</p>\n","type":"Number|String"}],"return":{"description":"the value stored at that key","type":"Number|String"},"example":["\n<div class=\"norender\">\n<code>\nfunction setup() {\n  let myDictionary = createStringDict('p5', 'js');\n  let myValue = myDictionary.get('p5');\n  print(myValue === 'js'); // logs true to console\n}\n</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":170,"description":"<p>Updates the value associated with the given key in case it already exists\nin the Dictionary. Otherwise a new key-value pair is added.</p>\n","itemtype":"method","name":"set","params":[{"name":"key","description":"","type":"Number|String"},{"name":"value","description":"","type":"Number|String"}],"example":["\n<div class=\"norender\">\n<code>\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</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":197,"description":"<p>private helper function to handle the user passing in objects\nduring construction or calls to create()</p>\n","class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":208,"description":"<p>Creates a new key-value pair in the Dictionary.</p>\n","itemtype":"method","name":"create","example":["\n<div class=\"norender\">\n<code>\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</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary","overloads":[{"line":208,"params":[{"name":"key","description":"","type":"Number|String"},{"name":"value","description":"","type":"Number|String"}]},{"line":226,"params":[{"name":"obj","description":"<p>key/value pair</p>\n","type":"Object"}]}]},{"file":"src/data/p5.TypedDict.js","line":244,"description":"<p>Removes all previously stored key-value pairs from the Dictionary.</p>\n","itemtype":"method","name":"clear","example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":265,"description":"<p>Removes the key-value pair stored at the given key from the Dictionary.</p>\n","itemtype":"method","name":"remove","params":[{"name":"key","description":"<p>for the pair to remove</p>\n","type":"Number|String"}],"example":["\n<div class=\"norender\">\n<code>\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</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":294,"description":"<p>Logs the set of items currently stored in the Dictionary to the console.</p>\n","itemtype":"method","name":"print","example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":318,"description":"<p>Converts the Dictionary into a CSV file for local download.</p>\n","itemtype":"method","name":"saveTable","example":["\n<div>\n<code>\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</code>\n</div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":356,"description":"<p>Converts the Dictionary into a JSON file for local download.</p>\n","itemtype":"method","name":"saveJSON","example":["\n<div>\n<code>\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</code>\n</div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":387,"description":"<p>private helper function to ensure that the user passed in valid\nvalues for the Dictionary type</p>\n","class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":425,"description":"<p>private helper function to ensure that the user passed in valid\nvalues for the Dictionary type</p>\n","class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":432,"description":"<p>Add the given number to the value currently stored at the given key.\nThe sum then replaces the value previously stored in the Dictionary.</p>\n","itemtype":"method","name":"add","params":[{"name":"Key","description":"<p>for the value you wish to add to</p>\n","type":"Number"},{"name":"Number","description":"<p>to add to the value</p>\n","type":"Number"}],"example":["\n<div class='norender'>\n<code>\nfunction setup() {\n  let myDictionary = createNumberDict(2, 5);\n  myDictionary.add(2, 2);\n  print(myDictionary.get(2)); // logs 7 to console.\n}\n</code></div>\n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":459,"description":"<p>Subtract the given number from the value currently stored at the given key.\nThe difference then replaces the value previously stored in the Dictionary.</p>\n","itemtype":"method","name":"sub","params":[{"name":"Key","description":"<p>for the value you wish to subtract from</p>\n","type":"Number"},{"name":"Number","description":"<p>to subtract from the value</p>\n","type":"Number"}],"example":["\n<div class='norender'>\n<code>\nfunction setup() {\n  let myDictionary = createNumberDict(2, 5);\n  myDictionary.sub(2, 2);\n  print(myDictionary.get(2)); // logs 3 to console.\n}\n</code></div>\n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":482,"description":"<p>Multiply the given number with the value currently stored at the given key.\nThe product then replaces the value previously stored in the Dictionary.</p>\n","itemtype":"method","name":"mult","params":[{"name":"Key","description":"<p>for value you wish to multiply</p>\n","type":"Number"},{"name":"Amount","description":"<p>to multiply the value by</p>\n","type":"Number"}],"example":["\n<div class='norender'>\n<code>\nfunction setup() {\n  let myDictionary = createNumberDict(2, 4);\n  myDictionary.mult(2, 2);\n  print(myDictionary.get(2)); // logs 8 to console.\n}\n</code></div>\n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":509,"description":"<p>Divide the given number with the value currently stored at the given key.\nThe quotient then replaces the value previously stored in the Dictionary.</p>\n","itemtype":"method","name":"div","params":[{"name":"Key","description":"<p>for value you wish to divide</p>\n","type":"Number"},{"name":"Amount","description":"<p>to divide the value by</p>\n","type":"Number"}],"example":["\n<div class='norender'>\n<code>\nfunction setup() {\n  let myDictionary = createNumberDict(2, 8);\n  myDictionary.div(2, 2);\n  print(myDictionary.get(2)); // logs 4 to console.\n}\n</code></div>\n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":536,"description":"<p>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'</p>\n","class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":560,"description":"<p>Return the lowest number currently stored in the Dictionary.</p>\n","itemtype":"method","name":"minValue","return":{"description":"","type":"Number"},"example":["\n<div class='norender'>\n<code>\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</code></div>"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":580,"description":"<p>Return the highest number currently stored in the Dictionary.</p>\n","itemtype":"method","name":"maxValue","return":{"description":"","type":"Number"},"example":["\n<div class='norender'>\n<code>\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</code></div>"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":600,"description":"<p>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'</p>\n","class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":622,"description":"<p>Return the lowest key currently used in the Dictionary.</p>\n","itemtype":"method","name":"minKey","return":{"description":"","type":"Number"},"example":["\n<div class='norender'>\n<code>\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</code></div>"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":642,"description":"<p>Return the highest key currently used in the Dictionary.</p>\n","itemtype":"method","name":"maxKey","return":{"description":"","type":"Number"},"example":["\n<div class='norender'>\n<code>\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</code></div>"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/dom/dom.js","line":21,"description":"<p>Searches the page for the first element that matches the given CSS selector string (can be an\nID, class, tag name or a combination) and returns it as a <a href=\"#/p5.Element\">p5.Element</a>.\nThe DOM node itself can be accessed with .elt.\nReturns null if none found. You can also specify a container to search within.</p>\n","itemtype":"method","name":"select","params":[{"name":"selectors","description":"<p>CSS selector string of element to search for</p>\n","type":"String"},{"name":"container","description":"<p>CSS selector string, <a href=\"#/p5.Element\">p5.Element</a>, or\n                                            HTML element to search within</p>\n","type":"String|p5.Element|HTMLElement","optional":true}],"return":{"description":"<a href=\"#/p5.Element\">p5.Element</a> containing node found","type":"p5.Element|null"},"example":["\n<div><code>\nfunction setup() {\n  createCanvas(50, 50);\n  background(30);\n  // move canvas down and right\n  select('canvas').position(10, 30);\n}\n</code></div>\n\n<div class=\"norender\"><code>\n// select using ID\nlet a = select('#container');\nlet b = select('#beep', '#container');\nlet c;\nif (a) {\n  // select using class\n  c = select('.boop', a);\n}\n// select using CSS selector string\nlet d = select('#container #bleep');\nlet e = select('#container p');\n[a, b, c, d, e]; // unused\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":68,"description":"<p>Searches the page for elements that match the given CSS selector string (can be an ID a class,\ntag name or a combination) and returns them as <a href=\"#/p5.Element\">p5.Element</a>s in\nan array.\nThe DOM node itself can be accessed with .elt.\nReturns an empty array if none found.\nYou can also specify a container to search within.</p>\n","itemtype":"method","name":"selectAll","params":[{"name":"selectors","description":"<p>CSS selector string of elements to search for</p>\n","type":"String"},{"name":"container","description":"<p>CSS selector string, <a href=\"#/p5.Element\">p5.Element</a>\n                                            , or HTML element to search within</p>\n","type":"String|p5.Element|HTMLElement","optional":true}],"return":{"description":"Array of <a href=\"#/p5.Element\">p5.Element</a>s containing nodes found","type":"p5.Element[]"},"example":["\n<div class='norender'><code>\nfunction setup() {\n  createButton('btn');\n  createButton('2nd btn');\n  createButton('3rd btn');\n  let buttons = selectAll('button');\n\n  for (let i = 0; i < buttons.length; i++) {\n    buttons[i].size(100, 100);\n  }\n}\n</code></div>\n<div class='norender'><code>\n// these are all valid calls to selectAll()\nlet a = selectAll('.beep');\na = selectAll('div');\na = selectAll('button', '#container');\n\nlet b = createDiv();\nb.id('container');\nlet c = select('#container');\na = selectAll('p', c);\na = selectAll('#container p');\n\nlet d = document.getElementById('container');\na = selectAll('.boop', d);\na = selectAll('#container .boop');\nconsole.log(a);\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":126,"description":"<p>Helper function for select and selectAll</p>\n","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":141,"description":"<p>Helper function for getElement and getElements.</p>\n","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":175,"description":"<p>Removes all elements created by p5, except any canvas / graphics\nelements created by <a href=\"#/p5/createCanvas\">createCanvas</a> or <a href=\"#/p5/createGraphics\">createGraphics</a>.\nEvent handlers are removed, and element is removed from the DOM.</p>\n","itemtype":"method","name":"removeElements","example":["\n<div class='norender'><code>\nfunction setup() {\n  createCanvas(100, 100);\n  createDiv('this is some text');\n  createP('this is a paragraph');\n}\nfunction mousePressed() {\n  removeElements(); // this will remove the div and p, not canvas\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":200,"description":"<p>The .<a href=\"#/p5.Element/changed\">changed()</a> function is called when the value of an\nelement changes.\nThis can be used to attach an element specific event listener.</p>\n","itemtype":"method","name":"changed","params":[{"name":"fxn","description":"<p>function to be fired when the value of\n                               an element changes.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div><code>\nlet sel;\n\nfunction setup() {\n  textAlign(CENTER);\n  background(200);\n  sel = createSelect();\n  sel.position(10, 10);\n  sel.option('pear');\n  sel.option('kiwi');\n  sel.option('grape');\n  sel.changed(mySelectEvent);\n}\n\nfunction mySelectEvent() {\n  let item = sel.value();\n  background(200);\n  text(\"it's a \" + item + '!', 50, 50);\n}\n</code></div>\n\n<div><code>\nlet checkbox;\nlet cnv;\n\nfunction setup() {\n  checkbox = createCheckbox(' fill');\n  checkbox.changed(changeFill);\n  cnv = createCanvas(100, 100);\n  cnv.position(0, 30);\n  noFill();\n}\n\nfunction draw() {\n  background(200);\n  ellipse(50, 50, 50, 50);\n}\n\nfunction changeFill() {\n  if (checkbox.checked()) {\n    fill(0);\n  } else {\n    noFill();\n  }\n}\n</code></div>"],"alt":"dropdown: pear, kiwi, grape. When selected text \"its a\" + selection shown.","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":267,"description":"<p>The .<a href=\"#/p5.Element/input\">input()</a> function is called when any user input is\ndetected with an element. The input event is often used\nto detect keystrokes in a input element, or changes on a\nslider element. This can be used to attach an element specific\nevent listener.</p>\n","itemtype":"method","name":"input","params":[{"name":"fxn","description":"<p>function to be fired when any user input is\n                               detected within the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\n// Open your console to see the output\nfunction setup() {\n  let inp = createInput('');\n  inp.input(myInputEvent);\n}\n\nfunction myInputEvent() {\n  console.log('you are typing: ', this.value());\n}\n</code></div>"],"alt":"no display.","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":301,"description":"<p>Helpers for create methods.</p>\n","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":312,"description":"<p>Creates a <div></div> element in the DOM with given inner HTML.</p>\n","itemtype":"method","name":"createDiv","params":[{"name":"html","description":"<p>inner HTML for element created</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div class='norender'><code>\ncreateDiv('this is some text');\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":329,"description":"<p>Creates a <p></p> element in the DOM with given inner HTML. Used\nfor paragraph length text.</p>\n","itemtype":"method","name":"createP","params":[{"name":"html","description":"<p>inner HTML for element created</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div class='norender'><code>\ncreateP('this is some text');\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":347,"description":"<p>Creates a <span></span> element in the DOM with given inner HTML.</p>\n","itemtype":"method","name":"createSpan","params":[{"name":"html","description":"<p>inner HTML for element created</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div class='norender'><code>\ncreateSpan('this is some text');\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":364,"description":"<p>Creates an <img> element in the DOM with given src and\nalternate text.</p>\n","itemtype":"method","name":"createImg","return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div class='norender'><code>\ncreateImg(\n  'https://p5js.org/assets/img/asterisk-01.png',\n  'the p5 magenta asterisk'\n);\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":364,"params":[{"name":"src","description":"<p>src path or url for image</p>\n","type":"String"},{"name":"alt","description":"<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#Attributes\">alternate text</a> to be used if image does not load. You can use also an empty string (<code>\"\"</code>) if that an image is not intended to be viewed.</p>\n","type":"String"}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}},{"line":380,"params":[{"name":"src","description":"","type":"String"},{"name":"alt","description":"","type":"String"},{"name":"crossOrigin","description":"<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes\">crossOrigin property</a> of the <code>img</code> element; use either 'anonymous' or 'use-credentials' to retrieve the image with cross-origin access (for later use with <code>canvas</code>. if an empty string(<code>\"\"</code>) is passed, CORS is not used</p>\n","type":"String"},{"name":"successCallback","description":"<p>callback to be called once image data is loaded with the <a href=\"#/p5.Element\">p5.Element</a> as argument</p>\n","type":"Function","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":410,"description":"<p>Creates an <a></a> element in the DOM for including a hyperlink.</p>\n","itemtype":"method","name":"createA","params":[{"name":"href","description":"<p>url of page to link to</p>\n","type":"String"},{"name":"html","description":"<p>inner html of link element to display</p>\n","type":"String"},{"name":"target","description":"<p>target where new link should open,\n                            could be _blank, _self, _parent, _top.</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div class='norender'><code>\ncreateA('http://p5js.org/', 'this is a link');\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":433,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":435,"description":"<p>Creates a slider <input></input> element in the DOM.\nUse .size() to set the display length of the slider.</p>\n","itemtype":"method","name":"createSlider","params":[{"name":"min","description":"<p>minimum value of the slider</p>\n","type":"Number"},{"name":"max","description":"<p>maximum value of the slider</p>\n","type":"Number"},{"name":"value","description":"<p>default value of the slider</p>\n","type":"Number","optional":true},{"name":"step","description":"<p>step size for each tick of the slider (if step is set to 0, the slider will move continuously from the minimum to the maximum value)</p>\n","type":"Number","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet slider;\nfunction setup() {\n  slider = createSlider(0, 255, 100);\n  slider.position(10, 10);\n  slider.style('width', '80px');\n}\n\nfunction draw() {\n  let val = slider.value();\n  background(val);\n}\n</code></div>\n\n<div><code>\nlet slider;\nfunction setup() {\n  colorMode(HSB);\n  slider = createSlider(0, 360, 60, 40);\n  slider.position(10, 10);\n  slider.style('width', '80px');\n}\n\nfunction draw() {\n  let val = slider.value();\n  background(val, 100, 100, 1);\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":490,"description":"<p>Creates a <button></button> element in the DOM.\nUse .size() to set the display size of the button.\nUse .mousePressed() to specify behavior on press.</p>\n","itemtype":"method","name":"createButton","params":[{"name":"label","description":"<p>label displayed on the button</p>\n","type":"String"},{"name":"value","description":"<p>value of the button</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div class='norender'><code>\nlet button;\nfunction setup() {\n  createCanvas(100, 100);\n  background(0);\n  button = createButton('click me');\n  button.position(19, 19);\n  button.mousePressed(changeBG);\n}\n\nfunction changeBG() {\n  let val = random(255);\n  background(val);\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":524,"description":"<p>Creates a checkbox <input></input> element in the DOM.\nCalling .checked() on a checkbox returns if it is checked or not</p>\n","itemtype":"method","name":"createCheckbox","params":[{"name":"label","description":"<p>label displayed after checkbox</p>\n","type":"String","optional":true},{"name":"value","description":"<p>value of the checkbox; checked is true, unchecked is false</p>\n","type":"Boolean","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div class='norender'><code>\nlet checkbox;\n\nfunction setup() {\n  checkbox = createCheckbox('label', false);\n  checkbox.changed(myCheckedEvent);\n}\n\nfunction myCheckedEvent() {\n  if (this.checked()) {\n    console.log('Checking!');\n  } else {\n    console.log('Unchecking!');\n  }\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":592,"description":"<p>Creates a dropdown menu <select></select> element in the DOM.\nIt also helps to assign select-box methods to <a href=\"#/p5.Element\">p5.Element</a> when selecting existing select box.</p>\n<ul>\n<li><code>.option(name, [value])</code> can be used to set options for the select after it is created.</li>\n<li><code>.value()</code> will return the currently selected option.</li>\n<li><code>.selected()</code> will return current dropdown element which is an instance of <a href=\"#/p5.Element\">p5.Element</a></li>\n<li><code>.selected(value)</code> can be used to make given option selected by default when the page first loads.</li>\n<li><code>.disable()</code> marks whole of dropdown element as disabled.</li>\n<li><code>.disable(value)</code> marks given option as disabled</li>\n</ul>\n","itemtype":"method","name":"createSelect","return":{"description":"","type":"p5.Element"},"example":["\n<div><code>\nlet sel;\n\nfunction setup() {\n  textAlign(CENTER);\n  background(200);\n  sel = createSelect();\n  sel.position(10, 10);\n  sel.option('pear');\n  sel.option('kiwi');\n  sel.option('grape');\n  sel.selected('kiwi');\n  sel.changed(mySelectEvent);\n}\n\nfunction mySelectEvent() {\n  let item = sel.value();\n  background(200);\n  text('It is a ' + item + '!', 50, 50);\n}\n</code></div>\n\n<div><code>\nlet sel;\n\nfunction setup() {\n  textAlign(CENTER);\n  background(200);\n  sel = createSelect();\n  sel.position(10, 10);\n  sel.option('oil');\n  sel.option('milk');\n  sel.option('bread');\n  sel.disable('milk');\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":592,"params":[{"name":"multiple","description":"<p>true if dropdown should support multiple selections</p>\n","type":"Boolean","optional":true}],"return":{"description":"","type":"p5.Element"}},{"line":643,"params":[{"name":"existing","description":"<p>DOM select element</p>\n","type":"Object"}],"return":{"description":"","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":740,"description":"<p>Creates a radio button element in the DOM.It also helps existing radio buttons\nassign methods of <a href=\"#/p5.Element/\">p5.Element</a>.</p>\n<ul>\n<li><code>.option(value, [label])</code> can be used to create a new option for the\nelement. If an option with a value already exists, it will be returned.\nOptionally, a label can be provided as second argument for the option.</li>\n<li><code>.remove(value)</code> can be used to remove an option for the element.</li>\n<li><code>.value()</code> method will return the currently selected value.</li>\n<li><code>.selected()</code> method will return the currently selected input element.</li>\n<li><code>.selected(value)</code> method will select the option and return it.</li>\n<li><code>.disable(Boolean)</code> method will enable/disable the whole radio button element.</li>\n</ul>\n","itemtype":"method","name":"createRadio","return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet radio;\n\nfunction setup() {\n  radio = createRadio();\n  radio.option('black');\n  radio.option('white');\n  radio.option('gray');\n  radio.style('width', '60px');\n  textAlign(CENTER);\n  fill(255, 0, 0);\n}\n\nfunction draw() {\n  let val = radio.value();\n  background(val);\n  text(val, width / 2, height / 2);\n}\n</code></div>\n<div><code>\nlet radio;\n\nfunction setup() {\n  radio = createRadio();\n  radio.option('apple', 1);\n  radio.option('bread', 2);\n  radio.option('juice', 3);\n  radio.style('width', '60px');\n  textAlign(CENTER);\n}\n\nfunction draw() {\n  background(200);\n  let val = radio.value();\n  if (val) {\n    text('item cost is $' + val, width / 2, height / 2);\n  }\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":740,"params":[{"name":"containerElement","description":"<p>An container HTML Element either a div\nor span inside which all existing radio inputs will be considered as options.</p>\n","type":"Object"},{"name":"name","description":"<p>A name parameter for each Input Element.</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}},{"line":798,"params":[{"name":"name","description":"","type":"String"}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}},{"line":803,"params":[],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":918,"description":"<p>Creates a colorPicker element in the DOM for color input.\nThe .value() method will return a hex string (#rrggbb) of the color.\nThe .color() method will return a p5.Color object with the current chosen color.</p>\n","itemtype":"method","name":"createColorPicker","params":[{"name":"value","description":"<p>default color of element</p>\n","type":"String|p5.Color","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet colorPicker;\nfunction setup() {\n  createCanvas(100, 100);\n  colorPicker = createColorPicker('#ed225d');\n  colorPicker.position(0, height + 5);\n}\n\nfunction draw() {\n  background(colorPicker.color());\n}\n</code></div>\n<div><code>\nlet inp1, inp2;\nfunction setup() {\n  createCanvas(100, 100);\n  background('grey');\n  inp1 = createColorPicker('#ff0000');\n  inp1.position(0, height + 5);\n  inp1.input(setShade1);\n  inp2 = createColorPicker(color('yellow'));\n  inp2.position(0, height + 30);\n  inp2.input(setShade2);\n  setMidShade();\n}\n\nfunction setMidShade() {\n  // Finding a shade between the two\n  let commonShade = lerpColor(inp1.color(), inp2.color(), 0.5);\n  fill(commonShade);\n  rect(20, 20, 60, 60);\n}\n\nfunction setShade1() {\n  setMidShade();\n  console.log('You are choosing shade 1 to be : ', this.value());\n}\nfunction setShade2() {\n  setMidShade();\n  console.log('You are choosing shade 2 to be : ', this.value());\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1006,"description":"<p>Creates an <input></input> element in the DOM for text input.\nUse .<a href=\"#/p5.Element/size\">size()</a> to set the display length of the box.</p>\n","itemtype":"method","name":"createInput","return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div class='norender'><code>\nfunction setup() {\n  let inp = createInput('');\n  inp.input(myInputEvent);\n}\n\nfunction myInputEvent() {\n  console.log('you are typing: ', this.value());\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":1006,"params":[{"name":"value","description":"<p>default value of the input box</p>\n","type":"String"},{"name":"type","description":"<p>type of text, ie text, password etc. Defaults to text.\n  Needs a value to be specified first.</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}},{"line":1027,"params":[{"name":"value","description":"","type":"String","optional":true}],"return":{"description":"","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":1040,"description":"<p>Creates an <input></input> element in the DOM of type 'file'.\nThis allows users to select local files for use in a sketch.</p>\n","itemtype":"method","name":"createFileInput","params":[{"name":"callback","description":"<p>callback function for when a file is loaded</p>\n","type":"Function"},{"name":"multiple","description":"<p>optional, to allow multiple files to be selected</p>\n","type":"Boolean","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created DOM element","type":"p5.Element"},"example":["\n<div><code>\nlet input;\nlet img;\n\nfunction setup() {\n  input = createFileInput(handleFile);\n  input.position(0, 0);\n}\n\nfunction draw() {\n  background(255);\n  if (img) {\n    image(img, 0, 0, width, height);\n  }\n}\n\nfunction handleFile(file) {\n  print(file);\n  if (file.type === 'image') {\n    img = createImg(file.data, '');\n    img.hide();\n  } else {\n    img = null;\n  }\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1100,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1147,"description":"<p>Creates an HTML5 <video> element in the DOM for simple playback\nof audio/video. Shown by default, can be hidden with .<a href=\"#/p5.Element/hide\">hide()</a>\nand drawn into canvas using <a href=\"#/p5/image\">image()</a>. The first parameter\ncan be either a single string path to a video file, or an array of string\npaths to different formats of the same video. This is useful for ensuring\nthat your video can play across different browsers, as each supports\ndifferent formats. See <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats'>this\npage</a> for further information about supported formats.</p>\n","itemtype":"method","name":"createVideo","params":[{"name":"src","description":"<p>path to a video file, or array of paths for\n                            supporting different browsers</p>\n","type":"String|String[]"},{"name":"callback","description":"<p>callback function to be called upon\n                            'canplaythrough' event fire, that is, when the\n                            browser can play the media, and estimates that\n                            enough data has been loaded to play the media\n                            up to its end without having to stop for\n                            further buffering of content</p>\n","type":"Function","optional":true}],"return":{"description":"pointer to video <a href=\"#/p5.Element\">p5.Element</a>","type":"p5.MediaElement"},"example":["\n<div><code>\nlet vid;\nfunction setup() {\n  noCanvas();\n\n  vid = createVideo(\n    ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm'],\n    vidLoad\n  );\n\n  vid.size(100, 100);\n}\n\n// This function is called when the video loads\nfunction vidLoad() {\n  vid.loop();\n  vid.volume(0);\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1193,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1195,"description":"<p>Creates a hidden HTML5 <audio> element in the DOM for simple audio\nplayback. The first parameter can be either a single string path to a\naudio file, or an array of string paths to different formats of the same\naudio. This is useful for ensuring that your audio can play across\ndifferent browsers, as each supports different formats.\nSee <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats'>this\npage for further information about supported formats</a>.</p>\n","itemtype":"method","name":"createAudio","params":[{"name":"src","description":"<p>path to an audio file, or array of paths\n                            for supporting different browsers</p>\n","type":"String|String[]","optional":true},{"name":"callback","description":"<p>callback function to be called upon\n                            'canplaythrough' event fire, that is, when the\n                            browser can play the media, and estimates that\n                            enough data has been loaded to play the media\n                            up to its end without having to stop for\n                            further buffering of content</p>\n","type":"Function","optional":true}],"return":{"description":"pointer to audio <a href=\"#/p5.Element\">p5.Element</a>","type":"p5.MediaElement"},"example":["\n<div><code>\nlet ele;\nfunction setup() {\n  ele = createAudio('assets/beat.mp3');\n\n  // here we set the element to autoplay\n  // The element will play as soon\n  // as it is able to do so.\n  ele.autoplay(true);\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1232,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1234,"itemtype":"property","name":"VIDEO","type":"String","final":1,"category":["Constants"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1240,"itemtype":"property","name":"AUDIO","type":"String","final":1,"category":["Constants"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1277,"description":"<p>Creates a new HTML5 <video> element that contains the audio/video feed\nfrom a webcam. The element is separate from the canvas and is displayed by\ndefault. The element can be hidden using .<a href=\"#/p5.Element/hide\">hide()</a>.\nThe feed can be drawn onto the canvas using <a href=\"#/p5/image\">image()</a>.\nThe loadedmetadata property can be used to detect when the element has fully\nloaded (see second example).</p>\n<p>More specific properties of the feed can be passing in a Constraints object.\nSee the <a href='http://w3c.github.io/mediacapture-main/getusermedia.html#media-track-constraints'>\nW3C spec</a> for possible properties. Note that not all of these are supported\nby all browsers.</p>\n<p><em>Security note</em>: A new browser security specification requires that\ngetUserMedia, which is behind <a href=\"#/p5/createCapture\">createCapture()</a>,\nonly works when you're running the code locally, or on HTTPS. Learn more\n<a href='http://stackoverflow.com/questions/34197653/getusermedia-in-chrome-47-without-using-https'>here</a>\nand <a href='https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia'>here</a>.</p>\n","itemtype":"method","name":"createCapture","params":[{"name":"type","description":"<p>type of capture, either VIDEO or\n                                  AUDIO if none specified, default both,\n                                  or a Constraints object</p>\n","type":"String|Constant|Object"},{"name":"callback","description":"<p>function to be called once\n                                  stream has loaded</p>\n","type":"Function","optional":true}],"return":{"description":"capture video <a href=\"#/p5.Element\">p5.Element</a>","type":"p5.Element"},"example":["\n<div class='norender notest'>\n<code>\nlet capture;\n\nfunction setup() {\n  createCanvas(480, 480);\n  capture = createCapture(VIDEO);\n  capture.hide();\n}\n\nfunction draw() {\n  image(capture, 0, 0, width, width * capture.height / capture.width);\n  filter(INVERT);\n}\n</code>\n</div>\n\n<div class='norender notest'>\n<code>\nfunction setup() {\n  createCanvas(480, 120);\n  let constraints = {\n    video: {\n      mandatory: {\n        minWidth: 1280,\n        minHeight: 720\n      },\n      optional: [{ maxFrameRate: 10 }]\n    },\n    audio: true\n  };\n  createCapture(constraints, function(stream) {\n    console.log(stream);\n  });\n}\n</code>\n</div>\n<div class='norender notest'>\n<code>\nlet capture;\n\nfunction setup() {\n  createCanvas(640, 480);\n  capture = createCapture(VIDEO);\n}\nfunction draw() {\n  background(0);\n  if (capture.loadedmetadata) {\n    let c = capture.get(0, 0, 100, 100);\n    image(c, 0, 0);\n  }\n}\n</code>\n</div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1414,"description":"<p>Creates element with given tag in the DOM with given content.</p>\n","itemtype":"method","name":"createElement","params":[{"name":"tag","description":"<p>tag for the new element</p>\n","type":"String"},{"name":"content","description":"<p>html content to be inserted into the element</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div class='norender'><code>\ncreateElement('h2', 'im an h2 p5.element!');\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1438,"description":"<p>Adds specified class to the element.</p>\n","itemtype":"method","name":"addClass","params":[{"name":"class","description":"<p>name of class to add</p>\n","type":"String"}],"chainable":1,"example":["\n <div class='norender'><code>\n let div = createDiv('div');\n div.addClass('myClass');\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1463,"description":"<p>Removes specified class from the element.</p>\n","itemtype":"method","name":"removeClass","params":[{"name":"class","description":"<p>name of class to remove</p>\n","type":"String"}],"chainable":1,"example":["\n <div class='norender'><code>\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.\nlet div;\nfunction setup() {\n   div = createDiv('div');\n   div.addClass('myClass');\n }\nfunction mousePressed() {\n   div.removeClass('myClass');\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1494,"description":"<p>Checks if specified class already set to element</p>\n","itemtype":"method","name":"hasClass","return":{"description":"a boolean value if element has specified class","type":"Boolean"},"params":[{"name":"c","description":"<p>class name of class to check</p>\n","type":"String"}],"example":["\n <div class='norender'><code>\n let div;\nfunction setup() {\n   div = createDiv('div');\n   div.addClass('show');\n }\nfunction mousePressed() {\n   if (div.hasClass('show')) {\n     div.addClass('show');\n   } else {\n     div.removeClass('show');\n   }\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1523,"description":"<p>Toggles element class</p>\n","itemtype":"method","name":"toggleClass","params":[{"name":"c","description":"<p>class name to toggle</p>\n","type":"String"}],"chainable":1,"example":["\n <div class='norender'><code>\n let div;\nfunction setup() {\n   div = createDiv('div');\n   div.addClass('show');\n }\nfunction mousePressed() {\n   div.toggleClass('show');\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1556,"description":"<p>Attaches the element  as a child to the parent specified.\n Accepts either a string ID, DOM node, or <a href=\"#/p5.Element\">p5.Element</a>.\n If no argument is specified, an array of children DOM nodes is returned.</p>\n","itemtype":"method","name":"child","return":{"description":"an array of child nodes","type":"Node[]"},"example":["\n <div class='norender'><code>\n let div0 = createDiv('this is the parent');\n let div1 = createDiv('this is the child');\n div0.child(div1); // use p5.Element\n </code></div>\n <div class='norender'><code>\n let div0 = createDiv('this is the parent');\n let div1 = createDiv('this is the child');\n div1.id('apples');\n div0.child('apples'); // use id\n </code></div>\n <div class='norender notest'><code>\n // this example assumes there is a div already on the page\n // with id \"myChildDiv\"\n let div0 = createDiv('this is the parent');\n let elt = document.getElementById('myChildDiv');\n div0.child(elt); // use element from page\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1556,"params":[],"return":{"description":"an array of child nodes","type":"Node[]"}},{"line":1584,"params":[{"name":"child","description":"<p>the ID, DOM node, or <a href=\"#/p5.Element\">p5.Element</a>\n                        to add to the current element</p>\n","type":"String|p5.Element","optional":true}],"chainable":1}]},{"file":"src/dom/dom.js","line":1609,"description":"<p>Centers a p5 Element either vertically, horizontally,\nor both, relative to its parent or according to\nthe body if the Element has no parent. If no argument is passed\nthe Element is aligned both vertically and horizontally.</p>\n","itemtype":"method","name":"center","params":[{"name":"align","description":"<p>passing 'vertical', 'horizontal' aligns element accordingly</p>\n","type":"String","optional":true}],"chainable":1,"example":["\n<div><code>\nfunction setup() {\n  let div = createDiv('').size(10, 10);\n  div.style('background-color', 'orange');\n  div.center();\n}\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1660,"description":"<p>If an argument is given, sets the inner HTML of the element,\n replacing any existing html. If true is included as a second\n argument, html is appended instead of replacing existing html.\n If no arguments are given, returns\n the inner HTML of the element.</p>\n","itemtype":"method","name":"html","return":{"description":"the inner HTML of the element","type":"String"},"example":["\n <div class='norender'><code>\n let div = createDiv('').size(100, 100);\n div.html('hi');\n </code></div>\n <div class='norender'><code>\n let div = createDiv('Hello ').size(100, 100);\n div.html('World', true);\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1660,"params":[],"return":{"description":"the inner HTML of the element","type":"String"}},{"line":1681,"params":[{"name":"html","description":"<p>the HTML to be placed inside the element</p>\n","type":"String","optional":true},{"name":"append","description":"<p>whether to append HTML to existing</p>\n","type":"Boolean","optional":true}],"chainable":1}]},{"file":"src/dom/dom.js","line":1699,"description":"<p>Sets the position of the element. If no position type argument is given, the\n position will be relative to (0, 0) of the window.\n Essentially, this sets position:absolute and left and top\n properties of style. If an optional third argument specifying position type is given,\n the x and y coordinates will be interpreted based on the <a target=\"_blank\"\n href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/position\">positioning scheme</a>.\n If no arguments given, the function returns the x and y position of the element.\nfound documentation on how to be more specific with object type\n <a href=\"https://stackoverflow.com/questions/14714314/how-do-i-comment-object-literals-in-yuidoc\">https://stackoverflow.com/questions/14714314/how-do-i-comment-object-literals-in-yuidoc</a></p>\n","itemtype":"method","name":"position","return":{"description":"object of form { x: 0, y: 0 } containing the position of the element in an object","type":"Object"},"example":["\n <div><code class='norender'>\n function setup() {\n   let cnv = createCanvas(100, 100);\n   // positions canvas 50px to the right and 100px\n   // below upper left corner of the window\n   cnv.position(50, 100);\n }\n </code></div>\n <div><code class='norender'>\n function setup() {\n   let cnv = createCanvas(100, 100);\n   // positions canvas 50px to the right and 100px\n   // below upper left corner of the window\n   cnv.position(0, 0, 'fixed');\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1699,"params":[],"return":{"description":"object of form { x: 0, y: 0 } containing the position of the element in an object","type":"Object"}},{"line":1732,"params":[{"name":"x","description":"<p>x-position relative to upper left of window (optional)</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>y-position relative to upper left of window (optional)</p>\n","type":"Number","optional":true},{"name":"positionType","description":"<p>it can be static, fixed, relative, sticky, initial or inherit (optional)</p>\n","type":"String"}],"chainable":1}]},{"file":"src/dom/dom.js","line":1819,"description":"<p>Sets the given style (css) property (1st arg) of the element with the\ngiven value (2nd arg). If a single argument is given, .style()\nreturns the value of the given property; however, if the single argument\nis given in css syntax ('text-align:center'), .style() sets the css\nappropriately.</p>\n","itemtype":"method","name":"style","return":{"description":"value of property","type":"String"},"example":["\n<div><code class='norender'>\nlet myDiv = createDiv('I like pandas.');\nmyDiv.style('font-size', '18px');\nmyDiv.style('color', '#ff0000');\n</code></div>\n<div><code class='norender'>\nlet col = color(25, 23, 200, 50);\nlet button = createButton('button');\nbutton.style('background-color', col);\nbutton.position(10, 10);\n</code></div>\n<div><code class='norender'>\nlet myDiv;\nfunction setup() {\n  background(200);\n  myDiv = createDiv('I like gray.');\n  myDiv.position(20, 20);\n}\n\nfunction draw() {\n  myDiv.style('font-size', mouseX + 'px');\n}\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1819,"params":[{"name":"property","description":"<p>property to be set</p>\n","type":"String"}],"return":{"description":"value of property","type":"String"}},{"line":1854,"params":[{"name":"property","description":"","type":"String"},{"name":"value","description":"<p>value to assign to property</p>\n","type":"String|p5.Color"}],"chainable":1,"return":{"description":"current value of property, if no value is given as second argument","type":"String"}}]},{"file":"src/dom/dom.js","line":1911,"description":"<p>Adds a new attribute or changes the value of an existing attribute\n on the specified element. If no value is specified, returns the\n value of the given attribute, or null if attribute is not set.</p>\n","itemtype":"method","name":"attribute","return":{"description":"value of attribute","type":"String"},"example":["\n <div class='norender'><code>\n let myDiv = createDiv('I like pandas.');\n myDiv.attribute('align', 'center');\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1911,"params":[],"return":{"description":"value of attribute","type":"String"}},{"line":1926,"params":[{"name":"attr","description":"<p>attribute to set</p>\n","type":"String"},{"name":"value","description":"<p>value to assign to attribute</p>\n","type":"String"}],"chainable":1}]},{"file":"src/dom/dom.js","line":1955,"description":"<p>Removes an attribute on the specified element.</p>\n","itemtype":"method","name":"removeAttribute","params":[{"name":"attr","description":"<p>attribute to remove</p>\n","type":"String"}],"chainable":1,"example":["\n <div><code>\n let button;\n let checkbox;\nfunction setup() {\n   checkbox = createCheckbox('enable', true);\n   checkbox.changed(enableButton);\n   button = createButton('button');\n   button.position(10, 10);\n }\nfunction enableButton() {\n   if (this.checked()) {\n     // Re-enable the button\n     button.removeAttribute('disabled');\n   } else {\n     // Disable the button\n     button.attribute('disabled', '');\n   }\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2000,"description":"<p>Either returns the value of the element if no arguments\ngiven, or sets the value of the element.</p>\n","itemtype":"method","name":"value","return":{"description":"value of the element","type":"String|Number"},"example":["\n<div class='norender'><code>\n// gets the value\nlet inp;\nfunction setup() {\n  inp = createInput('');\n}\n\nfunction mousePressed() {\n  print(inp.value());\n}\n</code></div>\n<div class='norender'><code>\n// sets the value\nlet inp;\nfunction setup() {\n  inp = createInput('myValue');\n}\n\nfunction mousePressed() {\n  inp.value('myValue');\n}\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":2000,"params":[],"return":{"description":"value of the element","type":"String|Number"}},{"line":2030,"params":[{"name":"value","description":"","type":"String|Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":2046,"description":"<p>Shows the current element. Essentially, setting display:block for the style.</p>\n","itemtype":"method","name":"show","chainable":1,"example":["\n <div class='norender'><code>\n let div = createDiv('div');\n div.style('display', 'none');\n div.show(); // turns display to block\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2064,"description":"<p>Hides the current element. Essentially, setting display:none for the style.</p>\n","itemtype":"method","name":"hide","chainable":1,"example":["\n<div class='norender'><code>\nlet div = createDiv('this is a div');\ndiv.hide();\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2080,"description":"<p>Sets the width and height of the element. AUTO can be used to\n only adjust one dimension at a time. If no arguments are given, it\n returns the width and height of the element in an object. In case of\n elements which need to be loaded, such as images, it is recommended\n to call the function after the element has finished loading.</p>\n","itemtype":"method","name":"size","return":{"description":"the width and height of the element in an object","type":"Object"},"example":["\n <div class='norender'><code>\n let div = createDiv('this is a div');\n div.size(100, 100);\n let img = createImg(\n   'assets/rockies.jpg',\n   'A tall mountain with a small forest and field in front of it on a sunny day',\n   '',\n   () => {\n     img.size(10, AUTO);\n   }\n );\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":2080,"params":[],"return":{"description":"the width and height of the element in an object","type":"Object"}},{"line":2104,"params":[{"name":"w","description":"<p>width of the element, either AUTO, or a number</p>\n","type":"Number|Constant"},{"name":"h","description":"<p>height of the element, either AUTO, or a number</p>\n","type":"Number|Constant","optional":true}],"chainable":1}]},{"file":"src/dom/dom.js","line":2161,"description":"<p>Removes the element, stops all media streams, and deregisters all listeners.</p>\n","itemtype":"method","name":"remove","example":["\n<div class='norender'><code>\nlet myDiv = createDiv('this is some text');\nmyDiv.remove();\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2195,"description":"<p>Registers a callback that gets called every time a file that is\ndropped on the element has been loaded.\np5 will load every dropped file into memory and pass it as a p5.File object to the callback.\nMultiple files dropped at the same time will result in multiple calls to the callback.</p>\n<p>You can optionally pass a second callback which will be registered to the raw\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/Events/drop\">drop</a> event.\nThe callback will thus be provided the original\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/DragEvent\">DragEvent</a>.\nDropping multiple files at the same time will trigger the second callback once per drop,\nwhereas the first callback will trigger for each loaded file.</p>\n","itemtype":"method","name":"drop","params":[{"name":"callback","description":"<p>callback to receive loaded file, called for each file dropped.</p>\n","type":"Function"},{"name":"fxn","description":"<p>callback triggered once when files are dropped with the drop event.</p>\n","type":"Function","optional":true}],"chainable":1,"example":["\n<div><code>\nfunction setup() {\n  let c = createCanvas(100, 100);\n  background(200);\n  textAlign(CENTER);\n  text('drop file', width / 2, height / 2);\n  c.drop(gotFile);\n}\n\nfunction gotFile(file) {\n  background(200);\n  text('received file:', width / 2, height / 2);\n  text(file.name, width / 2, height / 2 + 50);\n}\n</code></div>\n\n<div><code>\nlet img;\n\nfunction setup() {\n  let c = createCanvas(100, 100);\n  background(200);\n  textAlign(CENTER);\n  text('drop image', width / 2, height / 2);\n  c.drop(gotFile);\n}\n\nfunction draw() {\n  if (img) {\n    image(img, 0, 0, width, height);\n  }\n}\n\nfunction gotFile(file) {\n  img = createImg(file.data, '').hide();\n}\n</code></div>"],"alt":"Canvas turns into whatever image is dragged/dropped onto it.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2327,"description":"<p>Path to the media element source.</p>\n","itemtype":"property","name":"src","return":{"description":"src","type":"String"},"example":["\n<div><code>\nlet ele;\n\nfunction setup() {\n  background(250);\n\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n\n  //In this example we create\n  //a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/beat.mp3');\n\n  //We'll set up our example so that\n  //when you click on the text,\n  //an alert box displays the MediaElement's\n  //src field.\n  textAlign(CENTER);\n  text('Click Me!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    //Show our p5.MediaElement's src field\n    alert(ele.src);\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2392,"description":"<p>Play an HTML5 media element.</p>\n","itemtype":"method","name":"play","chainable":1,"example":["\n<div><code>\nlet ele;\n\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n\n  //In this example we create\n  //a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/beat.mp3');\n\n  background(250);\n  textAlign(CENTER);\n  text('Click to Play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    //Here we call the play() function on\n    //the p5.MediaElement we created above.\n    //This will start the audio sample.\n    ele.play();\n\n    background(200);\n    text('You clicked Play!', width / 2, height / 2);\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2456,"description":"<p>Stops an HTML5 media element (sets current time to zero).</p>\n","itemtype":"method","name":"stop","chainable":1,"example":["\n<div><code>\n//This example both starts\n//and stops a sound sample\n//when the user clicks the canvas\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\n\n//while our audio is playing,\n//this will be set to true\nlet sampleIsPlaying = false;\n\nfunction setup() {\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/beat.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    background(200);\n\n    if (sampleIsPlaying) {\n      //if the sample is currently playing\n      //calling the stop() function on\n      //our p5.MediaElement will stop\n      //it and reset its current\n      //time to 0 (i.e. it will start\n      //at the beginning the next time\n      //you play it)\n      ele.stop();\n\n      sampleIsPlaying = false;\n      text('Click to play!', width / 2, height / 2);\n    } else {\n      //loop our sound element until we\n      //call ele.stop() on it.\n      ele.loop();\n\n      sampleIsPlaying = true;\n      text('Click to stop!', width / 2, height / 2);\n    }\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2520,"description":"<p>Pauses an HTML5 media element.</p>\n","itemtype":"method","name":"pause","chainable":1,"example":["\n<div><code>\n//This example both starts\n//and pauses a sound sample\n//when the user clicks the canvas\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\n\n//while our audio is playing,\n//this will be set to true\nlet sampleIsPlaying = false;\n\nfunction setup() {\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    background(200);\n\n    if (sampleIsPlaying) {\n      //Calling pause() on our\n      //p5.MediaElement will stop it\n      //playing, but when we call the\n      //loop() or play() functions\n      //the sample will start from\n      //where we paused it.\n      ele.pause();\n\n      sampleIsPlaying = false;\n      text('Click to resume!', width / 2, height / 2);\n    } else {\n      //loop our sound element until we\n      //call ele.pause() on it.\n      ele.loop();\n\n      sampleIsPlaying = true;\n      text('Click to pause!', width / 2, height / 2);\n    }\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2582,"description":"<p>Set 'loop' to true for an HTML5 media element, and starts playing.</p>\n","itemtype":"method","name":"loop","chainable":1,"example":["\n<div><code>\n//Clicking the canvas will loop\n//the audio sample until the user\n//clicks again to stop it\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\n\n//while our audio is playing,\n//this will be set to true\nlet sampleIsLooping = false;\n\nfunction setup() {\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to loop!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    background(200);\n\n    if (!sampleIsLooping) {\n      //loop our sound element until we\n      //call ele.stop() on it.\n      ele.loop();\n\n      sampleIsLooping = true;\n      text('Click to stop!', width / 2, height / 2);\n    } else {\n      ele.stop();\n\n      sampleIsLooping = false;\n      text('Click to loop!', width / 2, height / 2);\n    }\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2638,"description":"<p>Set 'loop' to false for an HTML5 media element. Element will stop\nwhen it reaches the end.</p>\n","itemtype":"method","name":"noLoop","chainable":1,"example":["\n<div><code>\n//This example both starts\n//and stops loop of sound sample\n//when the user clicks the canvas\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\n//while our audio is playing,\n//this will be set to true\nlet sampleIsPlaying = false;\n\nfunction setup() {\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/beat.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    background(200);\n\n    if (sampleIsPlaying) {\n      ele.noLoop();\n      sampleIsPlaying = false;\n      text('No more Loops!', width / 2, height / 2);\n    } else {\n      ele.loop();\n      sampleIsPlaying = true;\n      text('Click to stop looping!', width / 2, height / 2);\n    }\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2704,"description":"<p>Set HTML5 media element to autoplay or not. If no argument is specified, by\ndefault it will autoplay.</p>\n","itemtype":"method","name":"autoplay","params":[{"name":"shouldAutoplay","description":"<p>whether the element should autoplay</p>\n","type":"Boolean"}],"chainable":1,"example":["\n<div><code>\nlet videoElement;\nfunction setup() {\n  noCanvas();\n  videoElement = createVideo(['assets/small.mp4'], onVideoLoad);\n}\nfunction onVideoLoad() {\n  // The media will play as soon as it is loaded.\n  videoElement.autoplay();\n  videoElement.volume(0);\n  videoElement.size(100, 100);\n}\n</code></div>\n\n<div><code>\nlet videoElement;\nfunction setup() {\n  noCanvas();\n  videoElement = createVideo(['assets/small.mp4'], onVideoLoad);\n}\nfunction onVideoLoad() {\n  // The media will not play untill some explicitly triggered.\n  videoElement.autoplay(false);\n  videoElement.volume(0);\n  videoElement.size(100, 100);\n}\n\nfunction mouseClicked() {\n  videoElement.play();\n}\n</code></div>"],"alt":"An example of a video element which autoplays after it is loaded.\nAn example of a video element which waits for a trigger for playing.","class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2771,"description":"<p>Sets volume for this HTML5 media element. If no argument is given,\nreturns the current volume.</p>\n","itemtype":"method","name":"volume","return":{"description":"current volume","type":"Number"},"example":["\n<div><code>\nlet ele;\nfunction setup() {\n  // p5.MediaElement objects are usually created\n  // by calling the createAudio(), createVideo(),\n  // and createCapture() functions.\n  // In this example we create\n  // a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(250);\n  textAlign(CENTER);\n  text('Click to Play!', width / 2, height / 2);\n}\nfunction mouseClicked() {\n  // Here we call the volume() function\n  // on the sound element to set its volume\n  // Volume must be between 0.0 and 1.0\n  ele.volume(0.2);\n  ele.play();\n  background(200);\n  text('You clicked Play!', width / 2, height / 2);\n}\n</code></div>\n<div><code>\nlet audio;\nlet counter = 0;\n\nfunction loaded() {\n  audio.play();\n}\n\nfunction setup() {\n  audio = createAudio('assets/lucky_dragons.mp3', loaded);\n  textAlign(CENTER);\n}\n\nfunction draw() {\n  if (counter === 0) {\n    background(0, 255, 0);\n    text('volume(0.9)', width / 2, height / 2);\n  } else if (counter === 1) {\n    background(255, 255, 0);\n    text('volume(0.5)', width / 2, height / 2);\n  } else if (counter === 2) {\n    background(255, 0, 0);\n    text('volume(0.1)', width / 2, height / 2);\n  }\n}\n\nfunction mousePressed() {\n  counter++;\n  if (counter === 0) {\n    audio.volume(0.9);\n  } else if (counter === 1) {\n    audio.volume(0.5);\n  } else if (counter === 2) {\n    audio.volume(0.1);\n  } else {\n    counter = 0;\n    audio.volume(0.9);\n  }\n}\n</code>\n</div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM","overloads":[{"line":2771,"params":[],"return":{"description":"current volume","type":"Number"}},{"line":2844,"params":[{"name":"val","description":"<p>volume between 0.0 and 1.0</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":2857,"description":"<p>If no arguments are given, returns the current playback speed of the\nelement. The speed parameter sets the speed where 2.0 will play the\nelement twice as fast, 0.5 will play at half the speed, and -1 will play\nthe element in normal speed in reverse.(Note that not all browsers support\nbackward playback and even if they do, playback might not be smooth.)</p>\n","itemtype":"method","name":"speed","return":{"description":"current playback speed of the element","type":"Number"},"example":["\n<div class='norender notest'><code>\n//Clicking the canvas will loop\n//the audio sample until the user\n//clicks again to stop it\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\nlet button;\n\nfunction setup() {\n  createCanvas(710, 400);\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/beat.mp3');\n  ele.loop();\n  background(200);\n\n  button = createButton('2x speed');\n  button.position(100, 68);\n  button.mousePressed(twice_speed);\n\n  button = createButton('half speed');\n  button.position(200, 68);\n  button.mousePressed(half_speed);\n\n  button = createButton('reverse play');\n  button.position(300, 68);\n  button.mousePressed(reverse_speed);\n\n  button = createButton('STOP');\n  button.position(400, 68);\n  button.mousePressed(stop_song);\n\n  button = createButton('PLAY!');\n  button.position(500, 68);\n  button.mousePressed(play_speed);\n}\n\nfunction twice_speed() {\n  ele.speed(2);\n}\n\nfunction half_speed() {\n  ele.speed(0.5);\n}\n\nfunction reverse_speed() {\n  ele.speed(-1);\n}\n\nfunction stop_song() {\n  ele.stop();\n}\n\nfunction play_speed() {\n  ele.play();\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM","overloads":[{"line":2857,"params":[],"return":{"description":"current playback speed of the element","type":"Number"}},{"line":2929,"params":[{"name":"speed","description":"<p>speed multiplier for element playback</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":2946,"description":"<p>If no arguments are given, returns the current time of the element.\nIf an argument is given the current time of the element is set to it.</p>\n","itemtype":"method","name":"time","return":{"description":"current time (in seconds)","type":"Number"},"example":["\n<div><code>\nlet ele;\nlet beginning = true;\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n\n  //In this example we create\n  //a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(250);\n  textAlign(CENTER);\n  text('start at beginning', width / 2, height / 2);\n}\n\n// this function fires with click anywhere\nfunction mousePressed() {\n  if (beginning === true) {\n    // here we start the sound at the beginning\n    // time(0) is not necessary here\n    // as this produces the same result as\n    // play()\n    ele.play().time(0);\n    background(200);\n    text('jump 2 sec in', width / 2, height / 2);\n    beginning = false;\n  } else {\n    // here we jump 2 seconds into the sound\n    ele.play().time(2);\n    background(250);\n    text('start at beginning', width / 2, height / 2);\n    beginning = true;\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM","overloads":[{"line":2946,"params":[],"return":{"description":"current time (in seconds)","type":"Number"}},{"line":2991,"params":[{"name":"time","description":"<p>time to jump to (in seconds)</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":3005,"description":"<p>Returns the duration of the HTML5 media element.</p>\n","itemtype":"method","name":"duration","return":{"description":"duration","type":"Number"},"example":["\n<div><code>\nlet ele;\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n  //In this example we create\n  //a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/doorbell.mp3');\n  background(250);\n  textAlign(CENTER);\n  text('Click to know the duration!', 10, 25, 70, 80);\n}\nfunction mouseClicked() {\n  ele.play();\n  background(200);\n  //ele.duration dislpays the duration\n  text(ele.duration() + ' seconds', width / 2, height / 2);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3127,"description":"<p>Schedule an event to be called when the audio or video\nelement reaches the end. If the element is looping,\nthis will not be called. The element is passed in\nas the argument to the onended callback.</p>\n","itemtype":"method","name":"onended","params":[{"name":"callback","description":"<p>function to call when the\n                            soundfile has ended. The\n                            media element will be passed\n                            in as the argument to the\n                            callback.</p>\n","type":"Function"}],"chainable":1,"example":["\n<div><code>\nfunction setup() {\n  let audioEl = createAudio('assets/beat.mp3');\n  audioEl.showControls();\n  audioEl.onended(sayDone);\n}\n\nfunction sayDone(elt) {\n  alert('done playing ' + elt.src);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3158,"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3160,"description":"<p>Send the audio output of this element to a specified audioNode or\np5.sound object. If no element is provided, connects to p5's main\noutput. That connection is established when this method is first called.\nAll connections are removed by the .disconnect() method.</p>\n<p>This method is meant to be used with the p5.sound.js addon library.</p>\n","itemtype":"method","name":"connect","params":[{"name":"audioNode","description":"<p>AudioNode from the Web Audio API,\nor an object from the p5.sound library</p>\n","type":"AudioNode|Object"}],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3209,"description":"<p>Disconnect all Web Audio routing, including to main output.\nThis is useful if you want to re-route the output through\naudio effects, for example.</p>\n","itemtype":"method","name":"disconnect","class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3224,"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3226,"description":"<p>Show the default MediaElement controls, as determined by the web browser.</p>\n","itemtype":"method","name":"showControls","example":["\n<div><code>\nlet ele;\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n  //In this example we create\n  //a new p5.MediaElement via createAudio()\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to Show Controls!', 10, 25, 70, 80);\n}\nfunction mousePressed() {\n  ele.showControls();\n  background(200);\n  text('Controls Shown', width / 2, height / 2);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3257,"description":"<p>Hide the default mediaElement controls.</p>\n","itemtype":"method","name":"hideControls","example":["\n<div><code>\nlet ele;\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n  //In this example we create\n  //a new p5.MediaElement via createAudio()\n  ele = createAudio('assets/lucky_dragons.mp3');\n  ele.showControls();\n  background(200);\n  textAlign(CENTER);\n  text('Click to hide Controls!', 10, 25, 70, 80);\n}\nfunction mousePressed() {\n  ele.hideControls();\n  background(200);\n  text('Controls hidden', width / 2, height / 2);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3286,"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3297,"description":"<p>Schedule events to trigger every time a MediaElement\n(audio/video) reaches a playback cue point.</p>\n<p>Accepts a callback function, a time (in seconds) at which to trigger\nthe callback, and an optional parameter for the callback.</p>\n<p>Time will be passed as the first parameter to the callback function,\nand param will be the second parameter.</p>\n","itemtype":"method","name":"addCue","params":[{"name":"time","description":"<p>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.</p>\n","type":"Number"},{"name":"callback","description":"<p>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.</p>\n","type":"Function"},{"name":"value","description":"<p>An object to be passed as the\n                            second parameter to the\n                            callback function.</p>\n","type":"Object","optional":true}],"return":{"description":"id ID of this cue,\n                    useful for removeCue(id)","type":"Number"},"example":["\n<div><code>\n//\n//\nfunction setup() {\n  noCanvas();\n\n  let audioEl = createAudio('assets/beat.mp3');\n  audioEl.showControls();\n\n  // schedule three calls to changeBackground\n  audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\n  audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\n  audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\n  audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\n  audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\n  audioEl.addCue(5.0, changeBackground, color(255, 255, 0));\n}\n\nfunction changeBackground(val) {\n  background(val);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3360,"description":"<p>Remove a callback based on its ID. The ID is returned by the\naddCue method.</p>\n","itemtype":"method","name":"removeCue","params":[{"name":"id","description":"<p>ID of the cue, as returned by addCue</p>\n","type":"Number"}],"example":["\n<div><code>\nlet audioEl, id1, id2;\nfunction setup() {\n  background(255, 255, 255);\n  audioEl = createAudio('assets/beat.mp3');\n  audioEl.showControls();\n  // schedule five calls to changeBackground\n  id1 = audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\n  audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\n  audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\n  audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\n  id2 = audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\n  text('Click to remove first and last Cue!', 10, 25, 70, 80);\n}\nfunction mousePressed() {\n  audioEl.removeCue(id1);\n  audioEl.removeCue(id2);\n}\nfunction changeBackground(val) {\n  background(val);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3402,"description":"<p>Remove all of the callbacks that had originally been scheduled\nvia the addCue method.</p>\n","itemtype":"method","name":"clearCues","params":[{"name":"id","description":"<p>ID of the cue, as returned by addCue</p>\n","type":"Number"}],"example":["\n<div><code>\nlet audioEl;\nfunction setup() {\n  background(255, 255, 255);\n  audioEl = createAudio('assets/beat.mp3');\n  //Show the default MediaElement controls, as determined by the web browser\n  audioEl.showControls();\n  // schedule calls to changeBackground\n  background(200);\n  text('Click to change Cue!', 10, 25, 70, 80);\n  audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\n  audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\n  audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\n  audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\n  audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\n}\nfunction mousePressed() {\n  // here we clear the scheduled callbacks\n  audioEl.clearCues();\n  // then we add some more callbacks\n  audioEl.addCue(1, changeBackground, color(2, 2, 2));\n  audioEl.addCue(3, changeBackground, color(255, 255, 0));\n}\nfunction changeBackground(val) {\n  background(val);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3468,"description":"<p>Underlying File object. All normal File methods can be called on this.</p>\n","itemtype":"property","name":"file","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3480,"description":"<p>File type (image, text, etc.)</p>\n","itemtype":"property","name":"type","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3486,"description":"<p>File subtype (usually the file extension jpg, png, xml, etc.)</p>\n","itemtype":"property","name":"subtype","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3492,"description":"<p>File name</p>\n","itemtype":"property","name":"name","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3498,"description":"<p>File size</p>\n","itemtype":"property","name":"size","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3505,"description":"<p>URL string containing either image data, the text contents of the file or\na parsed object if file is JSON and p5.XML if XML</p>\n","itemtype":"property","name":"data","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/events/acceleration.js","line":11,"description":"<p>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.</p>\n","itemtype":"property","name":"deviceOrientation","type":"Constant","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":23,"description":"<p>The system variable accelerationX always contains the acceleration of the\ndevice along the x axis. Value is represented as meters per second squared.</p>\n","itemtype":"property","name":"accelerationX","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"Magnitude of device acceleration is displayed as ellipse size","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":46,"description":"<p>The system variable accelerationY always contains the acceleration of the\ndevice along the y axis. Value is represented as meters per second squared.</p>\n","itemtype":"property","name":"accelerationY","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"Magnitude of device acceleration is displayed as ellipse size","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":69,"description":"<p>The system variable accelerationZ always contains the acceleration of the\ndevice along the z axis. Value is represented as meters per second squared.</p>\n","itemtype":"property","name":"accelerationZ","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"Magnitude of device acceleration is displayed as ellipse size","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":94,"description":"<p>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.</p>\n","itemtype":"property","name":"pAccelerationX","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":104,"description":"<p>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.</p>\n","itemtype":"property","name":"pAccelerationY","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":114,"description":"<p>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.</p>\n","itemtype":"property","name":"pAccelerationZ","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":135,"description":"<p>The system variable rotationX always contains the rotation of the\ndevice along the x axis. If the sketch <a href=\"#/p5/angleMode\">\nangleMode()</a> is set to DEGREES, the value will be -180 to 180. If\nit is set to RADIANS, the value will be -PI to PI.</p>\n<p>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.</p>\n","itemtype":"property","name":"rotationX","type":"Number","readonly":"","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  //rotateZ(radians(rotationZ));\n  rotateX(radians(rotationX));\n  //rotateY(radians(rotationY));\n  box(200, 200, 200);\n}\n</code>\n</div>"],"alt":"red horizontal line right, green vertical line bottom. black background.","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":168,"description":"<p>The system variable rotationY always contains the rotation of the\ndevice along the y axis. If the sketch <a href=\"#/p5/angleMode\">\nangleMode()</a> 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.</p>\n<p>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.</p>\n","itemtype":"property","name":"rotationY","type":"Number","readonly":"","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  //rotateZ(radians(rotationZ));\n  //rotateX(radians(rotationX));\n  rotateY(radians(rotationY));\n  box(200, 200, 200);\n}\n</code>\n</div>"],"alt":"red horizontal line right, green vertical line bottom. black background.","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":201,"description":"<p>The system variable rotationZ always contains the rotation of the\ndevice along the z axis. If the sketch <a href=\"#/p5/angleMode\">\nangleMode()</a> 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.</p>\n<p>Unlike rotationX and rotationY, this variable is available for devices\nwith a built-in compass only.</p>\n<p>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.</p>\n","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  rotateZ(radians(rotationZ));\n  //rotateX(radians(rotationX));\n  //rotateY(radians(rotationY));\n  box(200, 200, 200);\n}\n</code>\n</div>"],"itemtype":"property","name":"rotationZ","type":"Number","readonly":"","alt":"red horizontal line right, green vertical line bottom. black background.","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":239,"description":"<p>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 <a href=\"#/p5/angleMode\"> angleMode()</a> is set to DEGREES,\nthe value will be -180 to 180. If it is set to RADIANS, the value will\nbe -PI to PI.</p>\n<p>pRotationX can also be used with rotationX to determine the rotate\ndirection of the device along the X-axis.</p>\n","example":["\n<div class='norender'>\n<code>\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);\n</code>\n</div>"],"alt":"no image to display.","itemtype":"property","name":"pRotationX","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":285,"description":"<p>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 <a href=\"#/p5/angleMode\"> angleMode()</a> 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.</p>\n<p>pRotationY can also be used with rotationY to determine the rotate\ndirection of the device along the Y-axis.</p>\n","example":["\n<div class='norender'>\n<code>\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);\n</code>\n</div>"],"alt":"no image to display.","itemtype":"property","name":"pRotationY","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":330,"description":"<p>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 <a href=\"#/p5/angleMode\"> angleMode()</a> 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.</p>\n<p>pRotationZ can also be used with rotationZ to determine the rotate\ndirection of the device along the Z-axis.</p>\n","example":["\n<div class='norender'>\n<code>\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);\n</code>\n</div>"],"alt":"no image to display.","itemtype":"property","name":"pRotationZ","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":389,"description":"<p>When a device is rotated, the axis that triggers the <a href=\"#/p5/deviceTurned\">deviceTurned()</a>\nmethod is stored in the turnAxis variable. The turnAxis variable is only defined within\nthe scope of deviceTurned().</p>\n","itemtype":"property","name":"turnAxis","type":"String","readonly":"","example":["\n<div>\n<code>\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}\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</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device turns\n50x50 black rect in center of canvas. turns white on mobile when x-axis turns","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":428,"description":"<p>The <a href=\"#/p5/setMoveThreshold\">setMoveThreshold()</a> function is used to set the movement threshold for\nthe <a href=\"#/p5/deviceMoved\">deviceMoved()</a> function. The default threshold is set to 0.5.</p>\n","itemtype":"method","name":"setMoveThreshold","params":[{"name":"value","description":"<p>The threshold value</p>\n","type":"Number"}],"example":["\n<div class=\"norender\">\n<code>\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}\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</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device moves","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":471,"description":"<p>The <a href=\"#/p5/setShakeThreshold\">setShakeThreshold()</a> function is used to set the movement threshold for\nthe <a href=\"#/p5/deviceShaken\">deviceShaken()</a> function. The default threshold is set to 30.</p>\n","itemtype":"method","name":"setShakeThreshold","params":[{"name":"value","description":"<p>The threshold value</p>\n","type":"Number"}],"example":["\n<div class=\"norender\">\n<code>\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}\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</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device\nis being shaked","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":515,"description":"<p>The <a href=\"#/p5/deviceMoved\">deviceMoved()</a> 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 <a href=\"https://p5js.org/reference/#/p5/setMoveThreshold\">setMoveThreshold()</a>.</p>\n","itemtype":"method","name":"deviceMoved","example":["\n<div class=\"norender\">\n<code>\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}\nfunction deviceMoved() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device moves","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":546,"description":"<p>The <a href=\"#/p5/deviceTurned\">deviceTurned()</a> function is called when the device rotates by\nmore than 90 degrees continuously.</p>\n<p>The axis that triggers the <a href=\"#/p5/deviceTurned\">deviceTurned()</a> method is stored in the turnAxis\nvariable. The <a href=\"#/p5/deviceTurned\">deviceTurned()</a> method can be locked to trigger on any axis:\nX, Y or Z by comparing the turnAxis variable to 'X', 'Y' or 'Z'.</p>\n","itemtype":"method","name":"deviceTurned","example":["\n<div class=\"norender\">\n<code>\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}\nfunction deviceTurned() {\n  if (value === 0) {\n    value = 255;\n  } else if (value === 255) {\n    value = 0;\n  }\n}\n</code>\n</div>\n<div>\n<code>\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}\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</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device turns\n50x50 black rect in center of canvas. turns white on mobile when x-axis turns","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":604,"description":"<p>The <a href=\"#/p5/deviceShaken\">deviceShaken()</a> 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 <a href=\"https://p5js.org/reference/#/p5/setShakeThreshold\">setShakeThreshold()</a>.</p>\n","itemtype":"method","name":"deviceShaken","example":["\n<div class=\"norender\">\n<code>\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}\nfunction deviceShaken() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device shakes","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/keyboard.js","line":10,"description":"<p>The boolean system variable <a href=\"#/p5/keyIsPressed\">keyIsPressed</a> is true if any key is pressed\nand false if no keys are pressed.</p>\n","itemtype":"property","name":"keyIsPressed","type":"Boolean","readonly":"","example":["\n<div>\n<code>\nfunction draw() {\n  if (keyIsPressed === true) {\n    fill(0);\n  } else {\n    fill(255);\n  }\n  rect(25, 25, 50, 50);\n}\n</code>\n</div>"],"alt":"50x50 white rect that turns black on keypress.","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":36,"description":"<p>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 <a href=\"#/p5/keyTyped\">keyTyped()</a>. For non-ASCII keys, use the <a href=\"#/p5/keyCode\">keyCode</a>\nvariable.</p>\n","itemtype":"property","name":"key","type":"String","readonly":"","example":["\n<div><code>\n// Click any key to display it!\n// (Not Guaranteed to be Case Sensitive)\nfunction setup() {\n  fill(245, 123, 158);\n  textSize(50);\n}\n\nfunction draw() {\n  background(200);\n  text(key, 33, 65); // Display last key pressed.\n}\n</code></div>"],"alt":"canvas displays any key value that is pressed in pink font.","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":64,"description":"<p>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: <a href=\"http://keycode.info/\">keycode.info</a>.</p>\n","itemtype":"property","name":"keyCode","type":"Integer","readonly":"","example":["\n<div><code>\nlet fillVal = 126;\nfunction draw() {\n  fill(fillVal);\n  rect(25, 25, 50, 50);\n}\n\nfunction keyPressed() {\n  if (keyCode === UP_ARROW) {\n    fillVal = 255;\n  } else if (keyCode === DOWN_ARROW) {\n    fillVal = 0;\n  }\n  return false; // prevent default\n}\n</code></div>\n<div><code>\nfunction draw() {}\nfunction keyPressed() {\n  background('yellow');\n  text(`${key} ${keyCode}`, 10, 40);\n  print(key, ' ', keyCode);\n  return false; // prevent default\n}\n</code></div>"],"alt":"Grey rect center. turns white when up arrow pressed and black when down\nDisplay key pressed and its keyCode in a yellow box","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":105,"description":"<p>The <a href=\"#/p5/keyPressed\">keyPressed()</a> function is called once every time a key is pressed. The\nkeyCode for the key that was pressed is stored in the <a href=\"#/p5/keyCode\">keyCode</a> variable.</p>\n<p>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.</p>\n<p>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 <a href=\"#/p5/keyTyped\">keyTyped()</a> to read the key variable, in which the\ncase of the variable will be distinguished.</p>\n<p>Because of how operating systems handle key repeats, holding down a key\nmay cause multiple calls to <a href=\"#/p5/keyTyped\">keyTyped()</a> (and <a href=\"#/p5/keyReleased\">keyReleased()</a> as well). The\nrate of repeat is set by the operating system and how each computer is\nconfigured.<br><br>\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.</p>\n","itemtype":"method","name":"keyPressed","example":["\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyPressed() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyPressed() {\n  if (keyCode === LEFT_ARROW) {\n    value = 255;\n  } else if (keyCode === RIGHT_ARROW) {\n    value = 0;\n  }\n}\n</code>\n</div>\n<div class=\"norender\">\n<code>\nfunction keyPressed() {\n  // Do something\n  return false; // prevent any default behaviour\n}\n</code>\n</div>"],"alt":"black rect center. turns white when key pressed and black when released\nblack rect center. turns white when left arrow pressed and black when right.","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":191,"description":"<p>The <a href=\"#/p5/keyReleased\">keyReleased()</a> function is called once every time a key is released.\nSee <a href=\"#/p5/key\">key</a> and <a href=\"#/p5/keyCode\">keyCode</a> for more information.<br><br>\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.</p>\n","itemtype":"method","name":"keyReleased","example":["\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyReleased() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n  return false; // prevent any default behavior\n}\n</code>\n</div>"],"alt":"black rect center. turns white when key pressed and black when pressed again","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":242,"description":"<p>The <a href=\"#/p5/keyTyped\">keyTyped()</a> 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 <a href=\"#/p5/keyPressed\">keyPressed()</a> function instead.\nThe most recent key typed will be stored in the key variable.</p>\n<p>Because of how operating systems handle key repeats, holding down a key\nwill cause multiple calls to <a href=\"#/p5/keyTyped\">keyTyped()</a> (and <a href=\"#/p5/keyReleased\">keyReleased()</a> as well). The\nrate of repeat is set by the operating system and how each computer is\nconfigured.<br><br>\nBrowsers may have different default behaviors attached to various key\nevents. To prevent any default behavior for this event, add \"return false\"\nto the end of the method.</p>\n","itemtype":"method","name":"keyTyped","example":["\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyTyped() {\n  if (key === 'a') {\n    value = 255;\n  } else if (key === 'b') {\n    value = 0;\n  }\n  // uncomment to prevent any default behavior\n  // return false;\n}\n</code>\n</div>"],"alt":"black rect center. turns white when 'a' key typed and black when 'b' pressed","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":295,"description":"<p>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.</p>\n","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":305,"description":"<p>The <a href=\"#/p5/keyIsDown\">keyIsDown()</a> 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 <a href=\"#/p5/keyCode\">keyCode</a> names listed\n<a href=\"http://p5js.org/reference/#p5/keyCode\">here</a>.</p>\n","itemtype":"method","name":"keyIsDown","params":[{"name":"code","description":"<p>The key to check for.</p>\n","type":"Number"}],"return":{"description":"whether key is down or not","type":"Boolean"},"example":["\n<div><code>\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}\n</code></div>\n\n<div><code>\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}\n</code></div>"],"alt":"50x50 red ellipse moves left, right, up and down with arrow presses.\n50x50 red ellipse gets bigger or smaller when + or - are pressed.","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/mouse.js","line":12,"description":"<p>The variable movedX contains the horizontal movement of the mouse since the last frame</p>\n","itemtype":"property","name":"movedX","type":"Number","readonly":"","example":["\n <div class=\"notest\">\n <code>\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 }\n </code>\n </div>"],"alt":"box moves left and right according to mouse movement then slowly back towards the center","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":43,"description":"<p>The variable movedY contains the vertical movement of the mouse since the last frame</p>\n","itemtype":"property","name":"movedY","type":"Number","readonly":"","example":["\n<div class=\"notest\">\n<code>\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(y, 50, 50, 50);\n}\n</code>\n</div>"],"alt":"box moves up and down according to mouse movement then slowly back towards the center","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":80,"description":"<p>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.</p>\n","itemtype":"property","name":"mouseX","type":"Number","readonly":"","example":["\n<div>\n<code>\n// Move the mouse across the canvas\nfunction draw() {\n  background(244, 248, 252);\n  line(mouseX, 0, mouseX, 100);\n}\n</code>\n</div>"],"alt":"horizontal black line moves left and right with mouse x-position","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":106,"description":"<p>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.</p>\n","itemtype":"property","name":"mouseY","type":"Number","readonly":"","example":["\n<div>\n<code>\n// Move the mouse across the canvas\nfunction draw() {\n  background(244, 248, 252);\n  line(0, mouseY, 100, mouseY);\n}\n</code>\n</div>"],"alt":"vertical black line moves up and down with mouse y-position","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":132,"description":"<p>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.</p>\n","itemtype":"property","name":"pmouseX","type":"Number","readonly":"","example":["\n<div>\n<code>\n// Move the mouse across the canvas to leave a trail\nfunction setup() {\n  //slow down the frameRate to make it more visible\n  frameRate(10);\n}\n\nfunction draw() {\n  background(244, 248, 252);\n  line(mouseX, mouseY, pmouseX, pmouseY);\n  print(pmouseX + ' -> ' + mouseX);\n}\n</code>\n</div>"],"alt":"line trail is created from cursor movements. faster movement make longer line.","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":164,"description":"<p>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.</p>\n","itemtype":"property","name":"pmouseY","type":"Number","readonly":"","example":["\n<div>\n<code>\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n  //draw a square only if the mouse is not moving\n  if (mouseY === pmouseY && mouseX === pmouseX) {\n    rect(20, 20, 60, 60);\n  }\n\n  print(pmouseY + ' -> ' + mouseY);\n}\n</code>\n</div>"],"alt":"60x60 black rect center, fuchsia background. rect flickers on mouse movement","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":195,"description":"<p>The system variable winMouseX always contains the current horizontal\nposition of the mouse, relative to (0, 0) of the window.</p>\n","itemtype":"property","name":"winMouseX","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"60x60 black rect y moves with mouse y and fuchsia canvas moves with mouse x","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":233,"description":"<p>The system variable winMouseY always contains the current vertical\nposition of the mouse, relative to (0, 0) of the window.</p>\n","itemtype":"property","name":"winMouseY","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"60x60 black rect x moves with mouse x and fuchsia canvas y moves with mouse y","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":271,"description":"<p>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.</p>\n","itemtype":"property","name":"pwinMouseX","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"fuchsia ellipse moves with mouse x and y. Grows and shrinks with mouse speed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":311,"description":"<p>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.</p>\n","itemtype":"property","name":"pwinMouseY","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"fuchsia ellipse moves with mouse x and y. Grows and shrinks with mouse speed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":351,"description":"<p>Processing automatically tracks if the mouse button is pressed and which\nbutton is pressed. The value of the system variable mouseButton is either\nLEFT, RIGHT, or CENTER depending on which button was pressed last.\nWarning: different browsers may track mouseButton differently.</p>\n","itemtype":"property","name":"mouseButton","type":"Constant","readonly":"","example":["\n<div>\n<code>\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n\n  if (mouseIsPressed) {\n    if (mouseButton === LEFT) {\n      ellipse(50, 50, 50, 50);\n    }\n    if (mouseButton === RIGHT) {\n      rect(25, 25, 50, 50);\n    }\n    if (mouseButton === CENTER) {\n      triangle(23, 75, 50, 20, 78, 75);\n    }\n  }\n\n  print(mouseButton);\n}\n</code>\n</div>"],"alt":"50x50 black ellipse appears on center of fuchsia canvas on mouse click/press.","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":389,"description":"<p>The boolean system variable mouseIsPressed is true if the mouse is pressed\nand false if not.</p>\n","itemtype":"property","name":"mouseIsPressed","type":"Boolean","readonly":"","example":["\n<div>\n<code>\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n\n  if (mouseIsPressed) {\n    ellipse(50, 50, 50, 50);\n  } else {\n    rect(25, 25, 50, 50);\n  }\n\n  print(mouseIsPressed);\n}\n</code>\n</div>"],"alt":"black 50x50 rect becomes ellipse with mouse click/press. fuchsia background.","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":481,"description":"<p>The <a href=\"#/p5/mouseMoved\">mouseMoved()</a> function is called every time the mouse moves and a mouse\nbutton is not pressed.<br><br>\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.</p>\n","itemtype":"method","name":"mouseMoved","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction mouseMoved() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mouseMoved() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseMoved(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect becomes lighter with mouse movements until white then resets\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":535,"description":"<p>The <a href=\"#/p5/mouseDragged\">mouseDragged()</a> function is called once every time the mouse moves and\na mouse button is pressed. If no <a href=\"#/p5/mouseDragged\">mouseDragged()</a> function is defined, the\n<a href=\"#/p5/touchMoved\">touchMoved()</a> function will be called instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"mouseDragged","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction mouseDragged() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mouseDragged() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseDragged(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns lighter with mouse click and drag until white, resets\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":615,"description":"<p>The <a href=\"#/p5/mousePressed\">mousePressed()</a> 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\n<a href=\"#/p5/mousePressed\">mousePressed()</a> function is defined, the <a href=\"#/p5/touchStarted\">touchStarted()</a> function will be\ncalled instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"mousePressed","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\n// Click 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}\nfunction mousePressed() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mousePressed() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mousePressed(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns white with mouse click/press.\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":696,"description":"<p>The <a href=\"#/p5/mouseReleased\">mouseReleased()</a> function is called every time a mouse button is\nreleased. If no <a href=\"#/p5/mouseReleased\">mouseReleased()</a> function is defined, the <a href=\"#/p5/touchEnded\">touchEnded()</a>\nfunction will be called instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"mouseReleased","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction mouseReleased() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mouseReleased() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseReleased(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns white with mouse click/press.\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":772,"description":"<p>The <a href=\"#/p5/mouseClicked\">mouseClicked()</a> function is called once after a mouse button has been\npressed and then released.<br><br>\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 <a href=\"#/p5/mousePressed\">mousePressed()</a> or <a href=\"#/p5/mouseReleased\">mouseReleased()</a>.<br><br>\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.</p>\n","itemtype":"method","name":"mouseClicked","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\n\nfunction mouseClicked() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mouseClicked() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseClicked(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns white with mouse click/press.\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":841,"description":"<p>The <a href=\"#/p5/doubleClicked\">doubleClicked()</a> 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:\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/Events/dblclick\">https://developer.mozilla.org/en-US/docs/Web/Events/dblclick</a></p>\n","itemtype":"method","name":"doubleClicked","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\n\nfunction doubleClicked() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction doubleClicked() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction doubleClicked(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns white with mouse doubleClick/press.\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":926,"description":"<p>The function <a href=\"#/p5/mouseWheel\">mouseWheel()</a> is executed every time a vertical mouse wheel\nevent is detected either triggered by an actual mouse wheel or by a\ntouchpad.<br><br>\nThe event.delta property returns the amount the mouse wheel\nhave scrolled. The values can be positive or negative depending on the\nscroll direction (on OS X with \"natural\" scrolling enabled, the signs\nare inverted).<br><br>\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.<br><br>\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.</p>\n","itemtype":"method","name":"mouseWheel","params":[{"name":"event","description":"<p>optional WheelEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\nlet pos = 25;\n\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n  rect(25, pos, 50, 50);\n}\n\nfunction mouseWheel(event) {\n  print(event.delta);\n  //move the square according to the vertical scroll amount\n  pos += event.delta;\n  //uncomment to block page scrolling\n  //return false;\n}\n</code>\n</div>"],"alt":"black 50x50 rect moves up and down with vertical scroll. fuchsia background","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":979,"description":"<p>The function <a href=\"#/p5/requestPointerLock\">requestPointerLock()</a>\nlocks the pointer to its current position and makes it invisible.\nUse <a href=\"#/p5/movedX\">movedX</a> and <a href=\"#/p5/movedY\">movedY</a> 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.</p>\n","itemtype":"method","name":"requestPointerLock","example":["\n<div class=\"notest\">\n<code>\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}\n</code>\n</div>"],"alt":"3D scene moves according to mouse mouse movement in a first person perspective","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":1025,"description":"<p>The function <a href=\"#/p5/exitPointerLock\">exitPointerLock()</a>\nexits a previously triggered <a href=\"#/p5/requestPointerLock\">pointer Lock</a>\nfor example to make ui elements usable etc</p>\n","itemtype":"method","name":"exitPointerLock","example":["\n<div class=\"notest\">\n<code>\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}\nfunction mouseClicked() {\n  if (!locked) {\n    locked = true;\n    requestPointerLock();\n  } else {\n    exitPointerLock();\n    locked = false;\n  }\n}\n</code>\n</div>"],"alt":"cursor gets locked / unlocked on mouse-click","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/touch.js","line":10,"description":"<p>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.</p>\n<p>The touches[] array is not supported on Safari and IE on touch-based\ndesktops (laptops).</p>\n","itemtype":"property","name":"touches","type":"Object[]","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"Number of touches currently registered are displayed on the canvas","class":"p5","module":"Events","submodule":"Touch"},{"file":"src/events/touch.js","line":71,"description":"<p>The touchStarted() function is called once after every time a touch is\nregistered. If no <a href=\"#/p5/touchStarted\">touchStarted()</a> function is defined, the <a href=\"#/p5/mousePressed\">mousePressed()</a>\nfunction will be called instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"touchStarted","params":[{"name":"event","description":"<p>optional TouchEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction touchStarted() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction touchStarted() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a TouchEvent object\n// as a callback argument\nfunction touchStarted(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"50x50 black rect turns white with touch event.\nno image displayed","class":"p5","module":"Events","submodule":"Touch"},{"file":"src/events/touch.js","line":151,"description":"<p>The <a href=\"#/p5/touchMoved\">touchMoved()</a> function is called every time a touch move is registered.\nIf no <a href=\"#/p5/touchMoved\">touchMoved()</a> function is defined, the <a href=\"#/p5/mouseDragged\">mouseDragged()</a> function will\nbe called instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"touchMoved","params":[{"name":"event","description":"<p>optional TouchEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction touchMoved() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction touchMoved() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a TouchEvent object\n// as a callback argument\nfunction touchMoved(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"50x50 black rect turns lighter with touch until white. resets\nno image displayed","class":"p5","module":"Events","submodule":"Touch"},{"file":"src/events/touch.js","line":223,"description":"<p>The <a href=\"#/p5/touchEnded\">touchEnded()</a> function is called every time a touch ends. If no\n<a href=\"#/p5/touchEnded\">touchEnded()</a> function is defined, the <a href=\"#/p5/mouseReleased\">mouseReleased()</a> function will be\ncalled instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"touchEnded","params":[{"name":"event","description":"<p>optional TouchEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction touchEnded() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction touchEnded() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a TouchEvent object\n// as a callback argument\nfunction touchEnded(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"50x50 black rect turns white with touch.\nno image displayed","class":"p5","module":"Events","submodule":"Touch"},{"file":"src/image/filters.js","line":3,"description":"<p>This module defines the filters for use with image buffers.</p>\n<p>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.</p>\n<p>Generally speaking users of this module will use the Filters.apply method\non a canvas to create an effect.</p>\n<p>A number of functions are borrowed/adapted from\n<a href=\"http://www.html5rocks.com/en/tutorials/canvas/imagefilters/\">http://www.html5rocks.com/en/tutorials/canvas/imagefilters/</a>\nor the java processing implementation.</p>\n","class":"p5","module":"Events"},{"file":"src/image/image.js","line":8,"description":"<p>This module defines the p5 methods for the <a href=\"#/p5.Image\">p5.Image</a> class\nfor drawing images to the main display canvas.</p>\n","class":"p5","module":"Image","submodule":"Image"},{"file":"src/image/image.js","line":15,"description":"<p>Creates a new <a href=\"#/p5.Image\">p5.Image</a> (the datatype for storing images). This provides a\nfresh buffer of pixels to play with. Set the size of the buffer with the\nwidth and height parameters.</p>\n<p>.<a href=\"#/p5.Image/pixels\">pixels</a> gives access to an array containing the values for all the pixels\nin the display window.\nThese values are numbers. This array is the size (including an appropriate\nfactor for the <a href=\"#/p5/pixelDensity\">pixelDensity</a>) of the display window x4,\nrepresenting the R, G, B, A values in order for each pixel, moving from\nleft to right across each row, then down each column. See .<a href=\"#/p5.Image/pixels\">pixels</a> for\nmore info. It may also be simpler to use <a href=\"#/p5.Image/set\">set()</a> or <a href=\"#/p5.Image/get\">get()</a>.</p>\n<p>Before accessing the pixels of an image, the data must loaded with the\n<a href=\"#/p5.Image/loadPixels\">loadPixels()</a> function. After the array data has been modified, the\n<a href=\"#/p5.Image/updatePixels\">updatePixels()</a> function must be run to update the changes.</p>\n","itemtype":"method","name":"createImage","params":[{"name":"width","description":"<p>width in pixels</p>\n","type":"Integer"},{"name":"height","description":"<p>height in pixels</p>\n","type":"Integer"}],"return":{"description":"the <a href=\"#/p5.Image\">p5.Image</a> object","type":"p5.Image"},"example":["\n<div>\n<code>\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < img.width; i++) {\n  for (let j = 0; j < img.height; j++) {\n    img.set(i, j, color(0, 90, 102));\n  }\n}\nimg.updatePixels();\nimage(img, 17, 17);\n</code>\n</div>\n\n<div>\n<code>\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < img.width; i++) {\n  for (let j = 0; j < img.height; j++) {\n    img.set(i, j, color(0, 90, 102, (i % img.width) * 2));\n  }\n}\nimg.updatePixels();\nimage(img, 17, 17);\nimage(img, 34, 34);\n</code>\n</div>\n\n<div>\n<code>\nlet pink = color(255, 102, 204);\nlet img = createImage(66, 66);\nimg.loadPixels();\nlet d = pixelDensity();\nlet halfImage = 4 * (img.width * d) * (img.height / 2 * d);\nfor (let i = 0; i < halfImage; i += 4) {\n  img.pixels[i] = red(pink);\n  img.pixels[i + 1] = green(pink);\n  img.pixels[i + 2] = blue(pink);\n  img.pixels[i + 3] = alpha(pink);\n}\nimg.updatePixels();\nimage(img, 17, 17);\n</code>\n</div>"],"alt":"66x66 dark turquoise rect in center of canvas.\n2 gradated dark turquoise rects fade left. 1 center 1 bottom right of canvas\nno image displayed","class":"p5","module":"Image","submodule":"Image"},{"file":"src/image/image.js","line":94,"description":"<p>Save the current canvas as an image. The browser will either save the\nfile immediately, or prompt the user with a dialogue window.</p>\n","itemtype":"method","name":"saveCanvas","example":["\n <div class='norender notest'><code>\n function setup() {\n let c = createCanvas(100, 100);\n background(255, 0, 0);\n saveCanvas(c, 'myCanvas', 'jpg');\n }\n </code></div>\n <div class='norender notest'><code>\n // note that this example has the same result as above\n // if no canvas is specified, defaults to main canvas\n function setup() {\n let c = createCanvas(100, 100);\n background(255, 0, 0);\n saveCanvas('myCanvas', 'jpg');\n\n // all of the following are valid\n saveCanvas(c, 'myCanvas', 'jpg');\n saveCanvas(c, 'myCanvas.jpg');\n saveCanvas(c, 'myCanvas');\n saveCanvas(c);\n saveCanvas('myCanvas', 'png');\n saveCanvas('myCanvas');\n saveCanvas();\n }\n </code></div>"],"alt":"no image displayed\n no image displayed\n no image displayed","class":"p5","module":"Image","submodule":"Image","overloads":[{"line":94,"params":[{"name":"selectedCanvas","description":"<p>a variable\n                                representing a specific html5 canvas (optional)</p>\n","type":"p5.Element|HTMLCanvasElement"},{"name":"filename","description":"","type":"String","optional":true},{"name":"extension","description":"<p>'jpg' or 'png'</p>\n","type":"String","optional":true}]},{"line":136,"params":[{"name":"filename","description":"","type":"String","optional":true},{"name":"extension","description":"","type":"String","optional":true}]}]},{"file":"src/image/image.js","line":413,"description":"<p>Capture a sequence of frames that can be used to create a movie.\nAccepts a callback. For example, you may wish to send the frames\nto a server where they can be stored or converted into a movie.\nIf no callback is provided, the browser will pop up save dialogues in an\nattempt to download all of the images that have just been created. With the\ncallback provided the image data isn't saved by default but instead passed\nas an argument to the callback function as an array of objects, with the\nsize of array equal to the total number of frames.</p>\n<p>Note that <a href=\"#/p5.Image/saveFrames\">saveFrames()</a> will only save the first 15 frames of an animation.\nTo export longer animations, you might look into a library like\n<a href=\"https://github.com/spite/ccapture.js/\">ccapture.js</a>.</p>\n","itemtype":"method","name":"saveFrames","params":[{"name":"filename","description":"","type":"String"},{"name":"extension","description":"<p>'jpg' or 'png'</p>\n","type":"String"},{"name":"duration","description":"<p>Duration in seconds to save the frames for.</p>\n","type":"Number"},{"name":"framerate","description":"<p>Framerate to save the frames in.</p>\n","type":"Number"},{"name":"callback","description":"<p>A callback function that will be executed\n                                to handle the image data. This function\n                                should accept an array as argument. The\n                                array will contain the specified number of\n                                frames of objects. Each object has three\n                                properties: imageData - an\n                                image/octet-stream, filename and extension.</p>\n","type":"Function(Array)","optional":true}],"example":["\n<div><code>\n function draw() {\n background(mouseX);\n }\n\n function mousePressed() {\n saveFrames('out', 'png', 1, 25, data => {\n   print(data);\n });\n }\n</code></div>"],"alt":"canvas background goes from light to dark with mouse x.","class":"p5","module":"Image","submodule":"Image"},{"file":"src/image/loading_displaying.js","line":18,"description":"<p>Loads an image from a path and creates a <a href=\"#/p5.Image\">p5.Image</a> from it.</p>\n<p>The image may not be immediately available for rendering\nIf you want to ensure that the image is ready before doing\nanything with it, place the <a href=\"#/p5/loadImage\">loadImage()</a> call in <a href=\"#/p5/preload\">preload()</a>.\nYou may also supply a callback function to handle the image when it's ready.</p>\n<p>The path to the image should be relative to the HTML file\nthat links in your sketch. Loading an image from a URL or other\nremote location may be blocked due to your browser's built-in\nsecurity.</p>\n<p>You can also pass in a string of a base64 encoded image as an alternative to the file path.\nRemember to add \"data:image/png;base64,\" in front of the string.</p>\n","itemtype":"method","name":"loadImage","params":[{"name":"path","description":"<p>Path of the image to be loaded</p>\n","type":"String"},{"name":"successCallback","description":"<p>Function to be called once\n                               the image is loaded. Will be passed the\n                               <a href=\"#/p5.Image\">p5.Image</a>.</p>\n","type":"function(p5.Image)","optional":true},{"name":"failureCallback","description":"<p>called with event error if\n                               the image fails to load.</p>\n","type":"Function(Event)","optional":true}],"return":{"description":"the <a href=\"#/p5.Image\">p5.Image</a> object","type":"p5.Image"},"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n}\n</code>\n</div>\n<div>\n<code>\nfunction setup() {\n  // here we use a callback to display the image after loading\n  loadImage('assets/laDefense.jpg', img => {\n    image(img, 0, 0);\n  });\n}\n</code>\n</div>"],"alt":"image of the underside of a white umbrella and grided ceililng above\nimage of the underside of a white umbrella and grided ceililng above","class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/loading_displaying.js","line":153,"description":"<p>Helper function for loading GIF-based images</p>\n","class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/loading_displaying.js","line":250,"description":"<p>Draw an image to the p5.js canvas.</p>\n<p>This function can be used with different numbers of parameters. The\nsimplest use requires only three parameters: img, x, and y—where (x, y) is\nthe position of the image. Two more parameters can optionally be added to\nspecify the width and height of the image.</p>\n<p>This function can also be used with all eight Number parameters. To\ndifferentiate between all these parameters, p5.js uses the language of\n\"destination rectangle\" (which corresponds to \"dx\", \"dy\", etc.) and \"source\nimage\" (which corresponds to \"sx\", \"sy\", etc.) below. Specifying the\n\"source image\" dimensions can be useful when you want to display a\nsubsection of the source image instead of the whole thing. Here's a diagram\nto explain further:\n<img src=\"assets/drawImage.png\"></img></p>\n","itemtype":"method","name":"image","example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  // Top-left corner of the img is at (0, 0)\n  // Width and height are the img's original width and height\n  image(img, 0, 0);\n}\n</code>\n</div>\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  background(50);\n  // Top-left corner of the img is at (10, 10)\n  // Width and height are 50 x 50\n  image(img, 10, 10, 50, 50);\n}\n</code>\n</div>\n<div>\n<code>\nfunction setup() {\n  // Here, we use a callback to display the image after loading\n  loadImage('assets/laDefense.jpg', img => {\n    image(img, 0, 0);\n  });\n}\n</code>\n</div>\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/gradient.png');\n}\nfunction setup() {\n  // 1. Background image\n  // Top-left corner of the img is at (0, 0)\n  // Width and height are the img's original width and height, 100 x 100\n  image(img, 0, 0);\n  // 2. Top right image\n  // Top-left corner of destination rectangle is at (50, 0)\n  // Destination rectangle width and height are 40 x 20\n  // The next parameters are relative to the source image:\n  // - Starting at position (50, 50) on the source image, capture a 50 x 50\n  // subsection\n  // - Draw this subsection to fill the dimensions of the destination rectangle\n  image(img, 50, 0, 40, 20, 50, 50, 50, 50);\n}\n</code>\n</div>"],"alt":"image of the underside of a white umbrella and gridded ceiling above\nimage of the underside of a white umbrella and gridded ceiling above","class":"p5","module":"Image","submodule":"Loading & Displaying","overloads":[{"line":250,"params":[{"name":"img","description":"<p>the image to display</p>\n","type":"p5.Image|p5.Element"},{"name":"x","description":"<p>the x-coordinate of the top-left corner of the image</p>\n","type":"Number"},{"name":"y","description":"<p>the y-coordinate of the top-left corner of the image</p>\n","type":"Number"},{"name":"width","description":"<p>the width to draw the image</p>\n","type":"Number","optional":true},{"name":"height","description":"<p>the height to draw the image</p>\n","type":"Number","optional":true}]},{"line":337,"params":[{"name":"img","description":"","type":"p5.Image|p5.Element"},{"name":"dx","description":"<p>the x-coordinate of the destination\n                          rectangle in which to draw the source image</p>\n","type":"Number"},{"name":"dy","description":"<p>the y-coordinate of the destination\n                          rectangle in which to draw the source image</p>\n","type":"Number"},{"name":"dWidth","description":"<p>the width of the destination rectangle</p>\n","type":"Number"},{"name":"dHeight","description":"<p>the height of the destination rectangle</p>\n","type":"Number"},{"name":"sx","description":"<p>the x-coordinate of the subsection of the source\nimage to draw into the destination rectangle</p>\n","type":"Number"},{"name":"sy","description":"<p>the y-coordinate of the subsection of the source\nimage to draw into the destination rectangle</p>\n","type":"Number"},{"name":"sWidth","description":"<p>the width of the subsection of the\n                          source image to draw into the destination\n                          rectangle</p>\n","type":"Number","optional":true},{"name":"sHeight","description":"<p>the height of the subsection of the\n                           source image to draw into the destination rectangle</p>\n","type":"Number","optional":true}]}]},{"file":"src/image/loading_displaying.js","line":420,"description":"<p>Sets the fill value for displaying images. Images can be tinted to\nspecified colors or made transparent by including an alpha value.</p>\n<p>To apply transparency to an image without affecting its color, use\nwhite as the tint color and specify an alpha value. For instance,\ntint(255, 128) will make an image 50% transparent (assuming the default\nalpha range of 0-255, which can be changed with <a href=\"#/p5/colorMode\">colorMode()</a>).</p>\n<p>The value for the gray parameter must be less than or equal to the current\nmaximum value as specified by <a href=\"#/p5/colorMode\">colorMode()</a>. The default maximum value is\n255.</p>\n","itemtype":"method","name":"tint","example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  tint(0, 153, 204); // Tint blue\n  image(img, 50, 0);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  tint(0, 153, 204, 126); // Tint blue and set transparency\n  image(img, 50, 0);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  tint(255, 126); // Apply transparency without changing color\n  image(img, 50, 0);\n}\n</code>\n</div>"],"alt":"2 side by side images of umbrella and ceiling, one image with blue tint\nImages of umbrella and ceiling, one half of image with blue tint\n2 side by side images of umbrella and ceiling, one image translucent","class":"p5","module":"Image","submodule":"Loading & Displaying","overloads":[{"line":420,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}]},{"line":491,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}]},{"line":496,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}]},{"line":502,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}]},{"line":508,"params":[{"name":"color","description":"<p>the tint color</p>\n","type":"p5.Color"}]}]},{"file":"src/image/loading_displaying.js","line":518,"description":"<p>Removes the current fill value for displaying images and reverts to\ndisplaying images with their original hues.</p>\n","itemtype":"method","name":"noTint","example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  tint(0, 153, 204); // Tint blue\n  image(img, 0, 0);\n  noTint(); // Disable tint\n  image(img, 50, 0);\n}\n</code>\n</div>"],"alt":"2 side by side images of bricks, left image with blue tint","class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/loading_displaying.js","line":582,"description":"<p>Set image mode. Modifies the location from which images are drawn by\nchanging the way in which parameters given to <a href=\"#/p5/image\">image()</a> are interpreted.\nThe default mode is imageMode(CORNER), which interprets the second and\nthird parameters of <a href=\"#/p5/image\">image()</a> as the upper-left corner of the image. If\ntwo additional parameters are specified, they are used to set the image's\nwidth and height.</p>\n<p>imageMode(CORNERS) interprets the second and third parameters of <a href=\"#/p5/image\">image()</a>\nas the location of one corner, and the fourth and fifth parameters as the\nopposite corner.</p>\n<p>imageMode(CENTER) interprets the second and third parameters of <a href=\"#/p5/image\">image()</a>\nas the image's center point. If two additional parameters are specified,\nthey are used to set the image's width and height.</p>\n","itemtype":"method","name":"imageMode","params":[{"name":"mode","description":"<p>either CORNER, CORNERS, or CENTER</p>\n","type":"Constant"}],"example":["\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  imageMode(CORNER);\n  image(img, 10, 10, 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  imageMode(CORNERS);\n  image(img, 10, 10, 90, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  imageMode(CENTER);\n  image(img, 50, 50, 80, 80);\n}\n</code>\n</div>"],"alt":"small square image of bricks\nhorizontal rectangle image of bricks\nlarge square image of bricks","class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/p5.Image.js","line":9,"description":"<p>This module defines the <a href=\"#/p5.Image\">p5.Image</a> class and P5 methods for\ndrawing images to the main display canvas.</p>\n","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":88,"description":"<p>Image width.</p>\n","itemtype":"property","name":"width","type":"Number","readonly":"","example":["\n<div><code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100);\n  image(img, 0, 0);\n  for (let i = 0; i < img.width; i++) {\n    let c = img.get(i, img.height / 2);\n    stroke(c);\n    line(i, height / 2, i, height);\n  }\n}\n</code></div>"],"alt":"rocky mountains in top and horizontal lines in corresponding colors in bottom.","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":115,"description":"<p>Image height.</p>\n","itemtype":"property","name":"height","type":"Number","readonly":"","example":["\n<div><code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100);\n  image(img, 0, 0);\n  for (let i = 0; i < img.height; i++) {\n    let c = img.get(img.width / 2, i);\n    stroke(c);\n    line(0, i, width / 2, i);\n  }\n}\n</code></div>"],"alt":"rocky mountains on right and vertical lines in corresponding colors on left.","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":152,"description":"<p>Array containing the values for all the pixels in the display window.\nThese values are numbers. This array is the size (include an appropriate\nfactor for pixelDensity) of the display window x4,\nrepresenting the R, G, B, A values in order for each pixel, moving from\nleft to right across each row, then down each column. Retina and other\nhigh density displays may have more pixels (by a factor of\npixelDensity^2).\nFor example, if the image is 100x100 pixels, there will be 40,000. With\npixelDensity = 2, there will be 160,000. The first four values\n(indices 0-3) in the array will be the R, G, B, A values of the pixel at\n(0, 0). The second four values (indices 4-7) will contain the R, G, B, A\nvalues of the pixel at (1, 0). More generally, to set values for a pixel\nat (x, y):</p>\n<pre><code class=\"language-javascript\">let d = pixelDensity();\nfor (let i = 0; i < d; i++) {\n  for (let j = 0; j < d; j++) {\n    // loop over\n    index = 4 * ((y * d + j) * width * d + (x * d + i));\n    pixels[index] = r;\n    pixels[index+1] = g;\n    pixels[index+2] = b;\n    pixels[index+3] = a;\n  }\n}</code></pre>\n<p>Before accessing this array, the data must loaded with the <a href=\"#/p5.Image/loadPixels\">loadPixels()</a>\nfunction. After the array data has been modified, the <a href=\"#/p5.Image/updatePixels\">updatePixels()</a>\nfunction must be run to update the changes.</p>\n","itemtype":"property","name":"pixels","type":"Number[]","example":["\n<div>\n<code>\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < img.width; i++) {\n  for (let j = 0; j < img.height; j++) {\n    img.set(i, j, color(0, 90, 102));\n  }\n}\nimg.updatePixels();\nimage(img, 17, 17);\n</code>\n</div>\n<div>\n<code>\nlet pink = color(255, 102, 204);\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < 4 * (width * height / 2); i += 4) {\n  img.pixels[i] = red(pink);\n  img.pixels[i + 1] = green(pink);\n  img.pixels[i + 2] = blue(pink);\n  img.pixels[i + 3] = alpha(pink);\n}\nimg.updatePixels();\nimage(img, 17, 17);\n</code>\n</div>"],"alt":"66x66 turquoise rect in center of canvas\n66x66 pink rect in center of canvas","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":222,"description":"<p>Helper function for animating GIF-based images with time</p>\n","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":248,"description":"<p>Helper fxn for sharing pixel methods</p>\n","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":256,"description":"<p>Loads the pixels data for this image into the [pixels] attribute.</p>\n","itemtype":"method","name":"loadPixels","example":["\n<div><code>\nlet myImage;\nlet halfImage;\n\nfunction preload() {\n  myImage = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  myImage.loadPixels();\n  halfImage = 4 * myImage.width * myImage.height / 2;\n  for (let i = 0; i < halfImage; i++) {\n    myImage.pixels[i + halfImage] = myImage.pixels[i];\n  }\n  myImage.updatePixels();\n}\n\nfunction draw() {\n  image(myImage, 0, 0, width, height);\n}\n</code></div>"],"alt":"2 images of rocky mountains vertically stacked","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":291,"description":"<p>Updates the backing canvas for this image with the contents of\nthe [pixels] array.</p>\n<p>If this image is an animated GIF then the pixels will be updated\nin the frame that is currently displayed.</p>\n","itemtype":"method","name":"updatePixels","example":["\n<div><code>\nlet myImage;\nlet halfImage;\n\nfunction preload() {\n  myImage = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  myImage.loadPixels();\n  halfImage = 4 * myImage.width * myImage.height / 2;\n  for (let i = 0; i < halfImage; i++) {\n    myImage.pixels[i + halfImage] = myImage.pixels[i];\n  }\n  myImage.updatePixels();\n}\n\nfunction draw() {\n  image(myImage, 0, 0, width, height);\n}\n</code></div>"],"alt":"2 images of rocky mountains vertically stacked","class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":291,"params":[{"name":"x","description":"<p>x-offset of the target update area for the\n                             underlying canvas</p>\n","type":"Integer"},{"name":"y","description":"<p>y-offset of the target update area for the\n                             underlying canvas</p>\n","type":"Integer"},{"name":"w","description":"<p>height of the target update area for the\n                             underlying canvas</p>\n","type":"Integer"},{"name":"h","description":"<p>height of the target update area for the\n                             underlying canvas</p>\n","type":"Integer"}]},{"line":333,"params":[]}]},{"file":"src/image/p5.Image.js","line":341,"description":"<p>Get a region of pixels from an image.</p>\n<p>If no params are passed, the whole image is returned.\nIf x and y are the only params passed a single pixel is extracted.\nIf all params are passed a rectangle region is extracted and a <a href=\"#/p5.Image\">p5.Image</a>\nis returned.</p>\n","itemtype":"method","name":"get","return":{"description":"the rectangle <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"},"example":["\n<div><code>\nlet myImage;\nlet c;\n\nfunction preload() {\n  myImage = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  background(myImage);\n  noStroke();\n  c = myImage.get(60, 90);\n  fill(c);\n  rect(25, 25, 50, 50);\n}\n\n//get() returns color here\n</code></div>"],"alt":"image of rocky mountains with 50x50 green rect in front","class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":341,"params":[{"name":"x","description":"<p>x-coordinate of the pixel</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the pixel</p>\n","type":"Number"},{"name":"w","description":"<p>width</p>\n","type":"Number"},{"name":"h","description":"<p>height</p>\n","type":"Number"}],"return":{"description":"the rectangle <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"}},{"line":378,"params":[],"return":{"description":"the whole <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"}},{"line":382,"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/image/p5.Image.js","line":395,"description":"<p>Set the color of a single pixel or write an image into\nthis <a href=\"#/p5.Image\">p5.Image</a>.</p>\n<p>Note that for a large number of pixels this will\nbe slower than directly manipulating the pixels array\nand then calling <a href=\"#/p5.Image/updatePixels\">updatePixels()</a>.</p>\n","itemtype":"method","name":"set","params":[{"name":"x","description":"<p>x-coordinate of the pixel</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the pixel</p>\n","type":"Number"},{"name":"a","description":"<p>grayscale value | pixel array |\n                               a <a href=\"#/p5.Color\">p5.Color</a> | image to copy</p>\n","type":"Number|Number[]|Object"}],"example":["\n<div>\n<code>\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < img.width; i++) {\n  for (let j = 0; j < img.height; j++) {\n    img.set(i, j, color(0, 90, 102, (i % img.width) * 2));\n  }\n}\nimg.updatePixels();\nimage(img, 17, 17);\nimage(img, 34, 34);\n</code>\n</div>"],"alt":"2 gradated dark turquoise rects fade left. 1 center 1 bottom right of canvas","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":432,"description":"<p>Resize the image to a new width and height. To make the image scale\nproportionally, use 0 as the value for the wide or high parameter.\nFor instance, to make the width of an image 150 pixels, and change\nthe height using the same proportion, use resize(150, 0).</p>\n","itemtype":"method","name":"resize","params":[{"name":"width","description":"<p>the resized image width</p>\n","type":"Number"},{"name":"height","description":"<p>the resized image height</p>\n","type":"Number"}],"example":["\n<div><code>\nlet img;\n\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction draw() {\n  image(img, 0, 0);\n}\n\nfunction mousePressed() {\n  img.resize(50, 100);\n}\n</code></div>"],"alt":"image of rocky mountains. zoomed in","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":543,"description":"<p>Copies a region of pixels from one image to another. If no\nsrcImage is specified this is used as the source. If the source\nand destination regions aren't the same size, it will\nautomatically resize source pixels to fit the specified\ntarget region.</p>\n","itemtype":"method","name":"copy","example":["\n<div><code>\nlet photo;\nlet bricks;\nlet x;\nlet y;\n\nfunction preload() {\n  photo = loadImage('assets/rockies.jpg');\n  bricks = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n  x = bricks.width / 2;\n  y = bricks.height / 2;\n  photo.copy(bricks, 0, 0, x, y, 0, 0, x, y);\n  image(photo, 0, 0);\n}\n</code></div>"],"alt":"image of rocky mountains and smaller image on top of bricks at top left","class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":543,"params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image|p5.Element"},{"name":"sx","description":"<p>X coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sy","description":"<p>Y coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sw","description":"<p>source image width</p>\n","type":"Integer"},{"name":"sh","description":"<p>source image height</p>\n","type":"Integer"},{"name":"dx","description":"<p>X coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dy","description":"<p>Y coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dw","description":"<p>destination image width</p>\n","type":"Integer"},{"name":"dh","description":"<p>destination image height</p>\n","type":"Integer"}]},{"line":583,"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":598,"description":"<p>Masks part of an image from displaying by loading another\nimage and using its alpha channel as an alpha channel for\nthis image.</p>\n","itemtype":"method","name":"mask","params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image"}],"example":["\n<div><code>\nlet photo, maskImage;\nfunction preload() {\n  photo = loadImage('assets/rockies.jpg');\n  maskImage = loadImage('assets/mask2.png');\n}\n\nfunction setup() {\n  createCanvas(100, 100);\n  photo.mask(maskImage);\n  image(photo, 0, 0);\n}\n</code></div>"],"alt":"image of rocky mountains with white at right\n\nhttp://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":659,"description":"<p>Applies an image filter to a <a href=\"#/p5.Image\">p5.Image</a></p>\n","itemtype":"method","name":"filter","params":[{"name":"filterType","description":"<p>either THRESHOLD, GRAY, OPAQUE, INVERT,\n                               POSTERIZE, BLUR, ERODE, DILATE or BLUR.\n                               See Filters.js for docs on\n                               each available filter</p>\n","type":"Constant"},{"name":"filterParam","description":"<p>an optional parameter unique\n                               to each filter, see above</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\nlet photo1;\nlet photo2;\n\nfunction preload() {\n  photo1 = loadImage('assets/rockies.jpg');\n  photo2 = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  photo2.filter(GRAY);\n  image(photo1, 0, 0);\n  image(photo2, width / 2, 0);\n}\n</code></div>"],"alt":"2 images of rocky mountains left one in color, right in black and white","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":694,"description":"<p>Copies a region of pixels from one image to another, using a specified\nblend mode to do the operation.</p>\n","itemtype":"method","name":"blend","example":["\n<div><code>\nlet mountains;\nlet bricks;\n\nfunction preload() {\n  mountains = loadImage('assets/rockies.jpg');\n  bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n  image(mountains, 0, 0);\n  image(bricks, 0, 0);\n}\n</code></div>\n<div><code>\nlet mountains;\nlet bricks;\n\nfunction preload() {\n  mountains = loadImage('assets/rockies.jpg');\n  bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n  image(mountains, 0, 0);\n  image(bricks, 0, 0);\n}\n</code></div>\n<div><code>\nlet mountains;\nlet bricks;\n\nfunction preload() {\n  mountains = loadImage('assets/rockies.jpg');\n  bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n  image(mountains, 0, 0);\n  image(bricks, 0, 0);\n}\n</code></div>"],"alt":"image of rocky mountains. Brick images on left and right. Right overexposed\nimage of rockies. Brickwall images on left and right. Right mortar transparent\nimage of rockies. Brickwall images on left and right. Right translucent","class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":694,"params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image"},{"name":"sx","description":"<p>X coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sy","description":"<p>Y coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sw","description":"<p>source image width</p>\n","type":"Integer"},{"name":"sh","description":"<p>source image height</p>\n","type":"Integer"},{"name":"dx","description":"<p>X coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dy","description":"<p>Y coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dw","description":"<p>destination image width</p>\n","type":"Integer"},{"name":"dh","description":"<p>destination image height</p>\n","type":"Integer"},{"name":"blendMode","description":"<p>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.</p>\n<p>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</p>\n<p><a href=\"http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/\">http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/</a></p>\n","type":"Constant"}]},{"line":771,"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":815,"description":"<p>Saves the image to a file and force the browser to download it.\nAccepts two strings for filename and file extension\nSupports png (default), jpg, and gif\n<br><br>\nNote that the file will only be downloaded as an animated GIF\nif the p5.Image was loaded from a GIF file.</p>\n","itemtype":"method","name":"save","params":[{"name":"filename","description":"<p>give your file a name</p>\n","type":"String"},{"name":"extension","description":"<p>'png' or 'jpg'</p>\n","type":"String"}],"example":["\n<div><code>\nlet photo;\n\nfunction preload() {\n  photo = loadImage('assets/rockies.jpg');\n}\n\nfunction draw() {\n  image(photo, 0, 0);\n}\n\nfunction keyTyped() {\n  if (key === 's') {\n    photo.save('photo', 'png');\n  }\n}\n</code></div>"],"alt":"image of rocky mountains.","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":856,"description":"<p>Starts an animated GIF over at the beginning state.</p>\n","itemtype":"method","name":"reset","example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/arnott-wallace-wink-loop-once.gif');\n}\n\nfunction draw() {\n  background(255);\n  // The GIF file that we loaded only loops once\n  // so it freezes on the last frame after playing through\n  image(gif, 0, 0);\n}\n\nfunction mousePressed() {\n  // Click to reset the GIF and begin playback from start\n  gif.reset();\n}\n</code></div>"],"alt":"Animated image of a cartoon face that winks once and then freezes\nWhen you click it animates again, winks once and freezes","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":896,"description":"<p>Gets the index for the frame that is currently visible in an animated GIF.</p>\n","itemtype":"method","name":"getCurrentFrame","return":{"description":"The index for the currently displaying frame in animated GIF","type":"Number"},"example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\nfunction draw() {\n  let frame = gif.getCurrentFrame();\n  image(gif, 0, 0);\n  text(frame, 10, 90);\n}\n</code></div>"],"alt":"Animated image of a cartoon eye looking around and then\nlooking outwards, in the lower-left hand corner a number counts\nup quickly to 124 and then starts back over at 0","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":927,"description":"<p>Sets the index of the frame that is currently visible in an animated GIF</p>\n","itemtype":"method","name":"setFrame","params":[{"name":"index","description":"<p>the index for the frame that should be displayed</p>\n","type":"Number"}],"example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\n// Move your mouse up and down over canvas to see the GIF\n// frames animate\nfunction draw() {\n  gif.pause();\n  image(gif, 0, 0);\n  // Get the highest frame number which is the number of frames - 1\n  let maxFrame = gif.numFrames() - 1;\n  // Set the current frame that is mapped to be relative to mouse position\n  let frameNumber = floor(map(mouseY, 0, height, 0, maxFrame, true));\n  gif.setFrame(frameNumber);\n}\n</code></div>"],"alt":"A still image of a cartoon eye that looks around when you move your mouse\nup and down over the canvas","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":971,"description":"<p>Returns the number of frames in an animated GIF</p>\n","itemtype":"method","name":"numFrames","return":{"description":"","type":"Number"},"example":["     The number of frames in the animated GIF\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\n// Move your mouse up and down over canvas to see the GIF\n// frames animate\nfunction draw() {\n  gif.pause();\n  image(gif, 0, 0);\n  // Get the highest frame number which is the number of frames - 1\n  let maxFrame = gif.numFrames() - 1;\n  // Set the current frame that is mapped to be relative to mouse position\n  let frameNumber = floor(map(mouseY, 0, height, 0, maxFrame, true));\n  gif.setFrame(frameNumber);\n}\n</code></div>"],"alt":"A still image of a cartoon eye that looks around when you move your mouse\nup and down over the canvas","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1006,"description":"<p>Plays an animated GIF that was paused with\n<a href=\"#/p5.Image/pause\">pause()</a></p>\n","itemtype":"method","name":"play","example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');\n}\n\nfunction draw() {\n  background(255);\n  image(gif, 0, 0);\n}\n\nfunction mousePressed() {\n  gif.pause();\n}\n\nfunction mouseReleased() {\n  gif.play();\n}\n</code></div>"],"alt":"An animated GIF of a drawing of small child with\nhair blowing in the wind, when you click the image\nfreezes when you release it animates again","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1043,"description":"<p>Pauses an animated GIF.</p>\n","itemtype":"method","name":"pause","example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');\n}\n\nfunction draw() {\n  background(255);\n  image(gif, 0, 0);\n}\n\nfunction mousePressed() {\n  gif.pause();\n}\n\nfunction mouseReleased() {\n  gif.play();\n}\n</code></div>"],"alt":"An animated GIF of a drawing of small child with\nhair blowing in the wind, when you click the image\nfreezes when you release it animates again","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1079,"description":"<p>Changes the delay between frames in an animated GIF. There is an optional second parameter that\nindicates an index for a specific frame that should have its delay modified. If no index is given, all frames\nwill have the new delay.</p>\n","itemtype":"method","name":"delay","params":[{"name":"d","description":"<p>the amount in milliseconds to delay between switching frames</p>\n","type":"Number"},{"name":"index","description":"<p>the index of the frame that should have the new delay value {optional}</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\nlet gifFast, gifSlow;\n\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  gifFast.resize(width / 2, height / 2);\n  gifSlow.resize(width / 2, height / 2);\n\n  //Change the delay here\n  gifFast.delay(10);\n  gifSlow.delay(100);\n}\n\nfunction draw() {\n  background(255);\n  image(gifFast, 0, 0);\n  image(gifSlow, width / 2, 0);\n}\n</code></div>"],"alt":"Two animated gifs of cartoon eyes looking around\nThe gif on the left animates quickly, on the right\nthe animation is much slower","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/pixels.js","line":12,"description":"<p><a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference\n/Global_Objects/Uint8ClampedArray' target='_blank'>Uint8ClampedArray</a>\ncontaining the values for all the pixels in the display window.\nThese values are numbers. This array is the size (include an appropriate\nfactor for <a href=\"#/p5/pixelDensity\">pixelDensity</a>) of the display window x4,\nrepresenting the R, G, B, A values in order for each pixel, moving from\nleft to right across each row, then down each column. Retina and other\nhigh density displays will have more pixels[] (by a factor of\npixelDensity^2).\nFor example, if the image is 100x100 pixels, there will be 40,000. On a\nretina display, there will be 160,000.</p>\n<p>The first four values (indices 0-3) in the array will be the R, G, B, A\nvalues of the pixel at (0, 0). The second four values (indices 4-7) will\ncontain the R, G, B, A values of the pixel at (1, 0). More generally, to\nset values for a pixel at (x, y):</p>\n<pre><code class=\"language-javascript\">let d = pixelDensity();\nfor (let i = 0; i < d; i++) {\n  for (let j = 0; j < d; j++) {\n    // loop over\n    index = 4 * ((y * d + j) * width * d + (x * d + i));\n    pixels[index] = r;\n    pixels[index+1] = g;\n    pixels[index+2] = b;\n    pixels[index+3] = a;\n  }\n}</code></pre>\n<p>While the above method is complex, it is flexible enough to work with\nany pixelDensity. Note that <a href=\"#/p5/set\">set()</a> will automatically take care of\nsetting all the appropriate values in <a href=\"#/p5/pixels\">pixels[]</a> for a given (x, y) at\nany pixelDensity, but the performance may not be as fast when lots of\nmodifications are made to the pixel array.</p>\n<p>Before accessing this array, the data must loaded with the <a href=\"#/p5/loadPixels\">loadPixels()</a>\nfunction. After the array data has been modified, the <a href=\"#/p5/updatePixels\">updatePixels()</a>\nfunction must be run to update the changes.</p>\n<p>Note that this is not a standard javascript array.  This means that\nstandard javascript functions such as <a href=\"#/p5/slice\">slice()</a> or\n<a href=\"#/p5/arrayCopy\">arrayCopy()</a> do not\nwork.</p>\n","itemtype":"property","name":"pixels","type":"Number[]","example":["\n<div>\n<code>\nlet pink = color(255, 102, 204);\nloadPixels();\nlet d = pixelDensity();\nlet halfImage = 4 * (width * d) * (height / 2 * d);\nfor (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}\nupdatePixels();\n</code>\n</div>"],"alt":"top half of canvas pink, bottom grey","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":80,"description":"<p>Copies a region of pixels from one image to another, using a specified\nblend mode to do the operation.</p>\n","itemtype":"method","name":"blend","example":["\n<div><code>\nlet img0;\nlet img1;\n\nfunction preload() {\n  img0 = loadImage('assets/rockies.jpg');\n  img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  background(img0);\n  image(img1, 0, 0);\n  blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n}\n</code></div>\n<div><code>\nlet img0;\nlet img1;\n\nfunction preload() {\n  img0 = loadImage('assets/rockies.jpg');\n  img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  background(img0);\n  image(img1, 0, 0);\n  blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n}\n</code></div>\n<div><code>\nlet img0;\nlet img1;\n\nfunction preload() {\n  img0 = loadImage('assets/rockies.jpg');\n  img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  background(img0);\n  image(img1, 0, 0);\n  blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n}\n</code></div>"],"alt":"image of rocky mountains. Brick images on left and right. Right overexposed\nimage of rockies. Brickwall images on left and right. Right mortar transparent\nimage of rockies. Brickwall images on left and right. Right translucent","class":"p5","module":"Image","submodule":"Pixels","overloads":[{"line":80,"params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image"},{"name":"sx","description":"<p>X coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sy","description":"<p>Y coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sw","description":"<p>source image width</p>\n","type":"Integer"},{"name":"sh","description":"<p>source image height</p>\n","type":"Integer"},{"name":"dx","description":"<p>X coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dy","description":"<p>Y coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dw","description":"<p>destination image width</p>\n","type":"Integer"},{"name":"dh","description":"<p>destination image height</p>\n","type":"Integer"},{"name":"blendMode","description":"<p>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.</p>\n","type":"Constant"}]},{"line":152,"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":173,"description":"<p>Copies a region of the canvas to another region of the canvas\nand copies a region of pixels from an image used as the srcImg parameter\ninto the canvas srcImage is specified this is used as the source. If\nthe source and destination regions aren't the same size, it will\nautomatically resize source pixels to fit the specified\ntarget region.</p>\n","itemtype":"method","name":"copy","example":["\n<div><code>\nlet img;\n\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  background(img);\n  copy(img, 7, 22, 10, 10, 35, 25, 50, 50);\n  stroke(255);\n  noFill();\n  // Rectangle shows area being copied\n  rect(7, 22, 10, 10);\n}\n</code></div>"],"alt":"image of rocky mountains. Brick images on left and right. Right overexposed\nimage of rockies. Brickwall images on left and right. Right mortar transparent\nimage of rockies. Brickwall images on left and right. Right translucent","class":"p5","module":"Image","submodule":"Pixels","overloads":[{"line":173,"params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image|p5.Element"},{"name":"sx","description":"<p>X coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sy","description":"<p>Y coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sw","description":"<p>source image width</p>\n","type":"Integer"},{"name":"sh","description":"<p>source image height</p>\n","type":"Integer"},{"name":"dx","description":"<p>X coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dy","description":"<p>Y coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dw","description":"<p>destination image width</p>\n","type":"Integer"},{"name":"dh","description":"<p>destination image height</p>\n","type":"Integer"}]},{"line":215,"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":307,"description":"<p>Applies a filter to the canvas. The presets options are:</p>\n<p>THRESHOLD\nConverts the image to black and white pixels depending if they are above or\nbelow the threshold defined by the level parameter. The parameter must be\nbetween 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.</p>\n<p>GRAY\nConverts any colors in the image to grayscale equivalents. No parameter\nis used.</p>\n<p>OPAQUE\nSets the alpha channel to entirely opaque. No parameter is used.</p>\n<p>INVERT\nSets each pixel to its inverse value. No parameter is used.</p>\n<p>POSTERIZE\nLimits each channel of the image to the number of colors specified as the\nparameter. The parameter can be set to values between 2 and 255, but\nresults are most noticeable in the lower ranges.</p>\n<p>BLUR\nExecutes a Gaussian blur with the level parameter specifying the extent\nof the blurring. If no parameter is used, the blur is equivalent to\nGaussian blur of radius 1. Larger values increase the blur.</p>\n<p>ERODE\nReduces the light areas. No parameter is used.</p>\n<p>DILATE\nIncreases the light areas. No parameter is used.</p>\n<p>filter() does not work in WEBGL mode.\nA similar effect can be achieved in WEBGL mode using custom\nshaders. Adam Ferriss has written\na <a href=\"https://github.com/aferriss/p5jsShaderExamples\"\ntarget='_blank'>selection of shader examples</a> that contains many\nof the effects present in the filter examples.</p>\n","itemtype":"method","name":"filter","params":[{"name":"filterType","description":"<p>either THRESHOLD, GRAY, OPAQUE, INVERT,\n                               POSTERIZE, BLUR, ERODE, DILATE or BLUR.\n                               See Filters.js for docs on\n                               each available filter</p>\n","type":"Constant"},{"name":"filterParam","description":"<p>an optional parameter unique\n                               to each filter, see above</p>\n","type":"Number","optional":true}],"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(THRESHOLD);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(GRAY);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(OPAQUE);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(INVERT);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(POSTERIZE, 3);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(DILATE);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(BLUR, 3);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(ERODE);\n}\n</code>\n</div>"],"alt":"black and white image of a brick wall.\ngreyscale image of a brickwall\nimage of a brickwall\njade colored image of a brickwall\nred and pink image of a brickwall\nimage of a brickwall\nblurry image of a brickwall\nimage of a brickwall\nimage of a brickwall with less detail","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":481,"description":"<p>Get a region of pixels, or a single pixel, from the canvas.</p>\n<p>Returns an array of [R,G,B,A] values for any pixel or grabs a section of\nan image. If no parameters are specified, the entire image is returned.\nUse the x and y parameters to get the value of one pixel. Get a section of\nthe display window by specifying additional w and h parameters. When\ngetting an image, the x and y parameters define the coordinates for the\nupper-left corner of the image, regardless of the current <a href=\"#/p5/imageMode\">imageMode()</a>.</p>\n<p>Getting the color of a single pixel with get(x, y) is easy, but not as fast\nas grabbing the data directly from <a href=\"#/p5/pixels\">pixels[]</a>. The equivalent statement to\nget(x, y) using <a href=\"#/p5/pixels\">pixels[]</a> with pixel density d is</p>\n<pre><code class=\"language-javascript\">let x, y, d; // set these to the coordinates\nlet off = (y * width + x) * d * 4;\nlet components = [\n  pixels[off],\n  pixels[off + 1],\n  pixels[off + 2],\n  pixels[off + 3]\n];\nprint(components);</code></pre>\n<p>See the reference for <a href=\"#/p5/pixels\">pixels[]</a> for more information.</p>\n<p>If you want to extract an array of colors or a subimage from an p5.Image object,\ntake a look at <a href=\"#/p5.Image/get\">p5.Image.get()</a></p>\n","itemtype":"method","name":"get","return":{"description":"the rectangle <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"},"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  let c = get();\n  image(c, width / 2, 0);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  let c = get(50, 90);\n  fill(c);\n  noStroke();\n  rect(25, 25, 50, 50);\n}\n</code>\n</div>"],"alt":"2 images of the rocky mountains, side-by-side\nImage of the rocky mountains with 50x50 green rect in center of canvas","class":"p5","module":"Image","submodule":"Pixels","overloads":[{"line":481,"params":[{"name":"x","description":"<p>x-coordinate of the pixel</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the pixel</p>\n","type":"Number"},{"name":"w","description":"<p>width</p>\n","type":"Number"},{"name":"h","description":"<p>height</p>\n","type":"Number"}],"return":{"description":"the rectangle <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"}},{"line":551,"params":[],"return":{"description":"the whole <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"}},{"line":555,"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/image/pixels.js","line":566,"description":"<p>Loads the pixel data for the display window into the <a href=\"#/p5/pixels\">pixels[]</a> array. This\nfunction must always be called before reading from or writing to <a href=\"#/p5/pixels\">pixels[]</a>.\nNote that only changes made with <a href=\"#/p5/set\">set()</a> or direct manipulation of <a href=\"#/p5/pixels\">pixels[]</a>\nwill occur.</p>\n","itemtype":"method","name":"loadPixels","example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  image(img, 0, 0, width, height);\n  let d = pixelDensity();\n  let halfImage = 4 * (width * d) * (height * d / 2);\n  loadPixels();\n  for (let i = 0; i < halfImage; i++) {\n    pixels[i + halfImage] = pixels[i];\n  }\n  updatePixels();\n}\n</code>\n</div>"],"alt":"two images of the rocky mountains. one on top, one on bottom of canvas.","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":602,"description":"<p>Changes the color of any pixel, or writes an image directly to the\ndisplay window.\nThe x and y parameters specify the pixel to change and the c parameter\nspecifies the color value. This can be a <a href=\"#/p5.Color\">p5.Color</a> object, or [R, G, B, A]\npixel array. It can also be a single grayscale value.\nWhen setting an image, the x and y parameters define the coordinates for\nthe upper-left corner of the image, regardless of the current <a href=\"#/p5/imageMode\">imageMode()</a>.</p>\n<p>After using <a href=\"#/p5/set\">set()</a>, you must call <a href=\"#/p5/updatePixels\">updatePixels()</a> for your changes to appear.\nThis should be called once all pixels have been set, and must be called before\ncalling .<a href=\"#/p5/get\">get()</a> or drawing the image.</p>\n<p>Setting the color of a single pixel with set(x, y) is easy, but not as\nfast as putting the data directly into <a href=\"#/p5/pixels\">pixels[]</a>. Setting the <a href=\"#/p5/pixels\">pixels[]</a>\nvalues directly may be complicated when working with a retina display,\nbut will perform better when lots of pixels need to be set directly on\nevery loop. See the reference for <a href=\"#/p5/pixels\">pixels[]</a> for more information.</p>\n","itemtype":"method","name":"set","params":[{"name":"x","description":"<p>x-coordinate of the pixel</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the pixel</p>\n","type":"Number"},{"name":"c","description":"<p>insert a grayscale value | a pixel array |\n                               a <a href=\"#/p5.Color\">p5.Color</a> object | a <a href=\"#/p5.Image\">p5.Image</a> to copy</p>\n","type":"Number|Number[]|Object"}],"example":["\n<div>\n<code>\nlet black = color(0);\nset(30, 20, black);\nset(85, 20, black);\nset(85, 75, black);\nset(30, 75, black);\nupdatePixels();\n</code>\n</div>\n\n<div>\n<code>\nfor (let i = 30; i < width - 15; i++) {\n  for (let j = 20; j < height - 25; j++) {\n    let c = color(204 - j, 153 - i, 0);\n    set(i, j, c);\n  }\n}\nupdatePixels();\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  set(0, 0, img);\n  updatePixels();\n  line(0, 0, width, height);\n  line(0, height, width, 0);\n}\n</code>\n</div>"],"alt":"4 black points in the shape of a square middle-right of canvas.\nsquare with orangey-brown gradient lightening at bottom right.\nimage of the rocky mountains. with lines like an 'x' through the center.","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":674,"description":"<p>Updates the display window with the data in the <a href=\"#/p5/pixels\">pixels[]</a> array.\nUse in conjunction with <a href=\"#/p5/loadPixels\">loadPixels()</a>. If you're only reading pixels from\nthe array, there's no need to call <a href=\"#/p5/updatePixels\">updatePixels()</a> — updating is only\nnecessary to apply changes. <a href=\"#/p5/updatePixels\">updatePixels()</a> should be called anytime the\npixels array is manipulated or <a href=\"#/p5/set\">set()</a> is called, and only changes made with\n<a href=\"#/p5/set\">set()</a> or direct changes to <a href=\"#/p5/pixels\">pixels[]</a> will occur.</p>\n","itemtype":"method","name":"updatePixels","params":[{"name":"x","description":"<p>x-coordinate of the upper-left corner of region\n                        to update</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>y-coordinate of the upper-left corner of region\n                        to update</p>\n","type":"Number","optional":true},{"name":"w","description":"<p>width of region to update</p>\n","type":"Number","optional":true},{"name":"h","description":"<p>height of region to update</p>\n","type":"Number","optional":true}],"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  image(img, 0, 0, width, height);\n  let d = pixelDensity();\n  let halfImage = 4 * (width * d) * (height * d / 2);\n  loadPixels();\n  for (let i = 0; i < halfImage; i++) {\n    pixels[i + halfImage] = pixels[i];\n  }\n  updatePixels();\n}\n</code>\n</div>"],"alt":"two images of the rocky mountains. one on top, one on bottom of canvas.","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/io/files.js","line":20,"description":"<p>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.</p>\n<p>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 <a href=\"https://github.com/camsong/\nfetch-jsonp\">here</a>.</p>\n<p>This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadJSON","return":{"description":"JSON data","type":"Object|Array"},"example":["\n\nCalling <a href=\"#/p5/loadJSON\">loadJSON()</a> inside <a href=\"#/p5/preload\">preload()</a> guarantees to complete the\noperation before <a href=\"#/p5/setup\">setup()</a> and <a href=\"#/p5/draw\">draw()</a> are called.\n\n<div><code>\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}\n</code></div>\n\nOutside of preload(), you may supply a callback function to handle the\nobject:\n<div><code>\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}\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</code></div>"],"alt":"50x50 ellipse that changes from black to white depending on the current humidity\n50x50 ellipse that changes from black to white depending on the current humidity","class":"p5","module":"IO","submodule":"Input","overloads":[{"line":20,"params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"jsonpOptions","description":"<p>options object for jsonp related settings</p>\n","type":"Object","optional":true},{"name":"datatype","description":"<p>\"json\" or \"jsonp\"</p>\n","type":"String","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/loadJSON\">loadJSON()</a> completes, data is passed\n                                   in as first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                   there is an error, response is passed\n                                   in as first argument</p>\n","type":"Function","optional":true}],"return":{"description":"JSON data","type":"Object|Array"}},{"line":104,"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":112,"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":183,"description":"<p>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.</p>\n<p>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.</p>\n<p>This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed.</p>\n<p>This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadStrings","params":[{"name":"filename","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"callback","description":"<p>function to be executed after <a href=\"#/p5/loadStrings\">loadStrings()</a>\n                              completes, Array is passed in as first\n                              argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                              there is an error, response is passed\n                              in as first argument</p>\n","type":"Function","optional":true}],"return":{"description":"Array of Strings","type":"String[]"},"example":["\n\nCalling loadStrings() inside <a href=\"#/p5/preload\">preload()</a> guarantees to complete the\noperation before <a href=\"#/p5/setup\">setup()</a> and <a href=\"#/p5/draw\">draw()</a> are called.\n\n<div><code>\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}\n</code></div>\n\nOutside of preload(), you may supply a callback function to handle the\nobject:\n\n<div><code>\nfunction setup() {\n  loadStrings('assets/test.txt', pickString);\n}\n\nfunction pickString(result) {\n  background(200);\n  text(random(result), 10, 10, 80, 80);\n}\n</code></div>"],"alt":"randomly generated text from a file, for example \"i smell like butter\"\nrandomly generated text from a file, for example \"i have three feet\"","class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":293,"description":"<p>Reads the contents of a file or URL and creates a <a href=\"#/p5.Table\">p5.Table</a> 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.</p>\n<p>This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. Calling <a href=\"#/p5/loadTable\">loadTable()</a> inside <a href=\"#/p5/preload\">preload()</a>\nguarantees to complete the operation before <a href=\"#/p5/setup\">setup()</a> and <a href=\"#/p5/draw\">draw()</a> are called.\nOutside of <a href=\"#/p5/preload\">preload()</a>, you may supply a callback function to handle the\nobject:</p>\n<p>All files loaded and saved use UTF-8 encoding. This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadTable","params":[{"name":"filename","description":"<p>name of the file or URL to load</p>\n","type":"String"},{"name":"extension","description":"<p>parse the table by comma-separated values \"csv\", semicolon-separated\n                                     values \"ssv\", or tab-separated values \"tsv\"</p>\n","type":"String","optional":true},{"name":"header","description":"<p>\"header\" to indicate table has header row</p>\n","type":"String","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                     <a href=\"#/p5/loadTable\">loadTable()</a> completes. On success, the\n                                     <a href=\"#/p5.Table\">Table</a> object is passed in as the\n                                     first argument.</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                     there is an error, response is passed\n                                     in as first argument</p>\n","type":"Function","optional":true}],"return":{"description":"<a href=\"#/p5.Table\">Table</a> object containing data","type":"Object"},"example":["\n<div class='norender'>\n<code>\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}\n</code>\n</div>"],"alt":"randomly generated text from a file, for example \"i smell like butter\"\nrandomly generated text from a file, for example \"i have three feet\"","class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":575,"description":"<p>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.</p>\n<p>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.</p>\n<p>This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. Calling <a href=\"#/p5/loadXML\">loadXML()</a> inside <a href=\"#/p5/preload\">preload()</a>\nguarantees to complete the operation before <a href=\"#/p5/setup\">setup()</a> and <a href=\"#/p5/draw\">draw()</a> are called.</p>\n<p>Outside of <a href=\"#/p5/preload\">preload()</a>, you may supply a callback function to handle the\nobject.</p>\n<p>This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadXML","params":[{"name":"filename","description":"<p>name of the file or URL to load</p>\n","type":"String"},{"name":"callback","description":"<p>function to be executed after <a href=\"#/p5/loadXML\">loadXML()</a>\n                              completes, XML object is passed in as\n                              first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                              there is an error, response is passed\n                              in as first argument</p>\n","type":"Function","optional":true}],"return":{"description":"XML object containing data","type":"Object"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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\n// Sketch prints:\n// 0, Capra hircus, Goat\n// 1, Panthera pardus, Leopard\n// 2, Equus zebra, Zebra\n</code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":685,"description":"<p>This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadBytes","params":[{"name":"file","description":"<p>name of the file or URL to load</p>\n","type":"String"},{"name":"callback","description":"<p>function to be executed after <a href=\"#/p5/loadBytes\">loadBytes()</a>\n                                   completes</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if there\n                                   is an error</p>\n","type":"Function","optional":true}],"return":{"description":"an object whose 'bytes' property will be the loaded buffer","type":"Object"},"example":["\n<div class='norender'><code>\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}\n</code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":744,"description":"<p>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 <code>httpDo(path, 'GET')</code>. 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).</p>\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<div class='norender'><code>\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</code></div>"],"class":"p5","module":"IO","submodule":"Input","overloads":[{"line":744,"params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"datatype","description":"<p>\"json\", \"jsonp\", \"binary\", \"arrayBuffer\",\n                                   \"xml\", or \"text\"</p>\n","type":"String","optional":true},{"name":"data","description":"<p>param data passed sent with request</p>\n","type":"Object|Boolean","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/httpGet\">httpGet()</a> completes, data is passed in\n                                   as first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                   there is an error, response is passed\n                                   in as first argument</p>\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":798,"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":806,"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":821,"description":"<p>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 <code>httpDo(path, 'POST')</code>.</p>\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<div>\n<code>\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 way cool.' };\n\nfunction setup() {\n  createCanvas(800, 800);\n}\n\nfunction mousePressed() {\n  // Pick new random color values\n  let r = random(255);\n  let g = random(255);\n  let b = random(255);\n\n  httpPost(url, 'json', postData, function(result) {\n    strokeWeight(2);\n    stroke(r, g, b);\n    fill(r, g, b, 127);\n    ellipse(mouseX, mouseY, 200, 200);\n    text(result.body, mouseX, mouseY);\n  });\n}\n</code>\n</div>\n\n<div><code>\nlet url = 'ttps://invalidURL'; // A bad URL that will cause errors\nlet postData = { title: 'p5 Clicked!', body: 'p5.js is way cool.' };\n\nfunction setup() {\n  createCanvas(800, 800);\n}\n\nfunction mousePressed() {\n  // Pick new random color values\n  let r = random(255);\n  let g = random(255);\n  let b = random(255);\n\n  httpPost(\n    url,\n    'json',\n    postData,\n    function(result) {\n      // ... won't be called\n    },\n    function(error) {\n      strokeWeight(2);\n      stroke(r, g, b);\n      fill(r, g, b, 127);\n      text(error.toString(), mouseX, mouseY);\n    }\n  );\n}\n</code></div>"],"class":"p5","module":"IO","submodule":"Input","overloads":[{"line":821,"params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"datatype","description":"<p>\"json\", \"jsonp\", \"xml\", or \"text\".\n                                   If omitted, <a href=\"#/p5/httpPost\">httpPost()</a> will guess.</p>\n","type":"String","optional":true},{"name":"data","description":"<p>param data passed sent with request</p>\n","type":"Object|Boolean","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/httpPost\">httpPost()</a> completes, data is passed in\n                                   as first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                   there is an error, response is passed\n                                   in as first argument</p>\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":901,"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":909,"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":924,"description":"<p>Method for executing an HTTP request. If data type is not specified,\np5 will try to guess based on the URL, defaulting to text.<br><br>\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.</p>\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<div>\n<code>\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</code>\n</div>"],"class":"p5","module":"IO","submodule":"Input","overloads":[{"line":924,"params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"method","description":"<p>either \"GET\", \"POST\", or \"PUT\",\n                                   defaults to \"GET\"</p>\n","type":"String","optional":true},{"name":"datatype","description":"<p>\"json\", \"jsonp\", \"xml\", or \"text\"</p>\n","type":"String","optional":true},{"name":"data","description":"<p>param data passed sent with request</p>\n","type":"Object","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/httpGet\">httpGet()</a> completes, data is passed in\n                                   as first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                   there is an error, response is passed\n                                   in as first argument</p>\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":995,"params":[{"name":"path","description":"","type":"String"},{"name":"options","description":"<p>Request object options as documented in the\n                                   \"fetch\" API\n<a href=\"https://developer.mozilla.org/en/docs/Web/API/Fetch_API\">reference</a></p>\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":1160,"itemtype":"method","name":"createWriter","params":[{"name":"name","description":"<p>name of the file to be created</p>\n","type":"String"},{"name":"extension","description":"","type":"String","optional":true}],"return":{"description":"","type":"p5.PrintWriter"},"example":["\n<div>\n<code>\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</code>\n</div>"],"class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1215,"description":"<p>Writes data to the PrintWriter stream</p>\n","itemtype":"method","name":"write","params":[{"name":"data","description":"<p>all data to be written by the PrintWriter</p>\n","type":"Array"}],"example":["\n<div class=\"norender notest\">\n<code>\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</code>\n</div>\n<div class='norender notest'>\n<code>\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</code>\n</div>\n<div class='norender notest'>\n<code>\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</code>\n</div>\n<div>\n<code>\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</code>\n</div>"],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1274,"description":"<p>Writes data to the PrintWriter stream, and adds a new line at the end</p>\n","itemtype":"method","name":"print","params":[{"name":"data","description":"<p>all data to be printed by the PrintWriter</p>\n","type":"Array"}],"example":["\n<div class='norender notest'>\n<code>\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</code>\n</div>\n<div class='norender notest'>\n<code>\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</code>\n</div>"],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1315,"description":"<p>Clears the data already written to the PrintWriter object</p>\n","itemtype":"method","name":"clear","example":["\n<div class =\"norender notest\"><code>\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</code></div>\n<div>\n<code>\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</code>\n</div>\n"],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1349,"description":"<p>Closes the PrintWriter</p>\n","itemtype":"method","name":"close","example":["\n<div class=\"norender notest\">\n<code>\n// create a file called 'newFile.txt'\nlet writer = createWriter('newFile.txt');\n// close the PrintWriter and save the file\nwriter.close();\n</code>\n</div>\n<div class='norender notest'>\n<code>\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</code>\n</div>"],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1398,"description":"<p>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 <a href=\"#/p5.Element\">p5.Element</a>,an Array of\nStrings, an Array of JSON, a JSON object, a <a href=\"#/p5.Table\">p5.Table\n</a>, a <a href=\"#/p5.Image\">p5.Image</a>, 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.\n<strong>Note that it is not recommended to\ncall this method within draw, as it will open a new save dialog on every\nrender.</strong></p>\n","itemtype":"method","name":"save","params":[{"name":"objectOrFilename","description":"<p>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).</p>\n","type":"Object|String","optional":true},{"name":"filename","description":"<p>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).</p>\n","type":"String","optional":true},{"name":"options","description":"<p>Additional options depend on\n                          filetype. For example, when saving JSON,\n                          <code>true</code> indicates that the\n                          output will be optimized for filesize,\n                          rather than readability.</p>\n","type":"Boolean|String","optional":true}],"example":["\n <div class=\"norender\"><code>\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 </code></div>\n\n<div class=\"norender\"><code>\n // Saves p5.Image as an image\n img = createImage(10, 10);\n save(img, 'myImage.png');\n </code></div>\n\n <div class=\"norender\"><code>\n // Saves p5.Renderer object as an image\n obj = createGraphics(100, 100);\n save(obj, 'myObject.png');\n </code></div>\n\n <div class=\"norender\"><code>\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 </code></div>\n\n <div class=\"norender\"><code>\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 </code></div>\n\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"An example for saving a canvas as an image.\n An example for saving a p5.Image element as an image.\n An example for saving a p5.Renderer element.\n An example showing how to save a table in formats of HTML, CSV and TSV.\n An example for saving JSON to a txt file with some extra arguments.\n An example for saving an array of strings to text file with line breaks.","class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1540,"description":"<p>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.</p>\n","itemtype":"method","name":"saveJSON","params":[{"name":"json","description":"","type":"Array|Object"},{"name":"filename","description":"","type":"String"},{"name":"optimize","description":"<p>If true, removes line breaks\n                               and spaces from the output\n                               file to optimize filesize\n                               (but not readability).</p>\n","type":"Boolean","optional":true}],"example":["\n <div><code>\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 }\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 </code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1597,"description":"<p>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.</p>\n","itemtype":"method","name":"saveStrings","params":[{"name":"list","description":"<p>string array to be written</p>\n","type":"String[]"},{"name":"filename","description":"<p>filename for output</p>\n","type":"String"},{"name":"extension","description":"<p>the filename's extension</p>\n","type":"String","optional":true},{"name":"isCRLF","description":"<p>if true, change line-break to CRLF</p>\n","type":"Boolean","optional":true}],"example":["\n <div><code>\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 }\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 </code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1661,"description":"<p>Writes the contents of a <a href=\"#/p5.Table\">Table</a> 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.</p>\n","itemtype":"method","name":"saveTable","params":[{"name":"Table","description":"<p>the <a href=\"#/p5.Table\">Table</a> object to save to a file</p>\n","type":"p5.Table"},{"name":"filename","description":"<p>the filename to which the Table should be saved</p>\n","type":"String"},{"name":"options","description":"<p>can be one of \"tsv\", \"csv\", or \"html\"</p>\n","type":"String","optional":true}],"example":["\n<div><code>\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\n // Saves the following to a file called 'new.csv':\n // id,species,name\n // 0,Panthera leo,Lion\n </code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/p5.Table.js","line":9,"description":"<p>Table Options\nGeneric class for handling tabular data, typically from a\nCSV, TSV, or other sort of spreadsheet file.\nCSV files are\n<a href=\"http://en.wikipedia.org/wiki/Comma-separated_values\">\ncomma separated values</a>, 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\n<a href=\"http://tools.ietf.org/html/rfc4180\">here</a>.\nTo load files, use the <a href=\"#/p5/loadTable\">loadTable</a> method.\nTo save tables to your computer, use the <a href=\"#/p5/save\">save</a> method\n or the <a href=\"#/p5/saveTable\">saveTable</a> method.</p>\n<p>Possible options include:</p>\n<ul>\n<li>csv - parse the table as comma-separated values\n<li>tsv - parse the table as tab-separated values\n<li>header - this table has a header (title) row\n</ul>","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":43,"description":"<p>An array containing the names of the columns in the table, if the \"header\" the table is\nloaded with the \"header\" parameter.</p>\n","itemtype":"property","name":"columns","type":"String[]","example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":77,"description":"<p>An array containing the <a href=\"#/p5.Table\">p5.TableRow</a> objects that make up the\nrows of the table. The same result as calling <a href=\"#/p5/getRows\">getRows()</a></p>\n","itemtype":"property","name":"rows","type":"p5.TableRow[]","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":85,"description":"<p>Use <a href=\"#/p5/addRow\">addRow()</a> to add a new row of data to a <a href=\"#/p5.Table\">p5.Table</a> 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 <a href=\"#/p5/set\">set()</a>.</p>\n<p>If a <a href=\"#/p5.TableRow\">p5.TableRow</a> object is included as a parameter, then that row is\nduplicated and added to the table.</p>\n","itemtype":"method","name":"addRow","params":[{"name":"row","description":"<p>row to be added to the table</p>\n","type":"p5.TableRow","optional":true}],"return":{"description":"the row that was added","type":"p5.TableRow"},"example":["\n <div class=\"norender\">\n <code>\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 </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":148,"description":"<p>Removes a row from the table object.</p>\n","itemtype":"method","name":"removeRow","params":[{"name":"id","description":"<p>ID number of the row to remove</p>\n","type":"Integer"}],"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":195,"description":"<p>Returns a reference to the specified <a href=\"#/p5.TableRow\">p5.TableRow</a>. The reference\ncan then be used to get and set values of the selected row.</p>\n","itemtype":"method","name":"getRow","params":[{"name":"rowID","description":"<p>ID number of the row to get</p>\n","type":"Integer"}],"return":{"description":"<a href=\"#/p5.TableRow\">p5.TableRow</a> object","type":"p5.TableRow"},"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":240,"description":"<p>Gets all rows from the table. Returns an array of <a href=\"#/p5.TableRow\">p5.TableRow</a>s.</p>\n","itemtype":"method","name":"getRows","return":{"description":"Array of <a href=\"#/p5.TableRow\">p5.TableRow</a>s","type":"p5.TableRow[]"},"example":["\n <div class=\"norender\">\n <code>\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 </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":288,"description":"<p>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.</p>\n","itemtype":"method","name":"findRow","params":[{"name":"value","description":"<p>The value to match</p>\n","type":"String"},{"name":"column","description":"<p>ID number or title of the\n                               column to search</p>\n","type":"Integer|String"}],"return":{"description":"","type":"p5.TableRow"},"example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":352,"description":"<p>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.</p>\n","itemtype":"method","name":"findRows","params":[{"name":"value","description":"<p>The value to match</p>\n","type":"String"},{"name":"column","description":"<p>ID number or title of the\n                               column to search</p>\n","type":"Integer|String"}],"return":{"description":"An Array of TableRow objects","type":"p5.TableRow[]"},"example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":420,"description":"<p>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.</p>\n","itemtype":"method","name":"matchRow","params":[{"name":"regexp","description":"<p>The regular expression to match</p>\n","type":"String|RegExp"},{"name":"column","description":"<p>The column ID (number) or\n                                 title (string)</p>\n","type":"String|Integer"}],"return":{"description":"TableRow object","type":"p5.TableRow"},"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":478,"description":"<p>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.</p>\n","itemtype":"method","name":"matchRows","params":[{"name":"regexp","description":"<p>The regular expression to match</p>\n","type":"String"},{"name":"column","description":"<p>The column ID (number) or\n                                 title (string)</p>\n","type":"String|Integer","optional":true}],"return":{"description":"An Array of TableRow objects","type":"p5.TableRow[]"},"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":545,"description":"<p>Retrieves all values in the specified column, and returns them\nas an array. The column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"getColumn","params":[{"name":"column","description":"<p>String or Number of the column to return</p>\n","type":"String|Number"}],"return":{"description":"Array of column values","type":"Array"},"example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":597,"description":"<p>Removes all rows from a Table. While all rows are removed,\ncolumns and column titles are maintained.</p>\n","itemtype":"method","name":"clearRows","example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":638,"description":"<p>Use <a href=\"#/p5/addColumn\">addColumn()</a> to add a new column to a <a href=\"#/p5.Table\">Table</a> 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.)</p>\n","itemtype":"method","name":"addColumn","params":[{"name":"title","description":"<p>title of the given column</p>\n","type":"String","optional":true}],"example":["\n <div class=\"norender\">\n <code>\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 </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":688,"description":"<p>Returns the total number of columns in a Table.</p>\n","itemtype":"method","name":"getColumnCount","return":{"description":"Number of columns in this table","type":"Integer"},"example":["\n <div>\n <code>\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 </code>\n </div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":724,"description":"<p>Returns the total number of rows in a Table.</p>\n","itemtype":"method","name":"getRowCount","return":{"description":"Number of rows in this table","type":"Integer"},"example":["\n <div>\n <code>\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 </code>\n </div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":760,"description":"<p>Removes any of the specified characters (or \"tokens\").</p>\n<p>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.</p>\n","itemtype":"method","name":"removeTokens","params":[{"name":"chars","description":"<p>String listing characters to be removed</p>\n","type":"String"},{"name":"column","description":"<p>Column ID (number)\n                                 or name (string)</p>\n","type":"String|Integer","optional":true}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":832,"description":"<p>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.</p>\n","itemtype":"method","name":"trim","params":[{"name":"column","description":"<p>Column ID (number)\n                                 or name (string)</p>\n","type":"String|Integer","optional":true}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":896,"description":"<p>Use <a href=\"#/p5/removeColumn\">removeColumn()</a> 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.</p>\n","itemtype":"method","name":"removeColumn","params":[{"name":"column","description":"<p>columnName (string) or ID (number)</p>\n","type":"String|Integer"}],"example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":960,"description":"<p>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.</p>\n","itemtype":"method","name":"set","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>column ID (Number)\n                              or title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>value to assign</p>\n","type":"String|Number"}],"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1009,"description":"<p>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.</p>\n","itemtype":"method","name":"setNum","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>column ID (Number)\n                              or title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>value to assign</p>\n","type":"Number"}],"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1055,"description":"<p>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.</p>\n","itemtype":"method","name":"setString","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>column ID (Number)\n                              or title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>value to assign</p>\n","type":"String"}],"example":["\n<div class=\"norender\"><code>\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</code></div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1100,"description":"<p>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.</p>\n","itemtype":"method","name":"get","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>columnName (string) or\n                                  ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"","type":"String|Number"},"example":["\n<div class=\"norender\">\n<code>\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}\n</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1146,"description":"<p>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.</p>\n","itemtype":"method","name":"getNum","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>columnName (string) or\n                                  ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\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}\n</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1190,"description":"<p>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.</p>\n","itemtype":"method","name":"getString","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>columnName (string) or\n                                  ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"","type":"String"},"example":["\n<div class=\"norender\">\n<code>\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}\n</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1242,"description":"<p>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.</p>\n","itemtype":"method","name":"getObject","params":[{"name":"headerColumn","description":"<p>Name of the column which should be used to\n                             title each row object (optional)</p>\n","type":"String","optional":true}],"return":{"description":"","type":"Object"},"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1305,"description":"<p>Retrieves all table data and returns it as a multidimensional array.</p>\n","itemtype":"method","name":"getArray","return":{"description":"","type":"Array"},"example":["\n<div class=\"norender\">\n<code>\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}\n</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":40,"description":"<p>Stores a value in the TableRow's specified column.\nThe column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"set","params":[{"name":"column","description":"<p>Column ID (Number)\n                              or Title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>The value to be stored</p>\n","type":"String|Number"}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":102,"description":"<p>Stores a Float value in the TableRow's specified column.\nThe column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"setNum","params":[{"name":"column","description":"<p>Column ID (Number)\n                              or Title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>The value to be stored\n                              as a Float</p>\n","type":"Number|String"}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":146,"description":"<p>Stores a String value in the TableRow's specified column.\nThe column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"setString","params":[{"name":"column","description":"<p>Column ID (Number)\n                              or Title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>The value to be stored\n                              as a String</p>\n","type":"String|Number|Boolean|Object"}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":191,"description":"<p>Retrieves a value from the TableRow's specified column.\nThe column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"get","params":[{"name":"column","description":"<p>columnName (string) or\n                                 ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"","type":"String|Number"},"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":239,"description":"<p>Retrieves a Float value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.</p>\n","itemtype":"method","name":"getNum","params":[{"name":"column","description":"<p>columnName (string) or\n                                 ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"Float Floating point number","type":"Number"},"example":["\n <div class=\"norender\"><code>\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 }\n </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":295,"description":"<p>Retrieves an String value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.</p>\n","itemtype":"method","name":"getString","params":[{"name":"column","description":"<p>columnName (string) or\n                                 ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"String","type":"String"},"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.XML.js","line":62,"description":"<p>Gets a copy of the element's parent. Returns the parent as another\n<a href=\"#/p5.XML\">p5.XML</a> object.</p>\n","itemtype":"method","name":"getParent","return":{"description":"element parent","type":"p5.XML"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":100,"description":"<p>Gets the element's full name, which is returned as a String.</p>\n","itemtype":"method","name":"getName","return":{"description":"the name of the node","type":"String"},"example":["&lt;animal\n <div class='norender'><code>\n // The following short XML file called \"mammals.xml\" is parsed\n // in the code below.\n //\n // <?xml version=\"1.0\"?>\n // &lt;mammals&gt;\n //   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n //   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n //   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n // &lt;/mammals&gt;\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 </code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":135,"description":"<p>Sets the element's name, which is specified as a String.</p>\n","itemtype":"method","name":"setName","params":[{"name":"the","description":"<p>new name of the node</p>\n","type":"String"}],"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":181,"description":"<p>Checks whether or not the element has any children, and returns the result\nas a boolean.</p>\n","itemtype":"method","name":"hasChildren","return":{"description":"","type":"Boolean"},"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":217,"description":"<p>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 <a href=\"#/p5.XML/getName\">getName()</a>\non each child element individually.</p>\n","itemtype":"method","name":"listChildren","return":{"description":"names of the children of the element","type":"String[]"},"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":258,"description":"<p>Returns all of the element's children as an array of <a href=\"#/p5.XML\">p5.XML</a> objects. When\nthe name parameter is specified, then it will return all children that match\nthat name.</p>\n","itemtype":"method","name":"getChildren","params":[{"name":"name","description":"<p>element name</p>\n","type":"String","optional":true}],"return":{"description":"children of the element","type":"p5.XML[]"},"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":314,"description":"<p>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.</p>\n","itemtype":"method","name":"getChild","params":[{"name":"name","description":"<p>element name or index</p>\n","type":"String|Integer"}],"return":{"description":"","type":"p5.XML"},"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>\n<div class='norender'><code>\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":374,"description":"<p>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 <a href=\"#/p5.XML\">p5.XML</a> object.\nA reference to the newly created child is returned as an <a href=\"#/p5.XML\">p5.XML</a> object.</p>\n","itemtype":"method","name":"addChild","params":[{"name":"node","description":"<p>a <a href=\"#/p5.XML\">p5.XML</a> Object which will be the child to be added</p>\n","type":"p5.XML"}],"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":426,"description":"<p>Removes the element specified by name or index.</p>\n","itemtype":"method","name":"removeChild","params":[{"name":"name","description":"<p>element name or index</p>\n","type":"String|Integer"}],"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>\n<div class='norender'><code>\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":498,"description":"<p>Counts the specified element's number of attributes, returned as an Number.</p>\n","itemtype":"method","name":"getAttributeCount","return":{"description":"","type":"Integer"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":534,"description":"<p>Gets all of the specified element's attributes, and returns them as an\narray of Strings.</p>\n","itemtype":"method","name":"listAttributes","return":{"description":"an array of strings containing the names of attributes","type":"String[]"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":577,"description":"<p>Checks whether or not an element has the specified attribute.</p>\n","itemtype":"method","name":"hasAttribute","params":[{"name":"the","description":"<p>attribute to be checked</p>\n","type":"String"}],"return":{"description":"true if attribute found else false","type":"Boolean"},"example":["\n <div class='norender'><code>\n // The following short XML file called \"mammals.xml\" is parsed\n // in the code below.\n //\n // <?xml version=\"1.0\"?>\n // &lt;mammals&gt;\n //   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n //   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n //   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n // &lt;/mammals&gt;\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 </code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":622,"description":"<p>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.</p>\n","itemtype":"method","name":"getNum","params":[{"name":"name","description":"<p>the non-null full name of the attribute</p>\n","type":"String"},{"name":"defaultValue","description":"<p>the default value of the attribute</p>\n","type":"Number","optional":true}],"return":{"description":"","type":"Number"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":669,"description":"<p>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.</p>\n","itemtype":"method","name":"getString","params":[{"name":"name","description":"<p>the non-null full name of the attribute</p>\n","type":"String"},{"name":"defaultValue","description":"<p>the default value of the attribute</p>\n","type":"Number","optional":true}],"return":{"description":"","type":"String"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":716,"description":"<p>Sets the content of an element's attribute. The first parameter specifies\nthe attribute name, while the second specifies the new content.</p>\n","itemtype":"method","name":"setAttribute","params":[{"name":"name","description":"<p>the full name of the attribute</p>\n","type":"String"},{"name":"value","description":"<p>the value of the attribute</p>\n","type":"Number|String|Boolean"}],"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":757,"description":"<p>Returns the content of an element. If there is no such content,\ndefaultValue is returned if specified, otherwise null is returned.</p>\n","itemtype":"method","name":"getContent","params":[{"name":"defaultValue","description":"<p>value returned if no content is found</p>\n","type":"String","optional":true}],"return":{"description":"","type":"String"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":798,"description":"<p>Sets the element's content.</p>\n","itemtype":"method","name":"setContent","params":[{"name":"text","description":"<p>the new content</p>\n","type":"String"}],"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":839,"description":"<p>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.</p>\n","itemtype":"method","name":"serialize","return":{"description":"Serialized string of the element","type":"String"},"example":["\n<div class='norender'><code>\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// <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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/math/calculation.js","line":10,"description":"<p>Calculates the absolute value (magnitude) of a number. Maps to Math.abs().\nThe absolute value of a number is always positive.</p>\n","itemtype":"method","name":"abs","params":[{"name":"n","description":"<p>number to compute</p>\n","type":"Number"}],"return":{"description":"absolute value of given number","type":"Number"},"example":["\n<div class = \"norender\"><code>\nfunction setup() {\n  let x = -3;\n  let y = abs(x);\n\n  print(x); // -3\n  print(y); // 3\n}\n</code></div>"],"alt":"no image displayed","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":33,"description":"<p>Calculates the closest int value that is greater than or equal to the\nvalue of the parameter. Maps to Math.ceil(). For example, ceil(9.03)\nreturns the value 10.</p>\n","itemtype":"method","name":"ceil","params":[{"name":"n","description":"<p>number to round up</p>\n","type":"Number"}],"return":{"description":"rounded up number","type":"Integer"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  // map, mouseX between 0 and 5.\n  let ax = map(mouseX, 0, 100, 0, 5);\n  let ay = 66;\n\n  //Get the ceiling of the mapped number.\n  let bx = ceil(map(mouseX, 0, 100, 0, 5));\n  let by = 33;\n\n  // Multiply the mapped numbers by 20 to more easily\n  // see the changes.\n  stroke(0);\n  fill(0);\n  line(0, ay, ax * 20, ay);\n  line(0, by, bx * 20, by);\n\n  // Reformat the float returned by map and draw it.\n  noStroke();\n  text(nfc(ax, 2), ax, ay - 5);\n  text(nfc(bx, 1), bx, by - 5);\n}\n</code></div>"],"alt":"2 horizontal lines & number sets. increase with mouse x. bottom to 2 decimals","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":72,"description":"<p>Constrains a value between a minimum and maximum value.</p>\n","itemtype":"method","name":"constrain","params":[{"name":"n","description":"<p>number to constrain</p>\n","type":"Number"},{"name":"low","description":"<p>minimum limit</p>\n","type":"Number"},{"name":"high","description":"<p>maximum limit</p>\n","type":"Number"}],"return":{"description":"constrained number","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n\n  let leftWall = 25;\n  let rightWall = 75;\n\n  // xm is just the mouseX, while\n  // xc is the mouseX, but constrained\n  // between the leftWall and rightWall!\n  let xm = mouseX;\n  let xc = constrain(mouseX, leftWall, rightWall);\n\n  // Draw the walls.\n  stroke(150);\n  line(leftWall, 0, leftWall, height);\n  line(rightWall, 0, rightWall, height);\n\n  // Draw xm and xc as circles.\n  noStroke();\n  fill(150);\n  ellipse(xm, 33, 9, 9); // Not Constrained\n  fill(0);\n  ellipse(xc, 66, 9, 9); // Constrained\n}\n</code></div>"],"alt":"2 vertical lines. 2 ellipses move with mouse X 1 does not move passed lines","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":116,"description":"<p>Calculates the distance between two points, in either two or three dimensions.</p>\n","itemtype":"method","name":"dist","return":{"description":"distance between the two points","type":"Number"},"example":["\n<div><code>\n// Move your mouse inside the canvas to see the\n// change in distance between two points!\nfunction draw() {\n  background(200);\n  fill(0);\n\n  let x1 = 10;\n  let y1 = 90;\n  let x2 = mouseX;\n  let y2 = mouseY;\n\n  line(x1, y1, x2, y2);\n  ellipse(x1, y1, 7, 7);\n  ellipse(x2, y2, 7, 7);\n\n  // d is the length of the line\n  // the distance from point 1 to point 2.\n  let d = int(dist(x1, y1, x2, y2));\n\n  // Let's write d along the line we are drawing!\n  push();\n  translate((x1 + x2) / 2, (y1 + y2) / 2);\n  rotate(atan2(y2 - y1, x2 - x1));\n  text(nfc(d, 1), 0, -5);\n  pop();\n  // Fancy!\n}\n</code></div>"],"alt":"2 ellipses joined by line. 1 ellipse moves with mouse X&Y. Distance displayed.","class":"p5","module":"Math","submodule":"Calculation","overloads":[{"line":116,"params":[{"name":"x1","description":"<p>x-coordinate of the first point</p>\n","type":"Number"},{"name":"y1","description":"<p>y-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"<p>x-coordinate of the second point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate of the second point</p>\n","type":"Number"}],"return":{"description":"distance between the two points","type":"Number"}},{"line":160,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>z-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>z-coordinate of the second point</p>\n","type":"Number"}],"return":{"description":"distance between the two points","type":"Number"}}]},{"file":"src/math/calculation.js","line":181,"description":"<p>Returns Euler's number e (2.71828...) raised to the power of the n\nparameter. Maps to Math.exp().</p>\n","itemtype":"method","name":"exp","params":[{"name":"n","description":"<p>exponent to raise</p>\n","type":"Number"}],"return":{"description":"e^n","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n\n  // Compute the exp() function with a value between 0 and 2\n  let xValue = map(mouseX, 0, width, 0, 2);\n  let yValue = exp(xValue);\n\n  let y = map(yValue, 0, 8, height, 0);\n\n  let legend = 'exp (' + nfc(xValue, 3) + ')\\n= ' + nf(yValue, 1, 4);\n  stroke(150);\n  line(mouseX, y, mouseX, height);\n  fill(0);\n  text(legend, 5, 15);\n  noStroke();\n  ellipse(mouseX, y, 7, 7);\n\n  // Draw the exp(x) curve,\n  // over the domain of x from 0 to 2\n  noFill();\n  stroke(0);\n  beginShape();\n  for (let x = 0; x < width; x++) {\n    xValue = map(x, 0, width, 0, 2);\n    yValue = exp(xValue);\n    y = map(yValue, 0, 8, height, 0);\n    vertex(x, y);\n  }\n\n  endShape();\n  line(0, 0, 0, height);\n  line(0, height - 1, width, height - 1);\n}\n</code></div>"],"alt":"ellipse moves along a curve with mouse x. e^n displayed.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":230,"description":"<p>Calculates the closest int value that is less than or equal to the\nvalue of the parameter. Maps to Math.floor().</p>\n","itemtype":"method","name":"floor","params":[{"name":"n","description":"<p>number to round down</p>\n","type":"Number"}],"return":{"description":"rounded down number","type":"Integer"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  //map, mouseX between 0 and 5.\n  let ax = map(mouseX, 0, 100, 0, 5);\n  let ay = 66;\n\n  //Get the floor of the mapped number.\n  let bx = floor(map(mouseX, 0, 100, 0, 5));\n  let by = 33;\n\n  // Multiply the mapped numbers by 20 to more easily\n  // see the changes.\n  stroke(0);\n  fill(0);\n  line(0, ay, ax * 20, ay);\n  line(0, by, bx * 20, by);\n\n  // Reformat the float returned by map and draw it.\n  noStroke();\n  text(nfc(ax, 2), ax, ay - 5);\n  text(nfc(bx, 1), bx, by - 5);\n}\n</code></div>"],"alt":"2 horizontal lines & number sets. increase with mouse x. bottom to 2 decimals","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":268,"description":"<p>Calculates a number between two numbers at a specific increment. The amt\nparameter is the amount to interpolate between the two values where 0.0\nequal to the first point, 0.1 is very near the first point, 0.5 is\nhalf-way in between, and 1.0 is equal to the second point. If the\nvalue of amt is more than 1.0 or less than 0.0, the number will be\ncalculated accordingly in the ratio of the two given numbers. The lerp\nfunction is convenient for creating motion along a straight\npath and for drawing dotted lines.</p>\n","itemtype":"method","name":"lerp","params":[{"name":"start","description":"<p>first value</p>\n","type":"Number"},{"name":"stop","description":"<p>second value</p>\n","type":"Number"},{"name":"amt","description":"<p>number</p>\n","type":"Number"}],"return":{"description":"lerped value","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  background(200);\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  let y = 50;\n\n  strokeWeight(5);\n  stroke(0); // Draw the original points in black\n  point(a, y);\n  point(b, y);\n\n  stroke(100); // Draw the lerp points in gray\n  point(c, y);\n  point(d, y);\n  point(e, y);\n}\n</code></div>"],"alt":"5 points horizontally staggered mid-canvas. mid 3 are grey, outer black","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":315,"description":"<p>Calculates the natural logarithm (the base-e logarithm) of a number. This\nfunction expects the n parameter to be a value greater than 0.0. Maps to\nMath.log().</p>\n","itemtype":"method","name":"log","params":[{"name":"n","description":"<p>number greater than 0</p>\n","type":"Number"}],"return":{"description":"natural logarithm of n","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  let maxX = 2.8;\n  let maxY = 1.5;\n\n  // Compute the natural log of a value between 0 and maxX\n  let xValue = map(mouseX, 0, width, 0, maxX);\n  let yValue, y;\n  if (xValue > 0) {\n   // Cannot take the log of a negative number.\n    yValue = log(xValue);\n    y = map(yValue, -maxY, maxY, height, 0);\n\n    // Display the calculation occurring.\n    let legend = 'log(' + nf(xValue, 1, 2) + ')\\n= ' + nf(yValue, 1, 3);\n    stroke(150);\n    line(mouseX, y, mouseX, height);\n    fill(0);\n    text(legend, 5, 15);\n    noStroke();\n    ellipse(mouseX, y, 7, 7);\n  }\n\n  // Draw the log(x) curve,\n  // over the domain of x from 0 to maxX\n  noFill();\n  stroke(0);\n  beginShape();\n  for (let x = 0; x < width; x++) {\n    xValue = map(x, 0, width, 0, maxX);\n    yValue = log(xValue);\n    y = map(yValue, -maxY, maxY, height, 0);\n    vertex(x, y);\n  }\n  endShape();\n  line(0, 0, 0, height);\n  line(0, height / 2, width, height / 2);\n}\n</code></div>"],"alt":"ellipse moves along a curve with mouse x. natural logarithm of n displayed.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":370,"description":"<p>Calculates the magnitude (or length) of a vector. A vector is a direction\nin space commonly used in computer graphics and linear algebra. Because it\nhas no \"start\" position, the magnitude of a vector can be thought of as\nthe distance from the coordinate 0,0 to its x,y value. Therefore, <a href=\"#/p5/mag\">mag()</a> is\na shortcut for writing dist(0, 0, x, y).</p>\n","itemtype":"method","name":"mag","params":[{"name":"a","description":"<p>first value</p>\n","type":"Number"},{"name":"b","description":"<p>second value</p>\n","type":"Number"}],"return":{"description":"magnitude of vector from (0,0) to (a,b)","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  let x1 = 20;\n  let x2 = 80;\n  let y1 = 30;\n  let y2 = 70;\n\n  line(0, 0, x1, y1);\n  print(mag(x1, y1)); // Prints \"36.05551275463989\"\n  line(0, 0, x2, y1);\n  print(mag(x2, y1)); // Prints \"85.44003745317531\"\n  line(0, 0, x1, y2);\n  print(mag(x1, y2)); // Prints \"72.80109889280519\"\n  line(0, 0, x2, y2);\n  print(mag(x2, y2)); // Prints \"106.3014581273465\"\n}\n</code></div>"],"alt":"4 lines of different length radiate from top left of canvas.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":408,"description":"<p>Re-maps a number from one range to another.</p>\n<p>In the first example above, the number 25 is converted from a value in the\nrange of 0 to 100 into a value that ranges from the left edge of the\nwindow (0) to the right edge (width).</p>\n","itemtype":"method","name":"map","params":[{"name":"value","description":"<p>the incoming value to be converted</p>\n","type":"Number"},{"name":"start1","description":"<p>lower bound of the value's current range</p>\n","type":"Number"},{"name":"stop1","description":"<p>upper bound of the value's current range</p>\n","type":"Number"},{"name":"start2","description":"<p>lower bound of the value's target range</p>\n","type":"Number"},{"name":"stop2","description":"<p>upper bound of the value's target range</p>\n","type":"Number"},{"name":"withinBounds","description":"<p>constrain the value to the newly mapped range</p>\n","type":"Boolean","optional":true}],"return":{"description":"remapped number","type":"Number"},"example":["\n  <div><code>\nlet value = 25;\nlet m = map(value, 0, 100, 0, width);\nellipse(m, 50, 10, 10);\n</code></div>\n\n  <div><code>\nfunction setup() {\n  noStroke();\n}\n\nfunction draw() {\n  background(204);\n  let x1 = map(mouseX, 0, width, 25, 75);\n  ellipse(x1, 25, 25, 25);\n  //This ellipse is constrained to the 0-100 range\n  //after setting withinBounds to true\n  let x2 = map(mouseX, 0, width, 0, 100, true);\n  ellipse(x2, 75, 25, 25);\n}\n</code></div>"],"alt":"10 by 10 white ellipse with in mid left canvas\n2 25 by 25 white ellipses move with mouse x. Bottom has more range from X","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":463,"description":"<p>Determines the largest value in a sequence of numbers, and then returns\nthat value. <a href=\"#/p5/max\">max()</a> accepts any number of Number parameters, or an Array\nof any length.</p>\n","itemtype":"method","name":"max","return":{"description":"maximum Number","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  // Change the elements in the array and run the sketch\n  // to show how max() works!\n  let numArray = [2, 1, 5, 4, 8, 9];\n  fill(0);\n  noStroke();\n  text('Array Elements', 0, 10);\n  // Draw all numbers in the array\n  let spacing = 15;\n  let elemsY = 25;\n  for (let i = 0; i < numArray.length; i++) {\n    text(numArray[i], i * spacing, elemsY);\n  }\n  let maxX = 33;\n  let maxY = 80;\n  // Draw the Maximum value in the array.\n  textSize(32);\n  text(max(numArray), maxX, maxY);\n}\n</code></div>"],"alt":"Small text at top reads: Array Elements 2 1 5 4 8 9. Large text at center: 9","class":"p5","module":"Math","submodule":"Calculation","overloads":[{"line":463,"params":[{"name":"n0","description":"<p>Number to compare</p>\n","type":"Number"},{"name":"n1","description":"<p>Number to compare</p>\n","type":"Number"}],"return":{"description":"maximum Number","type":"Number"}},{"line":498,"params":[{"name":"nums","description":"<p>Numbers to compare</p>\n","type":"Number[]"}],"return":{"description":"","type":"Number"}}]},{"file":"src/math/calculation.js","line":512,"description":"<p>Determines the smallest value in a sequence of numbers, and then returns\nthat value. <a href=\"#/p5/min\">min()</a> accepts any number of Number parameters, or an Array\nof any length.</p>\n","itemtype":"method","name":"min","return":{"description":"minimum Number","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  // Change the elements in the array and run the sketch\n  // to show how min() works!\n  let numArray = [2, 1, 5, 4, 8, 9];\n  fill(0);\n  noStroke();\n  text('Array Elements', 0, 10);\n  // Draw all numbers in the array\n  let spacing = 15;\n  let elemsY = 25;\n  for (let i = 0; i < numArray.length; i++) {\n    text(numArray[i], i * spacing, elemsY);\n  }\n  let maxX = 33;\n  let maxY = 80;\n  // Draw the Minimum value in the array.\n  textSize(32);\n  text(min(numArray), maxX, maxY);\n}\n</code></div>"],"alt":"Small text at top reads: Array Elements 2 1 5 4 8 9. Large text at center: 1","class":"p5","module":"Math","submodule":"Calculation","overloads":[{"line":512,"params":[{"name":"n0","description":"<p>Number to compare</p>\n","type":"Number"},{"name":"n1","description":"<p>Number to compare</p>\n","type":"Number"}],"return":{"description":"minimum Number","type":"Number"}},{"line":547,"params":[{"name":"nums","description":"<p>Numbers to compare</p>\n","type":"Number[]"}],"return":{"description":"","type":"Number"}}]},{"file":"src/math/calculation.js","line":561,"description":"<p>Normalizes a number from another range into a value between 0 and 1.\nIdentical to map(value, low, high, 0, 1).\nNumbers outside of the range are not clamped to 0 and 1, because\nout-of-range values are often intentional and useful. (See the example above.)</p>\n","itemtype":"method","name":"norm","params":[{"name":"value","description":"<p>incoming value to be normalized</p>\n","type":"Number"},{"name":"start","description":"<p>lower bound of the value's current range</p>\n","type":"Number"},{"name":"stop","description":"<p>upper bound of the value's current range</p>\n","type":"Number"}],"return":{"description":"normalized number","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  let currentNum = mouseX;\n  let lowerBound = 0;\n  let upperBound = width; //100;\n  let normalized = norm(currentNum, lowerBound, upperBound);\n  let lineY = 70;\n  stroke(3);\n  line(0, lineY, width, lineY);\n  //Draw an ellipse mapped to the non-normalized value.\n  noStroke();\n  fill(50);\n  let s = 7; // ellipse size\n  ellipse(currentNum, lineY, s, s);\n\n  // Draw the guide\n  let guideY = lineY + 15;\n  text('0', 0, guideY);\n  textAlign(RIGHT);\n  text('100', width, guideY);\n\n  // Draw the normalized value\n  textAlign(LEFT);\n  fill(0);\n  textSize(32);\n  let normalY = 40;\n  let normalX = 20;\n  text(normalized, normalX, normalY);\n}\n</code></div>"],"alt":"ellipse moves with mouse. 0 shown left & 100 right and updating values center","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":613,"description":"<p>Facilitates exponential expressions. The <a href=\"#/p5/pow\">pow()</a> function is an efficient\nway of multiplying numbers by themselves (or their reciprocals) in large\nquantities. For example, pow(3, 5) is equivalent to the expression\n3 × 3 × 3 × 3 × 3 and pow(3, -5) is equivalent to 1 /\n3 × 3 × 3 × 3 × 3. Maps to\nMath.pow().</p>\n","itemtype":"method","name":"pow","params":[{"name":"n","description":"<p>base of the exponential expression</p>\n","type":"Number"},{"name":"e","description":"<p>power by which to raise the base</p>\n","type":"Number"}],"return":{"description":"n^e","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  //Exponentially increase the size of an ellipse.\n  let eSize = 3; // Original Size\n  let eLoc = 10; // Original Location\n\n  ellipse(eLoc, eLoc, eSize, eSize);\n\n  ellipse(eLoc * 2, eLoc * 2, pow(eSize, 2), pow(eSize, 2));\n\n  ellipse(eLoc * 4, eLoc * 4, pow(eSize, 3), pow(eSize, 3));\n\n  ellipse(eLoc * 8, eLoc * 8, pow(eSize, 4), pow(eSize, 4));\n}\n</code></div>"],"alt":"small to large ellipses radiating from top left of canvas","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":647,"description":"<p>Calculates the integer closest to the n parameter. For example,\nround(133.8) returns the value 134. Maps to Math.round().</p>\n","itemtype":"method","name":"round","params":[{"name":"n","description":"<p>number to round</p>\n","type":"Number"},{"name":"decimals","description":"<p>number of decimal places to round to, default is 0</p>\n","type":"Number","optional":true}],"return":{"description":"rounded number","type":"Integer"},"example":["\n<div><code>\nlet x = round(3.7);\ntext(x, width / 2, height / 2);\n</code></div>\n<div><code>\nlet x = round(12.782383, 2);\ntext(x, width / 2, height / 2);\n</code></div>\n<div><code>\nfunction draw() {\n  background(200);\n  //map, mouseX between 0 and 5.\n  let ax = map(mouseX, 0, 100, 0, 5);\n  let ay = 66;\n\n  // Round the mapped number.\n  let bx = round(map(mouseX, 0, 100, 0, 5));\n  let by = 33;\n\n  // Multiply the mapped numbers by 20 to more easily\n  // see the changes.\n  stroke(0);\n  fill(0);\n  line(0, ay, ax * 20, ay);\n  line(0, by, bx * 20, by);\n\n  // Reformat the float returned by map and draw it.\n  noStroke();\n  text(nfc(ax, 2), ax, ay - 5);\n  text(nfc(bx, 1), bx, by - 5);\n}\n</code></div>"],"alt":"\"3\" written in middle of canvas\n\"12.78\" written in middle of canvas\nhorizontal center line squared values displayed on top and regular on bottom.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":701,"description":"<p>Squares a number (multiplies a number by itself). The result is always a\npositive number, as multiplying two negative numbers always yields a\npositive result. For example, -1 * -1 = 1.</p>\n","itemtype":"method","name":"sq","params":[{"name":"n","description":"<p>number to square</p>\n","type":"Number"}],"return":{"description":"squared number","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  let eSize = 7;\n  let x1 = map(mouseX, 0, width, 0, 10);\n  let y1 = 80;\n  let x2 = sq(x1);\n  let y2 = 20;\n\n  // Draw the non-squared.\n  line(0, y1, width, y1);\n  ellipse(x1, y1, eSize, eSize);\n\n  // Draw the squared.\n  line(0, y2, width, y2);\n  ellipse(x2, y2, eSize, eSize);\n\n  // Draw dividing line.\n  stroke(100);\n  line(0, height / 2, width, height / 2);\n\n  // Draw text.\n  let spacing = 15;\n  noStroke();\n  fill(0);\n  text('x = ' + x1, 0, y1 + spacing);\n  text('sq(x) = ' + x2, 0, y2 + spacing);\n}\n</code></div>"],"alt":"horizontal center line squared values displayed on top and regular on bottom.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":745,"description":"<p>Calculates the square root of a number. The square root of a number is\nalways positive, even though there may be a valid negative root. The\nsquare root s of number a is such that s*s = a. It is the opposite of\nsquaring. Maps to Math.sqrt().</p>\n","itemtype":"method","name":"sqrt","params":[{"name":"n","description":"<p>non-negative number to square root</p>\n","type":"Number"}],"return":{"description":"square root of number","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  let eSize = 7;\n  let x1 = mouseX;\n  let y1 = 80;\n  let x2 = sqrt(x1);\n  let y2 = 20;\n\n  // Draw the non-squared.\n  line(0, y1, width, y1);\n  ellipse(x1, y1, eSize, eSize);\n\n  // Draw the squared.\n  line(0, y2, width, y2);\n  ellipse(x2, y2, eSize, eSize);\n\n  // Draw dividing line.\n  stroke(100);\n  line(0, height / 2, width, height / 2);\n\n  // Draw text.\n  noStroke();\n  fill(0);\n  let spacing = 15;\n  text('x = ' + x1, 0, y1 + spacing);\n  text('sqrt(x) = ' + x2, 0, y2 + spacing);\n}\n</code></div>"],"alt":"horizontal center line squareroot values displayed on top and regular on bottom.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":832,"description":"<p>Calculates the fractional part of a number.</p>\n","itemtype":"method","name":"fract","params":[{"name":"num","description":"<p>Number whose fractional part needs to be found out</p>\n","type":"Number"}],"return":{"description":"fractional part of x, i.e, {x}","type":"Number"},"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(windowWidth, windowHeight);\n  fill(0);\n  text(7345.73472742, 0, 50);\n  text(fract(7345.73472742), 0, 100);\n  text(1.4215e-15, 150, 50);\n  text(fract(1.4215e-15), 150, 100);\n}\n</code>\n</div>"],"alt":"2 rows of numbers, the first row having 8 numbers and the second having the fractional parts of those numbers.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/math.js","line":10,"description":"<p>Creates a new <a href=\"#/p5.Vector\">p5.Vector</a> (the datatype for storing vectors). This provides a\ntwo or three dimensional vector, specifically a Euclidean (also known as\ngeometric) vector. A vector is an entity that has both magnitude and\ndirection.</p>\n","itemtype":"method","name":"createVector","params":[{"name":"x","description":"<p>x component of the vector</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>z component of the vector</p>\n","type":"Number","optional":true}],"return":{"description":"","type":"p5.Vector"},"example":["\n<div><code>\nlet v1;\nfunction setup() {\n  createCanvas(100, 100);\n  stroke(255, 0, 255);\n  v1 = createVector(width / 2, height / 2);\n}\n\nfunction draw() {\n  background(255);\n  line(v1.x, v1.y, mouseX, mouseY);\n}\n</code></div>"],"alt":"draws a line from center of canvas to mouse pointer position.","class":"p5","module":"Math","submodule":"Vector"},{"file":"src/math/noise.js","line":36,"description":"<p>Returns the Perlin noise value at specified coordinates. Perlin noise is\na random sequence generator producing a more naturally ordered, harmonic\nsuccession of numbers compared to the standard <b>random()</b> function.\nIt was invented by Ken Perlin in the 1980s and been used since in\ngraphical applications to produce procedural textures, natural motion,\nshapes, terrains etc.<br /><br /> The main difference to the\n<b>random()</b> function is that Perlin noise is defined in an infinite\nn-dimensional space where each pair of coordinates corresponds to a\nfixed semi-random value (fixed only for the lifespan of the program; see\nthe <a href=\"#/p5/noiseSeed\">noiseSeed()</a> function). p5.js can compute 1D, 2D and 3D noise,\ndepending on the number of coordinates given. The resulting value will\nalways be between 0.0 and 1.0. The noise value can be animated by moving\nthrough the noise space as demonstrated in the example above. The 2nd\nand 3rd dimension can also be interpreted as time.<br /><br />The actual\nnoise is structured similar to an audio signal, in respect to the\nfunction's use of frequencies. Similar to the concept of harmonics in\nphysics, perlin noise is computed over several octaves which are added\ntogether for the final result. <br /><br />Another way to adjust the\ncharacter of the resulting sequence is the scale of the input\ncoordinates. As the function works within an infinite space the value of\nthe coordinates doesn't matter as such, only the distance between\nsuccessive coordinates does (eg. when using <b>noise()</b> within a\nloop). As a general rule the smaller the difference between coordinates,\nthe smoother the resulting noise sequence will be. Steps of 0.005-0.03\nwork best for most applications, but this will differ depending on use.</p>\n","itemtype":"method","name":"noise","params":[{"name":"x","description":"<p>x-coordinate in noise space</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate in noise space</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>z-coordinate in noise space</p>\n","type":"Number","optional":true}],"return":{"description":"Perlin noise value (between 0 and 1) at specified\n                     coordinates","type":"Number"},"example":["\n<div>\n<code>\nlet xoff = 0.0;\n\nfunction draw() {\n  background(204);\n  xoff = xoff + 0.01;\n  let n = noise(xoff) * width;\n  line(n, 0, n, height);\n}\n</code>\n</div>\n<div>\n<code>let noiseScale=0.02;\n\nfunction draw() {\n  background(0);\n  for (let x=0; x < width; x++) {\n    let noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);\n    stroke(noiseVal*255);\n    line(x, mouseY+noiseVal*80, x, height);\n  }\n}\n</code>\n</div>"],"alt":"vertical line moves left to right with updating noise values.\nhorizontal wave pattern effected by mouse x-position & updating noise values.","class":"p5","module":"Math","submodule":"Noise"},{"file":"src/math/noise.js","line":178,"description":"<p>Adjusts the character and level of detail produced by the Perlin noise\n function. Similar to harmonics in physics, noise is computed over\n several octaves. Lower octaves contribute more to the output signal and\n as such define the overall intensity of the noise, whereas higher octaves\n create finer grained details in the noise sequence.\nBy default, noise is computed over 4 octaves with each octave contributing\n exactly half than its predecessor, starting at 50% strength for the 1st\n octave. This falloff amount can be changed by adding an additional function\n parameter. Eg. a falloff factor of 0.75 means each octave will now have\n 75% impact (25% less) of the previous lower octave. Any value between\n 0.0 and 1.0 is valid, however note that values greater than 0.5 might\n result in greater than 1.0 values returned by <b>noise()</b>.\nBy changing these parameters, the signal created by the <b>noise()</b>\n function can be adapted to fit very specific needs and characteristics.</p>\n","itemtype":"method","name":"noiseDetail","params":[{"name":"lod","description":"<p>number of octaves to be used by the noise</p>\n","type":"Number"},{"name":"falloff","description":"<p>falloff factor for each octave</p>\n","type":"Number"}],"example":["\n <div>\n <code>\n let noiseVal;\n let noiseScale = 0.02;\nfunction setup() {\n   createCanvas(100, 100);\n }\nfunction draw() {\n   background(0);\n   for (let y = 0; y < height; y++) {\n     for (let x = 0; x < width / 2; x++) {\n       noiseDetail(2, 0.2);\n       noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);\n       stroke(noiseVal * 255);\n       point(x, y);\n       noiseDetail(8, 0.65);\n       noiseVal = noise(\n         (mouseX + x + width / 2) * noiseScale,\n         (mouseY + y) * noiseScale\n       );\n       stroke(noiseVal * 255);\n       point(x + width / 2, y);\n     }\n   }\n }\n </code>\n </div>"],"alt":"2 vertical grey smokey patterns affected my mouse x-position and noise.","class":"p5","module":"Math","submodule":"Noise"},{"file":"src/math/noise.js","line":243,"description":"<p>Sets the seed value for <b>noise()</b>. By default, <b>noise()</b>\nproduces different results each time the program is run. Set the\n<b>value</b> parameter to a constant to return the same pseudo-random\nnumbers each time the software is run.</p>\n","itemtype":"method","name":"noiseSeed","params":[{"name":"seed","description":"<p>the seed value</p>\n","type":"Number"}],"example":["\n<div>\n<code>let xoff = 0.0;\n\nfunction setup() {\n  noiseSeed(99);\n  stroke(0, 10);\n}\n\nfunction draw() {\n  xoff = xoff + .01;\n  let n = noise(xoff) * width;\n  line(n, 0, n, height);\n}\n</code>\n</div>"],"alt":"vertical grey lines drawing in pattern affected by noise.","class":"p5","module":"Math","submodule":"Noise"},{"file":"src/math/p5.Vector.js","line":65,"description":"<p>The x component of the vector</p>\n","itemtype":"property","name":"x","type":"Number","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":70,"description":"<p>The y component of the vector</p>\n","itemtype":"property","name":"y","type":"Number","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":75,"description":"<p>The z component of the vector</p>\n","itemtype":"property","name":"z","type":"Number","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":82,"description":"<p>Returns a string representation of a vector v by calling String(v)\nor v.toString(). This method is useful for logging vectors in the\nconsole.</p>\n","itemtype":"method","name":"toString","return":{"description":"","type":"String"},"example":["\n<div class = \"norender\">\n<code>\nfunction setup() {\n  let v = createVector(20, 30);\n  print(String(v)); // prints \"p5.Vector Object : [20, 30, 0]\"\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'black');\n\n  noStroke();\n  text(v1.toString(), 10, 25, 90, 75);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":132,"description":"<p>Sets the x, y, and z component of the vector using two or three separate\nvariables, the data from a <a href=\"#/p5.Vector\">p5.Vector</a>, or the values from a float array.</p>\n","itemtype":"method","name":"set","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nfunction setup() {\n  let v = createVector(1, 2, 3);\n  v.set(4, 5, 6); // Sets vector to [4, 5, 6]\n\n  let v1 = createVector(0, 0, 0);\n  let arr = [1, 2, 3];\n  v1.set(arr); // Sets vector to [1, 2, 3]\n}\n</code>\n</div>\n\n<div>\n<code>\nlet v0, v1;\nfunction setup() {\n  createCanvas(100, 100);\n\n  v0 = createVector(0, 0);\n  v1 = createVector(50, 50);\n}\n\nfunction draw() {\n  background(240);\n\n  drawArrow(v0, v1, 'black');\n  v1.set(v1.x + random(-1, 1), v1.y + random(-1, 1));\n\n  noStroke();\n  text('x: ' + round(v1.x) + ' y: ' + round(v1.y), 20, 90);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":132,"params":[{"name":"x","description":"<p>the x component of the vector</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>the y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>the z component of the vector</p>\n","type":"Number","optional":true}],"chainable":1},{"line":191,"params":[{"name":"value","description":"<p>the vector to set</p>\n","type":"p5.Vector|Number[]"}],"chainable":1}]},{"file":"src/math/p5.Vector.js","line":215,"description":"<p>Gets a copy of the vector, returns a <a href=\"#/p5.Vector\">p5.Vector</a> object.</p>\n","itemtype":"method","name":"copy","return":{"description":"the copy of the <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 2, 3);\nlet v2 = v1.copy();\nprint(v1.x === v2.x && v1.y === v2.y && v1.z === v2.z);\n// Prints \"true\"\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":238,"description":"<p>Adds x, y, and z components to a vector, adds one vector to another, or\nadds two independent vectors together. The version of the method that adds\ntwo vectors together is a static method and returns a <a href=\"#/p5.Vector\">p5.Vector</a>, the others\nacts directly on the vector. Additionally, you may provide arguments to this function as an array.\nSee the examples for more context.</p>\n","itemtype":"method","name":"add","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(1, 2, 3);\nv.add(4, 5, 6);\n// v's components are set to [5, 7, 9]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v = createVector(1, 2, 3);\n// Provide arguments as an array\nlet arr = [4, 5, 6];\nv.add(arr);\n// v's components are set to [5, 7, 9]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(1, 2, 3);\nlet v2 = createVector(2, 3, 4);\n\nlet v3 = p5.Vector.add(v1, v2);\n// v3 has components [3, 5, 7]\nprint(v3);\n</code>\n</div>\n\n<div>\n<code>\n// red vector + blue vector = purple vector\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(-30, 20);\n  drawArrow(v1, v2, 'blue');\n\n  let v3 = p5.Vector.add(v1, v2);\n  drawArrow(v0, v3, 'purple');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":238,"params":[{"name":"x","description":"<p>the x component of the vector to be added</p>\n","type":"Number"},{"name":"y","description":"<p>the y component of the vector to be added</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>the z component of the vector to be added</p>\n","type":"Number","optional":true}],"chainable":1},{"line":315,"params":[{"name":"value","description":"<p>the vector to add</p>\n","type":"p5.Vector|Number[]"}],"chainable":1},{"line":1988,"params":[{"name":"v1","description":"<p>a <a href=\"#/p5.Vector\">p5.Vector</a> to add</p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>a <a href=\"#/p5.Vector\">p5.Vector</a> to add</p>\n","type":"p5.Vector"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"the resulting <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":362,"description":"<p>Gives remainder of a vector when it is divided by another vector.\nSee examples for more context.</p>\n","itemtype":"method","name":"rem","chainable":1,"example":["\n<div class='norender'>\n<code>\nlet v = createVector(3, 4, 5);\nv.rem(2, 3, 4);\n// v's components are set to [1, 1, 1]\n</code>\n</div>\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(3, 4, 5);\nlet v2 = createVector(2, 3, 4);\n\nlet v3 = p5.Vector.rem(v1, v2);\n// v3 has components [1, 1, 1]\nprint(v3);\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":362,"params":[{"name":"x","description":"<p>the x component of divisor vector</p>\n","type":"Number"},{"name":"y","description":"<p>the y component of divisor vector</p>\n","type":"Number"},{"name":"z","description":"<p>the z component of divisor vector</p>\n","type":"Number"}],"chainable":1},{"line":391,"params":[{"name":"value","description":"<p>divisor vector</p>\n","type":"p5.Vector | Number[]"}],"chainable":1},{"line":2014,"params":[{"name":"v1","description":"<p>dividend <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>divisor <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"static":1},{"line":2020,"params":[{"name":"v1","description":"","type":"p5.Vector"},{"name":"v2","description":"","type":"p5.Vector"}],"static":1,"return":{"description":"the resulting <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":446,"description":"<p>Subtracts x, y, and z components from a vector, subtracts one vector from\nanother, or subtracts two independent vectors. The version of the method\nthat subtracts two vectors is a static method and returns a <a href=\"#/p5.Vector\">p5.Vector</a>, the\nother acts directly on the vector. Additionally, you may provide arguments to this function as an array.\nSee the examples for more context.</p>\n","itemtype":"method","name":"sub","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(4, 5, 6);\nv.sub(1, 1, 1);\n// v's components are set to [3, 4, 5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v = createVector(4, 5, 6);\n// Provide arguments as an array\nlet arr = [1, 1, 1];\nv.sub(arr);\n// v's components are set to [3, 4, 5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(2, 3, 4);\nlet v2 = createVector(1, 2, 3);\n\nlet v3 = p5.Vector.sub(v1, v2);\n// v3 has components [1, 1, 1]\nprint(v3);\n</code>\n</div>\n\n<div>\n<code>\n// red vector - blue vector = purple vector\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(70, 50);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(mouseX, mouseY);\n  drawArrow(v0, v2, 'blue');\n\n  let v3 = p5.Vector.sub(v1, v2);\n  drawArrow(v2, v3, 'purple');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":446,"params":[{"name":"x","description":"<p>the x component of the vector to subtract</p>\n","type":"Number"},{"name":"y","description":"<p>the y component of the vector to subtract</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>the z component of the vector to subtract</p>\n","type":"Number","optional":true}],"chainable":1},{"line":523,"params":[{"name":"value","description":"<p>the vector to subtract</p>\n","type":"p5.Vector|Number[]"}],"chainable":1},{"line":2039,"params":[{"name":"v1","description":"<p>a <a href=\"#/p5.Vector\">p5.Vector</a> to subtract from</p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>a <a href=\"#/p5.Vector\">p5.Vector</a> to subtract</p>\n","type":"p5.Vector"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"the resulting <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":547,"description":"<p>Multiplies the vector by a scalar, multiplies the x, y, and z components from a vector, or multiplies\nthe x, y, and z components of two independent vectors. When multiplying a vector by a scalar, the x, y,\nand z components of the vector are all multiplied by the scalar. When multiplying a vector by a vector,\nthe x, y, z components of both vectors are multiplied by each other\n(for example, with two vectors a and b: a.x * b.x, a.y * b.y, a.z * b.z). The static version of this method\ncreates a new <a href=\"#/p5.Vector\">p5.Vector</a> while the non static version acts on the vector\ndirectly. Additionally, you may provide arguments to this function as an array.\nSee the examples for more context.</p>\n","itemtype":"method","name":"mult","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(1, 2, 3);\nv.mult(2);\n// v's components are set to [2, 4, 6]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(1, 2, 3);\nlet v1 = createVector(2, 3, 4);\nv0.mult(v1); // v0's components are set to [2, 6, 12]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(1, 2, 3);\n// Provide arguments as an array\nlet arr = [2, 3, 4];\nv0.mult(arr); // v0's components are set to [2, 6, 12]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(1, 2, 3);\nlet v1 = createVector(2, 3, 4);\nconst result = p5.Vector.mult(v0, v1);\nprint(result); // result's components are set to [2, 6, 12]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(1, 2, 3);\nlet v2 = p5.Vector.mult(v1, 2);\n// v2 has components [2, 4, 6]\nprint(v2);\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(25, -25);\n  drawArrow(v0, v1, 'red');\n\n  let num = map(mouseX, 0, width, -2, 2, true);\n  let v2 = p5.Vector.mult(v1, num);\n  drawArrow(v0, v2, 'blue');\n\n  noStroke();\n  text('multiplied by ' + num.toFixed(2), 5, 90);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":547,"params":[{"name":"n","description":"<p>The number to multiply with the vector</p>\n","type":"Number"}],"chainable":1},{"line":640,"params":[{"name":"x","description":"<p>The number to multiply with the x component of the vector</p>\n","type":"Number"},{"name":"y","description":"<p>The number to multiply with the y component of the vector</p>\n","type":"Number"},{"name":"z","description":"<p>The number to multiply with the z component of the vector</p>\n","type":"Number","optional":true}],"chainable":1},{"line":648,"params":[{"name":"arr","description":"<p>The array to multiply with the components of the vector</p>\n","type":"Number[]"}],"chainable":1},{"line":654,"params":[{"name":"v","description":"<p>The vector to multiply with the components of the original vector</p>\n","type":"p5.Vector"}],"chainable":1},{"line":2068,"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 <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}},{"line":2077,"params":[{"name":"v","description":"","type":"p5.Vector"},{"name":"n","description":"","type":"Number"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1},{"line":2085,"params":[{"name":"v0","description":"","type":"p5.Vector"},{"name":"v1","description":"","type":"p5.Vector"},{"name":"target","description":"","type":"p5.Vector","optional":true}],"static":1},{"line":2093,"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":739,"description":"<p>Divides the vector by a scalar, divides a vector by the x, y, and z arguments, or divides the x, y, and\nz components of two vectors against each other. When dividing a vector by a scalar, the x, y,\nand z components of the vector are all divided by the scalar. When dividing a vector by a vector,\nthe x, y, z components of the source vector are treated as the dividend, and the x, y, z components\nof the argument is treated as the divisor (for example with two vectors a and b: a.x / b.x, a.y / b.y, a.z / b.z).\nThe static version of this method creates a\nnew <a href=\"#/p5.Vector\">p5.Vector</a> while the non static version acts on the vector directly.\nAdditionally, you may provide arguments to this function as an array.\nSee the examples for more context.</p>\n","itemtype":"method","name":"div","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(6, 4, 2);\nv.div(2); //v's components are set to [3, 2, 1]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(9, 4, 2);\nlet v1 = createVector(3, 2, 4);\nv0.div(v1); // v0's components are set to [3, 2, 0.5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(9, 4, 2);\n// Provide arguments as an array\nlet arr = [3, 2, 4];\nv0.div(arr); // v0's components are set to [3, 2, 0.5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(9, 4, 2);\nlet v1 = createVector(3, 2, 4);\nlet result = p5.Vector.div(v0, v1);\nprint(result); // result's components are set to [3, 2, 0.5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(6, 4, 2);\nlet v2 = p5.Vector.div(v1, 2);\n// v2 has components [3, 2, 1]\nprint(v2);\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 100);\n  let v1 = createVector(50, -50);\n  drawArrow(v0, v1, 'red');\n\n  let num = map(mouseX, 0, width, 10, 0.5, true);\n  let v2 = p5.Vector.div(v1, num);\n  drawArrow(v0, v2, 'blue');\n\n  noStroke();\n  text('divided by ' + num.toFixed(2), 10, 90);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":739,"params":[{"name":"n","description":"<p>The number to divide the vector by</p>\n","type":"Number"}],"chainable":1},{"line":832,"params":[{"name":"x","description":"<p>The number to divide with the x component of the vector</p>\n","type":"Number"},{"name":"y","description":"<p>The number to divide with the y component of the vector</p>\n","type":"Number"},{"name":"z","description":"<p>The number to divide with the z component of the vector</p>\n","type":"Number","optional":true}],"chainable":1},{"line":840,"params":[{"name":"arr","description":"<p>The array to divide the components of the vector by</p>\n","type":"Number[]"}],"chainable":1},{"line":846,"params":[{"name":"v","description":"<p>The vector to divide the components of the original vector by</p>\n","type":"p5.Vector"}],"chainable":1},{"line":2120,"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 <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}},{"line":2129,"params":[{"name":"v","description":"","type":"p5.Vector"},{"name":"n","description":"","type":"Number"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1},{"line":2137,"params":[{"name":"v0","description":"","type":"p5.Vector"},{"name":"v1","description":"","type":"p5.Vector"},{"name":"target","description":"","type":"p5.Vector","optional":true}],"static":1},{"line":2145,"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":944,"description":"<p>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).)</p>\n","itemtype":"method","name":"mag","return":{"description":"magnitude of the vector","type":"Number"},"example":["\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'black');\n\n  noStroke();\n  text('vector length: ' + v1.mag().toFixed(2), 10, 70, 90, 30);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>\n<div class=\"norender\">\n<code>\nlet v = createVector(20.0, 30.0, 40.0);\nlet m = v.mag();\nprint(m); // Prints \"53.85164807134504\"\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":944,"params":[],"return":{"description":"magnitude of the vector","type":"Number"}},{"line":2241,"params":[{"name":"vecT","description":"<p>the vector to return the magnitude of</p>\n","type":"p5.Vector"}],"static":1,"return":{"description":"the magnitude of vecT","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":992,"description":"<p>Calculates the squared magnitude of the vector and returns the result\nas a float (this is simply the equation <em>(x*x + y*y + z*z)</em>.)\nFaster if the real length is not required in the\ncase of comparing vectors, etc.</p>\n","itemtype":"method","name":"magSq","return":{"description":"squared magnitude of the vector","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(6, 4, 2);\nprint(v1.magSq()); // Prints \"56\"\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'black');\n\n  noStroke();\n  text('vector length squared: ' + v1.magSq().toFixed(2), 10, 45, 90, 55);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1046,"description":"<p>Calculates the dot product of two vectors. The version of the method\nthat computes the dot product of two independent vectors is a static\nmethod. See the examples for more context.</p>\n","itemtype":"method","name":"dot","return":{"description":"the dot product","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 2, 3);\nlet v2 = createVector(2, 3, 4);\n\nprint(v1.dot(v2)); // Prints \"20\"\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n//Static method\nlet v1 = createVector(1, 2, 3);\nlet v2 = createVector(3, 2, 1);\nprint(p5.Vector.dot(v1, v2)); // Prints \"10\"\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1046,"params":[{"name":"x","description":"<p>x component of the vector</p>\n","type":"Number"},{"name":"y","description":"<p>y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>z component of the vector</p>\n","type":"Number","optional":true}],"return":{"description":"the dot product","type":"Number"}},{"line":1076,"params":[{"name":"value","description":"<p>value component of the vector or a <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"return":{"description":"","type":"Number"}},{"line":2172,"params":[{"name":"v1","description":"<p>the first <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>the second <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"static":1,"return":{"description":"the dot product","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":1088,"description":"<p>Calculates and returns a vector composed of the cross product between\ntwo vectors. Both the static and non static methods return a new <a href=\"#/p5.Vector\">p5.Vector</a>.\nSee the examples for more context.</p>\n","itemtype":"method","name":"cross","return":{"description":"<a href=\"#/p5.Vector\">p5.Vector</a> composed of cross product","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 2, 3);\nlet v2 = createVector(1, 2, 3);\n\nlet v = v1.cross(v2); // v's components are [0, 0, 0]\nprint(v);\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(1, 0, 0);\nlet v2 = createVector(0, 1, 0);\n\nlet crossProduct = p5.Vector.cross(v1, v2);\n// crossProduct has components [0, 0, 1]\nprint(crossProduct);\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1088,"params":[{"name":"v","description":"<p><a href=\"#/p5.Vector\">p5.Vector</a> to be crossed</p>\n","type":"p5.Vector"}],"return":{"description":"<a href=\"#/p5.Vector\">p5.Vector</a> composed of cross product","type":"p5.Vector"}},{"line":2186,"params":[{"name":"v1","description":"<p>the first <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>the second <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"static":1,"return":{"description":"the cross product","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":1130,"description":"<p>Calculates the Euclidean distance between two points (considering a\npoint as a vector object).</p>\n","itemtype":"method","name":"dist","return":{"description":"the distance","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 0, 0);\nlet v2 = createVector(0, 1, 0);\n\nlet distance = v1.dist(v2); // distance is 1.4142...\nprint(distance);\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(1, 0, 0);\nlet v2 = createVector(0, 1, 0);\n\nlet distance = p5.Vector.dist(v1, v2);\n// distance is 1.4142...\nprint(distance);\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n\n  let v1 = createVector(70, 50);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(mouseX, mouseY);\n  drawArrow(v0, v2, 'blue');\n\n  noStroke();\n  text('distance between vectors: ' + v2.dist(v1).toFixed(2), 5, 50, 95, 50);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1130,"params":[{"name":"v","description":"<p>the x, y, and z coordinates of a <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"return":{"description":"the distance","type":"Number"}},{"line":2201,"params":[{"name":"v1","description":"<p>the first <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>the second <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"static":1,"return":{"description":"the distance","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":1201,"description":"<p>Normalize the vector to length 1 (make it a unit vector).</p>\n","itemtype":"method","name":"normalize","return":{"description":"normalized <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(10, 20, 2);\n// v has components [10.0, 20.0, 2.0]\nv.normalize();\n// v's components are set to\n// [0.4454354, 0.8908708, 0.089087084]\n</code>\n</div>\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(mouseX - 50, mouseY - 50);\n\n  drawArrow(v0, v1, 'red');\n  v1.normalize();\n  drawArrow(v0, v1.mult(35), 'blue');\n\n  noFill();\n  ellipse(50, 50, 35 * 2);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1257,"description":"<p>Limit the magnitude of this vector to the value used for the <b>max</b>\nparameter.</p>\n","itemtype":"method","name":"limit","params":[{"name":"max","description":"<p>the maximum magnitude for the vector</p>\n","type":"Number"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(10, 20, 2);\n// v has components [10.0, 20.0, 2.0]\nv.limit(5);\n// v's components are set to\n// [2.2271771, 4.4543543, 0.4454354]\n</code>\n</div>\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(mouseX - 50, mouseY - 50);\n\n  drawArrow(v0, v1, 'red');\n  drawArrow(v0, v1.limit(35), 'blue');\n\n  noFill();\n  ellipse(50, 50, 35 * 2);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1315,"description":"<p>Set the magnitude of this vector to the value used for the <b>len</b>\nparameter.</p>\n","itemtype":"method","name":"setMag","params":[{"name":"len","description":"<p>the new length for this vector</p>\n","type":"Number"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(10, 20, 2);\n// v has components [10.0, 20.0, 2.0]\nv.setMag(10);\n// v's components are set to [6.0, 8.0, 0.0]\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(50, 50);\n\n  drawArrow(v0, v1, 'red');\n\n  let length = map(mouseX, 0, width, 0, 141, true);\n  v1.setMag(length);\n  drawArrow(v0, v1, 'blue');\n\n  noStroke();\n  text('magnitude set to: ' + length.toFixed(2), 10, 70, 90, 30);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1371,"description":"<p>Calculate the angle of rotation for this vector(only 2D vectors).\np5.Vectors created using <a src=\"#/p5/createVector\">createVector()</a>\nwill take the current <a = src=\"#/p5/angleMode\">angleMode</a> into consideration, and give the angle\nin radians or degree accordingly.</p>\n","itemtype":"method","name":"heading","return":{"description":"the angle of rotation","type":"Number"},"example":["\n<div class = \"norender\">\n<code>\nfunction setup() {\n  let v1 = createVector(30, 50);\n  print(v1.heading()); // 1.0303768265243125\n\n  v1 = createVector(40, 50);\n  print(v1.heading()); // 0.8960553845713439\n\n  v1 = createVector(30, 70);\n  print(v1.heading()); // 1.1659045405098132\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(mouseX - 50, mouseY - 50);\n\n  drawArrow(v0, v1, 'black');\n\n  let myHeading = v1.heading();\n  noStroke();\n  text(\n    'vector heading: ' +\n      myHeading.toFixed(2) +\n      ' radians or ' +\n      degrees(myHeading).toFixed(2) +\n      ' degrees',\n    10,\n    50,\n    90,\n    50\n  );\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1443,"description":"<p>Rotate the vector by an angle (only 2D vectors), magnitude remains the\nsame</p>\n","itemtype":"method","name":"rotate","params":[{"name":"angle","description":"<p>the angle of rotation</p>\n","type":"Number"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(10.0, 20.0);\n// v has components [10.0, 20.0, 0.0]\nv.rotate(HALF_PI);\n// v's components are set to [-20.0, 9.999999, 0.0]\n</code>\n</div>\n\n<div>\n<code>\nlet angle = 0;\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(50, 0);\n\n  drawArrow(v0, v1.rotate(angle), 'black');\n  angle += 0.01;\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1499,"description":"<p>Calculates and returns the angle (in radians) between two vectors.</p>\n","itemtype":"method","name":"angleBetween","params":[{"name":"value","description":"<p>the x, y, and z components of a <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"return":{"description":"the angle between (in radians)","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 0, 0);\nlet v2 = createVector(0, 1, 0);\n\nlet angle = v1.angleBetween(v2);\n// angle is PI/2\nprint(angle);\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n  let v0 = createVector(50, 50);\n\n  let v1 = createVector(50, 0);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(mouseX - 50, mouseY - 50);\n  drawArrow(v0, v2, 'blue');\n\n  let angleBetween = v1.angleBetween(v2);\n  noStroke();\n  text(\n    'angle between: ' +\n      angleBetween.toFixed(2) +\n      ' radians or ' +\n      degrees(angleBetween).toFixed(2) +\n      ' degrees',\n    10,\n    50,\n    90,\n    50\n  );\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1576,"description":"<p>Linear interpolate the vector to another vector</p>\n","itemtype":"method","name":"lerp","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(1, 1, 0);\n\nv.lerp(3, 3, 0, 0.5); // v now has components [2,2,0]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v1 = createVector(0, 0, 0);\nlet v2 = createVector(100, 100, 0);\n\nlet v3 = p5.Vector.lerp(v1, v2, 0.5);\n// v3 has components [50,50,0]\nprint(v3);\n</code>\n</div>\n\n<div>\n<code>\nlet step = 0.01;\nlet amount = 0;\n\nfunction draw() {\n  background(240);\n  let v0 = createVector(0, 0);\n\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(90, 90);\n  drawArrow(v0, v2, 'blue');\n\n  if (amount > 1 || amount < 0) {\n    step *= -1;\n  }\n  amount += step;\n  let v3 = p5.Vector.lerp(v1, v2, amount);\n\n  drawArrow(v0, v3, 'purple');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1576,"params":[{"name":"x","description":"<p>the x component</p>\n","type":"Number"},{"name":"y","description":"<p>the y component</p>\n","type":"Number"},{"name":"z","description":"<p>the z component</p>\n","type":"Number"},{"name":"amt","description":"<p>the amount of interpolation; some value between 0.0\n                        (old vector) and 1.0 (new vector). 0.9 is very near\n                        the new vector. 0.5 is halfway in between.</p>\n","type":"Number"}],"chainable":1},{"line":1649,"params":[{"name":"v","description":"<p>the <a href=\"#/p5.Vector\">p5.Vector</a> to lerp to</p>\n","type":"p5.Vector"},{"name":"amt","description":"","type":"Number"}],"chainable":1},{"line":2216,"params":[{"name":"v1","description":"","type":"p5.Vector"},{"name":"v2","description":"","type":"p5.Vector"},{"name":"amt","description":"","type":"Number"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"the lerped value","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":1665,"description":"<p>Reflect the incoming vector about a normal to a line in 2D, or about a normal to a plane in 3D\nThis method acts on the vector directly</p>\n","itemtype":"method","name":"reflect","params":[{"name":"surfaceNormal","description":"<p>the <a href=\"#/p5.Vector\">p5.Vector</a> to reflect about, will be normalized by this method</p>\n","type":"p5.Vector"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(4, 6); // incoming vector, this example vector is heading to the right and downward\nlet n = createVector(0, -1); // surface normal to a plane (this example normal points directly upwards)\nv.reflect(n); // v is reflected about the surface normal n.  v's components are now set to [4, -6]\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'red');\n\n  let n = createVector(0, -30);\n  drawArrow(v1, n, 'blue');\n\n  let r = v1.copy();\n  r.reflect(n);\n  drawArrow(v1, r, 'purple');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1720,"description":"<p>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 <b>p5.Vector.<a href=\"#/p5.Vector/copy\">copy()</a></b> method to copy into your own\narray.</p>\n","itemtype":"method","name":"array","return":{"description":"an Array with the 3 values","type":"Number[]"},"example":["\n<div class = \"norender\">\n<code>\nfunction setup() {\n  let v = createVector(20, 30);\n  print(v.array()); // Prints : Array [20, 30, 0]\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v = createVector(10.0, 20.0, 30.0);\nlet f = v.array();\nprint(f[0]); // Prints \"10.0\"\nprint(f[1]); // Prints \"20.0\"\nprint(f[2]); // Prints \"30.0\"\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1752,"description":"<p>Equality check against a <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","itemtype":"method","name":"equals","return":{"description":"whether the vectors are equals","type":"Boolean"},"example":["\n<div class = \"norender\">\n<code>\nlet v1 = createVector(5, 10, 20);\nlet v2 = createVector(5, 10, 20);\nlet v3 = createVector(13, 10, 19);\n\nprint(v1.equals(v2.x, v2.y, v2.z)); // true\nprint(v1.equals(v3.x, v3.y, v3.z)); // false\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v1 = createVector(10.0, 20.0, 30.0);\nlet v2 = createVector(10.0, 20.0, 30.0);\nlet v3 = createVector(0.0, 0.0, 0.0);\nprint(v1.equals(v2)); // true\nprint(v1.equals(v3)); // false\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1752,"params":[{"name":"x","description":"<p>the x component of the vector</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>the y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>the z component of the vector</p>\n","type":"Number","optional":true}],"return":{"description":"whether the vectors are equals","type":"Boolean"}},{"line":1782,"params":[{"name":"value","description":"<p>the vector to compare</p>\n","type":"p5.Vector|Array"}],"return":{"description":"","type":"Boolean"}}]},{"file":"src/math/p5.Vector.js","line":1807,"description":"<p>Make a new 2D vector from an angle</p>\n","itemtype":"method","name":"fromAngle","static":1,"params":[{"name":"angle","description":"<p>the desired angle, in radians (unaffected by <a href=\"#/p5/angleMode\">angleMode</a>)</p>\n","type":"Number"},{"name":"length","description":"<p>the length of the new vector (defaults to 1)</p>\n","type":"Number","optional":true}],"return":{"description":"the new <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div>\n<code>\nfunction draw() {\n  background(200);\n\n  // Create a variable, proportional to the mouseX,\n  // varying from 0-360, to represent an angle in degrees.\n  let myDegrees = map(mouseX, 0, width, 0, 360);\n\n  // Display that variable in an onscreen text.\n  // (Note the nfc() function to truncate additional decimal places,\n  // and the \"\\xB0\" character for the degree symbol.)\n  let readout = 'angle = ' + nfc(myDegrees, 1) + '\\xB0';\n  noStroke();\n  fill(0);\n  text(readout, 5, 15);\n\n  // Create a p5.Vector using the fromAngle function,\n  // and extract its x and y components.\n  let v = p5.Vector.fromAngle(radians(myDegrees), 30);\n  let vx = v.x;\n  let vy = v.y;\n\n  push();\n  translate(width / 2, height / 2);\n  noFill();\n  stroke(150);\n  line(0, 0, 30, 0);\n  stroke(0);\n  line(0, 0, vx, vy);\n  pop();\n}\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1858,"description":"<p>Make a new 3D vector from a pair of ISO spherical angles</p>\n","itemtype":"method","name":"fromAngles","static":1,"params":[{"name":"theta","description":"<p>the polar angle, in radians (zero is up)</p>\n","type":"Number"},{"name":"phi","description":"<p>the azimuthal angle, in radians\n                              (zero is out of the screen)</p>\n","type":"Number"},{"name":"length","description":"<p>the length of the new vector (defaults to 1)</p>\n","type":"Number","optional":true}],"return":{"description":"the new <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  fill(255);\n  noStroke();\n}\nfunction draw() {\n  background(255);\n\n  let t = millis() / 1000;\n\n  // add three point lights\n  pointLight(color('#f00'), p5.Vector.fromAngles(t * 1.0, t * 1.3, 100));\n  pointLight(color('#0f0'), p5.Vector.fromAngles(t * 1.1, t * 1.2, 100));\n  pointLight(color('#00f'), p5.Vector.fromAngles(t * 1.2, t * 1.1, 100));\n\n  sphere(35);\n}\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1907,"description":"<p>Make a new 2D unit vector from a random angle</p>\n","itemtype":"method","name":"random2D","static":1,"return":{"description":"the new <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v = p5.Vector.random2D();\n// May make v's attributes something like:\n// [0.61554617, -0.51195765, 0.0] or\n// [-0.4695841, -0.14366731, 0.0] or\n// [0.6091097, -0.22805278, 0.0]\nprint(v);\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  frameRate(1);\n}\n\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = p5.Vector.random2D();\n  drawArrow(v0, v1.mult(50), 'black');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1960,"description":"<p>Make a new random 3D unit vector.</p>\n","itemtype":"method","name":"random3D","static":1,"return":{"description":"the new <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v = p5.Vector.random3D();\n// May make v's attributes something like:\n// [0.61554617, -0.51195765, 0.599168] or\n// [-0.4695841, -0.14366731, -0.8711202] or\n// [0.6091097, -0.22805278, -0.7595902]\nprint(v);\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2064,"description":"<p>Multiplies a vector by a scalar and returns a new vector.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2116,"description":"<p>Divides a vector by a scalar and returns a new vector.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2169,"description":"<p>Calculates the dot product of two vectors.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2183,"description":"<p>Calculates the cross product of two vectors.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2197,"description":"<p>Calculates the Euclidean distance between two points (considering a\npoint as a vector object).</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2212,"description":"<p>Linear interpolate a vector to another vector and return the result as a\nnew vector.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/random.js","line":37,"description":"<p>Sets the seed value for <a href=\"#/p5/random\">random()</a>.</p>\n<p>By default, <a href=\"#/p5/random\">random()</a> produces different results each time the program\nis run. Set the seed parameter to a constant to return the same\npseudo-random numbers each time the software is run.</p>\n","itemtype":"method","name":"randomSeed","params":[{"name":"seed","description":"<p>the seed value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nrandomSeed(99);\nfor (let i = 0; i < 100; i++) {\n  let r = random(0, 255);\n  stroke(r);\n  line(i, 0, i, 100);\n}\n</code>\n</div>"],"alt":"many vertical lines drawn in white, black or grey.","class":"p5","module":"Math","submodule":"Random"},{"file":"src/math/random.js","line":66,"description":"<p>Return a random floating-point number.</p>\n<p>Takes either 0, 1 or 2 arguments.</p>\n<p>If no argument is given, returns a random number from 0\nup to (but not including) 1.</p>\n<p>If one argument is given and it is a number, returns a random number from 0\nup to (but not including) the number.</p>\n<p>If one argument is given and it is an array, returns a random element from\nthat array.</p>\n<p>If two arguments are given, returns a random number from the\nfirst argument up to (but not including) the second argument.</p>\n","itemtype":"method","name":"random","return":{"description":"the random number","type":"Number"},"example":["\n<div>\n<code>\nfor (let i = 0; i < 100; i++) {\n  let r = random(50);\n  stroke(r * 5);\n  line(50, i, 50 + r, i);\n}\n</code>\n</div>\n<div>\n<code>\nfor (let i = 0; i < 100; i++) {\n  let r = random(-50, 50);\n  line(50, i, 50 + r, i);\n}\n</code>\n</div>\n<div>\n<code>\n// Get a random element from an array using the random(Array) syntax\nlet words = ['apple', 'bear', 'cat', 'dog'];\nlet word = random(words); // select random word\ntext(word, 10, 50); // draw the word\n</code>\n</div>"],"alt":"100 horizontal lines from center canvas to right. size+fill change each time\n100 horizontal lines from center of canvas. height & side change each render\nword displayed at random. Either apple, bear, cat, or dog","class":"p5","module":"Math","submodule":"Random","overloads":[{"line":66,"params":[{"name":"min","description":"<p>the lower bound (inclusive)</p>\n","type":"Number","optional":true},{"name":"max","description":"<p>the upper bound (exclusive)</p>\n","type":"Number","optional":true}],"return":{"description":"the random number","type":"Number"}},{"line":119,"params":[{"name":"choices","description":"<p>the array to choose from</p>\n","type":"Array"}],"return":{"description":"the random element from the array","type":"*"}}]},{"file":"src/math/random.js","line":153,"description":"<p>Returns a random number fitting a Gaussian, or\n normal, distribution. There is theoretically no minimum or maximum\n value that <a href=\"#/p5/randomGaussian\">randomGaussian()</a> might return. Rather, there is\n just a very low probability that values far from the mean will be\n returned; and a higher probability that numbers near the mean will\n be returned.\nTakes either 0, 1 or 2 arguments.<br>\n If no args, returns a mean of 0 and standard deviation of 1.<br>\n If one arg, that arg is the mean (standard deviation is 1).<br>\n If two args, first is mean, second is standard deviation.</p>\n","itemtype":"method","name":"randomGaussian","params":[{"name":"mean","description":"<p>the mean</p>\n","type":"Number"},{"name":"sd","description":"<p>the standard deviation</p>\n","type":"Number"}],"return":{"description":"the random number","type":"Number"},"example":["\n <div>\n <code>\n for (let y = 0; y < 100; y++) {\n   let x = randomGaussian(50, 15);\n   line(50, y, x, y);\n }\n </code>\n </div>\n <div>\n <code>\n let distribution = new Array(360);\nfunction setup() {\n   createCanvas(100, 100);\n   for (let i = 0; i < distribution.length; i++) {\n     distribution[i] = floor(randomGaussian(0, 15));\n   }\n }\nfunction draw() {\n   background(204);\n  translate(width / 2, width / 2);\n  for (let i = 0; i < distribution.length; i++) {\n     rotate(TWO_PI / distribution.length);\n     stroke(0);\n     let dist = abs(distribution[i]);\n     line(0, 0, dist, 0);\n   }\n }\n </code>\n </div>"],"alt":"100 horizontal lines from center of canvas. height & side change each render\n black lines radiate from center of canvas. size determined each render","class":"p5","module":"Math","submodule":"Random"},{"file":"src/math/trigonometry.js","line":18,"description":"<p>The inverse of <a href=\"#/p5/cos\">cos()</a>, returns the arc cosine of a value.\nThis function expects the values in the range of -1 to 1 and values are returned in\nthe range 0 to PI (3.1415927) if the angleMode is RADIANS or 0 to 180 if the\nangle mode is DEGREES.</p>\n","itemtype":"method","name":"acos","params":[{"name":"value","description":"<p>the value whose arc cosine is to be returned</p>\n","type":"Number"}],"return":{"description":"the arc cosine of the given value","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet a = PI;\nlet c = cos(a);\nlet ac = acos(c);\n// Prints: \"3.1415927 : -1.0 : 3.1415927\"\nprint(a + ' : ' + c + ' : ' + ac);\n</code>\n</div>\n\n<div class= “norender\">\n<code>\nlet a = PI + PI / 4.0;\nlet c = cos(a);\nlet ac = acos(c);\n// Prints: \"3.926991 : -0.70710665 : 2.3561943\"\nprint(a + ' : ' + c + ' : ' + ac);\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":53,"description":"<p>The inverse of <a href=\"#/p5/sin\">sin()</a>, returns the arc sine of a value.\nThis function expects the values in the range of -1 to 1 and values are returned\nin the range -PI/2 to PI/2 if the angleMode is RADIANS or -90 to 90 if the angle\nmode is DEGREES.</p>\n","itemtype":"method","name":"asin","params":[{"name":"value","description":"<p>the value whose arc sine is to be returned</p>\n","type":"Number"}],"return":{"description":"the arc sine of the given value","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet a = PI / 3.0;\nlet s = sin(a);\nlet as = asin(s);\n// Prints: \"1.0471975 : 0.86602540 : 1.0471975\"\nprint(a + ' : ' + s + ' : ' + as);\n</code>\n</div>\n\n<div class= “norender\">\n<code>\nlet a = PI + PI / 3.0;\nlet s = sin(a);\nlet as = asin(s);\n// Prints: \"4.1887902 : -0.86602540 : -1.0471975\"\nprint(a + ' : ' + s + ' : ' + as);\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":88,"description":"<p>The inverse of <a href=\"#/p5/tan\">tan()</a>, returns the arc tangent of a value.\nThis function expects the values in the range of -Infinity to Infinity (exclusive) and\nvalues are returned in the range -PI/2 to PI/2 if the angleMode is RADIANS or\n-90 to 90 if the angle mode is DEGREES.</p>\n","itemtype":"method","name":"atan","params":[{"name":"value","description":"<p>the value whose arc tangent is to be returned</p>\n","type":"Number"}],"return":{"description":"the arc tangent of the given value","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet a = PI / 3.0;\nlet t = tan(a);\nlet at = atan(t);\n// Prints: \"1.0471975 : 1.7320508 : 1.0471975\"\nprint(a + ' : ' + t + ' : ' + at);\n</code>\n</div>\n\n<div class= “norender\">\n<code>\nlet a = PI + PI / 3.0;\nlet t = tan(a);\nlet at = atan(t);\n// Prints: \"4.1887902 : 1.7320508 : 1.0471975\"\nprint(a + ' : ' + t + ' : ' + at);\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":123,"description":"<p>Calculates the angle (in radians) from a specified point to the coordinate\norigin as measured from the positive x-axis. Values are returned as a\nfloat in the range from PI to -PI if the angleMode is RADIANS or 180 to\n-180 if the angleMode is DEGREES. The atan2<a href=\"#/p5/\">()</a> function is\nmost often used for orienting geometry to the position of the cursor.</p>\n<p>Note: The y-coordinate of the point is the first parameter, and the\nx-coordinate is the second parameter, due the the structure of calculating\nthe tangent.</p>\n","itemtype":"method","name":"atan2","params":[{"name":"y","description":"<p>y-coordinate of the point</p>\n","type":"Number"},{"name":"x","description":"<p>x-coordinate of the point</p>\n","type":"Number"}],"return":{"description":"the arc tangent of the given point","type":"Number"},"example":["\n<div>\n<code>\nfunction draw() {\n  background(204);\n  translate(width / 2, height / 2);\n  let a = atan2(mouseY - height / 2, mouseX - width / 2);\n  rotate(a);\n  rect(-30, -5, 60, 10);\n}\n</code>\n</div>"],"alt":"60 by 10 rect at center of canvas rotates with mouse movements","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":159,"description":"<p>Calculates the cosine of an angle. This function takes into account the\ncurrent <a href=\"#/p5/angleMode\">angleMode</a>. Values are returned in the range -1 to 1.</p>\n","itemtype":"method","name":"cos","params":[{"name":"angle","description":"<p>the angle</p>\n","type":"Number"}],"return":{"description":"the cosine of the angle","type":"Number"},"example":["\n<div>\n<code>\nlet a = 0.0;\nlet inc = TWO_PI / 25.0;\nfor (let i = 0; i < 25; i++) {\n  line(i * 4, 50, i * 4, 50 + cos(a) * 40.0);\n  a = a + inc;\n}\n</code>\n</div>"],"alt":"vertical black lines form wave patterns, extend-down on left and right side","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":186,"description":"<p>Calculates the sine of an angle. This function takes into account the\ncurrent <a href=\"#/p5/angleMode\">angleMode</a>. Values are returned in the range -1 to 1.</p>\n","itemtype":"method","name":"sin","params":[{"name":"angle","description":"<p>the angle</p>\n","type":"Number"}],"return":{"description":"the sine of the angle","type":"Number"},"example":["\n<div>\n<code>\nlet a = 0.0;\nlet inc = TWO_PI / 25.0;\nfor (let i = 0; i < 25; i++) {\n  line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);\n  a = a + inc;\n}\n</code>\n</div>"],"alt":"vertical black lines extend down and up from center to form wave pattern","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":213,"description":"<p>Calculates the tangent of an angle. This function takes into account\nthe current <a href=\"#/p5/angleMode\">angleMode</a>. Values are returned in the range of all real numbers.</p>\n","itemtype":"method","name":"tan","params":[{"name":"angle","description":"<p>the angle</p>\n","type":"Number"}],"return":{"description":"the tangent of the angle","type":"Number"},"example":["\n<div>\n<code>\nlet a = 0.0;\nlet inc = TWO_PI / 50.0;\nfor (let i = 0; i < 100; i = i + 2) {\n  line(i, 50, i, 50 + tan(a) * 2.0);\n  a = a + inc;\n}\n</code>"],"alt":"vertical black lines end down and up from center to form spike pattern","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":239,"description":"<p>Converts a radian measurement to its corresponding value in degrees.\nRadians and degrees are two ways of measuring the same thing. There are\n360 degrees in a circle and 2*PI radians in a circle. For example,\n90° = PI/2 = 1.5707964. This function does not take into account the\ncurrent <a href=\"#/p5/angleMode\">angleMode</a>.</p>\n","itemtype":"method","name":"degrees","params":[{"name":"radians","description":"<p>the radians value to convert to degrees</p>\n","type":"Number"}],"return":{"description":"the converted angle","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet rad = PI / 4;\nlet deg = degrees(rad);\nprint(rad + ' radians is ' + deg + ' degrees');\n// Prints: 0.7853981633974483 radians is 45 degrees\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":262,"description":"<p>Converts a degree measurement to its corresponding value in radians.\nRadians and degrees are two ways of measuring the same thing. There are\n360 degrees in a circle and 2*PI radians in a circle. For example,\n90° = PI/2 = 1.5707964. This function does not take into account the\ncurrent <a href=\"#/p5/angleMode\">angleMode</a>.</p>\n","itemtype":"method","name":"radians","params":[{"name":"degrees","description":"<p>the degree value to convert to radians</p>\n","type":"Number"}],"return":{"description":"the converted angle","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet deg = 45.0;\nlet rad = radians(deg);\nprint(deg + ' degrees is ' + rad + ' radians');\n// Prints: 45 degrees is 0.7853981633974483 radians\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":285,"description":"<p>Sets the current mode of p5 to given mode. Default mode is RADIANS.</p>\n","itemtype":"method","name":"angleMode","params":[{"name":"mode","description":"<p>either RADIANS or DEGREES</p>\n","type":"Constant"}],"example":["\n<div>\n<code>\nfunction draw() {\n  background(204);\n  angleMode(DEGREES); // Change the mode to DEGREES\n  let a = atan2(mouseY - height / 2, mouseX - width / 2);\n  translate(width / 2, height / 2);\n  push();\n  rotate(a);\n  rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees\n  pop();\n  angleMode(RADIANS); // Change the mode to RADIANS\n  rotate(a); // variable a stays the same\n  rect(-40, -5, 20, 10); // Smaller rectangle is rotating in radians\n}\n</code>\n</div>"],"alt":"40 by 10 rect in center rotates with mouse moves. 20 by 10 rect moves faster.","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/typography/attributes.js","line":11,"description":"<p>Sets the current alignment for drawing text. Accepts two\narguments: horizAlign (LEFT, CENTER, or RIGHT) and\nvertAlign (TOP, BOTTOM, CENTER, or BASELINE).</p>\n<p>The horizAlign parameter is in reference to the x value\nof the <a href=\"#/p5/text\">text()</a> function, while the vertAlign parameter\nis in reference to the y value.</p>\n<p>So if you write textAlign(LEFT), you are aligning the left\nedge of your text to the x value you give in <a href=\"#/p5/text\">text()</a>.\nIf you write textAlign(RIGHT, TOP), you are aligning the right edge\nof your text to the x value and the top of edge of the text\nto the y value.</p>\n","itemtype":"method","name":"textAlign","chainable":1,"example":["\n<div>\n<code>\ntextSize(16);\ntextAlign(RIGHT);\ntext('ABCD', 50, 30);\ntextAlign(CENTER);\ntext('EFGH', 50, 50);\ntextAlign(LEFT);\ntext('IJKL', 50, 70);\n</code>\n</div>\n\n<div>\n<code>\ntextSize(16);\nstrokeWeight(0.5);\n\nline(0, 12, width, 12);\ntextAlign(CENTER, TOP);\ntext('TOP', 0, 12, width);\n\nline(0, 37, width, 37);\ntextAlign(CENTER, CENTER);\ntext('CENTER', 0, 37, width);\n\nline(0, 62, width, 62);\ntextAlign(CENTER, BASELINE);\ntext('BASELINE', 0, 62, width);\n\nline(0, 87, width, 87);\ntextAlign(CENTER, BOTTOM);\ntext('BOTTOM', 0, 87, width);\n</code>\n</div>"],"alt":"Letters ABCD displayed at top left, EFGH at center and IJKL at bottom right.\nThe names of the four vertical alignments (TOP, CENTER, BASELINE & BOTTOM) rendered each showing that alignment's placement relative to a horizontal line.","class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":11,"params":[{"name":"horizAlign","description":"<p>horizontal alignment, either LEFT,\n                           CENTER, or RIGHT</p>\n","type":"Constant"},{"name":"vertAlign","description":"<p>vertical alignment, either TOP,\n                           BOTTOM, CENTER, or BASELINE</p>\n","type":"Constant","optional":true}],"chainable":1},{"line":72,"params":[],"return":{"description":"","type":"Object"}}]},{"file":"src/typography/attributes.js","line":81,"description":"<p>Sets/gets the spacing, in pixels, between lines of text. This setting will be\nused in all subsequent calls to the <a href=\"#/p5/text\">text()</a> function.</p>\n","itemtype":"method","name":"textLeading","chainable":1,"example":["\n<div>\n<code>\nlet lines = 'L1\\nL2\\nL3'; // \"\\n\" is a \"new line\" character\ntextSize(12);\n\ntextLeading(10);\ntext(lines, 10, 25);\n\ntextLeading(20);\ntext(lines, 40, 25);\n\ntextLeading(30);\ntext(lines, 70, 25);\n</code>\n</div>"],"alt":"A set of L1 L2 & L3 displayed vertically 3 times. spacing increases for each set","class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":81,"params":[{"name":"leading","description":"<p>the size in pixels for spacing between lines</p>\n","type":"Number"}],"chainable":1},{"line":109,"params":[],"return":{"description":"","type":"Number"}}]},{"file":"src/typography/attributes.js","line":118,"description":"<p>Sets/gets the current font size. This size will be used in all subsequent\ncalls to the <a href=\"#/p5/text\">text()</a> function. Font size is measured in pixels.</p>\n","itemtype":"method","name":"textSize","chainable":1,"example":["\n<div>\n<code>\ntextSize(12);\ntext('Font Size 12', 10, 30);\ntextSize(14);\ntext('Font Size 14', 10, 60);\ntextSize(16);\ntext('Font Size 16', 10, 90);\n</code>\n</div>"],"alt":"'Font Size 12' displayed small, 'Font Size 14' medium & 'Font Size 16' large","class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":118,"params":[{"name":"theSize","description":"<p>the size of the letters in units of pixels</p>\n","type":"Number"}],"chainable":1},{"line":141,"params":[],"return":{"description":"","type":"Number"}}]},{"file":"src/typography/attributes.js","line":150,"description":"<p>Sets/gets the style of the text for system fonts to NORMAL, ITALIC, BOLD or BOLDITALIC.\nNote: this may be is overridden by CSS styling. For non-system fonts\n(opentype, truetype, etc.) please load styled fonts instead.</p>\n","itemtype":"method","name":"textStyle","chainable":1,"example":["\n<div>\n<code>\nstrokeWeight(0);\ntextSize(12);\ntextStyle(NORMAL);\ntext('Font Style Normal', 10, 15);\ntextStyle(ITALIC);\ntext('Font Style Italic', 10, 40);\ntextStyle(BOLD);\ntext('Font Style Bold', 10, 65);\ntextStyle(BOLDITALIC);\ntext('Font Style Bold Italic', 10, 90);\n</code>\n</div>"],"alt":"Words Font Style Normal displayed normally, Italic in italic, bold in bold and bold italic in bold italics.","class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":150,"params":[{"name":"theStyle","description":"<p>styling for text, either NORMAL,\n                           ITALIC, BOLD or BOLDITALIC</p>\n","type":"Constant"}],"chainable":1},{"line":178,"params":[],"return":{"description":"","type":"String"}}]},{"file":"src/typography/attributes.js","line":187,"description":"<p>Calculates and returns the width of any character or text string.</p>\n","itemtype":"method","name":"textWidth","params":[{"name":"theText","description":"<p>the String of characters to measure</p>\n","type":"String"}],"return":{"description":"the calculated width","type":"Number"},"example":["\n<div>\n<code>\ntextSize(28);\n\nlet aChar = 'P';\nlet cWidth = textWidth(aChar);\ntext(aChar, 0, 40);\nline(cWidth, 0, cWidth, 50);\n\nlet aString = 'p5.js';\nlet sWidth = textWidth(aString);\ntext(aString, 0, 85);\nline(sWidth, 50, sWidth, 100);\n</code>\n</div>"],"alt":"Letter P and p5.js are displayed with vertical lines at end.","class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/attributes.js","line":222,"description":"<p>Returns the ascent of the current font at its current size. The ascent\nrepresents the distance, in pixels, of the tallest character above\nthe baseline.</p>\n","itemtype":"method","name":"textAscent","return":{"description":"","type":"Number"},"example":["\n<div>\n<code>\nlet base = height * 0.75;\nlet scalar = 0.8; // Different for each font\n\ntextSize(32); // Set initial text size\nlet asc = textAscent() * scalar; // Calc ascent\nline(0, base - asc, width, base - asc);\ntext('dp', 0, base); // Draw text on baseline\n\ntextSize(64); // Increase text size\nasc = textAscent() * scalar; // Recalc ascent\nline(40, base - asc, width, base - asc);\ntext('dp', 40, base); // Draw text on baseline\n</code>\n</div>"],"class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/attributes.js","line":251,"description":"<p>Returns the descent of the current font at its current size. The descent\nrepresents the distance, in pixels, of the character with the longest\ndescender below the baseline.</p>\n","itemtype":"method","name":"textDescent","return":{"description":"","type":"Number"},"example":["\n<div>\n<code>\nlet base = height * 0.75;\nlet scalar = 0.8; // Different for each font\n\ntextSize(32); // Set initial text size\nlet desc = textDescent() * scalar; // Calc ascent\nline(0, base + desc, width, base + desc);\ntext('dp', 0, base); // Draw text on baseline\n\ntextSize(64); // Increase text size\ndesc = textDescent() * scalar; // Recalc ascent\nline(40, base + desc, width, base + desc);\ntext('dp', 40, base); // Draw text on baseline\n</code>\n</div>"],"class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/attributes.js","line":280,"description":"<p>Helper function to measure ascent and descent.</p>\n","class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/loading_displaying.js","line":16,"description":"<p>Loads an opentype font file (.otf, .ttf) from a file or a URL,\nand returns a PFont Object. This method is asynchronous,\nmeaning it may not finish before the next line in your sketch\nis executed.</p>\n<p>The path to the font should be relative to the HTML file\nthat links in your sketch. Loading fonts from a URL or other\nremote location may be blocked due to your browser's built-in\nsecurity.</p>\n","itemtype":"method","name":"loadFont","params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/loadFont\">loadFont()</a> completes</p>\n","type":"Function","optional":true},{"name":"onError","description":"<p>function to be executed if\n                                   an error occurs</p>\n","type":"Function","optional":true}],"return":{"description":"<a href=\"#/p5.Font\">p5.Font</a> object","type":"p5.Font"},"example":["\n\nCalling loadFont() inside <a href=\"#/p5/preload\">preload()</a> guarantees\nthat the load operation will have completed before <a href=\"#/p5/setup\">setup()</a>\nand <a href=\"#/p5/draw\">draw()</a> are called.\n\n<div><code>\nlet myFont;\nfunction preload() {\n  myFont = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n  fill('#ED225D');\n  textFont(myFont);\n  textSize(36);\n  text('p5*js', 10, 50);\n}\n</code></div>\n\nOutside of <a href=\"#/p5/preload\">preload()</a>, you may supply a\ncallback function to handle the object:\n\n<div><code>\nfunction setup() {\n  loadFont('assets/inconsolata.otf', drawText);\n}\n\nfunction drawText(font) {\n  fill('#ED225D');\n  textFont(font, 36);\n  text('p5*js', 10, 50);\n}\n</code></div>\n\nYou can also use the font filename string (without the file extension) to\nstyle other HTML elements.\n\n<div><code>\nfunction preload() {\n  loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n  let myDiv = createDiv('hello there');\n  myDiv.style('font-family', 'Inconsolata');\n}\n</code></div>"],"alt":"p5*js in p5's theme dark pink\np5*js in p5's theme dark pink","class":"p5","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/loading_displaying.js","line":140,"description":"<p>Draws text to the screen. Displays the information specified in the first\nparameter on the screen in the position specified by the additional\nparameters. A default font will be used unless a font is set with the\n<a href=\"#/p5/textFont\">textFont()</a> function and a default size will be\nused unless a font is set with <a href=\"#/p5/textSize\">textSize()</a>. Change\nthe color of the text with the <a href=\"#/p5/fill\">fill()</a> function. Change\nthe outline of the text with the <a href=\"#/p5/stroke\">stroke()</a> and\n<a href=\"#/p5/strokeWeight\">strokeWeight()</a> functions.</p>\n<p>The text displays in relation to the <a href=\"#/p5/textAlign\">textAlign()</a>\nfunction, which gives the option to draw to the left, right, and center of the\ncoordinates.</p>\n<p>The x2 and y2 parameters define a rectangular area to display within and\nmay only be used with string data. When these parameters are specified,\nthey are interpreted based on the current <a href=\"#/p5/rectMode\">rectMode()</a>\nsetting. Text that does not fit completely within the rectangle specified will\nnot be drawn to the screen. If x2 and y2 are not specified, the baseline\nalignment is the default, which means that the text will be drawn upwards\nfrom x and y.</p>\n<p><b>WEBGL</b>: Only opentype/truetype fonts are supported. You must load a font\nusing the <a href=\"#/p5/loadFont\">loadFont()</a> method (see the example above).\n<a href=\"#/p5/stroke\">stroke()</a> currently has no effect in webgl mode.</p>\n","itemtype":"method","name":"text","params":[{"name":"str","description":"<p>the alphanumeric\n                                            symbols to be displayed</p>\n","type":"String|Object|Array|Number|Boolean"},{"name":"x","description":"<p>x-coordinate of text</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of text</p>\n","type":"Number"},{"name":"x2","description":"<p>by default, the width of the text box,\n                    see <a href=\"#/p5/rectMode\">rectMode()</a> for more info</p>\n","type":"Number","optional":true},{"name":"y2","description":"<p>by default, the height of the text box,\n                    see <a href=\"#/p5/rectMode\">rectMode()</a> for more info</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\ntextSize(32);\ntext('word', 10, 30);\nfill(0, 102, 153);\ntext('word', 10, 60);\nfill(0, 102, 153, 51);\ntext('word', 10, 90);\n</code>\n</div>\n<div>\n<code>\nlet s = 'The quick brown fox jumped over the lazy dog.';\nfill(50);\ntext(s, 10, 10, 70, 80); // Text wraps within text box\n</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\nlet inconsolata;\nfunction preload() {\n  inconsolata = loadFont('assets/inconsolata.otf');\n}\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  textFont(inconsolata);\n  textSize(width / 3);\n  textAlign(CENTER, CENTER);\n}\nfunction draw() {\n  background(0);\n  let time = millis();\n  rotateX(time / 1000);\n  rotateZ(time / 1234);\n  text('p5.js', 0, 0);\n}\n</code>\n</div>"],"alt":"'word' displayed 3 times going from black, blue to translucent blue\nThe text 'The quick brown fox jumped over the lazy dog' displayed.\nThe text 'p5.js' spinning in 3d","class":"p5","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/loading_displaying.js","line":229,"description":"<p>Sets the current font that will be drawn with the <a href=\"#/p5/text\">text()</a> function.</p>\n<p><b>WEBGL</b>: Only fonts loaded via <a href=\"#/p5/loadFont\">loadFont()</a> are supported.</p>\n","itemtype":"method","name":"textFont","return":{"description":"the current font","type":"Object"},"example":["\n<div>\n<code>\nfill(0);\ntextSize(12);\ntextFont('Georgia');\ntext('Georgia', 12, 30);\ntextFont('Helvetica');\ntext('Helvetica', 12, 60);\n</code>\n</div>\n<div>\n<code>\nlet fontRegular, fontItalic, fontBold;\nfunction preload() {\n  fontRegular = loadFont('assets/Regular.otf');\n  fontItalic = loadFont('assets/Italic.ttf');\n  fontBold = loadFont('assets/Bold.ttf');\n}\nfunction setup() {\n  background(210);\n  fill(0)\n   .strokeWeight(0)\n   .textSize(10);\n  textFont(fontRegular);\n  text('Font Style Normal', 10, 30);\n  textFont(fontItalic);\n  text('Font Style Italic', 10, 50);\n  textFont(fontBold);\n  text('Font Style Bold', 10, 70);\n}\n</code>\n</div>"],"alt":"word 'Georgia' displayed in font Georgia and 'Helvetica' in font Helvetica\nwords Font Style Normal displayed normally, Italic in italic and bold in bold","class":"p5","module":"Typography","submodule":"Loading & Displaying","overloads":[{"line":229,"params":[],"return":{"description":"the current font","type":"Object"}},{"line":275,"params":[{"name":"font","description":"<p>a font loaded via <a href=\"#/p5/loadFont\">loadFont()</a>,\nor a String representing a <a href=\"https://mzl.la/2dOw8WD\">web safe font</a>\n(a font that is generally available across all systems)</p>\n","type":"Object|String"},{"name":"size","description":"<p>the font size to use</p>\n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/typography/p5.Font.js","line":24,"description":"<p>Underlying opentype font implementation</p>\n","itemtype":"property","name":"font","class":"p5.Font","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/p5.Font.js","line":31,"description":"<p>Returns a tight bounding box for the given text string using this\nfont</p>\n","itemtype":"method","name":"textBounds","params":[{"name":"line","description":"<p>a line of text</p>\n","type":"String"},{"name":"x","description":"<p>x-position</p>\n","type":"Number"},{"name":"y","description":"<p>y-position</p>\n","type":"Number"},{"name":"fontSize","description":"<p>font size to use (optional) Default is 12.</p>\n","type":"Number","optional":true},{"name":"options","description":"<p>opentype options (optional)\n                           opentype fonts contains alignment and baseline options.\n                           Default is 'LEFT' and 'alphabetic'</p>\n","type":"Object","optional":true}],"return":{"description":"a rectangle object with properties: x, y, w, h","type":"Object"},"example":["\n<div>\n<code>\nlet font;\nlet textString = 'Lorem ipsum dolor sit amet.';\nfunction preload() {\n  font = loadFont('./assets/Regular.otf');\n}\nfunction setup() {\n  background(210);\n\n  let bbox = font.textBounds(textString, 10, 30, 12);\n  fill(255);\n  stroke(0);\n  rect(bbox.x, bbox.y, bbox.w, bbox.h);\n  fill(0);\n  noStroke();\n\n  textFont(font);\n  textSize(12);\n  text(textString, 10, 30);\n}\n</code>\n</div>"],"alt":"words Lorem ipsum dol go off canvas and contained by white bounding box","class":"p5.Font","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/p5.Font.js","line":175,"description":"<p>Computes an array of points following the path for specified text</p>\n","itemtype":"method","name":"textToPoints","params":[{"name":"txt","description":"<p>a line of text</p>\n","type":"String"},{"name":"x","description":"<p>x-position</p>\n","type":"Number"},{"name":"y","description":"<p>y-position</p>\n","type":"Number"},{"name":"fontSize","description":"<p>font size to use (optional)</p>\n","type":"Number"},{"name":"options","description":"<p>an (optional) object that can contain:</p>\n<p><br>sampleFactor - the ratio of path-length to number of samples\n(default=.1); higher values yield more points and are therefore\nmore precise</p>\n<p><br>simplifyThreshold - if set to a non-zero value, collinear points will be\nbe removed from the polygon; the value represents the threshold angle to use\nwhen determining whether two edges are collinear</p>\n","type":"Object","optional":true}],"return":{"description":"an array of points, each with x, y, alpha (the path angle)","type":"Array"},"example":["\n<div>\n<code>\nlet font;\nfunction preload() {\n  font = loadFont('assets/inconsolata.otf');\n}\n\nlet points;\nlet bounds;\nfunction setup() {\n  createCanvas(100, 100);\n  stroke(0);\n  fill(255, 104, 204);\n\n  points = font.textToPoints('p5', 0, 0, 10, {\n    sampleFactor: 5,\n    simplifyThreshold: 0\n  });\n  bounds = font.textBounds(' p5 ', 0, 0, 10);\n}\n\nfunction draw() {\n  background(255);\n  beginShape();\n  translate(-bounds.x * width / bounds.w, -bounds.y * height / bounds.h);\n  for (let i = 0; i < points.length; i++) {\n    let p = points[i];\n    vertex(\n      p.x * width / bounds.w +\n        sin(20 * p.y / bounds.h + millis() / 1000) * width / 30,\n      p.y * height / bounds.h\n    );\n  }\n  endShape(CLOSE);\n}\n</code>\n</div>"],"class":"p5.Font","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/utilities/array_functions.js","line":10,"description":"<p>Adds a value to the end of an array. Extends the length of\nthe array by one. Maps to Array.push().</p>\n","itemtype":"method","name":"append","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push\">array.push(value)</a> instead.","params":[{"name":"array","description":"<p>Array to append</p>\n","type":"Array"},{"name":"value","description":"<p>to be added to the Array</p>\n","type":"Any"}],"return":{"description":"the array that was appended to","type":"Array"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":35,"description":"<p>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 <a href=\"#/p5/concat\">concat()</a>.</p>\n<p>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).</p>\n<p>Using this function is far more efficient for copying array data than\niterating through a for() loop and copying each element individually.</p>\n","itemtype":"method","name":"arrayCopy","deprecated":true,"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions","overloads":[{"line":35,"params":[{"name":"src","description":"<p>the source Array</p>\n","type":"Array"},{"name":"srcPosition","description":"<p>starting position in the source Array</p>\n","type":"Integer"},{"name":"dst","description":"<p>the destination Array</p>\n","type":"Array"},{"name":"dstPosition","description":"<p>starting position in the destination Array</p>\n","type":"Integer"},{"name":"length","description":"<p>number of Array elements to be copied</p>\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":"<p>Concatenates two arrays, maps to Array.concat(). Does not modify the\ninput arrays.</p>\n","itemtype":"method","name":"concat","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat\">arr1.concat(arr2)</a> instead.","params":[{"name":"a","description":"<p>first Array to concatenate</p>\n","type":"Array"},{"name":"b","description":"<p>second Array to concatenate</p>\n","type":"Array"}],"return":{"description":"concatenated array","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":141,"description":"<p>Reverses the order of an array, maps to Array.reverse()</p>\n","itemtype":"method","name":"reverse","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse\">array.reverse()</a> instead.","params":[{"name":"list","description":"<p>Array to reverse</p>\n","type":"Array"}],"return":{"description":"the reversed list","type":"Array"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":161,"description":"<p>Decreases an array by one element and returns the shortened array,\nmaps to Array.pop().</p>\n","itemtype":"method","name":"shorten","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop\">array.pop()</a> instead.","params":[{"name":"list","description":"<p>Array to shorten</p>\n","type":"Array"}],"return":{"description":"shortened Array","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":185,"description":"<p>Randomizes the order of the elements of an array. Implements\n<a href='http://Bost.Ocks.org/mike/shuffle/' target=_blank>\nFisher-Yates Shuffle Algorithm</a>.</p>\n","itemtype":"method","name":"shuffle","params":[{"name":"array","description":"<p>Array to shuffle</p>\n","type":"Array"},{"name":"bool","description":"<p>modify passed array</p>\n","type":"Boolean","optional":true}],"return":{"description":"shuffled Array","type":"Array"},"example":["\n<div><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":227,"description":"<p>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.</p>\n","itemtype":"method","name":"sort","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort\">array.sort()</a> instead.","params":[{"name":"list","description":"<p>Array to sort</p>\n","type":"Array"},{"name":"count","description":"<p>number of elements to sort, starting from 0</p>\n","type":"Integer","optional":true}],"return":{"description":"the sorted list","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":273,"description":"<p>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.)</p>\n","itemtype":"method","name":"splice","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice\">array.splice()</a> instead.","params":[{"name":"list","description":"<p>Array to splice into</p>\n","type":"Array"},{"name":"value","description":"<p>value to be spliced in</p>\n","type":"Any"},{"name":"position","description":"<p>in the array from which to insert data</p>\n","type":"Integer"}],"return":{"description":"the list","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":308,"description":"<p>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.</p>\n","itemtype":"method","name":"subset","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice\">array.slice()</a> instead.","params":[{"name":"list","description":"<p>Array to extract from</p>\n","type":"Array"},{"name":"start","description":"<p>position to begin</p>\n","type":"Integer"},{"name":"count","description":"<p>number of values to extract</p>\n","type":"Integer","optional":true}],"return":{"description":"Array of extracted elements","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/conversion.js","line":10,"description":"<p>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.</p>\n<p>When an array of values is passed in, then an array of floats of the same\nlength is returned.</p>\n","itemtype":"method","name":"float","params":[{"name":"str","description":"<p>float string to parse</p>\n","type":"String"}],"return":{"description":"floating point representation of string","type":"Number"},"example":["\n<div><code>\nlet str = '20';\nlet diameter = float(str);\nellipse(width / 2, height / 2, diameter, diameter);\n</code></div>\n<div class='norender'><code>\nprint(float('10.31')); // 10.31\nprint(float('Infinity')); // Infinity\nprint(float('-Infinity')); // -Infinity\n</code></div>"],"alt":"20 by 20 white ellipse in the center of the canvas","class":"p5","module":"Data","submodule":"Conversion"},{"file":"src/utilities/conversion.js","line":44,"description":"<p>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.</p>\n","itemtype":"method","name":"int","return":{"description":"integer representation of value","type":"Number"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":44,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Boolean|Number"},{"name":"radix","description":"<p>the radix to convert to (default: 10)</p>\n","type":"Integer","optional":true}],"return":{"description":"integer representation of value","type":"Number"}},{"line":66,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"}],"return":{"description":"integer representation of values","type":"Number[]"}}]},{"file":"src/utilities/conversion.js","line":87,"description":"<p>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.</p>\n","itemtype":"method","name":"str","params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Boolean|Number|Array"}],"return":{"description":"string representation of value","type":"String"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion"},{"file":"src/utilities/conversion.js","line":113,"description":"<p>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.</p>\n","itemtype":"method","name":"boolean","params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Boolean|Number|Array"}],"return":{"description":"boolean representation of value","type":"Boolean"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion"},{"file":"src/utilities/conversion.js","line":145,"description":"<p>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.</p>\n","itemtype":"method","name":"byte","return":{"description":"byte representation of value","type":"Number"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":145,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Boolean|Number"}],"return":{"description":"byte representation of value","type":"Number"}},{"line":167,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"}],"return":{"description":"array of byte representation of values","type":"Number[]"}}]},{"file":"src/utilities/conversion.js","line":181,"description":"<p>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.</p>\n","itemtype":"method","name":"char","return":{"description":"string representation of value","type":"String"},"example":["\n<div class='norender'><code>\nprint(char(65)); // \"A\"\nprint(char('65')); // \"A\"\nprint(char([65, 66, 67])); // [ \"A\", \"B\", \"C\" ]\nprint(join(char([65, 66, 67]), '')); // \"ABC\"\n</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":181,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Number"}],"return":{"description":"string representation of value","type":"String"}},{"line":200,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"}],"return":{"description":"array of string representation of values","type":"String[]"}}]},{"file":"src/utilities/conversion.js","line":215,"description":"<p>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.</p>\n","itemtype":"method","name":"unchar","return":{"description":"integer representation of value","type":"Number"},"example":["\n<div class='norender'><code>\nprint(unchar('A')); // 65\nprint(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]\nprint(unchar(split('ABC', ''))); // [ 65, 66, 67 ]\n</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":215,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String"}],"return":{"description":"integer representation of value","type":"Number"}},{"line":231,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"}],"return":{"description":"integer representation of values","type":"Number[]"}}]},{"file":"src/utilities/conversion.js","line":244,"description":"<p>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.</p>\n","itemtype":"method","name":"hex","return":{"description":"hexadecimal string representation of value","type":"String"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":244,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"Number"},{"name":"digits","description":"","type":"Number","optional":true}],"return":{"description":"hexadecimal string representation of value","type":"String"}},{"line":264,"params":[{"name":"ns","description":"<p>array of values to parse</p>\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":294,"description":"<p>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.</p>\n","itemtype":"method","name":"unhex","return":{"description":"integer representation of hexadecimal value","type":"Number"},"example":["\n<div class='norender'><code>\nprint(unhex('A')); // 10\nprint(unhex('FF')); // 255\nprint(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]\n</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":294,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String"}],"return":{"description":"integer representation of hexadecimal value","type":"Number"}},{"line":310,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"}],"return":{"description":"integer representations of hexadecimal value","type":"Number[]"}}]},{"file":"src/utilities/string_functions.js","line":15,"description":"<p>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 <a href=\"#/p5/nf\">nf()</a> or\nnfs().</p>\n","itemtype":"method","name":"join","params":[{"name":"list","description":"<p>array of Strings to be joined</p>\n","type":"Array"},{"name":"separator","description":"<p>String to be placed between each item</p>\n","type":"String"}],"return":{"description":"joined String","type":"String"},"example":["\n<div>\n<code>\nlet array = ['Hello', 'world!'];\nlet separator = ' ';\nlet message = join(array, separator);\ntext(message, 5, 50);\n</code>\n</div>"],"alt":"\"hello world!\" displayed middle left of canvas.","class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":43,"description":"<p>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.</p>\n<p>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.</p>\n<p>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).</p>\n","itemtype":"method","name":"match","params":[{"name":"str","description":"<p>the String to be searched</p>\n","type":"String"},{"name":"regexp","description":"<p>the regexp to be used for matching</p>\n","type":"String"}],"return":{"description":"Array of Strings found","type":"String[]"},"example":["\n<div>\n<code>\nlet string = 'Hello p5js*!';\nlet regexp = 'p5js\\\\*';\nlet m = match(string, regexp);\ntext(m, 5, 50);\n</code>\n</div>"],"alt":"\"p5js*\" displayed middle left of canvas.","class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":83,"description":"<p>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.</p>\n<p>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.</p>\n<p>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).</p>\n","itemtype":"method","name":"matchAll","params":[{"name":"str","description":"<p>the String to be searched</p>\n","type":"String"},{"name":"regexp","description":"<p>the regexp to be used for matching</p>\n","type":"String"}],"return":{"description":"2d Array of Strings found","type":"String[]"},"example":["\n<div class=\"norender\">\n<code>\nlet string = 'Hello p5js*! Hello world!';\nlet regexp = 'Hello';\nmatchAll(string, regexp);\n</code>\n</div>"],"class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":130,"description":"<p>Utility function for formatting numbers into strings. There are two\nversions: one for formatting floats, and one for formatting ints.\nThe values for the digits, left, and right parameters should always\nbe positive integers.\n(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.\nFor 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.</p>\n","itemtype":"method","name":"nf","return":{"description":"formatted String","type":"String"},"example":["\n<div>\n<code>\nlet myFont;\nfunction preload() {\n  myFont = loadFont('assets/fonts/inconsolata.ttf');\n}\nfunction setup() {\n  background(200);\n  let num1 = 321;\n  let num2 = -1321;\n\n  noStroke();\n  fill(0);\n  textFont(myFont);\n  textSize(22);\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</code>\n</div>"],"alt":"\"0321.00\" middle top, -1321.00\" middle bottom canvas","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":130,"params":[{"name":"num","description":"<p>the Number to format</p>\n","type":"Number|String"},{"name":"left","description":"<p>number of digits to the left of the\n                               decimal point</p>\n","type":"Integer|String","optional":true},{"name":"right","description":"<p>number of digits to the right of the\n                               decimal point</p>\n","type":"Integer|String","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":178,"params":[{"name":"nums","description":"<p>the Numbers to format</p>\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":239,"description":"<p>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.</p>\n","itemtype":"method","name":"nfc","return":{"description":"formatted String","type":"String"},"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"\"11,253,106.115\" top middle and \"1.00,1.00,2.00\" displayed bottom mid","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":239,"params":[{"name":"num","description":"<p>the Number to format</p>\n","type":"Number|String"},{"name":"right","description":"<p>number of digits to the right of the\n                                 decimal point</p>\n","type":"Integer|String","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":277,"params":[{"name":"nums","description":"<p>the Numbers to format</p>\n","type":"Array"},{"name":"right","description":"","type":"Integer|String","optional":true}],"return":{"description":"formatted Strings","type":"String[]"}}]},{"file":"src/utilities/string_functions.js","line":313,"description":"<p>Utility function for formatting numbers into strings. Similar to <a href=\"#/p5/nf\">nf()</a> 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.</p>\n","itemtype":"method","name":"nfp","return":{"description":"formatted String","type":"String"},"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"\"+11253106.11\" top middle and \"-11253106.11\" displayed bottom middle","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":313,"params":[{"name":"num","description":"<p>the Number to format</p>\n","type":"Number"},{"name":"left","description":"<p>number of digits to the left of the decimal\n                               point</p>\n","type":"Integer","optional":true},{"name":"right","description":"<p>number of digits to the right of the\n                               decimal point</p>\n","type":"Integer","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":354,"params":[{"name":"nums","description":"<p>the Numbers to format</p>\n","type":"Number[]"},{"name":"left","description":"","type":"Integer","optional":true},{"name":"right","description":"","type":"Integer","optional":true}],"return":{"description":"formatted Strings","type":"String[]"}}]},{"file":"src/utilities/string_functions.js","line":375,"description":"<p>Utility function for formatting numbers into strings. Similar to <a href=\"#/p5/nf\">nf()</a> but\nputs an additional \"_\" (space) in front of positive numbers just in case to align it with negative\nnumbers which includes \"-\" (minus) sign.\nThe 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.\nThe 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.\nFor 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.</p>\n","itemtype":"method","name":"nfs","return":{"description":"formatted String","type":"String"},"example":["\n<div>\n<code>\nlet myFont;\nfunction preload() {\n  myFont = loadFont('assets/fonts/inconsolata.ttf');\n}\nfunction setup() {\n  background(200);\n  let num1 = 321;\n  let num2 = -1321;\n\n  noStroke();\n  fill(0);\n  textFont(myFont);\n  textSize(22);\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</code>\n</div>"],"alt":"\"0321.00\" top middle and \"-1321.00\" displayed bottom middle","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":375,"params":[{"name":"num","description":"<p>the Number to format</p>\n","type":"Number"},{"name":"left","description":"<p>number of digits to the left of the decimal\n                               point</p>\n","type":"Integer","optional":true},{"name":"right","description":"<p>number of digits to the right of the\n                               decimal point</p>\n","type":"Integer","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":432,"params":[{"name":"nums","description":"<p>the Numbers to format</p>\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":453,"description":"<p>The <a href=\"#/p5/split\">split()</a> 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.</p>\n<p>The <a href=\"#/p5/splitTokens\">splitTokens()</a> function works in a similar fashion, except that it\nsplits using a range of characters instead of a specific character or\nsequence.</p>\n","itemtype":"method","name":"split","params":[{"name":"value","description":"<p>the String to be split</p>\n","type":"String"},{"name":"delim","description":"<p>the String used to separate the data</p>\n","type":"String"}],"return":{"description":"Array of Strings","type":"String[]"},"example":["\n<div>\n<code>\nlet names = 'Pat,Xio,Alex';\nlet splitString = split(names, ',');\ntext(splitString[0], 5, 30);\ntext(splitString[1], 5, 50);\ntext(splitString[2], 5, 70);\n</code>\n</div>"],"alt":"\"pat\" top left, \"Xio\" mid left and \"Alex\" displayed bottom left","class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":486,"description":"<p>The <a href=\"#/p5/splitTokens\">splitTokens()</a> 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.</p>\n<p>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.</p>\n","itemtype":"method","name":"splitTokens","params":[{"name":"value","description":"<p>the String to be split</p>\n","type":"String"},{"name":"delim","description":"<p>list of individual Strings that will be used as\n                         separators</p>\n","type":"String","optional":true}],"return":{"description":"Array of Strings","type":"String[]"},"example":["\n<div class = \"norender\">\n<code>\nfunction setup() {\n  let myStr = 'Mango, Banana, Lime';\n  let myStrArr = splitTokens(myStr, ',');\n\n  print(myStrArr); // prints : [\"Mango\",\" Banana\",\" Lime\"]\n}\n</code>\n</div>"],"class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":539,"description":"<p>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.</p>\n","itemtype":"method","name":"trim","return":{"description":"a trimmed String","type":"String"},"example":["\n<div>\n<code>\nlet string = trim('  No new lines\\n   ');\ntext(string + ' here', 2, 50);\n</code>\n</div>"],"alt":"\"No new lines here\" displayed center canvas","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":539,"params":[{"name":"str","description":"<p>a String to be trimmed</p>\n","type":"String"}],"return":{"description":"a trimmed String","type":"String"}},{"line":559,"params":[{"name":"strs","description":"<p>an Array of Strings to be trimmed</p>\n","type":"Array"}],"return":{"description":"an Array of trimmed Strings","type":"String[]"}}]},{"file":"src/utilities/time_date.js","line":10,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/day\">day()</a> function\nreturns the current day as a value from 1 - 31.</p>\n","itemtype":"method","name":"day","return":{"description":"the current day","type":"Integer"},"example":["\n<div>\n<code>\nlet d = day();\ntext('Current day: \\n' + d, 5, 50);\n</code>\n</div>"],"alt":"Current day is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":31,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/hour\">hour()</a> function\nreturns the current hour as a value from 0 - 23.</p>\n","itemtype":"method","name":"hour","return":{"description":"the current hour","type":"Integer"},"example":["\n<div>\n<code>\nlet h = hour();\ntext('Current hour:\\n' + h, 5, 50);\n</code>\n</div>"],"alt":"Current hour is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":52,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/minute\">minute()</a> function\nreturns the current minute as a value from 0 - 59.</p>\n","itemtype":"method","name":"minute","return":{"description":"the current minute","type":"Integer"},"example":["\n<div>\n<code>\nlet m = minute();\ntext('Current minute: \\n' + m, 5, 50);\n</code>\n</div>"],"alt":"Current minute is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":73,"description":"<p>Returns the number of milliseconds (thousandths of a second) since\nstarting the sketch (when <code>setup()</code> is called). This information is often\nused for timing events and animation sequences.</p>\n","itemtype":"method","name":"millis","return":{"description":"the number of milliseconds since starting the sketch","type":"Number"},"example":["\n<div>\n<code>\nlet millisecond = millis();\ntext('Milliseconds \\nrunning: \\n' + millisecond, 5, 40);\n</code>\n</div>"],"alt":"number of milliseconds since sketch has started displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":100,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/month\">month()</a> function\nreturns the current month as a value from 1 - 12.</p>\n","itemtype":"method","name":"month","return":{"description":"the current month","type":"Integer"},"example":["\n<div>\n<code>\nlet m = month();\ntext('Current month: \\n' + m, 5, 50);\n</code>\n</div>"],"alt":"Current month is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":122,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/second\">second()</a> function\nreturns the current second as a value from 0 - 59.</p>\n","itemtype":"method","name":"second","return":{"description":"the current second","type":"Integer"},"example":["\n<div>\n<code>\nlet s = second();\ntext('Current second: \\n' + s, 5, 50);\n</code>\n</div>"],"alt":"Current second is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":143,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/year\">year()</a> function\nreturns the current year as an integer (2014, 2015, 2016, etc).</p>\n","itemtype":"method","name":"year","return":{"description":"the current year","type":"Integer"},"example":["\n<div>\n<code>\nlet y = year();\ntext('Current year: \\n' + y, 5, 50);\n</code>\n</div>"],"alt":"Current year is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/webgl/3d_primitives.js","line":13,"description":"<p>Draw a plane with given a width and height</p>\n","itemtype":"method","name":"plane","params":[{"name":"width","description":"<p>width of the plane</p>\n","type":"Number","optional":true},{"name":"height","description":"<p>height of the plane</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>Optional number of triangle\n                            subdivisions in x-dimension</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>Optional number of triangle\n                            subdivisions in y-dimension</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a plane\n// with width 50 and height 50\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  plane(50, 50);\n}\n</code>\n</div>"],"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":97,"description":"<p>Draw a box with given width, height and depth</p>\n","itemtype":"method","name":"box","params":[{"name":"width","description":"<p>width of the box</p>\n","type":"Number","optional":true},{"name":"Height","description":"<p>height of the box</p>\n","type":"Number","optional":true},{"name":"depth","description":"<p>depth of the box</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>Optional number of triangle\n                           subdivisions in x-dimension</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>Optional number of triangle\n                           subdivisions in y-dimension</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a spinning box\n// with width, height and depth of 50\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  box(50);\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":215,"description":"<p>Draw a sphere with given radius.</p>\n<p>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.</p>\n","itemtype":"method","name":"sphere","params":[{"name":"radius","description":"<p>radius of circle</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>optional number of subdivisions in x-dimension</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>optional number of subdivisions in y-dimension</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a sphere with radius 40\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(205, 102, 94);\n  sphere(40);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  sphere(40, detailX.value(), 16);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  sphere(40, 16, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":419,"description":"<p>Draw a cylinder with given radius and height</p>\n<p>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.</p>\n","itemtype":"method","name":"cylinder","params":[{"name":"radius","description":"<p>radius of the surface</p>\n","type":"Number","optional":true},{"name":"height","description":"<p>height of the cylinder</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>number of subdivisions in x-dimension;\n                              default is 24</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of subdivisions in y-dimension;\n                              default is 1</p>\n","type":"Integer","optional":true},{"name":"bottomCap","description":"<p>whether to draw the bottom of the cylinder</p>\n","type":"Boolean","optional":true},{"name":"topCap","description":"<p>whether to draw the top of the cylinder</p>\n","type":"Boolean","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a spinning cylinder\n// with radius 20 and height 50\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  cylinder(20, 75, detailX.value(), 1);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  cylinder(20, 75, 16, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":554,"description":"<p>Draw a cone with given radius and height</p>\n<p>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.</p>\n","itemtype":"method","name":"cone","params":[{"name":"radius","description":"<p>radius of the bottom surface</p>\n","type":"Number","optional":true},{"name":"height","description":"<p>height of the cone</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>number of segments,\n                            the more segments the smoother geometry\n                            default is 24</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of segments,\n                            the more segments the smoother geometry\n                            default is 1</p>\n","type":"Integer","optional":true},{"name":"cap","description":"<p>whether to draw the base of the cone</p>\n","type":"Boolean","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a spinning cone\n// with radius 40 and height 70\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateZ(frameCount * 0.01);\n  cone(40, 70);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 102, 94);\n  rotateY(millis() / 1000);\n  cone(30, 65, detailX.value(), 16);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 102, 94);\n  rotateY(millis() / 1000);\n  cone(30, 65, 16, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":669,"description":"<p>Draw an ellipsoid with given radius</p>\n<p>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.</p>\n","itemtype":"method","name":"ellipsoid","params":[{"name":"radiusx","description":"<p>x-radius of ellipsoid</p>\n","type":"Number","optional":true},{"name":"radiusy","description":"<p>y-radius of ellipsoid</p>\n","type":"Number","optional":true},{"name":"radiusz","description":"<p>z-radius of ellipsoid</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>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.</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>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.</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw an ellipsoid\n// with radius 30, 40 and 40.\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(205, 105, 94);\n  ellipsoid(30, 40, 40);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  ellipsoid(30, 40, 40, detailX.value(), 8);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 9);\n  rotateY(millis() / 1000);\n  ellipsoid(30, 40, 40, 12, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":804,"description":"<p>Draw a torus with given radius and tube radius</p>\n<p>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.</p>\n","itemtype":"method","name":"torus","params":[{"name":"radius","description":"<p>radius of the whole ring</p>\n","type":"Number","optional":true},{"name":"tubeRadius","description":"<p>radius of the tube</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>number of segments in x-dimension,\n                               the more segments the smoother geometry\n                               default is 24</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of segments in y-dimension,\n                               the more segments the smoother geometry\n                               default is 16</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a spinning torus\n// with ring radius 30 and tube radius 15\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 102, 94);\n  rotateY(millis() / 1000);\n  torus(30, 15, detailX.value(), 12);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 102, 94);\n  rotateY(millis() / 1000);\n  torus(30, 15, 16, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/interaction.js","line":11,"description":"<p>Allows movement around a 3D sketch using a mouse or trackpad.  Left-clicking\nand dragging will rotate the camera position about the center of the sketch,\nright-clicking and dragging will pan the camera position without rotation,\nand using the mouse wheel (scrolling) will move the camera closer or further\nfrom the center of the sketch. This function can be called with parameters\ndictating sensitivity to mouse movement along the X and Y axes.  Calling\nthis function without parameters is equivalent to calling orbitControl(1,1).\nTo reverse direction of movement in either axis, enter a negative number\nfor sensitivity.</p>\n","itemtype":"method","name":"orbitControl","params":[{"name":"sensitivityX","description":"<p>sensitivity to mouse movement along X axis</p>\n","type":"Number","optional":true},{"name":"sensitivityY","description":"<p>sensitivity to mouse movement along Y axis</p>\n","type":"Number","optional":true},{"name":"sensitivityZ","description":"<p>sensitivity to scroll movement along Z axis</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n}\nfunction draw() {\n  background(200);\n  orbitControl();\n  rotateY(0.5);\n  box(30, 50);\n}\n</code>\n</div>"],"alt":"Camera orbits around a box when mouse is hold-clicked & then moved.","class":"p5","module":"Lights, Camera","submodule":"Interaction"},{"file":"src/webgl/interaction.js","line":145,"description":"<p>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.</p>\n<p>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.</p>\n","itemtype":"method","name":"debugMode","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode();\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</code>\n</div>","\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode(GRID);\n}\n\nfunction draw() {\n  background(200);\n  orbitControl();\n  box(15, 30);\n}\n</code>\n</div>","\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode(AXES);\n}\n\nfunction draw() {\n  background(200);\n  orbitControl();\n  box(15, 30);\n}\n</code>\n</div>","\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode(GRID, 100, 10, 0, 0, 0);\n}\n\nfunction draw() {\n  background(200);\n  orbitControl();\n  box(15, 30);\n}\n</code>\n</div>","\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode(100, 10, 0, 0, 0, 20, 0, -40, 0);\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</code>\n</div>"],"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":"Lights, Camera","submodule":"Interaction","overloads":[{"line":145,"params":[]},{"line":278,"params":[{"name":"mode","description":"<p>either GRID or AXES</p>\n","type":"Constant"}]},{"line":283,"params":[{"name":"mode","description":"","type":"Constant"},{"name":"gridSize","description":"<p>size of one side of the grid</p>\n","type":"Number","optional":true},{"name":"gridDivisions","description":"<p>number of divisions in the grid</p>\n","type":"Number","optional":true},{"name":"xOff","description":"<p>X axis offset from origin (0,0,0)</p>\n","type":"Number","optional":true},{"name":"yOff","description":"<p>Y axis offset from origin (0,0,0)</p>\n","type":"Number","optional":true},{"name":"zOff","description":"<p>Z axis offset from origin (0,0,0)</p>\n","type":"Number","optional":true}]},{"line":293,"params":[{"name":"mode","description":"","type":"Constant"},{"name":"axesSize","description":"<p>size of axes icon</p>\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":302,"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":353,"description":"<p>Turns off debugMode() in a 3D sketch.</p>\n","itemtype":"method","name":"noDebugMode","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode();\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</code>\n</div>"],"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":"Lights, Camera","submodule":"Interaction"},{"file":"src/webgl/light.js","line":10,"description":"<p>Creates an ambient light with a color. Ambient light is light that comes from everywhere on the canvas.\nIt has no particular source.</p>\n","itemtype":"method","name":"ambientLight","chainable":1,"example":["\n<div>\n<code>\ncreateCanvas(100, 100, WEBGL);\nambientLight(0);\nambientMaterial(250);\nsphere(40);\n</code>\n</div>\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(51);\n  ambientLight(100); // white light\n  ambientMaterial(255, 102, 94); // magenta material\n  box(30);\n}\n</code>\n</div>"],"alt":"evenly distributed light across a sphere\nevenly distributed light across a rotating sphere","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":10,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"<p>the alpha value</p>\n","type":"Number","optional":true}],"chainable":1},{"line":50,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"chainable":1},{"line":56,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":63,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":70,"params":[{"name":"color","description":"<p>the ambient light color</p>\n","type":"p5.Color"}],"chainable":1}]},{"file":"src/webgl/light.js","line":91,"description":"<p>Set's the color of the specular highlight when using a specular material and\nspecular light.</p>\n<p>This method can be combined with specularMaterial() and shininess()\nfunctions to set specular highlights. The default color is white, ie\n(255, 255, 255), which is used if this method is not called before\nspecularMaterial(). If this method is called without specularMaterial(),\nThere will be no effect.</p>\n<p>Note: specularColor is equivalent to the processing function\n<a href=\"https://processing.org/reference/lightSpecular_.html\">lightSpecular</a>.</p>\n","itemtype":"method","name":"specularColor","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  noStroke();\n}\n\nfunction draw() {\n  background(0);\n  shininess(20);\n  ambientLight(50);\n  specularColor(255, 0, 0);\n  pointLight(255, 0, 0, 0, -50, 50);\n  specularColor(0, 255, 0);\n  pointLight(0, 255, 0, 0, 50, 50);\n  specularMaterial(255);\n  sphere(40);\n}\n</code>\n</div>"],"alt":"different specular light sources from top and bottom of canvas","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":91,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"}],"chainable":1},{"line":138,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"chainable":1},{"line":144,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"}],"chainable":1},{"line":150,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":157,"params":[{"name":"color","description":"<p>the ambient light color</p>\n","type":"p5.Color"}],"chainable":1}]},{"file":"src/webgl/light.js","line":176,"description":"<p>Creates a directional light with a color and a direction</p>\n<p>A maximum of 5 directionalLight can be active at one time</p>\n","itemtype":"method","name":"directionalLight","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"light source on canvas changeable with mouse position","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":176,"params":[{"name":"v1","description":"<p>red or hue value (depending on the current\ncolor mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number"},{"name":"position","description":"<p>the direction of the light</p>\n","type":"p5.Vector"}],"chainable":1},{"line":209,"params":[{"name":"color","description":"<p>color Array, CSS color string,\n                                            or <a href=\"#/p5.Color\">p5.Color</a> value</p>\n","type":"Number[]|String|p5.Color"},{"name":"x","description":"<p>x axis direction</p>\n","type":"Number"},{"name":"y","description":"<p>y axis direction</p>\n","type":"Number"},{"name":"z","description":"<p>z axis direction</p>\n","type":"Number"}],"chainable":1},{"line":219,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"name":"position","description":"","type":"p5.Vector"}],"chainable":1},{"line":226,"params":[{"name":"v1","description":"","type":"Number"},{"name":"v2","description":"","type":"Number"},{"name":"v3","description":"","type":"Number"},{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"","type":"Number"}],"chainable":1}]},{"file":"src/webgl/light.js","line":279,"description":"<p>Creates a point light with a color and a light position</p>\n<p>A maximum of 5 pointLight can be active at one time</p>\n","itemtype":"method","name":"pointLight","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"spot light on canvas changes position with mouse","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":279,"params":[{"name":"v1","description":"<p>red or hue value (depending on the current\ncolor mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number"},{"name":"x","description":"<p>x axis position</p>\n","type":"Number"},{"name":"y","description":"<p>y axis position</p>\n","type":"Number"},{"name":"z","description":"<p>z axis position</p>\n","type":"Number"}],"chainable":1},{"line":321,"params":[{"name":"v1","description":"","type":"Number"},{"name":"v2","description":"","type":"Number"},{"name":"v3","description":"","type":"Number"},{"name":"position","description":"<p>the position of the light</p>\n","type":"p5.Vector"}],"chainable":1},{"line":330,"params":[{"name":"color","description":"<p>color Array, CSS color string,\nor <a href=\"#/p5.Color\">p5.Color</a> value</p>\n","type":"Number[]|String|p5.Color"},{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"","type":"Number"}],"chainable":1},{"line":340,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"name":"position","description":"","type":"p5.Vector"}],"chainable":1}]},{"file":"src/webgl/light.js","line":386,"description":"<p>Sets the default ambient and directional light. The defaults are <a href=\"#/p5/ambientLight\">ambientLight(128, 128, 128)</a> and <a href=\"#/p5/directionalLight\">directionalLight(128, 128, 128, 0, 0, -1)</a>. Lights need to be included in the <a href=\"#/p5/draw\">draw()</a> to remain persistent in a looping program. Placing them in the <a href=\"#/p5/setup\">setup()</a> of a looping program will cause them to only have an effect the first time through the loop.</p>\n","itemtype":"method","name":"lights","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(0);\n  lights();\n  rotateX(millis() / 1000);\n  rotateY(millis() / 1000);\n  rotateZ(millis() / 1000);\n  box();\n}\n</code>\n</div>"],"alt":"the light is partially ambient and partially directional","class":"p5","module":"Lights, Camera","submodule":"Lights"},{"file":"src/webgl/light.js","line":417,"description":"<p>Sets the falloff rates for point lights. It affects only the elements which are created after it in the code.\nThe default value is lightFalloff(1.0, 0.0, 0.0), and the parameters are used to calculate the falloff with the following equation:</p>\n<p>d = distance from light position to vertex position</p>\n<p>falloff = 1 / (CONSTANT + d * LINEAR + ( d * d ) * QUADRATIC)</p>\n","itemtype":"method","name":"lightFalloff","params":[{"name":"constant","description":"<p>constant value for determining falloff</p>\n","type":"Number"},{"name":"linear","description":"<p>linear value for determining falloff</p>\n","type":"Number"},{"name":"quadratic","description":"<p>quadratic value for determining falloff</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  noStroke();\n}\nfunction draw() {\n  background(0);\n  let locX = mouseX - width / 2;\n  let locY = mouseY - height / 2;\n  translate(-25, 0, 0);\n  lightFalloff(1, 0, 0);\n  pointLight(250, 250, 250, locX, locY, 50);\n  sphere(20);\n  translate(50, 0, 0);\n  lightFalloff(0.9, 0.01, 0);\n  pointLight(250, 250, 250, locX, locY, 50);\n  sphere(20);\n}\n</code>\n</div>"],"alt":"Two spheres with different falloff values show different intensity of light","class":"p5","module":"Lights, Camera","submodule":"Lights"},{"file":"src/webgl/light.js","line":502,"description":"<p>Creates a spotlight with a given color, position, direction of light,\nangle and concentration. Here, angle refers to the opening or aperture\nof the cone of the spotlight, and concentration is used to focus the\nlight towards the center. Both angle and concentration are optional, but if\nyou want to provide concentration, you will also have to specify the angle.</p>\n<p>A maximum of 5 spotLight can be active at one time</p>\n","itemtype":"method","name":"spotLight","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"Spot light on a sphere which changes position with mouse","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":502,"params":[{"name":"v1","description":"<p>red or hue value (depending on the current\ncolor mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number"},{"name":"x","description":"<p>x axis position</p>\n","type":"Number"},{"name":"y","description":"<p>y axis position</p>\n","type":"Number"},{"name":"z","description":"<p>z axis position</p>\n","type":"Number"},{"name":"rx","description":"<p>x axis direction of light</p>\n","type":"Number"},{"name":"ry","description":"<p>y axis direction of light</p>\n","type":"Number"},{"name":"rz","description":"<p>z axis direction of light</p>\n","type":"Number"},{"name":"angle","description":"<p>optional parameter for angle. Defaults to PI/3</p>\n","type":"Number","optional":true},{"name":"conc","description":"<p>optional parameter for concentration. Defaults to 100</p>\n","type":"Number","optional":true}],"chainable":1},{"line":554,"params":[{"name":"color","description":"<p>color Array, CSS color string,\nor <a href=\"#/p5.Color\">p5.Color</a> value</p>\n","type":"Number[]|String|p5.Color"},{"name":"position","description":"<p>the position of the light</p>\n","type":"p5.Vector"},{"name":"direction","description":"<p>the direction of the light</p>\n","type":"p5.Vector"},{"name":"angle","description":"","type":"Number","optional":true},{"name":"conc","description":"","type":"Number","optional":true}]},{"line":563,"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":"conc","description":"","type":"Number","optional":true}]},{"line":573,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"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":"conc","description":"","type":"Number","optional":true}]},{"line":583,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"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":"conc","description":"","type":"Number","optional":true}]},{"line":593,"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":"conc","description":"","type":"Number","optional":true}]},{"line":605,"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":"conc","description":"","type":"Number","optional":true}]},{"line":617,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"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":"conc","description":"","type":"Number","optional":true}]}]},{"file":"src/webgl/light.js","line":842,"description":"<p>This function will remove all the lights from the sketch for the\nsubsequent materials rendered. It affects all the subsequent methods.\nCalls to lighting methods made after noLights() will re-enable lights\nin the sketch.</p>\n","itemtype":"method","name":"noLights","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(0);\n  noStroke();\n\n  ambientLight(150, 0, 0);\n  translate(-25, 0, 0);\n  ambientMaterial(250);\n  sphere(20);\n\n  noLights();\n  ambientLight(0, 150, 0);\n  translate(50, 0, 0);\n  ambientMaterial(250);\n  sphere(20);\n}\n</code>\n</div>"],"alt":"Two spheres showing different colors","class":"p5","module":"Lights, Camera","submodule":"Lights"},{"file":"src/webgl/loading.js","line":12,"description":"<p>Load a 3d model from an OBJ or STL file.</p>\n<p><a href=\"#/p5/loadModel\">loadModel()</a> should be placed inside of <a href=\"#/p5/preload\">preload()</a>.\nThis allows the model to load fully before the rest of your code is run.</p>\n<p>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\n<a href=\"#/p5/loadModel\">loadModel()</a> 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 <a href=\"#/p5/scale\">scale()</a> function.</p>\n<p>Also, the support for colored STL files is not present. STL files with color will be\nrendered without color properties.</p>\n","itemtype":"method","name":"loadModel","return":{"description":"the <a href=\"#/p5.Geometry\">p5.Geometry</a> object","type":"p5.Geometry"},"example":["\n<div>\n<code>\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}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  model(octahedron);\n}\n</code>\n</div>","\n<div>\n<code>\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}\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</code>\n</div>"],"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":"<p>Path of the model to be loaded</p>\n","type":"String"},{"name":"normalize","description":"<p>If true, scale the model to a\n                                     standardized size when loading</p>\n","type":"Boolean"},{"name":"successCallback","description":"<p>Function to be called\n                                    once the model is loaded. Will be passed\n                                    the 3D model object.</p>\n","type":"function(p5.Geometry)","optional":true},{"name":"failureCallback","description":"<p>called with event error if\n                                        the model fails to load.</p>\n","type":"Function(Event)","optional":true},{"name":"fileType","description":"<p>The file extension of the model\n                                     (<code>.stl</code>, <code>.obj</code>).</p>\n","type":"String","optional":true}],"return":{"description":"the <a href=\"#/p5.Geometry\">p5.Geometry</a> object","type":"p5.Geometry"}},{"line":96,"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 <a href=\"#/p5.Geometry\">p5.Geometry</a> object","type":"p5.Geometry"}}]},{"file":"src/webgl/loading.js","line":179,"description":"<p>Parse OBJ lines into model. For reference, this is what a simple model of a\nsquare might look like:</p>\n<p>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</p>\n<p>f 4 3 2 1</p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":288,"description":"<p>STL files can be of two types, ASCII and Binary,</p>\n<p>We need to convert the arrayBuffer to an array of strings,\nto parse it as an ASCII file.</p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":315,"description":"<p>This function checks if the file is in ASCII format or in Binary format</p>\n<p>It is done by searching keyword <code>solid</code> at the start of the file.</p>\n<p>An ASCII STL data must begin with <code>solid</code> as the first six bytes.\nHowever, ASCII STLs lacking the SPACE after the <code>d</code> are known to be\nplentiful. So, check the first 5 bytes for <code>solid</code>.</p>\n<p>Several encodings, such as UTF-8, precede the text with up to 5 bytes:\n<a href=\"https://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding\">https://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding</a>\nSearch for <code>solid</code> to start anywhere after those prefixes.</p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":342,"description":"<p>This function matches the <code>query</code> at the provided <code>offset</code></p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":354,"description":"<p>This function parses the Binary STL files.\n<a href=\"https://en.wikipedia.org/wiki/STL_%28file_format%29#Binary_STL\">https://en.wikipedia.org/wiki/STL_%28file_format%29#Binary_STL</a></p>\n<p>Currently there is no support for the colors provided in STL files.</p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":442,"description":"<p>ASCII STL file starts with <code>solid 'nameOfFile'</code>\nThen contain the normal of the face, starting with <code>facet normal</code>\nNext contain a keyword indicating the start of face vertex, <code>outer loop</code>\nNext comes the three vertex, starting with <code>vertex x y z</code>\nVertices ends with <code>endloop</code>\nFace ends with <code>endfacet</code>\nNext face starts with <code>facet normal</code>\nThe end of the file is indicated by <code>endsolid</code></p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":586,"description":"<p>Render a 3d model to the screen.</p>\n","itemtype":"method","name":"model","params":[{"name":"model","description":"<p>Loaded 3d model to be rendered</p>\n","type":"p5.Geometry"}],"example":["\n<div>\n<code>\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}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  model(octahedron);\n}\n</code>\n</div>"],"alt":"Vertically rotating 3-d octahedron.","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/material.js","line":12,"description":"<p>Loads a custom shader from the provided vertex and fragment\nshader paths. The shader files are loaded asynchronously in the\nbackground, so this method should be used in <a href=\"#/p5/preload\">preload()</a>.</p>\n<p>For now, there are three main types of shaders. p5 will automatically\nsupply appropriate vertices, normals, colors, and lighting attributes\nif the parameters defined in the shader match the names.</p>\n","itemtype":"method","name":"loadShader","params":[{"name":"vertFilename","description":"<p>path to file containing vertex shader\nsource code</p>\n","type":"String"},{"name":"fragFilename","description":"<p>path to file containing fragment shader\nsource code</p>\n","type":"String"},{"name":"callback","description":"<p>callback to be executed after loadShader\ncompletes. On success, the Shader object is passed as the first argument.</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>callback to be executed when an error\noccurs inside loadShader. On error, the error is passed as the first\nargument.</p>\n","type":"Function","optional":true}],"return":{"description":"a shader object created from the provided\nvertex and fragment shader files.","type":"p5.Shader"},"example":["\n<div modernizr='webgl'>\n<code>\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}\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</code>\n</div>"],"alt":"zooming Mandelbrot set. a colorful, infinitely detailed fractal.","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":111,"itemtype":"method","name":"createShader","params":[{"name":"vertSrc","description":"<p>source code for the vertex shader</p>\n","type":"String"},{"name":"fragSrc","description":"<p>source code for the fragment shader</p>\n","type":"String"}],"return":{"description":"a shader object created from the provided\nvertex and fragment shaders.","type":"p5.Shader"},"example":["\n<div modernizr='webgl'>\n<code>\n// the 'varying's are shared between both vertex & fragment shaders\nlet varying = 'precision highp float; varying vec2 vPos;';\n\n// the vertex shader is called for each vertex\nlet vs =\n  varying +\n  'attribute vec3 aPosition;' +\n  'void main() { vPos = (gl_Position = vec4(aPosition,1.0)).xy; }';\n\n// the fragment shader is called for each pixel\nlet fs =\n  varying +\n  'uniform vec2 p;' +\n  'uniform float r;' +\n  'const int I = 500;' +\n  'void main() {' +\n  '  vec2 c = p + vPos * r, z = c;' +\n  '  float n = 0.0;' +\n  '  for (int i = I; i > 0; i --) {' +\n  '    if(z.x*z.x+z.y*z.y > 4.0) {' +\n  '      n = float(i)/float(I);' +\n  '      break;' +\n  '    }' +\n  '    z = vec2(z.x*z.x-z.y*z.y, 2.0*z.x*z.y) + c;' +\n  '  }' +\n  '  gl_FragColor = vec4(0.5-cos(n*17.0)/2.0,0.5-cos(n*13.0)/2.0,0.5-cos(n*23.0)/2.0,1.0);' +\n  '}';\n\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}\n\nfunction draw() {\n  // 'r' is the size of the image in Mandelbrot-space\n  mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));\n  quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n</code>\n</div>"],"alt":"zooming Mandelbrot set. a colorful, infinitely detailed fractal.","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":179,"description":"<p>The <a href=\"#/p5/shader\">shader()</a> function lets the user provide a custom shader\nto fill in shapes in WEBGL mode. Users can create their\nown shaders by loading vertex and fragment shaders with\n<a href=\"#/p5/loadShader\">loadShader()</a>.</p>\n","itemtype":"method","name":"shader","chainable":1,"params":[{"name":"s","description":"<p>the desired <a href=\"#/p5.Shader\">p5.Shader</a> to use for rendering\nshapes.</p>\n","type":"p5.Shader","optional":true}],"example":["\n<div modernizr='webgl'>\n<code>\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\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</code>\n</div>"],"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":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":270,"description":"<p>This function restores the default shaders in WEBGL mode. Code that runs\nafter resetShader() will not be affected by previously defined\nshaders. Should be run after <a href=\"#/p5/shader\">shader()</a>.</p>\n","itemtype":"method","name":"resetShader","chainable":1,"class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":283,"description":"<p>Normal material for geometry is a material that is not affected by light.\nIt is not reflective and is a placeholder material often used for debugging.\nSurfaces facing the X-axis, become red, those facing the Y-axis, become green and those facing the Z-axis, become blue.\nYou can view all possible materials in this\n<a href=\"https://p5js.org/examples/3d-materials.html\">example</a>.</p>\n","itemtype":"method","name":"normalMaterial","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  normalMaterial();\n  sphere(40);\n}\n</code>\n</div>"],"alt":"Red, green and blue gradient.","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":321,"description":"<p>Texture for geometry.  You can view other possible materials in this\n<a href=\"https://p5js.org/examples/3d-materials.html\">example</a>.</p>\n","itemtype":"method","name":"texture","params":[{"name":"tex","description":"<p>2-dimensional graphics\n                   to render as texture</p>\n","type":"p5.Image|p5.MediaElement|p5.Graphics"}],"chainable":1,"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  rotateZ(frameCount * 0.01);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  //pass image as texture\n  texture(img);\n  box(200, 200, 200);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet pg;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  pg = createGraphics(200, 200);\n  pg.textSize(75);\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</code>\n</div>\n\n<div>\n<code>\nlet vid;\nfunction preload() {\n  vid = createVideo('assets/fingers.mov');\n  vid.hide();\n}\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  //pass video frame as texture\n  texture(vid);\n  rect(-40, -40, 80, 80);\n}\n\nfunction mousePressed() {\n  vid.loop();\n}\n</code>\n</div>"],"alt":"Rotating view of many images umbrella and grid roof on a 3d plane\nblack canvas\nblack canvas","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":421,"description":"<p>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.\nThis function only works in WEBGL mode.</p>\n<p>With IMAGE, if an image is 100 x 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).</p>\n","itemtype":"method","name":"textureMode","params":[{"name":"mode","description":"<p>either IMAGE or NORMAL</p>\n","type":"Constant"}],"example":["\n<div>\n<code>\nlet img;\n\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"the underside of a white umbrella and gridded ceiling above","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":499,"description":"<p>Sets the global texture wrapping mode. This controls how textures behave\nwhen their uv's go outside of the 0 - 1 range. There are three options:\nCLAMP, REPEAT, and MIRROR.</p>\n<p>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</p>\n<p>REPEAT & MIRROR are only available if the texture\nis a power of two size (128, 256, 512, 1024, etc.).</p>\n<p>This method will affect all textures in your sketch until a subsequent\ntextureWrap call is made.</p>\n<p>If only one argument is provided, it will be applied to both the\nhorizontal and vertical axes.</p>\n","itemtype":"method","name":"textureWrap","params":[{"name":"wrapX","description":"<p>either CLAMP, REPEAT, or MIRROR</p>\n","type":"Constant"},{"name":"wrapY","description":"<p>either CLAMP, REPEAT, or MIRROR</p>\n","type":"Constant","optional":true}],"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies128.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  textureWrap(MIRROR);\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</code>\n</div>"],"alt":"an image of the rocky mountains repeated in mirrored tiles","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":571,"description":"<p>Ambient material for geometry with a given color. Ambient material defines the color the object reflects under any lighting.\nFor example, if the ambient material of an object is pure red, but the ambient lighting only contains green, the object will not reflect any light.\nHere's an <a href=\"https://p5js.org/examples/3d-materials.html\">example containing all possible materials</a>.</p>\n","itemtype":"method","name":"ambientMaterial","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(0);\n  noStroke();\n  ambientLight(200);\n  ambientMaterial(70, 130, 230);\n  sphere(40);\n}\n</code>\n</div>\n<div>\n<code>\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}\nfunction draw() {\n  background(70);\n  ambientLight(100); // white light\n  ambientMaterial(255, 0, 255); // pink material\n  box(30);\n}\n</code>\n</div>\n<div>\n<code>\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}\nfunction draw() {\n  background(70);\n  ambientLight(0, 255, 0); // green light\n  ambientMaterial(255, 0, 255); // pink material\n  box(30);\n}\n</code>\n</div>"],"alt":"radiating light source from top right of canvas\nbox reflecting only red and blue light\nbox reflecting no light","class":"p5","module":"Lights, Camera","submodule":"Material","overloads":[{"line":571,"params":[{"name":"v1","description":"<p>gray value, red or hue value\n                        (depending on the current color mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number","optional":true},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number","optional":true}],"chainable":1},{"line":631,"params":[{"name":"color","description":"<p>color, color Array, or CSS color string</p>\n","type":"Number[]|String|p5.Color"}],"chainable":1}]},{"file":"src/webgl/material.js","line":651,"description":"<p>Sets the emissive color of the material used for geometry drawn to\nthe screen. This is a misnomer in the sense that the material does not\nactually emit light that effects surrounding polygons. Instead,\nit gives the appearance that the object is glowing. An emissive material\nwill display at full strength even if there is no light for it to reflect.</p>\n","itemtype":"method","name":"emissiveMaterial","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(0);\n  noStroke();\n  ambientLight(0);\n  emissiveMaterial(130, 230, 0);\n  sphere(40);\n}\n</code>\n</div>"],"alt":"radiating light source from top right of canvas","class":"p5","module":"Lights, Camera","submodule":"Material","overloads":[{"line":651,"params":[{"name":"v1","description":"<p>gray value, red or hue value\n                        (depending on the current color mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number","optional":true},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number","optional":true},{"name":"a","description":"<p>opacity</p>\n","type":"Number","optional":true}],"chainable":1},{"line":683,"params":[{"name":"color","description":"<p>color, color Array, or CSS color string</p>\n","type":"Number[]|String|p5.Color"}],"chainable":1}]},{"file":"src/webgl/material.js","line":703,"description":"<p>Specular material for geometry with a given color. Specular material is a shiny reflective material.\nLike ambient material it also defines the color the object reflects under ambient lighting.\nFor example, if the specular material of an object is pure red, but the ambient lighting only contains green, the object will not reflect any light.\nFor all other types of light like point and directional light, a specular material will reflect the color of the light source to the viewer.\nHere's an <a href=\"https://p5js.org/examples/3d-materials.html\">example containing all possible materials</a>.</p>\n","itemtype":"method","name":"specularMaterial","chainable":1,"class":"p5","module":"Lights, Camera","submodule":"Material","overloads":[{"line":703,"params":[{"name":"gray","description":"<p>number specifying value between white and black.</p>\n","type":"Number"},{"name":"alpha","description":"<p>alpha value relative to current color range\n                                (default is 0-255)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":717,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":747,"params":[{"name":"color","description":"<p>color Array, or CSS color string</p>\n","type":"Number[]|String|p5.Color"}],"chainable":1}]},{"file":"src/webgl/material.js","line":767,"description":"<p>Sets the amount of gloss in the surface of shapes.\nUsed in combination with specularMaterial() in setting\nthe material properties of shapes. The default and minimum value is 1.</p>\n","itemtype":"method","name":"shininess","params":[{"name":"shine","description":"<p>Degree of Shininess.\n                      Defaults to 1.</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"Shininess on Camera changes position with mouse","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Camera.js","line":13,"description":"<p>Sets the camera position for a 3D sketch. Parameters for this function define\nthe position for the camera, the center of the sketch (where the camera is\npointing), and an up direction (the orientation of the camera).</p>\n<p>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 centerX value is positive, the camera\nis rotating to the right side of the sketch, so the object would seem like\nmoving to the left.</p>\n<p>See this <a href = \"https://www.openprocessing.org/sketch/740258\">example</a>\nto view the position of your camera.</p>\n<p>When called with no arguments, this function creates a default camera\nequivalent to\ncamera(0, 0, (height/2.0) / tan(PI*30.0 / 180.0), 0, 0, 0, 0, 1, 0);</p>\n","itemtype":"method","name":"camera","is_constructor":1,"params":[{"name":"x","description":"<p>camera position value on x axis</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>camera position value on y axis</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>camera position value on z axis</p>\n","type":"Number","optional":true},{"name":"centerX","description":"<p>x coordinate representing center of the sketch</p>\n","type":"Number","optional":true},{"name":"centerY","description":"<p>y coordinate representing center of the sketch</p>\n","type":"Number","optional":true},{"name":"centerZ","description":"<p>z coordinate representing center of the sketch</p>\n","type":"Number","optional":true},{"name":"upX","description":"<p>x component of direction 'up' from camera</p>\n","type":"Number","optional":true},{"name":"upY","description":"<p>y component of direction 'up' from camera</p>\n","type":"Number","optional":true},{"name":"upZ","description":"<p>z component of direction 'up' from camera</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>","\n<div>\n<code>\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  //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  camera(X, Y, Z, centerX, centerY, centerZ, 0, 1, 0);\n  stroke(255);\n  fill(255, 102, 94);\n  box(85);\n}\n</code>\n</div>"],"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 it's center.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":115,"description":"<p>Sets a perspective projection for the camera in a 3D sketch. This projection\nrepresents depth through foreshortening: objects that are close to the camera\nappear their actual size while those that are further away from the camera\nappear smaller. 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.</p>\n<p>When called with no arguments, the defaults\nprovided are equivalent to\nperspective(PI/3.0, width/height, eyeZ/10.0, eyeZ<em>10.0), where eyeZ\nis equal to ((height/2.0) / tan(PI</em>60.0/360.0));</p>\n","itemtype":"method","name":"perspective","params":[{"name":"fovy","description":"<p>camera frustum vertical field of view,\n                          from bottom to top of view, in <a href=\"#/p5/angleMode\">angleMode</a> units</p>\n","type":"Number","optional":true},{"name":"aspect","description":"<p>camera frustum aspect ratio</p>\n","type":"Number","optional":true},{"name":"near","description":"<p>frustum near plane length</p>\n","type":"Number","optional":true},{"name":"far","description":"<p>frustum far plane length</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n//drag the mouse to look around!\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  perspective(PI / 3.0, width / height, 0.1, 500);\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) * 95);\n  box(30);\n  pop();\n  push();\n  translate(15, 0, sin(frameCount / 30 + PI) * 95);\n  box(30);\n  pop();\n}\n</code>\n</div>"],"alt":"two colored 3D boxes move back and forth, rotating as mouse is dragged.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":175,"description":"<p>Sets an orthographic projection for the camera in a 3D sketch and defines a\nbox-shaped viewing frustum within which objects are seen. In this projection,\nall objects with the same dimension appear the same size, regardless of\nwhether they are near or far from the camera. The parameters to this\nfunction specify the viewing frustum where left and right are the minimum and\nmaximum x values, top and bottom are the minimum and maximum y values, and near\nand far are the minimum and maximum z values. If no parameters are given, the\ndefault is used: ortho(-width/2, width/2, -height/2, height/2).</p>\n","itemtype":"method","name":"ortho","params":[{"name":"left","description":"<p>camera frustum left plane</p>\n","type":"Number","optional":true},{"name":"right","description":"<p>camera frustum right plane</p>\n","type":"Number","optional":true},{"name":"bottom","description":"<p>camera frustum bottom plane</p>\n","type":"Number","optional":true},{"name":"top","description":"<p>camera frustum top plane</p>\n","type":"Number","optional":true},{"name":"near","description":"<p>camera frustum near plane</p>\n","type":"Number","optional":true},{"name":"far","description":"<p>camera frustum far plane</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n//drag the mouse to look around!\n//there's no vanishing point\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  ortho(-width / 2, width / 2, height / 2, -height / 2, 0, 500);\n}\nfunction draw() {\n  background(200);\n  orbitControl();\n  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</code>\n</div>"],"alt":"two 3D boxes move back and forth along same plane, rotating as mouse is dragged.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":231,"description":"<p>Sets a perspective matrix as defined by the parameters.</p>\n<p>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.</p>\n<p>Setting the frustum changes the perspective of the scene being rendered.\nThis can be achieved more simply in many cases by using\n<a href=\"https://p5js.org/reference/#/p5/perspective\">perspective()</a>.</p>\n","itemtype":"method","name":"frustum","params":[{"name":"left","description":"<p>camera frustum left plane</p>\n","type":"Number","optional":true},{"name":"right","description":"<p>camera frustum right plane</p>\n","type":"Number","optional":true},{"name":"bottom","description":"<p>camera frustum bottom plane</p>\n","type":"Number","optional":true},{"name":"top","description":"<p>camera frustum top plane</p>\n","type":"Number","optional":true},{"name":"near","description":"<p>camera frustum near plane</p>\n","type":"Number","optional":true},{"name":"far","description":"<p>camera frustum far plane</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  setAttributes('antialias', true);\n  frustum(-0.1, 0.1, -0.1, 0.1, 0.1, 200);\n}\nfunction draw() {\n  background(200);\n  orbitControl();\n  strokeWeight(10);\n  stroke(0, 0, 255);\n  noFill();\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</code>\n</div>"],"alt":"two 3D boxes move back and forth along same plane, rotating as mouse is dragged.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":297,"description":"<p>Creates a new <a href=\"#/p5.Camera\">p5.Camera</a> object and tells the\nrenderer to use that camera.\nReturns the p5.Camera object.</p>\n","itemtype":"method","name":"createCamera","return":{"description":"The newly created camera object.","type":"p5.Camera"},"example":["\n<div><code>\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  setCamera(camera);\n}\n\nfunction draw() {\n  camera.lookAt(0, 0, 0);\n  camera.setPosition(sin(frameCount / 60) * 200, 0, 100);\n  box(20);\n}\n</code></div>"],"alt":"An example that creates a camera and moves it around the box.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":425,"description":"<p>Sets a perspective projection for a p5.Camera object and sets parameters\nfor that projection according to <a href=\"#/p5/perspective\">perspective()</a>\nsyntax.</p>\n","itemtype":"method","name":"perspective","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":505,"description":"<p>Sets an orthographic projection for a p5.Camera object and sets parameters\nfor that projection according to <a href=\"#/p5/ortho\">ortho()</a> syntax.</p>\n","itemtype":"method","name":"ortho","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":564,"itemtype":"method","name":"frustum","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":669,"description":"<p>Panning rotates the camera view to the left and right.</p>\n","itemtype":"method","name":"pan","params":[{"name":"angle","description":"<p>amount to rotate camera in current\n<a href=\"#/p5/angleMode\">angleMode</a> units.\nGreater than 0 values rotate counterclockwise (to the left).</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet cam;\nlet delta = 0.01;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n  cam = createCamera();\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</code>\n</div>"],"alt":"camera view pans left and right across a series of rotating 3D boxes.","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":727,"description":"<p>Tilting rotates the camera view up and down.</p>\n","itemtype":"method","name":"tilt","params":[{"name":"angle","description":"<p>amount to rotate camera in current\n<a href=\"#/p5/angleMode\">angleMode</a> units.\nGreater than 0 values rotate counterclockwise (to the left).</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet cam;\nlet delta = 0.01;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n  cam = createCamera();\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</code>\n</div>"],"alt":"camera view tilts up and down across a series of rotating 3D boxes.","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":785,"description":"<p>Reorients the camera to look at a position in world space.</p>\n","itemtype":"method","name":"lookAt","params":[{"name":"x","description":"<p>x position of a point in world space</p>\n","type":"Number"},{"name":"y","description":"<p>y position of a point in world space</p>\n","type":"Number"},{"name":"z","description":"<p>z position of a point in world space</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet cam;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n  cam = createCamera();\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</code>\n</div>"],"alt":"camera view of rotating 3D cubes changes to look at a new random\npoint every second .","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":852,"description":"<p>Sets a camera's position and orientation.  This is equivalent to calling\n<a href=\"#/p5/camera\">camera()</a> on a p5.Camera object.</p>\n","itemtype":"method","name":"camera","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":933,"description":"<p>Move camera along its local axes while maintaining current camera orientation.</p>\n","itemtype":"method","name":"move","params":[{"name":"x","description":"<p>amount to move along camera's left-right axis</p>\n","type":"Number"},{"name":"y","description":"<p>amount to move along camera's up-down axis</p>\n","type":"Number"},{"name":"z","description":"<p>amount to move along camera's forward-backward axis</p>\n","type":"Number"}],"example":["\n<div>\n<code>\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}\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</code>\n</div>"],"alt":"camera view moves along a series of 3D boxes, maintaining the same\norientation throughout the move","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1005,"description":"<p>Set camera position in world-space while maintaining current camera\norientation.</p>\n","itemtype":"method","name":"setPosition","params":[{"name":"x","description":"<p>x position of a point in world space</p>\n","type":"Number"},{"name":"y","description":"<p>y position of a point in world space</p>\n","type":"Number"},{"name":"z","description":"<p>z position of a point in world space</p>\n","type":"Number"}],"example":["\n<div>\n<code>\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}\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</code>\n</div>"],"alt":"camera position changes as the user presses keys, altering view of a 3D box","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1270,"description":"<p>Sets rendererGL's current camera to a p5.Camera object.  Allows switching\nbetween multiple cameras.</p>\n","itemtype":"method","name":"setCamera","params":[{"name":"cam","description":"<p>p5.Camera object</p>\n","type":"p5.Camera"}],"example":["\n<div>\n<code>\nlet cam1, cam2;\nlet currentCamera;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n\n  cam1 = createCamera();\n  cam2 = createCamera();\n  cam2.setPosition(30, 0, 50);\n  cam2.lookAt(0, 0, 0);\n  cam2.ortho();\n\n  // set variable for previously active camera:\n  currentCamera = 1;\n}\n\nfunction draw() {\n  background(200);\n\n  // camera 1:\n  cam1.lookAt(0, 0, 0);\n  cam1.setPosition(sin(frameCount / 60) * 200, 0, 100);\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  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</code>\n</div>"],"alt":"Canvas switches between two camera views, each showing a series of spinning\n3D boxes.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Geometry.js","line":71,"description":"<p>computes faces for geometry objects based on the vertices.</p>\n","itemtype":"method","name":"computeFaces","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Geometry.js","line":114,"description":"<p>computes smooth normals per vertex as an average of each\nface.</p>\n","itemtype":"method","name":"computeNormals","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Geometry.js","line":153,"description":"<p>Averages the vertex normals. Used in curved\nsurfaces</p>\n","itemtype":"method","name":"averageNormals","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Geometry.js","line":174,"description":"<p>Averages pole normals.  Used in spherical primitives</p>\n","itemtype":"method","name":"averagePoleNormals","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Geometry.js","line":267,"description":"<p>Modifies all vertices to be centered within the range -100 to 100.</p>\n","itemtype":"method","name":"normalize","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.RendererGL.js","line":331,"description":"<p>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.</p>\n<p>Note that this will reinitialize the drawing context\nif called after the WebGL canvas is made.</p>\n<p>If an object is passed as the parameter, all attributes\nnot declared in the object will be set to defaults.</p>\n<p>The available attributes are:\n<br>\nalpha - indicates if the canvas contains an alpha buffer\ndefault is true</p>\n<p>depth - indicates whether the drawing buffer has a depth buffer\nof at least 16 bits - default is true</p>\n<p>stencil - indicates whether the drawing buffer has a stencil buffer\nof at least 8 bits</p>\n<p>antialias - indicates whether or not to perform anti-aliasing\ndefault is false (true in Safari)</p>\n<p>premultipliedAlpha - indicates that the page compositor will assume\nthe drawing buffer contains colors with pre-multiplied alpha\ndefault is false</p>\n<p>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</p>\n<p>perPixelLighting - if true, per-pixel lighting will be used in the\nlighting shader otherwise per-vertex lighting is used.\ndefault is true.</p>\n","itemtype":"method","name":"setAttributes","example":["\n<div>\n<code>\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</code>\n</div>\n<br>\nNow with the antialias attribute set to true.\n<br>\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"alt":"a rotating cube with smoother edges","class":"p5","module":"Rendering","submodule":"Rendering","overloads":[{"line":331,"params":[{"name":"key","description":"<p>Name of attribute</p>\n","type":"String"},{"name":"value","description":"<p>New value of named attribute</p>\n","type":"Boolean"}]},{"line":470,"params":[{"name":"obj","description":"<p>object with key-value pairs</p>\n","type":"Object"}]}]},{"file":"src/webgl/p5.Shader.js","line":296,"description":"<p>Wrapper around gl.uniform functions.\nAs we store uniform info in the shader we can use that\nto do type checking on the supplied data and call\nthe appropriate function.</p>\n","itemtype":"method","name":"setUniform","chainable":1,"params":[{"name":"uniformName","description":"<p>the name of the uniform in the\nshader program</p>\n","type":"String"},{"name":"data","description":"<p>the data to be associated\nwith that uniform; type varies (could be a single numerical value, array,\nmatrix, or texture / sampler reference)</p>\n","type":"Object|Number|Boolean|Number[]"}],"example":["\n<div modernizr='webgl'>\n<code>\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\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</code>\n</div>"],"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":"Lights, Camera","submodule":"Material"},{"file":"lib/addons/p5.sound.js","line":1,"class":"p5.sound","module":"Lights, Camera"},{"file":"lib/addons/p5.sound.js","line":52,"description":"<p>p5.sound \n<a href=\"https://p5js.org/reference/#/libraries/p5.sound\">https://p5js.org/reference/#/libraries/p5.sound</a></p>\n<p>From the Processing Foundation and contributors\n<a href=\"https://github.com/processing/p5.js-sound/graphs/contributors\">https://github.com/processing/p5.js-sound/graphs/contributors</a></p>\n<p>MIT License (MIT)\n<a href=\"https://github.com/processing/p5.js-sound/blob/master/LICENSE\">https://github.com/processing/p5.js-sound/blob/master/LICENSE</a></p>\n<p>Some of the many audio libraries & resources that inspire p5.sound:</p>\n<ul>\n<li><p>TONE.js (c) Yotam Mann. Licensed under The MIT License (MIT). <a href=\"https://github.com/TONEnoTONE/Tone.js\">https://github.com/TONEnoTONE/Tone.js</a></p>\n</li>\n<li><p>buzz.js (c) Jay Salvat. Licensed under The MIT License (MIT). <a href=\"http://buzz.jaysalvat.com/\">http://buzz.jaysalvat.com/</a></p>\n</li>\n<li><p>Boris Smus Web Audio API book, 2013. Licensed under the Apache License <a href=\"http://www.apache.org/licenses/LICENSE-2.0\">http://www.apache.org/licenses/LICENSE-2.0</a></p>\n</li>\n<li><p>wavesurfer.js <a href=\"https://github.com/katspaugh/wavesurfer.js\">https://github.com/katspaugh/wavesurfer.js</a></p>\n</li>\n<li><p>Web Audio Components by Jordan Santell <a href=\"https://github.com/web-audio-components\">https://github.com/web-audio-components</a></p>\n</li>\n<li><p>Wilm Thoben's Sound library for Processing <a href=\"https://github.com/processing/processing/tree/master/java/libraries/sound\">https://github.com/processing/processing/tree/master/java/libraries/sound</a></p>\n<p>Web Audio API: <a href=\"http://w3.org/TR/webaudio/\">http://w3.org/TR/webaudio/</a></p>\n</li>\n</ul>\n","class":"p5.sound","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":166,"description":"<p>Returns a number representing the master amplitude (volume) for sound\nin this sketch.</p>\n","itemtype":"method","name":"getMasterVolume","return":{"description":"Master amplitude (volume) for sound in this sketch.\n                 Should be between 0.0 (silence) and 1.0.","type":"Number"},"class":"p5.sound","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":178,"description":"<p>Scale the output of all sound in this sketch</p>\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 <code>rampTime</code> parameter. For more\ncomplex fades, see the Envelope class.\n\n<p>Alternately, you can pass in a signal source such as an\noscillator to modulate the amplitude with an audio signal.</p>\n<p><b>How This Works</b>: 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.</p>\n\n<p>If no value is provided, returns a Web Audio API Gain Node</p>","itemtype":"method","name":"masterVolume","params":[{"name":"volume","description":"<p>Volume (amplitude) between 0.0\n                                   and 1.0 or modulating signal/oscillator</p>\n","type":"Number|Object"},{"name":"rampTime","description":"<p>Fade for t seconds</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>Schedule this event to happen at\n                               t seconds in the future</p>\n","type":"Number","optional":true}],"class":"p5.sound","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":221,"description":"<p><code>p5.soundOut</code> is the p5.sound master output. It sends output to\nthe destination of this window's web audio context. It contains\nWeb Audio API nodes including a dyanmicsCompressor (<code>.limiter</code>),\nand Gain Nodes for <code>.input</code> and <code>.output</code>.</p>\n","itemtype":"property","name":"soundOut","type":"Object","class":"p5.sound","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":300,"description":"<p>In classes that extend\np5.Effect, connect effect nodes\nto the wet parameter</p>\n","class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":316,"description":"<p>Set the output volume of the filter.</p>\n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"<p>amplitude between 0 and 1.0</p>\n","type":"Number","optional":true},{"name":"rampTime","description":"<p>create a fade that lasts until rampTime</p>\n","type":"Number","optional":true},{"name":"tFromNow","description":"<p>schedule this event to happen in tFromNow seconds</p>\n","type":"Number","optional":true}],"class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":336,"description":"<p>Link effects together in a chain\nExample usage: filter.chain(reverb, delay, panner);\nMay be used with an open-ended number of arguments</p>\n","itemtype":"method","name":"chain","params":[{"name":"arguments","description":"<p>Chain together multiple sound objects</p>\n","type":"Object","optional":true}],"class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":358,"description":"<p>Adjust the dry/wet value.</p>\n","itemtype":"method","name":"drywet","params":[{"name":"fade","description":"<p>The desired drywet value (0 - 1.0)</p>\n","type":"Number","optional":true}],"class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":374,"description":"<p>Send output to a p5.js-sound, Web Audio Node, or use signal to\ncontrol an AudioParam</p>\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":388,"description":"<p>Disconnect all output.</p>\n","itemtype":"method","name":"disconnect","class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":451,"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":455,"description":"<p>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.</p>\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":470,"description":"<p>Returns the closest MIDI note value for\na given frequency.</p>\n","itemtype":"method","name":"freqToMidi","params":[{"name":"frequency","description":"<p>A freqeuncy, for example, the \"A\"\n                           above Middle C is 440Hz</p>\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":486,"description":"<p>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.</p>\n","itemtype":"method","name":"midiToFreq","params":[{"name":"midiNote","description":"<p>The number of a MIDI note</p>\n","type":"Number"}],"return":{"description":"Frequency value of the given MIDI note","type":"Number"},"example":["\n<div><code>\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</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":570,"description":"<p>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.\n<a href=\"http://media.io/\">Here</a> is a free online file\nconverter.</p>\n","itemtype":"method","name":"soundFormats","params":[{"name":"formats","description":"<p>i.e. 'mp3', 'wav', 'ogg'</p>\n","type":"String","optional":true,"multiple":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":688,"description":"<p>Used by Osc and Envelope to chain signal math</p>\n","class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":967,"description":"<p>The p5.Filter is built with a\n<a href=\"http://www.w3.org/TR/webaudio/#BiquadFilterNode\">\nWeb Audio BiquadFilter Node</a>.</p>\n","itemtype":"property","name":"biquadFilter","type":"DelayNode","class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":989,"description":"<p>Filter an audio signal according to a set\nof filter parameters.</p>\n","itemtype":"method","name":"process","params":[{"name":"Signal","description":"<p>An object that outputs audio</p>\n","type":"Object"},{"name":"freq","description":"<p>Frequency in Hz, from 10 to 22050</p>\n","type":"Number","optional":true},{"name":"res","description":"<p>Resonance/Width of the filter frequency\n                      from 0.001 to 1000</p>\n","type":"Number","optional":true}],"class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1004,"description":"<p>Set the frequency and the resonance of the filter.</p>\n","itemtype":"method","name":"set","params":[{"name":"freq","description":"<p>Frequency in Hz, from 10 to 22050</p>\n","type":"Number","optional":true},{"name":"res","description":"<p>Resonance (Q) from 0.001 to 1000</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1024,"description":"<p>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).</p>\n","itemtype":"method","name":"freq","params":[{"name":"freq","description":"<p>Filter Frequency</p>\n","type":"Number"},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\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":1053,"description":"<p>Controls either width of a bandpass frequency,\nor the resonance of a low/highpass cutoff frequency.</p>\n","itemtype":"method","name":"res","params":[{"name":"res","description":"<p>Resonance/Width of filter freq\n                     from 0.001 to 1000</p>\n","type":"Number"},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\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":1079,"description":"<p>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.</p>\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":1104,"description":"<p>Toggle function. Switches between the specified type and allpass</p>\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":1123,"description":"<p>Set the type of a p5.Filter. Possible types include:\n\"lowpass\" (default), \"highpass\", \"bandpass\",\n\"lowshelf\", \"highshelf\", \"peaking\", \"notch\",\n\"allpass\".</p>\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":1218,"description":"<p>Returns the Audio Context for this sketch. Useful for users\nwho would like to dig deeper into the <a target='_blank' href=\n'http://webaudio.github.io/web-audio-api/'>Web Audio API\n</a>.</p>\n\n<p>Some browsers require users to startAudioContext\nwith a user gesture, such as touchStarted in the example below.</p>","itemtype":"method","name":"getAudioContext","return":{"description":"AudioContext for this sketch","type":"Object"},"example":["\n<div><code>\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</div></code>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1257,"description":"<p>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\n<a href=\"https://goo.gl/7K7WLu\" title=\"Google Chrome's autoplay\npolicy\">Google Chrome</a>, which create the Web Audio API's\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/AudioContext\"\ntitle=\"Audio Context @ MDN\">Audio Context</a>\nin a suspended state.</p>\n\n<p>In these browser-specific policies, sound will not play until a user\ninteraction event (i.e. <code>mousePressed()</code>) explicitly resumes\nthe AudioContext, or starts an audio node. This can be accomplished by\ncalling <code>start()</code> on a <code>p5.Oscillator</code>,\n<code> play()</code> on a <code>p5.SoundFile</code>, or simply\n<code>userStartAudio()</code>.</p>\n\n<p><code>userStartAudio()</code> 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 <code>mousePressed()</code> as in the\nexample below. This method utilizes\n<a href=\"https://github.com/tambien/StartAudioContext\">StartAudioContext\n</a>, a library by Yotam Mann (MIT Licence, 2016).</p>","params":[{"name":"element(s)","description":"<p>This argument can be an Element,\n                              Selector String, NodeList, p5.Element,\n                              jQuery Element, or an Array of any of those.</p>\n","type":"Element|Array","optional":true},{"name":"callback","description":"<p>Callback to invoke when the AudioContext\n                              has started</p>\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<div><code>\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</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1477,"description":"<p>Start an oscillator.</p>\n<p>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: <code>userStartAudio()</code>.</p>\n","itemtype":"method","name":"start","params":[{"name":"time","description":"<p>startTime in seconds from now.</p>\n","type":"Number","optional":true},{"name":"frequency","description":"<p>frequency in Hz.</p>\n","type":"Number","optional":true}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1525,"description":"<p>Stop an oscillator. Accepts an optional parameter\nto determine how long (in seconds from now) until the\noscillator stops.</p>\n","itemtype":"method","name":"stop","params":[{"name":"secondsFromNow","description":"<p>Time, in seconds from now.</p>\n","type":"Number"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1544,"description":"<p>Set the amplitude between 0 and 1.0. Or, pass in an object\nsuch as an oscillator to modulate amplitude with an audio signal.</p>\n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"<p>between 0 and 1.0\n                            or a modulating signal/oscillator</p>\n","type":"Number|Object"},{"name":"rampTime","description":"<p>create a fade that lasts rampTime</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\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":1584,"description":"<p>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.</p>\n","itemtype":"method","name":"freq","params":[{"name":"Frequency","description":"<p>Frequency in Hz\n                                      or modulating signal/oscillator</p>\n","type":"Number|Object"},{"name":"rampTime","description":"<p>Ramp time (in seconds)</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>Schedule this event to happen\n                                 at x seconds from now</p>\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<div><code>\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</code></div>"],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1662,"description":"<p>Set type to 'sine', 'triangle', 'sawtooth' or 'square'.</p>\n","itemtype":"method","name":"setType","params":[{"name":"type","description":"<p>'sine', 'triangle', 'sawtooth' or 'square'.</p>\n","type":"String"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1678,"description":"<p>Connect to a p5.sound / Web Audio object.</p>\n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"<p>A p5.sound or Web Audio object</p>\n","type":"Object"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1698,"description":"<p>Disconnect all outputs</p>\n","itemtype":"method","name":"disconnect","class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1721,"description":"<p>Pan between Left (-1) and Right (1)</p>\n","itemtype":"method","name":"pan","params":[{"name":"panning","description":"<p>Number between -1 and 1</p>\n","type":"Number"},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1759,"description":"<p>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.</p>\n","itemtype":"method","name":"phase","params":[{"name":"phase","description":"<p>float between 0.0 and 1.0</p>\n","type":"Number"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1818,"description":"<p>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.</p>\n","itemtype":"method","name":"add","params":[{"name":"number","description":"<p>Constant number to add</p>\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":1838,"description":"<p>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.</p>\n","itemtype":"method","name":"mult","params":[{"name":"number","description":"<p>Constant number to multiply</p>\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":1857,"description":"<p>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.</p>\n","itemtype":"method","name":"scale","params":[{"name":"inMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"inMax","description":"<p>input range maximum</p>\n","type":"Number"},{"name":"outMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"outMax","description":"<p>input range maximum</p>\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":2067,"description":"<p>Play tells the MonoSynth to start playing a note. This method schedules\nthe calling of .triggerAttack and .triggerRelease.</p>\n","itemtype":"method","name":"play","params":[{"name":"note","description":"<p>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 <a href = \"https://github.com/Tonejs/Tone.js/wiki/Instruments\">\n                               Tone</a>. Defaults to 440 hz.</p>\n","type":"String | Number"},{"name":"velocity","description":"<p>velocity of the note to play (ranging from 0 to 1)</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time from now (in seconds) at which to play</p>\n","type":"Number","optional":true},{"name":"sustainTime","description":"<p>time to sustain before releasing the envelope. Defaults to 0.15 seconds.</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>\n"],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2116,"description":"<p>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.</p>\n","params":[{"name":"note","description":"<p>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 <a href = \"https://github.com/Tonejs/Tone.js/wiki/Instruments\">\n                               Tone</a>. Defaults to 440 hz</p>\n","type":"String | Number"},{"name":"velocity","description":"<p>velocity of the note to play (ranging from 0 to 1)</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time from now (in seconds) at which to play</p>\n","type":"Number","optional":true}],"itemtype":"method","name":"triggerAttack","example":["\n<div><code>\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</code></div>"],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2162,"description":"<p>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.</p>\n","params":[{"name":"secondsFromNow","description":"<p>time to trigger the release</p>\n","type":"Number"}],"itemtype":"method","name":"triggerRelease","example":["\n<div><code>\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</code></div>"],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2199,"description":"<p>Set values like a traditional\n<a href=\"https://en.wikipedia.org/wiki/Synthesizer#/media/File:ADSR_parameter.svg\">\nADSR envelope\n</a>.</p>\n","itemtype":"method","name":"setADSR","params":[{"name":"attackTime","description":"<p>Time (in seconds before envelope\n                              reaches Attack Level</p>\n","type":"Number"},{"name":"decayTime","description":"<p>Time (in seconds) before envelope\n                              reaches Decay/Sustain Level</p>\n","type":"Number","optional":true},{"name":"susRatio","description":"<p>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 <code>setRange</code>),\n                              then decayLevel would increase proportionally, to become 0.5.</p>\n","type":"Number","optional":true},{"name":"releaseTime","description":"<p>Time in seconds from now (defaults to 0)</p>\n","type":"Number","optional":true}],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2226,"description":"<p>Getters and Setters</p>\n","itemtype":"property","name":"attack","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2232,"itemtype":"property","name":"decay","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2237,"itemtype":"property","name":"sustain","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2242,"itemtype":"property","name":"release","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2282,"description":"<p>MonoSynth amp</p>\n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"<p>desired volume</p>\n","type":"Number"},{"name":"rampTime","description":"<p>Time to reach new volume</p>\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":2300,"description":"<p>Connect to a p5.sound / Web Audio object.</p>\n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"<p>A p5.sound or Web Audio object</p>\n","type":"Object"}],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2313,"description":"<p>Disconnect all outputs</p>\n","itemtype":"method","name":"disconnect","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2326,"description":"<p>Get rid of the MonoSynth and free up its resources / memory.</p>\n","itemtype":"method","name":"dispose","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2380,"description":"<p>Connect to p5 objects or Web Audio Nodes</p>\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":2392,"description":"<p>Disconnect from soundOut</p>\n","itemtype":"method","name":"disconnect","class":"p5.AudioVoice","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2474,"description":"<p>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.</p>\n","itemtype":"property","name":"notes","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2487,"description":"<p>A PolySynth must have at least 1 voice, defaults to 8</p>\n","itemtype":"property","name":"polyvalue","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2493,"description":"<p>Monosynth that generates the sound for each note that is triggered. The\np5.PolySynth defaults to using the p5.MonoSynth as its voice.</p>\n","itemtype":"property","name":"AudioVoice","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2530,"description":"<p>Play a note by triggering noteAttack and noteRelease with sustain time</p>\n","itemtype":"method","name":"play","params":[{"name":"note","description":"<p>midi note to play (ranging from 0 to 127 - 60 being a middle C)</p>\n","type":"Number","optional":true},{"name":"velocity","description":"<p>velocity of the note to play (ranging from 0 to 1)</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time from now (in seconds) at which to play</p>\n","type":"Number","optional":true},{"name":"sustainTime","description":"<p>time to sustain before releasing the envelope</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2578,"description":"<p>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.</p>\n","itemtype":"method","name":"noteADSR","params":[{"name":"note","description":"<p>Midi note on which ADSR should be set.</p>\n","type":"Number","optional":true},{"name":"attackTime","description":"<p>Time (in seconds before envelope\n                              reaches Attack Level</p>\n","type":"Number","optional":true},{"name":"decayTime","description":"<p>Time (in seconds) before envelope\n                              reaches Decay/Sustain Level</p>\n","type":"Number","optional":true},{"name":"susRatio","description":"<p>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 <code>setRange</code>),\n                              then decayLevel would increase proportionally, to become 0.5.</p>\n","type":"Number","optional":true},{"name":"releaseTime","description":"<p>Time in seconds from now (defaults to 0)</p>\n","type":"Number","optional":true}],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2609,"description":"<p>Set the PolySynths global envelope. This method modifies the envelopes of each\nmonosynth so that all notes are played with this envelope.</p>\n","itemtype":"method","name":"setADSR","params":[{"name":"attackTime","description":"<p>Time (in seconds before envelope\n                               reaches Attack Level</p>\n","type":"Number","optional":true},{"name":"decayTime","description":"<p>Time (in seconds) before envelope\n                               reaches Decay/Sustain Level</p>\n","type":"Number","optional":true},{"name":"susRatio","description":"<p>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 <code>setRange</code>),\n                               then decayLevel would increase proportionally, to become 0.5.</p>\n","type":"Number","optional":true},{"name":"releaseTime","description":"<p>Time in seconds from now (defaults to 0)</p>\n","type":"Number","optional":true}],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2636,"description":"<p>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.</p>\n","itemtype":"method","name":"noteAttack","params":[{"name":"note","description":"<p>midi note on which attack should be triggered.</p>\n","type":"Number","optional":true},{"name":"velocity","description":"<p>velocity of the note to play (ranging from 0 to 1)/</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time from now (in seconds)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2746,"description":"<p>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.</p>\n","itemtype":"method","name":"noteRelease","params":[{"name":"note","description":"<p>midi note on which attack should be triggered.\n                                  If no value is provided, all notes will be released.</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time to trigger the release</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>\n"],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2829,"description":"<p>Connect to a p5.sound / Web Audio object.</p>\n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"<p>A p5.sound or Web Audio object</p>\n","type":"Object"}],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2842,"description":"<p>Disconnect all outputs</p>\n","itemtype":"method","name":"disconnect","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2855,"description":"<p>Get rid of the MonoSynth and free up its resources / memory.</p>\n","itemtype":"method","name":"dispose","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2969,"description":"<p>This module has shims</p>\n","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3105,"description":"<p>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</p>\n","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3492,"description":"<p>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<a href=\"https://github.com/processing/p5.js/wiki/Local-server\">\nlocal server</a> is recommended when loading external files.</p>\n","itemtype":"method","name":"loadSound","params":[{"name":"path","description":"<p>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.</p>\n","type":"String|Array"},{"name":"successCallback","description":"<p>Name of a function to call once file loads</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>Name of a function to call if there is\n                                    an error loading the file.</p>\n","type":"Function","optional":true},{"name":"whileLoading","description":"<p>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.</p>\n","type":"Function","optional":true}],"return":{"description":"Returns a p5.SoundFile","type":"SoundFile"},"example":["\n<div><code>\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</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3672,"description":"<p>Returns true if the sound file finished loading successfully.</p>\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":3688,"description":"<p>Play the p5.SoundFile</p>\n","itemtype":"method","name":"play","params":[{"name":"startTime","description":"<p>(optional) schedule playback to start (in seconds from now).</p>\n","type":"Number","optional":true},{"name":"rate","description":"<p>(optional) playback rate</p>\n","type":"Number","optional":true},{"name":"amp","description":"<p>(optional) amplitude (volume)\n                                    of playback</p>\n","type":"Number","optional":true},{"name":"cueStart","description":"<p>(optional) cue start time in seconds</p>\n","type":"Number","optional":true},{"name":"duration","description":"<p>(optional) duration of playback in seconds</p>\n","type":"Number","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3795,"description":"<p>p5.SoundFile has two play modes: <code>restart</code> and\n<code>sustain</code>. 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.</p>\n","itemtype":"method","name":"playMode","params":[{"name":"str","description":"<p>'restart' or 'sustain' or 'untilDone'</p>\n","type":"String"}],"example":["\n<div><code>\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 </code></div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3854,"description":"<p>Pauses a file that is currently playing. If the file is not\nplaying, then nothing will happen.</p>\n<p>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().</p>\n","itemtype":"method","name":"pause","params":[{"name":"startTime","description":"<p>(optional) schedule event to occur\n                             seconds from now</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code>\n</div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3911,"description":"<p>Loop the p5.SoundFile. Accepts optional parameters to set the\nplayback rate, playback volume, loopStart, loopEnd.</p>\n","itemtype":"method","name":"loop","params":[{"name":"startTime","description":"<p>(optional) schedule event to occur\n                            seconds from now</p>\n","type":"Number","optional":true},{"name":"rate","description":"<p>(optional) playback rate</p>\n","type":"Number","optional":true},{"name":"amp","description":"<p>(optional) playback volume</p>\n","type":"Number","optional":true},{"name":"cueLoopStart","description":"<p>(optional) startTime in seconds</p>\n","type":"Number","optional":true},{"name":"duration","description":"<p>(optional) loop duration in seconds</p>\n","type":"Number","optional":true}],"example":["\n <div><code>\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 </code>\n </div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3955,"description":"<p>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.</p>\n","itemtype":"method","name":"setLoop","params":[{"name":"Boolean","description":"<p>set looping to true or false</p>\n","type":"Boolean"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3980,"description":"<p>Returns 'true' if a p5.SoundFile is currently looping and playing, 'false' if not.</p>\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":4000,"description":"<p>Returns true if a p5.SoundFile is playing, false if not (i.e.\npaused or stopped).</p>\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":4013,"description":"<p>Returns true if a p5.SoundFile is paused, false if not (i.e.\nplaying or stopped).</p>\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":4026,"description":"<p>Stop soundfile playback.</p>\n","itemtype":"method","name":"stop","params":[{"name":"startTime","description":"<p>(optional) schedule event to occur\n                            in seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4083,"description":"<p>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 <code>rampTime</code> parameter. For more\ncomplex fades, see the Envelope class.</p>\n<p>Alternately, you can pass in a signal source such as an\noscillator to modulate the amplitude with an audio signal.</p>\n","itemtype":"method","name":"setVolume","params":[{"name":"volume","description":"<p>Volume (amplitude) between 0.0\n                                   and 1.0 or modulating signal/oscillator</p>\n","type":"Number|Object"},{"name":"rampTime","description":"<p>Fade for t seconds</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>Schedule this event to happen at\n                               t seconds in the future</p>\n","type":"Number","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4128,"description":"<p>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).</p>\n","itemtype":"method","name":"pan","params":[{"name":"panValue","description":"<p>Set the stereo panner</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                                seconds from now</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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 </div></code>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4171,"description":"<p>Returns the current stereo pan position (-1.0 to 1.0)</p>\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":4185,"description":"<p>Set the playback rate of a sound file. Will change the speed and the pitch.\nValues less than zero will reverse the audio buffer.</p>\n","itemtype":"method","name":"rate","params":[{"name":"playbackRate","description":"<p>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.</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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 </code>\n </div>\n"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4275,"description":"<p>Returns the duration of a sound file in seconds.</p>\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":4291,"description":"<p>Return the current position of the p5.SoundFile playhead, in seconds.\nTime is relative to the normal buffer direction, so if <code>reverseBuffer</code>\nhas been called, currentTime will count backwards.</p>\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":4305,"description":"<p>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 <code>play</code> or <code>loop</code> methods.</p>\n","itemtype":"method","name":"jump","params":[{"name":"cueTime","description":"<p>cueTime of the soundFile in seconds.</p>\n","type":"Number"},{"name":"duration","description":"<p>duration in seconds.</p>\n","type":"Number"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4336,"description":"<p>Return the number of channels in a sound file.\nFor example, Mono = 1, Stereo = 2.</p>\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":4349,"description":"<p>Return the sample rate of the sound file.</p>\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":4361,"description":"<p>Return the number of samples in a sound file.\nEqual to sampleRate * duration.</p>\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":4374,"description":"<p>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.</p>\n<p>Inspired by Wavesurfer.js.</p>\n","itemtype":"method","name":"getPeaks","params":[{"name":"length","description":"<p>length is the size of the returned array.\n                         Larger length results in more precision.\n                         Defaults to 5*width of the browser window.</p>\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":4435,"description":"<p>Reverses the p5.SoundFile's buffer source.\nPlayback must be handled separately (see example).</p>\n","itemtype":"method","name":"reverseBuffer","example":["\n<div><code>\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 </code>\n </div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4488,"description":"<p>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.</p>\n","itemtype":"method","name":"onended","params":[{"name":"callback","description":"<p>function to call when the\n                            soundfile has ended.</p>\n","type":"Function"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4553,"description":"<p>Connects the output of a p5sound object to input of another\np5.sound object. For example, you may connect a p5.SoundFile to an\nFFT or an Effect. If no parameter is given, it will connect to\nthe master output. Most p5sound objects connect to the master\noutput when they are created.</p>\n","itemtype":"method","name":"connect","params":[{"name":"object","description":"<p>Audio object that accepts an input</p>\n","type":"Object","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4577,"description":"<p>Disconnects the output of this p5sound object.</p>\n","itemtype":"method","name":"disconnect","class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4590,"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4597,"description":"<p>Reset the source for this SoundFile to a\nnew path (URL).</p>\n","itemtype":"method","name":"setPath","params":[{"name":"path","description":"<p>path to audio file</p>\n","type":"String"},{"name":"callback","description":"<p>Callback</p>\n","type":"Function"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4614,"description":"<p>Replace the current Audio Buffer with a new Buffer.</p>\n","itemtype":"method","name":"setBuffer","params":[{"name":"buf","description":"<p>Array of Float32 Array(s). 2 Float32 Arrays\n                   will create a stereo source. 1 will create\n                   a mono source.</p>\n","type":"Array"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4708,"description":"<p>processPeaks returns an array of timestamps where it thinks there is a beat.</p>\n<p>This is an asynchronous function that processes the soundfile in an offline audio context,\nand sends the results to your callback function.</p>\n<p>The process involves running the soundfile through a lowpass filter, and finding all of the\npeaks above the initial threshold. If the total number of peaks are below the minimum number of peaks,\nit decreases the threshold and re-runs the analysis until either minPeaks or minThreshold are reached.</p>\n","itemtype":"method","name":"processPeaks","params":[{"name":"callback","description":"<p>a function to call once this data is returned</p>\n","type":"Function"},{"name":"initThreshold","description":"<p>initial threshold defaults to 0.9</p>\n","type":"Number","optional":true},{"name":"minThreshold","description":"<p>minimum threshold defaults to 0.22</p>\n","type":"Number","optional":true},{"name":"minPeaks","description":"<p>minimum number of peaks defaults to 200</p>\n","type":"Number","optional":true}],"return":{"description":"Array of timestamped peaks","type":"Array"},"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4929,"description":"<p>Schedule events to trigger every time a MediaElement\n(audio/video) reaches a playback cue point.</p>\n<p>Accepts a callback function, a time (in seconds) at which to trigger\nthe callback, and an optional parameter for the callback.</p>\n<p>Time will be passed as the first parameter to the callback function,\nand param will be the second parameter.</p>\n","itemtype":"method","name":"addCue","params":[{"name":"time","description":"<p>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.</p>\n","type":"Number"},{"name":"callback","description":"<p>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.</p>\n","type":"Function"},{"name":"value","description":"<p>An object to be passed as the\n                           second parameter to the\n                           callback function.</p>\n","type":"Object","optional":true}],"return":{"description":"id ID of this cue,\n                    useful for removeCue(id)","type":"Number"},"example":["\n<div><code>\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</code></div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4999,"description":"<p>Remove a callback based on its ID. The ID is returned by the\naddCue method.</p>\n","itemtype":"method","name":"removeCue","params":[{"name":"id","description":"<p>ID of the cue, as returned by addCue</p>\n","type":"Number"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5025,"description":"<p>Remove all of the callbacks that had originally been scheduled\nvia the addCue method.</p>\n","itemtype":"method","name":"clearCues","class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5054,"description":"<p>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\n<a href=\"/docs/reference/#/p5.SoundFile/getBlob\">getBlob</a></p>\n","itemtype":"method","name":"save","params":[{"name":"fileName","description":"<p>name of the resulting .wav file.</p>\n","type":"String","optional":true}],"example":["\n <div><code>\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</code></div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5085,"description":"<p>This method is useful for sending a SoundFile to a server. It returns the\n.wav-encoded audio data as a \"<a target=\"_blank\" title=\"Blob reference at\nMDN\" href=\"https://developer.mozilla.org/en-US/docs/Web/API/Blob\">Blob</a>\".\nA Blob is a file-like data object that can be uploaded to a server\nwith an <a href=\"/docs/reference/#/p5/httpDo\">http</a> request. We'll\nuse the <code>httpDo</code> options object to send a POST request with some\nspecific options: we encode the request as <code>multipart/form-data</code>,\nand attach the blob as one of the form values using <code>FormData</code>.</p>\n","itemtype":"method","name":"getBlob","return":{"description":"A file-like data object","type":"Blob"},"example":["\n <div><code>\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 `<Audio>` Element accepts Object URL's\n   createAudio(blobUrl).showControls();\n\n   createDiv();\n\n   // The ObjectURL exists as long as this tab is open\n   let input = createInput(blobUrl);\n   input.attribute('readonly', true);\n   input.mouseClicked(function() { input.elt.select() });\n }\n\n</code></div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5276,"description":"<p>Connects to the p5sound instance (master output) by default.\nOptionally, you can pass in a specific source (i.e. a soundfile).</p>\n","itemtype":"method","name":"setInput","params":[{"name":"snd","description":"<p>set the sound source\n                                     (optional, defaults to\n                                     master output)</p>\n","type":"SoundObject|undefined","optional":true},{"name":"smoothing","description":"<p>a range between 0.0 and 1.0\n                                      to smooth amplitude readings</p>\n","type":"Number|undefined","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5367,"description":"<p>Returns a single Amplitude reading at the moment it is called.\nFor continuous readings, run in the draw loop.</p>\n","itemtype":"method","name":"getLevel","params":[{"name":"channel","description":"<p>Optionally return only channel 0 (left) or 1 (right)</p>\n","type":"Number","optional":true}],"return":{"description":"Amplitude as a number between 0.0 and 1.0","type":"Number"},"example":["\n<div><code>\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</code></div>"],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5421,"description":"<p>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.</p>\n","itemtype":"method","name":"toggleNormalize","params":[{"name":"boolean","description":"<p>set normalize to true (1) or false (0)</p>\n","type":"Boolean","optional":true}],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5449,"description":"<p>Smooth Amplitude analysis by averaging with the last analysis\nframe. Off by default.</p>\n","itemtype":"method","name":"smooth","params":[{"name":"set","description":"<p>smoothing from 0.0 <= 1</p>\n","type":"Number"}],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5625,"description":"<p>Set the input source for the FFT analysis. If no source is\nprovided, FFT will analyze all sound in the sketch.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"source","description":"<p>p5.sound object (or web audio API source node)</p>\n","type":"Object","optional":true}],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5648,"description":"<p>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.</p>\n","itemtype":"method","name":"waveform","params":[{"name":"bins","description":"<p>Must be a power of two between\n                          16 and 1024. Defaults to 1024.</p>\n","type":"Number","optional":true},{"name":"precision","description":"<p>If any value is provided, will return results\n                            in a Float32 Array which is more precise\n                            than a regular array.</p>\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":5699,"description":"<p>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\n<code>getEnergy()</code>.</p>\n","itemtype":"method","name":"analyze","params":[{"name":"bins","description":"<p>Must be a power of two between\n                           16 and 1024. Defaults to 1024.</p>\n","type":"Number","optional":true},{"name":"scale","description":"<p>If \"dB,\" returns decibel\n                           float measurements between\n                           -140 and 0 (max).\n                           Otherwise returns integers from 0-255.</p>\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<div><code>\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</code></div>\n\n"],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5795,"description":"<p>Returns the amount of energy (volume) at a specific\n<a href=\"https://en.wikipedia.org/wiki/Audio_frequency\" target=\"_blank\">\nfrequency</a>, 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).\n<em>NOTE: analyze() must be called prior to getEnergy(). Analyze()\ntells the FFT to analyze frequency data, and getEnergy() uses\nthe results determine the value at a specific frequency or\nrange of frequencies.</em></p></p>\n","itemtype":"method","name":"getEnergy","params":[{"name":"frequency1","description":"<p>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.</p>\n","type":"Number|String"},{"name":"frequency2","description":"<p>If a second frequency is given,\n                              will return average amount of\n                              energy that exists between the\n                              two frequencies.</p>\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":5882,"description":"<p>Returns the\n<a href=\"http://en.wikipedia.org/wiki/Spectral_centroid\" target=\"_blank\">\nspectral centroid</a> of the input signal.\n<em>NOTE: analyze() must be called prior to getCentroid(). Analyze()\ntells the FFT to analyze frequency data, and getCentroid() uses\nthe results determine the spectral centroid.</em></p></p>\n","itemtype":"method","name":"getCentroid","return":{"description":"Spectral Centroid Frequency   Frequency of the spectral centroid in Hz.","type":"Number"},"example":["\n<div><code>\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 </code></div>"],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5968,"description":"<p>Smooth FFT analysis by averaging with the last analysis frame.</p>\n","itemtype":"method","name":"smooth","params":[{"name":"smoothing","description":"<p>0.0 < smoothing < 1.0.\n                             Defaults to 0.8.</p>\n","type":"Number"}],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5994,"description":"<p>Returns an array of average amplitude values for a given number\nof frequency bands split equally. N defaults to 16.\n<em>NOTE: 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.</em></p></p>\n","itemtype":"method","name":"linAverages","params":[{"name":"N","description":"<p>Number of returned frequency groups</p>\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":6028,"description":"<p>Returns an array of average amplitude values of the spectrum, for a given\nset of <a href=\"https://en.wikipedia.org/wiki/Octave_band\" target=\"_blank\">\nOctave Bands</a>\n<em>NOTE: 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.</em></p></p>\n","itemtype":"method","name":"logAverages","params":[{"name":"octaveBands","description":"<p>Array of Octave Bands objects for grouping</p>\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":6063,"description":"<p>Calculates and Returns the 1/N\n<a href=\"https://en.wikipedia.org/wiki/Octave_band\" target=\"_blank\">Octave Bands</a>\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.</p>\n","itemtype":"method","name":"getOctaveBands","params":[{"name":"N","description":"<p>Specifies the 1/N type of generated octave bands</p>\n","type":"Number"},{"name":"fCtr0","description":"<p>Minimum central frequency for the lowest band</p>\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":6209,"description":"<p>Fade to value, for smooth transitions</p>\n","itemtype":"method","name":"fade","params":[{"name":"value","description":"<p>Value to set this signal</p>\n","type":"Number"},{"name":"secondsFromNow","description":"<p>Length of fade, in seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6223,"description":"<p>Connect a p5.sound object or Web Audio node to this\np5.Signal so that its amplitude values can be scaled.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"input","description":"","type":"Object"}],"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6240,"description":"<p>Add a constant value to this audio signal,\nand return the resulting audio signal. Does\nnot change the value of the original signal,\ninstead it returns a new p5.SignalAdd.</p>\n","itemtype":"method","name":"add","params":[{"name":"number","description":"","type":"Number"}],"return":{"description":"object","type":"p5.Signal"},"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6262,"description":"<p>Multiply this signal by a constant value,\nand return the resulting audio signal. Does\nnot change the value of the original signal,\ninstead it returns a new p5.SignalMult.</p>\n","itemtype":"method","name":"mult","params":[{"name":"number","description":"<p>to multiply</p>\n","type":"Number"}],"return":{"description":"object","type":"p5.Signal"},"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6284,"description":"<p>Scale this signal value to a given range,\nand return the result as an audio signal. Does\nnot change the value of the original signal,\ninstead it returns a new p5.SignalScale.</p>\n","itemtype":"method","name":"scale","params":[{"name":"number","description":"<p>to multiply</p>\n","type":"Number"},{"name":"inMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"inMax","description":"<p>input range maximum</p>\n","type":"Number"},{"name":"outMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"outMax","description":"<p>input range maximum</p>\n","type":"Number"}],"return":{"description":"object","type":"p5.Signal"},"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6397,"description":"<p>Time until envelope reaches attackLevel</p>\n","itemtype":"property","name":"attackTime","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6402,"description":"<p>Level once attack is complete.</p>\n","itemtype":"property","name":"attackLevel","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6408,"description":"<p>Time until envelope reaches decayLevel.</p>\n","itemtype":"property","name":"decayTime","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6414,"description":"<p>Level after decay. The envelope will sustain here until it is released.</p>\n","itemtype":"property","name":"decayLevel","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6420,"description":"<p>Duration of the release portion of the envelope.</p>\n","itemtype":"property","name":"releaseTime","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6426,"description":"<p>Level at the end of the release.</p>\n","itemtype":"property","name":"releaseLevel","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6463,"description":"<p>Reset the envelope with a series of time/value pairs.</p>\n","itemtype":"method","name":"set","params":[{"name":"attackTime","description":"<p>Time (in seconds) before level\n                               reaches attackLevel</p>\n","type":"Number"},{"name":"attackLevel","description":"<p>Typically an amplitude between\n                               0.0 and 1.0</p>\n","type":"Number"},{"name":"decayTime","description":"<p>Time</p>\n","type":"Number"},{"name":"decayLevel","description":"<p>Amplitude (In a standard ADSR envelope,\n                               decayLevel = sustainLevel)</p>\n","type":"Number"},{"name":"releaseTime","description":"<p>Release Time (in seconds)</p>\n","type":"Number"},{"name":"releaseLevel","description":"<p>Amplitude</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>\n"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6525,"description":"<p>Set values like a traditional\n<a href=\"https://en.wikipedia.org/wiki/Synthesizer#/media/File:ADSR_parameter.svg\">\nADSR envelope\n</a>.</p>\n","itemtype":"method","name":"setADSR","params":[{"name":"attackTime","description":"<p>Time (in seconds before envelope\n                              reaches Attack Level</p>\n","type":"Number"},{"name":"decayTime","description":"<p>Time (in seconds) before envelope\n                              reaches Decay/Sustain Level</p>\n","type":"Number","optional":true},{"name":"susRatio","description":"<p>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 <code>setRange</code>),\n                              then decayLevel would increase proportionally, to become 0.5.</p>\n","type":"Number","optional":true},{"name":"releaseTime","description":"<p>Time in seconds from now (defaults to 0)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6594,"description":"<p>Set max (attackLevel) and min (releaseLevel) of envelope.</p>\n","itemtype":"method","name":"setRange","params":[{"name":"aLevel","description":"<p>attack level (defaults to 1)</p>\n","type":"Number"},{"name":"rLevel","description":"<p>release level (defaults to 0)</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6667,"description":"<p>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.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"inputs","description":"<p>A p5.sound object or\n                              Web Audio Param.</p>\n","type":"Object","optional":true,"multiple":true}],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6685,"description":"<p>Set whether the envelope ramp is linear (default) or exponential.\nExponential ramps can be useful because we perceive amplitude\nand frequency logarithmically.</p>\n","itemtype":"method","name":"setExp","params":[{"name":"isExp","description":"<p>true is exponential, false is linear</p>\n","type":"Boolean"}],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6708,"description":"<p>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 <a href=\"\nhttp://docs.webplatform.org/wiki/apis/webaudio/AudioParam\">\nWeb Audio Audio Param.</a></p>","itemtype":"method","name":"play","params":[{"name":"unit","description":"<p>A p5.sound object or\n                              Web Audio Param.</p>\n","type":"Object"},{"name":"startTime","description":"<p>time from now (in seconds) at which to play</p>\n","type":"Number","optional":true},{"name":"sustainTime","description":"<p>time to sustain before releasing the envelope</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6779,"description":"<p>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 <a href=\"\nhttp://docs.webplatform.org/wiki/apis/webaudio/AudioParam\">\nWeb Audio Param</a>.</p>\n","itemtype":"method","name":"triggerAttack","params":[{"name":"unit","description":"<p>p5.sound Object or Web Audio Param</p>\n","type":"Object"},{"name":"secondsFromNow","description":"<p>time from now (in seconds)</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6887,"description":"<p>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.</p>\n","itemtype":"method","name":"triggerRelease","params":[{"name":"unit","description":"<p>p5.sound Object or Web Audio Param</p>\n","type":"Object"},{"name":"secondsFromNow","description":"<p>time to trigger the release</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6981,"description":"<p>Exponentially ramp to a value using the first two\nvalues from <code><a href=\"#/p5.Envelope/setADSR\">setADSR(attackTime, decayTime)</a></code>\nas <a href=\"https://en.wikipedia.org/wiki/RC_time_constant\">\ntime constants</a> for simple exponential ramps.\nIf the value is higher than current value, it uses attackTime,\nwhile a decrease uses decayTime.</p>\n","itemtype":"method","name":"ramp","params":[{"name":"unit","description":"<p>p5.sound Object or Web Audio Param</p>\n","type":"Object"},{"name":"secondsFromNow","description":"<p>When to trigger the ramp</p>\n","type":"Number"},{"name":"v","description":"<p>Target value</p>\n","type":"Number"},{"name":"v2","description":"<p>Second target value (optional)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7095,"description":"<p>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.</p>\n","itemtype":"method","name":"add","params":[{"name":"number","description":"<p>Constant number to add</p>\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":7114,"description":"<p>Multiply the p5.Envelope's output amplitude\nby a fixed value. Calling this method\nagain will override the initial mult() with new values.</p>\n","itemtype":"method","name":"mult","params":[{"name":"number","description":"<p>Constant number to multiply</p>\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":7133,"description":"<p>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.</p>\n","itemtype":"method","name":"scale","params":[{"name":"inMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"inMax","description":"<p>input range maximum</p>\n","type":"Number"},{"name":"outMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"outMax","description":"<p>input range maximum</p>\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":7268,"description":"<p>Set the width of a Pulse object (an oscillator that implements\nPulse Width Modulation).</p>\n","itemtype":"method","name":"width","params":[{"name":"width","description":"<p>Width between the pulses (0 to 1.0,\n                       defaults to 0)</p>\n","type":"Number","optional":true}],"class":"p5.Pulse","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7484,"description":"<p>Set type of noise to 'white', 'pink' or 'brown'.\nWhite is the default.</p>\n","itemtype":"method","name":"setType","params":[{"name":"type","description":"<p>'white', 'pink' or 'brown'</p>\n","type":"String","optional":true}],"class":"p5.Noise","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7630,"itemtype":"property","name":"input","type":"GainNode","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7634,"itemtype":"property","name":"output","type":"GainNode","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7639,"itemtype":"property","name":"stream","type":"MediaStream|null","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7644,"itemtype":"property","name":"mediaStream","type":"MediaStreamAudioSourceNode|null","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7649,"itemtype":"property","name":"currentSource","type":"Number|null","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7654,"description":"<p>Client must allow browser to access their microphone / audioin source.\nDefault: false. Will become true when the client enables access.</p>\n","itemtype":"property","name":"enabled","type":"Boolean","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7662,"description":"<p>Input amplitude, connect to it by default but not to master out</p>\n","itemtype":"property","name":"amplitude","type":"p5.Amplitude","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7678,"description":"<p>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.<br/></p>\n<p>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.</p>\n","itemtype":"method","name":"start","params":[{"name":"successCallback","description":"<p>Name of a function to call on\n                                  success.</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>Name of a function to call if\n                                  there was an error. For example,\n                                  some browsers do not support\n                                  getUserMedia.</p>\n","type":"Function","optional":true}],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7733,"description":"<p>Turn the AudioIn off. If the AudioIn is stopped, it cannot getLevel().\nIf re-starting, the user may be prompted for permission access.</p>\n","itemtype":"method","name":"stop","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7752,"description":"<p>Connect to an audio unit. If no parameter is provided, will\nconnect to the master output (i.e. your speakers).<br/></p>\n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"<p>An object that accepts audio input,\n                        such as an FFT</p>\n","type":"Object","optional":true}],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7776,"description":"<p>Disconnect the AudioIn from all audio units. For example, if\nconnect() had been called, disconnect() will stop sending\nsignal to your speakers.<br/></p>\n","itemtype":"method","name":"disconnect","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7793,"description":"<p>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). <em>NOTE: AudioIn must\n.start() before using .getLevel().</em><br/></p>\n","itemtype":"method","name":"getLevel","params":[{"name":"smoothing","description":"<p>Smoothing is 0.0 by default.\n                             Smooths values based on previous values.</p>\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":7815,"description":"<p>Set amplitude (volume) of a mic input between 0 and 1.0. <br/></p>\n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"<p>between 0 and 1.0</p>\n","type":"Number"},{"name":"time","description":"<p>ramp time (optional)</p>\n","type":"Number","optional":true}],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7837,"description":"<p>Returns a list of available input sources. This is a wrapper\nfor <a title=\"MediaDevices.enumerateDevices() - Web APIs | MDN\" target=\"_blank\" href=\n \"<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\"\">https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\"</a></p>\n<blockquote>\n<p>and it returns a Promise.</p>\n</blockquote>\n","itemtype":"method","name":"getSources","params":[{"name":"successCallback","description":"<p>This callback function handles the sources when they\n                                     have been enumerated. The callback function\n                                     receives the deviceList array as its only argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>This optional callback receives the error\n                                   message as its argument.</p>\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 <div><code>\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 </code></div>"],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7896,"description":"<p>Set the input source. Accepts a number representing a\nposition in the array returned by getSources().\nThis is only available in browsers that support\n<a title=\"MediaDevices.enumerateDevices() - Web APIs | MDN\" target=\"_blank\" href=\n\"<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\"\">https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\"</a></p>\n<blockquote>\n<p>navigator.mediaDevices.enumerateDevices()</a>.<br/></p>\n</blockquote>\n","itemtype":"method","name":"setSource","params":[{"name":"num","description":"<p>position of input source in the array</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>"],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8107,"description":"<p>The p5.EQ is built with abstracted p5.Filter objects.\nTo modify any bands, use methods of the <a\nhref=\"/reference/#/p5.Filter\" title=\"p5.Filter reference\">\np5.Filter</a> API, especially <code>gain</code> and <code>freq</code>.\nBands are stored in an array, with indices 0 - 3, or 0 - 7</p>\n","itemtype":"property","name":"bands","type":"Array","class":"p5.EQ","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8148,"description":"<p>Process an input by connecting it to the EQ</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>Audio source</p>\n","type":"Object"}],"class":"p5.EQ","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8321,"description":"<p><a title=\"Web Audio Panner docs\"  href=\n\"https://developer.mozilla.org/en-US/docs/Web/API/PannerNode\">\nWeb Audio Spatial Panner Node</a></p>\n<p>Properties include</p>\n<ul>\n<li><a title=\"w3 spec for Panning Model\"\nhref=\"<a href=\"https://www.w3.org/TR/webaudio/#idl-def-PanningModelType\"\">https://www.w3.org/TR/webaudio/#idl-def-PanningModelType\"</a><blockquote>\n<p>panningModel</a>: \"equal power\" or \"HRTF\"</p>\n</blockquote>\n</li>\n<li><a title=\"w3 spec for Distance Model\"\nhref=\"<a href=\"https://www.w3.org/TR/webaudio/#idl-def-DistanceModelType\"\">https://www.w3.org/TR/webaudio/#idl-def-DistanceModelType\"</a><blockquote>\n<p>distanceModel</a>: \"linear\", \"inverse\", or \"exponential\"</p>\n</blockquote>\n</li>\n</ul>\n","itemtype":"property","name":"panner","type":"AudioNode","class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8346,"description":"<p>Connect an audio sorce</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>Input source</p>\n","type":"Object"}],"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8357,"description":"<p>Set the X,Y,Z position of the Panner</p>\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":8375,"description":"<p>Getter and setter methods for position coordinates</p>\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":8382,"description":"<p>Getter and setter methods for position coordinates</p>\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":8389,"description":"<p>Getter and setter methods for position coordinates</p>\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":8438,"description":"<p>Set the X,Y,Z position of the Panner</p>\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":8456,"description":"<p>Getter and setter methods for orient coordinates</p>\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":8463,"description":"<p>Getter and setter methods for orient coordinates</p>\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":8470,"description":"<p>Getter and setter methods for orient coordinates</p>\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":8519,"description":"<p>Set the rolloff factor and max distance</p>\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":8532,"description":"<p>Maxium distance between the source and the listener</p>\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":8548,"description":"<p>How quickly the volume is reduced as the source moves away from the listener</p>\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":8885,"description":"<p>The p5.Delay is built with two\n<a href=\"http://www.w3.org/TR/webaudio/#DelayNode\">\nWeb Audio Delay Nodes</a>, one for each stereo channel.</p>\n","itemtype":"property","name":"leftDelay","type":"DelayNode","class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8895,"description":"<p>The p5.Delay is built with two\n<a href=\"http://www.w3.org/TR/webaudio/#DelayNode\">\nWeb Audio Delay Nodes</a>, one for each stereo channel.</p>\n","itemtype":"property","name":"rightDelay","type":"DelayNode","class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8942,"description":"<p>Add delay to an audio signal according to a set\nof delay parameters.</p>\n","itemtype":"method","name":"process","params":[{"name":"Signal","description":"<p>An object that outputs audio</p>\n","type":"Object"},{"name":"delayTime","description":"<p>Time (in seconds) of the delay/echo.\n                             Some browsers limit delayTime to\n                             1 second.</p>\n","type":"Number","optional":true},{"name":"feedback","description":"<p>sends the delay back through itself\n                             in a loop that decreases in volume\n                             each time.</p>\n","type":"Number","optional":true},{"name":"lowPass","description":"<p>Cutoff frequency. Only frequencies\n                             below the lowPass will be part of the\n                             delay.</p>\n","type":"Number","optional":true}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8984,"description":"<p>Set the delay (echo) time, in seconds. Usually this value will be\na floating point number between 0.0 and 1.0.</p>\n","itemtype":"method","name":"delayTime","params":[{"name":"delayTime","description":"<p>Time (in seconds) of the delay</p>\n","type":"Number"}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9005,"description":"<p>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</p>\n","itemtype":"method","name":"feedback","params":[{"name":"feedback","description":"<p>0.0 to 1.0, or an object such as an\n                                Oscillator that can be used to\n                                modulate this param</p>\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":9036,"description":"<p>Set a lowpass filter frequency for the delay. A lowpass filter\nwill cut off any frequencies higher than the filter frequency.</p>\n","itemtype":"method","name":"filter","params":[{"name":"cutoffFreq","description":"<p>A lowpass filter will cut off any\n                            frequencies higher than the filter frequency.</p>\n","type":"Number|Object"},{"name":"res","description":"<p>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.</p>\n","type":"Number|Object"}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9057,"description":"<p>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.</p>\n","itemtype":"method","name":"setType","params":[{"name":"type","description":"<p>'pingPong' (1) or 'default' (0)</p>\n","type":"String|Number"}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9109,"description":"<p>Set the output level of the delay effect.</p>\n","itemtype":"method","name":"amp","params":[{"name":"volume","description":"<p>amplitude between 0 and 1.0</p>\n","type":"Number"},{"name":"rampTime","description":"<p>create a fade that lasts rampTime</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9120,"description":"<p>Send output to a p5.sound or web audio object</p>\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":9128,"description":"<p>Disconnect all output.</p>\n","itemtype":"method","name":"disconnect","class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9265,"description":"<p>Connect a source to the reverb, and assign reverb parameters.</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>p5.sound / Web Audio object with a sound\n                         output.</p>\n","type":"Object"},{"name":"seconds","description":"<p>Duration of the reverb, in seconds.\n                         Min: 0, Max: 10. Defaults to 3.</p>\n","type":"Number","optional":true},{"name":"decayRate","description":"<p>Percentage of decay with each echo.\n                          Min: 0, Max: 100. Defaults to 2.</p>\n","type":"Number","optional":true},{"name":"reverse","description":"<p>Play the reverb backwards or forwards.</p>\n","type":"Boolean","optional":true}],"class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9301,"description":"<p>Set the reverb settings. Similar to .process(), but without\nassigning a new input.</p>\n","itemtype":"method","name":"set","params":[{"name":"seconds","description":"<p>Duration of the reverb, in seconds.\n                         Min: 0, Max: 10. Defaults to 3.</p>\n","type":"Number","optional":true},{"name":"decayRate","description":"<p>Percentage of decay with each echo.\n                          Min: 0, Max: 100. Defaults to 2.</p>\n","type":"Number","optional":true},{"name":"reverse","description":"<p>Play the reverb backwards or forwards.</p>\n","type":"Boolean","optional":true}],"class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9336,"description":"<p>Set the output level of the reverb effect.</p>\n","itemtype":"method","name":"amp","params":[{"name":"volume","description":"<p>amplitude between 0 and 1.0</p>\n","type":"Number"},{"name":"rampTime","description":"<p>create a fade that lasts rampTime</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9347,"description":"<p>Send output to a p5.sound or web audio object</p>\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":9355,"description":"<p>Disconnect all output.</p>\n","itemtype":"method","name":"disconnect","class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9461,"description":"<p>Internally, the p5.Convolver uses the a\n<a href=\"http://www.w3.org/TR/webaudio/#ConvolverNode\">\nWeb Audio Convolver Node</a>.</p>\n","itemtype":"property","name":"convolverNode","type":"ConvolverNode","class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9489,"description":"<p>Create a p5.Convolver. Accepts a path to a soundfile\nthat will be used to generate an impulse response.</p>\n","itemtype":"method","name":"createConvolver","params":[{"name":"path","description":"<p>path to a sound file</p>\n","type":"String"},{"name":"callback","description":"<p>function to call if loading is successful.\n                              The object will be passed in as the argument\n                              to the callback function.</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to call if loading is not successful.\n                              A custom error will be passed in as the argument\n                              to the callback function.</p>\n","type":"Function","optional":true}],"return":{"description":"","type":"p5.Convolver"},"example":["\n<div><code>\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 master output...\n  sound.disconnect();\n\n  // ...and process with cVerb\n  // so that we only hear the convolution\n  cVerb.process(sound);\n}\n\nfunction playSound() {\n  sound.play();\n}\n</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9635,"description":"<p>Connect a source to the convolver.</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>p5.sound / Web Audio object with a sound\n                         output.</p>\n","type":"Object"}],"example":["\n<div><code>\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 master output...\n  sound.disconnect();\n\n  // ...and process with cVerb\n  // so that we only hear the convolution\n  cVerb.process(sound);\n}\n\nfunction playSound() {\n  sound.play();\n}\n\n</code></div>"],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9682,"description":"<p>If you load multiple impulse files using the .addImpulse method,\nthey will be stored as Objects in this Array. Toggle between them\nwith the <code>toggleImpulse(id)</code> method.</p>\n","itemtype":"property","name":"impulses","type":"Array","class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9693,"description":"<p>Load and assign a new Impulse Response to the p5.Convolver.\nThe impulse is added to the <code>.impulses</code> array. Previous\nimpulses can be accessed with the <code>.toggleImpulse(id)</code>\nmethod.</p>\n","itemtype":"method","name":"addImpulse","params":[{"name":"path","description":"<p>path to a sound file</p>\n","type":"String"},{"name":"callback","description":"<p>function (optional)</p>\n","type":"Function"},{"name":"errorCallback","description":"<p>function (optional)</p>\n","type":"Function"}],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9713,"description":"<p>Similar to .addImpulse, except that the <code>.impulses</code>\nArray is reset to save memory. A new <code>.impulses</code>\narray is created with this impulse as the only item.</p>\n","itemtype":"method","name":"resetImpulse","params":[{"name":"path","description":"<p>path to a sound file</p>\n","type":"String"},{"name":"callback","description":"<p>function (optional)</p>\n","type":"Function"},{"name":"errorCallback","description":"<p>function (optional)</p>\n","type":"Function"}],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9735,"description":"<p>If you have used <code>.addImpulse()</code> to add multiple impulses\nto a p5.Convolver, then you can use this method to toggle between\nthe items in the <code>.impulses</code> 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 <code>.impulses\n</code> Array (Number).<br/>\nYou can access the objects in the .impulses Array directly. Each\nObject has two attributes: an <code>.audioBuffer</code> (type:\nWeb Audio <a href=\"\nhttp://webaudio.github.io/web-audio-api/#the-audiobuffer-interface\">\nAudioBuffer)</a> and a <code>.name</code>, a String that corresponds\nwith the original filename.</p>\n","itemtype":"method","name":"toggleImpulse","params":[{"name":"id","description":"<p>Identify the impulse by its original filename\n                          (String), or by its position in the\n                          <code>.impulses</code> Array (Number).</p>\n","type":"String|Number"}],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9903,"description":"<p>Set the global tempo, in beats per minute, for all\np5.Parts. This method will impact all active p5.Parts.</p>\n","itemtype":"method","name":"setBPM","params":[{"name":"BPM","description":"<p>Beats Per Minute</p>\n","type":"Number"},{"name":"rampTime","description":"<p>Seconds from now</p>\n","type":"Number"}],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9990,"description":"<p>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.</p>\n","itemtype":"property","name":"sequence","type":"Array","class":"p5.Phrase","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10076,"description":"<p>Set the tempo of this part, in Beats Per Minute.</p>\n","itemtype":"method","name":"setBPM","params":[{"name":"BPM","description":"<p>Beats Per Minute</p>\n","type":"Number"},{"name":"rampTime","description":"<p>Seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10089,"description":"<p>Returns the tempo, in Beats Per Minute, of this part.</p>\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":10101,"description":"<p>Start playback of this part. It will play\nthrough all of its phrases at a speed\ndetermined by setBPM.</p>\n","itemtype":"method","name":"start","params":[{"name":"time","description":"<p>seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10120,"description":"<p>Loop playback of this part. It will begin\nlooping through all of its phrases at a speed\ndetermined by setBPM.</p>\n","itemtype":"method","name":"loop","params":[{"name":"time","description":"<p>seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10141,"description":"<p>Tell the part to stop looping.</p>\n","itemtype":"method","name":"noLoop","class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10156,"description":"<p>Stop the part and cue it to step 0. Playback will resume from the begining of the Part when it is played again.</p>\n","itemtype":"method","name":"stop","params":[{"name":"time","description":"<p>seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10169,"description":"<p>Pause the part. Playback will resume\nfrom the current step.</p>\n","itemtype":"method","name":"pause","params":[{"name":"time","description":"<p>seconds from now</p>\n","type":"Number"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10184,"description":"<p>Add a p5.Phrase to this Part.</p>\n","itemtype":"method","name":"addPhrase","params":[{"name":"phrase","description":"<p>reference to a p5.Phrase</p>\n","type":"p5.Phrase"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10210,"description":"<p>Remove a phrase from this part, based on the name it was\ngiven when it was created.</p>\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":10227,"description":"<p>Get a phrase from this part, based on the name it was\ngiven when it was created. Now you can modify its array.</p>\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":10244,"description":"<p>Find all sequences with the specified name, and replace their patterns with the specified array.</p>\n","itemtype":"method","name":"replaceSequence","params":[{"name":"phraseName","description":"","type":"String"},{"name":"sequence","description":"<p>Array of values to pass into the callback\n                          at each step of the phrase.</p>\n","type":"Array"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10273,"description":"<p>Set the function that will be called at every step. This will clear the previous function.</p>\n","itemtype":"method","name":"onStep","params":[{"name":"callback","description":"<p>The name of the callback\n                            you want to fire\n                            on every beat/tatum.</p>\n","type":"Function"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10332,"description":"<p>Start playback of the score.</p>\n","itemtype":"method","name":"start","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10344,"description":"<p>Stop playback of the score.</p>\n","itemtype":"method","name":"stop","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10357,"description":"<p>Pause playback of the score.</p>\n","itemtype":"method","name":"pause","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10368,"description":"<p>Loop playback of the score.</p>\n","itemtype":"method","name":"loop","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10380,"description":"<p>Stop looping playback of the score. If it\nis currently playing, this will go into effect\nafter the current round of playback completes.</p>\n","itemtype":"method","name":"noLoop","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10411,"description":"<p>Set the tempo for all parts in the score</p>\n","itemtype":"method","name":"setBPM","params":[{"name":"BPM","description":"<p>Beats Per Minute</p>\n","type":"Number"},{"name":"rampTime","description":"<p>Seconds from now</p>\n","type":"Number"}],"class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10508,"description":"<p>musicalTimeMode uses <a href = \"https://github.com/Tonejs/Tone.js/wiki/Time\">Tone.Time</a> convention\ntrue if string, false if number</p>\n","itemtype":"property","name":"musicalTimeMode","type":"Boolean","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10516,"description":"<p>musicalTimeMode variables\nmodify these only when the interval is specified in musicalTime format as a string</p>\n","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10524,"description":"<p>Set a limit to the number of loops to play. defaults to Infinity</p>\n","itemtype":"property","name":"maxIterations","type":"Number","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10534,"description":"<p>Do not initiate the callback if timeFromNow is < 0\nThis ususually occurs for a few milliseconds when the page\nis not fully loaded</p>\n<p>The callback should only be called until maxIterations is reached</p>\n","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10549,"description":"<p>Start the loop</p>\n","itemtype":"method","name":"start","params":[{"name":"timeFromNow","description":"<p>schedule a starting time</p>\n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10566,"description":"<p>Stop the loop</p>\n","itemtype":"method","name":"stop","params":[{"name":"timeFromNow","description":"<p>schedule a stopping time</p>\n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10583,"description":"<p>Pause the loop</p>\n","itemtype":"method","name":"pause","params":[{"name":"timeFromNow","description":"<p>schedule a pausing time</p>\n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10600,"description":"<p>Synchronize loops. Use this method to start two more more loops in synchronization\nor to start a loop in synchronization with a loop that is already playing\nThis method will schedule the implicit loop in sync with the explicit master loop\ni.e. loopToStart.syncedStart(loopToSyncWith)</p>\n","itemtype":"method","name":"syncedStart","params":[{"name":"otherLoop","description":"<p>a p5.SoundLoop to sync with</p>\n","type":"Object"},{"name":"timeFromNow","description":"<p>Start the loops in sync after timeFromNow seconds</p>\n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10705,"description":"<p>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)</p>\n","itemtype":"property","name":"bpm","type":"Number","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10728,"description":"<p>number of quarter notes in a measure (defaults to 4)</p>\n","itemtype":"property","name":"timeSignature","type":"Number","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10748,"description":"<p>length of the loops interval</p>\n","itemtype":"property","name":"interval","type":"Number|String","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10765,"description":"<p>how many times the callback has been called so far</p>\n","itemtype":"property","name":"iterations","type":"Number","readonly":"","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10817,"description":"<p>The p5.Compressor is built with a <a href=\"https://www.w3.org/TR/webaudio/#the-dynamicscompressornode-interface\"\n  target=\"_blank\" title=\"W3 spec for Dynamics Compressor Node\">Web Audio Dynamics Compressor Node\n  </a></p>\n","itemtype":"property","name":"compressor","type":"AudioNode","class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10830,"description":"<p>Performs the same function as .connect, but also accepts\noptional parameters to set compressor's audioParams</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>Sound source to be connected</p>\n","type":"Object"},{"name":"attack","description":"<p>The amount of time (in seconds) to reduce the gain by 10dB,\n                           default = .003, range 0 - 1</p>\n","type":"Number","optional":true},{"name":"knee","description":"<p>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</p>\n","type":"Number","optional":true},{"name":"ratio","description":"<p>The amount of dB change in input for a 1 dB change in output\n                           default = 12, range 1 - 20</p>\n","type":"Number","optional":true},{"name":"threshold","description":"<p>The decibel value above which the compression will start taking effect\n                           default = -24, range -100 - 0</p>\n","type":"Number","optional":true},{"name":"release","description":"<p>The amount of time (in seconds) to increase the gain by 10dB\n                           default = .25, range 0 - 1</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10855,"description":"<p>Set the paramters of a compressor.</p>\n","itemtype":"method","name":"set","params":[{"name":"attack","description":"<p>The amount of time (in seconds) to reduce the gain by 10dB,\n                           default = .003, range 0 - 1</p>\n","type":"Number"},{"name":"knee","description":"<p>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</p>\n","type":"Number"},{"name":"ratio","description":"<p>The amount of dB change in input for a 1 dB change in output\n                           default = 12, range 1 - 20</p>\n","type":"Number"},{"name":"threshold","description":"<p>The decibel value above which the compression will start taking effect\n                           default = -24, range -100 - 0</p>\n","type":"Number"},{"name":"release","description":"<p>The amount of time (in seconds) to increase the gain by 10dB\n                           default = .25, range 0 - 1</p>\n","type":"Number"}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10894,"description":"<p>Get current attack or set value w/ time ramp</p>\n","itemtype":"method","name":"attack","params":[{"name":"attack","description":"<p>Attack is the amount of time (in seconds) to reduce the gain by 10dB,\n                         default = .003, range 0 - 1</p>\n","type":"Number","optional":true},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10919,"description":"<p>Get current knee or set value w/ time ramp</p>\n","itemtype":"method","name":"knee","params":[{"name":"knee","description":"<p>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</p>\n","type":"Number","optional":true},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10944,"description":"<p>Get current ratio or set value w/ time ramp</p>\n","itemtype":"method","name":"ratio","params":[{"name":"ratio","description":"<p>The amount of dB change in input for a 1 dB change in output\n                           default = 12, range 1 - 20</p>\n","type":"Number","optional":true},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10967,"description":"<p>Get current threshold or set value w/ time ramp</p>\n","itemtype":"method","name":"threshold","params":[{"name":"threshold","description":"<p>The decibel value above which the compression will start taking effect\n                           default = -24, range -100 - 0</p>\n","type":"Number"},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10990,"description":"<p>Get current release or set value w/ time ramp</p>\n","itemtype":"method","name":"release","params":[{"name":"release","description":"<p>The amount of time (in seconds) to increase the gain by 10dB\n                           default = .25, range 0 - 1</p>\n","type":"Number"},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11014,"description":"<p>Return the current reduction value</p>\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":11169,"description":"<p>Connect a specific device to the p5.SoundRecorder.\nIf no parameter is given, p5.SoundRecorer will record\nall audible p5.sound from your sketch.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"unit","description":"<p>p5.sound object or a web audio unit\n                       that outputs sound</p>\n","type":"Object","optional":true}],"class":"p5.SoundRecorder","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11194,"description":"<p>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.</p>\n","itemtype":"method","name":"record","params":[{"name":"soundFile","description":"<p>p5.SoundFile</p>\n","type":"p5.SoundFile"},{"name":"duration","description":"<p>Time (in seconds)</p>\n","type":"Number","optional":true},{"name":"callback","description":"<p>The name of a function that will be\n                              called once the recording completes</p>\n","type":"Function","optional":true}],"class":"p5.SoundRecorder","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11229,"description":"<p>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.</p>\n","itemtype":"method","name":"stop","class":"p5.SoundRecorder","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11259,"description":"<p>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\n<a href=\"/docs/reference/#/p5.SoundFile/saveBlob\"><code>p5.SoundFile.saveBlob</code></a>.</p>\n","itemtype":"method","name":"saveSound","params":[{"name":"soundFile","description":"<p>p5.SoundFile that you wish to save</p>\n","type":"p5.SoundFile"},{"name":"fileName","description":"<p>name of the resulting .wav file.</p>\n","type":"String"}],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11389,"description":"<p>isDetected is set to true when a peak is detected.</p>\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":11402,"description":"<p>The update method is run in the draw loop.</p>\n<p>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.</p>\n","itemtype":"method","name":"update","params":[{"name":"fftObject","description":"<p>A p5.FFT object</p>\n","type":"p5.FFT"}],"class":"p5.PeakDetect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11438,"description":"<p>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.</p>\n","itemtype":"method","name":"onPeak","params":[{"name":"callback","description":"<p>Name of a function that will\n                            be called when a peak is\n                            detected.</p>\n","type":"Function"},{"name":"val","description":"<p>Optional value to pass\n                            into the function when\n                            a peak is detected.</p>\n","type":"Object","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.PeakDetect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11600,"description":"<p>Connect a source to the gain node.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"src","description":"<p>p5.sound / Web Audio object with a sound\n                         output.</p>\n","type":"Object"}],"class":"p5.Gain","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11613,"description":"<p>Send output to a p5.sound or web audio object</p>\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":11626,"description":"<p>Disconnect all output.</p>\n","itemtype":"method","name":"disconnect","class":"p5.Gain","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11639,"description":"<p>Set the output level of the gain node.</p>\n","itemtype":"method","name":"amp","params":[{"name":"volume","description":"<p>amplitude between 0 and 1.0</p>\n","type":"Number"},{"name":"rampTime","description":"<p>create a fade that lasts rampTime</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Gain","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11743,"description":"<p>The p5.Distortion is built with a\n<a href=\"http://www.w3.org/TR/webaudio/#WaveShaperNode\">\nWeb Audio WaveShaper Node</a>.</p>\n","itemtype":"property","name":"WaveShaperNode","type":"AudioNode","class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11760,"description":"<p>Process a sound source, optionally specify amount and oversample values.</p>\n","itemtype":"method","name":"process","params":[{"name":"amount","description":"<p>Unbounded distortion amount.\n                               Normal values range from 0-1.</p>\n","type":"Number","optional":true,"optdefault":"0.25"},{"name":"oversample","description":"<p>'none', '2x', or '4x'.</p>\n","type":"String","optional":true,"optdefault":"'none'"}],"class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11774,"description":"<p>Set the amount and oversample of the waveshaper distortion.</p>\n","itemtype":"method","name":"set","params":[{"name":"amount","description":"<p>Unbounded distortion amount.\n                               Normal values range from 0-1.</p>\n","type":"Number","optional":true,"optdefault":"0.25"},{"name":"oversample","description":"<p>'none', '2x', or '4x'.</p>\n","type":"String","optional":true,"optdefault":"'none'"}],"class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11796,"description":"<p>Return the distortion amount, typically between 0-1.</p>\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":11809,"description":"<p>Return the oversampling.</p>\n","itemtype":"method","name":"getOversample","return":{"description":"Oversample can either be 'none', '2x', or '4x'.","type":"String"},"class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"}],"warnings":[{"message":"unknown tag: alt","line":" src/color/creating_reading.js:16"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:45"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:72"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:116"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:297"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:326"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:361"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:452"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:482"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:522"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:51"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:249"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:278"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:302"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:326"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:751"},{"message":"unknown tag: alt","line":" src/color/setting.js:13"},{"message":"unknown tag: alt","line":" src/color/setting.js:180"},{"message":"unknown tag: alt","line":" src/color/setting.js:214"},{"message":"unknown tag: alt","line":" src/color/setting.js:333"},{"message":"unknown tag: alt","line":" src/color/setting.js:492"},{"message":"unknown tag: alt","line":" src/color/setting.js:533"},{"message":"unknown tag: alt","line":" src/color/setting.js:573"},{"message":"unknown tag: alt","line":" src/color/setting.js:745"},{"message":"unknown tag: alt","line":" src/color/setting.js:825"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:102"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:218"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:258"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:317"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:373"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:447"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:512"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:578"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:662"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:12"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:81"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:115"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:184"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:219"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:259"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:331"},{"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:130"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:185"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:264"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:358"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:398"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:493"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:20"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:67"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:267"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:389"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:434"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:498"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:557"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:642"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:707"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:800"},{"message":"unknown tag: alt","line":" src/core/constants.js:58"},{"message":"unknown tag: alt","line":" src/core/constants.js:76"},{"message":"unknown tag: alt","line":" src/core/constants.js:94"},{"message":"unknown tag: alt","line":" src/core/constants.js:112"},{"message":"unknown tag: alt","line":" src/core/constants.js:130"},{"message":"unknown tag: alt","line":" src/core/environment.js:20"},{"message":"unknown tag: alt","line":" src/core/environment.js:52"},{"message":"unknown tag: alt","line":" src/core/environment.js:79"},{"message":"unknown tag: alt","line":" src/core/environment.js:129"},{"message":"unknown tag: alt","line":" src/core/environment.js:160"},{"message":"unknown tag: alt","line":" src/core/environment.js:228"},{"message":"unknown tag: alt","line":" src/core/environment.js:331"},{"message":"unknown tag: alt","line":" src/core/environment.js:354"},{"message":"unknown tag: alt","line":" src/core/environment.js:372"},{"message":"unknown tag: alt","line":" src/core/environment.js:390"},{"message":"unknown tag: alt","line":" src/core/environment.js:405"},{"message":"unknown tag: alt","line":" src/core/environment.js:421"},{"message":"unknown tag: alt","line":" src/core/environment.js:499"},{"message":"unknown tag: alt","line":" src/core/environment.js:549"},{"message":"replacing incorrect tag: returns with return","line":" src/core/environment.js:585"},{"message":"replacing incorrect tag: returns with return","line":" src/core/environment.js:604"},{"message":"unknown tag: alt","line":" src/core/environment.js:604"},{"message":"unknown tag: alt","line":" src/core/environment.js:659"},{"message":"unknown tag: alt","line":" src/core/environment.js:687"},{"message":"unknown tag: alt","line":" src/core/environment.js:706"},{"message":"replacing incorrect tag: function with method","line":" src/core/internationalization.js:10"},{"message":"replacing incorrect tag: returns with return","line":" src/core/internationalization.js:10"},{"message":"unknown tag: alt","line":" src/core/main.js:42"},{"message":"unknown tag: alt","line":" src/core/main.js:83"},{"message":"unknown tag: alt","line":" src/core/main.js:114"},{"message":"unknown tag: alt","line":" src/core/main.js:411"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:47"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:114"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:154"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:189"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:246"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:292"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:354"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:403"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:454"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:510"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:551"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:592"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:639"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:678"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:725"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:763"},{"message":"unknown tag: alt","line":" src/core/p5.Graphics.js:70"},{"message":"unknown tag: alt","line":" src/core/p5.Graphics.js:122"},{"message":"unknown tag: alt","line":" src/core/reference.js:6"},{"message":"unknown tag: alt","line":" src/core/reference.js:33"},{"message":"unknown tag: alt","line":" src/core/reference.js:86"},{"message":"unknown tag: alt","line":" src/core/reference.js:114"},{"message":"unknown tag: alt","line":" src/core/reference.js:136"},{"message":"unknown tag: alt","line":" src/core/reference.js:157"},{"message":"unknown tag: alt","line":" src/core/reference.js:178"},{"message":"unknown tag: alt","line":" src/core/reference.js:199"},{"message":"unknown tag: alt","line":" src/core/reference.js:230"},{"message":"unknown tag: alt","line":" src/core/reference.js:266"},{"message":"unknown tag: alt","line":" src/core/reference.js:287"},{"message":"unknown tag: alt","line":" src/core/reference.js:308"},{"message":"unknown tag: alt","line":" src/core/reference.js:330"},{"message":"unknown tag: alt","line":" src/core/reference.js:350"},{"message":"unknown tag: alt","line":" src/core/reference.js:378"},{"message":"unknown tag: alt","line":" src/core/reference.js:407"},{"message":"unknown tag: alt","line":" src/core/reference.js:447"},{"message":"unknown tag: alt","line":" src/core/reference.js:489"},{"message":"unknown tag: alt","line":" src/core/reference.js:511"},{"message":"unknown tag: alt","line":" src/core/rendering.js:15"},{"message":"unknown tag: alt","line":" src/core/rendering.js:120"},{"message":"unknown tag: alt","line":" src/core/rendering.js:174"},{"message":"unknown tag: alt","line":" src/core/rendering.js:195"},{"message":"unknown tag: alt","line":" src/core/rendering.js:234"},{"message":"unknown tag: alt","line":" src/core/rendering.js:317"},{"message":"unknown tag: alt","line":" src/core/structure.js:10"},{"message":"unknown tag: alt","line":" src/core/structure.js:83"},{"message":"unknown tag: alt","line":" src/core/structure.js:134"},{"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:496"},{"message":"unknown tag: alt","line":" src/core/transform.js:11"},{"message":"unknown tag: alt","line":" src/core/transform.js:151"},{"message":"unknown tag: alt","line":" src/core/transform.js:176"},{"message":"unknown tag: alt","line":" src/core/transform.js:215"},{"message":"unknown tag: alt","line":" src/core/transform.js:251"},{"message":"unknown tag: alt","line":" src/core/transform.js:287"},{"message":"unknown tag: alt","line":" src/core/transform.js:325"},{"message":"unknown tag: alt","line":" src/core/transform.js:399"},{"message":"unknown tag: alt","line":" src/core/transform.js:438"},{"message":"unknown tag: alt","line":" src/core/transform.js:477"},{"message":"unknown tag: alt","line":" src/data/local_storage.js:10"},{"message":"unknown tag: alt","line":" src/data/local_storage.js:101"},{"message":"unknown tag: alt","line":" src/dom/dom.js:200"},{"message":"unknown tag: alt","line":" src/dom/dom.js:267"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1494"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1556"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1660"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1699"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1819"},{"message":"unknown tag: alt","line":" src/dom/dom.js:2195"},{"message":"unknown tag: alt","line":" src/dom/dom.js:2704"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:23"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:46"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:69"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:135"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:168"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:201"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:239"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:285"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:330"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:389"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:428"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:471"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:515"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:546"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:604"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:10"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:36"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:64"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:105"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:191"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:242"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:305"},{"message":"unknown tag: alt","line":" src/events/mouse.js:12"},{"message":"unknown tag: alt","line":" src/events/mouse.js:43"},{"message":"unknown tag: alt","line":" src/events/mouse.js:80"},{"message":"unknown tag: alt","line":" src/events/mouse.js:106"},{"message":"unknown tag: alt","line":" src/events/mouse.js:132"},{"message":"unknown tag: alt","line":" src/events/mouse.js:164"},{"message":"unknown tag: alt","line":" src/events/mouse.js:195"},{"message":"unknown tag: alt","line":" src/events/mouse.js:233"},{"message":"unknown tag: alt","line":" src/events/mouse.js:271"},{"message":"unknown tag: alt","line":" src/events/mouse.js:311"},{"message":"unknown tag: alt","line":" src/events/mouse.js:351"},{"message":"unknown tag: alt","line":" src/events/mouse.js:389"},{"message":"unknown tag: alt","line":" src/events/mouse.js:481"},{"message":"unknown tag: alt","line":" src/events/mouse.js:535"},{"message":"unknown tag: alt","line":" src/events/mouse.js:615"},{"message":"unknown tag: alt","line":" src/events/mouse.js:696"},{"message":"unknown tag: alt","line":" src/events/mouse.js:772"},{"message":"unknown tag: alt","line":" src/events/mouse.js:841"},{"message":"unknown tag: alt","line":" src/events/mouse.js:926"},{"message":"unknown tag: alt","line":" src/events/mouse.js:979"},{"message":"unknown tag: alt","line":" src/events/mouse.js:1025"},{"message":"unknown tag: alt","line":" src/events/touch.js:10"},{"message":"unknown tag: alt","line":" src/events/touch.js:71"},{"message":"unknown tag: alt","line":" src/events/touch.js:151"},{"message":"unknown tag: alt","line":" src/events/touch.js:223"},{"message":"unknown tag: alt","line":" src/image/image.js:15"},{"message":"unknown tag: alt","line":" src/image/image.js:94"},{"message":"unknown tag: alt","line":" src/image/image.js:413"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:18"},{"message":"replacing incorrect tag: returns with return","line":" src/image/loading_displaying.js:233"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:250"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:420"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:518"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:582"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:88"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:115"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:152"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:256"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:291"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:341"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:395"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:432"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:543"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:598"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:659"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:694"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:815"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:856"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:896"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:927"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:971"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:1006"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:1043"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:1079"},{"message":"unknown tag: alt","line":" src/image/pixels.js:12"},{"message":"unknown tag: alt","line":" src/image/pixels.js:80"},{"message":"unknown tag: alt","line":" src/image/pixels.js:173"},{"message":"unknown tag: alt","line":" src/image/pixels.js:307"},{"message":"unknown tag: alt","line":" src/image/pixels.js:481"},{"message":"unknown tag: alt","line":" src/image/pixels.js:566"},{"message":"unknown tag: alt","line":" src/image/pixels.js:602"},{"message":"unknown tag: alt","line":" src/image/pixels.js:674"},{"message":"unknown tag: alt","line":" src/io/files.js:20"},{"message":"unknown tag: alt","line":" src/io/files.js:183"},{"message":"unknown tag: alt","line":" src/io/files.js:293"},{"message":"unknown tag: alt","line":" src/io/files.js:575"},{"message":"replacing incorrect tag: returns with return","line":" src/io/files.js:685"},{"message":"unknown tag: alt","line":" src/io/files.js:685"},{"message":"unknown tag: alt","line":" src/io/files.js:1398"},{"message":"unknown tag: alt","line":" src/io/files.js:1540"},{"message":"unknown tag: alt","line":" src/io/files.js:1597"},{"message":"unknown tag: alt","line":" src/io/files.js:1661"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:85"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:148"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:195"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:240"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:288"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:352"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:545"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:597"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:638"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:896"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:960"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1009"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1055"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1100"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1146"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1190"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1242"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1305"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:40"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:102"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:146"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:191"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:239"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:295"},{"message":"unknown tag: alt","line":" src/io/p5.XML.js:9"},{"message":"unknown tag: alt","line":" src/math/calculation.js:10"},{"message":"unknown tag: alt","line":" src/math/calculation.js:33"},{"message":"unknown tag: alt","line":" src/math/calculation.js:72"},{"message":"unknown tag: alt","line":" src/math/calculation.js:116"},{"message":"unknown tag: alt","line":" src/math/calculation.js:181"},{"message":"unknown tag: alt","line":" src/math/calculation.js:230"},{"message":"unknown tag: alt","line":" src/math/calculation.js:268"},{"message":"unknown tag: alt","line":" src/math/calculation.js:315"},{"message":"unknown tag: alt","line":" src/math/calculation.js:370"},{"message":"unknown tag: alt","line":" src/math/calculation.js:408"},{"message":"unknown tag: alt","line":" src/math/calculation.js:463"},{"message":"unknown tag: alt","line":" src/math/calculation.js:512"},{"message":"unknown tag: alt","line":" src/math/calculation.js:561"},{"message":"unknown tag: alt","line":" src/math/calculation.js:613"},{"message":"unknown tag: alt","line":" src/math/calculation.js:647"},{"message":"unknown tag: alt","line":" src/math/calculation.js:701"},{"message":"unknown tag: alt","line":" src/math/calculation.js:745"},{"message":"replacing incorrect tag: returns with return","line":" src/math/calculation.js:832"},{"message":"unknown tag: alt","line":" src/math/calculation.js:832"},{"message":"unknown tag: alt","line":" src/math/math.js:10"},{"message":"unknown tag: alt","line":" src/math/noise.js:36"},{"message":"unknown tag: alt","line":" src/math/noise.js:178"},{"message":"unknown tag: alt","line":" src/math/noise.js:243"},{"message":"unknown tag: alt","line":" src/math/p5.Vector.js:10"},{"message":"unknown tag: alt","line":" src/math/random.js:37"},{"message":"unknown tag: alt","line":" src/math/random.js:66"},{"message":"unknown tag: alt","line":" src/math/random.js:153"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:123"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:159"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:186"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:213"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:285"},{"message":"replacing incorrect tag: returns with return","line":" src/math/trigonometry.js:320"},{"message":"replacing incorrect tag: returns with return","line":" src/math/trigonometry.js:335"},{"message":"replacing incorrect tag: returns with return","line":" src/math/trigonometry.js:350"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:11"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:81"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:118"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:150"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:187"},{"message":"unknown tag: alt","line":" src/typography/loading_displaying.js:16"},{"message":"unknown tag: alt","line":" src/typography/loading_displaying.js:140"},{"message":"unknown tag: alt","line":" src/typography/loading_displaying.js:229"},{"message":"unknown tag: alt","line":" src/typography/p5.Font.js:31"},{"message":"unknown tag: alt","line":" src/utilities/conversion.js:10"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:15"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:43"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:130"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:239"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:313"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:375"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:453"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:539"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:10"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:31"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:52"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:73"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:100"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:122"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:143"},{"message":"unknown tag: alt","line":" src/webgl/3d_primitives.js:13"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:11"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:353"},{"message":"unknown tag: alt","line":" src/webgl/light.js:10"},{"message":"unknown tag: alt","line":" src/webgl/light.js:91"},{"message":"unknown tag: alt","line":" src/webgl/light.js:176"},{"message":"unknown tag: alt","line":" src/webgl/light.js:279"},{"message":"unknown tag: alt","line":" src/webgl/light.js:386"},{"message":"unknown tag: alt","line":" src/webgl/light.js:417"},{"message":"unknown tag: alt","line":" src/webgl/light.js:502"},{"message":"unknown tag: alt","line":" src/webgl/light.js:842"},{"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:586"},{"message":"unknown tag: alt","line":" src/webgl/material.js:12"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/material.js:111"},{"message":"unknown tag: alt","line":" src/webgl/material.js:111"},{"message":"unknown tag: alt","line":" src/webgl/material.js:179"},{"message":"unknown tag: alt","line":" src/webgl/material.js:283"},{"message":"unknown tag: alt","line":" src/webgl/material.js:321"},{"message":"unknown tag: alt","line":" src/webgl/material.js:421"},{"message":"unknown tag: alt","line":" src/webgl/material.js:421"},{"message":"unknown tag: alt","line":" src/webgl/material.js:499"},{"message":"unknown tag: alt","line":" src/webgl/material.js:571"},{"message":"unknown tag: alt","line":" src/webgl/material.js:651"},{"message":"unknown tag: alt","line":" src/webgl/material.js:717"},{"message":"unknown tag: alt","line":" src/webgl/material.js:767"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:13"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:115"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:175"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:231"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:297"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:339"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:669"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:727"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:785"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:933"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:1005"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:1270"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.RendererGL.Immediate.js:180"},{"message":"unknown tag: parem","line":" src/webgl/p5.RendererGL.Immediate.js:301"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.RendererGL.Retained.js:8"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:331"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:600"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:641"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:746"},{"message":"unknown tag: alt","line":" src/webgl/p5.Shader.js:296"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:115"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/text.js:158"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:191"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:203"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:236"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:250"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:388"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/text.js:388"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:456"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:471"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:556"},{"message":"replacing incorrect tag: params with param","line":" lib/addons/p5.sound.js:4374"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:4374"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:5085"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:7837"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:9005"},{"message":"Missing item type\nConversions adapted from <http://www.easyrgb.com/en/math.php>.\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:19"},{"message":"Missing item type\nConvert an HSBA array to RGBA.","line":" src/color/color_conversion.js:45"},{"message":"Missing item type\nConvert an HSLA array to HSBA.","line":" src/color/color_conversion.js:100"},{"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:123"},{"message":"Missing item type\nConvert an RGBA array to HSBA.","line":" src/color/color_conversion.js:187"},{"message":"Missing item type\nConvert an RGBA array to HSLA.","line":" src/color/color_conversion.js:226"},{"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:397"},{"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:428"},{"message":"Missing item type\nCSS named colors.","line":" src/color/p5.Color.js:447"},{"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:601"},{"message":"Missing item type\nFull color string patterns. The capture groups are necessary.","line":" src/color/p5.Color.js:614"},{"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:751"},{"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:962"},{"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:675"},{"message":"Missing item type","line":" src/core/friendly_errors/file_errors.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:34"},{"message":"Missing item type","line":" src/core/friendly_errors/validate_params.js:1"},{"message":"Missing item type\nValidates parameters\nparam  {String}               func    the name of the function\nparam  {Array}                args    user input arguments\n\nexample:\n const a;\n ellipse(10,10,a,5);\nconsole ouput:\n \"It looks like ellipse received an empty variable in spot #2.\"\n\nexample:\n ellipse(10,\"foo\",5,5);\nconsole output:\n \"ellipse was expecting a number for parameter #1,\n          received \"foo\" instead.\"","line":" src/core/friendly_errors/validate_params.js:623"},{"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:305"},{"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 <a href=\"#/p5/setup\">setup()</a> is\nrecommended. The default rate is 60 frames per second.\n\nCalling <a href=\"#/p5/frameRate\">frameRate()</a> with no arguments returns the current framerate.","line":" src/core/environment.js:315"},{"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\nSet up our translation function, with loaded languages","line":" src/core/internationalization.js:27"},{"message":"Missing item type","line":" src/core/legacy.js:1"},{"message":"Missing item type\nHelper fxn for sharing pixel methods","line":" src/core/p5.Element.js:827"},{"message":"Missing item type\nResize our canvas element.","line":" src/core/p5.Renderer.js:95"},{"message":"Missing item type\nHelper fxn to check font type (system or otf)","line":" src/core/p5.Renderer.js:341"},{"message":"Missing item type\nHelper fxn to measure ascent and descent.\nAdapted from http://stackoverflow.com/a/25355178","line":" src/core/p5.Renderer.js:393"},{"message":"Missing item type\np5.Renderer2D\nThe 2D graphics canvas renderer class.\nextends p5.Renderer","line":" src/core/p5.Renderer2D.js:7"},{"message":"Missing item type\nGenerate a cubic Bezier representing an arc on the unit circle of total\nangle `size` radians, beginning `start` radians above the x-axis. Up to\nfour of these curves are combined to make a full arc.\n\nSee www.joecridge.me/bezier.pdf for an explanation of the method.","line":" src/core/p5.Renderer2D.js:386"},{"message":"Missing item type\nshim for Uint8ClampedArray.slice\n(allows arrayCopy to work with pixels[])\nwith thanks to http://halfpapstudios.com/blog/tag/html5-canvas/\nEnumerable set to false to protect for...in from\nUint8ClampedArray.prototype pollution.","line":" src/core/shim.js:18"},{"message":"Missing item type\nthis is implementation of Object.assign() which is unavailable in\nIE11 and (non-Chrome) Android browsers.\nThe assign() method is used to copy the values of all enumerable\nown properties from one or more source objects to a target object.\nIt will return the target object.\nModified from https://github.com/ljharb/object.assign","line":" src/core/shim.js:39"},{"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:197"},{"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:387"},{"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:425"},{"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:536"},{"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:600"},{"message":"Missing item type\nHelper function for select and selectAll","line":" src/dom/dom.js:126"},{"message":"Missing item type\nHelper function for getElement and getElements.","line":" src/dom/dom.js:141"},{"message":"Missing item type\nHelpers for create methods.","line":" src/dom/dom.js:301"},{"message":"Missing item type","line":" src/dom/dom.js:433"},{"message":"Missing item type","line":" src/dom/dom.js:1100"},{"message":"Missing item type","line":" src/dom/dom.js:1193"},{"message":"Missing item type","line":" src/dom/dom.js:1232"},{"message":"Missing item type","line":" src/dom/dom.js:3158"},{"message":"Missing item type","line":" src/dom/dom.js:3224"},{"message":"Missing item type","line":" src/dom/dom.js:3286"},{"message":"Missing item type\n_updatePAccelerations updates the pAcceleration values","line":" src/events/acceleration.js:124"},{"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:295"},{"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:381"},{"message":"Missing item type\nThis module defines the filters for use with image buffers.\n\nThis module is basically a collection of functions stored in an object\nas opposed to modules. The functions are destructive, modifying\nthe passed in canvas rather than creating a copy.\n\nGenerally speaking users of this module will use the Filters.apply method\non a canvas to create an effect.\n\nA number of functions are borrowed/adapted from\nhttp://www.html5rocks.com/en/tutorials/canvas/imagefilters/\nor the java processing implementation.","line":" src/image/filters.js:3"},{"message":"Missing item type\nReturns the pixel buffer for a canvas","line":" src/image/filters.js:24"},{"message":"Missing item type\nReturns a 32 bit number containing ARGB data at ith pixel in the\n1D array containing pixels data.","line":" src/image/filters.js:44"},{"message":"Missing item type\nModifies pixels RGBA values to values contained in the data object.","line":" src/image/filters.js:65"},{"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:85"},{"message":"Missing item type\nReturns a blank ImageData object.","line":" src/image/filters.js:105"},{"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:120"},{"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:173"},{"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:207"},{"message":"Missing item type\nSets the alpha channel to entirely opaque. No parameter is used.","line":" src/image/filters.js:230"},{"message":"Missing item type\nSets each pixel to its inverse value. No parameter is used.","line":" src/image/filters.js:246"},{"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:261"},{"message":"Missing item type\nreduces the bright areas in an image","line":" src/image/filters.js:293"},{"message":"Missing item type\nincreases the bright areas in an image","line":" src/image/filters.js:380"},{"message":"Missing item type\nThis module defines the p5 methods for the <a href=\"#/p5.Image\">p5.Image</a> 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:153"},{"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:233"},{"message":"Missing item type\nApply the current tint color to the input image, return the resulting\ncanvas.","line":" src/image/loading_displaying.js:546"},{"message":"Missing item type\nThis module defines the <a href=\"#/p5.Image\">p5.Image</a> 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:222"},{"message":"Missing item type\nHelper fxn for sharing pixel methods","line":" src/image/p5.Image.js:248"},{"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 <a href=\"#/p5/saveStrings\">saveStrings</a>, <a href=\"#/p5/saveJSON\">saveJSON</a>, <a href=\"#/p5/saveTable\">saveTable</a> etc.","line":" src/io/files.js:1786"},{"message":"Missing item type\nReturns a file extension, or another string\nif the provided parameter has no extension.","line":" src/io/files.js:1854"},{"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:1887"},{"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:1899"},{"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<a href=\"http://en.wikipedia.org/wiki/Comma-separated_values\">\ncomma separated values</a>, 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\n<a href=\"http://tools.ietf.org/html/rfc4180\">here</a>.\nTo load files, use the <a href=\"#/p5/loadTable\">loadTable</a> method.\nTo save tables to your computer, use the <a href=\"#/p5/save\">save</a> method\n or the <a href=\"#/p5/saveTable\">saveTable</a> method.\n\nPossible options include:\n<ul>\n<li>csv - parse the table as comma-separated values\n<li>tsv - parse the table as tab-separated values\n<li>header - this table has a header (title) row\n</ul>","line":" src/io/p5.Table.js:9"},{"message":"Missing item type\nMultiplies a vector by a scalar and returns a new vector.","line":" src/math/p5.Vector.js:2064"},{"message":"Missing item type\nDivides a vector by a scalar and returns a new vector.","line":" src/math/p5.Vector.js:2116"},{"message":"Missing item type\nCalculates the dot product of two vectors.","line":" src/math/p5.Vector.js:2169"},{"message":"Missing item type\nCalculates the cross product of two vectors.","line":" src/math/p5.Vector.js:2183"},{"message":"Missing item type\nCalculates the Euclidean distance between two points (considering a\npoint as a vector object).","line":" src/math/p5.Vector.js:2197"},{"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:2212"},{"message":"Missing item type\nHelper function to measure ascent and descent.","line":" src/typography/attributes.js:280"},{"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:273"},{"message":"Missing item type\nReturns an opentype path for the supplied string and position.","line":" src/typography/p5.Font.js:288"},{"message":"Missing item type","line":" src/webgl/3d_primitives.js:301"},{"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:955"},{"message":"Missing item type\nDraw a line given two points","line":" src/webgl/3d_primitives.js:1355"},{"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:179"},{"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:288"},{"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:315"},{"message":"Missing item type\nThis function matches the `query` at the provided `offset`","line":" src/webgl/loading.js:342"},{"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:354"},{"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:442"},{"message":"Missing item type","line":" src/webgl/material.js:812"},{"message":"Missing item type","line":" src/webgl/material.js:843"},{"message":"Missing item type\nCreate a 2D array for establishing stroke connections","line":" src/webgl/p5.Geometry.js:212"},{"message":"Missing item type\nCreate 4 vertices for each stroke line, two at the beginning position\nand two at the end position. These vertices are displaced relative to\nthat line's normal on the GPU","line":" src/webgl/p5.Geometry.js:233"},{"message":"Missing item type","line":" src/webgl/p5.Matrix.js:1"},{"message":"Missing item type\nPRIVATE","line":" src/webgl/p5.Matrix.js:722"},{"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:12"},{"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 <a href=\"#/p5/beginShape\">beginShape()</a> & de-activated when you call <a href=\"#/p5/endShape\">endShape()</a>.\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:106"},{"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:146"},{"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:180"},{"message":"Missing item type\nCalled from _processVertices() when applicable. This function tesselates immediateMode.geometry.","line":" src/webgl/p5.RendererGL.Immediate.js:225"},{"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:245"},{"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:280"},{"message":"Missing item type\nCalled from _drawImmediateFill(). Currently adds default normals which\nonly work for flat shapes.","line":" src/webgl/p5.RendererGL.Immediate.js:301"},{"message":"Missing item type\ninitializes buffer defaults. runs each time a new geometry is\nregistered","line":" src/webgl/p5.RendererGL.Retained.js:8"},{"message":"Missing item type\ncreates a buffers object that holds the WebGL render buffers\nfor a geometry.","line":" src/webgl/p5.RendererGL.Retained.js:59"},{"message":"Missing item type\nDraws buffers given a geometry key ID","line":" src/webgl/p5.RendererGL.Retained.js:97"},{"message":"Missing item type\nmodel view, projection, & normal\nmatrices","line":" src/webgl/p5.RendererGL.js:117"},{"message":"Missing item type\n[background description]","line":" src/webgl/p5.RendererGL.js:583"},{"message":"Missing item type\n[resize description]","line":" src/webgl/p5.RendererGL.js:857"},{"message":"Missing item type\nclears color and depth buffers\nwith r,g,b,a","line":" src/webgl/p5.RendererGL.js:887"},{"message":"Missing item type\n[translate description]","line":" src/webgl/p5.RendererGL.js:919"},{"message":"Missing item type\nScales the Model View Matrix by a vector","line":" src/webgl/p5.RendererGL.js:938"},{"message":"Missing item type\nturn a two dimensional array into one dimensional array","line":" src/webgl/p5.RendererGL.js:1356"},{"message":"Missing item type\nturn a p5.Vector Array into a one dimensional number array","line":" src/webgl/p5.RendererGL.js:1393"},{"message":"Missing item type\nensures that p5 is using a 3d renderer. throws an error if not.","line":" src/webgl/p5.RendererGL.js:1411"},{"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\nThe p5.Effect class is built\n \tusing Tone.js CrossFade","line":" lib/addons/p5.sound.js:293"},{"message":"Missing item type\nIn classes that extend\np5.Effect, connect effect nodes\nto the wet parameter","line":" lib/addons/p5.sound.js:300"},{"message":"Missing item type","line":" lib/addons/p5.sound.js:451"},{"message":"Missing item type\nUsed by Osc and Envelope to chain signal math","line":" lib/addons/p5.sound.js:688"},{"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:2721"},{"message":"Missing item type\nThis module has shims","line":" lib/addons/p5.sound.js:2969"},{"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:3105"},{"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:3555"},{"message":"Missing item type\nStop playback on all of this soundfile's sources.","line":" lib/addons/p5.sound.js:4056"},{"message":"Missing item type","line":" lib/addons/p5.sound.js:4590"},{"message":"Missing item type\nEQFilter extends p5.Filter with constraints\nnecessary for the p5.EQ","line":" lib/addons/p5.sound.js:8235"},{"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:9362"},{"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:9557"},{"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:10516"},{"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:10534"},{"message":"Missing item type\ncallback invoked when the recording is over","line":" lib/addons/p5.sound.js:11153"},{"message":"Missing item type","line":" lib/addons/p5.sound.min.js:1"}],"consts":{"RGB":["p5.colorMode"],"HSB":["p5.colorMode"],"HSL":["p5.colorMode"],"CHORD":["p5.arc"],"PIE":["p5.arc"],"OPEN":["p5.arc"],"CENTER":["p5.ellipseMode","p5.rectMode","p5.imageMode","p5.textAlign"],"RADIUS":["p5.ellipseMode","p5.rectMode"],"CORNER":["p5.ellipseMode","p5.rectMode","p5.imageMode"],"CORNERS":["p5.ellipseMode","p5.rectMode","p5.imageMode"],"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"],"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"],"VIDEO":["p5.createCapture"],"AUDIO":["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"],"BLUR":["p5.Image.filter","p5.filter"],"ERODE":["p5.Image.filter","p5.filter"],"DILATE":["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"],"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.3.1","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/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":{"Rendering":1},"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/shim.js":{"name":"src/core/shim.js","modules":{},"classes":{},"fors":{},"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":{"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/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.Geometry.js":{"name":"src/webgl/p5.Geometry.js","modules":{},"classes":{"p5.Geometry":1},"fors":{"p5":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.Effect":1,"p5.Filter":1,"p5.LowPass":1,"p5.HighPass":1,"p5.BandPass":1,"p5.Oscillator":1,"p5.SinOsc":1,"p5.TriOsc":1,"p5.SawOsc":1,"p5.SqrOsc":1,"p5.MonoSynth":1,"p5.AudioVoice":1,"p5.PolySynth":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Signal":1,"p5.Envelope":1,"p5.Pulse":1,"p5.Noise":1,"p5.AudioIn":1,"p5.EQ":1,"p5.Panner3D":1,"p5.Delay":1,"p5.Reverb":1,"p5.Convolver":1,"p5.Phrase":1,"p5.Part":1,"p5.Score":1,"p5.SoundLoop":1,"p5.Compressor":1,"p5.SoundRecorder":1,"p5.PeakDetect":1,"p5.Gain":1,"p5.Distortion":1},"fors":{"p5.sound":1,"p5.Effect":1,"p5":1,"p5.Oscillator":1,"p5.MonoSynth":1,"p5.AudioVoice":1,"p5.PolySynth":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Signal":1,"p5.Envelope":1,"p5.AudioIn":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.Gain":1,"p5.Distortion":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":14},"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":14,"requires":["core","constants"],"description":"<p>Each color stores the color mode and level maxes that was applied at the\ntime of its construction. These are used to interpret the input arguments\n(at construction and later for that instance of color) and to format the\noutput e.g. when <a href=\"#/p5/saturation\">saturation()</a> is requested.</p>\n<p>Internally, we store an array representing the ideal RGBA values in floating\npoint form, normalized from 0 to 1. From this we calculate the closest\nscreen color (RGBA levels from 0 to 255) and expose this to the renderer.</p>\n<p>We also cache normalized, floating point components of the color in various\nrepresentations as they are calculated. This is done to prevent repeating a\nconversion that has already been performed.</p>\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":{},"fors":{"p5":1},"namespaces":{}},"2D Primitives":{"name":"2D Primitives","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src/core/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":3490,"description":"<p>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 <a href=\"#/p5.Element\">p5.Element</a> that supports a range of HTML elements. See the\n<a href='https://github.com/processing/p5.js/wiki/Beyond-the-canvas'>\nbeyond the canvas tutorial</a> for a full overview of how this addon works.</p>\n<p>See <a href='https://github.com/processing/p5.js/wiki/Beyond-the-canvas'>tutorial: beyond the canvas</a>\nfor more info on how to use this library.</a></p>\n","requires":["p5"]},"Rendering":{"name":"Rendering","submodules":{"undefined":1},"elements":{},"classes":{"p5.RendererGL":1,"p5.Graphics":1,"p5.Renderer":1},"fors":{"p5":1},"namespaces":{},"module":"Rendering","file":"src/webgl/p5.RendererGL.js","line":600,"description":"<p>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.</p>\n"},"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":410},"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":410,"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":"<p>Base class for all p5.Dictionary types. Specifically\n typed Dictionary classes inherit from this class.</p>\n"},"Events":{"name":"Events","submodules":{"Acceleration":1,"Keyboard":1,"Mouse":1,"Touch":1},"elements":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"Acceleration":{"name":"Acceleration","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/acceleration.js","line":1,"requires":["core"]},"Keyboard":{"name":"Keyboard","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/keyboard.js","line":1,"requires":["core"]},"Mouse":{"name":"Mouse","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/mouse.js","line":1,"requires":["core","constants"]},"Touch":{"name":"Touch","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/touch.js","line":1,"requires":["core"]},"Image":{"name":"Image","submodules":{"Pixels":1},"elements":{},"classes":{"p5.Image":1},"fors":{"p5":1},"namespaces":{},"module":"Image","file":"src/image/p5.Image.js","line":21,"requires":["core"],"description":"<p>Creates a new <a href=\"#/p5.Image\">p5.Image</a>. A <a href=\"#/p5.Image\">p5.Image</a> is a canvas backed representation of an\nimage.</p>\n<p>p5 can display .gif, .jpg and .png images. Images may be displayed\nin 2D and 3D space. Before an image is used, it must be loaded with the\n<a href=\"#/p5/loadImage\">loadImage()</a> function. The <a href=\"#/p5.Image\">p5.Image</a> class contains fields for the width and\nheight of the image, as well as an array called <a href=\"#/p5.Image/pixels\">pixels[]</a> that contains the\nvalues for every pixel in the image.</p>\n<p>The methods described below allow easy access to the image's pixels and\nalpha channel and simplify the process of compositing.</p>\n<p>Before using the <a href=\"#/p5.Image/pixels\">pixels[]</a> array, be sure to use the <a href=\"#/p5.Image/loadPixels\">loadPixels()</a> method on\nthe image to make sure that the pixel data is properly loaded.</p>\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":"<p>This module defines the <a href=\"#/p5.Font\">p5.Font</a> class and functions for\ndrawing text to the display canvas.</p>\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":"<p>XML is a representation of an XML object, able to parse XML code. Use\n<a href=\"#/p5/loadXML\">loadXML()</a> to load external XML files and create XML objects.</p>\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":1200,"description":"<p>This is the p5 instance constructor.</p>\n<p>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 <a href=\"#/p5/preload\">preload()</a>,\n<a href=\"#/p5/setup\">setup()</a>, and/or\n<a href=\"#/p5/draw\">draw()</a> properties on it for running a sketch.</p>\n<p>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</p>\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":"<p><a href=\"#/p5.Table\">Table</a> 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.</p>\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":10},"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":10,"requires":["core"],"description":"<p>A class to describe a two or three dimensional vector, specifically\na Euclidean (also known as geometric) vector. A vector is an entity\nthat has both magnitude and direction. The datatype, however, stores\nthe components of the vector (x, y for 2D, and x, y, z for 3D). The magnitude\nand direction can be accessed via the methods <a href=\"#/p5.Vector/mag\">mag()</a> and <a href=\"#/p5.Vector/heading\">heading()</a>.</p>\n<p>In many of the p5.js examples, you will see <a href=\"#/p5.Vector\">p5.Vector</a> used to describe a\nposition, velocity, or acceleration. For example, if you consider a rectangle\nmoving across the screen, at any given instant it has a position (a vector\nthat points from the origin to its location), a velocity (the rate at which\nthe object's position changes per time unit, expressed as a vector), and\nacceleration (the rate at which the object's velocity changes per time\nunit, expressed as a vector).</p>\n<p>Since vectors represent groupings of values, we cannot simply use\ntraditional addition/multiplication/etc. Instead, we'll need to do some\n\"vector\" math, which is made easy by the methods inside the <a href=\"#/p5.Vector\">p5.Vector</a> class.</p>\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":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src/webgl/3d_primitives.js","line":1,"requires":["core","p5.Geometry"]},"Lights, Camera":{"name":"Lights, Camera","submodules":{"Interaction":1,"Lights":1,"Material":1,"Camera":1},"elements":{},"classes":{"p5.Camera":1,"p5.Geometry":1,"p5.Matrix":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":260},"Interaction":{"name":"Interaction","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Lights, Camera","namespace":"","file":"src/webgl/interaction.js","line":1,"requires":["core"]},"Lights":{"name":"Lights","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Lights, Camera","namespace":"","file":"src/webgl/light.js","line":1,"requires":["core"]},"3D Models":{"name":"3D Models","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src/webgl/loading.js","line":1,"requires":["core","p5.Geometry"]},"Material":{"name":"Material","submodules":{},"elements":{},"classes":{"p5.Geometry":1,"p5.Shader":1,"p5.Texture":1},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Lights, Camera","namespace":"","file":"src/webgl/p5.Texture.js","line":12,"requires":["core"],"description":"<p>This module defines the p5.Shader class</p>\n"},"Camera":{"name":"Camera","submodules":{},"elements":{},"classes":{"p5.Camera":1},"fors":{"p5":1,"p5.Camera":1},"is_submodule":1,"namespaces":{},"module":"Lights, Camera","namespace":"","file":"src/webgl/p5.Camera.js","line":339,"requires":["core"],"description":"<p>This class describes a camera for use in p5's\n<a href=\"https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5\">\nWebGL mode</a>. It contains camera position, orientation, and projection\ninformation necessary for rendering a 3D scene.</p>\n<p>New p5.Camera objects can be made through the\n<a href=\"#/p5/createCamera\">createCamera()</a> 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 <a href=\"#/p5/setCamera\">setCamera()</a> method.</p>\n<p>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 <a href=\"#/p5.Camera/move\">move()</a> method,\nfor instance, moves the camera along its own axes, whereas the\n<a href=\"#/p5.Camera/setPosition\">setPosition()</a>\nmethod sets the camera's position in world-space.</p>\n<p>The camera object propreties\n<code>eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ</code>\nwhich describes camera position, orientation, and projection\nare also accessible via the camera object generated using\n<a href=\"#/p5/createCamera\">createCamera()</a></p>\n"},"p5.sound":{"name":"p5.sound","submodules":{},"elements":{},"classes":{"p5.sound":1,"p5.Effect":1,"p5.Filter":1,"p5.LowPass":1,"p5.HighPass":1,"p5.BandPass":1,"p5.Oscillator":1,"p5.SinOsc":1,"p5.TriOsc":1,"p5.SawOsc":1,"p5.SqrOsc":1,"p5.MonoSynth":1,"p5.AudioVoice":1,"p5.PolySynth":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Signal":1,"p5.Envelope":1,"p5.Pulse":1,"p5.Noise":1,"p5.AudioIn":1,"p5.EQ":1,"p5.Panner3D":1,"p5.Delay":1,"p5.Reverb":1,"p5.Convolver":1,"p5.Phrase":1,"p5.Part":1,"p5.Score":1,"p5.SoundLoop":1,"p5.Compressor":1,"p5.SoundRecorder":1,"p5.PeakDetect":1,"p5.Gain":1,"p5.Distortion":1},"fors":{"p5.sound":1,"p5.Effect":1,"p5":1,"p5.Oscillator":1,"p5.MonoSynth":1,"p5.AudioVoice":1,"p5.PolySynth":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Signal":1,"p5.Envelope":1,"p5.AudioIn":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.Gain":1,"p5.Distortion":1},"namespaces":{},"module":"p5.sound","file":"lib/addons/p5.sound.js","line":11703,"description":"<p>p5.sound extends p5 with <a href=\"http://caniuse.com/audio-api\"\ntarget=\"_blank\">Web Audio</a> functionality including audio input,\nplayback, analysis and synthesis.\n</p>\n<ul>\n<li><a href=\"#/p5.SoundFile\"><b>p5.SoundFile</b></a>: Load and play sound files.</li>\n<li><a href=\"#/p5.Amplitude\"><b>p5.Amplitude</b></a>: Get the current volume of a sound.</li>\n<li><a href=\"#/p5.AudioIn\"><b>p5.AudioIn</b></a>: Get sound from an input source, typically\n  a computer microphone.</li>\n<li><a href=\"#/p5.FFT\"><b>p5.FFT</b></a>: Analyze the frequency of sound. Returns\n  results from the frequency spectrum or time domain (waveform).</li>\n<li><a href=\"#/p5.Oscillator\"><b>p5.Oscillator</b></a>: Generate Sine,\n  Triangle, Square and Sawtooth waveforms. Base class of\n  <li><a href=\"#/p5.Noise\">p5.Noise</a> and <a href=\"#/p5.Pulse\">p5.Pulse</a>.\n  </li>\n<li>\n  <a href=\"#/p5.MonoSynth\">p5.MonoSynth</a> and <a href=\"#/p5.PolySynth\">p5.PolySynth</a>: Play musical notes\n</li>\n<li><a href=\"#/p5.Envelope\"><b>p5.Envelope</b></a>: 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.</li>\n<li><a href=\"#/p5.Delay\"><b>p5.Delay</b></a>: A delay effect with\n  parameters for feedback, delayTime, and lowpass filter.</li>\n<li><a href=\"#/p5.Filter\"><b>p5.Filter</b></a>: Filter the frequency range of a\n  sound.\n</li>\n<li><a href=\"#/p5.Reverb\"><b>p5.Reverb</b></a>: Add reverb to a sound by specifying\n  duration and decay. </li>\n<b><li><a href=\"#/p5.Convolver\">p5.Convolver</a>:</b> Extends\n<a href=\"#/p5.Reverb\">p5.Reverb</a> to simulate the sound of real\n  physical spaces through convolution.</li>\n<b><li><a href=\"#/p5.SoundRecorder\">p5.SoundRecorder</a></b>: Record sound for playback\n  / save the .wav file.\n<b><li><a href=\"#/p5.SoundLoop\">p5.SoundLoop</a>, <a href=\"#/p5.Phrase\">p5.Phrase</a></b>, <b><a href=\"#/p5.Part\">p5.Part</a></b> and\n<b><a href=\"#/p5.Score\">p5.Score</a></b>: Compose musical sequences.\n</li>\n<li><a href=\"#/p5/userStartAudio\">userStartAudio</a>: Enable audio in a\nbrowser- and user-friendly way.</a>\n<p>p5.sound is on <a href=\"https://github.com/therewasaguy/p5.sound/\">GitHub</a>.\nDownload the latest version\n<a href=\"https://github.com/therewasaguy/p5.sound/blob/master/lib/p5.sound.js\">here</a>.</p>","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":13,"description":"<p>This is the p5 instance constructor.</p>\n<p>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 <a href=\"#/p5/preload\">preload()</a>,\n<a href=\"#/p5/setup\">setup()</a>, and/or\n<a href=\"#/p5/draw\">draw()</a> properties on it for running a sketch.</p>\n<p>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</p>\n","is_constructor":1,"params":[{"name":"sketch","description":"<p>a closure that can set optional <a href=\"#/p5/preload\">preload()</a>,\n                             <a href=\"#/p5/setup\">setup()</a>, and/or <a href=\"#/p5/draw\">draw()</a> properties on the\n                             given p5 instance</p>\n","type":"Function"},{"name":"node","description":"<p>element to attach canvas to</p>\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":14,"description":"<p>Each color stores the color mode and level maxes that was applied at the\ntime of its construction. These are used to interpret the input arguments\n(at construction and later for that instance of color) and to format the\noutput e.g. when <a href=\"#/p5/saturation\">saturation()</a> is requested.</p>\n<p>Internally, we store an array representing the ideal RGBA values in floating\npoint form, normalized from 0 to 1. From this we calculate the closest\nscreen color (RGBA levels from 0 to 255) and expose this to the renderer.</p>\n<p>We also cache normalized, floating point components of the color in various\nrepresentations as they are calculated. This is done to prevent repeating a\nconversion that has already been performed.</p>\n","is_constructor":1},"p5.Element":{"name":"p5.Element","shortname":"p5.Element","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"DOM","submodule":"DOM","namespace":"","file":"src/core/p5.Element.js","line":9,"description":"<p>Base class for all elements added to a sketch, including canvas,\ngraphics buffers, and other HTML elements. It is not called directly, but <a href=\"#/p5.Element\">p5.Element</a>\nobjects are created by calling <a href=\"#/p5/createCanvas\">createCanvas</a>, <a href=\"#/p5/createGraphics\">createGraphics</a>,\n<a href=\"#/p5/createDiv\">createDiv</a>, <a href=\"#/p5/createImg\">createImg</a>, <a href=\"#/p5/createInput\">createInput</a>, etc.</p>\n","is_constructor":1,"params":[{"name":"elt","description":"<p>DOM node that is wrapped</p>\n","type":"String"},{"name":"pInst","description":"<p>pointer to p5 instance</p>\n","type":"P5","optional":true}]},"p5.Graphics":{"name":"p5.Graphics","shortname":"p5.Graphics","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Rendering","submodule":"Rendering","namespace":"","file":"src/core/p5.Graphics.js","line":10,"description":"<p>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.</p>\n","is_constructor":1,"extends":"p5.Element","params":[{"name":"w","description":"<p>width</p>\n","type":"Number"},{"name":"h","description":"<p>height</p>\n","type":"Number"},{"name":"renderer","description":"<p>the renderer to use, either P2D or WEBGL</p>\n","type":"Constant"},{"name":"pInst","description":"<p>pointer to p5 instance</p>\n","type":"P5","optional":true}]},"p5.Renderer":{"name":"p5.Renderer","shortname":"p5.Renderer","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Rendering","submodule":"Rendering","namespace":"","file":"src/core/p5.Renderer.js","line":10,"description":"<p>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.</p>\n","is_constructor":1,"extends":"p5.Element","params":[{"name":"elt","description":"<p>DOM node that is wrapped</p>\n","type":"String"},{"name":"pInst","description":"<p>pointer to p5 instance</p>\n","type":"P5","optional":true},{"name":"isMainCanvas","description":"<p>whether we're using it as main canvas</p>\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":"<p>Base class for all p5.Dictionary types. Specifically\n typed Dictionary classes inherit from this class.</p>\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":394,"description":"<p>A simple Dictionary class for Strings.</p>\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":410,"description":"<p>A simple Dictionary class for Numbers.</p>\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":2334,"description":"<p>Extends <a href=\"#/p5.Element\">p5.Element</a> to handle audio and video. In addition to the methods\nof <a href=\"#/p5.Element\">p5.Element</a>, it also contains methods for controlling media. It is not\ncalled directly, but <a href=\"#/p5.MediaElement\">p5.MediaElement</a>s are created by calling <a href=\"#/p5/createVideo\">createVideo</a>,\n<a href=\"#/p5/createAudio\">createAudio</a>, and <a href=\"#/p5/createCapture\">createCapture</a>.</p>\n","is_constructor":1,"params":[{"name":"elt","description":"<p>DOM node that is wrapped</p>\n","type":"String"}]},"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":3490,"description":"<p>Base class for a file.\nUsed for Element.drop and createFileInput.</p>\n","is_constructor":1,"params":[{"name":"file","description":"<p>File that is wrapped</p>\n","type":"File"}]},"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":"<p>Creates a new <a href=\"#/p5.Image\">p5.Image</a>. A <a href=\"#/p5.Image\">p5.Image</a> is a canvas backed representation of an\nimage.</p>\n<p>p5 can display .gif, .jpg and .png images. Images may be displayed\nin 2D and 3D space. Before an image is used, it must be loaded with the\n<a href=\"#/p5/loadImage\">loadImage()</a> function. The <a href=\"#/p5.Image\">p5.Image</a> class contains fields for the width and\nheight of the image, as well as an array called <a href=\"#/p5.Image/pixels\">pixels[]</a> that contains the\nvalues for every pixel in the image.</p>\n<p>The methods described below allow easy access to the image's pixels and\nalpha channel and simplify the process of compositing.</p>\n<p>Before using the <a href=\"#/p5.Image/pixels\">pixels[]</a> array, be sure to use the <a href=\"#/p5.Image/loadPixels\">loadPixels()</a> method on\nthe image to make sure that the pixel data is properly loaded.</p>\n","example":["\n<div><code>\nfunction setup() {\n  let img = createImage(100, 100); // same as new p5.Image(100, 100);\n  img.loadPixels();\n  createCanvas(100, 100);\n  background(0);\n\n  // helper for writing color to array\n  function writeColor(image, x, y, red, green, blue, alpha) {\n    let index = (x + y * width) * 4;\n    image.pixels[index] = red;\n    image.pixels[index + 1] = green;\n    image.pixels[index + 2] = blue;\n    image.pixels[index + 3] = alpha;\n  }\n\n  let x, y;\n  // fill with random colors\n  for (y = 0; y < img.height; y++) {\n    for (x = 0; x < img.width; x++) {\n      let red = random(255);\n      let green = random(255);\n      let blue = random(255);\n      let alpha = 255;\n      writeColor(img, x, y, red, green, blue, alpha);\n    }\n  }\n\n  // draw a red line\n  y = 0;\n  for (x = 0; x < img.width; x++) {\n    writeColor(img, x, y, 255, 0, 0, 255);\n  }\n\n  // draw a green line\n  y = img.height - 1;\n  for (x = 0; x < img.width; x++) {\n    writeColor(img, x, y, 0, 255, 0, 255);\n  }\n\n  img.updatePixels();\n  image(img, 0, 0);\n}\n</code></div>"],"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":1200,"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":"<p><a href=\"#/p5.Table\">Table</a> 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.</p>\n","is_constructor":1,"params":[{"name":"rows","description":"<p>An array of p5.TableRow objects</p>\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":"<p>A TableRow object represents a single row of data values,\nstored in columns, from a table.</p>\n<p>A Table Row contains both an ordered array, and an unordered\nJSON object.</p>\n","is_constructor":1,"params":[{"name":"str","description":"<p>optional: populate the row with a\n                            string of values, separated by the\n                            separator</p>\n","type":"String","optional":true},{"name":"separator","description":"<p>comma separated values (csv) by default</p>\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":"<p>XML is a representation of an XML object, able to parse XML code. Use\n<a href=\"#/p5/loadXML\">loadXML()</a> to load external XML files and create XML objects.</p>\n","is_constructor":1,"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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\n// Sketch prints:\n// 0, Capra hircus, Goat\n// 1, Panthera pardus, Leopard\n// 2, Equus zebra, Zebra\n</code></div>"],"alt":"no image displayed"},"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":10,"description":"<p>A class to describe a two or three dimensional vector, specifically\na Euclidean (also known as geometric) vector. A vector is an entity\nthat has both magnitude and direction. The datatype, however, stores\nthe components of the vector (x, y for 2D, and x, y, z for 3D). The magnitude\nand direction can be accessed via the methods <a href=\"#/p5.Vector/mag\">mag()</a> and <a href=\"#/p5.Vector/heading\">heading()</a>.</p>\n<p>In many of the p5.js examples, you will see <a href=\"#/p5.Vector\">p5.Vector</a> used to describe a\nposition, velocity, or acceleration. For example, if you consider a rectangle\nmoving across the screen, at any given instant it has a position (a vector\nthat points from the origin to its location), a velocity (the rate at which\nthe object's position changes per time unit, expressed as a vector), and\nacceleration (the rate at which the object's velocity changes per time\nunit, expressed as a vector).</p>\n<p>Since vectors represent groupings of values, we cannot simply use\ntraditional addition/multiplication/etc. Instead, we'll need to do some\n\"vector\" math, which is made easy by the methods inside the <a href=\"#/p5.Vector\">p5.Vector</a> class.</p>\n","is_constructor":1,"params":[{"name":"x","description":"<p>x component of the vector</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>z component of the vector</p>\n","type":"Number","optional":true}],"example":["\n<div>\n<code>\nlet v1 = createVector(40, 50);\nlet v2 = createVector(40, 50);\n\nellipse(v1.x, v1.y, 50, 50);\nellipse(v2.x, v2.y, 50, 50);\nv1.add(v2);\nellipse(v1.x, v1.y, 50, 50);\n</code>\n</div>"],"alt":"2 white ellipses. One center-left the other bottom right and off canvas"},"p5.Font":{"name":"p5.Font","shortname":"p5.Font","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Typography","submodule":"Loading & Displaying","namespace":"","file":"src/typography/p5.Font.js","line":13,"description":"<p>Base class for font handling</p>\n","is_constructor":1,"params":[{"name":"pInst","description":"<p>pointer to p5 instance</p>\n","type":"P5","optional":true}]},"p5.Camera":{"name":"p5.Camera","shortname":"p5.Camera","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Lights, Camera","submodule":"Camera","namespace":"","file":"src/webgl/p5.Camera.js","line":339,"description":"<p>This class describes a camera for use in p5's\n<a href=\"https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5\">\nWebGL mode</a>. It contains camera position, orientation, and projection\ninformation necessary for rendering a 3D scene.</p>\n<p>New p5.Camera objects can be made through the\n<a href=\"#/p5/createCamera\">createCamera()</a> 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 <a href=\"#/p5/setCamera\">setCamera()</a> method.</p>\n<p>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 <a href=\"#/p5.Camera/move\">move()</a> method,\nfor instance, moves the camera along its own axes, whereas the\n<a href=\"#/p5.Camera/setPosition\">setPosition()</a>\nmethod sets the camera's position in world-space.</p>\n<p>The camera object propreties\n<code>eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ</code>\nwhich describes camera position, orientation, and projection\nare also accessible via the camera object generated using\n<a href=\"#/p5/createCamera\">createCamera()</a></p>\n","params":[{"name":"rendererGL","description":"<p>instance of WebGL renderer</p>\n","type":"RendererGL"}],"example":["\n<div>\n<code>\nlet cam;\nlet delta = 0.01;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n  cam = createCamera();\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</code>\n</div>"],"alt":"camera view pans left and right across a series of rotating 3D boxes."},"p5.Geometry":{"name":"p5.Geometry","shortname":"p5.Geometry","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Lights, Camera","submodule":"Material","namespace":"","file":"src/webgl/p5.Geometry.js","line":12,"description":"<p>p5 Geometry class</p>\n","is_constructor":1,"params":[{"name":"detailX","description":"<p>number of vertices on horizontal surface</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of vertices on horizontal surface</p>\n","type":"Integer","optional":true},{"name":"callback","description":"<p>function to call upon object instantiation.</p>\n","type":"Function","optional":true}]},"p5.Shader":{"name":"p5.Shader","shortname":"p5.Shader","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Lights, Camera","submodule":"Material","namespace":"","file":"src/webgl/p5.Shader.js","line":11,"description":"<p>Shader class for WEBGL Mode</p>\n","is_constructor":1,"params":[{"name":"renderer","description":"<p>an instance of p5.RendererGL that\nwill provide the GL context for this new p5.Shader</p>\n","type":"p5.RendererGL"},{"name":"vertSrc","description":"<p>source code for the vertex shader (as a string)</p>\n","type":"String"},{"name":"fragSrc","description":"<p>source code for the fragment shader (as a string)</p>\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.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":264,"description":"<p>Effect is a base class for audio effects in p5. <br>\nThis module handles the nodes and methods that are\ncommon and useful for current and future effects.</p>\n<p>This class is extended by <a href=\"/reference/#/p5.Distortion\">p5.Distortion</a>,\n<a href=\"/reference/#/p5.Compressor\">p5.Compressor</a>,\n<a href=\"/reference/#/p5.Delay\">p5.Delay</a>,\n<a href=\"/reference/#/p5.Filter\">p5.Filter</a>,\n<a href=\"/reference/#/p5.Reverb\">p5.Reverb</a>.</p>\n","is_constructor":1,"params":[{"name":"ac","description":"<p>Reference to the audio context of the p5 object</p>\n","type":"Object","optional":true},{"name":"input","description":"<p>Gain Node effect wrapper</p>\n","type":"AudioNode","optional":true},{"name":"output","description":"<p>Gain Node effect wrapper</p>\n","type":"AudioNode","optional":true},{"name":"_drywet","description":"<p>Tone.JS CrossFade node (defaults to value: 1)</p>\n","type":"Object","optional":true},{"name":"wet","description":"<p>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.</p>\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":883,"description":"<p>A p5.Filter uses a Web Audio Biquad Filter to filter\nthe frequency response of an input source. Subclasses\ninclude:</p>\n<a href=\"/reference/#/p5.LowPass\"><code>p5.LowPass</code></a>:\nAllows frequencies below the cutoff frequency to pass through,\nand attenuates frequencies above the cutoff.<br/>\n<a href=\"/reference/#/p5.HighPass\"><code>p5.HighPass</code></a>:\nThe opposite of a lowpass filter. <br/>\n<a href=\"/reference/#/p5.BandPass\"><code>p5.BandPass</code></a>:\nAllows a range of frequencies to pass through and attenuates\nthe frequencies below and above this frequency range.<br/>\n\n<p>The <code>.res()</code> method controls either width of the\nbandpass, or resonance of the low/highpass cutoff frequency.</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","extends":"p5.Effect","is_constructor":1,"params":[{"name":"type","description":"<p>'lowpass' (default), 'highpass', 'bandpass'</p>\n","type":"String","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":1147,"description":"<p>Constructor: <code>new p5.LowPass()</code> Filter.\nThis is the same as creating a p5.Filter and then calling\nits method <code>setType('lowpass')</code>.\nSee p5.Filter for methods.</p>\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":1164,"description":"<p>Constructor: <code>new p5.HighPass()</code> Filter.\nThis is the same as creating a p5.Filter and then calling\nits method <code>setType('highpass')</code>.\nSee p5.Filter for methods.</p>\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":1180,"description":"<p>Constructor: <code>new p5.BandPass()</code> Filter.\nThis is the same as creating a p5.Filter and then calling\nits method <code>setType('bandpass')</code>.\nSee p5.Filter for methods.</p>\n","is_constructor":1,"extends":"p5.Filter"},"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":1375,"description":"<p>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).</p>\n\n<p>Set the type of oscillation with setType(), or by instantiating a\nspecific oscillator: <a href=\"/reference/#/p5.SinOsc\">p5.SinOsc</a>, <a\nhref=\"/reference/#/p5.TriOsc\">p5.TriOsc</a>, <a\nhref=\"/reference/#/p5.SqrOsc\">p5.SqrOsc</a>, or <a\nhref=\"/reference/#/p5.SawOsc\">p5.SawOsc</a>.\n</p>","is_constructor":1,"params":[{"name":"freq","description":"<p>frequency defaults to 440Hz</p>\n","type":"Number","optional":true},{"name":"type","description":"<p>type of oscillator. Options:\n                       'sine' (default), 'triangle',\n                       'sawtooth', 'square'</p>\n","type":"String","optional":true}],"example":["\n<div><code>\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</code> </div>"]},"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":1890,"description":"<p>Constructor: <code>new p5.SinOsc()</code>.\nThis creates a Sine Wave Oscillator and is\nequivalent to <code> new p5.Oscillator('sine')\n</code> or creating a p5.Oscillator and then calling\nits method <code>setType('sine')</code>.\nSee p5.Oscillator for methods.</p>\n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"<p>Set the frequency</p>\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":1910,"description":"<p>Constructor: <code>new p5.TriOsc()</code>.\nThis creates a Triangle Wave Oscillator and is\nequivalent to <code>new p5.Oscillator('triangle')\n</code> or creating a p5.Oscillator and then calling\nits method <code>setType('triangle')</code>.\nSee p5.Oscillator for methods.</p>\n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"<p>Set the frequency</p>\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":1929,"description":"<p>Constructor: <code>new p5.SawOsc()</code>.\nThis creates a SawTooth Wave Oscillator and is\nequivalent to <code> new p5.Oscillator('sawtooth')\n</code> or creating a p5.Oscillator and then calling\nits method <code>setType('sawtooth')</code>.\nSee p5.Oscillator for methods.</p>\n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"<p>Set the frequency</p>\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":1948,"description":"<p>Constructor: <code>new p5.SqrOsc()</code>.\nThis creates a Square Wave Oscillator and is\nequivalent to <code> new p5.Oscillator('square')\n</code> or creating a p5.Oscillator and then calling\nits method <code>setType('square')</code>.\nSee p5.Oscillator for methods.</p>\n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"<p>Set the frequency</p>\n","type":"Number","optional":true}]},"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":2008,"description":"<p>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.</p>\n","is_constructor":1,"example":["\n<div><code>\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</code></div>"]},"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":2356,"description":"<p>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();</p>\n","is_constructor":1},"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":2426,"description":"<p>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.</p>\n","is_constructor":1,"params":[{"name":"synthVoice","description":"<p>A monophonic synth voice inheriting\n                               the AudioVoice class. Defaults to p5.MonoSynth</p>\n","type":"Number","optional":true},{"name":"maxVoices","description":"<p>Number of voices, defaults to 8;</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":3360,"description":"<p>SoundFile object with a path to a file.</p>\n\n<p>The p5.SoundFile may not be available immediately because\nit loads the file information asynchronously.</p>\n\n<p>To do something with the sound as soon as it loads\npass the name of a function as the second parameter.</p>\n\n<p>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.</p>","is_constructor":1,"params":[{"name":"path","description":"<p>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.</p>\n","type":"String|Array"},{"name":"successCallback","description":"<p>Name of a function to call once file loads</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>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.</p>\n","type":"Function","optional":true},{"name":"whileLoadingCallback","description":"<p>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.</p>\n","type":"Function","optional":true}],"example":["\n<div><code>\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 </code></div>"]},"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":5186,"description":"<p>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.</p>\n","is_constructor":1,"params":[{"name":"smoothing","description":"<p>between 0.0 and .999 to smooth\n                           amplitude readings (defaults to 0)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\nlet sound, amplitude;\n\nfunction preload(){\n  sound = loadSound('assets/beat.mp3');\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);\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 (sound.isPlaying() ){\n    sound.stop();\n  } else {\n    sound.play();\n  }\n}\n\n</code></div>"]},"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":5499,"description":"<p>FFT (Fast Fourier Transform) is an analysis algorithm that\nisolates individual\n<a href=\"https://en.wikipedia.org/wiki/Audio_frequency\">\naudio frequencies</a> within a waveform.</p>\n\n<p>Once instantiated, a p5.FFT object can return an array based on\ntwo types of analyses: <br> • <code>FFT.waveform()</code> 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.<br>\n• <code>FFT.analyze() </code> 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 <code>getEnergy()</code> to measure amplitude at specific\nfrequencies, or within a range of frequencies. </p>\n\n<p>FFT analyzes a very short snapshot of sound called a sample\nbuffer. It returns an array of amplitude measurements, referred\nto as <code>bins</code>. 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.</p>","is_constructor":1,"params":[{"name":"smoothing","description":"<p>Smooth results of Freq Spectrum.\n                              0.0 < smoothing < 1.0.\n                              Defaults to 0.8.</p>\n","type":"Number","optional":true},{"name":"bins","description":"<p>Length of resulting array.\n                          Must be a power of two between\n                          16 and 1024. Defaults to 1024.</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"p5.Signal":{"name":"p5.Signal","shortname":"p5.Signal","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":6146,"description":"<p>p5.Signal is a constant audio-rate signal used by p5.Oscillator\nand p5.Envelope for modulation math.</p>\n\n<p>This is necessary because Web Audio is processed on a seprate clock.\nFor example, the p5 draw loop runs about 60 times per second. But\nthe audio clock must process samples 44100 times per second. If we\nwant to add a value to each of those samples, we can't do it in the\ndraw loop, but we can do it by adding a constant-rate audio signal.</p.\n\n<p>This class mostly functions behind the scenes in p5.sound, and returns\na Tone.Signal from the Tone.js library by Yotam Mann.\nIf you want to work directly with audio signals for modular\nsynthesis, check out\n<a href='http://bit.ly/1oIoEng' target=_'blank'>tone.js.</a></p>","is_constructor":1,"return":{"description":"A Signal object from the Tone.js library","type":"Tone.Signal"},"example":["\n<div><code>\nlet carrier, modulator;\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  carrier = new p5.Oscillator('sine');\n  carrier.start();\n  carrier.amp(1); // set amplitude\n  carrier.freq(220); // set frequency\n\n  modulator = new p5.Oscillator('sawtooth');\n  modulator.disconnect();\n  modulator.start();\n  modulator.amp(1);\n  modulator.freq(4);\n\n  // Modulator's default amplitude range is -1 to 1.\n  // Multiply it by -200, so the range is -200 to 200\n  // then add 220 so the range is 20 to 420\n  carrier.freq( modulator.mult(-400).add(220) );\n}\n\nfunction canvasPressed() {\n  userStartAudio();\n  carrier.amp(1.0);\n}\n\nfunction mouseReleased() {\n  carrier.amp(0);\n}\n</code></div>"]},"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":6350,"description":"<p>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 (\n<a href=\"https://upload.wikimedia.org/wikipedia/commons/e/ea/ADSR_parameter.svg\">ADSR</a>\n). Envelopes can also control other Web Audio Parameters—for example, a p5.Envelope can\ncontrol an Oscillator's frequency like this: <code>osc.freq(env)</code>.</p>\n<p>Use <code><a href=\"#/p5.Envelope/setRange\">setRange</a></code> to change the attack/release level.\nUse <code><a href=\"#/p5.Envelope/setADSR\">setADSR</a></code> to change attackTime, decayTime, sustainPercent and releaseTime.</p>\n<p>Use the <code><a href=\"#/p5.Envelope/play\">play</a></code> method to play the entire envelope,\nthe <code><a href=\"#/p5.Envelope/ramp\">ramp</a></code> method for a pingable trigger,\nor <code><a href=\"#/p5.Envelope/triggerAttack\">triggerAttack</a></code>/\n<code><a href=\"#/p5.Envelope/triggerRelease\">triggerRelease</a></code> to trigger noteOn/noteOff.</p>","is_constructor":1,"example":["\n<div><code>\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</code></div>"]},"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":7192,"description":"<p>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 <a href=\"\nhttp://p5js.org/reference/#/p5.Oscillator\">\n<code>p5.Oscillator</code> for a full list of methods.</p>\n","extends":"p5.Oscillator","is_constructor":1,"params":[{"name":"freq","description":"<p>Frequency in oscillations per second (Hz)</p>\n","type":"Number","optional":true},{"name":"w","description":"<p>Width between the pulses (0 to 1.0,\n                       defaults to 0)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":7399,"description":"<p>Noise is a type of oscillator that generates a buffer with random values.</p>\n","extends":"p5.Oscillator","is_constructor":1,"params":[{"name":"type","description":"<p>Type of noise can be 'white' (default),\n                     'brown' or 'pink'.</p>\n","type":"String"}]},"p5.AudioIn":{"name":"p5.AudioIn","shortname":"p5.AudioIn","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":7583,"description":"<p>Get audio from an input, i.e. your computer's microphone.</p>\n\n<p>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.</p>\n\n<p>If you want to hear the AudioIn, use the .connect() method.\nAudioIn does not connect to p5.sound output by default to prevent\nfeedback.</p>\n\n<p><em>Note: This uses the <a href=\"http://caniuse.com/stream\">getUserMedia/\nStream</a> 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.</em></p>","is_constructor":1,"params":[{"name":"errorCallback","description":"<p>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.</p>\n","type":"Function","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":8021,"description":"<p>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).</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","is_constructor":1,"extends":"p5.Effect","params":[{"name":"_eqsize","description":"<p>Constructor will accept 3 or 8, defaults to 3</p>\n","type":"Number","optional":true}],"return":{"description":"p5.EQ object","type":"Object"},"example":["\n<div><code>\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</code></div>"]},"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":8301,"description":"<p>Panner3D is based on the <a title=\"Web Audio Panner docs\"  href=\n\"https://developer.mozilla.org/en-US/docs/Web/API/PannerNode\">\nWeb Audio Spatial Panner Node</a>.\nThis panner is a spatial processing node that allows audio to be positioned\nand oriented in 3D space.</p>\n<p>The position is relative to an <a title=\"Web Audio Listener docs\" href=\n\"https://developer.mozilla.org/en-US/docs/Web/API/AudioListener\">\nAudio Context Listener</a>, which can be accessed\nby <code>p5.soundOut.audiocontext.listener</code></p>\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":8829,"description":"<p>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.</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","extends":"p5.Effect","is_constructor":1,"example":["\n<div><code>\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</code></div>"]},"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":9175,"description":"<p>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.</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","extends":"p5.Effect","is_constructor":1,"example":["\n<div><code>\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</code></div>"]},"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":9397,"description":"<p>p5.Convolver extends p5.Reverb. It can emulate the sound of real\nphysical spaces through a process called <a href=\"\nhttps://en.wikipedia.org/wiki/Convolution_reverb#Real_space_simulation\">\nconvolution</a>.</p>\n\n<p>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.</p>\n\n<p>Use the method <code>createConvolution(path)</code> to instantiate a\np5.Convolver with a path to your impulse response audio file.</p>","extends":"p5.Effect","is_constructor":1,"params":[{"name":"path","description":"<p>path to a sound file</p>\n","type":"String"},{"name":"callback","description":"<p>function to call when loading succeeds</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to call if loading fails.\n                                   This function will receive an error or\n                                   XMLHttpRequest object with information\n                                   about what went wrong.</p>\n","type":"Function","optional":true}],"example":["\n<div><code>\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 master output...\n  sound.disconnect();\n\n  // ...and process with cVerb\n  // so that we only hear the convolution\n  cVerb.process(sound);\n}\n\nfunction playSound() {\n  sound.play();\n}\n</code></div>"]},"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":9922,"description":"<p>A phrase is a pattern of musical events over time, i.e.\na series of notes and rests.</p>\n\n<p>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.</p>\n\n<p>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 <code>playNote(value){}</code>. 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).</p>","is_constructor":1,"params":[{"name":"name","description":"<p>Name so that you can access the Phrase.</p>\n","type":"String"},{"name":"callback","description":"<p>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.</p>\n","type":"Function"},{"name":"sequence","description":"<p>Array of values to pass into the callback\n                          at each step of the phrase.</p>\n","type":"Array"}],"example":["\n<div><code>\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</code></div>"]},"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":10002,"description":"<p>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.</p>\n\n<p>See p5.Phrase for more about musical timing.</p>","is_constructor":1,"params":[{"name":"steps","description":"<p>Steps in the part</p>\n","type":"Number","optional":true},{"name":"tatums","description":"<p>Divisions of a beat, e.g. use 1/4, or 0.25 for a quater note (default is 1/16, a sixteenth note)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":10288,"description":"<p>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\n<code>new p5.Score(a, a, b, a, c)</code></p>\n","is_constructor":1,"params":[{"name":"parts","description":"<p>One or multiple parts, to be played in sequence.</p>\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":10454,"description":"<p>SoundLoop</p>\n","is_constructor":1,"params":[{"name":"callback","description":"<p>this function will be called on each iteration of theloop</p>\n","type":"Function"},{"name":"interval","description":"<p>amount of time (if a number) or beats (if a string, following <a href = \"https://github.com/Tonejs/Tone.js/wiki/Time\">Tone.Time</a> convention) for each iteration of the loop. Defaults to 1 second.</p>\n","type":"Number|String","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":10792,"description":"<p>Compressor is an audio effect class that performs dynamics compression\non an audio input source. This is a very commonly used technique in music\nand sound production. Compression creates an overall louder, richer,\nand fuller sound by lowering the volume of louds and raising that of softs.\nCompression can be used to avoid clipping (sound distortion due to\npeaks in volume) and is especially useful when many sounds are played\nat once. Compression can be used on indivudal sound sources in addition\nto the master output.</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","is_constructor":1,"extends":"p5.Effect"},"p5.SoundRecorder":{"name":"p5.SoundRecorder","shortname":"p5.SoundRecorder","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":11056,"description":"<p>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().</p>\n<p>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.</p>","is_constructor":1,"example":["\n<div><code>\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</div></code>"]},"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":11286,"description":"<p>PeakDetect works in conjunction with p5.FFT to\nlook for onsets in some or all of the frequency spectrum.\n</p>\n<p>\nTo use p5.PeakDetect, call <code>update</code> in the draw loop\nand pass in a p5.FFT object.\n</p>\n<p>\nYou can listen for a specific part of the frequency spectrum by\nsetting the range between <code>freq1</code> and <code>freq2</code>.\n</p>\n\n<p><code>threshold</code> 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.</p>\n\n<p>\nThe update method is meant to be run in the draw loop, and\n<b>frames</b> 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<code> framesPerPeak = 60 / (estimatedBPM / 60 );</code>\n</p>\n\n<p>\nBased on example contribtued by @b2renger, and a simple beat detection\nexplanation by <a\nhref=\"http://www.airtightinteractive.com/2013/10/making-audio-reactive-visuals/\"\ntarget=\"_blank\">Felix Turner</a>.\n</p>","is_constructor":1,"params":[{"name":"freq1","description":"<p>lowFrequency - defaults to 20Hz</p>\n","type":"Number","optional":true},{"name":"freq2","description":"<p>highFrequency - defaults to 20000 Hz</p>\n","type":"Number","optional":true},{"name":"threshold","description":"<p>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.</p>\n","type":"Number","optional":true},{"name":"framesPerPeak","description":"<p>Defaults to 20.</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":11521,"description":"<p>A gain node is usefull to set the relative volume of sound.\nIt's typically used to build mixers.</p>\n","is_constructor":1,"example":["\n<div><code>\n\n// load two soundfile and crossfade beetween them\nlet sound1,sound2;\nlet sound1Gain, sound2Gain, masterGain;\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 'master' gain to which we will connect both soundfiles\n  masterGain = new p5.Gain();\n  masterGain.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(masterGain); // connect its output to the 'master'\n  sound2.disconnect();\n  sound2Gain = new p5.Gain();\n  sound2Gain.setInput(sound2);\n  sound2Gain.connect(masterGain);\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 'master    *  volume control'\n  var masterVolume = constrain(map(mouseY,height,0,0,1), 0, 1);\n  masterGain.amp(masterVolume);\n  text('master', width/2, height - masterVolume * 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</code></div>"]},"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":11703,"description":"<p>A Distortion effect created with a Waveshaper Node,\nwith an approach adapted from\n<a href=\"http://stackoverflow.com/questions/22312841/waveshaper-node-in-webaudio-how-to-emulate-distortion\">Kevin Ennis</a></p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","extends":"p5.Effect","is_constructor":1,"params":[{"name":"amount","description":"<p>Unbounded distortion amount.\n                               Normal values range from 0-1.</p>\n","type":"Number","optional":true,"optdefault":"0.25"},{"name":"oversample","description":"<p>'none', '2x', or '4x'.</p>\n","type":"String","optional":true,"optdefault":"'none'"}]}},"elements":{},"classitems":[{"file":"src/accessibility/describe.js","line":18,"description":"<p>Creates a screen reader accessible description for the canvas.\nThe first parameter should be a string with a description of the canvas.\nThe second parameter is optional. If specified, it determines how the\ndescription is displayed.</p>\n<p><code class=\"language-javascript\">describe(text, LABEL)</code> displays\nthe description to all users as a <a\nhref=\"https://en.wikipedia.org/wiki/Museum_label\" target=\"_blank\">\ntombstone or exhibit label/caption</a> in a\n<code class=\"language-javascript\"><div class=\"p5Label\"></div></code>\nadjacent to the canvas. You can style it as you wish in your CSS.</p>\n<p><code class=\"language-javascript\">describe(text, FALLBACK)</code> makes the\ndescription accessible to screen-reader users only, in\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility\" target=\"_blank\">\na sub DOM inside the canvas element</a>. If a second parameter is not\nspecified, by default, the description will only be available to\nscreen-reader users.</p>\n","itemtype":"method","name":"describe","params":[{"name":"text","description":"<p>description of the canvas</p>\n","type":"String"},{"name":"display","description":"<p>either LABEL or FALLBACK (Optional)</p>\n","type":"Constant","optional":true}],"example":["\n<div>\n<code>\ndescribe('pink square with red heart in the bottom right corner', LABEL);\nbackground('pink');\nfill('red');\nnoStroke();\nellipse(67, 67, 20, 20);\nellipse(83, 67, 20, 20);\ntriangle(91, 73, 75, 95, 59, 73);\n</code>\n</div>\n\n<div>\n<code>\nlet x = 0;\nfunction draw() {\n  if (x > 100) {\n    x = 0;\n  }\n  background(220);\n  fill(0, 255, 0);\n  ellipse(x, 50, 40, 40);\n  x = x + 0.1;\n  describe('green circle at x pos ' + round(x) + ' moving to the right');\n}\n</code>\n</div>\n"],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/accessibility/describe.js","line":115,"description":"<p>This function creates a screen-reader accessible\ndescription for elements —shapes or groups of shapes that create\nmeaning together— in the canvas. The first paramater should\nbe the name of the element. The second parameter should be a string\nwith a description of the element. The third parameter is optional.\nIf specified, it determines how the element description is displayed.</p>\n<p><code class=\"language-javascript\">describeElement(name, text, LABEL)</code>\ndisplays the element description to all users as a\n<a href=\"https://en.wikipedia.org/wiki/Museum_label\" target=\"_blank\">\ntombstone or exhibit label/caption</a> in a\n<code class=\"language-javascript\"><div class=\"p5Label\"></div></code>\nadjacent to the canvas. You can style it as you wish in your CSS.</p>\n<p><code class=\"language-javascript\">describeElement(name, text, FALLBACK)</code>\nmakes the element description accessible to screen-reader users\nonly, in <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility\" target=\"_blank\">\na sub DOM inside the canvas element</a>. If a second parameter is not\nspecified, by default, the element description will only be available\nto screen-reader users.</p>\n","itemtype":"method","name":"describeElement","params":[{"name":"name","description":"<p>name of the element</p>\n","type":"String"},{"name":"text","description":"<p>description of the element</p>\n","type":"String"},{"name":"display","description":"<p>either LABEL or FALLBACK (Optional)</p>\n","type":"Constant","optional":true}],"example":["\n<div>\n<code>\ndescribe('Heart and yellow circle over pink background', LABEL);\nnoStroke();\nbackground('pink');\ndescribeElement('Circle', 'Yellow circle in the top left corner', LABEL);\nfill('yellow');\nellipse(25, 25, 40, 40);\ndescribeElement('Heart', 'red heart in the bottom right corner', LABEL);\nfill('red');\nellipse(66.6, 66.6, 20, 20);\nellipse(83.2, 66.6, 20, 20);\ntriangle(91.2, 72.6, 75, 95, 58.6, 72.6);\n</code>\n</div>"],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/accessibility/outputs.js","line":10,"description":"<p><code class=\"language-javascript\">textOutput()</code> creates a screenreader\naccessible output that describes the shapes present on the canvas.\nThe general description of the canvas includes canvas size,\ncanvas color, and number of elements in the canvas\n(example: 'Your output is a, 400 by 400 pixels, lavender blue\ncanvas containing the following 4 shapes:'). This description\nis followed by a list of shapes where the color, position, and area\nof each shape are described (example: \"orange ellipse at top left\ncovering 1% of the canvas\"). Each element can be selected to get\nmore details. A table of elements is also provided. In this table,\nshape, color, location, coordinates and area are described\n(example: \"orange ellipse location=top left area=2\").</p>\n<p><code class=\"language-javascript\">textOutput()</code> and <code class=\"language-javascript\">texOutput(FALLBACK)</code>\nmake the output available in <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility\" target=\"_blank\">\na sub DOM inside the canvas element</a> which is accessible to screen readers.\n<code class=\"language-javascript\">textOutput(LABEL)</code> creates an\nadditional div with the output adjacent to the canvas, this is useful\nfor non-screen reader users that might want to display the output outside\nof the canvas' sub DOM as they code. However, using LABEL will create\nunnecessary redundancy for screen reader users. We recommend using LABEL\nonly as part of the development process of a sketch and removing it before\npublishing or sharing with screen reader users.</p>\n","itemtype":"method","name":"textOutput","params":[{"name":"display","description":"<p>either FALLBACK or LABEL (Optional)</p>\n","type":"Constant","optional":true}],"example":["\n<div>\n<code>\ntextOutput();\nbackground(148, 196, 0);\nfill(255, 0, 0);\nellipse(20, 20, 20, 20);\nfill(0, 0, 255);\nrect(50, 50, 50, 50);\n</code>\n</div>\n\n\n<div>\n<code>\nlet x = 0;\nfunction draw() {\n  textOutput();\n  background(148, 196, 0);\n  fill(255, 0, 0);\n  ellipse(x, 20, 20, 20);\n  fill(0, 0, 255);\n  rect(50, 50, 50, 50);\n  ellipse(20, 20, 20, 20);\n  x += 0.1;\n}\n</code>\n</div>\n"],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/accessibility/outputs.js","line":88,"description":"<p><code class=\"language-javascript\">gridOutput()</code> lays out the\ncontent of the canvas in the form of a grid (html table) based\non the spatial location of each shape. A brief\ndescription of the canvas is available before the table output.\nThis description includes: color of the background, size of the canvas,\nnumber of objects, and object types (example: \"lavender blue canvas is\n200 by 200 and contains 4 objects - 3 ellipses 1 rectangle\"). The grid\ndescribes the content spatially, each element is placed on a cell of the\ntable depending on its position. Within each cell an element the color\nand type of shape of that element are available (example: \"orange ellipse\").\nThese descriptions can be selected individually to get more details.\nA list of elements where shape, color, location, and area are described\n(example: \"orange ellipse location=top left area=1%\") is also available.</p>\n<p><code class=\"language-javascript\">gridOutput()</code> and <code class=\"language-javascript\">gridOutput(FALLBACK)</code>\nmake the output available in <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility\" target=\"_blank\">\na sub DOM inside the canvas element</a> which is accessible to screen readers.\n<code class=\"language-javascript\">gridOutput(LABEL)</code> creates an\nadditional div with the output adjacent to the canvas, this is useful\nfor non-screen reader users that might want to display the output outside\nof the canvas' sub DOM as they code. However, using LABEL will create\nunnecessary redundancy for screen reader users. We recommend using LABEL\nonly as part of the development process of a sketch and removing it before\npublishing or sharing with screen reader users.</p>\n","itemtype":"method","name":"gridOutput","params":[{"name":"display","description":"<p>either FALLBACK or LABEL (Optional)</p>\n","type":"Constant","optional":true}],"example":["\n<div>\n<code>\ngridOutput();\nbackground(148, 196, 0);\nfill(255, 0, 0);\nellipse(20, 20, 20, 20);\nfill(0, 0, 255);\nrect(50, 50, 50, 50);\n</code>\n</div>\n\n\n<div>\n<code>\nlet x = 0;\nfunction draw() {\n  gridOutput();\n  background(148, 196, 0);\n  fill(255, 0, 0);\n  ellipse(x, 20, 20, 20);\n  fill(0, 0, 255);\n  rect(50, 50, 50, 50);\n  ellipse(20, 20, 20, 20);\n  x += 0.1;\n}\n</code>\n</div>\n"],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/color/color_conversion.js","line":8,"description":"<p>Conversions adapted from <a href=\"http://www.easyrgb.com/en/math.php\">http://www.easyrgb.com/en/math.php</a>.</p>\n<p>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.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":19,"description":"<p>Convert an HSBA array to HSLA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":45,"description":"<p>Convert an HSBA array to RGBA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":100,"description":"<p>Convert an HSLA array to HSBA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":123,"description":"<p>Convert an HSLA array to RGBA.</p>\n<p>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.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":187,"description":"<p>Convert an RGBA array to HSBA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":226,"description":"<p>Convert an RGBA array to HSLA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/creating_reading.js","line":16,"description":"<p>Extracts the alpha value from a color or pixel array.</p>\n","itemtype":"method","name":"alpha","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the alpha value","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\nlet c = color(0, 126, 255, 102);\nfill(c);\nrect(15, 15, 35, 70);\nlet value = alpha(c); // Sets 'value' to 102\nfill(value);\nrect(50, 15, 35, 70);\n</code>\n</div>"],"alt":"Left half of canvas light blue and right half light charcoal grey.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":45,"description":"<p>Extracts the blue value from a color or pixel array.</p>\n","itemtype":"method","name":"blue","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the blue value","type":"Number"},"example":["\n<div>\n<code>\nlet c = color(175, 100, 220);\nfill(c);\nrect(15, 20, 35, 60); // Draw left rectangle\nlet blueValue = blue(c);\nfill(0, 0, blueValue);\nrect(50, 20, 35, 60); // Draw right rectangle\n</code>\n</div>"],"alt":"Left half of canvas light purple and right half a royal blue.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":72,"description":"<p>Extracts the HSB brightness value from a color or pixel array.</p>\n","itemtype":"method","name":"brightness","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the brightness value","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 255);\nlet c = color(0, 126, 255);\nfill(c);\nrect(15, 20, 35, 60);\nlet value = brightness(c); // Sets 'value' to 255\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>\n\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 255);\nlet c = color('hsb(60, 100%, 50%)');\nfill(c);\nrect(15, 20, 35, 60);\nlet value = brightness(c); // A 'value' of 50% is 127.5\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>"],"alt":"Left half of canvas salmon pink and the right half with it's brightness colored white.\nLeft half of canvas olive colored and the right half with it's brightness color gray.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":116,"description":"<p>Creates colors for storing in variables of the color datatype. The\nparameters are interpreted as RGB or HSB values depending on the\ncurrent <a href=\"#/p5/colorMode\">colorMode()</a>. The default mode is RGB values from 0 to 255\nand, therefore, the function call color(255, 204, 0) will return a\nbright yellow color.</p>\n<p>Note that if only one value is provided to <a href=\"#/p5/color\">color()</a>, it will be interpreted\nas a grayscale value. Add a second value, and it will be used for alpha\ntransparency. When three values are specified, they are interpreted as\neither RGB or HSB values. Adding a fourth value applies alpha\ntransparency.</p>\n<p>If a single string argument is provided, RGB, RGBA and Hex CSS color\nstrings and all named color strings are supported. In this case, an alpha\nnumber value as a second argument is not supported, the RGBA form should be\nused.</p>\n","itemtype":"method","name":"color","return":{"description":"resulting color","type":"p5.Color"},"example":["\n<div>\n<code>\nlet c = color(255, 204, 0);\nfill(c);\nnoStroke();\nrect(30, 20, 55, 55);\n</code>\n</div>\n\n<div>\n<code>\nlet c = color(255, 204, 0);\nfill(c);\nnoStroke();\nellipse(25, 25, 80, 80); // Draw left circle\n// Using only one value generates a grayscale value.\nc = color(65);\nfill(c);\nellipse(75, 75, 80, 80);\n</code>\n</div>\n\n<div>\n<code>\n// You can use named SVG & CSS colors\nlet c = color('magenta');\nfill(c);\nnoStroke();\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// Example of hex color codes\nnoStroke();\nlet c = color('#0f0');\nfill(c);\nrect(0, 10, 45, 80);\nc = color('#00ff00');\nfill(c);\nrect(55, 10, 45, 80);\n</code>\n</div>\n\n<div>\n<code>\n// RGB and RGBA color strings are also supported\n// these all set to the same color (solid blue)\nlet c;\nnoStroke();\nc = color('rgb(0,0,255)');\nfill(c);\nrect(10, 10, 35, 35); // Draw rectangle\nc = color('rgb(0%, 0%, 100%)');\nfill(c);\nrect(55, 10, 35, 35); // Draw rectangle\nc = color('rgba(0, 0, 255, 1)');\nfill(c);\nrect(10, 55, 35, 35); // Draw rectangle\nc = color('rgba(0%, 0%, 100%, 1)');\nfill(c);\nrect(55, 55, 35, 35); // Draw rectangle\n</code>\n</div>\n\n<div>\n<code>\n// HSL color can also be specified by value\nlet c = color('hsl(160, 100%, 50%)');\nnoStroke();\nfill(c);\nrect(0, 10, 45, 80); // Draw rectangle\nc = color('hsla(160, 100%, 50%, 0.5)');\nfill(c);\nrect(55, 10, 45, 80); // Draw rectangle\n</code>\n</div>\n\n<div>\n<code>\n// HSB color can also be specified\nlet c = color('hsb(160, 100%, 50%)');\nnoStroke();\nfill(c);\nrect(0, 10, 45, 80); // Draw rectangle\nc = color('hsba(160, 100%, 50%, 0.5)');\nfill(c);\nrect(55, 10, 45, 80); // Draw rectangle\n</code>\n</div>\n\n<div>\n<code>\nnoStroke();\nlet c = color(50, 55, 100);\nfill(c);\nrect(0, 10, 45, 80); // Draw left rect\ncolorMode(HSB, 100);\nc = color(50, 55, 100);\nfill(c);\nrect(55, 10, 45, 80);\n</code>\n</div>"],"alt":"Yellow rect in middle right of canvas, with 55 pixel width and height.\nYellow ellipse in top left of canvas, black ellipse in bottom right,both 80x80.\nBright fuchsia rect in middle of canvas, 60 pixel width and height.\nTwo bright green rects on opposite sides of the canvas, both 45x80.\nFour blue rects in each corner of the canvas, each are 35x35.\nBright sea green rect on left and darker rect on right of canvas, both 45x80.\nDark green rect on left and lighter green rect on right of canvas, both 45x80.\nDark blue rect on left and light teal rect on right of canvas, both 45x80.","class":"p5","module":"Color","submodule":"Creating & Reading","overloads":[{"line":116,"params":[{"name":"gray","description":"<p>number specifying value between white and black.</p>\n","type":"Number"},{"name":"alpha","description":"<p>alpha value relative to current color range\n                                (default is 0-255)</p>\n","type":"Number","optional":true}],"return":{"description":"resulting color","type":"p5.Color"}},{"line":257,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"return":{"description":"","type":"p5.Color"}},{"line":269,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"return":{"description":"","type":"p5.Color"}},{"line":275,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"return":{"description":"","type":"p5.Color"}},{"line":282,"params":[{"name":"color","description":"","type":"p5.Color"}],"return":{"description":"","type":"p5.Color"}}]},{"file":"src/color/creating_reading.js","line":297,"description":"<p>Extracts the green value from a color or pixel array.</p>\n","itemtype":"method","name":"green","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the green value","type":"Number"},"example":["\n<div>\n<code>\nlet c = color(20, 75, 200); // Define color 'c'\nfill(c); // Use color variable 'c' as fill color\nrect(15, 20, 35, 60); // Draw left rectangle\n\nlet greenValue = green(c); // Get green in 'c'\nprint(greenValue); // Print \"75.0\"\nfill(0, greenValue, 0); // Use 'greenValue' in new fill\nrect(50, 20, 35, 60); // Draw right rectangle\n</code>\n</div>"],"alt":"blue rect on left and green on right, both with black outlines & 35x60.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":326,"description":"<p>Extracts the hue value from a color or pixel array.</p>\n<p>Hue exists in both HSB and HSL. This function will return the\nHSB-normalized hue when supplied with an HSB color object (or when supplied\nwith a pixel array while the color mode is HSB), but will default to the\nHSL-normalized hue otherwise. (The values will only be different if the\nmaximum hue setting for each system is different.)</p>\n","itemtype":"method","name":"hue","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the hue","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 255);\nlet c = color(0, 126, 255);\nfill(c);\nrect(15, 20, 35, 60);\nlet value = hue(c); // Sets 'value' to \"0\"\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>"],"alt":"salmon pink rect on left and black on right, both 35x60.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":361,"description":"<p>Blends two colors to find a third color somewhere between them. The amt\nparameter is the amount to interpolate between the two values where 0.0\nequal to the first color, 0.1 is very near the first color, 0.5 is halfway\nin between, etc. An amount below 0 will be treated as 0. Likewise, amounts\nabove 1 will be capped at 1. This is different from the behavior of <a href=\"#/p5/lerp\">lerp()</a>,\nbut necessary because otherwise numbers outside the range will produce\nstrange and unexpected colors.</p>\n<p>The way that colors are interpolated depends on the current color mode.</p>\n","itemtype":"method","name":"lerpColor","params":[{"name":"c1","description":"<p>interpolate from this color</p>\n","type":"p5.Color"},{"name":"c2","description":"<p>interpolate to this color</p>\n","type":"p5.Color"},{"name":"amt","description":"<p>number between 0 and 1</p>\n","type":"Number"}],"return":{"description":"interpolated color","type":"p5.Color"},"example":["\n<div>\n<code>\ncolorMode(RGB);\nstroke(255);\nbackground(51);\nlet from = color(218, 165, 32);\nlet to = color(72, 61, 139);\ncolorMode(RGB); // Try changing to HSB.\nlet interA = lerpColor(from, to, 0.33);\nlet interB = lerpColor(from, to, 0.66);\nfill(from);\nrect(10, 20, 20, 60);\nfill(interA);\nrect(30, 20, 20, 60);\nfill(interB);\nrect(50, 20, 20, 60);\nfill(to);\nrect(70, 20, 20, 60);\n</code>\n</div>"],"alt":"4 rects one tan, brown, brownish purple, purple, with white outlines & 20x60","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":452,"description":"<p>Extracts the HSL lightness value from a color or pixel array.</p>\n","itemtype":"method","name":"lightness","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the lightness","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(HSL);\nlet c = color(156, 100, 50, 1);\nfill(c);\nrect(15, 20, 35, 60);\nlet value = lightness(c); // Sets 'value' to 50\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>"],"alt":"light pastel green rect on left and dark grey rect on right, both 35x60.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":482,"description":"<p>Extracts the red value from a color or pixel array.</p>\n","itemtype":"method","name":"red","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the red value","type":"Number"},"example":["\n<div>\n<code>\nlet c = color(255, 204, 0); // Define color 'c'\nfill(c); // Use color variable 'c' as fill color\nrect(15, 20, 35, 60); // Draw left rectangle\n\nlet redValue = red(c); // Get red in 'c'\nprint(redValue); // Print \"255.0\"\nfill(redValue, 0, 0); // Use 'redValue' in new fill\nrect(50, 20, 35, 60); // Draw right rectangle\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\ncolorMode(RGB, 255); // Sets the range for red, green, and blue to 255\nlet c = color(127, 255, 0);\ncolorMode(RGB, 1); // Sets the range for red, green, and blue to 1\nlet myColor = red(c);\nprint(myColor); // 0.4980392156862745\n</code>\n</div>"],"alt":"yellow rect on left and red rect on right, both with black outlines and 35x60.\ngrey canvas","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":522,"description":"<p>Extracts the saturation value from a color or pixel array.</p>\n<p>Saturation is scaled differently in HSB and HSL. This function will return\nthe HSB saturation when supplied with an HSB color object (or when supplied\nwith a pixel array while the color mode is HSB), but will default to the\nHSL saturation otherwise.</p>\n","itemtype":"method","name":"saturation","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the saturation value","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 255);\nlet c = color(0, 126, 255);\nfill(c);\nrect(15, 20, 35, 60);\nlet value = saturation(c); // Sets 'value' to 126\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>"],"alt":"deep pink rect on left and grey rect on right, both 35x60.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":51,"description":"<p>This function returns the color formatted as a string. This can be useful\nfor debugging, or for using p5.js with other libraries.</p>\n","itemtype":"method","name":"toString","params":[{"name":"format","description":"<p>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.</p>\n","type":"String","optional":true}],"return":{"description":"the formatted string","type":"String"},"example":["\n<div>\n<code>\ncreateCanvas(200, 100);\nlet myColor;\nstroke(255);\nmyColor = color(100, 100, 250);\nfill(myColor);\nrotate(HALF_PI);\ntext(myColor.toString(), 0, -5);\ntext(myColor.toString('#rrggbb'), 0, -30);\ntext(myColor.toString('rgba%'), 0, -55);\n</code>\n</div>\n\n<div>\n<code>\nlet myColor = color(100, 130, 250);\ntext(myColor.toString('#rrggbb'), 25, 25);\n</code>\n</div>"],"alt":"A canvas with 3 text representation of their color.","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":256,"description":"<p>The setRed function sets the red component of a color.\nThe range depends on your color mode, in the default RGB mode it's between 0 and 255.</p>\n","itemtype":"method","name":"setRed","params":[{"name":"red","description":"<p>the new red value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet backgroundColor;\n\nfunction setup() {\n  backgroundColor = color(100, 50, 150);\n}\n\nfunction draw() {\n  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));\n  background(backgroundColor);\n}\n</code>\n</div>"],"alt":"canvas with gradually changing background color","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":285,"description":"<p>The setGreen function sets the green component of a color.\nThe range depends on your color mode, in the default RGB mode it's between 0 and 255.</p>\n","itemtype":"method","name":"setGreen","params":[{"name":"green","description":"<p>the new green value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet backgroundColor = color(100, 50, 150);\nfunction draw() {\n  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));\n  background(backgroundColor);\n}\n</code>\n</div>"],"alt":"canvas with gradually changing background color","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":309,"description":"<p>The setBlue function sets the blue component of a color.\nThe range depends on your color mode, in the default RGB mode it's between 0 and 255.</p>\n","itemtype":"method","name":"setBlue","params":[{"name":"blue","description":"<p>the new blue value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet backgroundColor = color(100, 50, 150);\nfunction draw() {\n  backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));\n  background(backgroundColor);\n}\n</code>\n</div>"],"alt":"canvas with gradually changing background color","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":333,"description":"<p>The setAlpha function sets the transparency (alpha) value of a color.\nThe range depends on your color mode, in the default RGB mode it's between 0 and 255.</p>\n","itemtype":"method","name":"setAlpha","params":[{"name":"alpha","description":"<p>the new alpha value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nfunction draw() {\n  clear();\n  background(200);\n  squareColor = color(100, 50, 100);\n  squareColor.setAlpha(128 + 128 * sin(millis() / 1000));\n  fill(squareColor);\n  rect(13, 13, width - 26, height - 26);\n}\n</code>\n</div>"],"alt":"a square with gradually changing opacity on a gray background","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":404,"description":"<p>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.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":435,"description":"<p>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.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":454,"description":"<p>CSS named colors.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":608,"description":"<p>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.</p>\n<p>Note that RGB values of .9 are not parsed by IE, but are supported here for\ncolor string consistency.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":621,"description":"<p>Full color string patterns. The capture groups are necessary.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":969,"description":"<p>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.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/setting.js","line":13,"description":"<p>The <a href=\"#/p5/background\">background()</a> function sets the color used\nfor the background of the p5.js canvas. The default background is transparent.\nThis function is typically used within <a href=\"#/p5/draw\">draw()</a> to clear\nthe display window at the beginning of each frame, but it can be used inside\n<a href=\"#/p5/setup\">setup()</a> to set the background on the first frame of\nanimation or if the background need only be set once.</p>\n<p>The color is either specified in terms of the RGB, HSB, or HSL color depending\non the current <a href=\"#/p5/colorMode\">colorMode</a>. (The default color space\nis RGB, with each value in the range from 0 to 255). The alpha range by default\nis also 0 to 255.<br><br></p>\n<p>If a single string argument is provided, RGB, RGBA and Hex CSS color strings\nand all named color strings are supported. In this case, an alpha number\nvalue as a second argument is not supported, the RGBA form should be used.</p>\n<p>A <a href=\"#/p5.Color\">p5.Color</a> object can also be provided to set the background color.</p>\n<p>A <a href=\"#/p5.Image\">p5.Image</a> can also be provided to set the background image.</p>\n","itemtype":"method","name":"background","chainable":1,"example":["\n<div>\n<code>\n// Grayscale integer value\nbackground(51);\n</code>\n</div>\n\n<div>\n<code>\n// R, G & B integer values\nbackground(255, 204, 0);\n</code>\n</div>\n\n<div>\n<code>\n// H, S & B integer values\ncolorMode(HSB);\nbackground(255, 204, 100);\n</code>\n</div>\n\n<div>\n<code>\n// Named SVG/CSS color string\nbackground('red');\n</code>\n</div>\n\n<div>\n<code>\n// three-digit hexadecimal RGB notation\nbackground('#fae');\n</code>\n</div>\n\n<div>\n<code>\n// six-digit hexadecimal RGB notation\nbackground('#222222');\n</code>\n</div>\n\n<div>\n<code>\n// integer RGB notation\nbackground('rgb(0,255,0)');\n</code>\n</div>\n\n<div>\n<code>\n// integer RGBA notation\nbackground('rgba(0,255,0, 0.25)');\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGB notation\nbackground('rgb(100%,0%,10%)');\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGBA notation\nbackground('rgba(100%,0%,100%,0.5)');\n</code>\n</div>\n\n<div>\n<code>\n// p5 Color object\nbackground(color(0, 0, 255));\n</code>\n</div>"],"alt":"canvas with darkest charcoal grey background.\ncanvas with yellow background.\ncanvas with royal blue background.\ncanvas with red background.\ncanvas with pink background.\ncanvas with black background.\ncanvas with bright green background.\ncanvas with soft green background.\ncanvas with red background.\ncanvas with light purple background.\ncanvas with blue background.","class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":13,"params":[{"name":"color","description":"<p>any value created by the <a href=\"#/p5/color\">color()</a> function</p>\n","type":"p5.Color"}],"chainable":1},{"line":131,"params":[{"name":"colorstring","description":"<p>color string, possible formats include: integer\n                        rgb() or rgba(), percentage rgb() or rgba(),\n                        3-digit hex, 6-digit hex</p>\n","type":"String"},{"name":"a","description":"<p>opacity of the background relative to current\n                            color range (default is 0-255)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":141,"params":[{"name":"gray","description":"<p>specifies a value between white and black</p>\n","type":"Number"},{"name":"a","description":"","type":"Number","optional":true}],"chainable":1},{"line":148,"params":[{"name":"v1","description":"<p>red or hue value (depending on the current color\n                       mode)</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value (depending on the current\n                       color mode)</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value (depending on the current\n                       color mode)</p>\n","type":"Number"},{"name":"a","description":"","type":"Number","optional":true}],"chainable":1},{"line":160,"params":[{"name":"values","description":"<p>an array containing the red, green, blue\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":167,"params":[{"name":"image","description":"<p>image created with <a href=\"#/p5/loadImage\">loadImage()</a> or <a href=\"#/p5/createImage\">createImage()</a>,\n                            to set as background\n                            (must be same size as the sketch window)</p>\n","type":"p5.Image"},{"name":"a","description":"","type":"Number","optional":true}],"chainable":1}]},{"file":"src/color/setting.js","line":180,"description":"<p>Clears the pixels within a buffer. This function only clears the canvas.\nIt will not clear objects created by createX() methods such as\n<a href=\"#/p5/createVideo\">createVideo()</a> or <a href=\"#/p5/createDiv\">createDiv()</a>.\nUnlike the main graphics context, pixels in additional graphics areas created\nwith <a href=\"#/p5/createGraphics\">createGraphics()</a> can be entirely\nor partially transparent. This function clears everything to make all of\nthe pixels 100% transparent.</p>\n","itemtype":"method","name":"clear","chainable":1,"example":["\n<div>\n<code>\n// Clear the screen on mouse press.\nfunction draw() {\n  ellipse(mouseX, mouseY, 20, 20);\n}\nfunction mousePressed() {\n  clear();\n  background(128);\n}\n</code>\n</div>"],"alt":"small white ellipses are continually drawn at mouse's x and y coordinates.","class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":214,"description":"<p><a href=\"#/p5/colorMode\">colorMode()</a> changes the way p5.js interprets\ncolor data. By default, the parameters for <a href=\"#/p5/fill\">fill()</a>,\n<a href=\"#/p5/stroke\">stroke()</a>, <a href=\"#/p5/background\">background()</a>,\nand <a href=\"#/p5/color\">color()</a> are defined by values between 0 and 255\nusing the RGB color model. This is equivalent to setting colorMode(RGB, 255).\nSetting colorMode(HSB) lets you use the HSB system instead. By default, this\nis colorMode(HSB, 360, 100, 100, 1). You can also use HSL.</p>\n<p>Note: existing color objects remember the mode that they were created in,\nso you can change modes as you like without affecting their appearance.</p>\n","itemtype":"method","name":"colorMode","chainable":1,"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(RGB, 100);\nfor (let i = 0; i < 100; i++) {\n  for (let j = 0; j < 100; j++) {\n    stroke(i, j, 0);\n    point(i, j);\n  }\n}\n</code>\n</div>\n\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 100);\nfor (let i = 0; i < 100; i++) {\n  for (let j = 0; j < 100; j++) {\n    stroke(i, j, 100);\n    point(i, j);\n  }\n}\n</code>\n</div>\n\n<div>\n<code>\ncolorMode(RGB, 255);\nlet c = color(127, 255, 0);\ncolorMode(RGB, 1);\nlet myColor = c._getRed();\ntext(myColor, 10, 10, 80, 80);\n</code>\n</div>\n\n<div>\n<code>\nnoFill();\ncolorMode(RGB, 255, 255, 255, 1);\nbackground(255);\nstrokeWeight(4);\nstroke(255, 0, 10, 0.3);\nellipse(40, 40, 50, 50);\nellipse(50, 50, 40, 40);\n</code>\n</div>"],"alt":"Green to red gradient from bottom L to top R. shading originates from top left.\nRainbow gradient from left to right. Brightness increasing to white at top.\nunknown image.\n50x50 ellipse at middle L & 40x40 ellipse at center. Translucent pink outlines.","class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":214,"params":[{"name":"mode","description":"<p>either RGB, HSB or HSL, corresponding to\n                         Red/Green/Blue and Hue/Saturation/Brightness\n                         (or Lightness)</p>\n","type":"Constant"},{"name":"max","description":"<p>range for all values</p>\n","type":"Number","optional":true}],"chainable":1},{"line":289,"params":[{"name":"mode","description":"","type":"Constant"},{"name":"max1","description":"<p>range for the red or hue depending on the\n                             current color mode</p>\n","type":"Number"},{"name":"max2","description":"<p>range for the green or saturation depending\n                             on the current color mode</p>\n","type":"Number"},{"name":"max3","description":"<p>range for the blue or brightness/lightness\n                             depending on the current color mode</p>\n","type":"Number"},{"name":"maxA","description":"<p>range for the alpha</p>\n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/color/setting.js","line":333,"description":"<p>Sets the color used to fill shapes. For example, if you run fill(204, 102, 0),\nall shapes drawn after the fill command will be filled with the color orange.\nThis color is either specified in terms of the RGB or HSB color depending on\nthe current <a href=\"#/p5/colorMode\">colorMode()</a>. (The default color space\nis RGB, with each value in the range from 0 to 255). The alpha range by default\nis also 0 to 255.</p>\n<p>If a single string argument is provided, RGB, RGBA and Hex CSS color strings\nand all named color strings are supported. In this case, an alpha number\nvalue as a second argument is not supported, the RGBA form should be used.</p>\n<p>A p5 <a href=\"#/p5.Color\">Color</a> object can also be provided to set the fill color.</p>\n","itemtype":"method","name":"fill","chainable":1,"example":["\n<div>\n<code>\n// Grayscale integer value\nfill(51);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// R, G & B integer values\nfill(255, 204, 0);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// H, S & B integer values\ncolorMode(HSB);\nfill(255, 204, 100);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// Named SVG/CSS color string\nfill('red');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// three-digit hexadecimal RGB notation\nfill('#fae');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// six-digit hexadecimal RGB notation\nfill('#222222');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// integer RGB notation\nfill('rgb(0,255,0)');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// integer RGBA notation\nfill('rgba(0,255,0, 0.25)');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGB notation\nfill('rgb(100%,0%,10%)');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGBA notation\nfill('rgba(100%,0%,100%,0.5)');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// p5 Color object\nfill(color(0, 0, 255));\nrect(20, 20, 60, 60);\n</code>\n</div>"],"alt":"60x60 dark charcoal grey rect with black outline in center of canvas.\n60x60 yellow rect with black outline in center of canvas.\n60x60 royal blue rect with black outline in center of canvas.\n60x60 red rect with black outline in center of canvas.\n60x60 pink rect with black outline in center of canvas.\n60x60 black rect with black outline in center of canvas.\n60x60 light green rect with black outline in center of canvas.\n60x60 soft green rect with black outline in center of canvas.\n60x60 red rect with black outline in center of canvas.\n60x60 dark fuchsia rect with black outline in center of canvas.\n60x60 blue rect with black outline in center of canvas.","class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":333,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":460,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"chainable":1},{"line":466,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":473,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":480,"params":[{"name":"color","description":"<p>the fill color</p>\n","type":"p5.Color"}],"chainable":1}]},{"file":"src/color/setting.js","line":492,"description":"<p>Disables filling geometry. If both <a href=\"#/p5/noStroke\">noStroke()</a> and <a href=\"#/p5/noFill\">noFill()</a> are called,\nnothing will be drawn to the screen.</p>\n","itemtype":"method","name":"noFill","chainable":1,"example":["\n<div>\n<code>\nrect(15, 10, 55, 55);\nnoFill();\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  noFill();\n  stroke(100, 100, 240);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  box(45, 45, 45);\n}\n</code>\n</div>"],"alt":"white rect top middle and noFill rect center. Both 60x60 with black outlines.\nblack canvas with purple cube wireframe spinning","class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":533,"description":"<p>Disables drawing the stroke (outline). If both <a href=\"#/p5/noStroke\">noStroke()</a> and <a href=\"#/p5/noFill\">noFill()</a>\nare called, nothing will be drawn to the screen.</p>\n","itemtype":"method","name":"noStroke","chainable":1,"example":["\n<div>\n<code>\nnoStroke();\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  noStroke();\n  fill(240, 150, 150);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  box(45, 45, 45);\n}\n</code>\n</div>"],"alt":"60x60 white rect at center. no outline.\nblack canvas with pink cube spinning","class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":573,"description":"<p>Sets the color used to draw lines and borders around shapes. This color\nis either specified in terms of the RGB or HSB color depending on the\ncurrent <a href=\"#/p5/colorMode\">colorMode()</a> (the default color space\nis RGB, with each value in the range from 0 to 255). The alpha range by\ndefault is also 0 to 255.</p>\n<p>If a single string argument is provided, RGB, RGBA and Hex CSS color\nstrings and all named color strings are supported. In this case, an alpha\nnumber value as a second argument is not supported, the RGBA form should be\nused.</p>\n<p>A p5 <a href=\"#/p5.Color\">Color</a> object can also be provided to set the stroke color.</p>\n","itemtype":"method","name":"stroke","chainable":1,"example":["\n<div>\n<code>\n// Grayscale integer value\nstrokeWeight(4);\nstroke(51);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// R, G & B integer values\nstroke(255, 204, 0);\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// H, S & B integer values\ncolorMode(HSB);\nstrokeWeight(4);\nstroke(255, 204, 100);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// Named SVG/CSS color string\nstroke('red');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// three-digit hexadecimal RGB notation\nstroke('#fae');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// six-digit hexadecimal RGB notation\nstroke('#222222');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// integer RGB notation\nstroke('rgb(0,255,0)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// integer RGBA notation\nstroke('rgba(0,255,0,0.25)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGB notation\nstroke('rgb(100%,0%,10%)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGBA notation\nstroke('rgba(100%,0%,100%,0.5)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// p5 Color object\nstroke(color(0, 0, 255));\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>"],"alt":"60x60 white rect at center. Dark charcoal grey outline.\n60x60 white rect at center. Yellow outline.\n60x60 white rect at center. Royal blue outline.\n60x60 white rect at center. Red outline.\n60x60 white rect at center. Pink outline.\n60x60 white rect at center. Black outline.\n60x60 white rect at center. Bright green outline.\n60x60 white rect at center. Soft green outline.\n60x60 white rect at center. Red outline.\n60x60 white rect at center. Dark fuchsia outline.\n60x60 white rect at center. Blue outline.","class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":573,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":712,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"chainable":1},{"line":718,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":725,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":732,"params":[{"name":"color","description":"<p>the stroke color</p>\n","type":"p5.Color"}],"chainable":1}]},{"file":"src/color/setting.js","line":745,"description":"<p>All drawing that follows <a href=\"#/p5/erase\">erase()</a> will subtract from\nthe canvas.Erased areas will reveal the web page underneath the canvas.Erasing\ncan be canceled with <a href=\"#/p5/noErase\">noErase()</a>.</p>\n<p>Drawing done with <a href=\"#/p5/image\">image()</a> and <a href=\"#/p5/background\">\nbackground()</a> in between <a href=\"#/p5/erase\">erase()</a> and\n<a href=\"#/p5/noErase\">noErase()</a> will not erase the canvas but works as usual.</p>\n","itemtype":"method","name":"erase","params":[{"name":"strengthFill","description":"<p>A number (0-255) for the strength of erasing for a shape's fill.\n                                       This will default to 255 when no argument is given, which\n                                       is full strength.</p>\n","type":"Number","optional":true},{"name":"strengthStroke","description":"<p>A number (0-255) for the strength of erasing for a shape's stroke.\n                                       This will default to 255 when no argument is given, which\n                                       is full strength.</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nbackground(100, 100, 250);\nfill(250, 100, 100);\nrect(20, 20, 60, 60);\nerase();\nellipse(25, 30, 30);\nnoErase();\n</code>\n</div>\n\n<div>\n<code>\nbackground(150, 250, 150);\nfill(100, 100, 250);\nrect(20, 20, 60, 60);\nstrokeWeight(5);\nerase(150, 255);\ntriangle(50, 10, 70, 50, 90, 10);\nnoErase();\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  smooth();\n  createCanvas(100, 100, WEBGL);\n  // Make a &lt;p&gt; element and put it behind the canvas\n  let p = createP('I am a dom element');\n  p.center();\n  p.style('font-size', '20px');\n  p.style('text-align', 'center');\n  p.style('z-index', '-9999');\n}\n\nfunction draw() {\n  background(250, 250, 150);\n  fill(15, 195, 185);\n  noStroke();\n  sphere(30);\n  erase();\n  rotateY(frameCount * 0.02);\n  translate(0, 0, 40);\n  torus(15, 5);\n  noErase();\n}\n</code>\n</div>"],"alt":"60x60 centered pink rect, purple background. Elliptical area in top-left of rect is erased white.\n60x60 centered purple rect, mint green background. Triangle in top-right is partially erased with fully erased outline.\n60x60 centered teal sphere, yellow background. Torus rotating around sphere erases to reveal black text underneath.","class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":825,"description":"<p>Ends erasing that was started with <a href=\"#/p5/erase\">erase()</a>.\nThe <a href=\"#/p5/fill\">fill()</a>, <a href=\"#/p5/stroke\">stroke()</a>, and\n<a href=\"#/p5/blendMode\">blendMode()</a> settings will return to what they were\nprior to calling <a href=\"#/p5/erase\">erase()</a>.</p>\n","itemtype":"method","name":"noErase","chainable":1,"example":["\n<div>\n<code>\nbackground(235, 145, 15);\nnoStroke();\nfill(30, 45, 220);\nrect(30, 10, 10, 80);\nerase();\nellipse(50, 50, 60);\nnoErase();\nrect(70, 10, 10, 80);\n</code>\n</div>"],"alt":"Orange background, with two tall blue rectangles. A centered ellipse erased the first blue rect but not the second.","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). Here is a\nbrief outline of the functions called in this system.\n\nThe FES may be invoked by a call to either (1) _validateParameters","(2) _friendlyFileLoadError","(3) _friendlyError","(4) helpForMisusedAtTopLevelCode","or (5) _fesErrorMontitor.\n\n_validateParameters is located in validate_params.js along with other code used\nfor parameter validation.\n_friendlyFileLoadError is located in file_errors.js along with other code used for\ndealing with file load errors.\nApart from this","there's also a file stacktrace.js","which contains the code to parse\nthe error stack","borrowed from https://github.com/stacktracejs/stacktrace.js\n\nThis file contains the core as well as miscellaneous functionality of the FES.\n\nhelpForMisusedAtTopLevelCode is called by this file on window load to check for use\nof p5.js functions outside of setup() or draw()\nItems 1-3 above are called by functions in the p5 library located in other files.\n\n_fesErrorMonitor can be called either by an error event","an unhandled rejection event\nor it can be manually called in a catch block as follows:\ntry { someCode(); } catch(err) { p5._fesErrorMonitor(err); }\nfesErrorMonitor is responsible for handling all kinds of errors that the browser may show.\nIt gives a simplified explanation for these. It currently works with some kinds of\nReferenceError","SyntaxError","and TypeError. The complete list of supported errors can be\nfound in browser_errors.js.\n\n_friendlyFileLoadError is called by the loadX() methods.\n_friendlyError can be called by any function to offer a helpful error message.\n\n_validateParameters is called by functions in the p5.js API to help users ensure\nther are calling p5 function with the right parameter types. The property\ndisableFriendlyErrors = false can be set from a p5.js sketch to turn off parameter\nchecking. The call sequence from _validateParameters looks something like this:\n\n_validateParameters\n  buildArgTypeCache\n    addType\n  lookupParamDoc\n  scoreOverload\n    testParamTypes\n    testParamType\n  getOverloadErrors\n  _friendlyParamError\n    ValidationError\n    report\n      friendlyWelcome\n\nThe call sequences to _friendlyFileLoadError and _friendlyError are like this:\n_friendlyFileLoadError\n  report\n\n_friendlyError\n  report\n\nThe call sequence for _fesErrorMonitor roughly looks something like:\n_fesErrorMonitor\n  processStack\n    printFriendlyError\n  (if type of error is ReferenceError)\n    _handleMisspelling\n      computeEditDistance\n      report\n    report\n    printFriendlyStack\n  (if type of error is SyntaxError","TypeError","etc)\n    report\n    printFriendlyStack\n\nreport() is the main function that prints directly to console with the output\nof the error helper message. Note: friendlyWelcome() also prints to console directly."],"class":"p5","module":"Color"},{"file":"src/core/friendly_errors/fes_core.js","line":819,"description":"<p>Prints out all the colors in the color pallete with white text.\nFor color blindness testing.</p>\n","class":"p5","module":"Color"},{"file":"src/core/friendly_errors/file_errors.js","line":1,"requires":["core\n\nThis file contains the part of the FES responsible for dealing with\nfile load errors"],"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\n\nThis file contains the part of the FES responsible for validating function\nparameters"],"class":"p5","module":"Color"},{"file":"src/core/friendly_errors/validate_params.js","line":626,"description":"<p>Validates parameters\nparam  {String}               func    the name of the function\nparam  {Array}                args    user input arguments</p>\n<p>example:\n const a;\n ellipse(10,10,a,5);\nconsole ouput:\n \"It looks like ellipse received an empty variable in spot #2.\"</p>\n<p>example:\n ellipse(10,\"foo\",5,5);\nconsole output:\n \"ellipse was expecting a number for parameter #1,\n          received \"foo\" instead.\"</p>\n","class":"p5","module":"Color"},{"file":"src/core/shape/2d_primitives.js","line":16,"description":"<p>This function does 3 things:</p>\n<ol>\n<li><p>Bounds the desired start/stop angles for an arc (in radians) so that:</p>\n<pre><code>0 <= start < TWO_PI ;    start <= stop < start + TWO_PI</code></pre><p>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.</p>\n</li>\n<li><p>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.</p>\n</li>\n<li><p>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).</p>\n</li>\n</ol>\n","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":102,"description":"<p>Draw an arc to the screen. If called with only x, y, w, h, start and stop,\nthe arc will be drawn and filled as an open pie segment. If a mode parameter\nis provided, the arc will be filled like an open semi-circle (OPEN), a closed\nsemi-circle (CHORD), or as a closed pie segment (PIE). The origin may be changed\nwith the <a href=\"#/p5/ellipseMode\">ellipseMode()</a> function.</p>\n<p>The arc is always drawn clockwise from wherever start falls to wherever stop\nfalls on the ellipse.Adding or subtracting TWO_PI to either angle does not\nchange where they fall. If both start and stop fall at the same place, a full\nellipse will be drawn. Be aware that the y-axis increases in the downward\ndirection, therefore angles are measured clockwise from the positive\nx-direction (\"3 o'clock\").</p>\n","itemtype":"method","name":"arc","params":[{"name":"x","description":"<p>x-coordinate of the arc's ellipse</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the arc's ellipse</p>\n","type":"Number"},{"name":"w","description":"<p>width of the arc's ellipse by default</p>\n","type":"Number"},{"name":"h","description":"<p>height of the arc's ellipse by default</p>\n","type":"Number"},{"name":"start","description":"<p>angle to start the arc, specified in radians</p>\n","type":"Number"},{"name":"stop","description":"<p>angle to stop the arc, specified in radians</p>\n","type":"Number"},{"name":"mode","description":"<p>optional parameter to determine the way of drawing\n                        the arc. either CHORD, PIE or OPEN</p>\n","type":"Constant","optional":true},{"name":"detail","description":"<p>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.</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\narc(50, 55, 50, 50, 0, HALF_PI);\nnoFill();\narc(50, 55, 60, 60, HALF_PI, PI);\narc(50, 55, 70, 70, PI, PI + QUARTER_PI);\narc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);\n</code>\n</div>\n\n<div>\n<code>\narc(50, 50, 80, 80, 0, PI + QUARTER_PI);\n</code>\n</div>\n\n<div>\n<code>\narc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);\n</code>\n</div>\n\n<div>\n<code>\narc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);\n</code>\n</div>\n\n<div>\n<code>\narc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);\n</code>\n</div>"],"alt":"shattered outline of an ellipse with a quarter of a white circle bottom-right.\nwhite ellipse with top right quarter missing.\nwhite ellipse with black outline with top right missing.\nwhite ellipse with top right missing with black outline around shape.\nwhite ellipse with top right quarter missing with black outline around the shape.","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":232,"description":"<p>Draws an ellipse (oval) to the screen. By default, the first two parameters\nset the location of the center of the ellipse, and the third and fourth\nparameters set the shape's width and height. If no height is specified, the\nvalue of width is used for both the width and height. If a negative height or\nwidth is specified, the absolute value is taken.</p>\n<p>An ellipse with equal width and height is a circle. The origin may be changed\nwith the <a href=\"#/p5/ellipseMode\">ellipseMode()</a> function.</p>\n","itemtype":"method","name":"ellipse","chainable":1,"example":["\n<div>\n<code>\nellipse(56, 46, 55, 55);\n</code>\n</div>"],"alt":"white ellipse with black outline in middle-right of canvas that is 55x55","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":232,"params":[{"name":"x","description":"<p>x-coordinate of the center of ellipse.</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the center of ellipse.</p>\n","type":"Number"},{"name":"w","description":"<p>width of the ellipse.</p>\n","type":"Number"},{"name":"h","description":"<p>height of the ellipse.</p>\n","type":"Number","optional":true}],"chainable":1},{"line":259,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"w","description":"","type":"Number"},{"name":"h","description":"","type":"Number"},{"name":"detail","description":"<p>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.</p>\n","type":"Integer","optional":true}]}]},{"file":"src/core/shape/2d_primitives.js","line":275,"description":"<p>Draws a circle to the screen. A circle is a simple closed shape. It is the set\nof all points in a plane that are at a given distance from a given point,\nthe centre. This function is a special case of the ellipse() function, where\nthe width and height of the ellipse are the same. Height and width of the\nellipse correspond to the diameter of the circle. By default, the first two\nparameters set the location of the centre of the circle, the third sets the\ndiameter of the circle.</p>\n","itemtype":"method","name":"circle","params":[{"name":"x","description":"<p>x-coordinate of the centre of the circle.</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the centre of the circle.</p>\n","type":"Number"},{"name":"d","description":"<p>diameter of the circle.</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\n// Draw a circle at location (30, 30) with a diameter of 20.\ncircle(30, 30, 20);\n</code>\n</div>"],"alt":"white circle with black outline in mid of canvas that is 55x55.","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":339,"description":"<p>Draws a line (a direct path between two points) to the screen. If called with\nonly 4 parameters, it will draw a line in 2D with a default width of 1 pixel.\nThis width can be modified by using the <a href=\"#/p5/strokeWeight\">\nstrokeWeight()</a> function. A line cannot be filled, therefore the <a\nhref=\"#/p5/fill\">fill()</a> function will not affect the color of a line. So to\ncolor a line, use the <a href=\"#/p5/stroke\">stroke()</a> function.</p>\n","itemtype":"method","name":"line","chainable":1,"example":["\n<div>\n<code>\nline(30, 20, 85, 75);\n</code>\n</div>\n\n<div>\n<code>\nline(30, 20, 85, 20);\nstroke(126);\nline(85, 20, 85, 75);\nstroke(255);\nline(85, 75, 30, 75);\n</code>\n</div>"],"alt":"An example showing a line 78 pixels long running from mid-top to bottom-right of canvas.\nAn example showing 3 lines of various stroke sizes. Form top, bottom and right sides of a square.","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":339,"params":[{"name":"x1","description":"<p>the x-coordinate of the first point</p>\n","type":"Number"},{"name":"y1","description":"<p>the y-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"<p>the x-coordinate of the second point</p>\n","type":"Number"},{"name":"y2","description":"<p>the y-coordinate of the second point</p>\n","type":"Number"}],"chainable":1},{"line":375,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>the z-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>the z-coordinate of the second point</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/2d_primitives.js","line":400,"description":"<p>Draws a point, a coordinate in space at the dimension of one pixel.\nThe first parameter is the horizontal value for the point, the second\nparam is the vertical value for the point. The color of the point is\nchanged with the <a href=\"#/p5/stroke\">stroke()</a> function. The size of the point\ncan be changed with the <a href=\"#/p5/strokeWeight\">strokeWeight()</a> function.</p>\n","itemtype":"method","name":"point","chainable":1,"example":["\n<div>\n<code>\npoint(30, 20);\npoint(85, 20);\npoint(85, 75);\npoint(30, 75);\n</code>\n</div>\n\n<div>\n<code>\npoint(30, 20);\npoint(85, 20);\nstroke('purple'); // Change the color\nstrokeWeight(10); // Make the points 10 pixels in size\npoint(85, 75);\npoint(30, 75);\n</code>\n</div>\n\n<div>\n<code>\nlet a = createVector(10, 10);\npoint(a);\nlet b = createVector(10, 20);\npoint(b);\npoint(createVector(20, 10));\npoint(createVector(20, 20));\n</code>\n</div>"],"alt":"4 points centered in the middle-right of the canvas.\n2 large points and 2 large purple points centered in the middle-right of the canvas.\nVertices of a square of length 10 pixels towards the top-left of the canvas.","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":400,"params":[{"name":"x","description":"<p>the x-coordinate</p>\n","type":"Number"},{"name":"y","description":"<p>the y-coordinate</p>\n","type":"Number"},{"name":"z","description":"<p>the z-coordinate (for WebGL mode)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":450,"params":[{"name":"coordinate_vector","description":"<p>the coordinate vector</p>\n","type":"p5.Vector"}],"chainable":1}]},{"file":"src/core/shape/2d_primitives.js","line":478,"description":"<p>Draws a quad on the canvas. A quad is a quadrilateral, a four sided polygon. It is\nsimilar to a rectangle, but the angles between its edges are not\nconstrained to ninety degrees. The first pair of parameters (x1,y1)\nsets the first vertex and the subsequent pairs should proceed\nclockwise or counter-clockwise around the defined shape.\nz-arguments only work when quad() is used in WEBGL mode.</p>\n","itemtype":"method","name":"quad","chainable":1,"example":["\n<div>\n<code>\nquad(38, 31, 86, 20, 69, 63, 30, 76);\n</code>\n</div>"],"alt":"irregular white quadrilateral shape with black outline mid-right of canvas.","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":478,"params":[{"name":"x1","description":"<p>the x-coordinate of the first point</p>\n","type":"Number"},{"name":"y1","description":"<p>the y-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"<p>the x-coordinate of the second point</p>\n","type":"Number"},{"name":"y2","description":"<p>the y-coordinate of the second point</p>\n","type":"Number"},{"name":"x3","description":"<p>the x-coordinate of the third point</p>\n","type":"Number"},{"name":"y3","description":"<p>the y-coordinate of the third point</p>\n","type":"Number"},{"name":"x4","description":"<p>the x-coordinate of the fourth point</p>\n","type":"Number"},{"name":"y4","description":"<p>the y-coordinate of the fourth point</p>\n","type":"Number"},{"name":"detailX","description":"<p>number of segments in the x-direction</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of segments in the y-direction</p>\n","type":"Integer","optional":true}],"chainable":1},{"line":508,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>the z-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>the z-coordinate of the second point</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>the z-coordinate of the third point</p>\n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"<p>the z-coordinate of the fourth point</p>\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":552,"description":"<p>Draws a rectangle on the canvas. A rectangle is a four-sided closed shape with\nevery angle at ninety degrees. By default, the first two parameters set\nthe location of the upper-left corner, the third sets the width, and the\nfourth sets the height. The way these parameters are interpreted, may be\nchanged with the <a href=\"#/p5/rectMode\">rectMode()</a> function.</p>\n<p>The fifth, sixth, seventh and eighth parameters, if specified,\ndetermine corner radius for the top-left, top-right, lower-right and\nlower-left corners, respectively. An omitted corner radius parameter is set\nto the value of the previously specified radius value in the parameter list.</p>\n","itemtype":"method","name":"rect","chainable":1,"example":["\n<div>\n<code>\n// Draw a rectangle at location (30, 20) with a width and height of 55.\nrect(30, 20, 55, 55);\n</code>\n</div>\n\n<div>\n<code>\n// Draw a rectangle with rounded corners, each having a radius of 20.\nrect(30, 20, 55, 55, 20);\n</code>\n</div>\n\n<div>\n<code>\n// Draw a rectangle with rounded corners having the following radii:\n// top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.\nrect(30, 20, 55, 55, 20, 15, 10, 5);\n</code>\n</div>"],"alt":"55x55 white rect with black outline in mid-right of canvas.\n55x55 white rect with black outline and rounded edges in mid-right of canvas.\n55x55 white rect with black outline and rounded edges of different radii.","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":552,"params":[{"name":"x","description":"<p>x-coordinate of the rectangle.</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the rectangle.</p>\n","type":"Number"},{"name":"w","description":"<p>width of the rectangle.</p>\n","type":"Number"},{"name":"h","description":"<p>height of the rectangle.</p>\n","type":"Number","optional":true},{"name":"tl","description":"<p>optional radius of top-left corner.</p>\n","type":"Number","optional":true},{"name":"tr","description":"<p>optional radius of top-right corner.</p>\n","type":"Number","optional":true},{"name":"br","description":"<p>optional radius of bottom-right corner.</p>\n","type":"Number","optional":true},{"name":"bl","description":"<p>optional radius of bottom-left corner.</p>\n","type":"Number","optional":true}],"chainable":1},{"line":603,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"w","description":"","type":"Number"},{"name":"h","description":"","type":"Number"},{"name":"detailX","description":"<p>number of segments in the x-direction (for WebGL mode)</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of segments in the y-direction (for WebGL mode)</p>\n","type":"Integer","optional":true}],"chainable":1}]},{"file":"src/core/shape/2d_primitives.js","line":618,"description":"<p>Draws a square to the screen. A square is a four-sided shape with every angle\nat ninety degrees, and equal side size. This function is a special case of the\nrect() function, where the width and height are the same, and the parameter\nis called \"s\" for side size. By default, the first two parameters set the\nlocation of the upper-left corner, the third sets the side size of the square.\nThe way these parameters are interpreted, may be changed with the <a\nhref=\"#/p5/rectMode\">rectMode()</a> function.</p>\n<p>The fourth, fifth, sixth and seventh parameters, if specified,\ndetermine corner radius for the top-left, top-right, lower-right and\nlower-left corners, respectively. An omitted corner radius parameter is set\nto the value of the previously specified radius value in the parameter list.</p>\n","itemtype":"method","name":"square","params":[{"name":"x","description":"<p>x-coordinate of the square.</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the square.</p>\n","type":"Number"},{"name":"s","description":"<p>side size of the square.</p>\n","type":"Number"},{"name":"tl","description":"<p>optional radius of top-left corner.</p>\n","type":"Number","optional":true},{"name":"tr","description":"<p>optional radius of top-right corner.</p>\n","type":"Number","optional":true},{"name":"br","description":"<p>optional radius of bottom-right corner.</p>\n","type":"Number","optional":true},{"name":"bl","description":"<p>optional radius of bottom-left corner.</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// Draw a square at location (30, 20) with a side size of 55.\nsquare(30, 20, 55);\n</code>\n</div>\n\n<div>\n<code>\n// Draw a square with rounded corners, each having a radius of 20.\nsquare(30, 20, 55, 20);\n</code>\n</div>\n\n<div>\n<code>\n// Draw a square with rounded corners having the following radii:\n// top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.\nsquare(30, 20, 55, 20, 15, 10, 5);\n</code>\n</div>"],"alt":"55x55 white square with black outline in mid-right of canvas.\n55x55 white square with black outline and rounded edges in mid-right of canvas.\n55x55 white square with black outline and rounded edges of different radii.","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":707,"description":"<p>Draws a triangle to the canvas. A triangle is a plane created by connecting\nthree points. The first two arguments specify the first point, the middle two\narguments specify the second point, and the last two arguments specify the\nthird point.</p>\n","itemtype":"method","name":"triangle","params":[{"name":"x1","description":"<p>x-coordinate of the first point</p>\n","type":"Number"},{"name":"y1","description":"<p>y-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"<p>x-coordinate of the second point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate of the second point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate of the third point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate of the third point</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\ntriangle(30, 75, 58, 20, 86, 75);\n</code>\n</div>"],"alt":"white triangle with black outline in mid-right of canvas.","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/attributes.js","line":12,"description":"<p>Modifies the location from which ellipses are drawn by changing the way in\nwhich parameters given to <a href=\"#/p5/ellipse\">ellipse()</a>,\n<a href=\"#/p5/circle\">circle()</a> and <a href=\"#/p5/arc\">arc()</a> are interpreted.</p>\n<p>The default mode is CENTER, in which the first two parameters are interpreted\nas the shape's center point's x and y coordinates respectively, while the third\nand fourth parameters are its width and height.</p>\n<p>ellipseMode(RADIUS) also uses the first two parameters as the shape's center\npoint's x and y coordinates, but uses the third and fourth parameters to\nspecify half of the shapes's width and height.</p>\n<p>ellipseMode(CORNER) interprets the first two parameters as the upper-left\ncorner of the shape, while the third and fourth parameters are its width\nand height.</p>\n<p>ellipseMode(CORNERS) interprets the first two parameters as the location of\none corner of the ellipse's bounding box, and the third and fourth parameters\nas the location of the opposite corner.</p>\n<p>The parameter to this method must be written in ALL CAPS because they are\npredefined as constants in ALL CAPS and Javascript is a case-sensitive language.</p>\n","itemtype":"method","name":"ellipseMode","params":[{"name":"mode","description":"<p>either CENTER, RADIUS, CORNER, or CORNERS</p>\n","type":"Constant"}],"chainable":1,"example":["\n<div>\n<code>\n// Example showing RADIUS and CENTER ellipsemode with 2 overlaying ellipses\nellipseMode(RADIUS);\nfill(255);\nellipse(50, 50, 30, 30); // Outer white ellipse\nellipseMode(CENTER);\nfill(100);\nellipse(50, 50, 30, 30); // Inner gray ellipse\n</code>\n</div>\n\n<div>\n<code>\n// Example showing CORNER and CORNERS ellipseMode with 2 overlaying ellipses\nellipseMode(CORNER);\nfill(255);\nellipse(25, 25, 50, 50); // Outer white ellipse\nellipseMode(CORNERS);\nfill(100);\nellipse(25, 25, 50, 50); // Inner gray ellipse\n</code>\n</div>"],"alt":"60x60 white ellipse and 30x30 grey ellipse with black outlines at center.\n60x60 white ellipse and 30x30 grey ellipse top-right with black outlines.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":81,"description":"<p>Draws all geometry with jagged (aliased) edges. Note that <a href=\"#/p5/smooth\">smooth()</a> is\nactive by default in 2D mode, so it is necessary to call <a href=\"#/p5/noSmooth\">noSmooth()</a> to disable\nsmoothing of geometry, images, and fonts. In 3D mode, <a href=\"#/p5/noSmooth\">noSmooth()</a> is enabled\nby default, so it is necessary to call <a href=\"#/p5/smooth\">smooth()</a> if you would like\nsmooth (antialiased) edges on your geometry.</p>\n","itemtype":"method","name":"noSmooth","chainable":1,"example":["\n<div>\n<code>\nbackground(0);\nnoStroke();\nsmooth();\nellipse(30, 48, 36, 36);\nnoSmooth();\nellipse(70, 48, 36, 36);\n</code>\n</div>"],"alt":"2 pixelated 36x36 white ellipses to left & right of center, black background","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":115,"description":"<p>Modifies the location from which rectangles are drawn by changing the way\nin which parameters given to <a href=\"#/p5/rect\">rect()</a> are interpreted.</p>\n<p>The default mode is CORNER, which interprets the first two parameters as the\nupper-left corner of the shape, while the third and fourth parameters are its\nwidth and height.</p>\n<p>rectMode(CORNERS) interprets the first two parameters as the location of\none of the corners, and the third and fourth parameters as the location of\nthe diagonally opposite corner. Note, the rectangle is drawn between the\ncoordinates, so it is not neccesary that the first corner be the upper left\ncorner.</p>\n<p>rectMode(CENTER) interprets the first two parameters as the shape's center\npoint, while the third and fourth parameters are its width and height.</p>\n<p>rectMode(RADIUS) also uses the first two parameters as the shape's center\npoint, but uses the third and fourth parameters to specify half of the shape's\nwidth and height respectively.</p>\n<p>The parameter to this method must be written in ALL CAPS because they are\npredefined as constants in ALL CAPS and Javascript is a case-sensitive language.</p>\n","itemtype":"method","name":"rectMode","params":[{"name":"mode","description":"<p>either CORNER, CORNERS, CENTER, or RADIUS</p>\n","type":"Constant"}],"chainable":1,"example":["\n<div>\n<code>\nrectMode(CORNER);\nfill(255);\nrect(25, 25, 50, 50); // Draw white rectangle using CORNER mode\n\nrectMode(CORNERS);\nfill(100);\nrect(25, 25, 50, 50); // Draw gray rectangle using CORNERS mode\n</code>\n</div>\n\n<div>\n<code>\nrectMode(RADIUS);\nfill(255);\nrect(50, 50, 30, 30); // Draw white rectangle using RADIUS mode\n\nrectMode(CENTER);\nfill(100);\nrect(50, 50, 30, 30); // Draw gray rectangle using CENTER mode\n</code>\n</div>"],"alt":"50x50 white rect at center and 25x25 grey rect in the top left of the other.\n50x50 white rect at center and 25x25 grey rect in the center of the other.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":184,"description":"<p>Draws all geometry with smooth (anti-aliased) edges. <a href=\"#/p5/smooth\">smooth()</a> will also\nimprove image quality of resized images. Note that <a href=\"#/p5/smooth\">smooth()</a> is active by\ndefault in 2D mode; <a href=\"#/p5/noSmooth\">noSmooth()</a> can be used to disable smoothing of geometry,\nimages, and fonts. In 3D mode, <a href=\"#/p5/noSmooth\">noSmooth()</a> is enabled\nby default, so it is necessary to call <a href=\"#/p5/smooth\">smooth()</a> if you would like\nsmooth (antialiased) edges on your geometry.</p>\n","itemtype":"method","name":"smooth","chainable":1,"example":["\n<div>\n<code>\nbackground(0);\nnoStroke();\nsmooth();\nellipse(30, 48, 36, 36);\nnoSmooth();\nellipse(70, 48, 36, 36);\n</code>\n</div>"],"alt":"2 pixelated 36x36 white ellipses one left one right of center. On black.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":219,"description":"<p>Sets the style for rendering line endings. These ends are either rounded,\nsquared or extended, each of which specified with the corresponding\nparameters: ROUND, SQUARE and PROJECT. The default cap is ROUND.</p>\n<p>The parameter to this method must be written in ALL CAPS because they are\npredefined as constants in ALL CAPS and Javascript is a case-sensitive language.</p>\n","itemtype":"method","name":"strokeCap","params":[{"name":"cap","description":"<p>either ROUND, SQUARE or PROJECT</p>\n","type":"Constant"}],"chainable":1,"example":["\n<div>\n<code>\n// Example of different strokeCaps\nstrokeWeight(12.0);\nstrokeCap(ROUND);\nline(20, 30, 80, 30);\nstrokeCap(SQUARE);\nline(20, 50, 80, 50);\nstrokeCap(PROJECT);\nline(20, 70, 80, 70);\n</code>\n</div>"],"alt":"3 lines. Top line: rounded ends, mid: squared, bottom:longer squared ends.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":259,"description":"<p>Sets the style of the joints which connect line segments. These joints\nare either mitered, beveled or rounded and specified with the\ncorresponding parameters MITER, BEVEL and ROUND. The default joint is\nMITER.</p>\n<p>The parameter to this method must be written in ALL CAPS because they are\npredefined as constants in ALL CAPS and Javascript is a case-sensitive language.</p>\n","itemtype":"method","name":"strokeJoin","params":[{"name":"join","description":"<p>either MITER, BEVEL, ROUND</p>\n","type":"Constant"}],"chainable":1,"example":["\n<div>\n<code>\n// Example of MITER type of joints\nnoFill();\nstrokeWeight(10.0);\nstrokeJoin(MITER);\nbeginShape();\nvertex(35, 20);\nvertex(65, 50);\nvertex(35, 80);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\n// Example of BEVEL type of joints\nnoFill();\nstrokeWeight(10.0);\nstrokeJoin(BEVEL);\nbeginShape();\nvertex(35, 20);\nvertex(65, 50);\nvertex(35, 80);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\n// Example of ROUND type of joints\nnoFill();\nstrokeWeight(10.0);\nstrokeJoin(ROUND);\nbeginShape();\nvertex(35, 20);\nvertex(65, 50);\nvertex(35, 80);\nendShape();\n</code>\n</div>"],"alt":"Right-facing arrowhead shape with pointed tip in center of canvas.\nRight-facing arrowhead shape with flat tip in center of canvas.\nRight-facing arrowhead shape with rounded tip in center of canvas.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":331,"description":"<p>Sets the width of the stroke used for lines, points and the border around\nshapes. All widths are set in units of pixels.</p>\n","itemtype":"method","name":"strokeWeight","params":[{"name":"weight","description":"<p>the weight of the stroke (in pixels)</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\n// Example of different stroke weights\nstrokeWeight(1); // Default\nline(20, 20, 80, 20);\nstrokeWeight(4); // Thicker\nline(20, 40, 80, 40);\nstrokeWeight(10); // Beastly\nline(20, 70, 80, 70);\n</code>\n</div>"],"alt":"3 horizontal black lines. Top line: thin, mid: medium, bottom:thick.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/curves.js","line":13,"description":"<p>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.</p>\n<p>Bezier curves were developed by French automotive engineer Pierre Bezier,\nand are commonly used in computer graphics to define gently sloping curves.\nSee also <a href=\"#/p5/curve\">curve()</a>.</p>\n","itemtype":"method","name":"bezier","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\nbackground(0, 0, 0);\nnoFill();\nstroke(255);\nbezier(250, 250, 0, 100, 100, 0, 100, 0, 0, 0, 100, 0);\n</code>\n</div>"],"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":"<p>x-coordinate for the first anchor point</p>\n","type":"Number"},{"name":"y1","description":"<p>y-coordinate for the first anchor point</p>\n","type":"Number"},{"name":"x2","description":"<p>x-coordinate for the first control point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate for the first control point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate for the second control point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate for the second control point</p>\n","type":"Number"},{"name":"x4","description":"<p>x-coordinate for the second anchor point</p>\n","type":"Number"},{"name":"y4","description":"<p>y-coordinate for the second anchor point</p>\n","type":"Number"}],"chainable":1},{"line":62,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>z-coordinate for the first anchor point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>z-coordinate for the first control point</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>z-coordinate for the second control point</p>\n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"<p>z-coordinate for the second anchor point</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/curves.js","line":92,"description":"<p>Sets the resolution at which Bezier's curve is displayed. The default value is 20.</p>\n<p>Note, This function is only useful when using the WEBGL renderer\nas the default canvas renderer does not use this information.</p>\n","itemtype":"method","name":"bezierDetail","params":[{"name":"detail","description":"<p>resolution of the curves</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  noFill();\n  bezierDetail(5);\n}\n\nfunction draw() {\n  background(200);\n  bezier(-40, -40, 0,\n          90, -40, 0,\n         -90,  40, 0,\n          40,  40, 0);\n}\n</code>\n</div>"],"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":130,"description":"<p>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.</p>\n","itemtype":"method","name":"bezierPoint","params":[{"name":"a","description":"<p>coordinate of first point on the curve</p>\n","type":"Number"},{"name":"b","description":"<p>coordinate of first control point</p>\n","type":"Number"},{"name":"c","description":"<p>coordinate of second control point</p>\n","type":"Number"},{"name":"d","description":"<p>coordinate of second point on the curve</p>\n","type":"Number"},{"name":"t","description":"<p>value between 0 and 1</p>\n","type":"Number"}],"return":{"description":"the value of the Bezier at position t","type":"Number"},"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"10 points plotted on a given bezier at equal distances.","class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":185,"description":"<p>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.</p>\n","itemtype":"method","name":"bezierTangent","params":[{"name":"a","description":"<p>coordinate of first point on the curve</p>\n","type":"Number"},{"name":"b","description":"<p>coordinate of first control point</p>\n","type":"Number"},{"name":"c","description":"<p>coordinate of second control point</p>\n","type":"Number"},{"name":"d","description":"<p>coordinate of second point on the curve</p>\n","type":"Number"},{"name":"t","description":"<p>value between 0 and 1</p>\n","type":"Number"}],"return":{"description":"the tangent at position t","type":"Number"},"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":264,"description":"<p>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. <br /><br />\nLonger curves can be created by putting a series of <a href=\"#/p5/curve\">curve()</a> functions\ntogether or using <a href=\"#/p5/curveVertex\">curveVertex()</a>. An additional function called\n<a href=\"#/p5/curveTightness\">curveTightness()</a> provides control for the visual quality of the curve.\nThe <a href=\"#/p5/curve\">curve()</a> function is an implementation of Catmull-Rom splines.</p>\n","itemtype":"method","name":"curve","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":264,"params":[{"name":"x1","description":"<p>x-coordinate for the beginning control point</p>\n","type":"Number"},{"name":"y1","description":"<p>y-coordinate for the beginning control point</p>\n","type":"Number"},{"name":"x2","description":"<p>x-coordinate for the first point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate for the first point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate for the second point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate for the second point</p>\n","type":"Number"},{"name":"x4","description":"<p>x-coordinate for the ending control point</p>\n","type":"Number"},{"name":"y4","description":"<p>y-coordinate for the ending control point</p>\n","type":"Number"}],"chainable":1},{"line":332,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>z-coordinate for the beginning control point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>z-coordinate for the first point</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>z-coordinate for the second point</p>\n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"<p>z-coordinate for the ending control point</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/curves.js","line":358,"description":"<p>Sets the resolution at which curves display. The default value is 20 while\nthe minimum value is 3.</p>\n<p>This function is only useful when using the WEBGL renderer\nas the default canvas renderer does not use this\ninformation.</p>\n","itemtype":"method","name":"curveDetail","params":[{"name":"resolution","description":"<p>resolution of the curves</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\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</code>\n</div>"],"alt":"white arch shape with a low level of curve detail.","class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":398,"description":"<p>Modifies the quality of forms created with <a href=\"#/p5/curve\">curve()</a>\nand <a href=\"#/p5/curveVertex\">curveVertex()</a>.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.</p>\n","itemtype":"method","name":"curveTightness","params":[{"name":"amount","description":"<p>amount of deformation from the original vertices</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"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":444,"description":"<p>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.</p>\n","itemtype":"method","name":"curvePoint","params":[{"name":"a","description":"<p>coordinate of first control point of the curve</p>\n","type":"Number"},{"name":"b","description":"<p>coordinate of first point</p>\n","type":"Number"},{"name":"c","description":"<p>coordinate of second point</p>\n","type":"Number"},{"name":"d","description":"<p>coordinate of second control point</p>\n","type":"Number"},{"name":"t","description":"<p>value between 0 and 1</p>\n","type":"Number"}],"return":{"description":"bezier value at position t","type":"Number"},"example":["\n<div>\n<code>\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</code>\n</div>\n\nline hooking down to right-bottom with 13 5x5 white ellipse points"],"class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":493,"description":"<p>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.</p>\n","itemtype":"method","name":"curveTangent","params":[{"name":"a","description":"<p>coordinate of first control point</p>\n","type":"Number"},{"name":"b","description":"<p>coordinate of first point on the curve</p>\n","type":"Number"},{"name":"c","description":"<p>coordinate of second point on the curve</p>\n","type":"Number"},{"name":"d","description":"<p>coordinate of second conrol point</p>\n","type":"Number"},{"name":"t","description":"<p>value between 0 and 1</p>\n","type":"Number"}],"return":{"description":"the tangent at position t","type":"Number"},"example":["\n<div>\n<code>\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</code>\n</div>"],"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":"<p>Use the <a href=\"#/p5/beginContour\">beginContour()</a> and\n<a href=\"#/p5/endContour\">endContour()</a> functions to create negative shapes\nwithin shapes such as the center of the letter 'O'. <a href=\"#/p5/beginContour\">beginContour()</a>\nbegins recording vertices for the shape and <a href=\"#/p5/endContour\">endContour()</a> 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.</p>\n<p>These functions can only be used within a <a href=\"#/p5/beginShape\">beginShape()</a>/<a href=\"#/p5/endShape\">endShape()</a> pair and\ntransformations such as <a href=\"#/p5/translate\">translate()</a>, <a href=\"#/p5/rotate\">rotate()</a>, and <a href=\"#/p5/scale\">scale()</a> do not work\nwithin a <a href=\"#/p5/beginContour\">beginContour()</a>/<a href=\"#/p5/endContour\">endContour()</a> pair. It is also not possible to use\nother shapes, such as <a href=\"#/p5/ellipse\">ellipse()</a> or <a href=\"#/p5/rect\">rect()</a> within.</p>\n","itemtype":"method","name":"beginContour","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"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":67,"description":"<p>Using the <a href=\"#/p5/beginShape\">beginShape()</a> and <a href=\"#/p5/endShape\">endShape()</a> functions allow creating more\ncomplex forms. <a href=\"#/p5/beginShape\">beginShape()</a> begins recording vertices for a shape and\n<a href=\"#/p5/endShape\">endShape()</a> 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.</p>\n<p>The parameters available for <a href=\"#/p5/beginShape\">beginShape()</a> are POINTS, LINES, TRIANGLES,\nTRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIP, and TESS (WebGL only). After calling the\n<a href=\"#/p5/beginShape\">beginShape()</a> function, a series of <a href=\"#/p5/vertex\">vertex()</a> commands must follow. To stop\ndrawing the shape, call <a href=\"#/p5/endShape\">endShape()</a>. Each shape will be outlined with the\ncurrent stroke color and filled with the fill color.</p>\n<p>Transformations such as <a href=\"#/p5/translate\">translate()</a>, <a href=\"#/p5/rotate\">rotate()</a>, and <a href=\"#/p5/scale\">scale()</a> do not work\nwithin <a href=\"#/p5/beginShape\">beginShape()</a>. It is also not possible to use other shapes, such as\n<a href=\"#/p5/ellipse\">ellipse()</a> or <a href=\"#/p5/rect\">rect()</a> within <a href=\"#/p5/beginShape\">beginShape()</a>.</p>\n","itemtype":"method","name":"beginShape","params":[{"name":"kind","description":"<p>either POINTS, LINES, TRIANGLES, TRIANGLE_FAN\n                               TRIANGLE_STRIP, QUADS, QUAD_STRIP or TESS</p>\n","type":"Constant","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape(CLOSE);\n</code>\n</div>\n\n<div>\n<code>\nbeginShape(POINTS);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\nbeginShape(LINES);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\nnoFill();\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\nnoFill();\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape(CLOSE);\n</code>\n</div>\n\n<div>\n<code>\nbeginShape(TRIANGLES);\nvertex(30, 75);\nvertex(40, 20);\nvertex(50, 75);\nvertex(60, 20);\nvertex(70, 75);\nvertex(80, 20);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\nbeginShape();\nvertex(20, 20);\nvertex(40, 20);\nvertex(40, 40);\nvertex(60, 40);\nvertex(60, 60);\nvertex(20, 60);\nendShape(CLOSE);\n</code>\n</div>"],"alt":"white square-shape with black outline in middle-right of canvas.\n4 black points in a square shape in middle-right of canvas.\n2 horizontal black lines. In the top-right and bottom-right of canvas.\n3 line shape with horizontal on top, vertical in middle and horizontal bottom.\nsquare line shape in middle-right of canvas.\n2 white triangle shapes mid-right canvas. left one pointing up and right down.\n5 horizontal interlocking and alternating white triangles in mid-right canvas.\n4 interlocking white triangles in 45 degree rotated square-shape.\n2 white rectangle shapes in mid-right canvas. Both 20x55.\n3 side-by-side white rectangles center rect is smaller in mid-right canvas.\nThick white l-shape with black outline mid-top-left of canvas.","class":"p5","module":"Shape","submodule":"Vertex"},{"file":"src/core/shape/vertex.js","line":267,"description":"<p>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).</p>\n<p>The first time bezierVertex() is used within a <a href=\"#/p5/beginShape\">beginShape()</a>\ncall, it must be prefaced with a call to <a href=\"#/p5/vertex\">vertex()</a> to set the first anchor\npoint. This function must be used between <a href=\"#/p5/beginShape\">beginShape()</a> and <a href=\"#/p5/endShape\">endShape()</a>\nand only when there is no MODE or POINTS parameter specified to\n<a href=\"#/p5/beginShape\">beginShape()</a>.</p>\n","itemtype":"method","name":"bezierVertex","chainable":1,"example":["\n<div>\n<code>\nnoFill();\nbeginShape();\nvertex(30, 20);\nbezierVertex(80, 0, 80, 75, 30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\nbeginShape();\nvertex(30, 20);\nbezierVertex(80, 0, 80, 75, 30, 75);\nbezierVertex(50, 80, 60, 25, 30, 20);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":267,"params":[{"name":"x2","description":"<p>x-coordinate for the first control point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate for the first control point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate for the second control point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate for the second control point</p>\n","type":"Number"},{"name":"x4","description":"<p>x-coordinate for the anchor point</p>\n","type":"Number"},{"name":"y4","description":"<p>y-coordinate for the anchor point</p>\n","type":"Number"}],"chainable":1},{"line":349,"params":[{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>z-coordinate for the first control point (for WebGL mode)</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>z-coordinate for the second control point (for WebGL mode)</p>\n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"<p>z-coordinate for the anchor point (for WebGL mode)</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/vertex.js","line":389,"description":"<p>Specifies vertex coordinates for curves. This function may only\nbe used between <a href=\"#/p5/beginShape\">beginShape()</a> and <a href=\"#/p5/endShape\">endShape()</a> and only when there\nis no MODE parameter specified to <a href=\"#/p5/beginShape\">beginShape()</a>.\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.</p>\n<p>The first and last points in a series of curveVertex() lines will be used to\nguide the beginning and end of a the curve. A minimum of four\npoints is required to draw a tiny curve between the second and\nthird points. Adding a fifth point with curveVertex() will draw\nthe curve between the second, third, and fourth points. The\ncurveVertex() function is an implementation of Catmull-Rom\nsplines.</p>\n","itemtype":"method","name":"curveVertex","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"Upside-down u-shape line, mid canvas. left point extends beyond canvas view.","class":"p5","module":"Shape","submodule":"Vertex","overloads":[{"line":389,"params":[{"name":"x","description":"<p>x-coordinate of the vertex</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the vertex</p>\n","type":"Number"}],"chainable":1},{"line":434,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"<p>z-coordinate of the vertex (for WebGL mode)</p>\n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/core/shape/vertex.js","line":498,"description":"<p>Use the <a href=\"#/p5/beginContour\">beginContour()</a> and <a href=\"#/p5/endContour\">endContour()</a> functions to create negative\nshapes within shapes such as the center of the letter 'O'. <a href=\"#/p5/beginContour\">beginContour()</a>\nbegins recording vertices for the shape and <a href=\"#/p5/endContour\">endContour()</a> 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.</p>\n<p>These functions can only be used within a <a href=\"#/p5/beginShape\">beginShape()</a>/<a href=\"#/p5/endShape\">endShape()</a> pair and\ntransformations such as <a href=\"#/p5/translate\">translate()</a>, <a href=\"#/p5/rotate\">rotate()</a>, and <a href=\"#/p5/scale\">scale()</a> do not work\nwithin a <a href=\"#/p5/beginContour\">beginContour()</a>/<a href=\"#/p5/endContour\">endContour()</a> pair. It is also not possible to use\nother shapes, such as <a href=\"#/p5/ellipse\">ellipse()</a> or <a href=\"#/p5/rect\">rect()</a> within.</p>\n","itemtype":"method","name":"endContour","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"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":557,"description":"<p>The <a href=\"#/p5/endShape\">endShape()</a> function is the companion to <a href=\"#/p5/beginShape\">beginShape()</a> and may only be\ncalled after <a href=\"#/p5/beginShape\">beginShape()</a>. When <a href=\"#/p5/endshape\">endShape()</a> is called, all of image data\ndefined since the previous call to <a href=\"#/p5/beginShape\">beginShape()</a> is written into the image\nbuffer. The constant CLOSE as the value for the MODE parameter to close\nthe shape (to connect the beginning and the end).</p>\n","itemtype":"method","name":"endShape","params":[{"name":"mode","description":"<p>use CLOSE to close the shape</p>\n","type":"Constant","optional":true}],"chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"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":642,"description":"<p>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 <a href=\"#/p5/beginShape\">beginShape()</a> call, it\nmust be prefaced with a call to <a href=\"#/p5/vertex\">vertex()</a> 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).</p>\n<p>This function must be used between <a href=\"#/p5/beginShape\">beginShape()</a> and <a href=\"#/p5/endShape\">endShape()</a>\nand only when there is no MODE or POINTS parameter specified to\n<a href=\"#/p5/beginShape\">beginShape()</a>.</p>\n","itemtype":"method","name":"quadraticVertex","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":642,"params":[{"name":"cx","description":"<p>x-coordinate for the control point</p>\n","type":"Number"},{"name":"cy","description":"<p>y-coordinate for the control point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate for the anchor point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate for the anchor point</p>\n","type":"Number"}],"chainable":1},{"line":707,"params":[{"name":"cx","description":"","type":"Number"},{"name":"cy","description":"","type":"Number"},{"name":"cz","description":"<p>z-coordinate for the control point (for WebGL mode)</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>z-coordinate for the anchor point (for WebGL mode)</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/vertex.js","line":800,"description":"<p>All shapes are constructed by connecting a series of vertices. <a href=\"#/p5/vertex\">vertex()</a>\nis used to specify the vertex coordinates for points, lines, triangles,\nquads, and polygons. It is used exclusively within the <a href=\"#/p5/beginShape\">beginShape()</a> and\n<a href=\"#/p5/endShape\">endShape()</a> functions.</p>\n","itemtype":"method","name":"vertex","chainable":1,"example":["\n<div>\n<code>\nstrokeWeight(3);\nbeginShape(POINTS);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":800,"params":[{"name":"x","description":"<p>x-coordinate of the vertex</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the vertex</p>\n","type":"Number"}],"chainable":1},{"line":931,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"<p>z-coordinate of the vertex</p>\n","type":"Number"},{"name":"u","description":"<p>the vertex's texture u-coordinate</p>\n","type":"Number","optional":true},{"name":"v","description":"<p>the vertex's texture v-coordinate</p>\n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/core/constants.js","line":9,"description":"<p>Version of this p5.js.</p>\n","itemtype":"property","name":"VERSION","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":18,"description":"<p>The default, two-dimensional renderer.</p>\n","itemtype":"property","name":"P2D","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":24,"description":"<p>One of the two render modes in p5.js: P2D (default renderer) and WEBGL\nEnables 3D render by introducing the third dimension: Z</p>\n","itemtype":"property","name":"WEBGL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":33,"itemtype":"property","name":"ARROW","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":38,"itemtype":"property","name":"CROSS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":43,"itemtype":"property","name":"HAND","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":48,"itemtype":"property","name":"MOVE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":53,"itemtype":"property","name":"TEXT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":58,"itemtype":"property","name":"WAIT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":66,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"HALF_PI","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, HALF_PI);\n</code></div>"],"alt":"80x80 white quarter-circle with curve toward bottom right of canvas.","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":84,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"PI","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, PI);\n</code></div>"],"alt":"white half-circle with curve toward bottom of canvas.","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":102,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"QUARTER_PI","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, QUARTER_PI);\n</code></div>"],"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":120,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"TAU","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, TAU);\n</code></div>"],"alt":"80x80 white ellipse shape in center of canvas.","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":138,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"TWO_PI","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, TWO_PI);\n</code></div>"],"alt":"80x80 white ellipse shape in center of canvas.","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":156,"description":"<p>Constant to be used with <a href=\"#/p5/angleMode\">angleMode()</a> function, to set the mode which\np5.js interprates and calculates angles (either DEGREES or RADIANS).</p>\n","itemtype":"property","name":"DEGREES","type":"String","final":1,"example":["\n<div class='norender'><code>\nfunction setup() {\n  angleMode(DEGREES);\n}\n</code></div>"],"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":170,"description":"<p>Constant to be used with <a href=\"#/p5/angleMode\">angleMode()</a> function, to set the mode which\np5.js interprates and calculates angles (either RADIANS or DEGREES).</p>\n","itemtype":"property","name":"RADIANS","type":"String","final":1,"example":["\n<div class='norender'><code>\nfunction setup() {\n  angleMode(RADIANS);\n}\n</code></div>"],"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":188,"itemtype":"property","name":"CORNER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":193,"itemtype":"property","name":"CORNERS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":198,"itemtype":"property","name":"RADIUS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":203,"itemtype":"property","name":"RIGHT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":208,"itemtype":"property","name":"LEFT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":213,"itemtype":"property","name":"CENTER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":218,"itemtype":"property","name":"TOP","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":223,"itemtype":"property","name":"BOTTOM","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":228,"itemtype":"property","name":"BASELINE","type":"String","final":1,"default":"alphabetic","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":234,"itemtype":"property","name":"POINTS","type":"Number","final":1,"default":"0x0000","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":240,"itemtype":"property","name":"LINES","type":"Number","final":1,"default":"0x0001","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":246,"itemtype":"property","name":"LINE_STRIP","type":"Number","final":1,"default":"0x0003","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":252,"itemtype":"property","name":"LINE_LOOP","type":"Number","final":1,"default":"0x0002","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":258,"itemtype":"property","name":"TRIANGLES","type":"Number","final":1,"default":"0x0004","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":264,"itemtype":"property","name":"TRIANGLE_FAN","type":"Number","final":1,"default":"0x0006","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":270,"itemtype":"property","name":"TRIANGLE_STRIP","type":"Number","final":1,"default":"0x0005","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":276,"itemtype":"property","name":"QUADS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":281,"itemtype":"property","name":"QUAD_STRIP","type":"String","final":1,"default":"quad_strip","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":287,"itemtype":"property","name":"TESS","type":"String","final":1,"default":"tess","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":293,"itemtype":"property","name":"CLOSE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":298,"itemtype":"property","name":"OPEN","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":303,"itemtype":"property","name":"CHORD","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":308,"itemtype":"property","name":"PIE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":313,"itemtype":"property","name":"PROJECT","type":"String","final":1,"default":"square","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":319,"itemtype":"property","name":"SQUARE","type":"String","final":1,"default":"butt","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":325,"itemtype":"property","name":"ROUND","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":330,"itemtype":"property","name":"BEVEL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":335,"itemtype":"property","name":"MITER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":342,"itemtype":"property","name":"RGB","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":347,"description":"<p>HSB (hue, saturation, brightness) is a type of color model.\nYou can learn more about it at\n<a href=\"https://learnui.design/blog/the-hsb-color-system-practicioners-primer.html\">HSB</a>.</p>\n","itemtype":"property","name":"HSB","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":356,"itemtype":"property","name":"HSL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":363,"description":"<p>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 <a href=\"/#/p5.Element/size\">size</a> function as AUTO, at a time.</p>\n","itemtype":"property","name":"AUTO","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":373,"itemtype":"property","name":"ALT","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":379,"itemtype":"property","name":"BACKSPACE","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":384,"itemtype":"property","name":"CONTROL","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":389,"itemtype":"property","name":"DELETE","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":394,"itemtype":"property","name":"DOWN_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":399,"itemtype":"property","name":"ENTER","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":404,"itemtype":"property","name":"ESCAPE","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":409,"itemtype":"property","name":"LEFT_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":414,"itemtype":"property","name":"OPTION","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":419,"itemtype":"property","name":"RETURN","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":424,"itemtype":"property","name":"RIGHT_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":429,"itemtype":"property","name":"SHIFT","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":434,"itemtype":"property","name":"TAB","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":439,"itemtype":"property","name":"UP_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":446,"itemtype":"property","name":"BLEND","type":"String","final":1,"default":"source-over","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":452,"itemtype":"property","name":"REMOVE","type":"String","final":1,"default":"destination-out","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":458,"itemtype":"property","name":"ADD","type":"String","final":1,"default":"lighter","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":466,"itemtype":"property","name":"DARKEST","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":471,"itemtype":"property","name":"LIGHTEST","type":"String","final":1,"default":"lighten","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":477,"itemtype":"property","name":"DIFFERENCE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":482,"itemtype":"property","name":"SUBTRACT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":487,"itemtype":"property","name":"EXCLUSION","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":492,"itemtype":"property","name":"MULTIPLY","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":497,"itemtype":"property","name":"SCREEN","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":502,"itemtype":"property","name":"REPLACE","type":"String","final":1,"default":"copy","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":508,"itemtype":"property","name":"OVERLAY","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":513,"itemtype":"property","name":"HARD_LIGHT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":518,"itemtype":"property","name":"SOFT_LIGHT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":523,"itemtype":"property","name":"DODGE","type":"String","final":1,"default":"color-dodge","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":529,"itemtype":"property","name":"BURN","type":"String","final":1,"default":"color-burn","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":537,"itemtype":"property","name":"THRESHOLD","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":542,"itemtype":"property","name":"GRAY","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":547,"itemtype":"property","name":"OPAQUE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":552,"itemtype":"property","name":"INVERT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":557,"itemtype":"property","name":"POSTERIZE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":562,"itemtype":"property","name":"DILATE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":567,"itemtype":"property","name":"ERODE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":572,"itemtype":"property","name":"BLUR","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":579,"itemtype":"property","name":"NORMAL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":584,"itemtype":"property","name":"ITALIC","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":589,"itemtype":"property","name":"BOLD","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":594,"itemtype":"property","name":"BOLDITALIC","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":606,"itemtype":"property","name":"LINEAR","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":611,"itemtype":"property","name":"QUADRATIC","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":616,"itemtype":"property","name":"BEZIER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":621,"itemtype":"property","name":"CURVE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":628,"itemtype":"property","name":"STROKE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":633,"itemtype":"property","name":"FILL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":638,"itemtype":"property","name":"TEXTURE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":643,"itemtype":"property","name":"IMMEDIATE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":651,"itemtype":"property","name":"IMAGE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":659,"itemtype":"property","name":"NEAREST","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":664,"itemtype":"property","name":"REPEAT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":669,"itemtype":"property","name":"CLAMP","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":674,"itemtype":"property","name":"MIRROR","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":681,"itemtype":"property","name":"LANDSCAPE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":686,"itemtype":"property","name":"PORTRAIT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":696,"itemtype":"property","name":"GRID","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":702,"itemtype":"property","name":"AXES","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":708,"itemtype":"property","name":"LABEL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":713,"itemtype":"property","name":"FALLBACK","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/environment.js","line":20,"description":"<p>The <a href=\"#/p5/print\">print()</a> function writes to the console area of\nyour browser. This function is often helpful for looking at the data a program\nis producing. This function creates a new line of text for each call to\nthe function. Individual elements can be separated with quotes (\"\") and joined\nwith the addition operator (+).</p>\n<p>Note that calling print() without any arguments invokes the window.print()\nfunction which opens the browser's print dialog. To print a blank line\nto console you can write print('\\n').</p>\n","itemtype":"method","name":"print","params":[{"name":"contents","description":"<p>any combination of Number, String, Object, Boolean,\n                      Array to print</p>\n","type":"Any"}],"example":["\n<div><code class='norender'>\nlet x = 10;\nprint('The value of x is ' + x);\n// prints \"The value of x is 10\"\n</code></div>"],"alt":"default grey canvas","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":52,"description":"<p>The system variable <a href=\"#/p5/frameCount\">frameCount</a> contains the\nnumber of frames that have been displayed since the program started. Inside\n<a href=\"#/p5/setup\">setup()</a> the value is 0, after the first iteration\nof draw it is 1, etc.</p>\n","itemtype":"property","name":"frameCount","type":"Integer","readonly":"","example":["\n<div><code>\nfunction setup() {\n  frameRate(30);\n  textSize(30);\n  textAlign(CENTER);\n}\n\nfunction draw() {\n  background(200);\n  text(frameCount, width / 2, height / 2);\n}\n</code></div>"],"alt":"numbers rapidly counting upward with frame count set to 30.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":79,"description":"<p>The system variable <a href=\"#/p5/deltaTime\">deltaTime</a> contains the time\ndifference between the beginning of the previous frame and the beginning\nof the current frame in milliseconds.</p>\n<p>This variable is useful for creating time sensitive animation or physics\ncalculation that should stay constant regardless of frame rate.</p>\n","itemtype":"property","name":"deltaTime","type":"Integer","readonly":"","example":["\n<div><code>\nlet rectX = 0;\nlet fr = 30; //starting FPS\nlet clr;\n\nfunction setup() {\n  background(200);\n  frameRate(fr); // Attempt to refresh at starting FPS\n  clr = color(255, 0, 0);\n}\n\nfunction draw() {\n  background(200);\n  rectX = rectX + 1 * (deltaTime / 50); // Move Rectangle in relation to deltaTime\n\n  if (rectX >= width) {\n    // If you go off screen.\n    if (fr === 30) {\n      clr = color(0, 0, 255);\n      fr = 10;\n      frameRate(fr); // make frameRate 10 FPS\n    } else {\n      clr = color(255, 0, 0);\n      fr = 30;\n      frameRate(fr); // make frameRate 30 FPS\n    }\n    rectX = 0;\n  }\n  fill(clr);\n  rect(rectX, 40, 20, 20);\n}\n</code></div>"],"alt":"red rect moves left to right, followed by blue rect moving at the same speed\nwith a lower frame rate. Loops.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":129,"description":"<p>Confirms if the window a p5.js program is in is \"focused,\" meaning that\nthe sketch will accept mouse or keyboard input. This variable is\n\"true\" if the window is focused and \"false\" if not.</p>\n","itemtype":"property","name":"focused","type":"Boolean","readonly":"","example":["\n<div><code>\n// To demonstrate, put two windows side by side.\n// Click on the window that the p5 sketch isn't in!\nfunction draw() {\n  background(200);\n  noStroke();\n  fill(0, 200, 0);\n  ellipse(25, 25, 50, 50);\n\n  if (!focused) {\n   // or \"if (focused === false)\"\n    stroke(200, 0, 0);\n    line(0, 0, 100, 100);\n    line(100, 0, 0, 100);\n  }\n}\n</code></div>"],"alt":"green 50x50 ellipse at top left. Red X covers canvas when page focus changes","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":160,"description":"<p>Sets the cursor to a predefined symbol or an image, or makes it visible\nif already hidden. If you are trying to set an image as the cursor, the\nrecommended size is 16x16 or 32x32 pixels. The values for parameters x and y\nmust be less than the dimensions of the image.</p>\n","itemtype":"method","name":"cursor","params":[{"name":"type","description":"<p>Built-In: either ARROW, CROSS, HAND, MOVE, TEXT and WAIT\n                              Native CSS properties: 'grab', 'progress', 'cell' etc.\n                              External: path for cursor's images\n                              (Allowed File extensions: .cur, .gif, .jpg, .jpeg, .png)\n                              For more information on Native CSS cursors and url visit:\n                              <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/cursor\">https://developer.mozilla.org/en-US/docs/Web/CSS/cursor</a></p>\n","type":"String|Constant"},{"name":"x","description":"<p>the horizontal active spot of the cursor (must be less than 32)</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>the vertical active spot of the cursor (must be less than 32)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\n// Move the mouse across the quadrants\n// to see the cursor change\nfunction draw() {\n  line(width / 2, 0, width / 2, height);\n  line(0, height / 2, width, height / 2);\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</code></div>"],"alt":"canvas is divided into four quadrants. cursor on first is a cross, second is a progress,\nthird is a custom cursor using path to the cursor and fourth is a grab.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":228,"description":"<p>Specifies the number of frames to be displayed every second. For example,\nthe function call frameRate(30) will attempt to refresh 30 times a second.\nIf the processor is not fast enough to maintain the specified rate, the\nframe rate will not be achieved. Setting the frame rate within \n<a href=\"#/p5/setup\">setup()</a> is recommended. The default frame rate is\nbased on the frame rate of the display (here also called \"refresh rate\"), \nwhich is set to 60 frames per second on most computers. A frame rate of 24\nframes per second (usual for movies) or above will be enough for smooth \nanimations. This is the same as setFrameRate(val).</p>\n<p>Calling <a href=\"#/p5/frameRate\">frameRate()</a> with no arguments returns\nthe current framerate. The draw function must run at least once before it will\nreturn a value. This is the same as <a href=\"#/p5/getFrameRate\">getFrameRate()</a>.</p>\n<p>Calling <a href=\"#/p5/frameRate\">frameRate()</a> with arguments that are not\nof the type numbers or are non positive also returns current framerate.</p>\n","itemtype":"method","name":"frameRate","chainable":1,"example":["\n\n<div><code>\nlet rectX = 0;\nlet fr = 30; //starting FPS\nlet clr;\n\nfunction setup() {\n  background(200);\n  frameRate(fr); // Attempt to refresh at starting FPS\n  clr = color(255, 0, 0);\n}\n\nfunction draw() {\n  background(200);\n  rectX = rectX += 1; // Move Rectangle\n\n  if (rectX >= width) {\n   // If you go off screen.\n    if (fr === 30) {\n      clr = color(0, 0, 255);\n      fr = 10;\n      frameRate(fr); // make frameRate 10 FPS\n    } else {\n      clr = color(255, 0, 0);\n      fr = 30;\n      frameRate(fr); // make frameRate 30 FPS\n    }\n    rectX = 0;\n  }\n  fill(clr);\n  rect(rectX, 40, 20, 20);\n}\n</code></div>"],"alt":"blue rect moves left to right, followed by red rect moving faster. Loops.","class":"p5","module":"Environment","submodule":"Environment","overloads":[{"line":228,"params":[{"name":"fps","description":"<p>number of frames to be displayed every second</p>\n","type":"Number"}],"chainable":1},{"line":288,"params":[],"return":{"description":"current frameRate","type":"Number"}}]},{"file":"src/core/environment.js","line":331,"description":"<p>Hides the cursor from view.</p>\n","itemtype":"method","name":"noCursor","example":["\n<div><code>\nfunction setup() {\n  noCursor();\n}\n\nfunction draw() {\n  background(200);\n  ellipse(mouseX, mouseY, 10, 10);\n}\n</code></div>"],"alt":"cursor becomes 10x 10 white ellipse the moves with mouse x and y.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":354,"description":"<p>System variable that stores the width of the screen display according to The\ndefault <a href=\"#/p5/pixelDensity\">pixelDensity</a>. This is used to run a\nfull-screen program on any display size. To return actual screen size,\nmultiply this by pixelDensity.</p>\n","itemtype":"property","name":"displayWidth","type":"Number","readonly":"","example":["\n<div class=\"norender\"><code>\ncreateCanvas(displayWidth, displayHeight);\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":372,"description":"<p>System variable that stores the height of the screen display according to The\ndefault <a href=\"#/p5/pixelDensity\">pixelDensity</a>. This is used to run a\nfull-screen program on any display size. To return actual screen size,\nmultiply this by pixelDensity.</p>\n","itemtype":"property","name":"displayHeight","type":"Number","readonly":"","example":["\n<div class=\"norender\"><code>\ncreateCanvas(displayWidth, displayHeight);\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":390,"description":"<p>System variable that stores the width of the inner window, it maps to\nwindow.innerWidth.</p>\n","itemtype":"property","name":"windowWidth","type":"Number","readonly":"","example":["\n<div class=\"norender\"><code>\ncreateCanvas(windowWidth, windowHeight);\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":405,"description":"<p>System variable that stores the height of the inner window, it maps to\nwindow.innerHeight.</p>\n","itemtype":"property","name":"windowHeight","type":"Number","readonly":"","example":["\n<div class=\"norender\"><code>\ncreateCanvas(windowWidth, windowHeight);\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":421,"description":"<p>The <a href=\"#/p5/windowResized\">windowResized()</a> function is called once\nevery time the browser window is resized. This is a good place to resize the\ncanvas or do any other adjustments to accommodate the new window size.</p>\n","itemtype":"method","name":"windowResized","params":[{"name":"event","description":"<p>optional Event callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div class=\"norender\"><code>\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</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":476,"description":"<p>System variable that stores the width of the drawing canvas. This value\nis set by the first parameter of the <a href=\"#/p5/createCanvas\">createCanvas()</a> function.\nFor example, the function call createCanvas(320, 240) sets the width\nvariable to the value 320. The value of width defaults to 100 if\n<a href=\"#/p5/createCanvas\">createCanvas()</a> is not used in a program.</p>\n","itemtype":"property","name":"width","type":"Number","readonly":"","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":488,"description":"<p>System variable that stores the height of the drawing canvas. This value\nis set by the second parameter of the <a href=\"#/p5/createCanvas\">createCanvas()</a> function. For\nexample, the function call createCanvas(320, 240) sets the height\nvariable to the value 240. The value of height defaults to 100 if\n<a href=\"#/p5/createCanvas\">createCanvas()</a> is not used in a program.</p>\n","itemtype":"property","name":"height","type":"Number","readonly":"","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":500,"description":"<p>If argument is given, sets the sketch to fullscreen or not based on the\nvalue of the argument. If no argument is given, returns the current\nfullscreen state. Note that due to browser restrictions this can only\nbe called on user input, for example, on mouse press like the example\nbelow.</p>\n","itemtype":"method","name":"fullscreen","params":[{"name":"val","description":"<p>whether the sketch should be in fullscreen mode\nor not</p>\n","type":"Boolean","optional":true}],"return":{"description":"current fullscreen state","type":"Boolean"},"example":["\n<div>\n<code>\n// Clicking in the box toggles fullscreen on and off.\nfunction setup() {\n  background(200);\n}\nfunction mousePressed() {\n  if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n    let fs = fullscreen();\n    fullscreen(!fs);\n  }\n}\n</code>\n</div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":550,"description":"<p>Sets the pixel scaling for high pixel density displays. By default\npixel density is set to match display density, call pixelDensity(1)\nto turn this off. Calling <a href=\"#/p5/pixelDensity\">pixelDensity()</a> with no arguments returns\nthe current pixel density of the sketch.</p>\n","itemtype":"method","name":"pixelDensity","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  pixelDensity(1);\n  createCanvas(100, 100);\n  background(200);\n  ellipse(width / 2, height / 2, 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  pixelDensity(3.0);\n  createCanvas(100, 100);\n  background(200);\n  ellipse(width / 2, height / 2, 50, 50);\n}\n</code>\n</div>"],"alt":"fuzzy 50x50 white ellipse with black outline in center of canvas.\nsharp 50x50 white ellipse with black outline in center of canvas.","class":"p5","module":"Environment","submodule":"Environment","overloads":[{"line":550,"params":[{"name":"val","description":"<p>whether or how much the sketch should scale</p>\n","type":"Number"}],"chainable":1},{"line":586,"params":[],"return":{"description":"current pixel density of the sketch","type":"Number"}}]},{"file":"src/core/environment.js","line":605,"description":"<p>Returns the pixel density of the current display the sketch is running on.</p>\n","itemtype":"method","name":"displayDensity","return":{"description":"current pixel density of the display","type":"Number"},"example":["\n<div>\n<code>\nfunction setup() {\n  let density = displayDensity();\n  pixelDensity(density);\n  createCanvas(100, 100);\n  background(200);\n  ellipse(width / 2, height / 2, 50, 50);\n}\n</code>\n</div>"],"alt":"50x50 white ellipse with black outline in center of canvas.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":660,"description":"<p>Gets the current URL. Note: when using the\np5 Editor, this will return an empty object because the sketch\nis embedded in an iframe. It will work correctly if you view the\nsketch using sketch the edtior's present or share URLs.</p>\n","itemtype":"method","name":"getURL","return":{"description":"url","type":"String"},"example":["\n<div>\n<code>\nlet url;\nlet x = 100;\n\nfunction setup() {\n  fill(0);\n  noStroke();\n  url = getURL();\n}\n\nfunction draw() {\n  background(200);\n  text(url, x, height / 2);\n  x--;\n}\n</code>\n</div>"],"alt":"current url (http://p5js.org/reference/#/p5/getURL) moves right to left.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":691,"description":"<p>Gets the current URL path as an array. Note: when using the\np5 Editor, this will return an empty object because the sketch\nis embedded in an iframe. It will work correctly if you view the\nsketch using sketch the edtior's present or share URLs.</p>\n","itemtype":"method","name":"getURLPath","return":{"description":"path components","type":"String[]"},"example":["\n<div class='norender'><code>\nfunction setup() {\n  let urlPath = getURLPath();\n  for (let i = 0; i < urlPath.length; i++) {\n    text(urlPath[i], 10, i * 20 + 20);\n  }\n}\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":713,"description":"<p>Gets the current URL params as an Object. Note: when using the\np5 Editor, this will return an empty object because the sketch\nis embedded in an iframe. It will work correctly if you view the\nsketch using sketch the edtior's present or share URLs.</p>\n","itemtype":"method","name":"getURLParams","return":{"description":"URL params","type":"Object"},"example":["\n<div class='norender notest'>\n<code>\n// Example: http://p5js.org?year=2014&month=May&day=15\n\nfunction setup() {\n  let params = getURLParams();\n  text(params.day, 10, 20);\n  text(params.month, 10, 40);\n  text(params.year, 10, 60);\n}\n</code>\n</div>"],"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":"<p>This is our i18next \"backend\" plugin. It tries to fetch languages\nfrom a CDN.</p>\n","class":"p5","module":"Environment"},{"file":"src/core/internationalization.js","line":126,"description":"<p>Set up our translation function, with loaded languages</p>\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":42,"description":"<p>Called directly before <a href=\"#/p5/setup\">setup()</a>, the <a href=\"#/p5/preload\">preload()</a> function is used to handle\nasynchronous loading of external files in a blocking way. If a preload\nfunction is defined, <a href=\"#/p5/setup\">setup()</a> will wait until any load calls within have\nfinished. Nothing besides load calls (<a href=\"#/p5/loadImage\">loadImage</a>, <a href=\"#/p5/loadJSON\">loadJSON</a>, <a href=\"#/p5/loadFont\">loadFont</a>,\n<a href=\"#/p5/loadStrings\">loadStrings</a>, etc.) should be inside the preload function. If asynchronous\nloading is preferred, the load methods can instead be called in <a href=\"#/p5/setup\">setup()</a>\nor anywhere else with the use of a callback parameter.</p>\n<p>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 <a href=\"http://bit.ly/2kQ6Nio\">here</a>.</p>\n","itemtype":"method","name":"preload","example":["\n<div><code>\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</code></div>"],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":83,"description":"<p>The <a href=\"#/p5/setup\">setup()</a> 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 <a href=\"#/p5/setup\">setup()</a> function for each program and it shouldn't\nbe called again after its initial execution.</p>\n<p>Note: Variables declared within <a href=\"#/p5/setup\">setup()</a> are not accessible within other\nfunctions, including <a href=\"#/p5/draw\">draw()</a>.</p>\n","itemtype":"method","name":"setup","example":["\n<div><code>\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</code></div>"],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":114,"description":"<p>Called directly after <a href=\"#/p5/setup\">setup()</a>, the <a href=\"#/p5/draw\">draw()</a> function continuously executes\nthe lines of code contained inside its block until the program is stopped\nor <a href=\"#/p5/noLoop\">noLoop()</a> is called. Note if <a href=\"#/p5/noLoop\">noLoop()</a> is called in <a href=\"#/p5/setup\">setup()</a>, <a href=\"#/p5/draw\">draw()</a> will\nstill be executed once before stopping. <a href=\"#/p5/draw\">draw()</a> is called automatically and\nshould never be called explicitly.</p>\n<p>It should always be controlled with <a href=\"#/p5/noLoop\">noLoop()</a>, <a href=\"#/p5/redraw\">redraw()</a> and <a href=\"#/p5/loop\">loop()</a>. After\n<a href=\"#/p5/noLoop\">noLoop()</a> stops the code in <a href=\"#/p5/draw\">draw()</a> from executing, <a href=\"#/p5/redraw\">redraw()</a> causes the\ncode inside <a href=\"#/p5/draw\">draw()</a> to execute once, and <a href=\"#/p5/loop\">loop()</a> will cause the code\ninside <a href=\"#/p5/draw\">draw()</a> to resume executing continuously.</p>\n<p>The number of times <a href=\"#/p5/draw\">draw()</a> executes in each second may be controlled with\nthe <a href=\"#/p5/frameRate\">frameRate()</a> function.</p>\n<p>There can only be one <a href=\"#/p5/draw\">draw()</a> function for each sketch, and <a href=\"#/p5/draw\">draw()</a> must\nexist if you want the code to run continuously, or to process events such\nas <a href=\"#/p5/mousePressed\">mousePressed()</a>. Sometimes, you might have an empty call to <a href=\"#/p5/draw\">draw()</a> in\nyour program, as shown in the above example.</p>\n<p>It is important to note that the drawing coordinate system will be reset\nat the beginning of each <a href=\"#/p5/draw\">draw()</a> call. If any transformations are performed\nwithin <a href=\"#/p5/draw\">draw()</a> (ex: scale, rotate, translate), their effects will be\nundone at the beginning of <a href=\"#/p5/draw\">draw()</a>, so transformations will not accumulate\nover time. On the other hand, styling applied (ex: fill, stroke, etc) will\nremain in effect.</p>\n","itemtype":"method","name":"draw","example":["\n<div><code>\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</code></div>"],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":415,"description":"<p>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.</p>\n","itemtype":"method","name":"remove","example":["\n<div class='norender'><code>\nfunction draw() {\n  ellipse(50, 50, 10, 10);\n}\n\nfunction mousePressed() {\n  remove(); // remove whole sketch on mouse press\n}\n</code></div>"],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":694,"description":"<p>Allows for the friendly error system (FES) to be turned off when creating a sketch,\nwhich can give a significant boost to performance when needed.\nSee <a href='https://github.com/processing/p5.js/wiki/Optimizing-p5.js-Code-for-Performance#disable-the-friendly-error-system-fes'>\ndisabling the friendly error system</a>.</p>\n","itemtype":"property","name":"disableFriendlyErrors","type":"Boolean","example":["\n<div class=\"norender notest\"><code>\np5.disableFriendlyErrors = true;\n\nfunction setup() {\n  createCanvas(100, 50);\n}\n</code></div>"],"class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/p5.Element.js","line":21,"description":"<p>Underlying HTML element. All normal HTML methods can be called on this.</p>\n","example":["\n<div>\n<code>\nfunction setup() {\n  let c = createCanvas(50, 50);\n  c.elt.style.border = '5px solid red';\n}\n\nfunction draw() {\n  background(220);\n}\n</code>\n</div>"],"itemtype":"property","name":"elt","readonly":"","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":47,"description":"<p>Attaches the element to the parent specified. A way of setting\n the container for the element. Accepts either a string ID, DOM\n node, or <a href=\"#/p5.Element\">p5.Element</a>. If no arguments given, parent node is returned.\n For more ways to position the canvas, see the\n <a href='https://github.com/processing/p5.js/wiki/Positioning-your-canvas'>\n positioning the canvas</a> wiki page.</p>\n","itemtype":"method","name":"parent","chainable":1,"example":["\n <div class=\"norender notest\"><code>\n // Add the following comment to html file.\n // &lt;div id=\"myContainer\">&lt;/div>\n// The js code\n let cnv = createCanvas(100, 100);\n cnv.parent('myContainer');\n </code></div>\n<div class='norender'><code>\n let div0 = createDiv('this is the parent');\n let div1 = createDiv('this is the child');\n div1.parent(div0); // use p5.Element\n </code></div>\n<div class='norender'><code>\n let div0 = createDiv('this is the parent');\n div0.id('apples');\n let div1 = createDiv('this is the child');\n div1.parent('apples'); // use id\n </code></div>\n<div class='norender notest'><code>\n let elt = document.getElementById('myParentDiv');\n let div1 = createDiv('this is the child');\n div1.parent(elt); // use element from page\n </code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":47,"params":[{"name":"parent","description":"<p>the ID, DOM node, or <a href=\"#/p5.Element\">p5.Element</a>\n                         of desired parent element</p>\n","type":"String|p5.Element|Object"}],"chainable":1},{"line":93,"params":[],"return":{"description":"","type":"p5.Element"}}]},{"file":"src/core/p5.Element.js","line":114,"description":"<p>Sets the ID of the element. If no ID argument is passed in, it instead\n returns the current ID of the element.\n Note that only one element can have a particular id in a page.\n The <a href=\"#/p5.Element/class\">.class()</a> function can be used\n to identify multiple elements with the same class name.</p>\n","itemtype":"method","name":"id","chainable":1,"example":["\n <div class='norender'><code>\n function setup() {\n   let cnv = createCanvas(100, 100);\n   // Assigns a CSS selector ID to\n   // the canvas element.\n   cnv.id('mycanvas');\n }\n </code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":114,"params":[{"name":"id","description":"<p>ID of the element</p>\n","type":"String"}],"chainable":1},{"line":139,"params":[],"return":{"description":"the id of the element","type":"String"}}]},{"file":"src/core/p5.Element.js","line":154,"description":"<p>Adds given class to the element. If no class argument is passed in, it\n instead returns a string containing the current class(es) of the element.</p>\n","itemtype":"method","name":"class","chainable":1,"example":["\n <div class='norender'><code>\n function setup() {\n   let cnv = createCanvas(100, 100);\n   // Assigns a CSS selector class 'small'\n   // to the canvas element.\n   cnv.class('small');\n }\n </code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":154,"params":[{"name":"class","description":"<p>class to add</p>\n","type":"String"}],"chainable":1},{"line":176,"params":[],"return":{"description":"the class of the element","type":"String"}}]},{"file":"src/core/p5.Element.js","line":189,"description":"<p>The .<a href=\"#/p5.Element/mousePressed\">mousePressed()</a> function is called\nonce after every time a mouse button is pressed over the element. Some mobile\nbrowsers may also trigger this event on a touch screen, if the user performs\na quick tap. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"mousePressed","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               pressed over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mousePressed(changeGray); // attach listener for\n  // canvas click only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any click anywhere\nfunction mousePressed() {\n  d = d + 10;\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":246,"description":"<p>The .<a href=\"#/p5.Element/doubleClicked\">doubleClicked()</a> function is called once after every time a\nmouse button is pressed twice over the element. This can be used to\nattach element and action specific event listeners.</p>\n","itemtype":"method","name":"doubleClicked","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               double clicked over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"return":{"description":"","type":"p5.Element"},"example":["\n<div class='norender'><code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.doubleClicked(changeGray); // attach listener for\n  // canvas double click only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any double click anywhere\nfunction doubleClicked() {\n  d = d + 10;\n}\n\n// this function fires only when cnv is double clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":292,"description":"<p>The <a href=\"#/p5.Element/mouseWheel\">mouseWheel()</a> function is called\nonce after every time a mouse wheel is scrolled over the element. This can\nbe used to attach element specific event listeners.</p>\n<p>The function accepts a callback function as argument which will be executed\nwhen the <code>wheel</code> event is triggered on the element, the callback function is\npassed one argument <code>event</code>. The <code>event.deltaY</code> property returns negative\nvalues if the mouse wheel is rotated up or away from the user and positive\nin the other direction. The <code>event.deltaX</code> does the same as <code>event.deltaY</code>\nexcept it reads the horizontal wheel scroll of the mouse wheel.</p>\n<p>On OS X with \"natural\" scrolling enabled, the <code>event.deltaY</code> values are\nreversed.</p>\n","itemtype":"method","name":"mouseWheel","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               scrolled over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseWheel(changeSize); // attach listener for\n  // activity on canvas only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with mousewheel movement\n// anywhere on screen\nfunction mouseWheel() {\n  g = g + 10;\n}\n\n// this function fires with mousewheel movement\n// over canvas only\nfunction changeSize(event) {\n  if (event.deltaY > 0) {\n    d = d + 10;\n  } else {\n    d = d - 10;\n  }\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":354,"description":"<p>The <a href=\"#/p5.Element/mouseReleased\">mouseReleased()</a> function is\ncalled once after every time a mouse button is released over the element.\nSome mobile browsers may also trigger this event on a touch screen, if the\nuser performs a quick tap. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"mouseReleased","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               released over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseReleased(changeGray); // attach listener for\n  // activity on canvas only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires after the mouse has been\n// released\nfunction mouseReleased() {\n  d = d + 10;\n}\n\n// this function fires after the mouse has been\n// released while on canvas\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":403,"description":"<p>The .<a href=\"#/p5.Element/mouseClicked\">mouseClicked()</a> function is\ncalled once after a mouse button is pressed and released over the element.\nSome mobile browsers may also trigger this event on a touch screen, if the\nuser performs a quick tap.This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"mouseClicked","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               clicked over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseClicked(changeGray); // attach listener for\n  // activity on canvas only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires after the mouse has been\n// clicked anywhere\nfunction mouseClicked() {\n  d = d + 10;\n}\n\n// this function fires after the mouse has been\n// clicked on canvas\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code>\n</div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":454,"description":"<p>The .<a href=\"#/p5.Element/mouseMoved\">mouseMoved()</a> function is called once every time a\nmouse moves over the element. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"mouseMoved","params":[{"name":"fxn","description":"<p>function to be fired when a mouse moves\n                               over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d = 30;\nlet g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseMoved(changeSize); // attach listener for\n  // activity on canvas only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  fill(200);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires when mouse moves anywhere on\n// page\nfunction mouseMoved() {\n  g = g + 5;\n  if (g > 255) {\n    g = 0;\n  }\n}\n\n// this function fires when mouse moves over canvas\nfunction changeSize() {\n  d = d + 2;\n  if (d > 100) {\n    d = 0;\n  }\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":510,"description":"<p>The .<a href=\"#/p5.Element/mouseOver\">mouseOver()</a> function is called once after every time a\nmouse moves onto the element. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"mouseOver","params":[{"name":"fxn","description":"<p>function to be fired when a mouse moves\n                               onto the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseOver(changeGray);\n  d = 10;\n}\n\nfunction draw() {\n  ellipse(width / 2, height / 2, d, d);\n}\n\nfunction changeGray() {\n  d = d + 10;\n  if (d > 100) {\n    d = 0;\n  }\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":551,"description":"<p>The .<a href=\"#/p5.Element/mouseOut\">mouseOut()</a> function is called once after every time a\nmouse moves off the element. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"mouseOut","params":[{"name":"fxn","description":"<p>function to be fired when a mouse\n                               moves off of an element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseOut(changeGray);\n  d = 10;\n}\n\nfunction draw() {\n  ellipse(width / 2, height / 2, d, d);\n}\n\nfunction changeGray() {\n  d = d + 10;\n  if (d > 100) {\n    d = 0;\n  }\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":592,"description":"<p>The .<a href=\"#/p5.Element/touchStarted\">touchStarted()</a> function is called once after every time a touch is\nregistered. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"touchStarted","params":[{"name":"fxn","description":"<p>function to be fired when a touch\n                               starts over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d;\nlet g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.touchStarted(changeGray); // attach listener for\n  // canvas click only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any touch anywhere\nfunction touchStarted() {\n  d = d + 10;\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":639,"description":"<p>The .<a href=\"#/p5.Element/touchMoved\">touchMoved()</a> function is called once after every time a touch move is\nregistered. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"touchMoved","params":[{"name":"fxn","description":"<p>function to be fired when a touch moves over\n                               the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.touchMoved(changeGray); // attach listener for\n  // canvas click only\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":678,"description":"<p>The .<a href=\"#/p5.Element/touchEnded\">touchEnded()</a> function is called once after every time a touch is\nregistered. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"touchEnded","params":[{"name":"fxn","description":"<p>function to be fired when a touch ends\n                               over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d;\nlet g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.touchEnded(changeGray); // attach listener for\n  // canvas click only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any touch anywhere\nfunction touchEnded() {\n  d = d + 10;\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":725,"description":"<p>The .<a href=\"#/p5.Element/dragOver\">dragOver()</a> function is called once after every time a\nfile is dragged over the element. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"dragOver","params":[{"name":"fxn","description":"<p>function to be fired when a file is\n                               dragged over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div><code>\n// To test this sketch, simply drag a\n// file over the canvas\nfunction setup() {\n  let c = createCanvas(100, 100);\n  background(200);\n  textAlign(CENTER);\n  text('Drag file', width / 2, height / 2);\n  c.dragOver(dragOverCallback);\n}\n\n// This function will be called whenever\n// a file is dragged over the canvas\nfunction dragOverCallback() {\n  background(240);\n  text('Dragged over', width / 2, height / 2);\n}\n</code></div>"],"alt":"nothing displayed","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":763,"description":"<p>The .dragLeave() function is called once after every time a\ndragged file leaves the element area. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"dragLeave","params":[{"name":"fxn","description":"<p>function to be fired when a file is\n                               dragged off the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div><code>\n// To test this sketch, simply drag a file\n// over and then out of the canvas area\nfunction setup() {\n  let c = createCanvas(100, 100);\n  background(200);\n  textAlign(CENTER);\n  text('Drag file', width / 2, height / 2);\n  c.dragLeave(dragLeaveCallback);\n}\n\n// This function will be called whenever\n// a file is dragged out of the canvas\nfunction dragLeaveCallback() {\n  background(240);\n  text('Dragged off', width / 2, height / 2);\n}\n</code></div>"],"alt":"nothing displayed","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":827,"description":"<p>Helper fxn for sharing pixel methods</p>\n","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Graphics.js","line":70,"description":"<p>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 <a href='#/p5/draw'>draw()</a> will copy the behavior\nof the standard canvas.</p>\n","itemtype":"method","name":"reset","example":["\n\n<div><code>\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</code></div>"],"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":122,"description":"<p>Removes a Graphics object from the page and frees any resources\nassociated with it.</p>\n","itemtype":"method","name":"remove","example":["\n<div class='norender'><code>\nlet bg;\nfunction setup() {\n  bg = createCanvas(100, 100);\n  bg.background(0);\n  image(bg, 0, 0);\n  bg.remove();\n}\n</code></div>\n\n<div><code>\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</code></div>"],"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.Renderer.js","line":95,"description":"<p>Resize our canvas element.</p>\n","class":"p5.Renderer","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Renderer.js","line":344,"description":"<p>Helper fxn to check font type (system or otf)</p>\n","class":"p5.Renderer","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Renderer.js","line":396,"description":"<p>Helper fxn to measure ascent and descent.\nAdapted from <a href=\"http://stackoverflow.com/a/25355178\">http://stackoverflow.com/a/25355178</a></p>\n","class":"p5.Renderer","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Renderer2D.js","line":7,"description":"<p>p5.Renderer2D\nThe 2D graphics canvas renderer class.\nextends p5.Renderer</p>\n","class":"p5","module":"Rendering"},{"file":"src/core/p5.Renderer2D.js","line":402,"description":"<p>Generate a cubic Bezier representing an arc on the unit circle of total\nangle <code>size</code> radians, beginning <code>start</code> radians above the x-axis. Up to\nfour of these curves are combined to make a full arc.</p>\n<p>See <a href=\"http://www.joecridge.me/bezier.pdf\">www.joecridge.me/bezier.pdf</a> for an explanation of the method.</p>\n","class":"p5","module":"Rendering"},{"file":"src/core/reference.js","line":7,"description":"<p>Creates and names a new variable. A variable is a container for a value.</p>\n<p>Variables that are declared with <a href=\"#/p5/let\">let</a> will have block-scope.\nThis means that the variable only exists within the\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block\">\nblock</a> that it is created within.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let\">the MDN entry</a>:\nDeclares a block scope local variable, optionally initializing it to a value.</p>\n","itemtype":"property","name":"let","example":["\n<div class='norender'>\n<code>\nlet x = 2;\nconsole.log(x); // prints 2 to the console\nx = 1;\nconsole.log(x); // prints 1 to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":34,"description":"<p>Creates and names a new constant. Like a variable created with <a href=\"#/p5/let\">let</a>,\na constant that is created with <a href=\"#/p5/const\">const</a> 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 <code>let</code>, you cannot declare variables without value\nusing const.</p>\n<p>Constants have block-scope. This means that the constant only exists within\nthe <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block\">\nblock</a> that it is created within. A constant cannot be redeclared within a scope in which it\nalready exists.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const\">the MDN entry</a>:\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.</p>\n","itemtype":"property","name":"const","example":["\n<div class='norender'>\n<code>\n// define myFavNumber as a constant and give it the value 7\nconst myFavNumber = 7;\nconsole.log('my favorite number is: ' + myFavNumber);\n</code>\n</div>\n\n<div class='norender'>\n<code>\nconst bigCats = ['lion', 'tiger', 'panther'];\nbigCats.push('leopard');\nconsole.log(bigCats);\n// bigCats = ['cat']; // throws error as re-assigning not allowed for const\n</code>\n</div>\n\n<div class='norender'>\n<code>\nconst wordFrequency = {};\nwordFrequency['hello'] = 2;\nwordFrequency['bye'] = 1;\nconsole.log(wordFrequency);\n// wordFrequency = { 'a': 2, 'b': 3}; // throws error here\n</code>\n</div>"],"alt":"These examples do not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":87,"description":"<p>The strict equality operator <a href=\"#/p5/===\">===</a>\nchecks to see if two values are equal and of the same type.</p>\n<p>A comparison expression always evaluates to a <a href=\"#/p5/boolean\">boolean</a>.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">the MDN entry</a>:\nThe non-identity operator returns true if the operands are not equal and/or not of the same type.</p>\n<p>Note: In some examples around the web you may see a double-equals-sign\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality\">==</a>,\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.</p>\n","itemtype":"property","name":"===","example":["\n<div class='norender'>\n<code>\nconsole.log(1 === 1); // prints true to the console\nconsole.log(1 === '1'); // prints false to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":115,"description":"<p>The greater than operator <a href=\"#/p5/>\">></a>\nevaluates to true if the left value is greater than\nthe right value.</p>\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">\nThere is more info on comparison operators on MDN.</a>","itemtype":"property","name":">","example":["\n<div class='norender'>\n<code>\nconsole.log(100 > 1); // prints true to the console\nconsole.log(1 > 100); // prints false to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":137,"description":"<p>The greater than or equal to operator <a href=\"#/p5/>=\">>=</a>\nevaluates to true if the left value is greater than or equal to\nthe right value.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">There is more info on comparison operators on MDN.</a></p>\n","itemtype":"property","name":">=","example":["\n<div class='norender'>\n<code>\nconsole.log(100 >= 100); // prints true to the console\nconsole.log(101 >= 100); // prints true to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":158,"description":"<p>The less than operator <a href=\"#/p5/<\"><</a>\nevaluates to true if the left value is less than\nthe right value.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">There is more info on comparison operators on MDN.</a></p>\n","itemtype":"property","name":"<","example":["\n<div class='norender'>\n<code>\nconsole.log(1 < 100); // prints true to the console\nconsole.log(100 < 99); // prints false to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":179,"description":"<p>The less than or equal to operator <a href=\"#/p5/<=\"><=</a>\nevaluates to true if the left value is less than or equal to\nthe right value.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">There is more info on comparison operators on MDN.</a></p>\n","itemtype":"property","name":"<=","example":["\n<div class='norender'>\n<code>\nconsole.log(100 <= 100); // prints true to the console\nconsole.log(99 <= 100); // prints true to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":200,"description":"<p>The <a href=\"#/p5/if-else\">if-else</a> statement helps control the flow of your code.</p>\n<p>A condition is placed between the parenthesis following 'if',\nwhen that condition evalues to <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/truthy\">truthy</a>,\nthe code between the following curly braces is run.\nAlternatively, when the condition evaluates to <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Falsy\">falsy</a>,\nthe code between the curly braces of 'else' block is run instead. Writing an\nelse block is optional.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else\">the MDN entry</a>:\nThe 'if' statement executes a statement if a specified condition is truthy.\nIf the condition is falsy, another statement can be executed</p>\n","itemtype":"property","name":"if-else","example":["\n<div class='norender'>\n<code>\nlet a = 4;\nif (a > 0) {\n  console.log('positive');\n} else {\n  console.log('negative');\n}\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":231,"description":"<p>Creates and names a <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions\">function</a>.\nA <a href=\"#/p5/function\">function</a> is a set of statements that perform a task.</p>\n<p>Optionally, functions can have parameters. <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Parameter\">Parameters</a>\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.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function\">the MDN entry</a>:\nDeclares a function with the specified parameters.</p>\n","itemtype":"property","name":"function","example":["\n<div class='norender'>\n<code>\nlet myName = 'Hridi';\nfunction sayHello(name) {\n  console.log('Hello ' + name + '!');\n}\nsayHello(myName); // calling the function, prints \"Hello Hridi!\" to console.\n</code>\n</div>\n\n<div class='norender'>\n<code>\nlet square = number => number * number;\nconsole.log(square(5));\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":267,"description":"<p>Specifies the value to be returned by a function.\nFor more info checkout <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return\">\nthe MDN entry for return</a>.</p>\n","itemtype":"property","name":"return","example":["\n<div class='norender'>\n<code>\nfunction calculateSquare(x) {\n  return x * x;\n}\nconst result = calculateSquare(4); // returns 16\nconsole.log(result); // prints '16' to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":288,"description":"<p>A <a href=\"#/p5/boolean\">boolean</a> is one of the 7 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Primitive_values\">primitive data types</a> in Javascript.\nA boolean can only be <code>true</code> or <code>false</code>.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type\">the MDN entry</a>:\nBoolean represents a logical entity and can have two values: true, and false.</p>\n","itemtype":"property","name":"boolean","example":["\n<div class='norender'>\n<code>\nlet myBoolean = false;\nconsole.log(typeof myBoolean); // prints 'boolean' to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":309,"description":"<p>A <a href=\"#/p5/string\">string</a> is one of the 7 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Primitive_values\">primitive data types</a> 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(\").</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/string\">the MDN entry</a>:\nA string is a sequence of characters used to represent text.</p>\n","itemtype":"property","name":"string","example":["\n<div class='norender'>\n<code>\nlet mood = 'chill';\nconsole.log(typeof mood); // prints 'string' to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":331,"description":"<p>A <a href=\"#/p5/number\">number</a> is one of the 7 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Primitive_values\">primitive data types</a> in Javascript.\nA number can be a whole number or a decimal number.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Glossary/number\">The MDN entry for number</a></p>\n","itemtype":"property","name":"number","example":["\n<div class='norender'>\n<code>\nlet num = 46.5;\nconsole.log(typeof num); // prints 'number' to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":351,"description":"<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics\">MDN's object basics</a>:\n An <a href=\"#/p5/object\">object</a> 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.)</p>\n","itemtype":"property","name":"object","example":["\n <div class='norender'>\n <code>\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 </code>\n </div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":379,"description":"<p>Creates and names a <a href=\"#/p5/class\">class</a> which is a template for\nthe creation of <a href=\"#/p5/objects\">objects</a>.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class\">the MDN entry</a>:\nThe class declaration creates a new Class with a given name using\nprototype-based inheritance.</p>\n","itemtype":"property","name":"class","example":["\n<div class='norender'>\n<code>\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</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":408,"description":"<p><a href=\"#/p5/for\">for</a> creates a loop that is useful for executing one\nsection of code multiple times.</p>\n<p>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 seperated by ; (semi-colon).In case of an empty expression,\nonly a semi-colon is written.</p>\n<p>The code inside of the loop body (in between the curly braces) is executed between the evaluation of the second\nand third expression.</p>\n<p>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 <a href=\"#/p5/for\">for</a> 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.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for\">the MDN entry</a>:\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.</p>\n","itemtype":"property","name":"for","example":["\n<div class='norender'>\n<code>\nfor (let i = 0; i < 9; i++) {\n  console.log(i);\n}\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":448,"description":"<p><a href=\"#/p5/while\">while</a> creates a loop that is useful for executing\none section of code multiple times.</p>\n<p>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 <a href=\"#/p5/while\">while</a>, so if the condition is initially false\nthe loop body, or statement, will never execute.</p>\n<p>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.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/while\">the MDN entry</a>:\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.</p>\n","itemtype":"property","name":"while","example":["\n<div class='norender'>\n<code>\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</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":490,"description":"<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify\">the MDN entry</a>:\nThe JSON.stringify() method converts a JavaScript object or value to a JSON <a href=\"#/p5/string\">string</a>.</p>\n","itemtype":"method","name":"stringify","static":1,"params":[{"name":"object","description":"<p>:Javascript object that you would like to convert to JSON</p>\n","type":"Object"}],"example":["\n<div class='norender'>\n<code>\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</code>\n</div>"],"alt":"This example does not render anything","class":"JSON","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":512,"description":"<p>Prints a message to your browser's web console. When using p5, you can use <a href=\"#/p5/print\">print</a>\nand <a href=\"#/p5/console/log\">console.log</a> interchangeably.</p>\n<p>The console is opened differently depending on which browser you are using.\nHere are links on how to open the console in <a href=\"https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Opening_the_Web_Console\">Firefox</a>\n, <a href=\"https://developers.google.com/web/tools/chrome-devtools/open\">Chrome</a>, <a href=\"https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/console\">Edge</a>,\nand <a href=\"https://support.apple.com/en-ca/guide/safari/sfri20948/mac\">Safari</a>.\nWith the <a href=\"https://editor.p5js.org/\">online p5 editor</a> the console\nis embedded directly in the page underneath the code editor.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Console/log\">the MDN entry</a>:\nThe Console method log() outputs a message to the web console. The message may\nbe a single <a href=\"#/p5/string\">string</a> (with optional substitution values),\nor it may be any one or more JavaScript <a href=\"#/p5/object\">objects</a>.</p>\n","itemtype":"method","name":"log","static":1,"params":[{"name":"message","description":"<p>:Message that you would like to print to the console</p>\n","type":"String|Expression|Object"}],"example":["\n<div class='norender'>\n<code>\nlet myNum = 5;\nconsole.log(myNum); // prints 5 to the console\nconsole.log(myNum + 12); // prints 17 to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"console","module":"Foundation","submodule":"Foundation"},{"file":"src/core/rendering.js","line":15,"description":"<p>Creates a canvas element in the document, and sets the dimensions of it\nin pixels. This method should be called only once at the start of setup.\nCalling <a href=\"#/p5/createCanvas\">createCanvas</a> more than once in a\nsketch will result in very unpredictable behavior. If you want more than\none drawing canvas you could use <a href=\"#/p5/createGraphics\">createGraphics</a>\n(hidden by default but it can be shown).</p>\n<p>Important note: in 2D mode (i.e. when <code>p5.Renderer</code> is not set) the origin (0,0)\nis positioned at the top left of the screen. In 3D mode (i.e. when <code>p5.Renderer</code>\nis set to <code>WEBGL</code>), the origin is positioned at the center of the canvas.\nSee <a href=\"https://github.com/processing/p5.js/issues/1545\">this issue</a> for more information.</p>\n<p>The system variables width and height are set by the parameters passed to this\nfunction. If <a href=\"#/p5/createCanvas\">createCanvas()</a> is not used, the\nwindow will be given a default size of 100x100 pixels.</p>\n<p>For more ways to position the canvas, see the\n<a href='https://github.com/processing/p5.js/wiki/Positioning-your-canvas'>\npositioning the canvas</a> wiki page.</p>\n","itemtype":"method","name":"createCanvas","params":[{"name":"w","description":"<p>width of the canvas</p>\n","type":"Number"},{"name":"h","description":"<p>height of the canvas</p>\n","type":"Number"},{"name":"renderer","description":"<p>either P2D or WEBGL</p>\n","type":"Constant","optional":true}],"return":{"description":"","type":"p5.Renderer"},"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 50);\n  background(153);\n  line(0, 0, width, height);\n}\n</code>\n</div>"],"alt":"Black line extending from top-left of canvas to bottom right.","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":125,"description":"<p>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.</p>\n","itemtype":"method","name":"resizeCanvas","params":[{"name":"w","description":"<p>width of the canvas</p>\n","type":"Number"},{"name":"h","description":"<p>height of the canvas</p>\n","type":"Number"},{"name":"noRedraw","description":"<p>don't redraw the canvas immediately</p>\n","type":"Boolean","optional":true}],"example":["\n<div class=\"norender\"><code>\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</code></div>"],"alt":"No image displayed.","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":183,"description":"<p>Removes the default canvas for a p5 sketch that doesn't require a canvas</p>\n","itemtype":"method","name":"noCanvas","example":["\n<div>\n<code>\nfunction setup() {\n  noCanvas();\n}\n</code>\n</div>"],"alt":"no image displayed","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":204,"description":"<p>Creates and returns a new p5.Renderer object. Use this class if you need\nto draw into an off-screen graphics buffer. The two parameters define the\nwidth and height in pixels.</p>\n","itemtype":"method","name":"createGraphics","params":[{"name":"w","description":"<p>width of the offscreen graphics buffer</p>\n","type":"Number"},{"name":"h","description":"<p>height of the offscreen graphics buffer</p>\n","type":"Number"},{"name":"renderer","description":"<p>either P2D or WEBGL\n                              undefined defaults to p2d</p>\n","type":"Constant","optional":true}],"return":{"description":"offscreen graphics buffer","type":"p5.Graphics"},"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"4 grey squares alternating light and dark grey. White quarter circle mid-left.","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":243,"description":"<p>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):</p>\n<ul>\n<li><code>BLEND</code> - linear interpolation of colours: C =\nA*factor + B. <b>This is the default blending mode.</b></li>\n<li><code>ADD</code> - sum of A and B</li>\n<li><code>DARKEST</code> - only the darkest colour succeeds: C =\nmin(A*factor, B).</li>\n<li><code>LIGHTEST</code> - only the lightest colour succeeds: C =\nmax(A*factor, B).</li>\n<li><code>DIFFERENCE</code> - subtract colors from underlying image.</li>\n<li><code>EXCLUSION</code> - similar to <code>DIFFERENCE</code>, but less\nextreme.</li>\n<li><code>MULTIPLY</code> - multiply the colors, result will always be\ndarker.</li>\n<li><code>SCREEN</code> - opposite multiply, uses inverse values of the\ncolors.</li>\n<li><code>REPLACE</code> - the pixels entirely replace the others and\ndon't utilize alpha (transparency) values.</li>\n<li><code>REMOVE</code> - removes pixels from B with the alpha strength of A.</li>\n<li><code>OVERLAY</code> - mix of <code>MULTIPLY</code> and <code>SCREEN\n</code>. Multiplies dark values, and screens light values. <em>(2D)</em></li>\n<li><code>HARD_LIGHT</code> - <code>SCREEN</code> when greater than 50%\ngray, <code>MULTIPLY</code> when lower. <em>(2D)</em></li>\n<li><code>SOFT_LIGHT</code> - mix of <code>DARKEST</code> and\n<code>LIGHTEST</code>. Works like <code>OVERLAY</code>, but not as harsh. <em>(2D)</em>\n</li>\n<li><code>DODGE</code> - lightens light tones and increases contrast,\nignores darks. <em>(2D)</em></li>\n<li><code>BURN</code> - darker areas are applied, increasing contrast,\nignores lights. <em>(2D)</em></li>\n<li><code>SUBTRACT</code> - remainder of A and B <em>(3D)</em></li>\n</ul>\n\n<p><em>(2D)</em> indicates that this blend mode <b>only</b> works in the 2D renderer.<br>\n<em>(3D)</em> indicates that this blend mode <b>only</b> works in the WEBGL renderer.</p>\n","itemtype":"method","name":"blendMode","params":[{"name":"mode","description":"<p>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</p>\n","type":"Constant"}],"example":["\n<div>\n<code>\nblendMode(LIGHTEST);\nstrokeWeight(30);\nstroke(80, 150, 255);\nline(25, 25, 75, 75);\nstroke(255, 50, 50);\nline(75, 25, 25, 75);\n</code>\n</div>\n\n<div>\n<code>\nblendMode(MULTIPLY);\nstrokeWeight(30);\nstroke(80, 150, 255);\nline(25, 25, 75, 75);\nstroke(255, 50, 50);\nline(75, 25, 25, 75);\n</code>\n</div>"],"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":326,"description":"<p>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 <code>drawingContext</code>, as in the example shown. This is\nthe equivalent of calling <code>canvas.getContext('2d');</code> or <code>canvas.getContext('webgl');</code>.\nSee this\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D\">\nreference for the native canvas API</a> for possible drawing functions you can call.</p>\n","itemtype":"property","name":"drawingContext","example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"white ellipse with shadow blur effect around edges","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/shim.js","line":18,"description":"<p>shim for Uint8ClampedArray.slice\n(allows arrayCopy to work with pixels[])\nwith thanks to <a href=\"http://halfpapstudios.com/blog/tag/html5-canvas/\">http://halfpapstudios.com/blog/tag/html5-canvas/</a>\nEnumerable set to false to protect for...in from\nUint8ClampedArray.prototype pollution.</p>\n","class":"p5","module":"Rendering"},{"file":"src/core/shim.js","line":39,"description":"<p>this is implementation of Object.assign() which is unavailable in\nIE11 and (non-Chrome) Android browsers.\nThe assign() method is used to copy the values of all enumerable\nown properties from one or more source objects to a target object.\nIt will return the target object.\nModified from <a href=\"https://github.com/ljharb/object.assign\">https://github.com/ljharb/object.assign</a></p>\n","class":"p5","module":"Rendering"},{"file":"src/core/structure.js","line":10,"description":"<p>Stops p5.js from continuously executing the code within <a href=\"#/p5/draw\">draw()</a>.\nIf <a href=\"#/p5/loop\">loop()</a> is called, the code in <a href=\"#/p5/draw\">draw()</a>\nbegins to run continuously again. If using <a href=\"#/p5/noLoop\">noLoop()</a>\nin <a href=\"#/p5/setup\">setup()</a>, it should be the last line inside the block.</p>\n<p>When <a href=\"#/p5/noLoop\">noLoop()</a> is used, it's not possible to manipulate\nor access the screen inside event handling functions such as\n<a href=\"#/p5/mousePressed\">mousePressed()</a> or\n<a href=\"#/p5/keyPressed\">keyPressed()</a>. Instead, use those functions to\ncall <a href=\"#/p5/redraw\">redraw()</a> or <a href=\"#/p5/loop\">loop()</a>,\nwhich will run <a href=\"#/p5/draw\">draw()</a>, which can update the screen\nproperly. This means that when <a href=\"#/p5/noLoop\">noLoop()</a> has been\ncalled, no drawing can happen, and functions like <a href=\"#/p5/saveFrames\">saveFrames()</a>\nor <a href=\"#/p5/loadPixels\">loadPixels()</a> may not be used.</p>\n<p>Note that if the sketch is resized, <a href=\"#/p5/redraw\">redraw()</a> will\nbe called to update the sketch, even after <a href=\"#/p5/noLoop\">noLoop()</a>\nhas been specified. Otherwise, the sketch would enter an odd state until\n<a href=\"#/p5/loop\">loop()</a> was called.</p>\n<p>Use <a href=\"#/p5/isLooping\">isLooping()</a> to check current state of loop().</p>\n","itemtype":"method","name":"noLoop","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n  background(200);\n  noLoop();\n}\n\nfunction draw() {\n  line(10, 10, 90, 90);\n}\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":83,"description":"<p>By default, p5.js loops through draw() continuously, executing the code within\nit. However, the <a href=\"#/p5/draw\">draw()</a> loop may be stopped by calling\n<a href=\"#/p5/noLoop\">noLoop()</a>. In that case, the <a href=\"#/p5/draw\">draw()</a>\nloop can be resumed with loop().</p>\n<p>Avoid calling loop() from inside setup().</p>\n<p>Use <a href=\"#/p5/isLooping\">isLooping()</a> to check current state of loop().</p>\n","itemtype":"method","name":"loop","example":["\n<div>\n<code>\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</code>\n</div>"],"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":134,"description":"<p>By default, p5.js loops through <a href=\"#/p5/draw\">draw()</a> continuously,\nexecuting the code within it. If the sketch is stopped with\n<a href=\"#/p5/noLoop\">noLoop()</a> or resumed with <a href=\"#/p5/loop\">loop()</a>,\nisLooping() returns the current state for use within custom event handlers.</p>\n","itemtype":"method","name":"isLooping","example":["\n<div>\n<code>\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</code>\n</div>"],"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":"<p>The <a href=\"#/p5/push\">push()</a> function saves the current drawing style\nsettings and transformations, while <a href=\"#/p5/pop\">pop()</a> 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 <a href=\"#/p5/push\">push()</a>, it builds on\nthe current style and transform information. The <a href=\"#/p5/push\">push()</a>\nand <a href=\"#/p5/pop\">pop()</a> functions can be embedded to provide more\ncontrol. (See the second example for a demonstration.)</p>\n<p><a href=\"#/p5/push\">push()</a> stores information related to the current transformation state\nand style settings controlled by the following functions:\n<a href=\"#/p5/fill\">fill()</a>,\n<a href=\"#/p5/noFill\">noFill()</a>,\n<a href=\"#/p5/noStroke\">noStroke()</a>,\n<a href=\"#/p5/stroke\">stroke()</a>,\n<a href=\"#/p5/tint\">tint()</a>,\n<a href=\"#/p5/noTint\">noTint()</a>,\n<a href=\"#/p5/strokeWeight\">strokeWeight()</a>,\n<a href=\"#/p5/strokeCap\">strokeCap()</a>,\n<a href=\"#/p5/strokeJoin\">strokeJoin()</a>,\n<a href=\"#/p5/imageMode\">imageMode()</a>,\n<a href=\"#/p5/rectMode\">rectMode()</a>,\n<a href=\"#/p5/ellipseMode\">ellipseMode()</a>,\n<a href=\"#/p5/colorMode\">colorMode()</a>,\n<a href=\"#/p5/textAlign\">textAlign()</a>,\n<a href=\"#/p5/textFont\">textFont()</a>,\n<a href=\"#/p5/textSize\">textSize()</a>,\n<a href=\"#/p5/textLeading\">textLeading()</a>,\n<a href=\"#/p5/applyMatrix\">applyMatrix()</a>,\n<a href=\"#/p5/resetMatrix\">resetMatrix()</a>,\n<a href=\"#/p5/rotate\">rotate()</a>,\n<a href=\"#/p5/scale\">scale()</a>,\n<a href=\"#/p5/shearX\">shearX()</a>,\n<a href=\"#/p5/shearY\">shearY()</a>,\n<a href=\"#/p5/translate\">translate()</a>,\n<a href=\"#/p5/noiseSeed\">noiseSeed()</a>.</p>\n<p>In WEBGL mode additional style settings are stored. These are controlled by the\nfollowing functions: <a href=\"#/p5/setCamera\">setCamera()</a>,\n<a href=\"#/p5/ambientLight\">ambientLight()</a>,\n<a href=\"#/p5/directionalLight\">directionalLight()</a>,\n<a href=\"#/p5/pointLight\">pointLight()</a>, <a href=\"#/p5/texture\">texture()</a>,\n<a href=\"#/p5/specularMaterial\">specularMaterial()</a>,\n<a href=\"#/p5/shininess\">shininess()</a>,\n<a href=\"#/p5/normalMaterial\">normalMaterial()</a>\nand <a href=\"#/p5/shader\">shader()</a>.</p>\n","itemtype":"method","name":"push","example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":"<p>The <a href=\"#/p5/push\">push()</a> function saves the current drawing style\nsettings and transformations, while <a href=\"#/p5/pop\">pop()</a> 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 <a href=\"#/p5/push\">push()</a>, it\nbuilds on the current style and transform information. The <a href=\"#/p5/push\">push()</a>\nand <a href=\"#/p5/pop\">pop()</a> functions can be embedded to provide more\ncontrol. (See the second example for a demonstration.)</p>\n<p><a href=\"#/p5/push\">push()</a> stores information related to the current transformation state\nand style settings controlled by the following functions:\n<a href=\"#/p5/fill\">fill()</a>,\n<a href=\"#/p5/noFill\">noFill()</a>,\n<a href=\"#/p5/noStroke\">noStroke()</a>,\n<a href=\"#/p5/stroke\">stroke()</a>,\n<a href=\"#/p5/tint\">tint()</a>,\n<a href=\"#/p5/noTint\">noTint()</a>,\n<a href=\"#/p5/strokeWeight\">strokeWeight()</a>,\n<a href=\"#/p5/strokeCap\">strokeCap()</a>,\n<a href=\"#/p5/strokeJoin\">strokeJoin()</a>,\n<a href=\"#/p5/imageMode\">imageMode()</a>,\n<a href=\"#/p5/rectMode\">rectMode()</a>,\n<a href=\"#/p5/ellipseMode\">ellipseMode()</a>,\n<a href=\"#/p5/colorMode\">colorMode()</a>,\n<a href=\"#/p5/textAlign\">textAlign()</a>,\n<a href=\"#/p5/textFont\">textFont()</a>,\n<a href=\"#/p5/textSize\">textSize()</a>,\n<a href=\"#/p5/textLeading\">textLeading()</a>,\n<a href=\"#/p5/applyMatrix\">applyMatrix()</a>,\n<a href=\"#/p5/resetMatrix\">resetMatrix()</a>,\n<a href=\"#/p5/rotate\">rotate()</a>,\n<a href=\"#/p5/scale\">scale()</a>,\n<a href=\"#/p5/shearX\">shearX()</a>,\n<a href=\"#/p5/shearY\">shearY()</a>,\n<a href=\"#/p5/translate\">translate()</a>,\n<a href=\"#/p5/noiseSeed\">noiseSeed()</a>.</p>\n<p>In WEBGL mode additional style settings are stored. These are controlled by\nthe following functions:\n<a href=\"#/p5/setCamera\">setCamera()</a>,\n<a href=\"#/p5/ambientLight\">ambientLight()</a>,\n<a href=\"#/p5/directionalLight\">directionalLight()</a>,\n<a href=\"#/p5/pointLight\">pointLight()</a>,\n<a href=\"#/p5/texture\">texture()</a>,\n<a href=\"#/p5/specularMaterial\">specularMaterial()</a>,\n<a href=\"#/p5/shininess\">shininess()</a>,\n<a href=\"#/p5/normalMaterial\">normalMaterial()</a> and\n<a href=\"#/p5/shader\">shader()</a>.</p>\n","itemtype":"method","name":"pop","example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":"<p>Executes the code within <a href=\"#/p5/draw\">draw()</a> one time. This\nfunction allows the program to update the display window only when necessary,\nfor example when an event registered by <a href=\"#/p5/mousePressed\">mousePressed()</a>\nor <a href=\"#/p5/keyPressed\">keyPressed()</a> occurs.</p>\n<p>In structuring a program, it only makes sense to call <a href=\"#/p5/redraw\">redraw()</a>\nwithin events such as <a href=\"#/p5/mousePressed\">mousePressed()</a>. This\nis because <a href=\"#/p5/redraw\">redraw()</a> does not run\n<a href=\"#/p5/draw\">draw()</a> immediately (it only sets a flag that indicates\nan update is needed).</p>\n<p>The <a href=\"#/p5/redraw\">redraw()</a> function does not work properly when\ncalled inside <a href=\"#/p5/draw\">draw()</a>.To enable/disable animations,\nuse <a href=\"#/p5/loop\">loop()</a> and <a href=\"#/p5/noLoop\">noLoop()</a>.</p>\n<p>In addition you can set the number of redraws per method call. Just\nadd an integer as single parameter for the number of redraws.</p>\n","itemtype":"method","name":"redraw","params":[{"name":"n","description":"<p>Redraw for n-times. The default value is 1.</p>\n","type":"Integer","optional":true}],"example":["\n<div><code>\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</code>\n</div>\n\n<div class='norender'>\n<code>\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</code>\n</div>"],"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":497,"description":"<p>The <code>p5()</code> 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<a target=\"blank\" href=\"https://www.youtube.com/watch?v=Su792jEauZg&feature=youtu.be\">\nDan Shiffman's Coding Train video tutorial</a> or this\n<a target=\"blank\" href=\"https://github.com/processing/p5.js/wiki/p5.js-overview#instantiation--namespace\">tutorial page</a>\nfor more info.</p>\n<p>By default, all p5.js functions are in the global namespace (i.e. bound to the window\nobject), meaning you can call them simply <code>ellipse()</code>, <code>fill()</code>, 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.</p>\n<p>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.</p>\n<p>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.</p>\n","itemtype":"method","name":"p5","params":[{"name":"sketch","description":"<p>a function containing a p5.js sketch</p>\n","type":"Object"},{"name":"node","description":"<p>ID or pointer to HTML DOM node to contain sketch in</p>\n","type":"String|Object"}],"example":["\n<div class='norender'><code>\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</code></div>"],"alt":"white rectangle on black background","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/transform.js","line":11,"description":"<p>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 <a href=\"https://en.wikipedia.org/wiki/Transformation_matrix\">\nWikipedia</a>.</p>\n<p>The naming of the arguments here follows the naming of the <a href=\n\"https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-transform\">\nWHATWG specification</a> and corresponds to a\ntransformation matrix of the\nform:</p>\n<blockquote>\n<p><img style=\"max-width: 150px\" src=\"assets/transformation-matrix.png\"\nalt=\"The transformation matrix used when applyMatrix is called\"/></p>\n</blockquote>\n","itemtype":"method","name":"applyMatrix","params":[{"name":"a","description":"<p>numbers which define the 2x3 matrix to be multiplied, or an array of numbers</p>\n","type":"Number|Array"},{"name":"b","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"},{"name":"c","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"},{"name":"d","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"},{"name":"e","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"},{"name":"f","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\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(  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  stroke(255);\n  box(50);\n}\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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"},{"file":"src/core/transform.js","line":168,"description":"<p>Replaces the current matrix with the identity matrix.</p>\n","itemtype":"method","name":"resetMatrix","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"A rotated retangle in the center with another at the top left corner","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":193,"description":"<p>Rotates a shape by the amount specified by the angle parameter. This\nfunction accounts for <a href=\"#/p5/angleMode\">angleMode</a>, so angles\ncan be entered in either RADIANS or DEGREES.</p>\n<p>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 accumulates the effect. For example, calling\nrotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI).\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n<p>Technically, <a href=\"#/p5/rotate\">rotate()</a> multiplies the current transformation matrix\nby a rotation matrix. This function can be further controlled by\nthe <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a>.</p>\n","itemtype":"method","name":"rotate","params":[{"name":"angle","description":"<p>the angle of rotation, specified in radians\n                       or degrees, depending on current angleMode</p>\n","type":"Number"},{"name":"axis","description":"<p>(in 3d) the axis to rotate around</p>\n","type":"p5.Vector|Number[]","optional":true}],"chainable":1,"example":["\n<div>\n<code>\ntranslate(width / 2, height / 2);\nrotate(PI / 3.0);\nrect(-26, -26, 52, 52);\n</code>\n</div>"],"alt":"white 52x52 rect with black outline at center rotated counter 45 degrees","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":232,"description":"<p>Rotates a shape around X axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.</p>\n<p>Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n","itemtype":"method","name":"rotateX","params":[{"name":"angle","description":"<p>the angle of rotation, specified in radians\n                       or degrees, depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(255);\n  rotateX(millis() / 1000);\n  box();\n}\n</code>\n</div>"],"alt":"3d box rotating around the x axis.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":268,"description":"<p>Rotates a shape around Y axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.</p>\n<p>Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n","itemtype":"method","name":"rotateY","params":[{"name":"angle","description":"<p>the angle of rotation, specified in radians\n                       or degrees, depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(255);\n  rotateY(millis() / 1000);\n  box();\n}\n</code>\n</div>"],"alt":"3d box rotating around the y axis.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":304,"description":"<p>Rotates a shape around Z axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.</p>\n<p>This method works in WEBGL mode only.</p>\n<p>Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n","itemtype":"method","name":"rotateZ","params":[{"name":"angle","description":"<p>the angle of rotation, specified in radians\n                       or degrees, depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(255);\n  rotateZ(millis() / 1000);\n  box();\n}\n</code>\n</div>"],"alt":"3d box rotating around the z axis.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":342,"description":"<p>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%.</p>\n<p>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 <a href=\"#/p5/scale\">scale()</a> is called\nwithin <a href=\"#/p5/draw\">draw()</a>, the transformation is reset when the loop begins again.</p>\n<p>Using this function with the z parameter is only available in WEBGL mode.\nThis function can be further controlled with <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a>.</p>\n","itemtype":"method","name":"scale","chainable":1,"example":["\n<div>\n<code>\nrect(30, 20, 50, 50);\nscale(0.5);\nrect(30, 20, 50, 50);\n</code>\n</div>\n\n<div>\n<code>\nrect(30, 20, 50, 50);\nscale(0.5, 1.3);\nrect(30, 20, 50, 50);\n</code>\n</div>"],"alt":"white 52x52 rect with black outline at center rotated counter 45 degrees\n2 white rects with black outline- 1 50x50 at center. other 25x65 bottom left","class":"p5","module":"Transform","submodule":"Transform","overloads":[{"line":342,"params":[{"name":"s","description":"<p>percent to scale the object, or percentage to\n                     scale the object in the x-axis if multiple arguments\n                     are given</p>\n","type":"Number|p5.Vector|Number[]"},{"name":"y","description":"<p>percent to scale the object in the y-axis</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>percent to scale the object in the z-axis (webgl only)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":386,"params":[{"name":"scales","description":"<p>per-axis percents to scale the object</p>\n","type":"p5.Vector|Number[]"}],"chainable":1}]},{"file":"src/core/transform.js","line":416,"description":"<p>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.</p>\n<p>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 <a href=\"#/p5/shearX\">shearX()</a> is called within the <a href=\"#/p5/draw\">draw()</a>,\nthe transformation is reset when the loop begins again.</p>\n<p>Technically, <a href=\"#/p5/shearX\">shearX()</a> multiplies the current\ntransformation matrix by a rotation matrix. This function can be further\ncontrolled by the <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions.</p>\n","itemtype":"method","name":"shearX","params":[{"name":"angle","description":"<p>angle of shear specified in radians or degrees,\n                       depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\ntranslate(width / 4, height / 4);\nshearX(PI / 4.0);\nrect(0, 0, 30, 30);\n</code>\n</div>"],"alt":"white irregular quadrilateral with black outline at top middle.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":455,"description":"<p>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.</p>\n<p>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\n<a href=\"#/p5/shearY\">shearY()</a> is called within the <a href=\"#/p5/draw\">draw()</a>, the transformation is reset when\nthe loop begins again.</p>\n<p>Technically, <a href=\"#/p5/shearY\">shearY()</a> multiplies the current transformation matrix by a\nrotation matrix. This function can be further controlled by the\n<a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions.</p>\n","itemtype":"method","name":"shearY","params":[{"name":"angle","description":"<p>angle of shear specified in radians or degrees,\n                       depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\ntranslate(width / 4, height / 4);\nshearY(PI / 4.0);\nrect(0, 0, 30, 30);\n</code>\n</div>"],"alt":"white irregular quadrilateral with black outline at middle bottom.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":494,"description":"<p>Specifies an amount to displace objects within the display window.\nThe x parameter specifies left/right translation, the y parameter\nspecifies up/down translation.</p>\n<p>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 <a href=\"#/p5/translate\">translate()</a> is called within <a href=\"#/p5/draw\">draw()</a>, the\ntransformation is reset when the loop begins again. This function can be\nfurther controlled by using <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a>.</p>\n","itemtype":"method","name":"translate","chainable":1,"example":["\n<div>\n<code>\ntranslate(30, 20);\nrect(0, 0, 55, 55);\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n\n<div>\n<code>\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</code>\n</div>"],"alt":"white 55x55 rect with black outline at center right.\n3 white 55x55 rects with black outlines at top-l, center-r and bottom-r.\na 20x20 white rect moving in a circle around the canvas","class":"p5","module":"Transform","submodule":"Transform","overloads":[{"line":494,"params":[{"name":"x","description":"<p>left/right translation</p>\n","type":"Number"},{"name":"y","description":"<p>up/down translation</p>\n","type":"Number"},{"name":"z","description":"<p>forward/backward translation (webgl only)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":547,"params":[{"name":"vector","description":"<p>the vector to translate by</p>\n","type":"p5.Vector"}],"chainable":1}]},{"file":"src/data/local_storage.js","line":10,"description":"<p>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 <a href=\"#/p5/getItem\">getItem</a>.\nSensitive data such as passwords or personal information\n should not be stored in local storage.</p>\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 <div><code>\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 }\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 </code></div>"],"alt":"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.","class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/local_storage.js","line":101,"description":"<p>Returns the value of an item that was stored in local storage\n using storeItem()</p>\n","itemtype":"method","name":"getItem","params":[{"name":"key","description":"<p>name that you wish to use to store in local storage</p>\n","type":"String"}],"return":{"description":"Value of stored item","type":"Number|Object|String|Boolean|p5.Color|p5.Vector"},"example":["\n <div><code>\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 }\nfunction mousePressed() {\n   myColor = color(random(255), random(255), random(255));\n   storeItem('myColor', myColor);\n }\n </code></div>"],"alt":"If you click, the canvas changes to a random color.\n If you reload the page, the canvas is still the color it\n was when the page was previously loaded.","class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/local_storage.js","line":177,"description":"<p>Clears all local storage items set with storeItem()\n for the current domain.</p>\n","itemtype":"method","name":"clearStorage","example":["\n <div class=\"norender\">\n <code>\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 </code></div>"],"class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/local_storage.js","line":205,"description":"<p>Removes an item that was stored with storeItem()</p>\n","itemtype":"method","name":"removeItem","params":[{"name":"key","description":"","type":"String"}],"example":["\n <div class=\"norender\">\n <code>\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 </code></div>"],"class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/p5.TypedDict.js","line":14,"description":"<p>Creates a new instance of p5.StringDict using the key-value pair\n or the object you provide.</p>\n","itemtype":"method","name":"createStringDict","return":{"description":"","type":"p5.StringDict"},"example":["\n <div class=\"norender\">\n <code>\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 </code></div>"],"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":"<p>object</p>\n","type":"Object"}],"return":{"description":"","type":"p5.StringDict"}}]},{"file":"src/data/p5.TypedDict.js","line":48,"description":"<p>Creates a new instance of <a href=\"#/p5.NumberDict\">p5.NumberDict</a> using the key-value pair\n or object you provide.</p>\n","itemtype":"method","name":"createNumberDict","return":{"description":"","type":"p5.NumberDict"},"example":["\n <div class=\"norender\">\n <code>\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 </code></div>"],"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":"<p>object</p>\n","type":"Object"}],"return":{"description":"","type":"p5.NumberDict"}}]},{"file":"src/data/p5.TypedDict.js","line":101,"description":"<p>Returns the number of key-value pairs currently stored in the Dictionary.</p>\n","itemtype":"method","name":"size","return":{"description":"the number of key-value pairs in the Dictionary","type":"Integer"},"example":["\n<div class=\"norender\">\n<code>\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</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":122,"description":"<p>Returns true if the given key exists in the Dictionary,\notherwise returns false.</p>\n","itemtype":"method","name":"hasKey","params":[{"name":"key","description":"<p>that you want to look up</p>\n","type":"Number|String"}],"return":{"description":"whether that key exists in Dictionary","type":"Boolean"},"example":["\n<div class=\"norender\">\n<code>\nfunction setup() {\n  let myDictionary = createStringDict('p5', 'js');\n  print(myDictionary.hasKey('p5')); // logs true to console\n}\n</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":144,"description":"<p>Returns the value stored at the given key.</p>\n","itemtype":"method","name":"get","params":[{"name":"the","description":"<p>key you want to access</p>\n","type":"Number|String"}],"return":{"description":"the value stored at that key","type":"Number|String"},"example":["\n<div class=\"norender\">\n<code>\nfunction setup() {\n  let myDictionary = createStringDict('p5', 'js');\n  let myValue = myDictionary.get('p5');\n  print(myValue === 'js'); // logs true to console\n}\n</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":170,"description":"<p>Updates the value associated with the given key in case it already exists\nin the Dictionary. Otherwise a new key-value pair is added.</p>\n","itemtype":"method","name":"set","params":[{"name":"key","description":"","type":"Number|String"},{"name":"value","description":"","type":"Number|String"}],"example":["\n<div class=\"norender\">\n<code>\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</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":197,"description":"<p>private helper function to handle the user passing in objects\nduring construction or calls to create()</p>\n","class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":208,"description":"<p>Creates a new key-value pair in the Dictionary.</p>\n","itemtype":"method","name":"create","example":["\n<div class=\"norender\">\n<code>\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</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary","overloads":[{"line":208,"params":[{"name":"key","description":"","type":"Number|String"},{"name":"value","description":"","type":"Number|String"}]},{"line":226,"params":[{"name":"obj","description":"<p>key/value pair</p>\n","type":"Object"}]}]},{"file":"src/data/p5.TypedDict.js","line":244,"description":"<p>Removes all previously stored key-value pairs from the Dictionary.</p>\n","itemtype":"method","name":"clear","example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":265,"description":"<p>Removes the key-value pair stored at the given key from the Dictionary.</p>\n","itemtype":"method","name":"remove","params":[{"name":"key","description":"<p>for the pair to remove</p>\n","type":"Number|String"}],"example":["\n<div class=\"norender\">\n<code>\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</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":294,"description":"<p>Logs the set of items currently stored in the Dictionary to the console.</p>\n","itemtype":"method","name":"print","example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":318,"description":"<p>Converts the Dictionary into a CSV file for local download.</p>\n","itemtype":"method","name":"saveTable","example":["\n<div>\n<code>\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</code>\n</div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":356,"description":"<p>Converts the Dictionary into a JSON file for local download.</p>\n","itemtype":"method","name":"saveJSON","example":["\n<div>\n<code>\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</code>\n</div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":387,"description":"<p>private helper function to ensure that the user passed in valid\nvalues for the Dictionary type</p>\n","class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":425,"description":"<p>private helper function to ensure that the user passed in valid\nvalues for the Dictionary type</p>\n","class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":432,"description":"<p>Add the given number to the value currently stored at the given key.\nThe sum then replaces the value previously stored in the Dictionary.</p>\n","itemtype":"method","name":"add","params":[{"name":"Key","description":"<p>for the value you wish to add to</p>\n","type":"Number"},{"name":"Number","description":"<p>to add to the value</p>\n","type":"Number"}],"example":["\n<div class='norender'>\n<code>\nfunction setup() {\n  let myDictionary = createNumberDict(2, 5);\n  myDictionary.add(2, 2);\n  print(myDictionary.get(2)); // logs 7 to console.\n}\n</code></div>\n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":459,"description":"<p>Subtract the given number from the value currently stored at the given key.\nThe difference then replaces the value previously stored in the Dictionary.</p>\n","itemtype":"method","name":"sub","params":[{"name":"Key","description":"<p>for the value you wish to subtract from</p>\n","type":"Number"},{"name":"Number","description":"<p>to subtract from the value</p>\n","type":"Number"}],"example":["\n<div class='norender'>\n<code>\nfunction setup() {\n  let myDictionary = createNumberDict(2, 5);\n  myDictionary.sub(2, 2);\n  print(myDictionary.get(2)); // logs 3 to console.\n}\n</code></div>\n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":482,"description":"<p>Multiply the given number with the value currently stored at the given key.\nThe product then replaces the value previously stored in the Dictionary.</p>\n","itemtype":"method","name":"mult","params":[{"name":"Key","description":"<p>for value you wish to multiply</p>\n","type":"Number"},{"name":"Amount","description":"<p>to multiply the value by</p>\n","type":"Number"}],"example":["\n<div class='norender'>\n<code>\nfunction setup() {\n  let myDictionary = createNumberDict(2, 4);\n  myDictionary.mult(2, 2);\n  print(myDictionary.get(2)); // logs 8 to console.\n}\n</code></div>\n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":509,"description":"<p>Divide the given number with the value currently stored at the given key.\nThe quotient then replaces the value previously stored in the Dictionary.</p>\n","itemtype":"method","name":"div","params":[{"name":"Key","description":"<p>for value you wish to divide</p>\n","type":"Number"},{"name":"Amount","description":"<p>to divide the value by</p>\n","type":"Number"}],"example":["\n<div class='norender'>\n<code>\nfunction setup() {\n  let myDictionary = createNumberDict(2, 8);\n  myDictionary.div(2, 2);\n  print(myDictionary.get(2)); // logs 4 to console.\n}\n</code></div>\n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":536,"description":"<p>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'</p>\n","class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":560,"description":"<p>Return the lowest number currently stored in the Dictionary.</p>\n","itemtype":"method","name":"minValue","return":{"description":"","type":"Number"},"example":["\n<div class='norender'>\n<code>\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</code></div>"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":580,"description":"<p>Return the highest number currently stored in the Dictionary.</p>\n","itemtype":"method","name":"maxValue","return":{"description":"","type":"Number"},"example":["\n<div class='norender'>\n<code>\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</code></div>"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":600,"description":"<p>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'</p>\n","class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":622,"description":"<p>Return the lowest key currently used in the Dictionary.</p>\n","itemtype":"method","name":"minKey","return":{"description":"","type":"Number"},"example":["\n<div class='norender'>\n<code>\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</code></div>"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":642,"description":"<p>Return the highest key currently used in the Dictionary.</p>\n","itemtype":"method","name":"maxKey","return":{"description":"","type":"Number"},"example":["\n<div class='norender'>\n<code>\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</code></div>"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/dom/dom.js","line":21,"description":"<p>Searches the page for the first element that matches the given CSS selector string (can be an\nID, class, tag name or a combination) and returns it as a <a href=\"#/p5.Element\">p5.Element</a>.\nThe DOM node itself can be accessed with .elt.\nReturns null if none found. You can also specify a container to search within.</p>\n","itemtype":"method","name":"select","params":[{"name":"selectors","description":"<p>CSS selector string of element to search for</p>\n","type":"String"},{"name":"container","description":"<p>CSS selector string, <a href=\"#/p5.Element\">p5.Element</a>, or\n                                            HTML element to search within</p>\n","type":"String|p5.Element|HTMLElement","optional":true}],"return":{"description":"<a href=\"#/p5.Element\">p5.Element</a> containing node found","type":"p5.Element|null"},"example":["\n<div><code>\nfunction setup() {\n  createCanvas(50, 50);\n  background(30);\n  // move canvas down and right\n  select('canvas').position(10, 30);\n}\n</code></div>\n\n<div class=\"norender\"><code>\n// select using ID\nlet a = select('#container');\nlet b = select('#beep', '#container');\nlet c;\nif (a) {\n  // select using class\n  c = select('.boop', a);\n}\n// select using CSS selector string\nlet d = select('#container #bleep');\nlet e = select('#container p');\n[a, b, c, d, e]; // unused\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":68,"description":"<p>Searches the page for elements that match the given CSS selector string (can be an ID a class,\ntag name or a combination) and returns them as <a href=\"#/p5.Element\">p5.Element</a>s in\nan array.\nThe DOM node itself can be accessed with .elt.\nReturns an empty array if none found.\nYou can also specify a container to search within.</p>\n","itemtype":"method","name":"selectAll","params":[{"name":"selectors","description":"<p>CSS selector string of elements to search for</p>\n","type":"String"},{"name":"container","description":"<p>CSS selector string, <a href=\"#/p5.Element\">p5.Element</a>\n                                            , or HTML element to search within</p>\n","type":"String|p5.Element|HTMLElement","optional":true}],"return":{"description":"Array of <a href=\"#/p5.Element\">p5.Element</a>s containing nodes found","type":"p5.Element[]"},"example":["\n<div><code>\nfunction setup() {\n  createButton('btn');\n  createButton('2nd btn');\n  createButton('3rd btn');\n  let buttons = selectAll('button');\n\n  for (let i = 0; i < 3; i++) {\n    buttons[i].size(100);\n    buttons[i].position(0, i * 30);\n  }\n}\n</code></div>\n<div><code>\n// these are all valid calls to selectAll()\nlet a = selectAll('.beep');\na = selectAll('div');\na = selectAll('button', '#container');\n\nlet b = createDiv();\nb.id('container');\nlet c = select('#container');\na = selectAll('p', c);\na = selectAll('#container p');\n\nlet d = document.getElementById('container');\na = selectAll('.boop', d);\na = selectAll('#container .boop');\nconsole.log(a);\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":127,"description":"<p>Helper function for select and selectAll</p>\n","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":142,"description":"<p>Helper function for getElement and getElements.</p>\n","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":176,"description":"<p>Removes all elements created by p5, except any canvas / graphics\nelements created by <a href=\"#/p5/createCanvas\">createCanvas</a> or <a href=\"#/p5/createGraphics\">createGraphics</a>.\nEvent handlers are removed, and element is removed from the DOM.</p>\n","itemtype":"method","name":"removeElements","example":["\n<div><code>\nfunction setup() {\n  createCanvas(100, 100);\n  background('grey');\n  let div = createDiv('this is some text');\n  let p = createP('this is a paragraph');\n  div.style('font-size', '16px');\n  p.style('font-size', '16px');\n}\nfunction mousePressed() {\n  removeElements(); // this will remove the div and p, not canvas\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":204,"description":"<p>The .<a href=\"#/p5.Element/changed\">changed()</a> function is called when the value of an\nelement changes.\nThis can be used to attach an element specific event listener.</p>\n","itemtype":"method","name":"changed","params":[{"name":"fxn","description":"<p>function to be fired when the value of\n                               an element changes.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div><code>\nlet sel;\n\nfunction setup() {\n  textAlign(CENTER);\n  background(200);\n  sel = createSelect();\n  sel.position(10, 10);\n  sel.option('pear');\n  sel.option('kiwi');\n  sel.option('grape');\n  sel.changed(mySelectEvent);\n}\n\nfunction mySelectEvent() {\n  let item = sel.value();\n  background(200);\n  text(\"it's a \" + item + '!', 50, 50);\n}\n</code></div>\n\n<div><code>\nlet checkbox;\nlet cnv;\n\nfunction setup() {\n  checkbox = createCheckbox(' fill');\n  checkbox.changed(changeFill);\n  cnv = createCanvas(100, 100);\n  cnv.position(0, 30);\n  noFill();\n}\n\nfunction draw() {\n  background(200);\n  ellipse(50, 50, 50, 50);\n}\n\nfunction changeFill() {\n  if (checkbox.checked()) {\n    fill(0);\n  } else {\n    noFill();\n  }\n}\n</code></div>"],"alt":"dropdown: pear, kiwi, grape. When selected text \"its a\" + selection shown.","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":271,"description":"<p>The .<a href=\"#/p5.Element/input\">input()</a> function is called when any user input is\ndetected with an element. The input event is often used\nto detect keystrokes in a input element, or changes on a\nslider element. This can be used to attach an element specific\nevent listener.</p>\n","itemtype":"method","name":"input","params":[{"name":"fxn","description":"<p>function to be fired when any user input is\n                               detected within the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div><code>\n// Open your console to see the output\nfunction setup() {\n  createCanvas(100, 100);\n  background('grey');\n  let inp = createInput('');\n  inp.position(0, 0);\n  inp.size(100);\n  inp.input(myInputEvent);\n}\n\nfunction myInputEvent() {\n  console.log('you are typing: ', this.value());\n}\n</code></div>"],"alt":"no display.","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":309,"description":"<p>Helpers for create methods.</p>\n","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":322,"description":"<p>Creates a <code>&lt;div&gt;&lt;/div&gt;</code> element in the DOM with given inner HTML.</p>\n","itemtype":"method","name":"createDiv","params":[{"name":"html","description":"<p>inner HTML for element created</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet div = createDiv('this is some text');\ndiv.style('font-size', '16px');\ndiv.position(10, 0);\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":341,"description":"<p>Creates a <code>&lt;p&gt;&lt;/p&gt;</code> element in the DOM with given inner HTML. Used\nfor paragraph length text.</p>\n","itemtype":"method","name":"createP","params":[{"name":"html","description":"<p>inner HTML for element created</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet p = createP('this is some text');\np.style('font-size', '16px');\np.position(10, 0);\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":361,"description":"<p>Creates a <code>&lt;span&gt;&lt;/span&gt;</code> element in the DOM with given inner HTML.</p>\n","itemtype":"method","name":"createSpan","params":[{"name":"html","description":"<p>inner HTML for element created</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet span = createSpan('this is some text');\nspan.position(0, 0);\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":379,"description":"<p>Creates an <code>&lt;img&gt;</code> element in the DOM with given src and\nalternate text.</p>\n","itemtype":"method","name":"createImg","return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n <div><code>\nlet img = createImg(\n  'https://p5js.org/assets/img/asterisk-01.png',\n  'the p5 magenta asterisk'\n);\nimg.position(0, -10);\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":379,"params":[{"name":"src","description":"<p>src path or url for image</p>\n","type":"String"},{"name":"alt","description":"<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#Attributes\">alternate text</a> to be used if image does not load. You can use also an empty string (<code>\"\"</code>) if that an image is not intended to be viewed.</p>\n","type":"String"}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}},{"line":396,"params":[{"name":"src","description":"","type":"String"},{"name":"alt","description":"","type":"String"},{"name":"crossOrigin","description":"<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes\">crossOrigin property</a> of the <code>img</code> element; use either 'anonymous' or 'use-credentials' to retrieve the image with cross-origin access (for later use with <code>canvas</code>. if an empty string(<code>\"\"</code>) is passed, CORS is not used</p>\n","type":"String"},{"name":"successCallback","description":"<p>callback to be called once image data is loaded with the <a href=\"#/p5.Element\">p5.Element</a> as argument</p>\n","type":"Function","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":426,"description":"<p>Creates an <code>&lt;a&gt;&lt;/a&gt;</code> element in the DOM for including a hyperlink.</p>\n","itemtype":"method","name":"createA","params":[{"name":"href","description":"<p>url of page to link to</p>\n","type":"String"},{"name":"html","description":"<p>inner html of link element to display</p>\n","type":"String"},{"name":"target","description":"<p>target where new link should open,\n                            could be _blank, _self, _parent, _top.</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet a = createA('http://p5js.org/', 'this is a link');\na.position(0, 0);\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":450,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":452,"description":"<p>Creates a slider <code>&lt;input&gt;&lt;/input&gt;</code> element in the DOM.\nUse .size() to set the display length of the slider.</p>\n","itemtype":"method","name":"createSlider","params":[{"name":"min","description":"<p>minimum value of the slider</p>\n","type":"Number"},{"name":"max","description":"<p>maximum value of the slider</p>\n","type":"Number"},{"name":"value","description":"<p>default value of the slider</p>\n","type":"Number","optional":true},{"name":"step","description":"<p>step size for each tick of the slider (if step is set to 0, the slider will move continuously from the minimum to the maximum value)</p>\n","type":"Number","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet slider;\nfunction setup() {\n  slider = createSlider(0, 255, 100);\n  slider.position(10, 10);\n  slider.style('width', '80px');\n}\n\nfunction draw() {\n  let val = slider.value();\n  background(val);\n}\n</code></div>\n\n<div><code>\nlet slider;\nfunction setup() {\n  colorMode(HSB);\n  slider = createSlider(0, 360, 60, 40);\n  slider.position(10, 10);\n  slider.style('width', '80px');\n}\n\nfunction draw() {\n  let val = slider.value();\n  background(val, 100, 100, 1);\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":507,"description":"<p>Creates a <code>&lt;button&gt;&lt;/button&gt;</code> element in the DOM.\nUse .size() to set the display size of the button.\nUse .mousePressed() to specify behavior on press.</p>\n","itemtype":"method","name":"createButton","params":[{"name":"label","description":"<p>label displayed on the button</p>\n","type":"String"},{"name":"value","description":"<p>value of the button</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet button;\nfunction setup() {\n  createCanvas(100, 100);\n  background(0);\n  button = createButton('click me');\n  button.position(0, 0);\n  button.mousePressed(changeBG);\n}\n\nfunction changeBG() {\n  let val = random(255);\n  background(val);\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":541,"description":"<p>Creates a checkbox <code>&lt;input&gt;&lt;/input&gt;</code> element in the DOM.\nCalling .checked() on a checkbox returns if it is checked or not</p>\n","itemtype":"method","name":"createCheckbox","params":[{"name":"label","description":"<p>label displayed after checkbox</p>\n","type":"String","optional":true},{"name":"value","description":"<p>value of the checkbox; checked is true, unchecked is false</p>\n","type":"Boolean","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet checkbox;\n\nfunction setup() {\n  checkbox = createCheckbox('label', false);\n  checkbox.changed(myCheckedEvent);\n}\n\nfunction myCheckedEvent() {\n  if (this.checked()) {\n    console.log('Checking!');\n  } else {\n    console.log('Unchecking!');\n  }\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":609,"description":"<p>Creates a dropdown menu <code>&lt;select&gt;&lt;/select&gt;</code> element in the DOM.\nIt also helps to assign select-box methods to <a href=\"#/p5.Element\">p5.Element</a> when selecting existing select box.</p>\n<ul>\n<li><code>.option(name, [value])</code> can be used to set options for the select after it is created.</li>\n<li><code>.value()</code> will return the currently selected option.</li>\n<li><code>.selected()</code> will return current dropdown element which is an instance of <a href=\"#/p5.Element\">p5.Element</a></li>\n<li><code>.selected(value)</code> can be used to make given option selected by default when the page first loads.</li>\n<li><code>.disable()</code> marks whole of dropdown element as disabled.</li>\n<li><code>.disable(value)</code> marks given option as disabled</li>\n</ul>\n","itemtype":"method","name":"createSelect","return":{"description":"","type":"p5.Element"},"example":["\n<div><code>\nlet sel;\n\nfunction setup() {\n  textAlign(CENTER);\n  background(200);\n  sel = createSelect();\n  sel.position(10, 10);\n  sel.option('pear');\n  sel.option('kiwi');\n  sel.option('grape');\n  sel.selected('kiwi');\n  sel.changed(mySelectEvent);\n}\n\nfunction mySelectEvent() {\n  let item = sel.value();\n  background(200);\n  text('It is a ' + item + '!', 50, 50);\n}\n</code></div>\n\n<div><code>\nlet sel;\n\nfunction setup() {\n  textAlign(CENTER);\n  background(200);\n  sel = createSelect();\n  sel.position(10, 10);\n  sel.option('oil');\n  sel.option('milk');\n  sel.option('bread');\n  sel.disable('milk');\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":609,"params":[{"name":"multiple","description":"<p>true if dropdown should support multiple selections</p>\n","type":"Boolean","optional":true}],"return":{"description":"","type":"p5.Element"}},{"line":660,"params":[{"name":"existing","description":"<p>DOM select element</p>\n","type":"Object"}],"return":{"description":"","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":757,"description":"<p>Creates a radio button element in the DOM.It also helps existing radio buttons\nassign methods of <a href=\"#/p5.Element/\">p5.Element</a>.</p>\n<ul>\n<li><code>.option(value, [label])</code> can be used to create a new option for the\nelement. If an option with a value already exists, it will be returned.\nOptionally, a label can be provided as second argument for the option.</li>\n<li><code>.remove(value)</code> can be used to remove an option for the element.</li>\n<li><code>.value()</code> method will return the currently selected value.</li>\n<li><code>.selected()</code> method will return the currently selected input element.</li>\n<li><code>.selected(value)</code> method will select the option and return it.</li>\n<li><code>.disable(Boolean)</code> method will enable/disable the whole radio button element.</li>\n</ul>\n","itemtype":"method","name":"createRadio","return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet radio;\n\nfunction setup() {\n  radio = createRadio();\n  radio.option('black');\n  radio.option('white');\n  radio.option('gray');\n  radio.style('width', '60px');\n  textAlign(CENTER);\n  fill(255, 0, 0);\n}\n\nfunction draw() {\n  let val = radio.value();\n  background(val);\n  text(val, width / 2, height / 2);\n}\n</code></div>\n<div><code>\nlet radio;\n\nfunction setup() {\n  radio = createRadio();\n  radio.option(1, 'apple');\n  radio.option(2, 'bread');\n  radio.option(3, 'juice');\n  radio.style('width', '30px');\n  textAlign(CENTER);\n}\n\nfunction draw() {\n  background(200);\n  let val = radio.value();\n  if (val) {\n    text('item cost is $' + val, width / 2, height / 2);\n  }\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":757,"params":[{"name":"containerElement","description":"<p>An container HTML Element either a div\nor span inside which all existing radio inputs will be considered as options.</p>\n","type":"Object"},{"name":"name","description":"<p>A name parameter for each Input Element.</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}},{"line":815,"params":[{"name":"name","description":"","type":"String"}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}},{"line":820,"params":[],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":935,"description":"<p>Creates a colorPicker element in the DOM for color input.\nThe .value() method will return a hex string (#rrggbb) of the color.\nThe .color() method will return a p5.Color object with the current chosen color.</p>\n","itemtype":"method","name":"createColorPicker","params":[{"name":"value","description":"<p>default color of element</p>\n","type":"String|p5.Color","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet colorPicker;\nfunction setup() {\n  createCanvas(100, 100);\n  colorPicker = createColorPicker('#ed225d');\n  colorPicker.position(0, height + 5);\n}\n\nfunction draw() {\n  background(colorPicker.color());\n}\n</code></div>\n<div><code>\nlet inp1, inp2;\nfunction setup() {\n  createCanvas(100, 100);\n  background('grey');\n  inp1 = createColorPicker('#ff0000');\n  inp1.position(0, height + 5);\n  inp1.input(setShade1);\n  inp2 = createColorPicker(color('yellow'));\n  inp2.position(0, height + 30);\n  inp2.input(setShade2);\n  setMidShade();\n}\n\nfunction setMidShade() {\n  // Finding a shade between the two\n  let commonShade = lerpColor(inp1.color(), inp2.color(), 0.5);\n  fill(commonShade);\n  rect(20, 20, 60, 60);\n}\n\nfunction setShade1() {\n  setMidShade();\n  console.log('You are choosing shade 1 to be : ', this.value());\n}\nfunction setShade2() {\n  setMidShade();\n  console.log('You are choosing shade 2 to be : ', this.value());\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1023,"description":"<p>Creates an <code>&lt;input&gt;&lt;/input&gt;</code> element in the DOM for text input.\nUse .<a href=\"#/p5.Element/size\">size()</a> to set the display length of the box.</p>\n","itemtype":"method","name":"createInput","return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nfunction setup() {\n  createCanvas(100, 100);\n  background('grey');\n  let inp = createInput('');\n  inp.position(0, 0);\n  inp.size(100);\n  inp.input(myInputEvent);\n}\n\nfunction myInputEvent() {\n  console.log('you are typing: ', this.value());\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":1023,"params":[{"name":"value","description":"<p>default value of the input box</p>\n","type":"String"},{"name":"type","description":"<p>type of text, ie text, password etc. Defaults to text.\n  Needs a value to be specified first.</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}},{"line":1048,"params":[{"name":"value","description":"","type":"String","optional":true}],"return":{"description":"","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":1061,"description":"<p>Creates an <code>&lt;input&gt;&lt;/input&gt;</code> element in the DOM of type 'file'.\nThis allows users to select local files for use in a sketch.</p>\n","itemtype":"method","name":"createFileInput","params":[{"name":"callback","description":"<p>callback function for when a file is loaded</p>\n","type":"Function"},{"name":"multiple","description":"<p>optional, to allow multiple files to be selected</p>\n","type":"Boolean","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created DOM element","type":"p5.Element"},"example":["\n<div><code>\nlet input;\nlet img;\n\nfunction setup() {\n  input = createFileInput(handleFile);\n  input.position(0, 0);\n}\n\nfunction draw() {\n  background(255);\n  if (img) {\n    image(img, 0, 0, width, height);\n  }\n}\n\nfunction handleFile(file) {\n  print(file);\n  if (file.type === 'image') {\n    img = createImg(file.data, '');\n    img.hide();\n  } else {\n    img = null;\n  }\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1121,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1168,"description":"<p>Creates an HTML5 <code>&lt;video&gt;</code> element in the DOM for simple playback\nof audio/video. Shown by default, can be hidden with .<a href=\"#/p5.Element/hide\">hide()</a>\nand drawn into canvas using <a href=\"#/p5/image\">image()</a>. The first parameter\ncan be either a single string path to a video file, or an array of string\npaths to different formats of the same video. This is useful for ensuring\nthat your video can play across different browsers, as each supports\ndifferent formats. See <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats'>this\npage</a> for further information about supported formats.</p>\n","itemtype":"method","name":"createVideo","params":[{"name":"src","description":"<p>path to a video file, or array of paths for\n                            supporting different browsers</p>\n","type":"String|String[]"},{"name":"callback","description":"<p>callback function to be called upon\n                            'canplaythrough' event fire, that is, when the\n                            browser can play the media, and estimates that\n                            enough data has been loaded to play the media\n                            up to its end without having to stop for\n                            further buffering of content</p>\n","type":"Function","optional":true}],"return":{"description":"pointer to video <a href=\"#/p5.Element\">p5.Element</a>","type":"p5.MediaElement"},"example":["\n<div><code>\nlet vid;\nfunction setup() {\n  noCanvas();\n\n  vid = createVideo(\n    ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm'],\n    vidLoad\n  );\n\n  vid.size(100, 100);\n}\n\n// This function is called when the video loads\nfunction vidLoad() {\n  vid.loop();\n  vid.volume(0);\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1214,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1216,"description":"<p>Creates a hidden HTML5 <code>&lt;audio&gt;</code> element in the DOM for simple audio\nplayback. The first parameter can be either a single string path to a\naudio file, or an array of string paths to different formats of the same\naudio. This is useful for ensuring that your audio can play across\ndifferent browsers, as each supports different formats.\nSee <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats'>this\npage for further information about supported formats</a>.</p>\n","itemtype":"method","name":"createAudio","params":[{"name":"src","description":"<p>path to an audio file, or array of paths\n                            for supporting different browsers</p>\n","type":"String|String[]","optional":true},{"name":"callback","description":"<p>callback function to be called upon\n                            'canplaythrough' event fire, that is, when the\n                            browser can play the media, and estimates that\n                            enough data has been loaded to play the media\n                            up to its end without having to stop for\n                            further buffering of content</p>\n","type":"Function","optional":true}],"return":{"description":"pointer to audio <a href=\"#/p5.Element\">p5.Element</a>","type":"p5.MediaElement"},"example":["\n<div><code>\nlet ele;\nfunction setup() {\n  ele = createAudio('assets/beat.mp3');\n\n  // here we set the element to autoplay\n  // The element will play as soon\n  // as it is able to do so.\n  ele.autoplay(true);\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1253,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1255,"itemtype":"property","name":"VIDEO","type":"String","final":1,"category":["Constants"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1261,"itemtype":"property","name":"AUDIO","type":"String","final":1,"category":["Constants"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1298,"description":"<p>Creates a new HTML5 <code>&lt;video&gt;</code> element that contains the audio/video feed\nfrom a webcam. The element is separate from the canvas and is displayed by\ndefault. The element can be hidden using .<a href=\"#/p5.Element/hide\">hide()</a>.\nThe feed can be drawn onto the canvas using <a href=\"#/p5/image\">image()</a>.\nThe loadedmetadata property can be used to detect when the element has fully\nloaded (see second example).</p>\n<p>More specific properties of the feed can be passing in a Constraints object.\nSee the <a href='http://w3c.github.io/mediacapture-main/getusermedia.html#media-track-constraints'>\nW3C spec</a> for possible properties. Note that not all of these are supported\nby all browsers.</p>\n<p><em>Security note</em>: A new browser security specification requires that\ngetUserMedia, which is behind <a href=\"#/p5/createCapture\">createCapture()</a>,\nonly works when you're running the code locally, or on HTTPS. Learn more\n<a href='http://stackoverflow.com/questions/34197653/getusermedia-in-chrome-47-without-using-https'>here</a>\nand <a href='https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia'>here</a>.</p>\n","itemtype":"method","name":"createCapture","params":[{"name":"type","description":"<p>type of capture, either VIDEO or\n                                  AUDIO if none specified, default both,\n                                  or a Constraints object</p>\n","type":"String|Constant|Object"},{"name":"callback","description":"<p>function to be called once\n                                  stream has loaded</p>\n","type":"Function","optional":true}],"return":{"description":"capture video <a href=\"#/p5.Element\">p5.Element</a>","type":"p5.Element"},"example":["\n<div class='notest'>\n<code>\nlet capture;\n\nfunction setup() {\n  createCanvas(100, 100);\n  capture = createCapture(VIDEO);\n  capture.hide();\n}\n\nfunction draw() {\n  image(capture, 0, 0, width, width * capture.height / capture.width);\n  filter(INVERT);\n}\n</code>\n</div>\n\n<div class='notest'>\n<code>\nfunction setup() {\n  createCanvas(480, 120);\n  let constraints = {\n    video: {\n      mandatory: {\n        minWidth: 1280,\n        minHeight: 720\n      },\n      optional: [{ maxFrameRate: 10 }]\n    },\n    audio: true\n  };\n  createCapture(constraints, function(stream) {\n    console.log(stream);\n  });\n}\n</code>\n</div>\n<div class='notest'>\n<code>\nlet capture;\n\nfunction setup() {\n  createCanvas(640, 480);\n  capture = createCapture(VIDEO);\n}\nfunction draw() {\n  background(0);\n  if (capture.loadedmetadata) {\n    let c = capture.get(0, 0, 100, 100);\n    image(c, 0, 0);\n  }\n}\n</code>\n</div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1435,"description":"<p>Creates element with given tag in the DOM with given content.</p>\n","itemtype":"method","name":"createElement","params":[{"name":"tag","description":"<p>tag for the new element</p>\n","type":"String"},{"name":"content","description":"<p>html content to be inserted into the element</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet h5 = createElement('h5', 'im an h5 p5.element!');\nh5.style('color', '#00a1d3');\nh5.position(0, 0);\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1461,"description":"<p>Adds specified class to the element.</p>\n","itemtype":"method","name":"addClass","params":[{"name":"class","description":"<p>name of class to add</p>\n","type":"String"}],"chainable":1,"example":["\n <div class='norender'><code>\n let div = createDiv('div');\n div.addClass('myClass');\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1486,"description":"<p>Removes specified class from the element.</p>\n","itemtype":"method","name":"removeClass","params":[{"name":"class","description":"<p>name of class to remove</p>\n","type":"String"}],"chainable":1,"example":["\n <div class='norender'><code>\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.\nlet div;\nfunction setup() {\n   div = createDiv('div');\n   div.addClass('myClass');\n }\nfunction mousePressed() {\n   div.removeClass('myClass');\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1517,"description":"<p>Checks if specified class already set to element</p>\n","itemtype":"method","name":"hasClass","return":{"description":"a boolean value if element has specified class","type":"Boolean"},"params":[{"name":"c","description":"<p>class name of class to check</p>\n","type":"String"}],"example":["\n <div class='norender'><code>\n let div;\nfunction setup() {\n   div = createDiv('div');\n   div.addClass('show');\n }\nfunction mousePressed() {\n   if (div.hasClass('show')) {\n     div.addClass('show');\n   } else {\n     div.removeClass('show');\n   }\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1546,"description":"<p>Toggles element class</p>\n","itemtype":"method","name":"toggleClass","params":[{"name":"c","description":"<p>class name to toggle</p>\n","type":"String"}],"chainable":1,"example":["\n <div class='norender'><code>\n let div;\nfunction setup() {\n   div = createDiv('div');\n   div.addClass('show');\n }\nfunction mousePressed() {\n   div.toggleClass('show');\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1579,"description":"<p>Attaches the element  as a child to the parent specified.\n Accepts either a string ID, DOM node, or <a href=\"#/p5.Element\">p5.Element</a>.\n If no argument is specified, an array of children DOM nodes is returned.</p>\n","itemtype":"method","name":"child","return":{"description":"an array of child nodes","type":"Node[]"},"example":["\n <div class='norender'><code>\n let div0 = createDiv('this is the parent');\n let div1 = createDiv('this is the child');\n div0.child(div1); // use p5.Element\n </code></div>\n <div class='norender'><code>\n let div0 = createDiv('this is the parent');\n let div1 = createDiv('this is the child');\n div1.id('apples');\n div0.child('apples'); // use id\n </code></div>\n <div class='norender notest'><code>\n // this example assumes there is a div already on the page\n // with id \"myChildDiv\"\n let div0 = createDiv('this is the parent');\n let elt = document.getElementById('myChildDiv');\n div0.child(elt); // use element from page\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1579,"params":[],"return":{"description":"an array of child nodes","type":"Node[]"}},{"line":1607,"params":[{"name":"child","description":"<p>the ID, DOM node, or <a href=\"#/p5.Element\">p5.Element</a>\n                        to add to the current element</p>\n","type":"String|p5.Element","optional":true}],"chainable":1}]},{"file":"src/dom/dom.js","line":1632,"description":"<p>Centers a p5 Element either vertically, horizontally,\nor both, relative to its parent or according to\nthe body if the Element has no parent. If no argument is passed\nthe Element is aligned both vertically and horizontally.</p>\n","itemtype":"method","name":"center","params":[{"name":"align","description":"<p>passing 'vertical', 'horizontal' aligns element accordingly</p>\n","type":"String","optional":true}],"chainable":1,"example":["\n<div><code>\nfunction setup() {\n  let div = createDiv('').size(10, 10);\n  div.style('background-color', 'orange');\n  div.center();\n}\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1683,"description":"<p>If an argument is given, sets the inner HTML of the element,\n replacing any existing html. If true is included as a second\n argument, html is appended instead of replacing existing html.\n If no arguments are given, returns\n the inner HTML of the element.</p>\n","itemtype":"method","name":"html","return":{"description":"the inner HTML of the element","type":"String"},"example":["\n <div class='norender'><code>\n let div = createDiv('').size(100, 100);\n div.html('hi');\n </code></div>\n <div class='norender'><code>\n let div = createDiv('Hello ').size(100, 100);\n div.html('World', true);\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1683,"params":[],"return":{"description":"the inner HTML of the element","type":"String"}},{"line":1704,"params":[{"name":"html","description":"<p>the HTML to be placed inside the element</p>\n","type":"String","optional":true},{"name":"append","description":"<p>whether to append HTML to existing</p>\n","type":"Boolean","optional":true}],"chainable":1}]},{"file":"src/dom/dom.js","line":1722,"description":"<p>Sets the position of the element. If no position type argument is given, the\n position will be relative to (0, 0) of the window.\n Essentially, this sets position:absolute and left and top\n properties of style. If an optional third argument specifying position type is given,\n the x and y coordinates will be interpreted based on the <a target=\"_blank\"\n href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/position\">positioning scheme</a>.\n If no arguments given, the function returns the x and y position of the element.\nfound documentation on how to be more specific with object type\n <a href=\"https://stackoverflow.com/questions/14714314/how-do-i-comment-object-literals-in-yuidoc\">https://stackoverflow.com/questions/14714314/how-do-i-comment-object-literals-in-yuidoc</a></p>\n","itemtype":"method","name":"position","return":{"description":"object of form { x: 0, y: 0 } containing the position of the element in an object","type":"Object"},"example":["\n <div><code class='norender'>\n function setup() {\n   let cnv = createCanvas(100, 100);\n   // positions canvas 50px to the right and 100px\n   // below upper left corner of the window\n   cnv.position(50, 100);\n }\n </code></div>\n <div><code class='norender'>\n function setup() {\n   let cnv = createCanvas(100, 100);\n   // positions canvas 50px to the right and 100px\n   // below upper left corner of the window\n   cnv.position(0, 0, 'fixed');\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1722,"params":[],"return":{"description":"object of form { x: 0, y: 0 } containing the position of the element in an object","type":"Object"}},{"line":1755,"params":[{"name":"x","description":"<p>x-position relative to upper left of window (optional)</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>y-position relative to upper left of window (optional)</p>\n","type":"Number","optional":true},{"name":"positionType","description":"<p>it can be static, fixed, relative, sticky, initial or inherit (optional)</p>\n","type":"String"}],"chainable":1}]},{"file":"src/dom/dom.js","line":1842,"description":"<p>Sets the given style (css) property (1st arg) of the element with the\ngiven value (2nd arg). If a single argument is given, .style()\nreturns the value of the given property; however, if the single argument\nis given in css syntax ('text-align:center'), .style() sets the css\nappropriately.</p>\n","itemtype":"method","name":"style","return":{"description":"value of property","type":"String"},"example":["\n<div><code class='norender'>\nlet myDiv = createDiv('I like pandas.');\nmyDiv.style('font-size', '18px');\nmyDiv.style('color', '#ff0000');\nmyDiv.position(0, 0);\n</code></div>\n<div><code class='norender'>\nlet col = color(25, 23, 200, 50);\nlet button = createButton('button');\nbutton.style('background-color', col);\nbutton.position(0, 0);\n</code></div>\n<div><code class='norender'>\nlet myDiv, fontSize;\nfunction setup() {\n  background(200);\n  myDiv = createDiv('I like gray.');\n  myDiv.position(0, 0);\n  myDiv.style('z-index', 10);\n}\n\nfunction draw() {\n  fontSize = min(mouseX, 90);\n  myDiv.style('font-size', fontSize + 'px');\n}\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1842,"params":[{"name":"property","description":"<p>property to be set</p>\n","type":"String"}],"return":{"description":"value of property","type":"String"}},{"line":1880,"params":[{"name":"property","description":"","type":"String"},{"name":"value","description":"<p>value to assign to property</p>\n","type":"String|p5.Color"}],"chainable":1,"return":{"description":"current value of property, if no value is given as second argument","type":"String"}}]},{"file":"src/dom/dom.js","line":1937,"description":"<p>Adds a new attribute or changes the value of an existing attribute\n on the specified element. If no value is specified, returns the\n value of the given attribute, or null if attribute is not set.</p>\n","itemtype":"method","name":"attribute","return":{"description":"value of attribute","type":"String"},"example":["\n <div class='norender'><code>\n let myDiv = createDiv('I like pandas.');\n myDiv.attribute('align', 'center');\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1937,"params":[],"return":{"description":"value of attribute","type":"String"}},{"line":1952,"params":[{"name":"attr","description":"<p>attribute to set</p>\n","type":"String"},{"name":"value","description":"<p>value to assign to attribute</p>\n","type":"String"}],"chainable":1}]},{"file":"src/dom/dom.js","line":1981,"description":"<p>Removes an attribute on the specified element.</p>\n","itemtype":"method","name":"removeAttribute","params":[{"name":"attr","description":"<p>attribute to remove</p>\n","type":"String"}],"chainable":1,"example":["\n <div><code>\n let button;\n let checkbox;\nfunction setup() {\n   checkbox = createCheckbox('enable', true);\n   checkbox.changed(enableButton);\n   button = createButton('button');\n   button.position(10, 10);\n }\nfunction enableButton() {\n   if (this.checked()) {\n     // Re-enable the button\n     button.removeAttribute('disabled');\n   } else {\n     // Disable the button\n     button.attribute('disabled', '');\n   }\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2026,"description":"<p>Either returns the value of the element if no arguments\ngiven, or sets the value of the element.</p>\n","itemtype":"method","name":"value","return":{"description":"value of the element","type":"String|Number"},"example":["\n<div class='norender'><code>\n// gets the value\nlet inp;\nfunction setup() {\n  inp = createInput('');\n}\n\nfunction mousePressed() {\n  print(inp.value());\n}\n</code></div>\n<div class='norender'><code>\n// sets the value\nlet inp;\nfunction setup() {\n  inp = createInput('myValue');\n}\n\nfunction mousePressed() {\n  inp.value('myValue');\n}\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":2026,"params":[],"return":{"description":"value of the element","type":"String|Number"}},{"line":2056,"params":[{"name":"value","description":"","type":"String|Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":2072,"description":"<p>Shows the current element. Essentially, setting display:block for the style.</p>\n","itemtype":"method","name":"show","chainable":1,"example":["\n <div class='norender'><code>\n let div = createDiv('div');\n div.style('display', 'none');\n div.show(); // turns display to block\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2090,"description":"<p>Hides the current element. Essentially, setting display:none for the style.</p>\n","itemtype":"method","name":"hide","chainable":1,"example":["\n<div class='norender'><code>\nlet div = createDiv('this is a div');\ndiv.hide();\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2106,"description":"<p>Sets the width and height of the element. AUTO can be used to\n only adjust one dimension at a time. If no arguments are given, it\n returns the width and height of the element in an object. In case of\n elements which need to be loaded, such as images, it is recommended\n to call the function after the element has finished loading.</p>\n","itemtype":"method","name":"size","return":{"description":"the width and height of the element in an object","type":"Object"},"example":["\n <div class='norender'><code>\n let div = createDiv('this is a div');\n div.size(100, 100);\n let img = createImg(\n   'assets/rockies.jpg',\n   'A tall mountain with a small forest and field in front of it on a sunny day',\n   '',\n   () => {\n     img.size(10, AUTO);\n   }\n );\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":2106,"params":[],"return":{"description":"the width and height of the element in an object","type":"Object"}},{"line":2130,"params":[{"name":"w","description":"<p>width of the element, either AUTO, or a number</p>\n","type":"Number|Constant"},{"name":"h","description":"<p>height of the element, either AUTO, or a number</p>\n","type":"Number|Constant","optional":true}],"chainable":1}]},{"file":"src/dom/dom.js","line":2187,"description":"<p>Removes the element, stops all media streams, and deregisters all listeners.</p>\n","itemtype":"method","name":"remove","example":["\n<div class='norender'><code>\nlet myDiv = createDiv('this is some text');\nmyDiv.remove();\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2225,"description":"<p>Registers a callback that gets called every time a file that is\ndropped on the element has been loaded.\np5 will load every dropped file into memory and pass it as a p5.File object to the callback.\nMultiple files dropped at the same time will result in multiple calls to the callback.</p>\n<p>You can optionally pass a second callback which will be registered to the raw\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/Events/drop\">drop</a> event.\nThe callback will thus be provided the original\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/DragEvent\">DragEvent</a>.\nDropping multiple files at the same time will trigger the second callback once per drop,\nwhereas the first callback will trigger for each loaded file.</p>\n","itemtype":"method","name":"drop","params":[{"name":"callback","description":"<p>callback to receive loaded file, called for each file dropped.</p>\n","type":"Function"},{"name":"fxn","description":"<p>callback triggered once when files are dropped with the drop event.</p>\n","type":"Function","optional":true}],"chainable":1,"example":["\n<div><code>\nfunction setup() {\n  let c = createCanvas(100, 100);\n  background(200);\n  textAlign(CENTER);\n  text('drop file', width / 2, height / 2);\n  c.drop(gotFile);\n}\n\nfunction gotFile(file) {\n  background(200);\n  text('received file:', width / 2, height / 2);\n  text(file.name, width / 2, height / 2 + 50);\n}\n</code></div>\n\n<div><code>\nlet img;\n\nfunction setup() {\n  let c = createCanvas(100, 100);\n  background(200);\n  textAlign(CENTER);\n  text('drop image', width / 2, height / 2);\n  c.drop(gotFile);\n}\n\nfunction draw() {\n  if (img) {\n    image(img, 0, 0, width, height);\n  }\n}\n\nfunction gotFile(file) {\n  img = createImg(file.data, '').hide();\n}\n</code></div>"],"alt":"Canvas turns into whatever image is dragged/dropped onto it.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2357,"description":"<p>Path to the media element source.</p>\n","itemtype":"property","name":"src","return":{"description":"src","type":"String"},"example":["\n<div><code>\nlet ele;\n\nfunction setup() {\n  background(250);\n\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n\n  //In this example we create\n  //a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/beat.mp3');\n\n  //We'll set up our example so that\n  //when you click on the text,\n  //an alert box displays the MediaElement's\n  //src field.\n  textAlign(CENTER);\n  text('Click Me!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    //Show our p5.MediaElement's src field\n    alert(ele.src);\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2423,"description":"<p>Play an HTML5 media element.</p>\n","itemtype":"method","name":"play","chainable":1,"example":["\n<div><code>\nlet ele;\n\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n\n  //In this example we create\n  //a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/beat.mp3');\n\n  background(250);\n  textAlign(CENTER);\n  text('Click to Play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    //Here we call the play() function on\n    //the p5.MediaElement we created above.\n    //This will start the audio sample.\n    ele.play();\n\n    background(200);\n    text('You clicked Play!', width / 2, height / 2);\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2487,"description":"<p>Stops an HTML5 media element (sets current time to zero).</p>\n","itemtype":"method","name":"stop","chainable":1,"example":["\n<div><code>\n//This example both starts\n//and stops a sound sample\n//when the user clicks the canvas\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\n\n//while our audio is playing,\n//this will be set to true\nlet sampleIsPlaying = false;\n\nfunction setup() {\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/beat.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    background(200);\n\n    if (sampleIsPlaying) {\n      //if the sample is currently playing\n      //calling the stop() function on\n      //our p5.MediaElement will stop\n      //it and reset its current\n      //time to 0 (i.e. it will start\n      //at the beginning the next time\n      //you play it)\n      ele.stop();\n\n      sampleIsPlaying = false;\n      text('Click to play!', width / 2, height / 2);\n    } else {\n      //loop our sound element until we\n      //call ele.stop() on it.\n      ele.loop();\n\n      sampleIsPlaying = true;\n      text('Click to stop!', width / 2, height / 2);\n    }\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2551,"description":"<p>Pauses an HTML5 media element.</p>\n","itemtype":"method","name":"pause","chainable":1,"example":["\n<div><code>\n//This example both starts\n//and pauses a sound sample\n//when the user clicks the canvas\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\n\n//while our audio is playing,\n//this will be set to true\nlet sampleIsPlaying = false;\n\nfunction setup() {\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    background(200);\n\n    if (sampleIsPlaying) {\n      //Calling pause() on our\n      //p5.MediaElement will stop it\n      //playing, but when we call the\n      //loop() or play() functions\n      //the sample will start from\n      //where we paused it.\n      ele.pause();\n\n      sampleIsPlaying = false;\n      text('Click to resume!', width / 2, height / 2);\n    } else {\n      //loop our sound element until we\n      //call ele.pause() on it.\n      ele.loop();\n\n      sampleIsPlaying = true;\n      text('Click to pause!', width / 2, height / 2);\n    }\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2613,"description":"<p>Set 'loop' to true for an HTML5 media element, and starts playing.</p>\n","itemtype":"method","name":"loop","chainable":1,"example":["\n<div><code>\n//Clicking the canvas will loop\n//the audio sample until the user\n//clicks again to stop it\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\n\n//while our audio is playing,\n//this will be set to true\nlet sampleIsLooping = false;\n\nfunction setup() {\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to loop!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    background(200);\n\n    if (!sampleIsLooping) {\n      //loop our sound element until we\n      //call ele.stop() on it.\n      ele.loop();\n\n      sampleIsLooping = true;\n      text('Click to stop!', width / 2, height / 2);\n    } else {\n      ele.stop();\n\n      sampleIsLooping = false;\n      text('Click to loop!', width / 2, height / 2);\n    }\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2669,"description":"<p>Set 'loop' to false for an HTML5 media element. Element will stop\nwhen it reaches the end.</p>\n","itemtype":"method","name":"noLoop","chainable":1,"example":["\n<div><code>\n//This example both starts\n//and stops loop of sound sample\n//when the user clicks the canvas\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\n//while our audio is playing,\n//this will be set to true\nlet sampleIsPlaying = false;\n\nfunction setup() {\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/beat.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    background(200);\n\n    if (sampleIsPlaying) {\n      ele.noLoop();\n      sampleIsPlaying = false;\n      text('No more Loops!', width / 2, height / 2);\n    } else {\n      ele.loop();\n      sampleIsPlaying = true;\n      text('Click to stop looping!', width / 2, height / 2);\n    }\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2735,"description":"<p>Set HTML5 media element to autoplay or not. If no argument is specified, by\ndefault it will autoplay.</p>\n","itemtype":"method","name":"autoplay","params":[{"name":"shouldAutoplay","description":"<p>whether the element should autoplay</p>\n","type":"Boolean"}],"chainable":1,"example":["\n<div><code>\nlet videoElement;\nfunction setup() {\n  noCanvas();\n  videoElement = createVideo(['assets/small.mp4'], onVideoLoad);\n}\nfunction onVideoLoad() {\n  // The media will play as soon as it is loaded.\n  videoElement.autoplay();\n  videoElement.volume(0);\n  videoElement.size(100, 100);\n}\n</code></div>\n\n<div><code>\nlet videoElement;\nfunction setup() {\n  noCanvas();\n  videoElement = createVideo(['assets/small.mp4'], onVideoLoad);\n}\nfunction onVideoLoad() {\n  // The media will not play untill some explicitly triggered.\n  videoElement.autoplay(false);\n  videoElement.volume(0);\n  videoElement.size(100, 100);\n}\n\nfunction mouseClicked() {\n  videoElement.play();\n}\n</code></div>"],"alt":"An example of a video element which autoplays after it is loaded.\nAn example of a video element which waits for a trigger for playing.","class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2802,"description":"<p>Sets volume for this HTML5 media element. If no argument is given,\nreturns the current volume.</p>\n","itemtype":"method","name":"volume","return":{"description":"current volume","type":"Number"},"example":["\n<div><code>\nlet ele;\nfunction setup() {\n  // p5.MediaElement objects are usually created\n  // by calling the createAudio(), createVideo(),\n  // and createCapture() functions.\n  // In this example we create\n  // a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(250);\n  textAlign(CENTER);\n  text('Click to Play!', width / 2, height / 2);\n}\nfunction mouseClicked() {\n  // Here we call the volume() function\n  // on the sound element to set its volume\n  // Volume must be between 0.0 and 1.0\n  ele.volume(0.2);\n  ele.play();\n  background(200);\n  text('You clicked Play!', width / 2, height / 2);\n}\n</code></div>\n<div><code>\nlet audio;\nlet counter = 0;\n\nfunction loaded() {\n  audio.play();\n}\n\nfunction setup() {\n  audio = createAudio('assets/lucky_dragons.mp3', loaded);\n  textAlign(CENTER);\n}\n\nfunction draw() {\n  if (counter === 0) {\n    background(0, 255, 0);\n    text('volume(0.9)', width / 2, height / 2);\n  } else if (counter === 1) {\n    background(255, 255, 0);\n    text('volume(0.5)', width / 2, height / 2);\n  } else if (counter === 2) {\n    background(255, 0, 0);\n    text('volume(0.1)', width / 2, height / 2);\n  }\n}\n\nfunction mousePressed() {\n  counter++;\n  if (counter === 0) {\n    audio.volume(0.9);\n  } else if (counter === 1) {\n    audio.volume(0.5);\n  } else if (counter === 2) {\n    audio.volume(0.1);\n  } else {\n    counter = 0;\n    audio.volume(0.9);\n  }\n}\n</code>\n</div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM","overloads":[{"line":2802,"params":[],"return":{"description":"current volume","type":"Number"}},{"line":2875,"params":[{"name":"val","description":"<p>volume between 0.0 and 1.0</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":2888,"description":"<p>If no arguments are given, returns the current playback speed of the\nelement. The speed parameter sets the speed where 2.0 will play the\nelement twice as fast, 0.5 will play at half the speed, and -1 will play\nthe element in normal speed in reverse.(Note that not all browsers support\nbackward playback and even if they do, playback might not be smooth.)</p>\n","itemtype":"method","name":"speed","return":{"description":"current playback speed of the element","type":"Number"},"example":["\n<div class='norender notest'><code>\n//Clicking the canvas will loop\n//the audio sample until the user\n//clicks again to stop it\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\nlet button;\n\nfunction setup() {\n  createCanvas(710, 400);\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/beat.mp3');\n  ele.loop();\n  background(200);\n\n  button = createButton('2x speed');\n  button.position(100, 68);\n  button.mousePressed(twice_speed);\n\n  button = createButton('half speed');\n  button.position(200, 68);\n  button.mousePressed(half_speed);\n\n  button = createButton('reverse play');\n  button.position(300, 68);\n  button.mousePressed(reverse_speed);\n\n  button = createButton('STOP');\n  button.position(400, 68);\n  button.mousePressed(stop_song);\n\n  button = createButton('PLAY!');\n  button.position(500, 68);\n  button.mousePressed(play_speed);\n}\n\nfunction twice_speed() {\n  ele.speed(2);\n}\n\nfunction half_speed() {\n  ele.speed(0.5);\n}\n\nfunction reverse_speed() {\n  ele.speed(-1);\n}\n\nfunction stop_song() {\n  ele.stop();\n}\n\nfunction play_speed() {\n  ele.play();\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM","overloads":[{"line":2888,"params":[],"return":{"description":"current playback speed of the element","type":"Number"}},{"line":2960,"params":[{"name":"speed","description":"<p>speed multiplier for element playback</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":2977,"description":"<p>If no arguments are given, returns the current time of the element.\nIf an argument is given the current time of the element is set to it.</p>\n","itemtype":"method","name":"time","return":{"description":"current time (in seconds)","type":"Number"},"example":["\n<div><code>\nlet ele;\nlet beginning = true;\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n\n  //In this example we create\n  //a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(250);\n  textAlign(CENTER);\n  text('start at beginning', width / 2, height / 2);\n}\n\n// this function fires with click anywhere\nfunction mousePressed() {\n  if (beginning === true) {\n    // here we start the sound at the beginning\n    // time(0) is not necessary here\n    // as this produces the same result as\n    // play()\n    ele.play().time(0);\n    background(200);\n    text('jump 2 sec in', width / 2, height / 2);\n    beginning = false;\n  } else {\n    // here we jump 2 seconds into the sound\n    ele.play().time(2);\n    background(250);\n    text('start at beginning', width / 2, height / 2);\n    beginning = true;\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM","overloads":[{"line":2977,"params":[],"return":{"description":"current time (in seconds)","type":"Number"}},{"line":3022,"params":[{"name":"time","description":"<p>time to jump to (in seconds)</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":3036,"description":"<p>Returns the duration of the HTML5 media element.</p>\n","itemtype":"method","name":"duration","return":{"description":"duration","type":"Number"},"example":["\n<div><code>\nlet ele;\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n  //In this example we create\n  //a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/doorbell.mp3');\n  background(250);\n  textAlign(CENTER);\n  text('Click to know the duration!', 10, 25, 70, 80);\n}\nfunction mouseClicked() {\n  ele.play();\n  background(200);\n  //ele.duration dislpays the duration\n  text(ele.duration() + ' seconds', width / 2, height / 2);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3158,"description":"<p>Schedule an event to be called when the audio or video\nelement reaches the end. If the element is looping,\nthis will not be called. The element is passed in\nas the argument to the onended callback.</p>\n","itemtype":"method","name":"onended","params":[{"name":"callback","description":"<p>function to call when the\n                            soundfile has ended. The\n                            media element will be passed\n                            in as the argument to the\n                            callback.</p>\n","type":"Function"}],"chainable":1,"example":["\n<div><code>\nfunction setup() {\n  let audioEl = createAudio('assets/beat.mp3');\n  audioEl.showControls();\n  audioEl.onended(sayDone);\n}\n\nfunction sayDone(elt) {\n  alert('done playing ' + elt.src);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3189,"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3191,"description":"<p>Send the audio output of this element to a specified audioNode or\np5.sound object. If no element is provided, connects to p5's main\noutput. That connection is established when this method is first called.\nAll connections are removed by the .disconnect() method.</p>\n<p>This method is meant to be used with the p5.sound.js addon library.</p>\n","itemtype":"method","name":"connect","params":[{"name":"audioNode","description":"<p>AudioNode from the Web Audio API,\nor an object from the p5.sound library</p>\n","type":"AudioNode|Object"}],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3240,"description":"<p>Disconnect all Web Audio routing, including to main output.\nThis is useful if you want to re-route the output through\naudio effects, for example.</p>\n","itemtype":"method","name":"disconnect","class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3255,"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3257,"description":"<p>Show the default MediaElement controls, as determined by the web browser.</p>\n","itemtype":"method","name":"showControls","example":["\n<div><code>\nlet ele;\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n  //In this example we create\n  //a new p5.MediaElement via createAudio()\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to Show Controls!', 10, 25, 70, 80);\n}\nfunction mousePressed() {\n  ele.showControls();\n  background(200);\n  text('Controls Shown', width / 2, height / 2);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3288,"description":"<p>Hide the default mediaElement controls.</p>\n","itemtype":"method","name":"hideControls","example":["\n<div><code>\nlet ele;\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n  //In this example we create\n  //a new p5.MediaElement via createAudio()\n  ele = createAudio('assets/lucky_dragons.mp3');\n  ele.showControls();\n  background(200);\n  textAlign(CENTER);\n  text('Click to hide Controls!', 10, 25, 70, 80);\n}\nfunction mousePressed() {\n  ele.hideControls();\n  background(200);\n  text('Controls hidden', width / 2, height / 2);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3317,"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3328,"description":"<p>Schedule events to trigger every time a MediaElement\n(audio/video) reaches a playback cue point.</p>\n<p>Accepts a callback function, a time (in seconds) at which to trigger\nthe callback, and an optional parameter for the callback.</p>\n<p>Time will be passed as the first parameter to the callback function,\nand param will be the second parameter.</p>\n","itemtype":"method","name":"addCue","params":[{"name":"time","description":"<p>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.</p>\n","type":"Number"},{"name":"callback","description":"<p>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.</p>\n","type":"Function"},{"name":"value","description":"<p>An object to be passed as the\n                            second parameter to the\n                            callback function.</p>\n","type":"Object","optional":true}],"return":{"description":"id ID of this cue,\n                    useful for removeCue(id)","type":"Number"},"example":["\n<div><code>\n//\n//\nfunction setup() {\n  createCanvas(200, 200);\n\n  let audioEl = createAudio('assets/beat.mp3');\n  audioEl.showControls();\n\n  // schedule three calls to changeBackground\n  audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\n  audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\n  audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\n  audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\n  audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\n  audioEl.addCue(5.0, changeBackground, color(255, 255, 0));\n}\n\nfunction changeBackground(val) {\n  background(val);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3391,"description":"<p>Remove a callback based on its ID. The ID is returned by the\naddCue method.</p>\n","itemtype":"method","name":"removeCue","params":[{"name":"id","description":"<p>ID of the cue, as returned by addCue</p>\n","type":"Number"}],"example":["\n<div><code>\nlet audioEl, id1, id2;\nfunction setup() {\n  background(255, 255, 255);\n  audioEl = createAudio('assets/beat.mp3');\n  audioEl.showControls();\n  // schedule five calls to changeBackground\n  id1 = audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\n  audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\n  audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\n  audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\n  id2 = audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\n  text('Click to remove first and last Cue!', 10, 25, 70, 80);\n}\nfunction mousePressed() {\n  audioEl.removeCue(id1);\n  audioEl.removeCue(id2);\n}\nfunction changeBackground(val) {\n  background(val);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3433,"description":"<p>Remove all of the callbacks that had originally been scheduled\nvia the addCue method.</p>\n","itemtype":"method","name":"clearCues","params":[{"name":"id","description":"<p>ID of the cue, as returned by addCue</p>\n","type":"Number"}],"example":["\n<div><code>\nlet audioEl;\nfunction setup() {\n  background(255, 255, 255);\n  audioEl = createAudio('assets/beat.mp3');\n  //Show the default MediaElement controls, as determined by the web browser\n  audioEl.showControls();\n  // schedule calls to changeBackground\n  background(200);\n  text('Click to change Cue!', 10, 25, 70, 80);\n  audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\n  audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\n  audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\n  audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\n  audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\n}\nfunction mousePressed() {\n  // here we clear the scheduled callbacks\n  audioEl.clearCues();\n  // then we add some more callbacks\n  audioEl.addCue(1, changeBackground, color(2, 2, 2));\n  audioEl.addCue(3, changeBackground, color(255, 255, 0));\n}\nfunction changeBackground(val) {\n  background(val);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3499,"description":"<p>Underlying File object. All normal File methods can be called on this.</p>\n","itemtype":"property","name":"file","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3511,"description":"<p>File type (image, text, etc.)</p>\n","itemtype":"property","name":"type","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3517,"description":"<p>File subtype (usually the file extension jpg, png, xml, etc.)</p>\n","itemtype":"property","name":"subtype","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3523,"description":"<p>File name</p>\n","itemtype":"property","name":"name","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3529,"description":"<p>File size</p>\n","itemtype":"property","name":"size","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3536,"description":"<p>URL string containing either image data, the text contents of the file or\na parsed object if file is JSON and p5.XML if XML</p>\n","itemtype":"property","name":"data","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/events/acceleration.js","line":11,"description":"<p>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.</p>\n","itemtype":"property","name":"deviceOrientation","type":"Constant","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":23,"description":"<p>The system variable accelerationX always contains the acceleration of the\ndevice along the x axis. Value is represented as meters per second squared.</p>\n","itemtype":"property","name":"accelerationX","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"Magnitude of device acceleration is displayed as ellipse size","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":46,"description":"<p>The system variable accelerationY always contains the acceleration of the\ndevice along the y axis. Value is represented as meters per second squared.</p>\n","itemtype":"property","name":"accelerationY","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"Magnitude of device acceleration is displayed as ellipse size","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":69,"description":"<p>The system variable accelerationZ always contains the acceleration of the\ndevice along the z axis. Value is represented as meters per second squared.</p>\n","itemtype":"property","name":"accelerationZ","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"Magnitude of device acceleration is displayed as ellipse size","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":94,"description":"<p>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.</p>\n","itemtype":"property","name":"pAccelerationX","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":104,"description":"<p>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.</p>\n","itemtype":"property","name":"pAccelerationY","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":114,"description":"<p>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.</p>\n","itemtype":"property","name":"pAccelerationZ","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":135,"description":"<p>The system variable rotationX always contains the rotation of the\ndevice along the x axis. If the sketch <a href=\"#/p5/angleMode\">\nangleMode()</a> is set to DEGREES, the value will be -180 to 180. If\nit is set to RADIANS, the value will be -PI to PI.</p>\n<p>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.</p>\n","itemtype":"property","name":"rotationX","type":"Number","readonly":"","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  //rotateZ(radians(rotationZ));\n  rotateX(radians(rotationX));\n  //rotateY(radians(rotationY));\n  box(200, 200, 200);\n}\n</code>\n</div>"],"alt":"red horizontal line right, green vertical line bottom. black background.","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":168,"description":"<p>The system variable rotationY always contains the rotation of the\ndevice along the y axis. If the sketch <a href=\"#/p5/angleMode\">\nangleMode()</a> 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.</p>\n<p>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.</p>\n","itemtype":"property","name":"rotationY","type":"Number","readonly":"","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  //rotateZ(radians(rotationZ));\n  //rotateX(radians(rotationX));\n  rotateY(radians(rotationY));\n  box(200, 200, 200);\n}\n</code>\n</div>"],"alt":"red horizontal line right, green vertical line bottom. black background.","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":201,"description":"<p>The system variable rotationZ always contains the rotation of the\ndevice along the z axis. If the sketch <a href=\"#/p5/angleMode\">\nangleMode()</a> 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.</p>\n<p>Unlike rotationX and rotationY, this variable is available for devices\nwith a built-in compass only.</p>\n<p>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.</p>\n","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  rotateZ(radians(rotationZ));\n  //rotateX(radians(rotationX));\n  //rotateY(radians(rotationY));\n  box(200, 200, 200);\n}\n</code>\n</div>"],"itemtype":"property","name":"rotationZ","type":"Number","readonly":"","alt":"red horizontal line right, green vertical line bottom. black background.","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":239,"description":"<p>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 <a href=\"#/p5/angleMode\"> angleMode()</a> is set to DEGREES,\nthe value will be -180 to 180. If it is set to RADIANS, the value will\nbe -PI to PI.</p>\n<p>pRotationX can also be used with rotationX to determine the rotate\ndirection of the device along the X-axis.</p>\n","example":["\n<div class='norender'>\n<code>\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);\n</code>\n</div>"],"alt":"no image to display.","itemtype":"property","name":"pRotationX","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":285,"description":"<p>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 <a href=\"#/p5/angleMode\"> angleMode()</a> 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.</p>\n<p>pRotationY can also be used with rotationY to determine the rotate\ndirection of the device along the Y-axis.</p>\n","example":["\n<div class='norender'>\n<code>\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);\n</code>\n</div>"],"alt":"no image to display.","itemtype":"property","name":"pRotationY","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":330,"description":"<p>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 <a href=\"#/p5/angleMode\"> angleMode()</a> 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.</p>\n<p>pRotationZ can also be used with rotationZ to determine the rotate\ndirection of the device along the Z-axis.</p>\n","example":["\n<div class='norender'>\n<code>\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);\n</code>\n</div>"],"alt":"no image to display.","itemtype":"property","name":"pRotationZ","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":389,"description":"<p>When a device is rotated, the axis that triggers the <a href=\"#/p5/deviceTurned\">deviceTurned()</a>\nmethod is stored in the turnAxis variable. The turnAxis variable is only defined within\nthe scope of deviceTurned().</p>\n","itemtype":"property","name":"turnAxis","type":"String","readonly":"","example":["\n<div>\n<code>\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}\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</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device turns\n50x50 black rect in center of canvas. turns white on mobile when x-axis turns","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":428,"description":"<p>The <a href=\"#/p5/setMoveThreshold\">setMoveThreshold()</a> function is used to set the movement threshold for\nthe <a href=\"#/p5/deviceMoved\">deviceMoved()</a> function. The default threshold is set to 0.5.</p>\n","itemtype":"method","name":"setMoveThreshold","params":[{"name":"value","description":"<p>The threshold value</p>\n","type":"Number"}],"example":["\n<div class=\"norender\">\n<code>\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}\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</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device moves","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":471,"description":"<p>The <a href=\"#/p5/setShakeThreshold\">setShakeThreshold()</a> function is used to set the movement threshold for\nthe <a href=\"#/p5/deviceShaken\">deviceShaken()</a> function. The default threshold is set to 30.</p>\n","itemtype":"method","name":"setShakeThreshold","params":[{"name":"value","description":"<p>The threshold value</p>\n","type":"Number"}],"example":["\n<div class=\"norender\">\n<code>\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}\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</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device\nis being shaked","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":515,"description":"<p>The <a href=\"#/p5/deviceMoved\">deviceMoved()</a> 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 <a href=\"https://p5js.org/reference/#/p5/setMoveThreshold\">setMoveThreshold()</a>.</p>\n","itemtype":"method","name":"deviceMoved","example":["\n<div class=\"norender\">\n<code>\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}\nfunction deviceMoved() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device moves","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":546,"description":"<p>The <a href=\"#/p5/deviceTurned\">deviceTurned()</a> function is called when the device rotates by\nmore than 90 degrees continuously.</p>\n<p>The axis that triggers the <a href=\"#/p5/deviceTurned\">deviceTurned()</a> method is stored in the turnAxis\nvariable. The <a href=\"#/p5/deviceTurned\">deviceTurned()</a> method can be locked to trigger on any axis:\nX, Y or Z by comparing the turnAxis variable to 'X', 'Y' or 'Z'.</p>\n","itemtype":"method","name":"deviceTurned","example":["\n<div class=\"norender\">\n<code>\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}\nfunction deviceTurned() {\n  if (value === 0) {\n    value = 255;\n  } else if (value === 255) {\n    value = 0;\n  }\n}\n</code>\n</div>\n<div>\n<code>\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}\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</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device turns\n50x50 black rect in center of canvas. turns white on mobile when x-axis turns","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":604,"description":"<p>The <a href=\"#/p5/deviceShaken\">deviceShaken()</a> 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 <a href=\"https://p5js.org/reference/#/p5/setShakeThreshold\">setShakeThreshold()</a>.</p>\n","itemtype":"method","name":"deviceShaken","example":["\n<div class=\"norender\">\n<code>\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}\nfunction deviceShaken() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device shakes","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/keyboard.js","line":10,"description":"<p>The boolean system variable <a href=\"#/p5/keyIsPressed\">keyIsPressed</a> is true if any key is pressed\nand false if no keys are pressed.</p>\n","itemtype":"property","name":"keyIsPressed","type":"Boolean","readonly":"","example":["\n<div>\n<code>\nfunction draw() {\n  if (keyIsPressed === true) {\n    fill(0);\n  } else {\n    fill(255);\n  }\n  rect(25, 25, 50, 50);\n}\n</code>\n</div>"],"alt":"50x50 white rect that turns black on keypress.","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":36,"description":"<p>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 <a href=\"#/p5/keyTyped\">keyTyped()</a>. For non-ASCII keys, use the <a href=\"#/p5/keyCode\">keyCode</a>\nvariable.</p>\n","itemtype":"property","name":"key","type":"String","readonly":"","example":["\n<div><code>\n// Click any key to display it!\n// (Not Guaranteed to be Case Sensitive)\nfunction setup() {\n  fill(245, 123, 158);\n  textSize(50);\n}\n\nfunction draw() {\n  background(200);\n  text(key, 33, 65); // Display last key pressed.\n}\n</code></div>"],"alt":"canvas displays any key value that is pressed in pink font.","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":64,"description":"<p>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: <a href=\"http://keycode.info/\">keycode.info</a>.</p>\n","itemtype":"property","name":"keyCode","type":"Integer","readonly":"","example":["\n<div><code>\nlet fillVal = 126;\nfunction draw() {\n  fill(fillVal);\n  rect(25, 25, 50, 50);\n}\n\nfunction keyPressed() {\n  if (keyCode === UP_ARROW) {\n    fillVal = 255;\n  } else if (keyCode === DOWN_ARROW) {\n    fillVal = 0;\n  }\n}\n</code></div>\n<div><code>\nfunction draw() {}\nfunction keyPressed() {\n  background('yellow');\n  text(`${key} ${keyCode}`, 10, 40);\n  print(key, ' ', keyCode);\n}\n</code></div>"],"alt":"Grey rect center. turns white when up arrow pressed and black when down\nDisplay key pressed and its keyCode in a yellow box","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":103,"description":"<p>The <a href=\"#/p5/keyPressed\">keyPressed()</a> function is called once every time a key is pressed. The\nkeyCode for the key that was pressed is stored in the <a href=\"#/p5/keyCode\">keyCode</a> variable.</p>\n<p>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.</p>\n<p>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 <a href=\"#/p5/keyTyped\">keyTyped()</a> to read the key variable, in which the\ncase of the variable will be distinguished.</p>\n<p>Because of how operating systems handle key repeats, holding down a key\nmay cause multiple calls to <a href=\"#/p5/keyTyped\">keyTyped()</a> (and <a href=\"#/p5/keyReleased\">keyReleased()</a> as well). The\nrate of repeat is set by the operating system and how each computer is\nconfigured.<br><br>\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.</p>\n","itemtype":"method","name":"keyPressed","params":[{"name":"event","description":"<p>optional KeyboardEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyPressed() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyPressed() {\n  if (keyCode === LEFT_ARROW) {\n    value = 255;\n  } else if (keyCode === RIGHT_ARROW) {\n    value = 0;\n  }\n}\n</code>\n</div>\n<div class=\"norender\">\n<code>\nfunction keyPressed() {\n  // Do something\n  return false; // prevent any default behaviour\n}\n</code>\n</div>"],"alt":"black rect center. turns white when key pressed and black when released\nblack rect center. turns white when left arrow pressed and black when right.","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":190,"description":"<p>The <a href=\"#/p5/keyReleased\">keyReleased()</a> function is called once every time a key is released.\nSee <a href=\"#/p5/key\">key</a> and <a href=\"#/p5/keyCode\">keyCode</a> for more information.<br><br>\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.</p>\n","itemtype":"method","name":"keyReleased","params":[{"name":"event","description":"<p>optional KeyboardEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyReleased() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n  return false; // prevent any default behavior\n}\n</code>\n</div>"],"alt":"black rect center. turns white when key pressed and black when pressed again","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":243,"description":"<p>The <a href=\"#/p5/keyTyped\">keyTyped()</a> 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 <a href=\"#/p5/keyPressed\">keyPressed()</a> function instead.\nThe most recent key typed will be stored in the key variable.</p>\n<p>Because of how operating systems handle key repeats, holding down a key\nwill cause multiple calls to <a href=\"#/p5/keyTyped\">keyTyped()</a> (and <a href=\"#/p5/keyReleased\">keyReleased()</a> as well). The\nrate of repeat is set by the operating system and how each computer is\nconfigured.<br><br>\nBrowsers may have different default behaviors attached to various key\nevents. To prevent any default behavior for this event, add \"return false\"\nto the end of the method.</p>\n","itemtype":"method","name":"keyTyped","params":[{"name":"event","description":"<p>optional KeyboardEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyTyped() {\n  if (key === 'a') {\n    value = 255;\n  } else if (key === 'b') {\n    value = 0;\n  }\n  // uncomment to prevent any default behavior\n  // return false;\n}\n</code>\n</div>"],"alt":"black rect center. turns white when 'a' key typed and black when 'b' pressed","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":298,"description":"<p>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.</p>\n","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":308,"description":"<p>The <a href=\"#/p5/keyIsDown\">keyIsDown()</a> 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 <a href=\"#/p5/keyCode\">keyCode</a> names listed\n<a href=\"http://p5js.org/reference/#p5/keyCode\">here</a>.</p>\n","itemtype":"method","name":"keyIsDown","params":[{"name":"code","description":"<p>The key to check for.</p>\n","type":"Number"}],"return":{"description":"whether key is down or not","type":"Boolean"},"example":["\n<div><code>\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}\n</code></div>\n\n<div><code>\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}\n</code></div>"],"alt":"50x50 red ellipse moves left, right, up and down with arrow presses.\n50x50 red ellipse gets bigger or smaller when + or - are pressed.","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/mouse.js","line":12,"description":"<p>The variable movedX contains the horizontal movement of the mouse since the last frame</p>\n","itemtype":"property","name":"movedX","type":"Number","readonly":"","example":["\n <div class=\"notest\">\n <code>\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 }\n </code>\n </div>"],"alt":"box moves left and right according to mouse movement then slowly back towards the center","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":43,"description":"<p>The variable movedY contains the vertical movement of the mouse since the last frame</p>\n","itemtype":"property","name":"movedY","type":"Number","readonly":"","example":["\n<div class=\"notest\">\n<code>\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(y, 50, 50, 50);\n}\n</code>\n</div>"],"alt":"box moves up and down according to mouse movement then slowly back towards the center","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":80,"description":"<p>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.</p>\n","itemtype":"property","name":"mouseX","type":"Number","readonly":"","example":["\n<div>\n<code>\n// Move the mouse across the canvas\nfunction draw() {\n  background(244, 248, 252);\n  line(mouseX, 0, mouseX, 100);\n}\n</code>\n</div>"],"alt":"horizontal black line moves left and right with mouse x-position","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":106,"description":"<p>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.</p>\n","itemtype":"property","name":"mouseY","type":"Number","readonly":"","example":["\n<div>\n<code>\n// Move the mouse across the canvas\nfunction draw() {\n  background(244, 248, 252);\n  line(0, mouseY, 100, mouseY);\n}\n</code>\n</div>"],"alt":"vertical black line moves up and down with mouse y-position","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":132,"description":"<p>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.</p>\n","itemtype":"property","name":"pmouseX","type":"Number","readonly":"","example":["\n<div>\n<code>\n// Move the mouse across the canvas to leave a trail\nfunction setup() {\n  //slow down the frameRate to make it more visible\n  frameRate(10);\n}\n\nfunction draw() {\n  background(244, 248, 252);\n  line(mouseX, mouseY, pmouseX, pmouseY);\n  print(pmouseX + ' -> ' + mouseX);\n}\n</code>\n</div>"],"alt":"line trail is created from cursor movements. faster movement make longer line.","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":164,"description":"<p>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.</p>\n","itemtype":"property","name":"pmouseY","type":"Number","readonly":"","example":["\n<div>\n<code>\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n  //draw a square only if the mouse is not moving\n  if (mouseY === pmouseY && mouseX === pmouseX) {\n    rect(20, 20, 60, 60);\n  }\n\n  print(pmouseY + ' -> ' + mouseY);\n}\n</code>\n</div>"],"alt":"60x60 black rect center, fuchsia background. rect flickers on mouse movement","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":195,"description":"<p>The system variable winMouseX always contains the current horizontal\nposition of the mouse, relative to (0, 0) of the window.</p>\n","itemtype":"property","name":"winMouseX","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"60x60 black rect y moves with mouse y and fuchsia canvas moves with mouse x","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":233,"description":"<p>The system variable winMouseY always contains the current vertical\nposition of the mouse, relative to (0, 0) of the window.</p>\n","itemtype":"property","name":"winMouseY","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"60x60 black rect x moves with mouse x and fuchsia canvas y moves with mouse y","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":271,"description":"<p>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.</p>\n","itemtype":"property","name":"pwinMouseX","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"fuchsia ellipse moves with mouse x and y. Grows and shrinks with mouse speed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":311,"description":"<p>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.</p>\n","itemtype":"property","name":"pwinMouseY","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"fuchsia ellipse moves with mouse x and y. Grows and shrinks with mouse speed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":351,"description":"<p>Processing automatically tracks if the mouse button is pressed and which\nbutton is pressed. The value of the system variable mouseButton is either\nLEFT, RIGHT, or CENTER depending on which button was pressed last.\nWarning: different browsers may track mouseButton differently.</p>\n","itemtype":"property","name":"mouseButton","type":"Constant","readonly":"","example":["\n<div>\n<code>\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n\n  if (mouseIsPressed) {\n    if (mouseButton === LEFT) {\n      ellipse(50, 50, 50, 50);\n    }\n    if (mouseButton === RIGHT) {\n      rect(25, 25, 50, 50);\n    }\n    if (mouseButton === CENTER) {\n      triangle(23, 75, 50, 20, 78, 75);\n    }\n  }\n\n  print(mouseButton);\n}\n</code>\n</div>"],"alt":"50x50 black ellipse appears on center of fuchsia canvas on mouse click/press.","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":389,"description":"<p>The boolean system variable mouseIsPressed is true if the mouse is pressed\nand false if not.</p>\n","itemtype":"property","name":"mouseIsPressed","type":"Boolean","readonly":"","example":["\n<div>\n<code>\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n\n  if (mouseIsPressed) {\n    ellipse(50, 50, 50, 50);\n  } else {\n    rect(25, 25, 50, 50);\n  }\n\n  print(mouseIsPressed);\n}\n</code>\n</div>"],"alt":"black 50x50 rect becomes ellipse with mouse click/press. fuchsia background.","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":481,"description":"<p>The <a href=\"#/p5/mouseMoved\">mouseMoved()</a> function is called every time the mouse moves and a mouse\nbutton is not pressed.<br><br>\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.</p>\n","itemtype":"method","name":"mouseMoved","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction mouseMoved() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mouseMoved() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseMoved(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect becomes lighter with mouse movements until white then resets\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":535,"description":"<p>The <a href=\"#/p5/mouseDragged\">mouseDragged()</a> function is called once every time the mouse moves and\na mouse button is pressed. If no <a href=\"#/p5/mouseDragged\">mouseDragged()</a> function is defined, the\n<a href=\"#/p5/touchMoved\">touchMoved()</a> function will be called instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"mouseDragged","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction mouseDragged() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mouseDragged() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseDragged(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns lighter with mouse click and drag until white, resets\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":615,"description":"<p>The <a href=\"#/p5/mousePressed\">mousePressed()</a> 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\n<a href=\"#/p5/mousePressed\">mousePressed()</a> function is defined, the <a href=\"#/p5/touchStarted\">touchStarted()</a> function will be\ncalled instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"mousePressed","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\n// Click 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}\nfunction mousePressed() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mousePressed() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mousePressed(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns white with mouse click/press.\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":696,"description":"<p>The <a href=\"#/p5/mouseReleased\">mouseReleased()</a> function is called every time a mouse button is\nreleased. If no <a href=\"#/p5/mouseReleased\">mouseReleased()</a> function is defined, the <a href=\"#/p5/touchEnded\">touchEnded()</a>\nfunction will be called instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"mouseReleased","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction mouseReleased() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mouseReleased() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseReleased(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns white with mouse click/press.\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":772,"description":"<p>The <a href=\"#/p5/mouseClicked\">mouseClicked()</a> function is called once after a mouse button has been\npressed and then released.<br><br>\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 <a href=\"#/p5/mousePressed\">mousePressed()</a> or <a href=\"#/p5/mouseReleased\">mouseReleased()</a>.<br><br>\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.</p>\n","itemtype":"method","name":"mouseClicked","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\n\nfunction mouseClicked() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mouseClicked() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseClicked(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns white with mouse click/press.\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":841,"description":"<p>The <a href=\"#/p5/doubleClicked\">doubleClicked()</a> 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:\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/Events/dblclick\">https://developer.mozilla.org/en-US/docs/Web/Events/dblclick</a></p>\n","itemtype":"method","name":"doubleClicked","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\n\nfunction doubleClicked() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction doubleClicked() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction doubleClicked(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns white with mouse doubleClick/press.\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":926,"description":"<p>The function <a href=\"#/p5/mouseWheel\">mouseWheel()</a> is executed every time a vertical mouse wheel\nevent is detected either triggered by an actual mouse wheel or by a\ntouchpad.<br><br>\nThe event.delta property returns the amount the mouse wheel\nhave scrolled. The values can be positive or negative depending on the\nscroll direction (on OS X with \"natural\" scrolling enabled, the signs\nare inverted).<br><br>\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.<br><br>\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.</p>\n","itemtype":"method","name":"mouseWheel","params":[{"name":"event","description":"<p>optional WheelEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\nlet pos = 25;\n\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n  rect(25, pos, 50, 50);\n}\n\nfunction mouseWheel(event) {\n  print(event.delta);\n  //move the square according to the vertical scroll amount\n  pos += event.delta;\n  //uncomment to block page scrolling\n  //return false;\n}\n</code>\n</div>"],"alt":"black 50x50 rect moves up and down with vertical scroll. fuchsia background","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":979,"description":"<p>The function <a href=\"#/p5/requestPointerLock\">requestPointerLock()</a>\nlocks the pointer to its current position and makes it invisible.\nUse <a href=\"#/p5/movedX\">movedX</a> and <a href=\"#/p5/movedY\">movedY</a> 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.</p>\n","itemtype":"method","name":"requestPointerLock","example":["\n<div class=\"notest\">\n<code>\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}\n</code>\n</div>"],"alt":"3D scene moves according to mouse mouse movement in a first person perspective","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":1025,"description":"<p>The function <a href=\"#/p5/exitPointerLock\">exitPointerLock()</a>\nexits a previously triggered <a href=\"#/p5/requestPointerLock\">pointer Lock</a>\nfor example to make ui elements usable etc</p>\n","itemtype":"method","name":"exitPointerLock","example":["\n<div class=\"notest\">\n<code>\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}\nfunction mouseClicked() {\n  if (!locked) {\n    locked = true;\n    requestPointerLock();\n  } else {\n    exitPointerLock();\n    locked = false;\n  }\n}\n</code>\n</div>"],"alt":"cursor gets locked / unlocked on mouse-click","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/touch.js","line":10,"description":"<p>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.</p>\n<p>The touches[] array is not supported on Safari and IE on touch-based\ndesktops (laptops).</p>\n","itemtype":"property","name":"touches","type":"Object[]","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"Number of touches currently registered are displayed on the canvas","class":"p5","module":"Events","submodule":"Touch"},{"file":"src/events/touch.js","line":71,"description":"<p>The touchStarted() function is called once after every time a touch is\nregistered. If no <a href=\"#/p5/touchStarted\">touchStarted()</a> function is defined, the <a href=\"#/p5/mousePressed\">mousePressed()</a>\nfunction will be called instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"touchStarted","params":[{"name":"event","description":"<p>optional TouchEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction touchStarted() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction touchStarted() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a TouchEvent object\n// as a callback argument\nfunction touchStarted(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"50x50 black rect turns white with touch event.\nno image displayed","class":"p5","module":"Events","submodule":"Touch"},{"file":"src/events/touch.js","line":151,"description":"<p>The <a href=\"#/p5/touchMoved\">touchMoved()</a> function is called every time a touch move is registered.\nIf no <a href=\"#/p5/touchMoved\">touchMoved()</a> function is defined, the <a href=\"#/p5/mouseDragged\">mouseDragged()</a> function will\nbe called instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"touchMoved","params":[{"name":"event","description":"<p>optional TouchEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction touchMoved() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction touchMoved() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a TouchEvent object\n// as a callback argument\nfunction touchMoved(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"50x50 black rect turns lighter with touch until white. resets\nno image displayed","class":"p5","module":"Events","submodule":"Touch"},{"file":"src/events/touch.js","line":223,"description":"<p>The <a href=\"#/p5/touchEnded\">touchEnded()</a> function is called every time a touch ends. If no\n<a href=\"#/p5/touchEnded\">touchEnded()</a> function is defined, the <a href=\"#/p5/mouseReleased\">mouseReleased()</a> function will be\ncalled instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"touchEnded","params":[{"name":"event","description":"<p>optional TouchEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction touchEnded() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction touchEnded() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a TouchEvent object\n// as a callback argument\nfunction touchEnded(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"50x50 black rect turns white with touch.\nno image displayed","class":"p5","module":"Events","submodule":"Touch"},{"file":"src/image/filters.js","line":3,"description":"<p>This module defines the filters for use with image buffers.</p>\n<p>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.</p>\n<p>Generally speaking users of this module will use the Filters.apply method\non a canvas to create an effect.</p>\n<p>A number of functions are borrowed/adapted from\n<a href=\"http://www.html5rocks.com/en/tutorials/canvas/imagefilters/\">http://www.html5rocks.com/en/tutorials/canvas/imagefilters/</a>\nor the java processing implementation.</p>\n","class":"p5","module":"Events"},{"file":"src/image/image.js","line":8,"description":"<p>This module defines the p5 methods for the <a href=\"#/p5.Image\">p5.Image</a> class\nfor drawing images to the main display canvas.</p>\n","class":"p5","module":"Image","submodule":"Image"},{"file":"src/image/image.js","line":15,"description":"<p>Creates a new <a href=\"#/p5.Image\">p5.Image</a> (the datatype for storing images). This provides a\nfresh buffer of pixels to play with. Set the size of the buffer with the\nwidth and height parameters.</p>\n<p>.<a href=\"#/p5.Image/pixels\">pixels</a> gives access to an array containing the values for all the pixels\nin the display window.\nThese values are numbers. This array is the size (including an appropriate\nfactor for the <a href=\"#/p5/pixelDensity\">pixelDensity</a>) of the display window x4,\nrepresenting the R, G, B, A values in order for each pixel, moving from\nleft to right across each row, then down each column. See .<a href=\"#/p5.Image/pixels\">pixels</a> for\nmore info. It may also be simpler to use <a href=\"#/p5.Image/set\">set()</a> or <a href=\"#/p5.Image/get\">get()</a>.</p>\n<p>Before accessing the pixels of an image, the data must loaded with the\n<a href=\"#/p5.Image/loadPixels\">loadPixels()</a> function. After the array data has been modified, the\n<a href=\"#/p5.Image/updatePixels\">updatePixels()</a> function must be run to update the changes.</p>\n","itemtype":"method","name":"createImage","params":[{"name":"width","description":"<p>width in pixels</p>\n","type":"Integer"},{"name":"height","description":"<p>height in pixels</p>\n","type":"Integer"}],"return":{"description":"the <a href=\"#/p5.Image\">p5.Image</a> object","type":"p5.Image"},"example":["\n<div>\n<code>\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < img.width; i++) {\n  for (let j = 0; j < img.height; j++) {\n    img.set(i, j, color(0, 90, 102));\n  }\n}\nimg.updatePixels();\nimage(img, 17, 17);\n</code>\n</div>\n\n<div>\n<code>\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < img.width; i++) {\n  for (let j = 0; j < img.height; j++) {\n    img.set(i, j, color(0, 90, 102, (i % img.width) * 2));\n  }\n}\nimg.updatePixels();\nimage(img, 17, 17);\nimage(img, 34, 34);\n</code>\n</div>\n\n<div>\n<code>\nlet pink = color(255, 102, 204);\nlet img = createImage(66, 66);\nimg.loadPixels();\nlet d = pixelDensity();\nlet halfImage = 4 * (img.width * d) * (img.height / 2 * d);\nfor (let i = 0; i < halfImage; i += 4) {\n  img.pixels[i] = red(pink);\n  img.pixels[i + 1] = green(pink);\n  img.pixels[i + 2] = blue(pink);\n  img.pixels[i + 3] = alpha(pink);\n}\nimg.updatePixels();\nimage(img, 17, 17);\n</code>\n</div>"],"alt":"66x66 dark turquoise rect in center of canvas.\n2 gradated dark turquoise rects fade left. 1 center 1 bottom right of canvas\nno image displayed","class":"p5","module":"Image","submodule":"Image"},{"file":"src/image/image.js","line":94,"description":"<p>Save the current canvas as an image. The browser will either save the\nfile immediately, or prompt the user with a dialogue window.</p>\n","itemtype":"method","name":"saveCanvas","example":["\n <div class='norender notest'><code>\n function setup() {\n let c = createCanvas(100, 100);\n background(255, 0, 0);\n saveCanvas(c, 'myCanvas', 'jpg');\n }\n </code></div>\n <div class='norender notest'><code>\n // note that this example has the same result as above\n // if no canvas is specified, defaults to main canvas\n function setup() {\n let c = createCanvas(100, 100);\n background(255, 0, 0);\n saveCanvas('myCanvas', 'jpg');\n\n // all of the following are valid\n saveCanvas(c, 'myCanvas', 'jpg');\n saveCanvas(c, 'myCanvas.jpg');\n saveCanvas(c, 'myCanvas');\n saveCanvas(c);\n saveCanvas('myCanvas', 'png');\n saveCanvas('myCanvas');\n saveCanvas();\n }\n </code></div>"],"alt":"no image displayed\n no image displayed\n no image displayed","class":"p5","module":"Image","submodule":"Image","overloads":[{"line":94,"params":[{"name":"selectedCanvas","description":"<p>a variable\n                                representing a specific html5 canvas (optional)</p>\n","type":"p5.Element|HTMLCanvasElement"},{"name":"filename","description":"","type":"String","optional":true},{"name":"extension","description":"<p>'jpg' or 'png'</p>\n","type":"String","optional":true}]},{"line":136,"params":[{"name":"filename","description":"","type":"String","optional":true},{"name":"extension","description":"","type":"String","optional":true}]}]},{"file":"src/image/image.js","line":413,"description":"<p>Capture a sequence of frames that can be used to create a movie.\nAccepts a callback. For example, you may wish to send the frames\nto a server where they can be stored or converted into a movie.\nIf no callback is provided, the browser will pop up save dialogues in an\nattempt to download all of the images that have just been created. With the\ncallback provided the image data isn't saved by default but instead passed\nas an argument to the callback function as an array of objects, with the\nsize of array equal to the total number of frames.</p>\n<p>Note that <a href=\"#/p5.Image/saveFrames\">saveFrames()</a> will only save the first 15 frames of an animation.\nTo export longer animations, you might look into a library like\n<a href=\"https://github.com/spite/ccapture.js/\">ccapture.js</a>.</p>\n","itemtype":"method","name":"saveFrames","params":[{"name":"filename","description":"","type":"String"},{"name":"extension","description":"<p>'jpg' or 'png'</p>\n","type":"String"},{"name":"duration","description":"<p>Duration in seconds to save the frames for.</p>\n","type":"Number"},{"name":"framerate","description":"<p>Framerate to save the frames in.</p>\n","type":"Number"},{"name":"callback","description":"<p>A callback function that will be executed\n                                to handle the image data. This function\n                                should accept an array as argument. The\n                                array will contain the specified number of\n                                frames of objects. Each object has three\n                                properties: imageData - an\n                                image/octet-stream, filename and extension.</p>\n","type":"Function(Array)","optional":true}],"example":["\n<div><code>\n function draw() {\n background(mouseX);\n }\n\n function mousePressed() {\n saveFrames('out', 'png', 1, 25, data => {\n   print(data);\n });\n }\n</code></div>"],"alt":"canvas background goes from light to dark with mouse x.","class":"p5","module":"Image","submodule":"Image"},{"file":"src/image/loading_displaying.js","line":18,"description":"<p>Loads an image from a path and creates a <a href=\"#/p5.Image\">p5.Image</a> from it.</p>\n<p>The image may not be immediately available for rendering.\nIf you want to ensure that the image is ready before doing\nanything with it, place the <a href=\"#/p5/loadImage\">loadImage()</a> call in <a href=\"#/p5/preload\">preload()</a>.\nYou may also supply a callback function to handle the image when it's ready.</p>\n<p>The path to the image should be relative to the HTML file\nthat links in your sketch. Loading an image from a URL or other\nremote location may be blocked due to your browser's built-in\nsecurity.</p>\n<p>You can also pass in a string of a base64 encoded image as an alternative to the file path.\nRemember to add \"data:image/png;base64,\" in front of the string.</p>\n","itemtype":"method","name":"loadImage","params":[{"name":"path","description":"<p>Path of the image to be loaded</p>\n","type":"String"},{"name":"successCallback","description":"<p>Function to be called once\n                               the image is loaded. Will be passed the\n                               <a href=\"#/p5.Image\">p5.Image</a>.</p>\n","type":"function(p5.Image)","optional":true},{"name":"failureCallback","description":"<p>called with event error if\n                               the image fails to load.</p>\n","type":"Function(Event)","optional":true}],"return":{"description":"the <a href=\"#/p5.Image\">p5.Image</a> object","type":"p5.Image"},"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n}\n</code>\n</div>\n<div>\n<code>\nfunction setup() {\n  // here we use a callback to display the image after loading\n  loadImage('assets/laDefense.jpg', img => {\n    image(img, 0, 0);\n  });\n}\n</code>\n</div>"],"alt":"image of the underside of a white umbrella and grided ceililng above\nimage of the underside of a white umbrella and grided ceililng above","class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/loading_displaying.js","line":162,"description":"<p>Helper function for loading GIF-based images</p>\n","class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/loading_displaying.js","line":269,"description":"<p>Draw an image to the p5.js canvas.</p>\n<p>This function can be used with different numbers of parameters. The\nsimplest use requires only three parameters: img, x, and y—where (x, y) is\nthe position of the image. Two more parameters can optionally be added to\nspecify the width and height of the image.</p>\n<p>This function can also be used with all eight Number parameters. To\ndifferentiate between all these parameters, p5.js uses the language of\n\"destination rectangle\" (which corresponds to \"dx\", \"dy\", etc.) and \"source\nimage\" (which corresponds to \"sx\", \"sy\", etc.) below. Specifying the\n\"source image\" dimensions can be useful when you want to display a\nsubsection of the source image instead of the whole thing. Here's a diagram\nto explain further:\n<img src=\"assets/drawImage.png\"></img></p>\n","itemtype":"method","name":"image","example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  // Top-left corner of the img is at (0, 0)\n  // Width and height are the img's original width and height\n  image(img, 0, 0);\n}\n</code>\n</div>\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  background(50);\n  // Top-left corner of the img is at (10, 10)\n  // Width and height are 50 x 50\n  image(img, 10, 10, 50, 50);\n}\n</code>\n</div>\n<div>\n<code>\nfunction setup() {\n  // Here, we use a callback to display the image after loading\n  loadImage('assets/laDefense.jpg', img => {\n    image(img, 0, 0);\n  });\n}\n</code>\n</div>\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/gradient.png');\n}\nfunction setup() {\n  // 1. Background image\n  // Top-left corner of the img is at (0, 0)\n  // Width and height are the img's original width and height, 100 x 100\n  image(img, 0, 0);\n  // 2. Top right image\n  // Top-left corner of destination rectangle is at (50, 0)\n  // Destination rectangle width and height are 40 x 20\n  // The next parameters are relative to the source image:\n  // - Starting at position (50, 50) on the source image, capture a 50 x 50\n  // subsection\n  // - Draw this subsection to fill the dimensions of the destination rectangle\n  image(img, 50, 0, 40, 20, 50, 50, 50, 50);\n}\n</code>\n</div>"],"alt":"image of the underside of a white umbrella and gridded ceiling above\nimage of the underside of a white umbrella and gridded ceiling above","class":"p5","module":"Image","submodule":"Loading & Displaying","overloads":[{"line":269,"params":[{"name":"img","description":"<p>the image to display</p>\n","type":"p5.Image|p5.Element"},{"name":"x","description":"<p>the x-coordinate of the top-left corner of the image</p>\n","type":"Number"},{"name":"y","description":"<p>the y-coordinate of the top-left corner of the image</p>\n","type":"Number"},{"name":"width","description":"<p>the width to draw the image</p>\n","type":"Number","optional":true},{"name":"height","description":"<p>the height to draw the image</p>\n","type":"Number","optional":true}]},{"line":356,"params":[{"name":"img","description":"","type":"p5.Image|p5.Element"},{"name":"dx","description":"<p>the x-coordinate of the destination\n                          rectangle in which to draw the source image</p>\n","type":"Number"},{"name":"dy","description":"<p>the y-coordinate of the destination\n                          rectangle in which to draw the source image</p>\n","type":"Number"},{"name":"dWidth","description":"<p>the width of the destination rectangle</p>\n","type":"Number"},{"name":"dHeight","description":"<p>the height of the destination rectangle</p>\n","type":"Number"},{"name":"sx","description":"<p>the x-coordinate of the subsection of the source\nimage to draw into the destination rectangle</p>\n","type":"Number"},{"name":"sy","description":"<p>the y-coordinate of the subsection of the source\nimage to draw into the destination rectangle</p>\n","type":"Number"},{"name":"sWidth","description":"<p>the width of the subsection of the\n                          source image to draw into the destination\n                          rectangle</p>\n","type":"Number","optional":true},{"name":"sHeight","description":"<p>the height of the subsection of the\n                           source image to draw into the destination rectangle</p>\n","type":"Number","optional":true}]}]},{"file":"src/image/loading_displaying.js","line":439,"description":"<p>Sets the fill value for displaying images. Images can be tinted to\nspecified colors or made transparent by including an alpha value.</p>\n<p>To apply transparency to an image without affecting its color, use\nwhite as the tint color and specify an alpha value. For instance,\ntint(255, 128) will make an image 50% transparent (assuming the default\nalpha range of 0-255, which can be changed with <a href=\"#/p5/colorMode\">colorMode()</a>).</p>\n<p>The value for the gray parameter must be less than or equal to the current\nmaximum value as specified by <a href=\"#/p5/colorMode\">colorMode()</a>. The default maximum value is\n255.</p>\n","itemtype":"method","name":"tint","example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  tint(0, 153, 204); // Tint blue\n  image(img, 50, 0);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  tint(0, 153, 204, 126); // Tint blue and set transparency\n  image(img, 50, 0);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  tint(255, 126); // Apply transparency without changing color\n  image(img, 50, 0);\n}\n</code>\n</div>"],"alt":"2 side by side images of umbrella and ceiling, one image with blue tint\nImages of umbrella and ceiling, one half of image with blue tint\n2 side by side images of umbrella and ceiling, one image translucent","class":"p5","module":"Image","submodule":"Loading & Displaying","overloads":[{"line":439,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}]},{"line":510,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}]},{"line":515,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}]},{"line":521,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}]},{"line":527,"params":[{"name":"color","description":"<p>the tint color</p>\n","type":"p5.Color"}]}]},{"file":"src/image/loading_displaying.js","line":537,"description":"<p>Removes the current fill value for displaying images and reverts to\ndisplaying images with their original hues.</p>\n","itemtype":"method","name":"noTint","example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  tint(0, 153, 204); // Tint blue\n  image(img, 0, 0);\n  noTint(); // Disable tint\n  image(img, 50, 0);\n}\n</code>\n</div>"],"alt":"2 side by side images of bricks, left image with blue tint","class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/loading_displaying.js","line":601,"description":"<p>Set image mode. Modifies the location from which images are drawn by\nchanging the way in which parameters given to <a href=\"#/p5/image\">image()</a> are interpreted.\nThe default mode is imageMode(CORNER), which interprets the second and\nthird parameters of <a href=\"#/p5/image\">image()</a> as the upper-left corner of the image. If\ntwo additional parameters are specified, they are used to set the image's\nwidth and height.</p>\n<p>imageMode(CORNERS) interprets the second and third parameters of <a href=\"#/p5/image\">image()</a>\nas the location of one corner, and the fourth and fifth parameters as the\nopposite corner.</p>\n<p>imageMode(CENTER) interprets the second and third parameters of <a href=\"#/p5/image\">image()</a>\nas the image's center point. If two additional parameters are specified,\nthey are used to set the image's width and height.</p>\n","itemtype":"method","name":"imageMode","params":[{"name":"mode","description":"<p>either CORNER, CORNERS, or CENTER</p>\n","type":"Constant"}],"example":["\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  imageMode(CORNER);\n  image(img, 10, 10, 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  imageMode(CORNERS);\n  image(img, 10, 10, 90, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  imageMode(CENTER);\n  image(img, 50, 50, 80, 80);\n}\n</code>\n</div>"],"alt":"small square image of bricks\nhorizontal rectangle image of bricks\nlarge square image of bricks","class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/p5.Image.js","line":9,"description":"<p>This module defines the <a href=\"#/p5.Image\">p5.Image</a> class and P5 methods for\ndrawing images to the main display canvas.</p>\n","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":88,"description":"<p>Image width.</p>\n","itemtype":"property","name":"width","type":"Number","readonly":"","example":["\n<div><code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100);\n  image(img, 0, 0);\n  for (let i = 0; i < img.width; i++) {\n    let c = img.get(i, img.height / 2);\n    stroke(c);\n    line(i, height / 2, i, height);\n  }\n}\n</code></div>"],"alt":"rocky mountains in top and horizontal lines in corresponding colors in bottom.","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":115,"description":"<p>Image height.</p>\n","itemtype":"property","name":"height","type":"Number","readonly":"","example":["\n<div><code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100);\n  image(img, 0, 0);\n  for (let i = 0; i < img.height; i++) {\n    let c = img.get(img.width / 2, i);\n    stroke(c);\n    line(0, i, width / 2, i);\n  }\n}\n</code></div>"],"alt":"rocky mountains on right and vertical lines in corresponding colors on left.","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":152,"description":"<p>Array containing the values for all the pixels in the display window.\nThese values are numbers. This array is the size (include an appropriate\nfactor for pixelDensity) of the display window x4,\nrepresenting the R, G, B, A values in order for each pixel, moving from\nleft to right across each row, then down each column. Retina and other\nhigh density displays may have more pixels (by a factor of\npixelDensity^2).\nFor example, if the image is 100x100 pixels, there will be 40,000. With\npixelDensity = 2, there will be 160,000. The first four values\n(indices 0-3) in the array will be the R, G, B, A values of the pixel at\n(0, 0). The second four values (indices 4-7) will contain the R, G, B, A\nvalues of the pixel at (1, 0). More generally, to set values for a pixel\nat (x, y):</p>\n<pre><code class=\"language-javascript\">let d = pixelDensity();\nfor (let i = 0; i < d; i++) {\n  for (let j = 0; j < d; j++) {\n    // loop over\n    index = 4 * ((y * d + j) * width * d + (x * d + i));\n    pixels[index] = r;\n    pixels[index+1] = g;\n    pixels[index+2] = b;\n    pixels[index+3] = a;\n  }\n}</code></pre>\n<p>Before accessing this array, the data must loaded with the <a href=\"#/p5.Image/loadPixels\">loadPixels()</a>\nfunction. After the array data has been modified, the <a href=\"#/p5.Image/updatePixels\">updatePixels()</a>\nfunction must be run to update the changes.</p>\n","itemtype":"property","name":"pixels","type":"Number[]","example":["\n<div>\n<code>\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < img.width; i++) {\n  for (let j = 0; j < img.height; j++) {\n    img.set(i, j, color(0, 90, 102));\n  }\n}\nimg.updatePixels();\nimage(img, 17, 17);\n</code>\n</div>\n<div>\n<code>\nlet pink = color(255, 102, 204);\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < 4 * (width * height / 2); i += 4) {\n  img.pixels[i] = red(pink);\n  img.pixels[i + 1] = green(pink);\n  img.pixels[i + 2] = blue(pink);\n  img.pixels[i + 3] = alpha(pink);\n}\nimg.updatePixels();\nimage(img, 17, 17);\n</code>\n</div>"],"alt":"66x66 turquoise rect in center of canvas\n66x66 pink rect in center of canvas","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":222,"description":"<p>Helper function for animating GIF-based images with time</p>\n","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":253,"description":"<p>Helper fxn for sharing pixel methods</p>\n","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":261,"description":"<p>Loads the pixels data for this image into the [pixels] attribute.</p>\n","itemtype":"method","name":"loadPixels","example":["\n<div><code>\nlet myImage;\nlet halfImage;\n\nfunction preload() {\n  myImage = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  myImage.loadPixels();\n  halfImage = 4 * myImage.width * myImage.height / 2;\n  for (let i = 0; i < halfImage; i++) {\n    myImage.pixels[i + halfImage] = myImage.pixels[i];\n  }\n  myImage.updatePixels();\n}\n\nfunction draw() {\n  image(myImage, 0, 0, width, height);\n}\n</code></div>"],"alt":"2 images of rocky mountains vertically stacked","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":296,"description":"<p>Updates the backing canvas for this image with the contents of\nthe [pixels] array.</p>\n<p>If this image is an animated GIF then the pixels will be updated\nin the frame that is currently displayed.</p>\n","itemtype":"method","name":"updatePixels","example":["\n<div><code>\nlet myImage;\nlet halfImage;\n\nfunction preload() {\n  myImage = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  myImage.loadPixels();\n  halfImage = 4 * myImage.width * myImage.height / 2;\n  for (let i = 0; i < halfImage; i++) {\n    myImage.pixels[i + halfImage] = myImage.pixels[i];\n  }\n  myImage.updatePixels();\n}\n\nfunction draw() {\n  image(myImage, 0, 0, width, height);\n}\n</code></div>"],"alt":"2 images of rocky mountains vertically stacked","class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":296,"params":[{"name":"x","description":"<p>x-offset of the target update area for the\n                             underlying canvas</p>\n","type":"Integer"},{"name":"y","description":"<p>y-offset of the target update area for the\n                             underlying canvas</p>\n","type":"Integer"},{"name":"w","description":"<p>height of the target update area for the\n                             underlying canvas</p>\n","type":"Integer"},{"name":"h","description":"<p>height of the target update area for the\n                             underlying canvas</p>\n","type":"Integer"}]},{"line":338,"params":[]}]},{"file":"src/image/p5.Image.js","line":346,"description":"<p>Get a region of pixels from an image.</p>\n<p>If no params are passed, the whole image is returned.\nIf x and y are the only params passed a single pixel is extracted.\nIf all params are passed a rectangle region is extracted and a <a href=\"#/p5.Image\">p5.Image</a>\nis returned.</p>\n","itemtype":"method","name":"get","return":{"description":"the rectangle <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"},"example":["\n<div><code>\nlet myImage;\nlet c;\n\nfunction preload() {\n  myImage = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  background(myImage);\n  noStroke();\n  c = myImage.get(60, 90);\n  fill(c);\n  rect(25, 25, 50, 50);\n}\n\n//get() returns color here\n</code></div>"],"alt":"image of rocky mountains with 50x50 green rect in front","class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":346,"params":[{"name":"x","description":"<p>x-coordinate of the pixel</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the pixel</p>\n","type":"Number"},{"name":"w","description":"<p>width</p>\n","type":"Number"},{"name":"h","description":"<p>height</p>\n","type":"Number"}],"return":{"description":"the rectangle <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"}},{"line":383,"params":[],"return":{"description":"the whole <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"}},{"line":387,"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/image/p5.Image.js","line":400,"description":"<p>Set the color of a single pixel or write an image into\nthis <a href=\"#/p5.Image\">p5.Image</a>.</p>\n<p>Note that for a large number of pixels this will\nbe slower than directly manipulating the pixels array\nand then calling <a href=\"#/p5.Image/updatePixels\">updatePixels()</a>.</p>\n","itemtype":"method","name":"set","params":[{"name":"x","description":"<p>x-coordinate of the pixel</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the pixel</p>\n","type":"Number"},{"name":"a","description":"<p>grayscale value | pixel array |\n                               a <a href=\"#/p5.Color\">p5.Color</a> | image to copy</p>\n","type":"Number|Number[]|Object"}],"example":["\n<div>\n<code>\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < img.width; i++) {\n  for (let j = 0; j < img.height; j++) {\n    img.set(i, j, color(0, 90, 102, (i % img.width) * 2));\n  }\n}\nimg.updatePixels();\nimage(img, 17, 17);\nimage(img, 34, 34);\n</code>\n</div>"],"alt":"2 gradated dark turquoise rects fade left. 1 center 1 bottom right of canvas","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":437,"description":"<p>Resize the image to a new width and height. To make the image scale\nproportionally, use 0 as the value for the wide or high parameter.\nFor instance, to make the width of an image 150 pixels, and change\nthe height using the same proportion, use resize(150, 0).</p>\n","itemtype":"method","name":"resize","params":[{"name":"width","description":"<p>the resized image width</p>\n","type":"Number"},{"name":"height","description":"<p>the resized image height</p>\n","type":"Number"}],"example":["\n<div><code>\nlet img;\n\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction draw() {\n  image(img, 0, 0);\n}\n\nfunction mousePressed() {\n  img.resize(50, 100);\n}\n</code></div>"],"alt":"image of rocky mountains. zoomed in","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":548,"description":"<p>Copies a region of pixels from one image to another. If no\nsrcImage is specified this is used as the source. If the source\nand destination regions aren't the same size, it will\nautomatically resize source pixels to fit the specified\ntarget region.</p>\n","itemtype":"method","name":"copy","example":["\n<div><code>\nlet photo;\nlet bricks;\nlet x;\nlet y;\n\nfunction preload() {\n  photo = loadImage('assets/rockies.jpg');\n  bricks = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n  x = bricks.width / 2;\n  y = bricks.height / 2;\n  photo.copy(bricks, 0, 0, x, y, 0, 0, x, y);\n  image(photo, 0, 0);\n}\n</code></div>"],"alt":"image of rocky mountains and smaller image on top of bricks at top left","class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":548,"params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image|p5.Element"},{"name":"sx","description":"<p>X coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sy","description":"<p>Y coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sw","description":"<p>source image width</p>\n","type":"Integer"},{"name":"sh","description":"<p>source image height</p>\n","type":"Integer"},{"name":"dx","description":"<p>X coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dy","description":"<p>Y coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dw","description":"<p>destination image width</p>\n","type":"Integer"},{"name":"dh","description":"<p>destination image height</p>\n","type":"Integer"}]},{"line":588,"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":603,"description":"<p>Masks part of an image from displaying by loading another\nimage and using its alpha channel as an alpha channel for\nthis image. Masks are cumulative, one applied to an image\nobject, they cannot be removed.</p>\n","itemtype":"method","name":"mask","params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image"}],"example":["\n<div><code>\nlet photo, maskImage;\nfunction preload() {\n  photo = loadImage('assets/rockies.jpg');\n  maskImage = loadImage('assets/mask2.png');\n}\n\nfunction setup() {\n  createCanvas(100, 100);\n  photo.mask(maskImage);\n  image(photo, 0, 0);\n}\n</code></div>"],"alt":"image of rocky mountains with white at right\n\nhttp://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":665,"description":"<p>Applies an image filter to a <a href=\"#/p5.Image\">p5.Image</a></p>\n<p>THRESHOLD\nConverts the image to black and white pixels depending if they are above or\nbelow the threshold defined by the level parameter. The parameter must be\nbetween 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.</p>\n<p>GRAY\nConverts any colors in the image to grayscale equivalents. No parameter\nis used.</p>\n<p>OPAQUE\nSets the alpha channel to entirely opaque. No parameter is used.</p>\n<p>INVERT\nSets each pixel to its inverse value. No parameter is used.</p>\n<p>POSTERIZE\nLimits each channel of the image to the number of colors specified as the\nparameter. The parameter can be set to values between 2 and 255, but\nresults are most noticeable in the lower ranges.</p>\n<p>BLUR\nExecutes a Gaussian blur with the level parameter specifying the extent\nof the blurring. If no parameter is used, the blur is equivalent to\nGaussian blur of radius 1. Larger values increase the blur.</p>\n<p>ERODE\nReduces the light areas. No parameter is used.</p>\n<p>DILATE\nIncreases the light areas. No parameter is used.</p>\n<p>filter() does not work in WEBGL mode.\nA similar effect can be achieved in WEBGL mode using custom\nshaders. Adam Ferriss has written\na <a href=\"https://github.com/aferriss/p5jsShaderExamples\"\ntarget='_blank'>selection of shader examples</a> that contains many\nof the effects present in the filter examples.</p>\n","itemtype":"method","name":"filter","params":[{"name":"filterType","description":"<p>either THRESHOLD, GRAY, OPAQUE, INVERT,\n                               POSTERIZE, ERODE, DILATE or BLUR.\n                               See Filters.js for docs on\n                               each available filter</p>\n","type":"Constant"},{"name":"filterParam","description":"<p>an optional parameter unique\n                               to each filter, see above</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\nlet photo1;\nlet photo2;\n\nfunction preload() {\n  photo1 = loadImage('assets/rockies.jpg');\n  photo2 = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  photo2.filter(GRAY);\n  image(photo1, 0, 0);\n  image(photo2, width / 2, 0);\n}\n</code></div>"],"alt":"2 images of rocky mountains left one in color, right in black and white","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":738,"description":"<p>Copies a region of pixels from one image to another, using a specified\nblend mode to do the operation.</p>\n","itemtype":"method","name":"blend","example":["\n<div><code>\nlet mountains;\nlet bricks;\n\nfunction preload() {\n  mountains = loadImage('assets/rockies.jpg');\n  bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n  image(mountains, 0, 0);\n  image(bricks, 0, 0);\n}\n</code></div>\n<div><code>\nlet mountains;\nlet bricks;\n\nfunction preload() {\n  mountains = loadImage('assets/rockies.jpg');\n  bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n  image(mountains, 0, 0);\n  image(bricks, 0, 0);\n}\n</code></div>\n<div><code>\nlet mountains;\nlet bricks;\n\nfunction preload() {\n  mountains = loadImage('assets/rockies.jpg');\n  bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n  image(mountains, 0, 0);\n  image(bricks, 0, 0);\n}\n</code></div>"],"alt":"image of rocky mountains. Brick images on left and right. Right overexposed\nimage of rockies. Brickwall images on left and right. Right mortar transparent\nimage of rockies. Brickwall images on left and right. Right translucent","class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":738,"params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image"},{"name":"sx","description":"<p>X coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sy","description":"<p>Y coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sw","description":"<p>source image width</p>\n","type":"Integer"},{"name":"sh","description":"<p>source image height</p>\n","type":"Integer"},{"name":"dx","description":"<p>X coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dy","description":"<p>Y coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dw","description":"<p>destination image width</p>\n","type":"Integer"},{"name":"dh","description":"<p>destination image height</p>\n","type":"Integer"},{"name":"blendMode","description":"<p>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.</p>\n<p>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</p>\n<p><a href=\"http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/\">http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/</a></p>\n","type":"Constant"}]},{"line":815,"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":859,"description":"<p>Saves the image to a file and force the browser to download it.\nAccepts two strings for filename and file extension\nSupports png (default), jpg, and gif\n<br><br>\nNote that the file will only be downloaded as an animated GIF\nif the p5.Image was loaded from a GIF file.</p>\n","itemtype":"method","name":"save","params":[{"name":"filename","description":"<p>give your file a name</p>\n","type":"String"},{"name":"extension","description":"<p>'png' or 'jpg'</p>\n","type":"String"}],"example":["\n<div><code>\nlet photo;\n\nfunction preload() {\n  photo = loadImage('assets/rockies.jpg');\n}\n\nfunction draw() {\n  image(photo, 0, 0);\n}\n\nfunction keyTyped() {\n  if (key === 's') {\n    photo.save('photo', 'png');\n  }\n}\n</code></div>"],"alt":"image of rocky mountains.","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":900,"description":"<p>Starts an animated GIF over at the beginning state.</p>\n","itemtype":"method","name":"reset","example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/arnott-wallace-wink-loop-once.gif');\n}\n\nfunction draw() {\n  background(255);\n  // The GIF file that we loaded only loops once\n  // so it freezes on the last frame after playing through\n  image(gif, 0, 0);\n}\n\nfunction mousePressed() {\n  // Click to reset the GIF and begin playback from start\n  gif.reset();\n}\n</code></div>"],"alt":"Animated image of a cartoon face that winks once and then freezes\nWhen you click it animates again, winks once and freezes","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":941,"description":"<p>Gets the index for the frame that is currently visible in an animated GIF.</p>\n","itemtype":"method","name":"getCurrentFrame","return":{"description":"The index for the currently displaying frame in animated GIF","type":"Number"},"example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\nfunction draw() {\n  let frame = gif.getCurrentFrame();\n  image(gif, 0, 0);\n  text(frame, 10, 90);\n}\n</code></div>"],"alt":"Animated image of a cartoon eye looking around and then\nlooking outwards, in the lower-left hand corner a number counts\nup quickly to 124 and then starts back over at 0","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":972,"description":"<p>Sets the index of the frame that is currently visible in an animated GIF</p>\n","itemtype":"method","name":"setFrame","params":[{"name":"index","description":"<p>the index for the frame that should be displayed</p>\n","type":"Number"}],"example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\n// Move your mouse up and down over canvas to see the GIF\n// frames animate\nfunction draw() {\n  gif.pause();\n  image(gif, 0, 0);\n  // Get the highest frame number which is the number of frames - 1\n  let maxFrame = gif.numFrames() - 1;\n  // Set the current frame that is mapped to be relative to mouse position\n  let frameNumber = floor(map(mouseY, 0, height, 0, maxFrame, true));\n  gif.setFrame(frameNumber);\n}\n</code></div>"],"alt":"A still image of a cartoon eye that looks around when you move your mouse\nup and down over the canvas","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1017,"description":"<p>Returns the number of frames in an animated GIF</p>\n","itemtype":"method","name":"numFrames","return":{"description":"","type":"Number"},"example":["     The number of frames in the animated GIF\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\n// Move your mouse up and down over canvas to see the GIF\n// frames animate\nfunction draw() {\n  gif.pause();\n  image(gif, 0, 0);\n  // Get the highest frame number which is the number of frames - 1\n  let maxFrame = gif.numFrames() - 1;\n  // Set the current frame that is mapped to be relative to mouse position\n  let frameNumber = floor(map(mouseY, 0, height, 0, maxFrame, true));\n  gif.setFrame(frameNumber);\n}\n</code></div>"],"alt":"A still image of a cartoon eye that looks around when you move your mouse\nup and down over the canvas","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1052,"description":"<p>Plays an animated GIF that was paused with\n<a href=\"#/p5.Image/pause\">pause()</a></p>\n","itemtype":"method","name":"play","example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');\n}\n\nfunction draw() {\n  background(255);\n  image(gif, 0, 0);\n}\n\nfunction mousePressed() {\n  gif.pause();\n}\n\nfunction mouseReleased() {\n  gif.play();\n}\n</code></div>"],"alt":"An animated GIF of a drawing of small child with\nhair blowing in the wind, when you click the image\nfreezes when you release it animates again","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1089,"description":"<p>Pauses an animated GIF.</p>\n","itemtype":"method","name":"pause","example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');\n}\n\nfunction draw() {\n  background(255);\n  image(gif, 0, 0);\n}\n\nfunction mousePressed() {\n  gif.pause();\n}\n\nfunction mouseReleased() {\n  gif.play();\n}\n</code></div>"],"alt":"An animated GIF of a drawing of small child with\nhair blowing in the wind, when you click the image\nfreezes when you release it animates again","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1125,"description":"<p>Changes the delay between frames in an animated GIF. There is an optional second parameter that\nindicates an index for a specific frame that should have its delay modified. If no index is given, all frames\nwill have the new delay.</p>\n","itemtype":"method","name":"delay","params":[{"name":"d","description":"<p>the amount in milliseconds to delay between switching frames</p>\n","type":"Number"},{"name":"index","description":"<p>the index of the frame that should have the new delay value {optional}</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\nlet gifFast, gifSlow;\n\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  gifFast.resize(width / 2, height / 2);\n  gifSlow.resize(width / 2, height / 2);\n\n  //Change the delay here\n  gifFast.delay(10);\n  gifSlow.delay(100);\n}\n\nfunction draw() {\n  background(255);\n  image(gifFast, 0, 0);\n  image(gifSlow, width / 2, 0);\n}\n</code></div>"],"alt":"Two animated gifs of cartoon eyes looking around\nThe gif on the left animates quickly, on the right\nthe animation is much slower","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/pixels.js","line":12,"description":"<p><a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference\n/Global_Objects/Uint8ClampedArray' target='_blank'>Uint8ClampedArray</a>\ncontaining the values for all the pixels in the display window.\nThese values are numbers. This array is the size (include an appropriate\nfactor for <a href=\"#/p5/pixelDensity\">pixelDensity</a>) of the display window x4,\nrepresenting the R, G, B, A values in order for each pixel, moving from\nleft to right across each row, then down each column. Retina and other\nhigh density displays will have more pixels[] (by a factor of\npixelDensity^2).\nFor example, if the image is 100x100 pixels, there will be 40,000. On a\nretina display, there will be 160,000.</p>\n<p>The first four values (indices 0-3) in the array will be the R, G, B, A\nvalues of the pixel at (0, 0). The second four values (indices 4-7) will\ncontain the R, G, B, A values of the pixel at (1, 0). More generally, to\nset values for a pixel at (x, y):</p>\n<pre><code class=\"language-javascript\">let d = pixelDensity();\nfor (let i = 0; i < d; i++) {\n  for (let j = 0; j < d; j++) {\n    // loop over\n    index = 4 * ((y * d + j) * width * d + (x * d + i));\n    pixels[index] = r;\n    pixels[index+1] = g;\n    pixels[index+2] = b;\n    pixels[index+3] = a;\n  }\n}</code></pre>\n<p>While the above method is complex, it is flexible enough to work with\nany pixelDensity. Note that <a href=\"#/p5/set\">set()</a> will automatically take care of\nsetting all the appropriate values in <a href=\"#/p5/pixels\">pixels[]</a> for a given (x, y) at\nany pixelDensity, but the performance may not be as fast when lots of\nmodifications are made to the pixel array.</p>\n<p>Before accessing this array, the data must loaded with the <a href=\"#/p5/loadPixels\">loadPixels()</a>\nfunction. After the array data has been modified, the <a href=\"#/p5/updatePixels\">updatePixels()</a>\nfunction must be run to update the changes.</p>\n<p>Note that this is not a standard javascript array.  This means that\nstandard javascript functions such as <a href=\"#/p5/slice\">slice()</a> or\n<a href=\"#/p5/arrayCopy\">arrayCopy()</a> do not\nwork.</p>\n","itemtype":"property","name":"pixels","type":"Number[]","example":["\n<div>\n<code>\nlet pink = color(255, 102, 204);\nloadPixels();\nlet d = pixelDensity();\nlet halfImage = 4 * (width * d) * (height / 2 * d);\nfor (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}\nupdatePixels();\n</code>\n</div>"],"alt":"top half of canvas pink, bottom grey","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":80,"description":"<p>Copies a region of pixels from one image to another, using a specified\nblend mode to do the operation.</p>\n","itemtype":"method","name":"blend","example":["\n<div><code>\nlet img0;\nlet img1;\n\nfunction preload() {\n  img0 = loadImage('assets/rockies.jpg');\n  img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  background(img0);\n  image(img1, 0, 0);\n  blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n}\n</code></div>\n<div><code>\nlet img0;\nlet img1;\n\nfunction preload() {\n  img0 = loadImage('assets/rockies.jpg');\n  img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  background(img0);\n  image(img1, 0, 0);\n  blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n}\n</code></div>\n<div><code>\nlet img0;\nlet img1;\n\nfunction preload() {\n  img0 = loadImage('assets/rockies.jpg');\n  img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  background(img0);\n  image(img1, 0, 0);\n  blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n}\n</code></div>"],"alt":"image of rocky mountains. Brick images on left and right. Right overexposed\nimage of rockies. Brickwall images on left and right. Right mortar transparent\nimage of rockies. Brickwall images on left and right. Right translucent","class":"p5","module":"Image","submodule":"Pixels","overloads":[{"line":80,"params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image"},{"name":"sx","description":"<p>X coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sy","description":"<p>Y coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sw","description":"<p>source image width</p>\n","type":"Integer"},{"name":"sh","description":"<p>source image height</p>\n","type":"Integer"},{"name":"dx","description":"<p>X coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dy","description":"<p>Y coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dw","description":"<p>destination image width</p>\n","type":"Integer"},{"name":"dh","description":"<p>destination image height</p>\n","type":"Integer"},{"name":"blendMode","description":"<p>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.</p>\n","type":"Constant"}]},{"line":152,"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":173,"description":"<p>Copies a region of the canvas to another region of the canvas\nand copies a region of pixels from an image used as the srcImg parameter\ninto the canvas srcImage is specified this is used as the source. If\nthe source and destination regions aren't the same size, it will\nautomatically resize source pixels to fit the specified\ntarget region.</p>\n","itemtype":"method","name":"copy","example":["\n<div><code>\nlet img;\n\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  background(img);\n  copy(img, 7, 22, 10, 10, 35, 25, 50, 50);\n  stroke(255);\n  noFill();\n  // Rectangle shows area being copied\n  rect(7, 22, 10, 10);\n}\n</code></div>"],"alt":"image of rocky mountains. Brick images on left and right. Right overexposed\nimage of rockies. Brickwall images on left and right. Right mortar transparent\nimage of rockies. Brickwall images on left and right. Right translucent","class":"p5","module":"Image","submodule":"Pixels","overloads":[{"line":173,"params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image|p5.Element"},{"name":"sx","description":"<p>X coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sy","description":"<p>Y coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sw","description":"<p>source image width</p>\n","type":"Integer"},{"name":"sh","description":"<p>source image height</p>\n","type":"Integer"},{"name":"dx","description":"<p>X coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dy","description":"<p>Y coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dw","description":"<p>destination image width</p>\n","type":"Integer"},{"name":"dh","description":"<p>destination image height</p>\n","type":"Integer"}]},{"line":215,"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":307,"description":"<p>Applies a filter to the canvas. The presets options are:</p>\n<p>THRESHOLD\nConverts the image to black and white pixels depending if they are above or\nbelow the threshold defined by the level parameter. The parameter must be\nbetween 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.</p>\n<p>GRAY\nConverts any colors in the image to grayscale equivalents. No parameter\nis used.</p>\n<p>OPAQUE\nSets the alpha channel to entirely opaque. No parameter is used.</p>\n<p>INVERT\nSets each pixel to its inverse value. No parameter is used.</p>\n<p>POSTERIZE\nLimits each channel of the image to the number of colors specified as the\nparameter. The parameter can be set to values between 2 and 255, but\nresults are most noticeable in the lower ranges.</p>\n<p>BLUR\nExecutes a Gaussian blur with the level parameter specifying the extent\nof the blurring. If no parameter is used, the blur is equivalent to\nGaussian blur of radius 1. Larger values increase the blur.</p>\n<p>ERODE\nReduces the light areas. No parameter is used.</p>\n<p>DILATE\nIncreases the light areas. No parameter is used.</p>\n<p>filter() does not work in WEBGL mode.\nA similar effect can be achieved in WEBGL mode using custom\nshaders. Adam Ferriss has written\na <a href=\"https://github.com/aferriss/p5jsShaderExamples\"\ntarget='_blank'>selection of shader examples</a> that contains many\nof the effects present in the filter examples.</p>\n","itemtype":"method","name":"filter","params":[{"name":"filterType","description":"<p>either THRESHOLD, GRAY, OPAQUE, INVERT,\n                               POSTERIZE, BLUR, ERODE, DILATE or BLUR.\n                               See Filters.js for docs on\n                               each available filter</p>\n","type":"Constant"},{"name":"filterParam","description":"<p>an optional parameter unique\n                               to each filter, see above</p>\n","type":"Number","optional":true}],"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(THRESHOLD);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(GRAY);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(OPAQUE);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(INVERT);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(POSTERIZE, 3);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(DILATE);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(BLUR, 3);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(ERODE);\n}\n</code>\n</div>"],"alt":"black and white image of a brick wall.\ngreyscale image of a brickwall\nimage of a brickwall\njade colored image of a brickwall\nred and pink image of a brickwall\nimage of a brickwall\nblurry image of a brickwall\nimage of a brickwall\nimage of a brickwall with less detail","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":481,"description":"<p>Get a region of pixels, or a single pixel, from the canvas.</p>\n<p>Returns an array of [R,G,B,A] values for any pixel or grabs a section of\nan image. If no parameters are specified, the entire image is returned.\nUse the x and y parameters to get the value of one pixel. Get a section of\nthe display window by specifying additional w and h parameters. When\ngetting an image, the x and y parameters define the coordinates for the\nupper-left corner of the image, regardless of the current <a href=\"#/p5/imageMode\">imageMode()</a>.</p>\n<p>Getting the color of a single pixel with get(x, y) is easy, but not as fast\nas grabbing the data directly from <a href=\"#/p5/pixels\">pixels[]</a>. The equivalent statement to\nget(x, y) using <a href=\"#/p5/pixels\">pixels[]</a> with pixel density d is</p>\n<pre><code class=\"language-javascript\">let x, y, d; // set these to the coordinates\nlet off = (y * width + x) * d * 4;\nlet components = [\n  pixels[off],\n  pixels[off + 1],\n  pixels[off + 2],\n  pixels[off + 3]\n];\nprint(components);</code></pre>\n<p>See the reference for <a href=\"#/p5/pixels\">pixels[]</a> for more information.</p>\n<p>If you want to extract an array of colors or a subimage from an p5.Image object,\ntake a look at <a href=\"#/p5.Image/get\">p5.Image.get()</a></p>\n","itemtype":"method","name":"get","return":{"description":"the rectangle <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"},"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  let c = get();\n  image(c, width / 2, 0);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  let c = get(50, 90);\n  fill(c);\n  noStroke();\n  rect(25, 25, 50, 50);\n}\n</code>\n</div>"],"alt":"2 images of the rocky mountains, side-by-side\nImage of the rocky mountains with 50x50 green rect in center of canvas","class":"p5","module":"Image","submodule":"Pixels","overloads":[{"line":481,"params":[{"name":"x","description":"<p>x-coordinate of the pixel</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the pixel</p>\n","type":"Number"},{"name":"w","description":"<p>width</p>\n","type":"Number"},{"name":"h","description":"<p>height</p>\n","type":"Number"}],"return":{"description":"the rectangle <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"}},{"line":551,"params":[],"return":{"description":"the whole <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"}},{"line":555,"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/image/pixels.js","line":566,"description":"<p>Loads the pixel data for the display window into the <a href=\"#/p5/pixels\">pixels[]</a> array. This\nfunction must always be called before reading from or writing to <a href=\"#/p5/pixels\">pixels[]</a>.\nNote that only changes made with <a href=\"#/p5/set\">set()</a> or direct manipulation of <a href=\"#/p5/pixels\">pixels[]</a>\nwill occur.</p>\n","itemtype":"method","name":"loadPixels","example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  image(img, 0, 0, width, height);\n  let d = pixelDensity();\n  let halfImage = 4 * (width * d) * (height * d / 2);\n  loadPixels();\n  for (let i = 0; i < halfImage; i++) {\n    pixels[i + halfImage] = pixels[i];\n  }\n  updatePixels();\n}\n</code>\n</div>"],"alt":"two images of the rocky mountains. one on top, one on bottom of canvas.","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":602,"description":"<p>Changes the color of any pixel, or writes an image directly to the\ndisplay window.\nThe x and y parameters specify the pixel to change and the c parameter\nspecifies the color value. This can be a <a href=\"#/p5.Color\">p5.Color</a> object, or [R, G, B, A]\npixel array. It can also be a single grayscale value.\nWhen setting an image, the x and y parameters define the coordinates for\nthe upper-left corner of the image, regardless of the current <a href=\"#/p5/imageMode\">imageMode()</a>.</p>\n<p>After using <a href=\"#/p5/set\">set()</a>, you must call <a href=\"#/p5/updatePixels\">updatePixels()</a> for your changes to appear.\nThis should be called once all pixels have been set, and must be called before\ncalling .<a href=\"#/p5/get\">get()</a> or drawing the image.</p>\n<p>Setting the color of a single pixel with set(x, y) is easy, but not as\nfast as putting the data directly into <a href=\"#/p5/pixels\">pixels[]</a>. Setting the <a href=\"#/p5/pixels\">pixels[]</a>\nvalues directly may be complicated when working with a retina display,\nbut will perform better when lots of pixels need to be set directly on\nevery loop. See the reference for <a href=\"#/p5/pixels\">pixels[]</a> for more information.</p>\n","itemtype":"method","name":"set","params":[{"name":"x","description":"<p>x-coordinate of the pixel</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the pixel</p>\n","type":"Number"},{"name":"c","description":"<p>insert a grayscale value | a pixel array |\n                               a <a href=\"#/p5.Color\">p5.Color</a> object | a <a href=\"#/p5.Image\">p5.Image</a> to copy</p>\n","type":"Number|Number[]|Object"}],"example":["\n<div>\n<code>\nlet black = color(0);\nset(30, 20, black);\nset(85, 20, black);\nset(85, 75, black);\nset(30, 75, black);\nupdatePixels();\n</code>\n</div>\n\n<div>\n<code>\nfor (let i = 30; i < width - 15; i++) {\n  for (let j = 20; j < height - 25; j++) {\n    let c = color(204 - j, 153 - i, 0);\n    set(i, j, c);\n  }\n}\nupdatePixels();\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  set(0, 0, img);\n  updatePixels();\n  line(0, 0, width, height);\n  line(0, height, width, 0);\n}\n</code>\n</div>"],"alt":"4 black points in the shape of a square middle-right of canvas.\nsquare with orangey-brown gradient lightening at bottom right.\nimage of the rocky mountains. with lines like an 'x' through the center.","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":674,"description":"<p>Updates the display window with the data in the <a href=\"#/p5/pixels\">pixels[]</a> array.\nUse in conjunction with <a href=\"#/p5/loadPixels\">loadPixels()</a>. If you're only reading pixels from\nthe array, there's no need to call <a href=\"#/p5/updatePixels\">updatePixels()</a> — updating is only\nnecessary to apply changes. <a href=\"#/p5/updatePixels\">updatePixels()</a> should be called anytime the\npixels array is manipulated or <a href=\"#/p5/set\">set()</a> is called, and only changes made with\n<a href=\"#/p5/set\">set()</a> or direct changes to <a href=\"#/p5/pixels\">pixels[]</a> will occur.</p>\n","itemtype":"method","name":"updatePixels","params":[{"name":"x","description":"<p>x-coordinate of the upper-left corner of region\n                        to update</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>y-coordinate of the upper-left corner of region\n                        to update</p>\n","type":"Number","optional":true},{"name":"w","description":"<p>width of region to update</p>\n","type":"Number","optional":true},{"name":"h","description":"<p>height of region to update</p>\n","type":"Number","optional":true}],"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  image(img, 0, 0, width, height);\n  let d = pixelDensity();\n  let halfImage = 4 * (width * d) * (height * d / 2);\n  loadPixels();\n  for (let i = 0; i < halfImage; i++) {\n    pixels[i + halfImage] = pixels[i];\n  }\n  updatePixels();\n}\n</code>\n</div>"],"alt":"two images of the rocky mountains. one on top, one on bottom of canvas.","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/io/files.js","line":20,"description":"<p>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.</p>\n<p>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 <a href=\"https://github.com/camsong/\nfetch-jsonp\">here</a>.</p>\n<p>This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadJSON","return":{"description":"JSON data","type":"Object|Array"},"example":["\n\nCalling <a href=\"#/p5/loadJSON\">loadJSON()</a> inside <a href=\"#/p5/preload\">preload()</a> guarantees to complete the\noperation before <a href=\"#/p5/setup\">setup()</a> and <a href=\"#/p5/draw\">draw()</a> are called.\n\n<div><code>\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}\n</code></div>\n\nOutside of preload(), you may supply a callback function to handle the\nobject:\n<div><code>\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}\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</code></div>"],"alt":"50x50 ellipse that changes from black to white depending on the current humidity\n50x50 ellipse that changes from black to white depending on the current humidity","class":"p5","module":"IO","submodule":"Input","overloads":[{"line":20,"params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"jsonpOptions","description":"<p>options object for jsonp related settings</p>\n","type":"Object","optional":true},{"name":"datatype","description":"<p>\"json\" or \"jsonp\"</p>\n","type":"String","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/loadJSON\">loadJSON()</a> completes, data is passed\n                                   in as first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                   there is an error, response is passed\n                                   in as first argument</p>\n","type":"Function","optional":true}],"return":{"description":"JSON data","type":"Object|Array"}},{"line":104,"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":112,"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":183,"description":"<p>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.</p>\n<p>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.</p>\n<p>This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed.</p>\n<p>This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadStrings","params":[{"name":"filename","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"callback","description":"<p>function to be executed after <a href=\"#/p5/loadStrings\">loadStrings()</a>\n                              completes, Array is passed in as first\n                              argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                              there is an error, response is passed\n                              in as first argument</p>\n","type":"Function","optional":true}],"return":{"description":"Array of Strings","type":"String[]"},"example":["\n\nCalling loadStrings() inside <a href=\"#/p5/preload\">preload()</a> guarantees to complete the\noperation before <a href=\"#/p5/setup\">setup()</a> and <a href=\"#/p5/draw\">draw()</a> are called.\n\n<div><code>\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}\n</code></div>\n\nOutside of preload(), you may supply a callback function to handle the\nobject:\n\n<div><code>\nfunction setup() {\n  loadStrings('assets/test.txt', pickString);\n}\n\nfunction pickString(result) {\n  background(200);\n  text(random(result), 10, 10, 80, 80);\n}\n</code></div>"],"alt":"randomly generated text from a file, for example \"i smell like butter\"\nrandomly generated text from a file, for example \"i have three feet\"","class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":303,"description":"<p>Reads the contents of a file or URL and creates a <a href=\"#/p5.Table\">p5.Table</a> 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.</p>\n<p>This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. Calling <a href=\"#/p5/loadTable\">loadTable()</a> inside <a href=\"#/p5/preload\">preload()</a>\nguarantees to complete the operation before <a href=\"#/p5/setup\">setup()</a> and <a href=\"#/p5/draw\">draw()</a> are called.\nOutside of <a href=\"#/p5/preload\">preload()</a>, you may supply a callback function to handle the\nobject:</p>\n<p>All files loaded and saved use UTF-8 encoding. This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadTable","params":[{"name":"filename","description":"<p>name of the file or URL to load</p>\n","type":"String"},{"name":"extension","description":"<p>parse the table by comma-separated values \"csv\", semicolon-separated\n                                     values \"ssv\", or tab-separated values \"tsv\"</p>\n","type":"String","optional":true},{"name":"header","description":"<p>\"header\" to indicate table has header row</p>\n","type":"String","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                     <a href=\"#/p5/loadTable\">loadTable()</a> completes. On success, the\n                                     <a href=\"#/p5.Table\">Table</a> object is passed in as the\n                                     first argument.</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                     there is an error, response is passed\n                                     in as first argument</p>\n","type":"Function","optional":true}],"return":{"description":"<a href=\"#/p5.Table\">Table</a> object containing data","type":"Object"},"example":["\n<div class='norender'>\n<code>\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}\n</code>\n</div>"],"alt":"randomly generated text from a file, for example \"i smell like butter\"\nrandomly generated text from a file, for example \"i have three feet\"","class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":583,"description":"<p>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.</p>\n<p>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.</p>\n<p>This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. Calling <a href=\"#/p5/loadXML\">loadXML()</a> inside <a href=\"#/p5/preload\">preload()</a>\nguarantees to complete the operation before <a href=\"#/p5/setup\">setup()</a> and <a href=\"#/p5/draw\">draw()</a> are called.</p>\n<p>Outside of <a href=\"#/p5/preload\">preload()</a>, you may supply a callback function to handle the\nobject.</p>\n<p>This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadXML","params":[{"name":"filename","description":"<p>name of the file or URL to load</p>\n","type":"String"},{"name":"callback","description":"<p>function to be executed after <a href=\"#/p5/loadXML\">loadXML()</a>\n                              completes, XML object is passed in as\n                              first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                              there is an error, response is passed\n                              in as first argument</p>\n","type":"Function","optional":true}],"return":{"description":"XML object containing data","type":"Object"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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\n// Sketch prints:\n// 0, Capra hircus, Goat\n// 1, Panthera pardus, Leopard\n// 2, Equus zebra, Zebra\n</code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":693,"description":"<p>This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadBytes","params":[{"name":"file","description":"<p>name of the file or URL to load</p>\n","type":"String"},{"name":"callback","description":"<p>function to be executed after <a href=\"#/p5/loadBytes\">loadBytes()</a>\n                                   completes</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if there\n                                   is an error</p>\n","type":"Function","optional":true}],"return":{"description":"an object whose 'bytes' property will be the loaded buffer","type":"Object"},"example":["\n<div class='norender'><code>\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}\n</code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":752,"description":"<p>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 <code>httpDo(path, 'GET')</code>. 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).</p>\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<div class='norender'><code>\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</code></div>"],"class":"p5","module":"IO","submodule":"Input","overloads":[{"line":752,"params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"datatype","description":"<p>\"json\", \"jsonp\", \"binary\", \"arrayBuffer\",\n                                   \"xml\", or \"text\"</p>\n","type":"String","optional":true},{"name":"data","description":"<p>param data passed sent with request</p>\n","type":"Object|Boolean","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/httpGet\">httpGet()</a> completes, data is passed in\n                                   as first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                   there is an error, response is passed\n                                   in as first argument</p>\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":806,"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":814,"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":829,"description":"<p>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 <code>httpDo(path, 'POST')</code>.</p>\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<div>\n<code>\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</code>\n</div>\n\n<div><code>\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</code></div>"],"class":"p5","module":"IO","submodule":"Input","overloads":[{"line":829,"params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"datatype","description":"<p>\"json\", \"jsonp\", \"xml\", or \"text\".\n                                   If omitted, <a href=\"#/p5/httpPost\">httpPost()</a> will guess.</p>\n","type":"String","optional":true},{"name":"data","description":"<p>param data passed sent with request</p>\n","type":"Object|Boolean","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/httpPost\">httpPost()</a> completes, data is passed in\n                                   as first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                   there is an error, response is passed\n                                   in as first argument</p>\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":896,"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":904,"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":919,"description":"<p>Method for executing an HTTP request. If data type is not specified,\np5 will try to guess based on the URL, defaulting to text.<br><br>\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.</p>\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<div>\n<code>\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</code>\n</div>"],"class":"p5","module":"IO","submodule":"Input","overloads":[{"line":919,"params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"method","description":"<p>either \"GET\", \"POST\", or \"PUT\",\n                                   defaults to \"GET\"</p>\n","type":"String","optional":true},{"name":"datatype","description":"<p>\"json\", \"jsonp\", \"xml\", or \"text\"</p>\n","type":"String","optional":true},{"name":"data","description":"<p>param data passed sent with request</p>\n","type":"Object","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/httpGet\">httpGet()</a> completes, data is passed in\n                                   as first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                   there is an error, response is passed\n                                   in as first argument</p>\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":990,"params":[{"name":"path","description":"","type":"String"},{"name":"options","description":"<p>Request object options as documented in the\n                                   \"fetch\" API\n<a href=\"https://developer.mozilla.org/en/docs/Web/API/Fetch_API\">reference</a></p>\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":1155,"itemtype":"method","name":"createWriter","params":[{"name":"name","description":"<p>name of the file to be created</p>\n","type":"String"},{"name":"extension","description":"","type":"String","optional":true}],"return":{"description":"","type":"p5.PrintWriter"},"example":["\n<div>\n<code>\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</code>\n</div>"],"class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1210,"description":"<p>Writes data to the PrintWriter stream</p>\n","itemtype":"method","name":"write","params":[{"name":"data","description":"<p>all data to be written by the PrintWriter</p>\n","type":"Array"}],"example":["\n<div class=\"norender notest\">\n<code>\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</code>\n</div>\n<div class='norender notest'>\n<code>\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</code>\n</div>\n<div class='norender notest'>\n<code>\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</code>\n</div>\n<div>\n<code>\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</code>\n</div>"],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1269,"description":"<p>Writes data to the PrintWriter stream, and adds a new line at the end</p>\n","itemtype":"method","name":"print","params":[{"name":"data","description":"<p>all data to be printed by the PrintWriter</p>\n","type":"Array"}],"example":["\n<div class='norender notest'>\n<code>\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</code>\n</div>\n<div class='norender notest'>\n<code>\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</code>\n</div>"],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1310,"description":"<p>Clears the data already written to the PrintWriter object</p>\n","itemtype":"method","name":"clear","example":["\n<div class =\"norender notest\"><code>\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</code></div>\n<div>\n<code>\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</code>\n</div>\n"],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1344,"description":"<p>Closes the PrintWriter</p>\n","itemtype":"method","name":"close","example":["\n<div class=\"norender notest\">\n<code>\n// create a file called 'newFile.txt'\nlet writer = createWriter('newFile.txt');\n// close the PrintWriter and save the file\nwriter.close();\n</code>\n</div>\n<div class='norender notest'>\n<code>\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</code>\n</div>"],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1393,"description":"<p>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 <a href=\"#/p5.Element\">p5.Element</a>,an Array of\nStrings, an Array of JSON, a JSON object, a <a href=\"#/p5.Table\">p5.Table\n</a>, a <a href=\"#/p5.Image\">p5.Image</a>, 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.\n<strong>Note that it is not recommended to\ncall this method within draw, as it will open a new save dialog on every\nrender.</strong></p>\n","itemtype":"method","name":"save","params":[{"name":"objectOrFilename","description":"<p>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).</p>\n","type":"Object|String","optional":true},{"name":"filename","description":"<p>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).</p>\n","type":"String","optional":true},{"name":"options","description":"<p>Additional options depend on\n                          filetype. For example, when saving JSON,\n                          <code>true</code> indicates that the\n                          output will be optimized for filesize,\n                          rather than readability.</p>\n","type":"Boolean|String","optional":true}],"example":["\n <div class=\"norender\"><code>\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 </code></div>\n\n<div class=\"norender\"><code>\n // Saves p5.Image as an image\n img = createImage(10, 10);\n save(img, 'myImage.png');\n </code></div>\n\n <div class=\"norender\"><code>\n // Saves p5.Renderer object as an image\n obj = createGraphics(100, 100);\n save(obj, 'myObject.png');\n </code></div>\n\n <div class=\"norender\"><code>\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 </code></div>\n\n <div class=\"norender\"><code>\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 </code></div>\n\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"An example for saving a canvas as an image.\n An example for saving a p5.Image element as an image.\n An example for saving a p5.Renderer element.\n An example showing how to save a table in formats of HTML, CSV and TSV.\n An example for saving JSON to a txt file with some extra arguments.\n An example for saving an array of strings to text file with line breaks.","class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1535,"description":"<p>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.</p>\n","itemtype":"method","name":"saveJSON","params":[{"name":"json","description":"","type":"Array|Object"},{"name":"filename","description":"","type":"String"},{"name":"optimize","description":"<p>If true, removes line breaks\n                               and spaces from the output\n                               file to optimize filesize\n                               (but not readability).</p>\n","type":"Boolean","optional":true}],"example":["\n <div><code>\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 }\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 </code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1592,"description":"<p>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.</p>\n","itemtype":"method","name":"saveStrings","params":[{"name":"list","description":"<p>string array to be written</p>\n","type":"String[]"},{"name":"filename","description":"<p>filename for output</p>\n","type":"String"},{"name":"extension","description":"<p>the filename's extension</p>\n","type":"String","optional":true},{"name":"isCRLF","description":"<p>if true, change line-break to CRLF</p>\n","type":"Boolean","optional":true}],"example":["\n <div><code>\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 }\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 </code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1656,"description":"<p>Writes the contents of a <a href=\"#/p5.Table\">Table</a> 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.</p>\n","itemtype":"method","name":"saveTable","params":[{"name":"Table","description":"<p>the <a href=\"#/p5.Table\">Table</a> object to save to a file</p>\n","type":"p5.Table"},{"name":"filename","description":"<p>the filename to which the Table should be saved</p>\n","type":"String"},{"name":"options","description":"<p>can be one of \"tsv\", \"csv\", or \"html\"</p>\n","type":"String","optional":true}],"example":["\n<div><code>\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\n // Saves the following to a file called 'new.csv':\n // id,species,name\n // 0,Panthera leo,Lion\n </code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/p5.Table.js","line":9,"description":"<p>Table Options\nGeneric class for handling tabular data, typically from a\nCSV, TSV, or other sort of spreadsheet file.\nCSV files are\n<a href=\"http://en.wikipedia.org/wiki/Comma-separated_values\">\ncomma separated values</a>, 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\n<a href=\"http://tools.ietf.org/html/rfc4180\">here</a>.\nTo load files, use the <a href=\"#/p5/loadTable\">loadTable</a> method.\nTo save tables to your computer, use the <a href=\"#/p5/save\">save</a> method\n or the <a href=\"#/p5/saveTable\">saveTable</a> method.</p>\n<p>Possible options include:</p>\n<ul>\n<li>csv - parse the table as comma-separated values\n<li>tsv - parse the table as tab-separated values\n<li>header - this table has a header (title) row\n</ul>","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":43,"description":"<p>An array containing the names of the columns in the table, if the \"header\" the table is\nloaded with the \"header\" parameter.</p>\n","itemtype":"property","name":"columns","type":"String[]","example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":77,"description":"<p>An array containing the <a href=\"#/p5.Table\">p5.TableRow</a> objects that make up the\nrows of the table. The same result as calling <a href=\"#/p5/getRows\">getRows()</a></p>\n","itemtype":"property","name":"rows","type":"p5.TableRow[]","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":85,"description":"<p>Use <a href=\"#/p5/addRow\">addRow()</a> to add a new row of data to a <a href=\"#/p5.Table\">p5.Table</a> 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 <a href=\"#/p5/set\">set()</a>.</p>\n<p>If a <a href=\"#/p5.TableRow\">p5.TableRow</a> object is included as a parameter, then that row is\nduplicated and added to the table.</p>\n","itemtype":"method","name":"addRow","params":[{"name":"row","description":"<p>row to be added to the table</p>\n","type":"p5.TableRow","optional":true}],"return":{"description":"the row that was added","type":"p5.TableRow"},"example":["\n <div class=\"norender\">\n <code>\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 </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":148,"description":"<p>Removes a row from the table object.</p>\n","itemtype":"method","name":"removeRow","params":[{"name":"id","description":"<p>ID number of the row to remove</p>\n","type":"Integer"}],"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":195,"description":"<p>Returns a reference to the specified <a href=\"#/p5.TableRow\">p5.TableRow</a>. The reference\ncan then be used to get and set values of the selected row.</p>\n","itemtype":"method","name":"getRow","params":[{"name":"rowID","description":"<p>ID number of the row to get</p>\n","type":"Integer"}],"return":{"description":"<a href=\"#/p5.TableRow\">p5.TableRow</a> object","type":"p5.TableRow"},"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":240,"description":"<p>Gets all rows from the table. Returns an array of <a href=\"#/p5.TableRow\">p5.TableRow</a>s.</p>\n","itemtype":"method","name":"getRows","return":{"description":"Array of <a href=\"#/p5.TableRow\">p5.TableRow</a>s","type":"p5.TableRow[]"},"example":["\n <div class=\"norender\">\n <code>\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 </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":288,"description":"<p>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.</p>\n","itemtype":"method","name":"findRow","params":[{"name":"value","description":"<p>The value to match</p>\n","type":"String"},{"name":"column","description":"<p>ID number or title of the\n                               column to search</p>\n","type":"Integer|String"}],"return":{"description":"","type":"p5.TableRow"},"example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":352,"description":"<p>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.</p>\n","itemtype":"method","name":"findRows","params":[{"name":"value","description":"<p>The value to match</p>\n","type":"String"},{"name":"column","description":"<p>ID number or title of the\n                               column to search</p>\n","type":"Integer|String"}],"return":{"description":"An Array of TableRow objects","type":"p5.TableRow[]"},"example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":420,"description":"<p>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.</p>\n","itemtype":"method","name":"matchRow","params":[{"name":"regexp","description":"<p>The regular expression to match</p>\n","type":"String|RegExp"},{"name":"column","description":"<p>The column ID (number) or\n                                 title (string)</p>\n","type":"String|Integer"}],"return":{"description":"TableRow object","type":"p5.TableRow"},"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":478,"description":"<p>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.</p>\n","itemtype":"method","name":"matchRows","params":[{"name":"regexp","description":"<p>The regular expression to match</p>\n","type":"String"},{"name":"column","description":"<p>The column ID (number) or\n                                 title (string)</p>\n","type":"String|Integer","optional":true}],"return":{"description":"An Array of TableRow objects","type":"p5.TableRow[]"},"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":545,"description":"<p>Retrieves all values in the specified column, and returns them\nas an array. The column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"getColumn","params":[{"name":"column","description":"<p>String or Number of the column to return</p>\n","type":"String|Number"}],"return":{"description":"Array of column values","type":"Array"},"example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":597,"description":"<p>Removes all rows from a Table. While all rows are removed,\ncolumns and column titles are maintained.</p>\n","itemtype":"method","name":"clearRows","example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":638,"description":"<p>Use <a href=\"#/p5/addColumn\">addColumn()</a> to add a new column to a <a href=\"#/p5.Table\">Table</a> 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.)</p>\n","itemtype":"method","name":"addColumn","params":[{"name":"title","description":"<p>title of the given column</p>\n","type":"String","optional":true}],"example":["\n <div class=\"norender\">\n <code>\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 </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":688,"description":"<p>Returns the total number of columns in a Table.</p>\n","itemtype":"method","name":"getColumnCount","return":{"description":"Number of columns in this table","type":"Integer"},"example":["\n <div>\n <code>\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 </code>\n </div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":724,"description":"<p>Returns the total number of rows in a Table.</p>\n","itemtype":"method","name":"getRowCount","return":{"description":"Number of rows in this table","type":"Integer"},"example":["\n <div>\n <code>\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 </code>\n </div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":760,"description":"<p>Removes any of the specified characters (or \"tokens\").</p>\n<p>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.</p>\n","itemtype":"method","name":"removeTokens","params":[{"name":"chars","description":"<p>String listing characters to be removed</p>\n","type":"String"},{"name":"column","description":"<p>Column ID (number)\n                                 or name (string)</p>\n","type":"String|Integer","optional":true}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":832,"description":"<p>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.</p>\n","itemtype":"method","name":"trim","params":[{"name":"column","description":"<p>Column ID (number)\n                                 or name (string)</p>\n","type":"String|Integer","optional":true}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":896,"description":"<p>Use <a href=\"#/p5/removeColumn\">removeColumn()</a> 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.</p>\n","itemtype":"method","name":"removeColumn","params":[{"name":"column","description":"<p>columnName (string) or ID (number)</p>\n","type":"String|Integer"}],"example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":960,"description":"<p>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.</p>\n","itemtype":"method","name":"set","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>column ID (Number)\n                              or title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>value to assign</p>\n","type":"String|Number"}],"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1009,"description":"<p>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.</p>\n","itemtype":"method","name":"setNum","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>column ID (Number)\n                              or title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>value to assign</p>\n","type":"Number"}],"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1055,"description":"<p>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.</p>\n","itemtype":"method","name":"setString","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>column ID (Number)\n                              or title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>value to assign</p>\n","type":"String"}],"example":["\n<div class=\"norender\"><code>\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</code></div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1100,"description":"<p>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.</p>\n","itemtype":"method","name":"get","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>columnName (string) or\n                                  ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"","type":"String|Number"},"example":["\n<div class=\"norender\">\n<code>\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}\n</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1146,"description":"<p>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.</p>\n","itemtype":"method","name":"getNum","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>columnName (string) or\n                                  ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\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}\n</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1190,"description":"<p>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.</p>\n","itemtype":"method","name":"getString","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>columnName (string) or\n                                  ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"","type":"String"},"example":["\n<div class=\"norender\">\n<code>\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}\n</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1242,"description":"<p>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.</p>\n","itemtype":"method","name":"getObject","params":[{"name":"headerColumn","description":"<p>Name of the column which should be used to\n                             title each row object (optional)</p>\n","type":"String","optional":true}],"return":{"description":"","type":"Object"},"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1305,"description":"<p>Retrieves all table data and returns it as a multidimensional array.</p>\n","itemtype":"method","name":"getArray","return":{"description":"","type":"Array"},"example":["\n<div class=\"norender\">\n<code>\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}\n</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":40,"description":"<p>Stores a value in the TableRow's specified column.\nThe column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"set","params":[{"name":"column","description":"<p>Column ID (Number)\n                              or Title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>The value to be stored</p>\n","type":"String|Number"}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":102,"description":"<p>Stores a Float value in the TableRow's specified column.\nThe column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"setNum","params":[{"name":"column","description":"<p>Column ID (Number)\n                              or Title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>The value to be stored\n                              as a Float</p>\n","type":"Number|String"}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":146,"description":"<p>Stores a String value in the TableRow's specified column.\nThe column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"setString","params":[{"name":"column","description":"<p>Column ID (Number)\n                              or Title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>The value to be stored\n                              as a String</p>\n","type":"String|Number|Boolean|Object"}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":191,"description":"<p>Retrieves a value from the TableRow's specified column.\nThe column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"get","params":[{"name":"column","description":"<p>columnName (string) or\n                                 ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"","type":"String|Number"},"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":239,"description":"<p>Retrieves a Float value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.</p>\n","itemtype":"method","name":"getNum","params":[{"name":"column","description":"<p>columnName (string) or\n                                 ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"Float Floating point number","type":"Number"},"example":["\n <div class=\"norender\"><code>\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 }\n </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":295,"description":"<p>Retrieves an String value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.</p>\n","itemtype":"method","name":"getString","params":[{"name":"column","description":"<p>columnName (string) or\n                                 ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"String","type":"String"},"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.XML.js","line":62,"description":"<p>Gets a copy of the element's parent. Returns the parent as another\n<a href=\"#/p5.XML\">p5.XML</a> object.</p>\n","itemtype":"method","name":"getParent","return":{"description":"element parent","type":"p5.XML"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":100,"description":"<p>Gets the element's full name, which is returned as a String.</p>\n","itemtype":"method","name":"getName","return":{"description":"the name of the node","type":"String"},"example":["&lt;animal\n <div class='norender'><code>\n // The following short XML file called \"mammals.xml\" is parsed\n // in the code below.\n //\n // <?xml version=\"1.0\"?>\n // &lt;mammals&gt;\n //   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n //   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n //   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n // &lt;/mammals&gt;\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 </code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":135,"description":"<p>Sets the element's name, which is specified as a String.</p>\n","itemtype":"method","name":"setName","params":[{"name":"the","description":"<p>new name of the node</p>\n","type":"String"}],"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":181,"description":"<p>Checks whether or not the element has any children, and returns the result\nas a boolean.</p>\n","itemtype":"method","name":"hasChildren","return":{"description":"","type":"Boolean"},"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":217,"description":"<p>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 <a href=\"#/p5.XML/getName\">getName()</a>\non each child element individually.</p>\n","itemtype":"method","name":"listChildren","return":{"description":"names of the children of the element","type":"String[]"},"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":258,"description":"<p>Returns all of the element's children as an array of <a href=\"#/p5.XML\">p5.XML</a> objects. When\nthe name parameter is specified, then it will return all children that match\nthat name.</p>\n","itemtype":"method","name":"getChildren","params":[{"name":"name","description":"<p>element name</p>\n","type":"String","optional":true}],"return":{"description":"children of the element","type":"p5.XML[]"},"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":314,"description":"<p>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.</p>\n","itemtype":"method","name":"getChild","params":[{"name":"name","description":"<p>element name or index</p>\n","type":"String|Integer"}],"return":{"description":"","type":"p5.XML"},"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>\n<div class='norender'><code>\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":374,"description":"<p>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 <a href=\"#/p5.XML\">p5.XML</a> object.\nA reference to the newly created child is returned as an <a href=\"#/p5.XML\">p5.XML</a> object.</p>\n","itemtype":"method","name":"addChild","params":[{"name":"node","description":"<p>a <a href=\"#/p5.XML\">p5.XML</a> Object which will be the child to be added</p>\n","type":"p5.XML"}],"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":426,"description":"<p>Removes the element specified by name or index.</p>\n","itemtype":"method","name":"removeChild","params":[{"name":"name","description":"<p>element name or index</p>\n","type":"String|Integer"}],"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>\n<div class='norender'><code>\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":498,"description":"<p>Counts the specified element's number of attributes, returned as an Number.</p>\n","itemtype":"method","name":"getAttributeCount","return":{"description":"","type":"Integer"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":534,"description":"<p>Gets all of the specified element's attributes, and returns them as an\narray of Strings.</p>\n","itemtype":"method","name":"listAttributes","return":{"description":"an array of strings containing the names of attributes","type":"String[]"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":577,"description":"<p>Checks whether or not an element has the specified attribute.</p>\n","itemtype":"method","name":"hasAttribute","params":[{"name":"the","description":"<p>attribute to be checked</p>\n","type":"String"}],"return":{"description":"true if attribute found else false","type":"Boolean"},"example":["\n <div class='norender'><code>\n // The following short XML file called \"mammals.xml\" is parsed\n // in the code below.\n //\n // <?xml version=\"1.0\"?>\n // &lt;mammals&gt;\n //   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n //   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n //   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n // &lt;/mammals&gt;\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 </code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":622,"description":"<p>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.</p>\n","itemtype":"method","name":"getNum","params":[{"name":"name","description":"<p>the non-null full name of the attribute</p>\n","type":"String"},{"name":"defaultValue","description":"<p>the default value of the attribute</p>\n","type":"Number","optional":true}],"return":{"description":"","type":"Number"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":669,"description":"<p>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.</p>\n","itemtype":"method","name":"getString","params":[{"name":"name","description":"<p>the non-null full name of the attribute</p>\n","type":"String"},{"name":"defaultValue","description":"<p>the default value of the attribute</p>\n","type":"Number","optional":true}],"return":{"description":"","type":"String"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":716,"description":"<p>Sets the content of an element's attribute. The first parameter specifies\nthe attribute name, while the second specifies the new content.</p>\n","itemtype":"method","name":"setAttribute","params":[{"name":"name","description":"<p>the full name of the attribute</p>\n","type":"String"},{"name":"value","description":"<p>the value of the attribute</p>\n","type":"Number|String|Boolean"}],"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":757,"description":"<p>Returns the content of an element. If there is no such content,\ndefaultValue is returned if specified, otherwise null is returned.</p>\n","itemtype":"method","name":"getContent","params":[{"name":"defaultValue","description":"<p>value returned if no content is found</p>\n","type":"String","optional":true}],"return":{"description":"","type":"String"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":798,"description":"<p>Sets the element's content.</p>\n","itemtype":"method","name":"setContent","params":[{"name":"text","description":"<p>the new content</p>\n","type":"String"}],"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":839,"description":"<p>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.</p>\n","itemtype":"method","name":"serialize","return":{"description":"Serialized string of the element","type":"String"},"example":["\n<div class='norender'><code>\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// <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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/math/calculation.js","line":10,"description":"<p>Calculates the absolute value (magnitude) of a number. Maps to Math.abs().\nThe absolute value of a number is always positive.</p>\n","itemtype":"method","name":"abs","params":[{"name":"n","description":"<p>number to compute</p>\n","type":"Number"}],"return":{"description":"absolute value of given number","type":"Number"},"example":["\n<div class = \"norender\"><code>\nfunction setup() {\n  let x = -3;\n  let y = abs(x);\n\n  print(x); // -3\n  print(y); // 3\n}\n</code></div>"],"alt":"no image displayed","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":33,"description":"<p>Calculates the closest int value that is greater than or equal to the\nvalue of the parameter. Maps to Math.ceil(). For example, ceil(9.03)\nreturns the value 10.</p>\n","itemtype":"method","name":"ceil","params":[{"name":"n","description":"<p>number to round up</p>\n","type":"Number"}],"return":{"description":"rounded up number","type":"Integer"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  // map, mouseX between 0 and 5.\n  let ax = map(mouseX, 0, 100, 0, 5);\n  let ay = 66;\n\n  //Get the ceiling of the mapped number.\n  let bx = ceil(map(mouseX, 0, 100, 0, 5));\n  let by = 33;\n\n  // Multiply the mapped numbers by 20 to more easily\n  // see the changes.\n  stroke(0);\n  fill(0);\n  line(0, ay, ax * 20, ay);\n  line(0, by, bx * 20, by);\n\n  // Reformat the float returned by map and draw it.\n  noStroke();\n  text(nfc(ax, 2), ax, ay - 5);\n  text(nfc(bx, 1), bx, by - 5);\n}\n</code></div>"],"alt":"2 horizontal lines & number sets. increase with mouse x. bottom to 2 decimals","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":72,"description":"<p>Constrains a value between a minimum and maximum value.</p>\n","itemtype":"method","name":"constrain","params":[{"name":"n","description":"<p>number to constrain</p>\n","type":"Number"},{"name":"low","description":"<p>minimum limit</p>\n","type":"Number"},{"name":"high","description":"<p>maximum limit</p>\n","type":"Number"}],"return":{"description":"constrained number","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n\n  let leftWall = 25;\n  let rightWall = 75;\n\n  // xm is just the mouseX, while\n  // xc is the mouseX, but constrained\n  // between the leftWall and rightWall!\n  let xm = mouseX;\n  let xc = constrain(mouseX, leftWall, rightWall);\n\n  // Draw the walls.\n  stroke(150);\n  line(leftWall, 0, leftWall, height);\n  line(rightWall, 0, rightWall, height);\n\n  // Draw xm and xc as circles.\n  noStroke();\n  fill(150);\n  ellipse(xm, 33, 9, 9); // Not Constrained\n  fill(0);\n  ellipse(xc, 66, 9, 9); // Constrained\n}\n</code></div>"],"alt":"2 vertical lines. 2 ellipses move with mouse X 1 does not move passed lines","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":116,"description":"<p>Calculates the distance between two points, in either two or three dimensions.</p>\n","itemtype":"method","name":"dist","return":{"description":"distance between the two points","type":"Number"},"example":["\n<div><code>\n// Move your mouse inside the canvas to see the\n// change in distance between two points!\nfunction draw() {\n  background(200);\n  fill(0);\n\n  let x1 = 10;\n  let y1 = 90;\n  let x2 = mouseX;\n  let y2 = mouseY;\n\n  line(x1, y1, x2, y2);\n  ellipse(x1, y1, 7, 7);\n  ellipse(x2, y2, 7, 7);\n\n  // d is the length of the line\n  // the distance from point 1 to point 2.\n  let d = dist(x1, y1, x2, y2);\n\n  // Let's write d along the line we are drawing!\n  push();\n  translate((x1 + x2) / 2, (y1 + y2) / 2);\n  rotate(atan2(y2 - y1, x2 - x1));\n  text(nfc(d, 1), 0, -5);\n  pop();\n  // Fancy!\n}\n</code></div>"],"alt":"2 ellipses joined by line. 1 ellipse moves with mouse X&Y. Distance displayed.","class":"p5","module":"Math","submodule":"Calculation","overloads":[{"line":116,"params":[{"name":"x1","description":"<p>x-coordinate of the first point</p>\n","type":"Number"},{"name":"y1","description":"<p>y-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"<p>x-coordinate of the second point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate of the second point</p>\n","type":"Number"}],"return":{"description":"distance between the two points","type":"Number"}},{"line":160,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>z-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>z-coordinate of the second point</p>\n","type":"Number"}],"return":{"description":"distance between the two points","type":"Number"}}]},{"file":"src/math/calculation.js","line":181,"description":"<p>Returns Euler's number e (2.71828...) raised to the power of the n\nparameter. Maps to Math.exp().</p>\n","itemtype":"method","name":"exp","params":[{"name":"n","description":"<p>exponent to raise</p>\n","type":"Number"}],"return":{"description":"e^n","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n\n  // Compute the exp() function with a value between 0 and 2\n  let xValue = map(mouseX, 0, width, 0, 2);\n  let yValue = exp(xValue);\n\n  let y = map(yValue, 0, 8, height, 0);\n\n  let legend = 'exp (' + nfc(xValue, 3) + ')\\n= ' + nf(yValue, 1, 4);\n  stroke(150);\n  line(mouseX, y, mouseX, height);\n  fill(0);\n  text(legend, 5, 15);\n  noStroke();\n  ellipse(mouseX, y, 7, 7);\n\n  // Draw the exp(x) curve,\n  // over the domain of x from 0 to 2\n  noFill();\n  stroke(0);\n  beginShape();\n  for (let x = 0; x < width; x++) {\n    xValue = map(x, 0, width, 0, 2);\n    yValue = exp(xValue);\n    y = map(yValue, 0, 8, height, 0);\n    vertex(x, y);\n  }\n\n  endShape();\n  line(0, 0, 0, height);\n  line(0, height - 1, width, height - 1);\n}\n</code></div>"],"alt":"ellipse moves along a curve with mouse x. e^n displayed.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":230,"description":"<p>Calculates the closest int value that is less than or equal to the\nvalue of the parameter. Maps to Math.floor().</p>\n","itemtype":"method","name":"floor","params":[{"name":"n","description":"<p>number to round down</p>\n","type":"Number"}],"return":{"description":"rounded down number","type":"Integer"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  //map, mouseX between 0 and 5.\n  let ax = map(mouseX, 0, 100, 0, 5);\n  let ay = 66;\n\n  //Get the floor of the mapped number.\n  let bx = floor(map(mouseX, 0, 100, 0, 5));\n  let by = 33;\n\n  // Multiply the mapped numbers by 20 to more easily\n  // see the changes.\n  stroke(0);\n  fill(0);\n  line(0, ay, ax * 20, ay);\n  line(0, by, bx * 20, by);\n\n  // Reformat the float returned by map and draw it.\n  noStroke();\n  text(nfc(ax, 2), ax, ay - 5);\n  text(nfc(bx, 1), bx, by - 5);\n}\n</code></div>"],"alt":"2 horizontal lines & number sets. increase with mouse x. bottom to 2 decimals","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":268,"description":"<p>Calculates a number between two numbers at a specific increment. The amt\nparameter is the amount to interpolate between the two values where 0.0\nequal to the first point, 0.1 is very near the first point, 0.5 is\nhalf-way in between, and 1.0 is equal to the second point. If the\nvalue of amt is more than 1.0 or less than 0.0, the number will be\ncalculated accordingly in the ratio of the two given numbers. The lerp\nfunction is convenient for creating motion along a straight\npath and for drawing dotted lines.</p>\n","itemtype":"method","name":"lerp","params":[{"name":"start","description":"<p>first value</p>\n","type":"Number"},{"name":"stop","description":"<p>second value</p>\n","type":"Number"},{"name":"amt","description":"<p>number</p>\n","type":"Number"}],"return":{"description":"lerped value","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  background(200);\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  let y = 50;\n\n  strokeWeight(5);\n  stroke(0); // Draw the original points in black\n  point(a, y);\n  point(b, y);\n\n  stroke(100); // Draw the lerp points in gray\n  point(c, y);\n  point(d, y);\n  point(e, y);\n}\n</code></div>"],"alt":"5 points horizontally staggered mid-canvas. mid 3 are grey, outer black","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":315,"description":"<p>Calculates the natural logarithm (the base-e logarithm) of a number. This\nfunction expects the n parameter to be a value greater than 0.0. Maps to\nMath.log().</p>\n","itemtype":"method","name":"log","params":[{"name":"n","description":"<p>number greater than 0</p>\n","type":"Number"}],"return":{"description":"natural logarithm of n","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  let maxX = 2.8;\n  let maxY = 1.5;\n\n  // Compute the natural log of a value between 0 and maxX\n  let xValue = map(mouseX, 0, width, 0, maxX);\n  let yValue, y;\n  if (xValue > 0) {\n   // Cannot take the log of a negative number.\n    yValue = log(xValue);\n    y = map(yValue, -maxY, maxY, height, 0);\n\n    // Display the calculation occurring.\n    let legend = 'log(' + nf(xValue, 1, 2) + ')\\n= ' + nf(yValue, 1, 3);\n    stroke(150);\n    line(mouseX, y, mouseX, height);\n    fill(0);\n    text(legend, 5, 15);\n    noStroke();\n    ellipse(mouseX, y, 7, 7);\n  }\n\n  // Draw the log(x) curve,\n  // over the domain of x from 0 to maxX\n  noFill();\n  stroke(0);\n  beginShape();\n  for (let x = 0; x < width; x++) {\n    xValue = map(x, 0, width, 0, maxX);\n    yValue = log(xValue);\n    y = map(yValue, -maxY, maxY, height, 0);\n    vertex(x, y);\n  }\n  endShape();\n  line(0, 0, 0, height);\n  line(0, height / 2, width, height / 2);\n}\n</code></div>"],"alt":"ellipse moves along a curve with mouse x. natural logarithm of n displayed.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":370,"description":"<p>Calculates the magnitude (or length) of a vector. A vector is a direction\nin space commonly used in computer graphics and linear algebra. Because it\nhas no \"start\" position, the magnitude of a vector can be thought of as\nthe distance from the coordinate 0,0 to its x,y value. Therefore, <a href=\"#/p5/mag\">mag()</a> is\na shortcut for writing dist(0, 0, x, y).</p>\n","itemtype":"method","name":"mag","params":[{"name":"a","description":"<p>first value</p>\n","type":"Number"},{"name":"b","description":"<p>second value</p>\n","type":"Number"}],"return":{"description":"magnitude of vector from (0,0) to (a,b)","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  let x1 = 20;\n  let x2 = 80;\n  let y1 = 30;\n  let y2 = 70;\n\n  line(0, 0, x1, y1);\n  print(mag(x1, y1)); // Prints \"36.05551275463989\"\n  line(0, 0, x2, y1);\n  print(mag(x2, y1)); // Prints \"85.44003745317531\"\n  line(0, 0, x1, y2);\n  print(mag(x1, y2)); // Prints \"72.80109889280519\"\n  line(0, 0, x2, y2);\n  print(mag(x2, y2)); // Prints \"106.3014581273465\"\n}\n</code></div>"],"alt":"4 lines of different length radiate from top left of canvas.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":408,"description":"<p>Re-maps a number from one range to another.</p>\n<p>In the first example above, the number 25 is converted from a value in the\nrange of 0 to 100 into a value that ranges from the left edge of the\nwindow (0) to the right edge (width).</p>\n","itemtype":"method","name":"map","params":[{"name":"value","description":"<p>the incoming value to be converted</p>\n","type":"Number"},{"name":"start1","description":"<p>lower bound of the value's current range</p>\n","type":"Number"},{"name":"stop1","description":"<p>upper bound of the value's current range</p>\n","type":"Number"},{"name":"start2","description":"<p>lower bound of the value's target range</p>\n","type":"Number"},{"name":"stop2","description":"<p>upper bound of the value's target range</p>\n","type":"Number"},{"name":"withinBounds","description":"<p>constrain the value to the newly mapped range</p>\n","type":"Boolean","optional":true}],"return":{"description":"remapped number","type":"Number"},"example":["\n  <div><code>\nlet value = 25;\nlet m = map(value, 0, 100, 0, width);\nellipse(m, 50, 10, 10);\n</code></div>\n\n  <div><code>\nfunction setup() {\n  noStroke();\n}\n\nfunction draw() {\n  background(204);\n  let x1 = map(mouseX, 0, width, 25, 75);\n  ellipse(x1, 25, 25, 25);\n  //This ellipse is constrained to the 0-100 range\n  //after setting withinBounds to true\n  let x2 = map(mouseX, 0, width, 0, 100, true);\n  ellipse(x2, 75, 25, 25);\n}\n</code></div>"],"alt":"10 by 10 white ellipse with in mid left canvas\n2 25 by 25 white ellipses move with mouse x. Bottom has more range from X","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":463,"description":"<p>Determines the largest value in a sequence of numbers, and then returns\nthat value. <a href=\"#/p5/max\">max()</a> accepts any number of Number parameters, or an Array\nof any length.</p>\n","itemtype":"method","name":"max","return":{"description":"maximum Number","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  // Change the elements in the array and run the sketch\n  // to show how max() works!\n  let numArray = [2, 1, 5, 4, 8, 9];\n  fill(0);\n  noStroke();\n  text('Array Elements', 0, 10);\n  // Draw all numbers in the array\n  let spacing = 15;\n  let elemsY = 25;\n  for (let i = 0; i < numArray.length; i++) {\n    text(numArray[i], i * spacing, elemsY);\n  }\n  let maxX = 33;\n  let maxY = 80;\n  // Draw the Maximum value in the array.\n  textSize(32);\n  text(max(numArray), maxX, maxY);\n}\n</code></div>"],"alt":"Small text at top reads: Array Elements 2 1 5 4 8 9. Large text at center: 9","class":"p5","module":"Math","submodule":"Calculation","overloads":[{"line":463,"params":[{"name":"n0","description":"<p>Number to compare</p>\n","type":"Number"},{"name":"n1","description":"<p>Number to compare</p>\n","type":"Number"}],"return":{"description":"maximum Number","type":"Number"}},{"line":498,"params":[{"name":"nums","description":"<p>Numbers to compare</p>\n","type":"Number[]"}],"return":{"description":"","type":"Number"}}]},{"file":"src/math/calculation.js","line":511,"description":"<p>Determines the smallest value in a sequence of numbers, and then returns\nthat value. <a href=\"#/p5/min\">min()</a> accepts any number of Number parameters, or an Array\nof any length.</p>\n","itemtype":"method","name":"min","return":{"description":"minimum Number","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  // Change the elements in the array and run the sketch\n  // to show how min() works!\n  let numArray = [2, 1, 5, 4, 8, 9];\n  fill(0);\n  noStroke();\n  text('Array Elements', 0, 10);\n  // Draw all numbers in the array\n  let spacing = 15;\n  let elemsY = 25;\n  for (let i = 0; i < numArray.length; i++) {\n    text(numArray[i], i * spacing, elemsY);\n  }\n  let maxX = 33;\n  let maxY = 80;\n  // Draw the Minimum value in the array.\n  textSize(32);\n  text(min(numArray), maxX, maxY);\n}\n</code></div>"],"alt":"Small text at top reads: Array Elements 2 1 5 4 8 9. Large text at center: 1","class":"p5","module":"Math","submodule":"Calculation","overloads":[{"line":511,"params":[{"name":"n0","description":"<p>Number to compare</p>\n","type":"Number"},{"name":"n1","description":"<p>Number to compare</p>\n","type":"Number"}],"return":{"description":"minimum Number","type":"Number"}},{"line":546,"params":[{"name":"nums","description":"<p>Numbers to compare</p>\n","type":"Number[]"}],"return":{"description":"","type":"Number"}}]},{"file":"src/math/calculation.js","line":559,"description":"<p>Normalizes a number from another range into a value between 0 and 1.\nIdentical to map(value, low, high, 0, 1).\nNumbers outside of the range are not clamped to 0 and 1, because\nout-of-range values are often intentional and useful. (See the example above.)</p>\n","itemtype":"method","name":"norm","params":[{"name":"value","description":"<p>incoming value to be normalized</p>\n","type":"Number"},{"name":"start","description":"<p>lower bound of the value's current range</p>\n","type":"Number"},{"name":"stop","description":"<p>upper bound of the value's current range</p>\n","type":"Number"}],"return":{"description":"normalized number","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  let currentNum = mouseX;\n  let lowerBound = 0;\n  let upperBound = width; //100;\n  let normalized = norm(currentNum, lowerBound, upperBound);\n  let lineY = 70;\n  stroke(3);\n  line(0, lineY, width, lineY);\n  //Draw an ellipse mapped to the non-normalized value.\n  noStroke();\n  fill(50);\n  let s = 7; // ellipse size\n  ellipse(currentNum, lineY, s, s);\n\n  // Draw the guide\n  let guideY = lineY + 15;\n  text('0', 0, guideY);\n  textAlign(RIGHT);\n  text('100', width, guideY);\n\n  // Draw the normalized value\n  textAlign(LEFT);\n  fill(0);\n  textSize(32);\n  let normalY = 40;\n  let normalX = 20;\n  text(normalized, normalX, normalY);\n}\n</code></div>"],"alt":"ellipse moves with mouse. 0 shown left & 100 right and updating values center","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":611,"description":"<p>Facilitates exponential expressions. The <a href=\"#/p5/pow\">pow()</a> function is an efficient\nway of multiplying numbers by themselves (or their reciprocals) in large\nquantities. For example, pow(3, 5) is equivalent to the expression\n3 × 3 × 3 × 3 × 3 and pow(3, -5) is equivalent to 1 /\n3 × 3 × 3 × 3 × 3. Maps to\nMath.pow().</p>\n","itemtype":"method","name":"pow","params":[{"name":"n","description":"<p>base of the exponential expression</p>\n","type":"Number"},{"name":"e","description":"<p>power by which to raise the base</p>\n","type":"Number"}],"return":{"description":"n^e","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  //Exponentially increase the size of an ellipse.\n  let eSize = 3; // Original Size\n  let eLoc = 10; // Original Location\n\n  ellipse(eLoc, eLoc, eSize, eSize);\n\n  ellipse(eLoc * 2, eLoc * 2, pow(eSize, 2), pow(eSize, 2));\n\n  ellipse(eLoc * 4, eLoc * 4, pow(eSize, 3), pow(eSize, 3));\n\n  ellipse(eLoc * 8, eLoc * 8, pow(eSize, 4), pow(eSize, 4));\n}\n</code></div>"],"alt":"small to large ellipses radiating from top left of canvas","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":645,"description":"<p>Calculates the integer closest to the n parameter. For example,\nround(133.8) returns the value 134. Maps to Math.round().</p>\n","itemtype":"method","name":"round","params":[{"name":"n","description":"<p>number to round</p>\n","type":"Number"},{"name":"decimals","description":"<p>number of decimal places to round to, default is 0</p>\n","type":"Number","optional":true}],"return":{"description":"rounded number","type":"Integer"},"example":["\n<div><code>\nlet x = round(3.7);\ntext(x, width / 2, height / 2);\n</code></div>\n<div><code>\nlet x = round(12.782383, 2);\ntext(x, width / 2, height / 2);\n</code></div>\n<div><code>\nfunction draw() {\n  background(200);\n  //map, mouseX between 0 and 5.\n  let ax = map(mouseX, 0, 100, 0, 5);\n  let ay = 66;\n\n  // Round the mapped number.\n  let bx = round(map(mouseX, 0, 100, 0, 5));\n  let by = 33;\n\n  // Multiply the mapped numbers by 20 to more easily\n  // see the changes.\n  stroke(0);\n  fill(0);\n  line(0, ay, ax * 20, ay);\n  line(0, by, bx * 20, by);\n\n  // Reformat the float returned by map and draw it.\n  noStroke();\n  text(nfc(ax, 2), ax, ay - 5);\n  text(nfc(bx, 1), bx, by - 5);\n}\n</code></div>"],"alt":"\"3\" written in middle of canvas\n\"12.78\" written in middle of canvas\nhorizontal center line squared values displayed on top and regular on bottom.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":699,"description":"<p>Squares a number (multiplies a number by itself). The result is always a\npositive number, as multiplying two negative numbers always yields a\npositive result. For example, -1 * -1 = 1.</p>\n","itemtype":"method","name":"sq","params":[{"name":"n","description":"<p>number to square</p>\n","type":"Number"}],"return":{"description":"squared number","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  let eSize = 7;\n  let x1 = map(mouseX, 0, width, 0, 10);\n  let y1 = 80;\n  let x2 = sq(x1);\n  let y2 = 20;\n\n  // Draw the non-squared.\n  line(0, y1, width, y1);\n  ellipse(x1, y1, eSize, eSize);\n\n  // Draw the squared.\n  line(0, y2, width, y2);\n  ellipse(x2, y2, eSize, eSize);\n\n  // Draw dividing line.\n  stroke(100);\n  line(0, height / 2, width, height / 2);\n\n  // Draw text.\n  let spacing = 15;\n  noStroke();\n  fill(0);\n  text('x = ' + x1, 0, y1 + spacing);\n  text('sq(x) = ' + x2, 0, y2 + spacing);\n}\n</code></div>"],"alt":"horizontal center line squared values displayed on top and regular on bottom.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":743,"description":"<p>Calculates the square root of a number. The square root of a number is\nalways positive, even though there may be a valid negative root. The\nsquare root s of number a is such that s*s = a. It is the opposite of\nsquaring. Maps to Math.sqrt().</p>\n","itemtype":"method","name":"sqrt","params":[{"name":"n","description":"<p>non-negative number to square root</p>\n","type":"Number"}],"return":{"description":"square root of number","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  let eSize = 7;\n  let x1 = mouseX;\n  let y1 = 80;\n  let x2 = sqrt(x1);\n  let y2 = 20;\n\n  // Draw the non-squared.\n  line(0, y1, width, y1);\n  ellipse(x1, y1, eSize, eSize);\n\n  // Draw the squared.\n  line(0, y2, width, y2);\n  ellipse(x2, y2, eSize, eSize);\n\n  // Draw dividing line.\n  stroke(100);\n  line(0, height / 2, width, height / 2);\n\n  // Draw text.\n  noStroke();\n  fill(0);\n  let spacing = 15;\n  text('x = ' + x1, 0, y1 + spacing);\n  text('sqrt(x) = ' + x2, 0, y2 + spacing);\n}\n</code></div>"],"alt":"horizontal center line squareroot values displayed on top and regular on bottom.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":830,"description":"<p>Calculates the fractional part of a number.</p>\n","itemtype":"method","name":"fract","params":[{"name":"num","description":"<p>Number whose fractional part needs to be found out</p>\n","type":"Number"}],"return":{"description":"fractional part of x, i.e, {x}","type":"Number"},"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(windowWidth, windowHeight);\n  fill(0);\n  text(7345.73472742, 0, 50);\n  text(fract(7345.73472742), 0, 100);\n  text(1.4215e-15, 150, 50);\n  text(fract(1.4215e-15), 150, 100);\n}\n</code>\n</div>"],"alt":"2 rows of numbers, the first row having 8 numbers and the second having the fractional parts of those numbers.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/math.js","line":10,"description":"<p>Creates a new <a href=\"#/p5.Vector\">p5.Vector</a> (the datatype for storing vectors). This provides a\ntwo or three dimensional vector, specifically a Euclidean (also known as\ngeometric) vector. A vector is an entity that has both magnitude and\ndirection.</p>\n","itemtype":"method","name":"createVector","params":[{"name":"x","description":"<p>x component of the vector</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>z component of the vector</p>\n","type":"Number","optional":true}],"return":{"description":"","type":"p5.Vector"},"example":["\n<div><code>\nlet v1;\nfunction setup() {\n  createCanvas(100, 100);\n  stroke(255, 0, 255);\n  v1 = createVector(width / 2, height / 2);\n}\n\nfunction draw() {\n  background(255);\n  line(v1.x, v1.y, mouseX, mouseY);\n}\n</code></div>"],"alt":"draws a line from center of canvas to mouse pointer position.","class":"p5","module":"Math","submodule":"Vector"},{"file":"src/math/noise.js","line":36,"description":"<p>Returns the Perlin noise value at specified coordinates. Perlin noise is\na random sequence generator producing a more naturally ordered, harmonic\nsuccession of numbers compared to the standard <b>random()</b> function.\nIt was invented by Ken Perlin in the 1980s and been used since in\ngraphical applications to produce procedural textures, natural motion,\nshapes, terrains etc.<br /><br /> The main difference to the\n<b>random()</b> function is that Perlin noise is defined in an infinite\nn-dimensional space where each pair of coordinates corresponds to a\nfixed semi-random value (fixed only for the lifespan of the program; see\nthe <a href=\"#/p5/noiseSeed\">noiseSeed()</a> function). p5.js can compute 1D, 2D and 3D noise,\ndepending on the number of coordinates given. The resulting value will\nalways be between 0.0 and 1.0. The noise value can be animated by moving\nthrough the noise space as demonstrated in the example above. The 2nd\nand 3rd dimension can also be interpreted as time.<br /><br />The actual\nnoise is structured similar to an audio signal, in respect to the\nfunction's use of frequencies. Similar to the concept of harmonics in\nphysics, perlin noise is computed over several octaves which are added\ntogether for the final result. <br /><br />Another way to adjust the\ncharacter of the resulting sequence is the scale of the input\ncoordinates. As the function works within an infinite space the value of\nthe coordinates doesn't matter as such, only the distance between\nsuccessive coordinates does (eg. when using <b>noise()</b> within a\nloop). As a general rule the smaller the difference between coordinates,\nthe smoother the resulting noise sequence will be. Steps of 0.005-0.03\nwork best for most applications, but this will differ depending on use.</p>\n","itemtype":"method","name":"noise","params":[{"name":"x","description":"<p>x-coordinate in noise space</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate in noise space</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>z-coordinate in noise space</p>\n","type":"Number","optional":true}],"return":{"description":"Perlin noise value (between 0 and 1) at specified\n                     coordinates","type":"Number"},"example":["\n<div>\n<code>\nlet xoff = 0.0;\n\nfunction draw() {\n  background(204);\n  xoff = xoff + 0.01;\n  let n = noise(xoff) * width;\n  line(n, 0, n, height);\n}\n</code>\n</div>\n<div>\n<code>let noiseScale=0.02;\n\nfunction draw() {\n  background(0);\n  for (let x=0; x < width; x++) {\n    let noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);\n    stroke(noiseVal*255);\n    line(x, mouseY+noiseVal*80, x, height);\n  }\n}\n</code>\n</div>"],"alt":"vertical line moves left to right with updating noise values.\nhorizontal wave pattern effected by mouse x-position & updating noise values.","class":"p5","module":"Math","submodule":"Noise"},{"file":"src/math/noise.js","line":178,"description":"<p>Adjusts the character and level of detail produced by the Perlin noise\n function. Similar to harmonics in physics, noise is computed over\n several octaves. Lower octaves contribute more to the output signal and\n as such define the overall intensity of the noise, whereas higher octaves\n create finer grained details in the noise sequence.\nBy default, noise is computed over 4 octaves with each octave contributing\n exactly half than its predecessor, starting at 50% strength for the 1st\n octave. This falloff amount can be changed by adding an additional function\n parameter. Eg. a falloff factor of 0.75 means each octave will now have\n 75% impact (25% less) of the previous lower octave. Any value between\n 0.0 and 1.0 is valid, however note that values greater than 0.5 might\n result in greater than 1.0 values returned by <b>noise()</b>.\nBy changing these parameters, the signal created by the <b>noise()</b>\n function can be adapted to fit very specific needs and characteristics.</p>\n","itemtype":"method","name":"noiseDetail","params":[{"name":"lod","description":"<p>number of octaves to be used by the noise</p>\n","type":"Number"},{"name":"falloff","description":"<p>falloff factor for each octave</p>\n","type":"Number"}],"example":["\n <div>\n <code>\n let noiseVal;\n let noiseScale = 0.02;\nfunction setup() {\n   createCanvas(100, 100);\n }\nfunction draw() {\n   background(0);\n   for (let y = 0; y < height; y++) {\n     for (let x = 0; x < width / 2; x++) {\n       noiseDetail(2, 0.2);\n       noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);\n       stroke(noiseVal * 255);\n       point(x, y);\n       noiseDetail(8, 0.65);\n       noiseVal = noise(\n         (mouseX + x + width / 2) * noiseScale,\n         (mouseY + y) * noiseScale\n       );\n       stroke(noiseVal * 255);\n       point(x + width / 2, y);\n     }\n   }\n }\n </code>\n </div>"],"alt":"2 vertical grey smokey patterns affected my mouse x-position and noise.","class":"p5","module":"Math","submodule":"Noise"},{"file":"src/math/noise.js","line":243,"description":"<p>Sets the seed value for <b>noise()</b>. By default, <b>noise()</b>\nproduces different results each time the program is run. Set the\n<b>value</b> parameter to a constant to return the same pseudo-random\nnumbers each time the software is run.</p>\n","itemtype":"method","name":"noiseSeed","params":[{"name":"seed","description":"<p>the seed value</p>\n","type":"Number"}],"example":["\n<div>\n<code>let xoff = 0.0;\n\nfunction setup() {\n  noiseSeed(99);\n  stroke(0, 10);\n}\n\nfunction draw() {\n  xoff = xoff + .01;\n  let n = noise(xoff) * width;\n  line(n, 0, n, height);\n}\n</code>\n</div>"],"alt":"vertical grey lines drawing in pattern affected by noise.","class":"p5","module":"Math","submodule":"Noise"},{"file":"src/math/p5.Vector.js","line":65,"description":"<p>The x component of the vector</p>\n","itemtype":"property","name":"x","type":"Number","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":70,"description":"<p>The y component of the vector</p>\n","itemtype":"property","name":"y","type":"Number","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":75,"description":"<p>The z component of the vector</p>\n","itemtype":"property","name":"z","type":"Number","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":82,"description":"<p>Returns a string representation of a vector v by calling String(v)\nor v.toString(). This method is useful for logging vectors in the\nconsole.</p>\n","itemtype":"method","name":"toString","return":{"description":"","type":"String"},"example":["\n<div class = \"norender\">\n<code>\nfunction setup() {\n  let v = createVector(20, 30);\n  print(String(v)); // prints \"p5.Vector Object : [20, 30, 0]\"\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'black');\n\n  noStroke();\n  text(v1.toString(), 10, 25, 90, 75);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":132,"description":"<p>Sets the x, y, and z component of the vector using two or three separate\nvariables, the data from a <a href=\"#/p5.Vector\">p5.Vector</a>, or the values from a float array.</p>\n","itemtype":"method","name":"set","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nfunction setup() {\n  let v = createVector(1, 2, 3);\n  v.set(4, 5, 6); // Sets vector to [4, 5, 6]\n\n  let v1 = createVector(0, 0, 0);\n  let arr = [1, 2, 3];\n  v1.set(arr); // Sets vector to [1, 2, 3]\n}\n</code>\n</div>\n\n<div>\n<code>\nlet v0, v1;\nfunction setup() {\n  createCanvas(100, 100);\n\n  v0 = createVector(0, 0);\n  v1 = createVector(50, 50);\n}\n\nfunction draw() {\n  background(240);\n\n  drawArrow(v0, v1, 'black');\n  v1.set(v1.x + random(-1, 1), v1.y + random(-1, 1));\n\n  noStroke();\n  text('x: ' + round(v1.x) + ' y: ' + round(v1.y), 20, 90);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":132,"params":[{"name":"x","description":"<p>the x component of the vector</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>the y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>the z component of the vector</p>\n","type":"Number","optional":true}],"chainable":1},{"line":191,"params":[{"name":"value","description":"<p>the vector to set</p>\n","type":"p5.Vector|Number[]"}],"chainable":1}]},{"file":"src/math/p5.Vector.js","line":215,"description":"<p>Gets a copy of the vector, returns a <a href=\"#/p5.Vector\">p5.Vector</a> object.</p>\n","itemtype":"method","name":"copy","return":{"description":"the copy of the <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 2, 3);\nlet v2 = v1.copy();\nprint(v1.x === v2.x && v1.y === v2.y && v1.z === v2.z);\n// Prints \"true\"\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":238,"description":"<p>Adds x, y, and z components to a vector, adds one vector to another, or\nadds two independent vectors together. The version of the method that adds\ntwo vectors together is a static method and returns a <a href=\"#/p5.Vector\">p5.Vector</a>, the others\nacts directly on the vector. Additionally, you may provide arguments to this function as an array.\nSee the examples for more context.</p>\n","itemtype":"method","name":"add","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(1, 2, 3);\nv.add(4, 5, 6);\n// v's components are set to [5, 7, 9]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v = createVector(1, 2, 3);\n// Provide arguments as an array\nlet arr = [4, 5, 6];\nv.add(arr);\n// v's components are set to [5, 7, 9]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(1, 2, 3);\nlet v2 = createVector(2, 3, 4);\n\nlet v3 = p5.Vector.add(v1, v2);\n// v3 has components [3, 5, 7]\nprint(v3);\n</code>\n</div>\n\n<div>\n<code>\n// red vector + blue vector = purple vector\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(-30, 20);\n  drawArrow(v1, v2, 'blue');\n\n  let v3 = p5.Vector.add(v1, v2);\n  drawArrow(v0, v3, 'purple');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":238,"params":[{"name":"x","description":"<p>the x component of the vector to be added</p>\n","type":"Number"},{"name":"y","description":"<p>the y component of the vector to be added</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>the z component of the vector to be added</p>\n","type":"Number","optional":true}],"chainable":1},{"line":315,"params":[{"name":"value","description":"<p>the vector to add</p>\n","type":"p5.Vector|Number[]"}],"chainable":1},{"line":2040,"params":[{"name":"v1","description":"<p>a <a href=\"#/p5.Vector\">p5.Vector</a> to add</p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>a <a href=\"#/p5.Vector\">p5.Vector</a> to add</p>\n","type":"p5.Vector"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"the resulting <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":362,"description":"<p>Gives remainder of a vector when it is divided by another vector.\nSee examples for more context.</p>\n","itemtype":"method","name":"rem","chainable":1,"example":["\n<div class='norender'>\n<code>\nlet v = createVector(3, 4, 5);\nv.rem(2, 3, 4);\n// v's components are set to [1, 1, 1]\n</code>\n</div>\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(3, 4, 5);\nlet v2 = createVector(2, 3, 4);\n\nlet v3 = p5.Vector.rem(v1, v2);\n// v3 has components [1, 1, 1]\nprint(v3);\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":362,"params":[{"name":"x","description":"<p>the x component of divisor vector</p>\n","type":"Number"},{"name":"y","description":"<p>the y component of divisor vector</p>\n","type":"Number"},{"name":"z","description":"<p>the z component of divisor vector</p>\n","type":"Number"}],"chainable":1},{"line":391,"params":[{"name":"value","description":"<p>divisor vector</p>\n","type":"p5.Vector | Number[]"}],"chainable":1},{"line":2066,"params":[{"name":"v1","description":"<p>dividend <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>divisor <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"static":1},{"line":2072,"params":[{"name":"v1","description":"","type":"p5.Vector"},{"name":"v2","description":"","type":"p5.Vector"}],"static":1,"return":{"description":"the resulting <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":446,"description":"<p>Subtracts x, y, and z components from a vector, subtracts one vector from\nanother, or subtracts two independent vectors. The version of the method\nthat subtracts two vectors is a static method and returns a <a href=\"#/p5.Vector\">p5.Vector</a>, the\nother acts directly on the vector. Additionally, you may provide arguments to this function as an array.\nSee the examples for more context.</p>\n","itemtype":"method","name":"sub","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(4, 5, 6);\nv.sub(1, 1, 1);\n// v's components are set to [3, 4, 5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v = createVector(4, 5, 6);\n// Provide arguments as an array\nlet arr = [1, 1, 1];\nv.sub(arr);\n// v's components are set to [3, 4, 5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(2, 3, 4);\nlet v2 = createVector(1, 2, 3);\n\nlet v3 = p5.Vector.sub(v1, v2);\n// v3 has components [1, 1, 1]\nprint(v3);\n</code>\n</div>\n\n<div>\n<code>\n// red vector - blue vector = purple vector\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(70, 50);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(mouseX, mouseY);\n  drawArrow(v0, v2, 'blue');\n\n  let v3 = p5.Vector.sub(v1, v2);\n  drawArrow(v2, v3, 'purple');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":446,"params":[{"name":"x","description":"<p>the x component of the vector to subtract</p>\n","type":"Number"},{"name":"y","description":"<p>the y component of the vector to subtract</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>the z component of the vector to subtract</p>\n","type":"Number","optional":true}],"chainable":1},{"line":523,"params":[{"name":"value","description":"<p>the vector to subtract</p>\n","type":"p5.Vector|Number[]"}],"chainable":1},{"line":2091,"params":[{"name":"v1","description":"<p>a <a href=\"#/p5.Vector\">p5.Vector</a> to subtract from</p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>a <a href=\"#/p5.Vector\">p5.Vector</a> to subtract</p>\n","type":"p5.Vector"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"the resulting <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":547,"description":"<p>Multiplies the vector by a scalar, multiplies the x, y, and z components from a vector, or multiplies\nthe x, y, and z components of two independent vectors. When multiplying a vector by a scalar, the x, y,\nand z components of the vector are all multiplied by the scalar. When multiplying a vector by a vector,\nthe x, y, z components of both vectors are multiplied by each other\n(for example, with two vectors a and b: a.x * b.x, a.y * b.y, a.z * b.z). The static version of this method\ncreates a new <a href=\"#/p5.Vector\">p5.Vector</a> while the non static version acts on the vector\ndirectly. Additionally, you may provide arguments to this function as an array.\nSee the examples for more context.</p>\n","itemtype":"method","name":"mult","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(1, 2, 3);\nv.mult(2);\n// v's components are set to [2, 4, 6]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(1, 2, 3);\nlet v1 = createVector(2, 3, 4);\nv0.mult(v1); // v0's components are set to [2, 6, 12]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(1, 2, 3);\n// Provide arguments as an array\nlet arr = [2, 3, 4];\nv0.mult(arr); // v0's components are set to [2, 6, 12]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(1, 2, 3);\nlet v1 = createVector(2, 3, 4);\nconst result = p5.Vector.mult(v0, v1);\nprint(result); // result's components are set to [2, 6, 12]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(1, 2, 3);\nlet v2 = p5.Vector.mult(v1, 2);\n// v2 has components [2, 4, 6]\nprint(v2);\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(25, -25);\n  drawArrow(v0, v1, 'red');\n\n  let num = map(mouseX, 0, width, -2, 2, true);\n  let v2 = p5.Vector.mult(v1, num);\n  drawArrow(v0, v2, 'blue');\n\n  noStroke();\n  text('multiplied by ' + num.toFixed(2), 5, 90);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":547,"params":[{"name":"n","description":"<p>The number to multiply with the vector</p>\n","type":"Number"}],"chainable":1},{"line":640,"params":[{"name":"x","description":"<p>The number to multiply with the x component of the vector</p>\n","type":"Number"},{"name":"y","description":"<p>The number to multiply with the y component of the vector</p>\n","type":"Number"},{"name":"z","description":"<p>The number to multiply with the z component of the vector</p>\n","type":"Number","optional":true}],"chainable":1},{"line":648,"params":[{"name":"arr","description":"<p>The array to multiply with the components of the vector</p>\n","type":"Number[]"}],"chainable":1},{"line":654,"params":[{"name":"v","description":"<p>The vector to multiply with the components of the original vector</p>\n","type":"p5.Vector"}],"chainable":1},{"line":2120,"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 <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}},{"line":2129,"params":[{"name":"v","description":"","type":"p5.Vector"},{"name":"n","description":"","type":"Number"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1},{"line":2137,"params":[{"name":"v0","description":"","type":"p5.Vector"},{"name":"v1","description":"","type":"p5.Vector"},{"name":"target","description":"","type":"p5.Vector","optional":true}],"static":1},{"line":2145,"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":739,"description":"<p>Divides the vector by a scalar, divides a vector by the x, y, and z arguments, or divides the x, y, and\nz components of two vectors against each other. When dividing a vector by a scalar, the x, y,\nand z components of the vector are all divided by the scalar. When dividing a vector by a vector,\nthe x, y, z components of the source vector are treated as the dividend, and the x, y, z components\nof the argument is treated as the divisor (for example with two vectors a and b: a.x / b.x, a.y / b.y, a.z / b.z).\nThe static version of this method creates a\nnew <a href=\"#/p5.Vector\">p5.Vector</a> while the non static version acts on the vector directly.\nAdditionally, you may provide arguments to this function as an array.\nSee the examples for more context.</p>\n","itemtype":"method","name":"div","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(6, 4, 2);\nv.div(2); //v's components are set to [3, 2, 1]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(9, 4, 2);\nlet v1 = createVector(3, 2, 4);\nv0.div(v1); // v0's components are set to [3, 2, 0.5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(9, 4, 2);\n// Provide arguments as an array\nlet arr = [3, 2, 4];\nv0.div(arr); // v0's components are set to [3, 2, 0.5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(9, 4, 2);\nlet v1 = createVector(3, 2, 4);\nlet result = p5.Vector.div(v0, v1);\nprint(result); // result's components are set to [3, 2, 0.5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(6, 4, 2);\nlet v2 = p5.Vector.div(v1, 2);\n// v2 has components [3, 2, 1]\nprint(v2);\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 100);\n  let v1 = createVector(50, -50);\n  drawArrow(v0, v1, 'red');\n\n  let num = map(mouseX, 0, width, 10, 0.5, true);\n  let v2 = p5.Vector.div(v1, num);\n  drawArrow(v0, v2, 'blue');\n\n  noStroke();\n  text('divided by ' + num.toFixed(2), 10, 90);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":739,"params":[{"name":"n","description":"<p>The number to divide the vector by</p>\n","type":"Number"}],"chainable":1},{"line":832,"params":[{"name":"x","description":"<p>The number to divide with the x component of the vector</p>\n","type":"Number"},{"name":"y","description":"<p>The number to divide with the y component of the vector</p>\n","type":"Number"},{"name":"z","description":"<p>The number to divide with the z component of the vector</p>\n","type":"Number","optional":true}],"chainable":1},{"line":840,"params":[{"name":"arr","description":"<p>The array to divide the components of the vector by</p>\n","type":"Number[]"}],"chainable":1},{"line":846,"params":[{"name":"v","description":"<p>The vector to divide the components of the original vector by</p>\n","type":"p5.Vector"}],"chainable":1},{"line":2199,"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 <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}},{"line":2208,"params":[{"name":"v","description":"","type":"p5.Vector"},{"name":"n","description":"","type":"Number"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1},{"line":2216,"params":[{"name":"v0","description":"","type":"p5.Vector"},{"name":"v1","description":"","type":"p5.Vector"},{"name":"target","description":"","type":"p5.Vector","optional":true}],"static":1},{"line":2224,"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":944,"description":"<p>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).)</p>\n","itemtype":"method","name":"mag","return":{"description":"magnitude of the vector","type":"Number"},"example":["\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'black');\n\n  noStroke();\n  text('vector length: ' + v1.mag().toFixed(2), 10, 70, 90, 30);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>\n<div class=\"norender\">\n<code>\nlet v = createVector(20.0, 30.0, 40.0);\nlet m = v.mag();\nprint(m); // Prints \"53.85164807134504\"\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":944,"params":[],"return":{"description":"magnitude of the vector","type":"Number"}},{"line":2324,"params":[{"name":"vecT","description":"<p>the vector to return the magnitude of</p>\n","type":"p5.Vector"}],"static":1,"return":{"description":"the magnitude of vecT","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":992,"description":"<p>Calculates the squared magnitude of the vector and returns the result\nas a float (this is simply the equation <em>(x*x + y*y + z*z)</em>.)\nFaster if the real length is not required in the\ncase of comparing vectors, etc.</p>\n","itemtype":"method","name":"magSq","return":{"description":"squared magnitude of the vector","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(6, 4, 2);\nprint(v1.magSq()); // Prints \"56\"\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'black');\n\n  noStroke();\n  text('vector length squared: ' + v1.magSq().toFixed(2), 10, 45, 90, 55);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1046,"description":"<p>Calculates the dot product of two vectors. The version of the method\nthat computes the dot product of two independent vectors is a static\nmethod. See the examples for more context.</p>\n","itemtype":"method","name":"dot","return":{"description":"the dot product","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 2, 3);\nlet v2 = createVector(2, 3, 4);\n\nprint(v1.dot(v2)); // Prints \"20\"\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n//Static method\nlet v1 = createVector(1, 2, 3);\nlet v2 = createVector(3, 2, 1);\nprint(p5.Vector.dot(v1, v2)); // Prints \"10\"\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1046,"params":[{"name":"x","description":"<p>x component of the vector</p>\n","type":"Number"},{"name":"y","description":"<p>y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>z component of the vector</p>\n","type":"Number","optional":true}],"return":{"description":"the dot product","type":"Number"}},{"line":1076,"params":[{"name":"value","description":"<p>value component of the vector or a <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"return":{"description":"","type":"Number"}},{"line":2251,"params":[{"name":"v1","description":"<p>the first <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>the second <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"static":1,"return":{"description":"the dot product","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":1088,"description":"<p>Calculates and returns a vector composed of the cross product between\ntwo vectors. Both the static and non static methods return a new <a href=\"#/p5.Vector\">p5.Vector</a>.\nSee the examples for more context.</p>\n","itemtype":"method","name":"cross","return":{"description":"<a href=\"#/p5.Vector\">p5.Vector</a> composed of cross product","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 2, 3);\nlet v2 = createVector(1, 2, 3);\n\nlet v = v1.cross(v2); // v's components are [0, 0, 0]\nprint(v);\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(1, 0, 0);\nlet v2 = createVector(0, 1, 0);\n\nlet crossProduct = p5.Vector.cross(v1, v2);\n// crossProduct has components [0, 0, 1]\nprint(crossProduct);\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1088,"params":[{"name":"v","description":"<p><a href=\"#/p5.Vector\">p5.Vector</a> to be crossed</p>\n","type":"p5.Vector"}],"return":{"description":"<a href=\"#/p5.Vector\">p5.Vector</a> composed of cross product","type":"p5.Vector"}},{"line":2265,"params":[{"name":"v1","description":"<p>the first <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>the second <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"static":1,"return":{"description":"the cross product","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":1130,"description":"<p>Calculates the Euclidean distance between two points (considering a\npoint as a vector object).</p>\n","itemtype":"method","name":"dist","return":{"description":"the distance","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 0, 0);\nlet v2 = createVector(0, 1, 0);\n\nlet distance = v1.dist(v2); // distance is 1.4142...\nprint(distance);\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(1, 0, 0);\nlet v2 = createVector(0, 1, 0);\n\nlet distance = p5.Vector.dist(v1, v2);\n// distance is 1.4142...\nprint(distance);\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n\n  let v1 = createVector(70, 50);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(mouseX, mouseY);\n  drawArrow(v0, v2, 'blue');\n\n  noStroke();\n  text('distance between vectors: ' + v2.dist(v1).toFixed(2), 5, 50, 95, 50);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1130,"params":[{"name":"v","description":"<p>the x, y, and z coordinates of a <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"return":{"description":"the distance","type":"Number"}},{"line":2280,"params":[{"name":"v1","description":"<p>the first <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>the second <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"static":1,"return":{"description":"the distance","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":1201,"description":"<p>Normalize the vector to length 1 (make it a unit vector).</p>\n","itemtype":"method","name":"normalize","return":{"description":"normalized <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(10, 20, 2);\n// v has components [10.0, 20.0, 2.0]\nv.normalize();\n// v's components are set to\n// [0.4454354, 0.8908708, 0.089087084]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v_initial = createVector(10, 20, 2);\n// v_initial has components [10.0, 20.0, 2.0]\nlet v_normalized = p5.Vector.normalize(v_initial);\nprint(v_normalized);\n// returns a new vector with components set to\n// [0.4454354, 0.8908708, 0.089087084]\n// v_initial remains unchanged\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(mouseX - 50, mouseY - 50);\n\n  drawArrow(v0, v1, 'red');\n  v1.normalize();\n  drawArrow(v0, v1.mult(35), 'blue');\n\n  noFill();\n  ellipse(50, 50, 35 * 2);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1201,"params":[],"return":{"description":"normalized <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}},{"line":2341,"params":[{"name":"v","description":"<p>the vector to normalize</p>\n","type":"p5.Vector"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"v normalized to a length of 1","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":1271,"description":"<p>Limit the magnitude of this vector to the value used for the <b>max</b>\nparameter.</p>\n","itemtype":"method","name":"limit","params":[{"name":"max","description":"<p>the maximum magnitude for the vector</p>\n","type":"Number"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(10, 20, 2);\n// v has components [10.0, 20.0, 2.0]\nv.limit(5);\n// v's components are set to\n// [2.2271771, 4.4543543, 0.4454354]\n</code>\n</div>\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(mouseX - 50, mouseY - 50);\n\n  drawArrow(v0, v1, 'red');\n  drawArrow(v0, v1.limit(35), 'blue');\n\n  noFill();\n  ellipse(50, 50, 35 * 2);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1329,"description":"<p>Set the magnitude of this vector to the value used for the <b>len</b>\nparameter.</p>\n","itemtype":"method","name":"setMag","params":[{"name":"len","description":"<p>the new length for this vector</p>\n","type":"Number"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(10, 20, 2);\n// v has components [10.0, 20.0, 2.0]\nv.setMag(10);\n// v's components are set to [6.0, 8.0, 0.0]\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(50, 50);\n\n  drawArrow(v0, v1, 'red');\n\n  let length = map(mouseX, 0, width, 0, 141, true);\n  v1.setMag(length);\n  drawArrow(v0, v1, 'blue');\n\n  noStroke();\n  text('magnitude set to: ' + length.toFixed(2), 10, 70, 90, 30);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1385,"description":"<p>Calculate the angle of rotation for this vector(only 2D vectors).\np5.Vectors created using <a src=\"#/p5/createVector\">createVector()</a>\nwill take the current <a = src=\"#/p5/angleMode\">angleMode</a> into consideration, and give the angle\nin radians or degree accordingly.</p>\n","itemtype":"method","name":"heading","return":{"description":"the angle of rotation","type":"Number"},"example":["\n<div class = \"norender\">\n<code>\nfunction setup() {\n  let v1 = createVector(30, 50);\n  print(v1.heading()); // 1.0303768265243125\n\n  v1 = createVector(40, 50);\n  print(v1.heading()); // 0.8960553845713439\n\n  v1 = createVector(30, 70);\n  print(v1.heading()); // 1.1659045405098132\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(mouseX - 50, mouseY - 50);\n\n  drawArrow(v0, v1, 'black');\n\n  let myHeading = v1.heading();\n  noStroke();\n  text(\n    'vector heading: ' +\n      myHeading.toFixed(2) +\n      ' radians or ' +\n      degrees(myHeading).toFixed(2) +\n      ' degrees',\n    10,\n    50,\n    90,\n    50\n  );\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1457,"description":"<p>Rotate the vector to a specific angle (only 2D vectors), magnitude remains the\nsame</p>\n","itemtype":"method","name":"setHeading","params":[{"name":"angle","description":"<p>the angle of rotation</p>\n","type":"Number"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(10.0, 20.0);\n// result of v.heading() is 1.1071487177940904\nv.setHeading(Math.PI);\n// result of v.heading() is now 3.141592653589793\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1482,"description":"<p>Rotate the vector by an angle (only 2D vectors), magnitude remains the\nsame</p>\n","itemtype":"method","name":"rotate","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(10.0, 20.0);\n// v has components [10.0, 20.0, 0.0]\nv.rotate(HALF_PI);\n// v's components are set to [-20.0, 9.999999, 0.0]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// static function implementation\nlet v = createVector(10.0, 20.0);\n// v has components [10.0, 20.0, 0.0]\nlet rotated_v = p5.Vector.rotate(v, HALF_PI);\nconsole.log(rotated_v);\n// rotated_v's components are set to [-20.0, 9.999999, 0.0]\nconsole.log(v);\n// v's components remains the same (i.e, [10.0, 20.0, 0.0])\n</code>\n</div>\n\n<div>\n<code>\nlet angle = 0;\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(50, 0);\n\n  drawArrow(v0, v1.rotate(angle), 'black');\n  angle += 0.01;\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1482,"params":[{"name":"angle","description":"<p>the angle of rotation</p>\n","type":"Number"}],"chainable":1},{"line":2172,"params":[{"name":"v","description":"","type":"p5.Vector"},{"name":"angle","description":"","type":"Number"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1}]},{"file":"src/math/p5.Vector.js","line":1551,"description":"<p>Calculates and returns the angle (in radians) between two vectors.</p>\n","itemtype":"method","name":"angleBetween","params":[{"name":"value","description":"<p>the x, y, and z components of a <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"return":{"description":"the angle between (in radians)","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 0, 0);\nlet v2 = createVector(0, 1, 0);\n\nlet angle = v1.angleBetween(v2);\n// angle is PI/2\nprint(angle);\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n  let v0 = createVector(50, 50);\n\n  let v1 = createVector(50, 0);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(mouseX - 50, mouseY - 50);\n  drawArrow(v0, v2, 'blue');\n\n  let angleBetween = v1.angleBetween(v2);\n  noStroke();\n  text(\n    'angle between: ' +\n      angleBetween.toFixed(2) +\n      ' radians or ' +\n      degrees(angleBetween).toFixed(2) +\n      ' degrees',\n    10,\n    50,\n    90,\n    50\n  );\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1628,"description":"<p>Linear interpolate the vector to another vector</p>\n","itemtype":"method","name":"lerp","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(1, 1, 0);\n\nv.lerp(3, 3, 0, 0.5); // v now has components [2,2,0]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v1 = createVector(0, 0, 0);\nlet v2 = createVector(100, 100, 0);\n\nlet v3 = p5.Vector.lerp(v1, v2, 0.5);\n// v3 has components [50,50,0]\nprint(v3);\n</code>\n</div>\n\n<div>\n<code>\nlet step = 0.01;\nlet amount = 0;\n\nfunction draw() {\n  background(240);\n  let v0 = createVector(0, 0);\n\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(90, 90);\n  drawArrow(v0, v2, 'blue');\n\n  if (amount > 1 || amount < 0) {\n    step *= -1;\n  }\n  amount += step;\n  let v3 = p5.Vector.lerp(v1, v2, amount);\n\n  drawArrow(v0, v3, 'purple');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1628,"params":[{"name":"x","description":"<p>the x component</p>\n","type":"Number"},{"name":"y","description":"<p>the y component</p>\n","type":"Number"},{"name":"z","description":"<p>the z component</p>\n","type":"Number"},{"name":"amt","description":"<p>the amount of interpolation; some value between 0.0\n                        (old vector) and 1.0 (new vector). 0.9 is very near\n                        the new vector. 0.5 is halfway in between.</p>\n","type":"Number"}],"chainable":1},{"line":1701,"params":[{"name":"v","description":"<p>the <a href=\"#/p5.Vector\">p5.Vector</a> to lerp to</p>\n","type":"p5.Vector"},{"name":"amt","description":"","type":"Number"}],"chainable":1},{"line":2295,"params":[{"name":"v1","description":"","type":"p5.Vector"},{"name":"v2","description":"","type":"p5.Vector"},{"name":"amt","description":"","type":"Number"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"the lerped value","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":1717,"description":"<p>Reflect the incoming vector about a normal to a line in 2D, or about a normal to a plane in 3D\nThis method acts on the vector directly</p>\n","itemtype":"method","name":"reflect","params":[{"name":"surfaceNormal","description":"<p>the <a href=\"#/p5.Vector\">p5.Vector</a> to reflect about, will be normalized by this method</p>\n","type":"p5.Vector"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(4, 6); // incoming vector, this example vector is heading to the right and downward\nlet n = createVector(0, -1); // surface normal to a plane (this example normal points directly upwards)\nv.reflect(n); // v is reflected about the surface normal n.  v's components are now set to [4, -6]\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'red');\n\n  let n = createVector(0, -30);\n  drawArrow(v1, n, 'blue');\n\n  let r = v1.copy();\n  r.reflect(n);\n  drawArrow(v1, r, 'purple');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1772,"description":"<p>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 <b>p5.Vector.<a href=\"#/p5.Vector/copy\">copy()</a></b> method to copy into your own\narray.</p>\n","itemtype":"method","name":"array","return":{"description":"an Array with the 3 values","type":"Number[]"},"example":["\n<div class = \"norender\">\n<code>\nfunction setup() {\n  let v = createVector(20, 30);\n  print(v.array()); // Prints : Array [20, 30, 0]\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v = createVector(10.0, 20.0, 30.0);\nlet f = v.array();\nprint(f[0]); // Prints \"10.0\"\nprint(f[1]); // Prints \"20.0\"\nprint(f[2]); // Prints \"30.0\"\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1804,"description":"<p>Equality check against a <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","itemtype":"method","name":"equals","return":{"description":"whether the vectors are equals","type":"Boolean"},"example":["\n<div class = \"norender\">\n<code>\nlet v1 = createVector(5, 10, 20);\nlet v2 = createVector(5, 10, 20);\nlet v3 = createVector(13, 10, 19);\n\nprint(v1.equals(v2.x, v2.y, v2.z)); // true\nprint(v1.equals(v3.x, v3.y, v3.z)); // false\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v1 = createVector(10.0, 20.0, 30.0);\nlet v2 = createVector(10.0, 20.0, 30.0);\nlet v3 = createVector(0.0, 0.0, 0.0);\nprint(v1.equals(v2)); // true\nprint(v1.equals(v3)); // false\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1804,"params":[{"name":"x","description":"<p>the x component of the vector</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>the y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>the z component of the vector</p>\n","type":"Number","optional":true}],"return":{"description":"whether the vectors are equals","type":"Boolean"}},{"line":1834,"params":[{"name":"value","description":"<p>the vector to compare</p>\n","type":"p5.Vector|Array"}],"return":{"description":"","type":"Boolean"}}]},{"file":"src/math/p5.Vector.js","line":1859,"description":"<p>Make a new 2D vector from an angle</p>\n","itemtype":"method","name":"fromAngle","static":1,"params":[{"name":"angle","description":"<p>the desired angle, in radians (unaffected by <a href=\"#/p5/angleMode\">angleMode</a>)</p>\n","type":"Number"},{"name":"length","description":"<p>the length of the new vector (defaults to 1)</p>\n","type":"Number","optional":true}],"return":{"description":"the new <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div>\n<code>\nfunction draw() {\n  background(200);\n\n  // Create a variable, proportional to the mouseX,\n  // varying from 0-360, to represent an angle in degrees.\n  let myDegrees = map(mouseX, 0, width, 0, 360);\n\n  // Display that variable in an onscreen text.\n  // (Note the nfc() function to truncate additional decimal places,\n  // and the \"\\xB0\" character for the degree symbol.)\n  let readout = 'angle = ' + nfc(myDegrees, 1) + '\\xB0';\n  noStroke();\n  fill(0);\n  text(readout, 5, 15);\n\n  // Create a p5.Vector using the fromAngle function,\n  // and extract its x and y components.\n  let v = p5.Vector.fromAngle(radians(myDegrees), 30);\n  let vx = v.x;\n  let vy = v.y;\n\n  push();\n  translate(width / 2, height / 2);\n  noFill();\n  stroke(150);\n  line(0, 0, 30, 0);\n  stroke(0);\n  line(0, 0, vx, vy);\n  pop();\n}\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1910,"description":"<p>Make a new 3D vector from a pair of ISO spherical angles</p>\n","itemtype":"method","name":"fromAngles","static":1,"params":[{"name":"theta","description":"<p>the polar angle, in radians (zero is up)</p>\n","type":"Number"},{"name":"phi","description":"<p>the azimuthal angle, in radians\n                              (zero is out of the screen)</p>\n","type":"Number"},{"name":"length","description":"<p>the length of the new vector (defaults to 1)</p>\n","type":"Number","optional":true}],"return":{"description":"the new <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  fill(255);\n  noStroke();\n}\nfunction draw() {\n  background(255);\n\n  let t = millis() / 1000;\n\n  // add three point lights\n  pointLight(color('#f00'), p5.Vector.fromAngles(t * 1.0, t * 1.3, 100));\n  pointLight(color('#0f0'), p5.Vector.fromAngles(t * 1.1, t * 1.2, 100));\n  pointLight(color('#00f'), p5.Vector.fromAngles(t * 1.2, t * 1.1, 100));\n\n  sphere(35);\n}\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1959,"description":"<p>Make a new 2D unit vector from a random angle</p>\n","itemtype":"method","name":"random2D","static":1,"return":{"description":"the new <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v = p5.Vector.random2D();\n// May make v's attributes something like:\n// [0.61554617, -0.51195765, 0.0] or\n// [-0.4695841, -0.14366731, 0.0] or\n// [0.6091097, -0.22805278, 0.0]\nprint(v);\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  frameRate(1);\n}\n\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = p5.Vector.random2D();\n  drawArrow(v0, v1.mult(50), 'black');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2012,"description":"<p>Make a new random 3D unit vector.</p>\n","itemtype":"method","name":"random3D","static":1,"return":{"description":"the new <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v = p5.Vector.random3D();\n// May make v's attributes something like:\n// [0.61554617, -0.51195765, 0.599168] or\n// [-0.4695841, -0.14366731, -0.8711202] or\n// [0.6091097, -0.22805278, -0.7595902]\nprint(v);\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2116,"description":"<p>Multiplies a vector by a scalar and returns a new vector.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2168,"description":"<p>Rotates the vector (only 2D vectors) by the given angle, magnitude remains the same and returns a new vector.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2195,"description":"<p>Divides a vector by a scalar and returns a new vector.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2248,"description":"<p>Calculates the dot product of two vectors.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2262,"description":"<p>Calculates the cross product of two vectors.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2276,"description":"<p>Calculates the Euclidean distance between two points (considering a\npoint as a vector object).</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2291,"description":"<p>Linear interpolate a vector to another vector and return the result as a\nnew vector.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2320,"description":"<p>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).)</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2338,"description":"<p>Normalize the vector to length 1 (make it a unit vector).</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/random.js","line":37,"description":"<p>Sets the seed value for <a href=\"#/p5/random\">random()</a>.</p>\n<p>By default, <a href=\"#/p5/random\">random()</a> produces different results each time the program\nis run. Set the seed parameter to a constant to return the same\npseudo-random numbers each time the software is run.</p>\n","itemtype":"method","name":"randomSeed","params":[{"name":"seed","description":"<p>the seed value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nrandomSeed(99);\nfor (let i = 0; i < 100; i++) {\n  let r = random(0, 255);\n  stroke(r);\n  line(i, 0, i, 100);\n}\n</code>\n</div>"],"alt":"many vertical lines drawn in white, black or grey.","class":"p5","module":"Math","submodule":"Random"},{"file":"src/math/random.js","line":66,"description":"<p>Return a random floating-point number.</p>\n<p>Takes either 0, 1 or 2 arguments.</p>\n<p>If no argument is given, returns a random number from 0\nup to (but not including) 1.</p>\n<p>If one argument is given and it is a number, returns a random number from 0\nup to (but not including) the number.</p>\n<p>If one argument is given and it is an array, returns a random element from\nthat array.</p>\n<p>If two arguments are given, returns a random number from the\nfirst argument up to (but not including) the second argument.</p>\n","itemtype":"method","name":"random","return":{"description":"the random number","type":"Number"},"example":["\n<div>\n<code>\nfor (let i = 0; i < 100; i++) {\n  let r = random(50);\n  stroke(r * 5);\n  line(50, i, 50 + r, i);\n}\n</code>\n</div>\n<div>\n<code>\nfor (let i = 0; i < 100; i++) {\n  let r = random(-50, 50);\n  line(50, i, 50 + r, i);\n}\n</code>\n</div>\n<div>\n<code>\n// Get a random element from an array using the random(Array) syntax\nlet words = ['apple', 'bear', 'cat', 'dog'];\nlet word = random(words); // select random word\ntext(word, 10, 50); // draw the word\n</code>\n</div>"],"alt":"100 horizontal lines from center canvas to right. size+fill change each time\n100 horizontal lines from center of canvas. height & side change each render\nword displayed at random. Either apple, bear, cat, or dog","class":"p5","module":"Math","submodule":"Random","overloads":[{"line":66,"params":[{"name":"min","description":"<p>the lower bound (inclusive)</p>\n","type":"Number","optional":true},{"name":"max","description":"<p>the upper bound (exclusive)</p>\n","type":"Number","optional":true}],"return":{"description":"the random number","type":"Number"}},{"line":119,"params":[{"name":"choices","description":"<p>the array to choose from</p>\n","type":"Array"}],"return":{"description":"the random element from the array","type":"*"}}]},{"file":"src/math/random.js","line":153,"description":"<p>Returns a random number fitting a Gaussian, or\n normal, distribution. There is theoretically no minimum or maximum\n value that <a href=\"#/p5/randomGaussian\">randomGaussian()</a> might return. Rather, there is\n just a very low probability that values far from the mean will be\n returned; and a higher probability that numbers near the mean will\n be returned.\nTakes either 0, 1 or 2 arguments.<br>\n If no args, returns a mean of 0 and standard deviation of 1.<br>\n If one arg, that arg is the mean (standard deviation is 1).<br>\n If two args, first is mean, second is standard deviation.</p>\n","itemtype":"method","name":"randomGaussian","params":[{"name":"mean","description":"<p>the mean</p>\n","type":"Number","optional":true},{"name":"sd","description":"<p>the standard deviation</p>\n","type":"Number","optional":true}],"return":{"description":"the random number","type":"Number"},"example":["\n <div>\n <code>\n for (let y = 0; y < 100; y++) {\n   let x = randomGaussian(50, 15);\n   line(50, y, x, y);\n }\n </code>\n </div>\n <div>\n <code>\n let distribution = new Array(360);\nfunction setup() {\n   createCanvas(100, 100);\n   for (let i = 0; i < distribution.length; i++) {\n     distribution[i] = floor(randomGaussian(0, 15));\n   }\n }\nfunction draw() {\n   background(204);\n  translate(width / 2, width / 2);\n  for (let i = 0; i < distribution.length; i++) {\n     rotate(TWO_PI / distribution.length);\n     stroke(0);\n     let dist = abs(distribution[i]);\n     line(0, 0, dist, 0);\n   }\n }\n </code>\n </div>"],"alt":"100 horizontal lines from center of canvas. height & side change each render\n black lines radiate from center of canvas. size determined each render","class":"p5","module":"Math","submodule":"Random"},{"file":"src/math/trigonometry.js","line":18,"description":"<p>The inverse of <a href=\"#/p5/cos\">cos()</a>, returns the arc cosine of a value.\nThis function expects the values in the range of -1 to 1 and values are returned in\nthe range 0 to PI (3.1415927) if the angleMode is RADIANS or 0 to 180 if the\nangle mode is DEGREES.</p>\n","itemtype":"method","name":"acos","params":[{"name":"value","description":"<p>the value whose arc cosine is to be returned</p>\n","type":"Number"}],"return":{"description":"the arc cosine of the given value","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet a = PI;\nlet c = cos(a);\nlet ac = acos(c);\n// Prints: \"3.1415927 : -1.0 : 3.1415927\"\nprint(a + ' : ' + c + ' : ' + ac);\n</code>\n</div>\n\n<div class= “norender\">\n<code>\nlet a = PI + PI / 4.0;\nlet c = cos(a);\nlet ac = acos(c);\n// Prints: \"3.926991 : -0.70710665 : 2.3561943\"\nprint(a + ' : ' + c + ' : ' + ac);\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":53,"description":"<p>The inverse of <a href=\"#/p5/sin\">sin()</a>, returns the arc sine of a value.\nThis function expects the values in the range of -1 to 1 and values are returned\nin the range -PI/2 to PI/2 if the angleMode is RADIANS or -90 to 90 if the angle\nmode is DEGREES.</p>\n","itemtype":"method","name":"asin","params":[{"name":"value","description":"<p>the value whose arc sine is to be returned</p>\n","type":"Number"}],"return":{"description":"the arc sine of the given value","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet a = PI / 3.0;\nlet s = sin(a);\nlet as = asin(s);\n// Prints: \"1.0471975 : 0.86602540 : 1.0471975\"\nprint(a + ' : ' + s + ' : ' + as);\n</code>\n</div>\n\n<div class= “norender\">\n<code>\nlet a = PI + PI / 3.0;\nlet s = sin(a);\nlet as = asin(s);\n// Prints: \"4.1887902 : -0.86602540 : -1.0471975\"\nprint(a + ' : ' + s + ' : ' + as);\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":88,"description":"<p>The inverse of <a href=\"#/p5/tan\">tan()</a>, returns the arc tangent of a value.\nThis function expects the values in the range of -Infinity to Infinity (exclusive) and\nvalues are returned in the range -PI/2 to PI/2 if the angleMode is RADIANS or\n-90 to 90 if the angle mode is DEGREES.</p>\n","itemtype":"method","name":"atan","params":[{"name":"value","description":"<p>the value whose arc tangent is to be returned</p>\n","type":"Number"}],"return":{"description":"the arc tangent of the given value","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet a = PI / 3.0;\nlet t = tan(a);\nlet at = atan(t);\n// Prints: \"1.0471975 : 1.7320508 : 1.0471975\"\nprint(a + ' : ' + t + ' : ' + at);\n</code>\n</div>\n\n<div class= “norender\">\n<code>\nlet a = PI + PI / 3.0;\nlet t = tan(a);\nlet at = atan(t);\n// Prints: \"4.1887902 : 1.7320508 : 1.0471975\"\nprint(a + ' : ' + t + ' : ' + at);\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":123,"description":"<p>Calculates the angle (in radians) from a specified point to the coordinate\norigin as measured from the positive x-axis. Values are returned as a\nfloat in the range from PI to -PI if the angleMode is RADIANS or 180 to\n-180 if the angleMode is DEGREES. The atan2<a href=\"#/p5/\">()</a> function is\nmost often used for orienting geometry to the position of the cursor.</p>\n<p>Note: The y-coordinate of the point is the first parameter, and the\nx-coordinate is the second parameter, due the the structure of calculating\nthe tangent.</p>\n","itemtype":"method","name":"atan2","params":[{"name":"y","description":"<p>y-coordinate of the point</p>\n","type":"Number"},{"name":"x","description":"<p>x-coordinate of the point</p>\n","type":"Number"}],"return":{"description":"the arc tangent of the given point","type":"Number"},"example":["\n<div>\n<code>\nfunction draw() {\n  background(204);\n  translate(width / 2, height / 2);\n  let a = atan2(mouseY - height / 2, mouseX - width / 2);\n  rotate(a);\n  rect(-30, -5, 60, 10);\n}\n</code>\n</div>"],"alt":"60 by 10 rect at center of canvas rotates with mouse movements","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":159,"description":"<p>Calculates the cosine of an angle. This function takes into account the\ncurrent <a href=\"#/p5/angleMode\">angleMode</a>. Values are returned in the range -1 to 1.</p>\n","itemtype":"method","name":"cos","params":[{"name":"angle","description":"<p>the angle</p>\n","type":"Number"}],"return":{"description":"the cosine of the angle","type":"Number"},"example":["\n<div>\n<code>\nlet a = 0.0;\nlet inc = TWO_PI / 25.0;\nfor (let i = 0; i < 25; i++) {\n  line(i * 4, 50, i * 4, 50 + cos(a) * 40.0);\n  a = a + inc;\n}\n</code>\n</div>"],"alt":"vertical black lines form wave patterns, extend-down on left and right side","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":186,"description":"<p>Calculates the sine of an angle. This function takes into account the\ncurrent <a href=\"#/p5/angleMode\">angleMode</a>. Values are returned in the range -1 to 1.</p>\n","itemtype":"method","name":"sin","params":[{"name":"angle","description":"<p>the angle</p>\n","type":"Number"}],"return":{"description":"the sine of the angle","type":"Number"},"example":["\n<div>\n<code>\nlet a = 0.0;\nlet inc = TWO_PI / 25.0;\nfor (let i = 0; i < 25; i++) {\n  line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);\n  a = a + inc;\n}\n</code>\n</div>"],"alt":"vertical black lines extend down and up from center to form wave pattern","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":213,"description":"<p>Calculates the tangent of an angle. This function takes into account\nthe current <a href=\"#/p5/angleMode\">angleMode</a>. Values are returned in the range of all real numbers.</p>\n","itemtype":"method","name":"tan","params":[{"name":"angle","description":"<p>the angle</p>\n","type":"Number"}],"return":{"description":"the tangent of the angle","type":"Number"},"example":["\n<div>\n<code>\nlet a = 0.0;\nlet inc = TWO_PI / 50.0;\nfor (let i = 0; i < 100; i = i + 2) {\n  line(i, 50, i, 50 + tan(a) * 2.0);\n  a = a + inc;\n}\n</code>"],"alt":"vertical black lines end down and up from center to form spike pattern","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":239,"description":"<p>Converts a radian measurement to its corresponding value in degrees.\nRadians and degrees are two ways of measuring the same thing. There are\n360 degrees in a circle and 2*PI radians in a circle. For example,\n90° = PI/2 = 1.5707964. This function does not take into account the\ncurrent <a href=\"#/p5/angleMode\">angleMode</a>.</p>\n","itemtype":"method","name":"degrees","params":[{"name":"radians","description":"<p>the radians value to convert to degrees</p>\n","type":"Number"}],"return":{"description":"the converted angle","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet rad = PI / 4;\nlet deg = degrees(rad);\nprint(rad + ' radians is ' + deg + ' degrees');\n// Prints: 0.7853981633974483 radians is 45 degrees\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":262,"description":"<p>Converts a degree measurement to its corresponding value in radians.\nRadians and degrees are two ways of measuring the same thing. There are\n360 degrees in a circle and 2*PI radians in a circle. For example,\n90° = PI/2 = 1.5707964. This function does not take into account the\ncurrent <a href=\"#/p5/angleMode\">angleMode</a>.</p>\n","itemtype":"method","name":"radians","params":[{"name":"degrees","description":"<p>the degree value to convert to radians</p>\n","type":"Number"}],"return":{"description":"the converted angle","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet deg = 45.0;\nlet rad = radians(deg);\nprint(deg + ' degrees is ' + rad + ' radians');\n// Prints: 45 degrees is 0.7853981633974483 radians\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":285,"description":"<p>Sets the current mode of p5 to given mode. Default mode is RADIANS.</p>\n","itemtype":"method","name":"angleMode","params":[{"name":"mode","description":"<p>either RADIANS or DEGREES</p>\n","type":"Constant"}],"example":["\n<div>\n<code>\nfunction draw() {\n  background(204);\n  angleMode(DEGREES); // Change the mode to DEGREES\n  let a = atan2(mouseY - height / 2, mouseX - width / 2);\n  translate(width / 2, height / 2);\n  push();\n  rotate(a);\n  rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees\n  pop();\n  angleMode(RADIANS); // Change the mode to RADIANS\n  rotate(a); // variable a stays the same\n  rect(-40, -5, 20, 10); // Smaller rectangle is rotating in radians\n}\n</code>\n</div>"],"alt":"40 by 10 rect in center rotates with mouse moves. 20 by 10 rect moves faster.","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/typography/attributes.js","line":11,"description":"<p>Sets the current alignment for drawing text. Accepts two\narguments: horizAlign (LEFT, CENTER, or RIGHT) and\nvertAlign (TOP, BOTTOM, CENTER, or BASELINE).</p>\n<p>The horizAlign parameter is in reference to the x value\nof the <a href=\"#/p5/text\">text()</a> function, while the vertAlign parameter\nis in reference to the y value.</p>\n<p>So if you write textAlign(LEFT), you are aligning the left\nedge of your text to the x value you give in <a href=\"#/p5/text\">text()</a>.\nIf you write textAlign(RIGHT, TOP), you are aligning the right edge\nof your text to the x value and the top of edge of the text\nto the y value.</p>\n","itemtype":"method","name":"textAlign","chainable":1,"example":["\n<div>\n<code>\ntextSize(16);\ntextAlign(RIGHT);\ntext('ABCD', 50, 30);\ntextAlign(CENTER);\ntext('EFGH', 50, 50);\ntextAlign(LEFT);\ntext('IJKL', 50, 70);\n</code>\n</div>\n\n<div>\n<code>\ntextSize(16);\nstrokeWeight(0.5);\n\nline(0, 12, width, 12);\ntextAlign(CENTER, TOP);\ntext('TOP', 0, 12, width);\n\nline(0, 37, width, 37);\ntextAlign(CENTER, CENTER);\ntext('CENTER', 0, 37, width);\n\nline(0, 62, width, 62);\ntextAlign(CENTER, BASELINE);\ntext('BASELINE', 0, 62, width);\n\nline(0, 87, width, 87);\ntextAlign(CENTER, BOTTOM);\ntext('BOTTOM', 0, 87, width);\n</code>\n</div>"],"alt":"Letters ABCD displayed at top left, EFGH at center and IJKL at bottom right.\nThe names of the four vertical alignments (TOP, CENTER, BASELINE & BOTTOM) rendered each showing that alignment's placement relative to a horizontal line.","class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":11,"params":[{"name":"horizAlign","description":"<p>horizontal alignment, either LEFT,\n                           CENTER, or RIGHT</p>\n","type":"Constant"},{"name":"vertAlign","description":"<p>vertical alignment, either TOP,\n                           BOTTOM, CENTER, or BASELINE</p>\n","type":"Constant","optional":true}],"chainable":1},{"line":72,"params":[],"return":{"description":"","type":"Object"}}]},{"file":"src/typography/attributes.js","line":81,"description":"<p>Sets/gets the spacing, in pixels, between lines of text. This setting will be\nused in all subsequent calls to the <a href=\"#/p5/text\">text()</a> function.</p>\n","itemtype":"method","name":"textLeading","chainable":1,"example":["\n<div>\n<code>\nlet lines = 'L1\\nL2\\nL3'; // \"\\n\" is a \"new line\" character\ntextSize(12);\n\ntextLeading(10);\ntext(lines, 10, 25);\n\ntextLeading(20);\ntext(lines, 40, 25);\n\ntextLeading(30);\ntext(lines, 70, 25);\n</code>\n</div>"],"alt":"A set of L1 L2 & L3 displayed vertically 3 times. spacing increases for each set","class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":81,"params":[{"name":"leading","description":"<p>the size in pixels for spacing between lines</p>\n","type":"Number"}],"chainable":1},{"line":109,"params":[],"return":{"description":"","type":"Number"}}]},{"file":"src/typography/attributes.js","line":118,"description":"<p>Sets/gets the current font size. This size will be used in all subsequent\ncalls to the <a href=\"#/p5/text\">text()</a> function. Font size is measured in pixels.</p>\n","itemtype":"method","name":"textSize","chainable":1,"example":["\n<div>\n<code>\ntextSize(12);\ntext('Font Size 12', 10, 30);\ntextSize(14);\ntext('Font Size 14', 10, 60);\ntextSize(16);\ntext('Font Size 16', 10, 90);\n</code>\n</div>"],"alt":"'Font Size 12' displayed small, 'Font Size 14' medium & 'Font Size 16' large","class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":118,"params":[{"name":"theSize","description":"<p>the size of the letters in units of pixels</p>\n","type":"Number"}],"chainable":1},{"line":141,"params":[],"return":{"description":"","type":"Number"}}]},{"file":"src/typography/attributes.js","line":150,"description":"<p>Sets/gets the style of the text for system fonts to NORMAL, ITALIC, BOLD or BOLDITALIC.\nNote: this may be is overridden by CSS styling. For non-system fonts\n(opentype, truetype, etc.) please load styled fonts instead.</p>\n","itemtype":"method","name":"textStyle","chainable":1,"example":["\n<div>\n<code>\nstrokeWeight(0);\ntextSize(12);\ntextStyle(NORMAL);\ntext('Font Style Normal', 10, 15);\ntextStyle(ITALIC);\ntext('Font Style Italic', 10, 40);\ntextStyle(BOLD);\ntext('Font Style Bold', 10, 65);\ntextStyle(BOLDITALIC);\ntext('Font Style Bold Italic', 10, 90);\n</code>\n</div>"],"alt":"Words Font Style Normal displayed normally, Italic in italic, bold in bold and bold italic in bold italics.","class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":150,"params":[{"name":"theStyle","description":"<p>styling for text, either NORMAL,\n                           ITALIC, BOLD or BOLDITALIC</p>\n","type":"Constant"}],"chainable":1},{"line":178,"params":[],"return":{"description":"","type":"String"}}]},{"file":"src/typography/attributes.js","line":187,"description":"<p>Calculates and returns the width of any character or text string.</p>\n","itemtype":"method","name":"textWidth","params":[{"name":"theText","description":"<p>the String of characters to measure</p>\n","type":"String"}],"return":{"description":"the calculated width","type":"Number"},"example":["\n<div>\n<code>\ntextSize(28);\n\nlet aChar = 'P';\nlet cWidth = textWidth(aChar);\ntext(aChar, 0, 40);\nline(cWidth, 0, cWidth, 50);\n\nlet aString = 'p5.js';\nlet sWidth = textWidth(aString);\ntext(aString, 0, 85);\nline(sWidth, 50, sWidth, 100);\n</code>\n</div>"],"alt":"Letter P and p5.js are displayed with vertical lines at end.","class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/attributes.js","line":222,"description":"<p>Returns the ascent of the current font at its current size. The ascent\nrepresents the distance, in pixels, of the tallest character above\nthe baseline.</p>\n","itemtype":"method","name":"textAscent","return":{"description":"","type":"Number"},"example":["\n<div>\n<code>\nlet base = height * 0.75;\nlet scalar = 0.8; // Different for each font\n\ntextSize(32); // Set initial text size\nlet asc = textAscent() * scalar; // Calc ascent\nline(0, base - asc, width, base - asc);\ntext('dp', 0, base); // Draw text on baseline\n\ntextSize(64); // Increase text size\nasc = textAscent() * scalar; // Recalc ascent\nline(40, base - asc, width, base - asc);\ntext('dp', 40, base); // Draw text on baseline\n</code>\n</div>"],"class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/attributes.js","line":251,"description":"<p>Returns the descent of the current font at its current size. The descent\nrepresents the distance, in pixels, of the character with the longest\ndescender below the baseline.</p>\n","itemtype":"method","name":"textDescent","return":{"description":"","type":"Number"},"example":["\n<div>\n<code>\nlet base = height * 0.75;\nlet scalar = 0.8; // Different for each font\n\ntextSize(32); // Set initial text size\nlet desc = textDescent() * scalar; // Calc ascent\nline(0, base + desc, width, base + desc);\ntext('dp', 0, base); // Draw text on baseline\n\ntextSize(64); // Increase text size\ndesc = textDescent() * scalar; // Recalc ascent\nline(40, base + desc, width, base + desc);\ntext('dp', 40, base); // Draw text on baseline\n</code>\n</div>"],"class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/attributes.js","line":280,"description":"<p>Helper function to measure ascent and descent.</p>\n","class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/loading_displaying.js","line":16,"description":"<p>Loads an opentype font file (.otf, .ttf) from a file or a URL,\nand returns a PFont Object. This method is asynchronous,\nmeaning it may not finish before the next line in your sketch\nis executed.</p>\n<p>The path to the font should be relative to the HTML file\nthat links in your sketch. Loading fonts from a URL or other\nremote location may be blocked due to your browser's built-in\nsecurity.</p>\n","itemtype":"method","name":"loadFont","params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/loadFont\">loadFont()</a> completes</p>\n","type":"Function","optional":true},{"name":"onError","description":"<p>function to be executed if\n                                   an error occurs</p>\n","type":"Function","optional":true}],"return":{"description":"<a href=\"#/p5.Font\">p5.Font</a> object","type":"p5.Font"},"example":["\n\nCalling loadFont() inside <a href=\"#/p5/preload\">preload()</a> guarantees\nthat the load operation will have completed before <a href=\"#/p5/setup\">setup()</a>\nand <a href=\"#/p5/draw\">draw()</a> are called.\n\n<div><code>\nlet myFont;\nfunction preload() {\n  myFont = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n  fill('#ED225D');\n  textFont(myFont);\n  textSize(36);\n  text('p5*js', 10, 50);\n}\n</code></div>\n\nOutside of <a href=\"#/p5/preload\">preload()</a>, you may supply a\ncallback function to handle the object:\n\n<div><code>\nfunction setup() {\n  loadFont('assets/inconsolata.otf', drawText);\n}\n\nfunction drawText(font) {\n  fill('#ED225D');\n  textFont(font, 36);\n  text('p5*js', 10, 50);\n}\n</code></div>\n\nYou can also use the font filename string (without the file extension) to\nstyle other HTML elements.\n\n<div><code>\nfunction preload() {\n  loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n  let myDiv = createDiv('hello there');\n  myDiv.style('font-family', 'Inconsolata');\n}\n</code></div>"],"alt":"p5*js in p5's theme dark pink\np5*js in p5's theme dark pink","class":"p5","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/loading_displaying.js","line":140,"description":"<p>Draws text to the screen. Displays the information specified in the first\nparameter on the screen in the position specified by the additional\nparameters. A default font will be used unless a font is set with the\n<a href=\"#/p5/textFont\">textFont()</a> function and a default size will be\nused unless a font is set with <a href=\"#/p5/textSize\">textSize()</a>. Change\nthe color of the text with the <a href=\"#/p5/fill\">fill()</a> function. Change\nthe outline of the text with the <a href=\"#/p5/stroke\">stroke()</a> and\n<a href=\"#/p5/strokeWeight\">strokeWeight()</a> functions.</p>\n<p>The text displays in relation to the <a href=\"#/p5/textAlign\">textAlign()</a>\nfunction, which gives the option to draw to the left, right, and center of the\ncoordinates.</p>\n<p>The x2 and y2 parameters define a rectangular area to display within and\nmay only be used with string data. When these parameters are specified,\nthey are interpreted based on the current <a href=\"#/p5/rectMode\">rectMode()</a>\nsetting. Text that does not fit completely within the rectangle specified will\nnot be drawn to the screen. If x2 and y2 are not specified, the baseline\nalignment is the default, which means that the text will be drawn upwards\nfrom x and y.</p>\n<p><b>WEBGL</b>: Only opentype/truetype fonts are supported. You must load a font\nusing the <a href=\"#/p5/loadFont\">loadFont()</a> method (see the example above).\n<a href=\"#/p5/stroke\">stroke()</a> currently has no effect in webgl mode.</p>\n","itemtype":"method","name":"text","params":[{"name":"str","description":"<p>the alphanumeric\n                                            symbols to be displayed</p>\n","type":"String|Object|Array|Number|Boolean"},{"name":"x","description":"<p>x-coordinate of text</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of text</p>\n","type":"Number"},{"name":"x2","description":"<p>by default, the width of the text box,\n                    see <a href=\"#/p5/rectMode\">rectMode()</a> for more info</p>\n","type":"Number","optional":true},{"name":"y2","description":"<p>by default, the height of the text box,\n                    see <a href=\"#/p5/rectMode\">rectMode()</a> for more info</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\ntextSize(32);\ntext('word', 10, 30);\nfill(0, 102, 153);\ntext('word', 10, 60);\nfill(0, 102, 153, 51);\ntext('word', 10, 90);\n</code>\n</div>\n<div>\n<code>\nlet s = 'The quick brown fox jumped over the lazy dog.';\nfill(50);\ntext(s, 10, 10, 70, 80); // Text wraps within text box\n</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\nlet inconsolata;\nfunction preload() {\n  inconsolata = loadFont('assets/inconsolata.otf');\n}\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  textFont(inconsolata);\n  textSize(width / 3);\n  textAlign(CENTER, CENTER);\n}\nfunction draw() {\n  background(0);\n  let time = millis();\n  rotateX(time / 1000);\n  rotateZ(time / 1234);\n  text('p5.js', 0, 0);\n}\n</code>\n</div>"],"alt":"'word' displayed 3 times going from black, blue to translucent blue\nThe text 'The quick brown fox jumped over the lazy dog' displayed.\nThe text 'p5.js' spinning in 3d","class":"p5","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/loading_displaying.js","line":229,"description":"<p>Sets the current font that will be drawn with the <a href=\"#/p5/text\">text()</a> function.\nIf textFont() is called without any argument, it will return the current font if one has\nbeen set already. If not, it will return the name of the default font as a string.\nIf textFont() is called with a font to use, it will return the p5 object.</p>\n<p><b>WEBGL</b>: Only fonts loaded via <a href=\"#/p5/loadFont\">loadFont()</a> are supported.</p>\n","itemtype":"method","name":"textFont","return":{"description":"the current font / p5 Object","type":"Object"},"example":["\n<div>\n<code>\nfill(0);\ntextSize(12);\ntextFont('Georgia');\ntext('Georgia', 12, 30);\ntextFont('Helvetica');\ntext('Helvetica', 12, 60);\n</code>\n</div>\n<div>\n<code>\nlet fontRegular, fontItalic, fontBold;\nfunction preload() {\n  fontRegular = loadFont('assets/Regular.otf');\n  fontItalic = loadFont('assets/Italic.ttf');\n  fontBold = loadFont('assets/Bold.ttf');\n}\nfunction setup() {\n  background(210);\n  fill(0)\n   .strokeWeight(0)\n   .textSize(10);\n  textFont(fontRegular);\n  text('Font Style Normal', 10, 30);\n  textFont(fontItalic);\n  text('Font Style Italic', 10, 50);\n  textFont(fontBold);\n  text('Font Style Bold', 10, 70);\n}\n</code>\n</div>"],"alt":"word 'Georgia' displayed in font Georgia and 'Helvetica' in font Helvetica\nwords Font Style Normal displayed normally, Italic in italic and bold in bold","class":"p5","module":"Typography","submodule":"Loading & Displaying","overloads":[{"line":229,"params":[],"return":{"description":"the current font / p5 Object","type":"Object"}},{"line":278,"params":[{"name":"font","description":"<p>a font loaded via <a href=\"#/p5/loadFont\">loadFont()</a>,\nor a String representing a <a href=\"https://mzl.la/2dOw8WD\">web safe font</a>\n(a font that is generally available across all systems)</p>\n","type":"Object|String"},{"name":"size","description":"<p>the font size to use</p>\n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/typography/p5.Font.js","line":24,"description":"<p>Underlying opentype font implementation</p>\n","itemtype":"property","name":"font","class":"p5.Font","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/p5.Font.js","line":31,"description":"<p>Returns a tight bounding box for the given text string using this\nfont</p>\n","itemtype":"method","name":"textBounds","params":[{"name":"line","description":"<p>a line of text</p>\n","type":"String"},{"name":"x","description":"<p>x-position</p>\n","type":"Number"},{"name":"y","description":"<p>y-position</p>\n","type":"Number"},{"name":"fontSize","description":"<p>font size to use (optional) Default is 12.</p>\n","type":"Number","optional":true},{"name":"options","description":"<p>opentype options (optional)\n                           opentype fonts contains alignment and baseline options.\n                           Default is 'LEFT' and 'alphabetic'</p>\n","type":"Object","optional":true}],"return":{"description":"a rectangle object with properties: x, y, w, h","type":"Object"},"example":["\n<div>\n<code>\nlet font;\nlet textString = 'Lorem ipsum dolor sit amet.';\nfunction preload() {\n  font = loadFont('./assets/Regular.otf');\n}\nfunction setup() {\n  background(210);\n\n  let bbox = font.textBounds(textString, 10, 30, 12);\n  fill(255);\n  stroke(0);\n  rect(bbox.x, bbox.y, bbox.w, bbox.h);\n  fill(0);\n  noStroke();\n\n  textFont(font);\n  textSize(12);\n  text(textString, 10, 30);\n}\n</code>\n</div>"],"alt":"words Lorem ipsum dol go off canvas and contained by white bounding box","class":"p5.Font","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/p5.Font.js","line":175,"description":"<p>Computes an array of points following the path for specified text</p>\n","itemtype":"method","name":"textToPoints","params":[{"name":"txt","description":"<p>a line of text</p>\n","type":"String"},{"name":"x","description":"<p>x-position</p>\n","type":"Number"},{"name":"y","description":"<p>y-position</p>\n","type":"Number"},{"name":"fontSize","description":"<p>font size to use (optional)</p>\n","type":"Number"},{"name":"options","description":"<p>an (optional) object that can contain:</p>\n<p><br>sampleFactor - the ratio of path-length to number of samples\n(default=.1); higher values yield more points and are therefore\nmore precise</p>\n<p><br>simplifyThreshold - if set to a non-zero value, collinear points will be\nbe removed from the polygon; the value represents the threshold angle to use\nwhen determining whether two edges are collinear</p>\n","type":"Object","optional":true}],"return":{"description":"an array of points, each with x, y, alpha (the path angle)","type":"Array"},"example":["\n<div>\n<code>\nlet font;\nfunction preload() {\n  font = loadFont('assets/inconsolata.otf');\n}\n\nlet points;\nlet bounds;\nfunction setup() {\n  createCanvas(100, 100);\n  stroke(0);\n  fill(255, 104, 204);\n\n  points = font.textToPoints('p5', 0, 0, 10, {\n    sampleFactor: 5,\n    simplifyThreshold: 0\n  });\n  bounds = font.textBounds(' p5 ', 0, 0, 10);\n}\n\nfunction draw() {\n  background(255);\n  beginShape();\n  translate(-bounds.x * width / bounds.w, -bounds.y * height / bounds.h);\n  for (let i = 0; i < points.length; i++) {\n    let p = points[i];\n    vertex(\n      p.x * width / bounds.w +\n        sin(20 * p.y / bounds.h + millis() / 1000) * width / 30,\n      p.y * height / bounds.h\n    );\n  }\n  endShape(CLOSE);\n}\n</code>\n</div>"],"class":"p5.Font","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/utilities/array_functions.js","line":10,"description":"<p>Adds a value to the end of an array. Extends the length of\nthe array by one. Maps to Array.push().</p>\n","itemtype":"method","name":"append","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push\">array.push(value)</a> instead.","params":[{"name":"array","description":"<p>Array to append</p>\n","type":"Array"},{"name":"value","description":"<p>to be added to the Array</p>\n","type":"Any"}],"return":{"description":"the array that was appended to","type":"Array"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":35,"description":"<p>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 <a href=\"#/p5/concat\">concat()</a>.</p>\n<p>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).</p>\n<p>Using this function is far more efficient for copying array data than\niterating through a for() loop and copying each element individually.</p>\n","itemtype":"method","name":"arrayCopy","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin\">arr1.copyWithin(arr2)</a> instead.","example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions","overloads":[{"line":35,"params":[{"name":"src","description":"<p>the source Array</p>\n","type":"Array"},{"name":"srcPosition","description":"<p>starting position in the source Array</p>\n","type":"Integer"},{"name":"dst","description":"<p>the destination Array</p>\n","type":"Array"},{"name":"dstPosition","description":"<p>starting position in the destination Array</p>\n","type":"Integer"},{"name":"length","description":"<p>number of Array elements to be copied</p>\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":"<p>Concatenates two arrays, maps to Array.concat(). Does not modify the\ninput arrays.</p>\n","itemtype":"method","name":"concat","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat\">arr1.concat(arr2)</a> instead.","params":[{"name":"a","description":"<p>first Array to concatenate</p>\n","type":"Array"},{"name":"b","description":"<p>second Array to concatenate</p>\n","type":"Array"}],"return":{"description":"concatenated array","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":141,"description":"<p>Reverses the order of an array, maps to Array.reverse()</p>\n","itemtype":"method","name":"reverse","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse\">array.reverse()</a> instead.","params":[{"name":"list","description":"<p>Array to reverse</p>\n","type":"Array"}],"return":{"description":"the reversed list","type":"Array"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":161,"description":"<p>Decreases an array by one element and returns the shortened array,\nmaps to Array.pop().</p>\n","itemtype":"method","name":"shorten","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop\">array.pop()</a> instead.","params":[{"name":"list","description":"<p>Array to shorten</p>\n","type":"Array"}],"return":{"description":"shortened Array","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":185,"description":"<p>Randomizes the order of the elements of an array. Implements\n<a href='http://Bost.Ocks.org/mike/shuffle/' target=_blank>\nFisher-Yates Shuffle Algorithm</a>.</p>\n","itemtype":"method","name":"shuffle","params":[{"name":"array","description":"<p>Array to shuffle</p>\n","type":"Array"},{"name":"bool","description":"<p>modify passed array</p>\n","type":"Boolean","optional":true}],"return":{"description":"shuffled Array","type":"Array"},"example":["\n<div><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":227,"description":"<p>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.</p>\n","itemtype":"method","name":"sort","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort\">array.sort()</a> instead.","params":[{"name":"list","description":"<p>Array to sort</p>\n","type":"Array"},{"name":"count","description":"<p>number of elements to sort, starting from 0</p>\n","type":"Integer","optional":true}],"return":{"description":"the sorted list","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":273,"description":"<p>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.)</p>\n","itemtype":"method","name":"splice","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice\">array.splice()</a> instead.","params":[{"name":"list","description":"<p>Array to splice into</p>\n","type":"Array"},{"name":"value","description":"<p>value to be spliced in</p>\n","type":"Any"},{"name":"position","description":"<p>in the array from which to insert data</p>\n","type":"Integer"}],"return":{"description":"the list","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":308,"description":"<p>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.</p>\n","itemtype":"method","name":"subset","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice\">array.slice()</a> instead.","params":[{"name":"list","description":"<p>Array to extract from</p>\n","type":"Array"},{"name":"start","description":"<p>position to begin</p>\n","type":"Integer"},{"name":"count","description":"<p>number of values to extract</p>\n","type":"Integer","optional":true}],"return":{"description":"Array of extracted elements","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/conversion.js","line":10,"description":"<p>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.</p>\n<p>When an array of values is passed in, then an array of floats of the same\nlength is returned.</p>\n","itemtype":"method","name":"float","params":[{"name":"str","description":"<p>float string to parse</p>\n","type":"String"}],"return":{"description":"floating point representation of string","type":"Number"},"example":["\n<div><code>\nlet str = '20';\nlet diameter = float(str);\nellipse(width / 2, height / 2, diameter, diameter);\n</code></div>\n<div class='norender'><code>\nprint(float('10.31')); // 10.31\nprint(float('Infinity')); // Infinity\nprint(float('-Infinity')); // -Infinity\n</code></div>"],"alt":"20 by 20 white ellipse in the center of the canvas","class":"p5","module":"Data","submodule":"Conversion"},{"file":"src/utilities/conversion.js","line":44,"description":"<p>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.</p>\n","itemtype":"method","name":"int","return":{"description":"integer representation of value","type":"Number"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":44,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Boolean|Number"},{"name":"radix","description":"<p>the radix to convert to (default: 10)</p>\n","type":"Integer","optional":true}],"return":{"description":"integer representation of value","type":"Number"}},{"line":66,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"},{"name":"radix","description":"","type":"Integer","optional":true}],"return":{"description":"integer representation of values","type":"Number[]"}}]},{"file":"src/utilities/conversion.js","line":88,"description":"<p>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.</p>\n","itemtype":"method","name":"str","params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Boolean|Number|Array"}],"return":{"description":"string representation of value","type":"String"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion"},{"file":"src/utilities/conversion.js","line":114,"description":"<p>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.</p>\n","itemtype":"method","name":"boolean","params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Boolean|Number|Array"}],"return":{"description":"boolean representation of value","type":"Boolean"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion"},{"file":"src/utilities/conversion.js","line":146,"description":"<p>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.</p>\n","itemtype":"method","name":"byte","return":{"description":"byte representation of value","type":"Number"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":146,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Boolean|Number"}],"return":{"description":"byte representation of value","type":"Number"}},{"line":168,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"}],"return":{"description":"array of byte representation of values","type":"Number[]"}}]},{"file":"src/utilities/conversion.js","line":182,"description":"<p>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.</p>\n","itemtype":"method","name":"char","return":{"description":"string representation of value","type":"String"},"example":["\n<div class='norender'><code>\nprint(char(65)); // \"A\"\nprint(char('65')); // \"A\"\nprint(char([65, 66, 67])); // [ \"A\", \"B\", \"C\" ]\nprint(join(char([65, 66, 67]), '')); // \"ABC\"\n</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":182,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Number"}],"return":{"description":"string representation of value","type":"String"}},{"line":201,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"}],"return":{"description":"array of string representation of values","type":"String[]"}}]},{"file":"src/utilities/conversion.js","line":216,"description":"<p>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.</p>\n","itemtype":"method","name":"unchar","return":{"description":"integer representation of value","type":"Number"},"example":["\n<div class='norender'><code>\nprint(unchar('A')); // 65\nprint(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]\nprint(unchar(split('ABC', ''))); // [ 65, 66, 67 ]\n</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":216,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String"}],"return":{"description":"integer representation of value","type":"Number"}},{"line":232,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"}],"return":{"description":"integer representation of values","type":"Number[]"}}]},{"file":"src/utilities/conversion.js","line":245,"description":"<p>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.</p>\n","itemtype":"method","name":"hex","return":{"description":"hexadecimal string representation of value","type":"String"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":245,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"Number"},{"name":"digits","description":"","type":"Number","optional":true}],"return":{"description":"hexadecimal string representation of value","type":"String"}},{"line":265,"params":[{"name":"ns","description":"<p>array of values to parse</p>\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":295,"description":"<p>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.</p>\n","itemtype":"method","name":"unhex","return":{"description":"integer representation of hexadecimal value","type":"Number"},"example":["\n<div class='norender'><code>\nprint(unhex('A')); // 10\nprint(unhex('FF')); // 255\nprint(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]\n</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":295,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String"}],"return":{"description":"integer representation of hexadecimal value","type":"Number"}},{"line":311,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"}],"return":{"description":"integer representations of hexadecimal value","type":"Number[]"}}]},{"file":"src/utilities/string_functions.js","line":15,"description":"<p>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 <a href=\"#/p5/nf\">nf()</a> or\nnfs().</p>\n","itemtype":"method","name":"join","params":[{"name":"list","description":"<p>array of Strings to be joined</p>\n","type":"Array"},{"name":"separator","description":"<p>String to be placed between each item</p>\n","type":"String"}],"return":{"description":"joined String","type":"String"},"example":["\n<div>\n<code>\nlet array = ['Hello', 'world!'];\nlet separator = ' ';\nlet message = join(array, separator);\ntext(message, 5, 50);\n</code>\n</div>"],"alt":"\"hello world!\" displayed middle left of canvas.","class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":43,"description":"<p>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.</p>\n<p>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.</p>\n<p>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).</p>\n","itemtype":"method","name":"match","params":[{"name":"str","description":"<p>the String to be searched</p>\n","type":"String"},{"name":"regexp","description":"<p>the regexp to be used for matching</p>\n","type":"String"}],"return":{"description":"Array of Strings found","type":"String[]"},"example":["\n<div>\n<code>\nlet string = 'Hello p5js*!';\nlet regexp = 'p5js\\\\*';\nlet m = match(string, regexp);\ntext(m, 5, 50);\n</code>\n</div>"],"alt":"\"p5js*\" displayed middle left of canvas.","class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":83,"description":"<p>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.</p>\n<p>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.</p>\n<p>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).</p>\n","itemtype":"method","name":"matchAll","params":[{"name":"str","description":"<p>the String to be searched</p>\n","type":"String"},{"name":"regexp","description":"<p>the regexp to be used for matching</p>\n","type":"String"}],"return":{"description":"2d Array of Strings found","type":"String[]"},"example":["\n<div class=\"norender\">\n<code>\nlet string = 'Hello p5js*! Hello world!';\nlet regexp = 'Hello';\nmatchAll(string, regexp);\n</code>\n</div>"],"class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":130,"description":"<p>Utility function for formatting numbers into strings. There are two\nversions: one for formatting floats, and one for formatting ints.\nThe values for the digits, left, and right parameters should always\nbe positive integers.\n(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.\nFor 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.</p>\n","itemtype":"method","name":"nf","return":{"description":"formatted String","type":"String"},"example":["\n<div>\n<code>\nlet myFont;\nfunction preload() {\n  myFont = loadFont('assets/fonts/inconsolata.ttf');\n}\nfunction setup() {\n  background(200);\n  let num1 = 321;\n  let num2 = -1321;\n\n  noStroke();\n  fill(0);\n  textFont(myFont);\n  textSize(22);\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</code>\n</div>"],"alt":"\"0321.00\" middle top, -1321.00\" middle bottom canvas","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":130,"params":[{"name":"num","description":"<p>the Number to format</p>\n","type":"Number|String"},{"name":"left","description":"<p>number of digits to the left of the\n                               decimal point</p>\n","type":"Integer|String","optional":true},{"name":"right","description":"<p>number of digits to the right of the\n                               decimal point</p>\n","type":"Integer|String","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":178,"params":[{"name":"nums","description":"<p>the Numbers to format</p>\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":239,"description":"<p>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.</p>\n","itemtype":"method","name":"nfc","return":{"description":"formatted String","type":"String"},"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"\"11,253,106.115\" top middle and \"1.00,1.00,2.00\" displayed bottom mid","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":239,"params":[{"name":"num","description":"<p>the Number to format</p>\n","type":"Number|String"},{"name":"right","description":"<p>number of digits to the right of the\n                                 decimal point</p>\n","type":"Integer|String","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":277,"params":[{"name":"nums","description":"<p>the Numbers to format</p>\n","type":"Array"},{"name":"right","description":"","type":"Integer|String","optional":true}],"return":{"description":"formatted Strings","type":"String[]"}}]},{"file":"src/utilities/string_functions.js","line":313,"description":"<p>Utility function for formatting numbers into strings. Similar to <a href=\"#/p5/nf\">nf()</a> 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.</p>\n","itemtype":"method","name":"nfp","return":{"description":"formatted String","type":"String"},"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"\"+11253106.11\" top middle and \"-11253106.11\" displayed bottom middle","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":313,"params":[{"name":"num","description":"<p>the Number to format</p>\n","type":"Number"},{"name":"left","description":"<p>number of digits to the left of the decimal\n                               point</p>\n","type":"Integer","optional":true},{"name":"right","description":"<p>number of digits to the right of the\n                               decimal point</p>\n","type":"Integer","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":354,"params":[{"name":"nums","description":"<p>the Numbers to format</p>\n","type":"Number[]"},{"name":"left","description":"","type":"Integer","optional":true},{"name":"right","description":"","type":"Integer","optional":true}],"return":{"description":"formatted Strings","type":"String[]"}}]},{"file":"src/utilities/string_functions.js","line":375,"description":"<p>Utility function for formatting numbers into strings. Similar to <a href=\"#/p5/nf\">nf()</a> but\nputs an additional \"_\" (space) in front of positive numbers just in case to align it with negative\nnumbers which includes \"-\" (minus) sign.\nThe 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.\nThe 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.\nFor 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.</p>\n","itemtype":"method","name":"nfs","return":{"description":"formatted String","type":"String"},"example":["\n<div>\n<code>\nlet myFont;\nfunction preload() {\n  myFont = loadFont('assets/fonts/inconsolata.ttf');\n}\nfunction setup() {\n  background(200);\n  let num1 = 321;\n  let num2 = -1321;\n\n  noStroke();\n  fill(0);\n  textFont(myFont);\n  textSize(22);\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</code>\n</div>"],"alt":"\"0321.00\" top middle and \"-1321.00\" displayed bottom middle","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":375,"params":[{"name":"num","description":"<p>the Number to format</p>\n","type":"Number"},{"name":"left","description":"<p>number of digits to the left of the decimal\n                               point</p>\n","type":"Integer","optional":true},{"name":"right","description":"<p>number of digits to the right of the\n                               decimal point</p>\n","type":"Integer","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":432,"params":[{"name":"nums","description":"<p>the Numbers to format</p>\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":453,"description":"<p>The <a href=\"#/p5/split\">split()</a> 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.</p>\n<p>The <a href=\"#/p5/splitTokens\">splitTokens()</a> function works in a similar fashion, except that it\nsplits using a range of characters instead of a specific character or\nsequence.</p>\n","itemtype":"method","name":"split","params":[{"name":"value","description":"<p>the String to be split</p>\n","type":"String"},{"name":"delim","description":"<p>the String used to separate the data</p>\n","type":"String"}],"return":{"description":"Array of Strings","type":"String[]"},"example":["\n<div>\n<code>\nlet names = 'Pat,Xio,Alex';\nlet splitString = split(names, ',');\ntext(splitString[0], 5, 30);\ntext(splitString[1], 5, 50);\ntext(splitString[2], 5, 70);\n</code>\n</div>"],"alt":"\"pat\" top left, \"Xio\" mid left and \"Alex\" displayed bottom left","class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":486,"description":"<p>The <a href=\"#/p5/splitTokens\">splitTokens()</a> 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.</p>\n<p>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.</p>\n","itemtype":"method","name":"splitTokens","params":[{"name":"value","description":"<p>the String to be split</p>\n","type":"String"},{"name":"delim","description":"<p>list of individual Strings that will be used as\n                         separators</p>\n","type":"String","optional":true}],"return":{"description":"Array of Strings","type":"String[]"},"example":["\n<div class = \"norender\">\n<code>\nfunction setup() {\n  let myStr = 'Mango, Banana, Lime';\n  let myStrArr = splitTokens(myStr, ',');\n\n  print(myStrArr); // prints : [\"Mango\",\" Banana\",\" Lime\"]\n}\n</code>\n</div>"],"class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":539,"description":"<p>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.</p>\n","itemtype":"method","name":"trim","return":{"description":"a trimmed String","type":"String"},"example":["\n<div>\n<code>\nlet string = trim('  No new lines\\n   ');\ntext(string + ' here', 2, 50);\n</code>\n</div>"],"alt":"\"No new lines here\" displayed center canvas","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":539,"params":[{"name":"str","description":"<p>a String to be trimmed</p>\n","type":"String"}],"return":{"description":"a trimmed String","type":"String"}},{"line":559,"params":[{"name":"strs","description":"<p>an Array of Strings to be trimmed</p>\n","type":"Array"}],"return":{"description":"an Array of trimmed Strings","type":"String[]"}}]},{"file":"src/utilities/time_date.js","line":10,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/day\">day()</a> function\nreturns the current day as a value from 1 - 31.</p>\n","itemtype":"method","name":"day","return":{"description":"the current day","type":"Integer"},"example":["\n<div>\n<code>\nlet d = day();\ntext('Current day: \\n' + d, 5, 50);\n</code>\n</div>"],"alt":"Current day is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":31,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/hour\">hour()</a> function\nreturns the current hour as a value from 0 - 23.</p>\n","itemtype":"method","name":"hour","return":{"description":"the current hour","type":"Integer"},"example":["\n<div>\n<code>\nlet h = hour();\ntext('Current hour:\\n' + h, 5, 50);\n</code>\n</div>"],"alt":"Current hour is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":52,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/minute\">minute()</a> function\nreturns the current minute as a value from 0 - 59.</p>\n","itemtype":"method","name":"minute","return":{"description":"the current minute","type":"Integer"},"example":["\n<div>\n<code>\nlet m = minute();\ntext('Current minute: \\n' + m, 5, 50);\n</code>\n</div>"],"alt":"Current minute is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":73,"description":"<p>Returns the number of milliseconds (thousandths of a second) since\nstarting the sketch (when <code>setup()</code> is called). This information is often\nused for timing events and animation sequences.</p>\n","itemtype":"method","name":"millis","return":{"description":"the number of milliseconds since starting the sketch","type":"Number"},"example":["\n<div>\n<code>\nlet millisecond = millis();\ntext('Milliseconds \\nrunning: \\n' + millisecond, 5, 40);\n</code>\n</div>"],"alt":"number of milliseconds since sketch has started displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":100,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/month\">month()</a> function\nreturns the current month as a value from 1 - 12.</p>\n","itemtype":"method","name":"month","return":{"description":"the current month","type":"Integer"},"example":["\n<div>\n<code>\nlet m = month();\ntext('Current month: \\n' + m, 5, 50);\n</code>\n</div>"],"alt":"Current month is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":122,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/second\">second()</a> function\nreturns the current second as a value from 0 - 59.</p>\n","itemtype":"method","name":"second","return":{"description":"the current second","type":"Integer"},"example":["\n<div>\n<code>\nlet s = second();\ntext('Current second: \\n' + s, 5, 50);\n</code>\n</div>"],"alt":"Current second is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":143,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/year\">year()</a> function\nreturns the current year as an integer (2014, 2015, 2016, etc).</p>\n","itemtype":"method","name":"year","return":{"description":"the current year","type":"Integer"},"example":["\n<div>\n<code>\nlet y = year();\ntext('Current year: \\n' + y, 5, 50);\n</code>\n</div>"],"alt":"Current year is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/webgl/3d_primitives.js","line":13,"description":"<p>Draw a plane with given a width and height</p>\n","itemtype":"method","name":"plane","params":[{"name":"width","description":"<p>width of the plane</p>\n","type":"Number","optional":true},{"name":"height","description":"<p>height of the plane</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>Optional number of triangle\n                            subdivisions in x-dimension</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>Optional number of triangle\n                            subdivisions in y-dimension</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a plane\n// with width 50 and height 50\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  plane(50, 50);\n}\n</code>\n</div>"],"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":97,"description":"<p>Draw a box with given width, height and depth</p>\n","itemtype":"method","name":"box","params":[{"name":"width","description":"<p>width of the box</p>\n","type":"Number","optional":true},{"name":"Height","description":"<p>height of the box</p>\n","type":"Number","optional":true},{"name":"depth","description":"<p>depth of the box</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>Optional number of triangle\n                           subdivisions in x-dimension</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>Optional number of triangle\n                           subdivisions in y-dimension</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a spinning box\n// with width, height and depth of 50\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  box(50);\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":215,"description":"<p>Draw a sphere with given radius.</p>\n<p>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.</p>\n","itemtype":"method","name":"sphere","params":[{"name":"radius","description":"<p>radius of circle</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>optional number of subdivisions in x-dimension</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>optional number of subdivisions in y-dimension</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a sphere with radius 40\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(205, 102, 94);\n  sphere(40);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  sphere(40, detailX.value(), 16);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  sphere(40, 16, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":419,"description":"<p>Draw a cylinder with given radius and height</p>\n<p>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.</p>\n","itemtype":"method","name":"cylinder","params":[{"name":"radius","description":"<p>radius of the surface</p>\n","type":"Number","optional":true},{"name":"height","description":"<p>height of the cylinder</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>number of subdivisions in x-dimension;\n                              default is 24</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of subdivisions in y-dimension;\n                              default is 1</p>\n","type":"Integer","optional":true},{"name":"bottomCap","description":"<p>whether to draw the bottom of the cylinder</p>\n","type":"Boolean","optional":true},{"name":"topCap","description":"<p>whether to draw the top of the cylinder</p>\n","type":"Boolean","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a spinning cylinder\n// with radius 20 and height 50\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  cylinder(20, 75, detailX.value(), 1);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  cylinder(20, 75, 16, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":554,"description":"<p>Draw a cone with given radius and height</p>\n<p>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.</p>\n","itemtype":"method","name":"cone","params":[{"name":"radius","description":"<p>radius of the bottom surface</p>\n","type":"Number","optional":true},{"name":"height","description":"<p>height of the cone</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>number of segments,\n                            the more segments the smoother geometry\n                            default is 24</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of segments,\n                            the more segments the smoother geometry\n                            default is 1</p>\n","type":"Integer","optional":true},{"name":"cap","description":"<p>whether to draw the base of the cone</p>\n","type":"Boolean","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a spinning cone\n// with radius 40 and height 70\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateZ(frameCount * 0.01);\n  cone(40, 70);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 102, 94);\n  rotateY(millis() / 1000);\n  cone(30, 65, detailX.value(), 16);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 102, 94);\n  rotateY(millis() / 1000);\n  cone(30, 65, 16, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":669,"description":"<p>Draw an ellipsoid with given radius</p>\n<p>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.</p>\n","itemtype":"method","name":"ellipsoid","params":[{"name":"radiusx","description":"<p>x-radius of ellipsoid</p>\n","type":"Number","optional":true},{"name":"radiusy","description":"<p>y-radius of ellipsoid</p>\n","type":"Number","optional":true},{"name":"radiusz","description":"<p>z-radius of ellipsoid</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>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.</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>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.</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw an ellipsoid\n// with radius 30, 40 and 40.\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(205, 105, 94);\n  ellipsoid(30, 40, 40);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  ellipsoid(30, 40, 40, detailX.value(), 8);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 9);\n  rotateY(millis() / 1000);\n  ellipsoid(30, 40, 40, 12, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":804,"description":"<p>Draw a torus with given radius and tube radius</p>\n<p>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.</p>\n","itemtype":"method","name":"torus","params":[{"name":"radius","description":"<p>radius of the whole ring</p>\n","type":"Number","optional":true},{"name":"tubeRadius","description":"<p>radius of the tube</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>number of segments in x-dimension,\n                               the more segments the smoother geometry\n                               default is 24</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of segments in y-dimension,\n                               the more segments the smoother geometry\n                               default is 16</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a spinning torus\n// with ring radius 30 and tube radius 15\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 102, 94);\n  rotateY(millis() / 1000);\n  torus(30, 15, detailX.value(), 12);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 102, 94);\n  rotateY(millis() / 1000);\n  torus(30, 15, 16, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/interaction.js","line":11,"description":"<p>Allows movement around a 3D sketch using a mouse or trackpad.  Left-clicking\nand dragging will rotate the camera position about the center of the sketch,\nright-clicking and dragging will pan the camera position without rotation,\nand using the mouse wheel (scrolling) will move the camera closer or further\nfrom the center of the sketch. This function can be called with parameters\ndictating sensitivity to mouse movement along the X and Y axes.  Calling\nthis function without parameters is equivalent to calling orbitControl(1,1).\nTo reverse direction of movement in either axis, enter a negative number\nfor sensitivity.</p>\n","itemtype":"method","name":"orbitControl","params":[{"name":"sensitivityX","description":"<p>sensitivity to mouse movement along X axis</p>\n","type":"Number","optional":true},{"name":"sensitivityY","description":"<p>sensitivity to mouse movement along Y axis</p>\n","type":"Number","optional":true},{"name":"sensitivityZ","description":"<p>sensitivity to scroll movement along Z axis</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n}\nfunction draw() {\n  background(200);\n  orbitControl();\n  rotateY(0.5);\n  box(30, 50);\n}\n</code>\n</div>"],"alt":"Camera orbits around a box when mouse is hold-clicked & then moved.","class":"p5","module":"Lights, Camera","submodule":"Interaction"},{"file":"src/webgl/interaction.js","line":145,"description":"<p>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.</p>\n<p>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.</p>\n","itemtype":"method","name":"debugMode","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode();\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</code>\n</div>","\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode(GRID);\n}\n\nfunction draw() {\n  background(200);\n  orbitControl();\n  box(15, 30);\n}\n</code>\n</div>","\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode(AXES);\n}\n\nfunction draw() {\n  background(200);\n  orbitControl();\n  box(15, 30);\n}\n</code>\n</div>","\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode(GRID, 100, 10, 0, 0, 0);\n}\n\nfunction draw() {\n  background(200);\n  orbitControl();\n  box(15, 30);\n}\n</code>\n</div>","\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode(100, 10, 0, 0, 0, 20, 0, -40, 0);\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</code>\n</div>"],"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":"Lights, Camera","submodule":"Interaction","overloads":[{"line":145,"params":[]},{"line":278,"params":[{"name":"mode","description":"<p>either GRID or AXES</p>\n","type":"Constant"}]},{"line":283,"params":[{"name":"mode","description":"","type":"Constant"},{"name":"gridSize","description":"<p>size of one side of the grid</p>\n","type":"Number","optional":true},{"name":"gridDivisions","description":"<p>number of divisions in the grid</p>\n","type":"Number","optional":true},{"name":"xOff","description":"<p>X axis offset from origin (0,0,0)</p>\n","type":"Number","optional":true},{"name":"yOff","description":"<p>Y axis offset from origin (0,0,0)</p>\n","type":"Number","optional":true},{"name":"zOff","description":"<p>Z axis offset from origin (0,0,0)</p>\n","type":"Number","optional":true}]},{"line":293,"params":[{"name":"mode","description":"","type":"Constant"},{"name":"axesSize","description":"<p>size of axes icon</p>\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":302,"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":353,"description":"<p>Turns off debugMode() in a 3D sketch.</p>\n","itemtype":"method","name":"noDebugMode","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode();\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</code>\n</div>"],"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":"Lights, Camera","submodule":"Interaction"},{"file":"src/webgl/light.js","line":11,"description":"<p>Creates an ambient light with a color. Ambient light is light that comes from everywhere on the canvas.\nIt has no particular source.</p>\n","itemtype":"method","name":"ambientLight","chainable":1,"example":["\n<div>\n<code>\ncreateCanvas(100, 100, WEBGL);\nambientLight(0);\nambientMaterial(250);\nsphere(40);\n</code>\n</div>\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(51);\n  ambientLight(100); // white light\n  ambientMaterial(255, 102, 94); // magenta material\n  box(30);\n}\n</code>\n</div>"],"alt":"evenly distributed light across a sphere\nevenly distributed light across a rotating sphere","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":11,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"<p>the alpha value</p>\n","type":"Number","optional":true}],"chainable":1},{"line":51,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"chainable":1},{"line":57,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":64,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":71,"params":[{"name":"color","description":"<p>the ambient light color</p>\n","type":"p5.Color"}],"chainable":1}]},{"file":"src/webgl/light.js","line":92,"description":"<p>Set's the color of the specular highlight when using a specular material and\nspecular light.</p>\n<p>This method can be combined with specularMaterial() and shininess()\nfunctions to set specular highlights. The default color is white, ie\n(255, 255, 255), which is used if this method is not called before\nspecularMaterial(). If this method is called without specularMaterial(),\nThere will be no effect.</p>\n<p>Note: specularColor is equivalent to the processing function\n<a href=\"https://processing.org/reference/lightSpecular_.html\">lightSpecular</a>.</p>\n","itemtype":"method","name":"specularColor","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  noStroke();\n}\n\nfunction draw() {\n  background(0);\n  shininess(20);\n  ambientLight(50);\n  specularColor(255, 0, 0);\n  pointLight(255, 0, 0, 0, -50, 50);\n  specularColor(0, 255, 0);\n  pointLight(0, 255, 0, 0, 50, 50);\n  specularMaterial(255);\n  sphere(40);\n}\n</code>\n</div>"],"alt":"different specular light sources from top and bottom of canvas","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":92,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"}],"chainable":1},{"line":139,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"chainable":1},{"line":145,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"}],"chainable":1},{"line":151,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":158,"params":[{"name":"color","description":"<p>the ambient light color</p>\n","type":"p5.Color"}],"chainable":1}]},{"file":"src/webgl/light.js","line":177,"description":"<p>Creates a directional light with a color and a direction</p>\n<p>A maximum of 5 directionalLight can be active at one time</p>\n","itemtype":"method","name":"directionalLight","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"light source on canvas changeable with mouse position","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":177,"params":[{"name":"v1","description":"<p>red or hue value (depending on the current\ncolor mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number"},{"name":"position","description":"<p>the direction of the light</p>\n","type":"p5.Vector"}],"chainable":1},{"line":210,"params":[{"name":"color","description":"<p>color Array, CSS color string,\n                                            or <a href=\"#/p5.Color\">p5.Color</a> value</p>\n","type":"Number[]|String|p5.Color"},{"name":"x","description":"<p>x axis direction</p>\n","type":"Number"},{"name":"y","description":"<p>y axis direction</p>\n","type":"Number"},{"name":"z","description":"<p>z axis direction</p>\n","type":"Number"}],"chainable":1},{"line":220,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"name":"position","description":"","type":"p5.Vector"}],"chainable":1},{"line":227,"params":[{"name":"v1","description":"","type":"Number"},{"name":"v2","description":"","type":"Number"},{"name":"v3","description":"","type":"Number"},{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"","type":"Number"}],"chainable":1}]},{"file":"src/webgl/light.js","line":280,"description":"<p>Creates a point light with a color and a light position</p>\n<p>A maximum of 5 pointLight can be active at one time</p>\n","itemtype":"method","name":"pointLight","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"spot light on canvas changes position with mouse","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":280,"params":[{"name":"v1","description":"<p>red or hue value (depending on the current\ncolor mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number"},{"name":"x","description":"<p>x axis position</p>\n","type":"Number"},{"name":"y","description":"<p>y axis position</p>\n","type":"Number"},{"name":"z","description":"<p>z axis position</p>\n","type":"Number"}],"chainable":1},{"line":322,"params":[{"name":"v1","description":"","type":"Number"},{"name":"v2","description":"","type":"Number"},{"name":"v3","description":"","type":"Number"},{"name":"position","description":"<p>the position of the light</p>\n","type":"p5.Vector"}],"chainable":1},{"line":331,"params":[{"name":"color","description":"<p>color Array, CSS color string,\nor <a href=\"#/p5.Color\">p5.Color</a> value</p>\n","type":"Number[]|String|p5.Color"},{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"","type":"Number"}],"chainable":1},{"line":341,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"name":"position","description":"","type":"p5.Vector"}],"chainable":1}]},{"file":"src/webgl/light.js","line":387,"description":"<p>Sets the default ambient and directional light. The defaults are <a href=\"#/p5/ambientLight\">ambientLight(128, 128, 128)</a> and <a href=\"#/p5/directionalLight\">directionalLight(128, 128, 128, 0, 0, -1)</a>. Lights need to be included in the <a href=\"#/p5/draw\">draw()</a> to remain persistent in a looping program. Placing them in the <a href=\"#/p5/setup\">setup()</a> of a looping program will cause them to only have an effect the first time through the loop.</p>\n","itemtype":"method","name":"lights","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(0);\n  lights();\n  rotateX(millis() / 1000);\n  rotateY(millis() / 1000);\n  rotateZ(millis() / 1000);\n  box();\n}\n</code>\n</div>"],"alt":"the light is partially ambient and partially directional","class":"p5","module":"Lights, Camera","submodule":"Lights"},{"file":"src/webgl/light.js","line":425,"description":"<p>Sets the falloff rates for point lights. It affects only the elements which are created after it in the code.\nThe default value is lightFalloff(1.0, 0.0, 0.0), and the parameters are used to calculate the falloff with the following equation:</p>\n<p>d = distance from light position to vertex position</p>\n<p>falloff = 1 / (CONSTANT + d * LINEAR + ( d * d ) * QUADRATIC)</p>\n","itemtype":"method","name":"lightFalloff","params":[{"name":"constant","description":"<p>constant value for determining falloff</p>\n","type":"Number"},{"name":"linear","description":"<p>linear value for determining falloff</p>\n","type":"Number"},{"name":"quadratic","description":"<p>quadratic value for determining falloff</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  noStroke();\n}\nfunction draw() {\n  background(0);\n  let locX = mouseX - width / 2;\n  let locY = mouseY - height / 2;\n  translate(-25, 0, 0);\n  lightFalloff(1, 0, 0);\n  pointLight(250, 250, 250, locX, locY, 50);\n  sphere(20);\n  translate(50, 0, 0);\n  lightFalloff(0.9, 0.01, 0);\n  pointLight(250, 250, 250, locX, locY, 50);\n  sphere(20);\n}\n</code>\n</div>"],"alt":"Two spheres with different falloff values show different intensity of light","class":"p5","module":"Lights, Camera","submodule":"Lights"},{"file":"src/webgl/light.js","line":510,"description":"<p>Creates a spotlight with a given color, position, direction of light,\nangle and concentration. Here, angle refers to the opening or aperture\nof the cone of the spotlight, and concentration is used to focus the\nlight towards the center. Both angle and concentration are optional, but if\nyou want to provide concentration, you will also have to specify the angle.</p>\n<p>A maximum of 5 spotLight can be active at one time</p>\n","itemtype":"method","name":"spotLight","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"Spot light on a sphere which changes position with mouse","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":510,"params":[{"name":"v1","description":"<p>red or hue value (depending on the current\ncolor mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number"},{"name":"x","description":"<p>x axis position</p>\n","type":"Number"},{"name":"y","description":"<p>y axis position</p>\n","type":"Number"},{"name":"z","description":"<p>z axis position</p>\n","type":"Number"},{"name":"rx","description":"<p>x axis direction of light</p>\n","type":"Number"},{"name":"ry","description":"<p>y axis direction of light</p>\n","type":"Number"},{"name":"rz","description":"<p>z axis direction of light</p>\n","type":"Number"},{"name":"angle","description":"<p>optional parameter for angle. Defaults to PI/3</p>\n","type":"Number","optional":true},{"name":"conc","description":"<p>optional parameter for concentration. Defaults to 100</p>\n","type":"Number","optional":true}],"chainable":1},{"line":562,"params":[{"name":"color","description":"<p>color Array, CSS color string,\nor <a href=\"#/p5.Color\">p5.Color</a> value</p>\n","type":"Number[]|String|p5.Color"},{"name":"position","description":"<p>the position of the light</p>\n","type":"p5.Vector"},{"name":"direction","description":"<p>the direction of the light</p>\n","type":"p5.Vector"},{"name":"angle","description":"","type":"Number","optional":true},{"name":"conc","description":"","type":"Number","optional":true}]},{"line":571,"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":"conc","description":"","type":"Number","optional":true}]},{"line":581,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"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":"conc","description":"","type":"Number","optional":true}]},{"line":591,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"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":"conc","description":"","type":"Number","optional":true}]},{"line":601,"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":"conc","description":"","type":"Number","optional":true}]},{"line":613,"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":"conc","description":"","type":"Number","optional":true}]},{"line":625,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"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":"conc","description":"","type":"Number","optional":true}]}]},{"file":"src/webgl/light.js","line":850,"description":"<p>This function will remove all the lights from the sketch for the\nsubsequent materials rendered. It affects all the subsequent methods.\nCalls to lighting methods made after noLights() will re-enable lights\nin the sketch.</p>\n","itemtype":"method","name":"noLights","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(0);\n  noStroke();\n\n  ambientLight(150, 0, 0);\n  translate(-25, 0, 0);\n  ambientMaterial(250);\n  sphere(20);\n\n  noLights();\n  ambientLight(0, 150, 0);\n  translate(50, 0, 0);\n  ambientMaterial(250);\n  sphere(20);\n}\n</code>\n</div>"],"alt":"Two spheres showing different colors","class":"p5","module":"Lights, Camera","submodule":"Lights"},{"file":"src/webgl/loading.js","line":12,"description":"<p>Load a 3d model from an OBJ or STL file.</p>\n<p><a href=\"#/p5/loadModel\">loadModel()</a> should be placed inside of <a href=\"#/p5/preload\">preload()</a>.\nThis allows the model to load fully before the rest of your code is run.</p>\n<p>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\n<a href=\"#/p5/loadModel\">loadModel()</a> 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 <a href=\"#/p5/scale\">scale()</a> function.</p>\n<p>Also, the support for colored STL files is not present. STL files with color will be\nrendered without color properties.</p>\n","itemtype":"method","name":"loadModel","return":{"description":"the <a href=\"#/p5.Geometry\">p5.Geometry</a> object","type":"p5.Geometry"},"example":["\n<div>\n<code>\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}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  model(octahedron);\n}\n</code>\n</div>","\n<div>\n<code>\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}\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</code>\n</div>"],"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":"<p>Path of the model to be loaded</p>\n","type":"String"},{"name":"normalize","description":"<p>If true, scale the model to a\n                                     standardized size when loading</p>\n","type":"Boolean"},{"name":"successCallback","description":"<p>Function to be called\n                                    once the model is loaded. Will be passed\n                                    the 3D model object.</p>\n","type":"function(p5.Geometry)","optional":true},{"name":"failureCallback","description":"<p>called with event error if\n                                        the model fails to load.</p>\n","type":"Function(Event)","optional":true},{"name":"fileType","description":"<p>The file extension of the model\n                                     (<code>.stl</code>, <code>.obj</code>).</p>\n","type":"String","optional":true}],"return":{"description":"the <a href=\"#/p5.Geometry\">p5.Geometry</a> object","type":"p5.Geometry"}},{"line":96,"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 <a href=\"#/p5.Geometry\">p5.Geometry</a> object","type":"p5.Geometry"}}]},{"file":"src/webgl/loading.js","line":179,"description":"<p>Parse OBJ lines into model. For reference, this is what a simple model of a\nsquare might look like:</p>\n<p>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</p>\n<p>f 4 3 2 1</p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":290,"description":"<p>STL files can be of two types, ASCII and Binary,</p>\n<p>We need to convert the arrayBuffer to an array of strings,\nto parse it as an ASCII file.</p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":317,"description":"<p>This function checks if the file is in ASCII format or in Binary format</p>\n<p>It is done by searching keyword <code>solid</code> at the start of the file.</p>\n<p>An ASCII STL data must begin with <code>solid</code> as the first six bytes.\nHowever, ASCII STLs lacking the SPACE after the <code>d</code> are known to be\nplentiful. So, check the first 5 bytes for <code>solid</code>.</p>\n<p>Several encodings, such as UTF-8, precede the text with up to 5 bytes:\n<a href=\"https://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding\">https://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding</a>\nSearch for <code>solid</code> to start anywhere after those prefixes.</p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":344,"description":"<p>This function matches the <code>query</code> at the provided <code>offset</code></p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":356,"description":"<p>This function parses the Binary STL files.\n<a href=\"https://en.wikipedia.org/wiki/STL_%28file_format%29#Binary_STL\">https://en.wikipedia.org/wiki/STL_%28file_format%29#Binary_STL</a></p>\n<p>Currently there is no support for the colors provided in STL files.</p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":444,"description":"<p>ASCII STL file starts with <code>solid 'nameOfFile'</code>\nThen contain the normal of the face, starting with <code>facet normal</code>\nNext contain a keyword indicating the start of face vertex, <code>outer loop</code>\nNext comes the three vertex, starting with <code>vertex x y z</code>\nVertices ends with <code>endloop</code>\nFace ends with <code>endfacet</code>\nNext face starts with <code>facet normal</code>\nThe end of the file is indicated by <code>endsolid</code></p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":588,"description":"<p>Render a 3d model to the screen.</p>\n","itemtype":"method","name":"model","params":[{"name":"model","description":"<p>Loaded 3d model to be rendered</p>\n","type":"p5.Geometry"}],"example":["\n<div>\n<code>\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}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  model(octahedron);\n}\n</code>\n</div>"],"alt":"Vertically rotating 3-d octahedron.","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/material.js","line":12,"description":"<p>Loads a custom shader from the provided vertex and fragment\nshader paths. The shader files are loaded asynchronously in the\nbackground, so this method should be used in <a href=\"#/p5/preload\">preload()</a>.</p>\n<p>For now, there are three main types of shaders. p5 will automatically\nsupply appropriate vertices, normals, colors, and lighting attributes\nif the parameters defined in the shader match the names.</p>\n","itemtype":"method","name":"loadShader","params":[{"name":"vertFilename","description":"<p>path to file containing vertex shader\nsource code</p>\n","type":"String"},{"name":"fragFilename","description":"<p>path to file containing fragment shader\nsource code</p>\n","type":"String"},{"name":"callback","description":"<p>callback to be executed after loadShader\ncompletes. On success, the Shader object is passed as the first argument.</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>callback to be executed when an error\noccurs inside loadShader. On error, the error is passed as the first\nargument.</p>\n","type":"Function","optional":true}],"return":{"description":"a shader object created from the provided\nvertex and fragment shader files.","type":"p5.Shader"},"example":["\n<div modernizr='webgl'>\n<code>\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}\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</code>\n</div>"],"alt":"zooming Mandelbrot set. a colorful, infinitely detailed fractal.","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":111,"itemtype":"method","name":"createShader","params":[{"name":"vertSrc","description":"<p>source code for the vertex shader</p>\n","type":"String"},{"name":"fragSrc","description":"<p>source code for the fragment shader</p>\n","type":"String"}],"return":{"description":"a shader object created from the provided\nvertex and fragment shaders.","type":"p5.Shader"},"example":["\n<div modernizr='webgl'>\n<code>\n// the 'varying's are shared between both vertex & fragment shaders\nlet varying = 'precision highp float; varying vec2 vPos;';\n\n// the vertex shader is called for each vertex\nlet vs =\n  varying +\n  'attribute vec3 aPosition;' +\n  'void main() { vPos = (gl_Position = vec4(aPosition,1.0)).xy; }';\n\n// the fragment shader is called for each pixel\nlet fs =\n  varying +\n  'uniform vec2 p;' +\n  'uniform float r;' +\n  'const int I = 500;' +\n  'void main() {' +\n  '  vec2 c = p + vPos * r, z = c;' +\n  '  float n = 0.0;' +\n  '  for (int i = I; i > 0; i --) {' +\n  '    if(z.x*z.x+z.y*z.y > 4.0) {' +\n  '      n = float(i)/float(I);' +\n  '      break;' +\n  '    }' +\n  '    z = vec2(z.x*z.x-z.y*z.y, 2.0*z.x*z.y) + c;' +\n  '  }' +\n  '  gl_FragColor = vec4(0.5-cos(n*17.0)/2.0,0.5-cos(n*13.0)/2.0,0.5-cos(n*23.0)/2.0,1.0);' +\n  '}';\n\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}\n\nfunction draw() {\n  // 'r' is the size of the image in Mandelbrot-space\n  mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));\n  quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n</code>\n</div>"],"alt":"zooming Mandelbrot set. a colorful, infinitely detailed fractal.","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":179,"description":"<p>The <a href=\"#/p5/shader\">shader()</a> function lets the user provide a custom shader\nto fill in shapes in WEBGL mode. Users can create their\nown shaders by loading vertex and fragment shaders with\n<a href=\"#/p5/loadShader\">loadShader()</a>.</p>\n","itemtype":"method","name":"shader","chainable":1,"params":[{"name":"s","description":"<p>the desired <a href=\"#/p5.Shader\">p5.Shader</a> to use for rendering\nshapes.</p>\n","type":"p5.Shader","optional":true}],"example":["\n<div modernizr='webgl'>\n<code>\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\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</code>\n</div>"],"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":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":270,"description":"<p>This function restores the default shaders in WEBGL mode. Code that runs\nafter resetShader() will not be affected by previously defined\nshaders. Should be run after <a href=\"#/p5/shader\">shader()</a>.</p>\n","itemtype":"method","name":"resetShader","chainable":1,"class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":283,"description":"<p>Normal material for geometry is a material that is not affected by light.\nIt is not reflective and is a placeholder material often used for debugging.\nSurfaces facing the X-axis, become red, those facing the Y-axis, become green and those facing the Z-axis, become blue.\nYou can view all possible materials in this\n<a href=\"https://p5js.org/examples/3d-materials.html\">example</a>.</p>\n","itemtype":"method","name":"normalMaterial","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  normalMaterial();\n  sphere(40);\n}\n</code>\n</div>"],"alt":"Red, green and blue gradient.","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":321,"description":"<p>Texture for geometry.  You can view other possible materials in this\n<a href=\"https://p5js.org/examples/3d-materials.html\">example</a>.</p>\n","itemtype":"method","name":"texture","params":[{"name":"tex","description":"<p>2-dimensional graphics\n                   to render as texture</p>\n","type":"p5.Image|p5.MediaElement|p5.Graphics"}],"chainable":1,"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  rotateZ(frameCount * 0.01);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  //pass image as texture\n  texture(img);\n  box(200, 200, 200);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet pg;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  pg = createGraphics(200, 200);\n  pg.textSize(75);\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</code>\n</div>\n\n<div>\n<code>\nlet vid;\nfunction preload() {\n  vid = createVideo('assets/fingers.mov');\n  vid.hide();\n}\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  //pass video frame as texture\n  texture(vid);\n  rect(-40, -40, 80, 80);\n}\n\nfunction mousePressed() {\n  vid.loop();\n}\n</code>\n</div>"],"alt":"Rotating view of many images umbrella and grid roof on a 3d plane\nblack canvas\nblack canvas","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":421,"description":"<p>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.\nThis function only works in WEBGL mode.</p>\n<p>With IMAGE, if an image is 100 x 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).</p>\n","itemtype":"method","name":"textureMode","params":[{"name":"mode","description":"<p>either IMAGE or NORMAL</p>\n","type":"Constant"}],"example":["\n<div>\n<code>\nlet img;\n\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"the underside of a white umbrella and gridded ceiling above","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":499,"description":"<p>Sets the global texture wrapping mode. This controls how textures behave\nwhen their uv's go outside of the 0 - 1 range. There are three options:\nCLAMP, REPEAT, and MIRROR.</p>\n<p>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</p>\n<p>REPEAT & MIRROR are only available if the texture\nis a power of two size (128, 256, 512, 1024, etc.).</p>\n<p>This method will affect all textures in your sketch until a subsequent\ntextureWrap call is made.</p>\n<p>If only one argument is provided, it will be applied to both the\nhorizontal and vertical axes.</p>\n","itemtype":"method","name":"textureWrap","params":[{"name":"wrapX","description":"<p>either CLAMP, REPEAT, or MIRROR</p>\n","type":"Constant"},{"name":"wrapY","description":"<p>either CLAMP, REPEAT, or MIRROR</p>\n","type":"Constant","optional":true}],"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies128.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  textureWrap(MIRROR);\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</code>\n</div>"],"alt":"an image of the rocky mountains repeated in mirrored tiles","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":571,"description":"<p>Ambient material for geometry with a given color. Ambient material defines the color the object reflects under any lighting.\nFor example, if the ambient material of an object is pure red, but the ambient lighting only contains green, the object will not reflect any light.\nHere's an <a href=\"https://p5js.org/examples/3d-materials.html\">example containing all possible materials</a>.</p>\n","itemtype":"method","name":"ambientMaterial","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(0);\n  noStroke();\n  ambientLight(200);\n  ambientMaterial(70, 130, 230);\n  sphere(40);\n}\n</code>\n</div>\n<div>\n<code>\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}\nfunction draw() {\n  background(70);\n  ambientLight(100); // white light\n  ambientMaterial(255, 0, 255); // pink material\n  box(30);\n}\n</code>\n</div>\n<div>\n<code>\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}\nfunction draw() {\n  background(70);\n  ambientLight(0, 255, 0); // green light\n  ambientMaterial(255, 0, 255); // pink material\n  box(30);\n}\n</code>\n</div>"],"alt":"radiating light source from top right of canvas\nbox reflecting only red and blue light\nbox reflecting no light","class":"p5","module":"Lights, Camera","submodule":"Material","overloads":[{"line":571,"params":[{"name":"v1","description":"<p>gray value, red or hue value\n                        (depending on the current color mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number","optional":true},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number","optional":true}],"chainable":1},{"line":631,"params":[{"name":"color","description":"<p>color, color Array, or CSS color string</p>\n","type":"Number[]|String|p5.Color"}],"chainable":1}]},{"file":"src/webgl/material.js","line":651,"description":"<p>Sets the emissive color of the material used for geometry drawn to\nthe screen. This is a misnomer in the sense that the material does not\nactually emit light that effects surrounding polygons. Instead,\nit gives the appearance that the object is glowing. An emissive material\nwill display at full strength even if there is no light for it to reflect.</p>\n","itemtype":"method","name":"emissiveMaterial","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(0);\n  noStroke();\n  ambientLight(0);\n  emissiveMaterial(130, 230, 0);\n  sphere(40);\n}\n</code>\n</div>"],"alt":"radiating light source from top right of canvas","class":"p5","module":"Lights, Camera","submodule":"Material","overloads":[{"line":651,"params":[{"name":"v1","description":"<p>gray value, red or hue value\n                        (depending on the current color mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number","optional":true},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number","optional":true},{"name":"a","description":"<p>opacity</p>\n","type":"Number","optional":true}],"chainable":1},{"line":683,"params":[{"name":"color","description":"<p>color, color Array, or CSS color string</p>\n","type":"Number[]|String|p5.Color"}],"chainable":1}]},{"file":"src/webgl/material.js","line":703,"description":"<p>Specular material for geometry with a given color. Specular material is a shiny reflective material.\nLike ambient material it also defines the color the object reflects under ambient lighting.\nFor example, if the specular material of an object is pure red, but the ambient lighting only contains green, the object will not reflect any light.\nFor all other types of light like point and directional light, a specular material will reflect the color of the light source to the viewer.\nHere's an <a href=\"https://p5js.org/examples/3d-materials.html\">example containing all possible materials</a>.</p>\n","itemtype":"method","name":"specularMaterial","chainable":1,"class":"p5","module":"Lights, Camera","submodule":"Material","overloads":[{"line":703,"params":[{"name":"gray","description":"<p>number specifying value between white and black.</p>\n","type":"Number"},{"name":"alpha","description":"<p>alpha value relative to current color range\n                                (default is 0-255)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":717,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":747,"params":[{"name":"color","description":"<p>color Array, or CSS color string</p>\n","type":"Number[]|String|p5.Color"}],"chainable":1}]},{"file":"src/webgl/material.js","line":767,"description":"<p>Sets the amount of gloss in the surface of shapes.\nUsed in combination with specularMaterial() in setting\nthe material properties of shapes. The default and minimum value is 1.</p>\n","itemtype":"method","name":"shininess","params":[{"name":"shine","description":"<p>Degree of Shininess.\n                      Defaults to 1.</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"Shininess on Camera changes position with mouse","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Camera.js","line":13,"description":"<p>Sets the camera position for a 3D sketch. Parameters for this function define\nthe position for the camera, the center of the sketch (where the camera is\npointing), and an up direction (the orientation of the camera).</p>\n<p>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 centerX value is positive, the camera\nis rotating to the right side of the sketch, so the object would seem like\nmoving to the left.</p>\n<p>See this <a href = \"https://www.openprocessing.org/sketch/740258\">example</a>\nto view the position of your camera.</p>\n<p>When called with no arguments, this function creates a default camera\nequivalent to\ncamera(0, 0, (height/2.0) / tan(PI*30.0 / 180.0), 0, 0, 0, 0, 1, 0);</p>\n","itemtype":"method","name":"camera","is_constructor":1,"params":[{"name":"x","description":"<p>camera position value on x axis</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>camera position value on y axis</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>camera position value on z axis</p>\n","type":"Number","optional":true},{"name":"centerX","description":"<p>x coordinate representing center of the sketch</p>\n","type":"Number","optional":true},{"name":"centerY","description":"<p>y coordinate representing center of the sketch</p>\n","type":"Number","optional":true},{"name":"centerZ","description":"<p>z coordinate representing center of the sketch</p>\n","type":"Number","optional":true},{"name":"upX","description":"<p>x component of direction 'up' from camera</p>\n","type":"Number","optional":true},{"name":"upY","description":"<p>y component of direction 'up' from camera</p>\n","type":"Number","optional":true},{"name":"upZ","description":"<p>z component of direction 'up' from camera</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>","\n<div>\n<code>\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  //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  camera(X, Y, Z, centerX, centerY, centerZ, 0, 1, 0);\n  stroke(255);\n  fill(255, 102, 94);\n  box(85);\n}\n</code>\n</div>"],"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 it's center.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":115,"description":"<p>Sets a perspective projection for the camera in a 3D sketch. This projection\nrepresents depth through foreshortening: objects that are close to the camera\nappear their actual size while those that are further away from the camera\nappear smaller. 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.</p>\n<p>When called with no arguments, the defaults\nprovided are equivalent to\nperspective(PI/3.0, width/height, eyeZ/10.0, eyeZ<em>10.0), where eyeZ\nis equal to ((height/2.0) / tan(PI</em>60.0/360.0));</p>\n","itemtype":"method","name":"perspective","params":[{"name":"fovy","description":"<p>camera frustum vertical field of view,\n                          from bottom to top of view, in <a href=\"#/p5/angleMode\">angleMode</a> units</p>\n","type":"Number","optional":true},{"name":"aspect","description":"<p>camera frustum aspect ratio</p>\n","type":"Number","optional":true},{"name":"near","description":"<p>frustum near plane length</p>\n","type":"Number","optional":true},{"name":"far","description":"<p>frustum far plane length</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n//drag the mouse to look around!\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  perspective(PI / 3.0, width / height, 0.1, 500);\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) * 95);\n  box(30);\n  pop();\n  push();\n  translate(15, 0, sin(frameCount / 30 + PI) * 95);\n  box(30);\n  pop();\n}\n</code>\n</div>"],"alt":"two colored 3D boxes move back and forth, rotating as mouse is dragged.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":175,"description":"<p>Sets an orthographic projection for the camera in a 3D sketch and defines a\nbox-shaped viewing frustum within which objects are seen. In this projection,\nall objects with the same dimension appear the same size, regardless of\nwhether they are near or far from the camera. The parameters to this\nfunction specify the viewing frustum where left and right are the minimum and\nmaximum x values, top and bottom are the minimum and maximum y values, and near\nand far are the minimum and maximum z values. If no parameters are given, the\ndefault is used: ortho(-width/2, width/2, -height/2, height/2).</p>\n","itemtype":"method","name":"ortho","params":[{"name":"left","description":"<p>camera frustum left plane</p>\n","type":"Number","optional":true},{"name":"right","description":"<p>camera frustum right plane</p>\n","type":"Number","optional":true},{"name":"bottom","description":"<p>camera frustum bottom plane</p>\n","type":"Number","optional":true},{"name":"top","description":"<p>camera frustum top plane</p>\n","type":"Number","optional":true},{"name":"near","description":"<p>camera frustum near plane</p>\n","type":"Number","optional":true},{"name":"far","description":"<p>camera frustum far plane</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n//drag the mouse to look around!\n//there's no vanishing point\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  ortho(-width / 2, width / 2, height / 2, -height / 2, 0, 500);\n}\nfunction draw() {\n  background(200);\n  orbitControl();\n  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</code>\n</div>"],"alt":"two 3D boxes move back and forth along same plane, rotating as mouse is dragged.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":231,"description":"<p>Sets a perspective matrix as defined by the parameters.</p>\n<p>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.</p>\n<p>Setting the frustum changes the perspective of the scene being rendered.\nThis can be achieved more simply in many cases by using\n<a href=\"https://p5js.org/reference/#/p5/perspective\">perspective()</a>.</p>\n","itemtype":"method","name":"frustum","params":[{"name":"left","description":"<p>camera frustum left plane</p>\n","type":"Number","optional":true},{"name":"right","description":"<p>camera frustum right plane</p>\n","type":"Number","optional":true},{"name":"bottom","description":"<p>camera frustum bottom plane</p>\n","type":"Number","optional":true},{"name":"top","description":"<p>camera frustum top plane</p>\n","type":"Number","optional":true},{"name":"near","description":"<p>camera frustum near plane</p>\n","type":"Number","optional":true},{"name":"far","description":"<p>camera frustum far plane</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  setAttributes('antialias', true);\n  frustum(-0.1, 0.1, -0.1, 0.1, 0.1, 200);\n}\nfunction draw() {\n  background(200);\n  orbitControl();\n  strokeWeight(10);\n  stroke(0, 0, 255);\n  noFill();\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</code>\n</div>"],"alt":"two 3D boxes move back and forth along same plane, rotating as mouse is dragged.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":297,"description":"<p>Creates a new <a href=\"#/p5.Camera\">p5.Camera</a> object and tells the\nrenderer to use that camera.\nReturns the p5.Camera object.</p>\n","itemtype":"method","name":"createCamera","return":{"description":"The newly created camera object.","type":"p5.Camera"},"example":["\n<div><code>\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  setCamera(camera);\n}\n\nfunction draw() {\n  camera.lookAt(0, 0, 0);\n  camera.setPosition(sin(frameCount / 60) * 200, 0, 100);\n  box(20);\n}\n</code></div>"],"alt":"An example that creates a camera and moves it around the box.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":426,"description":"<p>camera position value on x axis</p>\n","itemtype":"property","name":"eyeX","type":"Number","readonly":"","example":["\n\n<div class='norender'><code>\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}\n\nfunction draw() {\n  orbitControl();\n  box(10);\n  div.html('eyeX = ' + cam.eyeX);\n}\n</code></div>"],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":454,"description":"<p>camera position value on y axis</p>\n","itemtype":"property","name":"eyeY","type":"Number","readonly":"","example":["\n<div class='norender'><code>\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}\n\nfunction draw() {\n  orbitControl();\n  box(10);\n  div.html('eyeY = ' + cam.eyeY);\n}\n</code></div>"],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":481,"description":"<p>camera position value on z axis</p>\n","itemtype":"property","name":"eyeZ","type":"Number","readonly":"","example":["\n<div class='norender'><code>\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}\n\nfunction draw() {\n  orbitControl();\n  box(10);\n  div.html('eyeZ = ' + cam.eyeZ);\n}\n</code></div>"],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":508,"description":"<p>x coordinate representing center of the sketch</p>\n","itemtype":"property","name":"centerX","type":"Number","readonly":"","example":["\n<div class='norender'><code>\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}\n\nfunction draw() {\n  orbitControl();\n  box(10);\n}\n</code></div>"],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":536,"description":"<p>y coordinate representing center of the sketch</p>\n","itemtype":"property","name":"centerY","type":"Number","readonly":"","example":["\n<div class='norender'><code>\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}\n\nfunction draw() {\n  orbitControl();\n  box(10);\n}"],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":563,"description":"<p>z coordinate representing center of the sketch</p>\n","itemtype":"property","name":"centerZ","type":"Number","readonly":"","example":["\n<div class='norender'><code>\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}\n\nfunction draw() {\n  orbitControl();\n  box(10);\n}"],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":590,"description":"<p>x component of direction 'up' from camera</p>\n","itemtype":"property","name":"upX","type":"Number","readonly":"","example":["\n<div class='norender'><code>\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}\n</code></div>"],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":613,"description":"<p>y component of direction 'up' from camera</p>\n","itemtype":"property","name":"upY","type":"Number","readonly":"","example":["\n<div class='norender'><code>\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}\n</code></div>"],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":636,"description":"<p>z component of direction 'up' from camera</p>\n","itemtype":"property","name":"upZ","type":"Number","readonly":"","example":["\n<div class='norender'><code>\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}\n</code></div>"],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":663,"description":"<p>Sets a perspective projection for a p5.Camera object and sets parameters\nfor that projection according to <a href=\"#/p5/perspective\">perspective()</a>\nsyntax.</p>\n","itemtype":"method","name":"perspective","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":743,"description":"<p>Sets an orthographic projection for a p5.Camera object and sets parameters\nfor that projection according to <a href=\"#/p5/ortho\">ortho()</a> syntax.</p>\n","itemtype":"method","name":"ortho","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":802,"itemtype":"method","name":"frustum","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":907,"description":"<p>Panning rotates the camera view to the left and right.</p>\n","itemtype":"method","name":"pan","params":[{"name":"angle","description":"<p>amount to rotate camera in current\n<a href=\"#/p5/angleMode\">angleMode</a> units.\nGreater than 0 values rotate counterclockwise (to the left).</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet cam;\nlet delta = 0.01;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n  cam = createCamera();\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</code>\n</div>"],"alt":"camera view pans left and right across a series of rotating 3D boxes.","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":965,"description":"<p>Tilting rotates the camera view up and down.</p>\n","itemtype":"method","name":"tilt","params":[{"name":"angle","description":"<p>amount to rotate camera in current\n<a href=\"#/p5/angleMode\">angleMode</a> units.\nGreater than 0 values rotate counterclockwise (to the left).</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet cam;\nlet delta = 0.01;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n  cam = createCamera();\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</code>\n</div>"],"alt":"camera view tilts up and down across a series of rotating 3D boxes.","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1023,"description":"<p>Reorients the camera to look at a position in world space.</p>\n","itemtype":"method","name":"lookAt","params":[{"name":"x","description":"<p>x position of a point in world space</p>\n","type":"Number"},{"name":"y","description":"<p>y position of a point in world space</p>\n","type":"Number"},{"name":"z","description":"<p>z position of a point in world space</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet cam;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n  cam = createCamera();\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</code>\n</div>"],"alt":"camera view of rotating 3D cubes changes to look at a new random\npoint every second .","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1090,"description":"<p>Sets a camera's position and orientation.  This is equivalent to calling\n<a href=\"#/p5/camera\">camera()</a> on a p5.Camera object.</p>\n","itemtype":"method","name":"camera","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1175,"description":"<p>Move camera along its local axes while maintaining current camera orientation.</p>\n","itemtype":"method","name":"move","params":[{"name":"x","description":"<p>amount to move along camera's left-right axis</p>\n","type":"Number"},{"name":"y","description":"<p>amount to move along camera's up-down axis</p>\n","type":"Number"},{"name":"z","description":"<p>amount to move along camera's forward-backward axis</p>\n","type":"Number"}],"example":["\n<div>\n<code>\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}\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</code>\n</div>"],"alt":"camera view moves along a series of 3D boxes, maintaining the same\norientation throughout the move","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1247,"description":"<p>Set camera position in world-space while maintaining current camera\norientation.</p>\n","itemtype":"method","name":"setPosition","params":[{"name":"x","description":"<p>x position of a point in world space</p>\n","type":"Number"},{"name":"y","description":"<p>y position of a point in world space</p>\n","type":"Number"},{"name":"z","description":"<p>z position of a point in world space</p>\n","type":"Number"}],"example":["\n<div>\n<code>\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}\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</code>\n</div>"],"alt":"camera position changes as the user presses keys, altering view of a 3D box","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1512,"description":"<p>Sets rendererGL's current camera to a p5.Camera object.  Allows switching\nbetween multiple cameras.</p>\n","itemtype":"method","name":"setCamera","params":[{"name":"cam","description":"<p>p5.Camera object</p>\n","type":"p5.Camera"}],"example":["\n<div>\n<code>\nlet cam1, cam2;\nlet currentCamera;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n\n  cam1 = createCamera();\n  cam2 = createCamera();\n  cam2.setPosition(30, 0, 50);\n  cam2.lookAt(0, 0, 0);\n  cam2.ortho();\n\n  // set variable for previously active camera:\n  currentCamera = 1;\n}\n\nfunction draw() {\n  background(200);\n\n  // camera 1:\n  cam1.lookAt(0, 0, 0);\n  cam1.setPosition(sin(frameCount / 60) * 200, 0, 100);\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  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</code>\n</div>"],"alt":"Canvas switches between two camera views, each showing a series of spinning\n3D boxes.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Geometry.js","line":71,"description":"<p>computes faces for geometry objects based on the vertices.</p>\n","itemtype":"method","name":"computeFaces","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Geometry.js","line":114,"description":"<p>computes smooth normals per vertex as an average of each\nface.</p>\n","itemtype":"method","name":"computeNormals","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Geometry.js","line":153,"description":"<p>Averages the vertex normals. Used in curved\nsurfaces</p>\n","itemtype":"method","name":"averageNormals","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Geometry.js","line":174,"description":"<p>Averages pole normals.  Used in spherical primitives</p>\n","itemtype":"method","name":"averagePoleNormals","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Geometry.js","line":267,"description":"<p>Modifies all vertices to be centered within the range -100 to 100.</p>\n","itemtype":"method","name":"normalize","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.RendererGL.js","line":331,"description":"<p>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.</p>\n<p>Note that this will reinitialize the drawing context\nif called after the WebGL canvas is made.</p>\n<p>If an object is passed as the parameter, all attributes\nnot declared in the object will be set to defaults.</p>\n<p>The available attributes are:\n<br>\nalpha - indicates if the canvas contains an alpha buffer\ndefault is true</p>\n<p>depth - indicates whether the drawing buffer has a depth buffer\nof at least 16 bits - default is true</p>\n<p>stencil - indicates whether the drawing buffer has a stencil buffer\nof at least 8 bits</p>\n<p>antialias - indicates whether or not to perform anti-aliasing\ndefault is false (true in Safari)</p>\n<p>premultipliedAlpha - indicates that the page compositor will assume\nthe drawing buffer contains colors with pre-multiplied alpha\ndefault is false</p>\n<p>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</p>\n<p>perPixelLighting - if true, per-pixel lighting will be used in the\nlighting shader otherwise per-vertex lighting is used.\ndefault is true.</p>\n","itemtype":"method","name":"setAttributes","example":["\n<div>\n<code>\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</code>\n</div>\n<br>\nNow with the antialias attribute set to true.\n<br>\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"alt":"a rotating cube with smoother edges","class":"p5","module":"Rendering","submodule":"Rendering","overloads":[{"line":331,"params":[{"name":"key","description":"<p>Name of attribute</p>\n","type":"String"},{"name":"value","description":"<p>New value of named attribute</p>\n","type":"Boolean"}]},{"line":470,"params":[{"name":"obj","description":"<p>object with key-value pairs</p>\n","type":"Object"}]}]},{"file":"src/webgl/p5.Shader.js","line":296,"description":"<p>Wrapper around gl.uniform functions.\nAs we store uniform info in the shader we can use that\nto do type checking on the supplied data and call\nthe appropriate function.</p>\n","itemtype":"method","name":"setUniform","chainable":1,"params":[{"name":"uniformName","description":"<p>the name of the uniform in the\nshader program</p>\n","type":"String"},{"name":"data","description":"<p>the data to be associated\nwith that uniform; type varies (could be a single numerical value, array,\nmatrix, or texture / sampler reference)</p>\n","type":"Object|Number|Boolean|Number[]"}],"example":["\n<div modernizr='webgl'>\n<code>\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\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</code>\n</div>"],"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":"Lights, Camera","submodule":"Material"},{"file":"lib/addons/p5.sound.js","line":1,"class":"p5.sound","module":"Lights, Camera"},{"file":"lib/addons/p5.sound.js","line":52,"description":"<p>p5.sound \n<a href=\"https://p5js.org/reference/#/libraries/p5.sound\">https://p5js.org/reference/#/libraries/p5.sound</a></p>\n<p>From the Processing Foundation and contributors\n<a href=\"https://github.com/processing/p5.js-sound/graphs/contributors\">https://github.com/processing/p5.js-sound/graphs/contributors</a></p>\n<p>MIT License (MIT)\n<a href=\"https://github.com/processing/p5.js-sound/blob/master/LICENSE\">https://github.com/processing/p5.js-sound/blob/master/LICENSE</a></p>\n<p>Some of the many audio libraries & resources that inspire p5.sound:</p>\n<ul>\n<li><p>TONE.js (c) Yotam Mann. Licensed under The MIT License (MIT). <a href=\"https://github.com/TONEnoTONE/Tone.js\">https://github.com/TONEnoTONE/Tone.js</a></p>\n</li>\n<li><p>buzz.js (c) Jay Salvat. Licensed under The MIT License (MIT). <a href=\"http://buzz.jaysalvat.com/\">http://buzz.jaysalvat.com/</a></p>\n</li>\n<li><p>Boris Smus Web Audio API book, 2013. Licensed under the Apache License <a href=\"http://www.apache.org/licenses/LICENSE-2.0\">http://www.apache.org/licenses/LICENSE-2.0</a></p>\n</li>\n<li><p>wavesurfer.js <a href=\"https://github.com/katspaugh/wavesurfer.js\">https://github.com/katspaugh/wavesurfer.js</a></p>\n</li>\n<li><p>Web Audio Components by Jordan Santell <a href=\"https://github.com/web-audio-components\">https://github.com/web-audio-components</a></p>\n</li>\n<li><p>Wilm Thoben's Sound library for Processing <a href=\"https://github.com/processing/processing/tree/master/java/libraries/sound\">https://github.com/processing/processing/tree/master/java/libraries/sound</a></p>\n<p>Web Audio API: <a href=\"http://w3.org/TR/webaudio/\">http://w3.org/TR/webaudio/</a></p>\n</li>\n</ul>\n","class":"p5.sound","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":166,"description":"<p>Returns a number representing the master amplitude (volume) for sound\nin this sketch.</p>\n","itemtype":"method","name":"getMasterVolume","return":{"description":"Master amplitude (volume) for sound in this sketch.\n                 Should be between 0.0 (silence) and 1.0.","type":"Number"},"class":"p5.sound","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":178,"description":"<p>Scale the output of all sound in this sketch</p>\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 <code>rampTime</code> parameter. For more\ncomplex fades, see the Envelope class.\n\n<p>Alternately, you can pass in a signal source such as an\noscillator to modulate the amplitude with an audio signal.</p>\n<p><b>How This Works</b>: 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.</p>\n\n<p>If no value is provided, returns a Web Audio API Gain Node</p>","itemtype":"method","name":"masterVolume","params":[{"name":"volume","description":"<p>Volume (amplitude) between 0.0\n                                   and 1.0 or modulating signal/oscillator</p>\n","type":"Number|Object"},{"name":"rampTime","description":"<p>Fade for t seconds</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>Schedule this event to happen at\n                               t seconds in the future</p>\n","type":"Number","optional":true}],"class":"p5.sound","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":221,"description":"<p><code>p5.soundOut</code> is the p5.sound master output. It sends output to\nthe destination of this window's web audio context. It contains\nWeb Audio API nodes including a dyanmicsCompressor (<code>.limiter</code>),\nand Gain Nodes for <code>.input</code> and <code>.output</code>.</p>\n","itemtype":"property","name":"soundOut","type":"Object","class":"p5.sound","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":300,"description":"<p>In classes that extend\np5.Effect, connect effect nodes\nto the wet parameter</p>\n","class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":316,"description":"<p>Set the output volume of the filter.</p>\n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"<p>amplitude between 0 and 1.0</p>\n","type":"Number","optional":true},{"name":"rampTime","description":"<p>create a fade that lasts until rampTime</p>\n","type":"Number","optional":true},{"name":"tFromNow","description":"<p>schedule this event to happen in tFromNow seconds</p>\n","type":"Number","optional":true}],"class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":336,"description":"<p>Link effects together in a chain\nExample usage: filter.chain(reverb, delay, panner);\nMay be used with an open-ended number of arguments</p>\n","itemtype":"method","name":"chain","params":[{"name":"arguments","description":"<p>Chain together multiple sound objects</p>\n","type":"Object","optional":true}],"class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":358,"description":"<p>Adjust the dry/wet value.</p>\n","itemtype":"method","name":"drywet","params":[{"name":"fade","description":"<p>The desired drywet value (0 - 1.0)</p>\n","type":"Number","optional":true}],"class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":374,"description":"<p>Send output to a p5.js-sound, Web Audio Node, or use signal to\ncontrol an AudioParam</p>\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":388,"description":"<p>Disconnect all output.</p>\n","itemtype":"method","name":"disconnect","class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":451,"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":455,"description":"<p>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.</p>\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":470,"description":"<p>Returns the closest MIDI note value for\na given frequency.</p>\n","itemtype":"method","name":"freqToMidi","params":[{"name":"frequency","description":"<p>A freqeuncy, for example, the \"A\"\n                           above Middle C is 440Hz</p>\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":486,"description":"<p>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.</p>\n","itemtype":"method","name":"midiToFreq","params":[{"name":"midiNote","description":"<p>The number of a MIDI note</p>\n","type":"Number"}],"return":{"description":"Frequency value of the given MIDI note","type":"Number"},"example":["\n<div><code>\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</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":570,"description":"<p>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.\n<a href=\"http://media.io/\">Here</a> is a free online file\nconverter.</p>\n","itemtype":"method","name":"soundFormats","params":[{"name":"formats","description":"<p>i.e. 'mp3', 'wav', 'ogg'</p>\n","type":"String","optional":true,"multiple":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":688,"description":"<p>Used by Osc and Envelope to chain signal math</p>\n","class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":967,"description":"<p>The p5.Filter is built with a\n<a href=\"http://www.w3.org/TR/webaudio/#BiquadFilterNode\">\nWeb Audio BiquadFilter Node</a>.</p>\n","itemtype":"property","name":"biquadFilter","type":"DelayNode","class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":989,"description":"<p>Filter an audio signal according to a set\nof filter parameters.</p>\n","itemtype":"method","name":"process","params":[{"name":"Signal","description":"<p>An object that outputs audio</p>\n","type":"Object"},{"name":"freq","description":"<p>Frequency in Hz, from 10 to 22050</p>\n","type":"Number","optional":true},{"name":"res","description":"<p>Resonance/Width of the filter frequency\n                      from 0.001 to 1000</p>\n","type":"Number","optional":true}],"class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1004,"description":"<p>Set the frequency and the resonance of the filter.</p>\n","itemtype":"method","name":"set","params":[{"name":"freq","description":"<p>Frequency in Hz, from 10 to 22050</p>\n","type":"Number","optional":true},{"name":"res","description":"<p>Resonance (Q) from 0.001 to 1000</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1024,"description":"<p>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).</p>\n","itemtype":"method","name":"freq","params":[{"name":"freq","description":"<p>Filter Frequency</p>\n","type":"Number"},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\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":1053,"description":"<p>Controls either width of a bandpass frequency,\nor the resonance of a low/highpass cutoff frequency.</p>\n","itemtype":"method","name":"res","params":[{"name":"res","description":"<p>Resonance/Width of filter freq\n                     from 0.001 to 1000</p>\n","type":"Number"},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\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":1079,"description":"<p>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.</p>\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":1104,"description":"<p>Toggle function. Switches between the specified type and allpass</p>\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":1123,"description":"<p>Set the type of a p5.Filter. Possible types include:\n\"lowpass\" (default), \"highpass\", \"bandpass\",\n\"lowshelf\", \"highshelf\", \"peaking\", \"notch\",\n\"allpass\".</p>\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":1218,"description":"<p>Returns the Audio Context for this sketch. Useful for users\nwho would like to dig deeper into the <a target='_blank' href=\n'http://webaudio.github.io/web-audio-api/'>Web Audio API\n</a>.</p>\n\n<p>Some browsers require users to startAudioContext\nwith a user gesture, such as touchStarted in the example below.</p>","itemtype":"method","name":"getAudioContext","return":{"description":"AudioContext for this sketch","type":"Object"},"example":["\n<div><code>\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</div></code>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1257,"description":"<p>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\n<a href=\"https://goo.gl/7K7WLu\" title=\"Google Chrome's autoplay\npolicy\">Google Chrome</a>, which create the Web Audio API's\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/AudioContext\"\ntitle=\"Audio Context @ MDN\">Audio Context</a>\nin a suspended state.</p>\n\n<p>In these browser-specific policies, sound will not play until a user\ninteraction event (i.e. <code>mousePressed()</code>) explicitly resumes\nthe AudioContext, or starts an audio node. This can be accomplished by\ncalling <code>start()</code> on a <code>p5.Oscillator</code>,\n<code> play()</code> on a <code>p5.SoundFile</code>, or simply\n<code>userStartAudio()</code>.</p>\n\n<p><code>userStartAudio()</code> 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 <code>mousePressed()</code> as in the\nexample below. This method utilizes\n<a href=\"https://github.com/tambien/StartAudioContext\">StartAudioContext\n</a>, a library by Yotam Mann (MIT Licence, 2016).</p>","params":[{"name":"element(s)","description":"<p>This argument can be an Element,\n                              Selector String, NodeList, p5.Element,\n                              jQuery Element, or an Array of any of those.</p>\n","type":"Element|Array","optional":true},{"name":"callback","description":"<p>Callback to invoke when the AudioContext\n                              has started</p>\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<div><code>\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</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1477,"description":"<p>Start an oscillator.</p>\n<p>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: <code>userStartAudio()</code>.</p>\n","itemtype":"method","name":"start","params":[{"name":"time","description":"<p>startTime in seconds from now.</p>\n","type":"Number","optional":true},{"name":"frequency","description":"<p>frequency in Hz.</p>\n","type":"Number","optional":true}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1525,"description":"<p>Stop an oscillator. Accepts an optional parameter\nto determine how long (in seconds from now) until the\noscillator stops.</p>\n","itemtype":"method","name":"stop","params":[{"name":"secondsFromNow","description":"<p>Time, in seconds from now.</p>\n","type":"Number"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1544,"description":"<p>Set the amplitude between 0 and 1.0. Or, pass in an object\nsuch as an oscillator to modulate amplitude with an audio signal.</p>\n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"<p>between 0 and 1.0\n                            or a modulating signal/oscillator</p>\n","type":"Number|Object"},{"name":"rampTime","description":"<p>create a fade that lasts rampTime</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\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":1584,"description":"<p>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.</p>\n","itemtype":"method","name":"freq","params":[{"name":"Frequency","description":"<p>Frequency in Hz\n                                      or modulating signal/oscillator</p>\n","type":"Number|Object"},{"name":"rampTime","description":"<p>Ramp time (in seconds)</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>Schedule this event to happen\n                                 at x seconds from now</p>\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<div><code>\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</code></div>"],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1662,"description":"<p>Set type to 'sine', 'triangle', 'sawtooth' or 'square'.</p>\n","itemtype":"method","name":"setType","params":[{"name":"type","description":"<p>'sine', 'triangle', 'sawtooth' or 'square'.</p>\n","type":"String"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1678,"description":"<p>Connect to a p5.sound / Web Audio object.</p>\n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"<p>A p5.sound or Web Audio object</p>\n","type":"Object"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1698,"description":"<p>Disconnect all outputs</p>\n","itemtype":"method","name":"disconnect","class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1721,"description":"<p>Pan between Left (-1) and Right (1)</p>\n","itemtype":"method","name":"pan","params":[{"name":"panning","description":"<p>Number between -1 and 1</p>\n","type":"Number"},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1759,"description":"<p>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.</p>\n","itemtype":"method","name":"phase","params":[{"name":"phase","description":"<p>float between 0.0 and 1.0</p>\n","type":"Number"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1818,"description":"<p>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.</p>\n","itemtype":"method","name":"add","params":[{"name":"number","description":"<p>Constant number to add</p>\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":1838,"description":"<p>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.</p>\n","itemtype":"method","name":"mult","params":[{"name":"number","description":"<p>Constant number to multiply</p>\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":1857,"description":"<p>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.</p>\n","itemtype":"method","name":"scale","params":[{"name":"inMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"inMax","description":"<p>input range maximum</p>\n","type":"Number"},{"name":"outMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"outMax","description":"<p>input range maximum</p>\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":2067,"description":"<p>Play tells the MonoSynth to start playing a note. This method schedules\nthe calling of .triggerAttack and .triggerRelease.</p>\n","itemtype":"method","name":"play","params":[{"name":"note","description":"<p>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 <a href = \"https://github.com/Tonejs/Tone.js/wiki/Instruments\">\n                               Tone</a>. Defaults to 440 hz.</p>\n","type":"String | Number"},{"name":"velocity","description":"<p>velocity of the note to play (ranging from 0 to 1)</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time from now (in seconds) at which to play</p>\n","type":"Number","optional":true},{"name":"sustainTime","description":"<p>time to sustain before releasing the envelope. Defaults to 0.15 seconds.</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>\n"],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2116,"description":"<p>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.</p>\n","params":[{"name":"note","description":"<p>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 <a href = \"https://github.com/Tonejs/Tone.js/wiki/Instruments\">\n                               Tone</a>. Defaults to 440 hz</p>\n","type":"String | Number"},{"name":"velocity","description":"<p>velocity of the note to play (ranging from 0 to 1)</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time from now (in seconds) at which to play</p>\n","type":"Number","optional":true}],"itemtype":"method","name":"triggerAttack","example":["\n<div><code>\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</code></div>"],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2162,"description":"<p>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.</p>\n","params":[{"name":"secondsFromNow","description":"<p>time to trigger the release</p>\n","type":"Number"}],"itemtype":"method","name":"triggerRelease","example":["\n<div><code>\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</code></div>"],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2199,"description":"<p>Set values like a traditional\n<a href=\"https://en.wikipedia.org/wiki/Synthesizer#/media/File:ADSR_parameter.svg\">\nADSR envelope\n</a>.</p>\n","itemtype":"method","name":"setADSR","params":[{"name":"attackTime","description":"<p>Time (in seconds before envelope\n                              reaches Attack Level</p>\n","type":"Number"},{"name":"decayTime","description":"<p>Time (in seconds) before envelope\n                              reaches Decay/Sustain Level</p>\n","type":"Number","optional":true},{"name":"susRatio","description":"<p>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 <code>setRange</code>),\n                              then decayLevel would increase proportionally, to become 0.5.</p>\n","type":"Number","optional":true},{"name":"releaseTime","description":"<p>Time in seconds from now (defaults to 0)</p>\n","type":"Number","optional":true}],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2226,"description":"<p>Getters and Setters</p>\n","itemtype":"property","name":"attack","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2232,"itemtype":"property","name":"decay","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2237,"itemtype":"property","name":"sustain","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2242,"itemtype":"property","name":"release","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2282,"description":"<p>MonoSynth amp</p>\n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"<p>desired volume</p>\n","type":"Number"},{"name":"rampTime","description":"<p>Time to reach new volume</p>\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":2300,"description":"<p>Connect to a p5.sound / Web Audio object.</p>\n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"<p>A p5.sound or Web Audio object</p>\n","type":"Object"}],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2313,"description":"<p>Disconnect all outputs</p>\n","itemtype":"method","name":"disconnect","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2326,"description":"<p>Get rid of the MonoSynth and free up its resources / memory.</p>\n","itemtype":"method","name":"dispose","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2380,"description":"<p>Connect to p5 objects or Web Audio Nodes</p>\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":2392,"description":"<p>Disconnect from soundOut</p>\n","itemtype":"method","name":"disconnect","class":"p5.AudioVoice","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2474,"description":"<p>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.</p>\n","itemtype":"property","name":"notes","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2487,"description":"<p>A PolySynth must have at least 1 voice, defaults to 8</p>\n","itemtype":"property","name":"polyvalue","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2493,"description":"<p>Monosynth that generates the sound for each note that is triggered. The\np5.PolySynth defaults to using the p5.MonoSynth as its voice.</p>\n","itemtype":"property","name":"AudioVoice","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2530,"description":"<p>Play a note by triggering noteAttack and noteRelease with sustain time</p>\n","itemtype":"method","name":"play","params":[{"name":"note","description":"<p>midi note to play (ranging from 0 to 127 - 60 being a middle C)</p>\n","type":"Number","optional":true},{"name":"velocity","description":"<p>velocity of the note to play (ranging from 0 to 1)</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time from now (in seconds) at which to play</p>\n","type":"Number","optional":true},{"name":"sustainTime","description":"<p>time to sustain before releasing the envelope</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2578,"description":"<p>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.</p>\n","itemtype":"method","name":"noteADSR","params":[{"name":"note","description":"<p>Midi note on which ADSR should be set.</p>\n","type":"Number","optional":true},{"name":"attackTime","description":"<p>Time (in seconds before envelope\n                              reaches Attack Level</p>\n","type":"Number","optional":true},{"name":"decayTime","description":"<p>Time (in seconds) before envelope\n                              reaches Decay/Sustain Level</p>\n","type":"Number","optional":true},{"name":"susRatio","description":"<p>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 <code>setRange</code>),\n                              then decayLevel would increase proportionally, to become 0.5.</p>\n","type":"Number","optional":true},{"name":"releaseTime","description":"<p>Time in seconds from now (defaults to 0)</p>\n","type":"Number","optional":true}],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2609,"description":"<p>Set the PolySynths global envelope. This method modifies the envelopes of each\nmonosynth so that all notes are played with this envelope.</p>\n","itemtype":"method","name":"setADSR","params":[{"name":"attackTime","description":"<p>Time (in seconds before envelope\n                               reaches Attack Level</p>\n","type":"Number","optional":true},{"name":"decayTime","description":"<p>Time (in seconds) before envelope\n                               reaches Decay/Sustain Level</p>\n","type":"Number","optional":true},{"name":"susRatio","description":"<p>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 <code>setRange</code>),\n                               then decayLevel would increase proportionally, to become 0.5.</p>\n","type":"Number","optional":true},{"name":"releaseTime","description":"<p>Time in seconds from now (defaults to 0)</p>\n","type":"Number","optional":true}],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2636,"description":"<p>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.</p>\n","itemtype":"method","name":"noteAttack","params":[{"name":"note","description":"<p>midi note on which attack should be triggered.</p>\n","type":"Number","optional":true},{"name":"velocity","description":"<p>velocity of the note to play (ranging from 0 to 1)/</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time from now (in seconds)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2746,"description":"<p>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.</p>\n","itemtype":"method","name":"noteRelease","params":[{"name":"note","description":"<p>midi note on which attack should be triggered.\n                                  If no value is provided, all notes will be released.</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time to trigger the release</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>\n"],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2829,"description":"<p>Connect to a p5.sound / Web Audio object.</p>\n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"<p>A p5.sound or Web Audio object</p>\n","type":"Object"}],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2842,"description":"<p>Disconnect all outputs</p>\n","itemtype":"method","name":"disconnect","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2855,"description":"<p>Get rid of the MonoSynth and free up its resources / memory.</p>\n","itemtype":"method","name":"dispose","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2969,"description":"<p>This module has shims</p>\n","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3105,"description":"<p>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</p>\n","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3492,"description":"<p>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<a href=\"https://github.com/processing/p5.js/wiki/Local-server\">\nlocal server</a> is recommended when loading external files.</p>\n","itemtype":"method","name":"loadSound","params":[{"name":"path","description":"<p>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.</p>\n","type":"String|Array"},{"name":"successCallback","description":"<p>Name of a function to call once file loads</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>Name of a function to call if there is\n                                    an error loading the file.</p>\n","type":"Function","optional":true},{"name":"whileLoading","description":"<p>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.</p>\n","type":"Function","optional":true}],"return":{"description":"Returns a p5.SoundFile","type":"SoundFile"},"example":["\n<div><code>\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</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3672,"description":"<p>Returns true if the sound file finished loading successfully.</p>\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":3688,"description":"<p>Play the p5.SoundFile</p>\n","itemtype":"method","name":"play","params":[{"name":"startTime","description":"<p>(optional) schedule playback to start (in seconds from now).</p>\n","type":"Number","optional":true},{"name":"rate","description":"<p>(optional) playback rate</p>\n","type":"Number","optional":true},{"name":"amp","description":"<p>(optional) amplitude (volume)\n                                    of playback</p>\n","type":"Number","optional":true},{"name":"cueStart","description":"<p>(optional) cue start time in seconds</p>\n","type":"Number","optional":true},{"name":"duration","description":"<p>(optional) duration of playback in seconds</p>\n","type":"Number","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3795,"description":"<p>p5.SoundFile has two play modes: <code>restart</code> and\n<code>sustain</code>. 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.</p>\n","itemtype":"method","name":"playMode","params":[{"name":"str","description":"<p>'restart' or 'sustain' or 'untilDone'</p>\n","type":"String"}],"example":["\n<div><code>\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 </code></div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3854,"description":"<p>Pauses a file that is currently playing. If the file is not\nplaying, then nothing will happen.</p>\n<p>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().</p>\n","itemtype":"method","name":"pause","params":[{"name":"startTime","description":"<p>(optional) schedule event to occur\n                             seconds from now</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code>\n</div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3911,"description":"<p>Loop the p5.SoundFile. Accepts optional parameters to set the\nplayback rate, playback volume, loopStart, loopEnd.</p>\n","itemtype":"method","name":"loop","params":[{"name":"startTime","description":"<p>(optional) schedule event to occur\n                            seconds from now</p>\n","type":"Number","optional":true},{"name":"rate","description":"<p>(optional) playback rate</p>\n","type":"Number","optional":true},{"name":"amp","description":"<p>(optional) playback volume</p>\n","type":"Number","optional":true},{"name":"cueLoopStart","description":"<p>(optional) startTime in seconds</p>\n","type":"Number","optional":true},{"name":"duration","description":"<p>(optional) loop duration in seconds</p>\n","type":"Number","optional":true}],"example":["\n <div><code>\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 </code>\n </div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3955,"description":"<p>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.</p>\n","itemtype":"method","name":"setLoop","params":[{"name":"Boolean","description":"<p>set looping to true or false</p>\n","type":"Boolean"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3980,"description":"<p>Returns 'true' if a p5.SoundFile is currently looping and playing, 'false' if not.</p>\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":4000,"description":"<p>Returns true if a p5.SoundFile is playing, false if not (i.e.\npaused or stopped).</p>\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":4013,"description":"<p>Returns true if a p5.SoundFile is paused, false if not (i.e.\nplaying or stopped).</p>\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":4026,"description":"<p>Stop soundfile playback.</p>\n","itemtype":"method","name":"stop","params":[{"name":"startTime","description":"<p>(optional) schedule event to occur\n                            in seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4083,"description":"<p>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 <code>rampTime</code> parameter. For more\ncomplex fades, see the Envelope class.</p>\n<p>Alternately, you can pass in a signal source such as an\noscillator to modulate the amplitude with an audio signal.</p>\n","itemtype":"method","name":"setVolume","params":[{"name":"volume","description":"<p>Volume (amplitude) between 0.0\n                                   and 1.0 or modulating signal/oscillator</p>\n","type":"Number|Object"},{"name":"rampTime","description":"<p>Fade for t seconds</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>Schedule this event to happen at\n                               t seconds in the future</p>\n","type":"Number","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4128,"description":"<p>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).</p>\n","itemtype":"method","name":"pan","params":[{"name":"panValue","description":"<p>Set the stereo panner</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                                seconds from now</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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 </div></code>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4171,"description":"<p>Returns the current stereo pan position (-1.0 to 1.0)</p>\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":4185,"description":"<p>Set the playback rate of a sound file. Will change the speed and the pitch.\nValues less than zero will reverse the audio buffer.</p>\n","itemtype":"method","name":"rate","params":[{"name":"playbackRate","description":"<p>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.</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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 </code>\n </div>\n"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4275,"description":"<p>Returns the duration of a sound file in seconds.</p>\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":4291,"description":"<p>Return the current position of the p5.SoundFile playhead, in seconds.\nTime is relative to the normal buffer direction, so if <code>reverseBuffer</code>\nhas been called, currentTime will count backwards.</p>\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":4305,"description":"<p>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 <code>play</code> or <code>loop</code> methods.</p>\n","itemtype":"method","name":"jump","params":[{"name":"cueTime","description":"<p>cueTime of the soundFile in seconds.</p>\n","type":"Number"},{"name":"duration","description":"<p>duration in seconds.</p>\n","type":"Number"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4336,"description":"<p>Return the number of channels in a sound file.\nFor example, Mono = 1, Stereo = 2.</p>\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":4349,"description":"<p>Return the sample rate of the sound file.</p>\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":4361,"description":"<p>Return the number of samples in a sound file.\nEqual to sampleRate * duration.</p>\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":4374,"description":"<p>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.</p>\n<p>Inspired by Wavesurfer.js.</p>\n","itemtype":"method","name":"getPeaks","params":[{"name":"length","description":"<p>length is the size of the returned array.\n                         Larger length results in more precision.\n                         Defaults to 5*width of the browser window.</p>\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":4435,"description":"<p>Reverses the p5.SoundFile's buffer source.\nPlayback must be handled separately (see example).</p>\n","itemtype":"method","name":"reverseBuffer","example":["\n<div><code>\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 </code>\n </div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4488,"description":"<p>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.</p>\n","itemtype":"method","name":"onended","params":[{"name":"callback","description":"<p>function to call when the\n                            soundfile has ended.</p>\n","type":"Function"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4553,"description":"<p>Connects the output of a p5sound object to input of another\np5.sound object. For example, you may connect a p5.SoundFile to an\nFFT or an Effect. If no parameter is given, it will connect to\nthe master output. Most p5sound objects connect to the master\noutput when they are created.</p>\n","itemtype":"method","name":"connect","params":[{"name":"object","description":"<p>Audio object that accepts an input</p>\n","type":"Object","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4577,"description":"<p>Disconnects the output of this p5sound object.</p>\n","itemtype":"method","name":"disconnect","class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4590,"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4597,"description":"<p>Reset the source for this SoundFile to a\nnew path (URL).</p>\n","itemtype":"method","name":"setPath","params":[{"name":"path","description":"<p>path to audio file</p>\n","type":"String"},{"name":"callback","description":"<p>Callback</p>\n","type":"Function"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4614,"description":"<p>Replace the current Audio Buffer with a new Buffer.</p>\n","itemtype":"method","name":"setBuffer","params":[{"name":"buf","description":"<p>Array of Float32 Array(s). 2 Float32 Arrays\n                   will create a stereo source. 1 will create\n                   a mono source.</p>\n","type":"Array"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4708,"description":"<p>processPeaks returns an array of timestamps where it thinks there is a beat.</p>\n<p>This is an asynchronous function that processes the soundfile in an offline audio context,\nand sends the results to your callback function.</p>\n<p>The process involves running the soundfile through a lowpass filter, and finding all of the\npeaks above the initial threshold. If the total number of peaks are below the minimum number of peaks,\nit decreases the threshold and re-runs the analysis until either minPeaks or minThreshold are reached.</p>\n","itemtype":"method","name":"processPeaks","params":[{"name":"callback","description":"<p>a function to call once this data is returned</p>\n","type":"Function"},{"name":"initThreshold","description":"<p>initial threshold defaults to 0.9</p>\n","type":"Number","optional":true},{"name":"minThreshold","description":"<p>minimum threshold defaults to 0.22</p>\n","type":"Number","optional":true},{"name":"minPeaks","description":"<p>minimum number of peaks defaults to 200</p>\n","type":"Number","optional":true}],"return":{"description":"Array of timestamped peaks","type":"Array"},"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4929,"description":"<p>Schedule events to trigger every time a MediaElement\n(audio/video) reaches a playback cue point.</p>\n<p>Accepts a callback function, a time (in seconds) at which to trigger\nthe callback, and an optional parameter for the callback.</p>\n<p>Time will be passed as the first parameter to the callback function,\nand param will be the second parameter.</p>\n","itemtype":"method","name":"addCue","params":[{"name":"time","description":"<p>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.</p>\n","type":"Number"},{"name":"callback","description":"<p>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.</p>\n","type":"Function"},{"name":"value","description":"<p>An object to be passed as the\n                           second parameter to the\n                           callback function.</p>\n","type":"Object","optional":true}],"return":{"description":"id ID of this cue,\n                    useful for removeCue(id)","type":"Number"},"example":["\n<div><code>\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</code></div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4999,"description":"<p>Remove a callback based on its ID. The ID is returned by the\naddCue method.</p>\n","itemtype":"method","name":"removeCue","params":[{"name":"id","description":"<p>ID of the cue, as returned by addCue</p>\n","type":"Number"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5025,"description":"<p>Remove all of the callbacks that had originally been scheduled\nvia the addCue method.</p>\n","itemtype":"method","name":"clearCues","class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5054,"description":"<p>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\n<a href=\"/docs/reference/#/p5.SoundFile/getBlob\">getBlob</a></p>\n","itemtype":"method","name":"save","params":[{"name":"fileName","description":"<p>name of the resulting .wav file.</p>\n","type":"String","optional":true}],"example":["\n <div><code>\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</code></div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5085,"description":"<p>This method is useful for sending a SoundFile to a server. It returns the\n.wav-encoded audio data as a \"<a target=\"_blank\" title=\"Blob reference at\nMDN\" href=\"https://developer.mozilla.org/en-US/docs/Web/API/Blob\">Blob</a>\".\nA Blob is a file-like data object that can be uploaded to a server\nwith an <a href=\"/docs/reference/#/p5/httpDo\">http</a> request. We'll\nuse the <code>httpDo</code> options object to send a POST request with some\nspecific options: we encode the request as <code>multipart/form-data</code>,\nand attach the blob as one of the form values using <code>FormData</code>.</p>\n","itemtype":"method","name":"getBlob","return":{"description":"A file-like data object","type":"Blob"},"example":["\n <div><code>\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 `<Audio>` Element accepts Object URL's\n   createAudio(blobUrl).showControls();\n\n   createDiv();\n\n   // The ObjectURL exists as long as this tab is open\n   let input = createInput(blobUrl);\n   input.attribute('readonly', true);\n   input.mouseClicked(function() { input.elt.select() });\n }\n\n</code></div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5276,"description":"<p>Connects to the p5sound instance (master output) by default.\nOptionally, you can pass in a specific source (i.e. a soundfile).</p>\n","itemtype":"method","name":"setInput","params":[{"name":"snd","description":"<p>set the sound source\n                                     (optional, defaults to\n                                     master output)</p>\n","type":"SoundObject|undefined","optional":true},{"name":"smoothing","description":"<p>a range between 0.0 and 1.0\n                                      to smooth amplitude readings</p>\n","type":"Number|undefined","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5367,"description":"<p>Returns a single Amplitude reading at the moment it is called.\nFor continuous readings, run in the draw loop.</p>\n","itemtype":"method","name":"getLevel","params":[{"name":"channel","description":"<p>Optionally return only channel 0 (left) or 1 (right)</p>\n","type":"Number","optional":true}],"return":{"description":"Amplitude as a number between 0.0 and 1.0","type":"Number"},"example":["\n<div><code>\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</code></div>"],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5421,"description":"<p>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.</p>\n","itemtype":"method","name":"toggleNormalize","params":[{"name":"boolean","description":"<p>set normalize to true (1) or false (0)</p>\n","type":"Boolean","optional":true}],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5449,"description":"<p>Smooth Amplitude analysis by averaging with the last analysis\nframe. Off by default.</p>\n","itemtype":"method","name":"smooth","params":[{"name":"set","description":"<p>smoothing from 0.0 <= 1</p>\n","type":"Number"}],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5625,"description":"<p>Set the input source for the FFT analysis. If no source is\nprovided, FFT will analyze all sound in the sketch.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"source","description":"<p>p5.sound object (or web audio API source node)</p>\n","type":"Object","optional":true}],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5648,"description":"<p>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.</p>\n","itemtype":"method","name":"waveform","params":[{"name":"bins","description":"<p>Must be a power of two between\n                          16 and 1024. Defaults to 1024.</p>\n","type":"Number","optional":true},{"name":"precision","description":"<p>If any value is provided, will return results\n                            in a Float32 Array which is more precise\n                            than a regular array.</p>\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":5699,"description":"<p>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\n<code>getEnergy()</code>.</p>\n","itemtype":"method","name":"analyze","params":[{"name":"bins","description":"<p>Must be a power of two between\n                           16 and 1024. Defaults to 1024.</p>\n","type":"Number","optional":true},{"name":"scale","description":"<p>If \"dB,\" returns decibel\n                           float measurements between\n                           -140 and 0 (max).\n                           Otherwise returns integers from 0-255.</p>\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<div><code>\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</code></div>\n\n"],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5795,"description":"<p>Returns the amount of energy (volume) at a specific\n<a href=\"https://en.wikipedia.org/wiki/Audio_frequency\" target=\"_blank\">\nfrequency</a>, 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).\n<em>NOTE: analyze() must be called prior to getEnergy(). Analyze()\ntells the FFT to analyze frequency data, and getEnergy() uses\nthe results determine the value at a specific frequency or\nrange of frequencies.</em></p></p>\n","itemtype":"method","name":"getEnergy","params":[{"name":"frequency1","description":"<p>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.</p>\n","type":"Number|String"},{"name":"frequency2","description":"<p>If a second frequency is given,\n                              will return average amount of\n                              energy that exists between the\n                              two frequencies.</p>\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":5882,"description":"<p>Returns the\n<a href=\"http://en.wikipedia.org/wiki/Spectral_centroid\" target=\"_blank\">\nspectral centroid</a> of the input signal.\n<em>NOTE: analyze() must be called prior to getCentroid(). Analyze()\ntells the FFT to analyze frequency data, and getCentroid() uses\nthe results determine the spectral centroid.</em></p></p>\n","itemtype":"method","name":"getCentroid","return":{"description":"Spectral Centroid Frequency   Frequency of the spectral centroid in Hz.","type":"Number"},"example":["\n<div><code>\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 </code></div>"],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5968,"description":"<p>Smooth FFT analysis by averaging with the last analysis frame.</p>\n","itemtype":"method","name":"smooth","params":[{"name":"smoothing","description":"<p>0.0 < smoothing < 1.0.\n                             Defaults to 0.8.</p>\n","type":"Number"}],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5994,"description":"<p>Returns an array of average amplitude values for a given number\nof frequency bands split equally. N defaults to 16.\n<em>NOTE: 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.</em></p></p>\n","itemtype":"method","name":"linAverages","params":[{"name":"N","description":"<p>Number of returned frequency groups</p>\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":6028,"description":"<p>Returns an array of average amplitude values of the spectrum, for a given\nset of <a href=\"https://en.wikipedia.org/wiki/Octave_band\" target=\"_blank\">\nOctave Bands</a>\n<em>NOTE: 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.</em></p></p>\n","itemtype":"method","name":"logAverages","params":[{"name":"octaveBands","description":"<p>Array of Octave Bands objects for grouping</p>\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":6063,"description":"<p>Calculates and Returns the 1/N\n<a href=\"https://en.wikipedia.org/wiki/Octave_band\" target=\"_blank\">Octave Bands</a>\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.</p>\n","itemtype":"method","name":"getOctaveBands","params":[{"name":"N","description":"<p>Specifies the 1/N type of generated octave bands</p>\n","type":"Number"},{"name":"fCtr0","description":"<p>Minimum central frequency for the lowest band</p>\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":6209,"description":"<p>Fade to value, for smooth transitions</p>\n","itemtype":"method","name":"fade","params":[{"name":"value","description":"<p>Value to set this signal</p>\n","type":"Number"},{"name":"secondsFromNow","description":"<p>Length of fade, in seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6223,"description":"<p>Connect a p5.sound object or Web Audio node to this\np5.Signal so that its amplitude values can be scaled.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"input","description":"","type":"Object"}],"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6240,"description":"<p>Add a constant value to this audio signal,\nand return the resulting audio signal. Does\nnot change the value of the original signal,\ninstead it returns a new p5.SignalAdd.</p>\n","itemtype":"method","name":"add","params":[{"name":"number","description":"","type":"Number"}],"return":{"description":"object","type":"p5.Signal"},"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6262,"description":"<p>Multiply this signal by a constant value,\nand return the resulting audio signal. Does\nnot change the value of the original signal,\ninstead it returns a new p5.SignalMult.</p>\n","itemtype":"method","name":"mult","params":[{"name":"number","description":"<p>to multiply</p>\n","type":"Number"}],"return":{"description":"object","type":"p5.Signal"},"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6284,"description":"<p>Scale this signal value to a given range,\nand return the result as an audio signal. Does\nnot change the value of the original signal,\ninstead it returns a new p5.SignalScale.</p>\n","itemtype":"method","name":"scale","params":[{"name":"number","description":"<p>to multiply</p>\n","type":"Number"},{"name":"inMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"inMax","description":"<p>input range maximum</p>\n","type":"Number"},{"name":"outMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"outMax","description":"<p>input range maximum</p>\n","type":"Number"}],"return":{"description":"object","type":"p5.Signal"},"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6397,"description":"<p>Time until envelope reaches attackLevel</p>\n","itemtype":"property","name":"attackTime","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6402,"description":"<p>Level once attack is complete.</p>\n","itemtype":"property","name":"attackLevel","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6408,"description":"<p>Time until envelope reaches decayLevel.</p>\n","itemtype":"property","name":"decayTime","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6414,"description":"<p>Level after decay. The envelope will sustain here until it is released.</p>\n","itemtype":"property","name":"decayLevel","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6420,"description":"<p>Duration of the release portion of the envelope.</p>\n","itemtype":"property","name":"releaseTime","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6426,"description":"<p>Level at the end of the release.</p>\n","itemtype":"property","name":"releaseLevel","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6463,"description":"<p>Reset the envelope with a series of time/value pairs.</p>\n","itemtype":"method","name":"set","params":[{"name":"attackTime","description":"<p>Time (in seconds) before level\n                               reaches attackLevel</p>\n","type":"Number"},{"name":"attackLevel","description":"<p>Typically an amplitude between\n                               0.0 and 1.0</p>\n","type":"Number"},{"name":"decayTime","description":"<p>Time</p>\n","type":"Number"},{"name":"decayLevel","description":"<p>Amplitude (In a standard ADSR envelope,\n                               decayLevel = sustainLevel)</p>\n","type":"Number"},{"name":"releaseTime","description":"<p>Release Time (in seconds)</p>\n","type":"Number"},{"name":"releaseLevel","description":"<p>Amplitude</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>\n"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6525,"description":"<p>Set values like a traditional\n<a href=\"https://en.wikipedia.org/wiki/Synthesizer#/media/File:ADSR_parameter.svg\">\nADSR envelope\n</a>.</p>\n","itemtype":"method","name":"setADSR","params":[{"name":"attackTime","description":"<p>Time (in seconds before envelope\n                              reaches Attack Level</p>\n","type":"Number"},{"name":"decayTime","description":"<p>Time (in seconds) before envelope\n                              reaches Decay/Sustain Level</p>\n","type":"Number","optional":true},{"name":"susRatio","description":"<p>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 <code>setRange</code>),\n                              then decayLevel would increase proportionally, to become 0.5.</p>\n","type":"Number","optional":true},{"name":"releaseTime","description":"<p>Time in seconds from now (defaults to 0)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6594,"description":"<p>Set max (attackLevel) and min (releaseLevel) of envelope.</p>\n","itemtype":"method","name":"setRange","params":[{"name":"aLevel","description":"<p>attack level (defaults to 1)</p>\n","type":"Number"},{"name":"rLevel","description":"<p>release level (defaults to 0)</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6667,"description":"<p>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.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"inputs","description":"<p>A p5.sound object or\n                              Web Audio Param.</p>\n","type":"Object","optional":true,"multiple":true}],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6685,"description":"<p>Set whether the envelope ramp is linear (default) or exponential.\nExponential ramps can be useful because we perceive amplitude\nand frequency logarithmically.</p>\n","itemtype":"method","name":"setExp","params":[{"name":"isExp","description":"<p>true is exponential, false is linear</p>\n","type":"Boolean"}],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6708,"description":"<p>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 <a href=\"\nhttp://docs.webplatform.org/wiki/apis/webaudio/AudioParam\">\nWeb Audio Audio Param.</a></p>","itemtype":"method","name":"play","params":[{"name":"unit","description":"<p>A p5.sound object or\n                              Web Audio Param.</p>\n","type":"Object"},{"name":"startTime","description":"<p>time from now (in seconds) at which to play</p>\n","type":"Number","optional":true},{"name":"sustainTime","description":"<p>time to sustain before releasing the envelope</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6779,"description":"<p>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 <a href=\"\nhttp://docs.webplatform.org/wiki/apis/webaudio/AudioParam\">\nWeb Audio Param</a>.</p>\n","itemtype":"method","name":"triggerAttack","params":[{"name":"unit","description":"<p>p5.sound Object or Web Audio Param</p>\n","type":"Object"},{"name":"secondsFromNow","description":"<p>time from now (in seconds)</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6887,"description":"<p>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.</p>\n","itemtype":"method","name":"triggerRelease","params":[{"name":"unit","description":"<p>p5.sound Object or Web Audio Param</p>\n","type":"Object"},{"name":"secondsFromNow","description":"<p>time to trigger the release</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6981,"description":"<p>Exponentially ramp to a value using the first two\nvalues from <code><a href=\"#/p5.Envelope/setADSR\">setADSR(attackTime, decayTime)</a></code>\nas <a href=\"https://en.wikipedia.org/wiki/RC_time_constant\">\ntime constants</a> for simple exponential ramps.\nIf the value is higher than current value, it uses attackTime,\nwhile a decrease uses decayTime.</p>\n","itemtype":"method","name":"ramp","params":[{"name":"unit","description":"<p>p5.sound Object or Web Audio Param</p>\n","type":"Object"},{"name":"secondsFromNow","description":"<p>When to trigger the ramp</p>\n","type":"Number"},{"name":"v","description":"<p>Target value</p>\n","type":"Number"},{"name":"v2","description":"<p>Second target value (optional)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7095,"description":"<p>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.</p>\n","itemtype":"method","name":"add","params":[{"name":"number","description":"<p>Constant number to add</p>\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":7114,"description":"<p>Multiply the p5.Envelope's output amplitude\nby a fixed value. Calling this method\nagain will override the initial mult() with new values.</p>\n","itemtype":"method","name":"mult","params":[{"name":"number","description":"<p>Constant number to multiply</p>\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":7133,"description":"<p>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.</p>\n","itemtype":"method","name":"scale","params":[{"name":"inMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"inMax","description":"<p>input range maximum</p>\n","type":"Number"},{"name":"outMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"outMax","description":"<p>input range maximum</p>\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":7268,"description":"<p>Set the width of a Pulse object (an oscillator that implements\nPulse Width Modulation).</p>\n","itemtype":"method","name":"width","params":[{"name":"width","description":"<p>Width between the pulses (0 to 1.0,\n                       defaults to 0)</p>\n","type":"Number","optional":true}],"class":"p5.Pulse","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7484,"description":"<p>Set type of noise to 'white', 'pink' or 'brown'.\nWhite is the default.</p>\n","itemtype":"method","name":"setType","params":[{"name":"type","description":"<p>'white', 'pink' or 'brown'</p>\n","type":"String","optional":true}],"class":"p5.Noise","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7630,"itemtype":"property","name":"input","type":"GainNode","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7634,"itemtype":"property","name":"output","type":"GainNode","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7639,"itemtype":"property","name":"stream","type":"MediaStream|null","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7644,"itemtype":"property","name":"mediaStream","type":"MediaStreamAudioSourceNode|null","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7649,"itemtype":"property","name":"currentSource","type":"Number|null","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7654,"description":"<p>Client must allow browser to access their microphone / audioin source.\nDefault: false. Will become true when the client enables access.</p>\n","itemtype":"property","name":"enabled","type":"Boolean","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7662,"description":"<p>Input amplitude, connect to it by default but not to master out</p>\n","itemtype":"property","name":"amplitude","type":"p5.Amplitude","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7678,"description":"<p>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.<br/></p>\n<p>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.</p>\n","itemtype":"method","name":"start","params":[{"name":"successCallback","description":"<p>Name of a function to call on\n                                  success.</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>Name of a function to call if\n                                  there was an error. For example,\n                                  some browsers do not support\n                                  getUserMedia.</p>\n","type":"Function","optional":true}],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7733,"description":"<p>Turn the AudioIn off. If the AudioIn is stopped, it cannot getLevel().\nIf re-starting, the user may be prompted for permission access.</p>\n","itemtype":"method","name":"stop","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7752,"description":"<p>Connect to an audio unit. If no parameter is provided, will\nconnect to the master output (i.e. your speakers).<br/></p>\n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"<p>An object that accepts audio input,\n                        such as an FFT</p>\n","type":"Object","optional":true}],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7776,"description":"<p>Disconnect the AudioIn from all audio units. For example, if\nconnect() had been called, disconnect() will stop sending\nsignal to your speakers.<br/></p>\n","itemtype":"method","name":"disconnect","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7793,"description":"<p>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). <em>NOTE: AudioIn must\n.start() before using .getLevel().</em><br/></p>\n","itemtype":"method","name":"getLevel","params":[{"name":"smoothing","description":"<p>Smoothing is 0.0 by default.\n                             Smooths values based on previous values.</p>\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":7815,"description":"<p>Set amplitude (volume) of a mic input between 0 and 1.0. <br/></p>\n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"<p>between 0 and 1.0</p>\n","type":"Number"},{"name":"time","description":"<p>ramp time (optional)</p>\n","type":"Number","optional":true}],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7837,"description":"<p>Returns a list of available input sources. This is a wrapper\nfor <a title=\"MediaDevices.enumerateDevices() - Web APIs | MDN\" target=\"_blank\" href=\n \"<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\"\">https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\"</a></p>\n<blockquote>\n<p>and it returns a Promise.</p>\n</blockquote>\n","itemtype":"method","name":"getSources","params":[{"name":"successCallback","description":"<p>This callback function handles the sources when they\n                                     have been enumerated. The callback function\n                                     receives the deviceList array as its only argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>This optional callback receives the error\n                                   message as its argument.</p>\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 <div><code>\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 </code></div>"],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7896,"description":"<p>Set the input source. Accepts a number representing a\nposition in the array returned by getSources().\nThis is only available in browsers that support\n<a title=\"MediaDevices.enumerateDevices() - Web APIs | MDN\" target=\"_blank\" href=\n\"<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\"\">https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\"</a></p>\n<blockquote>\n<p>navigator.mediaDevices.enumerateDevices()</a>.<br/></p>\n</blockquote>\n","itemtype":"method","name":"setSource","params":[{"name":"num","description":"<p>position of input source in the array</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>"],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8107,"description":"<p>The p5.EQ is built with abstracted p5.Filter objects.\nTo modify any bands, use methods of the <a\nhref=\"/reference/#/p5.Filter\" title=\"p5.Filter reference\">\np5.Filter</a> API, especially <code>gain</code> and <code>freq</code>.\nBands are stored in an array, with indices 0 - 3, or 0 - 7</p>\n","itemtype":"property","name":"bands","type":"Array","class":"p5.EQ","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8148,"description":"<p>Process an input by connecting it to the EQ</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>Audio source</p>\n","type":"Object"}],"class":"p5.EQ","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8321,"description":"<p><a title=\"Web Audio Panner docs\"  href=\n\"https://developer.mozilla.org/en-US/docs/Web/API/PannerNode\">\nWeb Audio Spatial Panner Node</a></p>\n<p>Properties include</p>\n<ul>\n<li><a title=\"w3 spec for Panning Model\"\nhref=\"<a href=\"https://www.w3.org/TR/webaudio/#idl-def-PanningModelType\"\">https://www.w3.org/TR/webaudio/#idl-def-PanningModelType\"</a><blockquote>\n<p>panningModel</a>: \"equal power\" or \"HRTF\"</p>\n</blockquote>\n</li>\n<li><a title=\"w3 spec for Distance Model\"\nhref=\"<a href=\"https://www.w3.org/TR/webaudio/#idl-def-DistanceModelType\"\">https://www.w3.org/TR/webaudio/#idl-def-DistanceModelType\"</a><blockquote>\n<p>distanceModel</a>: \"linear\", \"inverse\", or \"exponential\"</p>\n</blockquote>\n</li>\n</ul>\n","itemtype":"property","name":"panner","type":"AudioNode","class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8346,"description":"<p>Connect an audio sorce</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>Input source</p>\n","type":"Object"}],"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8357,"description":"<p>Set the X,Y,Z position of the Panner</p>\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":8375,"description":"<p>Getter and setter methods for position coordinates</p>\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":8382,"description":"<p>Getter and setter methods for position coordinates</p>\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":8389,"description":"<p>Getter and setter methods for position coordinates</p>\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":8438,"description":"<p>Set the X,Y,Z position of the Panner</p>\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":8456,"description":"<p>Getter and setter methods for orient coordinates</p>\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":8463,"description":"<p>Getter and setter methods for orient coordinates</p>\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":8470,"description":"<p>Getter and setter methods for orient coordinates</p>\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":8519,"description":"<p>Set the rolloff factor and max distance</p>\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":8532,"description":"<p>Maxium distance between the source and the listener</p>\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":8548,"description":"<p>How quickly the volume is reduced as the source moves away from the listener</p>\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":8885,"description":"<p>The p5.Delay is built with two\n<a href=\"http://www.w3.org/TR/webaudio/#DelayNode\">\nWeb Audio Delay Nodes</a>, one for each stereo channel.</p>\n","itemtype":"property","name":"leftDelay","type":"DelayNode","class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8895,"description":"<p>The p5.Delay is built with two\n<a href=\"http://www.w3.org/TR/webaudio/#DelayNode\">\nWeb Audio Delay Nodes</a>, one for each stereo channel.</p>\n","itemtype":"property","name":"rightDelay","type":"DelayNode","class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8942,"description":"<p>Add delay to an audio signal according to a set\nof delay parameters.</p>\n","itemtype":"method","name":"process","params":[{"name":"Signal","description":"<p>An object that outputs audio</p>\n","type":"Object"},{"name":"delayTime","description":"<p>Time (in seconds) of the delay/echo.\n                             Some browsers limit delayTime to\n                             1 second.</p>\n","type":"Number","optional":true},{"name":"feedback","description":"<p>sends the delay back through itself\n                             in a loop that decreases in volume\n                             each time.</p>\n","type":"Number","optional":true},{"name":"lowPass","description":"<p>Cutoff frequency. Only frequencies\n                             below the lowPass will be part of the\n                             delay.</p>\n","type":"Number","optional":true}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8984,"description":"<p>Set the delay (echo) time, in seconds. Usually this value will be\na floating point number between 0.0 and 1.0.</p>\n","itemtype":"method","name":"delayTime","params":[{"name":"delayTime","description":"<p>Time (in seconds) of the delay</p>\n","type":"Number"}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9005,"description":"<p>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</p>\n","itemtype":"method","name":"feedback","params":[{"name":"feedback","description":"<p>0.0 to 1.0, or an object such as an\n                                Oscillator that can be used to\n                                modulate this param</p>\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":9036,"description":"<p>Set a lowpass filter frequency for the delay. A lowpass filter\nwill cut off any frequencies higher than the filter frequency.</p>\n","itemtype":"method","name":"filter","params":[{"name":"cutoffFreq","description":"<p>A lowpass filter will cut off any\n                            frequencies higher than the filter frequency.</p>\n","type":"Number|Object"},{"name":"res","description":"<p>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.</p>\n","type":"Number|Object"}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9057,"description":"<p>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.</p>\n","itemtype":"method","name":"setType","params":[{"name":"type","description":"<p>'pingPong' (1) or 'default' (0)</p>\n","type":"String|Number"}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9109,"description":"<p>Set the output level of the delay effect.</p>\n","itemtype":"method","name":"amp","params":[{"name":"volume","description":"<p>amplitude between 0 and 1.0</p>\n","type":"Number"},{"name":"rampTime","description":"<p>create a fade that lasts rampTime</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9120,"description":"<p>Send output to a p5.sound or web audio object</p>\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":9128,"description":"<p>Disconnect all output.</p>\n","itemtype":"method","name":"disconnect","class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9265,"description":"<p>Connect a source to the reverb, and assign reverb parameters.</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>p5.sound / Web Audio object with a sound\n                         output.</p>\n","type":"Object"},{"name":"seconds","description":"<p>Duration of the reverb, in seconds.\n                         Min: 0, Max: 10. Defaults to 3.</p>\n","type":"Number","optional":true},{"name":"decayRate","description":"<p>Percentage of decay with each echo.\n                          Min: 0, Max: 100. Defaults to 2.</p>\n","type":"Number","optional":true},{"name":"reverse","description":"<p>Play the reverb backwards or forwards.</p>\n","type":"Boolean","optional":true}],"class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9301,"description":"<p>Set the reverb settings. Similar to .process(), but without\nassigning a new input.</p>\n","itemtype":"method","name":"set","params":[{"name":"seconds","description":"<p>Duration of the reverb, in seconds.\n                         Min: 0, Max: 10. Defaults to 3.</p>\n","type":"Number","optional":true},{"name":"decayRate","description":"<p>Percentage of decay with each echo.\n                          Min: 0, Max: 100. Defaults to 2.</p>\n","type":"Number","optional":true},{"name":"reverse","description":"<p>Play the reverb backwards or forwards.</p>\n","type":"Boolean","optional":true}],"class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9336,"description":"<p>Set the output level of the reverb effect.</p>\n","itemtype":"method","name":"amp","params":[{"name":"volume","description":"<p>amplitude between 0 and 1.0</p>\n","type":"Number"},{"name":"rampTime","description":"<p>create a fade that lasts rampTime</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9347,"description":"<p>Send output to a p5.sound or web audio object</p>\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":9355,"description":"<p>Disconnect all output.</p>\n","itemtype":"method","name":"disconnect","class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9461,"description":"<p>Internally, the p5.Convolver uses the a\n<a href=\"http://www.w3.org/TR/webaudio/#ConvolverNode\">\nWeb Audio Convolver Node</a>.</p>\n","itemtype":"property","name":"convolverNode","type":"ConvolverNode","class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9489,"description":"<p>Create a p5.Convolver. Accepts a path to a soundfile\nthat will be used to generate an impulse response.</p>\n","itemtype":"method","name":"createConvolver","params":[{"name":"path","description":"<p>path to a sound file</p>\n","type":"String"},{"name":"callback","description":"<p>function to call if loading is successful.\n                              The object will be passed in as the argument\n                              to the callback function.</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to call if loading is not successful.\n                              A custom error will be passed in as the argument\n                              to the callback function.</p>\n","type":"Function","optional":true}],"return":{"description":"","type":"p5.Convolver"},"example":["\n<div><code>\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 master output...\n  sound.disconnect();\n\n  // ...and process with cVerb\n  // so that we only hear the convolution\n  cVerb.process(sound);\n}\n\nfunction playSound() {\n  sound.play();\n}\n</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9635,"description":"<p>Connect a source to the convolver.</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>p5.sound / Web Audio object with a sound\n                         output.</p>\n","type":"Object"}],"example":["\n<div><code>\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 master output...\n  sound.disconnect();\n\n  // ...and process with cVerb\n  // so that we only hear the convolution\n  cVerb.process(sound);\n}\n\nfunction playSound() {\n  sound.play();\n}\n\n</code></div>"],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9682,"description":"<p>If you load multiple impulse files using the .addImpulse method,\nthey will be stored as Objects in this Array. Toggle between them\nwith the <code>toggleImpulse(id)</code> method.</p>\n","itemtype":"property","name":"impulses","type":"Array","class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9693,"description":"<p>Load and assign a new Impulse Response to the p5.Convolver.\nThe impulse is added to the <code>.impulses</code> array. Previous\nimpulses can be accessed with the <code>.toggleImpulse(id)</code>\nmethod.</p>\n","itemtype":"method","name":"addImpulse","params":[{"name":"path","description":"<p>path to a sound file</p>\n","type":"String"},{"name":"callback","description":"<p>function (optional)</p>\n","type":"Function"},{"name":"errorCallback","description":"<p>function (optional)</p>\n","type":"Function"}],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9713,"description":"<p>Similar to .addImpulse, except that the <code>.impulses</code>\nArray is reset to save memory. A new <code>.impulses</code>\narray is created with this impulse as the only item.</p>\n","itemtype":"method","name":"resetImpulse","params":[{"name":"path","description":"<p>path to a sound file</p>\n","type":"String"},{"name":"callback","description":"<p>function (optional)</p>\n","type":"Function"},{"name":"errorCallback","description":"<p>function (optional)</p>\n","type":"Function"}],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9735,"description":"<p>If you have used <code>.addImpulse()</code> to add multiple impulses\nto a p5.Convolver, then you can use this method to toggle between\nthe items in the <code>.impulses</code> 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 <code>.impulses\n</code> Array (Number).<br/>\nYou can access the objects in the .impulses Array directly. Each\nObject has two attributes: an <code>.audioBuffer</code> (type:\nWeb Audio <a href=\"\nhttp://webaudio.github.io/web-audio-api/#the-audiobuffer-interface\">\nAudioBuffer)</a> and a <code>.name</code>, a String that corresponds\nwith the original filename.</p>\n","itemtype":"method","name":"toggleImpulse","params":[{"name":"id","description":"<p>Identify the impulse by its original filename\n                          (String), or by its position in the\n                          <code>.impulses</code> Array (Number).</p>\n","type":"String|Number"}],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9903,"description":"<p>Set the global tempo, in beats per minute, for all\np5.Parts. This method will impact all active p5.Parts.</p>\n","itemtype":"method","name":"setBPM","params":[{"name":"BPM","description":"<p>Beats Per Minute</p>\n","type":"Number"},{"name":"rampTime","description":"<p>Seconds from now</p>\n","type":"Number"}],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9990,"description":"<p>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.</p>\n","itemtype":"property","name":"sequence","type":"Array","class":"p5.Phrase","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10076,"description":"<p>Set the tempo of this part, in Beats Per Minute.</p>\n","itemtype":"method","name":"setBPM","params":[{"name":"BPM","description":"<p>Beats Per Minute</p>\n","type":"Number"},{"name":"rampTime","description":"<p>Seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10089,"description":"<p>Returns the tempo, in Beats Per Minute, of this part.</p>\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":10101,"description":"<p>Start playback of this part. It will play\nthrough all of its phrases at a speed\ndetermined by setBPM.</p>\n","itemtype":"method","name":"start","params":[{"name":"time","description":"<p>seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10120,"description":"<p>Loop playback of this part. It will begin\nlooping through all of its phrases at a speed\ndetermined by setBPM.</p>\n","itemtype":"method","name":"loop","params":[{"name":"time","description":"<p>seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10141,"description":"<p>Tell the part to stop looping.</p>\n","itemtype":"method","name":"noLoop","class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10156,"description":"<p>Stop the part and cue it to step 0. Playback will resume from the begining of the Part when it is played again.</p>\n","itemtype":"method","name":"stop","params":[{"name":"time","description":"<p>seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10169,"description":"<p>Pause the part. Playback will resume\nfrom the current step.</p>\n","itemtype":"method","name":"pause","params":[{"name":"time","description":"<p>seconds from now</p>\n","type":"Number"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10184,"description":"<p>Add a p5.Phrase to this Part.</p>\n","itemtype":"method","name":"addPhrase","params":[{"name":"phrase","description":"<p>reference to a p5.Phrase</p>\n","type":"p5.Phrase"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10210,"description":"<p>Remove a phrase from this part, based on the name it was\ngiven when it was created.</p>\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":10227,"description":"<p>Get a phrase from this part, based on the name it was\ngiven when it was created. Now you can modify its array.</p>\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":10244,"description":"<p>Find all sequences with the specified name, and replace their patterns with the specified array.</p>\n","itemtype":"method","name":"replaceSequence","params":[{"name":"phraseName","description":"","type":"String"},{"name":"sequence","description":"<p>Array of values to pass into the callback\n                          at each step of the phrase.</p>\n","type":"Array"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10273,"description":"<p>Set the function that will be called at every step. This will clear the previous function.</p>\n","itemtype":"method","name":"onStep","params":[{"name":"callback","description":"<p>The name of the callback\n                            you want to fire\n                            on every beat/tatum.</p>\n","type":"Function"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10332,"description":"<p>Start playback of the score.</p>\n","itemtype":"method","name":"start","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10344,"description":"<p>Stop playback of the score.</p>\n","itemtype":"method","name":"stop","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10357,"description":"<p>Pause playback of the score.</p>\n","itemtype":"method","name":"pause","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10368,"description":"<p>Loop playback of the score.</p>\n","itemtype":"method","name":"loop","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10380,"description":"<p>Stop looping playback of the score. If it\nis currently playing, this will go into effect\nafter the current round of playback completes.</p>\n","itemtype":"method","name":"noLoop","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10411,"description":"<p>Set the tempo for all parts in the score</p>\n","itemtype":"method","name":"setBPM","params":[{"name":"BPM","description":"<p>Beats Per Minute</p>\n","type":"Number"},{"name":"rampTime","description":"<p>Seconds from now</p>\n","type":"Number"}],"class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10508,"description":"<p>musicalTimeMode uses <a href = \"https://github.com/Tonejs/Tone.js/wiki/Time\">Tone.Time</a> convention\ntrue if string, false if number</p>\n","itemtype":"property","name":"musicalTimeMode","type":"Boolean","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10516,"description":"<p>musicalTimeMode variables\nmodify these only when the interval is specified in musicalTime format as a string</p>\n","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10524,"description":"<p>Set a limit to the number of loops to play. defaults to Infinity</p>\n","itemtype":"property","name":"maxIterations","type":"Number","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10534,"description":"<p>Do not initiate the callback if timeFromNow is < 0\nThis ususually occurs for a few milliseconds when the page\nis not fully loaded</p>\n<p>The callback should only be called until maxIterations is reached</p>\n","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10549,"description":"<p>Start the loop</p>\n","itemtype":"method","name":"start","params":[{"name":"timeFromNow","description":"<p>schedule a starting time</p>\n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10566,"description":"<p>Stop the loop</p>\n","itemtype":"method","name":"stop","params":[{"name":"timeFromNow","description":"<p>schedule a stopping time</p>\n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10583,"description":"<p>Pause the loop</p>\n","itemtype":"method","name":"pause","params":[{"name":"timeFromNow","description":"<p>schedule a pausing time</p>\n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10600,"description":"<p>Synchronize loops. Use this method to start two more more loops in synchronization\nor to start a loop in synchronization with a loop that is already playing\nThis method will schedule the implicit loop in sync with the explicit master loop\ni.e. loopToStart.syncedStart(loopToSyncWith)</p>\n","itemtype":"method","name":"syncedStart","params":[{"name":"otherLoop","description":"<p>a p5.SoundLoop to sync with</p>\n","type":"Object"},{"name":"timeFromNow","description":"<p>Start the loops in sync after timeFromNow seconds</p>\n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10705,"description":"<p>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)</p>\n","itemtype":"property","name":"bpm","type":"Number","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10728,"description":"<p>number of quarter notes in a measure (defaults to 4)</p>\n","itemtype":"property","name":"timeSignature","type":"Number","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10748,"description":"<p>length of the loops interval</p>\n","itemtype":"property","name":"interval","type":"Number|String","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10765,"description":"<p>how many times the callback has been called so far</p>\n","itemtype":"property","name":"iterations","type":"Number","readonly":"","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10817,"description":"<p>The p5.Compressor is built with a <a href=\"https://www.w3.org/TR/webaudio/#the-dynamicscompressornode-interface\"\n  target=\"_blank\" title=\"W3 spec for Dynamics Compressor Node\">Web Audio Dynamics Compressor Node\n  </a></p>\n","itemtype":"property","name":"compressor","type":"AudioNode","class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10830,"description":"<p>Performs the same function as .connect, but also accepts\noptional parameters to set compressor's audioParams</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>Sound source to be connected</p>\n","type":"Object"},{"name":"attack","description":"<p>The amount of time (in seconds) to reduce the gain by 10dB,\n                           default = .003, range 0 - 1</p>\n","type":"Number","optional":true},{"name":"knee","description":"<p>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</p>\n","type":"Number","optional":true},{"name":"ratio","description":"<p>The amount of dB change in input for a 1 dB change in output\n                           default = 12, range 1 - 20</p>\n","type":"Number","optional":true},{"name":"threshold","description":"<p>The decibel value above which the compression will start taking effect\n                           default = -24, range -100 - 0</p>\n","type":"Number","optional":true},{"name":"release","description":"<p>The amount of time (in seconds) to increase the gain by 10dB\n                           default = .25, range 0 - 1</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10855,"description":"<p>Set the paramters of a compressor.</p>\n","itemtype":"method","name":"set","params":[{"name":"attack","description":"<p>The amount of time (in seconds) to reduce the gain by 10dB,\n                           default = .003, range 0 - 1</p>\n","type":"Number"},{"name":"knee","description":"<p>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</p>\n","type":"Number"},{"name":"ratio","description":"<p>The amount of dB change in input for a 1 dB change in output\n                           default = 12, range 1 - 20</p>\n","type":"Number"},{"name":"threshold","description":"<p>The decibel value above which the compression will start taking effect\n                           default = -24, range -100 - 0</p>\n","type":"Number"},{"name":"release","description":"<p>The amount of time (in seconds) to increase the gain by 10dB\n                           default = .25, range 0 - 1</p>\n","type":"Number"}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10894,"description":"<p>Get current attack or set value w/ time ramp</p>\n","itemtype":"method","name":"attack","params":[{"name":"attack","description":"<p>Attack is the amount of time (in seconds) to reduce the gain by 10dB,\n                         default = .003, range 0 - 1</p>\n","type":"Number","optional":true},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10919,"description":"<p>Get current knee or set value w/ time ramp</p>\n","itemtype":"method","name":"knee","params":[{"name":"knee","description":"<p>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</p>\n","type":"Number","optional":true},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10944,"description":"<p>Get current ratio or set value w/ time ramp</p>\n","itemtype":"method","name":"ratio","params":[{"name":"ratio","description":"<p>The amount of dB change in input for a 1 dB change in output\n                           default = 12, range 1 - 20</p>\n","type":"Number","optional":true},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10967,"description":"<p>Get current threshold or set value w/ time ramp</p>\n","itemtype":"method","name":"threshold","params":[{"name":"threshold","description":"<p>The decibel value above which the compression will start taking effect\n                           default = -24, range -100 - 0</p>\n","type":"Number"},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10990,"description":"<p>Get current release or set value w/ time ramp</p>\n","itemtype":"method","name":"release","params":[{"name":"release","description":"<p>The amount of time (in seconds) to increase the gain by 10dB\n                           default = .25, range 0 - 1</p>\n","type":"Number"},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11014,"description":"<p>Return the current reduction value</p>\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":11169,"description":"<p>Connect a specific device to the p5.SoundRecorder.\nIf no parameter is given, p5.SoundRecorer will record\nall audible p5.sound from your sketch.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"unit","description":"<p>p5.sound object or a web audio unit\n                       that outputs sound</p>\n","type":"Object","optional":true}],"class":"p5.SoundRecorder","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11194,"description":"<p>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.</p>\n","itemtype":"method","name":"record","params":[{"name":"soundFile","description":"<p>p5.SoundFile</p>\n","type":"p5.SoundFile"},{"name":"duration","description":"<p>Time (in seconds)</p>\n","type":"Number","optional":true},{"name":"callback","description":"<p>The name of a function that will be\n                              called once the recording completes</p>\n","type":"Function","optional":true}],"class":"p5.SoundRecorder","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11229,"description":"<p>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.</p>\n","itemtype":"method","name":"stop","class":"p5.SoundRecorder","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11259,"description":"<p>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\n<a href=\"/docs/reference/#/p5.SoundFile/saveBlob\"><code>p5.SoundFile.saveBlob</code></a>.</p>\n","itemtype":"method","name":"saveSound","params":[{"name":"soundFile","description":"<p>p5.SoundFile that you wish to save</p>\n","type":"p5.SoundFile"},{"name":"fileName","description":"<p>name of the resulting .wav file.</p>\n","type":"String"}],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11389,"description":"<p>isDetected is set to true when a peak is detected.</p>\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":11402,"description":"<p>The update method is run in the draw loop.</p>\n<p>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.</p>\n","itemtype":"method","name":"update","params":[{"name":"fftObject","description":"<p>A p5.FFT object</p>\n","type":"p5.FFT"}],"class":"p5.PeakDetect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11438,"description":"<p>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.</p>\n","itemtype":"method","name":"onPeak","params":[{"name":"callback","description":"<p>Name of a function that will\n                            be called when a peak is\n                            detected.</p>\n","type":"Function"},{"name":"val","description":"<p>Optional value to pass\n                            into the function when\n                            a peak is detected.</p>\n","type":"Object","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.PeakDetect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11600,"description":"<p>Connect a source to the gain node.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"src","description":"<p>p5.sound / Web Audio object with a sound\n                         output.</p>\n","type":"Object"}],"class":"p5.Gain","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11613,"description":"<p>Send output to a p5.sound or web audio object</p>\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":11626,"description":"<p>Disconnect all output.</p>\n","itemtype":"method","name":"disconnect","class":"p5.Gain","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11639,"description":"<p>Set the output level of the gain node.</p>\n","itemtype":"method","name":"amp","params":[{"name":"volume","description":"<p>amplitude between 0 and 1.0</p>\n","type":"Number"},{"name":"rampTime","description":"<p>create a fade that lasts rampTime</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Gain","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11743,"description":"<p>The p5.Distortion is built with a\n<a href=\"http://www.w3.org/TR/webaudio/#WaveShaperNode\">\nWeb Audio WaveShaper Node</a>.</p>\n","itemtype":"property","name":"WaveShaperNode","type":"AudioNode","class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11760,"description":"<p>Process a sound source, optionally specify amount and oversample values.</p>\n","itemtype":"method","name":"process","params":[{"name":"amount","description":"<p>Unbounded distortion amount.\n                               Normal values range from 0-1.</p>\n","type":"Number","optional":true,"optdefault":"0.25"},{"name":"oversample","description":"<p>'none', '2x', or '4x'.</p>\n","type":"String","optional":true,"optdefault":"'none'"}],"class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11774,"description":"<p>Set the amount and oversample of the waveshaper distortion.</p>\n","itemtype":"method","name":"set","params":[{"name":"amount","description":"<p>Unbounded distortion amount.\n                               Normal values range from 0-1.</p>\n","type":"Number","optional":true,"optdefault":"0.25"},{"name":"oversample","description":"<p>'none', '2x', or '4x'.</p>\n","type":"String","optional":true,"optdefault":"'none'"}],"class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11796,"description":"<p>Return the distortion amount, typically between 0-1.</p>\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":11809,"description":"<p>Return the oversampling.</p>\n","itemtype":"method","name":"getOversample","return":{"description":"Oversample can either be 'none', '2x', or '4x'.","type":"String"},"class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"}],"warnings":[{"message":"unknown tag: alt","line":" src/color/creating_reading.js:16"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:45"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:72"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:116"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:297"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:326"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:361"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:452"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:482"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:522"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:51"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:256"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:285"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:309"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:333"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:758"},{"message":"unknown tag: alt","line":" src/color/setting.js:13"},{"message":"unknown tag: alt","line":" src/color/setting.js:180"},{"message":"unknown tag: alt","line":" src/color/setting.js:214"},{"message":"unknown tag: alt","line":" src/color/setting.js:333"},{"message":"unknown tag: alt","line":" src/color/setting.js:492"},{"message":"unknown tag: alt","line":" src/color/setting.js:533"},{"message":"unknown tag: alt","line":" src/color/setting.js:573"},{"message":"unknown tag: alt","line":" src/color/setting.js:745"},{"message":"unknown tag: alt","line":" src/color/setting.js:825"},{"message":"replacing incorrect tag: returns with return","line":" src/core/friendly_errors/fes_core.js:173"},{"message":"replacing incorrect tag: returns with return","line":" src/core/friendly_errors/fes_core.js:267"},{"message":"replacing incorrect tag: returns with return","line":" src/core/friendly_errors/fes_core.js:362"},{"message":"replacing incorrect tag: returns with return","line":" src/core/friendly_errors/fes_core.js:502"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:102"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:232"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:275"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:339"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:400"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:478"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:552"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:618"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:707"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:12"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:81"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:115"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:184"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:219"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:259"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:331"},{"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:130"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:185"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:264"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:358"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:398"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:493"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:20"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:67"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:267"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:389"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:434"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:498"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:557"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:642"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:707"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:800"},{"message":"unknown tag: alt","line":" src/core/constants.js:66"},{"message":"unknown tag: alt","line":" src/core/constants.js:84"},{"message":"unknown tag: alt","line":" src/core/constants.js:102"},{"message":"unknown tag: alt","line":" src/core/constants.js:120"},{"message":"unknown tag: alt","line":" src/core/constants.js:138"},{"message":"unknown tag: alt","line":" src/core/environment.js:20"},{"message":"unknown tag: alt","line":" src/core/environment.js:52"},{"message":"unknown tag: alt","line":" src/core/environment.js:79"},{"message":"unknown tag: alt","line":" src/core/environment.js:129"},{"message":"unknown tag: alt","line":" src/core/environment.js:160"},{"message":"unknown tag: alt","line":" src/core/environment.js:228"},{"message":"unknown tag: alt","line":" src/core/environment.js:331"},{"message":"unknown tag: alt","line":" src/core/environment.js:354"},{"message":"unknown tag: alt","line":" src/core/environment.js:372"},{"message":"unknown tag: alt","line":" src/core/environment.js:390"},{"message":"unknown tag: alt","line":" src/core/environment.js:405"},{"message":"unknown tag: alt","line":" src/core/environment.js:421"},{"message":"unknown tag: alt","line":" src/core/environment.js:500"},{"message":"unknown tag: alt","line":" src/core/environment.js:550"},{"message":"replacing incorrect tag: returns with return","line":" src/core/environment.js:586"},{"message":"replacing incorrect tag: returns with return","line":" src/core/environment.js:605"},{"message":"unknown tag: alt","line":" src/core/environment.js:605"},{"message":"unknown tag: alt","line":" src/core/environment.js:660"},{"message":"unknown tag: alt","line":" src/core/environment.js:691"},{"message":"unknown tag: alt","line":" src/core/environment.js:713"},{"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:42"},{"message":"unknown tag: alt","line":" src/core/main.js:83"},{"message":"unknown tag: alt","line":" src/core/main.js:114"},{"message":"unknown tag: alt","line":" src/core/main.js:415"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:47"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:114"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:154"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:189"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:246"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:292"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:354"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:403"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:454"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:510"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:551"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:592"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:639"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:678"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:725"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:763"},{"message":"unknown tag: alt","line":" src/core/p5.Graphics.js:70"},{"message":"unknown tag: alt","line":" src/core/p5.Graphics.js:122"},{"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:125"},{"message":"unknown tag: alt","line":" src/core/rendering.js:183"},{"message":"unknown tag: alt","line":" src/core/rendering.js:204"},{"message":"unknown tag: alt","line":" src/core/rendering.js:243"},{"message":"unknown tag: alt","line":" src/core/rendering.js:326"},{"message":"unknown tag: alt","line":" src/core/structure.js:10"},{"message":"unknown tag: alt","line":" src/core/structure.js:83"},{"message":"unknown tag: alt","line":" src/core/structure.js:134"},{"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:497"},{"message":"unknown tag: alt","line":" src/core/transform.js:11"},{"message":"unknown tag: alt","line":" src/core/transform.js:168"},{"message":"unknown tag: alt","line":" src/core/transform.js:193"},{"message":"unknown tag: alt","line":" src/core/transform.js:232"},{"message":"unknown tag: alt","line":" src/core/transform.js:268"},{"message":"unknown tag: alt","line":" src/core/transform.js:304"},{"message":"unknown tag: alt","line":" src/core/transform.js:342"},{"message":"unknown tag: alt","line":" src/core/transform.js:416"},{"message":"unknown tag: alt","line":" src/core/transform.js:455"},{"message":"unknown tag: alt","line":" src/core/transform.js:494"},{"message":"unknown tag: alt","line":" src/data/local_storage.js:10"},{"message":"unknown tag: alt","line":" src/data/local_storage.js:101"},{"message":"unknown tag: alt","line":" src/dom/dom.js:204"},{"message":"unknown tag: alt","line":" src/dom/dom.js:271"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1517"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1579"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1683"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1722"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1842"},{"message":"unknown tag: alt","line":" src/dom/dom.js:2225"},{"message":"unknown tag: alt","line":" src/dom/dom.js:2735"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:23"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:46"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:69"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:135"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:168"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:201"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:239"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:285"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:330"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:389"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:428"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:471"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:515"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:546"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:604"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:10"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:36"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:64"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:103"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:190"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:243"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:308"},{"message":"unknown tag: alt","line":" src/events/mouse.js:12"},{"message":"unknown tag: alt","line":" src/events/mouse.js:43"},{"message":"unknown tag: alt","line":" src/events/mouse.js:80"},{"message":"unknown tag: alt","line":" src/events/mouse.js:106"},{"message":"unknown tag: alt","line":" src/events/mouse.js:132"},{"message":"unknown tag: alt","line":" src/events/mouse.js:164"},{"message":"unknown tag: alt","line":" src/events/mouse.js:195"},{"message":"unknown tag: alt","line":" src/events/mouse.js:233"},{"message":"unknown tag: alt","line":" src/events/mouse.js:271"},{"message":"unknown tag: alt","line":" src/events/mouse.js:311"},{"message":"unknown tag: alt","line":" src/events/mouse.js:351"},{"message":"unknown tag: alt","line":" src/events/mouse.js:389"},{"message":"unknown tag: alt","line":" src/events/mouse.js:481"},{"message":"unknown tag: alt","line":" src/events/mouse.js:535"},{"message":"unknown tag: alt","line":" src/events/mouse.js:615"},{"message":"unknown tag: alt","line":" src/events/mouse.js:696"},{"message":"unknown tag: alt","line":" src/events/mouse.js:772"},{"message":"unknown tag: alt","line":" src/events/mouse.js:841"},{"message":"unknown tag: alt","line":" src/events/mouse.js:926"},{"message":"unknown tag: alt","line":" src/events/mouse.js:979"},{"message":"unknown tag: alt","line":" src/events/mouse.js:1025"},{"message":"unknown tag: alt","line":" src/events/touch.js:10"},{"message":"unknown tag: alt","line":" src/events/touch.js:71"},{"message":"unknown tag: alt","line":" src/events/touch.js:151"},{"message":"unknown tag: alt","line":" src/events/touch.js:223"},{"message":"unknown tag: alt","line":" src/image/image.js:15"},{"message":"unknown tag: alt","line":" src/image/image.js:94"},{"message":"unknown tag: alt","line":" src/image/image.js:413"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:18"},{"message":"replacing incorrect tag: returns with return","line":" src/image/loading_displaying.js:252"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:269"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:439"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:537"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:601"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:88"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:115"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:152"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:261"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:296"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:346"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:400"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:437"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:548"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:603"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:665"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:738"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:859"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:900"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:941"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:972"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:1017"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:1052"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:1089"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:1125"},{"message":"unknown tag: alt","line":" src/image/pixels.js:12"},{"message":"unknown tag: alt","line":" src/image/pixels.js:80"},{"message":"unknown tag: alt","line":" src/image/pixels.js:173"},{"message":"unknown tag: alt","line":" src/image/pixels.js:307"},{"message":"unknown tag: alt","line":" src/image/pixels.js:481"},{"message":"unknown tag: alt","line":" src/image/pixels.js:566"},{"message":"unknown tag: alt","line":" src/image/pixels.js:602"},{"message":"unknown tag: alt","line":" src/image/pixels.js:674"},{"message":"unknown tag: alt","line":" src/io/files.js:20"},{"message":"unknown tag: alt","line":" src/io/files.js:183"},{"message":"unknown tag: alt","line":" src/io/files.js:303"},{"message":"unknown tag: alt","line":" src/io/files.js:583"},{"message":"replacing incorrect tag: returns with return","line":" src/io/files.js:693"},{"message":"unknown tag: alt","line":" src/io/files.js:693"},{"message":"unknown tag: alt","line":" src/io/files.js:1393"},{"message":"unknown tag: alt","line":" src/io/files.js:1535"},{"message":"unknown tag: alt","line":" src/io/files.js:1592"},{"message":"unknown tag: alt","line":" src/io/files.js:1656"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:85"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:148"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:195"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:240"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:288"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:352"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:545"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:597"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:638"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:896"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:960"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1009"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1055"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1100"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1146"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1190"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1242"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1305"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:40"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:102"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:146"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:191"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:239"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:295"},{"message":"unknown tag: alt","line":" src/io/p5.XML.js:9"},{"message":"unknown tag: alt","line":" src/math/calculation.js:10"},{"message":"unknown tag: alt","line":" src/math/calculation.js:33"},{"message":"unknown tag: alt","line":" src/math/calculation.js:72"},{"message":"unknown tag: alt","line":" src/math/calculation.js:116"},{"message":"unknown tag: alt","line":" src/math/calculation.js:181"},{"message":"unknown tag: alt","line":" src/math/calculation.js:230"},{"message":"unknown tag: alt","line":" src/math/calculation.js:268"},{"message":"unknown tag: alt","line":" src/math/calculation.js:315"},{"message":"unknown tag: alt","line":" src/math/calculation.js:370"},{"message":"unknown tag: alt","line":" src/math/calculation.js:408"},{"message":"unknown tag: alt","line":" src/math/calculation.js:463"},{"message":"unknown tag: alt","line":" src/math/calculation.js:511"},{"message":"unknown tag: alt","line":" src/math/calculation.js:559"},{"message":"unknown tag: alt","line":" src/math/calculation.js:611"},{"message":"unknown tag: alt","line":" src/math/calculation.js:645"},{"message":"unknown tag: alt","line":" src/math/calculation.js:699"},{"message":"unknown tag: alt","line":" src/math/calculation.js:743"},{"message":"replacing incorrect tag: returns with return","line":" src/math/calculation.js:830"},{"message":"unknown tag: alt","line":" src/math/calculation.js:830"},{"message":"unknown tag: alt","line":" src/math/math.js:10"},{"message":"unknown tag: alt","line":" src/math/noise.js:36"},{"message":"unknown tag: alt","line":" src/math/noise.js:178"},{"message":"unknown tag: alt","line":" src/math/noise.js:243"},{"message":"unknown tag: alt","line":" src/math/p5.Vector.js:10"},{"message":"unknown tag: alt","line":" src/math/random.js:37"},{"message":"unknown tag: alt","line":" src/math/random.js:66"},{"message":"unknown tag: alt","line":" src/math/random.js:153"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:123"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:159"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:186"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:213"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:285"},{"message":"replacing incorrect tag: returns with return","line":" src/math/trigonometry.js:320"},{"message":"replacing incorrect tag: returns with return","line":" src/math/trigonometry.js:335"},{"message":"replacing incorrect tag: returns with return","line":" src/math/trigonometry.js:350"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:11"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:81"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:118"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:150"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:187"},{"message":"unknown tag: alt","line":" src/typography/loading_displaying.js:16"},{"message":"unknown tag: alt","line":" src/typography/loading_displaying.js:140"},{"message":"unknown tag: alt","line":" src/typography/loading_displaying.js:229"},{"message":"unknown tag: alt","line":" src/typography/p5.Font.js:31"},{"message":"unknown tag: alt","line":" src/utilities/conversion.js:10"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:15"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:43"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:130"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:239"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:313"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:375"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:453"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:539"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:10"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:31"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:52"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:73"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:100"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:122"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:143"},{"message":"unknown tag: alt","line":" src/webgl/3d_primitives.js:13"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:11"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:353"},{"message":"unknown tag: alt","line":" src/webgl/light.js:11"},{"message":"unknown tag: alt","line":" src/webgl/light.js:92"},{"message":"unknown tag: alt","line":" src/webgl/light.js:177"},{"message":"unknown tag: alt","line":" src/webgl/light.js:280"},{"message":"unknown tag: alt","line":" src/webgl/light.js:387"},{"message":"unknown tag: alt","line":" src/webgl/light.js:425"},{"message":"unknown tag: alt","line":" src/webgl/light.js:510"},{"message":"unknown tag: alt","line":" src/webgl/light.js:850"},{"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:588"},{"message":"unknown tag: alt","line":" src/webgl/material.js:12"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/material.js:111"},{"message":"unknown tag: alt","line":" src/webgl/material.js:111"},{"message":"unknown tag: alt","line":" src/webgl/material.js:179"},{"message":"unknown tag: alt","line":" src/webgl/material.js:283"},{"message":"unknown tag: alt","line":" src/webgl/material.js:321"},{"message":"unknown tag: alt","line":" src/webgl/material.js:421"},{"message":"unknown tag: alt","line":" src/webgl/material.js:421"},{"message":"unknown tag: alt","line":" src/webgl/material.js:499"},{"message":"unknown tag: alt","line":" src/webgl/material.js:571"},{"message":"unknown tag: alt","line":" src/webgl/material.js:651"},{"message":"unknown tag: alt","line":" src/webgl/material.js:717"},{"message":"unknown tag: alt","line":" src/webgl/material.js:767"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:13"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:115"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:175"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:231"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:297"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:339"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:426"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:454"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:481"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:508"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:536"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:563"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:590"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:613"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:636"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:907"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:965"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:1023"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:1175"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:1247"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:1512"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.RendererGL.Immediate.js:180"},{"message":"unknown tag: parem","line":" src/webgl/p5.RendererGL.Immediate.js:301"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.RendererGL.Retained.js:8"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:331"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:600"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:641"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:746"},{"message":"unknown tag: alt","line":" src/webgl/p5.Shader.js:296"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:115"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/text.js:158"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:191"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:203"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:236"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:250"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:388"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/text.js:388"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:456"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:471"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:556"},{"message":"replacing incorrect tag: params with param","line":" lib/addons/p5.sound.js:4374"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:4374"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:5085"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:7837"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:9005"},{"message":"Missing item type\nConversions adapted from <http://www.easyrgb.com/en/math.php>.\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:19"},{"message":"Missing item type\nConvert an HSBA array to RGBA.","line":" src/color/color_conversion.js:45"},{"message":"Missing item type\nConvert an HSLA array to HSBA.","line":" src/color/color_conversion.js:100"},{"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:123"},{"message":"Missing item type\nConvert an RGBA array to HSBA.","line":" src/color/color_conversion.js:187"},{"message":"Missing item type\nConvert an RGBA array to HSLA.","line":" src/color/color_conversion.js:226"},{"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:404"},{"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:435"},{"message":"Missing item type\nCSS named colors.","line":" src/color/p5.Color.js:454"},{"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:608"},{"message":"Missing item type\nFull color string patterns. The capture groups are necessary.","line":" src/color/p5.Color.js:621"},{"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:758"},{"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:969"},{"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:819"},{"message":"Missing item type","line":" src/core/friendly_errors/file_errors.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:34"},{"message":"Missing item type","line":" src/core/friendly_errors/validate_params.js:1"},{"message":"Missing item type\nValidates parameters\nparam  {String}               func    the name of the function\nparam  {Array}                args    user input arguments\n\nexample:\n const a;\n ellipse(10,10,a,5);\nconsole ouput:\n \"It looks like ellipse received an empty variable in spot #2.\"\n\nexample:\n ellipse(10,\"foo\",5,5);\nconsole output:\n \"ellipse was expecting a number for parameter #1,\n          received \"foo\" instead.\"","line":" src/core/friendly_errors/validate_params.js:626"},{"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:305"},{"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 <a href=\"#/p5/setup\">setup()</a> is\nrecommended. The default rate is 60 frames per second.\n\nCalling <a href=\"#/p5/frameRate\">frameRate()</a> with no arguments returns the current framerate.","line":" src/core/environment.js:315"},{"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","line":" src/core/legacy.js:1"},{"message":"Missing item type\nHelper fxn for sharing pixel methods","line":" src/core/p5.Element.js:827"},{"message":"Missing item type\nResize our canvas element.","line":" src/core/p5.Renderer.js:95"},{"message":"Missing item type\nHelper fxn to check font type (system or otf)","line":" src/core/p5.Renderer.js:344"},{"message":"Missing item type\nHelper fxn to measure ascent and descent.\nAdapted from http://stackoverflow.com/a/25355178","line":" src/core/p5.Renderer.js:396"},{"message":"Missing item type\np5.Renderer2D\nThe 2D graphics canvas renderer class.\nextends p5.Renderer","line":" src/core/p5.Renderer2D.js:7"},{"message":"Missing item type\nGenerate a cubic Bezier representing an arc on the unit circle of total\nangle `size` radians, beginning `start` radians above the x-axis. Up to\nfour of these curves are combined to make a full arc.\n\nSee www.joecridge.me/bezier.pdf for an explanation of the method.","line":" src/core/p5.Renderer2D.js:402"},{"message":"Missing item type\nshim for Uint8ClampedArray.slice\n(allows arrayCopy to work with pixels[])\nwith thanks to http://halfpapstudios.com/blog/tag/html5-canvas/\nEnumerable set to false to protect for...in from\nUint8ClampedArray.prototype pollution.","line":" src/core/shim.js:18"},{"message":"Missing item type\nthis is implementation of Object.assign() which is unavailable in\nIE11 and (non-Chrome) Android browsers.\nThe assign() method is used to copy the values of all enumerable\nown properties from one or more source objects to a target object.\nIt will return the target object.\nModified from https://github.com/ljharb/object.assign","line":" src/core/shim.js:39"},{"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:197"},{"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:387"},{"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:425"},{"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:536"},{"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:600"},{"message":"Missing item type\nHelper function for select and selectAll","line":" src/dom/dom.js:127"},{"message":"Missing item type\nHelper function for getElement and getElements.","line":" src/dom/dom.js:142"},{"message":"Missing item type\nHelpers for create methods.","line":" src/dom/dom.js:309"},{"message":"Missing item type","line":" src/dom/dom.js:450"},{"message":"Missing item type","line":" src/dom/dom.js:1121"},{"message":"Missing item type","line":" src/dom/dom.js:1214"},{"message":"Missing item type","line":" src/dom/dom.js:1253"},{"message":"Missing item type","line":" src/dom/dom.js:3189"},{"message":"Missing item type","line":" src/dom/dom.js:3255"},{"message":"Missing item type","line":" src/dom/dom.js:3317"},{"message":"Missing item type\n_updatePAccelerations updates the pAcceleration values","line":" src/events/acceleration.js:124"},{"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:298"},{"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:384"},{"message":"Missing item type\nThis module defines the filters for use with image buffers.\n\nThis module is basically a collection of functions stored in an object\nas opposed to modules. The functions are destructive, modifying\nthe passed in canvas rather than creating a copy.\n\nGenerally speaking users of this module will use the Filters.apply method\non a canvas to create an effect.\n\nA number of functions are borrowed/adapted from\nhttp://www.html5rocks.com/en/tutorials/canvas/imagefilters/\nor the java processing implementation.","line":" src/image/filters.js:3"},{"message":"Missing item type\nReturns the pixel buffer for a canvas","line":" src/image/filters.js:24"},{"message":"Missing item type\nReturns a 32 bit number containing ARGB data at ith pixel in the\n1D array containing pixels data.","line":" src/image/filters.js:60"},{"message":"Missing item type\nModifies pixels RGBA values to values contained in the data object.","line":" src/image/filters.js:81"},{"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:101"},{"message":"Missing item type\nReturns a blank ImageData object.","line":" src/image/filters.js:121"},{"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:136"},{"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:189"},{"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:223"},{"message":"Missing item type\nSets the alpha channel to entirely opaque. No parameter is used.","line":" src/image/filters.js:246"},{"message":"Missing item type\nSets each pixel to its inverse value. No parameter is used.","line":" src/image/filters.js:262"},{"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:277"},{"message":"Missing item type\nreduces the bright areas in an image","line":" src/image/filters.js:309"},{"message":"Missing item type\nincreases the bright areas in an image","line":" src/image/filters.js:396"},{"message":"Missing item type\nThis module defines the p5 methods for the <a href=\"#/p5.Image\">p5.Image</a> 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:162"},{"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:252"},{"message":"Missing item type\nApply the current tint color to the input image, return the resulting\ncanvas.","line":" src/image/loading_displaying.js:565"},{"message":"Missing item type\nThis module defines the <a href=\"#/p5.Image\">p5.Image</a> 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:222"},{"message":"Missing item type\nHelper fxn for sharing pixel methods","line":" src/image/p5.Image.js:253"},{"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 <a href=\"#/p5/saveStrings\">saveStrings</a>, <a href=\"#/p5/saveJSON\">saveJSON</a>, <a href=\"#/p5/saveTable\">saveTable</a> etc.","line":" src/io/files.js:1789"},{"message":"Missing item type\nReturns a file extension, or another string\nif the provided parameter has no extension.","line":" src/io/files.js:1857"},{"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:1890"},{"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:1902"},{"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<a href=\"http://en.wikipedia.org/wiki/Comma-separated_values\">\ncomma separated values</a>, 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\n<a href=\"http://tools.ietf.org/html/rfc4180\">here</a>.\nTo load files, use the <a href=\"#/p5/loadTable\">loadTable</a> method.\nTo save tables to your computer, use the <a href=\"#/p5/save\">save</a> method\n or the <a href=\"#/p5/saveTable\">saveTable</a> method.\n\nPossible options include:\n<ul>\n<li>csv - parse the table as comma-separated values\n<li>tsv - parse the table as tab-separated values\n<li>header - this table has a header (title) row\n</ul>","line":" src/io/p5.Table.js:9"},{"message":"Missing item type\nMultiplies a vector by a scalar and returns a new vector.","line":" src/math/p5.Vector.js:2116"},{"message":"Missing item type\nRotates the vector (only 2D vectors) by the given angle, magnitude remains the same and returns a new vector.","line":" src/math/p5.Vector.js:2168"},{"message":"Missing item type\nDivides a vector by a scalar and returns a new vector.","line":" src/math/p5.Vector.js:2195"},{"message":"Missing item type\nCalculates the dot product of two vectors.","line":" src/math/p5.Vector.js:2248"},{"message":"Missing item type\nCalculates the cross product of two vectors.","line":" src/math/p5.Vector.js:2262"},{"message":"Missing item type\nCalculates the Euclidean distance between two points (considering a\npoint as a vector object).","line":" src/math/p5.Vector.js:2276"},{"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:2291"},{"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:2320"},{"message":"Missing item type\nNormalize the vector to length 1 (make it a unit vector).","line":" src/math/p5.Vector.js:2338"},{"message":"Missing item type\nHelper function to measure ascent and descent.","line":" src/typography/attributes.js:280"},{"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:273"},{"message":"Missing item type\nReturns an opentype path for the supplied string and position.","line":" src/typography/p5.Font.js:288"},{"message":"Missing item type","line":" src/webgl/3d_primitives.js:301"},{"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:955"},{"message":"Missing item type\nDraw a line given two points","line":" src/webgl/3d_primitives.js:1393"},{"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:179"},{"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:290"},{"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:317"},{"message":"Missing item type\nThis function matches the `query` at the provided `offset`","line":" src/webgl/loading.js:344"},{"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:356"},{"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:444"},{"message":"Missing item type","line":" src/webgl/material.js:812"},{"message":"Missing item type","line":" src/webgl/material.js:843"},{"message":"Missing item type\nCreate a 2D array for establishing stroke connections","line":" src/webgl/p5.Geometry.js:212"},{"message":"Missing item type\nCreate 4 vertices for each stroke line, two at the beginning position\nand two at the end position. These vertices are displaced relative to\nthat line's normal on the GPU","line":" src/webgl/p5.Geometry.js:233"},{"message":"Missing item type","line":" src/webgl/p5.Matrix.js:1"},{"message":"Missing item type\nPRIVATE","line":" src/webgl/p5.Matrix.js:722"},{"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:12"},{"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 <a href=\"#/p5/beginShape\">beginShape()</a> & de-activated when you call <a href=\"#/p5/endShape\">endShape()</a>.\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:106"},{"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:146"},{"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:180"},{"message":"Missing item type\nCalled from _processVertices() when applicable. This function tesselates immediateMode.geometry.","line":" src/webgl/p5.RendererGL.Immediate.js:225"},{"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:245"},{"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:280"},{"message":"Missing item type\nCalled from _drawImmediateFill(). Currently adds default normals which\nonly work for flat shapes.","line":" src/webgl/p5.RendererGL.Immediate.js:301"},{"message":"Missing item type\ninitializes buffer defaults. runs each time a new geometry is\nregistered","line":" src/webgl/p5.RendererGL.Retained.js:8"},{"message":"Missing item type\ncreates a buffers object that holds the WebGL render buffers\nfor a geometry.","line":" src/webgl/p5.RendererGL.Retained.js:59"},{"message":"Missing item type\nDraws buffers given a geometry key ID","line":" src/webgl/p5.RendererGL.Retained.js:97"},{"message":"Missing item type\nmodel view, projection, & normal\nmatrices","line":" src/webgl/p5.RendererGL.js:117"},{"message":"Missing item type\n[background description]","line":" src/webgl/p5.RendererGL.js:583"},{"message":"Missing item type\n[resize description]","line":" src/webgl/p5.RendererGL.js:857"},{"message":"Missing item type\nclears color and depth buffers\nwith r,g,b,a","line":" src/webgl/p5.RendererGL.js:887"},{"message":"Missing item type\n[translate description]","line":" src/webgl/p5.RendererGL.js:919"},{"message":"Missing item type\nScales the Model View Matrix by a vector","line":" src/webgl/p5.RendererGL.js:938"},{"message":"Missing item type\nturn a two dimensional array into one dimensional array","line":" src/webgl/p5.RendererGL.js:1359"},{"message":"Missing item type\nturn a p5.Vector Array into a one dimensional number array","line":" src/webgl/p5.RendererGL.js:1396"},{"message":"Missing item type\nensures that p5 is using a 3d renderer. throws an error if not.","line":" src/webgl/p5.RendererGL.js:1414"},{"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\nThe p5.Effect class is built\n \tusing Tone.js CrossFade","line":" lib/addons/p5.sound.js:293"},{"message":"Missing item type\nIn classes that extend\np5.Effect, connect effect nodes\nto the wet parameter","line":" lib/addons/p5.sound.js:300"},{"message":"Missing item type","line":" lib/addons/p5.sound.js:451"},{"message":"Missing item type\nUsed by Osc and Envelope to chain signal math","line":" lib/addons/p5.sound.js:688"},{"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:2721"},{"message":"Missing item type\nThis module has shims","line":" lib/addons/p5.sound.js:2969"},{"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:3105"},{"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:3555"},{"message":"Missing item type\nStop playback on all of this soundfile's sources.","line":" lib/addons/p5.sound.js:4056"},{"message":"Missing item type","line":" lib/addons/p5.sound.js:4590"},{"message":"Missing item type\nEQFilter extends p5.Filter with constraints\nnecessary for the p5.EQ","line":" lib/addons/p5.sound.js:8235"},{"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:9362"},{"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:9557"},{"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:10516"},{"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:10534"},{"message":"Missing item type\ncallback invoked when the recording is over","line":" lib/addons/p5.sound.js:11153"},{"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"],"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"],"VIDEO":["p5.createCapture"],"AUDIO":["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"],"IMAGE":["p5.textureMode"],"CLAMP":["p5.textureWrap"],"REPEAT":["p5.textureWrap"],"MIRROR":["p5.textureWrap"]}}
\ No newline at end of file

From a0a983632404bd563f6d6768a3e668d208de337e Mon Sep 17 00:00:00 2001
From: sanjay rajpoot <iamsanjayrajpoot@gmail.com>
Date: Mon, 29 Mar 2021 21:34:36 +0530
Subject: [PATCH 05/10] Changing files

---
 .github/workflows/deploy.yaml                 |  25 +
 .github/workflows/test.yml                    |  22 +-
 .travis.yml                                   |  12 -
 Gruntfile.js                                  |   5 +-
 src/data/data.yml                             |   2 +-
 .../en/10_Interaction/11_WeightLine.js        |  55 ++
 src/data/reference/en.json                    |  31 +-
 src/data/reference/es.json                    |  25 +-
 src/data/reference/ko.json                    |  25 +-
 src/data/reference/zh-Hans.json               |  25 +-
 src/templates/pages/reference/data.json       | 663 ++++++++++--------
 src/templates/pages/reference/data.min.json   |   2 +-
 12 files changed, 538 insertions(+), 354 deletions(-)
 create mode 100644 .github/workflows/deploy.yaml
 delete mode 100644 .travis.yml
 create mode 100644 src/data/examples/en/10_Interaction/11_WeightLine.js

diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
new file mode 100644
index 0000000000..b54408558c
--- /dev/null
+++ b/.github/workflows/deploy.yaml
@@ -0,0 +1,25 @@
+name: Test and Deploy
+
+on:
+  push:
+    branches: [ main ]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js
+      uses: actions/setup-node@v1
+      with:
+        node-version: "14.x"
+    - name: Install node modules
+      run: npm ci
+    - name: Build
+      run: npm run build
+    - name: Deploy 🚀
+      uses: JamesIves/github-pages-deploy-action@4.0.0
+      with:
+        branch: gh-pages # The branch the action should deploy to.
+        folder: dist/ # The folder the action should deploy.
+        single-commit: false # "false" here means "preserve git history on the gh-pages branch"
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index ebd18f91fd..9a36127654 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -1,29 +1,23 @@
 # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
 # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 
-name: Node.js CI
+name: Test
 
 on:
-  push:
-    branches: [ main ]
   pull_request:
     branches: [ main ]
 
 jobs:
   test:
-
     runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [14.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
     steps:
     - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
+    - name: Use Node.js
       uses: actions/setup-node@v1
       with:
-        node-version: ${{ matrix.node-version }}
-    - run: npm ci
-    - run: npm test
+        node-version: "14.x"
+    - name: Install node modules
+      run: npm ci
+    - name: Run tests
+      run: npm test
+      
\ No newline at end of file
diff --git a/.travis.yml b/.travis.yml
deleted file mode 100644
index 35b3cd5383..0000000000
--- a/.travis.yml
+++ /dev/null
@@ -1,12 +0,0 @@
-language: node_js
-node_js:
-  - "lts/*"
-
-deploy:
-  provider: pages
-  skip-cleanup: true
-  github-token: $GITHUB_TOKEN
-  keep-history: true
-  local-dir: dist/
-  on:
-    branch: main
diff --git a/Gruntfile.js b/Gruntfile.js
index f715c31d72..e17104a143 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -442,8 +442,11 @@ module.exports = function(grunt) {
   grunt.registerTask('move_dataJSON', function() {
     const dataJSON_p5js = 'tmp/p5.js/docs/reference/data.json';
     const dataJSON_p5jswebsite = 'src/templates/pages/reference/data.json';
-    // move the data.json from the cloned p5.js repository to the p5.js-website repository
+    const dataJSONmin_p5js = 'tmp/p5.js/docs/reference/data.min.json';
+    const dataJSONmin_p5jswebsite = 'src/templates/pages/reference/data.min.json';
+    // move the data.json files from the cloned p5.js repository to the p5.js-website repository
     fse.moveSync(dataJSON_p5js, dataJSON_p5jswebsite, { overwrite: true });
+    fse.moveSync(dataJSONmin_p5js, dataJSONmin_p5jswebsite, { overwrite: true });
     // delete the tmp folder that contained the p5.js repository
     fse.removeSync('tmp/');
   });
diff --git a/src/data/data.yml b/src/data/data.yml
index f6e0a9acca..e354d417b0 100644
--- a/src/data/data.yml
+++ b/src/data/data.yml
@@ -1,2 +1,2 @@
 title: p5.js
-version: 1.1.9
+version: 1.3.1
diff --git a/src/data/examples/en/10_Interaction/11_WeightLine.js b/src/data/examples/en/10_Interaction/11_WeightLine.js
new file mode 100644
index 0000000000..a455dcb781
--- /dev/null
+++ b/src/data/examples/en/10_Interaction/11_WeightLine.js
@@ -0,0 +1,55 @@
+/* 
+ * @name Weight Line
+ * @frame 710,400
+ * @description contributed by <a href="https://www.rit.edu/directory/wmhics-w-michelle-harris">
+   <b>Prof WM Harris,</b></a> using the random function with events to color/weight a line<br/>
+  <b>How</b> to use the random function with events to color/ weight a line
+	dependent on mouse location, left mouse button clicks, character key types, and
+	random key releases.<br/>
+  <b>Functions</b> are created for both the canvas set up as well as the creation of
+	the line. Depending on the action taken by the user the line can
+	vary in width and color. Left mouse button clicks result in a color
+	change to blue, while the typing of any character key will change
+	the color to turquoise, each resulting in a variable stroke weight;
+	the width of the former will be between 0 – 1 while the width of
+	the latter will be 0 – 5. The release of any key will result in a
+  random hue, saturation, and brightness change to the line.
+ */
+
+
+function setup() {
+    createCanvas(400, 400);
+    background("beige");
+    colorMode(HSB);
+  }
+  
+  function draw() {
+    //Line from prev pt to current pt
+    //of mouse position
+    line(mouseX, mouseY, pmouseX, pmouseY);
+  }
+  
+  //listen when we click the mouse
+  function mouseClicked() {
+    //weights 0 to 1
+    stroke("slateBlue");
+    strokeWeight(random());
+  
+    //what if want weights 0 to .4?
+    //strokeWeight( random(.4) );
+  }
+  
+  //listen when we release *any* key
+  function keyReleased() {
+    //color hue values between 20 and 145
+    //saturation 0 to 100
+    //brightness 80 to 100
+    stroke(random(20, 145), random(100), random(80, 100));
+  }
+  
+  //listen for only character keys
+  function keyTyped() {
+    //weights 0 to 5
+    stroke("turquoise");
+    strokeWeight(random(5));
+  }
\ No newline at end of file
diff --git a/src/data/reference/en.json b/src/data/reference/en.json
index 608d1b0272..6a6d7ffb0e 100644
--- a/src/data/reference/en.json
+++ b/src/data/reference/en.json
@@ -329,20 +329,20 @@
         "start": "Number: angle to start the arc, specified in radians",
         "stop": "Number: angle to stop the arc, specified in radians",
         "mode": "Constant: (Optional) optional parameter to determine the way of drawing  the arc. either CHORD, PIE or OPEN",
-        "detail": "Number: (Optional) optional parameter for WebGL mode only. This is to  specify the number of vertices that makes up the  perimeter of the arc. Default value is 25."
+        "detail": "Integer: (Optional) optional parameter for WebGL mode only. This is to  specify the number of vertices that makes up the  perimeter of the arc. Default value is 25. Won't  draw a stroke for a detail of more than 50."
       }
     },
     "ellipse": {
       "description": [
         "Draws an ellipse (oval) to the screen. By default, the first two parameters set the location of the center of the ellipse, and the third and fourth parameters set the shape's width and height. If no height is specified, the value of width is used for both the width and height. If a negative height or width is specified, the absolute value is taken. ",
-        "An ellipse with equal width and height is a circle.The origin may be changed with the <a href=\"#/p5/ellipseMode\">ellipseMode()</a> function."
+        "An ellipse with equal width and height is a circle. The origin may be changed with the <a href=\"#/p5/ellipseMode\">ellipseMode()</a> function."
       ],
       "params": {
         "x": "Number: x-coordinate of the center of ellipse.",
         "y": "Number: y-coordinate of the center of ellipse.",
         "w": "Number: width of the ellipse.",
         "h": "Number: (Optional) height of the ellipse.",
-        "detail": "Integer: number of radial sectors to draw (for WebGL mode)"
+        "detail": "Integer: (Optional) optional parameter for WebGL mode only. This is to  specify the number of vertices that makes up the  perimeter of the ellipse. Default value is 25. Won't  draw a stroke for a detail of more than 50."
       }
     },
     "circle": {
@@ -709,6 +709,11 @@
         "v": "Number: (Optional) the vertex's texture v-coordinate"
       }
     },
+    "VERSION": {
+      "description": [
+        "Version of this p5.js."
+      ]
+    },
     "P2D": {
       "description": [
         "The default, two-dimensional renderer."
@@ -934,7 +939,10 @@
     "windowResized": {
       "description": [
         "The <a href=\"#/p5/windowResized\">windowResized()</a> function is called once every time the browser window is resized. This is a good place to resize the canvas or do any other adjustments to accommodate the new window size."
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional Event callback argument."
+      }
     },
     "width": {
       "description": [
@@ -1745,18 +1753,27 @@
         "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 <a href=\"#/p5/keyTyped\">keyTyped()</a> 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 <a href=\"#/p5/keyTyped\">keyTyped()</a> (and <a href=\"#/p5/keyReleased\">keyReleased()</a> 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."
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional KeyboardEvent callback argument."
+      }
     },
     "keyReleased": {
       "description": [
         "The <a href=\"#/p5/keyReleased\">keyReleased()</a> function is called once every time a key is released. See <a href=\"#/p5/key\">key</a> and <a href=\"#/p5/keyCode\">keyCode</a> for more information. Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add \"return false\" to the end of the method."
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional KeyboardEvent callback argument."
+      }
     },
     "keyTyped": {
       "description": [
         "The <a href=\"#/p5/keyTyped\">keyTyped()</a> 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 <a href=\"#/p5/keyPressed\">keyPressed()</a> 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 <a href=\"#/p5/keyTyped\">keyTyped()</a> (and <a href=\"#/p5/keyReleased\">keyReleased()</a> 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."
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional KeyboardEvent callback argument."
+      }
     },
     "keyIsDown": {
       "description": [
diff --git a/src/data/reference/es.json b/src/data/reference/es.json
index cd3bcba34a..f033bac4b0 100644
--- a/src/data/reference/es.json
+++ b/src/data/reference/es.json
@@ -709,6 +709,11 @@
         "v": "Number: (Optional) the vertex's texture v-coordinate"
       }
     },
+    "VERSION": {
+      "description": [
+        "Version of this p5.js."
+      ]
+    },
     "P2D": {
       "description": [
         "The default, two-dimensional renderer."
@@ -934,7 +939,10 @@
     "windowResized": {
       "description": [
         "La función windowResized() es llamada cada vez que la ventana del navegador cambia de tamaño. Es un buen lugar para cambiar las dimensiones del lienzo o hacer cualquier otro ajuste necesario para acomodar las nuevas dimensiones de la ventana."
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional Event callback argument."
+      }
     },
     "width": {
       "description": [
@@ -1745,18 +1753,27 @@
         "",
         "",
         ""
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional KeyboardEvent callback argument."
+      }
     },
     "keyReleased": {
       "description": [
         "La función keyReleased() es llamada una vez cada vez que una tecla es soltada. Ver key y keyCode para más información. Los navegadores tienen distintos comportamientos por defecto asociados a distintos eventos gatillados por teclas. Para prevenir cualquier comportamiento por defecto para este evento, añade return false al final de este método."
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional KeyboardEvent callback argument."
+      }
     },
     "keyTyped": {
       "description": [
         "la función keyTyped es llamada cava vez que una tecla es presionada, excepto cuando son presionadas la steclas de acción como Ctrl, Shift y Alt, que son ignoradas. La tecla presionada más reciente será almacenada en la variable key. Por la forma en que los sistemas operativos manejan la repetición de teclas, mantener presionada una tecla puede causar múltiples llamadas a keyTyped() (y también keyReleased()). La tasa de repetición es definida por el sistema operativo y según cómo cada computador está configurado. Los navegadores tienen distintos comportamientos por defecto asociados a distintos eventos gatillados por teclas. Para prevenir cualquier comportamiento por defecto para este evento, añade return false al final de este método.",
         ""
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional KeyboardEvent callback argument."
+      }
     },
     "keyIsDown": {
       "description": [
diff --git a/src/data/reference/ko.json b/src/data/reference/ko.json
index 1ebce5db36..fe0d2cfa0c 100644
--- a/src/data/reference/ko.json
+++ b/src/data/reference/ko.json
@@ -709,6 +709,11 @@
         "v": "숫자: 꼭지점의 v좌표값(선택 사항)"
       }
     },
+    "VERSION": {
+      "description": [
+        "Version of this p5.js."
+      ]
+    },
     "P2D": {
       "description": [
         "The default, two-dimensional renderer."
@@ -934,7 +939,10 @@
     "windowResized": {
       "description": [
         "windowResized() 함수는 브라우저 창의 크기가 조정될 때마다 한 번씩 호출됩니다. 캔버스 크기를 재조정하거나 새 윈도우 화면의 크기에 맞춰 조정할 때 유용합니다."
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional Event callback argument."
+      }
     },
     "width": {
       "description": [
@@ -1745,18 +1753,27 @@
         "",
         "",
         ""
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional KeyboardEvent callback argument."
+      }
     },
     "keyReleased": {
       "description": [
         "keyReleased() 함수는 자판을 놓을 때마다 한 번씩 호출됩니다. 자세한 내용은 <a href='https://p5js.org/reference/#/p5/key'>key</a>와 <a href='https://p5js.org/reference/#/p5/keyCode'>keyCode</a>를 참고하세요.<br><br>자판키 입력을 통한 이벤트 발생이 브라우저 기본값으로 설정되어있는 경우, 메소드 말미에 \"return false\"를 넣어 브라우저 기본값 이벤트 발생을 방지할 수 있습니다."
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional KeyboardEvent callback argument."
+      }
     },
     "keyTyped": {
       "description": [
         "keyTyped() 함수는 자판을 누를 때마다 한번씩 호출되지만, 백스페이즈, 딜리트, 컨트롤, 쉬프트, 알트키는 무시됩니다. 언급된 자판키 입력 감지를 원할 경우, keyPressed() 함수를 사용하면 됩니다. 가장 마지막으로 입력된 자판키값이 key 변수에 저장됩니다.<br><br>컴퓨터 운영 체제의 자판키 입력 반복 처리 방식으로 인해, 자판키를 계속 누르면 keyTyped()를 여러 번 호출하는 경우가 발생할 수 있습니다. (keyReleased()도 마찬가지 입니다.) 반복 속도는 운영 체제와 컴퓨터 구성 방식마다 다릅니다.<br><br>자판키 입력을 통한 이벤트 발생이 브라우저 기본값으로 설정되어있는 경우, 메소드 말미에 \"return false\"를 넣어 브라우저 기본값 이벤트 발생을 방지할 수 있습니다.",
         ""
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional KeyboardEvent callback argument."
+      }
     },
     "keyIsDown": {
       "description": [
diff --git a/src/data/reference/zh-Hans.json b/src/data/reference/zh-Hans.json
index 6efea6e9c5..072a54e1f1 100644
--- a/src/data/reference/zh-Hans.json
+++ b/src/data/reference/zh-Hans.json
@@ -709,6 +709,11 @@
         "v": "数字：顶点的纹理 v 坐标"
       }
     },
+    "VERSION": {
+      "description": [
+        "Version of this p5.js."
+      ]
+    },
     "P2D": {
       "description": [
         "The default, two-dimensional renderer."
@@ -934,7 +939,10 @@
     "windowResized": {
       "description": [
         "windowResized() 函数将在每次浏览器窗口缩放时被调用。这是个适合缩放画布及或任何其他调整以符合新的窗口大小的地方。"
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional Event callback argument."
+      }
     },
     "width": {
       "description": [
@@ -1745,18 +1753,27 @@
         "",
         "",
         ""
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional KeyboardEvent callback argument."
+      }
     },
     "keyReleased": {
       "description": [
         "keyReleased() 函数将会在每一次任何键被释放时被调用。请查看 key 及 keyCode 以知更多详情。<br><br>不同浏览器可能会有不同附属于个别键盘事件的默认行为。以防止这些默认行为发生，只需在函数尾端加 “return false”。"
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional KeyboardEvent callback argument."
+      }
     },
     "keyTyped": {
       "description": [
         "keyTyped() 函数将会在每一次任何键被按下时被调用，可是会忽略操作键如 Ctrl、Shift 及 Alt。被按下的键的 keyCode 将被储存在 keyCode 变量内。<br><br>取决于操作系统如何处理按键重复，按住一个键可能使 keyTyped() （及 keyReleased()）被调用多过一次。重复的速度应操作系统及该电脑的设置而定。<br><br>不同浏览器可能会有不同附属于个别键盘事件的默认行为。以防止这些默认行为发生，只需在函数尾端加 “return false”。",
         ""
-      ]
+      ],
+      "params": {
+        "event": "Object: (Optional) optional KeyboardEvent callback argument."
+      }
     },
     "keyIsDown": {
       "description": [
diff --git a/src/templates/pages/reference/data.json b/src/templates/pages/reference/data.json
index b4629190d7..68c8222865 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.2.0",
+        "version": "1.3.1",
         "url": "https://github.com/processing/p5.js#readme"
     },
     "files": {
@@ -1107,7 +1107,7 @@
             "namespaces": {},
             "module": "DOM",
             "file": "src/dom/dom.js",
-            "line": 3487,
+            "line": 3490,
             "description": "<p>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 <a href=\"#/p5.Element\">p5.Element</a> that supports a range of HTML elements. See the\n<a href='https://github.com/processing/p5.js/wiki/Beyond-the-canvas'>\nbeyond the canvas tutorial</a> for a full overview of how this addon works.</p>\n<p>See <a href='https://github.com/processing/p5.js/wiki/Beyond-the-canvas'>tutorial: beyond the canvas</a>\nfor more info on how to use this library.</a></p>\n",
             "requires": [
                 "p5"
@@ -2132,7 +2132,7 @@
             "submodule": "DOM",
             "namespace": "",
             "file": "src/dom/dom.js",
-            "line": 2331,
+            "line": 2334,
             "description": "<p>Extends <a href=\"#/p5.Element\">p5.Element</a> to handle audio and video. In addition to the methods\nof <a href=\"#/p5.Element\">p5.Element</a>, it also contains methods for controlling media. It is not\ncalled directly, but <a href=\"#/p5.MediaElement\">p5.MediaElement</a>s are created by calling <a href=\"#/p5/createVideo\">createVideo</a>,\n<a href=\"#/p5/createAudio\">createAudio</a>, and <a href=\"#/p5/createCapture\">createCapture</a>.</p>\n",
             "is_constructor": 1,
             "params": [
@@ -2155,7 +2155,7 @@
             "submodule": "DOM",
             "namespace": "",
             "file": "src/dom/dom.js",
-            "line": 3487,
+            "line": 3490,
             "description": "<p>Base class for a file.\nUsed for Element.drop and createFileInput.</p>\n",
             "is_constructor": 1,
             "params": [
@@ -4652,8 +4652,8 @@
                 },
                 {
                     "name": "detail",
-                    "description": "<p>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.</p>\n",
-                    "type": "Number",
+                    "description": "<p>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.</p>\n",
+                    "type": "Integer",
                     "optional": true
                 }
             ],
@@ -4668,8 +4668,8 @@
         },
         {
             "file": "src/core/shape/2d_primitives.js",
-            "line": 231,
-            "description": "<p>Draws an ellipse (oval) to the screen. By default, the first two parameters\nset the location of the center of the ellipse, and the third and fourth\nparameters set the shape's width and height. If no height is specified, the\nvalue of width is used for both the width and height. If a negative height or\nwidth is specified, the absolute value is taken.</p>\n<p>An ellipse with equal width and height is a circle.The origin may be changed\nwith the <a href=\"#/p5/ellipseMode\">ellipseMode()</a> function.</p>\n",
+            "line": 232,
+            "description": "<p>Draws an ellipse (oval) to the screen. By default, the first two parameters\nset the location of the center of the ellipse, and the third and fourth\nparameters set the shape's width and height. If no height is specified, the\nvalue of width is used for both the width and height. If a negative height or\nwidth is specified, the absolute value is taken.</p>\n<p>An ellipse with equal width and height is a circle. The origin may be changed\nwith the <a href=\"#/p5/ellipseMode\">ellipseMode()</a> function.</p>\n",
             "itemtype": "method",
             "name": "ellipse",
             "chainable": 1,
@@ -4682,7 +4682,7 @@
             "submodule": "2D Primitives",
             "overloads": [
                 {
-                    "line": 231,
+                    "line": 232,
                     "params": [
                         {
                             "name": "x",
@@ -4709,7 +4709,7 @@
                     "chainable": 1
                 },
                 {
-                    "line": 258,
+                    "line": 259,
                     "params": [
                         {
                             "name": "x",
@@ -4733,8 +4733,9 @@
                         },
                         {
                             "name": "detail",
-                            "description": "<p>number of radial sectors to draw (for WebGL mode)</p>\n",
-                            "type": "Integer"
+                            "description": "<p>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.</p>\n",
+                            "type": "Integer",
+                            "optional": true
                         }
                     ]
                 }
@@ -4742,7 +4743,7 @@
         },
         {
             "file": "src/core/shape/2d_primitives.js",
-            "line": 271,
+            "line": 275,
             "description": "<p>Draws a circle to the screen. A circle is a simple closed shape. It is the set\nof all points in a plane that are at a given distance from a given point,\nthe centre. This function is a special case of the ellipse() function, where\nthe width and height of the ellipse are the same. Height and width of the\nellipse correspond to the diameter of the circle. By default, the first two\nparameters set the location of the centre of the circle, the third sets the\ndiameter of the circle.</p>\n",
             "itemtype": "method",
             "name": "circle",
@@ -4774,7 +4775,7 @@
         },
         {
             "file": "src/core/shape/2d_primitives.js",
-            "line": 335,
+            "line": 339,
             "description": "<p>Draws a line (a direct path between two points) to the screen. If called with\nonly 4 parameters, it will draw a line in 2D with a default width of 1 pixel.\nThis width can be modified by using the <a href=\"#/p5/strokeWeight\">\nstrokeWeight()</a> function. A line cannot be filled, therefore the <a\nhref=\"#/p5/fill\">fill()</a> function will not affect the color of a line. So to\ncolor a line, use the <a href=\"#/p5/stroke\">stroke()</a> function.</p>\n",
             "itemtype": "method",
             "name": "line",
@@ -4788,7 +4789,7 @@
             "submodule": "2D Primitives",
             "overloads": [
                 {
-                    "line": 335,
+                    "line": 339,
                     "params": [
                         {
                             "name": "x1",
@@ -4814,7 +4815,7 @@
                     "chainable": 1
                 },
                 {
-                    "line": 371,
+                    "line": 375,
                     "params": [
                         {
                             "name": "x1",
@@ -4853,7 +4854,7 @@
         },
         {
             "file": "src/core/shape/2d_primitives.js",
-            "line": 396,
+            "line": 400,
             "description": "<p>Draws a point, a coordinate in space at the dimension of one pixel.\nThe first parameter is the horizontal value for the point, the second\nparam is the vertical value for the point. The color of the point is\nchanged with the <a href=\"#/p5/stroke\">stroke()</a> function. The size of the point\ncan be changed with the <a href=\"#/p5/strokeWeight\">strokeWeight()</a> function.</p>\n",
             "itemtype": "method",
             "name": "point",
@@ -4867,7 +4868,7 @@
             "submodule": "2D Primitives",
             "overloads": [
                 {
-                    "line": 396,
+                    "line": 400,
                     "params": [
                         {
                             "name": "x",
@@ -4889,7 +4890,7 @@
                     "chainable": 1
                 },
                 {
-                    "line": 446,
+                    "line": 450,
                     "params": [
                         {
                             "name": "coordinate_vector",
@@ -4903,7 +4904,7 @@
         },
         {
             "file": "src/core/shape/2d_primitives.js",
-            "line": 474,
+            "line": 478,
             "description": "<p>Draws a quad on the canvas. A quad is a quadrilateral, a four sided polygon. It is\nsimilar to a rectangle, but the angles between its edges are not\nconstrained to ninety degrees. The first pair of parameters (x1,y1)\nsets the first vertex and the subsequent pairs should proceed\nclockwise or counter-clockwise around the defined shape.\nz-arguments only work when quad() is used in WEBGL mode.</p>\n",
             "itemtype": "method",
             "name": "quad",
@@ -4917,7 +4918,7 @@
             "submodule": "2D Primitives",
             "overloads": [
                 {
-                    "line": 474,
+                    "line": 478,
                     "params": [
                         {
                             "name": "x1",
@@ -4975,7 +4976,7 @@
                     "chainable": 1
                 },
                 {
-                    "line": 504,
+                    "line": 508,
                     "params": [
                         {
                             "name": "x1",
@@ -5056,7 +5057,7 @@
         },
         {
             "file": "src/core/shape/2d_primitives.js",
-            "line": 548,
+            "line": 552,
             "description": "<p>Draws a rectangle on the canvas. A rectangle is a four-sided closed shape with\nevery angle at ninety degrees. By default, the first two parameters set\nthe location of the upper-left corner, the third sets the width, and the\nfourth sets the height. The way these parameters are interpreted, may be\nchanged with the <a href=\"#/p5/rectMode\">rectMode()</a> function.</p>\n<p>The fifth, sixth, seventh and eighth parameters, if specified,\ndetermine corner radius for the top-left, top-right, lower-right and\nlower-left corners, respectively. An omitted corner radius parameter is set\nto the value of the previously specified radius value in the parameter list.</p>\n",
             "itemtype": "method",
             "name": "rect",
@@ -5070,7 +5071,7 @@
             "submodule": "2D Primitives",
             "overloads": [
                 {
-                    "line": 548,
+                    "line": 552,
                     "params": [
                         {
                             "name": "x",
@@ -5121,7 +5122,7 @@
                     "chainable": 1
                 },
                 {
-                    "line": 599,
+                    "line": 603,
                     "params": [
                         {
                             "name": "x",
@@ -5162,7 +5163,7 @@
         },
         {
             "file": "src/core/shape/2d_primitives.js",
-            "line": 614,
+            "line": 618,
             "description": "<p>Draws a square to the screen. A square is a four-sided shape with every angle\nat ninety degrees, and equal side size. This function is a special case of the\nrect() function, where the width and height are the same, and the parameter\nis called \"s\" for side size. By default, the first two parameters set the\nlocation of the upper-left corner, the third sets the side size of the square.\nThe way these parameters are interpreted, may be changed with the <a\nhref=\"#/p5/rectMode\">rectMode()</a> function.</p>\n<p>The fourth, fifth, sixth and seventh parameters, if specified,\ndetermine corner radius for the top-left, top-right, lower-right and\nlower-left corners, respectively. An omitted corner radius parameter is set\nto the value of the previously specified radius value in the parameter list.</p>\n",
             "itemtype": "method",
             "name": "square",
@@ -5218,7 +5219,7 @@
         },
         {
             "file": "src/core/shape/2d_primitives.js",
-            "line": 703,
+            "line": 707,
             "description": "<p>Draws a triangle to the canvas. A triangle is a plane created by connecting\nthree points. The first two arguments specify the first point, the middle two\narguments specify the second point, and the last two arguments specify the\nthird point.</p>\n",
             "itemtype": "method",
             "name": "triangle",
@@ -6288,7 +6289,19 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 10,
+            "line": 9,
+            "description": "<p>Version of this p5.js.</p>\n",
+            "itemtype": "property",
+            "name": "VERSION",
+            "type": "String",
+            "final": 1,
+            "class": "p5",
+            "module": "Constants",
+            "submodule": "Constants"
+        },
+        {
+            "file": "src/core/constants.js",
+            "line": 18,
             "description": "<p>The default, two-dimensional renderer.</p>\n",
             "itemtype": "property",
             "name": "P2D",
@@ -6300,7 +6313,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 16,
+            "line": 24,
             "description": "<p>One of the two render modes in p5.js: P2D (default renderer) and WEBGL\nEnables 3D render by introducing the third dimension: Z</p>\n",
             "itemtype": "property",
             "name": "WEBGL",
@@ -6312,7 +6325,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 25,
+            "line": 33,
             "itemtype": "property",
             "name": "ARROW",
             "type": "String",
@@ -6323,7 +6336,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 30,
+            "line": 38,
             "itemtype": "property",
             "name": "CROSS",
             "type": "String",
@@ -6334,7 +6347,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 35,
+            "line": 43,
             "itemtype": "property",
             "name": "HAND",
             "type": "String",
@@ -6345,7 +6358,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 40,
+            "line": 48,
             "itemtype": "property",
             "name": "MOVE",
             "type": "String",
@@ -6356,7 +6369,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 45,
+            "line": 53,
             "itemtype": "property",
             "name": "TEXT",
             "type": "String",
@@ -6367,7 +6380,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 50,
+            "line": 58,
             "itemtype": "property",
             "name": "WAIT",
             "type": "String",
@@ -6378,7 +6391,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 58,
+            "line": 66,
             "description": "<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n",
             "itemtype": "property",
             "name": "HALF_PI",
@@ -6394,7 +6407,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 76,
+            "line": 84,
             "description": "<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n",
             "itemtype": "property",
             "name": "PI",
@@ -6410,7 +6423,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 94,
+            "line": 102,
             "description": "<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n",
             "itemtype": "property",
             "name": "QUARTER_PI",
@@ -6426,7 +6439,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 112,
+            "line": 120,
             "description": "<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n",
             "itemtype": "property",
             "name": "TAU",
@@ -6442,7 +6455,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 130,
+            "line": 138,
             "description": "<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n",
             "itemtype": "property",
             "name": "TWO_PI",
@@ -6458,7 +6471,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 148,
+            "line": 156,
             "description": "<p>Constant to be used with <a href=\"#/p5/angleMode\">angleMode()</a> function, to set the mode which\np5.js interprates and calculates angles (either DEGREES or RADIANS).</p>\n",
             "itemtype": "property",
             "name": "DEGREES",
@@ -6473,7 +6486,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 162,
+            "line": 170,
             "description": "<p>Constant to be used with <a href=\"#/p5/angleMode\">angleMode()</a> function, to set the mode which\np5.js interprates and calculates angles (either RADIANS or DEGREES).</p>\n",
             "itemtype": "property",
             "name": "RADIANS",
@@ -6488,7 +6501,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 180,
+            "line": 188,
             "itemtype": "property",
             "name": "CORNER",
             "type": "String",
@@ -6499,7 +6512,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 185,
+            "line": 193,
             "itemtype": "property",
             "name": "CORNERS",
             "type": "String",
@@ -6510,7 +6523,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 190,
+            "line": 198,
             "itemtype": "property",
             "name": "RADIUS",
             "type": "String",
@@ -6521,7 +6534,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 195,
+            "line": 203,
             "itemtype": "property",
             "name": "RIGHT",
             "type": "String",
@@ -6532,7 +6545,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 200,
+            "line": 208,
             "itemtype": "property",
             "name": "LEFT",
             "type": "String",
@@ -6543,7 +6556,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 205,
+            "line": 213,
             "itemtype": "property",
             "name": "CENTER",
             "type": "String",
@@ -6554,7 +6567,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 210,
+            "line": 218,
             "itemtype": "property",
             "name": "TOP",
             "type": "String",
@@ -6565,7 +6578,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 215,
+            "line": 223,
             "itemtype": "property",
             "name": "BOTTOM",
             "type": "String",
@@ -6576,7 +6589,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 220,
+            "line": 228,
             "itemtype": "property",
             "name": "BASELINE",
             "type": "String",
@@ -6588,7 +6601,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 226,
+            "line": 234,
             "itemtype": "property",
             "name": "POINTS",
             "type": "Number",
@@ -6600,7 +6613,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 232,
+            "line": 240,
             "itemtype": "property",
             "name": "LINES",
             "type": "Number",
@@ -6612,7 +6625,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 238,
+            "line": 246,
             "itemtype": "property",
             "name": "LINE_STRIP",
             "type": "Number",
@@ -6624,7 +6637,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 244,
+            "line": 252,
             "itemtype": "property",
             "name": "LINE_LOOP",
             "type": "Number",
@@ -6636,7 +6649,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 250,
+            "line": 258,
             "itemtype": "property",
             "name": "TRIANGLES",
             "type": "Number",
@@ -6648,7 +6661,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 256,
+            "line": 264,
             "itemtype": "property",
             "name": "TRIANGLE_FAN",
             "type": "Number",
@@ -6660,7 +6673,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 262,
+            "line": 270,
             "itemtype": "property",
             "name": "TRIANGLE_STRIP",
             "type": "Number",
@@ -6672,7 +6685,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 268,
+            "line": 276,
             "itemtype": "property",
             "name": "QUADS",
             "type": "String",
@@ -6683,7 +6696,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 273,
+            "line": 281,
             "itemtype": "property",
             "name": "QUAD_STRIP",
             "type": "String",
@@ -6695,7 +6708,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 279,
+            "line": 287,
             "itemtype": "property",
             "name": "TESS",
             "type": "String",
@@ -6707,7 +6720,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 285,
+            "line": 293,
             "itemtype": "property",
             "name": "CLOSE",
             "type": "String",
@@ -6718,7 +6731,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 290,
+            "line": 298,
             "itemtype": "property",
             "name": "OPEN",
             "type": "String",
@@ -6729,7 +6742,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 295,
+            "line": 303,
             "itemtype": "property",
             "name": "CHORD",
             "type": "String",
@@ -6740,7 +6753,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 300,
+            "line": 308,
             "itemtype": "property",
             "name": "PIE",
             "type": "String",
@@ -6751,7 +6764,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 305,
+            "line": 313,
             "itemtype": "property",
             "name": "PROJECT",
             "type": "String",
@@ -6763,7 +6776,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 311,
+            "line": 319,
             "itemtype": "property",
             "name": "SQUARE",
             "type": "String",
@@ -6775,7 +6788,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 317,
+            "line": 325,
             "itemtype": "property",
             "name": "ROUND",
             "type": "String",
@@ -6786,7 +6799,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 322,
+            "line": 330,
             "itemtype": "property",
             "name": "BEVEL",
             "type": "String",
@@ -6797,7 +6810,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 327,
+            "line": 335,
             "itemtype": "property",
             "name": "MITER",
             "type": "String",
@@ -6808,7 +6821,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 334,
+            "line": 342,
             "itemtype": "property",
             "name": "RGB",
             "type": "String",
@@ -6819,7 +6832,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 339,
+            "line": 347,
             "description": "<p>HSB (hue, saturation, brightness) is a type of color model.\nYou can learn more about it at\n<a href=\"https://learnui.design/blog/the-hsb-color-system-practicioners-primer.html\">HSB</a>.</p>\n",
             "itemtype": "property",
             "name": "HSB",
@@ -6831,7 +6844,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 348,
+            "line": 356,
             "itemtype": "property",
             "name": "HSL",
             "type": "String",
@@ -6842,7 +6855,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 355,
+            "line": 363,
             "description": "<p>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 <a href=\"/#/p5.Element/size\">size</a> function as AUTO, at a time.</p>\n",
             "itemtype": "property",
             "name": "AUTO",
@@ -6854,7 +6867,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 365,
+            "line": 373,
             "itemtype": "property",
             "name": "ALT",
             "type": "Number",
@@ -6865,7 +6878,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 371,
+            "line": 379,
             "itemtype": "property",
             "name": "BACKSPACE",
             "type": "Number",
@@ -6876,7 +6889,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 376,
+            "line": 384,
             "itemtype": "property",
             "name": "CONTROL",
             "type": "Number",
@@ -6887,7 +6900,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 381,
+            "line": 389,
             "itemtype": "property",
             "name": "DELETE",
             "type": "Number",
@@ -6898,7 +6911,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 386,
+            "line": 394,
             "itemtype": "property",
             "name": "DOWN_ARROW",
             "type": "Number",
@@ -6909,7 +6922,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 391,
+            "line": 399,
             "itemtype": "property",
             "name": "ENTER",
             "type": "Number",
@@ -6920,7 +6933,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 396,
+            "line": 404,
             "itemtype": "property",
             "name": "ESCAPE",
             "type": "Number",
@@ -6931,7 +6944,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 401,
+            "line": 409,
             "itemtype": "property",
             "name": "LEFT_ARROW",
             "type": "Number",
@@ -6942,7 +6955,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 406,
+            "line": 414,
             "itemtype": "property",
             "name": "OPTION",
             "type": "Number",
@@ -6953,7 +6966,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 411,
+            "line": 419,
             "itemtype": "property",
             "name": "RETURN",
             "type": "Number",
@@ -6964,7 +6977,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 416,
+            "line": 424,
             "itemtype": "property",
             "name": "RIGHT_ARROW",
             "type": "Number",
@@ -6975,7 +6988,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 421,
+            "line": 429,
             "itemtype": "property",
             "name": "SHIFT",
             "type": "Number",
@@ -6986,7 +6999,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 426,
+            "line": 434,
             "itemtype": "property",
             "name": "TAB",
             "type": "Number",
@@ -6997,7 +7010,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 431,
+            "line": 439,
             "itemtype": "property",
             "name": "UP_ARROW",
             "type": "Number",
@@ -7008,7 +7021,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 438,
+            "line": 446,
             "itemtype": "property",
             "name": "BLEND",
             "type": "String",
@@ -7020,7 +7033,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 444,
+            "line": 452,
             "itemtype": "property",
             "name": "REMOVE",
             "type": "String",
@@ -7032,7 +7045,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 450,
+            "line": 458,
             "itemtype": "property",
             "name": "ADD",
             "type": "String",
@@ -7044,7 +7057,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 458,
+            "line": 466,
             "itemtype": "property",
             "name": "DARKEST",
             "type": "String",
@@ -7055,7 +7068,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 463,
+            "line": 471,
             "itemtype": "property",
             "name": "LIGHTEST",
             "type": "String",
@@ -7067,7 +7080,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 469,
+            "line": 477,
             "itemtype": "property",
             "name": "DIFFERENCE",
             "type": "String",
@@ -7078,7 +7091,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 474,
+            "line": 482,
             "itemtype": "property",
             "name": "SUBTRACT",
             "type": "String",
@@ -7089,7 +7102,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 479,
+            "line": 487,
             "itemtype": "property",
             "name": "EXCLUSION",
             "type": "String",
@@ -7100,7 +7113,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 484,
+            "line": 492,
             "itemtype": "property",
             "name": "MULTIPLY",
             "type": "String",
@@ -7111,7 +7124,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 489,
+            "line": 497,
             "itemtype": "property",
             "name": "SCREEN",
             "type": "String",
@@ -7122,7 +7135,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 494,
+            "line": 502,
             "itemtype": "property",
             "name": "REPLACE",
             "type": "String",
@@ -7134,7 +7147,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 500,
+            "line": 508,
             "itemtype": "property",
             "name": "OVERLAY",
             "type": "String",
@@ -7145,7 +7158,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 505,
+            "line": 513,
             "itemtype": "property",
             "name": "HARD_LIGHT",
             "type": "String",
@@ -7156,7 +7169,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 510,
+            "line": 518,
             "itemtype": "property",
             "name": "SOFT_LIGHT",
             "type": "String",
@@ -7167,7 +7180,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 515,
+            "line": 523,
             "itemtype": "property",
             "name": "DODGE",
             "type": "String",
@@ -7179,7 +7192,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 521,
+            "line": 529,
             "itemtype": "property",
             "name": "BURN",
             "type": "String",
@@ -7191,7 +7204,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 529,
+            "line": 537,
             "itemtype": "property",
             "name": "THRESHOLD",
             "type": "String",
@@ -7202,7 +7215,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 534,
+            "line": 542,
             "itemtype": "property",
             "name": "GRAY",
             "type": "String",
@@ -7213,7 +7226,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 539,
+            "line": 547,
             "itemtype": "property",
             "name": "OPAQUE",
             "type": "String",
@@ -7224,7 +7237,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 544,
+            "line": 552,
             "itemtype": "property",
             "name": "INVERT",
             "type": "String",
@@ -7235,7 +7248,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 549,
+            "line": 557,
             "itemtype": "property",
             "name": "POSTERIZE",
             "type": "String",
@@ -7246,7 +7259,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 554,
+            "line": 562,
             "itemtype": "property",
             "name": "DILATE",
             "type": "String",
@@ -7257,7 +7270,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 559,
+            "line": 567,
             "itemtype": "property",
             "name": "ERODE",
             "type": "String",
@@ -7268,7 +7281,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 564,
+            "line": 572,
             "itemtype": "property",
             "name": "BLUR",
             "type": "String",
@@ -7279,7 +7292,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 571,
+            "line": 579,
             "itemtype": "property",
             "name": "NORMAL",
             "type": "String",
@@ -7290,7 +7303,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 576,
+            "line": 584,
             "itemtype": "property",
             "name": "ITALIC",
             "type": "String",
@@ -7301,7 +7314,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 581,
+            "line": 589,
             "itemtype": "property",
             "name": "BOLD",
             "type": "String",
@@ -7312,7 +7325,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 586,
+            "line": 594,
             "itemtype": "property",
             "name": "BOLDITALIC",
             "type": "String",
@@ -7323,7 +7336,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 598,
+            "line": 606,
             "itemtype": "property",
             "name": "LINEAR",
             "type": "String",
@@ -7334,7 +7347,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 603,
+            "line": 611,
             "itemtype": "property",
             "name": "QUADRATIC",
             "type": "String",
@@ -7345,7 +7358,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 608,
+            "line": 616,
             "itemtype": "property",
             "name": "BEZIER",
             "type": "String",
@@ -7356,7 +7369,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 613,
+            "line": 621,
             "itemtype": "property",
             "name": "CURVE",
             "type": "String",
@@ -7367,7 +7380,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 620,
+            "line": 628,
             "itemtype": "property",
             "name": "STROKE",
             "type": "String",
@@ -7378,7 +7391,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 625,
+            "line": 633,
             "itemtype": "property",
             "name": "FILL",
             "type": "String",
@@ -7389,7 +7402,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 630,
+            "line": 638,
             "itemtype": "property",
             "name": "TEXTURE",
             "type": "String",
@@ -7400,7 +7413,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 635,
+            "line": 643,
             "itemtype": "property",
             "name": "IMMEDIATE",
             "type": "String",
@@ -7411,7 +7424,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 643,
+            "line": 651,
             "itemtype": "property",
             "name": "IMAGE",
             "type": "String",
@@ -7422,7 +7435,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 651,
+            "line": 659,
             "itemtype": "property",
             "name": "NEAREST",
             "type": "String",
@@ -7433,7 +7446,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 656,
+            "line": 664,
             "itemtype": "property",
             "name": "REPEAT",
             "type": "String",
@@ -7444,7 +7457,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 661,
+            "line": 669,
             "itemtype": "property",
             "name": "CLAMP",
             "type": "String",
@@ -7455,7 +7468,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 666,
+            "line": 674,
             "itemtype": "property",
             "name": "MIRROR",
             "type": "String",
@@ -7466,7 +7479,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 673,
+            "line": 681,
             "itemtype": "property",
             "name": "LANDSCAPE",
             "type": "String",
@@ -7477,7 +7490,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 678,
+            "line": 686,
             "itemtype": "property",
             "name": "PORTRAIT",
             "type": "String",
@@ -7488,7 +7501,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 688,
+            "line": 696,
             "itemtype": "property",
             "name": "GRID",
             "type": "String",
@@ -7499,7 +7512,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 694,
+            "line": 702,
             "itemtype": "property",
             "name": "AXES",
             "type": "String",
@@ -7510,7 +7523,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 700,
+            "line": 708,
             "itemtype": "property",
             "name": "LABEL",
             "type": "String",
@@ -7521,7 +7534,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 705,
+            "line": 713,
             "itemtype": "property",
             "name": "FALLBACK",
             "type": "String",
@@ -7752,6 +7765,14 @@
             "description": "<p>The <a href=\"#/p5/windowResized\">windowResized()</a> function is called once\nevery time the browser window is resized. This is a good place to resize the\ncanvas or do any other adjustments to accommodate the new window size.</p>\n",
             "itemtype": "method",
             "name": "windowResized",
+            "params": [
+                {
+                    "name": "event",
+                    "description": "<p>optional Event callback argument.</p>\n",
+                    "type": "Object",
+                    "optional": true
+                }
+            ],
             "example": [
                 "\n<div class=\"norender\"><code>\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</code></div>"
             ],
@@ -7762,7 +7783,7 @@
         },
         {
             "file": "src/core/environment.js",
-            "line": 475,
+            "line": 476,
             "description": "<p>System variable that stores the width of the drawing canvas. This value\nis set by the first parameter of the <a href=\"#/p5/createCanvas\">createCanvas()</a> function.\nFor example, the function call createCanvas(320, 240) sets the width\nvariable to the value 320. The value of width defaults to 100 if\n<a href=\"#/p5/createCanvas\">createCanvas()</a> is not used in a program.</p>\n",
             "itemtype": "property",
             "name": "width",
@@ -7774,7 +7795,7 @@
         },
         {
             "file": "src/core/environment.js",
-            "line": 487,
+            "line": 488,
             "description": "<p>System variable that stores the height of the drawing canvas. This value\nis set by the second parameter of the <a href=\"#/p5/createCanvas\">createCanvas()</a> function. For\nexample, the function call createCanvas(320, 240) sets the height\nvariable to the value 240. The value of height defaults to 100 if\n<a href=\"#/p5/createCanvas\">createCanvas()</a> is not used in a program.</p>\n",
             "itemtype": "property",
             "name": "height",
@@ -7786,7 +7807,7 @@
         },
         {
             "file": "src/core/environment.js",
-            "line": 499,
+            "line": 500,
             "description": "<p>If argument is given, sets the sketch to fullscreen or not based on the\nvalue of the argument. If no argument is given, returns the current\nfullscreen state. Note that due to browser restrictions this can only\nbe called on user input, for example, on mouse press like the example\nbelow.</p>\n",
             "itemtype": "method",
             "name": "fullscreen",
@@ -7812,7 +7833,7 @@
         },
         {
             "file": "src/core/environment.js",
-            "line": 549,
+            "line": 550,
             "description": "<p>Sets the pixel scaling for high pixel density displays. By default\npixel density is set to match display density, call pixelDensity(1)\nto turn this off. Calling <a href=\"#/p5/pixelDensity\">pixelDensity()</a> with no arguments returns\nthe current pixel density of the sketch.</p>\n",
             "itemtype": "method",
             "name": "pixelDensity",
@@ -7826,7 +7847,7 @@
             "submodule": "Environment",
             "overloads": [
                 {
-                    "line": 549,
+                    "line": 550,
                     "params": [
                         {
                             "name": "val",
@@ -7837,7 +7858,7 @@
                     "chainable": 1
                 },
                 {
-                    "line": 585,
+                    "line": 586,
                     "params": [],
                     "return": {
                         "description": "current pixel density of the sketch",
@@ -7848,7 +7869,7 @@
         },
         {
             "file": "src/core/environment.js",
-            "line": 604,
+            "line": 605,
             "description": "<p>Returns the pixel density of the current display the sketch is running on.</p>\n",
             "itemtype": "method",
             "name": "displayDensity",
@@ -7866,7 +7887,7 @@
         },
         {
             "file": "src/core/environment.js",
-            "line": 659,
+            "line": 660,
             "description": "<p>Gets the current URL. Note: when using the\np5 Editor, this will return an empty object because the sketch\nis embedded in an iframe. It will work correctly if you view the\nsketch using sketch the edtior's present or share URLs.</p>\n",
             "itemtype": "method",
             "name": "getURL",
@@ -7884,7 +7905,7 @@
         },
         {
             "file": "src/core/environment.js",
-            "line": 690,
+            "line": 691,
             "description": "<p>Gets the current URL path as an array. Note: when using the\np5 Editor, this will return an empty object because the sketch\nis embedded in an iframe. It will work correctly if you view the\nsketch using sketch the edtior's present or share URLs.</p>\n",
             "itemtype": "method",
             "name": "getURLPath",
@@ -7902,7 +7923,7 @@
         },
         {
             "file": "src/core/environment.js",
-            "line": 712,
+            "line": 713,
             "description": "<p>Gets the current URL params as an Object. Note: when using the\np5 Editor, this will return an empty object because the sketch\nis embedded in an iframe. It will work correctly if you view the\nsketch using sketch the edtior's present or share URLs.</p>\n",
             "itemtype": "method",
             "name": "getURLParams",
@@ -8479,7 +8500,7 @@
         },
         {
             "file": "src/core/p5.Renderer.js",
-            "line": 365,
+            "line": 344,
             "description": "<p>Helper fxn to check font type (system or otf)</p>\n",
             "class": "p5.Renderer",
             "module": "Rendering",
@@ -8487,7 +8508,7 @@
         },
         {
             "file": "src/core/p5.Renderer.js",
-            "line": 417,
+            "line": 396,
             "description": "<p>Helper fxn to measure ascent and descent.\nAdapted from <a href=\"http://stackoverflow.com/a/25355178\">http://stackoverflow.com/a/25355178</a></p>\n",
             "class": "p5.Renderer",
             "module": "Rendering",
@@ -9123,7 +9144,7 @@
         },
         {
             "file": "src/core/transform.js",
-            "line": 167,
+            "line": 168,
             "description": "<p>Replaces the current matrix with the identity matrix.</p>\n",
             "itemtype": "method",
             "name": "resetMatrix",
@@ -9138,7 +9159,7 @@
         },
         {
             "file": "src/core/transform.js",
-            "line": 192,
+            "line": 193,
             "description": "<p>Rotates a shape by the amount specified by the angle parameter. This\nfunction accounts for <a href=\"#/p5/angleMode\">angleMode</a>, so angles\ncan be entered in either RADIANS or DEGREES.</p>\n<p>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 accumulates the effect. For example, calling\nrotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI).\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n<p>Technically, <a href=\"#/p5/rotate\">rotate()</a> multiplies the current transformation matrix\nby a rotation matrix. This function can be further controlled by\nthe <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a>.</p>\n",
             "itemtype": "method",
             "name": "rotate",
@@ -9166,7 +9187,7 @@
         },
         {
             "file": "src/core/transform.js",
-            "line": 231,
+            "line": 232,
             "description": "<p>Rotates a shape around X axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.</p>\n<p>Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n",
             "itemtype": "method",
             "name": "rotateX",
@@ -9188,7 +9209,7 @@
         },
         {
             "file": "src/core/transform.js",
-            "line": 267,
+            "line": 268,
             "description": "<p>Rotates a shape around Y axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.</p>\n<p>Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n",
             "itemtype": "method",
             "name": "rotateY",
@@ -9210,7 +9231,7 @@
         },
         {
             "file": "src/core/transform.js",
-            "line": 303,
+            "line": 304,
             "description": "<p>Rotates a shape around Z axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.</p>\n<p>This method works in WEBGL mode only.</p>\n<p>Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n",
             "itemtype": "method",
             "name": "rotateZ",
@@ -9232,7 +9253,7 @@
         },
         {
             "file": "src/core/transform.js",
-            "line": 341,
+            "line": 342,
             "description": "<p>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%.</p>\n<p>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 <a href=\"#/p5/scale\">scale()</a> is called\nwithin <a href=\"#/p5/draw\">draw()</a>, the transformation is reset when the loop begins again.</p>\n<p>Using this function with the z parameter is only available in WEBGL mode.\nThis function can be further controlled with <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a>.</p>\n",
             "itemtype": "method",
             "name": "scale",
@@ -9246,7 +9267,7 @@
             "submodule": "Transform",
             "overloads": [
                 {
-                    "line": 341,
+                    "line": 342,
                     "params": [
                         {
                             "name": "s",
@@ -9269,7 +9290,7 @@
                     "chainable": 1
                 },
                 {
-                    "line": 385,
+                    "line": 386,
                     "params": [
                         {
                             "name": "scales",
@@ -9283,7 +9304,7 @@
         },
         {
             "file": "src/core/transform.js",
-            "line": 415,
+            "line": 416,
             "description": "<p>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.</p>\n<p>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 <a href=\"#/p5/shearX\">shearX()</a> is called within the <a href=\"#/p5/draw\">draw()</a>,\nthe transformation is reset when the loop begins again.</p>\n<p>Technically, <a href=\"#/p5/shearX\">shearX()</a> multiplies the current\ntransformation matrix by a rotation matrix. This function can be further\ncontrolled by the <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions.</p>\n",
             "itemtype": "method",
             "name": "shearX",
@@ -9305,7 +9326,7 @@
         },
         {
             "file": "src/core/transform.js",
-            "line": 454,
+            "line": 455,
             "description": "<p>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.</p>\n<p>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\n<a href=\"#/p5/shearY\">shearY()</a> is called within the <a href=\"#/p5/draw\">draw()</a>, the transformation is reset when\nthe loop begins again.</p>\n<p>Technically, <a href=\"#/p5/shearY\">shearY()</a> multiplies the current transformation matrix by a\nrotation matrix. This function can be further controlled by the\n<a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions.</p>\n",
             "itemtype": "method",
             "name": "shearY",
@@ -9327,7 +9348,7 @@
         },
         {
             "file": "src/core/transform.js",
-            "line": 493,
+            "line": 494,
             "description": "<p>Specifies an amount to displace objects within the display window.\nThe x parameter specifies left/right translation, the y parameter\nspecifies up/down translation.</p>\n<p>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 <a href=\"#/p5/translate\">translate()</a> is called within <a href=\"#/p5/draw\">draw()</a>, the\ntransformation is reset when the loop begins again. This function can be\nfurther controlled by using <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a>.</p>\n",
             "itemtype": "method",
             "name": "translate",
@@ -9341,7 +9362,7 @@
             "submodule": "Transform",
             "overloads": [
                 {
-                    "line": 493,
+                    "line": 494,
                     "params": [
                         {
                             "name": "x",
@@ -9363,7 +9384,7 @@
                     "chainable": 1
                 },
                 {
-                    "line": 546,
+                    "line": 547,
                     "params": [
                         {
                             "name": "vector",
@@ -11043,7 +11064,7 @@
                 "type": "String"
             },
             "example": [
-                "\n<div><code class='norender'>\nlet myDiv = createDiv('I like pandas.');\nmyDiv.style('font-size', '18px');\nmyDiv.style('color', '#ff0000');\n</code></div>\n<div><code class='norender'>\nlet col = color(25, 23, 200, 50);\nlet button = createButton('button');\nbutton.style('background-color', col);\nbutton.position(10, 10);\n</code></div>\n<div><code class='norender'>\nlet myDiv;\nfunction setup() {\n  background(200);\n  myDiv = createDiv('I like gray.');\n  myDiv.position(20, 20);\n}\n\nfunction draw() {\n  myDiv.style('font-size', mouseX + 'px');\n}\n</code></div>"
+                "\n<div><code class='norender'>\nlet myDiv = createDiv('I like pandas.');\nmyDiv.style('font-size', '18px');\nmyDiv.style('color', '#ff0000');\nmyDiv.position(0, 0);\n</code></div>\n<div><code class='norender'>\nlet col = color(25, 23, 200, 50);\nlet button = createButton('button');\nbutton.style('background-color', col);\nbutton.position(0, 0);\n</code></div>\n<div><code class='norender'>\nlet myDiv, fontSize;\nfunction setup() {\n  background(200);\n  myDiv = createDiv('I like gray.');\n  myDiv.position(0, 0);\n  myDiv.style('z-index', 10);\n}\n\nfunction draw() {\n  fontSize = min(mouseX, 90);\n  myDiv.style('font-size', fontSize + 'px');\n}\n</code></div>"
             ],
             "class": "p5.Element",
             "module": "DOM",
@@ -11064,7 +11085,7 @@
                     }
                 },
                 {
-                    "line": 1877,
+                    "line": 1880,
                     "params": [
                         {
                             "name": "property",
@@ -11087,7 +11108,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 1934,
+            "line": 1937,
             "description": "<p>Adds a new attribute or changes the value of an existing attribute\n on the specified element. If no value is specified, returns the\n value of the given attribute, or null if attribute is not set.</p>\n",
             "itemtype": "method",
             "name": "attribute",
@@ -11103,7 +11124,7 @@
             "submodule": "DOM",
             "overloads": [
                 {
-                    "line": 1934,
+                    "line": 1937,
                     "params": [],
                     "return": {
                         "description": "value of attribute",
@@ -11111,7 +11132,7 @@
                     }
                 },
                 {
-                    "line": 1949,
+                    "line": 1952,
                     "params": [
                         {
                             "name": "attr",
@@ -11130,7 +11151,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 1978,
+            "line": 1981,
             "description": "<p>Removes an attribute on the specified element.</p>\n",
             "itemtype": "method",
             "name": "removeAttribute",
@@ -11151,7 +11172,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2023,
+            "line": 2026,
             "description": "<p>Either returns the value of the element if no arguments\ngiven, or sets the value of the element.</p>\n",
             "itemtype": "method",
             "name": "value",
@@ -11167,7 +11188,7 @@
             "submodule": "DOM",
             "overloads": [
                 {
-                    "line": 2023,
+                    "line": 2026,
                     "params": [],
                     "return": {
                         "description": "value of the element",
@@ -11175,7 +11196,7 @@
                     }
                 },
                 {
-                    "line": 2053,
+                    "line": 2056,
                     "params": [
                         {
                             "name": "value",
@@ -11189,7 +11210,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2069,
+            "line": 2072,
             "description": "<p>Shows the current element. Essentially, setting display:block for the style.</p>\n",
             "itemtype": "method",
             "name": "show",
@@ -11203,7 +11224,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2087,
+            "line": 2090,
             "description": "<p>Hides the current element. Essentially, setting display:none for the style.</p>\n",
             "itemtype": "method",
             "name": "hide",
@@ -11217,7 +11238,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2103,
+            "line": 2106,
             "description": "<p>Sets the width and height of the element. AUTO can be used to\n only adjust one dimension at a time. If no arguments are given, it\n returns the width and height of the element in an object. In case of\n elements which need to be loaded, such as images, it is recommended\n to call the function after the element has finished loading.</p>\n",
             "itemtype": "method",
             "name": "size",
@@ -11233,7 +11254,7 @@
             "submodule": "DOM",
             "overloads": [
                 {
-                    "line": 2103,
+                    "line": 2106,
                     "params": [],
                     "return": {
                         "description": "the width and height of the element in an object",
@@ -11241,7 +11262,7 @@
                     }
                 },
                 {
-                    "line": 2127,
+                    "line": 2130,
                     "params": [
                         {
                             "name": "w",
@@ -11261,7 +11282,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2184,
+            "line": 2187,
             "description": "<p>Removes the element, stops all media streams, and deregisters all listeners.</p>\n",
             "itemtype": "method",
             "name": "remove",
@@ -11274,7 +11295,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2222,
+            "line": 2225,
             "description": "<p>Registers a callback that gets called every time a file that is\ndropped on the element has been loaded.\np5 will load every dropped file into memory and pass it as a p5.File object to the callback.\nMultiple files dropped at the same time will result in multiple calls to the callback.</p>\n<p>You can optionally pass a second callback which will be registered to the raw\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/Events/drop\">drop</a> event.\nThe callback will thus be provided the original\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/DragEvent\">DragEvent</a>.\nDropping multiple files at the same time will trigger the second callback once per drop,\nwhereas the first callback will trigger for each loaded file.</p>\n",
             "itemtype": "method",
             "name": "drop",
@@ -11302,7 +11323,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2354,
+            "line": 2357,
             "description": "<p>Path to the media element source.</p>\n",
             "itemtype": "property",
             "name": "src",
@@ -11319,7 +11340,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2420,
+            "line": 2423,
             "description": "<p>Play an HTML5 media element.</p>\n",
             "itemtype": "method",
             "name": "play",
@@ -11333,7 +11354,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2484,
+            "line": 2487,
             "description": "<p>Stops an HTML5 media element (sets current time to zero).</p>\n",
             "itemtype": "method",
             "name": "stop",
@@ -11347,7 +11368,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2548,
+            "line": 2551,
             "description": "<p>Pauses an HTML5 media element.</p>\n",
             "itemtype": "method",
             "name": "pause",
@@ -11361,7 +11382,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2610,
+            "line": 2613,
             "description": "<p>Set 'loop' to true for an HTML5 media element, and starts playing.</p>\n",
             "itemtype": "method",
             "name": "loop",
@@ -11375,7 +11396,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2666,
+            "line": 2669,
             "description": "<p>Set 'loop' to false for an HTML5 media element. Element will stop\nwhen it reaches the end.</p>\n",
             "itemtype": "method",
             "name": "noLoop",
@@ -11389,7 +11410,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2732,
+            "line": 2735,
             "description": "<p>Set HTML5 media element to autoplay or not. If no argument is specified, by\ndefault it will autoplay.</p>\n",
             "itemtype": "method",
             "name": "autoplay",
@@ -11411,7 +11432,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2799,
+            "line": 2802,
             "description": "<p>Sets volume for this HTML5 media element. If no argument is given,\nreturns the current volume.</p>\n",
             "itemtype": "method",
             "name": "volume",
@@ -11427,7 +11448,7 @@
             "submodule": "DOM",
             "overloads": [
                 {
-                    "line": 2799,
+                    "line": 2802,
                     "params": [],
                     "return": {
                         "description": "current volume",
@@ -11435,7 +11456,7 @@
                     }
                 },
                 {
-                    "line": 2872,
+                    "line": 2875,
                     "params": [
                         {
                             "name": "val",
@@ -11449,7 +11470,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2885,
+            "line": 2888,
             "description": "<p>If no arguments are given, returns the current playback speed of the\nelement. The speed parameter sets the speed where 2.0 will play the\nelement twice as fast, 0.5 will play at half the speed, and -1 will play\nthe element in normal speed in reverse.(Note that not all browsers support\nbackward playback and even if they do, playback might not be smooth.)</p>\n",
             "itemtype": "method",
             "name": "speed",
@@ -11465,7 +11486,7 @@
             "submodule": "DOM",
             "overloads": [
                 {
-                    "line": 2885,
+                    "line": 2888,
                     "params": [],
                     "return": {
                         "description": "current playback speed of the element",
@@ -11473,7 +11494,7 @@
                     }
                 },
                 {
-                    "line": 2957,
+                    "line": 2960,
                     "params": [
                         {
                             "name": "speed",
@@ -11487,7 +11508,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2974,
+            "line": 2977,
             "description": "<p>If no arguments are given, returns the current time of the element.\nIf an argument is given the current time of the element is set to it.</p>\n",
             "itemtype": "method",
             "name": "time",
@@ -11503,7 +11524,7 @@
             "submodule": "DOM",
             "overloads": [
                 {
-                    "line": 2974,
+                    "line": 2977,
                     "params": [],
                     "return": {
                         "description": "current time (in seconds)",
@@ -11511,7 +11532,7 @@
                     }
                 },
                 {
-                    "line": 3019,
+                    "line": 3022,
                     "params": [
                         {
                             "name": "time",
@@ -11525,7 +11546,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3033,
+            "line": 3036,
             "description": "<p>Returns the duration of the HTML5 media element.</p>\n",
             "itemtype": "method",
             "name": "duration",
@@ -11542,7 +11563,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3155,
+            "line": 3158,
             "description": "<p>Schedule an event to be called when the audio or video\nelement reaches the end. If the element is looping,\nthis will not be called. The element is passed in\nas the argument to the onended callback.</p>\n",
             "itemtype": "method",
             "name": "onended",
@@ -11563,14 +11584,14 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3186,
+            "line": 3189,
             "class": "p5.MediaElement",
             "module": "DOM",
             "submodule": "DOM"
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3188,
+            "line": 3191,
             "description": "<p>Send the audio output of this element to a specified audioNode or\np5.sound object. If no element is provided, connects to p5's main\noutput. That connection is established when this method is first called.\nAll connections are removed by the .disconnect() method.</p>\n<p>This method is meant to be used with the p5.sound.js addon library.</p>\n",
             "itemtype": "method",
             "name": "connect",
@@ -11587,7 +11608,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3237,
+            "line": 3240,
             "description": "<p>Disconnect all Web Audio routing, including to main output.\nThis is useful if you want to re-route the output through\naudio effects, for example.</p>\n",
             "itemtype": "method",
             "name": "disconnect",
@@ -11597,14 +11618,14 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3252,
+            "line": 3255,
             "class": "p5.MediaElement",
             "module": "DOM",
             "submodule": "DOM"
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3254,
+            "line": 3257,
             "description": "<p>Show the default MediaElement controls, as determined by the web browser.</p>\n",
             "itemtype": "method",
             "name": "showControls",
@@ -11617,7 +11638,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3285,
+            "line": 3288,
             "description": "<p>Hide the default mediaElement controls.</p>\n",
             "itemtype": "method",
             "name": "hideControls",
@@ -11630,14 +11651,14 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3314,
+            "line": 3317,
             "class": "p5.MediaElement",
             "module": "DOM",
             "submodule": "DOM"
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3325,
+            "line": 3328,
             "description": "<p>Schedule events to trigger every time a MediaElement\n(audio/video) reaches a playback cue point.</p>\n<p>Accepts a callback function, a time (in seconds) at which to trigger\nthe callback, and an optional parameter for the callback.</p>\n<p>Time will be passed as the first parameter to the callback function,\nand param will be the second parameter.</p>\n",
             "itemtype": "method",
             "name": "addCue",
@@ -11672,7 +11693,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3388,
+            "line": 3391,
             "description": "<p>Remove a callback based on its ID. The ID is returned by the\naddCue method.</p>\n",
             "itemtype": "method",
             "name": "removeCue",
@@ -11692,7 +11713,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3430,
+            "line": 3433,
             "description": "<p>Remove all of the callbacks that had originally been scheduled\nvia the addCue method.</p>\n",
             "itemtype": "method",
             "name": "clearCues",
@@ -11712,7 +11733,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3496,
+            "line": 3499,
             "description": "<p>Underlying File object. All normal File methods can be called on this.</p>\n",
             "itemtype": "property",
             "name": "file",
@@ -11722,7 +11743,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3508,
+            "line": 3511,
             "description": "<p>File type (image, text, etc.)</p>\n",
             "itemtype": "property",
             "name": "type",
@@ -11732,7 +11753,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3514,
+            "line": 3517,
             "description": "<p>File subtype (usually the file extension jpg, png, xml, etc.)</p>\n",
             "itemtype": "property",
             "name": "subtype",
@@ -11742,7 +11763,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3520,
+            "line": 3523,
             "description": "<p>File name</p>\n",
             "itemtype": "property",
             "name": "name",
@@ -11752,7 +11773,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3526,
+            "line": 3529,
             "description": "<p>File size</p>\n",
             "itemtype": "property",
             "name": "size",
@@ -11762,7 +11783,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3533,
+            "line": 3536,
             "description": "<p>URL string containing either image data, the text contents of the file or\na parsed object if file is JSON and p5.XML if XML</p>\n",
             "itemtype": "property",
             "name": "data",
@@ -12116,6 +12137,14 @@
             "description": "<p>The <a href=\"#/p5/keyPressed\">keyPressed()</a> function is called once every time a key is pressed. The\nkeyCode for the key that was pressed is stored in the <a href=\"#/p5/keyCode\">keyCode</a> variable.</p>\n<p>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.</p>\n<p>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 <a href=\"#/p5/keyTyped\">keyTyped()</a> to read the key variable, in which the\ncase of the variable will be distinguished.</p>\n<p>Because of how operating systems handle key repeats, holding down a key\nmay cause multiple calls to <a href=\"#/p5/keyTyped\">keyTyped()</a> (and <a href=\"#/p5/keyReleased\">keyReleased()</a> as well). The\nrate of repeat is set by the operating system and how each computer is\nconfigured.<br><br>\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.</p>\n",
             "itemtype": "method",
             "name": "keyPressed",
+            "params": [
+                {
+                    "name": "event",
+                    "description": "<p>optional KeyboardEvent callback argument.</p>\n",
+                    "type": "Object",
+                    "optional": true
+                }
+            ],
             "example": [
                 "\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyPressed() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyPressed() {\n  if (keyCode === LEFT_ARROW) {\n    value = 255;\n  } else if (keyCode === RIGHT_ARROW) {\n    value = 0;\n  }\n}\n</code>\n</div>\n<div class=\"norender\">\n<code>\nfunction keyPressed() {\n  // Do something\n  return false; // prevent any default behaviour\n}\n</code>\n</div>"
             ],
@@ -12126,10 +12155,18 @@
         },
         {
             "file": "src/events/keyboard.js",
-            "line": 189,
+            "line": 190,
             "description": "<p>The <a href=\"#/p5/keyReleased\">keyReleased()</a> function is called once every time a key is released.\nSee <a href=\"#/p5/key\">key</a> and <a href=\"#/p5/keyCode\">keyCode</a> for more information.<br><br>\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.</p>\n",
             "itemtype": "method",
             "name": "keyReleased",
+            "params": [
+                {
+                    "name": "event",
+                    "description": "<p>optional KeyboardEvent callback argument.</p>\n",
+                    "type": "Object",
+                    "optional": true
+                }
+            ],
             "example": [
                 "\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyReleased() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n  return false; // prevent any default behavior\n}\n</code>\n</div>"
             ],
@@ -12140,10 +12177,18 @@
         },
         {
             "file": "src/events/keyboard.js",
-            "line": 241,
+            "line": 243,
             "description": "<p>The <a href=\"#/p5/keyTyped\">keyTyped()</a> 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 <a href=\"#/p5/keyPressed\">keyPressed()</a> function instead.\nThe most recent key typed will be stored in the key variable.</p>\n<p>Because of how operating systems handle key repeats, holding down a key\nwill cause multiple calls to <a href=\"#/p5/keyTyped\">keyTyped()</a> (and <a href=\"#/p5/keyReleased\">keyReleased()</a> as well). The\nrate of repeat is set by the operating system and how each computer is\nconfigured.<br><br>\nBrowsers may have different default behaviors attached to various key\nevents. To prevent any default behavior for this event, add \"return false\"\nto the end of the method.</p>\n",
             "itemtype": "method",
             "name": "keyTyped",
+            "params": [
+                {
+                    "name": "event",
+                    "description": "<p>optional KeyboardEvent callback argument.</p>\n",
+                    "type": "Object",
+                    "optional": true
+                }
+            ],
             "example": [
                 "\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyTyped() {\n  if (key === 'a') {\n    value = 255;\n  } else if (key === 'b') {\n    value = 0;\n  }\n  // uncomment to prevent any default behavior\n  // return false;\n}\n</code>\n</div>"
             ],
@@ -12154,7 +12199,7 @@
         },
         {
             "file": "src/events/keyboard.js",
-            "line": 295,
+            "line": 298,
             "description": "<p>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.</p>\n",
             "class": "p5",
             "module": "Events",
@@ -12162,7 +12207,7 @@
         },
         {
             "file": "src/events/keyboard.js",
-            "line": 305,
+            "line": 308,
             "description": "<p>The <a href=\"#/p5/keyIsDown\">keyIsDown()</a> 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 <a href=\"#/p5/keyCode\">keyCode</a> names listed\n<a href=\"http://p5js.org/reference/#p5/keyCode\">here</a>.</p>\n",
             "itemtype": "method",
             "name": "keyIsDown",
@@ -12822,7 +12867,7 @@
         },
         {
             "file": "src/image/loading_displaying.js",
-            "line": 153,
+            "line": 162,
             "description": "<p>Helper function for loading GIF-based images</p>\n",
             "class": "p5",
             "module": "Image",
@@ -12830,7 +12875,7 @@
         },
         {
             "file": "src/image/loading_displaying.js",
-            "line": 260,
+            "line": 269,
             "description": "<p>Draw an image to the p5.js canvas.</p>\n<p>This function can be used with different numbers of parameters. The\nsimplest use requires only three parameters: img, x, and y—where (x, y) is\nthe position of the image. Two more parameters can optionally be added to\nspecify the width and height of the image.</p>\n<p>This function can also be used with all eight Number parameters. To\ndifferentiate between all these parameters, p5.js uses the language of\n\"destination rectangle\" (which corresponds to \"dx\", \"dy\", etc.) and \"source\nimage\" (which corresponds to \"sx\", \"sy\", etc.) below. Specifying the\n\"source image\" dimensions can be useful when you want to display a\nsubsection of the source image instead of the whole thing. Here's a diagram\nto explain further:\n<img src=\"assets/drawImage.png\"></img></p>\n",
             "itemtype": "method",
             "name": "image",
@@ -12843,7 +12888,7 @@
             "submodule": "Loading & Displaying",
             "overloads": [
                 {
-                    "line": 260,
+                    "line": 269,
                     "params": [
                         {
                             "name": "img",
@@ -12875,7 +12920,7 @@
                     ]
                 },
                 {
-                    "line": 347,
+                    "line": 356,
                     "params": [
                         {
                             "name": "img",
@@ -12930,7 +12975,7 @@
         },
         {
             "file": "src/image/loading_displaying.js",
-            "line": 430,
+            "line": 439,
             "description": "<p>Sets the fill value for displaying images. Images can be tinted to\nspecified colors or made transparent by including an alpha value.</p>\n<p>To apply transparency to an image without affecting its color, use\nwhite as the tint color and specify an alpha value. For instance,\ntint(255, 128) will make an image 50% transparent (assuming the default\nalpha range of 0-255, which can be changed with <a href=\"#/p5/colorMode\">colorMode()</a>).</p>\n<p>The value for the gray parameter must be less than or equal to the current\nmaximum value as specified by <a href=\"#/p5/colorMode\">colorMode()</a>. The default maximum value is\n255.</p>\n",
             "itemtype": "method",
             "name": "tint",
@@ -12943,7 +12988,7 @@
             "submodule": "Loading & Displaying",
             "overloads": [
                 {
-                    "line": 430,
+                    "line": 439,
                     "params": [
                         {
                             "name": "v1",
@@ -12969,7 +13014,7 @@
                     ]
                 },
                 {
-                    "line": 501,
+                    "line": 510,
                     "params": [
                         {
                             "name": "value",
@@ -12979,7 +13024,7 @@
                     ]
                 },
                 {
-                    "line": 506,
+                    "line": 515,
                     "params": [
                         {
                             "name": "gray",
@@ -12995,7 +13040,7 @@
                     ]
                 },
                 {
-                    "line": 512,
+                    "line": 521,
                     "params": [
                         {
                             "name": "values",
@@ -13005,7 +13050,7 @@
                     ]
                 },
                 {
-                    "line": 518,
+                    "line": 527,
                     "params": [
                         {
                             "name": "color",
@@ -13018,7 +13063,7 @@
         },
         {
             "file": "src/image/loading_displaying.js",
-            "line": 528,
+            "line": 537,
             "description": "<p>Removes the current fill value for displaying images and reverts to\ndisplaying images with their original hues.</p>\n",
             "itemtype": "method",
             "name": "noTint",
@@ -13032,7 +13077,7 @@
         },
         {
             "file": "src/image/loading_displaying.js",
-            "line": 592,
+            "line": 601,
             "description": "<p>Set image mode. Modifies the location from which images are drawn by\nchanging the way in which parameters given to <a href=\"#/p5/image\">image()</a> are interpreted.\nThe default mode is imageMode(CORNER), which interprets the second and\nthird parameters of <a href=\"#/p5/image\">image()</a> as the upper-left corner of the image. If\ntwo additional parameters are specified, they are used to set the image's\nwidth and height.</p>\n<p>imageMode(CORNERS) interprets the second and third parameters of <a href=\"#/p5/image\">image()</a>\nas the location of one corner, and the fourth and fifth parameters as the\nopposite corner.</p>\n<p>imageMode(CENTER) interprets the second and third parameters of <a href=\"#/p5/image\">image()</a>\nas the image's center point. If two additional parameters are specified,\nthey are used to set the image's width and height.</p>\n",
             "itemtype": "method",
             "name": "imageMode",
@@ -19608,6 +19653,12 @@
                             "name": "ns",
                             "description": "<p>values to parse</p>\n",
                             "type": "Array"
+                        },
+                        {
+                            "name": "radix",
+                            "description": "",
+                            "type": "Integer",
+                            "optional": true
                         }
                     ],
                     "return": {
@@ -19619,7 +19670,7 @@
         },
         {
             "file": "src/utilities/conversion.js",
-            "line": 87,
+            "line": 88,
             "description": "<p>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.</p>\n",
             "itemtype": "method",
             "name": "str",
@@ -19643,7 +19694,7 @@
         },
         {
             "file": "src/utilities/conversion.js",
-            "line": 113,
+            "line": 114,
             "description": "<p>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.</p>\n",
             "itemtype": "method",
             "name": "boolean",
@@ -19667,7 +19718,7 @@
         },
         {
             "file": "src/utilities/conversion.js",
-            "line": 145,
+            "line": 146,
             "description": "<p>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.</p>\n",
             "itemtype": "method",
             "name": "byte",
@@ -19683,7 +19734,7 @@
             "submodule": "Conversion",
             "overloads": [
                 {
-                    "line": 145,
+                    "line": 146,
                     "params": [
                         {
                             "name": "n",
@@ -19697,7 +19748,7 @@
                     }
                 },
                 {
-                    "line": 167,
+                    "line": 168,
                     "params": [
                         {
                             "name": "ns",
@@ -19714,7 +19765,7 @@
         },
         {
             "file": "src/utilities/conversion.js",
-            "line": 181,
+            "line": 182,
             "description": "<p>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.</p>\n",
             "itemtype": "method",
             "name": "char",
@@ -19730,7 +19781,7 @@
             "submodule": "Conversion",
             "overloads": [
                 {
-                    "line": 181,
+                    "line": 182,
                     "params": [
                         {
                             "name": "n",
@@ -19744,7 +19795,7 @@
                     }
                 },
                 {
-                    "line": 200,
+                    "line": 201,
                     "params": [
                         {
                             "name": "ns",
@@ -19761,7 +19812,7 @@
         },
         {
             "file": "src/utilities/conversion.js",
-            "line": 215,
+            "line": 216,
             "description": "<p>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.</p>\n",
             "itemtype": "method",
             "name": "unchar",
@@ -19777,7 +19828,7 @@
             "submodule": "Conversion",
             "overloads": [
                 {
-                    "line": 215,
+                    "line": 216,
                     "params": [
                         {
                             "name": "n",
@@ -19791,7 +19842,7 @@
                     }
                 },
                 {
-                    "line": 231,
+                    "line": 232,
                     "params": [
                         {
                             "name": "ns",
@@ -19808,7 +19859,7 @@
         },
         {
             "file": "src/utilities/conversion.js",
-            "line": 244,
+            "line": 245,
             "description": "<p>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.</p>\n",
             "itemtype": "method",
             "name": "hex",
@@ -19824,7 +19875,7 @@
             "submodule": "Conversion",
             "overloads": [
                 {
-                    "line": 244,
+                    "line": 245,
                     "params": [
                         {
                             "name": "n",
@@ -19844,7 +19895,7 @@
                     }
                 },
                 {
-                    "line": 264,
+                    "line": 265,
                     "params": [
                         {
                             "name": "ns",
@@ -19867,7 +19918,7 @@
         },
         {
             "file": "src/utilities/conversion.js",
-            "line": 294,
+            "line": 295,
             "description": "<p>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.</p>\n",
             "itemtype": "method",
             "name": "unhex",
@@ -19883,7 +19934,7 @@
             "submodule": "Conversion",
             "overloads": [
                 {
-                    "line": 294,
+                    "line": 295,
                     "params": [
                         {
                             "name": "n",
@@ -19897,7 +19948,7 @@
                     }
                 },
                 {
-                    "line": 310,
+                    "line": 311,
                     "params": [
                         {
                             "name": "ns",
@@ -28091,35 +28142,35 @@
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/shape/2d_primitives.js:231"
+            "line": " src/core/shape/2d_primitives.js:232"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/shape/2d_primitives.js:271"
+            "line": " src/core/shape/2d_primitives.js:275"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/shape/2d_primitives.js:335"
+            "line": " src/core/shape/2d_primitives.js:339"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/shape/2d_primitives.js:396"
+            "line": " src/core/shape/2d_primitives.js:400"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/shape/2d_primitives.js:474"
+            "line": " src/core/shape/2d_primitives.js:478"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/shape/2d_primitives.js:548"
+            "line": " src/core/shape/2d_primitives.js:552"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/shape/2d_primitives.js:614"
+            "line": " src/core/shape/2d_primitives.js:618"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/shape/2d_primitives.js:703"
+            "line": " src/core/shape/2d_primitives.js:707"
         },
         {
             "message": "unknown tag: alt",
@@ -28223,23 +28274,23 @@
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/constants.js:58"
+            "line": " src/core/constants.js:66"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/constants.js:76"
+            "line": " src/core/constants.js:84"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/constants.js:94"
+            "line": " src/core/constants.js:102"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/constants.js:112"
+            "line": " src/core/constants.js:120"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/constants.js:130"
+            "line": " src/core/constants.js:138"
         },
         {
             "message": "unknown tag: alt",
@@ -28291,35 +28342,35 @@
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/environment.js:499"
+            "line": " src/core/environment.js:500"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/environment.js:549"
+            "line": " src/core/environment.js:550"
         },
         {
             "message": "replacing incorrect tag: returns with return",
-            "line": " src/core/environment.js:585"
+            "line": " src/core/environment.js:586"
         },
         {
             "message": "replacing incorrect tag: returns with return",
-            "line": " src/core/environment.js:604"
+            "line": " src/core/environment.js:605"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/environment.js:604"
+            "line": " src/core/environment.js:605"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/environment.js:659"
+            "line": " src/core/environment.js:660"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/environment.js:690"
+            "line": " src/core/environment.js:691"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/environment.js:712"
+            "line": " src/core/environment.js:713"
         },
         {
             "message": "replacing incorrect tag: function with method",
@@ -28551,39 +28602,39 @@
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/transform.js:167"
+            "line": " src/core/transform.js:168"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/transform.js:192"
+            "line": " src/core/transform.js:193"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/transform.js:231"
+            "line": " src/core/transform.js:232"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/transform.js:267"
+            "line": " src/core/transform.js:268"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/transform.js:303"
+            "line": " src/core/transform.js:304"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/transform.js:341"
+            "line": " src/core/transform.js:342"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/transform.js:415"
+            "line": " src/core/transform.js:416"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/transform.js:454"
+            "line": " src/core/transform.js:455"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/transform.js:493"
+            "line": " src/core/transform.js:494"
         },
         {
             "message": "unknown tag: alt",
@@ -28623,11 +28674,11 @@
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/dom/dom.js:2222"
+            "line": " src/dom/dom.js:2225"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/dom/dom.js:2732"
+            "line": " src/dom/dom.js:2735"
         },
         {
             "message": "unknown tag: alt",
@@ -28707,15 +28758,15 @@
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/events/keyboard.js:189"
+            "line": " src/events/keyboard.js:190"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/events/keyboard.js:241"
+            "line": " src/events/keyboard.js:243"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/events/keyboard.js:305"
+            "line": " src/events/keyboard.js:308"
         },
         {
             "message": "unknown tag: alt",
@@ -28835,23 +28886,23 @@
         },
         {
             "message": "replacing incorrect tag: returns with return",
-            "line": " src/image/loading_displaying.js:243"
+            "line": " src/image/loading_displaying.js:252"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/image/loading_displaying.js:260"
+            "line": " src/image/loading_displaying.js:269"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/image/loading_displaying.js:430"
+            "line": " src/image/loading_displaying.js:439"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/image/loading_displaying.js:528"
+            "line": " src/image/loading_displaying.js:537"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/image/loading_displaying.js:592"
+            "line": " src/image/loading_displaying.js:601"
         },
         {
             "message": "unknown tag: alt",
@@ -29779,11 +29830,11 @@
         },
         {
             "message": "Missing item type\nHelper fxn to check font type (system or otf)",
-            "line": " src/core/p5.Renderer.js:365"
+            "line": " src/core/p5.Renderer.js:344"
         },
         {
             "message": "Missing item type\nHelper fxn to measure ascent and descent.\nAdapted from http://stackoverflow.com/a/25355178",
-            "line": " src/core/p5.Renderer.js:417"
+            "line": " src/core/p5.Renderer.js:396"
         },
         {
             "message": "Missing item type\np5.Renderer2D\nThe 2D graphics canvas renderer class.\nextends p5.Renderer",
@@ -29851,15 +29902,15 @@
         },
         {
             "message": "Missing item type",
-            "line": " src/dom/dom.js:3186"
+            "line": " src/dom/dom.js:3189"
         },
         {
             "message": "Missing item type",
-            "line": " src/dom/dom.js:3252"
+            "line": " src/dom/dom.js:3255"
         },
         {
             "message": "Missing item type",
-            "line": " src/dom/dom.js:3314"
+            "line": " src/dom/dom.js:3317"
         },
         {
             "message": "Missing item type\n_updatePAccelerations updates the pAcceleration values",
@@ -29867,11 +29918,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:295"
+            "line": " src/events/keyboard.js:298"
         },
         {
             "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:381"
+            "line": " src/events/keyboard.js:384"
         },
         {
             "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.",
@@ -29883,51 +29934,51 @@
         },
         {
             "message": "Missing item type\nReturns a 32 bit number containing ARGB data at ith pixel in the\n1D array containing pixels data.",
-            "line": " src/image/filters.js:44"
+            "line": " src/image/filters.js:60"
         },
         {
             "message": "Missing item type\nModifies pixels RGBA values to values contained in the data object.",
-            "line": " src/image/filters.js:65"
+            "line": " src/image/filters.js:81"
         },
         {
             "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:85"
+            "line": " src/image/filters.js:101"
         },
         {
             "message": "Missing item type\nReturns a blank ImageData object.",
-            "line": " src/image/filters.js:105"
+            "line": " src/image/filters.js:121"
         },
         {
             "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:120"
+            "line": " src/image/filters.js:136"
         },
         {
             "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:173"
+            "line": " src/image/filters.js:189"
         },
         {
             "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:207"
+            "line": " src/image/filters.js:223"
         },
         {
             "message": "Missing item type\nSets the alpha channel to entirely opaque. No parameter is used.",
-            "line": " src/image/filters.js:230"
+            "line": " src/image/filters.js:246"
         },
         {
             "message": "Missing item type\nSets each pixel to its inverse value. No parameter is used.",
-            "line": " src/image/filters.js:246"
+            "line": " src/image/filters.js:262"
         },
         {
             "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:261"
+            "line": " src/image/filters.js:277"
         },
         {
             "message": "Missing item type\nreduces the bright areas in an image",
-            "line": " src/image/filters.js:293"
+            "line": " src/image/filters.js:309"
         },
         {
             "message": "Missing item type\nincreases the bright areas in an image",
-            "line": " src/image/filters.js:380"
+            "line": " src/image/filters.js:396"
         },
         {
             "message": "Missing item type\nThis module defines the p5 methods for the <a href=\"#/p5.Image\">p5.Image</a> class\nfor drawing images to the main display canvas.",
@@ -29935,15 +29986,15 @@
         },
         {
             "message": "Missing item type\nHelper function for loading GIF-based images",
-            "line": " src/image/loading_displaying.js:153"
+            "line": " src/image/loading_displaying.js:162"
         },
         {
             "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:243"
+            "line": " src/image/loading_displaying.js:252"
         },
         {
             "message": "Missing item type\nApply the current tint color to the input image, return the resulting\ncanvas.",
-            "line": " src/image/loading_displaying.js:556"
+            "line": " src/image/loading_displaying.js:565"
         },
         {
             "message": "Missing item type\nThis module defines the <a href=\"#/p5.Image\">p5.Image</a> class and P5 methods for\ndrawing images to the main display canvas.",
@@ -30035,7 +30086,7 @@
         },
         {
             "message": "Missing item type\nDraw a line given two points",
-            "line": " src/webgl/3d_primitives.js:1391"
+            "line": " src/webgl/3d_primitives.js:1393"
         },
         {
             "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",
diff --git a/src/templates/pages/reference/data.min.json b/src/templates/pages/reference/data.min.json
index 51aa2c9369..28fa6cc7ba 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.1.9","url":"https://github.com/processing/p5.js#readme"},"files":{"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/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":{"Environment":1},"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":{"Rendering":1},"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/shim.js":{"name":"src/core/shim.js","modules":{},"classes":{},"fors":{},"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":{"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/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.Geometry.js":{"name":"src/webgl/p5.Geometry.js","modules":{},"classes":{"p5.Geometry":1},"fors":{"p5":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.Effect":1,"p5.Filter":1,"p5.LowPass":1,"p5.HighPass":1,"p5.BandPass":1,"p5.Oscillator":1,"p5.SinOsc":1,"p5.TriOsc":1,"p5.SawOsc":1,"p5.SqrOsc":1,"p5.MonoSynth":1,"p5.AudioVoice":1,"p5.PolySynth":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Signal":1,"p5.Envelope":1,"p5.Pulse":1,"p5.Noise":1,"p5.AudioIn":1,"p5.EQ":1,"p5.Panner3D":1,"p5.Delay":1,"p5.Reverb":1,"p5.Convolver":1,"p5.Phrase":1,"p5.Part":1,"p5.Score":1,"p5.SoundLoop":1,"p5.Compressor":1,"p5.SoundRecorder":1,"p5.PeakDetect":1,"p5.Gain":1,"p5.Distortion":1},"fors":{"p5.sound":1,"p5.Effect":1,"p5":1,"p5.Oscillator":1,"p5.MonoSynth":1,"p5.AudioVoice":1,"p5.PolySynth":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Signal":1,"p5.Envelope":1,"p5.AudioIn":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.Gain":1,"p5.Distortion":1},"namespaces":{}},"lib/addons/p5.sound.min.js":{"name":"lib/addons/p5.sound.min.js","modules":{},"classes":{},"fors":{},"namespaces":{}}},"modules":{"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":14},"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":14,"requires":["core","constants"],"description":"<p>Each color stores the color mode and level maxes that was applied at the\ntime of its construction. These are used to interpret the input arguments\n(at construction and later for that instance of color) and to format the\noutput e.g. when <a href=\"#/p5/saturation\">saturation()</a> is requested.</p>\n<p>Internally, we store an array representing the ideal RGBA values in floating\npoint form, normalized from 0 to 1. From this we calculate the closest\nscreen color (RGBA levels from 0 to 255) and expose this to the renderer.</p>\n<p>We also cache normalized, floating point components of the color in various\nrepresentations as they are calculated. This is done to prevent repeating a\nconversion that has already been performed.</p>\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":{},"fors":{"p5":1},"namespaces":{}},"2D Primitives":{"name":"2D Primitives","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src/core/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},"Environment":{"name":"Environment","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"namespaces":{},"module":"Environment","file":"src/core/environment.js","line":1,"requires":["core","constants"]},"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":3459,"description":"<p>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 <a href=\"#/p5.Element\">p5.Element</a> that supports a range of HTML elements. See the\n<a href='https://github.com/processing/p5.js/wiki/Beyond-the-canvas'>\nbeyond the canvas tutorial</a> for a full overview of how this addon works.</p>\n<p>See <a href='https://github.com/processing/p5.js/wiki/Beyond-the-canvas'>tutorial: beyond the canvas</a>\nfor more info on how to use this library.</a></p>\n","requires":["p5"]},"Rendering":{"name":"Rendering","submodules":{"undefined":1},"elements":{},"classes":{"p5.RendererGL":1,"p5.Graphics":1,"p5.Renderer":1},"fors":{"p5":1},"namespaces":{},"module":"Rendering","file":"src/webgl/p5.RendererGL.js","line":600,"description":"<p>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.</p>\n"},"Foundation":{"name":"Foundation","submodules":{},"elements":{},"classes":{"JSON":1,"console":1},"fors":{"p5":1,"JSON":1,"console":1},"namespaces":{},"tag":"module","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":410},"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":410,"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":"<p>Base class for all p5.Dictionary types. Specifically\n typed Dictionary classes inherit from this class.</p>\n"},"Events":{"name":"Events","submodules":{"Acceleration":1,"Keyboard":1,"Mouse":1,"Touch":1},"elements":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"Acceleration":{"name":"Acceleration","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/acceleration.js","line":1,"requires":["core"]},"Keyboard":{"name":"Keyboard","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/keyboard.js","line":1,"requires":["core"]},"Mouse":{"name":"Mouse","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/mouse.js","line":1,"requires":["core","constants"]},"Touch":{"name":"Touch","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/touch.js","line":1,"requires":["core"]},"Image":{"name":"Image","submodules":{"Pixels":1},"elements":{},"classes":{"p5.Image":1},"fors":{"p5":1},"namespaces":{},"module":"Image","file":"src/image/p5.Image.js","line":21,"requires":["core"],"description":"<p>Creates a new <a href=\"#/p5.Image\">p5.Image</a>. A <a href=\"#/p5.Image\">p5.Image</a> is a canvas backed representation of an\nimage.</p>\n<p>p5 can display .gif, .jpg and .png images. Images may be displayed\nin 2D and 3D space. Before an image is used, it must be loaded with the\n<a href=\"#/p5/loadImage\">loadImage()</a> function. The <a href=\"#/p5.Image\">p5.Image</a> class contains fields for the width and\nheight of the image, as well as an array called <a href=\"#/p5.Image/pixels\">pixels[]</a> that contains the\nvalues for every pixel in the image.</p>\n<p>The methods described below allow easy access to the image's pixels and\nalpha channel and simplify the process of compositing.</p>\n<p>Before using the <a href=\"#/p5.Image/pixels\">pixels[]</a> array, be sure to use the <a href=\"#/p5.Image/loadPixels\">loadPixels()</a> method on\nthe image to make sure that the pixel data is properly loaded.</p>\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":"<p>This module defines the <a href=\"#/p5.Font\">p5.Font</a> class and functions for\ndrawing text to the display canvas.</p>\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":"<p>XML is a representation of an XML object, able to parse XML code. Use\n<a href=\"#/p5/loadXML\">loadXML()</a> to load external XML files and create XML objects.</p>\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":1205,"description":"<p>This is the p5 instance constructor.</p>\n<p>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 <a href=\"#/p5/preload\">preload()</a>,\n<a href=\"#/p5/setup\">setup()</a>, and/or\n<a href=\"#/p5/draw\">draw()</a> properties on it for running a sketch.</p>\n<p>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</p>\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":"<p><a href=\"#/p5.Table\">Table</a> 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.</p>\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":10},"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":10,"requires":["core"],"description":"<p>A class to describe a two or three dimensional vector, specifically\na Euclidean (also known as geometric) vector. A vector is an entity\nthat has both magnitude and direction. The datatype, however, stores\nthe components of the vector (x, y for 2D, and x, y, z for 3D). The magnitude\nand direction can be accessed via the methods <a href=\"#/p5.Vector/mag\">mag()</a> and <a href=\"#/p5.Vector/heading\">heading()</a>.</p>\n<p>In many of the p5.js examples, you will see <a href=\"#/p5.Vector\">p5.Vector</a> used to describe a\nposition, velocity, or acceleration. For example, if you consider a rectangle\nmoving across the screen, at any given instant it has a position (a vector\nthat points from the origin to its location), a velocity (the rate at which\nthe object's position changes per time unit, expressed as a vector), and\nacceleration (the rate at which the object's velocity changes per time\nunit, expressed as a vector).</p>\n<p>Since vectors represent groupings of values, we cannot simply use\ntraditional addition/multiplication/etc. Instead, we'll need to do some\n\"vector\" math, which is made easy by the methods inside the <a href=\"#/p5.Vector\">p5.Vector</a> class.</p>\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":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src/webgl/3d_primitives.js","line":1,"requires":["core","p5.Geometry"]},"Lights, Camera":{"name":"Lights, Camera","submodules":{"Interaction":1,"Lights":1,"Material":1,"Camera":1},"elements":{},"classes":{"p5.Camera":1,"p5.Geometry":1,"p5.Matrix":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":260},"Interaction":{"name":"Interaction","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Lights, Camera","namespace":"","file":"src/webgl/interaction.js","line":1,"requires":["core"]},"Lights":{"name":"Lights","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Lights, Camera","namespace":"","file":"src/webgl/light.js","line":1,"requires":["core"]},"3D Models":{"name":"3D Models","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src/webgl/loading.js","line":1,"requires":["core","p5.Geometry"]},"Material":{"name":"Material","submodules":{},"elements":{},"classes":{"p5.Geometry":1,"p5.Shader":1,"p5.Texture":1},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Lights, Camera","namespace":"","file":"src/webgl/p5.Texture.js","line":12,"requires":["core"],"description":"<p>This module defines the p5.Shader class</p>\n"},"Camera":{"name":"Camera","submodules":{},"elements":{},"classes":{"p5.Camera":1},"fors":{"p5":1,"p5.Camera":1},"is_submodule":1,"namespaces":{},"module":"Lights, Camera","namespace":"","file":"src/webgl/p5.Camera.js","line":339,"requires":["core"],"description":"<p>This class describes a camera for use in p5's\n<a href=\"https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5\">\nWebGL mode</a>. It contains camera position, orientation, and projection\ninformation necessary for rendering a 3D scene.</p>\n<p>New p5.Camera objects can be made through the\n<a href=\"#/p5/createCamera\">createCamera()</a> 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 <a href=\"#/p5/setCamera\">setCamera()</a> method.</p>\n<p>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 <a href=\"#/p5.Camera/move\">move()</a> method,\nfor instance, moves the camera along its own axes, whereas the\n<a href=\"#/p5.Camera/setPosition\">setPosition()</a>\nmethod sets the camera's position in world-space.</p>\n"},"p5.sound":{"name":"p5.sound","submodules":{},"elements":{},"classes":{"p5.sound":1,"p5.Effect":1,"p5.Filter":1,"p5.LowPass":1,"p5.HighPass":1,"p5.BandPass":1,"p5.Oscillator":1,"p5.SinOsc":1,"p5.TriOsc":1,"p5.SawOsc":1,"p5.SqrOsc":1,"p5.MonoSynth":1,"p5.AudioVoice":1,"p5.PolySynth":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Signal":1,"p5.Envelope":1,"p5.Pulse":1,"p5.Noise":1,"p5.AudioIn":1,"p5.EQ":1,"p5.Panner3D":1,"p5.Delay":1,"p5.Reverb":1,"p5.Convolver":1,"p5.Phrase":1,"p5.Part":1,"p5.Score":1,"p5.SoundLoop":1,"p5.Compressor":1,"p5.SoundRecorder":1,"p5.PeakDetect":1,"p5.Gain":1,"p5.Distortion":1},"fors":{"p5.sound":1,"p5.Effect":1,"p5":1,"p5.Oscillator":1,"p5.MonoSynth":1,"p5.AudioVoice":1,"p5.PolySynth":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Signal":1,"p5.Envelope":1,"p5.AudioIn":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.Gain":1,"p5.Distortion":1},"namespaces":{},"module":"p5.sound","file":"lib/addons/p5.sound.js","line":11703,"description":"<p>p5.sound extends p5 with <a href=\"http://caniuse.com/audio-api\"\ntarget=\"_blank\">Web Audio</a> functionality including audio input,\nplayback, analysis and synthesis.\n</p>\n<ul>\n<li><a href=\"#/p5.SoundFile\"><b>p5.SoundFile</b></a>: Load and play sound files.</li>\n<li><a href=\"#/p5.Amplitude\"><b>p5.Amplitude</b></a>: Get the current volume of a sound.</li>\n<li><a href=\"#/p5.AudioIn\"><b>p5.AudioIn</b></a>: Get sound from an input source, typically\n  a computer microphone.</li>\n<li><a href=\"#/p5.FFT\"><b>p5.FFT</b></a>: Analyze the frequency of sound. Returns\n  results from the frequency spectrum or time domain (waveform).</li>\n<li><a href=\"#/p5.Oscillator\"><b>p5.Oscillator</b></a>: Generate Sine,\n  Triangle, Square and Sawtooth waveforms. Base class of\n  <li><a href=\"#/p5.Noise\">p5.Noise</a> and <a href=\"#/p5.Pulse\">p5.Pulse</a>.\n  </li>\n<li>\n  <a href=\"#/p5.MonoSynth\">p5.MonoSynth</a> and <a href=\"#/p5.PolySynth\">p5.PolySynth</a>: Play musical notes\n</li>\n<li><a href=\"#/p5.Envelope\"><b>p5.Envelope</b></a>: 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.</li>\n<li><a href=\"#/p5.Delay\"><b>p5.Delay</b></a>: A delay effect with\n  parameters for feedback, delayTime, and lowpass filter.</li>\n<li><a href=\"#/p5.Filter\"><b>p5.Filter</b></a>: Filter the frequency range of a\n  sound.\n</li>\n<li><a href=\"#/p5.Reverb\"><b>p5.Reverb</b></a>: Add reverb to a sound by specifying\n  duration and decay. </li>\n<b><li><a href=\"#/p5.Convolver\">p5.Convolver</a>:</b> Extends\n<a href=\"#/p5.Reverb\">p5.Reverb</a> to simulate the sound of real\n  physical spaces through convolution.</li>\n<b><li><a href=\"#/p5.SoundRecorder\">p5.SoundRecorder</a></b>: Record sound for playback\n  / save the .wav file.\n<b><li><a href=\"#/p5.SoundLoop\">p5.SoundLoop</a>, <a href=\"#/p5.Phrase\">p5.Phrase</a></b>, <b><a href=\"#/p5.Part\">p5.Part</a></b> and\n<b><a href=\"#/p5.Score\">p5.Score</a></b>: Compose musical sequences.\n</li>\n<li><a href=\"#/p5/userStartAudio\">userStartAudio</a>: Enable audio in a\nbrowser- and user-friendly way.</a>\n<p>p5.sound is on <a href=\"https://github.com/therewasaguy/p5.sound/\">GitHub</a>.\nDownload the latest version\n<a href=\"https://github.com/therewasaguy/p5.sound/blob/master/lib/p5.sound.js\">here</a>.</p>","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":13,"description":"<p>This is the p5 instance constructor.</p>\n<p>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 <a href=\"#/p5/preload\">preload()</a>,\n<a href=\"#/p5/setup\">setup()</a>, and/or\n<a href=\"#/p5/draw\">draw()</a> properties on it for running a sketch.</p>\n<p>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</p>\n","is_constructor":1,"params":[{"name":"sketch","description":"<p>a closure that can set optional <a href=\"#/p5/preload\">preload()</a>,\n                             <a href=\"#/p5/setup\">setup()</a>, and/or <a href=\"#/p5/draw\">draw()</a> properties on the\n                             given p5 instance</p>\n","type":"Function"},{"name":"node","description":"<p>element to attach canvas to</p>\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":14,"description":"<p>Each color stores the color mode and level maxes that was applied at the\ntime of its construction. These are used to interpret the input arguments\n(at construction and later for that instance of color) and to format the\noutput e.g. when <a href=\"#/p5/saturation\">saturation()</a> is requested.</p>\n<p>Internally, we store an array representing the ideal RGBA values in floating\npoint form, normalized from 0 to 1. From this we calculate the closest\nscreen color (RGBA levels from 0 to 255) and expose this to the renderer.</p>\n<p>We also cache normalized, floating point components of the color in various\nrepresentations as they are calculated. This is done to prevent repeating a\nconversion that has already been performed.</p>\n","is_constructor":1},"p5.Element":{"name":"p5.Element","shortname":"p5.Element","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"DOM","submodule":"DOM","namespace":"","file":"src/core/p5.Element.js","line":9,"description":"<p>Base class for all elements added to a sketch, including canvas,\ngraphics buffers, and other HTML elements. It is not called directly, but <a href=\"#/p5.Element\">p5.Element</a>\nobjects are created by calling <a href=\"#/p5/createCanvas\">createCanvas</a>, <a href=\"#/p5/createGraphics\">createGraphics</a>,\n<a href=\"#/p5/createDiv\">createDiv</a>, <a href=\"#/p5/createImg\">createImg</a>, <a href=\"#/p5/createInput\">createInput</a>, etc.</p>\n","is_constructor":1,"params":[{"name":"elt","description":"<p>DOM node that is wrapped</p>\n","type":"String"},{"name":"pInst","description":"<p>pointer to p5 instance</p>\n","type":"P5","optional":true}]},"p5.Graphics":{"name":"p5.Graphics","shortname":"p5.Graphics","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Rendering","submodule":"Rendering","namespace":"","file":"src/core/p5.Graphics.js","line":10,"description":"<p>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.</p>\n","is_constructor":1,"extends":"p5.Element","params":[{"name":"w","description":"<p>width</p>\n","type":"Number"},{"name":"h","description":"<p>height</p>\n","type":"Number"},{"name":"renderer","description":"<p>the renderer to use, either P2D or WEBGL</p>\n","type":"Constant"},{"name":"pInst","description":"<p>pointer to p5 instance</p>\n","type":"P5","optional":true}]},"p5.Renderer":{"name":"p5.Renderer","shortname":"p5.Renderer","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Rendering","submodule":"Rendering","namespace":"","file":"src/core/p5.Renderer.js","line":10,"description":"<p>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.</p>\n","is_constructor":1,"extends":"p5.Element","params":[{"name":"elt","description":"<p>DOM node that is wrapped</p>\n","type":"String"},{"name":"pInst","description":"<p>pointer to p5 instance</p>\n","type":"P5","optional":true},{"name":"isMainCanvas","description":"<p>whether we're using it as main canvas</p>\n","type":"Boolean","optional":true}]},"JSON":{"name":"JSON","shortname":"JSON","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Foundation","namespace":""},"console":{"name":"console","shortname":"console","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"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":"<p>Base class for all p5.Dictionary types. Specifically\n typed Dictionary classes inherit from this class.</p>\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":394,"description":"<p>A simple Dictionary class for Strings.</p>\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":410,"description":"<p>A simple Dictionary class for Numbers.</p>\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":2304,"description":"<p>Extends <a href=\"#/p5.Element\">p5.Element</a> to handle audio and video. In addition to the methods\nof <a href=\"#/p5.Element\">p5.Element</a>, it also contains methods for controlling media. It is not\ncalled directly, but <a href=\"#/p5.MediaElement\">p5.MediaElement</a>s are created by calling <a href=\"#/p5/createVideo\">createVideo</a>,\n<a href=\"#/p5/createAudio\">createAudio</a>, and <a href=\"#/p5/createCapture\">createCapture</a>.</p>\n","is_constructor":1,"params":[{"name":"elt","description":"<p>DOM node that is wrapped</p>\n","type":"String"}]},"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":3459,"description":"<p>Base class for a file.\nUsed for Element.drop and createFileInput.</p>\n","is_constructor":1,"params":[{"name":"file","description":"<p>File that is wrapped</p>\n","type":"File"}]},"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":"<p>Creates a new <a href=\"#/p5.Image\">p5.Image</a>. A <a href=\"#/p5.Image\">p5.Image</a> is a canvas backed representation of an\nimage.</p>\n<p>p5 can display .gif, .jpg and .png images. Images may be displayed\nin 2D and 3D space. Before an image is used, it must be loaded with the\n<a href=\"#/p5/loadImage\">loadImage()</a> function. The <a href=\"#/p5.Image\">p5.Image</a> class contains fields for the width and\nheight of the image, as well as an array called <a href=\"#/p5.Image/pixels\">pixels[]</a> that contains the\nvalues for every pixel in the image.</p>\n<p>The methods described below allow easy access to the image's pixels and\nalpha channel and simplify the process of compositing.</p>\n<p>Before using the <a href=\"#/p5.Image/pixels\">pixels[]</a> array, be sure to use the <a href=\"#/p5.Image/loadPixels\">loadPixels()</a> method on\nthe image to make sure that the pixel data is properly loaded.</p>\n","example":["\n<div><code>\nfunction setup() {\n  let img = createImage(100, 100); // same as new p5.Image(100, 100);\n  img.loadPixels();\n  createCanvas(100, 100);\n  background(0);\n\n  // helper for writing color to array\n  function writeColor(image, x, y, red, green, blue, alpha) {\n    let index = (x + y * width) * 4;\n    image.pixels[index] = red;\n    image.pixels[index + 1] = green;\n    image.pixels[index + 2] = blue;\n    image.pixels[index + 3] = alpha;\n  }\n\n  let x, y;\n  // fill with random colors\n  for (y = 0; y < img.height; y++) {\n    for (x = 0; x < img.width; x++) {\n      let red = random(255);\n      let green = random(255);\n      let blue = random(255);\n      let alpha = 255;\n      writeColor(img, x, y, red, green, blue, alpha);\n    }\n  }\n\n  // draw a red line\n  y = 0;\n  for (x = 0; x < img.width; x++) {\n    writeColor(img, x, y, 255, 0, 0, 255);\n  }\n\n  // draw a green line\n  y = img.height - 1;\n  for (x = 0; x < img.width; x++) {\n    writeColor(img, x, y, 0, 255, 0, 255);\n  }\n\n  img.updatePixels();\n  image(img, 0, 0);\n}\n</code></div>"],"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":1205,"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":"<p><a href=\"#/p5.Table\">Table</a> 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.</p>\n","is_constructor":1,"params":[{"name":"rows","description":"<p>An array of p5.TableRow objects</p>\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":"<p>A TableRow object represents a single row of data values,\nstored in columns, from a table.</p>\n<p>A Table Row contains both an ordered array, and an unordered\nJSON object.</p>\n","is_constructor":1,"params":[{"name":"str","description":"<p>optional: populate the row with a\n                            string of values, separated by the\n                            separator</p>\n","type":"String","optional":true},{"name":"separator","description":"<p>comma separated values (csv) by default</p>\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":"<p>XML is a representation of an XML object, able to parse XML code. Use\n<a href=\"#/p5/loadXML\">loadXML()</a> to load external XML files and create XML objects.</p>\n","is_constructor":1,"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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\n// Sketch prints:\n// 0, Capra hircus, Goat\n// 1, Panthera pardus, Leopard\n// 2, Equus zebra, Zebra\n</code></div>"],"alt":"no image displayed"},"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":10,"description":"<p>A class to describe a two or three dimensional vector, specifically\na Euclidean (also known as geometric) vector. A vector is an entity\nthat has both magnitude and direction. The datatype, however, stores\nthe components of the vector (x, y for 2D, and x, y, z for 3D). The magnitude\nand direction can be accessed via the methods <a href=\"#/p5.Vector/mag\">mag()</a> and <a href=\"#/p5.Vector/heading\">heading()</a>.</p>\n<p>In many of the p5.js examples, you will see <a href=\"#/p5.Vector\">p5.Vector</a> used to describe a\nposition, velocity, or acceleration. For example, if you consider a rectangle\nmoving across the screen, at any given instant it has a position (a vector\nthat points from the origin to its location), a velocity (the rate at which\nthe object's position changes per time unit, expressed as a vector), and\nacceleration (the rate at which the object's velocity changes per time\nunit, expressed as a vector).</p>\n<p>Since vectors represent groupings of values, we cannot simply use\ntraditional addition/multiplication/etc. Instead, we'll need to do some\n\"vector\" math, which is made easy by the methods inside the <a href=\"#/p5.Vector\">p5.Vector</a> class.</p>\n","is_constructor":1,"params":[{"name":"x","description":"<p>x component of the vector</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>z component of the vector</p>\n","type":"Number","optional":true}],"example":["\n<div>\n<code>\nlet v1 = createVector(40, 50);\nlet v2 = createVector(40, 50);\n\nellipse(v1.x, v1.y, 50, 50);\nellipse(v2.x, v2.y, 50, 50);\nv1.add(v2);\nellipse(v1.x, v1.y, 50, 50);\n</code>\n</div>"],"alt":"2 white ellipses. One center-left the other bottom right and off canvas"},"p5.Font":{"name":"p5.Font","shortname":"p5.Font","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Typography","submodule":"Loading & Displaying","namespace":"","file":"src/typography/p5.Font.js","line":13,"description":"<p>Base class for font handling</p>\n","is_constructor":1,"params":[{"name":"pInst","description":"<p>pointer to p5 instance</p>\n","type":"P5","optional":true}]},"p5.Camera":{"name":"p5.Camera","shortname":"p5.Camera","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Lights, Camera","submodule":"Camera","namespace":"","file":"src/webgl/p5.Camera.js","line":339,"description":"<p>This class describes a camera for use in p5's\n<a href=\"https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5\">\nWebGL mode</a>. It contains camera position, orientation, and projection\ninformation necessary for rendering a 3D scene.</p>\n<p>New p5.Camera objects can be made through the\n<a href=\"#/p5/createCamera\">createCamera()</a> 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 <a href=\"#/p5/setCamera\">setCamera()</a> method.</p>\n<p>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 <a href=\"#/p5.Camera/move\">move()</a> method,\nfor instance, moves the camera along its own axes, whereas the\n<a href=\"#/p5.Camera/setPosition\">setPosition()</a>\nmethod sets the camera's position in world-space.</p>\n","params":[{"name":"rendererGL","description":"<p>instance of WebGL renderer</p>\n","type":"RendererGL"}],"example":["\n<div>\n<code>\nlet cam;\nlet delta = 0.01;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n  cam = createCamera();\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</code>\n</div>"],"alt":"camera view pans left and right across a series of rotating 3D boxes."},"p5.Geometry":{"name":"p5.Geometry","shortname":"p5.Geometry","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Lights, Camera","submodule":"Material","namespace":"","file":"src/webgl/p5.Geometry.js","line":12,"description":"<p>p5 Geometry class</p>\n","is_constructor":1,"params":[{"name":"detailX","description":"<p>number of vertices on horizontal surface</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of vertices on horizontal surface</p>\n","type":"Integer","optional":true},{"name":"callback","description":"<p>function to call upon object instantiation.</p>\n","type":"Function","optional":true}]},"p5.Shader":{"name":"p5.Shader","shortname":"p5.Shader","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Lights, Camera","submodule":"Material","namespace":"","file":"src/webgl/p5.Shader.js","line":11,"description":"<p>Shader class for WEBGL Mode</p>\n","is_constructor":1,"params":[{"name":"renderer","description":"<p>an instance of p5.RendererGL that\nwill provide the GL context for this new p5.Shader</p>\n","type":"p5.RendererGL"},{"name":"vertSrc","description":"<p>source code for the vertex shader (as a string)</p>\n","type":"String"},{"name":"fragSrc","description":"<p>source code for the fragment shader (as a string)</p>\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.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":264,"description":"<p>Effect is a base class for audio effects in p5. <br>\nThis module handles the nodes and methods that are\ncommon and useful for current and future effects.</p>\n<p>This class is extended by <a href=\"/reference/#/p5.Distortion\">p5.Distortion</a>,\n<a href=\"/reference/#/p5.Compressor\">p5.Compressor</a>,\n<a href=\"/reference/#/p5.Delay\">p5.Delay</a>,\n<a href=\"/reference/#/p5.Filter\">p5.Filter</a>,\n<a href=\"/reference/#/p5.Reverb\">p5.Reverb</a>.</p>\n","is_constructor":1,"params":[{"name":"ac","description":"<p>Reference to the audio context of the p5 object</p>\n","type":"Object","optional":true},{"name":"input","description":"<p>Gain Node effect wrapper</p>\n","type":"AudioNode","optional":true},{"name":"output","description":"<p>Gain Node effect wrapper</p>\n","type":"AudioNode","optional":true},{"name":"_drywet","description":"<p>Tone.JS CrossFade node (defaults to value: 1)</p>\n","type":"Object","optional":true},{"name":"wet","description":"<p>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.</p>\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":883,"description":"<p>A p5.Filter uses a Web Audio Biquad Filter to filter\nthe frequency response of an input source. Subclasses\ninclude:</p>\n<a href=\"/reference/#/p5.LowPass\"><code>p5.LowPass</code></a>:\nAllows frequencies below the cutoff frequency to pass through,\nand attenuates frequencies above the cutoff.<br/>\n<a href=\"/reference/#/p5.HighPass\"><code>p5.HighPass</code></a>:\nThe opposite of a lowpass filter. <br/>\n<a href=\"/reference/#/p5.BandPass\"><code>p5.BandPass</code></a>:\nAllows a range of frequencies to pass through and attenuates\nthe frequencies below and above this frequency range.<br/>\n\n<p>The <code>.res()</code> method controls either width of the\nbandpass, or resonance of the low/highpass cutoff frequency.</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","extends":"p5.Effect","is_constructor":1,"params":[{"name":"type","description":"<p>'lowpass' (default), 'highpass', 'bandpass'</p>\n","type":"String","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":1147,"description":"<p>Constructor: <code>new p5.LowPass()</code> Filter.\nThis is the same as creating a p5.Filter and then calling\nits method <code>setType('lowpass')</code>.\nSee p5.Filter for methods.</p>\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":1164,"description":"<p>Constructor: <code>new p5.HighPass()</code> Filter.\nThis is the same as creating a p5.Filter and then calling\nits method <code>setType('highpass')</code>.\nSee p5.Filter for methods.</p>\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":1180,"description":"<p>Constructor: <code>new p5.BandPass()</code> Filter.\nThis is the same as creating a p5.Filter and then calling\nits method <code>setType('bandpass')</code>.\nSee p5.Filter for methods.</p>\n","is_constructor":1,"extends":"p5.Filter"},"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":1375,"description":"<p>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).</p>\n\n<p>Set the type of oscillation with setType(), or by instantiating a\nspecific oscillator: <a href=\"/reference/#/p5.SinOsc\">p5.SinOsc</a>, <a\nhref=\"/reference/#/p5.TriOsc\">p5.TriOsc</a>, <a\nhref=\"/reference/#/p5.SqrOsc\">p5.SqrOsc</a>, or <a\nhref=\"/reference/#/p5.SawOsc\">p5.SawOsc</a>.\n</p>","is_constructor":1,"params":[{"name":"freq","description":"<p>frequency defaults to 440Hz</p>\n","type":"Number","optional":true},{"name":"type","description":"<p>type of oscillator. Options:\n                       'sine' (default), 'triangle',\n                       'sawtooth', 'square'</p>\n","type":"String","optional":true}],"example":["\n<div><code>\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</code> </div>"]},"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":1890,"description":"<p>Constructor: <code>new p5.SinOsc()</code>.\nThis creates a Sine Wave Oscillator and is\nequivalent to <code> new p5.Oscillator('sine')\n</code> or creating a p5.Oscillator and then calling\nits method <code>setType('sine')</code>.\nSee p5.Oscillator for methods.</p>\n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"<p>Set the frequency</p>\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":1910,"description":"<p>Constructor: <code>new p5.TriOsc()</code>.\nThis creates a Triangle Wave Oscillator and is\nequivalent to <code>new p5.Oscillator('triangle')\n</code> or creating a p5.Oscillator and then calling\nits method <code>setType('triangle')</code>.\nSee p5.Oscillator for methods.</p>\n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"<p>Set the frequency</p>\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":1929,"description":"<p>Constructor: <code>new p5.SawOsc()</code>.\nThis creates a SawTooth Wave Oscillator and is\nequivalent to <code> new p5.Oscillator('sawtooth')\n</code> or creating a p5.Oscillator and then calling\nits method <code>setType('sawtooth')</code>.\nSee p5.Oscillator for methods.</p>\n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"<p>Set the frequency</p>\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":1948,"description":"<p>Constructor: <code>new p5.SqrOsc()</code>.\nThis creates a Square Wave Oscillator and is\nequivalent to <code> new p5.Oscillator('square')\n</code> or creating a p5.Oscillator and then calling\nits method <code>setType('square')</code>.\nSee p5.Oscillator for methods.</p>\n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"<p>Set the frequency</p>\n","type":"Number","optional":true}]},"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":2008,"description":"<p>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.</p>\n","is_constructor":1,"example":["\n<div><code>\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</code></div>"]},"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":2356,"description":"<p>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();</p>\n","is_constructor":1},"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":2426,"description":"<p>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.</p>\n","is_constructor":1,"params":[{"name":"synthVoice","description":"<p>A monophonic synth voice inheriting\n                               the AudioVoice class. Defaults to p5.MonoSynth</p>\n","type":"Number","optional":true},{"name":"maxVoices","description":"<p>Number of voices, defaults to 8;</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":3360,"description":"<p>SoundFile object with a path to a file.</p>\n\n<p>The p5.SoundFile may not be available immediately because\nit loads the file information asynchronously.</p>\n\n<p>To do something with the sound as soon as it loads\npass the name of a function as the second parameter.</p>\n\n<p>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.</p>","is_constructor":1,"params":[{"name":"path","description":"<p>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.</p>\n","type":"String|Array"},{"name":"successCallback","description":"<p>Name of a function to call once file loads</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>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.</p>\n","type":"Function","optional":true},{"name":"whileLoadingCallback","description":"<p>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.</p>\n","type":"Function","optional":true}],"example":["\n<div><code>\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 </code></div>"]},"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":5186,"description":"<p>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.</p>\n","is_constructor":1,"params":[{"name":"smoothing","description":"<p>between 0.0 and .999 to smooth\n                           amplitude readings (defaults to 0)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\nlet sound, amplitude;\n\nfunction preload(){\n  sound = loadSound('assets/beat.mp3');\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);\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 (sound.isPlaying() ){\n    sound.stop();\n  } else {\n    sound.play();\n  }\n}\n\n</code></div>"]},"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":5499,"description":"<p>FFT (Fast Fourier Transform) is an analysis algorithm that\nisolates individual\n<a href=\"https://en.wikipedia.org/wiki/Audio_frequency\">\naudio frequencies</a> within a waveform.</p>\n\n<p>Once instantiated, a p5.FFT object can return an array based on\ntwo types of analyses: <br> • <code>FFT.waveform()</code> 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.<br>\n• <code>FFT.analyze() </code> 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 <code>getEnergy()</code> to measure amplitude at specific\nfrequencies, or within a range of frequencies. </p>\n\n<p>FFT analyzes a very short snapshot of sound called a sample\nbuffer. It returns an array of amplitude measurements, referred\nto as <code>bins</code>. 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.</p>","is_constructor":1,"params":[{"name":"smoothing","description":"<p>Smooth results of Freq Spectrum.\n                              0.0 < smoothing < 1.0.\n                              Defaults to 0.8.</p>\n","type":"Number","optional":true},{"name":"bins","description":"<p>Length of resulting array.\n                          Must be a power of two between\n                          16 and 1024. Defaults to 1024.</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"p5.Signal":{"name":"p5.Signal","shortname":"p5.Signal","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":6146,"description":"<p>p5.Signal is a constant audio-rate signal used by p5.Oscillator\nand p5.Envelope for modulation math.</p>\n\n<p>This is necessary because Web Audio is processed on a seprate clock.\nFor example, the p5 draw loop runs about 60 times per second. But\nthe audio clock must process samples 44100 times per second. If we\nwant to add a value to each of those samples, we can't do it in the\ndraw loop, but we can do it by adding a constant-rate audio signal.</p.\n\n<p>This class mostly functions behind the scenes in p5.sound, and returns\na Tone.Signal from the Tone.js library by Yotam Mann.\nIf you want to work directly with audio signals for modular\nsynthesis, check out\n<a href='http://bit.ly/1oIoEng' target=_'blank'>tone.js.</a></p>","is_constructor":1,"return":{"description":"A Signal object from the Tone.js library","type":"Tone.Signal"},"example":["\n<div><code>\nlet carrier, modulator;\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  carrier = new p5.Oscillator('sine');\n  carrier.start();\n  carrier.amp(1); // set amplitude\n  carrier.freq(220); // set frequency\n\n  modulator = new p5.Oscillator('sawtooth');\n  modulator.disconnect();\n  modulator.start();\n  modulator.amp(1);\n  modulator.freq(4);\n\n  // Modulator's default amplitude range is -1 to 1.\n  // Multiply it by -200, so the range is -200 to 200\n  // then add 220 so the range is 20 to 420\n  carrier.freq( modulator.mult(-400).add(220) );\n}\n\nfunction canvasPressed() {\n  userStartAudio();\n  carrier.amp(1.0);\n}\n\nfunction mouseReleased() {\n  carrier.amp(0);\n}\n</code></div>"]},"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":6350,"description":"<p>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 (\n<a href=\"https://upload.wikimedia.org/wikipedia/commons/e/ea/ADSR_parameter.svg\">ADSR</a>\n). Envelopes can also control other Web Audio Parameters—for example, a p5.Envelope can\ncontrol an Oscillator's frequency like this: <code>osc.freq(env)</code>.</p>\n<p>Use <code><a href=\"#/p5.Envelope/setRange\">setRange</a></code> to change the attack/release level.\nUse <code><a href=\"#/p5.Envelope/setADSR\">setADSR</a></code> to change attackTime, decayTime, sustainPercent and releaseTime.</p>\n<p>Use the <code><a href=\"#/p5.Envelope/play\">play</a></code> method to play the entire envelope,\nthe <code><a href=\"#/p5.Envelope/ramp\">ramp</a></code> method for a pingable trigger,\nor <code><a href=\"#/p5.Envelope/triggerAttack\">triggerAttack</a></code>/\n<code><a href=\"#/p5.Envelope/triggerRelease\">triggerRelease</a></code> to trigger noteOn/noteOff.</p>","is_constructor":1,"example":["\n<div><code>\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</code></div>"]},"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":7192,"description":"<p>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 <a href=\"\nhttp://p5js.org/reference/#/p5.Oscillator\">\n<code>p5.Oscillator</code> for a full list of methods.</p>\n","extends":"p5.Oscillator","is_constructor":1,"params":[{"name":"freq","description":"<p>Frequency in oscillations per second (Hz)</p>\n","type":"Number","optional":true},{"name":"w","description":"<p>Width between the pulses (0 to 1.0,\n                       defaults to 0)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":7399,"description":"<p>Noise is a type of oscillator that generates a buffer with random values.</p>\n","extends":"p5.Oscillator","is_constructor":1,"params":[{"name":"type","description":"<p>Type of noise can be 'white' (default),\n                     'brown' or 'pink'.</p>\n","type":"String"}]},"p5.AudioIn":{"name":"p5.AudioIn","shortname":"p5.AudioIn","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":7583,"description":"<p>Get audio from an input, i.e. your computer's microphone.</p>\n\n<p>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.</p>\n\n<p>If you want to hear the AudioIn, use the .connect() method.\nAudioIn does not connect to p5.sound output by default to prevent\nfeedback.</p>\n\n<p><em>Note: This uses the <a href=\"http://caniuse.com/stream\">getUserMedia/\nStream</a> 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.</em></p>","is_constructor":1,"params":[{"name":"errorCallback","description":"<p>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.</p>\n","type":"Function","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":8021,"description":"<p>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).</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","is_constructor":1,"extends":"p5.Effect","params":[{"name":"_eqsize","description":"<p>Constructor will accept 3 or 8, defaults to 3</p>\n","type":"Number","optional":true}],"return":{"description":"p5.EQ object","type":"Object"},"example":["\n<div><code>\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</code></div>"]},"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":8301,"description":"<p>Panner3D is based on the <a title=\"Web Audio Panner docs\"  href=\n\"https://developer.mozilla.org/en-US/docs/Web/API/PannerNode\">\nWeb Audio Spatial Panner Node</a>.\nThis panner is a spatial processing node that allows audio to be positioned\nand oriented in 3D space.</p>\n<p>The position is relative to an <a title=\"Web Audio Listener docs\" href=\n\"https://developer.mozilla.org/en-US/docs/Web/API/AudioListener\">\nAudio Context Listener</a>, which can be accessed\nby <code>p5.soundOut.audiocontext.listener</code></p>\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":8829,"description":"<p>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.</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","extends":"p5.Effect","is_constructor":1,"example":["\n<div><code>\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</code></div>"]},"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":9175,"description":"<p>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.</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","extends":"p5.Effect","is_constructor":1,"example":["\n<div><code>\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</code></div>"]},"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":9397,"description":"<p>p5.Convolver extends p5.Reverb. It can emulate the sound of real\nphysical spaces through a process called <a href=\"\nhttps://en.wikipedia.org/wiki/Convolution_reverb#Real_space_simulation\">\nconvolution</a>.</p>\n\n<p>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.</p>\n\n<p>Use the method <code>createConvolution(path)</code> to instantiate a\np5.Convolver with a path to your impulse response audio file.</p>","extends":"p5.Effect","is_constructor":1,"params":[{"name":"path","description":"<p>path to a sound file</p>\n","type":"String"},{"name":"callback","description":"<p>function to call when loading succeeds</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to call if loading fails.\n                                   This function will receive an error or\n                                   XMLHttpRequest object with information\n                                   about what went wrong.</p>\n","type":"Function","optional":true}],"example":["\n<div><code>\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 master output...\n  sound.disconnect();\n\n  // ...and process with cVerb\n  // so that we only hear the convolution\n  cVerb.process(sound);\n}\n\nfunction playSound() {\n  sound.play();\n}\n</code></div>"]},"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":9922,"description":"<p>A phrase is a pattern of musical events over time, i.e.\na series of notes and rests.</p>\n\n<p>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.</p>\n\n<p>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 <code>playNote(value){}</code>. 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).</p>","is_constructor":1,"params":[{"name":"name","description":"<p>Name so that you can access the Phrase.</p>\n","type":"String"},{"name":"callback","description":"<p>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.</p>\n","type":"Function"},{"name":"sequence","description":"<p>Array of values to pass into the callback\n                          at each step of the phrase.</p>\n","type":"Array"}],"example":["\n<div><code>\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</code></div>"]},"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":10002,"description":"<p>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.</p>\n\n<p>See p5.Phrase for more about musical timing.</p>","is_constructor":1,"params":[{"name":"steps","description":"<p>Steps in the part</p>\n","type":"Number","optional":true},{"name":"tatums","description":"<p>Divisions of a beat, e.g. use 1/4, or 0.25 for a quater note (default is 1/16, a sixteenth note)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":10288,"description":"<p>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\n<code>new p5.Score(a, a, b, a, c)</code></p>\n","is_constructor":1,"params":[{"name":"parts","description":"<p>One or multiple parts, to be played in sequence.</p>\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":10454,"description":"<p>SoundLoop</p>\n","is_constructor":1,"params":[{"name":"callback","description":"<p>this function will be called on each iteration of theloop</p>\n","type":"Function"},{"name":"interval","description":"<p>amount of time (if a number) or beats (if a string, following <a href = \"https://github.com/Tonejs/Tone.js/wiki/Time\">Tone.Time</a> convention) for each iteration of the loop. Defaults to 1 second.</p>\n","type":"Number|String","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":10792,"description":"<p>Compressor is an audio effect class that performs dynamics compression\non an audio input source. This is a very commonly used technique in music\nand sound production. Compression creates an overall louder, richer,\nand fuller sound by lowering the volume of louds and raising that of softs.\nCompression can be used to avoid clipping (sound distortion due to\npeaks in volume) and is especially useful when many sounds are played\nat once. Compression can be used on indivudal sound sources in addition\nto the master output.</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","is_constructor":1,"extends":"p5.Effect"},"p5.SoundRecorder":{"name":"p5.SoundRecorder","shortname":"p5.SoundRecorder","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":11056,"description":"<p>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().</p>\n<p>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.</p>","is_constructor":1,"example":["\n<div><code>\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</div></code>"]},"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":11286,"description":"<p>PeakDetect works in conjunction with p5.FFT to\nlook for onsets in some or all of the frequency spectrum.\n</p>\n<p>\nTo use p5.PeakDetect, call <code>update</code> in the draw loop\nand pass in a p5.FFT object.\n</p>\n<p>\nYou can listen for a specific part of the frequency spectrum by\nsetting the range between <code>freq1</code> and <code>freq2</code>.\n</p>\n\n<p><code>threshold</code> 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.</p>\n\n<p>\nThe update method is meant to be run in the draw loop, and\n<b>frames</b> 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<code> framesPerPeak = 60 / (estimatedBPM / 60 );</code>\n</p>\n\n<p>\nBased on example contribtued by @b2renger, and a simple beat detection\nexplanation by <a\nhref=\"http://www.airtightinteractive.com/2013/10/making-audio-reactive-visuals/\"\ntarget=\"_blank\">Felix Turner</a>.\n</p>","is_constructor":1,"params":[{"name":"freq1","description":"<p>lowFrequency - defaults to 20Hz</p>\n","type":"Number","optional":true},{"name":"freq2","description":"<p>highFrequency - defaults to 20000 Hz</p>\n","type":"Number","optional":true},{"name":"threshold","description":"<p>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.</p>\n","type":"Number","optional":true},{"name":"framesPerPeak","description":"<p>Defaults to 20.</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":11521,"description":"<p>A gain node is usefull to set the relative volume of sound.\nIt's typically used to build mixers.</p>\n","is_constructor":1,"example":["\n<div><code>\n\n// load two soundfile and crossfade beetween them\nlet sound1,sound2;\nlet sound1Gain, sound2Gain, masterGain;\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 'master' gain to which we will connect both soundfiles\n  masterGain = new p5.Gain();\n  masterGain.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(masterGain); // connect its output to the 'master'\n  sound2.disconnect();\n  sound2Gain = new p5.Gain();\n  sound2Gain.setInput(sound2);\n  sound2Gain.connect(masterGain);\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 'master    *  volume control'\n  var masterVolume = constrain(map(mouseY,height,0,0,1), 0, 1);\n  masterGain.amp(masterVolume);\n  text('master', width/2, height - masterVolume * 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</code></div>"]},"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":11703,"description":"<p>A Distortion effect created with a Waveshaper Node,\nwith an approach adapted from\n<a href=\"http://stackoverflow.com/questions/22312841/waveshaper-node-in-webaudio-how-to-emulate-distortion\">Kevin Ennis</a></p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","extends":"p5.Effect","is_constructor":1,"params":[{"name":"amount","description":"<p>Unbounded distortion amount.\n                               Normal values range from 0-1.</p>\n","type":"Number","optional":true,"optdefault":"0.25"},{"name":"oversample","description":"<p>'none', '2x', or '4x'.</p>\n","type":"String","optional":true,"optdefault":"'none'"}]}},"elements":{},"classitems":[{"file":"src/color/color_conversion.js","line":8,"description":"<p>Conversions adapted from <a href=\"http://www.easyrgb.com/en/math.php\">http://www.easyrgb.com/en/math.php</a>.</p>\n<p>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.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":19,"description":"<p>Convert an HSBA array to HSLA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":45,"description":"<p>Convert an HSBA array to RGBA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":100,"description":"<p>Convert an HSLA array to HSBA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":123,"description":"<p>Convert an HSLA array to RGBA.</p>\n<p>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.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":187,"description":"<p>Convert an RGBA array to HSBA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":226,"description":"<p>Convert an RGBA array to HSLA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/creating_reading.js","line":16,"description":"<p>Extracts the alpha value from a color or pixel array.</p>\n","itemtype":"method","name":"alpha","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the alpha value","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\nlet c = color(0, 126, 255, 102);\nfill(c);\nrect(15, 15, 35, 70);\nlet value = alpha(c); // Sets 'value' to 102\nfill(value);\nrect(50, 15, 35, 70);\n</code>\n</div>"],"alt":"Left half of canvas light blue and right half light charcoal grey.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":45,"description":"<p>Extracts the blue value from a color or pixel array.</p>\n","itemtype":"method","name":"blue","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the blue value","type":"Number"},"example":["\n<div>\n<code>\nlet c = color(175, 100, 220);\nfill(c);\nrect(15, 20, 35, 60); // Draw left rectangle\nlet blueValue = blue(c);\nfill(0, 0, blueValue);\nrect(50, 20, 35, 60); // Draw right rectangle\n</code>\n</div>"],"alt":"Left half of canvas light purple and right half a royal blue.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":72,"description":"<p>Extracts the HSB brightness value from a color or pixel array.</p>\n","itemtype":"method","name":"brightness","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the brightness value","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 255);\nlet c = color(0, 126, 255);\nfill(c);\nrect(15, 20, 35, 60);\nlet value = brightness(c); // Sets 'value' to 255\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>\n\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 255);\nlet c = color('hsb(60, 100%, 50%)');\nfill(c);\nrect(15, 20, 35, 60);\nlet value = brightness(c); // A 'value' of 50% is 127.5\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>"],"alt":"Left half of canvas salmon pink and the right half with it's brightness colored white.\nLeft half of canvas olive colored and the right half with it's brightness color gray.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":116,"description":"<p>Creates colors for storing in variables of the color datatype. The\nparameters are interpreted as RGB or HSB values depending on the\ncurrent <a href=\"#/p5/colorMode\">colorMode()</a>. The default mode is RGB values from 0 to 255\nand, therefore, the function call color(255, 204, 0) will return a\nbright yellow color.</p>\n<p>Note that if only one value is provided to <a href=\"#/p5/color\">color()</a>, it will be interpreted\nas a grayscale value. Add a second value, and it will be used for alpha\ntransparency. When three values are specified, they are interpreted as\neither RGB or HSB values. Adding a fourth value applies alpha\ntransparency.</p>\n<p>If a single string argument is provided, RGB, RGBA and Hex CSS color\nstrings and all named color strings are supported. In this case, an alpha\nnumber value as a second argument is not supported, the RGBA form should be\nused.</p>\n","itemtype":"method","name":"color","return":{"description":"resulting color","type":"p5.Color"},"example":["\n<div>\n<code>\nlet c = color(255, 204, 0);\nfill(c);\nnoStroke();\nrect(30, 20, 55, 55);\n</code>\n</div>\n\n<div>\n<code>\nlet c = color(255, 204, 0);\nfill(c);\nnoStroke();\nellipse(25, 25, 80, 80); // Draw left circle\n// Using only one value generates a grayscale value.\nc = color(65);\nfill(c);\nellipse(75, 75, 80, 80);\n</code>\n</div>\n\n<div>\n<code>\n// You can use named SVG & CSS colors\nlet c = color('magenta');\nfill(c);\nnoStroke();\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// Example of hex color codes\nnoStroke();\nlet c = color('#0f0');\nfill(c);\nrect(0, 10, 45, 80);\nc = color('#00ff00');\nfill(c);\nrect(55, 10, 45, 80);\n</code>\n</div>\n\n<div>\n<code>\n// RGB and RGBA color strings are also supported\n// these all set to the same color (solid blue)\nlet c;\nnoStroke();\nc = color('rgb(0,0,255)');\nfill(c);\nrect(10, 10, 35, 35); // Draw rectangle\nc = color('rgb(0%, 0%, 100%)');\nfill(c);\nrect(55, 10, 35, 35); // Draw rectangle\nc = color('rgba(0, 0, 255, 1)');\nfill(c);\nrect(10, 55, 35, 35); // Draw rectangle\nc = color('rgba(0%, 0%, 100%, 1)');\nfill(c);\nrect(55, 55, 35, 35); // Draw rectangle\n</code>\n</div>\n\n<div>\n<code>\n// HSL color can also be specified by value\nlet c = color('hsl(160, 100%, 50%)');\nnoStroke();\nfill(c);\nrect(0, 10, 45, 80); // Draw rectangle\nc = color('hsla(160, 100%, 50%, 0.5)');\nfill(c);\nrect(55, 10, 45, 80); // Draw rectangle\n</code>\n</div>\n\n<div>\n<code>\n// HSB color can also be specified\nlet c = color('hsb(160, 100%, 50%)');\nnoStroke();\nfill(c);\nrect(0, 10, 45, 80); // Draw rectangle\nc = color('hsba(160, 100%, 50%, 0.5)');\nfill(c);\nrect(55, 10, 45, 80); // Draw rectangle\n</code>\n</div>\n\n<div>\n<code>\nnoStroke();\nlet c = color(50, 55, 100);\nfill(c);\nrect(0, 10, 45, 80); // Draw left rect\ncolorMode(HSB, 100);\nc = color(50, 55, 100);\nfill(c);\nrect(55, 10, 45, 80);\n</code>\n</div>"],"alt":"Yellow rect in middle right of canvas, with 55 pixel width and height.\nYellow ellipse in top left of canvas, black ellipse in bottom right,both 80x80.\nBright fuchsia rect in middle of canvas, 60 pixel width and height.\nTwo bright green rects on opposite sides of the canvas, both 45x80.\nFour blue rects in each corner of the canvas, each are 35x35.\nBright sea green rect on left and darker rect on right of canvas, both 45x80.\nDark green rect on left and lighter green rect on right of canvas, both 45x80.\nDark blue rect on left and light teal rect on right of canvas, both 45x80.","class":"p5","module":"Color","submodule":"Creating & Reading","overloads":[{"line":116,"params":[{"name":"gray","description":"<p>number specifying value between white and black.</p>\n","type":"Number"},{"name":"alpha","description":"<p>alpha value relative to current color range\n                                (default is 0-255)</p>\n","type":"Number","optional":true}],"return":{"description":"resulting color","type":"p5.Color"}},{"line":257,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"return":{"description":"","type":"p5.Color"}},{"line":269,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"return":{"description":"","type":"p5.Color"}},{"line":275,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"return":{"description":"","type":"p5.Color"}},{"line":282,"params":[{"name":"color","description":"","type":"p5.Color"}],"return":{"description":"","type":"p5.Color"}}]},{"file":"src/color/creating_reading.js","line":297,"description":"<p>Extracts the green value from a color or pixel array.</p>\n","itemtype":"method","name":"green","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the green value","type":"Number"},"example":["\n<div>\n<code>\nlet c = color(20, 75, 200); // Define color 'c'\nfill(c); // Use color variable 'c' as fill color\nrect(15, 20, 35, 60); // Draw left rectangle\n\nlet greenValue = green(c); // Get green in 'c'\nprint(greenValue); // Print \"75.0\"\nfill(0, greenValue, 0); // Use 'greenValue' in new fill\nrect(50, 20, 35, 60); // Draw right rectangle\n</code>\n</div>"],"alt":"blue rect on left and green on right, both with black outlines & 35x60.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":326,"description":"<p>Extracts the hue value from a color or pixel array.</p>\n<p>Hue exists in both HSB and HSL. This function will return the\nHSB-normalized hue when supplied with an HSB color object (or when supplied\nwith a pixel array while the color mode is HSB), but will default to the\nHSL-normalized hue otherwise. (The values will only be different if the\nmaximum hue setting for each system is different.)</p>\n","itemtype":"method","name":"hue","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the hue","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 255);\nlet c = color(0, 126, 255);\nfill(c);\nrect(15, 20, 35, 60);\nlet value = hue(c); // Sets 'value' to \"0\"\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>"],"alt":"salmon pink rect on left and black on right, both 35x60.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":361,"description":"<p>Blends two colors to find a third color somewhere between them. The amt\nparameter is the amount to interpolate between the two values where 0.0\nequal to the first color, 0.1 is very near the first color, 0.5 is halfway\nin between, etc. An amount below 0 will be treated as 0. Likewise, amounts\nabove 1 will be capped at 1. This is different from the behavior of <a href=\"#/p5/lerp\">lerp()</a>,\nbut necessary because otherwise numbers outside the range will produce\nstrange and unexpected colors.</p>\n<p>The way that colors are interpolated depends on the current color mode.</p>\n","itemtype":"method","name":"lerpColor","params":[{"name":"c1","description":"<p>interpolate from this color</p>\n","type":"p5.Color"},{"name":"c2","description":"<p>interpolate to this color</p>\n","type":"p5.Color"},{"name":"amt","description":"<p>number between 0 and 1</p>\n","type":"Number"}],"return":{"description":"interpolated color","type":"p5.Color"},"example":["\n<div>\n<code>\ncolorMode(RGB);\nstroke(255);\nbackground(51);\nlet from = color(218, 165, 32);\nlet to = color(72, 61, 139);\ncolorMode(RGB); // Try changing to HSB.\nlet interA = lerpColor(from, to, 0.33);\nlet interB = lerpColor(from, to, 0.66);\nfill(from);\nrect(10, 20, 20, 60);\nfill(interA);\nrect(30, 20, 20, 60);\nfill(interB);\nrect(50, 20, 20, 60);\nfill(to);\nrect(70, 20, 20, 60);\n</code>\n</div>"],"alt":"4 rects one tan, brown, brownish purple, purple, with white outlines & 20x60","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":452,"description":"<p>Extracts the HSL lightness value from a color or pixel array.</p>\n","itemtype":"method","name":"lightness","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the lightness","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(HSL);\nlet c = color(156, 100, 50, 1);\nfill(c);\nrect(15, 20, 35, 60);\nlet value = lightness(c); // Sets 'value' to 50\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>"],"alt":"light pastel green rect on left and dark grey rect on right, both 35x60.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":482,"description":"<p>Extracts the red value from a color or pixel array.</p>\n","itemtype":"method","name":"red","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the red value","type":"Number"},"example":["\n<div>\n<code>\nlet c = color(255, 204, 0); // Define color 'c'\nfill(c); // Use color variable 'c' as fill color\nrect(15, 20, 35, 60); // Draw left rectangle\n\nlet redValue = red(c); // Get red in 'c'\nprint(redValue); // Print \"255.0\"\nfill(redValue, 0, 0); // Use 'redValue' in new fill\nrect(50, 20, 35, 60); // Draw right rectangle\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\ncolorMode(RGB, 255); // Sets the range for red, green, and blue to 255\nlet c = color(127, 255, 0);\ncolorMode(RGB, 1); // Sets the range for red, green, and blue to 1\nlet myColor = red(c);\nprint(myColor); // 0.4980392156862745\n</code>\n</div>"],"alt":"yellow rect on left and red rect on right, both with black outlines and 35x60.\ngrey canvas","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":522,"description":"<p>Extracts the saturation value from a color or pixel array.</p>\n<p>Saturation is scaled differently in HSB and HSL. This function will return\nthe HSB saturation when supplied with an HSB color object (or when supplied\nwith a pixel array while the color mode is HSB), but will default to the\nHSL saturation otherwise.</p>\n","itemtype":"method","name":"saturation","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the saturation value","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 255);\nlet c = color(0, 126, 255);\nfill(c);\nrect(15, 20, 35, 60);\nlet value = saturation(c); // Sets 'value' to 126\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>"],"alt":"deep pink rect on left and grey rect on right, both 35x60.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":51,"description":"<p>This function returns the color formatted as a string. This can be useful\nfor debugging, or for using p5.js with other libraries.</p>\n","itemtype":"method","name":"toString","params":[{"name":"format","description":"<p>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.</p>\n","type":"String","optional":true}],"return":{"description":"the formatted string","type":"String"},"example":["\n<div>\n<code>\ncreateCanvas(200, 100);\nlet myColor;\nstroke(255);\nmyColor = color(100, 100, 250);\nfill(myColor);\nrotate(HALF_PI);\ntext(myColor.toString(), 0, -5);\ntext(myColor.toString('#rrggbb'), 0, -30);\ntext(myColor.toString('rgba%'), 0, -55);\n</code>\n</div>"],"alt":"A canvas with 3 text representation of thier color.","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":249,"description":"<p>The setRed function sets the red component of a color.\nThe range depends on your color mode, in the default RGB mode it's between 0 and 255.</p>\n","itemtype":"method","name":"setRed","params":[{"name":"red","description":"<p>the new red value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet backgroundColor;\n\nfunction setup() {\n  backgroundColor = color(100, 50, 150);\n}\n\nfunction draw() {\n  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));\n  background(backgroundColor);\n}\n</code>\n</div>"],"alt":"canvas with gradually changing background color","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":278,"description":"<p>The setGreen function sets the green component of a color.\nThe range depends on your color mode, in the default RGB mode it's between 0 and 255.</p>\n","itemtype":"method","name":"setGreen","params":[{"name":"green","description":"<p>the new green value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet backgroundColor = color(100, 50, 150);\nfunction draw() {\n  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));\n  background(backgroundColor);\n}\n</code>\n</div>"],"alt":"canvas with gradually changing background color","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":302,"description":"<p>The setBlue function sets the blue component of a color.\nThe range depends on your color mode, in the default RGB mode it's between 0 and 255.</p>\n","itemtype":"method","name":"setBlue","params":[{"name":"blue","description":"<p>the new blue value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet backgroundColor = color(100, 50, 150);\nfunction draw() {\n  backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));\n  background(backgroundColor);\n}\n</code>\n</div>"],"alt":"canvas with gradually changing background color","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":326,"description":"<p>The setAlpha function sets the transparency (alpha) value of a color.\nThe range depends on your color mode, in the default RGB mode it's between 0 and 255.</p>\n","itemtype":"method","name":"setAlpha","params":[{"name":"alpha","description":"<p>the new alpha value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nfunction draw() {\n  clear();\n  background(200);\n  squareColor = color(100, 50, 100);\n  squareColor.setAlpha(128 + 128 * sin(millis() / 1000));\n  fill(squareColor);\n  rect(13, 13, width - 26, height - 26);\n}\n</code>\n</div>"],"alt":"a square with gradually changing opacity on a gray background","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":397,"description":"<p>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.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":428,"description":"<p>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.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":447,"description":"<p>CSS named colors.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":601,"description":"<p>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.</p>\n<p>Note that RGB values of .9 are not parsed by IE, but are supported here for\ncolor string consistency.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":614,"description":"<p>Full color string patterns. The capture groups are necessary.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":962,"description":"<p>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.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/setting.js","line":13,"description":"<p>The <a href=\"#/p5/background\">background()</a> function sets the color used\nfor the background of the p5.js canvas. The default background is transparent.\nThis function is typically used within <a href=\"#/p5/draw\">draw()</a> to clear\nthe display window at the beginning of each frame, but it can be used inside\n<a href=\"#/p5/setup\">setup()</a> to set the background on the first frame of\nanimation or if the background need only be set once.</p>\n<p>The color is either specified in terms of the RGB, HSB, or HSL color depending\non the current <a href=\"#/p5/colorMode\">colorMode</a>. (The default color space\nis RGB, with each value in the range from 0 to 255). The alpha range by default\nis also 0 to 255.<br><br></p>\n<p>If a single string argument is provided, RGB, RGBA and Hex CSS color strings\nand all named color strings are supported. In this case, an alpha number\nvalue as a second argument is not supported, the RGBA form should be used.</p>\n<p>A <a href=\"#/p5.Color\">p5.Color</a> object can also be provided to set the background color.</p>\n<p>A <a href=\"#/p5.Image\">p5.Image</a> can also be provided to set the background image.</p>\n","itemtype":"method","name":"background","chainable":1,"example":["\n<div>\n<code>\n// Grayscale integer value\nbackground(51);\n</code>\n</div>\n\n<div>\n<code>\n// R, G & B integer values\nbackground(255, 204, 0);\n</code>\n</div>\n\n<div>\n<code>\n// H, S & B integer values\ncolorMode(HSB);\nbackground(255, 204, 100);\n</code>\n</div>\n\n<div>\n<code>\n// Named SVG/CSS color string\nbackground('red');\n</code>\n</div>\n\n<div>\n<code>\n// three-digit hexadecimal RGB notation\nbackground('#fae');\n</code>\n</div>\n\n<div>\n<code>\n// six-digit hexadecimal RGB notation\nbackground('#222222');\n</code>\n</div>\n\n<div>\n<code>\n// integer RGB notation\nbackground('rgb(0,255,0)');\n</code>\n</div>\n\n<div>\n<code>\n// integer RGBA notation\nbackground('rgba(0,255,0, 0.25)');\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGB notation\nbackground('rgb(100%,0%,10%)');\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGBA notation\nbackground('rgba(100%,0%,100%,0.5)');\n</code>\n</div>\n\n<div>\n<code>\n// p5 Color object\nbackground(color(0, 0, 255));\n</code>\n</div>"],"alt":"canvas with darkest charcoal grey background.\ncanvas with yellow background.\ncanvas with royal blue background.\ncanvas with red background.\ncanvas with pink background.\ncanvas with black background.\ncanvas with bright green background.\ncanvas with soft green background.\ncanvas with red background.\ncanvas with light purple background.\ncanvas with blue background.","class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":13,"params":[{"name":"color","description":"<p>any value created by the <a href=\"#/p5/color\">color()</a> function</p>\n","type":"p5.Color"}],"chainable":1},{"line":131,"params":[{"name":"colorstring","description":"<p>color string, possible formats include: integer\n                        rgb() or rgba(), percentage rgb() or rgba(),\n                        3-digit hex, 6-digit hex</p>\n","type":"String"},{"name":"a","description":"<p>opacity of the background relative to current\n                            color range (default is 0-255)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":141,"params":[{"name":"gray","description":"<p>specifies a value between white and black</p>\n","type":"Number"},{"name":"a","description":"","type":"Number","optional":true}],"chainable":1},{"line":148,"params":[{"name":"v1","description":"<p>red or hue value (depending on the current color\n                       mode)</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value (depending on the current\n                       color mode)</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value (depending on the current\n                       color mode)</p>\n","type":"Number"},{"name":"a","description":"","type":"Number","optional":true}],"chainable":1},{"line":160,"params":[{"name":"values","description":"<p>an array containing the red, green, blue\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":167,"params":[{"name":"image","description":"<p>image created with <a href=\"#/p5/loadImage\">loadImage()</a> or <a href=\"#/p5/createImage\">createImage()</a>,\n                            to set as background\n                            (must be same size as the sketch window)</p>\n","type":"p5.Image"},{"name":"a","description":"","type":"Number","optional":true}],"chainable":1}]},{"file":"src/color/setting.js","line":180,"description":"<p>Clears the pixels within a buffer. This function only clears the canvas.\nIt will not clear objects created by createX() methods such as\n<a href=\"#/p5/createVideo\">createVideo()</a> or <a href=\"#/p5/createDiv\">createDiv()</a>.\nUnlike the main graphics context, pixels in additional graphics areas created\nwith <a href=\"#/p5/createGraphics\">createGraphics()</a> can be entirely\nor partially transparent. This function clears everything to make all of\nthe pixels 100% transparent.</p>\n","itemtype":"method","name":"clear","chainable":1,"example":["\n<div>\n<code>\n// Clear the screen on mouse press.\nfunction draw() {\n  ellipse(mouseX, mouseY, 20, 20);\n}\nfunction mousePressed() {\n  clear();\n  background(128);\n}\n</code>\n</div>"],"alt":"small white ellipses are continually drawn at mouse's x and y coordinates.","class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":214,"description":"<p><a href=\"#/p5/colorMode\">colorMode()</a> changes the way p5.js interprets\ncolor data. By default, the parameters for <a href=\"#/p5/fill\">fill()</a>,\n<a href=\"#/p5/stroke\">stroke()</a>, <a href=\"#/p5/background\">background()</a>,\nand <a href=\"#/p5/color\">color()</a> are defined by values between 0 and 255\nusing the RGB color model. This is equivalent to setting colorMode(RGB, 255).\nSetting colorMode(HSB) lets you use the HSB system instead. By default, this\nis colorMode(HSB, 360, 100, 100, 1). You can also use HSL.</p>\n<p>Note: existing color objects remember the mode that they were created in,\nso you can change modes as you like without affecting their appearance.</p>\n","itemtype":"method","name":"colorMode","chainable":1,"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(RGB, 100);\nfor (let i = 0; i < 100; i++) {\n  for (let j = 0; j < 100; j++) {\n    stroke(i, j, 0);\n    point(i, j);\n  }\n}\n</code>\n</div>\n\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 100);\nfor (let i = 0; i < 100; i++) {\n  for (let j = 0; j < 100; j++) {\n    stroke(i, j, 100);\n    point(i, j);\n  }\n}\n</code>\n</div>\n\n<div>\n<code>\ncolorMode(RGB, 255);\nlet c = color(127, 255, 0);\ncolorMode(RGB, 1);\nlet myColor = c._getRed();\ntext(myColor, 10, 10, 80, 80);\n</code>\n</div>\n\n<div>\n<code>\nnoFill();\ncolorMode(RGB, 255, 255, 255, 1);\nbackground(255);\nstrokeWeight(4);\nstroke(255, 0, 10, 0.3);\nellipse(40, 40, 50, 50);\nellipse(50, 50, 40, 40);\n</code>\n</div>"],"alt":"Green to red gradient from bottom L to top R. shading originates from top left.\nRainbow gradient from left to right. Brightness increasing to white at top.\nunknown image.\n50x50 ellipse at middle L & 40x40 ellipse at center. Translucent pink outlines.","class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":214,"params":[{"name":"mode","description":"<p>either RGB, HSB or HSL, corresponding to\n                         Red/Green/Blue and Hue/Saturation/Brightness\n                         (or Lightness)</p>\n","type":"Constant"},{"name":"max","description":"<p>range for all values</p>\n","type":"Number","optional":true}],"chainable":1},{"line":289,"params":[{"name":"mode","description":"","type":"Constant"},{"name":"max1","description":"<p>range for the red or hue depending on the\n                             current color mode</p>\n","type":"Number"},{"name":"max2","description":"<p>range for the green or saturation depending\n                             on the current color mode</p>\n","type":"Number"},{"name":"max3","description":"<p>range for the blue or brightness/lightness\n                             depending on the current color mode</p>\n","type":"Number"},{"name":"maxA","description":"<p>range for the alpha</p>\n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/color/setting.js","line":333,"description":"<p>Sets the color used to fill shapes. For example, if you run fill(204, 102, 0),\nall shapes drawn after the fill command will be filled with the color orange.\nThis color is either specified in terms of the RGB or HSB color depending on\nthe current <a href=\"#/p5/colorMode\">colorMode()</a>. (The default color space\nis RGB, with each value in the range from 0 to 255). The alpha range by default\nis also 0 to 255.</p>\n<p>If a single string argument is provided, RGB, RGBA and Hex CSS color strings\nand all named color strings are supported. In this case, an alpha number\nvalue as a second argument is not supported, the RGBA form should be used.</p>\n<p>A p5 <a href=\"#/p5.Color\">Color</a> object can also be provided to set the fill color.</p>\n","itemtype":"method","name":"fill","chainable":1,"example":["\n<div>\n<code>\n// Grayscale integer value\nfill(51);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// R, G & B integer values\nfill(255, 204, 0);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// H, S & B integer values\ncolorMode(HSB);\nfill(255, 204, 100);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// Named SVG/CSS color string\nfill('red');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// three-digit hexadecimal RGB notation\nfill('#fae');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// six-digit hexadecimal RGB notation\nfill('#222222');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// integer RGB notation\nfill('rgb(0,255,0)');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// integer RGBA notation\nfill('rgba(0,255,0, 0.25)');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGB notation\nfill('rgb(100%,0%,10%)');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGBA notation\nfill('rgba(100%,0%,100%,0.5)');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// p5 Color object\nfill(color(0, 0, 255));\nrect(20, 20, 60, 60);\n</code>\n</div>"],"alt":"60x60 dark charcoal grey rect with black outline in center of canvas.\n60x60 yellow rect with black outline in center of canvas.\n60x60 royal blue rect with black outline in center of canvas.\n60x60 red rect with black outline in center of canvas.\n60x60 pink rect with black outline in center of canvas.\n60x60 black rect with black outline in center of canvas.\n60x60 light green rect with black outline in center of canvas.\n60x60 soft green rect with black outline in center of canvas.\n60x60 red rect with black outline in center of canvas.\n60x60 dark fuchsia rect with black outline in center of canvas.\n60x60 blue rect with black outline in center of canvas.","class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":333,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":460,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"chainable":1},{"line":466,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":473,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":480,"params":[{"name":"color","description":"<p>the fill color</p>\n","type":"p5.Color"}],"chainable":1}]},{"file":"src/color/setting.js","line":492,"description":"<p>Disables filling geometry. If both <a href=\"#/p5/noStroke\">noStroke()</a> and <a href=\"#/p5/noFill\">noFill()</a> are called,\nnothing will be drawn to the screen.</p>\n","itemtype":"method","name":"noFill","chainable":1,"example":["\n<div>\n<code>\nrect(15, 10, 55, 55);\nnoFill();\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  noFill();\n  stroke(100, 100, 240);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  box(45, 45, 45);\n}\n</code>\n</div>"],"alt":"white rect top middle and noFill rect center. Both 60x60 with black outlines.\nblack canvas with purple cube wireframe spinning","class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":533,"description":"<p>Disables drawing the stroke (outline). If both <a href=\"#/p5/noStroke\">noStroke()</a> and <a href=\"#/p5/noFill\">noFill()</a>\nare called, nothing will be drawn to the screen.</p>\n","itemtype":"method","name":"noStroke","chainable":1,"example":["\n<div>\n<code>\nnoStroke();\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  noStroke();\n  fill(240, 150, 150);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  box(45, 45, 45);\n}\n</code>\n</div>"],"alt":"60x60 white rect at center. no outline.\nblack canvas with pink cube spinning","class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":573,"description":"<p>Sets the color used to draw lines and borders around shapes. This color\nis either specified in terms of the RGB or HSB color depending on the\ncurrent <a href=\"#/p5/colorMode\">colorMode()</a> (the default color space\nis RGB, with each value in the range from 0 to 255). The alpha range by\ndefault is also 0 to 255.</p>\n<p>If a single string argument is provided, RGB, RGBA and Hex CSS color\nstrings and all named color strings are supported. In this case, an alpha\nnumber value as a second argument is not supported, the RGBA form should be\nused.</p>\n<p>A p5 <a href=\"#/p5.Color\">Color</a> object can also be provided to set the stroke color.</p>\n","itemtype":"method","name":"stroke","chainable":1,"example":["\n<div>\n<code>\n// Grayscale integer value\nstrokeWeight(4);\nstroke(51);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// R, G & B integer values\nstroke(255, 204, 0);\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// H, S & B integer values\ncolorMode(HSB);\nstrokeWeight(4);\nstroke(255, 204, 100);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// Named SVG/CSS color string\nstroke('red');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// three-digit hexadecimal RGB notation\nstroke('#fae');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// six-digit hexadecimal RGB notation\nstroke('#222222');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// integer RGB notation\nstroke('rgb(0,255,0)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// integer RGBA notation\nstroke('rgba(0,255,0,0.25)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGB notation\nstroke('rgb(100%,0%,10%)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGBA notation\nstroke('rgba(100%,0%,100%,0.5)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// p5 Color object\nstroke(color(0, 0, 255));\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>"],"alt":"60x60 white rect at center. Dark charcoal grey outline.\n60x60 white rect at center. Yellow outline.\n60x60 white rect at center. Royal blue outline.\n60x60 white rect at center. Red outline.\n60x60 white rect at center. Pink outline.\n60x60 white rect at center. Black outline.\n60x60 white rect at center. Bright green outline.\n60x60 white rect at center. Soft green outline.\n60x60 white rect at center. Red outline.\n60x60 white rect at center. Dark fuchsia outline.\n60x60 white rect at center. Blue outline.","class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":573,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":712,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"chainable":1},{"line":718,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":725,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":732,"params":[{"name":"color","description":"<p>the stroke color</p>\n","type":"p5.Color"}],"chainable":1}]},{"file":"src/color/setting.js","line":745,"description":"<p>All drawing that follows <a href=\"#/p5/erase\">erase()</a> will subtract from\nthe canvas.Erased areas will reveal the web page underneath the canvas.Erasing\ncan be canceled with <a href=\"#/p5/noErase\">noErase()</a>.</p>\n<p>Drawing done with <a href=\"#/p5/image\">image()</a> and <a href=\"#/p5/background\">\nbackground()</a> in between <a href=\"#/p5/erase\">erase()</a> and\n<a href=\"#/p5/noErase\">noErase()</a> will not erase the canvas but works as usual.</p>\n","itemtype":"method","name":"erase","params":[{"name":"strengthFill","description":"<p>A number (0-255) for the strength of erasing for a shape's fill.\n                                       This will default to 255 when no argument is given, which\n                                       is full strength.</p>\n","type":"Number","optional":true},{"name":"strengthStroke","description":"<p>A number (0-255) for the strength of erasing for a shape's stroke.\n                                       This will default to 255 when no argument is given, which\n                                       is full strength.</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nbackground(100, 100, 250);\nfill(250, 100, 100);\nrect(20, 20, 60, 60);\nerase();\nellipse(25, 30, 30);\nnoErase();\n</code>\n</div>\n\n<div>\n<code>\nbackground(150, 250, 150);\nfill(100, 100, 250);\nrect(20, 20, 60, 60);\nstrokeWeight(5);\nerase(150, 255);\ntriangle(50, 10, 70, 50, 90, 10);\nnoErase();\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  smooth();\n  createCanvas(100, 100, WEBGL);\n  // Make a &lt;p&gt; element and put it behind the canvas\n  let p = createP('I am a dom element');\n  p.center();\n  p.style('font-size', '20px');\n  p.style('text-align', 'center');\n  p.style('z-index', '-9999');\n}\n\nfunction draw() {\n  background(250, 250, 150);\n  fill(15, 195, 185);\n  noStroke();\n  sphere(30);\n  erase();\n  rotateY(frameCount * 0.02);\n  translate(0, 0, 40);\n  torus(15, 5);\n  noErase();\n}\n</code>\n</div>"],"alt":"60x60 centered pink rect, purple background. Elliptical area in top-left of rect is erased white.\n60x60 centered purple rect, mint green background. Triangle in top-right is partially erased with fully erased outline.\n60x60 centered teal sphere, yellow background. Torus rotating around sphere erases to reveal black text underneath.","class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":825,"description":"<p>Ends erasing that was started with <a href=\"#/p5/erase\">erase()</a>.\nThe <a href=\"#/p5/fill\">fill()</a>, <a href=\"#/p5/stroke\">stroke()</a>, and\n<a href=\"#/p5/blendMode\">blendMode()</a> settings will return to what they were\nprior to calling <a href=\"#/p5/erase\">erase()</a>.</p>\n","itemtype":"method","name":"noErase","chainable":1,"example":["\n<div>\n<code>\nbackground(235, 145, 15);\nnoStroke();\nfill(30, 45, 220);\nrect(30, 10, 10, 80);\nerase();\nellipse(50, 50, 60);\nnoErase();\nrect(70, 10, 10, 80);\n</code>\n</div>"],"alt":"Orange background, with two tall blue rectangles. A centered ellipse erased the first blue rect but not the second.","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). Here is a\nbrief outline of the functions called in this system.\n\nThe FES may be invoked by a call to either (1) _validateParameters","(2) _friendlyFileLoadError","(3) _friendlyError","or (4) helpForMisusedAtTopLevelCode.\n\nhelpForMisusedAtTopLevelCode is called by this file on window load to check for use\nof p5.js functions outside of setup() or draw()\nItems 1-3 above are called by functions in the p5 library located in other files.\n\n_friendlyFileLoadError is called by the loadX() methods.\n_friendlyError can be called by any function to offer a helpful error message.\n\n_validateParameters is called by functions in the p5.js API to help users ensure\nther are calling p5 function with the right parameter types. The property\ndisableFriendlyErrors = false can be set from a p5.js sketch to turn off parameter\nchecking. The call sequence from _validateParameters looks something like this:\n\n_validateParameters\n  lookupParamDoc\n  scoreOverload\n    testParamTypes\n    testParamType\n  getOverloadErrors\n  _friendlyParamError\n    ValidationError\n    report\n      friendlyWelcome\n\nThe call sequences to _friendlyFileLoadError and _friendlyError are like this:\n_friendlyFileLoadError\n  report\n\n_friendlyError\n  report\n\nreport() is the main function that prints directly to console with the output\nof the error helper message. Note: friendlyWelcome() also prints to console directly."],"class":"p5","module":"Color"},{"file":"src/core/friendly_errors/fes_core.js","line":675,"description":"<p>Prints out all the colors in the color pallete with white text.\nFor color blindness testing.</p>\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/stacktrace.js","line":1,"requires":["core"],"class":"p5","module":"Color"},{"file":"src/core/friendly_errors/stacktrace.js","line":34,"description":"<p>Given an Error object, extract the most information from it.</p>\n","params":[{"name":"error","description":"<p>object</p>\n","type":"Error"}],"return":{"description":"of stack frames","type":"Array"},"class":"p5","module":"Color"},{"file":"src/core/friendly_errors/validate_params.js","line":1,"requires":["core"],"class":"p5","module":"Color"},{"file":"src/core/friendly_errors/validate_params.js","line":623,"description":"<p>Validates parameters\nparam  {String}               func    the name of the function\nparam  {Array}                args    user input arguments</p>\n<p>example:\n const a;\n ellipse(10,10,a,5);\nconsole ouput:\n \"It looks like ellipse received an empty variable in spot #2.\"</p>\n<p>example:\n ellipse(10,\"foo\",5,5);\nconsole output:\n \"ellipse was expecting a number for parameter #1,\n          received \"foo\" instead.\"</p>\n","class":"p5","module":"Color"},{"file":"src/core/shape/2d_primitives.js","line":16,"description":"<p>This function does 3 things:</p>\n<ol>\n<li><p>Bounds the desired start/stop angles for an arc (in radians) so that:</p>\n<pre><code>0 <= start < TWO_PI ;    start <= stop < start + TWO_PI</code></pre><p>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.</p>\n</li>\n<li><p>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.</p>\n</li>\n<li><p>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).</p>\n</li>\n</ol>\n","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":102,"description":"<p>Draw an arc to the screen. If called with only x, y, w, h, start and stop,\nthe arc will be drawn and filled as an open pie segment. If a mode parameter\nis provided, the arc will be filled like an open semi-circle (OPEN), a closed\nsemi-circle (CHORD), or as a closed pie segment (PIE). The origin may be changed\nwith the <a href=\"#/p5/ellipseMode\">ellipseMode()</a> function.</p>\n<p>The arc is always drawn clockwise from wherever start falls to wherever stop\nfalls on the ellipse.Adding or subtracting TWO_PI to either angle does not\nchange where they fall. If both start and stop fall at the same place, a full\nellipse will be drawn. Be aware that the y-axis increases in the downward\ndirection, therefore angles are measured clockwise from the positive\nx-direction (\"3 o'clock\").</p>\n","itemtype":"method","name":"arc","params":[{"name":"x","description":"<p>x-coordinate of the arc's ellipse</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the arc's ellipse</p>\n","type":"Number"},{"name":"w","description":"<p>width of the arc's ellipse by default</p>\n","type":"Number"},{"name":"h","description":"<p>height of the arc's ellipse by default</p>\n","type":"Number"},{"name":"start","description":"<p>angle to start the arc, specified in radians</p>\n","type":"Number"},{"name":"stop","description":"<p>angle to stop the arc, specified in radians</p>\n","type":"Number"},{"name":"mode","description":"<p>optional parameter to determine the way of drawing\n                        the arc. either CHORD, PIE or OPEN</p>\n","type":"Constant","optional":true},{"name":"detail","description":"<p>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.</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\narc(50, 55, 50, 50, 0, HALF_PI);\nnoFill();\narc(50, 55, 60, 60, HALF_PI, PI);\narc(50, 55, 70, 70, PI, PI + QUARTER_PI);\narc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);\n</code>\n</div>\n\n<div>\n<code>\narc(50, 50, 80, 80, 0, PI + QUARTER_PI);\n</code>\n</div>\n\n<div>\n<code>\narc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);\n</code>\n</div>\n\n<div>\n<code>\narc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);\n</code>\n</div>\n\n<div>\n<code>\narc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);\n</code>\n</div>"],"alt":"shattered outline of an ellipse with a quarter of a white circle bottom-right.\nwhite ellipse with top right quarter missing.\nwhite ellipse with black outline with top right missing.\nwhite ellipse with top right missing with black outline around shape.\nwhite ellipse with top right quarter missing with black outline around the shape.","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":218,"description":"<p>Draws an ellipse (oval) to the screen. By default, the first two parameters\nset the location of the center of the ellipse, and the third and fourth\nparameters set the shape's width and height. If no height is specified, the\nvalue of width is used for both the width and height. If a negative height or\nwidth is specified, the absolute value is taken.</p>\n<p>An ellipse with equal width and height is a circle.The origin may be changed\nwith the <a href=\"#/p5/ellipseMode\">ellipseMode()</a> function.</p>\n","itemtype":"method","name":"ellipse","chainable":1,"example":["\n<div>\n<code>\nellipse(56, 46, 55, 55);\n</code>\n</div>"],"alt":"white ellipse with black outline in middle-right of canvas that is 55x55","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":218,"params":[{"name":"x","description":"<p>x-coordinate of the center of ellipse.</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the center of ellipse.</p>\n","type":"Number"},{"name":"w","description":"<p>width of the ellipse.</p>\n","type":"Number"},{"name":"h","description":"<p>height of the ellipse.</p>\n","type":"Number","optional":true}],"chainable":1},{"line":245,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"w","description":"","type":"Number"},{"name":"h","description":"","type":"Number"},{"name":"detail","description":"<p>number of radial sectors to draw (for WebGL mode)</p>\n","type":"Integer"}]}]},{"file":"src/core/shape/2d_primitives.js","line":258,"description":"<p>Draws a circle to the screen. A circle is a simple closed shape.It is the set\nof all points in a plane that are at a given distance from a given point,\nthe centre.This function is a special case of the ellipse() function, where\nthe width and height of the ellipse are the same. Height and width of the\nellipse correspond to the diameter of the circle. By default, the first two\nparameters set the location of the centre of the circle, the third sets the\ndiameter of the circle.</p>\n","itemtype":"method","name":"circle","params":[{"name":"x","description":"<p>x-coordinate of the centre of the circle.</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the centre of the circle.</p>\n","type":"Number"},{"name":"d","description":"<p>diameter of the circle.</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\n// Draw a circle at location (30, 30) with a diameter of 20.\ncircle(30, 30, 20);\n</code>\n</div>"],"alt":"white circle with black outline in mid of canvas that is 55x55.","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":317,"description":"<p>Draws a line (a direct path between two points) to the screen. If called with\nonly 4 parameters, it will draw a line in 2D with a default width of 1 pixel.\nThis width can be modified by using the <a href=\"#/p5/strokeWeight\">\nstrokeWeight()</a> function. A line cannot be filled, therefore the <a\nhref=\"#/p5/fill\">fill()</a> function will not affect the color of a line. So to\ncolor a line, use the <a href=\"#/p5/stroke\">stroke()</a> function.</p>\n","itemtype":"method","name":"line","chainable":1,"example":["\n<div>\n<code>\nline(30, 20, 85, 75);\n</code>\n</div>\n\n<div>\n<code>\nline(30, 20, 85, 20);\nstroke(126);\nline(85, 20, 85, 75);\nstroke(255);\nline(85, 75, 30, 75);\n</code>\n</div>"],"alt":"An example showing a line 78 pixels long running from mid-top to bottom-right of canvas.\nAn example showing 3 lines of various stroke sizes. Form top, bottom and right sides of a square.","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":317,"params":[{"name":"x1","description":"<p>the x-coordinate of the first point</p>\n","type":"Number"},{"name":"y1","description":"<p>the y-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"<p>the x-coordinate of the second point</p>\n","type":"Number"},{"name":"y2","description":"<p>the y-coordinate of the second point</p>\n","type":"Number"}],"chainable":1},{"line":353,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>the z-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>the z-coordinate of the second point</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/2d_primitives.js","line":373,"description":"<p>Draws a point, a coordinate in space at the dimension of one pixel.\nThe first parameter is the horizontal value for the point, the second\nparam is the vertical value for the point. The color of the point is\nchanged with the <a href=\"#/p5/stroke\">stroke()</a> function. The size of the point\ncan be changed with the <a href=\"#/p5/strokeWeight\">strokeWeight()</a> function.</p>\n","itemtype":"method","name":"point","chainable":1,"example":["\n<div>\n<code>\npoint(30, 20);\npoint(85, 20);\npoint(85, 75);\npoint(30, 75);\n</code>\n</div>\n\n<div>\n<code>\npoint(30, 20);\npoint(85, 20);\nstroke('purple'); // Change the color\nstrokeWeight(10); // Make the points 10 pixels in size\npoint(85, 75);\npoint(30, 75);\n</code>\n</div>\n\n<div>\n<code>\nlet a = createVector(10, 10);\npoint(a);\nlet b = createVector(10, 20);\npoint(b);\npoint(createVector(20, 10));\npoint(createVector(20, 20));\n</code>\n</div>"],"alt":"4 points centered in the middle-right of the canvas.\n2 large points and 2 large purple points centered in the middle-right of the canvas.\nVertices of a square of length 10 pixels towards the top-left of the canvas.","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":373,"params":[{"name":"x","description":"<p>the x-coordinate</p>\n","type":"Number"},{"name":"y","description":"<p>the y-coordinate</p>\n","type":"Number"},{"name":"z","description":"<p>the z-coordinate (for WebGL mode)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":423,"params":[{"name":"coordinate_vector","description":"<p>the coordinate vector</p>\n","type":"p5.Vector"}],"chainable":1}]},{"file":"src/core/shape/2d_primitives.js","line":447,"description":"<p>Draws a quad on the canvas. A quad is a quadrilateral, a four sided polygon. It is\nsimilar to a rectangle, but the angles between its edges are not\nconstrained to ninety degrees. The first pair of parameters (x1,y1)\nsets the first vertex and the subsequent pairs should proceed\nclockwise or counter-clockwise around the defined shape.\nz-arguments only work when quad() is used in WEBGL mode.</p>\n","itemtype":"method","name":"quad","chainable":1,"example":["\n<div>\n<code>\nquad(38, 31, 86, 20, 69, 63, 30, 76);\n</code>\n</div>"],"alt":"irregular white quadrilateral shape with black outline mid-right of canvas.","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":447,"params":[{"name":"x1","description":"<p>the x-coordinate of the first point</p>\n","type":"Number"},{"name":"y1","description":"<p>the y-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"<p>the x-coordinate of the second point</p>\n","type":"Number"},{"name":"y2","description":"<p>the y-coordinate of the second point</p>\n","type":"Number"},{"name":"x3","description":"<p>the x-coordinate of the third point</p>\n","type":"Number"},{"name":"y3","description":"<p>the y-coordinate of the third point</p>\n","type":"Number"},{"name":"x4","description":"<p>the x-coordinate of the fourth point</p>\n","type":"Number"},{"name":"y4","description":"<p>the y-coordinate of the fourth point</p>\n","type":"Number"}],"chainable":1},{"line":475,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>the z-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>the z-coordinate of the second point</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>the z-coordinate of the third point</p>\n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"<p>the z-coordinate of the fourth point</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/2d_primitives.js","line":512,"description":"<p>Draws a rectangle on the canvas. A rectangle is a four-sided closed shape with\nevery angle at ninety degrees. By default, the first two parameters set\nthe location of the upper-left corner, the third sets the width, and the\nfourth sets the height. The way these parameters are interpreted, may be\nchanged with the <a href=\"#/p5/rectMode\">rectMode()</a> function.</p>\n<p>The fifth, sixth, seventh and eighth parameters, if specified,\ndetermine corner radius for the top-left, top-right, lower-right and\nlower-left corners, respectively. An omitted corner radius parameter is set\nto the value of the previously specified radius value in the parameter list.</p>\n","itemtype":"method","name":"rect","chainable":1,"example":["\n<div>\n<code>\n// Draw a rectangle at location (30, 20) with a width and height of 55.\nrect(30, 20, 55, 55);\n</code>\n</div>\n\n<div>\n<code>\n// Draw a rectangle with rounded corners, each having a radius of 20.\nrect(30, 20, 55, 55, 20);\n</code>\n</div>\n\n<div>\n<code>\n// Draw a rectangle with rounded corners having the following radii:\n// top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.\nrect(30, 20, 55, 55, 20, 15, 10, 5);\n</code>\n</div>"],"alt":"55x55 white rect with black outline in mid-right of canvas.\n55x55 white rect with black outline and rounded edges in mid-right of canvas.\n55x55 white rect with black outline and rounded edges of different radii.","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":512,"params":[{"name":"x","description":"<p>x-coordinate of the rectangle.</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the rectangle.</p>\n","type":"Number"},{"name":"w","description":"<p>width of the rectangle.</p>\n","type":"Number"},{"name":"h","description":"<p>height of the rectangle.</p>\n","type":"Number","optional":true},{"name":"tl","description":"<p>optional radius of top-left corner.</p>\n","type":"Number","optional":true},{"name":"tr","description":"<p>optional radius of top-right corner.</p>\n","type":"Number","optional":true},{"name":"br","description":"<p>optional radius of bottom-right corner.</p>\n","type":"Number","optional":true},{"name":"bl","description":"<p>optional radius of bottom-left corner.</p>\n","type":"Number","optional":true}],"chainable":1},{"line":563,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"w","description":"","type":"Number"},{"name":"h","description":"","type":"Number"},{"name":"detailX","description":"<p>number of segments in the x-direction (for WebGL mode)</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of segments in the y-direction (for WebGL mode)</p>\n","type":"Integer","optional":true}],"chainable":1}]},{"file":"src/core/shape/2d_primitives.js","line":578,"description":"<p>Draws a square to the screen. A square is a four-sided shape with every angle\nat ninety degrees, and equal side size. This function is a special case of the\nrect() function, where the width and height are the same, and the parameter\nis called \"s\" for side size. By default, the first two parameters set the\nlocation of the upper-left corner, the third sets the side size of the square.\nThe way these parameters are interpreted, may be changed with the <a\nhref=\"#/p5/rectMode\">rectMode()</a> function.</p>\n<p>The fourth, fifth, sixth and seventh parameters, if specified,\ndetermine corner radius for the top-left, top-right, lower-right and\nlower-left corners, respectively. An omitted corner radius parameter is set\nto the value of the previously specified radius value in the parameter list.</p>\n","itemtype":"method","name":"square","params":[{"name":"x","description":"<p>x-coordinate of the square.</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the square.</p>\n","type":"Number"},{"name":"s","description":"<p>side size of the square.</p>\n","type":"Number"},{"name":"tl","description":"<p>optional radius of top-left corner.</p>\n","type":"Number","optional":true},{"name":"tr","description":"<p>optional radius of top-right corner.</p>\n","type":"Number","optional":true},{"name":"br","description":"<p>optional radius of bottom-right corner.</p>\n","type":"Number","optional":true},{"name":"bl","description":"<p>optional radius of bottom-left corner.</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// Draw a square at location (30, 20) with a side size of 55.\nsquare(30, 20, 55);\n</code>\n</div>\n\n<div>\n<code>\n// Draw a square with rounded corners, each having a radius of 20.\nsquare(30, 20, 55, 20);\n</code>\n</div>\n\n<div>\n<code>\n// Draw a square with rounded corners having the following radii:\n// top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.\nsquare(30, 20, 55, 20, 15, 10, 5);\n</code>\n</div>"],"alt":"55x55 white square with black outline in mid-right of canvas.\n55x55 white square with black outline and rounded edges in mid-right of canvas.\n55x55 white square with black outline and rounded edges of different radii.","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":662,"description":"<p>Draws a trangle to the canvas. A triangle is a plane created by connecting\nthree points. The first two arguments specify the first point, the middle two\narguments specify the second point, and the last two arguments specify the\nthird point.</p>\n","itemtype":"method","name":"triangle","params":[{"name":"x1","description":"<p>x-coordinate of the first point</p>\n","type":"Number"},{"name":"y1","description":"<p>y-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"<p>x-coordinate of the second point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate of the second point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate of the third point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate of the third point</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\ntriangle(30, 75, 58, 20, 86, 75);\n</code>\n</div>"],"alt":"white triangle with black outline in mid-right of canvas.","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/attributes.js","line":12,"description":"<p>Modifies the location from which ellipses are drawn by changing the way in\nwhich parameters given to <a href=\"#/p5/ellipse\">ellipse()</a>,\n<a href=\"#/p5/circle\">circle()</a> and <a href=\"#/p5/arc\">arc()</a> are interpreted.</p>\n<p>The default mode is CENTER, in which the first two parameters are interpreted\nas the shape's center point's x and y coordinates respectively, while the third\nand fourth parameters are its width and height.</p>\n<p>ellipseMode(RADIUS) also uses the first two parameters as the shape's center\npoint's x and y coordinates, but uses the third and fourth parameters to\nspecify half of the shapes's width and height.</p>\n<p>ellipseMode(CORNER) interprets the first two parameters as the upper-left\ncorner of the shape, while the third and fourth parameters are its width\nand height.</p>\n<p>ellipseMode(CORNERS) interprets the first two parameters as the location of\none corner of the ellipse's bounding box, and the third and fourth parameters\nas the location of the opposite corner.</p>\n<p>The parameter to this method must be written in ALL CAPS because they are\npredefined as constants in ALL CAPS and Javascript is a case-sensitive language.</p>\n","itemtype":"method","name":"ellipseMode","params":[{"name":"mode","description":"<p>either CENTER, RADIUS, CORNER, or CORNERS</p>\n","type":"Constant"}],"chainable":1,"example":["\n<div>\n<code>\n// Example showing RADIUS and CENTER ellipsemode with 2 overlaying ellipses\nellipseMode(RADIUS);\nfill(255);\nellipse(50, 50, 30, 30); // Outer white ellipse\nellipseMode(CENTER);\nfill(100);\nellipse(50, 50, 30, 30); // Inner gray ellipse\n</code>\n</div>\n\n<div>\n<code>\n// Example showing CORNER and CORNERS ellipseMode with 2 overlaying ellipses\nellipseMode(CORNER);\nfill(255);\nellipse(25, 25, 50, 50); // Outer white ellipse\nellipseMode(CORNERS);\nfill(100);\nellipse(25, 25, 50, 50); // Inner gray ellipse\n</code>\n</div>"],"alt":"60x60 white ellipse and 30x30 grey ellipse with black outlines at center.\n60x60 white ellipse and 30x30 grey ellipse top-right with black outlines.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":81,"description":"<p>Draws all geometry with jagged (aliased) edges. Note that <a href=\"#/p5/smooth\">smooth()</a> is\nactive by default in 2D mode, so it is necessary to call <a href=\"#/p5/noSmooth\">noSmooth()</a> to disable\nsmoothing of geometry, images, and fonts. In 3D mode, <a href=\"#/p5/noSmooth\">noSmooth()</a> is enabled\nby default, so it is necessary to call <a href=\"#/p5/smooth\">smooth()</a> if you would like\nsmooth (antialiased) edges on your geometry.</p>\n","itemtype":"method","name":"noSmooth","chainable":1,"example":["\n<div>\n<code>\nbackground(0);\nnoStroke();\nsmooth();\nellipse(30, 48, 36, 36);\nnoSmooth();\nellipse(70, 48, 36, 36);\n</code>\n</div>"],"alt":"2 pixelated 36x36 white ellipses to left & right of center, black background","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":115,"description":"<p>Modifies the location from which rectangles are drawn by changing the way\nin which parameters given to <a href=\"#/p5/rect\">rect()</a> are interpreted.</p>\n<p>The default mode is CORNER, which interprets the first two parameters as the\nupper-left corner of the shape, while the third and fourth parameters are its\nwidth and height.</p>\n<p>rectMode(CORNERS) interprets the first two parameters as the location of\none of the corner, and the third and fourth parameters as the location of\nthe diagonally opposite corner. Note, the rectangle is drawn between the\ncoordinates, so it is not neccesary that the first corner be the upper left\ncorner.</p>\n<p>rectMode(CENTER) interprets the first two parameters as the shape's center\npoint, while the third and fourth parameters are its width and height.</p>\n<p>rectMode(RADIUS) also uses the first two parameters as the shape's center\npoint, but uses the third and fourth parameters to specify half of the shapes's\nwidth and height respectively.</p>\n<p>The parameter to this method must be written in ALL CAPS because they are\npredefined as constants in ALL CAPS and Javascript is a case-sensitive language.</p>\n","itemtype":"method","name":"rectMode","params":[{"name":"mode","description":"<p>either CORNER, CORNERS, CENTER, or RADIUS</p>\n","type":"Constant"}],"chainable":1,"example":["\n<div>\n<code>\nrectMode(CORNER);\nfill(255);\nrect(25, 25, 50, 50); // Draw white rectangle using CORNER mode\n\nrectMode(CORNERS);\nfill(100);\nrect(25, 25, 50, 50); // Draw gray rectanle using CORNERS mode\n</code>\n</div>\n\n<div>\n<code>\nrectMode(RADIUS);\nfill(255);\nrect(50, 50, 30, 30); // Draw white rectangle using RADIUS mode\n\nrectMode(CENTER);\nfill(100);\nrect(50, 50, 30, 30); // Draw gray rectangle using CENTER mode\n</code>\n</div>"],"alt":"50x50 white rect at center and 25x25 grey rect in the top left of the other.\n50x50 white rect at center and 25x25 grey rect in the center of the other.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":184,"description":"<p>Draws all geometry with smooth (anti-aliased) edges. <a href=\"#/p5/smooth\">smooth()</a> will also\nimprove image quality of resized images. Note that <a href=\"#/p5/smooth\">smooth()</a> is active by\ndefault in 2D mode; <a href=\"#/p5/noSmooth\">noSmooth()</a> can be used to disable smoothing of geometry,\nimages, and fonts. In 3D mode, <a href=\"#/p5/noSmooth\">noSmooth()</a> is enabled\nby default, so it is necessary to call <a href=\"#/p5/smooth\">smooth()</a> if you would like\nsmooth (antialiased) edges on your geometry.</p>\n","itemtype":"method","name":"smooth","chainable":1,"example":["\n<div>\n<code>\nbackground(0);\nnoStroke();\nsmooth();\nellipse(30, 48, 36, 36);\nnoSmooth();\nellipse(70, 48, 36, 36);\n</code>\n</div>"],"alt":"2 pixelated 36x36 white ellipses one left one right of center. On black.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":219,"description":"<p>Sets the style for rendering line endings. These ends are either rounded,\nsquared or extended, each of which specified with the corresponding\nparameters: ROUND, SQUARE and PROJECT. The default cap is ROUND.</p>\n<p>The parameter to this method must be written in ALL CAPS because they are\npredefined as constants in ALL CAPS and Javascript is a case-sensitive language.</p>\n","itemtype":"method","name":"strokeCap","params":[{"name":"cap","description":"<p>either ROUND, SQUARE or PROJECT</p>\n","type":"Constant"}],"chainable":1,"example":["\n<div>\n<code>\n// Example of different strokeCaps\nstrokeWeight(12.0);\nstrokeCap(ROUND);\nline(20, 30, 80, 30);\nstrokeCap(SQUARE);\nline(20, 50, 80, 50);\nstrokeCap(PROJECT);\nline(20, 70, 80, 70);\n</code>\n</div>"],"alt":"3 lines. Top line: rounded ends, mid: squared, bottom:longer squared ends.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":259,"description":"<p>Sets the style of the joints which connect line segments. These joints\nare either mitered, beveled or rounded and specified with the\ncorresponding parameters MITER, BEVEL and ROUND. The default joint is\nMITER.</p>\n<p>The parameter to this method must be written in ALL CAPS because they are\npredefined as constants in ALL CAPS and Javascript is a case-sensitive language.</p>\n","itemtype":"method","name":"strokeJoin","params":[{"name":"join","description":"<p>either MITER, BEVEL, ROUND</p>\n","type":"Constant"}],"chainable":1,"example":["\n<div>\n<code>\n// Example of MITER type of joints\nnoFill();\nstrokeWeight(10.0);\nstrokeJoin(MITER);\nbeginShape();\nvertex(35, 20);\nvertex(65, 50);\nvertex(35, 80);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\n// Example of BEVEL type of joints\nnoFill();\nstrokeWeight(10.0);\nstrokeJoin(BEVEL);\nbeginShape();\nvertex(35, 20);\nvertex(65, 50);\nvertex(35, 80);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\n// Example of ROUND type of joints\nnoFill();\nstrokeWeight(10.0);\nstrokeJoin(ROUND);\nbeginShape();\nvertex(35, 20);\nvertex(65, 50);\nvertex(35, 80);\nendShape();\n</code>\n</div>"],"alt":"Right-facing arrowhead shape with pointed tip in center of canvas.\nRight-facing arrowhead shape with flat tip in center of canvas.\nRight-facing arrowhead shape with rounded tip in center of canvas.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":331,"description":"<p>Sets the width of the stroke used for lines, points and the border around\nshapes. All widths are set in units of pixels.</p>\n","itemtype":"method","name":"strokeWeight","params":[{"name":"weight","description":"<p>the weight of the stroke (in pixels)</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\n// Example of different stroke weights\nstrokeWeight(1); // Default\nline(20, 20, 80, 20);\nstrokeWeight(4); // Thicker\nline(20, 40, 80, 40);\nstrokeWeight(10); // Beastly\nline(20, 70, 80, 70);\n</code>\n</div>"],"alt":"3 horizontal black lines. Top line: thin, mid: medium, bottom:thick.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/curves.js","line":13,"description":"<p>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.</p>\n<p>Bezier curves were developed by French automotive engineer Pierre Bezier,\nand are commonly used in computer graphics to define gently sloping curves.\nSee also <a href=\"#/p5/curve\">curve()</a>.</p>\n","itemtype":"method","name":"bezier","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\nbackground(0, 0, 0);\nnoFill();\nstroke(255);\nbezier(250, 250, 0, 100, 100, 0, 100, 0, 0, 0, 100, 0);\n</code>\n</div>"],"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":"<p>x-coordinate for the first anchor point</p>\n","type":"Number"},{"name":"y1","description":"<p>y-coordinate for the first anchor point</p>\n","type":"Number"},{"name":"x2","description":"<p>x-coordinate for the first control point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate for the first control point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate for the second control point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate for the second control point</p>\n","type":"Number"},{"name":"x4","description":"<p>x-coordinate for the second anchor point</p>\n","type":"Number"},{"name":"y4","description":"<p>y-coordinate for the second anchor point</p>\n","type":"Number"}],"chainable":1},{"line":62,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>z-coordinate for the first anchor point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>z-coordinate for the first control point</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>z-coordinate for the second control point</p>\n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"<p>z-coordinate for the second anchor point</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/curves.js","line":92,"description":"<p>Sets the resolution at which Bezier's curve is displayed. The default value is 20.</p>\n<p>Note, This function is only useful when using the WEBGL renderer\nas the default canvas renderer does not use this information.</p>\n","itemtype":"method","name":"bezierDetail","params":[{"name":"detail","description":"<p>resolution of the curves</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  noFill();\n  bezierDetail(5);\n}\n\nfunction draw() {\n  background(200);\n  bezier(-40, -40, 0,\n          90, -40, 0,\n         -90,  40, 0,\n          40,  40, 0);\n}\n</code>\n</div>"],"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":130,"description":"<p>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.</p>\n","itemtype":"method","name":"bezierPoint","params":[{"name":"a","description":"<p>coordinate of first point on the curve</p>\n","type":"Number"},{"name":"b","description":"<p>coordinate of first control point</p>\n","type":"Number"},{"name":"c","description":"<p>coordinate of second control point</p>\n","type":"Number"},{"name":"d","description":"<p>coordinate of second point on the curve</p>\n","type":"Number"},{"name":"t","description":"<p>value between 0 and 1</p>\n","type":"Number"}],"return":{"description":"the value of the Bezier at position t","type":"Number"},"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"10 points plotted on a given bezier at equal distances.","class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":185,"description":"<p>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.</p>\n","itemtype":"method","name":"bezierTangent","params":[{"name":"a","description":"<p>coordinate of first point on the curve</p>\n","type":"Number"},{"name":"b","description":"<p>coordinate of first control point</p>\n","type":"Number"},{"name":"c","description":"<p>coordinate of second control point</p>\n","type":"Number"},{"name":"d","description":"<p>coordinate of second point on the curve</p>\n","type":"Number"},{"name":"t","description":"<p>value between 0 and 1</p>\n","type":"Number"}],"return":{"description":"the tangent at position t","type":"Number"},"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":264,"description":"<p>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. <br /><br />\nLonger curves can be created by putting a series of <a href=\"#/p5/curve\">curve()</a> functions\ntogether or using <a href=\"#/p5/curveVertex\">curveVertex()</a>. An additional function called\n<a href=\"#/p5/curveTightness\">curveTightness()</a> provides control for the visual quality of the curve.\nThe <a href=\"#/p5/curve\">curve()</a> function is an implementation of Catmull-Rom splines.</p>\n","itemtype":"method","name":"curve","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":264,"params":[{"name":"x1","description":"<p>x-coordinate for the beginning control point</p>\n","type":"Number"},{"name":"y1","description":"<p>y-coordinate for the beginning control point</p>\n","type":"Number"},{"name":"x2","description":"<p>x-coordinate for the first point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate for the first point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate for the second point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate for the second point</p>\n","type":"Number"},{"name":"x4","description":"<p>x-coordinate for the ending control point</p>\n","type":"Number"},{"name":"y4","description":"<p>y-coordinate for the ending control point</p>\n","type":"Number"}],"chainable":1},{"line":332,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>z-coordinate for the beginning control point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>z-coordinate for the first point</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>z-coordinate for the second point</p>\n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"<p>z-coordinate for the ending control point</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/curves.js","line":358,"description":"<p>Sets the resolution at which curves display. The default value is 20 while\nthe minimum value is 3.</p>\n<p>This function is only useful when using the WEBGL renderer\nas the default canvas renderer does not use this\ninformation.</p>\n","itemtype":"method","name":"curveDetail","params":[{"name":"resolution","description":"<p>resolution of the curves</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\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</code>\n</div>"],"alt":"white arch shape with a low level of curve detail.","class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":398,"description":"<p>Modifies the quality of forms created with <a href=\"#/p5/curve\">curve()</a>\nand <a href=\"#/p5/curveVertex\">curveVertex()</a>.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.</p>\n","itemtype":"method","name":"curveTightness","params":[{"name":"amount","description":"<p>amount of deformation from the original vertices</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"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":444,"description":"<p>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.</p>\n","itemtype":"method","name":"curvePoint","params":[{"name":"a","description":"<p>coordinate of first control point of the curve</p>\n","type":"Number"},{"name":"b","description":"<p>coordinate of first point</p>\n","type":"Number"},{"name":"c","description":"<p>coordinate of second point</p>\n","type":"Number"},{"name":"d","description":"<p>coordinate of second control point</p>\n","type":"Number"},{"name":"t","description":"<p>value between 0 and 1</p>\n","type":"Number"}],"return":{"description":"bezier value at position t","type":"Number"},"example":["\n<div>\n<code>\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</code>\n</div>\n\nline hooking down to right-bottom with 13 5x5 white ellipse points"],"class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":493,"description":"<p>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.</p>\n","itemtype":"method","name":"curveTangent","params":[{"name":"a","description":"<p>coordinate of first control point</p>\n","type":"Number"},{"name":"b","description":"<p>coordinate of first point on the curve</p>\n","type":"Number"},{"name":"c","description":"<p>coordinate of second point on the curve</p>\n","type":"Number"},{"name":"d","description":"<p>coordinate of second conrol point</p>\n","type":"Number"},{"name":"t","description":"<p>value between 0 and 1</p>\n","type":"Number"}],"return":{"description":"the tangent at position t","type":"Number"},"example":["\n<div>\n<code>\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</code>\n</div>"],"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":"<p>Use the <a href=\"#/p5/beginContour\">beginContour()</a> and\n<a href=\"#/p5/endContour\">endContour()</a> functions to create negative shapes\nwithin shapes such as the center of the letter 'O'. <a href=\"#/p5/beginContour\">beginContour()</a>\nbegins recording vertices for the shape and <a href=\"#/p5/endContour\">endContour()</a> 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.</p>\n<p>These functions can only be used within a <a href=\"#/p5/beginShape\">beginShape()</a>/<a href=\"#/p5/endShape\">endShape()</a> pair and\ntransformations such as <a href=\"#/p5/translate\">translate()</a>, <a href=\"#/p5/rotate\">rotate()</a>, and <a href=\"#/p5/scale\">scale()</a> do not work\nwithin a <a href=\"#/p5/beginContour\">beginContour()</a>/<a href=\"#/p5/endContour\">endContour()</a> pair. It is also not possible to use\nother shapes, such as <a href=\"#/p5/ellipse\">ellipse()</a> or <a href=\"#/p5/rect\">rect()</a> within.</p>\n","itemtype":"method","name":"beginContour","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"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":67,"description":"<p>Using the <a href=\"#/p5/beginShape\">beginShape()</a> and <a href=\"#/p5/endShape\">endShape()</a> functions allow creating more\ncomplex forms. <a href=\"#/p5/beginShape\">beginShape()</a> begins recording vertices for a shape and\n<a href=\"#/p5/endShape\">endShape()</a> 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.</p>\n<p>The parameters available for <a href=\"#/p5/beginShape\">beginShape()</a> are POINTS, LINES, TRIANGLES,\nTRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIP, and TESS (WebGL only). After calling the\n<a href=\"#/p5/beginShape\">beginShape()</a> function, a series of <a href=\"#/p5/vertex\">vertex()</a> commands must follow. To stop\ndrawing the shape, call <a href=\"#/p5/endShape\">endShape()</a>. Each shape will be outlined with the\ncurrent stroke color and filled with the fill color.</p>\n<p>Transformations such as <a href=\"#/p5/translate\">translate()</a>, <a href=\"#/p5/rotate\">rotate()</a>, and <a href=\"#/p5/scale\">scale()</a> do not work\nwithin <a href=\"#/p5/beginShape\">beginShape()</a>. It is also not possible to use other shapes, such as\n<a href=\"#/p5/ellipse\">ellipse()</a> or <a href=\"#/p5/rect\">rect()</a> within <a href=\"#/p5/beginShape\">beginShape()</a>.</p>\n","itemtype":"method","name":"beginShape","params":[{"name":"kind","description":"<p>either POINTS, LINES, TRIANGLES, TRIANGLE_FAN\n                               TRIANGLE_STRIP, QUADS, QUAD_STRIP or TESS</p>\n","type":"Constant","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape(CLOSE);\n</code>\n</div>\n\n<div>\n<code>\nbeginShape(POINTS);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\nbeginShape(LINES);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\nnoFill();\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\nnoFill();\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape(CLOSE);\n</code>\n</div>\n\n<div>\n<code>\nbeginShape(TRIANGLES);\nvertex(30, 75);\nvertex(40, 20);\nvertex(50, 75);\nvertex(60, 20);\nvertex(70, 75);\nvertex(80, 20);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\nbeginShape();\nvertex(20, 20);\nvertex(40, 20);\nvertex(40, 40);\nvertex(60, 40);\nvertex(60, 60);\nvertex(20, 60);\nendShape(CLOSE);\n</code>\n</div>"],"alt":"white square-shape with black outline in middle-right of canvas.\n4 black points in a square shape in middle-right of canvas.\n2 horizontal black lines. In the top-right and bottom-right of canvas.\n3 line shape with horizontal on top, vertical in middle and horizontal bottom.\nsquare line shape in middle-right of canvas.\n2 white triangle shapes mid-right canvas. left one pointing up and right down.\n5 horizontal interlocking and alternating white triangles in mid-right canvas.\n4 interlocking white triangles in 45 degree rotated square-shape.\n2 white rectangle shapes in mid-right canvas. Both 20x55.\n3 side-by-side white rectangles center rect is smaller in mid-right canvas.\nThick white l-shape with black outline mid-top-left of canvas.","class":"p5","module":"Shape","submodule":"Vertex"},{"file":"src/core/shape/vertex.js","line":267,"description":"<p>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).</p>\n<p>The first time bezierVertex() is used within a <a href=\"#/p5/beginShape\">beginShape()</a>\ncall, it must be prefaced with a call to <a href=\"#/p5/vertex\">vertex()</a> to set the first anchor\npoint. This function must be used between <a href=\"#/p5/beginShape\">beginShape()</a> and <a href=\"#/p5/endShape\">endShape()</a>\nand only when there is no MODE or POINTS parameter specified to\n<a href=\"#/p5/beginShape\">beginShape()</a>.</p>\n","itemtype":"method","name":"bezierVertex","chainable":1,"example":["\n<div>\n<code>\nnoFill();\nbeginShape();\nvertex(30, 20);\nbezierVertex(80, 0, 80, 75, 30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\nbeginShape();\nvertex(30, 20);\nbezierVertex(80, 0, 80, 75, 30, 75);\nbezierVertex(50, 80, 60, 25, 30, 20);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":267,"params":[{"name":"x2","description":"<p>x-coordinate for the first control point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate for the first control point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate for the second control point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate for the second control point</p>\n","type":"Number"},{"name":"x4","description":"<p>x-coordinate for the anchor point</p>\n","type":"Number"},{"name":"y4","description":"<p>y-coordinate for the anchor point</p>\n","type":"Number"}],"chainable":1},{"line":349,"params":[{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>z-coordinate for the first control point (for WebGL mode)</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>z-coordinate for the second control point (for WebGL mode)</p>\n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"<p>z-coordinate for the anchor point (for WebGL mode)</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/vertex.js","line":389,"description":"<p>Specifies vertex coordinates for curves. This function may only\nbe used between <a href=\"#/p5/beginShape\">beginShape()</a> and <a href=\"#/p5/endShape\">endShape()</a> and only when there\nis no MODE parameter specified to <a href=\"#/p5/beginShape\">beginShape()</a>.\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.</p>\n<p>The first and last points in a series of curveVertex() lines will be used to\nguide the beginning and end of a the curve. A minimum of four\npoints is required to draw a tiny curve between the second and\nthird points. Adding a fifth point with curveVertex() will draw\nthe curve between the second, third, and fourth points. The\ncurveVertex() function is an implementation of Catmull-Rom\nsplines.</p>\n","itemtype":"method","name":"curveVertex","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"Upside-down u-shape line, mid canvas. left point extends beyond canvas view.","class":"p5","module":"Shape","submodule":"Vertex","overloads":[{"line":389,"params":[{"name":"x","description":"<p>x-coordinate of the vertex</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the vertex</p>\n","type":"Number"}],"chainable":1},{"line":434,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"<p>z-coordinate of the vertex (for WebGL mode)</p>\n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/core/shape/vertex.js","line":498,"description":"<p>Use the <a href=\"#/p5/beginContour\">beginContour()</a> and <a href=\"#/p5/endContour\">endContour()</a> functions to create negative\nshapes within shapes such as the center of the letter 'O'. <a href=\"#/p5/beginContour\">beginContour()</a>\nbegins recording vertices for the shape and <a href=\"#/p5/endContour\">endContour()</a> 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.</p>\n<p>These functions can only be used within a <a href=\"#/p5/beginShape\">beginShape()</a>/<a href=\"#/p5/endShape\">endShape()</a> pair and\ntransformations such as <a href=\"#/p5/translate\">translate()</a>, <a href=\"#/p5/rotate\">rotate()</a>, and <a href=\"#/p5/scale\">scale()</a> do not work\nwithin a <a href=\"#/p5/beginContour\">beginContour()</a>/<a href=\"#/p5/endContour\">endContour()</a> pair. It is also not possible to use\nother shapes, such as <a href=\"#/p5/ellipse\">ellipse()</a> or <a href=\"#/p5/rect\">rect()</a> within.</p>\n","itemtype":"method","name":"endContour","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"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":557,"description":"<p>The <a href=\"#/p5/endShape\">endShape()</a> function is the companion to <a href=\"#/p5/beginShape\">beginShape()</a> and may only be\ncalled after <a href=\"#/p5/beginShape\">beginShape()</a>. When <a href=\"#/p5/endshape\">endShape()</a> is called, all of image data\ndefined since the previous call to <a href=\"#/p5/beginShape\">beginShape()</a> is written into the image\nbuffer. The constant CLOSE as the value for the MODE parameter to close\nthe shape (to connect the beginning and the end).</p>\n","itemtype":"method","name":"endShape","params":[{"name":"mode","description":"<p>use CLOSE to close the shape</p>\n","type":"Constant","optional":true}],"chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"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":642,"description":"<p>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 <a href=\"#/p5/beginShape\">beginShape()</a> call, it\nmust be prefaced with a call to <a href=\"#/p5/vertex\">vertex()</a> 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).</p>\n<p>This function must be used between <a href=\"#/p5/beginShape\">beginShape()</a> and <a href=\"#/p5/endShape\">endShape()</a>\nand only when there is no MODE or POINTS parameter specified to\n<a href=\"#/p5/beginShape\">beginShape()</a>.</p>\n","itemtype":"method","name":"quadraticVertex","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":642,"params":[{"name":"cx","description":"<p>x-coordinate for the control point</p>\n","type":"Number"},{"name":"cy","description":"<p>y-coordinate for the control point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate for the anchor point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate for the anchor point</p>\n","type":"Number"}],"chainable":1},{"line":707,"params":[{"name":"cx","description":"","type":"Number"},{"name":"cy","description":"","type":"Number"},{"name":"cz","description":"<p>z-coordinate for the control point (for WebGL mode)</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>z-coordinate for the anchor point (for WebGL mode)</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/vertex.js","line":800,"description":"<p>All shapes are constructed by connecting a series of vertices. <a href=\"#/p5/vertex\">vertex()</a>\nis used to specify the vertex coordinates for points, lines, triangles,\nquads, and polygons. It is used exclusively within the <a href=\"#/p5/beginShape\">beginShape()</a> and\n<a href=\"#/p5/endShape\">endShape()</a> functions.</p>\n","itemtype":"method","name":"vertex","chainable":1,"example":["\n<div>\n<code>\nstrokeWeight(3);\nbeginShape(POINTS);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":800,"params":[{"name":"x","description":"<p>x-coordinate of the vertex</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the vertex</p>\n","type":"Number"}],"chainable":1},{"line":931,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"<p>z-coordinate of the vertex</p>\n","type":"Number"},{"name":"u","description":"<p>the vertex's texture u-coordinate</p>\n","type":"Number","optional":true},{"name":"v","description":"<p>the vertex's texture v-coordinate</p>\n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/core/constants.js","line":10,"description":"<p>The default, two-dimensional renderer.</p>\n","itemtype":"property","name":"P2D","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":16,"description":"<p>One of the two render modes in p5.js: P2D (default renderer) and WEBGL\nEnables 3D render by introducing the third dimension: Z</p>\n","itemtype":"property","name":"WEBGL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":25,"itemtype":"property","name":"ARROW","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":30,"itemtype":"property","name":"CROSS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":35,"itemtype":"property","name":"HAND","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":40,"itemtype":"property","name":"MOVE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":45,"itemtype":"property","name":"TEXT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":50,"itemtype":"property","name":"WAIT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":58,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"HALF_PI","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, HALF_PI);\n</code></div>"],"alt":"80x80 white quarter-circle with curve toward bottom right of canvas.","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":76,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"PI","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, PI);\n</code></div>"],"alt":"white half-circle with curve toward bottom of canvas.","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":94,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"QUARTER_PI","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, QUARTER_PI);\n</code></div>"],"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":112,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"TAU","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, TAU);\n</code></div>"],"alt":"80x80 white ellipse shape in center of canvas.","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":130,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"TWO_PI","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, TWO_PI);\n</code></div>"],"alt":"80x80 white ellipse shape in center of canvas.","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":148,"description":"<p>Constant to be used with <a href=\"#/p5/angleMode\">angleMode()</a> function, to set the mode which\np5.js interprates and calculates angles (either DEGREES or RADIANS).</p>\n","itemtype":"property","name":"DEGREES","type":"String","final":1,"example":["\n<div class='norender'><code>\nfunction setup() {\n  angleMode(DEGREES);\n}\n</code></div>"],"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":162,"description":"<p>Constant to be used with <a href=\"#/p5/angleMode\">angleMode()</a> function, to set the mode which\np5.js interprates and calculates angles (either RADIANS or DEGREES).</p>\n","itemtype":"property","name":"RADIANS","type":"String","final":1,"example":["\n<div class='norender'><code>\nfunction setup() {\n  angleMode(RADIANS);\n}\n</code></div>"],"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":180,"itemtype":"property","name":"CORNER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":185,"itemtype":"property","name":"CORNERS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":190,"itemtype":"property","name":"RADIUS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":195,"itemtype":"property","name":"RIGHT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":200,"itemtype":"property","name":"LEFT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":205,"itemtype":"property","name":"CENTER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":210,"itemtype":"property","name":"TOP","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":215,"itemtype":"property","name":"BOTTOM","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":220,"itemtype":"property","name":"BASELINE","type":"String","final":1,"default":"alphabetic","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":226,"itemtype":"property","name":"POINTS","type":"Number","final":1,"default":"0x0000","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":232,"itemtype":"property","name":"LINES","type":"Number","final":1,"default":"0x0001","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":238,"itemtype":"property","name":"LINE_STRIP","type":"Number","final":1,"default":"0x0003","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":244,"itemtype":"property","name":"LINE_LOOP","type":"Number","final":1,"default":"0x0002","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":250,"itemtype":"property","name":"TRIANGLES","type":"Number","final":1,"default":"0x0004","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":256,"itemtype":"property","name":"TRIANGLE_FAN","type":"Number","final":1,"default":"0x0006","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":262,"itemtype":"property","name":"TRIANGLE_STRIP","type":"Number","final":1,"default":"0x0005","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":268,"itemtype":"property","name":"QUADS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":273,"itemtype":"property","name":"QUAD_STRIP","type":"String","final":1,"default":"quad_strip","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":279,"itemtype":"property","name":"TESS","type":"String","final":1,"default":"tess","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":285,"itemtype":"property","name":"CLOSE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":290,"itemtype":"property","name":"OPEN","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":295,"itemtype":"property","name":"CHORD","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":300,"itemtype":"property","name":"PIE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":305,"itemtype":"property","name":"PROJECT","type":"String","final":1,"default":"square","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":311,"itemtype":"property","name":"SQUARE","type":"String","final":1,"default":"butt","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":317,"itemtype":"property","name":"ROUND","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":322,"itemtype":"property","name":"BEVEL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":327,"itemtype":"property","name":"MITER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":334,"itemtype":"property","name":"RGB","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":339,"description":"<p>HSB (hue, saturation, brightness) is a type of color model.\nYou can learn more about it at\n<a href=\"https://learnui.design/blog/the-hsb-color-system-practicioners-primer.html\">HSB</a>.</p>\n","itemtype":"property","name":"HSB","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":348,"itemtype":"property","name":"HSL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":355,"description":"<p>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 <a href=\"/#/p5.Element/size\">size</a> function as AUTO, at a time.</p>\n","itemtype":"property","name":"AUTO","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":365,"itemtype":"property","name":"ALT","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":371,"itemtype":"property","name":"BACKSPACE","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":376,"itemtype":"property","name":"CONTROL","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":381,"itemtype":"property","name":"DELETE","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":386,"itemtype":"property","name":"DOWN_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":391,"itemtype":"property","name":"ENTER","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":396,"itemtype":"property","name":"ESCAPE","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":401,"itemtype":"property","name":"LEFT_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":406,"itemtype":"property","name":"OPTION","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":411,"itemtype":"property","name":"RETURN","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":416,"itemtype":"property","name":"RIGHT_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":421,"itemtype":"property","name":"SHIFT","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":426,"itemtype":"property","name":"TAB","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":431,"itemtype":"property","name":"UP_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":438,"itemtype":"property","name":"BLEND","type":"String","final":1,"default":"source-over","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":444,"itemtype":"property","name":"REMOVE","type":"String","final":1,"default":"destination-out","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":450,"itemtype":"property","name":"ADD","type":"String","final":1,"default":"lighter","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":458,"itemtype":"property","name":"DARKEST","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":463,"itemtype":"property","name":"LIGHTEST","type":"String","final":1,"default":"lighten","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":469,"itemtype":"property","name":"DIFFERENCE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":474,"itemtype":"property","name":"SUBTRACT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":479,"itemtype":"property","name":"EXCLUSION","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":484,"itemtype":"property","name":"MULTIPLY","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":489,"itemtype":"property","name":"SCREEN","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":494,"itemtype":"property","name":"REPLACE","type":"String","final":1,"default":"copy","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":500,"itemtype":"property","name":"OVERLAY","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":505,"itemtype":"property","name":"HARD_LIGHT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":510,"itemtype":"property","name":"SOFT_LIGHT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":515,"itemtype":"property","name":"DODGE","type":"String","final":1,"default":"color-dodge","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":521,"itemtype":"property","name":"BURN","type":"String","final":1,"default":"color-burn","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":529,"itemtype":"property","name":"THRESHOLD","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":534,"itemtype":"property","name":"GRAY","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":539,"itemtype":"property","name":"OPAQUE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":544,"itemtype":"property","name":"INVERT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":549,"itemtype":"property","name":"POSTERIZE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":554,"itemtype":"property","name":"DILATE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":559,"itemtype":"property","name":"ERODE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":564,"itemtype":"property","name":"BLUR","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":571,"itemtype":"property","name":"NORMAL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":576,"itemtype":"property","name":"ITALIC","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":581,"itemtype":"property","name":"BOLD","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":586,"itemtype":"property","name":"BOLDITALIC","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":598,"itemtype":"property","name":"LINEAR","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":603,"itemtype":"property","name":"QUADRATIC","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":608,"itemtype":"property","name":"BEZIER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":613,"itemtype":"property","name":"CURVE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":620,"itemtype":"property","name":"STROKE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":625,"itemtype":"property","name":"FILL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":630,"itemtype":"property","name":"TEXTURE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":635,"itemtype":"property","name":"IMMEDIATE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":643,"itemtype":"property","name":"IMAGE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":651,"itemtype":"property","name":"NEAREST","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":656,"itemtype":"property","name":"REPEAT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":661,"itemtype":"property","name":"CLAMP","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":666,"itemtype":"property","name":"MIRROR","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":673,"itemtype":"property","name":"LANDSCAPE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":678,"itemtype":"property","name":"PORTRAIT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":688,"itemtype":"property","name":"GRID","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":694,"itemtype":"property","name":"AXES","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/environment.js","line":20,"description":"<p>The <a href=\"#/p5/print\">print()</a> function writes to the console area of\nyour browser. This function is often helpful for looking at the data a program\nis producing. This function creates a new line of text for each call to\nthe function. Individual elements can be separated with quotes (\"\") and joined\nwith the addition operator (+).</p>\n<p>Note that calling print() without any arguments invokes the window.print()\nfunction which opens the browser's print dialog. To print a blank line\nto console you can write print('\\n').</p>\n","itemtype":"method","name":"print","params":[{"name":"contents","description":"<p>any combination of Number, String, Object, Boolean,\n                      Array to print</p>\n","type":"Any"}],"example":["\n<div><code class='norender'>\nlet x = 10;\nprint('The value of x is ' + x);\n// prints \"The value of x is 10\"\n</code></div>"],"alt":"default grey canvas","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":52,"description":"<p>The system variable <a href=\"#/p5/frameCount\">frameCount</a> contains the\nnumber of frames that have been displayed since the program started. Inside\n<a href=\"#/p5/setup\">setup()</a> the value is 0, after the first iteration\nof draw it is 1, etc.</p>\n","itemtype":"property","name":"frameCount","type":"Integer","readonly":"","example":["\n<div><code>\nfunction setup() {\n  frameRate(30);\n  textSize(30);\n  textAlign(CENTER);\n}\n\nfunction draw() {\n  background(200);\n  text(frameCount, width / 2, height / 2);\n}\n</code></div>"],"alt":"numbers rapidly counting upward with frame count set to 30.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":79,"description":"<p>The system variable <a href=\"#/p5/deltaTime\">deltaTime</a> contains the time\ndifference between the beginning of the previous frame and the beginning\nof the current frame in milliseconds.</p>\n<p>This variable is useful for creating time sensitive animation or physics\ncalculation that should stay constant regardless of frame rate.</p>\n","itemtype":"property","name":"deltaTime","type":"Integer","readonly":"","example":["\n<div><code>\nlet rectX = 0;\nlet fr = 30; //starting FPS\nlet clr;\n\nfunction setup() {\n  background(200);\n  frameRate(fr); // Attempt to refresh at starting FPS\n  clr = color(255, 0, 0);\n}\n\nfunction draw() {\n  background(200);\n  rectX = rectX + 1 * (deltaTime / 50); // Move Rectangle in relation to deltaTime\n\n  if (rectX >= width) {\n    // If you go off screen.\n    if (fr === 30) {\n      clr = color(0, 0, 255);\n      fr = 10;\n      frameRate(fr); // make frameRate 10 FPS\n    } else {\n      clr = color(255, 0, 0);\n      fr = 30;\n      frameRate(fr); // make frameRate 30 FPS\n    }\n    rectX = 0;\n  }\n  fill(clr);\n  rect(rectX, 40, 20, 20);\n}\n</code></div>"],"alt":"red rect moves left to right, followed by blue rect moving at the same speed\nwith a lower frame rate. Loops.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":129,"description":"<p>Confirms if the window a p5.js program is in is \"focused,\" meaning that\nthe sketch will accept mouse or keyboard input. This variable is\n\"true\" if the window is focused and \"false\" if not.</p>\n","itemtype":"property","name":"focused","type":"Boolean","readonly":"","example":["\n<div><code>\n// To demonstrate, put two windows side by side.\n// Click on the window that the p5 sketch isn't in!\nfunction draw() {\n  background(200);\n  noStroke();\n  fill(0, 200, 0);\n  ellipse(25, 25, 50, 50);\n\n  if (!focused) {\n   // or \"if (focused === false)\"\n    stroke(200, 0, 0);\n    line(0, 0, 100, 100);\n    line(100, 0, 0, 100);\n  }\n}\n</code></div>"],"alt":"green 50x50 ellipse at top left. Red X covers canvas when page focus changes","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":160,"description":"<p>Sets the cursor to a predefined symbol or an image, or makes it visible\nif already hidden. If you are trying to set an image as the cursor, the\nrecommended size is 16x16 or 32x32 pixels. The values for parameters x and y\nmust be less than the dimensions of the image.</p>\n","itemtype":"method","name":"cursor","params":[{"name":"type","description":"<p>Built-In: either ARROW, CROSS, HAND, MOVE, TEXT and WAIT\n                              Native CSS properties: 'grab', 'progress', 'cell' etc.\n                              External: path for cursor's images\n                              (Allowed File extensions: .cur, .gif, .jpg, .jpeg, .png)\n                              For more information on Native CSS cursors and url visit:\n                              <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/cursor\">https://developer.mozilla.org/en-US/docs/Web/CSS/cursor</a></p>\n","type":"String|Constant"},{"name":"x","description":"<p>the horizontal active spot of the cursor (must be less than 32)</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>the vertical active spot of the cursor (must be less than 32)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\n// Move the mouse across the quadrants\n// to see the cursor change\nfunction draw() {\n  line(width / 2, 0, width / 2, height);\n  line(0, height / 2, width, height / 2);\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</code></div>"],"alt":"canvas is divided into four quadrants. cursor on first is a cross, second is a progress,\nthird is a custom cursor using path to the cursor and fourth is a grab.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":228,"description":"<p>Specifies the number of frames to be displayed every second. For example,\nthe function call frameRate(30) will attempt to refresh 30 times a second.\nIf the processor is not fast enough to maintain the specified rate, the\nframe rate will not be achieved. Setting the frame rate within \n<a href=\"#/p5/setup\">setup()</a> is recommended. The default frame rate is\nbased on the frame rate of the display (here also called \"refresh rate\"), \nwhich is set to 60 frames per second on most computers. A frame rate of 24\nframes per second (usual for movies) or above will be enough for smooth \nanimations. This is the same as setFrameRate(val).</p>\n<p>Calling <a href=\"#/p5/frameRate\">frameRate()</a> with no arguments returns\nthe current framerate. The draw function must run at least once before it will\nreturn a value. This is the same as <a href=\"#/p5/getFrameRate\">getFrameRate()</a>.</p>\n<p>Calling <a href=\"#/p5/frameRate\">frameRate()</a> with arguments that are not\nof the type numbers or are non positive also returns current framerate.</p>\n","itemtype":"method","name":"frameRate","chainable":1,"example":["\n\n<div><code>\nlet rectX = 0;\nlet fr = 30; //starting FPS\nlet clr;\n\nfunction setup() {\n  background(200);\n  frameRate(fr); // Attempt to refresh at starting FPS\n  clr = color(255, 0, 0);\n}\n\nfunction draw() {\n  background(200);\n  rectX = rectX += 1; // Move Rectangle\n\n  if (rectX >= width) {\n   // If you go off screen.\n    if (fr === 30) {\n      clr = color(0, 0, 255);\n      fr = 10;\n      frameRate(fr); // make frameRate 10 FPS\n    } else {\n      clr = color(255, 0, 0);\n      fr = 30;\n      frameRate(fr); // make frameRate 30 FPS\n    }\n    rectX = 0;\n  }\n  fill(clr);\n  rect(rectX, 40, 20, 20);\n}\n</code></div>"],"alt":"blue rect moves left to right, followed by red rect moving faster. Loops.","class":"p5","module":"Environment","submodule":"Environment","overloads":[{"line":228,"params":[{"name":"fps","description":"<p>number of frames to be displayed every second</p>\n","type":"Number"}],"chainable":1},{"line":288,"params":[],"return":{"description":"current frameRate","type":"Number"}}]},{"file":"src/core/environment.js","line":331,"description":"<p>Hides the cursor from view.</p>\n","itemtype":"method","name":"noCursor","example":["\n<div><code>\nfunction setup() {\n  noCursor();\n}\n\nfunction draw() {\n  background(200);\n  ellipse(mouseX, mouseY, 10, 10);\n}\n</code></div>"],"alt":"cursor becomes 10x 10 white ellipse the moves with mouse x and y.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":354,"description":"<p>System variable that stores the width of the screen display according to The\ndefault <a href=\"#/p5/pixelDensity\">pixelDensity</a>. This is used to run a\nfull-screen program on any display size. To return actual screen size,\nmultiply this by pixelDensity.</p>\n","itemtype":"property","name":"displayWidth","type":"Number","readonly":"","example":["\n<div class=\"norender\"><code>\ncreateCanvas(displayWidth, displayHeight);\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":372,"description":"<p>System variable that stores the height of the screen display according to The\ndefault <a href=\"#/p5/pixelDensity\">pixelDensity</a>. This is used to run a\nfull-screen program on any display size. To return actual screen size,\nmultiply this by pixelDensity.</p>\n","itemtype":"property","name":"displayHeight","type":"Number","readonly":"","example":["\n<div class=\"norender\"><code>\ncreateCanvas(displayWidth, displayHeight);\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":390,"description":"<p>System variable that stores the width of the inner window, it maps to\nwindow.innerWidth.</p>\n","itemtype":"property","name":"windowWidth","type":"Number","readonly":"","example":["\n<div class=\"norender\"><code>\ncreateCanvas(windowWidth, windowHeight);\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":405,"description":"<p>System variable that stores the height of the inner window, it maps to\nwindow.innerHeight.</p>\n","itemtype":"property","name":"windowHeight","type":"Number","readonly":"","example":["\n<div class=\"norender\"><code>\ncreateCanvas(windowWidth, windowHeight);\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":421,"description":"<p>The <a href=\"#/p5/windowResized\">windowResized()</a> function is called once\nevery time the browser window is resized. This is a good place to resize the\ncanvas or do any other adjustments to accommodate the new window size.</p>\n","itemtype":"method","name":"windowResized","example":["\n<div class=\"norender\"><code>\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</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":475,"description":"<p>System variable that stores the width of the drawing canvas. This value\nis set by the first parameter of the <a href=\"#/p5/createCanvas\">createCanvas()</a> function.\nFor example, the function call createCanvas(320, 240) sets the width\nvariable to the value 320. The value of width defaults to 100 if\n<a href=\"#/p5/createCanvas\">createCanvas()</a> is not used in a program.</p>\n","itemtype":"property","name":"width","type":"Number","readonly":"","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":487,"description":"<p>System variable that stores the height of the drawing canvas. This value\nis set by the second parameter of the <a href=\"#/p5/createCanvas\">createCanvas()</a> function. For\nexample, the function call createCanvas(320, 240) sets the height\nvariable to the value 240. The value of height defaults to 100 if\n<a href=\"#/p5/createCanvas\">createCanvas()</a> is not used in a program.</p>\n","itemtype":"property","name":"height","type":"Number","readonly":"","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":499,"description":"<p>If argument is given, sets the sketch to fullscreen or not based on the\nvalue of the argument. If no argument is given, returns the current\nfullscreen state. Note that due to browser restrictions this can only\nbe called on user input, for example, on mouse press like the example\nbelow.</p>\n","itemtype":"method","name":"fullscreen","params":[{"name":"val","description":"<p>whether the sketch should be in fullscreen mode\nor not</p>\n","type":"Boolean","optional":true}],"return":{"description":"current fullscreen state","type":"Boolean"},"example":["\n<div>\n<code>\n// Clicking in the box toggles fullscreen on and off.\nfunction setup() {\n  background(200);\n}\nfunction mousePressed() {\n  if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n    let fs = fullscreen();\n    fullscreen(!fs);\n  }\n}\n</code>\n</div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":549,"description":"<p>Sets the pixel scaling for high pixel density displays. By default\npixel density is set to match display density, call pixelDensity(1)\nto turn this off. Calling <a href=\"#/p5/pixelDensity\">pixelDensity()</a> with no arguments returns\nthe current pixel density of the sketch.</p>\n","itemtype":"method","name":"pixelDensity","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  pixelDensity(1);\n  createCanvas(100, 100);\n  background(200);\n  ellipse(width / 2, height / 2, 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  pixelDensity(3.0);\n  createCanvas(100, 100);\n  background(200);\n  ellipse(width / 2, height / 2, 50, 50);\n}\n</code>\n</div>"],"alt":"fuzzy 50x50 white ellipse with black outline in center of canvas.\nsharp 50x50 white ellipse with black outline in center of canvas.","class":"p5","module":"Environment","submodule":"Environment","overloads":[{"line":549,"params":[{"name":"val","description":"<p>whether or how much the sketch should scale</p>\n","type":"Number"}],"chainable":1},{"line":585,"params":[],"return":{"description":"current pixel density of the sketch","type":"Number"}}]},{"file":"src/core/environment.js","line":604,"description":"<p>Returns the pixel density of the current display the sketch is running on.</p>\n","itemtype":"method","name":"displayDensity","return":{"description":"current pixel density of the display","type":"Number"},"example":["\n<div>\n<code>\nfunction setup() {\n  let density = displayDensity();\n  pixelDensity(density);\n  createCanvas(100, 100);\n  background(200);\n  ellipse(width / 2, height / 2, 50, 50);\n}\n</code>\n</div>"],"alt":"50x50 white ellipse with black outline in center of canvas.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":659,"description":"<p>Gets the current URL.</p>\n","itemtype":"method","name":"getURL","return":{"description":"url","type":"String"},"example":["\n<div>\n<code>\nlet url;\nlet x = 100;\n\nfunction setup() {\n  fill(0);\n  noStroke();\n  url = getURL();\n}\n\nfunction draw() {\n  background(200);\n  text(url, x, height / 2);\n  x--;\n}\n</code>\n</div>"],"alt":"current url (http://p5js.org/reference/#/p5/getURL) moves right to left.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":687,"description":"<p>Gets the current URL path as an array.</p>\n","itemtype":"method","name":"getURLPath","return":{"description":"path components","type":"String[]"},"example":["\n<div class='norender'><code>\nfunction setup() {\n  let urlPath = getURLPath();\n  for (let i = 0; i < urlPath.length; i++) {\n    text(urlPath[i], 10, i * 20 + 20);\n  }\n}\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":706,"description":"<p>Gets the current URL params as an Object.</p>\n","itemtype":"method","name":"getURLParams","return":{"description":"URL params","type":"Object"},"example":["\n<div class='norender notest'>\n<code>\n// Example: http://p5js.org?year=2014&month=May&day=15\n\nfunction setup() {\n  let params = getURLParams();\n  text(params.day, 10, 20);\n  text(params.month, 10, 40);\n  text(params.year, 10, 60);\n}\n</code>\n</div>"],"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":27,"description":"<p>Set up our translation function, with loaded languages</p>\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":42,"description":"<p>Called directly before <a href=\"#/p5/setup\">setup()</a>, the <a href=\"#/p5/preload\">preload()</a> function is used to handle\nasynchronous loading of external files in a blocking way. If a preload\nfunction is defined, <a href=\"#/p5/setup\">setup()</a> will wait until any load calls within have\nfinished. Nothing besides load calls (<a href=\"#/p5/loadImage\">loadImage</a>, <a href=\"#/p5/loadJSON\">loadJSON</a>, <a href=\"#/p5/loadFont\">loadFont</a>,\n<a href=\"#/p5/loadStrings\">loadStrings</a>, etc.) should be inside the preload function. If asynchronous\nloading is preferred, the load methods can instead be called in <a href=\"#/p5/setup\">setup()</a>\nor anywhere else with the use of a callback parameter.</p>\n<p>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 <a href=\"http://bit.ly/2kQ6Nio\">here</a>.</p>\n","itemtype":"method","name":"preload","example":["\n<div><code>\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</code></div>"],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":83,"description":"<p>The <a href=\"#/p5/setup\">setup()</a> 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 <a href=\"#/p5/setup\">setup()</a> function for each program and it shouldn't\nbe called again after its initial execution.</p>\n<p>Note: Variables declared within <a href=\"#/p5/setup\">setup()</a> are not accessible within other\nfunctions, including <a href=\"#/p5/draw\">draw()</a>.</p>\n","itemtype":"method","name":"setup","example":["\n<div><code>\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</code></div>"],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":114,"description":"<p>Called directly after <a href=\"#/p5/setup\">setup()</a>, the <a href=\"#/p5/draw\">draw()</a> function continuously executes\nthe lines of code contained inside its block until the program is stopped\nor <a href=\"#/p5/noLoop\">noLoop()</a> is called. Note if <a href=\"#/p5/noLoop\">noLoop()</a> is called in <a href=\"#/p5/setup\">setup()</a>, <a href=\"#/p5/draw\">draw()</a> will\nstill be executed once before stopping. <a href=\"#/p5/draw\">draw()</a> is called automatically and\nshould never be called explicitly.</p>\n<p>It should always be controlled with <a href=\"#/p5/noLoop\">noLoop()</a>, <a href=\"#/p5/redraw\">redraw()</a> and <a href=\"#/p5/loop\">loop()</a>. After\n<a href=\"#/p5/noLoop\">noLoop()</a> stops the code in <a href=\"#/p5/draw\">draw()</a> from executing, <a href=\"#/p5/redraw\">redraw()</a> causes the\ncode inside <a href=\"#/p5/draw\">draw()</a> to execute once, and <a href=\"#/p5/loop\">loop()</a> will cause the code\ninside <a href=\"#/p5/draw\">draw()</a> to resume executing continuously.</p>\n<p>The number of times <a href=\"#/p5/draw\">draw()</a> executes in each second may be controlled with\nthe <a href=\"#/p5/frameRate\">frameRate()</a> function.</p>\n<p>There can only be one <a href=\"#/p5/draw\">draw()</a> function for each sketch, and <a href=\"#/p5/draw\">draw()</a> must\nexist if you want the code to run continuously, or to process events such\nas <a href=\"#/p5/mousePressed\">mousePressed()</a>. Sometimes, you might have an empty call to <a href=\"#/p5/draw\">draw()</a> in\nyour program, as shown in the above example.</p>\n<p>It is important to note that the drawing coordinate system will be reset\nat the beginning of each <a href=\"#/p5/draw\">draw()</a> call. If any transformations are performed\nwithin <a href=\"#/p5/draw\">draw()</a> (ex: scale, rotate, translate), their effects will be\nundone at the beginning of <a href=\"#/p5/draw\">draw()</a>, so transformations will not accumulate\nover time. On the other hand, styling applied (ex: fill, stroke, etc) will\nremain in effect.</p>\n","itemtype":"method","name":"draw","example":["\n<div><code>\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</code></div>"],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":411,"description":"<p>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.</p>\n","itemtype":"method","name":"remove","example":["\n<div class='norender'><code>\nfunction draw() {\n  ellipse(50, 50, 10, 10);\n}\n\nfunction mousePressed() {\n  remove(); // remove whole sketch on mouse press\n}\n</code></div>"],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":683,"description":"<p>Allows for the friendly error system (FES) to be turned off when creating a sketch,\nwhich can give a significant boost to performance when needed.\nSee <a href='https://github.com/processing/p5.js/wiki/Optimizing-p5.js-Code-for-Performance#disable-the-friendly-error-system-fes'>\ndisabling the friendly error system</a>.</p>\n","itemtype":"property","name":"disableFriendlyErrors","type":"Boolean","example":["\n<div class=\"norender notest\"><code>\np5.disableFriendlyErrors = true;\n\nfunction setup() {\n  createCanvas(100, 50);\n}\n</code></div>"],"class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/p5.Element.js","line":21,"description":"<p>Underlying HTML element. All normal HTML methods can be called on this.</p>\n","example":["\n<div>\n<code>\nfunction setup() {\n  let c = createCanvas(50, 50);\n  c.elt.style.border = '5px solid red';\n}\n\nfunction draw() {\n  background(220);\n}\n</code>\n</div>"],"itemtype":"property","name":"elt","readonly":"","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":47,"description":"<p>Attaches the element to the parent specified. A way of setting\n the container for the element. Accepts either a string ID, DOM\n node, or <a href=\"#/p5.Element\">p5.Element</a>. If no arguments given, parent node is returned.\n For more ways to position the canvas, see the\n <a href='https://github.com/processing/p5.js/wiki/Positioning-your-canvas'>\n positioning the canvas</a> wiki page.</p>\n","itemtype":"method","name":"parent","chainable":1,"example":["\n <div class=\"norender notest\"><code>\n // Add the following comment to html file.\n // &lt;div id=\"myContainer\">&lt;/div>\n// The js code\n let cnv = createCanvas(100, 100);\n cnv.parent('myContainer');\n </code></div>\n<div class='norender'><code>\n let div0 = createDiv('this is the parent');\n let div1 = createDiv('this is the child');\n div1.parent(div0); // use p5.Element\n </code></div>\n<div class='norender'><code>\n let div0 = createDiv('this is the parent');\n div0.id('apples');\n let div1 = createDiv('this is the child');\n div1.parent('apples'); // use id\n </code></div>\n<div class='norender notest'><code>\n let elt = document.getElementById('myParentDiv');\n let div1 = createDiv('this is the child');\n div1.parent(elt); // use element from page\n </code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":47,"params":[{"name":"parent","description":"<p>the ID, DOM node, or <a href=\"#/p5.Element\">p5.Element</a>\n                         of desired parent element</p>\n","type":"String|p5.Element|Object"}],"chainable":1},{"line":93,"params":[],"return":{"description":"","type":"p5.Element"}}]},{"file":"src/core/p5.Element.js","line":114,"description":"<p>Sets the ID of the element. If no ID argument is passed in, it instead\n returns the current ID of the element.\n Note that only one element can have a particular id in a page.\n The <a href=\"#/p5.Element/class\">.class()</a> function can be used\n to identify multiple elements with the same class name.</p>\n","itemtype":"method","name":"id","chainable":1,"example":["\n <div class='norender'><code>\n function setup() {\n   let cnv = createCanvas(100, 100);\n   // Assigns a CSS selector ID to\n   // the canvas element.\n   cnv.id('mycanvas');\n }\n </code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":114,"params":[{"name":"id","description":"<p>ID of the element</p>\n","type":"String"}],"chainable":1},{"line":139,"params":[],"return":{"description":"the id of the element","type":"String"}}]},{"file":"src/core/p5.Element.js","line":154,"description":"<p>Adds given class to the element. If no class argument is passed in, it\n instead returns a string containing the current class(es) of the element.</p>\n","itemtype":"method","name":"class","chainable":1,"example":["\n <div class='norender'><code>\n function setup() {\n   let cnv = createCanvas(100, 100);\n   // Assigns a CSS selector class 'small'\n   // to the canvas element.\n   cnv.class('small');\n }\n </code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":154,"params":[{"name":"class","description":"<p>class to add</p>\n","type":"String"}],"chainable":1},{"line":176,"params":[],"return":{"description":"the class of the element","type":"String"}}]},{"file":"src/core/p5.Element.js","line":189,"description":"<p>The .<a href=\"#/p5.Element/mousePressed\">mousePressed()</a> function is called\nonce after every time a mouse button is pressed over the element. Some mobile\nbrowsers may also trigger this event on a touch screen, if the user performs\na quick tap. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"mousePressed","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               pressed over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mousePressed(changeGray); // attach listener for\n  // canvas click only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any click anywhere\nfunction mousePressed() {\n  d = d + 10;\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":246,"description":"<p>The .<a href=\"#/p5.Element/doubleClicked\">doubleClicked()</a> function is called once after every time a\nmouse button is pressed twice over the element. This can be used to\nattach element and action specific event listeners.</p>\n","itemtype":"method","name":"doubleClicked","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               double clicked over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"return":{"description":"","type":"p5.Element"},"example":["\n<div class='norender'><code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.doubleClicked(changeGray); // attach listener for\n  // canvas double click only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any double click anywhere\nfunction doubleClicked() {\n  d = d + 10;\n}\n\n// this function fires only when cnv is double clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":292,"description":"<p>The <a href=\"#/p5.Element/mouseWheel\">mouseWheel()</a> function is called\nonce after every time a mouse wheel is scrolled over the element. This can\nbe used to attach element specific event listeners.</p>\n<p>The function accepts a callback function as argument which will be executed\nwhen the <code>wheel</code> event is triggered on the element, the callback function is\npassed one argument <code>event</code>. The <code>event.deltaY</code> property returns negative\nvalues if the mouse wheel is rotated up or away from the user and positive\nin the other direction. The <code>event.deltaX</code> does the same as <code>event.deltaY</code>\nexcept it reads the horizontal wheel scroll of the mouse wheel.</p>\n<p>On OS X with \"natural\" scrolling enabled, the <code>event.deltaY</code> values are\nreversed.</p>\n","itemtype":"method","name":"mouseWheel","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               scrolled over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseWheel(changeSize); // attach listener for\n  // activity on canvas only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with mousewheel movement\n// anywhere on screen\nfunction mouseWheel() {\n  g = g + 10;\n}\n\n// this function fires with mousewheel movement\n// over canvas only\nfunction changeSize(event) {\n  if (event.deltaY > 0) {\n    d = d + 10;\n  } else {\n    d = d - 10;\n  }\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":354,"description":"<p>The <a href=\"#/p5.Element/mouseReleased\">mouseReleased()</a> function is\ncalled once after every time a mouse button is released over the element.\nSome mobile browsers may also trigger this event on a touch screen, if the\nuser performs a quick tap. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"mouseReleased","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               released over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseReleased(changeGray); // attach listener for\n  // activity on canvas only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires after the mouse has been\n// released\nfunction mouseReleased() {\n  d = d + 10;\n}\n\n// this function fires after the mouse has been\n// released while on canvas\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":403,"description":"<p>The .<a href=\"#/p5.Element/mouseClicked\">mouseClicked()</a> function is\ncalled once after a mouse button is pressed and released over the element.\nSome mobile browsers may also trigger this event on a touch screen, if the\nuser performs a quick tap.This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"mouseClicked","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               clicked over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseClicked(changeGray); // attach listener for\n  // activity on canvas only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires after the mouse has been\n// clicked anywhere\nfunction mouseClicked() {\n  d = d + 10;\n}\n\n// this function fires after the mouse has been\n// clicked on canvas\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code>\n</div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":454,"description":"<p>The .<a href=\"#/p5.Element/mouseMoved\">mouseMoved()</a> function is called once every time a\nmouse moves over the element. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"mouseMoved","params":[{"name":"fxn","description":"<p>function to be fired when a mouse moves\n                               over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d = 30;\nlet g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseMoved(changeSize); // attach listener for\n  // activity on canvas only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  fill(200);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires when mouse moves anywhere on\n// page\nfunction mouseMoved() {\n  g = g + 5;\n  if (g > 255) {\n    g = 0;\n  }\n}\n\n// this function fires when mouse moves over canvas\nfunction changeSize() {\n  d = d + 2;\n  if (d > 100) {\n    d = 0;\n  }\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":510,"description":"<p>The .<a href=\"#/p5.Element/mouseOver\">mouseOver()</a> function is called once after every time a\nmouse moves onto the element. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"mouseOver","params":[{"name":"fxn","description":"<p>function to be fired when a mouse moves\n                               onto the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseOver(changeGray);\n  d = 10;\n}\n\nfunction draw() {\n  ellipse(width / 2, height / 2, d, d);\n}\n\nfunction changeGray() {\n  d = d + 10;\n  if (d > 100) {\n    d = 0;\n  }\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":551,"description":"<p>The .<a href=\"#/p5.Element/mouseOut\">mouseOut()</a> function is called once after every time a\nmouse moves off the element. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"mouseOut","params":[{"name":"fxn","description":"<p>function to be fired when a mouse\n                               moves off of an element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseOut(changeGray);\n  d = 10;\n}\n\nfunction draw() {\n  ellipse(width / 2, height / 2, d, d);\n}\n\nfunction changeGray() {\n  d = d + 10;\n  if (d > 100) {\n    d = 0;\n  }\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":592,"description":"<p>The .<a href=\"#/p5.Element/touchStarted\">touchStarted()</a> function is called once after every time a touch is\nregistered. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"touchStarted","params":[{"name":"fxn","description":"<p>function to be fired when a touch\n                               starts over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d;\nlet g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.touchStarted(changeGray); // attach listener for\n  // canvas click only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any touch anywhere\nfunction touchStarted() {\n  d = d + 10;\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":639,"description":"<p>The .<a href=\"#/p5.Element/touchMoved\">touchMoved()</a> function is called once after every time a touch move is\nregistered. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"touchMoved","params":[{"name":"fxn","description":"<p>function to be fired when a touch moves over\n                               the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.touchMoved(changeGray); // attach listener for\n  // canvas click only\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":678,"description":"<p>The .<a href=\"#/p5.Element/touchEnded\">touchEnded()</a> function is called once after every time a touch is\nregistered. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"touchEnded","params":[{"name":"fxn","description":"<p>function to be fired when a touch ends\n                               over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d;\nlet g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.touchEnded(changeGray); // attach listener for\n  // canvas click only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any touch anywhere\nfunction touchEnded() {\n  d = d + 10;\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":725,"description":"<p>The .<a href=\"#/p5.Element/dragOver\">dragOver()</a> function is called once after every time a\nfile is dragged over the element. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"dragOver","params":[{"name":"fxn","description":"<p>function to be fired when a file is\n                               dragged over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div><code>\n// To test this sketch, simply drag a\n// file over the canvas\nfunction setup() {\n  let c = createCanvas(100, 100);\n  background(200);\n  textAlign(CENTER);\n  text('Drag file', width / 2, height / 2);\n  c.dragOver(dragOverCallback);\n}\n\n// This function will be called whenever\n// a file is dragged over the canvas\nfunction dragOverCallback() {\n  background(240);\n  text('Dragged over', width / 2, height / 2);\n}\n</code></div>"],"alt":"nothing displayed","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":763,"description":"<p>The .dragLeave() function is called once after every time a\ndragged file leaves the element area. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"dragLeave","params":[{"name":"fxn","description":"<p>function to be fired when a file is\n                               dragged off the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div><code>\n// To test this sketch, simply drag a file\n// over and then out of the canvas area\nfunction setup() {\n  let c = createCanvas(100, 100);\n  background(200);\n  textAlign(CENTER);\n  text('Drag file', width / 2, height / 2);\n  c.dragLeave(dragLeaveCallback);\n}\n\n// This function will be called whenever\n// a file is dragged out of the canvas\nfunction dragLeaveCallback() {\n  background(240);\n  text('Dragged off', width / 2, height / 2);\n}\n</code></div>"],"alt":"nothing displayed","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":827,"description":"<p>Helper fxn for sharing pixel methods</p>\n","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Graphics.js","line":70,"description":"<p>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 <a href='#/p5/draw'>draw()</a> will copy the behavior\nof the standard canvas.</p>\n","itemtype":"method","name":"reset","example":["\n\n<div><code>\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</code></div>"],"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":122,"description":"<p>Removes a Graphics object from the page and frees any resources\nassociated with it.</p>\n","itemtype":"method","name":"remove","example":["\n<div class='norender'><code>\nlet bg;\nfunction setup() {\n  bg = createCanvas(100, 100);\n  bg.background(0);\n  image(bg, 0, 0);\n  bg.remove();\n}\n</code></div>\n\n<div><code>\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</code></div>"],"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.Renderer.js","line":95,"description":"<p>Resize our canvas element.</p>\n","class":"p5.Renderer","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Renderer.js","line":341,"description":"<p>Helper fxn to check font type (system or otf)</p>\n","class":"p5.Renderer","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Renderer.js","line":393,"description":"<p>Helper fxn to measure ascent and descent.\nAdapted from <a href=\"http://stackoverflow.com/a/25355178\">http://stackoverflow.com/a/25355178</a></p>\n","class":"p5.Renderer","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Renderer2D.js","line":7,"description":"<p>p5.Renderer2D\nThe 2D graphics canvas renderer class.\nextends p5.Renderer</p>\n","class":"p5","module":"Rendering"},{"file":"src/core/p5.Renderer2D.js","line":386,"description":"<p>Generate a cubic Bezier representing an arc on the unit circle of total\nangle <code>size</code> radians, beginning <code>start</code> radians above the x-axis. Up to\nfour of these curves are combined to make a full arc.</p>\n<p>See <a href=\"http://www.joecridge.me/bezier.pdf\">www.joecridge.me/bezier.pdf</a> for an explanation of the method.</p>\n","class":"p5","module":"Rendering"},{"file":"src/core/reference.js","line":6,"description":"<p>Creates and names a new variable. A variable is a container for a value.</p>\n<p>Variables that are declared with <a href=\"#/p5/let\">let</a> will have block-scope.\nThis means that the variable only exists within the\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block\">\nblock</a> that it is created within.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let\">the MDN entry</a>:\nDeclares a block scope local variable, optionally initializing it to a value.</p>\n","itemtype":"property","name":"let","example":["\n<div class='norender'>\n<code>\nlet x = 2;\nconsole.log(x); // prints 2 to the console\nx = 1;\nconsole.log(x); // prints 1 to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":33,"description":"<p>Creates and names a new constant. Like a variable created with <a href=\"#/p5/let\">let</a>,\na constant that is created with <a href=\"#/p5/const\">const</a> 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 <code>let</code>, you cannot declare variables without value\nusing const.</p>\n<p>Constants have block-scope. This means that the constant only exists within\nthe <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block\">\nblock</a> that it is created within. A constant cannot be redeclared within a scope in which it\nalready exists.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const\">the MDN entry</a>:\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.</p>\n","itemtype":"property","name":"const","example":["\n<div class='norender'>\n<code>\n// define myFavNumber as a constant and give it the value 7\nconst myFavNumber = 7;\nconsole.log('my favorite number is: ' + myFavNumber);\n</code>\n</div>\n\n<div class='norender'>\n<code>\nconst bigCats = ['lion', 'tiger', 'panther'];\nbigCats.push('leopard');\nconsole.log(bigCats);\n// bigCats = ['cat']; // throws error as re-assigning not allowed for const\n</code>\n</div>\n\n<div class='norender'>\n<code>\nconst wordFrequency = {};\nwordFrequency['hello'] = 2;\nwordFrequency['bye'] = 1;\nconsole.log(wordFrequency);\n// wordFrequency = { 'a': 2, 'b': 3}; // throws error here\n</code>\n</div>"],"alt":"These examples do not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":86,"description":"<p>The strict equality operator <a href=\"#/p5/===\">===</a>\nchecks to see if two values are equal and of the same type.</p>\n<p>A comparison expression always evaluates to a <a href=\"#/p5/boolean\">boolean</a>.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">the MDN entry</a>:\nThe non-identity operator returns true if the operands are not equal and/or not of the same type.</p>\n<p>Note: In some examples around the web you may see a double-equals-sign\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality\">==</a>,\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.</p>\n","itemtype":"property","name":"===","example":["\n<div class='norender'>\n<code>\nconsole.log(1 === 1); // prints true to the console\nconsole.log(1 === '1'); // prints false to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":114,"description":"<p>The greater than operator <a href=\"#/p5/>\">></a>\nevaluates to true if the left value is greater than\nthe right value.</p>\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">\nThere is more info on comparison operators on MDN.</a>","itemtype":"property","name":">","example":["\n<div class='norender'>\n<code>\nconsole.log(100 > 1); // prints true to the console\nconsole.log(1 > 100); // prints false to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":136,"description":"<p>The greater than or equal to operator <a href=\"#/p5/>=\">>=</a>\nevaluates to true if the left value is greater than or equal to\nthe right value.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">There is more info on comparison operators on MDN.</a></p>\n","itemtype":"property","name":">=","example":["\n<div class='norender'>\n<code>\nconsole.log(100 >= 100); // prints true to the console\nconsole.log(101 >= 100); // prints true to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":157,"description":"<p>The less than operator <a href=\"#/p5/<\"><</a>\nevaluates to true if the left value is less than\nthe right value.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">There is more info on comparison operators on MDN.</a></p>\n","itemtype":"property","name":"<","example":["\n<div class='norender'>\n<code>\nconsole.log(1 < 100); // prints true to the console\nconsole.log(100 < 99); // prints false to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":178,"description":"<p>The less than or equal to operator <a href=\"#/p5/<=\"><=</a>\nevaluates to true if the left value is less than or equal to\nthe right value.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">There is more info on comparison operators on MDN.</a></p>\n","itemtype":"property","name":"<=","example":["\n<div class='norender'>\n<code>\nconsole.log(100 <= 100); // prints true to the console\nconsole.log(99 <= 100); // prints true to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":199,"description":"<p>The <a href=\"#/p5/if-else\">if-else</a> statement helps control the flow of your code.</p>\n<p>A condition is placed between the parenthesis following 'if',\nwhen that condition evalues to <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/truthy\">truthy</a>,\nthe code between the following curly braces is run.\nAlternatively, when the condition evaluates to <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Falsy\">falsy</a>,\nthe code between the curly braces of 'else' block is run instead. Writing an\nelse block is optional.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else\">the MDN entry</a>:\nThe 'if' statement executes a statement if a specified condition is truthy.\nIf the condition is falsy, another statement can be executed</p>\n","itemtype":"property","name":"if-else","example":["\n<div class='norender'>\n<code>\nlet a = 4;\nif (a > 0) {\n  console.log('positive');\n} else {\n  console.log('negative');\n}\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":230,"description":"<p>Creates and names a <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions\">function</a>.\nA <a href=\"#/p5/function\">function</a> is a set of statements that perform a task.</p>\n<p>Optionally, functions can have parameters. <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Parameter\">Parameters</a>\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.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function\">the MDN entry</a>:\nDeclares a function with the specified parameters.</p>\n","itemtype":"property","name":"function","example":["\n<div class='norender'>\n<code>\nlet myName = 'Hridi';\nfunction sayHello(name) {\n  console.log('Hello ' + name + '!');\n}\nsayHello(myName); // calling the function, prints \"Hello Hridi!\" to console.\n</code>\n</div>\n\n<div class='norender'>\n<code>\nlet square = number => number * number;\nconsole.log(square(5));\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":266,"description":"<p>Specifies the value to be returned by a function.\nFor more info checkout <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return\">\nthe MDN entry for return</a>.</p>\n","itemtype":"property","name":"return","example":["\n<div class='norender'>\n<code>\nfunction calculateSquare(x) {\n  return x * x;\n}\nconst result = calculateSquare(4); // returns 16\nconsole.log(result); // prints '16' to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":287,"description":"<p>A <a href=\"#/p5/boolean\">boolean</a> is one of the 7 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Primitive_values\">primitive data types</a> in Javascript.\nA boolean can only be <code>true</code> or <code>false</code>.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type\">the MDN entry</a>:\nBoolean represents a logical entity and can have two values: true, and false.</p>\n","itemtype":"property","name":"boolean","example":["\n<div class='norender'>\n<code>\nlet myBoolean = false;\nconsole.log(typeof myBoolean); // prints 'boolean' to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":308,"description":"<p>A <a href=\"#/p5/string\">string</a> is one of the 7 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Primitive_values\">primitive data types</a> 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(\").</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/string\">the MDN entry</a>:\nA string is a sequence of characters used to represent text.</p>\n","itemtype":"property","name":"string","example":["\n<div class='norender'>\n<code>\nlet mood = 'chill';\nconsole.log(typeof mood); // prints 'string' to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":330,"description":"<p>A <a href=\"#/p5/number\">number</a> is one of the 7 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Primitive_values\">primitive data types</a> in Javascript.\nA number can be a whole number or a decimal number.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Glossary/number\">The MDN entry for number</a></p>\n","itemtype":"property","name":"number","example":["\n<div class='norender'>\n<code>\nlet num = 46.5;\nconsole.log(typeof num); // prints 'number' to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":350,"description":"<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics\">MDN's object basics</a>:\n An <a href=\"#/p5/object\">object</a> 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.)</p>\n","itemtype":"property","name":"object","example":["\n <div class='norender'>\n <code>\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 </code>\n </div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":378,"description":"<p>Creates and names a <a href=\"#/p5/class\">class</a> which is a template for\nthe creation of <a href=\"#/p5/objects\">objects</a>.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class\">the MDN entry</a>:\nThe class declaration creates a new Class with a given name using\nprototype-based inheritance.</p>\n","itemtype":"property","name":"class","example":["\n<div class='norender'>\n<code>\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</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":407,"description":"<p><a href=\"#/p5/for\">for</a> creates a loop that is useful for executing one\nsection of code multiple times.</p>\n<p>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 seperated by ; (semi-colon).In case of an empty expression,\nonly a semi-colon is written.</p>\n<p>The code inside of the loop body (in between the curly braces) is executed between the evaluation of the second\nand third expression.</p>\n<p>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 <a href=\"#/p5/for\">for</a> 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.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for\">the MDN entry</a>:\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.</p>\n","itemtype":"property","name":"for","example":["\n<div class='norender'>\n<code>\nfor (let i = 0; i < 9; i++) {\n  console.log(i);\n}\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":447,"description":"<p><a href=\"#/p5/while\">while</a> creates a loop that is useful for executing\none section of code multiple times.</p>\n<p>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 <a href=\"#/p5/while\">while</a>, so if the condition is initially false\nthe loop body, or statement, will never execute.</p>\n<p>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.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/while\">the MDN entry</a>:\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.</p>\n","itemtype":"property","name":"while","example":["\n<div class='norender'>\n<code>\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</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":489,"description":"<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify\">the MDN entry</a>:\nThe JSON.stringify() method converts a JavaScript object or value to a JSON <a href=\"#/p5/string\">string</a>.</p>\n","itemtype":"method","name":"stringify","static":1,"params":[{"name":"object","description":"<p>:Javascript object that you would like to convert to JSON</p>\n","type":"Object"}],"example":["\n<div class='norender'>\n<code>\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</code>\n</div>"],"alt":"This example does not render anything","class":"JSON","module":"Foundation"},{"file":"src/core/reference.js","line":511,"description":"<p>Prints a message to your browser's web console. When using p5, you can use <a href=\"#/p5/print\">print</a>\nand <a href=\"#/p5/console/log\">console.log</a> interchangeably.</p>\n<p>The console is opened differently depending on which browser you are using.\nHere are links on how to open the console in <a href=\"https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Opening_the_Web_Console\">Firefox</a>\n, <a href=\"https://developers.google.com/web/tools/chrome-devtools/open\">Chrome</a>, <a href=\"https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/console\">Edge</a>,\nand <a href=\"https://support.apple.com/en-ca/guide/safari/sfri20948/mac\">Safari</a>.\nWith the <a href=\"https://editor.p5js.org/\">online p5 editor</a> the console\nis embedded directly in the page underneath the code editor.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Console/log\">the MDN entry</a>:\nThe Console method log() outputs a message to the web console. The message may\nbe a single <a href=\"#/p5/string\">string</a> (with optional substitution values),\nor it may be any one or more JavaScript <a href=\"#/p5/object\">objects</a>.</p>\n","itemtype":"method","name":"log","static":1,"params":[{"name":"message","description":"<p>:Message that you would like to print to the console</p>\n","type":"String|Expression|Object"}],"example":["\n<div class='norender'>\n<code>\nlet myNum = 5;\nconsole.log(myNum); // prints 5 to the console\nconsole.log(myNum + 12); // prints 17 to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"console","module":"Foundation"},{"file":"src/core/rendering.js","line":15,"description":"<p>Creates a canvas element in the document, and sets the dimensions of it\nin pixels. This method should be called only once at the start of setup.\nCalling <a href=\"#/p5/createCanvas\">createCanvas</a> more than once in a\nsketch will result in very unpredictable behavior. If you want more than\none drawing canvas you could use <a href=\"#/p5/createGraphics\">createGraphics</a>\n(hidden by default but it can be shown).</p>\n<p>The system variables width and height are set by the parameters passed to this\nfunction. If <a href=\"#/p5/createCanvas\">createCanvas()</a> is not used, the\nwindow will be given a default size of 100x100 pixels.</p>\n<p>For more ways to position the canvas, see the\n<a href='https://github.com/processing/p5.js/wiki/Positioning-your-canvas'>\npositioning the canvas</a> wiki page.</p>\n","itemtype":"method","name":"createCanvas","params":[{"name":"w","description":"<p>width of the canvas</p>\n","type":"Number"},{"name":"h","description":"<p>height of the canvas</p>\n","type":"Number"},{"name":"renderer","description":"<p>either P2D or WEBGL</p>\n","type":"Constant","optional":true}],"return":{"description":"","type":"p5.Renderer"},"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 50);\n  background(153);\n  line(0, 0, width, height);\n}\n</code>\n</div>"],"alt":"Black line extending from top-left of canvas to bottom right.","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":120,"description":"<p>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.</p>\n","itemtype":"method","name":"resizeCanvas","params":[{"name":"w","description":"<p>width of the canvas</p>\n","type":"Number"},{"name":"h","description":"<p>height of the canvas</p>\n","type":"Number"},{"name":"noRedraw","description":"<p>don't redraw the canvas immediately</p>\n","type":"Boolean","optional":true}],"example":["\n<div class=\"norender\"><code>\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</code></div>"],"alt":"No image displayed.","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":174,"description":"<p>Removes the default canvas for a p5 sketch that doesn't require a canvas</p>\n","itemtype":"method","name":"noCanvas","example":["\n<div>\n<code>\nfunction setup() {\n  noCanvas();\n}\n</code>\n</div>"],"alt":"no image displayed","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":195,"description":"<p>Creates and returns a new p5.Renderer object. Use this class if you need\nto draw into an off-screen graphics buffer. The two parameters define the\nwidth and height in pixels.</p>\n","itemtype":"method","name":"createGraphics","params":[{"name":"w","description":"<p>width of the offscreen graphics buffer</p>\n","type":"Number"},{"name":"h","description":"<p>height of the offscreen graphics buffer</p>\n","type":"Number"},{"name":"renderer","description":"<p>either P2D or WEBGL\n                              undefined defaults to p2d</p>\n","type":"Constant","optional":true}],"return":{"description":"offscreen graphics buffer","type":"p5.Graphics"},"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"4 grey squares alternating light and dark grey. White quarter circle mid-left.","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":234,"description":"<p>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):</p>\n<ul>\n<li><code>BLEND</code> - linear interpolation of colours: C =\nA\\*factor + B. <b>This is the default blending mode.</b></li>\n<li><code>ADD</code> - sum of A and B</li>\n<li><code>DARKEST</code> - only the darkest colour succeeds: C =\nmin(A\\*factor, B).</li>\n<li><code>LIGHTEST</code> - only the lightest colour succeeds: C =\nmax(A\\*factor, B).</li>\n<li><code>DIFFERENCE</code> - subtract colors from underlying image.</li>\n<li><code>EXCLUSION</code> - similar to <code>DIFFERENCE</code>, but less\nextreme.</li>\n<li><code>MULTIPLY</code> - multiply the colors, result will always be\ndarker.</li>\n<li><code>SCREEN</code> - opposite multiply, uses inverse values of the\ncolors.</li>\n<li><code>REPLACE</code> - the pixels entirely replace the others and\ndon't utilize alpha (transparency) values.</li>\n<li><code>REMOVE</code> - removes pixels from B with the alpha strength of A.</li>\n<li><code>OVERLAY</code> - mix of <code>MULTIPLY</code> and <code>SCREEN\n</code>. Multiplies dark values, and screens light values. <em>(2D)</em></li>\n<li><code>HARD_LIGHT</code> - <code>SCREEN</code> when greater than 50%\ngray, <code>MULTIPLY</code> when lower. <em>(2D)</em></li>\n<li><code>SOFT_LIGHT</code> - mix of <code>DARKEST</code> and\n<code>LIGHTEST</code>. Works like <code>OVERLAY</code>, but not as harsh. <em>(2D)</em>\n</li>\n<li><code>DODGE</code> - lightens light tones and increases contrast,\nignores darks. <em>(2D)</em></li>\n<li><code>BURN</code> - darker areas are applied, increasing contrast,\nignores lights. <em>(2D)</em></li>\n<li><code>SUBTRACT</code> - remainder of A and B <em>(3D)</em></li>\n</ul>\n\n<p><em>(2D)</em> indicates that this blend mode <b>only</b> works in the 2D renderer.<br>\n<em>(3D)</em> indicates that this blend mode <b>only</b> works in the WEBGL renderer.</p>\n","itemtype":"method","name":"blendMode","params":[{"name":"mode","description":"<p>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</p>\n","type":"Constant"}],"example":["\n<div>\n<code>\nblendMode(LIGHTEST);\nstrokeWeight(30);\nstroke(80, 150, 255);\nline(25, 25, 75, 75);\nstroke(255, 50, 50);\nline(75, 25, 25, 75);\n</code>\n</div>\n\n<div>\n<code>\nblendMode(MULTIPLY);\nstrokeWeight(30);\nstroke(80, 150, 255);\nline(25, 25, 75, 75);\nstroke(255, 50, 50);\nline(75, 25, 25, 75);\n</code>\n</div>"],"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":317,"description":"<p>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 <code>drawingContext</code>, as in the example shown. This is\nthe equivalent of calling <code>canvas.getContext('2d');</code> or <code>canvas.getContext('webgl');</code>.\nSee this\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D\">\nreference for the native canvas API</a> for possible drawing functions you can call.</p>\n","itemtype":"property","name":"drawingContext","example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"white ellipse with shadow blur effect around edges","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/shim.js","line":18,"description":"<p>shim for Uint8ClampedArray.slice\n(allows arrayCopy to work with pixels[])\nwith thanks to <a href=\"http://halfpapstudios.com/blog/tag/html5-canvas/\">http://halfpapstudios.com/blog/tag/html5-canvas/</a>\nEnumerable set to false to protect for...in from\nUint8ClampedArray.prototype pollution.</p>\n","class":"p5","module":"Rendering"},{"file":"src/core/shim.js","line":39,"description":"<p>this is implementation of Object.assign() which is unavailable in\nIE11 and (non-Chrome) Android browsers.\nThe assign() method is used to copy the values of all enumerable\nown properties from one or more source objects to a target object.\nIt will return the target object.\nModified from <a href=\"https://github.com/ljharb/object.assign\">https://github.com/ljharb/object.assign</a></p>\n","class":"p5","module":"Rendering"},{"file":"src/core/structure.js","line":10,"description":"<p>Stops p5.js from continuously executing the code within <a href=\"#/p5/draw\">draw()</a>.\nIf <a href=\"#/p5/loop\">loop()</a> is called, the code in <a href=\"#/p5/draw\">draw()</a>\nbegins to run continuously again. If using <a href=\"#/p5/noLoop\">noLoop()</a>\nin <a href=\"#/p5/setup\">setup()</a>, it should be the last line inside the block.</p>\n<p>When <a href=\"#/p5/noLoop\">noLoop()</a> is used, it's not possible to manipulate\nor access the screen inside event handling functions such as\n<a href=\"#/p5/mousePressed\">mousePressed()</a> or\n<a href=\"#/p5/keyPressed\">keyPressed()</a>. Instead, use those functions to\ncall <a href=\"#/p5/redraw\">redraw()</a> or <a href=\"#/p5/loop\">loop()</a>,\nwhich will run <a href=\"#/p5/draw\">draw()</a>, which can update the screen\nproperly. This means that when <a href=\"#/p5/noLoop\">noLoop()</a> has been\ncalled, no drawing can happen, and functions like <a href=\"#/p5/saveFrame\">saveFrame()</a>\nor <a href=\"#/p5/loadPixels\">loadPixels()</a> may not be used.</p>\n<p>Note that if the sketch is resized, <a href=\"#/p5/redraw\">redraw()</a> will\nbe called to update the sketch, even after <a href=\"#/p5/noLoop\">noLoop()</a>\nhas been specified. Otherwise, the sketch would enter an odd state until\n<a href=\"#/p5/loop\">loop()</a> was called.</p>\n<p>Use <a href=\"#/p5/isLooping\">isLooping()</a> to check current state of loop().</p>\n","itemtype":"method","name":"noLoop","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n  background(200);\n  noLoop();\n}\n\nfunction draw() {\n  line(10, 10, 90, 90);\n}\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":83,"description":"<p>By default, p5.js loops through draw() continuously, executing the code within\nit. However, the <a href=\"#/p5/draw\">draw()</a> loop may be stopped by calling\n<a href=\"#/p5/noLoop\">noLoop()</a>. In that case, the <a href=\"#/p5/draw\">draw()</a>\nloop can be resumed with loop().</p>\n<p>Avoid calling loop() from inside setup().</p>\n<p>Use <a href=\"#/p5/isLooping\">isLooping()</a> to check current state of loop().</p>\n","itemtype":"method","name":"loop","example":["\n<div>\n<code>\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</code>\n</div>"],"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":134,"description":"<p>By default, p5.js loops through <a href=\"#/p5/draw\">draw()</a> continuously,\nexecuting the code within it. If the sketch is stopped with\n<a href=\"#/p5/noLoop\">noLoop()</a> or resumed with <a href=\"#/p5/loop\">loop()</a>,\nisLooping() returns the current state for use within custom event handlers.</p>\n","itemtype":"method","name":"isLooping","example":["\n<div>\n<code>\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</code>\n</div>"],"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":"<p>The <a href=\"#/p5/push\">push()</a> function saves the current drawing style\nsettings and transformations, while <a href=\"#/p5/pop\">pop()</a> 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 <a href=\"#/p5/push\">push()</a>, it builds on\nthe current style and transform information. The <a href=\"#/p5/push\">push()</a>\nand <a href=\"#/p5/pop\">pop()</a> functions can be embedded to provide more\ncontrol. (See the second example for a demonstration.)</p>\n<p><a href=\"#/p5/push\">push()</a> stores information related to the current transformation state\nand style settings controlled by the following functions:\n<a href=\"#/p5/fill\">fill()</a>,\n<a href=\"#/p5/noFill\">noFill()</a>,\n<a href=\"#/p5/noStroke\">noStroke()</a>,\n<a href=\"#/p5/stroke\">stroke()</a>,\n<a href=\"#/p5/tint\">tint()</a>,\n<a href=\"#/p5/noTint\">noTint()</a>,\n<a href=\"#/p5/strokeWeight\">strokeWeight()</a>,\n<a href=\"#/p5/strokeCap\">strokeCap()</a>,\n<a href=\"#/p5/strokeJoin\">strokeJoin()</a>,\n<a href=\"#/p5/imageMode\">imageMode()</a>,\n<a href=\"#/p5/rectMode\">rectMode()</a>,\n<a href=\"#/p5/ellipseMode\">ellipseMode()</a>,\n<a href=\"#/p5/colorMode\">colorMode()</a>,\n<a href=\"#/p5/textAlign\">textAlign()</a>,\n<a href=\"#/p5/textFont\">textFont()</a>,\n<a href=\"#/p5/textSize\">textSize()</a>,\n<a href=\"#/p5/textLeading\">textLeading()</a>,\n<a href=\"#/p5/applyMatrix\">applyMatrix()</a>,\n<a href=\"#/p5/resetMatrix\">resetMatrix()</a>,\n<a href=\"#/p5/rotate\">rotate()</a>,\n<a href=\"#/p5/scale\">scale()</a>,\n<a href=\"#/p5/shearX\">shearX()</a>,\n<a href=\"#/p5/shearY\">shearY()</a>,\n<a href=\"#/p5/translate\">translate()</a>,\n<a href=\"#/p5/noiseSeed\">noiseSeed()</a>.</p>\n<p>In WEBGL mode additional style settings are stored. These are controlled by the\nfollowing functions: <a href=\"#/p5/setCamera\">setCamera()</a>,\n<a href=\"#/p5/ambientLight\">ambientLight()</a>,\n<a href=\"#/p5/directionalLight\">directionalLight()</a>,\n<a href=\"#/p5/pointLight\">pointLight()</a>, <a href=\"#/p5/texture\">texture()</a>,\n<a href=\"#/p5/specularMaterial\">specularMaterial()</a>,\n<a href=\"#/p5/shininess\">shininess()</a>,\n<a href=\"#/p5/normalMaterial\">normalMaterial()</a>\nand <a href=\"#/p5/shader\">shader()</a>.</p>\n","itemtype":"method","name":"push","example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":"<p>The <a href=\"#/p5/push\">push()</a> function saves the current drawing style\nsettings and transformations, while <a href=\"#/p5/pop\">pop()</a> 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 <a href=\"#/p5/push\">push()</a>, it\nbuilds on the current style and transform information. The <a href=\"#/p5/push\">push()</a>\nand <a href=\"#/p5/pop\">pop()</a> functions can be embedded to provide more\ncontrol. (See the second example for a demonstration.)</p>\n<p><a href=\"#/p5/push\">push()</a> stores information related to the current transformation state\nand style settings controlled by the following functions:\n<a href=\"#/p5/fill\">fill()</a>,\n<a href=\"#/p5/noFill\">noFill()</a>,\n<a href=\"#/p5/noStroke\">noStroke()</a>,\n<a href=\"#/p5/stroke\">stroke()</a>,\n<a href=\"#/p5/tint\">tint()</a>,\n<a href=\"#/p5/noTint\">noTint()</a>,\n<a href=\"#/p5/strokeWeight\">strokeWeight()</a>,\n<a href=\"#/p5/strokeCap\">strokeCap()</a>,\n<a href=\"#/p5/strokeJoin\">strokeJoin()</a>,\n<a href=\"#/p5/imageMode\">imageMode()</a>,\n<a href=\"#/p5/rectMode\">rectMode()</a>,\n<a href=\"#/p5/ellipseMode\">ellipseMode()</a>,\n<a href=\"#/p5/colorMode\">colorMode()</a>,\n<a href=\"#/p5/textAlign\">textAlign()</a>,\n<a href=\"#/p5/textFont\">textFont()</a>,\n<a href=\"#/p5/textSize\">textSize()</a>,\n<a href=\"#/p5/textLeading\">textLeading()</a>,\n<a href=\"#/p5/applyMatrix\">applyMatrix()</a>,\n<a href=\"#/p5/resetMatrix\">resetMatrix()</a>,\n<a href=\"#/p5/rotate\">rotate()</a>,\n<a href=\"#/p5/scale\">scale()</a>,\n<a href=\"#/p5/shearX\">shearX()</a>,\n<a href=\"#/p5/shearY\">shearY()</a>,\n<a href=\"#/p5/translate\">translate()</a>,\n<a href=\"#/p5/noiseSeed\">noiseSeed()</a>.</p>\n<p>In WEBGL mode additional style settings are stored. These are controlled by\nthe following functions:\n<a href=\"#/p5/setCamera\">setCamera()</a>,\n<a href=\"#/p5/ambientLight\">ambientLight()</a>,\n<a href=\"#/p5/directionalLight\">directionalLight()</a>,\n<a href=\"#/p5/pointLight\">pointLight()</a>,\n<a href=\"#/p5/texture\">texture()</a>,\n<a href=\"#/p5/specularMaterial\">specularMaterial()</a>,\n<a href=\"#/p5/shininess\">shininess()</a>,\n<a href=\"#/p5/normalMaterial\">normalMaterial()</a> and\n<a href=\"#/p5/shader\">shader()</a>.</p>\n","itemtype":"method","name":"pop","example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":"<p>Executes the code within <a href=\"#/p5/draw\">draw()</a> one time. This\nfunction allows the program to update the display window only when necessary,\nfor example when an event registered by <a href=\"#/p5/mousePressed\">mousePressed()</a>\nor <a href=\"#/p5/keyPressed\">keyPressed()</a> occurs.</p>\n<p>In structuring a program, it only makes sense to call <a href=\"#/p5/redraw\">redraw()</a>\nwithin events such as <a href=\"#/p5/mousePressed\">mousePressed()</a>. This\nis because <a href=\"#/p5/redraw\">redraw()</a> does not run\n<a href=\"#/p5/draw\">draw()</a> immediately (it only sets a flag that indicates\nan update is needed).</p>\n<p>The <a href=\"#/p5/redraw\">redraw()</a> function does not work properly when\ncalled inside <a href=\"#/p5/draw\">draw()</a>.To enable/disable animations,\nuse <a href=\"#/p5/loop\">loop()</a> and <a href=\"#/p5/noLoop\">noLoop()</a>.</p>\n<p>In addition you can set the number of redraws per method call. Just\nadd an integer as single parameter for the number of redraws.</p>\n","itemtype":"method","name":"redraw","params":[{"name":"n","description":"<p>Redraw for n-times. The default value is 1.</p>\n","type":"Integer","optional":true}],"example":["\n<div><code>\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</code>\n</div>\n\n<div class='norender'>\n<code>\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</code>\n</div>"],"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":496,"description":"<p>The <code>p5()</code> 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<a target=\"blank\" href=\"https://www.youtube.com/watch?v=Su792jEauZg&feature=youtu.be\">\nDan Shiffman's Coding Train video tutorial</a> or this\n<a target=\"blank\" href=\"https://github.com/processing/p5.js/wiki/p5.js-overview#instantiation--namespace\">tutorial page</a>\nfor more info.</p>\n<p>By default, all p5.js functions are in the global namespace (i.e. bound to the window\nobject), meaning you can call them simply <code>ellipse()</code>, <code>fill()</code>, 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.</p>\n<p>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.</p>\n<p>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.</p>\n","itemtype":"method","name":"p5","params":[{"name":"sketch","description":"<p>a function containing a p5.js sketch</p>\n","type":"Object"},{"name":"node","description":"<p>ID or pointer to HTML DOM node to contain sketch in</p>\n","type":"String|Object"}],"example":["\n<div class='norender'><code>\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</code></div>"],"alt":"white rectangle on black background","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/transform.js","line":11,"description":"<p>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 <a href=\"https://en.wikipedia.org/wiki/Transformation_matrix\">\nWikipedia</a>.</p>\n<p>The naming of the arguments here follows the naming of the <a href=\n\"https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-transform\">\nWHATWG specification</a> and corresponds to a\ntransformation matrix of the\nform:</p>\n<blockquote>\n<p><img style=\"max-width: 150px\" src=\"assets/transformation-matrix.png\"\nalt=\"The transformation matrix used when applyMatrix is called\"/></p>\n</blockquote>\n","itemtype":"method","name":"applyMatrix","params":[{"name":"a","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"},{"name":"b","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"},{"name":"c","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"},{"name":"d","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"},{"name":"e","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"},{"name":"f","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\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(  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  stroke(255);\n  box(50);\n}\n</code>\n</div>"],"alt":"A rectangle translating to the right\nA rectangle shrinking to the center\nA rectangle rotating clockwise about the center\nA rectangle shearing","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":151,"description":"<p>Replaces the current matrix with the identity matrix.</p>\n","itemtype":"method","name":"resetMatrix","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"A rotated retangle in the center with another at the top left corner","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":176,"description":"<p>Rotates a shape by the amount specified by the angle parameter. This\nfunction accounts for <a href=\"#/p5/angleMode\">angleMode</a>, so angles\ncan be entered in either RADIANS or DEGREES.</p>\n<p>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 accumulates the effect. For example, calling\nrotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI).\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n<p>Technically, <a href=\"#/p5/rotate\">rotate()</a> multiplies the current transformation matrix\nby a rotation matrix. This function can be further controlled by\nthe <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a>.</p>\n","itemtype":"method","name":"rotate","params":[{"name":"angle","description":"<p>the angle of rotation, specified in radians\n                       or degrees, depending on current angleMode</p>\n","type":"Number"},{"name":"axis","description":"<p>(in 3d) the axis to rotate around</p>\n","type":"p5.Vector|Number[]","optional":true}],"chainable":1,"example":["\n<div>\n<code>\ntranslate(width / 2, height / 2);\nrotate(PI / 3.0);\nrect(-26, -26, 52, 52);\n</code>\n</div>"],"alt":"white 52x52 rect with black outline at center rotated counter 45 degrees","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":215,"description":"<p>Rotates a shape around X axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.</p>\n<p>Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n","itemtype":"method","name":"rotateX","params":[{"name":"angle","description":"<p>the angle of rotation, specified in radians\n                       or degrees, depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(255);\n  rotateX(millis() / 1000);\n  box();\n}\n</code>\n</div>"],"alt":"3d box rotating around the x axis.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":251,"description":"<p>Rotates a shape around Y axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.</p>\n<p>Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n","itemtype":"method","name":"rotateY","params":[{"name":"angle","description":"<p>the angle of rotation, specified in radians\n                       or degrees, depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(255);\n  rotateY(millis() / 1000);\n  box();\n}\n</code>\n</div>"],"alt":"3d box rotating around the y axis.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":287,"description":"<p>Rotates a shape around Z axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.</p>\n<p>This method works in WEBGL mode only.</p>\n<p>Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n","itemtype":"method","name":"rotateZ","params":[{"name":"angle","description":"<p>the angle of rotation, specified in radians\n                       or degrees, depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(255);\n  rotateZ(millis() / 1000);\n  box();\n}\n</code>\n</div>"],"alt":"3d box rotating around the z axis.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":325,"description":"<p>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%.</p>\n<p>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 <a href=\"#/p5/scale\">scale()</a> is called\nwithin <a href=\"#/p5/draw\">draw()</a>, the transformation is reset when the loop begins again.</p>\n<p>Using this function with the z parameter is only available in WEBGL mode.\nThis function can be further controlled with <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a>.</p>\n","itemtype":"method","name":"scale","chainable":1,"example":["\n<div>\n<code>\nrect(30, 20, 50, 50);\nscale(0.5);\nrect(30, 20, 50, 50);\n</code>\n</div>\n\n<div>\n<code>\nrect(30, 20, 50, 50);\nscale(0.5, 1.3);\nrect(30, 20, 50, 50);\n</code>\n</div>"],"alt":"white 52x52 rect with black outline at center rotated counter 45 degrees\n2 white rects with black outline- 1 50x50 at center. other 25x65 bottom left","class":"p5","module":"Transform","submodule":"Transform","overloads":[{"line":325,"params":[{"name":"s","description":"<p>percent to scale the object, or percentage to\n                     scale the object in the x-axis if multiple arguments\n                     are given</p>\n","type":"Number|p5.Vector|Number[]"},{"name":"y","description":"<p>percent to scale the object in the y-axis</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>percent to scale the object in the z-axis (webgl only)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":369,"params":[{"name":"scales","description":"<p>per-axis percents to scale the object</p>\n","type":"p5.Vector|Number[]"}],"chainable":1}]},{"file":"src/core/transform.js","line":399,"description":"<p>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.</p>\n<p>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 <a href=\"#/p5/shearX\">shearX()</a> is called within the <a href=\"#/p5/draw\">draw()</a>,\nthe transformation is reset when the loop begins again.</p>\n<p>Technically, <a href=\"#/p5/shearX\">shearX()</a> multiplies the current\ntransformation matrix by a rotation matrix. This function can be further\ncontrolled by the <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions.</p>\n","itemtype":"method","name":"shearX","params":[{"name":"angle","description":"<p>angle of shear specified in radians or degrees,\n                       depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\ntranslate(width / 4, height / 4);\nshearX(PI / 4.0);\nrect(0, 0, 30, 30);\n</code>\n</div>"],"alt":"white irregular quadrilateral with black outline at top middle.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":438,"description":"<p>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.</p>\n<p>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\n<a href=\"#/p5/shearY\">shearY()</a> is called within the <a href=\"#/p5/draw\">draw()</a>, the transformation is reset when\nthe loop begins again.</p>\n<p>Technically, <a href=\"#/p5/shearY\">shearY()</a> multiplies the current transformation matrix by a\nrotation matrix. This function can be further controlled by the\n<a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions.</p>\n","itemtype":"method","name":"shearY","params":[{"name":"angle","description":"<p>angle of shear specified in radians or degrees,\n                       depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\ntranslate(width / 4, height / 4);\nshearY(PI / 4.0);\nrect(0, 0, 30, 30);\n</code>\n</div>"],"alt":"white irregular quadrilateral with black outline at middle bottom.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":477,"description":"<p>Specifies an amount to displace objects within the display window.\nThe x parameter specifies left/right translation, the y parameter\nspecifies up/down translation.</p>\n<p>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 <a href=\"#/p5/translate\">translate()</a> is called within <a href=\"#/p5/draw\">draw()</a>, the\ntransformation is reset when the loop begins again. This function can be\nfurther controlled by using <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a>.</p>\n","itemtype":"method","name":"translate","chainable":1,"example":["\n<div>\n<code>\ntranslate(30, 20);\nrect(0, 0, 55, 55);\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n\n<div>\n<code>\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</code>\n</div>"],"alt":"white 55x55 rect with black outline at center right.\n3 white 55x55 rects with black outlines at top-l, center-r and bottom-r.\na 20x20 white rect moving in a circle around the canvas","class":"p5","module":"Transform","submodule":"Transform","overloads":[{"line":477,"params":[{"name":"x","description":"<p>left/right translation</p>\n","type":"Number"},{"name":"y","description":"<p>up/down translation</p>\n","type":"Number"},{"name":"z","description":"<p>forward/backward translation (webgl only)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":530,"params":[{"name":"vector","description":"<p>the vector to translate by</p>\n","type":"p5.Vector"}],"chainable":1}]},{"file":"src/data/local_storage.js","line":10,"description":"<p>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 <a href=\"#/p5/getItem\">getItem</a>.\nSensitive data such as passwords or personal information\n should not be stored in local storage.</p>\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 <div><code>\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 }\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 </code></div>"],"alt":"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.","class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/local_storage.js","line":101,"description":"<p>Returns the value of an item that was stored in local storage\n using storeItem()</p>\n","itemtype":"method","name":"getItem","params":[{"name":"key","description":"<p>name that you wish to use to store in local storage</p>\n","type":"String"}],"return":{"description":"Value of stored item","type":"Number|Object|String|Boolean|p5.Color|p5.Vector"},"example":["\n <div><code>\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 }\nfunction mousePressed() {\n   myColor = color(random(255), random(255), random(255));\n   storeItem('myColor', myColor);\n }\n </code></div>"],"alt":"If you click, the canvas changes to a random color.\n If you reload the page, the canvas is still the color it\n was when the page was previously loaded.","class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/local_storage.js","line":177,"description":"<p>Clears all local storage items set with storeItem()\n for the current domain.</p>\n","itemtype":"method","name":"clearStorage","example":["\n <div class=\"norender\">\n <code>\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 </code></div>"],"class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/local_storage.js","line":205,"description":"<p>Removes an item that was stored with storeItem()</p>\n","itemtype":"method","name":"removeItem","params":[{"name":"key","description":"","type":"String"}],"example":["\n <div class=\"norender\">\n <code>\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 </code></div>"],"class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/p5.TypedDict.js","line":14,"description":"<p>Creates a new instance of p5.StringDict using the key-value pair\n or the object you provide.</p>\n","itemtype":"method","name":"createStringDict","return":{"description":"","type":"p5.StringDict"},"example":["\n <div class=\"norender\">\n <code>\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 </code></div>"],"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":"<p>object</p>\n","type":"Object"}],"return":{"description":"","type":"p5.StringDict"}}]},{"file":"src/data/p5.TypedDict.js","line":48,"description":"<p>Creates a new instance of <a href=\"#/p5.NumberDict\">p5.NumberDict</a> using the key-value pair\n or object you provide.</p>\n","itemtype":"method","name":"createNumberDict","return":{"description":"","type":"p5.NumberDict"},"example":["\n <div class=\"norender\">\n <code>\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 </code></div>"],"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":"<p>object</p>\n","type":"Object"}],"return":{"description":"","type":"p5.NumberDict"}}]},{"file":"src/data/p5.TypedDict.js","line":101,"description":"<p>Returns the number of key-value pairs currently stored in the Dictionary.</p>\n","itemtype":"method","name":"size","return":{"description":"the number of key-value pairs in the Dictionary","type":"Integer"},"example":["\n<div class=\"norender\">\n<code>\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</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":122,"description":"<p>Returns true if the given key exists in the Dictionary,\notherwise returns false.</p>\n","itemtype":"method","name":"hasKey","params":[{"name":"key","description":"<p>that you want to look up</p>\n","type":"Number|String"}],"return":{"description":"whether that key exists in Dictionary","type":"Boolean"},"example":["\n<div class=\"norender\">\n<code>\nfunction setup() {\n  let myDictionary = createStringDict('p5', 'js');\n  print(myDictionary.hasKey('p5')); // logs true to console\n}\n</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":144,"description":"<p>Returns the value stored at the given key.</p>\n","itemtype":"method","name":"get","params":[{"name":"the","description":"<p>key you want to access</p>\n","type":"Number|String"}],"return":{"description":"the value stored at that key","type":"Number|String"},"example":["\n<div class=\"norender\">\n<code>\nfunction setup() {\n  let myDictionary = createStringDict('p5', 'js');\n  let myValue = myDictionary.get('p5');\n  print(myValue === 'js'); // logs true to console\n}\n</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":170,"description":"<p>Updates the value associated with the given key in case it already exists\nin the Dictionary. Otherwise a new key-value pair is added.</p>\n","itemtype":"method","name":"set","params":[{"name":"key","description":"","type":"Number|String"},{"name":"value","description":"","type":"Number|String"}],"example":["\n<div class=\"norender\">\n<code>\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</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":197,"description":"<p>private helper function to handle the user passing in objects\nduring construction or calls to create()</p>\n","class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":208,"description":"<p>Creates a new key-value pair in the Dictionary.</p>\n","itemtype":"method","name":"create","example":["\n<div class=\"norender\">\n<code>\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</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary","overloads":[{"line":208,"params":[{"name":"key","description":"","type":"Number|String"},{"name":"value","description":"","type":"Number|String"}]},{"line":226,"params":[{"name":"obj","description":"<p>key/value pair</p>\n","type":"Object"}]}]},{"file":"src/data/p5.TypedDict.js","line":244,"description":"<p>Removes all previously stored key-value pairs from the Dictionary.</p>\n","itemtype":"method","name":"clear","example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":265,"description":"<p>Removes the key-value pair stored at the given key from the Dictionary.</p>\n","itemtype":"method","name":"remove","params":[{"name":"key","description":"<p>for the pair to remove</p>\n","type":"Number|String"}],"example":["\n<div class=\"norender\">\n<code>\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</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":294,"description":"<p>Logs the set of items currently stored in the Dictionary to the console.</p>\n","itemtype":"method","name":"print","example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":318,"description":"<p>Converts the Dictionary into a CSV file for local download.</p>\n","itemtype":"method","name":"saveTable","example":["\n<div>\n<code>\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</code>\n</div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":356,"description":"<p>Converts the Dictionary into a JSON file for local download.</p>\n","itemtype":"method","name":"saveJSON","example":["\n<div>\n<code>\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</code>\n</div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":387,"description":"<p>private helper function to ensure that the user passed in valid\nvalues for the Dictionary type</p>\n","class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":425,"description":"<p>private helper function to ensure that the user passed in valid\nvalues for the Dictionary type</p>\n","class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":432,"description":"<p>Add the given number to the value currently stored at the given key.\nThe sum then replaces the value previously stored in the Dictionary.</p>\n","itemtype":"method","name":"add","params":[{"name":"Key","description":"<p>for the value you wish to add to</p>\n","type":"Number"},{"name":"Number","description":"<p>to add to the value</p>\n","type":"Number"}],"example":["\n<div class='norender'>\n<code>\nfunction setup() {\n  let myDictionary = createNumberDict(2, 5);\n  myDictionary.add(2, 2);\n  print(myDictionary.get(2)); // logs 7 to console.\n}\n</code></div>\n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":459,"description":"<p>Subtract the given number from the value currently stored at the given key.\nThe difference then replaces the value previously stored in the Dictionary.</p>\n","itemtype":"method","name":"sub","params":[{"name":"Key","description":"<p>for the value you wish to subtract from</p>\n","type":"Number"},{"name":"Number","description":"<p>to subtract from the value</p>\n","type":"Number"}],"example":["\n<div class='norender'>\n<code>\nfunction setup() {\n  let myDictionary = createNumberDict(2, 5);\n  myDictionary.sub(2, 2);\n  print(myDictionary.get(2)); // logs 3 to console.\n}\n</code></div>\n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":482,"description":"<p>Multiply the given number with the value currently stored at the given key.\nThe product then replaces the value previously stored in the Dictionary.</p>\n","itemtype":"method","name":"mult","params":[{"name":"Key","description":"<p>for value you wish to multiply</p>\n","type":"Number"},{"name":"Amount","description":"<p>to multiply the value by</p>\n","type":"Number"}],"example":["\n<div class='norender'>\n<code>\nfunction setup() {\n  let myDictionary = createNumberDict(2, 4);\n  myDictionary.mult(2, 2);\n  print(myDictionary.get(2)); // logs 8 to console.\n}\n</code></div>\n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":509,"description":"<p>Divide the given number with the value currently stored at the given key.\nThe quotient then replaces the value previously stored in the Dictionary.</p>\n","itemtype":"method","name":"div","params":[{"name":"Key","description":"<p>for value you wish to divide</p>\n","type":"Number"},{"name":"Amount","description":"<p>to divide the value by</p>\n","type":"Number"}],"example":["\n<div class='norender'>\n<code>\nfunction setup() {\n  let myDictionary = createNumberDict(2, 8);\n  myDictionary.div(2, 2);\n  print(myDictionary.get(2)); // logs 4 to console.\n}\n</code></div>\n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":536,"description":"<p>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'</p>\n","class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":560,"description":"<p>Return the lowest number currently stored in the Dictionary.</p>\n","itemtype":"method","name":"minValue","return":{"description":"","type":"Number"},"example":["\n<div class='norender'>\n<code>\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</code></div>"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":580,"description":"<p>Return the highest number currently stored in the Dictionary.</p>\n","itemtype":"method","name":"maxValue","return":{"description":"","type":"Number"},"example":["\n<div class='norender'>\n<code>\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</code></div>"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":600,"description":"<p>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'</p>\n","class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":622,"description":"<p>Return the lowest key currently used in the Dictionary.</p>\n","itemtype":"method","name":"minKey","return":{"description":"","type":"Number"},"example":["\n<div class='norender'>\n<code>\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</code></div>"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":642,"description":"<p>Return the highest key currently used in the Dictionary.</p>\n","itemtype":"method","name":"maxKey","return":{"description":"","type":"Number"},"example":["\n<div class='norender'>\n<code>\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</code></div>"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/dom/dom.js","line":21,"description":"<p>Searches the page for the first element that matches the given CSS selector string (can be an\nID, class, tag name or a combination) and returns it as a <a href=\"#/p5.Element\">p5.Element</a>.\nThe DOM node itself can be accessed with .elt.\nReturns null if none found. You can also specify a container to search within.</p>\n","itemtype":"method","name":"select","params":[{"name":"selectors","description":"<p>CSS selector string of element to search for</p>\n","type":"String"},{"name":"container","description":"<p>CSS selector string, <a href=\"#/p5.Element\">p5.Element</a>, or\n                                            HTML element to search within</p>\n","type":"String|p5.Element|HTMLElement","optional":true}],"return":{"description":"<a href=\"#/p5.Element\">p5.Element</a> containing node found","type":"p5.Element|null"},"example":["\n<div><code>\nfunction setup() {\n  createCanvas(50, 50);\n  background(30);\n  // move canvas down and right\n  select('canvas').position(10, 30);\n}\n</code></div>\n\n<div class=\"norender\"><code>\n// select using ID\nlet a = select('#container');\nlet b = select('#beep', '#container');\nlet c;\nif (a) {\n  // select using class\n  c = select('.boop', a);\n}\n// select using CSS selector string\nlet d = select('#container #bleep');\nlet e = select('#container p');\n[a, b, c, d, e]; // unused\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":68,"description":"<p>Searches the page for elements that match the given CSS selector string (can be an ID a class,\ntag name or a combination) and returns them as <a href=\"#/p5.Element\">p5.Element</a>s in\nan array.\nThe DOM node itself can be accessed with .elt.\nReturns an empty array if none found.\nYou can also specify a container to search within.</p>\n","itemtype":"method","name":"selectAll","params":[{"name":"selectors","description":"<p>CSS selector string of elements to search for</p>\n","type":"String"},{"name":"container","description":"<p>CSS selector string, <a href=\"#/p5.Element\">p5.Element</a>\n                                            , or HTML element to search within</p>\n","type":"String|p5.Element|HTMLElement","optional":true}],"return":{"description":"Array of <a href=\"#/p5.Element\">p5.Element</a>s containing nodes found","type":"p5.Element[]"},"example":["\n<div class='norender'><code>\nfunction setup() {\n  createButton('btn');\n  createButton('2nd btn');\n  createButton('3rd btn');\n  let buttons = selectAll('button');\n\n  for (let i = 0; i < buttons.length; i++) {\n    buttons[i].size(100, 100);\n  }\n}\n</code></div>\n<div class='norender'><code>\n// these are all valid calls to selectAll()\nlet a = selectAll('.beep');\na = selectAll('div');\na = selectAll('button', '#container');\n\nlet b = createDiv();\nb.id('container');\nlet c = select('#container');\na = selectAll('p', c);\na = selectAll('#container p');\n\nlet d = document.getElementById('container');\na = selectAll('.boop', d);\na = selectAll('#container .boop');\nconsole.log(a);\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":126,"description":"<p>Helper function for select and selectAll</p>\n","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":141,"description":"<p>Helper function for getElement and getElements.</p>\n","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":175,"description":"<p>Removes all elements created by p5, except any canvas / graphics\nelements created by <a href=\"#/p5/createCanvas\">createCanvas</a> or <a href=\"#/p5/createGraphics\">createGraphics</a>.\nEvent handlers are removed, and element is removed from the DOM.</p>\n","itemtype":"method","name":"removeElements","example":["\n<div class='norender'><code>\nfunction setup() {\n  createCanvas(100, 100);\n  createDiv('this is some text');\n  createP('this is a paragraph');\n}\nfunction mousePressed() {\n  removeElements(); // this will remove the div and p, not canvas\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":200,"description":"<p>The .<a href=\"#/p5.Element/changed\">changed()</a> function is called when the value of an\nelement changes.\nThis can be used to attach an element specific event listener.</p>\n","itemtype":"method","name":"changed","params":[{"name":"fxn","description":"<p>function to be fired when the value of\n                               an element changes.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div><code>\nlet sel;\n\nfunction setup() {\n  textAlign(CENTER);\n  background(200);\n  sel = createSelect();\n  sel.position(10, 10);\n  sel.option('pear');\n  sel.option('kiwi');\n  sel.option('grape');\n  sel.changed(mySelectEvent);\n}\n\nfunction mySelectEvent() {\n  let item = sel.value();\n  background(200);\n  text(\"it's a \" + item + '!', 50, 50);\n}\n</code></div>\n\n<div><code>\nlet checkbox;\nlet cnv;\n\nfunction setup() {\n  checkbox = createCheckbox(' fill');\n  checkbox.changed(changeFill);\n  cnv = createCanvas(100, 100);\n  cnv.position(0, 30);\n  noFill();\n}\n\nfunction draw() {\n  background(200);\n  ellipse(50, 50, 50, 50);\n}\n\nfunction changeFill() {\n  if (checkbox.checked()) {\n    fill(0);\n  } else {\n    noFill();\n  }\n}\n</code></div>"],"alt":"dropdown: pear, kiwi, grape. When selected text \"its a\" + selection shown.","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":267,"description":"<p>The .<a href=\"#/p5.Element/input\">input()</a> function is called when any user input is\ndetected with an element. The input event is often used\nto detect keystrokes in a input element, or changes on a\nslider element. This can be used to attach an element specific\nevent listener.</p>\n","itemtype":"method","name":"input","params":[{"name":"fxn","description":"<p>function to be fired when any user input is\n                               detected within the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\n// Open your console to see the output\nfunction setup() {\n  let inp = createInput('');\n  inp.input(myInputEvent);\n}\n\nfunction myInputEvent() {\n  console.log('you are typing: ', this.value());\n}\n</code></div>"],"alt":"no display.","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":301,"description":"<p>Helpers for create methods.</p>\n","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":312,"description":"<p>Creates a <div></div> element in the DOM with given inner HTML.</p>\n","itemtype":"method","name":"createDiv","params":[{"name":"html","description":"<p>inner HTML for element created</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div class='norender'><code>\ncreateDiv('this is some text');\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":329,"description":"<p>Creates a <p></p> element in the DOM with given inner HTML. Used\nfor paragraph length text.</p>\n","itemtype":"method","name":"createP","params":[{"name":"html","description":"<p>inner HTML for element created</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div class='norender'><code>\ncreateP('this is some text');\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":347,"description":"<p>Creates a <span></span> element in the DOM with given inner HTML.</p>\n","itemtype":"method","name":"createSpan","params":[{"name":"html","description":"<p>inner HTML for element created</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div class='norender'><code>\ncreateSpan('this is some text');\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":364,"description":"<p>Creates an <img> element in the DOM with given src and\nalternate text.</p>\n","itemtype":"method","name":"createImg","return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div class='norender'><code>\ncreateImg(\n  'https://p5js.org/assets/img/asterisk-01.png',\n  'the p5 magenta asterisk'\n);\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":364,"params":[{"name":"src","description":"<p>src path or url for image</p>\n","type":"String"},{"name":"alt","description":"<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#Attributes\">alternate text</a> to be used if image does not load. You can use also an empty string (<code>\"\"</code>) if that an image is not intended to be viewed.</p>\n","type":"String"}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}},{"line":380,"params":[{"name":"src","description":"","type":"String"},{"name":"alt","description":"","type":"String"},{"name":"crossOrigin","description":"<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes\">crossOrigin property</a> of the <code>img</code> element; use either 'anonymous' or 'use-credentials' to retrieve the image with cross-origin access (for later use with <code>canvas</code>. if an empty string(<code>\"\"</code>) is passed, CORS is not used</p>\n","type":"String"},{"name":"successCallback","description":"<p>callback to be called once image data is loaded with the <a href=\"#/p5.Element\">p5.Element</a> as argument</p>\n","type":"Function","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":410,"description":"<p>Creates an <a></a> element in the DOM for including a hyperlink.</p>\n","itemtype":"method","name":"createA","params":[{"name":"href","description":"<p>url of page to link to</p>\n","type":"String"},{"name":"html","description":"<p>inner html of link element to display</p>\n","type":"String"},{"name":"target","description":"<p>target where new link should open,\n                            could be _blank, _self, _parent, _top.</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div class='norender'><code>\ncreateA('http://p5js.org/', 'this is a link');\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":433,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":435,"description":"<p>Creates a slider <input></input> element in the DOM.\nUse .size() to set the display length of the slider.</p>\n","itemtype":"method","name":"createSlider","params":[{"name":"min","description":"<p>minimum value of the slider</p>\n","type":"Number"},{"name":"max","description":"<p>maximum value of the slider</p>\n","type":"Number"},{"name":"value","description":"<p>default value of the slider</p>\n","type":"Number","optional":true},{"name":"step","description":"<p>step size for each tick of the slider (if step is set to 0, the slider will move continuously from the minimum to the maximum value)</p>\n","type":"Number","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet slider;\nfunction setup() {\n  slider = createSlider(0, 255, 100);\n  slider.position(10, 10);\n  slider.style('width', '80px');\n}\n\nfunction draw() {\n  let val = slider.value();\n  background(val);\n}\n</code></div>\n\n<div><code>\nlet slider;\nfunction setup() {\n  colorMode(HSB);\n  slider = createSlider(0, 360, 60, 40);\n  slider.position(10, 10);\n  slider.style('width', '80px');\n}\n\nfunction draw() {\n  let val = slider.value();\n  background(val, 100, 100, 1);\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":490,"description":"<p>Creates a <button></button> element in the DOM.\nUse .size() to set the display size of the button.\nUse .mousePressed() to specify behavior on press.</p>\n","itemtype":"method","name":"createButton","params":[{"name":"label","description":"<p>label displayed on the button</p>\n","type":"String"},{"name":"value","description":"<p>value of the button</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div class='norender'><code>\nlet button;\nfunction setup() {\n  createCanvas(100, 100);\n  background(0);\n  button = createButton('click me');\n  button.position(19, 19);\n  button.mousePressed(changeBG);\n}\n\nfunction changeBG() {\n  let val = random(255);\n  background(val);\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":524,"description":"<p>Creates a checkbox <input></input> element in the DOM.\nCalling .checked() on a checkbox returns if it is checked or not</p>\n","itemtype":"method","name":"createCheckbox","params":[{"name":"label","description":"<p>label displayed after checkbox</p>\n","type":"String","optional":true},{"name":"value","description":"<p>value of the checkbox; checked is true, unchecked is false</p>\n","type":"Boolean","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div class='norender'><code>\nlet checkbox;\n\nfunction setup() {\n  checkbox = createCheckbox('label', false);\n  checkbox.changed(myCheckedEvent);\n}\n\nfunction myCheckedEvent() {\n  if (this.checked()) {\n    console.log('Checking!');\n  } else {\n    console.log('Unchecking!');\n  }\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":592,"description":"<p>Creates a dropdown menu <select></select> element in the DOM.\nIt also helps to assign select-box methods to <a href=\"#/p5.Element\">p5.Element</a> when selecting existing select box.</p>\n<ul>\n<li><code>.option(name, [value])</code> can be used to set options for the select after it is created.</li>\n<li><code>.value()</code> will return the currently selected option.</li>\n<li><code>.selected()</code> will return current dropdown element which is an instance of <a href=\"#/p5.Element\">p5.Element</a></li>\n<li><code>.selected(value)</code> can be used to make given option selected by default when the page first loads.</li>\n<li><code>.disable()</code> marks whole of dropdown element as disabled.</li>\n<li><code>.disable(value)</code> marks given option as disabled</li>\n</ul>\n","itemtype":"method","name":"createSelect","return":{"description":"","type":"p5.Element"},"example":["\n<div><code>\nlet sel;\n\nfunction setup() {\n  textAlign(CENTER);\n  background(200);\n  sel = createSelect();\n  sel.position(10, 10);\n  sel.option('pear');\n  sel.option('kiwi');\n  sel.option('grape');\n  sel.selected('kiwi');\n  sel.changed(mySelectEvent);\n}\n\nfunction mySelectEvent() {\n  let item = sel.value();\n  background(200);\n  text('It is a ' + item + '!', 50, 50);\n}\n</code></div>\n\n<div><code>\nlet sel;\n\nfunction setup() {\n  textAlign(CENTER);\n  background(200);\n  sel = createSelect();\n  sel.position(10, 10);\n  sel.option('oil');\n  sel.option('milk');\n  sel.option('bread');\n  sel.disable('milk');\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":592,"params":[{"name":"multiple","description":"<p>true if dropdown should support multiple selections</p>\n","type":"Boolean","optional":true}],"return":{"description":"","type":"p5.Element"}},{"line":643,"params":[{"name":"existing","description":"<p>DOM select element</p>\n","type":"Object"}],"return":{"description":"","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":740,"description":"<p>Creates a radio button element in the DOM.It also helps existing radio buttons\nassign methods of <a href=\"#/p5.Element/\">p5.Element</a>.</p>\n<ul>\n<li><code>.option(value, [label])</code> can be used to create a new option for the\nelement. If an option with a value already exists, it will be returned.\nOptionally, a label can be provided as second argument for the option.</li>\n<li><code>.remove(value)</code> can be used to remove an option for the element.</li>\n<li><code>.value()</code> method will return the currently selected value.</li>\n<li><code>.selected()</code> method will return the currently selected input element.</li>\n<li><code>.selected(value)</code> method will select the option and return it.</li>\n<li><code>.disable(Boolean)</code> method will enable/disable the whole radio button element.</li>\n</ul>\n","itemtype":"method","name":"createRadio","return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet radio;\n\nfunction setup() {\n  radio = createRadio();\n  radio.option('black');\n  radio.option('white');\n  radio.option('gray');\n  radio.style('width', '60px');\n  textAlign(CENTER);\n  fill(255, 0, 0);\n}\n\nfunction draw() {\n  let val = radio.value();\n  background(val);\n  text(val, width / 2, height / 2);\n}\n</code></div>\n<div><code>\nlet radio;\n\nfunction setup() {\n  radio = createRadio();\n  radio.option('apple', 1);\n  radio.option('bread', 2);\n  radio.option('juice', 3);\n  radio.style('width', '60px');\n  textAlign(CENTER);\n}\n\nfunction draw() {\n  background(200);\n  let val = radio.value();\n  if (val) {\n    text('item cost is $' + val, width / 2, height / 2);\n  }\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":740,"params":[{"name":"containerElement","description":"<p>An container HTML Element either a div\nor span inside which all existing radio inputs will be considered as options.</p>\n","type":"Object"},{"name":"name","description":"<p>A name parameter for each Input Element.</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}},{"line":798,"params":[{"name":"name","description":"","type":"String"}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}},{"line":803,"params":[],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":918,"description":"<p>Creates a colorPicker element in the DOM for color input.\nThe .value() method will return a hex string (#rrggbb) of the color.\nThe .color() method will return a p5.Color object with the current chosen color.</p>\n","itemtype":"method","name":"createColorPicker","params":[{"name":"value","description":"<p>default color of element</p>\n","type":"String|p5.Color","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet colorPicker;\nfunction setup() {\n  createCanvas(100, 100);\n  colorPicker = createColorPicker('#ed225d');\n  colorPicker.position(0, height + 5);\n}\n\nfunction draw() {\n  background(colorPicker.color());\n}\n</code></div>\n<div><code>\nlet inp1, inp2;\nfunction setup() {\n  createCanvas(100, 100);\n  background('grey');\n  inp1 = createColorPicker('#ff0000');\n  inp1.position(0, height + 5);\n  inp1.input(setShade1);\n  inp2 = createColorPicker(color('yellow'));\n  inp2.position(0, height + 30);\n  inp2.input(setShade2);\n  setMidShade();\n}\n\nfunction setMidShade() {\n  // Finding a shade between the two\n  let commonShade = lerpColor(inp1.color(), inp2.color(), 0.5);\n  fill(commonShade);\n  rect(20, 20, 60, 60);\n}\n\nfunction setShade1() {\n  setMidShade();\n  console.log('You are choosing shade 1 to be : ', this.value());\n}\nfunction setShade2() {\n  setMidShade();\n  console.log('You are choosing shade 2 to be : ', this.value());\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1006,"description":"<p>Creates an <input></input> element in the DOM for text input.\nUse .<a href=\"#/p5.Element/size\">size()</a> to set the display length of the box.</p>\n","itemtype":"method","name":"createInput","return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div class='norender'><code>\nfunction setup() {\n  let inp = createInput('');\n  inp.input(myInputEvent);\n}\n\nfunction myInputEvent() {\n  console.log('you are typing: ', this.value());\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":1006,"params":[{"name":"value","description":"<p>default value of the input box</p>\n","type":"String"},{"name":"type","description":"<p>type of text, ie text, password etc. Defaults to text.\n  Needs a value to be specified first.</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}},{"line":1027,"params":[{"name":"value","description":"","type":"String","optional":true}],"return":{"description":"","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":1040,"description":"<p>Creates an <input></input> element in the DOM of type 'file'.\nThis allows users to select local files for use in a sketch.</p>\n","itemtype":"method","name":"createFileInput","params":[{"name":"callback","description":"<p>callback function for when a file is loaded</p>\n","type":"Function"},{"name":"multiple","description":"<p>optional, to allow multiple files to be selected</p>\n","type":"Boolean","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created DOM element","type":"p5.Element"},"example":["\n<div><code>\nlet input;\nlet img;\n\nfunction setup() {\n  input = createFileInput(handleFile);\n  input.position(0, 0);\n}\n\nfunction draw() {\n  background(255);\n  if (img) {\n    image(img, 0, 0, width, height);\n  }\n}\n\nfunction handleFile(file) {\n  print(file);\n  if (file.type === 'image') {\n    img = createImg(file.data, '');\n    img.hide();\n  } else {\n    img = null;\n  }\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1100,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1147,"description":"<p>Creates an HTML5 <video> element in the DOM for simple playback\nof audio/video. Shown by default, can be hidden with .<a href=\"#/p5.Element/hide\">hide()</a>\nand drawn into canvas using <a href=\"#/p5/image\">image()</a>. The first parameter\ncan be either a single string path to a video file, or an array of string\npaths to different formats of the same video. This is useful for ensuring\nthat your video can play across different browsers, as each supports\ndifferent formats. See <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats'>this\npage</a> for further information about supported formats.</p>\n","itemtype":"method","name":"createVideo","params":[{"name":"src","description":"<p>path to a video file, or array of paths for\n                            supporting different browsers</p>\n","type":"String|String[]"},{"name":"callback","description":"<p>callback function to be called upon\n                            'canplaythrough' event fire, that is, when the\n                            browser can play the media, and estimates that\n                            enough data has been loaded to play the media\n                            up to its end without having to stop for\n                            further buffering of content</p>\n","type":"Function","optional":true}],"return":{"description":"pointer to video <a href=\"#/p5.Element\">p5.Element</a>","type":"p5.MediaElement"},"example":["\n<div><code>\nlet vid;\nfunction setup() {\n  noCanvas();\n\n  vid = createVideo(\n    ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm'],\n    vidLoad\n  );\n\n  vid.size(100, 100);\n}\n\n// This function is called when the video loads\nfunction vidLoad() {\n  vid.loop();\n  vid.volume(0);\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1193,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1195,"description":"<p>Creates a hidden HTML5 <audio> element in the DOM for simple audio\nplayback. The first parameter can be either a single string path to a\naudio file, or an array of string paths to different formats of the same\naudio. This is useful for ensuring that your audio can play across\ndifferent browsers, as each supports different formats.\nSee <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats'>this\npage for further information about supported formats</a>.</p>\n","itemtype":"method","name":"createAudio","params":[{"name":"src","description":"<p>path to an audio file, or array of paths\n                            for supporting different browsers</p>\n","type":"String|String[]","optional":true},{"name":"callback","description":"<p>callback function to be called upon\n                            'canplaythrough' event fire, that is, when the\n                            browser can play the media, and estimates that\n                            enough data has been loaded to play the media\n                            up to its end without having to stop for\n                            further buffering of content</p>\n","type":"Function","optional":true}],"return":{"description":"pointer to audio <a href=\"#/p5.Element\">p5.Element</a>","type":"p5.MediaElement"},"example":["\n<div><code>\nlet ele;\nfunction setup() {\n  ele = createAudio('assets/beat.mp3');\n\n  // here we set the element to autoplay\n  // The element will play as soon\n  // as it is able to do so.\n  ele.autoplay(true);\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1232,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1234,"itemtype":"property","name":"VIDEO","type":"String","final":1,"category":["Constants"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1240,"itemtype":"property","name":"AUDIO","type":"String","final":1,"category":["Constants"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1277,"description":"<p>Creates a new HTML5 <video> element that contains the audio/video feed\nfrom a webcam. The element is separate from the canvas and is displayed by\ndefault. The element can be hidden using .<a href=\"#/p5.Element/hide\">hide()</a>.\nThe feed can be drawn onto the canvas using <a href=\"#/p5/image\">image()</a>.\nThe loadedmetadata property can be used to detect when the element has fully\nloaded (see second example).</p>\n<p>More specific properties of the feed can be passing in a Constraints object.\nSee the <a href='http://w3c.github.io/mediacapture-main/getusermedia.html#media-track-constraints'>\nW3C spec</a> for possible properties. Note that not all of these are supported\nby all browsers.</p>\n<p><em>Security note</em>: A new browser security specification requires that\ngetUserMedia, which is behind <a href=\"#/p5/createCapture\">createCapture()</a>,\nonly works when you're running the code locally, or on HTTPS. Learn more\n<a href='http://stackoverflow.com/questions/34197653/getusermedia-in-chrome-47-without-using-https'>here</a>\nand <a href='https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia'>here</a>.</p>\n","itemtype":"method","name":"createCapture","params":[{"name":"type","description":"<p>type of capture, either VIDEO or\n                                  AUDIO if none specified, default both,\n                                  or a Constraints object</p>\n","type":"String|Constant|Object"},{"name":"callback","description":"<p>function to be called once\n                                  stream has loaded</p>\n","type":"Function","optional":true}],"return":{"description":"capture video <a href=\"#/p5.Element\">p5.Element</a>","type":"p5.Element"},"example":["\n<div class='norender notest'>\n<code>\nlet capture;\n\nfunction setup() {\n  createCanvas(480, 480);\n  capture = createCapture(VIDEO);\n  capture.hide();\n}\n\nfunction draw() {\n  image(capture, 0, 0, width, width * capture.height / capture.width);\n  filter(INVERT);\n}\n</code>\n</div>\n\n<div class='norender notest'>\n<code>\nfunction setup() {\n  createCanvas(480, 120);\n  let constraints = {\n    video: {\n      mandatory: {\n        minWidth: 1280,\n        minHeight: 720\n      },\n      optional: [{ maxFrameRate: 10 }]\n    },\n    audio: true\n  };\n  createCapture(constraints, function(stream) {\n    console.log(stream);\n  });\n}\n</code>\n</div>\n<div class='norender notest'>\n<code>\nlet capture;\n\nfunction setup() {\n  createCanvas(640, 480);\n  capture = createCapture(VIDEO);\n}\nfunction draw() {\n  background(0);\n  if (capture.loadedmetadata) {\n    let c = capture.get(0, 0, 100, 100);\n    image(c, 0, 0);\n  }\n}\n</code>\n</div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1414,"description":"<p>Creates element with given tag in the DOM with given content.</p>\n","itemtype":"method","name":"createElement","params":[{"name":"tag","description":"<p>tag for the new element</p>\n","type":"String"},{"name":"content","description":"<p>html content to be inserted into the element</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div class='norender'><code>\ncreateElement('h2', 'im an h2 p5.element!');\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1438,"description":"<p>Adds specified class to the element.</p>\n","itemtype":"method","name":"addClass","params":[{"name":"class","description":"<p>name of class to add</p>\n","type":"String"}],"chainable":1,"example":["\n <div class='norender'><code>\n let div = createDiv('div');\n div.addClass('myClass');\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1463,"description":"<p>Removes specified class from the element.</p>\n","itemtype":"method","name":"removeClass","params":[{"name":"class","description":"<p>name of class to remove</p>\n","type":"String"}],"chainable":1,"example":["\n <div class='norender'><code>\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.\nlet div;\nfunction setup() {\n   div = createDiv('div');\n   div.addClass('myClass');\n }\nfunction mousePressed() {\n   div.removeClass('myClass');\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1494,"description":"<p>Checks if specified class already set to element</p>\n","itemtype":"method","name":"hasClass","return":{"description":"a boolean value if element has specified class","type":"Boolean"},"params":[{"name":"c","description":"<p>class name of class to check</p>\n","type":"String"}],"example":["\n <div class='norender'><code>\n let div;\nfunction setup() {\n   div = createDiv('div');\n   div.addClass('show');\n }\nfunction mousePressed() {\n   if (div.hasClass('show')) {\n     div.addClass('show');\n   } else {\n     div.removeClass('show');\n   }\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1523,"description":"<p>Toggles element class</p>\n","itemtype":"method","name":"toggleClass","params":[{"name":"c","description":"<p>class name to toggle</p>\n","type":"String"}],"chainable":1,"example":["\n <div class='norender'><code>\n let div;\nfunction setup() {\n   div = createDiv('div');\n   div.addClass('show');\n }\nfunction mousePressed() {\n   div.toggleClass('show');\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1556,"description":"<p>Attaches the element  as a child to the parent specified.\n Accepts either a string ID, DOM node, or <a href=\"#/p5.Element\">p5.Element</a>.\n If no argument is specified, an array of children DOM nodes is returned.</p>\n","itemtype":"method","name":"child","return":{"description":"an array of child nodes","type":"Node[]"},"example":["\n <div class='norender'><code>\n let div0 = createDiv('this is the parent');\n let div1 = createDiv('this is the child');\n div0.child(div1); // use p5.Element\n </code></div>\n <div class='norender'><code>\n let div0 = createDiv('this is the parent');\n let div1 = createDiv('this is the child');\n div1.id('apples');\n div0.child('apples'); // use id\n </code></div>\n <div class='norender notest'><code>\n // this example assumes there is a div already on the page\n // with id \"myChildDiv\"\n let div0 = createDiv('this is the parent');\n let elt = document.getElementById('myChildDiv');\n div0.child(elt); // use element from page\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1556,"params":[],"return":{"description":"an array of child nodes","type":"Node[]"}},{"line":1584,"params":[{"name":"child","description":"<p>the ID, DOM node, or <a href=\"#/p5.Element\">p5.Element</a>\n                        to add to the current element</p>\n","type":"String|p5.Element","optional":true}],"chainable":1}]},{"file":"src/dom/dom.js","line":1609,"description":"<p>Centers a p5 Element either vertically, horizontally,\nor both, relative to its parent or according to\nthe body if the Element has no parent. If no argument is passed\nthe Element is aligned both vertically and horizontally.</p>\n","itemtype":"method","name":"center","params":[{"name":"align","description":"<p>passing 'vertical', 'horizontal' aligns element accordingly</p>\n","type":"String","optional":true}],"chainable":1,"example":["\n<div><code>\nfunction setup() {\n  let div = createDiv('').size(10, 10);\n  div.style('background-color', 'orange');\n  div.center();\n}\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1660,"description":"<p>If an argument is given, sets the inner HTML of the element,\n replacing any existing html. If true is included as a second\n argument, html is appended instead of replacing existing html.\n If no arguments are given, returns\n the inner HTML of the element.</p>\n","itemtype":"method","name":"html","return":{"description":"the inner HTML of the element","type":"String"},"example":["\n <div class='norender'><code>\n let div = createDiv('').size(100, 100);\n div.html('hi');\n </code></div>\n <div class='norender'><code>\n let div = createDiv('Hello ').size(100, 100);\n div.html('World', true);\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1660,"params":[],"return":{"description":"the inner HTML of the element","type":"String"}},{"line":1681,"params":[{"name":"html","description":"<p>the HTML to be placed inside the element</p>\n","type":"String","optional":true},{"name":"append","description":"<p>whether to append HTML to existing</p>\n","type":"Boolean","optional":true}],"chainable":1}]},{"file":"src/dom/dom.js","line":1699,"description":"<p>Sets the position of the element. If no position type argument is given, the\n position will be relative to (0, 0) of the window.\n Essentially, this sets position:absolute and left and top\n properties of style. If an optional third argument specifying position type is given,\n the x and y coordinates will be interpreted based on the <a target=\"_blank\"\n href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/position\">positioning scheme</a>.\n If no arguments given, the function returns the x and y position of the element.\nfound documentation on how to be more specific with object type\n <a href=\"https://stackoverflow.com/questions/14714314/how-do-i-comment-object-literals-in-yuidoc\">https://stackoverflow.com/questions/14714314/how-do-i-comment-object-literals-in-yuidoc</a></p>\n","itemtype":"method","name":"position","return":{"description":"object of form { x: 0, y: 0 } containing the position of the element in an object","type":"Object"},"example":["\n <div><code class='norender'>\n function setup() {\n   let cnv = createCanvas(100, 100);\n   // positions canvas 50px to the right and 100px\n   // below upper left corner of the window\n   cnv.position(50, 100);\n }\n </code></div>\n <div><code class='norender'>\n function setup() {\n   let cnv = createCanvas(100, 100);\n   // positions canvas 50px to the right and 100px\n   // below upper left corner of the window\n   cnv.position(0, 0, 'fixed');\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1699,"params":[],"return":{"description":"object of form { x: 0, y: 0 } containing the position of the element in an object","type":"Object"}},{"line":1732,"params":[{"name":"x","description":"<p>x-position relative to upper left of window (optional)</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>y-position relative to upper left of window (optional)</p>\n","type":"Number","optional":true},{"name":"positionType","description":"<p>it can be static, fixed, relative, sticky, initial or inherit (optional)</p>\n","type":"String"}],"chainable":1}]},{"file":"src/dom/dom.js","line":1819,"description":"<p>Sets the given style (css) property (1st arg) of the element with the\ngiven value (2nd arg). If a single argument is given, .style()\nreturns the value of the given property; however, if the single argument\nis given in css syntax ('text-align:center'), .style() sets the css\nappropriately.</p>\n","itemtype":"method","name":"style","return":{"description":"value of property","type":"String"},"example":["\n<div><code class='norender'>\nlet myDiv = createDiv('I like pandas.');\nmyDiv.style('font-size', '18px');\nmyDiv.style('color', '#ff0000');\n</code></div>\n<div><code class='norender'>\nlet col = color(25, 23, 200, 50);\nlet button = createButton('button');\nbutton.style('background-color', col);\nbutton.position(10, 10);\n</code></div>\n<div><code class='norender'>\nlet myDiv;\nfunction setup() {\n  background(200);\n  myDiv = createDiv('I like gray.');\n  myDiv.position(20, 20);\n}\n\nfunction draw() {\n  myDiv.style('font-size', mouseX + 'px');\n}\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1819,"params":[{"name":"property","description":"<p>property to be set</p>\n","type":"String"}],"return":{"description":"value of property","type":"String"}},{"line":1854,"params":[{"name":"property","description":"","type":"String"},{"name":"value","description":"<p>value to assign to property</p>\n","type":"String|p5.Color"}],"chainable":1,"return":{"description":"current value of property, if no value is given as second argument","type":"String"}}]},{"file":"src/dom/dom.js","line":1911,"description":"<p>Adds a new attribute or changes the value of an existing attribute\n on the specified element. If no value is specified, returns the\n value of the given attribute, or null if attribute is not set.</p>\n","itemtype":"method","name":"attribute","return":{"description":"value of attribute","type":"String"},"example":["\n <div class='norender'><code>\n let myDiv = createDiv('I like pandas.');\n myDiv.attribute('align', 'center');\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1911,"params":[],"return":{"description":"value of attribute","type":"String"}},{"line":1926,"params":[{"name":"attr","description":"<p>attribute to set</p>\n","type":"String"},{"name":"value","description":"<p>value to assign to attribute</p>\n","type":"String"}],"chainable":1}]},{"file":"src/dom/dom.js","line":1955,"description":"<p>Removes an attribute on the specified element.</p>\n","itemtype":"method","name":"removeAttribute","params":[{"name":"attr","description":"<p>attribute to remove</p>\n","type":"String"}],"chainable":1,"example":["\n <div><code>\n let button;\n let checkbox;\nfunction setup() {\n   checkbox = createCheckbox('enable', true);\n   checkbox.changed(enableButton);\n   button = createButton('button');\n   button.position(10, 10);\n }\nfunction enableButton() {\n   if (this.checked()) {\n     // Re-enable the button\n     button.removeAttribute('disabled');\n   } else {\n     // Disable the button\n     button.attribute('disabled', '');\n   }\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2000,"description":"<p>Either returns the value of the element if no arguments\ngiven, or sets the value of the element.</p>\n","itemtype":"method","name":"value","return":{"description":"value of the element","type":"String|Number"},"example":["\n<div class='norender'><code>\n// gets the value\nlet inp;\nfunction setup() {\n  inp = createInput('');\n}\n\nfunction mousePressed() {\n  print(inp.value());\n}\n</code></div>\n<div class='norender'><code>\n// sets the value\nlet inp;\nfunction setup() {\n  inp = createInput('myValue');\n}\n\nfunction mousePressed() {\n  inp.value('myValue');\n}\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":2000,"params":[],"return":{"description":"value of the element","type":"String|Number"}},{"line":2030,"params":[{"name":"value","description":"","type":"String|Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":2046,"description":"<p>Shows the current element. Essentially, setting display:block for the style.</p>\n","itemtype":"method","name":"show","chainable":1,"example":["\n <div class='norender'><code>\n let div = createDiv('div');\n div.style('display', 'none');\n div.show(); // turns display to block\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2064,"description":"<p>Hides the current element. Essentially, setting display:none for the style.</p>\n","itemtype":"method","name":"hide","chainable":1,"example":["\n<div class='norender'><code>\nlet div = createDiv('this is a div');\ndiv.hide();\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2080,"description":"<p>Sets the width and height of the element. AUTO can be used to\n only adjust one dimension at a time. If no arguments are given, it\n returns the width and height of the element in an object. In case of\n elements which need to be loaded, such as images, it is recommended\n to call the function after the element has finished loading.</p>\n","itemtype":"method","name":"size","return":{"description":"the width and height of the element in an object","type":"Object"},"example":["\n <div class='norender'><code>\n let div = createDiv('this is a div');\n div.size(100, 100);\n let img = createImg(\n   'assets/rockies.jpg',\n   'A tall mountain with a small forest and field in front of it on a sunny day',\n   '',\n   () => {\n     img.size(10, AUTO);\n   }\n );\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":2080,"params":[],"return":{"description":"the width and height of the element in an object","type":"Object"}},{"line":2104,"params":[{"name":"w","description":"<p>width of the element, either AUTO, or a number</p>\n","type":"Number|Constant"},{"name":"h","description":"<p>height of the element, either AUTO, or a number</p>\n","type":"Number|Constant","optional":true}],"chainable":1}]},{"file":"src/dom/dom.js","line":2161,"description":"<p>Removes the element, stops all media streams, and deregisters all listeners.</p>\n","itemtype":"method","name":"remove","example":["\n<div class='norender'><code>\nlet myDiv = createDiv('this is some text');\nmyDiv.remove();\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2195,"description":"<p>Registers a callback that gets called every time a file that is\ndropped on the element has been loaded.\np5 will load every dropped file into memory and pass it as a p5.File object to the callback.\nMultiple files dropped at the same time will result in multiple calls to the callback.</p>\n<p>You can optionally pass a second callback which will be registered to the raw\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/Events/drop\">drop</a> event.\nThe callback will thus be provided the original\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/DragEvent\">DragEvent</a>.\nDropping multiple files at the same time will trigger the second callback once per drop,\nwhereas the first callback will trigger for each loaded file.</p>\n","itemtype":"method","name":"drop","params":[{"name":"callback","description":"<p>callback to receive loaded file, called for each file dropped.</p>\n","type":"Function"},{"name":"fxn","description":"<p>callback triggered once when files are dropped with the drop event.</p>\n","type":"Function","optional":true}],"chainable":1,"example":["\n<div><code>\nfunction setup() {\n  let c = createCanvas(100, 100);\n  background(200);\n  textAlign(CENTER);\n  text('drop file', width / 2, height / 2);\n  c.drop(gotFile);\n}\n\nfunction gotFile(file) {\n  background(200);\n  text('received file:', width / 2, height / 2);\n  text(file.name, width / 2, height / 2 + 50);\n}\n</code></div>\n\n<div><code>\nlet img;\n\nfunction setup() {\n  let c = createCanvas(100, 100);\n  background(200);\n  textAlign(CENTER);\n  text('drop image', width / 2, height / 2);\n  c.drop(gotFile);\n}\n\nfunction draw() {\n  if (img) {\n    image(img, 0, 0, width, height);\n  }\n}\n\nfunction gotFile(file) {\n  img = createImg(file.data, '').hide();\n}\n</code></div>"],"alt":"Canvas turns into whatever image is dragged/dropped onto it.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2327,"description":"<p>Path to the media element source.</p>\n","itemtype":"property","name":"src","return":{"description":"src","type":"String"},"example":["\n<div><code>\nlet ele;\n\nfunction setup() {\n  background(250);\n\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n\n  //In this example we create\n  //a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/beat.mp3');\n\n  //We'll set up our example so that\n  //when you click on the text,\n  //an alert box displays the MediaElement's\n  //src field.\n  textAlign(CENTER);\n  text('Click Me!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    //Show our p5.MediaElement's src field\n    alert(ele.src);\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2392,"description":"<p>Play an HTML5 media element.</p>\n","itemtype":"method","name":"play","chainable":1,"example":["\n<div><code>\nlet ele;\n\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n\n  //In this example we create\n  //a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/beat.mp3');\n\n  background(250);\n  textAlign(CENTER);\n  text('Click to Play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    //Here we call the play() function on\n    //the p5.MediaElement we created above.\n    //This will start the audio sample.\n    ele.play();\n\n    background(200);\n    text('You clicked Play!', width / 2, height / 2);\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2456,"description":"<p>Stops an HTML5 media element (sets current time to zero).</p>\n","itemtype":"method","name":"stop","chainable":1,"example":["\n<div><code>\n//This example both starts\n//and stops a sound sample\n//when the user clicks the canvas\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\n\n//while our audio is playing,\n//this will be set to true\nlet sampleIsPlaying = false;\n\nfunction setup() {\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/beat.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    background(200);\n\n    if (sampleIsPlaying) {\n      //if the sample is currently playing\n      //calling the stop() function on\n      //our p5.MediaElement will stop\n      //it and reset its current\n      //time to 0 (i.e. it will start\n      //at the beginning the next time\n      //you play it)\n      ele.stop();\n\n      sampleIsPlaying = false;\n      text('Click to play!', width / 2, height / 2);\n    } else {\n      //loop our sound element until we\n      //call ele.stop() on it.\n      ele.loop();\n\n      sampleIsPlaying = true;\n      text('Click to stop!', width / 2, height / 2);\n    }\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2520,"description":"<p>Pauses an HTML5 media element.</p>\n","itemtype":"method","name":"pause","chainable":1,"example":["\n<div><code>\n//This example both starts\n//and pauses a sound sample\n//when the user clicks the canvas\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\n\n//while our audio is playing,\n//this will be set to true\nlet sampleIsPlaying = false;\n\nfunction setup() {\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    background(200);\n\n    if (sampleIsPlaying) {\n      //Calling pause() on our\n      //p5.MediaElement will stop it\n      //playing, but when we call the\n      //loop() or play() functions\n      //the sample will start from\n      //where we paused it.\n      ele.pause();\n\n      sampleIsPlaying = false;\n      text('Click to resume!', width / 2, height / 2);\n    } else {\n      //loop our sound element until we\n      //call ele.pause() on it.\n      ele.loop();\n\n      sampleIsPlaying = true;\n      text('Click to pause!', width / 2, height / 2);\n    }\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2582,"description":"<p>Set 'loop' to true for an HTML5 media element, and starts playing.</p>\n","itemtype":"method","name":"loop","chainable":1,"example":["\n<div><code>\n//Clicking the canvas will loop\n//the audio sample until the user\n//clicks again to stop it\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\n\n//while our audio is playing,\n//this will be set to true\nlet sampleIsLooping = false;\n\nfunction setup() {\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to loop!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    background(200);\n\n    if (!sampleIsLooping) {\n      //loop our sound element until we\n      //call ele.stop() on it.\n      ele.loop();\n\n      sampleIsLooping = true;\n      text('Click to stop!', width / 2, height / 2);\n    } else {\n      ele.stop();\n\n      sampleIsLooping = false;\n      text('Click to loop!', width / 2, height / 2);\n    }\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2638,"description":"<p>Set 'loop' to false for an HTML5 media element. Element will stop\nwhen it reaches the end.</p>\n","itemtype":"method","name":"noLoop","chainable":1,"example":["\n<div><code>\n//This example both starts\n//and stops loop of sound sample\n//when the user clicks the canvas\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\n//while our audio is playing,\n//this will be set to true\nlet sampleIsPlaying = false;\n\nfunction setup() {\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/beat.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    background(200);\n\n    if (sampleIsPlaying) {\n      ele.noLoop();\n      sampleIsPlaying = false;\n      text('No more Loops!', width / 2, height / 2);\n    } else {\n      ele.loop();\n      sampleIsPlaying = true;\n      text('Click to stop looping!', width / 2, height / 2);\n    }\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2704,"description":"<p>Set HTML5 media element to autoplay or not. If no argument is specified, by\ndefault it will autoplay.</p>\n","itemtype":"method","name":"autoplay","params":[{"name":"shouldAutoplay","description":"<p>whether the element should autoplay</p>\n","type":"Boolean"}],"chainable":1,"example":["\n<div><code>\nlet videoElement;\nfunction setup() {\n  noCanvas();\n  videoElement = createVideo(['assets/small.mp4'], onVideoLoad);\n}\nfunction onVideoLoad() {\n  // The media will play as soon as it is loaded.\n  videoElement.autoplay();\n  videoElement.volume(0);\n  videoElement.size(100, 100);\n}\n</code></div>\n\n<div><code>\nlet videoElement;\nfunction setup() {\n  noCanvas();\n  videoElement = createVideo(['assets/small.mp4'], onVideoLoad);\n}\nfunction onVideoLoad() {\n  // The media will not play untill some explicitly triggered.\n  videoElement.autoplay(false);\n  videoElement.volume(0);\n  videoElement.size(100, 100);\n}\n\nfunction mouseClicked() {\n  videoElement.play();\n}\n</code></div>"],"alt":"An example of a video element which autoplays after it is loaded.\nAn example of a video element which waits for a trigger for playing.","class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2771,"description":"<p>Sets volume for this HTML5 media element. If no argument is given,\nreturns the current volume.</p>\n","itemtype":"method","name":"volume","return":{"description":"current volume","type":"Number"},"example":["\n<div><code>\nlet ele;\nfunction setup() {\n  // p5.MediaElement objects are usually created\n  // by calling the createAudio(), createVideo(),\n  // and createCapture() functions.\n  // In this example we create\n  // a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(250);\n  textAlign(CENTER);\n  text('Click to Play!', width / 2, height / 2);\n}\nfunction mouseClicked() {\n  // Here we call the volume() function\n  // on the sound element to set its volume\n  // Volume must be between 0.0 and 1.0\n  ele.volume(0.2);\n  ele.play();\n  background(200);\n  text('You clicked Play!', width / 2, height / 2);\n}\n</code></div>\n<div><code>\nlet audio;\nlet counter = 0;\n\nfunction loaded() {\n  audio.play();\n}\n\nfunction setup() {\n  audio = createAudio('assets/lucky_dragons.mp3', loaded);\n  textAlign(CENTER);\n}\n\nfunction draw() {\n  if (counter === 0) {\n    background(0, 255, 0);\n    text('volume(0.9)', width / 2, height / 2);\n  } else if (counter === 1) {\n    background(255, 255, 0);\n    text('volume(0.5)', width / 2, height / 2);\n  } else if (counter === 2) {\n    background(255, 0, 0);\n    text('volume(0.1)', width / 2, height / 2);\n  }\n}\n\nfunction mousePressed() {\n  counter++;\n  if (counter === 0) {\n    audio.volume(0.9);\n  } else if (counter === 1) {\n    audio.volume(0.5);\n  } else if (counter === 2) {\n    audio.volume(0.1);\n  } else {\n    counter = 0;\n    audio.volume(0.9);\n  }\n}\n</code>\n</div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM","overloads":[{"line":2771,"params":[],"return":{"description":"current volume","type":"Number"}},{"line":2844,"params":[{"name":"val","description":"<p>volume between 0.0 and 1.0</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":2857,"description":"<p>If no arguments are given, returns the current playback speed of the\nelement. The speed parameter sets the speed where 2.0 will play the\nelement twice as fast, 0.5 will play at half the speed, and -1 will play\nthe element in normal speed in reverse.(Note that not all browsers support\nbackward playback and even if they do, playback might not be smooth.)</p>\n","itemtype":"method","name":"speed","return":{"description":"current playback speed of the element","type":"Number"},"example":["\n<div class='norender notest'><code>\n//Clicking the canvas will loop\n//the audio sample until the user\n//clicks again to stop it\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\nlet button;\n\nfunction setup() {\n  createCanvas(710, 400);\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/beat.mp3');\n  ele.loop();\n  background(200);\n\n  button = createButton('2x speed');\n  button.position(100, 68);\n  button.mousePressed(twice_speed);\n\n  button = createButton('half speed');\n  button.position(200, 68);\n  button.mousePressed(half_speed);\n\n  button = createButton('reverse play');\n  button.position(300, 68);\n  button.mousePressed(reverse_speed);\n\n  button = createButton('STOP');\n  button.position(400, 68);\n  button.mousePressed(stop_song);\n\n  button = createButton('PLAY!');\n  button.position(500, 68);\n  button.mousePressed(play_speed);\n}\n\nfunction twice_speed() {\n  ele.speed(2);\n}\n\nfunction half_speed() {\n  ele.speed(0.5);\n}\n\nfunction reverse_speed() {\n  ele.speed(-1);\n}\n\nfunction stop_song() {\n  ele.stop();\n}\n\nfunction play_speed() {\n  ele.play();\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM","overloads":[{"line":2857,"params":[],"return":{"description":"current playback speed of the element","type":"Number"}},{"line":2929,"params":[{"name":"speed","description":"<p>speed multiplier for element playback</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":2946,"description":"<p>If no arguments are given, returns the current time of the element.\nIf an argument is given the current time of the element is set to it.</p>\n","itemtype":"method","name":"time","return":{"description":"current time (in seconds)","type":"Number"},"example":["\n<div><code>\nlet ele;\nlet beginning = true;\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n\n  //In this example we create\n  //a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(250);\n  textAlign(CENTER);\n  text('start at beginning', width / 2, height / 2);\n}\n\n// this function fires with click anywhere\nfunction mousePressed() {\n  if (beginning === true) {\n    // here we start the sound at the beginning\n    // time(0) is not necessary here\n    // as this produces the same result as\n    // play()\n    ele.play().time(0);\n    background(200);\n    text('jump 2 sec in', width / 2, height / 2);\n    beginning = false;\n  } else {\n    // here we jump 2 seconds into the sound\n    ele.play().time(2);\n    background(250);\n    text('start at beginning', width / 2, height / 2);\n    beginning = true;\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM","overloads":[{"line":2946,"params":[],"return":{"description":"current time (in seconds)","type":"Number"}},{"line":2991,"params":[{"name":"time","description":"<p>time to jump to (in seconds)</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":3005,"description":"<p>Returns the duration of the HTML5 media element.</p>\n","itemtype":"method","name":"duration","return":{"description":"duration","type":"Number"},"example":["\n<div><code>\nlet ele;\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n  //In this example we create\n  //a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/doorbell.mp3');\n  background(250);\n  textAlign(CENTER);\n  text('Click to know the duration!', 10, 25, 70, 80);\n}\nfunction mouseClicked() {\n  ele.play();\n  background(200);\n  //ele.duration dislpays the duration\n  text(ele.duration() + ' seconds', width / 2, height / 2);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3127,"description":"<p>Schedule an event to be called when the audio or video\nelement reaches the end. If the element is looping,\nthis will not be called. The element is passed in\nas the argument to the onended callback.</p>\n","itemtype":"method","name":"onended","params":[{"name":"callback","description":"<p>function to call when the\n                            soundfile has ended. The\n                            media element will be passed\n                            in as the argument to the\n                            callback.</p>\n","type":"Function"}],"chainable":1,"example":["\n<div><code>\nfunction setup() {\n  let audioEl = createAudio('assets/beat.mp3');\n  audioEl.showControls();\n  audioEl.onended(sayDone);\n}\n\nfunction sayDone(elt) {\n  alert('done playing ' + elt.src);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3158,"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3160,"description":"<p>Send the audio output of this element to a specified audioNode or\np5.sound object. If no element is provided, connects to p5's main\noutput. That connection is established when this method is first called.\nAll connections are removed by the .disconnect() method.</p>\n<p>This method is meant to be used with the p5.sound.js addon library.</p>\n","itemtype":"method","name":"connect","params":[{"name":"audioNode","description":"<p>AudioNode from the Web Audio API,\nor an object from the p5.sound library</p>\n","type":"AudioNode|Object"}],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3209,"description":"<p>Disconnect all Web Audio routing, including to main output.\nThis is useful if you want to re-route the output through\naudio effects, for example.</p>\n","itemtype":"method","name":"disconnect","class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3224,"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3226,"description":"<p>Show the default MediaElement controls, as determined by the web browser.</p>\n","itemtype":"method","name":"showControls","example":["\n<div><code>\nlet ele;\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n  //In this example we create\n  //a new p5.MediaElement via createAudio()\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to Show Controls!', 10, 25, 70, 80);\n}\nfunction mousePressed() {\n  ele.showControls();\n  background(200);\n  text('Controls Shown', width / 2, height / 2);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3257,"description":"<p>Hide the default mediaElement controls.</p>\n","itemtype":"method","name":"hideControls","example":["\n<div><code>\nlet ele;\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n  //In this example we create\n  //a new p5.MediaElement via createAudio()\n  ele = createAudio('assets/lucky_dragons.mp3');\n  ele.showControls();\n  background(200);\n  textAlign(CENTER);\n  text('Click to hide Controls!', 10, 25, 70, 80);\n}\nfunction mousePressed() {\n  ele.hideControls();\n  background(200);\n  text('Controls hidden', width / 2, height / 2);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3286,"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3297,"description":"<p>Schedule events to trigger every time a MediaElement\n(audio/video) reaches a playback cue point.</p>\n<p>Accepts a callback function, a time (in seconds) at which to trigger\nthe callback, and an optional parameter for the callback.</p>\n<p>Time will be passed as the first parameter to the callback function,\nand param will be the second parameter.</p>\n","itemtype":"method","name":"addCue","params":[{"name":"time","description":"<p>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.</p>\n","type":"Number"},{"name":"callback","description":"<p>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.</p>\n","type":"Function"},{"name":"value","description":"<p>An object to be passed as the\n                            second parameter to the\n                            callback function.</p>\n","type":"Object","optional":true}],"return":{"description":"id ID of this cue,\n                    useful for removeCue(id)","type":"Number"},"example":["\n<div><code>\n//\n//\nfunction setup() {\n  noCanvas();\n\n  let audioEl = createAudio('assets/beat.mp3');\n  audioEl.showControls();\n\n  // schedule three calls to changeBackground\n  audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\n  audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\n  audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\n  audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\n  audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\n  audioEl.addCue(5.0, changeBackground, color(255, 255, 0));\n}\n\nfunction changeBackground(val) {\n  background(val);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3360,"description":"<p>Remove a callback based on its ID. The ID is returned by the\naddCue method.</p>\n","itemtype":"method","name":"removeCue","params":[{"name":"id","description":"<p>ID of the cue, as returned by addCue</p>\n","type":"Number"}],"example":["\n<div><code>\nlet audioEl, id1, id2;\nfunction setup() {\n  background(255, 255, 255);\n  audioEl = createAudio('assets/beat.mp3');\n  audioEl.showControls();\n  // schedule five calls to changeBackground\n  id1 = audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\n  audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\n  audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\n  audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\n  id2 = audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\n  text('Click to remove first and last Cue!', 10, 25, 70, 80);\n}\nfunction mousePressed() {\n  audioEl.removeCue(id1);\n  audioEl.removeCue(id2);\n}\nfunction changeBackground(val) {\n  background(val);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3402,"description":"<p>Remove all of the callbacks that had originally been scheduled\nvia the addCue method.</p>\n","itemtype":"method","name":"clearCues","params":[{"name":"id","description":"<p>ID of the cue, as returned by addCue</p>\n","type":"Number"}],"example":["\n<div><code>\nlet audioEl;\nfunction setup() {\n  background(255, 255, 255);\n  audioEl = createAudio('assets/beat.mp3');\n  //Show the default MediaElement controls, as determined by the web browser\n  audioEl.showControls();\n  // schedule calls to changeBackground\n  background(200);\n  text('Click to change Cue!', 10, 25, 70, 80);\n  audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\n  audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\n  audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\n  audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\n  audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\n}\nfunction mousePressed() {\n  // here we clear the scheduled callbacks\n  audioEl.clearCues();\n  // then we add some more callbacks\n  audioEl.addCue(1, changeBackground, color(2, 2, 2));\n  audioEl.addCue(3, changeBackground, color(255, 255, 0));\n}\nfunction changeBackground(val) {\n  background(val);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3468,"description":"<p>Underlying File object. All normal File methods can be called on this.</p>\n","itemtype":"property","name":"file","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3480,"description":"<p>File type (image, text, etc.)</p>\n","itemtype":"property","name":"type","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3486,"description":"<p>File subtype (usually the file extension jpg, png, xml, etc.)</p>\n","itemtype":"property","name":"subtype","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3492,"description":"<p>File name</p>\n","itemtype":"property","name":"name","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3498,"description":"<p>File size</p>\n","itemtype":"property","name":"size","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3505,"description":"<p>URL string containing either image data, the text contents of the file or\na parsed object if file is JSON and p5.XML if XML</p>\n","itemtype":"property","name":"data","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/events/acceleration.js","line":11,"description":"<p>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.</p>\n","itemtype":"property","name":"deviceOrientation","type":"Constant","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":23,"description":"<p>The system variable accelerationX always contains the acceleration of the\ndevice along the x axis. Value is represented as meters per second squared.</p>\n","itemtype":"property","name":"accelerationX","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"Magnitude of device acceleration is displayed as ellipse size","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":46,"description":"<p>The system variable accelerationY always contains the acceleration of the\ndevice along the y axis. Value is represented as meters per second squared.</p>\n","itemtype":"property","name":"accelerationY","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"Magnitude of device acceleration is displayed as ellipse size","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":69,"description":"<p>The system variable accelerationZ always contains the acceleration of the\ndevice along the z axis. Value is represented as meters per second squared.</p>\n","itemtype":"property","name":"accelerationZ","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"Magnitude of device acceleration is displayed as ellipse size","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":94,"description":"<p>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.</p>\n","itemtype":"property","name":"pAccelerationX","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":104,"description":"<p>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.</p>\n","itemtype":"property","name":"pAccelerationY","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":114,"description":"<p>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.</p>\n","itemtype":"property","name":"pAccelerationZ","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":135,"description":"<p>The system variable rotationX always contains the rotation of the\ndevice along the x axis. If the sketch <a href=\"#/p5/angleMode\">\nangleMode()</a> is set to DEGREES, the value will be -180 to 180. If\nit is set to RADIANS, the value will be -PI to PI.</p>\n<p>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.</p>\n","itemtype":"property","name":"rotationX","type":"Number","readonly":"","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  //rotateZ(radians(rotationZ));\n  rotateX(radians(rotationX));\n  //rotateY(radians(rotationY));\n  box(200, 200, 200);\n}\n</code>\n</div>"],"alt":"red horizontal line right, green vertical line bottom. black background.","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":168,"description":"<p>The system variable rotationY always contains the rotation of the\ndevice along the y axis. If the sketch <a href=\"#/p5/angleMode\">\nangleMode()</a> 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.</p>\n<p>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.</p>\n","itemtype":"property","name":"rotationY","type":"Number","readonly":"","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  //rotateZ(radians(rotationZ));\n  //rotateX(radians(rotationX));\n  rotateY(radians(rotationY));\n  box(200, 200, 200);\n}\n</code>\n</div>"],"alt":"red horizontal line right, green vertical line bottom. black background.","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":201,"description":"<p>The system variable rotationZ always contains the rotation of the\ndevice along the z axis. If the sketch <a href=\"#/p5/angleMode\">\nangleMode()</a> 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.</p>\n<p>Unlike rotationX and rotationY, this variable is available for devices\nwith a built-in compass only.</p>\n<p>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.</p>\n","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  rotateZ(radians(rotationZ));\n  //rotateX(radians(rotationX));\n  //rotateY(radians(rotationY));\n  box(200, 200, 200);\n}\n</code>\n</div>"],"itemtype":"property","name":"rotationZ","type":"Number","readonly":"","alt":"red horizontal line right, green vertical line bottom. black background.","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":239,"description":"<p>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 <a href=\"#/p5/angleMode\"> angleMode()</a> is set to DEGREES,\nthe value will be -180 to 180. If it is set to RADIANS, the value will\nbe -PI to PI.</p>\n<p>pRotationX can also be used with rotationX to determine the rotate\ndirection of the device along the X-axis.</p>\n","example":["\n<div class='norender'>\n<code>\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);\n</code>\n</div>"],"alt":"no image to display.","itemtype":"property","name":"pRotationX","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":285,"description":"<p>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 <a href=\"#/p5/angleMode\"> angleMode()</a> 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.</p>\n<p>pRotationY can also be used with rotationY to determine the rotate\ndirection of the device along the Y-axis.</p>\n","example":["\n<div class='norender'>\n<code>\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);\n</code>\n</div>"],"alt":"no image to display.","itemtype":"property","name":"pRotationY","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":330,"description":"<p>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 <a href=\"#/p5/angleMode\"> angleMode()</a> 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.</p>\n<p>pRotationZ can also be used with rotationZ to determine the rotate\ndirection of the device along the Z-axis.</p>\n","example":["\n<div class='norender'>\n<code>\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);\n</code>\n</div>"],"alt":"no image to display.","itemtype":"property","name":"pRotationZ","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":389,"description":"<p>When a device is rotated, the axis that triggers the <a href=\"#/p5/deviceTurned\">deviceTurned()</a>\nmethod is stored in the turnAxis variable. The turnAxis variable is only defined within\nthe scope of deviceTurned().</p>\n","itemtype":"property","name":"turnAxis","type":"String","readonly":"","example":["\n<div>\n<code>\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}\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</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device turns\n50x50 black rect in center of canvas. turns white on mobile when x-axis turns","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":428,"description":"<p>The <a href=\"#/p5/setMoveThreshold\">setMoveThreshold()</a> function is used to set the movement threshold for\nthe <a href=\"#/p5/deviceMoved\">deviceMoved()</a> function. The default threshold is set to 0.5.</p>\n","itemtype":"method","name":"setMoveThreshold","params":[{"name":"value","description":"<p>The threshold value</p>\n","type":"Number"}],"example":["\n<div class=\"norender\">\n<code>\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}\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</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device moves","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":471,"description":"<p>The <a href=\"#/p5/setShakeThreshold\">setShakeThreshold()</a> function is used to set the movement threshold for\nthe <a href=\"#/p5/deviceShaken\">deviceShaken()</a> function. The default threshold is set to 30.</p>\n","itemtype":"method","name":"setShakeThreshold","params":[{"name":"value","description":"<p>The threshold value</p>\n","type":"Number"}],"example":["\n<div class=\"norender\">\n<code>\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}\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</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device\nis being shaked","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":515,"description":"<p>The <a href=\"#/p5/deviceMoved\">deviceMoved()</a> 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 <a href=\"https://p5js.org/reference/#/p5/setMoveThreshold\">setMoveThreshold()</a>.</p>\n","itemtype":"method","name":"deviceMoved","example":["\n<div class=\"norender\">\n<code>\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}\nfunction deviceMoved() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device moves","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":546,"description":"<p>The <a href=\"#/p5/deviceTurned\">deviceTurned()</a> function is called when the device rotates by\nmore than 90 degrees continuously.</p>\n<p>The axis that triggers the <a href=\"#/p5/deviceTurned\">deviceTurned()</a> method is stored in the turnAxis\nvariable. The <a href=\"#/p5/deviceTurned\">deviceTurned()</a> method can be locked to trigger on any axis:\nX, Y or Z by comparing the turnAxis variable to 'X', 'Y' or 'Z'.</p>\n","itemtype":"method","name":"deviceTurned","example":["\n<div class=\"norender\">\n<code>\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}\nfunction deviceTurned() {\n  if (value === 0) {\n    value = 255;\n  } else if (value === 255) {\n    value = 0;\n  }\n}\n</code>\n</div>\n<div>\n<code>\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}\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</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device turns\n50x50 black rect in center of canvas. turns white on mobile when x-axis turns","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":604,"description":"<p>The <a href=\"#/p5/deviceShaken\">deviceShaken()</a> 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 <a href=\"https://p5js.org/reference/#/p5/setShakeThreshold\">setShakeThreshold()</a>.</p>\n","itemtype":"method","name":"deviceShaken","example":["\n<div class=\"norender\">\n<code>\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}\nfunction deviceShaken() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device shakes","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/keyboard.js","line":10,"description":"<p>The boolean system variable <a href=\"#/p5/keyIsPressed\">keyIsPressed</a> is true if any key is pressed\nand false if no keys are pressed.</p>\n","itemtype":"property","name":"keyIsPressed","type":"Boolean","readonly":"","example":["\n<div>\n<code>\nfunction draw() {\n  if (keyIsPressed === true) {\n    fill(0);\n  } else {\n    fill(255);\n  }\n  rect(25, 25, 50, 50);\n}\n</code>\n</div>"],"alt":"50x50 white rect that turns black on keypress.","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":36,"description":"<p>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 <a href=\"#/p5/keyTyped\">keyTyped()</a>. For non-ASCII keys, use the <a href=\"#/p5/keyCode\">keyCode</a>\nvariable.</p>\n","itemtype":"property","name":"key","type":"String","readonly":"","example":["\n<div><code>\n// Click any key to display it!\n// (Not Guaranteed to be Case Sensitive)\nfunction setup() {\n  fill(245, 123, 158);\n  textSize(50);\n}\n\nfunction draw() {\n  background(200);\n  text(key, 33, 65); // Display last key pressed.\n}\n</code></div>"],"alt":"canvas displays any key value that is pressed in pink font.","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":64,"description":"<p>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: <a href=\"http://keycode.info/\">keycode.info</a>.</p>\n","itemtype":"property","name":"keyCode","type":"Integer","readonly":"","example":["\n<div><code>\nlet fillVal = 126;\nfunction draw() {\n  fill(fillVal);\n  rect(25, 25, 50, 50);\n}\n\nfunction keyPressed() {\n  if (keyCode === UP_ARROW) {\n    fillVal = 255;\n  } else if (keyCode === DOWN_ARROW) {\n    fillVal = 0;\n  }\n  return false; // prevent default\n}\n</code></div>\n<div><code>\nfunction draw() {}\nfunction keyPressed() {\n  background('yellow');\n  text(`${key} ${keyCode}`, 10, 40);\n  print(key, ' ', keyCode);\n  return false; // prevent default\n}\n</code></div>"],"alt":"Grey rect center. turns white when up arrow pressed and black when down\nDisplay key pressed and its keyCode in a yellow box","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":105,"description":"<p>The <a href=\"#/p5/keyPressed\">keyPressed()</a> function is called once every time a key is pressed. The\nkeyCode for the key that was pressed is stored in the <a href=\"#/p5/keyCode\">keyCode</a> variable.</p>\n<p>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.</p>\n<p>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 <a href=\"#/p5/keyTyped\">keyTyped()</a> to read the key variable, in which the\ncase of the variable will be distinguished.</p>\n<p>Because of how operating systems handle key repeats, holding down a key\nmay cause multiple calls to <a href=\"#/p5/keyTyped\">keyTyped()</a> (and <a href=\"#/p5/keyReleased\">keyReleased()</a> as well). The\nrate of repeat is set by the operating system and how each computer is\nconfigured.<br><br>\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.</p>\n","itemtype":"method","name":"keyPressed","example":["\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyPressed() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyPressed() {\n  if (keyCode === LEFT_ARROW) {\n    value = 255;\n  } else if (keyCode === RIGHT_ARROW) {\n    value = 0;\n  }\n}\n</code>\n</div>\n<div class=\"norender\">\n<code>\nfunction keyPressed() {\n  // Do something\n  return false; // prevent any default behaviour\n}\n</code>\n</div>"],"alt":"black rect center. turns white when key pressed and black when released\nblack rect center. turns white when left arrow pressed and black when right.","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":191,"description":"<p>The <a href=\"#/p5/keyReleased\">keyReleased()</a> function is called once every time a key is released.\nSee <a href=\"#/p5/key\">key</a> and <a href=\"#/p5/keyCode\">keyCode</a> for more information.<br><br>\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.</p>\n","itemtype":"method","name":"keyReleased","example":["\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyReleased() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n  return false; // prevent any default behavior\n}\n</code>\n</div>"],"alt":"black rect center. turns white when key pressed and black when pressed again","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":242,"description":"<p>The <a href=\"#/p5/keyTyped\">keyTyped()</a> 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 <a href=\"#/p5/keyPressed\">keyPressed()</a> function instead.\nThe most recent key typed will be stored in the key variable.</p>\n<p>Because of how operating systems handle key repeats, holding down a key\nwill cause multiple calls to <a href=\"#/p5/keyTyped\">keyTyped()</a> (and <a href=\"#/p5/keyReleased\">keyReleased()</a> as well). The\nrate of repeat is set by the operating system and how each computer is\nconfigured.<br><br>\nBrowsers may have different default behaviors attached to various key\nevents. To prevent any default behavior for this event, add \"return false\"\nto the end of the method.</p>\n","itemtype":"method","name":"keyTyped","example":["\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyTyped() {\n  if (key === 'a') {\n    value = 255;\n  } else if (key === 'b') {\n    value = 0;\n  }\n  // uncomment to prevent any default behavior\n  // return false;\n}\n</code>\n</div>"],"alt":"black rect center. turns white when 'a' key typed and black when 'b' pressed","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":295,"description":"<p>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.</p>\n","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":305,"description":"<p>The <a href=\"#/p5/keyIsDown\">keyIsDown()</a> 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 <a href=\"#/p5/keyCode\">keyCode</a> names listed\n<a href=\"http://p5js.org/reference/#p5/keyCode\">here</a>.</p>\n","itemtype":"method","name":"keyIsDown","params":[{"name":"code","description":"<p>The key to check for.</p>\n","type":"Number"}],"return":{"description":"whether key is down or not","type":"Boolean"},"example":["\n<div><code>\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}\n</code></div>\n\n<div><code>\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}\n</code></div>"],"alt":"50x50 red ellipse moves left, right, up and down with arrow presses.\n50x50 red ellipse gets bigger or smaller when + or - are pressed.","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/mouse.js","line":12,"description":"<p>The variable movedX contains the horizontal movement of the mouse since the last frame</p>\n","itemtype":"property","name":"movedX","type":"Number","readonly":"","example":["\n <div class=\"notest\">\n <code>\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 }\n </code>\n </div>"],"alt":"box moves left and right according to mouse movement then slowly back towards the center","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":43,"description":"<p>The variable movedY contains the vertical movement of the mouse since the last frame</p>\n","itemtype":"property","name":"movedY","type":"Number","readonly":"","example":["\n<div class=\"notest\">\n<code>\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(y, 50, 50, 50);\n}\n</code>\n</div>"],"alt":"box moves up and down according to mouse movement then slowly back towards the center","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":80,"description":"<p>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.</p>\n","itemtype":"property","name":"mouseX","type":"Number","readonly":"","example":["\n<div>\n<code>\n// Move the mouse across the canvas\nfunction draw() {\n  background(244, 248, 252);\n  line(mouseX, 0, mouseX, 100);\n}\n</code>\n</div>"],"alt":"horizontal black line moves left and right with mouse x-position","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":106,"description":"<p>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.</p>\n","itemtype":"property","name":"mouseY","type":"Number","readonly":"","example":["\n<div>\n<code>\n// Move the mouse across the canvas\nfunction draw() {\n  background(244, 248, 252);\n  line(0, mouseY, 100, mouseY);\n}\n</code>\n</div>"],"alt":"vertical black line moves up and down with mouse y-position","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":132,"description":"<p>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.</p>\n","itemtype":"property","name":"pmouseX","type":"Number","readonly":"","example":["\n<div>\n<code>\n// Move the mouse across the canvas to leave a trail\nfunction setup() {\n  //slow down the frameRate to make it more visible\n  frameRate(10);\n}\n\nfunction draw() {\n  background(244, 248, 252);\n  line(mouseX, mouseY, pmouseX, pmouseY);\n  print(pmouseX + ' -> ' + mouseX);\n}\n</code>\n</div>"],"alt":"line trail is created from cursor movements. faster movement make longer line.","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":164,"description":"<p>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.</p>\n","itemtype":"property","name":"pmouseY","type":"Number","readonly":"","example":["\n<div>\n<code>\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n  //draw a square only if the mouse is not moving\n  if (mouseY === pmouseY && mouseX === pmouseX) {\n    rect(20, 20, 60, 60);\n  }\n\n  print(pmouseY + ' -> ' + mouseY);\n}\n</code>\n</div>"],"alt":"60x60 black rect center, fuchsia background. rect flickers on mouse movement","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":195,"description":"<p>The system variable winMouseX always contains the current horizontal\nposition of the mouse, relative to (0, 0) of the window.</p>\n","itemtype":"property","name":"winMouseX","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"60x60 black rect y moves with mouse y and fuchsia canvas moves with mouse x","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":233,"description":"<p>The system variable winMouseY always contains the current vertical\nposition of the mouse, relative to (0, 0) of the window.</p>\n","itemtype":"property","name":"winMouseY","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"60x60 black rect x moves with mouse x and fuchsia canvas y moves with mouse y","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":271,"description":"<p>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.</p>\n","itemtype":"property","name":"pwinMouseX","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"fuchsia ellipse moves with mouse x and y. Grows and shrinks with mouse speed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":311,"description":"<p>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.</p>\n","itemtype":"property","name":"pwinMouseY","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"fuchsia ellipse moves with mouse x and y. Grows and shrinks with mouse speed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":351,"description":"<p>Processing automatically tracks if the mouse button is pressed and which\nbutton is pressed. The value of the system variable mouseButton is either\nLEFT, RIGHT, or CENTER depending on which button was pressed last.\nWarning: different browsers may track mouseButton differently.</p>\n","itemtype":"property","name":"mouseButton","type":"Constant","readonly":"","example":["\n<div>\n<code>\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n\n  if (mouseIsPressed) {\n    if (mouseButton === LEFT) {\n      ellipse(50, 50, 50, 50);\n    }\n    if (mouseButton === RIGHT) {\n      rect(25, 25, 50, 50);\n    }\n    if (mouseButton === CENTER) {\n      triangle(23, 75, 50, 20, 78, 75);\n    }\n  }\n\n  print(mouseButton);\n}\n</code>\n</div>"],"alt":"50x50 black ellipse appears on center of fuchsia canvas on mouse click/press.","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":389,"description":"<p>The boolean system variable mouseIsPressed is true if the mouse is pressed\nand false if not.</p>\n","itemtype":"property","name":"mouseIsPressed","type":"Boolean","readonly":"","example":["\n<div>\n<code>\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n\n  if (mouseIsPressed) {\n    ellipse(50, 50, 50, 50);\n  } else {\n    rect(25, 25, 50, 50);\n  }\n\n  print(mouseIsPressed);\n}\n</code>\n</div>"],"alt":"black 50x50 rect becomes ellipse with mouse click/press. fuchsia background.","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":481,"description":"<p>The <a href=\"#/p5/mouseMoved\">mouseMoved()</a> function is called every time the mouse moves and a mouse\nbutton is not pressed.<br><br>\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.</p>\n","itemtype":"method","name":"mouseMoved","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction mouseMoved() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mouseMoved() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseMoved(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect becomes lighter with mouse movements until white then resets\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":535,"description":"<p>The <a href=\"#/p5/mouseDragged\">mouseDragged()</a> function is called once every time the mouse moves and\na mouse button is pressed. If no <a href=\"#/p5/mouseDragged\">mouseDragged()</a> function is defined, the\n<a href=\"#/p5/touchMoved\">touchMoved()</a> function will be called instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"mouseDragged","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction mouseDragged() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mouseDragged() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseDragged(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns lighter with mouse click and drag until white, resets\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":615,"description":"<p>The <a href=\"#/p5/mousePressed\">mousePressed()</a> 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\n<a href=\"#/p5/mousePressed\">mousePressed()</a> function is defined, the <a href=\"#/p5/touchStarted\">touchStarted()</a> function will be\ncalled instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"mousePressed","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\n// Click 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}\nfunction mousePressed() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mousePressed() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mousePressed(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns white with mouse click/press.\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":696,"description":"<p>The <a href=\"#/p5/mouseReleased\">mouseReleased()</a> function is called every time a mouse button is\nreleased. If no <a href=\"#/p5/mouseReleased\">mouseReleased()</a> function is defined, the <a href=\"#/p5/touchEnded\">touchEnded()</a>\nfunction will be called instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"mouseReleased","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction mouseReleased() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mouseReleased() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseReleased(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns white with mouse click/press.\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":772,"description":"<p>The <a href=\"#/p5/mouseClicked\">mouseClicked()</a> function is called once after a mouse button has been\npressed and then released.<br><br>\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 <a href=\"#/p5/mousePressed\">mousePressed()</a> or <a href=\"#/p5/mouseReleased\">mouseReleased()</a>.<br><br>\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.</p>\n","itemtype":"method","name":"mouseClicked","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\n\nfunction mouseClicked() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mouseClicked() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseClicked(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns white with mouse click/press.\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":841,"description":"<p>The <a href=\"#/p5/doubleClicked\">doubleClicked()</a> 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:\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/Events/dblclick\">https://developer.mozilla.org/en-US/docs/Web/Events/dblclick</a></p>\n","itemtype":"method","name":"doubleClicked","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\n\nfunction doubleClicked() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction doubleClicked() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction doubleClicked(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns white with mouse doubleClick/press.\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":926,"description":"<p>The function <a href=\"#/p5/mouseWheel\">mouseWheel()</a> is executed every time a vertical mouse wheel\nevent is detected either triggered by an actual mouse wheel or by a\ntouchpad.<br><br>\nThe event.delta property returns the amount the mouse wheel\nhave scrolled. The values can be positive or negative depending on the\nscroll direction (on OS X with \"natural\" scrolling enabled, the signs\nare inverted).<br><br>\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.<br><br>\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.</p>\n","itemtype":"method","name":"mouseWheel","params":[{"name":"event","description":"<p>optional WheelEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\nlet pos = 25;\n\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n  rect(25, pos, 50, 50);\n}\n\nfunction mouseWheel(event) {\n  print(event.delta);\n  //move the square according to the vertical scroll amount\n  pos += event.delta;\n  //uncomment to block page scrolling\n  //return false;\n}\n</code>\n</div>"],"alt":"black 50x50 rect moves up and down with vertical scroll. fuchsia background","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":979,"description":"<p>The function <a href=\"#/p5/requestPointerLock\">requestPointerLock()</a>\nlocks the pointer to its current position and makes it invisible.\nUse <a href=\"#/p5/movedX\">movedX</a> and <a href=\"#/p5/movedY\">movedY</a> 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.</p>\n","itemtype":"method","name":"requestPointerLock","example":["\n<div class=\"notest\">\n<code>\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}\n</code>\n</div>"],"alt":"3D scene moves according to mouse mouse movement in a first person perspective","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":1025,"description":"<p>The function <a href=\"#/p5/exitPointerLock\">exitPointerLock()</a>\nexits a previously triggered <a href=\"#/p5/requestPointerLock\">pointer Lock</a>\nfor example to make ui elements usable etc</p>\n","itemtype":"method","name":"exitPointerLock","example":["\n<div class=\"notest\">\n<code>\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}\nfunction mouseClicked() {\n  if (!locked) {\n    locked = true;\n    requestPointerLock();\n  } else {\n    exitPointerLock();\n    locked = false;\n  }\n}\n</code>\n</div>"],"alt":"cursor gets locked / unlocked on mouse-click","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/touch.js","line":10,"description":"<p>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.</p>\n<p>The touches[] array is not supported on Safari and IE on touch-based\ndesktops (laptops).</p>\n","itemtype":"property","name":"touches","type":"Object[]","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"Number of touches currently registered are displayed on the canvas","class":"p5","module":"Events","submodule":"Touch"},{"file":"src/events/touch.js","line":71,"description":"<p>The touchStarted() function is called once after every time a touch is\nregistered. If no <a href=\"#/p5/touchStarted\">touchStarted()</a> function is defined, the <a href=\"#/p5/mousePressed\">mousePressed()</a>\nfunction will be called instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"touchStarted","params":[{"name":"event","description":"<p>optional TouchEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction touchStarted() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction touchStarted() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a TouchEvent object\n// as a callback argument\nfunction touchStarted(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"50x50 black rect turns white with touch event.\nno image displayed","class":"p5","module":"Events","submodule":"Touch"},{"file":"src/events/touch.js","line":151,"description":"<p>The <a href=\"#/p5/touchMoved\">touchMoved()</a> function is called every time a touch move is registered.\nIf no <a href=\"#/p5/touchMoved\">touchMoved()</a> function is defined, the <a href=\"#/p5/mouseDragged\">mouseDragged()</a> function will\nbe called instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"touchMoved","params":[{"name":"event","description":"<p>optional TouchEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction touchMoved() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction touchMoved() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a TouchEvent object\n// as a callback argument\nfunction touchMoved(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"50x50 black rect turns lighter with touch until white. resets\nno image displayed","class":"p5","module":"Events","submodule":"Touch"},{"file":"src/events/touch.js","line":223,"description":"<p>The <a href=\"#/p5/touchEnded\">touchEnded()</a> function is called every time a touch ends. If no\n<a href=\"#/p5/touchEnded\">touchEnded()</a> function is defined, the <a href=\"#/p5/mouseReleased\">mouseReleased()</a> function will be\ncalled instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"touchEnded","params":[{"name":"event","description":"<p>optional TouchEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction touchEnded() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction touchEnded() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a TouchEvent object\n// as a callback argument\nfunction touchEnded(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"50x50 black rect turns white with touch.\nno image displayed","class":"p5","module":"Events","submodule":"Touch"},{"file":"src/image/filters.js","line":3,"description":"<p>This module defines the filters for use with image buffers.</p>\n<p>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.</p>\n<p>Generally speaking users of this module will use the Filters.apply method\non a canvas to create an effect.</p>\n<p>A number of functions are borrowed/adapted from\n<a href=\"http://www.html5rocks.com/en/tutorials/canvas/imagefilters/\">http://www.html5rocks.com/en/tutorials/canvas/imagefilters/</a>\nor the java processing implementation.</p>\n","class":"p5","module":"Events"},{"file":"src/image/image.js","line":8,"description":"<p>This module defines the p5 methods for the <a href=\"#/p5.Image\">p5.Image</a> class\nfor drawing images to the main display canvas.</p>\n","class":"p5","module":"Image","submodule":"Image"},{"file":"src/image/image.js","line":15,"description":"<p>Creates a new <a href=\"#/p5.Image\">p5.Image</a> (the datatype for storing images). This provides a\nfresh buffer of pixels to play with. Set the size of the buffer with the\nwidth and height parameters.</p>\n<p>.<a href=\"#/p5.Image/pixels\">pixels</a> gives access to an array containing the values for all the pixels\nin the display window.\nThese values are numbers. This array is the size (including an appropriate\nfactor for the <a href=\"#/p5/pixelDensity\">pixelDensity</a>) of the display window x4,\nrepresenting the R, G, B, A values in order for each pixel, moving from\nleft to right across each row, then down each column. See .<a href=\"#/p5.Image/pixels\">pixels</a> for\nmore info. It may also be simpler to use <a href=\"#/p5.Image/set\">set()</a> or <a href=\"#/p5.Image/get\">get()</a>.</p>\n<p>Before accessing the pixels of an image, the data must loaded with the\n<a href=\"#/p5.Image/loadPixels\">loadPixels()</a> function. After the array data has been modified, the\n<a href=\"#/p5.Image/updatePixels\">updatePixels()</a> function must be run to update the changes.</p>\n","itemtype":"method","name":"createImage","params":[{"name":"width","description":"<p>width in pixels</p>\n","type":"Integer"},{"name":"height","description":"<p>height in pixels</p>\n","type":"Integer"}],"return":{"description":"the <a href=\"#/p5.Image\">p5.Image</a> object","type":"p5.Image"},"example":["\n<div>\n<code>\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < img.width; i++) {\n  for (let j = 0; j < img.height; j++) {\n    img.set(i, j, color(0, 90, 102));\n  }\n}\nimg.updatePixels();\nimage(img, 17, 17);\n</code>\n</div>\n\n<div>\n<code>\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < img.width; i++) {\n  for (let j = 0; j < img.height; j++) {\n    img.set(i, j, color(0, 90, 102, (i % img.width) * 2));\n  }\n}\nimg.updatePixels();\nimage(img, 17, 17);\nimage(img, 34, 34);\n</code>\n</div>\n\n<div>\n<code>\nlet pink = color(255, 102, 204);\nlet img = createImage(66, 66);\nimg.loadPixels();\nlet d = pixelDensity();\nlet halfImage = 4 * (img.width * d) * (img.height / 2 * d);\nfor (let i = 0; i < halfImage; i += 4) {\n  img.pixels[i] = red(pink);\n  img.pixels[i + 1] = green(pink);\n  img.pixels[i + 2] = blue(pink);\n  img.pixels[i + 3] = alpha(pink);\n}\nimg.updatePixels();\nimage(img, 17, 17);\n</code>\n</div>"],"alt":"66x66 dark turquoise rect in center of canvas.\n2 gradated dark turquoise rects fade left. 1 center 1 bottom right of canvas\nno image displayed","class":"p5","module":"Image","submodule":"Image"},{"file":"src/image/image.js","line":94,"description":"<p>Save the current canvas as an image. The browser will either save the\nfile immediately, or prompt the user with a dialogue window.</p>\n","itemtype":"method","name":"saveCanvas","example":["\n <div class='norender notest'><code>\n function setup() {\n let c = createCanvas(100, 100);\n background(255, 0, 0);\n saveCanvas(c, 'myCanvas', 'jpg');\n }\n </code></div>\n <div class='norender notest'><code>\n // note that this example has the same result as above\n // if no canvas is specified, defaults to main canvas\n function setup() {\n let c = createCanvas(100, 100);\n background(255, 0, 0);\n saveCanvas('myCanvas', 'jpg');\n\n // all of the following are valid\n saveCanvas(c, 'myCanvas', 'jpg');\n saveCanvas(c, 'myCanvas.jpg');\n saveCanvas(c, 'myCanvas');\n saveCanvas(c);\n saveCanvas('myCanvas', 'png');\n saveCanvas('myCanvas');\n saveCanvas();\n }\n </code></div>"],"alt":"no image displayed\n no image displayed\n no image displayed","class":"p5","module":"Image","submodule":"Image","overloads":[{"line":94,"params":[{"name":"selectedCanvas","description":"<p>a variable\n                                representing a specific html5 canvas (optional)</p>\n","type":"p5.Element|HTMLCanvasElement"},{"name":"filename","description":"","type":"String","optional":true},{"name":"extension","description":"<p>'jpg' or 'png'</p>\n","type":"String","optional":true}]},{"line":136,"params":[{"name":"filename","description":"","type":"String","optional":true},{"name":"extension","description":"","type":"String","optional":true}]}]},{"file":"src/image/image.js","line":413,"description":"<p>Capture a sequence of frames that can be used to create a movie.\nAccepts a callback. For example, you may wish to send the frames\nto a server where they can be stored or converted into a movie.\nIf no callback is provided, the browser will pop up save dialogues in an\nattempt to download all of the images that have just been created. With the\ncallback provided the image data isn't saved by default but instead passed\nas an argument to the callback function as an array of objects, with the\nsize of array equal to the total number of frames.</p>\n<p>Note that <a href=\"#/p5.Image/saveFrames\">saveFrames()</a> will only save the first 15 frames of an animation.\nTo export longer animations, you might look into a library like\n<a href=\"https://github.com/spite/ccapture.js/\">ccapture.js</a>.</p>\n","itemtype":"method","name":"saveFrames","params":[{"name":"filename","description":"","type":"String"},{"name":"extension","description":"<p>'jpg' or 'png'</p>\n","type":"String"},{"name":"duration","description":"<p>Duration in seconds to save the frames for.</p>\n","type":"Number"},{"name":"framerate","description":"<p>Framerate to save the frames in.</p>\n","type":"Number"},{"name":"callback","description":"<p>A callback function that will be executed\n                                to handle the image data. This function\n                                should accept an array as argument. The\n                                array will contain the specified number of\n                                frames of objects. Each object has three\n                                properties: imageData - an\n                                image/octet-stream, filename and extension.</p>\n","type":"Function(Array)","optional":true}],"example":["\n<div><code>\n function draw() {\n background(mouseX);\n }\n\n function mousePressed() {\n saveFrames('out', 'png', 1, 25, data => {\n   print(data);\n });\n }\n</code></div>"],"alt":"canvas background goes from light to dark with mouse x.","class":"p5","module":"Image","submodule":"Image"},{"file":"src/image/loading_displaying.js","line":18,"description":"<p>Loads an image from a path and creates a <a href=\"#/p5.Image\">p5.Image</a> from it.</p>\n<p>The image may not be immediately available for rendering\nIf you want to ensure that the image is ready before doing\nanything with it, place the <a href=\"#/p5/loadImage\">loadImage()</a> call in <a href=\"#/p5/preload\">preload()</a>.\nYou may also supply a callback function to handle the image when it's ready.</p>\n<p>The path to the image should be relative to the HTML file\nthat links in your sketch. Loading an image from a URL or other\nremote location may be blocked due to your browser's built-in\nsecurity.</p>\n<p>You can also pass in a string of a base64 encoded image as an alternative to the file path.\nRemember to add \"data:image/png;base64,\" in front of the string.</p>\n","itemtype":"method","name":"loadImage","params":[{"name":"path","description":"<p>Path of the image to be loaded</p>\n","type":"String"},{"name":"successCallback","description":"<p>Function to be called once\n                               the image is loaded. Will be passed the\n                               <a href=\"#/p5.Image\">p5.Image</a>.</p>\n","type":"function(p5.Image)","optional":true},{"name":"failureCallback","description":"<p>called with event error if\n                               the image fails to load.</p>\n","type":"Function(Event)","optional":true}],"return":{"description":"the <a href=\"#/p5.Image\">p5.Image</a> object","type":"p5.Image"},"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n}\n</code>\n</div>\n<div>\n<code>\nfunction setup() {\n  // here we use a callback to display the image after loading\n  loadImage('assets/laDefense.jpg', img => {\n    image(img, 0, 0);\n  });\n}\n</code>\n</div>"],"alt":"image of the underside of a white umbrella and grided ceililng above\nimage of the underside of a white umbrella and grided ceililng above","class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/loading_displaying.js","line":153,"description":"<p>Helper function for loading GIF-based images</p>\n","class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/loading_displaying.js","line":250,"description":"<p>Draw an image to the p5.js canvas.</p>\n<p>This function can be used with different numbers of parameters. The\nsimplest use requires only three parameters: img, x, and y—where (x, y) is\nthe position of the image. Two more parameters can optionally be added to\nspecify the width and height of the image.</p>\n<p>This function can also be used with all eight Number parameters. To\ndifferentiate between all these parameters, p5.js uses the language of\n\"destination rectangle\" (which corresponds to \"dx\", \"dy\", etc.) and \"source\nimage\" (which corresponds to \"sx\", \"sy\", etc.) below. Specifying the\n\"source image\" dimensions can be useful when you want to display a\nsubsection of the source image instead of the whole thing. Here's a diagram\nto explain further:\n<img src=\"assets/drawImage.png\"></img></p>\n","itemtype":"method","name":"image","example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  // Top-left corner of the img is at (0, 0)\n  // Width and height are the img's original width and height\n  image(img, 0, 0);\n}\n</code>\n</div>\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  background(50);\n  // Top-left corner of the img is at (10, 10)\n  // Width and height are 50 x 50\n  image(img, 10, 10, 50, 50);\n}\n</code>\n</div>\n<div>\n<code>\nfunction setup() {\n  // Here, we use a callback to display the image after loading\n  loadImage('assets/laDefense.jpg', img => {\n    image(img, 0, 0);\n  });\n}\n</code>\n</div>\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/gradient.png');\n}\nfunction setup() {\n  // 1. Background image\n  // Top-left corner of the img is at (0, 0)\n  // Width and height are the img's original width and height, 100 x 100\n  image(img, 0, 0);\n  // 2. Top right image\n  // Top-left corner of destination rectangle is at (50, 0)\n  // Destination rectangle width and height are 40 x 20\n  // The next parameters are relative to the source image:\n  // - Starting at position (50, 50) on the source image, capture a 50 x 50\n  // subsection\n  // - Draw this subsection to fill the dimensions of the destination rectangle\n  image(img, 50, 0, 40, 20, 50, 50, 50, 50);\n}\n</code>\n</div>"],"alt":"image of the underside of a white umbrella and gridded ceiling above\nimage of the underside of a white umbrella and gridded ceiling above","class":"p5","module":"Image","submodule":"Loading & Displaying","overloads":[{"line":250,"params":[{"name":"img","description":"<p>the image to display</p>\n","type":"p5.Image|p5.Element"},{"name":"x","description":"<p>the x-coordinate of the top-left corner of the image</p>\n","type":"Number"},{"name":"y","description":"<p>the y-coordinate of the top-left corner of the image</p>\n","type":"Number"},{"name":"width","description":"<p>the width to draw the image</p>\n","type":"Number","optional":true},{"name":"height","description":"<p>the height to draw the image</p>\n","type":"Number","optional":true}]},{"line":337,"params":[{"name":"img","description":"","type":"p5.Image|p5.Element"},{"name":"dx","description":"<p>the x-coordinate of the destination\n                          rectangle in which to draw the source image</p>\n","type":"Number"},{"name":"dy","description":"<p>the y-coordinate of the destination\n                          rectangle in which to draw the source image</p>\n","type":"Number"},{"name":"dWidth","description":"<p>the width of the destination rectangle</p>\n","type":"Number"},{"name":"dHeight","description":"<p>the height of the destination rectangle</p>\n","type":"Number"},{"name":"sx","description":"<p>the x-coordinate of the subsection of the source\nimage to draw into the destination rectangle</p>\n","type":"Number"},{"name":"sy","description":"<p>the y-coordinate of the subsection of the source\nimage to draw into the destination rectangle</p>\n","type":"Number"},{"name":"sWidth","description":"<p>the width of the subsection of the\n                          source image to draw into the destination\n                          rectangle</p>\n","type":"Number","optional":true},{"name":"sHeight","description":"<p>the height of the subsection of the\n                           source image to draw into the destination rectangle</p>\n","type":"Number","optional":true}]}]},{"file":"src/image/loading_displaying.js","line":420,"description":"<p>Sets the fill value for displaying images. Images can be tinted to\nspecified colors or made transparent by including an alpha value.</p>\n<p>To apply transparency to an image without affecting its color, use\nwhite as the tint color and specify an alpha value. For instance,\ntint(255, 128) will make an image 50% transparent (assuming the default\nalpha range of 0-255, which can be changed with <a href=\"#/p5/colorMode\">colorMode()</a>).</p>\n<p>The value for the gray parameter must be less than or equal to the current\nmaximum value as specified by <a href=\"#/p5/colorMode\">colorMode()</a>. The default maximum value is\n255.</p>\n","itemtype":"method","name":"tint","example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  tint(0, 153, 204); // Tint blue\n  image(img, 50, 0);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  tint(0, 153, 204, 126); // Tint blue and set transparency\n  image(img, 50, 0);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  tint(255, 126); // Apply transparency without changing color\n  image(img, 50, 0);\n}\n</code>\n</div>"],"alt":"2 side by side images of umbrella and ceiling, one image with blue tint\nImages of umbrella and ceiling, one half of image with blue tint\n2 side by side images of umbrella and ceiling, one image translucent","class":"p5","module":"Image","submodule":"Loading & Displaying","overloads":[{"line":420,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}]},{"line":491,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}]},{"line":496,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}]},{"line":502,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}]},{"line":508,"params":[{"name":"color","description":"<p>the tint color</p>\n","type":"p5.Color"}]}]},{"file":"src/image/loading_displaying.js","line":518,"description":"<p>Removes the current fill value for displaying images and reverts to\ndisplaying images with their original hues.</p>\n","itemtype":"method","name":"noTint","example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  tint(0, 153, 204); // Tint blue\n  image(img, 0, 0);\n  noTint(); // Disable tint\n  image(img, 50, 0);\n}\n</code>\n</div>"],"alt":"2 side by side images of bricks, left image with blue tint","class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/loading_displaying.js","line":582,"description":"<p>Set image mode. Modifies the location from which images are drawn by\nchanging the way in which parameters given to <a href=\"#/p5/image\">image()</a> are interpreted.\nThe default mode is imageMode(CORNER), which interprets the second and\nthird parameters of <a href=\"#/p5/image\">image()</a> as the upper-left corner of the image. If\ntwo additional parameters are specified, they are used to set the image's\nwidth and height.</p>\n<p>imageMode(CORNERS) interprets the second and third parameters of <a href=\"#/p5/image\">image()</a>\nas the location of one corner, and the fourth and fifth parameters as the\nopposite corner.</p>\n<p>imageMode(CENTER) interprets the second and third parameters of <a href=\"#/p5/image\">image()</a>\nas the image's center point. If two additional parameters are specified,\nthey are used to set the image's width and height.</p>\n","itemtype":"method","name":"imageMode","params":[{"name":"mode","description":"<p>either CORNER, CORNERS, or CENTER</p>\n","type":"Constant"}],"example":["\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  imageMode(CORNER);\n  image(img, 10, 10, 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  imageMode(CORNERS);\n  image(img, 10, 10, 90, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  imageMode(CENTER);\n  image(img, 50, 50, 80, 80);\n}\n</code>\n</div>"],"alt":"small square image of bricks\nhorizontal rectangle image of bricks\nlarge square image of bricks","class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/p5.Image.js","line":9,"description":"<p>This module defines the <a href=\"#/p5.Image\">p5.Image</a> class and P5 methods for\ndrawing images to the main display canvas.</p>\n","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":88,"description":"<p>Image width.</p>\n","itemtype":"property","name":"width","type":"Number","readonly":"","example":["\n<div><code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100);\n  image(img, 0, 0);\n  for (let i = 0; i < img.width; i++) {\n    let c = img.get(i, img.height / 2);\n    stroke(c);\n    line(i, height / 2, i, height);\n  }\n}\n</code></div>"],"alt":"rocky mountains in top and horizontal lines in corresponding colors in bottom.","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":115,"description":"<p>Image height.</p>\n","itemtype":"property","name":"height","type":"Number","readonly":"","example":["\n<div><code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100);\n  image(img, 0, 0);\n  for (let i = 0; i < img.height; i++) {\n    let c = img.get(img.width / 2, i);\n    stroke(c);\n    line(0, i, width / 2, i);\n  }\n}\n</code></div>"],"alt":"rocky mountains on right and vertical lines in corresponding colors on left.","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":152,"description":"<p>Array containing the values for all the pixels in the display window.\nThese values are numbers. This array is the size (include an appropriate\nfactor for pixelDensity) of the display window x4,\nrepresenting the R, G, B, A values in order for each pixel, moving from\nleft to right across each row, then down each column. Retina and other\nhigh density displays may have more pixels (by a factor of\npixelDensity^2).\nFor example, if the image is 100x100 pixels, there will be 40,000. With\npixelDensity = 2, there will be 160,000. The first four values\n(indices 0-3) in the array will be the R, G, B, A values of the pixel at\n(0, 0). The second four values (indices 4-7) will contain the R, G, B, A\nvalues of the pixel at (1, 0). More generally, to set values for a pixel\nat (x, y):</p>\n<pre><code class=\"language-javascript\">let d = pixelDensity();\nfor (let i = 0; i < d; i++) {\n  for (let j = 0; j < d; j++) {\n    // loop over\n    index = 4 * ((y * d + j) * width * d + (x * d + i));\n    pixels[index] = r;\n    pixels[index+1] = g;\n    pixels[index+2] = b;\n    pixels[index+3] = a;\n  }\n}</code></pre>\n<p>Before accessing this array, the data must loaded with the <a href=\"#/p5.Image/loadPixels\">loadPixels()</a>\nfunction. After the array data has been modified, the <a href=\"#/p5.Image/updatePixels\">updatePixels()</a>\nfunction must be run to update the changes.</p>\n","itemtype":"property","name":"pixels","type":"Number[]","example":["\n<div>\n<code>\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < img.width; i++) {\n  for (let j = 0; j < img.height; j++) {\n    img.set(i, j, color(0, 90, 102));\n  }\n}\nimg.updatePixels();\nimage(img, 17, 17);\n</code>\n</div>\n<div>\n<code>\nlet pink = color(255, 102, 204);\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < 4 * (width * height / 2); i += 4) {\n  img.pixels[i] = red(pink);\n  img.pixels[i + 1] = green(pink);\n  img.pixels[i + 2] = blue(pink);\n  img.pixels[i + 3] = alpha(pink);\n}\nimg.updatePixels();\nimage(img, 17, 17);\n</code>\n</div>"],"alt":"66x66 turquoise rect in center of canvas\n66x66 pink rect in center of canvas","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":222,"description":"<p>Helper function for animating GIF-based images with time</p>\n","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":248,"description":"<p>Helper fxn for sharing pixel methods</p>\n","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":256,"description":"<p>Loads the pixels data for this image into the [pixels] attribute.</p>\n","itemtype":"method","name":"loadPixels","example":["\n<div><code>\nlet myImage;\nlet halfImage;\n\nfunction preload() {\n  myImage = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  myImage.loadPixels();\n  halfImage = 4 * myImage.width * myImage.height / 2;\n  for (let i = 0; i < halfImage; i++) {\n    myImage.pixels[i + halfImage] = myImage.pixels[i];\n  }\n  myImage.updatePixels();\n}\n\nfunction draw() {\n  image(myImage, 0, 0, width, height);\n}\n</code></div>"],"alt":"2 images of rocky mountains vertically stacked","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":291,"description":"<p>Updates the backing canvas for this image with the contents of\nthe [pixels] array.</p>\n<p>If this image is an animated GIF then the pixels will be updated\nin the frame that is currently displayed.</p>\n","itemtype":"method","name":"updatePixels","example":["\n<div><code>\nlet myImage;\nlet halfImage;\n\nfunction preload() {\n  myImage = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  myImage.loadPixels();\n  halfImage = 4 * myImage.width * myImage.height / 2;\n  for (let i = 0; i < halfImage; i++) {\n    myImage.pixels[i + halfImage] = myImage.pixels[i];\n  }\n  myImage.updatePixels();\n}\n\nfunction draw() {\n  image(myImage, 0, 0, width, height);\n}\n</code></div>"],"alt":"2 images of rocky mountains vertically stacked","class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":291,"params":[{"name":"x","description":"<p>x-offset of the target update area for the\n                             underlying canvas</p>\n","type":"Integer"},{"name":"y","description":"<p>y-offset of the target update area for the\n                             underlying canvas</p>\n","type":"Integer"},{"name":"w","description":"<p>height of the target update area for the\n                             underlying canvas</p>\n","type":"Integer"},{"name":"h","description":"<p>height of the target update area for the\n                             underlying canvas</p>\n","type":"Integer"}]},{"line":333,"params":[]}]},{"file":"src/image/p5.Image.js","line":341,"description":"<p>Get a region of pixels from an image.</p>\n<p>If no params are passed, the whole image is returned.\nIf x and y are the only params passed a single pixel is extracted.\nIf all params are passed a rectangle region is extracted and a <a href=\"#/p5.Image\">p5.Image</a>\nis returned.</p>\n","itemtype":"method","name":"get","return":{"description":"the rectangle <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"},"example":["\n<div><code>\nlet myImage;\nlet c;\n\nfunction preload() {\n  myImage = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  background(myImage);\n  noStroke();\n  c = myImage.get(60, 90);\n  fill(c);\n  rect(25, 25, 50, 50);\n}\n\n//get() returns color here\n</code></div>"],"alt":"image of rocky mountains with 50x50 green rect in front","class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":341,"params":[{"name":"x","description":"<p>x-coordinate of the pixel</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the pixel</p>\n","type":"Number"},{"name":"w","description":"<p>width</p>\n","type":"Number"},{"name":"h","description":"<p>height</p>\n","type":"Number"}],"return":{"description":"the rectangle <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"}},{"line":378,"params":[],"return":{"description":"the whole <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"}},{"line":382,"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/image/p5.Image.js","line":395,"description":"<p>Set the color of a single pixel or write an image into\nthis <a href=\"#/p5.Image\">p5.Image</a>.</p>\n<p>Note that for a large number of pixels this will\nbe slower than directly manipulating the pixels array\nand then calling <a href=\"#/p5.Image/updatePixels\">updatePixels()</a>.</p>\n","itemtype":"method","name":"set","params":[{"name":"x","description":"<p>x-coordinate of the pixel</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the pixel</p>\n","type":"Number"},{"name":"a","description":"<p>grayscale value | pixel array |\n                               a <a href=\"#/p5.Color\">p5.Color</a> | image to copy</p>\n","type":"Number|Number[]|Object"}],"example":["\n<div>\n<code>\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < img.width; i++) {\n  for (let j = 0; j < img.height; j++) {\n    img.set(i, j, color(0, 90, 102, (i % img.width) * 2));\n  }\n}\nimg.updatePixels();\nimage(img, 17, 17);\nimage(img, 34, 34);\n</code>\n</div>"],"alt":"2 gradated dark turquoise rects fade left. 1 center 1 bottom right of canvas","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":432,"description":"<p>Resize the image to a new width and height. To make the image scale\nproportionally, use 0 as the value for the wide or high parameter.\nFor instance, to make the width of an image 150 pixels, and change\nthe height using the same proportion, use resize(150, 0).</p>\n","itemtype":"method","name":"resize","params":[{"name":"width","description":"<p>the resized image width</p>\n","type":"Number"},{"name":"height","description":"<p>the resized image height</p>\n","type":"Number"}],"example":["\n<div><code>\nlet img;\n\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction draw() {\n  image(img, 0, 0);\n}\n\nfunction mousePressed() {\n  img.resize(50, 100);\n}\n</code></div>"],"alt":"image of rocky mountains. zoomed in","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":543,"description":"<p>Copies a region of pixels from one image to another. If no\nsrcImage is specified this is used as the source. If the source\nand destination regions aren't the same size, it will\nautomatically resize source pixels to fit the specified\ntarget region.</p>\n","itemtype":"method","name":"copy","example":["\n<div><code>\nlet photo;\nlet bricks;\nlet x;\nlet y;\n\nfunction preload() {\n  photo = loadImage('assets/rockies.jpg');\n  bricks = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n  x = bricks.width / 2;\n  y = bricks.height / 2;\n  photo.copy(bricks, 0, 0, x, y, 0, 0, x, y);\n  image(photo, 0, 0);\n}\n</code></div>"],"alt":"image of rocky mountains and smaller image on top of bricks at top left","class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":543,"params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image|p5.Element"},{"name":"sx","description":"<p>X coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sy","description":"<p>Y coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sw","description":"<p>source image width</p>\n","type":"Integer"},{"name":"sh","description":"<p>source image height</p>\n","type":"Integer"},{"name":"dx","description":"<p>X coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dy","description":"<p>Y coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dw","description":"<p>destination image width</p>\n","type":"Integer"},{"name":"dh","description":"<p>destination image height</p>\n","type":"Integer"}]},{"line":583,"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":598,"description":"<p>Masks part of an image from displaying by loading another\nimage and using its alpha channel as an alpha channel for\nthis image.</p>\n","itemtype":"method","name":"mask","params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image"}],"example":["\n<div><code>\nlet photo, maskImage;\nfunction preload() {\n  photo = loadImage('assets/rockies.jpg');\n  maskImage = loadImage('assets/mask2.png');\n}\n\nfunction setup() {\n  createCanvas(100, 100);\n  photo.mask(maskImage);\n  image(photo, 0, 0);\n}\n</code></div>"],"alt":"image of rocky mountains with white at right\n\nhttp://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":659,"description":"<p>Applies an image filter to a <a href=\"#/p5.Image\">p5.Image</a></p>\n","itemtype":"method","name":"filter","params":[{"name":"filterType","description":"<p>either THRESHOLD, GRAY, OPAQUE, INVERT,\n                               POSTERIZE, BLUR, ERODE, DILATE or BLUR.\n                               See Filters.js for docs on\n                               each available filter</p>\n","type":"Constant"},{"name":"filterParam","description":"<p>an optional parameter unique\n                               to each filter, see above</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\nlet photo1;\nlet photo2;\n\nfunction preload() {\n  photo1 = loadImage('assets/rockies.jpg');\n  photo2 = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  photo2.filter(GRAY);\n  image(photo1, 0, 0);\n  image(photo2, width / 2, 0);\n}\n</code></div>"],"alt":"2 images of rocky mountains left one in color, right in black and white","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":694,"description":"<p>Copies a region of pixels from one image to another, using a specified\nblend mode to do the operation.</p>\n","itemtype":"method","name":"blend","example":["\n<div><code>\nlet mountains;\nlet bricks;\n\nfunction preload() {\n  mountains = loadImage('assets/rockies.jpg');\n  bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n  image(mountains, 0, 0);\n  image(bricks, 0, 0);\n}\n</code></div>\n<div><code>\nlet mountains;\nlet bricks;\n\nfunction preload() {\n  mountains = loadImage('assets/rockies.jpg');\n  bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n  image(mountains, 0, 0);\n  image(bricks, 0, 0);\n}\n</code></div>\n<div><code>\nlet mountains;\nlet bricks;\n\nfunction preload() {\n  mountains = loadImage('assets/rockies.jpg');\n  bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n  image(mountains, 0, 0);\n  image(bricks, 0, 0);\n}\n</code></div>"],"alt":"image of rocky mountains. Brick images on left and right. Right overexposed\nimage of rockies. Brickwall images on left and right. Right mortar transparent\nimage of rockies. Brickwall images on left and right. Right translucent","class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":694,"params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image"},{"name":"sx","description":"<p>X coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sy","description":"<p>Y coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sw","description":"<p>source image width</p>\n","type":"Integer"},{"name":"sh","description":"<p>source image height</p>\n","type":"Integer"},{"name":"dx","description":"<p>X coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dy","description":"<p>Y coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dw","description":"<p>destination image width</p>\n","type":"Integer"},{"name":"dh","description":"<p>destination image height</p>\n","type":"Integer"},{"name":"blendMode","description":"<p>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.</p>\n<p>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</p>\n<p><a href=\"http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/\">http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/</a></p>\n","type":"Constant"}]},{"line":771,"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":815,"description":"<p>Saves the image to a file and force the browser to download it.\nAccepts two strings for filename and file extension\nSupports png (default), jpg, and gif\n<br><br>\nNote that the file will only be downloaded as an animated GIF\nif the p5.Image was loaded from a GIF file.</p>\n","itemtype":"method","name":"save","params":[{"name":"filename","description":"<p>give your file a name</p>\n","type":"String"},{"name":"extension","description":"<p>'png' or 'jpg'</p>\n","type":"String"}],"example":["\n<div><code>\nlet photo;\n\nfunction preload() {\n  photo = loadImage('assets/rockies.jpg');\n}\n\nfunction draw() {\n  image(photo, 0, 0);\n}\n\nfunction keyTyped() {\n  if (key === 's') {\n    photo.save('photo', 'png');\n  }\n}\n</code></div>"],"alt":"image of rocky mountains.","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":856,"description":"<p>Starts an animated GIF over at the beginning state.</p>\n","itemtype":"method","name":"reset","example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/arnott-wallace-wink-loop-once.gif');\n}\n\nfunction draw() {\n  background(255);\n  // The GIF file that we loaded only loops once\n  // so it freezes on the last frame after playing through\n  image(gif, 0, 0);\n}\n\nfunction mousePressed() {\n  // Click to reset the GIF and begin playback from start\n  gif.reset();\n}\n</code></div>"],"alt":"Animated image of a cartoon face that winks once and then freezes\nWhen you click it animates again, winks once and freezes","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":896,"description":"<p>Gets the index for the frame that is currently visible in an animated GIF.</p>\n","itemtype":"method","name":"getCurrentFrame","return":{"description":"The index for the currently displaying frame in animated GIF","type":"Number"},"example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\nfunction draw() {\n  let frame = gif.getCurrentFrame();\n  image(gif, 0, 0);\n  text(frame, 10, 90);\n}\n</code></div>"],"alt":"Animated image of a cartoon eye looking around and then\nlooking outwards, in the lower-left hand corner a number counts\nup quickly to 124 and then starts back over at 0","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":927,"description":"<p>Sets the index of the frame that is currently visible in an animated GIF</p>\n","itemtype":"method","name":"setFrame","params":[{"name":"index","description":"<p>the index for the frame that should be displayed</p>\n","type":"Number"}],"example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\n// Move your mouse up and down over canvas to see the GIF\n// frames animate\nfunction draw() {\n  gif.pause();\n  image(gif, 0, 0);\n  // Get the highest frame number which is the number of frames - 1\n  let maxFrame = gif.numFrames() - 1;\n  // Set the current frame that is mapped to be relative to mouse position\n  let frameNumber = floor(map(mouseY, 0, height, 0, maxFrame, true));\n  gif.setFrame(frameNumber);\n}\n</code></div>"],"alt":"A still image of a cartoon eye that looks around when you move your mouse\nup and down over the canvas","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":971,"description":"<p>Returns the number of frames in an animated GIF</p>\n","itemtype":"method","name":"numFrames","return":{"description":"","type":"Number"},"example":["     The number of frames in the animated GIF\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\n// Move your mouse up and down over canvas to see the GIF\n// frames animate\nfunction draw() {\n  gif.pause();\n  image(gif, 0, 0);\n  // Get the highest frame number which is the number of frames - 1\n  let maxFrame = gif.numFrames() - 1;\n  // Set the current frame that is mapped to be relative to mouse position\n  let frameNumber = floor(map(mouseY, 0, height, 0, maxFrame, true));\n  gif.setFrame(frameNumber);\n}\n</code></div>"],"alt":"A still image of a cartoon eye that looks around when you move your mouse\nup and down over the canvas","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1006,"description":"<p>Plays an animated GIF that was paused with\n<a href=\"#/p5.Image/pause\">pause()</a></p>\n","itemtype":"method","name":"play","example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');\n}\n\nfunction draw() {\n  background(255);\n  image(gif, 0, 0);\n}\n\nfunction mousePressed() {\n  gif.pause();\n}\n\nfunction mouseReleased() {\n  gif.play();\n}\n</code></div>"],"alt":"An animated GIF of a drawing of small child with\nhair blowing in the wind, when you click the image\nfreezes when you release it animates again","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1043,"description":"<p>Pauses an animated GIF.</p>\n","itemtype":"method","name":"pause","example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');\n}\n\nfunction draw() {\n  background(255);\n  image(gif, 0, 0);\n}\n\nfunction mousePressed() {\n  gif.pause();\n}\n\nfunction mouseReleased() {\n  gif.play();\n}\n</code></div>"],"alt":"An animated GIF of a drawing of small child with\nhair blowing in the wind, when you click the image\nfreezes when you release it animates again","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1079,"description":"<p>Changes the delay between frames in an animated GIF. There is an optional second parameter that\nindicates an index for a specific frame that should have its delay modified. If no index is given, all frames\nwill have the new delay.</p>\n","itemtype":"method","name":"delay","params":[{"name":"d","description":"<p>the amount in milliseconds to delay between switching frames</p>\n","type":"Number"},{"name":"index","description":"<p>the index of the frame that should have the new delay value {optional}</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\nlet gifFast, gifSlow;\n\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  gifFast.resize(width / 2, height / 2);\n  gifSlow.resize(width / 2, height / 2);\n\n  //Change the delay here\n  gifFast.delay(10);\n  gifSlow.delay(100);\n}\n\nfunction draw() {\n  background(255);\n  image(gifFast, 0, 0);\n  image(gifSlow, width / 2, 0);\n}\n</code></div>"],"alt":"Two animated gifs of cartoon eyes looking around\nThe gif on the left animates quickly, on the right\nthe animation is much slower","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/pixels.js","line":12,"description":"<p><a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference\n/Global_Objects/Uint8ClampedArray' target='_blank'>Uint8ClampedArray</a>\ncontaining the values for all the pixels in the display window.\nThese values are numbers. This array is the size (include an appropriate\nfactor for <a href=\"#/p5/pixelDensity\">pixelDensity</a>) of the display window x4,\nrepresenting the R, G, B, A values in order for each pixel, moving from\nleft to right across each row, then down each column. Retina and other\nhigh density displays will have more pixels[] (by a factor of\npixelDensity^2).\nFor example, if the image is 100x100 pixels, there will be 40,000. On a\nretina display, there will be 160,000.</p>\n<p>The first four values (indices 0-3) in the array will be the R, G, B, A\nvalues of the pixel at (0, 0). The second four values (indices 4-7) will\ncontain the R, G, B, A values of the pixel at (1, 0). More generally, to\nset values for a pixel at (x, y):</p>\n<pre><code class=\"language-javascript\">let d = pixelDensity();\nfor (let i = 0; i < d; i++) {\n  for (let j = 0; j < d; j++) {\n    // loop over\n    index = 4 * ((y * d + j) * width * d + (x * d + i));\n    pixels[index] = r;\n    pixels[index+1] = g;\n    pixels[index+2] = b;\n    pixels[index+3] = a;\n  }\n}</code></pre>\n<p>While the above method is complex, it is flexible enough to work with\nany pixelDensity. Note that <a href=\"#/p5/set\">set()</a> will automatically take care of\nsetting all the appropriate values in <a href=\"#/p5/pixels\">pixels[]</a> for a given (x, y) at\nany pixelDensity, but the performance may not be as fast when lots of\nmodifications are made to the pixel array.</p>\n<p>Before accessing this array, the data must loaded with the <a href=\"#/p5/loadPixels\">loadPixels()</a>\nfunction. After the array data has been modified, the <a href=\"#/p5/updatePixels\">updatePixels()</a>\nfunction must be run to update the changes.</p>\n<p>Note that this is not a standard javascript array.  This means that\nstandard javascript functions such as <a href=\"#/p5/slice\">slice()</a> or\n<a href=\"#/p5/arrayCopy\">arrayCopy()</a> do not\nwork.</p>\n","itemtype":"property","name":"pixels","type":"Number[]","example":["\n<div>\n<code>\nlet pink = color(255, 102, 204);\nloadPixels();\nlet d = pixelDensity();\nlet halfImage = 4 * (width * d) * (height / 2 * d);\nfor (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}\nupdatePixels();\n</code>\n</div>"],"alt":"top half of canvas pink, bottom grey","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":80,"description":"<p>Copies a region of pixels from one image to another, using a specified\nblend mode to do the operation.</p>\n","itemtype":"method","name":"blend","example":["\n<div><code>\nlet img0;\nlet img1;\n\nfunction preload() {\n  img0 = loadImage('assets/rockies.jpg');\n  img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  background(img0);\n  image(img1, 0, 0);\n  blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n}\n</code></div>\n<div><code>\nlet img0;\nlet img1;\n\nfunction preload() {\n  img0 = loadImage('assets/rockies.jpg');\n  img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  background(img0);\n  image(img1, 0, 0);\n  blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n}\n</code></div>\n<div><code>\nlet img0;\nlet img1;\n\nfunction preload() {\n  img0 = loadImage('assets/rockies.jpg');\n  img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  background(img0);\n  image(img1, 0, 0);\n  blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n}\n</code></div>"],"alt":"image of rocky mountains. Brick images on left and right. Right overexposed\nimage of rockies. Brickwall images on left and right. Right mortar transparent\nimage of rockies. Brickwall images on left and right. Right translucent","class":"p5","module":"Image","submodule":"Pixels","overloads":[{"line":80,"params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image"},{"name":"sx","description":"<p>X coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sy","description":"<p>Y coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sw","description":"<p>source image width</p>\n","type":"Integer"},{"name":"sh","description":"<p>source image height</p>\n","type":"Integer"},{"name":"dx","description":"<p>X coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dy","description":"<p>Y coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dw","description":"<p>destination image width</p>\n","type":"Integer"},{"name":"dh","description":"<p>destination image height</p>\n","type":"Integer"},{"name":"blendMode","description":"<p>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.</p>\n","type":"Constant"}]},{"line":152,"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":173,"description":"<p>Copies a region of the canvas to another region of the canvas\nand copies a region of pixels from an image used as the srcImg parameter\ninto the canvas srcImage is specified this is used as the source. If\nthe source and destination regions aren't the same size, it will\nautomatically resize source pixels to fit the specified\ntarget region.</p>\n","itemtype":"method","name":"copy","example":["\n<div><code>\nlet img;\n\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  background(img);\n  copy(img, 7, 22, 10, 10, 35, 25, 50, 50);\n  stroke(255);\n  noFill();\n  // Rectangle shows area being copied\n  rect(7, 22, 10, 10);\n}\n</code></div>"],"alt":"image of rocky mountains. Brick images on left and right. Right overexposed\nimage of rockies. Brickwall images on left and right. Right mortar transparent\nimage of rockies. Brickwall images on left and right. Right translucent","class":"p5","module":"Image","submodule":"Pixels","overloads":[{"line":173,"params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image|p5.Element"},{"name":"sx","description":"<p>X coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sy","description":"<p>Y coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sw","description":"<p>source image width</p>\n","type":"Integer"},{"name":"sh","description":"<p>source image height</p>\n","type":"Integer"},{"name":"dx","description":"<p>X coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dy","description":"<p>Y coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dw","description":"<p>destination image width</p>\n","type":"Integer"},{"name":"dh","description":"<p>destination image height</p>\n","type":"Integer"}]},{"line":215,"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":307,"description":"<p>Applies a filter to the canvas. The presets options are:</p>\n<p>THRESHOLD\nConverts the image to black and white pixels depending if they are above or\nbelow the threshold defined by the level parameter. The parameter must be\nbetween 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.</p>\n<p>GRAY\nConverts any colors in the image to grayscale equivalents. No parameter\nis used.</p>\n<p>OPAQUE\nSets the alpha channel to entirely opaque. No parameter is used.</p>\n<p>INVERT\nSets each pixel to its inverse value. No parameter is used.</p>\n<p>POSTERIZE\nLimits each channel of the image to the number of colors specified as the\nparameter. The parameter can be set to values between 2 and 255, but\nresults are most noticeable in the lower ranges.</p>\n<p>BLUR\nExecutes a Gaussian blur with the level parameter specifying the extent\nof the blurring. If no parameter is used, the blur is equivalent to\nGaussian blur of radius 1. Larger values increase the blur.</p>\n<p>ERODE\nReduces the light areas. No parameter is used.</p>\n<p>DILATE\nIncreases the light areas. No parameter is used.</p>\n<p>filter() does not work in WEBGL mode.\nA similar effect can be achieved in WEBGL mode using custom\nshaders. Adam Ferriss has written\na <a href=\"https://github.com/aferriss/p5jsShaderExamples\"\ntarget='_blank'>selection of shader examples</a> that contains many\nof the effects present in the filter examples.</p>\n","itemtype":"method","name":"filter","params":[{"name":"filterType","description":"<p>either THRESHOLD, GRAY, OPAQUE, INVERT,\n                               POSTERIZE, BLUR, ERODE, DILATE or BLUR.\n                               See Filters.js for docs on\n                               each available filter</p>\n","type":"Constant"},{"name":"filterParam","description":"<p>an optional parameter unique\n                               to each filter, see above</p>\n","type":"Number","optional":true}],"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(THRESHOLD);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(GRAY);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(OPAQUE);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(INVERT);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(POSTERIZE, 3);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(DILATE);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(BLUR, 3);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(ERODE);\n}\n</code>\n</div>"],"alt":"black and white image of a brick wall.\ngreyscale image of a brickwall\nimage of a brickwall\njade colored image of a brickwall\nred and pink image of a brickwall\nimage of a brickwall\nblurry image of a brickwall\nimage of a brickwall\nimage of a brickwall with less detail","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":481,"description":"<p>Get a region of pixels, or a single pixel, from the canvas.</p>\n<p>Returns an array of [R,G,B,A] values for any pixel or grabs a section of\nan image. If no parameters are specified, the entire image is returned.\nUse the x and y parameters to get the value of one pixel. Get a section of\nthe display window by specifying additional w and h parameters. When\ngetting an image, the x and y parameters define the coordinates for the\nupper-left corner of the image, regardless of the current <a href=\"#/p5/imageMode\">imageMode()</a>.</p>\n<p>Getting the color of a single pixel with get(x, y) is easy, but not as fast\nas grabbing the data directly from <a href=\"#/p5/pixels\">pixels[]</a>. The equivalent statement to\nget(x, y) using <a href=\"#/p5/pixels\">pixels[]</a> with pixel density d is</p>\n<pre><code class=\"language-javascript\">let x, y, d; // set these to the coordinates\nlet off = (y * width + x) * d * 4;\nlet components = [\n  pixels[off],\n  pixels[off + 1],\n  pixels[off + 2],\n  pixels[off + 3]\n];\nprint(components);</code></pre>\n<p>See the reference for <a href=\"#/p5/pixels\">pixels[]</a> for more information.</p>\n<p>If you want to extract an array of colors or a subimage from an p5.Image object,\ntake a look at <a href=\"#/p5.Image/get\">p5.Image.get()</a></p>\n","itemtype":"method","name":"get","return":{"description":"the rectangle <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"},"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  let c = get();\n  image(c, width / 2, 0);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  let c = get(50, 90);\n  fill(c);\n  noStroke();\n  rect(25, 25, 50, 50);\n}\n</code>\n</div>"],"alt":"2 images of the rocky mountains, side-by-side\nImage of the rocky mountains with 50x50 green rect in center of canvas","class":"p5","module":"Image","submodule":"Pixels","overloads":[{"line":481,"params":[{"name":"x","description":"<p>x-coordinate of the pixel</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the pixel</p>\n","type":"Number"},{"name":"w","description":"<p>width</p>\n","type":"Number"},{"name":"h","description":"<p>height</p>\n","type":"Number"}],"return":{"description":"the rectangle <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"}},{"line":551,"params":[],"return":{"description":"the whole <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"}},{"line":555,"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/image/pixels.js","line":566,"description":"<p>Loads the pixel data for the display window into the <a href=\"#/p5/pixels\">pixels[]</a> array. This\nfunction must always be called before reading from or writing to <a href=\"#/p5/pixels\">pixels[]</a>.\nNote that only changes made with <a href=\"#/p5/set\">set()</a> or direct manipulation of <a href=\"#/p5/pixels\">pixels[]</a>\nwill occur.</p>\n","itemtype":"method","name":"loadPixels","example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  image(img, 0, 0, width, height);\n  let d = pixelDensity();\n  let halfImage = 4 * (width * d) * (height * d / 2);\n  loadPixels();\n  for (let i = 0; i < halfImage; i++) {\n    pixels[i + halfImage] = pixels[i];\n  }\n  updatePixels();\n}\n</code>\n</div>"],"alt":"two images of the rocky mountains. one on top, one on bottom of canvas.","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":602,"description":"<p>Changes the color of any pixel, or writes an image directly to the\ndisplay window.\nThe x and y parameters specify the pixel to change and the c parameter\nspecifies the color value. This can be a <a href=\"#/p5.Color\">p5.Color</a> object, or [R, G, B, A]\npixel array. It can also be a single grayscale value.\nWhen setting an image, the x and y parameters define the coordinates for\nthe upper-left corner of the image, regardless of the current <a href=\"#/p5/imageMode\">imageMode()</a>.</p>\n<p>After using <a href=\"#/p5/set\">set()</a>, you must call <a href=\"#/p5/updatePixels\">updatePixels()</a> for your changes to appear.\nThis should be called once all pixels have been set, and must be called before\ncalling .<a href=\"#/p5/get\">get()</a> or drawing the image.</p>\n<p>Setting the color of a single pixel with set(x, y) is easy, but not as\nfast as putting the data directly into <a href=\"#/p5/pixels\">pixels[]</a>. Setting the <a href=\"#/p5/pixels\">pixels[]</a>\nvalues directly may be complicated when working with a retina display,\nbut will perform better when lots of pixels need to be set directly on\nevery loop. See the reference for <a href=\"#/p5/pixels\">pixels[]</a> for more information.</p>\n","itemtype":"method","name":"set","params":[{"name":"x","description":"<p>x-coordinate of the pixel</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the pixel</p>\n","type":"Number"},{"name":"c","description":"<p>insert a grayscale value | a pixel array |\n                               a <a href=\"#/p5.Color\">p5.Color</a> object | a <a href=\"#/p5.Image\">p5.Image</a> to copy</p>\n","type":"Number|Number[]|Object"}],"example":["\n<div>\n<code>\nlet black = color(0);\nset(30, 20, black);\nset(85, 20, black);\nset(85, 75, black);\nset(30, 75, black);\nupdatePixels();\n</code>\n</div>\n\n<div>\n<code>\nfor (let i = 30; i < width - 15; i++) {\n  for (let j = 20; j < height - 25; j++) {\n    let c = color(204 - j, 153 - i, 0);\n    set(i, j, c);\n  }\n}\nupdatePixels();\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  set(0, 0, img);\n  updatePixels();\n  line(0, 0, width, height);\n  line(0, height, width, 0);\n}\n</code>\n</div>"],"alt":"4 black points in the shape of a square middle-right of canvas.\nsquare with orangey-brown gradient lightening at bottom right.\nimage of the rocky mountains. with lines like an 'x' through the center.","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":674,"description":"<p>Updates the display window with the data in the <a href=\"#/p5/pixels\">pixels[]</a> array.\nUse in conjunction with <a href=\"#/p5/loadPixels\">loadPixels()</a>. If you're only reading pixels from\nthe array, there's no need to call <a href=\"#/p5/updatePixels\">updatePixels()</a> — updating is only\nnecessary to apply changes. <a href=\"#/p5/updatePixels\">updatePixels()</a> should be called anytime the\npixels array is manipulated or <a href=\"#/p5/set\">set()</a> is called, and only changes made with\n<a href=\"#/p5/set\">set()</a> or direct changes to <a href=\"#/p5/pixels\">pixels[]</a> will occur.</p>\n","itemtype":"method","name":"updatePixels","params":[{"name":"x","description":"<p>x-coordinate of the upper-left corner of region\n                        to update</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>y-coordinate of the upper-left corner of region\n                        to update</p>\n","type":"Number","optional":true},{"name":"w","description":"<p>width of region to update</p>\n","type":"Number","optional":true},{"name":"h","description":"<p>height of region to update</p>\n","type":"Number","optional":true}],"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  image(img, 0, 0, width, height);\n  let d = pixelDensity();\n  let halfImage = 4 * (width * d) * (height * d / 2);\n  loadPixels();\n  for (let i = 0; i < halfImage; i++) {\n    pixels[i + halfImage] = pixels[i];\n  }\n  updatePixels();\n}\n</code>\n</div>"],"alt":"two images of the rocky mountains. one on top, one on bottom of canvas.","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/io/files.js","line":20,"description":"<p>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.</p>\n<p>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 <a href=\"https://github.com/camsong/\nfetch-jsonp\">here</a>.</p>\n<p>This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadJSON","return":{"description":"JSON data","type":"Object|Array"},"example":["\n\nCalling <a href=\"#/p5/loadJSON\">loadJSON()</a> inside <a href=\"#/p5/preload\">preload()</a> guarantees to complete the\noperation before <a href=\"#/p5/setup\">setup()</a> and <a href=\"#/p5/draw\">draw()</a> are called.\n\n<div><code>\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}\n</code></div>\n\nOutside of preload(), you may supply a callback function to handle the\nobject:\n<div><code>\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}\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</code></div>"],"alt":"50x50 ellipse that changes from black to white depending on the current humidity\n50x50 ellipse that changes from black to white depending on the current humidity","class":"p5","module":"IO","submodule":"Input","overloads":[{"line":20,"params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"jsonpOptions","description":"<p>options object for jsonp related settings</p>\n","type":"Object","optional":true},{"name":"datatype","description":"<p>\"json\" or \"jsonp\"</p>\n","type":"String","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/loadJSON\">loadJSON()</a> completes, data is passed\n                                   in as first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                   there is an error, response is passed\n                                   in as first argument</p>\n","type":"Function","optional":true}],"return":{"description":"JSON data","type":"Object|Array"}},{"line":104,"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":112,"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":183,"description":"<p>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.</p>\n<p>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.</p>\n<p>This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed.</p>\n<p>This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadStrings","params":[{"name":"filename","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"callback","description":"<p>function to be executed after <a href=\"#/p5/loadStrings\">loadStrings()</a>\n                              completes, Array is passed in as first\n                              argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                              there is an error, response is passed\n                              in as first argument</p>\n","type":"Function","optional":true}],"return":{"description":"Array of Strings","type":"String[]"},"example":["\n\nCalling loadStrings() inside <a href=\"#/p5/preload\">preload()</a> guarantees to complete the\noperation before <a href=\"#/p5/setup\">setup()</a> and <a href=\"#/p5/draw\">draw()</a> are called.\n\n<div><code>\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}\n</code></div>\n\nOutside of preload(), you may supply a callback function to handle the\nobject:\n\n<div><code>\nfunction setup() {\n  loadStrings('assets/test.txt', pickString);\n}\n\nfunction pickString(result) {\n  background(200);\n  text(random(result), 10, 10, 80, 80);\n}\n</code></div>"],"alt":"randomly generated text from a file, for example \"i smell like butter\"\nrandomly generated text from a file, for example \"i have three feet\"","class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":293,"description":"<p>Reads the contents of a file or URL and creates a <a href=\"#/p5.Table\">p5.Table</a> 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.</p>\n<p>This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. Calling <a href=\"#/p5/loadTable\">loadTable()</a> inside <a href=\"#/p5/preload\">preload()</a>\nguarantees to complete the operation before <a href=\"#/p5/setup\">setup()</a> and <a href=\"#/p5/draw\">draw()</a> are called.\nOutside of <a href=\"#/p5/preload\">preload()</a>, you may supply a callback function to handle the\nobject:</p>\n<p>All files loaded and saved use UTF-8 encoding. This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadTable","params":[{"name":"filename","description":"<p>name of the file or URL to load</p>\n","type":"String"},{"name":"extension","description":"<p>parse the table by comma-separated values \"csv\", semicolon-separated\n                                     values \"ssv\", or tab-separated values \"tsv\"</p>\n","type":"String","optional":true},{"name":"header","description":"<p>\"header\" to indicate table has header row</p>\n","type":"String","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                     <a href=\"#/p5/loadTable\">loadTable()</a> completes. On success, the\n                                     <a href=\"#/p5.Table\">Table</a> object is passed in as the\n                                     first argument.</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                     there is an error, response is passed\n                                     in as first argument</p>\n","type":"Function","optional":true}],"return":{"description":"<a href=\"#/p5.Table\">Table</a> object containing data","type":"Object"},"example":["\n<div class='norender'>\n<code>\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}\n</code>\n</div>"],"alt":"randomly generated text from a file, for example \"i smell like butter\"\nrandomly generated text from a file, for example \"i have three feet\"","class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":575,"description":"<p>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.</p>\n<p>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.</p>\n<p>This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. Calling <a href=\"#/p5/loadXML\">loadXML()</a> inside <a href=\"#/p5/preload\">preload()</a>\nguarantees to complete the operation before <a href=\"#/p5/setup\">setup()</a> and <a href=\"#/p5/draw\">draw()</a> are called.</p>\n<p>Outside of <a href=\"#/p5/preload\">preload()</a>, you may supply a callback function to handle the\nobject.</p>\n<p>This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadXML","params":[{"name":"filename","description":"<p>name of the file or URL to load</p>\n","type":"String"},{"name":"callback","description":"<p>function to be executed after <a href=\"#/p5/loadXML\">loadXML()</a>\n                              completes, XML object is passed in as\n                              first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                              there is an error, response is passed\n                              in as first argument</p>\n","type":"Function","optional":true}],"return":{"description":"XML object containing data","type":"Object"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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\n// Sketch prints:\n// 0, Capra hircus, Goat\n// 1, Panthera pardus, Leopard\n// 2, Equus zebra, Zebra\n</code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":685,"description":"<p>This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadBytes","params":[{"name":"file","description":"<p>name of the file or URL to load</p>\n","type":"String"},{"name":"callback","description":"<p>function to be executed after <a href=\"#/p5/loadBytes\">loadBytes()</a>\n                                   completes</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if there\n                                   is an error</p>\n","type":"Function","optional":true}],"return":{"description":"an object whose 'bytes' property will be the loaded buffer","type":"Object"},"example":["\n<div class='norender'><code>\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}\n</code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":744,"description":"<p>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 <code>httpDo(path, 'GET')</code>. 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).</p>\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<div class='norender'><code>\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</code></div>"],"class":"p5","module":"IO","submodule":"Input","overloads":[{"line":744,"params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"datatype","description":"<p>\"json\", \"jsonp\", \"binary\", \"arrayBuffer\",\n                                   \"xml\", or \"text\"</p>\n","type":"String","optional":true},{"name":"data","description":"<p>param data passed sent with request</p>\n","type":"Object|Boolean","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/httpGet\">httpGet()</a> completes, data is passed in\n                                   as first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                   there is an error, response is passed\n                                   in as first argument</p>\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":798,"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":806,"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":821,"description":"<p>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 <code>httpDo(path, 'POST')</code>.</p>\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<div>\n<code>\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 way cool.' };\n\nfunction setup() {\n  createCanvas(800, 800);\n}\n\nfunction mousePressed() {\n  // Pick new random color values\n  let r = random(255);\n  let g = random(255);\n  let b = random(255);\n\n  httpPost(url, 'json', postData, function(result) {\n    strokeWeight(2);\n    stroke(r, g, b);\n    fill(r, g, b, 127);\n    ellipse(mouseX, mouseY, 200, 200);\n    text(result.body, mouseX, mouseY);\n  });\n}\n</code>\n</div>\n\n<div><code>\nlet url = 'ttps://invalidURL'; // A bad URL that will cause errors\nlet postData = { title: 'p5 Clicked!', body: 'p5.js is way cool.' };\n\nfunction setup() {\n  createCanvas(800, 800);\n}\n\nfunction mousePressed() {\n  // Pick new random color values\n  let r = random(255);\n  let g = random(255);\n  let b = random(255);\n\n  httpPost(\n    url,\n    'json',\n    postData,\n    function(result) {\n      // ... won't be called\n    },\n    function(error) {\n      strokeWeight(2);\n      stroke(r, g, b);\n      fill(r, g, b, 127);\n      text(error.toString(), mouseX, mouseY);\n    }\n  );\n}\n</code></div>"],"class":"p5","module":"IO","submodule":"Input","overloads":[{"line":821,"params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"datatype","description":"<p>\"json\", \"jsonp\", \"xml\", or \"text\".\n                                   If omitted, <a href=\"#/p5/httpPost\">httpPost()</a> will guess.</p>\n","type":"String","optional":true},{"name":"data","description":"<p>param data passed sent with request</p>\n","type":"Object|Boolean","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/httpPost\">httpPost()</a> completes, data is passed in\n                                   as first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                   there is an error, response is passed\n                                   in as first argument</p>\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":901,"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":909,"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":924,"description":"<p>Method for executing an HTTP request. If data type is not specified,\np5 will try to guess based on the URL, defaulting to text.<br><br>\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.</p>\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<div>\n<code>\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</code>\n</div>"],"class":"p5","module":"IO","submodule":"Input","overloads":[{"line":924,"params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"method","description":"<p>either \"GET\", \"POST\", or \"PUT\",\n                                   defaults to \"GET\"</p>\n","type":"String","optional":true},{"name":"datatype","description":"<p>\"json\", \"jsonp\", \"xml\", or \"text\"</p>\n","type":"String","optional":true},{"name":"data","description":"<p>param data passed sent with request</p>\n","type":"Object","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/httpGet\">httpGet()</a> completes, data is passed in\n                                   as first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                   there is an error, response is passed\n                                   in as first argument</p>\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":995,"params":[{"name":"path","description":"","type":"String"},{"name":"options","description":"<p>Request object options as documented in the\n                                   \"fetch\" API\n<a href=\"https://developer.mozilla.org/en/docs/Web/API/Fetch_API\">reference</a></p>\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":1160,"itemtype":"method","name":"createWriter","params":[{"name":"name","description":"<p>name of the file to be created</p>\n","type":"String"},{"name":"extension","description":"","type":"String","optional":true}],"return":{"description":"","type":"p5.PrintWriter"},"example":["\n<div>\n<code>\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</code>\n</div>"],"class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1215,"description":"<p>Writes data to the PrintWriter stream</p>\n","itemtype":"method","name":"write","params":[{"name":"data","description":"<p>all data to be written by the PrintWriter</p>\n","type":"Array"}],"example":["\n<div class=\"norender notest\">\n<code>\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</code>\n</div>\n<div class='norender notest'>\n<code>\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</code>\n</div>\n<div class='norender notest'>\n<code>\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</code>\n</div>\n<div>\n<code>\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</code>\n</div>"],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1274,"description":"<p>Writes data to the PrintWriter stream, and adds a new line at the end</p>\n","itemtype":"method","name":"print","params":[{"name":"data","description":"<p>all data to be printed by the PrintWriter</p>\n","type":"Array"}],"example":["\n<div class='norender notest'>\n<code>\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</code>\n</div>\n<div class='norender notest'>\n<code>\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</code>\n</div>"],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1315,"description":"<p>Clears the data already written to the PrintWriter object</p>\n","itemtype":"method","name":"clear","example":["\n<div class =\"norender notest\"><code>\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</code></div>\n<div>\n<code>\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</code>\n</div>\n"],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1349,"description":"<p>Closes the PrintWriter</p>\n","itemtype":"method","name":"close","example":["\n<div class=\"norender notest\">\n<code>\n// create a file called 'newFile.txt'\nlet writer = createWriter('newFile.txt');\n// close the PrintWriter and save the file\nwriter.close();\n</code>\n</div>\n<div class='norender notest'>\n<code>\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</code>\n</div>"],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1398,"description":"<p>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 <a href=\"#/p5.Element\">p5.Element</a>,an Array of\nStrings, an Array of JSON, a JSON object, a <a href=\"#/p5.Table\">p5.Table\n</a>, a <a href=\"#/p5.Image\">p5.Image</a>, 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.\n<strong>Note that it is not recommended to\ncall this method within draw, as it will open a new save dialog on every\nrender.</strong></p>\n","itemtype":"method","name":"save","params":[{"name":"objectOrFilename","description":"<p>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).</p>\n","type":"Object|String","optional":true},{"name":"filename","description":"<p>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).</p>\n","type":"String","optional":true},{"name":"options","description":"<p>Additional options depend on\n                          filetype. For example, when saving JSON,\n                          <code>true</code> indicates that the\n                          output will be optimized for filesize,\n                          rather than readability.</p>\n","type":"Boolean|String","optional":true}],"example":["\n <div class=\"norender\"><code>\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 </code></div>\n\n<div class=\"norender\"><code>\n // Saves p5.Image as an image\n img = createImage(10, 10);\n save(img, 'myImage.png');\n </code></div>\n\n <div class=\"norender\"><code>\n // Saves p5.Renderer object as an image\n obj = createGraphics(100, 100);\n save(obj, 'myObject.png');\n </code></div>\n\n <div class=\"norender\"><code>\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 </code></div>\n\n <div class=\"norender\"><code>\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 </code></div>\n\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"An example for saving a canvas as an image.\n An example for saving a p5.Image element as an image.\n An example for saving a p5.Renderer element.\n An example showing how to save a table in formats of HTML, CSV and TSV.\n An example for saving JSON to a txt file with some extra arguments.\n An example for saving an array of strings to text file with line breaks.","class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1540,"description":"<p>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.</p>\n","itemtype":"method","name":"saveJSON","params":[{"name":"json","description":"","type":"Array|Object"},{"name":"filename","description":"","type":"String"},{"name":"optimize","description":"<p>If true, removes line breaks\n                               and spaces from the output\n                               file to optimize filesize\n                               (but not readability).</p>\n","type":"Boolean","optional":true}],"example":["\n <div><code>\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 }\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 </code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1597,"description":"<p>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.</p>\n","itemtype":"method","name":"saveStrings","params":[{"name":"list","description":"<p>string array to be written</p>\n","type":"String[]"},{"name":"filename","description":"<p>filename for output</p>\n","type":"String"},{"name":"extension","description":"<p>the filename's extension</p>\n","type":"String","optional":true},{"name":"isCRLF","description":"<p>if true, change line-break to CRLF</p>\n","type":"Boolean","optional":true}],"example":["\n <div><code>\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 }\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 </code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1661,"description":"<p>Writes the contents of a <a href=\"#/p5.Table\">Table</a> 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.</p>\n","itemtype":"method","name":"saveTable","params":[{"name":"Table","description":"<p>the <a href=\"#/p5.Table\">Table</a> object to save to a file</p>\n","type":"p5.Table"},{"name":"filename","description":"<p>the filename to which the Table should be saved</p>\n","type":"String"},{"name":"options","description":"<p>can be one of \"tsv\", \"csv\", or \"html\"</p>\n","type":"String","optional":true}],"example":["\n<div><code>\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\n // Saves the following to a file called 'new.csv':\n // id,species,name\n // 0,Panthera leo,Lion\n </code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/p5.Table.js","line":9,"description":"<p>Table Options\nGeneric class for handling tabular data, typically from a\nCSV, TSV, or other sort of spreadsheet file.\nCSV files are\n<a href=\"http://en.wikipedia.org/wiki/Comma-separated_values\">\ncomma separated values</a>, 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\n<a href=\"http://tools.ietf.org/html/rfc4180\">here</a>.\nTo load files, use the <a href=\"#/p5/loadTable\">loadTable</a> method.\nTo save tables to your computer, use the <a href=\"#/p5/save\">save</a> method\n or the <a href=\"#/p5/saveTable\">saveTable</a> method.</p>\n<p>Possible options include:</p>\n<ul>\n<li>csv - parse the table as comma-separated values\n<li>tsv - parse the table as tab-separated values\n<li>header - this table has a header (title) row\n</ul>","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":43,"description":"<p>An array containing the names of the columns in the table, if the \"header\" the table is\nloaded with the \"header\" parameter.</p>\n","itemtype":"property","name":"columns","type":"String[]","example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":77,"description":"<p>An array containing the <a href=\"#/p5.Table\">p5.TableRow</a> objects that make up the\nrows of the table. The same result as calling <a href=\"#/p5/getRows\">getRows()</a></p>\n","itemtype":"property","name":"rows","type":"p5.TableRow[]","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":85,"description":"<p>Use <a href=\"#/p5/addRow\">addRow()</a> to add a new row of data to a <a href=\"#/p5.Table\">p5.Table</a> 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 <a href=\"#/p5/set\">set()</a>.</p>\n<p>If a <a href=\"#/p5.TableRow\">p5.TableRow</a> object is included as a parameter, then that row is\nduplicated and added to the table.</p>\n","itemtype":"method","name":"addRow","params":[{"name":"row","description":"<p>row to be added to the table</p>\n","type":"p5.TableRow","optional":true}],"return":{"description":"the row that was added","type":"p5.TableRow"},"example":["\n <div class=\"norender\">\n <code>\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 </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":148,"description":"<p>Removes a row from the table object.</p>\n","itemtype":"method","name":"removeRow","params":[{"name":"id","description":"<p>ID number of the row to remove</p>\n","type":"Integer"}],"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":195,"description":"<p>Returns a reference to the specified <a href=\"#/p5.TableRow\">p5.TableRow</a>. The reference\ncan then be used to get and set values of the selected row.</p>\n","itemtype":"method","name":"getRow","params":[{"name":"rowID","description":"<p>ID number of the row to get</p>\n","type":"Integer"}],"return":{"description":"<a href=\"#/p5.TableRow\">p5.TableRow</a> object","type":"p5.TableRow"},"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":240,"description":"<p>Gets all rows from the table. Returns an array of <a href=\"#/p5.TableRow\">p5.TableRow</a>s.</p>\n","itemtype":"method","name":"getRows","return":{"description":"Array of <a href=\"#/p5.TableRow\">p5.TableRow</a>s","type":"p5.TableRow[]"},"example":["\n <div class=\"norender\">\n <code>\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 </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":288,"description":"<p>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.</p>\n","itemtype":"method","name":"findRow","params":[{"name":"value","description":"<p>The value to match</p>\n","type":"String"},{"name":"column","description":"<p>ID number or title of the\n                               column to search</p>\n","type":"Integer|String"}],"return":{"description":"","type":"p5.TableRow"},"example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":352,"description":"<p>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.</p>\n","itemtype":"method","name":"findRows","params":[{"name":"value","description":"<p>The value to match</p>\n","type":"String"},{"name":"column","description":"<p>ID number or title of the\n                               column to search</p>\n","type":"Integer|String"}],"return":{"description":"An Array of TableRow objects","type":"p5.TableRow[]"},"example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":420,"description":"<p>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.</p>\n","itemtype":"method","name":"matchRow","params":[{"name":"regexp","description":"<p>The regular expression to match</p>\n","type":"String|RegExp"},{"name":"column","description":"<p>The column ID (number) or\n                                 title (string)</p>\n","type":"String|Integer"}],"return":{"description":"TableRow object","type":"p5.TableRow"},"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":478,"description":"<p>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.</p>\n","itemtype":"method","name":"matchRows","params":[{"name":"regexp","description":"<p>The regular expression to match</p>\n","type":"String"},{"name":"column","description":"<p>The column ID (number) or\n                                 title (string)</p>\n","type":"String|Integer","optional":true}],"return":{"description":"An Array of TableRow objects","type":"p5.TableRow[]"},"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":545,"description":"<p>Retrieves all values in the specified column, and returns them\nas an array. The column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"getColumn","params":[{"name":"column","description":"<p>String or Number of the column to return</p>\n","type":"String|Number"}],"return":{"description":"Array of column values","type":"Array"},"example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":597,"description":"<p>Removes all rows from a Table. While all rows are removed,\ncolumns and column titles are maintained.</p>\n","itemtype":"method","name":"clearRows","example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":638,"description":"<p>Use <a href=\"#/p5/addColumn\">addColumn()</a> to add a new column to a <a href=\"#/p5.Table\">Table</a> 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.)</p>\n","itemtype":"method","name":"addColumn","params":[{"name":"title","description":"<p>title of the given column</p>\n","type":"String","optional":true}],"example":["\n <div class=\"norender\">\n <code>\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 </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":688,"description":"<p>Returns the total number of columns in a Table.</p>\n","itemtype":"method","name":"getColumnCount","return":{"description":"Number of columns in this table","type":"Integer"},"example":["\n <div>\n <code>\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 </code>\n </div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":724,"description":"<p>Returns the total number of rows in a Table.</p>\n","itemtype":"method","name":"getRowCount","return":{"description":"Number of rows in this table","type":"Integer"},"example":["\n <div>\n <code>\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 </code>\n </div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":760,"description":"<p>Removes any of the specified characters (or \"tokens\").</p>\n<p>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.</p>\n","itemtype":"method","name":"removeTokens","params":[{"name":"chars","description":"<p>String listing characters to be removed</p>\n","type":"String"},{"name":"column","description":"<p>Column ID (number)\n                                 or name (string)</p>\n","type":"String|Integer","optional":true}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":832,"description":"<p>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.</p>\n","itemtype":"method","name":"trim","params":[{"name":"column","description":"<p>Column ID (number)\n                                 or name (string)</p>\n","type":"String|Integer","optional":true}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":896,"description":"<p>Use <a href=\"#/p5/removeColumn\">removeColumn()</a> 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.</p>\n","itemtype":"method","name":"removeColumn","params":[{"name":"column","description":"<p>columnName (string) or ID (number)</p>\n","type":"String|Integer"}],"example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":960,"description":"<p>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.</p>\n","itemtype":"method","name":"set","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>column ID (Number)\n                              or title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>value to assign</p>\n","type":"String|Number"}],"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1009,"description":"<p>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.</p>\n","itemtype":"method","name":"setNum","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>column ID (Number)\n                              or title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>value to assign</p>\n","type":"Number"}],"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1055,"description":"<p>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.</p>\n","itemtype":"method","name":"setString","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>column ID (Number)\n                              or title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>value to assign</p>\n","type":"String"}],"example":["\n<div class=\"norender\"><code>\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</code></div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1100,"description":"<p>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.</p>\n","itemtype":"method","name":"get","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>columnName (string) or\n                                  ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"","type":"String|Number"},"example":["\n<div class=\"norender\">\n<code>\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}\n</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1146,"description":"<p>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.</p>\n","itemtype":"method","name":"getNum","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>columnName (string) or\n                                  ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\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}\n</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1190,"description":"<p>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.</p>\n","itemtype":"method","name":"getString","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>columnName (string) or\n                                  ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"","type":"String"},"example":["\n<div class=\"norender\">\n<code>\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}\n</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1242,"description":"<p>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.</p>\n","itemtype":"method","name":"getObject","params":[{"name":"headerColumn","description":"<p>Name of the column which should be used to\n                             title each row object (optional)</p>\n","type":"String","optional":true}],"return":{"description":"","type":"Object"},"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1305,"description":"<p>Retrieves all table data and returns it as a multidimensional array.</p>\n","itemtype":"method","name":"getArray","return":{"description":"","type":"Array"},"example":["\n<div class=\"norender\">\n<code>\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}\n</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":40,"description":"<p>Stores a value in the TableRow's specified column.\nThe column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"set","params":[{"name":"column","description":"<p>Column ID (Number)\n                              or Title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>The value to be stored</p>\n","type":"String|Number"}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":102,"description":"<p>Stores a Float value in the TableRow's specified column.\nThe column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"setNum","params":[{"name":"column","description":"<p>Column ID (Number)\n                              or Title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>The value to be stored\n                              as a Float</p>\n","type":"Number|String"}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":146,"description":"<p>Stores a String value in the TableRow's specified column.\nThe column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"setString","params":[{"name":"column","description":"<p>Column ID (Number)\n                              or Title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>The value to be stored\n                              as a String</p>\n","type":"String|Number|Boolean|Object"}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":191,"description":"<p>Retrieves a value from the TableRow's specified column.\nThe column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"get","params":[{"name":"column","description":"<p>columnName (string) or\n                                 ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"","type":"String|Number"},"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":239,"description":"<p>Retrieves a Float value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.</p>\n","itemtype":"method","name":"getNum","params":[{"name":"column","description":"<p>columnName (string) or\n                                 ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"Float Floating point number","type":"Number"},"example":["\n <div class=\"norender\"><code>\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 }\n </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":295,"description":"<p>Retrieves an String value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.</p>\n","itemtype":"method","name":"getString","params":[{"name":"column","description":"<p>columnName (string) or\n                                 ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"String","type":"String"},"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.XML.js","line":62,"description":"<p>Gets a copy of the element's parent. Returns the parent as another\n<a href=\"#/p5.XML\">p5.XML</a> object.</p>\n","itemtype":"method","name":"getParent","return":{"description":"element parent","type":"p5.XML"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":100,"description":"<p>Gets the element's full name, which is returned as a String.</p>\n","itemtype":"method","name":"getName","return":{"description":"the name of the node","type":"String"},"example":["&lt;animal\n <div class='norender'><code>\n // The following short XML file called \"mammals.xml\" is parsed\n // in the code below.\n //\n // <?xml version=\"1.0\"?>\n // &lt;mammals&gt;\n //   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n //   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n //   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n // &lt;/mammals&gt;\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 </code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":135,"description":"<p>Sets the element's name, which is specified as a String.</p>\n","itemtype":"method","name":"setName","params":[{"name":"the","description":"<p>new name of the node</p>\n","type":"String"}],"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":181,"description":"<p>Checks whether or not the element has any children, and returns the result\nas a boolean.</p>\n","itemtype":"method","name":"hasChildren","return":{"description":"","type":"Boolean"},"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":217,"description":"<p>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 <a href=\"#/p5.XML/getName\">getName()</a>\non each child element individually.</p>\n","itemtype":"method","name":"listChildren","return":{"description":"names of the children of the element","type":"String[]"},"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":258,"description":"<p>Returns all of the element's children as an array of <a href=\"#/p5.XML\">p5.XML</a> objects. When\nthe name parameter is specified, then it will return all children that match\nthat name.</p>\n","itemtype":"method","name":"getChildren","params":[{"name":"name","description":"<p>element name</p>\n","type":"String","optional":true}],"return":{"description":"children of the element","type":"p5.XML[]"},"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":314,"description":"<p>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.</p>\n","itemtype":"method","name":"getChild","params":[{"name":"name","description":"<p>element name or index</p>\n","type":"String|Integer"}],"return":{"description":"","type":"p5.XML"},"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>\n<div class='norender'><code>\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":374,"description":"<p>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 <a href=\"#/p5.XML\">p5.XML</a> object.\nA reference to the newly created child is returned as an <a href=\"#/p5.XML\">p5.XML</a> object.</p>\n","itemtype":"method","name":"addChild","params":[{"name":"node","description":"<p>a <a href=\"#/p5.XML\">p5.XML</a> Object which will be the child to be added</p>\n","type":"p5.XML"}],"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":426,"description":"<p>Removes the element specified by name or index.</p>\n","itemtype":"method","name":"removeChild","params":[{"name":"name","description":"<p>element name or index</p>\n","type":"String|Integer"}],"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>\n<div class='norender'><code>\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":498,"description":"<p>Counts the specified element's number of attributes, returned as an Number.</p>\n","itemtype":"method","name":"getAttributeCount","return":{"description":"","type":"Integer"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":534,"description":"<p>Gets all of the specified element's attributes, and returns them as an\narray of Strings.</p>\n","itemtype":"method","name":"listAttributes","return":{"description":"an array of strings containing the names of attributes","type":"String[]"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":577,"description":"<p>Checks whether or not an element has the specified attribute.</p>\n","itemtype":"method","name":"hasAttribute","params":[{"name":"the","description":"<p>attribute to be checked</p>\n","type":"String"}],"return":{"description":"true if attribute found else false","type":"Boolean"},"example":["\n <div class='norender'><code>\n // The following short XML file called \"mammals.xml\" is parsed\n // in the code below.\n //\n // <?xml version=\"1.0\"?>\n // &lt;mammals&gt;\n //   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n //   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n //   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n // &lt;/mammals&gt;\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 </code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":622,"description":"<p>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.</p>\n","itemtype":"method","name":"getNum","params":[{"name":"name","description":"<p>the non-null full name of the attribute</p>\n","type":"String"},{"name":"defaultValue","description":"<p>the default value of the attribute</p>\n","type":"Number","optional":true}],"return":{"description":"","type":"Number"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":669,"description":"<p>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.</p>\n","itemtype":"method","name":"getString","params":[{"name":"name","description":"<p>the non-null full name of the attribute</p>\n","type":"String"},{"name":"defaultValue","description":"<p>the default value of the attribute</p>\n","type":"Number","optional":true}],"return":{"description":"","type":"String"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":716,"description":"<p>Sets the content of an element's attribute. The first parameter specifies\nthe attribute name, while the second specifies the new content.</p>\n","itemtype":"method","name":"setAttribute","params":[{"name":"name","description":"<p>the full name of the attribute</p>\n","type":"String"},{"name":"value","description":"<p>the value of the attribute</p>\n","type":"Number|String|Boolean"}],"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":757,"description":"<p>Returns the content of an element. If there is no such content,\ndefaultValue is returned if specified, otherwise null is returned.</p>\n","itemtype":"method","name":"getContent","params":[{"name":"defaultValue","description":"<p>value returned if no content is found</p>\n","type":"String","optional":true}],"return":{"description":"","type":"String"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":798,"description":"<p>Sets the element's content.</p>\n","itemtype":"method","name":"setContent","params":[{"name":"text","description":"<p>the new content</p>\n","type":"String"}],"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":839,"description":"<p>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.</p>\n","itemtype":"method","name":"serialize","return":{"description":"Serialized string of the element","type":"String"},"example":["\n<div class='norender'><code>\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// <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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/math/calculation.js","line":10,"description":"<p>Calculates the absolute value (magnitude) of a number. Maps to Math.abs().\nThe absolute value of a number is always positive.</p>\n","itemtype":"method","name":"abs","params":[{"name":"n","description":"<p>number to compute</p>\n","type":"Number"}],"return":{"description":"absolute value of given number","type":"Number"},"example":["\n<div class = \"norender\"><code>\nfunction setup() {\n  let x = -3;\n  let y = abs(x);\n\n  print(x); // -3\n  print(y); // 3\n}\n</code></div>"],"alt":"no image displayed","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":33,"description":"<p>Calculates the closest int value that is greater than or equal to the\nvalue of the parameter. Maps to Math.ceil(). For example, ceil(9.03)\nreturns the value 10.</p>\n","itemtype":"method","name":"ceil","params":[{"name":"n","description":"<p>number to round up</p>\n","type":"Number"}],"return":{"description":"rounded up number","type":"Integer"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  // map, mouseX between 0 and 5.\n  let ax = map(mouseX, 0, 100, 0, 5);\n  let ay = 66;\n\n  //Get the ceiling of the mapped number.\n  let bx = ceil(map(mouseX, 0, 100, 0, 5));\n  let by = 33;\n\n  // Multiply the mapped numbers by 20 to more easily\n  // see the changes.\n  stroke(0);\n  fill(0);\n  line(0, ay, ax * 20, ay);\n  line(0, by, bx * 20, by);\n\n  // Reformat the float returned by map and draw it.\n  noStroke();\n  text(nfc(ax, 2), ax, ay - 5);\n  text(nfc(bx, 1), bx, by - 5);\n}\n</code></div>"],"alt":"2 horizontal lines & number sets. increase with mouse x. bottom to 2 decimals","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":72,"description":"<p>Constrains a value between a minimum and maximum value.</p>\n","itemtype":"method","name":"constrain","params":[{"name":"n","description":"<p>number to constrain</p>\n","type":"Number"},{"name":"low","description":"<p>minimum limit</p>\n","type":"Number"},{"name":"high","description":"<p>maximum limit</p>\n","type":"Number"}],"return":{"description":"constrained number","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n\n  let leftWall = 25;\n  let rightWall = 75;\n\n  // xm is just the mouseX, while\n  // xc is the mouseX, but constrained\n  // between the leftWall and rightWall!\n  let xm = mouseX;\n  let xc = constrain(mouseX, leftWall, rightWall);\n\n  // Draw the walls.\n  stroke(150);\n  line(leftWall, 0, leftWall, height);\n  line(rightWall, 0, rightWall, height);\n\n  // Draw xm and xc as circles.\n  noStroke();\n  fill(150);\n  ellipse(xm, 33, 9, 9); // Not Constrained\n  fill(0);\n  ellipse(xc, 66, 9, 9); // Constrained\n}\n</code></div>"],"alt":"2 vertical lines. 2 ellipses move with mouse X 1 does not move passed lines","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":116,"description":"<p>Calculates the distance between two points, in either two or three dimensions.</p>\n","itemtype":"method","name":"dist","return":{"description":"distance between the two points","type":"Number"},"example":["\n<div><code>\n// Move your mouse inside the canvas to see the\n// change in distance between two points!\nfunction draw() {\n  background(200);\n  fill(0);\n\n  let x1 = 10;\n  let y1 = 90;\n  let x2 = mouseX;\n  let y2 = mouseY;\n\n  line(x1, y1, x2, y2);\n  ellipse(x1, y1, 7, 7);\n  ellipse(x2, y2, 7, 7);\n\n  // d is the length of the line\n  // the distance from point 1 to point 2.\n  let d = int(dist(x1, y1, x2, y2));\n\n  // Let's write d along the line we are drawing!\n  push();\n  translate((x1 + x2) / 2, (y1 + y2) / 2);\n  rotate(atan2(y2 - y1, x2 - x1));\n  text(nfc(d, 1), 0, -5);\n  pop();\n  // Fancy!\n}\n</code></div>"],"alt":"2 ellipses joined by line. 1 ellipse moves with mouse X&Y. Distance displayed.","class":"p5","module":"Math","submodule":"Calculation","overloads":[{"line":116,"params":[{"name":"x1","description":"<p>x-coordinate of the first point</p>\n","type":"Number"},{"name":"y1","description":"<p>y-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"<p>x-coordinate of the second point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate of the second point</p>\n","type":"Number"}],"return":{"description":"distance between the two points","type":"Number"}},{"line":160,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>z-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>z-coordinate of the second point</p>\n","type":"Number"}],"return":{"description":"distance between the two points","type":"Number"}}]},{"file":"src/math/calculation.js","line":181,"description":"<p>Returns Euler's number e (2.71828...) raised to the power of the n\nparameter. Maps to Math.exp().</p>\n","itemtype":"method","name":"exp","params":[{"name":"n","description":"<p>exponent to raise</p>\n","type":"Number"}],"return":{"description":"e^n","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n\n  // Compute the exp() function with a value between 0 and 2\n  let xValue = map(mouseX, 0, width, 0, 2);\n  let yValue = exp(xValue);\n\n  let y = map(yValue, 0, 8, height, 0);\n\n  let legend = 'exp (' + nfc(xValue, 3) + ')\\n= ' + nf(yValue, 1, 4);\n  stroke(150);\n  line(mouseX, y, mouseX, height);\n  fill(0);\n  text(legend, 5, 15);\n  noStroke();\n  ellipse(mouseX, y, 7, 7);\n\n  // Draw the exp(x) curve,\n  // over the domain of x from 0 to 2\n  noFill();\n  stroke(0);\n  beginShape();\n  for (let x = 0; x < width; x++) {\n    xValue = map(x, 0, width, 0, 2);\n    yValue = exp(xValue);\n    y = map(yValue, 0, 8, height, 0);\n    vertex(x, y);\n  }\n\n  endShape();\n  line(0, 0, 0, height);\n  line(0, height - 1, width, height - 1);\n}\n</code></div>"],"alt":"ellipse moves along a curve with mouse x. e^n displayed.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":230,"description":"<p>Calculates the closest int value that is less than or equal to the\nvalue of the parameter. Maps to Math.floor().</p>\n","itemtype":"method","name":"floor","params":[{"name":"n","description":"<p>number to round down</p>\n","type":"Number"}],"return":{"description":"rounded down number","type":"Integer"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  //map, mouseX between 0 and 5.\n  let ax = map(mouseX, 0, 100, 0, 5);\n  let ay = 66;\n\n  //Get the floor of the mapped number.\n  let bx = floor(map(mouseX, 0, 100, 0, 5));\n  let by = 33;\n\n  // Multiply the mapped numbers by 20 to more easily\n  // see the changes.\n  stroke(0);\n  fill(0);\n  line(0, ay, ax * 20, ay);\n  line(0, by, bx * 20, by);\n\n  // Reformat the float returned by map and draw it.\n  noStroke();\n  text(nfc(ax, 2), ax, ay - 5);\n  text(nfc(bx, 1), bx, by - 5);\n}\n</code></div>"],"alt":"2 horizontal lines & number sets. increase with mouse x. bottom to 2 decimals","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":268,"description":"<p>Calculates a number between two numbers at a specific increment. The amt\nparameter is the amount to interpolate between the two values where 0.0\nequal to the first point, 0.1 is very near the first point, 0.5 is\nhalf-way in between, and 1.0 is equal to the second point. If the\nvalue of amt is more than 1.0 or less than 0.0, the number will be\ncalculated accordingly in the ratio of the two given numbers. The lerp\nfunction is convenient for creating motion along a straight\npath and for drawing dotted lines.</p>\n","itemtype":"method","name":"lerp","params":[{"name":"start","description":"<p>first value</p>\n","type":"Number"},{"name":"stop","description":"<p>second value</p>\n","type":"Number"},{"name":"amt","description":"<p>number</p>\n","type":"Number"}],"return":{"description":"lerped value","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  background(200);\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  let y = 50;\n\n  strokeWeight(5);\n  stroke(0); // Draw the original points in black\n  point(a, y);\n  point(b, y);\n\n  stroke(100); // Draw the lerp points in gray\n  point(c, y);\n  point(d, y);\n  point(e, y);\n}\n</code></div>"],"alt":"5 points horizontally staggered mid-canvas. mid 3 are grey, outer black","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":315,"description":"<p>Calculates the natural logarithm (the base-e logarithm) of a number. This\nfunction expects the n parameter to be a value greater than 0.0. Maps to\nMath.log().</p>\n","itemtype":"method","name":"log","params":[{"name":"n","description":"<p>number greater than 0</p>\n","type":"Number"}],"return":{"description":"natural logarithm of n","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  let maxX = 2.8;\n  let maxY = 1.5;\n\n  // Compute the natural log of a value between 0 and maxX\n  let xValue = map(mouseX, 0, width, 0, maxX);\n  let yValue, y;\n  if (xValue > 0) {\n   // Cannot take the log of a negative number.\n    yValue = log(xValue);\n    y = map(yValue, -maxY, maxY, height, 0);\n\n    // Display the calculation occurring.\n    let legend = 'log(' + nf(xValue, 1, 2) + ')\\n= ' + nf(yValue, 1, 3);\n    stroke(150);\n    line(mouseX, y, mouseX, height);\n    fill(0);\n    text(legend, 5, 15);\n    noStroke();\n    ellipse(mouseX, y, 7, 7);\n  }\n\n  // Draw the log(x) curve,\n  // over the domain of x from 0 to maxX\n  noFill();\n  stroke(0);\n  beginShape();\n  for (let x = 0; x < width; x++) {\n    xValue = map(x, 0, width, 0, maxX);\n    yValue = log(xValue);\n    y = map(yValue, -maxY, maxY, height, 0);\n    vertex(x, y);\n  }\n  endShape();\n  line(0, 0, 0, height);\n  line(0, height / 2, width, height / 2);\n}\n</code></div>"],"alt":"ellipse moves along a curve with mouse x. natural logarithm of n displayed.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":370,"description":"<p>Calculates the magnitude (or length) of a vector. A vector is a direction\nin space commonly used in computer graphics and linear algebra. Because it\nhas no \"start\" position, the magnitude of a vector can be thought of as\nthe distance from the coordinate 0,0 to its x,y value. Therefore, <a href=\"#/p5/mag\">mag()</a> is\na shortcut for writing dist(0, 0, x, y).</p>\n","itemtype":"method","name":"mag","params":[{"name":"a","description":"<p>first value</p>\n","type":"Number"},{"name":"b","description":"<p>second value</p>\n","type":"Number"}],"return":{"description":"magnitude of vector from (0,0) to (a,b)","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  let x1 = 20;\n  let x2 = 80;\n  let y1 = 30;\n  let y2 = 70;\n\n  line(0, 0, x1, y1);\n  print(mag(x1, y1)); // Prints \"36.05551275463989\"\n  line(0, 0, x2, y1);\n  print(mag(x2, y1)); // Prints \"85.44003745317531\"\n  line(0, 0, x1, y2);\n  print(mag(x1, y2)); // Prints \"72.80109889280519\"\n  line(0, 0, x2, y2);\n  print(mag(x2, y2)); // Prints \"106.3014581273465\"\n}\n</code></div>"],"alt":"4 lines of different length radiate from top left of canvas.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":408,"description":"<p>Re-maps a number from one range to another.</p>\n<p>In the first example above, the number 25 is converted from a value in the\nrange of 0 to 100 into a value that ranges from the left edge of the\nwindow (0) to the right edge (width).</p>\n","itemtype":"method","name":"map","params":[{"name":"value","description":"<p>the incoming value to be converted</p>\n","type":"Number"},{"name":"start1","description":"<p>lower bound of the value's current range</p>\n","type":"Number"},{"name":"stop1","description":"<p>upper bound of the value's current range</p>\n","type":"Number"},{"name":"start2","description":"<p>lower bound of the value's target range</p>\n","type":"Number"},{"name":"stop2","description":"<p>upper bound of the value's target range</p>\n","type":"Number"},{"name":"withinBounds","description":"<p>constrain the value to the newly mapped range</p>\n","type":"Boolean","optional":true}],"return":{"description":"remapped number","type":"Number"},"example":["\n  <div><code>\nlet value = 25;\nlet m = map(value, 0, 100, 0, width);\nellipse(m, 50, 10, 10);\n</code></div>\n\n  <div><code>\nfunction setup() {\n  noStroke();\n}\n\nfunction draw() {\n  background(204);\n  let x1 = map(mouseX, 0, width, 25, 75);\n  ellipse(x1, 25, 25, 25);\n  //This ellipse is constrained to the 0-100 range\n  //after setting withinBounds to true\n  let x2 = map(mouseX, 0, width, 0, 100, true);\n  ellipse(x2, 75, 25, 25);\n}\n</code></div>"],"alt":"10 by 10 white ellipse with in mid left canvas\n2 25 by 25 white ellipses move with mouse x. Bottom has more range from X","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":463,"description":"<p>Determines the largest value in a sequence of numbers, and then returns\nthat value. <a href=\"#/p5/max\">max()</a> accepts any number of Number parameters, or an Array\nof any length.</p>\n","itemtype":"method","name":"max","return":{"description":"maximum Number","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  // Change the elements in the array and run the sketch\n  // to show how max() works!\n  let numArray = [2, 1, 5, 4, 8, 9];\n  fill(0);\n  noStroke();\n  text('Array Elements', 0, 10);\n  // Draw all numbers in the array\n  let spacing = 15;\n  let elemsY = 25;\n  for (let i = 0; i < numArray.length; i++) {\n    text(numArray[i], i * spacing, elemsY);\n  }\n  let maxX = 33;\n  let maxY = 80;\n  // Draw the Maximum value in the array.\n  textSize(32);\n  text(max(numArray), maxX, maxY);\n}\n</code></div>"],"alt":"Small text at top reads: Array Elements 2 1 5 4 8 9. Large text at center: 9","class":"p5","module":"Math","submodule":"Calculation","overloads":[{"line":463,"params":[{"name":"n0","description":"<p>Number to compare</p>\n","type":"Number"},{"name":"n1","description":"<p>Number to compare</p>\n","type":"Number"}],"return":{"description":"maximum Number","type":"Number"}},{"line":498,"params":[{"name":"nums","description":"<p>Numbers to compare</p>\n","type":"Number[]"}],"return":{"description":"","type":"Number"}}]},{"file":"src/math/calculation.js","line":512,"description":"<p>Determines the smallest value in a sequence of numbers, and then returns\nthat value. <a href=\"#/p5/min\">min()</a> accepts any number of Number parameters, or an Array\nof any length.</p>\n","itemtype":"method","name":"min","return":{"description":"minimum Number","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  // Change the elements in the array and run the sketch\n  // to show how min() works!\n  let numArray = [2, 1, 5, 4, 8, 9];\n  fill(0);\n  noStroke();\n  text('Array Elements', 0, 10);\n  // Draw all numbers in the array\n  let spacing = 15;\n  let elemsY = 25;\n  for (let i = 0; i < numArray.length; i++) {\n    text(numArray[i], i * spacing, elemsY);\n  }\n  let maxX = 33;\n  let maxY = 80;\n  // Draw the Minimum value in the array.\n  textSize(32);\n  text(min(numArray), maxX, maxY);\n}\n</code></div>"],"alt":"Small text at top reads: Array Elements 2 1 5 4 8 9. Large text at center: 1","class":"p5","module":"Math","submodule":"Calculation","overloads":[{"line":512,"params":[{"name":"n0","description":"<p>Number to compare</p>\n","type":"Number"},{"name":"n1","description":"<p>Number to compare</p>\n","type":"Number"}],"return":{"description":"minimum Number","type":"Number"}},{"line":547,"params":[{"name":"nums","description":"<p>Numbers to compare</p>\n","type":"Number[]"}],"return":{"description":"","type":"Number"}}]},{"file":"src/math/calculation.js","line":561,"description":"<p>Normalizes a number from another range into a value between 0 and 1.\nIdentical to map(value, low, high, 0, 1).\nNumbers outside of the range are not clamped to 0 and 1, because\nout-of-range values are often intentional and useful. (See the example above.)</p>\n","itemtype":"method","name":"norm","params":[{"name":"value","description":"<p>incoming value to be normalized</p>\n","type":"Number"},{"name":"start","description":"<p>lower bound of the value's current range</p>\n","type":"Number"},{"name":"stop","description":"<p>upper bound of the value's current range</p>\n","type":"Number"}],"return":{"description":"normalized number","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  let currentNum = mouseX;\n  let lowerBound = 0;\n  let upperBound = width; //100;\n  let normalized = norm(currentNum, lowerBound, upperBound);\n  let lineY = 70;\n  stroke(3);\n  line(0, lineY, width, lineY);\n  //Draw an ellipse mapped to the non-normalized value.\n  noStroke();\n  fill(50);\n  let s = 7; // ellipse size\n  ellipse(currentNum, lineY, s, s);\n\n  // Draw the guide\n  let guideY = lineY + 15;\n  text('0', 0, guideY);\n  textAlign(RIGHT);\n  text('100', width, guideY);\n\n  // Draw the normalized value\n  textAlign(LEFT);\n  fill(0);\n  textSize(32);\n  let normalY = 40;\n  let normalX = 20;\n  text(normalized, normalX, normalY);\n}\n</code></div>"],"alt":"ellipse moves with mouse. 0 shown left & 100 right and updating values center","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":613,"description":"<p>Facilitates exponential expressions. The <a href=\"#/p5/pow\">pow()</a> function is an efficient\nway of multiplying numbers by themselves (or their reciprocals) in large\nquantities. For example, pow(3, 5) is equivalent to the expression\n3 × 3 × 3 × 3 × 3 and pow(3, -5) is equivalent to 1 /\n3 × 3 × 3 × 3 × 3. Maps to\nMath.pow().</p>\n","itemtype":"method","name":"pow","params":[{"name":"n","description":"<p>base of the exponential expression</p>\n","type":"Number"},{"name":"e","description":"<p>power by which to raise the base</p>\n","type":"Number"}],"return":{"description":"n^e","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  //Exponentially increase the size of an ellipse.\n  let eSize = 3; // Original Size\n  let eLoc = 10; // Original Location\n\n  ellipse(eLoc, eLoc, eSize, eSize);\n\n  ellipse(eLoc * 2, eLoc * 2, pow(eSize, 2), pow(eSize, 2));\n\n  ellipse(eLoc * 4, eLoc * 4, pow(eSize, 3), pow(eSize, 3));\n\n  ellipse(eLoc * 8, eLoc * 8, pow(eSize, 4), pow(eSize, 4));\n}\n</code></div>"],"alt":"small to large ellipses radiating from top left of canvas","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":647,"description":"<p>Calculates the integer closest to the n parameter. For example,\nround(133.8) returns the value 134. Maps to Math.round().</p>\n","itemtype":"method","name":"round","params":[{"name":"n","description":"<p>number to round</p>\n","type":"Number"},{"name":"decimals","description":"<p>number of decimal places to round to, default is 0</p>\n","type":"Number","optional":true}],"return":{"description":"rounded number","type":"Integer"},"example":["\n<div><code>\nlet x = round(3.7);\ntext(x, width / 2, height / 2);\n</code></div>\n<div><code>\nlet x = round(12.782383, 2);\ntext(x, width / 2, height / 2);\n</code></div>\n<div><code>\nfunction draw() {\n  background(200);\n  //map, mouseX between 0 and 5.\n  let ax = map(mouseX, 0, 100, 0, 5);\n  let ay = 66;\n\n  // Round the mapped number.\n  let bx = round(map(mouseX, 0, 100, 0, 5));\n  let by = 33;\n\n  // Multiply the mapped numbers by 20 to more easily\n  // see the changes.\n  stroke(0);\n  fill(0);\n  line(0, ay, ax * 20, ay);\n  line(0, by, bx * 20, by);\n\n  // Reformat the float returned by map and draw it.\n  noStroke();\n  text(nfc(ax, 2), ax, ay - 5);\n  text(nfc(bx, 1), bx, by - 5);\n}\n</code></div>"],"alt":"\"3\" written in middle of canvas\n\"12.78\" written in middle of canvas\nhorizontal center line squared values displayed on top and regular on bottom.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":701,"description":"<p>Squares a number (multiplies a number by itself). The result is always a\npositive number, as multiplying two negative numbers always yields a\npositive result. For example, -1 * -1 = 1.</p>\n","itemtype":"method","name":"sq","params":[{"name":"n","description":"<p>number to square</p>\n","type":"Number"}],"return":{"description":"squared number","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  let eSize = 7;\n  let x1 = map(mouseX, 0, width, 0, 10);\n  let y1 = 80;\n  let x2 = sq(x1);\n  let y2 = 20;\n\n  // Draw the non-squared.\n  line(0, y1, width, y1);\n  ellipse(x1, y1, eSize, eSize);\n\n  // Draw the squared.\n  line(0, y2, width, y2);\n  ellipse(x2, y2, eSize, eSize);\n\n  // Draw dividing line.\n  stroke(100);\n  line(0, height / 2, width, height / 2);\n\n  // Draw text.\n  let spacing = 15;\n  noStroke();\n  fill(0);\n  text('x = ' + x1, 0, y1 + spacing);\n  text('sq(x) = ' + x2, 0, y2 + spacing);\n}\n</code></div>"],"alt":"horizontal center line squared values displayed on top and regular on bottom.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":745,"description":"<p>Calculates the square root of a number. The square root of a number is\nalways positive, even though there may be a valid negative root. The\nsquare root s of number a is such that s*s = a. It is the opposite of\nsquaring. Maps to Math.sqrt().</p>\n","itemtype":"method","name":"sqrt","params":[{"name":"n","description":"<p>non-negative number to square root</p>\n","type":"Number"}],"return":{"description":"square root of number","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  let eSize = 7;\n  let x1 = mouseX;\n  let y1 = 80;\n  let x2 = sqrt(x1);\n  let y2 = 20;\n\n  // Draw the non-squared.\n  line(0, y1, width, y1);\n  ellipse(x1, y1, eSize, eSize);\n\n  // Draw the squared.\n  line(0, y2, width, y2);\n  ellipse(x2, y2, eSize, eSize);\n\n  // Draw dividing line.\n  stroke(100);\n  line(0, height / 2, width, height / 2);\n\n  // Draw text.\n  noStroke();\n  fill(0);\n  let spacing = 15;\n  text('x = ' + x1, 0, y1 + spacing);\n  text('sqrt(x) = ' + x2, 0, y2 + spacing);\n}\n</code></div>"],"alt":"horizontal center line squareroot values displayed on top and regular on bottom.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":832,"description":"<p>Calculates the fractional part of a number.</p>\n","itemtype":"method","name":"fract","params":[{"name":"num","description":"<p>Number whose fractional part needs to be found out</p>\n","type":"Number"}],"return":{"description":"fractional part of x, i.e, {x}","type":"Number"},"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(windowWidth, windowHeight);\n  fill(0);\n  text(7345.73472742, 0, 50);\n  text(fract(7345.73472742), 0, 100);\n  text(1.4215e-15, 150, 50);\n  text(fract(1.4215e-15), 150, 100);\n}\n</code>\n</div>"],"alt":"2 rows of numbers, the first row having 8 numbers and the second having the fractional parts of those numbers.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/math.js","line":10,"description":"<p>Creates a new <a href=\"#/p5.Vector\">p5.Vector</a> (the datatype for storing vectors). This provides a\ntwo or three dimensional vector, specifically a Euclidean (also known as\ngeometric) vector. A vector is an entity that has both magnitude and\ndirection.</p>\n","itemtype":"method","name":"createVector","params":[{"name":"x","description":"<p>x component of the vector</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>z component of the vector</p>\n","type":"Number","optional":true}],"return":{"description":"","type":"p5.Vector"},"example":["\n<div><code>\nlet v1;\nfunction setup() {\n  createCanvas(100, 100);\n  stroke(255, 0, 255);\n  v1 = createVector(width / 2, height / 2);\n}\n\nfunction draw() {\n  background(255);\n  line(v1.x, v1.y, mouseX, mouseY);\n}\n</code></div>"],"alt":"draws a line from center of canvas to mouse pointer position.","class":"p5","module":"Math","submodule":"Vector"},{"file":"src/math/noise.js","line":36,"description":"<p>Returns the Perlin noise value at specified coordinates. Perlin noise is\na random sequence generator producing a more naturally ordered, harmonic\nsuccession of numbers compared to the standard <b>random()</b> function.\nIt was invented by Ken Perlin in the 1980s and been used since in\ngraphical applications to produce procedural textures, natural motion,\nshapes, terrains etc.<br /><br /> The main difference to the\n<b>random()</b> function is that Perlin noise is defined in an infinite\nn-dimensional space where each pair of coordinates corresponds to a\nfixed semi-random value (fixed only for the lifespan of the program; see\nthe <a href=\"#/p5/noiseSeed\">noiseSeed()</a> function). p5.js can compute 1D, 2D and 3D noise,\ndepending on the number of coordinates given. The resulting value will\nalways be between 0.0 and 1.0. The noise value can be animated by moving\nthrough the noise space as demonstrated in the example above. The 2nd\nand 3rd dimension can also be interpreted as time.<br /><br />The actual\nnoise is structured similar to an audio signal, in respect to the\nfunction's use of frequencies. Similar to the concept of harmonics in\nphysics, perlin noise is computed over several octaves which are added\ntogether for the final result. <br /><br />Another way to adjust the\ncharacter of the resulting sequence is the scale of the input\ncoordinates. As the function works within an infinite space the value of\nthe coordinates doesn't matter as such, only the distance between\nsuccessive coordinates does (eg. when using <b>noise()</b> within a\nloop). As a general rule the smaller the difference between coordinates,\nthe smoother the resulting noise sequence will be. Steps of 0.005-0.03\nwork best for most applications, but this will differ depending on use.</p>\n","itemtype":"method","name":"noise","params":[{"name":"x","description":"<p>x-coordinate in noise space</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate in noise space</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>z-coordinate in noise space</p>\n","type":"Number","optional":true}],"return":{"description":"Perlin noise value (between 0 and 1) at specified\n                     coordinates","type":"Number"},"example":["\n<div>\n<code>\nlet xoff = 0.0;\n\nfunction draw() {\n  background(204);\n  xoff = xoff + 0.01;\n  let n = noise(xoff) * width;\n  line(n, 0, n, height);\n}\n</code>\n</div>\n<div>\n<code>let noiseScale=0.02;\n\nfunction draw() {\n  background(0);\n  for (let x=0; x < width; x++) {\n    let noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);\n    stroke(noiseVal*255);\n    line(x, mouseY+noiseVal*80, x, height);\n  }\n}\n</code>\n</div>"],"alt":"vertical line moves left to right with updating noise values.\nhorizontal wave pattern effected by mouse x-position & updating noise values.","class":"p5","module":"Math","submodule":"Noise"},{"file":"src/math/noise.js","line":178,"description":"<p>Adjusts the character and level of detail produced by the Perlin noise\n function. Similar to harmonics in physics, noise is computed over\n several octaves. Lower octaves contribute more to the output signal and\n as such define the overall intensity of the noise, whereas higher octaves\n create finer grained details in the noise sequence.\nBy default, noise is computed over 4 octaves with each octave contributing\n exactly half than its predecessor, starting at 50% strength for the 1st\n octave. This falloff amount can be changed by adding an additional function\n parameter. Eg. a falloff factor of 0.75 means each octave will now have\n 75% impact (25% less) of the previous lower octave. Any value between\n 0.0 and 1.0 is valid, however note that values greater than 0.5 might\n result in greater than 1.0 values returned by <b>noise()</b>.\nBy changing these parameters, the signal created by the <b>noise()</b>\n function can be adapted to fit very specific needs and characteristics.</p>\n","itemtype":"method","name":"noiseDetail","params":[{"name":"lod","description":"<p>number of octaves to be used by the noise</p>\n","type":"Number"},{"name":"falloff","description":"<p>falloff factor for each octave</p>\n","type":"Number"}],"example":["\n <div>\n <code>\n let noiseVal;\n let noiseScale = 0.02;\nfunction setup() {\n   createCanvas(100, 100);\n }\nfunction draw() {\n   background(0);\n   for (let y = 0; y < height; y++) {\n     for (let x = 0; x < width / 2; x++) {\n       noiseDetail(2, 0.2);\n       noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);\n       stroke(noiseVal * 255);\n       point(x, y);\n       noiseDetail(8, 0.65);\n       noiseVal = noise(\n         (mouseX + x + width / 2) * noiseScale,\n         (mouseY + y) * noiseScale\n       );\n       stroke(noiseVal * 255);\n       point(x + width / 2, y);\n     }\n   }\n }\n </code>\n </div>"],"alt":"2 vertical grey smokey patterns affected my mouse x-position and noise.","class":"p5","module":"Math","submodule":"Noise"},{"file":"src/math/noise.js","line":243,"description":"<p>Sets the seed value for <b>noise()</b>. By default, <b>noise()</b>\nproduces different results each time the program is run. Set the\n<b>value</b> parameter to a constant to return the same pseudo-random\nnumbers each time the software is run.</p>\n","itemtype":"method","name":"noiseSeed","params":[{"name":"seed","description":"<p>the seed value</p>\n","type":"Number"}],"example":["\n<div>\n<code>let xoff = 0.0;\n\nfunction setup() {\n  noiseSeed(99);\n  stroke(0, 10);\n}\n\nfunction draw() {\n  xoff = xoff + .01;\n  let n = noise(xoff) * width;\n  line(n, 0, n, height);\n}\n</code>\n</div>"],"alt":"vertical grey lines drawing in pattern affected by noise.","class":"p5","module":"Math","submodule":"Noise"},{"file":"src/math/p5.Vector.js","line":65,"description":"<p>The x component of the vector</p>\n","itemtype":"property","name":"x","type":"Number","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":70,"description":"<p>The y component of the vector</p>\n","itemtype":"property","name":"y","type":"Number","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":75,"description":"<p>The z component of the vector</p>\n","itemtype":"property","name":"z","type":"Number","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":82,"description":"<p>Returns a string representation of a vector v by calling String(v)\nor v.toString(). This method is useful for logging vectors in the\nconsole.</p>\n","itemtype":"method","name":"toString","return":{"description":"","type":"String"},"example":["\n<div class = \"norender\">\n<code>\nfunction setup() {\n  let v = createVector(20, 30);\n  print(String(v)); // prints \"p5.Vector Object : [20, 30, 0]\"\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'black');\n\n  noStroke();\n  text(v1.toString(), 10, 25, 90, 75);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":132,"description":"<p>Sets the x, y, and z component of the vector using two or three separate\nvariables, the data from a <a href=\"#/p5.Vector\">p5.Vector</a>, or the values from a float array.</p>\n","itemtype":"method","name":"set","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nfunction setup() {\n  let v = createVector(1, 2, 3);\n  v.set(4, 5, 6); // Sets vector to [4, 5, 6]\n\n  let v1 = createVector(0, 0, 0);\n  let arr = [1, 2, 3];\n  v1.set(arr); // Sets vector to [1, 2, 3]\n}\n</code>\n</div>\n\n<div>\n<code>\nlet v0, v1;\nfunction setup() {\n  createCanvas(100, 100);\n\n  v0 = createVector(0, 0);\n  v1 = createVector(50, 50);\n}\n\nfunction draw() {\n  background(240);\n\n  drawArrow(v0, v1, 'black');\n  v1.set(v1.x + random(-1, 1), v1.y + random(-1, 1));\n\n  noStroke();\n  text('x: ' + round(v1.x) + ' y: ' + round(v1.y), 20, 90);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":132,"params":[{"name":"x","description":"<p>the x component of the vector</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>the y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>the z component of the vector</p>\n","type":"Number","optional":true}],"chainable":1},{"line":191,"params":[{"name":"value","description":"<p>the vector to set</p>\n","type":"p5.Vector|Number[]"}],"chainable":1}]},{"file":"src/math/p5.Vector.js","line":215,"description":"<p>Gets a copy of the vector, returns a <a href=\"#/p5.Vector\">p5.Vector</a> object.</p>\n","itemtype":"method","name":"copy","return":{"description":"the copy of the <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 2, 3);\nlet v2 = v1.copy();\nprint(v1.x === v2.x && v1.y === v2.y && v1.z === v2.z);\n// Prints \"true\"\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":238,"description":"<p>Adds x, y, and z components to a vector, adds one vector to another, or\nadds two independent vectors together. The version of the method that adds\ntwo vectors together is a static method and returns a <a href=\"#/p5.Vector\">p5.Vector</a>, the others\nacts directly on the vector. Additionally, you may provide arguments to this function as an array.\nSee the examples for more context.</p>\n","itemtype":"method","name":"add","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(1, 2, 3);\nv.add(4, 5, 6);\n// v's components are set to [5, 7, 9]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v = createVector(1, 2, 3);\n// Provide arguments as an array\nlet arr = [4, 5, 6];\nv.add(arr);\n// v's components are set to [5, 7, 9]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(1, 2, 3);\nlet v2 = createVector(2, 3, 4);\n\nlet v3 = p5.Vector.add(v1, v2);\n// v3 has components [3, 5, 7]\nprint(v3);\n</code>\n</div>\n\n<div>\n<code>\n// red vector + blue vector = purple vector\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(-30, 20);\n  drawArrow(v1, v2, 'blue');\n\n  let v3 = p5.Vector.add(v1, v2);\n  drawArrow(v0, v3, 'purple');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":238,"params":[{"name":"x","description":"<p>the x component of the vector to be added</p>\n","type":"Number"},{"name":"y","description":"<p>the y component of the vector to be added</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>the z component of the vector to be added</p>\n","type":"Number","optional":true}],"chainable":1},{"line":315,"params":[{"name":"value","description":"<p>the vector to add</p>\n","type":"p5.Vector|Number[]"}],"chainable":1},{"line":1988,"params":[{"name":"v1","description":"<p>a <a href=\"#/p5.Vector\">p5.Vector</a> to add</p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>a <a href=\"#/p5.Vector\">p5.Vector</a> to add</p>\n","type":"p5.Vector"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"the resulting <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":362,"description":"<p>Gives remainder of a vector when it is divided by another vector.\nSee examples for more context.</p>\n","itemtype":"method","name":"rem","chainable":1,"example":["\n<div class='norender'>\n<code>\nlet v = createVector(3, 4, 5);\nv.rem(2, 3, 4);\n// v's components are set to [1, 1, 1]\n</code>\n</div>\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(3, 4, 5);\nlet v2 = createVector(2, 3, 4);\n\nlet v3 = p5.Vector.rem(v1, v2);\n// v3 has components [1, 1, 1]\nprint(v3);\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":362,"params":[{"name":"x","description":"<p>the x component of divisor vector</p>\n","type":"Number"},{"name":"y","description":"<p>the y component of divisor vector</p>\n","type":"Number"},{"name":"z","description":"<p>the z component of divisor vector</p>\n","type":"Number"}],"chainable":1},{"line":391,"params":[{"name":"value","description":"<p>divisor vector</p>\n","type":"p5.Vector | Number[]"}],"chainable":1},{"line":2014,"params":[{"name":"v1","description":"<p>dividend <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>divisor <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"static":1},{"line":2020,"params":[{"name":"v1","description":"","type":"p5.Vector"},{"name":"v2","description":"","type":"p5.Vector"}],"static":1,"return":{"description":"the resulting <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":446,"description":"<p>Subtracts x, y, and z components from a vector, subtracts one vector from\nanother, or subtracts two independent vectors. The version of the method\nthat subtracts two vectors is a static method and returns a <a href=\"#/p5.Vector\">p5.Vector</a>, the\nother acts directly on the vector. Additionally, you may provide arguments to this function as an array.\nSee the examples for more context.</p>\n","itemtype":"method","name":"sub","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(4, 5, 6);\nv.sub(1, 1, 1);\n// v's components are set to [3, 4, 5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v = createVector(4, 5, 6);\n// Provide arguments as an array\nlet arr = [1, 1, 1];\nv.sub(arr);\n// v's components are set to [3, 4, 5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(2, 3, 4);\nlet v2 = createVector(1, 2, 3);\n\nlet v3 = p5.Vector.sub(v1, v2);\n// v3 has components [1, 1, 1]\nprint(v3);\n</code>\n</div>\n\n<div>\n<code>\n// red vector - blue vector = purple vector\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(70, 50);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(mouseX, mouseY);\n  drawArrow(v0, v2, 'blue');\n\n  let v3 = p5.Vector.sub(v1, v2);\n  drawArrow(v2, v3, 'purple');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":446,"params":[{"name":"x","description":"<p>the x component of the vector to subtract</p>\n","type":"Number"},{"name":"y","description":"<p>the y component of the vector to subtract</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>the z component of the vector to subtract</p>\n","type":"Number","optional":true}],"chainable":1},{"line":523,"params":[{"name":"value","description":"<p>the vector to subtract</p>\n","type":"p5.Vector|Number[]"}],"chainable":1},{"line":2039,"params":[{"name":"v1","description":"<p>a <a href=\"#/p5.Vector\">p5.Vector</a> to subtract from</p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>a <a href=\"#/p5.Vector\">p5.Vector</a> to subtract</p>\n","type":"p5.Vector"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"the resulting <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":547,"description":"<p>Multiplies the vector by a scalar, multiplies the x, y, and z components from a vector, or multiplies\nthe x, y, and z components of two independent vectors. When multiplying a vector by a scalar, the x, y,\nand z components of the vector are all multiplied by the scalar. When multiplying a vector by a vector,\nthe x, y, z components of both vectors are multiplied by each other\n(for example, with two vectors a and b: a.x * b.x, a.y * b.y, a.z * b.z). The static version of this method\ncreates a new <a href=\"#/p5.Vector\">p5.Vector</a> while the non static version acts on the vector\ndirectly. Additionally, you may provide arguments to this function as an array.\nSee the examples for more context.</p>\n","itemtype":"method","name":"mult","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(1, 2, 3);\nv.mult(2);\n// v's components are set to [2, 4, 6]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(1, 2, 3);\nlet v1 = createVector(2, 3, 4);\nv0.mult(v1); // v0's components are set to [2, 6, 12]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(1, 2, 3);\n// Provide arguments as an array\nlet arr = [2, 3, 4];\nv0.mult(arr); // v0's components are set to [2, 6, 12]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(1, 2, 3);\nlet v1 = createVector(2, 3, 4);\nconst result = p5.Vector.mult(v0, v1);\nprint(result); // result's components are set to [2, 6, 12]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(1, 2, 3);\nlet v2 = p5.Vector.mult(v1, 2);\n// v2 has components [2, 4, 6]\nprint(v2);\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(25, -25);\n  drawArrow(v0, v1, 'red');\n\n  let num = map(mouseX, 0, width, -2, 2, true);\n  let v2 = p5.Vector.mult(v1, num);\n  drawArrow(v0, v2, 'blue');\n\n  noStroke();\n  text('multiplied by ' + num.toFixed(2), 5, 90);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":547,"params":[{"name":"n","description":"<p>The number to multiply with the vector</p>\n","type":"Number"}],"chainable":1},{"line":640,"params":[{"name":"x","description":"<p>The number to multiply with the x component of the vector</p>\n","type":"Number"},{"name":"y","description":"<p>The number to multiply with the y component of the vector</p>\n","type":"Number"},{"name":"z","description":"<p>The number to multiply with the z component of the vector</p>\n","type":"Number","optional":true}],"chainable":1},{"line":648,"params":[{"name":"arr","description":"<p>The array to multiply with the components of the vector</p>\n","type":"Number[]"}],"chainable":1},{"line":654,"params":[{"name":"v","description":"<p>The vector to multiply with the components of the original vector</p>\n","type":"p5.Vector"}],"chainable":1},{"line":2068,"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 <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}},{"line":2077,"params":[{"name":"v","description":"","type":"p5.Vector"},{"name":"n","description":"","type":"Number"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1},{"line":2085,"params":[{"name":"v0","description":"","type":"p5.Vector"},{"name":"v1","description":"","type":"p5.Vector"},{"name":"target","description":"","type":"p5.Vector","optional":true}],"static":1},{"line":2093,"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":739,"description":"<p>Divides the vector by a scalar, divides a vector by the x, y, and z arguments, or divides the x, y, and\nz components of two vectors against each other. When dividing a vector by a scalar, the x, y,\nand z components of the vector are all divided by the scalar. When dividing a vector by a vector,\nthe x, y, z components of the source vector are treated as the dividend, and the x, y, z components\nof the argument is treated as the divisor (for example with two vectors a and b: a.x / b.x, a.y / b.y, a.z / b.z).\nThe static version of this method creates a\nnew <a href=\"#/p5.Vector\">p5.Vector</a> while the non static version acts on the vector directly.\nAdditionally, you may provide arguments to this function as an array.\nSee the examples for more context.</p>\n","itemtype":"method","name":"div","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(6, 4, 2);\nv.div(2); //v's components are set to [3, 2, 1]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(9, 4, 2);\nlet v1 = createVector(3, 2, 4);\nv0.div(v1); // v0's components are set to [3, 2, 0.5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(9, 4, 2);\n// Provide arguments as an array\nlet arr = [3, 2, 4];\nv0.div(arr); // v0's components are set to [3, 2, 0.5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(9, 4, 2);\nlet v1 = createVector(3, 2, 4);\nlet result = p5.Vector.div(v0, v1);\nprint(result); // result's components are set to [3, 2, 0.5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(6, 4, 2);\nlet v2 = p5.Vector.div(v1, 2);\n// v2 has components [3, 2, 1]\nprint(v2);\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 100);\n  let v1 = createVector(50, -50);\n  drawArrow(v0, v1, 'red');\n\n  let num = map(mouseX, 0, width, 10, 0.5, true);\n  let v2 = p5.Vector.div(v1, num);\n  drawArrow(v0, v2, 'blue');\n\n  noStroke();\n  text('divided by ' + num.toFixed(2), 10, 90);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":739,"params":[{"name":"n","description":"<p>The number to divide the vector by</p>\n","type":"Number"}],"chainable":1},{"line":832,"params":[{"name":"x","description":"<p>The number to divide with the x component of the vector</p>\n","type":"Number"},{"name":"y","description":"<p>The number to divide with the y component of the vector</p>\n","type":"Number"},{"name":"z","description":"<p>The number to divide with the z component of the vector</p>\n","type":"Number","optional":true}],"chainable":1},{"line":840,"params":[{"name":"arr","description":"<p>The array to divide the components of the vector by</p>\n","type":"Number[]"}],"chainable":1},{"line":846,"params":[{"name":"v","description":"<p>The vector to divide the components of the original vector by</p>\n","type":"p5.Vector"}],"chainable":1},{"line":2120,"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 <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}},{"line":2129,"params":[{"name":"v","description":"","type":"p5.Vector"},{"name":"n","description":"","type":"Number"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1},{"line":2137,"params":[{"name":"v0","description":"","type":"p5.Vector"},{"name":"v1","description":"","type":"p5.Vector"},{"name":"target","description":"","type":"p5.Vector","optional":true}],"static":1},{"line":2145,"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":944,"description":"<p>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).)</p>\n","itemtype":"method","name":"mag","return":{"description":"magnitude of the vector","type":"Number"},"example":["\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'black');\n\n  noStroke();\n  text('vector length: ' + v1.mag().toFixed(2), 10, 70, 90, 30);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>\n<div class=\"norender\">\n<code>\nlet v = createVector(20.0, 30.0, 40.0);\nlet m = v.mag();\nprint(m); // Prints \"53.85164807134504\"\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":944,"params":[],"return":{"description":"magnitude of the vector","type":"Number"}},{"line":2241,"params":[{"name":"vecT","description":"<p>the vector to return the magnitude of</p>\n","type":"p5.Vector"}],"static":1,"return":{"description":"the magnitude of vecT","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":992,"description":"<p>Calculates the squared magnitude of the vector and returns the result\nas a float (this is simply the equation <em>(x*x + y*y + z*z)</em>.)\nFaster if the real length is not required in the\ncase of comparing vectors, etc.</p>\n","itemtype":"method","name":"magSq","return":{"description":"squared magnitude of the vector","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(6, 4, 2);\nprint(v1.magSq()); // Prints \"56\"\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'black');\n\n  noStroke();\n  text('vector length squared: ' + v1.magSq().toFixed(2), 10, 45, 90, 55);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1046,"description":"<p>Calculates the dot product of two vectors. The version of the method\nthat computes the dot product of two independent vectors is a static\nmethod. See the examples for more context.</p>\n","itemtype":"method","name":"dot","return":{"description":"the dot product","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 2, 3);\nlet v2 = createVector(2, 3, 4);\n\nprint(v1.dot(v2)); // Prints \"20\"\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n//Static method\nlet v1 = createVector(1, 2, 3);\nlet v2 = createVector(3, 2, 1);\nprint(p5.Vector.dot(v1, v2)); // Prints \"10\"\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1046,"params":[{"name":"x","description":"<p>x component of the vector</p>\n","type":"Number"},{"name":"y","description":"<p>y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>z component of the vector</p>\n","type":"Number","optional":true}],"return":{"description":"the dot product","type":"Number"}},{"line":1076,"params":[{"name":"value","description":"<p>value component of the vector or a <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"return":{"description":"","type":"Number"}},{"line":2172,"params":[{"name":"v1","description":"<p>the first <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>the second <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"static":1,"return":{"description":"the dot product","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":1088,"description":"<p>Calculates and returns a vector composed of the cross product between\ntwo vectors. Both the static and non static methods return a new <a href=\"#/p5.Vector\">p5.Vector</a>.\nSee the examples for more context.</p>\n","itemtype":"method","name":"cross","return":{"description":"<a href=\"#/p5.Vector\">p5.Vector</a> composed of cross product","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 2, 3);\nlet v2 = createVector(1, 2, 3);\n\nlet v = v1.cross(v2); // v's components are [0, 0, 0]\nprint(v);\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(1, 0, 0);\nlet v2 = createVector(0, 1, 0);\n\nlet crossProduct = p5.Vector.cross(v1, v2);\n// crossProduct has components [0, 0, 1]\nprint(crossProduct);\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1088,"params":[{"name":"v","description":"<p><a href=\"#/p5.Vector\">p5.Vector</a> to be crossed</p>\n","type":"p5.Vector"}],"return":{"description":"<a href=\"#/p5.Vector\">p5.Vector</a> composed of cross product","type":"p5.Vector"}},{"line":2186,"params":[{"name":"v1","description":"<p>the first <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>the second <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"static":1,"return":{"description":"the cross product","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":1130,"description":"<p>Calculates the Euclidean distance between two points (considering a\npoint as a vector object).</p>\n","itemtype":"method","name":"dist","return":{"description":"the distance","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 0, 0);\nlet v2 = createVector(0, 1, 0);\n\nlet distance = v1.dist(v2); // distance is 1.4142...\nprint(distance);\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(1, 0, 0);\nlet v2 = createVector(0, 1, 0);\n\nlet distance = p5.Vector.dist(v1, v2);\n// distance is 1.4142...\nprint(distance);\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n\n  let v1 = createVector(70, 50);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(mouseX, mouseY);\n  drawArrow(v0, v2, 'blue');\n\n  noStroke();\n  text('distance between vectors: ' + v2.dist(v1).toFixed(2), 5, 50, 95, 50);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1130,"params":[{"name":"v","description":"<p>the x, y, and z coordinates of a <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"return":{"description":"the distance","type":"Number"}},{"line":2201,"params":[{"name":"v1","description":"<p>the first <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>the second <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"static":1,"return":{"description":"the distance","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":1201,"description":"<p>Normalize the vector to length 1 (make it a unit vector).</p>\n","itemtype":"method","name":"normalize","return":{"description":"normalized <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(10, 20, 2);\n// v has components [10.0, 20.0, 2.0]\nv.normalize();\n// v's components are set to\n// [0.4454354, 0.8908708, 0.089087084]\n</code>\n</div>\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(mouseX - 50, mouseY - 50);\n\n  drawArrow(v0, v1, 'red');\n  v1.normalize();\n  drawArrow(v0, v1.mult(35), 'blue');\n\n  noFill();\n  ellipse(50, 50, 35 * 2);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1257,"description":"<p>Limit the magnitude of this vector to the value used for the <b>max</b>\nparameter.</p>\n","itemtype":"method","name":"limit","params":[{"name":"max","description":"<p>the maximum magnitude for the vector</p>\n","type":"Number"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(10, 20, 2);\n// v has components [10.0, 20.0, 2.0]\nv.limit(5);\n// v's components are set to\n// [2.2271771, 4.4543543, 0.4454354]\n</code>\n</div>\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(mouseX - 50, mouseY - 50);\n\n  drawArrow(v0, v1, 'red');\n  drawArrow(v0, v1.limit(35), 'blue');\n\n  noFill();\n  ellipse(50, 50, 35 * 2);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1315,"description":"<p>Set the magnitude of this vector to the value used for the <b>len</b>\nparameter.</p>\n","itemtype":"method","name":"setMag","params":[{"name":"len","description":"<p>the new length for this vector</p>\n","type":"Number"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(10, 20, 2);\n// v has components [10.0, 20.0, 2.0]\nv.setMag(10);\n// v's components are set to [6.0, 8.0, 0.0]\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(50, 50);\n\n  drawArrow(v0, v1, 'red');\n\n  let length = map(mouseX, 0, width, 0, 141, true);\n  v1.setMag(length);\n  drawArrow(v0, v1, 'blue');\n\n  noStroke();\n  text('magnitude set to: ' + length.toFixed(2), 10, 70, 90, 30);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1371,"description":"<p>Calculate the angle of rotation for this vector(only 2D vectors).\np5.Vectors created using <a src=\"#/p5/createVector\">createVector()</a>\nwill take the current <a = src=\"#/p5/angleMode\">angleMode</a> into consideration, and give the angle\nin radians or degree accordingly.</p>\n","itemtype":"method","name":"heading","return":{"description":"the angle of rotation","type":"Number"},"example":["\n<div class = \"norender\">\n<code>\nfunction setup() {\n  let v1 = createVector(30, 50);\n  print(v1.heading()); // 1.0303768265243125\n\n  v1 = createVector(40, 50);\n  print(v1.heading()); // 0.8960553845713439\n\n  v1 = createVector(30, 70);\n  print(v1.heading()); // 1.1659045405098132\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(mouseX - 50, mouseY - 50);\n\n  drawArrow(v0, v1, 'black');\n\n  let myHeading = v1.heading();\n  noStroke();\n  text(\n    'vector heading: ' +\n      myHeading.toFixed(2) +\n      ' radians or ' +\n      degrees(myHeading).toFixed(2) +\n      ' degrees',\n    10,\n    50,\n    90,\n    50\n  );\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1443,"description":"<p>Rotate the vector by an angle (only 2D vectors), magnitude remains the\nsame</p>\n","itemtype":"method","name":"rotate","params":[{"name":"angle","description":"<p>the angle of rotation</p>\n","type":"Number"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(10.0, 20.0);\n// v has components [10.0, 20.0, 0.0]\nv.rotate(HALF_PI);\n// v's components are set to [-20.0, 9.999999, 0.0]\n</code>\n</div>\n\n<div>\n<code>\nlet angle = 0;\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(50, 0);\n\n  drawArrow(v0, v1.rotate(angle), 'black');\n  angle += 0.01;\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1499,"description":"<p>Calculates and returns the angle (in radians) between two vectors.</p>\n","itemtype":"method","name":"angleBetween","params":[{"name":"value","description":"<p>the x, y, and z components of a <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"return":{"description":"the angle between (in radians)","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 0, 0);\nlet v2 = createVector(0, 1, 0);\n\nlet angle = v1.angleBetween(v2);\n// angle is PI/2\nprint(angle);\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n  let v0 = createVector(50, 50);\n\n  let v1 = createVector(50, 0);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(mouseX - 50, mouseY - 50);\n  drawArrow(v0, v2, 'blue');\n\n  let angleBetween = v1.angleBetween(v2);\n  noStroke();\n  text(\n    'angle between: ' +\n      angleBetween.toFixed(2) +\n      ' radians or ' +\n      degrees(angleBetween).toFixed(2) +\n      ' degrees',\n    10,\n    50,\n    90,\n    50\n  );\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1576,"description":"<p>Linear interpolate the vector to another vector</p>\n","itemtype":"method","name":"lerp","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(1, 1, 0);\n\nv.lerp(3, 3, 0, 0.5); // v now has components [2,2,0]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v1 = createVector(0, 0, 0);\nlet v2 = createVector(100, 100, 0);\n\nlet v3 = p5.Vector.lerp(v1, v2, 0.5);\n// v3 has components [50,50,0]\nprint(v3);\n</code>\n</div>\n\n<div>\n<code>\nlet step = 0.01;\nlet amount = 0;\n\nfunction draw() {\n  background(240);\n  let v0 = createVector(0, 0);\n\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(90, 90);\n  drawArrow(v0, v2, 'blue');\n\n  if (amount > 1 || amount < 0) {\n    step *= -1;\n  }\n  amount += step;\n  let v3 = p5.Vector.lerp(v1, v2, amount);\n\n  drawArrow(v0, v3, 'purple');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1576,"params":[{"name":"x","description":"<p>the x component</p>\n","type":"Number"},{"name":"y","description":"<p>the y component</p>\n","type":"Number"},{"name":"z","description":"<p>the z component</p>\n","type":"Number"},{"name":"amt","description":"<p>the amount of interpolation; some value between 0.0\n                        (old vector) and 1.0 (new vector). 0.9 is very near\n                        the new vector. 0.5 is halfway in between.</p>\n","type":"Number"}],"chainable":1},{"line":1649,"params":[{"name":"v","description":"<p>the <a href=\"#/p5.Vector\">p5.Vector</a> to lerp to</p>\n","type":"p5.Vector"},{"name":"amt","description":"","type":"Number"}],"chainable":1},{"line":2216,"params":[{"name":"v1","description":"","type":"p5.Vector"},{"name":"v2","description":"","type":"p5.Vector"},{"name":"amt","description":"","type":"Number"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"the lerped value","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":1665,"description":"<p>Reflect the incoming vector about a normal to a line in 2D, or about a normal to a plane in 3D\nThis method acts on the vector directly</p>\n","itemtype":"method","name":"reflect","params":[{"name":"surfaceNormal","description":"<p>the <a href=\"#/p5.Vector\">p5.Vector</a> to reflect about, will be normalized by this method</p>\n","type":"p5.Vector"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(4, 6); // incoming vector, this example vector is heading to the right and downward\nlet n = createVector(0, -1); // surface normal to a plane (this example normal points directly upwards)\nv.reflect(n); // v is reflected about the surface normal n.  v's components are now set to [4, -6]\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'red');\n\n  let n = createVector(0, -30);\n  drawArrow(v1, n, 'blue');\n\n  let r = v1.copy();\n  r.reflect(n);\n  drawArrow(v1, r, 'purple');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1720,"description":"<p>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 <b>p5.Vector.<a href=\"#/p5.Vector/copy\">copy()</a></b> method to copy into your own\narray.</p>\n","itemtype":"method","name":"array","return":{"description":"an Array with the 3 values","type":"Number[]"},"example":["\n<div class = \"norender\">\n<code>\nfunction setup() {\n  let v = createVector(20, 30);\n  print(v.array()); // Prints : Array [20, 30, 0]\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v = createVector(10.0, 20.0, 30.0);\nlet f = v.array();\nprint(f[0]); // Prints \"10.0\"\nprint(f[1]); // Prints \"20.0\"\nprint(f[2]); // Prints \"30.0\"\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1752,"description":"<p>Equality check against a <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","itemtype":"method","name":"equals","return":{"description":"whether the vectors are equals","type":"Boolean"},"example":["\n<div class = \"norender\">\n<code>\nlet v1 = createVector(5, 10, 20);\nlet v2 = createVector(5, 10, 20);\nlet v3 = createVector(13, 10, 19);\n\nprint(v1.equals(v2.x, v2.y, v2.z)); // true\nprint(v1.equals(v3.x, v3.y, v3.z)); // false\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v1 = createVector(10.0, 20.0, 30.0);\nlet v2 = createVector(10.0, 20.0, 30.0);\nlet v3 = createVector(0.0, 0.0, 0.0);\nprint(v1.equals(v2)); // true\nprint(v1.equals(v3)); // false\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1752,"params":[{"name":"x","description":"<p>the x component of the vector</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>the y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>the z component of the vector</p>\n","type":"Number","optional":true}],"return":{"description":"whether the vectors are equals","type":"Boolean"}},{"line":1782,"params":[{"name":"value","description":"<p>the vector to compare</p>\n","type":"p5.Vector|Array"}],"return":{"description":"","type":"Boolean"}}]},{"file":"src/math/p5.Vector.js","line":1807,"description":"<p>Make a new 2D vector from an angle</p>\n","itemtype":"method","name":"fromAngle","static":1,"params":[{"name":"angle","description":"<p>the desired angle, in radians (unaffected by <a href=\"#/p5/angleMode\">angleMode</a>)</p>\n","type":"Number"},{"name":"length","description":"<p>the length of the new vector (defaults to 1)</p>\n","type":"Number","optional":true}],"return":{"description":"the new <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div>\n<code>\nfunction draw() {\n  background(200);\n\n  // Create a variable, proportional to the mouseX,\n  // varying from 0-360, to represent an angle in degrees.\n  let myDegrees = map(mouseX, 0, width, 0, 360);\n\n  // Display that variable in an onscreen text.\n  // (Note the nfc() function to truncate additional decimal places,\n  // and the \"\\xB0\" character for the degree symbol.)\n  let readout = 'angle = ' + nfc(myDegrees, 1) + '\\xB0';\n  noStroke();\n  fill(0);\n  text(readout, 5, 15);\n\n  // Create a p5.Vector using the fromAngle function,\n  // and extract its x and y components.\n  let v = p5.Vector.fromAngle(radians(myDegrees), 30);\n  let vx = v.x;\n  let vy = v.y;\n\n  push();\n  translate(width / 2, height / 2);\n  noFill();\n  stroke(150);\n  line(0, 0, 30, 0);\n  stroke(0);\n  line(0, 0, vx, vy);\n  pop();\n}\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1858,"description":"<p>Make a new 3D vector from a pair of ISO spherical angles</p>\n","itemtype":"method","name":"fromAngles","static":1,"params":[{"name":"theta","description":"<p>the polar angle, in radians (zero is up)</p>\n","type":"Number"},{"name":"phi","description":"<p>the azimuthal angle, in radians\n                              (zero is out of the screen)</p>\n","type":"Number"},{"name":"length","description":"<p>the length of the new vector (defaults to 1)</p>\n","type":"Number","optional":true}],"return":{"description":"the new <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  fill(255);\n  noStroke();\n}\nfunction draw() {\n  background(255);\n\n  let t = millis() / 1000;\n\n  // add three point lights\n  pointLight(color('#f00'), p5.Vector.fromAngles(t * 1.0, t * 1.3, 100));\n  pointLight(color('#0f0'), p5.Vector.fromAngles(t * 1.1, t * 1.2, 100));\n  pointLight(color('#00f'), p5.Vector.fromAngles(t * 1.2, t * 1.1, 100));\n\n  sphere(35);\n}\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1907,"description":"<p>Make a new 2D unit vector from a random angle</p>\n","itemtype":"method","name":"random2D","static":1,"return":{"description":"the new <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v = p5.Vector.random2D();\n// May make v's attributes something like:\n// [0.61554617, -0.51195765, 0.0] or\n// [-0.4695841, -0.14366731, 0.0] or\n// [0.6091097, -0.22805278, 0.0]\nprint(v);\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  frameRate(1);\n}\n\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = p5.Vector.random2D();\n  drawArrow(v0, v1.mult(50), 'black');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1960,"description":"<p>Make a new random 3D unit vector.</p>\n","itemtype":"method","name":"random3D","static":1,"return":{"description":"the new <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v = p5.Vector.random3D();\n// May make v's attributes something like:\n// [0.61554617, -0.51195765, 0.599168] or\n// [-0.4695841, -0.14366731, -0.8711202] or\n// [0.6091097, -0.22805278, -0.7595902]\nprint(v);\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2064,"description":"<p>Multiplies a vector by a scalar and returns a new vector.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2116,"description":"<p>Divides a vector by a scalar and returns a new vector.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2169,"description":"<p>Calculates the dot product of two vectors.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2183,"description":"<p>Calculates the cross product of two vectors.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2197,"description":"<p>Calculates the Euclidean distance between two points (considering a\npoint as a vector object).</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2212,"description":"<p>Linear interpolate a vector to another vector and return the result as a\nnew vector.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/random.js","line":37,"description":"<p>Sets the seed value for <a href=\"#/p5/random\">random()</a>.</p>\n<p>By default, <a href=\"#/p5/random\">random()</a> produces different results each time the program\nis run. Set the seed parameter to a constant to return the same\npseudo-random numbers each time the software is run.</p>\n","itemtype":"method","name":"randomSeed","params":[{"name":"seed","description":"<p>the seed value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nrandomSeed(99);\nfor (let i = 0; i < 100; i++) {\n  let r = random(0, 255);\n  stroke(r);\n  line(i, 0, i, 100);\n}\n</code>\n</div>"],"alt":"many vertical lines drawn in white, black or grey.","class":"p5","module":"Math","submodule":"Random"},{"file":"src/math/random.js","line":66,"description":"<p>Return a random floating-point number.</p>\n<p>Takes either 0, 1 or 2 arguments.</p>\n<p>If no argument is given, returns a random number from 0\nup to (but not including) 1.</p>\n<p>If one argument is given and it is a number, returns a random number from 0\nup to (but not including) the number.</p>\n<p>If one argument is given and it is an array, returns a random element from\nthat array.</p>\n<p>If two arguments are given, returns a random number from the\nfirst argument up to (but not including) the second argument.</p>\n","itemtype":"method","name":"random","return":{"description":"the random number","type":"Number"},"example":["\n<div>\n<code>\nfor (let i = 0; i < 100; i++) {\n  let r = random(50);\n  stroke(r * 5);\n  line(50, i, 50 + r, i);\n}\n</code>\n</div>\n<div>\n<code>\nfor (let i = 0; i < 100; i++) {\n  let r = random(-50, 50);\n  line(50, i, 50 + r, i);\n}\n</code>\n</div>\n<div>\n<code>\n// Get a random element from an array using the random(Array) syntax\nlet words = ['apple', 'bear', 'cat', 'dog'];\nlet word = random(words); // select random word\ntext(word, 10, 50); // draw the word\n</code>\n</div>"],"alt":"100 horizontal lines from center canvas to right. size+fill change each time\n100 horizontal lines from center of canvas. height & side change each render\nword displayed at random. Either apple, bear, cat, or dog","class":"p5","module":"Math","submodule":"Random","overloads":[{"line":66,"params":[{"name":"min","description":"<p>the lower bound (inclusive)</p>\n","type":"Number","optional":true},{"name":"max","description":"<p>the upper bound (exclusive)</p>\n","type":"Number","optional":true}],"return":{"description":"the random number","type":"Number"}},{"line":119,"params":[{"name":"choices","description":"<p>the array to choose from</p>\n","type":"Array"}],"return":{"description":"the random element from the array","type":"*"}}]},{"file":"src/math/random.js","line":153,"description":"<p>Returns a random number fitting a Gaussian, or\n normal, distribution. There is theoretically no minimum or maximum\n value that <a href=\"#/p5/randomGaussian\">randomGaussian()</a> might return. Rather, there is\n just a very low probability that values far from the mean will be\n returned; and a higher probability that numbers near the mean will\n be returned.\nTakes either 0, 1 or 2 arguments.<br>\n If no args, returns a mean of 0 and standard deviation of 1.<br>\n If one arg, that arg is the mean (standard deviation is 1).<br>\n If two args, first is mean, second is standard deviation.</p>\n","itemtype":"method","name":"randomGaussian","params":[{"name":"mean","description":"<p>the mean</p>\n","type":"Number"},{"name":"sd","description":"<p>the standard deviation</p>\n","type":"Number"}],"return":{"description":"the random number","type":"Number"},"example":["\n <div>\n <code>\n for (let y = 0; y < 100; y++) {\n   let x = randomGaussian(50, 15);\n   line(50, y, x, y);\n }\n </code>\n </div>\n <div>\n <code>\n let distribution = new Array(360);\nfunction setup() {\n   createCanvas(100, 100);\n   for (let i = 0; i < distribution.length; i++) {\n     distribution[i] = floor(randomGaussian(0, 15));\n   }\n }\nfunction draw() {\n   background(204);\n  translate(width / 2, width / 2);\n  for (let i = 0; i < distribution.length; i++) {\n     rotate(TWO_PI / distribution.length);\n     stroke(0);\n     let dist = abs(distribution[i]);\n     line(0, 0, dist, 0);\n   }\n }\n </code>\n </div>"],"alt":"100 horizontal lines from center of canvas. height & side change each render\n black lines radiate from center of canvas. size determined each render","class":"p5","module":"Math","submodule":"Random"},{"file":"src/math/trigonometry.js","line":18,"description":"<p>The inverse of <a href=\"#/p5/cos\">cos()</a>, returns the arc cosine of a value.\nThis function expects the values in the range of -1 to 1 and values are returned in\nthe range 0 to PI (3.1415927) if the angleMode is RADIANS or 0 to 180 if the\nangle mode is DEGREES.</p>\n","itemtype":"method","name":"acos","params":[{"name":"value","description":"<p>the value whose arc cosine is to be returned</p>\n","type":"Number"}],"return":{"description":"the arc cosine of the given value","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet a = PI;\nlet c = cos(a);\nlet ac = acos(c);\n// Prints: \"3.1415927 : -1.0 : 3.1415927\"\nprint(a + ' : ' + c + ' : ' + ac);\n</code>\n</div>\n\n<div class= “norender\">\n<code>\nlet a = PI + PI / 4.0;\nlet c = cos(a);\nlet ac = acos(c);\n// Prints: \"3.926991 : -0.70710665 : 2.3561943\"\nprint(a + ' : ' + c + ' : ' + ac);\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":53,"description":"<p>The inverse of <a href=\"#/p5/sin\">sin()</a>, returns the arc sine of a value.\nThis function expects the values in the range of -1 to 1 and values are returned\nin the range -PI/2 to PI/2 if the angleMode is RADIANS or -90 to 90 if the angle\nmode is DEGREES.</p>\n","itemtype":"method","name":"asin","params":[{"name":"value","description":"<p>the value whose arc sine is to be returned</p>\n","type":"Number"}],"return":{"description":"the arc sine of the given value","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet a = PI / 3.0;\nlet s = sin(a);\nlet as = asin(s);\n// Prints: \"1.0471975 : 0.86602540 : 1.0471975\"\nprint(a + ' : ' + s + ' : ' + as);\n</code>\n</div>\n\n<div class= “norender\">\n<code>\nlet a = PI + PI / 3.0;\nlet s = sin(a);\nlet as = asin(s);\n// Prints: \"4.1887902 : -0.86602540 : -1.0471975\"\nprint(a + ' : ' + s + ' : ' + as);\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":88,"description":"<p>The inverse of <a href=\"#/p5/tan\">tan()</a>, returns the arc tangent of a value.\nThis function expects the values in the range of -Infinity to Infinity (exclusive) and\nvalues are returned in the range -PI/2 to PI/2 if the angleMode is RADIANS or\n-90 to 90 if the angle mode is DEGREES.</p>\n","itemtype":"method","name":"atan","params":[{"name":"value","description":"<p>the value whose arc tangent is to be returned</p>\n","type":"Number"}],"return":{"description":"the arc tangent of the given value","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet a = PI / 3.0;\nlet t = tan(a);\nlet at = atan(t);\n// Prints: \"1.0471975 : 1.7320508 : 1.0471975\"\nprint(a + ' : ' + t + ' : ' + at);\n</code>\n</div>\n\n<div class= “norender\">\n<code>\nlet a = PI + PI / 3.0;\nlet t = tan(a);\nlet at = atan(t);\n// Prints: \"4.1887902 : 1.7320508 : 1.0471975\"\nprint(a + ' : ' + t + ' : ' + at);\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":123,"description":"<p>Calculates the angle (in radians) from a specified point to the coordinate\norigin as measured from the positive x-axis. Values are returned as a\nfloat in the range from PI to -PI if the angleMode is RADIANS or 180 to\n-180 if the angleMode is DEGREES. The atan2<a href=\"#/p5/\">()</a> function is\nmost often used for orienting geometry to the position of the cursor.</p>\n<p>Note: The y-coordinate of the point is the first parameter, and the\nx-coordinate is the second parameter, due the the structure of calculating\nthe tangent.</p>\n","itemtype":"method","name":"atan2","params":[{"name":"y","description":"<p>y-coordinate of the point</p>\n","type":"Number"},{"name":"x","description":"<p>x-coordinate of the point</p>\n","type":"Number"}],"return":{"description":"the arc tangent of the given point","type":"Number"},"example":["\n<div>\n<code>\nfunction draw() {\n  background(204);\n  translate(width / 2, height / 2);\n  let a = atan2(mouseY - height / 2, mouseX - width / 2);\n  rotate(a);\n  rect(-30, -5, 60, 10);\n}\n</code>\n</div>"],"alt":"60 by 10 rect at center of canvas rotates with mouse movements","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":159,"description":"<p>Calculates the cosine of an angle. This function takes into account the\ncurrent <a href=\"#/p5/angleMode\">angleMode</a>. Values are returned in the range -1 to 1.</p>\n","itemtype":"method","name":"cos","params":[{"name":"angle","description":"<p>the angle</p>\n","type":"Number"}],"return":{"description":"the cosine of the angle","type":"Number"},"example":["\n<div>\n<code>\nlet a = 0.0;\nlet inc = TWO_PI / 25.0;\nfor (let i = 0; i < 25; i++) {\n  line(i * 4, 50, i * 4, 50 + cos(a) * 40.0);\n  a = a + inc;\n}\n</code>\n</div>"],"alt":"vertical black lines form wave patterns, extend-down on left and right side","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":186,"description":"<p>Calculates the sine of an angle. This function takes into account the\ncurrent <a href=\"#/p5/angleMode\">angleMode</a>. Values are returned in the range -1 to 1.</p>\n","itemtype":"method","name":"sin","params":[{"name":"angle","description":"<p>the angle</p>\n","type":"Number"}],"return":{"description":"the sine of the angle","type":"Number"},"example":["\n<div>\n<code>\nlet a = 0.0;\nlet inc = TWO_PI / 25.0;\nfor (let i = 0; i < 25; i++) {\n  line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);\n  a = a + inc;\n}\n</code>\n</div>"],"alt":"vertical black lines extend down and up from center to form wave pattern","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":213,"description":"<p>Calculates the tangent of an angle. This function takes into account\nthe current <a href=\"#/p5/angleMode\">angleMode</a>. Values are returned in the range of all real numbers.</p>\n","itemtype":"method","name":"tan","params":[{"name":"angle","description":"<p>the angle</p>\n","type":"Number"}],"return":{"description":"the tangent of the angle","type":"Number"},"example":["\n<div>\n<code>\nlet a = 0.0;\nlet inc = TWO_PI / 50.0;\nfor (let i = 0; i < 100; i = i + 2) {\n  line(i, 50, i, 50 + tan(a) * 2.0);\n  a = a + inc;\n}\n</code>"],"alt":"vertical black lines end down and up from center to form spike pattern","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":239,"description":"<p>Converts a radian measurement to its corresponding value in degrees.\nRadians and degrees are two ways of measuring the same thing. There are\n360 degrees in a circle and 2*PI radians in a circle. For example,\n90° = PI/2 = 1.5707964. This function does not take into account the\ncurrent <a href=\"#/p5/angleMode\">angleMode</a>.</p>\n","itemtype":"method","name":"degrees","params":[{"name":"radians","description":"<p>the radians value to convert to degrees</p>\n","type":"Number"}],"return":{"description":"the converted angle","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet rad = PI / 4;\nlet deg = degrees(rad);\nprint(rad + ' radians is ' + deg + ' degrees');\n// Prints: 0.7853981633974483 radians is 45 degrees\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":262,"description":"<p>Converts a degree measurement to its corresponding value in radians.\nRadians and degrees are two ways of measuring the same thing. There are\n360 degrees in a circle and 2*PI radians in a circle. For example,\n90° = PI/2 = 1.5707964. This function does not take into account the\ncurrent <a href=\"#/p5/angleMode\">angleMode</a>.</p>\n","itemtype":"method","name":"radians","params":[{"name":"degrees","description":"<p>the degree value to convert to radians</p>\n","type":"Number"}],"return":{"description":"the converted angle","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet deg = 45.0;\nlet rad = radians(deg);\nprint(deg + ' degrees is ' + rad + ' radians');\n// Prints: 45 degrees is 0.7853981633974483 radians\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":285,"description":"<p>Sets the current mode of p5 to given mode. Default mode is RADIANS.</p>\n","itemtype":"method","name":"angleMode","params":[{"name":"mode","description":"<p>either RADIANS or DEGREES</p>\n","type":"Constant"}],"example":["\n<div>\n<code>\nfunction draw() {\n  background(204);\n  angleMode(DEGREES); // Change the mode to DEGREES\n  let a = atan2(mouseY - height / 2, mouseX - width / 2);\n  translate(width / 2, height / 2);\n  push();\n  rotate(a);\n  rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees\n  pop();\n  angleMode(RADIANS); // Change the mode to RADIANS\n  rotate(a); // variable a stays the same\n  rect(-40, -5, 20, 10); // Smaller rectangle is rotating in radians\n}\n</code>\n</div>"],"alt":"40 by 10 rect in center rotates with mouse moves. 20 by 10 rect moves faster.","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/typography/attributes.js","line":11,"description":"<p>Sets the current alignment for drawing text. Accepts two\narguments: horizAlign (LEFT, CENTER, or RIGHT) and\nvertAlign (TOP, BOTTOM, CENTER, or BASELINE).</p>\n<p>The horizAlign parameter is in reference to the x value\nof the <a href=\"#/p5/text\">text()</a> function, while the vertAlign parameter\nis in reference to the y value.</p>\n<p>So if you write textAlign(LEFT), you are aligning the left\nedge of your text to the x value you give in <a href=\"#/p5/text\">text()</a>.\nIf you write textAlign(RIGHT, TOP), you are aligning the right edge\nof your text to the x value and the top of edge of the text\nto the y value.</p>\n","itemtype":"method","name":"textAlign","chainable":1,"example":["\n<div>\n<code>\ntextSize(16);\ntextAlign(RIGHT);\ntext('ABCD', 50, 30);\ntextAlign(CENTER);\ntext('EFGH', 50, 50);\ntextAlign(LEFT);\ntext('IJKL', 50, 70);\n</code>\n</div>\n\n<div>\n<code>\ntextSize(16);\nstrokeWeight(0.5);\n\nline(0, 12, width, 12);\ntextAlign(CENTER, TOP);\ntext('TOP', 0, 12, width);\n\nline(0, 37, width, 37);\ntextAlign(CENTER, CENTER);\ntext('CENTER', 0, 37, width);\n\nline(0, 62, width, 62);\ntextAlign(CENTER, BASELINE);\ntext('BASELINE', 0, 62, width);\n\nline(0, 87, width, 87);\ntextAlign(CENTER, BOTTOM);\ntext('BOTTOM', 0, 87, width);\n</code>\n</div>"],"alt":"Letters ABCD displayed at top left, EFGH at center and IJKL at bottom right.\nThe names of the four vertical alignments (TOP, CENTER, BASELINE & BOTTOM) rendered each showing that alignment's placement relative to a horizontal line.","class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":11,"params":[{"name":"horizAlign","description":"<p>horizontal alignment, either LEFT,\n                           CENTER, or RIGHT</p>\n","type":"Constant"},{"name":"vertAlign","description":"<p>vertical alignment, either TOP,\n                           BOTTOM, CENTER, or BASELINE</p>\n","type":"Constant","optional":true}],"chainable":1},{"line":72,"params":[],"return":{"description":"","type":"Object"}}]},{"file":"src/typography/attributes.js","line":81,"description":"<p>Sets/gets the spacing, in pixels, between lines of text. This setting will be\nused in all subsequent calls to the <a href=\"#/p5/text\">text()</a> function.</p>\n","itemtype":"method","name":"textLeading","chainable":1,"example":["\n<div>\n<code>\nlet lines = 'L1\\nL2\\nL3'; // \"\\n\" is a \"new line\" character\ntextSize(12);\n\ntextLeading(10);\ntext(lines, 10, 25);\n\ntextLeading(20);\ntext(lines, 40, 25);\n\ntextLeading(30);\ntext(lines, 70, 25);\n</code>\n</div>"],"alt":"A set of L1 L2 & L3 displayed vertically 3 times. spacing increases for each set","class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":81,"params":[{"name":"leading","description":"<p>the size in pixels for spacing between lines</p>\n","type":"Number"}],"chainable":1},{"line":109,"params":[],"return":{"description":"","type":"Number"}}]},{"file":"src/typography/attributes.js","line":118,"description":"<p>Sets/gets the current font size. This size will be used in all subsequent\ncalls to the <a href=\"#/p5/text\">text()</a> function. Font size is measured in pixels.</p>\n","itemtype":"method","name":"textSize","chainable":1,"example":["\n<div>\n<code>\ntextSize(12);\ntext('Font Size 12', 10, 30);\ntextSize(14);\ntext('Font Size 14', 10, 60);\ntextSize(16);\ntext('Font Size 16', 10, 90);\n</code>\n</div>"],"alt":"'Font Size 12' displayed small, 'Font Size 14' medium & 'Font Size 16' large","class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":118,"params":[{"name":"theSize","description":"<p>the size of the letters in units of pixels</p>\n","type":"Number"}],"chainable":1},{"line":141,"params":[],"return":{"description":"","type":"Number"}}]},{"file":"src/typography/attributes.js","line":150,"description":"<p>Sets/gets the style of the text for system fonts to NORMAL, ITALIC, BOLD or BOLDITALIC.\nNote: this may be is overridden by CSS styling. For non-system fonts\n(opentype, truetype, etc.) please load styled fonts instead.</p>\n","itemtype":"method","name":"textStyle","chainable":1,"example":["\n<div>\n<code>\nstrokeWeight(0);\ntextSize(12);\ntextStyle(NORMAL);\ntext('Font Style Normal', 10, 15);\ntextStyle(ITALIC);\ntext('Font Style Italic', 10, 40);\ntextStyle(BOLD);\ntext('Font Style Bold', 10, 65);\ntextStyle(BOLDITALIC);\ntext('Font Style Bold Italic', 10, 90);\n</code>\n</div>"],"alt":"Words Font Style Normal displayed normally, Italic in italic, bold in bold and bold italic in bold italics.","class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":150,"params":[{"name":"theStyle","description":"<p>styling for text, either NORMAL,\n                           ITALIC, BOLD or BOLDITALIC</p>\n","type":"Constant"}],"chainable":1},{"line":178,"params":[],"return":{"description":"","type":"String"}}]},{"file":"src/typography/attributes.js","line":187,"description":"<p>Calculates and returns the width of any character or text string.</p>\n","itemtype":"method","name":"textWidth","params":[{"name":"theText","description":"<p>the String of characters to measure</p>\n","type":"String"}],"return":{"description":"the calculated width","type":"Number"},"example":["\n<div>\n<code>\ntextSize(28);\n\nlet aChar = 'P';\nlet cWidth = textWidth(aChar);\ntext(aChar, 0, 40);\nline(cWidth, 0, cWidth, 50);\n\nlet aString = 'p5.js';\nlet sWidth = textWidth(aString);\ntext(aString, 0, 85);\nline(sWidth, 50, sWidth, 100);\n</code>\n</div>"],"alt":"Letter P and p5.js are displayed with vertical lines at end.","class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/attributes.js","line":222,"description":"<p>Returns the ascent of the current font at its current size. The ascent\nrepresents the distance, in pixels, of the tallest character above\nthe baseline.</p>\n","itemtype":"method","name":"textAscent","return":{"description":"","type":"Number"},"example":["\n<div>\n<code>\nlet base = height * 0.75;\nlet scalar = 0.8; // Different for each font\n\ntextSize(32); // Set initial text size\nlet asc = textAscent() * scalar; // Calc ascent\nline(0, base - asc, width, base - asc);\ntext('dp', 0, base); // Draw text on baseline\n\ntextSize(64); // Increase text size\nasc = textAscent() * scalar; // Recalc ascent\nline(40, base - asc, width, base - asc);\ntext('dp', 40, base); // Draw text on baseline\n</code>\n</div>"],"class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/attributes.js","line":251,"description":"<p>Returns the descent of the current font at its current size. The descent\nrepresents the distance, in pixels, of the character with the longest\ndescender below the baseline.</p>\n","itemtype":"method","name":"textDescent","return":{"description":"","type":"Number"},"example":["\n<div>\n<code>\nlet base = height * 0.75;\nlet scalar = 0.8; // Different for each font\n\ntextSize(32); // Set initial text size\nlet desc = textDescent() * scalar; // Calc ascent\nline(0, base + desc, width, base + desc);\ntext('dp', 0, base); // Draw text on baseline\n\ntextSize(64); // Increase text size\ndesc = textDescent() * scalar; // Recalc ascent\nline(40, base + desc, width, base + desc);\ntext('dp', 40, base); // Draw text on baseline\n</code>\n</div>"],"class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/attributes.js","line":280,"description":"<p>Helper function to measure ascent and descent.</p>\n","class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/loading_displaying.js","line":16,"description":"<p>Loads an opentype font file (.otf, .ttf) from a file or a URL,\nand returns a PFont Object. This method is asynchronous,\nmeaning it may not finish before the next line in your sketch\nis executed.</p>\n<p>The path to the font should be relative to the HTML file\nthat links in your sketch. Loading fonts from a URL or other\nremote location may be blocked due to your browser's built-in\nsecurity.</p>\n","itemtype":"method","name":"loadFont","params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/loadFont\">loadFont()</a> completes</p>\n","type":"Function","optional":true},{"name":"onError","description":"<p>function to be executed if\n                                   an error occurs</p>\n","type":"Function","optional":true}],"return":{"description":"<a href=\"#/p5.Font\">p5.Font</a> object","type":"p5.Font"},"example":["\n\nCalling loadFont() inside <a href=\"#/p5/preload\">preload()</a> guarantees\nthat the load operation will have completed before <a href=\"#/p5/setup\">setup()</a>\nand <a href=\"#/p5/draw\">draw()</a> are called.\n\n<div><code>\nlet myFont;\nfunction preload() {\n  myFont = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n  fill('#ED225D');\n  textFont(myFont);\n  textSize(36);\n  text('p5*js', 10, 50);\n}\n</code></div>\n\nOutside of <a href=\"#/p5/preload\">preload()</a>, you may supply a\ncallback function to handle the object:\n\n<div><code>\nfunction setup() {\n  loadFont('assets/inconsolata.otf', drawText);\n}\n\nfunction drawText(font) {\n  fill('#ED225D');\n  textFont(font, 36);\n  text('p5*js', 10, 50);\n}\n</code></div>\n\nYou can also use the font filename string (without the file extension) to\nstyle other HTML elements.\n\n<div><code>\nfunction preload() {\n  loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n  let myDiv = createDiv('hello there');\n  myDiv.style('font-family', 'Inconsolata');\n}\n</code></div>"],"alt":"p5*js in p5's theme dark pink\np5*js in p5's theme dark pink","class":"p5","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/loading_displaying.js","line":140,"description":"<p>Draws text to the screen. Displays the information specified in the first\nparameter on the screen in the position specified by the additional\nparameters. A default font will be used unless a font is set with the\n<a href=\"#/p5/textFont\">textFont()</a> function and a default size will be\nused unless a font is set with <a href=\"#/p5/textSize\">textSize()</a>. Change\nthe color of the text with the <a href=\"#/p5/fill\">fill()</a> function. Change\nthe outline of the text with the <a href=\"#/p5/stroke\">stroke()</a> and\n<a href=\"#/p5/strokeWeight\">strokeWeight()</a> functions.</p>\n<p>The text displays in relation to the <a href=\"#/p5/textAlign\">textAlign()</a>\nfunction, which gives the option to draw to the left, right, and center of the\ncoordinates.</p>\n<p>The x2 and y2 parameters define a rectangular area to display within and\nmay only be used with string data. When these parameters are specified,\nthey are interpreted based on the current <a href=\"#/p5/rectMode\">rectMode()</a>\nsetting. Text that does not fit completely within the rectangle specified will\nnot be drawn to the screen. If x2 and y2 are not specified, the baseline\nalignment is the default, which means that the text will be drawn upwards\nfrom x and y.</p>\n<p><b>WEBGL</b>: Only opentype/truetype fonts are supported. You must load a font\nusing the <a href=\"#/p5/loadFont\">loadFont()</a> method (see the example above).\n<a href=\"#/p5/stroke\">stroke()</a> currently has no effect in webgl mode.</p>\n","itemtype":"method","name":"text","params":[{"name":"str","description":"<p>the alphanumeric\n                                            symbols to be displayed</p>\n","type":"String|Object|Array|Number|Boolean"},{"name":"x","description":"<p>x-coordinate of text</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of text</p>\n","type":"Number"},{"name":"x2","description":"<p>by default, the width of the text box,\n                    see <a href=\"#/p5/rectMode\">rectMode()</a> for more info</p>\n","type":"Number","optional":true},{"name":"y2","description":"<p>by default, the height of the text box,\n                    see <a href=\"#/p5/rectMode\">rectMode()</a> for more info</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\ntextSize(32);\ntext('word', 10, 30);\nfill(0, 102, 153);\ntext('word', 10, 60);\nfill(0, 102, 153, 51);\ntext('word', 10, 90);\n</code>\n</div>\n<div>\n<code>\nlet s = 'The quick brown fox jumped over the lazy dog.';\nfill(50);\ntext(s, 10, 10, 70, 80); // Text wraps within text box\n</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\nlet inconsolata;\nfunction preload() {\n  inconsolata = loadFont('assets/inconsolata.otf');\n}\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  textFont(inconsolata);\n  textSize(width / 3);\n  textAlign(CENTER, CENTER);\n}\nfunction draw() {\n  background(0);\n  let time = millis();\n  rotateX(time / 1000);\n  rotateZ(time / 1234);\n  text('p5.js', 0, 0);\n}\n</code>\n</div>"],"alt":"'word' displayed 3 times going from black, blue to translucent blue\nThe text 'The quick brown fox jumped over the lazy dog' displayed.\nThe text 'p5.js' spinning in 3d","class":"p5","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/loading_displaying.js","line":229,"description":"<p>Sets the current font that will be drawn with the <a href=\"#/p5/text\">text()</a> function.</p>\n<p><b>WEBGL</b>: Only fonts loaded via <a href=\"#/p5/loadFont\">loadFont()</a> are supported.</p>\n","itemtype":"method","name":"textFont","return":{"description":"the current font","type":"Object"},"example":["\n<div>\n<code>\nfill(0);\ntextSize(12);\ntextFont('Georgia');\ntext('Georgia', 12, 30);\ntextFont('Helvetica');\ntext('Helvetica', 12, 60);\n</code>\n</div>\n<div>\n<code>\nlet fontRegular, fontItalic, fontBold;\nfunction preload() {\n  fontRegular = loadFont('assets/Regular.otf');\n  fontItalic = loadFont('assets/Italic.ttf');\n  fontBold = loadFont('assets/Bold.ttf');\n}\nfunction setup() {\n  background(210);\n  fill(0)\n   .strokeWeight(0)\n   .textSize(10);\n  textFont(fontRegular);\n  text('Font Style Normal', 10, 30);\n  textFont(fontItalic);\n  text('Font Style Italic', 10, 50);\n  textFont(fontBold);\n  text('Font Style Bold', 10, 70);\n}\n</code>\n</div>"],"alt":"word 'Georgia' displayed in font Georgia and 'Helvetica' in font Helvetica\nwords Font Style Normal displayed normally, Italic in italic and bold in bold","class":"p5","module":"Typography","submodule":"Loading & Displaying","overloads":[{"line":229,"params":[],"return":{"description":"the current font","type":"Object"}},{"line":275,"params":[{"name":"font","description":"<p>a font loaded via <a href=\"#/p5/loadFont\">loadFont()</a>,\nor a String representing a <a href=\"https://mzl.la/2dOw8WD\">web safe font</a>\n(a font that is generally available across all systems)</p>\n","type":"Object|String"},{"name":"size","description":"<p>the font size to use</p>\n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/typography/p5.Font.js","line":24,"description":"<p>Underlying opentype font implementation</p>\n","itemtype":"property","name":"font","class":"p5.Font","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/p5.Font.js","line":31,"description":"<p>Returns a tight bounding box for the given text string using this\nfont</p>\n","itemtype":"method","name":"textBounds","params":[{"name":"line","description":"<p>a line of text</p>\n","type":"String"},{"name":"x","description":"<p>x-position</p>\n","type":"Number"},{"name":"y","description":"<p>y-position</p>\n","type":"Number"},{"name":"fontSize","description":"<p>font size to use (optional) Default is 12.</p>\n","type":"Number","optional":true},{"name":"options","description":"<p>opentype options (optional)\n                           opentype fonts contains alignment and baseline options.\n                           Default is 'LEFT' and 'alphabetic'</p>\n","type":"Object","optional":true}],"return":{"description":"a rectangle object with properties: x, y, w, h","type":"Object"},"example":["\n<div>\n<code>\nlet font;\nlet textString = 'Lorem ipsum dolor sit amet.';\nfunction preload() {\n  font = loadFont('./assets/Regular.otf');\n}\nfunction setup() {\n  background(210);\n\n  let bbox = font.textBounds(textString, 10, 30, 12);\n  fill(255);\n  stroke(0);\n  rect(bbox.x, bbox.y, bbox.w, bbox.h);\n  fill(0);\n  noStroke();\n\n  textFont(font);\n  textSize(12);\n  text(textString, 10, 30);\n}\n</code>\n</div>"],"alt":"words Lorem ipsum dol go off canvas and contained by white bounding box","class":"p5.Font","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/p5.Font.js","line":175,"description":"<p>Computes an array of points following the path for specified text</p>\n","itemtype":"method","name":"textToPoints","params":[{"name":"txt","description":"<p>a line of text</p>\n","type":"String"},{"name":"x","description":"<p>x-position</p>\n","type":"Number"},{"name":"y","description":"<p>y-position</p>\n","type":"Number"},{"name":"fontSize","description":"<p>font size to use (optional)</p>\n","type":"Number"},{"name":"options","description":"<p>an (optional) object that can contain:</p>\n<p><br>sampleFactor - the ratio of path-length to number of samples\n(default=.1); higher values yield more points and are therefore\nmore precise</p>\n<p><br>simplifyThreshold - if set to a non-zero value, collinear points will be\nbe removed from the polygon; the value represents the threshold angle to use\nwhen determining whether two edges are collinear</p>\n","type":"Object","optional":true}],"return":{"description":"an array of points, each with x, y, alpha (the path angle)","type":"Array"},"example":["\n<div>\n<code>\nlet font;\nfunction preload() {\n  font = loadFont('assets/inconsolata.otf');\n}\n\nlet points;\nlet bounds;\nfunction setup() {\n  createCanvas(100, 100);\n  stroke(0);\n  fill(255, 104, 204);\n\n  points = font.textToPoints('p5', 0, 0, 10, {\n    sampleFactor: 5,\n    simplifyThreshold: 0\n  });\n  bounds = font.textBounds(' p5 ', 0, 0, 10);\n}\n\nfunction draw() {\n  background(255);\n  beginShape();\n  translate(-bounds.x * width / bounds.w, -bounds.y * height / bounds.h);\n  for (let i = 0; i < points.length; i++) {\n    let p = points[i];\n    vertex(\n      p.x * width / bounds.w +\n        sin(20 * p.y / bounds.h + millis() / 1000) * width / 30,\n      p.y * height / bounds.h\n    );\n  }\n  endShape(CLOSE);\n}\n</code>\n</div>"],"class":"p5.Font","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/utilities/array_functions.js","line":10,"description":"<p>Adds a value to the end of an array. Extends the length of\nthe array by one. Maps to Array.push().</p>\n","itemtype":"method","name":"append","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push\">array.push(value)</a> instead.","params":[{"name":"array","description":"<p>Array to append</p>\n","type":"Array"},{"name":"value","description":"<p>to be added to the Array</p>\n","type":"Any"}],"return":{"description":"the array that was appended to","type":"Array"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":35,"description":"<p>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 <a href=\"#/p5/concat\">concat()</a>.</p>\n<p>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).</p>\n<p>Using this function is far more efficient for copying array data than\niterating through a for() loop and copying each element individually.</p>\n","itemtype":"method","name":"arrayCopy","deprecated":true,"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions","overloads":[{"line":35,"params":[{"name":"src","description":"<p>the source Array</p>\n","type":"Array"},{"name":"srcPosition","description":"<p>starting position in the source Array</p>\n","type":"Integer"},{"name":"dst","description":"<p>the destination Array</p>\n","type":"Array"},{"name":"dstPosition","description":"<p>starting position in the destination Array</p>\n","type":"Integer"},{"name":"length","description":"<p>number of Array elements to be copied</p>\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":"<p>Concatenates two arrays, maps to Array.concat(). Does not modify the\ninput arrays.</p>\n","itemtype":"method","name":"concat","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat\">arr1.concat(arr2)</a> instead.","params":[{"name":"a","description":"<p>first Array to concatenate</p>\n","type":"Array"},{"name":"b","description":"<p>second Array to concatenate</p>\n","type":"Array"}],"return":{"description":"concatenated array","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":141,"description":"<p>Reverses the order of an array, maps to Array.reverse()</p>\n","itemtype":"method","name":"reverse","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse\">array.reverse()</a> instead.","params":[{"name":"list","description":"<p>Array to reverse</p>\n","type":"Array"}],"return":{"description":"the reversed list","type":"Array"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":161,"description":"<p>Decreases an array by one element and returns the shortened array,\nmaps to Array.pop().</p>\n","itemtype":"method","name":"shorten","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop\">array.pop()</a> instead.","params":[{"name":"list","description":"<p>Array to shorten</p>\n","type":"Array"}],"return":{"description":"shortened Array","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":185,"description":"<p>Randomizes the order of the elements of an array. Implements\n<a href='http://Bost.Ocks.org/mike/shuffle/' target=_blank>\nFisher-Yates Shuffle Algorithm</a>.</p>\n","itemtype":"method","name":"shuffle","params":[{"name":"array","description":"<p>Array to shuffle</p>\n","type":"Array"},{"name":"bool","description":"<p>modify passed array</p>\n","type":"Boolean","optional":true}],"return":{"description":"shuffled Array","type":"Array"},"example":["\n<div><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":227,"description":"<p>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.</p>\n","itemtype":"method","name":"sort","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort\">array.sort()</a> instead.","params":[{"name":"list","description":"<p>Array to sort</p>\n","type":"Array"},{"name":"count","description":"<p>number of elements to sort, starting from 0</p>\n","type":"Integer","optional":true}],"return":{"description":"the sorted list","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":273,"description":"<p>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.)</p>\n","itemtype":"method","name":"splice","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice\">array.splice()</a> instead.","params":[{"name":"list","description":"<p>Array to splice into</p>\n","type":"Array"},{"name":"value","description":"<p>value to be spliced in</p>\n","type":"Any"},{"name":"position","description":"<p>in the array from which to insert data</p>\n","type":"Integer"}],"return":{"description":"the list","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":308,"description":"<p>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.</p>\n","itemtype":"method","name":"subset","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice\">array.slice()</a> instead.","params":[{"name":"list","description":"<p>Array to extract from</p>\n","type":"Array"},{"name":"start","description":"<p>position to begin</p>\n","type":"Integer"},{"name":"count","description":"<p>number of values to extract</p>\n","type":"Integer","optional":true}],"return":{"description":"Array of extracted elements","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/conversion.js","line":10,"description":"<p>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.</p>\n<p>When an array of values is passed in, then an array of floats of the same\nlength is returned.</p>\n","itemtype":"method","name":"float","params":[{"name":"str","description":"<p>float string to parse</p>\n","type":"String"}],"return":{"description":"floating point representation of string","type":"Number"},"example":["\n<div><code>\nlet str = '20';\nlet diameter = float(str);\nellipse(width / 2, height / 2, diameter, diameter);\n</code></div>\n<div class='norender'><code>\nprint(float('10.31')); // 10.31\nprint(float('Infinity')); // Infinity\nprint(float('-Infinity')); // -Infinity\n</code></div>"],"alt":"20 by 20 white ellipse in the center of the canvas","class":"p5","module":"Data","submodule":"Conversion"},{"file":"src/utilities/conversion.js","line":44,"description":"<p>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.</p>\n","itemtype":"method","name":"int","return":{"description":"integer representation of value","type":"Number"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":44,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Boolean|Number"},{"name":"radix","description":"<p>the radix to convert to (default: 10)</p>\n","type":"Integer","optional":true}],"return":{"description":"integer representation of value","type":"Number"}},{"line":66,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"}],"return":{"description":"integer representation of values","type":"Number[]"}}]},{"file":"src/utilities/conversion.js","line":87,"description":"<p>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.</p>\n","itemtype":"method","name":"str","params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Boolean|Number|Array"}],"return":{"description":"string representation of value","type":"String"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion"},{"file":"src/utilities/conversion.js","line":113,"description":"<p>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.</p>\n","itemtype":"method","name":"boolean","params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Boolean|Number|Array"}],"return":{"description":"boolean representation of value","type":"Boolean"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion"},{"file":"src/utilities/conversion.js","line":145,"description":"<p>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.</p>\n","itemtype":"method","name":"byte","return":{"description":"byte representation of value","type":"Number"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":145,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Boolean|Number"}],"return":{"description":"byte representation of value","type":"Number"}},{"line":167,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"}],"return":{"description":"array of byte representation of values","type":"Number[]"}}]},{"file":"src/utilities/conversion.js","line":181,"description":"<p>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.</p>\n","itemtype":"method","name":"char","return":{"description":"string representation of value","type":"String"},"example":["\n<div class='norender'><code>\nprint(char(65)); // \"A\"\nprint(char('65')); // \"A\"\nprint(char([65, 66, 67])); // [ \"A\", \"B\", \"C\" ]\nprint(join(char([65, 66, 67]), '')); // \"ABC\"\n</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":181,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Number"}],"return":{"description":"string representation of value","type":"String"}},{"line":200,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"}],"return":{"description":"array of string representation of values","type":"String[]"}}]},{"file":"src/utilities/conversion.js","line":215,"description":"<p>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.</p>\n","itemtype":"method","name":"unchar","return":{"description":"integer representation of value","type":"Number"},"example":["\n<div class='norender'><code>\nprint(unchar('A')); // 65\nprint(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]\nprint(unchar(split('ABC', ''))); // [ 65, 66, 67 ]\n</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":215,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String"}],"return":{"description":"integer representation of value","type":"Number"}},{"line":231,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"}],"return":{"description":"integer representation of values","type":"Number[]"}}]},{"file":"src/utilities/conversion.js","line":244,"description":"<p>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.</p>\n","itemtype":"method","name":"hex","return":{"description":"hexadecimal string representation of value","type":"String"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":244,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"Number"},{"name":"digits","description":"","type":"Number","optional":true}],"return":{"description":"hexadecimal string representation of value","type":"String"}},{"line":264,"params":[{"name":"ns","description":"<p>array of values to parse</p>\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":294,"description":"<p>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.</p>\n","itemtype":"method","name":"unhex","return":{"description":"integer representation of hexadecimal value","type":"Number"},"example":["\n<div class='norender'><code>\nprint(unhex('A')); // 10\nprint(unhex('FF')); // 255\nprint(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]\n</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":294,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String"}],"return":{"description":"integer representation of hexadecimal value","type":"Number"}},{"line":310,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"}],"return":{"description":"integer representations of hexadecimal value","type":"Number[]"}}]},{"file":"src/utilities/string_functions.js","line":15,"description":"<p>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 <a href=\"#/p5/nf\">nf()</a> or\nnfs().</p>\n","itemtype":"method","name":"join","params":[{"name":"list","description":"<p>array of Strings to be joined</p>\n","type":"Array"},{"name":"separator","description":"<p>String to be placed between each item</p>\n","type":"String"}],"return":{"description":"joined String","type":"String"},"example":["\n<div>\n<code>\nlet array = ['Hello', 'world!'];\nlet separator = ' ';\nlet message = join(array, separator);\ntext(message, 5, 50);\n</code>\n</div>"],"alt":"\"hello world!\" displayed middle left of canvas.","class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":43,"description":"<p>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.</p>\n<p>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.</p>\n<p>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).</p>\n","itemtype":"method","name":"match","params":[{"name":"str","description":"<p>the String to be searched</p>\n","type":"String"},{"name":"regexp","description":"<p>the regexp to be used for matching</p>\n","type":"String"}],"return":{"description":"Array of Strings found","type":"String[]"},"example":["\n<div>\n<code>\nlet string = 'Hello p5js*!';\nlet regexp = 'p5js\\\\*';\nlet m = match(string, regexp);\ntext(m, 5, 50);\n</code>\n</div>"],"alt":"\"p5js*\" displayed middle left of canvas.","class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":83,"description":"<p>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.</p>\n<p>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.</p>\n<p>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).</p>\n","itemtype":"method","name":"matchAll","params":[{"name":"str","description":"<p>the String to be searched</p>\n","type":"String"},{"name":"regexp","description":"<p>the regexp to be used for matching</p>\n","type":"String"}],"return":{"description":"2d Array of Strings found","type":"String[]"},"example":["\n<div class=\"norender\">\n<code>\nlet string = 'Hello p5js*! Hello world!';\nlet regexp = 'Hello';\nmatchAll(string, regexp);\n</code>\n</div>"],"class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":130,"description":"<p>Utility function for formatting numbers into strings. There are two\nversions: one for formatting floats, and one for formatting ints.\nThe values for the digits, left, and right parameters should always\nbe positive integers.\n(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.\nFor 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.</p>\n","itemtype":"method","name":"nf","return":{"description":"formatted String","type":"String"},"example":["\n<div>\n<code>\nlet myFont;\nfunction preload() {\n  myFont = loadFont('assets/fonts/inconsolata.ttf');\n}\nfunction setup() {\n  background(200);\n  let num1 = 321;\n  let num2 = -1321;\n\n  noStroke();\n  fill(0);\n  textFont(myFont);\n  textSize(22);\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</code>\n</div>"],"alt":"\"0321.00\" middle top, -1321.00\" middle bottom canvas","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":130,"params":[{"name":"num","description":"<p>the Number to format</p>\n","type":"Number|String"},{"name":"left","description":"<p>number of digits to the left of the\n                               decimal point</p>\n","type":"Integer|String","optional":true},{"name":"right","description":"<p>number of digits to the right of the\n                               decimal point</p>\n","type":"Integer|String","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":178,"params":[{"name":"nums","description":"<p>the Numbers to format</p>\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":239,"description":"<p>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.</p>\n","itemtype":"method","name":"nfc","return":{"description":"formatted String","type":"String"},"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"\"11,253,106.115\" top middle and \"1.00,1.00,2.00\" displayed bottom mid","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":239,"params":[{"name":"num","description":"<p>the Number to format</p>\n","type":"Number|String"},{"name":"right","description":"<p>number of digits to the right of the\n                                 decimal point</p>\n","type":"Integer|String","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":277,"params":[{"name":"nums","description":"<p>the Numbers to format</p>\n","type":"Array"},{"name":"right","description":"","type":"Integer|String","optional":true}],"return":{"description":"formatted Strings","type":"String[]"}}]},{"file":"src/utilities/string_functions.js","line":313,"description":"<p>Utility function for formatting numbers into strings. Similar to <a href=\"#/p5/nf\">nf()</a> 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.</p>\n","itemtype":"method","name":"nfp","return":{"description":"formatted String","type":"String"},"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"\"+11253106.11\" top middle and \"-11253106.11\" displayed bottom middle","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":313,"params":[{"name":"num","description":"<p>the Number to format</p>\n","type":"Number"},{"name":"left","description":"<p>number of digits to the left of the decimal\n                               point</p>\n","type":"Integer","optional":true},{"name":"right","description":"<p>number of digits to the right of the\n                               decimal point</p>\n","type":"Integer","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":354,"params":[{"name":"nums","description":"<p>the Numbers to format</p>\n","type":"Number[]"},{"name":"left","description":"","type":"Integer","optional":true},{"name":"right","description":"","type":"Integer","optional":true}],"return":{"description":"formatted Strings","type":"String[]"}}]},{"file":"src/utilities/string_functions.js","line":375,"description":"<p>Utility function for formatting numbers into strings. Similar to <a href=\"#/p5/nf\">nf()</a> but\nputs an additional \"_\" (space) in front of positive numbers just in case to align it with negative\nnumbers which includes \"-\" (minus) sign.\nThe 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.\nThe 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.\nFor 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.</p>\n","itemtype":"method","name":"nfs","return":{"description":"formatted String","type":"String"},"example":["\n<div>\n<code>\nlet myFont;\nfunction preload() {\n  myFont = loadFont('assets/fonts/inconsolata.ttf');\n}\nfunction setup() {\n  background(200);\n  let num1 = 321;\n  let num2 = -1321;\n\n  noStroke();\n  fill(0);\n  textFont(myFont);\n  textSize(22);\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</code>\n</div>"],"alt":"\"0321.00\" top middle and \"-1321.00\" displayed bottom middle","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":375,"params":[{"name":"num","description":"<p>the Number to format</p>\n","type":"Number"},{"name":"left","description":"<p>number of digits to the left of the decimal\n                               point</p>\n","type":"Integer","optional":true},{"name":"right","description":"<p>number of digits to the right of the\n                               decimal point</p>\n","type":"Integer","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":432,"params":[{"name":"nums","description":"<p>the Numbers to format</p>\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":453,"description":"<p>The <a href=\"#/p5/split\">split()</a> 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.</p>\n<p>The <a href=\"#/p5/splitTokens\">splitTokens()</a> function works in a similar fashion, except that it\nsplits using a range of characters instead of a specific character or\nsequence.</p>\n","itemtype":"method","name":"split","params":[{"name":"value","description":"<p>the String to be split</p>\n","type":"String"},{"name":"delim","description":"<p>the String used to separate the data</p>\n","type":"String"}],"return":{"description":"Array of Strings","type":"String[]"},"example":["\n<div>\n<code>\nlet names = 'Pat,Xio,Alex';\nlet splitString = split(names, ',');\ntext(splitString[0], 5, 30);\ntext(splitString[1], 5, 50);\ntext(splitString[2], 5, 70);\n</code>\n</div>"],"alt":"\"pat\" top left, \"Xio\" mid left and \"Alex\" displayed bottom left","class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":486,"description":"<p>The <a href=\"#/p5/splitTokens\">splitTokens()</a> 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.</p>\n<p>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.</p>\n","itemtype":"method","name":"splitTokens","params":[{"name":"value","description":"<p>the String to be split</p>\n","type":"String"},{"name":"delim","description":"<p>list of individual Strings that will be used as\n                         separators</p>\n","type":"String","optional":true}],"return":{"description":"Array of Strings","type":"String[]"},"example":["\n<div class = \"norender\">\n<code>\nfunction setup() {\n  let myStr = 'Mango, Banana, Lime';\n  let myStrArr = splitTokens(myStr, ',');\n\n  print(myStrArr); // prints : [\"Mango\",\" Banana\",\" Lime\"]\n}\n</code>\n</div>"],"class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":539,"description":"<p>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.</p>\n","itemtype":"method","name":"trim","return":{"description":"a trimmed String","type":"String"},"example":["\n<div>\n<code>\nlet string = trim('  No new lines\\n   ');\ntext(string + ' here', 2, 50);\n</code>\n</div>"],"alt":"\"No new lines here\" displayed center canvas","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":539,"params":[{"name":"str","description":"<p>a String to be trimmed</p>\n","type":"String"}],"return":{"description":"a trimmed String","type":"String"}},{"line":559,"params":[{"name":"strs","description":"<p>an Array of Strings to be trimmed</p>\n","type":"Array"}],"return":{"description":"an Array of trimmed Strings","type":"String[]"}}]},{"file":"src/utilities/time_date.js","line":10,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/day\">day()</a> function\nreturns the current day as a value from 1 - 31.</p>\n","itemtype":"method","name":"day","return":{"description":"the current day","type":"Integer"},"example":["\n<div>\n<code>\nlet d = day();\ntext('Current day: \\n' + d, 5, 50);\n</code>\n</div>"],"alt":"Current day is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":31,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/hour\">hour()</a> function\nreturns the current hour as a value from 0 - 23.</p>\n","itemtype":"method","name":"hour","return":{"description":"the current hour","type":"Integer"},"example":["\n<div>\n<code>\nlet h = hour();\ntext('Current hour:\\n' + h, 5, 50);\n</code>\n</div>"],"alt":"Current hour is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":52,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/minute\">minute()</a> function\nreturns the current minute as a value from 0 - 59.</p>\n","itemtype":"method","name":"minute","return":{"description":"the current minute","type":"Integer"},"example":["\n<div>\n<code>\nlet m = minute();\ntext('Current minute: \\n' + m, 5, 50);\n</code>\n</div>"],"alt":"Current minute is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":73,"description":"<p>Returns the number of milliseconds (thousandths of a second) since\nstarting the sketch (when <code>setup()</code> is called). This information is often\nused for timing events and animation sequences.</p>\n","itemtype":"method","name":"millis","return":{"description":"the number of milliseconds since starting the sketch","type":"Number"},"example":["\n<div>\n<code>\nlet millisecond = millis();\ntext('Milliseconds \\nrunning: \\n' + millisecond, 5, 40);\n</code>\n</div>"],"alt":"number of milliseconds since sketch has started displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":100,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/month\">month()</a> function\nreturns the current month as a value from 1 - 12.</p>\n","itemtype":"method","name":"month","return":{"description":"the current month","type":"Integer"},"example":["\n<div>\n<code>\nlet m = month();\ntext('Current month: \\n' + m, 5, 50);\n</code>\n</div>"],"alt":"Current month is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":122,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/second\">second()</a> function\nreturns the current second as a value from 0 - 59.</p>\n","itemtype":"method","name":"second","return":{"description":"the current second","type":"Integer"},"example":["\n<div>\n<code>\nlet s = second();\ntext('Current second: \\n' + s, 5, 50);\n</code>\n</div>"],"alt":"Current second is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":143,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/year\">year()</a> function\nreturns the current year as an integer (2014, 2015, 2016, etc).</p>\n","itemtype":"method","name":"year","return":{"description":"the current year","type":"Integer"},"example":["\n<div>\n<code>\nlet y = year();\ntext('Current year: \\n' + y, 5, 50);\n</code>\n</div>"],"alt":"Current year is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/webgl/3d_primitives.js","line":13,"description":"<p>Draw a plane with given a width and height</p>\n","itemtype":"method","name":"plane","params":[{"name":"width","description":"<p>width of the plane</p>\n","type":"Number","optional":true},{"name":"height","description":"<p>height of the plane</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>Optional number of triangle\n                            subdivisions in x-dimension</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>Optional number of triangle\n                            subdivisions in y-dimension</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a plane\n// with width 50 and height 50\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  plane(50, 50);\n}\n</code>\n</div>"],"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":97,"description":"<p>Draw a box with given width, height and depth</p>\n","itemtype":"method","name":"box","params":[{"name":"width","description":"<p>width of the box</p>\n","type":"Number","optional":true},{"name":"Height","description":"<p>height of the box</p>\n","type":"Number","optional":true},{"name":"depth","description":"<p>depth of the box</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>Optional number of triangle\n                           subdivisions in x-dimension</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>Optional number of triangle\n                           subdivisions in y-dimension</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a spinning box\n// with width, height and depth of 50\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  box(50);\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":215,"description":"<p>Draw a sphere with given radius.</p>\n<p>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.</p>\n","itemtype":"method","name":"sphere","params":[{"name":"radius","description":"<p>radius of circle</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>optional number of subdivisions in x-dimension</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>optional number of subdivisions in y-dimension</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a sphere with radius 40\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(205, 102, 94);\n  sphere(40);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  sphere(40, detailX.value(), 16);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  sphere(40, 16, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":419,"description":"<p>Draw a cylinder with given radius and height</p>\n<p>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.</p>\n","itemtype":"method","name":"cylinder","params":[{"name":"radius","description":"<p>radius of the surface</p>\n","type":"Number","optional":true},{"name":"height","description":"<p>height of the cylinder</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>number of subdivisions in x-dimension;\n                              default is 24</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of subdivisions in y-dimension;\n                              default is 1</p>\n","type":"Integer","optional":true},{"name":"bottomCap","description":"<p>whether to draw the bottom of the cylinder</p>\n","type":"Boolean","optional":true},{"name":"topCap","description":"<p>whether to draw the top of the cylinder</p>\n","type":"Boolean","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a spinning cylinder\n// with radius 20 and height 50\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  cylinder(20, 75, detailX.value(), 1);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  cylinder(20, 75, 16, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":554,"description":"<p>Draw a cone with given radius and height</p>\n<p>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.</p>\n","itemtype":"method","name":"cone","params":[{"name":"radius","description":"<p>radius of the bottom surface</p>\n","type":"Number","optional":true},{"name":"height","description":"<p>height of the cone</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>number of segments,\n                            the more segments the smoother geometry\n                            default is 24</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of segments,\n                            the more segments the smoother geometry\n                            default is 1</p>\n","type":"Integer","optional":true},{"name":"cap","description":"<p>whether to draw the base of the cone</p>\n","type":"Boolean","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a spinning cone\n// with radius 40 and height 70\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateZ(frameCount * 0.01);\n  cone(40, 70);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 102, 94);\n  rotateY(millis() / 1000);\n  cone(30, 65, detailX.value(), 16);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 102, 94);\n  rotateY(millis() / 1000);\n  cone(30, 65, 16, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":669,"description":"<p>Draw an ellipsoid with given radius</p>\n<p>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.</p>\n","itemtype":"method","name":"ellipsoid","params":[{"name":"radiusx","description":"<p>x-radius of ellipsoid</p>\n","type":"Number","optional":true},{"name":"radiusy","description":"<p>y-radius of ellipsoid</p>\n","type":"Number","optional":true},{"name":"radiusz","description":"<p>z-radius of ellipsoid</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>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.</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>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.</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw an ellipsoid\n// with radius 30, 40 and 40.\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(205, 105, 94);\n  ellipsoid(30, 40, 40);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  ellipsoid(30, 40, 40, detailX.value(), 8);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 9);\n  rotateY(millis() / 1000);\n  ellipsoid(30, 40, 40, 12, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":804,"description":"<p>Draw a torus with given radius and tube radius</p>\n<p>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.</p>\n","itemtype":"method","name":"torus","params":[{"name":"radius","description":"<p>radius of the whole ring</p>\n","type":"Number","optional":true},{"name":"tubeRadius","description":"<p>radius of the tube</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>number of segments in x-dimension,\n                               the more segments the smoother geometry\n                               default is 24</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of segments in y-dimension,\n                               the more segments the smoother geometry\n                               default is 16</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a spinning torus\n// with ring radius 30 and tube radius 15\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 102, 94);\n  rotateY(millis() / 1000);\n  torus(30, 15, detailX.value(), 12);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 102, 94);\n  rotateY(millis() / 1000);\n  torus(30, 15, 16, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/interaction.js","line":11,"description":"<p>Allows movement around a 3D sketch using a mouse or trackpad.  Left-clicking\nand dragging will rotate the camera position about the center of the sketch,\nright-clicking and dragging will pan the camera position without rotation,\nand using the mouse wheel (scrolling) will move the camera closer or further\nfrom the center of the sketch. This function can be called with parameters\ndictating sensitivity to mouse movement along the X and Y axes.  Calling\nthis function without parameters is equivalent to calling orbitControl(1,1).\nTo reverse direction of movement in either axis, enter a negative number\nfor sensitivity.</p>\n","itemtype":"method","name":"orbitControl","params":[{"name":"sensitivityX","description":"<p>sensitivity to mouse movement along X axis</p>\n","type":"Number","optional":true},{"name":"sensitivityY","description":"<p>sensitivity to mouse movement along Y axis</p>\n","type":"Number","optional":true},{"name":"sensitivityZ","description":"<p>sensitivity to scroll movement along Z axis</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n}\nfunction draw() {\n  background(200);\n  orbitControl();\n  rotateY(0.5);\n  box(30, 50);\n}\n</code>\n</div>"],"alt":"Camera orbits around a box when mouse is hold-clicked & then moved.","class":"p5","module":"Lights, Camera","submodule":"Interaction"},{"file":"src/webgl/interaction.js","line":145,"description":"<p>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.</p>\n<p>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.</p>\n","itemtype":"method","name":"debugMode","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode();\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</code>\n</div>","\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode(GRID);\n}\n\nfunction draw() {\n  background(200);\n  orbitControl();\n  box(15, 30);\n}\n</code>\n</div>","\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode(AXES);\n}\n\nfunction draw() {\n  background(200);\n  orbitControl();\n  box(15, 30);\n}\n</code>\n</div>","\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode(GRID, 100, 10, 0, 0, 0);\n}\n\nfunction draw() {\n  background(200);\n  orbitControl();\n  box(15, 30);\n}\n</code>\n</div>","\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode(100, 10, 0, 0, 0, 20, 0, -40, 0);\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</code>\n</div>"],"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":"Lights, Camera","submodule":"Interaction","overloads":[{"line":145,"params":[]},{"line":278,"params":[{"name":"mode","description":"<p>either GRID or AXES</p>\n","type":"Constant"}]},{"line":283,"params":[{"name":"mode","description":"","type":"Constant"},{"name":"gridSize","description":"<p>size of one side of the grid</p>\n","type":"Number","optional":true},{"name":"gridDivisions","description":"<p>number of divisions in the grid</p>\n","type":"Number","optional":true},{"name":"xOff","description":"<p>X axis offset from origin (0,0,0)</p>\n","type":"Number","optional":true},{"name":"yOff","description":"<p>Y axis offset from origin (0,0,0)</p>\n","type":"Number","optional":true},{"name":"zOff","description":"<p>Z axis offset from origin (0,0,0)</p>\n","type":"Number","optional":true}]},{"line":293,"params":[{"name":"mode","description":"","type":"Constant"},{"name":"axesSize","description":"<p>size of axes icon</p>\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":302,"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":353,"description":"<p>Turns off debugMode() in a 3D sketch.</p>\n","itemtype":"method","name":"noDebugMode","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode();\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</code>\n</div>"],"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":"Lights, Camera","submodule":"Interaction"},{"file":"src/webgl/light.js","line":10,"description":"<p>Creates an ambient light with a color. Ambient light is light that comes from everywhere on the canvas.\nIt has no particular source.</p>\n","itemtype":"method","name":"ambientLight","chainable":1,"example":["\n<div>\n<code>\ncreateCanvas(100, 100, WEBGL);\nambientLight(0);\nambientMaterial(250);\nsphere(40);\n</code>\n</div>\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(51);\n  ambientLight(100); // white light\n  ambientMaterial(255, 102, 94); // magenta material\n  box(30);\n}\n</code>\n</div>"],"alt":"evenly distributed light across a sphere\nevenly distributed light across a rotating sphere","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":10,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"<p>the alpha value</p>\n","type":"Number","optional":true}],"chainable":1},{"line":50,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"chainable":1},{"line":56,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":63,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":70,"params":[{"name":"color","description":"<p>the ambient light color</p>\n","type":"p5.Color"}],"chainable":1}]},{"file":"src/webgl/light.js","line":91,"description":"<p>Set's the color of the specular highlight when using a specular material and\nspecular light.</p>\n<p>This method can be combined with specularMaterial() and shininess()\nfunctions to set specular highlights. The default color is white, ie\n(255, 255, 255), which is used if this method is not called before\nspecularMaterial(). If this method is called without specularMaterial(),\nThere will be no effect.</p>\n<p>Note: specularColor is equivalent to the processing function\n<a href=\"https://processing.org/reference/lightSpecular_.html\">lightSpecular</a>.</p>\n","itemtype":"method","name":"specularColor","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  noStroke();\n}\n\nfunction draw() {\n  background(0);\n  shininess(20);\n  ambientLight(50);\n  specularColor(255, 0, 0);\n  pointLight(255, 0, 0, 0, -50, 50);\n  specularColor(0, 255, 0);\n  pointLight(0, 255, 0, 0, 50, 50);\n  specularMaterial(255);\n  sphere(40);\n}\n</code>\n</div>"],"alt":"different specular light sources from top and bottom of canvas","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":91,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"}],"chainable":1},{"line":138,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"chainable":1},{"line":144,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"}],"chainable":1},{"line":150,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":157,"params":[{"name":"color","description":"<p>the ambient light color</p>\n","type":"p5.Color"}],"chainable":1}]},{"file":"src/webgl/light.js","line":176,"description":"<p>Creates a directional light with a color and a direction</p>\n<p>A maximum of 5 directionalLight can be active at one time</p>\n","itemtype":"method","name":"directionalLight","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"light source on canvas changeable with mouse position","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":176,"params":[{"name":"v1","description":"<p>red or hue value (depending on the current\ncolor mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number"},{"name":"position","description":"<p>the direction of the light</p>\n","type":"p5.Vector"}],"chainable":1},{"line":209,"params":[{"name":"color","description":"<p>color Array, CSS color string,\n                                            or <a href=\"#/p5.Color\">p5.Color</a> value</p>\n","type":"Number[]|String|p5.Color"},{"name":"x","description":"<p>x axis direction</p>\n","type":"Number"},{"name":"y","description":"<p>y axis direction</p>\n","type":"Number"},{"name":"z","description":"<p>z axis direction</p>\n","type":"Number"}],"chainable":1},{"line":219,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"name":"position","description":"","type":"p5.Vector"}],"chainable":1},{"line":226,"params":[{"name":"v1","description":"","type":"Number"},{"name":"v2","description":"","type":"Number"},{"name":"v3","description":"","type":"Number"},{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"","type":"Number"}],"chainable":1}]},{"file":"src/webgl/light.js","line":279,"description":"<p>Creates a point light with a color and a light position</p>\n<p>A maximum of 5 pointLight can be active at one time</p>\n","itemtype":"method","name":"pointLight","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"spot light on canvas changes position with mouse","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":279,"params":[{"name":"v1","description":"<p>red or hue value (depending on the current\ncolor mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number"},{"name":"x","description":"<p>x axis position</p>\n","type":"Number"},{"name":"y","description":"<p>y axis position</p>\n","type":"Number"},{"name":"z","description":"<p>z axis position</p>\n","type":"Number"}],"chainable":1},{"line":321,"params":[{"name":"v1","description":"","type":"Number"},{"name":"v2","description":"","type":"Number"},{"name":"v3","description":"","type":"Number"},{"name":"position","description":"<p>the position of the light</p>\n","type":"p5.Vector"}],"chainable":1},{"line":330,"params":[{"name":"color","description":"<p>color Array, CSS color string,\nor <a href=\"#/p5.Color\">p5.Color</a> value</p>\n","type":"Number[]|String|p5.Color"},{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"","type":"Number"}],"chainable":1},{"line":340,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"name":"position","description":"","type":"p5.Vector"}],"chainable":1}]},{"file":"src/webgl/light.js","line":386,"description":"<p>Sets the default ambient and directional light. The defaults are <a href=\"#/p5/ambientLight\">ambientLight(128, 128, 128)</a> and <a href=\"#/p5/directionalLight\">directionalLight(128, 128, 128, 0, 0, -1)</a>. Lights need to be included in the <a href=\"#/p5/draw\">draw()</a> to remain persistent in a looping program. Placing them in the <a href=\"#/p5/setup\">setup()</a> of a looping program will cause them to only have an effect the first time through the loop.</p>\n","itemtype":"method","name":"lights","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(0);\n  lights();\n  rotateX(millis() / 1000);\n  rotateY(millis() / 1000);\n  rotateZ(millis() / 1000);\n  box();\n}\n</code>\n</div>"],"alt":"the light is partially ambient and partially directional","class":"p5","module":"Lights, Camera","submodule":"Lights"},{"file":"src/webgl/light.js","line":417,"description":"<p>Sets the falloff rates for point lights. It affects only the elements which are created after it in the code.\nThe default value is lightFalloff(1.0, 0.0, 0.0), and the parameters are used to calculate the falloff with the following equation:</p>\n<p>d = distance from light position to vertex position</p>\n<p>falloff = 1 / (CONSTANT + d * LINEAR + ( d * d ) * QUADRATIC)</p>\n","itemtype":"method","name":"lightFalloff","params":[{"name":"constant","description":"<p>constant value for determining falloff</p>\n","type":"Number"},{"name":"linear","description":"<p>linear value for determining falloff</p>\n","type":"Number"},{"name":"quadratic","description":"<p>quadratic value for determining falloff</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  noStroke();\n}\nfunction draw() {\n  background(0);\n  let locX = mouseX - width / 2;\n  let locY = mouseY - height / 2;\n  translate(-25, 0, 0);\n  lightFalloff(1, 0, 0);\n  pointLight(250, 250, 250, locX, locY, 50);\n  sphere(20);\n  translate(50, 0, 0);\n  lightFalloff(0.9, 0.01, 0);\n  pointLight(250, 250, 250, locX, locY, 50);\n  sphere(20);\n}\n</code>\n</div>"],"alt":"Two spheres with different falloff values show different intensity of light","class":"p5","module":"Lights, Camera","submodule":"Lights"},{"file":"src/webgl/light.js","line":502,"description":"<p>Creates a spotlight with a given color, position, direction of light,\nangle and concentration. Here, angle refers to the opening or aperture\nof the cone of the spotlight, and concentration is used to focus the\nlight towards the center. Both angle and concentration are optional, but if\nyou want to provide concentration, you will also have to specify the angle.</p>\n<p>A maximum of 5 spotLight can be active at one time</p>\n","itemtype":"method","name":"spotLight","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"Spot light on a sphere which changes position with mouse","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":502,"params":[{"name":"v1","description":"<p>red or hue value (depending on the current\ncolor mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number"},{"name":"x","description":"<p>x axis position</p>\n","type":"Number"},{"name":"y","description":"<p>y axis position</p>\n","type":"Number"},{"name":"z","description":"<p>z axis position</p>\n","type":"Number"},{"name":"rx","description":"<p>x axis direction of light</p>\n","type":"Number"},{"name":"ry","description":"<p>y axis direction of light</p>\n","type":"Number"},{"name":"rz","description":"<p>z axis direction of light</p>\n","type":"Number"},{"name":"angle","description":"<p>optional parameter for angle. Defaults to PI/3</p>\n","type":"Number","optional":true},{"name":"conc","description":"<p>optional parameter for concentration. Defaults to 100</p>\n","type":"Number","optional":true}],"chainable":1},{"line":554,"params":[{"name":"color","description":"<p>color Array, CSS color string,\nor <a href=\"#/p5.Color\">p5.Color</a> value</p>\n","type":"Number[]|String|p5.Color"},{"name":"position","description":"<p>the position of the light</p>\n","type":"p5.Vector"},{"name":"direction","description":"<p>the direction of the light</p>\n","type":"p5.Vector"},{"name":"angle","description":"","type":"Number","optional":true},{"name":"conc","description":"","type":"Number","optional":true}]},{"line":563,"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":"conc","description":"","type":"Number","optional":true}]},{"line":573,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"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":"conc","description":"","type":"Number","optional":true}]},{"line":583,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"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":"conc","description":"","type":"Number","optional":true}]},{"line":593,"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":"conc","description":"","type":"Number","optional":true}]},{"line":605,"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":"conc","description":"","type":"Number","optional":true}]},{"line":617,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"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":"conc","description":"","type":"Number","optional":true}]}]},{"file":"src/webgl/light.js","line":842,"description":"<p>This function will remove all the lights from the sketch for the\nsubsequent materials rendered. It affects all the subsequent methods.\nCalls to lighting methods made after noLights() will re-enable lights\nin the sketch.</p>\n","itemtype":"method","name":"noLights","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(0);\n  noStroke();\n\n  ambientLight(150, 0, 0);\n  translate(-25, 0, 0);\n  ambientMaterial(250);\n  sphere(20);\n\n  noLights();\n  ambientLight(0, 150, 0);\n  translate(50, 0, 0);\n  ambientMaterial(250);\n  sphere(20);\n}\n</code>\n</div>"],"alt":"Two spheres showing different colors","class":"p5","module":"Lights, Camera","submodule":"Lights"},{"file":"src/webgl/loading.js","line":12,"description":"<p>Load a 3d model from an OBJ or STL file.</p>\n<p><a href=\"#/p5/loadModel\">loadModel()</a> should be placed inside of <a href=\"#/p5/preload\">preload()</a>.\nThis allows the model to load fully before the rest of your code is run.</p>\n<p>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\n<a href=\"#/p5/loadModel\">loadModel()</a> 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 <a href=\"#/p5/scale\">scale()</a> function.</p>\n<p>Also, the support for colored STL files is not present. STL files with color will be\nrendered without color properties.</p>\n","itemtype":"method","name":"loadModel","return":{"description":"the <a href=\"#/p5.Geometry\">p5.Geometry</a> object","type":"p5.Geometry"},"example":["\n<div>\n<code>\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}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  model(octahedron);\n}\n</code>\n</div>","\n<div>\n<code>\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}\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</code>\n</div>"],"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":"<p>Path of the model to be loaded</p>\n","type":"String"},{"name":"normalize","description":"<p>If true, scale the model to a\n                                     standardized size when loading</p>\n","type":"Boolean"},{"name":"successCallback","description":"<p>Function to be called\n                                    once the model is loaded. Will be passed\n                                    the 3D model object.</p>\n","type":"function(p5.Geometry)","optional":true},{"name":"failureCallback","description":"<p>called with event error if\n                                        the model fails to load.</p>\n","type":"Function(Event)","optional":true},{"name":"fileType","description":"<p>The file extension of the model\n                                     (<code>.stl</code>, <code>.obj</code>).</p>\n","type":"String","optional":true}],"return":{"description":"the <a href=\"#/p5.Geometry\">p5.Geometry</a> object","type":"p5.Geometry"}},{"line":96,"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 <a href=\"#/p5.Geometry\">p5.Geometry</a> object","type":"p5.Geometry"}}]},{"file":"src/webgl/loading.js","line":179,"description":"<p>Parse OBJ lines into model. For reference, this is what a simple model of a\nsquare might look like:</p>\n<p>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</p>\n<p>f 4 3 2 1</p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":288,"description":"<p>STL files can be of two types, ASCII and Binary,</p>\n<p>We need to convert the arrayBuffer to an array of strings,\nto parse it as an ASCII file.</p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":315,"description":"<p>This function checks if the file is in ASCII format or in Binary format</p>\n<p>It is done by searching keyword <code>solid</code> at the start of the file.</p>\n<p>An ASCII STL data must begin with <code>solid</code> as the first six bytes.\nHowever, ASCII STLs lacking the SPACE after the <code>d</code> are known to be\nplentiful. So, check the first 5 bytes for <code>solid</code>.</p>\n<p>Several encodings, such as UTF-8, precede the text with up to 5 bytes:\n<a href=\"https://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding\">https://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding</a>\nSearch for <code>solid</code> to start anywhere after those prefixes.</p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":342,"description":"<p>This function matches the <code>query</code> at the provided <code>offset</code></p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":354,"description":"<p>This function parses the Binary STL files.\n<a href=\"https://en.wikipedia.org/wiki/STL_%28file_format%29#Binary_STL\">https://en.wikipedia.org/wiki/STL_%28file_format%29#Binary_STL</a></p>\n<p>Currently there is no support for the colors provided in STL files.</p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":442,"description":"<p>ASCII STL file starts with <code>solid 'nameOfFile'</code>\nThen contain the normal of the face, starting with <code>facet normal</code>\nNext contain a keyword indicating the start of face vertex, <code>outer loop</code>\nNext comes the three vertex, starting with <code>vertex x y z</code>\nVertices ends with <code>endloop</code>\nFace ends with <code>endfacet</code>\nNext face starts with <code>facet normal</code>\nThe end of the file is indicated by <code>endsolid</code></p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":586,"description":"<p>Render a 3d model to the screen.</p>\n","itemtype":"method","name":"model","params":[{"name":"model","description":"<p>Loaded 3d model to be rendered</p>\n","type":"p5.Geometry"}],"example":["\n<div>\n<code>\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}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  model(octahedron);\n}\n</code>\n</div>"],"alt":"Vertically rotating 3-d octahedron.","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/material.js","line":12,"description":"<p>Loads a custom shader from the provided vertex and fragment\nshader paths. The shader files are loaded asynchronously in the\nbackground, so this method should be used in <a href=\"#/p5/preload\">preload()</a>.</p>\n<p>For now, there are three main types of shaders. p5 will automatically\nsupply appropriate vertices, normals, colors, and lighting attributes\nif the parameters defined in the shader match the names.</p>\n","itemtype":"method","name":"loadShader","params":[{"name":"vertFilename","description":"<p>path to file containing vertex shader\nsource code</p>\n","type":"String"},{"name":"fragFilename","description":"<p>path to file containing fragment shader\nsource code</p>\n","type":"String"},{"name":"callback","description":"<p>callback to be executed after loadShader\ncompletes. On success, the Shader object is passed as the first argument.</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>callback to be executed when an error\noccurs inside loadShader. On error, the error is passed as the first\nargument.</p>\n","type":"Function","optional":true}],"return":{"description":"a shader object created from the provided\nvertex and fragment shader files.","type":"p5.Shader"},"example":["\n<div modernizr='webgl'>\n<code>\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}\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</code>\n</div>"],"alt":"zooming Mandelbrot set. a colorful, infinitely detailed fractal.","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":111,"itemtype":"method","name":"createShader","params":[{"name":"vertSrc","description":"<p>source code for the vertex shader</p>\n","type":"String"},{"name":"fragSrc","description":"<p>source code for the fragment shader</p>\n","type":"String"}],"return":{"description":"a shader object created from the provided\nvertex and fragment shaders.","type":"p5.Shader"},"example":["\n<div modernizr='webgl'>\n<code>\n// the 'varying's are shared between both vertex & fragment shaders\nlet varying = 'precision highp float; varying vec2 vPos;';\n\n// the vertex shader is called for each vertex\nlet vs =\n  varying +\n  'attribute vec3 aPosition;' +\n  'void main() { vPos = (gl_Position = vec4(aPosition,1.0)).xy; }';\n\n// the fragment shader is called for each pixel\nlet fs =\n  varying +\n  'uniform vec2 p;' +\n  'uniform float r;' +\n  'const int I = 500;' +\n  'void main() {' +\n  '  vec2 c = p + vPos * r, z = c;' +\n  '  float n = 0.0;' +\n  '  for (int i = I; i > 0; i --) {' +\n  '    if(z.x*z.x+z.y*z.y > 4.0) {' +\n  '      n = float(i)/float(I);' +\n  '      break;' +\n  '    }' +\n  '    z = vec2(z.x*z.x-z.y*z.y, 2.0*z.x*z.y) + c;' +\n  '  }' +\n  '  gl_FragColor = vec4(0.5-cos(n*17.0)/2.0,0.5-cos(n*13.0)/2.0,0.5-cos(n*23.0)/2.0,1.0);' +\n  '}';\n\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}\n\nfunction draw() {\n  // 'r' is the size of the image in Mandelbrot-space\n  mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));\n  quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n</code>\n</div>"],"alt":"zooming Mandelbrot set. a colorful, infinitely detailed fractal.","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":179,"description":"<p>The <a href=\"#/p5/shader\">shader()</a> function lets the user provide a custom shader\nto fill in shapes in WEBGL mode. Users can create their\nown shaders by loading vertex and fragment shaders with\n<a href=\"#/p5/loadShader\">loadShader()</a>.</p>\n","itemtype":"method","name":"shader","chainable":1,"params":[{"name":"s","description":"<p>the desired <a href=\"#/p5.Shader\">p5.Shader</a> to use for rendering\nshapes.</p>\n","type":"p5.Shader","optional":true}],"example":["\n<div modernizr='webgl'>\n<code>\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\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</code>\n</div>"],"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":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":270,"description":"<p>This function restores the default shaders in WEBGL mode. Code that runs\nafter resetShader() will not be affected by previously defined\nshaders. Should be run after <a href=\"#/p5/shader\">shader()</a>.</p>\n","itemtype":"method","name":"resetShader","chainable":1,"class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":283,"description":"<p>Normal material for geometry is a material that is not affected by light.\nIt is not reflective and is a placeholder material often used for debugging.\nSurfaces facing the X-axis, become red, those facing the Y-axis, become green and those facing the Z-axis, become blue.\nYou can view all possible materials in this\n<a href=\"https://p5js.org/examples/3d-materials.html\">example</a>.</p>\n","itemtype":"method","name":"normalMaterial","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  normalMaterial();\n  sphere(40);\n}\n</code>\n</div>"],"alt":"Red, green and blue gradient.","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":321,"description":"<p>Texture for geometry.  You can view other possible materials in this\n<a href=\"https://p5js.org/examples/3d-materials.html\">example</a>.</p>\n","itemtype":"method","name":"texture","params":[{"name":"tex","description":"<p>2-dimensional graphics\n                   to render as texture</p>\n","type":"p5.Image|p5.MediaElement|p5.Graphics"}],"chainable":1,"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  rotateZ(frameCount * 0.01);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  //pass image as texture\n  texture(img);\n  box(200, 200, 200);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet pg;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  pg = createGraphics(200, 200);\n  pg.textSize(75);\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</code>\n</div>\n\n<div>\n<code>\nlet vid;\nfunction preload() {\n  vid = createVideo('assets/fingers.mov');\n  vid.hide();\n}\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  //pass video frame as texture\n  texture(vid);\n  rect(-40, -40, 80, 80);\n}\n\nfunction mousePressed() {\n  vid.loop();\n}\n</code>\n</div>"],"alt":"Rotating view of many images umbrella and grid roof on a 3d plane\nblack canvas\nblack canvas","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":421,"description":"<p>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.\nThis function only works in WEBGL mode.</p>\n<p>With IMAGE, if an image is 100 x 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).</p>\n","itemtype":"method","name":"textureMode","params":[{"name":"mode","description":"<p>either IMAGE or NORMAL</p>\n","type":"Constant"}],"example":["\n<div>\n<code>\nlet img;\n\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"the underside of a white umbrella and gridded ceiling above","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":499,"description":"<p>Sets the global texture wrapping mode. This controls how textures behave\nwhen their uv's go outside of the 0 - 1 range. There are three options:\nCLAMP, REPEAT, and MIRROR.</p>\n<p>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</p>\n<p>REPEAT & MIRROR are only available if the texture\nis a power of two size (128, 256, 512, 1024, etc.).</p>\n<p>This method will affect all textures in your sketch until a subsequent\ntextureWrap call is made.</p>\n<p>If only one argument is provided, it will be applied to both the\nhorizontal and vertical axes.</p>\n","itemtype":"method","name":"textureWrap","params":[{"name":"wrapX","description":"<p>either CLAMP, REPEAT, or MIRROR</p>\n","type":"Constant"},{"name":"wrapY","description":"<p>either CLAMP, REPEAT, or MIRROR</p>\n","type":"Constant","optional":true}],"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies128.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  textureWrap(MIRROR);\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</code>\n</div>"],"alt":"an image of the rocky mountains repeated in mirrored tiles","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":571,"description":"<p>Ambient material for geometry with a given color. Ambient material defines the color the object reflects under any lighting.\nFor example, if the ambient material of an object is pure red, but the ambient lighting only contains green, the object will not reflect any light.\nHere's an <a href=\"https://p5js.org/examples/3d-materials.html\">example containing all possible materials</a>.</p>\n","itemtype":"method","name":"ambientMaterial","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(0);\n  noStroke();\n  ambientLight(200);\n  ambientMaterial(70, 130, 230);\n  sphere(40);\n}\n</code>\n</div>\n<div>\n<code>\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}\nfunction draw() {\n  background(70);\n  ambientLight(100); // white light\n  ambientMaterial(255, 0, 255); // pink material\n  box(30);\n}\n</code>\n</div>\n<div>\n<code>\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}\nfunction draw() {\n  background(70);\n  ambientLight(0, 255, 0); // green light\n  ambientMaterial(255, 0, 255); // pink material\n  box(30);\n}\n</code>\n</div>"],"alt":"radiating light source from top right of canvas\nbox reflecting only red and blue light\nbox reflecting no light","class":"p5","module":"Lights, Camera","submodule":"Material","overloads":[{"line":571,"params":[{"name":"v1","description":"<p>gray value, red or hue value\n                        (depending on the current color mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number","optional":true},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number","optional":true}],"chainable":1},{"line":631,"params":[{"name":"color","description":"<p>color, color Array, or CSS color string</p>\n","type":"Number[]|String|p5.Color"}],"chainable":1}]},{"file":"src/webgl/material.js","line":651,"description":"<p>Sets the emissive color of the material used for geometry drawn to\nthe screen. This is a misnomer in the sense that the material does not\nactually emit light that effects surrounding polygons. Instead,\nit gives the appearance that the object is glowing. An emissive material\nwill display at full strength even if there is no light for it to reflect.</p>\n","itemtype":"method","name":"emissiveMaterial","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(0);\n  noStroke();\n  ambientLight(0);\n  emissiveMaterial(130, 230, 0);\n  sphere(40);\n}\n</code>\n</div>"],"alt":"radiating light source from top right of canvas","class":"p5","module":"Lights, Camera","submodule":"Material","overloads":[{"line":651,"params":[{"name":"v1","description":"<p>gray value, red or hue value\n                        (depending on the current color mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number","optional":true},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number","optional":true},{"name":"a","description":"<p>opacity</p>\n","type":"Number","optional":true}],"chainable":1},{"line":683,"params":[{"name":"color","description":"<p>color, color Array, or CSS color string</p>\n","type":"Number[]|String|p5.Color"}],"chainable":1}]},{"file":"src/webgl/material.js","line":703,"description":"<p>Specular material for geometry with a given color. Specular material is a shiny reflective material.\nLike ambient material it also defines the color the object reflects under ambient lighting.\nFor example, if the specular material of an object is pure red, but the ambient lighting only contains green, the object will not reflect any light.\nFor all other types of light like point and directional light, a specular material will reflect the color of the light source to the viewer.\nHere's an <a href=\"https://p5js.org/examples/3d-materials.html\">example containing all possible materials</a>.</p>\n","itemtype":"method","name":"specularMaterial","chainable":1,"class":"p5","module":"Lights, Camera","submodule":"Material","overloads":[{"line":703,"params":[{"name":"gray","description":"<p>number specifying value between white and black.</p>\n","type":"Number"},{"name":"alpha","description":"<p>alpha value relative to current color range\n                                (default is 0-255)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":717,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":747,"params":[{"name":"color","description":"<p>color Array, or CSS color string</p>\n","type":"Number[]|String|p5.Color"}],"chainable":1}]},{"file":"src/webgl/material.js","line":767,"description":"<p>Sets the amount of gloss in the surface of shapes.\nUsed in combination with specularMaterial() in setting\nthe material properties of shapes. The default and minimum value is 1.</p>\n","itemtype":"method","name":"shininess","params":[{"name":"shine","description":"<p>Degree of Shininess.\n                      Defaults to 1.</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"Shininess on Camera changes position with mouse","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Camera.js","line":13,"description":"<p>Sets the camera position for a 3D sketch. Parameters for this function define\nthe position for the camera, the center of the sketch (where the camera is\npointing), and an up direction (the orientation of the camera).</p>\n<p>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 centerX value is positive, the camera\nis rotating to the right side of the sketch, so the object would seem like\nmoving to the left.</p>\n<p>See this <a href = \"https://www.openprocessing.org/sketch/740258\">example</a>\nto view the position of your camera.</p>\n<p>When called with no arguments, this function creates a default camera\nequivalent to\ncamera(0, 0, (height/2.0) / tan(PI*30.0 / 180.0), 0, 0, 0, 0, 1, 0);</p>\n","itemtype":"method","name":"camera","is_constructor":1,"params":[{"name":"x","description":"<p>camera position value on x axis</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>camera position value on y axis</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>camera position value on z axis</p>\n","type":"Number","optional":true},{"name":"centerX","description":"<p>x coordinate representing center of the sketch</p>\n","type":"Number","optional":true},{"name":"centerY","description":"<p>y coordinate representing center of the sketch</p>\n","type":"Number","optional":true},{"name":"centerZ","description":"<p>z coordinate representing center of the sketch</p>\n","type":"Number","optional":true},{"name":"upX","description":"<p>x component of direction 'up' from camera</p>\n","type":"Number","optional":true},{"name":"upY","description":"<p>y component of direction 'up' from camera</p>\n","type":"Number","optional":true},{"name":"upZ","description":"<p>z component of direction 'up' from camera</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>","\n<div>\n<code>\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  //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  camera(X, Y, Z, centerX, centerY, centerZ, 0, 1, 0);\n  stroke(255);\n  fill(255, 102, 94);\n  box(85);\n}\n</code>\n</div>"],"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 it's center.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":115,"description":"<p>Sets a perspective projection for the camera in a 3D sketch. This projection\nrepresents depth through foreshortening: objects that are close to the camera\nappear their actual size while those that are further away from the camera\nappear smaller. 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.</p>\n<p>When called with no arguments, the defaults\nprovided are equivalent to\nperspective(PI/3.0, width/height, eyeZ/10.0, eyeZ<em>10.0), where eyeZ\nis equal to ((height/2.0) / tan(PI</em>60.0/360.0));</p>\n","itemtype":"method","name":"perspective","params":[{"name":"fovy","description":"<p>camera frustum vertical field of view,\n                          from bottom to top of view, in <a href=\"#/p5/angleMode\">angleMode</a> units</p>\n","type":"Number","optional":true},{"name":"aspect","description":"<p>camera frustum aspect ratio</p>\n","type":"Number","optional":true},{"name":"near","description":"<p>frustum near plane length</p>\n","type":"Number","optional":true},{"name":"far","description":"<p>frustum far plane length</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n//drag the mouse to look around!\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  perspective(PI / 3.0, width / height, 0.1, 500);\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) * 95);\n  box(30);\n  pop();\n  push();\n  translate(15, 0, sin(frameCount / 30 + PI) * 95);\n  box(30);\n  pop();\n}\n</code>\n</div>"],"alt":"two colored 3D boxes move back and forth, rotating as mouse is dragged.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":175,"description":"<p>Sets an orthographic projection for the camera in a 3D sketch and defines a\nbox-shaped viewing frustum within which objects are seen. In this projection,\nall objects with the same dimension appear the same size, regardless of\nwhether they are near or far from the camera. The parameters to this\nfunction specify the viewing frustum where left and right are the minimum and\nmaximum x values, top and bottom are the minimum and maximum y values, and near\nand far are the minimum and maximum z values. If no parameters are given, the\ndefault is used: ortho(-width/2, width/2, -height/2, height/2).</p>\n","itemtype":"method","name":"ortho","params":[{"name":"left","description":"<p>camera frustum left plane</p>\n","type":"Number","optional":true},{"name":"right","description":"<p>camera frustum right plane</p>\n","type":"Number","optional":true},{"name":"bottom","description":"<p>camera frustum bottom plane</p>\n","type":"Number","optional":true},{"name":"top","description":"<p>camera frustum top plane</p>\n","type":"Number","optional":true},{"name":"near","description":"<p>camera frustum near plane</p>\n","type":"Number","optional":true},{"name":"far","description":"<p>camera frustum far plane</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n//drag the mouse to look around!\n//there's no vanishing point\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  ortho(-width / 2, width / 2, height / 2, -height / 2, 0, 500);\n}\nfunction draw() {\n  background(200);\n  orbitControl();\n  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</code>\n</div>"],"alt":"two 3D boxes move back and forth along same plane, rotating as mouse is dragged.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":231,"description":"<p>Sets a perspective matrix as defined by the parameters.</p>\n<p>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.</p>\n<p>Setting the frustum changes the perspective of the scene being rendered.\nThis can be achieved more simply in many cases by using\n<a href=\"https://p5js.org/reference/#/p5/perspective\">perspective()</a>.</p>\n","itemtype":"method","name":"frustum","params":[{"name":"left","description":"<p>camera frustum left plane</p>\n","type":"Number","optional":true},{"name":"right","description":"<p>camera frustum right plane</p>\n","type":"Number","optional":true},{"name":"bottom","description":"<p>camera frustum bottom plane</p>\n","type":"Number","optional":true},{"name":"top","description":"<p>camera frustum top plane</p>\n","type":"Number","optional":true},{"name":"near","description":"<p>camera frustum near plane</p>\n","type":"Number","optional":true},{"name":"far","description":"<p>camera frustum far plane</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  setAttributes('antialias', true);\n  frustum(-0.1, 0.1, -0.1, 0.1, 0.1, 200);\n}\nfunction draw() {\n  background(200);\n  orbitControl();\n  strokeWeight(10);\n  stroke(0, 0, 255);\n  noFill();\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</code>\n</div>"],"alt":"two 3D boxes move back and forth along same plane, rotating as mouse is dragged.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":297,"description":"<p>Creates a new <a href=\"#/p5.Camera\">p5.Camera</a> object and tells the\nrenderer to use that camera.\nReturns the p5.Camera object.</p>\n","itemtype":"method","name":"createCamera","return":{"description":"The newly created camera object.","type":"p5.Camera"},"example":["\n<div><code>\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  setCamera(camera);\n}\n\nfunction draw() {\n  camera.lookAt(0, 0, 0);\n  camera.setPosition(sin(frameCount / 60) * 200, 0, 100);\n  box(20);\n}\n</code></div>"],"alt":"An example that creates a camera and moves it around the box.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":425,"description":"<p>Sets a perspective projection for a p5.Camera object and sets parameters\nfor that projection according to <a href=\"#/p5/perspective\">perspective()</a>\nsyntax.</p>\n","itemtype":"method","name":"perspective","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":505,"description":"<p>Sets an orthographic projection for a p5.Camera object and sets parameters\nfor that projection according to <a href=\"#/p5/ortho\">ortho()</a> syntax.</p>\n","itemtype":"method","name":"ortho","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":564,"itemtype":"method","name":"frustum","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":669,"description":"<p>Panning rotates the camera view to the left and right.</p>\n","itemtype":"method","name":"pan","params":[{"name":"angle","description":"<p>amount to rotate camera in current\n<a href=\"#/p5/angleMode\">angleMode</a> units.\nGreater than 0 values rotate counterclockwise (to the left).</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet cam;\nlet delta = 0.01;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n  cam = createCamera();\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</code>\n</div>"],"alt":"camera view pans left and right across a series of rotating 3D boxes.","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":727,"description":"<p>Tilting rotates the camera view up and down.</p>\n","itemtype":"method","name":"tilt","params":[{"name":"angle","description":"<p>amount to rotate camera in current\n<a href=\"#/p5/angleMode\">angleMode</a> units.\nGreater than 0 values rotate counterclockwise (to the left).</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet cam;\nlet delta = 0.01;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n  cam = createCamera();\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</code>\n</div>"],"alt":"camera view tilts up and down across a series of rotating 3D boxes.","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":785,"description":"<p>Reorients the camera to look at a position in world space.</p>\n","itemtype":"method","name":"lookAt","params":[{"name":"x","description":"<p>x position of a point in world space</p>\n","type":"Number"},{"name":"y","description":"<p>y position of a point in world space</p>\n","type":"Number"},{"name":"z","description":"<p>z position of a point in world space</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet cam;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n  cam = createCamera();\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</code>\n</div>"],"alt":"camera view of rotating 3D cubes changes to look at a new random\npoint every second .","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":852,"description":"<p>Sets a camera's position and orientation.  This is equivalent to calling\n<a href=\"#/p5/camera\">camera()</a> on a p5.Camera object.</p>\n","itemtype":"method","name":"camera","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":933,"description":"<p>Move camera along its local axes while maintaining current camera orientation.</p>\n","itemtype":"method","name":"move","params":[{"name":"x","description":"<p>amount to move along camera's left-right axis</p>\n","type":"Number"},{"name":"y","description":"<p>amount to move along camera's up-down axis</p>\n","type":"Number"},{"name":"z","description":"<p>amount to move along camera's forward-backward axis</p>\n","type":"Number"}],"example":["\n<div>\n<code>\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}\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</code>\n</div>"],"alt":"camera view moves along a series of 3D boxes, maintaining the same\norientation throughout the move","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1005,"description":"<p>Set camera position in world-space while maintaining current camera\norientation.</p>\n","itemtype":"method","name":"setPosition","params":[{"name":"x","description":"<p>x position of a point in world space</p>\n","type":"Number"},{"name":"y","description":"<p>y position of a point in world space</p>\n","type":"Number"},{"name":"z","description":"<p>z position of a point in world space</p>\n","type":"Number"}],"example":["\n<div>\n<code>\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}\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</code>\n</div>"],"alt":"camera position changes as the user presses keys, altering view of a 3D box","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1270,"description":"<p>Sets rendererGL's current camera to a p5.Camera object.  Allows switching\nbetween multiple cameras.</p>\n","itemtype":"method","name":"setCamera","params":[{"name":"cam","description":"<p>p5.Camera object</p>\n","type":"p5.Camera"}],"example":["\n<div>\n<code>\nlet cam1, cam2;\nlet currentCamera;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n\n  cam1 = createCamera();\n  cam2 = createCamera();\n  cam2.setPosition(30, 0, 50);\n  cam2.lookAt(0, 0, 0);\n  cam2.ortho();\n\n  // set variable for previously active camera:\n  currentCamera = 1;\n}\n\nfunction draw() {\n  background(200);\n\n  // camera 1:\n  cam1.lookAt(0, 0, 0);\n  cam1.setPosition(sin(frameCount / 60) * 200, 0, 100);\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  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</code>\n</div>"],"alt":"Canvas switches between two camera views, each showing a series of spinning\n3D boxes.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Geometry.js","line":71,"description":"<p>computes faces for geometry objects based on the vertices.</p>\n","itemtype":"method","name":"computeFaces","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Geometry.js","line":114,"description":"<p>computes smooth normals per vertex as an average of each\nface.</p>\n","itemtype":"method","name":"computeNormals","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Geometry.js","line":153,"description":"<p>Averages the vertex normals. Used in curved\nsurfaces</p>\n","itemtype":"method","name":"averageNormals","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Geometry.js","line":174,"description":"<p>Averages pole normals.  Used in spherical primitives</p>\n","itemtype":"method","name":"averagePoleNormals","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Geometry.js","line":267,"description":"<p>Modifies all vertices to be centered within the range -100 to 100.</p>\n","itemtype":"method","name":"normalize","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.RendererGL.js","line":331,"description":"<p>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.</p>\n<p>Note that this will reinitialize the drawing context\nif called after the WebGL canvas is made.</p>\n<p>If an object is passed as the parameter, all attributes\nnot declared in the object will be set to defaults.</p>\n<p>The available attributes are:\n<br>\nalpha - indicates if the canvas contains an alpha buffer\ndefault is true</p>\n<p>depth - indicates whether the drawing buffer has a depth buffer\nof at least 16 bits - default is true</p>\n<p>stencil - indicates whether the drawing buffer has a stencil buffer\nof at least 8 bits</p>\n<p>antialias - indicates whether or not to perform anti-aliasing\ndefault is false (true in Safari)</p>\n<p>premultipliedAlpha - indicates that the page compositor will assume\nthe drawing buffer contains colors with pre-multiplied alpha\ndefault is false</p>\n<p>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</p>\n<p>perPixelLighting - if true, per-pixel lighting will be used in the\nlighting shader otherwise per-vertex lighting is used.\ndefault is true.</p>\n","itemtype":"method","name":"setAttributes","example":["\n<div>\n<code>\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</code>\n</div>\n<br>\nNow with the antialias attribute set to true.\n<br>\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"alt":"a rotating cube with smoother edges","class":"p5","module":"Rendering","submodule":"Rendering","overloads":[{"line":331,"params":[{"name":"key","description":"<p>Name of attribute</p>\n","type":"String"},{"name":"value","description":"<p>New value of named attribute</p>\n","type":"Boolean"}]},{"line":470,"params":[{"name":"obj","description":"<p>object with key-value pairs</p>\n","type":"Object"}]}]},{"file":"src/webgl/p5.Shader.js","line":296,"description":"<p>Wrapper around gl.uniform functions.\nAs we store uniform info in the shader we can use that\nto do type checking on the supplied data and call\nthe appropriate function.</p>\n","itemtype":"method","name":"setUniform","chainable":1,"params":[{"name":"uniformName","description":"<p>the name of the uniform in the\nshader program</p>\n","type":"String"},{"name":"data","description":"<p>the data to be associated\nwith that uniform; type varies (could be a single numerical value, array,\nmatrix, or texture / sampler reference)</p>\n","type":"Object|Number|Boolean|Number[]"}],"example":["\n<div modernizr='webgl'>\n<code>\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\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</code>\n</div>"],"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":"Lights, Camera","submodule":"Material"},{"file":"lib/addons/p5.sound.js","line":1,"class":"p5.sound","module":"Lights, Camera"},{"file":"lib/addons/p5.sound.js","line":52,"description":"<p>p5.sound \n<a href=\"https://p5js.org/reference/#/libraries/p5.sound\">https://p5js.org/reference/#/libraries/p5.sound</a></p>\n<p>From the Processing Foundation and contributors\n<a href=\"https://github.com/processing/p5.js-sound/graphs/contributors\">https://github.com/processing/p5.js-sound/graphs/contributors</a></p>\n<p>MIT License (MIT)\n<a href=\"https://github.com/processing/p5.js-sound/blob/master/LICENSE\">https://github.com/processing/p5.js-sound/blob/master/LICENSE</a></p>\n<p>Some of the many audio libraries & resources that inspire p5.sound:</p>\n<ul>\n<li><p>TONE.js (c) Yotam Mann. Licensed under The MIT License (MIT). <a href=\"https://github.com/TONEnoTONE/Tone.js\">https://github.com/TONEnoTONE/Tone.js</a></p>\n</li>\n<li><p>buzz.js (c) Jay Salvat. Licensed under The MIT License (MIT). <a href=\"http://buzz.jaysalvat.com/\">http://buzz.jaysalvat.com/</a></p>\n</li>\n<li><p>Boris Smus Web Audio API book, 2013. Licensed under the Apache License <a href=\"http://www.apache.org/licenses/LICENSE-2.0\">http://www.apache.org/licenses/LICENSE-2.0</a></p>\n</li>\n<li><p>wavesurfer.js <a href=\"https://github.com/katspaugh/wavesurfer.js\">https://github.com/katspaugh/wavesurfer.js</a></p>\n</li>\n<li><p>Web Audio Components by Jordan Santell <a href=\"https://github.com/web-audio-components\">https://github.com/web-audio-components</a></p>\n</li>\n<li><p>Wilm Thoben's Sound library for Processing <a href=\"https://github.com/processing/processing/tree/master/java/libraries/sound\">https://github.com/processing/processing/tree/master/java/libraries/sound</a></p>\n<p>Web Audio API: <a href=\"http://w3.org/TR/webaudio/\">http://w3.org/TR/webaudio/</a></p>\n</li>\n</ul>\n","class":"p5.sound","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":166,"description":"<p>Returns a number representing the master amplitude (volume) for sound\nin this sketch.</p>\n","itemtype":"method","name":"getMasterVolume","return":{"description":"Master amplitude (volume) for sound in this sketch.\n                 Should be between 0.0 (silence) and 1.0.","type":"Number"},"class":"p5.sound","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":178,"description":"<p>Scale the output of all sound in this sketch</p>\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 <code>rampTime</code> parameter. For more\ncomplex fades, see the Envelope class.\n\n<p>Alternately, you can pass in a signal source such as an\noscillator to modulate the amplitude with an audio signal.</p>\n<p><b>How This Works</b>: 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.</p>\n\n<p>If no value is provided, returns a Web Audio API Gain Node</p>","itemtype":"method","name":"masterVolume","params":[{"name":"volume","description":"<p>Volume (amplitude) between 0.0\n                                   and 1.0 or modulating signal/oscillator</p>\n","type":"Number|Object"},{"name":"rampTime","description":"<p>Fade for t seconds</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>Schedule this event to happen at\n                               t seconds in the future</p>\n","type":"Number","optional":true}],"class":"p5.sound","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":221,"description":"<p><code>p5.soundOut</code> is the p5.sound master output. It sends output to\nthe destination of this window's web audio context. It contains\nWeb Audio API nodes including a dyanmicsCompressor (<code>.limiter</code>),\nand Gain Nodes for <code>.input</code> and <code>.output</code>.</p>\n","itemtype":"property","name":"soundOut","type":"Object","class":"p5.sound","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":300,"description":"<p>In classes that extend\np5.Effect, connect effect nodes\nto the wet parameter</p>\n","class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":316,"description":"<p>Set the output volume of the filter.</p>\n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"<p>amplitude between 0 and 1.0</p>\n","type":"Number","optional":true},{"name":"rampTime","description":"<p>create a fade that lasts until rampTime</p>\n","type":"Number","optional":true},{"name":"tFromNow","description":"<p>schedule this event to happen in tFromNow seconds</p>\n","type":"Number","optional":true}],"class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":336,"description":"<p>Link effects together in a chain\nExample usage: filter.chain(reverb, delay, panner);\nMay be used with an open-ended number of arguments</p>\n","itemtype":"method","name":"chain","params":[{"name":"arguments","description":"<p>Chain together multiple sound objects</p>\n","type":"Object","optional":true}],"class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":358,"description":"<p>Adjust the dry/wet value.</p>\n","itemtype":"method","name":"drywet","params":[{"name":"fade","description":"<p>The desired drywet value (0 - 1.0)</p>\n","type":"Number","optional":true}],"class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":374,"description":"<p>Send output to a p5.js-sound, Web Audio Node, or use signal to\ncontrol an AudioParam</p>\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":388,"description":"<p>Disconnect all output.</p>\n","itemtype":"method","name":"disconnect","class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":451,"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":455,"description":"<p>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.</p>\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":470,"description":"<p>Returns the closest MIDI note value for\na given frequency.</p>\n","itemtype":"method","name":"freqToMidi","params":[{"name":"frequency","description":"<p>A freqeuncy, for example, the \"A\"\n                           above Middle C is 440Hz</p>\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":486,"description":"<p>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.</p>\n","itemtype":"method","name":"midiToFreq","params":[{"name":"midiNote","description":"<p>The number of a MIDI note</p>\n","type":"Number"}],"return":{"description":"Frequency value of the given MIDI note","type":"Number"},"example":["\n<div><code>\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</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":570,"description":"<p>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.\n<a href=\"http://media.io/\">Here</a> is a free online file\nconverter.</p>\n","itemtype":"method","name":"soundFormats","params":[{"name":"formats","description":"<p>i.e. 'mp3', 'wav', 'ogg'</p>\n","type":"String","optional":true,"multiple":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":688,"description":"<p>Used by Osc and Envelope to chain signal math</p>\n","class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":967,"description":"<p>The p5.Filter is built with a\n<a href=\"http://www.w3.org/TR/webaudio/#BiquadFilterNode\">\nWeb Audio BiquadFilter Node</a>.</p>\n","itemtype":"property","name":"biquadFilter","type":"DelayNode","class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":989,"description":"<p>Filter an audio signal according to a set\nof filter parameters.</p>\n","itemtype":"method","name":"process","params":[{"name":"Signal","description":"<p>An object that outputs audio</p>\n","type":"Object"},{"name":"freq","description":"<p>Frequency in Hz, from 10 to 22050</p>\n","type":"Number","optional":true},{"name":"res","description":"<p>Resonance/Width of the filter frequency\n                      from 0.001 to 1000</p>\n","type":"Number","optional":true}],"class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1004,"description":"<p>Set the frequency and the resonance of the filter.</p>\n","itemtype":"method","name":"set","params":[{"name":"freq","description":"<p>Frequency in Hz, from 10 to 22050</p>\n","type":"Number","optional":true},{"name":"res","description":"<p>Resonance (Q) from 0.001 to 1000</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1024,"description":"<p>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).</p>\n","itemtype":"method","name":"freq","params":[{"name":"freq","description":"<p>Filter Frequency</p>\n","type":"Number"},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\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":1053,"description":"<p>Controls either width of a bandpass frequency,\nor the resonance of a low/highpass cutoff frequency.</p>\n","itemtype":"method","name":"res","params":[{"name":"res","description":"<p>Resonance/Width of filter freq\n                     from 0.001 to 1000</p>\n","type":"Number"},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\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":1079,"description":"<p>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.</p>\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":1104,"description":"<p>Toggle function. Switches between the specified type and allpass</p>\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":1123,"description":"<p>Set the type of a p5.Filter. Possible types include:\n\"lowpass\" (default), \"highpass\", \"bandpass\",\n\"lowshelf\", \"highshelf\", \"peaking\", \"notch\",\n\"allpass\".</p>\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":1218,"description":"<p>Returns the Audio Context for this sketch. Useful for users\nwho would like to dig deeper into the <a target='_blank' href=\n'http://webaudio.github.io/web-audio-api/'>Web Audio API\n</a>.</p>\n\n<p>Some browsers require users to startAudioContext\nwith a user gesture, such as touchStarted in the example below.</p>","itemtype":"method","name":"getAudioContext","return":{"description":"AudioContext for this sketch","type":"Object"},"example":["\n<div><code>\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</div></code>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1257,"description":"<p>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\n<a href=\"https://goo.gl/7K7WLu\" title=\"Google Chrome's autoplay\npolicy\">Google Chrome</a>, which create the Web Audio API's\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/AudioContext\"\ntitle=\"Audio Context @ MDN\">Audio Context</a>\nin a suspended state.</p>\n\n<p>In these browser-specific policies, sound will not play until a user\ninteraction event (i.e. <code>mousePressed()</code>) explicitly resumes\nthe AudioContext, or starts an audio node. This can be accomplished by\ncalling <code>start()</code> on a <code>p5.Oscillator</code>,\n<code> play()</code> on a <code>p5.SoundFile</code>, or simply\n<code>userStartAudio()</code>.</p>\n\n<p><code>userStartAudio()</code> 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 <code>mousePressed()</code> as in the\nexample below. This method utilizes\n<a href=\"https://github.com/tambien/StartAudioContext\">StartAudioContext\n</a>, a library by Yotam Mann (MIT Licence, 2016).</p>","params":[{"name":"element(s)","description":"<p>This argument can be an Element,\n                              Selector String, NodeList, p5.Element,\n                              jQuery Element, or an Array of any of those.</p>\n","type":"Element|Array","optional":true},{"name":"callback","description":"<p>Callback to invoke when the AudioContext\n                              has started</p>\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<div><code>\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</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1477,"description":"<p>Start an oscillator.</p>\n<p>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: <code>userStartAudio()</code>.</p>\n","itemtype":"method","name":"start","params":[{"name":"time","description":"<p>startTime in seconds from now.</p>\n","type":"Number","optional":true},{"name":"frequency","description":"<p>frequency in Hz.</p>\n","type":"Number","optional":true}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1525,"description":"<p>Stop an oscillator. Accepts an optional parameter\nto determine how long (in seconds from now) until the\noscillator stops.</p>\n","itemtype":"method","name":"stop","params":[{"name":"secondsFromNow","description":"<p>Time, in seconds from now.</p>\n","type":"Number"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1544,"description":"<p>Set the amplitude between 0 and 1.0. Or, pass in an object\nsuch as an oscillator to modulate amplitude with an audio signal.</p>\n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"<p>between 0 and 1.0\n                            or a modulating signal/oscillator</p>\n","type":"Number|Object"},{"name":"rampTime","description":"<p>create a fade that lasts rampTime</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\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":1584,"description":"<p>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.</p>\n","itemtype":"method","name":"freq","params":[{"name":"Frequency","description":"<p>Frequency in Hz\n                                      or modulating signal/oscillator</p>\n","type":"Number|Object"},{"name":"rampTime","description":"<p>Ramp time (in seconds)</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>Schedule this event to happen\n                                 at x seconds from now</p>\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<div><code>\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</code></div>"],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1662,"description":"<p>Set type to 'sine', 'triangle', 'sawtooth' or 'square'.</p>\n","itemtype":"method","name":"setType","params":[{"name":"type","description":"<p>'sine', 'triangle', 'sawtooth' or 'square'.</p>\n","type":"String"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1678,"description":"<p>Connect to a p5.sound / Web Audio object.</p>\n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"<p>A p5.sound or Web Audio object</p>\n","type":"Object"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1698,"description":"<p>Disconnect all outputs</p>\n","itemtype":"method","name":"disconnect","class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1721,"description":"<p>Pan between Left (-1) and Right (1)</p>\n","itemtype":"method","name":"pan","params":[{"name":"panning","description":"<p>Number between -1 and 1</p>\n","type":"Number"},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1759,"description":"<p>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.</p>\n","itemtype":"method","name":"phase","params":[{"name":"phase","description":"<p>float between 0.0 and 1.0</p>\n","type":"Number"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1818,"description":"<p>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.</p>\n","itemtype":"method","name":"add","params":[{"name":"number","description":"<p>Constant number to add</p>\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":1838,"description":"<p>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.</p>\n","itemtype":"method","name":"mult","params":[{"name":"number","description":"<p>Constant number to multiply</p>\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":1857,"description":"<p>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.</p>\n","itemtype":"method","name":"scale","params":[{"name":"inMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"inMax","description":"<p>input range maximum</p>\n","type":"Number"},{"name":"outMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"outMax","description":"<p>input range maximum</p>\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":2067,"description":"<p>Play tells the MonoSynth to start playing a note. This method schedules\nthe calling of .triggerAttack and .triggerRelease.</p>\n","itemtype":"method","name":"play","params":[{"name":"note","description":"<p>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 <a href = \"https://github.com/Tonejs/Tone.js/wiki/Instruments\">\n                               Tone</a>. Defaults to 440 hz.</p>\n","type":"String | Number"},{"name":"velocity","description":"<p>velocity of the note to play (ranging from 0 to 1)</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time from now (in seconds) at which to play</p>\n","type":"Number","optional":true},{"name":"sustainTime","description":"<p>time to sustain before releasing the envelope. Defaults to 0.15 seconds.</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>\n"],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2116,"description":"<p>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.</p>\n","params":[{"name":"note","description":"<p>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 <a href = \"https://github.com/Tonejs/Tone.js/wiki/Instruments\">\n                               Tone</a>. Defaults to 440 hz</p>\n","type":"String | Number"},{"name":"velocity","description":"<p>velocity of the note to play (ranging from 0 to 1)</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time from now (in seconds) at which to play</p>\n","type":"Number","optional":true}],"itemtype":"method","name":"triggerAttack","example":["\n<div><code>\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</code></div>"],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2162,"description":"<p>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.</p>\n","params":[{"name":"secondsFromNow","description":"<p>time to trigger the release</p>\n","type":"Number"}],"itemtype":"method","name":"triggerRelease","example":["\n<div><code>\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</code></div>"],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2199,"description":"<p>Set values like a traditional\n<a href=\"https://en.wikipedia.org/wiki/Synthesizer#/media/File:ADSR_parameter.svg\">\nADSR envelope\n</a>.</p>\n","itemtype":"method","name":"setADSR","params":[{"name":"attackTime","description":"<p>Time (in seconds before envelope\n                              reaches Attack Level</p>\n","type":"Number"},{"name":"decayTime","description":"<p>Time (in seconds) before envelope\n                              reaches Decay/Sustain Level</p>\n","type":"Number","optional":true},{"name":"susRatio","description":"<p>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 <code>setRange</code>),\n                              then decayLevel would increase proportionally, to become 0.5.</p>\n","type":"Number","optional":true},{"name":"releaseTime","description":"<p>Time in seconds from now (defaults to 0)</p>\n","type":"Number","optional":true}],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2226,"description":"<p>Getters and Setters</p>\n","itemtype":"property","name":"attack","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2232,"itemtype":"property","name":"decay","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2237,"itemtype":"property","name":"sustain","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2242,"itemtype":"property","name":"release","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2282,"description":"<p>MonoSynth amp</p>\n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"<p>desired volume</p>\n","type":"Number"},{"name":"rampTime","description":"<p>Time to reach new volume</p>\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":2300,"description":"<p>Connect to a p5.sound / Web Audio object.</p>\n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"<p>A p5.sound or Web Audio object</p>\n","type":"Object"}],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2313,"description":"<p>Disconnect all outputs</p>\n","itemtype":"method","name":"disconnect","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2326,"description":"<p>Get rid of the MonoSynth and free up its resources / memory.</p>\n","itemtype":"method","name":"dispose","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2380,"description":"<p>Connect to p5 objects or Web Audio Nodes</p>\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":2392,"description":"<p>Disconnect from soundOut</p>\n","itemtype":"method","name":"disconnect","class":"p5.AudioVoice","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2474,"description":"<p>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.</p>\n","itemtype":"property","name":"notes","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2487,"description":"<p>A PolySynth must have at least 1 voice, defaults to 8</p>\n","itemtype":"property","name":"polyvalue","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2493,"description":"<p>Monosynth that generates the sound for each note that is triggered. The\np5.PolySynth defaults to using the p5.MonoSynth as its voice.</p>\n","itemtype":"property","name":"AudioVoice","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2530,"description":"<p>Play a note by triggering noteAttack and noteRelease with sustain time</p>\n","itemtype":"method","name":"play","params":[{"name":"note","description":"<p>midi note to play (ranging from 0 to 127 - 60 being a middle C)</p>\n","type":"Number","optional":true},{"name":"velocity","description":"<p>velocity of the note to play (ranging from 0 to 1)</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time from now (in seconds) at which to play</p>\n","type":"Number","optional":true},{"name":"sustainTime","description":"<p>time to sustain before releasing the envelope</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2578,"description":"<p>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.</p>\n","itemtype":"method","name":"noteADSR","params":[{"name":"note","description":"<p>Midi note on which ADSR should be set.</p>\n","type":"Number","optional":true},{"name":"attackTime","description":"<p>Time (in seconds before envelope\n                              reaches Attack Level</p>\n","type":"Number","optional":true},{"name":"decayTime","description":"<p>Time (in seconds) before envelope\n                              reaches Decay/Sustain Level</p>\n","type":"Number","optional":true},{"name":"susRatio","description":"<p>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 <code>setRange</code>),\n                              then decayLevel would increase proportionally, to become 0.5.</p>\n","type":"Number","optional":true},{"name":"releaseTime","description":"<p>Time in seconds from now (defaults to 0)</p>\n","type":"Number","optional":true}],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2609,"description":"<p>Set the PolySynths global envelope. This method modifies the envelopes of each\nmonosynth so that all notes are played with this envelope.</p>\n","itemtype":"method","name":"setADSR","params":[{"name":"attackTime","description":"<p>Time (in seconds before envelope\n                               reaches Attack Level</p>\n","type":"Number","optional":true},{"name":"decayTime","description":"<p>Time (in seconds) before envelope\n                               reaches Decay/Sustain Level</p>\n","type":"Number","optional":true},{"name":"susRatio","description":"<p>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 <code>setRange</code>),\n                               then decayLevel would increase proportionally, to become 0.5.</p>\n","type":"Number","optional":true},{"name":"releaseTime","description":"<p>Time in seconds from now (defaults to 0)</p>\n","type":"Number","optional":true}],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2636,"description":"<p>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.</p>\n","itemtype":"method","name":"noteAttack","params":[{"name":"note","description":"<p>midi note on which attack should be triggered.</p>\n","type":"Number","optional":true},{"name":"velocity","description":"<p>velocity of the note to play (ranging from 0 to 1)/</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time from now (in seconds)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2746,"description":"<p>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.</p>\n","itemtype":"method","name":"noteRelease","params":[{"name":"note","description":"<p>midi note on which attack should be triggered.\n                                  If no value is provided, all notes will be released.</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time to trigger the release</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>\n"],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2829,"description":"<p>Connect to a p5.sound / Web Audio object.</p>\n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"<p>A p5.sound or Web Audio object</p>\n","type":"Object"}],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2842,"description":"<p>Disconnect all outputs</p>\n","itemtype":"method","name":"disconnect","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2855,"description":"<p>Get rid of the MonoSynth and free up its resources / memory.</p>\n","itemtype":"method","name":"dispose","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2969,"description":"<p>This module has shims</p>\n","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3105,"description":"<p>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</p>\n","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3492,"description":"<p>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<a href=\"https://github.com/processing/p5.js/wiki/Local-server\">\nlocal server</a> is recommended when loading external files.</p>\n","itemtype":"method","name":"loadSound","params":[{"name":"path","description":"<p>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.</p>\n","type":"String|Array"},{"name":"successCallback","description":"<p>Name of a function to call once file loads</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>Name of a function to call if there is\n                                    an error loading the file.</p>\n","type":"Function","optional":true},{"name":"whileLoading","description":"<p>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.</p>\n","type":"Function","optional":true}],"return":{"description":"Returns a p5.SoundFile","type":"SoundFile"},"example":["\n<div><code>\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</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3672,"description":"<p>Returns true if the sound file finished loading successfully.</p>\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":3688,"description":"<p>Play the p5.SoundFile</p>\n","itemtype":"method","name":"play","params":[{"name":"startTime","description":"<p>(optional) schedule playback to start (in seconds from now).</p>\n","type":"Number","optional":true},{"name":"rate","description":"<p>(optional) playback rate</p>\n","type":"Number","optional":true},{"name":"amp","description":"<p>(optional) amplitude (volume)\n                                    of playback</p>\n","type":"Number","optional":true},{"name":"cueStart","description":"<p>(optional) cue start time in seconds</p>\n","type":"Number","optional":true},{"name":"duration","description":"<p>(optional) duration of playback in seconds</p>\n","type":"Number","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3795,"description":"<p>p5.SoundFile has two play modes: <code>restart</code> and\n<code>sustain</code>. 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.</p>\n","itemtype":"method","name":"playMode","params":[{"name":"str","description":"<p>'restart' or 'sustain' or 'untilDone'</p>\n","type":"String"}],"example":["\n<div><code>\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 </code></div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3854,"description":"<p>Pauses a file that is currently playing. If the file is not\nplaying, then nothing will happen.</p>\n<p>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().</p>\n","itemtype":"method","name":"pause","params":[{"name":"startTime","description":"<p>(optional) schedule event to occur\n                             seconds from now</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code>\n</div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3911,"description":"<p>Loop the p5.SoundFile. Accepts optional parameters to set the\nplayback rate, playback volume, loopStart, loopEnd.</p>\n","itemtype":"method","name":"loop","params":[{"name":"startTime","description":"<p>(optional) schedule event to occur\n                            seconds from now</p>\n","type":"Number","optional":true},{"name":"rate","description":"<p>(optional) playback rate</p>\n","type":"Number","optional":true},{"name":"amp","description":"<p>(optional) playback volume</p>\n","type":"Number","optional":true},{"name":"cueLoopStart","description":"<p>(optional) startTime in seconds</p>\n","type":"Number","optional":true},{"name":"duration","description":"<p>(optional) loop duration in seconds</p>\n","type":"Number","optional":true}],"example":["\n <div><code>\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 </code>\n </div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3955,"description":"<p>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.</p>\n","itemtype":"method","name":"setLoop","params":[{"name":"Boolean","description":"<p>set looping to true or false</p>\n","type":"Boolean"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3980,"description":"<p>Returns 'true' if a p5.SoundFile is currently looping and playing, 'false' if not.</p>\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":4000,"description":"<p>Returns true if a p5.SoundFile is playing, false if not (i.e.\npaused or stopped).</p>\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":4013,"description":"<p>Returns true if a p5.SoundFile is paused, false if not (i.e.\nplaying or stopped).</p>\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":4026,"description":"<p>Stop soundfile playback.</p>\n","itemtype":"method","name":"stop","params":[{"name":"startTime","description":"<p>(optional) schedule event to occur\n                            in seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4083,"description":"<p>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 <code>rampTime</code> parameter. For more\ncomplex fades, see the Envelope class.</p>\n<p>Alternately, you can pass in a signal source such as an\noscillator to modulate the amplitude with an audio signal.</p>\n","itemtype":"method","name":"setVolume","params":[{"name":"volume","description":"<p>Volume (amplitude) between 0.0\n                                   and 1.0 or modulating signal/oscillator</p>\n","type":"Number|Object"},{"name":"rampTime","description":"<p>Fade for t seconds</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>Schedule this event to happen at\n                               t seconds in the future</p>\n","type":"Number","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4128,"description":"<p>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).</p>\n","itemtype":"method","name":"pan","params":[{"name":"panValue","description":"<p>Set the stereo panner</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                                seconds from now</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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 </div></code>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4171,"description":"<p>Returns the current stereo pan position (-1.0 to 1.0)</p>\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":4185,"description":"<p>Set the playback rate of a sound file. Will change the speed and the pitch.\nValues less than zero will reverse the audio buffer.</p>\n","itemtype":"method","name":"rate","params":[{"name":"playbackRate","description":"<p>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.</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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 </code>\n </div>\n"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4275,"description":"<p>Returns the duration of a sound file in seconds.</p>\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":4291,"description":"<p>Return the current position of the p5.SoundFile playhead, in seconds.\nTime is relative to the normal buffer direction, so if <code>reverseBuffer</code>\nhas been called, currentTime will count backwards.</p>\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":4305,"description":"<p>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 <code>play</code> or <code>loop</code> methods.</p>\n","itemtype":"method","name":"jump","params":[{"name":"cueTime","description":"<p>cueTime of the soundFile in seconds.</p>\n","type":"Number"},{"name":"duration","description":"<p>duration in seconds.</p>\n","type":"Number"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4336,"description":"<p>Return the number of channels in a sound file.\nFor example, Mono = 1, Stereo = 2.</p>\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":4349,"description":"<p>Return the sample rate of the sound file.</p>\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":4361,"description":"<p>Return the number of samples in a sound file.\nEqual to sampleRate * duration.</p>\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":4374,"description":"<p>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.</p>\n<p>Inspired by Wavesurfer.js.</p>\n","itemtype":"method","name":"getPeaks","params":[{"name":"length","description":"<p>length is the size of the returned array.\n                         Larger length results in more precision.\n                         Defaults to 5*width of the browser window.</p>\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":4435,"description":"<p>Reverses the p5.SoundFile's buffer source.\nPlayback must be handled separately (see example).</p>\n","itemtype":"method","name":"reverseBuffer","example":["\n<div><code>\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 </code>\n </div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4488,"description":"<p>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.</p>\n","itemtype":"method","name":"onended","params":[{"name":"callback","description":"<p>function to call when the\n                            soundfile has ended.</p>\n","type":"Function"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4553,"description":"<p>Connects the output of a p5sound object to input of another\np5.sound object. For example, you may connect a p5.SoundFile to an\nFFT or an Effect. If no parameter is given, it will connect to\nthe master output. Most p5sound objects connect to the master\noutput when they are created.</p>\n","itemtype":"method","name":"connect","params":[{"name":"object","description":"<p>Audio object that accepts an input</p>\n","type":"Object","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4577,"description":"<p>Disconnects the output of this p5sound object.</p>\n","itemtype":"method","name":"disconnect","class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4590,"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4597,"description":"<p>Reset the source for this SoundFile to a\nnew path (URL).</p>\n","itemtype":"method","name":"setPath","params":[{"name":"path","description":"<p>path to audio file</p>\n","type":"String"},{"name":"callback","description":"<p>Callback</p>\n","type":"Function"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4614,"description":"<p>Replace the current Audio Buffer with a new Buffer.</p>\n","itemtype":"method","name":"setBuffer","params":[{"name":"buf","description":"<p>Array of Float32 Array(s). 2 Float32 Arrays\n                   will create a stereo source. 1 will create\n                   a mono source.</p>\n","type":"Array"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4708,"description":"<p>processPeaks returns an array of timestamps where it thinks there is a beat.</p>\n<p>This is an asynchronous function that processes the soundfile in an offline audio context,\nand sends the results to your callback function.</p>\n<p>The process involves running the soundfile through a lowpass filter, and finding all of the\npeaks above the initial threshold. If the total number of peaks are below the minimum number of peaks,\nit decreases the threshold and re-runs the analysis until either minPeaks or minThreshold are reached.</p>\n","itemtype":"method","name":"processPeaks","params":[{"name":"callback","description":"<p>a function to call once this data is returned</p>\n","type":"Function"},{"name":"initThreshold","description":"<p>initial threshold defaults to 0.9</p>\n","type":"Number","optional":true},{"name":"minThreshold","description":"<p>minimum threshold defaults to 0.22</p>\n","type":"Number","optional":true},{"name":"minPeaks","description":"<p>minimum number of peaks defaults to 200</p>\n","type":"Number","optional":true}],"return":{"description":"Array of timestamped peaks","type":"Array"},"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4929,"description":"<p>Schedule events to trigger every time a MediaElement\n(audio/video) reaches a playback cue point.</p>\n<p>Accepts a callback function, a time (in seconds) at which to trigger\nthe callback, and an optional parameter for the callback.</p>\n<p>Time will be passed as the first parameter to the callback function,\nand param will be the second parameter.</p>\n","itemtype":"method","name":"addCue","params":[{"name":"time","description":"<p>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.</p>\n","type":"Number"},{"name":"callback","description":"<p>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.</p>\n","type":"Function"},{"name":"value","description":"<p>An object to be passed as the\n                           second parameter to the\n                           callback function.</p>\n","type":"Object","optional":true}],"return":{"description":"id ID of this cue,\n                    useful for removeCue(id)","type":"Number"},"example":["\n<div><code>\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</code></div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4999,"description":"<p>Remove a callback based on its ID. The ID is returned by the\naddCue method.</p>\n","itemtype":"method","name":"removeCue","params":[{"name":"id","description":"<p>ID of the cue, as returned by addCue</p>\n","type":"Number"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5025,"description":"<p>Remove all of the callbacks that had originally been scheduled\nvia the addCue method.</p>\n","itemtype":"method","name":"clearCues","class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5054,"description":"<p>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\n<a href=\"/docs/reference/#/p5.SoundFile/getBlob\">getBlob</a></p>\n","itemtype":"method","name":"save","params":[{"name":"fileName","description":"<p>name of the resulting .wav file.</p>\n","type":"String","optional":true}],"example":["\n <div><code>\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</code></div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5085,"description":"<p>This method is useful for sending a SoundFile to a server. It returns the\n.wav-encoded audio data as a \"<a target=\"_blank\" title=\"Blob reference at\nMDN\" href=\"https://developer.mozilla.org/en-US/docs/Web/API/Blob\">Blob</a>\".\nA Blob is a file-like data object that can be uploaded to a server\nwith an <a href=\"/docs/reference/#/p5/httpDo\">http</a> request. We'll\nuse the <code>httpDo</code> options object to send a POST request with some\nspecific options: we encode the request as <code>multipart/form-data</code>,\nand attach the blob as one of the form values using <code>FormData</code>.</p>\n","itemtype":"method","name":"getBlob","return":{"description":"A file-like data object","type":"Blob"},"example":["\n <div><code>\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 `<Audio>` Element accepts Object URL's\n   createAudio(blobUrl).showControls();\n\n   createDiv();\n\n   // The ObjectURL exists as long as this tab is open\n   let input = createInput(blobUrl);\n   input.attribute('readonly', true);\n   input.mouseClicked(function() { input.elt.select() });\n }\n\n</code></div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5276,"description":"<p>Connects to the p5sound instance (master output) by default.\nOptionally, you can pass in a specific source (i.e. a soundfile).</p>\n","itemtype":"method","name":"setInput","params":[{"name":"snd","description":"<p>set the sound source\n                                     (optional, defaults to\n                                     master output)</p>\n","type":"SoundObject|undefined","optional":true},{"name":"smoothing","description":"<p>a range between 0.0 and 1.0\n                                      to smooth amplitude readings</p>\n","type":"Number|undefined","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5367,"description":"<p>Returns a single Amplitude reading at the moment it is called.\nFor continuous readings, run in the draw loop.</p>\n","itemtype":"method","name":"getLevel","params":[{"name":"channel","description":"<p>Optionally return only channel 0 (left) or 1 (right)</p>\n","type":"Number","optional":true}],"return":{"description":"Amplitude as a number between 0.0 and 1.0","type":"Number"},"example":["\n<div><code>\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</code></div>"],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5421,"description":"<p>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.</p>\n","itemtype":"method","name":"toggleNormalize","params":[{"name":"boolean","description":"<p>set normalize to true (1) or false (0)</p>\n","type":"Boolean","optional":true}],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5449,"description":"<p>Smooth Amplitude analysis by averaging with the last analysis\nframe. Off by default.</p>\n","itemtype":"method","name":"smooth","params":[{"name":"set","description":"<p>smoothing from 0.0 <= 1</p>\n","type":"Number"}],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5625,"description":"<p>Set the input source for the FFT analysis. If no source is\nprovided, FFT will analyze all sound in the sketch.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"source","description":"<p>p5.sound object (or web audio API source node)</p>\n","type":"Object","optional":true}],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5648,"description":"<p>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.</p>\n","itemtype":"method","name":"waveform","params":[{"name":"bins","description":"<p>Must be a power of two between\n                          16 and 1024. Defaults to 1024.</p>\n","type":"Number","optional":true},{"name":"precision","description":"<p>If any value is provided, will return results\n                            in a Float32 Array which is more precise\n                            than a regular array.</p>\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":5699,"description":"<p>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\n<code>getEnergy()</code>.</p>\n","itemtype":"method","name":"analyze","params":[{"name":"bins","description":"<p>Must be a power of two between\n                           16 and 1024. Defaults to 1024.</p>\n","type":"Number","optional":true},{"name":"scale","description":"<p>If \"dB,\" returns decibel\n                           float measurements between\n                           -140 and 0 (max).\n                           Otherwise returns integers from 0-255.</p>\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<div><code>\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</code></div>\n\n"],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5795,"description":"<p>Returns the amount of energy (volume) at a specific\n<a href=\"https://en.wikipedia.org/wiki/Audio_frequency\" target=\"_blank\">\nfrequency</a>, 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).\n<em>NOTE: analyze() must be called prior to getEnergy(). Analyze()\ntells the FFT to analyze frequency data, and getEnergy() uses\nthe results determine the value at a specific frequency or\nrange of frequencies.</em></p></p>\n","itemtype":"method","name":"getEnergy","params":[{"name":"frequency1","description":"<p>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.</p>\n","type":"Number|String"},{"name":"frequency2","description":"<p>If a second frequency is given,\n                              will return average amount of\n                              energy that exists between the\n                              two frequencies.</p>\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":5882,"description":"<p>Returns the\n<a href=\"http://en.wikipedia.org/wiki/Spectral_centroid\" target=\"_blank\">\nspectral centroid</a> of the input signal.\n<em>NOTE: analyze() must be called prior to getCentroid(). Analyze()\ntells the FFT to analyze frequency data, and getCentroid() uses\nthe results determine the spectral centroid.</em></p></p>\n","itemtype":"method","name":"getCentroid","return":{"description":"Spectral Centroid Frequency   Frequency of the spectral centroid in Hz.","type":"Number"},"example":["\n<div><code>\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 </code></div>"],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5968,"description":"<p>Smooth FFT analysis by averaging with the last analysis frame.</p>\n","itemtype":"method","name":"smooth","params":[{"name":"smoothing","description":"<p>0.0 < smoothing < 1.0.\n                             Defaults to 0.8.</p>\n","type":"Number"}],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5994,"description":"<p>Returns an array of average amplitude values for a given number\nof frequency bands split equally. N defaults to 16.\n<em>NOTE: 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.</em></p></p>\n","itemtype":"method","name":"linAverages","params":[{"name":"N","description":"<p>Number of returned frequency groups</p>\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":6028,"description":"<p>Returns an array of average amplitude values of the spectrum, for a given\nset of <a href=\"https://en.wikipedia.org/wiki/Octave_band\" target=\"_blank\">\nOctave Bands</a>\n<em>NOTE: 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.</em></p></p>\n","itemtype":"method","name":"logAverages","params":[{"name":"octaveBands","description":"<p>Array of Octave Bands objects for grouping</p>\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":6063,"description":"<p>Calculates and Returns the 1/N\n<a href=\"https://en.wikipedia.org/wiki/Octave_band\" target=\"_blank\">Octave Bands</a>\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.</p>\n","itemtype":"method","name":"getOctaveBands","params":[{"name":"N","description":"<p>Specifies the 1/N type of generated octave bands</p>\n","type":"Number"},{"name":"fCtr0","description":"<p>Minimum central frequency for the lowest band</p>\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":6209,"description":"<p>Fade to value, for smooth transitions</p>\n","itemtype":"method","name":"fade","params":[{"name":"value","description":"<p>Value to set this signal</p>\n","type":"Number"},{"name":"secondsFromNow","description":"<p>Length of fade, in seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6223,"description":"<p>Connect a p5.sound object or Web Audio node to this\np5.Signal so that its amplitude values can be scaled.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"input","description":"","type":"Object"}],"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6240,"description":"<p>Add a constant value to this audio signal,\nand return the resulting audio signal. Does\nnot change the value of the original signal,\ninstead it returns a new p5.SignalAdd.</p>\n","itemtype":"method","name":"add","params":[{"name":"number","description":"","type":"Number"}],"return":{"description":"object","type":"p5.Signal"},"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6262,"description":"<p>Multiply this signal by a constant value,\nand return the resulting audio signal. Does\nnot change the value of the original signal,\ninstead it returns a new p5.SignalMult.</p>\n","itemtype":"method","name":"mult","params":[{"name":"number","description":"<p>to multiply</p>\n","type":"Number"}],"return":{"description":"object","type":"p5.Signal"},"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6284,"description":"<p>Scale this signal value to a given range,\nand return the result as an audio signal. Does\nnot change the value of the original signal,\ninstead it returns a new p5.SignalScale.</p>\n","itemtype":"method","name":"scale","params":[{"name":"number","description":"<p>to multiply</p>\n","type":"Number"},{"name":"inMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"inMax","description":"<p>input range maximum</p>\n","type":"Number"},{"name":"outMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"outMax","description":"<p>input range maximum</p>\n","type":"Number"}],"return":{"description":"object","type":"p5.Signal"},"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6397,"description":"<p>Time until envelope reaches attackLevel</p>\n","itemtype":"property","name":"attackTime","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6402,"description":"<p>Level once attack is complete.</p>\n","itemtype":"property","name":"attackLevel","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6408,"description":"<p>Time until envelope reaches decayLevel.</p>\n","itemtype":"property","name":"decayTime","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6414,"description":"<p>Level after decay. The envelope will sustain here until it is released.</p>\n","itemtype":"property","name":"decayLevel","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6420,"description":"<p>Duration of the release portion of the envelope.</p>\n","itemtype":"property","name":"releaseTime","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6426,"description":"<p>Level at the end of the release.</p>\n","itemtype":"property","name":"releaseLevel","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6463,"description":"<p>Reset the envelope with a series of time/value pairs.</p>\n","itemtype":"method","name":"set","params":[{"name":"attackTime","description":"<p>Time (in seconds) before level\n                               reaches attackLevel</p>\n","type":"Number"},{"name":"attackLevel","description":"<p>Typically an amplitude between\n                               0.0 and 1.0</p>\n","type":"Number"},{"name":"decayTime","description":"<p>Time</p>\n","type":"Number"},{"name":"decayLevel","description":"<p>Amplitude (In a standard ADSR envelope,\n                               decayLevel = sustainLevel)</p>\n","type":"Number"},{"name":"releaseTime","description":"<p>Release Time (in seconds)</p>\n","type":"Number"},{"name":"releaseLevel","description":"<p>Amplitude</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>\n"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6525,"description":"<p>Set values like a traditional\n<a href=\"https://en.wikipedia.org/wiki/Synthesizer#/media/File:ADSR_parameter.svg\">\nADSR envelope\n</a>.</p>\n","itemtype":"method","name":"setADSR","params":[{"name":"attackTime","description":"<p>Time (in seconds before envelope\n                              reaches Attack Level</p>\n","type":"Number"},{"name":"decayTime","description":"<p>Time (in seconds) before envelope\n                              reaches Decay/Sustain Level</p>\n","type":"Number","optional":true},{"name":"susRatio","description":"<p>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 <code>setRange</code>),\n                              then decayLevel would increase proportionally, to become 0.5.</p>\n","type":"Number","optional":true},{"name":"releaseTime","description":"<p>Time in seconds from now (defaults to 0)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6594,"description":"<p>Set max (attackLevel) and min (releaseLevel) of envelope.</p>\n","itemtype":"method","name":"setRange","params":[{"name":"aLevel","description":"<p>attack level (defaults to 1)</p>\n","type":"Number"},{"name":"rLevel","description":"<p>release level (defaults to 0)</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6667,"description":"<p>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.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"inputs","description":"<p>A p5.sound object or\n                              Web Audio Param.</p>\n","type":"Object","optional":true,"multiple":true}],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6685,"description":"<p>Set whether the envelope ramp is linear (default) or exponential.\nExponential ramps can be useful because we perceive amplitude\nand frequency logarithmically.</p>\n","itemtype":"method","name":"setExp","params":[{"name":"isExp","description":"<p>true is exponential, false is linear</p>\n","type":"Boolean"}],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6708,"description":"<p>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 <a href=\"\nhttp://docs.webplatform.org/wiki/apis/webaudio/AudioParam\">\nWeb Audio Audio Param.</a></p>","itemtype":"method","name":"play","params":[{"name":"unit","description":"<p>A p5.sound object or\n                              Web Audio Param.</p>\n","type":"Object"},{"name":"startTime","description":"<p>time from now (in seconds) at which to play</p>\n","type":"Number","optional":true},{"name":"sustainTime","description":"<p>time to sustain before releasing the envelope</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6779,"description":"<p>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 <a href=\"\nhttp://docs.webplatform.org/wiki/apis/webaudio/AudioParam\">\nWeb Audio Param</a>.</p>\n","itemtype":"method","name":"triggerAttack","params":[{"name":"unit","description":"<p>p5.sound Object or Web Audio Param</p>\n","type":"Object"},{"name":"secondsFromNow","description":"<p>time from now (in seconds)</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6887,"description":"<p>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.</p>\n","itemtype":"method","name":"triggerRelease","params":[{"name":"unit","description":"<p>p5.sound Object or Web Audio Param</p>\n","type":"Object"},{"name":"secondsFromNow","description":"<p>time to trigger the release</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6981,"description":"<p>Exponentially ramp to a value using the first two\nvalues from <code><a href=\"#/p5.Envelope/setADSR\">setADSR(attackTime, decayTime)</a></code>\nas <a href=\"https://en.wikipedia.org/wiki/RC_time_constant\">\ntime constants</a> for simple exponential ramps.\nIf the value is higher than current value, it uses attackTime,\nwhile a decrease uses decayTime.</p>\n","itemtype":"method","name":"ramp","params":[{"name":"unit","description":"<p>p5.sound Object or Web Audio Param</p>\n","type":"Object"},{"name":"secondsFromNow","description":"<p>When to trigger the ramp</p>\n","type":"Number"},{"name":"v","description":"<p>Target value</p>\n","type":"Number"},{"name":"v2","description":"<p>Second target value (optional)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7095,"description":"<p>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.</p>\n","itemtype":"method","name":"add","params":[{"name":"number","description":"<p>Constant number to add</p>\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":7114,"description":"<p>Multiply the p5.Envelope's output amplitude\nby a fixed value. Calling this method\nagain will override the initial mult() with new values.</p>\n","itemtype":"method","name":"mult","params":[{"name":"number","description":"<p>Constant number to multiply</p>\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":7133,"description":"<p>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.</p>\n","itemtype":"method","name":"scale","params":[{"name":"inMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"inMax","description":"<p>input range maximum</p>\n","type":"Number"},{"name":"outMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"outMax","description":"<p>input range maximum</p>\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":7268,"description":"<p>Set the width of a Pulse object (an oscillator that implements\nPulse Width Modulation).</p>\n","itemtype":"method","name":"width","params":[{"name":"width","description":"<p>Width between the pulses (0 to 1.0,\n                       defaults to 0)</p>\n","type":"Number","optional":true}],"class":"p5.Pulse","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7484,"description":"<p>Set type of noise to 'white', 'pink' or 'brown'.\nWhite is the default.</p>\n","itemtype":"method","name":"setType","params":[{"name":"type","description":"<p>'white', 'pink' or 'brown'</p>\n","type":"String","optional":true}],"class":"p5.Noise","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7630,"itemtype":"property","name":"input","type":"GainNode","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7634,"itemtype":"property","name":"output","type":"GainNode","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7639,"itemtype":"property","name":"stream","type":"MediaStream|null","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7644,"itemtype":"property","name":"mediaStream","type":"MediaStreamAudioSourceNode|null","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7649,"itemtype":"property","name":"currentSource","type":"Number|null","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7654,"description":"<p>Client must allow browser to access their microphone / audioin source.\nDefault: false. Will become true when the client enables access.</p>\n","itemtype":"property","name":"enabled","type":"Boolean","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7662,"description":"<p>Input amplitude, connect to it by default but not to master out</p>\n","itemtype":"property","name":"amplitude","type":"p5.Amplitude","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7678,"description":"<p>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.<br/></p>\n<p>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.</p>\n","itemtype":"method","name":"start","params":[{"name":"successCallback","description":"<p>Name of a function to call on\n                                  success.</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>Name of a function to call if\n                                  there was an error. For example,\n                                  some browsers do not support\n                                  getUserMedia.</p>\n","type":"Function","optional":true}],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7733,"description":"<p>Turn the AudioIn off. If the AudioIn is stopped, it cannot getLevel().\nIf re-starting, the user may be prompted for permission access.</p>\n","itemtype":"method","name":"stop","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7752,"description":"<p>Connect to an audio unit. If no parameter is provided, will\nconnect to the master output (i.e. your speakers).<br/></p>\n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"<p>An object that accepts audio input,\n                        such as an FFT</p>\n","type":"Object","optional":true}],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7776,"description":"<p>Disconnect the AudioIn from all audio units. For example, if\nconnect() had been called, disconnect() will stop sending\nsignal to your speakers.<br/></p>\n","itemtype":"method","name":"disconnect","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7793,"description":"<p>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). <em>NOTE: AudioIn must\n.start() before using .getLevel().</em><br/></p>\n","itemtype":"method","name":"getLevel","params":[{"name":"smoothing","description":"<p>Smoothing is 0.0 by default.\n                             Smooths values based on previous values.</p>\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":7815,"description":"<p>Set amplitude (volume) of a mic input between 0 and 1.0. <br/></p>\n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"<p>between 0 and 1.0</p>\n","type":"Number"},{"name":"time","description":"<p>ramp time (optional)</p>\n","type":"Number","optional":true}],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7837,"description":"<p>Returns a list of available input sources. This is a wrapper\nfor <a title=\"MediaDevices.enumerateDevices() - Web APIs | MDN\" target=\"_blank\" href=\n \"<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\"\">https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\"</a></p>\n<blockquote>\n<p>and it returns a Promise.</p>\n</blockquote>\n","itemtype":"method","name":"getSources","params":[{"name":"successCallback","description":"<p>This callback function handles the sources when they\n                                     have been enumerated. The callback function\n                                     receives the deviceList array as its only argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>This optional callback receives the error\n                                   message as its argument.</p>\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 <div><code>\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 </code></div>"],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7896,"description":"<p>Set the input source. Accepts a number representing a\nposition in the array returned by getSources().\nThis is only available in browsers that support\n<a title=\"MediaDevices.enumerateDevices() - Web APIs | MDN\" target=\"_blank\" href=\n\"<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\"\">https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\"</a></p>\n<blockquote>\n<p>navigator.mediaDevices.enumerateDevices()</a>.<br/></p>\n</blockquote>\n","itemtype":"method","name":"setSource","params":[{"name":"num","description":"<p>position of input source in the array</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>"],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8107,"description":"<p>The p5.EQ is built with abstracted p5.Filter objects.\nTo modify any bands, use methods of the <a\nhref=\"/reference/#/p5.Filter\" title=\"p5.Filter reference\">\np5.Filter</a> API, especially <code>gain</code> and <code>freq</code>.\nBands are stored in an array, with indices 0 - 3, or 0 - 7</p>\n","itemtype":"property","name":"bands","type":"Array","class":"p5.EQ","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8148,"description":"<p>Process an input by connecting it to the EQ</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>Audio source</p>\n","type":"Object"}],"class":"p5.EQ","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8321,"description":"<p><a title=\"Web Audio Panner docs\"  href=\n\"https://developer.mozilla.org/en-US/docs/Web/API/PannerNode\">\nWeb Audio Spatial Panner Node</a></p>\n<p>Properties include</p>\n<ul>\n<li><a title=\"w3 spec for Panning Model\"\nhref=\"<a href=\"https://www.w3.org/TR/webaudio/#idl-def-PanningModelType\"\">https://www.w3.org/TR/webaudio/#idl-def-PanningModelType\"</a><blockquote>\n<p>panningModel</a>: \"equal power\" or \"HRTF\"</p>\n</blockquote>\n</li>\n<li><a title=\"w3 spec for Distance Model\"\nhref=\"<a href=\"https://www.w3.org/TR/webaudio/#idl-def-DistanceModelType\"\">https://www.w3.org/TR/webaudio/#idl-def-DistanceModelType\"</a><blockquote>\n<p>distanceModel</a>: \"linear\", \"inverse\", or \"exponential\"</p>\n</blockquote>\n</li>\n</ul>\n","itemtype":"property","name":"panner","type":"AudioNode","class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8346,"description":"<p>Connect an audio sorce</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>Input source</p>\n","type":"Object"}],"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8357,"description":"<p>Set the X,Y,Z position of the Panner</p>\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":8375,"description":"<p>Getter and setter methods for position coordinates</p>\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":8382,"description":"<p>Getter and setter methods for position coordinates</p>\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":8389,"description":"<p>Getter and setter methods for position coordinates</p>\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":8438,"description":"<p>Set the X,Y,Z position of the Panner</p>\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":8456,"description":"<p>Getter and setter methods for orient coordinates</p>\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":8463,"description":"<p>Getter and setter methods for orient coordinates</p>\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":8470,"description":"<p>Getter and setter methods for orient coordinates</p>\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":8519,"description":"<p>Set the rolloff factor and max distance</p>\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":8532,"description":"<p>Maxium distance between the source and the listener</p>\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":8548,"description":"<p>How quickly the volume is reduced as the source moves away from the listener</p>\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":8885,"description":"<p>The p5.Delay is built with two\n<a href=\"http://www.w3.org/TR/webaudio/#DelayNode\">\nWeb Audio Delay Nodes</a>, one for each stereo channel.</p>\n","itemtype":"property","name":"leftDelay","type":"DelayNode","class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8895,"description":"<p>The p5.Delay is built with two\n<a href=\"http://www.w3.org/TR/webaudio/#DelayNode\">\nWeb Audio Delay Nodes</a>, one for each stereo channel.</p>\n","itemtype":"property","name":"rightDelay","type":"DelayNode","class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8942,"description":"<p>Add delay to an audio signal according to a set\nof delay parameters.</p>\n","itemtype":"method","name":"process","params":[{"name":"Signal","description":"<p>An object that outputs audio</p>\n","type":"Object"},{"name":"delayTime","description":"<p>Time (in seconds) of the delay/echo.\n                             Some browsers limit delayTime to\n                             1 second.</p>\n","type":"Number","optional":true},{"name":"feedback","description":"<p>sends the delay back through itself\n                             in a loop that decreases in volume\n                             each time.</p>\n","type":"Number","optional":true},{"name":"lowPass","description":"<p>Cutoff frequency. Only frequencies\n                             below the lowPass will be part of the\n                             delay.</p>\n","type":"Number","optional":true}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8984,"description":"<p>Set the delay (echo) time, in seconds. Usually this value will be\na floating point number between 0.0 and 1.0.</p>\n","itemtype":"method","name":"delayTime","params":[{"name":"delayTime","description":"<p>Time (in seconds) of the delay</p>\n","type":"Number"}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9005,"description":"<p>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</p>\n","itemtype":"method","name":"feedback","params":[{"name":"feedback","description":"<p>0.0 to 1.0, or an object such as an\n                                Oscillator that can be used to\n                                modulate this param</p>\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":9036,"description":"<p>Set a lowpass filter frequency for the delay. A lowpass filter\nwill cut off any frequencies higher than the filter frequency.</p>\n","itemtype":"method","name":"filter","params":[{"name":"cutoffFreq","description":"<p>A lowpass filter will cut off any\n                            frequencies higher than the filter frequency.</p>\n","type":"Number|Object"},{"name":"res","description":"<p>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.</p>\n","type":"Number|Object"}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9057,"description":"<p>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.</p>\n","itemtype":"method","name":"setType","params":[{"name":"type","description":"<p>'pingPong' (1) or 'default' (0)</p>\n","type":"String|Number"}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9109,"description":"<p>Set the output level of the delay effect.</p>\n","itemtype":"method","name":"amp","params":[{"name":"volume","description":"<p>amplitude between 0 and 1.0</p>\n","type":"Number"},{"name":"rampTime","description":"<p>create a fade that lasts rampTime</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9120,"description":"<p>Send output to a p5.sound or web audio object</p>\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":9128,"description":"<p>Disconnect all output.</p>\n","itemtype":"method","name":"disconnect","class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9265,"description":"<p>Connect a source to the reverb, and assign reverb parameters.</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>p5.sound / Web Audio object with a sound\n                         output.</p>\n","type":"Object"},{"name":"seconds","description":"<p>Duration of the reverb, in seconds.\n                         Min: 0, Max: 10. Defaults to 3.</p>\n","type":"Number","optional":true},{"name":"decayRate","description":"<p>Percentage of decay with each echo.\n                          Min: 0, Max: 100. Defaults to 2.</p>\n","type":"Number","optional":true},{"name":"reverse","description":"<p>Play the reverb backwards or forwards.</p>\n","type":"Boolean","optional":true}],"class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9301,"description":"<p>Set the reverb settings. Similar to .process(), but without\nassigning a new input.</p>\n","itemtype":"method","name":"set","params":[{"name":"seconds","description":"<p>Duration of the reverb, in seconds.\n                         Min: 0, Max: 10. Defaults to 3.</p>\n","type":"Number","optional":true},{"name":"decayRate","description":"<p>Percentage of decay with each echo.\n                          Min: 0, Max: 100. Defaults to 2.</p>\n","type":"Number","optional":true},{"name":"reverse","description":"<p>Play the reverb backwards or forwards.</p>\n","type":"Boolean","optional":true}],"class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9336,"description":"<p>Set the output level of the reverb effect.</p>\n","itemtype":"method","name":"amp","params":[{"name":"volume","description":"<p>amplitude between 0 and 1.0</p>\n","type":"Number"},{"name":"rampTime","description":"<p>create a fade that lasts rampTime</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9347,"description":"<p>Send output to a p5.sound or web audio object</p>\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":9355,"description":"<p>Disconnect all output.</p>\n","itemtype":"method","name":"disconnect","class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9461,"description":"<p>Internally, the p5.Convolver uses the a\n<a href=\"http://www.w3.org/TR/webaudio/#ConvolverNode\">\nWeb Audio Convolver Node</a>.</p>\n","itemtype":"property","name":"convolverNode","type":"ConvolverNode","class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9489,"description":"<p>Create a p5.Convolver. Accepts a path to a soundfile\nthat will be used to generate an impulse response.</p>\n","itemtype":"method","name":"createConvolver","params":[{"name":"path","description":"<p>path to a sound file</p>\n","type":"String"},{"name":"callback","description":"<p>function to call if loading is successful.\n                              The object will be passed in as the argument\n                              to the callback function.</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to call if loading is not successful.\n                              A custom error will be passed in as the argument\n                              to the callback function.</p>\n","type":"Function","optional":true}],"return":{"description":"","type":"p5.Convolver"},"example":["\n<div><code>\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 master output...\n  sound.disconnect();\n\n  // ...and process with cVerb\n  // so that we only hear the convolution\n  cVerb.process(sound);\n}\n\nfunction playSound() {\n  sound.play();\n}\n</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9635,"description":"<p>Connect a source to the convolver.</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>p5.sound / Web Audio object with a sound\n                         output.</p>\n","type":"Object"}],"example":["\n<div><code>\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 master output...\n  sound.disconnect();\n\n  // ...and process with cVerb\n  // so that we only hear the convolution\n  cVerb.process(sound);\n}\n\nfunction playSound() {\n  sound.play();\n}\n\n</code></div>"],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9682,"description":"<p>If you load multiple impulse files using the .addImpulse method,\nthey will be stored as Objects in this Array. Toggle between them\nwith the <code>toggleImpulse(id)</code> method.</p>\n","itemtype":"property","name":"impulses","type":"Array","class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9693,"description":"<p>Load and assign a new Impulse Response to the p5.Convolver.\nThe impulse is added to the <code>.impulses</code> array. Previous\nimpulses can be accessed with the <code>.toggleImpulse(id)</code>\nmethod.</p>\n","itemtype":"method","name":"addImpulse","params":[{"name":"path","description":"<p>path to a sound file</p>\n","type":"String"},{"name":"callback","description":"<p>function (optional)</p>\n","type":"Function"},{"name":"errorCallback","description":"<p>function (optional)</p>\n","type":"Function"}],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9713,"description":"<p>Similar to .addImpulse, except that the <code>.impulses</code>\nArray is reset to save memory. A new <code>.impulses</code>\narray is created with this impulse as the only item.</p>\n","itemtype":"method","name":"resetImpulse","params":[{"name":"path","description":"<p>path to a sound file</p>\n","type":"String"},{"name":"callback","description":"<p>function (optional)</p>\n","type":"Function"},{"name":"errorCallback","description":"<p>function (optional)</p>\n","type":"Function"}],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9735,"description":"<p>If you have used <code>.addImpulse()</code> to add multiple impulses\nto a p5.Convolver, then you can use this method to toggle between\nthe items in the <code>.impulses</code> 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 <code>.impulses\n</code> Array (Number).<br/>\nYou can access the objects in the .impulses Array directly. Each\nObject has two attributes: an <code>.audioBuffer</code> (type:\nWeb Audio <a href=\"\nhttp://webaudio.github.io/web-audio-api/#the-audiobuffer-interface\">\nAudioBuffer)</a> and a <code>.name</code>, a String that corresponds\nwith the original filename.</p>\n","itemtype":"method","name":"toggleImpulse","params":[{"name":"id","description":"<p>Identify the impulse by its original filename\n                          (String), or by its position in the\n                          <code>.impulses</code> Array (Number).</p>\n","type":"String|Number"}],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9903,"description":"<p>Set the global tempo, in beats per minute, for all\np5.Parts. This method will impact all active p5.Parts.</p>\n","itemtype":"method","name":"setBPM","params":[{"name":"BPM","description":"<p>Beats Per Minute</p>\n","type":"Number"},{"name":"rampTime","description":"<p>Seconds from now</p>\n","type":"Number"}],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9990,"description":"<p>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.</p>\n","itemtype":"property","name":"sequence","type":"Array","class":"p5.Phrase","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10076,"description":"<p>Set the tempo of this part, in Beats Per Minute.</p>\n","itemtype":"method","name":"setBPM","params":[{"name":"BPM","description":"<p>Beats Per Minute</p>\n","type":"Number"},{"name":"rampTime","description":"<p>Seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10089,"description":"<p>Returns the tempo, in Beats Per Minute, of this part.</p>\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":10101,"description":"<p>Start playback of this part. It will play\nthrough all of its phrases at a speed\ndetermined by setBPM.</p>\n","itemtype":"method","name":"start","params":[{"name":"time","description":"<p>seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10120,"description":"<p>Loop playback of this part. It will begin\nlooping through all of its phrases at a speed\ndetermined by setBPM.</p>\n","itemtype":"method","name":"loop","params":[{"name":"time","description":"<p>seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10141,"description":"<p>Tell the part to stop looping.</p>\n","itemtype":"method","name":"noLoop","class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10156,"description":"<p>Stop the part and cue it to step 0. Playback will resume from the begining of the Part when it is played again.</p>\n","itemtype":"method","name":"stop","params":[{"name":"time","description":"<p>seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10169,"description":"<p>Pause the part. Playback will resume\nfrom the current step.</p>\n","itemtype":"method","name":"pause","params":[{"name":"time","description":"<p>seconds from now</p>\n","type":"Number"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10184,"description":"<p>Add a p5.Phrase to this Part.</p>\n","itemtype":"method","name":"addPhrase","params":[{"name":"phrase","description":"<p>reference to a p5.Phrase</p>\n","type":"p5.Phrase"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10210,"description":"<p>Remove a phrase from this part, based on the name it was\ngiven when it was created.</p>\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":10227,"description":"<p>Get a phrase from this part, based on the name it was\ngiven when it was created. Now you can modify its array.</p>\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":10244,"description":"<p>Find all sequences with the specified name, and replace their patterns with the specified array.</p>\n","itemtype":"method","name":"replaceSequence","params":[{"name":"phraseName","description":"","type":"String"},{"name":"sequence","description":"<p>Array of values to pass into the callback\n                          at each step of the phrase.</p>\n","type":"Array"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10273,"description":"<p>Set the function that will be called at every step. This will clear the previous function.</p>\n","itemtype":"method","name":"onStep","params":[{"name":"callback","description":"<p>The name of the callback\n                            you want to fire\n                            on every beat/tatum.</p>\n","type":"Function"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10332,"description":"<p>Start playback of the score.</p>\n","itemtype":"method","name":"start","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10344,"description":"<p>Stop playback of the score.</p>\n","itemtype":"method","name":"stop","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10357,"description":"<p>Pause playback of the score.</p>\n","itemtype":"method","name":"pause","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10368,"description":"<p>Loop playback of the score.</p>\n","itemtype":"method","name":"loop","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10380,"description":"<p>Stop looping playback of the score. If it\nis currently playing, this will go into effect\nafter the current round of playback completes.</p>\n","itemtype":"method","name":"noLoop","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10411,"description":"<p>Set the tempo for all parts in the score</p>\n","itemtype":"method","name":"setBPM","params":[{"name":"BPM","description":"<p>Beats Per Minute</p>\n","type":"Number"},{"name":"rampTime","description":"<p>Seconds from now</p>\n","type":"Number"}],"class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10508,"description":"<p>musicalTimeMode uses <a href = \"https://github.com/Tonejs/Tone.js/wiki/Time\">Tone.Time</a> convention\ntrue if string, false if number</p>\n","itemtype":"property","name":"musicalTimeMode","type":"Boolean","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10516,"description":"<p>musicalTimeMode variables\nmodify these only when the interval is specified in musicalTime format as a string</p>\n","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10524,"description":"<p>Set a limit to the number of loops to play. defaults to Infinity</p>\n","itemtype":"property","name":"maxIterations","type":"Number","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10534,"description":"<p>Do not initiate the callback if timeFromNow is < 0\nThis ususually occurs for a few milliseconds when the page\nis not fully loaded</p>\n<p>The callback should only be called until maxIterations is reached</p>\n","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10549,"description":"<p>Start the loop</p>\n","itemtype":"method","name":"start","params":[{"name":"timeFromNow","description":"<p>schedule a starting time</p>\n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10566,"description":"<p>Stop the loop</p>\n","itemtype":"method","name":"stop","params":[{"name":"timeFromNow","description":"<p>schedule a stopping time</p>\n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10583,"description":"<p>Pause the loop</p>\n","itemtype":"method","name":"pause","params":[{"name":"timeFromNow","description":"<p>schedule a pausing time</p>\n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10600,"description":"<p>Synchronize loops. Use this method to start two more more loops in synchronization\nor to start a loop in synchronization with a loop that is already playing\nThis method will schedule the implicit loop in sync with the explicit master loop\ni.e. loopToStart.syncedStart(loopToSyncWith)</p>\n","itemtype":"method","name":"syncedStart","params":[{"name":"otherLoop","description":"<p>a p5.SoundLoop to sync with</p>\n","type":"Object"},{"name":"timeFromNow","description":"<p>Start the loops in sync after timeFromNow seconds</p>\n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10705,"description":"<p>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)</p>\n","itemtype":"property","name":"bpm","type":"Number","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10728,"description":"<p>number of quarter notes in a measure (defaults to 4)</p>\n","itemtype":"property","name":"timeSignature","type":"Number","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10748,"description":"<p>length of the loops interval</p>\n","itemtype":"property","name":"interval","type":"Number|String","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10765,"description":"<p>how many times the callback has been called so far</p>\n","itemtype":"property","name":"iterations","type":"Number","readonly":"","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10817,"description":"<p>The p5.Compressor is built with a <a href=\"https://www.w3.org/TR/webaudio/#the-dynamicscompressornode-interface\"\n  target=\"_blank\" title=\"W3 spec for Dynamics Compressor Node\">Web Audio Dynamics Compressor Node\n  </a></p>\n","itemtype":"property","name":"compressor","type":"AudioNode","class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10830,"description":"<p>Performs the same function as .connect, but also accepts\noptional parameters to set compressor's audioParams</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>Sound source to be connected</p>\n","type":"Object"},{"name":"attack","description":"<p>The amount of time (in seconds) to reduce the gain by 10dB,\n                           default = .003, range 0 - 1</p>\n","type":"Number","optional":true},{"name":"knee","description":"<p>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</p>\n","type":"Number","optional":true},{"name":"ratio","description":"<p>The amount of dB change in input for a 1 dB change in output\n                           default = 12, range 1 - 20</p>\n","type":"Number","optional":true},{"name":"threshold","description":"<p>The decibel value above which the compression will start taking effect\n                           default = -24, range -100 - 0</p>\n","type":"Number","optional":true},{"name":"release","description":"<p>The amount of time (in seconds) to increase the gain by 10dB\n                           default = .25, range 0 - 1</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10855,"description":"<p>Set the paramters of a compressor.</p>\n","itemtype":"method","name":"set","params":[{"name":"attack","description":"<p>The amount of time (in seconds) to reduce the gain by 10dB,\n                           default = .003, range 0 - 1</p>\n","type":"Number"},{"name":"knee","description":"<p>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</p>\n","type":"Number"},{"name":"ratio","description":"<p>The amount of dB change in input for a 1 dB change in output\n                           default = 12, range 1 - 20</p>\n","type":"Number"},{"name":"threshold","description":"<p>The decibel value above which the compression will start taking effect\n                           default = -24, range -100 - 0</p>\n","type":"Number"},{"name":"release","description":"<p>The amount of time (in seconds) to increase the gain by 10dB\n                           default = .25, range 0 - 1</p>\n","type":"Number"}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10894,"description":"<p>Get current attack or set value w/ time ramp</p>\n","itemtype":"method","name":"attack","params":[{"name":"attack","description":"<p>Attack is the amount of time (in seconds) to reduce the gain by 10dB,\n                         default = .003, range 0 - 1</p>\n","type":"Number","optional":true},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10919,"description":"<p>Get current knee or set value w/ time ramp</p>\n","itemtype":"method","name":"knee","params":[{"name":"knee","description":"<p>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</p>\n","type":"Number","optional":true},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10944,"description":"<p>Get current ratio or set value w/ time ramp</p>\n","itemtype":"method","name":"ratio","params":[{"name":"ratio","description":"<p>The amount of dB change in input for a 1 dB change in output\n                           default = 12, range 1 - 20</p>\n","type":"Number","optional":true},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10967,"description":"<p>Get current threshold or set value w/ time ramp</p>\n","itemtype":"method","name":"threshold","params":[{"name":"threshold","description":"<p>The decibel value above which the compression will start taking effect\n                           default = -24, range -100 - 0</p>\n","type":"Number"},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10990,"description":"<p>Get current release or set value w/ time ramp</p>\n","itemtype":"method","name":"release","params":[{"name":"release","description":"<p>The amount of time (in seconds) to increase the gain by 10dB\n                           default = .25, range 0 - 1</p>\n","type":"Number"},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11014,"description":"<p>Return the current reduction value</p>\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":11169,"description":"<p>Connect a specific device to the p5.SoundRecorder.\nIf no parameter is given, p5.SoundRecorer will record\nall audible p5.sound from your sketch.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"unit","description":"<p>p5.sound object or a web audio unit\n                       that outputs sound</p>\n","type":"Object","optional":true}],"class":"p5.SoundRecorder","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11194,"description":"<p>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.</p>\n","itemtype":"method","name":"record","params":[{"name":"soundFile","description":"<p>p5.SoundFile</p>\n","type":"p5.SoundFile"},{"name":"duration","description":"<p>Time (in seconds)</p>\n","type":"Number","optional":true},{"name":"callback","description":"<p>The name of a function that will be\n                              called once the recording completes</p>\n","type":"Function","optional":true}],"class":"p5.SoundRecorder","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11229,"description":"<p>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.</p>\n","itemtype":"method","name":"stop","class":"p5.SoundRecorder","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11259,"description":"<p>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\n<a href=\"/docs/reference/#/p5.SoundFile/saveBlob\"><code>p5.SoundFile.saveBlob</code></a>.</p>\n","itemtype":"method","name":"saveSound","params":[{"name":"soundFile","description":"<p>p5.SoundFile that you wish to save</p>\n","type":"p5.SoundFile"},{"name":"fileName","description":"<p>name of the resulting .wav file.</p>\n","type":"String"}],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11389,"description":"<p>isDetected is set to true when a peak is detected.</p>\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":11402,"description":"<p>The update method is run in the draw loop.</p>\n<p>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.</p>\n","itemtype":"method","name":"update","params":[{"name":"fftObject","description":"<p>A p5.FFT object</p>\n","type":"p5.FFT"}],"class":"p5.PeakDetect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11438,"description":"<p>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.</p>\n","itemtype":"method","name":"onPeak","params":[{"name":"callback","description":"<p>Name of a function that will\n                            be called when a peak is\n                            detected.</p>\n","type":"Function"},{"name":"val","description":"<p>Optional value to pass\n                            into the function when\n                            a peak is detected.</p>\n","type":"Object","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.PeakDetect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11600,"description":"<p>Connect a source to the gain node.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"src","description":"<p>p5.sound / Web Audio object with a sound\n                         output.</p>\n","type":"Object"}],"class":"p5.Gain","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11613,"description":"<p>Send output to a p5.sound or web audio object</p>\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":11626,"description":"<p>Disconnect all output.</p>\n","itemtype":"method","name":"disconnect","class":"p5.Gain","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11639,"description":"<p>Set the output level of the gain node.</p>\n","itemtype":"method","name":"amp","params":[{"name":"volume","description":"<p>amplitude between 0 and 1.0</p>\n","type":"Number"},{"name":"rampTime","description":"<p>create a fade that lasts rampTime</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Gain","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11743,"description":"<p>The p5.Distortion is built with a\n<a href=\"http://www.w3.org/TR/webaudio/#WaveShaperNode\">\nWeb Audio WaveShaper Node</a>.</p>\n","itemtype":"property","name":"WaveShaperNode","type":"AudioNode","class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11760,"description":"<p>Process a sound source, optionally specify amount and oversample values.</p>\n","itemtype":"method","name":"process","params":[{"name":"amount","description":"<p>Unbounded distortion amount.\n                               Normal values range from 0-1.</p>\n","type":"Number","optional":true,"optdefault":"0.25"},{"name":"oversample","description":"<p>'none', '2x', or '4x'.</p>\n","type":"String","optional":true,"optdefault":"'none'"}],"class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11774,"description":"<p>Set the amount and oversample of the waveshaper distortion.</p>\n","itemtype":"method","name":"set","params":[{"name":"amount","description":"<p>Unbounded distortion amount.\n                               Normal values range from 0-1.</p>\n","type":"Number","optional":true,"optdefault":"0.25"},{"name":"oversample","description":"<p>'none', '2x', or '4x'.</p>\n","type":"String","optional":true,"optdefault":"'none'"}],"class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11796,"description":"<p>Return the distortion amount, typically between 0-1.</p>\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":11809,"description":"<p>Return the oversampling.</p>\n","itemtype":"method","name":"getOversample","return":{"description":"Oversample can either be 'none', '2x', or '4x'.","type":"String"},"class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"}],"warnings":[{"message":"unknown tag: alt","line":" src/color/creating_reading.js:16"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:45"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:72"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:116"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:297"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:326"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:361"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:452"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:482"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:522"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:51"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:249"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:278"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:302"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:326"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:751"},{"message":"unknown tag: alt","line":" src/color/setting.js:13"},{"message":"unknown tag: alt","line":" src/color/setting.js:180"},{"message":"unknown tag: alt","line":" src/color/setting.js:214"},{"message":"unknown tag: alt","line":" src/color/setting.js:333"},{"message":"unknown tag: alt","line":" src/color/setting.js:492"},{"message":"unknown tag: alt","line":" src/color/setting.js:533"},{"message":"unknown tag: alt","line":" src/color/setting.js:573"},{"message":"unknown tag: alt","line":" src/color/setting.js:745"},{"message":"unknown tag: alt","line":" src/color/setting.js:825"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:102"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:218"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:258"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:317"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:373"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:447"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:512"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:578"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:662"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:12"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:81"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:115"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:184"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:219"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:259"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:331"},{"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:130"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:185"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:264"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:358"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:398"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:493"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:20"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:67"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:267"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:389"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:434"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:498"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:557"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:642"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:707"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:800"},{"message":"unknown tag: alt","line":" src/core/constants.js:58"},{"message":"unknown tag: alt","line":" src/core/constants.js:76"},{"message":"unknown tag: alt","line":" src/core/constants.js:94"},{"message":"unknown tag: alt","line":" src/core/constants.js:112"},{"message":"unknown tag: alt","line":" src/core/constants.js:130"},{"message":"unknown tag: alt","line":" src/core/environment.js:20"},{"message":"unknown tag: alt","line":" src/core/environment.js:52"},{"message":"unknown tag: alt","line":" src/core/environment.js:79"},{"message":"unknown tag: alt","line":" src/core/environment.js:129"},{"message":"unknown tag: alt","line":" src/core/environment.js:160"},{"message":"unknown tag: alt","line":" src/core/environment.js:228"},{"message":"unknown tag: alt","line":" src/core/environment.js:331"},{"message":"unknown tag: alt","line":" src/core/environment.js:354"},{"message":"unknown tag: alt","line":" src/core/environment.js:372"},{"message":"unknown tag: alt","line":" src/core/environment.js:390"},{"message":"unknown tag: alt","line":" src/core/environment.js:405"},{"message":"unknown tag: alt","line":" src/core/environment.js:421"},{"message":"unknown tag: alt","line":" src/core/environment.js:499"},{"message":"unknown tag: alt","line":" src/core/environment.js:549"},{"message":"replacing incorrect tag: returns with return","line":" src/core/environment.js:585"},{"message":"replacing incorrect tag: returns with return","line":" src/core/environment.js:604"},{"message":"unknown tag: alt","line":" src/core/environment.js:604"},{"message":"unknown tag: alt","line":" src/core/environment.js:659"},{"message":"unknown tag: alt","line":" src/core/environment.js:687"},{"message":"unknown tag: alt","line":" src/core/environment.js:706"},{"message":"replacing incorrect tag: function with method","line":" src/core/internationalization.js:10"},{"message":"replacing incorrect tag: returns with return","line":" src/core/internationalization.js:10"},{"message":"unknown tag: alt","line":" src/core/main.js:42"},{"message":"unknown tag: alt","line":" src/core/main.js:83"},{"message":"unknown tag: alt","line":" src/core/main.js:114"},{"message":"unknown tag: alt","line":" src/core/main.js:411"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:47"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:114"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:154"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:189"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:246"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:292"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:354"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:403"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:454"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:510"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:551"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:592"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:639"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:678"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:725"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:763"},{"message":"unknown tag: alt","line":" src/core/p5.Graphics.js:70"},{"message":"unknown tag: alt","line":" src/core/p5.Graphics.js:122"},{"message":"unknown tag: alt","line":" src/core/reference.js:6"},{"message":"unknown tag: alt","line":" src/core/reference.js:33"},{"message":"unknown tag: alt","line":" src/core/reference.js:86"},{"message":"unknown tag: alt","line":" src/core/reference.js:114"},{"message":"unknown tag: alt","line":" src/core/reference.js:136"},{"message":"unknown tag: alt","line":" src/core/reference.js:157"},{"message":"unknown tag: alt","line":" src/core/reference.js:178"},{"message":"unknown tag: alt","line":" src/core/reference.js:199"},{"message":"unknown tag: alt","line":" src/core/reference.js:230"},{"message":"unknown tag: alt","line":" src/core/reference.js:266"},{"message":"unknown tag: alt","line":" src/core/reference.js:287"},{"message":"unknown tag: alt","line":" src/core/reference.js:308"},{"message":"unknown tag: alt","line":" src/core/reference.js:330"},{"message":"unknown tag: alt","line":" src/core/reference.js:350"},{"message":"unknown tag: alt","line":" src/core/reference.js:378"},{"message":"unknown tag: alt","line":" src/core/reference.js:407"},{"message":"unknown tag: alt","line":" src/core/reference.js:447"},{"message":"unknown tag: alt","line":" src/core/reference.js:489"},{"message":"unknown tag: alt","line":" src/core/reference.js:511"},{"message":"unknown tag: alt","line":" src/core/rendering.js:15"},{"message":"unknown tag: alt","line":" src/core/rendering.js:120"},{"message":"unknown tag: alt","line":" src/core/rendering.js:174"},{"message":"unknown tag: alt","line":" src/core/rendering.js:195"},{"message":"unknown tag: alt","line":" src/core/rendering.js:234"},{"message":"unknown tag: alt","line":" src/core/rendering.js:317"},{"message":"unknown tag: alt","line":" src/core/structure.js:10"},{"message":"unknown tag: alt","line":" src/core/structure.js:83"},{"message":"unknown tag: alt","line":" src/core/structure.js:134"},{"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:496"},{"message":"unknown tag: alt","line":" src/core/transform.js:11"},{"message":"unknown tag: alt","line":" src/core/transform.js:151"},{"message":"unknown tag: alt","line":" src/core/transform.js:176"},{"message":"unknown tag: alt","line":" src/core/transform.js:215"},{"message":"unknown tag: alt","line":" src/core/transform.js:251"},{"message":"unknown tag: alt","line":" src/core/transform.js:287"},{"message":"unknown tag: alt","line":" src/core/transform.js:325"},{"message":"unknown tag: alt","line":" src/core/transform.js:399"},{"message":"unknown tag: alt","line":" src/core/transform.js:438"},{"message":"unknown tag: alt","line":" src/core/transform.js:477"},{"message":"unknown tag: alt","line":" src/data/local_storage.js:10"},{"message":"unknown tag: alt","line":" src/data/local_storage.js:101"},{"message":"unknown tag: alt","line":" src/dom/dom.js:200"},{"message":"unknown tag: alt","line":" src/dom/dom.js:267"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1494"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1556"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1660"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1699"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1819"},{"message":"unknown tag: alt","line":" src/dom/dom.js:2195"},{"message":"unknown tag: alt","line":" src/dom/dom.js:2704"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:23"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:46"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:69"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:135"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:168"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:201"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:239"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:285"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:330"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:389"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:428"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:471"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:515"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:546"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:604"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:10"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:36"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:64"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:105"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:191"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:242"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:305"},{"message":"unknown tag: alt","line":" src/events/mouse.js:12"},{"message":"unknown tag: alt","line":" src/events/mouse.js:43"},{"message":"unknown tag: alt","line":" src/events/mouse.js:80"},{"message":"unknown tag: alt","line":" src/events/mouse.js:106"},{"message":"unknown tag: alt","line":" src/events/mouse.js:132"},{"message":"unknown tag: alt","line":" src/events/mouse.js:164"},{"message":"unknown tag: alt","line":" src/events/mouse.js:195"},{"message":"unknown tag: alt","line":" src/events/mouse.js:233"},{"message":"unknown tag: alt","line":" src/events/mouse.js:271"},{"message":"unknown tag: alt","line":" src/events/mouse.js:311"},{"message":"unknown tag: alt","line":" src/events/mouse.js:351"},{"message":"unknown tag: alt","line":" src/events/mouse.js:389"},{"message":"unknown tag: alt","line":" src/events/mouse.js:481"},{"message":"unknown tag: alt","line":" src/events/mouse.js:535"},{"message":"unknown tag: alt","line":" src/events/mouse.js:615"},{"message":"unknown tag: alt","line":" src/events/mouse.js:696"},{"message":"unknown tag: alt","line":" src/events/mouse.js:772"},{"message":"unknown tag: alt","line":" src/events/mouse.js:841"},{"message":"unknown tag: alt","line":" src/events/mouse.js:926"},{"message":"unknown tag: alt","line":" src/events/mouse.js:979"},{"message":"unknown tag: alt","line":" src/events/mouse.js:1025"},{"message":"unknown tag: alt","line":" src/events/touch.js:10"},{"message":"unknown tag: alt","line":" src/events/touch.js:71"},{"message":"unknown tag: alt","line":" src/events/touch.js:151"},{"message":"unknown tag: alt","line":" src/events/touch.js:223"},{"message":"unknown tag: alt","line":" src/image/image.js:15"},{"message":"unknown tag: alt","line":" src/image/image.js:94"},{"message":"unknown tag: alt","line":" src/image/image.js:413"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:18"},{"message":"replacing incorrect tag: returns with return","line":" src/image/loading_displaying.js:233"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:250"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:420"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:518"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:582"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:88"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:115"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:152"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:256"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:291"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:341"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:395"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:432"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:543"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:598"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:659"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:694"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:815"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:856"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:896"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:927"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:971"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:1006"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:1043"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:1079"},{"message":"unknown tag: alt","line":" src/image/pixels.js:12"},{"message":"unknown tag: alt","line":" src/image/pixels.js:80"},{"message":"unknown tag: alt","line":" src/image/pixels.js:173"},{"message":"unknown tag: alt","line":" src/image/pixels.js:307"},{"message":"unknown tag: alt","line":" src/image/pixels.js:481"},{"message":"unknown tag: alt","line":" src/image/pixels.js:566"},{"message":"unknown tag: alt","line":" src/image/pixels.js:602"},{"message":"unknown tag: alt","line":" src/image/pixels.js:674"},{"message":"unknown tag: alt","line":" src/io/files.js:20"},{"message":"unknown tag: alt","line":" src/io/files.js:183"},{"message":"unknown tag: alt","line":" src/io/files.js:293"},{"message":"unknown tag: alt","line":" src/io/files.js:575"},{"message":"replacing incorrect tag: returns with return","line":" src/io/files.js:685"},{"message":"unknown tag: alt","line":" src/io/files.js:685"},{"message":"unknown tag: alt","line":" src/io/files.js:1398"},{"message":"unknown tag: alt","line":" src/io/files.js:1540"},{"message":"unknown tag: alt","line":" src/io/files.js:1597"},{"message":"unknown tag: alt","line":" src/io/files.js:1661"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:85"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:148"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:195"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:240"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:288"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:352"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:545"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:597"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:638"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:896"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:960"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1009"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1055"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1100"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1146"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1190"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1242"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1305"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:40"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:102"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:146"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:191"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:239"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:295"},{"message":"unknown tag: alt","line":" src/io/p5.XML.js:9"},{"message":"unknown tag: alt","line":" src/math/calculation.js:10"},{"message":"unknown tag: alt","line":" src/math/calculation.js:33"},{"message":"unknown tag: alt","line":" src/math/calculation.js:72"},{"message":"unknown tag: alt","line":" src/math/calculation.js:116"},{"message":"unknown tag: alt","line":" src/math/calculation.js:181"},{"message":"unknown tag: alt","line":" src/math/calculation.js:230"},{"message":"unknown tag: alt","line":" src/math/calculation.js:268"},{"message":"unknown tag: alt","line":" src/math/calculation.js:315"},{"message":"unknown tag: alt","line":" src/math/calculation.js:370"},{"message":"unknown tag: alt","line":" src/math/calculation.js:408"},{"message":"unknown tag: alt","line":" src/math/calculation.js:463"},{"message":"unknown tag: alt","line":" src/math/calculation.js:512"},{"message":"unknown tag: alt","line":" src/math/calculation.js:561"},{"message":"unknown tag: alt","line":" src/math/calculation.js:613"},{"message":"unknown tag: alt","line":" src/math/calculation.js:647"},{"message":"unknown tag: alt","line":" src/math/calculation.js:701"},{"message":"unknown tag: alt","line":" src/math/calculation.js:745"},{"message":"replacing incorrect tag: returns with return","line":" src/math/calculation.js:832"},{"message":"unknown tag: alt","line":" src/math/calculation.js:832"},{"message":"unknown tag: alt","line":" src/math/math.js:10"},{"message":"unknown tag: alt","line":" src/math/noise.js:36"},{"message":"unknown tag: alt","line":" src/math/noise.js:178"},{"message":"unknown tag: alt","line":" src/math/noise.js:243"},{"message":"unknown tag: alt","line":" src/math/p5.Vector.js:10"},{"message":"unknown tag: alt","line":" src/math/random.js:37"},{"message":"unknown tag: alt","line":" src/math/random.js:66"},{"message":"unknown tag: alt","line":" src/math/random.js:153"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:123"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:159"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:186"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:213"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:285"},{"message":"replacing incorrect tag: returns with return","line":" src/math/trigonometry.js:320"},{"message":"replacing incorrect tag: returns with return","line":" src/math/trigonometry.js:335"},{"message":"replacing incorrect tag: returns with return","line":" src/math/trigonometry.js:350"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:11"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:81"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:118"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:150"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:187"},{"message":"unknown tag: alt","line":" src/typography/loading_displaying.js:16"},{"message":"unknown tag: alt","line":" src/typography/loading_displaying.js:140"},{"message":"unknown tag: alt","line":" src/typography/loading_displaying.js:229"},{"message":"unknown tag: alt","line":" src/typography/p5.Font.js:31"},{"message":"unknown tag: alt","line":" src/utilities/conversion.js:10"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:15"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:43"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:130"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:239"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:313"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:375"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:453"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:539"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:10"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:31"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:52"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:73"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:100"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:122"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:143"},{"message":"unknown tag: alt","line":" src/webgl/3d_primitives.js:13"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:11"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:353"},{"message":"unknown tag: alt","line":" src/webgl/light.js:10"},{"message":"unknown tag: alt","line":" src/webgl/light.js:91"},{"message":"unknown tag: alt","line":" src/webgl/light.js:176"},{"message":"unknown tag: alt","line":" src/webgl/light.js:279"},{"message":"unknown tag: alt","line":" src/webgl/light.js:386"},{"message":"unknown tag: alt","line":" src/webgl/light.js:417"},{"message":"unknown tag: alt","line":" src/webgl/light.js:502"},{"message":"unknown tag: alt","line":" src/webgl/light.js:842"},{"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:586"},{"message":"unknown tag: alt","line":" src/webgl/material.js:12"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/material.js:111"},{"message":"unknown tag: alt","line":" src/webgl/material.js:111"},{"message":"unknown tag: alt","line":" src/webgl/material.js:179"},{"message":"unknown tag: alt","line":" src/webgl/material.js:283"},{"message":"unknown tag: alt","line":" src/webgl/material.js:321"},{"message":"unknown tag: alt","line":" src/webgl/material.js:421"},{"message":"unknown tag: alt","line":" src/webgl/material.js:421"},{"message":"unknown tag: alt","line":" src/webgl/material.js:499"},{"message":"unknown tag: alt","line":" src/webgl/material.js:571"},{"message":"unknown tag: alt","line":" src/webgl/material.js:651"},{"message":"unknown tag: alt","line":" src/webgl/material.js:717"},{"message":"unknown tag: alt","line":" src/webgl/material.js:767"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:13"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:115"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:175"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:231"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:297"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:339"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:669"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:727"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:785"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:933"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:1005"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:1270"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.RendererGL.Immediate.js:180"},{"message":"unknown tag: parem","line":" src/webgl/p5.RendererGL.Immediate.js:301"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.RendererGL.Retained.js:8"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:331"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:600"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:641"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:746"},{"message":"unknown tag: alt","line":" src/webgl/p5.Shader.js:296"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:115"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/text.js:158"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:191"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:203"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:236"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:250"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:388"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/text.js:388"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:456"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:471"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:556"},{"message":"replacing incorrect tag: params with param","line":" lib/addons/p5.sound.js:4374"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:4374"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:5085"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:7837"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:9005"},{"message":"Missing item type\nConversions adapted from <http://www.easyrgb.com/en/math.php>.\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:19"},{"message":"Missing item type\nConvert an HSBA array to RGBA.","line":" src/color/color_conversion.js:45"},{"message":"Missing item type\nConvert an HSLA array to HSBA.","line":" src/color/color_conversion.js:100"},{"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:123"},{"message":"Missing item type\nConvert an RGBA array to HSBA.","line":" src/color/color_conversion.js:187"},{"message":"Missing item type\nConvert an RGBA array to HSLA.","line":" src/color/color_conversion.js:226"},{"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:397"},{"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:428"},{"message":"Missing item type\nCSS named colors.","line":" src/color/p5.Color.js:447"},{"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:601"},{"message":"Missing item type\nFull color string patterns. The capture groups are necessary.","line":" src/color/p5.Color.js:614"},{"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:751"},{"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:962"},{"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:675"},{"message":"Missing item type","line":" src/core/friendly_errors/file_errors.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:34"},{"message":"Missing item type","line":" src/core/friendly_errors/validate_params.js:1"},{"message":"Missing item type\nValidates parameters\nparam  {String}               func    the name of the function\nparam  {Array}                args    user input arguments\n\nexample:\n const a;\n ellipse(10,10,a,5);\nconsole ouput:\n \"It looks like ellipse received an empty variable in spot #2.\"\n\nexample:\n ellipse(10,\"foo\",5,5);\nconsole output:\n \"ellipse was expecting a number for parameter #1,\n          received \"foo\" instead.\"","line":" src/core/friendly_errors/validate_params.js:623"},{"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:305"},{"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 <a href=\"#/p5/setup\">setup()</a> is\nrecommended. The default rate is 60 frames per second.\n\nCalling <a href=\"#/p5/frameRate\">frameRate()</a> with no arguments returns the current framerate.","line":" src/core/environment.js:315"},{"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\nSet up our translation function, with loaded languages","line":" src/core/internationalization.js:27"},{"message":"Missing item type","line":" src/core/legacy.js:1"},{"message":"Missing item type\nHelper fxn for sharing pixel methods","line":" src/core/p5.Element.js:827"},{"message":"Missing item type\nResize our canvas element.","line":" src/core/p5.Renderer.js:95"},{"message":"Missing item type\nHelper fxn to check font type (system or otf)","line":" src/core/p5.Renderer.js:341"},{"message":"Missing item type\nHelper fxn to measure ascent and descent.\nAdapted from http://stackoverflow.com/a/25355178","line":" src/core/p5.Renderer.js:393"},{"message":"Missing item type\np5.Renderer2D\nThe 2D graphics canvas renderer class.\nextends p5.Renderer","line":" src/core/p5.Renderer2D.js:7"},{"message":"Missing item type\nGenerate a cubic Bezier representing an arc on the unit circle of total\nangle `size` radians, beginning `start` radians above the x-axis. Up to\nfour of these curves are combined to make a full arc.\n\nSee www.joecridge.me/bezier.pdf for an explanation of the method.","line":" src/core/p5.Renderer2D.js:386"},{"message":"Missing item type\nshim for Uint8ClampedArray.slice\n(allows arrayCopy to work with pixels[])\nwith thanks to http://halfpapstudios.com/blog/tag/html5-canvas/\nEnumerable set to false to protect for...in from\nUint8ClampedArray.prototype pollution.","line":" src/core/shim.js:18"},{"message":"Missing item type\nthis is implementation of Object.assign() which is unavailable in\nIE11 and (non-Chrome) Android browsers.\nThe assign() method is used to copy the values of all enumerable\nown properties from one or more source objects to a target object.\nIt will return the target object.\nModified from https://github.com/ljharb/object.assign","line":" src/core/shim.js:39"},{"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:197"},{"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:387"},{"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:425"},{"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:536"},{"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:600"},{"message":"Missing item type\nHelper function for select and selectAll","line":" src/dom/dom.js:126"},{"message":"Missing item type\nHelper function for getElement and getElements.","line":" src/dom/dom.js:141"},{"message":"Missing item type\nHelpers for create methods.","line":" src/dom/dom.js:301"},{"message":"Missing item type","line":" src/dom/dom.js:433"},{"message":"Missing item type","line":" src/dom/dom.js:1100"},{"message":"Missing item type","line":" src/dom/dom.js:1193"},{"message":"Missing item type","line":" src/dom/dom.js:1232"},{"message":"Missing item type","line":" src/dom/dom.js:3158"},{"message":"Missing item type","line":" src/dom/dom.js:3224"},{"message":"Missing item type","line":" src/dom/dom.js:3286"},{"message":"Missing item type\n_updatePAccelerations updates the pAcceleration values","line":" src/events/acceleration.js:124"},{"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:295"},{"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:381"},{"message":"Missing item type\nThis module defines the filters for use with image buffers.\n\nThis module is basically a collection of functions stored in an object\nas opposed to modules. The functions are destructive, modifying\nthe passed in canvas rather than creating a copy.\n\nGenerally speaking users of this module will use the Filters.apply method\non a canvas to create an effect.\n\nA number of functions are borrowed/adapted from\nhttp://www.html5rocks.com/en/tutorials/canvas/imagefilters/\nor the java processing implementation.","line":" src/image/filters.js:3"},{"message":"Missing item type\nReturns the pixel buffer for a canvas","line":" src/image/filters.js:24"},{"message":"Missing item type\nReturns a 32 bit number containing ARGB data at ith pixel in the\n1D array containing pixels data.","line":" src/image/filters.js:44"},{"message":"Missing item type\nModifies pixels RGBA values to values contained in the data object.","line":" src/image/filters.js:65"},{"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:85"},{"message":"Missing item type\nReturns a blank ImageData object.","line":" src/image/filters.js:105"},{"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:120"},{"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:173"},{"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:207"},{"message":"Missing item type\nSets the alpha channel to entirely opaque. No parameter is used.","line":" src/image/filters.js:230"},{"message":"Missing item type\nSets each pixel to its inverse value. No parameter is used.","line":" src/image/filters.js:246"},{"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:261"},{"message":"Missing item type\nreduces the bright areas in an image","line":" src/image/filters.js:293"},{"message":"Missing item type\nincreases the bright areas in an image","line":" src/image/filters.js:380"},{"message":"Missing item type\nThis module defines the p5 methods for the <a href=\"#/p5.Image\">p5.Image</a> 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:153"},{"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:233"},{"message":"Missing item type\nApply the current tint color to the input image, return the resulting\ncanvas.","line":" src/image/loading_displaying.js:546"},{"message":"Missing item type\nThis module defines the <a href=\"#/p5.Image\">p5.Image</a> 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:222"},{"message":"Missing item type\nHelper fxn for sharing pixel methods","line":" src/image/p5.Image.js:248"},{"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 <a href=\"#/p5/saveStrings\">saveStrings</a>, <a href=\"#/p5/saveJSON\">saveJSON</a>, <a href=\"#/p5/saveTable\">saveTable</a> etc.","line":" src/io/files.js:1786"},{"message":"Missing item type\nReturns a file extension, or another string\nif the provided parameter has no extension.","line":" src/io/files.js:1854"},{"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:1887"},{"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:1899"},{"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<a href=\"http://en.wikipedia.org/wiki/Comma-separated_values\">\ncomma separated values</a>, 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\n<a href=\"http://tools.ietf.org/html/rfc4180\">here</a>.\nTo load files, use the <a href=\"#/p5/loadTable\">loadTable</a> method.\nTo save tables to your computer, use the <a href=\"#/p5/save\">save</a> method\n or the <a href=\"#/p5/saveTable\">saveTable</a> method.\n\nPossible options include:\n<ul>\n<li>csv - parse the table as comma-separated values\n<li>tsv - parse the table as tab-separated values\n<li>header - this table has a header (title) row\n</ul>","line":" src/io/p5.Table.js:9"},{"message":"Missing item type\nMultiplies a vector by a scalar and returns a new vector.","line":" src/math/p5.Vector.js:2064"},{"message":"Missing item type\nDivides a vector by a scalar and returns a new vector.","line":" src/math/p5.Vector.js:2116"},{"message":"Missing item type\nCalculates the dot product of two vectors.","line":" src/math/p5.Vector.js:2169"},{"message":"Missing item type\nCalculates the cross product of two vectors.","line":" src/math/p5.Vector.js:2183"},{"message":"Missing item type\nCalculates the Euclidean distance between two points (considering a\npoint as a vector object).","line":" src/math/p5.Vector.js:2197"},{"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:2212"},{"message":"Missing item type\nHelper function to measure ascent and descent.","line":" src/typography/attributes.js:280"},{"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:273"},{"message":"Missing item type\nReturns an opentype path for the supplied string and position.","line":" src/typography/p5.Font.js:288"},{"message":"Missing item type","line":" src/webgl/3d_primitives.js:301"},{"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:955"},{"message":"Missing item type\nDraw a line given two points","line":" src/webgl/3d_primitives.js:1355"},{"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:179"},{"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:288"},{"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:315"},{"message":"Missing item type\nThis function matches the `query` at the provided `offset`","line":" src/webgl/loading.js:342"},{"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:354"},{"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:442"},{"message":"Missing item type","line":" src/webgl/material.js:812"},{"message":"Missing item type","line":" src/webgl/material.js:843"},{"message":"Missing item type\nCreate a 2D array for establishing stroke connections","line":" src/webgl/p5.Geometry.js:212"},{"message":"Missing item type\nCreate 4 vertices for each stroke line, two at the beginning position\nand two at the end position. These vertices are displaced relative to\nthat line's normal on the GPU","line":" src/webgl/p5.Geometry.js:233"},{"message":"Missing item type","line":" src/webgl/p5.Matrix.js:1"},{"message":"Missing item type\nPRIVATE","line":" src/webgl/p5.Matrix.js:722"},{"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:12"},{"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 <a href=\"#/p5/beginShape\">beginShape()</a> & de-activated when you call <a href=\"#/p5/endShape\">endShape()</a>.\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:106"},{"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:146"},{"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:180"},{"message":"Missing item type\nCalled from _processVertices() when applicable. This function tesselates immediateMode.geometry.","line":" src/webgl/p5.RendererGL.Immediate.js:225"},{"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:245"},{"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:280"},{"message":"Missing item type\nCalled from _drawImmediateFill(). Currently adds default normals which\nonly work for flat shapes.","line":" src/webgl/p5.RendererGL.Immediate.js:301"},{"message":"Missing item type\ninitializes buffer defaults. runs each time a new geometry is\nregistered","line":" src/webgl/p5.RendererGL.Retained.js:8"},{"message":"Missing item type\ncreates a buffers object that holds the WebGL render buffers\nfor a geometry.","line":" src/webgl/p5.RendererGL.Retained.js:59"},{"message":"Missing item type\nDraws buffers given a geometry key ID","line":" src/webgl/p5.RendererGL.Retained.js:97"},{"message":"Missing item type\nmodel view, projection, & normal\nmatrices","line":" src/webgl/p5.RendererGL.js:117"},{"message":"Missing item type\n[background description]","line":" src/webgl/p5.RendererGL.js:583"},{"message":"Missing item type\n[resize description]","line":" src/webgl/p5.RendererGL.js:857"},{"message":"Missing item type\nclears color and depth buffers\nwith r,g,b,a","line":" src/webgl/p5.RendererGL.js:887"},{"message":"Missing item type\n[translate description]","line":" src/webgl/p5.RendererGL.js:919"},{"message":"Missing item type\nScales the Model View Matrix by a vector","line":" src/webgl/p5.RendererGL.js:938"},{"message":"Missing item type\nturn a two dimensional array into one dimensional array","line":" src/webgl/p5.RendererGL.js:1356"},{"message":"Missing item type\nturn a p5.Vector Array into a one dimensional number array","line":" src/webgl/p5.RendererGL.js:1393"},{"message":"Missing item type\nensures that p5 is using a 3d renderer. throws an error if not.","line":" src/webgl/p5.RendererGL.js:1411"},{"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\nThe p5.Effect class is built\n \tusing Tone.js CrossFade","line":" lib/addons/p5.sound.js:293"},{"message":"Missing item type\nIn classes that extend\np5.Effect, connect effect nodes\nto the wet parameter","line":" lib/addons/p5.sound.js:300"},{"message":"Missing item type","line":" lib/addons/p5.sound.js:451"},{"message":"Missing item type\nUsed by Osc and Envelope to chain signal math","line":" lib/addons/p5.sound.js:688"},{"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:2721"},{"message":"Missing item type\nThis module has shims","line":" lib/addons/p5.sound.js:2969"},{"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:3105"},{"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:3555"},{"message":"Missing item type\nStop playback on all of this soundfile's sources.","line":" lib/addons/p5.sound.js:4056"},{"message":"Missing item type","line":" lib/addons/p5.sound.js:4590"},{"message":"Missing item type\nEQFilter extends p5.Filter with constraints\nnecessary for the p5.EQ","line":" lib/addons/p5.sound.js:8235"},{"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:9362"},{"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:9557"},{"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:10516"},{"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:10534"},{"message":"Missing item type\ncallback invoked when the recording is over","line":" lib/addons/p5.sound.js:11153"},{"message":"Missing item type","line":" lib/addons/p5.sound.min.js:1"}],"consts":{"RGB":["p5.colorMode"],"HSB":["p5.colorMode"],"HSL":["p5.colorMode"],"CHORD":["p5.arc"],"PIE":["p5.arc"],"OPEN":["p5.arc"],"CENTER":["p5.ellipseMode","p5.rectMode","p5.imageMode","p5.textAlign"],"RADIUS":["p5.ellipseMode","p5.rectMode"],"CORNER":["p5.ellipseMode","p5.rectMode","p5.imageMode"],"CORNERS":["p5.ellipseMode","p5.rectMode","p5.imageMode"],"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"],"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"],"VIDEO":["p5.createCapture"],"AUDIO":["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"],"BLUR":["p5.Image.filter","p5.filter"],"ERODE":["p5.Image.filter","p5.filter"],"DILATE":["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"],"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.3.1","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/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":{"Rendering":1},"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/shim.js":{"name":"src/core/shim.js","modules":{},"classes":{},"fors":{},"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":{"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/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.Geometry.js":{"name":"src/webgl/p5.Geometry.js","modules":{},"classes":{"p5.Geometry":1},"fors":{"p5":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.Effect":1,"p5.Filter":1,"p5.LowPass":1,"p5.HighPass":1,"p5.BandPass":1,"p5.Oscillator":1,"p5.SinOsc":1,"p5.TriOsc":1,"p5.SawOsc":1,"p5.SqrOsc":1,"p5.MonoSynth":1,"p5.AudioVoice":1,"p5.PolySynth":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Signal":1,"p5.Envelope":1,"p5.Pulse":1,"p5.Noise":1,"p5.AudioIn":1,"p5.EQ":1,"p5.Panner3D":1,"p5.Delay":1,"p5.Reverb":1,"p5.Convolver":1,"p5.Phrase":1,"p5.Part":1,"p5.Score":1,"p5.SoundLoop":1,"p5.Compressor":1,"p5.SoundRecorder":1,"p5.PeakDetect":1,"p5.Gain":1,"p5.Distortion":1},"fors":{"p5.sound":1,"p5.Effect":1,"p5":1,"p5.Oscillator":1,"p5.MonoSynth":1,"p5.AudioVoice":1,"p5.PolySynth":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Signal":1,"p5.Envelope":1,"p5.AudioIn":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.Gain":1,"p5.Distortion":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":14},"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":14,"requires":["core","constants"],"description":"<p>Each color stores the color mode and level maxes that was applied at the\ntime of its construction. These are used to interpret the input arguments\n(at construction and later for that instance of color) and to format the\noutput e.g. when <a href=\"#/p5/saturation\">saturation()</a> is requested.</p>\n<p>Internally, we store an array representing the ideal RGBA values in floating\npoint form, normalized from 0 to 1. From this we calculate the closest\nscreen color (RGBA levels from 0 to 255) and expose this to the renderer.</p>\n<p>We also cache normalized, floating point components of the color in various\nrepresentations as they are calculated. This is done to prevent repeating a\nconversion that has already been performed.</p>\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":{},"fors":{"p5":1},"namespaces":{}},"2D Primitives":{"name":"2D Primitives","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src/core/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":3490,"description":"<p>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 <a href=\"#/p5.Element\">p5.Element</a> that supports a range of HTML elements. See the\n<a href='https://github.com/processing/p5.js/wiki/Beyond-the-canvas'>\nbeyond the canvas tutorial</a> for a full overview of how this addon works.</p>\n<p>See <a href='https://github.com/processing/p5.js/wiki/Beyond-the-canvas'>tutorial: beyond the canvas</a>\nfor more info on how to use this library.</a></p>\n","requires":["p5"]},"Rendering":{"name":"Rendering","submodules":{"undefined":1},"elements":{},"classes":{"p5.RendererGL":1,"p5.Graphics":1,"p5.Renderer":1},"fors":{"p5":1},"namespaces":{},"module":"Rendering","file":"src/webgl/p5.RendererGL.js","line":600,"description":"<p>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.</p>\n"},"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":410},"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":410,"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":"<p>Base class for all p5.Dictionary types. Specifically\n typed Dictionary classes inherit from this class.</p>\n"},"Events":{"name":"Events","submodules":{"Acceleration":1,"Keyboard":1,"Mouse":1,"Touch":1},"elements":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"Acceleration":{"name":"Acceleration","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/acceleration.js","line":1,"requires":["core"]},"Keyboard":{"name":"Keyboard","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/keyboard.js","line":1,"requires":["core"]},"Mouse":{"name":"Mouse","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/mouse.js","line":1,"requires":["core","constants"]},"Touch":{"name":"Touch","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/touch.js","line":1,"requires":["core"]},"Image":{"name":"Image","submodules":{"Pixels":1},"elements":{},"classes":{"p5.Image":1},"fors":{"p5":1},"namespaces":{},"module":"Image","file":"src/image/p5.Image.js","line":21,"requires":["core"],"description":"<p>Creates a new <a href=\"#/p5.Image\">p5.Image</a>. A <a href=\"#/p5.Image\">p5.Image</a> is a canvas backed representation of an\nimage.</p>\n<p>p5 can display .gif, .jpg and .png images. Images may be displayed\nin 2D and 3D space. Before an image is used, it must be loaded with the\n<a href=\"#/p5/loadImage\">loadImage()</a> function. The <a href=\"#/p5.Image\">p5.Image</a> class contains fields for the width and\nheight of the image, as well as an array called <a href=\"#/p5.Image/pixels\">pixels[]</a> that contains the\nvalues for every pixel in the image.</p>\n<p>The methods described below allow easy access to the image's pixels and\nalpha channel and simplify the process of compositing.</p>\n<p>Before using the <a href=\"#/p5.Image/pixels\">pixels[]</a> array, be sure to use the <a href=\"#/p5.Image/loadPixels\">loadPixels()</a> method on\nthe image to make sure that the pixel data is properly loaded.</p>\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":"<p>This module defines the <a href=\"#/p5.Font\">p5.Font</a> class and functions for\ndrawing text to the display canvas.</p>\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":"<p>XML is a representation of an XML object, able to parse XML code. Use\n<a href=\"#/p5/loadXML\">loadXML()</a> to load external XML files and create XML objects.</p>\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":1200,"description":"<p>This is the p5 instance constructor.</p>\n<p>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 <a href=\"#/p5/preload\">preload()</a>,\n<a href=\"#/p5/setup\">setup()</a>, and/or\n<a href=\"#/p5/draw\">draw()</a> properties on it for running a sketch.</p>\n<p>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</p>\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":"<p><a href=\"#/p5.Table\">Table</a> 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.</p>\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":10},"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":10,"requires":["core"],"description":"<p>A class to describe a two or three dimensional vector, specifically\na Euclidean (also known as geometric) vector. A vector is an entity\nthat has both magnitude and direction. The datatype, however, stores\nthe components of the vector (x, y for 2D, and x, y, z for 3D). The magnitude\nand direction can be accessed via the methods <a href=\"#/p5.Vector/mag\">mag()</a> and <a href=\"#/p5.Vector/heading\">heading()</a>.</p>\n<p>In many of the p5.js examples, you will see <a href=\"#/p5.Vector\">p5.Vector</a> used to describe a\nposition, velocity, or acceleration. For example, if you consider a rectangle\nmoving across the screen, at any given instant it has a position (a vector\nthat points from the origin to its location), a velocity (the rate at which\nthe object's position changes per time unit, expressed as a vector), and\nacceleration (the rate at which the object's velocity changes per time\nunit, expressed as a vector).</p>\n<p>Since vectors represent groupings of values, we cannot simply use\ntraditional addition/multiplication/etc. Instead, we'll need to do some\n\"vector\" math, which is made easy by the methods inside the <a href=\"#/p5.Vector\">p5.Vector</a> class.</p>\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":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src/webgl/3d_primitives.js","line":1,"requires":["core","p5.Geometry"]},"Lights, Camera":{"name":"Lights, Camera","submodules":{"Interaction":1,"Lights":1,"Material":1,"Camera":1},"elements":{},"classes":{"p5.Camera":1,"p5.Geometry":1,"p5.Matrix":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":260},"Interaction":{"name":"Interaction","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Lights, Camera","namespace":"","file":"src/webgl/interaction.js","line":1,"requires":["core"]},"Lights":{"name":"Lights","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Lights, Camera","namespace":"","file":"src/webgl/light.js","line":1,"requires":["core"]},"3D Models":{"name":"3D Models","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src/webgl/loading.js","line":1,"requires":["core","p5.Geometry"]},"Material":{"name":"Material","submodules":{},"elements":{},"classes":{"p5.Geometry":1,"p5.Shader":1,"p5.Texture":1},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Lights, Camera","namespace":"","file":"src/webgl/p5.Texture.js","line":12,"requires":["core"],"description":"<p>This module defines the p5.Shader class</p>\n"},"Camera":{"name":"Camera","submodules":{},"elements":{},"classes":{"p5.Camera":1},"fors":{"p5":1,"p5.Camera":1},"is_submodule":1,"namespaces":{},"module":"Lights, Camera","namespace":"","file":"src/webgl/p5.Camera.js","line":339,"requires":["core"],"description":"<p>This class describes a camera for use in p5's\n<a href=\"https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5\">\nWebGL mode</a>. It contains camera position, orientation, and projection\ninformation necessary for rendering a 3D scene.</p>\n<p>New p5.Camera objects can be made through the\n<a href=\"#/p5/createCamera\">createCamera()</a> 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 <a href=\"#/p5/setCamera\">setCamera()</a> method.</p>\n<p>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 <a href=\"#/p5.Camera/move\">move()</a> method,\nfor instance, moves the camera along its own axes, whereas the\n<a href=\"#/p5.Camera/setPosition\">setPosition()</a>\nmethod sets the camera's position in world-space.</p>\n<p>The camera object propreties\n<code>eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ</code>\nwhich describes camera position, orientation, and projection\nare also accessible via the camera object generated using\n<a href=\"#/p5/createCamera\">createCamera()</a></p>\n"},"p5.sound":{"name":"p5.sound","submodules":{},"elements":{},"classes":{"p5.sound":1,"p5.Effect":1,"p5.Filter":1,"p5.LowPass":1,"p5.HighPass":1,"p5.BandPass":1,"p5.Oscillator":1,"p5.SinOsc":1,"p5.TriOsc":1,"p5.SawOsc":1,"p5.SqrOsc":1,"p5.MonoSynth":1,"p5.AudioVoice":1,"p5.PolySynth":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Signal":1,"p5.Envelope":1,"p5.Pulse":1,"p5.Noise":1,"p5.AudioIn":1,"p5.EQ":1,"p5.Panner3D":1,"p5.Delay":1,"p5.Reverb":1,"p5.Convolver":1,"p5.Phrase":1,"p5.Part":1,"p5.Score":1,"p5.SoundLoop":1,"p5.Compressor":1,"p5.SoundRecorder":1,"p5.PeakDetect":1,"p5.Gain":1,"p5.Distortion":1},"fors":{"p5.sound":1,"p5.Effect":1,"p5":1,"p5.Oscillator":1,"p5.MonoSynth":1,"p5.AudioVoice":1,"p5.PolySynth":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Signal":1,"p5.Envelope":1,"p5.AudioIn":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.Gain":1,"p5.Distortion":1},"namespaces":{},"module":"p5.sound","file":"lib/addons/p5.sound.js","line":11703,"description":"<p>p5.sound extends p5 with <a href=\"http://caniuse.com/audio-api\"\ntarget=\"_blank\">Web Audio</a> functionality including audio input,\nplayback, analysis and synthesis.\n</p>\n<ul>\n<li><a href=\"#/p5.SoundFile\"><b>p5.SoundFile</b></a>: Load and play sound files.</li>\n<li><a href=\"#/p5.Amplitude\"><b>p5.Amplitude</b></a>: Get the current volume of a sound.</li>\n<li><a href=\"#/p5.AudioIn\"><b>p5.AudioIn</b></a>: Get sound from an input source, typically\n  a computer microphone.</li>\n<li><a href=\"#/p5.FFT\"><b>p5.FFT</b></a>: Analyze the frequency of sound. Returns\n  results from the frequency spectrum or time domain (waveform).</li>\n<li><a href=\"#/p5.Oscillator\"><b>p5.Oscillator</b></a>: Generate Sine,\n  Triangle, Square and Sawtooth waveforms. Base class of\n  <li><a href=\"#/p5.Noise\">p5.Noise</a> and <a href=\"#/p5.Pulse\">p5.Pulse</a>.\n  </li>\n<li>\n  <a href=\"#/p5.MonoSynth\">p5.MonoSynth</a> and <a href=\"#/p5.PolySynth\">p5.PolySynth</a>: Play musical notes\n</li>\n<li><a href=\"#/p5.Envelope\"><b>p5.Envelope</b></a>: 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.</li>\n<li><a href=\"#/p5.Delay\"><b>p5.Delay</b></a>: A delay effect with\n  parameters for feedback, delayTime, and lowpass filter.</li>\n<li><a href=\"#/p5.Filter\"><b>p5.Filter</b></a>: Filter the frequency range of a\n  sound.\n</li>\n<li><a href=\"#/p5.Reverb\"><b>p5.Reverb</b></a>: Add reverb to a sound by specifying\n  duration and decay. </li>\n<b><li><a href=\"#/p5.Convolver\">p5.Convolver</a>:</b> Extends\n<a href=\"#/p5.Reverb\">p5.Reverb</a> to simulate the sound of real\n  physical spaces through convolution.</li>\n<b><li><a href=\"#/p5.SoundRecorder\">p5.SoundRecorder</a></b>: Record sound for playback\n  / save the .wav file.\n<b><li><a href=\"#/p5.SoundLoop\">p5.SoundLoop</a>, <a href=\"#/p5.Phrase\">p5.Phrase</a></b>, <b><a href=\"#/p5.Part\">p5.Part</a></b> and\n<b><a href=\"#/p5.Score\">p5.Score</a></b>: Compose musical sequences.\n</li>\n<li><a href=\"#/p5/userStartAudio\">userStartAudio</a>: Enable audio in a\nbrowser- and user-friendly way.</a>\n<p>p5.sound is on <a href=\"https://github.com/therewasaguy/p5.sound/\">GitHub</a>.\nDownload the latest version\n<a href=\"https://github.com/therewasaguy/p5.sound/blob/master/lib/p5.sound.js\">here</a>.</p>","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":13,"description":"<p>This is the p5 instance constructor.</p>\n<p>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 <a href=\"#/p5/preload\">preload()</a>,\n<a href=\"#/p5/setup\">setup()</a>, and/or\n<a href=\"#/p5/draw\">draw()</a> properties on it for running a sketch.</p>\n<p>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</p>\n","is_constructor":1,"params":[{"name":"sketch","description":"<p>a closure that can set optional <a href=\"#/p5/preload\">preload()</a>,\n                             <a href=\"#/p5/setup\">setup()</a>, and/or <a href=\"#/p5/draw\">draw()</a> properties on the\n                             given p5 instance</p>\n","type":"Function"},{"name":"node","description":"<p>element to attach canvas to</p>\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":14,"description":"<p>Each color stores the color mode and level maxes that was applied at the\ntime of its construction. These are used to interpret the input arguments\n(at construction and later for that instance of color) and to format the\noutput e.g. when <a href=\"#/p5/saturation\">saturation()</a> is requested.</p>\n<p>Internally, we store an array representing the ideal RGBA values in floating\npoint form, normalized from 0 to 1. From this we calculate the closest\nscreen color (RGBA levels from 0 to 255) and expose this to the renderer.</p>\n<p>We also cache normalized, floating point components of the color in various\nrepresentations as they are calculated. This is done to prevent repeating a\nconversion that has already been performed.</p>\n","is_constructor":1},"p5.Element":{"name":"p5.Element","shortname":"p5.Element","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"DOM","submodule":"DOM","namespace":"","file":"src/core/p5.Element.js","line":9,"description":"<p>Base class for all elements added to a sketch, including canvas,\ngraphics buffers, and other HTML elements. It is not called directly, but <a href=\"#/p5.Element\">p5.Element</a>\nobjects are created by calling <a href=\"#/p5/createCanvas\">createCanvas</a>, <a href=\"#/p5/createGraphics\">createGraphics</a>,\n<a href=\"#/p5/createDiv\">createDiv</a>, <a href=\"#/p5/createImg\">createImg</a>, <a href=\"#/p5/createInput\">createInput</a>, etc.</p>\n","is_constructor":1,"params":[{"name":"elt","description":"<p>DOM node that is wrapped</p>\n","type":"String"},{"name":"pInst","description":"<p>pointer to p5 instance</p>\n","type":"P5","optional":true}]},"p5.Graphics":{"name":"p5.Graphics","shortname":"p5.Graphics","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Rendering","submodule":"Rendering","namespace":"","file":"src/core/p5.Graphics.js","line":10,"description":"<p>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.</p>\n","is_constructor":1,"extends":"p5.Element","params":[{"name":"w","description":"<p>width</p>\n","type":"Number"},{"name":"h","description":"<p>height</p>\n","type":"Number"},{"name":"renderer","description":"<p>the renderer to use, either P2D or WEBGL</p>\n","type":"Constant"},{"name":"pInst","description":"<p>pointer to p5 instance</p>\n","type":"P5","optional":true}]},"p5.Renderer":{"name":"p5.Renderer","shortname":"p5.Renderer","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Rendering","submodule":"Rendering","namespace":"","file":"src/core/p5.Renderer.js","line":10,"description":"<p>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.</p>\n","is_constructor":1,"extends":"p5.Element","params":[{"name":"elt","description":"<p>DOM node that is wrapped</p>\n","type":"String"},{"name":"pInst","description":"<p>pointer to p5 instance</p>\n","type":"P5","optional":true},{"name":"isMainCanvas","description":"<p>whether we're using it as main canvas</p>\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":"<p>Base class for all p5.Dictionary types. Specifically\n typed Dictionary classes inherit from this class.</p>\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":394,"description":"<p>A simple Dictionary class for Strings.</p>\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":410,"description":"<p>A simple Dictionary class for Numbers.</p>\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":2334,"description":"<p>Extends <a href=\"#/p5.Element\">p5.Element</a> to handle audio and video. In addition to the methods\nof <a href=\"#/p5.Element\">p5.Element</a>, it also contains methods for controlling media. It is not\ncalled directly, but <a href=\"#/p5.MediaElement\">p5.MediaElement</a>s are created by calling <a href=\"#/p5/createVideo\">createVideo</a>,\n<a href=\"#/p5/createAudio\">createAudio</a>, and <a href=\"#/p5/createCapture\">createCapture</a>.</p>\n","is_constructor":1,"params":[{"name":"elt","description":"<p>DOM node that is wrapped</p>\n","type":"String"}]},"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":3490,"description":"<p>Base class for a file.\nUsed for Element.drop and createFileInput.</p>\n","is_constructor":1,"params":[{"name":"file","description":"<p>File that is wrapped</p>\n","type":"File"}]},"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":"<p>Creates a new <a href=\"#/p5.Image\">p5.Image</a>. A <a href=\"#/p5.Image\">p5.Image</a> is a canvas backed representation of an\nimage.</p>\n<p>p5 can display .gif, .jpg and .png images. Images may be displayed\nin 2D and 3D space. Before an image is used, it must be loaded with the\n<a href=\"#/p5/loadImage\">loadImage()</a> function. The <a href=\"#/p5.Image\">p5.Image</a> class contains fields for the width and\nheight of the image, as well as an array called <a href=\"#/p5.Image/pixels\">pixels[]</a> that contains the\nvalues for every pixel in the image.</p>\n<p>The methods described below allow easy access to the image's pixels and\nalpha channel and simplify the process of compositing.</p>\n<p>Before using the <a href=\"#/p5.Image/pixels\">pixels[]</a> array, be sure to use the <a href=\"#/p5.Image/loadPixels\">loadPixels()</a> method on\nthe image to make sure that the pixel data is properly loaded.</p>\n","example":["\n<div><code>\nfunction setup() {\n  let img = createImage(100, 100); // same as new p5.Image(100, 100);\n  img.loadPixels();\n  createCanvas(100, 100);\n  background(0);\n\n  // helper for writing color to array\n  function writeColor(image, x, y, red, green, blue, alpha) {\n    let index = (x + y * width) * 4;\n    image.pixels[index] = red;\n    image.pixels[index + 1] = green;\n    image.pixels[index + 2] = blue;\n    image.pixels[index + 3] = alpha;\n  }\n\n  let x, y;\n  // fill with random colors\n  for (y = 0; y < img.height; y++) {\n    for (x = 0; x < img.width; x++) {\n      let red = random(255);\n      let green = random(255);\n      let blue = random(255);\n      let alpha = 255;\n      writeColor(img, x, y, red, green, blue, alpha);\n    }\n  }\n\n  // draw a red line\n  y = 0;\n  for (x = 0; x < img.width; x++) {\n    writeColor(img, x, y, 255, 0, 0, 255);\n  }\n\n  // draw a green line\n  y = img.height - 1;\n  for (x = 0; x < img.width; x++) {\n    writeColor(img, x, y, 0, 255, 0, 255);\n  }\n\n  img.updatePixels();\n  image(img, 0, 0);\n}\n</code></div>"],"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":1200,"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":"<p><a href=\"#/p5.Table\">Table</a> 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.</p>\n","is_constructor":1,"params":[{"name":"rows","description":"<p>An array of p5.TableRow objects</p>\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":"<p>A TableRow object represents a single row of data values,\nstored in columns, from a table.</p>\n<p>A Table Row contains both an ordered array, and an unordered\nJSON object.</p>\n","is_constructor":1,"params":[{"name":"str","description":"<p>optional: populate the row with a\n                            string of values, separated by the\n                            separator</p>\n","type":"String","optional":true},{"name":"separator","description":"<p>comma separated values (csv) by default</p>\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":"<p>XML is a representation of an XML object, able to parse XML code. Use\n<a href=\"#/p5/loadXML\">loadXML()</a> to load external XML files and create XML objects.</p>\n","is_constructor":1,"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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\n// Sketch prints:\n// 0, Capra hircus, Goat\n// 1, Panthera pardus, Leopard\n// 2, Equus zebra, Zebra\n</code></div>"],"alt":"no image displayed"},"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":10,"description":"<p>A class to describe a two or three dimensional vector, specifically\na Euclidean (also known as geometric) vector. A vector is an entity\nthat has both magnitude and direction. The datatype, however, stores\nthe components of the vector (x, y for 2D, and x, y, z for 3D). The magnitude\nand direction can be accessed via the methods <a href=\"#/p5.Vector/mag\">mag()</a> and <a href=\"#/p5.Vector/heading\">heading()</a>.</p>\n<p>In many of the p5.js examples, you will see <a href=\"#/p5.Vector\">p5.Vector</a> used to describe a\nposition, velocity, or acceleration. For example, if you consider a rectangle\nmoving across the screen, at any given instant it has a position (a vector\nthat points from the origin to its location), a velocity (the rate at which\nthe object's position changes per time unit, expressed as a vector), and\nacceleration (the rate at which the object's velocity changes per time\nunit, expressed as a vector).</p>\n<p>Since vectors represent groupings of values, we cannot simply use\ntraditional addition/multiplication/etc. Instead, we'll need to do some\n\"vector\" math, which is made easy by the methods inside the <a href=\"#/p5.Vector\">p5.Vector</a> class.</p>\n","is_constructor":1,"params":[{"name":"x","description":"<p>x component of the vector</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>z component of the vector</p>\n","type":"Number","optional":true}],"example":["\n<div>\n<code>\nlet v1 = createVector(40, 50);\nlet v2 = createVector(40, 50);\n\nellipse(v1.x, v1.y, 50, 50);\nellipse(v2.x, v2.y, 50, 50);\nv1.add(v2);\nellipse(v1.x, v1.y, 50, 50);\n</code>\n</div>"],"alt":"2 white ellipses. One center-left the other bottom right and off canvas"},"p5.Font":{"name":"p5.Font","shortname":"p5.Font","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Typography","submodule":"Loading & Displaying","namespace":"","file":"src/typography/p5.Font.js","line":13,"description":"<p>Base class for font handling</p>\n","is_constructor":1,"params":[{"name":"pInst","description":"<p>pointer to p5 instance</p>\n","type":"P5","optional":true}]},"p5.Camera":{"name":"p5.Camera","shortname":"p5.Camera","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Lights, Camera","submodule":"Camera","namespace":"","file":"src/webgl/p5.Camera.js","line":339,"description":"<p>This class describes a camera for use in p5's\n<a href=\"https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5\">\nWebGL mode</a>. It contains camera position, orientation, and projection\ninformation necessary for rendering a 3D scene.</p>\n<p>New p5.Camera objects can be made through the\n<a href=\"#/p5/createCamera\">createCamera()</a> 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 <a href=\"#/p5/setCamera\">setCamera()</a> method.</p>\n<p>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 <a href=\"#/p5.Camera/move\">move()</a> method,\nfor instance, moves the camera along its own axes, whereas the\n<a href=\"#/p5.Camera/setPosition\">setPosition()</a>\nmethod sets the camera's position in world-space.</p>\n<p>The camera object propreties\n<code>eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ</code>\nwhich describes camera position, orientation, and projection\nare also accessible via the camera object generated using\n<a href=\"#/p5/createCamera\">createCamera()</a></p>\n","params":[{"name":"rendererGL","description":"<p>instance of WebGL renderer</p>\n","type":"RendererGL"}],"example":["\n<div>\n<code>\nlet cam;\nlet delta = 0.01;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n  cam = createCamera();\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</code>\n</div>"],"alt":"camera view pans left and right across a series of rotating 3D boxes."},"p5.Geometry":{"name":"p5.Geometry","shortname":"p5.Geometry","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Lights, Camera","submodule":"Material","namespace":"","file":"src/webgl/p5.Geometry.js","line":12,"description":"<p>p5 Geometry class</p>\n","is_constructor":1,"params":[{"name":"detailX","description":"<p>number of vertices on horizontal surface</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of vertices on horizontal surface</p>\n","type":"Integer","optional":true},{"name":"callback","description":"<p>function to call upon object instantiation.</p>\n","type":"Function","optional":true}]},"p5.Shader":{"name":"p5.Shader","shortname":"p5.Shader","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Lights, Camera","submodule":"Material","namespace":"","file":"src/webgl/p5.Shader.js","line":11,"description":"<p>Shader class for WEBGL Mode</p>\n","is_constructor":1,"params":[{"name":"renderer","description":"<p>an instance of p5.RendererGL that\nwill provide the GL context for this new p5.Shader</p>\n","type":"p5.RendererGL"},{"name":"vertSrc","description":"<p>source code for the vertex shader (as a string)</p>\n","type":"String"},{"name":"fragSrc","description":"<p>source code for the fragment shader (as a string)</p>\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.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":264,"description":"<p>Effect is a base class for audio effects in p5. <br>\nThis module handles the nodes and methods that are\ncommon and useful for current and future effects.</p>\n<p>This class is extended by <a href=\"/reference/#/p5.Distortion\">p5.Distortion</a>,\n<a href=\"/reference/#/p5.Compressor\">p5.Compressor</a>,\n<a href=\"/reference/#/p5.Delay\">p5.Delay</a>,\n<a href=\"/reference/#/p5.Filter\">p5.Filter</a>,\n<a href=\"/reference/#/p5.Reverb\">p5.Reverb</a>.</p>\n","is_constructor":1,"params":[{"name":"ac","description":"<p>Reference to the audio context of the p5 object</p>\n","type":"Object","optional":true},{"name":"input","description":"<p>Gain Node effect wrapper</p>\n","type":"AudioNode","optional":true},{"name":"output","description":"<p>Gain Node effect wrapper</p>\n","type":"AudioNode","optional":true},{"name":"_drywet","description":"<p>Tone.JS CrossFade node (defaults to value: 1)</p>\n","type":"Object","optional":true},{"name":"wet","description":"<p>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.</p>\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":883,"description":"<p>A p5.Filter uses a Web Audio Biquad Filter to filter\nthe frequency response of an input source. Subclasses\ninclude:</p>\n<a href=\"/reference/#/p5.LowPass\"><code>p5.LowPass</code></a>:\nAllows frequencies below the cutoff frequency to pass through,\nand attenuates frequencies above the cutoff.<br/>\n<a href=\"/reference/#/p5.HighPass\"><code>p5.HighPass</code></a>:\nThe opposite of a lowpass filter. <br/>\n<a href=\"/reference/#/p5.BandPass\"><code>p5.BandPass</code></a>:\nAllows a range of frequencies to pass through and attenuates\nthe frequencies below and above this frequency range.<br/>\n\n<p>The <code>.res()</code> method controls either width of the\nbandpass, or resonance of the low/highpass cutoff frequency.</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","extends":"p5.Effect","is_constructor":1,"params":[{"name":"type","description":"<p>'lowpass' (default), 'highpass', 'bandpass'</p>\n","type":"String","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":1147,"description":"<p>Constructor: <code>new p5.LowPass()</code> Filter.\nThis is the same as creating a p5.Filter and then calling\nits method <code>setType('lowpass')</code>.\nSee p5.Filter for methods.</p>\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":1164,"description":"<p>Constructor: <code>new p5.HighPass()</code> Filter.\nThis is the same as creating a p5.Filter and then calling\nits method <code>setType('highpass')</code>.\nSee p5.Filter for methods.</p>\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":1180,"description":"<p>Constructor: <code>new p5.BandPass()</code> Filter.\nThis is the same as creating a p5.Filter and then calling\nits method <code>setType('bandpass')</code>.\nSee p5.Filter for methods.</p>\n","is_constructor":1,"extends":"p5.Filter"},"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":1375,"description":"<p>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).</p>\n\n<p>Set the type of oscillation with setType(), or by instantiating a\nspecific oscillator: <a href=\"/reference/#/p5.SinOsc\">p5.SinOsc</a>, <a\nhref=\"/reference/#/p5.TriOsc\">p5.TriOsc</a>, <a\nhref=\"/reference/#/p5.SqrOsc\">p5.SqrOsc</a>, or <a\nhref=\"/reference/#/p5.SawOsc\">p5.SawOsc</a>.\n</p>","is_constructor":1,"params":[{"name":"freq","description":"<p>frequency defaults to 440Hz</p>\n","type":"Number","optional":true},{"name":"type","description":"<p>type of oscillator. Options:\n                       'sine' (default), 'triangle',\n                       'sawtooth', 'square'</p>\n","type":"String","optional":true}],"example":["\n<div><code>\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</code> </div>"]},"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":1890,"description":"<p>Constructor: <code>new p5.SinOsc()</code>.\nThis creates a Sine Wave Oscillator and is\nequivalent to <code> new p5.Oscillator('sine')\n</code> or creating a p5.Oscillator and then calling\nits method <code>setType('sine')</code>.\nSee p5.Oscillator for methods.</p>\n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"<p>Set the frequency</p>\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":1910,"description":"<p>Constructor: <code>new p5.TriOsc()</code>.\nThis creates a Triangle Wave Oscillator and is\nequivalent to <code>new p5.Oscillator('triangle')\n</code> or creating a p5.Oscillator and then calling\nits method <code>setType('triangle')</code>.\nSee p5.Oscillator for methods.</p>\n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"<p>Set the frequency</p>\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":1929,"description":"<p>Constructor: <code>new p5.SawOsc()</code>.\nThis creates a SawTooth Wave Oscillator and is\nequivalent to <code> new p5.Oscillator('sawtooth')\n</code> or creating a p5.Oscillator and then calling\nits method <code>setType('sawtooth')</code>.\nSee p5.Oscillator for methods.</p>\n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"<p>Set the frequency</p>\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":1948,"description":"<p>Constructor: <code>new p5.SqrOsc()</code>.\nThis creates a Square Wave Oscillator and is\nequivalent to <code> new p5.Oscillator('square')\n</code> or creating a p5.Oscillator and then calling\nits method <code>setType('square')</code>.\nSee p5.Oscillator for methods.</p>\n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"<p>Set the frequency</p>\n","type":"Number","optional":true}]},"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":2008,"description":"<p>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.</p>\n","is_constructor":1,"example":["\n<div><code>\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</code></div>"]},"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":2356,"description":"<p>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();</p>\n","is_constructor":1},"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":2426,"description":"<p>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.</p>\n","is_constructor":1,"params":[{"name":"synthVoice","description":"<p>A monophonic synth voice inheriting\n                               the AudioVoice class. Defaults to p5.MonoSynth</p>\n","type":"Number","optional":true},{"name":"maxVoices","description":"<p>Number of voices, defaults to 8;</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":3360,"description":"<p>SoundFile object with a path to a file.</p>\n\n<p>The p5.SoundFile may not be available immediately because\nit loads the file information asynchronously.</p>\n\n<p>To do something with the sound as soon as it loads\npass the name of a function as the second parameter.</p>\n\n<p>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.</p>","is_constructor":1,"params":[{"name":"path","description":"<p>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.</p>\n","type":"String|Array"},{"name":"successCallback","description":"<p>Name of a function to call once file loads</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>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.</p>\n","type":"Function","optional":true},{"name":"whileLoadingCallback","description":"<p>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.</p>\n","type":"Function","optional":true}],"example":["\n<div><code>\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 </code></div>"]},"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":5186,"description":"<p>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.</p>\n","is_constructor":1,"params":[{"name":"smoothing","description":"<p>between 0.0 and .999 to smooth\n                           amplitude readings (defaults to 0)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\nlet sound, amplitude;\n\nfunction preload(){\n  sound = loadSound('assets/beat.mp3');\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);\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 (sound.isPlaying() ){\n    sound.stop();\n  } else {\n    sound.play();\n  }\n}\n\n</code></div>"]},"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":5499,"description":"<p>FFT (Fast Fourier Transform) is an analysis algorithm that\nisolates individual\n<a href=\"https://en.wikipedia.org/wiki/Audio_frequency\">\naudio frequencies</a> within a waveform.</p>\n\n<p>Once instantiated, a p5.FFT object can return an array based on\ntwo types of analyses: <br> • <code>FFT.waveform()</code> 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.<br>\n• <code>FFT.analyze() </code> 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 <code>getEnergy()</code> to measure amplitude at specific\nfrequencies, or within a range of frequencies. </p>\n\n<p>FFT analyzes a very short snapshot of sound called a sample\nbuffer. It returns an array of amplitude measurements, referred\nto as <code>bins</code>. 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.</p>","is_constructor":1,"params":[{"name":"smoothing","description":"<p>Smooth results of Freq Spectrum.\n                              0.0 < smoothing < 1.0.\n                              Defaults to 0.8.</p>\n","type":"Number","optional":true},{"name":"bins","description":"<p>Length of resulting array.\n                          Must be a power of two between\n                          16 and 1024. Defaults to 1024.</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"p5.Signal":{"name":"p5.Signal","shortname":"p5.Signal","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":6146,"description":"<p>p5.Signal is a constant audio-rate signal used by p5.Oscillator\nand p5.Envelope for modulation math.</p>\n\n<p>This is necessary because Web Audio is processed on a seprate clock.\nFor example, the p5 draw loop runs about 60 times per second. But\nthe audio clock must process samples 44100 times per second. If we\nwant to add a value to each of those samples, we can't do it in the\ndraw loop, but we can do it by adding a constant-rate audio signal.</p.\n\n<p>This class mostly functions behind the scenes in p5.sound, and returns\na Tone.Signal from the Tone.js library by Yotam Mann.\nIf you want to work directly with audio signals for modular\nsynthesis, check out\n<a href='http://bit.ly/1oIoEng' target=_'blank'>tone.js.</a></p>","is_constructor":1,"return":{"description":"A Signal object from the Tone.js library","type":"Tone.Signal"},"example":["\n<div><code>\nlet carrier, modulator;\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  carrier = new p5.Oscillator('sine');\n  carrier.start();\n  carrier.amp(1); // set amplitude\n  carrier.freq(220); // set frequency\n\n  modulator = new p5.Oscillator('sawtooth');\n  modulator.disconnect();\n  modulator.start();\n  modulator.amp(1);\n  modulator.freq(4);\n\n  // Modulator's default amplitude range is -1 to 1.\n  // Multiply it by -200, so the range is -200 to 200\n  // then add 220 so the range is 20 to 420\n  carrier.freq( modulator.mult(-400).add(220) );\n}\n\nfunction canvasPressed() {\n  userStartAudio();\n  carrier.amp(1.0);\n}\n\nfunction mouseReleased() {\n  carrier.amp(0);\n}\n</code></div>"]},"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":6350,"description":"<p>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 (\n<a href=\"https://upload.wikimedia.org/wikipedia/commons/e/ea/ADSR_parameter.svg\">ADSR</a>\n). Envelopes can also control other Web Audio Parameters—for example, a p5.Envelope can\ncontrol an Oscillator's frequency like this: <code>osc.freq(env)</code>.</p>\n<p>Use <code><a href=\"#/p5.Envelope/setRange\">setRange</a></code> to change the attack/release level.\nUse <code><a href=\"#/p5.Envelope/setADSR\">setADSR</a></code> to change attackTime, decayTime, sustainPercent and releaseTime.</p>\n<p>Use the <code><a href=\"#/p5.Envelope/play\">play</a></code> method to play the entire envelope,\nthe <code><a href=\"#/p5.Envelope/ramp\">ramp</a></code> method for a pingable trigger,\nor <code><a href=\"#/p5.Envelope/triggerAttack\">triggerAttack</a></code>/\n<code><a href=\"#/p5.Envelope/triggerRelease\">triggerRelease</a></code> to trigger noteOn/noteOff.</p>","is_constructor":1,"example":["\n<div><code>\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</code></div>"]},"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":7192,"description":"<p>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 <a href=\"\nhttp://p5js.org/reference/#/p5.Oscillator\">\n<code>p5.Oscillator</code> for a full list of methods.</p>\n","extends":"p5.Oscillator","is_constructor":1,"params":[{"name":"freq","description":"<p>Frequency in oscillations per second (Hz)</p>\n","type":"Number","optional":true},{"name":"w","description":"<p>Width between the pulses (0 to 1.0,\n                       defaults to 0)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":7399,"description":"<p>Noise is a type of oscillator that generates a buffer with random values.</p>\n","extends":"p5.Oscillator","is_constructor":1,"params":[{"name":"type","description":"<p>Type of noise can be 'white' (default),\n                     'brown' or 'pink'.</p>\n","type":"String"}]},"p5.AudioIn":{"name":"p5.AudioIn","shortname":"p5.AudioIn","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":7583,"description":"<p>Get audio from an input, i.e. your computer's microphone.</p>\n\n<p>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.</p>\n\n<p>If you want to hear the AudioIn, use the .connect() method.\nAudioIn does not connect to p5.sound output by default to prevent\nfeedback.</p>\n\n<p><em>Note: This uses the <a href=\"http://caniuse.com/stream\">getUserMedia/\nStream</a> 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.</em></p>","is_constructor":1,"params":[{"name":"errorCallback","description":"<p>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.</p>\n","type":"Function","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":8021,"description":"<p>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).</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","is_constructor":1,"extends":"p5.Effect","params":[{"name":"_eqsize","description":"<p>Constructor will accept 3 or 8, defaults to 3</p>\n","type":"Number","optional":true}],"return":{"description":"p5.EQ object","type":"Object"},"example":["\n<div><code>\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</code></div>"]},"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":8301,"description":"<p>Panner3D is based on the <a title=\"Web Audio Panner docs\"  href=\n\"https://developer.mozilla.org/en-US/docs/Web/API/PannerNode\">\nWeb Audio Spatial Panner Node</a>.\nThis panner is a spatial processing node that allows audio to be positioned\nand oriented in 3D space.</p>\n<p>The position is relative to an <a title=\"Web Audio Listener docs\" href=\n\"https://developer.mozilla.org/en-US/docs/Web/API/AudioListener\">\nAudio Context Listener</a>, which can be accessed\nby <code>p5.soundOut.audiocontext.listener</code></p>\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":8829,"description":"<p>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.</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","extends":"p5.Effect","is_constructor":1,"example":["\n<div><code>\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</code></div>"]},"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":9175,"description":"<p>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.</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","extends":"p5.Effect","is_constructor":1,"example":["\n<div><code>\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</code></div>"]},"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":9397,"description":"<p>p5.Convolver extends p5.Reverb. It can emulate the sound of real\nphysical spaces through a process called <a href=\"\nhttps://en.wikipedia.org/wiki/Convolution_reverb#Real_space_simulation\">\nconvolution</a>.</p>\n\n<p>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.</p>\n\n<p>Use the method <code>createConvolution(path)</code> to instantiate a\np5.Convolver with a path to your impulse response audio file.</p>","extends":"p5.Effect","is_constructor":1,"params":[{"name":"path","description":"<p>path to a sound file</p>\n","type":"String"},{"name":"callback","description":"<p>function to call when loading succeeds</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to call if loading fails.\n                                   This function will receive an error or\n                                   XMLHttpRequest object with information\n                                   about what went wrong.</p>\n","type":"Function","optional":true}],"example":["\n<div><code>\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 master output...\n  sound.disconnect();\n\n  // ...and process with cVerb\n  // so that we only hear the convolution\n  cVerb.process(sound);\n}\n\nfunction playSound() {\n  sound.play();\n}\n</code></div>"]},"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":9922,"description":"<p>A phrase is a pattern of musical events over time, i.e.\na series of notes and rests.</p>\n\n<p>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.</p>\n\n<p>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 <code>playNote(value){}</code>. 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).</p>","is_constructor":1,"params":[{"name":"name","description":"<p>Name so that you can access the Phrase.</p>\n","type":"String"},{"name":"callback","description":"<p>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.</p>\n","type":"Function"},{"name":"sequence","description":"<p>Array of values to pass into the callback\n                          at each step of the phrase.</p>\n","type":"Array"}],"example":["\n<div><code>\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</code></div>"]},"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":10002,"description":"<p>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.</p>\n\n<p>See p5.Phrase for more about musical timing.</p>","is_constructor":1,"params":[{"name":"steps","description":"<p>Steps in the part</p>\n","type":"Number","optional":true},{"name":"tatums","description":"<p>Divisions of a beat, e.g. use 1/4, or 0.25 for a quater note (default is 1/16, a sixteenth note)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":10288,"description":"<p>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\n<code>new p5.Score(a, a, b, a, c)</code></p>\n","is_constructor":1,"params":[{"name":"parts","description":"<p>One or multiple parts, to be played in sequence.</p>\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":10454,"description":"<p>SoundLoop</p>\n","is_constructor":1,"params":[{"name":"callback","description":"<p>this function will be called on each iteration of theloop</p>\n","type":"Function"},{"name":"interval","description":"<p>amount of time (if a number) or beats (if a string, following <a href = \"https://github.com/Tonejs/Tone.js/wiki/Time\">Tone.Time</a> convention) for each iteration of the loop. Defaults to 1 second.</p>\n","type":"Number|String","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":10792,"description":"<p>Compressor is an audio effect class that performs dynamics compression\non an audio input source. This is a very commonly used technique in music\nand sound production. Compression creates an overall louder, richer,\nand fuller sound by lowering the volume of louds and raising that of softs.\nCompression can be used to avoid clipping (sound distortion due to\npeaks in volume) and is especially useful when many sounds are played\nat once. Compression can be used on indivudal sound sources in addition\nto the master output.</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","is_constructor":1,"extends":"p5.Effect"},"p5.SoundRecorder":{"name":"p5.SoundRecorder","shortname":"p5.SoundRecorder","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":11056,"description":"<p>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().</p>\n<p>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.</p>","is_constructor":1,"example":["\n<div><code>\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</div></code>"]},"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":11286,"description":"<p>PeakDetect works in conjunction with p5.FFT to\nlook for onsets in some or all of the frequency spectrum.\n</p>\n<p>\nTo use p5.PeakDetect, call <code>update</code> in the draw loop\nand pass in a p5.FFT object.\n</p>\n<p>\nYou can listen for a specific part of the frequency spectrum by\nsetting the range between <code>freq1</code> and <code>freq2</code>.\n</p>\n\n<p><code>threshold</code> 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.</p>\n\n<p>\nThe update method is meant to be run in the draw loop, and\n<b>frames</b> 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<code> framesPerPeak = 60 / (estimatedBPM / 60 );</code>\n</p>\n\n<p>\nBased on example contribtued by @b2renger, and a simple beat detection\nexplanation by <a\nhref=\"http://www.airtightinteractive.com/2013/10/making-audio-reactive-visuals/\"\ntarget=\"_blank\">Felix Turner</a>.\n</p>","is_constructor":1,"params":[{"name":"freq1","description":"<p>lowFrequency - defaults to 20Hz</p>\n","type":"Number","optional":true},{"name":"freq2","description":"<p>highFrequency - defaults to 20000 Hz</p>\n","type":"Number","optional":true},{"name":"threshold","description":"<p>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.</p>\n","type":"Number","optional":true},{"name":"framesPerPeak","description":"<p>Defaults to 20.</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":11521,"description":"<p>A gain node is usefull to set the relative volume of sound.\nIt's typically used to build mixers.</p>\n","is_constructor":1,"example":["\n<div><code>\n\n// load two soundfile and crossfade beetween them\nlet sound1,sound2;\nlet sound1Gain, sound2Gain, masterGain;\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 'master' gain to which we will connect both soundfiles\n  masterGain = new p5.Gain();\n  masterGain.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(masterGain); // connect its output to the 'master'\n  sound2.disconnect();\n  sound2Gain = new p5.Gain();\n  sound2Gain.setInput(sound2);\n  sound2Gain.connect(masterGain);\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 'master    *  volume control'\n  var masterVolume = constrain(map(mouseY,height,0,0,1), 0, 1);\n  masterGain.amp(masterVolume);\n  text('master', width/2, height - masterVolume * 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</code></div>"]},"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":11703,"description":"<p>A Distortion effect created with a Waveshaper Node,\nwith an approach adapted from\n<a href=\"http://stackoverflow.com/questions/22312841/waveshaper-node-in-webaudio-how-to-emulate-distortion\">Kevin Ennis</a></p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","extends":"p5.Effect","is_constructor":1,"params":[{"name":"amount","description":"<p>Unbounded distortion amount.\n                               Normal values range from 0-1.</p>\n","type":"Number","optional":true,"optdefault":"0.25"},{"name":"oversample","description":"<p>'none', '2x', or '4x'.</p>\n","type":"String","optional":true,"optdefault":"'none'"}]}},"elements":{},"classitems":[{"file":"src/accessibility/describe.js","line":18,"description":"<p>Creates a screen reader accessible description for the canvas.\nThe first parameter should be a string with a description of the canvas.\nThe second parameter is optional. If specified, it determines how the\ndescription is displayed.</p>\n<p><code class=\"language-javascript\">describe(text, LABEL)</code> displays\nthe description to all users as a <a\nhref=\"https://en.wikipedia.org/wiki/Museum_label\" target=\"_blank\">\ntombstone or exhibit label/caption</a> in a\n<code class=\"language-javascript\"><div class=\"p5Label\"></div></code>\nadjacent to the canvas. You can style it as you wish in your CSS.</p>\n<p><code class=\"language-javascript\">describe(text, FALLBACK)</code> makes the\ndescription accessible to screen-reader users only, in\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility\" target=\"_blank\">\na sub DOM inside the canvas element</a>. If a second parameter is not\nspecified, by default, the description will only be available to\nscreen-reader users.</p>\n","itemtype":"method","name":"describe","params":[{"name":"text","description":"<p>description of the canvas</p>\n","type":"String"},{"name":"display","description":"<p>either LABEL or FALLBACK (Optional)</p>\n","type":"Constant","optional":true}],"example":["\n<div>\n<code>\ndescribe('pink square with red heart in the bottom right corner', LABEL);\nbackground('pink');\nfill('red');\nnoStroke();\nellipse(67, 67, 20, 20);\nellipse(83, 67, 20, 20);\ntriangle(91, 73, 75, 95, 59, 73);\n</code>\n</div>\n\n<div>\n<code>\nlet x = 0;\nfunction draw() {\n  if (x > 100) {\n    x = 0;\n  }\n  background(220);\n  fill(0, 255, 0);\n  ellipse(x, 50, 40, 40);\n  x = x + 0.1;\n  describe('green circle at x pos ' + round(x) + ' moving to the right');\n}\n</code>\n</div>\n"],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/accessibility/describe.js","line":115,"description":"<p>This function creates a screen-reader accessible\ndescription for elements —shapes or groups of shapes that create\nmeaning together— in the canvas. The first paramater should\nbe the name of the element. The second parameter should be a string\nwith a description of the element. The third parameter is optional.\nIf specified, it determines how the element description is displayed.</p>\n<p><code class=\"language-javascript\">describeElement(name, text, LABEL)</code>\ndisplays the element description to all users as a\n<a href=\"https://en.wikipedia.org/wiki/Museum_label\" target=\"_blank\">\ntombstone or exhibit label/caption</a> in a\n<code class=\"language-javascript\"><div class=\"p5Label\"></div></code>\nadjacent to the canvas. You can style it as you wish in your CSS.</p>\n<p><code class=\"language-javascript\">describeElement(name, text, FALLBACK)</code>\nmakes the element description accessible to screen-reader users\nonly, in <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility\" target=\"_blank\">\na sub DOM inside the canvas element</a>. If a second parameter is not\nspecified, by default, the element description will only be available\nto screen-reader users.</p>\n","itemtype":"method","name":"describeElement","params":[{"name":"name","description":"<p>name of the element</p>\n","type":"String"},{"name":"text","description":"<p>description of the element</p>\n","type":"String"},{"name":"display","description":"<p>either LABEL or FALLBACK (Optional)</p>\n","type":"Constant","optional":true}],"example":["\n<div>\n<code>\ndescribe('Heart and yellow circle over pink background', LABEL);\nnoStroke();\nbackground('pink');\ndescribeElement('Circle', 'Yellow circle in the top left corner', LABEL);\nfill('yellow');\nellipse(25, 25, 40, 40);\ndescribeElement('Heart', 'red heart in the bottom right corner', LABEL);\nfill('red');\nellipse(66.6, 66.6, 20, 20);\nellipse(83.2, 66.6, 20, 20);\ntriangle(91.2, 72.6, 75, 95, 58.6, 72.6);\n</code>\n</div>"],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/accessibility/outputs.js","line":10,"description":"<p><code class=\"language-javascript\">textOutput()</code> creates a screenreader\naccessible output that describes the shapes present on the canvas.\nThe general description of the canvas includes canvas size,\ncanvas color, and number of elements in the canvas\n(example: 'Your output is a, 400 by 400 pixels, lavender blue\ncanvas containing the following 4 shapes:'). This description\nis followed by a list of shapes where the color, position, and area\nof each shape are described (example: \"orange ellipse at top left\ncovering 1% of the canvas\"). Each element can be selected to get\nmore details. A table of elements is also provided. In this table,\nshape, color, location, coordinates and area are described\n(example: \"orange ellipse location=top left area=2\").</p>\n<p><code class=\"language-javascript\">textOutput()</code> and <code class=\"language-javascript\">texOutput(FALLBACK)</code>\nmake the output available in <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility\" target=\"_blank\">\na sub DOM inside the canvas element</a> which is accessible to screen readers.\n<code class=\"language-javascript\">textOutput(LABEL)</code> creates an\nadditional div with the output adjacent to the canvas, this is useful\nfor non-screen reader users that might want to display the output outside\nof the canvas' sub DOM as they code. However, using LABEL will create\nunnecessary redundancy for screen reader users. We recommend using LABEL\nonly as part of the development process of a sketch and removing it before\npublishing or sharing with screen reader users.</p>\n","itemtype":"method","name":"textOutput","params":[{"name":"display","description":"<p>either FALLBACK or LABEL (Optional)</p>\n","type":"Constant","optional":true}],"example":["\n<div>\n<code>\ntextOutput();\nbackground(148, 196, 0);\nfill(255, 0, 0);\nellipse(20, 20, 20, 20);\nfill(0, 0, 255);\nrect(50, 50, 50, 50);\n</code>\n</div>\n\n\n<div>\n<code>\nlet x = 0;\nfunction draw() {\n  textOutput();\n  background(148, 196, 0);\n  fill(255, 0, 0);\n  ellipse(x, 20, 20, 20);\n  fill(0, 0, 255);\n  rect(50, 50, 50, 50);\n  ellipse(20, 20, 20, 20);\n  x += 0.1;\n}\n</code>\n</div>\n"],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/accessibility/outputs.js","line":88,"description":"<p><code class=\"language-javascript\">gridOutput()</code> lays out the\ncontent of the canvas in the form of a grid (html table) based\non the spatial location of each shape. A brief\ndescription of the canvas is available before the table output.\nThis description includes: color of the background, size of the canvas,\nnumber of objects, and object types (example: \"lavender blue canvas is\n200 by 200 and contains 4 objects - 3 ellipses 1 rectangle\"). The grid\ndescribes the content spatially, each element is placed on a cell of the\ntable depending on its position. Within each cell an element the color\nand type of shape of that element are available (example: \"orange ellipse\").\nThese descriptions can be selected individually to get more details.\nA list of elements where shape, color, location, and area are described\n(example: \"orange ellipse location=top left area=1%\") is also available.</p>\n<p><code class=\"language-javascript\">gridOutput()</code> and <code class=\"language-javascript\">gridOutput(FALLBACK)</code>\nmake the output available in <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility\" target=\"_blank\">\na sub DOM inside the canvas element</a> which is accessible to screen readers.\n<code class=\"language-javascript\">gridOutput(LABEL)</code> creates an\nadditional div with the output adjacent to the canvas, this is useful\nfor non-screen reader users that might want to display the output outside\nof the canvas' sub DOM as they code. However, using LABEL will create\nunnecessary redundancy for screen reader users. We recommend using LABEL\nonly as part of the development process of a sketch and removing it before\npublishing or sharing with screen reader users.</p>\n","itemtype":"method","name":"gridOutput","params":[{"name":"display","description":"<p>either FALLBACK or LABEL (Optional)</p>\n","type":"Constant","optional":true}],"example":["\n<div>\n<code>\ngridOutput();\nbackground(148, 196, 0);\nfill(255, 0, 0);\nellipse(20, 20, 20, 20);\nfill(0, 0, 255);\nrect(50, 50, 50, 50);\n</code>\n</div>\n\n\n<div>\n<code>\nlet x = 0;\nfunction draw() {\n  gridOutput();\n  background(148, 196, 0);\n  fill(255, 0, 0);\n  ellipse(x, 20, 20, 20);\n  fill(0, 0, 255);\n  rect(50, 50, 50, 50);\n  ellipse(20, 20, 20, 20);\n  x += 0.1;\n}\n</code>\n</div>\n"],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/color/color_conversion.js","line":8,"description":"<p>Conversions adapted from <a href=\"http://www.easyrgb.com/en/math.php\">http://www.easyrgb.com/en/math.php</a>.</p>\n<p>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.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":19,"description":"<p>Convert an HSBA array to HSLA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":45,"description":"<p>Convert an HSBA array to RGBA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":100,"description":"<p>Convert an HSLA array to HSBA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":123,"description":"<p>Convert an HSLA array to RGBA.</p>\n<p>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.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":187,"description":"<p>Convert an RGBA array to HSBA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":226,"description":"<p>Convert an RGBA array to HSLA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/creating_reading.js","line":16,"description":"<p>Extracts the alpha value from a color or pixel array.</p>\n","itemtype":"method","name":"alpha","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the alpha value","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\nlet c = color(0, 126, 255, 102);\nfill(c);\nrect(15, 15, 35, 70);\nlet value = alpha(c); // Sets 'value' to 102\nfill(value);\nrect(50, 15, 35, 70);\n</code>\n</div>"],"alt":"Left half of canvas light blue and right half light charcoal grey.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":45,"description":"<p>Extracts the blue value from a color or pixel array.</p>\n","itemtype":"method","name":"blue","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the blue value","type":"Number"},"example":["\n<div>\n<code>\nlet c = color(175, 100, 220);\nfill(c);\nrect(15, 20, 35, 60); // Draw left rectangle\nlet blueValue = blue(c);\nfill(0, 0, blueValue);\nrect(50, 20, 35, 60); // Draw right rectangle\n</code>\n</div>"],"alt":"Left half of canvas light purple and right half a royal blue.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":72,"description":"<p>Extracts the HSB brightness value from a color or pixel array.</p>\n","itemtype":"method","name":"brightness","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the brightness value","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 255);\nlet c = color(0, 126, 255);\nfill(c);\nrect(15, 20, 35, 60);\nlet value = brightness(c); // Sets 'value' to 255\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>\n\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 255);\nlet c = color('hsb(60, 100%, 50%)');\nfill(c);\nrect(15, 20, 35, 60);\nlet value = brightness(c); // A 'value' of 50% is 127.5\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>"],"alt":"Left half of canvas salmon pink and the right half with it's brightness colored white.\nLeft half of canvas olive colored and the right half with it's brightness color gray.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":116,"description":"<p>Creates colors for storing in variables of the color datatype. The\nparameters are interpreted as RGB or HSB values depending on the\ncurrent <a href=\"#/p5/colorMode\">colorMode()</a>. The default mode is RGB values from 0 to 255\nand, therefore, the function call color(255, 204, 0) will return a\nbright yellow color.</p>\n<p>Note that if only one value is provided to <a href=\"#/p5/color\">color()</a>, it will be interpreted\nas a grayscale value. Add a second value, and it will be used for alpha\ntransparency. When three values are specified, they are interpreted as\neither RGB or HSB values. Adding a fourth value applies alpha\ntransparency.</p>\n<p>If a single string argument is provided, RGB, RGBA and Hex CSS color\nstrings and all named color strings are supported. In this case, an alpha\nnumber value as a second argument is not supported, the RGBA form should be\nused.</p>\n","itemtype":"method","name":"color","return":{"description":"resulting color","type":"p5.Color"},"example":["\n<div>\n<code>\nlet c = color(255, 204, 0);\nfill(c);\nnoStroke();\nrect(30, 20, 55, 55);\n</code>\n</div>\n\n<div>\n<code>\nlet c = color(255, 204, 0);\nfill(c);\nnoStroke();\nellipse(25, 25, 80, 80); // Draw left circle\n// Using only one value generates a grayscale value.\nc = color(65);\nfill(c);\nellipse(75, 75, 80, 80);\n</code>\n</div>\n\n<div>\n<code>\n// You can use named SVG & CSS colors\nlet c = color('magenta');\nfill(c);\nnoStroke();\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// Example of hex color codes\nnoStroke();\nlet c = color('#0f0');\nfill(c);\nrect(0, 10, 45, 80);\nc = color('#00ff00');\nfill(c);\nrect(55, 10, 45, 80);\n</code>\n</div>\n\n<div>\n<code>\n// RGB and RGBA color strings are also supported\n// these all set to the same color (solid blue)\nlet c;\nnoStroke();\nc = color('rgb(0,0,255)');\nfill(c);\nrect(10, 10, 35, 35); // Draw rectangle\nc = color('rgb(0%, 0%, 100%)');\nfill(c);\nrect(55, 10, 35, 35); // Draw rectangle\nc = color('rgba(0, 0, 255, 1)');\nfill(c);\nrect(10, 55, 35, 35); // Draw rectangle\nc = color('rgba(0%, 0%, 100%, 1)');\nfill(c);\nrect(55, 55, 35, 35); // Draw rectangle\n</code>\n</div>\n\n<div>\n<code>\n// HSL color can also be specified by value\nlet c = color('hsl(160, 100%, 50%)');\nnoStroke();\nfill(c);\nrect(0, 10, 45, 80); // Draw rectangle\nc = color('hsla(160, 100%, 50%, 0.5)');\nfill(c);\nrect(55, 10, 45, 80); // Draw rectangle\n</code>\n</div>\n\n<div>\n<code>\n// HSB color can also be specified\nlet c = color('hsb(160, 100%, 50%)');\nnoStroke();\nfill(c);\nrect(0, 10, 45, 80); // Draw rectangle\nc = color('hsba(160, 100%, 50%, 0.5)');\nfill(c);\nrect(55, 10, 45, 80); // Draw rectangle\n</code>\n</div>\n\n<div>\n<code>\nnoStroke();\nlet c = color(50, 55, 100);\nfill(c);\nrect(0, 10, 45, 80); // Draw left rect\ncolorMode(HSB, 100);\nc = color(50, 55, 100);\nfill(c);\nrect(55, 10, 45, 80);\n</code>\n</div>"],"alt":"Yellow rect in middle right of canvas, with 55 pixel width and height.\nYellow ellipse in top left of canvas, black ellipse in bottom right,both 80x80.\nBright fuchsia rect in middle of canvas, 60 pixel width and height.\nTwo bright green rects on opposite sides of the canvas, both 45x80.\nFour blue rects in each corner of the canvas, each are 35x35.\nBright sea green rect on left and darker rect on right of canvas, both 45x80.\nDark green rect on left and lighter green rect on right of canvas, both 45x80.\nDark blue rect on left and light teal rect on right of canvas, both 45x80.","class":"p5","module":"Color","submodule":"Creating & Reading","overloads":[{"line":116,"params":[{"name":"gray","description":"<p>number specifying value between white and black.</p>\n","type":"Number"},{"name":"alpha","description":"<p>alpha value relative to current color range\n                                (default is 0-255)</p>\n","type":"Number","optional":true}],"return":{"description":"resulting color","type":"p5.Color"}},{"line":257,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"return":{"description":"","type":"p5.Color"}},{"line":269,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"return":{"description":"","type":"p5.Color"}},{"line":275,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"return":{"description":"","type":"p5.Color"}},{"line":282,"params":[{"name":"color","description":"","type":"p5.Color"}],"return":{"description":"","type":"p5.Color"}}]},{"file":"src/color/creating_reading.js","line":297,"description":"<p>Extracts the green value from a color or pixel array.</p>\n","itemtype":"method","name":"green","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the green value","type":"Number"},"example":["\n<div>\n<code>\nlet c = color(20, 75, 200); // Define color 'c'\nfill(c); // Use color variable 'c' as fill color\nrect(15, 20, 35, 60); // Draw left rectangle\n\nlet greenValue = green(c); // Get green in 'c'\nprint(greenValue); // Print \"75.0\"\nfill(0, greenValue, 0); // Use 'greenValue' in new fill\nrect(50, 20, 35, 60); // Draw right rectangle\n</code>\n</div>"],"alt":"blue rect on left and green on right, both with black outlines & 35x60.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":326,"description":"<p>Extracts the hue value from a color or pixel array.</p>\n<p>Hue exists in both HSB and HSL. This function will return the\nHSB-normalized hue when supplied with an HSB color object (or when supplied\nwith a pixel array while the color mode is HSB), but will default to the\nHSL-normalized hue otherwise. (The values will only be different if the\nmaximum hue setting for each system is different.)</p>\n","itemtype":"method","name":"hue","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the hue","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 255);\nlet c = color(0, 126, 255);\nfill(c);\nrect(15, 20, 35, 60);\nlet value = hue(c); // Sets 'value' to \"0\"\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>"],"alt":"salmon pink rect on left and black on right, both 35x60.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":361,"description":"<p>Blends two colors to find a third color somewhere between them. The amt\nparameter is the amount to interpolate between the two values where 0.0\nequal to the first color, 0.1 is very near the first color, 0.5 is halfway\nin between, etc. An amount below 0 will be treated as 0. Likewise, amounts\nabove 1 will be capped at 1. This is different from the behavior of <a href=\"#/p5/lerp\">lerp()</a>,\nbut necessary because otherwise numbers outside the range will produce\nstrange and unexpected colors.</p>\n<p>The way that colors are interpolated depends on the current color mode.</p>\n","itemtype":"method","name":"lerpColor","params":[{"name":"c1","description":"<p>interpolate from this color</p>\n","type":"p5.Color"},{"name":"c2","description":"<p>interpolate to this color</p>\n","type":"p5.Color"},{"name":"amt","description":"<p>number between 0 and 1</p>\n","type":"Number"}],"return":{"description":"interpolated color","type":"p5.Color"},"example":["\n<div>\n<code>\ncolorMode(RGB);\nstroke(255);\nbackground(51);\nlet from = color(218, 165, 32);\nlet to = color(72, 61, 139);\ncolorMode(RGB); // Try changing to HSB.\nlet interA = lerpColor(from, to, 0.33);\nlet interB = lerpColor(from, to, 0.66);\nfill(from);\nrect(10, 20, 20, 60);\nfill(interA);\nrect(30, 20, 20, 60);\nfill(interB);\nrect(50, 20, 20, 60);\nfill(to);\nrect(70, 20, 20, 60);\n</code>\n</div>"],"alt":"4 rects one tan, brown, brownish purple, purple, with white outlines & 20x60","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":452,"description":"<p>Extracts the HSL lightness value from a color or pixel array.</p>\n","itemtype":"method","name":"lightness","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the lightness","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(HSL);\nlet c = color(156, 100, 50, 1);\nfill(c);\nrect(15, 20, 35, 60);\nlet value = lightness(c); // Sets 'value' to 50\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>"],"alt":"light pastel green rect on left and dark grey rect on right, both 35x60.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":482,"description":"<p>Extracts the red value from a color or pixel array.</p>\n","itemtype":"method","name":"red","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the red value","type":"Number"},"example":["\n<div>\n<code>\nlet c = color(255, 204, 0); // Define color 'c'\nfill(c); // Use color variable 'c' as fill color\nrect(15, 20, 35, 60); // Draw left rectangle\n\nlet redValue = red(c); // Get red in 'c'\nprint(redValue); // Print \"255.0\"\nfill(redValue, 0, 0); // Use 'redValue' in new fill\nrect(50, 20, 35, 60); // Draw right rectangle\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\ncolorMode(RGB, 255); // Sets the range for red, green, and blue to 255\nlet c = color(127, 255, 0);\ncolorMode(RGB, 1); // Sets the range for red, green, and blue to 1\nlet myColor = red(c);\nprint(myColor); // 0.4980392156862745\n</code>\n</div>"],"alt":"yellow rect on left and red rect on right, both with black outlines and 35x60.\ngrey canvas","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":522,"description":"<p>Extracts the saturation value from a color or pixel array.</p>\n<p>Saturation is scaled differently in HSB and HSL. This function will return\nthe HSB saturation when supplied with an HSB color object (or when supplied\nwith a pixel array while the color mode is HSB), but will default to the\nHSL saturation otherwise.</p>\n","itemtype":"method","name":"saturation","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the saturation value","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 255);\nlet c = color(0, 126, 255);\nfill(c);\nrect(15, 20, 35, 60);\nlet value = saturation(c); // Sets 'value' to 126\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>"],"alt":"deep pink rect on left and grey rect on right, both 35x60.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":51,"description":"<p>This function returns the color formatted as a string. This can be useful\nfor debugging, or for using p5.js with other libraries.</p>\n","itemtype":"method","name":"toString","params":[{"name":"format","description":"<p>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.</p>\n","type":"String","optional":true}],"return":{"description":"the formatted string","type":"String"},"example":["\n<div>\n<code>\ncreateCanvas(200, 100);\nlet myColor;\nstroke(255);\nmyColor = color(100, 100, 250);\nfill(myColor);\nrotate(HALF_PI);\ntext(myColor.toString(), 0, -5);\ntext(myColor.toString('#rrggbb'), 0, -30);\ntext(myColor.toString('rgba%'), 0, -55);\n</code>\n</div>\n\n<div>\n<code>\nlet myColor = color(100, 130, 250);\ntext(myColor.toString('#rrggbb'), 25, 25);\n</code>\n</div>"],"alt":"A canvas with 3 text representation of their color.","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":256,"description":"<p>The setRed function sets the red component of a color.\nThe range depends on your color mode, in the default RGB mode it's between 0 and 255.</p>\n","itemtype":"method","name":"setRed","params":[{"name":"red","description":"<p>the new red value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet backgroundColor;\n\nfunction setup() {\n  backgroundColor = color(100, 50, 150);\n}\n\nfunction draw() {\n  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));\n  background(backgroundColor);\n}\n</code>\n</div>"],"alt":"canvas with gradually changing background color","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":285,"description":"<p>The setGreen function sets the green component of a color.\nThe range depends on your color mode, in the default RGB mode it's between 0 and 255.</p>\n","itemtype":"method","name":"setGreen","params":[{"name":"green","description":"<p>the new green value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet backgroundColor = color(100, 50, 150);\nfunction draw() {\n  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));\n  background(backgroundColor);\n}\n</code>\n</div>"],"alt":"canvas with gradually changing background color","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":309,"description":"<p>The setBlue function sets the blue component of a color.\nThe range depends on your color mode, in the default RGB mode it's between 0 and 255.</p>\n","itemtype":"method","name":"setBlue","params":[{"name":"blue","description":"<p>the new blue value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet backgroundColor = color(100, 50, 150);\nfunction draw() {\n  backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));\n  background(backgroundColor);\n}\n</code>\n</div>"],"alt":"canvas with gradually changing background color","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":333,"description":"<p>The setAlpha function sets the transparency (alpha) value of a color.\nThe range depends on your color mode, in the default RGB mode it's between 0 and 255.</p>\n","itemtype":"method","name":"setAlpha","params":[{"name":"alpha","description":"<p>the new alpha value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nfunction draw() {\n  clear();\n  background(200);\n  squareColor = color(100, 50, 100);\n  squareColor.setAlpha(128 + 128 * sin(millis() / 1000));\n  fill(squareColor);\n  rect(13, 13, width - 26, height - 26);\n}\n</code>\n</div>"],"alt":"a square with gradually changing opacity on a gray background","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":404,"description":"<p>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.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":435,"description":"<p>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.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":454,"description":"<p>CSS named colors.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":608,"description":"<p>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.</p>\n<p>Note that RGB values of .9 are not parsed by IE, but are supported here for\ncolor string consistency.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":621,"description":"<p>Full color string patterns. The capture groups are necessary.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":969,"description":"<p>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.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/setting.js","line":13,"description":"<p>The <a href=\"#/p5/background\">background()</a> function sets the color used\nfor the background of the p5.js canvas. The default background is transparent.\nThis function is typically used within <a href=\"#/p5/draw\">draw()</a> to clear\nthe display window at the beginning of each frame, but it can be used inside\n<a href=\"#/p5/setup\">setup()</a> to set the background on the first frame of\nanimation or if the background need only be set once.</p>\n<p>The color is either specified in terms of the RGB, HSB, or HSL color depending\non the current <a href=\"#/p5/colorMode\">colorMode</a>. (The default color space\nis RGB, with each value in the range from 0 to 255). The alpha range by default\nis also 0 to 255.<br><br></p>\n<p>If a single string argument is provided, RGB, RGBA and Hex CSS color strings\nand all named color strings are supported. In this case, an alpha number\nvalue as a second argument is not supported, the RGBA form should be used.</p>\n<p>A <a href=\"#/p5.Color\">p5.Color</a> object can also be provided to set the background color.</p>\n<p>A <a href=\"#/p5.Image\">p5.Image</a> can also be provided to set the background image.</p>\n","itemtype":"method","name":"background","chainable":1,"example":["\n<div>\n<code>\n// Grayscale integer value\nbackground(51);\n</code>\n</div>\n\n<div>\n<code>\n// R, G & B integer values\nbackground(255, 204, 0);\n</code>\n</div>\n\n<div>\n<code>\n// H, S & B integer values\ncolorMode(HSB);\nbackground(255, 204, 100);\n</code>\n</div>\n\n<div>\n<code>\n// Named SVG/CSS color string\nbackground('red');\n</code>\n</div>\n\n<div>\n<code>\n// three-digit hexadecimal RGB notation\nbackground('#fae');\n</code>\n</div>\n\n<div>\n<code>\n// six-digit hexadecimal RGB notation\nbackground('#222222');\n</code>\n</div>\n\n<div>\n<code>\n// integer RGB notation\nbackground('rgb(0,255,0)');\n</code>\n</div>\n\n<div>\n<code>\n// integer RGBA notation\nbackground('rgba(0,255,0, 0.25)');\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGB notation\nbackground('rgb(100%,0%,10%)');\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGBA notation\nbackground('rgba(100%,0%,100%,0.5)');\n</code>\n</div>\n\n<div>\n<code>\n// p5 Color object\nbackground(color(0, 0, 255));\n</code>\n</div>"],"alt":"canvas with darkest charcoal grey background.\ncanvas with yellow background.\ncanvas with royal blue background.\ncanvas with red background.\ncanvas with pink background.\ncanvas with black background.\ncanvas with bright green background.\ncanvas with soft green background.\ncanvas with red background.\ncanvas with light purple background.\ncanvas with blue background.","class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":13,"params":[{"name":"color","description":"<p>any value created by the <a href=\"#/p5/color\">color()</a> function</p>\n","type":"p5.Color"}],"chainable":1},{"line":131,"params":[{"name":"colorstring","description":"<p>color string, possible formats include: integer\n                        rgb() or rgba(), percentage rgb() or rgba(),\n                        3-digit hex, 6-digit hex</p>\n","type":"String"},{"name":"a","description":"<p>opacity of the background relative to current\n                            color range (default is 0-255)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":141,"params":[{"name":"gray","description":"<p>specifies a value between white and black</p>\n","type":"Number"},{"name":"a","description":"","type":"Number","optional":true}],"chainable":1},{"line":148,"params":[{"name":"v1","description":"<p>red or hue value (depending on the current color\n                       mode)</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value (depending on the current\n                       color mode)</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value (depending on the current\n                       color mode)</p>\n","type":"Number"},{"name":"a","description":"","type":"Number","optional":true}],"chainable":1},{"line":160,"params":[{"name":"values","description":"<p>an array containing the red, green, blue\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":167,"params":[{"name":"image","description":"<p>image created with <a href=\"#/p5/loadImage\">loadImage()</a> or <a href=\"#/p5/createImage\">createImage()</a>,\n                            to set as background\n                            (must be same size as the sketch window)</p>\n","type":"p5.Image"},{"name":"a","description":"","type":"Number","optional":true}],"chainable":1}]},{"file":"src/color/setting.js","line":180,"description":"<p>Clears the pixels within a buffer. This function only clears the canvas.\nIt will not clear objects created by createX() methods such as\n<a href=\"#/p5/createVideo\">createVideo()</a> or <a href=\"#/p5/createDiv\">createDiv()</a>.\nUnlike the main graphics context, pixels in additional graphics areas created\nwith <a href=\"#/p5/createGraphics\">createGraphics()</a> can be entirely\nor partially transparent. This function clears everything to make all of\nthe pixels 100% transparent.</p>\n","itemtype":"method","name":"clear","chainable":1,"example":["\n<div>\n<code>\n// Clear the screen on mouse press.\nfunction draw() {\n  ellipse(mouseX, mouseY, 20, 20);\n}\nfunction mousePressed() {\n  clear();\n  background(128);\n}\n</code>\n</div>"],"alt":"small white ellipses are continually drawn at mouse's x and y coordinates.","class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":214,"description":"<p><a href=\"#/p5/colorMode\">colorMode()</a> changes the way p5.js interprets\ncolor data. By default, the parameters for <a href=\"#/p5/fill\">fill()</a>,\n<a href=\"#/p5/stroke\">stroke()</a>, <a href=\"#/p5/background\">background()</a>,\nand <a href=\"#/p5/color\">color()</a> are defined by values between 0 and 255\nusing the RGB color model. This is equivalent to setting colorMode(RGB, 255).\nSetting colorMode(HSB) lets you use the HSB system instead. By default, this\nis colorMode(HSB, 360, 100, 100, 1). You can also use HSL.</p>\n<p>Note: existing color objects remember the mode that they were created in,\nso you can change modes as you like without affecting their appearance.</p>\n","itemtype":"method","name":"colorMode","chainable":1,"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(RGB, 100);\nfor (let i = 0; i < 100; i++) {\n  for (let j = 0; j < 100; j++) {\n    stroke(i, j, 0);\n    point(i, j);\n  }\n}\n</code>\n</div>\n\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 100);\nfor (let i = 0; i < 100; i++) {\n  for (let j = 0; j < 100; j++) {\n    stroke(i, j, 100);\n    point(i, j);\n  }\n}\n</code>\n</div>\n\n<div>\n<code>\ncolorMode(RGB, 255);\nlet c = color(127, 255, 0);\ncolorMode(RGB, 1);\nlet myColor = c._getRed();\ntext(myColor, 10, 10, 80, 80);\n</code>\n</div>\n\n<div>\n<code>\nnoFill();\ncolorMode(RGB, 255, 255, 255, 1);\nbackground(255);\nstrokeWeight(4);\nstroke(255, 0, 10, 0.3);\nellipse(40, 40, 50, 50);\nellipse(50, 50, 40, 40);\n</code>\n</div>"],"alt":"Green to red gradient from bottom L to top R. shading originates from top left.\nRainbow gradient from left to right. Brightness increasing to white at top.\nunknown image.\n50x50 ellipse at middle L & 40x40 ellipse at center. Translucent pink outlines.","class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":214,"params":[{"name":"mode","description":"<p>either RGB, HSB or HSL, corresponding to\n                         Red/Green/Blue and Hue/Saturation/Brightness\n                         (or Lightness)</p>\n","type":"Constant"},{"name":"max","description":"<p>range for all values</p>\n","type":"Number","optional":true}],"chainable":1},{"line":289,"params":[{"name":"mode","description":"","type":"Constant"},{"name":"max1","description":"<p>range for the red or hue depending on the\n                             current color mode</p>\n","type":"Number"},{"name":"max2","description":"<p>range for the green or saturation depending\n                             on the current color mode</p>\n","type":"Number"},{"name":"max3","description":"<p>range for the blue or brightness/lightness\n                             depending on the current color mode</p>\n","type":"Number"},{"name":"maxA","description":"<p>range for the alpha</p>\n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/color/setting.js","line":333,"description":"<p>Sets the color used to fill shapes. For example, if you run fill(204, 102, 0),\nall shapes drawn after the fill command will be filled with the color orange.\nThis color is either specified in terms of the RGB or HSB color depending on\nthe current <a href=\"#/p5/colorMode\">colorMode()</a>. (The default color space\nis RGB, with each value in the range from 0 to 255). The alpha range by default\nis also 0 to 255.</p>\n<p>If a single string argument is provided, RGB, RGBA and Hex CSS color strings\nand all named color strings are supported. In this case, an alpha number\nvalue as a second argument is not supported, the RGBA form should be used.</p>\n<p>A p5 <a href=\"#/p5.Color\">Color</a> object can also be provided to set the fill color.</p>\n","itemtype":"method","name":"fill","chainable":1,"example":["\n<div>\n<code>\n// Grayscale integer value\nfill(51);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// R, G & B integer values\nfill(255, 204, 0);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// H, S & B integer values\ncolorMode(HSB);\nfill(255, 204, 100);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// Named SVG/CSS color string\nfill('red');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// three-digit hexadecimal RGB notation\nfill('#fae');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// six-digit hexadecimal RGB notation\nfill('#222222');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// integer RGB notation\nfill('rgb(0,255,0)');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// integer RGBA notation\nfill('rgba(0,255,0, 0.25)');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGB notation\nfill('rgb(100%,0%,10%)');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGBA notation\nfill('rgba(100%,0%,100%,0.5)');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// p5 Color object\nfill(color(0, 0, 255));\nrect(20, 20, 60, 60);\n</code>\n</div>"],"alt":"60x60 dark charcoal grey rect with black outline in center of canvas.\n60x60 yellow rect with black outline in center of canvas.\n60x60 royal blue rect with black outline in center of canvas.\n60x60 red rect with black outline in center of canvas.\n60x60 pink rect with black outline in center of canvas.\n60x60 black rect with black outline in center of canvas.\n60x60 light green rect with black outline in center of canvas.\n60x60 soft green rect with black outline in center of canvas.\n60x60 red rect with black outline in center of canvas.\n60x60 dark fuchsia rect with black outline in center of canvas.\n60x60 blue rect with black outline in center of canvas.","class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":333,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":460,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"chainable":1},{"line":466,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":473,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":480,"params":[{"name":"color","description":"<p>the fill color</p>\n","type":"p5.Color"}],"chainable":1}]},{"file":"src/color/setting.js","line":492,"description":"<p>Disables filling geometry. If both <a href=\"#/p5/noStroke\">noStroke()</a> and <a href=\"#/p5/noFill\">noFill()</a> are called,\nnothing will be drawn to the screen.</p>\n","itemtype":"method","name":"noFill","chainable":1,"example":["\n<div>\n<code>\nrect(15, 10, 55, 55);\nnoFill();\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  noFill();\n  stroke(100, 100, 240);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  box(45, 45, 45);\n}\n</code>\n</div>"],"alt":"white rect top middle and noFill rect center. Both 60x60 with black outlines.\nblack canvas with purple cube wireframe spinning","class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":533,"description":"<p>Disables drawing the stroke (outline). If both <a href=\"#/p5/noStroke\">noStroke()</a> and <a href=\"#/p5/noFill\">noFill()</a>\nare called, nothing will be drawn to the screen.</p>\n","itemtype":"method","name":"noStroke","chainable":1,"example":["\n<div>\n<code>\nnoStroke();\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  noStroke();\n  fill(240, 150, 150);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  box(45, 45, 45);\n}\n</code>\n</div>"],"alt":"60x60 white rect at center. no outline.\nblack canvas with pink cube spinning","class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":573,"description":"<p>Sets the color used to draw lines and borders around shapes. This color\nis either specified in terms of the RGB or HSB color depending on the\ncurrent <a href=\"#/p5/colorMode\">colorMode()</a> (the default color space\nis RGB, with each value in the range from 0 to 255). The alpha range by\ndefault is also 0 to 255.</p>\n<p>If a single string argument is provided, RGB, RGBA and Hex CSS color\nstrings and all named color strings are supported. In this case, an alpha\nnumber value as a second argument is not supported, the RGBA form should be\nused.</p>\n<p>A p5 <a href=\"#/p5.Color\">Color</a> object can also be provided to set the stroke color.</p>\n","itemtype":"method","name":"stroke","chainable":1,"example":["\n<div>\n<code>\n// Grayscale integer value\nstrokeWeight(4);\nstroke(51);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// R, G & B integer values\nstroke(255, 204, 0);\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// H, S & B integer values\ncolorMode(HSB);\nstrokeWeight(4);\nstroke(255, 204, 100);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// Named SVG/CSS color string\nstroke('red');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// three-digit hexadecimal RGB notation\nstroke('#fae');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// six-digit hexadecimal RGB notation\nstroke('#222222');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// integer RGB notation\nstroke('rgb(0,255,0)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// integer RGBA notation\nstroke('rgba(0,255,0,0.25)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGB notation\nstroke('rgb(100%,0%,10%)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGBA notation\nstroke('rgba(100%,0%,100%,0.5)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// p5 Color object\nstroke(color(0, 0, 255));\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>"],"alt":"60x60 white rect at center. Dark charcoal grey outline.\n60x60 white rect at center. Yellow outline.\n60x60 white rect at center. Royal blue outline.\n60x60 white rect at center. Red outline.\n60x60 white rect at center. Pink outline.\n60x60 white rect at center. Black outline.\n60x60 white rect at center. Bright green outline.\n60x60 white rect at center. Soft green outline.\n60x60 white rect at center. Red outline.\n60x60 white rect at center. Dark fuchsia outline.\n60x60 white rect at center. Blue outline.","class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":573,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":712,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"chainable":1},{"line":718,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":725,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":732,"params":[{"name":"color","description":"<p>the stroke color</p>\n","type":"p5.Color"}],"chainable":1}]},{"file":"src/color/setting.js","line":745,"description":"<p>All drawing that follows <a href=\"#/p5/erase\">erase()</a> will subtract from\nthe canvas.Erased areas will reveal the web page underneath the canvas.Erasing\ncan be canceled with <a href=\"#/p5/noErase\">noErase()</a>.</p>\n<p>Drawing done with <a href=\"#/p5/image\">image()</a> and <a href=\"#/p5/background\">\nbackground()</a> in between <a href=\"#/p5/erase\">erase()</a> and\n<a href=\"#/p5/noErase\">noErase()</a> will not erase the canvas but works as usual.</p>\n","itemtype":"method","name":"erase","params":[{"name":"strengthFill","description":"<p>A number (0-255) for the strength of erasing for a shape's fill.\n                                       This will default to 255 when no argument is given, which\n                                       is full strength.</p>\n","type":"Number","optional":true},{"name":"strengthStroke","description":"<p>A number (0-255) for the strength of erasing for a shape's stroke.\n                                       This will default to 255 when no argument is given, which\n                                       is full strength.</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nbackground(100, 100, 250);\nfill(250, 100, 100);\nrect(20, 20, 60, 60);\nerase();\nellipse(25, 30, 30);\nnoErase();\n</code>\n</div>\n\n<div>\n<code>\nbackground(150, 250, 150);\nfill(100, 100, 250);\nrect(20, 20, 60, 60);\nstrokeWeight(5);\nerase(150, 255);\ntriangle(50, 10, 70, 50, 90, 10);\nnoErase();\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  smooth();\n  createCanvas(100, 100, WEBGL);\n  // Make a &lt;p&gt; element and put it behind the canvas\n  let p = createP('I am a dom element');\n  p.center();\n  p.style('font-size', '20px');\n  p.style('text-align', 'center');\n  p.style('z-index', '-9999');\n}\n\nfunction draw() {\n  background(250, 250, 150);\n  fill(15, 195, 185);\n  noStroke();\n  sphere(30);\n  erase();\n  rotateY(frameCount * 0.02);\n  translate(0, 0, 40);\n  torus(15, 5);\n  noErase();\n}\n</code>\n</div>"],"alt":"60x60 centered pink rect, purple background. Elliptical area in top-left of rect is erased white.\n60x60 centered purple rect, mint green background. Triangle in top-right is partially erased with fully erased outline.\n60x60 centered teal sphere, yellow background. Torus rotating around sphere erases to reveal black text underneath.","class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":825,"description":"<p>Ends erasing that was started with <a href=\"#/p5/erase\">erase()</a>.\nThe <a href=\"#/p5/fill\">fill()</a>, <a href=\"#/p5/stroke\">stroke()</a>, and\n<a href=\"#/p5/blendMode\">blendMode()</a> settings will return to what they were\nprior to calling <a href=\"#/p5/erase\">erase()</a>.</p>\n","itemtype":"method","name":"noErase","chainable":1,"example":["\n<div>\n<code>\nbackground(235, 145, 15);\nnoStroke();\nfill(30, 45, 220);\nrect(30, 10, 10, 80);\nerase();\nellipse(50, 50, 60);\nnoErase();\nrect(70, 10, 10, 80);\n</code>\n</div>"],"alt":"Orange background, with two tall blue rectangles. A centered ellipse erased the first blue rect but not the second.","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). Here is a\nbrief outline of the functions called in this system.\n\nThe FES may be invoked by a call to either (1) _validateParameters","(2) _friendlyFileLoadError","(3) _friendlyError","(4) helpForMisusedAtTopLevelCode","or (5) _fesErrorMontitor.\n\n_validateParameters is located in validate_params.js along with other code used\nfor parameter validation.\n_friendlyFileLoadError is located in file_errors.js along with other code used for\ndealing with file load errors.\nApart from this","there's also a file stacktrace.js","which contains the code to parse\nthe error stack","borrowed from https://github.com/stacktracejs/stacktrace.js\n\nThis file contains the core as well as miscellaneous functionality of the FES.\n\nhelpForMisusedAtTopLevelCode is called by this file on window load to check for use\nof p5.js functions outside of setup() or draw()\nItems 1-3 above are called by functions in the p5 library located in other files.\n\n_fesErrorMonitor can be called either by an error event","an unhandled rejection event\nor it can be manually called in a catch block as follows:\ntry { someCode(); } catch(err) { p5._fesErrorMonitor(err); }\nfesErrorMonitor is responsible for handling all kinds of errors that the browser may show.\nIt gives a simplified explanation for these. It currently works with some kinds of\nReferenceError","SyntaxError","and TypeError. The complete list of supported errors can be\nfound in browser_errors.js.\n\n_friendlyFileLoadError is called by the loadX() methods.\n_friendlyError can be called by any function to offer a helpful error message.\n\n_validateParameters is called by functions in the p5.js API to help users ensure\nther are calling p5 function with the right parameter types. The property\ndisableFriendlyErrors = false can be set from a p5.js sketch to turn off parameter\nchecking. The call sequence from _validateParameters looks something like this:\n\n_validateParameters\n  buildArgTypeCache\n    addType\n  lookupParamDoc\n  scoreOverload\n    testParamTypes\n    testParamType\n  getOverloadErrors\n  _friendlyParamError\n    ValidationError\n    report\n      friendlyWelcome\n\nThe call sequences to _friendlyFileLoadError and _friendlyError are like this:\n_friendlyFileLoadError\n  report\n\n_friendlyError\n  report\n\nThe call sequence for _fesErrorMonitor roughly looks something like:\n_fesErrorMonitor\n  processStack\n    printFriendlyError\n  (if type of error is ReferenceError)\n    _handleMisspelling\n      computeEditDistance\n      report\n    report\n    printFriendlyStack\n  (if type of error is SyntaxError","TypeError","etc)\n    report\n    printFriendlyStack\n\nreport() is the main function that prints directly to console with the output\nof the error helper message. Note: friendlyWelcome() also prints to console directly."],"class":"p5","module":"Color"},{"file":"src/core/friendly_errors/fes_core.js","line":819,"description":"<p>Prints out all the colors in the color pallete with white text.\nFor color blindness testing.</p>\n","class":"p5","module":"Color"},{"file":"src/core/friendly_errors/file_errors.js","line":1,"requires":["core\n\nThis file contains the part of the FES responsible for dealing with\nfile load errors"],"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\n\nThis file contains the part of the FES responsible for validating function\nparameters"],"class":"p5","module":"Color"},{"file":"src/core/friendly_errors/validate_params.js","line":626,"description":"<p>Validates parameters\nparam  {String}               func    the name of the function\nparam  {Array}                args    user input arguments</p>\n<p>example:\n const a;\n ellipse(10,10,a,5);\nconsole ouput:\n \"It looks like ellipse received an empty variable in spot #2.\"</p>\n<p>example:\n ellipse(10,\"foo\",5,5);\nconsole output:\n \"ellipse was expecting a number for parameter #1,\n          received \"foo\" instead.\"</p>\n","class":"p5","module":"Color"},{"file":"src/core/shape/2d_primitives.js","line":16,"description":"<p>This function does 3 things:</p>\n<ol>\n<li><p>Bounds the desired start/stop angles for an arc (in radians) so that:</p>\n<pre><code>0 <= start < TWO_PI ;    start <= stop < start + TWO_PI</code></pre><p>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.</p>\n</li>\n<li><p>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.</p>\n</li>\n<li><p>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).</p>\n</li>\n</ol>\n","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":102,"description":"<p>Draw an arc to the screen. If called with only x, y, w, h, start and stop,\nthe arc will be drawn and filled as an open pie segment. If a mode parameter\nis provided, the arc will be filled like an open semi-circle (OPEN), a closed\nsemi-circle (CHORD), or as a closed pie segment (PIE). The origin may be changed\nwith the <a href=\"#/p5/ellipseMode\">ellipseMode()</a> function.</p>\n<p>The arc is always drawn clockwise from wherever start falls to wherever stop\nfalls on the ellipse.Adding or subtracting TWO_PI to either angle does not\nchange where they fall. If both start and stop fall at the same place, a full\nellipse will be drawn. Be aware that the y-axis increases in the downward\ndirection, therefore angles are measured clockwise from the positive\nx-direction (\"3 o'clock\").</p>\n","itemtype":"method","name":"arc","params":[{"name":"x","description":"<p>x-coordinate of the arc's ellipse</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the arc's ellipse</p>\n","type":"Number"},{"name":"w","description":"<p>width of the arc's ellipse by default</p>\n","type":"Number"},{"name":"h","description":"<p>height of the arc's ellipse by default</p>\n","type":"Number"},{"name":"start","description":"<p>angle to start the arc, specified in radians</p>\n","type":"Number"},{"name":"stop","description":"<p>angle to stop the arc, specified in radians</p>\n","type":"Number"},{"name":"mode","description":"<p>optional parameter to determine the way of drawing\n                        the arc. either CHORD, PIE or OPEN</p>\n","type":"Constant","optional":true},{"name":"detail","description":"<p>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.</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\narc(50, 55, 50, 50, 0, HALF_PI);\nnoFill();\narc(50, 55, 60, 60, HALF_PI, PI);\narc(50, 55, 70, 70, PI, PI + QUARTER_PI);\narc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);\n</code>\n</div>\n\n<div>\n<code>\narc(50, 50, 80, 80, 0, PI + QUARTER_PI);\n</code>\n</div>\n\n<div>\n<code>\narc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);\n</code>\n</div>\n\n<div>\n<code>\narc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);\n</code>\n</div>\n\n<div>\n<code>\narc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);\n</code>\n</div>"],"alt":"shattered outline of an ellipse with a quarter of a white circle bottom-right.\nwhite ellipse with top right quarter missing.\nwhite ellipse with black outline with top right missing.\nwhite ellipse with top right missing with black outline around shape.\nwhite ellipse with top right quarter missing with black outline around the shape.","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":232,"description":"<p>Draws an ellipse (oval) to the screen. By default, the first two parameters\nset the location of the center of the ellipse, and the third and fourth\nparameters set the shape's width and height. If no height is specified, the\nvalue of width is used for both the width and height. If a negative height or\nwidth is specified, the absolute value is taken.</p>\n<p>An ellipse with equal width and height is a circle. The origin may be changed\nwith the <a href=\"#/p5/ellipseMode\">ellipseMode()</a> function.</p>\n","itemtype":"method","name":"ellipse","chainable":1,"example":["\n<div>\n<code>\nellipse(56, 46, 55, 55);\n</code>\n</div>"],"alt":"white ellipse with black outline in middle-right of canvas that is 55x55","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":232,"params":[{"name":"x","description":"<p>x-coordinate of the center of ellipse.</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the center of ellipse.</p>\n","type":"Number"},{"name":"w","description":"<p>width of the ellipse.</p>\n","type":"Number"},{"name":"h","description":"<p>height of the ellipse.</p>\n","type":"Number","optional":true}],"chainable":1},{"line":259,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"w","description":"","type":"Number"},{"name":"h","description":"","type":"Number"},{"name":"detail","description":"<p>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.</p>\n","type":"Integer","optional":true}]}]},{"file":"src/core/shape/2d_primitives.js","line":275,"description":"<p>Draws a circle to the screen. A circle is a simple closed shape. It is the set\nof all points in a plane that are at a given distance from a given point,\nthe centre. This function is a special case of the ellipse() function, where\nthe width and height of the ellipse are the same. Height and width of the\nellipse correspond to the diameter of the circle. By default, the first two\nparameters set the location of the centre of the circle, the third sets the\ndiameter of the circle.</p>\n","itemtype":"method","name":"circle","params":[{"name":"x","description":"<p>x-coordinate of the centre of the circle.</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the centre of the circle.</p>\n","type":"Number"},{"name":"d","description":"<p>diameter of the circle.</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\n// Draw a circle at location (30, 30) with a diameter of 20.\ncircle(30, 30, 20);\n</code>\n</div>"],"alt":"white circle with black outline in mid of canvas that is 55x55.","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":339,"description":"<p>Draws a line (a direct path between two points) to the screen. If called with\nonly 4 parameters, it will draw a line in 2D with a default width of 1 pixel.\nThis width can be modified by using the <a href=\"#/p5/strokeWeight\">\nstrokeWeight()</a> function. A line cannot be filled, therefore the <a\nhref=\"#/p5/fill\">fill()</a> function will not affect the color of a line. So to\ncolor a line, use the <a href=\"#/p5/stroke\">stroke()</a> function.</p>\n","itemtype":"method","name":"line","chainable":1,"example":["\n<div>\n<code>\nline(30, 20, 85, 75);\n</code>\n</div>\n\n<div>\n<code>\nline(30, 20, 85, 20);\nstroke(126);\nline(85, 20, 85, 75);\nstroke(255);\nline(85, 75, 30, 75);\n</code>\n</div>"],"alt":"An example showing a line 78 pixels long running from mid-top to bottom-right of canvas.\nAn example showing 3 lines of various stroke sizes. Form top, bottom and right sides of a square.","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":339,"params":[{"name":"x1","description":"<p>the x-coordinate of the first point</p>\n","type":"Number"},{"name":"y1","description":"<p>the y-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"<p>the x-coordinate of the second point</p>\n","type":"Number"},{"name":"y2","description":"<p>the y-coordinate of the second point</p>\n","type":"Number"}],"chainable":1},{"line":375,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>the z-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>the z-coordinate of the second point</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/2d_primitives.js","line":400,"description":"<p>Draws a point, a coordinate in space at the dimension of one pixel.\nThe first parameter is the horizontal value for the point, the second\nparam is the vertical value for the point. The color of the point is\nchanged with the <a href=\"#/p5/stroke\">stroke()</a> function. The size of the point\ncan be changed with the <a href=\"#/p5/strokeWeight\">strokeWeight()</a> function.</p>\n","itemtype":"method","name":"point","chainable":1,"example":["\n<div>\n<code>\npoint(30, 20);\npoint(85, 20);\npoint(85, 75);\npoint(30, 75);\n</code>\n</div>\n\n<div>\n<code>\npoint(30, 20);\npoint(85, 20);\nstroke('purple'); // Change the color\nstrokeWeight(10); // Make the points 10 pixels in size\npoint(85, 75);\npoint(30, 75);\n</code>\n</div>\n\n<div>\n<code>\nlet a = createVector(10, 10);\npoint(a);\nlet b = createVector(10, 20);\npoint(b);\npoint(createVector(20, 10));\npoint(createVector(20, 20));\n</code>\n</div>"],"alt":"4 points centered in the middle-right of the canvas.\n2 large points and 2 large purple points centered in the middle-right of the canvas.\nVertices of a square of length 10 pixels towards the top-left of the canvas.","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":400,"params":[{"name":"x","description":"<p>the x-coordinate</p>\n","type":"Number"},{"name":"y","description":"<p>the y-coordinate</p>\n","type":"Number"},{"name":"z","description":"<p>the z-coordinate (for WebGL mode)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":450,"params":[{"name":"coordinate_vector","description":"<p>the coordinate vector</p>\n","type":"p5.Vector"}],"chainable":1}]},{"file":"src/core/shape/2d_primitives.js","line":478,"description":"<p>Draws a quad on the canvas. A quad is a quadrilateral, a four sided polygon. It is\nsimilar to a rectangle, but the angles between its edges are not\nconstrained to ninety degrees. The first pair of parameters (x1,y1)\nsets the first vertex and the subsequent pairs should proceed\nclockwise or counter-clockwise around the defined shape.\nz-arguments only work when quad() is used in WEBGL mode.</p>\n","itemtype":"method","name":"quad","chainable":1,"example":["\n<div>\n<code>\nquad(38, 31, 86, 20, 69, 63, 30, 76);\n</code>\n</div>"],"alt":"irregular white quadrilateral shape with black outline mid-right of canvas.","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":478,"params":[{"name":"x1","description":"<p>the x-coordinate of the first point</p>\n","type":"Number"},{"name":"y1","description":"<p>the y-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"<p>the x-coordinate of the second point</p>\n","type":"Number"},{"name":"y2","description":"<p>the y-coordinate of the second point</p>\n","type":"Number"},{"name":"x3","description":"<p>the x-coordinate of the third point</p>\n","type":"Number"},{"name":"y3","description":"<p>the y-coordinate of the third point</p>\n","type":"Number"},{"name":"x4","description":"<p>the x-coordinate of the fourth point</p>\n","type":"Number"},{"name":"y4","description":"<p>the y-coordinate of the fourth point</p>\n","type":"Number"},{"name":"detailX","description":"<p>number of segments in the x-direction</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of segments in the y-direction</p>\n","type":"Integer","optional":true}],"chainable":1},{"line":508,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>the z-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>the z-coordinate of the second point</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>the z-coordinate of the third point</p>\n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"<p>the z-coordinate of the fourth point</p>\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":552,"description":"<p>Draws a rectangle on the canvas. A rectangle is a four-sided closed shape with\nevery angle at ninety degrees. By default, the first two parameters set\nthe location of the upper-left corner, the third sets the width, and the\nfourth sets the height. The way these parameters are interpreted, may be\nchanged with the <a href=\"#/p5/rectMode\">rectMode()</a> function.</p>\n<p>The fifth, sixth, seventh and eighth parameters, if specified,\ndetermine corner radius for the top-left, top-right, lower-right and\nlower-left corners, respectively. An omitted corner radius parameter is set\nto the value of the previously specified radius value in the parameter list.</p>\n","itemtype":"method","name":"rect","chainable":1,"example":["\n<div>\n<code>\n// Draw a rectangle at location (30, 20) with a width and height of 55.\nrect(30, 20, 55, 55);\n</code>\n</div>\n\n<div>\n<code>\n// Draw a rectangle with rounded corners, each having a radius of 20.\nrect(30, 20, 55, 55, 20);\n</code>\n</div>\n\n<div>\n<code>\n// Draw a rectangle with rounded corners having the following radii:\n// top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.\nrect(30, 20, 55, 55, 20, 15, 10, 5);\n</code>\n</div>"],"alt":"55x55 white rect with black outline in mid-right of canvas.\n55x55 white rect with black outline and rounded edges in mid-right of canvas.\n55x55 white rect with black outline and rounded edges of different radii.","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":552,"params":[{"name":"x","description":"<p>x-coordinate of the rectangle.</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the rectangle.</p>\n","type":"Number"},{"name":"w","description":"<p>width of the rectangle.</p>\n","type":"Number"},{"name":"h","description":"<p>height of the rectangle.</p>\n","type":"Number","optional":true},{"name":"tl","description":"<p>optional radius of top-left corner.</p>\n","type":"Number","optional":true},{"name":"tr","description":"<p>optional radius of top-right corner.</p>\n","type":"Number","optional":true},{"name":"br","description":"<p>optional radius of bottom-right corner.</p>\n","type":"Number","optional":true},{"name":"bl","description":"<p>optional radius of bottom-left corner.</p>\n","type":"Number","optional":true}],"chainable":1},{"line":603,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"w","description":"","type":"Number"},{"name":"h","description":"","type":"Number"},{"name":"detailX","description":"<p>number of segments in the x-direction (for WebGL mode)</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of segments in the y-direction (for WebGL mode)</p>\n","type":"Integer","optional":true}],"chainable":1}]},{"file":"src/core/shape/2d_primitives.js","line":618,"description":"<p>Draws a square to the screen. A square is a four-sided shape with every angle\nat ninety degrees, and equal side size. This function is a special case of the\nrect() function, where the width and height are the same, and the parameter\nis called \"s\" for side size. By default, the first two parameters set the\nlocation of the upper-left corner, the third sets the side size of the square.\nThe way these parameters are interpreted, may be changed with the <a\nhref=\"#/p5/rectMode\">rectMode()</a> function.</p>\n<p>The fourth, fifth, sixth and seventh parameters, if specified,\ndetermine corner radius for the top-left, top-right, lower-right and\nlower-left corners, respectively. An omitted corner radius parameter is set\nto the value of the previously specified radius value in the parameter list.</p>\n","itemtype":"method","name":"square","params":[{"name":"x","description":"<p>x-coordinate of the square.</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the square.</p>\n","type":"Number"},{"name":"s","description":"<p>side size of the square.</p>\n","type":"Number"},{"name":"tl","description":"<p>optional radius of top-left corner.</p>\n","type":"Number","optional":true},{"name":"tr","description":"<p>optional radius of top-right corner.</p>\n","type":"Number","optional":true},{"name":"br","description":"<p>optional radius of bottom-right corner.</p>\n","type":"Number","optional":true},{"name":"bl","description":"<p>optional radius of bottom-left corner.</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// Draw a square at location (30, 20) with a side size of 55.\nsquare(30, 20, 55);\n</code>\n</div>\n\n<div>\n<code>\n// Draw a square with rounded corners, each having a radius of 20.\nsquare(30, 20, 55, 20);\n</code>\n</div>\n\n<div>\n<code>\n// Draw a square with rounded corners having the following radii:\n// top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.\nsquare(30, 20, 55, 20, 15, 10, 5);\n</code>\n</div>"],"alt":"55x55 white square with black outline in mid-right of canvas.\n55x55 white square with black outline and rounded edges in mid-right of canvas.\n55x55 white square with black outline and rounded edges of different radii.","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":707,"description":"<p>Draws a triangle to the canvas. A triangle is a plane created by connecting\nthree points. The first two arguments specify the first point, the middle two\narguments specify the second point, and the last two arguments specify the\nthird point.</p>\n","itemtype":"method","name":"triangle","params":[{"name":"x1","description":"<p>x-coordinate of the first point</p>\n","type":"Number"},{"name":"y1","description":"<p>y-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"<p>x-coordinate of the second point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate of the second point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate of the third point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate of the third point</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\ntriangle(30, 75, 58, 20, 86, 75);\n</code>\n</div>"],"alt":"white triangle with black outline in mid-right of canvas.","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/attributes.js","line":12,"description":"<p>Modifies the location from which ellipses are drawn by changing the way in\nwhich parameters given to <a href=\"#/p5/ellipse\">ellipse()</a>,\n<a href=\"#/p5/circle\">circle()</a> and <a href=\"#/p5/arc\">arc()</a> are interpreted.</p>\n<p>The default mode is CENTER, in which the first two parameters are interpreted\nas the shape's center point's x and y coordinates respectively, while the third\nand fourth parameters are its width and height.</p>\n<p>ellipseMode(RADIUS) also uses the first two parameters as the shape's center\npoint's x and y coordinates, but uses the third and fourth parameters to\nspecify half of the shapes's width and height.</p>\n<p>ellipseMode(CORNER) interprets the first two parameters as the upper-left\ncorner of the shape, while the third and fourth parameters are its width\nand height.</p>\n<p>ellipseMode(CORNERS) interprets the first two parameters as the location of\none corner of the ellipse's bounding box, and the third and fourth parameters\nas the location of the opposite corner.</p>\n<p>The parameter to this method must be written in ALL CAPS because they are\npredefined as constants in ALL CAPS and Javascript is a case-sensitive language.</p>\n","itemtype":"method","name":"ellipseMode","params":[{"name":"mode","description":"<p>either CENTER, RADIUS, CORNER, or CORNERS</p>\n","type":"Constant"}],"chainable":1,"example":["\n<div>\n<code>\n// Example showing RADIUS and CENTER ellipsemode with 2 overlaying ellipses\nellipseMode(RADIUS);\nfill(255);\nellipse(50, 50, 30, 30); // Outer white ellipse\nellipseMode(CENTER);\nfill(100);\nellipse(50, 50, 30, 30); // Inner gray ellipse\n</code>\n</div>\n\n<div>\n<code>\n// Example showing CORNER and CORNERS ellipseMode with 2 overlaying ellipses\nellipseMode(CORNER);\nfill(255);\nellipse(25, 25, 50, 50); // Outer white ellipse\nellipseMode(CORNERS);\nfill(100);\nellipse(25, 25, 50, 50); // Inner gray ellipse\n</code>\n</div>"],"alt":"60x60 white ellipse and 30x30 grey ellipse with black outlines at center.\n60x60 white ellipse and 30x30 grey ellipse top-right with black outlines.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":81,"description":"<p>Draws all geometry with jagged (aliased) edges. Note that <a href=\"#/p5/smooth\">smooth()</a> is\nactive by default in 2D mode, so it is necessary to call <a href=\"#/p5/noSmooth\">noSmooth()</a> to disable\nsmoothing of geometry, images, and fonts. In 3D mode, <a href=\"#/p5/noSmooth\">noSmooth()</a> is enabled\nby default, so it is necessary to call <a href=\"#/p5/smooth\">smooth()</a> if you would like\nsmooth (antialiased) edges on your geometry.</p>\n","itemtype":"method","name":"noSmooth","chainable":1,"example":["\n<div>\n<code>\nbackground(0);\nnoStroke();\nsmooth();\nellipse(30, 48, 36, 36);\nnoSmooth();\nellipse(70, 48, 36, 36);\n</code>\n</div>"],"alt":"2 pixelated 36x36 white ellipses to left & right of center, black background","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":115,"description":"<p>Modifies the location from which rectangles are drawn by changing the way\nin which parameters given to <a href=\"#/p5/rect\">rect()</a> are interpreted.</p>\n<p>The default mode is CORNER, which interprets the first two parameters as the\nupper-left corner of the shape, while the third and fourth parameters are its\nwidth and height.</p>\n<p>rectMode(CORNERS) interprets the first two parameters as the location of\none of the corners, and the third and fourth parameters as the location of\nthe diagonally opposite corner. Note, the rectangle is drawn between the\ncoordinates, so it is not neccesary that the first corner be the upper left\ncorner.</p>\n<p>rectMode(CENTER) interprets the first two parameters as the shape's center\npoint, while the third and fourth parameters are its width and height.</p>\n<p>rectMode(RADIUS) also uses the first two parameters as the shape's center\npoint, but uses the third and fourth parameters to specify half of the shape's\nwidth and height respectively.</p>\n<p>The parameter to this method must be written in ALL CAPS because they are\npredefined as constants in ALL CAPS and Javascript is a case-sensitive language.</p>\n","itemtype":"method","name":"rectMode","params":[{"name":"mode","description":"<p>either CORNER, CORNERS, CENTER, or RADIUS</p>\n","type":"Constant"}],"chainable":1,"example":["\n<div>\n<code>\nrectMode(CORNER);\nfill(255);\nrect(25, 25, 50, 50); // Draw white rectangle using CORNER mode\n\nrectMode(CORNERS);\nfill(100);\nrect(25, 25, 50, 50); // Draw gray rectangle using CORNERS mode\n</code>\n</div>\n\n<div>\n<code>\nrectMode(RADIUS);\nfill(255);\nrect(50, 50, 30, 30); // Draw white rectangle using RADIUS mode\n\nrectMode(CENTER);\nfill(100);\nrect(50, 50, 30, 30); // Draw gray rectangle using CENTER mode\n</code>\n</div>"],"alt":"50x50 white rect at center and 25x25 grey rect in the top left of the other.\n50x50 white rect at center and 25x25 grey rect in the center of the other.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":184,"description":"<p>Draws all geometry with smooth (anti-aliased) edges. <a href=\"#/p5/smooth\">smooth()</a> will also\nimprove image quality of resized images. Note that <a href=\"#/p5/smooth\">smooth()</a> is active by\ndefault in 2D mode; <a href=\"#/p5/noSmooth\">noSmooth()</a> can be used to disable smoothing of geometry,\nimages, and fonts. In 3D mode, <a href=\"#/p5/noSmooth\">noSmooth()</a> is enabled\nby default, so it is necessary to call <a href=\"#/p5/smooth\">smooth()</a> if you would like\nsmooth (antialiased) edges on your geometry.</p>\n","itemtype":"method","name":"smooth","chainable":1,"example":["\n<div>\n<code>\nbackground(0);\nnoStroke();\nsmooth();\nellipse(30, 48, 36, 36);\nnoSmooth();\nellipse(70, 48, 36, 36);\n</code>\n</div>"],"alt":"2 pixelated 36x36 white ellipses one left one right of center. On black.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":219,"description":"<p>Sets the style for rendering line endings. These ends are either rounded,\nsquared or extended, each of which specified with the corresponding\nparameters: ROUND, SQUARE and PROJECT. The default cap is ROUND.</p>\n<p>The parameter to this method must be written in ALL CAPS because they are\npredefined as constants in ALL CAPS and Javascript is a case-sensitive language.</p>\n","itemtype":"method","name":"strokeCap","params":[{"name":"cap","description":"<p>either ROUND, SQUARE or PROJECT</p>\n","type":"Constant"}],"chainable":1,"example":["\n<div>\n<code>\n// Example of different strokeCaps\nstrokeWeight(12.0);\nstrokeCap(ROUND);\nline(20, 30, 80, 30);\nstrokeCap(SQUARE);\nline(20, 50, 80, 50);\nstrokeCap(PROJECT);\nline(20, 70, 80, 70);\n</code>\n</div>"],"alt":"3 lines. Top line: rounded ends, mid: squared, bottom:longer squared ends.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":259,"description":"<p>Sets the style of the joints which connect line segments. These joints\nare either mitered, beveled or rounded and specified with the\ncorresponding parameters MITER, BEVEL and ROUND. The default joint is\nMITER.</p>\n<p>The parameter to this method must be written in ALL CAPS because they are\npredefined as constants in ALL CAPS and Javascript is a case-sensitive language.</p>\n","itemtype":"method","name":"strokeJoin","params":[{"name":"join","description":"<p>either MITER, BEVEL, ROUND</p>\n","type":"Constant"}],"chainable":1,"example":["\n<div>\n<code>\n// Example of MITER type of joints\nnoFill();\nstrokeWeight(10.0);\nstrokeJoin(MITER);\nbeginShape();\nvertex(35, 20);\nvertex(65, 50);\nvertex(35, 80);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\n// Example of BEVEL type of joints\nnoFill();\nstrokeWeight(10.0);\nstrokeJoin(BEVEL);\nbeginShape();\nvertex(35, 20);\nvertex(65, 50);\nvertex(35, 80);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\n// Example of ROUND type of joints\nnoFill();\nstrokeWeight(10.0);\nstrokeJoin(ROUND);\nbeginShape();\nvertex(35, 20);\nvertex(65, 50);\nvertex(35, 80);\nendShape();\n</code>\n</div>"],"alt":"Right-facing arrowhead shape with pointed tip in center of canvas.\nRight-facing arrowhead shape with flat tip in center of canvas.\nRight-facing arrowhead shape with rounded tip in center of canvas.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":331,"description":"<p>Sets the width of the stroke used for lines, points and the border around\nshapes. All widths are set in units of pixels.</p>\n","itemtype":"method","name":"strokeWeight","params":[{"name":"weight","description":"<p>the weight of the stroke (in pixels)</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\n// Example of different stroke weights\nstrokeWeight(1); // Default\nline(20, 20, 80, 20);\nstrokeWeight(4); // Thicker\nline(20, 40, 80, 40);\nstrokeWeight(10); // Beastly\nline(20, 70, 80, 70);\n</code>\n</div>"],"alt":"3 horizontal black lines. Top line: thin, mid: medium, bottom:thick.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/curves.js","line":13,"description":"<p>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.</p>\n<p>Bezier curves were developed by French automotive engineer Pierre Bezier,\nand are commonly used in computer graphics to define gently sloping curves.\nSee also <a href=\"#/p5/curve\">curve()</a>.</p>\n","itemtype":"method","name":"bezier","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\nbackground(0, 0, 0);\nnoFill();\nstroke(255);\nbezier(250, 250, 0, 100, 100, 0, 100, 0, 0, 0, 100, 0);\n</code>\n</div>"],"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":"<p>x-coordinate for the first anchor point</p>\n","type":"Number"},{"name":"y1","description":"<p>y-coordinate for the first anchor point</p>\n","type":"Number"},{"name":"x2","description":"<p>x-coordinate for the first control point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate for the first control point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate for the second control point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate for the second control point</p>\n","type":"Number"},{"name":"x4","description":"<p>x-coordinate for the second anchor point</p>\n","type":"Number"},{"name":"y4","description":"<p>y-coordinate for the second anchor point</p>\n","type":"Number"}],"chainable":1},{"line":62,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>z-coordinate for the first anchor point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>z-coordinate for the first control point</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>z-coordinate for the second control point</p>\n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"<p>z-coordinate for the second anchor point</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/curves.js","line":92,"description":"<p>Sets the resolution at which Bezier's curve is displayed. The default value is 20.</p>\n<p>Note, This function is only useful when using the WEBGL renderer\nas the default canvas renderer does not use this information.</p>\n","itemtype":"method","name":"bezierDetail","params":[{"name":"detail","description":"<p>resolution of the curves</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  noFill();\n  bezierDetail(5);\n}\n\nfunction draw() {\n  background(200);\n  bezier(-40, -40, 0,\n          90, -40, 0,\n         -90,  40, 0,\n          40,  40, 0);\n}\n</code>\n</div>"],"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":130,"description":"<p>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.</p>\n","itemtype":"method","name":"bezierPoint","params":[{"name":"a","description":"<p>coordinate of first point on the curve</p>\n","type":"Number"},{"name":"b","description":"<p>coordinate of first control point</p>\n","type":"Number"},{"name":"c","description":"<p>coordinate of second control point</p>\n","type":"Number"},{"name":"d","description":"<p>coordinate of second point on the curve</p>\n","type":"Number"},{"name":"t","description":"<p>value between 0 and 1</p>\n","type":"Number"}],"return":{"description":"the value of the Bezier at position t","type":"Number"},"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"10 points plotted on a given bezier at equal distances.","class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":185,"description":"<p>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.</p>\n","itemtype":"method","name":"bezierTangent","params":[{"name":"a","description":"<p>coordinate of first point on the curve</p>\n","type":"Number"},{"name":"b","description":"<p>coordinate of first control point</p>\n","type":"Number"},{"name":"c","description":"<p>coordinate of second control point</p>\n","type":"Number"},{"name":"d","description":"<p>coordinate of second point on the curve</p>\n","type":"Number"},{"name":"t","description":"<p>value between 0 and 1</p>\n","type":"Number"}],"return":{"description":"the tangent at position t","type":"Number"},"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":264,"description":"<p>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. <br /><br />\nLonger curves can be created by putting a series of <a href=\"#/p5/curve\">curve()</a> functions\ntogether or using <a href=\"#/p5/curveVertex\">curveVertex()</a>. An additional function called\n<a href=\"#/p5/curveTightness\">curveTightness()</a> provides control for the visual quality of the curve.\nThe <a href=\"#/p5/curve\">curve()</a> function is an implementation of Catmull-Rom splines.</p>\n","itemtype":"method","name":"curve","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":264,"params":[{"name":"x1","description":"<p>x-coordinate for the beginning control point</p>\n","type":"Number"},{"name":"y1","description":"<p>y-coordinate for the beginning control point</p>\n","type":"Number"},{"name":"x2","description":"<p>x-coordinate for the first point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate for the first point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate for the second point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate for the second point</p>\n","type":"Number"},{"name":"x4","description":"<p>x-coordinate for the ending control point</p>\n","type":"Number"},{"name":"y4","description":"<p>y-coordinate for the ending control point</p>\n","type":"Number"}],"chainable":1},{"line":332,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>z-coordinate for the beginning control point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>z-coordinate for the first point</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>z-coordinate for the second point</p>\n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"<p>z-coordinate for the ending control point</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/curves.js","line":358,"description":"<p>Sets the resolution at which curves display. The default value is 20 while\nthe minimum value is 3.</p>\n<p>This function is only useful when using the WEBGL renderer\nas the default canvas renderer does not use this\ninformation.</p>\n","itemtype":"method","name":"curveDetail","params":[{"name":"resolution","description":"<p>resolution of the curves</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\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</code>\n</div>"],"alt":"white arch shape with a low level of curve detail.","class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":398,"description":"<p>Modifies the quality of forms created with <a href=\"#/p5/curve\">curve()</a>\nand <a href=\"#/p5/curveVertex\">curveVertex()</a>.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.</p>\n","itemtype":"method","name":"curveTightness","params":[{"name":"amount","description":"<p>amount of deformation from the original vertices</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"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":444,"description":"<p>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.</p>\n","itemtype":"method","name":"curvePoint","params":[{"name":"a","description":"<p>coordinate of first control point of the curve</p>\n","type":"Number"},{"name":"b","description":"<p>coordinate of first point</p>\n","type":"Number"},{"name":"c","description":"<p>coordinate of second point</p>\n","type":"Number"},{"name":"d","description":"<p>coordinate of second control point</p>\n","type":"Number"},{"name":"t","description":"<p>value between 0 and 1</p>\n","type":"Number"}],"return":{"description":"bezier value at position t","type":"Number"},"example":["\n<div>\n<code>\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</code>\n</div>\n\nline hooking down to right-bottom with 13 5x5 white ellipse points"],"class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":493,"description":"<p>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.</p>\n","itemtype":"method","name":"curveTangent","params":[{"name":"a","description":"<p>coordinate of first control point</p>\n","type":"Number"},{"name":"b","description":"<p>coordinate of first point on the curve</p>\n","type":"Number"},{"name":"c","description":"<p>coordinate of second point on the curve</p>\n","type":"Number"},{"name":"d","description":"<p>coordinate of second conrol point</p>\n","type":"Number"},{"name":"t","description":"<p>value between 0 and 1</p>\n","type":"Number"}],"return":{"description":"the tangent at position t","type":"Number"},"example":["\n<div>\n<code>\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</code>\n</div>"],"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":"<p>Use the <a href=\"#/p5/beginContour\">beginContour()</a> and\n<a href=\"#/p5/endContour\">endContour()</a> functions to create negative shapes\nwithin shapes such as the center of the letter 'O'. <a href=\"#/p5/beginContour\">beginContour()</a>\nbegins recording vertices for the shape and <a href=\"#/p5/endContour\">endContour()</a> 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.</p>\n<p>These functions can only be used within a <a href=\"#/p5/beginShape\">beginShape()</a>/<a href=\"#/p5/endShape\">endShape()</a> pair and\ntransformations such as <a href=\"#/p5/translate\">translate()</a>, <a href=\"#/p5/rotate\">rotate()</a>, and <a href=\"#/p5/scale\">scale()</a> do not work\nwithin a <a href=\"#/p5/beginContour\">beginContour()</a>/<a href=\"#/p5/endContour\">endContour()</a> pair. It is also not possible to use\nother shapes, such as <a href=\"#/p5/ellipse\">ellipse()</a> or <a href=\"#/p5/rect\">rect()</a> within.</p>\n","itemtype":"method","name":"beginContour","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"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":67,"description":"<p>Using the <a href=\"#/p5/beginShape\">beginShape()</a> and <a href=\"#/p5/endShape\">endShape()</a> functions allow creating more\ncomplex forms. <a href=\"#/p5/beginShape\">beginShape()</a> begins recording vertices for a shape and\n<a href=\"#/p5/endShape\">endShape()</a> 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.</p>\n<p>The parameters available for <a href=\"#/p5/beginShape\">beginShape()</a> are POINTS, LINES, TRIANGLES,\nTRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIP, and TESS (WebGL only). After calling the\n<a href=\"#/p5/beginShape\">beginShape()</a> function, a series of <a href=\"#/p5/vertex\">vertex()</a> commands must follow. To stop\ndrawing the shape, call <a href=\"#/p5/endShape\">endShape()</a>. Each shape will be outlined with the\ncurrent stroke color and filled with the fill color.</p>\n<p>Transformations such as <a href=\"#/p5/translate\">translate()</a>, <a href=\"#/p5/rotate\">rotate()</a>, and <a href=\"#/p5/scale\">scale()</a> do not work\nwithin <a href=\"#/p5/beginShape\">beginShape()</a>. It is also not possible to use other shapes, such as\n<a href=\"#/p5/ellipse\">ellipse()</a> or <a href=\"#/p5/rect\">rect()</a> within <a href=\"#/p5/beginShape\">beginShape()</a>.</p>\n","itemtype":"method","name":"beginShape","params":[{"name":"kind","description":"<p>either POINTS, LINES, TRIANGLES, TRIANGLE_FAN\n                               TRIANGLE_STRIP, QUADS, QUAD_STRIP or TESS</p>\n","type":"Constant","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape(CLOSE);\n</code>\n</div>\n\n<div>\n<code>\nbeginShape(POINTS);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\nbeginShape(LINES);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\nnoFill();\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\nnoFill();\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape(CLOSE);\n</code>\n</div>\n\n<div>\n<code>\nbeginShape(TRIANGLES);\nvertex(30, 75);\nvertex(40, 20);\nvertex(50, 75);\nvertex(60, 20);\nvertex(70, 75);\nvertex(80, 20);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\nbeginShape();\nvertex(20, 20);\nvertex(40, 20);\nvertex(40, 40);\nvertex(60, 40);\nvertex(60, 60);\nvertex(20, 60);\nendShape(CLOSE);\n</code>\n</div>"],"alt":"white square-shape with black outline in middle-right of canvas.\n4 black points in a square shape in middle-right of canvas.\n2 horizontal black lines. In the top-right and bottom-right of canvas.\n3 line shape with horizontal on top, vertical in middle and horizontal bottom.\nsquare line shape in middle-right of canvas.\n2 white triangle shapes mid-right canvas. left one pointing up and right down.\n5 horizontal interlocking and alternating white triangles in mid-right canvas.\n4 interlocking white triangles in 45 degree rotated square-shape.\n2 white rectangle shapes in mid-right canvas. Both 20x55.\n3 side-by-side white rectangles center rect is smaller in mid-right canvas.\nThick white l-shape with black outline mid-top-left of canvas.","class":"p5","module":"Shape","submodule":"Vertex"},{"file":"src/core/shape/vertex.js","line":267,"description":"<p>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).</p>\n<p>The first time bezierVertex() is used within a <a href=\"#/p5/beginShape\">beginShape()</a>\ncall, it must be prefaced with a call to <a href=\"#/p5/vertex\">vertex()</a> to set the first anchor\npoint. This function must be used between <a href=\"#/p5/beginShape\">beginShape()</a> and <a href=\"#/p5/endShape\">endShape()</a>\nand only when there is no MODE or POINTS parameter specified to\n<a href=\"#/p5/beginShape\">beginShape()</a>.</p>\n","itemtype":"method","name":"bezierVertex","chainable":1,"example":["\n<div>\n<code>\nnoFill();\nbeginShape();\nvertex(30, 20);\nbezierVertex(80, 0, 80, 75, 30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\nbeginShape();\nvertex(30, 20);\nbezierVertex(80, 0, 80, 75, 30, 75);\nbezierVertex(50, 80, 60, 25, 30, 20);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":267,"params":[{"name":"x2","description":"<p>x-coordinate for the first control point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate for the first control point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate for the second control point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate for the second control point</p>\n","type":"Number"},{"name":"x4","description":"<p>x-coordinate for the anchor point</p>\n","type":"Number"},{"name":"y4","description":"<p>y-coordinate for the anchor point</p>\n","type":"Number"}],"chainable":1},{"line":349,"params":[{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>z-coordinate for the first control point (for WebGL mode)</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>z-coordinate for the second control point (for WebGL mode)</p>\n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"<p>z-coordinate for the anchor point (for WebGL mode)</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/vertex.js","line":389,"description":"<p>Specifies vertex coordinates for curves. This function may only\nbe used between <a href=\"#/p5/beginShape\">beginShape()</a> and <a href=\"#/p5/endShape\">endShape()</a> and only when there\nis no MODE parameter specified to <a href=\"#/p5/beginShape\">beginShape()</a>.\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.</p>\n<p>The first and last points in a series of curveVertex() lines will be used to\nguide the beginning and end of a the curve. A minimum of four\npoints is required to draw a tiny curve between the second and\nthird points. Adding a fifth point with curveVertex() will draw\nthe curve between the second, third, and fourth points. The\ncurveVertex() function is an implementation of Catmull-Rom\nsplines.</p>\n","itemtype":"method","name":"curveVertex","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"Upside-down u-shape line, mid canvas. left point extends beyond canvas view.","class":"p5","module":"Shape","submodule":"Vertex","overloads":[{"line":389,"params":[{"name":"x","description":"<p>x-coordinate of the vertex</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the vertex</p>\n","type":"Number"}],"chainable":1},{"line":434,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"<p>z-coordinate of the vertex (for WebGL mode)</p>\n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/core/shape/vertex.js","line":498,"description":"<p>Use the <a href=\"#/p5/beginContour\">beginContour()</a> and <a href=\"#/p5/endContour\">endContour()</a> functions to create negative\nshapes within shapes such as the center of the letter 'O'. <a href=\"#/p5/beginContour\">beginContour()</a>\nbegins recording vertices for the shape and <a href=\"#/p5/endContour\">endContour()</a> 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.</p>\n<p>These functions can only be used within a <a href=\"#/p5/beginShape\">beginShape()</a>/<a href=\"#/p5/endShape\">endShape()</a> pair and\ntransformations such as <a href=\"#/p5/translate\">translate()</a>, <a href=\"#/p5/rotate\">rotate()</a>, and <a href=\"#/p5/scale\">scale()</a> do not work\nwithin a <a href=\"#/p5/beginContour\">beginContour()</a>/<a href=\"#/p5/endContour\">endContour()</a> pair. It is also not possible to use\nother shapes, such as <a href=\"#/p5/ellipse\">ellipse()</a> or <a href=\"#/p5/rect\">rect()</a> within.</p>\n","itemtype":"method","name":"endContour","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"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":557,"description":"<p>The <a href=\"#/p5/endShape\">endShape()</a> function is the companion to <a href=\"#/p5/beginShape\">beginShape()</a> and may only be\ncalled after <a href=\"#/p5/beginShape\">beginShape()</a>. When <a href=\"#/p5/endshape\">endShape()</a> is called, all of image data\ndefined since the previous call to <a href=\"#/p5/beginShape\">beginShape()</a> is written into the image\nbuffer. The constant CLOSE as the value for the MODE parameter to close\nthe shape (to connect the beginning and the end).</p>\n","itemtype":"method","name":"endShape","params":[{"name":"mode","description":"<p>use CLOSE to close the shape</p>\n","type":"Constant","optional":true}],"chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"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":642,"description":"<p>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 <a href=\"#/p5/beginShape\">beginShape()</a> call, it\nmust be prefaced with a call to <a href=\"#/p5/vertex\">vertex()</a> 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).</p>\n<p>This function must be used between <a href=\"#/p5/beginShape\">beginShape()</a> and <a href=\"#/p5/endShape\">endShape()</a>\nand only when there is no MODE or POINTS parameter specified to\n<a href=\"#/p5/beginShape\">beginShape()</a>.</p>\n","itemtype":"method","name":"quadraticVertex","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":642,"params":[{"name":"cx","description":"<p>x-coordinate for the control point</p>\n","type":"Number"},{"name":"cy","description":"<p>y-coordinate for the control point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate for the anchor point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate for the anchor point</p>\n","type":"Number"}],"chainable":1},{"line":707,"params":[{"name":"cx","description":"","type":"Number"},{"name":"cy","description":"","type":"Number"},{"name":"cz","description":"<p>z-coordinate for the control point (for WebGL mode)</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>z-coordinate for the anchor point (for WebGL mode)</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/vertex.js","line":800,"description":"<p>All shapes are constructed by connecting a series of vertices. <a href=\"#/p5/vertex\">vertex()</a>\nis used to specify the vertex coordinates for points, lines, triangles,\nquads, and polygons. It is used exclusively within the <a href=\"#/p5/beginShape\">beginShape()</a> and\n<a href=\"#/p5/endShape\">endShape()</a> functions.</p>\n","itemtype":"method","name":"vertex","chainable":1,"example":["\n<div>\n<code>\nstrokeWeight(3);\nbeginShape(POINTS);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":800,"params":[{"name":"x","description":"<p>x-coordinate of the vertex</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the vertex</p>\n","type":"Number"}],"chainable":1},{"line":931,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"<p>z-coordinate of the vertex</p>\n","type":"Number"},{"name":"u","description":"<p>the vertex's texture u-coordinate</p>\n","type":"Number","optional":true},{"name":"v","description":"<p>the vertex's texture v-coordinate</p>\n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/core/constants.js","line":9,"description":"<p>Version of this p5.js.</p>\n","itemtype":"property","name":"VERSION","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":18,"description":"<p>The default, two-dimensional renderer.</p>\n","itemtype":"property","name":"P2D","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":24,"description":"<p>One of the two render modes in p5.js: P2D (default renderer) and WEBGL\nEnables 3D render by introducing the third dimension: Z</p>\n","itemtype":"property","name":"WEBGL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":33,"itemtype":"property","name":"ARROW","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":38,"itemtype":"property","name":"CROSS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":43,"itemtype":"property","name":"HAND","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":48,"itemtype":"property","name":"MOVE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":53,"itemtype":"property","name":"TEXT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":58,"itemtype":"property","name":"WAIT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":66,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"HALF_PI","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, HALF_PI);\n</code></div>"],"alt":"80x80 white quarter-circle with curve toward bottom right of canvas.","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":84,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"PI","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, PI);\n</code></div>"],"alt":"white half-circle with curve toward bottom of canvas.","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":102,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"QUARTER_PI","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, QUARTER_PI);\n</code></div>"],"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":120,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"TAU","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, TAU);\n</code></div>"],"alt":"80x80 white ellipse shape in center of canvas.","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":138,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"TWO_PI","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, TWO_PI);\n</code></div>"],"alt":"80x80 white ellipse shape in center of canvas.","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":156,"description":"<p>Constant to be used with <a href=\"#/p5/angleMode\">angleMode()</a> function, to set the mode which\np5.js interprates and calculates angles (either DEGREES or RADIANS).</p>\n","itemtype":"property","name":"DEGREES","type":"String","final":1,"example":["\n<div class='norender'><code>\nfunction setup() {\n  angleMode(DEGREES);\n}\n</code></div>"],"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":170,"description":"<p>Constant to be used with <a href=\"#/p5/angleMode\">angleMode()</a> function, to set the mode which\np5.js interprates and calculates angles (either RADIANS or DEGREES).</p>\n","itemtype":"property","name":"RADIANS","type":"String","final":1,"example":["\n<div class='norender'><code>\nfunction setup() {\n  angleMode(RADIANS);\n}\n</code></div>"],"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":188,"itemtype":"property","name":"CORNER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":193,"itemtype":"property","name":"CORNERS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":198,"itemtype":"property","name":"RADIUS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":203,"itemtype":"property","name":"RIGHT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":208,"itemtype":"property","name":"LEFT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":213,"itemtype":"property","name":"CENTER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":218,"itemtype":"property","name":"TOP","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":223,"itemtype":"property","name":"BOTTOM","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":228,"itemtype":"property","name":"BASELINE","type":"String","final":1,"default":"alphabetic","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":234,"itemtype":"property","name":"POINTS","type":"Number","final":1,"default":"0x0000","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":240,"itemtype":"property","name":"LINES","type":"Number","final":1,"default":"0x0001","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":246,"itemtype":"property","name":"LINE_STRIP","type":"Number","final":1,"default":"0x0003","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":252,"itemtype":"property","name":"LINE_LOOP","type":"Number","final":1,"default":"0x0002","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":258,"itemtype":"property","name":"TRIANGLES","type":"Number","final":1,"default":"0x0004","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":264,"itemtype":"property","name":"TRIANGLE_FAN","type":"Number","final":1,"default":"0x0006","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":270,"itemtype":"property","name":"TRIANGLE_STRIP","type":"Number","final":1,"default":"0x0005","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":276,"itemtype":"property","name":"QUADS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":281,"itemtype":"property","name":"QUAD_STRIP","type":"String","final":1,"default":"quad_strip","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":287,"itemtype":"property","name":"TESS","type":"String","final":1,"default":"tess","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":293,"itemtype":"property","name":"CLOSE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":298,"itemtype":"property","name":"OPEN","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":303,"itemtype":"property","name":"CHORD","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":308,"itemtype":"property","name":"PIE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":313,"itemtype":"property","name":"PROJECT","type":"String","final":1,"default":"square","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":319,"itemtype":"property","name":"SQUARE","type":"String","final":1,"default":"butt","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":325,"itemtype":"property","name":"ROUND","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":330,"itemtype":"property","name":"BEVEL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":335,"itemtype":"property","name":"MITER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":342,"itemtype":"property","name":"RGB","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":347,"description":"<p>HSB (hue, saturation, brightness) is a type of color model.\nYou can learn more about it at\n<a href=\"https://learnui.design/blog/the-hsb-color-system-practicioners-primer.html\">HSB</a>.</p>\n","itemtype":"property","name":"HSB","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":356,"itemtype":"property","name":"HSL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":363,"description":"<p>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 <a href=\"/#/p5.Element/size\">size</a> function as AUTO, at a time.</p>\n","itemtype":"property","name":"AUTO","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":373,"itemtype":"property","name":"ALT","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":379,"itemtype":"property","name":"BACKSPACE","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":384,"itemtype":"property","name":"CONTROL","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":389,"itemtype":"property","name":"DELETE","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":394,"itemtype":"property","name":"DOWN_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":399,"itemtype":"property","name":"ENTER","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":404,"itemtype":"property","name":"ESCAPE","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":409,"itemtype":"property","name":"LEFT_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":414,"itemtype":"property","name":"OPTION","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":419,"itemtype":"property","name":"RETURN","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":424,"itemtype":"property","name":"RIGHT_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":429,"itemtype":"property","name":"SHIFT","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":434,"itemtype":"property","name":"TAB","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":439,"itemtype":"property","name":"UP_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":446,"itemtype":"property","name":"BLEND","type":"String","final":1,"default":"source-over","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":452,"itemtype":"property","name":"REMOVE","type":"String","final":1,"default":"destination-out","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":458,"itemtype":"property","name":"ADD","type":"String","final":1,"default":"lighter","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":466,"itemtype":"property","name":"DARKEST","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":471,"itemtype":"property","name":"LIGHTEST","type":"String","final":1,"default":"lighten","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":477,"itemtype":"property","name":"DIFFERENCE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":482,"itemtype":"property","name":"SUBTRACT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":487,"itemtype":"property","name":"EXCLUSION","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":492,"itemtype":"property","name":"MULTIPLY","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":497,"itemtype":"property","name":"SCREEN","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":502,"itemtype":"property","name":"REPLACE","type":"String","final":1,"default":"copy","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":508,"itemtype":"property","name":"OVERLAY","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":513,"itemtype":"property","name":"HARD_LIGHT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":518,"itemtype":"property","name":"SOFT_LIGHT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":523,"itemtype":"property","name":"DODGE","type":"String","final":1,"default":"color-dodge","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":529,"itemtype":"property","name":"BURN","type":"String","final":1,"default":"color-burn","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":537,"itemtype":"property","name":"THRESHOLD","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":542,"itemtype":"property","name":"GRAY","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":547,"itemtype":"property","name":"OPAQUE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":552,"itemtype":"property","name":"INVERT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":557,"itemtype":"property","name":"POSTERIZE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":562,"itemtype":"property","name":"DILATE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":567,"itemtype":"property","name":"ERODE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":572,"itemtype":"property","name":"BLUR","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":579,"itemtype":"property","name":"NORMAL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":584,"itemtype":"property","name":"ITALIC","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":589,"itemtype":"property","name":"BOLD","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":594,"itemtype":"property","name":"BOLDITALIC","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":606,"itemtype":"property","name":"LINEAR","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":611,"itemtype":"property","name":"QUADRATIC","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":616,"itemtype":"property","name":"BEZIER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":621,"itemtype":"property","name":"CURVE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":628,"itemtype":"property","name":"STROKE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":633,"itemtype":"property","name":"FILL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":638,"itemtype":"property","name":"TEXTURE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":643,"itemtype":"property","name":"IMMEDIATE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":651,"itemtype":"property","name":"IMAGE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":659,"itemtype":"property","name":"NEAREST","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":664,"itemtype":"property","name":"REPEAT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":669,"itemtype":"property","name":"CLAMP","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":674,"itemtype":"property","name":"MIRROR","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":681,"itemtype":"property","name":"LANDSCAPE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":686,"itemtype":"property","name":"PORTRAIT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":696,"itemtype":"property","name":"GRID","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":702,"itemtype":"property","name":"AXES","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":708,"itemtype":"property","name":"LABEL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":713,"itemtype":"property","name":"FALLBACK","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/environment.js","line":20,"description":"<p>The <a href=\"#/p5/print\">print()</a> function writes to the console area of\nyour browser. This function is often helpful for looking at the data a program\nis producing. This function creates a new line of text for each call to\nthe function. Individual elements can be separated with quotes (\"\") and joined\nwith the addition operator (+).</p>\n<p>Note that calling print() without any arguments invokes the window.print()\nfunction which opens the browser's print dialog. To print a blank line\nto console you can write print('\\n').</p>\n","itemtype":"method","name":"print","params":[{"name":"contents","description":"<p>any combination of Number, String, Object, Boolean,\n                      Array to print</p>\n","type":"Any"}],"example":["\n<div><code class='norender'>\nlet x = 10;\nprint('The value of x is ' + x);\n// prints \"The value of x is 10\"\n</code></div>"],"alt":"default grey canvas","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":52,"description":"<p>The system variable <a href=\"#/p5/frameCount\">frameCount</a> contains the\nnumber of frames that have been displayed since the program started. Inside\n<a href=\"#/p5/setup\">setup()</a> the value is 0, after the first iteration\nof draw it is 1, etc.</p>\n","itemtype":"property","name":"frameCount","type":"Integer","readonly":"","example":["\n<div><code>\nfunction setup() {\n  frameRate(30);\n  textSize(30);\n  textAlign(CENTER);\n}\n\nfunction draw() {\n  background(200);\n  text(frameCount, width / 2, height / 2);\n}\n</code></div>"],"alt":"numbers rapidly counting upward with frame count set to 30.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":79,"description":"<p>The system variable <a href=\"#/p5/deltaTime\">deltaTime</a> contains the time\ndifference between the beginning of the previous frame and the beginning\nof the current frame in milliseconds.</p>\n<p>This variable is useful for creating time sensitive animation or physics\ncalculation that should stay constant regardless of frame rate.</p>\n","itemtype":"property","name":"deltaTime","type":"Integer","readonly":"","example":["\n<div><code>\nlet rectX = 0;\nlet fr = 30; //starting FPS\nlet clr;\n\nfunction setup() {\n  background(200);\n  frameRate(fr); // Attempt to refresh at starting FPS\n  clr = color(255, 0, 0);\n}\n\nfunction draw() {\n  background(200);\n  rectX = rectX + 1 * (deltaTime / 50); // Move Rectangle in relation to deltaTime\n\n  if (rectX >= width) {\n    // If you go off screen.\n    if (fr === 30) {\n      clr = color(0, 0, 255);\n      fr = 10;\n      frameRate(fr); // make frameRate 10 FPS\n    } else {\n      clr = color(255, 0, 0);\n      fr = 30;\n      frameRate(fr); // make frameRate 30 FPS\n    }\n    rectX = 0;\n  }\n  fill(clr);\n  rect(rectX, 40, 20, 20);\n}\n</code></div>"],"alt":"red rect moves left to right, followed by blue rect moving at the same speed\nwith a lower frame rate. Loops.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":129,"description":"<p>Confirms if the window a p5.js program is in is \"focused,\" meaning that\nthe sketch will accept mouse or keyboard input. This variable is\n\"true\" if the window is focused and \"false\" if not.</p>\n","itemtype":"property","name":"focused","type":"Boolean","readonly":"","example":["\n<div><code>\n// To demonstrate, put two windows side by side.\n// Click on the window that the p5 sketch isn't in!\nfunction draw() {\n  background(200);\n  noStroke();\n  fill(0, 200, 0);\n  ellipse(25, 25, 50, 50);\n\n  if (!focused) {\n   // or \"if (focused === false)\"\n    stroke(200, 0, 0);\n    line(0, 0, 100, 100);\n    line(100, 0, 0, 100);\n  }\n}\n</code></div>"],"alt":"green 50x50 ellipse at top left. Red X covers canvas when page focus changes","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":160,"description":"<p>Sets the cursor to a predefined symbol or an image, or makes it visible\nif already hidden. If you are trying to set an image as the cursor, the\nrecommended size is 16x16 or 32x32 pixels. The values for parameters x and y\nmust be less than the dimensions of the image.</p>\n","itemtype":"method","name":"cursor","params":[{"name":"type","description":"<p>Built-In: either ARROW, CROSS, HAND, MOVE, TEXT and WAIT\n                              Native CSS properties: 'grab', 'progress', 'cell' etc.\n                              External: path for cursor's images\n                              (Allowed File extensions: .cur, .gif, .jpg, .jpeg, .png)\n                              For more information on Native CSS cursors and url visit:\n                              <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/cursor\">https://developer.mozilla.org/en-US/docs/Web/CSS/cursor</a></p>\n","type":"String|Constant"},{"name":"x","description":"<p>the horizontal active spot of the cursor (must be less than 32)</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>the vertical active spot of the cursor (must be less than 32)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\n// Move the mouse across the quadrants\n// to see the cursor change\nfunction draw() {\n  line(width / 2, 0, width / 2, height);\n  line(0, height / 2, width, height / 2);\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</code></div>"],"alt":"canvas is divided into four quadrants. cursor on first is a cross, second is a progress,\nthird is a custom cursor using path to the cursor and fourth is a grab.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":228,"description":"<p>Specifies the number of frames to be displayed every second. For example,\nthe function call frameRate(30) will attempt to refresh 30 times a second.\nIf the processor is not fast enough to maintain the specified rate, the\nframe rate will not be achieved. Setting the frame rate within \n<a href=\"#/p5/setup\">setup()</a> is recommended. The default frame rate is\nbased on the frame rate of the display (here also called \"refresh rate\"), \nwhich is set to 60 frames per second on most computers. A frame rate of 24\nframes per second (usual for movies) or above will be enough for smooth \nanimations. This is the same as setFrameRate(val).</p>\n<p>Calling <a href=\"#/p5/frameRate\">frameRate()</a> with no arguments returns\nthe current framerate. The draw function must run at least once before it will\nreturn a value. This is the same as <a href=\"#/p5/getFrameRate\">getFrameRate()</a>.</p>\n<p>Calling <a href=\"#/p5/frameRate\">frameRate()</a> with arguments that are not\nof the type numbers or are non positive also returns current framerate.</p>\n","itemtype":"method","name":"frameRate","chainable":1,"example":["\n\n<div><code>\nlet rectX = 0;\nlet fr = 30; //starting FPS\nlet clr;\n\nfunction setup() {\n  background(200);\n  frameRate(fr); // Attempt to refresh at starting FPS\n  clr = color(255, 0, 0);\n}\n\nfunction draw() {\n  background(200);\n  rectX = rectX += 1; // Move Rectangle\n\n  if (rectX >= width) {\n   // If you go off screen.\n    if (fr === 30) {\n      clr = color(0, 0, 255);\n      fr = 10;\n      frameRate(fr); // make frameRate 10 FPS\n    } else {\n      clr = color(255, 0, 0);\n      fr = 30;\n      frameRate(fr); // make frameRate 30 FPS\n    }\n    rectX = 0;\n  }\n  fill(clr);\n  rect(rectX, 40, 20, 20);\n}\n</code></div>"],"alt":"blue rect moves left to right, followed by red rect moving faster. Loops.","class":"p5","module":"Environment","submodule":"Environment","overloads":[{"line":228,"params":[{"name":"fps","description":"<p>number of frames to be displayed every second</p>\n","type":"Number"}],"chainable":1},{"line":288,"params":[],"return":{"description":"current frameRate","type":"Number"}}]},{"file":"src/core/environment.js","line":331,"description":"<p>Hides the cursor from view.</p>\n","itemtype":"method","name":"noCursor","example":["\n<div><code>\nfunction setup() {\n  noCursor();\n}\n\nfunction draw() {\n  background(200);\n  ellipse(mouseX, mouseY, 10, 10);\n}\n</code></div>"],"alt":"cursor becomes 10x 10 white ellipse the moves with mouse x and y.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":354,"description":"<p>System variable that stores the width of the screen display according to The\ndefault <a href=\"#/p5/pixelDensity\">pixelDensity</a>. This is used to run a\nfull-screen program on any display size. To return actual screen size,\nmultiply this by pixelDensity.</p>\n","itemtype":"property","name":"displayWidth","type":"Number","readonly":"","example":["\n<div class=\"norender\"><code>\ncreateCanvas(displayWidth, displayHeight);\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":372,"description":"<p>System variable that stores the height of the screen display according to The\ndefault <a href=\"#/p5/pixelDensity\">pixelDensity</a>. This is used to run a\nfull-screen program on any display size. To return actual screen size,\nmultiply this by pixelDensity.</p>\n","itemtype":"property","name":"displayHeight","type":"Number","readonly":"","example":["\n<div class=\"norender\"><code>\ncreateCanvas(displayWidth, displayHeight);\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":390,"description":"<p>System variable that stores the width of the inner window, it maps to\nwindow.innerWidth.</p>\n","itemtype":"property","name":"windowWidth","type":"Number","readonly":"","example":["\n<div class=\"norender\"><code>\ncreateCanvas(windowWidth, windowHeight);\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":405,"description":"<p>System variable that stores the height of the inner window, it maps to\nwindow.innerHeight.</p>\n","itemtype":"property","name":"windowHeight","type":"Number","readonly":"","example":["\n<div class=\"norender\"><code>\ncreateCanvas(windowWidth, windowHeight);\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":421,"description":"<p>The <a href=\"#/p5/windowResized\">windowResized()</a> function is called once\nevery time the browser window is resized. This is a good place to resize the\ncanvas or do any other adjustments to accommodate the new window size.</p>\n","itemtype":"method","name":"windowResized","params":[{"name":"event","description":"<p>optional Event callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div class=\"norender\"><code>\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</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":476,"description":"<p>System variable that stores the width of the drawing canvas. This value\nis set by the first parameter of the <a href=\"#/p5/createCanvas\">createCanvas()</a> function.\nFor example, the function call createCanvas(320, 240) sets the width\nvariable to the value 320. The value of width defaults to 100 if\n<a href=\"#/p5/createCanvas\">createCanvas()</a> is not used in a program.</p>\n","itemtype":"property","name":"width","type":"Number","readonly":"","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":488,"description":"<p>System variable that stores the height of the drawing canvas. This value\nis set by the second parameter of the <a href=\"#/p5/createCanvas\">createCanvas()</a> function. For\nexample, the function call createCanvas(320, 240) sets the height\nvariable to the value 240. The value of height defaults to 100 if\n<a href=\"#/p5/createCanvas\">createCanvas()</a> is not used in a program.</p>\n","itemtype":"property","name":"height","type":"Number","readonly":"","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":500,"description":"<p>If argument is given, sets the sketch to fullscreen or not based on the\nvalue of the argument. If no argument is given, returns the current\nfullscreen state. Note that due to browser restrictions this can only\nbe called on user input, for example, on mouse press like the example\nbelow.</p>\n","itemtype":"method","name":"fullscreen","params":[{"name":"val","description":"<p>whether the sketch should be in fullscreen mode\nor not</p>\n","type":"Boolean","optional":true}],"return":{"description":"current fullscreen state","type":"Boolean"},"example":["\n<div>\n<code>\n// Clicking in the box toggles fullscreen on and off.\nfunction setup() {\n  background(200);\n}\nfunction mousePressed() {\n  if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n    let fs = fullscreen();\n    fullscreen(!fs);\n  }\n}\n</code>\n</div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":550,"description":"<p>Sets the pixel scaling for high pixel density displays. By default\npixel density is set to match display density, call pixelDensity(1)\nto turn this off. Calling <a href=\"#/p5/pixelDensity\">pixelDensity()</a> with no arguments returns\nthe current pixel density of the sketch.</p>\n","itemtype":"method","name":"pixelDensity","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  pixelDensity(1);\n  createCanvas(100, 100);\n  background(200);\n  ellipse(width / 2, height / 2, 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  pixelDensity(3.0);\n  createCanvas(100, 100);\n  background(200);\n  ellipse(width / 2, height / 2, 50, 50);\n}\n</code>\n</div>"],"alt":"fuzzy 50x50 white ellipse with black outline in center of canvas.\nsharp 50x50 white ellipse with black outline in center of canvas.","class":"p5","module":"Environment","submodule":"Environment","overloads":[{"line":550,"params":[{"name":"val","description":"<p>whether or how much the sketch should scale</p>\n","type":"Number"}],"chainable":1},{"line":586,"params":[],"return":{"description":"current pixel density of the sketch","type":"Number"}}]},{"file":"src/core/environment.js","line":605,"description":"<p>Returns the pixel density of the current display the sketch is running on.</p>\n","itemtype":"method","name":"displayDensity","return":{"description":"current pixel density of the display","type":"Number"},"example":["\n<div>\n<code>\nfunction setup() {\n  let density = displayDensity();\n  pixelDensity(density);\n  createCanvas(100, 100);\n  background(200);\n  ellipse(width / 2, height / 2, 50, 50);\n}\n</code>\n</div>"],"alt":"50x50 white ellipse with black outline in center of canvas.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":660,"description":"<p>Gets the current URL. Note: when using the\np5 Editor, this will return an empty object because the sketch\nis embedded in an iframe. It will work correctly if you view the\nsketch using sketch the edtior's present or share URLs.</p>\n","itemtype":"method","name":"getURL","return":{"description":"url","type":"String"},"example":["\n<div>\n<code>\nlet url;\nlet x = 100;\n\nfunction setup() {\n  fill(0);\n  noStroke();\n  url = getURL();\n}\n\nfunction draw() {\n  background(200);\n  text(url, x, height / 2);\n  x--;\n}\n</code>\n</div>"],"alt":"current url (http://p5js.org/reference/#/p5/getURL) moves right to left.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":691,"description":"<p>Gets the current URL path as an array. Note: when using the\np5 Editor, this will return an empty object because the sketch\nis embedded in an iframe. It will work correctly if you view the\nsketch using sketch the edtior's present or share URLs.</p>\n","itemtype":"method","name":"getURLPath","return":{"description":"path components","type":"String[]"},"example":["\n<div class='norender'><code>\nfunction setup() {\n  let urlPath = getURLPath();\n  for (let i = 0; i < urlPath.length; i++) {\n    text(urlPath[i], 10, i * 20 + 20);\n  }\n}\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":713,"description":"<p>Gets the current URL params as an Object. Note: when using the\np5 Editor, this will return an empty object because the sketch\nis embedded in an iframe. It will work correctly if you view the\nsketch using sketch the edtior's present or share URLs.</p>\n","itemtype":"method","name":"getURLParams","return":{"description":"URL params","type":"Object"},"example":["\n<div class='norender notest'>\n<code>\n// Example: http://p5js.org?year=2014&month=May&day=15\n\nfunction setup() {\n  let params = getURLParams();\n  text(params.day, 10, 20);\n  text(params.month, 10, 40);\n  text(params.year, 10, 60);\n}\n</code>\n</div>"],"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":"<p>This is our i18next \"backend\" plugin. It tries to fetch languages\nfrom a CDN.</p>\n","class":"p5","module":"Environment"},{"file":"src/core/internationalization.js","line":126,"description":"<p>Set up our translation function, with loaded languages</p>\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":42,"description":"<p>Called directly before <a href=\"#/p5/setup\">setup()</a>, the <a href=\"#/p5/preload\">preload()</a> function is used to handle\nasynchronous loading of external files in a blocking way. If a preload\nfunction is defined, <a href=\"#/p5/setup\">setup()</a> will wait until any load calls within have\nfinished. Nothing besides load calls (<a href=\"#/p5/loadImage\">loadImage</a>, <a href=\"#/p5/loadJSON\">loadJSON</a>, <a href=\"#/p5/loadFont\">loadFont</a>,\n<a href=\"#/p5/loadStrings\">loadStrings</a>, etc.) should be inside the preload function. If asynchronous\nloading is preferred, the load methods can instead be called in <a href=\"#/p5/setup\">setup()</a>\nor anywhere else with the use of a callback parameter.</p>\n<p>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 <a href=\"http://bit.ly/2kQ6Nio\">here</a>.</p>\n","itemtype":"method","name":"preload","example":["\n<div><code>\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</code></div>"],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":83,"description":"<p>The <a href=\"#/p5/setup\">setup()</a> 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 <a href=\"#/p5/setup\">setup()</a> function for each program and it shouldn't\nbe called again after its initial execution.</p>\n<p>Note: Variables declared within <a href=\"#/p5/setup\">setup()</a> are not accessible within other\nfunctions, including <a href=\"#/p5/draw\">draw()</a>.</p>\n","itemtype":"method","name":"setup","example":["\n<div><code>\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</code></div>"],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":114,"description":"<p>Called directly after <a href=\"#/p5/setup\">setup()</a>, the <a href=\"#/p5/draw\">draw()</a> function continuously executes\nthe lines of code contained inside its block until the program is stopped\nor <a href=\"#/p5/noLoop\">noLoop()</a> is called. Note if <a href=\"#/p5/noLoop\">noLoop()</a> is called in <a href=\"#/p5/setup\">setup()</a>, <a href=\"#/p5/draw\">draw()</a> will\nstill be executed once before stopping. <a href=\"#/p5/draw\">draw()</a> is called automatically and\nshould never be called explicitly.</p>\n<p>It should always be controlled with <a href=\"#/p5/noLoop\">noLoop()</a>, <a href=\"#/p5/redraw\">redraw()</a> and <a href=\"#/p5/loop\">loop()</a>. After\n<a href=\"#/p5/noLoop\">noLoop()</a> stops the code in <a href=\"#/p5/draw\">draw()</a> from executing, <a href=\"#/p5/redraw\">redraw()</a> causes the\ncode inside <a href=\"#/p5/draw\">draw()</a> to execute once, and <a href=\"#/p5/loop\">loop()</a> will cause the code\ninside <a href=\"#/p5/draw\">draw()</a> to resume executing continuously.</p>\n<p>The number of times <a href=\"#/p5/draw\">draw()</a> executes in each second may be controlled with\nthe <a href=\"#/p5/frameRate\">frameRate()</a> function.</p>\n<p>There can only be one <a href=\"#/p5/draw\">draw()</a> function for each sketch, and <a href=\"#/p5/draw\">draw()</a> must\nexist if you want the code to run continuously, or to process events such\nas <a href=\"#/p5/mousePressed\">mousePressed()</a>. Sometimes, you might have an empty call to <a href=\"#/p5/draw\">draw()</a> in\nyour program, as shown in the above example.</p>\n<p>It is important to note that the drawing coordinate system will be reset\nat the beginning of each <a href=\"#/p5/draw\">draw()</a> call. If any transformations are performed\nwithin <a href=\"#/p5/draw\">draw()</a> (ex: scale, rotate, translate), their effects will be\nundone at the beginning of <a href=\"#/p5/draw\">draw()</a>, so transformations will not accumulate\nover time. On the other hand, styling applied (ex: fill, stroke, etc) will\nremain in effect.</p>\n","itemtype":"method","name":"draw","example":["\n<div><code>\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</code></div>"],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":415,"description":"<p>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.</p>\n","itemtype":"method","name":"remove","example":["\n<div class='norender'><code>\nfunction draw() {\n  ellipse(50, 50, 10, 10);\n}\n\nfunction mousePressed() {\n  remove(); // remove whole sketch on mouse press\n}\n</code></div>"],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":694,"description":"<p>Allows for the friendly error system (FES) to be turned off when creating a sketch,\nwhich can give a significant boost to performance when needed.\nSee <a href='https://github.com/processing/p5.js/wiki/Optimizing-p5.js-Code-for-Performance#disable-the-friendly-error-system-fes'>\ndisabling the friendly error system</a>.</p>\n","itemtype":"property","name":"disableFriendlyErrors","type":"Boolean","example":["\n<div class=\"norender notest\"><code>\np5.disableFriendlyErrors = true;\n\nfunction setup() {\n  createCanvas(100, 50);\n}\n</code></div>"],"class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/p5.Element.js","line":21,"description":"<p>Underlying HTML element. All normal HTML methods can be called on this.</p>\n","example":["\n<div>\n<code>\nfunction setup() {\n  let c = createCanvas(50, 50);\n  c.elt.style.border = '5px solid red';\n}\n\nfunction draw() {\n  background(220);\n}\n</code>\n</div>"],"itemtype":"property","name":"elt","readonly":"","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":47,"description":"<p>Attaches the element to the parent specified. A way of setting\n the container for the element. Accepts either a string ID, DOM\n node, or <a href=\"#/p5.Element\">p5.Element</a>. If no arguments given, parent node is returned.\n For more ways to position the canvas, see the\n <a href='https://github.com/processing/p5.js/wiki/Positioning-your-canvas'>\n positioning the canvas</a> wiki page.</p>\n","itemtype":"method","name":"parent","chainable":1,"example":["\n <div class=\"norender notest\"><code>\n // Add the following comment to html file.\n // &lt;div id=\"myContainer\">&lt;/div>\n// The js code\n let cnv = createCanvas(100, 100);\n cnv.parent('myContainer');\n </code></div>\n<div class='norender'><code>\n let div0 = createDiv('this is the parent');\n let div1 = createDiv('this is the child');\n div1.parent(div0); // use p5.Element\n </code></div>\n<div class='norender'><code>\n let div0 = createDiv('this is the parent');\n div0.id('apples');\n let div1 = createDiv('this is the child');\n div1.parent('apples'); // use id\n </code></div>\n<div class='norender notest'><code>\n let elt = document.getElementById('myParentDiv');\n let div1 = createDiv('this is the child');\n div1.parent(elt); // use element from page\n </code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":47,"params":[{"name":"parent","description":"<p>the ID, DOM node, or <a href=\"#/p5.Element\">p5.Element</a>\n                         of desired parent element</p>\n","type":"String|p5.Element|Object"}],"chainable":1},{"line":93,"params":[],"return":{"description":"","type":"p5.Element"}}]},{"file":"src/core/p5.Element.js","line":114,"description":"<p>Sets the ID of the element. If no ID argument is passed in, it instead\n returns the current ID of the element.\n Note that only one element can have a particular id in a page.\n The <a href=\"#/p5.Element/class\">.class()</a> function can be used\n to identify multiple elements with the same class name.</p>\n","itemtype":"method","name":"id","chainable":1,"example":["\n <div class='norender'><code>\n function setup() {\n   let cnv = createCanvas(100, 100);\n   // Assigns a CSS selector ID to\n   // the canvas element.\n   cnv.id('mycanvas');\n }\n </code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":114,"params":[{"name":"id","description":"<p>ID of the element</p>\n","type":"String"}],"chainable":1},{"line":139,"params":[],"return":{"description":"the id of the element","type":"String"}}]},{"file":"src/core/p5.Element.js","line":154,"description":"<p>Adds given class to the element. If no class argument is passed in, it\n instead returns a string containing the current class(es) of the element.</p>\n","itemtype":"method","name":"class","chainable":1,"example":["\n <div class='norender'><code>\n function setup() {\n   let cnv = createCanvas(100, 100);\n   // Assigns a CSS selector class 'small'\n   // to the canvas element.\n   cnv.class('small');\n }\n </code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":154,"params":[{"name":"class","description":"<p>class to add</p>\n","type":"String"}],"chainable":1},{"line":176,"params":[],"return":{"description":"the class of the element","type":"String"}}]},{"file":"src/core/p5.Element.js","line":189,"description":"<p>The .<a href=\"#/p5.Element/mousePressed\">mousePressed()</a> function is called\nonce after every time a mouse button is pressed over the element. Some mobile\nbrowsers may also trigger this event on a touch screen, if the user performs\na quick tap. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"mousePressed","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               pressed over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mousePressed(changeGray); // attach listener for\n  // canvas click only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any click anywhere\nfunction mousePressed() {\n  d = d + 10;\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":246,"description":"<p>The .<a href=\"#/p5.Element/doubleClicked\">doubleClicked()</a> function is called once after every time a\nmouse button is pressed twice over the element. This can be used to\nattach element and action specific event listeners.</p>\n","itemtype":"method","name":"doubleClicked","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               double clicked over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"return":{"description":"","type":"p5.Element"},"example":["\n<div class='norender'><code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.doubleClicked(changeGray); // attach listener for\n  // canvas double click only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any double click anywhere\nfunction doubleClicked() {\n  d = d + 10;\n}\n\n// this function fires only when cnv is double clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":292,"description":"<p>The <a href=\"#/p5.Element/mouseWheel\">mouseWheel()</a> function is called\nonce after every time a mouse wheel is scrolled over the element. This can\nbe used to attach element specific event listeners.</p>\n<p>The function accepts a callback function as argument which will be executed\nwhen the <code>wheel</code> event is triggered on the element, the callback function is\npassed one argument <code>event</code>. The <code>event.deltaY</code> property returns negative\nvalues if the mouse wheel is rotated up or away from the user and positive\nin the other direction. The <code>event.deltaX</code> does the same as <code>event.deltaY</code>\nexcept it reads the horizontal wheel scroll of the mouse wheel.</p>\n<p>On OS X with \"natural\" scrolling enabled, the <code>event.deltaY</code> values are\nreversed.</p>\n","itemtype":"method","name":"mouseWheel","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               scrolled over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseWheel(changeSize); // attach listener for\n  // activity on canvas only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with mousewheel movement\n// anywhere on screen\nfunction mouseWheel() {\n  g = g + 10;\n}\n\n// this function fires with mousewheel movement\n// over canvas only\nfunction changeSize(event) {\n  if (event.deltaY > 0) {\n    d = d + 10;\n  } else {\n    d = d - 10;\n  }\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":354,"description":"<p>The <a href=\"#/p5.Element/mouseReleased\">mouseReleased()</a> function is\ncalled once after every time a mouse button is released over the element.\nSome mobile browsers may also trigger this event on a touch screen, if the\nuser performs a quick tap. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"mouseReleased","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               released over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseReleased(changeGray); // attach listener for\n  // activity on canvas only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires after the mouse has been\n// released\nfunction mouseReleased() {\n  d = d + 10;\n}\n\n// this function fires after the mouse has been\n// released while on canvas\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":403,"description":"<p>The .<a href=\"#/p5.Element/mouseClicked\">mouseClicked()</a> function is\ncalled once after a mouse button is pressed and released over the element.\nSome mobile browsers may also trigger this event on a touch screen, if the\nuser performs a quick tap.This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"mouseClicked","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               clicked over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseClicked(changeGray); // attach listener for\n  // activity on canvas only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires after the mouse has been\n// clicked anywhere\nfunction mouseClicked() {\n  d = d + 10;\n}\n\n// this function fires after the mouse has been\n// clicked on canvas\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code>\n</div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":454,"description":"<p>The .<a href=\"#/p5.Element/mouseMoved\">mouseMoved()</a> function is called once every time a\nmouse moves over the element. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"mouseMoved","params":[{"name":"fxn","description":"<p>function to be fired when a mouse moves\n                               over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d = 30;\nlet g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseMoved(changeSize); // attach listener for\n  // activity on canvas only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  fill(200);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires when mouse moves anywhere on\n// page\nfunction mouseMoved() {\n  g = g + 5;\n  if (g > 255) {\n    g = 0;\n  }\n}\n\n// this function fires when mouse moves over canvas\nfunction changeSize() {\n  d = d + 2;\n  if (d > 100) {\n    d = 0;\n  }\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":510,"description":"<p>The .<a href=\"#/p5.Element/mouseOver\">mouseOver()</a> function is called once after every time a\nmouse moves onto the element. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"mouseOver","params":[{"name":"fxn","description":"<p>function to be fired when a mouse moves\n                               onto the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseOver(changeGray);\n  d = 10;\n}\n\nfunction draw() {\n  ellipse(width / 2, height / 2, d, d);\n}\n\nfunction changeGray() {\n  d = d + 10;\n  if (d > 100) {\n    d = 0;\n  }\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":551,"description":"<p>The .<a href=\"#/p5.Element/mouseOut\">mouseOut()</a> function is called once after every time a\nmouse moves off the element. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"mouseOut","params":[{"name":"fxn","description":"<p>function to be fired when a mouse\n                               moves off of an element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseOut(changeGray);\n  d = 10;\n}\n\nfunction draw() {\n  ellipse(width / 2, height / 2, d, d);\n}\n\nfunction changeGray() {\n  d = d + 10;\n  if (d > 100) {\n    d = 0;\n  }\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":592,"description":"<p>The .<a href=\"#/p5.Element/touchStarted\">touchStarted()</a> function is called once after every time a touch is\nregistered. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"touchStarted","params":[{"name":"fxn","description":"<p>function to be fired when a touch\n                               starts over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d;\nlet g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.touchStarted(changeGray); // attach listener for\n  // canvas click only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any touch anywhere\nfunction touchStarted() {\n  d = d + 10;\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":639,"description":"<p>The .<a href=\"#/p5.Element/touchMoved\">touchMoved()</a> function is called once after every time a touch move is\nregistered. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"touchMoved","params":[{"name":"fxn","description":"<p>function to be fired when a touch moves over\n                               the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.touchMoved(changeGray); // attach listener for\n  // canvas click only\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":678,"description":"<p>The .<a href=\"#/p5.Element/touchEnded\">touchEnded()</a> function is called once after every time a touch is\nregistered. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"touchEnded","params":[{"name":"fxn","description":"<p>function to be fired when a touch ends\n                               over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d;\nlet g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.touchEnded(changeGray); // attach listener for\n  // canvas click only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any touch anywhere\nfunction touchEnded() {\n  d = d + 10;\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":725,"description":"<p>The .<a href=\"#/p5.Element/dragOver\">dragOver()</a> function is called once after every time a\nfile is dragged over the element. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"dragOver","params":[{"name":"fxn","description":"<p>function to be fired when a file is\n                               dragged over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div><code>\n// To test this sketch, simply drag a\n// file over the canvas\nfunction setup() {\n  let c = createCanvas(100, 100);\n  background(200);\n  textAlign(CENTER);\n  text('Drag file', width / 2, height / 2);\n  c.dragOver(dragOverCallback);\n}\n\n// This function will be called whenever\n// a file is dragged over the canvas\nfunction dragOverCallback() {\n  background(240);\n  text('Dragged over', width / 2, height / 2);\n}\n</code></div>"],"alt":"nothing displayed","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":763,"description":"<p>The .dragLeave() function is called once after every time a\ndragged file leaves the element area. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"dragLeave","params":[{"name":"fxn","description":"<p>function to be fired when a file is\n                               dragged off the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div><code>\n// To test this sketch, simply drag a file\n// over and then out of the canvas area\nfunction setup() {\n  let c = createCanvas(100, 100);\n  background(200);\n  textAlign(CENTER);\n  text('Drag file', width / 2, height / 2);\n  c.dragLeave(dragLeaveCallback);\n}\n\n// This function will be called whenever\n// a file is dragged out of the canvas\nfunction dragLeaveCallback() {\n  background(240);\n  text('Dragged off', width / 2, height / 2);\n}\n</code></div>"],"alt":"nothing displayed","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":827,"description":"<p>Helper fxn for sharing pixel methods</p>\n","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Graphics.js","line":70,"description":"<p>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 <a href='#/p5/draw'>draw()</a> will copy the behavior\nof the standard canvas.</p>\n","itemtype":"method","name":"reset","example":["\n\n<div><code>\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</code></div>"],"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":122,"description":"<p>Removes a Graphics object from the page and frees any resources\nassociated with it.</p>\n","itemtype":"method","name":"remove","example":["\n<div class='norender'><code>\nlet bg;\nfunction setup() {\n  bg = createCanvas(100, 100);\n  bg.background(0);\n  image(bg, 0, 0);\n  bg.remove();\n}\n</code></div>\n\n<div><code>\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</code></div>"],"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.Renderer.js","line":95,"description":"<p>Resize our canvas element.</p>\n","class":"p5.Renderer","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Renderer.js","line":344,"description":"<p>Helper fxn to check font type (system or otf)</p>\n","class":"p5.Renderer","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Renderer.js","line":396,"description":"<p>Helper fxn to measure ascent and descent.\nAdapted from <a href=\"http://stackoverflow.com/a/25355178\">http://stackoverflow.com/a/25355178</a></p>\n","class":"p5.Renderer","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Renderer2D.js","line":7,"description":"<p>p5.Renderer2D\nThe 2D graphics canvas renderer class.\nextends p5.Renderer</p>\n","class":"p5","module":"Rendering"},{"file":"src/core/p5.Renderer2D.js","line":402,"description":"<p>Generate a cubic Bezier representing an arc on the unit circle of total\nangle <code>size</code> radians, beginning <code>start</code> radians above the x-axis. Up to\nfour of these curves are combined to make a full arc.</p>\n<p>See <a href=\"http://www.joecridge.me/bezier.pdf\">www.joecridge.me/bezier.pdf</a> for an explanation of the method.</p>\n","class":"p5","module":"Rendering"},{"file":"src/core/reference.js","line":7,"description":"<p>Creates and names a new variable. A variable is a container for a value.</p>\n<p>Variables that are declared with <a href=\"#/p5/let\">let</a> will have block-scope.\nThis means that the variable only exists within the\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block\">\nblock</a> that it is created within.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let\">the MDN entry</a>:\nDeclares a block scope local variable, optionally initializing it to a value.</p>\n","itemtype":"property","name":"let","example":["\n<div class='norender'>\n<code>\nlet x = 2;\nconsole.log(x); // prints 2 to the console\nx = 1;\nconsole.log(x); // prints 1 to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":34,"description":"<p>Creates and names a new constant. Like a variable created with <a href=\"#/p5/let\">let</a>,\na constant that is created with <a href=\"#/p5/const\">const</a> 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 <code>let</code>, you cannot declare variables without value\nusing const.</p>\n<p>Constants have block-scope. This means that the constant only exists within\nthe <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block\">\nblock</a> that it is created within. A constant cannot be redeclared within a scope in which it\nalready exists.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const\">the MDN entry</a>:\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.</p>\n","itemtype":"property","name":"const","example":["\n<div class='norender'>\n<code>\n// define myFavNumber as a constant and give it the value 7\nconst myFavNumber = 7;\nconsole.log('my favorite number is: ' + myFavNumber);\n</code>\n</div>\n\n<div class='norender'>\n<code>\nconst bigCats = ['lion', 'tiger', 'panther'];\nbigCats.push('leopard');\nconsole.log(bigCats);\n// bigCats = ['cat']; // throws error as re-assigning not allowed for const\n</code>\n</div>\n\n<div class='norender'>\n<code>\nconst wordFrequency = {};\nwordFrequency['hello'] = 2;\nwordFrequency['bye'] = 1;\nconsole.log(wordFrequency);\n// wordFrequency = { 'a': 2, 'b': 3}; // throws error here\n</code>\n</div>"],"alt":"These examples do not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":87,"description":"<p>The strict equality operator <a href=\"#/p5/===\">===</a>\nchecks to see if two values are equal and of the same type.</p>\n<p>A comparison expression always evaluates to a <a href=\"#/p5/boolean\">boolean</a>.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">the MDN entry</a>:\nThe non-identity operator returns true if the operands are not equal and/or not of the same type.</p>\n<p>Note: In some examples around the web you may see a double-equals-sign\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality\">==</a>,\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.</p>\n","itemtype":"property","name":"===","example":["\n<div class='norender'>\n<code>\nconsole.log(1 === 1); // prints true to the console\nconsole.log(1 === '1'); // prints false to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":115,"description":"<p>The greater than operator <a href=\"#/p5/>\">></a>\nevaluates to true if the left value is greater than\nthe right value.</p>\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">\nThere is more info on comparison operators on MDN.</a>","itemtype":"property","name":">","example":["\n<div class='norender'>\n<code>\nconsole.log(100 > 1); // prints true to the console\nconsole.log(1 > 100); // prints false to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":137,"description":"<p>The greater than or equal to operator <a href=\"#/p5/>=\">>=</a>\nevaluates to true if the left value is greater than or equal to\nthe right value.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">There is more info on comparison operators on MDN.</a></p>\n","itemtype":"property","name":">=","example":["\n<div class='norender'>\n<code>\nconsole.log(100 >= 100); // prints true to the console\nconsole.log(101 >= 100); // prints true to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":158,"description":"<p>The less than operator <a href=\"#/p5/<\"><</a>\nevaluates to true if the left value is less than\nthe right value.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">There is more info on comparison operators on MDN.</a></p>\n","itemtype":"property","name":"<","example":["\n<div class='norender'>\n<code>\nconsole.log(1 < 100); // prints true to the console\nconsole.log(100 < 99); // prints false to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":179,"description":"<p>The less than or equal to operator <a href=\"#/p5/<=\"><=</a>\nevaluates to true if the left value is less than or equal to\nthe right value.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">There is more info on comparison operators on MDN.</a></p>\n","itemtype":"property","name":"<=","example":["\n<div class='norender'>\n<code>\nconsole.log(100 <= 100); // prints true to the console\nconsole.log(99 <= 100); // prints true to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":200,"description":"<p>The <a href=\"#/p5/if-else\">if-else</a> statement helps control the flow of your code.</p>\n<p>A condition is placed between the parenthesis following 'if',\nwhen that condition evalues to <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/truthy\">truthy</a>,\nthe code between the following curly braces is run.\nAlternatively, when the condition evaluates to <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Falsy\">falsy</a>,\nthe code between the curly braces of 'else' block is run instead. Writing an\nelse block is optional.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else\">the MDN entry</a>:\nThe 'if' statement executes a statement if a specified condition is truthy.\nIf the condition is falsy, another statement can be executed</p>\n","itemtype":"property","name":"if-else","example":["\n<div class='norender'>\n<code>\nlet a = 4;\nif (a > 0) {\n  console.log('positive');\n} else {\n  console.log('negative');\n}\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":231,"description":"<p>Creates and names a <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions\">function</a>.\nA <a href=\"#/p5/function\">function</a> is a set of statements that perform a task.</p>\n<p>Optionally, functions can have parameters. <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Parameter\">Parameters</a>\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.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function\">the MDN entry</a>:\nDeclares a function with the specified parameters.</p>\n","itemtype":"property","name":"function","example":["\n<div class='norender'>\n<code>\nlet myName = 'Hridi';\nfunction sayHello(name) {\n  console.log('Hello ' + name + '!');\n}\nsayHello(myName); // calling the function, prints \"Hello Hridi!\" to console.\n</code>\n</div>\n\n<div class='norender'>\n<code>\nlet square = number => number * number;\nconsole.log(square(5));\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":267,"description":"<p>Specifies the value to be returned by a function.\nFor more info checkout <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return\">\nthe MDN entry for return</a>.</p>\n","itemtype":"property","name":"return","example":["\n<div class='norender'>\n<code>\nfunction calculateSquare(x) {\n  return x * x;\n}\nconst result = calculateSquare(4); // returns 16\nconsole.log(result); // prints '16' to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":288,"description":"<p>A <a href=\"#/p5/boolean\">boolean</a> is one of the 7 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Primitive_values\">primitive data types</a> in Javascript.\nA boolean can only be <code>true</code> or <code>false</code>.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type\">the MDN entry</a>:\nBoolean represents a logical entity and can have two values: true, and false.</p>\n","itemtype":"property","name":"boolean","example":["\n<div class='norender'>\n<code>\nlet myBoolean = false;\nconsole.log(typeof myBoolean); // prints 'boolean' to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":309,"description":"<p>A <a href=\"#/p5/string\">string</a> is one of the 7 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Primitive_values\">primitive data types</a> 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(\").</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/string\">the MDN entry</a>:\nA string is a sequence of characters used to represent text.</p>\n","itemtype":"property","name":"string","example":["\n<div class='norender'>\n<code>\nlet mood = 'chill';\nconsole.log(typeof mood); // prints 'string' to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":331,"description":"<p>A <a href=\"#/p5/number\">number</a> is one of the 7 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Primitive_values\">primitive data types</a> in Javascript.\nA number can be a whole number or a decimal number.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Glossary/number\">The MDN entry for number</a></p>\n","itemtype":"property","name":"number","example":["\n<div class='norender'>\n<code>\nlet num = 46.5;\nconsole.log(typeof num); // prints 'number' to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":351,"description":"<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics\">MDN's object basics</a>:\n An <a href=\"#/p5/object\">object</a> 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.)</p>\n","itemtype":"property","name":"object","example":["\n <div class='norender'>\n <code>\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 </code>\n </div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":379,"description":"<p>Creates and names a <a href=\"#/p5/class\">class</a> which is a template for\nthe creation of <a href=\"#/p5/objects\">objects</a>.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class\">the MDN entry</a>:\nThe class declaration creates a new Class with a given name using\nprototype-based inheritance.</p>\n","itemtype":"property","name":"class","example":["\n<div class='norender'>\n<code>\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</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":408,"description":"<p><a href=\"#/p5/for\">for</a> creates a loop that is useful for executing one\nsection of code multiple times.</p>\n<p>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 seperated by ; (semi-colon).In case of an empty expression,\nonly a semi-colon is written.</p>\n<p>The code inside of the loop body (in between the curly braces) is executed between the evaluation of the second\nand third expression.</p>\n<p>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 <a href=\"#/p5/for\">for</a> 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.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for\">the MDN entry</a>:\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.</p>\n","itemtype":"property","name":"for","example":["\n<div class='norender'>\n<code>\nfor (let i = 0; i < 9; i++) {\n  console.log(i);\n}\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":448,"description":"<p><a href=\"#/p5/while\">while</a> creates a loop that is useful for executing\none section of code multiple times.</p>\n<p>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 <a href=\"#/p5/while\">while</a>, so if the condition is initially false\nthe loop body, or statement, will never execute.</p>\n<p>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.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/while\">the MDN entry</a>:\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.</p>\n","itemtype":"property","name":"while","example":["\n<div class='norender'>\n<code>\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</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":490,"description":"<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify\">the MDN entry</a>:\nThe JSON.stringify() method converts a JavaScript object or value to a JSON <a href=\"#/p5/string\">string</a>.</p>\n","itemtype":"method","name":"stringify","static":1,"params":[{"name":"object","description":"<p>:Javascript object that you would like to convert to JSON</p>\n","type":"Object"}],"example":["\n<div class='norender'>\n<code>\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</code>\n</div>"],"alt":"This example does not render anything","class":"JSON","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":512,"description":"<p>Prints a message to your browser's web console. When using p5, you can use <a href=\"#/p5/print\">print</a>\nand <a href=\"#/p5/console/log\">console.log</a> interchangeably.</p>\n<p>The console is opened differently depending on which browser you are using.\nHere are links on how to open the console in <a href=\"https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Opening_the_Web_Console\">Firefox</a>\n, <a href=\"https://developers.google.com/web/tools/chrome-devtools/open\">Chrome</a>, <a href=\"https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/console\">Edge</a>,\nand <a href=\"https://support.apple.com/en-ca/guide/safari/sfri20948/mac\">Safari</a>.\nWith the <a href=\"https://editor.p5js.org/\">online p5 editor</a> the console\nis embedded directly in the page underneath the code editor.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Console/log\">the MDN entry</a>:\nThe Console method log() outputs a message to the web console. The message may\nbe a single <a href=\"#/p5/string\">string</a> (with optional substitution values),\nor it may be any one or more JavaScript <a href=\"#/p5/object\">objects</a>.</p>\n","itemtype":"method","name":"log","static":1,"params":[{"name":"message","description":"<p>:Message that you would like to print to the console</p>\n","type":"String|Expression|Object"}],"example":["\n<div class='norender'>\n<code>\nlet myNum = 5;\nconsole.log(myNum); // prints 5 to the console\nconsole.log(myNum + 12); // prints 17 to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"console","module":"Foundation","submodule":"Foundation"},{"file":"src/core/rendering.js","line":15,"description":"<p>Creates a canvas element in the document, and sets the dimensions of it\nin pixels. This method should be called only once at the start of setup.\nCalling <a href=\"#/p5/createCanvas\">createCanvas</a> more than once in a\nsketch will result in very unpredictable behavior. If you want more than\none drawing canvas you could use <a href=\"#/p5/createGraphics\">createGraphics</a>\n(hidden by default but it can be shown).</p>\n<p>Important note: in 2D mode (i.e. when <code>p5.Renderer</code> is not set) the origin (0,0)\nis positioned at the top left of the screen. In 3D mode (i.e. when <code>p5.Renderer</code>\nis set to <code>WEBGL</code>), the origin is positioned at the center of the canvas.\nSee <a href=\"https://github.com/processing/p5.js/issues/1545\">this issue</a> for more information.</p>\n<p>The system variables width and height are set by the parameters passed to this\nfunction. If <a href=\"#/p5/createCanvas\">createCanvas()</a> is not used, the\nwindow will be given a default size of 100x100 pixels.</p>\n<p>For more ways to position the canvas, see the\n<a href='https://github.com/processing/p5.js/wiki/Positioning-your-canvas'>\npositioning the canvas</a> wiki page.</p>\n","itemtype":"method","name":"createCanvas","params":[{"name":"w","description":"<p>width of the canvas</p>\n","type":"Number"},{"name":"h","description":"<p>height of the canvas</p>\n","type":"Number"},{"name":"renderer","description":"<p>either P2D or WEBGL</p>\n","type":"Constant","optional":true}],"return":{"description":"","type":"p5.Renderer"},"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 50);\n  background(153);\n  line(0, 0, width, height);\n}\n</code>\n</div>"],"alt":"Black line extending from top-left of canvas to bottom right.","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":125,"description":"<p>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.</p>\n","itemtype":"method","name":"resizeCanvas","params":[{"name":"w","description":"<p>width of the canvas</p>\n","type":"Number"},{"name":"h","description":"<p>height of the canvas</p>\n","type":"Number"},{"name":"noRedraw","description":"<p>don't redraw the canvas immediately</p>\n","type":"Boolean","optional":true}],"example":["\n<div class=\"norender\"><code>\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</code></div>"],"alt":"No image displayed.","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":183,"description":"<p>Removes the default canvas for a p5 sketch that doesn't require a canvas</p>\n","itemtype":"method","name":"noCanvas","example":["\n<div>\n<code>\nfunction setup() {\n  noCanvas();\n}\n</code>\n</div>"],"alt":"no image displayed","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":204,"description":"<p>Creates and returns a new p5.Renderer object. Use this class if you need\nto draw into an off-screen graphics buffer. The two parameters define the\nwidth and height in pixels.</p>\n","itemtype":"method","name":"createGraphics","params":[{"name":"w","description":"<p>width of the offscreen graphics buffer</p>\n","type":"Number"},{"name":"h","description":"<p>height of the offscreen graphics buffer</p>\n","type":"Number"},{"name":"renderer","description":"<p>either P2D or WEBGL\n                              undefined defaults to p2d</p>\n","type":"Constant","optional":true}],"return":{"description":"offscreen graphics buffer","type":"p5.Graphics"},"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"4 grey squares alternating light and dark grey. White quarter circle mid-left.","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":243,"description":"<p>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):</p>\n<ul>\n<li><code>BLEND</code> - linear interpolation of colours: C =\nA*factor + B. <b>This is the default blending mode.</b></li>\n<li><code>ADD</code> - sum of A and B</li>\n<li><code>DARKEST</code> - only the darkest colour succeeds: C =\nmin(A*factor, B).</li>\n<li><code>LIGHTEST</code> - only the lightest colour succeeds: C =\nmax(A*factor, B).</li>\n<li><code>DIFFERENCE</code> - subtract colors from underlying image.</li>\n<li><code>EXCLUSION</code> - similar to <code>DIFFERENCE</code>, but less\nextreme.</li>\n<li><code>MULTIPLY</code> - multiply the colors, result will always be\ndarker.</li>\n<li><code>SCREEN</code> - opposite multiply, uses inverse values of the\ncolors.</li>\n<li><code>REPLACE</code> - the pixels entirely replace the others and\ndon't utilize alpha (transparency) values.</li>\n<li><code>REMOVE</code> - removes pixels from B with the alpha strength of A.</li>\n<li><code>OVERLAY</code> - mix of <code>MULTIPLY</code> and <code>SCREEN\n</code>. Multiplies dark values, and screens light values. <em>(2D)</em></li>\n<li><code>HARD_LIGHT</code> - <code>SCREEN</code> when greater than 50%\ngray, <code>MULTIPLY</code> when lower. <em>(2D)</em></li>\n<li><code>SOFT_LIGHT</code> - mix of <code>DARKEST</code> and\n<code>LIGHTEST</code>. Works like <code>OVERLAY</code>, but not as harsh. <em>(2D)</em>\n</li>\n<li><code>DODGE</code> - lightens light tones and increases contrast,\nignores darks. <em>(2D)</em></li>\n<li><code>BURN</code> - darker areas are applied, increasing contrast,\nignores lights. <em>(2D)</em></li>\n<li><code>SUBTRACT</code> - remainder of A and B <em>(3D)</em></li>\n</ul>\n\n<p><em>(2D)</em> indicates that this blend mode <b>only</b> works in the 2D renderer.<br>\n<em>(3D)</em> indicates that this blend mode <b>only</b> works in the WEBGL renderer.</p>\n","itemtype":"method","name":"blendMode","params":[{"name":"mode","description":"<p>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</p>\n","type":"Constant"}],"example":["\n<div>\n<code>\nblendMode(LIGHTEST);\nstrokeWeight(30);\nstroke(80, 150, 255);\nline(25, 25, 75, 75);\nstroke(255, 50, 50);\nline(75, 25, 25, 75);\n</code>\n</div>\n\n<div>\n<code>\nblendMode(MULTIPLY);\nstrokeWeight(30);\nstroke(80, 150, 255);\nline(25, 25, 75, 75);\nstroke(255, 50, 50);\nline(75, 25, 25, 75);\n</code>\n</div>"],"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":326,"description":"<p>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 <code>drawingContext</code>, as in the example shown. This is\nthe equivalent of calling <code>canvas.getContext('2d');</code> or <code>canvas.getContext('webgl');</code>.\nSee this\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D\">\nreference for the native canvas API</a> for possible drawing functions you can call.</p>\n","itemtype":"property","name":"drawingContext","example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"white ellipse with shadow blur effect around edges","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/shim.js","line":18,"description":"<p>shim for Uint8ClampedArray.slice\n(allows arrayCopy to work with pixels[])\nwith thanks to <a href=\"http://halfpapstudios.com/blog/tag/html5-canvas/\">http://halfpapstudios.com/blog/tag/html5-canvas/</a>\nEnumerable set to false to protect for...in from\nUint8ClampedArray.prototype pollution.</p>\n","class":"p5","module":"Rendering"},{"file":"src/core/shim.js","line":39,"description":"<p>this is implementation of Object.assign() which is unavailable in\nIE11 and (non-Chrome) Android browsers.\nThe assign() method is used to copy the values of all enumerable\nown properties from one or more source objects to a target object.\nIt will return the target object.\nModified from <a href=\"https://github.com/ljharb/object.assign\">https://github.com/ljharb/object.assign</a></p>\n","class":"p5","module":"Rendering"},{"file":"src/core/structure.js","line":10,"description":"<p>Stops p5.js from continuously executing the code within <a href=\"#/p5/draw\">draw()</a>.\nIf <a href=\"#/p5/loop\">loop()</a> is called, the code in <a href=\"#/p5/draw\">draw()</a>\nbegins to run continuously again. If using <a href=\"#/p5/noLoop\">noLoop()</a>\nin <a href=\"#/p5/setup\">setup()</a>, it should be the last line inside the block.</p>\n<p>When <a href=\"#/p5/noLoop\">noLoop()</a> is used, it's not possible to manipulate\nor access the screen inside event handling functions such as\n<a href=\"#/p5/mousePressed\">mousePressed()</a> or\n<a href=\"#/p5/keyPressed\">keyPressed()</a>. Instead, use those functions to\ncall <a href=\"#/p5/redraw\">redraw()</a> or <a href=\"#/p5/loop\">loop()</a>,\nwhich will run <a href=\"#/p5/draw\">draw()</a>, which can update the screen\nproperly. This means that when <a href=\"#/p5/noLoop\">noLoop()</a> has been\ncalled, no drawing can happen, and functions like <a href=\"#/p5/saveFrames\">saveFrames()</a>\nor <a href=\"#/p5/loadPixels\">loadPixels()</a> may not be used.</p>\n<p>Note that if the sketch is resized, <a href=\"#/p5/redraw\">redraw()</a> will\nbe called to update the sketch, even after <a href=\"#/p5/noLoop\">noLoop()</a>\nhas been specified. Otherwise, the sketch would enter an odd state until\n<a href=\"#/p5/loop\">loop()</a> was called.</p>\n<p>Use <a href=\"#/p5/isLooping\">isLooping()</a> to check current state of loop().</p>\n","itemtype":"method","name":"noLoop","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n  background(200);\n  noLoop();\n}\n\nfunction draw() {\n  line(10, 10, 90, 90);\n}\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":83,"description":"<p>By default, p5.js loops through draw() continuously, executing the code within\nit. However, the <a href=\"#/p5/draw\">draw()</a> loop may be stopped by calling\n<a href=\"#/p5/noLoop\">noLoop()</a>. In that case, the <a href=\"#/p5/draw\">draw()</a>\nloop can be resumed with loop().</p>\n<p>Avoid calling loop() from inside setup().</p>\n<p>Use <a href=\"#/p5/isLooping\">isLooping()</a> to check current state of loop().</p>\n","itemtype":"method","name":"loop","example":["\n<div>\n<code>\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</code>\n</div>"],"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":134,"description":"<p>By default, p5.js loops through <a href=\"#/p5/draw\">draw()</a> continuously,\nexecuting the code within it. If the sketch is stopped with\n<a href=\"#/p5/noLoop\">noLoop()</a> or resumed with <a href=\"#/p5/loop\">loop()</a>,\nisLooping() returns the current state for use within custom event handlers.</p>\n","itemtype":"method","name":"isLooping","example":["\n<div>\n<code>\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</code>\n</div>"],"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":"<p>The <a href=\"#/p5/push\">push()</a> function saves the current drawing style\nsettings and transformations, while <a href=\"#/p5/pop\">pop()</a> 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 <a href=\"#/p5/push\">push()</a>, it builds on\nthe current style and transform information. The <a href=\"#/p5/push\">push()</a>\nand <a href=\"#/p5/pop\">pop()</a> functions can be embedded to provide more\ncontrol. (See the second example for a demonstration.)</p>\n<p><a href=\"#/p5/push\">push()</a> stores information related to the current transformation state\nand style settings controlled by the following functions:\n<a href=\"#/p5/fill\">fill()</a>,\n<a href=\"#/p5/noFill\">noFill()</a>,\n<a href=\"#/p5/noStroke\">noStroke()</a>,\n<a href=\"#/p5/stroke\">stroke()</a>,\n<a href=\"#/p5/tint\">tint()</a>,\n<a href=\"#/p5/noTint\">noTint()</a>,\n<a href=\"#/p5/strokeWeight\">strokeWeight()</a>,\n<a href=\"#/p5/strokeCap\">strokeCap()</a>,\n<a href=\"#/p5/strokeJoin\">strokeJoin()</a>,\n<a href=\"#/p5/imageMode\">imageMode()</a>,\n<a href=\"#/p5/rectMode\">rectMode()</a>,\n<a href=\"#/p5/ellipseMode\">ellipseMode()</a>,\n<a href=\"#/p5/colorMode\">colorMode()</a>,\n<a href=\"#/p5/textAlign\">textAlign()</a>,\n<a href=\"#/p5/textFont\">textFont()</a>,\n<a href=\"#/p5/textSize\">textSize()</a>,\n<a href=\"#/p5/textLeading\">textLeading()</a>,\n<a href=\"#/p5/applyMatrix\">applyMatrix()</a>,\n<a href=\"#/p5/resetMatrix\">resetMatrix()</a>,\n<a href=\"#/p5/rotate\">rotate()</a>,\n<a href=\"#/p5/scale\">scale()</a>,\n<a href=\"#/p5/shearX\">shearX()</a>,\n<a href=\"#/p5/shearY\">shearY()</a>,\n<a href=\"#/p5/translate\">translate()</a>,\n<a href=\"#/p5/noiseSeed\">noiseSeed()</a>.</p>\n<p>In WEBGL mode additional style settings are stored. These are controlled by the\nfollowing functions: <a href=\"#/p5/setCamera\">setCamera()</a>,\n<a href=\"#/p5/ambientLight\">ambientLight()</a>,\n<a href=\"#/p5/directionalLight\">directionalLight()</a>,\n<a href=\"#/p5/pointLight\">pointLight()</a>, <a href=\"#/p5/texture\">texture()</a>,\n<a href=\"#/p5/specularMaterial\">specularMaterial()</a>,\n<a href=\"#/p5/shininess\">shininess()</a>,\n<a href=\"#/p5/normalMaterial\">normalMaterial()</a>\nand <a href=\"#/p5/shader\">shader()</a>.</p>\n","itemtype":"method","name":"push","example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":"<p>The <a href=\"#/p5/push\">push()</a> function saves the current drawing style\nsettings and transformations, while <a href=\"#/p5/pop\">pop()</a> 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 <a href=\"#/p5/push\">push()</a>, it\nbuilds on the current style and transform information. The <a href=\"#/p5/push\">push()</a>\nand <a href=\"#/p5/pop\">pop()</a> functions can be embedded to provide more\ncontrol. (See the second example for a demonstration.)</p>\n<p><a href=\"#/p5/push\">push()</a> stores information related to the current transformation state\nand style settings controlled by the following functions:\n<a href=\"#/p5/fill\">fill()</a>,\n<a href=\"#/p5/noFill\">noFill()</a>,\n<a href=\"#/p5/noStroke\">noStroke()</a>,\n<a href=\"#/p5/stroke\">stroke()</a>,\n<a href=\"#/p5/tint\">tint()</a>,\n<a href=\"#/p5/noTint\">noTint()</a>,\n<a href=\"#/p5/strokeWeight\">strokeWeight()</a>,\n<a href=\"#/p5/strokeCap\">strokeCap()</a>,\n<a href=\"#/p5/strokeJoin\">strokeJoin()</a>,\n<a href=\"#/p5/imageMode\">imageMode()</a>,\n<a href=\"#/p5/rectMode\">rectMode()</a>,\n<a href=\"#/p5/ellipseMode\">ellipseMode()</a>,\n<a href=\"#/p5/colorMode\">colorMode()</a>,\n<a href=\"#/p5/textAlign\">textAlign()</a>,\n<a href=\"#/p5/textFont\">textFont()</a>,\n<a href=\"#/p5/textSize\">textSize()</a>,\n<a href=\"#/p5/textLeading\">textLeading()</a>,\n<a href=\"#/p5/applyMatrix\">applyMatrix()</a>,\n<a href=\"#/p5/resetMatrix\">resetMatrix()</a>,\n<a href=\"#/p5/rotate\">rotate()</a>,\n<a href=\"#/p5/scale\">scale()</a>,\n<a href=\"#/p5/shearX\">shearX()</a>,\n<a href=\"#/p5/shearY\">shearY()</a>,\n<a href=\"#/p5/translate\">translate()</a>,\n<a href=\"#/p5/noiseSeed\">noiseSeed()</a>.</p>\n<p>In WEBGL mode additional style settings are stored. These are controlled by\nthe following functions:\n<a href=\"#/p5/setCamera\">setCamera()</a>,\n<a href=\"#/p5/ambientLight\">ambientLight()</a>,\n<a href=\"#/p5/directionalLight\">directionalLight()</a>,\n<a href=\"#/p5/pointLight\">pointLight()</a>,\n<a href=\"#/p5/texture\">texture()</a>,\n<a href=\"#/p5/specularMaterial\">specularMaterial()</a>,\n<a href=\"#/p5/shininess\">shininess()</a>,\n<a href=\"#/p5/normalMaterial\">normalMaterial()</a> and\n<a href=\"#/p5/shader\">shader()</a>.</p>\n","itemtype":"method","name":"pop","example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":"<p>Executes the code within <a href=\"#/p5/draw\">draw()</a> one time. This\nfunction allows the program to update the display window only when necessary,\nfor example when an event registered by <a href=\"#/p5/mousePressed\">mousePressed()</a>\nor <a href=\"#/p5/keyPressed\">keyPressed()</a> occurs.</p>\n<p>In structuring a program, it only makes sense to call <a href=\"#/p5/redraw\">redraw()</a>\nwithin events such as <a href=\"#/p5/mousePressed\">mousePressed()</a>. This\nis because <a href=\"#/p5/redraw\">redraw()</a> does not run\n<a href=\"#/p5/draw\">draw()</a> immediately (it only sets a flag that indicates\nan update is needed).</p>\n<p>The <a href=\"#/p5/redraw\">redraw()</a> function does not work properly when\ncalled inside <a href=\"#/p5/draw\">draw()</a>.To enable/disable animations,\nuse <a href=\"#/p5/loop\">loop()</a> and <a href=\"#/p5/noLoop\">noLoop()</a>.</p>\n<p>In addition you can set the number of redraws per method call. Just\nadd an integer as single parameter for the number of redraws.</p>\n","itemtype":"method","name":"redraw","params":[{"name":"n","description":"<p>Redraw for n-times. The default value is 1.</p>\n","type":"Integer","optional":true}],"example":["\n<div><code>\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</code>\n</div>\n\n<div class='norender'>\n<code>\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</code>\n</div>"],"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":497,"description":"<p>The <code>p5()</code> 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<a target=\"blank\" href=\"https://www.youtube.com/watch?v=Su792jEauZg&feature=youtu.be\">\nDan Shiffman's Coding Train video tutorial</a> or this\n<a target=\"blank\" href=\"https://github.com/processing/p5.js/wiki/p5.js-overview#instantiation--namespace\">tutorial page</a>\nfor more info.</p>\n<p>By default, all p5.js functions are in the global namespace (i.e. bound to the window\nobject), meaning you can call them simply <code>ellipse()</code>, <code>fill()</code>, 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.</p>\n<p>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.</p>\n<p>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.</p>\n","itemtype":"method","name":"p5","params":[{"name":"sketch","description":"<p>a function containing a p5.js sketch</p>\n","type":"Object"},{"name":"node","description":"<p>ID or pointer to HTML DOM node to contain sketch in</p>\n","type":"String|Object"}],"example":["\n<div class='norender'><code>\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</code></div>"],"alt":"white rectangle on black background","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/transform.js","line":11,"description":"<p>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 <a href=\"https://en.wikipedia.org/wiki/Transformation_matrix\">\nWikipedia</a>.</p>\n<p>The naming of the arguments here follows the naming of the <a href=\n\"https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-transform\">\nWHATWG specification</a> and corresponds to a\ntransformation matrix of the\nform:</p>\n<blockquote>\n<p><img style=\"max-width: 150px\" src=\"assets/transformation-matrix.png\"\nalt=\"The transformation matrix used when applyMatrix is called\"/></p>\n</blockquote>\n","itemtype":"method","name":"applyMatrix","params":[{"name":"a","description":"<p>numbers which define the 2x3 matrix to be multiplied, or an array of numbers</p>\n","type":"Number|Array"},{"name":"b","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"},{"name":"c","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"},{"name":"d","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"},{"name":"e","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"},{"name":"f","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\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(  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  stroke(255);\n  box(50);\n}\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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"},{"file":"src/core/transform.js","line":168,"description":"<p>Replaces the current matrix with the identity matrix.</p>\n","itemtype":"method","name":"resetMatrix","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"A rotated retangle in the center with another at the top left corner","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":193,"description":"<p>Rotates a shape by the amount specified by the angle parameter. This\nfunction accounts for <a href=\"#/p5/angleMode\">angleMode</a>, so angles\ncan be entered in either RADIANS or DEGREES.</p>\n<p>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 accumulates the effect. For example, calling\nrotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI).\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n<p>Technically, <a href=\"#/p5/rotate\">rotate()</a> multiplies the current transformation matrix\nby a rotation matrix. This function can be further controlled by\nthe <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a>.</p>\n","itemtype":"method","name":"rotate","params":[{"name":"angle","description":"<p>the angle of rotation, specified in radians\n                       or degrees, depending on current angleMode</p>\n","type":"Number"},{"name":"axis","description":"<p>(in 3d) the axis to rotate around</p>\n","type":"p5.Vector|Number[]","optional":true}],"chainable":1,"example":["\n<div>\n<code>\ntranslate(width / 2, height / 2);\nrotate(PI / 3.0);\nrect(-26, -26, 52, 52);\n</code>\n</div>"],"alt":"white 52x52 rect with black outline at center rotated counter 45 degrees","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":232,"description":"<p>Rotates a shape around X axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.</p>\n<p>Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n","itemtype":"method","name":"rotateX","params":[{"name":"angle","description":"<p>the angle of rotation, specified in radians\n                       or degrees, depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(255);\n  rotateX(millis() / 1000);\n  box();\n}\n</code>\n</div>"],"alt":"3d box rotating around the x axis.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":268,"description":"<p>Rotates a shape around Y axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.</p>\n<p>Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n","itemtype":"method","name":"rotateY","params":[{"name":"angle","description":"<p>the angle of rotation, specified in radians\n                       or degrees, depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(255);\n  rotateY(millis() / 1000);\n  box();\n}\n</code>\n</div>"],"alt":"3d box rotating around the y axis.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":304,"description":"<p>Rotates a shape around Z axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.</p>\n<p>This method works in WEBGL mode only.</p>\n<p>Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n","itemtype":"method","name":"rotateZ","params":[{"name":"angle","description":"<p>the angle of rotation, specified in radians\n                       or degrees, depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(255);\n  rotateZ(millis() / 1000);\n  box();\n}\n</code>\n</div>"],"alt":"3d box rotating around the z axis.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":342,"description":"<p>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%.</p>\n<p>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 <a href=\"#/p5/scale\">scale()</a> is called\nwithin <a href=\"#/p5/draw\">draw()</a>, the transformation is reset when the loop begins again.</p>\n<p>Using this function with the z parameter is only available in WEBGL mode.\nThis function can be further controlled with <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a>.</p>\n","itemtype":"method","name":"scale","chainable":1,"example":["\n<div>\n<code>\nrect(30, 20, 50, 50);\nscale(0.5);\nrect(30, 20, 50, 50);\n</code>\n</div>\n\n<div>\n<code>\nrect(30, 20, 50, 50);\nscale(0.5, 1.3);\nrect(30, 20, 50, 50);\n</code>\n</div>"],"alt":"white 52x52 rect with black outline at center rotated counter 45 degrees\n2 white rects with black outline- 1 50x50 at center. other 25x65 bottom left","class":"p5","module":"Transform","submodule":"Transform","overloads":[{"line":342,"params":[{"name":"s","description":"<p>percent to scale the object, or percentage to\n                     scale the object in the x-axis if multiple arguments\n                     are given</p>\n","type":"Number|p5.Vector|Number[]"},{"name":"y","description":"<p>percent to scale the object in the y-axis</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>percent to scale the object in the z-axis (webgl only)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":386,"params":[{"name":"scales","description":"<p>per-axis percents to scale the object</p>\n","type":"p5.Vector|Number[]"}],"chainable":1}]},{"file":"src/core/transform.js","line":416,"description":"<p>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.</p>\n<p>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 <a href=\"#/p5/shearX\">shearX()</a> is called within the <a href=\"#/p5/draw\">draw()</a>,\nthe transformation is reset when the loop begins again.</p>\n<p>Technically, <a href=\"#/p5/shearX\">shearX()</a> multiplies the current\ntransformation matrix by a rotation matrix. This function can be further\ncontrolled by the <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions.</p>\n","itemtype":"method","name":"shearX","params":[{"name":"angle","description":"<p>angle of shear specified in radians or degrees,\n                       depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\ntranslate(width / 4, height / 4);\nshearX(PI / 4.0);\nrect(0, 0, 30, 30);\n</code>\n</div>"],"alt":"white irregular quadrilateral with black outline at top middle.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":455,"description":"<p>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.</p>\n<p>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\n<a href=\"#/p5/shearY\">shearY()</a> is called within the <a href=\"#/p5/draw\">draw()</a>, the transformation is reset when\nthe loop begins again.</p>\n<p>Technically, <a href=\"#/p5/shearY\">shearY()</a> multiplies the current transformation matrix by a\nrotation matrix. This function can be further controlled by the\n<a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions.</p>\n","itemtype":"method","name":"shearY","params":[{"name":"angle","description":"<p>angle of shear specified in radians or degrees,\n                       depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\ntranslate(width / 4, height / 4);\nshearY(PI / 4.0);\nrect(0, 0, 30, 30);\n</code>\n</div>"],"alt":"white irregular quadrilateral with black outline at middle bottom.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":494,"description":"<p>Specifies an amount to displace objects within the display window.\nThe x parameter specifies left/right translation, the y parameter\nspecifies up/down translation.</p>\n<p>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 <a href=\"#/p5/translate\">translate()</a> is called within <a href=\"#/p5/draw\">draw()</a>, the\ntransformation is reset when the loop begins again. This function can be\nfurther controlled by using <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a>.</p>\n","itemtype":"method","name":"translate","chainable":1,"example":["\n<div>\n<code>\ntranslate(30, 20);\nrect(0, 0, 55, 55);\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n\n<div>\n<code>\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</code>\n</div>"],"alt":"white 55x55 rect with black outline at center right.\n3 white 55x55 rects with black outlines at top-l, center-r and bottom-r.\na 20x20 white rect moving in a circle around the canvas","class":"p5","module":"Transform","submodule":"Transform","overloads":[{"line":494,"params":[{"name":"x","description":"<p>left/right translation</p>\n","type":"Number"},{"name":"y","description":"<p>up/down translation</p>\n","type":"Number"},{"name":"z","description":"<p>forward/backward translation (webgl only)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":547,"params":[{"name":"vector","description":"<p>the vector to translate by</p>\n","type":"p5.Vector"}],"chainable":1}]},{"file":"src/data/local_storage.js","line":10,"description":"<p>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 <a href=\"#/p5/getItem\">getItem</a>.\nSensitive data such as passwords or personal information\n should not be stored in local storage.</p>\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 <div><code>\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 }\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 </code></div>"],"alt":"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.","class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/local_storage.js","line":101,"description":"<p>Returns the value of an item that was stored in local storage\n using storeItem()</p>\n","itemtype":"method","name":"getItem","params":[{"name":"key","description":"<p>name that you wish to use to store in local storage</p>\n","type":"String"}],"return":{"description":"Value of stored item","type":"Number|Object|String|Boolean|p5.Color|p5.Vector"},"example":["\n <div><code>\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 }\nfunction mousePressed() {\n   myColor = color(random(255), random(255), random(255));\n   storeItem('myColor', myColor);\n }\n </code></div>"],"alt":"If you click, the canvas changes to a random color.\n If you reload the page, the canvas is still the color it\n was when the page was previously loaded.","class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/local_storage.js","line":177,"description":"<p>Clears all local storage items set with storeItem()\n for the current domain.</p>\n","itemtype":"method","name":"clearStorage","example":["\n <div class=\"norender\">\n <code>\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 </code></div>"],"class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/local_storage.js","line":205,"description":"<p>Removes an item that was stored with storeItem()</p>\n","itemtype":"method","name":"removeItem","params":[{"name":"key","description":"","type":"String"}],"example":["\n <div class=\"norender\">\n <code>\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 </code></div>"],"class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/p5.TypedDict.js","line":14,"description":"<p>Creates a new instance of p5.StringDict using the key-value pair\n or the object you provide.</p>\n","itemtype":"method","name":"createStringDict","return":{"description":"","type":"p5.StringDict"},"example":["\n <div class=\"norender\">\n <code>\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 </code></div>"],"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":"<p>object</p>\n","type":"Object"}],"return":{"description":"","type":"p5.StringDict"}}]},{"file":"src/data/p5.TypedDict.js","line":48,"description":"<p>Creates a new instance of <a href=\"#/p5.NumberDict\">p5.NumberDict</a> using the key-value pair\n or object you provide.</p>\n","itemtype":"method","name":"createNumberDict","return":{"description":"","type":"p5.NumberDict"},"example":["\n <div class=\"norender\">\n <code>\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 </code></div>"],"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":"<p>object</p>\n","type":"Object"}],"return":{"description":"","type":"p5.NumberDict"}}]},{"file":"src/data/p5.TypedDict.js","line":101,"description":"<p>Returns the number of key-value pairs currently stored in the Dictionary.</p>\n","itemtype":"method","name":"size","return":{"description":"the number of key-value pairs in the Dictionary","type":"Integer"},"example":["\n<div class=\"norender\">\n<code>\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</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":122,"description":"<p>Returns true if the given key exists in the Dictionary,\notherwise returns false.</p>\n","itemtype":"method","name":"hasKey","params":[{"name":"key","description":"<p>that you want to look up</p>\n","type":"Number|String"}],"return":{"description":"whether that key exists in Dictionary","type":"Boolean"},"example":["\n<div class=\"norender\">\n<code>\nfunction setup() {\n  let myDictionary = createStringDict('p5', 'js');\n  print(myDictionary.hasKey('p5')); // logs true to console\n}\n</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":144,"description":"<p>Returns the value stored at the given key.</p>\n","itemtype":"method","name":"get","params":[{"name":"the","description":"<p>key you want to access</p>\n","type":"Number|String"}],"return":{"description":"the value stored at that key","type":"Number|String"},"example":["\n<div class=\"norender\">\n<code>\nfunction setup() {\n  let myDictionary = createStringDict('p5', 'js');\n  let myValue = myDictionary.get('p5');\n  print(myValue === 'js'); // logs true to console\n}\n</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":170,"description":"<p>Updates the value associated with the given key in case it already exists\nin the Dictionary. Otherwise a new key-value pair is added.</p>\n","itemtype":"method","name":"set","params":[{"name":"key","description":"","type":"Number|String"},{"name":"value","description":"","type":"Number|String"}],"example":["\n<div class=\"norender\">\n<code>\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</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":197,"description":"<p>private helper function to handle the user passing in objects\nduring construction or calls to create()</p>\n","class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":208,"description":"<p>Creates a new key-value pair in the Dictionary.</p>\n","itemtype":"method","name":"create","example":["\n<div class=\"norender\">\n<code>\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</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary","overloads":[{"line":208,"params":[{"name":"key","description":"","type":"Number|String"},{"name":"value","description":"","type":"Number|String"}]},{"line":226,"params":[{"name":"obj","description":"<p>key/value pair</p>\n","type":"Object"}]}]},{"file":"src/data/p5.TypedDict.js","line":244,"description":"<p>Removes all previously stored key-value pairs from the Dictionary.</p>\n","itemtype":"method","name":"clear","example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":265,"description":"<p>Removes the key-value pair stored at the given key from the Dictionary.</p>\n","itemtype":"method","name":"remove","params":[{"name":"key","description":"<p>for the pair to remove</p>\n","type":"Number|String"}],"example":["\n<div class=\"norender\">\n<code>\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</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":294,"description":"<p>Logs the set of items currently stored in the Dictionary to the console.</p>\n","itemtype":"method","name":"print","example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":318,"description":"<p>Converts the Dictionary into a CSV file for local download.</p>\n","itemtype":"method","name":"saveTable","example":["\n<div>\n<code>\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</code>\n</div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":356,"description":"<p>Converts the Dictionary into a JSON file for local download.</p>\n","itemtype":"method","name":"saveJSON","example":["\n<div>\n<code>\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</code>\n</div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":387,"description":"<p>private helper function to ensure that the user passed in valid\nvalues for the Dictionary type</p>\n","class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":425,"description":"<p>private helper function to ensure that the user passed in valid\nvalues for the Dictionary type</p>\n","class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":432,"description":"<p>Add the given number to the value currently stored at the given key.\nThe sum then replaces the value previously stored in the Dictionary.</p>\n","itemtype":"method","name":"add","params":[{"name":"Key","description":"<p>for the value you wish to add to</p>\n","type":"Number"},{"name":"Number","description":"<p>to add to the value</p>\n","type":"Number"}],"example":["\n<div class='norender'>\n<code>\nfunction setup() {\n  let myDictionary = createNumberDict(2, 5);\n  myDictionary.add(2, 2);\n  print(myDictionary.get(2)); // logs 7 to console.\n}\n</code></div>\n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":459,"description":"<p>Subtract the given number from the value currently stored at the given key.\nThe difference then replaces the value previously stored in the Dictionary.</p>\n","itemtype":"method","name":"sub","params":[{"name":"Key","description":"<p>for the value you wish to subtract from</p>\n","type":"Number"},{"name":"Number","description":"<p>to subtract from the value</p>\n","type":"Number"}],"example":["\n<div class='norender'>\n<code>\nfunction setup() {\n  let myDictionary = createNumberDict(2, 5);\n  myDictionary.sub(2, 2);\n  print(myDictionary.get(2)); // logs 3 to console.\n}\n</code></div>\n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":482,"description":"<p>Multiply the given number with the value currently stored at the given key.\nThe product then replaces the value previously stored in the Dictionary.</p>\n","itemtype":"method","name":"mult","params":[{"name":"Key","description":"<p>for value you wish to multiply</p>\n","type":"Number"},{"name":"Amount","description":"<p>to multiply the value by</p>\n","type":"Number"}],"example":["\n<div class='norender'>\n<code>\nfunction setup() {\n  let myDictionary = createNumberDict(2, 4);\n  myDictionary.mult(2, 2);\n  print(myDictionary.get(2)); // logs 8 to console.\n}\n</code></div>\n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":509,"description":"<p>Divide the given number with the value currently stored at the given key.\nThe quotient then replaces the value previously stored in the Dictionary.</p>\n","itemtype":"method","name":"div","params":[{"name":"Key","description":"<p>for value you wish to divide</p>\n","type":"Number"},{"name":"Amount","description":"<p>to divide the value by</p>\n","type":"Number"}],"example":["\n<div class='norender'>\n<code>\nfunction setup() {\n  let myDictionary = createNumberDict(2, 8);\n  myDictionary.div(2, 2);\n  print(myDictionary.get(2)); // logs 4 to console.\n}\n</code></div>\n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":536,"description":"<p>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'</p>\n","class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":560,"description":"<p>Return the lowest number currently stored in the Dictionary.</p>\n","itemtype":"method","name":"minValue","return":{"description":"","type":"Number"},"example":["\n<div class='norender'>\n<code>\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</code></div>"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":580,"description":"<p>Return the highest number currently stored in the Dictionary.</p>\n","itemtype":"method","name":"maxValue","return":{"description":"","type":"Number"},"example":["\n<div class='norender'>\n<code>\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</code></div>"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":600,"description":"<p>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'</p>\n","class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":622,"description":"<p>Return the lowest key currently used in the Dictionary.</p>\n","itemtype":"method","name":"minKey","return":{"description":"","type":"Number"},"example":["\n<div class='norender'>\n<code>\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</code></div>"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":642,"description":"<p>Return the highest key currently used in the Dictionary.</p>\n","itemtype":"method","name":"maxKey","return":{"description":"","type":"Number"},"example":["\n<div class='norender'>\n<code>\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</code></div>"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/dom/dom.js","line":21,"description":"<p>Searches the page for the first element that matches the given CSS selector string (can be an\nID, class, tag name or a combination) and returns it as a <a href=\"#/p5.Element\">p5.Element</a>.\nThe DOM node itself can be accessed with .elt.\nReturns null if none found. You can also specify a container to search within.</p>\n","itemtype":"method","name":"select","params":[{"name":"selectors","description":"<p>CSS selector string of element to search for</p>\n","type":"String"},{"name":"container","description":"<p>CSS selector string, <a href=\"#/p5.Element\">p5.Element</a>, or\n                                            HTML element to search within</p>\n","type":"String|p5.Element|HTMLElement","optional":true}],"return":{"description":"<a href=\"#/p5.Element\">p5.Element</a> containing node found","type":"p5.Element|null"},"example":["\n<div><code>\nfunction setup() {\n  createCanvas(50, 50);\n  background(30);\n  // move canvas down and right\n  select('canvas').position(10, 30);\n}\n</code></div>\n\n<div class=\"norender\"><code>\n// select using ID\nlet a = select('#container');\nlet b = select('#beep', '#container');\nlet c;\nif (a) {\n  // select using class\n  c = select('.boop', a);\n}\n// select using CSS selector string\nlet d = select('#container #bleep');\nlet e = select('#container p');\n[a, b, c, d, e]; // unused\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":68,"description":"<p>Searches the page for elements that match the given CSS selector string (can be an ID a class,\ntag name or a combination) and returns them as <a href=\"#/p5.Element\">p5.Element</a>s in\nan array.\nThe DOM node itself can be accessed with .elt.\nReturns an empty array if none found.\nYou can also specify a container to search within.</p>\n","itemtype":"method","name":"selectAll","params":[{"name":"selectors","description":"<p>CSS selector string of elements to search for</p>\n","type":"String"},{"name":"container","description":"<p>CSS selector string, <a href=\"#/p5.Element\">p5.Element</a>\n                                            , or HTML element to search within</p>\n","type":"String|p5.Element|HTMLElement","optional":true}],"return":{"description":"Array of <a href=\"#/p5.Element\">p5.Element</a>s containing nodes found","type":"p5.Element[]"},"example":["\n<div><code>\nfunction setup() {\n  createButton('btn');\n  createButton('2nd btn');\n  createButton('3rd btn');\n  let buttons = selectAll('button');\n\n  for (let i = 0; i < 3; i++) {\n    buttons[i].size(100);\n    buttons[i].position(0, i * 30);\n  }\n}\n</code></div>\n<div><code>\n// these are all valid calls to selectAll()\nlet a = selectAll('.beep');\na = selectAll('div');\na = selectAll('button', '#container');\n\nlet b = createDiv();\nb.id('container');\nlet c = select('#container');\na = selectAll('p', c);\na = selectAll('#container p');\n\nlet d = document.getElementById('container');\na = selectAll('.boop', d);\na = selectAll('#container .boop');\nconsole.log(a);\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":127,"description":"<p>Helper function for select and selectAll</p>\n","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":142,"description":"<p>Helper function for getElement and getElements.</p>\n","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":176,"description":"<p>Removes all elements created by p5, except any canvas / graphics\nelements created by <a href=\"#/p5/createCanvas\">createCanvas</a> or <a href=\"#/p5/createGraphics\">createGraphics</a>.\nEvent handlers are removed, and element is removed from the DOM.</p>\n","itemtype":"method","name":"removeElements","example":["\n<div><code>\nfunction setup() {\n  createCanvas(100, 100);\n  background('grey');\n  let div = createDiv('this is some text');\n  let p = createP('this is a paragraph');\n  div.style('font-size', '16px');\n  p.style('font-size', '16px');\n}\nfunction mousePressed() {\n  removeElements(); // this will remove the div and p, not canvas\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":204,"description":"<p>The .<a href=\"#/p5.Element/changed\">changed()</a> function is called when the value of an\nelement changes.\nThis can be used to attach an element specific event listener.</p>\n","itemtype":"method","name":"changed","params":[{"name":"fxn","description":"<p>function to be fired when the value of\n                               an element changes.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div><code>\nlet sel;\n\nfunction setup() {\n  textAlign(CENTER);\n  background(200);\n  sel = createSelect();\n  sel.position(10, 10);\n  sel.option('pear');\n  sel.option('kiwi');\n  sel.option('grape');\n  sel.changed(mySelectEvent);\n}\n\nfunction mySelectEvent() {\n  let item = sel.value();\n  background(200);\n  text(\"it's a \" + item + '!', 50, 50);\n}\n</code></div>\n\n<div><code>\nlet checkbox;\nlet cnv;\n\nfunction setup() {\n  checkbox = createCheckbox(' fill');\n  checkbox.changed(changeFill);\n  cnv = createCanvas(100, 100);\n  cnv.position(0, 30);\n  noFill();\n}\n\nfunction draw() {\n  background(200);\n  ellipse(50, 50, 50, 50);\n}\n\nfunction changeFill() {\n  if (checkbox.checked()) {\n    fill(0);\n  } else {\n    noFill();\n  }\n}\n</code></div>"],"alt":"dropdown: pear, kiwi, grape. When selected text \"its a\" + selection shown.","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":271,"description":"<p>The .<a href=\"#/p5.Element/input\">input()</a> function is called when any user input is\ndetected with an element. The input event is often used\nto detect keystrokes in a input element, or changes on a\nslider element. This can be used to attach an element specific\nevent listener.</p>\n","itemtype":"method","name":"input","params":[{"name":"fxn","description":"<p>function to be fired when any user input is\n                               detected within the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div><code>\n// Open your console to see the output\nfunction setup() {\n  createCanvas(100, 100);\n  background('grey');\n  let inp = createInput('');\n  inp.position(0, 0);\n  inp.size(100);\n  inp.input(myInputEvent);\n}\n\nfunction myInputEvent() {\n  console.log('you are typing: ', this.value());\n}\n</code></div>"],"alt":"no display.","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":309,"description":"<p>Helpers for create methods.</p>\n","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":322,"description":"<p>Creates a <code>&lt;div&gt;&lt;/div&gt;</code> element in the DOM with given inner HTML.</p>\n","itemtype":"method","name":"createDiv","params":[{"name":"html","description":"<p>inner HTML for element created</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet div = createDiv('this is some text');\ndiv.style('font-size', '16px');\ndiv.position(10, 0);\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":341,"description":"<p>Creates a <code>&lt;p&gt;&lt;/p&gt;</code> element in the DOM with given inner HTML. Used\nfor paragraph length text.</p>\n","itemtype":"method","name":"createP","params":[{"name":"html","description":"<p>inner HTML for element created</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet p = createP('this is some text');\np.style('font-size', '16px');\np.position(10, 0);\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":361,"description":"<p>Creates a <code>&lt;span&gt;&lt;/span&gt;</code> element in the DOM with given inner HTML.</p>\n","itemtype":"method","name":"createSpan","params":[{"name":"html","description":"<p>inner HTML for element created</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet span = createSpan('this is some text');\nspan.position(0, 0);\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":379,"description":"<p>Creates an <code>&lt;img&gt;</code> element in the DOM with given src and\nalternate text.</p>\n","itemtype":"method","name":"createImg","return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n <div><code>\nlet img = createImg(\n  'https://p5js.org/assets/img/asterisk-01.png',\n  'the p5 magenta asterisk'\n);\nimg.position(0, -10);\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":379,"params":[{"name":"src","description":"<p>src path or url for image</p>\n","type":"String"},{"name":"alt","description":"<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#Attributes\">alternate text</a> to be used if image does not load. You can use also an empty string (<code>\"\"</code>) if that an image is not intended to be viewed.</p>\n","type":"String"}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}},{"line":396,"params":[{"name":"src","description":"","type":"String"},{"name":"alt","description":"","type":"String"},{"name":"crossOrigin","description":"<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes\">crossOrigin property</a> of the <code>img</code> element; use either 'anonymous' or 'use-credentials' to retrieve the image with cross-origin access (for later use with <code>canvas</code>. if an empty string(<code>\"\"</code>) is passed, CORS is not used</p>\n","type":"String"},{"name":"successCallback","description":"<p>callback to be called once image data is loaded with the <a href=\"#/p5.Element\">p5.Element</a> as argument</p>\n","type":"Function","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":426,"description":"<p>Creates an <code>&lt;a&gt;&lt;/a&gt;</code> element in the DOM for including a hyperlink.</p>\n","itemtype":"method","name":"createA","params":[{"name":"href","description":"<p>url of page to link to</p>\n","type":"String"},{"name":"html","description":"<p>inner html of link element to display</p>\n","type":"String"},{"name":"target","description":"<p>target where new link should open,\n                            could be _blank, _self, _parent, _top.</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet a = createA('http://p5js.org/', 'this is a link');\na.position(0, 0);\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":450,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":452,"description":"<p>Creates a slider <code>&lt;input&gt;&lt;/input&gt;</code> element in the DOM.\nUse .size() to set the display length of the slider.</p>\n","itemtype":"method","name":"createSlider","params":[{"name":"min","description":"<p>minimum value of the slider</p>\n","type":"Number"},{"name":"max","description":"<p>maximum value of the slider</p>\n","type":"Number"},{"name":"value","description":"<p>default value of the slider</p>\n","type":"Number","optional":true},{"name":"step","description":"<p>step size for each tick of the slider (if step is set to 0, the slider will move continuously from the minimum to the maximum value)</p>\n","type":"Number","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet slider;\nfunction setup() {\n  slider = createSlider(0, 255, 100);\n  slider.position(10, 10);\n  slider.style('width', '80px');\n}\n\nfunction draw() {\n  let val = slider.value();\n  background(val);\n}\n</code></div>\n\n<div><code>\nlet slider;\nfunction setup() {\n  colorMode(HSB);\n  slider = createSlider(0, 360, 60, 40);\n  slider.position(10, 10);\n  slider.style('width', '80px');\n}\n\nfunction draw() {\n  let val = slider.value();\n  background(val, 100, 100, 1);\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":507,"description":"<p>Creates a <code>&lt;button&gt;&lt;/button&gt;</code> element in the DOM.\nUse .size() to set the display size of the button.\nUse .mousePressed() to specify behavior on press.</p>\n","itemtype":"method","name":"createButton","params":[{"name":"label","description":"<p>label displayed on the button</p>\n","type":"String"},{"name":"value","description":"<p>value of the button</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet button;\nfunction setup() {\n  createCanvas(100, 100);\n  background(0);\n  button = createButton('click me');\n  button.position(0, 0);\n  button.mousePressed(changeBG);\n}\n\nfunction changeBG() {\n  let val = random(255);\n  background(val);\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":541,"description":"<p>Creates a checkbox <code>&lt;input&gt;&lt;/input&gt;</code> element in the DOM.\nCalling .checked() on a checkbox returns if it is checked or not</p>\n","itemtype":"method","name":"createCheckbox","params":[{"name":"label","description":"<p>label displayed after checkbox</p>\n","type":"String","optional":true},{"name":"value","description":"<p>value of the checkbox; checked is true, unchecked is false</p>\n","type":"Boolean","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet checkbox;\n\nfunction setup() {\n  checkbox = createCheckbox('label', false);\n  checkbox.changed(myCheckedEvent);\n}\n\nfunction myCheckedEvent() {\n  if (this.checked()) {\n    console.log('Checking!');\n  } else {\n    console.log('Unchecking!');\n  }\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":609,"description":"<p>Creates a dropdown menu <code>&lt;select&gt;&lt;/select&gt;</code> element in the DOM.\nIt also helps to assign select-box methods to <a href=\"#/p5.Element\">p5.Element</a> when selecting existing select box.</p>\n<ul>\n<li><code>.option(name, [value])</code> can be used to set options for the select after it is created.</li>\n<li><code>.value()</code> will return the currently selected option.</li>\n<li><code>.selected()</code> will return current dropdown element which is an instance of <a href=\"#/p5.Element\">p5.Element</a></li>\n<li><code>.selected(value)</code> can be used to make given option selected by default when the page first loads.</li>\n<li><code>.disable()</code> marks whole of dropdown element as disabled.</li>\n<li><code>.disable(value)</code> marks given option as disabled</li>\n</ul>\n","itemtype":"method","name":"createSelect","return":{"description":"","type":"p5.Element"},"example":["\n<div><code>\nlet sel;\n\nfunction setup() {\n  textAlign(CENTER);\n  background(200);\n  sel = createSelect();\n  sel.position(10, 10);\n  sel.option('pear');\n  sel.option('kiwi');\n  sel.option('grape');\n  sel.selected('kiwi');\n  sel.changed(mySelectEvent);\n}\n\nfunction mySelectEvent() {\n  let item = sel.value();\n  background(200);\n  text('It is a ' + item + '!', 50, 50);\n}\n</code></div>\n\n<div><code>\nlet sel;\n\nfunction setup() {\n  textAlign(CENTER);\n  background(200);\n  sel = createSelect();\n  sel.position(10, 10);\n  sel.option('oil');\n  sel.option('milk');\n  sel.option('bread');\n  sel.disable('milk');\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":609,"params":[{"name":"multiple","description":"<p>true if dropdown should support multiple selections</p>\n","type":"Boolean","optional":true}],"return":{"description":"","type":"p5.Element"}},{"line":660,"params":[{"name":"existing","description":"<p>DOM select element</p>\n","type":"Object"}],"return":{"description":"","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":757,"description":"<p>Creates a radio button element in the DOM.It also helps existing radio buttons\nassign methods of <a href=\"#/p5.Element/\">p5.Element</a>.</p>\n<ul>\n<li><code>.option(value, [label])</code> can be used to create a new option for the\nelement. If an option with a value already exists, it will be returned.\nOptionally, a label can be provided as second argument for the option.</li>\n<li><code>.remove(value)</code> can be used to remove an option for the element.</li>\n<li><code>.value()</code> method will return the currently selected value.</li>\n<li><code>.selected()</code> method will return the currently selected input element.</li>\n<li><code>.selected(value)</code> method will select the option and return it.</li>\n<li><code>.disable(Boolean)</code> method will enable/disable the whole radio button element.</li>\n</ul>\n","itemtype":"method","name":"createRadio","return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet radio;\n\nfunction setup() {\n  radio = createRadio();\n  radio.option('black');\n  radio.option('white');\n  radio.option('gray');\n  radio.style('width', '60px');\n  textAlign(CENTER);\n  fill(255, 0, 0);\n}\n\nfunction draw() {\n  let val = radio.value();\n  background(val);\n  text(val, width / 2, height / 2);\n}\n</code></div>\n<div><code>\nlet radio;\n\nfunction setup() {\n  radio = createRadio();\n  radio.option(1, 'apple');\n  radio.option(2, 'bread');\n  radio.option(3, 'juice');\n  radio.style('width', '30px');\n  textAlign(CENTER);\n}\n\nfunction draw() {\n  background(200);\n  let val = radio.value();\n  if (val) {\n    text('item cost is $' + val, width / 2, height / 2);\n  }\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":757,"params":[{"name":"containerElement","description":"<p>An container HTML Element either a div\nor span inside which all existing radio inputs will be considered as options.</p>\n","type":"Object"},{"name":"name","description":"<p>A name parameter for each Input Element.</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}},{"line":815,"params":[{"name":"name","description":"","type":"String"}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}},{"line":820,"params":[],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":935,"description":"<p>Creates a colorPicker element in the DOM for color input.\nThe .value() method will return a hex string (#rrggbb) of the color.\nThe .color() method will return a p5.Color object with the current chosen color.</p>\n","itemtype":"method","name":"createColorPicker","params":[{"name":"value","description":"<p>default color of element</p>\n","type":"String|p5.Color","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet colorPicker;\nfunction setup() {\n  createCanvas(100, 100);\n  colorPicker = createColorPicker('#ed225d');\n  colorPicker.position(0, height + 5);\n}\n\nfunction draw() {\n  background(colorPicker.color());\n}\n</code></div>\n<div><code>\nlet inp1, inp2;\nfunction setup() {\n  createCanvas(100, 100);\n  background('grey');\n  inp1 = createColorPicker('#ff0000');\n  inp1.position(0, height + 5);\n  inp1.input(setShade1);\n  inp2 = createColorPicker(color('yellow'));\n  inp2.position(0, height + 30);\n  inp2.input(setShade2);\n  setMidShade();\n}\n\nfunction setMidShade() {\n  // Finding a shade between the two\n  let commonShade = lerpColor(inp1.color(), inp2.color(), 0.5);\n  fill(commonShade);\n  rect(20, 20, 60, 60);\n}\n\nfunction setShade1() {\n  setMidShade();\n  console.log('You are choosing shade 1 to be : ', this.value());\n}\nfunction setShade2() {\n  setMidShade();\n  console.log('You are choosing shade 2 to be : ', this.value());\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1023,"description":"<p>Creates an <code>&lt;input&gt;&lt;/input&gt;</code> element in the DOM for text input.\nUse .<a href=\"#/p5.Element/size\">size()</a> to set the display length of the box.</p>\n","itemtype":"method","name":"createInput","return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nfunction setup() {\n  createCanvas(100, 100);\n  background('grey');\n  let inp = createInput('');\n  inp.position(0, 0);\n  inp.size(100);\n  inp.input(myInputEvent);\n}\n\nfunction myInputEvent() {\n  console.log('you are typing: ', this.value());\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":1023,"params":[{"name":"value","description":"<p>default value of the input box</p>\n","type":"String"},{"name":"type","description":"<p>type of text, ie text, password etc. Defaults to text.\n  Needs a value to be specified first.</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}},{"line":1048,"params":[{"name":"value","description":"","type":"String","optional":true}],"return":{"description":"","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":1061,"description":"<p>Creates an <code>&lt;input&gt;&lt;/input&gt;</code> element in the DOM of type 'file'.\nThis allows users to select local files for use in a sketch.</p>\n","itemtype":"method","name":"createFileInput","params":[{"name":"callback","description":"<p>callback function for when a file is loaded</p>\n","type":"Function"},{"name":"multiple","description":"<p>optional, to allow multiple files to be selected</p>\n","type":"Boolean","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created DOM element","type":"p5.Element"},"example":["\n<div><code>\nlet input;\nlet img;\n\nfunction setup() {\n  input = createFileInput(handleFile);\n  input.position(0, 0);\n}\n\nfunction draw() {\n  background(255);\n  if (img) {\n    image(img, 0, 0, width, height);\n  }\n}\n\nfunction handleFile(file) {\n  print(file);\n  if (file.type === 'image') {\n    img = createImg(file.data, '');\n    img.hide();\n  } else {\n    img = null;\n  }\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1121,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1168,"description":"<p>Creates an HTML5 <code>&lt;video&gt;</code> element in the DOM for simple playback\nof audio/video. Shown by default, can be hidden with .<a href=\"#/p5.Element/hide\">hide()</a>\nand drawn into canvas using <a href=\"#/p5/image\">image()</a>. The first parameter\ncan be either a single string path to a video file, or an array of string\npaths to different formats of the same video. This is useful for ensuring\nthat your video can play across different browsers, as each supports\ndifferent formats. See <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats'>this\npage</a> for further information about supported formats.</p>\n","itemtype":"method","name":"createVideo","params":[{"name":"src","description":"<p>path to a video file, or array of paths for\n                            supporting different browsers</p>\n","type":"String|String[]"},{"name":"callback","description":"<p>callback function to be called upon\n                            'canplaythrough' event fire, that is, when the\n                            browser can play the media, and estimates that\n                            enough data has been loaded to play the media\n                            up to its end without having to stop for\n                            further buffering of content</p>\n","type":"Function","optional":true}],"return":{"description":"pointer to video <a href=\"#/p5.Element\">p5.Element</a>","type":"p5.MediaElement"},"example":["\n<div><code>\nlet vid;\nfunction setup() {\n  noCanvas();\n\n  vid = createVideo(\n    ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm'],\n    vidLoad\n  );\n\n  vid.size(100, 100);\n}\n\n// This function is called when the video loads\nfunction vidLoad() {\n  vid.loop();\n  vid.volume(0);\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1214,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1216,"description":"<p>Creates a hidden HTML5 <code>&lt;audio&gt;</code> element in the DOM for simple audio\nplayback. The first parameter can be either a single string path to a\naudio file, or an array of string paths to different formats of the same\naudio. This is useful for ensuring that your audio can play across\ndifferent browsers, as each supports different formats.\nSee <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats'>this\npage for further information about supported formats</a>.</p>\n","itemtype":"method","name":"createAudio","params":[{"name":"src","description":"<p>path to an audio file, or array of paths\n                            for supporting different browsers</p>\n","type":"String|String[]","optional":true},{"name":"callback","description":"<p>callback function to be called upon\n                            'canplaythrough' event fire, that is, when the\n                            browser can play the media, and estimates that\n                            enough data has been loaded to play the media\n                            up to its end without having to stop for\n                            further buffering of content</p>\n","type":"Function","optional":true}],"return":{"description":"pointer to audio <a href=\"#/p5.Element\">p5.Element</a>","type":"p5.MediaElement"},"example":["\n<div><code>\nlet ele;\nfunction setup() {\n  ele = createAudio('assets/beat.mp3');\n\n  // here we set the element to autoplay\n  // The element will play as soon\n  // as it is able to do so.\n  ele.autoplay(true);\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1253,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1255,"itemtype":"property","name":"VIDEO","type":"String","final":1,"category":["Constants"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1261,"itemtype":"property","name":"AUDIO","type":"String","final":1,"category":["Constants"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1298,"description":"<p>Creates a new HTML5 <code>&lt;video&gt;</code> element that contains the audio/video feed\nfrom a webcam. The element is separate from the canvas and is displayed by\ndefault. The element can be hidden using .<a href=\"#/p5.Element/hide\">hide()</a>.\nThe feed can be drawn onto the canvas using <a href=\"#/p5/image\">image()</a>.\nThe loadedmetadata property can be used to detect when the element has fully\nloaded (see second example).</p>\n<p>More specific properties of the feed can be passing in a Constraints object.\nSee the <a href='http://w3c.github.io/mediacapture-main/getusermedia.html#media-track-constraints'>\nW3C spec</a> for possible properties. Note that not all of these are supported\nby all browsers.</p>\n<p><em>Security note</em>: A new browser security specification requires that\ngetUserMedia, which is behind <a href=\"#/p5/createCapture\">createCapture()</a>,\nonly works when you're running the code locally, or on HTTPS. Learn more\n<a href='http://stackoverflow.com/questions/34197653/getusermedia-in-chrome-47-without-using-https'>here</a>\nand <a href='https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia'>here</a>.</p>\n","itemtype":"method","name":"createCapture","params":[{"name":"type","description":"<p>type of capture, either VIDEO or\n                                  AUDIO if none specified, default both,\n                                  or a Constraints object</p>\n","type":"String|Constant|Object"},{"name":"callback","description":"<p>function to be called once\n                                  stream has loaded</p>\n","type":"Function","optional":true}],"return":{"description":"capture video <a href=\"#/p5.Element\">p5.Element</a>","type":"p5.Element"},"example":["\n<div class='notest'>\n<code>\nlet capture;\n\nfunction setup() {\n  createCanvas(100, 100);\n  capture = createCapture(VIDEO);\n  capture.hide();\n}\n\nfunction draw() {\n  image(capture, 0, 0, width, width * capture.height / capture.width);\n  filter(INVERT);\n}\n</code>\n</div>\n\n<div class='notest'>\n<code>\nfunction setup() {\n  createCanvas(480, 120);\n  let constraints = {\n    video: {\n      mandatory: {\n        minWidth: 1280,\n        minHeight: 720\n      },\n      optional: [{ maxFrameRate: 10 }]\n    },\n    audio: true\n  };\n  createCapture(constraints, function(stream) {\n    console.log(stream);\n  });\n}\n</code>\n</div>\n<div class='notest'>\n<code>\nlet capture;\n\nfunction setup() {\n  createCanvas(640, 480);\n  capture = createCapture(VIDEO);\n}\nfunction draw() {\n  background(0);\n  if (capture.loadedmetadata) {\n    let c = capture.get(0, 0, 100, 100);\n    image(c, 0, 0);\n  }\n}\n</code>\n</div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1435,"description":"<p>Creates element with given tag in the DOM with given content.</p>\n","itemtype":"method","name":"createElement","params":[{"name":"tag","description":"<p>tag for the new element</p>\n","type":"String"},{"name":"content","description":"<p>html content to be inserted into the element</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet h5 = createElement('h5', 'im an h5 p5.element!');\nh5.style('color', '#00a1d3');\nh5.position(0, 0);\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1461,"description":"<p>Adds specified class to the element.</p>\n","itemtype":"method","name":"addClass","params":[{"name":"class","description":"<p>name of class to add</p>\n","type":"String"}],"chainable":1,"example":["\n <div class='norender'><code>\n let div = createDiv('div');\n div.addClass('myClass');\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1486,"description":"<p>Removes specified class from the element.</p>\n","itemtype":"method","name":"removeClass","params":[{"name":"class","description":"<p>name of class to remove</p>\n","type":"String"}],"chainable":1,"example":["\n <div class='norender'><code>\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.\nlet div;\nfunction setup() {\n   div = createDiv('div');\n   div.addClass('myClass');\n }\nfunction mousePressed() {\n   div.removeClass('myClass');\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1517,"description":"<p>Checks if specified class already set to element</p>\n","itemtype":"method","name":"hasClass","return":{"description":"a boolean value if element has specified class","type":"Boolean"},"params":[{"name":"c","description":"<p>class name of class to check</p>\n","type":"String"}],"example":["\n <div class='norender'><code>\n let div;\nfunction setup() {\n   div = createDiv('div');\n   div.addClass('show');\n }\nfunction mousePressed() {\n   if (div.hasClass('show')) {\n     div.addClass('show');\n   } else {\n     div.removeClass('show');\n   }\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1546,"description":"<p>Toggles element class</p>\n","itemtype":"method","name":"toggleClass","params":[{"name":"c","description":"<p>class name to toggle</p>\n","type":"String"}],"chainable":1,"example":["\n <div class='norender'><code>\n let div;\nfunction setup() {\n   div = createDiv('div');\n   div.addClass('show');\n }\nfunction mousePressed() {\n   div.toggleClass('show');\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1579,"description":"<p>Attaches the element  as a child to the parent specified.\n Accepts either a string ID, DOM node, or <a href=\"#/p5.Element\">p5.Element</a>.\n If no argument is specified, an array of children DOM nodes is returned.</p>\n","itemtype":"method","name":"child","return":{"description":"an array of child nodes","type":"Node[]"},"example":["\n <div class='norender'><code>\n let div0 = createDiv('this is the parent');\n let div1 = createDiv('this is the child');\n div0.child(div1); // use p5.Element\n </code></div>\n <div class='norender'><code>\n let div0 = createDiv('this is the parent');\n let div1 = createDiv('this is the child');\n div1.id('apples');\n div0.child('apples'); // use id\n </code></div>\n <div class='norender notest'><code>\n // this example assumes there is a div already on the page\n // with id \"myChildDiv\"\n let div0 = createDiv('this is the parent');\n let elt = document.getElementById('myChildDiv');\n div0.child(elt); // use element from page\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1579,"params":[],"return":{"description":"an array of child nodes","type":"Node[]"}},{"line":1607,"params":[{"name":"child","description":"<p>the ID, DOM node, or <a href=\"#/p5.Element\">p5.Element</a>\n                        to add to the current element</p>\n","type":"String|p5.Element","optional":true}],"chainable":1}]},{"file":"src/dom/dom.js","line":1632,"description":"<p>Centers a p5 Element either vertically, horizontally,\nor both, relative to its parent or according to\nthe body if the Element has no parent. If no argument is passed\nthe Element is aligned both vertically and horizontally.</p>\n","itemtype":"method","name":"center","params":[{"name":"align","description":"<p>passing 'vertical', 'horizontal' aligns element accordingly</p>\n","type":"String","optional":true}],"chainable":1,"example":["\n<div><code>\nfunction setup() {\n  let div = createDiv('').size(10, 10);\n  div.style('background-color', 'orange');\n  div.center();\n}\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1683,"description":"<p>If an argument is given, sets the inner HTML of the element,\n replacing any existing html. If true is included as a second\n argument, html is appended instead of replacing existing html.\n If no arguments are given, returns\n the inner HTML of the element.</p>\n","itemtype":"method","name":"html","return":{"description":"the inner HTML of the element","type":"String"},"example":["\n <div class='norender'><code>\n let div = createDiv('').size(100, 100);\n div.html('hi');\n </code></div>\n <div class='norender'><code>\n let div = createDiv('Hello ').size(100, 100);\n div.html('World', true);\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1683,"params":[],"return":{"description":"the inner HTML of the element","type":"String"}},{"line":1704,"params":[{"name":"html","description":"<p>the HTML to be placed inside the element</p>\n","type":"String","optional":true},{"name":"append","description":"<p>whether to append HTML to existing</p>\n","type":"Boolean","optional":true}],"chainable":1}]},{"file":"src/dom/dom.js","line":1722,"description":"<p>Sets the position of the element. If no position type argument is given, the\n position will be relative to (0, 0) of the window.\n Essentially, this sets position:absolute and left and top\n properties of style. If an optional third argument specifying position type is given,\n the x and y coordinates will be interpreted based on the <a target=\"_blank\"\n href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/position\">positioning scheme</a>.\n If no arguments given, the function returns the x and y position of the element.\nfound documentation on how to be more specific with object type\n <a href=\"https://stackoverflow.com/questions/14714314/how-do-i-comment-object-literals-in-yuidoc\">https://stackoverflow.com/questions/14714314/how-do-i-comment-object-literals-in-yuidoc</a></p>\n","itemtype":"method","name":"position","return":{"description":"object of form { x: 0, y: 0 } containing the position of the element in an object","type":"Object"},"example":["\n <div><code class='norender'>\n function setup() {\n   let cnv = createCanvas(100, 100);\n   // positions canvas 50px to the right and 100px\n   // below upper left corner of the window\n   cnv.position(50, 100);\n }\n </code></div>\n <div><code class='norender'>\n function setup() {\n   let cnv = createCanvas(100, 100);\n   // positions canvas 50px to the right and 100px\n   // below upper left corner of the window\n   cnv.position(0, 0, 'fixed');\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1722,"params":[],"return":{"description":"object of form { x: 0, y: 0 } containing the position of the element in an object","type":"Object"}},{"line":1755,"params":[{"name":"x","description":"<p>x-position relative to upper left of window (optional)</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>y-position relative to upper left of window (optional)</p>\n","type":"Number","optional":true},{"name":"positionType","description":"<p>it can be static, fixed, relative, sticky, initial or inherit (optional)</p>\n","type":"String"}],"chainable":1}]},{"file":"src/dom/dom.js","line":1842,"description":"<p>Sets the given style (css) property (1st arg) of the element with the\ngiven value (2nd arg). If a single argument is given, .style()\nreturns the value of the given property; however, if the single argument\nis given in css syntax ('text-align:center'), .style() sets the css\nappropriately.</p>\n","itemtype":"method","name":"style","return":{"description":"value of property","type":"String"},"example":["\n<div><code class='norender'>\nlet myDiv = createDiv('I like pandas.');\nmyDiv.style('font-size', '18px');\nmyDiv.style('color', '#ff0000');\nmyDiv.position(0, 0);\n</code></div>\n<div><code class='norender'>\nlet col = color(25, 23, 200, 50);\nlet button = createButton('button');\nbutton.style('background-color', col);\nbutton.position(0, 0);\n</code></div>\n<div><code class='norender'>\nlet myDiv, fontSize;\nfunction setup() {\n  background(200);\n  myDiv = createDiv('I like gray.');\n  myDiv.position(0, 0);\n  myDiv.style('z-index', 10);\n}\n\nfunction draw() {\n  fontSize = min(mouseX, 90);\n  myDiv.style('font-size', fontSize + 'px');\n}\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1842,"params":[{"name":"property","description":"<p>property to be set</p>\n","type":"String"}],"return":{"description":"value of property","type":"String"}},{"line":1880,"params":[{"name":"property","description":"","type":"String"},{"name":"value","description":"<p>value to assign to property</p>\n","type":"String|p5.Color"}],"chainable":1,"return":{"description":"current value of property, if no value is given as second argument","type":"String"}}]},{"file":"src/dom/dom.js","line":1937,"description":"<p>Adds a new attribute or changes the value of an existing attribute\n on the specified element. If no value is specified, returns the\n value of the given attribute, or null if attribute is not set.</p>\n","itemtype":"method","name":"attribute","return":{"description":"value of attribute","type":"String"},"example":["\n <div class='norender'><code>\n let myDiv = createDiv('I like pandas.');\n myDiv.attribute('align', 'center');\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1937,"params":[],"return":{"description":"value of attribute","type":"String"}},{"line":1952,"params":[{"name":"attr","description":"<p>attribute to set</p>\n","type":"String"},{"name":"value","description":"<p>value to assign to attribute</p>\n","type":"String"}],"chainable":1}]},{"file":"src/dom/dom.js","line":1981,"description":"<p>Removes an attribute on the specified element.</p>\n","itemtype":"method","name":"removeAttribute","params":[{"name":"attr","description":"<p>attribute to remove</p>\n","type":"String"}],"chainable":1,"example":["\n <div><code>\n let button;\n let checkbox;\nfunction setup() {\n   checkbox = createCheckbox('enable', true);\n   checkbox.changed(enableButton);\n   button = createButton('button');\n   button.position(10, 10);\n }\nfunction enableButton() {\n   if (this.checked()) {\n     // Re-enable the button\n     button.removeAttribute('disabled');\n   } else {\n     // Disable the button\n     button.attribute('disabled', '');\n   }\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2026,"description":"<p>Either returns the value of the element if no arguments\ngiven, or sets the value of the element.</p>\n","itemtype":"method","name":"value","return":{"description":"value of the element","type":"String|Number"},"example":["\n<div class='norender'><code>\n// gets the value\nlet inp;\nfunction setup() {\n  inp = createInput('');\n}\n\nfunction mousePressed() {\n  print(inp.value());\n}\n</code></div>\n<div class='norender'><code>\n// sets the value\nlet inp;\nfunction setup() {\n  inp = createInput('myValue');\n}\n\nfunction mousePressed() {\n  inp.value('myValue');\n}\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":2026,"params":[],"return":{"description":"value of the element","type":"String|Number"}},{"line":2056,"params":[{"name":"value","description":"","type":"String|Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":2072,"description":"<p>Shows the current element. Essentially, setting display:block for the style.</p>\n","itemtype":"method","name":"show","chainable":1,"example":["\n <div class='norender'><code>\n let div = createDiv('div');\n div.style('display', 'none');\n div.show(); // turns display to block\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2090,"description":"<p>Hides the current element. Essentially, setting display:none for the style.</p>\n","itemtype":"method","name":"hide","chainable":1,"example":["\n<div class='norender'><code>\nlet div = createDiv('this is a div');\ndiv.hide();\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2106,"description":"<p>Sets the width and height of the element. AUTO can be used to\n only adjust one dimension at a time. If no arguments are given, it\n returns the width and height of the element in an object. In case of\n elements which need to be loaded, such as images, it is recommended\n to call the function after the element has finished loading.</p>\n","itemtype":"method","name":"size","return":{"description":"the width and height of the element in an object","type":"Object"},"example":["\n <div class='norender'><code>\n let div = createDiv('this is a div');\n div.size(100, 100);\n let img = createImg(\n   'assets/rockies.jpg',\n   'A tall mountain with a small forest and field in front of it on a sunny day',\n   '',\n   () => {\n     img.size(10, AUTO);\n   }\n );\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":2106,"params":[],"return":{"description":"the width and height of the element in an object","type":"Object"}},{"line":2130,"params":[{"name":"w","description":"<p>width of the element, either AUTO, or a number</p>\n","type":"Number|Constant"},{"name":"h","description":"<p>height of the element, either AUTO, or a number</p>\n","type":"Number|Constant","optional":true}],"chainable":1}]},{"file":"src/dom/dom.js","line":2187,"description":"<p>Removes the element, stops all media streams, and deregisters all listeners.</p>\n","itemtype":"method","name":"remove","example":["\n<div class='norender'><code>\nlet myDiv = createDiv('this is some text');\nmyDiv.remove();\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2225,"description":"<p>Registers a callback that gets called every time a file that is\ndropped on the element has been loaded.\np5 will load every dropped file into memory and pass it as a p5.File object to the callback.\nMultiple files dropped at the same time will result in multiple calls to the callback.</p>\n<p>You can optionally pass a second callback which will be registered to the raw\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/Events/drop\">drop</a> event.\nThe callback will thus be provided the original\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/DragEvent\">DragEvent</a>.\nDropping multiple files at the same time will trigger the second callback once per drop,\nwhereas the first callback will trigger for each loaded file.</p>\n","itemtype":"method","name":"drop","params":[{"name":"callback","description":"<p>callback to receive loaded file, called for each file dropped.</p>\n","type":"Function"},{"name":"fxn","description":"<p>callback triggered once when files are dropped with the drop event.</p>\n","type":"Function","optional":true}],"chainable":1,"example":["\n<div><code>\nfunction setup() {\n  let c = createCanvas(100, 100);\n  background(200);\n  textAlign(CENTER);\n  text('drop file', width / 2, height / 2);\n  c.drop(gotFile);\n}\n\nfunction gotFile(file) {\n  background(200);\n  text('received file:', width / 2, height / 2);\n  text(file.name, width / 2, height / 2 + 50);\n}\n</code></div>\n\n<div><code>\nlet img;\n\nfunction setup() {\n  let c = createCanvas(100, 100);\n  background(200);\n  textAlign(CENTER);\n  text('drop image', width / 2, height / 2);\n  c.drop(gotFile);\n}\n\nfunction draw() {\n  if (img) {\n    image(img, 0, 0, width, height);\n  }\n}\n\nfunction gotFile(file) {\n  img = createImg(file.data, '').hide();\n}\n</code></div>"],"alt":"Canvas turns into whatever image is dragged/dropped onto it.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2357,"description":"<p>Path to the media element source.</p>\n","itemtype":"property","name":"src","return":{"description":"src","type":"String"},"example":["\n<div><code>\nlet ele;\n\nfunction setup() {\n  background(250);\n\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n\n  //In this example we create\n  //a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/beat.mp3');\n\n  //We'll set up our example so that\n  //when you click on the text,\n  //an alert box displays the MediaElement's\n  //src field.\n  textAlign(CENTER);\n  text('Click Me!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    //Show our p5.MediaElement's src field\n    alert(ele.src);\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2423,"description":"<p>Play an HTML5 media element.</p>\n","itemtype":"method","name":"play","chainable":1,"example":["\n<div><code>\nlet ele;\n\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n\n  //In this example we create\n  //a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/beat.mp3');\n\n  background(250);\n  textAlign(CENTER);\n  text('Click to Play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    //Here we call the play() function on\n    //the p5.MediaElement we created above.\n    //This will start the audio sample.\n    ele.play();\n\n    background(200);\n    text('You clicked Play!', width / 2, height / 2);\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2487,"description":"<p>Stops an HTML5 media element (sets current time to zero).</p>\n","itemtype":"method","name":"stop","chainable":1,"example":["\n<div><code>\n//This example both starts\n//and stops a sound sample\n//when the user clicks the canvas\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\n\n//while our audio is playing,\n//this will be set to true\nlet sampleIsPlaying = false;\n\nfunction setup() {\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/beat.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    background(200);\n\n    if (sampleIsPlaying) {\n      //if the sample is currently playing\n      //calling the stop() function on\n      //our p5.MediaElement will stop\n      //it and reset its current\n      //time to 0 (i.e. it will start\n      //at the beginning the next time\n      //you play it)\n      ele.stop();\n\n      sampleIsPlaying = false;\n      text('Click to play!', width / 2, height / 2);\n    } else {\n      //loop our sound element until we\n      //call ele.stop() on it.\n      ele.loop();\n\n      sampleIsPlaying = true;\n      text('Click to stop!', width / 2, height / 2);\n    }\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2551,"description":"<p>Pauses an HTML5 media element.</p>\n","itemtype":"method","name":"pause","chainable":1,"example":["\n<div><code>\n//This example both starts\n//and pauses a sound sample\n//when the user clicks the canvas\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\n\n//while our audio is playing,\n//this will be set to true\nlet sampleIsPlaying = false;\n\nfunction setup() {\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    background(200);\n\n    if (sampleIsPlaying) {\n      //Calling pause() on our\n      //p5.MediaElement will stop it\n      //playing, but when we call the\n      //loop() or play() functions\n      //the sample will start from\n      //where we paused it.\n      ele.pause();\n\n      sampleIsPlaying = false;\n      text('Click to resume!', width / 2, height / 2);\n    } else {\n      //loop our sound element until we\n      //call ele.pause() on it.\n      ele.loop();\n\n      sampleIsPlaying = true;\n      text('Click to pause!', width / 2, height / 2);\n    }\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2613,"description":"<p>Set 'loop' to true for an HTML5 media element, and starts playing.</p>\n","itemtype":"method","name":"loop","chainable":1,"example":["\n<div><code>\n//Clicking the canvas will loop\n//the audio sample until the user\n//clicks again to stop it\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\n\n//while our audio is playing,\n//this will be set to true\nlet sampleIsLooping = false;\n\nfunction setup() {\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to loop!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    background(200);\n\n    if (!sampleIsLooping) {\n      //loop our sound element until we\n      //call ele.stop() on it.\n      ele.loop();\n\n      sampleIsLooping = true;\n      text('Click to stop!', width / 2, height / 2);\n    } else {\n      ele.stop();\n\n      sampleIsLooping = false;\n      text('Click to loop!', width / 2, height / 2);\n    }\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2669,"description":"<p>Set 'loop' to false for an HTML5 media element. Element will stop\nwhen it reaches the end.</p>\n","itemtype":"method","name":"noLoop","chainable":1,"example":["\n<div><code>\n//This example both starts\n//and stops loop of sound sample\n//when the user clicks the canvas\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\n//while our audio is playing,\n//this will be set to true\nlet sampleIsPlaying = false;\n\nfunction setup() {\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/beat.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    background(200);\n\n    if (sampleIsPlaying) {\n      ele.noLoop();\n      sampleIsPlaying = false;\n      text('No more Loops!', width / 2, height / 2);\n    } else {\n      ele.loop();\n      sampleIsPlaying = true;\n      text('Click to stop looping!', width / 2, height / 2);\n    }\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2735,"description":"<p>Set HTML5 media element to autoplay or not. If no argument is specified, by\ndefault it will autoplay.</p>\n","itemtype":"method","name":"autoplay","params":[{"name":"shouldAutoplay","description":"<p>whether the element should autoplay</p>\n","type":"Boolean"}],"chainable":1,"example":["\n<div><code>\nlet videoElement;\nfunction setup() {\n  noCanvas();\n  videoElement = createVideo(['assets/small.mp4'], onVideoLoad);\n}\nfunction onVideoLoad() {\n  // The media will play as soon as it is loaded.\n  videoElement.autoplay();\n  videoElement.volume(0);\n  videoElement.size(100, 100);\n}\n</code></div>\n\n<div><code>\nlet videoElement;\nfunction setup() {\n  noCanvas();\n  videoElement = createVideo(['assets/small.mp4'], onVideoLoad);\n}\nfunction onVideoLoad() {\n  // The media will not play untill some explicitly triggered.\n  videoElement.autoplay(false);\n  videoElement.volume(0);\n  videoElement.size(100, 100);\n}\n\nfunction mouseClicked() {\n  videoElement.play();\n}\n</code></div>"],"alt":"An example of a video element which autoplays after it is loaded.\nAn example of a video element which waits for a trigger for playing.","class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2802,"description":"<p>Sets volume for this HTML5 media element. If no argument is given,\nreturns the current volume.</p>\n","itemtype":"method","name":"volume","return":{"description":"current volume","type":"Number"},"example":["\n<div><code>\nlet ele;\nfunction setup() {\n  // p5.MediaElement objects are usually created\n  // by calling the createAudio(), createVideo(),\n  // and createCapture() functions.\n  // In this example we create\n  // a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(250);\n  textAlign(CENTER);\n  text('Click to Play!', width / 2, height / 2);\n}\nfunction mouseClicked() {\n  // Here we call the volume() function\n  // on the sound element to set its volume\n  // Volume must be between 0.0 and 1.0\n  ele.volume(0.2);\n  ele.play();\n  background(200);\n  text('You clicked Play!', width / 2, height / 2);\n}\n</code></div>\n<div><code>\nlet audio;\nlet counter = 0;\n\nfunction loaded() {\n  audio.play();\n}\n\nfunction setup() {\n  audio = createAudio('assets/lucky_dragons.mp3', loaded);\n  textAlign(CENTER);\n}\n\nfunction draw() {\n  if (counter === 0) {\n    background(0, 255, 0);\n    text('volume(0.9)', width / 2, height / 2);\n  } else if (counter === 1) {\n    background(255, 255, 0);\n    text('volume(0.5)', width / 2, height / 2);\n  } else if (counter === 2) {\n    background(255, 0, 0);\n    text('volume(0.1)', width / 2, height / 2);\n  }\n}\n\nfunction mousePressed() {\n  counter++;\n  if (counter === 0) {\n    audio.volume(0.9);\n  } else if (counter === 1) {\n    audio.volume(0.5);\n  } else if (counter === 2) {\n    audio.volume(0.1);\n  } else {\n    counter = 0;\n    audio.volume(0.9);\n  }\n}\n</code>\n</div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM","overloads":[{"line":2802,"params":[],"return":{"description":"current volume","type":"Number"}},{"line":2875,"params":[{"name":"val","description":"<p>volume between 0.0 and 1.0</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":2888,"description":"<p>If no arguments are given, returns the current playback speed of the\nelement. The speed parameter sets the speed where 2.0 will play the\nelement twice as fast, 0.5 will play at half the speed, and -1 will play\nthe element in normal speed in reverse.(Note that not all browsers support\nbackward playback and even if they do, playback might not be smooth.)</p>\n","itemtype":"method","name":"speed","return":{"description":"current playback speed of the element","type":"Number"},"example":["\n<div class='norender notest'><code>\n//Clicking the canvas will loop\n//the audio sample until the user\n//clicks again to stop it\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\nlet button;\n\nfunction setup() {\n  createCanvas(710, 400);\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/beat.mp3');\n  ele.loop();\n  background(200);\n\n  button = createButton('2x speed');\n  button.position(100, 68);\n  button.mousePressed(twice_speed);\n\n  button = createButton('half speed');\n  button.position(200, 68);\n  button.mousePressed(half_speed);\n\n  button = createButton('reverse play');\n  button.position(300, 68);\n  button.mousePressed(reverse_speed);\n\n  button = createButton('STOP');\n  button.position(400, 68);\n  button.mousePressed(stop_song);\n\n  button = createButton('PLAY!');\n  button.position(500, 68);\n  button.mousePressed(play_speed);\n}\n\nfunction twice_speed() {\n  ele.speed(2);\n}\n\nfunction half_speed() {\n  ele.speed(0.5);\n}\n\nfunction reverse_speed() {\n  ele.speed(-1);\n}\n\nfunction stop_song() {\n  ele.stop();\n}\n\nfunction play_speed() {\n  ele.play();\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM","overloads":[{"line":2888,"params":[],"return":{"description":"current playback speed of the element","type":"Number"}},{"line":2960,"params":[{"name":"speed","description":"<p>speed multiplier for element playback</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":2977,"description":"<p>If no arguments are given, returns the current time of the element.\nIf an argument is given the current time of the element is set to it.</p>\n","itemtype":"method","name":"time","return":{"description":"current time (in seconds)","type":"Number"},"example":["\n<div><code>\nlet ele;\nlet beginning = true;\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n\n  //In this example we create\n  //a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(250);\n  textAlign(CENTER);\n  text('start at beginning', width / 2, height / 2);\n}\n\n// this function fires with click anywhere\nfunction mousePressed() {\n  if (beginning === true) {\n    // here we start the sound at the beginning\n    // time(0) is not necessary here\n    // as this produces the same result as\n    // play()\n    ele.play().time(0);\n    background(200);\n    text('jump 2 sec in', width / 2, height / 2);\n    beginning = false;\n  } else {\n    // here we jump 2 seconds into the sound\n    ele.play().time(2);\n    background(250);\n    text('start at beginning', width / 2, height / 2);\n    beginning = true;\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM","overloads":[{"line":2977,"params":[],"return":{"description":"current time (in seconds)","type":"Number"}},{"line":3022,"params":[{"name":"time","description":"<p>time to jump to (in seconds)</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":3036,"description":"<p>Returns the duration of the HTML5 media element.</p>\n","itemtype":"method","name":"duration","return":{"description":"duration","type":"Number"},"example":["\n<div><code>\nlet ele;\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n  //In this example we create\n  //a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/doorbell.mp3');\n  background(250);\n  textAlign(CENTER);\n  text('Click to know the duration!', 10, 25, 70, 80);\n}\nfunction mouseClicked() {\n  ele.play();\n  background(200);\n  //ele.duration dislpays the duration\n  text(ele.duration() + ' seconds', width / 2, height / 2);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3158,"description":"<p>Schedule an event to be called when the audio or video\nelement reaches the end. If the element is looping,\nthis will not be called. The element is passed in\nas the argument to the onended callback.</p>\n","itemtype":"method","name":"onended","params":[{"name":"callback","description":"<p>function to call when the\n                            soundfile has ended. The\n                            media element will be passed\n                            in as the argument to the\n                            callback.</p>\n","type":"Function"}],"chainable":1,"example":["\n<div><code>\nfunction setup() {\n  let audioEl = createAudio('assets/beat.mp3');\n  audioEl.showControls();\n  audioEl.onended(sayDone);\n}\n\nfunction sayDone(elt) {\n  alert('done playing ' + elt.src);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3189,"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3191,"description":"<p>Send the audio output of this element to a specified audioNode or\np5.sound object. If no element is provided, connects to p5's main\noutput. That connection is established when this method is first called.\nAll connections are removed by the .disconnect() method.</p>\n<p>This method is meant to be used with the p5.sound.js addon library.</p>\n","itemtype":"method","name":"connect","params":[{"name":"audioNode","description":"<p>AudioNode from the Web Audio API,\nor an object from the p5.sound library</p>\n","type":"AudioNode|Object"}],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3240,"description":"<p>Disconnect all Web Audio routing, including to main output.\nThis is useful if you want to re-route the output through\naudio effects, for example.</p>\n","itemtype":"method","name":"disconnect","class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3255,"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3257,"description":"<p>Show the default MediaElement controls, as determined by the web browser.</p>\n","itemtype":"method","name":"showControls","example":["\n<div><code>\nlet ele;\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n  //In this example we create\n  //a new p5.MediaElement via createAudio()\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to Show Controls!', 10, 25, 70, 80);\n}\nfunction mousePressed() {\n  ele.showControls();\n  background(200);\n  text('Controls Shown', width / 2, height / 2);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3288,"description":"<p>Hide the default mediaElement controls.</p>\n","itemtype":"method","name":"hideControls","example":["\n<div><code>\nlet ele;\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n  //In this example we create\n  //a new p5.MediaElement via createAudio()\n  ele = createAudio('assets/lucky_dragons.mp3');\n  ele.showControls();\n  background(200);\n  textAlign(CENTER);\n  text('Click to hide Controls!', 10, 25, 70, 80);\n}\nfunction mousePressed() {\n  ele.hideControls();\n  background(200);\n  text('Controls hidden', width / 2, height / 2);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3317,"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3328,"description":"<p>Schedule events to trigger every time a MediaElement\n(audio/video) reaches a playback cue point.</p>\n<p>Accepts a callback function, a time (in seconds) at which to trigger\nthe callback, and an optional parameter for the callback.</p>\n<p>Time will be passed as the first parameter to the callback function,\nand param will be the second parameter.</p>\n","itemtype":"method","name":"addCue","params":[{"name":"time","description":"<p>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.</p>\n","type":"Number"},{"name":"callback","description":"<p>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.</p>\n","type":"Function"},{"name":"value","description":"<p>An object to be passed as the\n                            second parameter to the\n                            callback function.</p>\n","type":"Object","optional":true}],"return":{"description":"id ID of this cue,\n                    useful for removeCue(id)","type":"Number"},"example":["\n<div><code>\n//\n//\nfunction setup() {\n  createCanvas(200, 200);\n\n  let audioEl = createAudio('assets/beat.mp3');\n  audioEl.showControls();\n\n  // schedule three calls to changeBackground\n  audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\n  audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\n  audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\n  audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\n  audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\n  audioEl.addCue(5.0, changeBackground, color(255, 255, 0));\n}\n\nfunction changeBackground(val) {\n  background(val);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3391,"description":"<p>Remove a callback based on its ID. The ID is returned by the\naddCue method.</p>\n","itemtype":"method","name":"removeCue","params":[{"name":"id","description":"<p>ID of the cue, as returned by addCue</p>\n","type":"Number"}],"example":["\n<div><code>\nlet audioEl, id1, id2;\nfunction setup() {\n  background(255, 255, 255);\n  audioEl = createAudio('assets/beat.mp3');\n  audioEl.showControls();\n  // schedule five calls to changeBackground\n  id1 = audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\n  audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\n  audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\n  audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\n  id2 = audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\n  text('Click to remove first and last Cue!', 10, 25, 70, 80);\n}\nfunction mousePressed() {\n  audioEl.removeCue(id1);\n  audioEl.removeCue(id2);\n}\nfunction changeBackground(val) {\n  background(val);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3433,"description":"<p>Remove all of the callbacks that had originally been scheduled\nvia the addCue method.</p>\n","itemtype":"method","name":"clearCues","params":[{"name":"id","description":"<p>ID of the cue, as returned by addCue</p>\n","type":"Number"}],"example":["\n<div><code>\nlet audioEl;\nfunction setup() {\n  background(255, 255, 255);\n  audioEl = createAudio('assets/beat.mp3');\n  //Show the default MediaElement controls, as determined by the web browser\n  audioEl.showControls();\n  // schedule calls to changeBackground\n  background(200);\n  text('Click to change Cue!', 10, 25, 70, 80);\n  audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\n  audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\n  audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\n  audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\n  audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\n}\nfunction mousePressed() {\n  // here we clear the scheduled callbacks\n  audioEl.clearCues();\n  // then we add some more callbacks\n  audioEl.addCue(1, changeBackground, color(2, 2, 2));\n  audioEl.addCue(3, changeBackground, color(255, 255, 0));\n}\nfunction changeBackground(val) {\n  background(val);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3499,"description":"<p>Underlying File object. All normal File methods can be called on this.</p>\n","itemtype":"property","name":"file","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3511,"description":"<p>File type (image, text, etc.)</p>\n","itemtype":"property","name":"type","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3517,"description":"<p>File subtype (usually the file extension jpg, png, xml, etc.)</p>\n","itemtype":"property","name":"subtype","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3523,"description":"<p>File name</p>\n","itemtype":"property","name":"name","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3529,"description":"<p>File size</p>\n","itemtype":"property","name":"size","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3536,"description":"<p>URL string containing either image data, the text contents of the file or\na parsed object if file is JSON and p5.XML if XML</p>\n","itemtype":"property","name":"data","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/events/acceleration.js","line":11,"description":"<p>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.</p>\n","itemtype":"property","name":"deviceOrientation","type":"Constant","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":23,"description":"<p>The system variable accelerationX always contains the acceleration of the\ndevice along the x axis. Value is represented as meters per second squared.</p>\n","itemtype":"property","name":"accelerationX","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"Magnitude of device acceleration is displayed as ellipse size","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":46,"description":"<p>The system variable accelerationY always contains the acceleration of the\ndevice along the y axis. Value is represented as meters per second squared.</p>\n","itemtype":"property","name":"accelerationY","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"Magnitude of device acceleration is displayed as ellipse size","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":69,"description":"<p>The system variable accelerationZ always contains the acceleration of the\ndevice along the z axis. Value is represented as meters per second squared.</p>\n","itemtype":"property","name":"accelerationZ","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"Magnitude of device acceleration is displayed as ellipse size","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":94,"description":"<p>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.</p>\n","itemtype":"property","name":"pAccelerationX","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":104,"description":"<p>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.</p>\n","itemtype":"property","name":"pAccelerationY","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":114,"description":"<p>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.</p>\n","itemtype":"property","name":"pAccelerationZ","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":135,"description":"<p>The system variable rotationX always contains the rotation of the\ndevice along the x axis. If the sketch <a href=\"#/p5/angleMode\">\nangleMode()</a> is set to DEGREES, the value will be -180 to 180. If\nit is set to RADIANS, the value will be -PI to PI.</p>\n<p>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.</p>\n","itemtype":"property","name":"rotationX","type":"Number","readonly":"","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  //rotateZ(radians(rotationZ));\n  rotateX(radians(rotationX));\n  //rotateY(radians(rotationY));\n  box(200, 200, 200);\n}\n</code>\n</div>"],"alt":"red horizontal line right, green vertical line bottom. black background.","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":168,"description":"<p>The system variable rotationY always contains the rotation of the\ndevice along the y axis. If the sketch <a href=\"#/p5/angleMode\">\nangleMode()</a> 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.</p>\n<p>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.</p>\n","itemtype":"property","name":"rotationY","type":"Number","readonly":"","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  //rotateZ(radians(rotationZ));\n  //rotateX(radians(rotationX));\n  rotateY(radians(rotationY));\n  box(200, 200, 200);\n}\n</code>\n</div>"],"alt":"red horizontal line right, green vertical line bottom. black background.","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":201,"description":"<p>The system variable rotationZ always contains the rotation of the\ndevice along the z axis. If the sketch <a href=\"#/p5/angleMode\">\nangleMode()</a> 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.</p>\n<p>Unlike rotationX and rotationY, this variable is available for devices\nwith a built-in compass only.</p>\n<p>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.</p>\n","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  rotateZ(radians(rotationZ));\n  //rotateX(radians(rotationX));\n  //rotateY(radians(rotationY));\n  box(200, 200, 200);\n}\n</code>\n</div>"],"itemtype":"property","name":"rotationZ","type":"Number","readonly":"","alt":"red horizontal line right, green vertical line bottom. black background.","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":239,"description":"<p>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 <a href=\"#/p5/angleMode\"> angleMode()</a> is set to DEGREES,\nthe value will be -180 to 180. If it is set to RADIANS, the value will\nbe -PI to PI.</p>\n<p>pRotationX can also be used with rotationX to determine the rotate\ndirection of the device along the X-axis.</p>\n","example":["\n<div class='norender'>\n<code>\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);\n</code>\n</div>"],"alt":"no image to display.","itemtype":"property","name":"pRotationX","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":285,"description":"<p>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 <a href=\"#/p5/angleMode\"> angleMode()</a> 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.</p>\n<p>pRotationY can also be used with rotationY to determine the rotate\ndirection of the device along the Y-axis.</p>\n","example":["\n<div class='norender'>\n<code>\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);\n</code>\n</div>"],"alt":"no image to display.","itemtype":"property","name":"pRotationY","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":330,"description":"<p>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 <a href=\"#/p5/angleMode\"> angleMode()</a> 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.</p>\n<p>pRotationZ can also be used with rotationZ to determine the rotate\ndirection of the device along the Z-axis.</p>\n","example":["\n<div class='norender'>\n<code>\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);\n</code>\n</div>"],"alt":"no image to display.","itemtype":"property","name":"pRotationZ","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":389,"description":"<p>When a device is rotated, the axis that triggers the <a href=\"#/p5/deviceTurned\">deviceTurned()</a>\nmethod is stored in the turnAxis variable. The turnAxis variable is only defined within\nthe scope of deviceTurned().</p>\n","itemtype":"property","name":"turnAxis","type":"String","readonly":"","example":["\n<div>\n<code>\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}\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</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device turns\n50x50 black rect in center of canvas. turns white on mobile when x-axis turns","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":428,"description":"<p>The <a href=\"#/p5/setMoveThreshold\">setMoveThreshold()</a> function is used to set the movement threshold for\nthe <a href=\"#/p5/deviceMoved\">deviceMoved()</a> function. The default threshold is set to 0.5.</p>\n","itemtype":"method","name":"setMoveThreshold","params":[{"name":"value","description":"<p>The threshold value</p>\n","type":"Number"}],"example":["\n<div class=\"norender\">\n<code>\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}\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</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device moves","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":471,"description":"<p>The <a href=\"#/p5/setShakeThreshold\">setShakeThreshold()</a> function is used to set the movement threshold for\nthe <a href=\"#/p5/deviceShaken\">deviceShaken()</a> function. The default threshold is set to 30.</p>\n","itemtype":"method","name":"setShakeThreshold","params":[{"name":"value","description":"<p>The threshold value</p>\n","type":"Number"}],"example":["\n<div class=\"norender\">\n<code>\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}\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</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device\nis being shaked","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":515,"description":"<p>The <a href=\"#/p5/deviceMoved\">deviceMoved()</a> 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 <a href=\"https://p5js.org/reference/#/p5/setMoveThreshold\">setMoveThreshold()</a>.</p>\n","itemtype":"method","name":"deviceMoved","example":["\n<div class=\"norender\">\n<code>\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}\nfunction deviceMoved() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device moves","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":546,"description":"<p>The <a href=\"#/p5/deviceTurned\">deviceTurned()</a> function is called when the device rotates by\nmore than 90 degrees continuously.</p>\n<p>The axis that triggers the <a href=\"#/p5/deviceTurned\">deviceTurned()</a> method is stored in the turnAxis\nvariable. The <a href=\"#/p5/deviceTurned\">deviceTurned()</a> method can be locked to trigger on any axis:\nX, Y or Z by comparing the turnAxis variable to 'X', 'Y' or 'Z'.</p>\n","itemtype":"method","name":"deviceTurned","example":["\n<div class=\"norender\">\n<code>\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}\nfunction deviceTurned() {\n  if (value === 0) {\n    value = 255;\n  } else if (value === 255) {\n    value = 0;\n  }\n}\n</code>\n</div>\n<div>\n<code>\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}\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</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device turns\n50x50 black rect in center of canvas. turns white on mobile when x-axis turns","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":604,"description":"<p>The <a href=\"#/p5/deviceShaken\">deviceShaken()</a> 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 <a href=\"https://p5js.org/reference/#/p5/setShakeThreshold\">setShakeThreshold()</a>.</p>\n","itemtype":"method","name":"deviceShaken","example":["\n<div class=\"norender\">\n<code>\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}\nfunction deviceShaken() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device shakes","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/keyboard.js","line":10,"description":"<p>The boolean system variable <a href=\"#/p5/keyIsPressed\">keyIsPressed</a> is true if any key is pressed\nand false if no keys are pressed.</p>\n","itemtype":"property","name":"keyIsPressed","type":"Boolean","readonly":"","example":["\n<div>\n<code>\nfunction draw() {\n  if (keyIsPressed === true) {\n    fill(0);\n  } else {\n    fill(255);\n  }\n  rect(25, 25, 50, 50);\n}\n</code>\n</div>"],"alt":"50x50 white rect that turns black on keypress.","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":36,"description":"<p>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 <a href=\"#/p5/keyTyped\">keyTyped()</a>. For non-ASCII keys, use the <a href=\"#/p5/keyCode\">keyCode</a>\nvariable.</p>\n","itemtype":"property","name":"key","type":"String","readonly":"","example":["\n<div><code>\n// Click any key to display it!\n// (Not Guaranteed to be Case Sensitive)\nfunction setup() {\n  fill(245, 123, 158);\n  textSize(50);\n}\n\nfunction draw() {\n  background(200);\n  text(key, 33, 65); // Display last key pressed.\n}\n</code></div>"],"alt":"canvas displays any key value that is pressed in pink font.","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":64,"description":"<p>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: <a href=\"http://keycode.info/\">keycode.info</a>.</p>\n","itemtype":"property","name":"keyCode","type":"Integer","readonly":"","example":["\n<div><code>\nlet fillVal = 126;\nfunction draw() {\n  fill(fillVal);\n  rect(25, 25, 50, 50);\n}\n\nfunction keyPressed() {\n  if (keyCode === UP_ARROW) {\n    fillVal = 255;\n  } else if (keyCode === DOWN_ARROW) {\n    fillVal = 0;\n  }\n}\n</code></div>\n<div><code>\nfunction draw() {}\nfunction keyPressed() {\n  background('yellow');\n  text(`${key} ${keyCode}`, 10, 40);\n  print(key, ' ', keyCode);\n}\n</code></div>"],"alt":"Grey rect center. turns white when up arrow pressed and black when down\nDisplay key pressed and its keyCode in a yellow box","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":103,"description":"<p>The <a href=\"#/p5/keyPressed\">keyPressed()</a> function is called once every time a key is pressed. The\nkeyCode for the key that was pressed is stored in the <a href=\"#/p5/keyCode\">keyCode</a> variable.</p>\n<p>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.</p>\n<p>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 <a href=\"#/p5/keyTyped\">keyTyped()</a> to read the key variable, in which the\ncase of the variable will be distinguished.</p>\n<p>Because of how operating systems handle key repeats, holding down a key\nmay cause multiple calls to <a href=\"#/p5/keyTyped\">keyTyped()</a> (and <a href=\"#/p5/keyReleased\">keyReleased()</a> as well). The\nrate of repeat is set by the operating system and how each computer is\nconfigured.<br><br>\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.</p>\n","itemtype":"method","name":"keyPressed","params":[{"name":"event","description":"<p>optional KeyboardEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyPressed() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyPressed() {\n  if (keyCode === LEFT_ARROW) {\n    value = 255;\n  } else if (keyCode === RIGHT_ARROW) {\n    value = 0;\n  }\n}\n</code>\n</div>\n<div class=\"norender\">\n<code>\nfunction keyPressed() {\n  // Do something\n  return false; // prevent any default behaviour\n}\n</code>\n</div>"],"alt":"black rect center. turns white when key pressed and black when released\nblack rect center. turns white when left arrow pressed and black when right.","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":190,"description":"<p>The <a href=\"#/p5/keyReleased\">keyReleased()</a> function is called once every time a key is released.\nSee <a href=\"#/p5/key\">key</a> and <a href=\"#/p5/keyCode\">keyCode</a> for more information.<br><br>\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.</p>\n","itemtype":"method","name":"keyReleased","params":[{"name":"event","description":"<p>optional KeyboardEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyReleased() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n  return false; // prevent any default behavior\n}\n</code>\n</div>"],"alt":"black rect center. turns white when key pressed and black when pressed again","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":243,"description":"<p>The <a href=\"#/p5/keyTyped\">keyTyped()</a> 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 <a href=\"#/p5/keyPressed\">keyPressed()</a> function instead.\nThe most recent key typed will be stored in the key variable.</p>\n<p>Because of how operating systems handle key repeats, holding down a key\nwill cause multiple calls to <a href=\"#/p5/keyTyped\">keyTyped()</a> (and <a href=\"#/p5/keyReleased\">keyReleased()</a> as well). The\nrate of repeat is set by the operating system and how each computer is\nconfigured.<br><br>\nBrowsers may have different default behaviors attached to various key\nevents. To prevent any default behavior for this event, add \"return false\"\nto the end of the method.</p>\n","itemtype":"method","name":"keyTyped","params":[{"name":"event","description":"<p>optional KeyboardEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyTyped() {\n  if (key === 'a') {\n    value = 255;\n  } else if (key === 'b') {\n    value = 0;\n  }\n  // uncomment to prevent any default behavior\n  // return false;\n}\n</code>\n</div>"],"alt":"black rect center. turns white when 'a' key typed and black when 'b' pressed","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":298,"description":"<p>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.</p>\n","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":308,"description":"<p>The <a href=\"#/p5/keyIsDown\">keyIsDown()</a> 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 <a href=\"#/p5/keyCode\">keyCode</a> names listed\n<a href=\"http://p5js.org/reference/#p5/keyCode\">here</a>.</p>\n","itemtype":"method","name":"keyIsDown","params":[{"name":"code","description":"<p>The key to check for.</p>\n","type":"Number"}],"return":{"description":"whether key is down or not","type":"Boolean"},"example":["\n<div><code>\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}\n</code></div>\n\n<div><code>\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}\n</code></div>"],"alt":"50x50 red ellipse moves left, right, up and down with arrow presses.\n50x50 red ellipse gets bigger or smaller when + or - are pressed.","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/mouse.js","line":12,"description":"<p>The variable movedX contains the horizontal movement of the mouse since the last frame</p>\n","itemtype":"property","name":"movedX","type":"Number","readonly":"","example":["\n <div class=\"notest\">\n <code>\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 }\n </code>\n </div>"],"alt":"box moves left and right according to mouse movement then slowly back towards the center","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":43,"description":"<p>The variable movedY contains the vertical movement of the mouse since the last frame</p>\n","itemtype":"property","name":"movedY","type":"Number","readonly":"","example":["\n<div class=\"notest\">\n<code>\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(y, 50, 50, 50);\n}\n</code>\n</div>"],"alt":"box moves up and down according to mouse movement then slowly back towards the center","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":80,"description":"<p>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.</p>\n","itemtype":"property","name":"mouseX","type":"Number","readonly":"","example":["\n<div>\n<code>\n// Move the mouse across the canvas\nfunction draw() {\n  background(244, 248, 252);\n  line(mouseX, 0, mouseX, 100);\n}\n</code>\n</div>"],"alt":"horizontal black line moves left and right with mouse x-position","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":106,"description":"<p>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.</p>\n","itemtype":"property","name":"mouseY","type":"Number","readonly":"","example":["\n<div>\n<code>\n// Move the mouse across the canvas\nfunction draw() {\n  background(244, 248, 252);\n  line(0, mouseY, 100, mouseY);\n}\n</code>\n</div>"],"alt":"vertical black line moves up and down with mouse y-position","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":132,"description":"<p>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.</p>\n","itemtype":"property","name":"pmouseX","type":"Number","readonly":"","example":["\n<div>\n<code>\n// Move the mouse across the canvas to leave a trail\nfunction setup() {\n  //slow down the frameRate to make it more visible\n  frameRate(10);\n}\n\nfunction draw() {\n  background(244, 248, 252);\n  line(mouseX, mouseY, pmouseX, pmouseY);\n  print(pmouseX + ' -> ' + mouseX);\n}\n</code>\n</div>"],"alt":"line trail is created from cursor movements. faster movement make longer line.","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":164,"description":"<p>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.</p>\n","itemtype":"property","name":"pmouseY","type":"Number","readonly":"","example":["\n<div>\n<code>\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n  //draw a square only if the mouse is not moving\n  if (mouseY === pmouseY && mouseX === pmouseX) {\n    rect(20, 20, 60, 60);\n  }\n\n  print(pmouseY + ' -> ' + mouseY);\n}\n</code>\n</div>"],"alt":"60x60 black rect center, fuchsia background. rect flickers on mouse movement","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":195,"description":"<p>The system variable winMouseX always contains the current horizontal\nposition of the mouse, relative to (0, 0) of the window.</p>\n","itemtype":"property","name":"winMouseX","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"60x60 black rect y moves with mouse y and fuchsia canvas moves with mouse x","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":233,"description":"<p>The system variable winMouseY always contains the current vertical\nposition of the mouse, relative to (0, 0) of the window.</p>\n","itemtype":"property","name":"winMouseY","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"60x60 black rect x moves with mouse x and fuchsia canvas y moves with mouse y","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":271,"description":"<p>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.</p>\n","itemtype":"property","name":"pwinMouseX","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"fuchsia ellipse moves with mouse x and y. Grows and shrinks with mouse speed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":311,"description":"<p>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.</p>\n","itemtype":"property","name":"pwinMouseY","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"fuchsia ellipse moves with mouse x and y. Grows and shrinks with mouse speed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":351,"description":"<p>Processing automatically tracks if the mouse button is pressed and which\nbutton is pressed. The value of the system variable mouseButton is either\nLEFT, RIGHT, or CENTER depending on which button was pressed last.\nWarning: different browsers may track mouseButton differently.</p>\n","itemtype":"property","name":"mouseButton","type":"Constant","readonly":"","example":["\n<div>\n<code>\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n\n  if (mouseIsPressed) {\n    if (mouseButton === LEFT) {\n      ellipse(50, 50, 50, 50);\n    }\n    if (mouseButton === RIGHT) {\n      rect(25, 25, 50, 50);\n    }\n    if (mouseButton === CENTER) {\n      triangle(23, 75, 50, 20, 78, 75);\n    }\n  }\n\n  print(mouseButton);\n}\n</code>\n</div>"],"alt":"50x50 black ellipse appears on center of fuchsia canvas on mouse click/press.","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":389,"description":"<p>The boolean system variable mouseIsPressed is true if the mouse is pressed\nand false if not.</p>\n","itemtype":"property","name":"mouseIsPressed","type":"Boolean","readonly":"","example":["\n<div>\n<code>\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n\n  if (mouseIsPressed) {\n    ellipse(50, 50, 50, 50);\n  } else {\n    rect(25, 25, 50, 50);\n  }\n\n  print(mouseIsPressed);\n}\n</code>\n</div>"],"alt":"black 50x50 rect becomes ellipse with mouse click/press. fuchsia background.","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":481,"description":"<p>The <a href=\"#/p5/mouseMoved\">mouseMoved()</a> function is called every time the mouse moves and a mouse\nbutton is not pressed.<br><br>\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.</p>\n","itemtype":"method","name":"mouseMoved","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction mouseMoved() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mouseMoved() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseMoved(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect becomes lighter with mouse movements until white then resets\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":535,"description":"<p>The <a href=\"#/p5/mouseDragged\">mouseDragged()</a> function is called once every time the mouse moves and\na mouse button is pressed. If no <a href=\"#/p5/mouseDragged\">mouseDragged()</a> function is defined, the\n<a href=\"#/p5/touchMoved\">touchMoved()</a> function will be called instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"mouseDragged","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction mouseDragged() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mouseDragged() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseDragged(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns lighter with mouse click and drag until white, resets\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":615,"description":"<p>The <a href=\"#/p5/mousePressed\">mousePressed()</a> 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\n<a href=\"#/p5/mousePressed\">mousePressed()</a> function is defined, the <a href=\"#/p5/touchStarted\">touchStarted()</a> function will be\ncalled instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"mousePressed","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\n// Click 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}\nfunction mousePressed() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mousePressed() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mousePressed(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns white with mouse click/press.\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":696,"description":"<p>The <a href=\"#/p5/mouseReleased\">mouseReleased()</a> function is called every time a mouse button is\nreleased. If no <a href=\"#/p5/mouseReleased\">mouseReleased()</a> function is defined, the <a href=\"#/p5/touchEnded\">touchEnded()</a>\nfunction will be called instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"mouseReleased","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction mouseReleased() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mouseReleased() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseReleased(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns white with mouse click/press.\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":772,"description":"<p>The <a href=\"#/p5/mouseClicked\">mouseClicked()</a> function is called once after a mouse button has been\npressed and then released.<br><br>\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 <a href=\"#/p5/mousePressed\">mousePressed()</a> or <a href=\"#/p5/mouseReleased\">mouseReleased()</a>.<br><br>\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.</p>\n","itemtype":"method","name":"mouseClicked","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\n\nfunction mouseClicked() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mouseClicked() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseClicked(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns white with mouse click/press.\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":841,"description":"<p>The <a href=\"#/p5/doubleClicked\">doubleClicked()</a> 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:\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/Events/dblclick\">https://developer.mozilla.org/en-US/docs/Web/Events/dblclick</a></p>\n","itemtype":"method","name":"doubleClicked","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\n\nfunction doubleClicked() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction doubleClicked() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction doubleClicked(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns white with mouse doubleClick/press.\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":926,"description":"<p>The function <a href=\"#/p5/mouseWheel\">mouseWheel()</a> is executed every time a vertical mouse wheel\nevent is detected either triggered by an actual mouse wheel or by a\ntouchpad.<br><br>\nThe event.delta property returns the amount the mouse wheel\nhave scrolled. The values can be positive or negative depending on the\nscroll direction (on OS X with \"natural\" scrolling enabled, the signs\nare inverted).<br><br>\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.<br><br>\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.</p>\n","itemtype":"method","name":"mouseWheel","params":[{"name":"event","description":"<p>optional WheelEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\nlet pos = 25;\n\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n  rect(25, pos, 50, 50);\n}\n\nfunction mouseWheel(event) {\n  print(event.delta);\n  //move the square according to the vertical scroll amount\n  pos += event.delta;\n  //uncomment to block page scrolling\n  //return false;\n}\n</code>\n</div>"],"alt":"black 50x50 rect moves up and down with vertical scroll. fuchsia background","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":979,"description":"<p>The function <a href=\"#/p5/requestPointerLock\">requestPointerLock()</a>\nlocks the pointer to its current position and makes it invisible.\nUse <a href=\"#/p5/movedX\">movedX</a> and <a href=\"#/p5/movedY\">movedY</a> 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.</p>\n","itemtype":"method","name":"requestPointerLock","example":["\n<div class=\"notest\">\n<code>\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}\n</code>\n</div>"],"alt":"3D scene moves according to mouse mouse movement in a first person perspective","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":1025,"description":"<p>The function <a href=\"#/p5/exitPointerLock\">exitPointerLock()</a>\nexits a previously triggered <a href=\"#/p5/requestPointerLock\">pointer Lock</a>\nfor example to make ui elements usable etc</p>\n","itemtype":"method","name":"exitPointerLock","example":["\n<div class=\"notest\">\n<code>\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}\nfunction mouseClicked() {\n  if (!locked) {\n    locked = true;\n    requestPointerLock();\n  } else {\n    exitPointerLock();\n    locked = false;\n  }\n}\n</code>\n</div>"],"alt":"cursor gets locked / unlocked on mouse-click","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/touch.js","line":10,"description":"<p>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.</p>\n<p>The touches[] array is not supported on Safari and IE on touch-based\ndesktops (laptops).</p>\n","itemtype":"property","name":"touches","type":"Object[]","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"Number of touches currently registered are displayed on the canvas","class":"p5","module":"Events","submodule":"Touch"},{"file":"src/events/touch.js","line":71,"description":"<p>The touchStarted() function is called once after every time a touch is\nregistered. If no <a href=\"#/p5/touchStarted\">touchStarted()</a> function is defined, the <a href=\"#/p5/mousePressed\">mousePressed()</a>\nfunction will be called instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"touchStarted","params":[{"name":"event","description":"<p>optional TouchEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction touchStarted() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction touchStarted() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a TouchEvent object\n// as a callback argument\nfunction touchStarted(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"50x50 black rect turns white with touch event.\nno image displayed","class":"p5","module":"Events","submodule":"Touch"},{"file":"src/events/touch.js","line":151,"description":"<p>The <a href=\"#/p5/touchMoved\">touchMoved()</a> function is called every time a touch move is registered.\nIf no <a href=\"#/p5/touchMoved\">touchMoved()</a> function is defined, the <a href=\"#/p5/mouseDragged\">mouseDragged()</a> function will\nbe called instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"touchMoved","params":[{"name":"event","description":"<p>optional TouchEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction touchMoved() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction touchMoved() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a TouchEvent object\n// as a callback argument\nfunction touchMoved(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"50x50 black rect turns lighter with touch until white. resets\nno image displayed","class":"p5","module":"Events","submodule":"Touch"},{"file":"src/events/touch.js","line":223,"description":"<p>The <a href=\"#/p5/touchEnded\">touchEnded()</a> function is called every time a touch ends. If no\n<a href=\"#/p5/touchEnded\">touchEnded()</a> function is defined, the <a href=\"#/p5/mouseReleased\">mouseReleased()</a> function will be\ncalled instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"touchEnded","params":[{"name":"event","description":"<p>optional TouchEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction touchEnded() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction touchEnded() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a TouchEvent object\n// as a callback argument\nfunction touchEnded(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"50x50 black rect turns white with touch.\nno image displayed","class":"p5","module":"Events","submodule":"Touch"},{"file":"src/image/filters.js","line":3,"description":"<p>This module defines the filters for use with image buffers.</p>\n<p>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.</p>\n<p>Generally speaking users of this module will use the Filters.apply method\non a canvas to create an effect.</p>\n<p>A number of functions are borrowed/adapted from\n<a href=\"http://www.html5rocks.com/en/tutorials/canvas/imagefilters/\">http://www.html5rocks.com/en/tutorials/canvas/imagefilters/</a>\nor the java processing implementation.</p>\n","class":"p5","module":"Events"},{"file":"src/image/image.js","line":8,"description":"<p>This module defines the p5 methods for the <a href=\"#/p5.Image\">p5.Image</a> class\nfor drawing images to the main display canvas.</p>\n","class":"p5","module":"Image","submodule":"Image"},{"file":"src/image/image.js","line":15,"description":"<p>Creates a new <a href=\"#/p5.Image\">p5.Image</a> (the datatype for storing images). This provides a\nfresh buffer of pixels to play with. Set the size of the buffer with the\nwidth and height parameters.</p>\n<p>.<a href=\"#/p5.Image/pixels\">pixels</a> gives access to an array containing the values for all the pixels\nin the display window.\nThese values are numbers. This array is the size (including an appropriate\nfactor for the <a href=\"#/p5/pixelDensity\">pixelDensity</a>) of the display window x4,\nrepresenting the R, G, B, A values in order for each pixel, moving from\nleft to right across each row, then down each column. See .<a href=\"#/p5.Image/pixels\">pixels</a> for\nmore info. It may also be simpler to use <a href=\"#/p5.Image/set\">set()</a> or <a href=\"#/p5.Image/get\">get()</a>.</p>\n<p>Before accessing the pixels of an image, the data must loaded with the\n<a href=\"#/p5.Image/loadPixels\">loadPixels()</a> function. After the array data has been modified, the\n<a href=\"#/p5.Image/updatePixels\">updatePixels()</a> function must be run to update the changes.</p>\n","itemtype":"method","name":"createImage","params":[{"name":"width","description":"<p>width in pixels</p>\n","type":"Integer"},{"name":"height","description":"<p>height in pixels</p>\n","type":"Integer"}],"return":{"description":"the <a href=\"#/p5.Image\">p5.Image</a> object","type":"p5.Image"},"example":["\n<div>\n<code>\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < img.width; i++) {\n  for (let j = 0; j < img.height; j++) {\n    img.set(i, j, color(0, 90, 102));\n  }\n}\nimg.updatePixels();\nimage(img, 17, 17);\n</code>\n</div>\n\n<div>\n<code>\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < img.width; i++) {\n  for (let j = 0; j < img.height; j++) {\n    img.set(i, j, color(0, 90, 102, (i % img.width) * 2));\n  }\n}\nimg.updatePixels();\nimage(img, 17, 17);\nimage(img, 34, 34);\n</code>\n</div>\n\n<div>\n<code>\nlet pink = color(255, 102, 204);\nlet img = createImage(66, 66);\nimg.loadPixels();\nlet d = pixelDensity();\nlet halfImage = 4 * (img.width * d) * (img.height / 2 * d);\nfor (let i = 0; i < halfImage; i += 4) {\n  img.pixels[i] = red(pink);\n  img.pixels[i + 1] = green(pink);\n  img.pixels[i + 2] = blue(pink);\n  img.pixels[i + 3] = alpha(pink);\n}\nimg.updatePixels();\nimage(img, 17, 17);\n</code>\n</div>"],"alt":"66x66 dark turquoise rect in center of canvas.\n2 gradated dark turquoise rects fade left. 1 center 1 bottom right of canvas\nno image displayed","class":"p5","module":"Image","submodule":"Image"},{"file":"src/image/image.js","line":94,"description":"<p>Save the current canvas as an image. The browser will either save the\nfile immediately, or prompt the user with a dialogue window.</p>\n","itemtype":"method","name":"saveCanvas","example":["\n <div class='norender notest'><code>\n function setup() {\n let c = createCanvas(100, 100);\n background(255, 0, 0);\n saveCanvas(c, 'myCanvas', 'jpg');\n }\n </code></div>\n <div class='norender notest'><code>\n // note that this example has the same result as above\n // if no canvas is specified, defaults to main canvas\n function setup() {\n let c = createCanvas(100, 100);\n background(255, 0, 0);\n saveCanvas('myCanvas', 'jpg');\n\n // all of the following are valid\n saveCanvas(c, 'myCanvas', 'jpg');\n saveCanvas(c, 'myCanvas.jpg');\n saveCanvas(c, 'myCanvas');\n saveCanvas(c);\n saveCanvas('myCanvas', 'png');\n saveCanvas('myCanvas');\n saveCanvas();\n }\n </code></div>"],"alt":"no image displayed\n no image displayed\n no image displayed","class":"p5","module":"Image","submodule":"Image","overloads":[{"line":94,"params":[{"name":"selectedCanvas","description":"<p>a variable\n                                representing a specific html5 canvas (optional)</p>\n","type":"p5.Element|HTMLCanvasElement"},{"name":"filename","description":"","type":"String","optional":true},{"name":"extension","description":"<p>'jpg' or 'png'</p>\n","type":"String","optional":true}]},{"line":136,"params":[{"name":"filename","description":"","type":"String","optional":true},{"name":"extension","description":"","type":"String","optional":true}]}]},{"file":"src/image/image.js","line":413,"description":"<p>Capture a sequence of frames that can be used to create a movie.\nAccepts a callback. For example, you may wish to send the frames\nto a server where they can be stored or converted into a movie.\nIf no callback is provided, the browser will pop up save dialogues in an\nattempt to download all of the images that have just been created. With the\ncallback provided the image data isn't saved by default but instead passed\nas an argument to the callback function as an array of objects, with the\nsize of array equal to the total number of frames.</p>\n<p>Note that <a href=\"#/p5.Image/saveFrames\">saveFrames()</a> will only save the first 15 frames of an animation.\nTo export longer animations, you might look into a library like\n<a href=\"https://github.com/spite/ccapture.js/\">ccapture.js</a>.</p>\n","itemtype":"method","name":"saveFrames","params":[{"name":"filename","description":"","type":"String"},{"name":"extension","description":"<p>'jpg' or 'png'</p>\n","type":"String"},{"name":"duration","description":"<p>Duration in seconds to save the frames for.</p>\n","type":"Number"},{"name":"framerate","description":"<p>Framerate to save the frames in.</p>\n","type":"Number"},{"name":"callback","description":"<p>A callback function that will be executed\n                                to handle the image data. This function\n                                should accept an array as argument. The\n                                array will contain the specified number of\n                                frames of objects. Each object has three\n                                properties: imageData - an\n                                image/octet-stream, filename and extension.</p>\n","type":"Function(Array)","optional":true}],"example":["\n<div><code>\n function draw() {\n background(mouseX);\n }\n\n function mousePressed() {\n saveFrames('out', 'png', 1, 25, data => {\n   print(data);\n });\n }\n</code></div>"],"alt":"canvas background goes from light to dark with mouse x.","class":"p5","module":"Image","submodule":"Image"},{"file":"src/image/loading_displaying.js","line":18,"description":"<p>Loads an image from a path and creates a <a href=\"#/p5.Image\">p5.Image</a> from it.</p>\n<p>The image may not be immediately available for rendering.\nIf you want to ensure that the image is ready before doing\nanything with it, place the <a href=\"#/p5/loadImage\">loadImage()</a> call in <a href=\"#/p5/preload\">preload()</a>.\nYou may also supply a callback function to handle the image when it's ready.</p>\n<p>The path to the image should be relative to the HTML file\nthat links in your sketch. Loading an image from a URL or other\nremote location may be blocked due to your browser's built-in\nsecurity.</p>\n<p>You can also pass in a string of a base64 encoded image as an alternative to the file path.\nRemember to add \"data:image/png;base64,\" in front of the string.</p>\n","itemtype":"method","name":"loadImage","params":[{"name":"path","description":"<p>Path of the image to be loaded</p>\n","type":"String"},{"name":"successCallback","description":"<p>Function to be called once\n                               the image is loaded. Will be passed the\n                               <a href=\"#/p5.Image\">p5.Image</a>.</p>\n","type":"function(p5.Image)","optional":true},{"name":"failureCallback","description":"<p>called with event error if\n                               the image fails to load.</p>\n","type":"Function(Event)","optional":true}],"return":{"description":"the <a href=\"#/p5.Image\">p5.Image</a> object","type":"p5.Image"},"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n}\n</code>\n</div>\n<div>\n<code>\nfunction setup() {\n  // here we use a callback to display the image after loading\n  loadImage('assets/laDefense.jpg', img => {\n    image(img, 0, 0);\n  });\n}\n</code>\n</div>"],"alt":"image of the underside of a white umbrella and grided ceililng above\nimage of the underside of a white umbrella and grided ceililng above","class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/loading_displaying.js","line":162,"description":"<p>Helper function for loading GIF-based images</p>\n","class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/loading_displaying.js","line":269,"description":"<p>Draw an image to the p5.js canvas.</p>\n<p>This function can be used with different numbers of parameters. The\nsimplest use requires only three parameters: img, x, and y—where (x, y) is\nthe position of the image. Two more parameters can optionally be added to\nspecify the width and height of the image.</p>\n<p>This function can also be used with all eight Number parameters. To\ndifferentiate between all these parameters, p5.js uses the language of\n\"destination rectangle\" (which corresponds to \"dx\", \"dy\", etc.) and \"source\nimage\" (which corresponds to \"sx\", \"sy\", etc.) below. Specifying the\n\"source image\" dimensions can be useful when you want to display a\nsubsection of the source image instead of the whole thing. Here's a diagram\nto explain further:\n<img src=\"assets/drawImage.png\"></img></p>\n","itemtype":"method","name":"image","example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  // Top-left corner of the img is at (0, 0)\n  // Width and height are the img's original width and height\n  image(img, 0, 0);\n}\n</code>\n</div>\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  background(50);\n  // Top-left corner of the img is at (10, 10)\n  // Width and height are 50 x 50\n  image(img, 10, 10, 50, 50);\n}\n</code>\n</div>\n<div>\n<code>\nfunction setup() {\n  // Here, we use a callback to display the image after loading\n  loadImage('assets/laDefense.jpg', img => {\n    image(img, 0, 0);\n  });\n}\n</code>\n</div>\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/gradient.png');\n}\nfunction setup() {\n  // 1. Background image\n  // Top-left corner of the img is at (0, 0)\n  // Width and height are the img's original width and height, 100 x 100\n  image(img, 0, 0);\n  // 2. Top right image\n  // Top-left corner of destination rectangle is at (50, 0)\n  // Destination rectangle width and height are 40 x 20\n  // The next parameters are relative to the source image:\n  // - Starting at position (50, 50) on the source image, capture a 50 x 50\n  // subsection\n  // - Draw this subsection to fill the dimensions of the destination rectangle\n  image(img, 50, 0, 40, 20, 50, 50, 50, 50);\n}\n</code>\n</div>"],"alt":"image of the underside of a white umbrella and gridded ceiling above\nimage of the underside of a white umbrella and gridded ceiling above","class":"p5","module":"Image","submodule":"Loading & Displaying","overloads":[{"line":269,"params":[{"name":"img","description":"<p>the image to display</p>\n","type":"p5.Image|p5.Element"},{"name":"x","description":"<p>the x-coordinate of the top-left corner of the image</p>\n","type":"Number"},{"name":"y","description":"<p>the y-coordinate of the top-left corner of the image</p>\n","type":"Number"},{"name":"width","description":"<p>the width to draw the image</p>\n","type":"Number","optional":true},{"name":"height","description":"<p>the height to draw the image</p>\n","type":"Number","optional":true}]},{"line":356,"params":[{"name":"img","description":"","type":"p5.Image|p5.Element"},{"name":"dx","description":"<p>the x-coordinate of the destination\n                          rectangle in which to draw the source image</p>\n","type":"Number"},{"name":"dy","description":"<p>the y-coordinate of the destination\n                          rectangle in which to draw the source image</p>\n","type":"Number"},{"name":"dWidth","description":"<p>the width of the destination rectangle</p>\n","type":"Number"},{"name":"dHeight","description":"<p>the height of the destination rectangle</p>\n","type":"Number"},{"name":"sx","description":"<p>the x-coordinate of the subsection of the source\nimage to draw into the destination rectangle</p>\n","type":"Number"},{"name":"sy","description":"<p>the y-coordinate of the subsection of the source\nimage to draw into the destination rectangle</p>\n","type":"Number"},{"name":"sWidth","description":"<p>the width of the subsection of the\n                          source image to draw into the destination\n                          rectangle</p>\n","type":"Number","optional":true},{"name":"sHeight","description":"<p>the height of the subsection of the\n                           source image to draw into the destination rectangle</p>\n","type":"Number","optional":true}]}]},{"file":"src/image/loading_displaying.js","line":439,"description":"<p>Sets the fill value for displaying images. Images can be tinted to\nspecified colors or made transparent by including an alpha value.</p>\n<p>To apply transparency to an image without affecting its color, use\nwhite as the tint color and specify an alpha value. For instance,\ntint(255, 128) will make an image 50% transparent (assuming the default\nalpha range of 0-255, which can be changed with <a href=\"#/p5/colorMode\">colorMode()</a>).</p>\n<p>The value for the gray parameter must be less than or equal to the current\nmaximum value as specified by <a href=\"#/p5/colorMode\">colorMode()</a>. The default maximum value is\n255.</p>\n","itemtype":"method","name":"tint","example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  tint(0, 153, 204); // Tint blue\n  image(img, 50, 0);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  tint(0, 153, 204, 126); // Tint blue and set transparency\n  image(img, 50, 0);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  tint(255, 126); // Apply transparency without changing color\n  image(img, 50, 0);\n}\n</code>\n</div>"],"alt":"2 side by side images of umbrella and ceiling, one image with blue tint\nImages of umbrella and ceiling, one half of image with blue tint\n2 side by side images of umbrella and ceiling, one image translucent","class":"p5","module":"Image","submodule":"Loading & Displaying","overloads":[{"line":439,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}]},{"line":510,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}]},{"line":515,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}]},{"line":521,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}]},{"line":527,"params":[{"name":"color","description":"<p>the tint color</p>\n","type":"p5.Color"}]}]},{"file":"src/image/loading_displaying.js","line":537,"description":"<p>Removes the current fill value for displaying images and reverts to\ndisplaying images with their original hues.</p>\n","itemtype":"method","name":"noTint","example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  tint(0, 153, 204); // Tint blue\n  image(img, 0, 0);\n  noTint(); // Disable tint\n  image(img, 50, 0);\n}\n</code>\n</div>"],"alt":"2 side by side images of bricks, left image with blue tint","class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/loading_displaying.js","line":601,"description":"<p>Set image mode. Modifies the location from which images are drawn by\nchanging the way in which parameters given to <a href=\"#/p5/image\">image()</a> are interpreted.\nThe default mode is imageMode(CORNER), which interprets the second and\nthird parameters of <a href=\"#/p5/image\">image()</a> as the upper-left corner of the image. If\ntwo additional parameters are specified, they are used to set the image's\nwidth and height.</p>\n<p>imageMode(CORNERS) interprets the second and third parameters of <a href=\"#/p5/image\">image()</a>\nas the location of one corner, and the fourth and fifth parameters as the\nopposite corner.</p>\n<p>imageMode(CENTER) interprets the second and third parameters of <a href=\"#/p5/image\">image()</a>\nas the image's center point. If two additional parameters are specified,\nthey are used to set the image's width and height.</p>\n","itemtype":"method","name":"imageMode","params":[{"name":"mode","description":"<p>either CORNER, CORNERS, or CENTER</p>\n","type":"Constant"}],"example":["\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  imageMode(CORNER);\n  image(img, 10, 10, 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  imageMode(CORNERS);\n  image(img, 10, 10, 90, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  imageMode(CENTER);\n  image(img, 50, 50, 80, 80);\n}\n</code>\n</div>"],"alt":"small square image of bricks\nhorizontal rectangle image of bricks\nlarge square image of bricks","class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/p5.Image.js","line":9,"description":"<p>This module defines the <a href=\"#/p5.Image\">p5.Image</a> class and P5 methods for\ndrawing images to the main display canvas.</p>\n","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":88,"description":"<p>Image width.</p>\n","itemtype":"property","name":"width","type":"Number","readonly":"","example":["\n<div><code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100);\n  image(img, 0, 0);\n  for (let i = 0; i < img.width; i++) {\n    let c = img.get(i, img.height / 2);\n    stroke(c);\n    line(i, height / 2, i, height);\n  }\n}\n</code></div>"],"alt":"rocky mountains in top and horizontal lines in corresponding colors in bottom.","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":115,"description":"<p>Image height.</p>\n","itemtype":"property","name":"height","type":"Number","readonly":"","example":["\n<div><code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100);\n  image(img, 0, 0);\n  for (let i = 0; i < img.height; i++) {\n    let c = img.get(img.width / 2, i);\n    stroke(c);\n    line(0, i, width / 2, i);\n  }\n}\n</code></div>"],"alt":"rocky mountains on right and vertical lines in corresponding colors on left.","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":152,"description":"<p>Array containing the values for all the pixels in the display window.\nThese values are numbers. This array is the size (include an appropriate\nfactor for pixelDensity) of the display window x4,\nrepresenting the R, G, B, A values in order for each pixel, moving from\nleft to right across each row, then down each column. Retina and other\nhigh density displays may have more pixels (by a factor of\npixelDensity^2).\nFor example, if the image is 100x100 pixels, there will be 40,000. With\npixelDensity = 2, there will be 160,000. The first four values\n(indices 0-3) in the array will be the R, G, B, A values of the pixel at\n(0, 0). The second four values (indices 4-7) will contain the R, G, B, A\nvalues of the pixel at (1, 0). More generally, to set values for a pixel\nat (x, y):</p>\n<pre><code class=\"language-javascript\">let d = pixelDensity();\nfor (let i = 0; i < d; i++) {\n  for (let j = 0; j < d; j++) {\n    // loop over\n    index = 4 * ((y * d + j) * width * d + (x * d + i));\n    pixels[index] = r;\n    pixels[index+1] = g;\n    pixels[index+2] = b;\n    pixels[index+3] = a;\n  }\n}</code></pre>\n<p>Before accessing this array, the data must loaded with the <a href=\"#/p5.Image/loadPixels\">loadPixels()</a>\nfunction. After the array data has been modified, the <a href=\"#/p5.Image/updatePixels\">updatePixels()</a>\nfunction must be run to update the changes.</p>\n","itemtype":"property","name":"pixels","type":"Number[]","example":["\n<div>\n<code>\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < img.width; i++) {\n  for (let j = 0; j < img.height; j++) {\n    img.set(i, j, color(0, 90, 102));\n  }\n}\nimg.updatePixels();\nimage(img, 17, 17);\n</code>\n</div>\n<div>\n<code>\nlet pink = color(255, 102, 204);\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < 4 * (width * height / 2); i += 4) {\n  img.pixels[i] = red(pink);\n  img.pixels[i + 1] = green(pink);\n  img.pixels[i + 2] = blue(pink);\n  img.pixels[i + 3] = alpha(pink);\n}\nimg.updatePixels();\nimage(img, 17, 17);\n</code>\n</div>"],"alt":"66x66 turquoise rect in center of canvas\n66x66 pink rect in center of canvas","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":222,"description":"<p>Helper function for animating GIF-based images with time</p>\n","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":253,"description":"<p>Helper fxn for sharing pixel methods</p>\n","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":261,"description":"<p>Loads the pixels data for this image into the [pixels] attribute.</p>\n","itemtype":"method","name":"loadPixels","example":["\n<div><code>\nlet myImage;\nlet halfImage;\n\nfunction preload() {\n  myImage = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  myImage.loadPixels();\n  halfImage = 4 * myImage.width * myImage.height / 2;\n  for (let i = 0; i < halfImage; i++) {\n    myImage.pixels[i + halfImage] = myImage.pixels[i];\n  }\n  myImage.updatePixels();\n}\n\nfunction draw() {\n  image(myImage, 0, 0, width, height);\n}\n</code></div>"],"alt":"2 images of rocky mountains vertically stacked","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":296,"description":"<p>Updates the backing canvas for this image with the contents of\nthe [pixels] array.</p>\n<p>If this image is an animated GIF then the pixels will be updated\nin the frame that is currently displayed.</p>\n","itemtype":"method","name":"updatePixels","example":["\n<div><code>\nlet myImage;\nlet halfImage;\n\nfunction preload() {\n  myImage = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  myImage.loadPixels();\n  halfImage = 4 * myImage.width * myImage.height / 2;\n  for (let i = 0; i < halfImage; i++) {\n    myImage.pixels[i + halfImage] = myImage.pixels[i];\n  }\n  myImage.updatePixels();\n}\n\nfunction draw() {\n  image(myImage, 0, 0, width, height);\n}\n</code></div>"],"alt":"2 images of rocky mountains vertically stacked","class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":296,"params":[{"name":"x","description":"<p>x-offset of the target update area for the\n                             underlying canvas</p>\n","type":"Integer"},{"name":"y","description":"<p>y-offset of the target update area for the\n                             underlying canvas</p>\n","type":"Integer"},{"name":"w","description":"<p>height of the target update area for the\n                             underlying canvas</p>\n","type":"Integer"},{"name":"h","description":"<p>height of the target update area for the\n                             underlying canvas</p>\n","type":"Integer"}]},{"line":338,"params":[]}]},{"file":"src/image/p5.Image.js","line":346,"description":"<p>Get a region of pixels from an image.</p>\n<p>If no params are passed, the whole image is returned.\nIf x and y are the only params passed a single pixel is extracted.\nIf all params are passed a rectangle region is extracted and a <a href=\"#/p5.Image\">p5.Image</a>\nis returned.</p>\n","itemtype":"method","name":"get","return":{"description":"the rectangle <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"},"example":["\n<div><code>\nlet myImage;\nlet c;\n\nfunction preload() {\n  myImage = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  background(myImage);\n  noStroke();\n  c = myImage.get(60, 90);\n  fill(c);\n  rect(25, 25, 50, 50);\n}\n\n//get() returns color here\n</code></div>"],"alt":"image of rocky mountains with 50x50 green rect in front","class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":346,"params":[{"name":"x","description":"<p>x-coordinate of the pixel</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the pixel</p>\n","type":"Number"},{"name":"w","description":"<p>width</p>\n","type":"Number"},{"name":"h","description":"<p>height</p>\n","type":"Number"}],"return":{"description":"the rectangle <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"}},{"line":383,"params":[],"return":{"description":"the whole <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"}},{"line":387,"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/image/p5.Image.js","line":400,"description":"<p>Set the color of a single pixel or write an image into\nthis <a href=\"#/p5.Image\">p5.Image</a>.</p>\n<p>Note that for a large number of pixels this will\nbe slower than directly manipulating the pixels array\nand then calling <a href=\"#/p5.Image/updatePixels\">updatePixels()</a>.</p>\n","itemtype":"method","name":"set","params":[{"name":"x","description":"<p>x-coordinate of the pixel</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the pixel</p>\n","type":"Number"},{"name":"a","description":"<p>grayscale value | pixel array |\n                               a <a href=\"#/p5.Color\">p5.Color</a> | image to copy</p>\n","type":"Number|Number[]|Object"}],"example":["\n<div>\n<code>\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < img.width; i++) {\n  for (let j = 0; j < img.height; j++) {\n    img.set(i, j, color(0, 90, 102, (i % img.width) * 2));\n  }\n}\nimg.updatePixels();\nimage(img, 17, 17);\nimage(img, 34, 34);\n</code>\n</div>"],"alt":"2 gradated dark turquoise rects fade left. 1 center 1 bottom right of canvas","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":437,"description":"<p>Resize the image to a new width and height. To make the image scale\nproportionally, use 0 as the value for the wide or high parameter.\nFor instance, to make the width of an image 150 pixels, and change\nthe height using the same proportion, use resize(150, 0).</p>\n","itemtype":"method","name":"resize","params":[{"name":"width","description":"<p>the resized image width</p>\n","type":"Number"},{"name":"height","description":"<p>the resized image height</p>\n","type":"Number"}],"example":["\n<div><code>\nlet img;\n\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction draw() {\n  image(img, 0, 0);\n}\n\nfunction mousePressed() {\n  img.resize(50, 100);\n}\n</code></div>"],"alt":"image of rocky mountains. zoomed in","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":548,"description":"<p>Copies a region of pixels from one image to another. If no\nsrcImage is specified this is used as the source. If the source\nand destination regions aren't the same size, it will\nautomatically resize source pixels to fit the specified\ntarget region.</p>\n","itemtype":"method","name":"copy","example":["\n<div><code>\nlet photo;\nlet bricks;\nlet x;\nlet y;\n\nfunction preload() {\n  photo = loadImage('assets/rockies.jpg');\n  bricks = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n  x = bricks.width / 2;\n  y = bricks.height / 2;\n  photo.copy(bricks, 0, 0, x, y, 0, 0, x, y);\n  image(photo, 0, 0);\n}\n</code></div>"],"alt":"image of rocky mountains and smaller image on top of bricks at top left","class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":548,"params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image|p5.Element"},{"name":"sx","description":"<p>X coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sy","description":"<p>Y coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sw","description":"<p>source image width</p>\n","type":"Integer"},{"name":"sh","description":"<p>source image height</p>\n","type":"Integer"},{"name":"dx","description":"<p>X coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dy","description":"<p>Y coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dw","description":"<p>destination image width</p>\n","type":"Integer"},{"name":"dh","description":"<p>destination image height</p>\n","type":"Integer"}]},{"line":588,"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":603,"description":"<p>Masks part of an image from displaying by loading another\nimage and using its alpha channel as an alpha channel for\nthis image. Masks are cumulative, one applied to an image\nobject, they cannot be removed.</p>\n","itemtype":"method","name":"mask","params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image"}],"example":["\n<div><code>\nlet photo, maskImage;\nfunction preload() {\n  photo = loadImage('assets/rockies.jpg');\n  maskImage = loadImage('assets/mask2.png');\n}\n\nfunction setup() {\n  createCanvas(100, 100);\n  photo.mask(maskImage);\n  image(photo, 0, 0);\n}\n</code></div>"],"alt":"image of rocky mountains with white at right\n\nhttp://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":665,"description":"<p>Applies an image filter to a <a href=\"#/p5.Image\">p5.Image</a></p>\n<p>THRESHOLD\nConverts the image to black and white pixels depending if they are above or\nbelow the threshold defined by the level parameter. The parameter must be\nbetween 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.</p>\n<p>GRAY\nConverts any colors in the image to grayscale equivalents. No parameter\nis used.</p>\n<p>OPAQUE\nSets the alpha channel to entirely opaque. No parameter is used.</p>\n<p>INVERT\nSets each pixel to its inverse value. No parameter is used.</p>\n<p>POSTERIZE\nLimits each channel of the image to the number of colors specified as the\nparameter. The parameter can be set to values between 2 and 255, but\nresults are most noticeable in the lower ranges.</p>\n<p>BLUR\nExecutes a Gaussian blur with the level parameter specifying the extent\nof the blurring. If no parameter is used, the blur is equivalent to\nGaussian blur of radius 1. Larger values increase the blur.</p>\n<p>ERODE\nReduces the light areas. No parameter is used.</p>\n<p>DILATE\nIncreases the light areas. No parameter is used.</p>\n<p>filter() does not work in WEBGL mode.\nA similar effect can be achieved in WEBGL mode using custom\nshaders. Adam Ferriss has written\na <a href=\"https://github.com/aferriss/p5jsShaderExamples\"\ntarget='_blank'>selection of shader examples</a> that contains many\nof the effects present in the filter examples.</p>\n","itemtype":"method","name":"filter","params":[{"name":"filterType","description":"<p>either THRESHOLD, GRAY, OPAQUE, INVERT,\n                               POSTERIZE, ERODE, DILATE or BLUR.\n                               See Filters.js for docs on\n                               each available filter</p>\n","type":"Constant"},{"name":"filterParam","description":"<p>an optional parameter unique\n                               to each filter, see above</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\nlet photo1;\nlet photo2;\n\nfunction preload() {\n  photo1 = loadImage('assets/rockies.jpg');\n  photo2 = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  photo2.filter(GRAY);\n  image(photo1, 0, 0);\n  image(photo2, width / 2, 0);\n}\n</code></div>"],"alt":"2 images of rocky mountains left one in color, right in black and white","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":738,"description":"<p>Copies a region of pixels from one image to another, using a specified\nblend mode to do the operation.</p>\n","itemtype":"method","name":"blend","example":["\n<div><code>\nlet mountains;\nlet bricks;\n\nfunction preload() {\n  mountains = loadImage('assets/rockies.jpg');\n  bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n  image(mountains, 0, 0);\n  image(bricks, 0, 0);\n}\n</code></div>\n<div><code>\nlet mountains;\nlet bricks;\n\nfunction preload() {\n  mountains = loadImage('assets/rockies.jpg');\n  bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n  image(mountains, 0, 0);\n  image(bricks, 0, 0);\n}\n</code></div>\n<div><code>\nlet mountains;\nlet bricks;\n\nfunction preload() {\n  mountains = loadImage('assets/rockies.jpg');\n  bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n  image(mountains, 0, 0);\n  image(bricks, 0, 0);\n}\n</code></div>"],"alt":"image of rocky mountains. Brick images on left and right. Right overexposed\nimage of rockies. Brickwall images on left and right. Right mortar transparent\nimage of rockies. Brickwall images on left and right. Right translucent","class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":738,"params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image"},{"name":"sx","description":"<p>X coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sy","description":"<p>Y coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sw","description":"<p>source image width</p>\n","type":"Integer"},{"name":"sh","description":"<p>source image height</p>\n","type":"Integer"},{"name":"dx","description":"<p>X coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dy","description":"<p>Y coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dw","description":"<p>destination image width</p>\n","type":"Integer"},{"name":"dh","description":"<p>destination image height</p>\n","type":"Integer"},{"name":"blendMode","description":"<p>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.</p>\n<p>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</p>\n<p><a href=\"http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/\">http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/</a></p>\n","type":"Constant"}]},{"line":815,"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":859,"description":"<p>Saves the image to a file and force the browser to download it.\nAccepts two strings for filename and file extension\nSupports png (default), jpg, and gif\n<br><br>\nNote that the file will only be downloaded as an animated GIF\nif the p5.Image was loaded from a GIF file.</p>\n","itemtype":"method","name":"save","params":[{"name":"filename","description":"<p>give your file a name</p>\n","type":"String"},{"name":"extension","description":"<p>'png' or 'jpg'</p>\n","type":"String"}],"example":["\n<div><code>\nlet photo;\n\nfunction preload() {\n  photo = loadImage('assets/rockies.jpg');\n}\n\nfunction draw() {\n  image(photo, 0, 0);\n}\n\nfunction keyTyped() {\n  if (key === 's') {\n    photo.save('photo', 'png');\n  }\n}\n</code></div>"],"alt":"image of rocky mountains.","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":900,"description":"<p>Starts an animated GIF over at the beginning state.</p>\n","itemtype":"method","name":"reset","example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/arnott-wallace-wink-loop-once.gif');\n}\n\nfunction draw() {\n  background(255);\n  // The GIF file that we loaded only loops once\n  // so it freezes on the last frame after playing through\n  image(gif, 0, 0);\n}\n\nfunction mousePressed() {\n  // Click to reset the GIF and begin playback from start\n  gif.reset();\n}\n</code></div>"],"alt":"Animated image of a cartoon face that winks once and then freezes\nWhen you click it animates again, winks once and freezes","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":941,"description":"<p>Gets the index for the frame that is currently visible in an animated GIF.</p>\n","itemtype":"method","name":"getCurrentFrame","return":{"description":"The index for the currently displaying frame in animated GIF","type":"Number"},"example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\nfunction draw() {\n  let frame = gif.getCurrentFrame();\n  image(gif, 0, 0);\n  text(frame, 10, 90);\n}\n</code></div>"],"alt":"Animated image of a cartoon eye looking around and then\nlooking outwards, in the lower-left hand corner a number counts\nup quickly to 124 and then starts back over at 0","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":972,"description":"<p>Sets the index of the frame that is currently visible in an animated GIF</p>\n","itemtype":"method","name":"setFrame","params":[{"name":"index","description":"<p>the index for the frame that should be displayed</p>\n","type":"Number"}],"example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\n// Move your mouse up and down over canvas to see the GIF\n// frames animate\nfunction draw() {\n  gif.pause();\n  image(gif, 0, 0);\n  // Get the highest frame number which is the number of frames - 1\n  let maxFrame = gif.numFrames() - 1;\n  // Set the current frame that is mapped to be relative to mouse position\n  let frameNumber = floor(map(mouseY, 0, height, 0, maxFrame, true));\n  gif.setFrame(frameNumber);\n}\n</code></div>"],"alt":"A still image of a cartoon eye that looks around when you move your mouse\nup and down over the canvas","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1017,"description":"<p>Returns the number of frames in an animated GIF</p>\n","itemtype":"method","name":"numFrames","return":{"description":"","type":"Number"},"example":["     The number of frames in the animated GIF\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\n// Move your mouse up and down over canvas to see the GIF\n// frames animate\nfunction draw() {\n  gif.pause();\n  image(gif, 0, 0);\n  // Get the highest frame number which is the number of frames - 1\n  let maxFrame = gif.numFrames() - 1;\n  // Set the current frame that is mapped to be relative to mouse position\n  let frameNumber = floor(map(mouseY, 0, height, 0, maxFrame, true));\n  gif.setFrame(frameNumber);\n}\n</code></div>"],"alt":"A still image of a cartoon eye that looks around when you move your mouse\nup and down over the canvas","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1052,"description":"<p>Plays an animated GIF that was paused with\n<a href=\"#/p5.Image/pause\">pause()</a></p>\n","itemtype":"method","name":"play","example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');\n}\n\nfunction draw() {\n  background(255);\n  image(gif, 0, 0);\n}\n\nfunction mousePressed() {\n  gif.pause();\n}\n\nfunction mouseReleased() {\n  gif.play();\n}\n</code></div>"],"alt":"An animated GIF of a drawing of small child with\nhair blowing in the wind, when you click the image\nfreezes when you release it animates again","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1089,"description":"<p>Pauses an animated GIF.</p>\n","itemtype":"method","name":"pause","example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');\n}\n\nfunction draw() {\n  background(255);\n  image(gif, 0, 0);\n}\n\nfunction mousePressed() {\n  gif.pause();\n}\n\nfunction mouseReleased() {\n  gif.play();\n}\n</code></div>"],"alt":"An animated GIF of a drawing of small child with\nhair blowing in the wind, when you click the image\nfreezes when you release it animates again","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1125,"description":"<p>Changes the delay between frames in an animated GIF. There is an optional second parameter that\nindicates an index for a specific frame that should have its delay modified. If no index is given, all frames\nwill have the new delay.</p>\n","itemtype":"method","name":"delay","params":[{"name":"d","description":"<p>the amount in milliseconds to delay between switching frames</p>\n","type":"Number"},{"name":"index","description":"<p>the index of the frame that should have the new delay value {optional}</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\nlet gifFast, gifSlow;\n\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  gifFast.resize(width / 2, height / 2);\n  gifSlow.resize(width / 2, height / 2);\n\n  //Change the delay here\n  gifFast.delay(10);\n  gifSlow.delay(100);\n}\n\nfunction draw() {\n  background(255);\n  image(gifFast, 0, 0);\n  image(gifSlow, width / 2, 0);\n}\n</code></div>"],"alt":"Two animated gifs of cartoon eyes looking around\nThe gif on the left animates quickly, on the right\nthe animation is much slower","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/pixels.js","line":12,"description":"<p><a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference\n/Global_Objects/Uint8ClampedArray' target='_blank'>Uint8ClampedArray</a>\ncontaining the values for all the pixels in the display window.\nThese values are numbers. This array is the size (include an appropriate\nfactor for <a href=\"#/p5/pixelDensity\">pixelDensity</a>) of the display window x4,\nrepresenting the R, G, B, A values in order for each pixel, moving from\nleft to right across each row, then down each column. Retina and other\nhigh density displays will have more pixels[] (by a factor of\npixelDensity^2).\nFor example, if the image is 100x100 pixels, there will be 40,000. On a\nretina display, there will be 160,000.</p>\n<p>The first four values (indices 0-3) in the array will be the R, G, B, A\nvalues of the pixel at (0, 0). The second four values (indices 4-7) will\ncontain the R, G, B, A values of the pixel at (1, 0). More generally, to\nset values for a pixel at (x, y):</p>\n<pre><code class=\"language-javascript\">let d = pixelDensity();\nfor (let i = 0; i < d; i++) {\n  for (let j = 0; j < d; j++) {\n    // loop over\n    index = 4 * ((y * d + j) * width * d + (x * d + i));\n    pixels[index] = r;\n    pixels[index+1] = g;\n    pixels[index+2] = b;\n    pixels[index+3] = a;\n  }\n}</code></pre>\n<p>While the above method is complex, it is flexible enough to work with\nany pixelDensity. Note that <a href=\"#/p5/set\">set()</a> will automatically take care of\nsetting all the appropriate values in <a href=\"#/p5/pixels\">pixels[]</a> for a given (x, y) at\nany pixelDensity, but the performance may not be as fast when lots of\nmodifications are made to the pixel array.</p>\n<p>Before accessing this array, the data must loaded with the <a href=\"#/p5/loadPixels\">loadPixels()</a>\nfunction. After the array data has been modified, the <a href=\"#/p5/updatePixels\">updatePixels()</a>\nfunction must be run to update the changes.</p>\n<p>Note that this is not a standard javascript array.  This means that\nstandard javascript functions such as <a href=\"#/p5/slice\">slice()</a> or\n<a href=\"#/p5/arrayCopy\">arrayCopy()</a> do not\nwork.</p>\n","itemtype":"property","name":"pixels","type":"Number[]","example":["\n<div>\n<code>\nlet pink = color(255, 102, 204);\nloadPixels();\nlet d = pixelDensity();\nlet halfImage = 4 * (width * d) * (height / 2 * d);\nfor (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}\nupdatePixels();\n</code>\n</div>"],"alt":"top half of canvas pink, bottom grey","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":80,"description":"<p>Copies a region of pixels from one image to another, using a specified\nblend mode to do the operation.</p>\n","itemtype":"method","name":"blend","example":["\n<div><code>\nlet img0;\nlet img1;\n\nfunction preload() {\n  img0 = loadImage('assets/rockies.jpg');\n  img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  background(img0);\n  image(img1, 0, 0);\n  blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n}\n</code></div>\n<div><code>\nlet img0;\nlet img1;\n\nfunction preload() {\n  img0 = loadImage('assets/rockies.jpg');\n  img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  background(img0);\n  image(img1, 0, 0);\n  blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n}\n</code></div>\n<div><code>\nlet img0;\nlet img1;\n\nfunction preload() {\n  img0 = loadImage('assets/rockies.jpg');\n  img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  background(img0);\n  image(img1, 0, 0);\n  blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n}\n</code></div>"],"alt":"image of rocky mountains. Brick images on left and right. Right overexposed\nimage of rockies. Brickwall images on left and right. Right mortar transparent\nimage of rockies. Brickwall images on left and right. Right translucent","class":"p5","module":"Image","submodule":"Pixels","overloads":[{"line":80,"params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image"},{"name":"sx","description":"<p>X coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sy","description":"<p>Y coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sw","description":"<p>source image width</p>\n","type":"Integer"},{"name":"sh","description":"<p>source image height</p>\n","type":"Integer"},{"name":"dx","description":"<p>X coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dy","description":"<p>Y coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dw","description":"<p>destination image width</p>\n","type":"Integer"},{"name":"dh","description":"<p>destination image height</p>\n","type":"Integer"},{"name":"blendMode","description":"<p>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.</p>\n","type":"Constant"}]},{"line":152,"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":173,"description":"<p>Copies a region of the canvas to another region of the canvas\nand copies a region of pixels from an image used as the srcImg parameter\ninto the canvas srcImage is specified this is used as the source. If\nthe source and destination regions aren't the same size, it will\nautomatically resize source pixels to fit the specified\ntarget region.</p>\n","itemtype":"method","name":"copy","example":["\n<div><code>\nlet img;\n\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  background(img);\n  copy(img, 7, 22, 10, 10, 35, 25, 50, 50);\n  stroke(255);\n  noFill();\n  // Rectangle shows area being copied\n  rect(7, 22, 10, 10);\n}\n</code></div>"],"alt":"image of rocky mountains. Brick images on left and right. Right overexposed\nimage of rockies. Brickwall images on left and right. Right mortar transparent\nimage of rockies. Brickwall images on left and right. Right translucent","class":"p5","module":"Image","submodule":"Pixels","overloads":[{"line":173,"params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image|p5.Element"},{"name":"sx","description":"<p>X coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sy","description":"<p>Y coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sw","description":"<p>source image width</p>\n","type":"Integer"},{"name":"sh","description":"<p>source image height</p>\n","type":"Integer"},{"name":"dx","description":"<p>X coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dy","description":"<p>Y coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dw","description":"<p>destination image width</p>\n","type":"Integer"},{"name":"dh","description":"<p>destination image height</p>\n","type":"Integer"}]},{"line":215,"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":307,"description":"<p>Applies a filter to the canvas. The presets options are:</p>\n<p>THRESHOLD\nConverts the image to black and white pixels depending if they are above or\nbelow the threshold defined by the level parameter. The parameter must be\nbetween 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.</p>\n<p>GRAY\nConverts any colors in the image to grayscale equivalents. No parameter\nis used.</p>\n<p>OPAQUE\nSets the alpha channel to entirely opaque. No parameter is used.</p>\n<p>INVERT\nSets each pixel to its inverse value. No parameter is used.</p>\n<p>POSTERIZE\nLimits each channel of the image to the number of colors specified as the\nparameter. The parameter can be set to values between 2 and 255, but\nresults are most noticeable in the lower ranges.</p>\n<p>BLUR\nExecutes a Gaussian blur with the level parameter specifying the extent\nof the blurring. If no parameter is used, the blur is equivalent to\nGaussian blur of radius 1. Larger values increase the blur.</p>\n<p>ERODE\nReduces the light areas. No parameter is used.</p>\n<p>DILATE\nIncreases the light areas. No parameter is used.</p>\n<p>filter() does not work in WEBGL mode.\nA similar effect can be achieved in WEBGL mode using custom\nshaders. Adam Ferriss has written\na <a href=\"https://github.com/aferriss/p5jsShaderExamples\"\ntarget='_blank'>selection of shader examples</a> that contains many\nof the effects present in the filter examples.</p>\n","itemtype":"method","name":"filter","params":[{"name":"filterType","description":"<p>either THRESHOLD, GRAY, OPAQUE, INVERT,\n                               POSTERIZE, BLUR, ERODE, DILATE or BLUR.\n                               See Filters.js for docs on\n                               each available filter</p>\n","type":"Constant"},{"name":"filterParam","description":"<p>an optional parameter unique\n                               to each filter, see above</p>\n","type":"Number","optional":true}],"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(THRESHOLD);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(GRAY);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(OPAQUE);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(INVERT);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(POSTERIZE, 3);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(DILATE);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(BLUR, 3);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(ERODE);\n}\n</code>\n</div>"],"alt":"black and white image of a brick wall.\ngreyscale image of a brickwall\nimage of a brickwall\njade colored image of a brickwall\nred and pink image of a brickwall\nimage of a brickwall\nblurry image of a brickwall\nimage of a brickwall\nimage of a brickwall with less detail","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":481,"description":"<p>Get a region of pixels, or a single pixel, from the canvas.</p>\n<p>Returns an array of [R,G,B,A] values for any pixel or grabs a section of\nan image. If no parameters are specified, the entire image is returned.\nUse the x and y parameters to get the value of one pixel. Get a section of\nthe display window by specifying additional w and h parameters. When\ngetting an image, the x and y parameters define the coordinates for the\nupper-left corner of the image, regardless of the current <a href=\"#/p5/imageMode\">imageMode()</a>.</p>\n<p>Getting the color of a single pixel with get(x, y) is easy, but not as fast\nas grabbing the data directly from <a href=\"#/p5/pixels\">pixels[]</a>. The equivalent statement to\nget(x, y) using <a href=\"#/p5/pixels\">pixels[]</a> with pixel density d is</p>\n<pre><code class=\"language-javascript\">let x, y, d; // set these to the coordinates\nlet off = (y * width + x) * d * 4;\nlet components = [\n  pixels[off],\n  pixels[off + 1],\n  pixels[off + 2],\n  pixels[off + 3]\n];\nprint(components);</code></pre>\n<p>See the reference for <a href=\"#/p5/pixels\">pixels[]</a> for more information.</p>\n<p>If you want to extract an array of colors or a subimage from an p5.Image object,\ntake a look at <a href=\"#/p5.Image/get\">p5.Image.get()</a></p>\n","itemtype":"method","name":"get","return":{"description":"the rectangle <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"},"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  let c = get();\n  image(c, width / 2, 0);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  let c = get(50, 90);\n  fill(c);\n  noStroke();\n  rect(25, 25, 50, 50);\n}\n</code>\n</div>"],"alt":"2 images of the rocky mountains, side-by-side\nImage of the rocky mountains with 50x50 green rect in center of canvas","class":"p5","module":"Image","submodule":"Pixels","overloads":[{"line":481,"params":[{"name":"x","description":"<p>x-coordinate of the pixel</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the pixel</p>\n","type":"Number"},{"name":"w","description":"<p>width</p>\n","type":"Number"},{"name":"h","description":"<p>height</p>\n","type":"Number"}],"return":{"description":"the rectangle <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"}},{"line":551,"params":[],"return":{"description":"the whole <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"}},{"line":555,"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/image/pixels.js","line":566,"description":"<p>Loads the pixel data for the display window into the <a href=\"#/p5/pixels\">pixels[]</a> array. This\nfunction must always be called before reading from or writing to <a href=\"#/p5/pixels\">pixels[]</a>.\nNote that only changes made with <a href=\"#/p5/set\">set()</a> or direct manipulation of <a href=\"#/p5/pixels\">pixels[]</a>\nwill occur.</p>\n","itemtype":"method","name":"loadPixels","example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  image(img, 0, 0, width, height);\n  let d = pixelDensity();\n  let halfImage = 4 * (width * d) * (height * d / 2);\n  loadPixels();\n  for (let i = 0; i < halfImage; i++) {\n    pixels[i + halfImage] = pixels[i];\n  }\n  updatePixels();\n}\n</code>\n</div>"],"alt":"two images of the rocky mountains. one on top, one on bottom of canvas.","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":602,"description":"<p>Changes the color of any pixel, or writes an image directly to the\ndisplay window.\nThe x and y parameters specify the pixel to change and the c parameter\nspecifies the color value. This can be a <a href=\"#/p5.Color\">p5.Color</a> object, or [R, G, B, A]\npixel array. It can also be a single grayscale value.\nWhen setting an image, the x and y parameters define the coordinates for\nthe upper-left corner of the image, regardless of the current <a href=\"#/p5/imageMode\">imageMode()</a>.</p>\n<p>After using <a href=\"#/p5/set\">set()</a>, you must call <a href=\"#/p5/updatePixels\">updatePixels()</a> for your changes to appear.\nThis should be called once all pixels have been set, and must be called before\ncalling .<a href=\"#/p5/get\">get()</a> or drawing the image.</p>\n<p>Setting the color of a single pixel with set(x, y) is easy, but not as\nfast as putting the data directly into <a href=\"#/p5/pixels\">pixels[]</a>. Setting the <a href=\"#/p5/pixels\">pixels[]</a>\nvalues directly may be complicated when working with a retina display,\nbut will perform better when lots of pixels need to be set directly on\nevery loop. See the reference for <a href=\"#/p5/pixels\">pixels[]</a> for more information.</p>\n","itemtype":"method","name":"set","params":[{"name":"x","description":"<p>x-coordinate of the pixel</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the pixel</p>\n","type":"Number"},{"name":"c","description":"<p>insert a grayscale value | a pixel array |\n                               a <a href=\"#/p5.Color\">p5.Color</a> object | a <a href=\"#/p5.Image\">p5.Image</a> to copy</p>\n","type":"Number|Number[]|Object"}],"example":["\n<div>\n<code>\nlet black = color(0);\nset(30, 20, black);\nset(85, 20, black);\nset(85, 75, black);\nset(30, 75, black);\nupdatePixels();\n</code>\n</div>\n\n<div>\n<code>\nfor (let i = 30; i < width - 15; i++) {\n  for (let j = 20; j < height - 25; j++) {\n    let c = color(204 - j, 153 - i, 0);\n    set(i, j, c);\n  }\n}\nupdatePixels();\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  set(0, 0, img);\n  updatePixels();\n  line(0, 0, width, height);\n  line(0, height, width, 0);\n}\n</code>\n</div>"],"alt":"4 black points in the shape of a square middle-right of canvas.\nsquare with orangey-brown gradient lightening at bottom right.\nimage of the rocky mountains. with lines like an 'x' through the center.","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":674,"description":"<p>Updates the display window with the data in the <a href=\"#/p5/pixels\">pixels[]</a> array.\nUse in conjunction with <a href=\"#/p5/loadPixels\">loadPixels()</a>. If you're only reading pixels from\nthe array, there's no need to call <a href=\"#/p5/updatePixels\">updatePixels()</a> — updating is only\nnecessary to apply changes. <a href=\"#/p5/updatePixels\">updatePixels()</a> should be called anytime the\npixels array is manipulated or <a href=\"#/p5/set\">set()</a> is called, and only changes made with\n<a href=\"#/p5/set\">set()</a> or direct changes to <a href=\"#/p5/pixels\">pixels[]</a> will occur.</p>\n","itemtype":"method","name":"updatePixels","params":[{"name":"x","description":"<p>x-coordinate of the upper-left corner of region\n                        to update</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>y-coordinate of the upper-left corner of region\n                        to update</p>\n","type":"Number","optional":true},{"name":"w","description":"<p>width of region to update</p>\n","type":"Number","optional":true},{"name":"h","description":"<p>height of region to update</p>\n","type":"Number","optional":true}],"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  image(img, 0, 0, width, height);\n  let d = pixelDensity();\n  let halfImage = 4 * (width * d) * (height * d / 2);\n  loadPixels();\n  for (let i = 0; i < halfImage; i++) {\n    pixels[i + halfImage] = pixels[i];\n  }\n  updatePixels();\n}\n</code>\n</div>"],"alt":"two images of the rocky mountains. one on top, one on bottom of canvas.","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/io/files.js","line":20,"description":"<p>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.</p>\n<p>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 <a href=\"https://github.com/camsong/\nfetch-jsonp\">here</a>.</p>\n<p>This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadJSON","return":{"description":"JSON data","type":"Object|Array"},"example":["\n\nCalling <a href=\"#/p5/loadJSON\">loadJSON()</a> inside <a href=\"#/p5/preload\">preload()</a> guarantees to complete the\noperation before <a href=\"#/p5/setup\">setup()</a> and <a href=\"#/p5/draw\">draw()</a> are called.\n\n<div><code>\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}\n</code></div>\n\nOutside of preload(), you may supply a callback function to handle the\nobject:\n<div><code>\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}\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</code></div>"],"alt":"50x50 ellipse that changes from black to white depending on the current humidity\n50x50 ellipse that changes from black to white depending on the current humidity","class":"p5","module":"IO","submodule":"Input","overloads":[{"line":20,"params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"jsonpOptions","description":"<p>options object for jsonp related settings</p>\n","type":"Object","optional":true},{"name":"datatype","description":"<p>\"json\" or \"jsonp\"</p>\n","type":"String","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/loadJSON\">loadJSON()</a> completes, data is passed\n                                   in as first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                   there is an error, response is passed\n                                   in as first argument</p>\n","type":"Function","optional":true}],"return":{"description":"JSON data","type":"Object|Array"}},{"line":104,"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":112,"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":183,"description":"<p>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.</p>\n<p>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.</p>\n<p>This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed.</p>\n<p>This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadStrings","params":[{"name":"filename","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"callback","description":"<p>function to be executed after <a href=\"#/p5/loadStrings\">loadStrings()</a>\n                              completes, Array is passed in as first\n                              argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                              there is an error, response is passed\n                              in as first argument</p>\n","type":"Function","optional":true}],"return":{"description":"Array of Strings","type":"String[]"},"example":["\n\nCalling loadStrings() inside <a href=\"#/p5/preload\">preload()</a> guarantees to complete the\noperation before <a href=\"#/p5/setup\">setup()</a> and <a href=\"#/p5/draw\">draw()</a> are called.\n\n<div><code>\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}\n</code></div>\n\nOutside of preload(), you may supply a callback function to handle the\nobject:\n\n<div><code>\nfunction setup() {\n  loadStrings('assets/test.txt', pickString);\n}\n\nfunction pickString(result) {\n  background(200);\n  text(random(result), 10, 10, 80, 80);\n}\n</code></div>"],"alt":"randomly generated text from a file, for example \"i smell like butter\"\nrandomly generated text from a file, for example \"i have three feet\"","class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":303,"description":"<p>Reads the contents of a file or URL and creates a <a href=\"#/p5.Table\">p5.Table</a> 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.</p>\n<p>This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. Calling <a href=\"#/p5/loadTable\">loadTable()</a> inside <a href=\"#/p5/preload\">preload()</a>\nguarantees to complete the operation before <a href=\"#/p5/setup\">setup()</a> and <a href=\"#/p5/draw\">draw()</a> are called.\nOutside of <a href=\"#/p5/preload\">preload()</a>, you may supply a callback function to handle the\nobject:</p>\n<p>All files loaded and saved use UTF-8 encoding. This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadTable","params":[{"name":"filename","description":"<p>name of the file or URL to load</p>\n","type":"String"},{"name":"extension","description":"<p>parse the table by comma-separated values \"csv\", semicolon-separated\n                                     values \"ssv\", or tab-separated values \"tsv\"</p>\n","type":"String","optional":true},{"name":"header","description":"<p>\"header\" to indicate table has header row</p>\n","type":"String","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                     <a href=\"#/p5/loadTable\">loadTable()</a> completes. On success, the\n                                     <a href=\"#/p5.Table\">Table</a> object is passed in as the\n                                     first argument.</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                     there is an error, response is passed\n                                     in as first argument</p>\n","type":"Function","optional":true}],"return":{"description":"<a href=\"#/p5.Table\">Table</a> object containing data","type":"Object"},"example":["\n<div class='norender'>\n<code>\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}\n</code>\n</div>"],"alt":"randomly generated text from a file, for example \"i smell like butter\"\nrandomly generated text from a file, for example \"i have three feet\"","class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":583,"description":"<p>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.</p>\n<p>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.</p>\n<p>This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. Calling <a href=\"#/p5/loadXML\">loadXML()</a> inside <a href=\"#/p5/preload\">preload()</a>\nguarantees to complete the operation before <a href=\"#/p5/setup\">setup()</a> and <a href=\"#/p5/draw\">draw()</a> are called.</p>\n<p>Outside of <a href=\"#/p5/preload\">preload()</a>, you may supply a callback function to handle the\nobject.</p>\n<p>This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadXML","params":[{"name":"filename","description":"<p>name of the file or URL to load</p>\n","type":"String"},{"name":"callback","description":"<p>function to be executed after <a href=\"#/p5/loadXML\">loadXML()</a>\n                              completes, XML object is passed in as\n                              first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                              there is an error, response is passed\n                              in as first argument</p>\n","type":"Function","optional":true}],"return":{"description":"XML object containing data","type":"Object"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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\n// Sketch prints:\n// 0, Capra hircus, Goat\n// 1, Panthera pardus, Leopard\n// 2, Equus zebra, Zebra\n</code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":693,"description":"<p>This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadBytes","params":[{"name":"file","description":"<p>name of the file or URL to load</p>\n","type":"String"},{"name":"callback","description":"<p>function to be executed after <a href=\"#/p5/loadBytes\">loadBytes()</a>\n                                   completes</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if there\n                                   is an error</p>\n","type":"Function","optional":true}],"return":{"description":"an object whose 'bytes' property will be the loaded buffer","type":"Object"},"example":["\n<div class='norender'><code>\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}\n</code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":752,"description":"<p>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 <code>httpDo(path, 'GET')</code>. 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).</p>\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<div class='norender'><code>\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</code></div>"],"class":"p5","module":"IO","submodule":"Input","overloads":[{"line":752,"params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"datatype","description":"<p>\"json\", \"jsonp\", \"binary\", \"arrayBuffer\",\n                                   \"xml\", or \"text\"</p>\n","type":"String","optional":true},{"name":"data","description":"<p>param data passed sent with request</p>\n","type":"Object|Boolean","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/httpGet\">httpGet()</a> completes, data is passed in\n                                   as first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                   there is an error, response is passed\n                                   in as first argument</p>\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":806,"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":814,"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":829,"description":"<p>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 <code>httpDo(path, 'POST')</code>.</p>\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<div>\n<code>\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</code>\n</div>\n\n<div><code>\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</code></div>"],"class":"p5","module":"IO","submodule":"Input","overloads":[{"line":829,"params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"datatype","description":"<p>\"json\", \"jsonp\", \"xml\", or \"text\".\n                                   If omitted, <a href=\"#/p5/httpPost\">httpPost()</a> will guess.</p>\n","type":"String","optional":true},{"name":"data","description":"<p>param data passed sent with request</p>\n","type":"Object|Boolean","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/httpPost\">httpPost()</a> completes, data is passed in\n                                   as first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                   there is an error, response is passed\n                                   in as first argument</p>\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":896,"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":904,"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":919,"description":"<p>Method for executing an HTTP request. If data type is not specified,\np5 will try to guess based on the URL, defaulting to text.<br><br>\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.</p>\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<div>\n<code>\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</code>\n</div>"],"class":"p5","module":"IO","submodule":"Input","overloads":[{"line":919,"params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"method","description":"<p>either \"GET\", \"POST\", or \"PUT\",\n                                   defaults to \"GET\"</p>\n","type":"String","optional":true},{"name":"datatype","description":"<p>\"json\", \"jsonp\", \"xml\", or \"text\"</p>\n","type":"String","optional":true},{"name":"data","description":"<p>param data passed sent with request</p>\n","type":"Object","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/httpGet\">httpGet()</a> completes, data is passed in\n                                   as first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                   there is an error, response is passed\n                                   in as first argument</p>\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":990,"params":[{"name":"path","description":"","type":"String"},{"name":"options","description":"<p>Request object options as documented in the\n                                   \"fetch\" API\n<a href=\"https://developer.mozilla.org/en/docs/Web/API/Fetch_API\">reference</a></p>\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":1155,"itemtype":"method","name":"createWriter","params":[{"name":"name","description":"<p>name of the file to be created</p>\n","type":"String"},{"name":"extension","description":"","type":"String","optional":true}],"return":{"description":"","type":"p5.PrintWriter"},"example":["\n<div>\n<code>\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</code>\n</div>"],"class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1210,"description":"<p>Writes data to the PrintWriter stream</p>\n","itemtype":"method","name":"write","params":[{"name":"data","description":"<p>all data to be written by the PrintWriter</p>\n","type":"Array"}],"example":["\n<div class=\"norender notest\">\n<code>\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</code>\n</div>\n<div class='norender notest'>\n<code>\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</code>\n</div>\n<div class='norender notest'>\n<code>\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</code>\n</div>\n<div>\n<code>\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</code>\n</div>"],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1269,"description":"<p>Writes data to the PrintWriter stream, and adds a new line at the end</p>\n","itemtype":"method","name":"print","params":[{"name":"data","description":"<p>all data to be printed by the PrintWriter</p>\n","type":"Array"}],"example":["\n<div class='norender notest'>\n<code>\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</code>\n</div>\n<div class='norender notest'>\n<code>\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</code>\n</div>"],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1310,"description":"<p>Clears the data already written to the PrintWriter object</p>\n","itemtype":"method","name":"clear","example":["\n<div class =\"norender notest\"><code>\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</code></div>\n<div>\n<code>\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</code>\n</div>\n"],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1344,"description":"<p>Closes the PrintWriter</p>\n","itemtype":"method","name":"close","example":["\n<div class=\"norender notest\">\n<code>\n// create a file called 'newFile.txt'\nlet writer = createWriter('newFile.txt');\n// close the PrintWriter and save the file\nwriter.close();\n</code>\n</div>\n<div class='norender notest'>\n<code>\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</code>\n</div>"],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1393,"description":"<p>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 <a href=\"#/p5.Element\">p5.Element</a>,an Array of\nStrings, an Array of JSON, a JSON object, a <a href=\"#/p5.Table\">p5.Table\n</a>, a <a href=\"#/p5.Image\">p5.Image</a>, 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.\n<strong>Note that it is not recommended to\ncall this method within draw, as it will open a new save dialog on every\nrender.</strong></p>\n","itemtype":"method","name":"save","params":[{"name":"objectOrFilename","description":"<p>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).</p>\n","type":"Object|String","optional":true},{"name":"filename","description":"<p>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).</p>\n","type":"String","optional":true},{"name":"options","description":"<p>Additional options depend on\n                          filetype. For example, when saving JSON,\n                          <code>true</code> indicates that the\n                          output will be optimized for filesize,\n                          rather than readability.</p>\n","type":"Boolean|String","optional":true}],"example":["\n <div class=\"norender\"><code>\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 </code></div>\n\n<div class=\"norender\"><code>\n // Saves p5.Image as an image\n img = createImage(10, 10);\n save(img, 'myImage.png');\n </code></div>\n\n <div class=\"norender\"><code>\n // Saves p5.Renderer object as an image\n obj = createGraphics(100, 100);\n save(obj, 'myObject.png');\n </code></div>\n\n <div class=\"norender\"><code>\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 </code></div>\n\n <div class=\"norender\"><code>\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 </code></div>\n\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"An example for saving a canvas as an image.\n An example for saving a p5.Image element as an image.\n An example for saving a p5.Renderer element.\n An example showing how to save a table in formats of HTML, CSV and TSV.\n An example for saving JSON to a txt file with some extra arguments.\n An example for saving an array of strings to text file with line breaks.","class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1535,"description":"<p>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.</p>\n","itemtype":"method","name":"saveJSON","params":[{"name":"json","description":"","type":"Array|Object"},{"name":"filename","description":"","type":"String"},{"name":"optimize","description":"<p>If true, removes line breaks\n                               and spaces from the output\n                               file to optimize filesize\n                               (but not readability).</p>\n","type":"Boolean","optional":true}],"example":["\n <div><code>\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 }\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 </code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1592,"description":"<p>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.</p>\n","itemtype":"method","name":"saveStrings","params":[{"name":"list","description":"<p>string array to be written</p>\n","type":"String[]"},{"name":"filename","description":"<p>filename for output</p>\n","type":"String"},{"name":"extension","description":"<p>the filename's extension</p>\n","type":"String","optional":true},{"name":"isCRLF","description":"<p>if true, change line-break to CRLF</p>\n","type":"Boolean","optional":true}],"example":["\n <div><code>\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 }\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 </code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1656,"description":"<p>Writes the contents of a <a href=\"#/p5.Table\">Table</a> 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.</p>\n","itemtype":"method","name":"saveTable","params":[{"name":"Table","description":"<p>the <a href=\"#/p5.Table\">Table</a> object to save to a file</p>\n","type":"p5.Table"},{"name":"filename","description":"<p>the filename to which the Table should be saved</p>\n","type":"String"},{"name":"options","description":"<p>can be one of \"tsv\", \"csv\", or \"html\"</p>\n","type":"String","optional":true}],"example":["\n<div><code>\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\n // Saves the following to a file called 'new.csv':\n // id,species,name\n // 0,Panthera leo,Lion\n </code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/p5.Table.js","line":9,"description":"<p>Table Options\nGeneric class for handling tabular data, typically from a\nCSV, TSV, or other sort of spreadsheet file.\nCSV files are\n<a href=\"http://en.wikipedia.org/wiki/Comma-separated_values\">\ncomma separated values</a>, 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\n<a href=\"http://tools.ietf.org/html/rfc4180\">here</a>.\nTo load files, use the <a href=\"#/p5/loadTable\">loadTable</a> method.\nTo save tables to your computer, use the <a href=\"#/p5/save\">save</a> method\n or the <a href=\"#/p5/saveTable\">saveTable</a> method.</p>\n<p>Possible options include:</p>\n<ul>\n<li>csv - parse the table as comma-separated values\n<li>tsv - parse the table as tab-separated values\n<li>header - this table has a header (title) row\n</ul>","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":43,"description":"<p>An array containing the names of the columns in the table, if the \"header\" the table is\nloaded with the \"header\" parameter.</p>\n","itemtype":"property","name":"columns","type":"String[]","example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":77,"description":"<p>An array containing the <a href=\"#/p5.Table\">p5.TableRow</a> objects that make up the\nrows of the table. The same result as calling <a href=\"#/p5/getRows\">getRows()</a></p>\n","itemtype":"property","name":"rows","type":"p5.TableRow[]","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":85,"description":"<p>Use <a href=\"#/p5/addRow\">addRow()</a> to add a new row of data to a <a href=\"#/p5.Table\">p5.Table</a> 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 <a href=\"#/p5/set\">set()</a>.</p>\n<p>If a <a href=\"#/p5.TableRow\">p5.TableRow</a> object is included as a parameter, then that row is\nduplicated and added to the table.</p>\n","itemtype":"method","name":"addRow","params":[{"name":"row","description":"<p>row to be added to the table</p>\n","type":"p5.TableRow","optional":true}],"return":{"description":"the row that was added","type":"p5.TableRow"},"example":["\n <div class=\"norender\">\n <code>\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 </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":148,"description":"<p>Removes a row from the table object.</p>\n","itemtype":"method","name":"removeRow","params":[{"name":"id","description":"<p>ID number of the row to remove</p>\n","type":"Integer"}],"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":195,"description":"<p>Returns a reference to the specified <a href=\"#/p5.TableRow\">p5.TableRow</a>. The reference\ncan then be used to get and set values of the selected row.</p>\n","itemtype":"method","name":"getRow","params":[{"name":"rowID","description":"<p>ID number of the row to get</p>\n","type":"Integer"}],"return":{"description":"<a href=\"#/p5.TableRow\">p5.TableRow</a> object","type":"p5.TableRow"},"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":240,"description":"<p>Gets all rows from the table. Returns an array of <a href=\"#/p5.TableRow\">p5.TableRow</a>s.</p>\n","itemtype":"method","name":"getRows","return":{"description":"Array of <a href=\"#/p5.TableRow\">p5.TableRow</a>s","type":"p5.TableRow[]"},"example":["\n <div class=\"norender\">\n <code>\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 </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":288,"description":"<p>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.</p>\n","itemtype":"method","name":"findRow","params":[{"name":"value","description":"<p>The value to match</p>\n","type":"String"},{"name":"column","description":"<p>ID number or title of the\n                               column to search</p>\n","type":"Integer|String"}],"return":{"description":"","type":"p5.TableRow"},"example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":352,"description":"<p>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.</p>\n","itemtype":"method","name":"findRows","params":[{"name":"value","description":"<p>The value to match</p>\n","type":"String"},{"name":"column","description":"<p>ID number or title of the\n                               column to search</p>\n","type":"Integer|String"}],"return":{"description":"An Array of TableRow objects","type":"p5.TableRow[]"},"example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":420,"description":"<p>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.</p>\n","itemtype":"method","name":"matchRow","params":[{"name":"regexp","description":"<p>The regular expression to match</p>\n","type":"String|RegExp"},{"name":"column","description":"<p>The column ID (number) or\n                                 title (string)</p>\n","type":"String|Integer"}],"return":{"description":"TableRow object","type":"p5.TableRow"},"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":478,"description":"<p>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.</p>\n","itemtype":"method","name":"matchRows","params":[{"name":"regexp","description":"<p>The regular expression to match</p>\n","type":"String"},{"name":"column","description":"<p>The column ID (number) or\n                                 title (string)</p>\n","type":"String|Integer","optional":true}],"return":{"description":"An Array of TableRow objects","type":"p5.TableRow[]"},"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":545,"description":"<p>Retrieves all values in the specified column, and returns them\nas an array. The column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"getColumn","params":[{"name":"column","description":"<p>String or Number of the column to return</p>\n","type":"String|Number"}],"return":{"description":"Array of column values","type":"Array"},"example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":597,"description":"<p>Removes all rows from a Table. While all rows are removed,\ncolumns and column titles are maintained.</p>\n","itemtype":"method","name":"clearRows","example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":638,"description":"<p>Use <a href=\"#/p5/addColumn\">addColumn()</a> to add a new column to a <a href=\"#/p5.Table\">Table</a> 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.)</p>\n","itemtype":"method","name":"addColumn","params":[{"name":"title","description":"<p>title of the given column</p>\n","type":"String","optional":true}],"example":["\n <div class=\"norender\">\n <code>\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 </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":688,"description":"<p>Returns the total number of columns in a Table.</p>\n","itemtype":"method","name":"getColumnCount","return":{"description":"Number of columns in this table","type":"Integer"},"example":["\n <div>\n <code>\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 </code>\n </div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":724,"description":"<p>Returns the total number of rows in a Table.</p>\n","itemtype":"method","name":"getRowCount","return":{"description":"Number of rows in this table","type":"Integer"},"example":["\n <div>\n <code>\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 </code>\n </div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":760,"description":"<p>Removes any of the specified characters (or \"tokens\").</p>\n<p>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.</p>\n","itemtype":"method","name":"removeTokens","params":[{"name":"chars","description":"<p>String listing characters to be removed</p>\n","type":"String"},{"name":"column","description":"<p>Column ID (number)\n                                 or name (string)</p>\n","type":"String|Integer","optional":true}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":832,"description":"<p>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.</p>\n","itemtype":"method","name":"trim","params":[{"name":"column","description":"<p>Column ID (number)\n                                 or name (string)</p>\n","type":"String|Integer","optional":true}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":896,"description":"<p>Use <a href=\"#/p5/removeColumn\">removeColumn()</a> 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.</p>\n","itemtype":"method","name":"removeColumn","params":[{"name":"column","description":"<p>columnName (string) or ID (number)</p>\n","type":"String|Integer"}],"example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":960,"description":"<p>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.</p>\n","itemtype":"method","name":"set","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>column ID (Number)\n                              or title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>value to assign</p>\n","type":"String|Number"}],"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1009,"description":"<p>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.</p>\n","itemtype":"method","name":"setNum","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>column ID (Number)\n                              or title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>value to assign</p>\n","type":"Number"}],"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1055,"description":"<p>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.</p>\n","itemtype":"method","name":"setString","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>column ID (Number)\n                              or title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>value to assign</p>\n","type":"String"}],"example":["\n<div class=\"norender\"><code>\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</code></div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1100,"description":"<p>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.</p>\n","itemtype":"method","name":"get","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>columnName (string) or\n                                  ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"","type":"String|Number"},"example":["\n<div class=\"norender\">\n<code>\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}\n</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1146,"description":"<p>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.</p>\n","itemtype":"method","name":"getNum","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>columnName (string) or\n                                  ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\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}\n</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1190,"description":"<p>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.</p>\n","itemtype":"method","name":"getString","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>columnName (string) or\n                                  ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"","type":"String"},"example":["\n<div class=\"norender\">\n<code>\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}\n</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1242,"description":"<p>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.</p>\n","itemtype":"method","name":"getObject","params":[{"name":"headerColumn","description":"<p>Name of the column which should be used to\n                             title each row object (optional)</p>\n","type":"String","optional":true}],"return":{"description":"","type":"Object"},"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1305,"description":"<p>Retrieves all table data and returns it as a multidimensional array.</p>\n","itemtype":"method","name":"getArray","return":{"description":"","type":"Array"},"example":["\n<div class=\"norender\">\n<code>\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}\n</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":40,"description":"<p>Stores a value in the TableRow's specified column.\nThe column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"set","params":[{"name":"column","description":"<p>Column ID (Number)\n                              or Title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>The value to be stored</p>\n","type":"String|Number"}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":102,"description":"<p>Stores a Float value in the TableRow's specified column.\nThe column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"setNum","params":[{"name":"column","description":"<p>Column ID (Number)\n                              or Title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>The value to be stored\n                              as a Float</p>\n","type":"Number|String"}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":146,"description":"<p>Stores a String value in the TableRow's specified column.\nThe column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"setString","params":[{"name":"column","description":"<p>Column ID (Number)\n                              or Title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>The value to be stored\n                              as a String</p>\n","type":"String|Number|Boolean|Object"}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":191,"description":"<p>Retrieves a value from the TableRow's specified column.\nThe column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"get","params":[{"name":"column","description":"<p>columnName (string) or\n                                 ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"","type":"String|Number"},"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":239,"description":"<p>Retrieves a Float value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.</p>\n","itemtype":"method","name":"getNum","params":[{"name":"column","description":"<p>columnName (string) or\n                                 ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"Float Floating point number","type":"Number"},"example":["\n <div class=\"norender\"><code>\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 }\n </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":295,"description":"<p>Retrieves an String value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.</p>\n","itemtype":"method","name":"getString","params":[{"name":"column","description":"<p>columnName (string) or\n                                 ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"String","type":"String"},"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.XML.js","line":62,"description":"<p>Gets a copy of the element's parent. Returns the parent as another\n<a href=\"#/p5.XML\">p5.XML</a> object.</p>\n","itemtype":"method","name":"getParent","return":{"description":"element parent","type":"p5.XML"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":100,"description":"<p>Gets the element's full name, which is returned as a String.</p>\n","itemtype":"method","name":"getName","return":{"description":"the name of the node","type":"String"},"example":["&lt;animal\n <div class='norender'><code>\n // The following short XML file called \"mammals.xml\" is parsed\n // in the code below.\n //\n // <?xml version=\"1.0\"?>\n // &lt;mammals&gt;\n //   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n //   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n //   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n // &lt;/mammals&gt;\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 </code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":135,"description":"<p>Sets the element's name, which is specified as a String.</p>\n","itemtype":"method","name":"setName","params":[{"name":"the","description":"<p>new name of the node</p>\n","type":"String"}],"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":181,"description":"<p>Checks whether or not the element has any children, and returns the result\nas a boolean.</p>\n","itemtype":"method","name":"hasChildren","return":{"description":"","type":"Boolean"},"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":217,"description":"<p>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 <a href=\"#/p5.XML/getName\">getName()</a>\non each child element individually.</p>\n","itemtype":"method","name":"listChildren","return":{"description":"names of the children of the element","type":"String[]"},"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":258,"description":"<p>Returns all of the element's children as an array of <a href=\"#/p5.XML\">p5.XML</a> objects. When\nthe name parameter is specified, then it will return all children that match\nthat name.</p>\n","itemtype":"method","name":"getChildren","params":[{"name":"name","description":"<p>element name</p>\n","type":"String","optional":true}],"return":{"description":"children of the element","type":"p5.XML[]"},"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":314,"description":"<p>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.</p>\n","itemtype":"method","name":"getChild","params":[{"name":"name","description":"<p>element name or index</p>\n","type":"String|Integer"}],"return":{"description":"","type":"p5.XML"},"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>\n<div class='norender'><code>\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":374,"description":"<p>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 <a href=\"#/p5.XML\">p5.XML</a> object.\nA reference to the newly created child is returned as an <a href=\"#/p5.XML\">p5.XML</a> object.</p>\n","itemtype":"method","name":"addChild","params":[{"name":"node","description":"<p>a <a href=\"#/p5.XML\">p5.XML</a> Object which will be the child to be added</p>\n","type":"p5.XML"}],"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":426,"description":"<p>Removes the element specified by name or index.</p>\n","itemtype":"method","name":"removeChild","params":[{"name":"name","description":"<p>element name or index</p>\n","type":"String|Integer"}],"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>\n<div class='norender'><code>\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":498,"description":"<p>Counts the specified element's number of attributes, returned as an Number.</p>\n","itemtype":"method","name":"getAttributeCount","return":{"description":"","type":"Integer"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":534,"description":"<p>Gets all of the specified element's attributes, and returns them as an\narray of Strings.</p>\n","itemtype":"method","name":"listAttributes","return":{"description":"an array of strings containing the names of attributes","type":"String[]"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":577,"description":"<p>Checks whether or not an element has the specified attribute.</p>\n","itemtype":"method","name":"hasAttribute","params":[{"name":"the","description":"<p>attribute to be checked</p>\n","type":"String"}],"return":{"description":"true if attribute found else false","type":"Boolean"},"example":["\n <div class='norender'><code>\n // The following short XML file called \"mammals.xml\" is parsed\n // in the code below.\n //\n // <?xml version=\"1.0\"?>\n // &lt;mammals&gt;\n //   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n //   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n //   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n // &lt;/mammals&gt;\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 </code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":622,"description":"<p>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.</p>\n","itemtype":"method","name":"getNum","params":[{"name":"name","description":"<p>the non-null full name of the attribute</p>\n","type":"String"},{"name":"defaultValue","description":"<p>the default value of the attribute</p>\n","type":"Number","optional":true}],"return":{"description":"","type":"Number"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":669,"description":"<p>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.</p>\n","itemtype":"method","name":"getString","params":[{"name":"name","description":"<p>the non-null full name of the attribute</p>\n","type":"String"},{"name":"defaultValue","description":"<p>the default value of the attribute</p>\n","type":"Number","optional":true}],"return":{"description":"","type":"String"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":716,"description":"<p>Sets the content of an element's attribute. The first parameter specifies\nthe attribute name, while the second specifies the new content.</p>\n","itemtype":"method","name":"setAttribute","params":[{"name":"name","description":"<p>the full name of the attribute</p>\n","type":"String"},{"name":"value","description":"<p>the value of the attribute</p>\n","type":"Number|String|Boolean"}],"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":757,"description":"<p>Returns the content of an element. If there is no such content,\ndefaultValue is returned if specified, otherwise null is returned.</p>\n","itemtype":"method","name":"getContent","params":[{"name":"defaultValue","description":"<p>value returned if no content is found</p>\n","type":"String","optional":true}],"return":{"description":"","type":"String"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":798,"description":"<p>Sets the element's content.</p>\n","itemtype":"method","name":"setContent","params":[{"name":"text","description":"<p>the new content</p>\n","type":"String"}],"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":839,"description":"<p>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.</p>\n","itemtype":"method","name":"serialize","return":{"description":"Serialized string of the element","type":"String"},"example":["\n<div class='norender'><code>\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// <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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/math/calculation.js","line":10,"description":"<p>Calculates the absolute value (magnitude) of a number. Maps to Math.abs().\nThe absolute value of a number is always positive.</p>\n","itemtype":"method","name":"abs","params":[{"name":"n","description":"<p>number to compute</p>\n","type":"Number"}],"return":{"description":"absolute value of given number","type":"Number"},"example":["\n<div class = \"norender\"><code>\nfunction setup() {\n  let x = -3;\n  let y = abs(x);\n\n  print(x); // -3\n  print(y); // 3\n}\n</code></div>"],"alt":"no image displayed","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":33,"description":"<p>Calculates the closest int value that is greater than or equal to the\nvalue of the parameter. Maps to Math.ceil(). For example, ceil(9.03)\nreturns the value 10.</p>\n","itemtype":"method","name":"ceil","params":[{"name":"n","description":"<p>number to round up</p>\n","type":"Number"}],"return":{"description":"rounded up number","type":"Integer"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  // map, mouseX between 0 and 5.\n  let ax = map(mouseX, 0, 100, 0, 5);\n  let ay = 66;\n\n  //Get the ceiling of the mapped number.\n  let bx = ceil(map(mouseX, 0, 100, 0, 5));\n  let by = 33;\n\n  // Multiply the mapped numbers by 20 to more easily\n  // see the changes.\n  stroke(0);\n  fill(0);\n  line(0, ay, ax * 20, ay);\n  line(0, by, bx * 20, by);\n\n  // Reformat the float returned by map and draw it.\n  noStroke();\n  text(nfc(ax, 2), ax, ay - 5);\n  text(nfc(bx, 1), bx, by - 5);\n}\n</code></div>"],"alt":"2 horizontal lines & number sets. increase with mouse x. bottom to 2 decimals","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":72,"description":"<p>Constrains a value between a minimum and maximum value.</p>\n","itemtype":"method","name":"constrain","params":[{"name":"n","description":"<p>number to constrain</p>\n","type":"Number"},{"name":"low","description":"<p>minimum limit</p>\n","type":"Number"},{"name":"high","description":"<p>maximum limit</p>\n","type":"Number"}],"return":{"description":"constrained number","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n\n  let leftWall = 25;\n  let rightWall = 75;\n\n  // xm is just the mouseX, while\n  // xc is the mouseX, but constrained\n  // between the leftWall and rightWall!\n  let xm = mouseX;\n  let xc = constrain(mouseX, leftWall, rightWall);\n\n  // Draw the walls.\n  stroke(150);\n  line(leftWall, 0, leftWall, height);\n  line(rightWall, 0, rightWall, height);\n\n  // Draw xm and xc as circles.\n  noStroke();\n  fill(150);\n  ellipse(xm, 33, 9, 9); // Not Constrained\n  fill(0);\n  ellipse(xc, 66, 9, 9); // Constrained\n}\n</code></div>"],"alt":"2 vertical lines. 2 ellipses move with mouse X 1 does not move passed lines","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":116,"description":"<p>Calculates the distance between two points, in either two or three dimensions.</p>\n","itemtype":"method","name":"dist","return":{"description":"distance between the two points","type":"Number"},"example":["\n<div><code>\n// Move your mouse inside the canvas to see the\n// change in distance between two points!\nfunction draw() {\n  background(200);\n  fill(0);\n\n  let x1 = 10;\n  let y1 = 90;\n  let x2 = mouseX;\n  let y2 = mouseY;\n\n  line(x1, y1, x2, y2);\n  ellipse(x1, y1, 7, 7);\n  ellipse(x2, y2, 7, 7);\n\n  // d is the length of the line\n  // the distance from point 1 to point 2.\n  let d = dist(x1, y1, x2, y2);\n\n  // Let's write d along the line we are drawing!\n  push();\n  translate((x1 + x2) / 2, (y1 + y2) / 2);\n  rotate(atan2(y2 - y1, x2 - x1));\n  text(nfc(d, 1), 0, -5);\n  pop();\n  // Fancy!\n}\n</code></div>"],"alt":"2 ellipses joined by line. 1 ellipse moves with mouse X&Y. Distance displayed.","class":"p5","module":"Math","submodule":"Calculation","overloads":[{"line":116,"params":[{"name":"x1","description":"<p>x-coordinate of the first point</p>\n","type":"Number"},{"name":"y1","description":"<p>y-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"<p>x-coordinate of the second point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate of the second point</p>\n","type":"Number"}],"return":{"description":"distance between the two points","type":"Number"}},{"line":160,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>z-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>z-coordinate of the second point</p>\n","type":"Number"}],"return":{"description":"distance between the two points","type":"Number"}}]},{"file":"src/math/calculation.js","line":181,"description":"<p>Returns Euler's number e (2.71828...) raised to the power of the n\nparameter. Maps to Math.exp().</p>\n","itemtype":"method","name":"exp","params":[{"name":"n","description":"<p>exponent to raise</p>\n","type":"Number"}],"return":{"description":"e^n","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n\n  // Compute the exp() function with a value between 0 and 2\n  let xValue = map(mouseX, 0, width, 0, 2);\n  let yValue = exp(xValue);\n\n  let y = map(yValue, 0, 8, height, 0);\n\n  let legend = 'exp (' + nfc(xValue, 3) + ')\\n= ' + nf(yValue, 1, 4);\n  stroke(150);\n  line(mouseX, y, mouseX, height);\n  fill(0);\n  text(legend, 5, 15);\n  noStroke();\n  ellipse(mouseX, y, 7, 7);\n\n  // Draw the exp(x) curve,\n  // over the domain of x from 0 to 2\n  noFill();\n  stroke(0);\n  beginShape();\n  for (let x = 0; x < width; x++) {\n    xValue = map(x, 0, width, 0, 2);\n    yValue = exp(xValue);\n    y = map(yValue, 0, 8, height, 0);\n    vertex(x, y);\n  }\n\n  endShape();\n  line(0, 0, 0, height);\n  line(0, height - 1, width, height - 1);\n}\n</code></div>"],"alt":"ellipse moves along a curve with mouse x. e^n displayed.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":230,"description":"<p>Calculates the closest int value that is less than or equal to the\nvalue of the parameter. Maps to Math.floor().</p>\n","itemtype":"method","name":"floor","params":[{"name":"n","description":"<p>number to round down</p>\n","type":"Number"}],"return":{"description":"rounded down number","type":"Integer"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  //map, mouseX between 0 and 5.\n  let ax = map(mouseX, 0, 100, 0, 5);\n  let ay = 66;\n\n  //Get the floor of the mapped number.\n  let bx = floor(map(mouseX, 0, 100, 0, 5));\n  let by = 33;\n\n  // Multiply the mapped numbers by 20 to more easily\n  // see the changes.\n  stroke(0);\n  fill(0);\n  line(0, ay, ax * 20, ay);\n  line(0, by, bx * 20, by);\n\n  // Reformat the float returned by map and draw it.\n  noStroke();\n  text(nfc(ax, 2), ax, ay - 5);\n  text(nfc(bx, 1), bx, by - 5);\n}\n</code></div>"],"alt":"2 horizontal lines & number sets. increase with mouse x. bottom to 2 decimals","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":268,"description":"<p>Calculates a number between two numbers at a specific increment. The amt\nparameter is the amount to interpolate between the two values where 0.0\nequal to the first point, 0.1 is very near the first point, 0.5 is\nhalf-way in between, and 1.0 is equal to the second point. If the\nvalue of amt is more than 1.0 or less than 0.0, the number will be\ncalculated accordingly in the ratio of the two given numbers. The lerp\nfunction is convenient for creating motion along a straight\npath and for drawing dotted lines.</p>\n","itemtype":"method","name":"lerp","params":[{"name":"start","description":"<p>first value</p>\n","type":"Number"},{"name":"stop","description":"<p>second value</p>\n","type":"Number"},{"name":"amt","description":"<p>number</p>\n","type":"Number"}],"return":{"description":"lerped value","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  background(200);\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  let y = 50;\n\n  strokeWeight(5);\n  stroke(0); // Draw the original points in black\n  point(a, y);\n  point(b, y);\n\n  stroke(100); // Draw the lerp points in gray\n  point(c, y);\n  point(d, y);\n  point(e, y);\n}\n</code></div>"],"alt":"5 points horizontally staggered mid-canvas. mid 3 are grey, outer black","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":315,"description":"<p>Calculates the natural logarithm (the base-e logarithm) of a number. This\nfunction expects the n parameter to be a value greater than 0.0. Maps to\nMath.log().</p>\n","itemtype":"method","name":"log","params":[{"name":"n","description":"<p>number greater than 0</p>\n","type":"Number"}],"return":{"description":"natural logarithm of n","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  let maxX = 2.8;\n  let maxY = 1.5;\n\n  // Compute the natural log of a value between 0 and maxX\n  let xValue = map(mouseX, 0, width, 0, maxX);\n  let yValue, y;\n  if (xValue > 0) {\n   // Cannot take the log of a negative number.\n    yValue = log(xValue);\n    y = map(yValue, -maxY, maxY, height, 0);\n\n    // Display the calculation occurring.\n    let legend = 'log(' + nf(xValue, 1, 2) + ')\\n= ' + nf(yValue, 1, 3);\n    stroke(150);\n    line(mouseX, y, mouseX, height);\n    fill(0);\n    text(legend, 5, 15);\n    noStroke();\n    ellipse(mouseX, y, 7, 7);\n  }\n\n  // Draw the log(x) curve,\n  // over the domain of x from 0 to maxX\n  noFill();\n  stroke(0);\n  beginShape();\n  for (let x = 0; x < width; x++) {\n    xValue = map(x, 0, width, 0, maxX);\n    yValue = log(xValue);\n    y = map(yValue, -maxY, maxY, height, 0);\n    vertex(x, y);\n  }\n  endShape();\n  line(0, 0, 0, height);\n  line(0, height / 2, width, height / 2);\n}\n</code></div>"],"alt":"ellipse moves along a curve with mouse x. natural logarithm of n displayed.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":370,"description":"<p>Calculates the magnitude (or length) of a vector. A vector is a direction\nin space commonly used in computer graphics and linear algebra. Because it\nhas no \"start\" position, the magnitude of a vector can be thought of as\nthe distance from the coordinate 0,0 to its x,y value. Therefore, <a href=\"#/p5/mag\">mag()</a> is\na shortcut for writing dist(0, 0, x, y).</p>\n","itemtype":"method","name":"mag","params":[{"name":"a","description":"<p>first value</p>\n","type":"Number"},{"name":"b","description":"<p>second value</p>\n","type":"Number"}],"return":{"description":"magnitude of vector from (0,0) to (a,b)","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  let x1 = 20;\n  let x2 = 80;\n  let y1 = 30;\n  let y2 = 70;\n\n  line(0, 0, x1, y1);\n  print(mag(x1, y1)); // Prints \"36.05551275463989\"\n  line(0, 0, x2, y1);\n  print(mag(x2, y1)); // Prints \"85.44003745317531\"\n  line(0, 0, x1, y2);\n  print(mag(x1, y2)); // Prints \"72.80109889280519\"\n  line(0, 0, x2, y2);\n  print(mag(x2, y2)); // Prints \"106.3014581273465\"\n}\n</code></div>"],"alt":"4 lines of different length radiate from top left of canvas.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":408,"description":"<p>Re-maps a number from one range to another.</p>\n<p>In the first example above, the number 25 is converted from a value in the\nrange of 0 to 100 into a value that ranges from the left edge of the\nwindow (0) to the right edge (width).</p>\n","itemtype":"method","name":"map","params":[{"name":"value","description":"<p>the incoming value to be converted</p>\n","type":"Number"},{"name":"start1","description":"<p>lower bound of the value's current range</p>\n","type":"Number"},{"name":"stop1","description":"<p>upper bound of the value's current range</p>\n","type":"Number"},{"name":"start2","description":"<p>lower bound of the value's target range</p>\n","type":"Number"},{"name":"stop2","description":"<p>upper bound of the value's target range</p>\n","type":"Number"},{"name":"withinBounds","description":"<p>constrain the value to the newly mapped range</p>\n","type":"Boolean","optional":true}],"return":{"description":"remapped number","type":"Number"},"example":["\n  <div><code>\nlet value = 25;\nlet m = map(value, 0, 100, 0, width);\nellipse(m, 50, 10, 10);\n</code></div>\n\n  <div><code>\nfunction setup() {\n  noStroke();\n}\n\nfunction draw() {\n  background(204);\n  let x1 = map(mouseX, 0, width, 25, 75);\n  ellipse(x1, 25, 25, 25);\n  //This ellipse is constrained to the 0-100 range\n  //after setting withinBounds to true\n  let x2 = map(mouseX, 0, width, 0, 100, true);\n  ellipse(x2, 75, 25, 25);\n}\n</code></div>"],"alt":"10 by 10 white ellipse with in mid left canvas\n2 25 by 25 white ellipses move with mouse x. Bottom has more range from X","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":463,"description":"<p>Determines the largest value in a sequence of numbers, and then returns\nthat value. <a href=\"#/p5/max\">max()</a> accepts any number of Number parameters, or an Array\nof any length.</p>\n","itemtype":"method","name":"max","return":{"description":"maximum Number","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  // Change the elements in the array and run the sketch\n  // to show how max() works!\n  let numArray = [2, 1, 5, 4, 8, 9];\n  fill(0);\n  noStroke();\n  text('Array Elements', 0, 10);\n  // Draw all numbers in the array\n  let spacing = 15;\n  let elemsY = 25;\n  for (let i = 0; i < numArray.length; i++) {\n    text(numArray[i], i * spacing, elemsY);\n  }\n  let maxX = 33;\n  let maxY = 80;\n  // Draw the Maximum value in the array.\n  textSize(32);\n  text(max(numArray), maxX, maxY);\n}\n</code></div>"],"alt":"Small text at top reads: Array Elements 2 1 5 4 8 9. Large text at center: 9","class":"p5","module":"Math","submodule":"Calculation","overloads":[{"line":463,"params":[{"name":"n0","description":"<p>Number to compare</p>\n","type":"Number"},{"name":"n1","description":"<p>Number to compare</p>\n","type":"Number"}],"return":{"description":"maximum Number","type":"Number"}},{"line":498,"params":[{"name":"nums","description":"<p>Numbers to compare</p>\n","type":"Number[]"}],"return":{"description":"","type":"Number"}}]},{"file":"src/math/calculation.js","line":511,"description":"<p>Determines the smallest value in a sequence of numbers, and then returns\nthat value. <a href=\"#/p5/min\">min()</a> accepts any number of Number parameters, or an Array\nof any length.</p>\n","itemtype":"method","name":"min","return":{"description":"minimum Number","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  // Change the elements in the array and run the sketch\n  // to show how min() works!\n  let numArray = [2, 1, 5, 4, 8, 9];\n  fill(0);\n  noStroke();\n  text('Array Elements', 0, 10);\n  // Draw all numbers in the array\n  let spacing = 15;\n  let elemsY = 25;\n  for (let i = 0; i < numArray.length; i++) {\n    text(numArray[i], i * spacing, elemsY);\n  }\n  let maxX = 33;\n  let maxY = 80;\n  // Draw the Minimum value in the array.\n  textSize(32);\n  text(min(numArray), maxX, maxY);\n}\n</code></div>"],"alt":"Small text at top reads: Array Elements 2 1 5 4 8 9. Large text at center: 1","class":"p5","module":"Math","submodule":"Calculation","overloads":[{"line":511,"params":[{"name":"n0","description":"<p>Number to compare</p>\n","type":"Number"},{"name":"n1","description":"<p>Number to compare</p>\n","type":"Number"}],"return":{"description":"minimum Number","type":"Number"}},{"line":546,"params":[{"name":"nums","description":"<p>Numbers to compare</p>\n","type":"Number[]"}],"return":{"description":"","type":"Number"}}]},{"file":"src/math/calculation.js","line":559,"description":"<p>Normalizes a number from another range into a value between 0 and 1.\nIdentical to map(value, low, high, 0, 1).\nNumbers outside of the range are not clamped to 0 and 1, because\nout-of-range values are often intentional and useful. (See the example above.)</p>\n","itemtype":"method","name":"norm","params":[{"name":"value","description":"<p>incoming value to be normalized</p>\n","type":"Number"},{"name":"start","description":"<p>lower bound of the value's current range</p>\n","type":"Number"},{"name":"stop","description":"<p>upper bound of the value's current range</p>\n","type":"Number"}],"return":{"description":"normalized number","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  let currentNum = mouseX;\n  let lowerBound = 0;\n  let upperBound = width; //100;\n  let normalized = norm(currentNum, lowerBound, upperBound);\n  let lineY = 70;\n  stroke(3);\n  line(0, lineY, width, lineY);\n  //Draw an ellipse mapped to the non-normalized value.\n  noStroke();\n  fill(50);\n  let s = 7; // ellipse size\n  ellipse(currentNum, lineY, s, s);\n\n  // Draw the guide\n  let guideY = lineY + 15;\n  text('0', 0, guideY);\n  textAlign(RIGHT);\n  text('100', width, guideY);\n\n  // Draw the normalized value\n  textAlign(LEFT);\n  fill(0);\n  textSize(32);\n  let normalY = 40;\n  let normalX = 20;\n  text(normalized, normalX, normalY);\n}\n</code></div>"],"alt":"ellipse moves with mouse. 0 shown left & 100 right and updating values center","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":611,"description":"<p>Facilitates exponential expressions. The <a href=\"#/p5/pow\">pow()</a> function is an efficient\nway of multiplying numbers by themselves (or their reciprocals) in large\nquantities. For example, pow(3, 5) is equivalent to the expression\n3 × 3 × 3 × 3 × 3 and pow(3, -5) is equivalent to 1 /\n3 × 3 × 3 × 3 × 3. Maps to\nMath.pow().</p>\n","itemtype":"method","name":"pow","params":[{"name":"n","description":"<p>base of the exponential expression</p>\n","type":"Number"},{"name":"e","description":"<p>power by which to raise the base</p>\n","type":"Number"}],"return":{"description":"n^e","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  //Exponentially increase the size of an ellipse.\n  let eSize = 3; // Original Size\n  let eLoc = 10; // Original Location\n\n  ellipse(eLoc, eLoc, eSize, eSize);\n\n  ellipse(eLoc * 2, eLoc * 2, pow(eSize, 2), pow(eSize, 2));\n\n  ellipse(eLoc * 4, eLoc * 4, pow(eSize, 3), pow(eSize, 3));\n\n  ellipse(eLoc * 8, eLoc * 8, pow(eSize, 4), pow(eSize, 4));\n}\n</code></div>"],"alt":"small to large ellipses radiating from top left of canvas","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":645,"description":"<p>Calculates the integer closest to the n parameter. For example,\nround(133.8) returns the value 134. Maps to Math.round().</p>\n","itemtype":"method","name":"round","params":[{"name":"n","description":"<p>number to round</p>\n","type":"Number"},{"name":"decimals","description":"<p>number of decimal places to round to, default is 0</p>\n","type":"Number","optional":true}],"return":{"description":"rounded number","type":"Integer"},"example":["\n<div><code>\nlet x = round(3.7);\ntext(x, width / 2, height / 2);\n</code></div>\n<div><code>\nlet x = round(12.782383, 2);\ntext(x, width / 2, height / 2);\n</code></div>\n<div><code>\nfunction draw() {\n  background(200);\n  //map, mouseX between 0 and 5.\n  let ax = map(mouseX, 0, 100, 0, 5);\n  let ay = 66;\n\n  // Round the mapped number.\n  let bx = round(map(mouseX, 0, 100, 0, 5));\n  let by = 33;\n\n  // Multiply the mapped numbers by 20 to more easily\n  // see the changes.\n  stroke(0);\n  fill(0);\n  line(0, ay, ax * 20, ay);\n  line(0, by, bx * 20, by);\n\n  // Reformat the float returned by map and draw it.\n  noStroke();\n  text(nfc(ax, 2), ax, ay - 5);\n  text(nfc(bx, 1), bx, by - 5);\n}\n</code></div>"],"alt":"\"3\" written in middle of canvas\n\"12.78\" written in middle of canvas\nhorizontal center line squared values displayed on top and regular on bottom.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":699,"description":"<p>Squares a number (multiplies a number by itself). The result is always a\npositive number, as multiplying two negative numbers always yields a\npositive result. For example, -1 * -1 = 1.</p>\n","itemtype":"method","name":"sq","params":[{"name":"n","description":"<p>number to square</p>\n","type":"Number"}],"return":{"description":"squared number","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  let eSize = 7;\n  let x1 = map(mouseX, 0, width, 0, 10);\n  let y1 = 80;\n  let x2 = sq(x1);\n  let y2 = 20;\n\n  // Draw the non-squared.\n  line(0, y1, width, y1);\n  ellipse(x1, y1, eSize, eSize);\n\n  // Draw the squared.\n  line(0, y2, width, y2);\n  ellipse(x2, y2, eSize, eSize);\n\n  // Draw dividing line.\n  stroke(100);\n  line(0, height / 2, width, height / 2);\n\n  // Draw text.\n  let spacing = 15;\n  noStroke();\n  fill(0);\n  text('x = ' + x1, 0, y1 + spacing);\n  text('sq(x) = ' + x2, 0, y2 + spacing);\n}\n</code></div>"],"alt":"horizontal center line squared values displayed on top and regular on bottom.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":743,"description":"<p>Calculates the square root of a number. The square root of a number is\nalways positive, even though there may be a valid negative root. The\nsquare root s of number a is such that s*s = a. It is the opposite of\nsquaring. Maps to Math.sqrt().</p>\n","itemtype":"method","name":"sqrt","params":[{"name":"n","description":"<p>non-negative number to square root</p>\n","type":"Number"}],"return":{"description":"square root of number","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  let eSize = 7;\n  let x1 = mouseX;\n  let y1 = 80;\n  let x2 = sqrt(x1);\n  let y2 = 20;\n\n  // Draw the non-squared.\n  line(0, y1, width, y1);\n  ellipse(x1, y1, eSize, eSize);\n\n  // Draw the squared.\n  line(0, y2, width, y2);\n  ellipse(x2, y2, eSize, eSize);\n\n  // Draw dividing line.\n  stroke(100);\n  line(0, height / 2, width, height / 2);\n\n  // Draw text.\n  noStroke();\n  fill(0);\n  let spacing = 15;\n  text('x = ' + x1, 0, y1 + spacing);\n  text('sqrt(x) = ' + x2, 0, y2 + spacing);\n}\n</code></div>"],"alt":"horizontal center line squareroot values displayed on top and regular on bottom.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":830,"description":"<p>Calculates the fractional part of a number.</p>\n","itemtype":"method","name":"fract","params":[{"name":"num","description":"<p>Number whose fractional part needs to be found out</p>\n","type":"Number"}],"return":{"description":"fractional part of x, i.e, {x}","type":"Number"},"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(windowWidth, windowHeight);\n  fill(0);\n  text(7345.73472742, 0, 50);\n  text(fract(7345.73472742), 0, 100);\n  text(1.4215e-15, 150, 50);\n  text(fract(1.4215e-15), 150, 100);\n}\n</code>\n</div>"],"alt":"2 rows of numbers, the first row having 8 numbers and the second having the fractional parts of those numbers.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/math.js","line":10,"description":"<p>Creates a new <a href=\"#/p5.Vector\">p5.Vector</a> (the datatype for storing vectors). This provides a\ntwo or three dimensional vector, specifically a Euclidean (also known as\ngeometric) vector. A vector is an entity that has both magnitude and\ndirection.</p>\n","itemtype":"method","name":"createVector","params":[{"name":"x","description":"<p>x component of the vector</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>z component of the vector</p>\n","type":"Number","optional":true}],"return":{"description":"","type":"p5.Vector"},"example":["\n<div><code>\nlet v1;\nfunction setup() {\n  createCanvas(100, 100);\n  stroke(255, 0, 255);\n  v1 = createVector(width / 2, height / 2);\n}\n\nfunction draw() {\n  background(255);\n  line(v1.x, v1.y, mouseX, mouseY);\n}\n</code></div>"],"alt":"draws a line from center of canvas to mouse pointer position.","class":"p5","module":"Math","submodule":"Vector"},{"file":"src/math/noise.js","line":36,"description":"<p>Returns the Perlin noise value at specified coordinates. Perlin noise is\na random sequence generator producing a more naturally ordered, harmonic\nsuccession of numbers compared to the standard <b>random()</b> function.\nIt was invented by Ken Perlin in the 1980s and been used since in\ngraphical applications to produce procedural textures, natural motion,\nshapes, terrains etc.<br /><br /> The main difference to the\n<b>random()</b> function is that Perlin noise is defined in an infinite\nn-dimensional space where each pair of coordinates corresponds to a\nfixed semi-random value (fixed only for the lifespan of the program; see\nthe <a href=\"#/p5/noiseSeed\">noiseSeed()</a> function). p5.js can compute 1D, 2D and 3D noise,\ndepending on the number of coordinates given. The resulting value will\nalways be between 0.0 and 1.0. The noise value can be animated by moving\nthrough the noise space as demonstrated in the example above. The 2nd\nand 3rd dimension can also be interpreted as time.<br /><br />The actual\nnoise is structured similar to an audio signal, in respect to the\nfunction's use of frequencies. Similar to the concept of harmonics in\nphysics, perlin noise is computed over several octaves which are added\ntogether for the final result. <br /><br />Another way to adjust the\ncharacter of the resulting sequence is the scale of the input\ncoordinates. As the function works within an infinite space the value of\nthe coordinates doesn't matter as such, only the distance between\nsuccessive coordinates does (eg. when using <b>noise()</b> within a\nloop). As a general rule the smaller the difference between coordinates,\nthe smoother the resulting noise sequence will be. Steps of 0.005-0.03\nwork best for most applications, but this will differ depending on use.</p>\n","itemtype":"method","name":"noise","params":[{"name":"x","description":"<p>x-coordinate in noise space</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate in noise space</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>z-coordinate in noise space</p>\n","type":"Number","optional":true}],"return":{"description":"Perlin noise value (between 0 and 1) at specified\n                     coordinates","type":"Number"},"example":["\n<div>\n<code>\nlet xoff = 0.0;\n\nfunction draw() {\n  background(204);\n  xoff = xoff + 0.01;\n  let n = noise(xoff) * width;\n  line(n, 0, n, height);\n}\n</code>\n</div>\n<div>\n<code>let noiseScale=0.02;\n\nfunction draw() {\n  background(0);\n  for (let x=0; x < width; x++) {\n    let noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);\n    stroke(noiseVal*255);\n    line(x, mouseY+noiseVal*80, x, height);\n  }\n}\n</code>\n</div>"],"alt":"vertical line moves left to right with updating noise values.\nhorizontal wave pattern effected by mouse x-position & updating noise values.","class":"p5","module":"Math","submodule":"Noise"},{"file":"src/math/noise.js","line":178,"description":"<p>Adjusts the character and level of detail produced by the Perlin noise\n function. Similar to harmonics in physics, noise is computed over\n several octaves. Lower octaves contribute more to the output signal and\n as such define the overall intensity of the noise, whereas higher octaves\n create finer grained details in the noise sequence.\nBy default, noise is computed over 4 octaves with each octave contributing\n exactly half than its predecessor, starting at 50% strength for the 1st\n octave. This falloff amount can be changed by adding an additional function\n parameter. Eg. a falloff factor of 0.75 means each octave will now have\n 75% impact (25% less) of the previous lower octave. Any value between\n 0.0 and 1.0 is valid, however note that values greater than 0.5 might\n result in greater than 1.0 values returned by <b>noise()</b>.\nBy changing these parameters, the signal created by the <b>noise()</b>\n function can be adapted to fit very specific needs and characteristics.</p>\n","itemtype":"method","name":"noiseDetail","params":[{"name":"lod","description":"<p>number of octaves to be used by the noise</p>\n","type":"Number"},{"name":"falloff","description":"<p>falloff factor for each octave</p>\n","type":"Number"}],"example":["\n <div>\n <code>\n let noiseVal;\n let noiseScale = 0.02;\nfunction setup() {\n   createCanvas(100, 100);\n }\nfunction draw() {\n   background(0);\n   for (let y = 0; y < height; y++) {\n     for (let x = 0; x < width / 2; x++) {\n       noiseDetail(2, 0.2);\n       noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);\n       stroke(noiseVal * 255);\n       point(x, y);\n       noiseDetail(8, 0.65);\n       noiseVal = noise(\n         (mouseX + x + width / 2) * noiseScale,\n         (mouseY + y) * noiseScale\n       );\n       stroke(noiseVal * 255);\n       point(x + width / 2, y);\n     }\n   }\n }\n </code>\n </div>"],"alt":"2 vertical grey smokey patterns affected my mouse x-position and noise.","class":"p5","module":"Math","submodule":"Noise"},{"file":"src/math/noise.js","line":243,"description":"<p>Sets the seed value for <b>noise()</b>. By default, <b>noise()</b>\nproduces different results each time the program is run. Set the\n<b>value</b> parameter to a constant to return the same pseudo-random\nnumbers each time the software is run.</p>\n","itemtype":"method","name":"noiseSeed","params":[{"name":"seed","description":"<p>the seed value</p>\n","type":"Number"}],"example":["\n<div>\n<code>let xoff = 0.0;\n\nfunction setup() {\n  noiseSeed(99);\n  stroke(0, 10);\n}\n\nfunction draw() {\n  xoff = xoff + .01;\n  let n = noise(xoff) * width;\n  line(n, 0, n, height);\n}\n</code>\n</div>"],"alt":"vertical grey lines drawing in pattern affected by noise.","class":"p5","module":"Math","submodule":"Noise"},{"file":"src/math/p5.Vector.js","line":65,"description":"<p>The x component of the vector</p>\n","itemtype":"property","name":"x","type":"Number","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":70,"description":"<p>The y component of the vector</p>\n","itemtype":"property","name":"y","type":"Number","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":75,"description":"<p>The z component of the vector</p>\n","itemtype":"property","name":"z","type":"Number","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":82,"description":"<p>Returns a string representation of a vector v by calling String(v)\nor v.toString(). This method is useful for logging vectors in the\nconsole.</p>\n","itemtype":"method","name":"toString","return":{"description":"","type":"String"},"example":["\n<div class = \"norender\">\n<code>\nfunction setup() {\n  let v = createVector(20, 30);\n  print(String(v)); // prints \"p5.Vector Object : [20, 30, 0]\"\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'black');\n\n  noStroke();\n  text(v1.toString(), 10, 25, 90, 75);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":132,"description":"<p>Sets the x, y, and z component of the vector using two or three separate\nvariables, the data from a <a href=\"#/p5.Vector\">p5.Vector</a>, or the values from a float array.</p>\n","itemtype":"method","name":"set","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nfunction setup() {\n  let v = createVector(1, 2, 3);\n  v.set(4, 5, 6); // Sets vector to [4, 5, 6]\n\n  let v1 = createVector(0, 0, 0);\n  let arr = [1, 2, 3];\n  v1.set(arr); // Sets vector to [1, 2, 3]\n}\n</code>\n</div>\n\n<div>\n<code>\nlet v0, v1;\nfunction setup() {\n  createCanvas(100, 100);\n\n  v0 = createVector(0, 0);\n  v1 = createVector(50, 50);\n}\n\nfunction draw() {\n  background(240);\n\n  drawArrow(v0, v1, 'black');\n  v1.set(v1.x + random(-1, 1), v1.y + random(-1, 1));\n\n  noStroke();\n  text('x: ' + round(v1.x) + ' y: ' + round(v1.y), 20, 90);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":132,"params":[{"name":"x","description":"<p>the x component of the vector</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>the y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>the z component of the vector</p>\n","type":"Number","optional":true}],"chainable":1},{"line":191,"params":[{"name":"value","description":"<p>the vector to set</p>\n","type":"p5.Vector|Number[]"}],"chainable":1}]},{"file":"src/math/p5.Vector.js","line":215,"description":"<p>Gets a copy of the vector, returns a <a href=\"#/p5.Vector\">p5.Vector</a> object.</p>\n","itemtype":"method","name":"copy","return":{"description":"the copy of the <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 2, 3);\nlet v2 = v1.copy();\nprint(v1.x === v2.x && v1.y === v2.y && v1.z === v2.z);\n// Prints \"true\"\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":238,"description":"<p>Adds x, y, and z components to a vector, adds one vector to another, or\nadds two independent vectors together. The version of the method that adds\ntwo vectors together is a static method and returns a <a href=\"#/p5.Vector\">p5.Vector</a>, the others\nacts directly on the vector. Additionally, you may provide arguments to this function as an array.\nSee the examples for more context.</p>\n","itemtype":"method","name":"add","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(1, 2, 3);\nv.add(4, 5, 6);\n// v's components are set to [5, 7, 9]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v = createVector(1, 2, 3);\n// Provide arguments as an array\nlet arr = [4, 5, 6];\nv.add(arr);\n// v's components are set to [5, 7, 9]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(1, 2, 3);\nlet v2 = createVector(2, 3, 4);\n\nlet v3 = p5.Vector.add(v1, v2);\n// v3 has components [3, 5, 7]\nprint(v3);\n</code>\n</div>\n\n<div>\n<code>\n// red vector + blue vector = purple vector\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(-30, 20);\n  drawArrow(v1, v2, 'blue');\n\n  let v3 = p5.Vector.add(v1, v2);\n  drawArrow(v0, v3, 'purple');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":238,"params":[{"name":"x","description":"<p>the x component of the vector to be added</p>\n","type":"Number"},{"name":"y","description":"<p>the y component of the vector to be added</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>the z component of the vector to be added</p>\n","type":"Number","optional":true}],"chainable":1},{"line":315,"params":[{"name":"value","description":"<p>the vector to add</p>\n","type":"p5.Vector|Number[]"}],"chainable":1},{"line":2040,"params":[{"name":"v1","description":"<p>a <a href=\"#/p5.Vector\">p5.Vector</a> to add</p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>a <a href=\"#/p5.Vector\">p5.Vector</a> to add</p>\n","type":"p5.Vector"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"the resulting <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":362,"description":"<p>Gives remainder of a vector when it is divided by another vector.\nSee examples for more context.</p>\n","itemtype":"method","name":"rem","chainable":1,"example":["\n<div class='norender'>\n<code>\nlet v = createVector(3, 4, 5);\nv.rem(2, 3, 4);\n// v's components are set to [1, 1, 1]\n</code>\n</div>\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(3, 4, 5);\nlet v2 = createVector(2, 3, 4);\n\nlet v3 = p5.Vector.rem(v1, v2);\n// v3 has components [1, 1, 1]\nprint(v3);\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":362,"params":[{"name":"x","description":"<p>the x component of divisor vector</p>\n","type":"Number"},{"name":"y","description":"<p>the y component of divisor vector</p>\n","type":"Number"},{"name":"z","description":"<p>the z component of divisor vector</p>\n","type":"Number"}],"chainable":1},{"line":391,"params":[{"name":"value","description":"<p>divisor vector</p>\n","type":"p5.Vector | Number[]"}],"chainable":1},{"line":2066,"params":[{"name":"v1","description":"<p>dividend <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>divisor <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"static":1},{"line":2072,"params":[{"name":"v1","description":"","type":"p5.Vector"},{"name":"v2","description":"","type":"p5.Vector"}],"static":1,"return":{"description":"the resulting <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":446,"description":"<p>Subtracts x, y, and z components from a vector, subtracts one vector from\nanother, or subtracts two independent vectors. The version of the method\nthat subtracts two vectors is a static method and returns a <a href=\"#/p5.Vector\">p5.Vector</a>, the\nother acts directly on the vector. Additionally, you may provide arguments to this function as an array.\nSee the examples for more context.</p>\n","itemtype":"method","name":"sub","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(4, 5, 6);\nv.sub(1, 1, 1);\n// v's components are set to [3, 4, 5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v = createVector(4, 5, 6);\n// Provide arguments as an array\nlet arr = [1, 1, 1];\nv.sub(arr);\n// v's components are set to [3, 4, 5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(2, 3, 4);\nlet v2 = createVector(1, 2, 3);\n\nlet v3 = p5.Vector.sub(v1, v2);\n// v3 has components [1, 1, 1]\nprint(v3);\n</code>\n</div>\n\n<div>\n<code>\n// red vector - blue vector = purple vector\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(70, 50);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(mouseX, mouseY);\n  drawArrow(v0, v2, 'blue');\n\n  let v3 = p5.Vector.sub(v1, v2);\n  drawArrow(v2, v3, 'purple');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":446,"params":[{"name":"x","description":"<p>the x component of the vector to subtract</p>\n","type":"Number"},{"name":"y","description":"<p>the y component of the vector to subtract</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>the z component of the vector to subtract</p>\n","type":"Number","optional":true}],"chainable":1},{"line":523,"params":[{"name":"value","description":"<p>the vector to subtract</p>\n","type":"p5.Vector|Number[]"}],"chainable":1},{"line":2091,"params":[{"name":"v1","description":"<p>a <a href=\"#/p5.Vector\">p5.Vector</a> to subtract from</p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>a <a href=\"#/p5.Vector\">p5.Vector</a> to subtract</p>\n","type":"p5.Vector"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"the resulting <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":547,"description":"<p>Multiplies the vector by a scalar, multiplies the x, y, and z components from a vector, or multiplies\nthe x, y, and z components of two independent vectors. When multiplying a vector by a scalar, the x, y,\nand z components of the vector are all multiplied by the scalar. When multiplying a vector by a vector,\nthe x, y, z components of both vectors are multiplied by each other\n(for example, with two vectors a and b: a.x * b.x, a.y * b.y, a.z * b.z). The static version of this method\ncreates a new <a href=\"#/p5.Vector\">p5.Vector</a> while the non static version acts on the vector\ndirectly. Additionally, you may provide arguments to this function as an array.\nSee the examples for more context.</p>\n","itemtype":"method","name":"mult","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(1, 2, 3);\nv.mult(2);\n// v's components are set to [2, 4, 6]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(1, 2, 3);\nlet v1 = createVector(2, 3, 4);\nv0.mult(v1); // v0's components are set to [2, 6, 12]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(1, 2, 3);\n// Provide arguments as an array\nlet arr = [2, 3, 4];\nv0.mult(arr); // v0's components are set to [2, 6, 12]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(1, 2, 3);\nlet v1 = createVector(2, 3, 4);\nconst result = p5.Vector.mult(v0, v1);\nprint(result); // result's components are set to [2, 6, 12]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(1, 2, 3);\nlet v2 = p5.Vector.mult(v1, 2);\n// v2 has components [2, 4, 6]\nprint(v2);\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(25, -25);\n  drawArrow(v0, v1, 'red');\n\n  let num = map(mouseX, 0, width, -2, 2, true);\n  let v2 = p5.Vector.mult(v1, num);\n  drawArrow(v0, v2, 'blue');\n\n  noStroke();\n  text('multiplied by ' + num.toFixed(2), 5, 90);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":547,"params":[{"name":"n","description":"<p>The number to multiply with the vector</p>\n","type":"Number"}],"chainable":1},{"line":640,"params":[{"name":"x","description":"<p>The number to multiply with the x component of the vector</p>\n","type":"Number"},{"name":"y","description":"<p>The number to multiply with the y component of the vector</p>\n","type":"Number"},{"name":"z","description":"<p>The number to multiply with the z component of the vector</p>\n","type":"Number","optional":true}],"chainable":1},{"line":648,"params":[{"name":"arr","description":"<p>The array to multiply with the components of the vector</p>\n","type":"Number[]"}],"chainable":1},{"line":654,"params":[{"name":"v","description":"<p>The vector to multiply with the components of the original vector</p>\n","type":"p5.Vector"}],"chainable":1},{"line":2120,"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 <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}},{"line":2129,"params":[{"name":"v","description":"","type":"p5.Vector"},{"name":"n","description":"","type":"Number"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1},{"line":2137,"params":[{"name":"v0","description":"","type":"p5.Vector"},{"name":"v1","description":"","type":"p5.Vector"},{"name":"target","description":"","type":"p5.Vector","optional":true}],"static":1},{"line":2145,"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":739,"description":"<p>Divides the vector by a scalar, divides a vector by the x, y, and z arguments, or divides the x, y, and\nz components of two vectors against each other. When dividing a vector by a scalar, the x, y,\nand z components of the vector are all divided by the scalar. When dividing a vector by a vector,\nthe x, y, z components of the source vector are treated as the dividend, and the x, y, z components\nof the argument is treated as the divisor (for example with two vectors a and b: a.x / b.x, a.y / b.y, a.z / b.z).\nThe static version of this method creates a\nnew <a href=\"#/p5.Vector\">p5.Vector</a> while the non static version acts on the vector directly.\nAdditionally, you may provide arguments to this function as an array.\nSee the examples for more context.</p>\n","itemtype":"method","name":"div","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(6, 4, 2);\nv.div(2); //v's components are set to [3, 2, 1]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(9, 4, 2);\nlet v1 = createVector(3, 2, 4);\nv0.div(v1); // v0's components are set to [3, 2, 0.5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(9, 4, 2);\n// Provide arguments as an array\nlet arr = [3, 2, 4];\nv0.div(arr); // v0's components are set to [3, 2, 0.5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(9, 4, 2);\nlet v1 = createVector(3, 2, 4);\nlet result = p5.Vector.div(v0, v1);\nprint(result); // result's components are set to [3, 2, 0.5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(6, 4, 2);\nlet v2 = p5.Vector.div(v1, 2);\n// v2 has components [3, 2, 1]\nprint(v2);\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 100);\n  let v1 = createVector(50, -50);\n  drawArrow(v0, v1, 'red');\n\n  let num = map(mouseX, 0, width, 10, 0.5, true);\n  let v2 = p5.Vector.div(v1, num);\n  drawArrow(v0, v2, 'blue');\n\n  noStroke();\n  text('divided by ' + num.toFixed(2), 10, 90);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":739,"params":[{"name":"n","description":"<p>The number to divide the vector by</p>\n","type":"Number"}],"chainable":1},{"line":832,"params":[{"name":"x","description":"<p>The number to divide with the x component of the vector</p>\n","type":"Number"},{"name":"y","description":"<p>The number to divide with the y component of the vector</p>\n","type":"Number"},{"name":"z","description":"<p>The number to divide with the z component of the vector</p>\n","type":"Number","optional":true}],"chainable":1},{"line":840,"params":[{"name":"arr","description":"<p>The array to divide the components of the vector by</p>\n","type":"Number[]"}],"chainable":1},{"line":846,"params":[{"name":"v","description":"<p>The vector to divide the components of the original vector by</p>\n","type":"p5.Vector"}],"chainable":1},{"line":2199,"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 <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}},{"line":2208,"params":[{"name":"v","description":"","type":"p5.Vector"},{"name":"n","description":"","type":"Number"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1},{"line":2216,"params":[{"name":"v0","description":"","type":"p5.Vector"},{"name":"v1","description":"","type":"p5.Vector"},{"name":"target","description":"","type":"p5.Vector","optional":true}],"static":1},{"line":2224,"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":944,"description":"<p>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).)</p>\n","itemtype":"method","name":"mag","return":{"description":"magnitude of the vector","type":"Number"},"example":["\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'black');\n\n  noStroke();\n  text('vector length: ' + v1.mag().toFixed(2), 10, 70, 90, 30);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>\n<div class=\"norender\">\n<code>\nlet v = createVector(20.0, 30.0, 40.0);\nlet m = v.mag();\nprint(m); // Prints \"53.85164807134504\"\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":944,"params":[],"return":{"description":"magnitude of the vector","type":"Number"}},{"line":2324,"params":[{"name":"vecT","description":"<p>the vector to return the magnitude of</p>\n","type":"p5.Vector"}],"static":1,"return":{"description":"the magnitude of vecT","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":992,"description":"<p>Calculates the squared magnitude of the vector and returns the result\nas a float (this is simply the equation <em>(x*x + y*y + z*z)</em>.)\nFaster if the real length is not required in the\ncase of comparing vectors, etc.</p>\n","itemtype":"method","name":"magSq","return":{"description":"squared magnitude of the vector","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(6, 4, 2);\nprint(v1.magSq()); // Prints \"56\"\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'black');\n\n  noStroke();\n  text('vector length squared: ' + v1.magSq().toFixed(2), 10, 45, 90, 55);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1046,"description":"<p>Calculates the dot product of two vectors. The version of the method\nthat computes the dot product of two independent vectors is a static\nmethod. See the examples for more context.</p>\n","itemtype":"method","name":"dot","return":{"description":"the dot product","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 2, 3);\nlet v2 = createVector(2, 3, 4);\n\nprint(v1.dot(v2)); // Prints \"20\"\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n//Static method\nlet v1 = createVector(1, 2, 3);\nlet v2 = createVector(3, 2, 1);\nprint(p5.Vector.dot(v1, v2)); // Prints \"10\"\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1046,"params":[{"name":"x","description":"<p>x component of the vector</p>\n","type":"Number"},{"name":"y","description":"<p>y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>z component of the vector</p>\n","type":"Number","optional":true}],"return":{"description":"the dot product","type":"Number"}},{"line":1076,"params":[{"name":"value","description":"<p>value component of the vector or a <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"return":{"description":"","type":"Number"}},{"line":2251,"params":[{"name":"v1","description":"<p>the first <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>the second <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"static":1,"return":{"description":"the dot product","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":1088,"description":"<p>Calculates and returns a vector composed of the cross product between\ntwo vectors. Both the static and non static methods return a new <a href=\"#/p5.Vector\">p5.Vector</a>.\nSee the examples for more context.</p>\n","itemtype":"method","name":"cross","return":{"description":"<a href=\"#/p5.Vector\">p5.Vector</a> composed of cross product","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 2, 3);\nlet v2 = createVector(1, 2, 3);\n\nlet v = v1.cross(v2); // v's components are [0, 0, 0]\nprint(v);\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(1, 0, 0);\nlet v2 = createVector(0, 1, 0);\n\nlet crossProduct = p5.Vector.cross(v1, v2);\n// crossProduct has components [0, 0, 1]\nprint(crossProduct);\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1088,"params":[{"name":"v","description":"<p><a href=\"#/p5.Vector\">p5.Vector</a> to be crossed</p>\n","type":"p5.Vector"}],"return":{"description":"<a href=\"#/p5.Vector\">p5.Vector</a> composed of cross product","type":"p5.Vector"}},{"line":2265,"params":[{"name":"v1","description":"<p>the first <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>the second <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"static":1,"return":{"description":"the cross product","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":1130,"description":"<p>Calculates the Euclidean distance between two points (considering a\npoint as a vector object).</p>\n","itemtype":"method","name":"dist","return":{"description":"the distance","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 0, 0);\nlet v2 = createVector(0, 1, 0);\n\nlet distance = v1.dist(v2); // distance is 1.4142...\nprint(distance);\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(1, 0, 0);\nlet v2 = createVector(0, 1, 0);\n\nlet distance = p5.Vector.dist(v1, v2);\n// distance is 1.4142...\nprint(distance);\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n\n  let v1 = createVector(70, 50);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(mouseX, mouseY);\n  drawArrow(v0, v2, 'blue');\n\n  noStroke();\n  text('distance between vectors: ' + v2.dist(v1).toFixed(2), 5, 50, 95, 50);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1130,"params":[{"name":"v","description":"<p>the x, y, and z coordinates of a <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"return":{"description":"the distance","type":"Number"}},{"line":2280,"params":[{"name":"v1","description":"<p>the first <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>the second <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"static":1,"return":{"description":"the distance","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":1201,"description":"<p>Normalize the vector to length 1 (make it a unit vector).</p>\n","itemtype":"method","name":"normalize","return":{"description":"normalized <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(10, 20, 2);\n// v has components [10.0, 20.0, 2.0]\nv.normalize();\n// v's components are set to\n// [0.4454354, 0.8908708, 0.089087084]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v_initial = createVector(10, 20, 2);\n// v_initial has components [10.0, 20.0, 2.0]\nlet v_normalized = p5.Vector.normalize(v_initial);\nprint(v_normalized);\n// returns a new vector with components set to\n// [0.4454354, 0.8908708, 0.089087084]\n// v_initial remains unchanged\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(mouseX - 50, mouseY - 50);\n\n  drawArrow(v0, v1, 'red');\n  v1.normalize();\n  drawArrow(v0, v1.mult(35), 'blue');\n\n  noFill();\n  ellipse(50, 50, 35 * 2);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1201,"params":[],"return":{"description":"normalized <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}},{"line":2341,"params":[{"name":"v","description":"<p>the vector to normalize</p>\n","type":"p5.Vector"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"v normalized to a length of 1","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":1271,"description":"<p>Limit the magnitude of this vector to the value used for the <b>max</b>\nparameter.</p>\n","itemtype":"method","name":"limit","params":[{"name":"max","description":"<p>the maximum magnitude for the vector</p>\n","type":"Number"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(10, 20, 2);\n// v has components [10.0, 20.0, 2.0]\nv.limit(5);\n// v's components are set to\n// [2.2271771, 4.4543543, 0.4454354]\n</code>\n</div>\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(mouseX - 50, mouseY - 50);\n\n  drawArrow(v0, v1, 'red');\n  drawArrow(v0, v1.limit(35), 'blue');\n\n  noFill();\n  ellipse(50, 50, 35 * 2);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1329,"description":"<p>Set the magnitude of this vector to the value used for the <b>len</b>\nparameter.</p>\n","itemtype":"method","name":"setMag","params":[{"name":"len","description":"<p>the new length for this vector</p>\n","type":"Number"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(10, 20, 2);\n// v has components [10.0, 20.0, 2.0]\nv.setMag(10);\n// v's components are set to [6.0, 8.0, 0.0]\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(50, 50);\n\n  drawArrow(v0, v1, 'red');\n\n  let length = map(mouseX, 0, width, 0, 141, true);\n  v1.setMag(length);\n  drawArrow(v0, v1, 'blue');\n\n  noStroke();\n  text('magnitude set to: ' + length.toFixed(2), 10, 70, 90, 30);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1385,"description":"<p>Calculate the angle of rotation for this vector(only 2D vectors).\np5.Vectors created using <a src=\"#/p5/createVector\">createVector()</a>\nwill take the current <a = src=\"#/p5/angleMode\">angleMode</a> into consideration, and give the angle\nin radians or degree accordingly.</p>\n","itemtype":"method","name":"heading","return":{"description":"the angle of rotation","type":"Number"},"example":["\n<div class = \"norender\">\n<code>\nfunction setup() {\n  let v1 = createVector(30, 50);\n  print(v1.heading()); // 1.0303768265243125\n\n  v1 = createVector(40, 50);\n  print(v1.heading()); // 0.8960553845713439\n\n  v1 = createVector(30, 70);\n  print(v1.heading()); // 1.1659045405098132\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(mouseX - 50, mouseY - 50);\n\n  drawArrow(v0, v1, 'black');\n\n  let myHeading = v1.heading();\n  noStroke();\n  text(\n    'vector heading: ' +\n      myHeading.toFixed(2) +\n      ' radians or ' +\n      degrees(myHeading).toFixed(2) +\n      ' degrees',\n    10,\n    50,\n    90,\n    50\n  );\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1457,"description":"<p>Rotate the vector to a specific angle (only 2D vectors), magnitude remains the\nsame</p>\n","itemtype":"method","name":"setHeading","params":[{"name":"angle","description":"<p>the angle of rotation</p>\n","type":"Number"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(10.0, 20.0);\n// result of v.heading() is 1.1071487177940904\nv.setHeading(Math.PI);\n// result of v.heading() is now 3.141592653589793\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1482,"description":"<p>Rotate the vector by an angle (only 2D vectors), magnitude remains the\nsame</p>\n","itemtype":"method","name":"rotate","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(10.0, 20.0);\n// v has components [10.0, 20.0, 0.0]\nv.rotate(HALF_PI);\n// v's components are set to [-20.0, 9.999999, 0.0]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// static function implementation\nlet v = createVector(10.0, 20.0);\n// v has components [10.0, 20.0, 0.0]\nlet rotated_v = p5.Vector.rotate(v, HALF_PI);\nconsole.log(rotated_v);\n// rotated_v's components are set to [-20.0, 9.999999, 0.0]\nconsole.log(v);\n// v's components remains the same (i.e, [10.0, 20.0, 0.0])\n</code>\n</div>\n\n<div>\n<code>\nlet angle = 0;\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(50, 0);\n\n  drawArrow(v0, v1.rotate(angle), 'black');\n  angle += 0.01;\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1482,"params":[{"name":"angle","description":"<p>the angle of rotation</p>\n","type":"Number"}],"chainable":1},{"line":2172,"params":[{"name":"v","description":"","type":"p5.Vector"},{"name":"angle","description":"","type":"Number"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1}]},{"file":"src/math/p5.Vector.js","line":1551,"description":"<p>Calculates and returns the angle (in radians) between two vectors.</p>\n","itemtype":"method","name":"angleBetween","params":[{"name":"value","description":"<p>the x, y, and z components of a <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"return":{"description":"the angle between (in radians)","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 0, 0);\nlet v2 = createVector(0, 1, 0);\n\nlet angle = v1.angleBetween(v2);\n// angle is PI/2\nprint(angle);\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n  let v0 = createVector(50, 50);\n\n  let v1 = createVector(50, 0);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(mouseX - 50, mouseY - 50);\n  drawArrow(v0, v2, 'blue');\n\n  let angleBetween = v1.angleBetween(v2);\n  noStroke();\n  text(\n    'angle between: ' +\n      angleBetween.toFixed(2) +\n      ' radians or ' +\n      degrees(angleBetween).toFixed(2) +\n      ' degrees',\n    10,\n    50,\n    90,\n    50\n  );\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1628,"description":"<p>Linear interpolate the vector to another vector</p>\n","itemtype":"method","name":"lerp","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(1, 1, 0);\n\nv.lerp(3, 3, 0, 0.5); // v now has components [2,2,0]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v1 = createVector(0, 0, 0);\nlet v2 = createVector(100, 100, 0);\n\nlet v3 = p5.Vector.lerp(v1, v2, 0.5);\n// v3 has components [50,50,0]\nprint(v3);\n</code>\n</div>\n\n<div>\n<code>\nlet step = 0.01;\nlet amount = 0;\n\nfunction draw() {\n  background(240);\n  let v0 = createVector(0, 0);\n\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(90, 90);\n  drawArrow(v0, v2, 'blue');\n\n  if (amount > 1 || amount < 0) {\n    step *= -1;\n  }\n  amount += step;\n  let v3 = p5.Vector.lerp(v1, v2, amount);\n\n  drawArrow(v0, v3, 'purple');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1628,"params":[{"name":"x","description":"<p>the x component</p>\n","type":"Number"},{"name":"y","description":"<p>the y component</p>\n","type":"Number"},{"name":"z","description":"<p>the z component</p>\n","type":"Number"},{"name":"amt","description":"<p>the amount of interpolation; some value between 0.0\n                        (old vector) and 1.0 (new vector). 0.9 is very near\n                        the new vector. 0.5 is halfway in between.</p>\n","type":"Number"}],"chainable":1},{"line":1701,"params":[{"name":"v","description":"<p>the <a href=\"#/p5.Vector\">p5.Vector</a> to lerp to</p>\n","type":"p5.Vector"},{"name":"amt","description":"","type":"Number"}],"chainable":1},{"line":2295,"params":[{"name":"v1","description":"","type":"p5.Vector"},{"name":"v2","description":"","type":"p5.Vector"},{"name":"amt","description":"","type":"Number"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"the lerped value","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":1717,"description":"<p>Reflect the incoming vector about a normal to a line in 2D, or about a normal to a plane in 3D\nThis method acts on the vector directly</p>\n","itemtype":"method","name":"reflect","params":[{"name":"surfaceNormal","description":"<p>the <a href=\"#/p5.Vector\">p5.Vector</a> to reflect about, will be normalized by this method</p>\n","type":"p5.Vector"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(4, 6); // incoming vector, this example vector is heading to the right and downward\nlet n = createVector(0, -1); // surface normal to a plane (this example normal points directly upwards)\nv.reflect(n); // v is reflected about the surface normal n.  v's components are now set to [4, -6]\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'red');\n\n  let n = createVector(0, -30);\n  drawArrow(v1, n, 'blue');\n\n  let r = v1.copy();\n  r.reflect(n);\n  drawArrow(v1, r, 'purple');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1772,"description":"<p>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 <b>p5.Vector.<a href=\"#/p5.Vector/copy\">copy()</a></b> method to copy into your own\narray.</p>\n","itemtype":"method","name":"array","return":{"description":"an Array with the 3 values","type":"Number[]"},"example":["\n<div class = \"norender\">\n<code>\nfunction setup() {\n  let v = createVector(20, 30);\n  print(v.array()); // Prints : Array [20, 30, 0]\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v = createVector(10.0, 20.0, 30.0);\nlet f = v.array();\nprint(f[0]); // Prints \"10.0\"\nprint(f[1]); // Prints \"20.0\"\nprint(f[2]); // Prints \"30.0\"\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1804,"description":"<p>Equality check against a <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","itemtype":"method","name":"equals","return":{"description":"whether the vectors are equals","type":"Boolean"},"example":["\n<div class = \"norender\">\n<code>\nlet v1 = createVector(5, 10, 20);\nlet v2 = createVector(5, 10, 20);\nlet v3 = createVector(13, 10, 19);\n\nprint(v1.equals(v2.x, v2.y, v2.z)); // true\nprint(v1.equals(v3.x, v3.y, v3.z)); // false\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v1 = createVector(10.0, 20.0, 30.0);\nlet v2 = createVector(10.0, 20.0, 30.0);\nlet v3 = createVector(0.0, 0.0, 0.0);\nprint(v1.equals(v2)); // true\nprint(v1.equals(v3)); // false\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1804,"params":[{"name":"x","description":"<p>the x component of the vector</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>the y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>the z component of the vector</p>\n","type":"Number","optional":true}],"return":{"description":"whether the vectors are equals","type":"Boolean"}},{"line":1834,"params":[{"name":"value","description":"<p>the vector to compare</p>\n","type":"p5.Vector|Array"}],"return":{"description":"","type":"Boolean"}}]},{"file":"src/math/p5.Vector.js","line":1859,"description":"<p>Make a new 2D vector from an angle</p>\n","itemtype":"method","name":"fromAngle","static":1,"params":[{"name":"angle","description":"<p>the desired angle, in radians (unaffected by <a href=\"#/p5/angleMode\">angleMode</a>)</p>\n","type":"Number"},{"name":"length","description":"<p>the length of the new vector (defaults to 1)</p>\n","type":"Number","optional":true}],"return":{"description":"the new <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div>\n<code>\nfunction draw() {\n  background(200);\n\n  // Create a variable, proportional to the mouseX,\n  // varying from 0-360, to represent an angle in degrees.\n  let myDegrees = map(mouseX, 0, width, 0, 360);\n\n  // Display that variable in an onscreen text.\n  // (Note the nfc() function to truncate additional decimal places,\n  // and the \"\\xB0\" character for the degree symbol.)\n  let readout = 'angle = ' + nfc(myDegrees, 1) + '\\xB0';\n  noStroke();\n  fill(0);\n  text(readout, 5, 15);\n\n  // Create a p5.Vector using the fromAngle function,\n  // and extract its x and y components.\n  let v = p5.Vector.fromAngle(radians(myDegrees), 30);\n  let vx = v.x;\n  let vy = v.y;\n\n  push();\n  translate(width / 2, height / 2);\n  noFill();\n  stroke(150);\n  line(0, 0, 30, 0);\n  stroke(0);\n  line(0, 0, vx, vy);\n  pop();\n}\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1910,"description":"<p>Make a new 3D vector from a pair of ISO spherical angles</p>\n","itemtype":"method","name":"fromAngles","static":1,"params":[{"name":"theta","description":"<p>the polar angle, in radians (zero is up)</p>\n","type":"Number"},{"name":"phi","description":"<p>the azimuthal angle, in radians\n                              (zero is out of the screen)</p>\n","type":"Number"},{"name":"length","description":"<p>the length of the new vector (defaults to 1)</p>\n","type":"Number","optional":true}],"return":{"description":"the new <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  fill(255);\n  noStroke();\n}\nfunction draw() {\n  background(255);\n\n  let t = millis() / 1000;\n\n  // add three point lights\n  pointLight(color('#f00'), p5.Vector.fromAngles(t * 1.0, t * 1.3, 100));\n  pointLight(color('#0f0'), p5.Vector.fromAngles(t * 1.1, t * 1.2, 100));\n  pointLight(color('#00f'), p5.Vector.fromAngles(t * 1.2, t * 1.1, 100));\n\n  sphere(35);\n}\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1959,"description":"<p>Make a new 2D unit vector from a random angle</p>\n","itemtype":"method","name":"random2D","static":1,"return":{"description":"the new <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v = p5.Vector.random2D();\n// May make v's attributes something like:\n// [0.61554617, -0.51195765, 0.0] or\n// [-0.4695841, -0.14366731, 0.0] or\n// [0.6091097, -0.22805278, 0.0]\nprint(v);\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  frameRate(1);\n}\n\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = p5.Vector.random2D();\n  drawArrow(v0, v1.mult(50), 'black');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2012,"description":"<p>Make a new random 3D unit vector.</p>\n","itemtype":"method","name":"random3D","static":1,"return":{"description":"the new <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v = p5.Vector.random3D();\n// May make v's attributes something like:\n// [0.61554617, -0.51195765, 0.599168] or\n// [-0.4695841, -0.14366731, -0.8711202] or\n// [0.6091097, -0.22805278, -0.7595902]\nprint(v);\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2116,"description":"<p>Multiplies a vector by a scalar and returns a new vector.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2168,"description":"<p>Rotates the vector (only 2D vectors) by the given angle, magnitude remains the same and returns a new vector.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2195,"description":"<p>Divides a vector by a scalar and returns a new vector.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2248,"description":"<p>Calculates the dot product of two vectors.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2262,"description":"<p>Calculates the cross product of two vectors.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2276,"description":"<p>Calculates the Euclidean distance between two points (considering a\npoint as a vector object).</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2291,"description":"<p>Linear interpolate a vector to another vector and return the result as a\nnew vector.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2320,"description":"<p>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).)</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2338,"description":"<p>Normalize the vector to length 1 (make it a unit vector).</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/random.js","line":37,"description":"<p>Sets the seed value for <a href=\"#/p5/random\">random()</a>.</p>\n<p>By default, <a href=\"#/p5/random\">random()</a> produces different results each time the program\nis run. Set the seed parameter to a constant to return the same\npseudo-random numbers each time the software is run.</p>\n","itemtype":"method","name":"randomSeed","params":[{"name":"seed","description":"<p>the seed value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nrandomSeed(99);\nfor (let i = 0; i < 100; i++) {\n  let r = random(0, 255);\n  stroke(r);\n  line(i, 0, i, 100);\n}\n</code>\n</div>"],"alt":"many vertical lines drawn in white, black or grey.","class":"p5","module":"Math","submodule":"Random"},{"file":"src/math/random.js","line":66,"description":"<p>Return a random floating-point number.</p>\n<p>Takes either 0, 1 or 2 arguments.</p>\n<p>If no argument is given, returns a random number from 0\nup to (but not including) 1.</p>\n<p>If one argument is given and it is a number, returns a random number from 0\nup to (but not including) the number.</p>\n<p>If one argument is given and it is an array, returns a random element from\nthat array.</p>\n<p>If two arguments are given, returns a random number from the\nfirst argument up to (but not including) the second argument.</p>\n","itemtype":"method","name":"random","return":{"description":"the random number","type":"Number"},"example":["\n<div>\n<code>\nfor (let i = 0; i < 100; i++) {\n  let r = random(50);\n  stroke(r * 5);\n  line(50, i, 50 + r, i);\n}\n</code>\n</div>\n<div>\n<code>\nfor (let i = 0; i < 100; i++) {\n  let r = random(-50, 50);\n  line(50, i, 50 + r, i);\n}\n</code>\n</div>\n<div>\n<code>\n// Get a random element from an array using the random(Array) syntax\nlet words = ['apple', 'bear', 'cat', 'dog'];\nlet word = random(words); // select random word\ntext(word, 10, 50); // draw the word\n</code>\n</div>"],"alt":"100 horizontal lines from center canvas to right. size+fill change each time\n100 horizontal lines from center of canvas. height & side change each render\nword displayed at random. Either apple, bear, cat, or dog","class":"p5","module":"Math","submodule":"Random","overloads":[{"line":66,"params":[{"name":"min","description":"<p>the lower bound (inclusive)</p>\n","type":"Number","optional":true},{"name":"max","description":"<p>the upper bound (exclusive)</p>\n","type":"Number","optional":true}],"return":{"description":"the random number","type":"Number"}},{"line":119,"params":[{"name":"choices","description":"<p>the array to choose from</p>\n","type":"Array"}],"return":{"description":"the random element from the array","type":"*"}}]},{"file":"src/math/random.js","line":153,"description":"<p>Returns a random number fitting a Gaussian, or\n normal, distribution. There is theoretically no minimum or maximum\n value that <a href=\"#/p5/randomGaussian\">randomGaussian()</a> might return. Rather, there is\n just a very low probability that values far from the mean will be\n returned; and a higher probability that numbers near the mean will\n be returned.\nTakes either 0, 1 or 2 arguments.<br>\n If no args, returns a mean of 0 and standard deviation of 1.<br>\n If one arg, that arg is the mean (standard deviation is 1).<br>\n If two args, first is mean, second is standard deviation.</p>\n","itemtype":"method","name":"randomGaussian","params":[{"name":"mean","description":"<p>the mean</p>\n","type":"Number","optional":true},{"name":"sd","description":"<p>the standard deviation</p>\n","type":"Number","optional":true}],"return":{"description":"the random number","type":"Number"},"example":["\n <div>\n <code>\n for (let y = 0; y < 100; y++) {\n   let x = randomGaussian(50, 15);\n   line(50, y, x, y);\n }\n </code>\n </div>\n <div>\n <code>\n let distribution = new Array(360);\nfunction setup() {\n   createCanvas(100, 100);\n   for (let i = 0; i < distribution.length; i++) {\n     distribution[i] = floor(randomGaussian(0, 15));\n   }\n }\nfunction draw() {\n   background(204);\n  translate(width / 2, width / 2);\n  for (let i = 0; i < distribution.length; i++) {\n     rotate(TWO_PI / distribution.length);\n     stroke(0);\n     let dist = abs(distribution[i]);\n     line(0, 0, dist, 0);\n   }\n }\n </code>\n </div>"],"alt":"100 horizontal lines from center of canvas. height & side change each render\n black lines radiate from center of canvas. size determined each render","class":"p5","module":"Math","submodule":"Random"},{"file":"src/math/trigonometry.js","line":18,"description":"<p>The inverse of <a href=\"#/p5/cos\">cos()</a>, returns the arc cosine of a value.\nThis function expects the values in the range of -1 to 1 and values are returned in\nthe range 0 to PI (3.1415927) if the angleMode is RADIANS or 0 to 180 if the\nangle mode is DEGREES.</p>\n","itemtype":"method","name":"acos","params":[{"name":"value","description":"<p>the value whose arc cosine is to be returned</p>\n","type":"Number"}],"return":{"description":"the arc cosine of the given value","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet a = PI;\nlet c = cos(a);\nlet ac = acos(c);\n// Prints: \"3.1415927 : -1.0 : 3.1415927\"\nprint(a + ' : ' + c + ' : ' + ac);\n</code>\n</div>\n\n<div class= “norender\">\n<code>\nlet a = PI + PI / 4.0;\nlet c = cos(a);\nlet ac = acos(c);\n// Prints: \"3.926991 : -0.70710665 : 2.3561943\"\nprint(a + ' : ' + c + ' : ' + ac);\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":53,"description":"<p>The inverse of <a href=\"#/p5/sin\">sin()</a>, returns the arc sine of a value.\nThis function expects the values in the range of -1 to 1 and values are returned\nin the range -PI/2 to PI/2 if the angleMode is RADIANS or -90 to 90 if the angle\nmode is DEGREES.</p>\n","itemtype":"method","name":"asin","params":[{"name":"value","description":"<p>the value whose arc sine is to be returned</p>\n","type":"Number"}],"return":{"description":"the arc sine of the given value","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet a = PI / 3.0;\nlet s = sin(a);\nlet as = asin(s);\n// Prints: \"1.0471975 : 0.86602540 : 1.0471975\"\nprint(a + ' : ' + s + ' : ' + as);\n</code>\n</div>\n\n<div class= “norender\">\n<code>\nlet a = PI + PI / 3.0;\nlet s = sin(a);\nlet as = asin(s);\n// Prints: \"4.1887902 : -0.86602540 : -1.0471975\"\nprint(a + ' : ' + s + ' : ' + as);\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":88,"description":"<p>The inverse of <a href=\"#/p5/tan\">tan()</a>, returns the arc tangent of a value.\nThis function expects the values in the range of -Infinity to Infinity (exclusive) and\nvalues are returned in the range -PI/2 to PI/2 if the angleMode is RADIANS or\n-90 to 90 if the angle mode is DEGREES.</p>\n","itemtype":"method","name":"atan","params":[{"name":"value","description":"<p>the value whose arc tangent is to be returned</p>\n","type":"Number"}],"return":{"description":"the arc tangent of the given value","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet a = PI / 3.0;\nlet t = tan(a);\nlet at = atan(t);\n// Prints: \"1.0471975 : 1.7320508 : 1.0471975\"\nprint(a + ' : ' + t + ' : ' + at);\n</code>\n</div>\n\n<div class= “norender\">\n<code>\nlet a = PI + PI / 3.0;\nlet t = tan(a);\nlet at = atan(t);\n// Prints: \"4.1887902 : 1.7320508 : 1.0471975\"\nprint(a + ' : ' + t + ' : ' + at);\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":123,"description":"<p>Calculates the angle (in radians) from a specified point to the coordinate\norigin as measured from the positive x-axis. Values are returned as a\nfloat in the range from PI to -PI if the angleMode is RADIANS or 180 to\n-180 if the angleMode is DEGREES. The atan2<a href=\"#/p5/\">()</a> function is\nmost often used for orienting geometry to the position of the cursor.</p>\n<p>Note: The y-coordinate of the point is the first parameter, and the\nx-coordinate is the second parameter, due the the structure of calculating\nthe tangent.</p>\n","itemtype":"method","name":"atan2","params":[{"name":"y","description":"<p>y-coordinate of the point</p>\n","type":"Number"},{"name":"x","description":"<p>x-coordinate of the point</p>\n","type":"Number"}],"return":{"description":"the arc tangent of the given point","type":"Number"},"example":["\n<div>\n<code>\nfunction draw() {\n  background(204);\n  translate(width / 2, height / 2);\n  let a = atan2(mouseY - height / 2, mouseX - width / 2);\n  rotate(a);\n  rect(-30, -5, 60, 10);\n}\n</code>\n</div>"],"alt":"60 by 10 rect at center of canvas rotates with mouse movements","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":159,"description":"<p>Calculates the cosine of an angle. This function takes into account the\ncurrent <a href=\"#/p5/angleMode\">angleMode</a>. Values are returned in the range -1 to 1.</p>\n","itemtype":"method","name":"cos","params":[{"name":"angle","description":"<p>the angle</p>\n","type":"Number"}],"return":{"description":"the cosine of the angle","type":"Number"},"example":["\n<div>\n<code>\nlet a = 0.0;\nlet inc = TWO_PI / 25.0;\nfor (let i = 0; i < 25; i++) {\n  line(i * 4, 50, i * 4, 50 + cos(a) * 40.0);\n  a = a + inc;\n}\n</code>\n</div>"],"alt":"vertical black lines form wave patterns, extend-down on left and right side","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":186,"description":"<p>Calculates the sine of an angle. This function takes into account the\ncurrent <a href=\"#/p5/angleMode\">angleMode</a>. Values are returned in the range -1 to 1.</p>\n","itemtype":"method","name":"sin","params":[{"name":"angle","description":"<p>the angle</p>\n","type":"Number"}],"return":{"description":"the sine of the angle","type":"Number"},"example":["\n<div>\n<code>\nlet a = 0.0;\nlet inc = TWO_PI / 25.0;\nfor (let i = 0; i < 25; i++) {\n  line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);\n  a = a + inc;\n}\n</code>\n</div>"],"alt":"vertical black lines extend down and up from center to form wave pattern","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":213,"description":"<p>Calculates the tangent of an angle. This function takes into account\nthe current <a href=\"#/p5/angleMode\">angleMode</a>. Values are returned in the range of all real numbers.</p>\n","itemtype":"method","name":"tan","params":[{"name":"angle","description":"<p>the angle</p>\n","type":"Number"}],"return":{"description":"the tangent of the angle","type":"Number"},"example":["\n<div>\n<code>\nlet a = 0.0;\nlet inc = TWO_PI / 50.0;\nfor (let i = 0; i < 100; i = i + 2) {\n  line(i, 50, i, 50 + tan(a) * 2.0);\n  a = a + inc;\n}\n</code>"],"alt":"vertical black lines end down and up from center to form spike pattern","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":239,"description":"<p>Converts a radian measurement to its corresponding value in degrees.\nRadians and degrees are two ways of measuring the same thing. There are\n360 degrees in a circle and 2*PI radians in a circle. For example,\n90° = PI/2 = 1.5707964. This function does not take into account the\ncurrent <a href=\"#/p5/angleMode\">angleMode</a>.</p>\n","itemtype":"method","name":"degrees","params":[{"name":"radians","description":"<p>the radians value to convert to degrees</p>\n","type":"Number"}],"return":{"description":"the converted angle","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet rad = PI / 4;\nlet deg = degrees(rad);\nprint(rad + ' radians is ' + deg + ' degrees');\n// Prints: 0.7853981633974483 radians is 45 degrees\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":262,"description":"<p>Converts a degree measurement to its corresponding value in radians.\nRadians and degrees are two ways of measuring the same thing. There are\n360 degrees in a circle and 2*PI radians in a circle. For example,\n90° = PI/2 = 1.5707964. This function does not take into account the\ncurrent <a href=\"#/p5/angleMode\">angleMode</a>.</p>\n","itemtype":"method","name":"radians","params":[{"name":"degrees","description":"<p>the degree value to convert to radians</p>\n","type":"Number"}],"return":{"description":"the converted angle","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet deg = 45.0;\nlet rad = radians(deg);\nprint(deg + ' degrees is ' + rad + ' radians');\n// Prints: 45 degrees is 0.7853981633974483 radians\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":285,"description":"<p>Sets the current mode of p5 to given mode. Default mode is RADIANS.</p>\n","itemtype":"method","name":"angleMode","params":[{"name":"mode","description":"<p>either RADIANS or DEGREES</p>\n","type":"Constant"}],"example":["\n<div>\n<code>\nfunction draw() {\n  background(204);\n  angleMode(DEGREES); // Change the mode to DEGREES\n  let a = atan2(mouseY - height / 2, mouseX - width / 2);\n  translate(width / 2, height / 2);\n  push();\n  rotate(a);\n  rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees\n  pop();\n  angleMode(RADIANS); // Change the mode to RADIANS\n  rotate(a); // variable a stays the same\n  rect(-40, -5, 20, 10); // Smaller rectangle is rotating in radians\n}\n</code>\n</div>"],"alt":"40 by 10 rect in center rotates with mouse moves. 20 by 10 rect moves faster.","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/typography/attributes.js","line":11,"description":"<p>Sets the current alignment for drawing text. Accepts two\narguments: horizAlign (LEFT, CENTER, or RIGHT) and\nvertAlign (TOP, BOTTOM, CENTER, or BASELINE).</p>\n<p>The horizAlign parameter is in reference to the x value\nof the <a href=\"#/p5/text\">text()</a> function, while the vertAlign parameter\nis in reference to the y value.</p>\n<p>So if you write textAlign(LEFT), you are aligning the left\nedge of your text to the x value you give in <a href=\"#/p5/text\">text()</a>.\nIf you write textAlign(RIGHT, TOP), you are aligning the right edge\nof your text to the x value and the top of edge of the text\nto the y value.</p>\n","itemtype":"method","name":"textAlign","chainable":1,"example":["\n<div>\n<code>\ntextSize(16);\ntextAlign(RIGHT);\ntext('ABCD', 50, 30);\ntextAlign(CENTER);\ntext('EFGH', 50, 50);\ntextAlign(LEFT);\ntext('IJKL', 50, 70);\n</code>\n</div>\n\n<div>\n<code>\ntextSize(16);\nstrokeWeight(0.5);\n\nline(0, 12, width, 12);\ntextAlign(CENTER, TOP);\ntext('TOP', 0, 12, width);\n\nline(0, 37, width, 37);\ntextAlign(CENTER, CENTER);\ntext('CENTER', 0, 37, width);\n\nline(0, 62, width, 62);\ntextAlign(CENTER, BASELINE);\ntext('BASELINE', 0, 62, width);\n\nline(0, 87, width, 87);\ntextAlign(CENTER, BOTTOM);\ntext('BOTTOM', 0, 87, width);\n</code>\n</div>"],"alt":"Letters ABCD displayed at top left, EFGH at center and IJKL at bottom right.\nThe names of the four vertical alignments (TOP, CENTER, BASELINE & BOTTOM) rendered each showing that alignment's placement relative to a horizontal line.","class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":11,"params":[{"name":"horizAlign","description":"<p>horizontal alignment, either LEFT,\n                           CENTER, or RIGHT</p>\n","type":"Constant"},{"name":"vertAlign","description":"<p>vertical alignment, either TOP,\n                           BOTTOM, CENTER, or BASELINE</p>\n","type":"Constant","optional":true}],"chainable":1},{"line":72,"params":[],"return":{"description":"","type":"Object"}}]},{"file":"src/typography/attributes.js","line":81,"description":"<p>Sets/gets the spacing, in pixels, between lines of text. This setting will be\nused in all subsequent calls to the <a href=\"#/p5/text\">text()</a> function.</p>\n","itemtype":"method","name":"textLeading","chainable":1,"example":["\n<div>\n<code>\nlet lines = 'L1\\nL2\\nL3'; // \"\\n\" is a \"new line\" character\ntextSize(12);\n\ntextLeading(10);\ntext(lines, 10, 25);\n\ntextLeading(20);\ntext(lines, 40, 25);\n\ntextLeading(30);\ntext(lines, 70, 25);\n</code>\n</div>"],"alt":"A set of L1 L2 & L3 displayed vertically 3 times. spacing increases for each set","class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":81,"params":[{"name":"leading","description":"<p>the size in pixels for spacing between lines</p>\n","type":"Number"}],"chainable":1},{"line":109,"params":[],"return":{"description":"","type":"Number"}}]},{"file":"src/typography/attributes.js","line":118,"description":"<p>Sets/gets the current font size. This size will be used in all subsequent\ncalls to the <a href=\"#/p5/text\">text()</a> function. Font size is measured in pixels.</p>\n","itemtype":"method","name":"textSize","chainable":1,"example":["\n<div>\n<code>\ntextSize(12);\ntext('Font Size 12', 10, 30);\ntextSize(14);\ntext('Font Size 14', 10, 60);\ntextSize(16);\ntext('Font Size 16', 10, 90);\n</code>\n</div>"],"alt":"'Font Size 12' displayed small, 'Font Size 14' medium & 'Font Size 16' large","class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":118,"params":[{"name":"theSize","description":"<p>the size of the letters in units of pixels</p>\n","type":"Number"}],"chainable":1},{"line":141,"params":[],"return":{"description":"","type":"Number"}}]},{"file":"src/typography/attributes.js","line":150,"description":"<p>Sets/gets the style of the text for system fonts to NORMAL, ITALIC, BOLD or BOLDITALIC.\nNote: this may be is overridden by CSS styling. For non-system fonts\n(opentype, truetype, etc.) please load styled fonts instead.</p>\n","itemtype":"method","name":"textStyle","chainable":1,"example":["\n<div>\n<code>\nstrokeWeight(0);\ntextSize(12);\ntextStyle(NORMAL);\ntext('Font Style Normal', 10, 15);\ntextStyle(ITALIC);\ntext('Font Style Italic', 10, 40);\ntextStyle(BOLD);\ntext('Font Style Bold', 10, 65);\ntextStyle(BOLDITALIC);\ntext('Font Style Bold Italic', 10, 90);\n</code>\n</div>"],"alt":"Words Font Style Normal displayed normally, Italic in italic, bold in bold and bold italic in bold italics.","class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":150,"params":[{"name":"theStyle","description":"<p>styling for text, either NORMAL,\n                           ITALIC, BOLD or BOLDITALIC</p>\n","type":"Constant"}],"chainable":1},{"line":178,"params":[],"return":{"description":"","type":"String"}}]},{"file":"src/typography/attributes.js","line":187,"description":"<p>Calculates and returns the width of any character or text string.</p>\n","itemtype":"method","name":"textWidth","params":[{"name":"theText","description":"<p>the String of characters to measure</p>\n","type":"String"}],"return":{"description":"the calculated width","type":"Number"},"example":["\n<div>\n<code>\ntextSize(28);\n\nlet aChar = 'P';\nlet cWidth = textWidth(aChar);\ntext(aChar, 0, 40);\nline(cWidth, 0, cWidth, 50);\n\nlet aString = 'p5.js';\nlet sWidth = textWidth(aString);\ntext(aString, 0, 85);\nline(sWidth, 50, sWidth, 100);\n</code>\n</div>"],"alt":"Letter P and p5.js are displayed with vertical lines at end.","class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/attributes.js","line":222,"description":"<p>Returns the ascent of the current font at its current size. The ascent\nrepresents the distance, in pixels, of the tallest character above\nthe baseline.</p>\n","itemtype":"method","name":"textAscent","return":{"description":"","type":"Number"},"example":["\n<div>\n<code>\nlet base = height * 0.75;\nlet scalar = 0.8; // Different for each font\n\ntextSize(32); // Set initial text size\nlet asc = textAscent() * scalar; // Calc ascent\nline(0, base - asc, width, base - asc);\ntext('dp', 0, base); // Draw text on baseline\n\ntextSize(64); // Increase text size\nasc = textAscent() * scalar; // Recalc ascent\nline(40, base - asc, width, base - asc);\ntext('dp', 40, base); // Draw text on baseline\n</code>\n</div>"],"class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/attributes.js","line":251,"description":"<p>Returns the descent of the current font at its current size. The descent\nrepresents the distance, in pixels, of the character with the longest\ndescender below the baseline.</p>\n","itemtype":"method","name":"textDescent","return":{"description":"","type":"Number"},"example":["\n<div>\n<code>\nlet base = height * 0.75;\nlet scalar = 0.8; // Different for each font\n\ntextSize(32); // Set initial text size\nlet desc = textDescent() * scalar; // Calc ascent\nline(0, base + desc, width, base + desc);\ntext('dp', 0, base); // Draw text on baseline\n\ntextSize(64); // Increase text size\ndesc = textDescent() * scalar; // Recalc ascent\nline(40, base + desc, width, base + desc);\ntext('dp', 40, base); // Draw text on baseline\n</code>\n</div>"],"class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/attributes.js","line":280,"description":"<p>Helper function to measure ascent and descent.</p>\n","class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/loading_displaying.js","line":16,"description":"<p>Loads an opentype font file (.otf, .ttf) from a file or a URL,\nand returns a PFont Object. This method is asynchronous,\nmeaning it may not finish before the next line in your sketch\nis executed.</p>\n<p>The path to the font should be relative to the HTML file\nthat links in your sketch. Loading fonts from a URL or other\nremote location may be blocked due to your browser's built-in\nsecurity.</p>\n","itemtype":"method","name":"loadFont","params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/loadFont\">loadFont()</a> completes</p>\n","type":"Function","optional":true},{"name":"onError","description":"<p>function to be executed if\n                                   an error occurs</p>\n","type":"Function","optional":true}],"return":{"description":"<a href=\"#/p5.Font\">p5.Font</a> object","type":"p5.Font"},"example":["\n\nCalling loadFont() inside <a href=\"#/p5/preload\">preload()</a> guarantees\nthat the load operation will have completed before <a href=\"#/p5/setup\">setup()</a>\nand <a href=\"#/p5/draw\">draw()</a> are called.\n\n<div><code>\nlet myFont;\nfunction preload() {\n  myFont = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n  fill('#ED225D');\n  textFont(myFont);\n  textSize(36);\n  text('p5*js', 10, 50);\n}\n</code></div>\n\nOutside of <a href=\"#/p5/preload\">preload()</a>, you may supply a\ncallback function to handle the object:\n\n<div><code>\nfunction setup() {\n  loadFont('assets/inconsolata.otf', drawText);\n}\n\nfunction drawText(font) {\n  fill('#ED225D');\n  textFont(font, 36);\n  text('p5*js', 10, 50);\n}\n</code></div>\n\nYou can also use the font filename string (without the file extension) to\nstyle other HTML elements.\n\n<div><code>\nfunction preload() {\n  loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n  let myDiv = createDiv('hello there');\n  myDiv.style('font-family', 'Inconsolata');\n}\n</code></div>"],"alt":"p5*js in p5's theme dark pink\np5*js in p5's theme dark pink","class":"p5","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/loading_displaying.js","line":140,"description":"<p>Draws text to the screen. Displays the information specified in the first\nparameter on the screen in the position specified by the additional\nparameters. A default font will be used unless a font is set with the\n<a href=\"#/p5/textFont\">textFont()</a> function and a default size will be\nused unless a font is set with <a href=\"#/p5/textSize\">textSize()</a>. Change\nthe color of the text with the <a href=\"#/p5/fill\">fill()</a> function. Change\nthe outline of the text with the <a href=\"#/p5/stroke\">stroke()</a> and\n<a href=\"#/p5/strokeWeight\">strokeWeight()</a> functions.</p>\n<p>The text displays in relation to the <a href=\"#/p5/textAlign\">textAlign()</a>\nfunction, which gives the option to draw to the left, right, and center of the\ncoordinates.</p>\n<p>The x2 and y2 parameters define a rectangular area to display within and\nmay only be used with string data. When these parameters are specified,\nthey are interpreted based on the current <a href=\"#/p5/rectMode\">rectMode()</a>\nsetting. Text that does not fit completely within the rectangle specified will\nnot be drawn to the screen. If x2 and y2 are not specified, the baseline\nalignment is the default, which means that the text will be drawn upwards\nfrom x and y.</p>\n<p><b>WEBGL</b>: Only opentype/truetype fonts are supported. You must load a font\nusing the <a href=\"#/p5/loadFont\">loadFont()</a> method (see the example above).\n<a href=\"#/p5/stroke\">stroke()</a> currently has no effect in webgl mode.</p>\n","itemtype":"method","name":"text","params":[{"name":"str","description":"<p>the alphanumeric\n                                            symbols to be displayed</p>\n","type":"String|Object|Array|Number|Boolean"},{"name":"x","description":"<p>x-coordinate of text</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of text</p>\n","type":"Number"},{"name":"x2","description":"<p>by default, the width of the text box,\n                    see <a href=\"#/p5/rectMode\">rectMode()</a> for more info</p>\n","type":"Number","optional":true},{"name":"y2","description":"<p>by default, the height of the text box,\n                    see <a href=\"#/p5/rectMode\">rectMode()</a> for more info</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\ntextSize(32);\ntext('word', 10, 30);\nfill(0, 102, 153);\ntext('word', 10, 60);\nfill(0, 102, 153, 51);\ntext('word', 10, 90);\n</code>\n</div>\n<div>\n<code>\nlet s = 'The quick brown fox jumped over the lazy dog.';\nfill(50);\ntext(s, 10, 10, 70, 80); // Text wraps within text box\n</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\nlet inconsolata;\nfunction preload() {\n  inconsolata = loadFont('assets/inconsolata.otf');\n}\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  textFont(inconsolata);\n  textSize(width / 3);\n  textAlign(CENTER, CENTER);\n}\nfunction draw() {\n  background(0);\n  let time = millis();\n  rotateX(time / 1000);\n  rotateZ(time / 1234);\n  text('p5.js', 0, 0);\n}\n</code>\n</div>"],"alt":"'word' displayed 3 times going from black, blue to translucent blue\nThe text 'The quick brown fox jumped over the lazy dog' displayed.\nThe text 'p5.js' spinning in 3d","class":"p5","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/loading_displaying.js","line":229,"description":"<p>Sets the current font that will be drawn with the <a href=\"#/p5/text\">text()</a> function.\nIf textFont() is called without any argument, it will return the current font if one has\nbeen set already. If not, it will return the name of the default font as a string.\nIf textFont() is called with a font to use, it will return the p5 object.</p>\n<p><b>WEBGL</b>: Only fonts loaded via <a href=\"#/p5/loadFont\">loadFont()</a> are supported.</p>\n","itemtype":"method","name":"textFont","return":{"description":"the current font / p5 Object","type":"Object"},"example":["\n<div>\n<code>\nfill(0);\ntextSize(12);\ntextFont('Georgia');\ntext('Georgia', 12, 30);\ntextFont('Helvetica');\ntext('Helvetica', 12, 60);\n</code>\n</div>\n<div>\n<code>\nlet fontRegular, fontItalic, fontBold;\nfunction preload() {\n  fontRegular = loadFont('assets/Regular.otf');\n  fontItalic = loadFont('assets/Italic.ttf');\n  fontBold = loadFont('assets/Bold.ttf');\n}\nfunction setup() {\n  background(210);\n  fill(0)\n   .strokeWeight(0)\n   .textSize(10);\n  textFont(fontRegular);\n  text('Font Style Normal', 10, 30);\n  textFont(fontItalic);\n  text('Font Style Italic', 10, 50);\n  textFont(fontBold);\n  text('Font Style Bold', 10, 70);\n}\n</code>\n</div>"],"alt":"word 'Georgia' displayed in font Georgia and 'Helvetica' in font Helvetica\nwords Font Style Normal displayed normally, Italic in italic and bold in bold","class":"p5","module":"Typography","submodule":"Loading & Displaying","overloads":[{"line":229,"params":[],"return":{"description":"the current font / p5 Object","type":"Object"}},{"line":278,"params":[{"name":"font","description":"<p>a font loaded via <a href=\"#/p5/loadFont\">loadFont()</a>,\nor a String representing a <a href=\"https://mzl.la/2dOw8WD\">web safe font</a>\n(a font that is generally available across all systems)</p>\n","type":"Object|String"},{"name":"size","description":"<p>the font size to use</p>\n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/typography/p5.Font.js","line":24,"description":"<p>Underlying opentype font implementation</p>\n","itemtype":"property","name":"font","class":"p5.Font","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/p5.Font.js","line":31,"description":"<p>Returns a tight bounding box for the given text string using this\nfont</p>\n","itemtype":"method","name":"textBounds","params":[{"name":"line","description":"<p>a line of text</p>\n","type":"String"},{"name":"x","description":"<p>x-position</p>\n","type":"Number"},{"name":"y","description":"<p>y-position</p>\n","type":"Number"},{"name":"fontSize","description":"<p>font size to use (optional) Default is 12.</p>\n","type":"Number","optional":true},{"name":"options","description":"<p>opentype options (optional)\n                           opentype fonts contains alignment and baseline options.\n                           Default is 'LEFT' and 'alphabetic'</p>\n","type":"Object","optional":true}],"return":{"description":"a rectangle object with properties: x, y, w, h","type":"Object"},"example":["\n<div>\n<code>\nlet font;\nlet textString = 'Lorem ipsum dolor sit amet.';\nfunction preload() {\n  font = loadFont('./assets/Regular.otf');\n}\nfunction setup() {\n  background(210);\n\n  let bbox = font.textBounds(textString, 10, 30, 12);\n  fill(255);\n  stroke(0);\n  rect(bbox.x, bbox.y, bbox.w, bbox.h);\n  fill(0);\n  noStroke();\n\n  textFont(font);\n  textSize(12);\n  text(textString, 10, 30);\n}\n</code>\n</div>"],"alt":"words Lorem ipsum dol go off canvas and contained by white bounding box","class":"p5.Font","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/p5.Font.js","line":175,"description":"<p>Computes an array of points following the path for specified text</p>\n","itemtype":"method","name":"textToPoints","params":[{"name":"txt","description":"<p>a line of text</p>\n","type":"String"},{"name":"x","description":"<p>x-position</p>\n","type":"Number"},{"name":"y","description":"<p>y-position</p>\n","type":"Number"},{"name":"fontSize","description":"<p>font size to use (optional)</p>\n","type":"Number"},{"name":"options","description":"<p>an (optional) object that can contain:</p>\n<p><br>sampleFactor - the ratio of path-length to number of samples\n(default=.1); higher values yield more points and are therefore\nmore precise</p>\n<p><br>simplifyThreshold - if set to a non-zero value, collinear points will be\nbe removed from the polygon; the value represents the threshold angle to use\nwhen determining whether two edges are collinear</p>\n","type":"Object","optional":true}],"return":{"description":"an array of points, each with x, y, alpha (the path angle)","type":"Array"},"example":["\n<div>\n<code>\nlet font;\nfunction preload() {\n  font = loadFont('assets/inconsolata.otf');\n}\n\nlet points;\nlet bounds;\nfunction setup() {\n  createCanvas(100, 100);\n  stroke(0);\n  fill(255, 104, 204);\n\n  points = font.textToPoints('p5', 0, 0, 10, {\n    sampleFactor: 5,\n    simplifyThreshold: 0\n  });\n  bounds = font.textBounds(' p5 ', 0, 0, 10);\n}\n\nfunction draw() {\n  background(255);\n  beginShape();\n  translate(-bounds.x * width / bounds.w, -bounds.y * height / bounds.h);\n  for (let i = 0; i < points.length; i++) {\n    let p = points[i];\n    vertex(\n      p.x * width / bounds.w +\n        sin(20 * p.y / bounds.h + millis() / 1000) * width / 30,\n      p.y * height / bounds.h\n    );\n  }\n  endShape(CLOSE);\n}\n</code>\n</div>"],"class":"p5.Font","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/utilities/array_functions.js","line":10,"description":"<p>Adds a value to the end of an array. Extends the length of\nthe array by one. Maps to Array.push().</p>\n","itemtype":"method","name":"append","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push\">array.push(value)</a> instead.","params":[{"name":"array","description":"<p>Array to append</p>\n","type":"Array"},{"name":"value","description":"<p>to be added to the Array</p>\n","type":"Any"}],"return":{"description":"the array that was appended to","type":"Array"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":35,"description":"<p>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 <a href=\"#/p5/concat\">concat()</a>.</p>\n<p>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).</p>\n<p>Using this function is far more efficient for copying array data than\niterating through a for() loop and copying each element individually.</p>\n","itemtype":"method","name":"arrayCopy","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin\">arr1.copyWithin(arr2)</a> instead.","example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions","overloads":[{"line":35,"params":[{"name":"src","description":"<p>the source Array</p>\n","type":"Array"},{"name":"srcPosition","description":"<p>starting position in the source Array</p>\n","type":"Integer"},{"name":"dst","description":"<p>the destination Array</p>\n","type":"Array"},{"name":"dstPosition","description":"<p>starting position in the destination Array</p>\n","type":"Integer"},{"name":"length","description":"<p>number of Array elements to be copied</p>\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":"<p>Concatenates two arrays, maps to Array.concat(). Does not modify the\ninput arrays.</p>\n","itemtype":"method","name":"concat","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat\">arr1.concat(arr2)</a> instead.","params":[{"name":"a","description":"<p>first Array to concatenate</p>\n","type":"Array"},{"name":"b","description":"<p>second Array to concatenate</p>\n","type":"Array"}],"return":{"description":"concatenated array","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":141,"description":"<p>Reverses the order of an array, maps to Array.reverse()</p>\n","itemtype":"method","name":"reverse","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse\">array.reverse()</a> instead.","params":[{"name":"list","description":"<p>Array to reverse</p>\n","type":"Array"}],"return":{"description":"the reversed list","type":"Array"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":161,"description":"<p>Decreases an array by one element and returns the shortened array,\nmaps to Array.pop().</p>\n","itemtype":"method","name":"shorten","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop\">array.pop()</a> instead.","params":[{"name":"list","description":"<p>Array to shorten</p>\n","type":"Array"}],"return":{"description":"shortened Array","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":185,"description":"<p>Randomizes the order of the elements of an array. Implements\n<a href='http://Bost.Ocks.org/mike/shuffle/' target=_blank>\nFisher-Yates Shuffle Algorithm</a>.</p>\n","itemtype":"method","name":"shuffle","params":[{"name":"array","description":"<p>Array to shuffle</p>\n","type":"Array"},{"name":"bool","description":"<p>modify passed array</p>\n","type":"Boolean","optional":true}],"return":{"description":"shuffled Array","type":"Array"},"example":["\n<div><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":227,"description":"<p>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.</p>\n","itemtype":"method","name":"sort","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort\">array.sort()</a> instead.","params":[{"name":"list","description":"<p>Array to sort</p>\n","type":"Array"},{"name":"count","description":"<p>number of elements to sort, starting from 0</p>\n","type":"Integer","optional":true}],"return":{"description":"the sorted list","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":273,"description":"<p>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.)</p>\n","itemtype":"method","name":"splice","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice\">array.splice()</a> instead.","params":[{"name":"list","description":"<p>Array to splice into</p>\n","type":"Array"},{"name":"value","description":"<p>value to be spliced in</p>\n","type":"Any"},{"name":"position","description":"<p>in the array from which to insert data</p>\n","type":"Integer"}],"return":{"description":"the list","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":308,"description":"<p>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.</p>\n","itemtype":"method","name":"subset","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice\">array.slice()</a> instead.","params":[{"name":"list","description":"<p>Array to extract from</p>\n","type":"Array"},{"name":"start","description":"<p>position to begin</p>\n","type":"Integer"},{"name":"count","description":"<p>number of values to extract</p>\n","type":"Integer","optional":true}],"return":{"description":"Array of extracted elements","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/conversion.js","line":10,"description":"<p>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.</p>\n<p>When an array of values is passed in, then an array of floats of the same\nlength is returned.</p>\n","itemtype":"method","name":"float","params":[{"name":"str","description":"<p>float string to parse</p>\n","type":"String"}],"return":{"description":"floating point representation of string","type":"Number"},"example":["\n<div><code>\nlet str = '20';\nlet diameter = float(str);\nellipse(width / 2, height / 2, diameter, diameter);\n</code></div>\n<div class='norender'><code>\nprint(float('10.31')); // 10.31\nprint(float('Infinity')); // Infinity\nprint(float('-Infinity')); // -Infinity\n</code></div>"],"alt":"20 by 20 white ellipse in the center of the canvas","class":"p5","module":"Data","submodule":"Conversion"},{"file":"src/utilities/conversion.js","line":44,"description":"<p>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.</p>\n","itemtype":"method","name":"int","return":{"description":"integer representation of value","type":"Number"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":44,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Boolean|Number"},{"name":"radix","description":"<p>the radix to convert to (default: 10)</p>\n","type":"Integer","optional":true}],"return":{"description":"integer representation of value","type":"Number"}},{"line":66,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"},{"name":"radix","description":"","type":"Integer","optional":true}],"return":{"description":"integer representation of values","type":"Number[]"}}]},{"file":"src/utilities/conversion.js","line":88,"description":"<p>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.</p>\n","itemtype":"method","name":"str","params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Boolean|Number|Array"}],"return":{"description":"string representation of value","type":"String"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion"},{"file":"src/utilities/conversion.js","line":114,"description":"<p>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.</p>\n","itemtype":"method","name":"boolean","params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Boolean|Number|Array"}],"return":{"description":"boolean representation of value","type":"Boolean"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion"},{"file":"src/utilities/conversion.js","line":146,"description":"<p>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.</p>\n","itemtype":"method","name":"byte","return":{"description":"byte representation of value","type":"Number"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":146,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Boolean|Number"}],"return":{"description":"byte representation of value","type":"Number"}},{"line":168,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"}],"return":{"description":"array of byte representation of values","type":"Number[]"}}]},{"file":"src/utilities/conversion.js","line":182,"description":"<p>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.</p>\n","itemtype":"method","name":"char","return":{"description":"string representation of value","type":"String"},"example":["\n<div class='norender'><code>\nprint(char(65)); // \"A\"\nprint(char('65')); // \"A\"\nprint(char([65, 66, 67])); // [ \"A\", \"B\", \"C\" ]\nprint(join(char([65, 66, 67]), '')); // \"ABC\"\n</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":182,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Number"}],"return":{"description":"string representation of value","type":"String"}},{"line":201,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"}],"return":{"description":"array of string representation of values","type":"String[]"}}]},{"file":"src/utilities/conversion.js","line":216,"description":"<p>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.</p>\n","itemtype":"method","name":"unchar","return":{"description":"integer representation of value","type":"Number"},"example":["\n<div class='norender'><code>\nprint(unchar('A')); // 65\nprint(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]\nprint(unchar(split('ABC', ''))); // [ 65, 66, 67 ]\n</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":216,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String"}],"return":{"description":"integer representation of value","type":"Number"}},{"line":232,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"}],"return":{"description":"integer representation of values","type":"Number[]"}}]},{"file":"src/utilities/conversion.js","line":245,"description":"<p>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.</p>\n","itemtype":"method","name":"hex","return":{"description":"hexadecimal string representation of value","type":"String"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":245,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"Number"},{"name":"digits","description":"","type":"Number","optional":true}],"return":{"description":"hexadecimal string representation of value","type":"String"}},{"line":265,"params":[{"name":"ns","description":"<p>array of values to parse</p>\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":295,"description":"<p>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.</p>\n","itemtype":"method","name":"unhex","return":{"description":"integer representation of hexadecimal value","type":"Number"},"example":["\n<div class='norender'><code>\nprint(unhex('A')); // 10\nprint(unhex('FF')); // 255\nprint(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]\n</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":295,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String"}],"return":{"description":"integer representation of hexadecimal value","type":"Number"}},{"line":311,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"}],"return":{"description":"integer representations of hexadecimal value","type":"Number[]"}}]},{"file":"src/utilities/string_functions.js","line":15,"description":"<p>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 <a href=\"#/p5/nf\">nf()</a> or\nnfs().</p>\n","itemtype":"method","name":"join","params":[{"name":"list","description":"<p>array of Strings to be joined</p>\n","type":"Array"},{"name":"separator","description":"<p>String to be placed between each item</p>\n","type":"String"}],"return":{"description":"joined String","type":"String"},"example":["\n<div>\n<code>\nlet array = ['Hello', 'world!'];\nlet separator = ' ';\nlet message = join(array, separator);\ntext(message, 5, 50);\n</code>\n</div>"],"alt":"\"hello world!\" displayed middle left of canvas.","class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":43,"description":"<p>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.</p>\n<p>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.</p>\n<p>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).</p>\n","itemtype":"method","name":"match","params":[{"name":"str","description":"<p>the String to be searched</p>\n","type":"String"},{"name":"regexp","description":"<p>the regexp to be used for matching</p>\n","type":"String"}],"return":{"description":"Array of Strings found","type":"String[]"},"example":["\n<div>\n<code>\nlet string = 'Hello p5js*!';\nlet regexp = 'p5js\\\\*';\nlet m = match(string, regexp);\ntext(m, 5, 50);\n</code>\n</div>"],"alt":"\"p5js*\" displayed middle left of canvas.","class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":83,"description":"<p>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.</p>\n<p>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.</p>\n<p>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).</p>\n","itemtype":"method","name":"matchAll","params":[{"name":"str","description":"<p>the String to be searched</p>\n","type":"String"},{"name":"regexp","description":"<p>the regexp to be used for matching</p>\n","type":"String"}],"return":{"description":"2d Array of Strings found","type":"String[]"},"example":["\n<div class=\"norender\">\n<code>\nlet string = 'Hello p5js*! Hello world!';\nlet regexp = 'Hello';\nmatchAll(string, regexp);\n</code>\n</div>"],"class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":130,"description":"<p>Utility function for formatting numbers into strings. There are two\nversions: one for formatting floats, and one for formatting ints.\nThe values for the digits, left, and right parameters should always\nbe positive integers.\n(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.\nFor 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.</p>\n","itemtype":"method","name":"nf","return":{"description":"formatted String","type":"String"},"example":["\n<div>\n<code>\nlet myFont;\nfunction preload() {\n  myFont = loadFont('assets/fonts/inconsolata.ttf');\n}\nfunction setup() {\n  background(200);\n  let num1 = 321;\n  let num2 = -1321;\n\n  noStroke();\n  fill(0);\n  textFont(myFont);\n  textSize(22);\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</code>\n</div>"],"alt":"\"0321.00\" middle top, -1321.00\" middle bottom canvas","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":130,"params":[{"name":"num","description":"<p>the Number to format</p>\n","type":"Number|String"},{"name":"left","description":"<p>number of digits to the left of the\n                               decimal point</p>\n","type":"Integer|String","optional":true},{"name":"right","description":"<p>number of digits to the right of the\n                               decimal point</p>\n","type":"Integer|String","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":178,"params":[{"name":"nums","description":"<p>the Numbers to format</p>\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":239,"description":"<p>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.</p>\n","itemtype":"method","name":"nfc","return":{"description":"formatted String","type":"String"},"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"\"11,253,106.115\" top middle and \"1.00,1.00,2.00\" displayed bottom mid","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":239,"params":[{"name":"num","description":"<p>the Number to format</p>\n","type":"Number|String"},{"name":"right","description":"<p>number of digits to the right of the\n                                 decimal point</p>\n","type":"Integer|String","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":277,"params":[{"name":"nums","description":"<p>the Numbers to format</p>\n","type":"Array"},{"name":"right","description":"","type":"Integer|String","optional":true}],"return":{"description":"formatted Strings","type":"String[]"}}]},{"file":"src/utilities/string_functions.js","line":313,"description":"<p>Utility function for formatting numbers into strings. Similar to <a href=\"#/p5/nf\">nf()</a> 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.</p>\n","itemtype":"method","name":"nfp","return":{"description":"formatted String","type":"String"},"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"\"+11253106.11\" top middle and \"-11253106.11\" displayed bottom middle","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":313,"params":[{"name":"num","description":"<p>the Number to format</p>\n","type":"Number"},{"name":"left","description":"<p>number of digits to the left of the decimal\n                               point</p>\n","type":"Integer","optional":true},{"name":"right","description":"<p>number of digits to the right of the\n                               decimal point</p>\n","type":"Integer","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":354,"params":[{"name":"nums","description":"<p>the Numbers to format</p>\n","type":"Number[]"},{"name":"left","description":"","type":"Integer","optional":true},{"name":"right","description":"","type":"Integer","optional":true}],"return":{"description":"formatted Strings","type":"String[]"}}]},{"file":"src/utilities/string_functions.js","line":375,"description":"<p>Utility function for formatting numbers into strings. Similar to <a href=\"#/p5/nf\">nf()</a> but\nputs an additional \"_\" (space) in front of positive numbers just in case to align it with negative\nnumbers which includes \"-\" (minus) sign.\nThe 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.\nThe 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.\nFor 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.</p>\n","itemtype":"method","name":"nfs","return":{"description":"formatted String","type":"String"},"example":["\n<div>\n<code>\nlet myFont;\nfunction preload() {\n  myFont = loadFont('assets/fonts/inconsolata.ttf');\n}\nfunction setup() {\n  background(200);\n  let num1 = 321;\n  let num2 = -1321;\n\n  noStroke();\n  fill(0);\n  textFont(myFont);\n  textSize(22);\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</code>\n</div>"],"alt":"\"0321.00\" top middle and \"-1321.00\" displayed bottom middle","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":375,"params":[{"name":"num","description":"<p>the Number to format</p>\n","type":"Number"},{"name":"left","description":"<p>number of digits to the left of the decimal\n                               point</p>\n","type":"Integer","optional":true},{"name":"right","description":"<p>number of digits to the right of the\n                               decimal point</p>\n","type":"Integer","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":432,"params":[{"name":"nums","description":"<p>the Numbers to format</p>\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":453,"description":"<p>The <a href=\"#/p5/split\">split()</a> 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.</p>\n<p>The <a href=\"#/p5/splitTokens\">splitTokens()</a> function works in a similar fashion, except that it\nsplits using a range of characters instead of a specific character or\nsequence.</p>\n","itemtype":"method","name":"split","params":[{"name":"value","description":"<p>the String to be split</p>\n","type":"String"},{"name":"delim","description":"<p>the String used to separate the data</p>\n","type":"String"}],"return":{"description":"Array of Strings","type":"String[]"},"example":["\n<div>\n<code>\nlet names = 'Pat,Xio,Alex';\nlet splitString = split(names, ',');\ntext(splitString[0], 5, 30);\ntext(splitString[1], 5, 50);\ntext(splitString[2], 5, 70);\n</code>\n</div>"],"alt":"\"pat\" top left, \"Xio\" mid left and \"Alex\" displayed bottom left","class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":486,"description":"<p>The <a href=\"#/p5/splitTokens\">splitTokens()</a> 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.</p>\n<p>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.</p>\n","itemtype":"method","name":"splitTokens","params":[{"name":"value","description":"<p>the String to be split</p>\n","type":"String"},{"name":"delim","description":"<p>list of individual Strings that will be used as\n                         separators</p>\n","type":"String","optional":true}],"return":{"description":"Array of Strings","type":"String[]"},"example":["\n<div class = \"norender\">\n<code>\nfunction setup() {\n  let myStr = 'Mango, Banana, Lime';\n  let myStrArr = splitTokens(myStr, ',');\n\n  print(myStrArr); // prints : [\"Mango\",\" Banana\",\" Lime\"]\n}\n</code>\n</div>"],"class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":539,"description":"<p>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.</p>\n","itemtype":"method","name":"trim","return":{"description":"a trimmed String","type":"String"},"example":["\n<div>\n<code>\nlet string = trim('  No new lines\\n   ');\ntext(string + ' here', 2, 50);\n</code>\n</div>"],"alt":"\"No new lines here\" displayed center canvas","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":539,"params":[{"name":"str","description":"<p>a String to be trimmed</p>\n","type":"String"}],"return":{"description":"a trimmed String","type":"String"}},{"line":559,"params":[{"name":"strs","description":"<p>an Array of Strings to be trimmed</p>\n","type":"Array"}],"return":{"description":"an Array of trimmed Strings","type":"String[]"}}]},{"file":"src/utilities/time_date.js","line":10,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/day\">day()</a> function\nreturns the current day as a value from 1 - 31.</p>\n","itemtype":"method","name":"day","return":{"description":"the current day","type":"Integer"},"example":["\n<div>\n<code>\nlet d = day();\ntext('Current day: \\n' + d, 5, 50);\n</code>\n</div>"],"alt":"Current day is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":31,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/hour\">hour()</a> function\nreturns the current hour as a value from 0 - 23.</p>\n","itemtype":"method","name":"hour","return":{"description":"the current hour","type":"Integer"},"example":["\n<div>\n<code>\nlet h = hour();\ntext('Current hour:\\n' + h, 5, 50);\n</code>\n</div>"],"alt":"Current hour is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":52,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/minute\">minute()</a> function\nreturns the current minute as a value from 0 - 59.</p>\n","itemtype":"method","name":"minute","return":{"description":"the current minute","type":"Integer"},"example":["\n<div>\n<code>\nlet m = minute();\ntext('Current minute: \\n' + m, 5, 50);\n</code>\n</div>"],"alt":"Current minute is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":73,"description":"<p>Returns the number of milliseconds (thousandths of a second) since\nstarting the sketch (when <code>setup()</code> is called). This information is often\nused for timing events and animation sequences.</p>\n","itemtype":"method","name":"millis","return":{"description":"the number of milliseconds since starting the sketch","type":"Number"},"example":["\n<div>\n<code>\nlet millisecond = millis();\ntext('Milliseconds \\nrunning: \\n' + millisecond, 5, 40);\n</code>\n</div>"],"alt":"number of milliseconds since sketch has started displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":100,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/month\">month()</a> function\nreturns the current month as a value from 1 - 12.</p>\n","itemtype":"method","name":"month","return":{"description":"the current month","type":"Integer"},"example":["\n<div>\n<code>\nlet m = month();\ntext('Current month: \\n' + m, 5, 50);\n</code>\n</div>"],"alt":"Current month is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":122,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/second\">second()</a> function\nreturns the current second as a value from 0 - 59.</p>\n","itemtype":"method","name":"second","return":{"description":"the current second","type":"Integer"},"example":["\n<div>\n<code>\nlet s = second();\ntext('Current second: \\n' + s, 5, 50);\n</code>\n</div>"],"alt":"Current second is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":143,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/year\">year()</a> function\nreturns the current year as an integer (2014, 2015, 2016, etc).</p>\n","itemtype":"method","name":"year","return":{"description":"the current year","type":"Integer"},"example":["\n<div>\n<code>\nlet y = year();\ntext('Current year: \\n' + y, 5, 50);\n</code>\n</div>"],"alt":"Current year is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/webgl/3d_primitives.js","line":13,"description":"<p>Draw a plane with given a width and height</p>\n","itemtype":"method","name":"plane","params":[{"name":"width","description":"<p>width of the plane</p>\n","type":"Number","optional":true},{"name":"height","description":"<p>height of the plane</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>Optional number of triangle\n                            subdivisions in x-dimension</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>Optional number of triangle\n                            subdivisions in y-dimension</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a plane\n// with width 50 and height 50\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  plane(50, 50);\n}\n</code>\n</div>"],"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":97,"description":"<p>Draw a box with given width, height and depth</p>\n","itemtype":"method","name":"box","params":[{"name":"width","description":"<p>width of the box</p>\n","type":"Number","optional":true},{"name":"Height","description":"<p>height of the box</p>\n","type":"Number","optional":true},{"name":"depth","description":"<p>depth of the box</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>Optional number of triangle\n                           subdivisions in x-dimension</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>Optional number of triangle\n                           subdivisions in y-dimension</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a spinning box\n// with width, height and depth of 50\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  box(50);\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":215,"description":"<p>Draw a sphere with given radius.</p>\n<p>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.</p>\n","itemtype":"method","name":"sphere","params":[{"name":"radius","description":"<p>radius of circle</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>optional number of subdivisions in x-dimension</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>optional number of subdivisions in y-dimension</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a sphere with radius 40\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(205, 102, 94);\n  sphere(40);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  sphere(40, detailX.value(), 16);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  sphere(40, 16, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":419,"description":"<p>Draw a cylinder with given radius and height</p>\n<p>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.</p>\n","itemtype":"method","name":"cylinder","params":[{"name":"radius","description":"<p>radius of the surface</p>\n","type":"Number","optional":true},{"name":"height","description":"<p>height of the cylinder</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>number of subdivisions in x-dimension;\n                              default is 24</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of subdivisions in y-dimension;\n                              default is 1</p>\n","type":"Integer","optional":true},{"name":"bottomCap","description":"<p>whether to draw the bottom of the cylinder</p>\n","type":"Boolean","optional":true},{"name":"topCap","description":"<p>whether to draw the top of the cylinder</p>\n","type":"Boolean","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a spinning cylinder\n// with radius 20 and height 50\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  cylinder(20, 75, detailX.value(), 1);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  cylinder(20, 75, 16, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":554,"description":"<p>Draw a cone with given radius and height</p>\n<p>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.</p>\n","itemtype":"method","name":"cone","params":[{"name":"radius","description":"<p>radius of the bottom surface</p>\n","type":"Number","optional":true},{"name":"height","description":"<p>height of the cone</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>number of segments,\n                            the more segments the smoother geometry\n                            default is 24</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of segments,\n                            the more segments the smoother geometry\n                            default is 1</p>\n","type":"Integer","optional":true},{"name":"cap","description":"<p>whether to draw the base of the cone</p>\n","type":"Boolean","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a spinning cone\n// with radius 40 and height 70\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateZ(frameCount * 0.01);\n  cone(40, 70);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 102, 94);\n  rotateY(millis() / 1000);\n  cone(30, 65, detailX.value(), 16);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 102, 94);\n  rotateY(millis() / 1000);\n  cone(30, 65, 16, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":669,"description":"<p>Draw an ellipsoid with given radius</p>\n<p>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.</p>\n","itemtype":"method","name":"ellipsoid","params":[{"name":"radiusx","description":"<p>x-radius of ellipsoid</p>\n","type":"Number","optional":true},{"name":"radiusy","description":"<p>y-radius of ellipsoid</p>\n","type":"Number","optional":true},{"name":"radiusz","description":"<p>z-radius of ellipsoid</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>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.</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>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.</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw an ellipsoid\n// with radius 30, 40 and 40.\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(205, 105, 94);\n  ellipsoid(30, 40, 40);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  ellipsoid(30, 40, 40, detailX.value(), 8);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 9);\n  rotateY(millis() / 1000);\n  ellipsoid(30, 40, 40, 12, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":804,"description":"<p>Draw a torus with given radius and tube radius</p>\n<p>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.</p>\n","itemtype":"method","name":"torus","params":[{"name":"radius","description":"<p>radius of the whole ring</p>\n","type":"Number","optional":true},{"name":"tubeRadius","description":"<p>radius of the tube</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>number of segments in x-dimension,\n                               the more segments the smoother geometry\n                               default is 24</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of segments in y-dimension,\n                               the more segments the smoother geometry\n                               default is 16</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a spinning torus\n// with ring radius 30 and tube radius 15\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 102, 94);\n  rotateY(millis() / 1000);\n  torus(30, 15, detailX.value(), 12);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 102, 94);\n  rotateY(millis() / 1000);\n  torus(30, 15, 16, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/interaction.js","line":11,"description":"<p>Allows movement around a 3D sketch using a mouse or trackpad.  Left-clicking\nand dragging will rotate the camera position about the center of the sketch,\nright-clicking and dragging will pan the camera position without rotation,\nand using the mouse wheel (scrolling) will move the camera closer or further\nfrom the center of the sketch. This function can be called with parameters\ndictating sensitivity to mouse movement along the X and Y axes.  Calling\nthis function without parameters is equivalent to calling orbitControl(1,1).\nTo reverse direction of movement in either axis, enter a negative number\nfor sensitivity.</p>\n","itemtype":"method","name":"orbitControl","params":[{"name":"sensitivityX","description":"<p>sensitivity to mouse movement along X axis</p>\n","type":"Number","optional":true},{"name":"sensitivityY","description":"<p>sensitivity to mouse movement along Y axis</p>\n","type":"Number","optional":true},{"name":"sensitivityZ","description":"<p>sensitivity to scroll movement along Z axis</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n}\nfunction draw() {\n  background(200);\n  orbitControl();\n  rotateY(0.5);\n  box(30, 50);\n}\n</code>\n</div>"],"alt":"Camera orbits around a box when mouse is hold-clicked & then moved.","class":"p5","module":"Lights, Camera","submodule":"Interaction"},{"file":"src/webgl/interaction.js","line":145,"description":"<p>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.</p>\n<p>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.</p>\n","itemtype":"method","name":"debugMode","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode();\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</code>\n</div>","\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode(GRID);\n}\n\nfunction draw() {\n  background(200);\n  orbitControl();\n  box(15, 30);\n}\n</code>\n</div>","\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode(AXES);\n}\n\nfunction draw() {\n  background(200);\n  orbitControl();\n  box(15, 30);\n}\n</code>\n</div>","\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode(GRID, 100, 10, 0, 0, 0);\n}\n\nfunction draw() {\n  background(200);\n  orbitControl();\n  box(15, 30);\n}\n</code>\n</div>","\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode(100, 10, 0, 0, 0, 20, 0, -40, 0);\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</code>\n</div>"],"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":"Lights, Camera","submodule":"Interaction","overloads":[{"line":145,"params":[]},{"line":278,"params":[{"name":"mode","description":"<p>either GRID or AXES</p>\n","type":"Constant"}]},{"line":283,"params":[{"name":"mode","description":"","type":"Constant"},{"name":"gridSize","description":"<p>size of one side of the grid</p>\n","type":"Number","optional":true},{"name":"gridDivisions","description":"<p>number of divisions in the grid</p>\n","type":"Number","optional":true},{"name":"xOff","description":"<p>X axis offset from origin (0,0,0)</p>\n","type":"Number","optional":true},{"name":"yOff","description":"<p>Y axis offset from origin (0,0,0)</p>\n","type":"Number","optional":true},{"name":"zOff","description":"<p>Z axis offset from origin (0,0,0)</p>\n","type":"Number","optional":true}]},{"line":293,"params":[{"name":"mode","description":"","type":"Constant"},{"name":"axesSize","description":"<p>size of axes icon</p>\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":302,"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":353,"description":"<p>Turns off debugMode() in a 3D sketch.</p>\n","itemtype":"method","name":"noDebugMode","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode();\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</code>\n</div>"],"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":"Lights, Camera","submodule":"Interaction"},{"file":"src/webgl/light.js","line":11,"description":"<p>Creates an ambient light with a color. Ambient light is light that comes from everywhere on the canvas.\nIt has no particular source.</p>\n","itemtype":"method","name":"ambientLight","chainable":1,"example":["\n<div>\n<code>\ncreateCanvas(100, 100, WEBGL);\nambientLight(0);\nambientMaterial(250);\nsphere(40);\n</code>\n</div>\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(51);\n  ambientLight(100); // white light\n  ambientMaterial(255, 102, 94); // magenta material\n  box(30);\n}\n</code>\n</div>"],"alt":"evenly distributed light across a sphere\nevenly distributed light across a rotating sphere","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":11,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"<p>the alpha value</p>\n","type":"Number","optional":true}],"chainable":1},{"line":51,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"chainable":1},{"line":57,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":64,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":71,"params":[{"name":"color","description":"<p>the ambient light color</p>\n","type":"p5.Color"}],"chainable":1}]},{"file":"src/webgl/light.js","line":92,"description":"<p>Set's the color of the specular highlight when using a specular material and\nspecular light.</p>\n<p>This method can be combined with specularMaterial() and shininess()\nfunctions to set specular highlights. The default color is white, ie\n(255, 255, 255), which is used if this method is not called before\nspecularMaterial(). If this method is called without specularMaterial(),\nThere will be no effect.</p>\n<p>Note: specularColor is equivalent to the processing function\n<a href=\"https://processing.org/reference/lightSpecular_.html\">lightSpecular</a>.</p>\n","itemtype":"method","name":"specularColor","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  noStroke();\n}\n\nfunction draw() {\n  background(0);\n  shininess(20);\n  ambientLight(50);\n  specularColor(255, 0, 0);\n  pointLight(255, 0, 0, 0, -50, 50);\n  specularColor(0, 255, 0);\n  pointLight(0, 255, 0, 0, 50, 50);\n  specularMaterial(255);\n  sphere(40);\n}\n</code>\n</div>"],"alt":"different specular light sources from top and bottom of canvas","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":92,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"}],"chainable":1},{"line":139,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"chainable":1},{"line":145,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"}],"chainable":1},{"line":151,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":158,"params":[{"name":"color","description":"<p>the ambient light color</p>\n","type":"p5.Color"}],"chainable":1}]},{"file":"src/webgl/light.js","line":177,"description":"<p>Creates a directional light with a color and a direction</p>\n<p>A maximum of 5 directionalLight can be active at one time</p>\n","itemtype":"method","name":"directionalLight","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"light source on canvas changeable with mouse position","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":177,"params":[{"name":"v1","description":"<p>red or hue value (depending on the current\ncolor mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number"},{"name":"position","description":"<p>the direction of the light</p>\n","type":"p5.Vector"}],"chainable":1},{"line":210,"params":[{"name":"color","description":"<p>color Array, CSS color string,\n                                            or <a href=\"#/p5.Color\">p5.Color</a> value</p>\n","type":"Number[]|String|p5.Color"},{"name":"x","description":"<p>x axis direction</p>\n","type":"Number"},{"name":"y","description":"<p>y axis direction</p>\n","type":"Number"},{"name":"z","description":"<p>z axis direction</p>\n","type":"Number"}],"chainable":1},{"line":220,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"name":"position","description":"","type":"p5.Vector"}],"chainable":1},{"line":227,"params":[{"name":"v1","description":"","type":"Number"},{"name":"v2","description":"","type":"Number"},{"name":"v3","description":"","type":"Number"},{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"","type":"Number"}],"chainable":1}]},{"file":"src/webgl/light.js","line":280,"description":"<p>Creates a point light with a color and a light position</p>\n<p>A maximum of 5 pointLight can be active at one time</p>\n","itemtype":"method","name":"pointLight","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"spot light on canvas changes position with mouse","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":280,"params":[{"name":"v1","description":"<p>red or hue value (depending on the current\ncolor mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number"},{"name":"x","description":"<p>x axis position</p>\n","type":"Number"},{"name":"y","description":"<p>y axis position</p>\n","type":"Number"},{"name":"z","description":"<p>z axis position</p>\n","type":"Number"}],"chainable":1},{"line":322,"params":[{"name":"v1","description":"","type":"Number"},{"name":"v2","description":"","type":"Number"},{"name":"v3","description":"","type":"Number"},{"name":"position","description":"<p>the position of the light</p>\n","type":"p5.Vector"}],"chainable":1},{"line":331,"params":[{"name":"color","description":"<p>color Array, CSS color string,\nor <a href=\"#/p5.Color\">p5.Color</a> value</p>\n","type":"Number[]|String|p5.Color"},{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"","type":"Number"}],"chainable":1},{"line":341,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"name":"position","description":"","type":"p5.Vector"}],"chainable":1}]},{"file":"src/webgl/light.js","line":387,"description":"<p>Sets the default ambient and directional light. The defaults are <a href=\"#/p5/ambientLight\">ambientLight(128, 128, 128)</a> and <a href=\"#/p5/directionalLight\">directionalLight(128, 128, 128, 0, 0, -1)</a>. Lights need to be included in the <a href=\"#/p5/draw\">draw()</a> to remain persistent in a looping program. Placing them in the <a href=\"#/p5/setup\">setup()</a> of a looping program will cause them to only have an effect the first time through the loop.</p>\n","itemtype":"method","name":"lights","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(0);\n  lights();\n  rotateX(millis() / 1000);\n  rotateY(millis() / 1000);\n  rotateZ(millis() / 1000);\n  box();\n}\n</code>\n</div>"],"alt":"the light is partially ambient and partially directional","class":"p5","module":"Lights, Camera","submodule":"Lights"},{"file":"src/webgl/light.js","line":425,"description":"<p>Sets the falloff rates for point lights. It affects only the elements which are created after it in the code.\nThe default value is lightFalloff(1.0, 0.0, 0.0), and the parameters are used to calculate the falloff with the following equation:</p>\n<p>d = distance from light position to vertex position</p>\n<p>falloff = 1 / (CONSTANT + d * LINEAR + ( d * d ) * QUADRATIC)</p>\n","itemtype":"method","name":"lightFalloff","params":[{"name":"constant","description":"<p>constant value for determining falloff</p>\n","type":"Number"},{"name":"linear","description":"<p>linear value for determining falloff</p>\n","type":"Number"},{"name":"quadratic","description":"<p>quadratic value for determining falloff</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  noStroke();\n}\nfunction draw() {\n  background(0);\n  let locX = mouseX - width / 2;\n  let locY = mouseY - height / 2;\n  translate(-25, 0, 0);\n  lightFalloff(1, 0, 0);\n  pointLight(250, 250, 250, locX, locY, 50);\n  sphere(20);\n  translate(50, 0, 0);\n  lightFalloff(0.9, 0.01, 0);\n  pointLight(250, 250, 250, locX, locY, 50);\n  sphere(20);\n}\n</code>\n</div>"],"alt":"Two spheres with different falloff values show different intensity of light","class":"p5","module":"Lights, Camera","submodule":"Lights"},{"file":"src/webgl/light.js","line":510,"description":"<p>Creates a spotlight with a given color, position, direction of light,\nangle and concentration. Here, angle refers to the opening or aperture\nof the cone of the spotlight, and concentration is used to focus the\nlight towards the center. Both angle and concentration are optional, but if\nyou want to provide concentration, you will also have to specify the angle.</p>\n<p>A maximum of 5 spotLight can be active at one time</p>\n","itemtype":"method","name":"spotLight","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"Spot light on a sphere which changes position with mouse","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":510,"params":[{"name":"v1","description":"<p>red or hue value (depending on the current\ncolor mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number"},{"name":"x","description":"<p>x axis position</p>\n","type":"Number"},{"name":"y","description":"<p>y axis position</p>\n","type":"Number"},{"name":"z","description":"<p>z axis position</p>\n","type":"Number"},{"name":"rx","description":"<p>x axis direction of light</p>\n","type":"Number"},{"name":"ry","description":"<p>y axis direction of light</p>\n","type":"Number"},{"name":"rz","description":"<p>z axis direction of light</p>\n","type":"Number"},{"name":"angle","description":"<p>optional parameter for angle. Defaults to PI/3</p>\n","type":"Number","optional":true},{"name":"conc","description":"<p>optional parameter for concentration. Defaults to 100</p>\n","type":"Number","optional":true}],"chainable":1},{"line":562,"params":[{"name":"color","description":"<p>color Array, CSS color string,\nor <a href=\"#/p5.Color\">p5.Color</a> value</p>\n","type":"Number[]|String|p5.Color"},{"name":"position","description":"<p>the position of the light</p>\n","type":"p5.Vector"},{"name":"direction","description":"<p>the direction of the light</p>\n","type":"p5.Vector"},{"name":"angle","description":"","type":"Number","optional":true},{"name":"conc","description":"","type":"Number","optional":true}]},{"line":571,"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":"conc","description":"","type":"Number","optional":true}]},{"line":581,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"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":"conc","description":"","type":"Number","optional":true}]},{"line":591,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"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":"conc","description":"","type":"Number","optional":true}]},{"line":601,"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":"conc","description":"","type":"Number","optional":true}]},{"line":613,"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":"conc","description":"","type":"Number","optional":true}]},{"line":625,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"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":"conc","description":"","type":"Number","optional":true}]}]},{"file":"src/webgl/light.js","line":850,"description":"<p>This function will remove all the lights from the sketch for the\nsubsequent materials rendered. It affects all the subsequent methods.\nCalls to lighting methods made after noLights() will re-enable lights\nin the sketch.</p>\n","itemtype":"method","name":"noLights","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(0);\n  noStroke();\n\n  ambientLight(150, 0, 0);\n  translate(-25, 0, 0);\n  ambientMaterial(250);\n  sphere(20);\n\n  noLights();\n  ambientLight(0, 150, 0);\n  translate(50, 0, 0);\n  ambientMaterial(250);\n  sphere(20);\n}\n</code>\n</div>"],"alt":"Two spheres showing different colors","class":"p5","module":"Lights, Camera","submodule":"Lights"},{"file":"src/webgl/loading.js","line":12,"description":"<p>Load a 3d model from an OBJ or STL file.</p>\n<p><a href=\"#/p5/loadModel\">loadModel()</a> should be placed inside of <a href=\"#/p5/preload\">preload()</a>.\nThis allows the model to load fully before the rest of your code is run.</p>\n<p>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\n<a href=\"#/p5/loadModel\">loadModel()</a> 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 <a href=\"#/p5/scale\">scale()</a> function.</p>\n<p>Also, the support for colored STL files is not present. STL files with color will be\nrendered without color properties.</p>\n","itemtype":"method","name":"loadModel","return":{"description":"the <a href=\"#/p5.Geometry\">p5.Geometry</a> object","type":"p5.Geometry"},"example":["\n<div>\n<code>\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}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  model(octahedron);\n}\n</code>\n</div>","\n<div>\n<code>\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}\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</code>\n</div>"],"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":"<p>Path of the model to be loaded</p>\n","type":"String"},{"name":"normalize","description":"<p>If true, scale the model to a\n                                     standardized size when loading</p>\n","type":"Boolean"},{"name":"successCallback","description":"<p>Function to be called\n                                    once the model is loaded. Will be passed\n                                    the 3D model object.</p>\n","type":"function(p5.Geometry)","optional":true},{"name":"failureCallback","description":"<p>called with event error if\n                                        the model fails to load.</p>\n","type":"Function(Event)","optional":true},{"name":"fileType","description":"<p>The file extension of the model\n                                     (<code>.stl</code>, <code>.obj</code>).</p>\n","type":"String","optional":true}],"return":{"description":"the <a href=\"#/p5.Geometry\">p5.Geometry</a> object","type":"p5.Geometry"}},{"line":96,"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 <a href=\"#/p5.Geometry\">p5.Geometry</a> object","type":"p5.Geometry"}}]},{"file":"src/webgl/loading.js","line":179,"description":"<p>Parse OBJ lines into model. For reference, this is what a simple model of a\nsquare might look like:</p>\n<p>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</p>\n<p>f 4 3 2 1</p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":290,"description":"<p>STL files can be of two types, ASCII and Binary,</p>\n<p>We need to convert the arrayBuffer to an array of strings,\nto parse it as an ASCII file.</p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":317,"description":"<p>This function checks if the file is in ASCII format or in Binary format</p>\n<p>It is done by searching keyword <code>solid</code> at the start of the file.</p>\n<p>An ASCII STL data must begin with <code>solid</code> as the first six bytes.\nHowever, ASCII STLs lacking the SPACE after the <code>d</code> are known to be\nplentiful. So, check the first 5 bytes for <code>solid</code>.</p>\n<p>Several encodings, such as UTF-8, precede the text with up to 5 bytes:\n<a href=\"https://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding\">https://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding</a>\nSearch for <code>solid</code> to start anywhere after those prefixes.</p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":344,"description":"<p>This function matches the <code>query</code> at the provided <code>offset</code></p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":356,"description":"<p>This function parses the Binary STL files.\n<a href=\"https://en.wikipedia.org/wiki/STL_%28file_format%29#Binary_STL\">https://en.wikipedia.org/wiki/STL_%28file_format%29#Binary_STL</a></p>\n<p>Currently there is no support for the colors provided in STL files.</p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":444,"description":"<p>ASCII STL file starts with <code>solid 'nameOfFile'</code>\nThen contain the normal of the face, starting with <code>facet normal</code>\nNext contain a keyword indicating the start of face vertex, <code>outer loop</code>\nNext comes the three vertex, starting with <code>vertex x y z</code>\nVertices ends with <code>endloop</code>\nFace ends with <code>endfacet</code>\nNext face starts with <code>facet normal</code>\nThe end of the file is indicated by <code>endsolid</code></p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":588,"description":"<p>Render a 3d model to the screen.</p>\n","itemtype":"method","name":"model","params":[{"name":"model","description":"<p>Loaded 3d model to be rendered</p>\n","type":"p5.Geometry"}],"example":["\n<div>\n<code>\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}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  model(octahedron);\n}\n</code>\n</div>"],"alt":"Vertically rotating 3-d octahedron.","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/material.js","line":12,"description":"<p>Loads a custom shader from the provided vertex and fragment\nshader paths. The shader files are loaded asynchronously in the\nbackground, so this method should be used in <a href=\"#/p5/preload\">preload()</a>.</p>\n<p>For now, there are three main types of shaders. p5 will automatically\nsupply appropriate vertices, normals, colors, and lighting attributes\nif the parameters defined in the shader match the names.</p>\n","itemtype":"method","name":"loadShader","params":[{"name":"vertFilename","description":"<p>path to file containing vertex shader\nsource code</p>\n","type":"String"},{"name":"fragFilename","description":"<p>path to file containing fragment shader\nsource code</p>\n","type":"String"},{"name":"callback","description":"<p>callback to be executed after loadShader\ncompletes. On success, the Shader object is passed as the first argument.</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>callback to be executed when an error\noccurs inside loadShader. On error, the error is passed as the first\nargument.</p>\n","type":"Function","optional":true}],"return":{"description":"a shader object created from the provided\nvertex and fragment shader files.","type":"p5.Shader"},"example":["\n<div modernizr='webgl'>\n<code>\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}\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</code>\n</div>"],"alt":"zooming Mandelbrot set. a colorful, infinitely detailed fractal.","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":111,"itemtype":"method","name":"createShader","params":[{"name":"vertSrc","description":"<p>source code for the vertex shader</p>\n","type":"String"},{"name":"fragSrc","description":"<p>source code for the fragment shader</p>\n","type":"String"}],"return":{"description":"a shader object created from the provided\nvertex and fragment shaders.","type":"p5.Shader"},"example":["\n<div modernizr='webgl'>\n<code>\n// the 'varying's are shared between both vertex & fragment shaders\nlet varying = 'precision highp float; varying vec2 vPos;';\n\n// the vertex shader is called for each vertex\nlet vs =\n  varying +\n  'attribute vec3 aPosition;' +\n  'void main() { vPos = (gl_Position = vec4(aPosition,1.0)).xy; }';\n\n// the fragment shader is called for each pixel\nlet fs =\n  varying +\n  'uniform vec2 p;' +\n  'uniform float r;' +\n  'const int I = 500;' +\n  'void main() {' +\n  '  vec2 c = p + vPos * r, z = c;' +\n  '  float n = 0.0;' +\n  '  for (int i = I; i > 0; i --) {' +\n  '    if(z.x*z.x+z.y*z.y > 4.0) {' +\n  '      n = float(i)/float(I);' +\n  '      break;' +\n  '    }' +\n  '    z = vec2(z.x*z.x-z.y*z.y, 2.0*z.x*z.y) + c;' +\n  '  }' +\n  '  gl_FragColor = vec4(0.5-cos(n*17.0)/2.0,0.5-cos(n*13.0)/2.0,0.5-cos(n*23.0)/2.0,1.0);' +\n  '}';\n\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}\n\nfunction draw() {\n  // 'r' is the size of the image in Mandelbrot-space\n  mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));\n  quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n</code>\n</div>"],"alt":"zooming Mandelbrot set. a colorful, infinitely detailed fractal.","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":179,"description":"<p>The <a href=\"#/p5/shader\">shader()</a> function lets the user provide a custom shader\nto fill in shapes in WEBGL mode. Users can create their\nown shaders by loading vertex and fragment shaders with\n<a href=\"#/p5/loadShader\">loadShader()</a>.</p>\n","itemtype":"method","name":"shader","chainable":1,"params":[{"name":"s","description":"<p>the desired <a href=\"#/p5.Shader\">p5.Shader</a> to use for rendering\nshapes.</p>\n","type":"p5.Shader","optional":true}],"example":["\n<div modernizr='webgl'>\n<code>\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\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</code>\n</div>"],"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":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":270,"description":"<p>This function restores the default shaders in WEBGL mode. Code that runs\nafter resetShader() will not be affected by previously defined\nshaders. Should be run after <a href=\"#/p5/shader\">shader()</a>.</p>\n","itemtype":"method","name":"resetShader","chainable":1,"class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":283,"description":"<p>Normal material for geometry is a material that is not affected by light.\nIt is not reflective and is a placeholder material often used for debugging.\nSurfaces facing the X-axis, become red, those facing the Y-axis, become green and those facing the Z-axis, become blue.\nYou can view all possible materials in this\n<a href=\"https://p5js.org/examples/3d-materials.html\">example</a>.</p>\n","itemtype":"method","name":"normalMaterial","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  normalMaterial();\n  sphere(40);\n}\n</code>\n</div>"],"alt":"Red, green and blue gradient.","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":321,"description":"<p>Texture for geometry.  You can view other possible materials in this\n<a href=\"https://p5js.org/examples/3d-materials.html\">example</a>.</p>\n","itemtype":"method","name":"texture","params":[{"name":"tex","description":"<p>2-dimensional graphics\n                   to render as texture</p>\n","type":"p5.Image|p5.MediaElement|p5.Graphics"}],"chainable":1,"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  rotateZ(frameCount * 0.01);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  //pass image as texture\n  texture(img);\n  box(200, 200, 200);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet pg;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  pg = createGraphics(200, 200);\n  pg.textSize(75);\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</code>\n</div>\n\n<div>\n<code>\nlet vid;\nfunction preload() {\n  vid = createVideo('assets/fingers.mov');\n  vid.hide();\n}\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  //pass video frame as texture\n  texture(vid);\n  rect(-40, -40, 80, 80);\n}\n\nfunction mousePressed() {\n  vid.loop();\n}\n</code>\n</div>"],"alt":"Rotating view of many images umbrella and grid roof on a 3d plane\nblack canvas\nblack canvas","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":421,"description":"<p>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.\nThis function only works in WEBGL mode.</p>\n<p>With IMAGE, if an image is 100 x 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).</p>\n","itemtype":"method","name":"textureMode","params":[{"name":"mode","description":"<p>either IMAGE or NORMAL</p>\n","type":"Constant"}],"example":["\n<div>\n<code>\nlet img;\n\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"the underside of a white umbrella and gridded ceiling above","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":499,"description":"<p>Sets the global texture wrapping mode. This controls how textures behave\nwhen their uv's go outside of the 0 - 1 range. There are three options:\nCLAMP, REPEAT, and MIRROR.</p>\n<p>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</p>\n<p>REPEAT & MIRROR are only available if the texture\nis a power of two size (128, 256, 512, 1024, etc.).</p>\n<p>This method will affect all textures in your sketch until a subsequent\ntextureWrap call is made.</p>\n<p>If only one argument is provided, it will be applied to both the\nhorizontal and vertical axes.</p>\n","itemtype":"method","name":"textureWrap","params":[{"name":"wrapX","description":"<p>either CLAMP, REPEAT, or MIRROR</p>\n","type":"Constant"},{"name":"wrapY","description":"<p>either CLAMP, REPEAT, or MIRROR</p>\n","type":"Constant","optional":true}],"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies128.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  textureWrap(MIRROR);\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</code>\n</div>"],"alt":"an image of the rocky mountains repeated in mirrored tiles","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":571,"description":"<p>Ambient material for geometry with a given color. Ambient material defines the color the object reflects under any lighting.\nFor example, if the ambient material of an object is pure red, but the ambient lighting only contains green, the object will not reflect any light.\nHere's an <a href=\"https://p5js.org/examples/3d-materials.html\">example containing all possible materials</a>.</p>\n","itemtype":"method","name":"ambientMaterial","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(0);\n  noStroke();\n  ambientLight(200);\n  ambientMaterial(70, 130, 230);\n  sphere(40);\n}\n</code>\n</div>\n<div>\n<code>\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}\nfunction draw() {\n  background(70);\n  ambientLight(100); // white light\n  ambientMaterial(255, 0, 255); // pink material\n  box(30);\n}\n</code>\n</div>\n<div>\n<code>\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}\nfunction draw() {\n  background(70);\n  ambientLight(0, 255, 0); // green light\n  ambientMaterial(255, 0, 255); // pink material\n  box(30);\n}\n</code>\n</div>"],"alt":"radiating light source from top right of canvas\nbox reflecting only red and blue light\nbox reflecting no light","class":"p5","module":"Lights, Camera","submodule":"Material","overloads":[{"line":571,"params":[{"name":"v1","description":"<p>gray value, red or hue value\n                        (depending on the current color mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number","optional":true},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number","optional":true}],"chainable":1},{"line":631,"params":[{"name":"color","description":"<p>color, color Array, or CSS color string</p>\n","type":"Number[]|String|p5.Color"}],"chainable":1}]},{"file":"src/webgl/material.js","line":651,"description":"<p>Sets the emissive color of the material used for geometry drawn to\nthe screen. This is a misnomer in the sense that the material does not\nactually emit light that effects surrounding polygons. Instead,\nit gives the appearance that the object is glowing. An emissive material\nwill display at full strength even if there is no light for it to reflect.</p>\n","itemtype":"method","name":"emissiveMaterial","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(0);\n  noStroke();\n  ambientLight(0);\n  emissiveMaterial(130, 230, 0);\n  sphere(40);\n}\n</code>\n</div>"],"alt":"radiating light source from top right of canvas","class":"p5","module":"Lights, Camera","submodule":"Material","overloads":[{"line":651,"params":[{"name":"v1","description":"<p>gray value, red or hue value\n                        (depending on the current color mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number","optional":true},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number","optional":true},{"name":"a","description":"<p>opacity</p>\n","type":"Number","optional":true}],"chainable":1},{"line":683,"params":[{"name":"color","description":"<p>color, color Array, or CSS color string</p>\n","type":"Number[]|String|p5.Color"}],"chainable":1}]},{"file":"src/webgl/material.js","line":703,"description":"<p>Specular material for geometry with a given color. Specular material is a shiny reflective material.\nLike ambient material it also defines the color the object reflects under ambient lighting.\nFor example, if the specular material of an object is pure red, but the ambient lighting only contains green, the object will not reflect any light.\nFor all other types of light like point and directional light, a specular material will reflect the color of the light source to the viewer.\nHere's an <a href=\"https://p5js.org/examples/3d-materials.html\">example containing all possible materials</a>.</p>\n","itemtype":"method","name":"specularMaterial","chainable":1,"class":"p5","module":"Lights, Camera","submodule":"Material","overloads":[{"line":703,"params":[{"name":"gray","description":"<p>number specifying value between white and black.</p>\n","type":"Number"},{"name":"alpha","description":"<p>alpha value relative to current color range\n                                (default is 0-255)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":717,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":747,"params":[{"name":"color","description":"<p>color Array, or CSS color string</p>\n","type":"Number[]|String|p5.Color"}],"chainable":1}]},{"file":"src/webgl/material.js","line":767,"description":"<p>Sets the amount of gloss in the surface of shapes.\nUsed in combination with specularMaterial() in setting\nthe material properties of shapes. The default and minimum value is 1.</p>\n","itemtype":"method","name":"shininess","params":[{"name":"shine","description":"<p>Degree of Shininess.\n                      Defaults to 1.</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"Shininess on Camera changes position with mouse","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Camera.js","line":13,"description":"<p>Sets the camera position for a 3D sketch. Parameters for this function define\nthe position for the camera, the center of the sketch (where the camera is\npointing), and an up direction (the orientation of the camera).</p>\n<p>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 centerX value is positive, the camera\nis rotating to the right side of the sketch, so the object would seem like\nmoving to the left.</p>\n<p>See this <a href = \"https://www.openprocessing.org/sketch/740258\">example</a>\nto view the position of your camera.</p>\n<p>When called with no arguments, this function creates a default camera\nequivalent to\ncamera(0, 0, (height/2.0) / tan(PI*30.0 / 180.0), 0, 0, 0, 0, 1, 0);</p>\n","itemtype":"method","name":"camera","is_constructor":1,"params":[{"name":"x","description":"<p>camera position value on x axis</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>camera position value on y axis</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>camera position value on z axis</p>\n","type":"Number","optional":true},{"name":"centerX","description":"<p>x coordinate representing center of the sketch</p>\n","type":"Number","optional":true},{"name":"centerY","description":"<p>y coordinate representing center of the sketch</p>\n","type":"Number","optional":true},{"name":"centerZ","description":"<p>z coordinate representing center of the sketch</p>\n","type":"Number","optional":true},{"name":"upX","description":"<p>x component of direction 'up' from camera</p>\n","type":"Number","optional":true},{"name":"upY","description":"<p>y component of direction 'up' from camera</p>\n","type":"Number","optional":true},{"name":"upZ","description":"<p>z component of direction 'up' from camera</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>","\n<div>\n<code>\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  //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  camera(X, Y, Z, centerX, centerY, centerZ, 0, 1, 0);\n  stroke(255);\n  fill(255, 102, 94);\n  box(85);\n}\n</code>\n</div>"],"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 it's center.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":115,"description":"<p>Sets a perspective projection for the camera in a 3D sketch. This projection\nrepresents depth through foreshortening: objects that are close to the camera\nappear their actual size while those that are further away from the camera\nappear smaller. 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.</p>\n<p>When called with no arguments, the defaults\nprovided are equivalent to\nperspective(PI/3.0, width/height, eyeZ/10.0, eyeZ<em>10.0), where eyeZ\nis equal to ((height/2.0) / tan(PI</em>60.0/360.0));</p>\n","itemtype":"method","name":"perspective","params":[{"name":"fovy","description":"<p>camera frustum vertical field of view,\n                          from bottom to top of view, in <a href=\"#/p5/angleMode\">angleMode</a> units</p>\n","type":"Number","optional":true},{"name":"aspect","description":"<p>camera frustum aspect ratio</p>\n","type":"Number","optional":true},{"name":"near","description":"<p>frustum near plane length</p>\n","type":"Number","optional":true},{"name":"far","description":"<p>frustum far plane length</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n//drag the mouse to look around!\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  perspective(PI / 3.0, width / height, 0.1, 500);\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) * 95);\n  box(30);\n  pop();\n  push();\n  translate(15, 0, sin(frameCount / 30 + PI) * 95);\n  box(30);\n  pop();\n}\n</code>\n</div>"],"alt":"two colored 3D boxes move back and forth, rotating as mouse is dragged.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":175,"description":"<p>Sets an orthographic projection for the camera in a 3D sketch and defines a\nbox-shaped viewing frustum within which objects are seen. In this projection,\nall objects with the same dimension appear the same size, regardless of\nwhether they are near or far from the camera. The parameters to this\nfunction specify the viewing frustum where left and right are the minimum and\nmaximum x values, top and bottom are the minimum and maximum y values, and near\nand far are the minimum and maximum z values. If no parameters are given, the\ndefault is used: ortho(-width/2, width/2, -height/2, height/2).</p>\n","itemtype":"method","name":"ortho","params":[{"name":"left","description":"<p>camera frustum left plane</p>\n","type":"Number","optional":true},{"name":"right","description":"<p>camera frustum right plane</p>\n","type":"Number","optional":true},{"name":"bottom","description":"<p>camera frustum bottom plane</p>\n","type":"Number","optional":true},{"name":"top","description":"<p>camera frustum top plane</p>\n","type":"Number","optional":true},{"name":"near","description":"<p>camera frustum near plane</p>\n","type":"Number","optional":true},{"name":"far","description":"<p>camera frustum far plane</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n//drag the mouse to look around!\n//there's no vanishing point\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  ortho(-width / 2, width / 2, height / 2, -height / 2, 0, 500);\n}\nfunction draw() {\n  background(200);\n  orbitControl();\n  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</code>\n</div>"],"alt":"two 3D boxes move back and forth along same plane, rotating as mouse is dragged.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":231,"description":"<p>Sets a perspective matrix as defined by the parameters.</p>\n<p>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.</p>\n<p>Setting the frustum changes the perspective of the scene being rendered.\nThis can be achieved more simply in many cases by using\n<a href=\"https://p5js.org/reference/#/p5/perspective\">perspective()</a>.</p>\n","itemtype":"method","name":"frustum","params":[{"name":"left","description":"<p>camera frustum left plane</p>\n","type":"Number","optional":true},{"name":"right","description":"<p>camera frustum right plane</p>\n","type":"Number","optional":true},{"name":"bottom","description":"<p>camera frustum bottom plane</p>\n","type":"Number","optional":true},{"name":"top","description":"<p>camera frustum top plane</p>\n","type":"Number","optional":true},{"name":"near","description":"<p>camera frustum near plane</p>\n","type":"Number","optional":true},{"name":"far","description":"<p>camera frustum far plane</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  setAttributes('antialias', true);\n  frustum(-0.1, 0.1, -0.1, 0.1, 0.1, 200);\n}\nfunction draw() {\n  background(200);\n  orbitControl();\n  strokeWeight(10);\n  stroke(0, 0, 255);\n  noFill();\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</code>\n</div>"],"alt":"two 3D boxes move back and forth along same plane, rotating as mouse is dragged.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":297,"description":"<p>Creates a new <a href=\"#/p5.Camera\">p5.Camera</a> object and tells the\nrenderer to use that camera.\nReturns the p5.Camera object.</p>\n","itemtype":"method","name":"createCamera","return":{"description":"The newly created camera object.","type":"p5.Camera"},"example":["\n<div><code>\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  setCamera(camera);\n}\n\nfunction draw() {\n  camera.lookAt(0, 0, 0);\n  camera.setPosition(sin(frameCount / 60) * 200, 0, 100);\n  box(20);\n}\n</code></div>"],"alt":"An example that creates a camera and moves it around the box.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":426,"description":"<p>camera position value on x axis</p>\n","itemtype":"property","name":"eyeX","type":"Number","readonly":"","example":["\n\n<div class='norender'><code>\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}\n\nfunction draw() {\n  orbitControl();\n  box(10);\n  div.html('eyeX = ' + cam.eyeX);\n}\n</code></div>"],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":454,"description":"<p>camera position value on y axis</p>\n","itemtype":"property","name":"eyeY","type":"Number","readonly":"","example":["\n<div class='norender'><code>\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}\n\nfunction draw() {\n  orbitControl();\n  box(10);\n  div.html('eyeY = ' + cam.eyeY);\n}\n</code></div>"],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":481,"description":"<p>camera position value on z axis</p>\n","itemtype":"property","name":"eyeZ","type":"Number","readonly":"","example":["\n<div class='norender'><code>\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}\n\nfunction draw() {\n  orbitControl();\n  box(10);\n  div.html('eyeZ = ' + cam.eyeZ);\n}\n</code></div>"],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":508,"description":"<p>x coordinate representing center of the sketch</p>\n","itemtype":"property","name":"centerX","type":"Number","readonly":"","example":["\n<div class='norender'><code>\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}\n\nfunction draw() {\n  orbitControl();\n  box(10);\n}\n</code></div>"],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":536,"description":"<p>y coordinate representing center of the sketch</p>\n","itemtype":"property","name":"centerY","type":"Number","readonly":"","example":["\n<div class='norender'><code>\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}\n\nfunction draw() {\n  orbitControl();\n  box(10);\n}"],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":563,"description":"<p>z coordinate representing center of the sketch</p>\n","itemtype":"property","name":"centerZ","type":"Number","readonly":"","example":["\n<div class='norender'><code>\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}\n\nfunction draw() {\n  orbitControl();\n  box(10);\n}"],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":590,"description":"<p>x component of direction 'up' from camera</p>\n","itemtype":"property","name":"upX","type":"Number","readonly":"","example":["\n<div class='norender'><code>\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}\n</code></div>"],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":613,"description":"<p>y component of direction 'up' from camera</p>\n","itemtype":"property","name":"upY","type":"Number","readonly":"","example":["\n<div class='norender'><code>\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}\n</code></div>"],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":636,"description":"<p>z component of direction 'up' from camera</p>\n","itemtype":"property","name":"upZ","type":"Number","readonly":"","example":["\n<div class='norender'><code>\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}\n</code></div>"],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":663,"description":"<p>Sets a perspective projection for a p5.Camera object and sets parameters\nfor that projection according to <a href=\"#/p5/perspective\">perspective()</a>\nsyntax.</p>\n","itemtype":"method","name":"perspective","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":743,"description":"<p>Sets an orthographic projection for a p5.Camera object and sets parameters\nfor that projection according to <a href=\"#/p5/ortho\">ortho()</a> syntax.</p>\n","itemtype":"method","name":"ortho","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":802,"itemtype":"method","name":"frustum","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":907,"description":"<p>Panning rotates the camera view to the left and right.</p>\n","itemtype":"method","name":"pan","params":[{"name":"angle","description":"<p>amount to rotate camera in current\n<a href=\"#/p5/angleMode\">angleMode</a> units.\nGreater than 0 values rotate counterclockwise (to the left).</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet cam;\nlet delta = 0.01;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n  cam = createCamera();\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</code>\n</div>"],"alt":"camera view pans left and right across a series of rotating 3D boxes.","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":965,"description":"<p>Tilting rotates the camera view up and down.</p>\n","itemtype":"method","name":"tilt","params":[{"name":"angle","description":"<p>amount to rotate camera in current\n<a href=\"#/p5/angleMode\">angleMode</a> units.\nGreater than 0 values rotate counterclockwise (to the left).</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet cam;\nlet delta = 0.01;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n  cam = createCamera();\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</code>\n</div>"],"alt":"camera view tilts up and down across a series of rotating 3D boxes.","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1023,"description":"<p>Reorients the camera to look at a position in world space.</p>\n","itemtype":"method","name":"lookAt","params":[{"name":"x","description":"<p>x position of a point in world space</p>\n","type":"Number"},{"name":"y","description":"<p>y position of a point in world space</p>\n","type":"Number"},{"name":"z","description":"<p>z position of a point in world space</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet cam;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n  cam = createCamera();\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</code>\n</div>"],"alt":"camera view of rotating 3D cubes changes to look at a new random\npoint every second .","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1090,"description":"<p>Sets a camera's position and orientation.  This is equivalent to calling\n<a href=\"#/p5/camera\">camera()</a> on a p5.Camera object.</p>\n","itemtype":"method","name":"camera","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1175,"description":"<p>Move camera along its local axes while maintaining current camera orientation.</p>\n","itemtype":"method","name":"move","params":[{"name":"x","description":"<p>amount to move along camera's left-right axis</p>\n","type":"Number"},{"name":"y","description":"<p>amount to move along camera's up-down axis</p>\n","type":"Number"},{"name":"z","description":"<p>amount to move along camera's forward-backward axis</p>\n","type":"Number"}],"example":["\n<div>\n<code>\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}\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</code>\n</div>"],"alt":"camera view moves along a series of 3D boxes, maintaining the same\norientation throughout the move","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1247,"description":"<p>Set camera position in world-space while maintaining current camera\norientation.</p>\n","itemtype":"method","name":"setPosition","params":[{"name":"x","description":"<p>x position of a point in world space</p>\n","type":"Number"},{"name":"y","description":"<p>y position of a point in world space</p>\n","type":"Number"},{"name":"z","description":"<p>z position of a point in world space</p>\n","type":"Number"}],"example":["\n<div>\n<code>\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}\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</code>\n</div>"],"alt":"camera position changes as the user presses keys, altering view of a 3D box","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1512,"description":"<p>Sets rendererGL's current camera to a p5.Camera object.  Allows switching\nbetween multiple cameras.</p>\n","itemtype":"method","name":"setCamera","params":[{"name":"cam","description":"<p>p5.Camera object</p>\n","type":"p5.Camera"}],"example":["\n<div>\n<code>\nlet cam1, cam2;\nlet currentCamera;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n\n  cam1 = createCamera();\n  cam2 = createCamera();\n  cam2.setPosition(30, 0, 50);\n  cam2.lookAt(0, 0, 0);\n  cam2.ortho();\n\n  // set variable for previously active camera:\n  currentCamera = 1;\n}\n\nfunction draw() {\n  background(200);\n\n  // camera 1:\n  cam1.lookAt(0, 0, 0);\n  cam1.setPosition(sin(frameCount / 60) * 200, 0, 100);\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  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</code>\n</div>"],"alt":"Canvas switches between two camera views, each showing a series of spinning\n3D boxes.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Geometry.js","line":71,"description":"<p>computes faces for geometry objects based on the vertices.</p>\n","itemtype":"method","name":"computeFaces","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Geometry.js","line":114,"description":"<p>computes smooth normals per vertex as an average of each\nface.</p>\n","itemtype":"method","name":"computeNormals","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Geometry.js","line":153,"description":"<p>Averages the vertex normals. Used in curved\nsurfaces</p>\n","itemtype":"method","name":"averageNormals","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Geometry.js","line":174,"description":"<p>Averages pole normals.  Used in spherical primitives</p>\n","itemtype":"method","name":"averagePoleNormals","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Geometry.js","line":267,"description":"<p>Modifies all vertices to be centered within the range -100 to 100.</p>\n","itemtype":"method","name":"normalize","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.RendererGL.js","line":331,"description":"<p>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.</p>\n<p>Note that this will reinitialize the drawing context\nif called after the WebGL canvas is made.</p>\n<p>If an object is passed as the parameter, all attributes\nnot declared in the object will be set to defaults.</p>\n<p>The available attributes are:\n<br>\nalpha - indicates if the canvas contains an alpha buffer\ndefault is true</p>\n<p>depth - indicates whether the drawing buffer has a depth buffer\nof at least 16 bits - default is true</p>\n<p>stencil - indicates whether the drawing buffer has a stencil buffer\nof at least 8 bits</p>\n<p>antialias - indicates whether or not to perform anti-aliasing\ndefault is false (true in Safari)</p>\n<p>premultipliedAlpha - indicates that the page compositor will assume\nthe drawing buffer contains colors with pre-multiplied alpha\ndefault is false</p>\n<p>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</p>\n<p>perPixelLighting - if true, per-pixel lighting will be used in the\nlighting shader otherwise per-vertex lighting is used.\ndefault is true.</p>\n","itemtype":"method","name":"setAttributes","example":["\n<div>\n<code>\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</code>\n</div>\n<br>\nNow with the antialias attribute set to true.\n<br>\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"alt":"a rotating cube with smoother edges","class":"p5","module":"Rendering","submodule":"Rendering","overloads":[{"line":331,"params":[{"name":"key","description":"<p>Name of attribute</p>\n","type":"String"},{"name":"value","description":"<p>New value of named attribute</p>\n","type":"Boolean"}]},{"line":470,"params":[{"name":"obj","description":"<p>object with key-value pairs</p>\n","type":"Object"}]}]},{"file":"src/webgl/p5.Shader.js","line":296,"description":"<p>Wrapper around gl.uniform functions.\nAs we store uniform info in the shader we can use that\nto do type checking on the supplied data and call\nthe appropriate function.</p>\n","itemtype":"method","name":"setUniform","chainable":1,"params":[{"name":"uniformName","description":"<p>the name of the uniform in the\nshader program</p>\n","type":"String"},{"name":"data","description":"<p>the data to be associated\nwith that uniform; type varies (could be a single numerical value, array,\nmatrix, or texture / sampler reference)</p>\n","type":"Object|Number|Boolean|Number[]"}],"example":["\n<div modernizr='webgl'>\n<code>\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\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</code>\n</div>"],"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":"Lights, Camera","submodule":"Material"},{"file":"lib/addons/p5.sound.js","line":1,"class":"p5.sound","module":"Lights, Camera"},{"file":"lib/addons/p5.sound.js","line":52,"description":"<p>p5.sound \n<a href=\"https://p5js.org/reference/#/libraries/p5.sound\">https://p5js.org/reference/#/libraries/p5.sound</a></p>\n<p>From the Processing Foundation and contributors\n<a href=\"https://github.com/processing/p5.js-sound/graphs/contributors\">https://github.com/processing/p5.js-sound/graphs/contributors</a></p>\n<p>MIT License (MIT)\n<a href=\"https://github.com/processing/p5.js-sound/blob/master/LICENSE\">https://github.com/processing/p5.js-sound/blob/master/LICENSE</a></p>\n<p>Some of the many audio libraries & resources that inspire p5.sound:</p>\n<ul>\n<li><p>TONE.js (c) Yotam Mann. Licensed under The MIT License (MIT). <a href=\"https://github.com/TONEnoTONE/Tone.js\">https://github.com/TONEnoTONE/Tone.js</a></p>\n</li>\n<li><p>buzz.js (c) Jay Salvat. Licensed under The MIT License (MIT). <a href=\"http://buzz.jaysalvat.com/\">http://buzz.jaysalvat.com/</a></p>\n</li>\n<li><p>Boris Smus Web Audio API book, 2013. Licensed under the Apache License <a href=\"http://www.apache.org/licenses/LICENSE-2.0\">http://www.apache.org/licenses/LICENSE-2.0</a></p>\n</li>\n<li><p>wavesurfer.js <a href=\"https://github.com/katspaugh/wavesurfer.js\">https://github.com/katspaugh/wavesurfer.js</a></p>\n</li>\n<li><p>Web Audio Components by Jordan Santell <a href=\"https://github.com/web-audio-components\">https://github.com/web-audio-components</a></p>\n</li>\n<li><p>Wilm Thoben's Sound library for Processing <a href=\"https://github.com/processing/processing/tree/master/java/libraries/sound\">https://github.com/processing/processing/tree/master/java/libraries/sound</a></p>\n<p>Web Audio API: <a href=\"http://w3.org/TR/webaudio/\">http://w3.org/TR/webaudio/</a></p>\n</li>\n</ul>\n","class":"p5.sound","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":166,"description":"<p>Returns a number representing the master amplitude (volume) for sound\nin this sketch.</p>\n","itemtype":"method","name":"getMasterVolume","return":{"description":"Master amplitude (volume) for sound in this sketch.\n                 Should be between 0.0 (silence) and 1.0.","type":"Number"},"class":"p5.sound","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":178,"description":"<p>Scale the output of all sound in this sketch</p>\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 <code>rampTime</code> parameter. For more\ncomplex fades, see the Envelope class.\n\n<p>Alternately, you can pass in a signal source such as an\noscillator to modulate the amplitude with an audio signal.</p>\n<p><b>How This Works</b>: 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.</p>\n\n<p>If no value is provided, returns a Web Audio API Gain Node</p>","itemtype":"method","name":"masterVolume","params":[{"name":"volume","description":"<p>Volume (amplitude) between 0.0\n                                   and 1.0 or modulating signal/oscillator</p>\n","type":"Number|Object"},{"name":"rampTime","description":"<p>Fade for t seconds</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>Schedule this event to happen at\n                               t seconds in the future</p>\n","type":"Number","optional":true}],"class":"p5.sound","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":221,"description":"<p><code>p5.soundOut</code> is the p5.sound master output. It sends output to\nthe destination of this window's web audio context. It contains\nWeb Audio API nodes including a dyanmicsCompressor (<code>.limiter</code>),\nand Gain Nodes for <code>.input</code> and <code>.output</code>.</p>\n","itemtype":"property","name":"soundOut","type":"Object","class":"p5.sound","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":300,"description":"<p>In classes that extend\np5.Effect, connect effect nodes\nto the wet parameter</p>\n","class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":316,"description":"<p>Set the output volume of the filter.</p>\n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"<p>amplitude between 0 and 1.0</p>\n","type":"Number","optional":true},{"name":"rampTime","description":"<p>create a fade that lasts until rampTime</p>\n","type":"Number","optional":true},{"name":"tFromNow","description":"<p>schedule this event to happen in tFromNow seconds</p>\n","type":"Number","optional":true}],"class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":336,"description":"<p>Link effects together in a chain\nExample usage: filter.chain(reverb, delay, panner);\nMay be used with an open-ended number of arguments</p>\n","itemtype":"method","name":"chain","params":[{"name":"arguments","description":"<p>Chain together multiple sound objects</p>\n","type":"Object","optional":true}],"class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":358,"description":"<p>Adjust the dry/wet value.</p>\n","itemtype":"method","name":"drywet","params":[{"name":"fade","description":"<p>The desired drywet value (0 - 1.0)</p>\n","type":"Number","optional":true}],"class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":374,"description":"<p>Send output to a p5.js-sound, Web Audio Node, or use signal to\ncontrol an AudioParam</p>\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":388,"description":"<p>Disconnect all output.</p>\n","itemtype":"method","name":"disconnect","class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":451,"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":455,"description":"<p>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.</p>\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":470,"description":"<p>Returns the closest MIDI note value for\na given frequency.</p>\n","itemtype":"method","name":"freqToMidi","params":[{"name":"frequency","description":"<p>A freqeuncy, for example, the \"A\"\n                           above Middle C is 440Hz</p>\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":486,"description":"<p>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.</p>\n","itemtype":"method","name":"midiToFreq","params":[{"name":"midiNote","description":"<p>The number of a MIDI note</p>\n","type":"Number"}],"return":{"description":"Frequency value of the given MIDI note","type":"Number"},"example":["\n<div><code>\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</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":570,"description":"<p>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.\n<a href=\"http://media.io/\">Here</a> is a free online file\nconverter.</p>\n","itemtype":"method","name":"soundFormats","params":[{"name":"formats","description":"<p>i.e. 'mp3', 'wav', 'ogg'</p>\n","type":"String","optional":true,"multiple":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":688,"description":"<p>Used by Osc and Envelope to chain signal math</p>\n","class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":967,"description":"<p>The p5.Filter is built with a\n<a href=\"http://www.w3.org/TR/webaudio/#BiquadFilterNode\">\nWeb Audio BiquadFilter Node</a>.</p>\n","itemtype":"property","name":"biquadFilter","type":"DelayNode","class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":989,"description":"<p>Filter an audio signal according to a set\nof filter parameters.</p>\n","itemtype":"method","name":"process","params":[{"name":"Signal","description":"<p>An object that outputs audio</p>\n","type":"Object"},{"name":"freq","description":"<p>Frequency in Hz, from 10 to 22050</p>\n","type":"Number","optional":true},{"name":"res","description":"<p>Resonance/Width of the filter frequency\n                      from 0.001 to 1000</p>\n","type":"Number","optional":true}],"class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1004,"description":"<p>Set the frequency and the resonance of the filter.</p>\n","itemtype":"method","name":"set","params":[{"name":"freq","description":"<p>Frequency in Hz, from 10 to 22050</p>\n","type":"Number","optional":true},{"name":"res","description":"<p>Resonance (Q) from 0.001 to 1000</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1024,"description":"<p>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).</p>\n","itemtype":"method","name":"freq","params":[{"name":"freq","description":"<p>Filter Frequency</p>\n","type":"Number"},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\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":1053,"description":"<p>Controls either width of a bandpass frequency,\nor the resonance of a low/highpass cutoff frequency.</p>\n","itemtype":"method","name":"res","params":[{"name":"res","description":"<p>Resonance/Width of filter freq\n                     from 0.001 to 1000</p>\n","type":"Number"},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\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":1079,"description":"<p>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.</p>\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":1104,"description":"<p>Toggle function. Switches between the specified type and allpass</p>\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":1123,"description":"<p>Set the type of a p5.Filter. Possible types include:\n\"lowpass\" (default), \"highpass\", \"bandpass\",\n\"lowshelf\", \"highshelf\", \"peaking\", \"notch\",\n\"allpass\".</p>\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":1218,"description":"<p>Returns the Audio Context for this sketch. Useful for users\nwho would like to dig deeper into the <a target='_blank' href=\n'http://webaudio.github.io/web-audio-api/'>Web Audio API\n</a>.</p>\n\n<p>Some browsers require users to startAudioContext\nwith a user gesture, such as touchStarted in the example below.</p>","itemtype":"method","name":"getAudioContext","return":{"description":"AudioContext for this sketch","type":"Object"},"example":["\n<div><code>\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</div></code>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1257,"description":"<p>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\n<a href=\"https://goo.gl/7K7WLu\" title=\"Google Chrome's autoplay\npolicy\">Google Chrome</a>, which create the Web Audio API's\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/AudioContext\"\ntitle=\"Audio Context @ MDN\">Audio Context</a>\nin a suspended state.</p>\n\n<p>In these browser-specific policies, sound will not play until a user\ninteraction event (i.e. <code>mousePressed()</code>) explicitly resumes\nthe AudioContext, or starts an audio node. This can be accomplished by\ncalling <code>start()</code> on a <code>p5.Oscillator</code>,\n<code> play()</code> on a <code>p5.SoundFile</code>, or simply\n<code>userStartAudio()</code>.</p>\n\n<p><code>userStartAudio()</code> 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 <code>mousePressed()</code> as in the\nexample below. This method utilizes\n<a href=\"https://github.com/tambien/StartAudioContext\">StartAudioContext\n</a>, a library by Yotam Mann (MIT Licence, 2016).</p>","params":[{"name":"element(s)","description":"<p>This argument can be an Element,\n                              Selector String, NodeList, p5.Element,\n                              jQuery Element, or an Array of any of those.</p>\n","type":"Element|Array","optional":true},{"name":"callback","description":"<p>Callback to invoke when the AudioContext\n                              has started</p>\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<div><code>\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</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1477,"description":"<p>Start an oscillator.</p>\n<p>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: <code>userStartAudio()</code>.</p>\n","itemtype":"method","name":"start","params":[{"name":"time","description":"<p>startTime in seconds from now.</p>\n","type":"Number","optional":true},{"name":"frequency","description":"<p>frequency in Hz.</p>\n","type":"Number","optional":true}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1525,"description":"<p>Stop an oscillator. Accepts an optional parameter\nto determine how long (in seconds from now) until the\noscillator stops.</p>\n","itemtype":"method","name":"stop","params":[{"name":"secondsFromNow","description":"<p>Time, in seconds from now.</p>\n","type":"Number"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1544,"description":"<p>Set the amplitude between 0 and 1.0. Or, pass in an object\nsuch as an oscillator to modulate amplitude with an audio signal.</p>\n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"<p>between 0 and 1.0\n                            or a modulating signal/oscillator</p>\n","type":"Number|Object"},{"name":"rampTime","description":"<p>create a fade that lasts rampTime</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\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":1584,"description":"<p>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.</p>\n","itemtype":"method","name":"freq","params":[{"name":"Frequency","description":"<p>Frequency in Hz\n                                      or modulating signal/oscillator</p>\n","type":"Number|Object"},{"name":"rampTime","description":"<p>Ramp time (in seconds)</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>Schedule this event to happen\n                                 at x seconds from now</p>\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<div><code>\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</code></div>"],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1662,"description":"<p>Set type to 'sine', 'triangle', 'sawtooth' or 'square'.</p>\n","itemtype":"method","name":"setType","params":[{"name":"type","description":"<p>'sine', 'triangle', 'sawtooth' or 'square'.</p>\n","type":"String"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1678,"description":"<p>Connect to a p5.sound / Web Audio object.</p>\n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"<p>A p5.sound or Web Audio object</p>\n","type":"Object"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1698,"description":"<p>Disconnect all outputs</p>\n","itemtype":"method","name":"disconnect","class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1721,"description":"<p>Pan between Left (-1) and Right (1)</p>\n","itemtype":"method","name":"pan","params":[{"name":"panning","description":"<p>Number between -1 and 1</p>\n","type":"Number"},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1759,"description":"<p>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.</p>\n","itemtype":"method","name":"phase","params":[{"name":"phase","description":"<p>float between 0.0 and 1.0</p>\n","type":"Number"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1818,"description":"<p>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.</p>\n","itemtype":"method","name":"add","params":[{"name":"number","description":"<p>Constant number to add</p>\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":1838,"description":"<p>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.</p>\n","itemtype":"method","name":"mult","params":[{"name":"number","description":"<p>Constant number to multiply</p>\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":1857,"description":"<p>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.</p>\n","itemtype":"method","name":"scale","params":[{"name":"inMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"inMax","description":"<p>input range maximum</p>\n","type":"Number"},{"name":"outMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"outMax","description":"<p>input range maximum</p>\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":2067,"description":"<p>Play tells the MonoSynth to start playing a note. This method schedules\nthe calling of .triggerAttack and .triggerRelease.</p>\n","itemtype":"method","name":"play","params":[{"name":"note","description":"<p>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 <a href = \"https://github.com/Tonejs/Tone.js/wiki/Instruments\">\n                               Tone</a>. Defaults to 440 hz.</p>\n","type":"String | Number"},{"name":"velocity","description":"<p>velocity of the note to play (ranging from 0 to 1)</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time from now (in seconds) at which to play</p>\n","type":"Number","optional":true},{"name":"sustainTime","description":"<p>time to sustain before releasing the envelope. Defaults to 0.15 seconds.</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>\n"],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2116,"description":"<p>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.</p>\n","params":[{"name":"note","description":"<p>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 <a href = \"https://github.com/Tonejs/Tone.js/wiki/Instruments\">\n                               Tone</a>. Defaults to 440 hz</p>\n","type":"String | Number"},{"name":"velocity","description":"<p>velocity of the note to play (ranging from 0 to 1)</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time from now (in seconds) at which to play</p>\n","type":"Number","optional":true}],"itemtype":"method","name":"triggerAttack","example":["\n<div><code>\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</code></div>"],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2162,"description":"<p>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.</p>\n","params":[{"name":"secondsFromNow","description":"<p>time to trigger the release</p>\n","type":"Number"}],"itemtype":"method","name":"triggerRelease","example":["\n<div><code>\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</code></div>"],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2199,"description":"<p>Set values like a traditional\n<a href=\"https://en.wikipedia.org/wiki/Synthesizer#/media/File:ADSR_parameter.svg\">\nADSR envelope\n</a>.</p>\n","itemtype":"method","name":"setADSR","params":[{"name":"attackTime","description":"<p>Time (in seconds before envelope\n                              reaches Attack Level</p>\n","type":"Number"},{"name":"decayTime","description":"<p>Time (in seconds) before envelope\n                              reaches Decay/Sustain Level</p>\n","type":"Number","optional":true},{"name":"susRatio","description":"<p>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 <code>setRange</code>),\n                              then decayLevel would increase proportionally, to become 0.5.</p>\n","type":"Number","optional":true},{"name":"releaseTime","description":"<p>Time in seconds from now (defaults to 0)</p>\n","type":"Number","optional":true}],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2226,"description":"<p>Getters and Setters</p>\n","itemtype":"property","name":"attack","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2232,"itemtype":"property","name":"decay","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2237,"itemtype":"property","name":"sustain","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2242,"itemtype":"property","name":"release","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2282,"description":"<p>MonoSynth amp</p>\n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"<p>desired volume</p>\n","type":"Number"},{"name":"rampTime","description":"<p>Time to reach new volume</p>\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":2300,"description":"<p>Connect to a p5.sound / Web Audio object.</p>\n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"<p>A p5.sound or Web Audio object</p>\n","type":"Object"}],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2313,"description":"<p>Disconnect all outputs</p>\n","itemtype":"method","name":"disconnect","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2326,"description":"<p>Get rid of the MonoSynth and free up its resources / memory.</p>\n","itemtype":"method","name":"dispose","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2380,"description":"<p>Connect to p5 objects or Web Audio Nodes</p>\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":2392,"description":"<p>Disconnect from soundOut</p>\n","itemtype":"method","name":"disconnect","class":"p5.AudioVoice","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2474,"description":"<p>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.</p>\n","itemtype":"property","name":"notes","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2487,"description":"<p>A PolySynth must have at least 1 voice, defaults to 8</p>\n","itemtype":"property","name":"polyvalue","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2493,"description":"<p>Monosynth that generates the sound for each note that is triggered. The\np5.PolySynth defaults to using the p5.MonoSynth as its voice.</p>\n","itemtype":"property","name":"AudioVoice","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2530,"description":"<p>Play a note by triggering noteAttack and noteRelease with sustain time</p>\n","itemtype":"method","name":"play","params":[{"name":"note","description":"<p>midi note to play (ranging from 0 to 127 - 60 being a middle C)</p>\n","type":"Number","optional":true},{"name":"velocity","description":"<p>velocity of the note to play (ranging from 0 to 1)</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time from now (in seconds) at which to play</p>\n","type":"Number","optional":true},{"name":"sustainTime","description":"<p>time to sustain before releasing the envelope</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2578,"description":"<p>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.</p>\n","itemtype":"method","name":"noteADSR","params":[{"name":"note","description":"<p>Midi note on which ADSR should be set.</p>\n","type":"Number","optional":true},{"name":"attackTime","description":"<p>Time (in seconds before envelope\n                              reaches Attack Level</p>\n","type":"Number","optional":true},{"name":"decayTime","description":"<p>Time (in seconds) before envelope\n                              reaches Decay/Sustain Level</p>\n","type":"Number","optional":true},{"name":"susRatio","description":"<p>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 <code>setRange</code>),\n                              then decayLevel would increase proportionally, to become 0.5.</p>\n","type":"Number","optional":true},{"name":"releaseTime","description":"<p>Time in seconds from now (defaults to 0)</p>\n","type":"Number","optional":true}],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2609,"description":"<p>Set the PolySynths global envelope. This method modifies the envelopes of each\nmonosynth so that all notes are played with this envelope.</p>\n","itemtype":"method","name":"setADSR","params":[{"name":"attackTime","description":"<p>Time (in seconds before envelope\n                               reaches Attack Level</p>\n","type":"Number","optional":true},{"name":"decayTime","description":"<p>Time (in seconds) before envelope\n                               reaches Decay/Sustain Level</p>\n","type":"Number","optional":true},{"name":"susRatio","description":"<p>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 <code>setRange</code>),\n                               then decayLevel would increase proportionally, to become 0.5.</p>\n","type":"Number","optional":true},{"name":"releaseTime","description":"<p>Time in seconds from now (defaults to 0)</p>\n","type":"Number","optional":true}],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2636,"description":"<p>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.</p>\n","itemtype":"method","name":"noteAttack","params":[{"name":"note","description":"<p>midi note on which attack should be triggered.</p>\n","type":"Number","optional":true},{"name":"velocity","description":"<p>velocity of the note to play (ranging from 0 to 1)/</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time from now (in seconds)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2746,"description":"<p>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.</p>\n","itemtype":"method","name":"noteRelease","params":[{"name":"note","description":"<p>midi note on which attack should be triggered.\n                                  If no value is provided, all notes will be released.</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time to trigger the release</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>\n"],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2829,"description":"<p>Connect to a p5.sound / Web Audio object.</p>\n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"<p>A p5.sound or Web Audio object</p>\n","type":"Object"}],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2842,"description":"<p>Disconnect all outputs</p>\n","itemtype":"method","name":"disconnect","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2855,"description":"<p>Get rid of the MonoSynth and free up its resources / memory.</p>\n","itemtype":"method","name":"dispose","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2969,"description":"<p>This module has shims</p>\n","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3105,"description":"<p>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</p>\n","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3492,"description":"<p>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<a href=\"https://github.com/processing/p5.js/wiki/Local-server\">\nlocal server</a> is recommended when loading external files.</p>\n","itemtype":"method","name":"loadSound","params":[{"name":"path","description":"<p>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.</p>\n","type":"String|Array"},{"name":"successCallback","description":"<p>Name of a function to call once file loads</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>Name of a function to call if there is\n                                    an error loading the file.</p>\n","type":"Function","optional":true},{"name":"whileLoading","description":"<p>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.</p>\n","type":"Function","optional":true}],"return":{"description":"Returns a p5.SoundFile","type":"SoundFile"},"example":["\n<div><code>\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</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3672,"description":"<p>Returns true if the sound file finished loading successfully.</p>\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":3688,"description":"<p>Play the p5.SoundFile</p>\n","itemtype":"method","name":"play","params":[{"name":"startTime","description":"<p>(optional) schedule playback to start (in seconds from now).</p>\n","type":"Number","optional":true},{"name":"rate","description":"<p>(optional) playback rate</p>\n","type":"Number","optional":true},{"name":"amp","description":"<p>(optional) amplitude (volume)\n                                    of playback</p>\n","type":"Number","optional":true},{"name":"cueStart","description":"<p>(optional) cue start time in seconds</p>\n","type":"Number","optional":true},{"name":"duration","description":"<p>(optional) duration of playback in seconds</p>\n","type":"Number","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3795,"description":"<p>p5.SoundFile has two play modes: <code>restart</code> and\n<code>sustain</code>. 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.</p>\n","itemtype":"method","name":"playMode","params":[{"name":"str","description":"<p>'restart' or 'sustain' or 'untilDone'</p>\n","type":"String"}],"example":["\n<div><code>\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 </code></div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3854,"description":"<p>Pauses a file that is currently playing. If the file is not\nplaying, then nothing will happen.</p>\n<p>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().</p>\n","itemtype":"method","name":"pause","params":[{"name":"startTime","description":"<p>(optional) schedule event to occur\n                             seconds from now</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code>\n</div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3911,"description":"<p>Loop the p5.SoundFile. Accepts optional parameters to set the\nplayback rate, playback volume, loopStart, loopEnd.</p>\n","itemtype":"method","name":"loop","params":[{"name":"startTime","description":"<p>(optional) schedule event to occur\n                            seconds from now</p>\n","type":"Number","optional":true},{"name":"rate","description":"<p>(optional) playback rate</p>\n","type":"Number","optional":true},{"name":"amp","description":"<p>(optional) playback volume</p>\n","type":"Number","optional":true},{"name":"cueLoopStart","description":"<p>(optional) startTime in seconds</p>\n","type":"Number","optional":true},{"name":"duration","description":"<p>(optional) loop duration in seconds</p>\n","type":"Number","optional":true}],"example":["\n <div><code>\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 </code>\n </div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3955,"description":"<p>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.</p>\n","itemtype":"method","name":"setLoop","params":[{"name":"Boolean","description":"<p>set looping to true or false</p>\n","type":"Boolean"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3980,"description":"<p>Returns 'true' if a p5.SoundFile is currently looping and playing, 'false' if not.</p>\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":4000,"description":"<p>Returns true if a p5.SoundFile is playing, false if not (i.e.\npaused or stopped).</p>\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":4013,"description":"<p>Returns true if a p5.SoundFile is paused, false if not (i.e.\nplaying or stopped).</p>\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":4026,"description":"<p>Stop soundfile playback.</p>\n","itemtype":"method","name":"stop","params":[{"name":"startTime","description":"<p>(optional) schedule event to occur\n                            in seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4083,"description":"<p>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 <code>rampTime</code> parameter. For more\ncomplex fades, see the Envelope class.</p>\n<p>Alternately, you can pass in a signal source such as an\noscillator to modulate the amplitude with an audio signal.</p>\n","itemtype":"method","name":"setVolume","params":[{"name":"volume","description":"<p>Volume (amplitude) between 0.0\n                                   and 1.0 or modulating signal/oscillator</p>\n","type":"Number|Object"},{"name":"rampTime","description":"<p>Fade for t seconds</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>Schedule this event to happen at\n                               t seconds in the future</p>\n","type":"Number","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4128,"description":"<p>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).</p>\n","itemtype":"method","name":"pan","params":[{"name":"panValue","description":"<p>Set the stereo panner</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                                seconds from now</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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 </div></code>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4171,"description":"<p>Returns the current stereo pan position (-1.0 to 1.0)</p>\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":4185,"description":"<p>Set the playback rate of a sound file. Will change the speed and the pitch.\nValues less than zero will reverse the audio buffer.</p>\n","itemtype":"method","name":"rate","params":[{"name":"playbackRate","description":"<p>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.</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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 </code>\n </div>\n"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4275,"description":"<p>Returns the duration of a sound file in seconds.</p>\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":4291,"description":"<p>Return the current position of the p5.SoundFile playhead, in seconds.\nTime is relative to the normal buffer direction, so if <code>reverseBuffer</code>\nhas been called, currentTime will count backwards.</p>\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":4305,"description":"<p>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 <code>play</code> or <code>loop</code> methods.</p>\n","itemtype":"method","name":"jump","params":[{"name":"cueTime","description":"<p>cueTime of the soundFile in seconds.</p>\n","type":"Number"},{"name":"duration","description":"<p>duration in seconds.</p>\n","type":"Number"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4336,"description":"<p>Return the number of channels in a sound file.\nFor example, Mono = 1, Stereo = 2.</p>\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":4349,"description":"<p>Return the sample rate of the sound file.</p>\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":4361,"description":"<p>Return the number of samples in a sound file.\nEqual to sampleRate * duration.</p>\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":4374,"description":"<p>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.</p>\n<p>Inspired by Wavesurfer.js.</p>\n","itemtype":"method","name":"getPeaks","params":[{"name":"length","description":"<p>length is the size of the returned array.\n                         Larger length results in more precision.\n                         Defaults to 5*width of the browser window.</p>\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":4435,"description":"<p>Reverses the p5.SoundFile's buffer source.\nPlayback must be handled separately (see example).</p>\n","itemtype":"method","name":"reverseBuffer","example":["\n<div><code>\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 </code>\n </div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4488,"description":"<p>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.</p>\n","itemtype":"method","name":"onended","params":[{"name":"callback","description":"<p>function to call when the\n                            soundfile has ended.</p>\n","type":"Function"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4553,"description":"<p>Connects the output of a p5sound object to input of another\np5.sound object. For example, you may connect a p5.SoundFile to an\nFFT or an Effect. If no parameter is given, it will connect to\nthe master output. Most p5sound objects connect to the master\noutput when they are created.</p>\n","itemtype":"method","name":"connect","params":[{"name":"object","description":"<p>Audio object that accepts an input</p>\n","type":"Object","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4577,"description":"<p>Disconnects the output of this p5sound object.</p>\n","itemtype":"method","name":"disconnect","class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4590,"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4597,"description":"<p>Reset the source for this SoundFile to a\nnew path (URL).</p>\n","itemtype":"method","name":"setPath","params":[{"name":"path","description":"<p>path to audio file</p>\n","type":"String"},{"name":"callback","description":"<p>Callback</p>\n","type":"Function"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4614,"description":"<p>Replace the current Audio Buffer with a new Buffer.</p>\n","itemtype":"method","name":"setBuffer","params":[{"name":"buf","description":"<p>Array of Float32 Array(s). 2 Float32 Arrays\n                   will create a stereo source. 1 will create\n                   a mono source.</p>\n","type":"Array"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4708,"description":"<p>processPeaks returns an array of timestamps where it thinks there is a beat.</p>\n<p>This is an asynchronous function that processes the soundfile in an offline audio context,\nand sends the results to your callback function.</p>\n<p>The process involves running the soundfile through a lowpass filter, and finding all of the\npeaks above the initial threshold. If the total number of peaks are below the minimum number of peaks,\nit decreases the threshold and re-runs the analysis until either minPeaks or minThreshold are reached.</p>\n","itemtype":"method","name":"processPeaks","params":[{"name":"callback","description":"<p>a function to call once this data is returned</p>\n","type":"Function"},{"name":"initThreshold","description":"<p>initial threshold defaults to 0.9</p>\n","type":"Number","optional":true},{"name":"minThreshold","description":"<p>minimum threshold defaults to 0.22</p>\n","type":"Number","optional":true},{"name":"minPeaks","description":"<p>minimum number of peaks defaults to 200</p>\n","type":"Number","optional":true}],"return":{"description":"Array of timestamped peaks","type":"Array"},"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4929,"description":"<p>Schedule events to trigger every time a MediaElement\n(audio/video) reaches a playback cue point.</p>\n<p>Accepts a callback function, a time (in seconds) at which to trigger\nthe callback, and an optional parameter for the callback.</p>\n<p>Time will be passed as the first parameter to the callback function,\nand param will be the second parameter.</p>\n","itemtype":"method","name":"addCue","params":[{"name":"time","description":"<p>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.</p>\n","type":"Number"},{"name":"callback","description":"<p>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.</p>\n","type":"Function"},{"name":"value","description":"<p>An object to be passed as the\n                           second parameter to the\n                           callback function.</p>\n","type":"Object","optional":true}],"return":{"description":"id ID of this cue,\n                    useful for removeCue(id)","type":"Number"},"example":["\n<div><code>\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</code></div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4999,"description":"<p>Remove a callback based on its ID. The ID is returned by the\naddCue method.</p>\n","itemtype":"method","name":"removeCue","params":[{"name":"id","description":"<p>ID of the cue, as returned by addCue</p>\n","type":"Number"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5025,"description":"<p>Remove all of the callbacks that had originally been scheduled\nvia the addCue method.</p>\n","itemtype":"method","name":"clearCues","class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5054,"description":"<p>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\n<a href=\"/docs/reference/#/p5.SoundFile/getBlob\">getBlob</a></p>\n","itemtype":"method","name":"save","params":[{"name":"fileName","description":"<p>name of the resulting .wav file.</p>\n","type":"String","optional":true}],"example":["\n <div><code>\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</code></div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5085,"description":"<p>This method is useful for sending a SoundFile to a server. It returns the\n.wav-encoded audio data as a \"<a target=\"_blank\" title=\"Blob reference at\nMDN\" href=\"https://developer.mozilla.org/en-US/docs/Web/API/Blob\">Blob</a>\".\nA Blob is a file-like data object that can be uploaded to a server\nwith an <a href=\"/docs/reference/#/p5/httpDo\">http</a> request. We'll\nuse the <code>httpDo</code> options object to send a POST request with some\nspecific options: we encode the request as <code>multipart/form-data</code>,\nand attach the blob as one of the form values using <code>FormData</code>.</p>\n","itemtype":"method","name":"getBlob","return":{"description":"A file-like data object","type":"Blob"},"example":["\n <div><code>\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 `<Audio>` Element accepts Object URL's\n   createAudio(blobUrl).showControls();\n\n   createDiv();\n\n   // The ObjectURL exists as long as this tab is open\n   let input = createInput(blobUrl);\n   input.attribute('readonly', true);\n   input.mouseClicked(function() { input.elt.select() });\n }\n\n</code></div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5276,"description":"<p>Connects to the p5sound instance (master output) by default.\nOptionally, you can pass in a specific source (i.e. a soundfile).</p>\n","itemtype":"method","name":"setInput","params":[{"name":"snd","description":"<p>set the sound source\n                                     (optional, defaults to\n                                     master output)</p>\n","type":"SoundObject|undefined","optional":true},{"name":"smoothing","description":"<p>a range between 0.0 and 1.0\n                                      to smooth amplitude readings</p>\n","type":"Number|undefined","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5367,"description":"<p>Returns a single Amplitude reading at the moment it is called.\nFor continuous readings, run in the draw loop.</p>\n","itemtype":"method","name":"getLevel","params":[{"name":"channel","description":"<p>Optionally return only channel 0 (left) or 1 (right)</p>\n","type":"Number","optional":true}],"return":{"description":"Amplitude as a number between 0.0 and 1.0","type":"Number"},"example":["\n<div><code>\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</code></div>"],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5421,"description":"<p>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.</p>\n","itemtype":"method","name":"toggleNormalize","params":[{"name":"boolean","description":"<p>set normalize to true (1) or false (0)</p>\n","type":"Boolean","optional":true}],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5449,"description":"<p>Smooth Amplitude analysis by averaging with the last analysis\nframe. Off by default.</p>\n","itemtype":"method","name":"smooth","params":[{"name":"set","description":"<p>smoothing from 0.0 <= 1</p>\n","type":"Number"}],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5625,"description":"<p>Set the input source for the FFT analysis. If no source is\nprovided, FFT will analyze all sound in the sketch.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"source","description":"<p>p5.sound object (or web audio API source node)</p>\n","type":"Object","optional":true}],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5648,"description":"<p>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.</p>\n","itemtype":"method","name":"waveform","params":[{"name":"bins","description":"<p>Must be a power of two between\n                          16 and 1024. Defaults to 1024.</p>\n","type":"Number","optional":true},{"name":"precision","description":"<p>If any value is provided, will return results\n                            in a Float32 Array which is more precise\n                            than a regular array.</p>\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":5699,"description":"<p>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\n<code>getEnergy()</code>.</p>\n","itemtype":"method","name":"analyze","params":[{"name":"bins","description":"<p>Must be a power of two between\n                           16 and 1024. Defaults to 1024.</p>\n","type":"Number","optional":true},{"name":"scale","description":"<p>If \"dB,\" returns decibel\n                           float measurements between\n                           -140 and 0 (max).\n                           Otherwise returns integers from 0-255.</p>\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<div><code>\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</code></div>\n\n"],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5795,"description":"<p>Returns the amount of energy (volume) at a specific\n<a href=\"https://en.wikipedia.org/wiki/Audio_frequency\" target=\"_blank\">\nfrequency</a>, 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).\n<em>NOTE: analyze() must be called prior to getEnergy(). Analyze()\ntells the FFT to analyze frequency data, and getEnergy() uses\nthe results determine the value at a specific frequency or\nrange of frequencies.</em></p></p>\n","itemtype":"method","name":"getEnergy","params":[{"name":"frequency1","description":"<p>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.</p>\n","type":"Number|String"},{"name":"frequency2","description":"<p>If a second frequency is given,\n                              will return average amount of\n                              energy that exists between the\n                              two frequencies.</p>\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":5882,"description":"<p>Returns the\n<a href=\"http://en.wikipedia.org/wiki/Spectral_centroid\" target=\"_blank\">\nspectral centroid</a> of the input signal.\n<em>NOTE: analyze() must be called prior to getCentroid(). Analyze()\ntells the FFT to analyze frequency data, and getCentroid() uses\nthe results determine the spectral centroid.</em></p></p>\n","itemtype":"method","name":"getCentroid","return":{"description":"Spectral Centroid Frequency   Frequency of the spectral centroid in Hz.","type":"Number"},"example":["\n<div><code>\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 </code></div>"],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5968,"description":"<p>Smooth FFT analysis by averaging with the last analysis frame.</p>\n","itemtype":"method","name":"smooth","params":[{"name":"smoothing","description":"<p>0.0 < smoothing < 1.0.\n                             Defaults to 0.8.</p>\n","type":"Number"}],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5994,"description":"<p>Returns an array of average amplitude values for a given number\nof frequency bands split equally. N defaults to 16.\n<em>NOTE: 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.</em></p></p>\n","itemtype":"method","name":"linAverages","params":[{"name":"N","description":"<p>Number of returned frequency groups</p>\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":6028,"description":"<p>Returns an array of average amplitude values of the spectrum, for a given\nset of <a href=\"https://en.wikipedia.org/wiki/Octave_band\" target=\"_blank\">\nOctave Bands</a>\n<em>NOTE: 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.</em></p></p>\n","itemtype":"method","name":"logAverages","params":[{"name":"octaveBands","description":"<p>Array of Octave Bands objects for grouping</p>\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":6063,"description":"<p>Calculates and Returns the 1/N\n<a href=\"https://en.wikipedia.org/wiki/Octave_band\" target=\"_blank\">Octave Bands</a>\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.</p>\n","itemtype":"method","name":"getOctaveBands","params":[{"name":"N","description":"<p>Specifies the 1/N type of generated octave bands</p>\n","type":"Number"},{"name":"fCtr0","description":"<p>Minimum central frequency for the lowest band</p>\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":6209,"description":"<p>Fade to value, for smooth transitions</p>\n","itemtype":"method","name":"fade","params":[{"name":"value","description":"<p>Value to set this signal</p>\n","type":"Number"},{"name":"secondsFromNow","description":"<p>Length of fade, in seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6223,"description":"<p>Connect a p5.sound object or Web Audio node to this\np5.Signal so that its amplitude values can be scaled.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"input","description":"","type":"Object"}],"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6240,"description":"<p>Add a constant value to this audio signal,\nand return the resulting audio signal. Does\nnot change the value of the original signal,\ninstead it returns a new p5.SignalAdd.</p>\n","itemtype":"method","name":"add","params":[{"name":"number","description":"","type":"Number"}],"return":{"description":"object","type":"p5.Signal"},"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6262,"description":"<p>Multiply this signal by a constant value,\nand return the resulting audio signal. Does\nnot change the value of the original signal,\ninstead it returns a new p5.SignalMult.</p>\n","itemtype":"method","name":"mult","params":[{"name":"number","description":"<p>to multiply</p>\n","type":"Number"}],"return":{"description":"object","type":"p5.Signal"},"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6284,"description":"<p>Scale this signal value to a given range,\nand return the result as an audio signal. Does\nnot change the value of the original signal,\ninstead it returns a new p5.SignalScale.</p>\n","itemtype":"method","name":"scale","params":[{"name":"number","description":"<p>to multiply</p>\n","type":"Number"},{"name":"inMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"inMax","description":"<p>input range maximum</p>\n","type":"Number"},{"name":"outMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"outMax","description":"<p>input range maximum</p>\n","type":"Number"}],"return":{"description":"object","type":"p5.Signal"},"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6397,"description":"<p>Time until envelope reaches attackLevel</p>\n","itemtype":"property","name":"attackTime","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6402,"description":"<p>Level once attack is complete.</p>\n","itemtype":"property","name":"attackLevel","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6408,"description":"<p>Time until envelope reaches decayLevel.</p>\n","itemtype":"property","name":"decayTime","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6414,"description":"<p>Level after decay. The envelope will sustain here until it is released.</p>\n","itemtype":"property","name":"decayLevel","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6420,"description":"<p>Duration of the release portion of the envelope.</p>\n","itemtype":"property","name":"releaseTime","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6426,"description":"<p>Level at the end of the release.</p>\n","itemtype":"property","name":"releaseLevel","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6463,"description":"<p>Reset the envelope with a series of time/value pairs.</p>\n","itemtype":"method","name":"set","params":[{"name":"attackTime","description":"<p>Time (in seconds) before level\n                               reaches attackLevel</p>\n","type":"Number"},{"name":"attackLevel","description":"<p>Typically an amplitude between\n                               0.0 and 1.0</p>\n","type":"Number"},{"name":"decayTime","description":"<p>Time</p>\n","type":"Number"},{"name":"decayLevel","description":"<p>Amplitude (In a standard ADSR envelope,\n                               decayLevel = sustainLevel)</p>\n","type":"Number"},{"name":"releaseTime","description":"<p>Release Time (in seconds)</p>\n","type":"Number"},{"name":"releaseLevel","description":"<p>Amplitude</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>\n"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6525,"description":"<p>Set values like a traditional\n<a href=\"https://en.wikipedia.org/wiki/Synthesizer#/media/File:ADSR_parameter.svg\">\nADSR envelope\n</a>.</p>\n","itemtype":"method","name":"setADSR","params":[{"name":"attackTime","description":"<p>Time (in seconds before envelope\n                              reaches Attack Level</p>\n","type":"Number"},{"name":"decayTime","description":"<p>Time (in seconds) before envelope\n                              reaches Decay/Sustain Level</p>\n","type":"Number","optional":true},{"name":"susRatio","description":"<p>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 <code>setRange</code>),\n                              then decayLevel would increase proportionally, to become 0.5.</p>\n","type":"Number","optional":true},{"name":"releaseTime","description":"<p>Time in seconds from now (defaults to 0)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6594,"description":"<p>Set max (attackLevel) and min (releaseLevel) of envelope.</p>\n","itemtype":"method","name":"setRange","params":[{"name":"aLevel","description":"<p>attack level (defaults to 1)</p>\n","type":"Number"},{"name":"rLevel","description":"<p>release level (defaults to 0)</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6667,"description":"<p>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.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"inputs","description":"<p>A p5.sound object or\n                              Web Audio Param.</p>\n","type":"Object","optional":true,"multiple":true}],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6685,"description":"<p>Set whether the envelope ramp is linear (default) or exponential.\nExponential ramps can be useful because we perceive amplitude\nand frequency logarithmically.</p>\n","itemtype":"method","name":"setExp","params":[{"name":"isExp","description":"<p>true is exponential, false is linear</p>\n","type":"Boolean"}],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6708,"description":"<p>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 <a href=\"\nhttp://docs.webplatform.org/wiki/apis/webaudio/AudioParam\">\nWeb Audio Audio Param.</a></p>","itemtype":"method","name":"play","params":[{"name":"unit","description":"<p>A p5.sound object or\n                              Web Audio Param.</p>\n","type":"Object"},{"name":"startTime","description":"<p>time from now (in seconds) at which to play</p>\n","type":"Number","optional":true},{"name":"sustainTime","description":"<p>time to sustain before releasing the envelope</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6779,"description":"<p>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 <a href=\"\nhttp://docs.webplatform.org/wiki/apis/webaudio/AudioParam\">\nWeb Audio Param</a>.</p>\n","itemtype":"method","name":"triggerAttack","params":[{"name":"unit","description":"<p>p5.sound Object or Web Audio Param</p>\n","type":"Object"},{"name":"secondsFromNow","description":"<p>time from now (in seconds)</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6887,"description":"<p>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.</p>\n","itemtype":"method","name":"triggerRelease","params":[{"name":"unit","description":"<p>p5.sound Object or Web Audio Param</p>\n","type":"Object"},{"name":"secondsFromNow","description":"<p>time to trigger the release</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6981,"description":"<p>Exponentially ramp to a value using the first two\nvalues from <code><a href=\"#/p5.Envelope/setADSR\">setADSR(attackTime, decayTime)</a></code>\nas <a href=\"https://en.wikipedia.org/wiki/RC_time_constant\">\ntime constants</a> for simple exponential ramps.\nIf the value is higher than current value, it uses attackTime,\nwhile a decrease uses decayTime.</p>\n","itemtype":"method","name":"ramp","params":[{"name":"unit","description":"<p>p5.sound Object or Web Audio Param</p>\n","type":"Object"},{"name":"secondsFromNow","description":"<p>When to trigger the ramp</p>\n","type":"Number"},{"name":"v","description":"<p>Target value</p>\n","type":"Number"},{"name":"v2","description":"<p>Second target value (optional)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7095,"description":"<p>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.</p>\n","itemtype":"method","name":"add","params":[{"name":"number","description":"<p>Constant number to add</p>\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":7114,"description":"<p>Multiply the p5.Envelope's output amplitude\nby a fixed value. Calling this method\nagain will override the initial mult() with new values.</p>\n","itemtype":"method","name":"mult","params":[{"name":"number","description":"<p>Constant number to multiply</p>\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":7133,"description":"<p>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.</p>\n","itemtype":"method","name":"scale","params":[{"name":"inMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"inMax","description":"<p>input range maximum</p>\n","type":"Number"},{"name":"outMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"outMax","description":"<p>input range maximum</p>\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":7268,"description":"<p>Set the width of a Pulse object (an oscillator that implements\nPulse Width Modulation).</p>\n","itemtype":"method","name":"width","params":[{"name":"width","description":"<p>Width between the pulses (0 to 1.0,\n                       defaults to 0)</p>\n","type":"Number","optional":true}],"class":"p5.Pulse","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7484,"description":"<p>Set type of noise to 'white', 'pink' or 'brown'.\nWhite is the default.</p>\n","itemtype":"method","name":"setType","params":[{"name":"type","description":"<p>'white', 'pink' or 'brown'</p>\n","type":"String","optional":true}],"class":"p5.Noise","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7630,"itemtype":"property","name":"input","type":"GainNode","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7634,"itemtype":"property","name":"output","type":"GainNode","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7639,"itemtype":"property","name":"stream","type":"MediaStream|null","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7644,"itemtype":"property","name":"mediaStream","type":"MediaStreamAudioSourceNode|null","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7649,"itemtype":"property","name":"currentSource","type":"Number|null","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7654,"description":"<p>Client must allow browser to access their microphone / audioin source.\nDefault: false. Will become true when the client enables access.</p>\n","itemtype":"property","name":"enabled","type":"Boolean","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7662,"description":"<p>Input amplitude, connect to it by default but not to master out</p>\n","itemtype":"property","name":"amplitude","type":"p5.Amplitude","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7678,"description":"<p>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.<br/></p>\n<p>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.</p>\n","itemtype":"method","name":"start","params":[{"name":"successCallback","description":"<p>Name of a function to call on\n                                  success.</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>Name of a function to call if\n                                  there was an error. For example,\n                                  some browsers do not support\n                                  getUserMedia.</p>\n","type":"Function","optional":true}],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7733,"description":"<p>Turn the AudioIn off. If the AudioIn is stopped, it cannot getLevel().\nIf re-starting, the user may be prompted for permission access.</p>\n","itemtype":"method","name":"stop","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7752,"description":"<p>Connect to an audio unit. If no parameter is provided, will\nconnect to the master output (i.e. your speakers).<br/></p>\n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"<p>An object that accepts audio input,\n                        such as an FFT</p>\n","type":"Object","optional":true}],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7776,"description":"<p>Disconnect the AudioIn from all audio units. For example, if\nconnect() had been called, disconnect() will stop sending\nsignal to your speakers.<br/></p>\n","itemtype":"method","name":"disconnect","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7793,"description":"<p>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). <em>NOTE: AudioIn must\n.start() before using .getLevel().</em><br/></p>\n","itemtype":"method","name":"getLevel","params":[{"name":"smoothing","description":"<p>Smoothing is 0.0 by default.\n                             Smooths values based on previous values.</p>\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":7815,"description":"<p>Set amplitude (volume) of a mic input between 0 and 1.0. <br/></p>\n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"<p>between 0 and 1.0</p>\n","type":"Number"},{"name":"time","description":"<p>ramp time (optional)</p>\n","type":"Number","optional":true}],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7837,"description":"<p>Returns a list of available input sources. This is a wrapper\nfor <a title=\"MediaDevices.enumerateDevices() - Web APIs | MDN\" target=\"_blank\" href=\n \"<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\"\">https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\"</a></p>\n<blockquote>\n<p>and it returns a Promise.</p>\n</blockquote>\n","itemtype":"method","name":"getSources","params":[{"name":"successCallback","description":"<p>This callback function handles the sources when they\n                                     have been enumerated. The callback function\n                                     receives the deviceList array as its only argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>This optional callback receives the error\n                                   message as its argument.</p>\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 <div><code>\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 </code></div>"],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7896,"description":"<p>Set the input source. Accepts a number representing a\nposition in the array returned by getSources().\nThis is only available in browsers that support\n<a title=\"MediaDevices.enumerateDevices() - Web APIs | MDN\" target=\"_blank\" href=\n\"<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\"\">https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\"</a></p>\n<blockquote>\n<p>navigator.mediaDevices.enumerateDevices()</a>.<br/></p>\n</blockquote>\n","itemtype":"method","name":"setSource","params":[{"name":"num","description":"<p>position of input source in the array</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>"],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8107,"description":"<p>The p5.EQ is built with abstracted p5.Filter objects.\nTo modify any bands, use methods of the <a\nhref=\"/reference/#/p5.Filter\" title=\"p5.Filter reference\">\np5.Filter</a> API, especially <code>gain</code> and <code>freq</code>.\nBands are stored in an array, with indices 0 - 3, or 0 - 7</p>\n","itemtype":"property","name":"bands","type":"Array","class":"p5.EQ","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8148,"description":"<p>Process an input by connecting it to the EQ</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>Audio source</p>\n","type":"Object"}],"class":"p5.EQ","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8321,"description":"<p><a title=\"Web Audio Panner docs\"  href=\n\"https://developer.mozilla.org/en-US/docs/Web/API/PannerNode\">\nWeb Audio Spatial Panner Node</a></p>\n<p>Properties include</p>\n<ul>\n<li><a title=\"w3 spec for Panning Model\"\nhref=\"<a href=\"https://www.w3.org/TR/webaudio/#idl-def-PanningModelType\"\">https://www.w3.org/TR/webaudio/#idl-def-PanningModelType\"</a><blockquote>\n<p>panningModel</a>: \"equal power\" or \"HRTF\"</p>\n</blockquote>\n</li>\n<li><a title=\"w3 spec for Distance Model\"\nhref=\"<a href=\"https://www.w3.org/TR/webaudio/#idl-def-DistanceModelType\"\">https://www.w3.org/TR/webaudio/#idl-def-DistanceModelType\"</a><blockquote>\n<p>distanceModel</a>: \"linear\", \"inverse\", or \"exponential\"</p>\n</blockquote>\n</li>\n</ul>\n","itemtype":"property","name":"panner","type":"AudioNode","class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8346,"description":"<p>Connect an audio sorce</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>Input source</p>\n","type":"Object"}],"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8357,"description":"<p>Set the X,Y,Z position of the Panner</p>\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":8375,"description":"<p>Getter and setter methods for position coordinates</p>\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":8382,"description":"<p>Getter and setter methods for position coordinates</p>\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":8389,"description":"<p>Getter and setter methods for position coordinates</p>\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":8438,"description":"<p>Set the X,Y,Z position of the Panner</p>\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":8456,"description":"<p>Getter and setter methods for orient coordinates</p>\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":8463,"description":"<p>Getter and setter methods for orient coordinates</p>\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":8470,"description":"<p>Getter and setter methods for orient coordinates</p>\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":8519,"description":"<p>Set the rolloff factor and max distance</p>\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":8532,"description":"<p>Maxium distance between the source and the listener</p>\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":8548,"description":"<p>How quickly the volume is reduced as the source moves away from the listener</p>\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":8885,"description":"<p>The p5.Delay is built with two\n<a href=\"http://www.w3.org/TR/webaudio/#DelayNode\">\nWeb Audio Delay Nodes</a>, one for each stereo channel.</p>\n","itemtype":"property","name":"leftDelay","type":"DelayNode","class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8895,"description":"<p>The p5.Delay is built with two\n<a href=\"http://www.w3.org/TR/webaudio/#DelayNode\">\nWeb Audio Delay Nodes</a>, one for each stereo channel.</p>\n","itemtype":"property","name":"rightDelay","type":"DelayNode","class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8942,"description":"<p>Add delay to an audio signal according to a set\nof delay parameters.</p>\n","itemtype":"method","name":"process","params":[{"name":"Signal","description":"<p>An object that outputs audio</p>\n","type":"Object"},{"name":"delayTime","description":"<p>Time (in seconds) of the delay/echo.\n                             Some browsers limit delayTime to\n                             1 second.</p>\n","type":"Number","optional":true},{"name":"feedback","description":"<p>sends the delay back through itself\n                             in a loop that decreases in volume\n                             each time.</p>\n","type":"Number","optional":true},{"name":"lowPass","description":"<p>Cutoff frequency. Only frequencies\n                             below the lowPass will be part of the\n                             delay.</p>\n","type":"Number","optional":true}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8984,"description":"<p>Set the delay (echo) time, in seconds. Usually this value will be\na floating point number between 0.0 and 1.0.</p>\n","itemtype":"method","name":"delayTime","params":[{"name":"delayTime","description":"<p>Time (in seconds) of the delay</p>\n","type":"Number"}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9005,"description":"<p>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</p>\n","itemtype":"method","name":"feedback","params":[{"name":"feedback","description":"<p>0.0 to 1.0, or an object such as an\n                                Oscillator that can be used to\n                                modulate this param</p>\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":9036,"description":"<p>Set a lowpass filter frequency for the delay. A lowpass filter\nwill cut off any frequencies higher than the filter frequency.</p>\n","itemtype":"method","name":"filter","params":[{"name":"cutoffFreq","description":"<p>A lowpass filter will cut off any\n                            frequencies higher than the filter frequency.</p>\n","type":"Number|Object"},{"name":"res","description":"<p>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.</p>\n","type":"Number|Object"}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9057,"description":"<p>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.</p>\n","itemtype":"method","name":"setType","params":[{"name":"type","description":"<p>'pingPong' (1) or 'default' (0)</p>\n","type":"String|Number"}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9109,"description":"<p>Set the output level of the delay effect.</p>\n","itemtype":"method","name":"amp","params":[{"name":"volume","description":"<p>amplitude between 0 and 1.0</p>\n","type":"Number"},{"name":"rampTime","description":"<p>create a fade that lasts rampTime</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9120,"description":"<p>Send output to a p5.sound or web audio object</p>\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":9128,"description":"<p>Disconnect all output.</p>\n","itemtype":"method","name":"disconnect","class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9265,"description":"<p>Connect a source to the reverb, and assign reverb parameters.</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>p5.sound / Web Audio object with a sound\n                         output.</p>\n","type":"Object"},{"name":"seconds","description":"<p>Duration of the reverb, in seconds.\n                         Min: 0, Max: 10. Defaults to 3.</p>\n","type":"Number","optional":true},{"name":"decayRate","description":"<p>Percentage of decay with each echo.\n                          Min: 0, Max: 100. Defaults to 2.</p>\n","type":"Number","optional":true},{"name":"reverse","description":"<p>Play the reverb backwards or forwards.</p>\n","type":"Boolean","optional":true}],"class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9301,"description":"<p>Set the reverb settings. Similar to .process(), but without\nassigning a new input.</p>\n","itemtype":"method","name":"set","params":[{"name":"seconds","description":"<p>Duration of the reverb, in seconds.\n                         Min: 0, Max: 10. Defaults to 3.</p>\n","type":"Number","optional":true},{"name":"decayRate","description":"<p>Percentage of decay with each echo.\n                          Min: 0, Max: 100. Defaults to 2.</p>\n","type":"Number","optional":true},{"name":"reverse","description":"<p>Play the reverb backwards or forwards.</p>\n","type":"Boolean","optional":true}],"class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9336,"description":"<p>Set the output level of the reverb effect.</p>\n","itemtype":"method","name":"amp","params":[{"name":"volume","description":"<p>amplitude between 0 and 1.0</p>\n","type":"Number"},{"name":"rampTime","description":"<p>create a fade that lasts rampTime</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9347,"description":"<p>Send output to a p5.sound or web audio object</p>\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":9355,"description":"<p>Disconnect all output.</p>\n","itemtype":"method","name":"disconnect","class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9461,"description":"<p>Internally, the p5.Convolver uses the a\n<a href=\"http://www.w3.org/TR/webaudio/#ConvolverNode\">\nWeb Audio Convolver Node</a>.</p>\n","itemtype":"property","name":"convolverNode","type":"ConvolverNode","class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9489,"description":"<p>Create a p5.Convolver. Accepts a path to a soundfile\nthat will be used to generate an impulse response.</p>\n","itemtype":"method","name":"createConvolver","params":[{"name":"path","description":"<p>path to a sound file</p>\n","type":"String"},{"name":"callback","description":"<p>function to call if loading is successful.\n                              The object will be passed in as the argument\n                              to the callback function.</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to call if loading is not successful.\n                              A custom error will be passed in as the argument\n                              to the callback function.</p>\n","type":"Function","optional":true}],"return":{"description":"","type":"p5.Convolver"},"example":["\n<div><code>\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 master output...\n  sound.disconnect();\n\n  // ...and process with cVerb\n  // so that we only hear the convolution\n  cVerb.process(sound);\n}\n\nfunction playSound() {\n  sound.play();\n}\n</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9635,"description":"<p>Connect a source to the convolver.</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>p5.sound / Web Audio object with a sound\n                         output.</p>\n","type":"Object"}],"example":["\n<div><code>\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 master output...\n  sound.disconnect();\n\n  // ...and process with cVerb\n  // so that we only hear the convolution\n  cVerb.process(sound);\n}\n\nfunction playSound() {\n  sound.play();\n}\n\n</code></div>"],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9682,"description":"<p>If you load multiple impulse files using the .addImpulse method,\nthey will be stored as Objects in this Array. Toggle between them\nwith the <code>toggleImpulse(id)</code> method.</p>\n","itemtype":"property","name":"impulses","type":"Array","class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9693,"description":"<p>Load and assign a new Impulse Response to the p5.Convolver.\nThe impulse is added to the <code>.impulses</code> array. Previous\nimpulses can be accessed with the <code>.toggleImpulse(id)</code>\nmethod.</p>\n","itemtype":"method","name":"addImpulse","params":[{"name":"path","description":"<p>path to a sound file</p>\n","type":"String"},{"name":"callback","description":"<p>function (optional)</p>\n","type":"Function"},{"name":"errorCallback","description":"<p>function (optional)</p>\n","type":"Function"}],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9713,"description":"<p>Similar to .addImpulse, except that the <code>.impulses</code>\nArray is reset to save memory. A new <code>.impulses</code>\narray is created with this impulse as the only item.</p>\n","itemtype":"method","name":"resetImpulse","params":[{"name":"path","description":"<p>path to a sound file</p>\n","type":"String"},{"name":"callback","description":"<p>function (optional)</p>\n","type":"Function"},{"name":"errorCallback","description":"<p>function (optional)</p>\n","type":"Function"}],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9735,"description":"<p>If you have used <code>.addImpulse()</code> to add multiple impulses\nto a p5.Convolver, then you can use this method to toggle between\nthe items in the <code>.impulses</code> 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 <code>.impulses\n</code> Array (Number).<br/>\nYou can access the objects in the .impulses Array directly. Each\nObject has two attributes: an <code>.audioBuffer</code> (type:\nWeb Audio <a href=\"\nhttp://webaudio.github.io/web-audio-api/#the-audiobuffer-interface\">\nAudioBuffer)</a> and a <code>.name</code>, a String that corresponds\nwith the original filename.</p>\n","itemtype":"method","name":"toggleImpulse","params":[{"name":"id","description":"<p>Identify the impulse by its original filename\n                          (String), or by its position in the\n                          <code>.impulses</code> Array (Number).</p>\n","type":"String|Number"}],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9903,"description":"<p>Set the global tempo, in beats per minute, for all\np5.Parts. This method will impact all active p5.Parts.</p>\n","itemtype":"method","name":"setBPM","params":[{"name":"BPM","description":"<p>Beats Per Minute</p>\n","type":"Number"},{"name":"rampTime","description":"<p>Seconds from now</p>\n","type":"Number"}],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9990,"description":"<p>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.</p>\n","itemtype":"property","name":"sequence","type":"Array","class":"p5.Phrase","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10076,"description":"<p>Set the tempo of this part, in Beats Per Minute.</p>\n","itemtype":"method","name":"setBPM","params":[{"name":"BPM","description":"<p>Beats Per Minute</p>\n","type":"Number"},{"name":"rampTime","description":"<p>Seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10089,"description":"<p>Returns the tempo, in Beats Per Minute, of this part.</p>\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":10101,"description":"<p>Start playback of this part. It will play\nthrough all of its phrases at a speed\ndetermined by setBPM.</p>\n","itemtype":"method","name":"start","params":[{"name":"time","description":"<p>seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10120,"description":"<p>Loop playback of this part. It will begin\nlooping through all of its phrases at a speed\ndetermined by setBPM.</p>\n","itemtype":"method","name":"loop","params":[{"name":"time","description":"<p>seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10141,"description":"<p>Tell the part to stop looping.</p>\n","itemtype":"method","name":"noLoop","class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10156,"description":"<p>Stop the part and cue it to step 0. Playback will resume from the begining of the Part when it is played again.</p>\n","itemtype":"method","name":"stop","params":[{"name":"time","description":"<p>seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10169,"description":"<p>Pause the part. Playback will resume\nfrom the current step.</p>\n","itemtype":"method","name":"pause","params":[{"name":"time","description":"<p>seconds from now</p>\n","type":"Number"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10184,"description":"<p>Add a p5.Phrase to this Part.</p>\n","itemtype":"method","name":"addPhrase","params":[{"name":"phrase","description":"<p>reference to a p5.Phrase</p>\n","type":"p5.Phrase"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10210,"description":"<p>Remove a phrase from this part, based on the name it was\ngiven when it was created.</p>\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":10227,"description":"<p>Get a phrase from this part, based on the name it was\ngiven when it was created. Now you can modify its array.</p>\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":10244,"description":"<p>Find all sequences with the specified name, and replace their patterns with the specified array.</p>\n","itemtype":"method","name":"replaceSequence","params":[{"name":"phraseName","description":"","type":"String"},{"name":"sequence","description":"<p>Array of values to pass into the callback\n                          at each step of the phrase.</p>\n","type":"Array"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10273,"description":"<p>Set the function that will be called at every step. This will clear the previous function.</p>\n","itemtype":"method","name":"onStep","params":[{"name":"callback","description":"<p>The name of the callback\n                            you want to fire\n                            on every beat/tatum.</p>\n","type":"Function"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10332,"description":"<p>Start playback of the score.</p>\n","itemtype":"method","name":"start","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10344,"description":"<p>Stop playback of the score.</p>\n","itemtype":"method","name":"stop","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10357,"description":"<p>Pause playback of the score.</p>\n","itemtype":"method","name":"pause","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10368,"description":"<p>Loop playback of the score.</p>\n","itemtype":"method","name":"loop","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10380,"description":"<p>Stop looping playback of the score. If it\nis currently playing, this will go into effect\nafter the current round of playback completes.</p>\n","itemtype":"method","name":"noLoop","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10411,"description":"<p>Set the tempo for all parts in the score</p>\n","itemtype":"method","name":"setBPM","params":[{"name":"BPM","description":"<p>Beats Per Minute</p>\n","type":"Number"},{"name":"rampTime","description":"<p>Seconds from now</p>\n","type":"Number"}],"class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10508,"description":"<p>musicalTimeMode uses <a href = \"https://github.com/Tonejs/Tone.js/wiki/Time\">Tone.Time</a> convention\ntrue if string, false if number</p>\n","itemtype":"property","name":"musicalTimeMode","type":"Boolean","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10516,"description":"<p>musicalTimeMode variables\nmodify these only when the interval is specified in musicalTime format as a string</p>\n","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10524,"description":"<p>Set a limit to the number of loops to play. defaults to Infinity</p>\n","itemtype":"property","name":"maxIterations","type":"Number","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10534,"description":"<p>Do not initiate the callback if timeFromNow is < 0\nThis ususually occurs for a few milliseconds when the page\nis not fully loaded</p>\n<p>The callback should only be called until maxIterations is reached</p>\n","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10549,"description":"<p>Start the loop</p>\n","itemtype":"method","name":"start","params":[{"name":"timeFromNow","description":"<p>schedule a starting time</p>\n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10566,"description":"<p>Stop the loop</p>\n","itemtype":"method","name":"stop","params":[{"name":"timeFromNow","description":"<p>schedule a stopping time</p>\n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10583,"description":"<p>Pause the loop</p>\n","itemtype":"method","name":"pause","params":[{"name":"timeFromNow","description":"<p>schedule a pausing time</p>\n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10600,"description":"<p>Synchronize loops. Use this method to start two more more loops in synchronization\nor to start a loop in synchronization with a loop that is already playing\nThis method will schedule the implicit loop in sync with the explicit master loop\ni.e. loopToStart.syncedStart(loopToSyncWith)</p>\n","itemtype":"method","name":"syncedStart","params":[{"name":"otherLoop","description":"<p>a p5.SoundLoop to sync with</p>\n","type":"Object"},{"name":"timeFromNow","description":"<p>Start the loops in sync after timeFromNow seconds</p>\n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10705,"description":"<p>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)</p>\n","itemtype":"property","name":"bpm","type":"Number","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10728,"description":"<p>number of quarter notes in a measure (defaults to 4)</p>\n","itemtype":"property","name":"timeSignature","type":"Number","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10748,"description":"<p>length of the loops interval</p>\n","itemtype":"property","name":"interval","type":"Number|String","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10765,"description":"<p>how many times the callback has been called so far</p>\n","itemtype":"property","name":"iterations","type":"Number","readonly":"","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10817,"description":"<p>The p5.Compressor is built with a <a href=\"https://www.w3.org/TR/webaudio/#the-dynamicscompressornode-interface\"\n  target=\"_blank\" title=\"W3 spec for Dynamics Compressor Node\">Web Audio Dynamics Compressor Node\n  </a></p>\n","itemtype":"property","name":"compressor","type":"AudioNode","class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10830,"description":"<p>Performs the same function as .connect, but also accepts\noptional parameters to set compressor's audioParams</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>Sound source to be connected</p>\n","type":"Object"},{"name":"attack","description":"<p>The amount of time (in seconds) to reduce the gain by 10dB,\n                           default = .003, range 0 - 1</p>\n","type":"Number","optional":true},{"name":"knee","description":"<p>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</p>\n","type":"Number","optional":true},{"name":"ratio","description":"<p>The amount of dB change in input for a 1 dB change in output\n                           default = 12, range 1 - 20</p>\n","type":"Number","optional":true},{"name":"threshold","description":"<p>The decibel value above which the compression will start taking effect\n                           default = -24, range -100 - 0</p>\n","type":"Number","optional":true},{"name":"release","description":"<p>The amount of time (in seconds) to increase the gain by 10dB\n                           default = .25, range 0 - 1</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10855,"description":"<p>Set the paramters of a compressor.</p>\n","itemtype":"method","name":"set","params":[{"name":"attack","description":"<p>The amount of time (in seconds) to reduce the gain by 10dB,\n                           default = .003, range 0 - 1</p>\n","type":"Number"},{"name":"knee","description":"<p>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</p>\n","type":"Number"},{"name":"ratio","description":"<p>The amount of dB change in input for a 1 dB change in output\n                           default = 12, range 1 - 20</p>\n","type":"Number"},{"name":"threshold","description":"<p>The decibel value above which the compression will start taking effect\n                           default = -24, range -100 - 0</p>\n","type":"Number"},{"name":"release","description":"<p>The amount of time (in seconds) to increase the gain by 10dB\n                           default = .25, range 0 - 1</p>\n","type":"Number"}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10894,"description":"<p>Get current attack or set value w/ time ramp</p>\n","itemtype":"method","name":"attack","params":[{"name":"attack","description":"<p>Attack is the amount of time (in seconds) to reduce the gain by 10dB,\n                         default = .003, range 0 - 1</p>\n","type":"Number","optional":true},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10919,"description":"<p>Get current knee or set value w/ time ramp</p>\n","itemtype":"method","name":"knee","params":[{"name":"knee","description":"<p>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</p>\n","type":"Number","optional":true},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10944,"description":"<p>Get current ratio or set value w/ time ramp</p>\n","itemtype":"method","name":"ratio","params":[{"name":"ratio","description":"<p>The amount of dB change in input for a 1 dB change in output\n                           default = 12, range 1 - 20</p>\n","type":"Number","optional":true},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10967,"description":"<p>Get current threshold or set value w/ time ramp</p>\n","itemtype":"method","name":"threshold","params":[{"name":"threshold","description":"<p>The decibel value above which the compression will start taking effect\n                           default = -24, range -100 - 0</p>\n","type":"Number"},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10990,"description":"<p>Get current release or set value w/ time ramp</p>\n","itemtype":"method","name":"release","params":[{"name":"release","description":"<p>The amount of time (in seconds) to increase the gain by 10dB\n                           default = .25, range 0 - 1</p>\n","type":"Number"},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11014,"description":"<p>Return the current reduction value</p>\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":11169,"description":"<p>Connect a specific device to the p5.SoundRecorder.\nIf no parameter is given, p5.SoundRecorer will record\nall audible p5.sound from your sketch.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"unit","description":"<p>p5.sound object or a web audio unit\n                       that outputs sound</p>\n","type":"Object","optional":true}],"class":"p5.SoundRecorder","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11194,"description":"<p>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.</p>\n","itemtype":"method","name":"record","params":[{"name":"soundFile","description":"<p>p5.SoundFile</p>\n","type":"p5.SoundFile"},{"name":"duration","description":"<p>Time (in seconds)</p>\n","type":"Number","optional":true},{"name":"callback","description":"<p>The name of a function that will be\n                              called once the recording completes</p>\n","type":"Function","optional":true}],"class":"p5.SoundRecorder","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11229,"description":"<p>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.</p>\n","itemtype":"method","name":"stop","class":"p5.SoundRecorder","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11259,"description":"<p>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\n<a href=\"/docs/reference/#/p5.SoundFile/saveBlob\"><code>p5.SoundFile.saveBlob</code></a>.</p>\n","itemtype":"method","name":"saveSound","params":[{"name":"soundFile","description":"<p>p5.SoundFile that you wish to save</p>\n","type":"p5.SoundFile"},{"name":"fileName","description":"<p>name of the resulting .wav file.</p>\n","type":"String"}],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11389,"description":"<p>isDetected is set to true when a peak is detected.</p>\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":11402,"description":"<p>The update method is run in the draw loop.</p>\n<p>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.</p>\n","itemtype":"method","name":"update","params":[{"name":"fftObject","description":"<p>A p5.FFT object</p>\n","type":"p5.FFT"}],"class":"p5.PeakDetect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11438,"description":"<p>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.</p>\n","itemtype":"method","name":"onPeak","params":[{"name":"callback","description":"<p>Name of a function that will\n                            be called when a peak is\n                            detected.</p>\n","type":"Function"},{"name":"val","description":"<p>Optional value to pass\n                            into the function when\n                            a peak is detected.</p>\n","type":"Object","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.PeakDetect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11600,"description":"<p>Connect a source to the gain node.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"src","description":"<p>p5.sound / Web Audio object with a sound\n                         output.</p>\n","type":"Object"}],"class":"p5.Gain","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11613,"description":"<p>Send output to a p5.sound or web audio object</p>\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":11626,"description":"<p>Disconnect all output.</p>\n","itemtype":"method","name":"disconnect","class":"p5.Gain","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11639,"description":"<p>Set the output level of the gain node.</p>\n","itemtype":"method","name":"amp","params":[{"name":"volume","description":"<p>amplitude between 0 and 1.0</p>\n","type":"Number"},{"name":"rampTime","description":"<p>create a fade that lasts rampTime</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Gain","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11743,"description":"<p>The p5.Distortion is built with a\n<a href=\"http://www.w3.org/TR/webaudio/#WaveShaperNode\">\nWeb Audio WaveShaper Node</a>.</p>\n","itemtype":"property","name":"WaveShaperNode","type":"AudioNode","class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11760,"description":"<p>Process a sound source, optionally specify amount and oversample values.</p>\n","itemtype":"method","name":"process","params":[{"name":"amount","description":"<p>Unbounded distortion amount.\n                               Normal values range from 0-1.</p>\n","type":"Number","optional":true,"optdefault":"0.25"},{"name":"oversample","description":"<p>'none', '2x', or '4x'.</p>\n","type":"String","optional":true,"optdefault":"'none'"}],"class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11774,"description":"<p>Set the amount and oversample of the waveshaper distortion.</p>\n","itemtype":"method","name":"set","params":[{"name":"amount","description":"<p>Unbounded distortion amount.\n                               Normal values range from 0-1.</p>\n","type":"Number","optional":true,"optdefault":"0.25"},{"name":"oversample","description":"<p>'none', '2x', or '4x'.</p>\n","type":"String","optional":true,"optdefault":"'none'"}],"class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11796,"description":"<p>Return the distortion amount, typically between 0-1.</p>\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":11809,"description":"<p>Return the oversampling.</p>\n","itemtype":"method","name":"getOversample","return":{"description":"Oversample can either be 'none', '2x', or '4x'.","type":"String"},"class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"}],"warnings":[{"message":"unknown tag: alt","line":" src/color/creating_reading.js:16"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:45"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:72"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:116"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:297"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:326"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:361"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:452"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:482"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:522"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:51"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:256"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:285"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:309"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:333"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:758"},{"message":"unknown tag: alt","line":" src/color/setting.js:13"},{"message":"unknown tag: alt","line":" src/color/setting.js:180"},{"message":"unknown tag: alt","line":" src/color/setting.js:214"},{"message":"unknown tag: alt","line":" src/color/setting.js:333"},{"message":"unknown tag: alt","line":" src/color/setting.js:492"},{"message":"unknown tag: alt","line":" src/color/setting.js:533"},{"message":"unknown tag: alt","line":" src/color/setting.js:573"},{"message":"unknown tag: alt","line":" src/color/setting.js:745"},{"message":"unknown tag: alt","line":" src/color/setting.js:825"},{"message":"replacing incorrect tag: returns with return","line":" src/core/friendly_errors/fes_core.js:173"},{"message":"replacing incorrect tag: returns with return","line":" src/core/friendly_errors/fes_core.js:267"},{"message":"replacing incorrect tag: returns with return","line":" src/core/friendly_errors/fes_core.js:362"},{"message":"replacing incorrect tag: returns with return","line":" src/core/friendly_errors/fes_core.js:502"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:102"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:232"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:275"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:339"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:400"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:478"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:552"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:618"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:707"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:12"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:81"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:115"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:184"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:219"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:259"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:331"},{"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:130"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:185"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:264"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:358"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:398"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:493"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:20"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:67"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:267"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:389"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:434"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:498"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:557"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:642"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:707"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:800"},{"message":"unknown tag: alt","line":" src/core/constants.js:66"},{"message":"unknown tag: alt","line":" src/core/constants.js:84"},{"message":"unknown tag: alt","line":" src/core/constants.js:102"},{"message":"unknown tag: alt","line":" src/core/constants.js:120"},{"message":"unknown tag: alt","line":" src/core/constants.js:138"},{"message":"unknown tag: alt","line":" src/core/environment.js:20"},{"message":"unknown tag: alt","line":" src/core/environment.js:52"},{"message":"unknown tag: alt","line":" src/core/environment.js:79"},{"message":"unknown tag: alt","line":" src/core/environment.js:129"},{"message":"unknown tag: alt","line":" src/core/environment.js:160"},{"message":"unknown tag: alt","line":" src/core/environment.js:228"},{"message":"unknown tag: alt","line":" src/core/environment.js:331"},{"message":"unknown tag: alt","line":" src/core/environment.js:354"},{"message":"unknown tag: alt","line":" src/core/environment.js:372"},{"message":"unknown tag: alt","line":" src/core/environment.js:390"},{"message":"unknown tag: alt","line":" src/core/environment.js:405"},{"message":"unknown tag: alt","line":" src/core/environment.js:421"},{"message":"unknown tag: alt","line":" src/core/environment.js:500"},{"message":"unknown tag: alt","line":" src/core/environment.js:550"},{"message":"replacing incorrect tag: returns with return","line":" src/core/environment.js:586"},{"message":"replacing incorrect tag: returns with return","line":" src/core/environment.js:605"},{"message":"unknown tag: alt","line":" src/core/environment.js:605"},{"message":"unknown tag: alt","line":" src/core/environment.js:660"},{"message":"unknown tag: alt","line":" src/core/environment.js:691"},{"message":"unknown tag: alt","line":" src/core/environment.js:713"},{"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:42"},{"message":"unknown tag: alt","line":" src/core/main.js:83"},{"message":"unknown tag: alt","line":" src/core/main.js:114"},{"message":"unknown tag: alt","line":" src/core/main.js:415"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:47"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:114"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:154"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:189"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:246"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:292"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:354"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:403"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:454"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:510"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:551"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:592"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:639"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:678"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:725"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:763"},{"message":"unknown tag: alt","line":" src/core/p5.Graphics.js:70"},{"message":"unknown tag: alt","line":" src/core/p5.Graphics.js:122"},{"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:125"},{"message":"unknown tag: alt","line":" src/core/rendering.js:183"},{"message":"unknown tag: alt","line":" src/core/rendering.js:204"},{"message":"unknown tag: alt","line":" src/core/rendering.js:243"},{"message":"unknown tag: alt","line":" src/core/rendering.js:326"},{"message":"unknown tag: alt","line":" src/core/structure.js:10"},{"message":"unknown tag: alt","line":" src/core/structure.js:83"},{"message":"unknown tag: alt","line":" src/core/structure.js:134"},{"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:497"},{"message":"unknown tag: alt","line":" src/core/transform.js:11"},{"message":"unknown tag: alt","line":" src/core/transform.js:168"},{"message":"unknown tag: alt","line":" src/core/transform.js:193"},{"message":"unknown tag: alt","line":" src/core/transform.js:232"},{"message":"unknown tag: alt","line":" src/core/transform.js:268"},{"message":"unknown tag: alt","line":" src/core/transform.js:304"},{"message":"unknown tag: alt","line":" src/core/transform.js:342"},{"message":"unknown tag: alt","line":" src/core/transform.js:416"},{"message":"unknown tag: alt","line":" src/core/transform.js:455"},{"message":"unknown tag: alt","line":" src/core/transform.js:494"},{"message":"unknown tag: alt","line":" src/data/local_storage.js:10"},{"message":"unknown tag: alt","line":" src/data/local_storage.js:101"},{"message":"unknown tag: alt","line":" src/dom/dom.js:204"},{"message":"unknown tag: alt","line":" src/dom/dom.js:271"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1517"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1579"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1683"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1722"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1842"},{"message":"unknown tag: alt","line":" src/dom/dom.js:2225"},{"message":"unknown tag: alt","line":" src/dom/dom.js:2735"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:23"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:46"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:69"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:135"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:168"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:201"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:239"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:285"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:330"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:389"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:428"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:471"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:515"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:546"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:604"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:10"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:36"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:64"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:103"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:190"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:243"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:308"},{"message":"unknown tag: alt","line":" src/events/mouse.js:12"},{"message":"unknown tag: alt","line":" src/events/mouse.js:43"},{"message":"unknown tag: alt","line":" src/events/mouse.js:80"},{"message":"unknown tag: alt","line":" src/events/mouse.js:106"},{"message":"unknown tag: alt","line":" src/events/mouse.js:132"},{"message":"unknown tag: alt","line":" src/events/mouse.js:164"},{"message":"unknown tag: alt","line":" src/events/mouse.js:195"},{"message":"unknown tag: alt","line":" src/events/mouse.js:233"},{"message":"unknown tag: alt","line":" src/events/mouse.js:271"},{"message":"unknown tag: alt","line":" src/events/mouse.js:311"},{"message":"unknown tag: alt","line":" src/events/mouse.js:351"},{"message":"unknown tag: alt","line":" src/events/mouse.js:389"},{"message":"unknown tag: alt","line":" src/events/mouse.js:481"},{"message":"unknown tag: alt","line":" src/events/mouse.js:535"},{"message":"unknown tag: alt","line":" src/events/mouse.js:615"},{"message":"unknown tag: alt","line":" src/events/mouse.js:696"},{"message":"unknown tag: alt","line":" src/events/mouse.js:772"},{"message":"unknown tag: alt","line":" src/events/mouse.js:841"},{"message":"unknown tag: alt","line":" src/events/mouse.js:926"},{"message":"unknown tag: alt","line":" src/events/mouse.js:979"},{"message":"unknown tag: alt","line":" src/events/mouse.js:1025"},{"message":"unknown tag: alt","line":" src/events/touch.js:10"},{"message":"unknown tag: alt","line":" src/events/touch.js:71"},{"message":"unknown tag: alt","line":" src/events/touch.js:151"},{"message":"unknown tag: alt","line":" src/events/touch.js:223"},{"message":"unknown tag: alt","line":" src/image/image.js:15"},{"message":"unknown tag: alt","line":" src/image/image.js:94"},{"message":"unknown tag: alt","line":" src/image/image.js:413"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:18"},{"message":"replacing incorrect tag: returns with return","line":" src/image/loading_displaying.js:252"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:269"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:439"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:537"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:601"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:88"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:115"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:152"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:261"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:296"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:346"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:400"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:437"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:548"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:603"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:665"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:738"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:859"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:900"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:941"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:972"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:1017"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:1052"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:1089"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:1125"},{"message":"unknown tag: alt","line":" src/image/pixels.js:12"},{"message":"unknown tag: alt","line":" src/image/pixels.js:80"},{"message":"unknown tag: alt","line":" src/image/pixels.js:173"},{"message":"unknown tag: alt","line":" src/image/pixels.js:307"},{"message":"unknown tag: alt","line":" src/image/pixels.js:481"},{"message":"unknown tag: alt","line":" src/image/pixels.js:566"},{"message":"unknown tag: alt","line":" src/image/pixels.js:602"},{"message":"unknown tag: alt","line":" src/image/pixels.js:674"},{"message":"unknown tag: alt","line":" src/io/files.js:20"},{"message":"unknown tag: alt","line":" src/io/files.js:183"},{"message":"unknown tag: alt","line":" src/io/files.js:303"},{"message":"unknown tag: alt","line":" src/io/files.js:583"},{"message":"replacing incorrect tag: returns with return","line":" src/io/files.js:693"},{"message":"unknown tag: alt","line":" src/io/files.js:693"},{"message":"unknown tag: alt","line":" src/io/files.js:1393"},{"message":"unknown tag: alt","line":" src/io/files.js:1535"},{"message":"unknown tag: alt","line":" src/io/files.js:1592"},{"message":"unknown tag: alt","line":" src/io/files.js:1656"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:85"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:148"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:195"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:240"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:288"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:352"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:545"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:597"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:638"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:896"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:960"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1009"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1055"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1100"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1146"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1190"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1242"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1305"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:40"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:102"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:146"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:191"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:239"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:295"},{"message":"unknown tag: alt","line":" src/io/p5.XML.js:9"},{"message":"unknown tag: alt","line":" src/math/calculation.js:10"},{"message":"unknown tag: alt","line":" src/math/calculation.js:33"},{"message":"unknown tag: alt","line":" src/math/calculation.js:72"},{"message":"unknown tag: alt","line":" src/math/calculation.js:116"},{"message":"unknown tag: alt","line":" src/math/calculation.js:181"},{"message":"unknown tag: alt","line":" src/math/calculation.js:230"},{"message":"unknown tag: alt","line":" src/math/calculation.js:268"},{"message":"unknown tag: alt","line":" src/math/calculation.js:315"},{"message":"unknown tag: alt","line":" src/math/calculation.js:370"},{"message":"unknown tag: alt","line":" src/math/calculation.js:408"},{"message":"unknown tag: alt","line":" src/math/calculation.js:463"},{"message":"unknown tag: alt","line":" src/math/calculation.js:511"},{"message":"unknown tag: alt","line":" src/math/calculation.js:559"},{"message":"unknown tag: alt","line":" src/math/calculation.js:611"},{"message":"unknown tag: alt","line":" src/math/calculation.js:645"},{"message":"unknown tag: alt","line":" src/math/calculation.js:699"},{"message":"unknown tag: alt","line":" src/math/calculation.js:743"},{"message":"replacing incorrect tag: returns with return","line":" src/math/calculation.js:830"},{"message":"unknown tag: alt","line":" src/math/calculation.js:830"},{"message":"unknown tag: alt","line":" src/math/math.js:10"},{"message":"unknown tag: alt","line":" src/math/noise.js:36"},{"message":"unknown tag: alt","line":" src/math/noise.js:178"},{"message":"unknown tag: alt","line":" src/math/noise.js:243"},{"message":"unknown tag: alt","line":" src/math/p5.Vector.js:10"},{"message":"unknown tag: alt","line":" src/math/random.js:37"},{"message":"unknown tag: alt","line":" src/math/random.js:66"},{"message":"unknown tag: alt","line":" src/math/random.js:153"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:123"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:159"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:186"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:213"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:285"},{"message":"replacing incorrect tag: returns with return","line":" src/math/trigonometry.js:320"},{"message":"replacing incorrect tag: returns with return","line":" src/math/trigonometry.js:335"},{"message":"replacing incorrect tag: returns with return","line":" src/math/trigonometry.js:350"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:11"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:81"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:118"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:150"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:187"},{"message":"unknown tag: alt","line":" src/typography/loading_displaying.js:16"},{"message":"unknown tag: alt","line":" src/typography/loading_displaying.js:140"},{"message":"unknown tag: alt","line":" src/typography/loading_displaying.js:229"},{"message":"unknown tag: alt","line":" src/typography/p5.Font.js:31"},{"message":"unknown tag: alt","line":" src/utilities/conversion.js:10"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:15"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:43"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:130"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:239"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:313"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:375"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:453"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:539"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:10"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:31"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:52"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:73"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:100"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:122"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:143"},{"message":"unknown tag: alt","line":" src/webgl/3d_primitives.js:13"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:11"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:353"},{"message":"unknown tag: alt","line":" src/webgl/light.js:11"},{"message":"unknown tag: alt","line":" src/webgl/light.js:92"},{"message":"unknown tag: alt","line":" src/webgl/light.js:177"},{"message":"unknown tag: alt","line":" src/webgl/light.js:280"},{"message":"unknown tag: alt","line":" src/webgl/light.js:387"},{"message":"unknown tag: alt","line":" src/webgl/light.js:425"},{"message":"unknown tag: alt","line":" src/webgl/light.js:510"},{"message":"unknown tag: alt","line":" src/webgl/light.js:850"},{"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:588"},{"message":"unknown tag: alt","line":" src/webgl/material.js:12"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/material.js:111"},{"message":"unknown tag: alt","line":" src/webgl/material.js:111"},{"message":"unknown tag: alt","line":" src/webgl/material.js:179"},{"message":"unknown tag: alt","line":" src/webgl/material.js:283"},{"message":"unknown tag: alt","line":" src/webgl/material.js:321"},{"message":"unknown tag: alt","line":" src/webgl/material.js:421"},{"message":"unknown tag: alt","line":" src/webgl/material.js:421"},{"message":"unknown tag: alt","line":" src/webgl/material.js:499"},{"message":"unknown tag: alt","line":" src/webgl/material.js:571"},{"message":"unknown tag: alt","line":" src/webgl/material.js:651"},{"message":"unknown tag: alt","line":" src/webgl/material.js:717"},{"message":"unknown tag: alt","line":" src/webgl/material.js:767"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:13"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:115"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:175"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:231"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:297"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:339"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:426"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:454"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:481"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:508"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:536"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:563"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:590"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:613"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:636"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:907"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:965"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:1023"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:1175"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:1247"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:1512"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.RendererGL.Immediate.js:180"},{"message":"unknown tag: parem","line":" src/webgl/p5.RendererGL.Immediate.js:301"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.RendererGL.Retained.js:8"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:331"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:600"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:641"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:746"},{"message":"unknown tag: alt","line":" src/webgl/p5.Shader.js:296"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:115"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/text.js:158"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:191"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:203"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:236"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:250"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:388"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/text.js:388"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:456"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:471"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:556"},{"message":"replacing incorrect tag: params with param","line":" lib/addons/p5.sound.js:4374"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:4374"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:5085"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:7837"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:9005"},{"message":"Missing item type\nConversions adapted from <http://www.easyrgb.com/en/math.php>.\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:19"},{"message":"Missing item type\nConvert an HSBA array to RGBA.","line":" src/color/color_conversion.js:45"},{"message":"Missing item type\nConvert an HSLA array to HSBA.","line":" src/color/color_conversion.js:100"},{"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:123"},{"message":"Missing item type\nConvert an RGBA array to HSBA.","line":" src/color/color_conversion.js:187"},{"message":"Missing item type\nConvert an RGBA array to HSLA.","line":" src/color/color_conversion.js:226"},{"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:404"},{"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:435"},{"message":"Missing item type\nCSS named colors.","line":" src/color/p5.Color.js:454"},{"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:608"},{"message":"Missing item type\nFull color string patterns. The capture groups are necessary.","line":" src/color/p5.Color.js:621"},{"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:758"},{"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:969"},{"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:819"},{"message":"Missing item type","line":" src/core/friendly_errors/file_errors.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:34"},{"message":"Missing item type","line":" src/core/friendly_errors/validate_params.js:1"},{"message":"Missing item type\nValidates parameters\nparam  {String}               func    the name of the function\nparam  {Array}                args    user input arguments\n\nexample:\n const a;\n ellipse(10,10,a,5);\nconsole ouput:\n \"It looks like ellipse received an empty variable in spot #2.\"\n\nexample:\n ellipse(10,\"foo\",5,5);\nconsole output:\n \"ellipse was expecting a number for parameter #1,\n          received \"foo\" instead.\"","line":" src/core/friendly_errors/validate_params.js:626"},{"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:305"},{"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 <a href=\"#/p5/setup\">setup()</a> is\nrecommended. The default rate is 60 frames per second.\n\nCalling <a href=\"#/p5/frameRate\">frameRate()</a> with no arguments returns the current framerate.","line":" src/core/environment.js:315"},{"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","line":" src/core/legacy.js:1"},{"message":"Missing item type\nHelper fxn for sharing pixel methods","line":" src/core/p5.Element.js:827"},{"message":"Missing item type\nResize our canvas element.","line":" src/core/p5.Renderer.js:95"},{"message":"Missing item type\nHelper fxn to check font type (system or otf)","line":" src/core/p5.Renderer.js:344"},{"message":"Missing item type\nHelper fxn to measure ascent and descent.\nAdapted from http://stackoverflow.com/a/25355178","line":" src/core/p5.Renderer.js:396"},{"message":"Missing item type\np5.Renderer2D\nThe 2D graphics canvas renderer class.\nextends p5.Renderer","line":" src/core/p5.Renderer2D.js:7"},{"message":"Missing item type\nGenerate a cubic Bezier representing an arc on the unit circle of total\nangle `size` radians, beginning `start` radians above the x-axis. Up to\nfour of these curves are combined to make a full arc.\n\nSee www.joecridge.me/bezier.pdf for an explanation of the method.","line":" src/core/p5.Renderer2D.js:402"},{"message":"Missing item type\nshim for Uint8ClampedArray.slice\n(allows arrayCopy to work with pixels[])\nwith thanks to http://halfpapstudios.com/blog/tag/html5-canvas/\nEnumerable set to false to protect for...in from\nUint8ClampedArray.prototype pollution.","line":" src/core/shim.js:18"},{"message":"Missing item type\nthis is implementation of Object.assign() which is unavailable in\nIE11 and (non-Chrome) Android browsers.\nThe assign() method is used to copy the values of all enumerable\nown properties from one or more source objects to a target object.\nIt will return the target object.\nModified from https://github.com/ljharb/object.assign","line":" src/core/shim.js:39"},{"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:197"},{"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:387"},{"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:425"},{"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:536"},{"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:600"},{"message":"Missing item type\nHelper function for select and selectAll","line":" src/dom/dom.js:127"},{"message":"Missing item type\nHelper function for getElement and getElements.","line":" src/dom/dom.js:142"},{"message":"Missing item type\nHelpers for create methods.","line":" src/dom/dom.js:309"},{"message":"Missing item type","line":" src/dom/dom.js:450"},{"message":"Missing item type","line":" src/dom/dom.js:1121"},{"message":"Missing item type","line":" src/dom/dom.js:1214"},{"message":"Missing item type","line":" src/dom/dom.js:1253"},{"message":"Missing item type","line":" src/dom/dom.js:3189"},{"message":"Missing item type","line":" src/dom/dom.js:3255"},{"message":"Missing item type","line":" src/dom/dom.js:3317"},{"message":"Missing item type\n_updatePAccelerations updates the pAcceleration values","line":" src/events/acceleration.js:124"},{"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:298"},{"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:384"},{"message":"Missing item type\nThis module defines the filters for use with image buffers.\n\nThis module is basically a collection of functions stored in an object\nas opposed to modules. The functions are destructive, modifying\nthe passed in canvas rather than creating a copy.\n\nGenerally speaking users of this module will use the Filters.apply method\non a canvas to create an effect.\n\nA number of functions are borrowed/adapted from\nhttp://www.html5rocks.com/en/tutorials/canvas/imagefilters/\nor the java processing implementation.","line":" src/image/filters.js:3"},{"message":"Missing item type\nReturns the pixel buffer for a canvas","line":" src/image/filters.js:24"},{"message":"Missing item type\nReturns a 32 bit number containing ARGB data at ith pixel in the\n1D array containing pixels data.","line":" src/image/filters.js:60"},{"message":"Missing item type\nModifies pixels RGBA values to values contained in the data object.","line":" src/image/filters.js:81"},{"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:101"},{"message":"Missing item type\nReturns a blank ImageData object.","line":" src/image/filters.js:121"},{"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:136"},{"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:189"},{"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:223"},{"message":"Missing item type\nSets the alpha channel to entirely opaque. No parameter is used.","line":" src/image/filters.js:246"},{"message":"Missing item type\nSets each pixel to its inverse value. No parameter is used.","line":" src/image/filters.js:262"},{"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:277"},{"message":"Missing item type\nreduces the bright areas in an image","line":" src/image/filters.js:309"},{"message":"Missing item type\nincreases the bright areas in an image","line":" src/image/filters.js:396"},{"message":"Missing item type\nThis module defines the p5 methods for the <a href=\"#/p5.Image\">p5.Image</a> 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:162"},{"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:252"},{"message":"Missing item type\nApply the current tint color to the input image, return the resulting\ncanvas.","line":" src/image/loading_displaying.js:565"},{"message":"Missing item type\nThis module defines the <a href=\"#/p5.Image\">p5.Image</a> 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:222"},{"message":"Missing item type\nHelper fxn for sharing pixel methods","line":" src/image/p5.Image.js:253"},{"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 <a href=\"#/p5/saveStrings\">saveStrings</a>, <a href=\"#/p5/saveJSON\">saveJSON</a>, <a href=\"#/p5/saveTable\">saveTable</a> etc.","line":" src/io/files.js:1789"},{"message":"Missing item type\nReturns a file extension, or another string\nif the provided parameter has no extension.","line":" src/io/files.js:1857"},{"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:1890"},{"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:1902"},{"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<a href=\"http://en.wikipedia.org/wiki/Comma-separated_values\">\ncomma separated values</a>, 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\n<a href=\"http://tools.ietf.org/html/rfc4180\">here</a>.\nTo load files, use the <a href=\"#/p5/loadTable\">loadTable</a> method.\nTo save tables to your computer, use the <a href=\"#/p5/save\">save</a> method\n or the <a href=\"#/p5/saveTable\">saveTable</a> method.\n\nPossible options include:\n<ul>\n<li>csv - parse the table as comma-separated values\n<li>tsv - parse the table as tab-separated values\n<li>header - this table has a header (title) row\n</ul>","line":" src/io/p5.Table.js:9"},{"message":"Missing item type\nMultiplies a vector by a scalar and returns a new vector.","line":" src/math/p5.Vector.js:2116"},{"message":"Missing item type\nRotates the vector (only 2D vectors) by the given angle, magnitude remains the same and returns a new vector.","line":" src/math/p5.Vector.js:2168"},{"message":"Missing item type\nDivides a vector by a scalar and returns a new vector.","line":" src/math/p5.Vector.js:2195"},{"message":"Missing item type\nCalculates the dot product of two vectors.","line":" src/math/p5.Vector.js:2248"},{"message":"Missing item type\nCalculates the cross product of two vectors.","line":" src/math/p5.Vector.js:2262"},{"message":"Missing item type\nCalculates the Euclidean distance between two points (considering a\npoint as a vector object).","line":" src/math/p5.Vector.js:2276"},{"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:2291"},{"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:2320"},{"message":"Missing item type\nNormalize the vector to length 1 (make it a unit vector).","line":" src/math/p5.Vector.js:2338"},{"message":"Missing item type\nHelper function to measure ascent and descent.","line":" src/typography/attributes.js:280"},{"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:273"},{"message":"Missing item type\nReturns an opentype path for the supplied string and position.","line":" src/typography/p5.Font.js:288"},{"message":"Missing item type","line":" src/webgl/3d_primitives.js:301"},{"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:955"},{"message":"Missing item type\nDraw a line given two points","line":" src/webgl/3d_primitives.js:1393"},{"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:179"},{"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:290"},{"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:317"},{"message":"Missing item type\nThis function matches the `query` at the provided `offset`","line":" src/webgl/loading.js:344"},{"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:356"},{"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:444"},{"message":"Missing item type","line":" src/webgl/material.js:812"},{"message":"Missing item type","line":" src/webgl/material.js:843"},{"message":"Missing item type\nCreate a 2D array for establishing stroke connections","line":" src/webgl/p5.Geometry.js:212"},{"message":"Missing item type\nCreate 4 vertices for each stroke line, two at the beginning position\nand two at the end position. These vertices are displaced relative to\nthat line's normal on the GPU","line":" src/webgl/p5.Geometry.js:233"},{"message":"Missing item type","line":" src/webgl/p5.Matrix.js:1"},{"message":"Missing item type\nPRIVATE","line":" src/webgl/p5.Matrix.js:722"},{"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:12"},{"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 <a href=\"#/p5/beginShape\">beginShape()</a> & de-activated when you call <a href=\"#/p5/endShape\">endShape()</a>.\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:106"},{"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:146"},{"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:180"},{"message":"Missing item type\nCalled from _processVertices() when applicable. This function tesselates immediateMode.geometry.","line":" src/webgl/p5.RendererGL.Immediate.js:225"},{"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:245"},{"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:280"},{"message":"Missing item type\nCalled from _drawImmediateFill(). Currently adds default normals which\nonly work for flat shapes.","line":" src/webgl/p5.RendererGL.Immediate.js:301"},{"message":"Missing item type\ninitializes buffer defaults. runs each time a new geometry is\nregistered","line":" src/webgl/p5.RendererGL.Retained.js:8"},{"message":"Missing item type\ncreates a buffers object that holds the WebGL render buffers\nfor a geometry.","line":" src/webgl/p5.RendererGL.Retained.js:59"},{"message":"Missing item type\nDraws buffers given a geometry key ID","line":" src/webgl/p5.RendererGL.Retained.js:97"},{"message":"Missing item type\nmodel view, projection, & normal\nmatrices","line":" src/webgl/p5.RendererGL.js:117"},{"message":"Missing item type\n[background description]","line":" src/webgl/p5.RendererGL.js:583"},{"message":"Missing item type\n[resize description]","line":" src/webgl/p5.RendererGL.js:857"},{"message":"Missing item type\nclears color and depth buffers\nwith r,g,b,a","line":" src/webgl/p5.RendererGL.js:887"},{"message":"Missing item type\n[translate description]","line":" src/webgl/p5.RendererGL.js:919"},{"message":"Missing item type\nScales the Model View Matrix by a vector","line":" src/webgl/p5.RendererGL.js:938"},{"message":"Missing item type\nturn a two dimensional array into one dimensional array","line":" src/webgl/p5.RendererGL.js:1359"},{"message":"Missing item type\nturn a p5.Vector Array into a one dimensional number array","line":" src/webgl/p5.RendererGL.js:1396"},{"message":"Missing item type\nensures that p5 is using a 3d renderer. throws an error if not.","line":" src/webgl/p5.RendererGL.js:1414"},{"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\nThe p5.Effect class is built\n \tusing Tone.js CrossFade","line":" lib/addons/p5.sound.js:293"},{"message":"Missing item type\nIn classes that extend\np5.Effect, connect effect nodes\nto the wet parameter","line":" lib/addons/p5.sound.js:300"},{"message":"Missing item type","line":" lib/addons/p5.sound.js:451"},{"message":"Missing item type\nUsed by Osc and Envelope to chain signal math","line":" lib/addons/p5.sound.js:688"},{"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:2721"},{"message":"Missing item type\nThis module has shims","line":" lib/addons/p5.sound.js:2969"},{"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:3105"},{"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:3555"},{"message":"Missing item type\nStop playback on all of this soundfile's sources.","line":" lib/addons/p5.sound.js:4056"},{"message":"Missing item type","line":" lib/addons/p5.sound.js:4590"},{"message":"Missing item type\nEQFilter extends p5.Filter with constraints\nnecessary for the p5.EQ","line":" lib/addons/p5.sound.js:8235"},{"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:9362"},{"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:9557"},{"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:10516"},{"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:10534"},{"message":"Missing item type\ncallback invoked when the recording is over","line":" lib/addons/p5.sound.js:11153"},{"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"],"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"],"VIDEO":["p5.createCapture"],"AUDIO":["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"],"IMAGE":["p5.textureMode"],"CLAMP":["p5.textureWrap"],"REPEAT":["p5.textureWrap"],"MIRROR":["p5.textureWrap"]}}
\ No newline at end of file

From 7fad5ee0debf6400b8e5e8390291e057f1194f25 Mon Sep 17 00:00:00 2001
From: Sanjay Singh Rajpoot
 <67458417+SanjaySinghRajpoot@users.noreply.github.com>
Date: Tue, 30 Mar 2021 08:51:12 +0530
Subject: [PATCH 06/10] Revert "Changing files"

This reverts commit a0a983632404bd563f6d6768a3e668d208de337e.
---
 .github/workflows/deploy.yaml                 |  25 -
 .github/workflows/test.yml                    |  22 +-
 .travis.yml                                   |  12 +
 Gruntfile.js                                  |   5 +-
 src/data/data.yml                             |   2 +-
 .../en/10_Interaction/11_WeightLine.js        |  55 --
 src/data/reference/en.json                    |  31 +-
 src/data/reference/es.json                    |  25 +-
 src/data/reference/ko.json                    |  25 +-
 src/data/reference/zh-Hans.json               |  25 +-
 src/templates/pages/reference/data.json       | 663 ++++++++----------
 src/templates/pages/reference/data.min.json   |   2 +-
 12 files changed, 354 insertions(+), 538 deletions(-)
 delete mode 100644 .github/workflows/deploy.yaml
 create mode 100644 .travis.yml
 delete mode 100644 src/data/examples/en/10_Interaction/11_WeightLine.js

diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
deleted file mode 100644
index b54408558c..0000000000
--- a/.github/workflows/deploy.yaml
+++ /dev/null
@@ -1,25 +0,0 @@
-name: Test and Deploy
-
-on:
-  push:
-    branches: [ main ]
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js
-      uses: actions/setup-node@v1
-      with:
-        node-version: "14.x"
-    - name: Install node modules
-      run: npm ci
-    - name: Build
-      run: npm run build
-    - name: Deploy 🚀
-      uses: JamesIves/github-pages-deploy-action@4.0.0
-      with:
-        branch: gh-pages # The branch the action should deploy to.
-        folder: dist/ # The folder the action should deploy.
-        single-commit: false # "false" here means "preserve git history on the gh-pages branch"
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 9a36127654..ebd18f91fd 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -1,23 +1,29 @@
 # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
 # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 
-name: Test
+name: Node.js CI
 
 on:
+  push:
+    branches: [ main ]
   pull_request:
     branches: [ main ]
 
 jobs:
   test:
+
     runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
     steps:
     - uses: actions/checkout@v2
-    - name: Use Node.js
+    - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v1
       with:
-        node-version: "14.x"
-    - name: Install node modules
-      run: npm ci
-    - name: Run tests
-      run: npm test
-      
\ No newline at end of file
+        node-version: ${{ matrix.node-version }}
+    - run: npm ci
+    - run: npm test
diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 0000000000..35b3cd5383
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,12 @@
+language: node_js
+node_js:
+  - "lts/*"
+
+deploy:
+  provider: pages
+  skip-cleanup: true
+  github-token: $GITHUB_TOKEN
+  keep-history: true
+  local-dir: dist/
+  on:
+    branch: main
diff --git a/Gruntfile.js b/Gruntfile.js
index e17104a143..f715c31d72 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -442,11 +442,8 @@ module.exports = function(grunt) {
   grunt.registerTask('move_dataJSON', function() {
     const dataJSON_p5js = 'tmp/p5.js/docs/reference/data.json';
     const dataJSON_p5jswebsite = 'src/templates/pages/reference/data.json';
-    const dataJSONmin_p5js = 'tmp/p5.js/docs/reference/data.min.json';
-    const dataJSONmin_p5jswebsite = 'src/templates/pages/reference/data.min.json';
-    // move the data.json files from the cloned p5.js repository to the p5.js-website repository
+    // move the data.json from the cloned p5.js repository to the p5.js-website repository
     fse.moveSync(dataJSON_p5js, dataJSON_p5jswebsite, { overwrite: true });
-    fse.moveSync(dataJSONmin_p5js, dataJSONmin_p5jswebsite, { overwrite: true });
     // delete the tmp folder that contained the p5.js repository
     fse.removeSync('tmp/');
   });
diff --git a/src/data/data.yml b/src/data/data.yml
index e354d417b0..f6e0a9acca 100644
--- a/src/data/data.yml
+++ b/src/data/data.yml
@@ -1,2 +1,2 @@
 title: p5.js
-version: 1.3.1
+version: 1.1.9
diff --git a/src/data/examples/en/10_Interaction/11_WeightLine.js b/src/data/examples/en/10_Interaction/11_WeightLine.js
deleted file mode 100644
index a455dcb781..0000000000
--- a/src/data/examples/en/10_Interaction/11_WeightLine.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/* 
- * @name Weight Line
- * @frame 710,400
- * @description contributed by <a href="https://www.rit.edu/directory/wmhics-w-michelle-harris">
-   <b>Prof WM Harris,</b></a> using the random function with events to color/weight a line<br/>
-  <b>How</b> to use the random function with events to color/ weight a line
-	dependent on mouse location, left mouse button clicks, character key types, and
-	random key releases.<br/>
-  <b>Functions</b> are created for both the canvas set up as well as the creation of
-	the line. Depending on the action taken by the user the line can
-	vary in width and color. Left mouse button clicks result in a color
-	change to blue, while the typing of any character key will change
-	the color to turquoise, each resulting in a variable stroke weight;
-	the width of the former will be between 0 – 1 while the width of
-	the latter will be 0 – 5. The release of any key will result in a
-  random hue, saturation, and brightness change to the line.
- */
-
-
-function setup() {
-    createCanvas(400, 400);
-    background("beige");
-    colorMode(HSB);
-  }
-  
-  function draw() {
-    //Line from prev pt to current pt
-    //of mouse position
-    line(mouseX, mouseY, pmouseX, pmouseY);
-  }
-  
-  //listen when we click the mouse
-  function mouseClicked() {
-    //weights 0 to 1
-    stroke("slateBlue");
-    strokeWeight(random());
-  
-    //what if want weights 0 to .4?
-    //strokeWeight( random(.4) );
-  }
-  
-  //listen when we release *any* key
-  function keyReleased() {
-    //color hue values between 20 and 145
-    //saturation 0 to 100
-    //brightness 80 to 100
-    stroke(random(20, 145), random(100), random(80, 100));
-  }
-  
-  //listen for only character keys
-  function keyTyped() {
-    //weights 0 to 5
-    stroke("turquoise");
-    strokeWeight(random(5));
-  }
\ No newline at end of file
diff --git a/src/data/reference/en.json b/src/data/reference/en.json
index 6a6d7ffb0e..608d1b0272 100644
--- a/src/data/reference/en.json
+++ b/src/data/reference/en.json
@@ -329,20 +329,20 @@
         "start": "Number: angle to start the arc, specified in radians",
         "stop": "Number: angle to stop the arc, specified in radians",
         "mode": "Constant: (Optional) optional parameter to determine the way of drawing  the arc. either CHORD, PIE or OPEN",
-        "detail": "Integer: (Optional) optional parameter for WebGL mode only. This is to  specify the number of vertices that makes up the  perimeter of the arc. Default value is 25. Won't  draw a stroke for a detail of more than 50."
+        "detail": "Number: (Optional) optional parameter for WebGL mode only. This is to  specify the number of vertices that makes up the  perimeter of the arc. Default value is 25."
       }
     },
     "ellipse": {
       "description": [
         "Draws an ellipse (oval) to the screen. By default, the first two parameters set the location of the center of the ellipse, and the third and fourth parameters set the shape's width and height. If no height is specified, the value of width is used for both the width and height. If a negative height or width is specified, the absolute value is taken. ",
-        "An ellipse with equal width and height is a circle. The origin may be changed with the <a href=\"#/p5/ellipseMode\">ellipseMode()</a> function."
+        "An ellipse with equal width and height is a circle.The origin may be changed with the <a href=\"#/p5/ellipseMode\">ellipseMode()</a> function."
       ],
       "params": {
         "x": "Number: x-coordinate of the center of ellipse.",
         "y": "Number: y-coordinate of the center of ellipse.",
         "w": "Number: width of the ellipse.",
         "h": "Number: (Optional) height of the ellipse.",
-        "detail": "Integer: (Optional) optional parameter for WebGL mode only. This is to  specify the number of vertices that makes up the  perimeter of the ellipse. Default value is 25. Won't  draw a stroke for a detail of more than 50."
+        "detail": "Integer: number of radial sectors to draw (for WebGL mode)"
       }
     },
     "circle": {
@@ -709,11 +709,6 @@
         "v": "Number: (Optional) the vertex's texture v-coordinate"
       }
     },
-    "VERSION": {
-      "description": [
-        "Version of this p5.js."
-      ]
-    },
     "P2D": {
       "description": [
         "The default, two-dimensional renderer."
@@ -939,10 +934,7 @@
     "windowResized": {
       "description": [
         "The <a href=\"#/p5/windowResized\">windowResized()</a> function is called once every time the browser window is resized. This is a good place to resize the canvas or do any other adjustments to accommodate the new window size."
-      ],
-      "params": {
-        "event": "Object: (Optional) optional Event callback argument."
-      }
+      ]
     },
     "width": {
       "description": [
@@ -1753,27 +1745,18 @@
         "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 <a href=\"#/p5/keyTyped\">keyTyped()</a> 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 <a href=\"#/p5/keyTyped\">keyTyped()</a> (and <a href=\"#/p5/keyReleased\">keyReleased()</a> 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."
-      ],
-      "params": {
-        "event": "Object: (Optional) optional KeyboardEvent callback argument."
-      }
+      ]
     },
     "keyReleased": {
       "description": [
         "The <a href=\"#/p5/keyReleased\">keyReleased()</a> function is called once every time a key is released. See <a href=\"#/p5/key\">key</a> and <a href=\"#/p5/keyCode\">keyCode</a> for more information. Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add \"return false\" to the end of the method."
-      ],
-      "params": {
-        "event": "Object: (Optional) optional KeyboardEvent callback argument."
-      }
+      ]
     },
     "keyTyped": {
       "description": [
         "The <a href=\"#/p5/keyTyped\">keyTyped()</a> 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 <a href=\"#/p5/keyPressed\">keyPressed()</a> 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 <a href=\"#/p5/keyTyped\">keyTyped()</a> (and <a href=\"#/p5/keyReleased\">keyReleased()</a> 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."
-      ],
-      "params": {
-        "event": "Object: (Optional) optional KeyboardEvent callback argument."
-      }
+      ]
     },
     "keyIsDown": {
       "description": [
diff --git a/src/data/reference/es.json b/src/data/reference/es.json
index f033bac4b0..cd3bcba34a 100644
--- a/src/data/reference/es.json
+++ b/src/data/reference/es.json
@@ -709,11 +709,6 @@
         "v": "Number: (Optional) the vertex's texture v-coordinate"
       }
     },
-    "VERSION": {
-      "description": [
-        "Version of this p5.js."
-      ]
-    },
     "P2D": {
       "description": [
         "The default, two-dimensional renderer."
@@ -939,10 +934,7 @@
     "windowResized": {
       "description": [
         "La función windowResized() es llamada cada vez que la ventana del navegador cambia de tamaño. Es un buen lugar para cambiar las dimensiones del lienzo o hacer cualquier otro ajuste necesario para acomodar las nuevas dimensiones de la ventana."
-      ],
-      "params": {
-        "event": "Object: (Optional) optional Event callback argument."
-      }
+      ]
     },
     "width": {
       "description": [
@@ -1753,27 +1745,18 @@
         "",
         "",
         ""
-      ],
-      "params": {
-        "event": "Object: (Optional) optional KeyboardEvent callback argument."
-      }
+      ]
     },
     "keyReleased": {
       "description": [
         "La función keyReleased() es llamada una vez cada vez que una tecla es soltada. Ver key y keyCode para más información. Los navegadores tienen distintos comportamientos por defecto asociados a distintos eventos gatillados por teclas. Para prevenir cualquier comportamiento por defecto para este evento, añade return false al final de este método."
-      ],
-      "params": {
-        "event": "Object: (Optional) optional KeyboardEvent callback argument."
-      }
+      ]
     },
     "keyTyped": {
       "description": [
         "la función keyTyped es llamada cava vez que una tecla es presionada, excepto cuando son presionadas la steclas de acción como Ctrl, Shift y Alt, que son ignoradas. La tecla presionada más reciente será almacenada en la variable key. Por la forma en que los sistemas operativos manejan la repetición de teclas, mantener presionada una tecla puede causar múltiples llamadas a keyTyped() (y también keyReleased()). La tasa de repetición es definida por el sistema operativo y según cómo cada computador está configurado. Los navegadores tienen distintos comportamientos por defecto asociados a distintos eventos gatillados por teclas. Para prevenir cualquier comportamiento por defecto para este evento, añade return false al final de este método.",
         ""
-      ],
-      "params": {
-        "event": "Object: (Optional) optional KeyboardEvent callback argument."
-      }
+      ]
     },
     "keyIsDown": {
       "description": [
diff --git a/src/data/reference/ko.json b/src/data/reference/ko.json
index fe0d2cfa0c..1ebce5db36 100644
--- a/src/data/reference/ko.json
+++ b/src/data/reference/ko.json
@@ -709,11 +709,6 @@
         "v": "숫자: 꼭지점의 v좌표값(선택 사항)"
       }
     },
-    "VERSION": {
-      "description": [
-        "Version of this p5.js."
-      ]
-    },
     "P2D": {
       "description": [
         "The default, two-dimensional renderer."
@@ -939,10 +934,7 @@
     "windowResized": {
       "description": [
         "windowResized() 함수는 브라우저 창의 크기가 조정될 때마다 한 번씩 호출됩니다. 캔버스 크기를 재조정하거나 새 윈도우 화면의 크기에 맞춰 조정할 때 유용합니다."
-      ],
-      "params": {
-        "event": "Object: (Optional) optional Event callback argument."
-      }
+      ]
     },
     "width": {
       "description": [
@@ -1753,27 +1745,18 @@
         "",
         "",
         ""
-      ],
-      "params": {
-        "event": "Object: (Optional) optional KeyboardEvent callback argument."
-      }
+      ]
     },
     "keyReleased": {
       "description": [
         "keyReleased() 함수는 자판을 놓을 때마다 한 번씩 호출됩니다. 자세한 내용은 <a href='https://p5js.org/reference/#/p5/key'>key</a>와 <a href='https://p5js.org/reference/#/p5/keyCode'>keyCode</a>를 참고하세요.<br><br>자판키 입력을 통한 이벤트 발생이 브라우저 기본값으로 설정되어있는 경우, 메소드 말미에 \"return false\"를 넣어 브라우저 기본값 이벤트 발생을 방지할 수 있습니다."
-      ],
-      "params": {
-        "event": "Object: (Optional) optional KeyboardEvent callback argument."
-      }
+      ]
     },
     "keyTyped": {
       "description": [
         "keyTyped() 함수는 자판을 누를 때마다 한번씩 호출되지만, 백스페이즈, 딜리트, 컨트롤, 쉬프트, 알트키는 무시됩니다. 언급된 자판키 입력 감지를 원할 경우, keyPressed() 함수를 사용하면 됩니다. 가장 마지막으로 입력된 자판키값이 key 변수에 저장됩니다.<br><br>컴퓨터 운영 체제의 자판키 입력 반복 처리 방식으로 인해, 자판키를 계속 누르면 keyTyped()를 여러 번 호출하는 경우가 발생할 수 있습니다. (keyReleased()도 마찬가지 입니다.) 반복 속도는 운영 체제와 컴퓨터 구성 방식마다 다릅니다.<br><br>자판키 입력을 통한 이벤트 발생이 브라우저 기본값으로 설정되어있는 경우, 메소드 말미에 \"return false\"를 넣어 브라우저 기본값 이벤트 발생을 방지할 수 있습니다.",
         ""
-      ],
-      "params": {
-        "event": "Object: (Optional) optional KeyboardEvent callback argument."
-      }
+      ]
     },
     "keyIsDown": {
       "description": [
diff --git a/src/data/reference/zh-Hans.json b/src/data/reference/zh-Hans.json
index 072a54e1f1..6efea6e9c5 100644
--- a/src/data/reference/zh-Hans.json
+++ b/src/data/reference/zh-Hans.json
@@ -709,11 +709,6 @@
         "v": "数字：顶点的纹理 v 坐标"
       }
     },
-    "VERSION": {
-      "description": [
-        "Version of this p5.js."
-      ]
-    },
     "P2D": {
       "description": [
         "The default, two-dimensional renderer."
@@ -939,10 +934,7 @@
     "windowResized": {
       "description": [
         "windowResized() 函数将在每次浏览器窗口缩放时被调用。这是个适合缩放画布及或任何其他调整以符合新的窗口大小的地方。"
-      ],
-      "params": {
-        "event": "Object: (Optional) optional Event callback argument."
-      }
+      ]
     },
     "width": {
       "description": [
@@ -1753,27 +1745,18 @@
         "",
         "",
         ""
-      ],
-      "params": {
-        "event": "Object: (Optional) optional KeyboardEvent callback argument."
-      }
+      ]
     },
     "keyReleased": {
       "description": [
         "keyReleased() 函数将会在每一次任何键被释放时被调用。请查看 key 及 keyCode 以知更多详情。<br><br>不同浏览器可能会有不同附属于个别键盘事件的默认行为。以防止这些默认行为发生，只需在函数尾端加 “return false”。"
-      ],
-      "params": {
-        "event": "Object: (Optional) optional KeyboardEvent callback argument."
-      }
+      ]
     },
     "keyTyped": {
       "description": [
         "keyTyped() 函数将会在每一次任何键被按下时被调用，可是会忽略操作键如 Ctrl、Shift 及 Alt。被按下的键的 keyCode 将被储存在 keyCode 变量内。<br><br>取决于操作系统如何处理按键重复，按住一个键可能使 keyTyped() （及 keyReleased()）被调用多过一次。重复的速度应操作系统及该电脑的设置而定。<br><br>不同浏览器可能会有不同附属于个别键盘事件的默认行为。以防止这些默认行为发生，只需在函数尾端加 “return false”。",
         ""
-      ],
-      "params": {
-        "event": "Object: (Optional) optional KeyboardEvent callback argument."
-      }
+      ]
     },
     "keyIsDown": {
       "description": [
diff --git a/src/templates/pages/reference/data.json b/src/templates/pages/reference/data.json
index 68c8222865..b4629190d7 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.3.1",
+        "version": "1.2.0",
         "url": "https://github.com/processing/p5.js#readme"
     },
     "files": {
@@ -1107,7 +1107,7 @@
             "namespaces": {},
             "module": "DOM",
             "file": "src/dom/dom.js",
-            "line": 3490,
+            "line": 3487,
             "description": "<p>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 <a href=\"#/p5.Element\">p5.Element</a> that supports a range of HTML elements. See the\n<a href='https://github.com/processing/p5.js/wiki/Beyond-the-canvas'>\nbeyond the canvas tutorial</a> for a full overview of how this addon works.</p>\n<p>See <a href='https://github.com/processing/p5.js/wiki/Beyond-the-canvas'>tutorial: beyond the canvas</a>\nfor more info on how to use this library.</a></p>\n",
             "requires": [
                 "p5"
@@ -2132,7 +2132,7 @@
             "submodule": "DOM",
             "namespace": "",
             "file": "src/dom/dom.js",
-            "line": 2334,
+            "line": 2331,
             "description": "<p>Extends <a href=\"#/p5.Element\">p5.Element</a> to handle audio and video. In addition to the methods\nof <a href=\"#/p5.Element\">p5.Element</a>, it also contains methods for controlling media. It is not\ncalled directly, but <a href=\"#/p5.MediaElement\">p5.MediaElement</a>s are created by calling <a href=\"#/p5/createVideo\">createVideo</a>,\n<a href=\"#/p5/createAudio\">createAudio</a>, and <a href=\"#/p5/createCapture\">createCapture</a>.</p>\n",
             "is_constructor": 1,
             "params": [
@@ -2155,7 +2155,7 @@
             "submodule": "DOM",
             "namespace": "",
             "file": "src/dom/dom.js",
-            "line": 3490,
+            "line": 3487,
             "description": "<p>Base class for a file.\nUsed for Element.drop and createFileInput.</p>\n",
             "is_constructor": 1,
             "params": [
@@ -4652,8 +4652,8 @@
                 },
                 {
                     "name": "detail",
-                    "description": "<p>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.</p>\n",
-                    "type": "Integer",
+                    "description": "<p>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.</p>\n",
+                    "type": "Number",
                     "optional": true
                 }
             ],
@@ -4668,8 +4668,8 @@
         },
         {
             "file": "src/core/shape/2d_primitives.js",
-            "line": 232,
-            "description": "<p>Draws an ellipse (oval) to the screen. By default, the first two parameters\nset the location of the center of the ellipse, and the third and fourth\nparameters set the shape's width and height. If no height is specified, the\nvalue of width is used for both the width and height. If a negative height or\nwidth is specified, the absolute value is taken.</p>\n<p>An ellipse with equal width and height is a circle. The origin may be changed\nwith the <a href=\"#/p5/ellipseMode\">ellipseMode()</a> function.</p>\n",
+            "line": 231,
+            "description": "<p>Draws an ellipse (oval) to the screen. By default, the first two parameters\nset the location of the center of the ellipse, and the third and fourth\nparameters set the shape's width and height. If no height is specified, the\nvalue of width is used for both the width and height. If a negative height or\nwidth is specified, the absolute value is taken.</p>\n<p>An ellipse with equal width and height is a circle.The origin may be changed\nwith the <a href=\"#/p5/ellipseMode\">ellipseMode()</a> function.</p>\n",
             "itemtype": "method",
             "name": "ellipse",
             "chainable": 1,
@@ -4682,7 +4682,7 @@
             "submodule": "2D Primitives",
             "overloads": [
                 {
-                    "line": 232,
+                    "line": 231,
                     "params": [
                         {
                             "name": "x",
@@ -4709,7 +4709,7 @@
                     "chainable": 1
                 },
                 {
-                    "line": 259,
+                    "line": 258,
                     "params": [
                         {
                             "name": "x",
@@ -4733,9 +4733,8 @@
                         },
                         {
                             "name": "detail",
-                            "description": "<p>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.</p>\n",
-                            "type": "Integer",
-                            "optional": true
+                            "description": "<p>number of radial sectors to draw (for WebGL mode)</p>\n",
+                            "type": "Integer"
                         }
                     ]
                 }
@@ -4743,7 +4742,7 @@
         },
         {
             "file": "src/core/shape/2d_primitives.js",
-            "line": 275,
+            "line": 271,
             "description": "<p>Draws a circle to the screen. A circle is a simple closed shape. It is the set\nof all points in a plane that are at a given distance from a given point,\nthe centre. This function is a special case of the ellipse() function, where\nthe width and height of the ellipse are the same. Height and width of the\nellipse correspond to the diameter of the circle. By default, the first two\nparameters set the location of the centre of the circle, the third sets the\ndiameter of the circle.</p>\n",
             "itemtype": "method",
             "name": "circle",
@@ -4775,7 +4774,7 @@
         },
         {
             "file": "src/core/shape/2d_primitives.js",
-            "line": 339,
+            "line": 335,
             "description": "<p>Draws a line (a direct path between two points) to the screen. If called with\nonly 4 parameters, it will draw a line in 2D with a default width of 1 pixel.\nThis width can be modified by using the <a href=\"#/p5/strokeWeight\">\nstrokeWeight()</a> function. A line cannot be filled, therefore the <a\nhref=\"#/p5/fill\">fill()</a> function will not affect the color of a line. So to\ncolor a line, use the <a href=\"#/p5/stroke\">stroke()</a> function.</p>\n",
             "itemtype": "method",
             "name": "line",
@@ -4789,7 +4788,7 @@
             "submodule": "2D Primitives",
             "overloads": [
                 {
-                    "line": 339,
+                    "line": 335,
                     "params": [
                         {
                             "name": "x1",
@@ -4815,7 +4814,7 @@
                     "chainable": 1
                 },
                 {
-                    "line": 375,
+                    "line": 371,
                     "params": [
                         {
                             "name": "x1",
@@ -4854,7 +4853,7 @@
         },
         {
             "file": "src/core/shape/2d_primitives.js",
-            "line": 400,
+            "line": 396,
             "description": "<p>Draws a point, a coordinate in space at the dimension of one pixel.\nThe first parameter is the horizontal value for the point, the second\nparam is the vertical value for the point. The color of the point is\nchanged with the <a href=\"#/p5/stroke\">stroke()</a> function. The size of the point\ncan be changed with the <a href=\"#/p5/strokeWeight\">strokeWeight()</a> function.</p>\n",
             "itemtype": "method",
             "name": "point",
@@ -4868,7 +4867,7 @@
             "submodule": "2D Primitives",
             "overloads": [
                 {
-                    "line": 400,
+                    "line": 396,
                     "params": [
                         {
                             "name": "x",
@@ -4890,7 +4889,7 @@
                     "chainable": 1
                 },
                 {
-                    "line": 450,
+                    "line": 446,
                     "params": [
                         {
                             "name": "coordinate_vector",
@@ -4904,7 +4903,7 @@
         },
         {
             "file": "src/core/shape/2d_primitives.js",
-            "line": 478,
+            "line": 474,
             "description": "<p>Draws a quad on the canvas. A quad is a quadrilateral, a four sided polygon. It is\nsimilar to a rectangle, but the angles between its edges are not\nconstrained to ninety degrees. The first pair of parameters (x1,y1)\nsets the first vertex and the subsequent pairs should proceed\nclockwise or counter-clockwise around the defined shape.\nz-arguments only work when quad() is used in WEBGL mode.</p>\n",
             "itemtype": "method",
             "name": "quad",
@@ -4918,7 +4917,7 @@
             "submodule": "2D Primitives",
             "overloads": [
                 {
-                    "line": 478,
+                    "line": 474,
                     "params": [
                         {
                             "name": "x1",
@@ -4976,7 +4975,7 @@
                     "chainable": 1
                 },
                 {
-                    "line": 508,
+                    "line": 504,
                     "params": [
                         {
                             "name": "x1",
@@ -5057,7 +5056,7 @@
         },
         {
             "file": "src/core/shape/2d_primitives.js",
-            "line": 552,
+            "line": 548,
             "description": "<p>Draws a rectangle on the canvas. A rectangle is a four-sided closed shape with\nevery angle at ninety degrees. By default, the first two parameters set\nthe location of the upper-left corner, the third sets the width, and the\nfourth sets the height. The way these parameters are interpreted, may be\nchanged with the <a href=\"#/p5/rectMode\">rectMode()</a> function.</p>\n<p>The fifth, sixth, seventh and eighth parameters, if specified,\ndetermine corner radius for the top-left, top-right, lower-right and\nlower-left corners, respectively. An omitted corner radius parameter is set\nto the value of the previously specified radius value in the parameter list.</p>\n",
             "itemtype": "method",
             "name": "rect",
@@ -5071,7 +5070,7 @@
             "submodule": "2D Primitives",
             "overloads": [
                 {
-                    "line": 552,
+                    "line": 548,
                     "params": [
                         {
                             "name": "x",
@@ -5122,7 +5121,7 @@
                     "chainable": 1
                 },
                 {
-                    "line": 603,
+                    "line": 599,
                     "params": [
                         {
                             "name": "x",
@@ -5163,7 +5162,7 @@
         },
         {
             "file": "src/core/shape/2d_primitives.js",
-            "line": 618,
+            "line": 614,
             "description": "<p>Draws a square to the screen. A square is a four-sided shape with every angle\nat ninety degrees, and equal side size. This function is a special case of the\nrect() function, where the width and height are the same, and the parameter\nis called \"s\" for side size. By default, the first two parameters set the\nlocation of the upper-left corner, the third sets the side size of the square.\nThe way these parameters are interpreted, may be changed with the <a\nhref=\"#/p5/rectMode\">rectMode()</a> function.</p>\n<p>The fourth, fifth, sixth and seventh parameters, if specified,\ndetermine corner radius for the top-left, top-right, lower-right and\nlower-left corners, respectively. An omitted corner radius parameter is set\nto the value of the previously specified radius value in the parameter list.</p>\n",
             "itemtype": "method",
             "name": "square",
@@ -5219,7 +5218,7 @@
         },
         {
             "file": "src/core/shape/2d_primitives.js",
-            "line": 707,
+            "line": 703,
             "description": "<p>Draws a triangle to the canvas. A triangle is a plane created by connecting\nthree points. The first two arguments specify the first point, the middle two\narguments specify the second point, and the last two arguments specify the\nthird point.</p>\n",
             "itemtype": "method",
             "name": "triangle",
@@ -6289,19 +6288,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 9,
-            "description": "<p>Version of this p5.js.</p>\n",
-            "itemtype": "property",
-            "name": "VERSION",
-            "type": "String",
-            "final": 1,
-            "class": "p5",
-            "module": "Constants",
-            "submodule": "Constants"
-        },
-        {
-            "file": "src/core/constants.js",
-            "line": 18,
+            "line": 10,
             "description": "<p>The default, two-dimensional renderer.</p>\n",
             "itemtype": "property",
             "name": "P2D",
@@ -6313,7 +6300,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 24,
+            "line": 16,
             "description": "<p>One of the two render modes in p5.js: P2D (default renderer) and WEBGL\nEnables 3D render by introducing the third dimension: Z</p>\n",
             "itemtype": "property",
             "name": "WEBGL",
@@ -6325,7 +6312,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 33,
+            "line": 25,
             "itemtype": "property",
             "name": "ARROW",
             "type": "String",
@@ -6336,7 +6323,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 38,
+            "line": 30,
             "itemtype": "property",
             "name": "CROSS",
             "type": "String",
@@ -6347,7 +6334,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 43,
+            "line": 35,
             "itemtype": "property",
             "name": "HAND",
             "type": "String",
@@ -6358,7 +6345,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 48,
+            "line": 40,
             "itemtype": "property",
             "name": "MOVE",
             "type": "String",
@@ -6369,7 +6356,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 53,
+            "line": 45,
             "itemtype": "property",
             "name": "TEXT",
             "type": "String",
@@ -6380,7 +6367,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 58,
+            "line": 50,
             "itemtype": "property",
             "name": "WAIT",
             "type": "String",
@@ -6391,7 +6378,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 66,
+            "line": 58,
             "description": "<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n",
             "itemtype": "property",
             "name": "HALF_PI",
@@ -6407,7 +6394,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 84,
+            "line": 76,
             "description": "<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n",
             "itemtype": "property",
             "name": "PI",
@@ -6423,7 +6410,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 102,
+            "line": 94,
             "description": "<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n",
             "itemtype": "property",
             "name": "QUARTER_PI",
@@ -6439,7 +6426,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 120,
+            "line": 112,
             "description": "<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n",
             "itemtype": "property",
             "name": "TAU",
@@ -6455,7 +6442,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 138,
+            "line": 130,
             "description": "<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n",
             "itemtype": "property",
             "name": "TWO_PI",
@@ -6471,7 +6458,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 156,
+            "line": 148,
             "description": "<p>Constant to be used with <a href=\"#/p5/angleMode\">angleMode()</a> function, to set the mode which\np5.js interprates and calculates angles (either DEGREES or RADIANS).</p>\n",
             "itemtype": "property",
             "name": "DEGREES",
@@ -6486,7 +6473,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 170,
+            "line": 162,
             "description": "<p>Constant to be used with <a href=\"#/p5/angleMode\">angleMode()</a> function, to set the mode which\np5.js interprates and calculates angles (either RADIANS or DEGREES).</p>\n",
             "itemtype": "property",
             "name": "RADIANS",
@@ -6501,7 +6488,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 188,
+            "line": 180,
             "itemtype": "property",
             "name": "CORNER",
             "type": "String",
@@ -6512,7 +6499,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 193,
+            "line": 185,
             "itemtype": "property",
             "name": "CORNERS",
             "type": "String",
@@ -6523,7 +6510,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 198,
+            "line": 190,
             "itemtype": "property",
             "name": "RADIUS",
             "type": "String",
@@ -6534,7 +6521,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 203,
+            "line": 195,
             "itemtype": "property",
             "name": "RIGHT",
             "type": "String",
@@ -6545,7 +6532,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 208,
+            "line": 200,
             "itemtype": "property",
             "name": "LEFT",
             "type": "String",
@@ -6556,7 +6543,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 213,
+            "line": 205,
             "itemtype": "property",
             "name": "CENTER",
             "type": "String",
@@ -6567,7 +6554,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 218,
+            "line": 210,
             "itemtype": "property",
             "name": "TOP",
             "type": "String",
@@ -6578,7 +6565,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 223,
+            "line": 215,
             "itemtype": "property",
             "name": "BOTTOM",
             "type": "String",
@@ -6589,7 +6576,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 228,
+            "line": 220,
             "itemtype": "property",
             "name": "BASELINE",
             "type": "String",
@@ -6601,7 +6588,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 234,
+            "line": 226,
             "itemtype": "property",
             "name": "POINTS",
             "type": "Number",
@@ -6613,7 +6600,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 240,
+            "line": 232,
             "itemtype": "property",
             "name": "LINES",
             "type": "Number",
@@ -6625,7 +6612,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 246,
+            "line": 238,
             "itemtype": "property",
             "name": "LINE_STRIP",
             "type": "Number",
@@ -6637,7 +6624,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 252,
+            "line": 244,
             "itemtype": "property",
             "name": "LINE_LOOP",
             "type": "Number",
@@ -6649,7 +6636,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 258,
+            "line": 250,
             "itemtype": "property",
             "name": "TRIANGLES",
             "type": "Number",
@@ -6661,7 +6648,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 264,
+            "line": 256,
             "itemtype": "property",
             "name": "TRIANGLE_FAN",
             "type": "Number",
@@ -6673,7 +6660,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 270,
+            "line": 262,
             "itemtype": "property",
             "name": "TRIANGLE_STRIP",
             "type": "Number",
@@ -6685,7 +6672,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 276,
+            "line": 268,
             "itemtype": "property",
             "name": "QUADS",
             "type": "String",
@@ -6696,7 +6683,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 281,
+            "line": 273,
             "itemtype": "property",
             "name": "QUAD_STRIP",
             "type": "String",
@@ -6708,7 +6695,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 287,
+            "line": 279,
             "itemtype": "property",
             "name": "TESS",
             "type": "String",
@@ -6720,7 +6707,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 293,
+            "line": 285,
             "itemtype": "property",
             "name": "CLOSE",
             "type": "String",
@@ -6731,7 +6718,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 298,
+            "line": 290,
             "itemtype": "property",
             "name": "OPEN",
             "type": "String",
@@ -6742,7 +6729,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 303,
+            "line": 295,
             "itemtype": "property",
             "name": "CHORD",
             "type": "String",
@@ -6753,7 +6740,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 308,
+            "line": 300,
             "itemtype": "property",
             "name": "PIE",
             "type": "String",
@@ -6764,7 +6751,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 313,
+            "line": 305,
             "itemtype": "property",
             "name": "PROJECT",
             "type": "String",
@@ -6776,7 +6763,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 319,
+            "line": 311,
             "itemtype": "property",
             "name": "SQUARE",
             "type": "String",
@@ -6788,7 +6775,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 325,
+            "line": 317,
             "itemtype": "property",
             "name": "ROUND",
             "type": "String",
@@ -6799,7 +6786,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 330,
+            "line": 322,
             "itemtype": "property",
             "name": "BEVEL",
             "type": "String",
@@ -6810,7 +6797,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 335,
+            "line": 327,
             "itemtype": "property",
             "name": "MITER",
             "type": "String",
@@ -6821,7 +6808,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 342,
+            "line": 334,
             "itemtype": "property",
             "name": "RGB",
             "type": "String",
@@ -6832,7 +6819,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 347,
+            "line": 339,
             "description": "<p>HSB (hue, saturation, brightness) is a type of color model.\nYou can learn more about it at\n<a href=\"https://learnui.design/blog/the-hsb-color-system-practicioners-primer.html\">HSB</a>.</p>\n",
             "itemtype": "property",
             "name": "HSB",
@@ -6844,7 +6831,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 356,
+            "line": 348,
             "itemtype": "property",
             "name": "HSL",
             "type": "String",
@@ -6855,7 +6842,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 363,
+            "line": 355,
             "description": "<p>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 <a href=\"/#/p5.Element/size\">size</a> function as AUTO, at a time.</p>\n",
             "itemtype": "property",
             "name": "AUTO",
@@ -6867,7 +6854,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 373,
+            "line": 365,
             "itemtype": "property",
             "name": "ALT",
             "type": "Number",
@@ -6878,7 +6865,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 379,
+            "line": 371,
             "itemtype": "property",
             "name": "BACKSPACE",
             "type": "Number",
@@ -6889,7 +6876,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 384,
+            "line": 376,
             "itemtype": "property",
             "name": "CONTROL",
             "type": "Number",
@@ -6900,7 +6887,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 389,
+            "line": 381,
             "itemtype": "property",
             "name": "DELETE",
             "type": "Number",
@@ -6911,7 +6898,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 394,
+            "line": 386,
             "itemtype": "property",
             "name": "DOWN_ARROW",
             "type": "Number",
@@ -6922,7 +6909,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 399,
+            "line": 391,
             "itemtype": "property",
             "name": "ENTER",
             "type": "Number",
@@ -6933,7 +6920,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 404,
+            "line": 396,
             "itemtype": "property",
             "name": "ESCAPE",
             "type": "Number",
@@ -6944,7 +6931,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 409,
+            "line": 401,
             "itemtype": "property",
             "name": "LEFT_ARROW",
             "type": "Number",
@@ -6955,7 +6942,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 414,
+            "line": 406,
             "itemtype": "property",
             "name": "OPTION",
             "type": "Number",
@@ -6966,7 +6953,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 419,
+            "line": 411,
             "itemtype": "property",
             "name": "RETURN",
             "type": "Number",
@@ -6977,7 +6964,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 424,
+            "line": 416,
             "itemtype": "property",
             "name": "RIGHT_ARROW",
             "type": "Number",
@@ -6988,7 +6975,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 429,
+            "line": 421,
             "itemtype": "property",
             "name": "SHIFT",
             "type": "Number",
@@ -6999,7 +6986,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 434,
+            "line": 426,
             "itemtype": "property",
             "name": "TAB",
             "type": "Number",
@@ -7010,7 +6997,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 439,
+            "line": 431,
             "itemtype": "property",
             "name": "UP_ARROW",
             "type": "Number",
@@ -7021,7 +7008,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 446,
+            "line": 438,
             "itemtype": "property",
             "name": "BLEND",
             "type": "String",
@@ -7033,7 +7020,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 452,
+            "line": 444,
             "itemtype": "property",
             "name": "REMOVE",
             "type": "String",
@@ -7045,7 +7032,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 458,
+            "line": 450,
             "itemtype": "property",
             "name": "ADD",
             "type": "String",
@@ -7057,7 +7044,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 466,
+            "line": 458,
             "itemtype": "property",
             "name": "DARKEST",
             "type": "String",
@@ -7068,7 +7055,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 471,
+            "line": 463,
             "itemtype": "property",
             "name": "LIGHTEST",
             "type": "String",
@@ -7080,7 +7067,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 477,
+            "line": 469,
             "itemtype": "property",
             "name": "DIFFERENCE",
             "type": "String",
@@ -7091,7 +7078,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 482,
+            "line": 474,
             "itemtype": "property",
             "name": "SUBTRACT",
             "type": "String",
@@ -7102,7 +7089,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 487,
+            "line": 479,
             "itemtype": "property",
             "name": "EXCLUSION",
             "type": "String",
@@ -7113,7 +7100,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 492,
+            "line": 484,
             "itemtype": "property",
             "name": "MULTIPLY",
             "type": "String",
@@ -7124,7 +7111,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 497,
+            "line": 489,
             "itemtype": "property",
             "name": "SCREEN",
             "type": "String",
@@ -7135,7 +7122,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 502,
+            "line": 494,
             "itemtype": "property",
             "name": "REPLACE",
             "type": "String",
@@ -7147,7 +7134,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 508,
+            "line": 500,
             "itemtype": "property",
             "name": "OVERLAY",
             "type": "String",
@@ -7158,7 +7145,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 513,
+            "line": 505,
             "itemtype": "property",
             "name": "HARD_LIGHT",
             "type": "String",
@@ -7169,7 +7156,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 518,
+            "line": 510,
             "itemtype": "property",
             "name": "SOFT_LIGHT",
             "type": "String",
@@ -7180,7 +7167,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 523,
+            "line": 515,
             "itemtype": "property",
             "name": "DODGE",
             "type": "String",
@@ -7192,7 +7179,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 529,
+            "line": 521,
             "itemtype": "property",
             "name": "BURN",
             "type": "String",
@@ -7204,7 +7191,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 537,
+            "line": 529,
             "itemtype": "property",
             "name": "THRESHOLD",
             "type": "String",
@@ -7215,7 +7202,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 542,
+            "line": 534,
             "itemtype": "property",
             "name": "GRAY",
             "type": "String",
@@ -7226,7 +7213,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 547,
+            "line": 539,
             "itemtype": "property",
             "name": "OPAQUE",
             "type": "String",
@@ -7237,7 +7224,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 552,
+            "line": 544,
             "itemtype": "property",
             "name": "INVERT",
             "type": "String",
@@ -7248,7 +7235,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 557,
+            "line": 549,
             "itemtype": "property",
             "name": "POSTERIZE",
             "type": "String",
@@ -7259,7 +7246,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 562,
+            "line": 554,
             "itemtype": "property",
             "name": "DILATE",
             "type": "String",
@@ -7270,7 +7257,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 567,
+            "line": 559,
             "itemtype": "property",
             "name": "ERODE",
             "type": "String",
@@ -7281,7 +7268,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 572,
+            "line": 564,
             "itemtype": "property",
             "name": "BLUR",
             "type": "String",
@@ -7292,7 +7279,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 579,
+            "line": 571,
             "itemtype": "property",
             "name": "NORMAL",
             "type": "String",
@@ -7303,7 +7290,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 584,
+            "line": 576,
             "itemtype": "property",
             "name": "ITALIC",
             "type": "String",
@@ -7314,7 +7301,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 589,
+            "line": 581,
             "itemtype": "property",
             "name": "BOLD",
             "type": "String",
@@ -7325,7 +7312,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 594,
+            "line": 586,
             "itemtype": "property",
             "name": "BOLDITALIC",
             "type": "String",
@@ -7336,7 +7323,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 606,
+            "line": 598,
             "itemtype": "property",
             "name": "LINEAR",
             "type": "String",
@@ -7347,7 +7334,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 611,
+            "line": 603,
             "itemtype": "property",
             "name": "QUADRATIC",
             "type": "String",
@@ -7358,7 +7345,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 616,
+            "line": 608,
             "itemtype": "property",
             "name": "BEZIER",
             "type": "String",
@@ -7369,7 +7356,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 621,
+            "line": 613,
             "itemtype": "property",
             "name": "CURVE",
             "type": "String",
@@ -7380,7 +7367,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 628,
+            "line": 620,
             "itemtype": "property",
             "name": "STROKE",
             "type": "String",
@@ -7391,7 +7378,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 633,
+            "line": 625,
             "itemtype": "property",
             "name": "FILL",
             "type": "String",
@@ -7402,7 +7389,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 638,
+            "line": 630,
             "itemtype": "property",
             "name": "TEXTURE",
             "type": "String",
@@ -7413,7 +7400,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 643,
+            "line": 635,
             "itemtype": "property",
             "name": "IMMEDIATE",
             "type": "String",
@@ -7424,7 +7411,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 651,
+            "line": 643,
             "itemtype": "property",
             "name": "IMAGE",
             "type": "String",
@@ -7435,7 +7422,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 659,
+            "line": 651,
             "itemtype": "property",
             "name": "NEAREST",
             "type": "String",
@@ -7446,7 +7433,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 664,
+            "line": 656,
             "itemtype": "property",
             "name": "REPEAT",
             "type": "String",
@@ -7457,7 +7444,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 669,
+            "line": 661,
             "itemtype": "property",
             "name": "CLAMP",
             "type": "String",
@@ -7468,7 +7455,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 674,
+            "line": 666,
             "itemtype": "property",
             "name": "MIRROR",
             "type": "String",
@@ -7479,7 +7466,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 681,
+            "line": 673,
             "itemtype": "property",
             "name": "LANDSCAPE",
             "type": "String",
@@ -7490,7 +7477,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 686,
+            "line": 678,
             "itemtype": "property",
             "name": "PORTRAIT",
             "type": "String",
@@ -7501,7 +7488,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 696,
+            "line": 688,
             "itemtype": "property",
             "name": "GRID",
             "type": "String",
@@ -7512,7 +7499,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 702,
+            "line": 694,
             "itemtype": "property",
             "name": "AXES",
             "type": "String",
@@ -7523,7 +7510,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 708,
+            "line": 700,
             "itemtype": "property",
             "name": "LABEL",
             "type": "String",
@@ -7534,7 +7521,7 @@
         },
         {
             "file": "src/core/constants.js",
-            "line": 713,
+            "line": 705,
             "itemtype": "property",
             "name": "FALLBACK",
             "type": "String",
@@ -7765,14 +7752,6 @@
             "description": "<p>The <a href=\"#/p5/windowResized\">windowResized()</a> function is called once\nevery time the browser window is resized. This is a good place to resize the\ncanvas or do any other adjustments to accommodate the new window size.</p>\n",
             "itemtype": "method",
             "name": "windowResized",
-            "params": [
-                {
-                    "name": "event",
-                    "description": "<p>optional Event callback argument.</p>\n",
-                    "type": "Object",
-                    "optional": true
-                }
-            ],
             "example": [
                 "\n<div class=\"norender\"><code>\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</code></div>"
             ],
@@ -7783,7 +7762,7 @@
         },
         {
             "file": "src/core/environment.js",
-            "line": 476,
+            "line": 475,
             "description": "<p>System variable that stores the width of the drawing canvas. This value\nis set by the first parameter of the <a href=\"#/p5/createCanvas\">createCanvas()</a> function.\nFor example, the function call createCanvas(320, 240) sets the width\nvariable to the value 320. The value of width defaults to 100 if\n<a href=\"#/p5/createCanvas\">createCanvas()</a> is not used in a program.</p>\n",
             "itemtype": "property",
             "name": "width",
@@ -7795,7 +7774,7 @@
         },
         {
             "file": "src/core/environment.js",
-            "line": 488,
+            "line": 487,
             "description": "<p>System variable that stores the height of the drawing canvas. This value\nis set by the second parameter of the <a href=\"#/p5/createCanvas\">createCanvas()</a> function. For\nexample, the function call createCanvas(320, 240) sets the height\nvariable to the value 240. The value of height defaults to 100 if\n<a href=\"#/p5/createCanvas\">createCanvas()</a> is not used in a program.</p>\n",
             "itemtype": "property",
             "name": "height",
@@ -7807,7 +7786,7 @@
         },
         {
             "file": "src/core/environment.js",
-            "line": 500,
+            "line": 499,
             "description": "<p>If argument is given, sets the sketch to fullscreen or not based on the\nvalue of the argument. If no argument is given, returns the current\nfullscreen state. Note that due to browser restrictions this can only\nbe called on user input, for example, on mouse press like the example\nbelow.</p>\n",
             "itemtype": "method",
             "name": "fullscreen",
@@ -7833,7 +7812,7 @@
         },
         {
             "file": "src/core/environment.js",
-            "line": 550,
+            "line": 549,
             "description": "<p>Sets the pixel scaling for high pixel density displays. By default\npixel density is set to match display density, call pixelDensity(1)\nto turn this off. Calling <a href=\"#/p5/pixelDensity\">pixelDensity()</a> with no arguments returns\nthe current pixel density of the sketch.</p>\n",
             "itemtype": "method",
             "name": "pixelDensity",
@@ -7847,7 +7826,7 @@
             "submodule": "Environment",
             "overloads": [
                 {
-                    "line": 550,
+                    "line": 549,
                     "params": [
                         {
                             "name": "val",
@@ -7858,7 +7837,7 @@
                     "chainable": 1
                 },
                 {
-                    "line": 586,
+                    "line": 585,
                     "params": [],
                     "return": {
                         "description": "current pixel density of the sketch",
@@ -7869,7 +7848,7 @@
         },
         {
             "file": "src/core/environment.js",
-            "line": 605,
+            "line": 604,
             "description": "<p>Returns the pixel density of the current display the sketch is running on.</p>\n",
             "itemtype": "method",
             "name": "displayDensity",
@@ -7887,7 +7866,7 @@
         },
         {
             "file": "src/core/environment.js",
-            "line": 660,
+            "line": 659,
             "description": "<p>Gets the current URL. Note: when using the\np5 Editor, this will return an empty object because the sketch\nis embedded in an iframe. It will work correctly if you view the\nsketch using sketch the edtior's present or share URLs.</p>\n",
             "itemtype": "method",
             "name": "getURL",
@@ -7905,7 +7884,7 @@
         },
         {
             "file": "src/core/environment.js",
-            "line": 691,
+            "line": 690,
             "description": "<p>Gets the current URL path as an array. Note: when using the\np5 Editor, this will return an empty object because the sketch\nis embedded in an iframe. It will work correctly if you view the\nsketch using sketch the edtior's present or share URLs.</p>\n",
             "itemtype": "method",
             "name": "getURLPath",
@@ -7923,7 +7902,7 @@
         },
         {
             "file": "src/core/environment.js",
-            "line": 713,
+            "line": 712,
             "description": "<p>Gets the current URL params as an Object. Note: when using the\np5 Editor, this will return an empty object because the sketch\nis embedded in an iframe. It will work correctly if you view the\nsketch using sketch the edtior's present or share URLs.</p>\n",
             "itemtype": "method",
             "name": "getURLParams",
@@ -8500,7 +8479,7 @@
         },
         {
             "file": "src/core/p5.Renderer.js",
-            "line": 344,
+            "line": 365,
             "description": "<p>Helper fxn to check font type (system or otf)</p>\n",
             "class": "p5.Renderer",
             "module": "Rendering",
@@ -8508,7 +8487,7 @@
         },
         {
             "file": "src/core/p5.Renderer.js",
-            "line": 396,
+            "line": 417,
             "description": "<p>Helper fxn to measure ascent and descent.\nAdapted from <a href=\"http://stackoverflow.com/a/25355178\">http://stackoverflow.com/a/25355178</a></p>\n",
             "class": "p5.Renderer",
             "module": "Rendering",
@@ -9144,7 +9123,7 @@
         },
         {
             "file": "src/core/transform.js",
-            "line": 168,
+            "line": 167,
             "description": "<p>Replaces the current matrix with the identity matrix.</p>\n",
             "itemtype": "method",
             "name": "resetMatrix",
@@ -9159,7 +9138,7 @@
         },
         {
             "file": "src/core/transform.js",
-            "line": 193,
+            "line": 192,
             "description": "<p>Rotates a shape by the amount specified by the angle parameter. This\nfunction accounts for <a href=\"#/p5/angleMode\">angleMode</a>, so angles\ncan be entered in either RADIANS or DEGREES.</p>\n<p>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 accumulates the effect. For example, calling\nrotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI).\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n<p>Technically, <a href=\"#/p5/rotate\">rotate()</a> multiplies the current transformation matrix\nby a rotation matrix. This function can be further controlled by\nthe <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a>.</p>\n",
             "itemtype": "method",
             "name": "rotate",
@@ -9187,7 +9166,7 @@
         },
         {
             "file": "src/core/transform.js",
-            "line": 232,
+            "line": 231,
             "description": "<p>Rotates a shape around X axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.</p>\n<p>Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n",
             "itemtype": "method",
             "name": "rotateX",
@@ -9209,7 +9188,7 @@
         },
         {
             "file": "src/core/transform.js",
-            "line": 268,
+            "line": 267,
             "description": "<p>Rotates a shape around Y axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.</p>\n<p>Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n",
             "itemtype": "method",
             "name": "rotateY",
@@ -9231,7 +9210,7 @@
         },
         {
             "file": "src/core/transform.js",
-            "line": 304,
+            "line": 303,
             "description": "<p>Rotates a shape around Z axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.</p>\n<p>This method works in WEBGL mode only.</p>\n<p>Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n",
             "itemtype": "method",
             "name": "rotateZ",
@@ -9253,7 +9232,7 @@
         },
         {
             "file": "src/core/transform.js",
-            "line": 342,
+            "line": 341,
             "description": "<p>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%.</p>\n<p>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 <a href=\"#/p5/scale\">scale()</a> is called\nwithin <a href=\"#/p5/draw\">draw()</a>, the transformation is reset when the loop begins again.</p>\n<p>Using this function with the z parameter is only available in WEBGL mode.\nThis function can be further controlled with <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a>.</p>\n",
             "itemtype": "method",
             "name": "scale",
@@ -9267,7 +9246,7 @@
             "submodule": "Transform",
             "overloads": [
                 {
-                    "line": 342,
+                    "line": 341,
                     "params": [
                         {
                             "name": "s",
@@ -9290,7 +9269,7 @@
                     "chainable": 1
                 },
                 {
-                    "line": 386,
+                    "line": 385,
                     "params": [
                         {
                             "name": "scales",
@@ -9304,7 +9283,7 @@
         },
         {
             "file": "src/core/transform.js",
-            "line": 416,
+            "line": 415,
             "description": "<p>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.</p>\n<p>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 <a href=\"#/p5/shearX\">shearX()</a> is called within the <a href=\"#/p5/draw\">draw()</a>,\nthe transformation is reset when the loop begins again.</p>\n<p>Technically, <a href=\"#/p5/shearX\">shearX()</a> multiplies the current\ntransformation matrix by a rotation matrix. This function can be further\ncontrolled by the <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions.</p>\n",
             "itemtype": "method",
             "name": "shearX",
@@ -9326,7 +9305,7 @@
         },
         {
             "file": "src/core/transform.js",
-            "line": 455,
+            "line": 454,
             "description": "<p>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.</p>\n<p>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\n<a href=\"#/p5/shearY\">shearY()</a> is called within the <a href=\"#/p5/draw\">draw()</a>, the transformation is reset when\nthe loop begins again.</p>\n<p>Technically, <a href=\"#/p5/shearY\">shearY()</a> multiplies the current transformation matrix by a\nrotation matrix. This function can be further controlled by the\n<a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions.</p>\n",
             "itemtype": "method",
             "name": "shearY",
@@ -9348,7 +9327,7 @@
         },
         {
             "file": "src/core/transform.js",
-            "line": 494,
+            "line": 493,
             "description": "<p>Specifies an amount to displace objects within the display window.\nThe x parameter specifies left/right translation, the y parameter\nspecifies up/down translation.</p>\n<p>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 <a href=\"#/p5/translate\">translate()</a> is called within <a href=\"#/p5/draw\">draw()</a>, the\ntransformation is reset when the loop begins again. This function can be\nfurther controlled by using <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a>.</p>\n",
             "itemtype": "method",
             "name": "translate",
@@ -9362,7 +9341,7 @@
             "submodule": "Transform",
             "overloads": [
                 {
-                    "line": 494,
+                    "line": 493,
                     "params": [
                         {
                             "name": "x",
@@ -9384,7 +9363,7 @@
                     "chainable": 1
                 },
                 {
-                    "line": 547,
+                    "line": 546,
                     "params": [
                         {
                             "name": "vector",
@@ -11064,7 +11043,7 @@
                 "type": "String"
             },
             "example": [
-                "\n<div><code class='norender'>\nlet myDiv = createDiv('I like pandas.');\nmyDiv.style('font-size', '18px');\nmyDiv.style('color', '#ff0000');\nmyDiv.position(0, 0);\n</code></div>\n<div><code class='norender'>\nlet col = color(25, 23, 200, 50);\nlet button = createButton('button');\nbutton.style('background-color', col);\nbutton.position(0, 0);\n</code></div>\n<div><code class='norender'>\nlet myDiv, fontSize;\nfunction setup() {\n  background(200);\n  myDiv = createDiv('I like gray.');\n  myDiv.position(0, 0);\n  myDiv.style('z-index', 10);\n}\n\nfunction draw() {\n  fontSize = min(mouseX, 90);\n  myDiv.style('font-size', fontSize + 'px');\n}\n</code></div>"
+                "\n<div><code class='norender'>\nlet myDiv = createDiv('I like pandas.');\nmyDiv.style('font-size', '18px');\nmyDiv.style('color', '#ff0000');\n</code></div>\n<div><code class='norender'>\nlet col = color(25, 23, 200, 50);\nlet button = createButton('button');\nbutton.style('background-color', col);\nbutton.position(10, 10);\n</code></div>\n<div><code class='norender'>\nlet myDiv;\nfunction setup() {\n  background(200);\n  myDiv = createDiv('I like gray.');\n  myDiv.position(20, 20);\n}\n\nfunction draw() {\n  myDiv.style('font-size', mouseX + 'px');\n}\n</code></div>"
             ],
             "class": "p5.Element",
             "module": "DOM",
@@ -11085,7 +11064,7 @@
                     }
                 },
                 {
-                    "line": 1880,
+                    "line": 1877,
                     "params": [
                         {
                             "name": "property",
@@ -11108,7 +11087,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 1937,
+            "line": 1934,
             "description": "<p>Adds a new attribute or changes the value of an existing attribute\n on the specified element. If no value is specified, returns the\n value of the given attribute, or null if attribute is not set.</p>\n",
             "itemtype": "method",
             "name": "attribute",
@@ -11124,7 +11103,7 @@
             "submodule": "DOM",
             "overloads": [
                 {
-                    "line": 1937,
+                    "line": 1934,
                     "params": [],
                     "return": {
                         "description": "value of attribute",
@@ -11132,7 +11111,7 @@
                     }
                 },
                 {
-                    "line": 1952,
+                    "line": 1949,
                     "params": [
                         {
                             "name": "attr",
@@ -11151,7 +11130,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 1981,
+            "line": 1978,
             "description": "<p>Removes an attribute on the specified element.</p>\n",
             "itemtype": "method",
             "name": "removeAttribute",
@@ -11172,7 +11151,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2026,
+            "line": 2023,
             "description": "<p>Either returns the value of the element if no arguments\ngiven, or sets the value of the element.</p>\n",
             "itemtype": "method",
             "name": "value",
@@ -11188,7 +11167,7 @@
             "submodule": "DOM",
             "overloads": [
                 {
-                    "line": 2026,
+                    "line": 2023,
                     "params": [],
                     "return": {
                         "description": "value of the element",
@@ -11196,7 +11175,7 @@
                     }
                 },
                 {
-                    "line": 2056,
+                    "line": 2053,
                     "params": [
                         {
                             "name": "value",
@@ -11210,7 +11189,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2072,
+            "line": 2069,
             "description": "<p>Shows the current element. Essentially, setting display:block for the style.</p>\n",
             "itemtype": "method",
             "name": "show",
@@ -11224,7 +11203,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2090,
+            "line": 2087,
             "description": "<p>Hides the current element. Essentially, setting display:none for the style.</p>\n",
             "itemtype": "method",
             "name": "hide",
@@ -11238,7 +11217,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2106,
+            "line": 2103,
             "description": "<p>Sets the width and height of the element. AUTO can be used to\n only adjust one dimension at a time. If no arguments are given, it\n returns the width and height of the element in an object. In case of\n elements which need to be loaded, such as images, it is recommended\n to call the function after the element has finished loading.</p>\n",
             "itemtype": "method",
             "name": "size",
@@ -11254,7 +11233,7 @@
             "submodule": "DOM",
             "overloads": [
                 {
-                    "line": 2106,
+                    "line": 2103,
                     "params": [],
                     "return": {
                         "description": "the width and height of the element in an object",
@@ -11262,7 +11241,7 @@
                     }
                 },
                 {
-                    "line": 2130,
+                    "line": 2127,
                     "params": [
                         {
                             "name": "w",
@@ -11282,7 +11261,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2187,
+            "line": 2184,
             "description": "<p>Removes the element, stops all media streams, and deregisters all listeners.</p>\n",
             "itemtype": "method",
             "name": "remove",
@@ -11295,7 +11274,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2225,
+            "line": 2222,
             "description": "<p>Registers a callback that gets called every time a file that is\ndropped on the element has been loaded.\np5 will load every dropped file into memory and pass it as a p5.File object to the callback.\nMultiple files dropped at the same time will result in multiple calls to the callback.</p>\n<p>You can optionally pass a second callback which will be registered to the raw\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/Events/drop\">drop</a> event.\nThe callback will thus be provided the original\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/DragEvent\">DragEvent</a>.\nDropping multiple files at the same time will trigger the second callback once per drop,\nwhereas the first callback will trigger for each loaded file.</p>\n",
             "itemtype": "method",
             "name": "drop",
@@ -11323,7 +11302,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2357,
+            "line": 2354,
             "description": "<p>Path to the media element source.</p>\n",
             "itemtype": "property",
             "name": "src",
@@ -11340,7 +11319,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2423,
+            "line": 2420,
             "description": "<p>Play an HTML5 media element.</p>\n",
             "itemtype": "method",
             "name": "play",
@@ -11354,7 +11333,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2487,
+            "line": 2484,
             "description": "<p>Stops an HTML5 media element (sets current time to zero).</p>\n",
             "itemtype": "method",
             "name": "stop",
@@ -11368,7 +11347,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2551,
+            "line": 2548,
             "description": "<p>Pauses an HTML5 media element.</p>\n",
             "itemtype": "method",
             "name": "pause",
@@ -11382,7 +11361,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2613,
+            "line": 2610,
             "description": "<p>Set 'loop' to true for an HTML5 media element, and starts playing.</p>\n",
             "itemtype": "method",
             "name": "loop",
@@ -11396,7 +11375,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2669,
+            "line": 2666,
             "description": "<p>Set 'loop' to false for an HTML5 media element. Element will stop\nwhen it reaches the end.</p>\n",
             "itemtype": "method",
             "name": "noLoop",
@@ -11410,7 +11389,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2735,
+            "line": 2732,
             "description": "<p>Set HTML5 media element to autoplay or not. If no argument is specified, by\ndefault it will autoplay.</p>\n",
             "itemtype": "method",
             "name": "autoplay",
@@ -11432,7 +11411,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2802,
+            "line": 2799,
             "description": "<p>Sets volume for this HTML5 media element. If no argument is given,\nreturns the current volume.</p>\n",
             "itemtype": "method",
             "name": "volume",
@@ -11448,7 +11427,7 @@
             "submodule": "DOM",
             "overloads": [
                 {
-                    "line": 2802,
+                    "line": 2799,
                     "params": [],
                     "return": {
                         "description": "current volume",
@@ -11456,7 +11435,7 @@
                     }
                 },
                 {
-                    "line": 2875,
+                    "line": 2872,
                     "params": [
                         {
                             "name": "val",
@@ -11470,7 +11449,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2888,
+            "line": 2885,
             "description": "<p>If no arguments are given, returns the current playback speed of the\nelement. The speed parameter sets the speed where 2.0 will play the\nelement twice as fast, 0.5 will play at half the speed, and -1 will play\nthe element in normal speed in reverse.(Note that not all browsers support\nbackward playback and even if they do, playback might not be smooth.)</p>\n",
             "itemtype": "method",
             "name": "speed",
@@ -11486,7 +11465,7 @@
             "submodule": "DOM",
             "overloads": [
                 {
-                    "line": 2888,
+                    "line": 2885,
                     "params": [],
                     "return": {
                         "description": "current playback speed of the element",
@@ -11494,7 +11473,7 @@
                     }
                 },
                 {
-                    "line": 2960,
+                    "line": 2957,
                     "params": [
                         {
                             "name": "speed",
@@ -11508,7 +11487,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 2977,
+            "line": 2974,
             "description": "<p>If no arguments are given, returns the current time of the element.\nIf an argument is given the current time of the element is set to it.</p>\n",
             "itemtype": "method",
             "name": "time",
@@ -11524,7 +11503,7 @@
             "submodule": "DOM",
             "overloads": [
                 {
-                    "line": 2977,
+                    "line": 2974,
                     "params": [],
                     "return": {
                         "description": "current time (in seconds)",
@@ -11532,7 +11511,7 @@
                     }
                 },
                 {
-                    "line": 3022,
+                    "line": 3019,
                     "params": [
                         {
                             "name": "time",
@@ -11546,7 +11525,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3036,
+            "line": 3033,
             "description": "<p>Returns the duration of the HTML5 media element.</p>\n",
             "itemtype": "method",
             "name": "duration",
@@ -11563,7 +11542,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3158,
+            "line": 3155,
             "description": "<p>Schedule an event to be called when the audio or video\nelement reaches the end. If the element is looping,\nthis will not be called. The element is passed in\nas the argument to the onended callback.</p>\n",
             "itemtype": "method",
             "name": "onended",
@@ -11584,14 +11563,14 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3189,
+            "line": 3186,
             "class": "p5.MediaElement",
             "module": "DOM",
             "submodule": "DOM"
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3191,
+            "line": 3188,
             "description": "<p>Send the audio output of this element to a specified audioNode or\np5.sound object. If no element is provided, connects to p5's main\noutput. That connection is established when this method is first called.\nAll connections are removed by the .disconnect() method.</p>\n<p>This method is meant to be used with the p5.sound.js addon library.</p>\n",
             "itemtype": "method",
             "name": "connect",
@@ -11608,7 +11587,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3240,
+            "line": 3237,
             "description": "<p>Disconnect all Web Audio routing, including to main output.\nThis is useful if you want to re-route the output through\naudio effects, for example.</p>\n",
             "itemtype": "method",
             "name": "disconnect",
@@ -11618,14 +11597,14 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3255,
+            "line": 3252,
             "class": "p5.MediaElement",
             "module": "DOM",
             "submodule": "DOM"
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3257,
+            "line": 3254,
             "description": "<p>Show the default MediaElement controls, as determined by the web browser.</p>\n",
             "itemtype": "method",
             "name": "showControls",
@@ -11638,7 +11617,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3288,
+            "line": 3285,
             "description": "<p>Hide the default mediaElement controls.</p>\n",
             "itemtype": "method",
             "name": "hideControls",
@@ -11651,14 +11630,14 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3317,
+            "line": 3314,
             "class": "p5.MediaElement",
             "module": "DOM",
             "submodule": "DOM"
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3328,
+            "line": 3325,
             "description": "<p>Schedule events to trigger every time a MediaElement\n(audio/video) reaches a playback cue point.</p>\n<p>Accepts a callback function, a time (in seconds) at which to trigger\nthe callback, and an optional parameter for the callback.</p>\n<p>Time will be passed as the first parameter to the callback function,\nand param will be the second parameter.</p>\n",
             "itemtype": "method",
             "name": "addCue",
@@ -11693,7 +11672,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3391,
+            "line": 3388,
             "description": "<p>Remove a callback based on its ID. The ID is returned by the\naddCue method.</p>\n",
             "itemtype": "method",
             "name": "removeCue",
@@ -11713,7 +11692,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3433,
+            "line": 3430,
             "description": "<p>Remove all of the callbacks that had originally been scheduled\nvia the addCue method.</p>\n",
             "itemtype": "method",
             "name": "clearCues",
@@ -11733,7 +11712,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3499,
+            "line": 3496,
             "description": "<p>Underlying File object. All normal File methods can be called on this.</p>\n",
             "itemtype": "property",
             "name": "file",
@@ -11743,7 +11722,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3511,
+            "line": 3508,
             "description": "<p>File type (image, text, etc.)</p>\n",
             "itemtype": "property",
             "name": "type",
@@ -11753,7 +11732,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3517,
+            "line": 3514,
             "description": "<p>File subtype (usually the file extension jpg, png, xml, etc.)</p>\n",
             "itemtype": "property",
             "name": "subtype",
@@ -11763,7 +11742,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3523,
+            "line": 3520,
             "description": "<p>File name</p>\n",
             "itemtype": "property",
             "name": "name",
@@ -11773,7 +11752,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3529,
+            "line": 3526,
             "description": "<p>File size</p>\n",
             "itemtype": "property",
             "name": "size",
@@ -11783,7 +11762,7 @@
         },
         {
             "file": "src/dom/dom.js",
-            "line": 3536,
+            "line": 3533,
             "description": "<p>URL string containing either image data, the text contents of the file or\na parsed object if file is JSON and p5.XML if XML</p>\n",
             "itemtype": "property",
             "name": "data",
@@ -12137,14 +12116,6 @@
             "description": "<p>The <a href=\"#/p5/keyPressed\">keyPressed()</a> function is called once every time a key is pressed. The\nkeyCode for the key that was pressed is stored in the <a href=\"#/p5/keyCode\">keyCode</a> variable.</p>\n<p>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.</p>\n<p>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 <a href=\"#/p5/keyTyped\">keyTyped()</a> to read the key variable, in which the\ncase of the variable will be distinguished.</p>\n<p>Because of how operating systems handle key repeats, holding down a key\nmay cause multiple calls to <a href=\"#/p5/keyTyped\">keyTyped()</a> (and <a href=\"#/p5/keyReleased\">keyReleased()</a> as well). The\nrate of repeat is set by the operating system and how each computer is\nconfigured.<br><br>\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.</p>\n",
             "itemtype": "method",
             "name": "keyPressed",
-            "params": [
-                {
-                    "name": "event",
-                    "description": "<p>optional KeyboardEvent callback argument.</p>\n",
-                    "type": "Object",
-                    "optional": true
-                }
-            ],
             "example": [
                 "\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyPressed() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyPressed() {\n  if (keyCode === LEFT_ARROW) {\n    value = 255;\n  } else if (keyCode === RIGHT_ARROW) {\n    value = 0;\n  }\n}\n</code>\n</div>\n<div class=\"norender\">\n<code>\nfunction keyPressed() {\n  // Do something\n  return false; // prevent any default behaviour\n}\n</code>\n</div>"
             ],
@@ -12155,18 +12126,10 @@
         },
         {
             "file": "src/events/keyboard.js",
-            "line": 190,
+            "line": 189,
             "description": "<p>The <a href=\"#/p5/keyReleased\">keyReleased()</a> function is called once every time a key is released.\nSee <a href=\"#/p5/key\">key</a> and <a href=\"#/p5/keyCode\">keyCode</a> for more information.<br><br>\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.</p>\n",
             "itemtype": "method",
             "name": "keyReleased",
-            "params": [
-                {
-                    "name": "event",
-                    "description": "<p>optional KeyboardEvent callback argument.</p>\n",
-                    "type": "Object",
-                    "optional": true
-                }
-            ],
             "example": [
                 "\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyReleased() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n  return false; // prevent any default behavior\n}\n</code>\n</div>"
             ],
@@ -12177,18 +12140,10 @@
         },
         {
             "file": "src/events/keyboard.js",
-            "line": 243,
+            "line": 241,
             "description": "<p>The <a href=\"#/p5/keyTyped\">keyTyped()</a> 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 <a href=\"#/p5/keyPressed\">keyPressed()</a> function instead.\nThe most recent key typed will be stored in the key variable.</p>\n<p>Because of how operating systems handle key repeats, holding down a key\nwill cause multiple calls to <a href=\"#/p5/keyTyped\">keyTyped()</a> (and <a href=\"#/p5/keyReleased\">keyReleased()</a> as well). The\nrate of repeat is set by the operating system and how each computer is\nconfigured.<br><br>\nBrowsers may have different default behaviors attached to various key\nevents. To prevent any default behavior for this event, add \"return false\"\nto the end of the method.</p>\n",
             "itemtype": "method",
             "name": "keyTyped",
-            "params": [
-                {
-                    "name": "event",
-                    "description": "<p>optional KeyboardEvent callback argument.</p>\n",
-                    "type": "Object",
-                    "optional": true
-                }
-            ],
             "example": [
                 "\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyTyped() {\n  if (key === 'a') {\n    value = 255;\n  } else if (key === 'b') {\n    value = 0;\n  }\n  // uncomment to prevent any default behavior\n  // return false;\n}\n</code>\n</div>"
             ],
@@ -12199,7 +12154,7 @@
         },
         {
             "file": "src/events/keyboard.js",
-            "line": 298,
+            "line": 295,
             "description": "<p>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.</p>\n",
             "class": "p5",
             "module": "Events",
@@ -12207,7 +12162,7 @@
         },
         {
             "file": "src/events/keyboard.js",
-            "line": 308,
+            "line": 305,
             "description": "<p>The <a href=\"#/p5/keyIsDown\">keyIsDown()</a> 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 <a href=\"#/p5/keyCode\">keyCode</a> names listed\n<a href=\"http://p5js.org/reference/#p5/keyCode\">here</a>.</p>\n",
             "itemtype": "method",
             "name": "keyIsDown",
@@ -12867,7 +12822,7 @@
         },
         {
             "file": "src/image/loading_displaying.js",
-            "line": 162,
+            "line": 153,
             "description": "<p>Helper function for loading GIF-based images</p>\n",
             "class": "p5",
             "module": "Image",
@@ -12875,7 +12830,7 @@
         },
         {
             "file": "src/image/loading_displaying.js",
-            "line": 269,
+            "line": 260,
             "description": "<p>Draw an image to the p5.js canvas.</p>\n<p>This function can be used with different numbers of parameters. The\nsimplest use requires only three parameters: img, x, and y—where (x, y) is\nthe position of the image. Two more parameters can optionally be added to\nspecify the width and height of the image.</p>\n<p>This function can also be used with all eight Number parameters. To\ndifferentiate between all these parameters, p5.js uses the language of\n\"destination rectangle\" (which corresponds to \"dx\", \"dy\", etc.) and \"source\nimage\" (which corresponds to \"sx\", \"sy\", etc.) below. Specifying the\n\"source image\" dimensions can be useful when you want to display a\nsubsection of the source image instead of the whole thing. Here's a diagram\nto explain further:\n<img src=\"assets/drawImage.png\"></img></p>\n",
             "itemtype": "method",
             "name": "image",
@@ -12888,7 +12843,7 @@
             "submodule": "Loading & Displaying",
             "overloads": [
                 {
-                    "line": 269,
+                    "line": 260,
                     "params": [
                         {
                             "name": "img",
@@ -12920,7 +12875,7 @@
                     ]
                 },
                 {
-                    "line": 356,
+                    "line": 347,
                     "params": [
                         {
                             "name": "img",
@@ -12975,7 +12930,7 @@
         },
         {
             "file": "src/image/loading_displaying.js",
-            "line": 439,
+            "line": 430,
             "description": "<p>Sets the fill value for displaying images. Images can be tinted to\nspecified colors or made transparent by including an alpha value.</p>\n<p>To apply transparency to an image without affecting its color, use\nwhite as the tint color and specify an alpha value. For instance,\ntint(255, 128) will make an image 50% transparent (assuming the default\nalpha range of 0-255, which can be changed with <a href=\"#/p5/colorMode\">colorMode()</a>).</p>\n<p>The value for the gray parameter must be less than or equal to the current\nmaximum value as specified by <a href=\"#/p5/colorMode\">colorMode()</a>. The default maximum value is\n255.</p>\n",
             "itemtype": "method",
             "name": "tint",
@@ -12988,7 +12943,7 @@
             "submodule": "Loading & Displaying",
             "overloads": [
                 {
-                    "line": 439,
+                    "line": 430,
                     "params": [
                         {
                             "name": "v1",
@@ -13014,7 +12969,7 @@
                     ]
                 },
                 {
-                    "line": 510,
+                    "line": 501,
                     "params": [
                         {
                             "name": "value",
@@ -13024,7 +12979,7 @@
                     ]
                 },
                 {
-                    "line": 515,
+                    "line": 506,
                     "params": [
                         {
                             "name": "gray",
@@ -13040,7 +12995,7 @@
                     ]
                 },
                 {
-                    "line": 521,
+                    "line": 512,
                     "params": [
                         {
                             "name": "values",
@@ -13050,7 +13005,7 @@
                     ]
                 },
                 {
-                    "line": 527,
+                    "line": 518,
                     "params": [
                         {
                             "name": "color",
@@ -13063,7 +13018,7 @@
         },
         {
             "file": "src/image/loading_displaying.js",
-            "line": 537,
+            "line": 528,
             "description": "<p>Removes the current fill value for displaying images and reverts to\ndisplaying images with their original hues.</p>\n",
             "itemtype": "method",
             "name": "noTint",
@@ -13077,7 +13032,7 @@
         },
         {
             "file": "src/image/loading_displaying.js",
-            "line": 601,
+            "line": 592,
             "description": "<p>Set image mode. Modifies the location from which images are drawn by\nchanging the way in which parameters given to <a href=\"#/p5/image\">image()</a> are interpreted.\nThe default mode is imageMode(CORNER), which interprets the second and\nthird parameters of <a href=\"#/p5/image\">image()</a> as the upper-left corner of the image. If\ntwo additional parameters are specified, they are used to set the image's\nwidth and height.</p>\n<p>imageMode(CORNERS) interprets the second and third parameters of <a href=\"#/p5/image\">image()</a>\nas the location of one corner, and the fourth and fifth parameters as the\nopposite corner.</p>\n<p>imageMode(CENTER) interprets the second and third parameters of <a href=\"#/p5/image\">image()</a>\nas the image's center point. If two additional parameters are specified,\nthey are used to set the image's width and height.</p>\n",
             "itemtype": "method",
             "name": "imageMode",
@@ -19653,12 +19608,6 @@
                             "name": "ns",
                             "description": "<p>values to parse</p>\n",
                             "type": "Array"
-                        },
-                        {
-                            "name": "radix",
-                            "description": "",
-                            "type": "Integer",
-                            "optional": true
                         }
                     ],
                     "return": {
@@ -19670,7 +19619,7 @@
         },
         {
             "file": "src/utilities/conversion.js",
-            "line": 88,
+            "line": 87,
             "description": "<p>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.</p>\n",
             "itemtype": "method",
             "name": "str",
@@ -19694,7 +19643,7 @@
         },
         {
             "file": "src/utilities/conversion.js",
-            "line": 114,
+            "line": 113,
             "description": "<p>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.</p>\n",
             "itemtype": "method",
             "name": "boolean",
@@ -19718,7 +19667,7 @@
         },
         {
             "file": "src/utilities/conversion.js",
-            "line": 146,
+            "line": 145,
             "description": "<p>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.</p>\n",
             "itemtype": "method",
             "name": "byte",
@@ -19734,7 +19683,7 @@
             "submodule": "Conversion",
             "overloads": [
                 {
-                    "line": 146,
+                    "line": 145,
                     "params": [
                         {
                             "name": "n",
@@ -19748,7 +19697,7 @@
                     }
                 },
                 {
-                    "line": 168,
+                    "line": 167,
                     "params": [
                         {
                             "name": "ns",
@@ -19765,7 +19714,7 @@
         },
         {
             "file": "src/utilities/conversion.js",
-            "line": 182,
+            "line": 181,
             "description": "<p>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.</p>\n",
             "itemtype": "method",
             "name": "char",
@@ -19781,7 +19730,7 @@
             "submodule": "Conversion",
             "overloads": [
                 {
-                    "line": 182,
+                    "line": 181,
                     "params": [
                         {
                             "name": "n",
@@ -19795,7 +19744,7 @@
                     }
                 },
                 {
-                    "line": 201,
+                    "line": 200,
                     "params": [
                         {
                             "name": "ns",
@@ -19812,7 +19761,7 @@
         },
         {
             "file": "src/utilities/conversion.js",
-            "line": 216,
+            "line": 215,
             "description": "<p>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.</p>\n",
             "itemtype": "method",
             "name": "unchar",
@@ -19828,7 +19777,7 @@
             "submodule": "Conversion",
             "overloads": [
                 {
-                    "line": 216,
+                    "line": 215,
                     "params": [
                         {
                             "name": "n",
@@ -19842,7 +19791,7 @@
                     }
                 },
                 {
-                    "line": 232,
+                    "line": 231,
                     "params": [
                         {
                             "name": "ns",
@@ -19859,7 +19808,7 @@
         },
         {
             "file": "src/utilities/conversion.js",
-            "line": 245,
+            "line": 244,
             "description": "<p>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.</p>\n",
             "itemtype": "method",
             "name": "hex",
@@ -19875,7 +19824,7 @@
             "submodule": "Conversion",
             "overloads": [
                 {
-                    "line": 245,
+                    "line": 244,
                     "params": [
                         {
                             "name": "n",
@@ -19895,7 +19844,7 @@
                     }
                 },
                 {
-                    "line": 265,
+                    "line": 264,
                     "params": [
                         {
                             "name": "ns",
@@ -19918,7 +19867,7 @@
         },
         {
             "file": "src/utilities/conversion.js",
-            "line": 295,
+            "line": 294,
             "description": "<p>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.</p>\n",
             "itemtype": "method",
             "name": "unhex",
@@ -19934,7 +19883,7 @@
             "submodule": "Conversion",
             "overloads": [
                 {
-                    "line": 295,
+                    "line": 294,
                     "params": [
                         {
                             "name": "n",
@@ -19948,7 +19897,7 @@
                     }
                 },
                 {
-                    "line": 311,
+                    "line": 310,
                     "params": [
                         {
                             "name": "ns",
@@ -28142,35 +28091,35 @@
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/shape/2d_primitives.js:232"
+            "line": " src/core/shape/2d_primitives.js:231"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/shape/2d_primitives.js:275"
+            "line": " src/core/shape/2d_primitives.js:271"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/shape/2d_primitives.js:339"
+            "line": " src/core/shape/2d_primitives.js:335"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/shape/2d_primitives.js:400"
+            "line": " src/core/shape/2d_primitives.js:396"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/shape/2d_primitives.js:478"
+            "line": " src/core/shape/2d_primitives.js:474"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/shape/2d_primitives.js:552"
+            "line": " src/core/shape/2d_primitives.js:548"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/shape/2d_primitives.js:618"
+            "line": " src/core/shape/2d_primitives.js:614"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/shape/2d_primitives.js:707"
+            "line": " src/core/shape/2d_primitives.js:703"
         },
         {
             "message": "unknown tag: alt",
@@ -28274,23 +28223,23 @@
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/constants.js:66"
+            "line": " src/core/constants.js:58"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/constants.js:84"
+            "line": " src/core/constants.js:76"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/constants.js:102"
+            "line": " src/core/constants.js:94"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/constants.js:120"
+            "line": " src/core/constants.js:112"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/constants.js:138"
+            "line": " src/core/constants.js:130"
         },
         {
             "message": "unknown tag: alt",
@@ -28342,35 +28291,35 @@
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/environment.js:500"
+            "line": " src/core/environment.js:499"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/environment.js:550"
+            "line": " src/core/environment.js:549"
         },
         {
             "message": "replacing incorrect tag: returns with return",
-            "line": " src/core/environment.js:586"
+            "line": " src/core/environment.js:585"
         },
         {
             "message": "replacing incorrect tag: returns with return",
-            "line": " src/core/environment.js:605"
+            "line": " src/core/environment.js:604"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/environment.js:605"
+            "line": " src/core/environment.js:604"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/environment.js:660"
+            "line": " src/core/environment.js:659"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/environment.js:691"
+            "line": " src/core/environment.js:690"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/environment.js:713"
+            "line": " src/core/environment.js:712"
         },
         {
             "message": "replacing incorrect tag: function with method",
@@ -28602,39 +28551,39 @@
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/transform.js:168"
+            "line": " src/core/transform.js:167"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/transform.js:193"
+            "line": " src/core/transform.js:192"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/transform.js:232"
+            "line": " src/core/transform.js:231"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/transform.js:268"
+            "line": " src/core/transform.js:267"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/transform.js:304"
+            "line": " src/core/transform.js:303"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/transform.js:342"
+            "line": " src/core/transform.js:341"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/transform.js:416"
+            "line": " src/core/transform.js:415"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/transform.js:455"
+            "line": " src/core/transform.js:454"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/core/transform.js:494"
+            "line": " src/core/transform.js:493"
         },
         {
             "message": "unknown tag: alt",
@@ -28674,11 +28623,11 @@
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/dom/dom.js:2225"
+            "line": " src/dom/dom.js:2222"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/dom/dom.js:2735"
+            "line": " src/dom/dom.js:2732"
         },
         {
             "message": "unknown tag: alt",
@@ -28758,15 +28707,15 @@
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/events/keyboard.js:190"
+            "line": " src/events/keyboard.js:189"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/events/keyboard.js:243"
+            "line": " src/events/keyboard.js:241"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/events/keyboard.js:308"
+            "line": " src/events/keyboard.js:305"
         },
         {
             "message": "unknown tag: alt",
@@ -28886,23 +28835,23 @@
         },
         {
             "message": "replacing incorrect tag: returns with return",
-            "line": " src/image/loading_displaying.js:252"
+            "line": " src/image/loading_displaying.js:243"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/image/loading_displaying.js:269"
+            "line": " src/image/loading_displaying.js:260"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/image/loading_displaying.js:439"
+            "line": " src/image/loading_displaying.js:430"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/image/loading_displaying.js:537"
+            "line": " src/image/loading_displaying.js:528"
         },
         {
             "message": "unknown tag: alt",
-            "line": " src/image/loading_displaying.js:601"
+            "line": " src/image/loading_displaying.js:592"
         },
         {
             "message": "unknown tag: alt",
@@ -29830,11 +29779,11 @@
         },
         {
             "message": "Missing item type\nHelper fxn to check font type (system or otf)",
-            "line": " src/core/p5.Renderer.js:344"
+            "line": " src/core/p5.Renderer.js:365"
         },
         {
             "message": "Missing item type\nHelper fxn to measure ascent and descent.\nAdapted from http://stackoverflow.com/a/25355178",
-            "line": " src/core/p5.Renderer.js:396"
+            "line": " src/core/p5.Renderer.js:417"
         },
         {
             "message": "Missing item type\np5.Renderer2D\nThe 2D graphics canvas renderer class.\nextends p5.Renderer",
@@ -29902,15 +29851,15 @@
         },
         {
             "message": "Missing item type",
-            "line": " src/dom/dom.js:3189"
+            "line": " src/dom/dom.js:3186"
         },
         {
             "message": "Missing item type",
-            "line": " src/dom/dom.js:3255"
+            "line": " src/dom/dom.js:3252"
         },
         {
             "message": "Missing item type",
-            "line": " src/dom/dom.js:3317"
+            "line": " src/dom/dom.js:3314"
         },
         {
             "message": "Missing item type\n_updatePAccelerations updates the pAcceleration values",
@@ -29918,11 +29867,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:298"
+            "line": " src/events/keyboard.js:295"
         },
         {
             "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:384"
+            "line": " src/events/keyboard.js:381"
         },
         {
             "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.",
@@ -29934,51 +29883,51 @@
         },
         {
             "message": "Missing item type\nReturns a 32 bit number containing ARGB data at ith pixel in the\n1D array containing pixels data.",
-            "line": " src/image/filters.js:60"
+            "line": " src/image/filters.js:44"
         },
         {
             "message": "Missing item type\nModifies pixels RGBA values to values contained in the data object.",
-            "line": " src/image/filters.js:81"
+            "line": " src/image/filters.js:65"
         },
         {
             "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:101"
+            "line": " src/image/filters.js:85"
         },
         {
             "message": "Missing item type\nReturns a blank ImageData object.",
-            "line": " src/image/filters.js:121"
+            "line": " src/image/filters.js:105"
         },
         {
             "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:136"
+            "line": " src/image/filters.js:120"
         },
         {
             "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:189"
+            "line": " src/image/filters.js:173"
         },
         {
             "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:223"
+            "line": " src/image/filters.js:207"
         },
         {
             "message": "Missing item type\nSets the alpha channel to entirely opaque. No parameter is used.",
-            "line": " src/image/filters.js:246"
+            "line": " src/image/filters.js:230"
         },
         {
             "message": "Missing item type\nSets each pixel to its inverse value. No parameter is used.",
-            "line": " src/image/filters.js:262"
+            "line": " src/image/filters.js:246"
         },
         {
             "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:277"
+            "line": " src/image/filters.js:261"
         },
         {
             "message": "Missing item type\nreduces the bright areas in an image",
-            "line": " src/image/filters.js:309"
+            "line": " src/image/filters.js:293"
         },
         {
             "message": "Missing item type\nincreases the bright areas in an image",
-            "line": " src/image/filters.js:396"
+            "line": " src/image/filters.js:380"
         },
         {
             "message": "Missing item type\nThis module defines the p5 methods for the <a href=\"#/p5.Image\">p5.Image</a> class\nfor drawing images to the main display canvas.",
@@ -29986,15 +29935,15 @@
         },
         {
             "message": "Missing item type\nHelper function for loading GIF-based images",
-            "line": " src/image/loading_displaying.js:162"
+            "line": " src/image/loading_displaying.js:153"
         },
         {
             "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:252"
+            "line": " src/image/loading_displaying.js:243"
         },
         {
             "message": "Missing item type\nApply the current tint color to the input image, return the resulting\ncanvas.",
-            "line": " src/image/loading_displaying.js:565"
+            "line": " src/image/loading_displaying.js:556"
         },
         {
             "message": "Missing item type\nThis module defines the <a href=\"#/p5.Image\">p5.Image</a> class and P5 methods for\ndrawing images to the main display canvas.",
@@ -30086,7 +30035,7 @@
         },
         {
             "message": "Missing item type\nDraw a line given two points",
-            "line": " src/webgl/3d_primitives.js:1393"
+            "line": " src/webgl/3d_primitives.js:1391"
         },
         {
             "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",
diff --git a/src/templates/pages/reference/data.min.json b/src/templates/pages/reference/data.min.json
index 28fa6cc7ba..51aa2c9369 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.3.1","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/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":{"Rendering":1},"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/shim.js":{"name":"src/core/shim.js","modules":{},"classes":{},"fors":{},"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":{"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/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.Geometry.js":{"name":"src/webgl/p5.Geometry.js","modules":{},"classes":{"p5.Geometry":1},"fors":{"p5":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.Effect":1,"p5.Filter":1,"p5.LowPass":1,"p5.HighPass":1,"p5.BandPass":1,"p5.Oscillator":1,"p5.SinOsc":1,"p5.TriOsc":1,"p5.SawOsc":1,"p5.SqrOsc":1,"p5.MonoSynth":1,"p5.AudioVoice":1,"p5.PolySynth":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Signal":1,"p5.Envelope":1,"p5.Pulse":1,"p5.Noise":1,"p5.AudioIn":1,"p5.EQ":1,"p5.Panner3D":1,"p5.Delay":1,"p5.Reverb":1,"p5.Convolver":1,"p5.Phrase":1,"p5.Part":1,"p5.Score":1,"p5.SoundLoop":1,"p5.Compressor":1,"p5.SoundRecorder":1,"p5.PeakDetect":1,"p5.Gain":1,"p5.Distortion":1},"fors":{"p5.sound":1,"p5.Effect":1,"p5":1,"p5.Oscillator":1,"p5.MonoSynth":1,"p5.AudioVoice":1,"p5.PolySynth":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Signal":1,"p5.Envelope":1,"p5.AudioIn":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.Gain":1,"p5.Distortion":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":14},"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":14,"requires":["core","constants"],"description":"<p>Each color stores the color mode and level maxes that was applied at the\ntime of its construction. These are used to interpret the input arguments\n(at construction and later for that instance of color) and to format the\noutput e.g. when <a href=\"#/p5/saturation\">saturation()</a> is requested.</p>\n<p>Internally, we store an array representing the ideal RGBA values in floating\npoint form, normalized from 0 to 1. From this we calculate the closest\nscreen color (RGBA levels from 0 to 255) and expose this to the renderer.</p>\n<p>We also cache normalized, floating point components of the color in various\nrepresentations as they are calculated. This is done to prevent repeating a\nconversion that has already been performed.</p>\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":{},"fors":{"p5":1},"namespaces":{}},"2D Primitives":{"name":"2D Primitives","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src/core/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":3490,"description":"<p>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 <a href=\"#/p5.Element\">p5.Element</a> that supports a range of HTML elements. See the\n<a href='https://github.com/processing/p5.js/wiki/Beyond-the-canvas'>\nbeyond the canvas tutorial</a> for a full overview of how this addon works.</p>\n<p>See <a href='https://github.com/processing/p5.js/wiki/Beyond-the-canvas'>tutorial: beyond the canvas</a>\nfor more info on how to use this library.</a></p>\n","requires":["p5"]},"Rendering":{"name":"Rendering","submodules":{"undefined":1},"elements":{},"classes":{"p5.RendererGL":1,"p5.Graphics":1,"p5.Renderer":1},"fors":{"p5":1},"namespaces":{},"module":"Rendering","file":"src/webgl/p5.RendererGL.js","line":600,"description":"<p>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.</p>\n"},"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":410},"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":410,"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":"<p>Base class for all p5.Dictionary types. Specifically\n typed Dictionary classes inherit from this class.</p>\n"},"Events":{"name":"Events","submodules":{"Acceleration":1,"Keyboard":1,"Mouse":1,"Touch":1},"elements":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"Acceleration":{"name":"Acceleration","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/acceleration.js","line":1,"requires":["core"]},"Keyboard":{"name":"Keyboard","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/keyboard.js","line":1,"requires":["core"]},"Mouse":{"name":"Mouse","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/mouse.js","line":1,"requires":["core","constants"]},"Touch":{"name":"Touch","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/touch.js","line":1,"requires":["core"]},"Image":{"name":"Image","submodules":{"Pixels":1},"elements":{},"classes":{"p5.Image":1},"fors":{"p5":1},"namespaces":{},"module":"Image","file":"src/image/p5.Image.js","line":21,"requires":["core"],"description":"<p>Creates a new <a href=\"#/p5.Image\">p5.Image</a>. A <a href=\"#/p5.Image\">p5.Image</a> is a canvas backed representation of an\nimage.</p>\n<p>p5 can display .gif, .jpg and .png images. Images may be displayed\nin 2D and 3D space. Before an image is used, it must be loaded with the\n<a href=\"#/p5/loadImage\">loadImage()</a> function. The <a href=\"#/p5.Image\">p5.Image</a> class contains fields for the width and\nheight of the image, as well as an array called <a href=\"#/p5.Image/pixels\">pixels[]</a> that contains the\nvalues for every pixel in the image.</p>\n<p>The methods described below allow easy access to the image's pixels and\nalpha channel and simplify the process of compositing.</p>\n<p>Before using the <a href=\"#/p5.Image/pixels\">pixels[]</a> array, be sure to use the <a href=\"#/p5.Image/loadPixels\">loadPixels()</a> method on\nthe image to make sure that the pixel data is properly loaded.</p>\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":"<p>This module defines the <a href=\"#/p5.Font\">p5.Font</a> class and functions for\ndrawing text to the display canvas.</p>\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":"<p>XML is a representation of an XML object, able to parse XML code. Use\n<a href=\"#/p5/loadXML\">loadXML()</a> to load external XML files and create XML objects.</p>\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":1200,"description":"<p>This is the p5 instance constructor.</p>\n<p>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 <a href=\"#/p5/preload\">preload()</a>,\n<a href=\"#/p5/setup\">setup()</a>, and/or\n<a href=\"#/p5/draw\">draw()</a> properties on it for running a sketch.</p>\n<p>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</p>\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":"<p><a href=\"#/p5.Table\">Table</a> 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.</p>\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":10},"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":10,"requires":["core"],"description":"<p>A class to describe a two or three dimensional vector, specifically\na Euclidean (also known as geometric) vector. A vector is an entity\nthat has both magnitude and direction. The datatype, however, stores\nthe components of the vector (x, y for 2D, and x, y, z for 3D). The magnitude\nand direction can be accessed via the methods <a href=\"#/p5.Vector/mag\">mag()</a> and <a href=\"#/p5.Vector/heading\">heading()</a>.</p>\n<p>In many of the p5.js examples, you will see <a href=\"#/p5.Vector\">p5.Vector</a> used to describe a\nposition, velocity, or acceleration. For example, if you consider a rectangle\nmoving across the screen, at any given instant it has a position (a vector\nthat points from the origin to its location), a velocity (the rate at which\nthe object's position changes per time unit, expressed as a vector), and\nacceleration (the rate at which the object's velocity changes per time\nunit, expressed as a vector).</p>\n<p>Since vectors represent groupings of values, we cannot simply use\ntraditional addition/multiplication/etc. Instead, we'll need to do some\n\"vector\" math, which is made easy by the methods inside the <a href=\"#/p5.Vector\">p5.Vector</a> class.</p>\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":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src/webgl/3d_primitives.js","line":1,"requires":["core","p5.Geometry"]},"Lights, Camera":{"name":"Lights, Camera","submodules":{"Interaction":1,"Lights":1,"Material":1,"Camera":1},"elements":{},"classes":{"p5.Camera":1,"p5.Geometry":1,"p5.Matrix":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":260},"Interaction":{"name":"Interaction","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Lights, Camera","namespace":"","file":"src/webgl/interaction.js","line":1,"requires":["core"]},"Lights":{"name":"Lights","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Lights, Camera","namespace":"","file":"src/webgl/light.js","line":1,"requires":["core"]},"3D Models":{"name":"3D Models","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src/webgl/loading.js","line":1,"requires":["core","p5.Geometry"]},"Material":{"name":"Material","submodules":{},"elements":{},"classes":{"p5.Geometry":1,"p5.Shader":1,"p5.Texture":1},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Lights, Camera","namespace":"","file":"src/webgl/p5.Texture.js","line":12,"requires":["core"],"description":"<p>This module defines the p5.Shader class</p>\n"},"Camera":{"name":"Camera","submodules":{},"elements":{},"classes":{"p5.Camera":1},"fors":{"p5":1,"p5.Camera":1},"is_submodule":1,"namespaces":{},"module":"Lights, Camera","namespace":"","file":"src/webgl/p5.Camera.js","line":339,"requires":["core"],"description":"<p>This class describes a camera for use in p5's\n<a href=\"https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5\">\nWebGL mode</a>. It contains camera position, orientation, and projection\ninformation necessary for rendering a 3D scene.</p>\n<p>New p5.Camera objects can be made through the\n<a href=\"#/p5/createCamera\">createCamera()</a> 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 <a href=\"#/p5/setCamera\">setCamera()</a> method.</p>\n<p>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 <a href=\"#/p5.Camera/move\">move()</a> method,\nfor instance, moves the camera along its own axes, whereas the\n<a href=\"#/p5.Camera/setPosition\">setPosition()</a>\nmethod sets the camera's position in world-space.</p>\n<p>The camera object propreties\n<code>eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ</code>\nwhich describes camera position, orientation, and projection\nare also accessible via the camera object generated using\n<a href=\"#/p5/createCamera\">createCamera()</a></p>\n"},"p5.sound":{"name":"p5.sound","submodules":{},"elements":{},"classes":{"p5.sound":1,"p5.Effect":1,"p5.Filter":1,"p5.LowPass":1,"p5.HighPass":1,"p5.BandPass":1,"p5.Oscillator":1,"p5.SinOsc":1,"p5.TriOsc":1,"p5.SawOsc":1,"p5.SqrOsc":1,"p5.MonoSynth":1,"p5.AudioVoice":1,"p5.PolySynth":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Signal":1,"p5.Envelope":1,"p5.Pulse":1,"p5.Noise":1,"p5.AudioIn":1,"p5.EQ":1,"p5.Panner3D":1,"p5.Delay":1,"p5.Reverb":1,"p5.Convolver":1,"p5.Phrase":1,"p5.Part":1,"p5.Score":1,"p5.SoundLoop":1,"p5.Compressor":1,"p5.SoundRecorder":1,"p5.PeakDetect":1,"p5.Gain":1,"p5.Distortion":1},"fors":{"p5.sound":1,"p5.Effect":1,"p5":1,"p5.Oscillator":1,"p5.MonoSynth":1,"p5.AudioVoice":1,"p5.PolySynth":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Signal":1,"p5.Envelope":1,"p5.AudioIn":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.Gain":1,"p5.Distortion":1},"namespaces":{},"module":"p5.sound","file":"lib/addons/p5.sound.js","line":11703,"description":"<p>p5.sound extends p5 with <a href=\"http://caniuse.com/audio-api\"\ntarget=\"_blank\">Web Audio</a> functionality including audio input,\nplayback, analysis and synthesis.\n</p>\n<ul>\n<li><a href=\"#/p5.SoundFile\"><b>p5.SoundFile</b></a>: Load and play sound files.</li>\n<li><a href=\"#/p5.Amplitude\"><b>p5.Amplitude</b></a>: Get the current volume of a sound.</li>\n<li><a href=\"#/p5.AudioIn\"><b>p5.AudioIn</b></a>: Get sound from an input source, typically\n  a computer microphone.</li>\n<li><a href=\"#/p5.FFT\"><b>p5.FFT</b></a>: Analyze the frequency of sound. Returns\n  results from the frequency spectrum or time domain (waveform).</li>\n<li><a href=\"#/p5.Oscillator\"><b>p5.Oscillator</b></a>: Generate Sine,\n  Triangle, Square and Sawtooth waveforms. Base class of\n  <li><a href=\"#/p5.Noise\">p5.Noise</a> and <a href=\"#/p5.Pulse\">p5.Pulse</a>.\n  </li>\n<li>\n  <a href=\"#/p5.MonoSynth\">p5.MonoSynth</a> and <a href=\"#/p5.PolySynth\">p5.PolySynth</a>: Play musical notes\n</li>\n<li><a href=\"#/p5.Envelope\"><b>p5.Envelope</b></a>: 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.</li>\n<li><a href=\"#/p5.Delay\"><b>p5.Delay</b></a>: A delay effect with\n  parameters for feedback, delayTime, and lowpass filter.</li>\n<li><a href=\"#/p5.Filter\"><b>p5.Filter</b></a>: Filter the frequency range of a\n  sound.\n</li>\n<li><a href=\"#/p5.Reverb\"><b>p5.Reverb</b></a>: Add reverb to a sound by specifying\n  duration and decay. </li>\n<b><li><a href=\"#/p5.Convolver\">p5.Convolver</a>:</b> Extends\n<a href=\"#/p5.Reverb\">p5.Reverb</a> to simulate the sound of real\n  physical spaces through convolution.</li>\n<b><li><a href=\"#/p5.SoundRecorder\">p5.SoundRecorder</a></b>: Record sound for playback\n  / save the .wav file.\n<b><li><a href=\"#/p5.SoundLoop\">p5.SoundLoop</a>, <a href=\"#/p5.Phrase\">p5.Phrase</a></b>, <b><a href=\"#/p5.Part\">p5.Part</a></b> and\n<b><a href=\"#/p5.Score\">p5.Score</a></b>: Compose musical sequences.\n</li>\n<li><a href=\"#/p5/userStartAudio\">userStartAudio</a>: Enable audio in a\nbrowser- and user-friendly way.</a>\n<p>p5.sound is on <a href=\"https://github.com/therewasaguy/p5.sound/\">GitHub</a>.\nDownload the latest version\n<a href=\"https://github.com/therewasaguy/p5.sound/blob/master/lib/p5.sound.js\">here</a>.</p>","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":13,"description":"<p>This is the p5 instance constructor.</p>\n<p>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 <a href=\"#/p5/preload\">preload()</a>,\n<a href=\"#/p5/setup\">setup()</a>, and/or\n<a href=\"#/p5/draw\">draw()</a> properties on it for running a sketch.</p>\n<p>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</p>\n","is_constructor":1,"params":[{"name":"sketch","description":"<p>a closure that can set optional <a href=\"#/p5/preload\">preload()</a>,\n                             <a href=\"#/p5/setup\">setup()</a>, and/or <a href=\"#/p5/draw\">draw()</a> properties on the\n                             given p5 instance</p>\n","type":"Function"},{"name":"node","description":"<p>element to attach canvas to</p>\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":14,"description":"<p>Each color stores the color mode and level maxes that was applied at the\ntime of its construction. These are used to interpret the input arguments\n(at construction and later for that instance of color) and to format the\noutput e.g. when <a href=\"#/p5/saturation\">saturation()</a> is requested.</p>\n<p>Internally, we store an array representing the ideal RGBA values in floating\npoint form, normalized from 0 to 1. From this we calculate the closest\nscreen color (RGBA levels from 0 to 255) and expose this to the renderer.</p>\n<p>We also cache normalized, floating point components of the color in various\nrepresentations as they are calculated. This is done to prevent repeating a\nconversion that has already been performed.</p>\n","is_constructor":1},"p5.Element":{"name":"p5.Element","shortname":"p5.Element","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"DOM","submodule":"DOM","namespace":"","file":"src/core/p5.Element.js","line":9,"description":"<p>Base class for all elements added to a sketch, including canvas,\ngraphics buffers, and other HTML elements. It is not called directly, but <a href=\"#/p5.Element\">p5.Element</a>\nobjects are created by calling <a href=\"#/p5/createCanvas\">createCanvas</a>, <a href=\"#/p5/createGraphics\">createGraphics</a>,\n<a href=\"#/p5/createDiv\">createDiv</a>, <a href=\"#/p5/createImg\">createImg</a>, <a href=\"#/p5/createInput\">createInput</a>, etc.</p>\n","is_constructor":1,"params":[{"name":"elt","description":"<p>DOM node that is wrapped</p>\n","type":"String"},{"name":"pInst","description":"<p>pointer to p5 instance</p>\n","type":"P5","optional":true}]},"p5.Graphics":{"name":"p5.Graphics","shortname":"p5.Graphics","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Rendering","submodule":"Rendering","namespace":"","file":"src/core/p5.Graphics.js","line":10,"description":"<p>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.</p>\n","is_constructor":1,"extends":"p5.Element","params":[{"name":"w","description":"<p>width</p>\n","type":"Number"},{"name":"h","description":"<p>height</p>\n","type":"Number"},{"name":"renderer","description":"<p>the renderer to use, either P2D or WEBGL</p>\n","type":"Constant"},{"name":"pInst","description":"<p>pointer to p5 instance</p>\n","type":"P5","optional":true}]},"p5.Renderer":{"name":"p5.Renderer","shortname":"p5.Renderer","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Rendering","submodule":"Rendering","namespace":"","file":"src/core/p5.Renderer.js","line":10,"description":"<p>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.</p>\n","is_constructor":1,"extends":"p5.Element","params":[{"name":"elt","description":"<p>DOM node that is wrapped</p>\n","type":"String"},{"name":"pInst","description":"<p>pointer to p5 instance</p>\n","type":"P5","optional":true},{"name":"isMainCanvas","description":"<p>whether we're using it as main canvas</p>\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":"<p>Base class for all p5.Dictionary types. Specifically\n typed Dictionary classes inherit from this class.</p>\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":394,"description":"<p>A simple Dictionary class for Strings.</p>\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":410,"description":"<p>A simple Dictionary class for Numbers.</p>\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":2334,"description":"<p>Extends <a href=\"#/p5.Element\">p5.Element</a> to handle audio and video. In addition to the methods\nof <a href=\"#/p5.Element\">p5.Element</a>, it also contains methods for controlling media. It is not\ncalled directly, but <a href=\"#/p5.MediaElement\">p5.MediaElement</a>s are created by calling <a href=\"#/p5/createVideo\">createVideo</a>,\n<a href=\"#/p5/createAudio\">createAudio</a>, and <a href=\"#/p5/createCapture\">createCapture</a>.</p>\n","is_constructor":1,"params":[{"name":"elt","description":"<p>DOM node that is wrapped</p>\n","type":"String"}]},"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":3490,"description":"<p>Base class for a file.\nUsed for Element.drop and createFileInput.</p>\n","is_constructor":1,"params":[{"name":"file","description":"<p>File that is wrapped</p>\n","type":"File"}]},"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":"<p>Creates a new <a href=\"#/p5.Image\">p5.Image</a>. A <a href=\"#/p5.Image\">p5.Image</a> is a canvas backed representation of an\nimage.</p>\n<p>p5 can display .gif, .jpg and .png images. Images may be displayed\nin 2D and 3D space. Before an image is used, it must be loaded with the\n<a href=\"#/p5/loadImage\">loadImage()</a> function. The <a href=\"#/p5.Image\">p5.Image</a> class contains fields for the width and\nheight of the image, as well as an array called <a href=\"#/p5.Image/pixels\">pixels[]</a> that contains the\nvalues for every pixel in the image.</p>\n<p>The methods described below allow easy access to the image's pixels and\nalpha channel and simplify the process of compositing.</p>\n<p>Before using the <a href=\"#/p5.Image/pixels\">pixels[]</a> array, be sure to use the <a href=\"#/p5.Image/loadPixels\">loadPixels()</a> method on\nthe image to make sure that the pixel data is properly loaded.</p>\n","example":["\n<div><code>\nfunction setup() {\n  let img = createImage(100, 100); // same as new p5.Image(100, 100);\n  img.loadPixels();\n  createCanvas(100, 100);\n  background(0);\n\n  // helper for writing color to array\n  function writeColor(image, x, y, red, green, blue, alpha) {\n    let index = (x + y * width) * 4;\n    image.pixels[index] = red;\n    image.pixels[index + 1] = green;\n    image.pixels[index + 2] = blue;\n    image.pixels[index + 3] = alpha;\n  }\n\n  let x, y;\n  // fill with random colors\n  for (y = 0; y < img.height; y++) {\n    for (x = 0; x < img.width; x++) {\n      let red = random(255);\n      let green = random(255);\n      let blue = random(255);\n      let alpha = 255;\n      writeColor(img, x, y, red, green, blue, alpha);\n    }\n  }\n\n  // draw a red line\n  y = 0;\n  for (x = 0; x < img.width; x++) {\n    writeColor(img, x, y, 255, 0, 0, 255);\n  }\n\n  // draw a green line\n  y = img.height - 1;\n  for (x = 0; x < img.width; x++) {\n    writeColor(img, x, y, 0, 255, 0, 255);\n  }\n\n  img.updatePixels();\n  image(img, 0, 0);\n}\n</code></div>"],"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":1200,"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":"<p><a href=\"#/p5.Table\">Table</a> 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.</p>\n","is_constructor":1,"params":[{"name":"rows","description":"<p>An array of p5.TableRow objects</p>\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":"<p>A TableRow object represents a single row of data values,\nstored in columns, from a table.</p>\n<p>A Table Row contains both an ordered array, and an unordered\nJSON object.</p>\n","is_constructor":1,"params":[{"name":"str","description":"<p>optional: populate the row with a\n                            string of values, separated by the\n                            separator</p>\n","type":"String","optional":true},{"name":"separator","description":"<p>comma separated values (csv) by default</p>\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":"<p>XML is a representation of an XML object, able to parse XML code. Use\n<a href=\"#/p5/loadXML\">loadXML()</a> to load external XML files and create XML objects.</p>\n","is_constructor":1,"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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\n// Sketch prints:\n// 0, Capra hircus, Goat\n// 1, Panthera pardus, Leopard\n// 2, Equus zebra, Zebra\n</code></div>"],"alt":"no image displayed"},"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":10,"description":"<p>A class to describe a two or three dimensional vector, specifically\na Euclidean (also known as geometric) vector. A vector is an entity\nthat has both magnitude and direction. The datatype, however, stores\nthe components of the vector (x, y for 2D, and x, y, z for 3D). The magnitude\nand direction can be accessed via the methods <a href=\"#/p5.Vector/mag\">mag()</a> and <a href=\"#/p5.Vector/heading\">heading()</a>.</p>\n<p>In many of the p5.js examples, you will see <a href=\"#/p5.Vector\">p5.Vector</a> used to describe a\nposition, velocity, or acceleration. For example, if you consider a rectangle\nmoving across the screen, at any given instant it has a position (a vector\nthat points from the origin to its location), a velocity (the rate at which\nthe object's position changes per time unit, expressed as a vector), and\nacceleration (the rate at which the object's velocity changes per time\nunit, expressed as a vector).</p>\n<p>Since vectors represent groupings of values, we cannot simply use\ntraditional addition/multiplication/etc. Instead, we'll need to do some\n\"vector\" math, which is made easy by the methods inside the <a href=\"#/p5.Vector\">p5.Vector</a> class.</p>\n","is_constructor":1,"params":[{"name":"x","description":"<p>x component of the vector</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>z component of the vector</p>\n","type":"Number","optional":true}],"example":["\n<div>\n<code>\nlet v1 = createVector(40, 50);\nlet v2 = createVector(40, 50);\n\nellipse(v1.x, v1.y, 50, 50);\nellipse(v2.x, v2.y, 50, 50);\nv1.add(v2);\nellipse(v1.x, v1.y, 50, 50);\n</code>\n</div>"],"alt":"2 white ellipses. One center-left the other bottom right and off canvas"},"p5.Font":{"name":"p5.Font","shortname":"p5.Font","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Typography","submodule":"Loading & Displaying","namespace":"","file":"src/typography/p5.Font.js","line":13,"description":"<p>Base class for font handling</p>\n","is_constructor":1,"params":[{"name":"pInst","description":"<p>pointer to p5 instance</p>\n","type":"P5","optional":true}]},"p5.Camera":{"name":"p5.Camera","shortname":"p5.Camera","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Lights, Camera","submodule":"Camera","namespace":"","file":"src/webgl/p5.Camera.js","line":339,"description":"<p>This class describes a camera for use in p5's\n<a href=\"https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5\">\nWebGL mode</a>. It contains camera position, orientation, and projection\ninformation necessary for rendering a 3D scene.</p>\n<p>New p5.Camera objects can be made through the\n<a href=\"#/p5/createCamera\">createCamera()</a> 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 <a href=\"#/p5/setCamera\">setCamera()</a> method.</p>\n<p>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 <a href=\"#/p5.Camera/move\">move()</a> method,\nfor instance, moves the camera along its own axes, whereas the\n<a href=\"#/p5.Camera/setPosition\">setPosition()</a>\nmethod sets the camera's position in world-space.</p>\n<p>The camera object propreties\n<code>eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ</code>\nwhich describes camera position, orientation, and projection\nare also accessible via the camera object generated using\n<a href=\"#/p5/createCamera\">createCamera()</a></p>\n","params":[{"name":"rendererGL","description":"<p>instance of WebGL renderer</p>\n","type":"RendererGL"}],"example":["\n<div>\n<code>\nlet cam;\nlet delta = 0.01;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n  cam = createCamera();\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</code>\n</div>"],"alt":"camera view pans left and right across a series of rotating 3D boxes."},"p5.Geometry":{"name":"p5.Geometry","shortname":"p5.Geometry","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Lights, Camera","submodule":"Material","namespace":"","file":"src/webgl/p5.Geometry.js","line":12,"description":"<p>p5 Geometry class</p>\n","is_constructor":1,"params":[{"name":"detailX","description":"<p>number of vertices on horizontal surface</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of vertices on horizontal surface</p>\n","type":"Integer","optional":true},{"name":"callback","description":"<p>function to call upon object instantiation.</p>\n","type":"Function","optional":true}]},"p5.Shader":{"name":"p5.Shader","shortname":"p5.Shader","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Lights, Camera","submodule":"Material","namespace":"","file":"src/webgl/p5.Shader.js","line":11,"description":"<p>Shader class for WEBGL Mode</p>\n","is_constructor":1,"params":[{"name":"renderer","description":"<p>an instance of p5.RendererGL that\nwill provide the GL context for this new p5.Shader</p>\n","type":"p5.RendererGL"},{"name":"vertSrc","description":"<p>source code for the vertex shader (as a string)</p>\n","type":"String"},{"name":"fragSrc","description":"<p>source code for the fragment shader (as a string)</p>\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.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":264,"description":"<p>Effect is a base class for audio effects in p5. <br>\nThis module handles the nodes and methods that are\ncommon and useful for current and future effects.</p>\n<p>This class is extended by <a href=\"/reference/#/p5.Distortion\">p5.Distortion</a>,\n<a href=\"/reference/#/p5.Compressor\">p5.Compressor</a>,\n<a href=\"/reference/#/p5.Delay\">p5.Delay</a>,\n<a href=\"/reference/#/p5.Filter\">p5.Filter</a>,\n<a href=\"/reference/#/p5.Reverb\">p5.Reverb</a>.</p>\n","is_constructor":1,"params":[{"name":"ac","description":"<p>Reference to the audio context of the p5 object</p>\n","type":"Object","optional":true},{"name":"input","description":"<p>Gain Node effect wrapper</p>\n","type":"AudioNode","optional":true},{"name":"output","description":"<p>Gain Node effect wrapper</p>\n","type":"AudioNode","optional":true},{"name":"_drywet","description":"<p>Tone.JS CrossFade node (defaults to value: 1)</p>\n","type":"Object","optional":true},{"name":"wet","description":"<p>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.</p>\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":883,"description":"<p>A p5.Filter uses a Web Audio Biquad Filter to filter\nthe frequency response of an input source. Subclasses\ninclude:</p>\n<a href=\"/reference/#/p5.LowPass\"><code>p5.LowPass</code></a>:\nAllows frequencies below the cutoff frequency to pass through,\nand attenuates frequencies above the cutoff.<br/>\n<a href=\"/reference/#/p5.HighPass\"><code>p5.HighPass</code></a>:\nThe opposite of a lowpass filter. <br/>\n<a href=\"/reference/#/p5.BandPass\"><code>p5.BandPass</code></a>:\nAllows a range of frequencies to pass through and attenuates\nthe frequencies below and above this frequency range.<br/>\n\n<p>The <code>.res()</code> method controls either width of the\nbandpass, or resonance of the low/highpass cutoff frequency.</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","extends":"p5.Effect","is_constructor":1,"params":[{"name":"type","description":"<p>'lowpass' (default), 'highpass', 'bandpass'</p>\n","type":"String","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":1147,"description":"<p>Constructor: <code>new p5.LowPass()</code> Filter.\nThis is the same as creating a p5.Filter and then calling\nits method <code>setType('lowpass')</code>.\nSee p5.Filter for methods.</p>\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":1164,"description":"<p>Constructor: <code>new p5.HighPass()</code> Filter.\nThis is the same as creating a p5.Filter and then calling\nits method <code>setType('highpass')</code>.\nSee p5.Filter for methods.</p>\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":1180,"description":"<p>Constructor: <code>new p5.BandPass()</code> Filter.\nThis is the same as creating a p5.Filter and then calling\nits method <code>setType('bandpass')</code>.\nSee p5.Filter for methods.</p>\n","is_constructor":1,"extends":"p5.Filter"},"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":1375,"description":"<p>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).</p>\n\n<p>Set the type of oscillation with setType(), or by instantiating a\nspecific oscillator: <a href=\"/reference/#/p5.SinOsc\">p5.SinOsc</a>, <a\nhref=\"/reference/#/p5.TriOsc\">p5.TriOsc</a>, <a\nhref=\"/reference/#/p5.SqrOsc\">p5.SqrOsc</a>, or <a\nhref=\"/reference/#/p5.SawOsc\">p5.SawOsc</a>.\n</p>","is_constructor":1,"params":[{"name":"freq","description":"<p>frequency defaults to 440Hz</p>\n","type":"Number","optional":true},{"name":"type","description":"<p>type of oscillator. Options:\n                       'sine' (default), 'triangle',\n                       'sawtooth', 'square'</p>\n","type":"String","optional":true}],"example":["\n<div><code>\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</code> </div>"]},"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":1890,"description":"<p>Constructor: <code>new p5.SinOsc()</code>.\nThis creates a Sine Wave Oscillator and is\nequivalent to <code> new p5.Oscillator('sine')\n</code> or creating a p5.Oscillator and then calling\nits method <code>setType('sine')</code>.\nSee p5.Oscillator for methods.</p>\n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"<p>Set the frequency</p>\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":1910,"description":"<p>Constructor: <code>new p5.TriOsc()</code>.\nThis creates a Triangle Wave Oscillator and is\nequivalent to <code>new p5.Oscillator('triangle')\n</code> or creating a p5.Oscillator and then calling\nits method <code>setType('triangle')</code>.\nSee p5.Oscillator for methods.</p>\n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"<p>Set the frequency</p>\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":1929,"description":"<p>Constructor: <code>new p5.SawOsc()</code>.\nThis creates a SawTooth Wave Oscillator and is\nequivalent to <code> new p5.Oscillator('sawtooth')\n</code> or creating a p5.Oscillator and then calling\nits method <code>setType('sawtooth')</code>.\nSee p5.Oscillator for methods.</p>\n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"<p>Set the frequency</p>\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":1948,"description":"<p>Constructor: <code>new p5.SqrOsc()</code>.\nThis creates a Square Wave Oscillator and is\nequivalent to <code> new p5.Oscillator('square')\n</code> or creating a p5.Oscillator and then calling\nits method <code>setType('square')</code>.\nSee p5.Oscillator for methods.</p>\n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"<p>Set the frequency</p>\n","type":"Number","optional":true}]},"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":2008,"description":"<p>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.</p>\n","is_constructor":1,"example":["\n<div><code>\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</code></div>"]},"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":2356,"description":"<p>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();</p>\n","is_constructor":1},"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":2426,"description":"<p>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.</p>\n","is_constructor":1,"params":[{"name":"synthVoice","description":"<p>A monophonic synth voice inheriting\n                               the AudioVoice class. Defaults to p5.MonoSynth</p>\n","type":"Number","optional":true},{"name":"maxVoices","description":"<p>Number of voices, defaults to 8;</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":3360,"description":"<p>SoundFile object with a path to a file.</p>\n\n<p>The p5.SoundFile may not be available immediately because\nit loads the file information asynchronously.</p>\n\n<p>To do something with the sound as soon as it loads\npass the name of a function as the second parameter.</p>\n\n<p>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.</p>","is_constructor":1,"params":[{"name":"path","description":"<p>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.</p>\n","type":"String|Array"},{"name":"successCallback","description":"<p>Name of a function to call once file loads</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>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.</p>\n","type":"Function","optional":true},{"name":"whileLoadingCallback","description":"<p>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.</p>\n","type":"Function","optional":true}],"example":["\n<div><code>\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 </code></div>"]},"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":5186,"description":"<p>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.</p>\n","is_constructor":1,"params":[{"name":"smoothing","description":"<p>between 0.0 and .999 to smooth\n                           amplitude readings (defaults to 0)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\nlet sound, amplitude;\n\nfunction preload(){\n  sound = loadSound('assets/beat.mp3');\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);\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 (sound.isPlaying() ){\n    sound.stop();\n  } else {\n    sound.play();\n  }\n}\n\n</code></div>"]},"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":5499,"description":"<p>FFT (Fast Fourier Transform) is an analysis algorithm that\nisolates individual\n<a href=\"https://en.wikipedia.org/wiki/Audio_frequency\">\naudio frequencies</a> within a waveform.</p>\n\n<p>Once instantiated, a p5.FFT object can return an array based on\ntwo types of analyses: <br> • <code>FFT.waveform()</code> 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.<br>\n• <code>FFT.analyze() </code> 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 <code>getEnergy()</code> to measure amplitude at specific\nfrequencies, or within a range of frequencies. </p>\n\n<p>FFT analyzes a very short snapshot of sound called a sample\nbuffer. It returns an array of amplitude measurements, referred\nto as <code>bins</code>. 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.</p>","is_constructor":1,"params":[{"name":"smoothing","description":"<p>Smooth results of Freq Spectrum.\n                              0.0 < smoothing < 1.0.\n                              Defaults to 0.8.</p>\n","type":"Number","optional":true},{"name":"bins","description":"<p>Length of resulting array.\n                          Must be a power of two between\n                          16 and 1024. Defaults to 1024.</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"p5.Signal":{"name":"p5.Signal","shortname":"p5.Signal","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":6146,"description":"<p>p5.Signal is a constant audio-rate signal used by p5.Oscillator\nand p5.Envelope for modulation math.</p>\n\n<p>This is necessary because Web Audio is processed on a seprate clock.\nFor example, the p5 draw loop runs about 60 times per second. But\nthe audio clock must process samples 44100 times per second. If we\nwant to add a value to each of those samples, we can't do it in the\ndraw loop, but we can do it by adding a constant-rate audio signal.</p.\n\n<p>This class mostly functions behind the scenes in p5.sound, and returns\na Tone.Signal from the Tone.js library by Yotam Mann.\nIf you want to work directly with audio signals for modular\nsynthesis, check out\n<a href='http://bit.ly/1oIoEng' target=_'blank'>tone.js.</a></p>","is_constructor":1,"return":{"description":"A Signal object from the Tone.js library","type":"Tone.Signal"},"example":["\n<div><code>\nlet carrier, modulator;\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  carrier = new p5.Oscillator('sine');\n  carrier.start();\n  carrier.amp(1); // set amplitude\n  carrier.freq(220); // set frequency\n\n  modulator = new p5.Oscillator('sawtooth');\n  modulator.disconnect();\n  modulator.start();\n  modulator.amp(1);\n  modulator.freq(4);\n\n  // Modulator's default amplitude range is -1 to 1.\n  // Multiply it by -200, so the range is -200 to 200\n  // then add 220 so the range is 20 to 420\n  carrier.freq( modulator.mult(-400).add(220) );\n}\n\nfunction canvasPressed() {\n  userStartAudio();\n  carrier.amp(1.0);\n}\n\nfunction mouseReleased() {\n  carrier.amp(0);\n}\n</code></div>"]},"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":6350,"description":"<p>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 (\n<a href=\"https://upload.wikimedia.org/wikipedia/commons/e/ea/ADSR_parameter.svg\">ADSR</a>\n). Envelopes can also control other Web Audio Parameters—for example, a p5.Envelope can\ncontrol an Oscillator's frequency like this: <code>osc.freq(env)</code>.</p>\n<p>Use <code><a href=\"#/p5.Envelope/setRange\">setRange</a></code> to change the attack/release level.\nUse <code><a href=\"#/p5.Envelope/setADSR\">setADSR</a></code> to change attackTime, decayTime, sustainPercent and releaseTime.</p>\n<p>Use the <code><a href=\"#/p5.Envelope/play\">play</a></code> method to play the entire envelope,\nthe <code><a href=\"#/p5.Envelope/ramp\">ramp</a></code> method for a pingable trigger,\nor <code><a href=\"#/p5.Envelope/triggerAttack\">triggerAttack</a></code>/\n<code><a href=\"#/p5.Envelope/triggerRelease\">triggerRelease</a></code> to trigger noteOn/noteOff.</p>","is_constructor":1,"example":["\n<div><code>\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</code></div>"]},"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":7192,"description":"<p>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 <a href=\"\nhttp://p5js.org/reference/#/p5.Oscillator\">\n<code>p5.Oscillator</code> for a full list of methods.</p>\n","extends":"p5.Oscillator","is_constructor":1,"params":[{"name":"freq","description":"<p>Frequency in oscillations per second (Hz)</p>\n","type":"Number","optional":true},{"name":"w","description":"<p>Width between the pulses (0 to 1.0,\n                       defaults to 0)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":7399,"description":"<p>Noise is a type of oscillator that generates a buffer with random values.</p>\n","extends":"p5.Oscillator","is_constructor":1,"params":[{"name":"type","description":"<p>Type of noise can be 'white' (default),\n                     'brown' or 'pink'.</p>\n","type":"String"}]},"p5.AudioIn":{"name":"p5.AudioIn","shortname":"p5.AudioIn","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":7583,"description":"<p>Get audio from an input, i.e. your computer's microphone.</p>\n\n<p>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.</p>\n\n<p>If you want to hear the AudioIn, use the .connect() method.\nAudioIn does not connect to p5.sound output by default to prevent\nfeedback.</p>\n\n<p><em>Note: This uses the <a href=\"http://caniuse.com/stream\">getUserMedia/\nStream</a> 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.</em></p>","is_constructor":1,"params":[{"name":"errorCallback","description":"<p>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.</p>\n","type":"Function","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":8021,"description":"<p>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).</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","is_constructor":1,"extends":"p5.Effect","params":[{"name":"_eqsize","description":"<p>Constructor will accept 3 or 8, defaults to 3</p>\n","type":"Number","optional":true}],"return":{"description":"p5.EQ object","type":"Object"},"example":["\n<div><code>\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</code></div>"]},"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":8301,"description":"<p>Panner3D is based on the <a title=\"Web Audio Panner docs\"  href=\n\"https://developer.mozilla.org/en-US/docs/Web/API/PannerNode\">\nWeb Audio Spatial Panner Node</a>.\nThis panner is a spatial processing node that allows audio to be positioned\nand oriented in 3D space.</p>\n<p>The position is relative to an <a title=\"Web Audio Listener docs\" href=\n\"https://developer.mozilla.org/en-US/docs/Web/API/AudioListener\">\nAudio Context Listener</a>, which can be accessed\nby <code>p5.soundOut.audiocontext.listener</code></p>\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":8829,"description":"<p>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.</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","extends":"p5.Effect","is_constructor":1,"example":["\n<div><code>\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</code></div>"]},"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":9175,"description":"<p>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.</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","extends":"p5.Effect","is_constructor":1,"example":["\n<div><code>\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</code></div>"]},"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":9397,"description":"<p>p5.Convolver extends p5.Reverb. It can emulate the sound of real\nphysical spaces through a process called <a href=\"\nhttps://en.wikipedia.org/wiki/Convolution_reverb#Real_space_simulation\">\nconvolution</a>.</p>\n\n<p>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.</p>\n\n<p>Use the method <code>createConvolution(path)</code> to instantiate a\np5.Convolver with a path to your impulse response audio file.</p>","extends":"p5.Effect","is_constructor":1,"params":[{"name":"path","description":"<p>path to a sound file</p>\n","type":"String"},{"name":"callback","description":"<p>function to call when loading succeeds</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to call if loading fails.\n                                   This function will receive an error or\n                                   XMLHttpRequest object with information\n                                   about what went wrong.</p>\n","type":"Function","optional":true}],"example":["\n<div><code>\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 master output...\n  sound.disconnect();\n\n  // ...and process with cVerb\n  // so that we only hear the convolution\n  cVerb.process(sound);\n}\n\nfunction playSound() {\n  sound.play();\n}\n</code></div>"]},"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":9922,"description":"<p>A phrase is a pattern of musical events over time, i.e.\na series of notes and rests.</p>\n\n<p>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.</p>\n\n<p>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 <code>playNote(value){}</code>. 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).</p>","is_constructor":1,"params":[{"name":"name","description":"<p>Name so that you can access the Phrase.</p>\n","type":"String"},{"name":"callback","description":"<p>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.</p>\n","type":"Function"},{"name":"sequence","description":"<p>Array of values to pass into the callback\n                          at each step of the phrase.</p>\n","type":"Array"}],"example":["\n<div><code>\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</code></div>"]},"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":10002,"description":"<p>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.</p>\n\n<p>See p5.Phrase for more about musical timing.</p>","is_constructor":1,"params":[{"name":"steps","description":"<p>Steps in the part</p>\n","type":"Number","optional":true},{"name":"tatums","description":"<p>Divisions of a beat, e.g. use 1/4, or 0.25 for a quater note (default is 1/16, a sixteenth note)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":10288,"description":"<p>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\n<code>new p5.Score(a, a, b, a, c)</code></p>\n","is_constructor":1,"params":[{"name":"parts","description":"<p>One or multiple parts, to be played in sequence.</p>\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":10454,"description":"<p>SoundLoop</p>\n","is_constructor":1,"params":[{"name":"callback","description":"<p>this function will be called on each iteration of theloop</p>\n","type":"Function"},{"name":"interval","description":"<p>amount of time (if a number) or beats (if a string, following <a href = \"https://github.com/Tonejs/Tone.js/wiki/Time\">Tone.Time</a> convention) for each iteration of the loop. Defaults to 1 second.</p>\n","type":"Number|String","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":10792,"description":"<p>Compressor is an audio effect class that performs dynamics compression\non an audio input source. This is a very commonly used technique in music\nand sound production. Compression creates an overall louder, richer,\nand fuller sound by lowering the volume of louds and raising that of softs.\nCompression can be used to avoid clipping (sound distortion due to\npeaks in volume) and is especially useful when many sounds are played\nat once. Compression can be used on indivudal sound sources in addition\nto the master output.</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","is_constructor":1,"extends":"p5.Effect"},"p5.SoundRecorder":{"name":"p5.SoundRecorder","shortname":"p5.SoundRecorder","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":11056,"description":"<p>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().</p>\n<p>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.</p>","is_constructor":1,"example":["\n<div><code>\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</div></code>"]},"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":11286,"description":"<p>PeakDetect works in conjunction with p5.FFT to\nlook for onsets in some or all of the frequency spectrum.\n</p>\n<p>\nTo use p5.PeakDetect, call <code>update</code> in the draw loop\nand pass in a p5.FFT object.\n</p>\n<p>\nYou can listen for a specific part of the frequency spectrum by\nsetting the range between <code>freq1</code> and <code>freq2</code>.\n</p>\n\n<p><code>threshold</code> 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.</p>\n\n<p>\nThe update method is meant to be run in the draw loop, and\n<b>frames</b> 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<code> framesPerPeak = 60 / (estimatedBPM / 60 );</code>\n</p>\n\n<p>\nBased on example contribtued by @b2renger, and a simple beat detection\nexplanation by <a\nhref=\"http://www.airtightinteractive.com/2013/10/making-audio-reactive-visuals/\"\ntarget=\"_blank\">Felix Turner</a>.\n</p>","is_constructor":1,"params":[{"name":"freq1","description":"<p>lowFrequency - defaults to 20Hz</p>\n","type":"Number","optional":true},{"name":"freq2","description":"<p>highFrequency - defaults to 20000 Hz</p>\n","type":"Number","optional":true},{"name":"threshold","description":"<p>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.</p>\n","type":"Number","optional":true},{"name":"framesPerPeak","description":"<p>Defaults to 20.</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":11521,"description":"<p>A gain node is usefull to set the relative volume of sound.\nIt's typically used to build mixers.</p>\n","is_constructor":1,"example":["\n<div><code>\n\n// load two soundfile and crossfade beetween them\nlet sound1,sound2;\nlet sound1Gain, sound2Gain, masterGain;\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 'master' gain to which we will connect both soundfiles\n  masterGain = new p5.Gain();\n  masterGain.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(masterGain); // connect its output to the 'master'\n  sound2.disconnect();\n  sound2Gain = new p5.Gain();\n  sound2Gain.setInput(sound2);\n  sound2Gain.connect(masterGain);\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 'master    *  volume control'\n  var masterVolume = constrain(map(mouseY,height,0,0,1), 0, 1);\n  masterGain.amp(masterVolume);\n  text('master', width/2, height - masterVolume * 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</code></div>"]},"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":11703,"description":"<p>A Distortion effect created with a Waveshaper Node,\nwith an approach adapted from\n<a href=\"http://stackoverflow.com/questions/22312841/waveshaper-node-in-webaudio-how-to-emulate-distortion\">Kevin Ennis</a></p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","extends":"p5.Effect","is_constructor":1,"params":[{"name":"amount","description":"<p>Unbounded distortion amount.\n                               Normal values range from 0-1.</p>\n","type":"Number","optional":true,"optdefault":"0.25"},{"name":"oversample","description":"<p>'none', '2x', or '4x'.</p>\n","type":"String","optional":true,"optdefault":"'none'"}]}},"elements":{},"classitems":[{"file":"src/accessibility/describe.js","line":18,"description":"<p>Creates a screen reader accessible description for the canvas.\nThe first parameter should be a string with a description of the canvas.\nThe second parameter is optional. If specified, it determines how the\ndescription is displayed.</p>\n<p><code class=\"language-javascript\">describe(text, LABEL)</code> displays\nthe description to all users as a <a\nhref=\"https://en.wikipedia.org/wiki/Museum_label\" target=\"_blank\">\ntombstone or exhibit label/caption</a> in a\n<code class=\"language-javascript\"><div class=\"p5Label\"></div></code>\nadjacent to the canvas. You can style it as you wish in your CSS.</p>\n<p><code class=\"language-javascript\">describe(text, FALLBACK)</code> makes the\ndescription accessible to screen-reader users only, in\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility\" target=\"_blank\">\na sub DOM inside the canvas element</a>. If a second parameter is not\nspecified, by default, the description will only be available to\nscreen-reader users.</p>\n","itemtype":"method","name":"describe","params":[{"name":"text","description":"<p>description of the canvas</p>\n","type":"String"},{"name":"display","description":"<p>either LABEL or FALLBACK (Optional)</p>\n","type":"Constant","optional":true}],"example":["\n<div>\n<code>\ndescribe('pink square with red heart in the bottom right corner', LABEL);\nbackground('pink');\nfill('red');\nnoStroke();\nellipse(67, 67, 20, 20);\nellipse(83, 67, 20, 20);\ntriangle(91, 73, 75, 95, 59, 73);\n</code>\n</div>\n\n<div>\n<code>\nlet x = 0;\nfunction draw() {\n  if (x > 100) {\n    x = 0;\n  }\n  background(220);\n  fill(0, 255, 0);\n  ellipse(x, 50, 40, 40);\n  x = x + 0.1;\n  describe('green circle at x pos ' + round(x) + ' moving to the right');\n}\n</code>\n</div>\n"],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/accessibility/describe.js","line":115,"description":"<p>This function creates a screen-reader accessible\ndescription for elements —shapes or groups of shapes that create\nmeaning together— in the canvas. The first paramater should\nbe the name of the element. The second parameter should be a string\nwith a description of the element. The third parameter is optional.\nIf specified, it determines how the element description is displayed.</p>\n<p><code class=\"language-javascript\">describeElement(name, text, LABEL)</code>\ndisplays the element description to all users as a\n<a href=\"https://en.wikipedia.org/wiki/Museum_label\" target=\"_blank\">\ntombstone or exhibit label/caption</a> in a\n<code class=\"language-javascript\"><div class=\"p5Label\"></div></code>\nadjacent to the canvas. You can style it as you wish in your CSS.</p>\n<p><code class=\"language-javascript\">describeElement(name, text, FALLBACK)</code>\nmakes the element description accessible to screen-reader users\nonly, in <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility\" target=\"_blank\">\na sub DOM inside the canvas element</a>. If a second parameter is not\nspecified, by default, the element description will only be available\nto screen-reader users.</p>\n","itemtype":"method","name":"describeElement","params":[{"name":"name","description":"<p>name of the element</p>\n","type":"String"},{"name":"text","description":"<p>description of the element</p>\n","type":"String"},{"name":"display","description":"<p>either LABEL or FALLBACK (Optional)</p>\n","type":"Constant","optional":true}],"example":["\n<div>\n<code>\ndescribe('Heart and yellow circle over pink background', LABEL);\nnoStroke();\nbackground('pink');\ndescribeElement('Circle', 'Yellow circle in the top left corner', LABEL);\nfill('yellow');\nellipse(25, 25, 40, 40);\ndescribeElement('Heart', 'red heart in the bottom right corner', LABEL);\nfill('red');\nellipse(66.6, 66.6, 20, 20);\nellipse(83.2, 66.6, 20, 20);\ntriangle(91.2, 72.6, 75, 95, 58.6, 72.6);\n</code>\n</div>"],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/accessibility/outputs.js","line":10,"description":"<p><code class=\"language-javascript\">textOutput()</code> creates a screenreader\naccessible output that describes the shapes present on the canvas.\nThe general description of the canvas includes canvas size,\ncanvas color, and number of elements in the canvas\n(example: 'Your output is a, 400 by 400 pixels, lavender blue\ncanvas containing the following 4 shapes:'). This description\nis followed by a list of shapes where the color, position, and area\nof each shape are described (example: \"orange ellipse at top left\ncovering 1% of the canvas\"). Each element can be selected to get\nmore details. A table of elements is also provided. In this table,\nshape, color, location, coordinates and area are described\n(example: \"orange ellipse location=top left area=2\").</p>\n<p><code class=\"language-javascript\">textOutput()</code> and <code class=\"language-javascript\">texOutput(FALLBACK)</code>\nmake the output available in <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility\" target=\"_blank\">\na sub DOM inside the canvas element</a> which is accessible to screen readers.\n<code class=\"language-javascript\">textOutput(LABEL)</code> creates an\nadditional div with the output adjacent to the canvas, this is useful\nfor non-screen reader users that might want to display the output outside\nof the canvas' sub DOM as they code. However, using LABEL will create\nunnecessary redundancy for screen reader users. We recommend using LABEL\nonly as part of the development process of a sketch and removing it before\npublishing or sharing with screen reader users.</p>\n","itemtype":"method","name":"textOutput","params":[{"name":"display","description":"<p>either FALLBACK or LABEL (Optional)</p>\n","type":"Constant","optional":true}],"example":["\n<div>\n<code>\ntextOutput();\nbackground(148, 196, 0);\nfill(255, 0, 0);\nellipse(20, 20, 20, 20);\nfill(0, 0, 255);\nrect(50, 50, 50, 50);\n</code>\n</div>\n\n\n<div>\n<code>\nlet x = 0;\nfunction draw() {\n  textOutput();\n  background(148, 196, 0);\n  fill(255, 0, 0);\n  ellipse(x, 20, 20, 20);\n  fill(0, 0, 255);\n  rect(50, 50, 50, 50);\n  ellipse(20, 20, 20, 20);\n  x += 0.1;\n}\n</code>\n</div>\n"],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/accessibility/outputs.js","line":88,"description":"<p><code class=\"language-javascript\">gridOutput()</code> lays out the\ncontent of the canvas in the form of a grid (html table) based\non the spatial location of each shape. A brief\ndescription of the canvas is available before the table output.\nThis description includes: color of the background, size of the canvas,\nnumber of objects, and object types (example: \"lavender blue canvas is\n200 by 200 and contains 4 objects - 3 ellipses 1 rectangle\"). The grid\ndescribes the content spatially, each element is placed on a cell of the\ntable depending on its position. Within each cell an element the color\nand type of shape of that element are available (example: \"orange ellipse\").\nThese descriptions can be selected individually to get more details.\nA list of elements where shape, color, location, and area are described\n(example: \"orange ellipse location=top left area=1%\") is also available.</p>\n<p><code class=\"language-javascript\">gridOutput()</code> and <code class=\"language-javascript\">gridOutput(FALLBACK)</code>\nmake the output available in <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility\" target=\"_blank\">\na sub DOM inside the canvas element</a> which is accessible to screen readers.\n<code class=\"language-javascript\">gridOutput(LABEL)</code> creates an\nadditional div with the output adjacent to the canvas, this is useful\nfor non-screen reader users that might want to display the output outside\nof the canvas' sub DOM as they code. However, using LABEL will create\nunnecessary redundancy for screen reader users. We recommend using LABEL\nonly as part of the development process of a sketch and removing it before\npublishing or sharing with screen reader users.</p>\n","itemtype":"method","name":"gridOutput","params":[{"name":"display","description":"<p>either FALLBACK or LABEL (Optional)</p>\n","type":"Constant","optional":true}],"example":["\n<div>\n<code>\ngridOutput();\nbackground(148, 196, 0);\nfill(255, 0, 0);\nellipse(20, 20, 20, 20);\nfill(0, 0, 255);\nrect(50, 50, 50, 50);\n</code>\n</div>\n\n\n<div>\n<code>\nlet x = 0;\nfunction draw() {\n  gridOutput();\n  background(148, 196, 0);\n  fill(255, 0, 0);\n  ellipse(x, 20, 20, 20);\n  fill(0, 0, 255);\n  rect(50, 50, 50, 50);\n  ellipse(20, 20, 20, 20);\n  x += 0.1;\n}\n</code>\n</div>\n"],"class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/color/color_conversion.js","line":8,"description":"<p>Conversions adapted from <a href=\"http://www.easyrgb.com/en/math.php\">http://www.easyrgb.com/en/math.php</a>.</p>\n<p>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.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":19,"description":"<p>Convert an HSBA array to HSLA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":45,"description":"<p>Convert an HSBA array to RGBA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":100,"description":"<p>Convert an HSLA array to HSBA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":123,"description":"<p>Convert an HSLA array to RGBA.</p>\n<p>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.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":187,"description":"<p>Convert an RGBA array to HSBA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":226,"description":"<p>Convert an RGBA array to HSLA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/creating_reading.js","line":16,"description":"<p>Extracts the alpha value from a color or pixel array.</p>\n","itemtype":"method","name":"alpha","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the alpha value","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\nlet c = color(0, 126, 255, 102);\nfill(c);\nrect(15, 15, 35, 70);\nlet value = alpha(c); // Sets 'value' to 102\nfill(value);\nrect(50, 15, 35, 70);\n</code>\n</div>"],"alt":"Left half of canvas light blue and right half light charcoal grey.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":45,"description":"<p>Extracts the blue value from a color or pixel array.</p>\n","itemtype":"method","name":"blue","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the blue value","type":"Number"},"example":["\n<div>\n<code>\nlet c = color(175, 100, 220);\nfill(c);\nrect(15, 20, 35, 60); // Draw left rectangle\nlet blueValue = blue(c);\nfill(0, 0, blueValue);\nrect(50, 20, 35, 60); // Draw right rectangle\n</code>\n</div>"],"alt":"Left half of canvas light purple and right half a royal blue.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":72,"description":"<p>Extracts the HSB brightness value from a color or pixel array.</p>\n","itemtype":"method","name":"brightness","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the brightness value","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 255);\nlet c = color(0, 126, 255);\nfill(c);\nrect(15, 20, 35, 60);\nlet value = brightness(c); // Sets 'value' to 255\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>\n\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 255);\nlet c = color('hsb(60, 100%, 50%)');\nfill(c);\nrect(15, 20, 35, 60);\nlet value = brightness(c); // A 'value' of 50% is 127.5\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>"],"alt":"Left half of canvas salmon pink and the right half with it's brightness colored white.\nLeft half of canvas olive colored and the right half with it's brightness color gray.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":116,"description":"<p>Creates colors for storing in variables of the color datatype. The\nparameters are interpreted as RGB or HSB values depending on the\ncurrent <a href=\"#/p5/colorMode\">colorMode()</a>. The default mode is RGB values from 0 to 255\nand, therefore, the function call color(255, 204, 0) will return a\nbright yellow color.</p>\n<p>Note that if only one value is provided to <a href=\"#/p5/color\">color()</a>, it will be interpreted\nas a grayscale value. Add a second value, and it will be used for alpha\ntransparency. When three values are specified, they are interpreted as\neither RGB or HSB values. Adding a fourth value applies alpha\ntransparency.</p>\n<p>If a single string argument is provided, RGB, RGBA and Hex CSS color\nstrings and all named color strings are supported. In this case, an alpha\nnumber value as a second argument is not supported, the RGBA form should be\nused.</p>\n","itemtype":"method","name":"color","return":{"description":"resulting color","type":"p5.Color"},"example":["\n<div>\n<code>\nlet c = color(255, 204, 0);\nfill(c);\nnoStroke();\nrect(30, 20, 55, 55);\n</code>\n</div>\n\n<div>\n<code>\nlet c = color(255, 204, 0);\nfill(c);\nnoStroke();\nellipse(25, 25, 80, 80); // Draw left circle\n// Using only one value generates a grayscale value.\nc = color(65);\nfill(c);\nellipse(75, 75, 80, 80);\n</code>\n</div>\n\n<div>\n<code>\n// You can use named SVG & CSS colors\nlet c = color('magenta');\nfill(c);\nnoStroke();\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// Example of hex color codes\nnoStroke();\nlet c = color('#0f0');\nfill(c);\nrect(0, 10, 45, 80);\nc = color('#00ff00');\nfill(c);\nrect(55, 10, 45, 80);\n</code>\n</div>\n\n<div>\n<code>\n// RGB and RGBA color strings are also supported\n// these all set to the same color (solid blue)\nlet c;\nnoStroke();\nc = color('rgb(0,0,255)');\nfill(c);\nrect(10, 10, 35, 35); // Draw rectangle\nc = color('rgb(0%, 0%, 100%)');\nfill(c);\nrect(55, 10, 35, 35); // Draw rectangle\nc = color('rgba(0, 0, 255, 1)');\nfill(c);\nrect(10, 55, 35, 35); // Draw rectangle\nc = color('rgba(0%, 0%, 100%, 1)');\nfill(c);\nrect(55, 55, 35, 35); // Draw rectangle\n</code>\n</div>\n\n<div>\n<code>\n// HSL color can also be specified by value\nlet c = color('hsl(160, 100%, 50%)');\nnoStroke();\nfill(c);\nrect(0, 10, 45, 80); // Draw rectangle\nc = color('hsla(160, 100%, 50%, 0.5)');\nfill(c);\nrect(55, 10, 45, 80); // Draw rectangle\n</code>\n</div>\n\n<div>\n<code>\n// HSB color can also be specified\nlet c = color('hsb(160, 100%, 50%)');\nnoStroke();\nfill(c);\nrect(0, 10, 45, 80); // Draw rectangle\nc = color('hsba(160, 100%, 50%, 0.5)');\nfill(c);\nrect(55, 10, 45, 80); // Draw rectangle\n</code>\n</div>\n\n<div>\n<code>\nnoStroke();\nlet c = color(50, 55, 100);\nfill(c);\nrect(0, 10, 45, 80); // Draw left rect\ncolorMode(HSB, 100);\nc = color(50, 55, 100);\nfill(c);\nrect(55, 10, 45, 80);\n</code>\n</div>"],"alt":"Yellow rect in middle right of canvas, with 55 pixel width and height.\nYellow ellipse in top left of canvas, black ellipse in bottom right,both 80x80.\nBright fuchsia rect in middle of canvas, 60 pixel width and height.\nTwo bright green rects on opposite sides of the canvas, both 45x80.\nFour blue rects in each corner of the canvas, each are 35x35.\nBright sea green rect on left and darker rect on right of canvas, both 45x80.\nDark green rect on left and lighter green rect on right of canvas, both 45x80.\nDark blue rect on left and light teal rect on right of canvas, both 45x80.","class":"p5","module":"Color","submodule":"Creating & Reading","overloads":[{"line":116,"params":[{"name":"gray","description":"<p>number specifying value between white and black.</p>\n","type":"Number"},{"name":"alpha","description":"<p>alpha value relative to current color range\n                                (default is 0-255)</p>\n","type":"Number","optional":true}],"return":{"description":"resulting color","type":"p5.Color"}},{"line":257,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"return":{"description":"","type":"p5.Color"}},{"line":269,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"return":{"description":"","type":"p5.Color"}},{"line":275,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"return":{"description":"","type":"p5.Color"}},{"line":282,"params":[{"name":"color","description":"","type":"p5.Color"}],"return":{"description":"","type":"p5.Color"}}]},{"file":"src/color/creating_reading.js","line":297,"description":"<p>Extracts the green value from a color or pixel array.</p>\n","itemtype":"method","name":"green","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the green value","type":"Number"},"example":["\n<div>\n<code>\nlet c = color(20, 75, 200); // Define color 'c'\nfill(c); // Use color variable 'c' as fill color\nrect(15, 20, 35, 60); // Draw left rectangle\n\nlet greenValue = green(c); // Get green in 'c'\nprint(greenValue); // Print \"75.0\"\nfill(0, greenValue, 0); // Use 'greenValue' in new fill\nrect(50, 20, 35, 60); // Draw right rectangle\n</code>\n</div>"],"alt":"blue rect on left and green on right, both with black outlines & 35x60.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":326,"description":"<p>Extracts the hue value from a color or pixel array.</p>\n<p>Hue exists in both HSB and HSL. This function will return the\nHSB-normalized hue when supplied with an HSB color object (or when supplied\nwith a pixel array while the color mode is HSB), but will default to the\nHSL-normalized hue otherwise. (The values will only be different if the\nmaximum hue setting for each system is different.)</p>\n","itemtype":"method","name":"hue","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the hue","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 255);\nlet c = color(0, 126, 255);\nfill(c);\nrect(15, 20, 35, 60);\nlet value = hue(c); // Sets 'value' to \"0\"\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>"],"alt":"salmon pink rect on left and black on right, both 35x60.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":361,"description":"<p>Blends two colors to find a third color somewhere between them. The amt\nparameter is the amount to interpolate between the two values where 0.0\nequal to the first color, 0.1 is very near the first color, 0.5 is halfway\nin between, etc. An amount below 0 will be treated as 0. Likewise, amounts\nabove 1 will be capped at 1. This is different from the behavior of <a href=\"#/p5/lerp\">lerp()</a>,\nbut necessary because otherwise numbers outside the range will produce\nstrange and unexpected colors.</p>\n<p>The way that colors are interpolated depends on the current color mode.</p>\n","itemtype":"method","name":"lerpColor","params":[{"name":"c1","description":"<p>interpolate from this color</p>\n","type":"p5.Color"},{"name":"c2","description":"<p>interpolate to this color</p>\n","type":"p5.Color"},{"name":"amt","description":"<p>number between 0 and 1</p>\n","type":"Number"}],"return":{"description":"interpolated color","type":"p5.Color"},"example":["\n<div>\n<code>\ncolorMode(RGB);\nstroke(255);\nbackground(51);\nlet from = color(218, 165, 32);\nlet to = color(72, 61, 139);\ncolorMode(RGB); // Try changing to HSB.\nlet interA = lerpColor(from, to, 0.33);\nlet interB = lerpColor(from, to, 0.66);\nfill(from);\nrect(10, 20, 20, 60);\nfill(interA);\nrect(30, 20, 20, 60);\nfill(interB);\nrect(50, 20, 20, 60);\nfill(to);\nrect(70, 20, 20, 60);\n</code>\n</div>"],"alt":"4 rects one tan, brown, brownish purple, purple, with white outlines & 20x60","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":452,"description":"<p>Extracts the HSL lightness value from a color or pixel array.</p>\n","itemtype":"method","name":"lightness","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the lightness","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(HSL);\nlet c = color(156, 100, 50, 1);\nfill(c);\nrect(15, 20, 35, 60);\nlet value = lightness(c); // Sets 'value' to 50\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>"],"alt":"light pastel green rect on left and dark grey rect on right, both 35x60.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":482,"description":"<p>Extracts the red value from a color or pixel array.</p>\n","itemtype":"method","name":"red","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the red value","type":"Number"},"example":["\n<div>\n<code>\nlet c = color(255, 204, 0); // Define color 'c'\nfill(c); // Use color variable 'c' as fill color\nrect(15, 20, 35, 60); // Draw left rectangle\n\nlet redValue = red(c); // Get red in 'c'\nprint(redValue); // Print \"255.0\"\nfill(redValue, 0, 0); // Use 'redValue' in new fill\nrect(50, 20, 35, 60); // Draw right rectangle\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\ncolorMode(RGB, 255); // Sets the range for red, green, and blue to 255\nlet c = color(127, 255, 0);\ncolorMode(RGB, 1); // Sets the range for red, green, and blue to 1\nlet myColor = red(c);\nprint(myColor); // 0.4980392156862745\n</code>\n</div>"],"alt":"yellow rect on left and red rect on right, both with black outlines and 35x60.\ngrey canvas","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":522,"description":"<p>Extracts the saturation value from a color or pixel array.</p>\n<p>Saturation is scaled differently in HSB and HSL. This function will return\nthe HSB saturation when supplied with an HSB color object (or when supplied\nwith a pixel array while the color mode is HSB), but will default to the\nHSL saturation otherwise.</p>\n","itemtype":"method","name":"saturation","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the saturation value","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 255);\nlet c = color(0, 126, 255);\nfill(c);\nrect(15, 20, 35, 60);\nlet value = saturation(c); // Sets 'value' to 126\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>"],"alt":"deep pink rect on left and grey rect on right, both 35x60.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":51,"description":"<p>This function returns the color formatted as a string. This can be useful\nfor debugging, or for using p5.js with other libraries.</p>\n","itemtype":"method","name":"toString","params":[{"name":"format","description":"<p>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.</p>\n","type":"String","optional":true}],"return":{"description":"the formatted string","type":"String"},"example":["\n<div>\n<code>\ncreateCanvas(200, 100);\nlet myColor;\nstroke(255);\nmyColor = color(100, 100, 250);\nfill(myColor);\nrotate(HALF_PI);\ntext(myColor.toString(), 0, -5);\ntext(myColor.toString('#rrggbb'), 0, -30);\ntext(myColor.toString('rgba%'), 0, -55);\n</code>\n</div>\n\n<div>\n<code>\nlet myColor = color(100, 130, 250);\ntext(myColor.toString('#rrggbb'), 25, 25);\n</code>\n</div>"],"alt":"A canvas with 3 text representation of their color.","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":256,"description":"<p>The setRed function sets the red component of a color.\nThe range depends on your color mode, in the default RGB mode it's between 0 and 255.</p>\n","itemtype":"method","name":"setRed","params":[{"name":"red","description":"<p>the new red value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet backgroundColor;\n\nfunction setup() {\n  backgroundColor = color(100, 50, 150);\n}\n\nfunction draw() {\n  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));\n  background(backgroundColor);\n}\n</code>\n</div>"],"alt":"canvas with gradually changing background color","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":285,"description":"<p>The setGreen function sets the green component of a color.\nThe range depends on your color mode, in the default RGB mode it's between 0 and 255.</p>\n","itemtype":"method","name":"setGreen","params":[{"name":"green","description":"<p>the new green value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet backgroundColor = color(100, 50, 150);\nfunction draw() {\n  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));\n  background(backgroundColor);\n}\n</code>\n</div>"],"alt":"canvas with gradually changing background color","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":309,"description":"<p>The setBlue function sets the blue component of a color.\nThe range depends on your color mode, in the default RGB mode it's between 0 and 255.</p>\n","itemtype":"method","name":"setBlue","params":[{"name":"blue","description":"<p>the new blue value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet backgroundColor = color(100, 50, 150);\nfunction draw() {\n  backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));\n  background(backgroundColor);\n}\n</code>\n</div>"],"alt":"canvas with gradually changing background color","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":333,"description":"<p>The setAlpha function sets the transparency (alpha) value of a color.\nThe range depends on your color mode, in the default RGB mode it's between 0 and 255.</p>\n","itemtype":"method","name":"setAlpha","params":[{"name":"alpha","description":"<p>the new alpha value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nfunction draw() {\n  clear();\n  background(200);\n  squareColor = color(100, 50, 100);\n  squareColor.setAlpha(128 + 128 * sin(millis() / 1000));\n  fill(squareColor);\n  rect(13, 13, width - 26, height - 26);\n}\n</code>\n</div>"],"alt":"a square with gradually changing opacity on a gray background","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":404,"description":"<p>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.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":435,"description":"<p>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.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":454,"description":"<p>CSS named colors.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":608,"description":"<p>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.</p>\n<p>Note that RGB values of .9 are not parsed by IE, but are supported here for\ncolor string consistency.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":621,"description":"<p>Full color string patterns. The capture groups are necessary.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":969,"description":"<p>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.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/setting.js","line":13,"description":"<p>The <a href=\"#/p5/background\">background()</a> function sets the color used\nfor the background of the p5.js canvas. The default background is transparent.\nThis function is typically used within <a href=\"#/p5/draw\">draw()</a> to clear\nthe display window at the beginning of each frame, but it can be used inside\n<a href=\"#/p5/setup\">setup()</a> to set the background on the first frame of\nanimation or if the background need only be set once.</p>\n<p>The color is either specified in terms of the RGB, HSB, or HSL color depending\non the current <a href=\"#/p5/colorMode\">colorMode</a>. (The default color space\nis RGB, with each value in the range from 0 to 255). The alpha range by default\nis also 0 to 255.<br><br></p>\n<p>If a single string argument is provided, RGB, RGBA and Hex CSS color strings\nand all named color strings are supported. In this case, an alpha number\nvalue as a second argument is not supported, the RGBA form should be used.</p>\n<p>A <a href=\"#/p5.Color\">p5.Color</a> object can also be provided to set the background color.</p>\n<p>A <a href=\"#/p5.Image\">p5.Image</a> can also be provided to set the background image.</p>\n","itemtype":"method","name":"background","chainable":1,"example":["\n<div>\n<code>\n// Grayscale integer value\nbackground(51);\n</code>\n</div>\n\n<div>\n<code>\n// R, G & B integer values\nbackground(255, 204, 0);\n</code>\n</div>\n\n<div>\n<code>\n// H, S & B integer values\ncolorMode(HSB);\nbackground(255, 204, 100);\n</code>\n</div>\n\n<div>\n<code>\n// Named SVG/CSS color string\nbackground('red');\n</code>\n</div>\n\n<div>\n<code>\n// three-digit hexadecimal RGB notation\nbackground('#fae');\n</code>\n</div>\n\n<div>\n<code>\n// six-digit hexadecimal RGB notation\nbackground('#222222');\n</code>\n</div>\n\n<div>\n<code>\n// integer RGB notation\nbackground('rgb(0,255,0)');\n</code>\n</div>\n\n<div>\n<code>\n// integer RGBA notation\nbackground('rgba(0,255,0, 0.25)');\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGB notation\nbackground('rgb(100%,0%,10%)');\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGBA notation\nbackground('rgba(100%,0%,100%,0.5)');\n</code>\n</div>\n\n<div>\n<code>\n// p5 Color object\nbackground(color(0, 0, 255));\n</code>\n</div>"],"alt":"canvas with darkest charcoal grey background.\ncanvas with yellow background.\ncanvas with royal blue background.\ncanvas with red background.\ncanvas with pink background.\ncanvas with black background.\ncanvas with bright green background.\ncanvas with soft green background.\ncanvas with red background.\ncanvas with light purple background.\ncanvas with blue background.","class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":13,"params":[{"name":"color","description":"<p>any value created by the <a href=\"#/p5/color\">color()</a> function</p>\n","type":"p5.Color"}],"chainable":1},{"line":131,"params":[{"name":"colorstring","description":"<p>color string, possible formats include: integer\n                        rgb() or rgba(), percentage rgb() or rgba(),\n                        3-digit hex, 6-digit hex</p>\n","type":"String"},{"name":"a","description":"<p>opacity of the background relative to current\n                            color range (default is 0-255)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":141,"params":[{"name":"gray","description":"<p>specifies a value between white and black</p>\n","type":"Number"},{"name":"a","description":"","type":"Number","optional":true}],"chainable":1},{"line":148,"params":[{"name":"v1","description":"<p>red or hue value (depending on the current color\n                       mode)</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value (depending on the current\n                       color mode)</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value (depending on the current\n                       color mode)</p>\n","type":"Number"},{"name":"a","description":"","type":"Number","optional":true}],"chainable":1},{"line":160,"params":[{"name":"values","description":"<p>an array containing the red, green, blue\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":167,"params":[{"name":"image","description":"<p>image created with <a href=\"#/p5/loadImage\">loadImage()</a> or <a href=\"#/p5/createImage\">createImage()</a>,\n                            to set as background\n                            (must be same size as the sketch window)</p>\n","type":"p5.Image"},{"name":"a","description":"","type":"Number","optional":true}],"chainable":1}]},{"file":"src/color/setting.js","line":180,"description":"<p>Clears the pixels within a buffer. This function only clears the canvas.\nIt will not clear objects created by createX() methods such as\n<a href=\"#/p5/createVideo\">createVideo()</a> or <a href=\"#/p5/createDiv\">createDiv()</a>.\nUnlike the main graphics context, pixels in additional graphics areas created\nwith <a href=\"#/p5/createGraphics\">createGraphics()</a> can be entirely\nor partially transparent. This function clears everything to make all of\nthe pixels 100% transparent.</p>\n","itemtype":"method","name":"clear","chainable":1,"example":["\n<div>\n<code>\n// Clear the screen on mouse press.\nfunction draw() {\n  ellipse(mouseX, mouseY, 20, 20);\n}\nfunction mousePressed() {\n  clear();\n  background(128);\n}\n</code>\n</div>"],"alt":"small white ellipses are continually drawn at mouse's x and y coordinates.","class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":214,"description":"<p><a href=\"#/p5/colorMode\">colorMode()</a> changes the way p5.js interprets\ncolor data. By default, the parameters for <a href=\"#/p5/fill\">fill()</a>,\n<a href=\"#/p5/stroke\">stroke()</a>, <a href=\"#/p5/background\">background()</a>,\nand <a href=\"#/p5/color\">color()</a> are defined by values between 0 and 255\nusing the RGB color model. This is equivalent to setting colorMode(RGB, 255).\nSetting colorMode(HSB) lets you use the HSB system instead. By default, this\nis colorMode(HSB, 360, 100, 100, 1). You can also use HSL.</p>\n<p>Note: existing color objects remember the mode that they were created in,\nso you can change modes as you like without affecting their appearance.</p>\n","itemtype":"method","name":"colorMode","chainable":1,"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(RGB, 100);\nfor (let i = 0; i < 100; i++) {\n  for (let j = 0; j < 100; j++) {\n    stroke(i, j, 0);\n    point(i, j);\n  }\n}\n</code>\n</div>\n\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 100);\nfor (let i = 0; i < 100; i++) {\n  for (let j = 0; j < 100; j++) {\n    stroke(i, j, 100);\n    point(i, j);\n  }\n}\n</code>\n</div>\n\n<div>\n<code>\ncolorMode(RGB, 255);\nlet c = color(127, 255, 0);\ncolorMode(RGB, 1);\nlet myColor = c._getRed();\ntext(myColor, 10, 10, 80, 80);\n</code>\n</div>\n\n<div>\n<code>\nnoFill();\ncolorMode(RGB, 255, 255, 255, 1);\nbackground(255);\nstrokeWeight(4);\nstroke(255, 0, 10, 0.3);\nellipse(40, 40, 50, 50);\nellipse(50, 50, 40, 40);\n</code>\n</div>"],"alt":"Green to red gradient from bottom L to top R. shading originates from top left.\nRainbow gradient from left to right. Brightness increasing to white at top.\nunknown image.\n50x50 ellipse at middle L & 40x40 ellipse at center. Translucent pink outlines.","class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":214,"params":[{"name":"mode","description":"<p>either RGB, HSB or HSL, corresponding to\n                         Red/Green/Blue and Hue/Saturation/Brightness\n                         (or Lightness)</p>\n","type":"Constant"},{"name":"max","description":"<p>range for all values</p>\n","type":"Number","optional":true}],"chainable":1},{"line":289,"params":[{"name":"mode","description":"","type":"Constant"},{"name":"max1","description":"<p>range for the red or hue depending on the\n                             current color mode</p>\n","type":"Number"},{"name":"max2","description":"<p>range for the green or saturation depending\n                             on the current color mode</p>\n","type":"Number"},{"name":"max3","description":"<p>range for the blue or brightness/lightness\n                             depending on the current color mode</p>\n","type":"Number"},{"name":"maxA","description":"<p>range for the alpha</p>\n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/color/setting.js","line":333,"description":"<p>Sets the color used to fill shapes. For example, if you run fill(204, 102, 0),\nall shapes drawn after the fill command will be filled with the color orange.\nThis color is either specified in terms of the RGB or HSB color depending on\nthe current <a href=\"#/p5/colorMode\">colorMode()</a>. (The default color space\nis RGB, with each value in the range from 0 to 255). The alpha range by default\nis also 0 to 255.</p>\n<p>If a single string argument is provided, RGB, RGBA and Hex CSS color strings\nand all named color strings are supported. In this case, an alpha number\nvalue as a second argument is not supported, the RGBA form should be used.</p>\n<p>A p5 <a href=\"#/p5.Color\">Color</a> object can also be provided to set the fill color.</p>\n","itemtype":"method","name":"fill","chainable":1,"example":["\n<div>\n<code>\n// Grayscale integer value\nfill(51);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// R, G & B integer values\nfill(255, 204, 0);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// H, S & B integer values\ncolorMode(HSB);\nfill(255, 204, 100);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// Named SVG/CSS color string\nfill('red');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// three-digit hexadecimal RGB notation\nfill('#fae');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// six-digit hexadecimal RGB notation\nfill('#222222');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// integer RGB notation\nfill('rgb(0,255,0)');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// integer RGBA notation\nfill('rgba(0,255,0, 0.25)');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGB notation\nfill('rgb(100%,0%,10%)');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGBA notation\nfill('rgba(100%,0%,100%,0.5)');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// p5 Color object\nfill(color(0, 0, 255));\nrect(20, 20, 60, 60);\n</code>\n</div>"],"alt":"60x60 dark charcoal grey rect with black outline in center of canvas.\n60x60 yellow rect with black outline in center of canvas.\n60x60 royal blue rect with black outline in center of canvas.\n60x60 red rect with black outline in center of canvas.\n60x60 pink rect with black outline in center of canvas.\n60x60 black rect with black outline in center of canvas.\n60x60 light green rect with black outline in center of canvas.\n60x60 soft green rect with black outline in center of canvas.\n60x60 red rect with black outline in center of canvas.\n60x60 dark fuchsia rect with black outline in center of canvas.\n60x60 blue rect with black outline in center of canvas.","class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":333,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":460,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"chainable":1},{"line":466,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":473,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":480,"params":[{"name":"color","description":"<p>the fill color</p>\n","type":"p5.Color"}],"chainable":1}]},{"file":"src/color/setting.js","line":492,"description":"<p>Disables filling geometry. If both <a href=\"#/p5/noStroke\">noStroke()</a> and <a href=\"#/p5/noFill\">noFill()</a> are called,\nnothing will be drawn to the screen.</p>\n","itemtype":"method","name":"noFill","chainable":1,"example":["\n<div>\n<code>\nrect(15, 10, 55, 55);\nnoFill();\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  noFill();\n  stroke(100, 100, 240);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  box(45, 45, 45);\n}\n</code>\n</div>"],"alt":"white rect top middle and noFill rect center. Both 60x60 with black outlines.\nblack canvas with purple cube wireframe spinning","class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":533,"description":"<p>Disables drawing the stroke (outline). If both <a href=\"#/p5/noStroke\">noStroke()</a> and <a href=\"#/p5/noFill\">noFill()</a>\nare called, nothing will be drawn to the screen.</p>\n","itemtype":"method","name":"noStroke","chainable":1,"example":["\n<div>\n<code>\nnoStroke();\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  noStroke();\n  fill(240, 150, 150);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  box(45, 45, 45);\n}\n</code>\n</div>"],"alt":"60x60 white rect at center. no outline.\nblack canvas with pink cube spinning","class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":573,"description":"<p>Sets the color used to draw lines and borders around shapes. This color\nis either specified in terms of the RGB or HSB color depending on the\ncurrent <a href=\"#/p5/colorMode\">colorMode()</a> (the default color space\nis RGB, with each value in the range from 0 to 255). The alpha range by\ndefault is also 0 to 255.</p>\n<p>If a single string argument is provided, RGB, RGBA and Hex CSS color\nstrings and all named color strings are supported. In this case, an alpha\nnumber value as a second argument is not supported, the RGBA form should be\nused.</p>\n<p>A p5 <a href=\"#/p5.Color\">Color</a> object can also be provided to set the stroke color.</p>\n","itemtype":"method","name":"stroke","chainable":1,"example":["\n<div>\n<code>\n// Grayscale integer value\nstrokeWeight(4);\nstroke(51);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// R, G & B integer values\nstroke(255, 204, 0);\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// H, S & B integer values\ncolorMode(HSB);\nstrokeWeight(4);\nstroke(255, 204, 100);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// Named SVG/CSS color string\nstroke('red');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// three-digit hexadecimal RGB notation\nstroke('#fae');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// six-digit hexadecimal RGB notation\nstroke('#222222');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// integer RGB notation\nstroke('rgb(0,255,0)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// integer RGBA notation\nstroke('rgba(0,255,0,0.25)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGB notation\nstroke('rgb(100%,0%,10%)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGBA notation\nstroke('rgba(100%,0%,100%,0.5)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// p5 Color object\nstroke(color(0, 0, 255));\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>"],"alt":"60x60 white rect at center. Dark charcoal grey outline.\n60x60 white rect at center. Yellow outline.\n60x60 white rect at center. Royal blue outline.\n60x60 white rect at center. Red outline.\n60x60 white rect at center. Pink outline.\n60x60 white rect at center. Black outline.\n60x60 white rect at center. Bright green outline.\n60x60 white rect at center. Soft green outline.\n60x60 white rect at center. Red outline.\n60x60 white rect at center. Dark fuchsia outline.\n60x60 white rect at center. Blue outline.","class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":573,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":712,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"chainable":1},{"line":718,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":725,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":732,"params":[{"name":"color","description":"<p>the stroke color</p>\n","type":"p5.Color"}],"chainable":1}]},{"file":"src/color/setting.js","line":745,"description":"<p>All drawing that follows <a href=\"#/p5/erase\">erase()</a> will subtract from\nthe canvas.Erased areas will reveal the web page underneath the canvas.Erasing\ncan be canceled with <a href=\"#/p5/noErase\">noErase()</a>.</p>\n<p>Drawing done with <a href=\"#/p5/image\">image()</a> and <a href=\"#/p5/background\">\nbackground()</a> in between <a href=\"#/p5/erase\">erase()</a> and\n<a href=\"#/p5/noErase\">noErase()</a> will not erase the canvas but works as usual.</p>\n","itemtype":"method","name":"erase","params":[{"name":"strengthFill","description":"<p>A number (0-255) for the strength of erasing for a shape's fill.\n                                       This will default to 255 when no argument is given, which\n                                       is full strength.</p>\n","type":"Number","optional":true},{"name":"strengthStroke","description":"<p>A number (0-255) for the strength of erasing for a shape's stroke.\n                                       This will default to 255 when no argument is given, which\n                                       is full strength.</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nbackground(100, 100, 250);\nfill(250, 100, 100);\nrect(20, 20, 60, 60);\nerase();\nellipse(25, 30, 30);\nnoErase();\n</code>\n</div>\n\n<div>\n<code>\nbackground(150, 250, 150);\nfill(100, 100, 250);\nrect(20, 20, 60, 60);\nstrokeWeight(5);\nerase(150, 255);\ntriangle(50, 10, 70, 50, 90, 10);\nnoErase();\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  smooth();\n  createCanvas(100, 100, WEBGL);\n  // Make a &lt;p&gt; element and put it behind the canvas\n  let p = createP('I am a dom element');\n  p.center();\n  p.style('font-size', '20px');\n  p.style('text-align', 'center');\n  p.style('z-index', '-9999');\n}\n\nfunction draw() {\n  background(250, 250, 150);\n  fill(15, 195, 185);\n  noStroke();\n  sphere(30);\n  erase();\n  rotateY(frameCount * 0.02);\n  translate(0, 0, 40);\n  torus(15, 5);\n  noErase();\n}\n</code>\n</div>"],"alt":"60x60 centered pink rect, purple background. Elliptical area in top-left of rect is erased white.\n60x60 centered purple rect, mint green background. Triangle in top-right is partially erased with fully erased outline.\n60x60 centered teal sphere, yellow background. Torus rotating around sphere erases to reveal black text underneath.","class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":825,"description":"<p>Ends erasing that was started with <a href=\"#/p5/erase\">erase()</a>.\nThe <a href=\"#/p5/fill\">fill()</a>, <a href=\"#/p5/stroke\">stroke()</a>, and\n<a href=\"#/p5/blendMode\">blendMode()</a> settings will return to what they were\nprior to calling <a href=\"#/p5/erase\">erase()</a>.</p>\n","itemtype":"method","name":"noErase","chainable":1,"example":["\n<div>\n<code>\nbackground(235, 145, 15);\nnoStroke();\nfill(30, 45, 220);\nrect(30, 10, 10, 80);\nerase();\nellipse(50, 50, 60);\nnoErase();\nrect(70, 10, 10, 80);\n</code>\n</div>"],"alt":"Orange background, with two tall blue rectangles. A centered ellipse erased the first blue rect but not the second.","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). Here is a\nbrief outline of the functions called in this system.\n\nThe FES may be invoked by a call to either (1) _validateParameters","(2) _friendlyFileLoadError","(3) _friendlyError","(4) helpForMisusedAtTopLevelCode","or (5) _fesErrorMontitor.\n\n_validateParameters is located in validate_params.js along with other code used\nfor parameter validation.\n_friendlyFileLoadError is located in file_errors.js along with other code used for\ndealing with file load errors.\nApart from this","there's also a file stacktrace.js","which contains the code to parse\nthe error stack","borrowed from https://github.com/stacktracejs/stacktrace.js\n\nThis file contains the core as well as miscellaneous functionality of the FES.\n\nhelpForMisusedAtTopLevelCode is called by this file on window load to check for use\nof p5.js functions outside of setup() or draw()\nItems 1-3 above are called by functions in the p5 library located in other files.\n\n_fesErrorMonitor can be called either by an error event","an unhandled rejection event\nor it can be manually called in a catch block as follows:\ntry { someCode(); } catch(err) { p5._fesErrorMonitor(err); }\nfesErrorMonitor is responsible for handling all kinds of errors that the browser may show.\nIt gives a simplified explanation for these. It currently works with some kinds of\nReferenceError","SyntaxError","and TypeError. The complete list of supported errors can be\nfound in browser_errors.js.\n\n_friendlyFileLoadError is called by the loadX() methods.\n_friendlyError can be called by any function to offer a helpful error message.\n\n_validateParameters is called by functions in the p5.js API to help users ensure\nther are calling p5 function with the right parameter types. The property\ndisableFriendlyErrors = false can be set from a p5.js sketch to turn off parameter\nchecking. The call sequence from _validateParameters looks something like this:\n\n_validateParameters\n  buildArgTypeCache\n    addType\n  lookupParamDoc\n  scoreOverload\n    testParamTypes\n    testParamType\n  getOverloadErrors\n  _friendlyParamError\n    ValidationError\n    report\n      friendlyWelcome\n\nThe call sequences to _friendlyFileLoadError and _friendlyError are like this:\n_friendlyFileLoadError\n  report\n\n_friendlyError\n  report\n\nThe call sequence for _fesErrorMonitor roughly looks something like:\n_fesErrorMonitor\n  processStack\n    printFriendlyError\n  (if type of error is ReferenceError)\n    _handleMisspelling\n      computeEditDistance\n      report\n    report\n    printFriendlyStack\n  (if type of error is SyntaxError","TypeError","etc)\n    report\n    printFriendlyStack\n\nreport() is the main function that prints directly to console with the output\nof the error helper message. Note: friendlyWelcome() also prints to console directly."],"class":"p5","module":"Color"},{"file":"src/core/friendly_errors/fes_core.js","line":819,"description":"<p>Prints out all the colors in the color pallete with white text.\nFor color blindness testing.</p>\n","class":"p5","module":"Color"},{"file":"src/core/friendly_errors/file_errors.js","line":1,"requires":["core\n\nThis file contains the part of the FES responsible for dealing with\nfile load errors"],"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\n\nThis file contains the part of the FES responsible for validating function\nparameters"],"class":"p5","module":"Color"},{"file":"src/core/friendly_errors/validate_params.js","line":626,"description":"<p>Validates parameters\nparam  {String}               func    the name of the function\nparam  {Array}                args    user input arguments</p>\n<p>example:\n const a;\n ellipse(10,10,a,5);\nconsole ouput:\n \"It looks like ellipse received an empty variable in spot #2.\"</p>\n<p>example:\n ellipse(10,\"foo\",5,5);\nconsole output:\n \"ellipse was expecting a number for parameter #1,\n          received \"foo\" instead.\"</p>\n","class":"p5","module":"Color"},{"file":"src/core/shape/2d_primitives.js","line":16,"description":"<p>This function does 3 things:</p>\n<ol>\n<li><p>Bounds the desired start/stop angles for an arc (in radians) so that:</p>\n<pre><code>0 <= start < TWO_PI ;    start <= stop < start + TWO_PI</code></pre><p>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.</p>\n</li>\n<li><p>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.</p>\n</li>\n<li><p>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).</p>\n</li>\n</ol>\n","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":102,"description":"<p>Draw an arc to the screen. If called with only x, y, w, h, start and stop,\nthe arc will be drawn and filled as an open pie segment. If a mode parameter\nis provided, the arc will be filled like an open semi-circle (OPEN), a closed\nsemi-circle (CHORD), or as a closed pie segment (PIE). The origin may be changed\nwith the <a href=\"#/p5/ellipseMode\">ellipseMode()</a> function.</p>\n<p>The arc is always drawn clockwise from wherever start falls to wherever stop\nfalls on the ellipse.Adding or subtracting TWO_PI to either angle does not\nchange where they fall. If both start and stop fall at the same place, a full\nellipse will be drawn. Be aware that the y-axis increases in the downward\ndirection, therefore angles are measured clockwise from the positive\nx-direction (\"3 o'clock\").</p>\n","itemtype":"method","name":"arc","params":[{"name":"x","description":"<p>x-coordinate of the arc's ellipse</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the arc's ellipse</p>\n","type":"Number"},{"name":"w","description":"<p>width of the arc's ellipse by default</p>\n","type":"Number"},{"name":"h","description":"<p>height of the arc's ellipse by default</p>\n","type":"Number"},{"name":"start","description":"<p>angle to start the arc, specified in radians</p>\n","type":"Number"},{"name":"stop","description":"<p>angle to stop the arc, specified in radians</p>\n","type":"Number"},{"name":"mode","description":"<p>optional parameter to determine the way of drawing\n                        the arc. either CHORD, PIE or OPEN</p>\n","type":"Constant","optional":true},{"name":"detail","description":"<p>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.</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\narc(50, 55, 50, 50, 0, HALF_PI);\nnoFill();\narc(50, 55, 60, 60, HALF_PI, PI);\narc(50, 55, 70, 70, PI, PI + QUARTER_PI);\narc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);\n</code>\n</div>\n\n<div>\n<code>\narc(50, 50, 80, 80, 0, PI + QUARTER_PI);\n</code>\n</div>\n\n<div>\n<code>\narc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);\n</code>\n</div>\n\n<div>\n<code>\narc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);\n</code>\n</div>\n\n<div>\n<code>\narc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);\n</code>\n</div>"],"alt":"shattered outline of an ellipse with a quarter of a white circle bottom-right.\nwhite ellipse with top right quarter missing.\nwhite ellipse with black outline with top right missing.\nwhite ellipse with top right missing with black outline around shape.\nwhite ellipse with top right quarter missing with black outline around the shape.","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":232,"description":"<p>Draws an ellipse (oval) to the screen. By default, the first two parameters\nset the location of the center of the ellipse, and the third and fourth\nparameters set the shape's width and height. If no height is specified, the\nvalue of width is used for both the width and height. If a negative height or\nwidth is specified, the absolute value is taken.</p>\n<p>An ellipse with equal width and height is a circle. The origin may be changed\nwith the <a href=\"#/p5/ellipseMode\">ellipseMode()</a> function.</p>\n","itemtype":"method","name":"ellipse","chainable":1,"example":["\n<div>\n<code>\nellipse(56, 46, 55, 55);\n</code>\n</div>"],"alt":"white ellipse with black outline in middle-right of canvas that is 55x55","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":232,"params":[{"name":"x","description":"<p>x-coordinate of the center of ellipse.</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the center of ellipse.</p>\n","type":"Number"},{"name":"w","description":"<p>width of the ellipse.</p>\n","type":"Number"},{"name":"h","description":"<p>height of the ellipse.</p>\n","type":"Number","optional":true}],"chainable":1},{"line":259,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"w","description":"","type":"Number"},{"name":"h","description":"","type":"Number"},{"name":"detail","description":"<p>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.</p>\n","type":"Integer","optional":true}]}]},{"file":"src/core/shape/2d_primitives.js","line":275,"description":"<p>Draws a circle to the screen. A circle is a simple closed shape. It is the set\nof all points in a plane that are at a given distance from a given point,\nthe centre. This function is a special case of the ellipse() function, where\nthe width and height of the ellipse are the same. Height and width of the\nellipse correspond to the diameter of the circle. By default, the first two\nparameters set the location of the centre of the circle, the third sets the\ndiameter of the circle.</p>\n","itemtype":"method","name":"circle","params":[{"name":"x","description":"<p>x-coordinate of the centre of the circle.</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the centre of the circle.</p>\n","type":"Number"},{"name":"d","description":"<p>diameter of the circle.</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\n// Draw a circle at location (30, 30) with a diameter of 20.\ncircle(30, 30, 20);\n</code>\n</div>"],"alt":"white circle with black outline in mid of canvas that is 55x55.","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":339,"description":"<p>Draws a line (a direct path between two points) to the screen. If called with\nonly 4 parameters, it will draw a line in 2D with a default width of 1 pixel.\nThis width can be modified by using the <a href=\"#/p5/strokeWeight\">\nstrokeWeight()</a> function. A line cannot be filled, therefore the <a\nhref=\"#/p5/fill\">fill()</a> function will not affect the color of a line. So to\ncolor a line, use the <a href=\"#/p5/stroke\">stroke()</a> function.</p>\n","itemtype":"method","name":"line","chainable":1,"example":["\n<div>\n<code>\nline(30, 20, 85, 75);\n</code>\n</div>\n\n<div>\n<code>\nline(30, 20, 85, 20);\nstroke(126);\nline(85, 20, 85, 75);\nstroke(255);\nline(85, 75, 30, 75);\n</code>\n</div>"],"alt":"An example showing a line 78 pixels long running from mid-top to bottom-right of canvas.\nAn example showing 3 lines of various stroke sizes. Form top, bottom and right sides of a square.","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":339,"params":[{"name":"x1","description":"<p>the x-coordinate of the first point</p>\n","type":"Number"},{"name":"y1","description":"<p>the y-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"<p>the x-coordinate of the second point</p>\n","type":"Number"},{"name":"y2","description":"<p>the y-coordinate of the second point</p>\n","type":"Number"}],"chainable":1},{"line":375,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>the z-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>the z-coordinate of the second point</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/2d_primitives.js","line":400,"description":"<p>Draws a point, a coordinate in space at the dimension of one pixel.\nThe first parameter is the horizontal value for the point, the second\nparam is the vertical value for the point. The color of the point is\nchanged with the <a href=\"#/p5/stroke\">stroke()</a> function. The size of the point\ncan be changed with the <a href=\"#/p5/strokeWeight\">strokeWeight()</a> function.</p>\n","itemtype":"method","name":"point","chainable":1,"example":["\n<div>\n<code>\npoint(30, 20);\npoint(85, 20);\npoint(85, 75);\npoint(30, 75);\n</code>\n</div>\n\n<div>\n<code>\npoint(30, 20);\npoint(85, 20);\nstroke('purple'); // Change the color\nstrokeWeight(10); // Make the points 10 pixels in size\npoint(85, 75);\npoint(30, 75);\n</code>\n</div>\n\n<div>\n<code>\nlet a = createVector(10, 10);\npoint(a);\nlet b = createVector(10, 20);\npoint(b);\npoint(createVector(20, 10));\npoint(createVector(20, 20));\n</code>\n</div>"],"alt":"4 points centered in the middle-right of the canvas.\n2 large points and 2 large purple points centered in the middle-right of the canvas.\nVertices of a square of length 10 pixels towards the top-left of the canvas.","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":400,"params":[{"name":"x","description":"<p>the x-coordinate</p>\n","type":"Number"},{"name":"y","description":"<p>the y-coordinate</p>\n","type":"Number"},{"name":"z","description":"<p>the z-coordinate (for WebGL mode)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":450,"params":[{"name":"coordinate_vector","description":"<p>the coordinate vector</p>\n","type":"p5.Vector"}],"chainable":1}]},{"file":"src/core/shape/2d_primitives.js","line":478,"description":"<p>Draws a quad on the canvas. A quad is a quadrilateral, a four sided polygon. It is\nsimilar to a rectangle, but the angles between its edges are not\nconstrained to ninety degrees. The first pair of parameters (x1,y1)\nsets the first vertex and the subsequent pairs should proceed\nclockwise or counter-clockwise around the defined shape.\nz-arguments only work when quad() is used in WEBGL mode.</p>\n","itemtype":"method","name":"quad","chainable":1,"example":["\n<div>\n<code>\nquad(38, 31, 86, 20, 69, 63, 30, 76);\n</code>\n</div>"],"alt":"irregular white quadrilateral shape with black outline mid-right of canvas.","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":478,"params":[{"name":"x1","description":"<p>the x-coordinate of the first point</p>\n","type":"Number"},{"name":"y1","description":"<p>the y-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"<p>the x-coordinate of the second point</p>\n","type":"Number"},{"name":"y2","description":"<p>the y-coordinate of the second point</p>\n","type":"Number"},{"name":"x3","description":"<p>the x-coordinate of the third point</p>\n","type":"Number"},{"name":"y3","description":"<p>the y-coordinate of the third point</p>\n","type":"Number"},{"name":"x4","description":"<p>the x-coordinate of the fourth point</p>\n","type":"Number"},{"name":"y4","description":"<p>the y-coordinate of the fourth point</p>\n","type":"Number"},{"name":"detailX","description":"<p>number of segments in the x-direction</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of segments in the y-direction</p>\n","type":"Integer","optional":true}],"chainable":1},{"line":508,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>the z-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>the z-coordinate of the second point</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>the z-coordinate of the third point</p>\n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"<p>the z-coordinate of the fourth point</p>\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":552,"description":"<p>Draws a rectangle on the canvas. A rectangle is a four-sided closed shape with\nevery angle at ninety degrees. By default, the first two parameters set\nthe location of the upper-left corner, the third sets the width, and the\nfourth sets the height. The way these parameters are interpreted, may be\nchanged with the <a href=\"#/p5/rectMode\">rectMode()</a> function.</p>\n<p>The fifth, sixth, seventh and eighth parameters, if specified,\ndetermine corner radius for the top-left, top-right, lower-right and\nlower-left corners, respectively. An omitted corner radius parameter is set\nto the value of the previously specified radius value in the parameter list.</p>\n","itemtype":"method","name":"rect","chainable":1,"example":["\n<div>\n<code>\n// Draw a rectangle at location (30, 20) with a width and height of 55.\nrect(30, 20, 55, 55);\n</code>\n</div>\n\n<div>\n<code>\n// Draw a rectangle with rounded corners, each having a radius of 20.\nrect(30, 20, 55, 55, 20);\n</code>\n</div>\n\n<div>\n<code>\n// Draw a rectangle with rounded corners having the following radii:\n// top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.\nrect(30, 20, 55, 55, 20, 15, 10, 5);\n</code>\n</div>"],"alt":"55x55 white rect with black outline in mid-right of canvas.\n55x55 white rect with black outline and rounded edges in mid-right of canvas.\n55x55 white rect with black outline and rounded edges of different radii.","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":552,"params":[{"name":"x","description":"<p>x-coordinate of the rectangle.</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the rectangle.</p>\n","type":"Number"},{"name":"w","description":"<p>width of the rectangle.</p>\n","type":"Number"},{"name":"h","description":"<p>height of the rectangle.</p>\n","type":"Number","optional":true},{"name":"tl","description":"<p>optional radius of top-left corner.</p>\n","type":"Number","optional":true},{"name":"tr","description":"<p>optional radius of top-right corner.</p>\n","type":"Number","optional":true},{"name":"br","description":"<p>optional radius of bottom-right corner.</p>\n","type":"Number","optional":true},{"name":"bl","description":"<p>optional radius of bottom-left corner.</p>\n","type":"Number","optional":true}],"chainable":1},{"line":603,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"w","description":"","type":"Number"},{"name":"h","description":"","type":"Number"},{"name":"detailX","description":"<p>number of segments in the x-direction (for WebGL mode)</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of segments in the y-direction (for WebGL mode)</p>\n","type":"Integer","optional":true}],"chainable":1}]},{"file":"src/core/shape/2d_primitives.js","line":618,"description":"<p>Draws a square to the screen. A square is a four-sided shape with every angle\nat ninety degrees, and equal side size. This function is a special case of the\nrect() function, where the width and height are the same, and the parameter\nis called \"s\" for side size. By default, the first two parameters set the\nlocation of the upper-left corner, the third sets the side size of the square.\nThe way these parameters are interpreted, may be changed with the <a\nhref=\"#/p5/rectMode\">rectMode()</a> function.</p>\n<p>The fourth, fifth, sixth and seventh parameters, if specified,\ndetermine corner radius for the top-left, top-right, lower-right and\nlower-left corners, respectively. An omitted corner radius parameter is set\nto the value of the previously specified radius value in the parameter list.</p>\n","itemtype":"method","name":"square","params":[{"name":"x","description":"<p>x-coordinate of the square.</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the square.</p>\n","type":"Number"},{"name":"s","description":"<p>side size of the square.</p>\n","type":"Number"},{"name":"tl","description":"<p>optional radius of top-left corner.</p>\n","type":"Number","optional":true},{"name":"tr","description":"<p>optional radius of top-right corner.</p>\n","type":"Number","optional":true},{"name":"br","description":"<p>optional radius of bottom-right corner.</p>\n","type":"Number","optional":true},{"name":"bl","description":"<p>optional radius of bottom-left corner.</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// Draw a square at location (30, 20) with a side size of 55.\nsquare(30, 20, 55);\n</code>\n</div>\n\n<div>\n<code>\n// Draw a square with rounded corners, each having a radius of 20.\nsquare(30, 20, 55, 20);\n</code>\n</div>\n\n<div>\n<code>\n// Draw a square with rounded corners having the following radii:\n// top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.\nsquare(30, 20, 55, 20, 15, 10, 5);\n</code>\n</div>"],"alt":"55x55 white square with black outline in mid-right of canvas.\n55x55 white square with black outline and rounded edges in mid-right of canvas.\n55x55 white square with black outline and rounded edges of different radii.","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":707,"description":"<p>Draws a triangle to the canvas. A triangle is a plane created by connecting\nthree points. The first two arguments specify the first point, the middle two\narguments specify the second point, and the last two arguments specify the\nthird point.</p>\n","itemtype":"method","name":"triangle","params":[{"name":"x1","description":"<p>x-coordinate of the first point</p>\n","type":"Number"},{"name":"y1","description":"<p>y-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"<p>x-coordinate of the second point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate of the second point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate of the third point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate of the third point</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\ntriangle(30, 75, 58, 20, 86, 75);\n</code>\n</div>"],"alt":"white triangle with black outline in mid-right of canvas.","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/attributes.js","line":12,"description":"<p>Modifies the location from which ellipses are drawn by changing the way in\nwhich parameters given to <a href=\"#/p5/ellipse\">ellipse()</a>,\n<a href=\"#/p5/circle\">circle()</a> and <a href=\"#/p5/arc\">arc()</a> are interpreted.</p>\n<p>The default mode is CENTER, in which the first two parameters are interpreted\nas the shape's center point's x and y coordinates respectively, while the third\nand fourth parameters are its width and height.</p>\n<p>ellipseMode(RADIUS) also uses the first two parameters as the shape's center\npoint's x and y coordinates, but uses the third and fourth parameters to\nspecify half of the shapes's width and height.</p>\n<p>ellipseMode(CORNER) interprets the first two parameters as the upper-left\ncorner of the shape, while the third and fourth parameters are its width\nand height.</p>\n<p>ellipseMode(CORNERS) interprets the first two parameters as the location of\none corner of the ellipse's bounding box, and the third and fourth parameters\nas the location of the opposite corner.</p>\n<p>The parameter to this method must be written in ALL CAPS because they are\npredefined as constants in ALL CAPS and Javascript is a case-sensitive language.</p>\n","itemtype":"method","name":"ellipseMode","params":[{"name":"mode","description":"<p>either CENTER, RADIUS, CORNER, or CORNERS</p>\n","type":"Constant"}],"chainable":1,"example":["\n<div>\n<code>\n// Example showing RADIUS and CENTER ellipsemode with 2 overlaying ellipses\nellipseMode(RADIUS);\nfill(255);\nellipse(50, 50, 30, 30); // Outer white ellipse\nellipseMode(CENTER);\nfill(100);\nellipse(50, 50, 30, 30); // Inner gray ellipse\n</code>\n</div>\n\n<div>\n<code>\n// Example showing CORNER and CORNERS ellipseMode with 2 overlaying ellipses\nellipseMode(CORNER);\nfill(255);\nellipse(25, 25, 50, 50); // Outer white ellipse\nellipseMode(CORNERS);\nfill(100);\nellipse(25, 25, 50, 50); // Inner gray ellipse\n</code>\n</div>"],"alt":"60x60 white ellipse and 30x30 grey ellipse with black outlines at center.\n60x60 white ellipse and 30x30 grey ellipse top-right with black outlines.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":81,"description":"<p>Draws all geometry with jagged (aliased) edges. Note that <a href=\"#/p5/smooth\">smooth()</a> is\nactive by default in 2D mode, so it is necessary to call <a href=\"#/p5/noSmooth\">noSmooth()</a> to disable\nsmoothing of geometry, images, and fonts. In 3D mode, <a href=\"#/p5/noSmooth\">noSmooth()</a> is enabled\nby default, so it is necessary to call <a href=\"#/p5/smooth\">smooth()</a> if you would like\nsmooth (antialiased) edges on your geometry.</p>\n","itemtype":"method","name":"noSmooth","chainable":1,"example":["\n<div>\n<code>\nbackground(0);\nnoStroke();\nsmooth();\nellipse(30, 48, 36, 36);\nnoSmooth();\nellipse(70, 48, 36, 36);\n</code>\n</div>"],"alt":"2 pixelated 36x36 white ellipses to left & right of center, black background","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":115,"description":"<p>Modifies the location from which rectangles are drawn by changing the way\nin which parameters given to <a href=\"#/p5/rect\">rect()</a> are interpreted.</p>\n<p>The default mode is CORNER, which interprets the first two parameters as the\nupper-left corner of the shape, while the third and fourth parameters are its\nwidth and height.</p>\n<p>rectMode(CORNERS) interprets the first two parameters as the location of\none of the corners, and the third and fourth parameters as the location of\nthe diagonally opposite corner. Note, the rectangle is drawn between the\ncoordinates, so it is not neccesary that the first corner be the upper left\ncorner.</p>\n<p>rectMode(CENTER) interprets the first two parameters as the shape's center\npoint, while the third and fourth parameters are its width and height.</p>\n<p>rectMode(RADIUS) also uses the first two parameters as the shape's center\npoint, but uses the third and fourth parameters to specify half of the shape's\nwidth and height respectively.</p>\n<p>The parameter to this method must be written in ALL CAPS because they are\npredefined as constants in ALL CAPS and Javascript is a case-sensitive language.</p>\n","itemtype":"method","name":"rectMode","params":[{"name":"mode","description":"<p>either CORNER, CORNERS, CENTER, or RADIUS</p>\n","type":"Constant"}],"chainable":1,"example":["\n<div>\n<code>\nrectMode(CORNER);\nfill(255);\nrect(25, 25, 50, 50); // Draw white rectangle using CORNER mode\n\nrectMode(CORNERS);\nfill(100);\nrect(25, 25, 50, 50); // Draw gray rectangle using CORNERS mode\n</code>\n</div>\n\n<div>\n<code>\nrectMode(RADIUS);\nfill(255);\nrect(50, 50, 30, 30); // Draw white rectangle using RADIUS mode\n\nrectMode(CENTER);\nfill(100);\nrect(50, 50, 30, 30); // Draw gray rectangle using CENTER mode\n</code>\n</div>"],"alt":"50x50 white rect at center and 25x25 grey rect in the top left of the other.\n50x50 white rect at center and 25x25 grey rect in the center of the other.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":184,"description":"<p>Draws all geometry with smooth (anti-aliased) edges. <a href=\"#/p5/smooth\">smooth()</a> will also\nimprove image quality of resized images. Note that <a href=\"#/p5/smooth\">smooth()</a> is active by\ndefault in 2D mode; <a href=\"#/p5/noSmooth\">noSmooth()</a> can be used to disable smoothing of geometry,\nimages, and fonts. In 3D mode, <a href=\"#/p5/noSmooth\">noSmooth()</a> is enabled\nby default, so it is necessary to call <a href=\"#/p5/smooth\">smooth()</a> if you would like\nsmooth (antialiased) edges on your geometry.</p>\n","itemtype":"method","name":"smooth","chainable":1,"example":["\n<div>\n<code>\nbackground(0);\nnoStroke();\nsmooth();\nellipse(30, 48, 36, 36);\nnoSmooth();\nellipse(70, 48, 36, 36);\n</code>\n</div>"],"alt":"2 pixelated 36x36 white ellipses one left one right of center. On black.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":219,"description":"<p>Sets the style for rendering line endings. These ends are either rounded,\nsquared or extended, each of which specified with the corresponding\nparameters: ROUND, SQUARE and PROJECT. The default cap is ROUND.</p>\n<p>The parameter to this method must be written in ALL CAPS because they are\npredefined as constants in ALL CAPS and Javascript is a case-sensitive language.</p>\n","itemtype":"method","name":"strokeCap","params":[{"name":"cap","description":"<p>either ROUND, SQUARE or PROJECT</p>\n","type":"Constant"}],"chainable":1,"example":["\n<div>\n<code>\n// Example of different strokeCaps\nstrokeWeight(12.0);\nstrokeCap(ROUND);\nline(20, 30, 80, 30);\nstrokeCap(SQUARE);\nline(20, 50, 80, 50);\nstrokeCap(PROJECT);\nline(20, 70, 80, 70);\n</code>\n</div>"],"alt":"3 lines. Top line: rounded ends, mid: squared, bottom:longer squared ends.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":259,"description":"<p>Sets the style of the joints which connect line segments. These joints\nare either mitered, beveled or rounded and specified with the\ncorresponding parameters MITER, BEVEL and ROUND. The default joint is\nMITER.</p>\n<p>The parameter to this method must be written in ALL CAPS because they are\npredefined as constants in ALL CAPS and Javascript is a case-sensitive language.</p>\n","itemtype":"method","name":"strokeJoin","params":[{"name":"join","description":"<p>either MITER, BEVEL, ROUND</p>\n","type":"Constant"}],"chainable":1,"example":["\n<div>\n<code>\n// Example of MITER type of joints\nnoFill();\nstrokeWeight(10.0);\nstrokeJoin(MITER);\nbeginShape();\nvertex(35, 20);\nvertex(65, 50);\nvertex(35, 80);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\n// Example of BEVEL type of joints\nnoFill();\nstrokeWeight(10.0);\nstrokeJoin(BEVEL);\nbeginShape();\nvertex(35, 20);\nvertex(65, 50);\nvertex(35, 80);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\n// Example of ROUND type of joints\nnoFill();\nstrokeWeight(10.0);\nstrokeJoin(ROUND);\nbeginShape();\nvertex(35, 20);\nvertex(65, 50);\nvertex(35, 80);\nendShape();\n</code>\n</div>"],"alt":"Right-facing arrowhead shape with pointed tip in center of canvas.\nRight-facing arrowhead shape with flat tip in center of canvas.\nRight-facing arrowhead shape with rounded tip in center of canvas.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":331,"description":"<p>Sets the width of the stroke used for lines, points and the border around\nshapes. All widths are set in units of pixels.</p>\n","itemtype":"method","name":"strokeWeight","params":[{"name":"weight","description":"<p>the weight of the stroke (in pixels)</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\n// Example of different stroke weights\nstrokeWeight(1); // Default\nline(20, 20, 80, 20);\nstrokeWeight(4); // Thicker\nline(20, 40, 80, 40);\nstrokeWeight(10); // Beastly\nline(20, 70, 80, 70);\n</code>\n</div>"],"alt":"3 horizontal black lines. Top line: thin, mid: medium, bottom:thick.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/curves.js","line":13,"description":"<p>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.</p>\n<p>Bezier curves were developed by French automotive engineer Pierre Bezier,\nand are commonly used in computer graphics to define gently sloping curves.\nSee also <a href=\"#/p5/curve\">curve()</a>.</p>\n","itemtype":"method","name":"bezier","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\nbackground(0, 0, 0);\nnoFill();\nstroke(255);\nbezier(250, 250, 0, 100, 100, 0, 100, 0, 0, 0, 100, 0);\n</code>\n</div>"],"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":"<p>x-coordinate for the first anchor point</p>\n","type":"Number"},{"name":"y1","description":"<p>y-coordinate for the first anchor point</p>\n","type":"Number"},{"name":"x2","description":"<p>x-coordinate for the first control point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate for the first control point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate for the second control point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate for the second control point</p>\n","type":"Number"},{"name":"x4","description":"<p>x-coordinate for the second anchor point</p>\n","type":"Number"},{"name":"y4","description":"<p>y-coordinate for the second anchor point</p>\n","type":"Number"}],"chainable":1},{"line":62,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>z-coordinate for the first anchor point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>z-coordinate for the first control point</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>z-coordinate for the second control point</p>\n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"<p>z-coordinate for the second anchor point</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/curves.js","line":92,"description":"<p>Sets the resolution at which Bezier's curve is displayed. The default value is 20.</p>\n<p>Note, This function is only useful when using the WEBGL renderer\nas the default canvas renderer does not use this information.</p>\n","itemtype":"method","name":"bezierDetail","params":[{"name":"detail","description":"<p>resolution of the curves</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  noFill();\n  bezierDetail(5);\n}\n\nfunction draw() {\n  background(200);\n  bezier(-40, -40, 0,\n          90, -40, 0,\n         -90,  40, 0,\n          40,  40, 0);\n}\n</code>\n</div>"],"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":130,"description":"<p>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.</p>\n","itemtype":"method","name":"bezierPoint","params":[{"name":"a","description":"<p>coordinate of first point on the curve</p>\n","type":"Number"},{"name":"b","description":"<p>coordinate of first control point</p>\n","type":"Number"},{"name":"c","description":"<p>coordinate of second control point</p>\n","type":"Number"},{"name":"d","description":"<p>coordinate of second point on the curve</p>\n","type":"Number"},{"name":"t","description":"<p>value between 0 and 1</p>\n","type":"Number"}],"return":{"description":"the value of the Bezier at position t","type":"Number"},"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"10 points plotted on a given bezier at equal distances.","class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":185,"description":"<p>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.</p>\n","itemtype":"method","name":"bezierTangent","params":[{"name":"a","description":"<p>coordinate of first point on the curve</p>\n","type":"Number"},{"name":"b","description":"<p>coordinate of first control point</p>\n","type":"Number"},{"name":"c","description":"<p>coordinate of second control point</p>\n","type":"Number"},{"name":"d","description":"<p>coordinate of second point on the curve</p>\n","type":"Number"},{"name":"t","description":"<p>value between 0 and 1</p>\n","type":"Number"}],"return":{"description":"the tangent at position t","type":"Number"},"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":264,"description":"<p>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. <br /><br />\nLonger curves can be created by putting a series of <a href=\"#/p5/curve\">curve()</a> functions\ntogether or using <a href=\"#/p5/curveVertex\">curveVertex()</a>. An additional function called\n<a href=\"#/p5/curveTightness\">curveTightness()</a> provides control for the visual quality of the curve.\nThe <a href=\"#/p5/curve\">curve()</a> function is an implementation of Catmull-Rom splines.</p>\n","itemtype":"method","name":"curve","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":264,"params":[{"name":"x1","description":"<p>x-coordinate for the beginning control point</p>\n","type":"Number"},{"name":"y1","description":"<p>y-coordinate for the beginning control point</p>\n","type":"Number"},{"name":"x2","description":"<p>x-coordinate for the first point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate for the first point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate for the second point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate for the second point</p>\n","type":"Number"},{"name":"x4","description":"<p>x-coordinate for the ending control point</p>\n","type":"Number"},{"name":"y4","description":"<p>y-coordinate for the ending control point</p>\n","type":"Number"}],"chainable":1},{"line":332,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>z-coordinate for the beginning control point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>z-coordinate for the first point</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>z-coordinate for the second point</p>\n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"<p>z-coordinate for the ending control point</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/curves.js","line":358,"description":"<p>Sets the resolution at which curves display. The default value is 20 while\nthe minimum value is 3.</p>\n<p>This function is only useful when using the WEBGL renderer\nas the default canvas renderer does not use this\ninformation.</p>\n","itemtype":"method","name":"curveDetail","params":[{"name":"resolution","description":"<p>resolution of the curves</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\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</code>\n</div>"],"alt":"white arch shape with a low level of curve detail.","class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":398,"description":"<p>Modifies the quality of forms created with <a href=\"#/p5/curve\">curve()</a>\nand <a href=\"#/p5/curveVertex\">curveVertex()</a>.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.</p>\n","itemtype":"method","name":"curveTightness","params":[{"name":"amount","description":"<p>amount of deformation from the original vertices</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"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":444,"description":"<p>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.</p>\n","itemtype":"method","name":"curvePoint","params":[{"name":"a","description":"<p>coordinate of first control point of the curve</p>\n","type":"Number"},{"name":"b","description":"<p>coordinate of first point</p>\n","type":"Number"},{"name":"c","description":"<p>coordinate of second point</p>\n","type":"Number"},{"name":"d","description":"<p>coordinate of second control point</p>\n","type":"Number"},{"name":"t","description":"<p>value between 0 and 1</p>\n","type":"Number"}],"return":{"description":"bezier value at position t","type":"Number"},"example":["\n<div>\n<code>\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</code>\n</div>\n\nline hooking down to right-bottom with 13 5x5 white ellipse points"],"class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":493,"description":"<p>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.</p>\n","itemtype":"method","name":"curveTangent","params":[{"name":"a","description":"<p>coordinate of first control point</p>\n","type":"Number"},{"name":"b","description":"<p>coordinate of first point on the curve</p>\n","type":"Number"},{"name":"c","description":"<p>coordinate of second point on the curve</p>\n","type":"Number"},{"name":"d","description":"<p>coordinate of second conrol point</p>\n","type":"Number"},{"name":"t","description":"<p>value between 0 and 1</p>\n","type":"Number"}],"return":{"description":"the tangent at position t","type":"Number"},"example":["\n<div>\n<code>\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</code>\n</div>"],"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":"<p>Use the <a href=\"#/p5/beginContour\">beginContour()</a> and\n<a href=\"#/p5/endContour\">endContour()</a> functions to create negative shapes\nwithin shapes such as the center of the letter 'O'. <a href=\"#/p5/beginContour\">beginContour()</a>\nbegins recording vertices for the shape and <a href=\"#/p5/endContour\">endContour()</a> 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.</p>\n<p>These functions can only be used within a <a href=\"#/p5/beginShape\">beginShape()</a>/<a href=\"#/p5/endShape\">endShape()</a> pair and\ntransformations such as <a href=\"#/p5/translate\">translate()</a>, <a href=\"#/p5/rotate\">rotate()</a>, and <a href=\"#/p5/scale\">scale()</a> do not work\nwithin a <a href=\"#/p5/beginContour\">beginContour()</a>/<a href=\"#/p5/endContour\">endContour()</a> pair. It is also not possible to use\nother shapes, such as <a href=\"#/p5/ellipse\">ellipse()</a> or <a href=\"#/p5/rect\">rect()</a> within.</p>\n","itemtype":"method","name":"beginContour","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"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":67,"description":"<p>Using the <a href=\"#/p5/beginShape\">beginShape()</a> and <a href=\"#/p5/endShape\">endShape()</a> functions allow creating more\ncomplex forms. <a href=\"#/p5/beginShape\">beginShape()</a> begins recording vertices for a shape and\n<a href=\"#/p5/endShape\">endShape()</a> 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.</p>\n<p>The parameters available for <a href=\"#/p5/beginShape\">beginShape()</a> are POINTS, LINES, TRIANGLES,\nTRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIP, and TESS (WebGL only). After calling the\n<a href=\"#/p5/beginShape\">beginShape()</a> function, a series of <a href=\"#/p5/vertex\">vertex()</a> commands must follow. To stop\ndrawing the shape, call <a href=\"#/p5/endShape\">endShape()</a>. Each shape will be outlined with the\ncurrent stroke color and filled with the fill color.</p>\n<p>Transformations such as <a href=\"#/p5/translate\">translate()</a>, <a href=\"#/p5/rotate\">rotate()</a>, and <a href=\"#/p5/scale\">scale()</a> do not work\nwithin <a href=\"#/p5/beginShape\">beginShape()</a>. It is also not possible to use other shapes, such as\n<a href=\"#/p5/ellipse\">ellipse()</a> or <a href=\"#/p5/rect\">rect()</a> within <a href=\"#/p5/beginShape\">beginShape()</a>.</p>\n","itemtype":"method","name":"beginShape","params":[{"name":"kind","description":"<p>either POINTS, LINES, TRIANGLES, TRIANGLE_FAN\n                               TRIANGLE_STRIP, QUADS, QUAD_STRIP or TESS</p>\n","type":"Constant","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape(CLOSE);\n</code>\n</div>\n\n<div>\n<code>\nbeginShape(POINTS);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\nbeginShape(LINES);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\nnoFill();\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\nnoFill();\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape(CLOSE);\n</code>\n</div>\n\n<div>\n<code>\nbeginShape(TRIANGLES);\nvertex(30, 75);\nvertex(40, 20);\nvertex(50, 75);\nvertex(60, 20);\nvertex(70, 75);\nvertex(80, 20);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\nbeginShape();\nvertex(20, 20);\nvertex(40, 20);\nvertex(40, 40);\nvertex(60, 40);\nvertex(60, 60);\nvertex(20, 60);\nendShape(CLOSE);\n</code>\n</div>"],"alt":"white square-shape with black outline in middle-right of canvas.\n4 black points in a square shape in middle-right of canvas.\n2 horizontal black lines. In the top-right and bottom-right of canvas.\n3 line shape with horizontal on top, vertical in middle and horizontal bottom.\nsquare line shape in middle-right of canvas.\n2 white triangle shapes mid-right canvas. left one pointing up and right down.\n5 horizontal interlocking and alternating white triangles in mid-right canvas.\n4 interlocking white triangles in 45 degree rotated square-shape.\n2 white rectangle shapes in mid-right canvas. Both 20x55.\n3 side-by-side white rectangles center rect is smaller in mid-right canvas.\nThick white l-shape with black outline mid-top-left of canvas.","class":"p5","module":"Shape","submodule":"Vertex"},{"file":"src/core/shape/vertex.js","line":267,"description":"<p>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).</p>\n<p>The first time bezierVertex() is used within a <a href=\"#/p5/beginShape\">beginShape()</a>\ncall, it must be prefaced with a call to <a href=\"#/p5/vertex\">vertex()</a> to set the first anchor\npoint. This function must be used between <a href=\"#/p5/beginShape\">beginShape()</a> and <a href=\"#/p5/endShape\">endShape()</a>\nand only when there is no MODE or POINTS parameter specified to\n<a href=\"#/p5/beginShape\">beginShape()</a>.</p>\n","itemtype":"method","name":"bezierVertex","chainable":1,"example":["\n<div>\n<code>\nnoFill();\nbeginShape();\nvertex(30, 20);\nbezierVertex(80, 0, 80, 75, 30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\nbeginShape();\nvertex(30, 20);\nbezierVertex(80, 0, 80, 75, 30, 75);\nbezierVertex(50, 80, 60, 25, 30, 20);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":267,"params":[{"name":"x2","description":"<p>x-coordinate for the first control point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate for the first control point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate for the second control point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate for the second control point</p>\n","type":"Number"},{"name":"x4","description":"<p>x-coordinate for the anchor point</p>\n","type":"Number"},{"name":"y4","description":"<p>y-coordinate for the anchor point</p>\n","type":"Number"}],"chainable":1},{"line":349,"params":[{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>z-coordinate for the first control point (for WebGL mode)</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>z-coordinate for the second control point (for WebGL mode)</p>\n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"<p>z-coordinate for the anchor point (for WebGL mode)</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/vertex.js","line":389,"description":"<p>Specifies vertex coordinates for curves. This function may only\nbe used between <a href=\"#/p5/beginShape\">beginShape()</a> and <a href=\"#/p5/endShape\">endShape()</a> and only when there\nis no MODE parameter specified to <a href=\"#/p5/beginShape\">beginShape()</a>.\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.</p>\n<p>The first and last points in a series of curveVertex() lines will be used to\nguide the beginning and end of a the curve. A minimum of four\npoints is required to draw a tiny curve between the second and\nthird points. Adding a fifth point with curveVertex() will draw\nthe curve between the second, third, and fourth points. The\ncurveVertex() function is an implementation of Catmull-Rom\nsplines.</p>\n","itemtype":"method","name":"curveVertex","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"Upside-down u-shape line, mid canvas. left point extends beyond canvas view.","class":"p5","module":"Shape","submodule":"Vertex","overloads":[{"line":389,"params":[{"name":"x","description":"<p>x-coordinate of the vertex</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the vertex</p>\n","type":"Number"}],"chainable":1},{"line":434,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"<p>z-coordinate of the vertex (for WebGL mode)</p>\n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/core/shape/vertex.js","line":498,"description":"<p>Use the <a href=\"#/p5/beginContour\">beginContour()</a> and <a href=\"#/p5/endContour\">endContour()</a> functions to create negative\nshapes within shapes such as the center of the letter 'O'. <a href=\"#/p5/beginContour\">beginContour()</a>\nbegins recording vertices for the shape and <a href=\"#/p5/endContour\">endContour()</a> 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.</p>\n<p>These functions can only be used within a <a href=\"#/p5/beginShape\">beginShape()</a>/<a href=\"#/p5/endShape\">endShape()</a> pair and\ntransformations such as <a href=\"#/p5/translate\">translate()</a>, <a href=\"#/p5/rotate\">rotate()</a>, and <a href=\"#/p5/scale\">scale()</a> do not work\nwithin a <a href=\"#/p5/beginContour\">beginContour()</a>/<a href=\"#/p5/endContour\">endContour()</a> pair. It is also not possible to use\nother shapes, such as <a href=\"#/p5/ellipse\">ellipse()</a> or <a href=\"#/p5/rect\">rect()</a> within.</p>\n","itemtype":"method","name":"endContour","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"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":557,"description":"<p>The <a href=\"#/p5/endShape\">endShape()</a> function is the companion to <a href=\"#/p5/beginShape\">beginShape()</a> and may only be\ncalled after <a href=\"#/p5/beginShape\">beginShape()</a>. When <a href=\"#/p5/endshape\">endShape()</a> is called, all of image data\ndefined since the previous call to <a href=\"#/p5/beginShape\">beginShape()</a> is written into the image\nbuffer. The constant CLOSE as the value for the MODE parameter to close\nthe shape (to connect the beginning and the end).</p>\n","itemtype":"method","name":"endShape","params":[{"name":"mode","description":"<p>use CLOSE to close the shape</p>\n","type":"Constant","optional":true}],"chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"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":642,"description":"<p>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 <a href=\"#/p5/beginShape\">beginShape()</a> call, it\nmust be prefaced with a call to <a href=\"#/p5/vertex\">vertex()</a> 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).</p>\n<p>This function must be used between <a href=\"#/p5/beginShape\">beginShape()</a> and <a href=\"#/p5/endShape\">endShape()</a>\nand only when there is no MODE or POINTS parameter specified to\n<a href=\"#/p5/beginShape\">beginShape()</a>.</p>\n","itemtype":"method","name":"quadraticVertex","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":642,"params":[{"name":"cx","description":"<p>x-coordinate for the control point</p>\n","type":"Number"},{"name":"cy","description":"<p>y-coordinate for the control point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate for the anchor point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate for the anchor point</p>\n","type":"Number"}],"chainable":1},{"line":707,"params":[{"name":"cx","description":"","type":"Number"},{"name":"cy","description":"","type":"Number"},{"name":"cz","description":"<p>z-coordinate for the control point (for WebGL mode)</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>z-coordinate for the anchor point (for WebGL mode)</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/vertex.js","line":800,"description":"<p>All shapes are constructed by connecting a series of vertices. <a href=\"#/p5/vertex\">vertex()</a>\nis used to specify the vertex coordinates for points, lines, triangles,\nquads, and polygons. It is used exclusively within the <a href=\"#/p5/beginShape\">beginShape()</a> and\n<a href=\"#/p5/endShape\">endShape()</a> functions.</p>\n","itemtype":"method","name":"vertex","chainable":1,"example":["\n<div>\n<code>\nstrokeWeight(3);\nbeginShape(POINTS);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":800,"params":[{"name":"x","description":"<p>x-coordinate of the vertex</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the vertex</p>\n","type":"Number"}],"chainable":1},{"line":931,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"<p>z-coordinate of the vertex</p>\n","type":"Number"},{"name":"u","description":"<p>the vertex's texture u-coordinate</p>\n","type":"Number","optional":true},{"name":"v","description":"<p>the vertex's texture v-coordinate</p>\n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/core/constants.js","line":9,"description":"<p>Version of this p5.js.</p>\n","itemtype":"property","name":"VERSION","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":18,"description":"<p>The default, two-dimensional renderer.</p>\n","itemtype":"property","name":"P2D","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":24,"description":"<p>One of the two render modes in p5.js: P2D (default renderer) and WEBGL\nEnables 3D render by introducing the third dimension: Z</p>\n","itemtype":"property","name":"WEBGL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":33,"itemtype":"property","name":"ARROW","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":38,"itemtype":"property","name":"CROSS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":43,"itemtype":"property","name":"HAND","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":48,"itemtype":"property","name":"MOVE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":53,"itemtype":"property","name":"TEXT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":58,"itemtype":"property","name":"WAIT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":66,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"HALF_PI","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, HALF_PI);\n</code></div>"],"alt":"80x80 white quarter-circle with curve toward bottom right of canvas.","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":84,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"PI","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, PI);\n</code></div>"],"alt":"white half-circle with curve toward bottom of canvas.","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":102,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"QUARTER_PI","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, QUARTER_PI);\n</code></div>"],"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":120,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"TAU","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, TAU);\n</code></div>"],"alt":"80x80 white ellipse shape in center of canvas.","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":138,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"TWO_PI","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, TWO_PI);\n</code></div>"],"alt":"80x80 white ellipse shape in center of canvas.","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":156,"description":"<p>Constant to be used with <a href=\"#/p5/angleMode\">angleMode()</a> function, to set the mode which\np5.js interprates and calculates angles (either DEGREES or RADIANS).</p>\n","itemtype":"property","name":"DEGREES","type":"String","final":1,"example":["\n<div class='norender'><code>\nfunction setup() {\n  angleMode(DEGREES);\n}\n</code></div>"],"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":170,"description":"<p>Constant to be used with <a href=\"#/p5/angleMode\">angleMode()</a> function, to set the mode which\np5.js interprates and calculates angles (either RADIANS or DEGREES).</p>\n","itemtype":"property","name":"RADIANS","type":"String","final":1,"example":["\n<div class='norender'><code>\nfunction setup() {\n  angleMode(RADIANS);\n}\n</code></div>"],"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":188,"itemtype":"property","name":"CORNER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":193,"itemtype":"property","name":"CORNERS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":198,"itemtype":"property","name":"RADIUS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":203,"itemtype":"property","name":"RIGHT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":208,"itemtype":"property","name":"LEFT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":213,"itemtype":"property","name":"CENTER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":218,"itemtype":"property","name":"TOP","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":223,"itemtype":"property","name":"BOTTOM","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":228,"itemtype":"property","name":"BASELINE","type":"String","final":1,"default":"alphabetic","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":234,"itemtype":"property","name":"POINTS","type":"Number","final":1,"default":"0x0000","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":240,"itemtype":"property","name":"LINES","type":"Number","final":1,"default":"0x0001","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":246,"itemtype":"property","name":"LINE_STRIP","type":"Number","final":1,"default":"0x0003","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":252,"itemtype":"property","name":"LINE_LOOP","type":"Number","final":1,"default":"0x0002","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":258,"itemtype":"property","name":"TRIANGLES","type":"Number","final":1,"default":"0x0004","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":264,"itemtype":"property","name":"TRIANGLE_FAN","type":"Number","final":1,"default":"0x0006","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":270,"itemtype":"property","name":"TRIANGLE_STRIP","type":"Number","final":1,"default":"0x0005","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":276,"itemtype":"property","name":"QUADS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":281,"itemtype":"property","name":"QUAD_STRIP","type":"String","final":1,"default":"quad_strip","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":287,"itemtype":"property","name":"TESS","type":"String","final":1,"default":"tess","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":293,"itemtype":"property","name":"CLOSE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":298,"itemtype":"property","name":"OPEN","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":303,"itemtype":"property","name":"CHORD","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":308,"itemtype":"property","name":"PIE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":313,"itemtype":"property","name":"PROJECT","type":"String","final":1,"default":"square","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":319,"itemtype":"property","name":"SQUARE","type":"String","final":1,"default":"butt","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":325,"itemtype":"property","name":"ROUND","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":330,"itemtype":"property","name":"BEVEL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":335,"itemtype":"property","name":"MITER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":342,"itemtype":"property","name":"RGB","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":347,"description":"<p>HSB (hue, saturation, brightness) is a type of color model.\nYou can learn more about it at\n<a href=\"https://learnui.design/blog/the-hsb-color-system-practicioners-primer.html\">HSB</a>.</p>\n","itemtype":"property","name":"HSB","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":356,"itemtype":"property","name":"HSL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":363,"description":"<p>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 <a href=\"/#/p5.Element/size\">size</a> function as AUTO, at a time.</p>\n","itemtype":"property","name":"AUTO","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":373,"itemtype":"property","name":"ALT","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":379,"itemtype":"property","name":"BACKSPACE","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":384,"itemtype":"property","name":"CONTROL","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":389,"itemtype":"property","name":"DELETE","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":394,"itemtype":"property","name":"DOWN_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":399,"itemtype":"property","name":"ENTER","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":404,"itemtype":"property","name":"ESCAPE","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":409,"itemtype":"property","name":"LEFT_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":414,"itemtype":"property","name":"OPTION","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":419,"itemtype":"property","name":"RETURN","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":424,"itemtype":"property","name":"RIGHT_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":429,"itemtype":"property","name":"SHIFT","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":434,"itemtype":"property","name":"TAB","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":439,"itemtype":"property","name":"UP_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":446,"itemtype":"property","name":"BLEND","type":"String","final":1,"default":"source-over","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":452,"itemtype":"property","name":"REMOVE","type":"String","final":1,"default":"destination-out","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":458,"itemtype":"property","name":"ADD","type":"String","final":1,"default":"lighter","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":466,"itemtype":"property","name":"DARKEST","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":471,"itemtype":"property","name":"LIGHTEST","type":"String","final":1,"default":"lighten","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":477,"itemtype":"property","name":"DIFFERENCE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":482,"itemtype":"property","name":"SUBTRACT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":487,"itemtype":"property","name":"EXCLUSION","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":492,"itemtype":"property","name":"MULTIPLY","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":497,"itemtype":"property","name":"SCREEN","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":502,"itemtype":"property","name":"REPLACE","type":"String","final":1,"default":"copy","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":508,"itemtype":"property","name":"OVERLAY","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":513,"itemtype":"property","name":"HARD_LIGHT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":518,"itemtype":"property","name":"SOFT_LIGHT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":523,"itemtype":"property","name":"DODGE","type":"String","final":1,"default":"color-dodge","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":529,"itemtype":"property","name":"BURN","type":"String","final":1,"default":"color-burn","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":537,"itemtype":"property","name":"THRESHOLD","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":542,"itemtype":"property","name":"GRAY","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":547,"itemtype":"property","name":"OPAQUE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":552,"itemtype":"property","name":"INVERT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":557,"itemtype":"property","name":"POSTERIZE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":562,"itemtype":"property","name":"DILATE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":567,"itemtype":"property","name":"ERODE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":572,"itemtype":"property","name":"BLUR","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":579,"itemtype":"property","name":"NORMAL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":584,"itemtype":"property","name":"ITALIC","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":589,"itemtype":"property","name":"BOLD","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":594,"itemtype":"property","name":"BOLDITALIC","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":606,"itemtype":"property","name":"LINEAR","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":611,"itemtype":"property","name":"QUADRATIC","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":616,"itemtype":"property","name":"BEZIER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":621,"itemtype":"property","name":"CURVE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":628,"itemtype":"property","name":"STROKE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":633,"itemtype":"property","name":"FILL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":638,"itemtype":"property","name":"TEXTURE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":643,"itemtype":"property","name":"IMMEDIATE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":651,"itemtype":"property","name":"IMAGE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":659,"itemtype":"property","name":"NEAREST","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":664,"itemtype":"property","name":"REPEAT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":669,"itemtype":"property","name":"CLAMP","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":674,"itemtype":"property","name":"MIRROR","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":681,"itemtype":"property","name":"LANDSCAPE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":686,"itemtype":"property","name":"PORTRAIT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":696,"itemtype":"property","name":"GRID","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":702,"itemtype":"property","name":"AXES","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":708,"itemtype":"property","name":"LABEL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":713,"itemtype":"property","name":"FALLBACK","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/environment.js","line":20,"description":"<p>The <a href=\"#/p5/print\">print()</a> function writes to the console area of\nyour browser. This function is often helpful for looking at the data a program\nis producing. This function creates a new line of text for each call to\nthe function. Individual elements can be separated with quotes (\"\") and joined\nwith the addition operator (+).</p>\n<p>Note that calling print() without any arguments invokes the window.print()\nfunction which opens the browser's print dialog. To print a blank line\nto console you can write print('\\n').</p>\n","itemtype":"method","name":"print","params":[{"name":"contents","description":"<p>any combination of Number, String, Object, Boolean,\n                      Array to print</p>\n","type":"Any"}],"example":["\n<div><code class='norender'>\nlet x = 10;\nprint('The value of x is ' + x);\n// prints \"The value of x is 10\"\n</code></div>"],"alt":"default grey canvas","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":52,"description":"<p>The system variable <a href=\"#/p5/frameCount\">frameCount</a> contains the\nnumber of frames that have been displayed since the program started. Inside\n<a href=\"#/p5/setup\">setup()</a> the value is 0, after the first iteration\nof draw it is 1, etc.</p>\n","itemtype":"property","name":"frameCount","type":"Integer","readonly":"","example":["\n<div><code>\nfunction setup() {\n  frameRate(30);\n  textSize(30);\n  textAlign(CENTER);\n}\n\nfunction draw() {\n  background(200);\n  text(frameCount, width / 2, height / 2);\n}\n</code></div>"],"alt":"numbers rapidly counting upward with frame count set to 30.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":79,"description":"<p>The system variable <a href=\"#/p5/deltaTime\">deltaTime</a> contains the time\ndifference between the beginning of the previous frame and the beginning\nof the current frame in milliseconds.</p>\n<p>This variable is useful for creating time sensitive animation or physics\ncalculation that should stay constant regardless of frame rate.</p>\n","itemtype":"property","name":"deltaTime","type":"Integer","readonly":"","example":["\n<div><code>\nlet rectX = 0;\nlet fr = 30; //starting FPS\nlet clr;\n\nfunction setup() {\n  background(200);\n  frameRate(fr); // Attempt to refresh at starting FPS\n  clr = color(255, 0, 0);\n}\n\nfunction draw() {\n  background(200);\n  rectX = rectX + 1 * (deltaTime / 50); // Move Rectangle in relation to deltaTime\n\n  if (rectX >= width) {\n    // If you go off screen.\n    if (fr === 30) {\n      clr = color(0, 0, 255);\n      fr = 10;\n      frameRate(fr); // make frameRate 10 FPS\n    } else {\n      clr = color(255, 0, 0);\n      fr = 30;\n      frameRate(fr); // make frameRate 30 FPS\n    }\n    rectX = 0;\n  }\n  fill(clr);\n  rect(rectX, 40, 20, 20);\n}\n</code></div>"],"alt":"red rect moves left to right, followed by blue rect moving at the same speed\nwith a lower frame rate. Loops.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":129,"description":"<p>Confirms if the window a p5.js program is in is \"focused,\" meaning that\nthe sketch will accept mouse or keyboard input. This variable is\n\"true\" if the window is focused and \"false\" if not.</p>\n","itemtype":"property","name":"focused","type":"Boolean","readonly":"","example":["\n<div><code>\n// To demonstrate, put two windows side by side.\n// Click on the window that the p5 sketch isn't in!\nfunction draw() {\n  background(200);\n  noStroke();\n  fill(0, 200, 0);\n  ellipse(25, 25, 50, 50);\n\n  if (!focused) {\n   // or \"if (focused === false)\"\n    stroke(200, 0, 0);\n    line(0, 0, 100, 100);\n    line(100, 0, 0, 100);\n  }\n}\n</code></div>"],"alt":"green 50x50 ellipse at top left. Red X covers canvas when page focus changes","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":160,"description":"<p>Sets the cursor to a predefined symbol or an image, or makes it visible\nif already hidden. If you are trying to set an image as the cursor, the\nrecommended size is 16x16 or 32x32 pixels. The values for parameters x and y\nmust be less than the dimensions of the image.</p>\n","itemtype":"method","name":"cursor","params":[{"name":"type","description":"<p>Built-In: either ARROW, CROSS, HAND, MOVE, TEXT and WAIT\n                              Native CSS properties: 'grab', 'progress', 'cell' etc.\n                              External: path for cursor's images\n                              (Allowed File extensions: .cur, .gif, .jpg, .jpeg, .png)\n                              For more information on Native CSS cursors and url visit:\n                              <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/cursor\">https://developer.mozilla.org/en-US/docs/Web/CSS/cursor</a></p>\n","type":"String|Constant"},{"name":"x","description":"<p>the horizontal active spot of the cursor (must be less than 32)</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>the vertical active spot of the cursor (must be less than 32)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\n// Move the mouse across the quadrants\n// to see the cursor change\nfunction draw() {\n  line(width / 2, 0, width / 2, height);\n  line(0, height / 2, width, height / 2);\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</code></div>"],"alt":"canvas is divided into four quadrants. cursor on first is a cross, second is a progress,\nthird is a custom cursor using path to the cursor and fourth is a grab.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":228,"description":"<p>Specifies the number of frames to be displayed every second. For example,\nthe function call frameRate(30) will attempt to refresh 30 times a second.\nIf the processor is not fast enough to maintain the specified rate, the\nframe rate will not be achieved. Setting the frame rate within \n<a href=\"#/p5/setup\">setup()</a> is recommended. The default frame rate is\nbased on the frame rate of the display (here also called \"refresh rate\"), \nwhich is set to 60 frames per second on most computers. A frame rate of 24\nframes per second (usual for movies) or above will be enough for smooth \nanimations. This is the same as setFrameRate(val).</p>\n<p>Calling <a href=\"#/p5/frameRate\">frameRate()</a> with no arguments returns\nthe current framerate. The draw function must run at least once before it will\nreturn a value. This is the same as <a href=\"#/p5/getFrameRate\">getFrameRate()</a>.</p>\n<p>Calling <a href=\"#/p5/frameRate\">frameRate()</a> with arguments that are not\nof the type numbers or are non positive also returns current framerate.</p>\n","itemtype":"method","name":"frameRate","chainable":1,"example":["\n\n<div><code>\nlet rectX = 0;\nlet fr = 30; //starting FPS\nlet clr;\n\nfunction setup() {\n  background(200);\n  frameRate(fr); // Attempt to refresh at starting FPS\n  clr = color(255, 0, 0);\n}\n\nfunction draw() {\n  background(200);\n  rectX = rectX += 1; // Move Rectangle\n\n  if (rectX >= width) {\n   // If you go off screen.\n    if (fr === 30) {\n      clr = color(0, 0, 255);\n      fr = 10;\n      frameRate(fr); // make frameRate 10 FPS\n    } else {\n      clr = color(255, 0, 0);\n      fr = 30;\n      frameRate(fr); // make frameRate 30 FPS\n    }\n    rectX = 0;\n  }\n  fill(clr);\n  rect(rectX, 40, 20, 20);\n}\n</code></div>"],"alt":"blue rect moves left to right, followed by red rect moving faster. Loops.","class":"p5","module":"Environment","submodule":"Environment","overloads":[{"line":228,"params":[{"name":"fps","description":"<p>number of frames to be displayed every second</p>\n","type":"Number"}],"chainable":1},{"line":288,"params":[],"return":{"description":"current frameRate","type":"Number"}}]},{"file":"src/core/environment.js","line":331,"description":"<p>Hides the cursor from view.</p>\n","itemtype":"method","name":"noCursor","example":["\n<div><code>\nfunction setup() {\n  noCursor();\n}\n\nfunction draw() {\n  background(200);\n  ellipse(mouseX, mouseY, 10, 10);\n}\n</code></div>"],"alt":"cursor becomes 10x 10 white ellipse the moves with mouse x and y.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":354,"description":"<p>System variable that stores the width of the screen display according to The\ndefault <a href=\"#/p5/pixelDensity\">pixelDensity</a>. This is used to run a\nfull-screen program on any display size. To return actual screen size,\nmultiply this by pixelDensity.</p>\n","itemtype":"property","name":"displayWidth","type":"Number","readonly":"","example":["\n<div class=\"norender\"><code>\ncreateCanvas(displayWidth, displayHeight);\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":372,"description":"<p>System variable that stores the height of the screen display according to The\ndefault <a href=\"#/p5/pixelDensity\">pixelDensity</a>. This is used to run a\nfull-screen program on any display size. To return actual screen size,\nmultiply this by pixelDensity.</p>\n","itemtype":"property","name":"displayHeight","type":"Number","readonly":"","example":["\n<div class=\"norender\"><code>\ncreateCanvas(displayWidth, displayHeight);\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":390,"description":"<p>System variable that stores the width of the inner window, it maps to\nwindow.innerWidth.</p>\n","itemtype":"property","name":"windowWidth","type":"Number","readonly":"","example":["\n<div class=\"norender\"><code>\ncreateCanvas(windowWidth, windowHeight);\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":405,"description":"<p>System variable that stores the height of the inner window, it maps to\nwindow.innerHeight.</p>\n","itemtype":"property","name":"windowHeight","type":"Number","readonly":"","example":["\n<div class=\"norender\"><code>\ncreateCanvas(windowWidth, windowHeight);\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":421,"description":"<p>The <a href=\"#/p5/windowResized\">windowResized()</a> function is called once\nevery time the browser window is resized. This is a good place to resize the\ncanvas or do any other adjustments to accommodate the new window size.</p>\n","itemtype":"method","name":"windowResized","params":[{"name":"event","description":"<p>optional Event callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div class=\"norender\"><code>\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</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":476,"description":"<p>System variable that stores the width of the drawing canvas. This value\nis set by the first parameter of the <a href=\"#/p5/createCanvas\">createCanvas()</a> function.\nFor example, the function call createCanvas(320, 240) sets the width\nvariable to the value 320. The value of width defaults to 100 if\n<a href=\"#/p5/createCanvas\">createCanvas()</a> is not used in a program.</p>\n","itemtype":"property","name":"width","type":"Number","readonly":"","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":488,"description":"<p>System variable that stores the height of the drawing canvas. This value\nis set by the second parameter of the <a href=\"#/p5/createCanvas\">createCanvas()</a> function. For\nexample, the function call createCanvas(320, 240) sets the height\nvariable to the value 240. The value of height defaults to 100 if\n<a href=\"#/p5/createCanvas\">createCanvas()</a> is not used in a program.</p>\n","itemtype":"property","name":"height","type":"Number","readonly":"","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":500,"description":"<p>If argument is given, sets the sketch to fullscreen or not based on the\nvalue of the argument. If no argument is given, returns the current\nfullscreen state. Note that due to browser restrictions this can only\nbe called on user input, for example, on mouse press like the example\nbelow.</p>\n","itemtype":"method","name":"fullscreen","params":[{"name":"val","description":"<p>whether the sketch should be in fullscreen mode\nor not</p>\n","type":"Boolean","optional":true}],"return":{"description":"current fullscreen state","type":"Boolean"},"example":["\n<div>\n<code>\n// Clicking in the box toggles fullscreen on and off.\nfunction setup() {\n  background(200);\n}\nfunction mousePressed() {\n  if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n    let fs = fullscreen();\n    fullscreen(!fs);\n  }\n}\n</code>\n</div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":550,"description":"<p>Sets the pixel scaling for high pixel density displays. By default\npixel density is set to match display density, call pixelDensity(1)\nto turn this off. Calling <a href=\"#/p5/pixelDensity\">pixelDensity()</a> with no arguments returns\nthe current pixel density of the sketch.</p>\n","itemtype":"method","name":"pixelDensity","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  pixelDensity(1);\n  createCanvas(100, 100);\n  background(200);\n  ellipse(width / 2, height / 2, 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  pixelDensity(3.0);\n  createCanvas(100, 100);\n  background(200);\n  ellipse(width / 2, height / 2, 50, 50);\n}\n</code>\n</div>"],"alt":"fuzzy 50x50 white ellipse with black outline in center of canvas.\nsharp 50x50 white ellipse with black outline in center of canvas.","class":"p5","module":"Environment","submodule":"Environment","overloads":[{"line":550,"params":[{"name":"val","description":"<p>whether or how much the sketch should scale</p>\n","type":"Number"}],"chainable":1},{"line":586,"params":[],"return":{"description":"current pixel density of the sketch","type":"Number"}}]},{"file":"src/core/environment.js","line":605,"description":"<p>Returns the pixel density of the current display the sketch is running on.</p>\n","itemtype":"method","name":"displayDensity","return":{"description":"current pixel density of the display","type":"Number"},"example":["\n<div>\n<code>\nfunction setup() {\n  let density = displayDensity();\n  pixelDensity(density);\n  createCanvas(100, 100);\n  background(200);\n  ellipse(width / 2, height / 2, 50, 50);\n}\n</code>\n</div>"],"alt":"50x50 white ellipse with black outline in center of canvas.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":660,"description":"<p>Gets the current URL. Note: when using the\np5 Editor, this will return an empty object because the sketch\nis embedded in an iframe. It will work correctly if you view the\nsketch using sketch the edtior's present or share URLs.</p>\n","itemtype":"method","name":"getURL","return":{"description":"url","type":"String"},"example":["\n<div>\n<code>\nlet url;\nlet x = 100;\n\nfunction setup() {\n  fill(0);\n  noStroke();\n  url = getURL();\n}\n\nfunction draw() {\n  background(200);\n  text(url, x, height / 2);\n  x--;\n}\n</code>\n</div>"],"alt":"current url (http://p5js.org/reference/#/p5/getURL) moves right to left.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":691,"description":"<p>Gets the current URL path as an array. Note: when using the\np5 Editor, this will return an empty object because the sketch\nis embedded in an iframe. It will work correctly if you view the\nsketch using sketch the edtior's present or share URLs.</p>\n","itemtype":"method","name":"getURLPath","return":{"description":"path components","type":"String[]"},"example":["\n<div class='norender'><code>\nfunction setup() {\n  let urlPath = getURLPath();\n  for (let i = 0; i < urlPath.length; i++) {\n    text(urlPath[i], 10, i * 20 + 20);\n  }\n}\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":713,"description":"<p>Gets the current URL params as an Object. Note: when using the\np5 Editor, this will return an empty object because the sketch\nis embedded in an iframe. It will work correctly if you view the\nsketch using sketch the edtior's present or share URLs.</p>\n","itemtype":"method","name":"getURLParams","return":{"description":"URL params","type":"Object"},"example":["\n<div class='norender notest'>\n<code>\n// Example: http://p5js.org?year=2014&month=May&day=15\n\nfunction setup() {\n  let params = getURLParams();\n  text(params.day, 10, 20);\n  text(params.month, 10, 40);\n  text(params.year, 10, 60);\n}\n</code>\n</div>"],"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":"<p>This is our i18next \"backend\" plugin. It tries to fetch languages\nfrom a CDN.</p>\n","class":"p5","module":"Environment"},{"file":"src/core/internationalization.js","line":126,"description":"<p>Set up our translation function, with loaded languages</p>\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":42,"description":"<p>Called directly before <a href=\"#/p5/setup\">setup()</a>, the <a href=\"#/p5/preload\">preload()</a> function is used to handle\nasynchronous loading of external files in a blocking way. If a preload\nfunction is defined, <a href=\"#/p5/setup\">setup()</a> will wait until any load calls within have\nfinished. Nothing besides load calls (<a href=\"#/p5/loadImage\">loadImage</a>, <a href=\"#/p5/loadJSON\">loadJSON</a>, <a href=\"#/p5/loadFont\">loadFont</a>,\n<a href=\"#/p5/loadStrings\">loadStrings</a>, etc.) should be inside the preload function. If asynchronous\nloading is preferred, the load methods can instead be called in <a href=\"#/p5/setup\">setup()</a>\nor anywhere else with the use of a callback parameter.</p>\n<p>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 <a href=\"http://bit.ly/2kQ6Nio\">here</a>.</p>\n","itemtype":"method","name":"preload","example":["\n<div><code>\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</code></div>"],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":83,"description":"<p>The <a href=\"#/p5/setup\">setup()</a> 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 <a href=\"#/p5/setup\">setup()</a> function for each program and it shouldn't\nbe called again after its initial execution.</p>\n<p>Note: Variables declared within <a href=\"#/p5/setup\">setup()</a> are not accessible within other\nfunctions, including <a href=\"#/p5/draw\">draw()</a>.</p>\n","itemtype":"method","name":"setup","example":["\n<div><code>\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</code></div>"],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":114,"description":"<p>Called directly after <a href=\"#/p5/setup\">setup()</a>, the <a href=\"#/p5/draw\">draw()</a> function continuously executes\nthe lines of code contained inside its block until the program is stopped\nor <a href=\"#/p5/noLoop\">noLoop()</a> is called. Note if <a href=\"#/p5/noLoop\">noLoop()</a> is called in <a href=\"#/p5/setup\">setup()</a>, <a href=\"#/p5/draw\">draw()</a> will\nstill be executed once before stopping. <a href=\"#/p5/draw\">draw()</a> is called automatically and\nshould never be called explicitly.</p>\n<p>It should always be controlled with <a href=\"#/p5/noLoop\">noLoop()</a>, <a href=\"#/p5/redraw\">redraw()</a> and <a href=\"#/p5/loop\">loop()</a>. After\n<a href=\"#/p5/noLoop\">noLoop()</a> stops the code in <a href=\"#/p5/draw\">draw()</a> from executing, <a href=\"#/p5/redraw\">redraw()</a> causes the\ncode inside <a href=\"#/p5/draw\">draw()</a> to execute once, and <a href=\"#/p5/loop\">loop()</a> will cause the code\ninside <a href=\"#/p5/draw\">draw()</a> to resume executing continuously.</p>\n<p>The number of times <a href=\"#/p5/draw\">draw()</a> executes in each second may be controlled with\nthe <a href=\"#/p5/frameRate\">frameRate()</a> function.</p>\n<p>There can only be one <a href=\"#/p5/draw\">draw()</a> function for each sketch, and <a href=\"#/p5/draw\">draw()</a> must\nexist if you want the code to run continuously, or to process events such\nas <a href=\"#/p5/mousePressed\">mousePressed()</a>. Sometimes, you might have an empty call to <a href=\"#/p5/draw\">draw()</a> in\nyour program, as shown in the above example.</p>\n<p>It is important to note that the drawing coordinate system will be reset\nat the beginning of each <a href=\"#/p5/draw\">draw()</a> call. If any transformations are performed\nwithin <a href=\"#/p5/draw\">draw()</a> (ex: scale, rotate, translate), their effects will be\nundone at the beginning of <a href=\"#/p5/draw\">draw()</a>, so transformations will not accumulate\nover time. On the other hand, styling applied (ex: fill, stroke, etc) will\nremain in effect.</p>\n","itemtype":"method","name":"draw","example":["\n<div><code>\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</code></div>"],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":415,"description":"<p>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.</p>\n","itemtype":"method","name":"remove","example":["\n<div class='norender'><code>\nfunction draw() {\n  ellipse(50, 50, 10, 10);\n}\n\nfunction mousePressed() {\n  remove(); // remove whole sketch on mouse press\n}\n</code></div>"],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":694,"description":"<p>Allows for the friendly error system (FES) to be turned off when creating a sketch,\nwhich can give a significant boost to performance when needed.\nSee <a href='https://github.com/processing/p5.js/wiki/Optimizing-p5.js-Code-for-Performance#disable-the-friendly-error-system-fes'>\ndisabling the friendly error system</a>.</p>\n","itemtype":"property","name":"disableFriendlyErrors","type":"Boolean","example":["\n<div class=\"norender notest\"><code>\np5.disableFriendlyErrors = true;\n\nfunction setup() {\n  createCanvas(100, 50);\n}\n</code></div>"],"class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/p5.Element.js","line":21,"description":"<p>Underlying HTML element. All normal HTML methods can be called on this.</p>\n","example":["\n<div>\n<code>\nfunction setup() {\n  let c = createCanvas(50, 50);\n  c.elt.style.border = '5px solid red';\n}\n\nfunction draw() {\n  background(220);\n}\n</code>\n</div>"],"itemtype":"property","name":"elt","readonly":"","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":47,"description":"<p>Attaches the element to the parent specified. A way of setting\n the container for the element. Accepts either a string ID, DOM\n node, or <a href=\"#/p5.Element\">p5.Element</a>. If no arguments given, parent node is returned.\n For more ways to position the canvas, see the\n <a href='https://github.com/processing/p5.js/wiki/Positioning-your-canvas'>\n positioning the canvas</a> wiki page.</p>\n","itemtype":"method","name":"parent","chainable":1,"example":["\n <div class=\"norender notest\"><code>\n // Add the following comment to html file.\n // &lt;div id=\"myContainer\">&lt;/div>\n// The js code\n let cnv = createCanvas(100, 100);\n cnv.parent('myContainer');\n </code></div>\n<div class='norender'><code>\n let div0 = createDiv('this is the parent');\n let div1 = createDiv('this is the child');\n div1.parent(div0); // use p5.Element\n </code></div>\n<div class='norender'><code>\n let div0 = createDiv('this is the parent');\n div0.id('apples');\n let div1 = createDiv('this is the child');\n div1.parent('apples'); // use id\n </code></div>\n<div class='norender notest'><code>\n let elt = document.getElementById('myParentDiv');\n let div1 = createDiv('this is the child');\n div1.parent(elt); // use element from page\n </code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":47,"params":[{"name":"parent","description":"<p>the ID, DOM node, or <a href=\"#/p5.Element\">p5.Element</a>\n                         of desired parent element</p>\n","type":"String|p5.Element|Object"}],"chainable":1},{"line":93,"params":[],"return":{"description":"","type":"p5.Element"}}]},{"file":"src/core/p5.Element.js","line":114,"description":"<p>Sets the ID of the element. If no ID argument is passed in, it instead\n returns the current ID of the element.\n Note that only one element can have a particular id in a page.\n The <a href=\"#/p5.Element/class\">.class()</a> function can be used\n to identify multiple elements with the same class name.</p>\n","itemtype":"method","name":"id","chainable":1,"example":["\n <div class='norender'><code>\n function setup() {\n   let cnv = createCanvas(100, 100);\n   // Assigns a CSS selector ID to\n   // the canvas element.\n   cnv.id('mycanvas');\n }\n </code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":114,"params":[{"name":"id","description":"<p>ID of the element</p>\n","type":"String"}],"chainable":1},{"line":139,"params":[],"return":{"description":"the id of the element","type":"String"}}]},{"file":"src/core/p5.Element.js","line":154,"description":"<p>Adds given class to the element. If no class argument is passed in, it\n instead returns a string containing the current class(es) of the element.</p>\n","itemtype":"method","name":"class","chainable":1,"example":["\n <div class='norender'><code>\n function setup() {\n   let cnv = createCanvas(100, 100);\n   // Assigns a CSS selector class 'small'\n   // to the canvas element.\n   cnv.class('small');\n }\n </code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":154,"params":[{"name":"class","description":"<p>class to add</p>\n","type":"String"}],"chainable":1},{"line":176,"params":[],"return":{"description":"the class of the element","type":"String"}}]},{"file":"src/core/p5.Element.js","line":189,"description":"<p>The .<a href=\"#/p5.Element/mousePressed\">mousePressed()</a> function is called\nonce after every time a mouse button is pressed over the element. Some mobile\nbrowsers may also trigger this event on a touch screen, if the user performs\na quick tap. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"mousePressed","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               pressed over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mousePressed(changeGray); // attach listener for\n  // canvas click only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any click anywhere\nfunction mousePressed() {\n  d = d + 10;\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":246,"description":"<p>The .<a href=\"#/p5.Element/doubleClicked\">doubleClicked()</a> function is called once after every time a\nmouse button is pressed twice over the element. This can be used to\nattach element and action specific event listeners.</p>\n","itemtype":"method","name":"doubleClicked","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               double clicked over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"return":{"description":"","type":"p5.Element"},"example":["\n<div class='norender'><code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.doubleClicked(changeGray); // attach listener for\n  // canvas double click only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any double click anywhere\nfunction doubleClicked() {\n  d = d + 10;\n}\n\n// this function fires only when cnv is double clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":292,"description":"<p>The <a href=\"#/p5.Element/mouseWheel\">mouseWheel()</a> function is called\nonce after every time a mouse wheel is scrolled over the element. This can\nbe used to attach element specific event listeners.</p>\n<p>The function accepts a callback function as argument which will be executed\nwhen the <code>wheel</code> event is triggered on the element, the callback function is\npassed one argument <code>event</code>. The <code>event.deltaY</code> property returns negative\nvalues if the mouse wheel is rotated up or away from the user and positive\nin the other direction. The <code>event.deltaX</code> does the same as <code>event.deltaY</code>\nexcept it reads the horizontal wheel scroll of the mouse wheel.</p>\n<p>On OS X with \"natural\" scrolling enabled, the <code>event.deltaY</code> values are\nreversed.</p>\n","itemtype":"method","name":"mouseWheel","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               scrolled over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseWheel(changeSize); // attach listener for\n  // activity on canvas only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with mousewheel movement\n// anywhere on screen\nfunction mouseWheel() {\n  g = g + 10;\n}\n\n// this function fires with mousewheel movement\n// over canvas only\nfunction changeSize(event) {\n  if (event.deltaY > 0) {\n    d = d + 10;\n  } else {\n    d = d - 10;\n  }\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":354,"description":"<p>The <a href=\"#/p5.Element/mouseReleased\">mouseReleased()</a> function is\ncalled once after every time a mouse button is released over the element.\nSome mobile browsers may also trigger this event on a touch screen, if the\nuser performs a quick tap. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"mouseReleased","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               released over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseReleased(changeGray); // attach listener for\n  // activity on canvas only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires after the mouse has been\n// released\nfunction mouseReleased() {\n  d = d + 10;\n}\n\n// this function fires after the mouse has been\n// released while on canvas\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":403,"description":"<p>The .<a href=\"#/p5.Element/mouseClicked\">mouseClicked()</a> function is\ncalled once after a mouse button is pressed and released over the element.\nSome mobile browsers may also trigger this event on a touch screen, if the\nuser performs a quick tap.This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"mouseClicked","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               clicked over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseClicked(changeGray); // attach listener for\n  // activity on canvas only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires after the mouse has been\n// clicked anywhere\nfunction mouseClicked() {\n  d = d + 10;\n}\n\n// this function fires after the mouse has been\n// clicked on canvas\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code>\n</div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":454,"description":"<p>The .<a href=\"#/p5.Element/mouseMoved\">mouseMoved()</a> function is called once every time a\nmouse moves over the element. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"mouseMoved","params":[{"name":"fxn","description":"<p>function to be fired when a mouse moves\n                               over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d = 30;\nlet g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseMoved(changeSize); // attach listener for\n  // activity on canvas only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  fill(200);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires when mouse moves anywhere on\n// page\nfunction mouseMoved() {\n  g = g + 5;\n  if (g > 255) {\n    g = 0;\n  }\n}\n\n// this function fires when mouse moves over canvas\nfunction changeSize() {\n  d = d + 2;\n  if (d > 100) {\n    d = 0;\n  }\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":510,"description":"<p>The .<a href=\"#/p5.Element/mouseOver\">mouseOver()</a> function is called once after every time a\nmouse moves onto the element. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"mouseOver","params":[{"name":"fxn","description":"<p>function to be fired when a mouse moves\n                               onto the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseOver(changeGray);\n  d = 10;\n}\n\nfunction draw() {\n  ellipse(width / 2, height / 2, d, d);\n}\n\nfunction changeGray() {\n  d = d + 10;\n  if (d > 100) {\n    d = 0;\n  }\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":551,"description":"<p>The .<a href=\"#/p5.Element/mouseOut\">mouseOut()</a> function is called once after every time a\nmouse moves off the element. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"mouseOut","params":[{"name":"fxn","description":"<p>function to be fired when a mouse\n                               moves off of an element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseOut(changeGray);\n  d = 10;\n}\n\nfunction draw() {\n  ellipse(width / 2, height / 2, d, d);\n}\n\nfunction changeGray() {\n  d = d + 10;\n  if (d > 100) {\n    d = 0;\n  }\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":592,"description":"<p>The .<a href=\"#/p5.Element/touchStarted\">touchStarted()</a> function is called once after every time a touch is\nregistered. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"touchStarted","params":[{"name":"fxn","description":"<p>function to be fired when a touch\n                               starts over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d;\nlet g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.touchStarted(changeGray); // attach listener for\n  // canvas click only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any touch anywhere\nfunction touchStarted() {\n  d = d + 10;\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":639,"description":"<p>The .<a href=\"#/p5.Element/touchMoved\">touchMoved()</a> function is called once after every time a touch move is\nregistered. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"touchMoved","params":[{"name":"fxn","description":"<p>function to be fired when a touch moves over\n                               the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.touchMoved(changeGray); // attach listener for\n  // canvas click only\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":678,"description":"<p>The .<a href=\"#/p5.Element/touchEnded\">touchEnded()</a> function is called once after every time a touch is\nregistered. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"touchEnded","params":[{"name":"fxn","description":"<p>function to be fired when a touch ends\n                               over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d;\nlet g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.touchEnded(changeGray); // attach listener for\n  // canvas click only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any touch anywhere\nfunction touchEnded() {\n  d = d + 10;\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":725,"description":"<p>The .<a href=\"#/p5.Element/dragOver\">dragOver()</a> function is called once after every time a\nfile is dragged over the element. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"dragOver","params":[{"name":"fxn","description":"<p>function to be fired when a file is\n                               dragged over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div><code>\n// To test this sketch, simply drag a\n// file over the canvas\nfunction setup() {\n  let c = createCanvas(100, 100);\n  background(200);\n  textAlign(CENTER);\n  text('Drag file', width / 2, height / 2);\n  c.dragOver(dragOverCallback);\n}\n\n// This function will be called whenever\n// a file is dragged over the canvas\nfunction dragOverCallback() {\n  background(240);\n  text('Dragged over', width / 2, height / 2);\n}\n</code></div>"],"alt":"nothing displayed","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":763,"description":"<p>The .dragLeave() function is called once after every time a\ndragged file leaves the element area. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"dragLeave","params":[{"name":"fxn","description":"<p>function to be fired when a file is\n                               dragged off the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div><code>\n// To test this sketch, simply drag a file\n// over and then out of the canvas area\nfunction setup() {\n  let c = createCanvas(100, 100);\n  background(200);\n  textAlign(CENTER);\n  text('Drag file', width / 2, height / 2);\n  c.dragLeave(dragLeaveCallback);\n}\n\n// This function will be called whenever\n// a file is dragged out of the canvas\nfunction dragLeaveCallback() {\n  background(240);\n  text('Dragged off', width / 2, height / 2);\n}\n</code></div>"],"alt":"nothing displayed","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":827,"description":"<p>Helper fxn for sharing pixel methods</p>\n","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Graphics.js","line":70,"description":"<p>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 <a href='#/p5/draw'>draw()</a> will copy the behavior\nof the standard canvas.</p>\n","itemtype":"method","name":"reset","example":["\n\n<div><code>\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</code></div>"],"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":122,"description":"<p>Removes a Graphics object from the page and frees any resources\nassociated with it.</p>\n","itemtype":"method","name":"remove","example":["\n<div class='norender'><code>\nlet bg;\nfunction setup() {\n  bg = createCanvas(100, 100);\n  bg.background(0);\n  image(bg, 0, 0);\n  bg.remove();\n}\n</code></div>\n\n<div><code>\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</code></div>"],"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.Renderer.js","line":95,"description":"<p>Resize our canvas element.</p>\n","class":"p5.Renderer","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Renderer.js","line":344,"description":"<p>Helper fxn to check font type (system or otf)</p>\n","class":"p5.Renderer","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Renderer.js","line":396,"description":"<p>Helper fxn to measure ascent and descent.\nAdapted from <a href=\"http://stackoverflow.com/a/25355178\">http://stackoverflow.com/a/25355178</a></p>\n","class":"p5.Renderer","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Renderer2D.js","line":7,"description":"<p>p5.Renderer2D\nThe 2D graphics canvas renderer class.\nextends p5.Renderer</p>\n","class":"p5","module":"Rendering"},{"file":"src/core/p5.Renderer2D.js","line":402,"description":"<p>Generate a cubic Bezier representing an arc on the unit circle of total\nangle <code>size</code> radians, beginning <code>start</code> radians above the x-axis. Up to\nfour of these curves are combined to make a full arc.</p>\n<p>See <a href=\"http://www.joecridge.me/bezier.pdf\">www.joecridge.me/bezier.pdf</a> for an explanation of the method.</p>\n","class":"p5","module":"Rendering"},{"file":"src/core/reference.js","line":7,"description":"<p>Creates and names a new variable. A variable is a container for a value.</p>\n<p>Variables that are declared with <a href=\"#/p5/let\">let</a> will have block-scope.\nThis means that the variable only exists within the\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block\">\nblock</a> that it is created within.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let\">the MDN entry</a>:\nDeclares a block scope local variable, optionally initializing it to a value.</p>\n","itemtype":"property","name":"let","example":["\n<div class='norender'>\n<code>\nlet x = 2;\nconsole.log(x); // prints 2 to the console\nx = 1;\nconsole.log(x); // prints 1 to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":34,"description":"<p>Creates and names a new constant. Like a variable created with <a href=\"#/p5/let\">let</a>,\na constant that is created with <a href=\"#/p5/const\">const</a> 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 <code>let</code>, you cannot declare variables without value\nusing const.</p>\n<p>Constants have block-scope. This means that the constant only exists within\nthe <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block\">\nblock</a> that it is created within. A constant cannot be redeclared within a scope in which it\nalready exists.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const\">the MDN entry</a>:\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.</p>\n","itemtype":"property","name":"const","example":["\n<div class='norender'>\n<code>\n// define myFavNumber as a constant and give it the value 7\nconst myFavNumber = 7;\nconsole.log('my favorite number is: ' + myFavNumber);\n</code>\n</div>\n\n<div class='norender'>\n<code>\nconst bigCats = ['lion', 'tiger', 'panther'];\nbigCats.push('leopard');\nconsole.log(bigCats);\n// bigCats = ['cat']; // throws error as re-assigning not allowed for const\n</code>\n</div>\n\n<div class='norender'>\n<code>\nconst wordFrequency = {};\nwordFrequency['hello'] = 2;\nwordFrequency['bye'] = 1;\nconsole.log(wordFrequency);\n// wordFrequency = { 'a': 2, 'b': 3}; // throws error here\n</code>\n</div>"],"alt":"These examples do not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":87,"description":"<p>The strict equality operator <a href=\"#/p5/===\">===</a>\nchecks to see if two values are equal and of the same type.</p>\n<p>A comparison expression always evaluates to a <a href=\"#/p5/boolean\">boolean</a>.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">the MDN entry</a>:\nThe non-identity operator returns true if the operands are not equal and/or not of the same type.</p>\n<p>Note: In some examples around the web you may see a double-equals-sign\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality\">==</a>,\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.</p>\n","itemtype":"property","name":"===","example":["\n<div class='norender'>\n<code>\nconsole.log(1 === 1); // prints true to the console\nconsole.log(1 === '1'); // prints false to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":115,"description":"<p>The greater than operator <a href=\"#/p5/>\">></a>\nevaluates to true if the left value is greater than\nthe right value.</p>\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">\nThere is more info on comparison operators on MDN.</a>","itemtype":"property","name":">","example":["\n<div class='norender'>\n<code>\nconsole.log(100 > 1); // prints true to the console\nconsole.log(1 > 100); // prints false to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":137,"description":"<p>The greater than or equal to operator <a href=\"#/p5/>=\">>=</a>\nevaluates to true if the left value is greater than or equal to\nthe right value.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">There is more info on comparison operators on MDN.</a></p>\n","itemtype":"property","name":">=","example":["\n<div class='norender'>\n<code>\nconsole.log(100 >= 100); // prints true to the console\nconsole.log(101 >= 100); // prints true to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":158,"description":"<p>The less than operator <a href=\"#/p5/<\"><</a>\nevaluates to true if the left value is less than\nthe right value.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">There is more info on comparison operators on MDN.</a></p>\n","itemtype":"property","name":"<","example":["\n<div class='norender'>\n<code>\nconsole.log(1 < 100); // prints true to the console\nconsole.log(100 < 99); // prints false to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":179,"description":"<p>The less than or equal to operator <a href=\"#/p5/<=\"><=</a>\nevaluates to true if the left value is less than or equal to\nthe right value.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">There is more info on comparison operators on MDN.</a></p>\n","itemtype":"property","name":"<=","example":["\n<div class='norender'>\n<code>\nconsole.log(100 <= 100); // prints true to the console\nconsole.log(99 <= 100); // prints true to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":200,"description":"<p>The <a href=\"#/p5/if-else\">if-else</a> statement helps control the flow of your code.</p>\n<p>A condition is placed between the parenthesis following 'if',\nwhen that condition evalues to <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/truthy\">truthy</a>,\nthe code between the following curly braces is run.\nAlternatively, when the condition evaluates to <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Falsy\">falsy</a>,\nthe code between the curly braces of 'else' block is run instead. Writing an\nelse block is optional.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else\">the MDN entry</a>:\nThe 'if' statement executes a statement if a specified condition is truthy.\nIf the condition is falsy, another statement can be executed</p>\n","itemtype":"property","name":"if-else","example":["\n<div class='norender'>\n<code>\nlet a = 4;\nif (a > 0) {\n  console.log('positive');\n} else {\n  console.log('negative');\n}\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":231,"description":"<p>Creates and names a <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions\">function</a>.\nA <a href=\"#/p5/function\">function</a> is a set of statements that perform a task.</p>\n<p>Optionally, functions can have parameters. <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Parameter\">Parameters</a>\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.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function\">the MDN entry</a>:\nDeclares a function with the specified parameters.</p>\n","itemtype":"property","name":"function","example":["\n<div class='norender'>\n<code>\nlet myName = 'Hridi';\nfunction sayHello(name) {\n  console.log('Hello ' + name + '!');\n}\nsayHello(myName); // calling the function, prints \"Hello Hridi!\" to console.\n</code>\n</div>\n\n<div class='norender'>\n<code>\nlet square = number => number * number;\nconsole.log(square(5));\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":267,"description":"<p>Specifies the value to be returned by a function.\nFor more info checkout <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return\">\nthe MDN entry for return</a>.</p>\n","itemtype":"property","name":"return","example":["\n<div class='norender'>\n<code>\nfunction calculateSquare(x) {\n  return x * x;\n}\nconst result = calculateSquare(4); // returns 16\nconsole.log(result); // prints '16' to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":288,"description":"<p>A <a href=\"#/p5/boolean\">boolean</a> is one of the 7 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Primitive_values\">primitive data types</a> in Javascript.\nA boolean can only be <code>true</code> or <code>false</code>.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type\">the MDN entry</a>:\nBoolean represents a logical entity and can have two values: true, and false.</p>\n","itemtype":"property","name":"boolean","example":["\n<div class='norender'>\n<code>\nlet myBoolean = false;\nconsole.log(typeof myBoolean); // prints 'boolean' to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":309,"description":"<p>A <a href=\"#/p5/string\">string</a> is one of the 7 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Primitive_values\">primitive data types</a> 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(\").</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/string\">the MDN entry</a>:\nA string is a sequence of characters used to represent text.</p>\n","itemtype":"property","name":"string","example":["\n<div class='norender'>\n<code>\nlet mood = 'chill';\nconsole.log(typeof mood); // prints 'string' to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":331,"description":"<p>A <a href=\"#/p5/number\">number</a> is one of the 7 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Primitive_values\">primitive data types</a> in Javascript.\nA number can be a whole number or a decimal number.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Glossary/number\">The MDN entry for number</a></p>\n","itemtype":"property","name":"number","example":["\n<div class='norender'>\n<code>\nlet num = 46.5;\nconsole.log(typeof num); // prints 'number' to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":351,"description":"<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics\">MDN's object basics</a>:\n An <a href=\"#/p5/object\">object</a> 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.)</p>\n","itemtype":"property","name":"object","example":["\n <div class='norender'>\n <code>\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 </code>\n </div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":379,"description":"<p>Creates and names a <a href=\"#/p5/class\">class</a> which is a template for\nthe creation of <a href=\"#/p5/objects\">objects</a>.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class\">the MDN entry</a>:\nThe class declaration creates a new Class with a given name using\nprototype-based inheritance.</p>\n","itemtype":"property","name":"class","example":["\n<div class='norender'>\n<code>\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</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":408,"description":"<p><a href=\"#/p5/for\">for</a> creates a loop that is useful for executing one\nsection of code multiple times.</p>\n<p>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 seperated by ; (semi-colon).In case of an empty expression,\nonly a semi-colon is written.</p>\n<p>The code inside of the loop body (in between the curly braces) is executed between the evaluation of the second\nand third expression.</p>\n<p>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 <a href=\"#/p5/for\">for</a> 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.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for\">the MDN entry</a>:\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.</p>\n","itemtype":"property","name":"for","example":["\n<div class='norender'>\n<code>\nfor (let i = 0; i < 9; i++) {\n  console.log(i);\n}\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":448,"description":"<p><a href=\"#/p5/while\">while</a> creates a loop that is useful for executing\none section of code multiple times.</p>\n<p>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 <a href=\"#/p5/while\">while</a>, so if the condition is initially false\nthe loop body, or statement, will never execute.</p>\n<p>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.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/while\">the MDN entry</a>:\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.</p>\n","itemtype":"property","name":"while","example":["\n<div class='norender'>\n<code>\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</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":490,"description":"<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify\">the MDN entry</a>:\nThe JSON.stringify() method converts a JavaScript object or value to a JSON <a href=\"#/p5/string\">string</a>.</p>\n","itemtype":"method","name":"stringify","static":1,"params":[{"name":"object","description":"<p>:Javascript object that you would like to convert to JSON</p>\n","type":"Object"}],"example":["\n<div class='norender'>\n<code>\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</code>\n</div>"],"alt":"This example does not render anything","class":"JSON","module":"Foundation","submodule":"Foundation"},{"file":"src/core/reference.js","line":512,"description":"<p>Prints a message to your browser's web console. When using p5, you can use <a href=\"#/p5/print\">print</a>\nand <a href=\"#/p5/console/log\">console.log</a> interchangeably.</p>\n<p>The console is opened differently depending on which browser you are using.\nHere are links on how to open the console in <a href=\"https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Opening_the_Web_Console\">Firefox</a>\n, <a href=\"https://developers.google.com/web/tools/chrome-devtools/open\">Chrome</a>, <a href=\"https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/console\">Edge</a>,\nand <a href=\"https://support.apple.com/en-ca/guide/safari/sfri20948/mac\">Safari</a>.\nWith the <a href=\"https://editor.p5js.org/\">online p5 editor</a> the console\nis embedded directly in the page underneath the code editor.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Console/log\">the MDN entry</a>:\nThe Console method log() outputs a message to the web console. The message may\nbe a single <a href=\"#/p5/string\">string</a> (with optional substitution values),\nor it may be any one or more JavaScript <a href=\"#/p5/object\">objects</a>.</p>\n","itemtype":"method","name":"log","static":1,"params":[{"name":"message","description":"<p>:Message that you would like to print to the console</p>\n","type":"String|Expression|Object"}],"example":["\n<div class='norender'>\n<code>\nlet myNum = 5;\nconsole.log(myNum); // prints 5 to the console\nconsole.log(myNum + 12); // prints 17 to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"console","module":"Foundation","submodule":"Foundation"},{"file":"src/core/rendering.js","line":15,"description":"<p>Creates a canvas element in the document, and sets the dimensions of it\nin pixels. This method should be called only once at the start of setup.\nCalling <a href=\"#/p5/createCanvas\">createCanvas</a> more than once in a\nsketch will result in very unpredictable behavior. If you want more than\none drawing canvas you could use <a href=\"#/p5/createGraphics\">createGraphics</a>\n(hidden by default but it can be shown).</p>\n<p>Important note: in 2D mode (i.e. when <code>p5.Renderer</code> is not set) the origin (0,0)\nis positioned at the top left of the screen. In 3D mode (i.e. when <code>p5.Renderer</code>\nis set to <code>WEBGL</code>), the origin is positioned at the center of the canvas.\nSee <a href=\"https://github.com/processing/p5.js/issues/1545\">this issue</a> for more information.</p>\n<p>The system variables width and height are set by the parameters passed to this\nfunction. If <a href=\"#/p5/createCanvas\">createCanvas()</a> is not used, the\nwindow will be given a default size of 100x100 pixels.</p>\n<p>For more ways to position the canvas, see the\n<a href='https://github.com/processing/p5.js/wiki/Positioning-your-canvas'>\npositioning the canvas</a> wiki page.</p>\n","itemtype":"method","name":"createCanvas","params":[{"name":"w","description":"<p>width of the canvas</p>\n","type":"Number"},{"name":"h","description":"<p>height of the canvas</p>\n","type":"Number"},{"name":"renderer","description":"<p>either P2D or WEBGL</p>\n","type":"Constant","optional":true}],"return":{"description":"","type":"p5.Renderer"},"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 50);\n  background(153);\n  line(0, 0, width, height);\n}\n</code>\n</div>"],"alt":"Black line extending from top-left of canvas to bottom right.","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":125,"description":"<p>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.</p>\n","itemtype":"method","name":"resizeCanvas","params":[{"name":"w","description":"<p>width of the canvas</p>\n","type":"Number"},{"name":"h","description":"<p>height of the canvas</p>\n","type":"Number"},{"name":"noRedraw","description":"<p>don't redraw the canvas immediately</p>\n","type":"Boolean","optional":true}],"example":["\n<div class=\"norender\"><code>\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</code></div>"],"alt":"No image displayed.","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":183,"description":"<p>Removes the default canvas for a p5 sketch that doesn't require a canvas</p>\n","itemtype":"method","name":"noCanvas","example":["\n<div>\n<code>\nfunction setup() {\n  noCanvas();\n}\n</code>\n</div>"],"alt":"no image displayed","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":204,"description":"<p>Creates and returns a new p5.Renderer object. Use this class if you need\nto draw into an off-screen graphics buffer. The two parameters define the\nwidth and height in pixels.</p>\n","itemtype":"method","name":"createGraphics","params":[{"name":"w","description":"<p>width of the offscreen graphics buffer</p>\n","type":"Number"},{"name":"h","description":"<p>height of the offscreen graphics buffer</p>\n","type":"Number"},{"name":"renderer","description":"<p>either P2D or WEBGL\n                              undefined defaults to p2d</p>\n","type":"Constant","optional":true}],"return":{"description":"offscreen graphics buffer","type":"p5.Graphics"},"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"4 grey squares alternating light and dark grey. White quarter circle mid-left.","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":243,"description":"<p>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):</p>\n<ul>\n<li><code>BLEND</code> - linear interpolation of colours: C =\nA*factor + B. <b>This is the default blending mode.</b></li>\n<li><code>ADD</code> - sum of A and B</li>\n<li><code>DARKEST</code> - only the darkest colour succeeds: C =\nmin(A*factor, B).</li>\n<li><code>LIGHTEST</code> - only the lightest colour succeeds: C =\nmax(A*factor, B).</li>\n<li><code>DIFFERENCE</code> - subtract colors from underlying image.</li>\n<li><code>EXCLUSION</code> - similar to <code>DIFFERENCE</code>, but less\nextreme.</li>\n<li><code>MULTIPLY</code> - multiply the colors, result will always be\ndarker.</li>\n<li><code>SCREEN</code> - opposite multiply, uses inverse values of the\ncolors.</li>\n<li><code>REPLACE</code> - the pixels entirely replace the others and\ndon't utilize alpha (transparency) values.</li>\n<li><code>REMOVE</code> - removes pixels from B with the alpha strength of A.</li>\n<li><code>OVERLAY</code> - mix of <code>MULTIPLY</code> and <code>SCREEN\n</code>. Multiplies dark values, and screens light values. <em>(2D)</em></li>\n<li><code>HARD_LIGHT</code> - <code>SCREEN</code> when greater than 50%\ngray, <code>MULTIPLY</code> when lower. <em>(2D)</em></li>\n<li><code>SOFT_LIGHT</code> - mix of <code>DARKEST</code> and\n<code>LIGHTEST</code>. Works like <code>OVERLAY</code>, but not as harsh. <em>(2D)</em>\n</li>\n<li><code>DODGE</code> - lightens light tones and increases contrast,\nignores darks. <em>(2D)</em></li>\n<li><code>BURN</code> - darker areas are applied, increasing contrast,\nignores lights. <em>(2D)</em></li>\n<li><code>SUBTRACT</code> - remainder of A and B <em>(3D)</em></li>\n</ul>\n\n<p><em>(2D)</em> indicates that this blend mode <b>only</b> works in the 2D renderer.<br>\n<em>(3D)</em> indicates that this blend mode <b>only</b> works in the WEBGL renderer.</p>\n","itemtype":"method","name":"blendMode","params":[{"name":"mode","description":"<p>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</p>\n","type":"Constant"}],"example":["\n<div>\n<code>\nblendMode(LIGHTEST);\nstrokeWeight(30);\nstroke(80, 150, 255);\nline(25, 25, 75, 75);\nstroke(255, 50, 50);\nline(75, 25, 25, 75);\n</code>\n</div>\n\n<div>\n<code>\nblendMode(MULTIPLY);\nstrokeWeight(30);\nstroke(80, 150, 255);\nline(25, 25, 75, 75);\nstroke(255, 50, 50);\nline(75, 25, 25, 75);\n</code>\n</div>"],"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":326,"description":"<p>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 <code>drawingContext</code>, as in the example shown. This is\nthe equivalent of calling <code>canvas.getContext('2d');</code> or <code>canvas.getContext('webgl');</code>.\nSee this\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D\">\nreference for the native canvas API</a> for possible drawing functions you can call.</p>\n","itemtype":"property","name":"drawingContext","example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"white ellipse with shadow blur effect around edges","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/shim.js","line":18,"description":"<p>shim for Uint8ClampedArray.slice\n(allows arrayCopy to work with pixels[])\nwith thanks to <a href=\"http://halfpapstudios.com/blog/tag/html5-canvas/\">http://halfpapstudios.com/blog/tag/html5-canvas/</a>\nEnumerable set to false to protect for...in from\nUint8ClampedArray.prototype pollution.</p>\n","class":"p5","module":"Rendering"},{"file":"src/core/shim.js","line":39,"description":"<p>this is implementation of Object.assign() which is unavailable in\nIE11 and (non-Chrome) Android browsers.\nThe assign() method is used to copy the values of all enumerable\nown properties from one or more source objects to a target object.\nIt will return the target object.\nModified from <a href=\"https://github.com/ljharb/object.assign\">https://github.com/ljharb/object.assign</a></p>\n","class":"p5","module":"Rendering"},{"file":"src/core/structure.js","line":10,"description":"<p>Stops p5.js from continuously executing the code within <a href=\"#/p5/draw\">draw()</a>.\nIf <a href=\"#/p5/loop\">loop()</a> is called, the code in <a href=\"#/p5/draw\">draw()</a>\nbegins to run continuously again. If using <a href=\"#/p5/noLoop\">noLoop()</a>\nin <a href=\"#/p5/setup\">setup()</a>, it should be the last line inside the block.</p>\n<p>When <a href=\"#/p5/noLoop\">noLoop()</a> is used, it's not possible to manipulate\nor access the screen inside event handling functions such as\n<a href=\"#/p5/mousePressed\">mousePressed()</a> or\n<a href=\"#/p5/keyPressed\">keyPressed()</a>. Instead, use those functions to\ncall <a href=\"#/p5/redraw\">redraw()</a> or <a href=\"#/p5/loop\">loop()</a>,\nwhich will run <a href=\"#/p5/draw\">draw()</a>, which can update the screen\nproperly. This means that when <a href=\"#/p5/noLoop\">noLoop()</a> has been\ncalled, no drawing can happen, and functions like <a href=\"#/p5/saveFrames\">saveFrames()</a>\nor <a href=\"#/p5/loadPixels\">loadPixels()</a> may not be used.</p>\n<p>Note that if the sketch is resized, <a href=\"#/p5/redraw\">redraw()</a> will\nbe called to update the sketch, even after <a href=\"#/p5/noLoop\">noLoop()</a>\nhas been specified. Otherwise, the sketch would enter an odd state until\n<a href=\"#/p5/loop\">loop()</a> was called.</p>\n<p>Use <a href=\"#/p5/isLooping\">isLooping()</a> to check current state of loop().</p>\n","itemtype":"method","name":"noLoop","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n  background(200);\n  noLoop();\n}\n\nfunction draw() {\n  line(10, 10, 90, 90);\n}\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":83,"description":"<p>By default, p5.js loops through draw() continuously, executing the code within\nit. However, the <a href=\"#/p5/draw\">draw()</a> loop may be stopped by calling\n<a href=\"#/p5/noLoop\">noLoop()</a>. In that case, the <a href=\"#/p5/draw\">draw()</a>\nloop can be resumed with loop().</p>\n<p>Avoid calling loop() from inside setup().</p>\n<p>Use <a href=\"#/p5/isLooping\">isLooping()</a> to check current state of loop().</p>\n","itemtype":"method","name":"loop","example":["\n<div>\n<code>\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</code>\n</div>"],"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":134,"description":"<p>By default, p5.js loops through <a href=\"#/p5/draw\">draw()</a> continuously,\nexecuting the code within it. If the sketch is stopped with\n<a href=\"#/p5/noLoop\">noLoop()</a> or resumed with <a href=\"#/p5/loop\">loop()</a>,\nisLooping() returns the current state for use within custom event handlers.</p>\n","itemtype":"method","name":"isLooping","example":["\n<div>\n<code>\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</code>\n</div>"],"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":"<p>The <a href=\"#/p5/push\">push()</a> function saves the current drawing style\nsettings and transformations, while <a href=\"#/p5/pop\">pop()</a> 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 <a href=\"#/p5/push\">push()</a>, it builds on\nthe current style and transform information. The <a href=\"#/p5/push\">push()</a>\nand <a href=\"#/p5/pop\">pop()</a> functions can be embedded to provide more\ncontrol. (See the second example for a demonstration.)</p>\n<p><a href=\"#/p5/push\">push()</a> stores information related to the current transformation state\nand style settings controlled by the following functions:\n<a href=\"#/p5/fill\">fill()</a>,\n<a href=\"#/p5/noFill\">noFill()</a>,\n<a href=\"#/p5/noStroke\">noStroke()</a>,\n<a href=\"#/p5/stroke\">stroke()</a>,\n<a href=\"#/p5/tint\">tint()</a>,\n<a href=\"#/p5/noTint\">noTint()</a>,\n<a href=\"#/p5/strokeWeight\">strokeWeight()</a>,\n<a href=\"#/p5/strokeCap\">strokeCap()</a>,\n<a href=\"#/p5/strokeJoin\">strokeJoin()</a>,\n<a href=\"#/p5/imageMode\">imageMode()</a>,\n<a href=\"#/p5/rectMode\">rectMode()</a>,\n<a href=\"#/p5/ellipseMode\">ellipseMode()</a>,\n<a href=\"#/p5/colorMode\">colorMode()</a>,\n<a href=\"#/p5/textAlign\">textAlign()</a>,\n<a href=\"#/p5/textFont\">textFont()</a>,\n<a href=\"#/p5/textSize\">textSize()</a>,\n<a href=\"#/p5/textLeading\">textLeading()</a>,\n<a href=\"#/p5/applyMatrix\">applyMatrix()</a>,\n<a href=\"#/p5/resetMatrix\">resetMatrix()</a>,\n<a href=\"#/p5/rotate\">rotate()</a>,\n<a href=\"#/p5/scale\">scale()</a>,\n<a href=\"#/p5/shearX\">shearX()</a>,\n<a href=\"#/p5/shearY\">shearY()</a>,\n<a href=\"#/p5/translate\">translate()</a>,\n<a href=\"#/p5/noiseSeed\">noiseSeed()</a>.</p>\n<p>In WEBGL mode additional style settings are stored. These are controlled by the\nfollowing functions: <a href=\"#/p5/setCamera\">setCamera()</a>,\n<a href=\"#/p5/ambientLight\">ambientLight()</a>,\n<a href=\"#/p5/directionalLight\">directionalLight()</a>,\n<a href=\"#/p5/pointLight\">pointLight()</a>, <a href=\"#/p5/texture\">texture()</a>,\n<a href=\"#/p5/specularMaterial\">specularMaterial()</a>,\n<a href=\"#/p5/shininess\">shininess()</a>,\n<a href=\"#/p5/normalMaterial\">normalMaterial()</a>\nand <a href=\"#/p5/shader\">shader()</a>.</p>\n","itemtype":"method","name":"push","example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":"<p>The <a href=\"#/p5/push\">push()</a> function saves the current drawing style\nsettings and transformations, while <a href=\"#/p5/pop\">pop()</a> 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 <a href=\"#/p5/push\">push()</a>, it\nbuilds on the current style and transform information. The <a href=\"#/p5/push\">push()</a>\nand <a href=\"#/p5/pop\">pop()</a> functions can be embedded to provide more\ncontrol. (See the second example for a demonstration.)</p>\n<p><a href=\"#/p5/push\">push()</a> stores information related to the current transformation state\nand style settings controlled by the following functions:\n<a href=\"#/p5/fill\">fill()</a>,\n<a href=\"#/p5/noFill\">noFill()</a>,\n<a href=\"#/p5/noStroke\">noStroke()</a>,\n<a href=\"#/p5/stroke\">stroke()</a>,\n<a href=\"#/p5/tint\">tint()</a>,\n<a href=\"#/p5/noTint\">noTint()</a>,\n<a href=\"#/p5/strokeWeight\">strokeWeight()</a>,\n<a href=\"#/p5/strokeCap\">strokeCap()</a>,\n<a href=\"#/p5/strokeJoin\">strokeJoin()</a>,\n<a href=\"#/p5/imageMode\">imageMode()</a>,\n<a href=\"#/p5/rectMode\">rectMode()</a>,\n<a href=\"#/p5/ellipseMode\">ellipseMode()</a>,\n<a href=\"#/p5/colorMode\">colorMode()</a>,\n<a href=\"#/p5/textAlign\">textAlign()</a>,\n<a href=\"#/p5/textFont\">textFont()</a>,\n<a href=\"#/p5/textSize\">textSize()</a>,\n<a href=\"#/p5/textLeading\">textLeading()</a>,\n<a href=\"#/p5/applyMatrix\">applyMatrix()</a>,\n<a href=\"#/p5/resetMatrix\">resetMatrix()</a>,\n<a href=\"#/p5/rotate\">rotate()</a>,\n<a href=\"#/p5/scale\">scale()</a>,\n<a href=\"#/p5/shearX\">shearX()</a>,\n<a href=\"#/p5/shearY\">shearY()</a>,\n<a href=\"#/p5/translate\">translate()</a>,\n<a href=\"#/p5/noiseSeed\">noiseSeed()</a>.</p>\n<p>In WEBGL mode additional style settings are stored. These are controlled by\nthe following functions:\n<a href=\"#/p5/setCamera\">setCamera()</a>,\n<a href=\"#/p5/ambientLight\">ambientLight()</a>,\n<a href=\"#/p5/directionalLight\">directionalLight()</a>,\n<a href=\"#/p5/pointLight\">pointLight()</a>,\n<a href=\"#/p5/texture\">texture()</a>,\n<a href=\"#/p5/specularMaterial\">specularMaterial()</a>,\n<a href=\"#/p5/shininess\">shininess()</a>,\n<a href=\"#/p5/normalMaterial\">normalMaterial()</a> and\n<a href=\"#/p5/shader\">shader()</a>.</p>\n","itemtype":"method","name":"pop","example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":"<p>Executes the code within <a href=\"#/p5/draw\">draw()</a> one time. This\nfunction allows the program to update the display window only when necessary,\nfor example when an event registered by <a href=\"#/p5/mousePressed\">mousePressed()</a>\nor <a href=\"#/p5/keyPressed\">keyPressed()</a> occurs.</p>\n<p>In structuring a program, it only makes sense to call <a href=\"#/p5/redraw\">redraw()</a>\nwithin events such as <a href=\"#/p5/mousePressed\">mousePressed()</a>. This\nis because <a href=\"#/p5/redraw\">redraw()</a> does not run\n<a href=\"#/p5/draw\">draw()</a> immediately (it only sets a flag that indicates\nan update is needed).</p>\n<p>The <a href=\"#/p5/redraw\">redraw()</a> function does not work properly when\ncalled inside <a href=\"#/p5/draw\">draw()</a>.To enable/disable animations,\nuse <a href=\"#/p5/loop\">loop()</a> and <a href=\"#/p5/noLoop\">noLoop()</a>.</p>\n<p>In addition you can set the number of redraws per method call. Just\nadd an integer as single parameter for the number of redraws.</p>\n","itemtype":"method","name":"redraw","params":[{"name":"n","description":"<p>Redraw for n-times. The default value is 1.</p>\n","type":"Integer","optional":true}],"example":["\n<div><code>\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</code>\n</div>\n\n<div class='norender'>\n<code>\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</code>\n</div>"],"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":497,"description":"<p>The <code>p5()</code> 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<a target=\"blank\" href=\"https://www.youtube.com/watch?v=Su792jEauZg&feature=youtu.be\">\nDan Shiffman's Coding Train video tutorial</a> or this\n<a target=\"blank\" href=\"https://github.com/processing/p5.js/wiki/p5.js-overview#instantiation--namespace\">tutorial page</a>\nfor more info.</p>\n<p>By default, all p5.js functions are in the global namespace (i.e. bound to the window\nobject), meaning you can call them simply <code>ellipse()</code>, <code>fill()</code>, 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.</p>\n<p>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.</p>\n<p>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.</p>\n","itemtype":"method","name":"p5","params":[{"name":"sketch","description":"<p>a function containing a p5.js sketch</p>\n","type":"Object"},{"name":"node","description":"<p>ID or pointer to HTML DOM node to contain sketch in</p>\n","type":"String|Object"}],"example":["\n<div class='norender'><code>\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</code></div>"],"alt":"white rectangle on black background","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/transform.js","line":11,"description":"<p>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 <a href=\"https://en.wikipedia.org/wiki/Transformation_matrix\">\nWikipedia</a>.</p>\n<p>The naming of the arguments here follows the naming of the <a href=\n\"https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-transform\">\nWHATWG specification</a> and corresponds to a\ntransformation matrix of the\nform:</p>\n<blockquote>\n<p><img style=\"max-width: 150px\" src=\"assets/transformation-matrix.png\"\nalt=\"The transformation matrix used when applyMatrix is called\"/></p>\n</blockquote>\n","itemtype":"method","name":"applyMatrix","params":[{"name":"a","description":"<p>numbers which define the 2x3 matrix to be multiplied, or an array of numbers</p>\n","type":"Number|Array"},{"name":"b","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"},{"name":"c","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"},{"name":"d","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"},{"name":"e","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"},{"name":"f","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\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(  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  stroke(255);\n  box(50);\n}\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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"},{"file":"src/core/transform.js","line":168,"description":"<p>Replaces the current matrix with the identity matrix.</p>\n","itemtype":"method","name":"resetMatrix","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"A rotated retangle in the center with another at the top left corner","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":193,"description":"<p>Rotates a shape by the amount specified by the angle parameter. This\nfunction accounts for <a href=\"#/p5/angleMode\">angleMode</a>, so angles\ncan be entered in either RADIANS or DEGREES.</p>\n<p>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 accumulates the effect. For example, calling\nrotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI).\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n<p>Technically, <a href=\"#/p5/rotate\">rotate()</a> multiplies the current transformation matrix\nby a rotation matrix. This function can be further controlled by\nthe <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a>.</p>\n","itemtype":"method","name":"rotate","params":[{"name":"angle","description":"<p>the angle of rotation, specified in radians\n                       or degrees, depending on current angleMode</p>\n","type":"Number"},{"name":"axis","description":"<p>(in 3d) the axis to rotate around</p>\n","type":"p5.Vector|Number[]","optional":true}],"chainable":1,"example":["\n<div>\n<code>\ntranslate(width / 2, height / 2);\nrotate(PI / 3.0);\nrect(-26, -26, 52, 52);\n</code>\n</div>"],"alt":"white 52x52 rect with black outline at center rotated counter 45 degrees","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":232,"description":"<p>Rotates a shape around X axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.</p>\n<p>Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n","itemtype":"method","name":"rotateX","params":[{"name":"angle","description":"<p>the angle of rotation, specified in radians\n                       or degrees, depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(255);\n  rotateX(millis() / 1000);\n  box();\n}\n</code>\n</div>"],"alt":"3d box rotating around the x axis.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":268,"description":"<p>Rotates a shape around Y axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.</p>\n<p>Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n","itemtype":"method","name":"rotateY","params":[{"name":"angle","description":"<p>the angle of rotation, specified in radians\n                       or degrees, depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(255);\n  rotateY(millis() / 1000);\n  box();\n}\n</code>\n</div>"],"alt":"3d box rotating around the y axis.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":304,"description":"<p>Rotates a shape around Z axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.</p>\n<p>This method works in WEBGL mode only.</p>\n<p>Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n","itemtype":"method","name":"rotateZ","params":[{"name":"angle","description":"<p>the angle of rotation, specified in radians\n                       or degrees, depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(255);\n  rotateZ(millis() / 1000);\n  box();\n}\n</code>\n</div>"],"alt":"3d box rotating around the z axis.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":342,"description":"<p>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%.</p>\n<p>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 <a href=\"#/p5/scale\">scale()</a> is called\nwithin <a href=\"#/p5/draw\">draw()</a>, the transformation is reset when the loop begins again.</p>\n<p>Using this function with the z parameter is only available in WEBGL mode.\nThis function can be further controlled with <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a>.</p>\n","itemtype":"method","name":"scale","chainable":1,"example":["\n<div>\n<code>\nrect(30, 20, 50, 50);\nscale(0.5);\nrect(30, 20, 50, 50);\n</code>\n</div>\n\n<div>\n<code>\nrect(30, 20, 50, 50);\nscale(0.5, 1.3);\nrect(30, 20, 50, 50);\n</code>\n</div>"],"alt":"white 52x52 rect with black outline at center rotated counter 45 degrees\n2 white rects with black outline- 1 50x50 at center. other 25x65 bottom left","class":"p5","module":"Transform","submodule":"Transform","overloads":[{"line":342,"params":[{"name":"s","description":"<p>percent to scale the object, or percentage to\n                     scale the object in the x-axis if multiple arguments\n                     are given</p>\n","type":"Number|p5.Vector|Number[]"},{"name":"y","description":"<p>percent to scale the object in the y-axis</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>percent to scale the object in the z-axis (webgl only)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":386,"params":[{"name":"scales","description":"<p>per-axis percents to scale the object</p>\n","type":"p5.Vector|Number[]"}],"chainable":1}]},{"file":"src/core/transform.js","line":416,"description":"<p>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.</p>\n<p>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 <a href=\"#/p5/shearX\">shearX()</a> is called within the <a href=\"#/p5/draw\">draw()</a>,\nthe transformation is reset when the loop begins again.</p>\n<p>Technically, <a href=\"#/p5/shearX\">shearX()</a> multiplies the current\ntransformation matrix by a rotation matrix. This function can be further\ncontrolled by the <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions.</p>\n","itemtype":"method","name":"shearX","params":[{"name":"angle","description":"<p>angle of shear specified in radians or degrees,\n                       depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\ntranslate(width / 4, height / 4);\nshearX(PI / 4.0);\nrect(0, 0, 30, 30);\n</code>\n</div>"],"alt":"white irregular quadrilateral with black outline at top middle.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":455,"description":"<p>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.</p>\n<p>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\n<a href=\"#/p5/shearY\">shearY()</a> is called within the <a href=\"#/p5/draw\">draw()</a>, the transformation is reset when\nthe loop begins again.</p>\n<p>Technically, <a href=\"#/p5/shearY\">shearY()</a> multiplies the current transformation matrix by a\nrotation matrix. This function can be further controlled by the\n<a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions.</p>\n","itemtype":"method","name":"shearY","params":[{"name":"angle","description":"<p>angle of shear specified in radians or degrees,\n                       depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\ntranslate(width / 4, height / 4);\nshearY(PI / 4.0);\nrect(0, 0, 30, 30);\n</code>\n</div>"],"alt":"white irregular quadrilateral with black outline at middle bottom.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":494,"description":"<p>Specifies an amount to displace objects within the display window.\nThe x parameter specifies left/right translation, the y parameter\nspecifies up/down translation.</p>\n<p>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 <a href=\"#/p5/translate\">translate()</a> is called within <a href=\"#/p5/draw\">draw()</a>, the\ntransformation is reset when the loop begins again. This function can be\nfurther controlled by using <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a>.</p>\n","itemtype":"method","name":"translate","chainable":1,"example":["\n<div>\n<code>\ntranslate(30, 20);\nrect(0, 0, 55, 55);\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n\n<div>\n<code>\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</code>\n</div>"],"alt":"white 55x55 rect with black outline at center right.\n3 white 55x55 rects with black outlines at top-l, center-r and bottom-r.\na 20x20 white rect moving in a circle around the canvas","class":"p5","module":"Transform","submodule":"Transform","overloads":[{"line":494,"params":[{"name":"x","description":"<p>left/right translation</p>\n","type":"Number"},{"name":"y","description":"<p>up/down translation</p>\n","type":"Number"},{"name":"z","description":"<p>forward/backward translation (webgl only)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":547,"params":[{"name":"vector","description":"<p>the vector to translate by</p>\n","type":"p5.Vector"}],"chainable":1}]},{"file":"src/data/local_storage.js","line":10,"description":"<p>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 <a href=\"#/p5/getItem\">getItem</a>.\nSensitive data such as passwords or personal information\n should not be stored in local storage.</p>\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 <div><code>\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 }\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 </code></div>"],"alt":"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.","class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/local_storage.js","line":101,"description":"<p>Returns the value of an item that was stored in local storage\n using storeItem()</p>\n","itemtype":"method","name":"getItem","params":[{"name":"key","description":"<p>name that you wish to use to store in local storage</p>\n","type":"String"}],"return":{"description":"Value of stored item","type":"Number|Object|String|Boolean|p5.Color|p5.Vector"},"example":["\n <div><code>\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 }\nfunction mousePressed() {\n   myColor = color(random(255), random(255), random(255));\n   storeItem('myColor', myColor);\n }\n </code></div>"],"alt":"If you click, the canvas changes to a random color.\n If you reload the page, the canvas is still the color it\n was when the page was previously loaded.","class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/local_storage.js","line":177,"description":"<p>Clears all local storage items set with storeItem()\n for the current domain.</p>\n","itemtype":"method","name":"clearStorage","example":["\n <div class=\"norender\">\n <code>\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 </code></div>"],"class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/local_storage.js","line":205,"description":"<p>Removes an item that was stored with storeItem()</p>\n","itemtype":"method","name":"removeItem","params":[{"name":"key","description":"","type":"String"}],"example":["\n <div class=\"norender\">\n <code>\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 </code></div>"],"class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/p5.TypedDict.js","line":14,"description":"<p>Creates a new instance of p5.StringDict using the key-value pair\n or the object you provide.</p>\n","itemtype":"method","name":"createStringDict","return":{"description":"","type":"p5.StringDict"},"example":["\n <div class=\"norender\">\n <code>\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 </code></div>"],"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":"<p>object</p>\n","type":"Object"}],"return":{"description":"","type":"p5.StringDict"}}]},{"file":"src/data/p5.TypedDict.js","line":48,"description":"<p>Creates a new instance of <a href=\"#/p5.NumberDict\">p5.NumberDict</a> using the key-value pair\n or object you provide.</p>\n","itemtype":"method","name":"createNumberDict","return":{"description":"","type":"p5.NumberDict"},"example":["\n <div class=\"norender\">\n <code>\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 </code></div>"],"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":"<p>object</p>\n","type":"Object"}],"return":{"description":"","type":"p5.NumberDict"}}]},{"file":"src/data/p5.TypedDict.js","line":101,"description":"<p>Returns the number of key-value pairs currently stored in the Dictionary.</p>\n","itemtype":"method","name":"size","return":{"description":"the number of key-value pairs in the Dictionary","type":"Integer"},"example":["\n<div class=\"norender\">\n<code>\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</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":122,"description":"<p>Returns true if the given key exists in the Dictionary,\notherwise returns false.</p>\n","itemtype":"method","name":"hasKey","params":[{"name":"key","description":"<p>that you want to look up</p>\n","type":"Number|String"}],"return":{"description":"whether that key exists in Dictionary","type":"Boolean"},"example":["\n<div class=\"norender\">\n<code>\nfunction setup() {\n  let myDictionary = createStringDict('p5', 'js');\n  print(myDictionary.hasKey('p5')); // logs true to console\n}\n</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":144,"description":"<p>Returns the value stored at the given key.</p>\n","itemtype":"method","name":"get","params":[{"name":"the","description":"<p>key you want to access</p>\n","type":"Number|String"}],"return":{"description":"the value stored at that key","type":"Number|String"},"example":["\n<div class=\"norender\">\n<code>\nfunction setup() {\n  let myDictionary = createStringDict('p5', 'js');\n  let myValue = myDictionary.get('p5');\n  print(myValue === 'js'); // logs true to console\n}\n</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":170,"description":"<p>Updates the value associated with the given key in case it already exists\nin the Dictionary. Otherwise a new key-value pair is added.</p>\n","itemtype":"method","name":"set","params":[{"name":"key","description":"","type":"Number|String"},{"name":"value","description":"","type":"Number|String"}],"example":["\n<div class=\"norender\">\n<code>\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</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":197,"description":"<p>private helper function to handle the user passing in objects\nduring construction or calls to create()</p>\n","class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":208,"description":"<p>Creates a new key-value pair in the Dictionary.</p>\n","itemtype":"method","name":"create","example":["\n<div class=\"norender\">\n<code>\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</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary","overloads":[{"line":208,"params":[{"name":"key","description":"","type":"Number|String"},{"name":"value","description":"","type":"Number|String"}]},{"line":226,"params":[{"name":"obj","description":"<p>key/value pair</p>\n","type":"Object"}]}]},{"file":"src/data/p5.TypedDict.js","line":244,"description":"<p>Removes all previously stored key-value pairs from the Dictionary.</p>\n","itemtype":"method","name":"clear","example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":265,"description":"<p>Removes the key-value pair stored at the given key from the Dictionary.</p>\n","itemtype":"method","name":"remove","params":[{"name":"key","description":"<p>for the pair to remove</p>\n","type":"Number|String"}],"example":["\n<div class=\"norender\">\n<code>\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</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":294,"description":"<p>Logs the set of items currently stored in the Dictionary to the console.</p>\n","itemtype":"method","name":"print","example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":318,"description":"<p>Converts the Dictionary into a CSV file for local download.</p>\n","itemtype":"method","name":"saveTable","example":["\n<div>\n<code>\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</code>\n</div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":356,"description":"<p>Converts the Dictionary into a JSON file for local download.</p>\n","itemtype":"method","name":"saveJSON","example":["\n<div>\n<code>\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</code>\n</div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":387,"description":"<p>private helper function to ensure that the user passed in valid\nvalues for the Dictionary type</p>\n","class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":425,"description":"<p>private helper function to ensure that the user passed in valid\nvalues for the Dictionary type</p>\n","class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":432,"description":"<p>Add the given number to the value currently stored at the given key.\nThe sum then replaces the value previously stored in the Dictionary.</p>\n","itemtype":"method","name":"add","params":[{"name":"Key","description":"<p>for the value you wish to add to</p>\n","type":"Number"},{"name":"Number","description":"<p>to add to the value</p>\n","type":"Number"}],"example":["\n<div class='norender'>\n<code>\nfunction setup() {\n  let myDictionary = createNumberDict(2, 5);\n  myDictionary.add(2, 2);\n  print(myDictionary.get(2)); // logs 7 to console.\n}\n</code></div>\n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":459,"description":"<p>Subtract the given number from the value currently stored at the given key.\nThe difference then replaces the value previously stored in the Dictionary.</p>\n","itemtype":"method","name":"sub","params":[{"name":"Key","description":"<p>for the value you wish to subtract from</p>\n","type":"Number"},{"name":"Number","description":"<p>to subtract from the value</p>\n","type":"Number"}],"example":["\n<div class='norender'>\n<code>\nfunction setup() {\n  let myDictionary = createNumberDict(2, 5);\n  myDictionary.sub(2, 2);\n  print(myDictionary.get(2)); // logs 3 to console.\n}\n</code></div>\n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":482,"description":"<p>Multiply the given number with the value currently stored at the given key.\nThe product then replaces the value previously stored in the Dictionary.</p>\n","itemtype":"method","name":"mult","params":[{"name":"Key","description":"<p>for value you wish to multiply</p>\n","type":"Number"},{"name":"Amount","description":"<p>to multiply the value by</p>\n","type":"Number"}],"example":["\n<div class='norender'>\n<code>\nfunction setup() {\n  let myDictionary = createNumberDict(2, 4);\n  myDictionary.mult(2, 2);\n  print(myDictionary.get(2)); // logs 8 to console.\n}\n</code></div>\n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":509,"description":"<p>Divide the given number with the value currently stored at the given key.\nThe quotient then replaces the value previously stored in the Dictionary.</p>\n","itemtype":"method","name":"div","params":[{"name":"Key","description":"<p>for value you wish to divide</p>\n","type":"Number"},{"name":"Amount","description":"<p>to divide the value by</p>\n","type":"Number"}],"example":["\n<div class='norender'>\n<code>\nfunction setup() {\n  let myDictionary = createNumberDict(2, 8);\n  myDictionary.div(2, 2);\n  print(myDictionary.get(2)); // logs 4 to console.\n}\n</code></div>\n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":536,"description":"<p>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'</p>\n","class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":560,"description":"<p>Return the lowest number currently stored in the Dictionary.</p>\n","itemtype":"method","name":"minValue","return":{"description":"","type":"Number"},"example":["\n<div class='norender'>\n<code>\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</code></div>"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":580,"description":"<p>Return the highest number currently stored in the Dictionary.</p>\n","itemtype":"method","name":"maxValue","return":{"description":"","type":"Number"},"example":["\n<div class='norender'>\n<code>\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</code></div>"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":600,"description":"<p>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'</p>\n","class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":622,"description":"<p>Return the lowest key currently used in the Dictionary.</p>\n","itemtype":"method","name":"minKey","return":{"description":"","type":"Number"},"example":["\n<div class='norender'>\n<code>\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</code></div>"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":642,"description":"<p>Return the highest key currently used in the Dictionary.</p>\n","itemtype":"method","name":"maxKey","return":{"description":"","type":"Number"},"example":["\n<div class='norender'>\n<code>\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</code></div>"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/dom/dom.js","line":21,"description":"<p>Searches the page for the first element that matches the given CSS selector string (can be an\nID, class, tag name or a combination) and returns it as a <a href=\"#/p5.Element\">p5.Element</a>.\nThe DOM node itself can be accessed with .elt.\nReturns null if none found. You can also specify a container to search within.</p>\n","itemtype":"method","name":"select","params":[{"name":"selectors","description":"<p>CSS selector string of element to search for</p>\n","type":"String"},{"name":"container","description":"<p>CSS selector string, <a href=\"#/p5.Element\">p5.Element</a>, or\n                                            HTML element to search within</p>\n","type":"String|p5.Element|HTMLElement","optional":true}],"return":{"description":"<a href=\"#/p5.Element\">p5.Element</a> containing node found","type":"p5.Element|null"},"example":["\n<div><code>\nfunction setup() {\n  createCanvas(50, 50);\n  background(30);\n  // move canvas down and right\n  select('canvas').position(10, 30);\n}\n</code></div>\n\n<div class=\"norender\"><code>\n// select using ID\nlet a = select('#container');\nlet b = select('#beep', '#container');\nlet c;\nif (a) {\n  // select using class\n  c = select('.boop', a);\n}\n// select using CSS selector string\nlet d = select('#container #bleep');\nlet e = select('#container p');\n[a, b, c, d, e]; // unused\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":68,"description":"<p>Searches the page for elements that match the given CSS selector string (can be an ID a class,\ntag name or a combination) and returns them as <a href=\"#/p5.Element\">p5.Element</a>s in\nan array.\nThe DOM node itself can be accessed with .elt.\nReturns an empty array if none found.\nYou can also specify a container to search within.</p>\n","itemtype":"method","name":"selectAll","params":[{"name":"selectors","description":"<p>CSS selector string of elements to search for</p>\n","type":"String"},{"name":"container","description":"<p>CSS selector string, <a href=\"#/p5.Element\">p5.Element</a>\n                                            , or HTML element to search within</p>\n","type":"String|p5.Element|HTMLElement","optional":true}],"return":{"description":"Array of <a href=\"#/p5.Element\">p5.Element</a>s containing nodes found","type":"p5.Element[]"},"example":["\n<div><code>\nfunction setup() {\n  createButton('btn');\n  createButton('2nd btn');\n  createButton('3rd btn');\n  let buttons = selectAll('button');\n\n  for (let i = 0; i < 3; i++) {\n    buttons[i].size(100);\n    buttons[i].position(0, i * 30);\n  }\n}\n</code></div>\n<div><code>\n// these are all valid calls to selectAll()\nlet a = selectAll('.beep');\na = selectAll('div');\na = selectAll('button', '#container');\n\nlet b = createDiv();\nb.id('container');\nlet c = select('#container');\na = selectAll('p', c);\na = selectAll('#container p');\n\nlet d = document.getElementById('container');\na = selectAll('.boop', d);\na = selectAll('#container .boop');\nconsole.log(a);\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":127,"description":"<p>Helper function for select and selectAll</p>\n","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":142,"description":"<p>Helper function for getElement and getElements.</p>\n","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":176,"description":"<p>Removes all elements created by p5, except any canvas / graphics\nelements created by <a href=\"#/p5/createCanvas\">createCanvas</a> or <a href=\"#/p5/createGraphics\">createGraphics</a>.\nEvent handlers are removed, and element is removed from the DOM.</p>\n","itemtype":"method","name":"removeElements","example":["\n<div><code>\nfunction setup() {\n  createCanvas(100, 100);\n  background('grey');\n  let div = createDiv('this is some text');\n  let p = createP('this is a paragraph');\n  div.style('font-size', '16px');\n  p.style('font-size', '16px');\n}\nfunction mousePressed() {\n  removeElements(); // this will remove the div and p, not canvas\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":204,"description":"<p>The .<a href=\"#/p5.Element/changed\">changed()</a> function is called when the value of an\nelement changes.\nThis can be used to attach an element specific event listener.</p>\n","itemtype":"method","name":"changed","params":[{"name":"fxn","description":"<p>function to be fired when the value of\n                               an element changes.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div><code>\nlet sel;\n\nfunction setup() {\n  textAlign(CENTER);\n  background(200);\n  sel = createSelect();\n  sel.position(10, 10);\n  sel.option('pear');\n  sel.option('kiwi');\n  sel.option('grape');\n  sel.changed(mySelectEvent);\n}\n\nfunction mySelectEvent() {\n  let item = sel.value();\n  background(200);\n  text(\"it's a \" + item + '!', 50, 50);\n}\n</code></div>\n\n<div><code>\nlet checkbox;\nlet cnv;\n\nfunction setup() {\n  checkbox = createCheckbox(' fill');\n  checkbox.changed(changeFill);\n  cnv = createCanvas(100, 100);\n  cnv.position(0, 30);\n  noFill();\n}\n\nfunction draw() {\n  background(200);\n  ellipse(50, 50, 50, 50);\n}\n\nfunction changeFill() {\n  if (checkbox.checked()) {\n    fill(0);\n  } else {\n    noFill();\n  }\n}\n</code></div>"],"alt":"dropdown: pear, kiwi, grape. When selected text \"its a\" + selection shown.","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":271,"description":"<p>The .<a href=\"#/p5.Element/input\">input()</a> function is called when any user input is\ndetected with an element. The input event is often used\nto detect keystrokes in a input element, or changes on a\nslider element. This can be used to attach an element specific\nevent listener.</p>\n","itemtype":"method","name":"input","params":[{"name":"fxn","description":"<p>function to be fired when any user input is\n                               detected within the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div><code>\n// Open your console to see the output\nfunction setup() {\n  createCanvas(100, 100);\n  background('grey');\n  let inp = createInput('');\n  inp.position(0, 0);\n  inp.size(100);\n  inp.input(myInputEvent);\n}\n\nfunction myInputEvent() {\n  console.log('you are typing: ', this.value());\n}\n</code></div>"],"alt":"no display.","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":309,"description":"<p>Helpers for create methods.</p>\n","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":322,"description":"<p>Creates a <code>&lt;div&gt;&lt;/div&gt;</code> element in the DOM with given inner HTML.</p>\n","itemtype":"method","name":"createDiv","params":[{"name":"html","description":"<p>inner HTML for element created</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet div = createDiv('this is some text');\ndiv.style('font-size', '16px');\ndiv.position(10, 0);\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":341,"description":"<p>Creates a <code>&lt;p&gt;&lt;/p&gt;</code> element in the DOM with given inner HTML. Used\nfor paragraph length text.</p>\n","itemtype":"method","name":"createP","params":[{"name":"html","description":"<p>inner HTML for element created</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet p = createP('this is some text');\np.style('font-size', '16px');\np.position(10, 0);\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":361,"description":"<p>Creates a <code>&lt;span&gt;&lt;/span&gt;</code> element in the DOM with given inner HTML.</p>\n","itemtype":"method","name":"createSpan","params":[{"name":"html","description":"<p>inner HTML for element created</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet span = createSpan('this is some text');\nspan.position(0, 0);\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":379,"description":"<p>Creates an <code>&lt;img&gt;</code> element in the DOM with given src and\nalternate text.</p>\n","itemtype":"method","name":"createImg","return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n <div><code>\nlet img = createImg(\n  'https://p5js.org/assets/img/asterisk-01.png',\n  'the p5 magenta asterisk'\n);\nimg.position(0, -10);\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":379,"params":[{"name":"src","description":"<p>src path or url for image</p>\n","type":"String"},{"name":"alt","description":"<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#Attributes\">alternate text</a> to be used if image does not load. You can use also an empty string (<code>\"\"</code>) if that an image is not intended to be viewed.</p>\n","type":"String"}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}},{"line":396,"params":[{"name":"src","description":"","type":"String"},{"name":"alt","description":"","type":"String"},{"name":"crossOrigin","description":"<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes\">crossOrigin property</a> of the <code>img</code> element; use either 'anonymous' or 'use-credentials' to retrieve the image with cross-origin access (for later use with <code>canvas</code>. if an empty string(<code>\"\"</code>) is passed, CORS is not used</p>\n","type":"String"},{"name":"successCallback","description":"<p>callback to be called once image data is loaded with the <a href=\"#/p5.Element\">p5.Element</a> as argument</p>\n","type":"Function","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":426,"description":"<p>Creates an <code>&lt;a&gt;&lt;/a&gt;</code> element in the DOM for including a hyperlink.</p>\n","itemtype":"method","name":"createA","params":[{"name":"href","description":"<p>url of page to link to</p>\n","type":"String"},{"name":"html","description":"<p>inner html of link element to display</p>\n","type":"String"},{"name":"target","description":"<p>target where new link should open,\n                            could be _blank, _self, _parent, _top.</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet a = createA('http://p5js.org/', 'this is a link');\na.position(0, 0);\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":450,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":452,"description":"<p>Creates a slider <code>&lt;input&gt;&lt;/input&gt;</code> element in the DOM.\nUse .size() to set the display length of the slider.</p>\n","itemtype":"method","name":"createSlider","params":[{"name":"min","description":"<p>minimum value of the slider</p>\n","type":"Number"},{"name":"max","description":"<p>maximum value of the slider</p>\n","type":"Number"},{"name":"value","description":"<p>default value of the slider</p>\n","type":"Number","optional":true},{"name":"step","description":"<p>step size for each tick of the slider (if step is set to 0, the slider will move continuously from the minimum to the maximum value)</p>\n","type":"Number","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet slider;\nfunction setup() {\n  slider = createSlider(0, 255, 100);\n  slider.position(10, 10);\n  slider.style('width', '80px');\n}\n\nfunction draw() {\n  let val = slider.value();\n  background(val);\n}\n</code></div>\n\n<div><code>\nlet slider;\nfunction setup() {\n  colorMode(HSB);\n  slider = createSlider(0, 360, 60, 40);\n  slider.position(10, 10);\n  slider.style('width', '80px');\n}\n\nfunction draw() {\n  let val = slider.value();\n  background(val, 100, 100, 1);\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":507,"description":"<p>Creates a <code>&lt;button&gt;&lt;/button&gt;</code> element in the DOM.\nUse .size() to set the display size of the button.\nUse .mousePressed() to specify behavior on press.</p>\n","itemtype":"method","name":"createButton","params":[{"name":"label","description":"<p>label displayed on the button</p>\n","type":"String"},{"name":"value","description":"<p>value of the button</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet button;\nfunction setup() {\n  createCanvas(100, 100);\n  background(0);\n  button = createButton('click me');\n  button.position(0, 0);\n  button.mousePressed(changeBG);\n}\n\nfunction changeBG() {\n  let val = random(255);\n  background(val);\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":541,"description":"<p>Creates a checkbox <code>&lt;input&gt;&lt;/input&gt;</code> element in the DOM.\nCalling .checked() on a checkbox returns if it is checked or not</p>\n","itemtype":"method","name":"createCheckbox","params":[{"name":"label","description":"<p>label displayed after checkbox</p>\n","type":"String","optional":true},{"name":"value","description":"<p>value of the checkbox; checked is true, unchecked is false</p>\n","type":"Boolean","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet checkbox;\n\nfunction setup() {\n  checkbox = createCheckbox('label', false);\n  checkbox.changed(myCheckedEvent);\n}\n\nfunction myCheckedEvent() {\n  if (this.checked()) {\n    console.log('Checking!');\n  } else {\n    console.log('Unchecking!');\n  }\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":609,"description":"<p>Creates a dropdown menu <code>&lt;select&gt;&lt;/select&gt;</code> element in the DOM.\nIt also helps to assign select-box methods to <a href=\"#/p5.Element\">p5.Element</a> when selecting existing select box.</p>\n<ul>\n<li><code>.option(name, [value])</code> can be used to set options for the select after it is created.</li>\n<li><code>.value()</code> will return the currently selected option.</li>\n<li><code>.selected()</code> will return current dropdown element which is an instance of <a href=\"#/p5.Element\">p5.Element</a></li>\n<li><code>.selected(value)</code> can be used to make given option selected by default when the page first loads.</li>\n<li><code>.disable()</code> marks whole of dropdown element as disabled.</li>\n<li><code>.disable(value)</code> marks given option as disabled</li>\n</ul>\n","itemtype":"method","name":"createSelect","return":{"description":"","type":"p5.Element"},"example":["\n<div><code>\nlet sel;\n\nfunction setup() {\n  textAlign(CENTER);\n  background(200);\n  sel = createSelect();\n  sel.position(10, 10);\n  sel.option('pear');\n  sel.option('kiwi');\n  sel.option('grape');\n  sel.selected('kiwi');\n  sel.changed(mySelectEvent);\n}\n\nfunction mySelectEvent() {\n  let item = sel.value();\n  background(200);\n  text('It is a ' + item + '!', 50, 50);\n}\n</code></div>\n\n<div><code>\nlet sel;\n\nfunction setup() {\n  textAlign(CENTER);\n  background(200);\n  sel = createSelect();\n  sel.position(10, 10);\n  sel.option('oil');\n  sel.option('milk');\n  sel.option('bread');\n  sel.disable('milk');\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":609,"params":[{"name":"multiple","description":"<p>true if dropdown should support multiple selections</p>\n","type":"Boolean","optional":true}],"return":{"description":"","type":"p5.Element"}},{"line":660,"params":[{"name":"existing","description":"<p>DOM select element</p>\n","type":"Object"}],"return":{"description":"","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":757,"description":"<p>Creates a radio button element in the DOM.It also helps existing radio buttons\nassign methods of <a href=\"#/p5.Element/\">p5.Element</a>.</p>\n<ul>\n<li><code>.option(value, [label])</code> can be used to create a new option for the\nelement. If an option with a value already exists, it will be returned.\nOptionally, a label can be provided as second argument for the option.</li>\n<li><code>.remove(value)</code> can be used to remove an option for the element.</li>\n<li><code>.value()</code> method will return the currently selected value.</li>\n<li><code>.selected()</code> method will return the currently selected input element.</li>\n<li><code>.selected(value)</code> method will select the option and return it.</li>\n<li><code>.disable(Boolean)</code> method will enable/disable the whole radio button element.</li>\n</ul>\n","itemtype":"method","name":"createRadio","return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet radio;\n\nfunction setup() {\n  radio = createRadio();\n  radio.option('black');\n  radio.option('white');\n  radio.option('gray');\n  radio.style('width', '60px');\n  textAlign(CENTER);\n  fill(255, 0, 0);\n}\n\nfunction draw() {\n  let val = radio.value();\n  background(val);\n  text(val, width / 2, height / 2);\n}\n</code></div>\n<div><code>\nlet radio;\n\nfunction setup() {\n  radio = createRadio();\n  radio.option(1, 'apple');\n  radio.option(2, 'bread');\n  radio.option(3, 'juice');\n  radio.style('width', '30px');\n  textAlign(CENTER);\n}\n\nfunction draw() {\n  background(200);\n  let val = radio.value();\n  if (val) {\n    text('item cost is $' + val, width / 2, height / 2);\n  }\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":757,"params":[{"name":"containerElement","description":"<p>An container HTML Element either a div\nor span inside which all existing radio inputs will be considered as options.</p>\n","type":"Object"},{"name":"name","description":"<p>A name parameter for each Input Element.</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}},{"line":815,"params":[{"name":"name","description":"","type":"String"}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}},{"line":820,"params":[],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":935,"description":"<p>Creates a colorPicker element in the DOM for color input.\nThe .value() method will return a hex string (#rrggbb) of the color.\nThe .color() method will return a p5.Color object with the current chosen color.</p>\n","itemtype":"method","name":"createColorPicker","params":[{"name":"value","description":"<p>default color of element</p>\n","type":"String|p5.Color","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet colorPicker;\nfunction setup() {\n  createCanvas(100, 100);\n  colorPicker = createColorPicker('#ed225d');\n  colorPicker.position(0, height + 5);\n}\n\nfunction draw() {\n  background(colorPicker.color());\n}\n</code></div>\n<div><code>\nlet inp1, inp2;\nfunction setup() {\n  createCanvas(100, 100);\n  background('grey');\n  inp1 = createColorPicker('#ff0000');\n  inp1.position(0, height + 5);\n  inp1.input(setShade1);\n  inp2 = createColorPicker(color('yellow'));\n  inp2.position(0, height + 30);\n  inp2.input(setShade2);\n  setMidShade();\n}\n\nfunction setMidShade() {\n  // Finding a shade between the two\n  let commonShade = lerpColor(inp1.color(), inp2.color(), 0.5);\n  fill(commonShade);\n  rect(20, 20, 60, 60);\n}\n\nfunction setShade1() {\n  setMidShade();\n  console.log('You are choosing shade 1 to be : ', this.value());\n}\nfunction setShade2() {\n  setMidShade();\n  console.log('You are choosing shade 2 to be : ', this.value());\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1023,"description":"<p>Creates an <code>&lt;input&gt;&lt;/input&gt;</code> element in the DOM for text input.\nUse .<a href=\"#/p5.Element/size\">size()</a> to set the display length of the box.</p>\n","itemtype":"method","name":"createInput","return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nfunction setup() {\n  createCanvas(100, 100);\n  background('grey');\n  let inp = createInput('');\n  inp.position(0, 0);\n  inp.size(100);\n  inp.input(myInputEvent);\n}\n\nfunction myInputEvent() {\n  console.log('you are typing: ', this.value());\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":1023,"params":[{"name":"value","description":"<p>default value of the input box</p>\n","type":"String"},{"name":"type","description":"<p>type of text, ie text, password etc. Defaults to text.\n  Needs a value to be specified first.</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}},{"line":1048,"params":[{"name":"value","description":"","type":"String","optional":true}],"return":{"description":"","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":1061,"description":"<p>Creates an <code>&lt;input&gt;&lt;/input&gt;</code> element in the DOM of type 'file'.\nThis allows users to select local files for use in a sketch.</p>\n","itemtype":"method","name":"createFileInput","params":[{"name":"callback","description":"<p>callback function for when a file is loaded</p>\n","type":"Function"},{"name":"multiple","description":"<p>optional, to allow multiple files to be selected</p>\n","type":"Boolean","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created DOM element","type":"p5.Element"},"example":["\n<div><code>\nlet input;\nlet img;\n\nfunction setup() {\n  input = createFileInput(handleFile);\n  input.position(0, 0);\n}\n\nfunction draw() {\n  background(255);\n  if (img) {\n    image(img, 0, 0, width, height);\n  }\n}\n\nfunction handleFile(file) {\n  print(file);\n  if (file.type === 'image') {\n    img = createImg(file.data, '');\n    img.hide();\n  } else {\n    img = null;\n  }\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1121,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1168,"description":"<p>Creates an HTML5 <code>&lt;video&gt;</code> element in the DOM for simple playback\nof audio/video. Shown by default, can be hidden with .<a href=\"#/p5.Element/hide\">hide()</a>\nand drawn into canvas using <a href=\"#/p5/image\">image()</a>. The first parameter\ncan be either a single string path to a video file, or an array of string\npaths to different formats of the same video. This is useful for ensuring\nthat your video can play across different browsers, as each supports\ndifferent formats. See <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats'>this\npage</a> for further information about supported formats.</p>\n","itemtype":"method","name":"createVideo","params":[{"name":"src","description":"<p>path to a video file, or array of paths for\n                            supporting different browsers</p>\n","type":"String|String[]"},{"name":"callback","description":"<p>callback function to be called upon\n                            'canplaythrough' event fire, that is, when the\n                            browser can play the media, and estimates that\n                            enough data has been loaded to play the media\n                            up to its end without having to stop for\n                            further buffering of content</p>\n","type":"Function","optional":true}],"return":{"description":"pointer to video <a href=\"#/p5.Element\">p5.Element</a>","type":"p5.MediaElement"},"example":["\n<div><code>\nlet vid;\nfunction setup() {\n  noCanvas();\n\n  vid = createVideo(\n    ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm'],\n    vidLoad\n  );\n\n  vid.size(100, 100);\n}\n\n// This function is called when the video loads\nfunction vidLoad() {\n  vid.loop();\n  vid.volume(0);\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1214,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1216,"description":"<p>Creates a hidden HTML5 <code>&lt;audio&gt;</code> element in the DOM for simple audio\nplayback. The first parameter can be either a single string path to a\naudio file, or an array of string paths to different formats of the same\naudio. This is useful for ensuring that your audio can play across\ndifferent browsers, as each supports different formats.\nSee <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats'>this\npage for further information about supported formats</a>.</p>\n","itemtype":"method","name":"createAudio","params":[{"name":"src","description":"<p>path to an audio file, or array of paths\n                            for supporting different browsers</p>\n","type":"String|String[]","optional":true},{"name":"callback","description":"<p>callback function to be called upon\n                            'canplaythrough' event fire, that is, when the\n                            browser can play the media, and estimates that\n                            enough data has been loaded to play the media\n                            up to its end without having to stop for\n                            further buffering of content</p>\n","type":"Function","optional":true}],"return":{"description":"pointer to audio <a href=\"#/p5.Element\">p5.Element</a>","type":"p5.MediaElement"},"example":["\n<div><code>\nlet ele;\nfunction setup() {\n  ele = createAudio('assets/beat.mp3');\n\n  // here we set the element to autoplay\n  // The element will play as soon\n  // as it is able to do so.\n  ele.autoplay(true);\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1253,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1255,"itemtype":"property","name":"VIDEO","type":"String","final":1,"category":["Constants"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1261,"itemtype":"property","name":"AUDIO","type":"String","final":1,"category":["Constants"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1298,"description":"<p>Creates a new HTML5 <code>&lt;video&gt;</code> element that contains the audio/video feed\nfrom a webcam. The element is separate from the canvas and is displayed by\ndefault. The element can be hidden using .<a href=\"#/p5.Element/hide\">hide()</a>.\nThe feed can be drawn onto the canvas using <a href=\"#/p5/image\">image()</a>.\nThe loadedmetadata property can be used to detect when the element has fully\nloaded (see second example).</p>\n<p>More specific properties of the feed can be passing in a Constraints object.\nSee the <a href='http://w3c.github.io/mediacapture-main/getusermedia.html#media-track-constraints'>\nW3C spec</a> for possible properties. Note that not all of these are supported\nby all browsers.</p>\n<p><em>Security note</em>: A new browser security specification requires that\ngetUserMedia, which is behind <a href=\"#/p5/createCapture\">createCapture()</a>,\nonly works when you're running the code locally, or on HTTPS. Learn more\n<a href='http://stackoverflow.com/questions/34197653/getusermedia-in-chrome-47-without-using-https'>here</a>\nand <a href='https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia'>here</a>.</p>\n","itemtype":"method","name":"createCapture","params":[{"name":"type","description":"<p>type of capture, either VIDEO or\n                                  AUDIO if none specified, default both,\n                                  or a Constraints object</p>\n","type":"String|Constant|Object"},{"name":"callback","description":"<p>function to be called once\n                                  stream has loaded</p>\n","type":"Function","optional":true}],"return":{"description":"capture video <a href=\"#/p5.Element\">p5.Element</a>","type":"p5.Element"},"example":["\n<div class='notest'>\n<code>\nlet capture;\n\nfunction setup() {\n  createCanvas(100, 100);\n  capture = createCapture(VIDEO);\n  capture.hide();\n}\n\nfunction draw() {\n  image(capture, 0, 0, width, width * capture.height / capture.width);\n  filter(INVERT);\n}\n</code>\n</div>\n\n<div class='notest'>\n<code>\nfunction setup() {\n  createCanvas(480, 120);\n  let constraints = {\n    video: {\n      mandatory: {\n        minWidth: 1280,\n        minHeight: 720\n      },\n      optional: [{ maxFrameRate: 10 }]\n    },\n    audio: true\n  };\n  createCapture(constraints, function(stream) {\n    console.log(stream);\n  });\n}\n</code>\n</div>\n<div class='notest'>\n<code>\nlet capture;\n\nfunction setup() {\n  createCanvas(640, 480);\n  capture = createCapture(VIDEO);\n}\nfunction draw() {\n  background(0);\n  if (capture.loadedmetadata) {\n    let c = capture.get(0, 0, 100, 100);\n    image(c, 0, 0);\n  }\n}\n</code>\n</div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1435,"description":"<p>Creates element with given tag in the DOM with given content.</p>\n","itemtype":"method","name":"createElement","params":[{"name":"tag","description":"<p>tag for the new element</p>\n","type":"String"},{"name":"content","description":"<p>html content to be inserted into the element</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet h5 = createElement('h5', 'im an h5 p5.element!');\nh5.style('color', '#00a1d3');\nh5.position(0, 0);\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1461,"description":"<p>Adds specified class to the element.</p>\n","itemtype":"method","name":"addClass","params":[{"name":"class","description":"<p>name of class to add</p>\n","type":"String"}],"chainable":1,"example":["\n <div class='norender'><code>\n let div = createDiv('div');\n div.addClass('myClass');\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1486,"description":"<p>Removes specified class from the element.</p>\n","itemtype":"method","name":"removeClass","params":[{"name":"class","description":"<p>name of class to remove</p>\n","type":"String"}],"chainable":1,"example":["\n <div class='norender'><code>\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.\nlet div;\nfunction setup() {\n   div = createDiv('div');\n   div.addClass('myClass');\n }\nfunction mousePressed() {\n   div.removeClass('myClass');\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1517,"description":"<p>Checks if specified class already set to element</p>\n","itemtype":"method","name":"hasClass","return":{"description":"a boolean value if element has specified class","type":"Boolean"},"params":[{"name":"c","description":"<p>class name of class to check</p>\n","type":"String"}],"example":["\n <div class='norender'><code>\n let div;\nfunction setup() {\n   div = createDiv('div');\n   div.addClass('show');\n }\nfunction mousePressed() {\n   if (div.hasClass('show')) {\n     div.addClass('show');\n   } else {\n     div.removeClass('show');\n   }\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1546,"description":"<p>Toggles element class</p>\n","itemtype":"method","name":"toggleClass","params":[{"name":"c","description":"<p>class name to toggle</p>\n","type":"String"}],"chainable":1,"example":["\n <div class='norender'><code>\n let div;\nfunction setup() {\n   div = createDiv('div');\n   div.addClass('show');\n }\nfunction mousePressed() {\n   div.toggleClass('show');\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1579,"description":"<p>Attaches the element  as a child to the parent specified.\n Accepts either a string ID, DOM node, or <a href=\"#/p5.Element\">p5.Element</a>.\n If no argument is specified, an array of children DOM nodes is returned.</p>\n","itemtype":"method","name":"child","return":{"description":"an array of child nodes","type":"Node[]"},"example":["\n <div class='norender'><code>\n let div0 = createDiv('this is the parent');\n let div1 = createDiv('this is the child');\n div0.child(div1); // use p5.Element\n </code></div>\n <div class='norender'><code>\n let div0 = createDiv('this is the parent');\n let div1 = createDiv('this is the child');\n div1.id('apples');\n div0.child('apples'); // use id\n </code></div>\n <div class='norender notest'><code>\n // this example assumes there is a div already on the page\n // with id \"myChildDiv\"\n let div0 = createDiv('this is the parent');\n let elt = document.getElementById('myChildDiv');\n div0.child(elt); // use element from page\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1579,"params":[],"return":{"description":"an array of child nodes","type":"Node[]"}},{"line":1607,"params":[{"name":"child","description":"<p>the ID, DOM node, or <a href=\"#/p5.Element\">p5.Element</a>\n                        to add to the current element</p>\n","type":"String|p5.Element","optional":true}],"chainable":1}]},{"file":"src/dom/dom.js","line":1632,"description":"<p>Centers a p5 Element either vertically, horizontally,\nor both, relative to its parent or according to\nthe body if the Element has no parent. If no argument is passed\nthe Element is aligned both vertically and horizontally.</p>\n","itemtype":"method","name":"center","params":[{"name":"align","description":"<p>passing 'vertical', 'horizontal' aligns element accordingly</p>\n","type":"String","optional":true}],"chainable":1,"example":["\n<div><code>\nfunction setup() {\n  let div = createDiv('').size(10, 10);\n  div.style('background-color', 'orange');\n  div.center();\n}\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1683,"description":"<p>If an argument is given, sets the inner HTML of the element,\n replacing any existing html. If true is included as a second\n argument, html is appended instead of replacing existing html.\n If no arguments are given, returns\n the inner HTML of the element.</p>\n","itemtype":"method","name":"html","return":{"description":"the inner HTML of the element","type":"String"},"example":["\n <div class='norender'><code>\n let div = createDiv('').size(100, 100);\n div.html('hi');\n </code></div>\n <div class='norender'><code>\n let div = createDiv('Hello ').size(100, 100);\n div.html('World', true);\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1683,"params":[],"return":{"description":"the inner HTML of the element","type":"String"}},{"line":1704,"params":[{"name":"html","description":"<p>the HTML to be placed inside the element</p>\n","type":"String","optional":true},{"name":"append","description":"<p>whether to append HTML to existing</p>\n","type":"Boolean","optional":true}],"chainable":1}]},{"file":"src/dom/dom.js","line":1722,"description":"<p>Sets the position of the element. If no position type argument is given, the\n position will be relative to (0, 0) of the window.\n Essentially, this sets position:absolute and left and top\n properties of style. If an optional third argument specifying position type is given,\n the x and y coordinates will be interpreted based on the <a target=\"_blank\"\n href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/position\">positioning scheme</a>.\n If no arguments given, the function returns the x and y position of the element.\nfound documentation on how to be more specific with object type\n <a href=\"https://stackoverflow.com/questions/14714314/how-do-i-comment-object-literals-in-yuidoc\">https://stackoverflow.com/questions/14714314/how-do-i-comment-object-literals-in-yuidoc</a></p>\n","itemtype":"method","name":"position","return":{"description":"object of form { x: 0, y: 0 } containing the position of the element in an object","type":"Object"},"example":["\n <div><code class='norender'>\n function setup() {\n   let cnv = createCanvas(100, 100);\n   // positions canvas 50px to the right and 100px\n   // below upper left corner of the window\n   cnv.position(50, 100);\n }\n </code></div>\n <div><code class='norender'>\n function setup() {\n   let cnv = createCanvas(100, 100);\n   // positions canvas 50px to the right and 100px\n   // below upper left corner of the window\n   cnv.position(0, 0, 'fixed');\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1722,"params":[],"return":{"description":"object of form { x: 0, y: 0 } containing the position of the element in an object","type":"Object"}},{"line":1755,"params":[{"name":"x","description":"<p>x-position relative to upper left of window (optional)</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>y-position relative to upper left of window (optional)</p>\n","type":"Number","optional":true},{"name":"positionType","description":"<p>it can be static, fixed, relative, sticky, initial or inherit (optional)</p>\n","type":"String"}],"chainable":1}]},{"file":"src/dom/dom.js","line":1842,"description":"<p>Sets the given style (css) property (1st arg) of the element with the\ngiven value (2nd arg). If a single argument is given, .style()\nreturns the value of the given property; however, if the single argument\nis given in css syntax ('text-align:center'), .style() sets the css\nappropriately.</p>\n","itemtype":"method","name":"style","return":{"description":"value of property","type":"String"},"example":["\n<div><code class='norender'>\nlet myDiv = createDiv('I like pandas.');\nmyDiv.style('font-size', '18px');\nmyDiv.style('color', '#ff0000');\nmyDiv.position(0, 0);\n</code></div>\n<div><code class='norender'>\nlet col = color(25, 23, 200, 50);\nlet button = createButton('button');\nbutton.style('background-color', col);\nbutton.position(0, 0);\n</code></div>\n<div><code class='norender'>\nlet myDiv, fontSize;\nfunction setup() {\n  background(200);\n  myDiv = createDiv('I like gray.');\n  myDiv.position(0, 0);\n  myDiv.style('z-index', 10);\n}\n\nfunction draw() {\n  fontSize = min(mouseX, 90);\n  myDiv.style('font-size', fontSize + 'px');\n}\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1842,"params":[{"name":"property","description":"<p>property to be set</p>\n","type":"String"}],"return":{"description":"value of property","type":"String"}},{"line":1880,"params":[{"name":"property","description":"","type":"String"},{"name":"value","description":"<p>value to assign to property</p>\n","type":"String|p5.Color"}],"chainable":1,"return":{"description":"current value of property, if no value is given as second argument","type":"String"}}]},{"file":"src/dom/dom.js","line":1937,"description":"<p>Adds a new attribute or changes the value of an existing attribute\n on the specified element. If no value is specified, returns the\n value of the given attribute, or null if attribute is not set.</p>\n","itemtype":"method","name":"attribute","return":{"description":"value of attribute","type":"String"},"example":["\n <div class='norender'><code>\n let myDiv = createDiv('I like pandas.');\n myDiv.attribute('align', 'center');\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1937,"params":[],"return":{"description":"value of attribute","type":"String"}},{"line":1952,"params":[{"name":"attr","description":"<p>attribute to set</p>\n","type":"String"},{"name":"value","description":"<p>value to assign to attribute</p>\n","type":"String"}],"chainable":1}]},{"file":"src/dom/dom.js","line":1981,"description":"<p>Removes an attribute on the specified element.</p>\n","itemtype":"method","name":"removeAttribute","params":[{"name":"attr","description":"<p>attribute to remove</p>\n","type":"String"}],"chainable":1,"example":["\n <div><code>\n let button;\n let checkbox;\nfunction setup() {\n   checkbox = createCheckbox('enable', true);\n   checkbox.changed(enableButton);\n   button = createButton('button');\n   button.position(10, 10);\n }\nfunction enableButton() {\n   if (this.checked()) {\n     // Re-enable the button\n     button.removeAttribute('disabled');\n   } else {\n     // Disable the button\n     button.attribute('disabled', '');\n   }\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2026,"description":"<p>Either returns the value of the element if no arguments\ngiven, or sets the value of the element.</p>\n","itemtype":"method","name":"value","return":{"description":"value of the element","type":"String|Number"},"example":["\n<div class='norender'><code>\n// gets the value\nlet inp;\nfunction setup() {\n  inp = createInput('');\n}\n\nfunction mousePressed() {\n  print(inp.value());\n}\n</code></div>\n<div class='norender'><code>\n// sets the value\nlet inp;\nfunction setup() {\n  inp = createInput('myValue');\n}\n\nfunction mousePressed() {\n  inp.value('myValue');\n}\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":2026,"params":[],"return":{"description":"value of the element","type":"String|Number"}},{"line":2056,"params":[{"name":"value","description":"","type":"String|Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":2072,"description":"<p>Shows the current element. Essentially, setting display:block for the style.</p>\n","itemtype":"method","name":"show","chainable":1,"example":["\n <div class='norender'><code>\n let div = createDiv('div');\n div.style('display', 'none');\n div.show(); // turns display to block\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2090,"description":"<p>Hides the current element. Essentially, setting display:none for the style.</p>\n","itemtype":"method","name":"hide","chainable":1,"example":["\n<div class='norender'><code>\nlet div = createDiv('this is a div');\ndiv.hide();\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2106,"description":"<p>Sets the width and height of the element. AUTO can be used to\n only adjust one dimension at a time. If no arguments are given, it\n returns the width and height of the element in an object. In case of\n elements which need to be loaded, such as images, it is recommended\n to call the function after the element has finished loading.</p>\n","itemtype":"method","name":"size","return":{"description":"the width and height of the element in an object","type":"Object"},"example":["\n <div class='norender'><code>\n let div = createDiv('this is a div');\n div.size(100, 100);\n let img = createImg(\n   'assets/rockies.jpg',\n   'A tall mountain with a small forest and field in front of it on a sunny day',\n   '',\n   () => {\n     img.size(10, AUTO);\n   }\n );\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":2106,"params":[],"return":{"description":"the width and height of the element in an object","type":"Object"}},{"line":2130,"params":[{"name":"w","description":"<p>width of the element, either AUTO, or a number</p>\n","type":"Number|Constant"},{"name":"h","description":"<p>height of the element, either AUTO, or a number</p>\n","type":"Number|Constant","optional":true}],"chainable":1}]},{"file":"src/dom/dom.js","line":2187,"description":"<p>Removes the element, stops all media streams, and deregisters all listeners.</p>\n","itemtype":"method","name":"remove","example":["\n<div class='norender'><code>\nlet myDiv = createDiv('this is some text');\nmyDiv.remove();\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2225,"description":"<p>Registers a callback that gets called every time a file that is\ndropped on the element has been loaded.\np5 will load every dropped file into memory and pass it as a p5.File object to the callback.\nMultiple files dropped at the same time will result in multiple calls to the callback.</p>\n<p>You can optionally pass a second callback which will be registered to the raw\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/Events/drop\">drop</a> event.\nThe callback will thus be provided the original\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/DragEvent\">DragEvent</a>.\nDropping multiple files at the same time will trigger the second callback once per drop,\nwhereas the first callback will trigger for each loaded file.</p>\n","itemtype":"method","name":"drop","params":[{"name":"callback","description":"<p>callback to receive loaded file, called for each file dropped.</p>\n","type":"Function"},{"name":"fxn","description":"<p>callback triggered once when files are dropped with the drop event.</p>\n","type":"Function","optional":true}],"chainable":1,"example":["\n<div><code>\nfunction setup() {\n  let c = createCanvas(100, 100);\n  background(200);\n  textAlign(CENTER);\n  text('drop file', width / 2, height / 2);\n  c.drop(gotFile);\n}\n\nfunction gotFile(file) {\n  background(200);\n  text('received file:', width / 2, height / 2);\n  text(file.name, width / 2, height / 2 + 50);\n}\n</code></div>\n\n<div><code>\nlet img;\n\nfunction setup() {\n  let c = createCanvas(100, 100);\n  background(200);\n  textAlign(CENTER);\n  text('drop image', width / 2, height / 2);\n  c.drop(gotFile);\n}\n\nfunction draw() {\n  if (img) {\n    image(img, 0, 0, width, height);\n  }\n}\n\nfunction gotFile(file) {\n  img = createImg(file.data, '').hide();\n}\n</code></div>"],"alt":"Canvas turns into whatever image is dragged/dropped onto it.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2357,"description":"<p>Path to the media element source.</p>\n","itemtype":"property","name":"src","return":{"description":"src","type":"String"},"example":["\n<div><code>\nlet ele;\n\nfunction setup() {\n  background(250);\n\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n\n  //In this example we create\n  //a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/beat.mp3');\n\n  //We'll set up our example so that\n  //when you click on the text,\n  //an alert box displays the MediaElement's\n  //src field.\n  textAlign(CENTER);\n  text('Click Me!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    //Show our p5.MediaElement's src field\n    alert(ele.src);\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2423,"description":"<p>Play an HTML5 media element.</p>\n","itemtype":"method","name":"play","chainable":1,"example":["\n<div><code>\nlet ele;\n\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n\n  //In this example we create\n  //a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/beat.mp3');\n\n  background(250);\n  textAlign(CENTER);\n  text('Click to Play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    //Here we call the play() function on\n    //the p5.MediaElement we created above.\n    //This will start the audio sample.\n    ele.play();\n\n    background(200);\n    text('You clicked Play!', width / 2, height / 2);\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2487,"description":"<p>Stops an HTML5 media element (sets current time to zero).</p>\n","itemtype":"method","name":"stop","chainable":1,"example":["\n<div><code>\n//This example both starts\n//and stops a sound sample\n//when the user clicks the canvas\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\n\n//while our audio is playing,\n//this will be set to true\nlet sampleIsPlaying = false;\n\nfunction setup() {\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/beat.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    background(200);\n\n    if (sampleIsPlaying) {\n      //if the sample is currently playing\n      //calling the stop() function on\n      //our p5.MediaElement will stop\n      //it and reset its current\n      //time to 0 (i.e. it will start\n      //at the beginning the next time\n      //you play it)\n      ele.stop();\n\n      sampleIsPlaying = false;\n      text('Click to play!', width / 2, height / 2);\n    } else {\n      //loop our sound element until we\n      //call ele.stop() on it.\n      ele.loop();\n\n      sampleIsPlaying = true;\n      text('Click to stop!', width / 2, height / 2);\n    }\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2551,"description":"<p>Pauses an HTML5 media element.</p>\n","itemtype":"method","name":"pause","chainable":1,"example":["\n<div><code>\n//This example both starts\n//and pauses a sound sample\n//when the user clicks the canvas\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\n\n//while our audio is playing,\n//this will be set to true\nlet sampleIsPlaying = false;\n\nfunction setup() {\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    background(200);\n\n    if (sampleIsPlaying) {\n      //Calling pause() on our\n      //p5.MediaElement will stop it\n      //playing, but when we call the\n      //loop() or play() functions\n      //the sample will start from\n      //where we paused it.\n      ele.pause();\n\n      sampleIsPlaying = false;\n      text('Click to resume!', width / 2, height / 2);\n    } else {\n      //loop our sound element until we\n      //call ele.pause() on it.\n      ele.loop();\n\n      sampleIsPlaying = true;\n      text('Click to pause!', width / 2, height / 2);\n    }\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2613,"description":"<p>Set 'loop' to true for an HTML5 media element, and starts playing.</p>\n","itemtype":"method","name":"loop","chainable":1,"example":["\n<div><code>\n//Clicking the canvas will loop\n//the audio sample until the user\n//clicks again to stop it\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\n\n//while our audio is playing,\n//this will be set to true\nlet sampleIsLooping = false;\n\nfunction setup() {\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to loop!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    background(200);\n\n    if (!sampleIsLooping) {\n      //loop our sound element until we\n      //call ele.stop() on it.\n      ele.loop();\n\n      sampleIsLooping = true;\n      text('Click to stop!', width / 2, height / 2);\n    } else {\n      ele.stop();\n\n      sampleIsLooping = false;\n      text('Click to loop!', width / 2, height / 2);\n    }\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2669,"description":"<p>Set 'loop' to false for an HTML5 media element. Element will stop\nwhen it reaches the end.</p>\n","itemtype":"method","name":"noLoop","chainable":1,"example":["\n<div><code>\n//This example both starts\n//and stops loop of sound sample\n//when the user clicks the canvas\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\n//while our audio is playing,\n//this will be set to true\nlet sampleIsPlaying = false;\n\nfunction setup() {\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/beat.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    background(200);\n\n    if (sampleIsPlaying) {\n      ele.noLoop();\n      sampleIsPlaying = false;\n      text('No more Loops!', width / 2, height / 2);\n    } else {\n      ele.loop();\n      sampleIsPlaying = true;\n      text('Click to stop looping!', width / 2, height / 2);\n    }\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2735,"description":"<p>Set HTML5 media element to autoplay or not. If no argument is specified, by\ndefault it will autoplay.</p>\n","itemtype":"method","name":"autoplay","params":[{"name":"shouldAutoplay","description":"<p>whether the element should autoplay</p>\n","type":"Boolean"}],"chainable":1,"example":["\n<div><code>\nlet videoElement;\nfunction setup() {\n  noCanvas();\n  videoElement = createVideo(['assets/small.mp4'], onVideoLoad);\n}\nfunction onVideoLoad() {\n  // The media will play as soon as it is loaded.\n  videoElement.autoplay();\n  videoElement.volume(0);\n  videoElement.size(100, 100);\n}\n</code></div>\n\n<div><code>\nlet videoElement;\nfunction setup() {\n  noCanvas();\n  videoElement = createVideo(['assets/small.mp4'], onVideoLoad);\n}\nfunction onVideoLoad() {\n  // The media will not play untill some explicitly triggered.\n  videoElement.autoplay(false);\n  videoElement.volume(0);\n  videoElement.size(100, 100);\n}\n\nfunction mouseClicked() {\n  videoElement.play();\n}\n</code></div>"],"alt":"An example of a video element which autoplays after it is loaded.\nAn example of a video element which waits for a trigger for playing.","class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2802,"description":"<p>Sets volume for this HTML5 media element. If no argument is given,\nreturns the current volume.</p>\n","itemtype":"method","name":"volume","return":{"description":"current volume","type":"Number"},"example":["\n<div><code>\nlet ele;\nfunction setup() {\n  // p5.MediaElement objects are usually created\n  // by calling the createAudio(), createVideo(),\n  // and createCapture() functions.\n  // In this example we create\n  // a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(250);\n  textAlign(CENTER);\n  text('Click to Play!', width / 2, height / 2);\n}\nfunction mouseClicked() {\n  // Here we call the volume() function\n  // on the sound element to set its volume\n  // Volume must be between 0.0 and 1.0\n  ele.volume(0.2);\n  ele.play();\n  background(200);\n  text('You clicked Play!', width / 2, height / 2);\n}\n</code></div>\n<div><code>\nlet audio;\nlet counter = 0;\n\nfunction loaded() {\n  audio.play();\n}\n\nfunction setup() {\n  audio = createAudio('assets/lucky_dragons.mp3', loaded);\n  textAlign(CENTER);\n}\n\nfunction draw() {\n  if (counter === 0) {\n    background(0, 255, 0);\n    text('volume(0.9)', width / 2, height / 2);\n  } else if (counter === 1) {\n    background(255, 255, 0);\n    text('volume(0.5)', width / 2, height / 2);\n  } else if (counter === 2) {\n    background(255, 0, 0);\n    text('volume(0.1)', width / 2, height / 2);\n  }\n}\n\nfunction mousePressed() {\n  counter++;\n  if (counter === 0) {\n    audio.volume(0.9);\n  } else if (counter === 1) {\n    audio.volume(0.5);\n  } else if (counter === 2) {\n    audio.volume(0.1);\n  } else {\n    counter = 0;\n    audio.volume(0.9);\n  }\n}\n</code>\n</div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM","overloads":[{"line":2802,"params":[],"return":{"description":"current volume","type":"Number"}},{"line":2875,"params":[{"name":"val","description":"<p>volume between 0.0 and 1.0</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":2888,"description":"<p>If no arguments are given, returns the current playback speed of the\nelement. The speed parameter sets the speed where 2.0 will play the\nelement twice as fast, 0.5 will play at half the speed, and -1 will play\nthe element in normal speed in reverse.(Note that not all browsers support\nbackward playback and even if they do, playback might not be smooth.)</p>\n","itemtype":"method","name":"speed","return":{"description":"current playback speed of the element","type":"Number"},"example":["\n<div class='norender notest'><code>\n//Clicking the canvas will loop\n//the audio sample until the user\n//clicks again to stop it\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\nlet button;\n\nfunction setup() {\n  createCanvas(710, 400);\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/beat.mp3');\n  ele.loop();\n  background(200);\n\n  button = createButton('2x speed');\n  button.position(100, 68);\n  button.mousePressed(twice_speed);\n\n  button = createButton('half speed');\n  button.position(200, 68);\n  button.mousePressed(half_speed);\n\n  button = createButton('reverse play');\n  button.position(300, 68);\n  button.mousePressed(reverse_speed);\n\n  button = createButton('STOP');\n  button.position(400, 68);\n  button.mousePressed(stop_song);\n\n  button = createButton('PLAY!');\n  button.position(500, 68);\n  button.mousePressed(play_speed);\n}\n\nfunction twice_speed() {\n  ele.speed(2);\n}\n\nfunction half_speed() {\n  ele.speed(0.5);\n}\n\nfunction reverse_speed() {\n  ele.speed(-1);\n}\n\nfunction stop_song() {\n  ele.stop();\n}\n\nfunction play_speed() {\n  ele.play();\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM","overloads":[{"line":2888,"params":[],"return":{"description":"current playback speed of the element","type":"Number"}},{"line":2960,"params":[{"name":"speed","description":"<p>speed multiplier for element playback</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":2977,"description":"<p>If no arguments are given, returns the current time of the element.\nIf an argument is given the current time of the element is set to it.</p>\n","itemtype":"method","name":"time","return":{"description":"current time (in seconds)","type":"Number"},"example":["\n<div><code>\nlet ele;\nlet beginning = true;\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n\n  //In this example we create\n  //a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(250);\n  textAlign(CENTER);\n  text('start at beginning', width / 2, height / 2);\n}\n\n// this function fires with click anywhere\nfunction mousePressed() {\n  if (beginning === true) {\n    // here we start the sound at the beginning\n    // time(0) is not necessary here\n    // as this produces the same result as\n    // play()\n    ele.play().time(0);\n    background(200);\n    text('jump 2 sec in', width / 2, height / 2);\n    beginning = false;\n  } else {\n    // here we jump 2 seconds into the sound\n    ele.play().time(2);\n    background(250);\n    text('start at beginning', width / 2, height / 2);\n    beginning = true;\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM","overloads":[{"line":2977,"params":[],"return":{"description":"current time (in seconds)","type":"Number"}},{"line":3022,"params":[{"name":"time","description":"<p>time to jump to (in seconds)</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":3036,"description":"<p>Returns the duration of the HTML5 media element.</p>\n","itemtype":"method","name":"duration","return":{"description":"duration","type":"Number"},"example":["\n<div><code>\nlet ele;\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n  //In this example we create\n  //a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/doorbell.mp3');\n  background(250);\n  textAlign(CENTER);\n  text('Click to know the duration!', 10, 25, 70, 80);\n}\nfunction mouseClicked() {\n  ele.play();\n  background(200);\n  //ele.duration dislpays the duration\n  text(ele.duration() + ' seconds', width / 2, height / 2);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3158,"description":"<p>Schedule an event to be called when the audio or video\nelement reaches the end. If the element is looping,\nthis will not be called. The element is passed in\nas the argument to the onended callback.</p>\n","itemtype":"method","name":"onended","params":[{"name":"callback","description":"<p>function to call when the\n                            soundfile has ended. The\n                            media element will be passed\n                            in as the argument to the\n                            callback.</p>\n","type":"Function"}],"chainable":1,"example":["\n<div><code>\nfunction setup() {\n  let audioEl = createAudio('assets/beat.mp3');\n  audioEl.showControls();\n  audioEl.onended(sayDone);\n}\n\nfunction sayDone(elt) {\n  alert('done playing ' + elt.src);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3189,"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3191,"description":"<p>Send the audio output of this element to a specified audioNode or\np5.sound object. If no element is provided, connects to p5's main\noutput. That connection is established when this method is first called.\nAll connections are removed by the .disconnect() method.</p>\n<p>This method is meant to be used with the p5.sound.js addon library.</p>\n","itemtype":"method","name":"connect","params":[{"name":"audioNode","description":"<p>AudioNode from the Web Audio API,\nor an object from the p5.sound library</p>\n","type":"AudioNode|Object"}],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3240,"description":"<p>Disconnect all Web Audio routing, including to main output.\nThis is useful if you want to re-route the output through\naudio effects, for example.</p>\n","itemtype":"method","name":"disconnect","class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3255,"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3257,"description":"<p>Show the default MediaElement controls, as determined by the web browser.</p>\n","itemtype":"method","name":"showControls","example":["\n<div><code>\nlet ele;\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n  //In this example we create\n  //a new p5.MediaElement via createAudio()\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to Show Controls!', 10, 25, 70, 80);\n}\nfunction mousePressed() {\n  ele.showControls();\n  background(200);\n  text('Controls Shown', width / 2, height / 2);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3288,"description":"<p>Hide the default mediaElement controls.</p>\n","itemtype":"method","name":"hideControls","example":["\n<div><code>\nlet ele;\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n  //In this example we create\n  //a new p5.MediaElement via createAudio()\n  ele = createAudio('assets/lucky_dragons.mp3');\n  ele.showControls();\n  background(200);\n  textAlign(CENTER);\n  text('Click to hide Controls!', 10, 25, 70, 80);\n}\nfunction mousePressed() {\n  ele.hideControls();\n  background(200);\n  text('Controls hidden', width / 2, height / 2);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3317,"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3328,"description":"<p>Schedule events to trigger every time a MediaElement\n(audio/video) reaches a playback cue point.</p>\n<p>Accepts a callback function, a time (in seconds) at which to trigger\nthe callback, and an optional parameter for the callback.</p>\n<p>Time will be passed as the first parameter to the callback function,\nand param will be the second parameter.</p>\n","itemtype":"method","name":"addCue","params":[{"name":"time","description":"<p>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.</p>\n","type":"Number"},{"name":"callback","description":"<p>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.</p>\n","type":"Function"},{"name":"value","description":"<p>An object to be passed as the\n                            second parameter to the\n                            callback function.</p>\n","type":"Object","optional":true}],"return":{"description":"id ID of this cue,\n                    useful for removeCue(id)","type":"Number"},"example":["\n<div><code>\n//\n//\nfunction setup() {\n  createCanvas(200, 200);\n\n  let audioEl = createAudio('assets/beat.mp3');\n  audioEl.showControls();\n\n  // schedule three calls to changeBackground\n  audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\n  audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\n  audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\n  audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\n  audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\n  audioEl.addCue(5.0, changeBackground, color(255, 255, 0));\n}\n\nfunction changeBackground(val) {\n  background(val);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3391,"description":"<p>Remove a callback based on its ID. The ID is returned by the\naddCue method.</p>\n","itemtype":"method","name":"removeCue","params":[{"name":"id","description":"<p>ID of the cue, as returned by addCue</p>\n","type":"Number"}],"example":["\n<div><code>\nlet audioEl, id1, id2;\nfunction setup() {\n  background(255, 255, 255);\n  audioEl = createAudio('assets/beat.mp3');\n  audioEl.showControls();\n  // schedule five calls to changeBackground\n  id1 = audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\n  audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\n  audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\n  audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\n  id2 = audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\n  text('Click to remove first and last Cue!', 10, 25, 70, 80);\n}\nfunction mousePressed() {\n  audioEl.removeCue(id1);\n  audioEl.removeCue(id2);\n}\nfunction changeBackground(val) {\n  background(val);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3433,"description":"<p>Remove all of the callbacks that had originally been scheduled\nvia the addCue method.</p>\n","itemtype":"method","name":"clearCues","params":[{"name":"id","description":"<p>ID of the cue, as returned by addCue</p>\n","type":"Number"}],"example":["\n<div><code>\nlet audioEl;\nfunction setup() {\n  background(255, 255, 255);\n  audioEl = createAudio('assets/beat.mp3');\n  //Show the default MediaElement controls, as determined by the web browser\n  audioEl.showControls();\n  // schedule calls to changeBackground\n  background(200);\n  text('Click to change Cue!', 10, 25, 70, 80);\n  audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\n  audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\n  audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\n  audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\n  audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\n}\nfunction mousePressed() {\n  // here we clear the scheduled callbacks\n  audioEl.clearCues();\n  // then we add some more callbacks\n  audioEl.addCue(1, changeBackground, color(2, 2, 2));\n  audioEl.addCue(3, changeBackground, color(255, 255, 0));\n}\nfunction changeBackground(val) {\n  background(val);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3499,"description":"<p>Underlying File object. All normal File methods can be called on this.</p>\n","itemtype":"property","name":"file","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3511,"description":"<p>File type (image, text, etc.)</p>\n","itemtype":"property","name":"type","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3517,"description":"<p>File subtype (usually the file extension jpg, png, xml, etc.)</p>\n","itemtype":"property","name":"subtype","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3523,"description":"<p>File name</p>\n","itemtype":"property","name":"name","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3529,"description":"<p>File size</p>\n","itemtype":"property","name":"size","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3536,"description":"<p>URL string containing either image data, the text contents of the file or\na parsed object if file is JSON and p5.XML if XML</p>\n","itemtype":"property","name":"data","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/events/acceleration.js","line":11,"description":"<p>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.</p>\n","itemtype":"property","name":"deviceOrientation","type":"Constant","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":23,"description":"<p>The system variable accelerationX always contains the acceleration of the\ndevice along the x axis. Value is represented as meters per second squared.</p>\n","itemtype":"property","name":"accelerationX","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"Magnitude of device acceleration is displayed as ellipse size","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":46,"description":"<p>The system variable accelerationY always contains the acceleration of the\ndevice along the y axis. Value is represented as meters per second squared.</p>\n","itemtype":"property","name":"accelerationY","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"Magnitude of device acceleration is displayed as ellipse size","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":69,"description":"<p>The system variable accelerationZ always contains the acceleration of the\ndevice along the z axis. Value is represented as meters per second squared.</p>\n","itemtype":"property","name":"accelerationZ","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"Magnitude of device acceleration is displayed as ellipse size","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":94,"description":"<p>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.</p>\n","itemtype":"property","name":"pAccelerationX","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":104,"description":"<p>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.</p>\n","itemtype":"property","name":"pAccelerationY","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":114,"description":"<p>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.</p>\n","itemtype":"property","name":"pAccelerationZ","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":135,"description":"<p>The system variable rotationX always contains the rotation of the\ndevice along the x axis. If the sketch <a href=\"#/p5/angleMode\">\nangleMode()</a> is set to DEGREES, the value will be -180 to 180. If\nit is set to RADIANS, the value will be -PI to PI.</p>\n<p>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.</p>\n","itemtype":"property","name":"rotationX","type":"Number","readonly":"","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  //rotateZ(radians(rotationZ));\n  rotateX(radians(rotationX));\n  //rotateY(radians(rotationY));\n  box(200, 200, 200);\n}\n</code>\n</div>"],"alt":"red horizontal line right, green vertical line bottom. black background.","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":168,"description":"<p>The system variable rotationY always contains the rotation of the\ndevice along the y axis. If the sketch <a href=\"#/p5/angleMode\">\nangleMode()</a> 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.</p>\n<p>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.</p>\n","itemtype":"property","name":"rotationY","type":"Number","readonly":"","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  //rotateZ(radians(rotationZ));\n  //rotateX(radians(rotationX));\n  rotateY(radians(rotationY));\n  box(200, 200, 200);\n}\n</code>\n</div>"],"alt":"red horizontal line right, green vertical line bottom. black background.","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":201,"description":"<p>The system variable rotationZ always contains the rotation of the\ndevice along the z axis. If the sketch <a href=\"#/p5/angleMode\">\nangleMode()</a> 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.</p>\n<p>Unlike rotationX and rotationY, this variable is available for devices\nwith a built-in compass only.</p>\n<p>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.</p>\n","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  rotateZ(radians(rotationZ));\n  //rotateX(radians(rotationX));\n  //rotateY(radians(rotationY));\n  box(200, 200, 200);\n}\n</code>\n</div>"],"itemtype":"property","name":"rotationZ","type":"Number","readonly":"","alt":"red horizontal line right, green vertical line bottom. black background.","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":239,"description":"<p>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 <a href=\"#/p5/angleMode\"> angleMode()</a> is set to DEGREES,\nthe value will be -180 to 180. If it is set to RADIANS, the value will\nbe -PI to PI.</p>\n<p>pRotationX can also be used with rotationX to determine the rotate\ndirection of the device along the X-axis.</p>\n","example":["\n<div class='norender'>\n<code>\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);\n</code>\n</div>"],"alt":"no image to display.","itemtype":"property","name":"pRotationX","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":285,"description":"<p>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 <a href=\"#/p5/angleMode\"> angleMode()</a> 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.</p>\n<p>pRotationY can also be used with rotationY to determine the rotate\ndirection of the device along the Y-axis.</p>\n","example":["\n<div class='norender'>\n<code>\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);\n</code>\n</div>"],"alt":"no image to display.","itemtype":"property","name":"pRotationY","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":330,"description":"<p>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 <a href=\"#/p5/angleMode\"> angleMode()</a> 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.</p>\n<p>pRotationZ can also be used with rotationZ to determine the rotate\ndirection of the device along the Z-axis.</p>\n","example":["\n<div class='norender'>\n<code>\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);\n</code>\n</div>"],"alt":"no image to display.","itemtype":"property","name":"pRotationZ","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":389,"description":"<p>When a device is rotated, the axis that triggers the <a href=\"#/p5/deviceTurned\">deviceTurned()</a>\nmethod is stored in the turnAxis variable. The turnAxis variable is only defined within\nthe scope of deviceTurned().</p>\n","itemtype":"property","name":"turnAxis","type":"String","readonly":"","example":["\n<div>\n<code>\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}\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</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device turns\n50x50 black rect in center of canvas. turns white on mobile when x-axis turns","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":428,"description":"<p>The <a href=\"#/p5/setMoveThreshold\">setMoveThreshold()</a> function is used to set the movement threshold for\nthe <a href=\"#/p5/deviceMoved\">deviceMoved()</a> function. The default threshold is set to 0.5.</p>\n","itemtype":"method","name":"setMoveThreshold","params":[{"name":"value","description":"<p>The threshold value</p>\n","type":"Number"}],"example":["\n<div class=\"norender\">\n<code>\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}\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</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device moves","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":471,"description":"<p>The <a href=\"#/p5/setShakeThreshold\">setShakeThreshold()</a> function is used to set the movement threshold for\nthe <a href=\"#/p5/deviceShaken\">deviceShaken()</a> function. The default threshold is set to 30.</p>\n","itemtype":"method","name":"setShakeThreshold","params":[{"name":"value","description":"<p>The threshold value</p>\n","type":"Number"}],"example":["\n<div class=\"norender\">\n<code>\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}\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</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device\nis being shaked","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":515,"description":"<p>The <a href=\"#/p5/deviceMoved\">deviceMoved()</a> 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 <a href=\"https://p5js.org/reference/#/p5/setMoveThreshold\">setMoveThreshold()</a>.</p>\n","itemtype":"method","name":"deviceMoved","example":["\n<div class=\"norender\">\n<code>\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}\nfunction deviceMoved() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device moves","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":546,"description":"<p>The <a href=\"#/p5/deviceTurned\">deviceTurned()</a> function is called when the device rotates by\nmore than 90 degrees continuously.</p>\n<p>The axis that triggers the <a href=\"#/p5/deviceTurned\">deviceTurned()</a> method is stored in the turnAxis\nvariable. The <a href=\"#/p5/deviceTurned\">deviceTurned()</a> method can be locked to trigger on any axis:\nX, Y or Z by comparing the turnAxis variable to 'X', 'Y' or 'Z'.</p>\n","itemtype":"method","name":"deviceTurned","example":["\n<div class=\"norender\">\n<code>\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}\nfunction deviceTurned() {\n  if (value === 0) {\n    value = 255;\n  } else if (value === 255) {\n    value = 0;\n  }\n}\n</code>\n</div>\n<div>\n<code>\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}\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</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device turns\n50x50 black rect in center of canvas. turns white on mobile when x-axis turns","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":604,"description":"<p>The <a href=\"#/p5/deviceShaken\">deviceShaken()</a> 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 <a href=\"https://p5js.org/reference/#/p5/setShakeThreshold\">setShakeThreshold()</a>.</p>\n","itemtype":"method","name":"deviceShaken","example":["\n<div class=\"norender\">\n<code>\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}\nfunction deviceShaken() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device shakes","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/keyboard.js","line":10,"description":"<p>The boolean system variable <a href=\"#/p5/keyIsPressed\">keyIsPressed</a> is true if any key is pressed\nand false if no keys are pressed.</p>\n","itemtype":"property","name":"keyIsPressed","type":"Boolean","readonly":"","example":["\n<div>\n<code>\nfunction draw() {\n  if (keyIsPressed === true) {\n    fill(0);\n  } else {\n    fill(255);\n  }\n  rect(25, 25, 50, 50);\n}\n</code>\n</div>"],"alt":"50x50 white rect that turns black on keypress.","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":36,"description":"<p>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 <a href=\"#/p5/keyTyped\">keyTyped()</a>. For non-ASCII keys, use the <a href=\"#/p5/keyCode\">keyCode</a>\nvariable.</p>\n","itemtype":"property","name":"key","type":"String","readonly":"","example":["\n<div><code>\n// Click any key to display it!\n// (Not Guaranteed to be Case Sensitive)\nfunction setup() {\n  fill(245, 123, 158);\n  textSize(50);\n}\n\nfunction draw() {\n  background(200);\n  text(key, 33, 65); // Display last key pressed.\n}\n</code></div>"],"alt":"canvas displays any key value that is pressed in pink font.","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":64,"description":"<p>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: <a href=\"http://keycode.info/\">keycode.info</a>.</p>\n","itemtype":"property","name":"keyCode","type":"Integer","readonly":"","example":["\n<div><code>\nlet fillVal = 126;\nfunction draw() {\n  fill(fillVal);\n  rect(25, 25, 50, 50);\n}\n\nfunction keyPressed() {\n  if (keyCode === UP_ARROW) {\n    fillVal = 255;\n  } else if (keyCode === DOWN_ARROW) {\n    fillVal = 0;\n  }\n}\n</code></div>\n<div><code>\nfunction draw() {}\nfunction keyPressed() {\n  background('yellow');\n  text(`${key} ${keyCode}`, 10, 40);\n  print(key, ' ', keyCode);\n}\n</code></div>"],"alt":"Grey rect center. turns white when up arrow pressed and black when down\nDisplay key pressed and its keyCode in a yellow box","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":103,"description":"<p>The <a href=\"#/p5/keyPressed\">keyPressed()</a> function is called once every time a key is pressed. The\nkeyCode for the key that was pressed is stored in the <a href=\"#/p5/keyCode\">keyCode</a> variable.</p>\n<p>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.</p>\n<p>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 <a href=\"#/p5/keyTyped\">keyTyped()</a> to read the key variable, in which the\ncase of the variable will be distinguished.</p>\n<p>Because of how operating systems handle key repeats, holding down a key\nmay cause multiple calls to <a href=\"#/p5/keyTyped\">keyTyped()</a> (and <a href=\"#/p5/keyReleased\">keyReleased()</a> as well). The\nrate of repeat is set by the operating system and how each computer is\nconfigured.<br><br>\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.</p>\n","itemtype":"method","name":"keyPressed","params":[{"name":"event","description":"<p>optional KeyboardEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyPressed() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyPressed() {\n  if (keyCode === LEFT_ARROW) {\n    value = 255;\n  } else if (keyCode === RIGHT_ARROW) {\n    value = 0;\n  }\n}\n</code>\n</div>\n<div class=\"norender\">\n<code>\nfunction keyPressed() {\n  // Do something\n  return false; // prevent any default behaviour\n}\n</code>\n</div>"],"alt":"black rect center. turns white when key pressed and black when released\nblack rect center. turns white when left arrow pressed and black when right.","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":190,"description":"<p>The <a href=\"#/p5/keyReleased\">keyReleased()</a> function is called once every time a key is released.\nSee <a href=\"#/p5/key\">key</a> and <a href=\"#/p5/keyCode\">keyCode</a> for more information.<br><br>\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.</p>\n","itemtype":"method","name":"keyReleased","params":[{"name":"event","description":"<p>optional KeyboardEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyReleased() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n  return false; // prevent any default behavior\n}\n</code>\n</div>"],"alt":"black rect center. turns white when key pressed and black when pressed again","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":243,"description":"<p>The <a href=\"#/p5/keyTyped\">keyTyped()</a> 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 <a href=\"#/p5/keyPressed\">keyPressed()</a> function instead.\nThe most recent key typed will be stored in the key variable.</p>\n<p>Because of how operating systems handle key repeats, holding down a key\nwill cause multiple calls to <a href=\"#/p5/keyTyped\">keyTyped()</a> (and <a href=\"#/p5/keyReleased\">keyReleased()</a> as well). The\nrate of repeat is set by the operating system and how each computer is\nconfigured.<br><br>\nBrowsers may have different default behaviors attached to various key\nevents. To prevent any default behavior for this event, add \"return false\"\nto the end of the method.</p>\n","itemtype":"method","name":"keyTyped","params":[{"name":"event","description":"<p>optional KeyboardEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyTyped() {\n  if (key === 'a') {\n    value = 255;\n  } else if (key === 'b') {\n    value = 0;\n  }\n  // uncomment to prevent any default behavior\n  // return false;\n}\n</code>\n</div>"],"alt":"black rect center. turns white when 'a' key typed and black when 'b' pressed","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":298,"description":"<p>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.</p>\n","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":308,"description":"<p>The <a href=\"#/p5/keyIsDown\">keyIsDown()</a> 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 <a href=\"#/p5/keyCode\">keyCode</a> names listed\n<a href=\"http://p5js.org/reference/#p5/keyCode\">here</a>.</p>\n","itemtype":"method","name":"keyIsDown","params":[{"name":"code","description":"<p>The key to check for.</p>\n","type":"Number"}],"return":{"description":"whether key is down or not","type":"Boolean"},"example":["\n<div><code>\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}\n</code></div>\n\n<div><code>\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}\n</code></div>"],"alt":"50x50 red ellipse moves left, right, up and down with arrow presses.\n50x50 red ellipse gets bigger or smaller when + or - are pressed.","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/mouse.js","line":12,"description":"<p>The variable movedX contains the horizontal movement of the mouse since the last frame</p>\n","itemtype":"property","name":"movedX","type":"Number","readonly":"","example":["\n <div class=\"notest\">\n <code>\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 }\n </code>\n </div>"],"alt":"box moves left and right according to mouse movement then slowly back towards the center","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":43,"description":"<p>The variable movedY contains the vertical movement of the mouse since the last frame</p>\n","itemtype":"property","name":"movedY","type":"Number","readonly":"","example":["\n<div class=\"notest\">\n<code>\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(y, 50, 50, 50);\n}\n</code>\n</div>"],"alt":"box moves up and down according to mouse movement then slowly back towards the center","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":80,"description":"<p>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.</p>\n","itemtype":"property","name":"mouseX","type":"Number","readonly":"","example":["\n<div>\n<code>\n// Move the mouse across the canvas\nfunction draw() {\n  background(244, 248, 252);\n  line(mouseX, 0, mouseX, 100);\n}\n</code>\n</div>"],"alt":"horizontal black line moves left and right with mouse x-position","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":106,"description":"<p>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.</p>\n","itemtype":"property","name":"mouseY","type":"Number","readonly":"","example":["\n<div>\n<code>\n// Move the mouse across the canvas\nfunction draw() {\n  background(244, 248, 252);\n  line(0, mouseY, 100, mouseY);\n}\n</code>\n</div>"],"alt":"vertical black line moves up and down with mouse y-position","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":132,"description":"<p>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.</p>\n","itemtype":"property","name":"pmouseX","type":"Number","readonly":"","example":["\n<div>\n<code>\n// Move the mouse across the canvas to leave a trail\nfunction setup() {\n  //slow down the frameRate to make it more visible\n  frameRate(10);\n}\n\nfunction draw() {\n  background(244, 248, 252);\n  line(mouseX, mouseY, pmouseX, pmouseY);\n  print(pmouseX + ' -> ' + mouseX);\n}\n</code>\n</div>"],"alt":"line trail is created from cursor movements. faster movement make longer line.","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":164,"description":"<p>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.</p>\n","itemtype":"property","name":"pmouseY","type":"Number","readonly":"","example":["\n<div>\n<code>\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n  //draw a square only if the mouse is not moving\n  if (mouseY === pmouseY && mouseX === pmouseX) {\n    rect(20, 20, 60, 60);\n  }\n\n  print(pmouseY + ' -> ' + mouseY);\n}\n</code>\n</div>"],"alt":"60x60 black rect center, fuchsia background. rect flickers on mouse movement","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":195,"description":"<p>The system variable winMouseX always contains the current horizontal\nposition of the mouse, relative to (0, 0) of the window.</p>\n","itemtype":"property","name":"winMouseX","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"60x60 black rect y moves with mouse y and fuchsia canvas moves with mouse x","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":233,"description":"<p>The system variable winMouseY always contains the current vertical\nposition of the mouse, relative to (0, 0) of the window.</p>\n","itemtype":"property","name":"winMouseY","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"60x60 black rect x moves with mouse x and fuchsia canvas y moves with mouse y","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":271,"description":"<p>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.</p>\n","itemtype":"property","name":"pwinMouseX","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"fuchsia ellipse moves with mouse x and y. Grows and shrinks with mouse speed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":311,"description":"<p>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.</p>\n","itemtype":"property","name":"pwinMouseY","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"fuchsia ellipse moves with mouse x and y. Grows and shrinks with mouse speed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":351,"description":"<p>Processing automatically tracks if the mouse button is pressed and which\nbutton is pressed. The value of the system variable mouseButton is either\nLEFT, RIGHT, or CENTER depending on which button was pressed last.\nWarning: different browsers may track mouseButton differently.</p>\n","itemtype":"property","name":"mouseButton","type":"Constant","readonly":"","example":["\n<div>\n<code>\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n\n  if (mouseIsPressed) {\n    if (mouseButton === LEFT) {\n      ellipse(50, 50, 50, 50);\n    }\n    if (mouseButton === RIGHT) {\n      rect(25, 25, 50, 50);\n    }\n    if (mouseButton === CENTER) {\n      triangle(23, 75, 50, 20, 78, 75);\n    }\n  }\n\n  print(mouseButton);\n}\n</code>\n</div>"],"alt":"50x50 black ellipse appears on center of fuchsia canvas on mouse click/press.","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":389,"description":"<p>The boolean system variable mouseIsPressed is true if the mouse is pressed\nand false if not.</p>\n","itemtype":"property","name":"mouseIsPressed","type":"Boolean","readonly":"","example":["\n<div>\n<code>\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n\n  if (mouseIsPressed) {\n    ellipse(50, 50, 50, 50);\n  } else {\n    rect(25, 25, 50, 50);\n  }\n\n  print(mouseIsPressed);\n}\n</code>\n</div>"],"alt":"black 50x50 rect becomes ellipse with mouse click/press. fuchsia background.","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":481,"description":"<p>The <a href=\"#/p5/mouseMoved\">mouseMoved()</a> function is called every time the mouse moves and a mouse\nbutton is not pressed.<br><br>\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.</p>\n","itemtype":"method","name":"mouseMoved","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction mouseMoved() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mouseMoved() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseMoved(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect becomes lighter with mouse movements until white then resets\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":535,"description":"<p>The <a href=\"#/p5/mouseDragged\">mouseDragged()</a> function is called once every time the mouse moves and\na mouse button is pressed. If no <a href=\"#/p5/mouseDragged\">mouseDragged()</a> function is defined, the\n<a href=\"#/p5/touchMoved\">touchMoved()</a> function will be called instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"mouseDragged","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction mouseDragged() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mouseDragged() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseDragged(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns lighter with mouse click and drag until white, resets\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":615,"description":"<p>The <a href=\"#/p5/mousePressed\">mousePressed()</a> 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\n<a href=\"#/p5/mousePressed\">mousePressed()</a> function is defined, the <a href=\"#/p5/touchStarted\">touchStarted()</a> function will be\ncalled instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"mousePressed","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\n// Click 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}\nfunction mousePressed() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mousePressed() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mousePressed(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns white with mouse click/press.\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":696,"description":"<p>The <a href=\"#/p5/mouseReleased\">mouseReleased()</a> function is called every time a mouse button is\nreleased. If no <a href=\"#/p5/mouseReleased\">mouseReleased()</a> function is defined, the <a href=\"#/p5/touchEnded\">touchEnded()</a>\nfunction will be called instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"mouseReleased","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction mouseReleased() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mouseReleased() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseReleased(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns white with mouse click/press.\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":772,"description":"<p>The <a href=\"#/p5/mouseClicked\">mouseClicked()</a> function is called once after a mouse button has been\npressed and then released.<br><br>\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 <a href=\"#/p5/mousePressed\">mousePressed()</a> or <a href=\"#/p5/mouseReleased\">mouseReleased()</a>.<br><br>\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.</p>\n","itemtype":"method","name":"mouseClicked","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\n\nfunction mouseClicked() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mouseClicked() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseClicked(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns white with mouse click/press.\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":841,"description":"<p>The <a href=\"#/p5/doubleClicked\">doubleClicked()</a> 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:\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/Events/dblclick\">https://developer.mozilla.org/en-US/docs/Web/Events/dblclick</a></p>\n","itemtype":"method","name":"doubleClicked","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\n\nfunction doubleClicked() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction doubleClicked() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction doubleClicked(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns white with mouse doubleClick/press.\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":926,"description":"<p>The function <a href=\"#/p5/mouseWheel\">mouseWheel()</a> is executed every time a vertical mouse wheel\nevent is detected either triggered by an actual mouse wheel or by a\ntouchpad.<br><br>\nThe event.delta property returns the amount the mouse wheel\nhave scrolled. The values can be positive or negative depending on the\nscroll direction (on OS X with \"natural\" scrolling enabled, the signs\nare inverted).<br><br>\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.<br><br>\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.</p>\n","itemtype":"method","name":"mouseWheel","params":[{"name":"event","description":"<p>optional WheelEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\nlet pos = 25;\n\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n  rect(25, pos, 50, 50);\n}\n\nfunction mouseWheel(event) {\n  print(event.delta);\n  //move the square according to the vertical scroll amount\n  pos += event.delta;\n  //uncomment to block page scrolling\n  //return false;\n}\n</code>\n</div>"],"alt":"black 50x50 rect moves up and down with vertical scroll. fuchsia background","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":979,"description":"<p>The function <a href=\"#/p5/requestPointerLock\">requestPointerLock()</a>\nlocks the pointer to its current position and makes it invisible.\nUse <a href=\"#/p5/movedX\">movedX</a> and <a href=\"#/p5/movedY\">movedY</a> 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.</p>\n","itemtype":"method","name":"requestPointerLock","example":["\n<div class=\"notest\">\n<code>\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}\n</code>\n</div>"],"alt":"3D scene moves according to mouse mouse movement in a first person perspective","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":1025,"description":"<p>The function <a href=\"#/p5/exitPointerLock\">exitPointerLock()</a>\nexits a previously triggered <a href=\"#/p5/requestPointerLock\">pointer Lock</a>\nfor example to make ui elements usable etc</p>\n","itemtype":"method","name":"exitPointerLock","example":["\n<div class=\"notest\">\n<code>\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}\nfunction mouseClicked() {\n  if (!locked) {\n    locked = true;\n    requestPointerLock();\n  } else {\n    exitPointerLock();\n    locked = false;\n  }\n}\n</code>\n</div>"],"alt":"cursor gets locked / unlocked on mouse-click","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/touch.js","line":10,"description":"<p>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.</p>\n<p>The touches[] array is not supported on Safari and IE on touch-based\ndesktops (laptops).</p>\n","itemtype":"property","name":"touches","type":"Object[]","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"Number of touches currently registered are displayed on the canvas","class":"p5","module":"Events","submodule":"Touch"},{"file":"src/events/touch.js","line":71,"description":"<p>The touchStarted() function is called once after every time a touch is\nregistered. If no <a href=\"#/p5/touchStarted\">touchStarted()</a> function is defined, the <a href=\"#/p5/mousePressed\">mousePressed()</a>\nfunction will be called instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"touchStarted","params":[{"name":"event","description":"<p>optional TouchEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction touchStarted() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction touchStarted() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a TouchEvent object\n// as a callback argument\nfunction touchStarted(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"50x50 black rect turns white with touch event.\nno image displayed","class":"p5","module":"Events","submodule":"Touch"},{"file":"src/events/touch.js","line":151,"description":"<p>The <a href=\"#/p5/touchMoved\">touchMoved()</a> function is called every time a touch move is registered.\nIf no <a href=\"#/p5/touchMoved\">touchMoved()</a> function is defined, the <a href=\"#/p5/mouseDragged\">mouseDragged()</a> function will\nbe called instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"touchMoved","params":[{"name":"event","description":"<p>optional TouchEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction touchMoved() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction touchMoved() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a TouchEvent object\n// as a callback argument\nfunction touchMoved(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"50x50 black rect turns lighter with touch until white. resets\nno image displayed","class":"p5","module":"Events","submodule":"Touch"},{"file":"src/events/touch.js","line":223,"description":"<p>The <a href=\"#/p5/touchEnded\">touchEnded()</a> function is called every time a touch ends. If no\n<a href=\"#/p5/touchEnded\">touchEnded()</a> function is defined, the <a href=\"#/p5/mouseReleased\">mouseReleased()</a> function will be\ncalled instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"touchEnded","params":[{"name":"event","description":"<p>optional TouchEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction touchEnded() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction touchEnded() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a TouchEvent object\n// as a callback argument\nfunction touchEnded(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"50x50 black rect turns white with touch.\nno image displayed","class":"p5","module":"Events","submodule":"Touch"},{"file":"src/image/filters.js","line":3,"description":"<p>This module defines the filters for use with image buffers.</p>\n<p>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.</p>\n<p>Generally speaking users of this module will use the Filters.apply method\non a canvas to create an effect.</p>\n<p>A number of functions are borrowed/adapted from\n<a href=\"http://www.html5rocks.com/en/tutorials/canvas/imagefilters/\">http://www.html5rocks.com/en/tutorials/canvas/imagefilters/</a>\nor the java processing implementation.</p>\n","class":"p5","module":"Events"},{"file":"src/image/image.js","line":8,"description":"<p>This module defines the p5 methods for the <a href=\"#/p5.Image\">p5.Image</a> class\nfor drawing images to the main display canvas.</p>\n","class":"p5","module":"Image","submodule":"Image"},{"file":"src/image/image.js","line":15,"description":"<p>Creates a new <a href=\"#/p5.Image\">p5.Image</a> (the datatype for storing images). This provides a\nfresh buffer of pixels to play with. Set the size of the buffer with the\nwidth and height parameters.</p>\n<p>.<a href=\"#/p5.Image/pixels\">pixels</a> gives access to an array containing the values for all the pixels\nin the display window.\nThese values are numbers. This array is the size (including an appropriate\nfactor for the <a href=\"#/p5/pixelDensity\">pixelDensity</a>) of the display window x4,\nrepresenting the R, G, B, A values in order for each pixel, moving from\nleft to right across each row, then down each column. See .<a href=\"#/p5.Image/pixels\">pixels</a> for\nmore info. It may also be simpler to use <a href=\"#/p5.Image/set\">set()</a> or <a href=\"#/p5.Image/get\">get()</a>.</p>\n<p>Before accessing the pixels of an image, the data must loaded with the\n<a href=\"#/p5.Image/loadPixels\">loadPixels()</a> function. After the array data has been modified, the\n<a href=\"#/p5.Image/updatePixels\">updatePixels()</a> function must be run to update the changes.</p>\n","itemtype":"method","name":"createImage","params":[{"name":"width","description":"<p>width in pixels</p>\n","type":"Integer"},{"name":"height","description":"<p>height in pixels</p>\n","type":"Integer"}],"return":{"description":"the <a href=\"#/p5.Image\">p5.Image</a> object","type":"p5.Image"},"example":["\n<div>\n<code>\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < img.width; i++) {\n  for (let j = 0; j < img.height; j++) {\n    img.set(i, j, color(0, 90, 102));\n  }\n}\nimg.updatePixels();\nimage(img, 17, 17);\n</code>\n</div>\n\n<div>\n<code>\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < img.width; i++) {\n  for (let j = 0; j < img.height; j++) {\n    img.set(i, j, color(0, 90, 102, (i % img.width) * 2));\n  }\n}\nimg.updatePixels();\nimage(img, 17, 17);\nimage(img, 34, 34);\n</code>\n</div>\n\n<div>\n<code>\nlet pink = color(255, 102, 204);\nlet img = createImage(66, 66);\nimg.loadPixels();\nlet d = pixelDensity();\nlet halfImage = 4 * (img.width * d) * (img.height / 2 * d);\nfor (let i = 0; i < halfImage; i += 4) {\n  img.pixels[i] = red(pink);\n  img.pixels[i + 1] = green(pink);\n  img.pixels[i + 2] = blue(pink);\n  img.pixels[i + 3] = alpha(pink);\n}\nimg.updatePixels();\nimage(img, 17, 17);\n</code>\n</div>"],"alt":"66x66 dark turquoise rect in center of canvas.\n2 gradated dark turquoise rects fade left. 1 center 1 bottom right of canvas\nno image displayed","class":"p5","module":"Image","submodule":"Image"},{"file":"src/image/image.js","line":94,"description":"<p>Save the current canvas as an image. The browser will either save the\nfile immediately, or prompt the user with a dialogue window.</p>\n","itemtype":"method","name":"saveCanvas","example":["\n <div class='norender notest'><code>\n function setup() {\n let c = createCanvas(100, 100);\n background(255, 0, 0);\n saveCanvas(c, 'myCanvas', 'jpg');\n }\n </code></div>\n <div class='norender notest'><code>\n // note that this example has the same result as above\n // if no canvas is specified, defaults to main canvas\n function setup() {\n let c = createCanvas(100, 100);\n background(255, 0, 0);\n saveCanvas('myCanvas', 'jpg');\n\n // all of the following are valid\n saveCanvas(c, 'myCanvas', 'jpg');\n saveCanvas(c, 'myCanvas.jpg');\n saveCanvas(c, 'myCanvas');\n saveCanvas(c);\n saveCanvas('myCanvas', 'png');\n saveCanvas('myCanvas');\n saveCanvas();\n }\n </code></div>"],"alt":"no image displayed\n no image displayed\n no image displayed","class":"p5","module":"Image","submodule":"Image","overloads":[{"line":94,"params":[{"name":"selectedCanvas","description":"<p>a variable\n                                representing a specific html5 canvas (optional)</p>\n","type":"p5.Element|HTMLCanvasElement"},{"name":"filename","description":"","type":"String","optional":true},{"name":"extension","description":"<p>'jpg' or 'png'</p>\n","type":"String","optional":true}]},{"line":136,"params":[{"name":"filename","description":"","type":"String","optional":true},{"name":"extension","description":"","type":"String","optional":true}]}]},{"file":"src/image/image.js","line":413,"description":"<p>Capture a sequence of frames that can be used to create a movie.\nAccepts a callback. For example, you may wish to send the frames\nto a server where they can be stored or converted into a movie.\nIf no callback is provided, the browser will pop up save dialogues in an\nattempt to download all of the images that have just been created. With the\ncallback provided the image data isn't saved by default but instead passed\nas an argument to the callback function as an array of objects, with the\nsize of array equal to the total number of frames.</p>\n<p>Note that <a href=\"#/p5.Image/saveFrames\">saveFrames()</a> will only save the first 15 frames of an animation.\nTo export longer animations, you might look into a library like\n<a href=\"https://github.com/spite/ccapture.js/\">ccapture.js</a>.</p>\n","itemtype":"method","name":"saveFrames","params":[{"name":"filename","description":"","type":"String"},{"name":"extension","description":"<p>'jpg' or 'png'</p>\n","type":"String"},{"name":"duration","description":"<p>Duration in seconds to save the frames for.</p>\n","type":"Number"},{"name":"framerate","description":"<p>Framerate to save the frames in.</p>\n","type":"Number"},{"name":"callback","description":"<p>A callback function that will be executed\n                                to handle the image data. This function\n                                should accept an array as argument. The\n                                array will contain the specified number of\n                                frames of objects. Each object has three\n                                properties: imageData - an\n                                image/octet-stream, filename and extension.</p>\n","type":"Function(Array)","optional":true}],"example":["\n<div><code>\n function draw() {\n background(mouseX);\n }\n\n function mousePressed() {\n saveFrames('out', 'png', 1, 25, data => {\n   print(data);\n });\n }\n</code></div>"],"alt":"canvas background goes from light to dark with mouse x.","class":"p5","module":"Image","submodule":"Image"},{"file":"src/image/loading_displaying.js","line":18,"description":"<p>Loads an image from a path and creates a <a href=\"#/p5.Image\">p5.Image</a> from it.</p>\n<p>The image may not be immediately available for rendering.\nIf you want to ensure that the image is ready before doing\nanything with it, place the <a href=\"#/p5/loadImage\">loadImage()</a> call in <a href=\"#/p5/preload\">preload()</a>.\nYou may also supply a callback function to handle the image when it's ready.</p>\n<p>The path to the image should be relative to the HTML file\nthat links in your sketch. Loading an image from a URL or other\nremote location may be blocked due to your browser's built-in\nsecurity.</p>\n<p>You can also pass in a string of a base64 encoded image as an alternative to the file path.\nRemember to add \"data:image/png;base64,\" in front of the string.</p>\n","itemtype":"method","name":"loadImage","params":[{"name":"path","description":"<p>Path of the image to be loaded</p>\n","type":"String"},{"name":"successCallback","description":"<p>Function to be called once\n                               the image is loaded. Will be passed the\n                               <a href=\"#/p5.Image\">p5.Image</a>.</p>\n","type":"function(p5.Image)","optional":true},{"name":"failureCallback","description":"<p>called with event error if\n                               the image fails to load.</p>\n","type":"Function(Event)","optional":true}],"return":{"description":"the <a href=\"#/p5.Image\">p5.Image</a> object","type":"p5.Image"},"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n}\n</code>\n</div>\n<div>\n<code>\nfunction setup() {\n  // here we use a callback to display the image after loading\n  loadImage('assets/laDefense.jpg', img => {\n    image(img, 0, 0);\n  });\n}\n</code>\n</div>"],"alt":"image of the underside of a white umbrella and grided ceililng above\nimage of the underside of a white umbrella and grided ceililng above","class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/loading_displaying.js","line":162,"description":"<p>Helper function for loading GIF-based images</p>\n","class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/loading_displaying.js","line":269,"description":"<p>Draw an image to the p5.js canvas.</p>\n<p>This function can be used with different numbers of parameters. The\nsimplest use requires only three parameters: img, x, and y—where (x, y) is\nthe position of the image. Two more parameters can optionally be added to\nspecify the width and height of the image.</p>\n<p>This function can also be used with all eight Number parameters. To\ndifferentiate between all these parameters, p5.js uses the language of\n\"destination rectangle\" (which corresponds to \"dx\", \"dy\", etc.) and \"source\nimage\" (which corresponds to \"sx\", \"sy\", etc.) below. Specifying the\n\"source image\" dimensions can be useful when you want to display a\nsubsection of the source image instead of the whole thing. Here's a diagram\nto explain further:\n<img src=\"assets/drawImage.png\"></img></p>\n","itemtype":"method","name":"image","example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  // Top-left corner of the img is at (0, 0)\n  // Width and height are the img's original width and height\n  image(img, 0, 0);\n}\n</code>\n</div>\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  background(50);\n  // Top-left corner of the img is at (10, 10)\n  // Width and height are 50 x 50\n  image(img, 10, 10, 50, 50);\n}\n</code>\n</div>\n<div>\n<code>\nfunction setup() {\n  // Here, we use a callback to display the image after loading\n  loadImage('assets/laDefense.jpg', img => {\n    image(img, 0, 0);\n  });\n}\n</code>\n</div>\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/gradient.png');\n}\nfunction setup() {\n  // 1. Background image\n  // Top-left corner of the img is at (0, 0)\n  // Width and height are the img's original width and height, 100 x 100\n  image(img, 0, 0);\n  // 2. Top right image\n  // Top-left corner of destination rectangle is at (50, 0)\n  // Destination rectangle width and height are 40 x 20\n  // The next parameters are relative to the source image:\n  // - Starting at position (50, 50) on the source image, capture a 50 x 50\n  // subsection\n  // - Draw this subsection to fill the dimensions of the destination rectangle\n  image(img, 50, 0, 40, 20, 50, 50, 50, 50);\n}\n</code>\n</div>"],"alt":"image of the underside of a white umbrella and gridded ceiling above\nimage of the underside of a white umbrella and gridded ceiling above","class":"p5","module":"Image","submodule":"Loading & Displaying","overloads":[{"line":269,"params":[{"name":"img","description":"<p>the image to display</p>\n","type":"p5.Image|p5.Element"},{"name":"x","description":"<p>the x-coordinate of the top-left corner of the image</p>\n","type":"Number"},{"name":"y","description":"<p>the y-coordinate of the top-left corner of the image</p>\n","type":"Number"},{"name":"width","description":"<p>the width to draw the image</p>\n","type":"Number","optional":true},{"name":"height","description":"<p>the height to draw the image</p>\n","type":"Number","optional":true}]},{"line":356,"params":[{"name":"img","description":"","type":"p5.Image|p5.Element"},{"name":"dx","description":"<p>the x-coordinate of the destination\n                          rectangle in which to draw the source image</p>\n","type":"Number"},{"name":"dy","description":"<p>the y-coordinate of the destination\n                          rectangle in which to draw the source image</p>\n","type":"Number"},{"name":"dWidth","description":"<p>the width of the destination rectangle</p>\n","type":"Number"},{"name":"dHeight","description":"<p>the height of the destination rectangle</p>\n","type":"Number"},{"name":"sx","description":"<p>the x-coordinate of the subsection of the source\nimage to draw into the destination rectangle</p>\n","type":"Number"},{"name":"sy","description":"<p>the y-coordinate of the subsection of the source\nimage to draw into the destination rectangle</p>\n","type":"Number"},{"name":"sWidth","description":"<p>the width of the subsection of the\n                          source image to draw into the destination\n                          rectangle</p>\n","type":"Number","optional":true},{"name":"sHeight","description":"<p>the height of the subsection of the\n                           source image to draw into the destination rectangle</p>\n","type":"Number","optional":true}]}]},{"file":"src/image/loading_displaying.js","line":439,"description":"<p>Sets the fill value for displaying images. Images can be tinted to\nspecified colors or made transparent by including an alpha value.</p>\n<p>To apply transparency to an image without affecting its color, use\nwhite as the tint color and specify an alpha value. For instance,\ntint(255, 128) will make an image 50% transparent (assuming the default\nalpha range of 0-255, which can be changed with <a href=\"#/p5/colorMode\">colorMode()</a>).</p>\n<p>The value for the gray parameter must be less than or equal to the current\nmaximum value as specified by <a href=\"#/p5/colorMode\">colorMode()</a>. The default maximum value is\n255.</p>\n","itemtype":"method","name":"tint","example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  tint(0, 153, 204); // Tint blue\n  image(img, 50, 0);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  tint(0, 153, 204, 126); // Tint blue and set transparency\n  image(img, 50, 0);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  tint(255, 126); // Apply transparency without changing color\n  image(img, 50, 0);\n}\n</code>\n</div>"],"alt":"2 side by side images of umbrella and ceiling, one image with blue tint\nImages of umbrella and ceiling, one half of image with blue tint\n2 side by side images of umbrella and ceiling, one image translucent","class":"p5","module":"Image","submodule":"Loading & Displaying","overloads":[{"line":439,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}]},{"line":510,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}]},{"line":515,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}]},{"line":521,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}]},{"line":527,"params":[{"name":"color","description":"<p>the tint color</p>\n","type":"p5.Color"}]}]},{"file":"src/image/loading_displaying.js","line":537,"description":"<p>Removes the current fill value for displaying images and reverts to\ndisplaying images with their original hues.</p>\n","itemtype":"method","name":"noTint","example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  tint(0, 153, 204); // Tint blue\n  image(img, 0, 0);\n  noTint(); // Disable tint\n  image(img, 50, 0);\n}\n</code>\n</div>"],"alt":"2 side by side images of bricks, left image with blue tint","class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/loading_displaying.js","line":601,"description":"<p>Set image mode. Modifies the location from which images are drawn by\nchanging the way in which parameters given to <a href=\"#/p5/image\">image()</a> are interpreted.\nThe default mode is imageMode(CORNER), which interprets the second and\nthird parameters of <a href=\"#/p5/image\">image()</a> as the upper-left corner of the image. If\ntwo additional parameters are specified, they are used to set the image's\nwidth and height.</p>\n<p>imageMode(CORNERS) interprets the second and third parameters of <a href=\"#/p5/image\">image()</a>\nas the location of one corner, and the fourth and fifth parameters as the\nopposite corner.</p>\n<p>imageMode(CENTER) interprets the second and third parameters of <a href=\"#/p5/image\">image()</a>\nas the image's center point. If two additional parameters are specified,\nthey are used to set the image's width and height.</p>\n","itemtype":"method","name":"imageMode","params":[{"name":"mode","description":"<p>either CORNER, CORNERS, or CENTER</p>\n","type":"Constant"}],"example":["\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  imageMode(CORNER);\n  image(img, 10, 10, 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  imageMode(CORNERS);\n  image(img, 10, 10, 90, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  imageMode(CENTER);\n  image(img, 50, 50, 80, 80);\n}\n</code>\n</div>"],"alt":"small square image of bricks\nhorizontal rectangle image of bricks\nlarge square image of bricks","class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/p5.Image.js","line":9,"description":"<p>This module defines the <a href=\"#/p5.Image\">p5.Image</a> class and P5 methods for\ndrawing images to the main display canvas.</p>\n","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":88,"description":"<p>Image width.</p>\n","itemtype":"property","name":"width","type":"Number","readonly":"","example":["\n<div><code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100);\n  image(img, 0, 0);\n  for (let i = 0; i < img.width; i++) {\n    let c = img.get(i, img.height / 2);\n    stroke(c);\n    line(i, height / 2, i, height);\n  }\n}\n</code></div>"],"alt":"rocky mountains in top and horizontal lines in corresponding colors in bottom.","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":115,"description":"<p>Image height.</p>\n","itemtype":"property","name":"height","type":"Number","readonly":"","example":["\n<div><code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100);\n  image(img, 0, 0);\n  for (let i = 0; i < img.height; i++) {\n    let c = img.get(img.width / 2, i);\n    stroke(c);\n    line(0, i, width / 2, i);\n  }\n}\n</code></div>"],"alt":"rocky mountains on right and vertical lines in corresponding colors on left.","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":152,"description":"<p>Array containing the values for all the pixels in the display window.\nThese values are numbers. This array is the size (include an appropriate\nfactor for pixelDensity) of the display window x4,\nrepresenting the R, G, B, A values in order for each pixel, moving from\nleft to right across each row, then down each column. Retina and other\nhigh density displays may have more pixels (by a factor of\npixelDensity^2).\nFor example, if the image is 100x100 pixels, there will be 40,000. With\npixelDensity = 2, there will be 160,000. The first four values\n(indices 0-3) in the array will be the R, G, B, A values of the pixel at\n(0, 0). The second four values (indices 4-7) will contain the R, G, B, A\nvalues of the pixel at (1, 0). More generally, to set values for a pixel\nat (x, y):</p>\n<pre><code class=\"language-javascript\">let d = pixelDensity();\nfor (let i = 0; i < d; i++) {\n  for (let j = 0; j < d; j++) {\n    // loop over\n    index = 4 * ((y * d + j) * width * d + (x * d + i));\n    pixels[index] = r;\n    pixels[index+1] = g;\n    pixels[index+2] = b;\n    pixels[index+3] = a;\n  }\n}</code></pre>\n<p>Before accessing this array, the data must loaded with the <a href=\"#/p5.Image/loadPixels\">loadPixels()</a>\nfunction. After the array data has been modified, the <a href=\"#/p5.Image/updatePixels\">updatePixels()</a>\nfunction must be run to update the changes.</p>\n","itemtype":"property","name":"pixels","type":"Number[]","example":["\n<div>\n<code>\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < img.width; i++) {\n  for (let j = 0; j < img.height; j++) {\n    img.set(i, j, color(0, 90, 102));\n  }\n}\nimg.updatePixels();\nimage(img, 17, 17);\n</code>\n</div>\n<div>\n<code>\nlet pink = color(255, 102, 204);\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < 4 * (width * height / 2); i += 4) {\n  img.pixels[i] = red(pink);\n  img.pixels[i + 1] = green(pink);\n  img.pixels[i + 2] = blue(pink);\n  img.pixels[i + 3] = alpha(pink);\n}\nimg.updatePixels();\nimage(img, 17, 17);\n</code>\n</div>"],"alt":"66x66 turquoise rect in center of canvas\n66x66 pink rect in center of canvas","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":222,"description":"<p>Helper function for animating GIF-based images with time</p>\n","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":253,"description":"<p>Helper fxn for sharing pixel methods</p>\n","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":261,"description":"<p>Loads the pixels data for this image into the [pixels] attribute.</p>\n","itemtype":"method","name":"loadPixels","example":["\n<div><code>\nlet myImage;\nlet halfImage;\n\nfunction preload() {\n  myImage = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  myImage.loadPixels();\n  halfImage = 4 * myImage.width * myImage.height / 2;\n  for (let i = 0; i < halfImage; i++) {\n    myImage.pixels[i + halfImage] = myImage.pixels[i];\n  }\n  myImage.updatePixels();\n}\n\nfunction draw() {\n  image(myImage, 0, 0, width, height);\n}\n</code></div>"],"alt":"2 images of rocky mountains vertically stacked","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":296,"description":"<p>Updates the backing canvas for this image with the contents of\nthe [pixels] array.</p>\n<p>If this image is an animated GIF then the pixels will be updated\nin the frame that is currently displayed.</p>\n","itemtype":"method","name":"updatePixels","example":["\n<div><code>\nlet myImage;\nlet halfImage;\n\nfunction preload() {\n  myImage = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  myImage.loadPixels();\n  halfImage = 4 * myImage.width * myImage.height / 2;\n  for (let i = 0; i < halfImage; i++) {\n    myImage.pixels[i + halfImage] = myImage.pixels[i];\n  }\n  myImage.updatePixels();\n}\n\nfunction draw() {\n  image(myImage, 0, 0, width, height);\n}\n</code></div>"],"alt":"2 images of rocky mountains vertically stacked","class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":296,"params":[{"name":"x","description":"<p>x-offset of the target update area for the\n                             underlying canvas</p>\n","type":"Integer"},{"name":"y","description":"<p>y-offset of the target update area for the\n                             underlying canvas</p>\n","type":"Integer"},{"name":"w","description":"<p>height of the target update area for the\n                             underlying canvas</p>\n","type":"Integer"},{"name":"h","description":"<p>height of the target update area for the\n                             underlying canvas</p>\n","type":"Integer"}]},{"line":338,"params":[]}]},{"file":"src/image/p5.Image.js","line":346,"description":"<p>Get a region of pixels from an image.</p>\n<p>If no params are passed, the whole image is returned.\nIf x and y are the only params passed a single pixel is extracted.\nIf all params are passed a rectangle region is extracted and a <a href=\"#/p5.Image\">p5.Image</a>\nis returned.</p>\n","itemtype":"method","name":"get","return":{"description":"the rectangle <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"},"example":["\n<div><code>\nlet myImage;\nlet c;\n\nfunction preload() {\n  myImage = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  background(myImage);\n  noStroke();\n  c = myImage.get(60, 90);\n  fill(c);\n  rect(25, 25, 50, 50);\n}\n\n//get() returns color here\n</code></div>"],"alt":"image of rocky mountains with 50x50 green rect in front","class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":346,"params":[{"name":"x","description":"<p>x-coordinate of the pixel</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the pixel</p>\n","type":"Number"},{"name":"w","description":"<p>width</p>\n","type":"Number"},{"name":"h","description":"<p>height</p>\n","type":"Number"}],"return":{"description":"the rectangle <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"}},{"line":383,"params":[],"return":{"description":"the whole <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"}},{"line":387,"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/image/p5.Image.js","line":400,"description":"<p>Set the color of a single pixel or write an image into\nthis <a href=\"#/p5.Image\">p5.Image</a>.</p>\n<p>Note that for a large number of pixels this will\nbe slower than directly manipulating the pixels array\nand then calling <a href=\"#/p5.Image/updatePixels\">updatePixels()</a>.</p>\n","itemtype":"method","name":"set","params":[{"name":"x","description":"<p>x-coordinate of the pixel</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the pixel</p>\n","type":"Number"},{"name":"a","description":"<p>grayscale value | pixel array |\n                               a <a href=\"#/p5.Color\">p5.Color</a> | image to copy</p>\n","type":"Number|Number[]|Object"}],"example":["\n<div>\n<code>\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < img.width; i++) {\n  for (let j = 0; j < img.height; j++) {\n    img.set(i, j, color(0, 90, 102, (i % img.width) * 2));\n  }\n}\nimg.updatePixels();\nimage(img, 17, 17);\nimage(img, 34, 34);\n</code>\n</div>"],"alt":"2 gradated dark turquoise rects fade left. 1 center 1 bottom right of canvas","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":437,"description":"<p>Resize the image to a new width and height. To make the image scale\nproportionally, use 0 as the value for the wide or high parameter.\nFor instance, to make the width of an image 150 pixels, and change\nthe height using the same proportion, use resize(150, 0).</p>\n","itemtype":"method","name":"resize","params":[{"name":"width","description":"<p>the resized image width</p>\n","type":"Number"},{"name":"height","description":"<p>the resized image height</p>\n","type":"Number"}],"example":["\n<div><code>\nlet img;\n\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction draw() {\n  image(img, 0, 0);\n}\n\nfunction mousePressed() {\n  img.resize(50, 100);\n}\n</code></div>"],"alt":"image of rocky mountains. zoomed in","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":548,"description":"<p>Copies a region of pixels from one image to another. If no\nsrcImage is specified this is used as the source. If the source\nand destination regions aren't the same size, it will\nautomatically resize source pixels to fit the specified\ntarget region.</p>\n","itemtype":"method","name":"copy","example":["\n<div><code>\nlet photo;\nlet bricks;\nlet x;\nlet y;\n\nfunction preload() {\n  photo = loadImage('assets/rockies.jpg');\n  bricks = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n  x = bricks.width / 2;\n  y = bricks.height / 2;\n  photo.copy(bricks, 0, 0, x, y, 0, 0, x, y);\n  image(photo, 0, 0);\n}\n</code></div>"],"alt":"image of rocky mountains and smaller image on top of bricks at top left","class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":548,"params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image|p5.Element"},{"name":"sx","description":"<p>X coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sy","description":"<p>Y coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sw","description":"<p>source image width</p>\n","type":"Integer"},{"name":"sh","description":"<p>source image height</p>\n","type":"Integer"},{"name":"dx","description":"<p>X coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dy","description":"<p>Y coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dw","description":"<p>destination image width</p>\n","type":"Integer"},{"name":"dh","description":"<p>destination image height</p>\n","type":"Integer"}]},{"line":588,"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":603,"description":"<p>Masks part of an image from displaying by loading another\nimage and using its alpha channel as an alpha channel for\nthis image. Masks are cumulative, one applied to an image\nobject, they cannot be removed.</p>\n","itemtype":"method","name":"mask","params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image"}],"example":["\n<div><code>\nlet photo, maskImage;\nfunction preload() {\n  photo = loadImage('assets/rockies.jpg');\n  maskImage = loadImage('assets/mask2.png');\n}\n\nfunction setup() {\n  createCanvas(100, 100);\n  photo.mask(maskImage);\n  image(photo, 0, 0);\n}\n</code></div>"],"alt":"image of rocky mountains with white at right\n\nhttp://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":665,"description":"<p>Applies an image filter to a <a href=\"#/p5.Image\">p5.Image</a></p>\n<p>THRESHOLD\nConverts the image to black and white pixels depending if they are above or\nbelow the threshold defined by the level parameter. The parameter must be\nbetween 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.</p>\n<p>GRAY\nConverts any colors in the image to grayscale equivalents. No parameter\nis used.</p>\n<p>OPAQUE\nSets the alpha channel to entirely opaque. No parameter is used.</p>\n<p>INVERT\nSets each pixel to its inverse value. No parameter is used.</p>\n<p>POSTERIZE\nLimits each channel of the image to the number of colors specified as the\nparameter. The parameter can be set to values between 2 and 255, but\nresults are most noticeable in the lower ranges.</p>\n<p>BLUR\nExecutes a Gaussian blur with the level parameter specifying the extent\nof the blurring. If no parameter is used, the blur is equivalent to\nGaussian blur of radius 1. Larger values increase the blur.</p>\n<p>ERODE\nReduces the light areas. No parameter is used.</p>\n<p>DILATE\nIncreases the light areas. No parameter is used.</p>\n<p>filter() does not work in WEBGL mode.\nA similar effect can be achieved in WEBGL mode using custom\nshaders. Adam Ferriss has written\na <a href=\"https://github.com/aferriss/p5jsShaderExamples\"\ntarget='_blank'>selection of shader examples</a> that contains many\nof the effects present in the filter examples.</p>\n","itemtype":"method","name":"filter","params":[{"name":"filterType","description":"<p>either THRESHOLD, GRAY, OPAQUE, INVERT,\n                               POSTERIZE, ERODE, DILATE or BLUR.\n                               See Filters.js for docs on\n                               each available filter</p>\n","type":"Constant"},{"name":"filterParam","description":"<p>an optional parameter unique\n                               to each filter, see above</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\nlet photo1;\nlet photo2;\n\nfunction preload() {\n  photo1 = loadImage('assets/rockies.jpg');\n  photo2 = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  photo2.filter(GRAY);\n  image(photo1, 0, 0);\n  image(photo2, width / 2, 0);\n}\n</code></div>"],"alt":"2 images of rocky mountains left one in color, right in black and white","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":738,"description":"<p>Copies a region of pixels from one image to another, using a specified\nblend mode to do the operation.</p>\n","itemtype":"method","name":"blend","example":["\n<div><code>\nlet mountains;\nlet bricks;\n\nfunction preload() {\n  mountains = loadImage('assets/rockies.jpg');\n  bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n  image(mountains, 0, 0);\n  image(bricks, 0, 0);\n}\n</code></div>\n<div><code>\nlet mountains;\nlet bricks;\n\nfunction preload() {\n  mountains = loadImage('assets/rockies.jpg');\n  bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n  image(mountains, 0, 0);\n  image(bricks, 0, 0);\n}\n</code></div>\n<div><code>\nlet mountains;\nlet bricks;\n\nfunction preload() {\n  mountains = loadImage('assets/rockies.jpg');\n  bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n  image(mountains, 0, 0);\n  image(bricks, 0, 0);\n}\n</code></div>"],"alt":"image of rocky mountains. Brick images on left and right. Right overexposed\nimage of rockies. Brickwall images on left and right. Right mortar transparent\nimage of rockies. Brickwall images on left and right. Right translucent","class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":738,"params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image"},{"name":"sx","description":"<p>X coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sy","description":"<p>Y coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sw","description":"<p>source image width</p>\n","type":"Integer"},{"name":"sh","description":"<p>source image height</p>\n","type":"Integer"},{"name":"dx","description":"<p>X coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dy","description":"<p>Y coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dw","description":"<p>destination image width</p>\n","type":"Integer"},{"name":"dh","description":"<p>destination image height</p>\n","type":"Integer"},{"name":"blendMode","description":"<p>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.</p>\n<p>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</p>\n<p><a href=\"http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/\">http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/</a></p>\n","type":"Constant"}]},{"line":815,"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":859,"description":"<p>Saves the image to a file and force the browser to download it.\nAccepts two strings for filename and file extension\nSupports png (default), jpg, and gif\n<br><br>\nNote that the file will only be downloaded as an animated GIF\nif the p5.Image was loaded from a GIF file.</p>\n","itemtype":"method","name":"save","params":[{"name":"filename","description":"<p>give your file a name</p>\n","type":"String"},{"name":"extension","description":"<p>'png' or 'jpg'</p>\n","type":"String"}],"example":["\n<div><code>\nlet photo;\n\nfunction preload() {\n  photo = loadImage('assets/rockies.jpg');\n}\n\nfunction draw() {\n  image(photo, 0, 0);\n}\n\nfunction keyTyped() {\n  if (key === 's') {\n    photo.save('photo', 'png');\n  }\n}\n</code></div>"],"alt":"image of rocky mountains.","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":900,"description":"<p>Starts an animated GIF over at the beginning state.</p>\n","itemtype":"method","name":"reset","example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/arnott-wallace-wink-loop-once.gif');\n}\n\nfunction draw() {\n  background(255);\n  // The GIF file that we loaded only loops once\n  // so it freezes on the last frame after playing through\n  image(gif, 0, 0);\n}\n\nfunction mousePressed() {\n  // Click to reset the GIF and begin playback from start\n  gif.reset();\n}\n</code></div>"],"alt":"Animated image of a cartoon face that winks once and then freezes\nWhen you click it animates again, winks once and freezes","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":941,"description":"<p>Gets the index for the frame that is currently visible in an animated GIF.</p>\n","itemtype":"method","name":"getCurrentFrame","return":{"description":"The index for the currently displaying frame in animated GIF","type":"Number"},"example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\nfunction draw() {\n  let frame = gif.getCurrentFrame();\n  image(gif, 0, 0);\n  text(frame, 10, 90);\n}\n</code></div>"],"alt":"Animated image of a cartoon eye looking around and then\nlooking outwards, in the lower-left hand corner a number counts\nup quickly to 124 and then starts back over at 0","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":972,"description":"<p>Sets the index of the frame that is currently visible in an animated GIF</p>\n","itemtype":"method","name":"setFrame","params":[{"name":"index","description":"<p>the index for the frame that should be displayed</p>\n","type":"Number"}],"example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\n// Move your mouse up and down over canvas to see the GIF\n// frames animate\nfunction draw() {\n  gif.pause();\n  image(gif, 0, 0);\n  // Get the highest frame number which is the number of frames - 1\n  let maxFrame = gif.numFrames() - 1;\n  // Set the current frame that is mapped to be relative to mouse position\n  let frameNumber = floor(map(mouseY, 0, height, 0, maxFrame, true));\n  gif.setFrame(frameNumber);\n}\n</code></div>"],"alt":"A still image of a cartoon eye that looks around when you move your mouse\nup and down over the canvas","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1017,"description":"<p>Returns the number of frames in an animated GIF</p>\n","itemtype":"method","name":"numFrames","return":{"description":"","type":"Number"},"example":["     The number of frames in the animated GIF\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\n// Move your mouse up and down over canvas to see the GIF\n// frames animate\nfunction draw() {\n  gif.pause();\n  image(gif, 0, 0);\n  // Get the highest frame number which is the number of frames - 1\n  let maxFrame = gif.numFrames() - 1;\n  // Set the current frame that is mapped to be relative to mouse position\n  let frameNumber = floor(map(mouseY, 0, height, 0, maxFrame, true));\n  gif.setFrame(frameNumber);\n}\n</code></div>"],"alt":"A still image of a cartoon eye that looks around when you move your mouse\nup and down over the canvas","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1052,"description":"<p>Plays an animated GIF that was paused with\n<a href=\"#/p5.Image/pause\">pause()</a></p>\n","itemtype":"method","name":"play","example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');\n}\n\nfunction draw() {\n  background(255);\n  image(gif, 0, 0);\n}\n\nfunction mousePressed() {\n  gif.pause();\n}\n\nfunction mouseReleased() {\n  gif.play();\n}\n</code></div>"],"alt":"An animated GIF of a drawing of small child with\nhair blowing in the wind, when you click the image\nfreezes when you release it animates again","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1089,"description":"<p>Pauses an animated GIF.</p>\n","itemtype":"method","name":"pause","example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');\n}\n\nfunction draw() {\n  background(255);\n  image(gif, 0, 0);\n}\n\nfunction mousePressed() {\n  gif.pause();\n}\n\nfunction mouseReleased() {\n  gif.play();\n}\n</code></div>"],"alt":"An animated GIF of a drawing of small child with\nhair blowing in the wind, when you click the image\nfreezes when you release it animates again","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1125,"description":"<p>Changes the delay between frames in an animated GIF. There is an optional second parameter that\nindicates an index for a specific frame that should have its delay modified. If no index is given, all frames\nwill have the new delay.</p>\n","itemtype":"method","name":"delay","params":[{"name":"d","description":"<p>the amount in milliseconds to delay between switching frames</p>\n","type":"Number"},{"name":"index","description":"<p>the index of the frame that should have the new delay value {optional}</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\nlet gifFast, gifSlow;\n\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  gifFast.resize(width / 2, height / 2);\n  gifSlow.resize(width / 2, height / 2);\n\n  //Change the delay here\n  gifFast.delay(10);\n  gifSlow.delay(100);\n}\n\nfunction draw() {\n  background(255);\n  image(gifFast, 0, 0);\n  image(gifSlow, width / 2, 0);\n}\n</code></div>"],"alt":"Two animated gifs of cartoon eyes looking around\nThe gif on the left animates quickly, on the right\nthe animation is much slower","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/pixels.js","line":12,"description":"<p><a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference\n/Global_Objects/Uint8ClampedArray' target='_blank'>Uint8ClampedArray</a>\ncontaining the values for all the pixels in the display window.\nThese values are numbers. This array is the size (include an appropriate\nfactor for <a href=\"#/p5/pixelDensity\">pixelDensity</a>) of the display window x4,\nrepresenting the R, G, B, A values in order for each pixel, moving from\nleft to right across each row, then down each column. Retina and other\nhigh density displays will have more pixels[] (by a factor of\npixelDensity^2).\nFor example, if the image is 100x100 pixels, there will be 40,000. On a\nretina display, there will be 160,000.</p>\n<p>The first four values (indices 0-3) in the array will be the R, G, B, A\nvalues of the pixel at (0, 0). The second four values (indices 4-7) will\ncontain the R, G, B, A values of the pixel at (1, 0). More generally, to\nset values for a pixel at (x, y):</p>\n<pre><code class=\"language-javascript\">let d = pixelDensity();\nfor (let i = 0; i < d; i++) {\n  for (let j = 0; j < d; j++) {\n    // loop over\n    index = 4 * ((y * d + j) * width * d + (x * d + i));\n    pixels[index] = r;\n    pixels[index+1] = g;\n    pixels[index+2] = b;\n    pixels[index+3] = a;\n  }\n}</code></pre>\n<p>While the above method is complex, it is flexible enough to work with\nany pixelDensity. Note that <a href=\"#/p5/set\">set()</a> will automatically take care of\nsetting all the appropriate values in <a href=\"#/p5/pixels\">pixels[]</a> for a given (x, y) at\nany pixelDensity, but the performance may not be as fast when lots of\nmodifications are made to the pixel array.</p>\n<p>Before accessing this array, the data must loaded with the <a href=\"#/p5/loadPixels\">loadPixels()</a>\nfunction. After the array data has been modified, the <a href=\"#/p5/updatePixels\">updatePixels()</a>\nfunction must be run to update the changes.</p>\n<p>Note that this is not a standard javascript array.  This means that\nstandard javascript functions such as <a href=\"#/p5/slice\">slice()</a> or\n<a href=\"#/p5/arrayCopy\">arrayCopy()</a> do not\nwork.</p>\n","itemtype":"property","name":"pixels","type":"Number[]","example":["\n<div>\n<code>\nlet pink = color(255, 102, 204);\nloadPixels();\nlet d = pixelDensity();\nlet halfImage = 4 * (width * d) * (height / 2 * d);\nfor (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}\nupdatePixels();\n</code>\n</div>"],"alt":"top half of canvas pink, bottom grey","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":80,"description":"<p>Copies a region of pixels from one image to another, using a specified\nblend mode to do the operation.</p>\n","itemtype":"method","name":"blend","example":["\n<div><code>\nlet img0;\nlet img1;\n\nfunction preload() {\n  img0 = loadImage('assets/rockies.jpg');\n  img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  background(img0);\n  image(img1, 0, 0);\n  blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n}\n</code></div>\n<div><code>\nlet img0;\nlet img1;\n\nfunction preload() {\n  img0 = loadImage('assets/rockies.jpg');\n  img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  background(img0);\n  image(img1, 0, 0);\n  blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n}\n</code></div>\n<div><code>\nlet img0;\nlet img1;\n\nfunction preload() {\n  img0 = loadImage('assets/rockies.jpg');\n  img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  background(img0);\n  image(img1, 0, 0);\n  blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n}\n</code></div>"],"alt":"image of rocky mountains. Brick images on left and right. Right overexposed\nimage of rockies. Brickwall images on left and right. Right mortar transparent\nimage of rockies. Brickwall images on left and right. Right translucent","class":"p5","module":"Image","submodule":"Pixels","overloads":[{"line":80,"params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image"},{"name":"sx","description":"<p>X coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sy","description":"<p>Y coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sw","description":"<p>source image width</p>\n","type":"Integer"},{"name":"sh","description":"<p>source image height</p>\n","type":"Integer"},{"name":"dx","description":"<p>X coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dy","description":"<p>Y coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dw","description":"<p>destination image width</p>\n","type":"Integer"},{"name":"dh","description":"<p>destination image height</p>\n","type":"Integer"},{"name":"blendMode","description":"<p>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.</p>\n","type":"Constant"}]},{"line":152,"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":173,"description":"<p>Copies a region of the canvas to another region of the canvas\nand copies a region of pixels from an image used as the srcImg parameter\ninto the canvas srcImage is specified this is used as the source. If\nthe source and destination regions aren't the same size, it will\nautomatically resize source pixels to fit the specified\ntarget region.</p>\n","itemtype":"method","name":"copy","example":["\n<div><code>\nlet img;\n\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  background(img);\n  copy(img, 7, 22, 10, 10, 35, 25, 50, 50);\n  stroke(255);\n  noFill();\n  // Rectangle shows area being copied\n  rect(7, 22, 10, 10);\n}\n</code></div>"],"alt":"image of rocky mountains. Brick images on left and right. Right overexposed\nimage of rockies. Brickwall images on left and right. Right mortar transparent\nimage of rockies. Brickwall images on left and right. Right translucent","class":"p5","module":"Image","submodule":"Pixels","overloads":[{"line":173,"params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image|p5.Element"},{"name":"sx","description":"<p>X coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sy","description":"<p>Y coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sw","description":"<p>source image width</p>\n","type":"Integer"},{"name":"sh","description":"<p>source image height</p>\n","type":"Integer"},{"name":"dx","description":"<p>X coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dy","description":"<p>Y coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dw","description":"<p>destination image width</p>\n","type":"Integer"},{"name":"dh","description":"<p>destination image height</p>\n","type":"Integer"}]},{"line":215,"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":307,"description":"<p>Applies a filter to the canvas. The presets options are:</p>\n<p>THRESHOLD\nConverts the image to black and white pixels depending if they are above or\nbelow the threshold defined by the level parameter. The parameter must be\nbetween 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.</p>\n<p>GRAY\nConverts any colors in the image to grayscale equivalents. No parameter\nis used.</p>\n<p>OPAQUE\nSets the alpha channel to entirely opaque. No parameter is used.</p>\n<p>INVERT\nSets each pixel to its inverse value. No parameter is used.</p>\n<p>POSTERIZE\nLimits each channel of the image to the number of colors specified as the\nparameter. The parameter can be set to values between 2 and 255, but\nresults are most noticeable in the lower ranges.</p>\n<p>BLUR\nExecutes a Gaussian blur with the level parameter specifying the extent\nof the blurring. If no parameter is used, the blur is equivalent to\nGaussian blur of radius 1. Larger values increase the blur.</p>\n<p>ERODE\nReduces the light areas. No parameter is used.</p>\n<p>DILATE\nIncreases the light areas. No parameter is used.</p>\n<p>filter() does not work in WEBGL mode.\nA similar effect can be achieved in WEBGL mode using custom\nshaders. Adam Ferriss has written\na <a href=\"https://github.com/aferriss/p5jsShaderExamples\"\ntarget='_blank'>selection of shader examples</a> that contains many\nof the effects present in the filter examples.</p>\n","itemtype":"method","name":"filter","params":[{"name":"filterType","description":"<p>either THRESHOLD, GRAY, OPAQUE, INVERT,\n                               POSTERIZE, BLUR, ERODE, DILATE or BLUR.\n                               See Filters.js for docs on\n                               each available filter</p>\n","type":"Constant"},{"name":"filterParam","description":"<p>an optional parameter unique\n                               to each filter, see above</p>\n","type":"Number","optional":true}],"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(THRESHOLD);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(GRAY);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(OPAQUE);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(INVERT);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(POSTERIZE, 3);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(DILATE);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(BLUR, 3);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(ERODE);\n}\n</code>\n</div>"],"alt":"black and white image of a brick wall.\ngreyscale image of a brickwall\nimage of a brickwall\njade colored image of a brickwall\nred and pink image of a brickwall\nimage of a brickwall\nblurry image of a brickwall\nimage of a brickwall\nimage of a brickwall with less detail","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":481,"description":"<p>Get a region of pixels, or a single pixel, from the canvas.</p>\n<p>Returns an array of [R,G,B,A] values for any pixel or grabs a section of\nan image. If no parameters are specified, the entire image is returned.\nUse the x and y parameters to get the value of one pixel. Get a section of\nthe display window by specifying additional w and h parameters. When\ngetting an image, the x and y parameters define the coordinates for the\nupper-left corner of the image, regardless of the current <a href=\"#/p5/imageMode\">imageMode()</a>.</p>\n<p>Getting the color of a single pixel with get(x, y) is easy, but not as fast\nas grabbing the data directly from <a href=\"#/p5/pixels\">pixels[]</a>. The equivalent statement to\nget(x, y) using <a href=\"#/p5/pixels\">pixels[]</a> with pixel density d is</p>\n<pre><code class=\"language-javascript\">let x, y, d; // set these to the coordinates\nlet off = (y * width + x) * d * 4;\nlet components = [\n  pixels[off],\n  pixels[off + 1],\n  pixels[off + 2],\n  pixels[off + 3]\n];\nprint(components);</code></pre>\n<p>See the reference for <a href=\"#/p5/pixels\">pixels[]</a> for more information.</p>\n<p>If you want to extract an array of colors or a subimage from an p5.Image object,\ntake a look at <a href=\"#/p5.Image/get\">p5.Image.get()</a></p>\n","itemtype":"method","name":"get","return":{"description":"the rectangle <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"},"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  let c = get();\n  image(c, width / 2, 0);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  let c = get(50, 90);\n  fill(c);\n  noStroke();\n  rect(25, 25, 50, 50);\n}\n</code>\n</div>"],"alt":"2 images of the rocky mountains, side-by-side\nImage of the rocky mountains with 50x50 green rect in center of canvas","class":"p5","module":"Image","submodule":"Pixels","overloads":[{"line":481,"params":[{"name":"x","description":"<p>x-coordinate of the pixel</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the pixel</p>\n","type":"Number"},{"name":"w","description":"<p>width</p>\n","type":"Number"},{"name":"h","description":"<p>height</p>\n","type":"Number"}],"return":{"description":"the rectangle <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"}},{"line":551,"params":[],"return":{"description":"the whole <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"}},{"line":555,"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/image/pixels.js","line":566,"description":"<p>Loads the pixel data for the display window into the <a href=\"#/p5/pixels\">pixels[]</a> array. This\nfunction must always be called before reading from or writing to <a href=\"#/p5/pixels\">pixels[]</a>.\nNote that only changes made with <a href=\"#/p5/set\">set()</a> or direct manipulation of <a href=\"#/p5/pixels\">pixels[]</a>\nwill occur.</p>\n","itemtype":"method","name":"loadPixels","example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  image(img, 0, 0, width, height);\n  let d = pixelDensity();\n  let halfImage = 4 * (width * d) * (height * d / 2);\n  loadPixels();\n  for (let i = 0; i < halfImage; i++) {\n    pixels[i + halfImage] = pixels[i];\n  }\n  updatePixels();\n}\n</code>\n</div>"],"alt":"two images of the rocky mountains. one on top, one on bottom of canvas.","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":602,"description":"<p>Changes the color of any pixel, or writes an image directly to the\ndisplay window.\nThe x and y parameters specify the pixel to change and the c parameter\nspecifies the color value. This can be a <a href=\"#/p5.Color\">p5.Color</a> object, or [R, G, B, A]\npixel array. It can also be a single grayscale value.\nWhen setting an image, the x and y parameters define the coordinates for\nthe upper-left corner of the image, regardless of the current <a href=\"#/p5/imageMode\">imageMode()</a>.</p>\n<p>After using <a href=\"#/p5/set\">set()</a>, you must call <a href=\"#/p5/updatePixels\">updatePixels()</a> for your changes to appear.\nThis should be called once all pixels have been set, and must be called before\ncalling .<a href=\"#/p5/get\">get()</a> or drawing the image.</p>\n<p>Setting the color of a single pixel with set(x, y) is easy, but not as\nfast as putting the data directly into <a href=\"#/p5/pixels\">pixels[]</a>. Setting the <a href=\"#/p5/pixels\">pixels[]</a>\nvalues directly may be complicated when working with a retina display,\nbut will perform better when lots of pixels need to be set directly on\nevery loop. See the reference for <a href=\"#/p5/pixels\">pixels[]</a> for more information.</p>\n","itemtype":"method","name":"set","params":[{"name":"x","description":"<p>x-coordinate of the pixel</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the pixel</p>\n","type":"Number"},{"name":"c","description":"<p>insert a grayscale value | a pixel array |\n                               a <a href=\"#/p5.Color\">p5.Color</a> object | a <a href=\"#/p5.Image\">p5.Image</a> to copy</p>\n","type":"Number|Number[]|Object"}],"example":["\n<div>\n<code>\nlet black = color(0);\nset(30, 20, black);\nset(85, 20, black);\nset(85, 75, black);\nset(30, 75, black);\nupdatePixels();\n</code>\n</div>\n\n<div>\n<code>\nfor (let i = 30; i < width - 15; i++) {\n  for (let j = 20; j < height - 25; j++) {\n    let c = color(204 - j, 153 - i, 0);\n    set(i, j, c);\n  }\n}\nupdatePixels();\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  set(0, 0, img);\n  updatePixels();\n  line(0, 0, width, height);\n  line(0, height, width, 0);\n}\n</code>\n</div>"],"alt":"4 black points in the shape of a square middle-right of canvas.\nsquare with orangey-brown gradient lightening at bottom right.\nimage of the rocky mountains. with lines like an 'x' through the center.","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":674,"description":"<p>Updates the display window with the data in the <a href=\"#/p5/pixels\">pixels[]</a> array.\nUse in conjunction with <a href=\"#/p5/loadPixels\">loadPixels()</a>. If you're only reading pixels from\nthe array, there's no need to call <a href=\"#/p5/updatePixels\">updatePixels()</a> — updating is only\nnecessary to apply changes. <a href=\"#/p5/updatePixels\">updatePixels()</a> should be called anytime the\npixels array is manipulated or <a href=\"#/p5/set\">set()</a> is called, and only changes made with\n<a href=\"#/p5/set\">set()</a> or direct changes to <a href=\"#/p5/pixels\">pixels[]</a> will occur.</p>\n","itemtype":"method","name":"updatePixels","params":[{"name":"x","description":"<p>x-coordinate of the upper-left corner of region\n                        to update</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>y-coordinate of the upper-left corner of region\n                        to update</p>\n","type":"Number","optional":true},{"name":"w","description":"<p>width of region to update</p>\n","type":"Number","optional":true},{"name":"h","description":"<p>height of region to update</p>\n","type":"Number","optional":true}],"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  image(img, 0, 0, width, height);\n  let d = pixelDensity();\n  let halfImage = 4 * (width * d) * (height * d / 2);\n  loadPixels();\n  for (let i = 0; i < halfImage; i++) {\n    pixels[i + halfImage] = pixels[i];\n  }\n  updatePixels();\n}\n</code>\n</div>"],"alt":"two images of the rocky mountains. one on top, one on bottom of canvas.","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/io/files.js","line":20,"description":"<p>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.</p>\n<p>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 <a href=\"https://github.com/camsong/\nfetch-jsonp\">here</a>.</p>\n<p>This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadJSON","return":{"description":"JSON data","type":"Object|Array"},"example":["\n\nCalling <a href=\"#/p5/loadJSON\">loadJSON()</a> inside <a href=\"#/p5/preload\">preload()</a> guarantees to complete the\noperation before <a href=\"#/p5/setup\">setup()</a> and <a href=\"#/p5/draw\">draw()</a> are called.\n\n<div><code>\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}\n</code></div>\n\nOutside of preload(), you may supply a callback function to handle the\nobject:\n<div><code>\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}\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</code></div>"],"alt":"50x50 ellipse that changes from black to white depending on the current humidity\n50x50 ellipse that changes from black to white depending on the current humidity","class":"p5","module":"IO","submodule":"Input","overloads":[{"line":20,"params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"jsonpOptions","description":"<p>options object for jsonp related settings</p>\n","type":"Object","optional":true},{"name":"datatype","description":"<p>\"json\" or \"jsonp\"</p>\n","type":"String","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/loadJSON\">loadJSON()</a> completes, data is passed\n                                   in as first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                   there is an error, response is passed\n                                   in as first argument</p>\n","type":"Function","optional":true}],"return":{"description":"JSON data","type":"Object|Array"}},{"line":104,"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":112,"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":183,"description":"<p>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.</p>\n<p>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.</p>\n<p>This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed.</p>\n<p>This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadStrings","params":[{"name":"filename","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"callback","description":"<p>function to be executed after <a href=\"#/p5/loadStrings\">loadStrings()</a>\n                              completes, Array is passed in as first\n                              argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                              there is an error, response is passed\n                              in as first argument</p>\n","type":"Function","optional":true}],"return":{"description":"Array of Strings","type":"String[]"},"example":["\n\nCalling loadStrings() inside <a href=\"#/p5/preload\">preload()</a> guarantees to complete the\noperation before <a href=\"#/p5/setup\">setup()</a> and <a href=\"#/p5/draw\">draw()</a> are called.\n\n<div><code>\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}\n</code></div>\n\nOutside of preload(), you may supply a callback function to handle the\nobject:\n\n<div><code>\nfunction setup() {\n  loadStrings('assets/test.txt', pickString);\n}\n\nfunction pickString(result) {\n  background(200);\n  text(random(result), 10, 10, 80, 80);\n}\n</code></div>"],"alt":"randomly generated text from a file, for example \"i smell like butter\"\nrandomly generated text from a file, for example \"i have three feet\"","class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":303,"description":"<p>Reads the contents of a file or URL and creates a <a href=\"#/p5.Table\">p5.Table</a> 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.</p>\n<p>This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. Calling <a href=\"#/p5/loadTable\">loadTable()</a> inside <a href=\"#/p5/preload\">preload()</a>\nguarantees to complete the operation before <a href=\"#/p5/setup\">setup()</a> and <a href=\"#/p5/draw\">draw()</a> are called.\nOutside of <a href=\"#/p5/preload\">preload()</a>, you may supply a callback function to handle the\nobject:</p>\n<p>All files loaded and saved use UTF-8 encoding. This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadTable","params":[{"name":"filename","description":"<p>name of the file or URL to load</p>\n","type":"String"},{"name":"extension","description":"<p>parse the table by comma-separated values \"csv\", semicolon-separated\n                                     values \"ssv\", or tab-separated values \"tsv\"</p>\n","type":"String","optional":true},{"name":"header","description":"<p>\"header\" to indicate table has header row</p>\n","type":"String","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                     <a href=\"#/p5/loadTable\">loadTable()</a> completes. On success, the\n                                     <a href=\"#/p5.Table\">Table</a> object is passed in as the\n                                     first argument.</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                     there is an error, response is passed\n                                     in as first argument</p>\n","type":"Function","optional":true}],"return":{"description":"<a href=\"#/p5.Table\">Table</a> object containing data","type":"Object"},"example":["\n<div class='norender'>\n<code>\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}\n</code>\n</div>"],"alt":"randomly generated text from a file, for example \"i smell like butter\"\nrandomly generated text from a file, for example \"i have three feet\"","class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":583,"description":"<p>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.</p>\n<p>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.</p>\n<p>This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. Calling <a href=\"#/p5/loadXML\">loadXML()</a> inside <a href=\"#/p5/preload\">preload()</a>\nguarantees to complete the operation before <a href=\"#/p5/setup\">setup()</a> and <a href=\"#/p5/draw\">draw()</a> are called.</p>\n<p>Outside of <a href=\"#/p5/preload\">preload()</a>, you may supply a callback function to handle the\nobject.</p>\n<p>This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadXML","params":[{"name":"filename","description":"<p>name of the file or URL to load</p>\n","type":"String"},{"name":"callback","description":"<p>function to be executed after <a href=\"#/p5/loadXML\">loadXML()</a>\n                              completes, XML object is passed in as\n                              first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                              there is an error, response is passed\n                              in as first argument</p>\n","type":"Function","optional":true}],"return":{"description":"XML object containing data","type":"Object"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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\n// Sketch prints:\n// 0, Capra hircus, Goat\n// 1, Panthera pardus, Leopard\n// 2, Equus zebra, Zebra\n</code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":693,"description":"<p>This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadBytes","params":[{"name":"file","description":"<p>name of the file or URL to load</p>\n","type":"String"},{"name":"callback","description":"<p>function to be executed after <a href=\"#/p5/loadBytes\">loadBytes()</a>\n                                   completes</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if there\n                                   is an error</p>\n","type":"Function","optional":true}],"return":{"description":"an object whose 'bytes' property will be the loaded buffer","type":"Object"},"example":["\n<div class='norender'><code>\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}\n</code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":752,"description":"<p>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 <code>httpDo(path, 'GET')</code>. 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).</p>\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<div class='norender'><code>\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</code></div>"],"class":"p5","module":"IO","submodule":"Input","overloads":[{"line":752,"params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"datatype","description":"<p>\"json\", \"jsonp\", \"binary\", \"arrayBuffer\",\n                                   \"xml\", or \"text\"</p>\n","type":"String","optional":true},{"name":"data","description":"<p>param data passed sent with request</p>\n","type":"Object|Boolean","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/httpGet\">httpGet()</a> completes, data is passed in\n                                   as first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                   there is an error, response is passed\n                                   in as first argument</p>\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":806,"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":814,"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":829,"description":"<p>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 <code>httpDo(path, 'POST')</code>.</p>\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<div>\n<code>\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</code>\n</div>\n\n<div><code>\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</code></div>"],"class":"p5","module":"IO","submodule":"Input","overloads":[{"line":829,"params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"datatype","description":"<p>\"json\", \"jsonp\", \"xml\", or \"text\".\n                                   If omitted, <a href=\"#/p5/httpPost\">httpPost()</a> will guess.</p>\n","type":"String","optional":true},{"name":"data","description":"<p>param data passed sent with request</p>\n","type":"Object|Boolean","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/httpPost\">httpPost()</a> completes, data is passed in\n                                   as first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                   there is an error, response is passed\n                                   in as first argument</p>\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":896,"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":904,"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":919,"description":"<p>Method for executing an HTTP request. If data type is not specified,\np5 will try to guess based on the URL, defaulting to text.<br><br>\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.</p>\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<div>\n<code>\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</code>\n</div>"],"class":"p5","module":"IO","submodule":"Input","overloads":[{"line":919,"params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"method","description":"<p>either \"GET\", \"POST\", or \"PUT\",\n                                   defaults to \"GET\"</p>\n","type":"String","optional":true},{"name":"datatype","description":"<p>\"json\", \"jsonp\", \"xml\", or \"text\"</p>\n","type":"String","optional":true},{"name":"data","description":"<p>param data passed sent with request</p>\n","type":"Object","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/httpGet\">httpGet()</a> completes, data is passed in\n                                   as first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                   there is an error, response is passed\n                                   in as first argument</p>\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":990,"params":[{"name":"path","description":"","type":"String"},{"name":"options","description":"<p>Request object options as documented in the\n                                   \"fetch\" API\n<a href=\"https://developer.mozilla.org/en/docs/Web/API/Fetch_API\">reference</a></p>\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":1155,"itemtype":"method","name":"createWriter","params":[{"name":"name","description":"<p>name of the file to be created</p>\n","type":"String"},{"name":"extension","description":"","type":"String","optional":true}],"return":{"description":"","type":"p5.PrintWriter"},"example":["\n<div>\n<code>\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</code>\n</div>"],"class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1210,"description":"<p>Writes data to the PrintWriter stream</p>\n","itemtype":"method","name":"write","params":[{"name":"data","description":"<p>all data to be written by the PrintWriter</p>\n","type":"Array"}],"example":["\n<div class=\"norender notest\">\n<code>\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</code>\n</div>\n<div class='norender notest'>\n<code>\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</code>\n</div>\n<div class='norender notest'>\n<code>\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</code>\n</div>\n<div>\n<code>\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</code>\n</div>"],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1269,"description":"<p>Writes data to the PrintWriter stream, and adds a new line at the end</p>\n","itemtype":"method","name":"print","params":[{"name":"data","description":"<p>all data to be printed by the PrintWriter</p>\n","type":"Array"}],"example":["\n<div class='norender notest'>\n<code>\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</code>\n</div>\n<div class='norender notest'>\n<code>\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</code>\n</div>"],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1310,"description":"<p>Clears the data already written to the PrintWriter object</p>\n","itemtype":"method","name":"clear","example":["\n<div class =\"norender notest\"><code>\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</code></div>\n<div>\n<code>\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</code>\n</div>\n"],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1344,"description":"<p>Closes the PrintWriter</p>\n","itemtype":"method","name":"close","example":["\n<div class=\"norender notest\">\n<code>\n// create a file called 'newFile.txt'\nlet writer = createWriter('newFile.txt');\n// close the PrintWriter and save the file\nwriter.close();\n</code>\n</div>\n<div class='norender notest'>\n<code>\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</code>\n</div>"],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1393,"description":"<p>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 <a href=\"#/p5.Element\">p5.Element</a>,an Array of\nStrings, an Array of JSON, a JSON object, a <a href=\"#/p5.Table\">p5.Table\n</a>, a <a href=\"#/p5.Image\">p5.Image</a>, 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.\n<strong>Note that it is not recommended to\ncall this method within draw, as it will open a new save dialog on every\nrender.</strong></p>\n","itemtype":"method","name":"save","params":[{"name":"objectOrFilename","description":"<p>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).</p>\n","type":"Object|String","optional":true},{"name":"filename","description":"<p>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).</p>\n","type":"String","optional":true},{"name":"options","description":"<p>Additional options depend on\n                          filetype. For example, when saving JSON,\n                          <code>true</code> indicates that the\n                          output will be optimized for filesize,\n                          rather than readability.</p>\n","type":"Boolean|String","optional":true}],"example":["\n <div class=\"norender\"><code>\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 </code></div>\n\n<div class=\"norender\"><code>\n // Saves p5.Image as an image\n img = createImage(10, 10);\n save(img, 'myImage.png');\n </code></div>\n\n <div class=\"norender\"><code>\n // Saves p5.Renderer object as an image\n obj = createGraphics(100, 100);\n save(obj, 'myObject.png');\n </code></div>\n\n <div class=\"norender\"><code>\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 </code></div>\n\n <div class=\"norender\"><code>\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 </code></div>\n\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"An example for saving a canvas as an image.\n An example for saving a p5.Image element as an image.\n An example for saving a p5.Renderer element.\n An example showing how to save a table in formats of HTML, CSV and TSV.\n An example for saving JSON to a txt file with some extra arguments.\n An example for saving an array of strings to text file with line breaks.","class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1535,"description":"<p>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.</p>\n","itemtype":"method","name":"saveJSON","params":[{"name":"json","description":"","type":"Array|Object"},{"name":"filename","description":"","type":"String"},{"name":"optimize","description":"<p>If true, removes line breaks\n                               and spaces from the output\n                               file to optimize filesize\n                               (but not readability).</p>\n","type":"Boolean","optional":true}],"example":["\n <div><code>\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 }\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 </code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1592,"description":"<p>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.</p>\n","itemtype":"method","name":"saveStrings","params":[{"name":"list","description":"<p>string array to be written</p>\n","type":"String[]"},{"name":"filename","description":"<p>filename for output</p>\n","type":"String"},{"name":"extension","description":"<p>the filename's extension</p>\n","type":"String","optional":true},{"name":"isCRLF","description":"<p>if true, change line-break to CRLF</p>\n","type":"Boolean","optional":true}],"example":["\n <div><code>\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 }\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 </code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1656,"description":"<p>Writes the contents of a <a href=\"#/p5.Table\">Table</a> 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.</p>\n","itemtype":"method","name":"saveTable","params":[{"name":"Table","description":"<p>the <a href=\"#/p5.Table\">Table</a> object to save to a file</p>\n","type":"p5.Table"},{"name":"filename","description":"<p>the filename to which the Table should be saved</p>\n","type":"String"},{"name":"options","description":"<p>can be one of \"tsv\", \"csv\", or \"html\"</p>\n","type":"String","optional":true}],"example":["\n<div><code>\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\n // Saves the following to a file called 'new.csv':\n // id,species,name\n // 0,Panthera leo,Lion\n </code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/p5.Table.js","line":9,"description":"<p>Table Options\nGeneric class for handling tabular data, typically from a\nCSV, TSV, or other sort of spreadsheet file.\nCSV files are\n<a href=\"http://en.wikipedia.org/wiki/Comma-separated_values\">\ncomma separated values</a>, 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\n<a href=\"http://tools.ietf.org/html/rfc4180\">here</a>.\nTo load files, use the <a href=\"#/p5/loadTable\">loadTable</a> method.\nTo save tables to your computer, use the <a href=\"#/p5/save\">save</a> method\n or the <a href=\"#/p5/saveTable\">saveTable</a> method.</p>\n<p>Possible options include:</p>\n<ul>\n<li>csv - parse the table as comma-separated values\n<li>tsv - parse the table as tab-separated values\n<li>header - this table has a header (title) row\n</ul>","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":43,"description":"<p>An array containing the names of the columns in the table, if the \"header\" the table is\nloaded with the \"header\" parameter.</p>\n","itemtype":"property","name":"columns","type":"String[]","example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":77,"description":"<p>An array containing the <a href=\"#/p5.Table\">p5.TableRow</a> objects that make up the\nrows of the table. The same result as calling <a href=\"#/p5/getRows\">getRows()</a></p>\n","itemtype":"property","name":"rows","type":"p5.TableRow[]","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":85,"description":"<p>Use <a href=\"#/p5/addRow\">addRow()</a> to add a new row of data to a <a href=\"#/p5.Table\">p5.Table</a> 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 <a href=\"#/p5/set\">set()</a>.</p>\n<p>If a <a href=\"#/p5.TableRow\">p5.TableRow</a> object is included as a parameter, then that row is\nduplicated and added to the table.</p>\n","itemtype":"method","name":"addRow","params":[{"name":"row","description":"<p>row to be added to the table</p>\n","type":"p5.TableRow","optional":true}],"return":{"description":"the row that was added","type":"p5.TableRow"},"example":["\n <div class=\"norender\">\n <code>\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 </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":148,"description":"<p>Removes a row from the table object.</p>\n","itemtype":"method","name":"removeRow","params":[{"name":"id","description":"<p>ID number of the row to remove</p>\n","type":"Integer"}],"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":195,"description":"<p>Returns a reference to the specified <a href=\"#/p5.TableRow\">p5.TableRow</a>. The reference\ncan then be used to get and set values of the selected row.</p>\n","itemtype":"method","name":"getRow","params":[{"name":"rowID","description":"<p>ID number of the row to get</p>\n","type":"Integer"}],"return":{"description":"<a href=\"#/p5.TableRow\">p5.TableRow</a> object","type":"p5.TableRow"},"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":240,"description":"<p>Gets all rows from the table. Returns an array of <a href=\"#/p5.TableRow\">p5.TableRow</a>s.</p>\n","itemtype":"method","name":"getRows","return":{"description":"Array of <a href=\"#/p5.TableRow\">p5.TableRow</a>s","type":"p5.TableRow[]"},"example":["\n <div class=\"norender\">\n <code>\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 </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":288,"description":"<p>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.</p>\n","itemtype":"method","name":"findRow","params":[{"name":"value","description":"<p>The value to match</p>\n","type":"String"},{"name":"column","description":"<p>ID number or title of the\n                               column to search</p>\n","type":"Integer|String"}],"return":{"description":"","type":"p5.TableRow"},"example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":352,"description":"<p>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.</p>\n","itemtype":"method","name":"findRows","params":[{"name":"value","description":"<p>The value to match</p>\n","type":"String"},{"name":"column","description":"<p>ID number or title of the\n                               column to search</p>\n","type":"Integer|String"}],"return":{"description":"An Array of TableRow objects","type":"p5.TableRow[]"},"example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":420,"description":"<p>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.</p>\n","itemtype":"method","name":"matchRow","params":[{"name":"regexp","description":"<p>The regular expression to match</p>\n","type":"String|RegExp"},{"name":"column","description":"<p>The column ID (number) or\n                                 title (string)</p>\n","type":"String|Integer"}],"return":{"description":"TableRow object","type":"p5.TableRow"},"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":478,"description":"<p>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.</p>\n","itemtype":"method","name":"matchRows","params":[{"name":"regexp","description":"<p>The regular expression to match</p>\n","type":"String"},{"name":"column","description":"<p>The column ID (number) or\n                                 title (string)</p>\n","type":"String|Integer","optional":true}],"return":{"description":"An Array of TableRow objects","type":"p5.TableRow[]"},"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":545,"description":"<p>Retrieves all values in the specified column, and returns them\nas an array. The column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"getColumn","params":[{"name":"column","description":"<p>String or Number of the column to return</p>\n","type":"String|Number"}],"return":{"description":"Array of column values","type":"Array"},"example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":597,"description":"<p>Removes all rows from a Table. While all rows are removed,\ncolumns and column titles are maintained.</p>\n","itemtype":"method","name":"clearRows","example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":638,"description":"<p>Use <a href=\"#/p5/addColumn\">addColumn()</a> to add a new column to a <a href=\"#/p5.Table\">Table</a> 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.)</p>\n","itemtype":"method","name":"addColumn","params":[{"name":"title","description":"<p>title of the given column</p>\n","type":"String","optional":true}],"example":["\n <div class=\"norender\">\n <code>\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 </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":688,"description":"<p>Returns the total number of columns in a Table.</p>\n","itemtype":"method","name":"getColumnCount","return":{"description":"Number of columns in this table","type":"Integer"},"example":["\n <div>\n <code>\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 </code>\n </div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":724,"description":"<p>Returns the total number of rows in a Table.</p>\n","itemtype":"method","name":"getRowCount","return":{"description":"Number of rows in this table","type":"Integer"},"example":["\n <div>\n <code>\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 </code>\n </div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":760,"description":"<p>Removes any of the specified characters (or \"tokens\").</p>\n<p>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.</p>\n","itemtype":"method","name":"removeTokens","params":[{"name":"chars","description":"<p>String listing characters to be removed</p>\n","type":"String"},{"name":"column","description":"<p>Column ID (number)\n                                 or name (string)</p>\n","type":"String|Integer","optional":true}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":832,"description":"<p>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.</p>\n","itemtype":"method","name":"trim","params":[{"name":"column","description":"<p>Column ID (number)\n                                 or name (string)</p>\n","type":"String|Integer","optional":true}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":896,"description":"<p>Use <a href=\"#/p5/removeColumn\">removeColumn()</a> 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.</p>\n","itemtype":"method","name":"removeColumn","params":[{"name":"column","description":"<p>columnName (string) or ID (number)</p>\n","type":"String|Integer"}],"example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":960,"description":"<p>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.</p>\n","itemtype":"method","name":"set","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>column ID (Number)\n                              or title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>value to assign</p>\n","type":"String|Number"}],"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1009,"description":"<p>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.</p>\n","itemtype":"method","name":"setNum","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>column ID (Number)\n                              or title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>value to assign</p>\n","type":"Number"}],"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1055,"description":"<p>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.</p>\n","itemtype":"method","name":"setString","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>column ID (Number)\n                              or title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>value to assign</p>\n","type":"String"}],"example":["\n<div class=\"norender\"><code>\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</code></div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1100,"description":"<p>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.</p>\n","itemtype":"method","name":"get","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>columnName (string) or\n                                  ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"","type":"String|Number"},"example":["\n<div class=\"norender\">\n<code>\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}\n</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1146,"description":"<p>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.</p>\n","itemtype":"method","name":"getNum","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>columnName (string) or\n                                  ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\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}\n</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1190,"description":"<p>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.</p>\n","itemtype":"method","name":"getString","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>columnName (string) or\n                                  ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"","type":"String"},"example":["\n<div class=\"norender\">\n<code>\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}\n</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1242,"description":"<p>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.</p>\n","itemtype":"method","name":"getObject","params":[{"name":"headerColumn","description":"<p>Name of the column which should be used to\n                             title each row object (optional)</p>\n","type":"String","optional":true}],"return":{"description":"","type":"Object"},"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1305,"description":"<p>Retrieves all table data and returns it as a multidimensional array.</p>\n","itemtype":"method","name":"getArray","return":{"description":"","type":"Array"},"example":["\n<div class=\"norender\">\n<code>\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}\n</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":40,"description":"<p>Stores a value in the TableRow's specified column.\nThe column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"set","params":[{"name":"column","description":"<p>Column ID (Number)\n                              or Title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>The value to be stored</p>\n","type":"String|Number"}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":102,"description":"<p>Stores a Float value in the TableRow's specified column.\nThe column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"setNum","params":[{"name":"column","description":"<p>Column ID (Number)\n                              or Title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>The value to be stored\n                              as a Float</p>\n","type":"Number|String"}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":146,"description":"<p>Stores a String value in the TableRow's specified column.\nThe column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"setString","params":[{"name":"column","description":"<p>Column ID (Number)\n                              or Title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>The value to be stored\n                              as a String</p>\n","type":"String|Number|Boolean|Object"}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":191,"description":"<p>Retrieves a value from the TableRow's specified column.\nThe column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"get","params":[{"name":"column","description":"<p>columnName (string) or\n                                 ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"","type":"String|Number"},"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":239,"description":"<p>Retrieves a Float value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.</p>\n","itemtype":"method","name":"getNum","params":[{"name":"column","description":"<p>columnName (string) or\n                                 ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"Float Floating point number","type":"Number"},"example":["\n <div class=\"norender\"><code>\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 }\n </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":295,"description":"<p>Retrieves an String value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.</p>\n","itemtype":"method","name":"getString","params":[{"name":"column","description":"<p>columnName (string) or\n                                 ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"String","type":"String"},"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.XML.js","line":62,"description":"<p>Gets a copy of the element's parent. Returns the parent as another\n<a href=\"#/p5.XML\">p5.XML</a> object.</p>\n","itemtype":"method","name":"getParent","return":{"description":"element parent","type":"p5.XML"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":100,"description":"<p>Gets the element's full name, which is returned as a String.</p>\n","itemtype":"method","name":"getName","return":{"description":"the name of the node","type":"String"},"example":["&lt;animal\n <div class='norender'><code>\n // The following short XML file called \"mammals.xml\" is parsed\n // in the code below.\n //\n // <?xml version=\"1.0\"?>\n // &lt;mammals&gt;\n //   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n //   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n //   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n // &lt;/mammals&gt;\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 </code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":135,"description":"<p>Sets the element's name, which is specified as a String.</p>\n","itemtype":"method","name":"setName","params":[{"name":"the","description":"<p>new name of the node</p>\n","type":"String"}],"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":181,"description":"<p>Checks whether or not the element has any children, and returns the result\nas a boolean.</p>\n","itemtype":"method","name":"hasChildren","return":{"description":"","type":"Boolean"},"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":217,"description":"<p>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 <a href=\"#/p5.XML/getName\">getName()</a>\non each child element individually.</p>\n","itemtype":"method","name":"listChildren","return":{"description":"names of the children of the element","type":"String[]"},"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":258,"description":"<p>Returns all of the element's children as an array of <a href=\"#/p5.XML\">p5.XML</a> objects. When\nthe name parameter is specified, then it will return all children that match\nthat name.</p>\n","itemtype":"method","name":"getChildren","params":[{"name":"name","description":"<p>element name</p>\n","type":"String","optional":true}],"return":{"description":"children of the element","type":"p5.XML[]"},"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":314,"description":"<p>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.</p>\n","itemtype":"method","name":"getChild","params":[{"name":"name","description":"<p>element name or index</p>\n","type":"String|Integer"}],"return":{"description":"","type":"p5.XML"},"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>\n<div class='norender'><code>\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":374,"description":"<p>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 <a href=\"#/p5.XML\">p5.XML</a> object.\nA reference to the newly created child is returned as an <a href=\"#/p5.XML\">p5.XML</a> object.</p>\n","itemtype":"method","name":"addChild","params":[{"name":"node","description":"<p>a <a href=\"#/p5.XML\">p5.XML</a> Object which will be the child to be added</p>\n","type":"p5.XML"}],"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":426,"description":"<p>Removes the element specified by name or index.</p>\n","itemtype":"method","name":"removeChild","params":[{"name":"name","description":"<p>element name or index</p>\n","type":"String|Integer"}],"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>\n<div class='norender'><code>\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":498,"description":"<p>Counts the specified element's number of attributes, returned as an Number.</p>\n","itemtype":"method","name":"getAttributeCount","return":{"description":"","type":"Integer"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":534,"description":"<p>Gets all of the specified element's attributes, and returns them as an\narray of Strings.</p>\n","itemtype":"method","name":"listAttributes","return":{"description":"an array of strings containing the names of attributes","type":"String[]"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":577,"description":"<p>Checks whether or not an element has the specified attribute.</p>\n","itemtype":"method","name":"hasAttribute","params":[{"name":"the","description":"<p>attribute to be checked</p>\n","type":"String"}],"return":{"description":"true if attribute found else false","type":"Boolean"},"example":["\n <div class='norender'><code>\n // The following short XML file called \"mammals.xml\" is parsed\n // in the code below.\n //\n // <?xml version=\"1.0\"?>\n // &lt;mammals&gt;\n //   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n //   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n //   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n // &lt;/mammals&gt;\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 </code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":622,"description":"<p>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.</p>\n","itemtype":"method","name":"getNum","params":[{"name":"name","description":"<p>the non-null full name of the attribute</p>\n","type":"String"},{"name":"defaultValue","description":"<p>the default value of the attribute</p>\n","type":"Number","optional":true}],"return":{"description":"","type":"Number"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":669,"description":"<p>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.</p>\n","itemtype":"method","name":"getString","params":[{"name":"name","description":"<p>the non-null full name of the attribute</p>\n","type":"String"},{"name":"defaultValue","description":"<p>the default value of the attribute</p>\n","type":"Number","optional":true}],"return":{"description":"","type":"String"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":716,"description":"<p>Sets the content of an element's attribute. The first parameter specifies\nthe attribute name, while the second specifies the new content.</p>\n","itemtype":"method","name":"setAttribute","params":[{"name":"name","description":"<p>the full name of the attribute</p>\n","type":"String"},{"name":"value","description":"<p>the value of the attribute</p>\n","type":"Number|String|Boolean"}],"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":757,"description":"<p>Returns the content of an element. If there is no such content,\ndefaultValue is returned if specified, otherwise null is returned.</p>\n","itemtype":"method","name":"getContent","params":[{"name":"defaultValue","description":"<p>value returned if no content is found</p>\n","type":"String","optional":true}],"return":{"description":"","type":"String"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":798,"description":"<p>Sets the element's content.</p>\n","itemtype":"method","name":"setContent","params":[{"name":"text","description":"<p>the new content</p>\n","type":"String"}],"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":839,"description":"<p>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.</p>\n","itemtype":"method","name":"serialize","return":{"description":"Serialized string of the element","type":"String"},"example":["\n<div class='norender'><code>\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// <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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/math/calculation.js","line":10,"description":"<p>Calculates the absolute value (magnitude) of a number. Maps to Math.abs().\nThe absolute value of a number is always positive.</p>\n","itemtype":"method","name":"abs","params":[{"name":"n","description":"<p>number to compute</p>\n","type":"Number"}],"return":{"description":"absolute value of given number","type":"Number"},"example":["\n<div class = \"norender\"><code>\nfunction setup() {\n  let x = -3;\n  let y = abs(x);\n\n  print(x); // -3\n  print(y); // 3\n}\n</code></div>"],"alt":"no image displayed","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":33,"description":"<p>Calculates the closest int value that is greater than or equal to the\nvalue of the parameter. Maps to Math.ceil(). For example, ceil(9.03)\nreturns the value 10.</p>\n","itemtype":"method","name":"ceil","params":[{"name":"n","description":"<p>number to round up</p>\n","type":"Number"}],"return":{"description":"rounded up number","type":"Integer"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  // map, mouseX between 0 and 5.\n  let ax = map(mouseX, 0, 100, 0, 5);\n  let ay = 66;\n\n  //Get the ceiling of the mapped number.\n  let bx = ceil(map(mouseX, 0, 100, 0, 5));\n  let by = 33;\n\n  // Multiply the mapped numbers by 20 to more easily\n  // see the changes.\n  stroke(0);\n  fill(0);\n  line(0, ay, ax * 20, ay);\n  line(0, by, bx * 20, by);\n\n  // Reformat the float returned by map and draw it.\n  noStroke();\n  text(nfc(ax, 2), ax, ay - 5);\n  text(nfc(bx, 1), bx, by - 5);\n}\n</code></div>"],"alt":"2 horizontal lines & number sets. increase with mouse x. bottom to 2 decimals","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":72,"description":"<p>Constrains a value between a minimum and maximum value.</p>\n","itemtype":"method","name":"constrain","params":[{"name":"n","description":"<p>number to constrain</p>\n","type":"Number"},{"name":"low","description":"<p>minimum limit</p>\n","type":"Number"},{"name":"high","description":"<p>maximum limit</p>\n","type":"Number"}],"return":{"description":"constrained number","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n\n  let leftWall = 25;\n  let rightWall = 75;\n\n  // xm is just the mouseX, while\n  // xc is the mouseX, but constrained\n  // between the leftWall and rightWall!\n  let xm = mouseX;\n  let xc = constrain(mouseX, leftWall, rightWall);\n\n  // Draw the walls.\n  stroke(150);\n  line(leftWall, 0, leftWall, height);\n  line(rightWall, 0, rightWall, height);\n\n  // Draw xm and xc as circles.\n  noStroke();\n  fill(150);\n  ellipse(xm, 33, 9, 9); // Not Constrained\n  fill(0);\n  ellipse(xc, 66, 9, 9); // Constrained\n}\n</code></div>"],"alt":"2 vertical lines. 2 ellipses move with mouse X 1 does not move passed lines","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":116,"description":"<p>Calculates the distance between two points, in either two or three dimensions.</p>\n","itemtype":"method","name":"dist","return":{"description":"distance between the two points","type":"Number"},"example":["\n<div><code>\n// Move your mouse inside the canvas to see the\n// change in distance between two points!\nfunction draw() {\n  background(200);\n  fill(0);\n\n  let x1 = 10;\n  let y1 = 90;\n  let x2 = mouseX;\n  let y2 = mouseY;\n\n  line(x1, y1, x2, y2);\n  ellipse(x1, y1, 7, 7);\n  ellipse(x2, y2, 7, 7);\n\n  // d is the length of the line\n  // the distance from point 1 to point 2.\n  let d = dist(x1, y1, x2, y2);\n\n  // Let's write d along the line we are drawing!\n  push();\n  translate((x1 + x2) / 2, (y1 + y2) / 2);\n  rotate(atan2(y2 - y1, x2 - x1));\n  text(nfc(d, 1), 0, -5);\n  pop();\n  // Fancy!\n}\n</code></div>"],"alt":"2 ellipses joined by line. 1 ellipse moves with mouse X&Y. Distance displayed.","class":"p5","module":"Math","submodule":"Calculation","overloads":[{"line":116,"params":[{"name":"x1","description":"<p>x-coordinate of the first point</p>\n","type":"Number"},{"name":"y1","description":"<p>y-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"<p>x-coordinate of the second point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate of the second point</p>\n","type":"Number"}],"return":{"description":"distance between the two points","type":"Number"}},{"line":160,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>z-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>z-coordinate of the second point</p>\n","type":"Number"}],"return":{"description":"distance between the two points","type":"Number"}}]},{"file":"src/math/calculation.js","line":181,"description":"<p>Returns Euler's number e (2.71828...) raised to the power of the n\nparameter. Maps to Math.exp().</p>\n","itemtype":"method","name":"exp","params":[{"name":"n","description":"<p>exponent to raise</p>\n","type":"Number"}],"return":{"description":"e^n","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n\n  // Compute the exp() function with a value between 0 and 2\n  let xValue = map(mouseX, 0, width, 0, 2);\n  let yValue = exp(xValue);\n\n  let y = map(yValue, 0, 8, height, 0);\n\n  let legend = 'exp (' + nfc(xValue, 3) + ')\\n= ' + nf(yValue, 1, 4);\n  stroke(150);\n  line(mouseX, y, mouseX, height);\n  fill(0);\n  text(legend, 5, 15);\n  noStroke();\n  ellipse(mouseX, y, 7, 7);\n\n  // Draw the exp(x) curve,\n  // over the domain of x from 0 to 2\n  noFill();\n  stroke(0);\n  beginShape();\n  for (let x = 0; x < width; x++) {\n    xValue = map(x, 0, width, 0, 2);\n    yValue = exp(xValue);\n    y = map(yValue, 0, 8, height, 0);\n    vertex(x, y);\n  }\n\n  endShape();\n  line(0, 0, 0, height);\n  line(0, height - 1, width, height - 1);\n}\n</code></div>"],"alt":"ellipse moves along a curve with mouse x. e^n displayed.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":230,"description":"<p>Calculates the closest int value that is less than or equal to the\nvalue of the parameter. Maps to Math.floor().</p>\n","itemtype":"method","name":"floor","params":[{"name":"n","description":"<p>number to round down</p>\n","type":"Number"}],"return":{"description":"rounded down number","type":"Integer"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  //map, mouseX between 0 and 5.\n  let ax = map(mouseX, 0, 100, 0, 5);\n  let ay = 66;\n\n  //Get the floor of the mapped number.\n  let bx = floor(map(mouseX, 0, 100, 0, 5));\n  let by = 33;\n\n  // Multiply the mapped numbers by 20 to more easily\n  // see the changes.\n  stroke(0);\n  fill(0);\n  line(0, ay, ax * 20, ay);\n  line(0, by, bx * 20, by);\n\n  // Reformat the float returned by map and draw it.\n  noStroke();\n  text(nfc(ax, 2), ax, ay - 5);\n  text(nfc(bx, 1), bx, by - 5);\n}\n</code></div>"],"alt":"2 horizontal lines & number sets. increase with mouse x. bottom to 2 decimals","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":268,"description":"<p>Calculates a number between two numbers at a specific increment. The amt\nparameter is the amount to interpolate between the two values where 0.0\nequal to the first point, 0.1 is very near the first point, 0.5 is\nhalf-way in between, and 1.0 is equal to the second point. If the\nvalue of amt is more than 1.0 or less than 0.0, the number will be\ncalculated accordingly in the ratio of the two given numbers. The lerp\nfunction is convenient for creating motion along a straight\npath and for drawing dotted lines.</p>\n","itemtype":"method","name":"lerp","params":[{"name":"start","description":"<p>first value</p>\n","type":"Number"},{"name":"stop","description":"<p>second value</p>\n","type":"Number"},{"name":"amt","description":"<p>number</p>\n","type":"Number"}],"return":{"description":"lerped value","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  background(200);\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  let y = 50;\n\n  strokeWeight(5);\n  stroke(0); // Draw the original points in black\n  point(a, y);\n  point(b, y);\n\n  stroke(100); // Draw the lerp points in gray\n  point(c, y);\n  point(d, y);\n  point(e, y);\n}\n</code></div>"],"alt":"5 points horizontally staggered mid-canvas. mid 3 are grey, outer black","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":315,"description":"<p>Calculates the natural logarithm (the base-e logarithm) of a number. This\nfunction expects the n parameter to be a value greater than 0.0. Maps to\nMath.log().</p>\n","itemtype":"method","name":"log","params":[{"name":"n","description":"<p>number greater than 0</p>\n","type":"Number"}],"return":{"description":"natural logarithm of n","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  let maxX = 2.8;\n  let maxY = 1.5;\n\n  // Compute the natural log of a value between 0 and maxX\n  let xValue = map(mouseX, 0, width, 0, maxX);\n  let yValue, y;\n  if (xValue > 0) {\n   // Cannot take the log of a negative number.\n    yValue = log(xValue);\n    y = map(yValue, -maxY, maxY, height, 0);\n\n    // Display the calculation occurring.\n    let legend = 'log(' + nf(xValue, 1, 2) + ')\\n= ' + nf(yValue, 1, 3);\n    stroke(150);\n    line(mouseX, y, mouseX, height);\n    fill(0);\n    text(legend, 5, 15);\n    noStroke();\n    ellipse(mouseX, y, 7, 7);\n  }\n\n  // Draw the log(x) curve,\n  // over the domain of x from 0 to maxX\n  noFill();\n  stroke(0);\n  beginShape();\n  for (let x = 0; x < width; x++) {\n    xValue = map(x, 0, width, 0, maxX);\n    yValue = log(xValue);\n    y = map(yValue, -maxY, maxY, height, 0);\n    vertex(x, y);\n  }\n  endShape();\n  line(0, 0, 0, height);\n  line(0, height / 2, width, height / 2);\n}\n</code></div>"],"alt":"ellipse moves along a curve with mouse x. natural logarithm of n displayed.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":370,"description":"<p>Calculates the magnitude (or length) of a vector. A vector is a direction\nin space commonly used in computer graphics and linear algebra. Because it\nhas no \"start\" position, the magnitude of a vector can be thought of as\nthe distance from the coordinate 0,0 to its x,y value. Therefore, <a href=\"#/p5/mag\">mag()</a> is\na shortcut for writing dist(0, 0, x, y).</p>\n","itemtype":"method","name":"mag","params":[{"name":"a","description":"<p>first value</p>\n","type":"Number"},{"name":"b","description":"<p>second value</p>\n","type":"Number"}],"return":{"description":"magnitude of vector from (0,0) to (a,b)","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  let x1 = 20;\n  let x2 = 80;\n  let y1 = 30;\n  let y2 = 70;\n\n  line(0, 0, x1, y1);\n  print(mag(x1, y1)); // Prints \"36.05551275463989\"\n  line(0, 0, x2, y1);\n  print(mag(x2, y1)); // Prints \"85.44003745317531\"\n  line(0, 0, x1, y2);\n  print(mag(x1, y2)); // Prints \"72.80109889280519\"\n  line(0, 0, x2, y2);\n  print(mag(x2, y2)); // Prints \"106.3014581273465\"\n}\n</code></div>"],"alt":"4 lines of different length radiate from top left of canvas.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":408,"description":"<p>Re-maps a number from one range to another.</p>\n<p>In the first example above, the number 25 is converted from a value in the\nrange of 0 to 100 into a value that ranges from the left edge of the\nwindow (0) to the right edge (width).</p>\n","itemtype":"method","name":"map","params":[{"name":"value","description":"<p>the incoming value to be converted</p>\n","type":"Number"},{"name":"start1","description":"<p>lower bound of the value's current range</p>\n","type":"Number"},{"name":"stop1","description":"<p>upper bound of the value's current range</p>\n","type":"Number"},{"name":"start2","description":"<p>lower bound of the value's target range</p>\n","type":"Number"},{"name":"stop2","description":"<p>upper bound of the value's target range</p>\n","type":"Number"},{"name":"withinBounds","description":"<p>constrain the value to the newly mapped range</p>\n","type":"Boolean","optional":true}],"return":{"description":"remapped number","type":"Number"},"example":["\n  <div><code>\nlet value = 25;\nlet m = map(value, 0, 100, 0, width);\nellipse(m, 50, 10, 10);\n</code></div>\n\n  <div><code>\nfunction setup() {\n  noStroke();\n}\n\nfunction draw() {\n  background(204);\n  let x1 = map(mouseX, 0, width, 25, 75);\n  ellipse(x1, 25, 25, 25);\n  //This ellipse is constrained to the 0-100 range\n  //after setting withinBounds to true\n  let x2 = map(mouseX, 0, width, 0, 100, true);\n  ellipse(x2, 75, 25, 25);\n}\n</code></div>"],"alt":"10 by 10 white ellipse with in mid left canvas\n2 25 by 25 white ellipses move with mouse x. Bottom has more range from X","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":463,"description":"<p>Determines the largest value in a sequence of numbers, and then returns\nthat value. <a href=\"#/p5/max\">max()</a> accepts any number of Number parameters, or an Array\nof any length.</p>\n","itemtype":"method","name":"max","return":{"description":"maximum Number","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  // Change the elements in the array and run the sketch\n  // to show how max() works!\n  let numArray = [2, 1, 5, 4, 8, 9];\n  fill(0);\n  noStroke();\n  text('Array Elements', 0, 10);\n  // Draw all numbers in the array\n  let spacing = 15;\n  let elemsY = 25;\n  for (let i = 0; i < numArray.length; i++) {\n    text(numArray[i], i * spacing, elemsY);\n  }\n  let maxX = 33;\n  let maxY = 80;\n  // Draw the Maximum value in the array.\n  textSize(32);\n  text(max(numArray), maxX, maxY);\n}\n</code></div>"],"alt":"Small text at top reads: Array Elements 2 1 5 4 8 9. Large text at center: 9","class":"p5","module":"Math","submodule":"Calculation","overloads":[{"line":463,"params":[{"name":"n0","description":"<p>Number to compare</p>\n","type":"Number"},{"name":"n1","description":"<p>Number to compare</p>\n","type":"Number"}],"return":{"description":"maximum Number","type":"Number"}},{"line":498,"params":[{"name":"nums","description":"<p>Numbers to compare</p>\n","type":"Number[]"}],"return":{"description":"","type":"Number"}}]},{"file":"src/math/calculation.js","line":511,"description":"<p>Determines the smallest value in a sequence of numbers, and then returns\nthat value. <a href=\"#/p5/min\">min()</a> accepts any number of Number parameters, or an Array\nof any length.</p>\n","itemtype":"method","name":"min","return":{"description":"minimum Number","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  // Change the elements in the array and run the sketch\n  // to show how min() works!\n  let numArray = [2, 1, 5, 4, 8, 9];\n  fill(0);\n  noStroke();\n  text('Array Elements', 0, 10);\n  // Draw all numbers in the array\n  let spacing = 15;\n  let elemsY = 25;\n  for (let i = 0; i < numArray.length; i++) {\n    text(numArray[i], i * spacing, elemsY);\n  }\n  let maxX = 33;\n  let maxY = 80;\n  // Draw the Minimum value in the array.\n  textSize(32);\n  text(min(numArray), maxX, maxY);\n}\n</code></div>"],"alt":"Small text at top reads: Array Elements 2 1 5 4 8 9. Large text at center: 1","class":"p5","module":"Math","submodule":"Calculation","overloads":[{"line":511,"params":[{"name":"n0","description":"<p>Number to compare</p>\n","type":"Number"},{"name":"n1","description":"<p>Number to compare</p>\n","type":"Number"}],"return":{"description":"minimum Number","type":"Number"}},{"line":546,"params":[{"name":"nums","description":"<p>Numbers to compare</p>\n","type":"Number[]"}],"return":{"description":"","type":"Number"}}]},{"file":"src/math/calculation.js","line":559,"description":"<p>Normalizes a number from another range into a value between 0 and 1.\nIdentical to map(value, low, high, 0, 1).\nNumbers outside of the range are not clamped to 0 and 1, because\nout-of-range values are often intentional and useful. (See the example above.)</p>\n","itemtype":"method","name":"norm","params":[{"name":"value","description":"<p>incoming value to be normalized</p>\n","type":"Number"},{"name":"start","description":"<p>lower bound of the value's current range</p>\n","type":"Number"},{"name":"stop","description":"<p>upper bound of the value's current range</p>\n","type":"Number"}],"return":{"description":"normalized number","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  let currentNum = mouseX;\n  let lowerBound = 0;\n  let upperBound = width; //100;\n  let normalized = norm(currentNum, lowerBound, upperBound);\n  let lineY = 70;\n  stroke(3);\n  line(0, lineY, width, lineY);\n  //Draw an ellipse mapped to the non-normalized value.\n  noStroke();\n  fill(50);\n  let s = 7; // ellipse size\n  ellipse(currentNum, lineY, s, s);\n\n  // Draw the guide\n  let guideY = lineY + 15;\n  text('0', 0, guideY);\n  textAlign(RIGHT);\n  text('100', width, guideY);\n\n  // Draw the normalized value\n  textAlign(LEFT);\n  fill(0);\n  textSize(32);\n  let normalY = 40;\n  let normalX = 20;\n  text(normalized, normalX, normalY);\n}\n</code></div>"],"alt":"ellipse moves with mouse. 0 shown left & 100 right and updating values center","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":611,"description":"<p>Facilitates exponential expressions. The <a href=\"#/p5/pow\">pow()</a> function is an efficient\nway of multiplying numbers by themselves (or their reciprocals) in large\nquantities. For example, pow(3, 5) is equivalent to the expression\n3 × 3 × 3 × 3 × 3 and pow(3, -5) is equivalent to 1 /\n3 × 3 × 3 × 3 × 3. Maps to\nMath.pow().</p>\n","itemtype":"method","name":"pow","params":[{"name":"n","description":"<p>base of the exponential expression</p>\n","type":"Number"},{"name":"e","description":"<p>power by which to raise the base</p>\n","type":"Number"}],"return":{"description":"n^e","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  //Exponentially increase the size of an ellipse.\n  let eSize = 3; // Original Size\n  let eLoc = 10; // Original Location\n\n  ellipse(eLoc, eLoc, eSize, eSize);\n\n  ellipse(eLoc * 2, eLoc * 2, pow(eSize, 2), pow(eSize, 2));\n\n  ellipse(eLoc * 4, eLoc * 4, pow(eSize, 3), pow(eSize, 3));\n\n  ellipse(eLoc * 8, eLoc * 8, pow(eSize, 4), pow(eSize, 4));\n}\n</code></div>"],"alt":"small to large ellipses radiating from top left of canvas","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":645,"description":"<p>Calculates the integer closest to the n parameter. For example,\nround(133.8) returns the value 134. Maps to Math.round().</p>\n","itemtype":"method","name":"round","params":[{"name":"n","description":"<p>number to round</p>\n","type":"Number"},{"name":"decimals","description":"<p>number of decimal places to round to, default is 0</p>\n","type":"Number","optional":true}],"return":{"description":"rounded number","type":"Integer"},"example":["\n<div><code>\nlet x = round(3.7);\ntext(x, width / 2, height / 2);\n</code></div>\n<div><code>\nlet x = round(12.782383, 2);\ntext(x, width / 2, height / 2);\n</code></div>\n<div><code>\nfunction draw() {\n  background(200);\n  //map, mouseX between 0 and 5.\n  let ax = map(mouseX, 0, 100, 0, 5);\n  let ay = 66;\n\n  // Round the mapped number.\n  let bx = round(map(mouseX, 0, 100, 0, 5));\n  let by = 33;\n\n  // Multiply the mapped numbers by 20 to more easily\n  // see the changes.\n  stroke(0);\n  fill(0);\n  line(0, ay, ax * 20, ay);\n  line(0, by, bx * 20, by);\n\n  // Reformat the float returned by map and draw it.\n  noStroke();\n  text(nfc(ax, 2), ax, ay - 5);\n  text(nfc(bx, 1), bx, by - 5);\n}\n</code></div>"],"alt":"\"3\" written in middle of canvas\n\"12.78\" written in middle of canvas\nhorizontal center line squared values displayed on top and regular on bottom.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":699,"description":"<p>Squares a number (multiplies a number by itself). The result is always a\npositive number, as multiplying two negative numbers always yields a\npositive result. For example, -1 * -1 = 1.</p>\n","itemtype":"method","name":"sq","params":[{"name":"n","description":"<p>number to square</p>\n","type":"Number"}],"return":{"description":"squared number","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  let eSize = 7;\n  let x1 = map(mouseX, 0, width, 0, 10);\n  let y1 = 80;\n  let x2 = sq(x1);\n  let y2 = 20;\n\n  // Draw the non-squared.\n  line(0, y1, width, y1);\n  ellipse(x1, y1, eSize, eSize);\n\n  // Draw the squared.\n  line(0, y2, width, y2);\n  ellipse(x2, y2, eSize, eSize);\n\n  // Draw dividing line.\n  stroke(100);\n  line(0, height / 2, width, height / 2);\n\n  // Draw text.\n  let spacing = 15;\n  noStroke();\n  fill(0);\n  text('x = ' + x1, 0, y1 + spacing);\n  text('sq(x) = ' + x2, 0, y2 + spacing);\n}\n</code></div>"],"alt":"horizontal center line squared values displayed on top and regular on bottom.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":743,"description":"<p>Calculates the square root of a number. The square root of a number is\nalways positive, even though there may be a valid negative root. The\nsquare root s of number a is such that s*s = a. It is the opposite of\nsquaring. Maps to Math.sqrt().</p>\n","itemtype":"method","name":"sqrt","params":[{"name":"n","description":"<p>non-negative number to square root</p>\n","type":"Number"}],"return":{"description":"square root of number","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  let eSize = 7;\n  let x1 = mouseX;\n  let y1 = 80;\n  let x2 = sqrt(x1);\n  let y2 = 20;\n\n  // Draw the non-squared.\n  line(0, y1, width, y1);\n  ellipse(x1, y1, eSize, eSize);\n\n  // Draw the squared.\n  line(0, y2, width, y2);\n  ellipse(x2, y2, eSize, eSize);\n\n  // Draw dividing line.\n  stroke(100);\n  line(0, height / 2, width, height / 2);\n\n  // Draw text.\n  noStroke();\n  fill(0);\n  let spacing = 15;\n  text('x = ' + x1, 0, y1 + spacing);\n  text('sqrt(x) = ' + x2, 0, y2 + spacing);\n}\n</code></div>"],"alt":"horizontal center line squareroot values displayed on top and regular on bottom.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":830,"description":"<p>Calculates the fractional part of a number.</p>\n","itemtype":"method","name":"fract","params":[{"name":"num","description":"<p>Number whose fractional part needs to be found out</p>\n","type":"Number"}],"return":{"description":"fractional part of x, i.e, {x}","type":"Number"},"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(windowWidth, windowHeight);\n  fill(0);\n  text(7345.73472742, 0, 50);\n  text(fract(7345.73472742), 0, 100);\n  text(1.4215e-15, 150, 50);\n  text(fract(1.4215e-15), 150, 100);\n}\n</code>\n</div>"],"alt":"2 rows of numbers, the first row having 8 numbers and the second having the fractional parts of those numbers.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/math.js","line":10,"description":"<p>Creates a new <a href=\"#/p5.Vector\">p5.Vector</a> (the datatype for storing vectors). This provides a\ntwo or three dimensional vector, specifically a Euclidean (also known as\ngeometric) vector. A vector is an entity that has both magnitude and\ndirection.</p>\n","itemtype":"method","name":"createVector","params":[{"name":"x","description":"<p>x component of the vector</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>z component of the vector</p>\n","type":"Number","optional":true}],"return":{"description":"","type":"p5.Vector"},"example":["\n<div><code>\nlet v1;\nfunction setup() {\n  createCanvas(100, 100);\n  stroke(255, 0, 255);\n  v1 = createVector(width / 2, height / 2);\n}\n\nfunction draw() {\n  background(255);\n  line(v1.x, v1.y, mouseX, mouseY);\n}\n</code></div>"],"alt":"draws a line from center of canvas to mouse pointer position.","class":"p5","module":"Math","submodule":"Vector"},{"file":"src/math/noise.js","line":36,"description":"<p>Returns the Perlin noise value at specified coordinates. Perlin noise is\na random sequence generator producing a more naturally ordered, harmonic\nsuccession of numbers compared to the standard <b>random()</b> function.\nIt was invented by Ken Perlin in the 1980s and been used since in\ngraphical applications to produce procedural textures, natural motion,\nshapes, terrains etc.<br /><br /> The main difference to the\n<b>random()</b> function is that Perlin noise is defined in an infinite\nn-dimensional space where each pair of coordinates corresponds to a\nfixed semi-random value (fixed only for the lifespan of the program; see\nthe <a href=\"#/p5/noiseSeed\">noiseSeed()</a> function). p5.js can compute 1D, 2D and 3D noise,\ndepending on the number of coordinates given. The resulting value will\nalways be between 0.0 and 1.0. The noise value can be animated by moving\nthrough the noise space as demonstrated in the example above. The 2nd\nand 3rd dimension can also be interpreted as time.<br /><br />The actual\nnoise is structured similar to an audio signal, in respect to the\nfunction's use of frequencies. Similar to the concept of harmonics in\nphysics, perlin noise is computed over several octaves which are added\ntogether for the final result. <br /><br />Another way to adjust the\ncharacter of the resulting sequence is the scale of the input\ncoordinates. As the function works within an infinite space the value of\nthe coordinates doesn't matter as such, only the distance between\nsuccessive coordinates does (eg. when using <b>noise()</b> within a\nloop). As a general rule the smaller the difference between coordinates,\nthe smoother the resulting noise sequence will be. Steps of 0.005-0.03\nwork best for most applications, but this will differ depending on use.</p>\n","itemtype":"method","name":"noise","params":[{"name":"x","description":"<p>x-coordinate in noise space</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate in noise space</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>z-coordinate in noise space</p>\n","type":"Number","optional":true}],"return":{"description":"Perlin noise value (between 0 and 1) at specified\n                     coordinates","type":"Number"},"example":["\n<div>\n<code>\nlet xoff = 0.0;\n\nfunction draw() {\n  background(204);\n  xoff = xoff + 0.01;\n  let n = noise(xoff) * width;\n  line(n, 0, n, height);\n}\n</code>\n</div>\n<div>\n<code>let noiseScale=0.02;\n\nfunction draw() {\n  background(0);\n  for (let x=0; x < width; x++) {\n    let noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);\n    stroke(noiseVal*255);\n    line(x, mouseY+noiseVal*80, x, height);\n  }\n}\n</code>\n</div>"],"alt":"vertical line moves left to right with updating noise values.\nhorizontal wave pattern effected by mouse x-position & updating noise values.","class":"p5","module":"Math","submodule":"Noise"},{"file":"src/math/noise.js","line":178,"description":"<p>Adjusts the character and level of detail produced by the Perlin noise\n function. Similar to harmonics in physics, noise is computed over\n several octaves. Lower octaves contribute more to the output signal and\n as such define the overall intensity of the noise, whereas higher octaves\n create finer grained details in the noise sequence.\nBy default, noise is computed over 4 octaves with each octave contributing\n exactly half than its predecessor, starting at 50% strength for the 1st\n octave. This falloff amount can be changed by adding an additional function\n parameter. Eg. a falloff factor of 0.75 means each octave will now have\n 75% impact (25% less) of the previous lower octave. Any value between\n 0.0 and 1.0 is valid, however note that values greater than 0.5 might\n result in greater than 1.0 values returned by <b>noise()</b>.\nBy changing these parameters, the signal created by the <b>noise()</b>\n function can be adapted to fit very specific needs and characteristics.</p>\n","itemtype":"method","name":"noiseDetail","params":[{"name":"lod","description":"<p>number of octaves to be used by the noise</p>\n","type":"Number"},{"name":"falloff","description":"<p>falloff factor for each octave</p>\n","type":"Number"}],"example":["\n <div>\n <code>\n let noiseVal;\n let noiseScale = 0.02;\nfunction setup() {\n   createCanvas(100, 100);\n }\nfunction draw() {\n   background(0);\n   for (let y = 0; y < height; y++) {\n     for (let x = 0; x < width / 2; x++) {\n       noiseDetail(2, 0.2);\n       noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);\n       stroke(noiseVal * 255);\n       point(x, y);\n       noiseDetail(8, 0.65);\n       noiseVal = noise(\n         (mouseX + x + width / 2) * noiseScale,\n         (mouseY + y) * noiseScale\n       );\n       stroke(noiseVal * 255);\n       point(x + width / 2, y);\n     }\n   }\n }\n </code>\n </div>"],"alt":"2 vertical grey smokey patterns affected my mouse x-position and noise.","class":"p5","module":"Math","submodule":"Noise"},{"file":"src/math/noise.js","line":243,"description":"<p>Sets the seed value for <b>noise()</b>. By default, <b>noise()</b>\nproduces different results each time the program is run. Set the\n<b>value</b> parameter to a constant to return the same pseudo-random\nnumbers each time the software is run.</p>\n","itemtype":"method","name":"noiseSeed","params":[{"name":"seed","description":"<p>the seed value</p>\n","type":"Number"}],"example":["\n<div>\n<code>let xoff = 0.0;\n\nfunction setup() {\n  noiseSeed(99);\n  stroke(0, 10);\n}\n\nfunction draw() {\n  xoff = xoff + .01;\n  let n = noise(xoff) * width;\n  line(n, 0, n, height);\n}\n</code>\n</div>"],"alt":"vertical grey lines drawing in pattern affected by noise.","class":"p5","module":"Math","submodule":"Noise"},{"file":"src/math/p5.Vector.js","line":65,"description":"<p>The x component of the vector</p>\n","itemtype":"property","name":"x","type":"Number","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":70,"description":"<p>The y component of the vector</p>\n","itemtype":"property","name":"y","type":"Number","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":75,"description":"<p>The z component of the vector</p>\n","itemtype":"property","name":"z","type":"Number","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":82,"description":"<p>Returns a string representation of a vector v by calling String(v)\nor v.toString(). This method is useful for logging vectors in the\nconsole.</p>\n","itemtype":"method","name":"toString","return":{"description":"","type":"String"},"example":["\n<div class = \"norender\">\n<code>\nfunction setup() {\n  let v = createVector(20, 30);\n  print(String(v)); // prints \"p5.Vector Object : [20, 30, 0]\"\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'black');\n\n  noStroke();\n  text(v1.toString(), 10, 25, 90, 75);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":132,"description":"<p>Sets the x, y, and z component of the vector using two or three separate\nvariables, the data from a <a href=\"#/p5.Vector\">p5.Vector</a>, or the values from a float array.</p>\n","itemtype":"method","name":"set","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nfunction setup() {\n  let v = createVector(1, 2, 3);\n  v.set(4, 5, 6); // Sets vector to [4, 5, 6]\n\n  let v1 = createVector(0, 0, 0);\n  let arr = [1, 2, 3];\n  v1.set(arr); // Sets vector to [1, 2, 3]\n}\n</code>\n</div>\n\n<div>\n<code>\nlet v0, v1;\nfunction setup() {\n  createCanvas(100, 100);\n\n  v0 = createVector(0, 0);\n  v1 = createVector(50, 50);\n}\n\nfunction draw() {\n  background(240);\n\n  drawArrow(v0, v1, 'black');\n  v1.set(v1.x + random(-1, 1), v1.y + random(-1, 1));\n\n  noStroke();\n  text('x: ' + round(v1.x) + ' y: ' + round(v1.y), 20, 90);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":132,"params":[{"name":"x","description":"<p>the x component of the vector</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>the y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>the z component of the vector</p>\n","type":"Number","optional":true}],"chainable":1},{"line":191,"params":[{"name":"value","description":"<p>the vector to set</p>\n","type":"p5.Vector|Number[]"}],"chainable":1}]},{"file":"src/math/p5.Vector.js","line":215,"description":"<p>Gets a copy of the vector, returns a <a href=\"#/p5.Vector\">p5.Vector</a> object.</p>\n","itemtype":"method","name":"copy","return":{"description":"the copy of the <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 2, 3);\nlet v2 = v1.copy();\nprint(v1.x === v2.x && v1.y === v2.y && v1.z === v2.z);\n// Prints \"true\"\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":238,"description":"<p>Adds x, y, and z components to a vector, adds one vector to another, or\nadds two independent vectors together. The version of the method that adds\ntwo vectors together is a static method and returns a <a href=\"#/p5.Vector\">p5.Vector</a>, the others\nacts directly on the vector. Additionally, you may provide arguments to this function as an array.\nSee the examples for more context.</p>\n","itemtype":"method","name":"add","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(1, 2, 3);\nv.add(4, 5, 6);\n// v's components are set to [5, 7, 9]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v = createVector(1, 2, 3);\n// Provide arguments as an array\nlet arr = [4, 5, 6];\nv.add(arr);\n// v's components are set to [5, 7, 9]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(1, 2, 3);\nlet v2 = createVector(2, 3, 4);\n\nlet v3 = p5.Vector.add(v1, v2);\n// v3 has components [3, 5, 7]\nprint(v3);\n</code>\n</div>\n\n<div>\n<code>\n// red vector + blue vector = purple vector\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(-30, 20);\n  drawArrow(v1, v2, 'blue');\n\n  let v3 = p5.Vector.add(v1, v2);\n  drawArrow(v0, v3, 'purple');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":238,"params":[{"name":"x","description":"<p>the x component of the vector to be added</p>\n","type":"Number"},{"name":"y","description":"<p>the y component of the vector to be added</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>the z component of the vector to be added</p>\n","type":"Number","optional":true}],"chainable":1},{"line":315,"params":[{"name":"value","description":"<p>the vector to add</p>\n","type":"p5.Vector|Number[]"}],"chainable":1},{"line":2040,"params":[{"name":"v1","description":"<p>a <a href=\"#/p5.Vector\">p5.Vector</a> to add</p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>a <a href=\"#/p5.Vector\">p5.Vector</a> to add</p>\n","type":"p5.Vector"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"the resulting <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":362,"description":"<p>Gives remainder of a vector when it is divided by another vector.\nSee examples for more context.</p>\n","itemtype":"method","name":"rem","chainable":1,"example":["\n<div class='norender'>\n<code>\nlet v = createVector(3, 4, 5);\nv.rem(2, 3, 4);\n// v's components are set to [1, 1, 1]\n</code>\n</div>\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(3, 4, 5);\nlet v2 = createVector(2, 3, 4);\n\nlet v3 = p5.Vector.rem(v1, v2);\n// v3 has components [1, 1, 1]\nprint(v3);\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":362,"params":[{"name":"x","description":"<p>the x component of divisor vector</p>\n","type":"Number"},{"name":"y","description":"<p>the y component of divisor vector</p>\n","type":"Number"},{"name":"z","description":"<p>the z component of divisor vector</p>\n","type":"Number"}],"chainable":1},{"line":391,"params":[{"name":"value","description":"<p>divisor vector</p>\n","type":"p5.Vector | Number[]"}],"chainable":1},{"line":2066,"params":[{"name":"v1","description":"<p>dividend <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>divisor <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"static":1},{"line":2072,"params":[{"name":"v1","description":"","type":"p5.Vector"},{"name":"v2","description":"","type":"p5.Vector"}],"static":1,"return":{"description":"the resulting <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":446,"description":"<p>Subtracts x, y, and z components from a vector, subtracts one vector from\nanother, or subtracts two independent vectors. The version of the method\nthat subtracts two vectors is a static method and returns a <a href=\"#/p5.Vector\">p5.Vector</a>, the\nother acts directly on the vector. Additionally, you may provide arguments to this function as an array.\nSee the examples for more context.</p>\n","itemtype":"method","name":"sub","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(4, 5, 6);\nv.sub(1, 1, 1);\n// v's components are set to [3, 4, 5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v = createVector(4, 5, 6);\n// Provide arguments as an array\nlet arr = [1, 1, 1];\nv.sub(arr);\n// v's components are set to [3, 4, 5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(2, 3, 4);\nlet v2 = createVector(1, 2, 3);\n\nlet v3 = p5.Vector.sub(v1, v2);\n// v3 has components [1, 1, 1]\nprint(v3);\n</code>\n</div>\n\n<div>\n<code>\n// red vector - blue vector = purple vector\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(70, 50);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(mouseX, mouseY);\n  drawArrow(v0, v2, 'blue');\n\n  let v3 = p5.Vector.sub(v1, v2);\n  drawArrow(v2, v3, 'purple');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":446,"params":[{"name":"x","description":"<p>the x component of the vector to subtract</p>\n","type":"Number"},{"name":"y","description":"<p>the y component of the vector to subtract</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>the z component of the vector to subtract</p>\n","type":"Number","optional":true}],"chainable":1},{"line":523,"params":[{"name":"value","description":"<p>the vector to subtract</p>\n","type":"p5.Vector|Number[]"}],"chainable":1},{"line":2091,"params":[{"name":"v1","description":"<p>a <a href=\"#/p5.Vector\">p5.Vector</a> to subtract from</p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>a <a href=\"#/p5.Vector\">p5.Vector</a> to subtract</p>\n","type":"p5.Vector"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"the resulting <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":547,"description":"<p>Multiplies the vector by a scalar, multiplies the x, y, and z components from a vector, or multiplies\nthe x, y, and z components of two independent vectors. When multiplying a vector by a scalar, the x, y,\nand z components of the vector are all multiplied by the scalar. When multiplying a vector by a vector,\nthe x, y, z components of both vectors are multiplied by each other\n(for example, with two vectors a and b: a.x * b.x, a.y * b.y, a.z * b.z). The static version of this method\ncreates a new <a href=\"#/p5.Vector\">p5.Vector</a> while the non static version acts on the vector\ndirectly. Additionally, you may provide arguments to this function as an array.\nSee the examples for more context.</p>\n","itemtype":"method","name":"mult","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(1, 2, 3);\nv.mult(2);\n// v's components are set to [2, 4, 6]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(1, 2, 3);\nlet v1 = createVector(2, 3, 4);\nv0.mult(v1); // v0's components are set to [2, 6, 12]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(1, 2, 3);\n// Provide arguments as an array\nlet arr = [2, 3, 4];\nv0.mult(arr); // v0's components are set to [2, 6, 12]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(1, 2, 3);\nlet v1 = createVector(2, 3, 4);\nconst result = p5.Vector.mult(v0, v1);\nprint(result); // result's components are set to [2, 6, 12]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(1, 2, 3);\nlet v2 = p5.Vector.mult(v1, 2);\n// v2 has components [2, 4, 6]\nprint(v2);\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(25, -25);\n  drawArrow(v0, v1, 'red');\n\n  let num = map(mouseX, 0, width, -2, 2, true);\n  let v2 = p5.Vector.mult(v1, num);\n  drawArrow(v0, v2, 'blue');\n\n  noStroke();\n  text('multiplied by ' + num.toFixed(2), 5, 90);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":547,"params":[{"name":"n","description":"<p>The number to multiply with the vector</p>\n","type":"Number"}],"chainable":1},{"line":640,"params":[{"name":"x","description":"<p>The number to multiply with the x component of the vector</p>\n","type":"Number"},{"name":"y","description":"<p>The number to multiply with the y component of the vector</p>\n","type":"Number"},{"name":"z","description":"<p>The number to multiply with the z component of the vector</p>\n","type":"Number","optional":true}],"chainable":1},{"line":648,"params":[{"name":"arr","description":"<p>The array to multiply with the components of the vector</p>\n","type":"Number[]"}],"chainable":1},{"line":654,"params":[{"name":"v","description":"<p>The vector to multiply with the components of the original vector</p>\n","type":"p5.Vector"}],"chainable":1},{"line":2120,"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 <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}},{"line":2129,"params":[{"name":"v","description":"","type":"p5.Vector"},{"name":"n","description":"","type":"Number"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1},{"line":2137,"params":[{"name":"v0","description":"","type":"p5.Vector"},{"name":"v1","description":"","type":"p5.Vector"},{"name":"target","description":"","type":"p5.Vector","optional":true}],"static":1},{"line":2145,"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":739,"description":"<p>Divides the vector by a scalar, divides a vector by the x, y, and z arguments, or divides the x, y, and\nz components of two vectors against each other. When dividing a vector by a scalar, the x, y,\nand z components of the vector are all divided by the scalar. When dividing a vector by a vector,\nthe x, y, z components of the source vector are treated as the dividend, and the x, y, z components\nof the argument is treated as the divisor (for example with two vectors a and b: a.x / b.x, a.y / b.y, a.z / b.z).\nThe static version of this method creates a\nnew <a href=\"#/p5.Vector\">p5.Vector</a> while the non static version acts on the vector directly.\nAdditionally, you may provide arguments to this function as an array.\nSee the examples for more context.</p>\n","itemtype":"method","name":"div","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(6, 4, 2);\nv.div(2); //v's components are set to [3, 2, 1]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(9, 4, 2);\nlet v1 = createVector(3, 2, 4);\nv0.div(v1); // v0's components are set to [3, 2, 0.5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(9, 4, 2);\n// Provide arguments as an array\nlet arr = [3, 2, 4];\nv0.div(arr); // v0's components are set to [3, 2, 0.5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(9, 4, 2);\nlet v1 = createVector(3, 2, 4);\nlet result = p5.Vector.div(v0, v1);\nprint(result); // result's components are set to [3, 2, 0.5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(6, 4, 2);\nlet v2 = p5.Vector.div(v1, 2);\n// v2 has components [3, 2, 1]\nprint(v2);\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 100);\n  let v1 = createVector(50, -50);\n  drawArrow(v0, v1, 'red');\n\n  let num = map(mouseX, 0, width, 10, 0.5, true);\n  let v2 = p5.Vector.div(v1, num);\n  drawArrow(v0, v2, 'blue');\n\n  noStroke();\n  text('divided by ' + num.toFixed(2), 10, 90);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":739,"params":[{"name":"n","description":"<p>The number to divide the vector by</p>\n","type":"Number"}],"chainable":1},{"line":832,"params":[{"name":"x","description":"<p>The number to divide with the x component of the vector</p>\n","type":"Number"},{"name":"y","description":"<p>The number to divide with the y component of the vector</p>\n","type":"Number"},{"name":"z","description":"<p>The number to divide with the z component of the vector</p>\n","type":"Number","optional":true}],"chainable":1},{"line":840,"params":[{"name":"arr","description":"<p>The array to divide the components of the vector by</p>\n","type":"Number[]"}],"chainable":1},{"line":846,"params":[{"name":"v","description":"<p>The vector to divide the components of the original vector by</p>\n","type":"p5.Vector"}],"chainable":1},{"line":2199,"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 <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}},{"line":2208,"params":[{"name":"v","description":"","type":"p5.Vector"},{"name":"n","description":"","type":"Number"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1},{"line":2216,"params":[{"name":"v0","description":"","type":"p5.Vector"},{"name":"v1","description":"","type":"p5.Vector"},{"name":"target","description":"","type":"p5.Vector","optional":true}],"static":1},{"line":2224,"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":944,"description":"<p>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).)</p>\n","itemtype":"method","name":"mag","return":{"description":"magnitude of the vector","type":"Number"},"example":["\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'black');\n\n  noStroke();\n  text('vector length: ' + v1.mag().toFixed(2), 10, 70, 90, 30);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>\n<div class=\"norender\">\n<code>\nlet v = createVector(20.0, 30.0, 40.0);\nlet m = v.mag();\nprint(m); // Prints \"53.85164807134504\"\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":944,"params":[],"return":{"description":"magnitude of the vector","type":"Number"}},{"line":2324,"params":[{"name":"vecT","description":"<p>the vector to return the magnitude of</p>\n","type":"p5.Vector"}],"static":1,"return":{"description":"the magnitude of vecT","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":992,"description":"<p>Calculates the squared magnitude of the vector and returns the result\nas a float (this is simply the equation <em>(x*x + y*y + z*z)</em>.)\nFaster if the real length is not required in the\ncase of comparing vectors, etc.</p>\n","itemtype":"method","name":"magSq","return":{"description":"squared magnitude of the vector","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(6, 4, 2);\nprint(v1.magSq()); // Prints \"56\"\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'black');\n\n  noStroke();\n  text('vector length squared: ' + v1.magSq().toFixed(2), 10, 45, 90, 55);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1046,"description":"<p>Calculates the dot product of two vectors. The version of the method\nthat computes the dot product of two independent vectors is a static\nmethod. See the examples for more context.</p>\n","itemtype":"method","name":"dot","return":{"description":"the dot product","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 2, 3);\nlet v2 = createVector(2, 3, 4);\n\nprint(v1.dot(v2)); // Prints \"20\"\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n//Static method\nlet v1 = createVector(1, 2, 3);\nlet v2 = createVector(3, 2, 1);\nprint(p5.Vector.dot(v1, v2)); // Prints \"10\"\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1046,"params":[{"name":"x","description":"<p>x component of the vector</p>\n","type":"Number"},{"name":"y","description":"<p>y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>z component of the vector</p>\n","type":"Number","optional":true}],"return":{"description":"the dot product","type":"Number"}},{"line":1076,"params":[{"name":"value","description":"<p>value component of the vector or a <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"return":{"description":"","type":"Number"}},{"line":2251,"params":[{"name":"v1","description":"<p>the first <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>the second <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"static":1,"return":{"description":"the dot product","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":1088,"description":"<p>Calculates and returns a vector composed of the cross product between\ntwo vectors. Both the static and non static methods return a new <a href=\"#/p5.Vector\">p5.Vector</a>.\nSee the examples for more context.</p>\n","itemtype":"method","name":"cross","return":{"description":"<a href=\"#/p5.Vector\">p5.Vector</a> composed of cross product","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 2, 3);\nlet v2 = createVector(1, 2, 3);\n\nlet v = v1.cross(v2); // v's components are [0, 0, 0]\nprint(v);\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(1, 0, 0);\nlet v2 = createVector(0, 1, 0);\n\nlet crossProduct = p5.Vector.cross(v1, v2);\n// crossProduct has components [0, 0, 1]\nprint(crossProduct);\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1088,"params":[{"name":"v","description":"<p><a href=\"#/p5.Vector\">p5.Vector</a> to be crossed</p>\n","type":"p5.Vector"}],"return":{"description":"<a href=\"#/p5.Vector\">p5.Vector</a> composed of cross product","type":"p5.Vector"}},{"line":2265,"params":[{"name":"v1","description":"<p>the first <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>the second <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"static":1,"return":{"description":"the cross product","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":1130,"description":"<p>Calculates the Euclidean distance between two points (considering a\npoint as a vector object).</p>\n","itemtype":"method","name":"dist","return":{"description":"the distance","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 0, 0);\nlet v2 = createVector(0, 1, 0);\n\nlet distance = v1.dist(v2); // distance is 1.4142...\nprint(distance);\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(1, 0, 0);\nlet v2 = createVector(0, 1, 0);\n\nlet distance = p5.Vector.dist(v1, v2);\n// distance is 1.4142...\nprint(distance);\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n\n  let v1 = createVector(70, 50);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(mouseX, mouseY);\n  drawArrow(v0, v2, 'blue');\n\n  noStroke();\n  text('distance between vectors: ' + v2.dist(v1).toFixed(2), 5, 50, 95, 50);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1130,"params":[{"name":"v","description":"<p>the x, y, and z coordinates of a <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"return":{"description":"the distance","type":"Number"}},{"line":2280,"params":[{"name":"v1","description":"<p>the first <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>the second <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"static":1,"return":{"description":"the distance","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":1201,"description":"<p>Normalize the vector to length 1 (make it a unit vector).</p>\n","itemtype":"method","name":"normalize","return":{"description":"normalized <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(10, 20, 2);\n// v has components [10.0, 20.0, 2.0]\nv.normalize();\n// v's components are set to\n// [0.4454354, 0.8908708, 0.089087084]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v_initial = createVector(10, 20, 2);\n// v_initial has components [10.0, 20.0, 2.0]\nlet v_normalized = p5.Vector.normalize(v_initial);\nprint(v_normalized);\n// returns a new vector with components set to\n// [0.4454354, 0.8908708, 0.089087084]\n// v_initial remains unchanged\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(mouseX - 50, mouseY - 50);\n\n  drawArrow(v0, v1, 'red');\n  v1.normalize();\n  drawArrow(v0, v1.mult(35), 'blue');\n\n  noFill();\n  ellipse(50, 50, 35 * 2);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1201,"params":[],"return":{"description":"normalized <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}},{"line":2341,"params":[{"name":"v","description":"<p>the vector to normalize</p>\n","type":"p5.Vector"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"v normalized to a length of 1","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":1271,"description":"<p>Limit the magnitude of this vector to the value used for the <b>max</b>\nparameter.</p>\n","itemtype":"method","name":"limit","params":[{"name":"max","description":"<p>the maximum magnitude for the vector</p>\n","type":"Number"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(10, 20, 2);\n// v has components [10.0, 20.0, 2.0]\nv.limit(5);\n// v's components are set to\n// [2.2271771, 4.4543543, 0.4454354]\n</code>\n</div>\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(mouseX - 50, mouseY - 50);\n\n  drawArrow(v0, v1, 'red');\n  drawArrow(v0, v1.limit(35), 'blue');\n\n  noFill();\n  ellipse(50, 50, 35 * 2);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1329,"description":"<p>Set the magnitude of this vector to the value used for the <b>len</b>\nparameter.</p>\n","itemtype":"method","name":"setMag","params":[{"name":"len","description":"<p>the new length for this vector</p>\n","type":"Number"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(10, 20, 2);\n// v has components [10.0, 20.0, 2.0]\nv.setMag(10);\n// v's components are set to [6.0, 8.0, 0.0]\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(50, 50);\n\n  drawArrow(v0, v1, 'red');\n\n  let length = map(mouseX, 0, width, 0, 141, true);\n  v1.setMag(length);\n  drawArrow(v0, v1, 'blue');\n\n  noStroke();\n  text('magnitude set to: ' + length.toFixed(2), 10, 70, 90, 30);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1385,"description":"<p>Calculate the angle of rotation for this vector(only 2D vectors).\np5.Vectors created using <a src=\"#/p5/createVector\">createVector()</a>\nwill take the current <a = src=\"#/p5/angleMode\">angleMode</a> into consideration, and give the angle\nin radians or degree accordingly.</p>\n","itemtype":"method","name":"heading","return":{"description":"the angle of rotation","type":"Number"},"example":["\n<div class = \"norender\">\n<code>\nfunction setup() {\n  let v1 = createVector(30, 50);\n  print(v1.heading()); // 1.0303768265243125\n\n  v1 = createVector(40, 50);\n  print(v1.heading()); // 0.8960553845713439\n\n  v1 = createVector(30, 70);\n  print(v1.heading()); // 1.1659045405098132\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(mouseX - 50, mouseY - 50);\n\n  drawArrow(v0, v1, 'black');\n\n  let myHeading = v1.heading();\n  noStroke();\n  text(\n    'vector heading: ' +\n      myHeading.toFixed(2) +\n      ' radians or ' +\n      degrees(myHeading).toFixed(2) +\n      ' degrees',\n    10,\n    50,\n    90,\n    50\n  );\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1457,"description":"<p>Rotate the vector to a specific angle (only 2D vectors), magnitude remains the\nsame</p>\n","itemtype":"method","name":"setHeading","params":[{"name":"angle","description":"<p>the angle of rotation</p>\n","type":"Number"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(10.0, 20.0);\n// result of v.heading() is 1.1071487177940904\nv.setHeading(Math.PI);\n// result of v.heading() is now 3.141592653589793\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1482,"description":"<p>Rotate the vector by an angle (only 2D vectors), magnitude remains the\nsame</p>\n","itemtype":"method","name":"rotate","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(10.0, 20.0);\n// v has components [10.0, 20.0, 0.0]\nv.rotate(HALF_PI);\n// v's components are set to [-20.0, 9.999999, 0.0]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// static function implementation\nlet v = createVector(10.0, 20.0);\n// v has components [10.0, 20.0, 0.0]\nlet rotated_v = p5.Vector.rotate(v, HALF_PI);\nconsole.log(rotated_v);\n// rotated_v's components are set to [-20.0, 9.999999, 0.0]\nconsole.log(v);\n// v's components remains the same (i.e, [10.0, 20.0, 0.0])\n</code>\n</div>\n\n<div>\n<code>\nlet angle = 0;\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(50, 0);\n\n  drawArrow(v0, v1.rotate(angle), 'black');\n  angle += 0.01;\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1482,"params":[{"name":"angle","description":"<p>the angle of rotation</p>\n","type":"Number"}],"chainable":1},{"line":2172,"params":[{"name":"v","description":"","type":"p5.Vector"},{"name":"angle","description":"","type":"Number"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1}]},{"file":"src/math/p5.Vector.js","line":1551,"description":"<p>Calculates and returns the angle (in radians) between two vectors.</p>\n","itemtype":"method","name":"angleBetween","params":[{"name":"value","description":"<p>the x, y, and z components of a <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"return":{"description":"the angle between (in radians)","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 0, 0);\nlet v2 = createVector(0, 1, 0);\n\nlet angle = v1.angleBetween(v2);\n// angle is PI/2\nprint(angle);\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n  let v0 = createVector(50, 50);\n\n  let v1 = createVector(50, 0);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(mouseX - 50, mouseY - 50);\n  drawArrow(v0, v2, 'blue');\n\n  let angleBetween = v1.angleBetween(v2);\n  noStroke();\n  text(\n    'angle between: ' +\n      angleBetween.toFixed(2) +\n      ' radians or ' +\n      degrees(angleBetween).toFixed(2) +\n      ' degrees',\n    10,\n    50,\n    90,\n    50\n  );\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1628,"description":"<p>Linear interpolate the vector to another vector</p>\n","itemtype":"method","name":"lerp","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(1, 1, 0);\n\nv.lerp(3, 3, 0, 0.5); // v now has components [2,2,0]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v1 = createVector(0, 0, 0);\nlet v2 = createVector(100, 100, 0);\n\nlet v3 = p5.Vector.lerp(v1, v2, 0.5);\n// v3 has components [50,50,0]\nprint(v3);\n</code>\n</div>\n\n<div>\n<code>\nlet step = 0.01;\nlet amount = 0;\n\nfunction draw() {\n  background(240);\n  let v0 = createVector(0, 0);\n\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(90, 90);\n  drawArrow(v0, v2, 'blue');\n\n  if (amount > 1 || amount < 0) {\n    step *= -1;\n  }\n  amount += step;\n  let v3 = p5.Vector.lerp(v1, v2, amount);\n\n  drawArrow(v0, v3, 'purple');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1628,"params":[{"name":"x","description":"<p>the x component</p>\n","type":"Number"},{"name":"y","description":"<p>the y component</p>\n","type":"Number"},{"name":"z","description":"<p>the z component</p>\n","type":"Number"},{"name":"amt","description":"<p>the amount of interpolation; some value between 0.0\n                        (old vector) and 1.0 (new vector). 0.9 is very near\n                        the new vector. 0.5 is halfway in between.</p>\n","type":"Number"}],"chainable":1},{"line":1701,"params":[{"name":"v","description":"<p>the <a href=\"#/p5.Vector\">p5.Vector</a> to lerp to</p>\n","type":"p5.Vector"},{"name":"amt","description":"","type":"Number"}],"chainable":1},{"line":2295,"params":[{"name":"v1","description":"","type":"p5.Vector"},{"name":"v2","description":"","type":"p5.Vector"},{"name":"amt","description":"","type":"Number"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"the lerped value","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":1717,"description":"<p>Reflect the incoming vector about a normal to a line in 2D, or about a normal to a plane in 3D\nThis method acts on the vector directly</p>\n","itemtype":"method","name":"reflect","params":[{"name":"surfaceNormal","description":"<p>the <a href=\"#/p5.Vector\">p5.Vector</a> to reflect about, will be normalized by this method</p>\n","type":"p5.Vector"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(4, 6); // incoming vector, this example vector is heading to the right and downward\nlet n = createVector(0, -1); // surface normal to a plane (this example normal points directly upwards)\nv.reflect(n); // v is reflected about the surface normal n.  v's components are now set to [4, -6]\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'red');\n\n  let n = createVector(0, -30);\n  drawArrow(v1, n, 'blue');\n\n  let r = v1.copy();\n  r.reflect(n);\n  drawArrow(v1, r, 'purple');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1772,"description":"<p>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 <b>p5.Vector.<a href=\"#/p5.Vector/copy\">copy()</a></b> method to copy into your own\narray.</p>\n","itemtype":"method","name":"array","return":{"description":"an Array with the 3 values","type":"Number[]"},"example":["\n<div class = \"norender\">\n<code>\nfunction setup() {\n  let v = createVector(20, 30);\n  print(v.array()); // Prints : Array [20, 30, 0]\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v = createVector(10.0, 20.0, 30.0);\nlet f = v.array();\nprint(f[0]); // Prints \"10.0\"\nprint(f[1]); // Prints \"20.0\"\nprint(f[2]); // Prints \"30.0\"\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1804,"description":"<p>Equality check against a <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","itemtype":"method","name":"equals","return":{"description":"whether the vectors are equals","type":"Boolean"},"example":["\n<div class = \"norender\">\n<code>\nlet v1 = createVector(5, 10, 20);\nlet v2 = createVector(5, 10, 20);\nlet v3 = createVector(13, 10, 19);\n\nprint(v1.equals(v2.x, v2.y, v2.z)); // true\nprint(v1.equals(v3.x, v3.y, v3.z)); // false\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v1 = createVector(10.0, 20.0, 30.0);\nlet v2 = createVector(10.0, 20.0, 30.0);\nlet v3 = createVector(0.0, 0.0, 0.0);\nprint(v1.equals(v2)); // true\nprint(v1.equals(v3)); // false\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1804,"params":[{"name":"x","description":"<p>the x component of the vector</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>the y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>the z component of the vector</p>\n","type":"Number","optional":true}],"return":{"description":"whether the vectors are equals","type":"Boolean"}},{"line":1834,"params":[{"name":"value","description":"<p>the vector to compare</p>\n","type":"p5.Vector|Array"}],"return":{"description":"","type":"Boolean"}}]},{"file":"src/math/p5.Vector.js","line":1859,"description":"<p>Make a new 2D vector from an angle</p>\n","itemtype":"method","name":"fromAngle","static":1,"params":[{"name":"angle","description":"<p>the desired angle, in radians (unaffected by <a href=\"#/p5/angleMode\">angleMode</a>)</p>\n","type":"Number"},{"name":"length","description":"<p>the length of the new vector (defaults to 1)</p>\n","type":"Number","optional":true}],"return":{"description":"the new <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div>\n<code>\nfunction draw() {\n  background(200);\n\n  // Create a variable, proportional to the mouseX,\n  // varying from 0-360, to represent an angle in degrees.\n  let myDegrees = map(mouseX, 0, width, 0, 360);\n\n  // Display that variable in an onscreen text.\n  // (Note the nfc() function to truncate additional decimal places,\n  // and the \"\\xB0\" character for the degree symbol.)\n  let readout = 'angle = ' + nfc(myDegrees, 1) + '\\xB0';\n  noStroke();\n  fill(0);\n  text(readout, 5, 15);\n\n  // Create a p5.Vector using the fromAngle function,\n  // and extract its x and y components.\n  let v = p5.Vector.fromAngle(radians(myDegrees), 30);\n  let vx = v.x;\n  let vy = v.y;\n\n  push();\n  translate(width / 2, height / 2);\n  noFill();\n  stroke(150);\n  line(0, 0, 30, 0);\n  stroke(0);\n  line(0, 0, vx, vy);\n  pop();\n}\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1910,"description":"<p>Make a new 3D vector from a pair of ISO spherical angles</p>\n","itemtype":"method","name":"fromAngles","static":1,"params":[{"name":"theta","description":"<p>the polar angle, in radians (zero is up)</p>\n","type":"Number"},{"name":"phi","description":"<p>the azimuthal angle, in radians\n                              (zero is out of the screen)</p>\n","type":"Number"},{"name":"length","description":"<p>the length of the new vector (defaults to 1)</p>\n","type":"Number","optional":true}],"return":{"description":"the new <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  fill(255);\n  noStroke();\n}\nfunction draw() {\n  background(255);\n\n  let t = millis() / 1000;\n\n  // add three point lights\n  pointLight(color('#f00'), p5.Vector.fromAngles(t * 1.0, t * 1.3, 100));\n  pointLight(color('#0f0'), p5.Vector.fromAngles(t * 1.1, t * 1.2, 100));\n  pointLight(color('#00f'), p5.Vector.fromAngles(t * 1.2, t * 1.1, 100));\n\n  sphere(35);\n}\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1959,"description":"<p>Make a new 2D unit vector from a random angle</p>\n","itemtype":"method","name":"random2D","static":1,"return":{"description":"the new <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v = p5.Vector.random2D();\n// May make v's attributes something like:\n// [0.61554617, -0.51195765, 0.0] or\n// [-0.4695841, -0.14366731, 0.0] or\n// [0.6091097, -0.22805278, 0.0]\nprint(v);\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  frameRate(1);\n}\n\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = p5.Vector.random2D();\n  drawArrow(v0, v1.mult(50), 'black');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2012,"description":"<p>Make a new random 3D unit vector.</p>\n","itemtype":"method","name":"random3D","static":1,"return":{"description":"the new <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v = p5.Vector.random3D();\n// May make v's attributes something like:\n// [0.61554617, -0.51195765, 0.599168] or\n// [-0.4695841, -0.14366731, -0.8711202] or\n// [0.6091097, -0.22805278, -0.7595902]\nprint(v);\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2116,"description":"<p>Multiplies a vector by a scalar and returns a new vector.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2168,"description":"<p>Rotates the vector (only 2D vectors) by the given angle, magnitude remains the same and returns a new vector.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2195,"description":"<p>Divides a vector by a scalar and returns a new vector.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2248,"description":"<p>Calculates the dot product of two vectors.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2262,"description":"<p>Calculates the cross product of two vectors.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2276,"description":"<p>Calculates the Euclidean distance between two points (considering a\npoint as a vector object).</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2291,"description":"<p>Linear interpolate a vector to another vector and return the result as a\nnew vector.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2320,"description":"<p>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).)</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2338,"description":"<p>Normalize the vector to length 1 (make it a unit vector).</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/random.js","line":37,"description":"<p>Sets the seed value for <a href=\"#/p5/random\">random()</a>.</p>\n<p>By default, <a href=\"#/p5/random\">random()</a> produces different results each time the program\nis run. Set the seed parameter to a constant to return the same\npseudo-random numbers each time the software is run.</p>\n","itemtype":"method","name":"randomSeed","params":[{"name":"seed","description":"<p>the seed value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nrandomSeed(99);\nfor (let i = 0; i < 100; i++) {\n  let r = random(0, 255);\n  stroke(r);\n  line(i, 0, i, 100);\n}\n</code>\n</div>"],"alt":"many vertical lines drawn in white, black or grey.","class":"p5","module":"Math","submodule":"Random"},{"file":"src/math/random.js","line":66,"description":"<p>Return a random floating-point number.</p>\n<p>Takes either 0, 1 or 2 arguments.</p>\n<p>If no argument is given, returns a random number from 0\nup to (but not including) 1.</p>\n<p>If one argument is given and it is a number, returns a random number from 0\nup to (but not including) the number.</p>\n<p>If one argument is given and it is an array, returns a random element from\nthat array.</p>\n<p>If two arguments are given, returns a random number from the\nfirst argument up to (but not including) the second argument.</p>\n","itemtype":"method","name":"random","return":{"description":"the random number","type":"Number"},"example":["\n<div>\n<code>\nfor (let i = 0; i < 100; i++) {\n  let r = random(50);\n  stroke(r * 5);\n  line(50, i, 50 + r, i);\n}\n</code>\n</div>\n<div>\n<code>\nfor (let i = 0; i < 100; i++) {\n  let r = random(-50, 50);\n  line(50, i, 50 + r, i);\n}\n</code>\n</div>\n<div>\n<code>\n// Get a random element from an array using the random(Array) syntax\nlet words = ['apple', 'bear', 'cat', 'dog'];\nlet word = random(words); // select random word\ntext(word, 10, 50); // draw the word\n</code>\n</div>"],"alt":"100 horizontal lines from center canvas to right. size+fill change each time\n100 horizontal lines from center of canvas. height & side change each render\nword displayed at random. Either apple, bear, cat, or dog","class":"p5","module":"Math","submodule":"Random","overloads":[{"line":66,"params":[{"name":"min","description":"<p>the lower bound (inclusive)</p>\n","type":"Number","optional":true},{"name":"max","description":"<p>the upper bound (exclusive)</p>\n","type":"Number","optional":true}],"return":{"description":"the random number","type":"Number"}},{"line":119,"params":[{"name":"choices","description":"<p>the array to choose from</p>\n","type":"Array"}],"return":{"description":"the random element from the array","type":"*"}}]},{"file":"src/math/random.js","line":153,"description":"<p>Returns a random number fitting a Gaussian, or\n normal, distribution. There is theoretically no minimum or maximum\n value that <a href=\"#/p5/randomGaussian\">randomGaussian()</a> might return. Rather, there is\n just a very low probability that values far from the mean will be\n returned; and a higher probability that numbers near the mean will\n be returned.\nTakes either 0, 1 or 2 arguments.<br>\n If no args, returns a mean of 0 and standard deviation of 1.<br>\n If one arg, that arg is the mean (standard deviation is 1).<br>\n If two args, first is mean, second is standard deviation.</p>\n","itemtype":"method","name":"randomGaussian","params":[{"name":"mean","description":"<p>the mean</p>\n","type":"Number","optional":true},{"name":"sd","description":"<p>the standard deviation</p>\n","type":"Number","optional":true}],"return":{"description":"the random number","type":"Number"},"example":["\n <div>\n <code>\n for (let y = 0; y < 100; y++) {\n   let x = randomGaussian(50, 15);\n   line(50, y, x, y);\n }\n </code>\n </div>\n <div>\n <code>\n let distribution = new Array(360);\nfunction setup() {\n   createCanvas(100, 100);\n   for (let i = 0; i < distribution.length; i++) {\n     distribution[i] = floor(randomGaussian(0, 15));\n   }\n }\nfunction draw() {\n   background(204);\n  translate(width / 2, width / 2);\n  for (let i = 0; i < distribution.length; i++) {\n     rotate(TWO_PI / distribution.length);\n     stroke(0);\n     let dist = abs(distribution[i]);\n     line(0, 0, dist, 0);\n   }\n }\n </code>\n </div>"],"alt":"100 horizontal lines from center of canvas. height & side change each render\n black lines radiate from center of canvas. size determined each render","class":"p5","module":"Math","submodule":"Random"},{"file":"src/math/trigonometry.js","line":18,"description":"<p>The inverse of <a href=\"#/p5/cos\">cos()</a>, returns the arc cosine of a value.\nThis function expects the values in the range of -1 to 1 and values are returned in\nthe range 0 to PI (3.1415927) if the angleMode is RADIANS or 0 to 180 if the\nangle mode is DEGREES.</p>\n","itemtype":"method","name":"acos","params":[{"name":"value","description":"<p>the value whose arc cosine is to be returned</p>\n","type":"Number"}],"return":{"description":"the arc cosine of the given value","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet a = PI;\nlet c = cos(a);\nlet ac = acos(c);\n// Prints: \"3.1415927 : -1.0 : 3.1415927\"\nprint(a + ' : ' + c + ' : ' + ac);\n</code>\n</div>\n\n<div class= “norender\">\n<code>\nlet a = PI + PI / 4.0;\nlet c = cos(a);\nlet ac = acos(c);\n// Prints: \"3.926991 : -0.70710665 : 2.3561943\"\nprint(a + ' : ' + c + ' : ' + ac);\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":53,"description":"<p>The inverse of <a href=\"#/p5/sin\">sin()</a>, returns the arc sine of a value.\nThis function expects the values in the range of -1 to 1 and values are returned\nin the range -PI/2 to PI/2 if the angleMode is RADIANS or -90 to 90 if the angle\nmode is DEGREES.</p>\n","itemtype":"method","name":"asin","params":[{"name":"value","description":"<p>the value whose arc sine is to be returned</p>\n","type":"Number"}],"return":{"description":"the arc sine of the given value","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet a = PI / 3.0;\nlet s = sin(a);\nlet as = asin(s);\n// Prints: \"1.0471975 : 0.86602540 : 1.0471975\"\nprint(a + ' : ' + s + ' : ' + as);\n</code>\n</div>\n\n<div class= “norender\">\n<code>\nlet a = PI + PI / 3.0;\nlet s = sin(a);\nlet as = asin(s);\n// Prints: \"4.1887902 : -0.86602540 : -1.0471975\"\nprint(a + ' : ' + s + ' : ' + as);\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":88,"description":"<p>The inverse of <a href=\"#/p5/tan\">tan()</a>, returns the arc tangent of a value.\nThis function expects the values in the range of -Infinity to Infinity (exclusive) and\nvalues are returned in the range -PI/2 to PI/2 if the angleMode is RADIANS or\n-90 to 90 if the angle mode is DEGREES.</p>\n","itemtype":"method","name":"atan","params":[{"name":"value","description":"<p>the value whose arc tangent is to be returned</p>\n","type":"Number"}],"return":{"description":"the arc tangent of the given value","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet a = PI / 3.0;\nlet t = tan(a);\nlet at = atan(t);\n// Prints: \"1.0471975 : 1.7320508 : 1.0471975\"\nprint(a + ' : ' + t + ' : ' + at);\n</code>\n</div>\n\n<div class= “norender\">\n<code>\nlet a = PI + PI / 3.0;\nlet t = tan(a);\nlet at = atan(t);\n// Prints: \"4.1887902 : 1.7320508 : 1.0471975\"\nprint(a + ' : ' + t + ' : ' + at);\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":123,"description":"<p>Calculates the angle (in radians) from a specified point to the coordinate\norigin as measured from the positive x-axis. Values are returned as a\nfloat in the range from PI to -PI if the angleMode is RADIANS or 180 to\n-180 if the angleMode is DEGREES. The atan2<a href=\"#/p5/\">()</a> function is\nmost often used for orienting geometry to the position of the cursor.</p>\n<p>Note: The y-coordinate of the point is the first parameter, and the\nx-coordinate is the second parameter, due the the structure of calculating\nthe tangent.</p>\n","itemtype":"method","name":"atan2","params":[{"name":"y","description":"<p>y-coordinate of the point</p>\n","type":"Number"},{"name":"x","description":"<p>x-coordinate of the point</p>\n","type":"Number"}],"return":{"description":"the arc tangent of the given point","type":"Number"},"example":["\n<div>\n<code>\nfunction draw() {\n  background(204);\n  translate(width / 2, height / 2);\n  let a = atan2(mouseY - height / 2, mouseX - width / 2);\n  rotate(a);\n  rect(-30, -5, 60, 10);\n}\n</code>\n</div>"],"alt":"60 by 10 rect at center of canvas rotates with mouse movements","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":159,"description":"<p>Calculates the cosine of an angle. This function takes into account the\ncurrent <a href=\"#/p5/angleMode\">angleMode</a>. Values are returned in the range -1 to 1.</p>\n","itemtype":"method","name":"cos","params":[{"name":"angle","description":"<p>the angle</p>\n","type":"Number"}],"return":{"description":"the cosine of the angle","type":"Number"},"example":["\n<div>\n<code>\nlet a = 0.0;\nlet inc = TWO_PI / 25.0;\nfor (let i = 0; i < 25; i++) {\n  line(i * 4, 50, i * 4, 50 + cos(a) * 40.0);\n  a = a + inc;\n}\n</code>\n</div>"],"alt":"vertical black lines form wave patterns, extend-down on left and right side","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":186,"description":"<p>Calculates the sine of an angle. This function takes into account the\ncurrent <a href=\"#/p5/angleMode\">angleMode</a>. Values are returned in the range -1 to 1.</p>\n","itemtype":"method","name":"sin","params":[{"name":"angle","description":"<p>the angle</p>\n","type":"Number"}],"return":{"description":"the sine of the angle","type":"Number"},"example":["\n<div>\n<code>\nlet a = 0.0;\nlet inc = TWO_PI / 25.0;\nfor (let i = 0; i < 25; i++) {\n  line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);\n  a = a + inc;\n}\n</code>\n</div>"],"alt":"vertical black lines extend down and up from center to form wave pattern","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":213,"description":"<p>Calculates the tangent of an angle. This function takes into account\nthe current <a href=\"#/p5/angleMode\">angleMode</a>. Values are returned in the range of all real numbers.</p>\n","itemtype":"method","name":"tan","params":[{"name":"angle","description":"<p>the angle</p>\n","type":"Number"}],"return":{"description":"the tangent of the angle","type":"Number"},"example":["\n<div>\n<code>\nlet a = 0.0;\nlet inc = TWO_PI / 50.0;\nfor (let i = 0; i < 100; i = i + 2) {\n  line(i, 50, i, 50 + tan(a) * 2.0);\n  a = a + inc;\n}\n</code>"],"alt":"vertical black lines end down and up from center to form spike pattern","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":239,"description":"<p>Converts a radian measurement to its corresponding value in degrees.\nRadians and degrees are two ways of measuring the same thing. There are\n360 degrees in a circle and 2*PI radians in a circle. For example,\n90° = PI/2 = 1.5707964. This function does not take into account the\ncurrent <a href=\"#/p5/angleMode\">angleMode</a>.</p>\n","itemtype":"method","name":"degrees","params":[{"name":"radians","description":"<p>the radians value to convert to degrees</p>\n","type":"Number"}],"return":{"description":"the converted angle","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet rad = PI / 4;\nlet deg = degrees(rad);\nprint(rad + ' radians is ' + deg + ' degrees');\n// Prints: 0.7853981633974483 radians is 45 degrees\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":262,"description":"<p>Converts a degree measurement to its corresponding value in radians.\nRadians and degrees are two ways of measuring the same thing. There are\n360 degrees in a circle and 2*PI radians in a circle. For example,\n90° = PI/2 = 1.5707964. This function does not take into account the\ncurrent <a href=\"#/p5/angleMode\">angleMode</a>.</p>\n","itemtype":"method","name":"radians","params":[{"name":"degrees","description":"<p>the degree value to convert to radians</p>\n","type":"Number"}],"return":{"description":"the converted angle","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet deg = 45.0;\nlet rad = radians(deg);\nprint(deg + ' degrees is ' + rad + ' radians');\n// Prints: 45 degrees is 0.7853981633974483 radians\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":285,"description":"<p>Sets the current mode of p5 to given mode. Default mode is RADIANS.</p>\n","itemtype":"method","name":"angleMode","params":[{"name":"mode","description":"<p>either RADIANS or DEGREES</p>\n","type":"Constant"}],"example":["\n<div>\n<code>\nfunction draw() {\n  background(204);\n  angleMode(DEGREES); // Change the mode to DEGREES\n  let a = atan2(mouseY - height / 2, mouseX - width / 2);\n  translate(width / 2, height / 2);\n  push();\n  rotate(a);\n  rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees\n  pop();\n  angleMode(RADIANS); // Change the mode to RADIANS\n  rotate(a); // variable a stays the same\n  rect(-40, -5, 20, 10); // Smaller rectangle is rotating in radians\n}\n</code>\n</div>"],"alt":"40 by 10 rect in center rotates with mouse moves. 20 by 10 rect moves faster.","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/typography/attributes.js","line":11,"description":"<p>Sets the current alignment for drawing text. Accepts two\narguments: horizAlign (LEFT, CENTER, or RIGHT) and\nvertAlign (TOP, BOTTOM, CENTER, or BASELINE).</p>\n<p>The horizAlign parameter is in reference to the x value\nof the <a href=\"#/p5/text\">text()</a> function, while the vertAlign parameter\nis in reference to the y value.</p>\n<p>So if you write textAlign(LEFT), you are aligning the left\nedge of your text to the x value you give in <a href=\"#/p5/text\">text()</a>.\nIf you write textAlign(RIGHT, TOP), you are aligning the right edge\nof your text to the x value and the top of edge of the text\nto the y value.</p>\n","itemtype":"method","name":"textAlign","chainable":1,"example":["\n<div>\n<code>\ntextSize(16);\ntextAlign(RIGHT);\ntext('ABCD', 50, 30);\ntextAlign(CENTER);\ntext('EFGH', 50, 50);\ntextAlign(LEFT);\ntext('IJKL', 50, 70);\n</code>\n</div>\n\n<div>\n<code>\ntextSize(16);\nstrokeWeight(0.5);\n\nline(0, 12, width, 12);\ntextAlign(CENTER, TOP);\ntext('TOP', 0, 12, width);\n\nline(0, 37, width, 37);\ntextAlign(CENTER, CENTER);\ntext('CENTER', 0, 37, width);\n\nline(0, 62, width, 62);\ntextAlign(CENTER, BASELINE);\ntext('BASELINE', 0, 62, width);\n\nline(0, 87, width, 87);\ntextAlign(CENTER, BOTTOM);\ntext('BOTTOM', 0, 87, width);\n</code>\n</div>"],"alt":"Letters ABCD displayed at top left, EFGH at center and IJKL at bottom right.\nThe names of the four vertical alignments (TOP, CENTER, BASELINE & BOTTOM) rendered each showing that alignment's placement relative to a horizontal line.","class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":11,"params":[{"name":"horizAlign","description":"<p>horizontal alignment, either LEFT,\n                           CENTER, or RIGHT</p>\n","type":"Constant"},{"name":"vertAlign","description":"<p>vertical alignment, either TOP,\n                           BOTTOM, CENTER, or BASELINE</p>\n","type":"Constant","optional":true}],"chainable":1},{"line":72,"params":[],"return":{"description":"","type":"Object"}}]},{"file":"src/typography/attributes.js","line":81,"description":"<p>Sets/gets the spacing, in pixels, between lines of text. This setting will be\nused in all subsequent calls to the <a href=\"#/p5/text\">text()</a> function.</p>\n","itemtype":"method","name":"textLeading","chainable":1,"example":["\n<div>\n<code>\nlet lines = 'L1\\nL2\\nL3'; // \"\\n\" is a \"new line\" character\ntextSize(12);\n\ntextLeading(10);\ntext(lines, 10, 25);\n\ntextLeading(20);\ntext(lines, 40, 25);\n\ntextLeading(30);\ntext(lines, 70, 25);\n</code>\n</div>"],"alt":"A set of L1 L2 & L3 displayed vertically 3 times. spacing increases for each set","class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":81,"params":[{"name":"leading","description":"<p>the size in pixels for spacing between lines</p>\n","type":"Number"}],"chainable":1},{"line":109,"params":[],"return":{"description":"","type":"Number"}}]},{"file":"src/typography/attributes.js","line":118,"description":"<p>Sets/gets the current font size. This size will be used in all subsequent\ncalls to the <a href=\"#/p5/text\">text()</a> function. Font size is measured in pixels.</p>\n","itemtype":"method","name":"textSize","chainable":1,"example":["\n<div>\n<code>\ntextSize(12);\ntext('Font Size 12', 10, 30);\ntextSize(14);\ntext('Font Size 14', 10, 60);\ntextSize(16);\ntext('Font Size 16', 10, 90);\n</code>\n</div>"],"alt":"'Font Size 12' displayed small, 'Font Size 14' medium & 'Font Size 16' large","class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":118,"params":[{"name":"theSize","description":"<p>the size of the letters in units of pixels</p>\n","type":"Number"}],"chainable":1},{"line":141,"params":[],"return":{"description":"","type":"Number"}}]},{"file":"src/typography/attributes.js","line":150,"description":"<p>Sets/gets the style of the text for system fonts to NORMAL, ITALIC, BOLD or BOLDITALIC.\nNote: this may be is overridden by CSS styling. For non-system fonts\n(opentype, truetype, etc.) please load styled fonts instead.</p>\n","itemtype":"method","name":"textStyle","chainable":1,"example":["\n<div>\n<code>\nstrokeWeight(0);\ntextSize(12);\ntextStyle(NORMAL);\ntext('Font Style Normal', 10, 15);\ntextStyle(ITALIC);\ntext('Font Style Italic', 10, 40);\ntextStyle(BOLD);\ntext('Font Style Bold', 10, 65);\ntextStyle(BOLDITALIC);\ntext('Font Style Bold Italic', 10, 90);\n</code>\n</div>"],"alt":"Words Font Style Normal displayed normally, Italic in italic, bold in bold and bold italic in bold italics.","class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":150,"params":[{"name":"theStyle","description":"<p>styling for text, either NORMAL,\n                           ITALIC, BOLD or BOLDITALIC</p>\n","type":"Constant"}],"chainable":1},{"line":178,"params":[],"return":{"description":"","type":"String"}}]},{"file":"src/typography/attributes.js","line":187,"description":"<p>Calculates and returns the width of any character or text string.</p>\n","itemtype":"method","name":"textWidth","params":[{"name":"theText","description":"<p>the String of characters to measure</p>\n","type":"String"}],"return":{"description":"the calculated width","type":"Number"},"example":["\n<div>\n<code>\ntextSize(28);\n\nlet aChar = 'P';\nlet cWidth = textWidth(aChar);\ntext(aChar, 0, 40);\nline(cWidth, 0, cWidth, 50);\n\nlet aString = 'p5.js';\nlet sWidth = textWidth(aString);\ntext(aString, 0, 85);\nline(sWidth, 50, sWidth, 100);\n</code>\n</div>"],"alt":"Letter P and p5.js are displayed with vertical lines at end.","class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/attributes.js","line":222,"description":"<p>Returns the ascent of the current font at its current size. The ascent\nrepresents the distance, in pixels, of the tallest character above\nthe baseline.</p>\n","itemtype":"method","name":"textAscent","return":{"description":"","type":"Number"},"example":["\n<div>\n<code>\nlet base = height * 0.75;\nlet scalar = 0.8; // Different for each font\n\ntextSize(32); // Set initial text size\nlet asc = textAscent() * scalar; // Calc ascent\nline(0, base - asc, width, base - asc);\ntext('dp', 0, base); // Draw text on baseline\n\ntextSize(64); // Increase text size\nasc = textAscent() * scalar; // Recalc ascent\nline(40, base - asc, width, base - asc);\ntext('dp', 40, base); // Draw text on baseline\n</code>\n</div>"],"class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/attributes.js","line":251,"description":"<p>Returns the descent of the current font at its current size. The descent\nrepresents the distance, in pixels, of the character with the longest\ndescender below the baseline.</p>\n","itemtype":"method","name":"textDescent","return":{"description":"","type":"Number"},"example":["\n<div>\n<code>\nlet base = height * 0.75;\nlet scalar = 0.8; // Different for each font\n\ntextSize(32); // Set initial text size\nlet desc = textDescent() * scalar; // Calc ascent\nline(0, base + desc, width, base + desc);\ntext('dp', 0, base); // Draw text on baseline\n\ntextSize(64); // Increase text size\ndesc = textDescent() * scalar; // Recalc ascent\nline(40, base + desc, width, base + desc);\ntext('dp', 40, base); // Draw text on baseline\n</code>\n</div>"],"class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/attributes.js","line":280,"description":"<p>Helper function to measure ascent and descent.</p>\n","class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/loading_displaying.js","line":16,"description":"<p>Loads an opentype font file (.otf, .ttf) from a file or a URL,\nand returns a PFont Object. This method is asynchronous,\nmeaning it may not finish before the next line in your sketch\nis executed.</p>\n<p>The path to the font should be relative to the HTML file\nthat links in your sketch. Loading fonts from a URL or other\nremote location may be blocked due to your browser's built-in\nsecurity.</p>\n","itemtype":"method","name":"loadFont","params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/loadFont\">loadFont()</a> completes</p>\n","type":"Function","optional":true},{"name":"onError","description":"<p>function to be executed if\n                                   an error occurs</p>\n","type":"Function","optional":true}],"return":{"description":"<a href=\"#/p5.Font\">p5.Font</a> object","type":"p5.Font"},"example":["\n\nCalling loadFont() inside <a href=\"#/p5/preload\">preload()</a> guarantees\nthat the load operation will have completed before <a href=\"#/p5/setup\">setup()</a>\nand <a href=\"#/p5/draw\">draw()</a> are called.\n\n<div><code>\nlet myFont;\nfunction preload() {\n  myFont = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n  fill('#ED225D');\n  textFont(myFont);\n  textSize(36);\n  text('p5*js', 10, 50);\n}\n</code></div>\n\nOutside of <a href=\"#/p5/preload\">preload()</a>, you may supply a\ncallback function to handle the object:\n\n<div><code>\nfunction setup() {\n  loadFont('assets/inconsolata.otf', drawText);\n}\n\nfunction drawText(font) {\n  fill('#ED225D');\n  textFont(font, 36);\n  text('p5*js', 10, 50);\n}\n</code></div>\n\nYou can also use the font filename string (without the file extension) to\nstyle other HTML elements.\n\n<div><code>\nfunction preload() {\n  loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n  let myDiv = createDiv('hello there');\n  myDiv.style('font-family', 'Inconsolata');\n}\n</code></div>"],"alt":"p5*js in p5's theme dark pink\np5*js in p5's theme dark pink","class":"p5","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/loading_displaying.js","line":140,"description":"<p>Draws text to the screen. Displays the information specified in the first\nparameter on the screen in the position specified by the additional\nparameters. A default font will be used unless a font is set with the\n<a href=\"#/p5/textFont\">textFont()</a> function and a default size will be\nused unless a font is set with <a href=\"#/p5/textSize\">textSize()</a>. Change\nthe color of the text with the <a href=\"#/p5/fill\">fill()</a> function. Change\nthe outline of the text with the <a href=\"#/p5/stroke\">stroke()</a> and\n<a href=\"#/p5/strokeWeight\">strokeWeight()</a> functions.</p>\n<p>The text displays in relation to the <a href=\"#/p5/textAlign\">textAlign()</a>\nfunction, which gives the option to draw to the left, right, and center of the\ncoordinates.</p>\n<p>The x2 and y2 parameters define a rectangular area to display within and\nmay only be used with string data. When these parameters are specified,\nthey are interpreted based on the current <a href=\"#/p5/rectMode\">rectMode()</a>\nsetting. Text that does not fit completely within the rectangle specified will\nnot be drawn to the screen. If x2 and y2 are not specified, the baseline\nalignment is the default, which means that the text will be drawn upwards\nfrom x and y.</p>\n<p><b>WEBGL</b>: Only opentype/truetype fonts are supported. You must load a font\nusing the <a href=\"#/p5/loadFont\">loadFont()</a> method (see the example above).\n<a href=\"#/p5/stroke\">stroke()</a> currently has no effect in webgl mode.</p>\n","itemtype":"method","name":"text","params":[{"name":"str","description":"<p>the alphanumeric\n                                            symbols to be displayed</p>\n","type":"String|Object|Array|Number|Boolean"},{"name":"x","description":"<p>x-coordinate of text</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of text</p>\n","type":"Number"},{"name":"x2","description":"<p>by default, the width of the text box,\n                    see <a href=\"#/p5/rectMode\">rectMode()</a> for more info</p>\n","type":"Number","optional":true},{"name":"y2","description":"<p>by default, the height of the text box,\n                    see <a href=\"#/p5/rectMode\">rectMode()</a> for more info</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\ntextSize(32);\ntext('word', 10, 30);\nfill(0, 102, 153);\ntext('word', 10, 60);\nfill(0, 102, 153, 51);\ntext('word', 10, 90);\n</code>\n</div>\n<div>\n<code>\nlet s = 'The quick brown fox jumped over the lazy dog.';\nfill(50);\ntext(s, 10, 10, 70, 80); // Text wraps within text box\n</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\nlet inconsolata;\nfunction preload() {\n  inconsolata = loadFont('assets/inconsolata.otf');\n}\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  textFont(inconsolata);\n  textSize(width / 3);\n  textAlign(CENTER, CENTER);\n}\nfunction draw() {\n  background(0);\n  let time = millis();\n  rotateX(time / 1000);\n  rotateZ(time / 1234);\n  text('p5.js', 0, 0);\n}\n</code>\n</div>"],"alt":"'word' displayed 3 times going from black, blue to translucent blue\nThe text 'The quick brown fox jumped over the lazy dog' displayed.\nThe text 'p5.js' spinning in 3d","class":"p5","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/loading_displaying.js","line":229,"description":"<p>Sets the current font that will be drawn with the <a href=\"#/p5/text\">text()</a> function.\nIf textFont() is called without any argument, it will return the current font if one has\nbeen set already. If not, it will return the name of the default font as a string.\nIf textFont() is called with a font to use, it will return the p5 object.</p>\n<p><b>WEBGL</b>: Only fonts loaded via <a href=\"#/p5/loadFont\">loadFont()</a> are supported.</p>\n","itemtype":"method","name":"textFont","return":{"description":"the current font / p5 Object","type":"Object"},"example":["\n<div>\n<code>\nfill(0);\ntextSize(12);\ntextFont('Georgia');\ntext('Georgia', 12, 30);\ntextFont('Helvetica');\ntext('Helvetica', 12, 60);\n</code>\n</div>\n<div>\n<code>\nlet fontRegular, fontItalic, fontBold;\nfunction preload() {\n  fontRegular = loadFont('assets/Regular.otf');\n  fontItalic = loadFont('assets/Italic.ttf');\n  fontBold = loadFont('assets/Bold.ttf');\n}\nfunction setup() {\n  background(210);\n  fill(0)\n   .strokeWeight(0)\n   .textSize(10);\n  textFont(fontRegular);\n  text('Font Style Normal', 10, 30);\n  textFont(fontItalic);\n  text('Font Style Italic', 10, 50);\n  textFont(fontBold);\n  text('Font Style Bold', 10, 70);\n}\n</code>\n</div>"],"alt":"word 'Georgia' displayed in font Georgia and 'Helvetica' in font Helvetica\nwords Font Style Normal displayed normally, Italic in italic and bold in bold","class":"p5","module":"Typography","submodule":"Loading & Displaying","overloads":[{"line":229,"params":[],"return":{"description":"the current font / p5 Object","type":"Object"}},{"line":278,"params":[{"name":"font","description":"<p>a font loaded via <a href=\"#/p5/loadFont\">loadFont()</a>,\nor a String representing a <a href=\"https://mzl.la/2dOw8WD\">web safe font</a>\n(a font that is generally available across all systems)</p>\n","type":"Object|String"},{"name":"size","description":"<p>the font size to use</p>\n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/typography/p5.Font.js","line":24,"description":"<p>Underlying opentype font implementation</p>\n","itemtype":"property","name":"font","class":"p5.Font","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/p5.Font.js","line":31,"description":"<p>Returns a tight bounding box for the given text string using this\nfont</p>\n","itemtype":"method","name":"textBounds","params":[{"name":"line","description":"<p>a line of text</p>\n","type":"String"},{"name":"x","description":"<p>x-position</p>\n","type":"Number"},{"name":"y","description":"<p>y-position</p>\n","type":"Number"},{"name":"fontSize","description":"<p>font size to use (optional) Default is 12.</p>\n","type":"Number","optional":true},{"name":"options","description":"<p>opentype options (optional)\n                           opentype fonts contains alignment and baseline options.\n                           Default is 'LEFT' and 'alphabetic'</p>\n","type":"Object","optional":true}],"return":{"description":"a rectangle object with properties: x, y, w, h","type":"Object"},"example":["\n<div>\n<code>\nlet font;\nlet textString = 'Lorem ipsum dolor sit amet.';\nfunction preload() {\n  font = loadFont('./assets/Regular.otf');\n}\nfunction setup() {\n  background(210);\n\n  let bbox = font.textBounds(textString, 10, 30, 12);\n  fill(255);\n  stroke(0);\n  rect(bbox.x, bbox.y, bbox.w, bbox.h);\n  fill(0);\n  noStroke();\n\n  textFont(font);\n  textSize(12);\n  text(textString, 10, 30);\n}\n</code>\n</div>"],"alt":"words Lorem ipsum dol go off canvas and contained by white bounding box","class":"p5.Font","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/p5.Font.js","line":175,"description":"<p>Computes an array of points following the path for specified text</p>\n","itemtype":"method","name":"textToPoints","params":[{"name":"txt","description":"<p>a line of text</p>\n","type":"String"},{"name":"x","description":"<p>x-position</p>\n","type":"Number"},{"name":"y","description":"<p>y-position</p>\n","type":"Number"},{"name":"fontSize","description":"<p>font size to use (optional)</p>\n","type":"Number"},{"name":"options","description":"<p>an (optional) object that can contain:</p>\n<p><br>sampleFactor - the ratio of path-length to number of samples\n(default=.1); higher values yield more points and are therefore\nmore precise</p>\n<p><br>simplifyThreshold - if set to a non-zero value, collinear points will be\nbe removed from the polygon; the value represents the threshold angle to use\nwhen determining whether two edges are collinear</p>\n","type":"Object","optional":true}],"return":{"description":"an array of points, each with x, y, alpha (the path angle)","type":"Array"},"example":["\n<div>\n<code>\nlet font;\nfunction preload() {\n  font = loadFont('assets/inconsolata.otf');\n}\n\nlet points;\nlet bounds;\nfunction setup() {\n  createCanvas(100, 100);\n  stroke(0);\n  fill(255, 104, 204);\n\n  points = font.textToPoints('p5', 0, 0, 10, {\n    sampleFactor: 5,\n    simplifyThreshold: 0\n  });\n  bounds = font.textBounds(' p5 ', 0, 0, 10);\n}\n\nfunction draw() {\n  background(255);\n  beginShape();\n  translate(-bounds.x * width / bounds.w, -bounds.y * height / bounds.h);\n  for (let i = 0; i < points.length; i++) {\n    let p = points[i];\n    vertex(\n      p.x * width / bounds.w +\n        sin(20 * p.y / bounds.h + millis() / 1000) * width / 30,\n      p.y * height / bounds.h\n    );\n  }\n  endShape(CLOSE);\n}\n</code>\n</div>"],"class":"p5.Font","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/utilities/array_functions.js","line":10,"description":"<p>Adds a value to the end of an array. Extends the length of\nthe array by one. Maps to Array.push().</p>\n","itemtype":"method","name":"append","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push\">array.push(value)</a> instead.","params":[{"name":"array","description":"<p>Array to append</p>\n","type":"Array"},{"name":"value","description":"<p>to be added to the Array</p>\n","type":"Any"}],"return":{"description":"the array that was appended to","type":"Array"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":35,"description":"<p>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 <a href=\"#/p5/concat\">concat()</a>.</p>\n<p>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).</p>\n<p>Using this function is far more efficient for copying array data than\niterating through a for() loop and copying each element individually.</p>\n","itemtype":"method","name":"arrayCopy","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin\">arr1.copyWithin(arr2)</a> instead.","example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions","overloads":[{"line":35,"params":[{"name":"src","description":"<p>the source Array</p>\n","type":"Array"},{"name":"srcPosition","description":"<p>starting position in the source Array</p>\n","type":"Integer"},{"name":"dst","description":"<p>the destination Array</p>\n","type":"Array"},{"name":"dstPosition","description":"<p>starting position in the destination Array</p>\n","type":"Integer"},{"name":"length","description":"<p>number of Array elements to be copied</p>\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":"<p>Concatenates two arrays, maps to Array.concat(). Does not modify the\ninput arrays.</p>\n","itemtype":"method","name":"concat","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat\">arr1.concat(arr2)</a> instead.","params":[{"name":"a","description":"<p>first Array to concatenate</p>\n","type":"Array"},{"name":"b","description":"<p>second Array to concatenate</p>\n","type":"Array"}],"return":{"description":"concatenated array","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":141,"description":"<p>Reverses the order of an array, maps to Array.reverse()</p>\n","itemtype":"method","name":"reverse","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse\">array.reverse()</a> instead.","params":[{"name":"list","description":"<p>Array to reverse</p>\n","type":"Array"}],"return":{"description":"the reversed list","type":"Array"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":161,"description":"<p>Decreases an array by one element and returns the shortened array,\nmaps to Array.pop().</p>\n","itemtype":"method","name":"shorten","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop\">array.pop()</a> instead.","params":[{"name":"list","description":"<p>Array to shorten</p>\n","type":"Array"}],"return":{"description":"shortened Array","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":185,"description":"<p>Randomizes the order of the elements of an array. Implements\n<a href='http://Bost.Ocks.org/mike/shuffle/' target=_blank>\nFisher-Yates Shuffle Algorithm</a>.</p>\n","itemtype":"method","name":"shuffle","params":[{"name":"array","description":"<p>Array to shuffle</p>\n","type":"Array"},{"name":"bool","description":"<p>modify passed array</p>\n","type":"Boolean","optional":true}],"return":{"description":"shuffled Array","type":"Array"},"example":["\n<div><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":227,"description":"<p>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.</p>\n","itemtype":"method","name":"sort","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort\">array.sort()</a> instead.","params":[{"name":"list","description":"<p>Array to sort</p>\n","type":"Array"},{"name":"count","description":"<p>number of elements to sort, starting from 0</p>\n","type":"Integer","optional":true}],"return":{"description":"the sorted list","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":273,"description":"<p>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.)</p>\n","itemtype":"method","name":"splice","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice\">array.splice()</a> instead.","params":[{"name":"list","description":"<p>Array to splice into</p>\n","type":"Array"},{"name":"value","description":"<p>value to be spliced in</p>\n","type":"Any"},{"name":"position","description":"<p>in the array from which to insert data</p>\n","type":"Integer"}],"return":{"description":"the list","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":308,"description":"<p>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.</p>\n","itemtype":"method","name":"subset","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice\">array.slice()</a> instead.","params":[{"name":"list","description":"<p>Array to extract from</p>\n","type":"Array"},{"name":"start","description":"<p>position to begin</p>\n","type":"Integer"},{"name":"count","description":"<p>number of values to extract</p>\n","type":"Integer","optional":true}],"return":{"description":"Array of extracted elements","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/conversion.js","line":10,"description":"<p>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.</p>\n<p>When an array of values is passed in, then an array of floats of the same\nlength is returned.</p>\n","itemtype":"method","name":"float","params":[{"name":"str","description":"<p>float string to parse</p>\n","type":"String"}],"return":{"description":"floating point representation of string","type":"Number"},"example":["\n<div><code>\nlet str = '20';\nlet diameter = float(str);\nellipse(width / 2, height / 2, diameter, diameter);\n</code></div>\n<div class='norender'><code>\nprint(float('10.31')); // 10.31\nprint(float('Infinity')); // Infinity\nprint(float('-Infinity')); // -Infinity\n</code></div>"],"alt":"20 by 20 white ellipse in the center of the canvas","class":"p5","module":"Data","submodule":"Conversion"},{"file":"src/utilities/conversion.js","line":44,"description":"<p>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.</p>\n","itemtype":"method","name":"int","return":{"description":"integer representation of value","type":"Number"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":44,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Boolean|Number"},{"name":"radix","description":"<p>the radix to convert to (default: 10)</p>\n","type":"Integer","optional":true}],"return":{"description":"integer representation of value","type":"Number"}},{"line":66,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"},{"name":"radix","description":"","type":"Integer","optional":true}],"return":{"description":"integer representation of values","type":"Number[]"}}]},{"file":"src/utilities/conversion.js","line":88,"description":"<p>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.</p>\n","itemtype":"method","name":"str","params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Boolean|Number|Array"}],"return":{"description":"string representation of value","type":"String"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion"},{"file":"src/utilities/conversion.js","line":114,"description":"<p>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.</p>\n","itemtype":"method","name":"boolean","params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Boolean|Number|Array"}],"return":{"description":"boolean representation of value","type":"Boolean"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion"},{"file":"src/utilities/conversion.js","line":146,"description":"<p>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.</p>\n","itemtype":"method","name":"byte","return":{"description":"byte representation of value","type":"Number"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":146,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Boolean|Number"}],"return":{"description":"byte representation of value","type":"Number"}},{"line":168,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"}],"return":{"description":"array of byte representation of values","type":"Number[]"}}]},{"file":"src/utilities/conversion.js","line":182,"description":"<p>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.</p>\n","itemtype":"method","name":"char","return":{"description":"string representation of value","type":"String"},"example":["\n<div class='norender'><code>\nprint(char(65)); // \"A\"\nprint(char('65')); // \"A\"\nprint(char([65, 66, 67])); // [ \"A\", \"B\", \"C\" ]\nprint(join(char([65, 66, 67]), '')); // \"ABC\"\n</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":182,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Number"}],"return":{"description":"string representation of value","type":"String"}},{"line":201,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"}],"return":{"description":"array of string representation of values","type":"String[]"}}]},{"file":"src/utilities/conversion.js","line":216,"description":"<p>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.</p>\n","itemtype":"method","name":"unchar","return":{"description":"integer representation of value","type":"Number"},"example":["\n<div class='norender'><code>\nprint(unchar('A')); // 65\nprint(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]\nprint(unchar(split('ABC', ''))); // [ 65, 66, 67 ]\n</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":216,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String"}],"return":{"description":"integer representation of value","type":"Number"}},{"line":232,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"}],"return":{"description":"integer representation of values","type":"Number[]"}}]},{"file":"src/utilities/conversion.js","line":245,"description":"<p>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.</p>\n","itemtype":"method","name":"hex","return":{"description":"hexadecimal string representation of value","type":"String"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":245,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"Number"},{"name":"digits","description":"","type":"Number","optional":true}],"return":{"description":"hexadecimal string representation of value","type":"String"}},{"line":265,"params":[{"name":"ns","description":"<p>array of values to parse</p>\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":295,"description":"<p>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.</p>\n","itemtype":"method","name":"unhex","return":{"description":"integer representation of hexadecimal value","type":"Number"},"example":["\n<div class='norender'><code>\nprint(unhex('A')); // 10\nprint(unhex('FF')); // 255\nprint(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]\n</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":295,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String"}],"return":{"description":"integer representation of hexadecimal value","type":"Number"}},{"line":311,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"}],"return":{"description":"integer representations of hexadecimal value","type":"Number[]"}}]},{"file":"src/utilities/string_functions.js","line":15,"description":"<p>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 <a href=\"#/p5/nf\">nf()</a> or\nnfs().</p>\n","itemtype":"method","name":"join","params":[{"name":"list","description":"<p>array of Strings to be joined</p>\n","type":"Array"},{"name":"separator","description":"<p>String to be placed between each item</p>\n","type":"String"}],"return":{"description":"joined String","type":"String"},"example":["\n<div>\n<code>\nlet array = ['Hello', 'world!'];\nlet separator = ' ';\nlet message = join(array, separator);\ntext(message, 5, 50);\n</code>\n</div>"],"alt":"\"hello world!\" displayed middle left of canvas.","class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":43,"description":"<p>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.</p>\n<p>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.</p>\n<p>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).</p>\n","itemtype":"method","name":"match","params":[{"name":"str","description":"<p>the String to be searched</p>\n","type":"String"},{"name":"regexp","description":"<p>the regexp to be used for matching</p>\n","type":"String"}],"return":{"description":"Array of Strings found","type":"String[]"},"example":["\n<div>\n<code>\nlet string = 'Hello p5js*!';\nlet regexp = 'p5js\\\\*';\nlet m = match(string, regexp);\ntext(m, 5, 50);\n</code>\n</div>"],"alt":"\"p5js*\" displayed middle left of canvas.","class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":83,"description":"<p>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.</p>\n<p>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.</p>\n<p>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).</p>\n","itemtype":"method","name":"matchAll","params":[{"name":"str","description":"<p>the String to be searched</p>\n","type":"String"},{"name":"regexp","description":"<p>the regexp to be used for matching</p>\n","type":"String"}],"return":{"description":"2d Array of Strings found","type":"String[]"},"example":["\n<div class=\"norender\">\n<code>\nlet string = 'Hello p5js*! Hello world!';\nlet regexp = 'Hello';\nmatchAll(string, regexp);\n</code>\n</div>"],"class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":130,"description":"<p>Utility function for formatting numbers into strings. There are two\nversions: one for formatting floats, and one for formatting ints.\nThe values for the digits, left, and right parameters should always\nbe positive integers.\n(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.\nFor 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.</p>\n","itemtype":"method","name":"nf","return":{"description":"formatted String","type":"String"},"example":["\n<div>\n<code>\nlet myFont;\nfunction preload() {\n  myFont = loadFont('assets/fonts/inconsolata.ttf');\n}\nfunction setup() {\n  background(200);\n  let num1 = 321;\n  let num2 = -1321;\n\n  noStroke();\n  fill(0);\n  textFont(myFont);\n  textSize(22);\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</code>\n</div>"],"alt":"\"0321.00\" middle top, -1321.00\" middle bottom canvas","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":130,"params":[{"name":"num","description":"<p>the Number to format</p>\n","type":"Number|String"},{"name":"left","description":"<p>number of digits to the left of the\n                               decimal point</p>\n","type":"Integer|String","optional":true},{"name":"right","description":"<p>number of digits to the right of the\n                               decimal point</p>\n","type":"Integer|String","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":178,"params":[{"name":"nums","description":"<p>the Numbers to format</p>\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":239,"description":"<p>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.</p>\n","itemtype":"method","name":"nfc","return":{"description":"formatted String","type":"String"},"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"\"11,253,106.115\" top middle and \"1.00,1.00,2.00\" displayed bottom mid","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":239,"params":[{"name":"num","description":"<p>the Number to format</p>\n","type":"Number|String"},{"name":"right","description":"<p>number of digits to the right of the\n                                 decimal point</p>\n","type":"Integer|String","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":277,"params":[{"name":"nums","description":"<p>the Numbers to format</p>\n","type":"Array"},{"name":"right","description":"","type":"Integer|String","optional":true}],"return":{"description":"formatted Strings","type":"String[]"}}]},{"file":"src/utilities/string_functions.js","line":313,"description":"<p>Utility function for formatting numbers into strings. Similar to <a href=\"#/p5/nf\">nf()</a> 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.</p>\n","itemtype":"method","name":"nfp","return":{"description":"formatted String","type":"String"},"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"\"+11253106.11\" top middle and \"-11253106.11\" displayed bottom middle","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":313,"params":[{"name":"num","description":"<p>the Number to format</p>\n","type":"Number"},{"name":"left","description":"<p>number of digits to the left of the decimal\n                               point</p>\n","type":"Integer","optional":true},{"name":"right","description":"<p>number of digits to the right of the\n                               decimal point</p>\n","type":"Integer","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":354,"params":[{"name":"nums","description":"<p>the Numbers to format</p>\n","type":"Number[]"},{"name":"left","description":"","type":"Integer","optional":true},{"name":"right","description":"","type":"Integer","optional":true}],"return":{"description":"formatted Strings","type":"String[]"}}]},{"file":"src/utilities/string_functions.js","line":375,"description":"<p>Utility function for formatting numbers into strings. Similar to <a href=\"#/p5/nf\">nf()</a> but\nputs an additional \"_\" (space) in front of positive numbers just in case to align it with negative\nnumbers which includes \"-\" (minus) sign.\nThe 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.\nThe 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.\nFor 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.</p>\n","itemtype":"method","name":"nfs","return":{"description":"formatted String","type":"String"},"example":["\n<div>\n<code>\nlet myFont;\nfunction preload() {\n  myFont = loadFont('assets/fonts/inconsolata.ttf');\n}\nfunction setup() {\n  background(200);\n  let num1 = 321;\n  let num2 = -1321;\n\n  noStroke();\n  fill(0);\n  textFont(myFont);\n  textSize(22);\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</code>\n</div>"],"alt":"\"0321.00\" top middle and \"-1321.00\" displayed bottom middle","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":375,"params":[{"name":"num","description":"<p>the Number to format</p>\n","type":"Number"},{"name":"left","description":"<p>number of digits to the left of the decimal\n                               point</p>\n","type":"Integer","optional":true},{"name":"right","description":"<p>number of digits to the right of the\n                               decimal point</p>\n","type":"Integer","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":432,"params":[{"name":"nums","description":"<p>the Numbers to format</p>\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":453,"description":"<p>The <a href=\"#/p5/split\">split()</a> 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.</p>\n<p>The <a href=\"#/p5/splitTokens\">splitTokens()</a> function works in a similar fashion, except that it\nsplits using a range of characters instead of a specific character or\nsequence.</p>\n","itemtype":"method","name":"split","params":[{"name":"value","description":"<p>the String to be split</p>\n","type":"String"},{"name":"delim","description":"<p>the String used to separate the data</p>\n","type":"String"}],"return":{"description":"Array of Strings","type":"String[]"},"example":["\n<div>\n<code>\nlet names = 'Pat,Xio,Alex';\nlet splitString = split(names, ',');\ntext(splitString[0], 5, 30);\ntext(splitString[1], 5, 50);\ntext(splitString[2], 5, 70);\n</code>\n</div>"],"alt":"\"pat\" top left, \"Xio\" mid left and \"Alex\" displayed bottom left","class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":486,"description":"<p>The <a href=\"#/p5/splitTokens\">splitTokens()</a> 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.</p>\n<p>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.</p>\n","itemtype":"method","name":"splitTokens","params":[{"name":"value","description":"<p>the String to be split</p>\n","type":"String"},{"name":"delim","description":"<p>list of individual Strings that will be used as\n                         separators</p>\n","type":"String","optional":true}],"return":{"description":"Array of Strings","type":"String[]"},"example":["\n<div class = \"norender\">\n<code>\nfunction setup() {\n  let myStr = 'Mango, Banana, Lime';\n  let myStrArr = splitTokens(myStr, ',');\n\n  print(myStrArr); // prints : [\"Mango\",\" Banana\",\" Lime\"]\n}\n</code>\n</div>"],"class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":539,"description":"<p>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.</p>\n","itemtype":"method","name":"trim","return":{"description":"a trimmed String","type":"String"},"example":["\n<div>\n<code>\nlet string = trim('  No new lines\\n   ');\ntext(string + ' here', 2, 50);\n</code>\n</div>"],"alt":"\"No new lines here\" displayed center canvas","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":539,"params":[{"name":"str","description":"<p>a String to be trimmed</p>\n","type":"String"}],"return":{"description":"a trimmed String","type":"String"}},{"line":559,"params":[{"name":"strs","description":"<p>an Array of Strings to be trimmed</p>\n","type":"Array"}],"return":{"description":"an Array of trimmed Strings","type":"String[]"}}]},{"file":"src/utilities/time_date.js","line":10,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/day\">day()</a> function\nreturns the current day as a value from 1 - 31.</p>\n","itemtype":"method","name":"day","return":{"description":"the current day","type":"Integer"},"example":["\n<div>\n<code>\nlet d = day();\ntext('Current day: \\n' + d, 5, 50);\n</code>\n</div>"],"alt":"Current day is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":31,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/hour\">hour()</a> function\nreturns the current hour as a value from 0 - 23.</p>\n","itemtype":"method","name":"hour","return":{"description":"the current hour","type":"Integer"},"example":["\n<div>\n<code>\nlet h = hour();\ntext('Current hour:\\n' + h, 5, 50);\n</code>\n</div>"],"alt":"Current hour is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":52,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/minute\">minute()</a> function\nreturns the current minute as a value from 0 - 59.</p>\n","itemtype":"method","name":"minute","return":{"description":"the current minute","type":"Integer"},"example":["\n<div>\n<code>\nlet m = minute();\ntext('Current minute: \\n' + m, 5, 50);\n</code>\n</div>"],"alt":"Current minute is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":73,"description":"<p>Returns the number of milliseconds (thousandths of a second) since\nstarting the sketch (when <code>setup()</code> is called). This information is often\nused for timing events and animation sequences.</p>\n","itemtype":"method","name":"millis","return":{"description":"the number of milliseconds since starting the sketch","type":"Number"},"example":["\n<div>\n<code>\nlet millisecond = millis();\ntext('Milliseconds \\nrunning: \\n' + millisecond, 5, 40);\n</code>\n</div>"],"alt":"number of milliseconds since sketch has started displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":100,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/month\">month()</a> function\nreturns the current month as a value from 1 - 12.</p>\n","itemtype":"method","name":"month","return":{"description":"the current month","type":"Integer"},"example":["\n<div>\n<code>\nlet m = month();\ntext('Current month: \\n' + m, 5, 50);\n</code>\n</div>"],"alt":"Current month is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":122,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/second\">second()</a> function\nreturns the current second as a value from 0 - 59.</p>\n","itemtype":"method","name":"second","return":{"description":"the current second","type":"Integer"},"example":["\n<div>\n<code>\nlet s = second();\ntext('Current second: \\n' + s, 5, 50);\n</code>\n</div>"],"alt":"Current second is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":143,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/year\">year()</a> function\nreturns the current year as an integer (2014, 2015, 2016, etc).</p>\n","itemtype":"method","name":"year","return":{"description":"the current year","type":"Integer"},"example":["\n<div>\n<code>\nlet y = year();\ntext('Current year: \\n' + y, 5, 50);\n</code>\n</div>"],"alt":"Current year is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/webgl/3d_primitives.js","line":13,"description":"<p>Draw a plane with given a width and height</p>\n","itemtype":"method","name":"plane","params":[{"name":"width","description":"<p>width of the plane</p>\n","type":"Number","optional":true},{"name":"height","description":"<p>height of the plane</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>Optional number of triangle\n                            subdivisions in x-dimension</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>Optional number of triangle\n                            subdivisions in y-dimension</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a plane\n// with width 50 and height 50\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  plane(50, 50);\n}\n</code>\n</div>"],"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":97,"description":"<p>Draw a box with given width, height and depth</p>\n","itemtype":"method","name":"box","params":[{"name":"width","description":"<p>width of the box</p>\n","type":"Number","optional":true},{"name":"Height","description":"<p>height of the box</p>\n","type":"Number","optional":true},{"name":"depth","description":"<p>depth of the box</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>Optional number of triangle\n                           subdivisions in x-dimension</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>Optional number of triangle\n                           subdivisions in y-dimension</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a spinning box\n// with width, height and depth of 50\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  box(50);\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":215,"description":"<p>Draw a sphere with given radius.</p>\n<p>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.</p>\n","itemtype":"method","name":"sphere","params":[{"name":"radius","description":"<p>radius of circle</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>optional number of subdivisions in x-dimension</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>optional number of subdivisions in y-dimension</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a sphere with radius 40\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(205, 102, 94);\n  sphere(40);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  sphere(40, detailX.value(), 16);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  sphere(40, 16, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":419,"description":"<p>Draw a cylinder with given radius and height</p>\n<p>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.</p>\n","itemtype":"method","name":"cylinder","params":[{"name":"radius","description":"<p>radius of the surface</p>\n","type":"Number","optional":true},{"name":"height","description":"<p>height of the cylinder</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>number of subdivisions in x-dimension;\n                              default is 24</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of subdivisions in y-dimension;\n                              default is 1</p>\n","type":"Integer","optional":true},{"name":"bottomCap","description":"<p>whether to draw the bottom of the cylinder</p>\n","type":"Boolean","optional":true},{"name":"topCap","description":"<p>whether to draw the top of the cylinder</p>\n","type":"Boolean","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a spinning cylinder\n// with radius 20 and height 50\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  cylinder(20, 75, detailX.value(), 1);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  cylinder(20, 75, 16, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":554,"description":"<p>Draw a cone with given radius and height</p>\n<p>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.</p>\n","itemtype":"method","name":"cone","params":[{"name":"radius","description":"<p>radius of the bottom surface</p>\n","type":"Number","optional":true},{"name":"height","description":"<p>height of the cone</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>number of segments,\n                            the more segments the smoother geometry\n                            default is 24</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of segments,\n                            the more segments the smoother geometry\n                            default is 1</p>\n","type":"Integer","optional":true},{"name":"cap","description":"<p>whether to draw the base of the cone</p>\n","type":"Boolean","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a spinning cone\n// with radius 40 and height 70\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateZ(frameCount * 0.01);\n  cone(40, 70);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 102, 94);\n  rotateY(millis() / 1000);\n  cone(30, 65, detailX.value(), 16);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 102, 94);\n  rotateY(millis() / 1000);\n  cone(30, 65, 16, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":669,"description":"<p>Draw an ellipsoid with given radius</p>\n<p>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.</p>\n","itemtype":"method","name":"ellipsoid","params":[{"name":"radiusx","description":"<p>x-radius of ellipsoid</p>\n","type":"Number","optional":true},{"name":"radiusy","description":"<p>y-radius of ellipsoid</p>\n","type":"Number","optional":true},{"name":"radiusz","description":"<p>z-radius of ellipsoid</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>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.</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>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.</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw an ellipsoid\n// with radius 30, 40 and 40.\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(205, 105, 94);\n  ellipsoid(30, 40, 40);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  ellipsoid(30, 40, 40, detailX.value(), 8);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 9);\n  rotateY(millis() / 1000);\n  ellipsoid(30, 40, 40, 12, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":804,"description":"<p>Draw a torus with given radius and tube radius</p>\n<p>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.</p>\n","itemtype":"method","name":"torus","params":[{"name":"radius","description":"<p>radius of the whole ring</p>\n","type":"Number","optional":true},{"name":"tubeRadius","description":"<p>radius of the tube</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>number of segments in x-dimension,\n                               the more segments the smoother geometry\n                               default is 24</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of segments in y-dimension,\n                               the more segments the smoother geometry\n                               default is 16</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a spinning torus\n// with ring radius 30 and tube radius 15\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 102, 94);\n  rotateY(millis() / 1000);\n  torus(30, 15, detailX.value(), 12);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 102, 94);\n  rotateY(millis() / 1000);\n  torus(30, 15, 16, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/interaction.js","line":11,"description":"<p>Allows movement around a 3D sketch using a mouse or trackpad.  Left-clicking\nand dragging will rotate the camera position about the center of the sketch,\nright-clicking and dragging will pan the camera position without rotation,\nand using the mouse wheel (scrolling) will move the camera closer or further\nfrom the center of the sketch. This function can be called with parameters\ndictating sensitivity to mouse movement along the X and Y axes.  Calling\nthis function without parameters is equivalent to calling orbitControl(1,1).\nTo reverse direction of movement in either axis, enter a negative number\nfor sensitivity.</p>\n","itemtype":"method","name":"orbitControl","params":[{"name":"sensitivityX","description":"<p>sensitivity to mouse movement along X axis</p>\n","type":"Number","optional":true},{"name":"sensitivityY","description":"<p>sensitivity to mouse movement along Y axis</p>\n","type":"Number","optional":true},{"name":"sensitivityZ","description":"<p>sensitivity to scroll movement along Z axis</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n}\nfunction draw() {\n  background(200);\n  orbitControl();\n  rotateY(0.5);\n  box(30, 50);\n}\n</code>\n</div>"],"alt":"Camera orbits around a box when mouse is hold-clicked & then moved.","class":"p5","module":"Lights, Camera","submodule":"Interaction"},{"file":"src/webgl/interaction.js","line":145,"description":"<p>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.</p>\n<p>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.</p>\n","itemtype":"method","name":"debugMode","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode();\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</code>\n</div>","\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode(GRID);\n}\n\nfunction draw() {\n  background(200);\n  orbitControl();\n  box(15, 30);\n}\n</code>\n</div>","\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode(AXES);\n}\n\nfunction draw() {\n  background(200);\n  orbitControl();\n  box(15, 30);\n}\n</code>\n</div>","\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode(GRID, 100, 10, 0, 0, 0);\n}\n\nfunction draw() {\n  background(200);\n  orbitControl();\n  box(15, 30);\n}\n</code>\n</div>","\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode(100, 10, 0, 0, 0, 20, 0, -40, 0);\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</code>\n</div>"],"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":"Lights, Camera","submodule":"Interaction","overloads":[{"line":145,"params":[]},{"line":278,"params":[{"name":"mode","description":"<p>either GRID or AXES</p>\n","type":"Constant"}]},{"line":283,"params":[{"name":"mode","description":"","type":"Constant"},{"name":"gridSize","description":"<p>size of one side of the grid</p>\n","type":"Number","optional":true},{"name":"gridDivisions","description":"<p>number of divisions in the grid</p>\n","type":"Number","optional":true},{"name":"xOff","description":"<p>X axis offset from origin (0,0,0)</p>\n","type":"Number","optional":true},{"name":"yOff","description":"<p>Y axis offset from origin (0,0,0)</p>\n","type":"Number","optional":true},{"name":"zOff","description":"<p>Z axis offset from origin (0,0,0)</p>\n","type":"Number","optional":true}]},{"line":293,"params":[{"name":"mode","description":"","type":"Constant"},{"name":"axesSize","description":"<p>size of axes icon</p>\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":302,"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":353,"description":"<p>Turns off debugMode() in a 3D sketch.</p>\n","itemtype":"method","name":"noDebugMode","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode();\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</code>\n</div>"],"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":"Lights, Camera","submodule":"Interaction"},{"file":"src/webgl/light.js","line":11,"description":"<p>Creates an ambient light with a color. Ambient light is light that comes from everywhere on the canvas.\nIt has no particular source.</p>\n","itemtype":"method","name":"ambientLight","chainable":1,"example":["\n<div>\n<code>\ncreateCanvas(100, 100, WEBGL);\nambientLight(0);\nambientMaterial(250);\nsphere(40);\n</code>\n</div>\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(51);\n  ambientLight(100); // white light\n  ambientMaterial(255, 102, 94); // magenta material\n  box(30);\n}\n</code>\n</div>"],"alt":"evenly distributed light across a sphere\nevenly distributed light across a rotating sphere","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":11,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"<p>the alpha value</p>\n","type":"Number","optional":true}],"chainable":1},{"line":51,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"chainable":1},{"line":57,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":64,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":71,"params":[{"name":"color","description":"<p>the ambient light color</p>\n","type":"p5.Color"}],"chainable":1}]},{"file":"src/webgl/light.js","line":92,"description":"<p>Set's the color of the specular highlight when using a specular material and\nspecular light.</p>\n<p>This method can be combined with specularMaterial() and shininess()\nfunctions to set specular highlights. The default color is white, ie\n(255, 255, 255), which is used if this method is not called before\nspecularMaterial(). If this method is called without specularMaterial(),\nThere will be no effect.</p>\n<p>Note: specularColor is equivalent to the processing function\n<a href=\"https://processing.org/reference/lightSpecular_.html\">lightSpecular</a>.</p>\n","itemtype":"method","name":"specularColor","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  noStroke();\n}\n\nfunction draw() {\n  background(0);\n  shininess(20);\n  ambientLight(50);\n  specularColor(255, 0, 0);\n  pointLight(255, 0, 0, 0, -50, 50);\n  specularColor(0, 255, 0);\n  pointLight(0, 255, 0, 0, 50, 50);\n  specularMaterial(255);\n  sphere(40);\n}\n</code>\n</div>"],"alt":"different specular light sources from top and bottom of canvas","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":92,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"}],"chainable":1},{"line":139,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"chainable":1},{"line":145,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"}],"chainable":1},{"line":151,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":158,"params":[{"name":"color","description":"<p>the ambient light color</p>\n","type":"p5.Color"}],"chainable":1}]},{"file":"src/webgl/light.js","line":177,"description":"<p>Creates a directional light with a color and a direction</p>\n<p>A maximum of 5 directionalLight can be active at one time</p>\n","itemtype":"method","name":"directionalLight","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"light source on canvas changeable with mouse position","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":177,"params":[{"name":"v1","description":"<p>red or hue value (depending on the current\ncolor mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number"},{"name":"position","description":"<p>the direction of the light</p>\n","type":"p5.Vector"}],"chainable":1},{"line":210,"params":[{"name":"color","description":"<p>color Array, CSS color string,\n                                            or <a href=\"#/p5.Color\">p5.Color</a> value</p>\n","type":"Number[]|String|p5.Color"},{"name":"x","description":"<p>x axis direction</p>\n","type":"Number"},{"name":"y","description":"<p>y axis direction</p>\n","type":"Number"},{"name":"z","description":"<p>z axis direction</p>\n","type":"Number"}],"chainable":1},{"line":220,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"name":"position","description":"","type":"p5.Vector"}],"chainable":1},{"line":227,"params":[{"name":"v1","description":"","type":"Number"},{"name":"v2","description":"","type":"Number"},{"name":"v3","description":"","type":"Number"},{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"","type":"Number"}],"chainable":1}]},{"file":"src/webgl/light.js","line":280,"description":"<p>Creates a point light with a color and a light position</p>\n<p>A maximum of 5 pointLight can be active at one time</p>\n","itemtype":"method","name":"pointLight","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"spot light on canvas changes position with mouse","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":280,"params":[{"name":"v1","description":"<p>red or hue value (depending on the current\ncolor mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number"},{"name":"x","description":"<p>x axis position</p>\n","type":"Number"},{"name":"y","description":"<p>y axis position</p>\n","type":"Number"},{"name":"z","description":"<p>z axis position</p>\n","type":"Number"}],"chainable":1},{"line":322,"params":[{"name":"v1","description":"","type":"Number"},{"name":"v2","description":"","type":"Number"},{"name":"v3","description":"","type":"Number"},{"name":"position","description":"<p>the position of the light</p>\n","type":"p5.Vector"}],"chainable":1},{"line":331,"params":[{"name":"color","description":"<p>color Array, CSS color string,\nor <a href=\"#/p5.Color\">p5.Color</a> value</p>\n","type":"Number[]|String|p5.Color"},{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"","type":"Number"}],"chainable":1},{"line":341,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"name":"position","description":"","type":"p5.Vector"}],"chainable":1}]},{"file":"src/webgl/light.js","line":387,"description":"<p>Sets the default ambient and directional light. The defaults are <a href=\"#/p5/ambientLight\">ambientLight(128, 128, 128)</a> and <a href=\"#/p5/directionalLight\">directionalLight(128, 128, 128, 0, 0, -1)</a>. Lights need to be included in the <a href=\"#/p5/draw\">draw()</a> to remain persistent in a looping program. Placing them in the <a href=\"#/p5/setup\">setup()</a> of a looping program will cause them to only have an effect the first time through the loop.</p>\n","itemtype":"method","name":"lights","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(0);\n  lights();\n  rotateX(millis() / 1000);\n  rotateY(millis() / 1000);\n  rotateZ(millis() / 1000);\n  box();\n}\n</code>\n</div>"],"alt":"the light is partially ambient and partially directional","class":"p5","module":"Lights, Camera","submodule":"Lights"},{"file":"src/webgl/light.js","line":425,"description":"<p>Sets the falloff rates for point lights. It affects only the elements which are created after it in the code.\nThe default value is lightFalloff(1.0, 0.0, 0.0), and the parameters are used to calculate the falloff with the following equation:</p>\n<p>d = distance from light position to vertex position</p>\n<p>falloff = 1 / (CONSTANT + d * LINEAR + ( d * d ) * QUADRATIC)</p>\n","itemtype":"method","name":"lightFalloff","params":[{"name":"constant","description":"<p>constant value for determining falloff</p>\n","type":"Number"},{"name":"linear","description":"<p>linear value for determining falloff</p>\n","type":"Number"},{"name":"quadratic","description":"<p>quadratic value for determining falloff</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  noStroke();\n}\nfunction draw() {\n  background(0);\n  let locX = mouseX - width / 2;\n  let locY = mouseY - height / 2;\n  translate(-25, 0, 0);\n  lightFalloff(1, 0, 0);\n  pointLight(250, 250, 250, locX, locY, 50);\n  sphere(20);\n  translate(50, 0, 0);\n  lightFalloff(0.9, 0.01, 0);\n  pointLight(250, 250, 250, locX, locY, 50);\n  sphere(20);\n}\n</code>\n</div>"],"alt":"Two spheres with different falloff values show different intensity of light","class":"p5","module":"Lights, Camera","submodule":"Lights"},{"file":"src/webgl/light.js","line":510,"description":"<p>Creates a spotlight with a given color, position, direction of light,\nangle and concentration. Here, angle refers to the opening or aperture\nof the cone of the spotlight, and concentration is used to focus the\nlight towards the center. Both angle and concentration are optional, but if\nyou want to provide concentration, you will also have to specify the angle.</p>\n<p>A maximum of 5 spotLight can be active at one time</p>\n","itemtype":"method","name":"spotLight","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"Spot light on a sphere which changes position with mouse","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":510,"params":[{"name":"v1","description":"<p>red or hue value (depending on the current\ncolor mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number"},{"name":"x","description":"<p>x axis position</p>\n","type":"Number"},{"name":"y","description":"<p>y axis position</p>\n","type":"Number"},{"name":"z","description":"<p>z axis position</p>\n","type":"Number"},{"name":"rx","description":"<p>x axis direction of light</p>\n","type":"Number"},{"name":"ry","description":"<p>y axis direction of light</p>\n","type":"Number"},{"name":"rz","description":"<p>z axis direction of light</p>\n","type":"Number"},{"name":"angle","description":"<p>optional parameter for angle. Defaults to PI/3</p>\n","type":"Number","optional":true},{"name":"conc","description":"<p>optional parameter for concentration. Defaults to 100</p>\n","type":"Number","optional":true}],"chainable":1},{"line":562,"params":[{"name":"color","description":"<p>color Array, CSS color string,\nor <a href=\"#/p5.Color\">p5.Color</a> value</p>\n","type":"Number[]|String|p5.Color"},{"name":"position","description":"<p>the position of the light</p>\n","type":"p5.Vector"},{"name":"direction","description":"<p>the direction of the light</p>\n","type":"p5.Vector"},{"name":"angle","description":"","type":"Number","optional":true},{"name":"conc","description":"","type":"Number","optional":true}]},{"line":571,"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":"conc","description":"","type":"Number","optional":true}]},{"line":581,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"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":"conc","description":"","type":"Number","optional":true}]},{"line":591,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"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":"conc","description":"","type":"Number","optional":true}]},{"line":601,"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":"conc","description":"","type":"Number","optional":true}]},{"line":613,"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":"conc","description":"","type":"Number","optional":true}]},{"line":625,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"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":"conc","description":"","type":"Number","optional":true}]}]},{"file":"src/webgl/light.js","line":850,"description":"<p>This function will remove all the lights from the sketch for the\nsubsequent materials rendered. It affects all the subsequent methods.\nCalls to lighting methods made after noLights() will re-enable lights\nin the sketch.</p>\n","itemtype":"method","name":"noLights","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(0);\n  noStroke();\n\n  ambientLight(150, 0, 0);\n  translate(-25, 0, 0);\n  ambientMaterial(250);\n  sphere(20);\n\n  noLights();\n  ambientLight(0, 150, 0);\n  translate(50, 0, 0);\n  ambientMaterial(250);\n  sphere(20);\n}\n</code>\n</div>"],"alt":"Two spheres showing different colors","class":"p5","module":"Lights, Camera","submodule":"Lights"},{"file":"src/webgl/loading.js","line":12,"description":"<p>Load a 3d model from an OBJ or STL file.</p>\n<p><a href=\"#/p5/loadModel\">loadModel()</a> should be placed inside of <a href=\"#/p5/preload\">preload()</a>.\nThis allows the model to load fully before the rest of your code is run.</p>\n<p>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\n<a href=\"#/p5/loadModel\">loadModel()</a> 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 <a href=\"#/p5/scale\">scale()</a> function.</p>\n<p>Also, the support for colored STL files is not present. STL files with color will be\nrendered without color properties.</p>\n","itemtype":"method","name":"loadModel","return":{"description":"the <a href=\"#/p5.Geometry\">p5.Geometry</a> object","type":"p5.Geometry"},"example":["\n<div>\n<code>\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}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  model(octahedron);\n}\n</code>\n</div>","\n<div>\n<code>\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}\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</code>\n</div>"],"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":"<p>Path of the model to be loaded</p>\n","type":"String"},{"name":"normalize","description":"<p>If true, scale the model to a\n                                     standardized size when loading</p>\n","type":"Boolean"},{"name":"successCallback","description":"<p>Function to be called\n                                    once the model is loaded. Will be passed\n                                    the 3D model object.</p>\n","type":"function(p5.Geometry)","optional":true},{"name":"failureCallback","description":"<p>called with event error if\n                                        the model fails to load.</p>\n","type":"Function(Event)","optional":true},{"name":"fileType","description":"<p>The file extension of the model\n                                     (<code>.stl</code>, <code>.obj</code>).</p>\n","type":"String","optional":true}],"return":{"description":"the <a href=\"#/p5.Geometry\">p5.Geometry</a> object","type":"p5.Geometry"}},{"line":96,"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 <a href=\"#/p5.Geometry\">p5.Geometry</a> object","type":"p5.Geometry"}}]},{"file":"src/webgl/loading.js","line":179,"description":"<p>Parse OBJ lines into model. For reference, this is what a simple model of a\nsquare might look like:</p>\n<p>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</p>\n<p>f 4 3 2 1</p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":290,"description":"<p>STL files can be of two types, ASCII and Binary,</p>\n<p>We need to convert the arrayBuffer to an array of strings,\nto parse it as an ASCII file.</p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":317,"description":"<p>This function checks if the file is in ASCII format or in Binary format</p>\n<p>It is done by searching keyword <code>solid</code> at the start of the file.</p>\n<p>An ASCII STL data must begin with <code>solid</code> as the first six bytes.\nHowever, ASCII STLs lacking the SPACE after the <code>d</code> are known to be\nplentiful. So, check the first 5 bytes for <code>solid</code>.</p>\n<p>Several encodings, such as UTF-8, precede the text with up to 5 bytes:\n<a href=\"https://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding\">https://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding</a>\nSearch for <code>solid</code> to start anywhere after those prefixes.</p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":344,"description":"<p>This function matches the <code>query</code> at the provided <code>offset</code></p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":356,"description":"<p>This function parses the Binary STL files.\n<a href=\"https://en.wikipedia.org/wiki/STL_%28file_format%29#Binary_STL\">https://en.wikipedia.org/wiki/STL_%28file_format%29#Binary_STL</a></p>\n<p>Currently there is no support for the colors provided in STL files.</p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":444,"description":"<p>ASCII STL file starts with <code>solid 'nameOfFile'</code>\nThen contain the normal of the face, starting with <code>facet normal</code>\nNext contain a keyword indicating the start of face vertex, <code>outer loop</code>\nNext comes the three vertex, starting with <code>vertex x y z</code>\nVertices ends with <code>endloop</code>\nFace ends with <code>endfacet</code>\nNext face starts with <code>facet normal</code>\nThe end of the file is indicated by <code>endsolid</code></p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":588,"description":"<p>Render a 3d model to the screen.</p>\n","itemtype":"method","name":"model","params":[{"name":"model","description":"<p>Loaded 3d model to be rendered</p>\n","type":"p5.Geometry"}],"example":["\n<div>\n<code>\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}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  model(octahedron);\n}\n</code>\n</div>"],"alt":"Vertically rotating 3-d octahedron.","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/material.js","line":12,"description":"<p>Loads a custom shader from the provided vertex and fragment\nshader paths. The shader files are loaded asynchronously in the\nbackground, so this method should be used in <a href=\"#/p5/preload\">preload()</a>.</p>\n<p>For now, there are three main types of shaders. p5 will automatically\nsupply appropriate vertices, normals, colors, and lighting attributes\nif the parameters defined in the shader match the names.</p>\n","itemtype":"method","name":"loadShader","params":[{"name":"vertFilename","description":"<p>path to file containing vertex shader\nsource code</p>\n","type":"String"},{"name":"fragFilename","description":"<p>path to file containing fragment shader\nsource code</p>\n","type":"String"},{"name":"callback","description":"<p>callback to be executed after loadShader\ncompletes. On success, the Shader object is passed as the first argument.</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>callback to be executed when an error\noccurs inside loadShader. On error, the error is passed as the first\nargument.</p>\n","type":"Function","optional":true}],"return":{"description":"a shader object created from the provided\nvertex and fragment shader files.","type":"p5.Shader"},"example":["\n<div modernizr='webgl'>\n<code>\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}\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</code>\n</div>"],"alt":"zooming Mandelbrot set. a colorful, infinitely detailed fractal.","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":111,"itemtype":"method","name":"createShader","params":[{"name":"vertSrc","description":"<p>source code for the vertex shader</p>\n","type":"String"},{"name":"fragSrc","description":"<p>source code for the fragment shader</p>\n","type":"String"}],"return":{"description":"a shader object created from the provided\nvertex and fragment shaders.","type":"p5.Shader"},"example":["\n<div modernizr='webgl'>\n<code>\n// the 'varying's are shared between both vertex & fragment shaders\nlet varying = 'precision highp float; varying vec2 vPos;';\n\n// the vertex shader is called for each vertex\nlet vs =\n  varying +\n  'attribute vec3 aPosition;' +\n  'void main() { vPos = (gl_Position = vec4(aPosition,1.0)).xy; }';\n\n// the fragment shader is called for each pixel\nlet fs =\n  varying +\n  'uniform vec2 p;' +\n  'uniform float r;' +\n  'const int I = 500;' +\n  'void main() {' +\n  '  vec2 c = p + vPos * r, z = c;' +\n  '  float n = 0.0;' +\n  '  for (int i = I; i > 0; i --) {' +\n  '    if(z.x*z.x+z.y*z.y > 4.0) {' +\n  '      n = float(i)/float(I);' +\n  '      break;' +\n  '    }' +\n  '    z = vec2(z.x*z.x-z.y*z.y, 2.0*z.x*z.y) + c;' +\n  '  }' +\n  '  gl_FragColor = vec4(0.5-cos(n*17.0)/2.0,0.5-cos(n*13.0)/2.0,0.5-cos(n*23.0)/2.0,1.0);' +\n  '}';\n\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}\n\nfunction draw() {\n  // 'r' is the size of the image in Mandelbrot-space\n  mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));\n  quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n</code>\n</div>"],"alt":"zooming Mandelbrot set. a colorful, infinitely detailed fractal.","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":179,"description":"<p>The <a href=\"#/p5/shader\">shader()</a> function lets the user provide a custom shader\nto fill in shapes in WEBGL mode. Users can create their\nown shaders by loading vertex and fragment shaders with\n<a href=\"#/p5/loadShader\">loadShader()</a>.</p>\n","itemtype":"method","name":"shader","chainable":1,"params":[{"name":"s","description":"<p>the desired <a href=\"#/p5.Shader\">p5.Shader</a> to use for rendering\nshapes.</p>\n","type":"p5.Shader","optional":true}],"example":["\n<div modernizr='webgl'>\n<code>\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\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</code>\n</div>"],"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":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":270,"description":"<p>This function restores the default shaders in WEBGL mode. Code that runs\nafter resetShader() will not be affected by previously defined\nshaders. Should be run after <a href=\"#/p5/shader\">shader()</a>.</p>\n","itemtype":"method","name":"resetShader","chainable":1,"class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":283,"description":"<p>Normal material for geometry is a material that is not affected by light.\nIt is not reflective and is a placeholder material often used for debugging.\nSurfaces facing the X-axis, become red, those facing the Y-axis, become green and those facing the Z-axis, become blue.\nYou can view all possible materials in this\n<a href=\"https://p5js.org/examples/3d-materials.html\">example</a>.</p>\n","itemtype":"method","name":"normalMaterial","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  normalMaterial();\n  sphere(40);\n}\n</code>\n</div>"],"alt":"Red, green and blue gradient.","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":321,"description":"<p>Texture for geometry.  You can view other possible materials in this\n<a href=\"https://p5js.org/examples/3d-materials.html\">example</a>.</p>\n","itemtype":"method","name":"texture","params":[{"name":"tex","description":"<p>2-dimensional graphics\n                   to render as texture</p>\n","type":"p5.Image|p5.MediaElement|p5.Graphics"}],"chainable":1,"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  rotateZ(frameCount * 0.01);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  //pass image as texture\n  texture(img);\n  box(200, 200, 200);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet pg;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  pg = createGraphics(200, 200);\n  pg.textSize(75);\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</code>\n</div>\n\n<div>\n<code>\nlet vid;\nfunction preload() {\n  vid = createVideo('assets/fingers.mov');\n  vid.hide();\n}\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  //pass video frame as texture\n  texture(vid);\n  rect(-40, -40, 80, 80);\n}\n\nfunction mousePressed() {\n  vid.loop();\n}\n</code>\n</div>"],"alt":"Rotating view of many images umbrella and grid roof on a 3d plane\nblack canvas\nblack canvas","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":421,"description":"<p>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.\nThis function only works in WEBGL mode.</p>\n<p>With IMAGE, if an image is 100 x 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).</p>\n","itemtype":"method","name":"textureMode","params":[{"name":"mode","description":"<p>either IMAGE or NORMAL</p>\n","type":"Constant"}],"example":["\n<div>\n<code>\nlet img;\n\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"the underside of a white umbrella and gridded ceiling above","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":499,"description":"<p>Sets the global texture wrapping mode. This controls how textures behave\nwhen their uv's go outside of the 0 - 1 range. There are three options:\nCLAMP, REPEAT, and MIRROR.</p>\n<p>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</p>\n<p>REPEAT & MIRROR are only available if the texture\nis a power of two size (128, 256, 512, 1024, etc.).</p>\n<p>This method will affect all textures in your sketch until a subsequent\ntextureWrap call is made.</p>\n<p>If only one argument is provided, it will be applied to both the\nhorizontal and vertical axes.</p>\n","itemtype":"method","name":"textureWrap","params":[{"name":"wrapX","description":"<p>either CLAMP, REPEAT, or MIRROR</p>\n","type":"Constant"},{"name":"wrapY","description":"<p>either CLAMP, REPEAT, or MIRROR</p>\n","type":"Constant","optional":true}],"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies128.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  textureWrap(MIRROR);\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</code>\n</div>"],"alt":"an image of the rocky mountains repeated in mirrored tiles","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":571,"description":"<p>Ambient material for geometry with a given color. Ambient material defines the color the object reflects under any lighting.\nFor example, if the ambient material of an object is pure red, but the ambient lighting only contains green, the object will not reflect any light.\nHere's an <a href=\"https://p5js.org/examples/3d-materials.html\">example containing all possible materials</a>.</p>\n","itemtype":"method","name":"ambientMaterial","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(0);\n  noStroke();\n  ambientLight(200);\n  ambientMaterial(70, 130, 230);\n  sphere(40);\n}\n</code>\n</div>\n<div>\n<code>\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}\nfunction draw() {\n  background(70);\n  ambientLight(100); // white light\n  ambientMaterial(255, 0, 255); // pink material\n  box(30);\n}\n</code>\n</div>\n<div>\n<code>\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}\nfunction draw() {\n  background(70);\n  ambientLight(0, 255, 0); // green light\n  ambientMaterial(255, 0, 255); // pink material\n  box(30);\n}\n</code>\n</div>"],"alt":"radiating light source from top right of canvas\nbox reflecting only red and blue light\nbox reflecting no light","class":"p5","module":"Lights, Camera","submodule":"Material","overloads":[{"line":571,"params":[{"name":"v1","description":"<p>gray value, red or hue value\n                        (depending on the current color mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number","optional":true},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number","optional":true}],"chainable":1},{"line":631,"params":[{"name":"color","description":"<p>color, color Array, or CSS color string</p>\n","type":"Number[]|String|p5.Color"}],"chainable":1}]},{"file":"src/webgl/material.js","line":651,"description":"<p>Sets the emissive color of the material used for geometry drawn to\nthe screen. This is a misnomer in the sense that the material does not\nactually emit light that effects surrounding polygons. Instead,\nit gives the appearance that the object is glowing. An emissive material\nwill display at full strength even if there is no light for it to reflect.</p>\n","itemtype":"method","name":"emissiveMaterial","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(0);\n  noStroke();\n  ambientLight(0);\n  emissiveMaterial(130, 230, 0);\n  sphere(40);\n}\n</code>\n</div>"],"alt":"radiating light source from top right of canvas","class":"p5","module":"Lights, Camera","submodule":"Material","overloads":[{"line":651,"params":[{"name":"v1","description":"<p>gray value, red or hue value\n                        (depending on the current color mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number","optional":true},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number","optional":true},{"name":"a","description":"<p>opacity</p>\n","type":"Number","optional":true}],"chainable":1},{"line":683,"params":[{"name":"color","description":"<p>color, color Array, or CSS color string</p>\n","type":"Number[]|String|p5.Color"}],"chainable":1}]},{"file":"src/webgl/material.js","line":703,"description":"<p>Specular material for geometry with a given color. Specular material is a shiny reflective material.\nLike ambient material it also defines the color the object reflects under ambient lighting.\nFor example, if the specular material of an object is pure red, but the ambient lighting only contains green, the object will not reflect any light.\nFor all other types of light like point and directional light, a specular material will reflect the color of the light source to the viewer.\nHere's an <a href=\"https://p5js.org/examples/3d-materials.html\">example containing all possible materials</a>.</p>\n","itemtype":"method","name":"specularMaterial","chainable":1,"class":"p5","module":"Lights, Camera","submodule":"Material","overloads":[{"line":703,"params":[{"name":"gray","description":"<p>number specifying value between white and black.</p>\n","type":"Number"},{"name":"alpha","description":"<p>alpha value relative to current color range\n                                (default is 0-255)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":717,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":747,"params":[{"name":"color","description":"<p>color Array, or CSS color string</p>\n","type":"Number[]|String|p5.Color"}],"chainable":1}]},{"file":"src/webgl/material.js","line":767,"description":"<p>Sets the amount of gloss in the surface of shapes.\nUsed in combination with specularMaterial() in setting\nthe material properties of shapes. The default and minimum value is 1.</p>\n","itemtype":"method","name":"shininess","params":[{"name":"shine","description":"<p>Degree of Shininess.\n                      Defaults to 1.</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"Shininess on Camera changes position with mouse","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Camera.js","line":13,"description":"<p>Sets the camera position for a 3D sketch. Parameters for this function define\nthe position for the camera, the center of the sketch (where the camera is\npointing), and an up direction (the orientation of the camera).</p>\n<p>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 centerX value is positive, the camera\nis rotating to the right side of the sketch, so the object would seem like\nmoving to the left.</p>\n<p>See this <a href = \"https://www.openprocessing.org/sketch/740258\">example</a>\nto view the position of your camera.</p>\n<p>When called with no arguments, this function creates a default camera\nequivalent to\ncamera(0, 0, (height/2.0) / tan(PI*30.0 / 180.0), 0, 0, 0, 0, 1, 0);</p>\n","itemtype":"method","name":"camera","is_constructor":1,"params":[{"name":"x","description":"<p>camera position value on x axis</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>camera position value on y axis</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>camera position value on z axis</p>\n","type":"Number","optional":true},{"name":"centerX","description":"<p>x coordinate representing center of the sketch</p>\n","type":"Number","optional":true},{"name":"centerY","description":"<p>y coordinate representing center of the sketch</p>\n","type":"Number","optional":true},{"name":"centerZ","description":"<p>z coordinate representing center of the sketch</p>\n","type":"Number","optional":true},{"name":"upX","description":"<p>x component of direction 'up' from camera</p>\n","type":"Number","optional":true},{"name":"upY","description":"<p>y component of direction 'up' from camera</p>\n","type":"Number","optional":true},{"name":"upZ","description":"<p>z component of direction 'up' from camera</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>","\n<div>\n<code>\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  //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  camera(X, Y, Z, centerX, centerY, centerZ, 0, 1, 0);\n  stroke(255);\n  fill(255, 102, 94);\n  box(85);\n}\n</code>\n</div>"],"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 it's center.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":115,"description":"<p>Sets a perspective projection for the camera in a 3D sketch. This projection\nrepresents depth through foreshortening: objects that are close to the camera\nappear their actual size while those that are further away from the camera\nappear smaller. 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.</p>\n<p>When called with no arguments, the defaults\nprovided are equivalent to\nperspective(PI/3.0, width/height, eyeZ/10.0, eyeZ<em>10.0), where eyeZ\nis equal to ((height/2.0) / tan(PI</em>60.0/360.0));</p>\n","itemtype":"method","name":"perspective","params":[{"name":"fovy","description":"<p>camera frustum vertical field of view,\n                          from bottom to top of view, in <a href=\"#/p5/angleMode\">angleMode</a> units</p>\n","type":"Number","optional":true},{"name":"aspect","description":"<p>camera frustum aspect ratio</p>\n","type":"Number","optional":true},{"name":"near","description":"<p>frustum near plane length</p>\n","type":"Number","optional":true},{"name":"far","description":"<p>frustum far plane length</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n//drag the mouse to look around!\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  perspective(PI / 3.0, width / height, 0.1, 500);\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) * 95);\n  box(30);\n  pop();\n  push();\n  translate(15, 0, sin(frameCount / 30 + PI) * 95);\n  box(30);\n  pop();\n}\n</code>\n</div>"],"alt":"two colored 3D boxes move back and forth, rotating as mouse is dragged.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":175,"description":"<p>Sets an orthographic projection for the camera in a 3D sketch and defines a\nbox-shaped viewing frustum within which objects are seen. In this projection,\nall objects with the same dimension appear the same size, regardless of\nwhether they are near or far from the camera. The parameters to this\nfunction specify the viewing frustum where left and right are the minimum and\nmaximum x values, top and bottom are the minimum and maximum y values, and near\nand far are the minimum and maximum z values. If no parameters are given, the\ndefault is used: ortho(-width/2, width/2, -height/2, height/2).</p>\n","itemtype":"method","name":"ortho","params":[{"name":"left","description":"<p>camera frustum left plane</p>\n","type":"Number","optional":true},{"name":"right","description":"<p>camera frustum right plane</p>\n","type":"Number","optional":true},{"name":"bottom","description":"<p>camera frustum bottom plane</p>\n","type":"Number","optional":true},{"name":"top","description":"<p>camera frustum top plane</p>\n","type":"Number","optional":true},{"name":"near","description":"<p>camera frustum near plane</p>\n","type":"Number","optional":true},{"name":"far","description":"<p>camera frustum far plane</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n//drag the mouse to look around!\n//there's no vanishing point\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  ortho(-width / 2, width / 2, height / 2, -height / 2, 0, 500);\n}\nfunction draw() {\n  background(200);\n  orbitControl();\n  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</code>\n</div>"],"alt":"two 3D boxes move back and forth along same plane, rotating as mouse is dragged.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":231,"description":"<p>Sets a perspective matrix as defined by the parameters.</p>\n<p>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.</p>\n<p>Setting the frustum changes the perspective of the scene being rendered.\nThis can be achieved more simply in many cases by using\n<a href=\"https://p5js.org/reference/#/p5/perspective\">perspective()</a>.</p>\n","itemtype":"method","name":"frustum","params":[{"name":"left","description":"<p>camera frustum left plane</p>\n","type":"Number","optional":true},{"name":"right","description":"<p>camera frustum right plane</p>\n","type":"Number","optional":true},{"name":"bottom","description":"<p>camera frustum bottom plane</p>\n","type":"Number","optional":true},{"name":"top","description":"<p>camera frustum top plane</p>\n","type":"Number","optional":true},{"name":"near","description":"<p>camera frustum near plane</p>\n","type":"Number","optional":true},{"name":"far","description":"<p>camera frustum far plane</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  setAttributes('antialias', true);\n  frustum(-0.1, 0.1, -0.1, 0.1, 0.1, 200);\n}\nfunction draw() {\n  background(200);\n  orbitControl();\n  strokeWeight(10);\n  stroke(0, 0, 255);\n  noFill();\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</code>\n</div>"],"alt":"two 3D boxes move back and forth along same plane, rotating as mouse is dragged.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":297,"description":"<p>Creates a new <a href=\"#/p5.Camera\">p5.Camera</a> object and tells the\nrenderer to use that camera.\nReturns the p5.Camera object.</p>\n","itemtype":"method","name":"createCamera","return":{"description":"The newly created camera object.","type":"p5.Camera"},"example":["\n<div><code>\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  setCamera(camera);\n}\n\nfunction draw() {\n  camera.lookAt(0, 0, 0);\n  camera.setPosition(sin(frameCount / 60) * 200, 0, 100);\n  box(20);\n}\n</code></div>"],"alt":"An example that creates a camera and moves it around the box.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":426,"description":"<p>camera position value on x axis</p>\n","itemtype":"property","name":"eyeX","type":"Number","readonly":"","example":["\n\n<div class='norender'><code>\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}\n\nfunction draw() {\n  orbitControl();\n  box(10);\n  div.html('eyeX = ' + cam.eyeX);\n}\n</code></div>"],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":454,"description":"<p>camera position value on y axis</p>\n","itemtype":"property","name":"eyeY","type":"Number","readonly":"","example":["\n<div class='norender'><code>\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}\n\nfunction draw() {\n  orbitControl();\n  box(10);\n  div.html('eyeY = ' + cam.eyeY);\n}\n</code></div>"],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":481,"description":"<p>camera position value on z axis</p>\n","itemtype":"property","name":"eyeZ","type":"Number","readonly":"","example":["\n<div class='norender'><code>\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}\n\nfunction draw() {\n  orbitControl();\n  box(10);\n  div.html('eyeZ = ' + cam.eyeZ);\n}\n</code></div>"],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":508,"description":"<p>x coordinate representing center of the sketch</p>\n","itemtype":"property","name":"centerX","type":"Number","readonly":"","example":["\n<div class='norender'><code>\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}\n\nfunction draw() {\n  orbitControl();\n  box(10);\n}\n</code></div>"],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":536,"description":"<p>y coordinate representing center of the sketch</p>\n","itemtype":"property","name":"centerY","type":"Number","readonly":"","example":["\n<div class='norender'><code>\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}\n\nfunction draw() {\n  orbitControl();\n  box(10);\n}"],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":563,"description":"<p>z coordinate representing center of the sketch</p>\n","itemtype":"property","name":"centerZ","type":"Number","readonly":"","example":["\n<div class='norender'><code>\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}\n\nfunction draw() {\n  orbitControl();\n  box(10);\n}"],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":590,"description":"<p>x component of direction 'up' from camera</p>\n","itemtype":"property","name":"upX","type":"Number","readonly":"","example":["\n<div class='norender'><code>\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}\n</code></div>"],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":613,"description":"<p>y component of direction 'up' from camera</p>\n","itemtype":"property","name":"upY","type":"Number","readonly":"","example":["\n<div class='norender'><code>\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}\n</code></div>"],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":636,"description":"<p>z component of direction 'up' from camera</p>\n","itemtype":"property","name":"upZ","type":"Number","readonly":"","example":["\n<div class='norender'><code>\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}\n</code></div>"],"alt":"An example showing the use of camera object properties","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":663,"description":"<p>Sets a perspective projection for a p5.Camera object and sets parameters\nfor that projection according to <a href=\"#/p5/perspective\">perspective()</a>\nsyntax.</p>\n","itemtype":"method","name":"perspective","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":743,"description":"<p>Sets an orthographic projection for a p5.Camera object and sets parameters\nfor that projection according to <a href=\"#/p5/ortho\">ortho()</a> syntax.</p>\n","itemtype":"method","name":"ortho","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":802,"itemtype":"method","name":"frustum","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":907,"description":"<p>Panning rotates the camera view to the left and right.</p>\n","itemtype":"method","name":"pan","params":[{"name":"angle","description":"<p>amount to rotate camera in current\n<a href=\"#/p5/angleMode\">angleMode</a> units.\nGreater than 0 values rotate counterclockwise (to the left).</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet cam;\nlet delta = 0.01;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n  cam = createCamera();\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</code>\n</div>"],"alt":"camera view pans left and right across a series of rotating 3D boxes.","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":965,"description":"<p>Tilting rotates the camera view up and down.</p>\n","itemtype":"method","name":"tilt","params":[{"name":"angle","description":"<p>amount to rotate camera in current\n<a href=\"#/p5/angleMode\">angleMode</a> units.\nGreater than 0 values rotate counterclockwise (to the left).</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet cam;\nlet delta = 0.01;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n  cam = createCamera();\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</code>\n</div>"],"alt":"camera view tilts up and down across a series of rotating 3D boxes.","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1023,"description":"<p>Reorients the camera to look at a position in world space.</p>\n","itemtype":"method","name":"lookAt","params":[{"name":"x","description":"<p>x position of a point in world space</p>\n","type":"Number"},{"name":"y","description":"<p>y position of a point in world space</p>\n","type":"Number"},{"name":"z","description":"<p>z position of a point in world space</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet cam;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n  cam = createCamera();\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</code>\n</div>"],"alt":"camera view of rotating 3D cubes changes to look at a new random\npoint every second .","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1090,"description":"<p>Sets a camera's position and orientation.  This is equivalent to calling\n<a href=\"#/p5/camera\">camera()</a> on a p5.Camera object.</p>\n","itemtype":"method","name":"camera","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1175,"description":"<p>Move camera along its local axes while maintaining current camera orientation.</p>\n","itemtype":"method","name":"move","params":[{"name":"x","description":"<p>amount to move along camera's left-right axis</p>\n","type":"Number"},{"name":"y","description":"<p>amount to move along camera's up-down axis</p>\n","type":"Number"},{"name":"z","description":"<p>amount to move along camera's forward-backward axis</p>\n","type":"Number"}],"example":["\n<div>\n<code>\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}\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</code>\n</div>"],"alt":"camera view moves along a series of 3D boxes, maintaining the same\norientation throughout the move","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1247,"description":"<p>Set camera position in world-space while maintaining current camera\norientation.</p>\n","itemtype":"method","name":"setPosition","params":[{"name":"x","description":"<p>x position of a point in world space</p>\n","type":"Number"},{"name":"y","description":"<p>y position of a point in world space</p>\n","type":"Number"},{"name":"z","description":"<p>z position of a point in world space</p>\n","type":"Number"}],"example":["\n<div>\n<code>\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}\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</code>\n</div>"],"alt":"camera position changes as the user presses keys, altering view of a 3D box","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1512,"description":"<p>Sets rendererGL's current camera to a p5.Camera object.  Allows switching\nbetween multiple cameras.</p>\n","itemtype":"method","name":"setCamera","params":[{"name":"cam","description":"<p>p5.Camera object</p>\n","type":"p5.Camera"}],"example":["\n<div>\n<code>\nlet cam1, cam2;\nlet currentCamera;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n\n  cam1 = createCamera();\n  cam2 = createCamera();\n  cam2.setPosition(30, 0, 50);\n  cam2.lookAt(0, 0, 0);\n  cam2.ortho();\n\n  // set variable for previously active camera:\n  currentCamera = 1;\n}\n\nfunction draw() {\n  background(200);\n\n  // camera 1:\n  cam1.lookAt(0, 0, 0);\n  cam1.setPosition(sin(frameCount / 60) * 200, 0, 100);\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  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</code>\n</div>"],"alt":"Canvas switches between two camera views, each showing a series of spinning\n3D boxes.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Geometry.js","line":71,"description":"<p>computes faces for geometry objects based on the vertices.</p>\n","itemtype":"method","name":"computeFaces","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Geometry.js","line":114,"description":"<p>computes smooth normals per vertex as an average of each\nface.</p>\n","itemtype":"method","name":"computeNormals","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Geometry.js","line":153,"description":"<p>Averages the vertex normals. Used in curved\nsurfaces</p>\n","itemtype":"method","name":"averageNormals","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Geometry.js","line":174,"description":"<p>Averages pole normals.  Used in spherical primitives</p>\n","itemtype":"method","name":"averagePoleNormals","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Geometry.js","line":267,"description":"<p>Modifies all vertices to be centered within the range -100 to 100.</p>\n","itemtype":"method","name":"normalize","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.RendererGL.js","line":331,"description":"<p>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.</p>\n<p>Note that this will reinitialize the drawing context\nif called after the WebGL canvas is made.</p>\n<p>If an object is passed as the parameter, all attributes\nnot declared in the object will be set to defaults.</p>\n<p>The available attributes are:\n<br>\nalpha - indicates if the canvas contains an alpha buffer\ndefault is true</p>\n<p>depth - indicates whether the drawing buffer has a depth buffer\nof at least 16 bits - default is true</p>\n<p>stencil - indicates whether the drawing buffer has a stencil buffer\nof at least 8 bits</p>\n<p>antialias - indicates whether or not to perform anti-aliasing\ndefault is false (true in Safari)</p>\n<p>premultipliedAlpha - indicates that the page compositor will assume\nthe drawing buffer contains colors with pre-multiplied alpha\ndefault is false</p>\n<p>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</p>\n<p>perPixelLighting - if true, per-pixel lighting will be used in the\nlighting shader otherwise per-vertex lighting is used.\ndefault is true.</p>\n","itemtype":"method","name":"setAttributes","example":["\n<div>\n<code>\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</code>\n</div>\n<br>\nNow with the antialias attribute set to true.\n<br>\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"alt":"a rotating cube with smoother edges","class":"p5","module":"Rendering","submodule":"Rendering","overloads":[{"line":331,"params":[{"name":"key","description":"<p>Name of attribute</p>\n","type":"String"},{"name":"value","description":"<p>New value of named attribute</p>\n","type":"Boolean"}]},{"line":470,"params":[{"name":"obj","description":"<p>object with key-value pairs</p>\n","type":"Object"}]}]},{"file":"src/webgl/p5.Shader.js","line":296,"description":"<p>Wrapper around gl.uniform functions.\nAs we store uniform info in the shader we can use that\nto do type checking on the supplied data and call\nthe appropriate function.</p>\n","itemtype":"method","name":"setUniform","chainable":1,"params":[{"name":"uniformName","description":"<p>the name of the uniform in the\nshader program</p>\n","type":"String"},{"name":"data","description":"<p>the data to be associated\nwith that uniform; type varies (could be a single numerical value, array,\nmatrix, or texture / sampler reference)</p>\n","type":"Object|Number|Boolean|Number[]"}],"example":["\n<div modernizr='webgl'>\n<code>\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\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</code>\n</div>"],"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":"Lights, Camera","submodule":"Material"},{"file":"lib/addons/p5.sound.js","line":1,"class":"p5.sound","module":"Lights, Camera"},{"file":"lib/addons/p5.sound.js","line":52,"description":"<p>p5.sound \n<a href=\"https://p5js.org/reference/#/libraries/p5.sound\">https://p5js.org/reference/#/libraries/p5.sound</a></p>\n<p>From the Processing Foundation and contributors\n<a href=\"https://github.com/processing/p5.js-sound/graphs/contributors\">https://github.com/processing/p5.js-sound/graphs/contributors</a></p>\n<p>MIT License (MIT)\n<a href=\"https://github.com/processing/p5.js-sound/blob/master/LICENSE\">https://github.com/processing/p5.js-sound/blob/master/LICENSE</a></p>\n<p>Some of the many audio libraries & resources that inspire p5.sound:</p>\n<ul>\n<li><p>TONE.js (c) Yotam Mann. Licensed under The MIT License (MIT). <a href=\"https://github.com/TONEnoTONE/Tone.js\">https://github.com/TONEnoTONE/Tone.js</a></p>\n</li>\n<li><p>buzz.js (c) Jay Salvat. Licensed under The MIT License (MIT). <a href=\"http://buzz.jaysalvat.com/\">http://buzz.jaysalvat.com/</a></p>\n</li>\n<li><p>Boris Smus Web Audio API book, 2013. Licensed under the Apache License <a href=\"http://www.apache.org/licenses/LICENSE-2.0\">http://www.apache.org/licenses/LICENSE-2.0</a></p>\n</li>\n<li><p>wavesurfer.js <a href=\"https://github.com/katspaugh/wavesurfer.js\">https://github.com/katspaugh/wavesurfer.js</a></p>\n</li>\n<li><p>Web Audio Components by Jordan Santell <a href=\"https://github.com/web-audio-components\">https://github.com/web-audio-components</a></p>\n</li>\n<li><p>Wilm Thoben's Sound library for Processing <a href=\"https://github.com/processing/processing/tree/master/java/libraries/sound\">https://github.com/processing/processing/tree/master/java/libraries/sound</a></p>\n<p>Web Audio API: <a href=\"http://w3.org/TR/webaudio/\">http://w3.org/TR/webaudio/</a></p>\n</li>\n</ul>\n","class":"p5.sound","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":166,"description":"<p>Returns a number representing the master amplitude (volume) for sound\nin this sketch.</p>\n","itemtype":"method","name":"getMasterVolume","return":{"description":"Master amplitude (volume) for sound in this sketch.\n                 Should be between 0.0 (silence) and 1.0.","type":"Number"},"class":"p5.sound","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":178,"description":"<p>Scale the output of all sound in this sketch</p>\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 <code>rampTime</code> parameter. For more\ncomplex fades, see the Envelope class.\n\n<p>Alternately, you can pass in a signal source such as an\noscillator to modulate the amplitude with an audio signal.</p>\n<p><b>How This Works</b>: 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.</p>\n\n<p>If no value is provided, returns a Web Audio API Gain Node</p>","itemtype":"method","name":"masterVolume","params":[{"name":"volume","description":"<p>Volume (amplitude) between 0.0\n                                   and 1.0 or modulating signal/oscillator</p>\n","type":"Number|Object"},{"name":"rampTime","description":"<p>Fade for t seconds</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>Schedule this event to happen at\n                               t seconds in the future</p>\n","type":"Number","optional":true}],"class":"p5.sound","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":221,"description":"<p><code>p5.soundOut</code> is the p5.sound master output. It sends output to\nthe destination of this window's web audio context. It contains\nWeb Audio API nodes including a dyanmicsCompressor (<code>.limiter</code>),\nand Gain Nodes for <code>.input</code> and <code>.output</code>.</p>\n","itemtype":"property","name":"soundOut","type":"Object","class":"p5.sound","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":300,"description":"<p>In classes that extend\np5.Effect, connect effect nodes\nto the wet parameter</p>\n","class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":316,"description":"<p>Set the output volume of the filter.</p>\n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"<p>amplitude between 0 and 1.0</p>\n","type":"Number","optional":true},{"name":"rampTime","description":"<p>create a fade that lasts until rampTime</p>\n","type":"Number","optional":true},{"name":"tFromNow","description":"<p>schedule this event to happen in tFromNow seconds</p>\n","type":"Number","optional":true}],"class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":336,"description":"<p>Link effects together in a chain\nExample usage: filter.chain(reverb, delay, panner);\nMay be used with an open-ended number of arguments</p>\n","itemtype":"method","name":"chain","params":[{"name":"arguments","description":"<p>Chain together multiple sound objects</p>\n","type":"Object","optional":true}],"class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":358,"description":"<p>Adjust the dry/wet value.</p>\n","itemtype":"method","name":"drywet","params":[{"name":"fade","description":"<p>The desired drywet value (0 - 1.0)</p>\n","type":"Number","optional":true}],"class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":374,"description":"<p>Send output to a p5.js-sound, Web Audio Node, or use signal to\ncontrol an AudioParam</p>\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":388,"description":"<p>Disconnect all output.</p>\n","itemtype":"method","name":"disconnect","class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":451,"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":455,"description":"<p>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.</p>\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":470,"description":"<p>Returns the closest MIDI note value for\na given frequency.</p>\n","itemtype":"method","name":"freqToMidi","params":[{"name":"frequency","description":"<p>A freqeuncy, for example, the \"A\"\n                           above Middle C is 440Hz</p>\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":486,"description":"<p>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.</p>\n","itemtype":"method","name":"midiToFreq","params":[{"name":"midiNote","description":"<p>The number of a MIDI note</p>\n","type":"Number"}],"return":{"description":"Frequency value of the given MIDI note","type":"Number"},"example":["\n<div><code>\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</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":570,"description":"<p>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.\n<a href=\"http://media.io/\">Here</a> is a free online file\nconverter.</p>\n","itemtype":"method","name":"soundFormats","params":[{"name":"formats","description":"<p>i.e. 'mp3', 'wav', 'ogg'</p>\n","type":"String","optional":true,"multiple":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":688,"description":"<p>Used by Osc and Envelope to chain signal math</p>\n","class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":967,"description":"<p>The p5.Filter is built with a\n<a href=\"http://www.w3.org/TR/webaudio/#BiquadFilterNode\">\nWeb Audio BiquadFilter Node</a>.</p>\n","itemtype":"property","name":"biquadFilter","type":"DelayNode","class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":989,"description":"<p>Filter an audio signal according to a set\nof filter parameters.</p>\n","itemtype":"method","name":"process","params":[{"name":"Signal","description":"<p>An object that outputs audio</p>\n","type":"Object"},{"name":"freq","description":"<p>Frequency in Hz, from 10 to 22050</p>\n","type":"Number","optional":true},{"name":"res","description":"<p>Resonance/Width of the filter frequency\n                      from 0.001 to 1000</p>\n","type":"Number","optional":true}],"class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1004,"description":"<p>Set the frequency and the resonance of the filter.</p>\n","itemtype":"method","name":"set","params":[{"name":"freq","description":"<p>Frequency in Hz, from 10 to 22050</p>\n","type":"Number","optional":true},{"name":"res","description":"<p>Resonance (Q) from 0.001 to 1000</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1024,"description":"<p>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).</p>\n","itemtype":"method","name":"freq","params":[{"name":"freq","description":"<p>Filter Frequency</p>\n","type":"Number"},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\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":1053,"description":"<p>Controls either width of a bandpass frequency,\nor the resonance of a low/highpass cutoff frequency.</p>\n","itemtype":"method","name":"res","params":[{"name":"res","description":"<p>Resonance/Width of filter freq\n                     from 0.001 to 1000</p>\n","type":"Number"},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\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":1079,"description":"<p>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.</p>\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":1104,"description":"<p>Toggle function. Switches between the specified type and allpass</p>\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":1123,"description":"<p>Set the type of a p5.Filter. Possible types include:\n\"lowpass\" (default), \"highpass\", \"bandpass\",\n\"lowshelf\", \"highshelf\", \"peaking\", \"notch\",\n\"allpass\".</p>\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":1218,"description":"<p>Returns the Audio Context for this sketch. Useful for users\nwho would like to dig deeper into the <a target='_blank' href=\n'http://webaudio.github.io/web-audio-api/'>Web Audio API\n</a>.</p>\n\n<p>Some browsers require users to startAudioContext\nwith a user gesture, such as touchStarted in the example below.</p>","itemtype":"method","name":"getAudioContext","return":{"description":"AudioContext for this sketch","type":"Object"},"example":["\n<div><code>\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</div></code>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1257,"description":"<p>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\n<a href=\"https://goo.gl/7K7WLu\" title=\"Google Chrome's autoplay\npolicy\">Google Chrome</a>, which create the Web Audio API's\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/AudioContext\"\ntitle=\"Audio Context @ MDN\">Audio Context</a>\nin a suspended state.</p>\n\n<p>In these browser-specific policies, sound will not play until a user\ninteraction event (i.e. <code>mousePressed()</code>) explicitly resumes\nthe AudioContext, or starts an audio node. This can be accomplished by\ncalling <code>start()</code> on a <code>p5.Oscillator</code>,\n<code> play()</code> on a <code>p5.SoundFile</code>, or simply\n<code>userStartAudio()</code>.</p>\n\n<p><code>userStartAudio()</code> 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 <code>mousePressed()</code> as in the\nexample below. This method utilizes\n<a href=\"https://github.com/tambien/StartAudioContext\">StartAudioContext\n</a>, a library by Yotam Mann (MIT Licence, 2016).</p>","params":[{"name":"element(s)","description":"<p>This argument can be an Element,\n                              Selector String, NodeList, p5.Element,\n                              jQuery Element, or an Array of any of those.</p>\n","type":"Element|Array","optional":true},{"name":"callback","description":"<p>Callback to invoke when the AudioContext\n                              has started</p>\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<div><code>\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</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1477,"description":"<p>Start an oscillator.</p>\n<p>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: <code>userStartAudio()</code>.</p>\n","itemtype":"method","name":"start","params":[{"name":"time","description":"<p>startTime in seconds from now.</p>\n","type":"Number","optional":true},{"name":"frequency","description":"<p>frequency in Hz.</p>\n","type":"Number","optional":true}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1525,"description":"<p>Stop an oscillator. Accepts an optional parameter\nto determine how long (in seconds from now) until the\noscillator stops.</p>\n","itemtype":"method","name":"stop","params":[{"name":"secondsFromNow","description":"<p>Time, in seconds from now.</p>\n","type":"Number"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1544,"description":"<p>Set the amplitude between 0 and 1.0. Or, pass in an object\nsuch as an oscillator to modulate amplitude with an audio signal.</p>\n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"<p>between 0 and 1.0\n                            or a modulating signal/oscillator</p>\n","type":"Number|Object"},{"name":"rampTime","description":"<p>create a fade that lasts rampTime</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\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":1584,"description":"<p>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.</p>\n","itemtype":"method","name":"freq","params":[{"name":"Frequency","description":"<p>Frequency in Hz\n                                      or modulating signal/oscillator</p>\n","type":"Number|Object"},{"name":"rampTime","description":"<p>Ramp time (in seconds)</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>Schedule this event to happen\n                                 at x seconds from now</p>\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<div><code>\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</code></div>"],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1662,"description":"<p>Set type to 'sine', 'triangle', 'sawtooth' or 'square'.</p>\n","itemtype":"method","name":"setType","params":[{"name":"type","description":"<p>'sine', 'triangle', 'sawtooth' or 'square'.</p>\n","type":"String"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1678,"description":"<p>Connect to a p5.sound / Web Audio object.</p>\n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"<p>A p5.sound or Web Audio object</p>\n","type":"Object"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1698,"description":"<p>Disconnect all outputs</p>\n","itemtype":"method","name":"disconnect","class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1721,"description":"<p>Pan between Left (-1) and Right (1)</p>\n","itemtype":"method","name":"pan","params":[{"name":"panning","description":"<p>Number between -1 and 1</p>\n","type":"Number"},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1759,"description":"<p>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.</p>\n","itemtype":"method","name":"phase","params":[{"name":"phase","description":"<p>float between 0.0 and 1.0</p>\n","type":"Number"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1818,"description":"<p>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.</p>\n","itemtype":"method","name":"add","params":[{"name":"number","description":"<p>Constant number to add</p>\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":1838,"description":"<p>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.</p>\n","itemtype":"method","name":"mult","params":[{"name":"number","description":"<p>Constant number to multiply</p>\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":1857,"description":"<p>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.</p>\n","itemtype":"method","name":"scale","params":[{"name":"inMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"inMax","description":"<p>input range maximum</p>\n","type":"Number"},{"name":"outMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"outMax","description":"<p>input range maximum</p>\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":2067,"description":"<p>Play tells the MonoSynth to start playing a note. This method schedules\nthe calling of .triggerAttack and .triggerRelease.</p>\n","itemtype":"method","name":"play","params":[{"name":"note","description":"<p>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 <a href = \"https://github.com/Tonejs/Tone.js/wiki/Instruments\">\n                               Tone</a>. Defaults to 440 hz.</p>\n","type":"String | Number"},{"name":"velocity","description":"<p>velocity of the note to play (ranging from 0 to 1)</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time from now (in seconds) at which to play</p>\n","type":"Number","optional":true},{"name":"sustainTime","description":"<p>time to sustain before releasing the envelope. Defaults to 0.15 seconds.</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>\n"],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2116,"description":"<p>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.</p>\n","params":[{"name":"note","description":"<p>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 <a href = \"https://github.com/Tonejs/Tone.js/wiki/Instruments\">\n                               Tone</a>. Defaults to 440 hz</p>\n","type":"String | Number"},{"name":"velocity","description":"<p>velocity of the note to play (ranging from 0 to 1)</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time from now (in seconds) at which to play</p>\n","type":"Number","optional":true}],"itemtype":"method","name":"triggerAttack","example":["\n<div><code>\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</code></div>"],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2162,"description":"<p>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.</p>\n","params":[{"name":"secondsFromNow","description":"<p>time to trigger the release</p>\n","type":"Number"}],"itemtype":"method","name":"triggerRelease","example":["\n<div><code>\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</code></div>"],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2199,"description":"<p>Set values like a traditional\n<a href=\"https://en.wikipedia.org/wiki/Synthesizer#/media/File:ADSR_parameter.svg\">\nADSR envelope\n</a>.</p>\n","itemtype":"method","name":"setADSR","params":[{"name":"attackTime","description":"<p>Time (in seconds before envelope\n                              reaches Attack Level</p>\n","type":"Number"},{"name":"decayTime","description":"<p>Time (in seconds) before envelope\n                              reaches Decay/Sustain Level</p>\n","type":"Number","optional":true},{"name":"susRatio","description":"<p>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 <code>setRange</code>),\n                              then decayLevel would increase proportionally, to become 0.5.</p>\n","type":"Number","optional":true},{"name":"releaseTime","description":"<p>Time in seconds from now (defaults to 0)</p>\n","type":"Number","optional":true}],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2226,"description":"<p>Getters and Setters</p>\n","itemtype":"property","name":"attack","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2232,"itemtype":"property","name":"decay","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2237,"itemtype":"property","name":"sustain","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2242,"itemtype":"property","name":"release","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2282,"description":"<p>MonoSynth amp</p>\n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"<p>desired volume</p>\n","type":"Number"},{"name":"rampTime","description":"<p>Time to reach new volume</p>\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":2300,"description":"<p>Connect to a p5.sound / Web Audio object.</p>\n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"<p>A p5.sound or Web Audio object</p>\n","type":"Object"}],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2313,"description":"<p>Disconnect all outputs</p>\n","itemtype":"method","name":"disconnect","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2326,"description":"<p>Get rid of the MonoSynth and free up its resources / memory.</p>\n","itemtype":"method","name":"dispose","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2380,"description":"<p>Connect to p5 objects or Web Audio Nodes</p>\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":2392,"description":"<p>Disconnect from soundOut</p>\n","itemtype":"method","name":"disconnect","class":"p5.AudioVoice","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2474,"description":"<p>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.</p>\n","itemtype":"property","name":"notes","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2487,"description":"<p>A PolySynth must have at least 1 voice, defaults to 8</p>\n","itemtype":"property","name":"polyvalue","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2493,"description":"<p>Monosynth that generates the sound for each note that is triggered. The\np5.PolySynth defaults to using the p5.MonoSynth as its voice.</p>\n","itemtype":"property","name":"AudioVoice","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2530,"description":"<p>Play a note by triggering noteAttack and noteRelease with sustain time</p>\n","itemtype":"method","name":"play","params":[{"name":"note","description":"<p>midi note to play (ranging from 0 to 127 - 60 being a middle C)</p>\n","type":"Number","optional":true},{"name":"velocity","description":"<p>velocity of the note to play (ranging from 0 to 1)</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time from now (in seconds) at which to play</p>\n","type":"Number","optional":true},{"name":"sustainTime","description":"<p>time to sustain before releasing the envelope</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2578,"description":"<p>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.</p>\n","itemtype":"method","name":"noteADSR","params":[{"name":"note","description":"<p>Midi note on which ADSR should be set.</p>\n","type":"Number","optional":true},{"name":"attackTime","description":"<p>Time (in seconds before envelope\n                              reaches Attack Level</p>\n","type":"Number","optional":true},{"name":"decayTime","description":"<p>Time (in seconds) before envelope\n                              reaches Decay/Sustain Level</p>\n","type":"Number","optional":true},{"name":"susRatio","description":"<p>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 <code>setRange</code>),\n                              then decayLevel would increase proportionally, to become 0.5.</p>\n","type":"Number","optional":true},{"name":"releaseTime","description":"<p>Time in seconds from now (defaults to 0)</p>\n","type":"Number","optional":true}],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2609,"description":"<p>Set the PolySynths global envelope. This method modifies the envelopes of each\nmonosynth so that all notes are played with this envelope.</p>\n","itemtype":"method","name":"setADSR","params":[{"name":"attackTime","description":"<p>Time (in seconds before envelope\n                               reaches Attack Level</p>\n","type":"Number","optional":true},{"name":"decayTime","description":"<p>Time (in seconds) before envelope\n                               reaches Decay/Sustain Level</p>\n","type":"Number","optional":true},{"name":"susRatio","description":"<p>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 <code>setRange</code>),\n                               then decayLevel would increase proportionally, to become 0.5.</p>\n","type":"Number","optional":true},{"name":"releaseTime","description":"<p>Time in seconds from now (defaults to 0)</p>\n","type":"Number","optional":true}],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2636,"description":"<p>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.</p>\n","itemtype":"method","name":"noteAttack","params":[{"name":"note","description":"<p>midi note on which attack should be triggered.</p>\n","type":"Number","optional":true},{"name":"velocity","description":"<p>velocity of the note to play (ranging from 0 to 1)/</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time from now (in seconds)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2746,"description":"<p>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.</p>\n","itemtype":"method","name":"noteRelease","params":[{"name":"note","description":"<p>midi note on which attack should be triggered.\n                                  If no value is provided, all notes will be released.</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time to trigger the release</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>\n"],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2829,"description":"<p>Connect to a p5.sound / Web Audio object.</p>\n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"<p>A p5.sound or Web Audio object</p>\n","type":"Object"}],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2842,"description":"<p>Disconnect all outputs</p>\n","itemtype":"method","name":"disconnect","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2855,"description":"<p>Get rid of the MonoSynth and free up its resources / memory.</p>\n","itemtype":"method","name":"dispose","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2969,"description":"<p>This module has shims</p>\n","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3105,"description":"<p>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</p>\n","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3492,"description":"<p>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<a href=\"https://github.com/processing/p5.js/wiki/Local-server\">\nlocal server</a> is recommended when loading external files.</p>\n","itemtype":"method","name":"loadSound","params":[{"name":"path","description":"<p>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.</p>\n","type":"String|Array"},{"name":"successCallback","description":"<p>Name of a function to call once file loads</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>Name of a function to call if there is\n                                    an error loading the file.</p>\n","type":"Function","optional":true},{"name":"whileLoading","description":"<p>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.</p>\n","type":"Function","optional":true}],"return":{"description":"Returns a p5.SoundFile","type":"SoundFile"},"example":["\n<div><code>\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</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3672,"description":"<p>Returns true if the sound file finished loading successfully.</p>\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":3688,"description":"<p>Play the p5.SoundFile</p>\n","itemtype":"method","name":"play","params":[{"name":"startTime","description":"<p>(optional) schedule playback to start (in seconds from now).</p>\n","type":"Number","optional":true},{"name":"rate","description":"<p>(optional) playback rate</p>\n","type":"Number","optional":true},{"name":"amp","description":"<p>(optional) amplitude (volume)\n                                    of playback</p>\n","type":"Number","optional":true},{"name":"cueStart","description":"<p>(optional) cue start time in seconds</p>\n","type":"Number","optional":true},{"name":"duration","description":"<p>(optional) duration of playback in seconds</p>\n","type":"Number","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3795,"description":"<p>p5.SoundFile has two play modes: <code>restart</code> and\n<code>sustain</code>. 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.</p>\n","itemtype":"method","name":"playMode","params":[{"name":"str","description":"<p>'restart' or 'sustain' or 'untilDone'</p>\n","type":"String"}],"example":["\n<div><code>\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 </code></div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3854,"description":"<p>Pauses a file that is currently playing. If the file is not\nplaying, then nothing will happen.</p>\n<p>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().</p>\n","itemtype":"method","name":"pause","params":[{"name":"startTime","description":"<p>(optional) schedule event to occur\n                             seconds from now</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code>\n</div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3911,"description":"<p>Loop the p5.SoundFile. Accepts optional parameters to set the\nplayback rate, playback volume, loopStart, loopEnd.</p>\n","itemtype":"method","name":"loop","params":[{"name":"startTime","description":"<p>(optional) schedule event to occur\n                            seconds from now</p>\n","type":"Number","optional":true},{"name":"rate","description":"<p>(optional) playback rate</p>\n","type":"Number","optional":true},{"name":"amp","description":"<p>(optional) playback volume</p>\n","type":"Number","optional":true},{"name":"cueLoopStart","description":"<p>(optional) startTime in seconds</p>\n","type":"Number","optional":true},{"name":"duration","description":"<p>(optional) loop duration in seconds</p>\n","type":"Number","optional":true}],"example":["\n <div><code>\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 </code>\n </div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3955,"description":"<p>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.</p>\n","itemtype":"method","name":"setLoop","params":[{"name":"Boolean","description":"<p>set looping to true or false</p>\n","type":"Boolean"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3980,"description":"<p>Returns 'true' if a p5.SoundFile is currently looping and playing, 'false' if not.</p>\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":4000,"description":"<p>Returns true if a p5.SoundFile is playing, false if not (i.e.\npaused or stopped).</p>\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":4013,"description":"<p>Returns true if a p5.SoundFile is paused, false if not (i.e.\nplaying or stopped).</p>\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":4026,"description":"<p>Stop soundfile playback.</p>\n","itemtype":"method","name":"stop","params":[{"name":"startTime","description":"<p>(optional) schedule event to occur\n                            in seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4083,"description":"<p>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 <code>rampTime</code> parameter. For more\ncomplex fades, see the Envelope class.</p>\n<p>Alternately, you can pass in a signal source such as an\noscillator to modulate the amplitude with an audio signal.</p>\n","itemtype":"method","name":"setVolume","params":[{"name":"volume","description":"<p>Volume (amplitude) between 0.0\n                                   and 1.0 or modulating signal/oscillator</p>\n","type":"Number|Object"},{"name":"rampTime","description":"<p>Fade for t seconds</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>Schedule this event to happen at\n                               t seconds in the future</p>\n","type":"Number","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4128,"description":"<p>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).</p>\n","itemtype":"method","name":"pan","params":[{"name":"panValue","description":"<p>Set the stereo panner</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                                seconds from now</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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 </div></code>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4171,"description":"<p>Returns the current stereo pan position (-1.0 to 1.0)</p>\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":4185,"description":"<p>Set the playback rate of a sound file. Will change the speed and the pitch.\nValues less than zero will reverse the audio buffer.</p>\n","itemtype":"method","name":"rate","params":[{"name":"playbackRate","description":"<p>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.</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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 </code>\n </div>\n"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4275,"description":"<p>Returns the duration of a sound file in seconds.</p>\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":4291,"description":"<p>Return the current position of the p5.SoundFile playhead, in seconds.\nTime is relative to the normal buffer direction, so if <code>reverseBuffer</code>\nhas been called, currentTime will count backwards.</p>\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":4305,"description":"<p>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 <code>play</code> or <code>loop</code> methods.</p>\n","itemtype":"method","name":"jump","params":[{"name":"cueTime","description":"<p>cueTime of the soundFile in seconds.</p>\n","type":"Number"},{"name":"duration","description":"<p>duration in seconds.</p>\n","type":"Number"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4336,"description":"<p>Return the number of channels in a sound file.\nFor example, Mono = 1, Stereo = 2.</p>\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":4349,"description":"<p>Return the sample rate of the sound file.</p>\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":4361,"description":"<p>Return the number of samples in a sound file.\nEqual to sampleRate * duration.</p>\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":4374,"description":"<p>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.</p>\n<p>Inspired by Wavesurfer.js.</p>\n","itemtype":"method","name":"getPeaks","params":[{"name":"length","description":"<p>length is the size of the returned array.\n                         Larger length results in more precision.\n                         Defaults to 5*width of the browser window.</p>\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":4435,"description":"<p>Reverses the p5.SoundFile's buffer source.\nPlayback must be handled separately (see example).</p>\n","itemtype":"method","name":"reverseBuffer","example":["\n<div><code>\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 </code>\n </div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4488,"description":"<p>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.</p>\n","itemtype":"method","name":"onended","params":[{"name":"callback","description":"<p>function to call when the\n                            soundfile has ended.</p>\n","type":"Function"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4553,"description":"<p>Connects the output of a p5sound object to input of another\np5.sound object. For example, you may connect a p5.SoundFile to an\nFFT or an Effect. If no parameter is given, it will connect to\nthe master output. Most p5sound objects connect to the master\noutput when they are created.</p>\n","itemtype":"method","name":"connect","params":[{"name":"object","description":"<p>Audio object that accepts an input</p>\n","type":"Object","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4577,"description":"<p>Disconnects the output of this p5sound object.</p>\n","itemtype":"method","name":"disconnect","class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4590,"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4597,"description":"<p>Reset the source for this SoundFile to a\nnew path (URL).</p>\n","itemtype":"method","name":"setPath","params":[{"name":"path","description":"<p>path to audio file</p>\n","type":"String"},{"name":"callback","description":"<p>Callback</p>\n","type":"Function"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4614,"description":"<p>Replace the current Audio Buffer with a new Buffer.</p>\n","itemtype":"method","name":"setBuffer","params":[{"name":"buf","description":"<p>Array of Float32 Array(s). 2 Float32 Arrays\n                   will create a stereo source. 1 will create\n                   a mono source.</p>\n","type":"Array"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4708,"description":"<p>processPeaks returns an array of timestamps where it thinks there is a beat.</p>\n<p>This is an asynchronous function that processes the soundfile in an offline audio context,\nand sends the results to your callback function.</p>\n<p>The process involves running the soundfile through a lowpass filter, and finding all of the\npeaks above the initial threshold. If the total number of peaks are below the minimum number of peaks,\nit decreases the threshold and re-runs the analysis until either minPeaks or minThreshold are reached.</p>\n","itemtype":"method","name":"processPeaks","params":[{"name":"callback","description":"<p>a function to call once this data is returned</p>\n","type":"Function"},{"name":"initThreshold","description":"<p>initial threshold defaults to 0.9</p>\n","type":"Number","optional":true},{"name":"minThreshold","description":"<p>minimum threshold defaults to 0.22</p>\n","type":"Number","optional":true},{"name":"minPeaks","description":"<p>minimum number of peaks defaults to 200</p>\n","type":"Number","optional":true}],"return":{"description":"Array of timestamped peaks","type":"Array"},"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4929,"description":"<p>Schedule events to trigger every time a MediaElement\n(audio/video) reaches a playback cue point.</p>\n<p>Accepts a callback function, a time (in seconds) at which to trigger\nthe callback, and an optional parameter for the callback.</p>\n<p>Time will be passed as the first parameter to the callback function,\nand param will be the second parameter.</p>\n","itemtype":"method","name":"addCue","params":[{"name":"time","description":"<p>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.</p>\n","type":"Number"},{"name":"callback","description":"<p>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.</p>\n","type":"Function"},{"name":"value","description":"<p>An object to be passed as the\n                           second parameter to the\n                           callback function.</p>\n","type":"Object","optional":true}],"return":{"description":"id ID of this cue,\n                    useful for removeCue(id)","type":"Number"},"example":["\n<div><code>\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</code></div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4999,"description":"<p>Remove a callback based on its ID. The ID is returned by the\naddCue method.</p>\n","itemtype":"method","name":"removeCue","params":[{"name":"id","description":"<p>ID of the cue, as returned by addCue</p>\n","type":"Number"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5025,"description":"<p>Remove all of the callbacks that had originally been scheduled\nvia the addCue method.</p>\n","itemtype":"method","name":"clearCues","class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5054,"description":"<p>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\n<a href=\"/docs/reference/#/p5.SoundFile/getBlob\">getBlob</a></p>\n","itemtype":"method","name":"save","params":[{"name":"fileName","description":"<p>name of the resulting .wav file.</p>\n","type":"String","optional":true}],"example":["\n <div><code>\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</code></div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5085,"description":"<p>This method is useful for sending a SoundFile to a server. It returns the\n.wav-encoded audio data as a \"<a target=\"_blank\" title=\"Blob reference at\nMDN\" href=\"https://developer.mozilla.org/en-US/docs/Web/API/Blob\">Blob</a>\".\nA Blob is a file-like data object that can be uploaded to a server\nwith an <a href=\"/docs/reference/#/p5/httpDo\">http</a> request. We'll\nuse the <code>httpDo</code> options object to send a POST request with some\nspecific options: we encode the request as <code>multipart/form-data</code>,\nand attach the blob as one of the form values using <code>FormData</code>.</p>\n","itemtype":"method","name":"getBlob","return":{"description":"A file-like data object","type":"Blob"},"example":["\n <div><code>\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 `<Audio>` Element accepts Object URL's\n   createAudio(blobUrl).showControls();\n\n   createDiv();\n\n   // The ObjectURL exists as long as this tab is open\n   let input = createInput(blobUrl);\n   input.attribute('readonly', true);\n   input.mouseClicked(function() { input.elt.select() });\n }\n\n</code></div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5276,"description":"<p>Connects to the p5sound instance (master output) by default.\nOptionally, you can pass in a specific source (i.e. a soundfile).</p>\n","itemtype":"method","name":"setInput","params":[{"name":"snd","description":"<p>set the sound source\n                                     (optional, defaults to\n                                     master output)</p>\n","type":"SoundObject|undefined","optional":true},{"name":"smoothing","description":"<p>a range between 0.0 and 1.0\n                                      to smooth amplitude readings</p>\n","type":"Number|undefined","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5367,"description":"<p>Returns a single Amplitude reading at the moment it is called.\nFor continuous readings, run in the draw loop.</p>\n","itemtype":"method","name":"getLevel","params":[{"name":"channel","description":"<p>Optionally return only channel 0 (left) or 1 (right)</p>\n","type":"Number","optional":true}],"return":{"description":"Amplitude as a number between 0.0 and 1.0","type":"Number"},"example":["\n<div><code>\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</code></div>"],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5421,"description":"<p>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.</p>\n","itemtype":"method","name":"toggleNormalize","params":[{"name":"boolean","description":"<p>set normalize to true (1) or false (0)</p>\n","type":"Boolean","optional":true}],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5449,"description":"<p>Smooth Amplitude analysis by averaging with the last analysis\nframe. Off by default.</p>\n","itemtype":"method","name":"smooth","params":[{"name":"set","description":"<p>smoothing from 0.0 <= 1</p>\n","type":"Number"}],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5625,"description":"<p>Set the input source for the FFT analysis. If no source is\nprovided, FFT will analyze all sound in the sketch.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"source","description":"<p>p5.sound object (or web audio API source node)</p>\n","type":"Object","optional":true}],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5648,"description":"<p>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.</p>\n","itemtype":"method","name":"waveform","params":[{"name":"bins","description":"<p>Must be a power of two between\n                          16 and 1024. Defaults to 1024.</p>\n","type":"Number","optional":true},{"name":"precision","description":"<p>If any value is provided, will return results\n                            in a Float32 Array which is more precise\n                            than a regular array.</p>\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":5699,"description":"<p>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\n<code>getEnergy()</code>.</p>\n","itemtype":"method","name":"analyze","params":[{"name":"bins","description":"<p>Must be a power of two between\n                           16 and 1024. Defaults to 1024.</p>\n","type":"Number","optional":true},{"name":"scale","description":"<p>If \"dB,\" returns decibel\n                           float measurements between\n                           -140 and 0 (max).\n                           Otherwise returns integers from 0-255.</p>\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<div><code>\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</code></div>\n\n"],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5795,"description":"<p>Returns the amount of energy (volume) at a specific\n<a href=\"https://en.wikipedia.org/wiki/Audio_frequency\" target=\"_blank\">\nfrequency</a>, 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).\n<em>NOTE: analyze() must be called prior to getEnergy(). Analyze()\ntells the FFT to analyze frequency data, and getEnergy() uses\nthe results determine the value at a specific frequency or\nrange of frequencies.</em></p></p>\n","itemtype":"method","name":"getEnergy","params":[{"name":"frequency1","description":"<p>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.</p>\n","type":"Number|String"},{"name":"frequency2","description":"<p>If a second frequency is given,\n                              will return average amount of\n                              energy that exists between the\n                              two frequencies.</p>\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":5882,"description":"<p>Returns the\n<a href=\"http://en.wikipedia.org/wiki/Spectral_centroid\" target=\"_blank\">\nspectral centroid</a> of the input signal.\n<em>NOTE: analyze() must be called prior to getCentroid(). Analyze()\ntells the FFT to analyze frequency data, and getCentroid() uses\nthe results determine the spectral centroid.</em></p></p>\n","itemtype":"method","name":"getCentroid","return":{"description":"Spectral Centroid Frequency   Frequency of the spectral centroid in Hz.","type":"Number"},"example":["\n<div><code>\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 </code></div>"],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5968,"description":"<p>Smooth FFT analysis by averaging with the last analysis frame.</p>\n","itemtype":"method","name":"smooth","params":[{"name":"smoothing","description":"<p>0.0 < smoothing < 1.0.\n                             Defaults to 0.8.</p>\n","type":"Number"}],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5994,"description":"<p>Returns an array of average amplitude values for a given number\nof frequency bands split equally. N defaults to 16.\n<em>NOTE: 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.</em></p></p>\n","itemtype":"method","name":"linAverages","params":[{"name":"N","description":"<p>Number of returned frequency groups</p>\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":6028,"description":"<p>Returns an array of average amplitude values of the spectrum, for a given\nset of <a href=\"https://en.wikipedia.org/wiki/Octave_band\" target=\"_blank\">\nOctave Bands</a>\n<em>NOTE: 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.</em></p></p>\n","itemtype":"method","name":"logAverages","params":[{"name":"octaveBands","description":"<p>Array of Octave Bands objects for grouping</p>\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":6063,"description":"<p>Calculates and Returns the 1/N\n<a href=\"https://en.wikipedia.org/wiki/Octave_band\" target=\"_blank\">Octave Bands</a>\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.</p>\n","itemtype":"method","name":"getOctaveBands","params":[{"name":"N","description":"<p>Specifies the 1/N type of generated octave bands</p>\n","type":"Number"},{"name":"fCtr0","description":"<p>Minimum central frequency for the lowest band</p>\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":6209,"description":"<p>Fade to value, for smooth transitions</p>\n","itemtype":"method","name":"fade","params":[{"name":"value","description":"<p>Value to set this signal</p>\n","type":"Number"},{"name":"secondsFromNow","description":"<p>Length of fade, in seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6223,"description":"<p>Connect a p5.sound object or Web Audio node to this\np5.Signal so that its amplitude values can be scaled.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"input","description":"","type":"Object"}],"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6240,"description":"<p>Add a constant value to this audio signal,\nand return the resulting audio signal. Does\nnot change the value of the original signal,\ninstead it returns a new p5.SignalAdd.</p>\n","itemtype":"method","name":"add","params":[{"name":"number","description":"","type":"Number"}],"return":{"description":"object","type":"p5.Signal"},"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6262,"description":"<p>Multiply this signal by a constant value,\nand return the resulting audio signal. Does\nnot change the value of the original signal,\ninstead it returns a new p5.SignalMult.</p>\n","itemtype":"method","name":"mult","params":[{"name":"number","description":"<p>to multiply</p>\n","type":"Number"}],"return":{"description":"object","type":"p5.Signal"},"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6284,"description":"<p>Scale this signal value to a given range,\nand return the result as an audio signal. Does\nnot change the value of the original signal,\ninstead it returns a new p5.SignalScale.</p>\n","itemtype":"method","name":"scale","params":[{"name":"number","description":"<p>to multiply</p>\n","type":"Number"},{"name":"inMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"inMax","description":"<p>input range maximum</p>\n","type":"Number"},{"name":"outMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"outMax","description":"<p>input range maximum</p>\n","type":"Number"}],"return":{"description":"object","type":"p5.Signal"},"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6397,"description":"<p>Time until envelope reaches attackLevel</p>\n","itemtype":"property","name":"attackTime","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6402,"description":"<p>Level once attack is complete.</p>\n","itemtype":"property","name":"attackLevel","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6408,"description":"<p>Time until envelope reaches decayLevel.</p>\n","itemtype":"property","name":"decayTime","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6414,"description":"<p>Level after decay. The envelope will sustain here until it is released.</p>\n","itemtype":"property","name":"decayLevel","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6420,"description":"<p>Duration of the release portion of the envelope.</p>\n","itemtype":"property","name":"releaseTime","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6426,"description":"<p>Level at the end of the release.</p>\n","itemtype":"property","name":"releaseLevel","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6463,"description":"<p>Reset the envelope with a series of time/value pairs.</p>\n","itemtype":"method","name":"set","params":[{"name":"attackTime","description":"<p>Time (in seconds) before level\n                               reaches attackLevel</p>\n","type":"Number"},{"name":"attackLevel","description":"<p>Typically an amplitude between\n                               0.0 and 1.0</p>\n","type":"Number"},{"name":"decayTime","description":"<p>Time</p>\n","type":"Number"},{"name":"decayLevel","description":"<p>Amplitude (In a standard ADSR envelope,\n                               decayLevel = sustainLevel)</p>\n","type":"Number"},{"name":"releaseTime","description":"<p>Release Time (in seconds)</p>\n","type":"Number"},{"name":"releaseLevel","description":"<p>Amplitude</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>\n"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6525,"description":"<p>Set values like a traditional\n<a href=\"https://en.wikipedia.org/wiki/Synthesizer#/media/File:ADSR_parameter.svg\">\nADSR envelope\n</a>.</p>\n","itemtype":"method","name":"setADSR","params":[{"name":"attackTime","description":"<p>Time (in seconds before envelope\n                              reaches Attack Level</p>\n","type":"Number"},{"name":"decayTime","description":"<p>Time (in seconds) before envelope\n                              reaches Decay/Sustain Level</p>\n","type":"Number","optional":true},{"name":"susRatio","description":"<p>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 <code>setRange</code>),\n                              then decayLevel would increase proportionally, to become 0.5.</p>\n","type":"Number","optional":true},{"name":"releaseTime","description":"<p>Time in seconds from now (defaults to 0)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6594,"description":"<p>Set max (attackLevel) and min (releaseLevel) of envelope.</p>\n","itemtype":"method","name":"setRange","params":[{"name":"aLevel","description":"<p>attack level (defaults to 1)</p>\n","type":"Number"},{"name":"rLevel","description":"<p>release level (defaults to 0)</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6667,"description":"<p>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.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"inputs","description":"<p>A p5.sound object or\n                              Web Audio Param.</p>\n","type":"Object","optional":true,"multiple":true}],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6685,"description":"<p>Set whether the envelope ramp is linear (default) or exponential.\nExponential ramps can be useful because we perceive amplitude\nand frequency logarithmically.</p>\n","itemtype":"method","name":"setExp","params":[{"name":"isExp","description":"<p>true is exponential, false is linear</p>\n","type":"Boolean"}],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6708,"description":"<p>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 <a href=\"\nhttp://docs.webplatform.org/wiki/apis/webaudio/AudioParam\">\nWeb Audio Audio Param.</a></p>","itemtype":"method","name":"play","params":[{"name":"unit","description":"<p>A p5.sound object or\n                              Web Audio Param.</p>\n","type":"Object"},{"name":"startTime","description":"<p>time from now (in seconds) at which to play</p>\n","type":"Number","optional":true},{"name":"sustainTime","description":"<p>time to sustain before releasing the envelope</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6779,"description":"<p>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 <a href=\"\nhttp://docs.webplatform.org/wiki/apis/webaudio/AudioParam\">\nWeb Audio Param</a>.</p>\n","itemtype":"method","name":"triggerAttack","params":[{"name":"unit","description":"<p>p5.sound Object or Web Audio Param</p>\n","type":"Object"},{"name":"secondsFromNow","description":"<p>time from now (in seconds)</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6887,"description":"<p>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.</p>\n","itemtype":"method","name":"triggerRelease","params":[{"name":"unit","description":"<p>p5.sound Object or Web Audio Param</p>\n","type":"Object"},{"name":"secondsFromNow","description":"<p>time to trigger the release</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6981,"description":"<p>Exponentially ramp to a value using the first two\nvalues from <code><a href=\"#/p5.Envelope/setADSR\">setADSR(attackTime, decayTime)</a></code>\nas <a href=\"https://en.wikipedia.org/wiki/RC_time_constant\">\ntime constants</a> for simple exponential ramps.\nIf the value is higher than current value, it uses attackTime,\nwhile a decrease uses decayTime.</p>\n","itemtype":"method","name":"ramp","params":[{"name":"unit","description":"<p>p5.sound Object or Web Audio Param</p>\n","type":"Object"},{"name":"secondsFromNow","description":"<p>When to trigger the ramp</p>\n","type":"Number"},{"name":"v","description":"<p>Target value</p>\n","type":"Number"},{"name":"v2","description":"<p>Second target value (optional)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7095,"description":"<p>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.</p>\n","itemtype":"method","name":"add","params":[{"name":"number","description":"<p>Constant number to add</p>\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":7114,"description":"<p>Multiply the p5.Envelope's output amplitude\nby a fixed value. Calling this method\nagain will override the initial mult() with new values.</p>\n","itemtype":"method","name":"mult","params":[{"name":"number","description":"<p>Constant number to multiply</p>\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":7133,"description":"<p>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.</p>\n","itemtype":"method","name":"scale","params":[{"name":"inMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"inMax","description":"<p>input range maximum</p>\n","type":"Number"},{"name":"outMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"outMax","description":"<p>input range maximum</p>\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":7268,"description":"<p>Set the width of a Pulse object (an oscillator that implements\nPulse Width Modulation).</p>\n","itemtype":"method","name":"width","params":[{"name":"width","description":"<p>Width between the pulses (0 to 1.0,\n                       defaults to 0)</p>\n","type":"Number","optional":true}],"class":"p5.Pulse","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7484,"description":"<p>Set type of noise to 'white', 'pink' or 'brown'.\nWhite is the default.</p>\n","itemtype":"method","name":"setType","params":[{"name":"type","description":"<p>'white', 'pink' or 'brown'</p>\n","type":"String","optional":true}],"class":"p5.Noise","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7630,"itemtype":"property","name":"input","type":"GainNode","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7634,"itemtype":"property","name":"output","type":"GainNode","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7639,"itemtype":"property","name":"stream","type":"MediaStream|null","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7644,"itemtype":"property","name":"mediaStream","type":"MediaStreamAudioSourceNode|null","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7649,"itemtype":"property","name":"currentSource","type":"Number|null","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7654,"description":"<p>Client must allow browser to access their microphone / audioin source.\nDefault: false. Will become true when the client enables access.</p>\n","itemtype":"property","name":"enabled","type":"Boolean","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7662,"description":"<p>Input amplitude, connect to it by default but not to master out</p>\n","itemtype":"property","name":"amplitude","type":"p5.Amplitude","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7678,"description":"<p>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.<br/></p>\n<p>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.</p>\n","itemtype":"method","name":"start","params":[{"name":"successCallback","description":"<p>Name of a function to call on\n                                  success.</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>Name of a function to call if\n                                  there was an error. For example,\n                                  some browsers do not support\n                                  getUserMedia.</p>\n","type":"Function","optional":true}],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7733,"description":"<p>Turn the AudioIn off. If the AudioIn is stopped, it cannot getLevel().\nIf re-starting, the user may be prompted for permission access.</p>\n","itemtype":"method","name":"stop","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7752,"description":"<p>Connect to an audio unit. If no parameter is provided, will\nconnect to the master output (i.e. your speakers).<br/></p>\n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"<p>An object that accepts audio input,\n                        such as an FFT</p>\n","type":"Object","optional":true}],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7776,"description":"<p>Disconnect the AudioIn from all audio units. For example, if\nconnect() had been called, disconnect() will stop sending\nsignal to your speakers.<br/></p>\n","itemtype":"method","name":"disconnect","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7793,"description":"<p>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). <em>NOTE: AudioIn must\n.start() before using .getLevel().</em><br/></p>\n","itemtype":"method","name":"getLevel","params":[{"name":"smoothing","description":"<p>Smoothing is 0.0 by default.\n                             Smooths values based on previous values.</p>\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":7815,"description":"<p>Set amplitude (volume) of a mic input between 0 and 1.0. <br/></p>\n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"<p>between 0 and 1.0</p>\n","type":"Number"},{"name":"time","description":"<p>ramp time (optional)</p>\n","type":"Number","optional":true}],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7837,"description":"<p>Returns a list of available input sources. This is a wrapper\nfor <a title=\"MediaDevices.enumerateDevices() - Web APIs | MDN\" target=\"_blank\" href=\n \"<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\"\">https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\"</a></p>\n<blockquote>\n<p>and it returns a Promise.</p>\n</blockquote>\n","itemtype":"method","name":"getSources","params":[{"name":"successCallback","description":"<p>This callback function handles the sources when they\n                                     have been enumerated. The callback function\n                                     receives the deviceList array as its only argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>This optional callback receives the error\n                                   message as its argument.</p>\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 <div><code>\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 </code></div>"],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7896,"description":"<p>Set the input source. Accepts a number representing a\nposition in the array returned by getSources().\nThis is only available in browsers that support\n<a title=\"MediaDevices.enumerateDevices() - Web APIs | MDN\" target=\"_blank\" href=\n\"<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\"\">https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\"</a></p>\n<blockquote>\n<p>navigator.mediaDevices.enumerateDevices()</a>.<br/></p>\n</blockquote>\n","itemtype":"method","name":"setSource","params":[{"name":"num","description":"<p>position of input source in the array</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>"],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8107,"description":"<p>The p5.EQ is built with abstracted p5.Filter objects.\nTo modify any bands, use methods of the <a\nhref=\"/reference/#/p5.Filter\" title=\"p5.Filter reference\">\np5.Filter</a> API, especially <code>gain</code> and <code>freq</code>.\nBands are stored in an array, with indices 0 - 3, or 0 - 7</p>\n","itemtype":"property","name":"bands","type":"Array","class":"p5.EQ","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8148,"description":"<p>Process an input by connecting it to the EQ</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>Audio source</p>\n","type":"Object"}],"class":"p5.EQ","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8321,"description":"<p><a title=\"Web Audio Panner docs\"  href=\n\"https://developer.mozilla.org/en-US/docs/Web/API/PannerNode\">\nWeb Audio Spatial Panner Node</a></p>\n<p>Properties include</p>\n<ul>\n<li><a title=\"w3 spec for Panning Model\"\nhref=\"<a href=\"https://www.w3.org/TR/webaudio/#idl-def-PanningModelType\"\">https://www.w3.org/TR/webaudio/#idl-def-PanningModelType\"</a><blockquote>\n<p>panningModel</a>: \"equal power\" or \"HRTF\"</p>\n</blockquote>\n</li>\n<li><a title=\"w3 spec for Distance Model\"\nhref=\"<a href=\"https://www.w3.org/TR/webaudio/#idl-def-DistanceModelType\"\">https://www.w3.org/TR/webaudio/#idl-def-DistanceModelType\"</a><blockquote>\n<p>distanceModel</a>: \"linear\", \"inverse\", or \"exponential\"</p>\n</blockquote>\n</li>\n</ul>\n","itemtype":"property","name":"panner","type":"AudioNode","class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8346,"description":"<p>Connect an audio sorce</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>Input source</p>\n","type":"Object"}],"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8357,"description":"<p>Set the X,Y,Z position of the Panner</p>\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":8375,"description":"<p>Getter and setter methods for position coordinates</p>\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":8382,"description":"<p>Getter and setter methods for position coordinates</p>\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":8389,"description":"<p>Getter and setter methods for position coordinates</p>\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":8438,"description":"<p>Set the X,Y,Z position of the Panner</p>\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":8456,"description":"<p>Getter and setter methods for orient coordinates</p>\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":8463,"description":"<p>Getter and setter methods for orient coordinates</p>\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":8470,"description":"<p>Getter and setter methods for orient coordinates</p>\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":8519,"description":"<p>Set the rolloff factor and max distance</p>\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":8532,"description":"<p>Maxium distance between the source and the listener</p>\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":8548,"description":"<p>How quickly the volume is reduced as the source moves away from the listener</p>\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":8885,"description":"<p>The p5.Delay is built with two\n<a href=\"http://www.w3.org/TR/webaudio/#DelayNode\">\nWeb Audio Delay Nodes</a>, one for each stereo channel.</p>\n","itemtype":"property","name":"leftDelay","type":"DelayNode","class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8895,"description":"<p>The p5.Delay is built with two\n<a href=\"http://www.w3.org/TR/webaudio/#DelayNode\">\nWeb Audio Delay Nodes</a>, one for each stereo channel.</p>\n","itemtype":"property","name":"rightDelay","type":"DelayNode","class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8942,"description":"<p>Add delay to an audio signal according to a set\nof delay parameters.</p>\n","itemtype":"method","name":"process","params":[{"name":"Signal","description":"<p>An object that outputs audio</p>\n","type":"Object"},{"name":"delayTime","description":"<p>Time (in seconds) of the delay/echo.\n                             Some browsers limit delayTime to\n                             1 second.</p>\n","type":"Number","optional":true},{"name":"feedback","description":"<p>sends the delay back through itself\n                             in a loop that decreases in volume\n                             each time.</p>\n","type":"Number","optional":true},{"name":"lowPass","description":"<p>Cutoff frequency. Only frequencies\n                             below the lowPass will be part of the\n                             delay.</p>\n","type":"Number","optional":true}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8984,"description":"<p>Set the delay (echo) time, in seconds. Usually this value will be\na floating point number between 0.0 and 1.0.</p>\n","itemtype":"method","name":"delayTime","params":[{"name":"delayTime","description":"<p>Time (in seconds) of the delay</p>\n","type":"Number"}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9005,"description":"<p>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</p>\n","itemtype":"method","name":"feedback","params":[{"name":"feedback","description":"<p>0.0 to 1.0, or an object such as an\n                                Oscillator that can be used to\n                                modulate this param</p>\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":9036,"description":"<p>Set a lowpass filter frequency for the delay. A lowpass filter\nwill cut off any frequencies higher than the filter frequency.</p>\n","itemtype":"method","name":"filter","params":[{"name":"cutoffFreq","description":"<p>A lowpass filter will cut off any\n                            frequencies higher than the filter frequency.</p>\n","type":"Number|Object"},{"name":"res","description":"<p>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.</p>\n","type":"Number|Object"}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9057,"description":"<p>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.</p>\n","itemtype":"method","name":"setType","params":[{"name":"type","description":"<p>'pingPong' (1) or 'default' (0)</p>\n","type":"String|Number"}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9109,"description":"<p>Set the output level of the delay effect.</p>\n","itemtype":"method","name":"amp","params":[{"name":"volume","description":"<p>amplitude between 0 and 1.0</p>\n","type":"Number"},{"name":"rampTime","description":"<p>create a fade that lasts rampTime</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9120,"description":"<p>Send output to a p5.sound or web audio object</p>\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":9128,"description":"<p>Disconnect all output.</p>\n","itemtype":"method","name":"disconnect","class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9265,"description":"<p>Connect a source to the reverb, and assign reverb parameters.</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>p5.sound / Web Audio object with a sound\n                         output.</p>\n","type":"Object"},{"name":"seconds","description":"<p>Duration of the reverb, in seconds.\n                         Min: 0, Max: 10. Defaults to 3.</p>\n","type":"Number","optional":true},{"name":"decayRate","description":"<p>Percentage of decay with each echo.\n                          Min: 0, Max: 100. Defaults to 2.</p>\n","type":"Number","optional":true},{"name":"reverse","description":"<p>Play the reverb backwards or forwards.</p>\n","type":"Boolean","optional":true}],"class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9301,"description":"<p>Set the reverb settings. Similar to .process(), but without\nassigning a new input.</p>\n","itemtype":"method","name":"set","params":[{"name":"seconds","description":"<p>Duration of the reverb, in seconds.\n                         Min: 0, Max: 10. Defaults to 3.</p>\n","type":"Number","optional":true},{"name":"decayRate","description":"<p>Percentage of decay with each echo.\n                          Min: 0, Max: 100. Defaults to 2.</p>\n","type":"Number","optional":true},{"name":"reverse","description":"<p>Play the reverb backwards or forwards.</p>\n","type":"Boolean","optional":true}],"class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9336,"description":"<p>Set the output level of the reverb effect.</p>\n","itemtype":"method","name":"amp","params":[{"name":"volume","description":"<p>amplitude between 0 and 1.0</p>\n","type":"Number"},{"name":"rampTime","description":"<p>create a fade that lasts rampTime</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9347,"description":"<p>Send output to a p5.sound or web audio object</p>\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":9355,"description":"<p>Disconnect all output.</p>\n","itemtype":"method","name":"disconnect","class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9461,"description":"<p>Internally, the p5.Convolver uses the a\n<a href=\"http://www.w3.org/TR/webaudio/#ConvolverNode\">\nWeb Audio Convolver Node</a>.</p>\n","itemtype":"property","name":"convolverNode","type":"ConvolverNode","class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9489,"description":"<p>Create a p5.Convolver. Accepts a path to a soundfile\nthat will be used to generate an impulse response.</p>\n","itemtype":"method","name":"createConvolver","params":[{"name":"path","description":"<p>path to a sound file</p>\n","type":"String"},{"name":"callback","description":"<p>function to call if loading is successful.\n                              The object will be passed in as the argument\n                              to the callback function.</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to call if loading is not successful.\n                              A custom error will be passed in as the argument\n                              to the callback function.</p>\n","type":"Function","optional":true}],"return":{"description":"","type":"p5.Convolver"},"example":["\n<div><code>\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 master output...\n  sound.disconnect();\n\n  // ...and process with cVerb\n  // so that we only hear the convolution\n  cVerb.process(sound);\n}\n\nfunction playSound() {\n  sound.play();\n}\n</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9635,"description":"<p>Connect a source to the convolver.</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>p5.sound / Web Audio object with a sound\n                         output.</p>\n","type":"Object"}],"example":["\n<div><code>\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 master output...\n  sound.disconnect();\n\n  // ...and process with cVerb\n  // so that we only hear the convolution\n  cVerb.process(sound);\n}\n\nfunction playSound() {\n  sound.play();\n}\n\n</code></div>"],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9682,"description":"<p>If you load multiple impulse files using the .addImpulse method,\nthey will be stored as Objects in this Array. Toggle between them\nwith the <code>toggleImpulse(id)</code> method.</p>\n","itemtype":"property","name":"impulses","type":"Array","class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9693,"description":"<p>Load and assign a new Impulse Response to the p5.Convolver.\nThe impulse is added to the <code>.impulses</code> array. Previous\nimpulses can be accessed with the <code>.toggleImpulse(id)</code>\nmethod.</p>\n","itemtype":"method","name":"addImpulse","params":[{"name":"path","description":"<p>path to a sound file</p>\n","type":"String"},{"name":"callback","description":"<p>function (optional)</p>\n","type":"Function"},{"name":"errorCallback","description":"<p>function (optional)</p>\n","type":"Function"}],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9713,"description":"<p>Similar to .addImpulse, except that the <code>.impulses</code>\nArray is reset to save memory. A new <code>.impulses</code>\narray is created with this impulse as the only item.</p>\n","itemtype":"method","name":"resetImpulse","params":[{"name":"path","description":"<p>path to a sound file</p>\n","type":"String"},{"name":"callback","description":"<p>function (optional)</p>\n","type":"Function"},{"name":"errorCallback","description":"<p>function (optional)</p>\n","type":"Function"}],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9735,"description":"<p>If you have used <code>.addImpulse()</code> to add multiple impulses\nto a p5.Convolver, then you can use this method to toggle between\nthe items in the <code>.impulses</code> 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 <code>.impulses\n</code> Array (Number).<br/>\nYou can access the objects in the .impulses Array directly. Each\nObject has two attributes: an <code>.audioBuffer</code> (type:\nWeb Audio <a href=\"\nhttp://webaudio.github.io/web-audio-api/#the-audiobuffer-interface\">\nAudioBuffer)</a> and a <code>.name</code>, a String that corresponds\nwith the original filename.</p>\n","itemtype":"method","name":"toggleImpulse","params":[{"name":"id","description":"<p>Identify the impulse by its original filename\n                          (String), or by its position in the\n                          <code>.impulses</code> Array (Number).</p>\n","type":"String|Number"}],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9903,"description":"<p>Set the global tempo, in beats per minute, for all\np5.Parts. This method will impact all active p5.Parts.</p>\n","itemtype":"method","name":"setBPM","params":[{"name":"BPM","description":"<p>Beats Per Minute</p>\n","type":"Number"},{"name":"rampTime","description":"<p>Seconds from now</p>\n","type":"Number"}],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9990,"description":"<p>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.</p>\n","itemtype":"property","name":"sequence","type":"Array","class":"p5.Phrase","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10076,"description":"<p>Set the tempo of this part, in Beats Per Minute.</p>\n","itemtype":"method","name":"setBPM","params":[{"name":"BPM","description":"<p>Beats Per Minute</p>\n","type":"Number"},{"name":"rampTime","description":"<p>Seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10089,"description":"<p>Returns the tempo, in Beats Per Minute, of this part.</p>\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":10101,"description":"<p>Start playback of this part. It will play\nthrough all of its phrases at a speed\ndetermined by setBPM.</p>\n","itemtype":"method","name":"start","params":[{"name":"time","description":"<p>seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10120,"description":"<p>Loop playback of this part. It will begin\nlooping through all of its phrases at a speed\ndetermined by setBPM.</p>\n","itemtype":"method","name":"loop","params":[{"name":"time","description":"<p>seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10141,"description":"<p>Tell the part to stop looping.</p>\n","itemtype":"method","name":"noLoop","class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10156,"description":"<p>Stop the part and cue it to step 0. Playback will resume from the begining of the Part when it is played again.</p>\n","itemtype":"method","name":"stop","params":[{"name":"time","description":"<p>seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10169,"description":"<p>Pause the part. Playback will resume\nfrom the current step.</p>\n","itemtype":"method","name":"pause","params":[{"name":"time","description":"<p>seconds from now</p>\n","type":"Number"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10184,"description":"<p>Add a p5.Phrase to this Part.</p>\n","itemtype":"method","name":"addPhrase","params":[{"name":"phrase","description":"<p>reference to a p5.Phrase</p>\n","type":"p5.Phrase"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10210,"description":"<p>Remove a phrase from this part, based on the name it was\ngiven when it was created.</p>\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":10227,"description":"<p>Get a phrase from this part, based on the name it was\ngiven when it was created. Now you can modify its array.</p>\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":10244,"description":"<p>Find all sequences with the specified name, and replace their patterns with the specified array.</p>\n","itemtype":"method","name":"replaceSequence","params":[{"name":"phraseName","description":"","type":"String"},{"name":"sequence","description":"<p>Array of values to pass into the callback\n                          at each step of the phrase.</p>\n","type":"Array"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10273,"description":"<p>Set the function that will be called at every step. This will clear the previous function.</p>\n","itemtype":"method","name":"onStep","params":[{"name":"callback","description":"<p>The name of the callback\n                            you want to fire\n                            on every beat/tatum.</p>\n","type":"Function"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10332,"description":"<p>Start playback of the score.</p>\n","itemtype":"method","name":"start","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10344,"description":"<p>Stop playback of the score.</p>\n","itemtype":"method","name":"stop","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10357,"description":"<p>Pause playback of the score.</p>\n","itemtype":"method","name":"pause","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10368,"description":"<p>Loop playback of the score.</p>\n","itemtype":"method","name":"loop","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10380,"description":"<p>Stop looping playback of the score. If it\nis currently playing, this will go into effect\nafter the current round of playback completes.</p>\n","itemtype":"method","name":"noLoop","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10411,"description":"<p>Set the tempo for all parts in the score</p>\n","itemtype":"method","name":"setBPM","params":[{"name":"BPM","description":"<p>Beats Per Minute</p>\n","type":"Number"},{"name":"rampTime","description":"<p>Seconds from now</p>\n","type":"Number"}],"class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10508,"description":"<p>musicalTimeMode uses <a href = \"https://github.com/Tonejs/Tone.js/wiki/Time\">Tone.Time</a> convention\ntrue if string, false if number</p>\n","itemtype":"property","name":"musicalTimeMode","type":"Boolean","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10516,"description":"<p>musicalTimeMode variables\nmodify these only when the interval is specified in musicalTime format as a string</p>\n","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10524,"description":"<p>Set a limit to the number of loops to play. defaults to Infinity</p>\n","itemtype":"property","name":"maxIterations","type":"Number","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10534,"description":"<p>Do not initiate the callback if timeFromNow is < 0\nThis ususually occurs for a few milliseconds when the page\nis not fully loaded</p>\n<p>The callback should only be called until maxIterations is reached</p>\n","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10549,"description":"<p>Start the loop</p>\n","itemtype":"method","name":"start","params":[{"name":"timeFromNow","description":"<p>schedule a starting time</p>\n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10566,"description":"<p>Stop the loop</p>\n","itemtype":"method","name":"stop","params":[{"name":"timeFromNow","description":"<p>schedule a stopping time</p>\n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10583,"description":"<p>Pause the loop</p>\n","itemtype":"method","name":"pause","params":[{"name":"timeFromNow","description":"<p>schedule a pausing time</p>\n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10600,"description":"<p>Synchronize loops. Use this method to start two more more loops in synchronization\nor to start a loop in synchronization with a loop that is already playing\nThis method will schedule the implicit loop in sync with the explicit master loop\ni.e. loopToStart.syncedStart(loopToSyncWith)</p>\n","itemtype":"method","name":"syncedStart","params":[{"name":"otherLoop","description":"<p>a p5.SoundLoop to sync with</p>\n","type":"Object"},{"name":"timeFromNow","description":"<p>Start the loops in sync after timeFromNow seconds</p>\n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10705,"description":"<p>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)</p>\n","itemtype":"property","name":"bpm","type":"Number","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10728,"description":"<p>number of quarter notes in a measure (defaults to 4)</p>\n","itemtype":"property","name":"timeSignature","type":"Number","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10748,"description":"<p>length of the loops interval</p>\n","itemtype":"property","name":"interval","type":"Number|String","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10765,"description":"<p>how many times the callback has been called so far</p>\n","itemtype":"property","name":"iterations","type":"Number","readonly":"","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10817,"description":"<p>The p5.Compressor is built with a <a href=\"https://www.w3.org/TR/webaudio/#the-dynamicscompressornode-interface\"\n  target=\"_blank\" title=\"W3 spec for Dynamics Compressor Node\">Web Audio Dynamics Compressor Node\n  </a></p>\n","itemtype":"property","name":"compressor","type":"AudioNode","class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10830,"description":"<p>Performs the same function as .connect, but also accepts\noptional parameters to set compressor's audioParams</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>Sound source to be connected</p>\n","type":"Object"},{"name":"attack","description":"<p>The amount of time (in seconds) to reduce the gain by 10dB,\n                           default = .003, range 0 - 1</p>\n","type":"Number","optional":true},{"name":"knee","description":"<p>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</p>\n","type":"Number","optional":true},{"name":"ratio","description":"<p>The amount of dB change in input for a 1 dB change in output\n                           default = 12, range 1 - 20</p>\n","type":"Number","optional":true},{"name":"threshold","description":"<p>The decibel value above which the compression will start taking effect\n                           default = -24, range -100 - 0</p>\n","type":"Number","optional":true},{"name":"release","description":"<p>The amount of time (in seconds) to increase the gain by 10dB\n                           default = .25, range 0 - 1</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10855,"description":"<p>Set the paramters of a compressor.</p>\n","itemtype":"method","name":"set","params":[{"name":"attack","description":"<p>The amount of time (in seconds) to reduce the gain by 10dB,\n                           default = .003, range 0 - 1</p>\n","type":"Number"},{"name":"knee","description":"<p>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</p>\n","type":"Number"},{"name":"ratio","description":"<p>The amount of dB change in input for a 1 dB change in output\n                           default = 12, range 1 - 20</p>\n","type":"Number"},{"name":"threshold","description":"<p>The decibel value above which the compression will start taking effect\n                           default = -24, range -100 - 0</p>\n","type":"Number"},{"name":"release","description":"<p>The amount of time (in seconds) to increase the gain by 10dB\n                           default = .25, range 0 - 1</p>\n","type":"Number"}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10894,"description":"<p>Get current attack or set value w/ time ramp</p>\n","itemtype":"method","name":"attack","params":[{"name":"attack","description":"<p>Attack is the amount of time (in seconds) to reduce the gain by 10dB,\n                         default = .003, range 0 - 1</p>\n","type":"Number","optional":true},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10919,"description":"<p>Get current knee or set value w/ time ramp</p>\n","itemtype":"method","name":"knee","params":[{"name":"knee","description":"<p>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</p>\n","type":"Number","optional":true},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10944,"description":"<p>Get current ratio or set value w/ time ramp</p>\n","itemtype":"method","name":"ratio","params":[{"name":"ratio","description":"<p>The amount of dB change in input for a 1 dB change in output\n                           default = 12, range 1 - 20</p>\n","type":"Number","optional":true},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10967,"description":"<p>Get current threshold or set value w/ time ramp</p>\n","itemtype":"method","name":"threshold","params":[{"name":"threshold","description":"<p>The decibel value above which the compression will start taking effect\n                           default = -24, range -100 - 0</p>\n","type":"Number"},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10990,"description":"<p>Get current release or set value w/ time ramp</p>\n","itemtype":"method","name":"release","params":[{"name":"release","description":"<p>The amount of time (in seconds) to increase the gain by 10dB\n                           default = .25, range 0 - 1</p>\n","type":"Number"},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11014,"description":"<p>Return the current reduction value</p>\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":11169,"description":"<p>Connect a specific device to the p5.SoundRecorder.\nIf no parameter is given, p5.SoundRecorer will record\nall audible p5.sound from your sketch.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"unit","description":"<p>p5.sound object or a web audio unit\n                       that outputs sound</p>\n","type":"Object","optional":true}],"class":"p5.SoundRecorder","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11194,"description":"<p>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.</p>\n","itemtype":"method","name":"record","params":[{"name":"soundFile","description":"<p>p5.SoundFile</p>\n","type":"p5.SoundFile"},{"name":"duration","description":"<p>Time (in seconds)</p>\n","type":"Number","optional":true},{"name":"callback","description":"<p>The name of a function that will be\n                              called once the recording completes</p>\n","type":"Function","optional":true}],"class":"p5.SoundRecorder","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11229,"description":"<p>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.</p>\n","itemtype":"method","name":"stop","class":"p5.SoundRecorder","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11259,"description":"<p>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\n<a href=\"/docs/reference/#/p5.SoundFile/saveBlob\"><code>p5.SoundFile.saveBlob</code></a>.</p>\n","itemtype":"method","name":"saveSound","params":[{"name":"soundFile","description":"<p>p5.SoundFile that you wish to save</p>\n","type":"p5.SoundFile"},{"name":"fileName","description":"<p>name of the resulting .wav file.</p>\n","type":"String"}],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11389,"description":"<p>isDetected is set to true when a peak is detected.</p>\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":11402,"description":"<p>The update method is run in the draw loop.</p>\n<p>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.</p>\n","itemtype":"method","name":"update","params":[{"name":"fftObject","description":"<p>A p5.FFT object</p>\n","type":"p5.FFT"}],"class":"p5.PeakDetect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11438,"description":"<p>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.</p>\n","itemtype":"method","name":"onPeak","params":[{"name":"callback","description":"<p>Name of a function that will\n                            be called when a peak is\n                            detected.</p>\n","type":"Function"},{"name":"val","description":"<p>Optional value to pass\n                            into the function when\n                            a peak is detected.</p>\n","type":"Object","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.PeakDetect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11600,"description":"<p>Connect a source to the gain node.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"src","description":"<p>p5.sound / Web Audio object with a sound\n                         output.</p>\n","type":"Object"}],"class":"p5.Gain","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11613,"description":"<p>Send output to a p5.sound or web audio object</p>\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":11626,"description":"<p>Disconnect all output.</p>\n","itemtype":"method","name":"disconnect","class":"p5.Gain","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11639,"description":"<p>Set the output level of the gain node.</p>\n","itemtype":"method","name":"amp","params":[{"name":"volume","description":"<p>amplitude between 0 and 1.0</p>\n","type":"Number"},{"name":"rampTime","description":"<p>create a fade that lasts rampTime</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Gain","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11743,"description":"<p>The p5.Distortion is built with a\n<a href=\"http://www.w3.org/TR/webaudio/#WaveShaperNode\">\nWeb Audio WaveShaper Node</a>.</p>\n","itemtype":"property","name":"WaveShaperNode","type":"AudioNode","class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11760,"description":"<p>Process a sound source, optionally specify amount and oversample values.</p>\n","itemtype":"method","name":"process","params":[{"name":"amount","description":"<p>Unbounded distortion amount.\n                               Normal values range from 0-1.</p>\n","type":"Number","optional":true,"optdefault":"0.25"},{"name":"oversample","description":"<p>'none', '2x', or '4x'.</p>\n","type":"String","optional":true,"optdefault":"'none'"}],"class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11774,"description":"<p>Set the amount and oversample of the waveshaper distortion.</p>\n","itemtype":"method","name":"set","params":[{"name":"amount","description":"<p>Unbounded distortion amount.\n                               Normal values range from 0-1.</p>\n","type":"Number","optional":true,"optdefault":"0.25"},{"name":"oversample","description":"<p>'none', '2x', or '4x'.</p>\n","type":"String","optional":true,"optdefault":"'none'"}],"class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11796,"description":"<p>Return the distortion amount, typically between 0-1.</p>\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":11809,"description":"<p>Return the oversampling.</p>\n","itemtype":"method","name":"getOversample","return":{"description":"Oversample can either be 'none', '2x', or '4x'.","type":"String"},"class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"}],"warnings":[{"message":"unknown tag: alt","line":" src/color/creating_reading.js:16"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:45"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:72"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:116"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:297"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:326"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:361"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:452"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:482"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:522"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:51"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:256"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:285"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:309"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:333"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:758"},{"message":"unknown tag: alt","line":" src/color/setting.js:13"},{"message":"unknown tag: alt","line":" src/color/setting.js:180"},{"message":"unknown tag: alt","line":" src/color/setting.js:214"},{"message":"unknown tag: alt","line":" src/color/setting.js:333"},{"message":"unknown tag: alt","line":" src/color/setting.js:492"},{"message":"unknown tag: alt","line":" src/color/setting.js:533"},{"message":"unknown tag: alt","line":" src/color/setting.js:573"},{"message":"unknown tag: alt","line":" src/color/setting.js:745"},{"message":"unknown tag: alt","line":" src/color/setting.js:825"},{"message":"replacing incorrect tag: returns with return","line":" src/core/friendly_errors/fes_core.js:173"},{"message":"replacing incorrect tag: returns with return","line":" src/core/friendly_errors/fes_core.js:267"},{"message":"replacing incorrect tag: returns with return","line":" src/core/friendly_errors/fes_core.js:362"},{"message":"replacing incorrect tag: returns with return","line":" src/core/friendly_errors/fes_core.js:502"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:102"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:232"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:275"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:339"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:400"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:478"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:552"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:618"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:707"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:12"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:81"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:115"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:184"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:219"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:259"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:331"},{"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:130"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:185"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:264"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:358"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:398"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:493"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:20"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:67"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:267"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:389"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:434"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:498"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:557"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:642"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:707"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:800"},{"message":"unknown tag: alt","line":" src/core/constants.js:66"},{"message":"unknown tag: alt","line":" src/core/constants.js:84"},{"message":"unknown tag: alt","line":" src/core/constants.js:102"},{"message":"unknown tag: alt","line":" src/core/constants.js:120"},{"message":"unknown tag: alt","line":" src/core/constants.js:138"},{"message":"unknown tag: alt","line":" src/core/environment.js:20"},{"message":"unknown tag: alt","line":" src/core/environment.js:52"},{"message":"unknown tag: alt","line":" src/core/environment.js:79"},{"message":"unknown tag: alt","line":" src/core/environment.js:129"},{"message":"unknown tag: alt","line":" src/core/environment.js:160"},{"message":"unknown tag: alt","line":" src/core/environment.js:228"},{"message":"unknown tag: alt","line":" src/core/environment.js:331"},{"message":"unknown tag: alt","line":" src/core/environment.js:354"},{"message":"unknown tag: alt","line":" src/core/environment.js:372"},{"message":"unknown tag: alt","line":" src/core/environment.js:390"},{"message":"unknown tag: alt","line":" src/core/environment.js:405"},{"message":"unknown tag: alt","line":" src/core/environment.js:421"},{"message":"unknown tag: alt","line":" src/core/environment.js:500"},{"message":"unknown tag: alt","line":" src/core/environment.js:550"},{"message":"replacing incorrect tag: returns with return","line":" src/core/environment.js:586"},{"message":"replacing incorrect tag: returns with return","line":" src/core/environment.js:605"},{"message":"unknown tag: alt","line":" src/core/environment.js:605"},{"message":"unknown tag: alt","line":" src/core/environment.js:660"},{"message":"unknown tag: alt","line":" src/core/environment.js:691"},{"message":"unknown tag: alt","line":" src/core/environment.js:713"},{"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:42"},{"message":"unknown tag: alt","line":" src/core/main.js:83"},{"message":"unknown tag: alt","line":" src/core/main.js:114"},{"message":"unknown tag: alt","line":" src/core/main.js:415"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:47"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:114"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:154"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:189"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:246"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:292"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:354"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:403"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:454"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:510"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:551"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:592"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:639"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:678"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:725"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:763"},{"message":"unknown tag: alt","line":" src/core/p5.Graphics.js:70"},{"message":"unknown tag: alt","line":" src/core/p5.Graphics.js:122"},{"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:125"},{"message":"unknown tag: alt","line":" src/core/rendering.js:183"},{"message":"unknown tag: alt","line":" src/core/rendering.js:204"},{"message":"unknown tag: alt","line":" src/core/rendering.js:243"},{"message":"unknown tag: alt","line":" src/core/rendering.js:326"},{"message":"unknown tag: alt","line":" src/core/structure.js:10"},{"message":"unknown tag: alt","line":" src/core/structure.js:83"},{"message":"unknown tag: alt","line":" src/core/structure.js:134"},{"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:497"},{"message":"unknown tag: alt","line":" src/core/transform.js:11"},{"message":"unknown tag: alt","line":" src/core/transform.js:168"},{"message":"unknown tag: alt","line":" src/core/transform.js:193"},{"message":"unknown tag: alt","line":" src/core/transform.js:232"},{"message":"unknown tag: alt","line":" src/core/transform.js:268"},{"message":"unknown tag: alt","line":" src/core/transform.js:304"},{"message":"unknown tag: alt","line":" src/core/transform.js:342"},{"message":"unknown tag: alt","line":" src/core/transform.js:416"},{"message":"unknown tag: alt","line":" src/core/transform.js:455"},{"message":"unknown tag: alt","line":" src/core/transform.js:494"},{"message":"unknown tag: alt","line":" src/data/local_storage.js:10"},{"message":"unknown tag: alt","line":" src/data/local_storage.js:101"},{"message":"unknown tag: alt","line":" src/dom/dom.js:204"},{"message":"unknown tag: alt","line":" src/dom/dom.js:271"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1517"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1579"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1683"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1722"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1842"},{"message":"unknown tag: alt","line":" src/dom/dom.js:2225"},{"message":"unknown tag: alt","line":" src/dom/dom.js:2735"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:23"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:46"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:69"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:135"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:168"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:201"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:239"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:285"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:330"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:389"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:428"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:471"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:515"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:546"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:604"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:10"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:36"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:64"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:103"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:190"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:243"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:308"},{"message":"unknown tag: alt","line":" src/events/mouse.js:12"},{"message":"unknown tag: alt","line":" src/events/mouse.js:43"},{"message":"unknown tag: alt","line":" src/events/mouse.js:80"},{"message":"unknown tag: alt","line":" src/events/mouse.js:106"},{"message":"unknown tag: alt","line":" src/events/mouse.js:132"},{"message":"unknown tag: alt","line":" src/events/mouse.js:164"},{"message":"unknown tag: alt","line":" src/events/mouse.js:195"},{"message":"unknown tag: alt","line":" src/events/mouse.js:233"},{"message":"unknown tag: alt","line":" src/events/mouse.js:271"},{"message":"unknown tag: alt","line":" src/events/mouse.js:311"},{"message":"unknown tag: alt","line":" src/events/mouse.js:351"},{"message":"unknown tag: alt","line":" src/events/mouse.js:389"},{"message":"unknown tag: alt","line":" src/events/mouse.js:481"},{"message":"unknown tag: alt","line":" src/events/mouse.js:535"},{"message":"unknown tag: alt","line":" src/events/mouse.js:615"},{"message":"unknown tag: alt","line":" src/events/mouse.js:696"},{"message":"unknown tag: alt","line":" src/events/mouse.js:772"},{"message":"unknown tag: alt","line":" src/events/mouse.js:841"},{"message":"unknown tag: alt","line":" src/events/mouse.js:926"},{"message":"unknown tag: alt","line":" src/events/mouse.js:979"},{"message":"unknown tag: alt","line":" src/events/mouse.js:1025"},{"message":"unknown tag: alt","line":" src/events/touch.js:10"},{"message":"unknown tag: alt","line":" src/events/touch.js:71"},{"message":"unknown tag: alt","line":" src/events/touch.js:151"},{"message":"unknown tag: alt","line":" src/events/touch.js:223"},{"message":"unknown tag: alt","line":" src/image/image.js:15"},{"message":"unknown tag: alt","line":" src/image/image.js:94"},{"message":"unknown tag: alt","line":" src/image/image.js:413"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:18"},{"message":"replacing incorrect tag: returns with return","line":" src/image/loading_displaying.js:252"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:269"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:439"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:537"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:601"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:88"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:115"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:152"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:261"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:296"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:346"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:400"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:437"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:548"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:603"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:665"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:738"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:859"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:900"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:941"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:972"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:1017"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:1052"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:1089"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:1125"},{"message":"unknown tag: alt","line":" src/image/pixels.js:12"},{"message":"unknown tag: alt","line":" src/image/pixels.js:80"},{"message":"unknown tag: alt","line":" src/image/pixels.js:173"},{"message":"unknown tag: alt","line":" src/image/pixels.js:307"},{"message":"unknown tag: alt","line":" src/image/pixels.js:481"},{"message":"unknown tag: alt","line":" src/image/pixels.js:566"},{"message":"unknown tag: alt","line":" src/image/pixels.js:602"},{"message":"unknown tag: alt","line":" src/image/pixels.js:674"},{"message":"unknown tag: alt","line":" src/io/files.js:20"},{"message":"unknown tag: alt","line":" src/io/files.js:183"},{"message":"unknown tag: alt","line":" src/io/files.js:303"},{"message":"unknown tag: alt","line":" src/io/files.js:583"},{"message":"replacing incorrect tag: returns with return","line":" src/io/files.js:693"},{"message":"unknown tag: alt","line":" src/io/files.js:693"},{"message":"unknown tag: alt","line":" src/io/files.js:1393"},{"message":"unknown tag: alt","line":" src/io/files.js:1535"},{"message":"unknown tag: alt","line":" src/io/files.js:1592"},{"message":"unknown tag: alt","line":" src/io/files.js:1656"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:85"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:148"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:195"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:240"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:288"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:352"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:545"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:597"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:638"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:896"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:960"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1009"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1055"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1100"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1146"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1190"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1242"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1305"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:40"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:102"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:146"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:191"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:239"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:295"},{"message":"unknown tag: alt","line":" src/io/p5.XML.js:9"},{"message":"unknown tag: alt","line":" src/math/calculation.js:10"},{"message":"unknown tag: alt","line":" src/math/calculation.js:33"},{"message":"unknown tag: alt","line":" src/math/calculation.js:72"},{"message":"unknown tag: alt","line":" src/math/calculation.js:116"},{"message":"unknown tag: alt","line":" src/math/calculation.js:181"},{"message":"unknown tag: alt","line":" src/math/calculation.js:230"},{"message":"unknown tag: alt","line":" src/math/calculation.js:268"},{"message":"unknown tag: alt","line":" src/math/calculation.js:315"},{"message":"unknown tag: alt","line":" src/math/calculation.js:370"},{"message":"unknown tag: alt","line":" src/math/calculation.js:408"},{"message":"unknown tag: alt","line":" src/math/calculation.js:463"},{"message":"unknown tag: alt","line":" src/math/calculation.js:511"},{"message":"unknown tag: alt","line":" src/math/calculation.js:559"},{"message":"unknown tag: alt","line":" src/math/calculation.js:611"},{"message":"unknown tag: alt","line":" src/math/calculation.js:645"},{"message":"unknown tag: alt","line":" src/math/calculation.js:699"},{"message":"unknown tag: alt","line":" src/math/calculation.js:743"},{"message":"replacing incorrect tag: returns with return","line":" src/math/calculation.js:830"},{"message":"unknown tag: alt","line":" src/math/calculation.js:830"},{"message":"unknown tag: alt","line":" src/math/math.js:10"},{"message":"unknown tag: alt","line":" src/math/noise.js:36"},{"message":"unknown tag: alt","line":" src/math/noise.js:178"},{"message":"unknown tag: alt","line":" src/math/noise.js:243"},{"message":"unknown tag: alt","line":" src/math/p5.Vector.js:10"},{"message":"unknown tag: alt","line":" src/math/random.js:37"},{"message":"unknown tag: alt","line":" src/math/random.js:66"},{"message":"unknown tag: alt","line":" src/math/random.js:153"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:123"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:159"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:186"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:213"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:285"},{"message":"replacing incorrect tag: returns with return","line":" src/math/trigonometry.js:320"},{"message":"replacing incorrect tag: returns with return","line":" src/math/trigonometry.js:335"},{"message":"replacing incorrect tag: returns with return","line":" src/math/trigonometry.js:350"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:11"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:81"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:118"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:150"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:187"},{"message":"unknown tag: alt","line":" src/typography/loading_displaying.js:16"},{"message":"unknown tag: alt","line":" src/typography/loading_displaying.js:140"},{"message":"unknown tag: alt","line":" src/typography/loading_displaying.js:229"},{"message":"unknown tag: alt","line":" src/typography/p5.Font.js:31"},{"message":"unknown tag: alt","line":" src/utilities/conversion.js:10"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:15"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:43"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:130"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:239"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:313"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:375"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:453"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:539"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:10"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:31"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:52"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:73"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:100"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:122"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:143"},{"message":"unknown tag: alt","line":" src/webgl/3d_primitives.js:13"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:11"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:353"},{"message":"unknown tag: alt","line":" src/webgl/light.js:11"},{"message":"unknown tag: alt","line":" src/webgl/light.js:92"},{"message":"unknown tag: alt","line":" src/webgl/light.js:177"},{"message":"unknown tag: alt","line":" src/webgl/light.js:280"},{"message":"unknown tag: alt","line":" src/webgl/light.js:387"},{"message":"unknown tag: alt","line":" src/webgl/light.js:425"},{"message":"unknown tag: alt","line":" src/webgl/light.js:510"},{"message":"unknown tag: alt","line":" src/webgl/light.js:850"},{"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:588"},{"message":"unknown tag: alt","line":" src/webgl/material.js:12"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/material.js:111"},{"message":"unknown tag: alt","line":" src/webgl/material.js:111"},{"message":"unknown tag: alt","line":" src/webgl/material.js:179"},{"message":"unknown tag: alt","line":" src/webgl/material.js:283"},{"message":"unknown tag: alt","line":" src/webgl/material.js:321"},{"message":"unknown tag: alt","line":" src/webgl/material.js:421"},{"message":"unknown tag: alt","line":" src/webgl/material.js:421"},{"message":"unknown tag: alt","line":" src/webgl/material.js:499"},{"message":"unknown tag: alt","line":" src/webgl/material.js:571"},{"message":"unknown tag: alt","line":" src/webgl/material.js:651"},{"message":"unknown tag: alt","line":" src/webgl/material.js:717"},{"message":"unknown tag: alt","line":" src/webgl/material.js:767"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:13"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:115"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:175"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:231"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:297"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:339"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:426"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:454"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:481"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:508"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:536"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:563"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:590"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:613"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:636"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:907"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:965"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:1023"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:1175"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:1247"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:1512"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.RendererGL.Immediate.js:180"},{"message":"unknown tag: parem","line":" src/webgl/p5.RendererGL.Immediate.js:301"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.RendererGL.Retained.js:8"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:331"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:600"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:641"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:746"},{"message":"unknown tag: alt","line":" src/webgl/p5.Shader.js:296"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:115"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/text.js:158"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:191"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:203"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:236"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:250"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:388"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/text.js:388"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:456"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:471"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:556"},{"message":"replacing incorrect tag: params with param","line":" lib/addons/p5.sound.js:4374"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:4374"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:5085"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:7837"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:9005"},{"message":"Missing item type\nConversions adapted from <http://www.easyrgb.com/en/math.php>.\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:19"},{"message":"Missing item type\nConvert an HSBA array to RGBA.","line":" src/color/color_conversion.js:45"},{"message":"Missing item type\nConvert an HSLA array to HSBA.","line":" src/color/color_conversion.js:100"},{"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:123"},{"message":"Missing item type\nConvert an RGBA array to HSBA.","line":" src/color/color_conversion.js:187"},{"message":"Missing item type\nConvert an RGBA array to HSLA.","line":" src/color/color_conversion.js:226"},{"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:404"},{"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:435"},{"message":"Missing item type\nCSS named colors.","line":" src/color/p5.Color.js:454"},{"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:608"},{"message":"Missing item type\nFull color string patterns. The capture groups are necessary.","line":" src/color/p5.Color.js:621"},{"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:758"},{"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:969"},{"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:819"},{"message":"Missing item type","line":" src/core/friendly_errors/file_errors.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:34"},{"message":"Missing item type","line":" src/core/friendly_errors/validate_params.js:1"},{"message":"Missing item type\nValidates parameters\nparam  {String}               func    the name of the function\nparam  {Array}                args    user input arguments\n\nexample:\n const a;\n ellipse(10,10,a,5);\nconsole ouput:\n \"It looks like ellipse received an empty variable in spot #2.\"\n\nexample:\n ellipse(10,\"foo\",5,5);\nconsole output:\n \"ellipse was expecting a number for parameter #1,\n          received \"foo\" instead.\"","line":" src/core/friendly_errors/validate_params.js:626"},{"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:305"},{"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 <a href=\"#/p5/setup\">setup()</a> is\nrecommended. The default rate is 60 frames per second.\n\nCalling <a href=\"#/p5/frameRate\">frameRate()</a> with no arguments returns the current framerate.","line":" src/core/environment.js:315"},{"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","line":" src/core/legacy.js:1"},{"message":"Missing item type\nHelper fxn for sharing pixel methods","line":" src/core/p5.Element.js:827"},{"message":"Missing item type\nResize our canvas element.","line":" src/core/p5.Renderer.js:95"},{"message":"Missing item type\nHelper fxn to check font type (system or otf)","line":" src/core/p5.Renderer.js:344"},{"message":"Missing item type\nHelper fxn to measure ascent and descent.\nAdapted from http://stackoverflow.com/a/25355178","line":" src/core/p5.Renderer.js:396"},{"message":"Missing item type\np5.Renderer2D\nThe 2D graphics canvas renderer class.\nextends p5.Renderer","line":" src/core/p5.Renderer2D.js:7"},{"message":"Missing item type\nGenerate a cubic Bezier representing an arc on the unit circle of total\nangle `size` radians, beginning `start` radians above the x-axis. Up to\nfour of these curves are combined to make a full arc.\n\nSee www.joecridge.me/bezier.pdf for an explanation of the method.","line":" src/core/p5.Renderer2D.js:402"},{"message":"Missing item type\nshim for Uint8ClampedArray.slice\n(allows arrayCopy to work with pixels[])\nwith thanks to http://halfpapstudios.com/blog/tag/html5-canvas/\nEnumerable set to false to protect for...in from\nUint8ClampedArray.prototype pollution.","line":" src/core/shim.js:18"},{"message":"Missing item type\nthis is implementation of Object.assign() which is unavailable in\nIE11 and (non-Chrome) Android browsers.\nThe assign() method is used to copy the values of all enumerable\nown properties from one or more source objects to a target object.\nIt will return the target object.\nModified from https://github.com/ljharb/object.assign","line":" src/core/shim.js:39"},{"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:197"},{"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:387"},{"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:425"},{"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:536"},{"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:600"},{"message":"Missing item type\nHelper function for select and selectAll","line":" src/dom/dom.js:127"},{"message":"Missing item type\nHelper function for getElement and getElements.","line":" src/dom/dom.js:142"},{"message":"Missing item type\nHelpers for create methods.","line":" src/dom/dom.js:309"},{"message":"Missing item type","line":" src/dom/dom.js:450"},{"message":"Missing item type","line":" src/dom/dom.js:1121"},{"message":"Missing item type","line":" src/dom/dom.js:1214"},{"message":"Missing item type","line":" src/dom/dom.js:1253"},{"message":"Missing item type","line":" src/dom/dom.js:3189"},{"message":"Missing item type","line":" src/dom/dom.js:3255"},{"message":"Missing item type","line":" src/dom/dom.js:3317"},{"message":"Missing item type\n_updatePAccelerations updates the pAcceleration values","line":" src/events/acceleration.js:124"},{"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:298"},{"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:384"},{"message":"Missing item type\nThis module defines the filters for use with image buffers.\n\nThis module is basically a collection of functions stored in an object\nas opposed to modules. The functions are destructive, modifying\nthe passed in canvas rather than creating a copy.\n\nGenerally speaking users of this module will use the Filters.apply method\non a canvas to create an effect.\n\nA number of functions are borrowed/adapted from\nhttp://www.html5rocks.com/en/tutorials/canvas/imagefilters/\nor the java processing implementation.","line":" src/image/filters.js:3"},{"message":"Missing item type\nReturns the pixel buffer for a canvas","line":" src/image/filters.js:24"},{"message":"Missing item type\nReturns a 32 bit number containing ARGB data at ith pixel in the\n1D array containing pixels data.","line":" src/image/filters.js:60"},{"message":"Missing item type\nModifies pixels RGBA values to values contained in the data object.","line":" src/image/filters.js:81"},{"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:101"},{"message":"Missing item type\nReturns a blank ImageData object.","line":" src/image/filters.js:121"},{"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:136"},{"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:189"},{"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:223"},{"message":"Missing item type\nSets the alpha channel to entirely opaque. No parameter is used.","line":" src/image/filters.js:246"},{"message":"Missing item type\nSets each pixel to its inverse value. No parameter is used.","line":" src/image/filters.js:262"},{"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:277"},{"message":"Missing item type\nreduces the bright areas in an image","line":" src/image/filters.js:309"},{"message":"Missing item type\nincreases the bright areas in an image","line":" src/image/filters.js:396"},{"message":"Missing item type\nThis module defines the p5 methods for the <a href=\"#/p5.Image\">p5.Image</a> 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:162"},{"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:252"},{"message":"Missing item type\nApply the current tint color to the input image, return the resulting\ncanvas.","line":" src/image/loading_displaying.js:565"},{"message":"Missing item type\nThis module defines the <a href=\"#/p5.Image\">p5.Image</a> 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:222"},{"message":"Missing item type\nHelper fxn for sharing pixel methods","line":" src/image/p5.Image.js:253"},{"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 <a href=\"#/p5/saveStrings\">saveStrings</a>, <a href=\"#/p5/saveJSON\">saveJSON</a>, <a href=\"#/p5/saveTable\">saveTable</a> etc.","line":" src/io/files.js:1789"},{"message":"Missing item type\nReturns a file extension, or another string\nif the provided parameter has no extension.","line":" src/io/files.js:1857"},{"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:1890"},{"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:1902"},{"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<a href=\"http://en.wikipedia.org/wiki/Comma-separated_values\">\ncomma separated values</a>, 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\n<a href=\"http://tools.ietf.org/html/rfc4180\">here</a>.\nTo load files, use the <a href=\"#/p5/loadTable\">loadTable</a> method.\nTo save tables to your computer, use the <a href=\"#/p5/save\">save</a> method\n or the <a href=\"#/p5/saveTable\">saveTable</a> method.\n\nPossible options include:\n<ul>\n<li>csv - parse the table as comma-separated values\n<li>tsv - parse the table as tab-separated values\n<li>header - this table has a header (title) row\n</ul>","line":" src/io/p5.Table.js:9"},{"message":"Missing item type\nMultiplies a vector by a scalar and returns a new vector.","line":" src/math/p5.Vector.js:2116"},{"message":"Missing item type\nRotates the vector (only 2D vectors) by the given angle, magnitude remains the same and returns a new vector.","line":" src/math/p5.Vector.js:2168"},{"message":"Missing item type\nDivides a vector by a scalar and returns a new vector.","line":" src/math/p5.Vector.js:2195"},{"message":"Missing item type\nCalculates the dot product of two vectors.","line":" src/math/p5.Vector.js:2248"},{"message":"Missing item type\nCalculates the cross product of two vectors.","line":" src/math/p5.Vector.js:2262"},{"message":"Missing item type\nCalculates the Euclidean distance between two points (considering a\npoint as a vector object).","line":" src/math/p5.Vector.js:2276"},{"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:2291"},{"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:2320"},{"message":"Missing item type\nNormalize the vector to length 1 (make it a unit vector).","line":" src/math/p5.Vector.js:2338"},{"message":"Missing item type\nHelper function to measure ascent and descent.","line":" src/typography/attributes.js:280"},{"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:273"},{"message":"Missing item type\nReturns an opentype path for the supplied string and position.","line":" src/typography/p5.Font.js:288"},{"message":"Missing item type","line":" src/webgl/3d_primitives.js:301"},{"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:955"},{"message":"Missing item type\nDraw a line given two points","line":" src/webgl/3d_primitives.js:1393"},{"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:179"},{"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:290"},{"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:317"},{"message":"Missing item type\nThis function matches the `query` at the provided `offset`","line":" src/webgl/loading.js:344"},{"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:356"},{"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:444"},{"message":"Missing item type","line":" src/webgl/material.js:812"},{"message":"Missing item type","line":" src/webgl/material.js:843"},{"message":"Missing item type\nCreate a 2D array for establishing stroke connections","line":" src/webgl/p5.Geometry.js:212"},{"message":"Missing item type\nCreate 4 vertices for each stroke line, two at the beginning position\nand two at the end position. These vertices are displaced relative to\nthat line's normal on the GPU","line":" src/webgl/p5.Geometry.js:233"},{"message":"Missing item type","line":" src/webgl/p5.Matrix.js:1"},{"message":"Missing item type\nPRIVATE","line":" src/webgl/p5.Matrix.js:722"},{"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:12"},{"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 <a href=\"#/p5/beginShape\">beginShape()</a> & de-activated when you call <a href=\"#/p5/endShape\">endShape()</a>.\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:106"},{"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:146"},{"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:180"},{"message":"Missing item type\nCalled from _processVertices() when applicable. This function tesselates immediateMode.geometry.","line":" src/webgl/p5.RendererGL.Immediate.js:225"},{"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:245"},{"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:280"},{"message":"Missing item type\nCalled from _drawImmediateFill(). Currently adds default normals which\nonly work for flat shapes.","line":" src/webgl/p5.RendererGL.Immediate.js:301"},{"message":"Missing item type\ninitializes buffer defaults. runs each time a new geometry is\nregistered","line":" src/webgl/p5.RendererGL.Retained.js:8"},{"message":"Missing item type\ncreates a buffers object that holds the WebGL render buffers\nfor a geometry.","line":" src/webgl/p5.RendererGL.Retained.js:59"},{"message":"Missing item type\nDraws buffers given a geometry key ID","line":" src/webgl/p5.RendererGL.Retained.js:97"},{"message":"Missing item type\nmodel view, projection, & normal\nmatrices","line":" src/webgl/p5.RendererGL.js:117"},{"message":"Missing item type\n[background description]","line":" src/webgl/p5.RendererGL.js:583"},{"message":"Missing item type\n[resize description]","line":" src/webgl/p5.RendererGL.js:857"},{"message":"Missing item type\nclears color and depth buffers\nwith r,g,b,a","line":" src/webgl/p5.RendererGL.js:887"},{"message":"Missing item type\n[translate description]","line":" src/webgl/p5.RendererGL.js:919"},{"message":"Missing item type\nScales the Model View Matrix by a vector","line":" src/webgl/p5.RendererGL.js:938"},{"message":"Missing item type\nturn a two dimensional array into one dimensional array","line":" src/webgl/p5.RendererGL.js:1359"},{"message":"Missing item type\nturn a p5.Vector Array into a one dimensional number array","line":" src/webgl/p5.RendererGL.js:1396"},{"message":"Missing item type\nensures that p5 is using a 3d renderer. throws an error if not.","line":" src/webgl/p5.RendererGL.js:1414"},{"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\nThe p5.Effect class is built\n \tusing Tone.js CrossFade","line":" lib/addons/p5.sound.js:293"},{"message":"Missing item type\nIn classes that extend\np5.Effect, connect effect nodes\nto the wet parameter","line":" lib/addons/p5.sound.js:300"},{"message":"Missing item type","line":" lib/addons/p5.sound.js:451"},{"message":"Missing item type\nUsed by Osc and Envelope to chain signal math","line":" lib/addons/p5.sound.js:688"},{"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:2721"},{"message":"Missing item type\nThis module has shims","line":" lib/addons/p5.sound.js:2969"},{"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:3105"},{"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:3555"},{"message":"Missing item type\nStop playback on all of this soundfile's sources.","line":" lib/addons/p5.sound.js:4056"},{"message":"Missing item type","line":" lib/addons/p5.sound.js:4590"},{"message":"Missing item type\nEQFilter extends p5.Filter with constraints\nnecessary for the p5.EQ","line":" lib/addons/p5.sound.js:8235"},{"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:9362"},{"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:9557"},{"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:10516"},{"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:10534"},{"message":"Missing item type\ncallback invoked when the recording is over","line":" lib/addons/p5.sound.js:11153"},{"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"],"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"],"VIDEO":["p5.createCapture"],"AUDIO":["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"],"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.1.9","url":"https://github.com/processing/p5.js#readme"},"files":{"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/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":{"Environment":1},"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":{"Rendering":1},"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/shim.js":{"name":"src/core/shim.js","modules":{},"classes":{},"fors":{},"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":{"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/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.Geometry.js":{"name":"src/webgl/p5.Geometry.js","modules":{},"classes":{"p5.Geometry":1},"fors":{"p5":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.Effect":1,"p5.Filter":1,"p5.LowPass":1,"p5.HighPass":1,"p5.BandPass":1,"p5.Oscillator":1,"p5.SinOsc":1,"p5.TriOsc":1,"p5.SawOsc":1,"p5.SqrOsc":1,"p5.MonoSynth":1,"p5.AudioVoice":1,"p5.PolySynth":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Signal":1,"p5.Envelope":1,"p5.Pulse":1,"p5.Noise":1,"p5.AudioIn":1,"p5.EQ":1,"p5.Panner3D":1,"p5.Delay":1,"p5.Reverb":1,"p5.Convolver":1,"p5.Phrase":1,"p5.Part":1,"p5.Score":1,"p5.SoundLoop":1,"p5.Compressor":1,"p5.SoundRecorder":1,"p5.PeakDetect":1,"p5.Gain":1,"p5.Distortion":1},"fors":{"p5.sound":1,"p5.Effect":1,"p5":1,"p5.Oscillator":1,"p5.MonoSynth":1,"p5.AudioVoice":1,"p5.PolySynth":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Signal":1,"p5.Envelope":1,"p5.AudioIn":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.Gain":1,"p5.Distortion":1},"namespaces":{}},"lib/addons/p5.sound.min.js":{"name":"lib/addons/p5.sound.min.js","modules":{},"classes":{},"fors":{},"namespaces":{}}},"modules":{"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":14},"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":14,"requires":["core","constants"],"description":"<p>Each color stores the color mode and level maxes that was applied at the\ntime of its construction. These are used to interpret the input arguments\n(at construction and later for that instance of color) and to format the\noutput e.g. when <a href=\"#/p5/saturation\">saturation()</a> is requested.</p>\n<p>Internally, we store an array representing the ideal RGBA values in floating\npoint form, normalized from 0 to 1. From this we calculate the closest\nscreen color (RGBA levels from 0 to 255) and expose this to the renderer.</p>\n<p>We also cache normalized, floating point components of the color in various\nrepresentations as they are calculated. This is done to prevent repeating a\nconversion that has already been performed.</p>\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":{},"fors":{"p5":1},"namespaces":{}},"2D Primitives":{"name":"2D Primitives","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src/core/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},"Environment":{"name":"Environment","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"namespaces":{},"module":"Environment","file":"src/core/environment.js","line":1,"requires":["core","constants"]},"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":3459,"description":"<p>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 <a href=\"#/p5.Element\">p5.Element</a> that supports a range of HTML elements. See the\n<a href='https://github.com/processing/p5.js/wiki/Beyond-the-canvas'>\nbeyond the canvas tutorial</a> for a full overview of how this addon works.</p>\n<p>See <a href='https://github.com/processing/p5.js/wiki/Beyond-the-canvas'>tutorial: beyond the canvas</a>\nfor more info on how to use this library.</a></p>\n","requires":["p5"]},"Rendering":{"name":"Rendering","submodules":{"undefined":1},"elements":{},"classes":{"p5.RendererGL":1,"p5.Graphics":1,"p5.Renderer":1},"fors":{"p5":1},"namespaces":{},"module":"Rendering","file":"src/webgl/p5.RendererGL.js","line":600,"description":"<p>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.</p>\n"},"Foundation":{"name":"Foundation","submodules":{},"elements":{},"classes":{"JSON":1,"console":1},"fors":{"p5":1,"JSON":1,"console":1},"namespaces":{},"tag":"module","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":410},"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":410,"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":"<p>Base class for all p5.Dictionary types. Specifically\n typed Dictionary classes inherit from this class.</p>\n"},"Events":{"name":"Events","submodules":{"Acceleration":1,"Keyboard":1,"Mouse":1,"Touch":1},"elements":{},"classes":{},"fors":{"p5":1},"namespaces":{}},"Acceleration":{"name":"Acceleration","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/acceleration.js","line":1,"requires":["core"]},"Keyboard":{"name":"Keyboard","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/keyboard.js","line":1,"requires":["core"]},"Mouse":{"name":"Mouse","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/mouse.js","line":1,"requires":["core","constants"]},"Touch":{"name":"Touch","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Events","namespace":"","file":"src/events/touch.js","line":1,"requires":["core"]},"Image":{"name":"Image","submodules":{"Pixels":1},"elements":{},"classes":{"p5.Image":1},"fors":{"p5":1},"namespaces":{},"module":"Image","file":"src/image/p5.Image.js","line":21,"requires":["core"],"description":"<p>Creates a new <a href=\"#/p5.Image\">p5.Image</a>. A <a href=\"#/p5.Image\">p5.Image</a> is a canvas backed representation of an\nimage.</p>\n<p>p5 can display .gif, .jpg and .png images. Images may be displayed\nin 2D and 3D space. Before an image is used, it must be loaded with the\n<a href=\"#/p5/loadImage\">loadImage()</a> function. The <a href=\"#/p5.Image\">p5.Image</a> class contains fields for the width and\nheight of the image, as well as an array called <a href=\"#/p5.Image/pixels\">pixels[]</a> that contains the\nvalues for every pixel in the image.</p>\n<p>The methods described below allow easy access to the image's pixels and\nalpha channel and simplify the process of compositing.</p>\n<p>Before using the <a href=\"#/p5.Image/pixels\">pixels[]</a> array, be sure to use the <a href=\"#/p5.Image/loadPixels\">loadPixels()</a> method on\nthe image to make sure that the pixel data is properly loaded.</p>\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":"<p>This module defines the <a href=\"#/p5.Font\">p5.Font</a> class and functions for\ndrawing text to the display canvas.</p>\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":"<p>XML is a representation of an XML object, able to parse XML code. Use\n<a href=\"#/p5/loadXML\">loadXML()</a> to load external XML files and create XML objects.</p>\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":1205,"description":"<p>This is the p5 instance constructor.</p>\n<p>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 <a href=\"#/p5/preload\">preload()</a>,\n<a href=\"#/p5/setup\">setup()</a>, and/or\n<a href=\"#/p5/draw\">draw()</a> properties on it for running a sketch.</p>\n<p>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</p>\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":"<p><a href=\"#/p5.Table\">Table</a> 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.</p>\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":10},"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":10,"requires":["core"],"description":"<p>A class to describe a two or three dimensional vector, specifically\na Euclidean (also known as geometric) vector. A vector is an entity\nthat has both magnitude and direction. The datatype, however, stores\nthe components of the vector (x, y for 2D, and x, y, z for 3D). The magnitude\nand direction can be accessed via the methods <a href=\"#/p5.Vector/mag\">mag()</a> and <a href=\"#/p5.Vector/heading\">heading()</a>.</p>\n<p>In many of the p5.js examples, you will see <a href=\"#/p5.Vector\">p5.Vector</a> used to describe a\nposition, velocity, or acceleration. For example, if you consider a rectangle\nmoving across the screen, at any given instant it has a position (a vector\nthat points from the origin to its location), a velocity (the rate at which\nthe object's position changes per time unit, expressed as a vector), and\nacceleration (the rate at which the object's velocity changes per time\nunit, expressed as a vector).</p>\n<p>Since vectors represent groupings of values, we cannot simply use\ntraditional addition/multiplication/etc. Instead, we'll need to do some\n\"vector\" math, which is made easy by the methods inside the <a href=\"#/p5.Vector\">p5.Vector</a> class.</p>\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":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src/webgl/3d_primitives.js","line":1,"requires":["core","p5.Geometry"]},"Lights, Camera":{"name":"Lights, Camera","submodules":{"Interaction":1,"Lights":1,"Material":1,"Camera":1},"elements":{},"classes":{"p5.Camera":1,"p5.Geometry":1,"p5.Matrix":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":260},"Interaction":{"name":"Interaction","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Lights, Camera","namespace":"","file":"src/webgl/interaction.js","line":1,"requires":["core"]},"Lights":{"name":"Lights","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Lights, Camera","namespace":"","file":"src/webgl/light.js","line":1,"requires":["core"]},"3D Models":{"name":"3D Models","submodules":{},"elements":{},"classes":{},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Shape","namespace":"","file":"src/webgl/loading.js","line":1,"requires":["core","p5.Geometry"]},"Material":{"name":"Material","submodules":{},"elements":{},"classes":{"p5.Geometry":1,"p5.Shader":1,"p5.Texture":1},"fors":{"p5":1},"is_submodule":1,"namespaces":{},"module":"Lights, Camera","namespace":"","file":"src/webgl/p5.Texture.js","line":12,"requires":["core"],"description":"<p>This module defines the p5.Shader class</p>\n"},"Camera":{"name":"Camera","submodules":{},"elements":{},"classes":{"p5.Camera":1},"fors":{"p5":1,"p5.Camera":1},"is_submodule":1,"namespaces":{},"module":"Lights, Camera","namespace":"","file":"src/webgl/p5.Camera.js","line":339,"requires":["core"],"description":"<p>This class describes a camera for use in p5's\n<a href=\"https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5\">\nWebGL mode</a>. It contains camera position, orientation, and projection\ninformation necessary for rendering a 3D scene.</p>\n<p>New p5.Camera objects can be made through the\n<a href=\"#/p5/createCamera\">createCamera()</a> 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 <a href=\"#/p5/setCamera\">setCamera()</a> method.</p>\n<p>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 <a href=\"#/p5.Camera/move\">move()</a> method,\nfor instance, moves the camera along its own axes, whereas the\n<a href=\"#/p5.Camera/setPosition\">setPosition()</a>\nmethod sets the camera's position in world-space.</p>\n"},"p5.sound":{"name":"p5.sound","submodules":{},"elements":{},"classes":{"p5.sound":1,"p5.Effect":1,"p5.Filter":1,"p5.LowPass":1,"p5.HighPass":1,"p5.BandPass":1,"p5.Oscillator":1,"p5.SinOsc":1,"p5.TriOsc":1,"p5.SawOsc":1,"p5.SqrOsc":1,"p5.MonoSynth":1,"p5.AudioVoice":1,"p5.PolySynth":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Signal":1,"p5.Envelope":1,"p5.Pulse":1,"p5.Noise":1,"p5.AudioIn":1,"p5.EQ":1,"p5.Panner3D":1,"p5.Delay":1,"p5.Reverb":1,"p5.Convolver":1,"p5.Phrase":1,"p5.Part":1,"p5.Score":1,"p5.SoundLoop":1,"p5.Compressor":1,"p5.SoundRecorder":1,"p5.PeakDetect":1,"p5.Gain":1,"p5.Distortion":1},"fors":{"p5.sound":1,"p5.Effect":1,"p5":1,"p5.Oscillator":1,"p5.MonoSynth":1,"p5.AudioVoice":1,"p5.PolySynth":1,"p5.SoundFile":1,"p5.Amplitude":1,"p5.FFT":1,"p5.Signal":1,"p5.Envelope":1,"p5.AudioIn":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.Gain":1,"p5.Distortion":1},"namespaces":{},"module":"p5.sound","file":"lib/addons/p5.sound.js","line":11703,"description":"<p>p5.sound extends p5 with <a href=\"http://caniuse.com/audio-api\"\ntarget=\"_blank\">Web Audio</a> functionality including audio input,\nplayback, analysis and synthesis.\n</p>\n<ul>\n<li><a href=\"#/p5.SoundFile\"><b>p5.SoundFile</b></a>: Load and play sound files.</li>\n<li><a href=\"#/p5.Amplitude\"><b>p5.Amplitude</b></a>: Get the current volume of a sound.</li>\n<li><a href=\"#/p5.AudioIn\"><b>p5.AudioIn</b></a>: Get sound from an input source, typically\n  a computer microphone.</li>\n<li><a href=\"#/p5.FFT\"><b>p5.FFT</b></a>: Analyze the frequency of sound. Returns\n  results from the frequency spectrum or time domain (waveform).</li>\n<li><a href=\"#/p5.Oscillator\"><b>p5.Oscillator</b></a>: Generate Sine,\n  Triangle, Square and Sawtooth waveforms. Base class of\n  <li><a href=\"#/p5.Noise\">p5.Noise</a> and <a href=\"#/p5.Pulse\">p5.Pulse</a>.\n  </li>\n<li>\n  <a href=\"#/p5.MonoSynth\">p5.MonoSynth</a> and <a href=\"#/p5.PolySynth\">p5.PolySynth</a>: Play musical notes\n</li>\n<li><a href=\"#/p5.Envelope\"><b>p5.Envelope</b></a>: 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.</li>\n<li><a href=\"#/p5.Delay\"><b>p5.Delay</b></a>: A delay effect with\n  parameters for feedback, delayTime, and lowpass filter.</li>\n<li><a href=\"#/p5.Filter\"><b>p5.Filter</b></a>: Filter the frequency range of a\n  sound.\n</li>\n<li><a href=\"#/p5.Reverb\"><b>p5.Reverb</b></a>: Add reverb to a sound by specifying\n  duration and decay. </li>\n<b><li><a href=\"#/p5.Convolver\">p5.Convolver</a>:</b> Extends\n<a href=\"#/p5.Reverb\">p5.Reverb</a> to simulate the sound of real\n  physical spaces through convolution.</li>\n<b><li><a href=\"#/p5.SoundRecorder\">p5.SoundRecorder</a></b>: Record sound for playback\n  / save the .wav file.\n<b><li><a href=\"#/p5.SoundLoop\">p5.SoundLoop</a>, <a href=\"#/p5.Phrase\">p5.Phrase</a></b>, <b><a href=\"#/p5.Part\">p5.Part</a></b> and\n<b><a href=\"#/p5.Score\">p5.Score</a></b>: Compose musical sequences.\n</li>\n<li><a href=\"#/p5/userStartAudio\">userStartAudio</a>: Enable audio in a\nbrowser- and user-friendly way.</a>\n<p>p5.sound is on <a href=\"https://github.com/therewasaguy/p5.sound/\">GitHub</a>.\nDownload the latest version\n<a href=\"https://github.com/therewasaguy/p5.sound/blob/master/lib/p5.sound.js\">here</a>.</p>","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":13,"description":"<p>This is the p5 instance constructor.</p>\n<p>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 <a href=\"#/p5/preload\">preload()</a>,\n<a href=\"#/p5/setup\">setup()</a>, and/or\n<a href=\"#/p5/draw\">draw()</a> properties on it for running a sketch.</p>\n<p>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</p>\n","is_constructor":1,"params":[{"name":"sketch","description":"<p>a closure that can set optional <a href=\"#/p5/preload\">preload()</a>,\n                             <a href=\"#/p5/setup\">setup()</a>, and/or <a href=\"#/p5/draw\">draw()</a> properties on the\n                             given p5 instance</p>\n","type":"Function"},{"name":"node","description":"<p>element to attach canvas to</p>\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":14,"description":"<p>Each color stores the color mode and level maxes that was applied at the\ntime of its construction. These are used to interpret the input arguments\n(at construction and later for that instance of color) and to format the\noutput e.g. when <a href=\"#/p5/saturation\">saturation()</a> is requested.</p>\n<p>Internally, we store an array representing the ideal RGBA values in floating\npoint form, normalized from 0 to 1. From this we calculate the closest\nscreen color (RGBA levels from 0 to 255) and expose this to the renderer.</p>\n<p>We also cache normalized, floating point components of the color in various\nrepresentations as they are calculated. This is done to prevent repeating a\nconversion that has already been performed.</p>\n","is_constructor":1},"p5.Element":{"name":"p5.Element","shortname":"p5.Element","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"DOM","submodule":"DOM","namespace":"","file":"src/core/p5.Element.js","line":9,"description":"<p>Base class for all elements added to a sketch, including canvas,\ngraphics buffers, and other HTML elements. It is not called directly, but <a href=\"#/p5.Element\">p5.Element</a>\nobjects are created by calling <a href=\"#/p5/createCanvas\">createCanvas</a>, <a href=\"#/p5/createGraphics\">createGraphics</a>,\n<a href=\"#/p5/createDiv\">createDiv</a>, <a href=\"#/p5/createImg\">createImg</a>, <a href=\"#/p5/createInput\">createInput</a>, etc.</p>\n","is_constructor":1,"params":[{"name":"elt","description":"<p>DOM node that is wrapped</p>\n","type":"String"},{"name":"pInst","description":"<p>pointer to p5 instance</p>\n","type":"P5","optional":true}]},"p5.Graphics":{"name":"p5.Graphics","shortname":"p5.Graphics","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Rendering","submodule":"Rendering","namespace":"","file":"src/core/p5.Graphics.js","line":10,"description":"<p>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.</p>\n","is_constructor":1,"extends":"p5.Element","params":[{"name":"w","description":"<p>width</p>\n","type":"Number"},{"name":"h","description":"<p>height</p>\n","type":"Number"},{"name":"renderer","description":"<p>the renderer to use, either P2D or WEBGL</p>\n","type":"Constant"},{"name":"pInst","description":"<p>pointer to p5 instance</p>\n","type":"P5","optional":true}]},"p5.Renderer":{"name":"p5.Renderer","shortname":"p5.Renderer","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Rendering","submodule":"Rendering","namespace":"","file":"src/core/p5.Renderer.js","line":10,"description":"<p>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.</p>\n","is_constructor":1,"extends":"p5.Element","params":[{"name":"elt","description":"<p>DOM node that is wrapped</p>\n","type":"String"},{"name":"pInst","description":"<p>pointer to p5 instance</p>\n","type":"P5","optional":true},{"name":"isMainCanvas","description":"<p>whether we're using it as main canvas</p>\n","type":"Boolean","optional":true}]},"JSON":{"name":"JSON","shortname":"JSON","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Foundation","namespace":""},"console":{"name":"console","shortname":"console","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"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":"<p>Base class for all p5.Dictionary types. Specifically\n typed Dictionary classes inherit from this class.</p>\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":394,"description":"<p>A simple Dictionary class for Strings.</p>\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":410,"description":"<p>A simple Dictionary class for Numbers.</p>\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":2304,"description":"<p>Extends <a href=\"#/p5.Element\">p5.Element</a> to handle audio and video. In addition to the methods\nof <a href=\"#/p5.Element\">p5.Element</a>, it also contains methods for controlling media. It is not\ncalled directly, but <a href=\"#/p5.MediaElement\">p5.MediaElement</a>s are created by calling <a href=\"#/p5/createVideo\">createVideo</a>,\n<a href=\"#/p5/createAudio\">createAudio</a>, and <a href=\"#/p5/createCapture\">createCapture</a>.</p>\n","is_constructor":1,"params":[{"name":"elt","description":"<p>DOM node that is wrapped</p>\n","type":"String"}]},"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":3459,"description":"<p>Base class for a file.\nUsed for Element.drop and createFileInput.</p>\n","is_constructor":1,"params":[{"name":"file","description":"<p>File that is wrapped</p>\n","type":"File"}]},"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":"<p>Creates a new <a href=\"#/p5.Image\">p5.Image</a>. A <a href=\"#/p5.Image\">p5.Image</a> is a canvas backed representation of an\nimage.</p>\n<p>p5 can display .gif, .jpg and .png images. Images may be displayed\nin 2D and 3D space. Before an image is used, it must be loaded with the\n<a href=\"#/p5/loadImage\">loadImage()</a> function. The <a href=\"#/p5.Image\">p5.Image</a> class contains fields for the width and\nheight of the image, as well as an array called <a href=\"#/p5.Image/pixels\">pixels[]</a> that contains the\nvalues for every pixel in the image.</p>\n<p>The methods described below allow easy access to the image's pixels and\nalpha channel and simplify the process of compositing.</p>\n<p>Before using the <a href=\"#/p5.Image/pixels\">pixels[]</a> array, be sure to use the <a href=\"#/p5.Image/loadPixels\">loadPixels()</a> method on\nthe image to make sure that the pixel data is properly loaded.</p>\n","example":["\n<div><code>\nfunction setup() {\n  let img = createImage(100, 100); // same as new p5.Image(100, 100);\n  img.loadPixels();\n  createCanvas(100, 100);\n  background(0);\n\n  // helper for writing color to array\n  function writeColor(image, x, y, red, green, blue, alpha) {\n    let index = (x + y * width) * 4;\n    image.pixels[index] = red;\n    image.pixels[index + 1] = green;\n    image.pixels[index + 2] = blue;\n    image.pixels[index + 3] = alpha;\n  }\n\n  let x, y;\n  // fill with random colors\n  for (y = 0; y < img.height; y++) {\n    for (x = 0; x < img.width; x++) {\n      let red = random(255);\n      let green = random(255);\n      let blue = random(255);\n      let alpha = 255;\n      writeColor(img, x, y, red, green, blue, alpha);\n    }\n  }\n\n  // draw a red line\n  y = 0;\n  for (x = 0; x < img.width; x++) {\n    writeColor(img, x, y, 255, 0, 0, 255);\n  }\n\n  // draw a green line\n  y = img.height - 1;\n  for (x = 0; x < img.width; x++) {\n    writeColor(img, x, y, 0, 255, 0, 255);\n  }\n\n  img.updatePixels();\n  image(img, 0, 0);\n}\n</code></div>"],"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":1205,"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":"<p><a href=\"#/p5.Table\">Table</a> 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.</p>\n","is_constructor":1,"params":[{"name":"rows","description":"<p>An array of p5.TableRow objects</p>\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":"<p>A TableRow object represents a single row of data values,\nstored in columns, from a table.</p>\n<p>A Table Row contains both an ordered array, and an unordered\nJSON object.</p>\n","is_constructor":1,"params":[{"name":"str","description":"<p>optional: populate the row with a\n                            string of values, separated by the\n                            separator</p>\n","type":"String","optional":true},{"name":"separator","description":"<p>comma separated values (csv) by default</p>\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":"<p>XML is a representation of an XML object, able to parse XML code. Use\n<a href=\"#/p5/loadXML\">loadXML()</a> to load external XML files and create XML objects.</p>\n","is_constructor":1,"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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\n// Sketch prints:\n// 0, Capra hircus, Goat\n// 1, Panthera pardus, Leopard\n// 2, Equus zebra, Zebra\n</code></div>"],"alt":"no image displayed"},"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":10,"description":"<p>A class to describe a two or three dimensional vector, specifically\na Euclidean (also known as geometric) vector. A vector is an entity\nthat has both magnitude and direction. The datatype, however, stores\nthe components of the vector (x, y for 2D, and x, y, z for 3D). The magnitude\nand direction can be accessed via the methods <a href=\"#/p5.Vector/mag\">mag()</a> and <a href=\"#/p5.Vector/heading\">heading()</a>.</p>\n<p>In many of the p5.js examples, you will see <a href=\"#/p5.Vector\">p5.Vector</a> used to describe a\nposition, velocity, or acceleration. For example, if you consider a rectangle\nmoving across the screen, at any given instant it has a position (a vector\nthat points from the origin to its location), a velocity (the rate at which\nthe object's position changes per time unit, expressed as a vector), and\nacceleration (the rate at which the object's velocity changes per time\nunit, expressed as a vector).</p>\n<p>Since vectors represent groupings of values, we cannot simply use\ntraditional addition/multiplication/etc. Instead, we'll need to do some\n\"vector\" math, which is made easy by the methods inside the <a href=\"#/p5.Vector\">p5.Vector</a> class.</p>\n","is_constructor":1,"params":[{"name":"x","description":"<p>x component of the vector</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>z component of the vector</p>\n","type":"Number","optional":true}],"example":["\n<div>\n<code>\nlet v1 = createVector(40, 50);\nlet v2 = createVector(40, 50);\n\nellipse(v1.x, v1.y, 50, 50);\nellipse(v2.x, v2.y, 50, 50);\nv1.add(v2);\nellipse(v1.x, v1.y, 50, 50);\n</code>\n</div>"],"alt":"2 white ellipses. One center-left the other bottom right and off canvas"},"p5.Font":{"name":"p5.Font","shortname":"p5.Font","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Typography","submodule":"Loading & Displaying","namespace":"","file":"src/typography/p5.Font.js","line":13,"description":"<p>Base class for font handling</p>\n","is_constructor":1,"params":[{"name":"pInst","description":"<p>pointer to p5 instance</p>\n","type":"P5","optional":true}]},"p5.Camera":{"name":"p5.Camera","shortname":"p5.Camera","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Lights, Camera","submodule":"Camera","namespace":"","file":"src/webgl/p5.Camera.js","line":339,"description":"<p>This class describes a camera for use in p5's\n<a href=\"https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5\">\nWebGL mode</a>. It contains camera position, orientation, and projection\ninformation necessary for rendering a 3D scene.</p>\n<p>New p5.Camera objects can be made through the\n<a href=\"#/p5/createCamera\">createCamera()</a> 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 <a href=\"#/p5/setCamera\">setCamera()</a> method.</p>\n<p>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 <a href=\"#/p5.Camera/move\">move()</a> method,\nfor instance, moves the camera along its own axes, whereas the\n<a href=\"#/p5.Camera/setPosition\">setPosition()</a>\nmethod sets the camera's position in world-space.</p>\n","params":[{"name":"rendererGL","description":"<p>instance of WebGL renderer</p>\n","type":"RendererGL"}],"example":["\n<div>\n<code>\nlet cam;\nlet delta = 0.01;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n  cam = createCamera();\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</code>\n</div>"],"alt":"camera view pans left and right across a series of rotating 3D boxes."},"p5.Geometry":{"name":"p5.Geometry","shortname":"p5.Geometry","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Lights, Camera","submodule":"Material","namespace":"","file":"src/webgl/p5.Geometry.js","line":12,"description":"<p>p5 Geometry class</p>\n","is_constructor":1,"params":[{"name":"detailX","description":"<p>number of vertices on horizontal surface</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of vertices on horizontal surface</p>\n","type":"Integer","optional":true},{"name":"callback","description":"<p>function to call upon object instantiation.</p>\n","type":"Function","optional":true}]},"p5.Shader":{"name":"p5.Shader","shortname":"p5.Shader","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"Lights, Camera","submodule":"Material","namespace":"","file":"src/webgl/p5.Shader.js","line":11,"description":"<p>Shader class for WEBGL Mode</p>\n","is_constructor":1,"params":[{"name":"renderer","description":"<p>an instance of p5.RendererGL that\nwill provide the GL context for this new p5.Shader</p>\n","type":"p5.RendererGL"},{"name":"vertSrc","description":"<p>source code for the vertex shader (as a string)</p>\n","type":"String"},{"name":"fragSrc","description":"<p>source code for the fragment shader (as a string)</p>\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.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":264,"description":"<p>Effect is a base class for audio effects in p5. <br>\nThis module handles the nodes and methods that are\ncommon and useful for current and future effects.</p>\n<p>This class is extended by <a href=\"/reference/#/p5.Distortion\">p5.Distortion</a>,\n<a href=\"/reference/#/p5.Compressor\">p5.Compressor</a>,\n<a href=\"/reference/#/p5.Delay\">p5.Delay</a>,\n<a href=\"/reference/#/p5.Filter\">p5.Filter</a>,\n<a href=\"/reference/#/p5.Reverb\">p5.Reverb</a>.</p>\n","is_constructor":1,"params":[{"name":"ac","description":"<p>Reference to the audio context of the p5 object</p>\n","type":"Object","optional":true},{"name":"input","description":"<p>Gain Node effect wrapper</p>\n","type":"AudioNode","optional":true},{"name":"output","description":"<p>Gain Node effect wrapper</p>\n","type":"AudioNode","optional":true},{"name":"_drywet","description":"<p>Tone.JS CrossFade node (defaults to value: 1)</p>\n","type":"Object","optional":true},{"name":"wet","description":"<p>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.</p>\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":883,"description":"<p>A p5.Filter uses a Web Audio Biquad Filter to filter\nthe frequency response of an input source. Subclasses\ninclude:</p>\n<a href=\"/reference/#/p5.LowPass\"><code>p5.LowPass</code></a>:\nAllows frequencies below the cutoff frequency to pass through,\nand attenuates frequencies above the cutoff.<br/>\n<a href=\"/reference/#/p5.HighPass\"><code>p5.HighPass</code></a>:\nThe opposite of a lowpass filter. <br/>\n<a href=\"/reference/#/p5.BandPass\"><code>p5.BandPass</code></a>:\nAllows a range of frequencies to pass through and attenuates\nthe frequencies below and above this frequency range.<br/>\n\n<p>The <code>.res()</code> method controls either width of the\nbandpass, or resonance of the low/highpass cutoff frequency.</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","extends":"p5.Effect","is_constructor":1,"params":[{"name":"type","description":"<p>'lowpass' (default), 'highpass', 'bandpass'</p>\n","type":"String","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":1147,"description":"<p>Constructor: <code>new p5.LowPass()</code> Filter.\nThis is the same as creating a p5.Filter and then calling\nits method <code>setType('lowpass')</code>.\nSee p5.Filter for methods.</p>\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":1164,"description":"<p>Constructor: <code>new p5.HighPass()</code> Filter.\nThis is the same as creating a p5.Filter and then calling\nits method <code>setType('highpass')</code>.\nSee p5.Filter for methods.</p>\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":1180,"description":"<p>Constructor: <code>new p5.BandPass()</code> Filter.\nThis is the same as creating a p5.Filter and then calling\nits method <code>setType('bandpass')</code>.\nSee p5.Filter for methods.</p>\n","is_constructor":1,"extends":"p5.Filter"},"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":1375,"description":"<p>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).</p>\n\n<p>Set the type of oscillation with setType(), or by instantiating a\nspecific oscillator: <a href=\"/reference/#/p5.SinOsc\">p5.SinOsc</a>, <a\nhref=\"/reference/#/p5.TriOsc\">p5.TriOsc</a>, <a\nhref=\"/reference/#/p5.SqrOsc\">p5.SqrOsc</a>, or <a\nhref=\"/reference/#/p5.SawOsc\">p5.SawOsc</a>.\n</p>","is_constructor":1,"params":[{"name":"freq","description":"<p>frequency defaults to 440Hz</p>\n","type":"Number","optional":true},{"name":"type","description":"<p>type of oscillator. Options:\n                       'sine' (default), 'triangle',\n                       'sawtooth', 'square'</p>\n","type":"String","optional":true}],"example":["\n<div><code>\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</code> </div>"]},"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":1890,"description":"<p>Constructor: <code>new p5.SinOsc()</code>.\nThis creates a Sine Wave Oscillator and is\nequivalent to <code> new p5.Oscillator('sine')\n</code> or creating a p5.Oscillator and then calling\nits method <code>setType('sine')</code>.\nSee p5.Oscillator for methods.</p>\n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"<p>Set the frequency</p>\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":1910,"description":"<p>Constructor: <code>new p5.TriOsc()</code>.\nThis creates a Triangle Wave Oscillator and is\nequivalent to <code>new p5.Oscillator('triangle')\n</code> or creating a p5.Oscillator and then calling\nits method <code>setType('triangle')</code>.\nSee p5.Oscillator for methods.</p>\n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"<p>Set the frequency</p>\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":1929,"description":"<p>Constructor: <code>new p5.SawOsc()</code>.\nThis creates a SawTooth Wave Oscillator and is\nequivalent to <code> new p5.Oscillator('sawtooth')\n</code> or creating a p5.Oscillator and then calling\nits method <code>setType('sawtooth')</code>.\nSee p5.Oscillator for methods.</p>\n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"<p>Set the frequency</p>\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":1948,"description":"<p>Constructor: <code>new p5.SqrOsc()</code>.\nThis creates a Square Wave Oscillator and is\nequivalent to <code> new p5.Oscillator('square')\n</code> or creating a p5.Oscillator and then calling\nits method <code>setType('square')</code>.\nSee p5.Oscillator for methods.</p>\n","is_constructor":1,"extends":"p5.Oscillator","params":[{"name":"freq","description":"<p>Set the frequency</p>\n","type":"Number","optional":true}]},"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":2008,"description":"<p>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.</p>\n","is_constructor":1,"example":["\n<div><code>\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</code></div>"]},"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":2356,"description":"<p>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();</p>\n","is_constructor":1},"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":2426,"description":"<p>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.</p>\n","is_constructor":1,"params":[{"name":"synthVoice","description":"<p>A monophonic synth voice inheriting\n                               the AudioVoice class. Defaults to p5.MonoSynth</p>\n","type":"Number","optional":true},{"name":"maxVoices","description":"<p>Number of voices, defaults to 8;</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":3360,"description":"<p>SoundFile object with a path to a file.</p>\n\n<p>The p5.SoundFile may not be available immediately because\nit loads the file information asynchronously.</p>\n\n<p>To do something with the sound as soon as it loads\npass the name of a function as the second parameter.</p>\n\n<p>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.</p>","is_constructor":1,"params":[{"name":"path","description":"<p>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.</p>\n","type":"String|Array"},{"name":"successCallback","description":"<p>Name of a function to call once file loads</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>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.</p>\n","type":"Function","optional":true},{"name":"whileLoadingCallback","description":"<p>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.</p>\n","type":"Function","optional":true}],"example":["\n<div><code>\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 </code></div>"]},"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":5186,"description":"<p>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.</p>\n","is_constructor":1,"params":[{"name":"smoothing","description":"<p>between 0.0 and .999 to smooth\n                           amplitude readings (defaults to 0)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\nlet sound, amplitude;\n\nfunction preload(){\n  sound = loadSound('assets/beat.mp3');\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);\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 (sound.isPlaying() ){\n    sound.stop();\n  } else {\n    sound.play();\n  }\n}\n\n</code></div>"]},"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":5499,"description":"<p>FFT (Fast Fourier Transform) is an analysis algorithm that\nisolates individual\n<a href=\"https://en.wikipedia.org/wiki/Audio_frequency\">\naudio frequencies</a> within a waveform.</p>\n\n<p>Once instantiated, a p5.FFT object can return an array based on\ntwo types of analyses: <br> • <code>FFT.waveform()</code> 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.<br>\n• <code>FFT.analyze() </code> 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 <code>getEnergy()</code> to measure amplitude at specific\nfrequencies, or within a range of frequencies. </p>\n\n<p>FFT analyzes a very short snapshot of sound called a sample\nbuffer. It returns an array of amplitude measurements, referred\nto as <code>bins</code>. 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.</p>","is_constructor":1,"params":[{"name":"smoothing","description":"<p>Smooth results of Freq Spectrum.\n                              0.0 < smoothing < 1.0.\n                              Defaults to 0.8.</p>\n","type":"Number","optional":true},{"name":"bins","description":"<p>Length of resulting array.\n                          Must be a power of two between\n                          16 and 1024. Defaults to 1024.</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"p5.Signal":{"name":"p5.Signal","shortname":"p5.Signal","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":6146,"description":"<p>p5.Signal is a constant audio-rate signal used by p5.Oscillator\nand p5.Envelope for modulation math.</p>\n\n<p>This is necessary because Web Audio is processed on a seprate clock.\nFor example, the p5 draw loop runs about 60 times per second. But\nthe audio clock must process samples 44100 times per second. If we\nwant to add a value to each of those samples, we can't do it in the\ndraw loop, but we can do it by adding a constant-rate audio signal.</p.\n\n<p>This class mostly functions behind the scenes in p5.sound, and returns\na Tone.Signal from the Tone.js library by Yotam Mann.\nIf you want to work directly with audio signals for modular\nsynthesis, check out\n<a href='http://bit.ly/1oIoEng' target=_'blank'>tone.js.</a></p>","is_constructor":1,"return":{"description":"A Signal object from the Tone.js library","type":"Tone.Signal"},"example":["\n<div><code>\nlet carrier, modulator;\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  carrier = new p5.Oscillator('sine');\n  carrier.start();\n  carrier.amp(1); // set amplitude\n  carrier.freq(220); // set frequency\n\n  modulator = new p5.Oscillator('sawtooth');\n  modulator.disconnect();\n  modulator.start();\n  modulator.amp(1);\n  modulator.freq(4);\n\n  // Modulator's default amplitude range is -1 to 1.\n  // Multiply it by -200, so the range is -200 to 200\n  // then add 220 so the range is 20 to 420\n  carrier.freq( modulator.mult(-400).add(220) );\n}\n\nfunction canvasPressed() {\n  userStartAudio();\n  carrier.amp(1.0);\n}\n\nfunction mouseReleased() {\n  carrier.amp(0);\n}\n</code></div>"]},"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":6350,"description":"<p>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 (\n<a href=\"https://upload.wikimedia.org/wikipedia/commons/e/ea/ADSR_parameter.svg\">ADSR</a>\n). Envelopes can also control other Web Audio Parameters—for example, a p5.Envelope can\ncontrol an Oscillator's frequency like this: <code>osc.freq(env)</code>.</p>\n<p>Use <code><a href=\"#/p5.Envelope/setRange\">setRange</a></code> to change the attack/release level.\nUse <code><a href=\"#/p5.Envelope/setADSR\">setADSR</a></code> to change attackTime, decayTime, sustainPercent and releaseTime.</p>\n<p>Use the <code><a href=\"#/p5.Envelope/play\">play</a></code> method to play the entire envelope,\nthe <code><a href=\"#/p5.Envelope/ramp\">ramp</a></code> method for a pingable trigger,\nor <code><a href=\"#/p5.Envelope/triggerAttack\">triggerAttack</a></code>/\n<code><a href=\"#/p5.Envelope/triggerRelease\">triggerRelease</a></code> to trigger noteOn/noteOff.</p>","is_constructor":1,"example":["\n<div><code>\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</code></div>"]},"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":7192,"description":"<p>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 <a href=\"\nhttp://p5js.org/reference/#/p5.Oscillator\">\n<code>p5.Oscillator</code> for a full list of methods.</p>\n","extends":"p5.Oscillator","is_constructor":1,"params":[{"name":"freq","description":"<p>Frequency in oscillations per second (Hz)</p>\n","type":"Number","optional":true},{"name":"w","description":"<p>Width between the pulses (0 to 1.0,\n                       defaults to 0)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":7399,"description":"<p>Noise is a type of oscillator that generates a buffer with random values.</p>\n","extends":"p5.Oscillator","is_constructor":1,"params":[{"name":"type","description":"<p>Type of noise can be 'white' (default),\n                     'brown' or 'pink'.</p>\n","type":"String"}]},"p5.AudioIn":{"name":"p5.AudioIn","shortname":"p5.AudioIn","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":7583,"description":"<p>Get audio from an input, i.e. your computer's microphone.</p>\n\n<p>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.</p>\n\n<p>If you want to hear the AudioIn, use the .connect() method.\nAudioIn does not connect to p5.sound output by default to prevent\nfeedback.</p>\n\n<p><em>Note: This uses the <a href=\"http://caniuse.com/stream\">getUserMedia/\nStream</a> 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.</em></p>","is_constructor":1,"params":[{"name":"errorCallback","description":"<p>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.</p>\n","type":"Function","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":8021,"description":"<p>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).</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","is_constructor":1,"extends":"p5.Effect","params":[{"name":"_eqsize","description":"<p>Constructor will accept 3 or 8, defaults to 3</p>\n","type":"Number","optional":true}],"return":{"description":"p5.EQ object","type":"Object"},"example":["\n<div><code>\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</code></div>"]},"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":8301,"description":"<p>Panner3D is based on the <a title=\"Web Audio Panner docs\"  href=\n\"https://developer.mozilla.org/en-US/docs/Web/API/PannerNode\">\nWeb Audio Spatial Panner Node</a>.\nThis panner is a spatial processing node that allows audio to be positioned\nand oriented in 3D space.</p>\n<p>The position is relative to an <a title=\"Web Audio Listener docs\" href=\n\"https://developer.mozilla.org/en-US/docs/Web/API/AudioListener\">\nAudio Context Listener</a>, which can be accessed\nby <code>p5.soundOut.audiocontext.listener</code></p>\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":8829,"description":"<p>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.</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","extends":"p5.Effect","is_constructor":1,"example":["\n<div><code>\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</code></div>"]},"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":9175,"description":"<p>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.</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","extends":"p5.Effect","is_constructor":1,"example":["\n<div><code>\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</code></div>"]},"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":9397,"description":"<p>p5.Convolver extends p5.Reverb. It can emulate the sound of real\nphysical spaces through a process called <a href=\"\nhttps://en.wikipedia.org/wiki/Convolution_reverb#Real_space_simulation\">\nconvolution</a>.</p>\n\n<p>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.</p>\n\n<p>Use the method <code>createConvolution(path)</code> to instantiate a\np5.Convolver with a path to your impulse response audio file.</p>","extends":"p5.Effect","is_constructor":1,"params":[{"name":"path","description":"<p>path to a sound file</p>\n","type":"String"},{"name":"callback","description":"<p>function to call when loading succeeds</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to call if loading fails.\n                                   This function will receive an error or\n                                   XMLHttpRequest object with information\n                                   about what went wrong.</p>\n","type":"Function","optional":true}],"example":["\n<div><code>\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 master output...\n  sound.disconnect();\n\n  // ...and process with cVerb\n  // so that we only hear the convolution\n  cVerb.process(sound);\n}\n\nfunction playSound() {\n  sound.play();\n}\n</code></div>"]},"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":9922,"description":"<p>A phrase is a pattern of musical events over time, i.e.\na series of notes and rests.</p>\n\n<p>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.</p>\n\n<p>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 <code>playNote(value){}</code>. 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).</p>","is_constructor":1,"params":[{"name":"name","description":"<p>Name so that you can access the Phrase.</p>\n","type":"String"},{"name":"callback","description":"<p>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.</p>\n","type":"Function"},{"name":"sequence","description":"<p>Array of values to pass into the callback\n                          at each step of the phrase.</p>\n","type":"Array"}],"example":["\n<div><code>\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</code></div>"]},"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":10002,"description":"<p>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.</p>\n\n<p>See p5.Phrase for more about musical timing.</p>","is_constructor":1,"params":[{"name":"steps","description":"<p>Steps in the part</p>\n","type":"Number","optional":true},{"name":"tatums","description":"<p>Divisions of a beat, e.g. use 1/4, or 0.25 for a quater note (default is 1/16, a sixteenth note)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":10288,"description":"<p>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\n<code>new p5.Score(a, a, b, a, c)</code></p>\n","is_constructor":1,"params":[{"name":"parts","description":"<p>One or multiple parts, to be played in sequence.</p>\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":10454,"description":"<p>SoundLoop</p>\n","is_constructor":1,"params":[{"name":"callback","description":"<p>this function will be called on each iteration of theloop</p>\n","type":"Function"},{"name":"interval","description":"<p>amount of time (if a number) or beats (if a string, following <a href = \"https://github.com/Tonejs/Tone.js/wiki/Time\">Tone.Time</a> convention) for each iteration of the loop. Defaults to 1 second.</p>\n","type":"Number|String","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":10792,"description":"<p>Compressor is an audio effect class that performs dynamics compression\non an audio input source. This is a very commonly used technique in music\nand sound production. Compression creates an overall louder, richer,\nand fuller sound by lowering the volume of louds and raising that of softs.\nCompression can be used to avoid clipping (sound distortion due to\npeaks in volume) and is especially useful when many sounds are played\nat once. Compression can be used on indivudal sound sources in addition\nto the master output.</p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","is_constructor":1,"extends":"p5.Effect"},"p5.SoundRecorder":{"name":"p5.SoundRecorder","shortname":"p5.SoundRecorder","classitems":[],"plugins":[],"extensions":[],"plugin_for":[],"extension_for":[],"module":"p5.sound","submodule":"p5.sound","namespace":"","file":"lib/addons/p5.sound.js","line":11056,"description":"<p>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().</p>\n<p>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.</p>","is_constructor":1,"example":["\n<div><code>\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</div></code>"]},"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":11286,"description":"<p>PeakDetect works in conjunction with p5.FFT to\nlook for onsets in some or all of the frequency spectrum.\n</p>\n<p>\nTo use p5.PeakDetect, call <code>update</code> in the draw loop\nand pass in a p5.FFT object.\n</p>\n<p>\nYou can listen for a specific part of the frequency spectrum by\nsetting the range between <code>freq1</code> and <code>freq2</code>.\n</p>\n\n<p><code>threshold</code> 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.</p>\n\n<p>\nThe update method is meant to be run in the draw loop, and\n<b>frames</b> 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<code> framesPerPeak = 60 / (estimatedBPM / 60 );</code>\n</p>\n\n<p>\nBased on example contribtued by @b2renger, and a simple beat detection\nexplanation by <a\nhref=\"http://www.airtightinteractive.com/2013/10/making-audio-reactive-visuals/\"\ntarget=\"_blank\">Felix Turner</a>.\n</p>","is_constructor":1,"params":[{"name":"freq1","description":"<p>lowFrequency - defaults to 20Hz</p>\n","type":"Number","optional":true},{"name":"freq2","description":"<p>highFrequency - defaults to 20000 Hz</p>\n","type":"Number","optional":true},{"name":"threshold","description":"<p>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.</p>\n","type":"Number","optional":true},{"name":"framesPerPeak","description":"<p>Defaults to 20.</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"]},"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":11521,"description":"<p>A gain node is usefull to set the relative volume of sound.\nIt's typically used to build mixers.</p>\n","is_constructor":1,"example":["\n<div><code>\n\n// load two soundfile and crossfade beetween them\nlet sound1,sound2;\nlet sound1Gain, sound2Gain, masterGain;\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 'master' gain to which we will connect both soundfiles\n  masterGain = new p5.Gain();\n  masterGain.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(masterGain); // connect its output to the 'master'\n  sound2.disconnect();\n  sound2Gain = new p5.Gain();\n  sound2Gain.setInput(sound2);\n  sound2Gain.connect(masterGain);\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 'master    *  volume control'\n  var masterVolume = constrain(map(mouseY,height,0,0,1), 0, 1);\n  masterGain.amp(masterVolume);\n  text('master', width/2, height - masterVolume * 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</code></div>"]},"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":11703,"description":"<p>A Distortion effect created with a Waveshaper Node,\nwith an approach adapted from\n<a href=\"http://stackoverflow.com/questions/22312841/waveshaper-node-in-webaudio-how-to-emulate-distortion\">Kevin Ennis</a></p>\n<p>This class extends <a href = \"/reference/#/p5.Effect\">p5.Effect</a>.\nMethods <a href = \"/reference/#/p5.Effect/amp\">amp()</a>, <a href = \"/reference/#/p5.Effect/chain\">chain()</a>,\n<a href = \"/reference/#/p5.Effect/drywet\">drywet()</a>, <a href = \"/reference/#/p5.Effect/connect\">connect()</a>, and\n<a href = \"/reference/#/p5.Effect/disconnect\">disconnect()</a> are available.</p>\n","extends":"p5.Effect","is_constructor":1,"params":[{"name":"amount","description":"<p>Unbounded distortion amount.\n                               Normal values range from 0-1.</p>\n","type":"Number","optional":true,"optdefault":"0.25"},{"name":"oversample","description":"<p>'none', '2x', or '4x'.</p>\n","type":"String","optional":true,"optdefault":"'none'"}]}},"elements":{},"classitems":[{"file":"src/color/color_conversion.js","line":8,"description":"<p>Conversions adapted from <a href=\"http://www.easyrgb.com/en/math.php\">http://www.easyrgb.com/en/math.php</a>.</p>\n<p>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.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":19,"description":"<p>Convert an HSBA array to HSLA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":45,"description":"<p>Convert an HSBA array to RGBA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":100,"description":"<p>Convert an HSLA array to HSBA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":123,"description":"<p>Convert an HSLA array to RGBA.</p>\n<p>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.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":187,"description":"<p>Convert an RGBA array to HSBA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/color_conversion.js","line":226,"description":"<p>Convert an RGBA array to HSLA.</p>\n","class":"p5","module":"Color","submodule":"Color Conversion"},{"file":"src/color/creating_reading.js","line":16,"description":"<p>Extracts the alpha value from a color or pixel array.</p>\n","itemtype":"method","name":"alpha","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the alpha value","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\nlet c = color(0, 126, 255, 102);\nfill(c);\nrect(15, 15, 35, 70);\nlet value = alpha(c); // Sets 'value' to 102\nfill(value);\nrect(50, 15, 35, 70);\n</code>\n</div>"],"alt":"Left half of canvas light blue and right half light charcoal grey.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":45,"description":"<p>Extracts the blue value from a color or pixel array.</p>\n","itemtype":"method","name":"blue","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the blue value","type":"Number"},"example":["\n<div>\n<code>\nlet c = color(175, 100, 220);\nfill(c);\nrect(15, 20, 35, 60); // Draw left rectangle\nlet blueValue = blue(c);\nfill(0, 0, blueValue);\nrect(50, 20, 35, 60); // Draw right rectangle\n</code>\n</div>"],"alt":"Left half of canvas light purple and right half a royal blue.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":72,"description":"<p>Extracts the HSB brightness value from a color or pixel array.</p>\n","itemtype":"method","name":"brightness","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the brightness value","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 255);\nlet c = color(0, 126, 255);\nfill(c);\nrect(15, 20, 35, 60);\nlet value = brightness(c); // Sets 'value' to 255\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>\n\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 255);\nlet c = color('hsb(60, 100%, 50%)');\nfill(c);\nrect(15, 20, 35, 60);\nlet value = brightness(c); // A 'value' of 50% is 127.5\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>"],"alt":"Left half of canvas salmon pink and the right half with it's brightness colored white.\nLeft half of canvas olive colored and the right half with it's brightness color gray.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":116,"description":"<p>Creates colors for storing in variables of the color datatype. The\nparameters are interpreted as RGB or HSB values depending on the\ncurrent <a href=\"#/p5/colorMode\">colorMode()</a>. The default mode is RGB values from 0 to 255\nand, therefore, the function call color(255, 204, 0) will return a\nbright yellow color.</p>\n<p>Note that if only one value is provided to <a href=\"#/p5/color\">color()</a>, it will be interpreted\nas a grayscale value. Add a second value, and it will be used for alpha\ntransparency. When three values are specified, they are interpreted as\neither RGB or HSB values. Adding a fourth value applies alpha\ntransparency.</p>\n<p>If a single string argument is provided, RGB, RGBA and Hex CSS color\nstrings and all named color strings are supported. In this case, an alpha\nnumber value as a second argument is not supported, the RGBA form should be\nused.</p>\n","itemtype":"method","name":"color","return":{"description":"resulting color","type":"p5.Color"},"example":["\n<div>\n<code>\nlet c = color(255, 204, 0);\nfill(c);\nnoStroke();\nrect(30, 20, 55, 55);\n</code>\n</div>\n\n<div>\n<code>\nlet c = color(255, 204, 0);\nfill(c);\nnoStroke();\nellipse(25, 25, 80, 80); // Draw left circle\n// Using only one value generates a grayscale value.\nc = color(65);\nfill(c);\nellipse(75, 75, 80, 80);\n</code>\n</div>\n\n<div>\n<code>\n// You can use named SVG & CSS colors\nlet c = color('magenta');\nfill(c);\nnoStroke();\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// Example of hex color codes\nnoStroke();\nlet c = color('#0f0');\nfill(c);\nrect(0, 10, 45, 80);\nc = color('#00ff00');\nfill(c);\nrect(55, 10, 45, 80);\n</code>\n</div>\n\n<div>\n<code>\n// RGB and RGBA color strings are also supported\n// these all set to the same color (solid blue)\nlet c;\nnoStroke();\nc = color('rgb(0,0,255)');\nfill(c);\nrect(10, 10, 35, 35); // Draw rectangle\nc = color('rgb(0%, 0%, 100%)');\nfill(c);\nrect(55, 10, 35, 35); // Draw rectangle\nc = color('rgba(0, 0, 255, 1)');\nfill(c);\nrect(10, 55, 35, 35); // Draw rectangle\nc = color('rgba(0%, 0%, 100%, 1)');\nfill(c);\nrect(55, 55, 35, 35); // Draw rectangle\n</code>\n</div>\n\n<div>\n<code>\n// HSL color can also be specified by value\nlet c = color('hsl(160, 100%, 50%)');\nnoStroke();\nfill(c);\nrect(0, 10, 45, 80); // Draw rectangle\nc = color('hsla(160, 100%, 50%, 0.5)');\nfill(c);\nrect(55, 10, 45, 80); // Draw rectangle\n</code>\n</div>\n\n<div>\n<code>\n// HSB color can also be specified\nlet c = color('hsb(160, 100%, 50%)');\nnoStroke();\nfill(c);\nrect(0, 10, 45, 80); // Draw rectangle\nc = color('hsba(160, 100%, 50%, 0.5)');\nfill(c);\nrect(55, 10, 45, 80); // Draw rectangle\n</code>\n</div>\n\n<div>\n<code>\nnoStroke();\nlet c = color(50, 55, 100);\nfill(c);\nrect(0, 10, 45, 80); // Draw left rect\ncolorMode(HSB, 100);\nc = color(50, 55, 100);\nfill(c);\nrect(55, 10, 45, 80);\n</code>\n</div>"],"alt":"Yellow rect in middle right of canvas, with 55 pixel width and height.\nYellow ellipse in top left of canvas, black ellipse in bottom right,both 80x80.\nBright fuchsia rect in middle of canvas, 60 pixel width and height.\nTwo bright green rects on opposite sides of the canvas, both 45x80.\nFour blue rects in each corner of the canvas, each are 35x35.\nBright sea green rect on left and darker rect on right of canvas, both 45x80.\nDark green rect on left and lighter green rect on right of canvas, both 45x80.\nDark blue rect on left and light teal rect on right of canvas, both 45x80.","class":"p5","module":"Color","submodule":"Creating & Reading","overloads":[{"line":116,"params":[{"name":"gray","description":"<p>number specifying value between white and black.</p>\n","type":"Number"},{"name":"alpha","description":"<p>alpha value relative to current color range\n                                (default is 0-255)</p>\n","type":"Number","optional":true}],"return":{"description":"resulting color","type":"p5.Color"}},{"line":257,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"return":{"description":"","type":"p5.Color"}},{"line":269,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"return":{"description":"","type":"p5.Color"}},{"line":275,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"return":{"description":"","type":"p5.Color"}},{"line":282,"params":[{"name":"color","description":"","type":"p5.Color"}],"return":{"description":"","type":"p5.Color"}}]},{"file":"src/color/creating_reading.js","line":297,"description":"<p>Extracts the green value from a color or pixel array.</p>\n","itemtype":"method","name":"green","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the green value","type":"Number"},"example":["\n<div>\n<code>\nlet c = color(20, 75, 200); // Define color 'c'\nfill(c); // Use color variable 'c' as fill color\nrect(15, 20, 35, 60); // Draw left rectangle\n\nlet greenValue = green(c); // Get green in 'c'\nprint(greenValue); // Print \"75.0\"\nfill(0, greenValue, 0); // Use 'greenValue' in new fill\nrect(50, 20, 35, 60); // Draw right rectangle\n</code>\n</div>"],"alt":"blue rect on left and green on right, both with black outlines & 35x60.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":326,"description":"<p>Extracts the hue value from a color or pixel array.</p>\n<p>Hue exists in both HSB and HSL. This function will return the\nHSB-normalized hue when supplied with an HSB color object (or when supplied\nwith a pixel array while the color mode is HSB), but will default to the\nHSL-normalized hue otherwise. (The values will only be different if the\nmaximum hue setting for each system is different.)</p>\n","itemtype":"method","name":"hue","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the hue","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 255);\nlet c = color(0, 126, 255);\nfill(c);\nrect(15, 20, 35, 60);\nlet value = hue(c); // Sets 'value' to \"0\"\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>"],"alt":"salmon pink rect on left and black on right, both 35x60.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":361,"description":"<p>Blends two colors to find a third color somewhere between them. The amt\nparameter is the amount to interpolate between the two values where 0.0\nequal to the first color, 0.1 is very near the first color, 0.5 is halfway\nin between, etc. An amount below 0 will be treated as 0. Likewise, amounts\nabove 1 will be capped at 1. This is different from the behavior of <a href=\"#/p5/lerp\">lerp()</a>,\nbut necessary because otherwise numbers outside the range will produce\nstrange and unexpected colors.</p>\n<p>The way that colors are interpolated depends on the current color mode.</p>\n","itemtype":"method","name":"lerpColor","params":[{"name":"c1","description":"<p>interpolate from this color</p>\n","type":"p5.Color"},{"name":"c2","description":"<p>interpolate to this color</p>\n","type":"p5.Color"},{"name":"amt","description":"<p>number between 0 and 1</p>\n","type":"Number"}],"return":{"description":"interpolated color","type":"p5.Color"},"example":["\n<div>\n<code>\ncolorMode(RGB);\nstroke(255);\nbackground(51);\nlet from = color(218, 165, 32);\nlet to = color(72, 61, 139);\ncolorMode(RGB); // Try changing to HSB.\nlet interA = lerpColor(from, to, 0.33);\nlet interB = lerpColor(from, to, 0.66);\nfill(from);\nrect(10, 20, 20, 60);\nfill(interA);\nrect(30, 20, 20, 60);\nfill(interB);\nrect(50, 20, 20, 60);\nfill(to);\nrect(70, 20, 20, 60);\n</code>\n</div>"],"alt":"4 rects one tan, brown, brownish purple, purple, with white outlines & 20x60","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":452,"description":"<p>Extracts the HSL lightness value from a color or pixel array.</p>\n","itemtype":"method","name":"lightness","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the lightness","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(HSL);\nlet c = color(156, 100, 50, 1);\nfill(c);\nrect(15, 20, 35, 60);\nlet value = lightness(c); // Sets 'value' to 50\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>"],"alt":"light pastel green rect on left and dark grey rect on right, both 35x60.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":482,"description":"<p>Extracts the red value from a color or pixel array.</p>\n","itemtype":"method","name":"red","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the red value","type":"Number"},"example":["\n<div>\n<code>\nlet c = color(255, 204, 0); // Define color 'c'\nfill(c); // Use color variable 'c' as fill color\nrect(15, 20, 35, 60); // Draw left rectangle\n\nlet redValue = red(c); // Get red in 'c'\nprint(redValue); // Print \"255.0\"\nfill(redValue, 0, 0); // Use 'redValue' in new fill\nrect(50, 20, 35, 60); // Draw right rectangle\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\ncolorMode(RGB, 255); // Sets the range for red, green, and blue to 255\nlet c = color(127, 255, 0);\ncolorMode(RGB, 1); // Sets the range for red, green, and blue to 1\nlet myColor = red(c);\nprint(myColor); // 0.4980392156862745\n</code>\n</div>"],"alt":"yellow rect on left and red rect on right, both with black outlines and 35x60.\ngrey canvas","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/creating_reading.js","line":522,"description":"<p>Extracts the saturation value from a color or pixel array.</p>\n<p>Saturation is scaled differently in HSB and HSL. This function will return\nthe HSB saturation when supplied with an HSB color object (or when supplied\nwith a pixel array while the color mode is HSB), but will default to the\nHSL saturation otherwise.</p>\n","itemtype":"method","name":"saturation","params":[{"name":"color","description":"<p><a href=\"#/p5.Color\">p5.Color</a> object, color components,\n                                        or CSS color</p>\n","type":"p5.Color|Number[]|String"}],"return":{"description":"the saturation value","type":"Number"},"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 255);\nlet c = color(0, 126, 255);\nfill(c);\nrect(15, 20, 35, 60);\nlet value = saturation(c); // Sets 'value' to 126\nfill(value);\nrect(50, 20, 35, 60);\n</code>\n</div>"],"alt":"deep pink rect on left and grey rect on right, both 35x60.","class":"p5","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":51,"description":"<p>This function returns the color formatted as a string. This can be useful\nfor debugging, or for using p5.js with other libraries.</p>\n","itemtype":"method","name":"toString","params":[{"name":"format","description":"<p>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.</p>\n","type":"String","optional":true}],"return":{"description":"the formatted string","type":"String"},"example":["\n<div>\n<code>\ncreateCanvas(200, 100);\nlet myColor;\nstroke(255);\nmyColor = color(100, 100, 250);\nfill(myColor);\nrotate(HALF_PI);\ntext(myColor.toString(), 0, -5);\ntext(myColor.toString('#rrggbb'), 0, -30);\ntext(myColor.toString('rgba%'), 0, -55);\n</code>\n</div>"],"alt":"A canvas with 3 text representation of thier color.","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":249,"description":"<p>The setRed function sets the red component of a color.\nThe range depends on your color mode, in the default RGB mode it's between 0 and 255.</p>\n","itemtype":"method","name":"setRed","params":[{"name":"red","description":"<p>the new red value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet backgroundColor;\n\nfunction setup() {\n  backgroundColor = color(100, 50, 150);\n}\n\nfunction draw() {\n  backgroundColor.setRed(128 + 128 * sin(millis() / 1000));\n  background(backgroundColor);\n}\n</code>\n</div>"],"alt":"canvas with gradually changing background color","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":278,"description":"<p>The setGreen function sets the green component of a color.\nThe range depends on your color mode, in the default RGB mode it's between 0 and 255.</p>\n","itemtype":"method","name":"setGreen","params":[{"name":"green","description":"<p>the new green value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet backgroundColor = color(100, 50, 150);\nfunction draw() {\n  backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));\n  background(backgroundColor);\n}\n</code>\n</div>"],"alt":"canvas with gradually changing background color","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":302,"description":"<p>The setBlue function sets the blue component of a color.\nThe range depends on your color mode, in the default RGB mode it's between 0 and 255.</p>\n","itemtype":"method","name":"setBlue","params":[{"name":"blue","description":"<p>the new blue value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet backgroundColor = color(100, 50, 150);\nfunction draw() {\n  backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));\n  background(backgroundColor);\n}\n</code>\n</div>"],"alt":"canvas with gradually changing background color","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":326,"description":"<p>The setAlpha function sets the transparency (alpha) value of a color.\nThe range depends on your color mode, in the default RGB mode it's between 0 and 255.</p>\n","itemtype":"method","name":"setAlpha","params":[{"name":"alpha","description":"<p>the new alpha value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nfunction draw() {\n  clear();\n  background(200);\n  squareColor = color(100, 50, 100);\n  squareColor.setAlpha(128 + 128 * sin(millis() / 1000));\n  fill(squareColor);\n  rect(13, 13, width - 26, height - 26);\n}\n</code>\n</div>"],"alt":"a square with gradually changing opacity on a gray background","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":397,"description":"<p>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.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":428,"description":"<p>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.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":447,"description":"<p>CSS named colors.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":601,"description":"<p>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.</p>\n<p>Note that RGB values of .9 are not parsed by IE, but are supported here for\ncolor string consistency.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":614,"description":"<p>Full color string patterns. The capture groups are necessary.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/p5.Color.js","line":962,"description":"<p>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.</p>\n","class":"p5.Color","module":"Color","submodule":"Creating & Reading"},{"file":"src/color/setting.js","line":13,"description":"<p>The <a href=\"#/p5/background\">background()</a> function sets the color used\nfor the background of the p5.js canvas. The default background is transparent.\nThis function is typically used within <a href=\"#/p5/draw\">draw()</a> to clear\nthe display window at the beginning of each frame, but it can be used inside\n<a href=\"#/p5/setup\">setup()</a> to set the background on the first frame of\nanimation or if the background need only be set once.</p>\n<p>The color is either specified in terms of the RGB, HSB, or HSL color depending\non the current <a href=\"#/p5/colorMode\">colorMode</a>. (The default color space\nis RGB, with each value in the range from 0 to 255). The alpha range by default\nis also 0 to 255.<br><br></p>\n<p>If a single string argument is provided, RGB, RGBA and Hex CSS color strings\nand all named color strings are supported. In this case, an alpha number\nvalue as a second argument is not supported, the RGBA form should be used.</p>\n<p>A <a href=\"#/p5.Color\">p5.Color</a> object can also be provided to set the background color.</p>\n<p>A <a href=\"#/p5.Image\">p5.Image</a> can also be provided to set the background image.</p>\n","itemtype":"method","name":"background","chainable":1,"example":["\n<div>\n<code>\n// Grayscale integer value\nbackground(51);\n</code>\n</div>\n\n<div>\n<code>\n// R, G & B integer values\nbackground(255, 204, 0);\n</code>\n</div>\n\n<div>\n<code>\n// H, S & B integer values\ncolorMode(HSB);\nbackground(255, 204, 100);\n</code>\n</div>\n\n<div>\n<code>\n// Named SVG/CSS color string\nbackground('red');\n</code>\n</div>\n\n<div>\n<code>\n// three-digit hexadecimal RGB notation\nbackground('#fae');\n</code>\n</div>\n\n<div>\n<code>\n// six-digit hexadecimal RGB notation\nbackground('#222222');\n</code>\n</div>\n\n<div>\n<code>\n// integer RGB notation\nbackground('rgb(0,255,0)');\n</code>\n</div>\n\n<div>\n<code>\n// integer RGBA notation\nbackground('rgba(0,255,0, 0.25)');\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGB notation\nbackground('rgb(100%,0%,10%)');\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGBA notation\nbackground('rgba(100%,0%,100%,0.5)');\n</code>\n</div>\n\n<div>\n<code>\n// p5 Color object\nbackground(color(0, 0, 255));\n</code>\n</div>"],"alt":"canvas with darkest charcoal grey background.\ncanvas with yellow background.\ncanvas with royal blue background.\ncanvas with red background.\ncanvas with pink background.\ncanvas with black background.\ncanvas with bright green background.\ncanvas with soft green background.\ncanvas with red background.\ncanvas with light purple background.\ncanvas with blue background.","class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":13,"params":[{"name":"color","description":"<p>any value created by the <a href=\"#/p5/color\">color()</a> function</p>\n","type":"p5.Color"}],"chainable":1},{"line":131,"params":[{"name":"colorstring","description":"<p>color string, possible formats include: integer\n                        rgb() or rgba(), percentage rgb() or rgba(),\n                        3-digit hex, 6-digit hex</p>\n","type":"String"},{"name":"a","description":"<p>opacity of the background relative to current\n                            color range (default is 0-255)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":141,"params":[{"name":"gray","description":"<p>specifies a value between white and black</p>\n","type":"Number"},{"name":"a","description":"","type":"Number","optional":true}],"chainable":1},{"line":148,"params":[{"name":"v1","description":"<p>red or hue value (depending on the current color\n                       mode)</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value (depending on the current\n                       color mode)</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value (depending on the current\n                       color mode)</p>\n","type":"Number"},{"name":"a","description":"","type":"Number","optional":true}],"chainable":1},{"line":160,"params":[{"name":"values","description":"<p>an array containing the red, green, blue\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":167,"params":[{"name":"image","description":"<p>image created with <a href=\"#/p5/loadImage\">loadImage()</a> or <a href=\"#/p5/createImage\">createImage()</a>,\n                            to set as background\n                            (must be same size as the sketch window)</p>\n","type":"p5.Image"},{"name":"a","description":"","type":"Number","optional":true}],"chainable":1}]},{"file":"src/color/setting.js","line":180,"description":"<p>Clears the pixels within a buffer. This function only clears the canvas.\nIt will not clear objects created by createX() methods such as\n<a href=\"#/p5/createVideo\">createVideo()</a> or <a href=\"#/p5/createDiv\">createDiv()</a>.\nUnlike the main graphics context, pixels in additional graphics areas created\nwith <a href=\"#/p5/createGraphics\">createGraphics()</a> can be entirely\nor partially transparent. This function clears everything to make all of\nthe pixels 100% transparent.</p>\n","itemtype":"method","name":"clear","chainable":1,"example":["\n<div>\n<code>\n// Clear the screen on mouse press.\nfunction draw() {\n  ellipse(mouseX, mouseY, 20, 20);\n}\nfunction mousePressed() {\n  clear();\n  background(128);\n}\n</code>\n</div>"],"alt":"small white ellipses are continually drawn at mouse's x and y coordinates.","class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":214,"description":"<p><a href=\"#/p5/colorMode\">colorMode()</a> changes the way p5.js interprets\ncolor data. By default, the parameters for <a href=\"#/p5/fill\">fill()</a>,\n<a href=\"#/p5/stroke\">stroke()</a>, <a href=\"#/p5/background\">background()</a>,\nand <a href=\"#/p5/color\">color()</a> are defined by values between 0 and 255\nusing the RGB color model. This is equivalent to setting colorMode(RGB, 255).\nSetting colorMode(HSB) lets you use the HSB system instead. By default, this\nis colorMode(HSB, 360, 100, 100, 1). You can also use HSL.</p>\n<p>Note: existing color objects remember the mode that they were created in,\nso you can change modes as you like without affecting their appearance.</p>\n","itemtype":"method","name":"colorMode","chainable":1,"example":["\n<div>\n<code>\nnoStroke();\ncolorMode(RGB, 100);\nfor (let i = 0; i < 100; i++) {\n  for (let j = 0; j < 100; j++) {\n    stroke(i, j, 0);\n    point(i, j);\n  }\n}\n</code>\n</div>\n\n<div>\n<code>\nnoStroke();\ncolorMode(HSB, 100);\nfor (let i = 0; i < 100; i++) {\n  for (let j = 0; j < 100; j++) {\n    stroke(i, j, 100);\n    point(i, j);\n  }\n}\n</code>\n</div>\n\n<div>\n<code>\ncolorMode(RGB, 255);\nlet c = color(127, 255, 0);\ncolorMode(RGB, 1);\nlet myColor = c._getRed();\ntext(myColor, 10, 10, 80, 80);\n</code>\n</div>\n\n<div>\n<code>\nnoFill();\ncolorMode(RGB, 255, 255, 255, 1);\nbackground(255);\nstrokeWeight(4);\nstroke(255, 0, 10, 0.3);\nellipse(40, 40, 50, 50);\nellipse(50, 50, 40, 40);\n</code>\n</div>"],"alt":"Green to red gradient from bottom L to top R. shading originates from top left.\nRainbow gradient from left to right. Brightness increasing to white at top.\nunknown image.\n50x50 ellipse at middle L & 40x40 ellipse at center. Translucent pink outlines.","class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":214,"params":[{"name":"mode","description":"<p>either RGB, HSB or HSL, corresponding to\n                         Red/Green/Blue and Hue/Saturation/Brightness\n                         (or Lightness)</p>\n","type":"Constant"},{"name":"max","description":"<p>range for all values</p>\n","type":"Number","optional":true}],"chainable":1},{"line":289,"params":[{"name":"mode","description":"","type":"Constant"},{"name":"max1","description":"<p>range for the red or hue depending on the\n                             current color mode</p>\n","type":"Number"},{"name":"max2","description":"<p>range for the green or saturation depending\n                             on the current color mode</p>\n","type":"Number"},{"name":"max3","description":"<p>range for the blue or brightness/lightness\n                             depending on the current color mode</p>\n","type":"Number"},{"name":"maxA","description":"<p>range for the alpha</p>\n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/color/setting.js","line":333,"description":"<p>Sets the color used to fill shapes. For example, if you run fill(204, 102, 0),\nall shapes drawn after the fill command will be filled with the color orange.\nThis color is either specified in terms of the RGB or HSB color depending on\nthe current <a href=\"#/p5/colorMode\">colorMode()</a>. (The default color space\nis RGB, with each value in the range from 0 to 255). The alpha range by default\nis also 0 to 255.</p>\n<p>If a single string argument is provided, RGB, RGBA and Hex CSS color strings\nand all named color strings are supported. In this case, an alpha number\nvalue as a second argument is not supported, the RGBA form should be used.</p>\n<p>A p5 <a href=\"#/p5.Color\">Color</a> object can also be provided to set the fill color.</p>\n","itemtype":"method","name":"fill","chainable":1,"example":["\n<div>\n<code>\n// Grayscale integer value\nfill(51);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// R, G & B integer values\nfill(255, 204, 0);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// H, S & B integer values\ncolorMode(HSB);\nfill(255, 204, 100);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// Named SVG/CSS color string\nfill('red');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// three-digit hexadecimal RGB notation\nfill('#fae');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// six-digit hexadecimal RGB notation\nfill('#222222');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// integer RGB notation\nfill('rgb(0,255,0)');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// integer RGBA notation\nfill('rgba(0,255,0, 0.25)');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGB notation\nfill('rgb(100%,0%,10%)');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGBA notation\nfill('rgba(100%,0%,100%,0.5)');\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// p5 Color object\nfill(color(0, 0, 255));\nrect(20, 20, 60, 60);\n</code>\n</div>"],"alt":"60x60 dark charcoal grey rect with black outline in center of canvas.\n60x60 yellow rect with black outline in center of canvas.\n60x60 royal blue rect with black outline in center of canvas.\n60x60 red rect with black outline in center of canvas.\n60x60 pink rect with black outline in center of canvas.\n60x60 black rect with black outline in center of canvas.\n60x60 light green rect with black outline in center of canvas.\n60x60 soft green rect with black outline in center of canvas.\n60x60 red rect with black outline in center of canvas.\n60x60 dark fuchsia rect with black outline in center of canvas.\n60x60 blue rect with black outline in center of canvas.","class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":333,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":460,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"chainable":1},{"line":466,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":473,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":480,"params":[{"name":"color","description":"<p>the fill color</p>\n","type":"p5.Color"}],"chainable":1}]},{"file":"src/color/setting.js","line":492,"description":"<p>Disables filling geometry. If both <a href=\"#/p5/noStroke\">noStroke()</a> and <a href=\"#/p5/noFill\">noFill()</a> are called,\nnothing will be drawn to the screen.</p>\n","itemtype":"method","name":"noFill","chainable":1,"example":["\n<div>\n<code>\nrect(15, 10, 55, 55);\nnoFill();\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  noFill();\n  stroke(100, 100, 240);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  box(45, 45, 45);\n}\n</code>\n</div>"],"alt":"white rect top middle and noFill rect center. Both 60x60 with black outlines.\nblack canvas with purple cube wireframe spinning","class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":533,"description":"<p>Disables drawing the stroke (outline). If both <a href=\"#/p5/noStroke\">noStroke()</a> and <a href=\"#/p5/noFill\">noFill()</a>\nare called, nothing will be drawn to the screen.</p>\n","itemtype":"method","name":"noStroke","chainable":1,"example":["\n<div>\n<code>\nnoStroke();\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  noStroke();\n  fill(240, 150, 150);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  box(45, 45, 45);\n}\n</code>\n</div>"],"alt":"60x60 white rect at center. no outline.\nblack canvas with pink cube spinning","class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":573,"description":"<p>Sets the color used to draw lines and borders around shapes. This color\nis either specified in terms of the RGB or HSB color depending on the\ncurrent <a href=\"#/p5/colorMode\">colorMode()</a> (the default color space\nis RGB, with each value in the range from 0 to 255). The alpha range by\ndefault is also 0 to 255.</p>\n<p>If a single string argument is provided, RGB, RGBA and Hex CSS color\nstrings and all named color strings are supported. In this case, an alpha\nnumber value as a second argument is not supported, the RGBA form should be\nused.</p>\n<p>A p5 <a href=\"#/p5.Color\">Color</a> object can also be provided to set the stroke color.</p>\n","itemtype":"method","name":"stroke","chainable":1,"example":["\n<div>\n<code>\n// Grayscale integer value\nstrokeWeight(4);\nstroke(51);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// R, G & B integer values\nstroke(255, 204, 0);\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// H, S & B integer values\ncolorMode(HSB);\nstrokeWeight(4);\nstroke(255, 204, 100);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// Named SVG/CSS color string\nstroke('red');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// three-digit hexadecimal RGB notation\nstroke('#fae');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// six-digit hexadecimal RGB notation\nstroke('#222222');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// integer RGB notation\nstroke('rgb(0,255,0)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// integer RGBA notation\nstroke('rgba(0,255,0,0.25)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGB notation\nstroke('rgb(100%,0%,10%)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// percentage RGBA notation\nstroke('rgba(100%,0%,100%,0.5)');\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>\n\n<div>\n<code>\n// p5 Color object\nstroke(color(0, 0, 255));\nstrokeWeight(4);\nrect(20, 20, 60, 60);\n</code>\n</div>"],"alt":"60x60 white rect at center. Dark charcoal grey outline.\n60x60 white rect at center. Yellow outline.\n60x60 white rect at center. Royal blue outline.\n60x60 white rect at center. Red outline.\n60x60 white rect at center. Pink outline.\n60x60 white rect at center. Black outline.\n60x60 white rect at center. Bright green outline.\n60x60 white rect at center. Soft green outline.\n60x60 white rect at center. Red outline.\n60x60 white rect at center. Dark fuchsia outline.\n60x60 white rect at center. Blue outline.","class":"p5","module":"Color","submodule":"Setting","overloads":[{"line":573,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":712,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"chainable":1},{"line":718,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":725,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":732,"params":[{"name":"color","description":"<p>the stroke color</p>\n","type":"p5.Color"}],"chainable":1}]},{"file":"src/color/setting.js","line":745,"description":"<p>All drawing that follows <a href=\"#/p5/erase\">erase()</a> will subtract from\nthe canvas.Erased areas will reveal the web page underneath the canvas.Erasing\ncan be canceled with <a href=\"#/p5/noErase\">noErase()</a>.</p>\n<p>Drawing done with <a href=\"#/p5/image\">image()</a> and <a href=\"#/p5/background\">\nbackground()</a> in between <a href=\"#/p5/erase\">erase()</a> and\n<a href=\"#/p5/noErase\">noErase()</a> will not erase the canvas but works as usual.</p>\n","itemtype":"method","name":"erase","params":[{"name":"strengthFill","description":"<p>A number (0-255) for the strength of erasing for a shape's fill.\n                                       This will default to 255 when no argument is given, which\n                                       is full strength.</p>\n","type":"Number","optional":true},{"name":"strengthStroke","description":"<p>A number (0-255) for the strength of erasing for a shape's stroke.\n                                       This will default to 255 when no argument is given, which\n                                       is full strength.</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nbackground(100, 100, 250);\nfill(250, 100, 100);\nrect(20, 20, 60, 60);\nerase();\nellipse(25, 30, 30);\nnoErase();\n</code>\n</div>\n\n<div>\n<code>\nbackground(150, 250, 150);\nfill(100, 100, 250);\nrect(20, 20, 60, 60);\nstrokeWeight(5);\nerase(150, 255);\ntriangle(50, 10, 70, 50, 90, 10);\nnoErase();\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  smooth();\n  createCanvas(100, 100, WEBGL);\n  // Make a &lt;p&gt; element and put it behind the canvas\n  let p = createP('I am a dom element');\n  p.center();\n  p.style('font-size', '20px');\n  p.style('text-align', 'center');\n  p.style('z-index', '-9999');\n}\n\nfunction draw() {\n  background(250, 250, 150);\n  fill(15, 195, 185);\n  noStroke();\n  sphere(30);\n  erase();\n  rotateY(frameCount * 0.02);\n  translate(0, 0, 40);\n  torus(15, 5);\n  noErase();\n}\n</code>\n</div>"],"alt":"60x60 centered pink rect, purple background. Elliptical area in top-left of rect is erased white.\n60x60 centered purple rect, mint green background. Triangle in top-right is partially erased with fully erased outline.\n60x60 centered teal sphere, yellow background. Torus rotating around sphere erases to reveal black text underneath.","class":"p5","module":"Color","submodule":"Setting"},{"file":"src/color/setting.js","line":825,"description":"<p>Ends erasing that was started with <a href=\"#/p5/erase\">erase()</a>.\nThe <a href=\"#/p5/fill\">fill()</a>, <a href=\"#/p5/stroke\">stroke()</a>, and\n<a href=\"#/p5/blendMode\">blendMode()</a> settings will return to what they were\nprior to calling <a href=\"#/p5/erase\">erase()</a>.</p>\n","itemtype":"method","name":"noErase","chainable":1,"example":["\n<div>\n<code>\nbackground(235, 145, 15);\nnoStroke();\nfill(30, 45, 220);\nrect(30, 10, 10, 80);\nerase();\nellipse(50, 50, 60);\nnoErase();\nrect(70, 10, 10, 80);\n</code>\n</div>"],"alt":"Orange background, with two tall blue rectangles. A centered ellipse erased the first blue rect but not the second.","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). Here is a\nbrief outline of the functions called in this system.\n\nThe FES may be invoked by a call to either (1) _validateParameters","(2) _friendlyFileLoadError","(3) _friendlyError","or (4) helpForMisusedAtTopLevelCode.\n\nhelpForMisusedAtTopLevelCode is called by this file on window load to check for use\nof p5.js functions outside of setup() or draw()\nItems 1-3 above are called by functions in the p5 library located in other files.\n\n_friendlyFileLoadError is called by the loadX() methods.\n_friendlyError can be called by any function to offer a helpful error message.\n\n_validateParameters is called by functions in the p5.js API to help users ensure\nther are calling p5 function with the right parameter types. The property\ndisableFriendlyErrors = false can be set from a p5.js sketch to turn off parameter\nchecking. The call sequence from _validateParameters looks something like this:\n\n_validateParameters\n  lookupParamDoc\n  scoreOverload\n    testParamTypes\n    testParamType\n  getOverloadErrors\n  _friendlyParamError\n    ValidationError\n    report\n      friendlyWelcome\n\nThe call sequences to _friendlyFileLoadError and _friendlyError are like this:\n_friendlyFileLoadError\n  report\n\n_friendlyError\n  report\n\nreport() is the main function that prints directly to console with the output\nof the error helper message. Note: friendlyWelcome() also prints to console directly."],"class":"p5","module":"Color"},{"file":"src/core/friendly_errors/fes_core.js","line":675,"description":"<p>Prints out all the colors in the color pallete with white text.\nFor color blindness testing.</p>\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/stacktrace.js","line":1,"requires":["core"],"class":"p5","module":"Color"},{"file":"src/core/friendly_errors/stacktrace.js","line":34,"description":"<p>Given an Error object, extract the most information from it.</p>\n","params":[{"name":"error","description":"<p>object</p>\n","type":"Error"}],"return":{"description":"of stack frames","type":"Array"},"class":"p5","module":"Color"},{"file":"src/core/friendly_errors/validate_params.js","line":1,"requires":["core"],"class":"p5","module":"Color"},{"file":"src/core/friendly_errors/validate_params.js","line":623,"description":"<p>Validates parameters\nparam  {String}               func    the name of the function\nparam  {Array}                args    user input arguments</p>\n<p>example:\n const a;\n ellipse(10,10,a,5);\nconsole ouput:\n \"It looks like ellipse received an empty variable in spot #2.\"</p>\n<p>example:\n ellipse(10,\"foo\",5,5);\nconsole output:\n \"ellipse was expecting a number for parameter #1,\n          received \"foo\" instead.\"</p>\n","class":"p5","module":"Color"},{"file":"src/core/shape/2d_primitives.js","line":16,"description":"<p>This function does 3 things:</p>\n<ol>\n<li><p>Bounds the desired start/stop angles for an arc (in radians) so that:</p>\n<pre><code>0 <= start < TWO_PI ;    start <= stop < start + TWO_PI</code></pre><p>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.</p>\n</li>\n<li><p>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.</p>\n</li>\n<li><p>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).</p>\n</li>\n</ol>\n","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":102,"description":"<p>Draw an arc to the screen. If called with only x, y, w, h, start and stop,\nthe arc will be drawn and filled as an open pie segment. If a mode parameter\nis provided, the arc will be filled like an open semi-circle (OPEN), a closed\nsemi-circle (CHORD), or as a closed pie segment (PIE). The origin may be changed\nwith the <a href=\"#/p5/ellipseMode\">ellipseMode()</a> function.</p>\n<p>The arc is always drawn clockwise from wherever start falls to wherever stop\nfalls on the ellipse.Adding or subtracting TWO_PI to either angle does not\nchange where they fall. If both start and stop fall at the same place, a full\nellipse will be drawn. Be aware that the y-axis increases in the downward\ndirection, therefore angles are measured clockwise from the positive\nx-direction (\"3 o'clock\").</p>\n","itemtype":"method","name":"arc","params":[{"name":"x","description":"<p>x-coordinate of the arc's ellipse</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the arc's ellipse</p>\n","type":"Number"},{"name":"w","description":"<p>width of the arc's ellipse by default</p>\n","type":"Number"},{"name":"h","description":"<p>height of the arc's ellipse by default</p>\n","type":"Number"},{"name":"start","description":"<p>angle to start the arc, specified in radians</p>\n","type":"Number"},{"name":"stop","description":"<p>angle to stop the arc, specified in radians</p>\n","type":"Number"},{"name":"mode","description":"<p>optional parameter to determine the way of drawing\n                        the arc. either CHORD, PIE or OPEN</p>\n","type":"Constant","optional":true},{"name":"detail","description":"<p>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.</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\narc(50, 55, 50, 50, 0, HALF_PI);\nnoFill();\narc(50, 55, 60, 60, HALF_PI, PI);\narc(50, 55, 70, 70, PI, PI + QUARTER_PI);\narc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);\n</code>\n</div>\n\n<div>\n<code>\narc(50, 50, 80, 80, 0, PI + QUARTER_PI);\n</code>\n</div>\n\n<div>\n<code>\narc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);\n</code>\n</div>\n\n<div>\n<code>\narc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);\n</code>\n</div>\n\n<div>\n<code>\narc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);\n</code>\n</div>"],"alt":"shattered outline of an ellipse with a quarter of a white circle bottom-right.\nwhite ellipse with top right quarter missing.\nwhite ellipse with black outline with top right missing.\nwhite ellipse with top right missing with black outline around shape.\nwhite ellipse with top right quarter missing with black outline around the shape.","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":218,"description":"<p>Draws an ellipse (oval) to the screen. By default, the first two parameters\nset the location of the center of the ellipse, and the third and fourth\nparameters set the shape's width and height. If no height is specified, the\nvalue of width is used for both the width and height. If a negative height or\nwidth is specified, the absolute value is taken.</p>\n<p>An ellipse with equal width and height is a circle.The origin may be changed\nwith the <a href=\"#/p5/ellipseMode\">ellipseMode()</a> function.</p>\n","itemtype":"method","name":"ellipse","chainable":1,"example":["\n<div>\n<code>\nellipse(56, 46, 55, 55);\n</code>\n</div>"],"alt":"white ellipse with black outline in middle-right of canvas that is 55x55","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":218,"params":[{"name":"x","description":"<p>x-coordinate of the center of ellipse.</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the center of ellipse.</p>\n","type":"Number"},{"name":"w","description":"<p>width of the ellipse.</p>\n","type":"Number"},{"name":"h","description":"<p>height of the ellipse.</p>\n","type":"Number","optional":true}],"chainable":1},{"line":245,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"w","description":"","type":"Number"},{"name":"h","description":"","type":"Number"},{"name":"detail","description":"<p>number of radial sectors to draw (for WebGL mode)</p>\n","type":"Integer"}]}]},{"file":"src/core/shape/2d_primitives.js","line":258,"description":"<p>Draws a circle to the screen. A circle is a simple closed shape.It is the set\nof all points in a plane that are at a given distance from a given point,\nthe centre.This function is a special case of the ellipse() function, where\nthe width and height of the ellipse are the same. Height and width of the\nellipse correspond to the diameter of the circle. By default, the first two\nparameters set the location of the centre of the circle, the third sets the\ndiameter of the circle.</p>\n","itemtype":"method","name":"circle","params":[{"name":"x","description":"<p>x-coordinate of the centre of the circle.</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the centre of the circle.</p>\n","type":"Number"},{"name":"d","description":"<p>diameter of the circle.</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\n// Draw a circle at location (30, 30) with a diameter of 20.\ncircle(30, 30, 20);\n</code>\n</div>"],"alt":"white circle with black outline in mid of canvas that is 55x55.","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":317,"description":"<p>Draws a line (a direct path between two points) to the screen. If called with\nonly 4 parameters, it will draw a line in 2D with a default width of 1 pixel.\nThis width can be modified by using the <a href=\"#/p5/strokeWeight\">\nstrokeWeight()</a> function. A line cannot be filled, therefore the <a\nhref=\"#/p5/fill\">fill()</a> function will not affect the color of a line. So to\ncolor a line, use the <a href=\"#/p5/stroke\">stroke()</a> function.</p>\n","itemtype":"method","name":"line","chainable":1,"example":["\n<div>\n<code>\nline(30, 20, 85, 75);\n</code>\n</div>\n\n<div>\n<code>\nline(30, 20, 85, 20);\nstroke(126);\nline(85, 20, 85, 75);\nstroke(255);\nline(85, 75, 30, 75);\n</code>\n</div>"],"alt":"An example showing a line 78 pixels long running from mid-top to bottom-right of canvas.\nAn example showing 3 lines of various stroke sizes. Form top, bottom and right sides of a square.","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":317,"params":[{"name":"x1","description":"<p>the x-coordinate of the first point</p>\n","type":"Number"},{"name":"y1","description":"<p>the y-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"<p>the x-coordinate of the second point</p>\n","type":"Number"},{"name":"y2","description":"<p>the y-coordinate of the second point</p>\n","type":"Number"}],"chainable":1},{"line":353,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>the z-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>the z-coordinate of the second point</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/2d_primitives.js","line":373,"description":"<p>Draws a point, a coordinate in space at the dimension of one pixel.\nThe first parameter is the horizontal value for the point, the second\nparam is the vertical value for the point. The color of the point is\nchanged with the <a href=\"#/p5/stroke\">stroke()</a> function. The size of the point\ncan be changed with the <a href=\"#/p5/strokeWeight\">strokeWeight()</a> function.</p>\n","itemtype":"method","name":"point","chainable":1,"example":["\n<div>\n<code>\npoint(30, 20);\npoint(85, 20);\npoint(85, 75);\npoint(30, 75);\n</code>\n</div>\n\n<div>\n<code>\npoint(30, 20);\npoint(85, 20);\nstroke('purple'); // Change the color\nstrokeWeight(10); // Make the points 10 pixels in size\npoint(85, 75);\npoint(30, 75);\n</code>\n</div>\n\n<div>\n<code>\nlet a = createVector(10, 10);\npoint(a);\nlet b = createVector(10, 20);\npoint(b);\npoint(createVector(20, 10));\npoint(createVector(20, 20));\n</code>\n</div>"],"alt":"4 points centered in the middle-right of the canvas.\n2 large points and 2 large purple points centered in the middle-right of the canvas.\nVertices of a square of length 10 pixels towards the top-left of the canvas.","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":373,"params":[{"name":"x","description":"<p>the x-coordinate</p>\n","type":"Number"},{"name":"y","description":"<p>the y-coordinate</p>\n","type":"Number"},{"name":"z","description":"<p>the z-coordinate (for WebGL mode)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":423,"params":[{"name":"coordinate_vector","description":"<p>the coordinate vector</p>\n","type":"p5.Vector"}],"chainable":1}]},{"file":"src/core/shape/2d_primitives.js","line":447,"description":"<p>Draws a quad on the canvas. A quad is a quadrilateral, a four sided polygon. It is\nsimilar to a rectangle, but the angles between its edges are not\nconstrained to ninety degrees. The first pair of parameters (x1,y1)\nsets the first vertex and the subsequent pairs should proceed\nclockwise or counter-clockwise around the defined shape.\nz-arguments only work when quad() is used in WEBGL mode.</p>\n","itemtype":"method","name":"quad","chainable":1,"example":["\n<div>\n<code>\nquad(38, 31, 86, 20, 69, 63, 30, 76);\n</code>\n</div>"],"alt":"irregular white quadrilateral shape with black outline mid-right of canvas.","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":447,"params":[{"name":"x1","description":"<p>the x-coordinate of the first point</p>\n","type":"Number"},{"name":"y1","description":"<p>the y-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"<p>the x-coordinate of the second point</p>\n","type":"Number"},{"name":"y2","description":"<p>the y-coordinate of the second point</p>\n","type":"Number"},{"name":"x3","description":"<p>the x-coordinate of the third point</p>\n","type":"Number"},{"name":"y3","description":"<p>the y-coordinate of the third point</p>\n","type":"Number"},{"name":"x4","description":"<p>the x-coordinate of the fourth point</p>\n","type":"Number"},{"name":"y4","description":"<p>the y-coordinate of the fourth point</p>\n","type":"Number"}],"chainable":1},{"line":475,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>the z-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>the z-coordinate of the second point</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>the z-coordinate of the third point</p>\n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"<p>the z-coordinate of the fourth point</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/2d_primitives.js","line":512,"description":"<p>Draws a rectangle on the canvas. A rectangle is a four-sided closed shape with\nevery angle at ninety degrees. By default, the first two parameters set\nthe location of the upper-left corner, the third sets the width, and the\nfourth sets the height. The way these parameters are interpreted, may be\nchanged with the <a href=\"#/p5/rectMode\">rectMode()</a> function.</p>\n<p>The fifth, sixth, seventh and eighth parameters, if specified,\ndetermine corner radius for the top-left, top-right, lower-right and\nlower-left corners, respectively. An omitted corner radius parameter is set\nto the value of the previously specified radius value in the parameter list.</p>\n","itemtype":"method","name":"rect","chainable":1,"example":["\n<div>\n<code>\n// Draw a rectangle at location (30, 20) with a width and height of 55.\nrect(30, 20, 55, 55);\n</code>\n</div>\n\n<div>\n<code>\n// Draw a rectangle with rounded corners, each having a radius of 20.\nrect(30, 20, 55, 55, 20);\n</code>\n</div>\n\n<div>\n<code>\n// Draw a rectangle with rounded corners having the following radii:\n// top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.\nrect(30, 20, 55, 55, 20, 15, 10, 5);\n</code>\n</div>"],"alt":"55x55 white rect with black outline in mid-right of canvas.\n55x55 white rect with black outline and rounded edges in mid-right of canvas.\n55x55 white rect with black outline and rounded edges of different radii.","class":"p5","module":"Shape","submodule":"2D Primitives","overloads":[{"line":512,"params":[{"name":"x","description":"<p>x-coordinate of the rectangle.</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the rectangle.</p>\n","type":"Number"},{"name":"w","description":"<p>width of the rectangle.</p>\n","type":"Number"},{"name":"h","description":"<p>height of the rectangle.</p>\n","type":"Number","optional":true},{"name":"tl","description":"<p>optional radius of top-left corner.</p>\n","type":"Number","optional":true},{"name":"tr","description":"<p>optional radius of top-right corner.</p>\n","type":"Number","optional":true},{"name":"br","description":"<p>optional radius of bottom-right corner.</p>\n","type":"Number","optional":true},{"name":"bl","description":"<p>optional radius of bottom-left corner.</p>\n","type":"Number","optional":true}],"chainable":1},{"line":563,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"w","description":"","type":"Number"},{"name":"h","description":"","type":"Number"},{"name":"detailX","description":"<p>number of segments in the x-direction (for WebGL mode)</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of segments in the y-direction (for WebGL mode)</p>\n","type":"Integer","optional":true}],"chainable":1}]},{"file":"src/core/shape/2d_primitives.js","line":578,"description":"<p>Draws a square to the screen. A square is a four-sided shape with every angle\nat ninety degrees, and equal side size. This function is a special case of the\nrect() function, where the width and height are the same, and the parameter\nis called \"s\" for side size. By default, the first two parameters set the\nlocation of the upper-left corner, the third sets the side size of the square.\nThe way these parameters are interpreted, may be changed with the <a\nhref=\"#/p5/rectMode\">rectMode()</a> function.</p>\n<p>The fourth, fifth, sixth and seventh parameters, if specified,\ndetermine corner radius for the top-left, top-right, lower-right and\nlower-left corners, respectively. An omitted corner radius parameter is set\nto the value of the previously specified radius value in the parameter list.</p>\n","itemtype":"method","name":"square","params":[{"name":"x","description":"<p>x-coordinate of the square.</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the square.</p>\n","type":"Number"},{"name":"s","description":"<p>side size of the square.</p>\n","type":"Number"},{"name":"tl","description":"<p>optional radius of top-left corner.</p>\n","type":"Number","optional":true},{"name":"tr","description":"<p>optional radius of top-right corner.</p>\n","type":"Number","optional":true},{"name":"br","description":"<p>optional radius of bottom-right corner.</p>\n","type":"Number","optional":true},{"name":"bl","description":"<p>optional radius of bottom-left corner.</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// Draw a square at location (30, 20) with a side size of 55.\nsquare(30, 20, 55);\n</code>\n</div>\n\n<div>\n<code>\n// Draw a square with rounded corners, each having a radius of 20.\nsquare(30, 20, 55, 20);\n</code>\n</div>\n\n<div>\n<code>\n// Draw a square with rounded corners having the following radii:\n// top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.\nsquare(30, 20, 55, 20, 15, 10, 5);\n</code>\n</div>"],"alt":"55x55 white square with black outline in mid-right of canvas.\n55x55 white square with black outline and rounded edges in mid-right of canvas.\n55x55 white square with black outline and rounded edges of different radii.","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/2d_primitives.js","line":662,"description":"<p>Draws a trangle to the canvas. A triangle is a plane created by connecting\nthree points. The first two arguments specify the first point, the middle two\narguments specify the second point, and the last two arguments specify the\nthird point.</p>\n","itemtype":"method","name":"triangle","params":[{"name":"x1","description":"<p>x-coordinate of the first point</p>\n","type":"Number"},{"name":"y1","description":"<p>y-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"<p>x-coordinate of the second point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate of the second point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate of the third point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate of the third point</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\ntriangle(30, 75, 58, 20, 86, 75);\n</code>\n</div>"],"alt":"white triangle with black outline in mid-right of canvas.","class":"p5","module":"Shape","submodule":"2D Primitives"},{"file":"src/core/shape/attributes.js","line":12,"description":"<p>Modifies the location from which ellipses are drawn by changing the way in\nwhich parameters given to <a href=\"#/p5/ellipse\">ellipse()</a>,\n<a href=\"#/p5/circle\">circle()</a> and <a href=\"#/p5/arc\">arc()</a> are interpreted.</p>\n<p>The default mode is CENTER, in which the first two parameters are interpreted\nas the shape's center point's x and y coordinates respectively, while the third\nand fourth parameters are its width and height.</p>\n<p>ellipseMode(RADIUS) also uses the first two parameters as the shape's center\npoint's x and y coordinates, but uses the third and fourth parameters to\nspecify half of the shapes's width and height.</p>\n<p>ellipseMode(CORNER) interprets the first two parameters as the upper-left\ncorner of the shape, while the third and fourth parameters are its width\nand height.</p>\n<p>ellipseMode(CORNERS) interprets the first two parameters as the location of\none corner of the ellipse's bounding box, and the third and fourth parameters\nas the location of the opposite corner.</p>\n<p>The parameter to this method must be written in ALL CAPS because they are\npredefined as constants in ALL CAPS and Javascript is a case-sensitive language.</p>\n","itemtype":"method","name":"ellipseMode","params":[{"name":"mode","description":"<p>either CENTER, RADIUS, CORNER, or CORNERS</p>\n","type":"Constant"}],"chainable":1,"example":["\n<div>\n<code>\n// Example showing RADIUS and CENTER ellipsemode with 2 overlaying ellipses\nellipseMode(RADIUS);\nfill(255);\nellipse(50, 50, 30, 30); // Outer white ellipse\nellipseMode(CENTER);\nfill(100);\nellipse(50, 50, 30, 30); // Inner gray ellipse\n</code>\n</div>\n\n<div>\n<code>\n// Example showing CORNER and CORNERS ellipseMode with 2 overlaying ellipses\nellipseMode(CORNER);\nfill(255);\nellipse(25, 25, 50, 50); // Outer white ellipse\nellipseMode(CORNERS);\nfill(100);\nellipse(25, 25, 50, 50); // Inner gray ellipse\n</code>\n</div>"],"alt":"60x60 white ellipse and 30x30 grey ellipse with black outlines at center.\n60x60 white ellipse and 30x30 grey ellipse top-right with black outlines.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":81,"description":"<p>Draws all geometry with jagged (aliased) edges. Note that <a href=\"#/p5/smooth\">smooth()</a> is\nactive by default in 2D mode, so it is necessary to call <a href=\"#/p5/noSmooth\">noSmooth()</a> to disable\nsmoothing of geometry, images, and fonts. In 3D mode, <a href=\"#/p5/noSmooth\">noSmooth()</a> is enabled\nby default, so it is necessary to call <a href=\"#/p5/smooth\">smooth()</a> if you would like\nsmooth (antialiased) edges on your geometry.</p>\n","itemtype":"method","name":"noSmooth","chainable":1,"example":["\n<div>\n<code>\nbackground(0);\nnoStroke();\nsmooth();\nellipse(30, 48, 36, 36);\nnoSmooth();\nellipse(70, 48, 36, 36);\n</code>\n</div>"],"alt":"2 pixelated 36x36 white ellipses to left & right of center, black background","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":115,"description":"<p>Modifies the location from which rectangles are drawn by changing the way\nin which parameters given to <a href=\"#/p5/rect\">rect()</a> are interpreted.</p>\n<p>The default mode is CORNER, which interprets the first two parameters as the\nupper-left corner of the shape, while the third and fourth parameters are its\nwidth and height.</p>\n<p>rectMode(CORNERS) interprets the first two parameters as the location of\none of the corner, and the third and fourth parameters as the location of\nthe diagonally opposite corner. Note, the rectangle is drawn between the\ncoordinates, so it is not neccesary that the first corner be the upper left\ncorner.</p>\n<p>rectMode(CENTER) interprets the first two parameters as the shape's center\npoint, while the third and fourth parameters are its width and height.</p>\n<p>rectMode(RADIUS) also uses the first two parameters as the shape's center\npoint, but uses the third and fourth parameters to specify half of the shapes's\nwidth and height respectively.</p>\n<p>The parameter to this method must be written in ALL CAPS because they are\npredefined as constants in ALL CAPS and Javascript is a case-sensitive language.</p>\n","itemtype":"method","name":"rectMode","params":[{"name":"mode","description":"<p>either CORNER, CORNERS, CENTER, or RADIUS</p>\n","type":"Constant"}],"chainable":1,"example":["\n<div>\n<code>\nrectMode(CORNER);\nfill(255);\nrect(25, 25, 50, 50); // Draw white rectangle using CORNER mode\n\nrectMode(CORNERS);\nfill(100);\nrect(25, 25, 50, 50); // Draw gray rectanle using CORNERS mode\n</code>\n</div>\n\n<div>\n<code>\nrectMode(RADIUS);\nfill(255);\nrect(50, 50, 30, 30); // Draw white rectangle using RADIUS mode\n\nrectMode(CENTER);\nfill(100);\nrect(50, 50, 30, 30); // Draw gray rectangle using CENTER mode\n</code>\n</div>"],"alt":"50x50 white rect at center and 25x25 grey rect in the top left of the other.\n50x50 white rect at center and 25x25 grey rect in the center of the other.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":184,"description":"<p>Draws all geometry with smooth (anti-aliased) edges. <a href=\"#/p5/smooth\">smooth()</a> will also\nimprove image quality of resized images. Note that <a href=\"#/p5/smooth\">smooth()</a> is active by\ndefault in 2D mode; <a href=\"#/p5/noSmooth\">noSmooth()</a> can be used to disable smoothing of geometry,\nimages, and fonts. In 3D mode, <a href=\"#/p5/noSmooth\">noSmooth()</a> is enabled\nby default, so it is necessary to call <a href=\"#/p5/smooth\">smooth()</a> if you would like\nsmooth (antialiased) edges on your geometry.</p>\n","itemtype":"method","name":"smooth","chainable":1,"example":["\n<div>\n<code>\nbackground(0);\nnoStroke();\nsmooth();\nellipse(30, 48, 36, 36);\nnoSmooth();\nellipse(70, 48, 36, 36);\n</code>\n</div>"],"alt":"2 pixelated 36x36 white ellipses one left one right of center. On black.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":219,"description":"<p>Sets the style for rendering line endings. These ends are either rounded,\nsquared or extended, each of which specified with the corresponding\nparameters: ROUND, SQUARE and PROJECT. The default cap is ROUND.</p>\n<p>The parameter to this method must be written in ALL CAPS because they are\npredefined as constants in ALL CAPS and Javascript is a case-sensitive language.</p>\n","itemtype":"method","name":"strokeCap","params":[{"name":"cap","description":"<p>either ROUND, SQUARE or PROJECT</p>\n","type":"Constant"}],"chainable":1,"example":["\n<div>\n<code>\n// Example of different strokeCaps\nstrokeWeight(12.0);\nstrokeCap(ROUND);\nline(20, 30, 80, 30);\nstrokeCap(SQUARE);\nline(20, 50, 80, 50);\nstrokeCap(PROJECT);\nline(20, 70, 80, 70);\n</code>\n</div>"],"alt":"3 lines. Top line: rounded ends, mid: squared, bottom:longer squared ends.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":259,"description":"<p>Sets the style of the joints which connect line segments. These joints\nare either mitered, beveled or rounded and specified with the\ncorresponding parameters MITER, BEVEL and ROUND. The default joint is\nMITER.</p>\n<p>The parameter to this method must be written in ALL CAPS because they are\npredefined as constants in ALL CAPS and Javascript is a case-sensitive language.</p>\n","itemtype":"method","name":"strokeJoin","params":[{"name":"join","description":"<p>either MITER, BEVEL, ROUND</p>\n","type":"Constant"}],"chainable":1,"example":["\n<div>\n<code>\n// Example of MITER type of joints\nnoFill();\nstrokeWeight(10.0);\nstrokeJoin(MITER);\nbeginShape();\nvertex(35, 20);\nvertex(65, 50);\nvertex(35, 80);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\n// Example of BEVEL type of joints\nnoFill();\nstrokeWeight(10.0);\nstrokeJoin(BEVEL);\nbeginShape();\nvertex(35, 20);\nvertex(65, 50);\nvertex(35, 80);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\n// Example of ROUND type of joints\nnoFill();\nstrokeWeight(10.0);\nstrokeJoin(ROUND);\nbeginShape();\nvertex(35, 20);\nvertex(65, 50);\nvertex(35, 80);\nendShape();\n</code>\n</div>"],"alt":"Right-facing arrowhead shape with pointed tip in center of canvas.\nRight-facing arrowhead shape with flat tip in center of canvas.\nRight-facing arrowhead shape with rounded tip in center of canvas.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/attributes.js","line":331,"description":"<p>Sets the width of the stroke used for lines, points and the border around\nshapes. All widths are set in units of pixels.</p>\n","itemtype":"method","name":"strokeWeight","params":[{"name":"weight","description":"<p>the weight of the stroke (in pixels)</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\n// Example of different stroke weights\nstrokeWeight(1); // Default\nline(20, 20, 80, 20);\nstrokeWeight(4); // Thicker\nline(20, 40, 80, 40);\nstrokeWeight(10); // Beastly\nline(20, 70, 80, 70);\n</code>\n</div>"],"alt":"3 horizontal black lines. Top line: thin, mid: medium, bottom:thick.","class":"p5","module":"Shape","submodule":"Attributes"},{"file":"src/core/shape/curves.js","line":13,"description":"<p>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.</p>\n<p>Bezier curves were developed by French automotive engineer Pierre Bezier,\nand are commonly used in computer graphics to define gently sloping curves.\nSee also <a href=\"#/p5/curve\">curve()</a>.</p>\n","itemtype":"method","name":"bezier","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\nbackground(0, 0, 0);\nnoFill();\nstroke(255);\nbezier(250, 250, 0, 100, 100, 0, 100, 0, 0, 0, 100, 0);\n</code>\n</div>"],"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":"<p>x-coordinate for the first anchor point</p>\n","type":"Number"},{"name":"y1","description":"<p>y-coordinate for the first anchor point</p>\n","type":"Number"},{"name":"x2","description":"<p>x-coordinate for the first control point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate for the first control point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate for the second control point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate for the second control point</p>\n","type":"Number"},{"name":"x4","description":"<p>x-coordinate for the second anchor point</p>\n","type":"Number"},{"name":"y4","description":"<p>y-coordinate for the second anchor point</p>\n","type":"Number"}],"chainable":1},{"line":62,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>z-coordinate for the first anchor point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>z-coordinate for the first control point</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>z-coordinate for the second control point</p>\n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"<p>z-coordinate for the second anchor point</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/curves.js","line":92,"description":"<p>Sets the resolution at which Bezier's curve is displayed. The default value is 20.</p>\n<p>Note, This function is only useful when using the WEBGL renderer\nas the default canvas renderer does not use this information.</p>\n","itemtype":"method","name":"bezierDetail","params":[{"name":"detail","description":"<p>resolution of the curves</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  noFill();\n  bezierDetail(5);\n}\n\nfunction draw() {\n  background(200);\n  bezier(-40, -40, 0,\n          90, -40, 0,\n         -90,  40, 0,\n          40,  40, 0);\n}\n</code>\n</div>"],"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":130,"description":"<p>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.</p>\n","itemtype":"method","name":"bezierPoint","params":[{"name":"a","description":"<p>coordinate of first point on the curve</p>\n","type":"Number"},{"name":"b","description":"<p>coordinate of first control point</p>\n","type":"Number"},{"name":"c","description":"<p>coordinate of second control point</p>\n","type":"Number"},{"name":"d","description":"<p>coordinate of second point on the curve</p>\n","type":"Number"},{"name":"t","description":"<p>value between 0 and 1</p>\n","type":"Number"}],"return":{"description":"the value of the Bezier at position t","type":"Number"},"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"10 points plotted on a given bezier at equal distances.","class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":185,"description":"<p>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.</p>\n","itemtype":"method","name":"bezierTangent","params":[{"name":"a","description":"<p>coordinate of first point on the curve</p>\n","type":"Number"},{"name":"b","description":"<p>coordinate of first control point</p>\n","type":"Number"},{"name":"c","description":"<p>coordinate of second control point</p>\n","type":"Number"},{"name":"d","description":"<p>coordinate of second point on the curve</p>\n","type":"Number"},{"name":"t","description":"<p>value between 0 and 1</p>\n","type":"Number"}],"return":{"description":"the tangent at position t","type":"Number"},"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":264,"description":"<p>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. <br /><br />\nLonger curves can be created by putting a series of <a href=\"#/p5/curve\">curve()</a> functions\ntogether or using <a href=\"#/p5/curveVertex\">curveVertex()</a>. An additional function called\n<a href=\"#/p5/curveTightness\">curveTightness()</a> provides control for the visual quality of the curve.\nThe <a href=\"#/p5/curve\">curve()</a> function is an implementation of Catmull-Rom splines.</p>\n","itemtype":"method","name":"curve","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":264,"params":[{"name":"x1","description":"<p>x-coordinate for the beginning control point</p>\n","type":"Number"},{"name":"y1","description":"<p>y-coordinate for the beginning control point</p>\n","type":"Number"},{"name":"x2","description":"<p>x-coordinate for the first point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate for the first point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate for the second point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate for the second point</p>\n","type":"Number"},{"name":"x4","description":"<p>x-coordinate for the ending control point</p>\n","type":"Number"},{"name":"y4","description":"<p>y-coordinate for the ending control point</p>\n","type":"Number"}],"chainable":1},{"line":332,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>z-coordinate for the beginning control point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>z-coordinate for the first point</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>z-coordinate for the second point</p>\n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"<p>z-coordinate for the ending control point</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/curves.js","line":358,"description":"<p>Sets the resolution at which curves display. The default value is 20 while\nthe minimum value is 3.</p>\n<p>This function is only useful when using the WEBGL renderer\nas the default canvas renderer does not use this\ninformation.</p>\n","itemtype":"method","name":"curveDetail","params":[{"name":"resolution","description":"<p>resolution of the curves</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\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</code>\n</div>"],"alt":"white arch shape with a low level of curve detail.","class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":398,"description":"<p>Modifies the quality of forms created with <a href=\"#/p5/curve\">curve()</a>\nand <a href=\"#/p5/curveVertex\">curveVertex()</a>.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.</p>\n","itemtype":"method","name":"curveTightness","params":[{"name":"amount","description":"<p>amount of deformation from the original vertices</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"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":444,"description":"<p>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.</p>\n","itemtype":"method","name":"curvePoint","params":[{"name":"a","description":"<p>coordinate of first control point of the curve</p>\n","type":"Number"},{"name":"b","description":"<p>coordinate of first point</p>\n","type":"Number"},{"name":"c","description":"<p>coordinate of second point</p>\n","type":"Number"},{"name":"d","description":"<p>coordinate of second control point</p>\n","type":"Number"},{"name":"t","description":"<p>value between 0 and 1</p>\n","type":"Number"}],"return":{"description":"bezier value at position t","type":"Number"},"example":["\n<div>\n<code>\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</code>\n</div>\n\nline hooking down to right-bottom with 13 5x5 white ellipse points"],"class":"p5","module":"Shape","submodule":"Curves"},{"file":"src/core/shape/curves.js","line":493,"description":"<p>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.</p>\n","itemtype":"method","name":"curveTangent","params":[{"name":"a","description":"<p>coordinate of first control point</p>\n","type":"Number"},{"name":"b","description":"<p>coordinate of first point on the curve</p>\n","type":"Number"},{"name":"c","description":"<p>coordinate of second point on the curve</p>\n","type":"Number"},{"name":"d","description":"<p>coordinate of second conrol point</p>\n","type":"Number"},{"name":"t","description":"<p>value between 0 and 1</p>\n","type":"Number"}],"return":{"description":"the tangent at position t","type":"Number"},"example":["\n<div>\n<code>\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</code>\n</div>"],"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":"<p>Use the <a href=\"#/p5/beginContour\">beginContour()</a> and\n<a href=\"#/p5/endContour\">endContour()</a> functions to create negative shapes\nwithin shapes such as the center of the letter 'O'. <a href=\"#/p5/beginContour\">beginContour()</a>\nbegins recording vertices for the shape and <a href=\"#/p5/endContour\">endContour()</a> 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.</p>\n<p>These functions can only be used within a <a href=\"#/p5/beginShape\">beginShape()</a>/<a href=\"#/p5/endShape\">endShape()</a> pair and\ntransformations such as <a href=\"#/p5/translate\">translate()</a>, <a href=\"#/p5/rotate\">rotate()</a>, and <a href=\"#/p5/scale\">scale()</a> do not work\nwithin a <a href=\"#/p5/beginContour\">beginContour()</a>/<a href=\"#/p5/endContour\">endContour()</a> pair. It is also not possible to use\nother shapes, such as <a href=\"#/p5/ellipse\">ellipse()</a> or <a href=\"#/p5/rect\">rect()</a> within.</p>\n","itemtype":"method","name":"beginContour","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"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":67,"description":"<p>Using the <a href=\"#/p5/beginShape\">beginShape()</a> and <a href=\"#/p5/endShape\">endShape()</a> functions allow creating more\ncomplex forms. <a href=\"#/p5/beginShape\">beginShape()</a> begins recording vertices for a shape and\n<a href=\"#/p5/endShape\">endShape()</a> 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.</p>\n<p>The parameters available for <a href=\"#/p5/beginShape\">beginShape()</a> are POINTS, LINES, TRIANGLES,\nTRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIP, and TESS (WebGL only). After calling the\n<a href=\"#/p5/beginShape\">beginShape()</a> function, a series of <a href=\"#/p5/vertex\">vertex()</a> commands must follow. To stop\ndrawing the shape, call <a href=\"#/p5/endShape\">endShape()</a>. Each shape will be outlined with the\ncurrent stroke color and filled with the fill color.</p>\n<p>Transformations such as <a href=\"#/p5/translate\">translate()</a>, <a href=\"#/p5/rotate\">rotate()</a>, and <a href=\"#/p5/scale\">scale()</a> do not work\nwithin <a href=\"#/p5/beginShape\">beginShape()</a>. It is also not possible to use other shapes, such as\n<a href=\"#/p5/ellipse\">ellipse()</a> or <a href=\"#/p5/rect\">rect()</a> within <a href=\"#/p5/beginShape\">beginShape()</a>.</p>\n","itemtype":"method","name":"beginShape","params":[{"name":"kind","description":"<p>either POINTS, LINES, TRIANGLES, TRIANGLE_FAN\n                               TRIANGLE_STRIP, QUADS, QUAD_STRIP or TESS</p>\n","type":"Constant","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape(CLOSE);\n</code>\n</div>\n\n<div>\n<code>\nbeginShape(POINTS);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\nbeginShape(LINES);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\nnoFill();\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\nnoFill();\nbeginShape();\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape(CLOSE);\n</code>\n</div>\n\n<div>\n<code>\nbeginShape(TRIANGLES);\nvertex(30, 75);\nvertex(40, 20);\nvertex(50, 75);\nvertex(60, 20);\nvertex(70, 75);\nvertex(80, 20);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\nbeginShape();\nvertex(20, 20);\nvertex(40, 20);\nvertex(40, 40);\nvertex(60, 40);\nvertex(60, 60);\nvertex(20, 60);\nendShape(CLOSE);\n</code>\n</div>"],"alt":"white square-shape with black outline in middle-right of canvas.\n4 black points in a square shape in middle-right of canvas.\n2 horizontal black lines. In the top-right and bottom-right of canvas.\n3 line shape with horizontal on top, vertical in middle and horizontal bottom.\nsquare line shape in middle-right of canvas.\n2 white triangle shapes mid-right canvas. left one pointing up and right down.\n5 horizontal interlocking and alternating white triangles in mid-right canvas.\n4 interlocking white triangles in 45 degree rotated square-shape.\n2 white rectangle shapes in mid-right canvas. Both 20x55.\n3 side-by-side white rectangles center rect is smaller in mid-right canvas.\nThick white l-shape with black outline mid-top-left of canvas.","class":"p5","module":"Shape","submodule":"Vertex"},{"file":"src/core/shape/vertex.js","line":267,"description":"<p>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).</p>\n<p>The first time bezierVertex() is used within a <a href=\"#/p5/beginShape\">beginShape()</a>\ncall, it must be prefaced with a call to <a href=\"#/p5/vertex\">vertex()</a> to set the first anchor\npoint. This function must be used between <a href=\"#/p5/beginShape\">beginShape()</a> and <a href=\"#/p5/endShape\">endShape()</a>\nand only when there is no MODE or POINTS parameter specified to\n<a href=\"#/p5/beginShape\">beginShape()</a>.</p>\n","itemtype":"method","name":"bezierVertex","chainable":1,"example":["\n<div>\n<code>\nnoFill();\nbeginShape();\nvertex(30, 20);\nbezierVertex(80, 0, 80, 75, 30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\nbeginShape();\nvertex(30, 20);\nbezierVertex(80, 0, 80, 75, 30, 75);\nbezierVertex(50, 80, 60, 25, 30, 20);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":267,"params":[{"name":"x2","description":"<p>x-coordinate for the first control point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate for the first control point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate for the second control point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate for the second control point</p>\n","type":"Number"},{"name":"x4","description":"<p>x-coordinate for the anchor point</p>\n","type":"Number"},{"name":"y4","description":"<p>y-coordinate for the anchor point</p>\n","type":"Number"}],"chainable":1},{"line":349,"params":[{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>z-coordinate for the first control point (for WebGL mode)</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>z-coordinate for the second control point (for WebGL mode)</p>\n","type":"Number"},{"name":"x4","description":"","type":"Number"},{"name":"y4","description":"","type":"Number"},{"name":"z4","description":"<p>z-coordinate for the anchor point (for WebGL mode)</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/vertex.js","line":389,"description":"<p>Specifies vertex coordinates for curves. This function may only\nbe used between <a href=\"#/p5/beginShape\">beginShape()</a> and <a href=\"#/p5/endShape\">endShape()</a> and only when there\nis no MODE parameter specified to <a href=\"#/p5/beginShape\">beginShape()</a>.\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.</p>\n<p>The first and last points in a series of curveVertex() lines will be used to\nguide the beginning and end of a the curve. A minimum of four\npoints is required to draw a tiny curve between the second and\nthird points. Adding a fifth point with curveVertex() will draw\nthe curve between the second, third, and fourth points. The\ncurveVertex() function is an implementation of Catmull-Rom\nsplines.</p>\n","itemtype":"method","name":"curveVertex","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"Upside-down u-shape line, mid canvas. left point extends beyond canvas view.","class":"p5","module":"Shape","submodule":"Vertex","overloads":[{"line":389,"params":[{"name":"x","description":"<p>x-coordinate of the vertex</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the vertex</p>\n","type":"Number"}],"chainable":1},{"line":434,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"<p>z-coordinate of the vertex (for WebGL mode)</p>\n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/core/shape/vertex.js","line":498,"description":"<p>Use the <a href=\"#/p5/beginContour\">beginContour()</a> and <a href=\"#/p5/endContour\">endContour()</a> functions to create negative\nshapes within shapes such as the center of the letter 'O'. <a href=\"#/p5/beginContour\">beginContour()</a>\nbegins recording vertices for the shape and <a href=\"#/p5/endContour\">endContour()</a> 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.</p>\n<p>These functions can only be used within a <a href=\"#/p5/beginShape\">beginShape()</a>/<a href=\"#/p5/endShape\">endShape()</a> pair and\ntransformations such as <a href=\"#/p5/translate\">translate()</a>, <a href=\"#/p5/rotate\">rotate()</a>, and <a href=\"#/p5/scale\">scale()</a> do not work\nwithin a <a href=\"#/p5/beginContour\">beginContour()</a>/<a href=\"#/p5/endContour\">endContour()</a> pair. It is also not possible to use\nother shapes, such as <a href=\"#/p5/ellipse\">ellipse()</a> or <a href=\"#/p5/rect\">rect()</a> within.</p>\n","itemtype":"method","name":"endContour","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"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":557,"description":"<p>The <a href=\"#/p5/endShape\">endShape()</a> function is the companion to <a href=\"#/p5/beginShape\">beginShape()</a> and may only be\ncalled after <a href=\"#/p5/beginShape\">beginShape()</a>. When <a href=\"#/p5/endshape\">endShape()</a> is called, all of image data\ndefined since the previous call to <a href=\"#/p5/beginShape\">beginShape()</a> is written into the image\nbuffer. The constant CLOSE as the value for the MODE parameter to close\nthe shape (to connect the beginning and the end).</p>\n","itemtype":"method","name":"endShape","params":[{"name":"mode","description":"<p>use CLOSE to close the shape</p>\n","type":"Constant","optional":true}],"chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"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":642,"description":"<p>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 <a href=\"#/p5/beginShape\">beginShape()</a> call, it\nmust be prefaced with a call to <a href=\"#/p5/vertex\">vertex()</a> 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).</p>\n<p>This function must be used between <a href=\"#/p5/beginShape\">beginShape()</a> and <a href=\"#/p5/endShape\">endShape()</a>\nand only when there is no MODE or POINTS parameter specified to\n<a href=\"#/p5/beginShape\">beginShape()</a>.</p>\n","itemtype":"method","name":"quadraticVertex","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":642,"params":[{"name":"cx","description":"<p>x-coordinate for the control point</p>\n","type":"Number"},{"name":"cy","description":"<p>y-coordinate for the control point</p>\n","type":"Number"},{"name":"x3","description":"<p>x-coordinate for the anchor point</p>\n","type":"Number"},{"name":"y3","description":"<p>y-coordinate for the anchor point</p>\n","type":"Number"}],"chainable":1},{"line":707,"params":[{"name":"cx","description":"","type":"Number"},{"name":"cy","description":"","type":"Number"},{"name":"cz","description":"<p>z-coordinate for the control point (for WebGL mode)</p>\n","type":"Number"},{"name":"x3","description":"","type":"Number"},{"name":"y3","description":"","type":"Number"},{"name":"z3","description":"<p>z-coordinate for the anchor point (for WebGL mode)</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/core/shape/vertex.js","line":800,"description":"<p>All shapes are constructed by connecting a series of vertices. <a href=\"#/p5/vertex\">vertex()</a>\nis used to specify the vertex coordinates for points, lines, triangles,\nquads, and polygons. It is used exclusively within the <a href=\"#/p5/beginShape\">beginShape()</a> and\n<a href=\"#/p5/endShape\">endShape()</a> functions.</p>\n","itemtype":"method","name":"vertex","chainable":1,"example":["\n<div>\n<code>\nstrokeWeight(3);\nbeginShape(POINTS);\nvertex(30, 20);\nvertex(85, 20);\nvertex(85, 75);\nvertex(30, 75);\nendShape();\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":800,"params":[{"name":"x","description":"<p>x-coordinate of the vertex</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the vertex</p>\n","type":"Number"}],"chainable":1},{"line":931,"params":[{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"<p>z-coordinate of the vertex</p>\n","type":"Number"},{"name":"u","description":"<p>the vertex's texture u-coordinate</p>\n","type":"Number","optional":true},{"name":"v","description":"<p>the vertex's texture v-coordinate</p>\n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/core/constants.js","line":10,"description":"<p>The default, two-dimensional renderer.</p>\n","itemtype":"property","name":"P2D","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":16,"description":"<p>One of the two render modes in p5.js: P2D (default renderer) and WEBGL\nEnables 3D render by introducing the third dimension: Z</p>\n","itemtype":"property","name":"WEBGL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":25,"itemtype":"property","name":"ARROW","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":30,"itemtype":"property","name":"CROSS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":35,"itemtype":"property","name":"HAND","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":40,"itemtype":"property","name":"MOVE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":45,"itemtype":"property","name":"TEXT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":50,"itemtype":"property","name":"WAIT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":58,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"HALF_PI","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, HALF_PI);\n</code></div>"],"alt":"80x80 white quarter-circle with curve toward bottom right of canvas.","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":76,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"PI","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, PI);\n</code></div>"],"alt":"white half-circle with curve toward bottom of canvas.","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":94,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"QUARTER_PI","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, QUARTER_PI);\n</code></div>"],"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":112,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"TAU","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, TAU);\n</code></div>"],"alt":"80x80 white ellipse shape in center of canvas.","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":130,"description":"<p>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 <a href=\"#/p5/sin\">sin()</a> and <a href=\"#/p5/cos\">cos()</a>.</p>\n","itemtype":"property","name":"TWO_PI","type":"Number","final":1,"example":["\n<div><code>\narc(50, 50, 80, 80, 0, TWO_PI);\n</code></div>"],"alt":"80x80 white ellipse shape in center of canvas.","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":148,"description":"<p>Constant to be used with <a href=\"#/p5/angleMode\">angleMode()</a> function, to set the mode which\np5.js interprates and calculates angles (either DEGREES or RADIANS).</p>\n","itemtype":"property","name":"DEGREES","type":"String","final":1,"example":["\n<div class='norender'><code>\nfunction setup() {\n  angleMode(DEGREES);\n}\n</code></div>"],"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":162,"description":"<p>Constant to be used with <a href=\"#/p5/angleMode\">angleMode()</a> function, to set the mode which\np5.js interprates and calculates angles (either RADIANS or DEGREES).</p>\n","itemtype":"property","name":"RADIANS","type":"String","final":1,"example":["\n<div class='norender'><code>\nfunction setup() {\n  angleMode(RADIANS);\n}\n</code></div>"],"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":180,"itemtype":"property","name":"CORNER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":185,"itemtype":"property","name":"CORNERS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":190,"itemtype":"property","name":"RADIUS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":195,"itemtype":"property","name":"RIGHT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":200,"itemtype":"property","name":"LEFT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":205,"itemtype":"property","name":"CENTER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":210,"itemtype":"property","name":"TOP","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":215,"itemtype":"property","name":"BOTTOM","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":220,"itemtype":"property","name":"BASELINE","type":"String","final":1,"default":"alphabetic","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":226,"itemtype":"property","name":"POINTS","type":"Number","final":1,"default":"0x0000","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":232,"itemtype":"property","name":"LINES","type":"Number","final":1,"default":"0x0001","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":238,"itemtype":"property","name":"LINE_STRIP","type":"Number","final":1,"default":"0x0003","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":244,"itemtype":"property","name":"LINE_LOOP","type":"Number","final":1,"default":"0x0002","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":250,"itemtype":"property","name":"TRIANGLES","type":"Number","final":1,"default":"0x0004","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":256,"itemtype":"property","name":"TRIANGLE_FAN","type":"Number","final":1,"default":"0x0006","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":262,"itemtype":"property","name":"TRIANGLE_STRIP","type":"Number","final":1,"default":"0x0005","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":268,"itemtype":"property","name":"QUADS","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":273,"itemtype":"property","name":"QUAD_STRIP","type":"String","final":1,"default":"quad_strip","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":279,"itemtype":"property","name":"TESS","type":"String","final":1,"default":"tess","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":285,"itemtype":"property","name":"CLOSE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":290,"itemtype":"property","name":"OPEN","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":295,"itemtype":"property","name":"CHORD","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":300,"itemtype":"property","name":"PIE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":305,"itemtype":"property","name":"PROJECT","type":"String","final":1,"default":"square","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":311,"itemtype":"property","name":"SQUARE","type":"String","final":1,"default":"butt","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":317,"itemtype":"property","name":"ROUND","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":322,"itemtype":"property","name":"BEVEL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":327,"itemtype":"property","name":"MITER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":334,"itemtype":"property","name":"RGB","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":339,"description":"<p>HSB (hue, saturation, brightness) is a type of color model.\nYou can learn more about it at\n<a href=\"https://learnui.design/blog/the-hsb-color-system-practicioners-primer.html\">HSB</a>.</p>\n","itemtype":"property","name":"HSB","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":348,"itemtype":"property","name":"HSL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":355,"description":"<p>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 <a href=\"/#/p5.Element/size\">size</a> function as AUTO, at a time.</p>\n","itemtype":"property","name":"AUTO","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":365,"itemtype":"property","name":"ALT","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":371,"itemtype":"property","name":"BACKSPACE","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":376,"itemtype":"property","name":"CONTROL","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":381,"itemtype":"property","name":"DELETE","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":386,"itemtype":"property","name":"DOWN_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":391,"itemtype":"property","name":"ENTER","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":396,"itemtype":"property","name":"ESCAPE","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":401,"itemtype":"property","name":"LEFT_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":406,"itemtype":"property","name":"OPTION","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":411,"itemtype":"property","name":"RETURN","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":416,"itemtype":"property","name":"RIGHT_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":421,"itemtype":"property","name":"SHIFT","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":426,"itemtype":"property","name":"TAB","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":431,"itemtype":"property","name":"UP_ARROW","type":"Number","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":438,"itemtype":"property","name":"BLEND","type":"String","final":1,"default":"source-over","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":444,"itemtype":"property","name":"REMOVE","type":"String","final":1,"default":"destination-out","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":450,"itemtype":"property","name":"ADD","type":"String","final":1,"default":"lighter","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":458,"itemtype":"property","name":"DARKEST","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":463,"itemtype":"property","name":"LIGHTEST","type":"String","final":1,"default":"lighten","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":469,"itemtype":"property","name":"DIFFERENCE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":474,"itemtype":"property","name":"SUBTRACT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":479,"itemtype":"property","name":"EXCLUSION","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":484,"itemtype":"property","name":"MULTIPLY","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":489,"itemtype":"property","name":"SCREEN","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":494,"itemtype":"property","name":"REPLACE","type":"String","final":1,"default":"copy","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":500,"itemtype":"property","name":"OVERLAY","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":505,"itemtype":"property","name":"HARD_LIGHT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":510,"itemtype":"property","name":"SOFT_LIGHT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":515,"itemtype":"property","name":"DODGE","type":"String","final":1,"default":"color-dodge","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":521,"itemtype":"property","name":"BURN","type":"String","final":1,"default":"color-burn","class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":529,"itemtype":"property","name":"THRESHOLD","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":534,"itemtype":"property","name":"GRAY","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":539,"itemtype":"property","name":"OPAQUE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":544,"itemtype":"property","name":"INVERT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":549,"itemtype":"property","name":"POSTERIZE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":554,"itemtype":"property","name":"DILATE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":559,"itemtype":"property","name":"ERODE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":564,"itemtype":"property","name":"BLUR","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":571,"itemtype":"property","name":"NORMAL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":576,"itemtype":"property","name":"ITALIC","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":581,"itemtype":"property","name":"BOLD","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":586,"itemtype":"property","name":"BOLDITALIC","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":598,"itemtype":"property","name":"LINEAR","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":603,"itemtype":"property","name":"QUADRATIC","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":608,"itemtype":"property","name":"BEZIER","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":613,"itemtype":"property","name":"CURVE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":620,"itemtype":"property","name":"STROKE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":625,"itemtype":"property","name":"FILL","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":630,"itemtype":"property","name":"TEXTURE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":635,"itemtype":"property","name":"IMMEDIATE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":643,"itemtype":"property","name":"IMAGE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":651,"itemtype":"property","name":"NEAREST","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":656,"itemtype":"property","name":"REPEAT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":661,"itemtype":"property","name":"CLAMP","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":666,"itemtype":"property","name":"MIRROR","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":673,"itemtype":"property","name":"LANDSCAPE","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":678,"itemtype":"property","name":"PORTRAIT","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":688,"itemtype":"property","name":"GRID","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/constants.js","line":694,"itemtype":"property","name":"AXES","type":"String","final":1,"class":"p5","module":"Constants","submodule":"Constants"},{"file":"src/core/environment.js","line":20,"description":"<p>The <a href=\"#/p5/print\">print()</a> function writes to the console area of\nyour browser. This function is often helpful for looking at the data a program\nis producing. This function creates a new line of text for each call to\nthe function. Individual elements can be separated with quotes (\"\") and joined\nwith the addition operator (+).</p>\n<p>Note that calling print() without any arguments invokes the window.print()\nfunction which opens the browser's print dialog. To print a blank line\nto console you can write print('\\n').</p>\n","itemtype":"method","name":"print","params":[{"name":"contents","description":"<p>any combination of Number, String, Object, Boolean,\n                      Array to print</p>\n","type":"Any"}],"example":["\n<div><code class='norender'>\nlet x = 10;\nprint('The value of x is ' + x);\n// prints \"The value of x is 10\"\n</code></div>"],"alt":"default grey canvas","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":52,"description":"<p>The system variable <a href=\"#/p5/frameCount\">frameCount</a> contains the\nnumber of frames that have been displayed since the program started. Inside\n<a href=\"#/p5/setup\">setup()</a> the value is 0, after the first iteration\nof draw it is 1, etc.</p>\n","itemtype":"property","name":"frameCount","type":"Integer","readonly":"","example":["\n<div><code>\nfunction setup() {\n  frameRate(30);\n  textSize(30);\n  textAlign(CENTER);\n}\n\nfunction draw() {\n  background(200);\n  text(frameCount, width / 2, height / 2);\n}\n</code></div>"],"alt":"numbers rapidly counting upward with frame count set to 30.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":79,"description":"<p>The system variable <a href=\"#/p5/deltaTime\">deltaTime</a> contains the time\ndifference between the beginning of the previous frame and the beginning\nof the current frame in milliseconds.</p>\n<p>This variable is useful for creating time sensitive animation or physics\ncalculation that should stay constant regardless of frame rate.</p>\n","itemtype":"property","name":"deltaTime","type":"Integer","readonly":"","example":["\n<div><code>\nlet rectX = 0;\nlet fr = 30; //starting FPS\nlet clr;\n\nfunction setup() {\n  background(200);\n  frameRate(fr); // Attempt to refresh at starting FPS\n  clr = color(255, 0, 0);\n}\n\nfunction draw() {\n  background(200);\n  rectX = rectX + 1 * (deltaTime / 50); // Move Rectangle in relation to deltaTime\n\n  if (rectX >= width) {\n    // If you go off screen.\n    if (fr === 30) {\n      clr = color(0, 0, 255);\n      fr = 10;\n      frameRate(fr); // make frameRate 10 FPS\n    } else {\n      clr = color(255, 0, 0);\n      fr = 30;\n      frameRate(fr); // make frameRate 30 FPS\n    }\n    rectX = 0;\n  }\n  fill(clr);\n  rect(rectX, 40, 20, 20);\n}\n</code></div>"],"alt":"red rect moves left to right, followed by blue rect moving at the same speed\nwith a lower frame rate. Loops.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":129,"description":"<p>Confirms if the window a p5.js program is in is \"focused,\" meaning that\nthe sketch will accept mouse or keyboard input. This variable is\n\"true\" if the window is focused and \"false\" if not.</p>\n","itemtype":"property","name":"focused","type":"Boolean","readonly":"","example":["\n<div><code>\n// To demonstrate, put two windows side by side.\n// Click on the window that the p5 sketch isn't in!\nfunction draw() {\n  background(200);\n  noStroke();\n  fill(0, 200, 0);\n  ellipse(25, 25, 50, 50);\n\n  if (!focused) {\n   // or \"if (focused === false)\"\n    stroke(200, 0, 0);\n    line(0, 0, 100, 100);\n    line(100, 0, 0, 100);\n  }\n}\n</code></div>"],"alt":"green 50x50 ellipse at top left. Red X covers canvas when page focus changes","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":160,"description":"<p>Sets the cursor to a predefined symbol or an image, or makes it visible\nif already hidden. If you are trying to set an image as the cursor, the\nrecommended size is 16x16 or 32x32 pixels. The values for parameters x and y\nmust be less than the dimensions of the image.</p>\n","itemtype":"method","name":"cursor","params":[{"name":"type","description":"<p>Built-In: either ARROW, CROSS, HAND, MOVE, TEXT and WAIT\n                              Native CSS properties: 'grab', 'progress', 'cell' etc.\n                              External: path for cursor's images\n                              (Allowed File extensions: .cur, .gif, .jpg, .jpeg, .png)\n                              For more information on Native CSS cursors and url visit:\n                              <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/cursor\">https://developer.mozilla.org/en-US/docs/Web/CSS/cursor</a></p>\n","type":"String|Constant"},{"name":"x","description":"<p>the horizontal active spot of the cursor (must be less than 32)</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>the vertical active spot of the cursor (must be less than 32)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\n// Move the mouse across the quadrants\n// to see the cursor change\nfunction draw() {\n  line(width / 2, 0, width / 2, height);\n  line(0, height / 2, width, height / 2);\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</code></div>"],"alt":"canvas is divided into four quadrants. cursor on first is a cross, second is a progress,\nthird is a custom cursor using path to the cursor and fourth is a grab.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":228,"description":"<p>Specifies the number of frames to be displayed every second. For example,\nthe function call frameRate(30) will attempt to refresh 30 times a second.\nIf the processor is not fast enough to maintain the specified rate, the\nframe rate will not be achieved. Setting the frame rate within \n<a href=\"#/p5/setup\">setup()</a> is recommended. The default frame rate is\nbased on the frame rate of the display (here also called \"refresh rate\"), \nwhich is set to 60 frames per second on most computers. A frame rate of 24\nframes per second (usual for movies) or above will be enough for smooth \nanimations. This is the same as setFrameRate(val).</p>\n<p>Calling <a href=\"#/p5/frameRate\">frameRate()</a> with no arguments returns\nthe current framerate. The draw function must run at least once before it will\nreturn a value. This is the same as <a href=\"#/p5/getFrameRate\">getFrameRate()</a>.</p>\n<p>Calling <a href=\"#/p5/frameRate\">frameRate()</a> with arguments that are not\nof the type numbers or are non positive also returns current framerate.</p>\n","itemtype":"method","name":"frameRate","chainable":1,"example":["\n\n<div><code>\nlet rectX = 0;\nlet fr = 30; //starting FPS\nlet clr;\n\nfunction setup() {\n  background(200);\n  frameRate(fr); // Attempt to refresh at starting FPS\n  clr = color(255, 0, 0);\n}\n\nfunction draw() {\n  background(200);\n  rectX = rectX += 1; // Move Rectangle\n\n  if (rectX >= width) {\n   // If you go off screen.\n    if (fr === 30) {\n      clr = color(0, 0, 255);\n      fr = 10;\n      frameRate(fr); // make frameRate 10 FPS\n    } else {\n      clr = color(255, 0, 0);\n      fr = 30;\n      frameRate(fr); // make frameRate 30 FPS\n    }\n    rectX = 0;\n  }\n  fill(clr);\n  rect(rectX, 40, 20, 20);\n}\n</code></div>"],"alt":"blue rect moves left to right, followed by red rect moving faster. Loops.","class":"p5","module":"Environment","submodule":"Environment","overloads":[{"line":228,"params":[{"name":"fps","description":"<p>number of frames to be displayed every second</p>\n","type":"Number"}],"chainable":1},{"line":288,"params":[],"return":{"description":"current frameRate","type":"Number"}}]},{"file":"src/core/environment.js","line":331,"description":"<p>Hides the cursor from view.</p>\n","itemtype":"method","name":"noCursor","example":["\n<div><code>\nfunction setup() {\n  noCursor();\n}\n\nfunction draw() {\n  background(200);\n  ellipse(mouseX, mouseY, 10, 10);\n}\n</code></div>"],"alt":"cursor becomes 10x 10 white ellipse the moves with mouse x and y.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":354,"description":"<p>System variable that stores the width of the screen display according to The\ndefault <a href=\"#/p5/pixelDensity\">pixelDensity</a>. This is used to run a\nfull-screen program on any display size. To return actual screen size,\nmultiply this by pixelDensity.</p>\n","itemtype":"property","name":"displayWidth","type":"Number","readonly":"","example":["\n<div class=\"norender\"><code>\ncreateCanvas(displayWidth, displayHeight);\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":372,"description":"<p>System variable that stores the height of the screen display according to The\ndefault <a href=\"#/p5/pixelDensity\">pixelDensity</a>. This is used to run a\nfull-screen program on any display size. To return actual screen size,\nmultiply this by pixelDensity.</p>\n","itemtype":"property","name":"displayHeight","type":"Number","readonly":"","example":["\n<div class=\"norender\"><code>\ncreateCanvas(displayWidth, displayHeight);\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":390,"description":"<p>System variable that stores the width of the inner window, it maps to\nwindow.innerWidth.</p>\n","itemtype":"property","name":"windowWidth","type":"Number","readonly":"","example":["\n<div class=\"norender\"><code>\ncreateCanvas(windowWidth, windowHeight);\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":405,"description":"<p>System variable that stores the height of the inner window, it maps to\nwindow.innerHeight.</p>\n","itemtype":"property","name":"windowHeight","type":"Number","readonly":"","example":["\n<div class=\"norender\"><code>\ncreateCanvas(windowWidth, windowHeight);\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":421,"description":"<p>The <a href=\"#/p5/windowResized\">windowResized()</a> function is called once\nevery time the browser window is resized. This is a good place to resize the\ncanvas or do any other adjustments to accommodate the new window size.</p>\n","itemtype":"method","name":"windowResized","example":["\n<div class=\"norender\"><code>\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</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":475,"description":"<p>System variable that stores the width of the drawing canvas. This value\nis set by the first parameter of the <a href=\"#/p5/createCanvas\">createCanvas()</a> function.\nFor example, the function call createCanvas(320, 240) sets the width\nvariable to the value 320. The value of width defaults to 100 if\n<a href=\"#/p5/createCanvas\">createCanvas()</a> is not used in a program.</p>\n","itemtype":"property","name":"width","type":"Number","readonly":"","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":487,"description":"<p>System variable that stores the height of the drawing canvas. This value\nis set by the second parameter of the <a href=\"#/p5/createCanvas\">createCanvas()</a> function. For\nexample, the function call createCanvas(320, 240) sets the height\nvariable to the value 240. The value of height defaults to 100 if\n<a href=\"#/p5/createCanvas\">createCanvas()</a> is not used in a program.</p>\n","itemtype":"property","name":"height","type":"Number","readonly":"","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":499,"description":"<p>If argument is given, sets the sketch to fullscreen or not based on the\nvalue of the argument. If no argument is given, returns the current\nfullscreen state. Note that due to browser restrictions this can only\nbe called on user input, for example, on mouse press like the example\nbelow.</p>\n","itemtype":"method","name":"fullscreen","params":[{"name":"val","description":"<p>whether the sketch should be in fullscreen mode\nor not</p>\n","type":"Boolean","optional":true}],"return":{"description":"current fullscreen state","type":"Boolean"},"example":["\n<div>\n<code>\n// Clicking in the box toggles fullscreen on and off.\nfunction setup() {\n  background(200);\n}\nfunction mousePressed() {\n  if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n    let fs = fullscreen();\n    fullscreen(!fs);\n  }\n}\n</code>\n</div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":549,"description":"<p>Sets the pixel scaling for high pixel density displays. By default\npixel density is set to match display density, call pixelDensity(1)\nto turn this off. Calling <a href=\"#/p5/pixelDensity\">pixelDensity()</a> with no arguments returns\nthe current pixel density of the sketch.</p>\n","itemtype":"method","name":"pixelDensity","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  pixelDensity(1);\n  createCanvas(100, 100);\n  background(200);\n  ellipse(width / 2, height / 2, 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  pixelDensity(3.0);\n  createCanvas(100, 100);\n  background(200);\n  ellipse(width / 2, height / 2, 50, 50);\n}\n</code>\n</div>"],"alt":"fuzzy 50x50 white ellipse with black outline in center of canvas.\nsharp 50x50 white ellipse with black outline in center of canvas.","class":"p5","module":"Environment","submodule":"Environment","overloads":[{"line":549,"params":[{"name":"val","description":"<p>whether or how much the sketch should scale</p>\n","type":"Number"}],"chainable":1},{"line":585,"params":[],"return":{"description":"current pixel density of the sketch","type":"Number"}}]},{"file":"src/core/environment.js","line":604,"description":"<p>Returns the pixel density of the current display the sketch is running on.</p>\n","itemtype":"method","name":"displayDensity","return":{"description":"current pixel density of the display","type":"Number"},"example":["\n<div>\n<code>\nfunction setup() {\n  let density = displayDensity();\n  pixelDensity(density);\n  createCanvas(100, 100);\n  background(200);\n  ellipse(width / 2, height / 2, 50, 50);\n}\n</code>\n</div>"],"alt":"50x50 white ellipse with black outline in center of canvas.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":659,"description":"<p>Gets the current URL.</p>\n","itemtype":"method","name":"getURL","return":{"description":"url","type":"String"},"example":["\n<div>\n<code>\nlet url;\nlet x = 100;\n\nfunction setup() {\n  fill(0);\n  noStroke();\n  url = getURL();\n}\n\nfunction draw() {\n  background(200);\n  text(url, x, height / 2);\n  x--;\n}\n</code>\n</div>"],"alt":"current url (http://p5js.org/reference/#/p5/getURL) moves right to left.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":687,"description":"<p>Gets the current URL path as an array.</p>\n","itemtype":"method","name":"getURLPath","return":{"description":"path components","type":"String[]"},"example":["\n<div class='norender'><code>\nfunction setup() {\n  let urlPath = getURLPath();\n  for (let i = 0; i < urlPath.length; i++) {\n    text(urlPath[i], 10, i * 20 + 20);\n  }\n}\n</code></div>"],"alt":"This example does not render anything.","class":"p5","module":"Environment","submodule":"Environment"},{"file":"src/core/environment.js","line":706,"description":"<p>Gets the current URL params as an Object.</p>\n","itemtype":"method","name":"getURLParams","return":{"description":"URL params","type":"Object"},"example":["\n<div class='norender notest'>\n<code>\n// Example: http://p5js.org?year=2014&month=May&day=15\n\nfunction setup() {\n  let params = getURLParams();\n  text(params.day, 10, 20);\n  text(params.month, 10, 40);\n  text(params.year, 10, 60);\n}\n</code>\n</div>"],"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":27,"description":"<p>Set up our translation function, with loaded languages</p>\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":42,"description":"<p>Called directly before <a href=\"#/p5/setup\">setup()</a>, the <a href=\"#/p5/preload\">preload()</a> function is used to handle\nasynchronous loading of external files in a blocking way. If a preload\nfunction is defined, <a href=\"#/p5/setup\">setup()</a> will wait until any load calls within have\nfinished. Nothing besides load calls (<a href=\"#/p5/loadImage\">loadImage</a>, <a href=\"#/p5/loadJSON\">loadJSON</a>, <a href=\"#/p5/loadFont\">loadFont</a>,\n<a href=\"#/p5/loadStrings\">loadStrings</a>, etc.) should be inside the preload function. If asynchronous\nloading is preferred, the load methods can instead be called in <a href=\"#/p5/setup\">setup()</a>\nor anywhere else with the use of a callback parameter.</p>\n<p>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 <a href=\"http://bit.ly/2kQ6Nio\">here</a>.</p>\n","itemtype":"method","name":"preload","example":["\n<div><code>\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</code></div>"],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":83,"description":"<p>The <a href=\"#/p5/setup\">setup()</a> 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 <a href=\"#/p5/setup\">setup()</a> function for each program and it shouldn't\nbe called again after its initial execution.</p>\n<p>Note: Variables declared within <a href=\"#/p5/setup\">setup()</a> are not accessible within other\nfunctions, including <a href=\"#/p5/draw\">draw()</a>.</p>\n","itemtype":"method","name":"setup","example":["\n<div><code>\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</code></div>"],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":114,"description":"<p>Called directly after <a href=\"#/p5/setup\">setup()</a>, the <a href=\"#/p5/draw\">draw()</a> function continuously executes\nthe lines of code contained inside its block until the program is stopped\nor <a href=\"#/p5/noLoop\">noLoop()</a> is called. Note if <a href=\"#/p5/noLoop\">noLoop()</a> is called in <a href=\"#/p5/setup\">setup()</a>, <a href=\"#/p5/draw\">draw()</a> will\nstill be executed once before stopping. <a href=\"#/p5/draw\">draw()</a> is called automatically and\nshould never be called explicitly.</p>\n<p>It should always be controlled with <a href=\"#/p5/noLoop\">noLoop()</a>, <a href=\"#/p5/redraw\">redraw()</a> and <a href=\"#/p5/loop\">loop()</a>. After\n<a href=\"#/p5/noLoop\">noLoop()</a> stops the code in <a href=\"#/p5/draw\">draw()</a> from executing, <a href=\"#/p5/redraw\">redraw()</a> causes the\ncode inside <a href=\"#/p5/draw\">draw()</a> to execute once, and <a href=\"#/p5/loop\">loop()</a> will cause the code\ninside <a href=\"#/p5/draw\">draw()</a> to resume executing continuously.</p>\n<p>The number of times <a href=\"#/p5/draw\">draw()</a> executes in each second may be controlled with\nthe <a href=\"#/p5/frameRate\">frameRate()</a> function.</p>\n<p>There can only be one <a href=\"#/p5/draw\">draw()</a> function for each sketch, and <a href=\"#/p5/draw\">draw()</a> must\nexist if you want the code to run continuously, or to process events such\nas <a href=\"#/p5/mousePressed\">mousePressed()</a>. Sometimes, you might have an empty call to <a href=\"#/p5/draw\">draw()</a> in\nyour program, as shown in the above example.</p>\n<p>It is important to note that the drawing coordinate system will be reset\nat the beginning of each <a href=\"#/p5/draw\">draw()</a> call. If any transformations are performed\nwithin <a href=\"#/p5/draw\">draw()</a> (ex: scale, rotate, translate), their effects will be\nundone at the beginning of <a href=\"#/p5/draw\">draw()</a>, so transformations will not accumulate\nover time. On the other hand, styling applied (ex: fill, stroke, etc) will\nremain in effect.</p>\n","itemtype":"method","name":"draw","example":["\n<div><code>\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</code></div>"],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":411,"description":"<p>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.</p>\n","itemtype":"method","name":"remove","example":["\n<div class='norender'><code>\nfunction draw() {\n  ellipse(50, 50, 10, 10);\n}\n\nfunction mousePressed() {\n  remove(); // remove whole sketch on mouse press\n}\n</code></div>"],"alt":"nothing displayed","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/main.js","line":683,"description":"<p>Allows for the friendly error system (FES) to be turned off when creating a sketch,\nwhich can give a significant boost to performance when needed.\nSee <a href='https://github.com/processing/p5.js/wiki/Optimizing-p5.js-Code-for-Performance#disable-the-friendly-error-system-fes'>\ndisabling the friendly error system</a>.</p>\n","itemtype":"property","name":"disableFriendlyErrors","type":"Boolean","example":["\n<div class=\"norender notest\"><code>\np5.disableFriendlyErrors = true;\n\nfunction setup() {\n  createCanvas(100, 50);\n}\n</code></div>"],"class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/p5.Element.js","line":21,"description":"<p>Underlying HTML element. All normal HTML methods can be called on this.</p>\n","example":["\n<div>\n<code>\nfunction setup() {\n  let c = createCanvas(50, 50);\n  c.elt.style.border = '5px solid red';\n}\n\nfunction draw() {\n  background(220);\n}\n</code>\n</div>"],"itemtype":"property","name":"elt","readonly":"","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":47,"description":"<p>Attaches the element to the parent specified. A way of setting\n the container for the element. Accepts either a string ID, DOM\n node, or <a href=\"#/p5.Element\">p5.Element</a>. If no arguments given, parent node is returned.\n For more ways to position the canvas, see the\n <a href='https://github.com/processing/p5.js/wiki/Positioning-your-canvas'>\n positioning the canvas</a> wiki page.</p>\n","itemtype":"method","name":"parent","chainable":1,"example":["\n <div class=\"norender notest\"><code>\n // Add the following comment to html file.\n // &lt;div id=\"myContainer\">&lt;/div>\n// The js code\n let cnv = createCanvas(100, 100);\n cnv.parent('myContainer');\n </code></div>\n<div class='norender'><code>\n let div0 = createDiv('this is the parent');\n let div1 = createDiv('this is the child');\n div1.parent(div0); // use p5.Element\n </code></div>\n<div class='norender'><code>\n let div0 = createDiv('this is the parent');\n div0.id('apples');\n let div1 = createDiv('this is the child');\n div1.parent('apples'); // use id\n </code></div>\n<div class='norender notest'><code>\n let elt = document.getElementById('myParentDiv');\n let div1 = createDiv('this is the child');\n div1.parent(elt); // use element from page\n </code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":47,"params":[{"name":"parent","description":"<p>the ID, DOM node, or <a href=\"#/p5.Element\">p5.Element</a>\n                         of desired parent element</p>\n","type":"String|p5.Element|Object"}],"chainable":1},{"line":93,"params":[],"return":{"description":"","type":"p5.Element"}}]},{"file":"src/core/p5.Element.js","line":114,"description":"<p>Sets the ID of the element. If no ID argument is passed in, it instead\n returns the current ID of the element.\n Note that only one element can have a particular id in a page.\n The <a href=\"#/p5.Element/class\">.class()</a> function can be used\n to identify multiple elements with the same class name.</p>\n","itemtype":"method","name":"id","chainable":1,"example":["\n <div class='norender'><code>\n function setup() {\n   let cnv = createCanvas(100, 100);\n   // Assigns a CSS selector ID to\n   // the canvas element.\n   cnv.id('mycanvas');\n }\n </code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":114,"params":[{"name":"id","description":"<p>ID of the element</p>\n","type":"String"}],"chainable":1},{"line":139,"params":[],"return":{"description":"the id of the element","type":"String"}}]},{"file":"src/core/p5.Element.js","line":154,"description":"<p>Adds given class to the element. If no class argument is passed in, it\n instead returns a string containing the current class(es) of the element.</p>\n","itemtype":"method","name":"class","chainable":1,"example":["\n <div class='norender'><code>\n function setup() {\n   let cnv = createCanvas(100, 100);\n   // Assigns a CSS selector class 'small'\n   // to the canvas element.\n   cnv.class('small');\n }\n </code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":154,"params":[{"name":"class","description":"<p>class to add</p>\n","type":"String"}],"chainable":1},{"line":176,"params":[],"return":{"description":"the class of the element","type":"String"}}]},{"file":"src/core/p5.Element.js","line":189,"description":"<p>The .<a href=\"#/p5.Element/mousePressed\">mousePressed()</a> function is called\nonce after every time a mouse button is pressed over the element. Some mobile\nbrowsers may also trigger this event on a touch screen, if the user performs\na quick tap. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"mousePressed","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               pressed over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mousePressed(changeGray); // attach listener for\n  // canvas click only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any click anywhere\nfunction mousePressed() {\n  d = d + 10;\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":246,"description":"<p>The .<a href=\"#/p5.Element/doubleClicked\">doubleClicked()</a> function is called once after every time a\nmouse button is pressed twice over the element. This can be used to\nattach element and action specific event listeners.</p>\n","itemtype":"method","name":"doubleClicked","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               double clicked over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"return":{"description":"","type":"p5.Element"},"example":["\n<div class='norender'><code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.doubleClicked(changeGray); // attach listener for\n  // canvas double click only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any double click anywhere\nfunction doubleClicked() {\n  d = d + 10;\n}\n\n// this function fires only when cnv is double clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":292,"description":"<p>The <a href=\"#/p5.Element/mouseWheel\">mouseWheel()</a> function is called\nonce after every time a mouse wheel is scrolled over the element. This can\nbe used to attach element specific event listeners.</p>\n<p>The function accepts a callback function as argument which will be executed\nwhen the <code>wheel</code> event is triggered on the element, the callback function is\npassed one argument <code>event</code>. The <code>event.deltaY</code> property returns negative\nvalues if the mouse wheel is rotated up or away from the user and positive\nin the other direction. The <code>event.deltaX</code> does the same as <code>event.deltaY</code>\nexcept it reads the horizontal wheel scroll of the mouse wheel.</p>\n<p>On OS X with \"natural\" scrolling enabled, the <code>event.deltaY</code> values are\nreversed.</p>\n","itemtype":"method","name":"mouseWheel","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               scrolled over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseWheel(changeSize); // attach listener for\n  // activity on canvas only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with mousewheel movement\n// anywhere on screen\nfunction mouseWheel() {\n  g = g + 10;\n}\n\n// this function fires with mousewheel movement\n// over canvas only\nfunction changeSize(event) {\n  if (event.deltaY > 0) {\n    d = d + 10;\n  } else {\n    d = d - 10;\n  }\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":354,"description":"<p>The <a href=\"#/p5.Element/mouseReleased\">mouseReleased()</a> function is\ncalled once after every time a mouse button is released over the element.\nSome mobile browsers may also trigger this event on a touch screen, if the\nuser performs a quick tap. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"mouseReleased","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               released over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseReleased(changeGray); // attach listener for\n  // activity on canvas only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires after the mouse has been\n// released\nfunction mouseReleased() {\n  d = d + 10;\n}\n\n// this function fires after the mouse has been\n// released while on canvas\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":403,"description":"<p>The .<a href=\"#/p5.Element/mouseClicked\">mouseClicked()</a> function is\ncalled once after a mouse button is pressed and released over the element.\nSome mobile browsers may also trigger this event on a touch screen, if the\nuser performs a quick tap.This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"mouseClicked","params":[{"name":"fxn","description":"<p>function to be fired when mouse is\n                               clicked over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet cnv, d, g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseClicked(changeGray); // attach listener for\n  // activity on canvas only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires after the mouse has been\n// clicked anywhere\nfunction mouseClicked() {\n  d = d + 10;\n}\n\n// this function fires after the mouse has been\n// clicked on canvas\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code>\n</div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":454,"description":"<p>The .<a href=\"#/p5.Element/mouseMoved\">mouseMoved()</a> function is called once every time a\nmouse moves over the element. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"mouseMoved","params":[{"name":"fxn","description":"<p>function to be fired when a mouse moves\n                               over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d = 30;\nlet g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseMoved(changeSize); // attach listener for\n  // activity on canvas only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  fill(200);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires when mouse moves anywhere on\n// page\nfunction mouseMoved() {\n  g = g + 5;\n  if (g > 255) {\n    g = 0;\n  }\n}\n\n// this function fires when mouse moves over canvas\nfunction changeSize() {\n  d = d + 2;\n  if (d > 100) {\n    d = 0;\n  }\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":510,"description":"<p>The .<a href=\"#/p5.Element/mouseOver\">mouseOver()</a> function is called once after every time a\nmouse moves onto the element. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"mouseOver","params":[{"name":"fxn","description":"<p>function to be fired when a mouse moves\n                               onto the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseOver(changeGray);\n  d = 10;\n}\n\nfunction draw() {\n  ellipse(width / 2, height / 2, d, d);\n}\n\nfunction changeGray() {\n  d = d + 10;\n  if (d > 100) {\n    d = 0;\n  }\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":551,"description":"<p>The .<a href=\"#/p5.Element/mouseOut\">mouseOut()</a> function is called once after every time a\nmouse moves off the element. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"mouseOut","params":[{"name":"fxn","description":"<p>function to be fired when a mouse\n                               moves off of an element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.mouseOut(changeGray);\n  d = 10;\n}\n\nfunction draw() {\n  ellipse(width / 2, height / 2, d, d);\n}\n\nfunction changeGray() {\n  d = d + 10;\n  if (d > 100) {\n    d = 0;\n  }\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":592,"description":"<p>The .<a href=\"#/p5.Element/touchStarted\">touchStarted()</a> function is called once after every time a touch is\nregistered. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"touchStarted","params":[{"name":"fxn","description":"<p>function to be fired when a touch\n                               starts over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d;\nlet g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.touchStarted(changeGray); // attach listener for\n  // canvas click only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any touch anywhere\nfunction touchStarted() {\n  d = d + 10;\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":639,"description":"<p>The .<a href=\"#/p5.Element/touchMoved\">touchMoved()</a> function is called once after every time a touch move is\nregistered. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"touchMoved","params":[{"name":"fxn","description":"<p>function to be fired when a touch moves over\n                               the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.touchMoved(changeGray); // attach listener for\n  // canvas click only\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":678,"description":"<p>The .<a href=\"#/p5.Element/touchEnded\">touchEnded()</a> function is called once after every time a touch is\nregistered. This can be used to attach element specific event listeners.</p>\n","itemtype":"method","name":"touchEnded","params":[{"name":"fxn","description":"<p>function to be fired when a touch ends\n                               over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\nlet cnv;\nlet d;\nlet g;\nfunction setup() {\n  cnv = createCanvas(100, 100);\n  cnv.touchEnded(changeGray); // attach listener for\n  // canvas click only\n  d = 10;\n  g = 100;\n}\n\nfunction draw() {\n  background(g);\n  ellipse(width / 2, height / 2, d, d);\n}\n\n// this function fires with any touch anywhere\nfunction touchEnded() {\n  d = d + 10;\n}\n\n// this function fires only when cnv is clicked\nfunction changeGray() {\n  g = random(0, 255);\n}\n</code></div>"],"alt":"no display.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":725,"description":"<p>The .<a href=\"#/p5.Element/dragOver\">dragOver()</a> function is called once after every time a\nfile is dragged over the element. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"dragOver","params":[{"name":"fxn","description":"<p>function to be fired when a file is\n                               dragged over the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div><code>\n// To test this sketch, simply drag a\n// file over the canvas\nfunction setup() {\n  let c = createCanvas(100, 100);\n  background(200);\n  textAlign(CENTER);\n  text('Drag file', width / 2, height / 2);\n  c.dragOver(dragOverCallback);\n}\n\n// This function will be called whenever\n// a file is dragged over the canvas\nfunction dragOverCallback() {\n  background(240);\n  text('Dragged over', width / 2, height / 2);\n}\n</code></div>"],"alt":"nothing displayed","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":763,"description":"<p>The .dragLeave() function is called once after every time a\ndragged file leaves the element area. This can be used to attach an\nelement specific event listener.</p>\n","itemtype":"method","name":"dragLeave","params":[{"name":"fxn","description":"<p>function to be fired when a file is\n                               dragged off the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div><code>\n// To test this sketch, simply drag a file\n// over and then out of the canvas area\nfunction setup() {\n  let c = createCanvas(100, 100);\n  background(200);\n  textAlign(CENTER);\n  text('Drag file', width / 2, height / 2);\n  c.dragLeave(dragLeaveCallback);\n}\n\n// This function will be called whenever\n// a file is dragged out of the canvas\nfunction dragLeaveCallback() {\n  background(240);\n  text('Dragged off', width / 2, height / 2);\n}\n</code></div>"],"alt":"nothing displayed","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Element.js","line":827,"description":"<p>Helper fxn for sharing pixel methods</p>\n","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/core/p5.Graphics.js","line":70,"description":"<p>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 <a href='#/p5/draw'>draw()</a> will copy the behavior\nof the standard canvas.</p>\n","itemtype":"method","name":"reset","example":["\n\n<div><code>\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</code></div>"],"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":122,"description":"<p>Removes a Graphics object from the page and frees any resources\nassociated with it.</p>\n","itemtype":"method","name":"remove","example":["\n<div class='norender'><code>\nlet bg;\nfunction setup() {\n  bg = createCanvas(100, 100);\n  bg.background(0);\n  image(bg, 0, 0);\n  bg.remove();\n}\n</code></div>\n\n<div><code>\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</code></div>"],"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.Renderer.js","line":95,"description":"<p>Resize our canvas element.</p>\n","class":"p5.Renderer","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Renderer.js","line":341,"description":"<p>Helper fxn to check font type (system or otf)</p>\n","class":"p5.Renderer","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Renderer.js","line":393,"description":"<p>Helper fxn to measure ascent and descent.\nAdapted from <a href=\"http://stackoverflow.com/a/25355178\">http://stackoverflow.com/a/25355178</a></p>\n","class":"p5.Renderer","module":"Rendering","submodule":"Rendering"},{"file":"src/core/p5.Renderer2D.js","line":7,"description":"<p>p5.Renderer2D\nThe 2D graphics canvas renderer class.\nextends p5.Renderer</p>\n","class":"p5","module":"Rendering"},{"file":"src/core/p5.Renderer2D.js","line":386,"description":"<p>Generate a cubic Bezier representing an arc on the unit circle of total\nangle <code>size</code> radians, beginning <code>start</code> radians above the x-axis. Up to\nfour of these curves are combined to make a full arc.</p>\n<p>See <a href=\"http://www.joecridge.me/bezier.pdf\">www.joecridge.me/bezier.pdf</a> for an explanation of the method.</p>\n","class":"p5","module":"Rendering"},{"file":"src/core/reference.js","line":6,"description":"<p>Creates and names a new variable. A variable is a container for a value.</p>\n<p>Variables that are declared with <a href=\"#/p5/let\">let</a> will have block-scope.\nThis means that the variable only exists within the\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block\">\nblock</a> that it is created within.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let\">the MDN entry</a>:\nDeclares a block scope local variable, optionally initializing it to a value.</p>\n","itemtype":"property","name":"let","example":["\n<div class='norender'>\n<code>\nlet x = 2;\nconsole.log(x); // prints 2 to the console\nx = 1;\nconsole.log(x); // prints 1 to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":33,"description":"<p>Creates and names a new constant. Like a variable created with <a href=\"#/p5/let\">let</a>,\na constant that is created with <a href=\"#/p5/const\">const</a> 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 <code>let</code>, you cannot declare variables without value\nusing const.</p>\n<p>Constants have block-scope. This means that the constant only exists within\nthe <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block\">\nblock</a> that it is created within. A constant cannot be redeclared within a scope in which it\nalready exists.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const\">the MDN entry</a>:\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.</p>\n","itemtype":"property","name":"const","example":["\n<div class='norender'>\n<code>\n// define myFavNumber as a constant and give it the value 7\nconst myFavNumber = 7;\nconsole.log('my favorite number is: ' + myFavNumber);\n</code>\n</div>\n\n<div class='norender'>\n<code>\nconst bigCats = ['lion', 'tiger', 'panther'];\nbigCats.push('leopard');\nconsole.log(bigCats);\n// bigCats = ['cat']; // throws error as re-assigning not allowed for const\n</code>\n</div>\n\n<div class='norender'>\n<code>\nconst wordFrequency = {};\nwordFrequency['hello'] = 2;\nwordFrequency['bye'] = 1;\nconsole.log(wordFrequency);\n// wordFrequency = { 'a': 2, 'b': 3}; // throws error here\n</code>\n</div>"],"alt":"These examples do not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":86,"description":"<p>The strict equality operator <a href=\"#/p5/===\">===</a>\nchecks to see if two values are equal and of the same type.</p>\n<p>A comparison expression always evaluates to a <a href=\"#/p5/boolean\">boolean</a>.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">the MDN entry</a>:\nThe non-identity operator returns true if the operands are not equal and/or not of the same type.</p>\n<p>Note: In some examples around the web you may see a double-equals-sign\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality\">==</a>,\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.</p>\n","itemtype":"property","name":"===","example":["\n<div class='norender'>\n<code>\nconsole.log(1 === 1); // prints true to the console\nconsole.log(1 === '1'); // prints false to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":114,"description":"<p>The greater than operator <a href=\"#/p5/>\">></a>\nevaluates to true if the left value is greater than\nthe right value.</p>\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">\nThere is more info on comparison operators on MDN.</a>","itemtype":"property","name":">","example":["\n<div class='norender'>\n<code>\nconsole.log(100 > 1); // prints true to the console\nconsole.log(1 > 100); // prints false to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":136,"description":"<p>The greater than or equal to operator <a href=\"#/p5/>=\">>=</a>\nevaluates to true if the left value is greater than or equal to\nthe right value.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">There is more info on comparison operators on MDN.</a></p>\n","itemtype":"property","name":">=","example":["\n<div class='norender'>\n<code>\nconsole.log(100 >= 100); // prints true to the console\nconsole.log(101 >= 100); // prints true to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":157,"description":"<p>The less than operator <a href=\"#/p5/<\"><</a>\nevaluates to true if the left value is less than\nthe right value.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">There is more info on comparison operators on MDN.</a></p>\n","itemtype":"property","name":"<","example":["\n<div class='norender'>\n<code>\nconsole.log(1 < 100); // prints true to the console\nconsole.log(100 < 99); // prints false to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":178,"description":"<p>The less than or equal to operator <a href=\"#/p5/<=\"><=</a>\nevaluates to true if the left value is less than or equal to\nthe right value.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators\">There is more info on comparison operators on MDN.</a></p>\n","itemtype":"property","name":"<=","example":["\n<div class='norender'>\n<code>\nconsole.log(100 <= 100); // prints true to the console\nconsole.log(99 <= 100); // prints true to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":199,"description":"<p>The <a href=\"#/p5/if-else\">if-else</a> statement helps control the flow of your code.</p>\n<p>A condition is placed between the parenthesis following 'if',\nwhen that condition evalues to <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/truthy\">truthy</a>,\nthe code between the following curly braces is run.\nAlternatively, when the condition evaluates to <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Falsy\">falsy</a>,\nthe code between the curly braces of 'else' block is run instead. Writing an\nelse block is optional.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else\">the MDN entry</a>:\nThe 'if' statement executes a statement if a specified condition is truthy.\nIf the condition is falsy, another statement can be executed</p>\n","itemtype":"property","name":"if-else","example":["\n<div class='norender'>\n<code>\nlet a = 4;\nif (a > 0) {\n  console.log('positive');\n} else {\n  console.log('negative');\n}\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":230,"description":"<p>Creates and names a <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions\">function</a>.\nA <a href=\"#/p5/function\">function</a> is a set of statements that perform a task.</p>\n<p>Optionally, functions can have parameters. <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/Parameter\">Parameters</a>\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.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function\">the MDN entry</a>:\nDeclares a function with the specified parameters.</p>\n","itemtype":"property","name":"function","example":["\n<div class='norender'>\n<code>\nlet myName = 'Hridi';\nfunction sayHello(name) {\n  console.log('Hello ' + name + '!');\n}\nsayHello(myName); // calling the function, prints \"Hello Hridi!\" to console.\n</code>\n</div>\n\n<div class='norender'>\n<code>\nlet square = number => number * number;\nconsole.log(square(5));\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":266,"description":"<p>Specifies the value to be returned by a function.\nFor more info checkout <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return\">\nthe MDN entry for return</a>.</p>\n","itemtype":"property","name":"return","example":["\n<div class='norender'>\n<code>\nfunction calculateSquare(x) {\n  return x * x;\n}\nconst result = calculateSquare(4); // returns 16\nconsole.log(result); // prints '16' to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":287,"description":"<p>A <a href=\"#/p5/boolean\">boolean</a> is one of the 7 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Primitive_values\">primitive data types</a> in Javascript.\nA boolean can only be <code>true</code> or <code>false</code>.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type\">the MDN entry</a>:\nBoolean represents a logical entity and can have two values: true, and false.</p>\n","itemtype":"property","name":"boolean","example":["\n<div class='norender'>\n<code>\nlet myBoolean = false;\nconsole.log(typeof myBoolean); // prints 'boolean' to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":308,"description":"<p>A <a href=\"#/p5/string\">string</a> is one of the 7 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Primitive_values\">primitive data types</a> 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(\").</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Glossary/string\">the MDN entry</a>:\nA string is a sequence of characters used to represent text.</p>\n","itemtype":"property","name":"string","example":["\n<div class='norender'>\n<code>\nlet mood = 'chill';\nconsole.log(typeof mood); // prints 'string' to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":330,"description":"<p>A <a href=\"#/p5/number\">number</a> is one of the 7 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Primitive_values\">primitive data types</a> in Javascript.\nA number can be a whole number or a decimal number.</p>\n<p><a href=\"https://developer.mozilla.org/en-US/docs/Glossary/number\">The MDN entry for number</a></p>\n","itemtype":"property","name":"number","example":["\n<div class='norender'>\n<code>\nlet num = 46.5;\nconsole.log(typeof num); // prints 'number' to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":350,"description":"<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics\">MDN's object basics</a>:\n An <a href=\"#/p5/object\">object</a> 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.)</p>\n","itemtype":"property","name":"object","example":["\n <div class='norender'>\n <code>\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 </code>\n </div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":378,"description":"<p>Creates and names a <a href=\"#/p5/class\">class</a> which is a template for\nthe creation of <a href=\"#/p5/objects\">objects</a>.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class\">the MDN entry</a>:\nThe class declaration creates a new Class with a given name using\nprototype-based inheritance.</p>\n","itemtype":"property","name":"class","example":["\n<div class='norender'>\n<code>\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</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":407,"description":"<p><a href=\"#/p5/for\">for</a> creates a loop that is useful for executing one\nsection of code multiple times.</p>\n<p>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 seperated by ; (semi-colon).In case of an empty expression,\nonly a semi-colon is written.</p>\n<p>The code inside of the loop body (in between the curly braces) is executed between the evaluation of the second\nand third expression.</p>\n<p>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 <a href=\"#/p5/for\">for</a> 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.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for\">the MDN entry</a>:\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.</p>\n","itemtype":"property","name":"for","example":["\n<div class='norender'>\n<code>\nfor (let i = 0; i < 9; i++) {\n  console.log(i);\n}\n</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":447,"description":"<p><a href=\"#/p5/while\">while</a> creates a loop that is useful for executing\none section of code multiple times.</p>\n<p>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 <a href=\"#/p5/while\">while</a>, so if the condition is initially false\nthe loop body, or statement, will never execute.</p>\n<p>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.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/while\">the MDN entry</a>:\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.</p>\n","itemtype":"property","name":"while","example":["\n<div class='norender'>\n<code>\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</code>\n</div>"],"alt":"This example does not render anything","class":"p5","module":"Foundation"},{"file":"src/core/reference.js","line":489,"description":"<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify\">the MDN entry</a>:\nThe JSON.stringify() method converts a JavaScript object or value to a JSON <a href=\"#/p5/string\">string</a>.</p>\n","itemtype":"method","name":"stringify","static":1,"params":[{"name":"object","description":"<p>:Javascript object that you would like to convert to JSON</p>\n","type":"Object"}],"example":["\n<div class='norender'>\n<code>\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</code>\n</div>"],"alt":"This example does not render anything","class":"JSON","module":"Foundation"},{"file":"src/core/reference.js","line":511,"description":"<p>Prints a message to your browser's web console. When using p5, you can use <a href=\"#/p5/print\">print</a>\nand <a href=\"#/p5/console/log\">console.log</a> interchangeably.</p>\n<p>The console is opened differently depending on which browser you are using.\nHere are links on how to open the console in <a href=\"https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Opening_the_Web_Console\">Firefox</a>\n, <a href=\"https://developers.google.com/web/tools/chrome-devtools/open\">Chrome</a>, <a href=\"https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/console\">Edge</a>,\nand <a href=\"https://support.apple.com/en-ca/guide/safari/sfri20948/mac\">Safari</a>.\nWith the <a href=\"https://editor.p5js.org/\">online p5 editor</a> the console\nis embedded directly in the page underneath the code editor.</p>\n<p>From <a href=\"https://developer.mozilla.org/en-US/docs/Web/API/Console/log\">the MDN entry</a>:\nThe Console method log() outputs a message to the web console. The message may\nbe a single <a href=\"#/p5/string\">string</a> (with optional substitution values),\nor it may be any one or more JavaScript <a href=\"#/p5/object\">objects</a>.</p>\n","itemtype":"method","name":"log","static":1,"params":[{"name":"message","description":"<p>:Message that you would like to print to the console</p>\n","type":"String|Expression|Object"}],"example":["\n<div class='norender'>\n<code>\nlet myNum = 5;\nconsole.log(myNum); // prints 5 to the console\nconsole.log(myNum + 12); // prints 17 to the console\n</code>\n</div>"],"alt":"This example does not render anything","class":"console","module":"Foundation"},{"file":"src/core/rendering.js","line":15,"description":"<p>Creates a canvas element in the document, and sets the dimensions of it\nin pixels. This method should be called only once at the start of setup.\nCalling <a href=\"#/p5/createCanvas\">createCanvas</a> more than once in a\nsketch will result in very unpredictable behavior. If you want more than\none drawing canvas you could use <a href=\"#/p5/createGraphics\">createGraphics</a>\n(hidden by default but it can be shown).</p>\n<p>The system variables width and height are set by the parameters passed to this\nfunction. If <a href=\"#/p5/createCanvas\">createCanvas()</a> is not used, the\nwindow will be given a default size of 100x100 pixels.</p>\n<p>For more ways to position the canvas, see the\n<a href='https://github.com/processing/p5.js/wiki/Positioning-your-canvas'>\npositioning the canvas</a> wiki page.</p>\n","itemtype":"method","name":"createCanvas","params":[{"name":"w","description":"<p>width of the canvas</p>\n","type":"Number"},{"name":"h","description":"<p>height of the canvas</p>\n","type":"Number"},{"name":"renderer","description":"<p>either P2D or WEBGL</p>\n","type":"Constant","optional":true}],"return":{"description":"","type":"p5.Renderer"},"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 50);\n  background(153);\n  line(0, 0, width, height);\n}\n</code>\n</div>"],"alt":"Black line extending from top-left of canvas to bottom right.","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":120,"description":"<p>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.</p>\n","itemtype":"method","name":"resizeCanvas","params":[{"name":"w","description":"<p>width of the canvas</p>\n","type":"Number"},{"name":"h","description":"<p>height of the canvas</p>\n","type":"Number"},{"name":"noRedraw","description":"<p>don't redraw the canvas immediately</p>\n","type":"Boolean","optional":true}],"example":["\n<div class=\"norender\"><code>\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</code></div>"],"alt":"No image displayed.","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":174,"description":"<p>Removes the default canvas for a p5 sketch that doesn't require a canvas</p>\n","itemtype":"method","name":"noCanvas","example":["\n<div>\n<code>\nfunction setup() {\n  noCanvas();\n}\n</code>\n</div>"],"alt":"no image displayed","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":195,"description":"<p>Creates and returns a new p5.Renderer object. Use this class if you need\nto draw into an off-screen graphics buffer. The two parameters define the\nwidth and height in pixels.</p>\n","itemtype":"method","name":"createGraphics","params":[{"name":"w","description":"<p>width of the offscreen graphics buffer</p>\n","type":"Number"},{"name":"h","description":"<p>height of the offscreen graphics buffer</p>\n","type":"Number"},{"name":"renderer","description":"<p>either P2D or WEBGL\n                              undefined defaults to p2d</p>\n","type":"Constant","optional":true}],"return":{"description":"offscreen graphics buffer","type":"p5.Graphics"},"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"4 grey squares alternating light and dark grey. White quarter circle mid-left.","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/rendering.js","line":234,"description":"<p>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):</p>\n<ul>\n<li><code>BLEND</code> - linear interpolation of colours: C =\nA\\*factor + B. <b>This is the default blending mode.</b></li>\n<li><code>ADD</code> - sum of A and B</li>\n<li><code>DARKEST</code> - only the darkest colour succeeds: C =\nmin(A\\*factor, B).</li>\n<li><code>LIGHTEST</code> - only the lightest colour succeeds: C =\nmax(A\\*factor, B).</li>\n<li><code>DIFFERENCE</code> - subtract colors from underlying image.</li>\n<li><code>EXCLUSION</code> - similar to <code>DIFFERENCE</code>, but less\nextreme.</li>\n<li><code>MULTIPLY</code> - multiply the colors, result will always be\ndarker.</li>\n<li><code>SCREEN</code> - opposite multiply, uses inverse values of the\ncolors.</li>\n<li><code>REPLACE</code> - the pixels entirely replace the others and\ndon't utilize alpha (transparency) values.</li>\n<li><code>REMOVE</code> - removes pixels from B with the alpha strength of A.</li>\n<li><code>OVERLAY</code> - mix of <code>MULTIPLY</code> and <code>SCREEN\n</code>. Multiplies dark values, and screens light values. <em>(2D)</em></li>\n<li><code>HARD_LIGHT</code> - <code>SCREEN</code> when greater than 50%\ngray, <code>MULTIPLY</code> when lower. <em>(2D)</em></li>\n<li><code>SOFT_LIGHT</code> - mix of <code>DARKEST</code> and\n<code>LIGHTEST</code>. Works like <code>OVERLAY</code>, but not as harsh. <em>(2D)</em>\n</li>\n<li><code>DODGE</code> - lightens light tones and increases contrast,\nignores darks. <em>(2D)</em></li>\n<li><code>BURN</code> - darker areas are applied, increasing contrast,\nignores lights. <em>(2D)</em></li>\n<li><code>SUBTRACT</code> - remainder of A and B <em>(3D)</em></li>\n</ul>\n\n<p><em>(2D)</em> indicates that this blend mode <b>only</b> works in the 2D renderer.<br>\n<em>(3D)</em> indicates that this blend mode <b>only</b> works in the WEBGL renderer.</p>\n","itemtype":"method","name":"blendMode","params":[{"name":"mode","description":"<p>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</p>\n","type":"Constant"}],"example":["\n<div>\n<code>\nblendMode(LIGHTEST);\nstrokeWeight(30);\nstroke(80, 150, 255);\nline(25, 25, 75, 75);\nstroke(255, 50, 50);\nline(75, 25, 25, 75);\n</code>\n</div>\n\n<div>\n<code>\nblendMode(MULTIPLY);\nstrokeWeight(30);\nstroke(80, 150, 255);\nline(25, 25, 75, 75);\nstroke(255, 50, 50);\nline(75, 25, 25, 75);\n</code>\n</div>"],"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":317,"description":"<p>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 <code>drawingContext</code>, as in the example shown. This is\nthe equivalent of calling <code>canvas.getContext('2d');</code> or <code>canvas.getContext('webgl');</code>.\nSee this\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D\">\nreference for the native canvas API</a> for possible drawing functions you can call.</p>\n","itemtype":"property","name":"drawingContext","example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"white ellipse with shadow blur effect around edges","class":"p5","module":"Rendering","submodule":"Rendering"},{"file":"src/core/shim.js","line":18,"description":"<p>shim for Uint8ClampedArray.slice\n(allows arrayCopy to work with pixels[])\nwith thanks to <a href=\"http://halfpapstudios.com/blog/tag/html5-canvas/\">http://halfpapstudios.com/blog/tag/html5-canvas/</a>\nEnumerable set to false to protect for...in from\nUint8ClampedArray.prototype pollution.</p>\n","class":"p5","module":"Rendering"},{"file":"src/core/shim.js","line":39,"description":"<p>this is implementation of Object.assign() which is unavailable in\nIE11 and (non-Chrome) Android browsers.\nThe assign() method is used to copy the values of all enumerable\nown properties from one or more source objects to a target object.\nIt will return the target object.\nModified from <a href=\"https://github.com/ljharb/object.assign\">https://github.com/ljharb/object.assign</a></p>\n","class":"p5","module":"Rendering"},{"file":"src/core/structure.js","line":10,"description":"<p>Stops p5.js from continuously executing the code within <a href=\"#/p5/draw\">draw()</a>.\nIf <a href=\"#/p5/loop\">loop()</a> is called, the code in <a href=\"#/p5/draw\">draw()</a>\nbegins to run continuously again. If using <a href=\"#/p5/noLoop\">noLoop()</a>\nin <a href=\"#/p5/setup\">setup()</a>, it should be the last line inside the block.</p>\n<p>When <a href=\"#/p5/noLoop\">noLoop()</a> is used, it's not possible to manipulate\nor access the screen inside event handling functions such as\n<a href=\"#/p5/mousePressed\">mousePressed()</a> or\n<a href=\"#/p5/keyPressed\">keyPressed()</a>. Instead, use those functions to\ncall <a href=\"#/p5/redraw\">redraw()</a> or <a href=\"#/p5/loop\">loop()</a>,\nwhich will run <a href=\"#/p5/draw\">draw()</a>, which can update the screen\nproperly. This means that when <a href=\"#/p5/noLoop\">noLoop()</a> has been\ncalled, no drawing can happen, and functions like <a href=\"#/p5/saveFrame\">saveFrame()</a>\nor <a href=\"#/p5/loadPixels\">loadPixels()</a> may not be used.</p>\n<p>Note that if the sketch is resized, <a href=\"#/p5/redraw\">redraw()</a> will\nbe called to update the sketch, even after <a href=\"#/p5/noLoop\">noLoop()</a>\nhas been specified. Otherwise, the sketch would enter an odd state until\n<a href=\"#/p5/loop\">loop()</a> was called.</p>\n<p>Use <a href=\"#/p5/isLooping\">isLooping()</a> to check current state of loop().</p>\n","itemtype":"method","name":"noLoop","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100);\n  background(200);\n  noLoop();\n}\n\nfunction draw() {\n  line(10, 10, 90, 90);\n}\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":83,"description":"<p>By default, p5.js loops through draw() continuously, executing the code within\nit. However, the <a href=\"#/p5/draw\">draw()</a> loop may be stopped by calling\n<a href=\"#/p5/noLoop\">noLoop()</a>. In that case, the <a href=\"#/p5/draw\">draw()</a>\nloop can be resumed with loop().</p>\n<p>Avoid calling loop() from inside setup().</p>\n<p>Use <a href=\"#/p5/isLooping\">isLooping()</a> to check current state of loop().</p>\n","itemtype":"method","name":"loop","example":["\n<div>\n<code>\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</code>\n</div>"],"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":134,"description":"<p>By default, p5.js loops through <a href=\"#/p5/draw\">draw()</a> continuously,\nexecuting the code within it. If the sketch is stopped with\n<a href=\"#/p5/noLoop\">noLoop()</a> or resumed with <a href=\"#/p5/loop\">loop()</a>,\nisLooping() returns the current state for use within custom event handlers.</p>\n","itemtype":"method","name":"isLooping","example":["\n<div>\n<code>\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</code>\n</div>"],"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":"<p>The <a href=\"#/p5/push\">push()</a> function saves the current drawing style\nsettings and transformations, while <a href=\"#/p5/pop\">pop()</a> 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 <a href=\"#/p5/push\">push()</a>, it builds on\nthe current style and transform information. The <a href=\"#/p5/push\">push()</a>\nand <a href=\"#/p5/pop\">pop()</a> functions can be embedded to provide more\ncontrol. (See the second example for a demonstration.)</p>\n<p><a href=\"#/p5/push\">push()</a> stores information related to the current transformation state\nand style settings controlled by the following functions:\n<a href=\"#/p5/fill\">fill()</a>,\n<a href=\"#/p5/noFill\">noFill()</a>,\n<a href=\"#/p5/noStroke\">noStroke()</a>,\n<a href=\"#/p5/stroke\">stroke()</a>,\n<a href=\"#/p5/tint\">tint()</a>,\n<a href=\"#/p5/noTint\">noTint()</a>,\n<a href=\"#/p5/strokeWeight\">strokeWeight()</a>,\n<a href=\"#/p5/strokeCap\">strokeCap()</a>,\n<a href=\"#/p5/strokeJoin\">strokeJoin()</a>,\n<a href=\"#/p5/imageMode\">imageMode()</a>,\n<a href=\"#/p5/rectMode\">rectMode()</a>,\n<a href=\"#/p5/ellipseMode\">ellipseMode()</a>,\n<a href=\"#/p5/colorMode\">colorMode()</a>,\n<a href=\"#/p5/textAlign\">textAlign()</a>,\n<a href=\"#/p5/textFont\">textFont()</a>,\n<a href=\"#/p5/textSize\">textSize()</a>,\n<a href=\"#/p5/textLeading\">textLeading()</a>,\n<a href=\"#/p5/applyMatrix\">applyMatrix()</a>,\n<a href=\"#/p5/resetMatrix\">resetMatrix()</a>,\n<a href=\"#/p5/rotate\">rotate()</a>,\n<a href=\"#/p5/scale\">scale()</a>,\n<a href=\"#/p5/shearX\">shearX()</a>,\n<a href=\"#/p5/shearY\">shearY()</a>,\n<a href=\"#/p5/translate\">translate()</a>,\n<a href=\"#/p5/noiseSeed\">noiseSeed()</a>.</p>\n<p>In WEBGL mode additional style settings are stored. These are controlled by the\nfollowing functions: <a href=\"#/p5/setCamera\">setCamera()</a>,\n<a href=\"#/p5/ambientLight\">ambientLight()</a>,\n<a href=\"#/p5/directionalLight\">directionalLight()</a>,\n<a href=\"#/p5/pointLight\">pointLight()</a>, <a href=\"#/p5/texture\">texture()</a>,\n<a href=\"#/p5/specularMaterial\">specularMaterial()</a>,\n<a href=\"#/p5/shininess\">shininess()</a>,\n<a href=\"#/p5/normalMaterial\">normalMaterial()</a>\nand <a href=\"#/p5/shader\">shader()</a>.</p>\n","itemtype":"method","name":"push","example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":"<p>The <a href=\"#/p5/push\">push()</a> function saves the current drawing style\nsettings and transformations, while <a href=\"#/p5/pop\">pop()</a> 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 <a href=\"#/p5/push\">push()</a>, it\nbuilds on the current style and transform information. The <a href=\"#/p5/push\">push()</a>\nand <a href=\"#/p5/pop\">pop()</a> functions can be embedded to provide more\ncontrol. (See the second example for a demonstration.)</p>\n<p><a href=\"#/p5/push\">push()</a> stores information related to the current transformation state\nand style settings controlled by the following functions:\n<a href=\"#/p5/fill\">fill()</a>,\n<a href=\"#/p5/noFill\">noFill()</a>,\n<a href=\"#/p5/noStroke\">noStroke()</a>,\n<a href=\"#/p5/stroke\">stroke()</a>,\n<a href=\"#/p5/tint\">tint()</a>,\n<a href=\"#/p5/noTint\">noTint()</a>,\n<a href=\"#/p5/strokeWeight\">strokeWeight()</a>,\n<a href=\"#/p5/strokeCap\">strokeCap()</a>,\n<a href=\"#/p5/strokeJoin\">strokeJoin()</a>,\n<a href=\"#/p5/imageMode\">imageMode()</a>,\n<a href=\"#/p5/rectMode\">rectMode()</a>,\n<a href=\"#/p5/ellipseMode\">ellipseMode()</a>,\n<a href=\"#/p5/colorMode\">colorMode()</a>,\n<a href=\"#/p5/textAlign\">textAlign()</a>,\n<a href=\"#/p5/textFont\">textFont()</a>,\n<a href=\"#/p5/textSize\">textSize()</a>,\n<a href=\"#/p5/textLeading\">textLeading()</a>,\n<a href=\"#/p5/applyMatrix\">applyMatrix()</a>,\n<a href=\"#/p5/resetMatrix\">resetMatrix()</a>,\n<a href=\"#/p5/rotate\">rotate()</a>,\n<a href=\"#/p5/scale\">scale()</a>,\n<a href=\"#/p5/shearX\">shearX()</a>,\n<a href=\"#/p5/shearY\">shearY()</a>,\n<a href=\"#/p5/translate\">translate()</a>,\n<a href=\"#/p5/noiseSeed\">noiseSeed()</a>.</p>\n<p>In WEBGL mode additional style settings are stored. These are controlled by\nthe following functions:\n<a href=\"#/p5/setCamera\">setCamera()</a>,\n<a href=\"#/p5/ambientLight\">ambientLight()</a>,\n<a href=\"#/p5/directionalLight\">directionalLight()</a>,\n<a href=\"#/p5/pointLight\">pointLight()</a>,\n<a href=\"#/p5/texture\">texture()</a>,\n<a href=\"#/p5/specularMaterial\">specularMaterial()</a>,\n<a href=\"#/p5/shininess\">shininess()</a>,\n<a href=\"#/p5/normalMaterial\">normalMaterial()</a> and\n<a href=\"#/p5/shader\">shader()</a>.</p>\n","itemtype":"method","name":"pop","example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"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":"<p>Executes the code within <a href=\"#/p5/draw\">draw()</a> one time. This\nfunction allows the program to update the display window only when necessary,\nfor example when an event registered by <a href=\"#/p5/mousePressed\">mousePressed()</a>\nor <a href=\"#/p5/keyPressed\">keyPressed()</a> occurs.</p>\n<p>In structuring a program, it only makes sense to call <a href=\"#/p5/redraw\">redraw()</a>\nwithin events such as <a href=\"#/p5/mousePressed\">mousePressed()</a>. This\nis because <a href=\"#/p5/redraw\">redraw()</a> does not run\n<a href=\"#/p5/draw\">draw()</a> immediately (it only sets a flag that indicates\nan update is needed).</p>\n<p>The <a href=\"#/p5/redraw\">redraw()</a> function does not work properly when\ncalled inside <a href=\"#/p5/draw\">draw()</a>.To enable/disable animations,\nuse <a href=\"#/p5/loop\">loop()</a> and <a href=\"#/p5/noLoop\">noLoop()</a>.</p>\n<p>In addition you can set the number of redraws per method call. Just\nadd an integer as single parameter for the number of redraws.</p>\n","itemtype":"method","name":"redraw","params":[{"name":"n","description":"<p>Redraw for n-times. The default value is 1.</p>\n","type":"Integer","optional":true}],"example":["\n<div><code>\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</code>\n</div>\n\n<div class='norender'>\n<code>\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</code>\n</div>"],"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":496,"description":"<p>The <code>p5()</code> 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<a target=\"blank\" href=\"https://www.youtube.com/watch?v=Su792jEauZg&feature=youtu.be\">\nDan Shiffman's Coding Train video tutorial</a> or this\n<a target=\"blank\" href=\"https://github.com/processing/p5.js/wiki/p5.js-overview#instantiation--namespace\">tutorial page</a>\nfor more info.</p>\n<p>By default, all p5.js functions are in the global namespace (i.e. bound to the window\nobject), meaning you can call them simply <code>ellipse()</code>, <code>fill()</code>, 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.</p>\n<p>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.</p>\n<p>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.</p>\n","itemtype":"method","name":"p5","params":[{"name":"sketch","description":"<p>a function containing a p5.js sketch</p>\n","type":"Object"},{"name":"node","description":"<p>ID or pointer to HTML DOM node to contain sketch in</p>\n","type":"String|Object"}],"example":["\n<div class='norender'><code>\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</code></div>"],"alt":"white rectangle on black background","class":"p5","module":"Structure","submodule":"Structure"},{"file":"src/core/transform.js","line":11,"description":"<p>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 <a href=\"https://en.wikipedia.org/wiki/Transformation_matrix\">\nWikipedia</a>.</p>\n<p>The naming of the arguments here follows the naming of the <a href=\n\"https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-transform\">\nWHATWG specification</a> and corresponds to a\ntransformation matrix of the\nform:</p>\n<blockquote>\n<p><img style=\"max-width: 150px\" src=\"assets/transformation-matrix.png\"\nalt=\"The transformation matrix used when applyMatrix is called\"/></p>\n</blockquote>\n","itemtype":"method","name":"applyMatrix","params":[{"name":"a","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"},{"name":"b","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"},{"name":"c","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"},{"name":"d","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"},{"name":"e","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"},{"name":"f","description":"<p>numbers which define the 2x3 matrix to be multiplied</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\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(  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  stroke(255);\n  box(50);\n}\n</code>\n</div>"],"alt":"A rectangle translating to the right\nA rectangle shrinking to the center\nA rectangle rotating clockwise about the center\nA rectangle shearing","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":151,"description":"<p>Replaces the current matrix with the identity matrix.</p>\n","itemtype":"method","name":"resetMatrix","chainable":1,"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"A rotated retangle in the center with another at the top left corner","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":176,"description":"<p>Rotates a shape by the amount specified by the angle parameter. This\nfunction accounts for <a href=\"#/p5/angleMode\">angleMode</a>, so angles\ncan be entered in either RADIANS or DEGREES.</p>\n<p>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 accumulates the effect. For example, calling\nrotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI).\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n<p>Technically, <a href=\"#/p5/rotate\">rotate()</a> multiplies the current transformation matrix\nby a rotation matrix. This function can be further controlled by\nthe <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a>.</p>\n","itemtype":"method","name":"rotate","params":[{"name":"angle","description":"<p>the angle of rotation, specified in radians\n                       or degrees, depending on current angleMode</p>\n","type":"Number"},{"name":"axis","description":"<p>(in 3d) the axis to rotate around</p>\n","type":"p5.Vector|Number[]","optional":true}],"chainable":1,"example":["\n<div>\n<code>\ntranslate(width / 2, height / 2);\nrotate(PI / 3.0);\nrect(-26, -26, 52, 52);\n</code>\n</div>"],"alt":"white 52x52 rect with black outline at center rotated counter 45 degrees","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":215,"description":"<p>Rotates a shape around X axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.</p>\n<p>Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n","itemtype":"method","name":"rotateX","params":[{"name":"angle","description":"<p>the angle of rotation, specified in radians\n                       or degrees, depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(255);\n  rotateX(millis() / 1000);\n  box();\n}\n</code>\n</div>"],"alt":"3d box rotating around the x axis.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":251,"description":"<p>Rotates a shape around Y axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.</p>\n<p>Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n","itemtype":"method","name":"rotateY","params":[{"name":"angle","description":"<p>the angle of rotation, specified in radians\n                       or degrees, depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(255);\n  rotateY(millis() / 1000);\n  box();\n}\n</code>\n</div>"],"alt":"3d box rotating around the y axis.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":287,"description":"<p>Rotates a shape around Z axis by the amount specified in angle parameter.\nThe angles can be entered in either RADIANS or DEGREES.</p>\n<p>This method works in WEBGL mode only.</p>\n<p>Objects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nAll tranformations are reset when <a href=\"#/p5/draw\">draw()</a> begins again.</p>\n","itemtype":"method","name":"rotateZ","params":[{"name":"angle","description":"<p>the angle of rotation, specified in radians\n                       or degrees, depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(255);\n  rotateZ(millis() / 1000);\n  box();\n}\n</code>\n</div>"],"alt":"3d box rotating around the z axis.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":325,"description":"<p>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%.</p>\n<p>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 <a href=\"#/p5/scale\">scale()</a> is called\nwithin <a href=\"#/p5/draw\">draw()</a>, the transformation is reset when the loop begins again.</p>\n<p>Using this function with the z parameter is only available in WEBGL mode.\nThis function can be further controlled with <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a>.</p>\n","itemtype":"method","name":"scale","chainable":1,"example":["\n<div>\n<code>\nrect(30, 20, 50, 50);\nscale(0.5);\nrect(30, 20, 50, 50);\n</code>\n</div>\n\n<div>\n<code>\nrect(30, 20, 50, 50);\nscale(0.5, 1.3);\nrect(30, 20, 50, 50);\n</code>\n</div>"],"alt":"white 52x52 rect with black outline at center rotated counter 45 degrees\n2 white rects with black outline- 1 50x50 at center. other 25x65 bottom left","class":"p5","module":"Transform","submodule":"Transform","overloads":[{"line":325,"params":[{"name":"s","description":"<p>percent to scale the object, or percentage to\n                     scale the object in the x-axis if multiple arguments\n                     are given</p>\n","type":"Number|p5.Vector|Number[]"},{"name":"y","description":"<p>percent to scale the object in the y-axis</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>percent to scale the object in the z-axis (webgl only)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":369,"params":[{"name":"scales","description":"<p>per-axis percents to scale the object</p>\n","type":"p5.Vector|Number[]"}],"chainable":1}]},{"file":"src/core/transform.js","line":399,"description":"<p>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.</p>\n<p>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 <a href=\"#/p5/shearX\">shearX()</a> is called within the <a href=\"#/p5/draw\">draw()</a>,\nthe transformation is reset when the loop begins again.</p>\n<p>Technically, <a href=\"#/p5/shearX\">shearX()</a> multiplies the current\ntransformation matrix by a rotation matrix. This function can be further\ncontrolled by the <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions.</p>\n","itemtype":"method","name":"shearX","params":[{"name":"angle","description":"<p>angle of shear specified in radians or degrees,\n                       depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\ntranslate(width / 4, height / 4);\nshearX(PI / 4.0);\nrect(0, 0, 30, 30);\n</code>\n</div>"],"alt":"white irregular quadrilateral with black outline at top middle.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":438,"description":"<p>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.</p>\n<p>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\n<a href=\"#/p5/shearY\">shearY()</a> is called within the <a href=\"#/p5/draw\">draw()</a>, the transformation is reset when\nthe loop begins again.</p>\n<p>Technically, <a href=\"#/p5/shearY\">shearY()</a> multiplies the current transformation matrix by a\nrotation matrix. This function can be further controlled by the\n<a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a> functions.</p>\n","itemtype":"method","name":"shearY","params":[{"name":"angle","description":"<p>angle of shear specified in radians or degrees,\n                       depending on current angleMode</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\ntranslate(width / 4, height / 4);\nshearY(PI / 4.0);\nrect(0, 0, 30, 30);\n</code>\n</div>"],"alt":"white irregular quadrilateral with black outline at middle bottom.","class":"p5","module":"Transform","submodule":"Transform"},{"file":"src/core/transform.js","line":477,"description":"<p>Specifies an amount to displace objects within the display window.\nThe x parameter specifies left/right translation, the y parameter\nspecifies up/down translation.</p>\n<p>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 <a href=\"#/p5/translate\">translate()</a> is called within <a href=\"#/p5/draw\">draw()</a>, the\ntransformation is reset when the loop begins again. This function can be\nfurther controlled by using <a href=\"#/p5/push\">push()</a> and <a href=\"#/p5/pop\">pop()</a>.</p>\n","itemtype":"method","name":"translate","chainable":1,"example":["\n<div>\n<code>\ntranslate(30, 20);\nrect(0, 0, 55, 55);\n</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>\n\n\n<div>\n<code>\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</code>\n</div>"],"alt":"white 55x55 rect with black outline at center right.\n3 white 55x55 rects with black outlines at top-l, center-r and bottom-r.\na 20x20 white rect moving in a circle around the canvas","class":"p5","module":"Transform","submodule":"Transform","overloads":[{"line":477,"params":[{"name":"x","description":"<p>left/right translation</p>\n","type":"Number"},{"name":"y","description":"<p>up/down translation</p>\n","type":"Number"},{"name":"z","description":"<p>forward/backward translation (webgl only)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":530,"params":[{"name":"vector","description":"<p>the vector to translate by</p>\n","type":"p5.Vector"}],"chainable":1}]},{"file":"src/data/local_storage.js","line":10,"description":"<p>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 <a href=\"#/p5/getItem\">getItem</a>.\nSensitive data such as passwords or personal information\n should not be stored in local storage.</p>\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 <div><code>\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 }\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 </code></div>"],"alt":"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.","class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/local_storage.js","line":101,"description":"<p>Returns the value of an item that was stored in local storage\n using storeItem()</p>\n","itemtype":"method","name":"getItem","params":[{"name":"key","description":"<p>name that you wish to use to store in local storage</p>\n","type":"String"}],"return":{"description":"Value of stored item","type":"Number|Object|String|Boolean|p5.Color|p5.Vector"},"example":["\n <div><code>\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 }\nfunction mousePressed() {\n   myColor = color(random(255), random(255), random(255));\n   storeItem('myColor', myColor);\n }\n </code></div>"],"alt":"If you click, the canvas changes to a random color.\n If you reload the page, the canvas is still the color it\n was when the page was previously loaded.","class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/local_storage.js","line":177,"description":"<p>Clears all local storage items set with storeItem()\n for the current domain.</p>\n","itemtype":"method","name":"clearStorage","example":["\n <div class=\"norender\">\n <code>\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 </code></div>"],"class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/local_storage.js","line":205,"description":"<p>Removes an item that was stored with storeItem()</p>\n","itemtype":"method","name":"removeItem","params":[{"name":"key","description":"","type":"String"}],"example":["\n <div class=\"norender\">\n <code>\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 </code></div>"],"class":"p5","module":"Data","submodule":"LocalStorage"},{"file":"src/data/p5.TypedDict.js","line":14,"description":"<p>Creates a new instance of p5.StringDict using the key-value pair\n or the object you provide.</p>\n","itemtype":"method","name":"createStringDict","return":{"description":"","type":"p5.StringDict"},"example":["\n <div class=\"norender\">\n <code>\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 </code></div>"],"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":"<p>object</p>\n","type":"Object"}],"return":{"description":"","type":"p5.StringDict"}}]},{"file":"src/data/p5.TypedDict.js","line":48,"description":"<p>Creates a new instance of <a href=\"#/p5.NumberDict\">p5.NumberDict</a> using the key-value pair\n or object you provide.</p>\n","itemtype":"method","name":"createNumberDict","return":{"description":"","type":"p5.NumberDict"},"example":["\n <div class=\"norender\">\n <code>\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 </code></div>"],"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":"<p>object</p>\n","type":"Object"}],"return":{"description":"","type":"p5.NumberDict"}}]},{"file":"src/data/p5.TypedDict.js","line":101,"description":"<p>Returns the number of key-value pairs currently stored in the Dictionary.</p>\n","itemtype":"method","name":"size","return":{"description":"the number of key-value pairs in the Dictionary","type":"Integer"},"example":["\n<div class=\"norender\">\n<code>\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</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":122,"description":"<p>Returns true if the given key exists in the Dictionary,\notherwise returns false.</p>\n","itemtype":"method","name":"hasKey","params":[{"name":"key","description":"<p>that you want to look up</p>\n","type":"Number|String"}],"return":{"description":"whether that key exists in Dictionary","type":"Boolean"},"example":["\n<div class=\"norender\">\n<code>\nfunction setup() {\n  let myDictionary = createStringDict('p5', 'js');\n  print(myDictionary.hasKey('p5')); // logs true to console\n}\n</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":144,"description":"<p>Returns the value stored at the given key.</p>\n","itemtype":"method","name":"get","params":[{"name":"the","description":"<p>key you want to access</p>\n","type":"Number|String"}],"return":{"description":"the value stored at that key","type":"Number|String"},"example":["\n<div class=\"norender\">\n<code>\nfunction setup() {\n  let myDictionary = createStringDict('p5', 'js');\n  let myValue = myDictionary.get('p5');\n  print(myValue === 'js'); // logs true to console\n}\n</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":170,"description":"<p>Updates the value associated with the given key in case it already exists\nin the Dictionary. Otherwise a new key-value pair is added.</p>\n","itemtype":"method","name":"set","params":[{"name":"key","description":"","type":"Number|String"},{"name":"value","description":"","type":"Number|String"}],"example":["\n<div class=\"norender\">\n<code>\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</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":197,"description":"<p>private helper function to handle the user passing in objects\nduring construction or calls to create()</p>\n","class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":208,"description":"<p>Creates a new key-value pair in the Dictionary.</p>\n","itemtype":"method","name":"create","example":["\n<div class=\"norender\">\n<code>\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</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary","overloads":[{"line":208,"params":[{"name":"key","description":"","type":"Number|String"},{"name":"value","description":"","type":"Number|String"}]},{"line":226,"params":[{"name":"obj","description":"<p>key/value pair</p>\n","type":"Object"}]}]},{"file":"src/data/p5.TypedDict.js","line":244,"description":"<p>Removes all previously stored key-value pairs from the Dictionary.</p>\n","itemtype":"method","name":"clear","example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":265,"description":"<p>Removes the key-value pair stored at the given key from the Dictionary.</p>\n","itemtype":"method","name":"remove","params":[{"name":"key","description":"<p>for the pair to remove</p>\n","type":"Number|String"}],"example":["\n<div class=\"norender\">\n<code>\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</code></div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":294,"description":"<p>Logs the set of items currently stored in the Dictionary to the console.</p>\n","itemtype":"method","name":"print","example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":318,"description":"<p>Converts the Dictionary into a CSV file for local download.</p>\n","itemtype":"method","name":"saveTable","example":["\n<div>\n<code>\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</code>\n</div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":356,"description":"<p>Converts the Dictionary into a JSON file for local download.</p>\n","itemtype":"method","name":"saveJSON","example":["\n<div>\n<code>\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</code>\n</div>"],"class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":387,"description":"<p>private helper function to ensure that the user passed in valid\nvalues for the Dictionary type</p>\n","class":"p5.TypedDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":425,"description":"<p>private helper function to ensure that the user passed in valid\nvalues for the Dictionary type</p>\n","class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":432,"description":"<p>Add the given number to the value currently stored at the given key.\nThe sum then replaces the value previously stored in the Dictionary.</p>\n","itemtype":"method","name":"add","params":[{"name":"Key","description":"<p>for the value you wish to add to</p>\n","type":"Number"},{"name":"Number","description":"<p>to add to the value</p>\n","type":"Number"}],"example":["\n<div class='norender'>\n<code>\nfunction setup() {\n  let myDictionary = createNumberDict(2, 5);\n  myDictionary.add(2, 2);\n  print(myDictionary.get(2)); // logs 7 to console.\n}\n</code></div>\n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":459,"description":"<p>Subtract the given number from the value currently stored at the given key.\nThe difference then replaces the value previously stored in the Dictionary.</p>\n","itemtype":"method","name":"sub","params":[{"name":"Key","description":"<p>for the value you wish to subtract from</p>\n","type":"Number"},{"name":"Number","description":"<p>to subtract from the value</p>\n","type":"Number"}],"example":["\n<div class='norender'>\n<code>\nfunction setup() {\n  let myDictionary = createNumberDict(2, 5);\n  myDictionary.sub(2, 2);\n  print(myDictionary.get(2)); // logs 3 to console.\n}\n</code></div>\n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":482,"description":"<p>Multiply the given number with the value currently stored at the given key.\nThe product then replaces the value previously stored in the Dictionary.</p>\n","itemtype":"method","name":"mult","params":[{"name":"Key","description":"<p>for value you wish to multiply</p>\n","type":"Number"},{"name":"Amount","description":"<p>to multiply the value by</p>\n","type":"Number"}],"example":["\n<div class='norender'>\n<code>\nfunction setup() {\n  let myDictionary = createNumberDict(2, 4);\n  myDictionary.mult(2, 2);\n  print(myDictionary.get(2)); // logs 8 to console.\n}\n</code></div>\n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":509,"description":"<p>Divide the given number with the value currently stored at the given key.\nThe quotient then replaces the value previously stored in the Dictionary.</p>\n","itemtype":"method","name":"div","params":[{"name":"Key","description":"<p>for value you wish to divide</p>\n","type":"Number"},{"name":"Amount","description":"<p>to divide the value by</p>\n","type":"Number"}],"example":["\n<div class='norender'>\n<code>\nfunction setup() {\n  let myDictionary = createNumberDict(2, 8);\n  myDictionary.div(2, 2);\n  print(myDictionary.get(2)); // logs 4 to console.\n}\n</code></div>\n"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":536,"description":"<p>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'</p>\n","class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":560,"description":"<p>Return the lowest number currently stored in the Dictionary.</p>\n","itemtype":"method","name":"minValue","return":{"description":"","type":"Number"},"example":["\n<div class='norender'>\n<code>\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</code></div>"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":580,"description":"<p>Return the highest number currently stored in the Dictionary.</p>\n","itemtype":"method","name":"maxValue","return":{"description":"","type":"Number"},"example":["\n<div class='norender'>\n<code>\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</code></div>"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":600,"description":"<p>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'</p>\n","class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":622,"description":"<p>Return the lowest key currently used in the Dictionary.</p>\n","itemtype":"method","name":"minKey","return":{"description":"","type":"Number"},"example":["\n<div class='norender'>\n<code>\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</code></div>"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/data/p5.TypedDict.js","line":642,"description":"<p>Return the highest key currently used in the Dictionary.</p>\n","itemtype":"method","name":"maxKey","return":{"description":"","type":"Number"},"example":["\n<div class='norender'>\n<code>\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</code></div>"],"class":"p5.NumberDict","module":"Data","submodule":"Dictionary"},{"file":"src/dom/dom.js","line":21,"description":"<p>Searches the page for the first element that matches the given CSS selector string (can be an\nID, class, tag name or a combination) and returns it as a <a href=\"#/p5.Element\">p5.Element</a>.\nThe DOM node itself can be accessed with .elt.\nReturns null if none found. You can also specify a container to search within.</p>\n","itemtype":"method","name":"select","params":[{"name":"selectors","description":"<p>CSS selector string of element to search for</p>\n","type":"String"},{"name":"container","description":"<p>CSS selector string, <a href=\"#/p5.Element\">p5.Element</a>, or\n                                            HTML element to search within</p>\n","type":"String|p5.Element|HTMLElement","optional":true}],"return":{"description":"<a href=\"#/p5.Element\">p5.Element</a> containing node found","type":"p5.Element|null"},"example":["\n<div><code>\nfunction setup() {\n  createCanvas(50, 50);\n  background(30);\n  // move canvas down and right\n  select('canvas').position(10, 30);\n}\n</code></div>\n\n<div class=\"norender\"><code>\n// select using ID\nlet a = select('#container');\nlet b = select('#beep', '#container');\nlet c;\nif (a) {\n  // select using class\n  c = select('.boop', a);\n}\n// select using CSS selector string\nlet d = select('#container #bleep');\nlet e = select('#container p');\n[a, b, c, d, e]; // unused\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":68,"description":"<p>Searches the page for elements that match the given CSS selector string (can be an ID a class,\ntag name or a combination) and returns them as <a href=\"#/p5.Element\">p5.Element</a>s in\nan array.\nThe DOM node itself can be accessed with .elt.\nReturns an empty array if none found.\nYou can also specify a container to search within.</p>\n","itemtype":"method","name":"selectAll","params":[{"name":"selectors","description":"<p>CSS selector string of elements to search for</p>\n","type":"String"},{"name":"container","description":"<p>CSS selector string, <a href=\"#/p5.Element\">p5.Element</a>\n                                            , or HTML element to search within</p>\n","type":"String|p5.Element|HTMLElement","optional":true}],"return":{"description":"Array of <a href=\"#/p5.Element\">p5.Element</a>s containing nodes found","type":"p5.Element[]"},"example":["\n<div class='norender'><code>\nfunction setup() {\n  createButton('btn');\n  createButton('2nd btn');\n  createButton('3rd btn');\n  let buttons = selectAll('button');\n\n  for (let i = 0; i < buttons.length; i++) {\n    buttons[i].size(100, 100);\n  }\n}\n</code></div>\n<div class='norender'><code>\n// these are all valid calls to selectAll()\nlet a = selectAll('.beep');\na = selectAll('div');\na = selectAll('button', '#container');\n\nlet b = createDiv();\nb.id('container');\nlet c = select('#container');\na = selectAll('p', c);\na = selectAll('#container p');\n\nlet d = document.getElementById('container');\na = selectAll('.boop', d);\na = selectAll('#container .boop');\nconsole.log(a);\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":126,"description":"<p>Helper function for select and selectAll</p>\n","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":141,"description":"<p>Helper function for getElement and getElements.</p>\n","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":175,"description":"<p>Removes all elements created by p5, except any canvas / graphics\nelements created by <a href=\"#/p5/createCanvas\">createCanvas</a> or <a href=\"#/p5/createGraphics\">createGraphics</a>.\nEvent handlers are removed, and element is removed from the DOM.</p>\n","itemtype":"method","name":"removeElements","example":["\n<div class='norender'><code>\nfunction setup() {\n  createCanvas(100, 100);\n  createDiv('this is some text');\n  createP('this is a paragraph');\n}\nfunction mousePressed() {\n  removeElements(); // this will remove the div and p, not canvas\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":200,"description":"<p>The .<a href=\"#/p5.Element/changed\">changed()</a> function is called when the value of an\nelement changes.\nThis can be used to attach an element specific event listener.</p>\n","itemtype":"method","name":"changed","params":[{"name":"fxn","description":"<p>function to be fired when the value of\n                               an element changes.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div><code>\nlet sel;\n\nfunction setup() {\n  textAlign(CENTER);\n  background(200);\n  sel = createSelect();\n  sel.position(10, 10);\n  sel.option('pear');\n  sel.option('kiwi');\n  sel.option('grape');\n  sel.changed(mySelectEvent);\n}\n\nfunction mySelectEvent() {\n  let item = sel.value();\n  background(200);\n  text(\"it's a \" + item + '!', 50, 50);\n}\n</code></div>\n\n<div><code>\nlet checkbox;\nlet cnv;\n\nfunction setup() {\n  checkbox = createCheckbox(' fill');\n  checkbox.changed(changeFill);\n  cnv = createCanvas(100, 100);\n  cnv.position(0, 30);\n  noFill();\n}\n\nfunction draw() {\n  background(200);\n  ellipse(50, 50, 50, 50);\n}\n\nfunction changeFill() {\n  if (checkbox.checked()) {\n    fill(0);\n  } else {\n    noFill();\n  }\n}\n</code></div>"],"alt":"dropdown: pear, kiwi, grape. When selected text \"its a\" + selection shown.","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":267,"description":"<p>The .<a href=\"#/p5.Element/input\">input()</a> function is called when any user input is\ndetected with an element. The input event is often used\nto detect keystrokes in a input element, or changes on a\nslider element. This can be used to attach an element specific\nevent listener.</p>\n","itemtype":"method","name":"input","params":[{"name":"fxn","description":"<p>function to be fired when any user input is\n                               detected within the element.\n                               if <code>false</code> is passed instead, the previously\n                               firing function will no longer fire.</p>\n","type":"Function|Boolean"}],"chainable":1,"example":["\n<div class='norender'><code>\n// Open your console to see the output\nfunction setup() {\n  let inp = createInput('');\n  inp.input(myInputEvent);\n}\n\nfunction myInputEvent() {\n  console.log('you are typing: ', this.value());\n}\n</code></div>"],"alt":"no display.","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":301,"description":"<p>Helpers for create methods.</p>\n","class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":312,"description":"<p>Creates a <div></div> element in the DOM with given inner HTML.</p>\n","itemtype":"method","name":"createDiv","params":[{"name":"html","description":"<p>inner HTML for element created</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div class='norender'><code>\ncreateDiv('this is some text');\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":329,"description":"<p>Creates a <p></p> element in the DOM with given inner HTML. Used\nfor paragraph length text.</p>\n","itemtype":"method","name":"createP","params":[{"name":"html","description":"<p>inner HTML for element created</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div class='norender'><code>\ncreateP('this is some text');\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":347,"description":"<p>Creates a <span></span> element in the DOM with given inner HTML.</p>\n","itemtype":"method","name":"createSpan","params":[{"name":"html","description":"<p>inner HTML for element created</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div class='norender'><code>\ncreateSpan('this is some text');\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":364,"description":"<p>Creates an <img> element in the DOM with given src and\nalternate text.</p>\n","itemtype":"method","name":"createImg","return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div class='norender'><code>\ncreateImg(\n  'https://p5js.org/assets/img/asterisk-01.png',\n  'the p5 magenta asterisk'\n);\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":364,"params":[{"name":"src","description":"<p>src path or url for image</p>\n","type":"String"},{"name":"alt","description":"<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#Attributes\">alternate text</a> to be used if image does not load. You can use also an empty string (<code>\"\"</code>) if that an image is not intended to be viewed.</p>\n","type":"String"}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}},{"line":380,"params":[{"name":"src","description":"","type":"String"},{"name":"alt","description":"","type":"String"},{"name":"crossOrigin","description":"<p><a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes\">crossOrigin property</a> of the <code>img</code> element; use either 'anonymous' or 'use-credentials' to retrieve the image with cross-origin access (for later use with <code>canvas</code>. if an empty string(<code>\"\"</code>) is passed, CORS is not used</p>\n","type":"String"},{"name":"successCallback","description":"<p>callback to be called once image data is loaded with the <a href=\"#/p5.Element\">p5.Element</a> as argument</p>\n","type":"Function","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":410,"description":"<p>Creates an <a></a> element in the DOM for including a hyperlink.</p>\n","itemtype":"method","name":"createA","params":[{"name":"href","description":"<p>url of page to link to</p>\n","type":"String"},{"name":"html","description":"<p>inner html of link element to display</p>\n","type":"String"},{"name":"target","description":"<p>target where new link should open,\n                            could be _blank, _self, _parent, _top.</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div class='norender'><code>\ncreateA('http://p5js.org/', 'this is a link');\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":433,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":435,"description":"<p>Creates a slider <input></input> element in the DOM.\nUse .size() to set the display length of the slider.</p>\n","itemtype":"method","name":"createSlider","params":[{"name":"min","description":"<p>minimum value of the slider</p>\n","type":"Number"},{"name":"max","description":"<p>maximum value of the slider</p>\n","type":"Number"},{"name":"value","description":"<p>default value of the slider</p>\n","type":"Number","optional":true},{"name":"step","description":"<p>step size for each tick of the slider (if step is set to 0, the slider will move continuously from the minimum to the maximum value)</p>\n","type":"Number","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet slider;\nfunction setup() {\n  slider = createSlider(0, 255, 100);\n  slider.position(10, 10);\n  slider.style('width', '80px');\n}\n\nfunction draw() {\n  let val = slider.value();\n  background(val);\n}\n</code></div>\n\n<div><code>\nlet slider;\nfunction setup() {\n  colorMode(HSB);\n  slider = createSlider(0, 360, 60, 40);\n  slider.position(10, 10);\n  slider.style('width', '80px');\n}\n\nfunction draw() {\n  let val = slider.value();\n  background(val, 100, 100, 1);\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":490,"description":"<p>Creates a <button></button> element in the DOM.\nUse .size() to set the display size of the button.\nUse .mousePressed() to specify behavior on press.</p>\n","itemtype":"method","name":"createButton","params":[{"name":"label","description":"<p>label displayed on the button</p>\n","type":"String"},{"name":"value","description":"<p>value of the button</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div class='norender'><code>\nlet button;\nfunction setup() {\n  createCanvas(100, 100);\n  background(0);\n  button = createButton('click me');\n  button.position(19, 19);\n  button.mousePressed(changeBG);\n}\n\nfunction changeBG() {\n  let val = random(255);\n  background(val);\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":524,"description":"<p>Creates a checkbox <input></input> element in the DOM.\nCalling .checked() on a checkbox returns if it is checked or not</p>\n","itemtype":"method","name":"createCheckbox","params":[{"name":"label","description":"<p>label displayed after checkbox</p>\n","type":"String","optional":true},{"name":"value","description":"<p>value of the checkbox; checked is true, unchecked is false</p>\n","type":"Boolean","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div class='norender'><code>\nlet checkbox;\n\nfunction setup() {\n  checkbox = createCheckbox('label', false);\n  checkbox.changed(myCheckedEvent);\n}\n\nfunction myCheckedEvent() {\n  if (this.checked()) {\n    console.log('Checking!');\n  } else {\n    console.log('Unchecking!');\n  }\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":592,"description":"<p>Creates a dropdown menu <select></select> element in the DOM.\nIt also helps to assign select-box methods to <a href=\"#/p5.Element\">p5.Element</a> when selecting existing select box.</p>\n<ul>\n<li><code>.option(name, [value])</code> can be used to set options for the select after it is created.</li>\n<li><code>.value()</code> will return the currently selected option.</li>\n<li><code>.selected()</code> will return current dropdown element which is an instance of <a href=\"#/p5.Element\">p5.Element</a></li>\n<li><code>.selected(value)</code> can be used to make given option selected by default when the page first loads.</li>\n<li><code>.disable()</code> marks whole of dropdown element as disabled.</li>\n<li><code>.disable(value)</code> marks given option as disabled</li>\n</ul>\n","itemtype":"method","name":"createSelect","return":{"description":"","type":"p5.Element"},"example":["\n<div><code>\nlet sel;\n\nfunction setup() {\n  textAlign(CENTER);\n  background(200);\n  sel = createSelect();\n  sel.position(10, 10);\n  sel.option('pear');\n  sel.option('kiwi');\n  sel.option('grape');\n  sel.selected('kiwi');\n  sel.changed(mySelectEvent);\n}\n\nfunction mySelectEvent() {\n  let item = sel.value();\n  background(200);\n  text('It is a ' + item + '!', 50, 50);\n}\n</code></div>\n\n<div><code>\nlet sel;\n\nfunction setup() {\n  textAlign(CENTER);\n  background(200);\n  sel = createSelect();\n  sel.position(10, 10);\n  sel.option('oil');\n  sel.option('milk');\n  sel.option('bread');\n  sel.disable('milk');\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":592,"params":[{"name":"multiple","description":"<p>true if dropdown should support multiple selections</p>\n","type":"Boolean","optional":true}],"return":{"description":"","type":"p5.Element"}},{"line":643,"params":[{"name":"existing","description":"<p>DOM select element</p>\n","type":"Object"}],"return":{"description":"","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":740,"description":"<p>Creates a radio button element in the DOM.It also helps existing radio buttons\nassign methods of <a href=\"#/p5.Element/\">p5.Element</a>.</p>\n<ul>\n<li><code>.option(value, [label])</code> can be used to create a new option for the\nelement. If an option with a value already exists, it will be returned.\nOptionally, a label can be provided as second argument for the option.</li>\n<li><code>.remove(value)</code> can be used to remove an option for the element.</li>\n<li><code>.value()</code> method will return the currently selected value.</li>\n<li><code>.selected()</code> method will return the currently selected input element.</li>\n<li><code>.selected(value)</code> method will select the option and return it.</li>\n<li><code>.disable(Boolean)</code> method will enable/disable the whole radio button element.</li>\n</ul>\n","itemtype":"method","name":"createRadio","return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet radio;\n\nfunction setup() {\n  radio = createRadio();\n  radio.option('black');\n  radio.option('white');\n  radio.option('gray');\n  radio.style('width', '60px');\n  textAlign(CENTER);\n  fill(255, 0, 0);\n}\n\nfunction draw() {\n  let val = radio.value();\n  background(val);\n  text(val, width / 2, height / 2);\n}\n</code></div>\n<div><code>\nlet radio;\n\nfunction setup() {\n  radio = createRadio();\n  radio.option('apple', 1);\n  radio.option('bread', 2);\n  radio.option('juice', 3);\n  radio.style('width', '60px');\n  textAlign(CENTER);\n}\n\nfunction draw() {\n  background(200);\n  let val = radio.value();\n  if (val) {\n    text('item cost is $' + val, width / 2, height / 2);\n  }\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":740,"params":[{"name":"containerElement","description":"<p>An container HTML Element either a div\nor span inside which all existing radio inputs will be considered as options.</p>\n","type":"Object"},{"name":"name","description":"<p>A name parameter for each Input Element.</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}},{"line":798,"params":[{"name":"name","description":"","type":"String"}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}},{"line":803,"params":[],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":918,"description":"<p>Creates a colorPicker element in the DOM for color input.\nThe .value() method will return a hex string (#rrggbb) of the color.\nThe .color() method will return a p5.Color object with the current chosen color.</p>\n","itemtype":"method","name":"createColorPicker","params":[{"name":"value","description":"<p>default color of element</p>\n","type":"String|p5.Color","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div><code>\nlet colorPicker;\nfunction setup() {\n  createCanvas(100, 100);\n  colorPicker = createColorPicker('#ed225d');\n  colorPicker.position(0, height + 5);\n}\n\nfunction draw() {\n  background(colorPicker.color());\n}\n</code></div>\n<div><code>\nlet inp1, inp2;\nfunction setup() {\n  createCanvas(100, 100);\n  background('grey');\n  inp1 = createColorPicker('#ff0000');\n  inp1.position(0, height + 5);\n  inp1.input(setShade1);\n  inp2 = createColorPicker(color('yellow'));\n  inp2.position(0, height + 30);\n  inp2.input(setShade2);\n  setMidShade();\n}\n\nfunction setMidShade() {\n  // Finding a shade between the two\n  let commonShade = lerpColor(inp1.color(), inp2.color(), 0.5);\n  fill(commonShade);\n  rect(20, 20, 60, 60);\n}\n\nfunction setShade1() {\n  setMidShade();\n  console.log('You are choosing shade 1 to be : ', this.value());\n}\nfunction setShade2() {\n  setMidShade();\n  console.log('You are choosing shade 2 to be : ', this.value());\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1006,"description":"<p>Creates an <input></input> element in the DOM for text input.\nUse .<a href=\"#/p5.Element/size\">size()</a> to set the display length of the box.</p>\n","itemtype":"method","name":"createInput","return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div class='norender'><code>\nfunction setup() {\n  let inp = createInput('');\n  inp.input(myInputEvent);\n}\n\nfunction myInputEvent() {\n  console.log('you are typing: ', this.value());\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM","overloads":[{"line":1006,"params":[{"name":"value","description":"<p>default value of the input box</p>\n","type":"String"},{"name":"type","description":"<p>type of text, ie text, password etc. Defaults to text.\n  Needs a value to be specified first.</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"}},{"line":1027,"params":[{"name":"value","description":"","type":"String","optional":true}],"return":{"description":"","type":"p5.Element"}}]},{"file":"src/dom/dom.js","line":1040,"description":"<p>Creates an <input></input> element in the DOM of type 'file'.\nThis allows users to select local files for use in a sketch.</p>\n","itemtype":"method","name":"createFileInput","params":[{"name":"callback","description":"<p>callback function for when a file is loaded</p>\n","type":"Function"},{"name":"multiple","description":"<p>optional, to allow multiple files to be selected</p>\n","type":"Boolean","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created DOM element","type":"p5.Element"},"example":["\n<div><code>\nlet input;\nlet img;\n\nfunction setup() {\n  input = createFileInput(handleFile);\n  input.position(0, 0);\n}\n\nfunction draw() {\n  background(255);\n  if (img) {\n    image(img, 0, 0, width, height);\n  }\n}\n\nfunction handleFile(file) {\n  print(file);\n  if (file.type === 'image') {\n    img = createImg(file.data, '');\n    img.hide();\n  } else {\n    img = null;\n  }\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1100,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1147,"description":"<p>Creates an HTML5 <video> element in the DOM for simple playback\nof audio/video. Shown by default, can be hidden with .<a href=\"#/p5.Element/hide\">hide()</a>\nand drawn into canvas using <a href=\"#/p5/image\">image()</a>. The first parameter\ncan be either a single string path to a video file, or an array of string\npaths to different formats of the same video. This is useful for ensuring\nthat your video can play across different browsers, as each supports\ndifferent formats. See <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats'>this\npage</a> for further information about supported formats.</p>\n","itemtype":"method","name":"createVideo","params":[{"name":"src","description":"<p>path to a video file, or array of paths for\n                            supporting different browsers</p>\n","type":"String|String[]"},{"name":"callback","description":"<p>callback function to be called upon\n                            'canplaythrough' event fire, that is, when the\n                            browser can play the media, and estimates that\n                            enough data has been loaded to play the media\n                            up to its end without having to stop for\n                            further buffering of content</p>\n","type":"Function","optional":true}],"return":{"description":"pointer to video <a href=\"#/p5.Element\">p5.Element</a>","type":"p5.MediaElement"},"example":["\n<div><code>\nlet vid;\nfunction setup() {\n  noCanvas();\n\n  vid = createVideo(\n    ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm'],\n    vidLoad\n  );\n\n  vid.size(100, 100);\n}\n\n// This function is called when the video loads\nfunction vidLoad() {\n  vid.loop();\n  vid.volume(0);\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1193,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1195,"description":"<p>Creates a hidden HTML5 <audio> element in the DOM for simple audio\nplayback. The first parameter can be either a single string path to a\naudio file, or an array of string paths to different formats of the same\naudio. This is useful for ensuring that your audio can play across\ndifferent browsers, as each supports different formats.\nSee <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats'>this\npage for further information about supported formats</a>.</p>\n","itemtype":"method","name":"createAudio","params":[{"name":"src","description":"<p>path to an audio file, or array of paths\n                            for supporting different browsers</p>\n","type":"String|String[]","optional":true},{"name":"callback","description":"<p>callback function to be called upon\n                            'canplaythrough' event fire, that is, when the\n                            browser can play the media, and estimates that\n                            enough data has been loaded to play the media\n                            up to its end without having to stop for\n                            further buffering of content</p>\n","type":"Function","optional":true}],"return":{"description":"pointer to audio <a href=\"#/p5.Element\">p5.Element</a>","type":"p5.MediaElement"},"example":["\n<div><code>\nlet ele;\nfunction setup() {\n  ele = createAudio('assets/beat.mp3');\n\n  // here we set the element to autoplay\n  // The element will play as soon\n  // as it is able to do so.\n  ele.autoplay(true);\n}\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1232,"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1234,"itemtype":"property","name":"VIDEO","type":"String","final":1,"category":["Constants"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1240,"itemtype":"property","name":"AUDIO","type":"String","final":1,"category":["Constants"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1277,"description":"<p>Creates a new HTML5 <video> element that contains the audio/video feed\nfrom a webcam. The element is separate from the canvas and is displayed by\ndefault. The element can be hidden using .<a href=\"#/p5.Element/hide\">hide()</a>.\nThe feed can be drawn onto the canvas using <a href=\"#/p5/image\">image()</a>.\nThe loadedmetadata property can be used to detect when the element has fully\nloaded (see second example).</p>\n<p>More specific properties of the feed can be passing in a Constraints object.\nSee the <a href='http://w3c.github.io/mediacapture-main/getusermedia.html#media-track-constraints'>\nW3C spec</a> for possible properties. Note that not all of these are supported\nby all browsers.</p>\n<p><em>Security note</em>: A new browser security specification requires that\ngetUserMedia, which is behind <a href=\"#/p5/createCapture\">createCapture()</a>,\nonly works when you're running the code locally, or on HTTPS. Learn more\n<a href='http://stackoverflow.com/questions/34197653/getusermedia-in-chrome-47-without-using-https'>here</a>\nand <a href='https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia'>here</a>.</p>\n","itemtype":"method","name":"createCapture","params":[{"name":"type","description":"<p>type of capture, either VIDEO or\n                                  AUDIO if none specified, default both,\n                                  or a Constraints object</p>\n","type":"String|Constant|Object"},{"name":"callback","description":"<p>function to be called once\n                                  stream has loaded</p>\n","type":"Function","optional":true}],"return":{"description":"capture video <a href=\"#/p5.Element\">p5.Element</a>","type":"p5.Element"},"example":["\n<div class='norender notest'>\n<code>\nlet capture;\n\nfunction setup() {\n  createCanvas(480, 480);\n  capture = createCapture(VIDEO);\n  capture.hide();\n}\n\nfunction draw() {\n  image(capture, 0, 0, width, width * capture.height / capture.width);\n  filter(INVERT);\n}\n</code>\n</div>\n\n<div class='norender notest'>\n<code>\nfunction setup() {\n  createCanvas(480, 120);\n  let constraints = {\n    video: {\n      mandatory: {\n        minWidth: 1280,\n        minHeight: 720\n      },\n      optional: [{ maxFrameRate: 10 }]\n    },\n    audio: true\n  };\n  createCapture(constraints, function(stream) {\n    console.log(stream);\n  });\n}\n</code>\n</div>\n<div class='norender notest'>\n<code>\nlet capture;\n\nfunction setup() {\n  createCanvas(640, 480);\n  capture = createCapture(VIDEO);\n}\nfunction draw() {\n  background(0);\n  if (capture.loadedmetadata) {\n    let c = capture.get(0, 0, 100, 100);\n    image(c, 0, 0);\n  }\n}\n</code>\n</div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1414,"description":"<p>Creates element with given tag in the DOM with given content.</p>\n","itemtype":"method","name":"createElement","params":[{"name":"tag","description":"<p>tag for the new element</p>\n","type":"String"},{"name":"content","description":"<p>html content to be inserted into the element</p>\n","type":"String","optional":true}],"return":{"description":"pointer to <a href=\"#/p5.Element\">p5.Element</a> holding created node","type":"p5.Element"},"example":["\n<div class='norender'><code>\ncreateElement('h2', 'im an h2 p5.element!');\n</code></div>"],"class":"p5","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1438,"description":"<p>Adds specified class to the element.</p>\n","itemtype":"method","name":"addClass","params":[{"name":"class","description":"<p>name of class to add</p>\n","type":"String"}],"chainable":1,"example":["\n <div class='norender'><code>\n let div = createDiv('div');\n div.addClass('myClass');\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1463,"description":"<p>Removes specified class from the element.</p>\n","itemtype":"method","name":"removeClass","params":[{"name":"class","description":"<p>name of class to remove</p>\n","type":"String"}],"chainable":1,"example":["\n <div class='norender'><code>\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.\nlet div;\nfunction setup() {\n   div = createDiv('div');\n   div.addClass('myClass');\n }\nfunction mousePressed() {\n   div.removeClass('myClass');\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1494,"description":"<p>Checks if specified class already set to element</p>\n","itemtype":"method","name":"hasClass","return":{"description":"a boolean value if element has specified class","type":"Boolean"},"params":[{"name":"c","description":"<p>class name of class to check</p>\n","type":"String"}],"example":["\n <div class='norender'><code>\n let div;\nfunction setup() {\n   div = createDiv('div');\n   div.addClass('show');\n }\nfunction mousePressed() {\n   if (div.hasClass('show')) {\n     div.addClass('show');\n   } else {\n     div.removeClass('show');\n   }\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1523,"description":"<p>Toggles element class</p>\n","itemtype":"method","name":"toggleClass","params":[{"name":"c","description":"<p>class name to toggle</p>\n","type":"String"}],"chainable":1,"example":["\n <div class='norender'><code>\n let div;\nfunction setup() {\n   div = createDiv('div');\n   div.addClass('show');\n }\nfunction mousePressed() {\n   div.toggleClass('show');\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1556,"description":"<p>Attaches the element  as a child to the parent specified.\n Accepts either a string ID, DOM node, or <a href=\"#/p5.Element\">p5.Element</a>.\n If no argument is specified, an array of children DOM nodes is returned.</p>\n","itemtype":"method","name":"child","return":{"description":"an array of child nodes","type":"Node[]"},"example":["\n <div class='norender'><code>\n let div0 = createDiv('this is the parent');\n let div1 = createDiv('this is the child');\n div0.child(div1); // use p5.Element\n </code></div>\n <div class='norender'><code>\n let div0 = createDiv('this is the parent');\n let div1 = createDiv('this is the child');\n div1.id('apples');\n div0.child('apples'); // use id\n </code></div>\n <div class='norender notest'><code>\n // this example assumes there is a div already on the page\n // with id \"myChildDiv\"\n let div0 = createDiv('this is the parent');\n let elt = document.getElementById('myChildDiv');\n div0.child(elt); // use element from page\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1556,"params":[],"return":{"description":"an array of child nodes","type":"Node[]"}},{"line":1584,"params":[{"name":"child","description":"<p>the ID, DOM node, or <a href=\"#/p5.Element\">p5.Element</a>\n                        to add to the current element</p>\n","type":"String|p5.Element","optional":true}],"chainable":1}]},{"file":"src/dom/dom.js","line":1609,"description":"<p>Centers a p5 Element either vertically, horizontally,\nor both, relative to its parent or according to\nthe body if the Element has no parent. If no argument is passed\nthe Element is aligned both vertically and horizontally.</p>\n","itemtype":"method","name":"center","params":[{"name":"align","description":"<p>passing 'vertical', 'horizontal' aligns element accordingly</p>\n","type":"String","optional":true}],"chainable":1,"example":["\n<div><code>\nfunction setup() {\n  let div = createDiv('').size(10, 10);\n  div.style('background-color', 'orange');\n  div.center();\n}\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":1660,"description":"<p>If an argument is given, sets the inner HTML of the element,\n replacing any existing html. If true is included as a second\n argument, html is appended instead of replacing existing html.\n If no arguments are given, returns\n the inner HTML of the element.</p>\n","itemtype":"method","name":"html","return":{"description":"the inner HTML of the element","type":"String"},"example":["\n <div class='norender'><code>\n let div = createDiv('').size(100, 100);\n div.html('hi');\n </code></div>\n <div class='norender'><code>\n let div = createDiv('Hello ').size(100, 100);\n div.html('World', true);\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1660,"params":[],"return":{"description":"the inner HTML of the element","type":"String"}},{"line":1681,"params":[{"name":"html","description":"<p>the HTML to be placed inside the element</p>\n","type":"String","optional":true},{"name":"append","description":"<p>whether to append HTML to existing</p>\n","type":"Boolean","optional":true}],"chainable":1}]},{"file":"src/dom/dom.js","line":1699,"description":"<p>Sets the position of the element. If no position type argument is given, the\n position will be relative to (0, 0) of the window.\n Essentially, this sets position:absolute and left and top\n properties of style. If an optional third argument specifying position type is given,\n the x and y coordinates will be interpreted based on the <a target=\"_blank\"\n href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/position\">positioning scheme</a>.\n If no arguments given, the function returns the x and y position of the element.\nfound documentation on how to be more specific with object type\n <a href=\"https://stackoverflow.com/questions/14714314/how-do-i-comment-object-literals-in-yuidoc\">https://stackoverflow.com/questions/14714314/how-do-i-comment-object-literals-in-yuidoc</a></p>\n","itemtype":"method","name":"position","return":{"description":"object of form { x: 0, y: 0 } containing the position of the element in an object","type":"Object"},"example":["\n <div><code class='norender'>\n function setup() {\n   let cnv = createCanvas(100, 100);\n   // positions canvas 50px to the right and 100px\n   // below upper left corner of the window\n   cnv.position(50, 100);\n }\n </code></div>\n <div><code class='norender'>\n function setup() {\n   let cnv = createCanvas(100, 100);\n   // positions canvas 50px to the right and 100px\n   // below upper left corner of the window\n   cnv.position(0, 0, 'fixed');\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1699,"params":[],"return":{"description":"object of form { x: 0, y: 0 } containing the position of the element in an object","type":"Object"}},{"line":1732,"params":[{"name":"x","description":"<p>x-position relative to upper left of window (optional)</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>y-position relative to upper left of window (optional)</p>\n","type":"Number","optional":true},{"name":"positionType","description":"<p>it can be static, fixed, relative, sticky, initial or inherit (optional)</p>\n","type":"String"}],"chainable":1}]},{"file":"src/dom/dom.js","line":1819,"description":"<p>Sets the given style (css) property (1st arg) of the element with the\ngiven value (2nd arg). If a single argument is given, .style()\nreturns the value of the given property; however, if the single argument\nis given in css syntax ('text-align:center'), .style() sets the css\nappropriately.</p>\n","itemtype":"method","name":"style","return":{"description":"value of property","type":"String"},"example":["\n<div><code class='norender'>\nlet myDiv = createDiv('I like pandas.');\nmyDiv.style('font-size', '18px');\nmyDiv.style('color', '#ff0000');\n</code></div>\n<div><code class='norender'>\nlet col = color(25, 23, 200, 50);\nlet button = createButton('button');\nbutton.style('background-color', col);\nbutton.position(10, 10);\n</code></div>\n<div><code class='norender'>\nlet myDiv;\nfunction setup() {\n  background(200);\n  myDiv = createDiv('I like gray.');\n  myDiv.position(20, 20);\n}\n\nfunction draw() {\n  myDiv.style('font-size', mouseX + 'px');\n}\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1819,"params":[{"name":"property","description":"<p>property to be set</p>\n","type":"String"}],"return":{"description":"value of property","type":"String"}},{"line":1854,"params":[{"name":"property","description":"","type":"String"},{"name":"value","description":"<p>value to assign to property</p>\n","type":"String|p5.Color"}],"chainable":1,"return":{"description":"current value of property, if no value is given as second argument","type":"String"}}]},{"file":"src/dom/dom.js","line":1911,"description":"<p>Adds a new attribute or changes the value of an existing attribute\n on the specified element. If no value is specified, returns the\n value of the given attribute, or null if attribute is not set.</p>\n","itemtype":"method","name":"attribute","return":{"description":"value of attribute","type":"String"},"example":["\n <div class='norender'><code>\n let myDiv = createDiv('I like pandas.');\n myDiv.attribute('align', 'center');\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":1911,"params":[],"return":{"description":"value of attribute","type":"String"}},{"line":1926,"params":[{"name":"attr","description":"<p>attribute to set</p>\n","type":"String"},{"name":"value","description":"<p>value to assign to attribute</p>\n","type":"String"}],"chainable":1}]},{"file":"src/dom/dom.js","line":1955,"description":"<p>Removes an attribute on the specified element.</p>\n","itemtype":"method","name":"removeAttribute","params":[{"name":"attr","description":"<p>attribute to remove</p>\n","type":"String"}],"chainable":1,"example":["\n <div><code>\n let button;\n let checkbox;\nfunction setup() {\n   checkbox = createCheckbox('enable', true);\n   checkbox.changed(enableButton);\n   button = createButton('button');\n   button.position(10, 10);\n }\nfunction enableButton() {\n   if (this.checked()) {\n     // Re-enable the button\n     button.removeAttribute('disabled');\n   } else {\n     // Disable the button\n     button.attribute('disabled', '');\n   }\n }\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2000,"description":"<p>Either returns the value of the element if no arguments\ngiven, or sets the value of the element.</p>\n","itemtype":"method","name":"value","return":{"description":"value of the element","type":"String|Number"},"example":["\n<div class='norender'><code>\n// gets the value\nlet inp;\nfunction setup() {\n  inp = createInput('');\n}\n\nfunction mousePressed() {\n  print(inp.value());\n}\n</code></div>\n<div class='norender'><code>\n// sets the value\nlet inp;\nfunction setup() {\n  inp = createInput('myValue');\n}\n\nfunction mousePressed() {\n  inp.value('myValue');\n}\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":2000,"params":[],"return":{"description":"value of the element","type":"String|Number"}},{"line":2030,"params":[{"name":"value","description":"","type":"String|Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":2046,"description":"<p>Shows the current element. Essentially, setting display:block for the style.</p>\n","itemtype":"method","name":"show","chainable":1,"example":["\n <div class='norender'><code>\n let div = createDiv('div');\n div.style('display', 'none');\n div.show(); // turns display to block\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2064,"description":"<p>Hides the current element. Essentially, setting display:none for the style.</p>\n","itemtype":"method","name":"hide","chainable":1,"example":["\n<div class='norender'><code>\nlet div = createDiv('this is a div');\ndiv.hide();\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2080,"description":"<p>Sets the width and height of the element. AUTO can be used to\n only adjust one dimension at a time. If no arguments are given, it\n returns the width and height of the element in an object. In case of\n elements which need to be loaded, such as images, it is recommended\n to call the function after the element has finished loading.</p>\n","itemtype":"method","name":"size","return":{"description":"the width and height of the element in an object","type":"Object"},"example":["\n <div class='norender'><code>\n let div = createDiv('this is a div');\n div.size(100, 100);\n let img = createImg(\n   'assets/rockies.jpg',\n   'A tall mountain with a small forest and field in front of it on a sunny day',\n   '',\n   () => {\n     img.size(10, AUTO);\n   }\n );\n </code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM","overloads":[{"line":2080,"params":[],"return":{"description":"the width and height of the element in an object","type":"Object"}},{"line":2104,"params":[{"name":"w","description":"<p>width of the element, either AUTO, or a number</p>\n","type":"Number|Constant"},{"name":"h","description":"<p>height of the element, either AUTO, or a number</p>\n","type":"Number|Constant","optional":true}],"chainable":1}]},{"file":"src/dom/dom.js","line":2161,"description":"<p>Removes the element, stops all media streams, and deregisters all listeners.</p>\n","itemtype":"method","name":"remove","example":["\n<div class='norender'><code>\nlet myDiv = createDiv('this is some text');\nmyDiv.remove();\n</code></div>"],"class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2195,"description":"<p>Registers a callback that gets called every time a file that is\ndropped on the element has been loaded.\np5 will load every dropped file into memory and pass it as a p5.File object to the callback.\nMultiple files dropped at the same time will result in multiple calls to the callback.</p>\n<p>You can optionally pass a second callback which will be registered to the raw\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/Events/drop\">drop</a> event.\nThe callback will thus be provided the original\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/DragEvent\">DragEvent</a>.\nDropping multiple files at the same time will trigger the second callback once per drop,\nwhereas the first callback will trigger for each loaded file.</p>\n","itemtype":"method","name":"drop","params":[{"name":"callback","description":"<p>callback to receive loaded file, called for each file dropped.</p>\n","type":"Function"},{"name":"fxn","description":"<p>callback triggered once when files are dropped with the drop event.</p>\n","type":"Function","optional":true}],"chainable":1,"example":["\n<div><code>\nfunction setup() {\n  let c = createCanvas(100, 100);\n  background(200);\n  textAlign(CENTER);\n  text('drop file', width / 2, height / 2);\n  c.drop(gotFile);\n}\n\nfunction gotFile(file) {\n  background(200);\n  text('received file:', width / 2, height / 2);\n  text(file.name, width / 2, height / 2 + 50);\n}\n</code></div>\n\n<div><code>\nlet img;\n\nfunction setup() {\n  let c = createCanvas(100, 100);\n  background(200);\n  textAlign(CENTER);\n  text('drop image', width / 2, height / 2);\n  c.drop(gotFile);\n}\n\nfunction draw() {\n  if (img) {\n    image(img, 0, 0, width, height);\n  }\n}\n\nfunction gotFile(file) {\n  img = createImg(file.data, '').hide();\n}\n</code></div>"],"alt":"Canvas turns into whatever image is dragged/dropped onto it.","class":"p5.Element","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2327,"description":"<p>Path to the media element source.</p>\n","itemtype":"property","name":"src","return":{"description":"src","type":"String"},"example":["\n<div><code>\nlet ele;\n\nfunction setup() {\n  background(250);\n\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n\n  //In this example we create\n  //a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/beat.mp3');\n\n  //We'll set up our example so that\n  //when you click on the text,\n  //an alert box displays the MediaElement's\n  //src field.\n  textAlign(CENTER);\n  text('Click Me!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    //Show our p5.MediaElement's src field\n    alert(ele.src);\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2392,"description":"<p>Play an HTML5 media element.</p>\n","itemtype":"method","name":"play","chainable":1,"example":["\n<div><code>\nlet ele;\n\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n\n  //In this example we create\n  //a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/beat.mp3');\n\n  background(250);\n  textAlign(CENTER);\n  text('Click to Play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    //Here we call the play() function on\n    //the p5.MediaElement we created above.\n    //This will start the audio sample.\n    ele.play();\n\n    background(200);\n    text('You clicked Play!', width / 2, height / 2);\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2456,"description":"<p>Stops an HTML5 media element (sets current time to zero).</p>\n","itemtype":"method","name":"stop","chainable":1,"example":["\n<div><code>\n//This example both starts\n//and stops a sound sample\n//when the user clicks the canvas\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\n\n//while our audio is playing,\n//this will be set to true\nlet sampleIsPlaying = false;\n\nfunction setup() {\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/beat.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    background(200);\n\n    if (sampleIsPlaying) {\n      //if the sample is currently playing\n      //calling the stop() function on\n      //our p5.MediaElement will stop\n      //it and reset its current\n      //time to 0 (i.e. it will start\n      //at the beginning the next time\n      //you play it)\n      ele.stop();\n\n      sampleIsPlaying = false;\n      text('Click to play!', width / 2, height / 2);\n    } else {\n      //loop our sound element until we\n      //call ele.stop() on it.\n      ele.loop();\n\n      sampleIsPlaying = true;\n      text('Click to stop!', width / 2, height / 2);\n    }\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2520,"description":"<p>Pauses an HTML5 media element.</p>\n","itemtype":"method","name":"pause","chainable":1,"example":["\n<div><code>\n//This example both starts\n//and pauses a sound sample\n//when the user clicks the canvas\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\n\n//while our audio is playing,\n//this will be set to true\nlet sampleIsPlaying = false;\n\nfunction setup() {\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    background(200);\n\n    if (sampleIsPlaying) {\n      //Calling pause() on our\n      //p5.MediaElement will stop it\n      //playing, but when we call the\n      //loop() or play() functions\n      //the sample will start from\n      //where we paused it.\n      ele.pause();\n\n      sampleIsPlaying = false;\n      text('Click to resume!', width / 2, height / 2);\n    } else {\n      //loop our sound element until we\n      //call ele.pause() on it.\n      ele.loop();\n\n      sampleIsPlaying = true;\n      text('Click to pause!', width / 2, height / 2);\n    }\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2582,"description":"<p>Set 'loop' to true for an HTML5 media element, and starts playing.</p>\n","itemtype":"method","name":"loop","chainable":1,"example":["\n<div><code>\n//Clicking the canvas will loop\n//the audio sample until the user\n//clicks again to stop it\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\n\n//while our audio is playing,\n//this will be set to true\nlet sampleIsLooping = false;\n\nfunction setup() {\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to loop!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    background(200);\n\n    if (!sampleIsLooping) {\n      //loop our sound element until we\n      //call ele.stop() on it.\n      ele.loop();\n\n      sampleIsLooping = true;\n      text('Click to stop!', width / 2, height / 2);\n    } else {\n      ele.stop();\n\n      sampleIsLooping = false;\n      text('Click to loop!', width / 2, height / 2);\n    }\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2638,"description":"<p>Set 'loop' to false for an HTML5 media element. Element will stop\nwhen it reaches the end.</p>\n","itemtype":"method","name":"noLoop","chainable":1,"example":["\n<div><code>\n//This example both starts\n//and stops loop of sound sample\n//when the user clicks the canvas\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\n//while our audio is playing,\n//this will be set to true\nlet sampleIsPlaying = false;\n\nfunction setup() {\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/beat.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to play!', width / 2, height / 2);\n}\n\nfunction mouseClicked() {\n  //here we test if the mouse is over the\n  //canvas element when it's clicked\n  if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) {\n    background(200);\n\n    if (sampleIsPlaying) {\n      ele.noLoop();\n      sampleIsPlaying = false;\n      text('No more Loops!', width / 2, height / 2);\n    } else {\n      ele.loop();\n      sampleIsPlaying = true;\n      text('Click to stop looping!', width / 2, height / 2);\n    }\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2704,"description":"<p>Set HTML5 media element to autoplay or not. If no argument is specified, by\ndefault it will autoplay.</p>\n","itemtype":"method","name":"autoplay","params":[{"name":"shouldAutoplay","description":"<p>whether the element should autoplay</p>\n","type":"Boolean"}],"chainable":1,"example":["\n<div><code>\nlet videoElement;\nfunction setup() {\n  noCanvas();\n  videoElement = createVideo(['assets/small.mp4'], onVideoLoad);\n}\nfunction onVideoLoad() {\n  // The media will play as soon as it is loaded.\n  videoElement.autoplay();\n  videoElement.volume(0);\n  videoElement.size(100, 100);\n}\n</code></div>\n\n<div><code>\nlet videoElement;\nfunction setup() {\n  noCanvas();\n  videoElement = createVideo(['assets/small.mp4'], onVideoLoad);\n}\nfunction onVideoLoad() {\n  // The media will not play untill some explicitly triggered.\n  videoElement.autoplay(false);\n  videoElement.volume(0);\n  videoElement.size(100, 100);\n}\n\nfunction mouseClicked() {\n  videoElement.play();\n}\n</code></div>"],"alt":"An example of a video element which autoplays after it is loaded.\nAn example of a video element which waits for a trigger for playing.","class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":2771,"description":"<p>Sets volume for this HTML5 media element. If no argument is given,\nreturns the current volume.</p>\n","itemtype":"method","name":"volume","return":{"description":"current volume","type":"Number"},"example":["\n<div><code>\nlet ele;\nfunction setup() {\n  // p5.MediaElement objects are usually created\n  // by calling the createAudio(), createVideo(),\n  // and createCapture() functions.\n  // In this example we create\n  // a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(250);\n  textAlign(CENTER);\n  text('Click to Play!', width / 2, height / 2);\n}\nfunction mouseClicked() {\n  // Here we call the volume() function\n  // on the sound element to set its volume\n  // Volume must be between 0.0 and 1.0\n  ele.volume(0.2);\n  ele.play();\n  background(200);\n  text('You clicked Play!', width / 2, height / 2);\n}\n</code></div>\n<div><code>\nlet audio;\nlet counter = 0;\n\nfunction loaded() {\n  audio.play();\n}\n\nfunction setup() {\n  audio = createAudio('assets/lucky_dragons.mp3', loaded);\n  textAlign(CENTER);\n}\n\nfunction draw() {\n  if (counter === 0) {\n    background(0, 255, 0);\n    text('volume(0.9)', width / 2, height / 2);\n  } else if (counter === 1) {\n    background(255, 255, 0);\n    text('volume(0.5)', width / 2, height / 2);\n  } else if (counter === 2) {\n    background(255, 0, 0);\n    text('volume(0.1)', width / 2, height / 2);\n  }\n}\n\nfunction mousePressed() {\n  counter++;\n  if (counter === 0) {\n    audio.volume(0.9);\n  } else if (counter === 1) {\n    audio.volume(0.5);\n  } else if (counter === 2) {\n    audio.volume(0.1);\n  } else {\n    counter = 0;\n    audio.volume(0.9);\n  }\n}\n</code>\n</div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM","overloads":[{"line":2771,"params":[],"return":{"description":"current volume","type":"Number"}},{"line":2844,"params":[{"name":"val","description":"<p>volume between 0.0 and 1.0</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":2857,"description":"<p>If no arguments are given, returns the current playback speed of the\nelement. The speed parameter sets the speed where 2.0 will play the\nelement twice as fast, 0.5 will play at half the speed, and -1 will play\nthe element in normal speed in reverse.(Note that not all browsers support\nbackward playback and even if they do, playback might not be smooth.)</p>\n","itemtype":"method","name":"speed","return":{"description":"current playback speed of the element","type":"Number"},"example":["\n<div class='norender notest'><code>\n//Clicking the canvas will loop\n//the audio sample until the user\n//clicks again to stop it\n\n//We will store the p5.MediaElement\n//object in here\nlet ele;\nlet button;\n\nfunction setup() {\n  createCanvas(710, 400);\n  //Here we create a p5.MediaElement object\n  //using the createAudio() function.\n  ele = createAudio('assets/beat.mp3');\n  ele.loop();\n  background(200);\n\n  button = createButton('2x speed');\n  button.position(100, 68);\n  button.mousePressed(twice_speed);\n\n  button = createButton('half speed');\n  button.position(200, 68);\n  button.mousePressed(half_speed);\n\n  button = createButton('reverse play');\n  button.position(300, 68);\n  button.mousePressed(reverse_speed);\n\n  button = createButton('STOP');\n  button.position(400, 68);\n  button.mousePressed(stop_song);\n\n  button = createButton('PLAY!');\n  button.position(500, 68);\n  button.mousePressed(play_speed);\n}\n\nfunction twice_speed() {\n  ele.speed(2);\n}\n\nfunction half_speed() {\n  ele.speed(0.5);\n}\n\nfunction reverse_speed() {\n  ele.speed(-1);\n}\n\nfunction stop_song() {\n  ele.stop();\n}\n\nfunction play_speed() {\n  ele.play();\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM","overloads":[{"line":2857,"params":[],"return":{"description":"current playback speed of the element","type":"Number"}},{"line":2929,"params":[{"name":"speed","description":"<p>speed multiplier for element playback</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":2946,"description":"<p>If no arguments are given, returns the current time of the element.\nIf an argument is given the current time of the element is set to it.</p>\n","itemtype":"method","name":"time","return":{"description":"current time (in seconds)","type":"Number"},"example":["\n<div><code>\nlet ele;\nlet beginning = true;\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n\n  //In this example we create\n  //a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(250);\n  textAlign(CENTER);\n  text('start at beginning', width / 2, height / 2);\n}\n\n// this function fires with click anywhere\nfunction mousePressed() {\n  if (beginning === true) {\n    // here we start the sound at the beginning\n    // time(0) is not necessary here\n    // as this produces the same result as\n    // play()\n    ele.play().time(0);\n    background(200);\n    text('jump 2 sec in', width / 2, height / 2);\n    beginning = false;\n  } else {\n    // here we jump 2 seconds into the sound\n    ele.play().time(2);\n    background(250);\n    text('start at beginning', width / 2, height / 2);\n    beginning = true;\n  }\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM","overloads":[{"line":2946,"params":[],"return":{"description":"current time (in seconds)","type":"Number"}},{"line":2991,"params":[{"name":"time","description":"<p>time to jump to (in seconds)</p>\n","type":"Number"}],"chainable":1}]},{"file":"src/dom/dom.js","line":3005,"description":"<p>Returns the duration of the HTML5 media element.</p>\n","itemtype":"method","name":"duration","return":{"description":"duration","type":"Number"},"example":["\n<div><code>\nlet ele;\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n  //In this example we create\n  //a new p5.MediaElement via createAudio().\n  ele = createAudio('assets/doorbell.mp3');\n  background(250);\n  textAlign(CENTER);\n  text('Click to know the duration!', 10, 25, 70, 80);\n}\nfunction mouseClicked() {\n  ele.play();\n  background(200);\n  //ele.duration dislpays the duration\n  text(ele.duration() + ' seconds', width / 2, height / 2);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3127,"description":"<p>Schedule an event to be called when the audio or video\nelement reaches the end. If the element is looping,\nthis will not be called. The element is passed in\nas the argument to the onended callback.</p>\n","itemtype":"method","name":"onended","params":[{"name":"callback","description":"<p>function to call when the\n                            soundfile has ended. The\n                            media element will be passed\n                            in as the argument to the\n                            callback.</p>\n","type":"Function"}],"chainable":1,"example":["\n<div><code>\nfunction setup() {\n  let audioEl = createAudio('assets/beat.mp3');\n  audioEl.showControls();\n  audioEl.onended(sayDone);\n}\n\nfunction sayDone(elt) {\n  alert('done playing ' + elt.src);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3158,"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3160,"description":"<p>Send the audio output of this element to a specified audioNode or\np5.sound object. If no element is provided, connects to p5's main\noutput. That connection is established when this method is first called.\nAll connections are removed by the .disconnect() method.</p>\n<p>This method is meant to be used with the p5.sound.js addon library.</p>\n","itemtype":"method","name":"connect","params":[{"name":"audioNode","description":"<p>AudioNode from the Web Audio API,\nor an object from the p5.sound library</p>\n","type":"AudioNode|Object"}],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3209,"description":"<p>Disconnect all Web Audio routing, including to main output.\nThis is useful if you want to re-route the output through\naudio effects, for example.</p>\n","itemtype":"method","name":"disconnect","class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3224,"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3226,"description":"<p>Show the default MediaElement controls, as determined by the web browser.</p>\n","itemtype":"method","name":"showControls","example":["\n<div><code>\nlet ele;\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n  //In this example we create\n  //a new p5.MediaElement via createAudio()\n  ele = createAudio('assets/lucky_dragons.mp3');\n  background(200);\n  textAlign(CENTER);\n  text('Click to Show Controls!', 10, 25, 70, 80);\n}\nfunction mousePressed() {\n  ele.showControls();\n  background(200);\n  text('Controls Shown', width / 2, height / 2);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3257,"description":"<p>Hide the default mediaElement controls.</p>\n","itemtype":"method","name":"hideControls","example":["\n<div><code>\nlet ele;\nfunction setup() {\n  //p5.MediaElement objects are usually created\n  //by calling the createAudio(), createVideo(),\n  //and createCapture() functions.\n  //In this example we create\n  //a new p5.MediaElement via createAudio()\n  ele = createAudio('assets/lucky_dragons.mp3');\n  ele.showControls();\n  background(200);\n  textAlign(CENTER);\n  text('Click to hide Controls!', 10, 25, 70, 80);\n}\nfunction mousePressed() {\n  ele.hideControls();\n  background(200);\n  text('Controls hidden', width / 2, height / 2);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3286,"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3297,"description":"<p>Schedule events to trigger every time a MediaElement\n(audio/video) reaches a playback cue point.</p>\n<p>Accepts a callback function, a time (in seconds) at which to trigger\nthe callback, and an optional parameter for the callback.</p>\n<p>Time will be passed as the first parameter to the callback function,\nand param will be the second parameter.</p>\n","itemtype":"method","name":"addCue","params":[{"name":"time","description":"<p>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.</p>\n","type":"Number"},{"name":"callback","description":"<p>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.</p>\n","type":"Function"},{"name":"value","description":"<p>An object to be passed as the\n                            second parameter to the\n                            callback function.</p>\n","type":"Object","optional":true}],"return":{"description":"id ID of this cue,\n                    useful for removeCue(id)","type":"Number"},"example":["\n<div><code>\n//\n//\nfunction setup() {\n  noCanvas();\n\n  let audioEl = createAudio('assets/beat.mp3');\n  audioEl.showControls();\n\n  // schedule three calls to changeBackground\n  audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\n  audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\n  audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\n  audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\n  audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\n  audioEl.addCue(5.0, changeBackground, color(255, 255, 0));\n}\n\nfunction changeBackground(val) {\n  background(val);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3360,"description":"<p>Remove a callback based on its ID. The ID is returned by the\naddCue method.</p>\n","itemtype":"method","name":"removeCue","params":[{"name":"id","description":"<p>ID of the cue, as returned by addCue</p>\n","type":"Number"}],"example":["\n<div><code>\nlet audioEl, id1, id2;\nfunction setup() {\n  background(255, 255, 255);\n  audioEl = createAudio('assets/beat.mp3');\n  audioEl.showControls();\n  // schedule five calls to changeBackground\n  id1 = audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\n  audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\n  audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\n  audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\n  id2 = audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\n  text('Click to remove first and last Cue!', 10, 25, 70, 80);\n}\nfunction mousePressed() {\n  audioEl.removeCue(id1);\n  audioEl.removeCue(id2);\n}\nfunction changeBackground(val) {\n  background(val);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3402,"description":"<p>Remove all of the callbacks that had originally been scheduled\nvia the addCue method.</p>\n","itemtype":"method","name":"clearCues","params":[{"name":"id","description":"<p>ID of the cue, as returned by addCue</p>\n","type":"Number"}],"example":["\n<div><code>\nlet audioEl;\nfunction setup() {\n  background(255, 255, 255);\n  audioEl = createAudio('assets/beat.mp3');\n  //Show the default MediaElement controls, as determined by the web browser\n  audioEl.showControls();\n  // schedule calls to changeBackground\n  background(200);\n  text('Click to change Cue!', 10, 25, 70, 80);\n  audioEl.addCue(0.5, changeBackground, color(255, 0, 0));\n  audioEl.addCue(1.0, changeBackground, color(0, 255, 0));\n  audioEl.addCue(2.5, changeBackground, color(0, 0, 255));\n  audioEl.addCue(3.0, changeBackground, color(0, 255, 255));\n  audioEl.addCue(4.2, changeBackground, color(255, 255, 0));\n}\nfunction mousePressed() {\n  // here we clear the scheduled callbacks\n  audioEl.clearCues();\n  // then we add some more callbacks\n  audioEl.addCue(1, changeBackground, color(2, 2, 2));\n  audioEl.addCue(3, changeBackground, color(255, 255, 0));\n}\nfunction changeBackground(val) {\n  background(val);\n}\n</code></div>"],"class":"p5.MediaElement","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3468,"description":"<p>Underlying File object. All normal File methods can be called on this.</p>\n","itemtype":"property","name":"file","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3480,"description":"<p>File type (image, text, etc.)</p>\n","itemtype":"property","name":"type","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3486,"description":"<p>File subtype (usually the file extension jpg, png, xml, etc.)</p>\n","itemtype":"property","name":"subtype","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3492,"description":"<p>File name</p>\n","itemtype":"property","name":"name","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3498,"description":"<p>File size</p>\n","itemtype":"property","name":"size","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/dom/dom.js","line":3505,"description":"<p>URL string containing either image data, the text contents of the file or\na parsed object if file is JSON and p5.XML if XML</p>\n","itemtype":"property","name":"data","class":"p5.File","module":"DOM","submodule":"DOM"},{"file":"src/events/acceleration.js","line":11,"description":"<p>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.</p>\n","itemtype":"property","name":"deviceOrientation","type":"Constant","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":23,"description":"<p>The system variable accelerationX always contains the acceleration of the\ndevice along the x axis. Value is represented as meters per second squared.</p>\n","itemtype":"property","name":"accelerationX","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"Magnitude of device acceleration is displayed as ellipse size","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":46,"description":"<p>The system variable accelerationY always contains the acceleration of the\ndevice along the y axis. Value is represented as meters per second squared.</p>\n","itemtype":"property","name":"accelerationY","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"Magnitude of device acceleration is displayed as ellipse size","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":69,"description":"<p>The system variable accelerationZ always contains the acceleration of the\ndevice along the z axis. Value is represented as meters per second squared.</p>\n","itemtype":"property","name":"accelerationZ","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"Magnitude of device acceleration is displayed as ellipse size","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":94,"description":"<p>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.</p>\n","itemtype":"property","name":"pAccelerationX","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":104,"description":"<p>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.</p>\n","itemtype":"property","name":"pAccelerationY","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":114,"description":"<p>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.</p>\n","itemtype":"property","name":"pAccelerationZ","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":135,"description":"<p>The system variable rotationX always contains the rotation of the\ndevice along the x axis. If the sketch <a href=\"#/p5/angleMode\">\nangleMode()</a> is set to DEGREES, the value will be -180 to 180. If\nit is set to RADIANS, the value will be -PI to PI.</p>\n<p>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.</p>\n","itemtype":"property","name":"rotationX","type":"Number","readonly":"","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  //rotateZ(radians(rotationZ));\n  rotateX(radians(rotationX));\n  //rotateY(radians(rotationY));\n  box(200, 200, 200);\n}\n</code>\n</div>"],"alt":"red horizontal line right, green vertical line bottom. black background.","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":168,"description":"<p>The system variable rotationY always contains the rotation of the\ndevice along the y axis. If the sketch <a href=\"#/p5/angleMode\">\nangleMode()</a> 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.</p>\n<p>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.</p>\n","itemtype":"property","name":"rotationY","type":"Number","readonly":"","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  //rotateZ(radians(rotationZ));\n  //rotateX(radians(rotationX));\n  rotateY(radians(rotationY));\n  box(200, 200, 200);\n}\n</code>\n</div>"],"alt":"red horizontal line right, green vertical line bottom. black background.","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":201,"description":"<p>The system variable rotationZ always contains the rotation of the\ndevice along the z axis. If the sketch <a href=\"#/p5/angleMode\">\nangleMode()</a> 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.</p>\n<p>Unlike rotationX and rotationY, this variable is available for devices\nwith a built-in compass only.</p>\n<p>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.</p>\n","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  rotateZ(radians(rotationZ));\n  //rotateX(radians(rotationX));\n  //rotateY(radians(rotationY));\n  box(200, 200, 200);\n}\n</code>\n</div>"],"itemtype":"property","name":"rotationZ","type":"Number","readonly":"","alt":"red horizontal line right, green vertical line bottom. black background.","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":239,"description":"<p>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 <a href=\"#/p5/angleMode\"> angleMode()</a> is set to DEGREES,\nthe value will be -180 to 180. If it is set to RADIANS, the value will\nbe -PI to PI.</p>\n<p>pRotationX can also be used with rotationX to determine the rotate\ndirection of the device along the X-axis.</p>\n","example":["\n<div class='norender'>\n<code>\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);\n</code>\n</div>"],"alt":"no image to display.","itemtype":"property","name":"pRotationX","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":285,"description":"<p>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 <a href=\"#/p5/angleMode\"> angleMode()</a> 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.</p>\n<p>pRotationY can also be used with rotationY to determine the rotate\ndirection of the device along the Y-axis.</p>\n","example":["\n<div class='norender'>\n<code>\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);\n</code>\n</div>"],"alt":"no image to display.","itemtype":"property","name":"pRotationY","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":330,"description":"<p>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 <a href=\"#/p5/angleMode\"> angleMode()</a> 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.</p>\n<p>pRotationZ can also be used with rotationZ to determine the rotate\ndirection of the device along the Z-axis.</p>\n","example":["\n<div class='norender'>\n<code>\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);\n</code>\n</div>"],"alt":"no image to display.","itemtype":"property","name":"pRotationZ","type":"Number","readonly":"","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":389,"description":"<p>When a device is rotated, the axis that triggers the <a href=\"#/p5/deviceTurned\">deviceTurned()</a>\nmethod is stored in the turnAxis variable. The turnAxis variable is only defined within\nthe scope of deviceTurned().</p>\n","itemtype":"property","name":"turnAxis","type":"String","readonly":"","example":["\n<div>\n<code>\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}\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</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device turns\n50x50 black rect in center of canvas. turns white on mobile when x-axis turns","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":428,"description":"<p>The <a href=\"#/p5/setMoveThreshold\">setMoveThreshold()</a> function is used to set the movement threshold for\nthe <a href=\"#/p5/deviceMoved\">deviceMoved()</a> function. The default threshold is set to 0.5.</p>\n","itemtype":"method","name":"setMoveThreshold","params":[{"name":"value","description":"<p>The threshold value</p>\n","type":"Number"}],"example":["\n<div class=\"norender\">\n<code>\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}\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</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device moves","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":471,"description":"<p>The <a href=\"#/p5/setShakeThreshold\">setShakeThreshold()</a> function is used to set the movement threshold for\nthe <a href=\"#/p5/deviceShaken\">deviceShaken()</a> function. The default threshold is set to 30.</p>\n","itemtype":"method","name":"setShakeThreshold","params":[{"name":"value","description":"<p>The threshold value</p>\n","type":"Number"}],"example":["\n<div class=\"norender\">\n<code>\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}\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</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device\nis being shaked","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":515,"description":"<p>The <a href=\"#/p5/deviceMoved\">deviceMoved()</a> 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 <a href=\"https://p5js.org/reference/#/p5/setMoveThreshold\">setMoveThreshold()</a>.</p>\n","itemtype":"method","name":"deviceMoved","example":["\n<div class=\"norender\">\n<code>\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}\nfunction deviceMoved() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device moves","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":546,"description":"<p>The <a href=\"#/p5/deviceTurned\">deviceTurned()</a> function is called when the device rotates by\nmore than 90 degrees continuously.</p>\n<p>The axis that triggers the <a href=\"#/p5/deviceTurned\">deviceTurned()</a> method is stored in the turnAxis\nvariable. The <a href=\"#/p5/deviceTurned\">deviceTurned()</a> method can be locked to trigger on any axis:\nX, Y or Z by comparing the turnAxis variable to 'X', 'Y' or 'Z'.</p>\n","itemtype":"method","name":"deviceTurned","example":["\n<div class=\"norender\">\n<code>\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}\nfunction deviceTurned() {\n  if (value === 0) {\n    value = 255;\n  } else if (value === 255) {\n    value = 0;\n  }\n}\n</code>\n</div>\n<div>\n<code>\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}\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</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device turns\n50x50 black rect in center of canvas. turns white on mobile when x-axis turns","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/acceleration.js","line":604,"description":"<p>The <a href=\"#/p5/deviceShaken\">deviceShaken()</a> 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 <a href=\"https://p5js.org/reference/#/p5/setShakeThreshold\">setShakeThreshold()</a>.</p>\n","itemtype":"method","name":"deviceShaken","example":["\n<div class=\"norender\">\n<code>\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}\nfunction deviceShaken() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>"],"alt":"50x50 black rect in center of canvas. turns white on mobile when device shakes","class":"p5","module":"Events","submodule":"Acceleration"},{"file":"src/events/keyboard.js","line":10,"description":"<p>The boolean system variable <a href=\"#/p5/keyIsPressed\">keyIsPressed</a> is true if any key is pressed\nand false if no keys are pressed.</p>\n","itemtype":"property","name":"keyIsPressed","type":"Boolean","readonly":"","example":["\n<div>\n<code>\nfunction draw() {\n  if (keyIsPressed === true) {\n    fill(0);\n  } else {\n    fill(255);\n  }\n  rect(25, 25, 50, 50);\n}\n</code>\n</div>"],"alt":"50x50 white rect that turns black on keypress.","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":36,"description":"<p>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 <a href=\"#/p5/keyTyped\">keyTyped()</a>. For non-ASCII keys, use the <a href=\"#/p5/keyCode\">keyCode</a>\nvariable.</p>\n","itemtype":"property","name":"key","type":"String","readonly":"","example":["\n<div><code>\n// Click any key to display it!\n// (Not Guaranteed to be Case Sensitive)\nfunction setup() {\n  fill(245, 123, 158);\n  textSize(50);\n}\n\nfunction draw() {\n  background(200);\n  text(key, 33, 65); // Display last key pressed.\n}\n</code></div>"],"alt":"canvas displays any key value that is pressed in pink font.","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":64,"description":"<p>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: <a href=\"http://keycode.info/\">keycode.info</a>.</p>\n","itemtype":"property","name":"keyCode","type":"Integer","readonly":"","example":["\n<div><code>\nlet fillVal = 126;\nfunction draw() {\n  fill(fillVal);\n  rect(25, 25, 50, 50);\n}\n\nfunction keyPressed() {\n  if (keyCode === UP_ARROW) {\n    fillVal = 255;\n  } else if (keyCode === DOWN_ARROW) {\n    fillVal = 0;\n  }\n  return false; // prevent default\n}\n</code></div>\n<div><code>\nfunction draw() {}\nfunction keyPressed() {\n  background('yellow');\n  text(`${key} ${keyCode}`, 10, 40);\n  print(key, ' ', keyCode);\n  return false; // prevent default\n}\n</code></div>"],"alt":"Grey rect center. turns white when up arrow pressed and black when down\nDisplay key pressed and its keyCode in a yellow box","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":105,"description":"<p>The <a href=\"#/p5/keyPressed\">keyPressed()</a> function is called once every time a key is pressed. The\nkeyCode for the key that was pressed is stored in the <a href=\"#/p5/keyCode\">keyCode</a> variable.</p>\n<p>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.</p>\n<p>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 <a href=\"#/p5/keyTyped\">keyTyped()</a> to read the key variable, in which the\ncase of the variable will be distinguished.</p>\n<p>Because of how operating systems handle key repeats, holding down a key\nmay cause multiple calls to <a href=\"#/p5/keyTyped\">keyTyped()</a> (and <a href=\"#/p5/keyReleased\">keyReleased()</a> as well). The\nrate of repeat is set by the operating system and how each computer is\nconfigured.<br><br>\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.</p>\n","itemtype":"method","name":"keyPressed","example":["\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyPressed() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyPressed() {\n  if (keyCode === LEFT_ARROW) {\n    value = 255;\n  } else if (keyCode === RIGHT_ARROW) {\n    value = 0;\n  }\n}\n</code>\n</div>\n<div class=\"norender\">\n<code>\nfunction keyPressed() {\n  // Do something\n  return false; // prevent any default behaviour\n}\n</code>\n</div>"],"alt":"black rect center. turns white when key pressed and black when released\nblack rect center. turns white when left arrow pressed and black when right.","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":191,"description":"<p>The <a href=\"#/p5/keyReleased\">keyReleased()</a> function is called once every time a key is released.\nSee <a href=\"#/p5/key\">key</a> and <a href=\"#/p5/keyCode\">keyCode</a> for more information.<br><br>\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.</p>\n","itemtype":"method","name":"keyReleased","example":["\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyReleased() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n  return false; // prevent any default behavior\n}\n</code>\n</div>"],"alt":"black rect center. turns white when key pressed and black when pressed again","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":242,"description":"<p>The <a href=\"#/p5/keyTyped\">keyTyped()</a> 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 <a href=\"#/p5/keyPressed\">keyPressed()</a> function instead.\nThe most recent key typed will be stored in the key variable.</p>\n<p>Because of how operating systems handle key repeats, holding down a key\nwill cause multiple calls to <a href=\"#/p5/keyTyped\">keyTyped()</a> (and <a href=\"#/p5/keyReleased\">keyReleased()</a> as well). The\nrate of repeat is set by the operating system and how each computer is\nconfigured.<br><br>\nBrowsers may have different default behaviors attached to various key\nevents. To prevent any default behavior for this event, add \"return false\"\nto the end of the method.</p>\n","itemtype":"method","name":"keyTyped","example":["\n<div>\n<code>\nlet value = 0;\nfunction draw() {\n  fill(value);\n  rect(25, 25, 50, 50);\n}\nfunction keyTyped() {\n  if (key === 'a') {\n    value = 255;\n  } else if (key === 'b') {\n    value = 0;\n  }\n  // uncomment to prevent any default behavior\n  // return false;\n}\n</code>\n</div>"],"alt":"black rect center. turns white when 'a' key typed and black when 'b' pressed","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":295,"description":"<p>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.</p>\n","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/keyboard.js","line":305,"description":"<p>The <a href=\"#/p5/keyIsDown\">keyIsDown()</a> 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 <a href=\"#/p5/keyCode\">keyCode</a> names listed\n<a href=\"http://p5js.org/reference/#p5/keyCode\">here</a>.</p>\n","itemtype":"method","name":"keyIsDown","params":[{"name":"code","description":"<p>The key to check for.</p>\n","type":"Number"}],"return":{"description":"whether key is down or not","type":"Boolean"},"example":["\n<div><code>\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}\n</code></div>\n\n<div><code>\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}\n</code></div>"],"alt":"50x50 red ellipse moves left, right, up and down with arrow presses.\n50x50 red ellipse gets bigger or smaller when + or - are pressed.","class":"p5","module":"Events","submodule":"Keyboard"},{"file":"src/events/mouse.js","line":12,"description":"<p>The variable movedX contains the horizontal movement of the mouse since the last frame</p>\n","itemtype":"property","name":"movedX","type":"Number","readonly":"","example":["\n <div class=\"notest\">\n <code>\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 }\n </code>\n </div>"],"alt":"box moves left and right according to mouse movement then slowly back towards the center","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":43,"description":"<p>The variable movedY contains the vertical movement of the mouse since the last frame</p>\n","itemtype":"property","name":"movedY","type":"Number","readonly":"","example":["\n<div class=\"notest\">\n<code>\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(y, 50, 50, 50);\n}\n</code>\n</div>"],"alt":"box moves up and down according to mouse movement then slowly back towards the center","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":80,"description":"<p>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.</p>\n","itemtype":"property","name":"mouseX","type":"Number","readonly":"","example":["\n<div>\n<code>\n// Move the mouse across the canvas\nfunction draw() {\n  background(244, 248, 252);\n  line(mouseX, 0, mouseX, 100);\n}\n</code>\n</div>"],"alt":"horizontal black line moves left and right with mouse x-position","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":106,"description":"<p>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.</p>\n","itemtype":"property","name":"mouseY","type":"Number","readonly":"","example":["\n<div>\n<code>\n// Move the mouse across the canvas\nfunction draw() {\n  background(244, 248, 252);\n  line(0, mouseY, 100, mouseY);\n}\n</code>\n</div>"],"alt":"vertical black line moves up and down with mouse y-position","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":132,"description":"<p>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.</p>\n","itemtype":"property","name":"pmouseX","type":"Number","readonly":"","example":["\n<div>\n<code>\n// Move the mouse across the canvas to leave a trail\nfunction setup() {\n  //slow down the frameRate to make it more visible\n  frameRate(10);\n}\n\nfunction draw() {\n  background(244, 248, 252);\n  line(mouseX, mouseY, pmouseX, pmouseY);\n  print(pmouseX + ' -> ' + mouseX);\n}\n</code>\n</div>"],"alt":"line trail is created from cursor movements. faster movement make longer line.","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":164,"description":"<p>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.</p>\n","itemtype":"property","name":"pmouseY","type":"Number","readonly":"","example":["\n<div>\n<code>\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n  //draw a square only if the mouse is not moving\n  if (mouseY === pmouseY && mouseX === pmouseX) {\n    rect(20, 20, 60, 60);\n  }\n\n  print(pmouseY + ' -> ' + mouseY);\n}\n</code>\n</div>"],"alt":"60x60 black rect center, fuchsia background. rect flickers on mouse movement","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":195,"description":"<p>The system variable winMouseX always contains the current horizontal\nposition of the mouse, relative to (0, 0) of the window.</p>\n","itemtype":"property","name":"winMouseX","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"60x60 black rect y moves with mouse y and fuchsia canvas moves with mouse x","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":233,"description":"<p>The system variable winMouseY always contains the current vertical\nposition of the mouse, relative to (0, 0) of the window.</p>\n","itemtype":"property","name":"winMouseY","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"60x60 black rect x moves with mouse x and fuchsia canvas y moves with mouse y","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":271,"description":"<p>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.</p>\n","itemtype":"property","name":"pwinMouseX","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"fuchsia ellipse moves with mouse x and y. Grows and shrinks with mouse speed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":311,"description":"<p>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.</p>\n","itemtype":"property","name":"pwinMouseY","type":"Number","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"fuchsia ellipse moves with mouse x and y. Grows and shrinks with mouse speed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":351,"description":"<p>Processing automatically tracks if the mouse button is pressed and which\nbutton is pressed. The value of the system variable mouseButton is either\nLEFT, RIGHT, or CENTER depending on which button was pressed last.\nWarning: different browsers may track mouseButton differently.</p>\n","itemtype":"property","name":"mouseButton","type":"Constant","readonly":"","example":["\n<div>\n<code>\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n\n  if (mouseIsPressed) {\n    if (mouseButton === LEFT) {\n      ellipse(50, 50, 50, 50);\n    }\n    if (mouseButton === RIGHT) {\n      rect(25, 25, 50, 50);\n    }\n    if (mouseButton === CENTER) {\n      triangle(23, 75, 50, 20, 78, 75);\n    }\n  }\n\n  print(mouseButton);\n}\n</code>\n</div>"],"alt":"50x50 black ellipse appears on center of fuchsia canvas on mouse click/press.","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":389,"description":"<p>The boolean system variable mouseIsPressed is true if the mouse is pressed\nand false if not.</p>\n","itemtype":"property","name":"mouseIsPressed","type":"Boolean","readonly":"","example":["\n<div>\n<code>\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n\n  if (mouseIsPressed) {\n    ellipse(50, 50, 50, 50);\n  } else {\n    rect(25, 25, 50, 50);\n  }\n\n  print(mouseIsPressed);\n}\n</code>\n</div>"],"alt":"black 50x50 rect becomes ellipse with mouse click/press. fuchsia background.","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":481,"description":"<p>The <a href=\"#/p5/mouseMoved\">mouseMoved()</a> function is called every time the mouse moves and a mouse\nbutton is not pressed.<br><br>\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.</p>\n","itemtype":"method","name":"mouseMoved","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction mouseMoved() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mouseMoved() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseMoved(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect becomes lighter with mouse movements until white then resets\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":535,"description":"<p>The <a href=\"#/p5/mouseDragged\">mouseDragged()</a> function is called once every time the mouse moves and\na mouse button is pressed. If no <a href=\"#/p5/mouseDragged\">mouseDragged()</a> function is defined, the\n<a href=\"#/p5/touchMoved\">touchMoved()</a> function will be called instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"mouseDragged","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction mouseDragged() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mouseDragged() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseDragged(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns lighter with mouse click and drag until white, resets\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":615,"description":"<p>The <a href=\"#/p5/mousePressed\">mousePressed()</a> 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\n<a href=\"#/p5/mousePressed\">mousePressed()</a> function is defined, the <a href=\"#/p5/touchStarted\">touchStarted()</a> function will be\ncalled instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"mousePressed","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\n// Click 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}\nfunction mousePressed() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mousePressed() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mousePressed(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns white with mouse click/press.\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":696,"description":"<p>The <a href=\"#/p5/mouseReleased\">mouseReleased()</a> function is called every time a mouse button is\nreleased. If no <a href=\"#/p5/mouseReleased\">mouseReleased()</a> function is defined, the <a href=\"#/p5/touchEnded\">touchEnded()</a>\nfunction will be called instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"mouseReleased","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction mouseReleased() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mouseReleased() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseReleased(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns white with mouse click/press.\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":772,"description":"<p>The <a href=\"#/p5/mouseClicked\">mouseClicked()</a> function is called once after a mouse button has been\npressed and then released.<br><br>\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 <a href=\"#/p5/mousePressed\">mousePressed()</a> or <a href=\"#/p5/mouseReleased\">mouseReleased()</a>.<br><br>\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.</p>\n","itemtype":"method","name":"mouseClicked","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\n\nfunction mouseClicked() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction mouseClicked() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction mouseClicked(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns white with mouse click/press.\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":841,"description":"<p>The <a href=\"#/p5/doubleClicked\">doubleClicked()</a> 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:\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/Events/dblclick\">https://developer.mozilla.org/en-US/docs/Web/Events/dblclick</a></p>\n","itemtype":"method","name":"doubleClicked","params":[{"name":"event","description":"<p>optional MouseEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\n\nfunction doubleClicked() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction doubleClicked() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a MouseEvent object\n// as a callback argument\nfunction doubleClicked(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"black 50x50 rect turns white with mouse doubleClick/press.\nno image displayed","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":926,"description":"<p>The function <a href=\"#/p5/mouseWheel\">mouseWheel()</a> is executed every time a vertical mouse wheel\nevent is detected either triggered by an actual mouse wheel or by a\ntouchpad.<br><br>\nThe event.delta property returns the amount the mouse wheel\nhave scrolled. The values can be positive or negative depending on the\nscroll direction (on OS X with \"natural\" scrolling enabled, the signs\nare inverted).<br><br>\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.<br><br>\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.</p>\n","itemtype":"method","name":"mouseWheel","params":[{"name":"event","description":"<p>optional WheelEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\nlet pos = 25;\n\nfunction draw() {\n  background(237, 34, 93);\n  fill(0);\n  rect(25, pos, 50, 50);\n}\n\nfunction mouseWheel(event) {\n  print(event.delta);\n  //move the square according to the vertical scroll amount\n  pos += event.delta;\n  //uncomment to block page scrolling\n  //return false;\n}\n</code>\n</div>"],"alt":"black 50x50 rect moves up and down with vertical scroll. fuchsia background","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":979,"description":"<p>The function <a href=\"#/p5/requestPointerLock\">requestPointerLock()</a>\nlocks the pointer to its current position and makes it invisible.\nUse <a href=\"#/p5/movedX\">movedX</a> and <a href=\"#/p5/movedY\">movedY</a> 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.</p>\n","itemtype":"method","name":"requestPointerLock","example":["\n<div class=\"notest\">\n<code>\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}\n</code>\n</div>"],"alt":"3D scene moves according to mouse mouse movement in a first person perspective","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/mouse.js","line":1025,"description":"<p>The function <a href=\"#/p5/exitPointerLock\">exitPointerLock()</a>\nexits a previously triggered <a href=\"#/p5/requestPointerLock\">pointer Lock</a>\nfor example to make ui elements usable etc</p>\n","itemtype":"method","name":"exitPointerLock","example":["\n<div class=\"notest\">\n<code>\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}\nfunction mouseClicked() {\n  if (!locked) {\n    locked = true;\n    requestPointerLock();\n  } else {\n    exitPointerLock();\n    locked = false;\n  }\n}\n</code>\n</div>"],"alt":"cursor gets locked / unlocked on mouse-click","class":"p5","module":"Events","submodule":"Mouse"},{"file":"src/events/touch.js","line":10,"description":"<p>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.</p>\n<p>The touches[] array is not supported on Safari and IE on touch-based\ndesktops (laptops).</p>\n","itemtype":"property","name":"touches","type":"Object[]","readonly":"","example":["\n<div>\n<code>\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}\n</code>\n</div>"],"alt":"Number of touches currently registered are displayed on the canvas","class":"p5","module":"Events","submodule":"Touch"},{"file":"src/events/touch.js","line":71,"description":"<p>The touchStarted() function is called once after every time a touch is\nregistered. If no <a href=\"#/p5/touchStarted\">touchStarted()</a> function is defined, the <a href=\"#/p5/mousePressed\">mousePressed()</a>\nfunction will be called instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"touchStarted","params":[{"name":"event","description":"<p>optional TouchEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction touchStarted() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction touchStarted() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a TouchEvent object\n// as a callback argument\nfunction touchStarted(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"50x50 black rect turns white with touch event.\nno image displayed","class":"p5","module":"Events","submodule":"Touch"},{"file":"src/events/touch.js","line":151,"description":"<p>The <a href=\"#/p5/touchMoved\">touchMoved()</a> function is called every time a touch move is registered.\nIf no <a href=\"#/p5/touchMoved\">touchMoved()</a> function is defined, the <a href=\"#/p5/mouseDragged\">mouseDragged()</a> function will\nbe called instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"touchMoved","params":[{"name":"event","description":"<p>optional TouchEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction touchMoved() {\n  value = value + 5;\n  if (value > 255) {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction touchMoved() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a TouchEvent object\n// as a callback argument\nfunction touchMoved(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"50x50 black rect turns lighter with touch until white. resets\nno image displayed","class":"p5","module":"Events","submodule":"Touch"},{"file":"src/events/touch.js","line":223,"description":"<p>The <a href=\"#/p5/touchEnded\">touchEnded()</a> function is called every time a touch ends. If no\n<a href=\"#/p5/touchEnded\">touchEnded()</a> function is defined, the <a href=\"#/p5/mouseReleased\">mouseReleased()</a> function will be\ncalled instead if it is defined.<br><br>\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.</p>\n","itemtype":"method","name":"touchEnded","params":[{"name":"event","description":"<p>optional TouchEvent callback argument.</p>\n","type":"Object","optional":true}],"example":["\n<div>\n<code>\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}\nfunction touchEnded() {\n  if (value === 0) {\n    value = 255;\n  } else {\n    value = 0;\n  }\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nfunction touchEnded() {\n  ellipse(mouseX, mouseY, 5, 5);\n  // prevent default\n  return false;\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// returns a TouchEvent object\n// as a callback argument\nfunction touchEnded(event) {\n  console.log(event);\n}\n</code>\n</div>"],"alt":"50x50 black rect turns white with touch.\nno image displayed","class":"p5","module":"Events","submodule":"Touch"},{"file":"src/image/filters.js","line":3,"description":"<p>This module defines the filters for use with image buffers.</p>\n<p>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.</p>\n<p>Generally speaking users of this module will use the Filters.apply method\non a canvas to create an effect.</p>\n<p>A number of functions are borrowed/adapted from\n<a href=\"http://www.html5rocks.com/en/tutorials/canvas/imagefilters/\">http://www.html5rocks.com/en/tutorials/canvas/imagefilters/</a>\nor the java processing implementation.</p>\n","class":"p5","module":"Events"},{"file":"src/image/image.js","line":8,"description":"<p>This module defines the p5 methods for the <a href=\"#/p5.Image\">p5.Image</a> class\nfor drawing images to the main display canvas.</p>\n","class":"p5","module":"Image","submodule":"Image"},{"file":"src/image/image.js","line":15,"description":"<p>Creates a new <a href=\"#/p5.Image\">p5.Image</a> (the datatype for storing images). This provides a\nfresh buffer of pixels to play with. Set the size of the buffer with the\nwidth and height parameters.</p>\n<p>.<a href=\"#/p5.Image/pixels\">pixels</a> gives access to an array containing the values for all the pixels\nin the display window.\nThese values are numbers. This array is the size (including an appropriate\nfactor for the <a href=\"#/p5/pixelDensity\">pixelDensity</a>) of the display window x4,\nrepresenting the R, G, B, A values in order for each pixel, moving from\nleft to right across each row, then down each column. See .<a href=\"#/p5.Image/pixels\">pixels</a> for\nmore info. It may also be simpler to use <a href=\"#/p5.Image/set\">set()</a> or <a href=\"#/p5.Image/get\">get()</a>.</p>\n<p>Before accessing the pixels of an image, the data must loaded with the\n<a href=\"#/p5.Image/loadPixels\">loadPixels()</a> function. After the array data has been modified, the\n<a href=\"#/p5.Image/updatePixels\">updatePixels()</a> function must be run to update the changes.</p>\n","itemtype":"method","name":"createImage","params":[{"name":"width","description":"<p>width in pixels</p>\n","type":"Integer"},{"name":"height","description":"<p>height in pixels</p>\n","type":"Integer"}],"return":{"description":"the <a href=\"#/p5.Image\">p5.Image</a> object","type":"p5.Image"},"example":["\n<div>\n<code>\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < img.width; i++) {\n  for (let j = 0; j < img.height; j++) {\n    img.set(i, j, color(0, 90, 102));\n  }\n}\nimg.updatePixels();\nimage(img, 17, 17);\n</code>\n</div>\n\n<div>\n<code>\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < img.width; i++) {\n  for (let j = 0; j < img.height; j++) {\n    img.set(i, j, color(0, 90, 102, (i % img.width) * 2));\n  }\n}\nimg.updatePixels();\nimage(img, 17, 17);\nimage(img, 34, 34);\n</code>\n</div>\n\n<div>\n<code>\nlet pink = color(255, 102, 204);\nlet img = createImage(66, 66);\nimg.loadPixels();\nlet d = pixelDensity();\nlet halfImage = 4 * (img.width * d) * (img.height / 2 * d);\nfor (let i = 0; i < halfImage; i += 4) {\n  img.pixels[i] = red(pink);\n  img.pixels[i + 1] = green(pink);\n  img.pixels[i + 2] = blue(pink);\n  img.pixels[i + 3] = alpha(pink);\n}\nimg.updatePixels();\nimage(img, 17, 17);\n</code>\n</div>"],"alt":"66x66 dark turquoise rect in center of canvas.\n2 gradated dark turquoise rects fade left. 1 center 1 bottom right of canvas\nno image displayed","class":"p5","module":"Image","submodule":"Image"},{"file":"src/image/image.js","line":94,"description":"<p>Save the current canvas as an image. The browser will either save the\nfile immediately, or prompt the user with a dialogue window.</p>\n","itemtype":"method","name":"saveCanvas","example":["\n <div class='norender notest'><code>\n function setup() {\n let c = createCanvas(100, 100);\n background(255, 0, 0);\n saveCanvas(c, 'myCanvas', 'jpg');\n }\n </code></div>\n <div class='norender notest'><code>\n // note that this example has the same result as above\n // if no canvas is specified, defaults to main canvas\n function setup() {\n let c = createCanvas(100, 100);\n background(255, 0, 0);\n saveCanvas('myCanvas', 'jpg');\n\n // all of the following are valid\n saveCanvas(c, 'myCanvas', 'jpg');\n saveCanvas(c, 'myCanvas.jpg');\n saveCanvas(c, 'myCanvas');\n saveCanvas(c);\n saveCanvas('myCanvas', 'png');\n saveCanvas('myCanvas');\n saveCanvas();\n }\n </code></div>"],"alt":"no image displayed\n no image displayed\n no image displayed","class":"p5","module":"Image","submodule":"Image","overloads":[{"line":94,"params":[{"name":"selectedCanvas","description":"<p>a variable\n                                representing a specific html5 canvas (optional)</p>\n","type":"p5.Element|HTMLCanvasElement"},{"name":"filename","description":"","type":"String","optional":true},{"name":"extension","description":"<p>'jpg' or 'png'</p>\n","type":"String","optional":true}]},{"line":136,"params":[{"name":"filename","description":"","type":"String","optional":true},{"name":"extension","description":"","type":"String","optional":true}]}]},{"file":"src/image/image.js","line":413,"description":"<p>Capture a sequence of frames that can be used to create a movie.\nAccepts a callback. For example, you may wish to send the frames\nto a server where they can be stored or converted into a movie.\nIf no callback is provided, the browser will pop up save dialogues in an\nattempt to download all of the images that have just been created. With the\ncallback provided the image data isn't saved by default but instead passed\nas an argument to the callback function as an array of objects, with the\nsize of array equal to the total number of frames.</p>\n<p>Note that <a href=\"#/p5.Image/saveFrames\">saveFrames()</a> will only save the first 15 frames of an animation.\nTo export longer animations, you might look into a library like\n<a href=\"https://github.com/spite/ccapture.js/\">ccapture.js</a>.</p>\n","itemtype":"method","name":"saveFrames","params":[{"name":"filename","description":"","type":"String"},{"name":"extension","description":"<p>'jpg' or 'png'</p>\n","type":"String"},{"name":"duration","description":"<p>Duration in seconds to save the frames for.</p>\n","type":"Number"},{"name":"framerate","description":"<p>Framerate to save the frames in.</p>\n","type":"Number"},{"name":"callback","description":"<p>A callback function that will be executed\n                                to handle the image data. This function\n                                should accept an array as argument. The\n                                array will contain the specified number of\n                                frames of objects. Each object has three\n                                properties: imageData - an\n                                image/octet-stream, filename and extension.</p>\n","type":"Function(Array)","optional":true}],"example":["\n<div><code>\n function draw() {\n background(mouseX);\n }\n\n function mousePressed() {\n saveFrames('out', 'png', 1, 25, data => {\n   print(data);\n });\n }\n</code></div>"],"alt":"canvas background goes from light to dark with mouse x.","class":"p5","module":"Image","submodule":"Image"},{"file":"src/image/loading_displaying.js","line":18,"description":"<p>Loads an image from a path and creates a <a href=\"#/p5.Image\">p5.Image</a> from it.</p>\n<p>The image may not be immediately available for rendering\nIf you want to ensure that the image is ready before doing\nanything with it, place the <a href=\"#/p5/loadImage\">loadImage()</a> call in <a href=\"#/p5/preload\">preload()</a>.\nYou may also supply a callback function to handle the image when it's ready.</p>\n<p>The path to the image should be relative to the HTML file\nthat links in your sketch. Loading an image from a URL or other\nremote location may be blocked due to your browser's built-in\nsecurity.</p>\n<p>You can also pass in a string of a base64 encoded image as an alternative to the file path.\nRemember to add \"data:image/png;base64,\" in front of the string.</p>\n","itemtype":"method","name":"loadImage","params":[{"name":"path","description":"<p>Path of the image to be loaded</p>\n","type":"String"},{"name":"successCallback","description":"<p>Function to be called once\n                               the image is loaded. Will be passed the\n                               <a href=\"#/p5.Image\">p5.Image</a>.</p>\n","type":"function(p5.Image)","optional":true},{"name":"failureCallback","description":"<p>called with event error if\n                               the image fails to load.</p>\n","type":"Function(Event)","optional":true}],"return":{"description":"the <a href=\"#/p5.Image\">p5.Image</a> object","type":"p5.Image"},"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n}\n</code>\n</div>\n<div>\n<code>\nfunction setup() {\n  // here we use a callback to display the image after loading\n  loadImage('assets/laDefense.jpg', img => {\n    image(img, 0, 0);\n  });\n}\n</code>\n</div>"],"alt":"image of the underside of a white umbrella and grided ceililng above\nimage of the underside of a white umbrella and grided ceililng above","class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/loading_displaying.js","line":153,"description":"<p>Helper function for loading GIF-based images</p>\n","class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/loading_displaying.js","line":250,"description":"<p>Draw an image to the p5.js canvas.</p>\n<p>This function can be used with different numbers of parameters. The\nsimplest use requires only three parameters: img, x, and y—where (x, y) is\nthe position of the image. Two more parameters can optionally be added to\nspecify the width and height of the image.</p>\n<p>This function can also be used with all eight Number parameters. To\ndifferentiate between all these parameters, p5.js uses the language of\n\"destination rectangle\" (which corresponds to \"dx\", \"dy\", etc.) and \"source\nimage\" (which corresponds to \"sx\", \"sy\", etc.) below. Specifying the\n\"source image\" dimensions can be useful when you want to display a\nsubsection of the source image instead of the whole thing. Here's a diagram\nto explain further:\n<img src=\"assets/drawImage.png\"></img></p>\n","itemtype":"method","name":"image","example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  // Top-left corner of the img is at (0, 0)\n  // Width and height are the img's original width and height\n  image(img, 0, 0);\n}\n</code>\n</div>\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  background(50);\n  // Top-left corner of the img is at (10, 10)\n  // Width and height are 50 x 50\n  image(img, 10, 10, 50, 50);\n}\n</code>\n</div>\n<div>\n<code>\nfunction setup() {\n  // Here, we use a callback to display the image after loading\n  loadImage('assets/laDefense.jpg', img => {\n    image(img, 0, 0);\n  });\n}\n</code>\n</div>\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/gradient.png');\n}\nfunction setup() {\n  // 1. Background image\n  // Top-left corner of the img is at (0, 0)\n  // Width and height are the img's original width and height, 100 x 100\n  image(img, 0, 0);\n  // 2. Top right image\n  // Top-left corner of destination rectangle is at (50, 0)\n  // Destination rectangle width and height are 40 x 20\n  // The next parameters are relative to the source image:\n  // - Starting at position (50, 50) on the source image, capture a 50 x 50\n  // subsection\n  // - Draw this subsection to fill the dimensions of the destination rectangle\n  image(img, 50, 0, 40, 20, 50, 50, 50, 50);\n}\n</code>\n</div>"],"alt":"image of the underside of a white umbrella and gridded ceiling above\nimage of the underside of a white umbrella and gridded ceiling above","class":"p5","module":"Image","submodule":"Loading & Displaying","overloads":[{"line":250,"params":[{"name":"img","description":"<p>the image to display</p>\n","type":"p5.Image|p5.Element"},{"name":"x","description":"<p>the x-coordinate of the top-left corner of the image</p>\n","type":"Number"},{"name":"y","description":"<p>the y-coordinate of the top-left corner of the image</p>\n","type":"Number"},{"name":"width","description":"<p>the width to draw the image</p>\n","type":"Number","optional":true},{"name":"height","description":"<p>the height to draw the image</p>\n","type":"Number","optional":true}]},{"line":337,"params":[{"name":"img","description":"","type":"p5.Image|p5.Element"},{"name":"dx","description":"<p>the x-coordinate of the destination\n                          rectangle in which to draw the source image</p>\n","type":"Number"},{"name":"dy","description":"<p>the y-coordinate of the destination\n                          rectangle in which to draw the source image</p>\n","type":"Number"},{"name":"dWidth","description":"<p>the width of the destination rectangle</p>\n","type":"Number"},{"name":"dHeight","description":"<p>the height of the destination rectangle</p>\n","type":"Number"},{"name":"sx","description":"<p>the x-coordinate of the subsection of the source\nimage to draw into the destination rectangle</p>\n","type":"Number"},{"name":"sy","description":"<p>the y-coordinate of the subsection of the source\nimage to draw into the destination rectangle</p>\n","type":"Number"},{"name":"sWidth","description":"<p>the width of the subsection of the\n                          source image to draw into the destination\n                          rectangle</p>\n","type":"Number","optional":true},{"name":"sHeight","description":"<p>the height of the subsection of the\n                           source image to draw into the destination rectangle</p>\n","type":"Number","optional":true}]}]},{"file":"src/image/loading_displaying.js","line":420,"description":"<p>Sets the fill value for displaying images. Images can be tinted to\nspecified colors or made transparent by including an alpha value.</p>\n<p>To apply transparency to an image without affecting its color, use\nwhite as the tint color and specify an alpha value. For instance,\ntint(255, 128) will make an image 50% transparent (assuming the default\nalpha range of 0-255, which can be changed with <a href=\"#/p5/colorMode\">colorMode()</a>).</p>\n<p>The value for the gray parameter must be less than or equal to the current\nmaximum value as specified by <a href=\"#/p5/colorMode\">colorMode()</a>. The default maximum value is\n255.</p>\n","itemtype":"method","name":"tint","example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  tint(0, 153, 204); // Tint blue\n  image(img, 50, 0);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  tint(0, 153, 204, 126); // Tint blue and set transparency\n  image(img, 50, 0);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  tint(255, 126); // Apply transparency without changing color\n  image(img, 50, 0);\n}\n</code>\n</div>"],"alt":"2 side by side images of umbrella and ceiling, one image with blue tint\nImages of umbrella and ceiling, one half of image with blue tint\n2 side by side images of umbrella and ceiling, one image translucent","class":"p5","module":"Image","submodule":"Loading & Displaying","overloads":[{"line":420,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}]},{"line":491,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}]},{"line":496,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}]},{"line":502,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}]},{"line":508,"params":[{"name":"color","description":"<p>the tint color</p>\n","type":"p5.Color"}]}]},{"file":"src/image/loading_displaying.js","line":518,"description":"<p>Removes the current fill value for displaying images and reverts to\ndisplaying images with their original hues.</p>\n","itemtype":"method","name":"noTint","example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  tint(0, 153, 204); // Tint blue\n  image(img, 0, 0);\n  noTint(); // Disable tint\n  image(img, 50, 0);\n}\n</code>\n</div>"],"alt":"2 side by side images of bricks, left image with blue tint","class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/loading_displaying.js","line":582,"description":"<p>Set image mode. Modifies the location from which images are drawn by\nchanging the way in which parameters given to <a href=\"#/p5/image\">image()</a> are interpreted.\nThe default mode is imageMode(CORNER), which interprets the second and\nthird parameters of <a href=\"#/p5/image\">image()</a> as the upper-left corner of the image. If\ntwo additional parameters are specified, they are used to set the image's\nwidth and height.</p>\n<p>imageMode(CORNERS) interprets the second and third parameters of <a href=\"#/p5/image\">image()</a>\nas the location of one corner, and the fourth and fifth parameters as the\nopposite corner.</p>\n<p>imageMode(CENTER) interprets the second and third parameters of <a href=\"#/p5/image\">image()</a>\nas the image's center point. If two additional parameters are specified,\nthey are used to set the image's width and height.</p>\n","itemtype":"method","name":"imageMode","params":[{"name":"mode","description":"<p>either CORNER, CORNERS, or CENTER</p>\n","type":"Constant"}],"example":["\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  imageMode(CORNER);\n  image(img, 10, 10, 50, 50);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  imageMode(CORNERS);\n  image(img, 10, 10, 90, 40);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  imageMode(CENTER);\n  image(img, 50, 50, 80, 80);\n}\n</code>\n</div>"],"alt":"small square image of bricks\nhorizontal rectangle image of bricks\nlarge square image of bricks","class":"p5","module":"Image","submodule":"Loading & Displaying"},{"file":"src/image/p5.Image.js","line":9,"description":"<p>This module defines the <a href=\"#/p5.Image\">p5.Image</a> class and P5 methods for\ndrawing images to the main display canvas.</p>\n","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":88,"description":"<p>Image width.</p>\n","itemtype":"property","name":"width","type":"Number","readonly":"","example":["\n<div><code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100);\n  image(img, 0, 0);\n  for (let i = 0; i < img.width; i++) {\n    let c = img.get(i, img.height / 2);\n    stroke(c);\n    line(i, height / 2, i, height);\n  }\n}\n</code></div>"],"alt":"rocky mountains in top and horizontal lines in corresponding colors in bottom.","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":115,"description":"<p>Image height.</p>\n","itemtype":"property","name":"height","type":"Number","readonly":"","example":["\n<div><code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100);\n  image(img, 0, 0);\n  for (let i = 0; i < img.height; i++) {\n    let c = img.get(img.width / 2, i);\n    stroke(c);\n    line(0, i, width / 2, i);\n  }\n}\n</code></div>"],"alt":"rocky mountains on right and vertical lines in corresponding colors on left.","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":152,"description":"<p>Array containing the values for all the pixels in the display window.\nThese values are numbers. This array is the size (include an appropriate\nfactor for pixelDensity) of the display window x4,\nrepresenting the R, G, B, A values in order for each pixel, moving from\nleft to right across each row, then down each column. Retina and other\nhigh density displays may have more pixels (by a factor of\npixelDensity^2).\nFor example, if the image is 100x100 pixels, there will be 40,000. With\npixelDensity = 2, there will be 160,000. The first four values\n(indices 0-3) in the array will be the R, G, B, A values of the pixel at\n(0, 0). The second four values (indices 4-7) will contain the R, G, B, A\nvalues of the pixel at (1, 0). More generally, to set values for a pixel\nat (x, y):</p>\n<pre><code class=\"language-javascript\">let d = pixelDensity();\nfor (let i = 0; i < d; i++) {\n  for (let j = 0; j < d; j++) {\n    // loop over\n    index = 4 * ((y * d + j) * width * d + (x * d + i));\n    pixels[index] = r;\n    pixels[index+1] = g;\n    pixels[index+2] = b;\n    pixels[index+3] = a;\n  }\n}</code></pre>\n<p>Before accessing this array, the data must loaded with the <a href=\"#/p5.Image/loadPixels\">loadPixels()</a>\nfunction. After the array data has been modified, the <a href=\"#/p5.Image/updatePixels\">updatePixels()</a>\nfunction must be run to update the changes.</p>\n","itemtype":"property","name":"pixels","type":"Number[]","example":["\n<div>\n<code>\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < img.width; i++) {\n  for (let j = 0; j < img.height; j++) {\n    img.set(i, j, color(0, 90, 102));\n  }\n}\nimg.updatePixels();\nimage(img, 17, 17);\n</code>\n</div>\n<div>\n<code>\nlet pink = color(255, 102, 204);\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < 4 * (width * height / 2); i += 4) {\n  img.pixels[i] = red(pink);\n  img.pixels[i + 1] = green(pink);\n  img.pixels[i + 2] = blue(pink);\n  img.pixels[i + 3] = alpha(pink);\n}\nimg.updatePixels();\nimage(img, 17, 17);\n</code>\n</div>"],"alt":"66x66 turquoise rect in center of canvas\n66x66 pink rect in center of canvas","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":222,"description":"<p>Helper function for animating GIF-based images with time</p>\n","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":248,"description":"<p>Helper fxn for sharing pixel methods</p>\n","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":256,"description":"<p>Loads the pixels data for this image into the [pixels] attribute.</p>\n","itemtype":"method","name":"loadPixels","example":["\n<div><code>\nlet myImage;\nlet halfImage;\n\nfunction preload() {\n  myImage = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  myImage.loadPixels();\n  halfImage = 4 * myImage.width * myImage.height / 2;\n  for (let i = 0; i < halfImage; i++) {\n    myImage.pixels[i + halfImage] = myImage.pixels[i];\n  }\n  myImage.updatePixels();\n}\n\nfunction draw() {\n  image(myImage, 0, 0, width, height);\n}\n</code></div>"],"alt":"2 images of rocky mountains vertically stacked","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":291,"description":"<p>Updates the backing canvas for this image with the contents of\nthe [pixels] array.</p>\n<p>If this image is an animated GIF then the pixels will be updated\nin the frame that is currently displayed.</p>\n","itemtype":"method","name":"updatePixels","example":["\n<div><code>\nlet myImage;\nlet halfImage;\n\nfunction preload() {\n  myImage = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  myImage.loadPixels();\n  halfImage = 4 * myImage.width * myImage.height / 2;\n  for (let i = 0; i < halfImage; i++) {\n    myImage.pixels[i + halfImage] = myImage.pixels[i];\n  }\n  myImage.updatePixels();\n}\n\nfunction draw() {\n  image(myImage, 0, 0, width, height);\n}\n</code></div>"],"alt":"2 images of rocky mountains vertically stacked","class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":291,"params":[{"name":"x","description":"<p>x-offset of the target update area for the\n                             underlying canvas</p>\n","type":"Integer"},{"name":"y","description":"<p>y-offset of the target update area for the\n                             underlying canvas</p>\n","type":"Integer"},{"name":"w","description":"<p>height of the target update area for the\n                             underlying canvas</p>\n","type":"Integer"},{"name":"h","description":"<p>height of the target update area for the\n                             underlying canvas</p>\n","type":"Integer"}]},{"line":333,"params":[]}]},{"file":"src/image/p5.Image.js","line":341,"description":"<p>Get a region of pixels from an image.</p>\n<p>If no params are passed, the whole image is returned.\nIf x and y are the only params passed a single pixel is extracted.\nIf all params are passed a rectangle region is extracted and a <a href=\"#/p5.Image\">p5.Image</a>\nis returned.</p>\n","itemtype":"method","name":"get","return":{"description":"the rectangle <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"},"example":["\n<div><code>\nlet myImage;\nlet c;\n\nfunction preload() {\n  myImage = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  background(myImage);\n  noStroke();\n  c = myImage.get(60, 90);\n  fill(c);\n  rect(25, 25, 50, 50);\n}\n\n//get() returns color here\n</code></div>"],"alt":"image of rocky mountains with 50x50 green rect in front","class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":341,"params":[{"name":"x","description":"<p>x-coordinate of the pixel</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the pixel</p>\n","type":"Number"},{"name":"w","description":"<p>width</p>\n","type":"Number"},{"name":"h","description":"<p>height</p>\n","type":"Number"}],"return":{"description":"the rectangle <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"}},{"line":378,"params":[],"return":{"description":"the whole <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"}},{"line":382,"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/image/p5.Image.js","line":395,"description":"<p>Set the color of a single pixel or write an image into\nthis <a href=\"#/p5.Image\">p5.Image</a>.</p>\n<p>Note that for a large number of pixels this will\nbe slower than directly manipulating the pixels array\nand then calling <a href=\"#/p5.Image/updatePixels\">updatePixels()</a>.</p>\n","itemtype":"method","name":"set","params":[{"name":"x","description":"<p>x-coordinate of the pixel</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the pixel</p>\n","type":"Number"},{"name":"a","description":"<p>grayscale value | pixel array |\n                               a <a href=\"#/p5.Color\">p5.Color</a> | image to copy</p>\n","type":"Number|Number[]|Object"}],"example":["\n<div>\n<code>\nlet img = createImage(66, 66);\nimg.loadPixels();\nfor (let i = 0; i < img.width; i++) {\n  for (let j = 0; j < img.height; j++) {\n    img.set(i, j, color(0, 90, 102, (i % img.width) * 2));\n  }\n}\nimg.updatePixels();\nimage(img, 17, 17);\nimage(img, 34, 34);\n</code>\n</div>"],"alt":"2 gradated dark turquoise rects fade left. 1 center 1 bottom right of canvas","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":432,"description":"<p>Resize the image to a new width and height. To make the image scale\nproportionally, use 0 as the value for the wide or high parameter.\nFor instance, to make the width of an image 150 pixels, and change\nthe height using the same proportion, use resize(150, 0).</p>\n","itemtype":"method","name":"resize","params":[{"name":"width","description":"<p>the resized image width</p>\n","type":"Number"},{"name":"height","description":"<p>the resized image height</p>\n","type":"Number"}],"example":["\n<div><code>\nlet img;\n\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction draw() {\n  image(img, 0, 0);\n}\n\nfunction mousePressed() {\n  img.resize(50, 100);\n}\n</code></div>"],"alt":"image of rocky mountains. zoomed in","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":543,"description":"<p>Copies a region of pixels from one image to another. If no\nsrcImage is specified this is used as the source. If the source\nand destination regions aren't the same size, it will\nautomatically resize source pixels to fit the specified\ntarget region.</p>\n","itemtype":"method","name":"copy","example":["\n<div><code>\nlet photo;\nlet bricks;\nlet x;\nlet y;\n\nfunction preload() {\n  photo = loadImage('assets/rockies.jpg');\n  bricks = loadImage('assets/bricks.jpg');\n}\n\nfunction setup() {\n  x = bricks.width / 2;\n  y = bricks.height / 2;\n  photo.copy(bricks, 0, 0, x, y, 0, 0, x, y);\n  image(photo, 0, 0);\n}\n</code></div>"],"alt":"image of rocky mountains and smaller image on top of bricks at top left","class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":543,"params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image|p5.Element"},{"name":"sx","description":"<p>X coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sy","description":"<p>Y coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sw","description":"<p>source image width</p>\n","type":"Integer"},{"name":"sh","description":"<p>source image height</p>\n","type":"Integer"},{"name":"dx","description":"<p>X coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dy","description":"<p>Y coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dw","description":"<p>destination image width</p>\n","type":"Integer"},{"name":"dh","description":"<p>destination image height</p>\n","type":"Integer"}]},{"line":583,"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":598,"description":"<p>Masks part of an image from displaying by loading another\nimage and using its alpha channel as an alpha channel for\nthis image.</p>\n","itemtype":"method","name":"mask","params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image"}],"example":["\n<div><code>\nlet photo, maskImage;\nfunction preload() {\n  photo = loadImage('assets/rockies.jpg');\n  maskImage = loadImage('assets/mask2.png');\n}\n\nfunction setup() {\n  createCanvas(100, 100);\n  photo.mask(maskImage);\n  image(photo, 0, 0);\n}\n</code></div>"],"alt":"image of rocky mountains with white at right\n\nhttp://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":659,"description":"<p>Applies an image filter to a <a href=\"#/p5.Image\">p5.Image</a></p>\n","itemtype":"method","name":"filter","params":[{"name":"filterType","description":"<p>either THRESHOLD, GRAY, OPAQUE, INVERT,\n                               POSTERIZE, BLUR, ERODE, DILATE or BLUR.\n                               See Filters.js for docs on\n                               each available filter</p>\n","type":"Constant"},{"name":"filterParam","description":"<p>an optional parameter unique\n                               to each filter, see above</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\nlet photo1;\nlet photo2;\n\nfunction preload() {\n  photo1 = loadImage('assets/rockies.jpg');\n  photo2 = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  photo2.filter(GRAY);\n  image(photo1, 0, 0);\n  image(photo2, width / 2, 0);\n}\n</code></div>"],"alt":"2 images of rocky mountains left one in color, right in black and white","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":694,"description":"<p>Copies a region of pixels from one image to another, using a specified\nblend mode to do the operation.</p>\n","itemtype":"method","name":"blend","example":["\n<div><code>\nlet mountains;\nlet bricks;\n\nfunction preload() {\n  mountains = loadImage('assets/rockies.jpg');\n  bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n  image(mountains, 0, 0);\n  image(bricks, 0, 0);\n}\n</code></div>\n<div><code>\nlet mountains;\nlet bricks;\n\nfunction preload() {\n  mountains = loadImage('assets/rockies.jpg');\n  bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n  image(mountains, 0, 0);\n  image(bricks, 0, 0);\n}\n</code></div>\n<div><code>\nlet mountains;\nlet bricks;\n\nfunction preload() {\n  mountains = loadImage('assets/rockies.jpg');\n  bricks = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  mountains.blend(bricks, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n  image(mountains, 0, 0);\n  image(bricks, 0, 0);\n}\n</code></div>"],"alt":"image of rocky mountains. Brick images on left and right. Right overexposed\nimage of rockies. Brickwall images on left and right. Right mortar transparent\nimage of rockies. Brickwall images on left and right. Right translucent","class":"p5.Image","module":"Image","submodule":"Image","overloads":[{"line":694,"params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image"},{"name":"sx","description":"<p>X coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sy","description":"<p>Y coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sw","description":"<p>source image width</p>\n","type":"Integer"},{"name":"sh","description":"<p>source image height</p>\n","type":"Integer"},{"name":"dx","description":"<p>X coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dy","description":"<p>Y coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dw","description":"<p>destination image width</p>\n","type":"Integer"},{"name":"dh","description":"<p>destination image height</p>\n","type":"Integer"},{"name":"blendMode","description":"<p>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.</p>\n<p>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</p>\n<p><a href=\"http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/\">http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/</a></p>\n","type":"Constant"}]},{"line":771,"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":815,"description":"<p>Saves the image to a file and force the browser to download it.\nAccepts two strings for filename and file extension\nSupports png (default), jpg, and gif\n<br><br>\nNote that the file will only be downloaded as an animated GIF\nif the p5.Image was loaded from a GIF file.</p>\n","itemtype":"method","name":"save","params":[{"name":"filename","description":"<p>give your file a name</p>\n","type":"String"},{"name":"extension","description":"<p>'png' or 'jpg'</p>\n","type":"String"}],"example":["\n<div><code>\nlet photo;\n\nfunction preload() {\n  photo = loadImage('assets/rockies.jpg');\n}\n\nfunction draw() {\n  image(photo, 0, 0);\n}\n\nfunction keyTyped() {\n  if (key === 's') {\n    photo.save('photo', 'png');\n  }\n}\n</code></div>"],"alt":"image of rocky mountains.","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":856,"description":"<p>Starts an animated GIF over at the beginning state.</p>\n","itemtype":"method","name":"reset","example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/arnott-wallace-wink-loop-once.gif');\n}\n\nfunction draw() {\n  background(255);\n  // The GIF file that we loaded only loops once\n  // so it freezes on the last frame after playing through\n  image(gif, 0, 0);\n}\n\nfunction mousePressed() {\n  // Click to reset the GIF and begin playback from start\n  gif.reset();\n}\n</code></div>"],"alt":"Animated image of a cartoon face that winks once and then freezes\nWhen you click it animates again, winks once and freezes","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":896,"description":"<p>Gets the index for the frame that is currently visible in an animated GIF.</p>\n","itemtype":"method","name":"getCurrentFrame","return":{"description":"The index for the currently displaying frame in animated GIF","type":"Number"},"example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\nfunction draw() {\n  let frame = gif.getCurrentFrame();\n  image(gif, 0, 0);\n  text(frame, 10, 90);\n}\n</code></div>"],"alt":"Animated image of a cartoon eye looking around and then\nlooking outwards, in the lower-left hand corner a number counts\nup quickly to 124 and then starts back over at 0","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":927,"description":"<p>Sets the index of the frame that is currently visible in an animated GIF</p>\n","itemtype":"method","name":"setFrame","params":[{"name":"index","description":"<p>the index for the frame that should be displayed</p>\n","type":"Number"}],"example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\n// Move your mouse up and down over canvas to see the GIF\n// frames animate\nfunction draw() {\n  gif.pause();\n  image(gif, 0, 0);\n  // Get the highest frame number which is the number of frames - 1\n  let maxFrame = gif.numFrames() - 1;\n  // Set the current frame that is mapped to be relative to mouse position\n  let frameNumber = floor(map(mouseY, 0, height, 0, maxFrame, true));\n  gif.setFrame(frameNumber);\n}\n</code></div>"],"alt":"A still image of a cartoon eye that looks around when you move your mouse\nup and down over the canvas","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":971,"description":"<p>Returns the number of frames in an animated GIF</p>\n","itemtype":"method","name":"numFrames","return":{"description":"","type":"Number"},"example":["     The number of frames in the animated GIF\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/arnott-wallace-eye-loop-forever.gif');\n}\n\n// Move your mouse up and down over canvas to see the GIF\n// frames animate\nfunction draw() {\n  gif.pause();\n  image(gif, 0, 0);\n  // Get the highest frame number which is the number of frames - 1\n  let maxFrame = gif.numFrames() - 1;\n  // Set the current frame that is mapped to be relative to mouse position\n  let frameNumber = floor(map(mouseY, 0, height, 0, maxFrame, true));\n  gif.setFrame(frameNumber);\n}\n</code></div>"],"alt":"A still image of a cartoon eye that looks around when you move your mouse\nup and down over the canvas","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1006,"description":"<p>Plays an animated GIF that was paused with\n<a href=\"#/p5.Image/pause\">pause()</a></p>\n","itemtype":"method","name":"play","example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');\n}\n\nfunction draw() {\n  background(255);\n  image(gif, 0, 0);\n}\n\nfunction mousePressed() {\n  gif.pause();\n}\n\nfunction mouseReleased() {\n  gif.play();\n}\n</code></div>"],"alt":"An animated GIF of a drawing of small child with\nhair blowing in the wind, when you click the image\nfreezes when you release it animates again","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1043,"description":"<p>Pauses an animated GIF.</p>\n","itemtype":"method","name":"pause","example":["\n<div><code>\nlet gif;\n\nfunction preload() {\n  gif = loadImage('assets/nancy-liang-wind-loop-forever.gif');\n}\n\nfunction draw() {\n  background(255);\n  image(gif, 0, 0);\n}\n\nfunction mousePressed() {\n  gif.pause();\n}\n\nfunction mouseReleased() {\n  gif.play();\n}\n</code></div>"],"alt":"An animated GIF of a drawing of small child with\nhair blowing in the wind, when you click the image\nfreezes when you release it animates again","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/p5.Image.js","line":1079,"description":"<p>Changes the delay between frames in an animated GIF. There is an optional second parameter that\nindicates an index for a specific frame that should have its delay modified. If no index is given, all frames\nwill have the new delay.</p>\n","itemtype":"method","name":"delay","params":[{"name":"d","description":"<p>the amount in milliseconds to delay between switching frames</p>\n","type":"Number"},{"name":"index","description":"<p>the index of the frame that should have the new delay value {optional}</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\nlet gifFast, gifSlow;\n\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  gifFast.resize(width / 2, height / 2);\n  gifSlow.resize(width / 2, height / 2);\n\n  //Change the delay here\n  gifFast.delay(10);\n  gifSlow.delay(100);\n}\n\nfunction draw() {\n  background(255);\n  image(gifFast, 0, 0);\n  image(gifSlow, width / 2, 0);\n}\n</code></div>"],"alt":"Two animated gifs of cartoon eyes looking around\nThe gif on the left animates quickly, on the right\nthe animation is much slower","class":"p5.Image","module":"Image","submodule":"Image"},{"file":"src/image/pixels.js","line":12,"description":"<p><a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference\n/Global_Objects/Uint8ClampedArray' target='_blank'>Uint8ClampedArray</a>\ncontaining the values for all the pixels in the display window.\nThese values are numbers. This array is the size (include an appropriate\nfactor for <a href=\"#/p5/pixelDensity\">pixelDensity</a>) of the display window x4,\nrepresenting the R, G, B, A values in order for each pixel, moving from\nleft to right across each row, then down each column. Retina and other\nhigh density displays will have more pixels[] (by a factor of\npixelDensity^2).\nFor example, if the image is 100x100 pixels, there will be 40,000. On a\nretina display, there will be 160,000.</p>\n<p>The first four values (indices 0-3) in the array will be the R, G, B, A\nvalues of the pixel at (0, 0). The second four values (indices 4-7) will\ncontain the R, G, B, A values of the pixel at (1, 0). More generally, to\nset values for a pixel at (x, y):</p>\n<pre><code class=\"language-javascript\">let d = pixelDensity();\nfor (let i = 0; i < d; i++) {\n  for (let j = 0; j < d; j++) {\n    // loop over\n    index = 4 * ((y * d + j) * width * d + (x * d + i));\n    pixels[index] = r;\n    pixels[index+1] = g;\n    pixels[index+2] = b;\n    pixels[index+3] = a;\n  }\n}</code></pre>\n<p>While the above method is complex, it is flexible enough to work with\nany pixelDensity. Note that <a href=\"#/p5/set\">set()</a> will automatically take care of\nsetting all the appropriate values in <a href=\"#/p5/pixels\">pixels[]</a> for a given (x, y) at\nany pixelDensity, but the performance may not be as fast when lots of\nmodifications are made to the pixel array.</p>\n<p>Before accessing this array, the data must loaded with the <a href=\"#/p5/loadPixels\">loadPixels()</a>\nfunction. After the array data has been modified, the <a href=\"#/p5/updatePixels\">updatePixels()</a>\nfunction must be run to update the changes.</p>\n<p>Note that this is not a standard javascript array.  This means that\nstandard javascript functions such as <a href=\"#/p5/slice\">slice()</a> or\n<a href=\"#/p5/arrayCopy\">arrayCopy()</a> do not\nwork.</p>\n","itemtype":"property","name":"pixels","type":"Number[]","example":["\n<div>\n<code>\nlet pink = color(255, 102, 204);\nloadPixels();\nlet d = pixelDensity();\nlet halfImage = 4 * (width * d) * (height / 2 * d);\nfor (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}\nupdatePixels();\n</code>\n</div>"],"alt":"top half of canvas pink, bottom grey","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":80,"description":"<p>Copies a region of pixels from one image to another, using a specified\nblend mode to do the operation.</p>\n","itemtype":"method","name":"blend","example":["\n<div><code>\nlet img0;\nlet img1;\n\nfunction preload() {\n  img0 = loadImage('assets/rockies.jpg');\n  img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  background(img0);\n  image(img1, 0, 0);\n  blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);\n}\n</code></div>\n<div><code>\nlet img0;\nlet img1;\n\nfunction preload() {\n  img0 = loadImage('assets/rockies.jpg');\n  img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  background(img0);\n  image(img1, 0, 0);\n  blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);\n}\n</code></div>\n<div><code>\nlet img0;\nlet img1;\n\nfunction preload() {\n  img0 = loadImage('assets/rockies.jpg');\n  img1 = loadImage('assets/bricks_third.jpg');\n}\n\nfunction setup() {\n  background(img0);\n  image(img1, 0, 0);\n  blend(img1, 0, 0, 33, 100, 67, 0, 33, 100, ADD);\n}\n</code></div>"],"alt":"image of rocky mountains. Brick images on left and right. Right overexposed\nimage of rockies. Brickwall images on left and right. Right mortar transparent\nimage of rockies. Brickwall images on left and right. Right translucent","class":"p5","module":"Image","submodule":"Pixels","overloads":[{"line":80,"params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image"},{"name":"sx","description":"<p>X coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sy","description":"<p>Y coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sw","description":"<p>source image width</p>\n","type":"Integer"},{"name":"sh","description":"<p>source image height</p>\n","type":"Integer"},{"name":"dx","description":"<p>X coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dy","description":"<p>Y coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dw","description":"<p>destination image width</p>\n","type":"Integer"},{"name":"dh","description":"<p>destination image height</p>\n","type":"Integer"},{"name":"blendMode","description":"<p>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.</p>\n","type":"Constant"}]},{"line":152,"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":173,"description":"<p>Copies a region of the canvas to another region of the canvas\nand copies a region of pixels from an image used as the srcImg parameter\ninto the canvas srcImage is specified this is used as the source. If\nthe source and destination regions aren't the same size, it will\nautomatically resize source pixels to fit the specified\ntarget region.</p>\n","itemtype":"method","name":"copy","example":["\n<div><code>\nlet img;\n\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  background(img);\n  copy(img, 7, 22, 10, 10, 35, 25, 50, 50);\n  stroke(255);\n  noFill();\n  // Rectangle shows area being copied\n  rect(7, 22, 10, 10);\n}\n</code></div>"],"alt":"image of rocky mountains. Brick images on left and right. Right overexposed\nimage of rockies. Brickwall images on left and right. Right mortar transparent\nimage of rockies. Brickwall images on left and right. Right translucent","class":"p5","module":"Image","submodule":"Pixels","overloads":[{"line":173,"params":[{"name":"srcImage","description":"<p>source image</p>\n","type":"p5.Image|p5.Element"},{"name":"sx","description":"<p>X coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sy","description":"<p>Y coordinate of the source's upper left corner</p>\n","type":"Integer"},{"name":"sw","description":"<p>source image width</p>\n","type":"Integer"},{"name":"sh","description":"<p>source image height</p>\n","type":"Integer"},{"name":"dx","description":"<p>X coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dy","description":"<p>Y coordinate of the destination's upper left corner</p>\n","type":"Integer"},{"name":"dw","description":"<p>destination image width</p>\n","type":"Integer"},{"name":"dh","description":"<p>destination image height</p>\n","type":"Integer"}]},{"line":215,"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":307,"description":"<p>Applies a filter to the canvas. The presets options are:</p>\n<p>THRESHOLD\nConverts the image to black and white pixels depending if they are above or\nbelow the threshold defined by the level parameter. The parameter must be\nbetween 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.</p>\n<p>GRAY\nConverts any colors in the image to grayscale equivalents. No parameter\nis used.</p>\n<p>OPAQUE\nSets the alpha channel to entirely opaque. No parameter is used.</p>\n<p>INVERT\nSets each pixel to its inverse value. No parameter is used.</p>\n<p>POSTERIZE\nLimits each channel of the image to the number of colors specified as the\nparameter. The parameter can be set to values between 2 and 255, but\nresults are most noticeable in the lower ranges.</p>\n<p>BLUR\nExecutes a Gaussian blur with the level parameter specifying the extent\nof the blurring. If no parameter is used, the blur is equivalent to\nGaussian blur of radius 1. Larger values increase the blur.</p>\n<p>ERODE\nReduces the light areas. No parameter is used.</p>\n<p>DILATE\nIncreases the light areas. No parameter is used.</p>\n<p>filter() does not work in WEBGL mode.\nA similar effect can be achieved in WEBGL mode using custom\nshaders. Adam Ferriss has written\na <a href=\"https://github.com/aferriss/p5jsShaderExamples\"\ntarget='_blank'>selection of shader examples</a> that contains many\nof the effects present in the filter examples.</p>\n","itemtype":"method","name":"filter","params":[{"name":"filterType","description":"<p>either THRESHOLD, GRAY, OPAQUE, INVERT,\n                               POSTERIZE, BLUR, ERODE, DILATE or BLUR.\n                               See Filters.js for docs on\n                               each available filter</p>\n","type":"Constant"},{"name":"filterParam","description":"<p>an optional parameter unique\n                               to each filter, see above</p>\n","type":"Number","optional":true}],"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(THRESHOLD);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(GRAY);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(OPAQUE);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(INVERT);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(POSTERIZE, 3);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(DILATE);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(BLUR, 3);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/bricks.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  filter(ERODE);\n}\n</code>\n</div>"],"alt":"black and white image of a brick wall.\ngreyscale image of a brickwall\nimage of a brickwall\njade colored image of a brickwall\nred and pink image of a brickwall\nimage of a brickwall\nblurry image of a brickwall\nimage of a brickwall\nimage of a brickwall with less detail","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":481,"description":"<p>Get a region of pixels, or a single pixel, from the canvas.</p>\n<p>Returns an array of [R,G,B,A] values for any pixel or grabs a section of\nan image. If no parameters are specified, the entire image is returned.\nUse the x and y parameters to get the value of one pixel. Get a section of\nthe display window by specifying additional w and h parameters. When\ngetting an image, the x and y parameters define the coordinates for the\nupper-left corner of the image, regardless of the current <a href=\"#/p5/imageMode\">imageMode()</a>.</p>\n<p>Getting the color of a single pixel with get(x, y) is easy, but not as fast\nas grabbing the data directly from <a href=\"#/p5/pixels\">pixels[]</a>. The equivalent statement to\nget(x, y) using <a href=\"#/p5/pixels\">pixels[]</a> with pixel density d is</p>\n<pre><code class=\"language-javascript\">let x, y, d; // set these to the coordinates\nlet off = (y * width + x) * d * 4;\nlet components = [\n  pixels[off],\n  pixels[off + 1],\n  pixels[off + 2],\n  pixels[off + 3]\n];\nprint(components);</code></pre>\n<p>See the reference for <a href=\"#/p5/pixels\">pixels[]</a> for more information.</p>\n<p>If you want to extract an array of colors or a subimage from an p5.Image object,\ntake a look at <a href=\"#/p5.Image/get\">p5.Image.get()</a></p>\n","itemtype":"method","name":"get","return":{"description":"the rectangle <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"},"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  let c = get();\n  image(c, width / 2, 0);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\nfunction setup() {\n  image(img, 0, 0);\n  let c = get(50, 90);\n  fill(c);\n  noStroke();\n  rect(25, 25, 50, 50);\n}\n</code>\n</div>"],"alt":"2 images of the rocky mountains, side-by-side\nImage of the rocky mountains with 50x50 green rect in center of canvas","class":"p5","module":"Image","submodule":"Pixels","overloads":[{"line":481,"params":[{"name":"x","description":"<p>x-coordinate of the pixel</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the pixel</p>\n","type":"Number"},{"name":"w","description":"<p>width</p>\n","type":"Number"},{"name":"h","description":"<p>height</p>\n","type":"Number"}],"return":{"description":"the rectangle <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"}},{"line":551,"params":[],"return":{"description":"the whole <a href=\"#/p5.Image\">p5.Image</a>","type":"p5.Image"}},{"line":555,"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/image/pixels.js","line":566,"description":"<p>Loads the pixel data for the display window into the <a href=\"#/p5/pixels\">pixels[]</a> array. This\nfunction must always be called before reading from or writing to <a href=\"#/p5/pixels\">pixels[]</a>.\nNote that only changes made with <a href=\"#/p5/set\">set()</a> or direct manipulation of <a href=\"#/p5/pixels\">pixels[]</a>\nwill occur.</p>\n","itemtype":"method","name":"loadPixels","example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  image(img, 0, 0, width, height);\n  let d = pixelDensity();\n  let halfImage = 4 * (width * d) * (height * d / 2);\n  loadPixels();\n  for (let i = 0; i < halfImage; i++) {\n    pixels[i + halfImage] = pixels[i];\n  }\n  updatePixels();\n}\n</code>\n</div>"],"alt":"two images of the rocky mountains. one on top, one on bottom of canvas.","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":602,"description":"<p>Changes the color of any pixel, or writes an image directly to the\ndisplay window.\nThe x and y parameters specify the pixel to change and the c parameter\nspecifies the color value. This can be a <a href=\"#/p5.Color\">p5.Color</a> object, or [R, G, B, A]\npixel array. It can also be a single grayscale value.\nWhen setting an image, the x and y parameters define the coordinates for\nthe upper-left corner of the image, regardless of the current <a href=\"#/p5/imageMode\">imageMode()</a>.</p>\n<p>After using <a href=\"#/p5/set\">set()</a>, you must call <a href=\"#/p5/updatePixels\">updatePixels()</a> for your changes to appear.\nThis should be called once all pixels have been set, and must be called before\ncalling .<a href=\"#/p5/get\">get()</a> or drawing the image.</p>\n<p>Setting the color of a single pixel with set(x, y) is easy, but not as\nfast as putting the data directly into <a href=\"#/p5/pixels\">pixels[]</a>. Setting the <a href=\"#/p5/pixels\">pixels[]</a>\nvalues directly may be complicated when working with a retina display,\nbut will perform better when lots of pixels need to be set directly on\nevery loop. See the reference for <a href=\"#/p5/pixels\">pixels[]</a> for more information.</p>\n","itemtype":"method","name":"set","params":[{"name":"x","description":"<p>x-coordinate of the pixel</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of the pixel</p>\n","type":"Number"},{"name":"c","description":"<p>insert a grayscale value | a pixel array |\n                               a <a href=\"#/p5.Color\">p5.Color</a> object | a <a href=\"#/p5.Image\">p5.Image</a> to copy</p>\n","type":"Number|Number[]|Object"}],"example":["\n<div>\n<code>\nlet black = color(0);\nset(30, 20, black);\nset(85, 20, black);\nset(85, 75, black);\nset(30, 75, black);\nupdatePixels();\n</code>\n</div>\n\n<div>\n<code>\nfor (let i = 30; i < width - 15; i++) {\n  for (let j = 20; j < height - 25; j++) {\n    let c = color(204 - j, 153 - i, 0);\n    set(i, j, c);\n  }\n}\nupdatePixels();\n</code>\n</div>\n\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  set(0, 0, img);\n  updatePixels();\n  line(0, 0, width, height);\n  line(0, height, width, 0);\n}\n</code>\n</div>"],"alt":"4 black points in the shape of a square middle-right of canvas.\nsquare with orangey-brown gradient lightening at bottom right.\nimage of the rocky mountains. with lines like an 'x' through the center.","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/image/pixels.js","line":674,"description":"<p>Updates the display window with the data in the <a href=\"#/p5/pixels\">pixels[]</a> array.\nUse in conjunction with <a href=\"#/p5/loadPixels\">loadPixels()</a>. If you're only reading pixels from\nthe array, there's no need to call <a href=\"#/p5/updatePixels\">updatePixels()</a> — updating is only\nnecessary to apply changes. <a href=\"#/p5/updatePixels\">updatePixels()</a> should be called anytime the\npixels array is manipulated or <a href=\"#/p5/set\">set()</a> is called, and only changes made with\n<a href=\"#/p5/set\">set()</a> or direct changes to <a href=\"#/p5/pixels\">pixels[]</a> will occur.</p>\n","itemtype":"method","name":"updatePixels","params":[{"name":"x","description":"<p>x-coordinate of the upper-left corner of region\n                        to update</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>y-coordinate of the upper-left corner of region\n                        to update</p>\n","type":"Number","optional":true},{"name":"w","description":"<p>width of region to update</p>\n","type":"Number","optional":true},{"name":"h","description":"<p>height of region to update</p>\n","type":"Number","optional":true}],"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies.jpg');\n}\n\nfunction setup() {\n  image(img, 0, 0, width, height);\n  let d = pixelDensity();\n  let halfImage = 4 * (width * d) * (height * d / 2);\n  loadPixels();\n  for (let i = 0; i < halfImage; i++) {\n    pixels[i + halfImage] = pixels[i];\n  }\n  updatePixels();\n}\n</code>\n</div>"],"alt":"two images of the rocky mountains. one on top, one on bottom of canvas.","class":"p5","module":"Image","submodule":"Pixels"},{"file":"src/io/files.js","line":20,"description":"<p>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.</p>\n<p>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 <a href=\"https://github.com/camsong/\nfetch-jsonp\">here</a>.</p>\n<p>This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadJSON","return":{"description":"JSON data","type":"Object|Array"},"example":["\n\nCalling <a href=\"#/p5/loadJSON\">loadJSON()</a> inside <a href=\"#/p5/preload\">preload()</a> guarantees to complete the\noperation before <a href=\"#/p5/setup\">setup()</a> and <a href=\"#/p5/draw\">draw()</a> are called.\n\n<div><code>\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}\n</code></div>\n\nOutside of preload(), you may supply a callback function to handle the\nobject:\n<div><code>\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}\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</code></div>"],"alt":"50x50 ellipse that changes from black to white depending on the current humidity\n50x50 ellipse that changes from black to white depending on the current humidity","class":"p5","module":"IO","submodule":"Input","overloads":[{"line":20,"params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"jsonpOptions","description":"<p>options object for jsonp related settings</p>\n","type":"Object","optional":true},{"name":"datatype","description":"<p>\"json\" or \"jsonp\"</p>\n","type":"String","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/loadJSON\">loadJSON()</a> completes, data is passed\n                                   in as first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                   there is an error, response is passed\n                                   in as first argument</p>\n","type":"Function","optional":true}],"return":{"description":"JSON data","type":"Object|Array"}},{"line":104,"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":112,"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":183,"description":"<p>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.</p>\n<p>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.</p>\n<p>This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed.</p>\n<p>This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadStrings","params":[{"name":"filename","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"callback","description":"<p>function to be executed after <a href=\"#/p5/loadStrings\">loadStrings()</a>\n                              completes, Array is passed in as first\n                              argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                              there is an error, response is passed\n                              in as first argument</p>\n","type":"Function","optional":true}],"return":{"description":"Array of Strings","type":"String[]"},"example":["\n\nCalling loadStrings() inside <a href=\"#/p5/preload\">preload()</a> guarantees to complete the\noperation before <a href=\"#/p5/setup\">setup()</a> and <a href=\"#/p5/draw\">draw()</a> are called.\n\n<div><code>\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}\n</code></div>\n\nOutside of preload(), you may supply a callback function to handle the\nobject:\n\n<div><code>\nfunction setup() {\n  loadStrings('assets/test.txt', pickString);\n}\n\nfunction pickString(result) {\n  background(200);\n  text(random(result), 10, 10, 80, 80);\n}\n</code></div>"],"alt":"randomly generated text from a file, for example \"i smell like butter\"\nrandomly generated text from a file, for example \"i have three feet\"","class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":293,"description":"<p>Reads the contents of a file or URL and creates a <a href=\"#/p5.Table\">p5.Table</a> 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.</p>\n<p>This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. Calling <a href=\"#/p5/loadTable\">loadTable()</a> inside <a href=\"#/p5/preload\">preload()</a>\nguarantees to complete the operation before <a href=\"#/p5/setup\">setup()</a> and <a href=\"#/p5/draw\">draw()</a> are called.\nOutside of <a href=\"#/p5/preload\">preload()</a>, you may supply a callback function to handle the\nobject:</p>\n<p>All files loaded and saved use UTF-8 encoding. This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadTable","params":[{"name":"filename","description":"<p>name of the file or URL to load</p>\n","type":"String"},{"name":"extension","description":"<p>parse the table by comma-separated values \"csv\", semicolon-separated\n                                     values \"ssv\", or tab-separated values \"tsv\"</p>\n","type":"String","optional":true},{"name":"header","description":"<p>\"header\" to indicate table has header row</p>\n","type":"String","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                     <a href=\"#/p5/loadTable\">loadTable()</a> completes. On success, the\n                                     <a href=\"#/p5.Table\">Table</a> object is passed in as the\n                                     first argument.</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                     there is an error, response is passed\n                                     in as first argument</p>\n","type":"Function","optional":true}],"return":{"description":"<a href=\"#/p5.Table\">Table</a> object containing data","type":"Object"},"example":["\n<div class='norender'>\n<code>\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}\n</code>\n</div>"],"alt":"randomly generated text from a file, for example \"i smell like butter\"\nrandomly generated text from a file, for example \"i have three feet\"","class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":575,"description":"<p>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.</p>\n<p>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.</p>\n<p>This method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. Calling <a href=\"#/p5/loadXML\">loadXML()</a> inside <a href=\"#/p5/preload\">preload()</a>\nguarantees to complete the operation before <a href=\"#/p5/setup\">setup()</a> and <a href=\"#/p5/draw\">draw()</a> are called.</p>\n<p>Outside of <a href=\"#/p5/preload\">preload()</a>, you may supply a callback function to handle the\nobject.</p>\n<p>This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadXML","params":[{"name":"filename","description":"<p>name of the file or URL to load</p>\n","type":"String"},{"name":"callback","description":"<p>function to be executed after <a href=\"#/p5/loadXML\">loadXML()</a>\n                              completes, XML object is passed in as\n                              first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                              there is an error, response is passed\n                              in as first argument</p>\n","type":"Function","optional":true}],"return":{"description":"XML object containing data","type":"Object"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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\n// Sketch prints:\n// 0, Capra hircus, Goat\n// 1, Panthera pardus, Leopard\n// 2, Equus zebra, Zebra\n</code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":685,"description":"<p>This method is suitable for fetching files up to size of 64MB.</p>\n","itemtype":"method","name":"loadBytes","params":[{"name":"file","description":"<p>name of the file or URL to load</p>\n","type":"String"},{"name":"callback","description":"<p>function to be executed after <a href=\"#/p5/loadBytes\">loadBytes()</a>\n                                   completes</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if there\n                                   is an error</p>\n","type":"Function","optional":true}],"return":{"description":"an object whose 'bytes' property will be the loaded buffer","type":"Object"},"example":["\n<div class='norender'><code>\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}\n</code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Input"},{"file":"src/io/files.js","line":744,"description":"<p>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 <code>httpDo(path, 'GET')</code>. 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).</p>\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<div class='norender'><code>\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</code></div>"],"class":"p5","module":"IO","submodule":"Input","overloads":[{"line":744,"params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"datatype","description":"<p>\"json\", \"jsonp\", \"binary\", \"arrayBuffer\",\n                                   \"xml\", or \"text\"</p>\n","type":"String","optional":true},{"name":"data","description":"<p>param data passed sent with request</p>\n","type":"Object|Boolean","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/httpGet\">httpGet()</a> completes, data is passed in\n                                   as first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                   there is an error, response is passed\n                                   in as first argument</p>\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":798,"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":806,"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":821,"description":"<p>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 <code>httpDo(path, 'POST')</code>.</p>\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<div>\n<code>\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 way cool.' };\n\nfunction setup() {\n  createCanvas(800, 800);\n}\n\nfunction mousePressed() {\n  // Pick new random color values\n  let r = random(255);\n  let g = random(255);\n  let b = random(255);\n\n  httpPost(url, 'json', postData, function(result) {\n    strokeWeight(2);\n    stroke(r, g, b);\n    fill(r, g, b, 127);\n    ellipse(mouseX, mouseY, 200, 200);\n    text(result.body, mouseX, mouseY);\n  });\n}\n</code>\n</div>\n\n<div><code>\nlet url = 'ttps://invalidURL'; // A bad URL that will cause errors\nlet postData = { title: 'p5 Clicked!', body: 'p5.js is way cool.' };\n\nfunction setup() {\n  createCanvas(800, 800);\n}\n\nfunction mousePressed() {\n  // Pick new random color values\n  let r = random(255);\n  let g = random(255);\n  let b = random(255);\n\n  httpPost(\n    url,\n    'json',\n    postData,\n    function(result) {\n      // ... won't be called\n    },\n    function(error) {\n      strokeWeight(2);\n      stroke(r, g, b);\n      fill(r, g, b, 127);\n      text(error.toString(), mouseX, mouseY);\n    }\n  );\n}\n</code></div>"],"class":"p5","module":"IO","submodule":"Input","overloads":[{"line":821,"params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"datatype","description":"<p>\"json\", \"jsonp\", \"xml\", or \"text\".\n                                   If omitted, <a href=\"#/p5/httpPost\">httpPost()</a> will guess.</p>\n","type":"String","optional":true},{"name":"data","description":"<p>param data passed sent with request</p>\n","type":"Object|Boolean","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/httpPost\">httpPost()</a> completes, data is passed in\n                                   as first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                   there is an error, response is passed\n                                   in as first argument</p>\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":901,"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":909,"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":924,"description":"<p>Method for executing an HTTP request. If data type is not specified,\np5 will try to guess based on the URL, defaulting to text.<br><br>\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.</p>\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<div>\n<code>\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</code>\n</div>"],"class":"p5","module":"IO","submodule":"Input","overloads":[{"line":924,"params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"method","description":"<p>either \"GET\", \"POST\", or \"PUT\",\n                                   defaults to \"GET\"</p>\n","type":"String","optional":true},{"name":"datatype","description":"<p>\"json\", \"jsonp\", \"xml\", or \"text\"</p>\n","type":"String","optional":true},{"name":"data","description":"<p>param data passed sent with request</p>\n","type":"Object","optional":true},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/httpGet\">httpGet()</a> completes, data is passed in\n                                   as first argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to be executed if\n                                   there is an error, response is passed\n                                   in as first argument</p>\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":995,"params":[{"name":"path","description":"","type":"String"},{"name":"options","description":"<p>Request object options as documented in the\n                                   \"fetch\" API\n<a href=\"https://developer.mozilla.org/en/docs/Web/API/Fetch_API\">reference</a></p>\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":1160,"itemtype":"method","name":"createWriter","params":[{"name":"name","description":"<p>name of the file to be created</p>\n","type":"String"},{"name":"extension","description":"","type":"String","optional":true}],"return":{"description":"","type":"p5.PrintWriter"},"example":["\n<div>\n<code>\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</code>\n</div>"],"class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1215,"description":"<p>Writes data to the PrintWriter stream</p>\n","itemtype":"method","name":"write","params":[{"name":"data","description":"<p>all data to be written by the PrintWriter</p>\n","type":"Array"}],"example":["\n<div class=\"norender notest\">\n<code>\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</code>\n</div>\n<div class='norender notest'>\n<code>\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</code>\n</div>\n<div class='norender notest'>\n<code>\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</code>\n</div>\n<div>\n<code>\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</code>\n</div>"],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1274,"description":"<p>Writes data to the PrintWriter stream, and adds a new line at the end</p>\n","itemtype":"method","name":"print","params":[{"name":"data","description":"<p>all data to be printed by the PrintWriter</p>\n","type":"Array"}],"example":["\n<div class='norender notest'>\n<code>\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</code>\n</div>\n<div class='norender notest'>\n<code>\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</code>\n</div>"],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1315,"description":"<p>Clears the data already written to the PrintWriter object</p>\n","itemtype":"method","name":"clear","example":["\n<div class =\"norender notest\"><code>\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</code></div>\n<div>\n<code>\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</code>\n</div>\n"],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1349,"description":"<p>Closes the PrintWriter</p>\n","itemtype":"method","name":"close","example":["\n<div class=\"norender notest\">\n<code>\n// create a file called 'newFile.txt'\nlet writer = createWriter('newFile.txt');\n// close the PrintWriter and save the file\nwriter.close();\n</code>\n</div>\n<div class='norender notest'>\n<code>\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</code>\n</div>"],"class":"p5.PrintWriter","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1398,"description":"<p>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 <a href=\"#/p5.Element\">p5.Element</a>,an Array of\nStrings, an Array of JSON, a JSON object, a <a href=\"#/p5.Table\">p5.Table\n</a>, a <a href=\"#/p5.Image\">p5.Image</a>, 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.\n<strong>Note that it is not recommended to\ncall this method within draw, as it will open a new save dialog on every\nrender.</strong></p>\n","itemtype":"method","name":"save","params":[{"name":"objectOrFilename","description":"<p>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).</p>\n","type":"Object|String","optional":true},{"name":"filename","description":"<p>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).</p>\n","type":"String","optional":true},{"name":"options","description":"<p>Additional options depend on\n                          filetype. For example, when saving JSON,\n                          <code>true</code> indicates that the\n                          output will be optimized for filesize,\n                          rather than readability.</p>\n","type":"Boolean|String","optional":true}],"example":["\n <div class=\"norender\"><code>\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 </code></div>\n\n<div class=\"norender\"><code>\n // Saves p5.Image as an image\n img = createImage(10, 10);\n save(img, 'myImage.png');\n </code></div>\n\n <div class=\"norender\"><code>\n // Saves p5.Renderer object as an image\n obj = createGraphics(100, 100);\n save(obj, 'myObject.png');\n </code></div>\n\n <div class=\"norender\"><code>\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 </code></div>\n\n <div class=\"norender\"><code>\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 </code></div>\n\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"An example for saving a canvas as an image.\n An example for saving a p5.Image element as an image.\n An example for saving a p5.Renderer element.\n An example showing how to save a table in formats of HTML, CSV and TSV.\n An example for saving JSON to a txt file with some extra arguments.\n An example for saving an array of strings to text file with line breaks.","class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1540,"description":"<p>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.</p>\n","itemtype":"method","name":"saveJSON","params":[{"name":"json","description":"","type":"Array|Object"},{"name":"filename","description":"","type":"String"},{"name":"optimize","description":"<p>If true, removes line breaks\n                               and spaces from the output\n                               file to optimize filesize\n                               (but not readability).</p>\n","type":"Boolean","optional":true}],"example":["\n <div><code>\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 }\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 </code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1597,"description":"<p>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.</p>\n","itemtype":"method","name":"saveStrings","params":[{"name":"list","description":"<p>string array to be written</p>\n","type":"String[]"},{"name":"filename","description":"<p>filename for output</p>\n","type":"String"},{"name":"extension","description":"<p>the filename's extension</p>\n","type":"String","optional":true},{"name":"isCRLF","description":"<p>if true, change line-break to CRLF</p>\n","type":"Boolean","optional":true}],"example":["\n <div><code>\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 }\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 </code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/files.js","line":1661,"description":"<p>Writes the contents of a <a href=\"#/p5.Table\">Table</a> 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.</p>\n","itemtype":"method","name":"saveTable","params":[{"name":"Table","description":"<p>the <a href=\"#/p5.Table\">Table</a> object to save to a file</p>\n","type":"p5.Table"},{"name":"filename","description":"<p>the filename to which the Table should be saved</p>\n","type":"String"},{"name":"options","description":"<p>can be one of \"tsv\", \"csv\", or \"html\"</p>\n","type":"String","optional":true}],"example":["\n<div><code>\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\n // Saves the following to a file called 'new.csv':\n // id,species,name\n // 0,Panthera leo,Lion\n </code></div>"],"alt":"no image displayed","class":"p5","module":"IO","submodule":"Output"},{"file":"src/io/p5.Table.js","line":9,"description":"<p>Table Options\nGeneric class for handling tabular data, typically from a\nCSV, TSV, or other sort of spreadsheet file.\nCSV files are\n<a href=\"http://en.wikipedia.org/wiki/Comma-separated_values\">\ncomma separated values</a>, 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\n<a href=\"http://tools.ietf.org/html/rfc4180\">here</a>.\nTo load files, use the <a href=\"#/p5/loadTable\">loadTable</a> method.\nTo save tables to your computer, use the <a href=\"#/p5/save\">save</a> method\n or the <a href=\"#/p5/saveTable\">saveTable</a> method.</p>\n<p>Possible options include:</p>\n<ul>\n<li>csv - parse the table as comma-separated values\n<li>tsv - parse the table as tab-separated values\n<li>header - this table has a header (title) row\n</ul>","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":43,"description":"<p>An array containing the names of the columns in the table, if the \"header\" the table is\nloaded with the \"header\" parameter.</p>\n","itemtype":"property","name":"columns","type":"String[]","example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":77,"description":"<p>An array containing the <a href=\"#/p5.Table\">p5.TableRow</a> objects that make up the\nrows of the table. The same result as calling <a href=\"#/p5/getRows\">getRows()</a></p>\n","itemtype":"property","name":"rows","type":"p5.TableRow[]","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":85,"description":"<p>Use <a href=\"#/p5/addRow\">addRow()</a> to add a new row of data to a <a href=\"#/p5.Table\">p5.Table</a> 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 <a href=\"#/p5/set\">set()</a>.</p>\n<p>If a <a href=\"#/p5.TableRow\">p5.TableRow</a> object is included as a parameter, then that row is\nduplicated and added to the table.</p>\n","itemtype":"method","name":"addRow","params":[{"name":"row","description":"<p>row to be added to the table</p>\n","type":"p5.TableRow","optional":true}],"return":{"description":"the row that was added","type":"p5.TableRow"},"example":["\n <div class=\"norender\">\n <code>\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 </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":148,"description":"<p>Removes a row from the table object.</p>\n","itemtype":"method","name":"removeRow","params":[{"name":"id","description":"<p>ID number of the row to remove</p>\n","type":"Integer"}],"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":195,"description":"<p>Returns a reference to the specified <a href=\"#/p5.TableRow\">p5.TableRow</a>. The reference\ncan then be used to get and set values of the selected row.</p>\n","itemtype":"method","name":"getRow","params":[{"name":"rowID","description":"<p>ID number of the row to get</p>\n","type":"Integer"}],"return":{"description":"<a href=\"#/p5.TableRow\">p5.TableRow</a> object","type":"p5.TableRow"},"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":240,"description":"<p>Gets all rows from the table. Returns an array of <a href=\"#/p5.TableRow\">p5.TableRow</a>s.</p>\n","itemtype":"method","name":"getRows","return":{"description":"Array of <a href=\"#/p5.TableRow\">p5.TableRow</a>s","type":"p5.TableRow[]"},"example":["\n <div class=\"norender\">\n <code>\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 </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":288,"description":"<p>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.</p>\n","itemtype":"method","name":"findRow","params":[{"name":"value","description":"<p>The value to match</p>\n","type":"String"},{"name":"column","description":"<p>ID number or title of the\n                               column to search</p>\n","type":"Integer|String"}],"return":{"description":"","type":"p5.TableRow"},"example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":352,"description":"<p>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.</p>\n","itemtype":"method","name":"findRows","params":[{"name":"value","description":"<p>The value to match</p>\n","type":"String"},{"name":"column","description":"<p>ID number or title of the\n                               column to search</p>\n","type":"Integer|String"}],"return":{"description":"An Array of TableRow objects","type":"p5.TableRow[]"},"example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":420,"description":"<p>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.</p>\n","itemtype":"method","name":"matchRow","params":[{"name":"regexp","description":"<p>The regular expression to match</p>\n","type":"String|RegExp"},{"name":"column","description":"<p>The column ID (number) or\n                                 title (string)</p>\n","type":"String|Integer"}],"return":{"description":"TableRow object","type":"p5.TableRow"},"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":478,"description":"<p>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.</p>\n","itemtype":"method","name":"matchRows","params":[{"name":"regexp","description":"<p>The regular expression to match</p>\n","type":"String"},{"name":"column","description":"<p>The column ID (number) or\n                                 title (string)</p>\n","type":"String|Integer","optional":true}],"return":{"description":"An Array of TableRow objects","type":"p5.TableRow[]"},"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":545,"description":"<p>Retrieves all values in the specified column, and returns them\nas an array. The column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"getColumn","params":[{"name":"column","description":"<p>String or Number of the column to return</p>\n","type":"String|Number"}],"return":{"description":"Array of column values","type":"Array"},"example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":597,"description":"<p>Removes all rows from a Table. While all rows are removed,\ncolumns and column titles are maintained.</p>\n","itemtype":"method","name":"clearRows","example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":638,"description":"<p>Use <a href=\"#/p5/addColumn\">addColumn()</a> to add a new column to a <a href=\"#/p5.Table\">Table</a> 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.)</p>\n","itemtype":"method","name":"addColumn","params":[{"name":"title","description":"<p>title of the given column</p>\n","type":"String","optional":true}],"example":["\n <div class=\"norender\">\n <code>\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 </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":688,"description":"<p>Returns the total number of columns in a Table.</p>\n","itemtype":"method","name":"getColumnCount","return":{"description":"Number of columns in this table","type":"Integer"},"example":["\n <div>\n <code>\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 </code>\n </div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":724,"description":"<p>Returns the total number of rows in a Table.</p>\n","itemtype":"method","name":"getRowCount","return":{"description":"Number of rows in this table","type":"Integer"},"example":["\n <div>\n <code>\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 </code>\n </div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":760,"description":"<p>Removes any of the specified characters (or \"tokens\").</p>\n<p>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.</p>\n","itemtype":"method","name":"removeTokens","params":[{"name":"chars","description":"<p>String listing characters to be removed</p>\n","type":"String"},{"name":"column","description":"<p>Column ID (number)\n                                 or name (string)</p>\n","type":"String|Integer","optional":true}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":832,"description":"<p>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.</p>\n","itemtype":"method","name":"trim","params":[{"name":"column","description":"<p>Column ID (number)\n                                 or name (string)</p>\n","type":"String|Integer","optional":true}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":896,"description":"<p>Use <a href=\"#/p5/removeColumn\">removeColumn()</a> 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.</p>\n","itemtype":"method","name":"removeColumn","params":[{"name":"column","description":"<p>columnName (string) or ID (number)</p>\n","type":"String|Integer"}],"example":["\n <div class=\"norender\">\n <code>\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 }\n </code>\n </div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":960,"description":"<p>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.</p>\n","itemtype":"method","name":"set","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>column ID (Number)\n                              or title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>value to assign</p>\n","type":"String|Number"}],"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1009,"description":"<p>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.</p>\n","itemtype":"method","name":"setNum","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>column ID (Number)\n                              or title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>value to assign</p>\n","type":"Number"}],"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1055,"description":"<p>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.</p>\n","itemtype":"method","name":"setString","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>column ID (Number)\n                              or title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>value to assign</p>\n","type":"String"}],"example":["\n<div class=\"norender\"><code>\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</code></div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1100,"description":"<p>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.</p>\n","itemtype":"method","name":"get","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>columnName (string) or\n                                  ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"","type":"String|Number"},"example":["\n<div class=\"norender\">\n<code>\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}\n</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1146,"description":"<p>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.</p>\n","itemtype":"method","name":"getNum","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>columnName (string) or\n                                  ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\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}\n</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1190,"description":"<p>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.</p>\n","itemtype":"method","name":"getString","params":[{"name":"row","description":"<p>row ID</p>\n","type":"Integer"},{"name":"column","description":"<p>columnName (string) or\n                                  ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"","type":"String"},"example":["\n<div class=\"norender\">\n<code>\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}\n</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1242,"description":"<p>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.</p>\n","itemtype":"method","name":"getObject","params":[{"name":"headerColumn","description":"<p>Name of the column which should be used to\n                             title each row object (optional)</p>\n","type":"String","optional":true}],"return":{"description":"","type":"Object"},"example":["\n<div class=\"norender\">\n<code>\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</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.Table.js","line":1305,"description":"<p>Retrieves all table data and returns it as a multidimensional array.</p>\n","itemtype":"method","name":"getArray","return":{"description":"","type":"Array"},"example":["\n<div class=\"norender\">\n<code>\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}\n</code>\n</div>"],"alt":"no image displayed","class":"p5.Table","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":40,"description":"<p>Stores a value in the TableRow's specified column.\nThe column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"set","params":[{"name":"column","description":"<p>Column ID (Number)\n                              or Title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>The value to be stored</p>\n","type":"String|Number"}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":102,"description":"<p>Stores a Float value in the TableRow's specified column.\nThe column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"setNum","params":[{"name":"column","description":"<p>Column ID (Number)\n                              or Title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>The value to be stored\n                              as a Float</p>\n","type":"Number|String"}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":146,"description":"<p>Stores a String value in the TableRow's specified column.\nThe column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"setString","params":[{"name":"column","description":"<p>Column ID (Number)\n                              or Title (String)</p>\n","type":"String|Integer"},{"name":"value","description":"<p>The value to be stored\n                              as a String</p>\n","type":"String|Number|Boolean|Object"}],"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":191,"description":"<p>Retrieves a value from the TableRow's specified column.\nThe column may be specified by either its ID or title.</p>\n","itemtype":"method","name":"get","params":[{"name":"column","description":"<p>columnName (string) or\n                                 ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"","type":"String|Number"},"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":239,"description":"<p>Retrieves a Float value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.</p>\n","itemtype":"method","name":"getNum","params":[{"name":"column","description":"<p>columnName (string) or\n                                 ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"Float Floating point number","type":"Number"},"example":["\n <div class=\"norender\"><code>\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 }\n </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.TableRow.js","line":295,"description":"<p>Retrieves an String value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.</p>\n","itemtype":"method","name":"getString","params":[{"name":"column","description":"<p>columnName (string) or\n                                 ID (number)</p>\n","type":"String|Integer"}],"return":{"description":"String","type":"String"},"example":["\n <div class=\"norender\"><code>\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 </code></div>"],"alt":"no image displayed","class":"p5.TableRow","module":"IO","submodule":"Table"},{"file":"src/io/p5.XML.js","line":62,"description":"<p>Gets a copy of the element's parent. Returns the parent as another\n<a href=\"#/p5.XML\">p5.XML</a> object.</p>\n","itemtype":"method","name":"getParent","return":{"description":"element parent","type":"p5.XML"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":100,"description":"<p>Gets the element's full name, which is returned as a String.</p>\n","itemtype":"method","name":"getName","return":{"description":"the name of the node","type":"String"},"example":["&lt;animal\n <div class='norender'><code>\n // The following short XML file called \"mammals.xml\" is parsed\n // in the code below.\n //\n // <?xml version=\"1.0\"?>\n // &lt;mammals&gt;\n //   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n //   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n //   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n // &lt;/mammals&gt;\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 </code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":135,"description":"<p>Sets the element's name, which is specified as a String.</p>\n","itemtype":"method","name":"setName","params":[{"name":"the","description":"<p>new name of the node</p>\n","type":"String"}],"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":181,"description":"<p>Checks whether or not the element has any children, and returns the result\nas a boolean.</p>\n","itemtype":"method","name":"hasChildren","return":{"description":"","type":"Boolean"},"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":217,"description":"<p>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 <a href=\"#/p5.XML/getName\">getName()</a>\non each child element individually.</p>\n","itemtype":"method","name":"listChildren","return":{"description":"names of the children of the element","type":"String[]"},"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":258,"description":"<p>Returns all of the element's children as an array of <a href=\"#/p5.XML\">p5.XML</a> objects. When\nthe name parameter is specified, then it will return all children that match\nthat name.</p>\n","itemtype":"method","name":"getChildren","params":[{"name":"name","description":"<p>element name</p>\n","type":"String","optional":true}],"return":{"description":"children of the element","type":"p5.XML[]"},"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":314,"description":"<p>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.</p>\n","itemtype":"method","name":"getChild","params":[{"name":"name","description":"<p>element name or index</p>\n","type":"String|Integer"}],"return":{"description":"","type":"p5.XML"},"example":["&lt;animal\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>\n<div class='norender'><code>\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":374,"description":"<p>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 <a href=\"#/p5.XML\">p5.XML</a> object.\nA reference to the newly created child is returned as an <a href=\"#/p5.XML\">p5.XML</a> object.</p>\n","itemtype":"method","name":"addChild","params":[{"name":"node","description":"<p>a <a href=\"#/p5.XML\">p5.XML</a> Object which will be the child to be added</p>\n","type":"p5.XML"}],"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":426,"description":"<p>Removes the element specified by name or index.</p>\n","itemtype":"method","name":"removeChild","params":[{"name":"name","description":"<p>element name or index</p>\n","type":"String|Integer"}],"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>\n<div class='norender'><code>\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":498,"description":"<p>Counts the specified element's number of attributes, returned as an Number.</p>\n","itemtype":"method","name":"getAttributeCount","return":{"description":"","type":"Integer"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":534,"description":"<p>Gets all of the specified element's attributes, and returns them as an\narray of Strings.</p>\n","itemtype":"method","name":"listAttributes","return":{"description":"an array of strings containing the names of attributes","type":"String[]"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":577,"description":"<p>Checks whether or not an element has the specified attribute.</p>\n","itemtype":"method","name":"hasAttribute","params":[{"name":"the","description":"<p>attribute to be checked</p>\n","type":"String"}],"return":{"description":"true if attribute found else false","type":"Boolean"},"example":["\n <div class='norender'><code>\n // The following short XML file called \"mammals.xml\" is parsed\n // in the code below.\n //\n // <?xml version=\"1.0\"?>\n // &lt;mammals&gt;\n //   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n //   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n //   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n // &lt;/mammals&gt;\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 </code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":622,"description":"<p>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.</p>\n","itemtype":"method","name":"getNum","params":[{"name":"name","description":"<p>the non-null full name of the attribute</p>\n","type":"String"},{"name":"defaultValue","description":"<p>the default value of the attribute</p>\n","type":"Number","optional":true}],"return":{"description":"","type":"Number"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":669,"description":"<p>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.</p>\n","itemtype":"method","name":"getString","params":[{"name":"name","description":"<p>the non-null full name of the attribute</p>\n","type":"String"},{"name":"defaultValue","description":"<p>the default value of the attribute</p>\n","type":"Number","optional":true}],"return":{"description":"","type":"String"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":716,"description":"<p>Sets the content of an element's attribute. The first parameter specifies\nthe attribute name, while the second specifies the new content.</p>\n","itemtype":"method","name":"setAttribute","params":[{"name":"name","description":"<p>the full name of the attribute</p>\n","type":"String"},{"name":"value","description":"<p>the value of the attribute</p>\n","type":"Number|String|Boolean"}],"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":757,"description":"<p>Returns the content of an element. If there is no such content,\ndefaultValue is returned if specified, otherwise null is returned.</p>\n","itemtype":"method","name":"getContent","params":[{"name":"defaultValue","description":"<p>value returned if no content is found</p>\n","type":"String","optional":true}],"return":{"description":"","type":"String"},"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":798,"description":"<p>Sets the element's content.</p>\n","itemtype":"method","name":"setContent","params":[{"name":"text","description":"<p>the new content</p>\n","type":"String"}],"example":["\n<div class='norender'><code>\n// The following short XML file called \"mammals.xml\" is parsed\n// in the code below.\n//\n// <?xml version=\"1.0\"?>\n// &lt;mammals&gt;\n//   &lt;animal id=\"0\" species=\"Capra hircus\">Goat&lt;/animal&gt;\n//   &lt;animal id=\"1\" species=\"Panthera pardus\">Leopard&lt;/animal&gt;\n//   &lt;animal id=\"2\" species=\"Equus zebra\">Zebra&lt;/animal&gt;\n// &lt;/mammals&gt;\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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/io/p5.XML.js","line":839,"description":"<p>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.</p>\n","itemtype":"method","name":"serialize","return":{"description":"Serialized string of the element","type":"String"},"example":["\n<div class='norender'><code>\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// <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</code></div>"],"class":"p5.XML","module":"IO","submodule":"Input"},{"file":"src/math/calculation.js","line":10,"description":"<p>Calculates the absolute value (magnitude) of a number. Maps to Math.abs().\nThe absolute value of a number is always positive.</p>\n","itemtype":"method","name":"abs","params":[{"name":"n","description":"<p>number to compute</p>\n","type":"Number"}],"return":{"description":"absolute value of given number","type":"Number"},"example":["\n<div class = \"norender\"><code>\nfunction setup() {\n  let x = -3;\n  let y = abs(x);\n\n  print(x); // -3\n  print(y); // 3\n}\n</code></div>"],"alt":"no image displayed","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":33,"description":"<p>Calculates the closest int value that is greater than or equal to the\nvalue of the parameter. Maps to Math.ceil(). For example, ceil(9.03)\nreturns the value 10.</p>\n","itemtype":"method","name":"ceil","params":[{"name":"n","description":"<p>number to round up</p>\n","type":"Number"}],"return":{"description":"rounded up number","type":"Integer"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  // map, mouseX between 0 and 5.\n  let ax = map(mouseX, 0, 100, 0, 5);\n  let ay = 66;\n\n  //Get the ceiling of the mapped number.\n  let bx = ceil(map(mouseX, 0, 100, 0, 5));\n  let by = 33;\n\n  // Multiply the mapped numbers by 20 to more easily\n  // see the changes.\n  stroke(0);\n  fill(0);\n  line(0, ay, ax * 20, ay);\n  line(0, by, bx * 20, by);\n\n  // Reformat the float returned by map and draw it.\n  noStroke();\n  text(nfc(ax, 2), ax, ay - 5);\n  text(nfc(bx, 1), bx, by - 5);\n}\n</code></div>"],"alt":"2 horizontal lines & number sets. increase with mouse x. bottom to 2 decimals","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":72,"description":"<p>Constrains a value between a minimum and maximum value.</p>\n","itemtype":"method","name":"constrain","params":[{"name":"n","description":"<p>number to constrain</p>\n","type":"Number"},{"name":"low","description":"<p>minimum limit</p>\n","type":"Number"},{"name":"high","description":"<p>maximum limit</p>\n","type":"Number"}],"return":{"description":"constrained number","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n\n  let leftWall = 25;\n  let rightWall = 75;\n\n  // xm is just the mouseX, while\n  // xc is the mouseX, but constrained\n  // between the leftWall and rightWall!\n  let xm = mouseX;\n  let xc = constrain(mouseX, leftWall, rightWall);\n\n  // Draw the walls.\n  stroke(150);\n  line(leftWall, 0, leftWall, height);\n  line(rightWall, 0, rightWall, height);\n\n  // Draw xm and xc as circles.\n  noStroke();\n  fill(150);\n  ellipse(xm, 33, 9, 9); // Not Constrained\n  fill(0);\n  ellipse(xc, 66, 9, 9); // Constrained\n}\n</code></div>"],"alt":"2 vertical lines. 2 ellipses move with mouse X 1 does not move passed lines","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":116,"description":"<p>Calculates the distance between two points, in either two or three dimensions.</p>\n","itemtype":"method","name":"dist","return":{"description":"distance between the two points","type":"Number"},"example":["\n<div><code>\n// Move your mouse inside the canvas to see the\n// change in distance between two points!\nfunction draw() {\n  background(200);\n  fill(0);\n\n  let x1 = 10;\n  let y1 = 90;\n  let x2 = mouseX;\n  let y2 = mouseY;\n\n  line(x1, y1, x2, y2);\n  ellipse(x1, y1, 7, 7);\n  ellipse(x2, y2, 7, 7);\n\n  // d is the length of the line\n  // the distance from point 1 to point 2.\n  let d = int(dist(x1, y1, x2, y2));\n\n  // Let's write d along the line we are drawing!\n  push();\n  translate((x1 + x2) / 2, (y1 + y2) / 2);\n  rotate(atan2(y2 - y1, x2 - x1));\n  text(nfc(d, 1), 0, -5);\n  pop();\n  // Fancy!\n}\n</code></div>"],"alt":"2 ellipses joined by line. 1 ellipse moves with mouse X&Y. Distance displayed.","class":"p5","module":"Math","submodule":"Calculation","overloads":[{"line":116,"params":[{"name":"x1","description":"<p>x-coordinate of the first point</p>\n","type":"Number"},{"name":"y1","description":"<p>y-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"<p>x-coordinate of the second point</p>\n","type":"Number"},{"name":"y2","description":"<p>y-coordinate of the second point</p>\n","type":"Number"}],"return":{"description":"distance between the two points","type":"Number"}},{"line":160,"params":[{"name":"x1","description":"","type":"Number"},{"name":"y1","description":"","type":"Number"},{"name":"z1","description":"<p>z-coordinate of the first point</p>\n","type":"Number"},{"name":"x2","description":"","type":"Number"},{"name":"y2","description":"","type":"Number"},{"name":"z2","description":"<p>z-coordinate of the second point</p>\n","type":"Number"}],"return":{"description":"distance between the two points","type":"Number"}}]},{"file":"src/math/calculation.js","line":181,"description":"<p>Returns Euler's number e (2.71828...) raised to the power of the n\nparameter. Maps to Math.exp().</p>\n","itemtype":"method","name":"exp","params":[{"name":"n","description":"<p>exponent to raise</p>\n","type":"Number"}],"return":{"description":"e^n","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n\n  // Compute the exp() function with a value between 0 and 2\n  let xValue = map(mouseX, 0, width, 0, 2);\n  let yValue = exp(xValue);\n\n  let y = map(yValue, 0, 8, height, 0);\n\n  let legend = 'exp (' + nfc(xValue, 3) + ')\\n= ' + nf(yValue, 1, 4);\n  stroke(150);\n  line(mouseX, y, mouseX, height);\n  fill(0);\n  text(legend, 5, 15);\n  noStroke();\n  ellipse(mouseX, y, 7, 7);\n\n  // Draw the exp(x) curve,\n  // over the domain of x from 0 to 2\n  noFill();\n  stroke(0);\n  beginShape();\n  for (let x = 0; x < width; x++) {\n    xValue = map(x, 0, width, 0, 2);\n    yValue = exp(xValue);\n    y = map(yValue, 0, 8, height, 0);\n    vertex(x, y);\n  }\n\n  endShape();\n  line(0, 0, 0, height);\n  line(0, height - 1, width, height - 1);\n}\n</code></div>"],"alt":"ellipse moves along a curve with mouse x. e^n displayed.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":230,"description":"<p>Calculates the closest int value that is less than or equal to the\nvalue of the parameter. Maps to Math.floor().</p>\n","itemtype":"method","name":"floor","params":[{"name":"n","description":"<p>number to round down</p>\n","type":"Number"}],"return":{"description":"rounded down number","type":"Integer"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  //map, mouseX between 0 and 5.\n  let ax = map(mouseX, 0, 100, 0, 5);\n  let ay = 66;\n\n  //Get the floor of the mapped number.\n  let bx = floor(map(mouseX, 0, 100, 0, 5));\n  let by = 33;\n\n  // Multiply the mapped numbers by 20 to more easily\n  // see the changes.\n  stroke(0);\n  fill(0);\n  line(0, ay, ax * 20, ay);\n  line(0, by, bx * 20, by);\n\n  // Reformat the float returned by map and draw it.\n  noStroke();\n  text(nfc(ax, 2), ax, ay - 5);\n  text(nfc(bx, 1), bx, by - 5);\n}\n</code></div>"],"alt":"2 horizontal lines & number sets. increase with mouse x. bottom to 2 decimals","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":268,"description":"<p>Calculates a number between two numbers at a specific increment. The amt\nparameter is the amount to interpolate between the two values where 0.0\nequal to the first point, 0.1 is very near the first point, 0.5 is\nhalf-way in between, and 1.0 is equal to the second point. If the\nvalue of amt is more than 1.0 or less than 0.0, the number will be\ncalculated accordingly in the ratio of the two given numbers. The lerp\nfunction is convenient for creating motion along a straight\npath and for drawing dotted lines.</p>\n","itemtype":"method","name":"lerp","params":[{"name":"start","description":"<p>first value</p>\n","type":"Number"},{"name":"stop","description":"<p>second value</p>\n","type":"Number"},{"name":"amt","description":"<p>number</p>\n","type":"Number"}],"return":{"description":"lerped value","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  background(200);\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  let y = 50;\n\n  strokeWeight(5);\n  stroke(0); // Draw the original points in black\n  point(a, y);\n  point(b, y);\n\n  stroke(100); // Draw the lerp points in gray\n  point(c, y);\n  point(d, y);\n  point(e, y);\n}\n</code></div>"],"alt":"5 points horizontally staggered mid-canvas. mid 3 are grey, outer black","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":315,"description":"<p>Calculates the natural logarithm (the base-e logarithm) of a number. This\nfunction expects the n parameter to be a value greater than 0.0. Maps to\nMath.log().</p>\n","itemtype":"method","name":"log","params":[{"name":"n","description":"<p>number greater than 0</p>\n","type":"Number"}],"return":{"description":"natural logarithm of n","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  let maxX = 2.8;\n  let maxY = 1.5;\n\n  // Compute the natural log of a value between 0 and maxX\n  let xValue = map(mouseX, 0, width, 0, maxX);\n  let yValue, y;\n  if (xValue > 0) {\n   // Cannot take the log of a negative number.\n    yValue = log(xValue);\n    y = map(yValue, -maxY, maxY, height, 0);\n\n    // Display the calculation occurring.\n    let legend = 'log(' + nf(xValue, 1, 2) + ')\\n= ' + nf(yValue, 1, 3);\n    stroke(150);\n    line(mouseX, y, mouseX, height);\n    fill(0);\n    text(legend, 5, 15);\n    noStroke();\n    ellipse(mouseX, y, 7, 7);\n  }\n\n  // Draw the log(x) curve,\n  // over the domain of x from 0 to maxX\n  noFill();\n  stroke(0);\n  beginShape();\n  for (let x = 0; x < width; x++) {\n    xValue = map(x, 0, width, 0, maxX);\n    yValue = log(xValue);\n    y = map(yValue, -maxY, maxY, height, 0);\n    vertex(x, y);\n  }\n  endShape();\n  line(0, 0, 0, height);\n  line(0, height / 2, width, height / 2);\n}\n</code></div>"],"alt":"ellipse moves along a curve with mouse x. natural logarithm of n displayed.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":370,"description":"<p>Calculates the magnitude (or length) of a vector. A vector is a direction\nin space commonly used in computer graphics and linear algebra. Because it\nhas no \"start\" position, the magnitude of a vector can be thought of as\nthe distance from the coordinate 0,0 to its x,y value. Therefore, <a href=\"#/p5/mag\">mag()</a> is\na shortcut for writing dist(0, 0, x, y).</p>\n","itemtype":"method","name":"mag","params":[{"name":"a","description":"<p>first value</p>\n","type":"Number"},{"name":"b","description":"<p>second value</p>\n","type":"Number"}],"return":{"description":"magnitude of vector from (0,0) to (a,b)","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  let x1 = 20;\n  let x2 = 80;\n  let y1 = 30;\n  let y2 = 70;\n\n  line(0, 0, x1, y1);\n  print(mag(x1, y1)); // Prints \"36.05551275463989\"\n  line(0, 0, x2, y1);\n  print(mag(x2, y1)); // Prints \"85.44003745317531\"\n  line(0, 0, x1, y2);\n  print(mag(x1, y2)); // Prints \"72.80109889280519\"\n  line(0, 0, x2, y2);\n  print(mag(x2, y2)); // Prints \"106.3014581273465\"\n}\n</code></div>"],"alt":"4 lines of different length radiate from top left of canvas.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":408,"description":"<p>Re-maps a number from one range to another.</p>\n<p>In the first example above, the number 25 is converted from a value in the\nrange of 0 to 100 into a value that ranges from the left edge of the\nwindow (0) to the right edge (width).</p>\n","itemtype":"method","name":"map","params":[{"name":"value","description":"<p>the incoming value to be converted</p>\n","type":"Number"},{"name":"start1","description":"<p>lower bound of the value's current range</p>\n","type":"Number"},{"name":"stop1","description":"<p>upper bound of the value's current range</p>\n","type":"Number"},{"name":"start2","description":"<p>lower bound of the value's target range</p>\n","type":"Number"},{"name":"stop2","description":"<p>upper bound of the value's target range</p>\n","type":"Number"},{"name":"withinBounds","description":"<p>constrain the value to the newly mapped range</p>\n","type":"Boolean","optional":true}],"return":{"description":"remapped number","type":"Number"},"example":["\n  <div><code>\nlet value = 25;\nlet m = map(value, 0, 100, 0, width);\nellipse(m, 50, 10, 10);\n</code></div>\n\n  <div><code>\nfunction setup() {\n  noStroke();\n}\n\nfunction draw() {\n  background(204);\n  let x1 = map(mouseX, 0, width, 25, 75);\n  ellipse(x1, 25, 25, 25);\n  //This ellipse is constrained to the 0-100 range\n  //after setting withinBounds to true\n  let x2 = map(mouseX, 0, width, 0, 100, true);\n  ellipse(x2, 75, 25, 25);\n}\n</code></div>"],"alt":"10 by 10 white ellipse with in mid left canvas\n2 25 by 25 white ellipses move with mouse x. Bottom has more range from X","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":463,"description":"<p>Determines the largest value in a sequence of numbers, and then returns\nthat value. <a href=\"#/p5/max\">max()</a> accepts any number of Number parameters, or an Array\nof any length.</p>\n","itemtype":"method","name":"max","return":{"description":"maximum Number","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  // Change the elements in the array and run the sketch\n  // to show how max() works!\n  let numArray = [2, 1, 5, 4, 8, 9];\n  fill(0);\n  noStroke();\n  text('Array Elements', 0, 10);\n  // Draw all numbers in the array\n  let spacing = 15;\n  let elemsY = 25;\n  for (let i = 0; i < numArray.length; i++) {\n    text(numArray[i], i * spacing, elemsY);\n  }\n  let maxX = 33;\n  let maxY = 80;\n  // Draw the Maximum value in the array.\n  textSize(32);\n  text(max(numArray), maxX, maxY);\n}\n</code></div>"],"alt":"Small text at top reads: Array Elements 2 1 5 4 8 9. Large text at center: 9","class":"p5","module":"Math","submodule":"Calculation","overloads":[{"line":463,"params":[{"name":"n0","description":"<p>Number to compare</p>\n","type":"Number"},{"name":"n1","description":"<p>Number to compare</p>\n","type":"Number"}],"return":{"description":"maximum Number","type":"Number"}},{"line":498,"params":[{"name":"nums","description":"<p>Numbers to compare</p>\n","type":"Number[]"}],"return":{"description":"","type":"Number"}}]},{"file":"src/math/calculation.js","line":512,"description":"<p>Determines the smallest value in a sequence of numbers, and then returns\nthat value. <a href=\"#/p5/min\">min()</a> accepts any number of Number parameters, or an Array\nof any length.</p>\n","itemtype":"method","name":"min","return":{"description":"minimum Number","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  // Change the elements in the array and run the sketch\n  // to show how min() works!\n  let numArray = [2, 1, 5, 4, 8, 9];\n  fill(0);\n  noStroke();\n  text('Array Elements', 0, 10);\n  // Draw all numbers in the array\n  let spacing = 15;\n  let elemsY = 25;\n  for (let i = 0; i < numArray.length; i++) {\n    text(numArray[i], i * spacing, elemsY);\n  }\n  let maxX = 33;\n  let maxY = 80;\n  // Draw the Minimum value in the array.\n  textSize(32);\n  text(min(numArray), maxX, maxY);\n}\n</code></div>"],"alt":"Small text at top reads: Array Elements 2 1 5 4 8 9. Large text at center: 1","class":"p5","module":"Math","submodule":"Calculation","overloads":[{"line":512,"params":[{"name":"n0","description":"<p>Number to compare</p>\n","type":"Number"},{"name":"n1","description":"<p>Number to compare</p>\n","type":"Number"}],"return":{"description":"minimum Number","type":"Number"}},{"line":547,"params":[{"name":"nums","description":"<p>Numbers to compare</p>\n","type":"Number[]"}],"return":{"description":"","type":"Number"}}]},{"file":"src/math/calculation.js","line":561,"description":"<p>Normalizes a number from another range into a value between 0 and 1.\nIdentical to map(value, low, high, 0, 1).\nNumbers outside of the range are not clamped to 0 and 1, because\nout-of-range values are often intentional and useful. (See the example above.)</p>\n","itemtype":"method","name":"norm","params":[{"name":"value","description":"<p>incoming value to be normalized</p>\n","type":"Number"},{"name":"start","description":"<p>lower bound of the value's current range</p>\n","type":"Number"},{"name":"stop","description":"<p>upper bound of the value's current range</p>\n","type":"Number"}],"return":{"description":"normalized number","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  let currentNum = mouseX;\n  let lowerBound = 0;\n  let upperBound = width; //100;\n  let normalized = norm(currentNum, lowerBound, upperBound);\n  let lineY = 70;\n  stroke(3);\n  line(0, lineY, width, lineY);\n  //Draw an ellipse mapped to the non-normalized value.\n  noStroke();\n  fill(50);\n  let s = 7; // ellipse size\n  ellipse(currentNum, lineY, s, s);\n\n  // Draw the guide\n  let guideY = lineY + 15;\n  text('0', 0, guideY);\n  textAlign(RIGHT);\n  text('100', width, guideY);\n\n  // Draw the normalized value\n  textAlign(LEFT);\n  fill(0);\n  textSize(32);\n  let normalY = 40;\n  let normalX = 20;\n  text(normalized, normalX, normalY);\n}\n</code></div>"],"alt":"ellipse moves with mouse. 0 shown left & 100 right and updating values center","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":613,"description":"<p>Facilitates exponential expressions. The <a href=\"#/p5/pow\">pow()</a> function is an efficient\nway of multiplying numbers by themselves (or their reciprocals) in large\nquantities. For example, pow(3, 5) is equivalent to the expression\n3 × 3 × 3 × 3 × 3 and pow(3, -5) is equivalent to 1 /\n3 × 3 × 3 × 3 × 3. Maps to\nMath.pow().</p>\n","itemtype":"method","name":"pow","params":[{"name":"n","description":"<p>base of the exponential expression</p>\n","type":"Number"},{"name":"e","description":"<p>power by which to raise the base</p>\n","type":"Number"}],"return":{"description":"n^e","type":"Number"},"example":["\n<div><code>\nfunction setup() {\n  //Exponentially increase the size of an ellipse.\n  let eSize = 3; // Original Size\n  let eLoc = 10; // Original Location\n\n  ellipse(eLoc, eLoc, eSize, eSize);\n\n  ellipse(eLoc * 2, eLoc * 2, pow(eSize, 2), pow(eSize, 2));\n\n  ellipse(eLoc * 4, eLoc * 4, pow(eSize, 3), pow(eSize, 3));\n\n  ellipse(eLoc * 8, eLoc * 8, pow(eSize, 4), pow(eSize, 4));\n}\n</code></div>"],"alt":"small to large ellipses radiating from top left of canvas","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":647,"description":"<p>Calculates the integer closest to the n parameter. For example,\nround(133.8) returns the value 134. Maps to Math.round().</p>\n","itemtype":"method","name":"round","params":[{"name":"n","description":"<p>number to round</p>\n","type":"Number"},{"name":"decimals","description":"<p>number of decimal places to round to, default is 0</p>\n","type":"Number","optional":true}],"return":{"description":"rounded number","type":"Integer"},"example":["\n<div><code>\nlet x = round(3.7);\ntext(x, width / 2, height / 2);\n</code></div>\n<div><code>\nlet x = round(12.782383, 2);\ntext(x, width / 2, height / 2);\n</code></div>\n<div><code>\nfunction draw() {\n  background(200);\n  //map, mouseX between 0 and 5.\n  let ax = map(mouseX, 0, 100, 0, 5);\n  let ay = 66;\n\n  // Round the mapped number.\n  let bx = round(map(mouseX, 0, 100, 0, 5));\n  let by = 33;\n\n  // Multiply the mapped numbers by 20 to more easily\n  // see the changes.\n  stroke(0);\n  fill(0);\n  line(0, ay, ax * 20, ay);\n  line(0, by, bx * 20, by);\n\n  // Reformat the float returned by map and draw it.\n  noStroke();\n  text(nfc(ax, 2), ax, ay - 5);\n  text(nfc(bx, 1), bx, by - 5);\n}\n</code></div>"],"alt":"\"3\" written in middle of canvas\n\"12.78\" written in middle of canvas\nhorizontal center line squared values displayed on top and regular on bottom.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":701,"description":"<p>Squares a number (multiplies a number by itself). The result is always a\npositive number, as multiplying two negative numbers always yields a\npositive result. For example, -1 * -1 = 1.</p>\n","itemtype":"method","name":"sq","params":[{"name":"n","description":"<p>number to square</p>\n","type":"Number"}],"return":{"description":"squared number","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  let eSize = 7;\n  let x1 = map(mouseX, 0, width, 0, 10);\n  let y1 = 80;\n  let x2 = sq(x1);\n  let y2 = 20;\n\n  // Draw the non-squared.\n  line(0, y1, width, y1);\n  ellipse(x1, y1, eSize, eSize);\n\n  // Draw the squared.\n  line(0, y2, width, y2);\n  ellipse(x2, y2, eSize, eSize);\n\n  // Draw dividing line.\n  stroke(100);\n  line(0, height / 2, width, height / 2);\n\n  // Draw text.\n  let spacing = 15;\n  noStroke();\n  fill(0);\n  text('x = ' + x1, 0, y1 + spacing);\n  text('sq(x) = ' + x2, 0, y2 + spacing);\n}\n</code></div>"],"alt":"horizontal center line squared values displayed on top and regular on bottom.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":745,"description":"<p>Calculates the square root of a number. The square root of a number is\nalways positive, even though there may be a valid negative root. The\nsquare root s of number a is such that s*s = a. It is the opposite of\nsquaring. Maps to Math.sqrt().</p>\n","itemtype":"method","name":"sqrt","params":[{"name":"n","description":"<p>non-negative number to square root</p>\n","type":"Number"}],"return":{"description":"square root of number","type":"Number"},"example":["\n<div><code>\nfunction draw() {\n  background(200);\n  let eSize = 7;\n  let x1 = mouseX;\n  let y1 = 80;\n  let x2 = sqrt(x1);\n  let y2 = 20;\n\n  // Draw the non-squared.\n  line(0, y1, width, y1);\n  ellipse(x1, y1, eSize, eSize);\n\n  // Draw the squared.\n  line(0, y2, width, y2);\n  ellipse(x2, y2, eSize, eSize);\n\n  // Draw dividing line.\n  stroke(100);\n  line(0, height / 2, width, height / 2);\n\n  // Draw text.\n  noStroke();\n  fill(0);\n  let spacing = 15;\n  text('x = ' + x1, 0, y1 + spacing);\n  text('sqrt(x) = ' + x2, 0, y2 + spacing);\n}\n</code></div>"],"alt":"horizontal center line squareroot values displayed on top and regular on bottom.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/calculation.js","line":832,"description":"<p>Calculates the fractional part of a number.</p>\n","itemtype":"method","name":"fract","params":[{"name":"num","description":"<p>Number whose fractional part needs to be found out</p>\n","type":"Number"}],"return":{"description":"fractional part of x, i.e, {x}","type":"Number"},"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(windowWidth, windowHeight);\n  fill(0);\n  text(7345.73472742, 0, 50);\n  text(fract(7345.73472742), 0, 100);\n  text(1.4215e-15, 150, 50);\n  text(fract(1.4215e-15), 150, 100);\n}\n</code>\n</div>"],"alt":"2 rows of numbers, the first row having 8 numbers and the second having the fractional parts of those numbers.","class":"p5","module":"Math","submodule":"Calculation"},{"file":"src/math/math.js","line":10,"description":"<p>Creates a new <a href=\"#/p5.Vector\">p5.Vector</a> (the datatype for storing vectors). This provides a\ntwo or three dimensional vector, specifically a Euclidean (also known as\ngeometric) vector. A vector is an entity that has both magnitude and\ndirection.</p>\n","itemtype":"method","name":"createVector","params":[{"name":"x","description":"<p>x component of the vector</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>z component of the vector</p>\n","type":"Number","optional":true}],"return":{"description":"","type":"p5.Vector"},"example":["\n<div><code>\nlet v1;\nfunction setup() {\n  createCanvas(100, 100);\n  stroke(255, 0, 255);\n  v1 = createVector(width / 2, height / 2);\n}\n\nfunction draw() {\n  background(255);\n  line(v1.x, v1.y, mouseX, mouseY);\n}\n</code></div>"],"alt":"draws a line from center of canvas to mouse pointer position.","class":"p5","module":"Math","submodule":"Vector"},{"file":"src/math/noise.js","line":36,"description":"<p>Returns the Perlin noise value at specified coordinates. Perlin noise is\na random sequence generator producing a more naturally ordered, harmonic\nsuccession of numbers compared to the standard <b>random()</b> function.\nIt was invented by Ken Perlin in the 1980s and been used since in\ngraphical applications to produce procedural textures, natural motion,\nshapes, terrains etc.<br /><br /> The main difference to the\n<b>random()</b> function is that Perlin noise is defined in an infinite\nn-dimensional space where each pair of coordinates corresponds to a\nfixed semi-random value (fixed only for the lifespan of the program; see\nthe <a href=\"#/p5/noiseSeed\">noiseSeed()</a> function). p5.js can compute 1D, 2D and 3D noise,\ndepending on the number of coordinates given. The resulting value will\nalways be between 0.0 and 1.0. The noise value can be animated by moving\nthrough the noise space as demonstrated in the example above. The 2nd\nand 3rd dimension can also be interpreted as time.<br /><br />The actual\nnoise is structured similar to an audio signal, in respect to the\nfunction's use of frequencies. Similar to the concept of harmonics in\nphysics, perlin noise is computed over several octaves which are added\ntogether for the final result. <br /><br />Another way to adjust the\ncharacter of the resulting sequence is the scale of the input\ncoordinates. As the function works within an infinite space the value of\nthe coordinates doesn't matter as such, only the distance between\nsuccessive coordinates does (eg. when using <b>noise()</b> within a\nloop). As a general rule the smaller the difference between coordinates,\nthe smoother the resulting noise sequence will be. Steps of 0.005-0.03\nwork best for most applications, but this will differ depending on use.</p>\n","itemtype":"method","name":"noise","params":[{"name":"x","description":"<p>x-coordinate in noise space</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate in noise space</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>z-coordinate in noise space</p>\n","type":"Number","optional":true}],"return":{"description":"Perlin noise value (between 0 and 1) at specified\n                     coordinates","type":"Number"},"example":["\n<div>\n<code>\nlet xoff = 0.0;\n\nfunction draw() {\n  background(204);\n  xoff = xoff + 0.01;\n  let n = noise(xoff) * width;\n  line(n, 0, n, height);\n}\n</code>\n</div>\n<div>\n<code>let noiseScale=0.02;\n\nfunction draw() {\n  background(0);\n  for (let x=0; x < width; x++) {\n    let noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);\n    stroke(noiseVal*255);\n    line(x, mouseY+noiseVal*80, x, height);\n  }\n}\n</code>\n</div>"],"alt":"vertical line moves left to right with updating noise values.\nhorizontal wave pattern effected by mouse x-position & updating noise values.","class":"p5","module":"Math","submodule":"Noise"},{"file":"src/math/noise.js","line":178,"description":"<p>Adjusts the character and level of detail produced by the Perlin noise\n function. Similar to harmonics in physics, noise is computed over\n several octaves. Lower octaves contribute more to the output signal and\n as such define the overall intensity of the noise, whereas higher octaves\n create finer grained details in the noise sequence.\nBy default, noise is computed over 4 octaves with each octave contributing\n exactly half than its predecessor, starting at 50% strength for the 1st\n octave. This falloff amount can be changed by adding an additional function\n parameter. Eg. a falloff factor of 0.75 means each octave will now have\n 75% impact (25% less) of the previous lower octave. Any value between\n 0.0 and 1.0 is valid, however note that values greater than 0.5 might\n result in greater than 1.0 values returned by <b>noise()</b>.\nBy changing these parameters, the signal created by the <b>noise()</b>\n function can be adapted to fit very specific needs and characteristics.</p>\n","itemtype":"method","name":"noiseDetail","params":[{"name":"lod","description":"<p>number of octaves to be used by the noise</p>\n","type":"Number"},{"name":"falloff","description":"<p>falloff factor for each octave</p>\n","type":"Number"}],"example":["\n <div>\n <code>\n let noiseVal;\n let noiseScale = 0.02;\nfunction setup() {\n   createCanvas(100, 100);\n }\nfunction draw() {\n   background(0);\n   for (let y = 0; y < height; y++) {\n     for (let x = 0; x < width / 2; x++) {\n       noiseDetail(2, 0.2);\n       noiseVal = noise((mouseX + x) * noiseScale, (mouseY + y) * noiseScale);\n       stroke(noiseVal * 255);\n       point(x, y);\n       noiseDetail(8, 0.65);\n       noiseVal = noise(\n         (mouseX + x + width / 2) * noiseScale,\n         (mouseY + y) * noiseScale\n       );\n       stroke(noiseVal * 255);\n       point(x + width / 2, y);\n     }\n   }\n }\n </code>\n </div>"],"alt":"2 vertical grey smokey patterns affected my mouse x-position and noise.","class":"p5","module":"Math","submodule":"Noise"},{"file":"src/math/noise.js","line":243,"description":"<p>Sets the seed value for <b>noise()</b>. By default, <b>noise()</b>\nproduces different results each time the program is run. Set the\n<b>value</b> parameter to a constant to return the same pseudo-random\nnumbers each time the software is run.</p>\n","itemtype":"method","name":"noiseSeed","params":[{"name":"seed","description":"<p>the seed value</p>\n","type":"Number"}],"example":["\n<div>\n<code>let xoff = 0.0;\n\nfunction setup() {\n  noiseSeed(99);\n  stroke(0, 10);\n}\n\nfunction draw() {\n  xoff = xoff + .01;\n  let n = noise(xoff) * width;\n  line(n, 0, n, height);\n}\n</code>\n</div>"],"alt":"vertical grey lines drawing in pattern affected by noise.","class":"p5","module":"Math","submodule":"Noise"},{"file":"src/math/p5.Vector.js","line":65,"description":"<p>The x component of the vector</p>\n","itemtype":"property","name":"x","type":"Number","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":70,"description":"<p>The y component of the vector</p>\n","itemtype":"property","name":"y","type":"Number","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":75,"description":"<p>The z component of the vector</p>\n","itemtype":"property","name":"z","type":"Number","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":82,"description":"<p>Returns a string representation of a vector v by calling String(v)\nor v.toString(). This method is useful for logging vectors in the\nconsole.</p>\n","itemtype":"method","name":"toString","return":{"description":"","type":"String"},"example":["\n<div class = \"norender\">\n<code>\nfunction setup() {\n  let v = createVector(20, 30);\n  print(String(v)); // prints \"p5.Vector Object : [20, 30, 0]\"\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'black');\n\n  noStroke();\n  text(v1.toString(), 10, 25, 90, 75);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":132,"description":"<p>Sets the x, y, and z component of the vector using two or three separate\nvariables, the data from a <a href=\"#/p5.Vector\">p5.Vector</a>, or the values from a float array.</p>\n","itemtype":"method","name":"set","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nfunction setup() {\n  let v = createVector(1, 2, 3);\n  v.set(4, 5, 6); // Sets vector to [4, 5, 6]\n\n  let v1 = createVector(0, 0, 0);\n  let arr = [1, 2, 3];\n  v1.set(arr); // Sets vector to [1, 2, 3]\n}\n</code>\n</div>\n\n<div>\n<code>\nlet v0, v1;\nfunction setup() {\n  createCanvas(100, 100);\n\n  v0 = createVector(0, 0);\n  v1 = createVector(50, 50);\n}\n\nfunction draw() {\n  background(240);\n\n  drawArrow(v0, v1, 'black');\n  v1.set(v1.x + random(-1, 1), v1.y + random(-1, 1));\n\n  noStroke();\n  text('x: ' + round(v1.x) + ' y: ' + round(v1.y), 20, 90);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":132,"params":[{"name":"x","description":"<p>the x component of the vector</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>the y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>the z component of the vector</p>\n","type":"Number","optional":true}],"chainable":1},{"line":191,"params":[{"name":"value","description":"<p>the vector to set</p>\n","type":"p5.Vector|Number[]"}],"chainable":1}]},{"file":"src/math/p5.Vector.js","line":215,"description":"<p>Gets a copy of the vector, returns a <a href=\"#/p5.Vector\">p5.Vector</a> object.</p>\n","itemtype":"method","name":"copy","return":{"description":"the copy of the <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 2, 3);\nlet v2 = v1.copy();\nprint(v1.x === v2.x && v1.y === v2.y && v1.z === v2.z);\n// Prints \"true\"\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":238,"description":"<p>Adds x, y, and z components to a vector, adds one vector to another, or\nadds two independent vectors together. The version of the method that adds\ntwo vectors together is a static method and returns a <a href=\"#/p5.Vector\">p5.Vector</a>, the others\nacts directly on the vector. Additionally, you may provide arguments to this function as an array.\nSee the examples for more context.</p>\n","itemtype":"method","name":"add","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(1, 2, 3);\nv.add(4, 5, 6);\n// v's components are set to [5, 7, 9]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v = createVector(1, 2, 3);\n// Provide arguments as an array\nlet arr = [4, 5, 6];\nv.add(arr);\n// v's components are set to [5, 7, 9]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(1, 2, 3);\nlet v2 = createVector(2, 3, 4);\n\nlet v3 = p5.Vector.add(v1, v2);\n// v3 has components [3, 5, 7]\nprint(v3);\n</code>\n</div>\n\n<div>\n<code>\n// red vector + blue vector = purple vector\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(-30, 20);\n  drawArrow(v1, v2, 'blue');\n\n  let v3 = p5.Vector.add(v1, v2);\n  drawArrow(v0, v3, 'purple');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":238,"params":[{"name":"x","description":"<p>the x component of the vector to be added</p>\n","type":"Number"},{"name":"y","description":"<p>the y component of the vector to be added</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>the z component of the vector to be added</p>\n","type":"Number","optional":true}],"chainable":1},{"line":315,"params":[{"name":"value","description":"<p>the vector to add</p>\n","type":"p5.Vector|Number[]"}],"chainable":1},{"line":1988,"params":[{"name":"v1","description":"<p>a <a href=\"#/p5.Vector\">p5.Vector</a> to add</p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>a <a href=\"#/p5.Vector\">p5.Vector</a> to add</p>\n","type":"p5.Vector"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"the resulting <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":362,"description":"<p>Gives remainder of a vector when it is divided by another vector.\nSee examples for more context.</p>\n","itemtype":"method","name":"rem","chainable":1,"example":["\n<div class='norender'>\n<code>\nlet v = createVector(3, 4, 5);\nv.rem(2, 3, 4);\n// v's components are set to [1, 1, 1]\n</code>\n</div>\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(3, 4, 5);\nlet v2 = createVector(2, 3, 4);\n\nlet v3 = p5.Vector.rem(v1, v2);\n// v3 has components [1, 1, 1]\nprint(v3);\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":362,"params":[{"name":"x","description":"<p>the x component of divisor vector</p>\n","type":"Number"},{"name":"y","description":"<p>the y component of divisor vector</p>\n","type":"Number"},{"name":"z","description":"<p>the z component of divisor vector</p>\n","type":"Number"}],"chainable":1},{"line":391,"params":[{"name":"value","description":"<p>divisor vector</p>\n","type":"p5.Vector | Number[]"}],"chainable":1},{"line":2014,"params":[{"name":"v1","description":"<p>dividend <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>divisor <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"static":1},{"line":2020,"params":[{"name":"v1","description":"","type":"p5.Vector"},{"name":"v2","description":"","type":"p5.Vector"}],"static":1,"return":{"description":"the resulting <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":446,"description":"<p>Subtracts x, y, and z components from a vector, subtracts one vector from\nanother, or subtracts two independent vectors. The version of the method\nthat subtracts two vectors is a static method and returns a <a href=\"#/p5.Vector\">p5.Vector</a>, the\nother acts directly on the vector. Additionally, you may provide arguments to this function as an array.\nSee the examples for more context.</p>\n","itemtype":"method","name":"sub","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(4, 5, 6);\nv.sub(1, 1, 1);\n// v's components are set to [3, 4, 5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v = createVector(4, 5, 6);\n// Provide arguments as an array\nlet arr = [1, 1, 1];\nv.sub(arr);\n// v's components are set to [3, 4, 5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(2, 3, 4);\nlet v2 = createVector(1, 2, 3);\n\nlet v3 = p5.Vector.sub(v1, v2);\n// v3 has components [1, 1, 1]\nprint(v3);\n</code>\n</div>\n\n<div>\n<code>\n// red vector - blue vector = purple vector\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(70, 50);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(mouseX, mouseY);\n  drawArrow(v0, v2, 'blue');\n\n  let v3 = p5.Vector.sub(v1, v2);\n  drawArrow(v2, v3, 'purple');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":446,"params":[{"name":"x","description":"<p>the x component of the vector to subtract</p>\n","type":"Number"},{"name":"y","description":"<p>the y component of the vector to subtract</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>the z component of the vector to subtract</p>\n","type":"Number","optional":true}],"chainable":1},{"line":523,"params":[{"name":"value","description":"<p>the vector to subtract</p>\n","type":"p5.Vector|Number[]"}],"chainable":1},{"line":2039,"params":[{"name":"v1","description":"<p>a <a href=\"#/p5.Vector\">p5.Vector</a> to subtract from</p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>a <a href=\"#/p5.Vector\">p5.Vector</a> to subtract</p>\n","type":"p5.Vector"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"the resulting <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":547,"description":"<p>Multiplies the vector by a scalar, multiplies the x, y, and z components from a vector, or multiplies\nthe x, y, and z components of two independent vectors. When multiplying a vector by a scalar, the x, y,\nand z components of the vector are all multiplied by the scalar. When multiplying a vector by a vector,\nthe x, y, z components of both vectors are multiplied by each other\n(for example, with two vectors a and b: a.x * b.x, a.y * b.y, a.z * b.z). The static version of this method\ncreates a new <a href=\"#/p5.Vector\">p5.Vector</a> while the non static version acts on the vector\ndirectly. Additionally, you may provide arguments to this function as an array.\nSee the examples for more context.</p>\n","itemtype":"method","name":"mult","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(1, 2, 3);\nv.mult(2);\n// v's components are set to [2, 4, 6]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(1, 2, 3);\nlet v1 = createVector(2, 3, 4);\nv0.mult(v1); // v0's components are set to [2, 6, 12]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(1, 2, 3);\n// Provide arguments as an array\nlet arr = [2, 3, 4];\nv0.mult(arr); // v0's components are set to [2, 6, 12]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(1, 2, 3);\nlet v1 = createVector(2, 3, 4);\nconst result = p5.Vector.mult(v0, v1);\nprint(result); // result's components are set to [2, 6, 12]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(1, 2, 3);\nlet v2 = p5.Vector.mult(v1, 2);\n// v2 has components [2, 4, 6]\nprint(v2);\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(25, -25);\n  drawArrow(v0, v1, 'red');\n\n  let num = map(mouseX, 0, width, -2, 2, true);\n  let v2 = p5.Vector.mult(v1, num);\n  drawArrow(v0, v2, 'blue');\n\n  noStroke();\n  text('multiplied by ' + num.toFixed(2), 5, 90);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":547,"params":[{"name":"n","description":"<p>The number to multiply with the vector</p>\n","type":"Number"}],"chainable":1},{"line":640,"params":[{"name":"x","description":"<p>The number to multiply with the x component of the vector</p>\n","type":"Number"},{"name":"y","description":"<p>The number to multiply with the y component of the vector</p>\n","type":"Number"},{"name":"z","description":"<p>The number to multiply with the z component of the vector</p>\n","type":"Number","optional":true}],"chainable":1},{"line":648,"params":[{"name":"arr","description":"<p>The array to multiply with the components of the vector</p>\n","type":"Number[]"}],"chainable":1},{"line":654,"params":[{"name":"v","description":"<p>The vector to multiply with the components of the original vector</p>\n","type":"p5.Vector"}],"chainable":1},{"line":2068,"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 <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}},{"line":2077,"params":[{"name":"v","description":"","type":"p5.Vector"},{"name":"n","description":"","type":"Number"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1},{"line":2085,"params":[{"name":"v0","description":"","type":"p5.Vector"},{"name":"v1","description":"","type":"p5.Vector"},{"name":"target","description":"","type":"p5.Vector","optional":true}],"static":1},{"line":2093,"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":739,"description":"<p>Divides the vector by a scalar, divides a vector by the x, y, and z arguments, or divides the x, y, and\nz components of two vectors against each other. When dividing a vector by a scalar, the x, y,\nand z components of the vector are all divided by the scalar. When dividing a vector by a vector,\nthe x, y, z components of the source vector are treated as the dividend, and the x, y, z components\nof the argument is treated as the divisor (for example with two vectors a and b: a.x / b.x, a.y / b.y, a.z / b.z).\nThe static version of this method creates a\nnew <a href=\"#/p5.Vector\">p5.Vector</a> while the non static version acts on the vector directly.\nAdditionally, you may provide arguments to this function as an array.\nSee the examples for more context.</p>\n","itemtype":"method","name":"div","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(6, 4, 2);\nv.div(2); //v's components are set to [3, 2, 1]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(9, 4, 2);\nlet v1 = createVector(3, 2, 4);\nv0.div(v1); // v0's components are set to [3, 2, 0.5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(9, 4, 2);\n// Provide arguments as an array\nlet arr = [3, 2, 4];\nv0.div(arr); // v0's components are set to [3, 2, 0.5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v0 = createVector(9, 4, 2);\nlet v1 = createVector(3, 2, 4);\nlet result = p5.Vector.div(v0, v1);\nprint(result); // result's components are set to [3, 2, 0.5]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(6, 4, 2);\nlet v2 = p5.Vector.div(v1, 2);\n// v2 has components [3, 2, 1]\nprint(v2);\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 100);\n  let v1 = createVector(50, -50);\n  drawArrow(v0, v1, 'red');\n\n  let num = map(mouseX, 0, width, 10, 0.5, true);\n  let v2 = p5.Vector.div(v1, num);\n  drawArrow(v0, v2, 'blue');\n\n  noStroke();\n  text('divided by ' + num.toFixed(2), 10, 90);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":739,"params":[{"name":"n","description":"<p>The number to divide the vector by</p>\n","type":"Number"}],"chainable":1},{"line":832,"params":[{"name":"x","description":"<p>The number to divide with the x component of the vector</p>\n","type":"Number"},{"name":"y","description":"<p>The number to divide with the y component of the vector</p>\n","type":"Number"},{"name":"z","description":"<p>The number to divide with the z component of the vector</p>\n","type":"Number","optional":true}],"chainable":1},{"line":840,"params":[{"name":"arr","description":"<p>The array to divide the components of the vector by</p>\n","type":"Number[]"}],"chainable":1},{"line":846,"params":[{"name":"v","description":"<p>The vector to divide the components of the original vector by</p>\n","type":"p5.Vector"}],"chainable":1},{"line":2120,"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 <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"}},{"line":2129,"params":[{"name":"v","description":"","type":"p5.Vector"},{"name":"n","description":"","type":"Number"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1},{"line":2137,"params":[{"name":"v0","description":"","type":"p5.Vector"},{"name":"v1","description":"","type":"p5.Vector"},{"name":"target","description":"","type":"p5.Vector","optional":true}],"static":1},{"line":2145,"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":944,"description":"<p>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).)</p>\n","itemtype":"method","name":"mag","return":{"description":"magnitude of the vector","type":"Number"},"example":["\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'black');\n\n  noStroke();\n  text('vector length: ' + v1.mag().toFixed(2), 10, 70, 90, 30);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>\n<div class=\"norender\">\n<code>\nlet v = createVector(20.0, 30.0, 40.0);\nlet m = v.mag();\nprint(m); // Prints \"53.85164807134504\"\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":944,"params":[],"return":{"description":"magnitude of the vector","type":"Number"}},{"line":2241,"params":[{"name":"vecT","description":"<p>the vector to return the magnitude of</p>\n","type":"p5.Vector"}],"static":1,"return":{"description":"the magnitude of vecT","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":992,"description":"<p>Calculates the squared magnitude of the vector and returns the result\nas a float (this is simply the equation <em>(x*x + y*y + z*z)</em>.)\nFaster if the real length is not required in the\ncase of comparing vectors, etc.</p>\n","itemtype":"method","name":"magSq","return":{"description":"squared magnitude of the vector","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(6, 4, 2);\nprint(v1.magSq()); // Prints \"56\"\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'black');\n\n  noStroke();\n  text('vector length squared: ' + v1.magSq().toFixed(2), 10, 45, 90, 55);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1046,"description":"<p>Calculates the dot product of two vectors. The version of the method\nthat computes the dot product of two independent vectors is a static\nmethod. See the examples for more context.</p>\n","itemtype":"method","name":"dot","return":{"description":"the dot product","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 2, 3);\nlet v2 = createVector(2, 3, 4);\n\nprint(v1.dot(v2)); // Prints \"20\"\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n//Static method\nlet v1 = createVector(1, 2, 3);\nlet v2 = createVector(3, 2, 1);\nprint(p5.Vector.dot(v1, v2)); // Prints \"10\"\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1046,"params":[{"name":"x","description":"<p>x component of the vector</p>\n","type":"Number"},{"name":"y","description":"<p>y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>z component of the vector</p>\n","type":"Number","optional":true}],"return":{"description":"the dot product","type":"Number"}},{"line":1076,"params":[{"name":"value","description":"<p>value component of the vector or a <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"return":{"description":"","type":"Number"}},{"line":2172,"params":[{"name":"v1","description":"<p>the first <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>the second <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"static":1,"return":{"description":"the dot product","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":1088,"description":"<p>Calculates and returns a vector composed of the cross product between\ntwo vectors. Both the static and non static methods return a new <a href=\"#/p5.Vector\">p5.Vector</a>.\nSee the examples for more context.</p>\n","itemtype":"method","name":"cross","return":{"description":"<a href=\"#/p5.Vector\">p5.Vector</a> composed of cross product","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 2, 3);\nlet v2 = createVector(1, 2, 3);\n\nlet v = v1.cross(v2); // v's components are [0, 0, 0]\nprint(v);\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(1, 0, 0);\nlet v2 = createVector(0, 1, 0);\n\nlet crossProduct = p5.Vector.cross(v1, v2);\n// crossProduct has components [0, 0, 1]\nprint(crossProduct);\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1088,"params":[{"name":"v","description":"<p><a href=\"#/p5.Vector\">p5.Vector</a> to be crossed</p>\n","type":"p5.Vector"}],"return":{"description":"<a href=\"#/p5.Vector\">p5.Vector</a> composed of cross product","type":"p5.Vector"}},{"line":2186,"params":[{"name":"v1","description":"<p>the first <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>the second <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"static":1,"return":{"description":"the cross product","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":1130,"description":"<p>Calculates the Euclidean distance between two points (considering a\npoint as a vector object).</p>\n","itemtype":"method","name":"dist","return":{"description":"the distance","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 0, 0);\nlet v2 = createVector(0, 1, 0);\n\nlet distance = v1.dist(v2); // distance is 1.4142...\nprint(distance);\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\n// Static method\nlet v1 = createVector(1, 0, 0);\nlet v2 = createVector(0, 1, 0);\n\nlet distance = p5.Vector.dist(v1, v2);\n// distance is 1.4142...\nprint(distance);\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n\n  let v1 = createVector(70, 50);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(mouseX, mouseY);\n  drawArrow(v0, v2, 'blue');\n\n  noStroke();\n  text('distance between vectors: ' + v2.dist(v1).toFixed(2), 5, 50, 95, 50);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1130,"params":[{"name":"v","description":"<p>the x, y, and z coordinates of a <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"return":{"description":"the distance","type":"Number"}},{"line":2201,"params":[{"name":"v1","description":"<p>the first <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"},{"name":"v2","description":"<p>the second <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"static":1,"return":{"description":"the distance","type":"Number"}}]},{"file":"src/math/p5.Vector.js","line":1201,"description":"<p>Normalize the vector to length 1 (make it a unit vector).</p>\n","itemtype":"method","name":"normalize","return":{"description":"normalized <a href=\"#/p5.Vector\">p5.Vector</a>","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(10, 20, 2);\n// v has components [10.0, 20.0, 2.0]\nv.normalize();\n// v's components are set to\n// [0.4454354, 0.8908708, 0.089087084]\n</code>\n</div>\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(mouseX - 50, mouseY - 50);\n\n  drawArrow(v0, v1, 'red');\n  v1.normalize();\n  drawArrow(v0, v1.mult(35), 'blue');\n\n  noFill();\n  ellipse(50, 50, 35 * 2);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1257,"description":"<p>Limit the magnitude of this vector to the value used for the <b>max</b>\nparameter.</p>\n","itemtype":"method","name":"limit","params":[{"name":"max","description":"<p>the maximum magnitude for the vector</p>\n","type":"Number"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(10, 20, 2);\n// v has components [10.0, 20.0, 2.0]\nv.limit(5);\n// v's components are set to\n// [2.2271771, 4.4543543, 0.4454354]\n</code>\n</div>\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(mouseX - 50, mouseY - 50);\n\n  drawArrow(v0, v1, 'red');\n  drawArrow(v0, v1.limit(35), 'blue');\n\n  noFill();\n  ellipse(50, 50, 35 * 2);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1315,"description":"<p>Set the magnitude of this vector to the value used for the <b>len</b>\nparameter.</p>\n","itemtype":"method","name":"setMag","params":[{"name":"len","description":"<p>the new length for this vector</p>\n","type":"Number"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(10, 20, 2);\n// v has components [10.0, 20.0, 2.0]\nv.setMag(10);\n// v's components are set to [6.0, 8.0, 0.0]\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(50, 50);\n\n  drawArrow(v0, v1, 'red');\n\n  let length = map(mouseX, 0, width, 0, 141, true);\n  v1.setMag(length);\n  drawArrow(v0, v1, 'blue');\n\n  noStroke();\n  text('magnitude set to: ' + length.toFixed(2), 10, 70, 90, 30);\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1371,"description":"<p>Calculate the angle of rotation for this vector(only 2D vectors).\np5.Vectors created using <a src=\"#/p5/createVector\">createVector()</a>\nwill take the current <a = src=\"#/p5/angleMode\">angleMode</a> into consideration, and give the angle\nin radians or degree accordingly.</p>\n","itemtype":"method","name":"heading","return":{"description":"the angle of rotation","type":"Number"},"example":["\n<div class = \"norender\">\n<code>\nfunction setup() {\n  let v1 = createVector(30, 50);\n  print(v1.heading()); // 1.0303768265243125\n\n  v1 = createVector(40, 50);\n  print(v1.heading()); // 0.8960553845713439\n\n  v1 = createVector(30, 70);\n  print(v1.heading()); // 1.1659045405098132\n}\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(mouseX - 50, mouseY - 50);\n\n  drawArrow(v0, v1, 'black');\n\n  let myHeading = v1.heading();\n  noStroke();\n  text(\n    'vector heading: ' +\n      myHeading.toFixed(2) +\n      ' radians or ' +\n      degrees(myHeading).toFixed(2) +\n      ' degrees',\n    10,\n    50,\n    90,\n    50\n  );\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1443,"description":"<p>Rotate the vector by an angle (only 2D vectors), magnitude remains the\nsame</p>\n","itemtype":"method","name":"rotate","params":[{"name":"angle","description":"<p>the angle of rotation</p>\n","type":"Number"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(10.0, 20.0);\n// v has components [10.0, 20.0, 0.0]\nv.rotate(HALF_PI);\n// v's components are set to [-20.0, 9.999999, 0.0]\n</code>\n</div>\n\n<div>\n<code>\nlet angle = 0;\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = createVector(50, 0);\n\n  drawArrow(v0, v1.rotate(angle), 'black');\n  angle += 0.01;\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1499,"description":"<p>Calculates and returns the angle (in radians) between two vectors.</p>\n","itemtype":"method","name":"angleBetween","params":[{"name":"value","description":"<p>the x, y, and z components of a <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","type":"p5.Vector"}],"return":{"description":"the angle between (in radians)","type":"Number"},"example":["\n<div class=\"norender\">\n<code>\nlet v1 = createVector(1, 0, 0);\nlet v2 = createVector(0, 1, 0);\n\nlet angle = v1.angleBetween(v2);\n// angle is PI/2\nprint(angle);\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n  let v0 = createVector(50, 50);\n\n  let v1 = createVector(50, 0);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(mouseX - 50, mouseY - 50);\n  drawArrow(v0, v2, 'blue');\n\n  let angleBetween = v1.angleBetween(v2);\n  noStroke();\n  text(\n    'angle between: ' +\n      angleBetween.toFixed(2) +\n      ' radians or ' +\n      degrees(angleBetween).toFixed(2) +\n      ' degrees',\n    10,\n    50,\n    90,\n    50\n  );\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1576,"description":"<p>Linear interpolate the vector to another vector</p>\n","itemtype":"method","name":"lerp","chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(1, 1, 0);\n\nv.lerp(3, 3, 0, 0.5); // v now has components [2,2,0]\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v1 = createVector(0, 0, 0);\nlet v2 = createVector(100, 100, 0);\n\nlet v3 = p5.Vector.lerp(v1, v2, 0.5);\n// v3 has components [50,50,0]\nprint(v3);\n</code>\n</div>\n\n<div>\n<code>\nlet step = 0.01;\nlet amount = 0;\n\nfunction draw() {\n  background(240);\n  let v0 = createVector(0, 0);\n\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'red');\n\n  let v2 = createVector(90, 90);\n  drawArrow(v0, v2, 'blue');\n\n  if (amount > 1 || amount < 0) {\n    step *= -1;\n  }\n  amount += step;\n  let v3 = p5.Vector.lerp(v1, v2, amount);\n\n  drawArrow(v0, v3, 'purple');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1576,"params":[{"name":"x","description":"<p>the x component</p>\n","type":"Number"},{"name":"y","description":"<p>the y component</p>\n","type":"Number"},{"name":"z","description":"<p>the z component</p>\n","type":"Number"},{"name":"amt","description":"<p>the amount of interpolation; some value between 0.0\n                        (old vector) and 1.0 (new vector). 0.9 is very near\n                        the new vector. 0.5 is halfway in between.</p>\n","type":"Number"}],"chainable":1},{"line":1649,"params":[{"name":"v","description":"<p>the <a href=\"#/p5.Vector\">p5.Vector</a> to lerp to</p>\n","type":"p5.Vector"},{"name":"amt","description":"","type":"Number"}],"chainable":1},{"line":2216,"params":[{"name":"v1","description":"","type":"p5.Vector"},{"name":"v2","description":"","type":"p5.Vector"},{"name":"amt","description":"","type":"Number"},{"name":"target","description":"<p>the vector to receive the result (Optional)</p>\n","type":"p5.Vector","optional":true}],"static":1,"return":{"description":"the lerped value","type":"p5.Vector"}}]},{"file":"src/math/p5.Vector.js","line":1665,"description":"<p>Reflect the incoming vector about a normal to a line in 2D, or about a normal to a plane in 3D\nThis method acts on the vector directly</p>\n","itemtype":"method","name":"reflect","params":[{"name":"surfaceNormal","description":"<p>the <a href=\"#/p5.Vector\">p5.Vector</a> to reflect about, will be normalized by this method</p>\n","type":"p5.Vector"}],"chainable":1,"example":["\n<div class=\"norender\">\n<code>\nlet v = createVector(4, 6); // incoming vector, this example vector is heading to the right and downward\nlet n = createVector(0, -1); // surface normal to a plane (this example normal points directly upwards)\nv.reflect(n); // v is reflected about the surface normal n.  v's components are now set to [4, -6]\n</code>\n</div>\n\n<div>\n<code>\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(0, 0);\n  let v1 = createVector(mouseX, mouseY);\n  drawArrow(v0, v1, 'red');\n\n  let n = createVector(0, -30);\n  drawArrow(v1, n, 'blue');\n\n  let r = v1.copy();\n  r.reflect(n);\n  drawArrow(v1, r, 'purple');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1720,"description":"<p>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 <b>p5.Vector.<a href=\"#/p5.Vector/copy\">copy()</a></b> method to copy into your own\narray.</p>\n","itemtype":"method","name":"array","return":{"description":"an Array with the 3 values","type":"Number[]"},"example":["\n<div class = \"norender\">\n<code>\nfunction setup() {\n  let v = createVector(20, 30);\n  print(v.array()); // Prints : Array [20, 30, 0]\n}\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v = createVector(10.0, 20.0, 30.0);\nlet f = v.array();\nprint(f[0]); // Prints \"10.0\"\nprint(f[1]); // Prints \"20.0\"\nprint(f[2]); // Prints \"30.0\"\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1752,"description":"<p>Equality check against a <a href=\"#/p5.Vector\">p5.Vector</a></p>\n","itemtype":"method","name":"equals","return":{"description":"whether the vectors are equals","type":"Boolean"},"example":["\n<div class = \"norender\">\n<code>\nlet v1 = createVector(5, 10, 20);\nlet v2 = createVector(5, 10, 20);\nlet v3 = createVector(13, 10, 19);\n\nprint(v1.equals(v2.x, v2.y, v2.z)); // true\nprint(v1.equals(v3.x, v3.y, v3.z)); // false\n</code>\n</div>\n\n<div class=\"norender\">\n<code>\nlet v1 = createVector(10.0, 20.0, 30.0);\nlet v2 = createVector(10.0, 20.0, 30.0);\nlet v3 = createVector(0.0, 0.0, 0.0);\nprint(v1.equals(v2)); // true\nprint(v1.equals(v3)); // false\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector","overloads":[{"line":1752,"params":[{"name":"x","description":"<p>the x component of the vector</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>the y component of the vector</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>the z component of the vector</p>\n","type":"Number","optional":true}],"return":{"description":"whether the vectors are equals","type":"Boolean"}},{"line":1782,"params":[{"name":"value","description":"<p>the vector to compare</p>\n","type":"p5.Vector|Array"}],"return":{"description":"","type":"Boolean"}}]},{"file":"src/math/p5.Vector.js","line":1807,"description":"<p>Make a new 2D vector from an angle</p>\n","itemtype":"method","name":"fromAngle","static":1,"params":[{"name":"angle","description":"<p>the desired angle, in radians (unaffected by <a href=\"#/p5/angleMode\">angleMode</a>)</p>\n","type":"Number"},{"name":"length","description":"<p>the length of the new vector (defaults to 1)</p>\n","type":"Number","optional":true}],"return":{"description":"the new <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div>\n<code>\nfunction draw() {\n  background(200);\n\n  // Create a variable, proportional to the mouseX,\n  // varying from 0-360, to represent an angle in degrees.\n  let myDegrees = map(mouseX, 0, width, 0, 360);\n\n  // Display that variable in an onscreen text.\n  // (Note the nfc() function to truncate additional decimal places,\n  // and the \"\\xB0\" character for the degree symbol.)\n  let readout = 'angle = ' + nfc(myDegrees, 1) + '\\xB0';\n  noStroke();\n  fill(0);\n  text(readout, 5, 15);\n\n  // Create a p5.Vector using the fromAngle function,\n  // and extract its x and y components.\n  let v = p5.Vector.fromAngle(radians(myDegrees), 30);\n  let vx = v.x;\n  let vy = v.y;\n\n  push();\n  translate(width / 2, height / 2);\n  noFill();\n  stroke(150);\n  line(0, 0, 30, 0);\n  stroke(0);\n  line(0, 0, vx, vy);\n  pop();\n}\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1858,"description":"<p>Make a new 3D vector from a pair of ISO spherical angles</p>\n","itemtype":"method","name":"fromAngles","static":1,"params":[{"name":"theta","description":"<p>the polar angle, in radians (zero is up)</p>\n","type":"Number"},{"name":"phi","description":"<p>the azimuthal angle, in radians\n                              (zero is out of the screen)</p>\n","type":"Number"},{"name":"length","description":"<p>the length of the new vector (defaults to 1)</p>\n","type":"Number","optional":true}],"return":{"description":"the new <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div modernizr='webgl'>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  fill(255);\n  noStroke();\n}\nfunction draw() {\n  background(255);\n\n  let t = millis() / 1000;\n\n  // add three point lights\n  pointLight(color('#f00'), p5.Vector.fromAngles(t * 1.0, t * 1.3, 100));\n  pointLight(color('#0f0'), p5.Vector.fromAngles(t * 1.1, t * 1.2, 100));\n  pointLight(color('#00f'), p5.Vector.fromAngles(t * 1.2, t * 1.1, 100));\n\n  sphere(35);\n}\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1907,"description":"<p>Make a new 2D unit vector from a random angle</p>\n","itemtype":"method","name":"random2D","static":1,"return":{"description":"the new <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v = p5.Vector.random2D();\n// May make v's attributes something like:\n// [0.61554617, -0.51195765, 0.0] or\n// [-0.4695841, -0.14366731, 0.0] or\n// [0.6091097, -0.22805278, 0.0]\nprint(v);\n</code>\n</div>\n\n<div>\n<code>\nfunction setup() {\n  frameRate(1);\n}\n\nfunction draw() {\n  background(240);\n\n  let v0 = createVector(50, 50);\n  let v1 = p5.Vector.random2D();\n  drawArrow(v0, v1.mult(50), 'black');\n}\n\n// draw an arrow for a vector at a given base position\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</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":1960,"description":"<p>Make a new random 3D unit vector.</p>\n","itemtype":"method","name":"random3D","static":1,"return":{"description":"the new <a href=\"#/p5.Vector\">p5.Vector</a> object","type":"p5.Vector"},"example":["\n<div class=\"norender\">\n<code>\nlet v = p5.Vector.random3D();\n// May make v's attributes something like:\n// [0.61554617, -0.51195765, 0.599168] or\n// [-0.4695841, -0.14366731, -0.8711202] or\n// [0.6091097, -0.22805278, -0.7595902]\nprint(v);\n</code>\n</div>"],"class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2064,"description":"<p>Multiplies a vector by a scalar and returns a new vector.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2116,"description":"<p>Divides a vector by a scalar and returns a new vector.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2169,"description":"<p>Calculates the dot product of two vectors.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2183,"description":"<p>Calculates the cross product of two vectors.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2197,"description":"<p>Calculates the Euclidean distance between two points (considering a\npoint as a vector object).</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/p5.Vector.js","line":2212,"description":"<p>Linear interpolate a vector to another vector and return the result as a\nnew vector.</p>\n","class":"p5.Vector","module":"Math","submodule":"Vector"},{"file":"src/math/random.js","line":37,"description":"<p>Sets the seed value for <a href=\"#/p5/random\">random()</a>.</p>\n<p>By default, <a href=\"#/p5/random\">random()</a> produces different results each time the program\nis run. Set the seed parameter to a constant to return the same\npseudo-random numbers each time the software is run.</p>\n","itemtype":"method","name":"randomSeed","params":[{"name":"seed","description":"<p>the seed value</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nrandomSeed(99);\nfor (let i = 0; i < 100; i++) {\n  let r = random(0, 255);\n  stroke(r);\n  line(i, 0, i, 100);\n}\n</code>\n</div>"],"alt":"many vertical lines drawn in white, black or grey.","class":"p5","module":"Math","submodule":"Random"},{"file":"src/math/random.js","line":66,"description":"<p>Return a random floating-point number.</p>\n<p>Takes either 0, 1 or 2 arguments.</p>\n<p>If no argument is given, returns a random number from 0\nup to (but not including) 1.</p>\n<p>If one argument is given and it is a number, returns a random number from 0\nup to (but not including) the number.</p>\n<p>If one argument is given and it is an array, returns a random element from\nthat array.</p>\n<p>If two arguments are given, returns a random number from the\nfirst argument up to (but not including) the second argument.</p>\n","itemtype":"method","name":"random","return":{"description":"the random number","type":"Number"},"example":["\n<div>\n<code>\nfor (let i = 0; i < 100; i++) {\n  let r = random(50);\n  stroke(r * 5);\n  line(50, i, 50 + r, i);\n}\n</code>\n</div>\n<div>\n<code>\nfor (let i = 0; i < 100; i++) {\n  let r = random(-50, 50);\n  line(50, i, 50 + r, i);\n}\n</code>\n</div>\n<div>\n<code>\n// Get a random element from an array using the random(Array) syntax\nlet words = ['apple', 'bear', 'cat', 'dog'];\nlet word = random(words); // select random word\ntext(word, 10, 50); // draw the word\n</code>\n</div>"],"alt":"100 horizontal lines from center canvas to right. size+fill change each time\n100 horizontal lines from center of canvas. height & side change each render\nword displayed at random. Either apple, bear, cat, or dog","class":"p5","module":"Math","submodule":"Random","overloads":[{"line":66,"params":[{"name":"min","description":"<p>the lower bound (inclusive)</p>\n","type":"Number","optional":true},{"name":"max","description":"<p>the upper bound (exclusive)</p>\n","type":"Number","optional":true}],"return":{"description":"the random number","type":"Number"}},{"line":119,"params":[{"name":"choices","description":"<p>the array to choose from</p>\n","type":"Array"}],"return":{"description":"the random element from the array","type":"*"}}]},{"file":"src/math/random.js","line":153,"description":"<p>Returns a random number fitting a Gaussian, or\n normal, distribution. There is theoretically no minimum or maximum\n value that <a href=\"#/p5/randomGaussian\">randomGaussian()</a> might return. Rather, there is\n just a very low probability that values far from the mean will be\n returned; and a higher probability that numbers near the mean will\n be returned.\nTakes either 0, 1 or 2 arguments.<br>\n If no args, returns a mean of 0 and standard deviation of 1.<br>\n If one arg, that arg is the mean (standard deviation is 1).<br>\n If two args, first is mean, second is standard deviation.</p>\n","itemtype":"method","name":"randomGaussian","params":[{"name":"mean","description":"<p>the mean</p>\n","type":"Number"},{"name":"sd","description":"<p>the standard deviation</p>\n","type":"Number"}],"return":{"description":"the random number","type":"Number"},"example":["\n <div>\n <code>\n for (let y = 0; y < 100; y++) {\n   let x = randomGaussian(50, 15);\n   line(50, y, x, y);\n }\n </code>\n </div>\n <div>\n <code>\n let distribution = new Array(360);\nfunction setup() {\n   createCanvas(100, 100);\n   for (let i = 0; i < distribution.length; i++) {\n     distribution[i] = floor(randomGaussian(0, 15));\n   }\n }\nfunction draw() {\n   background(204);\n  translate(width / 2, width / 2);\n  for (let i = 0; i < distribution.length; i++) {\n     rotate(TWO_PI / distribution.length);\n     stroke(0);\n     let dist = abs(distribution[i]);\n     line(0, 0, dist, 0);\n   }\n }\n </code>\n </div>"],"alt":"100 horizontal lines from center of canvas. height & side change each render\n black lines radiate from center of canvas. size determined each render","class":"p5","module":"Math","submodule":"Random"},{"file":"src/math/trigonometry.js","line":18,"description":"<p>The inverse of <a href=\"#/p5/cos\">cos()</a>, returns the arc cosine of a value.\nThis function expects the values in the range of -1 to 1 and values are returned in\nthe range 0 to PI (3.1415927) if the angleMode is RADIANS or 0 to 180 if the\nangle mode is DEGREES.</p>\n","itemtype":"method","name":"acos","params":[{"name":"value","description":"<p>the value whose arc cosine is to be returned</p>\n","type":"Number"}],"return":{"description":"the arc cosine of the given value","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet a = PI;\nlet c = cos(a);\nlet ac = acos(c);\n// Prints: \"3.1415927 : -1.0 : 3.1415927\"\nprint(a + ' : ' + c + ' : ' + ac);\n</code>\n</div>\n\n<div class= “norender\">\n<code>\nlet a = PI + PI / 4.0;\nlet c = cos(a);\nlet ac = acos(c);\n// Prints: \"3.926991 : -0.70710665 : 2.3561943\"\nprint(a + ' : ' + c + ' : ' + ac);\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":53,"description":"<p>The inverse of <a href=\"#/p5/sin\">sin()</a>, returns the arc sine of a value.\nThis function expects the values in the range of -1 to 1 and values are returned\nin the range -PI/2 to PI/2 if the angleMode is RADIANS or -90 to 90 if the angle\nmode is DEGREES.</p>\n","itemtype":"method","name":"asin","params":[{"name":"value","description":"<p>the value whose arc sine is to be returned</p>\n","type":"Number"}],"return":{"description":"the arc sine of the given value","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet a = PI / 3.0;\nlet s = sin(a);\nlet as = asin(s);\n// Prints: \"1.0471975 : 0.86602540 : 1.0471975\"\nprint(a + ' : ' + s + ' : ' + as);\n</code>\n</div>\n\n<div class= “norender\">\n<code>\nlet a = PI + PI / 3.0;\nlet s = sin(a);\nlet as = asin(s);\n// Prints: \"4.1887902 : -0.86602540 : -1.0471975\"\nprint(a + ' : ' + s + ' : ' + as);\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":88,"description":"<p>The inverse of <a href=\"#/p5/tan\">tan()</a>, returns the arc tangent of a value.\nThis function expects the values in the range of -Infinity to Infinity (exclusive) and\nvalues are returned in the range -PI/2 to PI/2 if the angleMode is RADIANS or\n-90 to 90 if the angle mode is DEGREES.</p>\n","itemtype":"method","name":"atan","params":[{"name":"value","description":"<p>the value whose arc tangent is to be returned</p>\n","type":"Number"}],"return":{"description":"the arc tangent of the given value","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet a = PI / 3.0;\nlet t = tan(a);\nlet at = atan(t);\n// Prints: \"1.0471975 : 1.7320508 : 1.0471975\"\nprint(a + ' : ' + t + ' : ' + at);\n</code>\n</div>\n\n<div class= “norender\">\n<code>\nlet a = PI + PI / 3.0;\nlet t = tan(a);\nlet at = atan(t);\n// Prints: \"4.1887902 : 1.7320508 : 1.0471975\"\nprint(a + ' : ' + t + ' : ' + at);\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":123,"description":"<p>Calculates the angle (in radians) from a specified point to the coordinate\norigin as measured from the positive x-axis. Values are returned as a\nfloat in the range from PI to -PI if the angleMode is RADIANS or 180 to\n-180 if the angleMode is DEGREES. The atan2<a href=\"#/p5/\">()</a> function is\nmost often used for orienting geometry to the position of the cursor.</p>\n<p>Note: The y-coordinate of the point is the first parameter, and the\nx-coordinate is the second parameter, due the the structure of calculating\nthe tangent.</p>\n","itemtype":"method","name":"atan2","params":[{"name":"y","description":"<p>y-coordinate of the point</p>\n","type":"Number"},{"name":"x","description":"<p>x-coordinate of the point</p>\n","type":"Number"}],"return":{"description":"the arc tangent of the given point","type":"Number"},"example":["\n<div>\n<code>\nfunction draw() {\n  background(204);\n  translate(width / 2, height / 2);\n  let a = atan2(mouseY - height / 2, mouseX - width / 2);\n  rotate(a);\n  rect(-30, -5, 60, 10);\n}\n</code>\n</div>"],"alt":"60 by 10 rect at center of canvas rotates with mouse movements","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":159,"description":"<p>Calculates the cosine of an angle. This function takes into account the\ncurrent <a href=\"#/p5/angleMode\">angleMode</a>. Values are returned in the range -1 to 1.</p>\n","itemtype":"method","name":"cos","params":[{"name":"angle","description":"<p>the angle</p>\n","type":"Number"}],"return":{"description":"the cosine of the angle","type":"Number"},"example":["\n<div>\n<code>\nlet a = 0.0;\nlet inc = TWO_PI / 25.0;\nfor (let i = 0; i < 25; i++) {\n  line(i * 4, 50, i * 4, 50 + cos(a) * 40.0);\n  a = a + inc;\n}\n</code>\n</div>"],"alt":"vertical black lines form wave patterns, extend-down on left and right side","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":186,"description":"<p>Calculates the sine of an angle. This function takes into account the\ncurrent <a href=\"#/p5/angleMode\">angleMode</a>. Values are returned in the range -1 to 1.</p>\n","itemtype":"method","name":"sin","params":[{"name":"angle","description":"<p>the angle</p>\n","type":"Number"}],"return":{"description":"the sine of the angle","type":"Number"},"example":["\n<div>\n<code>\nlet a = 0.0;\nlet inc = TWO_PI / 25.0;\nfor (let i = 0; i < 25; i++) {\n  line(i * 4, 50, i * 4, 50 + sin(a) * 40.0);\n  a = a + inc;\n}\n</code>\n</div>"],"alt":"vertical black lines extend down and up from center to form wave pattern","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":213,"description":"<p>Calculates the tangent of an angle. This function takes into account\nthe current <a href=\"#/p5/angleMode\">angleMode</a>. Values are returned in the range of all real numbers.</p>\n","itemtype":"method","name":"tan","params":[{"name":"angle","description":"<p>the angle</p>\n","type":"Number"}],"return":{"description":"the tangent of the angle","type":"Number"},"example":["\n<div>\n<code>\nlet a = 0.0;\nlet inc = TWO_PI / 50.0;\nfor (let i = 0; i < 100; i = i + 2) {\n  line(i, 50, i, 50 + tan(a) * 2.0);\n  a = a + inc;\n}\n</code>"],"alt":"vertical black lines end down and up from center to form spike pattern","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":239,"description":"<p>Converts a radian measurement to its corresponding value in degrees.\nRadians and degrees are two ways of measuring the same thing. There are\n360 degrees in a circle and 2*PI radians in a circle. For example,\n90° = PI/2 = 1.5707964. This function does not take into account the\ncurrent <a href=\"#/p5/angleMode\">angleMode</a>.</p>\n","itemtype":"method","name":"degrees","params":[{"name":"radians","description":"<p>the radians value to convert to degrees</p>\n","type":"Number"}],"return":{"description":"the converted angle","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet rad = PI / 4;\nlet deg = degrees(rad);\nprint(rad + ' radians is ' + deg + ' degrees');\n// Prints: 0.7853981633974483 radians is 45 degrees\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":262,"description":"<p>Converts a degree measurement to its corresponding value in radians.\nRadians and degrees are two ways of measuring the same thing. There are\n360 degrees in a circle and 2*PI radians in a circle. For example,\n90° = PI/2 = 1.5707964. This function does not take into account the\ncurrent <a href=\"#/p5/angleMode\">angleMode</a>.</p>\n","itemtype":"method","name":"radians","params":[{"name":"degrees","description":"<p>the degree value to convert to radians</p>\n","type":"Number"}],"return":{"description":"the converted angle","type":"Number"},"example":["\n<div class= “norender\">\n<code>\nlet deg = 45.0;\nlet rad = radians(deg);\nprint(deg + ' degrees is ' + rad + ' radians');\n// Prints: 45 degrees is 0.7853981633974483 radians\n</code>\n</div>"],"class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/math/trigonometry.js","line":285,"description":"<p>Sets the current mode of p5 to given mode. Default mode is RADIANS.</p>\n","itemtype":"method","name":"angleMode","params":[{"name":"mode","description":"<p>either RADIANS or DEGREES</p>\n","type":"Constant"}],"example":["\n<div>\n<code>\nfunction draw() {\n  background(204);\n  angleMode(DEGREES); // Change the mode to DEGREES\n  let a = atan2(mouseY - height / 2, mouseX - width / 2);\n  translate(width / 2, height / 2);\n  push();\n  rotate(a);\n  rect(-20, -5, 40, 10); // Larger rectangle is rotating in degrees\n  pop();\n  angleMode(RADIANS); // Change the mode to RADIANS\n  rotate(a); // variable a stays the same\n  rect(-40, -5, 20, 10); // Smaller rectangle is rotating in radians\n}\n</code>\n</div>"],"alt":"40 by 10 rect in center rotates with mouse moves. 20 by 10 rect moves faster.","class":"p5","module":"Math","submodule":"Trigonometry"},{"file":"src/typography/attributes.js","line":11,"description":"<p>Sets the current alignment for drawing text. Accepts two\narguments: horizAlign (LEFT, CENTER, or RIGHT) and\nvertAlign (TOP, BOTTOM, CENTER, or BASELINE).</p>\n<p>The horizAlign parameter is in reference to the x value\nof the <a href=\"#/p5/text\">text()</a> function, while the vertAlign parameter\nis in reference to the y value.</p>\n<p>So if you write textAlign(LEFT), you are aligning the left\nedge of your text to the x value you give in <a href=\"#/p5/text\">text()</a>.\nIf you write textAlign(RIGHT, TOP), you are aligning the right edge\nof your text to the x value and the top of edge of the text\nto the y value.</p>\n","itemtype":"method","name":"textAlign","chainable":1,"example":["\n<div>\n<code>\ntextSize(16);\ntextAlign(RIGHT);\ntext('ABCD', 50, 30);\ntextAlign(CENTER);\ntext('EFGH', 50, 50);\ntextAlign(LEFT);\ntext('IJKL', 50, 70);\n</code>\n</div>\n\n<div>\n<code>\ntextSize(16);\nstrokeWeight(0.5);\n\nline(0, 12, width, 12);\ntextAlign(CENTER, TOP);\ntext('TOP', 0, 12, width);\n\nline(0, 37, width, 37);\ntextAlign(CENTER, CENTER);\ntext('CENTER', 0, 37, width);\n\nline(0, 62, width, 62);\ntextAlign(CENTER, BASELINE);\ntext('BASELINE', 0, 62, width);\n\nline(0, 87, width, 87);\ntextAlign(CENTER, BOTTOM);\ntext('BOTTOM', 0, 87, width);\n</code>\n</div>"],"alt":"Letters ABCD displayed at top left, EFGH at center and IJKL at bottom right.\nThe names of the four vertical alignments (TOP, CENTER, BASELINE & BOTTOM) rendered each showing that alignment's placement relative to a horizontal line.","class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":11,"params":[{"name":"horizAlign","description":"<p>horizontal alignment, either LEFT,\n                           CENTER, or RIGHT</p>\n","type":"Constant"},{"name":"vertAlign","description":"<p>vertical alignment, either TOP,\n                           BOTTOM, CENTER, or BASELINE</p>\n","type":"Constant","optional":true}],"chainable":1},{"line":72,"params":[],"return":{"description":"","type":"Object"}}]},{"file":"src/typography/attributes.js","line":81,"description":"<p>Sets/gets the spacing, in pixels, between lines of text. This setting will be\nused in all subsequent calls to the <a href=\"#/p5/text\">text()</a> function.</p>\n","itemtype":"method","name":"textLeading","chainable":1,"example":["\n<div>\n<code>\nlet lines = 'L1\\nL2\\nL3'; // \"\\n\" is a \"new line\" character\ntextSize(12);\n\ntextLeading(10);\ntext(lines, 10, 25);\n\ntextLeading(20);\ntext(lines, 40, 25);\n\ntextLeading(30);\ntext(lines, 70, 25);\n</code>\n</div>"],"alt":"A set of L1 L2 & L3 displayed vertically 3 times. spacing increases for each set","class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":81,"params":[{"name":"leading","description":"<p>the size in pixels for spacing between lines</p>\n","type":"Number"}],"chainable":1},{"line":109,"params":[],"return":{"description":"","type":"Number"}}]},{"file":"src/typography/attributes.js","line":118,"description":"<p>Sets/gets the current font size. This size will be used in all subsequent\ncalls to the <a href=\"#/p5/text\">text()</a> function. Font size is measured in pixels.</p>\n","itemtype":"method","name":"textSize","chainable":1,"example":["\n<div>\n<code>\ntextSize(12);\ntext('Font Size 12', 10, 30);\ntextSize(14);\ntext('Font Size 14', 10, 60);\ntextSize(16);\ntext('Font Size 16', 10, 90);\n</code>\n</div>"],"alt":"'Font Size 12' displayed small, 'Font Size 14' medium & 'Font Size 16' large","class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":118,"params":[{"name":"theSize","description":"<p>the size of the letters in units of pixels</p>\n","type":"Number"}],"chainable":1},{"line":141,"params":[],"return":{"description":"","type":"Number"}}]},{"file":"src/typography/attributes.js","line":150,"description":"<p>Sets/gets the style of the text for system fonts to NORMAL, ITALIC, BOLD or BOLDITALIC.\nNote: this may be is overridden by CSS styling. For non-system fonts\n(opentype, truetype, etc.) please load styled fonts instead.</p>\n","itemtype":"method","name":"textStyle","chainable":1,"example":["\n<div>\n<code>\nstrokeWeight(0);\ntextSize(12);\ntextStyle(NORMAL);\ntext('Font Style Normal', 10, 15);\ntextStyle(ITALIC);\ntext('Font Style Italic', 10, 40);\ntextStyle(BOLD);\ntext('Font Style Bold', 10, 65);\ntextStyle(BOLDITALIC);\ntext('Font Style Bold Italic', 10, 90);\n</code>\n</div>"],"alt":"Words Font Style Normal displayed normally, Italic in italic, bold in bold and bold italic in bold italics.","class":"p5","module":"Typography","submodule":"Attributes","overloads":[{"line":150,"params":[{"name":"theStyle","description":"<p>styling for text, either NORMAL,\n                           ITALIC, BOLD or BOLDITALIC</p>\n","type":"Constant"}],"chainable":1},{"line":178,"params":[],"return":{"description":"","type":"String"}}]},{"file":"src/typography/attributes.js","line":187,"description":"<p>Calculates and returns the width of any character or text string.</p>\n","itemtype":"method","name":"textWidth","params":[{"name":"theText","description":"<p>the String of characters to measure</p>\n","type":"String"}],"return":{"description":"the calculated width","type":"Number"},"example":["\n<div>\n<code>\ntextSize(28);\n\nlet aChar = 'P';\nlet cWidth = textWidth(aChar);\ntext(aChar, 0, 40);\nline(cWidth, 0, cWidth, 50);\n\nlet aString = 'p5.js';\nlet sWidth = textWidth(aString);\ntext(aString, 0, 85);\nline(sWidth, 50, sWidth, 100);\n</code>\n</div>"],"alt":"Letter P and p5.js are displayed with vertical lines at end.","class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/attributes.js","line":222,"description":"<p>Returns the ascent of the current font at its current size. The ascent\nrepresents the distance, in pixels, of the tallest character above\nthe baseline.</p>\n","itemtype":"method","name":"textAscent","return":{"description":"","type":"Number"},"example":["\n<div>\n<code>\nlet base = height * 0.75;\nlet scalar = 0.8; // Different for each font\n\ntextSize(32); // Set initial text size\nlet asc = textAscent() * scalar; // Calc ascent\nline(0, base - asc, width, base - asc);\ntext('dp', 0, base); // Draw text on baseline\n\ntextSize(64); // Increase text size\nasc = textAscent() * scalar; // Recalc ascent\nline(40, base - asc, width, base - asc);\ntext('dp', 40, base); // Draw text on baseline\n</code>\n</div>"],"class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/attributes.js","line":251,"description":"<p>Returns the descent of the current font at its current size. The descent\nrepresents the distance, in pixels, of the character with the longest\ndescender below the baseline.</p>\n","itemtype":"method","name":"textDescent","return":{"description":"","type":"Number"},"example":["\n<div>\n<code>\nlet base = height * 0.75;\nlet scalar = 0.8; // Different for each font\n\ntextSize(32); // Set initial text size\nlet desc = textDescent() * scalar; // Calc ascent\nline(0, base + desc, width, base + desc);\ntext('dp', 0, base); // Draw text on baseline\n\ntextSize(64); // Increase text size\ndesc = textDescent() * scalar; // Recalc ascent\nline(40, base + desc, width, base + desc);\ntext('dp', 40, base); // Draw text on baseline\n</code>\n</div>"],"class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/attributes.js","line":280,"description":"<p>Helper function to measure ascent and descent.</p>\n","class":"p5","module":"Typography","submodule":"Attributes"},{"file":"src/typography/loading_displaying.js","line":16,"description":"<p>Loads an opentype font file (.otf, .ttf) from a file or a URL,\nand returns a PFont Object. This method is asynchronous,\nmeaning it may not finish before the next line in your sketch\nis executed.</p>\n<p>The path to the font should be relative to the HTML file\nthat links in your sketch. Loading fonts from a URL or other\nremote location may be blocked due to your browser's built-in\nsecurity.</p>\n","itemtype":"method","name":"loadFont","params":[{"name":"path","description":"<p>name of the file or url to load</p>\n","type":"String"},{"name":"callback","description":"<p>function to be executed after\n                                   <a href=\"#/p5/loadFont\">loadFont()</a> completes</p>\n","type":"Function","optional":true},{"name":"onError","description":"<p>function to be executed if\n                                   an error occurs</p>\n","type":"Function","optional":true}],"return":{"description":"<a href=\"#/p5.Font\">p5.Font</a> object","type":"p5.Font"},"example":["\n\nCalling loadFont() inside <a href=\"#/p5/preload\">preload()</a> guarantees\nthat the load operation will have completed before <a href=\"#/p5/setup\">setup()</a>\nand <a href=\"#/p5/draw\">draw()</a> are called.\n\n<div><code>\nlet myFont;\nfunction preload() {\n  myFont = loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n  fill('#ED225D');\n  textFont(myFont);\n  textSize(36);\n  text('p5*js', 10, 50);\n}\n</code></div>\n\nOutside of <a href=\"#/p5/preload\">preload()</a>, you may supply a\ncallback function to handle the object:\n\n<div><code>\nfunction setup() {\n  loadFont('assets/inconsolata.otf', drawText);\n}\n\nfunction drawText(font) {\n  fill('#ED225D');\n  textFont(font, 36);\n  text('p5*js', 10, 50);\n}\n</code></div>\n\nYou can also use the font filename string (without the file extension) to\nstyle other HTML elements.\n\n<div><code>\nfunction preload() {\n  loadFont('assets/inconsolata.otf');\n}\n\nfunction setup() {\n  let myDiv = createDiv('hello there');\n  myDiv.style('font-family', 'Inconsolata');\n}\n</code></div>"],"alt":"p5*js in p5's theme dark pink\np5*js in p5's theme dark pink","class":"p5","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/loading_displaying.js","line":140,"description":"<p>Draws text to the screen. Displays the information specified in the first\nparameter on the screen in the position specified by the additional\nparameters. A default font will be used unless a font is set with the\n<a href=\"#/p5/textFont\">textFont()</a> function and a default size will be\nused unless a font is set with <a href=\"#/p5/textSize\">textSize()</a>. Change\nthe color of the text with the <a href=\"#/p5/fill\">fill()</a> function. Change\nthe outline of the text with the <a href=\"#/p5/stroke\">stroke()</a> and\n<a href=\"#/p5/strokeWeight\">strokeWeight()</a> functions.</p>\n<p>The text displays in relation to the <a href=\"#/p5/textAlign\">textAlign()</a>\nfunction, which gives the option to draw to the left, right, and center of the\ncoordinates.</p>\n<p>The x2 and y2 parameters define a rectangular area to display within and\nmay only be used with string data. When these parameters are specified,\nthey are interpreted based on the current <a href=\"#/p5/rectMode\">rectMode()</a>\nsetting. Text that does not fit completely within the rectangle specified will\nnot be drawn to the screen. If x2 and y2 are not specified, the baseline\nalignment is the default, which means that the text will be drawn upwards\nfrom x and y.</p>\n<p><b>WEBGL</b>: Only opentype/truetype fonts are supported. You must load a font\nusing the <a href=\"#/p5/loadFont\">loadFont()</a> method (see the example above).\n<a href=\"#/p5/stroke\">stroke()</a> currently has no effect in webgl mode.</p>\n","itemtype":"method","name":"text","params":[{"name":"str","description":"<p>the alphanumeric\n                                            symbols to be displayed</p>\n","type":"String|Object|Array|Number|Boolean"},{"name":"x","description":"<p>x-coordinate of text</p>\n","type":"Number"},{"name":"y","description":"<p>y-coordinate of text</p>\n","type":"Number"},{"name":"x2","description":"<p>by default, the width of the text box,\n                    see <a href=\"#/p5/rectMode\">rectMode()</a> for more info</p>\n","type":"Number","optional":true},{"name":"y2","description":"<p>by default, the height of the text box,\n                    see <a href=\"#/p5/rectMode\">rectMode()</a> for more info</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\ntextSize(32);\ntext('word', 10, 30);\nfill(0, 102, 153);\ntext('word', 10, 60);\nfill(0, 102, 153, 51);\ntext('word', 10, 90);\n</code>\n</div>\n<div>\n<code>\nlet s = 'The quick brown fox jumped over the lazy dog.';\nfill(50);\ntext(s, 10, 10, 70, 80); // Text wraps within text box\n</code>\n</div>\n\n<div modernizr='webgl'>\n<code>\nlet inconsolata;\nfunction preload() {\n  inconsolata = loadFont('assets/inconsolata.otf');\n}\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  textFont(inconsolata);\n  textSize(width / 3);\n  textAlign(CENTER, CENTER);\n}\nfunction draw() {\n  background(0);\n  let time = millis();\n  rotateX(time / 1000);\n  rotateZ(time / 1234);\n  text('p5.js', 0, 0);\n}\n</code>\n</div>"],"alt":"'word' displayed 3 times going from black, blue to translucent blue\nThe text 'The quick brown fox jumped over the lazy dog' displayed.\nThe text 'p5.js' spinning in 3d","class":"p5","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/loading_displaying.js","line":229,"description":"<p>Sets the current font that will be drawn with the <a href=\"#/p5/text\">text()</a> function.</p>\n<p><b>WEBGL</b>: Only fonts loaded via <a href=\"#/p5/loadFont\">loadFont()</a> are supported.</p>\n","itemtype":"method","name":"textFont","return":{"description":"the current font","type":"Object"},"example":["\n<div>\n<code>\nfill(0);\ntextSize(12);\ntextFont('Georgia');\ntext('Georgia', 12, 30);\ntextFont('Helvetica');\ntext('Helvetica', 12, 60);\n</code>\n</div>\n<div>\n<code>\nlet fontRegular, fontItalic, fontBold;\nfunction preload() {\n  fontRegular = loadFont('assets/Regular.otf');\n  fontItalic = loadFont('assets/Italic.ttf');\n  fontBold = loadFont('assets/Bold.ttf');\n}\nfunction setup() {\n  background(210);\n  fill(0)\n   .strokeWeight(0)\n   .textSize(10);\n  textFont(fontRegular);\n  text('Font Style Normal', 10, 30);\n  textFont(fontItalic);\n  text('Font Style Italic', 10, 50);\n  textFont(fontBold);\n  text('Font Style Bold', 10, 70);\n}\n</code>\n</div>"],"alt":"word 'Georgia' displayed in font Georgia and 'Helvetica' in font Helvetica\nwords Font Style Normal displayed normally, Italic in italic and bold in bold","class":"p5","module":"Typography","submodule":"Loading & Displaying","overloads":[{"line":229,"params":[],"return":{"description":"the current font","type":"Object"}},{"line":275,"params":[{"name":"font","description":"<p>a font loaded via <a href=\"#/p5/loadFont\">loadFont()</a>,\nor a String representing a <a href=\"https://mzl.la/2dOw8WD\">web safe font</a>\n(a font that is generally available across all systems)</p>\n","type":"Object|String"},{"name":"size","description":"<p>the font size to use</p>\n","type":"Number","optional":true}],"chainable":1}]},{"file":"src/typography/p5.Font.js","line":24,"description":"<p>Underlying opentype font implementation</p>\n","itemtype":"property","name":"font","class":"p5.Font","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/p5.Font.js","line":31,"description":"<p>Returns a tight bounding box for the given text string using this\nfont</p>\n","itemtype":"method","name":"textBounds","params":[{"name":"line","description":"<p>a line of text</p>\n","type":"String"},{"name":"x","description":"<p>x-position</p>\n","type":"Number"},{"name":"y","description":"<p>y-position</p>\n","type":"Number"},{"name":"fontSize","description":"<p>font size to use (optional) Default is 12.</p>\n","type":"Number","optional":true},{"name":"options","description":"<p>opentype options (optional)\n                           opentype fonts contains alignment and baseline options.\n                           Default is 'LEFT' and 'alphabetic'</p>\n","type":"Object","optional":true}],"return":{"description":"a rectangle object with properties: x, y, w, h","type":"Object"},"example":["\n<div>\n<code>\nlet font;\nlet textString = 'Lorem ipsum dolor sit amet.';\nfunction preload() {\n  font = loadFont('./assets/Regular.otf');\n}\nfunction setup() {\n  background(210);\n\n  let bbox = font.textBounds(textString, 10, 30, 12);\n  fill(255);\n  stroke(0);\n  rect(bbox.x, bbox.y, bbox.w, bbox.h);\n  fill(0);\n  noStroke();\n\n  textFont(font);\n  textSize(12);\n  text(textString, 10, 30);\n}\n</code>\n</div>"],"alt":"words Lorem ipsum dol go off canvas and contained by white bounding box","class":"p5.Font","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/typography/p5.Font.js","line":175,"description":"<p>Computes an array of points following the path for specified text</p>\n","itemtype":"method","name":"textToPoints","params":[{"name":"txt","description":"<p>a line of text</p>\n","type":"String"},{"name":"x","description":"<p>x-position</p>\n","type":"Number"},{"name":"y","description":"<p>y-position</p>\n","type":"Number"},{"name":"fontSize","description":"<p>font size to use (optional)</p>\n","type":"Number"},{"name":"options","description":"<p>an (optional) object that can contain:</p>\n<p><br>sampleFactor - the ratio of path-length to number of samples\n(default=.1); higher values yield more points and are therefore\nmore precise</p>\n<p><br>simplifyThreshold - if set to a non-zero value, collinear points will be\nbe removed from the polygon; the value represents the threshold angle to use\nwhen determining whether two edges are collinear</p>\n","type":"Object","optional":true}],"return":{"description":"an array of points, each with x, y, alpha (the path angle)","type":"Array"},"example":["\n<div>\n<code>\nlet font;\nfunction preload() {\n  font = loadFont('assets/inconsolata.otf');\n}\n\nlet points;\nlet bounds;\nfunction setup() {\n  createCanvas(100, 100);\n  stroke(0);\n  fill(255, 104, 204);\n\n  points = font.textToPoints('p5', 0, 0, 10, {\n    sampleFactor: 5,\n    simplifyThreshold: 0\n  });\n  bounds = font.textBounds(' p5 ', 0, 0, 10);\n}\n\nfunction draw() {\n  background(255);\n  beginShape();\n  translate(-bounds.x * width / bounds.w, -bounds.y * height / bounds.h);\n  for (let i = 0; i < points.length; i++) {\n    let p = points[i];\n    vertex(\n      p.x * width / bounds.w +\n        sin(20 * p.y / bounds.h + millis() / 1000) * width / 30,\n      p.y * height / bounds.h\n    );\n  }\n  endShape(CLOSE);\n}\n</code>\n</div>"],"class":"p5.Font","module":"Typography","submodule":"Loading & Displaying"},{"file":"src/utilities/array_functions.js","line":10,"description":"<p>Adds a value to the end of an array. Extends the length of\nthe array by one. Maps to Array.push().</p>\n","itemtype":"method","name":"append","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push\">array.push(value)</a> instead.","params":[{"name":"array","description":"<p>Array to append</p>\n","type":"Array"},{"name":"value","description":"<p>to be added to the Array</p>\n","type":"Any"}],"return":{"description":"the array that was appended to","type":"Array"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":35,"description":"<p>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 <a href=\"#/p5/concat\">concat()</a>.</p>\n<p>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).</p>\n<p>Using this function is far more efficient for copying array data than\niterating through a for() loop and copying each element individually.</p>\n","itemtype":"method","name":"arrayCopy","deprecated":true,"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions","overloads":[{"line":35,"params":[{"name":"src","description":"<p>the source Array</p>\n","type":"Array"},{"name":"srcPosition","description":"<p>starting position in the source Array</p>\n","type":"Integer"},{"name":"dst","description":"<p>the destination Array</p>\n","type":"Array"},{"name":"dstPosition","description":"<p>starting position in the destination Array</p>\n","type":"Integer"},{"name":"length","description":"<p>number of Array elements to be copied</p>\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":"<p>Concatenates two arrays, maps to Array.concat(). Does not modify the\ninput arrays.</p>\n","itemtype":"method","name":"concat","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat\">arr1.concat(arr2)</a> instead.","params":[{"name":"a","description":"<p>first Array to concatenate</p>\n","type":"Array"},{"name":"b","description":"<p>second Array to concatenate</p>\n","type":"Array"}],"return":{"description":"concatenated array","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":141,"description":"<p>Reverses the order of an array, maps to Array.reverse()</p>\n","itemtype":"method","name":"reverse","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse\">array.reverse()</a> instead.","params":[{"name":"list","description":"<p>Array to reverse</p>\n","type":"Array"}],"return":{"description":"the reversed list","type":"Array"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":161,"description":"<p>Decreases an array by one element and returns the shortened array,\nmaps to Array.pop().</p>\n","itemtype":"method","name":"shorten","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop\">array.pop()</a> instead.","params":[{"name":"list","description":"<p>Array to shorten</p>\n","type":"Array"}],"return":{"description":"shortened Array","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":185,"description":"<p>Randomizes the order of the elements of an array. Implements\n<a href='http://Bost.Ocks.org/mike/shuffle/' target=_blank>\nFisher-Yates Shuffle Algorithm</a>.</p>\n","itemtype":"method","name":"shuffle","params":[{"name":"array","description":"<p>Array to shuffle</p>\n","type":"Array"},{"name":"bool","description":"<p>modify passed array</p>\n","type":"Boolean","optional":true}],"return":{"description":"shuffled Array","type":"Array"},"example":["\n<div><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":227,"description":"<p>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.</p>\n","itemtype":"method","name":"sort","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort\">array.sort()</a> instead.","params":[{"name":"list","description":"<p>Array to sort</p>\n","type":"Array"},{"name":"count","description":"<p>number of elements to sort, starting from 0</p>\n","type":"Integer","optional":true}],"return":{"description":"the sorted list","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":273,"description":"<p>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.)</p>\n","itemtype":"method","name":"splice","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice\">array.splice()</a> instead.","params":[{"name":"list","description":"<p>Array to splice into</p>\n","type":"Array"},{"name":"value","description":"<p>value to be spliced in</p>\n","type":"Any"},{"name":"position","description":"<p>in the array from which to insert data</p>\n","type":"Integer"}],"return":{"description":"the list","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/array_functions.js","line":308,"description":"<p>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.</p>\n","itemtype":"method","name":"subset","deprecated":true,"deprecationMessage":"Use <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice\">array.slice()</a> instead.","params":[{"name":"list","description":"<p>Array to extract from</p>\n","type":"Array"},{"name":"start","description":"<p>position to begin</p>\n","type":"Integer"},{"name":"count","description":"<p>number of values to extract</p>\n","type":"Integer","optional":true}],"return":{"description":"Array of extracted elements","type":"Array"},"example":["\n<div class = 'norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Array Functions"},{"file":"src/utilities/conversion.js","line":10,"description":"<p>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.</p>\n<p>When an array of values is passed in, then an array of floats of the same\nlength is returned.</p>\n","itemtype":"method","name":"float","params":[{"name":"str","description":"<p>float string to parse</p>\n","type":"String"}],"return":{"description":"floating point representation of string","type":"Number"},"example":["\n<div><code>\nlet str = '20';\nlet diameter = float(str);\nellipse(width / 2, height / 2, diameter, diameter);\n</code></div>\n<div class='norender'><code>\nprint(float('10.31')); // 10.31\nprint(float('Infinity')); // Infinity\nprint(float('-Infinity')); // -Infinity\n</code></div>"],"alt":"20 by 20 white ellipse in the center of the canvas","class":"p5","module":"Data","submodule":"Conversion"},{"file":"src/utilities/conversion.js","line":44,"description":"<p>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.</p>\n","itemtype":"method","name":"int","return":{"description":"integer representation of value","type":"Number"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":44,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Boolean|Number"},{"name":"radix","description":"<p>the radix to convert to (default: 10)</p>\n","type":"Integer","optional":true}],"return":{"description":"integer representation of value","type":"Number"}},{"line":66,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"}],"return":{"description":"integer representation of values","type":"Number[]"}}]},{"file":"src/utilities/conversion.js","line":87,"description":"<p>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.</p>\n","itemtype":"method","name":"str","params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Boolean|Number|Array"}],"return":{"description":"string representation of value","type":"String"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion"},{"file":"src/utilities/conversion.js","line":113,"description":"<p>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.</p>\n","itemtype":"method","name":"boolean","params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Boolean|Number|Array"}],"return":{"description":"boolean representation of value","type":"Boolean"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion"},{"file":"src/utilities/conversion.js","line":145,"description":"<p>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.</p>\n","itemtype":"method","name":"byte","return":{"description":"byte representation of value","type":"Number"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":145,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Boolean|Number"}],"return":{"description":"byte representation of value","type":"Number"}},{"line":167,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"}],"return":{"description":"array of byte representation of values","type":"Number[]"}}]},{"file":"src/utilities/conversion.js","line":181,"description":"<p>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.</p>\n","itemtype":"method","name":"char","return":{"description":"string representation of value","type":"String"},"example":["\n<div class='norender'><code>\nprint(char(65)); // \"A\"\nprint(char('65')); // \"A\"\nprint(char([65, 66, 67])); // [ \"A\", \"B\", \"C\" ]\nprint(join(char([65, 66, 67]), '')); // \"ABC\"\n</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":181,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String|Number"}],"return":{"description":"string representation of value","type":"String"}},{"line":200,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"}],"return":{"description":"array of string representation of values","type":"String[]"}}]},{"file":"src/utilities/conversion.js","line":215,"description":"<p>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.</p>\n","itemtype":"method","name":"unchar","return":{"description":"integer representation of value","type":"Number"},"example":["\n<div class='norender'><code>\nprint(unchar('A')); // 65\nprint(unchar(['A', 'B', 'C'])); // [ 65, 66, 67 ]\nprint(unchar(split('ABC', ''))); // [ 65, 66, 67 ]\n</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":215,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String"}],"return":{"description":"integer representation of value","type":"Number"}},{"line":231,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"}],"return":{"description":"integer representation of values","type":"Number[]"}}]},{"file":"src/utilities/conversion.js","line":244,"description":"<p>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.</p>\n","itemtype":"method","name":"hex","return":{"description":"hexadecimal string representation of value","type":"String"},"example":["\n<div class='norender'><code>\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</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":244,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"Number"},{"name":"digits","description":"","type":"Number","optional":true}],"return":{"description":"hexadecimal string representation of value","type":"String"}},{"line":264,"params":[{"name":"ns","description":"<p>array of values to parse</p>\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":294,"description":"<p>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.</p>\n","itemtype":"method","name":"unhex","return":{"description":"integer representation of hexadecimal value","type":"Number"},"example":["\n<div class='norender'><code>\nprint(unhex('A')); // 10\nprint(unhex('FF')); // 255\nprint(unhex(['FF', 'AA', '00'])); // [ 255, 170, 0 ]\n</code></div>"],"class":"p5","module":"Data","submodule":"Conversion","overloads":[{"line":294,"params":[{"name":"n","description":"<p>value to parse</p>\n","type":"String"}],"return":{"description":"integer representation of hexadecimal value","type":"Number"}},{"line":310,"params":[{"name":"ns","description":"<p>values to parse</p>\n","type":"Array"}],"return":{"description":"integer representations of hexadecimal value","type":"Number[]"}}]},{"file":"src/utilities/string_functions.js","line":15,"description":"<p>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 <a href=\"#/p5/nf\">nf()</a> or\nnfs().</p>\n","itemtype":"method","name":"join","params":[{"name":"list","description":"<p>array of Strings to be joined</p>\n","type":"Array"},{"name":"separator","description":"<p>String to be placed between each item</p>\n","type":"String"}],"return":{"description":"joined String","type":"String"},"example":["\n<div>\n<code>\nlet array = ['Hello', 'world!'];\nlet separator = ' ';\nlet message = join(array, separator);\ntext(message, 5, 50);\n</code>\n</div>"],"alt":"\"hello world!\" displayed middle left of canvas.","class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":43,"description":"<p>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.</p>\n<p>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.</p>\n<p>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).</p>\n","itemtype":"method","name":"match","params":[{"name":"str","description":"<p>the String to be searched</p>\n","type":"String"},{"name":"regexp","description":"<p>the regexp to be used for matching</p>\n","type":"String"}],"return":{"description":"Array of Strings found","type":"String[]"},"example":["\n<div>\n<code>\nlet string = 'Hello p5js*!';\nlet regexp = 'p5js\\\\*';\nlet m = match(string, regexp);\ntext(m, 5, 50);\n</code>\n</div>"],"alt":"\"p5js*\" displayed middle left of canvas.","class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":83,"description":"<p>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.</p>\n<p>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.</p>\n<p>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).</p>\n","itemtype":"method","name":"matchAll","params":[{"name":"str","description":"<p>the String to be searched</p>\n","type":"String"},{"name":"regexp","description":"<p>the regexp to be used for matching</p>\n","type":"String"}],"return":{"description":"2d Array of Strings found","type":"String[]"},"example":["\n<div class=\"norender\">\n<code>\nlet string = 'Hello p5js*! Hello world!';\nlet regexp = 'Hello';\nmatchAll(string, regexp);\n</code>\n</div>"],"class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":130,"description":"<p>Utility function for formatting numbers into strings. There are two\nversions: one for formatting floats, and one for formatting ints.\nThe values for the digits, left, and right parameters should always\nbe positive integers.\n(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.\nFor 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.</p>\n","itemtype":"method","name":"nf","return":{"description":"formatted String","type":"String"},"example":["\n<div>\n<code>\nlet myFont;\nfunction preload() {\n  myFont = loadFont('assets/fonts/inconsolata.ttf');\n}\nfunction setup() {\n  background(200);\n  let num1 = 321;\n  let num2 = -1321;\n\n  noStroke();\n  fill(0);\n  textFont(myFont);\n  textSize(22);\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</code>\n</div>"],"alt":"\"0321.00\" middle top, -1321.00\" middle bottom canvas","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":130,"params":[{"name":"num","description":"<p>the Number to format</p>\n","type":"Number|String"},{"name":"left","description":"<p>number of digits to the left of the\n                               decimal point</p>\n","type":"Integer|String","optional":true},{"name":"right","description":"<p>number of digits to the right of the\n                               decimal point</p>\n","type":"Integer|String","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":178,"params":[{"name":"nums","description":"<p>the Numbers to format</p>\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":239,"description":"<p>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.</p>\n","itemtype":"method","name":"nfc","return":{"description":"formatted String","type":"String"},"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"\"11,253,106.115\" top middle and \"1.00,1.00,2.00\" displayed bottom mid","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":239,"params":[{"name":"num","description":"<p>the Number to format</p>\n","type":"Number|String"},{"name":"right","description":"<p>number of digits to the right of the\n                                 decimal point</p>\n","type":"Integer|String","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":277,"params":[{"name":"nums","description":"<p>the Numbers to format</p>\n","type":"Array"},{"name":"right","description":"","type":"Integer|String","optional":true}],"return":{"description":"formatted Strings","type":"String[]"}}]},{"file":"src/utilities/string_functions.js","line":313,"description":"<p>Utility function for formatting numbers into strings. Similar to <a href=\"#/p5/nf\">nf()</a> 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.</p>\n","itemtype":"method","name":"nfp","return":{"description":"formatted String","type":"String"},"example":["\n<div>\n<code>\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</code>\n</div>"],"alt":"\"+11253106.11\" top middle and \"-11253106.11\" displayed bottom middle","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":313,"params":[{"name":"num","description":"<p>the Number to format</p>\n","type":"Number"},{"name":"left","description":"<p>number of digits to the left of the decimal\n                               point</p>\n","type":"Integer","optional":true},{"name":"right","description":"<p>number of digits to the right of the\n                               decimal point</p>\n","type":"Integer","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":354,"params":[{"name":"nums","description":"<p>the Numbers to format</p>\n","type":"Number[]"},{"name":"left","description":"","type":"Integer","optional":true},{"name":"right","description":"","type":"Integer","optional":true}],"return":{"description":"formatted Strings","type":"String[]"}}]},{"file":"src/utilities/string_functions.js","line":375,"description":"<p>Utility function for formatting numbers into strings. Similar to <a href=\"#/p5/nf\">nf()</a> but\nputs an additional \"_\" (space) in front of positive numbers just in case to align it with negative\nnumbers which includes \"-\" (minus) sign.\nThe 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.\nThe 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.\nFor 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.</p>\n","itemtype":"method","name":"nfs","return":{"description":"formatted String","type":"String"},"example":["\n<div>\n<code>\nlet myFont;\nfunction preload() {\n  myFont = loadFont('assets/fonts/inconsolata.ttf');\n}\nfunction setup() {\n  background(200);\n  let num1 = 321;\n  let num2 = -1321;\n\n  noStroke();\n  fill(0);\n  textFont(myFont);\n  textSize(22);\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</code>\n</div>"],"alt":"\"0321.00\" top middle and \"-1321.00\" displayed bottom middle","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":375,"params":[{"name":"num","description":"<p>the Number to format</p>\n","type":"Number"},{"name":"left","description":"<p>number of digits to the left of the decimal\n                               point</p>\n","type":"Integer","optional":true},{"name":"right","description":"<p>number of digits to the right of the\n                               decimal point</p>\n","type":"Integer","optional":true}],"return":{"description":"formatted String","type":"String"}},{"line":432,"params":[{"name":"nums","description":"<p>the Numbers to format</p>\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":453,"description":"<p>The <a href=\"#/p5/split\">split()</a> 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.</p>\n<p>The <a href=\"#/p5/splitTokens\">splitTokens()</a> function works in a similar fashion, except that it\nsplits using a range of characters instead of a specific character or\nsequence.</p>\n","itemtype":"method","name":"split","params":[{"name":"value","description":"<p>the String to be split</p>\n","type":"String"},{"name":"delim","description":"<p>the String used to separate the data</p>\n","type":"String"}],"return":{"description":"Array of Strings","type":"String[]"},"example":["\n<div>\n<code>\nlet names = 'Pat,Xio,Alex';\nlet splitString = split(names, ',');\ntext(splitString[0], 5, 30);\ntext(splitString[1], 5, 50);\ntext(splitString[2], 5, 70);\n</code>\n</div>"],"alt":"\"pat\" top left, \"Xio\" mid left and \"Alex\" displayed bottom left","class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":486,"description":"<p>The <a href=\"#/p5/splitTokens\">splitTokens()</a> 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.</p>\n<p>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.</p>\n","itemtype":"method","name":"splitTokens","params":[{"name":"value","description":"<p>the String to be split</p>\n","type":"String"},{"name":"delim","description":"<p>list of individual Strings that will be used as\n                         separators</p>\n","type":"String","optional":true}],"return":{"description":"Array of Strings","type":"String[]"},"example":["\n<div class = \"norender\">\n<code>\nfunction setup() {\n  let myStr = 'Mango, Banana, Lime';\n  let myStrArr = splitTokens(myStr, ',');\n\n  print(myStrArr); // prints : [\"Mango\",\" Banana\",\" Lime\"]\n}\n</code>\n</div>"],"class":"p5","module":"Data","submodule":"String Functions"},{"file":"src/utilities/string_functions.js","line":539,"description":"<p>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.</p>\n","itemtype":"method","name":"trim","return":{"description":"a trimmed String","type":"String"},"example":["\n<div>\n<code>\nlet string = trim('  No new lines\\n   ');\ntext(string + ' here', 2, 50);\n</code>\n</div>"],"alt":"\"No new lines here\" displayed center canvas","class":"p5","module":"Data","submodule":"String Functions","overloads":[{"line":539,"params":[{"name":"str","description":"<p>a String to be trimmed</p>\n","type":"String"}],"return":{"description":"a trimmed String","type":"String"}},{"line":559,"params":[{"name":"strs","description":"<p>an Array of Strings to be trimmed</p>\n","type":"Array"}],"return":{"description":"an Array of trimmed Strings","type":"String[]"}}]},{"file":"src/utilities/time_date.js","line":10,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/day\">day()</a> function\nreturns the current day as a value from 1 - 31.</p>\n","itemtype":"method","name":"day","return":{"description":"the current day","type":"Integer"},"example":["\n<div>\n<code>\nlet d = day();\ntext('Current day: \\n' + d, 5, 50);\n</code>\n</div>"],"alt":"Current day is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":31,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/hour\">hour()</a> function\nreturns the current hour as a value from 0 - 23.</p>\n","itemtype":"method","name":"hour","return":{"description":"the current hour","type":"Integer"},"example":["\n<div>\n<code>\nlet h = hour();\ntext('Current hour:\\n' + h, 5, 50);\n</code>\n</div>"],"alt":"Current hour is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":52,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/minute\">minute()</a> function\nreturns the current minute as a value from 0 - 59.</p>\n","itemtype":"method","name":"minute","return":{"description":"the current minute","type":"Integer"},"example":["\n<div>\n<code>\nlet m = minute();\ntext('Current minute: \\n' + m, 5, 50);\n</code>\n</div>"],"alt":"Current minute is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":73,"description":"<p>Returns the number of milliseconds (thousandths of a second) since\nstarting the sketch (when <code>setup()</code> is called). This information is often\nused for timing events and animation sequences.</p>\n","itemtype":"method","name":"millis","return":{"description":"the number of milliseconds since starting the sketch","type":"Number"},"example":["\n<div>\n<code>\nlet millisecond = millis();\ntext('Milliseconds \\nrunning: \\n' + millisecond, 5, 40);\n</code>\n</div>"],"alt":"number of milliseconds since sketch has started displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":100,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/month\">month()</a> function\nreturns the current month as a value from 1 - 12.</p>\n","itemtype":"method","name":"month","return":{"description":"the current month","type":"Integer"},"example":["\n<div>\n<code>\nlet m = month();\ntext('Current month: \\n' + m, 5, 50);\n</code>\n</div>"],"alt":"Current month is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":122,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/second\">second()</a> function\nreturns the current second as a value from 0 - 59.</p>\n","itemtype":"method","name":"second","return":{"description":"the current second","type":"Integer"},"example":["\n<div>\n<code>\nlet s = second();\ntext('Current second: \\n' + s, 5, 50);\n</code>\n</div>"],"alt":"Current second is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/utilities/time_date.js","line":143,"description":"<p>p5.js communicates with the clock on your computer. The <a href=\"#/p5/year\">year()</a> function\nreturns the current year as an integer (2014, 2015, 2016, etc).</p>\n","itemtype":"method","name":"year","return":{"description":"the current year","type":"Integer"},"example":["\n<div>\n<code>\nlet y = year();\ntext('Current year: \\n' + y, 5, 50);\n</code>\n</div>"],"alt":"Current year is displayed","class":"p5","module":"IO","submodule":"Time & Date"},{"file":"src/webgl/3d_primitives.js","line":13,"description":"<p>Draw a plane with given a width and height</p>\n","itemtype":"method","name":"plane","params":[{"name":"width","description":"<p>width of the plane</p>\n","type":"Number","optional":true},{"name":"height","description":"<p>height of the plane</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>Optional number of triangle\n                            subdivisions in x-dimension</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>Optional number of triangle\n                            subdivisions in y-dimension</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a plane\n// with width 50 and height 50\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  plane(50, 50);\n}\n</code>\n</div>"],"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":97,"description":"<p>Draw a box with given width, height and depth</p>\n","itemtype":"method","name":"box","params":[{"name":"width","description":"<p>width of the box</p>\n","type":"Number","optional":true},{"name":"Height","description":"<p>height of the box</p>\n","type":"Number","optional":true},{"name":"depth","description":"<p>depth of the box</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>Optional number of triangle\n                           subdivisions in x-dimension</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>Optional number of triangle\n                           subdivisions in y-dimension</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a spinning box\n// with width, height and depth of 50\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  box(50);\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":215,"description":"<p>Draw a sphere with given radius.</p>\n<p>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.</p>\n","itemtype":"method","name":"sphere","params":[{"name":"radius","description":"<p>radius of circle</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>optional number of subdivisions in x-dimension</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>optional number of subdivisions in y-dimension</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a sphere with radius 40\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(205, 102, 94);\n  sphere(40);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  sphere(40, detailX.value(), 16);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  sphere(40, 16, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":419,"description":"<p>Draw a cylinder with given radius and height</p>\n<p>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.</p>\n","itemtype":"method","name":"cylinder","params":[{"name":"radius","description":"<p>radius of the surface</p>\n","type":"Number","optional":true},{"name":"height","description":"<p>height of the cylinder</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>number of subdivisions in x-dimension;\n                              default is 24</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of subdivisions in y-dimension;\n                              default is 1</p>\n","type":"Integer","optional":true},{"name":"bottomCap","description":"<p>whether to draw the bottom of the cylinder</p>\n","type":"Boolean","optional":true},{"name":"topCap","description":"<p>whether to draw the top of the cylinder</p>\n","type":"Boolean","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a spinning cylinder\n// with radius 20 and height 50\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  cylinder(20, 75, detailX.value(), 1);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  cylinder(20, 75, 16, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":554,"description":"<p>Draw a cone with given radius and height</p>\n<p>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.</p>\n","itemtype":"method","name":"cone","params":[{"name":"radius","description":"<p>radius of the bottom surface</p>\n","type":"Number","optional":true},{"name":"height","description":"<p>height of the cone</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>number of segments,\n                            the more segments the smoother geometry\n                            default is 24</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of segments,\n                            the more segments the smoother geometry\n                            default is 1</p>\n","type":"Integer","optional":true},{"name":"cap","description":"<p>whether to draw the base of the cone</p>\n","type":"Boolean","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a spinning cone\n// with radius 40 and height 70\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateZ(frameCount * 0.01);\n  cone(40, 70);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 102, 94);\n  rotateY(millis() / 1000);\n  cone(30, 65, detailX.value(), 16);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 102, 94);\n  rotateY(millis() / 1000);\n  cone(30, 65, 16, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":669,"description":"<p>Draw an ellipsoid with given radius</p>\n<p>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.</p>\n","itemtype":"method","name":"ellipsoid","params":[{"name":"radiusx","description":"<p>x-radius of ellipsoid</p>\n","type":"Number","optional":true},{"name":"radiusy","description":"<p>y-radius of ellipsoid</p>\n","type":"Number","optional":true},{"name":"radiusz","description":"<p>z-radius of ellipsoid</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>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.</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>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.</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw an ellipsoid\n// with radius 30, 40 and 40.\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(205, 105, 94);\n  ellipsoid(30, 40, 40);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 94);\n  rotateY(millis() / 1000);\n  ellipsoid(30, 40, 40, detailX.value(), 8);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 105, 9);\n  rotateY(millis() / 1000);\n  ellipsoid(30, 40, 40, 12, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/3d_primitives.js","line":804,"description":"<p>Draw a torus with given radius and tube radius</p>\n<p>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.</p>\n","itemtype":"method","name":"torus","params":[{"name":"radius","description":"<p>radius of the whole ring</p>\n","type":"Number","optional":true},{"name":"tubeRadius","description":"<p>radius of the tube</p>\n","type":"Number","optional":true},{"name":"detailX","description":"<p>number of segments in x-dimension,\n                               the more segments the smoother geometry\n                               default is 24</p>\n","type":"Integer","optional":true},{"name":"detailY","description":"<p>number of segments in y-dimension,\n                               the more segments the smoother geometry\n                               default is 16</p>\n","type":"Integer","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n// draw a spinning torus\n// with ring radius 30 and tube radius 15\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 102, 94);\n  rotateY(millis() / 1000);\n  torus(30, 15, detailX.value(), 12);\n}\n</code>\n</div>","\n<div>\n<code>\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}\n\nfunction draw() {\n  background(205, 102, 94);\n  rotateY(millis() / 1000);\n  torus(30, 15, 16, detailY.value());\n}\n</code>\n</div>"],"class":"p5","module":"Shape","submodule":"3D Primitives"},{"file":"src/webgl/interaction.js","line":11,"description":"<p>Allows movement around a 3D sketch using a mouse or trackpad.  Left-clicking\nand dragging will rotate the camera position about the center of the sketch,\nright-clicking and dragging will pan the camera position without rotation,\nand using the mouse wheel (scrolling) will move the camera closer or further\nfrom the center of the sketch. This function can be called with parameters\ndictating sensitivity to mouse movement along the X and Y axes.  Calling\nthis function without parameters is equivalent to calling orbitControl(1,1).\nTo reverse direction of movement in either axis, enter a negative number\nfor sensitivity.</p>\n","itemtype":"method","name":"orbitControl","params":[{"name":"sensitivityX","description":"<p>sensitivity to mouse movement along X axis</p>\n","type":"Number","optional":true},{"name":"sensitivityY","description":"<p>sensitivity to mouse movement along Y axis</p>\n","type":"Number","optional":true},{"name":"sensitivityZ","description":"<p>sensitivity to scroll movement along Z axis</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n}\nfunction draw() {\n  background(200);\n  orbitControl();\n  rotateY(0.5);\n  box(30, 50);\n}\n</code>\n</div>"],"alt":"Camera orbits around a box when mouse is hold-clicked & then moved.","class":"p5","module":"Lights, Camera","submodule":"Interaction"},{"file":"src/webgl/interaction.js","line":145,"description":"<p>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.</p>\n<p>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.</p>\n","itemtype":"method","name":"debugMode","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode();\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</code>\n</div>","\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode(GRID);\n}\n\nfunction draw() {\n  background(200);\n  orbitControl();\n  box(15, 30);\n}\n</code>\n</div>","\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode(AXES);\n}\n\nfunction draw() {\n  background(200);\n  orbitControl();\n  box(15, 30);\n}\n</code>\n</div>","\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode(GRID, 100, 10, 0, 0, 0);\n}\n\nfunction draw() {\n  background(200);\n  orbitControl();\n  box(15, 30);\n}\n</code>\n</div>","\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode(100, 10, 0, 0, 0, 20, 0, -40, 0);\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</code>\n</div>"],"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":"Lights, Camera","submodule":"Interaction","overloads":[{"line":145,"params":[]},{"line":278,"params":[{"name":"mode","description":"<p>either GRID or AXES</p>\n","type":"Constant"}]},{"line":283,"params":[{"name":"mode","description":"","type":"Constant"},{"name":"gridSize","description":"<p>size of one side of the grid</p>\n","type":"Number","optional":true},{"name":"gridDivisions","description":"<p>number of divisions in the grid</p>\n","type":"Number","optional":true},{"name":"xOff","description":"<p>X axis offset from origin (0,0,0)</p>\n","type":"Number","optional":true},{"name":"yOff","description":"<p>Y axis offset from origin (0,0,0)</p>\n","type":"Number","optional":true},{"name":"zOff","description":"<p>Z axis offset from origin (0,0,0)</p>\n","type":"Number","optional":true}]},{"line":293,"params":[{"name":"mode","description":"","type":"Constant"},{"name":"axesSize","description":"<p>size of axes icon</p>\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":302,"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":353,"description":"<p>Turns off debugMode() in a 3D sketch.</p>\n","itemtype":"method","name":"noDebugMode","example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  camera(0, -30, 100, 0, 0, 0, 0, 1, 0);\n  normalMaterial();\n  debugMode();\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</code>\n</div>"],"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":"Lights, Camera","submodule":"Interaction"},{"file":"src/webgl/light.js","line":10,"description":"<p>Creates an ambient light with a color. Ambient light is light that comes from everywhere on the canvas.\nIt has no particular source.</p>\n","itemtype":"method","name":"ambientLight","chainable":1,"example":["\n<div>\n<code>\ncreateCanvas(100, 100, WEBGL);\nambientLight(0);\nambientMaterial(250);\nsphere(40);\n</code>\n</div>\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(51);\n  ambientLight(100); // white light\n  ambientMaterial(255, 102, 94); // magenta material\n  box(30);\n}\n</code>\n</div>"],"alt":"evenly distributed light across a sphere\nevenly distributed light across a rotating sphere","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":10,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"<p>the alpha value</p>\n","type":"Number","optional":true}],"chainable":1},{"line":50,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"chainable":1},{"line":56,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":63,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":70,"params":[{"name":"color","description":"<p>the ambient light color</p>\n","type":"p5.Color"}],"chainable":1}]},{"file":"src/webgl/light.js","line":91,"description":"<p>Set's the color of the specular highlight when using a specular material and\nspecular light.</p>\n<p>This method can be combined with specularMaterial() and shininess()\nfunctions to set specular highlights. The default color is white, ie\n(255, 255, 255), which is used if this method is not called before\nspecularMaterial(). If this method is called without specularMaterial(),\nThere will be no effect.</p>\n<p>Note: specularColor is equivalent to the processing function\n<a href=\"https://processing.org/reference/lightSpecular_.html\">lightSpecular</a>.</p>\n","itemtype":"method","name":"specularColor","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  noStroke();\n}\n\nfunction draw() {\n  background(0);\n  shininess(20);\n  ambientLight(50);\n  specularColor(255, 0, 0);\n  pointLight(255, 0, 0, 0, -50, 50);\n  specularColor(0, 255, 0);\n  pointLight(0, 255, 0, 0, 50, 50);\n  specularMaterial(255);\n  sphere(40);\n}\n</code>\n</div>"],"alt":"different specular light sources from top and bottom of canvas","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":91,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"}],"chainable":1},{"line":138,"params":[{"name":"value","description":"<p>a color string</p>\n","type":"String"}],"chainable":1},{"line":144,"params":[{"name":"gray","description":"<p>a gray value</p>\n","type":"Number"}],"chainable":1},{"line":150,"params":[{"name":"values","description":"<p>an array containing the red,green,blue &\n                                and alpha components of the color</p>\n","type":"Number[]"}],"chainable":1},{"line":157,"params":[{"name":"color","description":"<p>the ambient light color</p>\n","type":"p5.Color"}],"chainable":1}]},{"file":"src/webgl/light.js","line":176,"description":"<p>Creates a directional light with a color and a direction</p>\n<p>A maximum of 5 directionalLight can be active at one time</p>\n","itemtype":"method","name":"directionalLight","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"light source on canvas changeable with mouse position","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":176,"params":[{"name":"v1","description":"<p>red or hue value (depending on the current\ncolor mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number"},{"name":"position","description":"<p>the direction of the light</p>\n","type":"p5.Vector"}],"chainable":1},{"line":209,"params":[{"name":"color","description":"<p>color Array, CSS color string,\n                                            or <a href=\"#/p5.Color\">p5.Color</a> value</p>\n","type":"Number[]|String|p5.Color"},{"name":"x","description":"<p>x axis direction</p>\n","type":"Number"},{"name":"y","description":"<p>y axis direction</p>\n","type":"Number"},{"name":"z","description":"<p>z axis direction</p>\n","type":"Number"}],"chainable":1},{"line":219,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"name":"position","description":"","type":"p5.Vector"}],"chainable":1},{"line":226,"params":[{"name":"v1","description":"","type":"Number"},{"name":"v2","description":"","type":"Number"},{"name":"v3","description":"","type":"Number"},{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"","type":"Number"}],"chainable":1}]},{"file":"src/webgl/light.js","line":279,"description":"<p>Creates a point light with a color and a light position</p>\n<p>A maximum of 5 pointLight can be active at one time</p>\n","itemtype":"method","name":"pointLight","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"spot light on canvas changes position with mouse","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":279,"params":[{"name":"v1","description":"<p>red or hue value (depending on the current\ncolor mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number"},{"name":"x","description":"<p>x axis position</p>\n","type":"Number"},{"name":"y","description":"<p>y axis position</p>\n","type":"Number"},{"name":"z","description":"<p>z axis position</p>\n","type":"Number"}],"chainable":1},{"line":321,"params":[{"name":"v1","description":"","type":"Number"},{"name":"v2","description":"","type":"Number"},{"name":"v3","description":"","type":"Number"},{"name":"position","description":"<p>the position of the light</p>\n","type":"p5.Vector"}],"chainable":1},{"line":330,"params":[{"name":"color","description":"<p>color Array, CSS color string,\nor <a href=\"#/p5.Color\">p5.Color</a> value</p>\n","type":"Number[]|String|p5.Color"},{"name":"x","description":"","type":"Number"},{"name":"y","description":"","type":"Number"},{"name":"z","description":"","type":"Number"}],"chainable":1},{"line":340,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"name":"position","description":"","type":"p5.Vector"}],"chainable":1}]},{"file":"src/webgl/light.js","line":386,"description":"<p>Sets the default ambient and directional light. The defaults are <a href=\"#/p5/ambientLight\">ambientLight(128, 128, 128)</a> and <a href=\"#/p5/directionalLight\">directionalLight(128, 128, 128, 0, 0, -1)</a>. Lights need to be included in the <a href=\"#/p5/draw\">draw()</a> to remain persistent in a looping program. Placing them in the <a href=\"#/p5/setup\">setup()</a> of a looping program will cause them to only have an effect the first time through the loop.</p>\n","itemtype":"method","name":"lights","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(0);\n  lights();\n  rotateX(millis() / 1000);\n  rotateY(millis() / 1000);\n  rotateZ(millis() / 1000);\n  box();\n}\n</code>\n</div>"],"alt":"the light is partially ambient and partially directional","class":"p5","module":"Lights, Camera","submodule":"Lights"},{"file":"src/webgl/light.js","line":417,"description":"<p>Sets the falloff rates for point lights. It affects only the elements which are created after it in the code.\nThe default value is lightFalloff(1.0, 0.0, 0.0), and the parameters are used to calculate the falloff with the following equation:</p>\n<p>d = distance from light position to vertex position</p>\n<p>falloff = 1 / (CONSTANT + d * LINEAR + ( d * d ) * QUADRATIC)</p>\n","itemtype":"method","name":"lightFalloff","params":[{"name":"constant","description":"<p>constant value for determining falloff</p>\n","type":"Number"},{"name":"linear","description":"<p>linear value for determining falloff</p>\n","type":"Number"},{"name":"quadratic","description":"<p>quadratic value for determining falloff</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  noStroke();\n}\nfunction draw() {\n  background(0);\n  let locX = mouseX - width / 2;\n  let locY = mouseY - height / 2;\n  translate(-25, 0, 0);\n  lightFalloff(1, 0, 0);\n  pointLight(250, 250, 250, locX, locY, 50);\n  sphere(20);\n  translate(50, 0, 0);\n  lightFalloff(0.9, 0.01, 0);\n  pointLight(250, 250, 250, locX, locY, 50);\n  sphere(20);\n}\n</code>\n</div>"],"alt":"Two spheres with different falloff values show different intensity of light","class":"p5","module":"Lights, Camera","submodule":"Lights"},{"file":"src/webgl/light.js","line":502,"description":"<p>Creates a spotlight with a given color, position, direction of light,\nangle and concentration. Here, angle refers to the opening or aperture\nof the cone of the spotlight, and concentration is used to focus the\nlight towards the center. Both angle and concentration are optional, but if\nyou want to provide concentration, you will also have to specify the angle.</p>\n<p>A maximum of 5 spotLight can be active at one time</p>\n","itemtype":"method","name":"spotLight","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"Spot light on a sphere which changes position with mouse","class":"p5","module":"Lights, Camera","submodule":"Lights","overloads":[{"line":502,"params":[{"name":"v1","description":"<p>red or hue value (depending on the current\ncolor mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number"},{"name":"x","description":"<p>x axis position</p>\n","type":"Number"},{"name":"y","description":"<p>y axis position</p>\n","type":"Number"},{"name":"z","description":"<p>z axis position</p>\n","type":"Number"},{"name":"rx","description":"<p>x axis direction of light</p>\n","type":"Number"},{"name":"ry","description":"<p>y axis direction of light</p>\n","type":"Number"},{"name":"rz","description":"<p>z axis direction of light</p>\n","type":"Number"},{"name":"angle","description":"<p>optional parameter for angle. Defaults to PI/3</p>\n","type":"Number","optional":true},{"name":"conc","description":"<p>optional parameter for concentration. Defaults to 100</p>\n","type":"Number","optional":true}],"chainable":1},{"line":554,"params":[{"name":"color","description":"<p>color Array, CSS color string,\nor <a href=\"#/p5.Color\">p5.Color</a> value</p>\n","type":"Number[]|String|p5.Color"},{"name":"position","description":"<p>the position of the light</p>\n","type":"p5.Vector"},{"name":"direction","description":"<p>the direction of the light</p>\n","type":"p5.Vector"},{"name":"angle","description":"","type":"Number","optional":true},{"name":"conc","description":"","type":"Number","optional":true}]},{"line":563,"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":"conc","description":"","type":"Number","optional":true}]},{"line":573,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"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":"conc","description":"","type":"Number","optional":true}]},{"line":583,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"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":"conc","description":"","type":"Number","optional":true}]},{"line":593,"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":"conc","description":"","type":"Number","optional":true}]},{"line":605,"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":"conc","description":"","type":"Number","optional":true}]},{"line":617,"params":[{"name":"color","description":"","type":"Number[]|String|p5.Color"},{"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":"conc","description":"","type":"Number","optional":true}]}]},{"file":"src/webgl/light.js","line":842,"description":"<p>This function will remove all the lights from the sketch for the\nsubsequent materials rendered. It affects all the subsequent methods.\nCalls to lighting methods made after noLights() will re-enable lights\nin the sketch.</p>\n","itemtype":"method","name":"noLights","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(0);\n  noStroke();\n\n  ambientLight(150, 0, 0);\n  translate(-25, 0, 0);\n  ambientMaterial(250);\n  sphere(20);\n\n  noLights();\n  ambientLight(0, 150, 0);\n  translate(50, 0, 0);\n  ambientMaterial(250);\n  sphere(20);\n}\n</code>\n</div>"],"alt":"Two spheres showing different colors","class":"p5","module":"Lights, Camera","submodule":"Lights"},{"file":"src/webgl/loading.js","line":12,"description":"<p>Load a 3d model from an OBJ or STL file.</p>\n<p><a href=\"#/p5/loadModel\">loadModel()</a> should be placed inside of <a href=\"#/p5/preload\">preload()</a>.\nThis allows the model to load fully before the rest of your code is run.</p>\n<p>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\n<a href=\"#/p5/loadModel\">loadModel()</a> 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 <a href=\"#/p5/scale\">scale()</a> function.</p>\n<p>Also, the support for colored STL files is not present. STL files with color will be\nrendered without color properties.</p>\n","itemtype":"method","name":"loadModel","return":{"description":"the <a href=\"#/p5.Geometry\">p5.Geometry</a> object","type":"p5.Geometry"},"example":["\n<div>\n<code>\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}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  model(octahedron);\n}\n</code>\n</div>","\n<div>\n<code>\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}\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</code>\n</div>"],"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":"<p>Path of the model to be loaded</p>\n","type":"String"},{"name":"normalize","description":"<p>If true, scale the model to a\n                                     standardized size when loading</p>\n","type":"Boolean"},{"name":"successCallback","description":"<p>Function to be called\n                                    once the model is loaded. Will be passed\n                                    the 3D model object.</p>\n","type":"function(p5.Geometry)","optional":true},{"name":"failureCallback","description":"<p>called with event error if\n                                        the model fails to load.</p>\n","type":"Function(Event)","optional":true},{"name":"fileType","description":"<p>The file extension of the model\n                                     (<code>.stl</code>, <code>.obj</code>).</p>\n","type":"String","optional":true}],"return":{"description":"the <a href=\"#/p5.Geometry\">p5.Geometry</a> object","type":"p5.Geometry"}},{"line":96,"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 <a href=\"#/p5.Geometry\">p5.Geometry</a> object","type":"p5.Geometry"}}]},{"file":"src/webgl/loading.js","line":179,"description":"<p>Parse OBJ lines into model. For reference, this is what a simple model of a\nsquare might look like:</p>\n<p>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</p>\n<p>f 4 3 2 1</p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":288,"description":"<p>STL files can be of two types, ASCII and Binary,</p>\n<p>We need to convert the arrayBuffer to an array of strings,\nto parse it as an ASCII file.</p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":315,"description":"<p>This function checks if the file is in ASCII format or in Binary format</p>\n<p>It is done by searching keyword <code>solid</code> at the start of the file.</p>\n<p>An ASCII STL data must begin with <code>solid</code> as the first six bytes.\nHowever, ASCII STLs lacking the SPACE after the <code>d</code> are known to be\nplentiful. So, check the first 5 bytes for <code>solid</code>.</p>\n<p>Several encodings, such as UTF-8, precede the text with up to 5 bytes:\n<a href=\"https://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding\">https://en.wikipedia.org/wiki/Byte_order_mark#Byte_order_marks_by_encoding</a>\nSearch for <code>solid</code> to start anywhere after those prefixes.</p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":342,"description":"<p>This function matches the <code>query</code> at the provided <code>offset</code></p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":354,"description":"<p>This function parses the Binary STL files.\n<a href=\"https://en.wikipedia.org/wiki/STL_%28file_format%29#Binary_STL\">https://en.wikipedia.org/wiki/STL_%28file_format%29#Binary_STL</a></p>\n<p>Currently there is no support for the colors provided in STL files.</p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":442,"description":"<p>ASCII STL file starts with <code>solid 'nameOfFile'</code>\nThen contain the normal of the face, starting with <code>facet normal</code>\nNext contain a keyword indicating the start of face vertex, <code>outer loop</code>\nNext comes the three vertex, starting with <code>vertex x y z</code>\nVertices ends with <code>endloop</code>\nFace ends with <code>endfacet</code>\nNext face starts with <code>facet normal</code>\nThe end of the file is indicated by <code>endsolid</code></p>\n","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/loading.js","line":586,"description":"<p>Render a 3d model to the screen.</p>\n","itemtype":"method","name":"model","params":[{"name":"model","description":"<p>Loaded 3d model to be rendered</p>\n","type":"p5.Geometry"}],"example":["\n<div>\n<code>\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}\n\nfunction draw() {\n  background(200);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  model(octahedron);\n}\n</code>\n</div>"],"alt":"Vertically rotating 3-d octahedron.","class":"p5","module":"Shape","submodule":"3D Models"},{"file":"src/webgl/material.js","line":12,"description":"<p>Loads a custom shader from the provided vertex and fragment\nshader paths. The shader files are loaded asynchronously in the\nbackground, so this method should be used in <a href=\"#/p5/preload\">preload()</a>.</p>\n<p>For now, there are three main types of shaders. p5 will automatically\nsupply appropriate vertices, normals, colors, and lighting attributes\nif the parameters defined in the shader match the names.</p>\n","itemtype":"method","name":"loadShader","params":[{"name":"vertFilename","description":"<p>path to file containing vertex shader\nsource code</p>\n","type":"String"},{"name":"fragFilename","description":"<p>path to file containing fragment shader\nsource code</p>\n","type":"String"},{"name":"callback","description":"<p>callback to be executed after loadShader\ncompletes. On success, the Shader object is passed as the first argument.</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>callback to be executed when an error\noccurs inside loadShader. On error, the error is passed as the first\nargument.</p>\n","type":"Function","optional":true}],"return":{"description":"a shader object created from the provided\nvertex and fragment shader files.","type":"p5.Shader"},"example":["\n<div modernizr='webgl'>\n<code>\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}\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</code>\n</div>"],"alt":"zooming Mandelbrot set. a colorful, infinitely detailed fractal.","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":111,"itemtype":"method","name":"createShader","params":[{"name":"vertSrc","description":"<p>source code for the vertex shader</p>\n","type":"String"},{"name":"fragSrc","description":"<p>source code for the fragment shader</p>\n","type":"String"}],"return":{"description":"a shader object created from the provided\nvertex and fragment shaders.","type":"p5.Shader"},"example":["\n<div modernizr='webgl'>\n<code>\n// the 'varying's are shared between both vertex & fragment shaders\nlet varying = 'precision highp float; varying vec2 vPos;';\n\n// the vertex shader is called for each vertex\nlet vs =\n  varying +\n  'attribute vec3 aPosition;' +\n  'void main() { vPos = (gl_Position = vec4(aPosition,1.0)).xy; }';\n\n// the fragment shader is called for each pixel\nlet fs =\n  varying +\n  'uniform vec2 p;' +\n  'uniform float r;' +\n  'const int I = 500;' +\n  'void main() {' +\n  '  vec2 c = p + vPos * r, z = c;' +\n  '  float n = 0.0;' +\n  '  for (int i = I; i > 0; i --) {' +\n  '    if(z.x*z.x+z.y*z.y > 4.0) {' +\n  '      n = float(i)/float(I);' +\n  '      break;' +\n  '    }' +\n  '    z = vec2(z.x*z.x-z.y*z.y, 2.0*z.x*z.y) + c;' +\n  '  }' +\n  '  gl_FragColor = vec4(0.5-cos(n*17.0)/2.0,0.5-cos(n*13.0)/2.0,0.5-cos(n*23.0)/2.0,1.0);' +\n  '}';\n\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}\n\nfunction draw() {\n  // 'r' is the size of the image in Mandelbrot-space\n  mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));\n  quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n</code>\n</div>"],"alt":"zooming Mandelbrot set. a colorful, infinitely detailed fractal.","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":179,"description":"<p>The <a href=\"#/p5/shader\">shader()</a> function lets the user provide a custom shader\nto fill in shapes in WEBGL mode. Users can create their\nown shaders by loading vertex and fragment shaders with\n<a href=\"#/p5/loadShader\">loadShader()</a>.</p>\n","itemtype":"method","name":"shader","chainable":1,"params":[{"name":"s","description":"<p>the desired <a href=\"#/p5.Shader\">p5.Shader</a> to use for rendering\nshapes.</p>\n","type":"p5.Shader","optional":true}],"example":["\n<div modernizr='webgl'>\n<code>\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\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</code>\n</div>"],"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":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":270,"description":"<p>This function restores the default shaders in WEBGL mode. Code that runs\nafter resetShader() will not be affected by previously defined\nshaders. Should be run after <a href=\"#/p5/shader\">shader()</a>.</p>\n","itemtype":"method","name":"resetShader","chainable":1,"class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":283,"description":"<p>Normal material for geometry is a material that is not affected by light.\nIt is not reflective and is a placeholder material often used for debugging.\nSurfaces facing the X-axis, become red, those facing the Y-axis, become green and those facing the Z-axis, become blue.\nYou can view all possible materials in this\n<a href=\"https://p5js.org/examples/3d-materials.html\">example</a>.</p>\n","itemtype":"method","name":"normalMaterial","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(200);\n  normalMaterial();\n  sphere(40);\n}\n</code>\n</div>"],"alt":"Red, green and blue gradient.","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":321,"description":"<p>Texture for geometry.  You can view other possible materials in this\n<a href=\"https://p5js.org/examples/3d-materials.html\">example</a>.</p>\n","itemtype":"method","name":"texture","params":[{"name":"tex","description":"<p>2-dimensional graphics\n                   to render as texture</p>\n","type":"p5.Image|p5.MediaElement|p5.Graphics"}],"chainable":1,"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  rotateZ(frameCount * 0.01);\n  rotateX(frameCount * 0.01);\n  rotateY(frameCount * 0.01);\n  //pass image as texture\n  texture(img);\n  box(200, 200, 200);\n}\n</code>\n</div>\n\n<div>\n<code>\nlet pg;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  pg = createGraphics(200, 200);\n  pg.textSize(75);\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</code>\n</div>\n\n<div>\n<code>\nlet vid;\nfunction preload() {\n  vid = createVideo('assets/fingers.mov');\n  vid.hide();\n}\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n  background(0);\n  //pass video frame as texture\n  texture(vid);\n  rect(-40, -40, 80, 80);\n}\n\nfunction mousePressed() {\n  vid.loop();\n}\n</code>\n</div>"],"alt":"Rotating view of many images umbrella and grid roof on a 3d plane\nblack canvas\nblack canvas","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":421,"description":"<p>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.\nThis function only works in WEBGL mode.</p>\n<p>With IMAGE, if an image is 100 x 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).</p>\n","itemtype":"method","name":"textureMode","params":[{"name":"mode","description":"<p>either IMAGE or NORMAL</p>\n","type":"Constant"}],"example":["\n<div>\n<code>\nlet img;\n\nfunction preload() {\n  img = loadImage('assets/laDefense.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"the underside of a white umbrella and gridded ceiling above","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":499,"description":"<p>Sets the global texture wrapping mode. This controls how textures behave\nwhen their uv's go outside of the 0 - 1 range. There are three options:\nCLAMP, REPEAT, and MIRROR.</p>\n<p>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</p>\n<p>REPEAT & MIRROR are only available if the texture\nis a power of two size (128, 256, 512, 1024, etc.).</p>\n<p>This method will affect all textures in your sketch until a subsequent\ntextureWrap call is made.</p>\n<p>If only one argument is provided, it will be applied to both the\nhorizontal and vertical axes.</p>\n","itemtype":"method","name":"textureWrap","params":[{"name":"wrapX","description":"<p>either CLAMP, REPEAT, or MIRROR</p>\n","type":"Constant"},{"name":"wrapY","description":"<p>either CLAMP, REPEAT, or MIRROR</p>\n","type":"Constant","optional":true}],"example":["\n<div>\n<code>\nlet img;\nfunction preload() {\n  img = loadImage('assets/rockies128.jpg');\n}\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  textureWrap(MIRROR);\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</code>\n</div>"],"alt":"an image of the rocky mountains repeated in mirrored tiles","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/material.js","line":571,"description":"<p>Ambient material for geometry with a given color. Ambient material defines the color the object reflects under any lighting.\nFor example, if the ambient material of an object is pure red, but the ambient lighting only contains green, the object will not reflect any light.\nHere's an <a href=\"https://p5js.org/examples/3d-materials.html\">example containing all possible materials</a>.</p>\n","itemtype":"method","name":"ambientMaterial","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(0);\n  noStroke();\n  ambientLight(200);\n  ambientMaterial(70, 130, 230);\n  sphere(40);\n}\n</code>\n</div>\n<div>\n<code>\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}\nfunction draw() {\n  background(70);\n  ambientLight(100); // white light\n  ambientMaterial(255, 0, 255); // pink material\n  box(30);\n}\n</code>\n</div>\n<div>\n<code>\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}\nfunction draw() {\n  background(70);\n  ambientLight(0, 255, 0); // green light\n  ambientMaterial(255, 0, 255); // pink material\n  box(30);\n}\n</code>\n</div>"],"alt":"radiating light source from top right of canvas\nbox reflecting only red and blue light\nbox reflecting no light","class":"p5","module":"Lights, Camera","submodule":"Material","overloads":[{"line":571,"params":[{"name":"v1","description":"<p>gray value, red or hue value\n                        (depending on the current color mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number","optional":true},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number","optional":true}],"chainable":1},{"line":631,"params":[{"name":"color","description":"<p>color, color Array, or CSS color string</p>\n","type":"Number[]|String|p5.Color"}],"chainable":1}]},{"file":"src/webgl/material.js","line":651,"description":"<p>Sets the emissive color of the material used for geometry drawn to\nthe screen. This is a misnomer in the sense that the material does not\nactually emit light that effects surrounding polygons. Instead,\nit gives the appearance that the object is glowing. An emissive material\nwill display at full strength even if there is no light for it to reflect.</p>\n","itemtype":"method","name":"emissiveMaterial","chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n}\nfunction draw() {\n  background(0);\n  noStroke();\n  ambientLight(0);\n  emissiveMaterial(130, 230, 0);\n  sphere(40);\n}\n</code>\n</div>"],"alt":"radiating light source from top right of canvas","class":"p5","module":"Lights, Camera","submodule":"Material","overloads":[{"line":651,"params":[{"name":"v1","description":"<p>gray value, red or hue value\n                        (depending on the current color mode),</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value</p>\n","type":"Number","optional":true},{"name":"v3","description":"<p>blue or brightness value</p>\n","type":"Number","optional":true},{"name":"a","description":"<p>opacity</p>\n","type":"Number","optional":true}],"chainable":1},{"line":683,"params":[{"name":"color","description":"<p>color, color Array, or CSS color string</p>\n","type":"Number[]|String|p5.Color"}],"chainable":1}]},{"file":"src/webgl/material.js","line":703,"description":"<p>Specular material for geometry with a given color. Specular material is a shiny reflective material.\nLike ambient material it also defines the color the object reflects under ambient lighting.\nFor example, if the specular material of an object is pure red, but the ambient lighting only contains green, the object will not reflect any light.\nFor all other types of light like point and directional light, a specular material will reflect the color of the light source to the viewer.\nHere's an <a href=\"https://p5js.org/examples/3d-materials.html\">example containing all possible materials</a>.</p>\n","itemtype":"method","name":"specularMaterial","chainable":1,"class":"p5","module":"Lights, Camera","submodule":"Material","overloads":[{"line":703,"params":[{"name":"gray","description":"<p>number specifying value between white and black.</p>\n","type":"Number"},{"name":"alpha","description":"<p>alpha value relative to current color range\n                                (default is 0-255)</p>\n","type":"Number","optional":true}],"chainable":1},{"line":717,"params":[{"name":"v1","description":"<p>red or hue value relative to\n                                the current color range</p>\n","type":"Number"},{"name":"v2","description":"<p>green or saturation value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"v3","description":"<p>blue or brightness value\n                                relative to the current color range</p>\n","type":"Number"},{"name":"alpha","description":"","type":"Number","optional":true}],"chainable":1},{"line":747,"params":[{"name":"color","description":"<p>color Array, or CSS color string</p>\n","type":"Number[]|String|p5.Color"}],"chainable":1}]},{"file":"src/webgl/material.js","line":767,"description":"<p>Sets the amount of gloss in the surface of shapes.\nUsed in combination with specularMaterial() in setting\nthe material properties of shapes. The default and minimum value is 1.</p>\n","itemtype":"method","name":"shininess","params":[{"name":"shine","description":"<p>Degree of Shininess.\n                      Defaults to 1.</p>\n","type":"Number"}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>"],"alt":"Shininess on Camera changes position with mouse","class":"p5","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Camera.js","line":13,"description":"<p>Sets the camera position for a 3D sketch. Parameters for this function define\nthe position for the camera, the center of the sketch (where the camera is\npointing), and an up direction (the orientation of the camera).</p>\n<p>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 centerX value is positive, the camera\nis rotating to the right side of the sketch, so the object would seem like\nmoving to the left.</p>\n<p>See this <a href = \"https://www.openprocessing.org/sketch/740258\">example</a>\nto view the position of your camera.</p>\n<p>When called with no arguments, this function creates a default camera\nequivalent to\ncamera(0, 0, (height/2.0) / tan(PI*30.0 / 180.0), 0, 0, 0, 0, 1, 0);</p>\n","itemtype":"method","name":"camera","is_constructor":1,"params":[{"name":"x","description":"<p>camera position value on x axis</p>\n","type":"Number","optional":true},{"name":"y","description":"<p>camera position value on y axis</p>\n","type":"Number","optional":true},{"name":"z","description":"<p>camera position value on z axis</p>\n","type":"Number","optional":true},{"name":"centerX","description":"<p>x coordinate representing center of the sketch</p>\n","type":"Number","optional":true},{"name":"centerY","description":"<p>y coordinate representing center of the sketch</p>\n","type":"Number","optional":true},{"name":"centerZ","description":"<p>z coordinate representing center of the sketch</p>\n","type":"Number","optional":true},{"name":"upX","description":"<p>x component of direction 'up' from camera</p>\n","type":"Number","optional":true},{"name":"upY","description":"<p>y component of direction 'up' from camera</p>\n","type":"Number","optional":true},{"name":"upZ","description":"<p>z component of direction 'up' from camera</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\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</code>\n</div>","\n<div>\n<code>\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  //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  camera(X, Y, Z, centerX, centerY, centerZ, 0, 1, 0);\n  stroke(255);\n  fill(255, 102, 94);\n  box(85);\n}\n</code>\n</div>"],"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 it's center.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":115,"description":"<p>Sets a perspective projection for the camera in a 3D sketch. This projection\nrepresents depth through foreshortening: objects that are close to the camera\nappear their actual size while those that are further away from the camera\nappear smaller. 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.</p>\n<p>When called with no arguments, the defaults\nprovided are equivalent to\nperspective(PI/3.0, width/height, eyeZ/10.0, eyeZ<em>10.0), where eyeZ\nis equal to ((height/2.0) / tan(PI</em>60.0/360.0));</p>\n","itemtype":"method","name":"perspective","params":[{"name":"fovy","description":"<p>camera frustum vertical field of view,\n                          from bottom to top of view, in <a href=\"#/p5/angleMode\">angleMode</a> units</p>\n","type":"Number","optional":true},{"name":"aspect","description":"<p>camera frustum aspect ratio</p>\n","type":"Number","optional":true},{"name":"near","description":"<p>frustum near plane length</p>\n","type":"Number","optional":true},{"name":"far","description":"<p>frustum far plane length</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n//drag the mouse to look around!\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  perspective(PI / 3.0, width / height, 0.1, 500);\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) * 95);\n  box(30);\n  pop();\n  push();\n  translate(15, 0, sin(frameCount / 30 + PI) * 95);\n  box(30);\n  pop();\n}\n</code>\n</div>"],"alt":"two colored 3D boxes move back and forth, rotating as mouse is dragged.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":175,"description":"<p>Sets an orthographic projection for the camera in a 3D sketch and defines a\nbox-shaped viewing frustum within which objects are seen. In this projection,\nall objects with the same dimension appear the same size, regardless of\nwhether they are near or far from the camera. The parameters to this\nfunction specify the viewing frustum where left and right are the minimum and\nmaximum x values, top and bottom are the minimum and maximum y values, and near\nand far are the minimum and maximum z values. If no parameters are given, the\ndefault is used: ortho(-width/2, width/2, -height/2, height/2).</p>\n","itemtype":"method","name":"ortho","params":[{"name":"left","description":"<p>camera frustum left plane</p>\n","type":"Number","optional":true},{"name":"right","description":"<p>camera frustum right plane</p>\n","type":"Number","optional":true},{"name":"bottom","description":"<p>camera frustum bottom plane</p>\n","type":"Number","optional":true},{"name":"top","description":"<p>camera frustum top plane</p>\n","type":"Number","optional":true},{"name":"near","description":"<p>camera frustum near plane</p>\n","type":"Number","optional":true},{"name":"far","description":"<p>camera frustum far plane</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\n//drag the mouse to look around!\n//there's no vanishing point\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  ortho(-width / 2, width / 2, height / 2, -height / 2, 0, 500);\n}\nfunction draw() {\n  background(200);\n  orbitControl();\n  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</code>\n</div>"],"alt":"two 3D boxes move back and forth along same plane, rotating as mouse is dragged.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":231,"description":"<p>Sets a perspective matrix as defined by the parameters.</p>\n<p>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.</p>\n<p>Setting the frustum changes the perspective of the scene being rendered.\nThis can be achieved more simply in many cases by using\n<a href=\"https://p5js.org/reference/#/p5/perspective\">perspective()</a>.</p>\n","itemtype":"method","name":"frustum","params":[{"name":"left","description":"<p>camera frustum left plane</p>\n","type":"Number","optional":true},{"name":"right","description":"<p>camera frustum right plane</p>\n","type":"Number","optional":true},{"name":"bottom","description":"<p>camera frustum bottom plane</p>\n","type":"Number","optional":true},{"name":"top","description":"<p>camera frustum top plane</p>\n","type":"Number","optional":true},{"name":"near","description":"<p>camera frustum near plane</p>\n","type":"Number","optional":true},{"name":"far","description":"<p>camera frustum far plane</p>\n","type":"Number","optional":true}],"chainable":1,"example":["\n<div>\n<code>\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  setAttributes('antialias', true);\n  frustum(-0.1, 0.1, -0.1, 0.1, 0.1, 200);\n}\nfunction draw() {\n  background(200);\n  orbitControl();\n  strokeWeight(10);\n  stroke(0, 0, 255);\n  noFill();\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</code>\n</div>"],"alt":"two 3D boxes move back and forth along same plane, rotating as mouse is dragged.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":297,"description":"<p>Creates a new <a href=\"#/p5.Camera\">p5.Camera</a> object and tells the\nrenderer to use that camera.\nReturns the p5.Camera object.</p>\n","itemtype":"method","name":"createCamera","return":{"description":"The newly created camera object.","type":"p5.Camera"},"example":["\n<div><code>\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  setCamera(camera);\n}\n\nfunction draw() {\n  camera.lookAt(0, 0, 0);\n  camera.setPosition(sin(frameCount / 60) * 200, 0, 100);\n  box(20);\n}\n</code></div>"],"alt":"An example that creates a camera and moves it around the box.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":425,"description":"<p>Sets a perspective projection for a p5.Camera object and sets parameters\nfor that projection according to <a href=\"#/p5/perspective\">perspective()</a>\nsyntax.</p>\n","itemtype":"method","name":"perspective","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":505,"description":"<p>Sets an orthographic projection for a p5.Camera object and sets parameters\nfor that projection according to <a href=\"#/p5/ortho\">ortho()</a> syntax.</p>\n","itemtype":"method","name":"ortho","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":564,"itemtype":"method","name":"frustum","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":669,"description":"<p>Panning rotates the camera view to the left and right.</p>\n","itemtype":"method","name":"pan","params":[{"name":"angle","description":"<p>amount to rotate camera in current\n<a href=\"#/p5/angleMode\">angleMode</a> units.\nGreater than 0 values rotate counterclockwise (to the left).</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet cam;\nlet delta = 0.01;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n  cam = createCamera();\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</code>\n</div>"],"alt":"camera view pans left and right across a series of rotating 3D boxes.","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":727,"description":"<p>Tilting rotates the camera view up and down.</p>\n","itemtype":"method","name":"tilt","params":[{"name":"angle","description":"<p>amount to rotate camera in current\n<a href=\"#/p5/angleMode\">angleMode</a> units.\nGreater than 0 values rotate counterclockwise (to the left).</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet cam;\nlet delta = 0.01;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n  cam = createCamera();\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</code>\n</div>"],"alt":"camera view tilts up and down across a series of rotating 3D boxes.","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":785,"description":"<p>Reorients the camera to look at a position in world space.</p>\n","itemtype":"method","name":"lookAt","params":[{"name":"x","description":"<p>x position of a point in world space</p>\n","type":"Number"},{"name":"y","description":"<p>y position of a point in world space</p>\n","type":"Number"},{"name":"z","description":"<p>z position of a point in world space</p>\n","type":"Number"}],"example":["\n<div>\n<code>\nlet cam;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n  cam = createCamera();\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</code>\n</div>"],"alt":"camera view of rotating 3D cubes changes to look at a new random\npoint every second .","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":852,"description":"<p>Sets a camera's position and orientation.  This is equivalent to calling\n<a href=\"#/p5/camera\">camera()</a> on a p5.Camera object.</p>\n","itemtype":"method","name":"camera","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":933,"description":"<p>Move camera along its local axes while maintaining current camera orientation.</p>\n","itemtype":"method","name":"move","params":[{"name":"x","description":"<p>amount to move along camera's left-right axis</p>\n","type":"Number"},{"name":"y","description":"<p>amount to move along camera's up-down axis</p>\n","type":"Number"},{"name":"z","description":"<p>amount to move along camera's forward-backward axis</p>\n","type":"Number"}],"example":["\n<div>\n<code>\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}\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</code>\n</div>"],"alt":"camera view moves along a series of 3D boxes, maintaining the same\norientation throughout the move","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1005,"description":"<p>Set camera position in world-space while maintaining current camera\norientation.</p>\n","itemtype":"method","name":"setPosition","params":[{"name":"x","description":"<p>x position of a point in world space</p>\n","type":"Number"},{"name":"y","description":"<p>y position of a point in world space</p>\n","type":"Number"},{"name":"z","description":"<p>z position of a point in world space</p>\n","type":"Number"}],"example":["\n<div>\n<code>\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}\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</code>\n</div>"],"alt":"camera position changes as the user presses keys, altering view of a 3D box","class":"p5.Camera","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Camera.js","line":1270,"description":"<p>Sets rendererGL's current camera to a p5.Camera object.  Allows switching\nbetween multiple cameras.</p>\n","itemtype":"method","name":"setCamera","params":[{"name":"cam","description":"<p>p5.Camera object</p>\n","type":"p5.Camera"}],"example":["\n<div>\n<code>\nlet cam1, cam2;\nlet currentCamera;\n\nfunction setup() {\n  createCanvas(100, 100, WEBGL);\n  normalMaterial();\n\n  cam1 = createCamera();\n  cam2 = createCamera();\n  cam2.setPosition(30, 0, 50);\n  cam2.lookAt(0, 0, 0);\n  cam2.ortho();\n\n  // set variable for previously active camera:\n  currentCamera = 1;\n}\n\nfunction draw() {\n  background(200);\n\n  // camera 1:\n  cam1.lookAt(0, 0, 0);\n  cam1.setPosition(sin(frameCount / 60) * 200, 0, 100);\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  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</code>\n</div>"],"alt":"Canvas switches between two camera views, each showing a series of spinning\n3D boxes.","class":"p5","module":"Lights, Camera","submodule":"Camera"},{"file":"src/webgl/p5.Geometry.js","line":71,"description":"<p>computes faces for geometry objects based on the vertices.</p>\n","itemtype":"method","name":"computeFaces","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Geometry.js","line":114,"description":"<p>computes smooth normals per vertex as an average of each\nface.</p>\n","itemtype":"method","name":"computeNormals","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Geometry.js","line":153,"description":"<p>Averages the vertex normals. Used in curved\nsurfaces</p>\n","itemtype":"method","name":"averageNormals","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Geometry.js","line":174,"description":"<p>Averages pole normals.  Used in spherical primitives</p>\n","itemtype":"method","name":"averagePoleNormals","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.Geometry.js","line":267,"description":"<p>Modifies all vertices to be centered within the range -100 to 100.</p>\n","itemtype":"method","name":"normalize","chainable":1,"class":"p5.Geometry","module":"Lights, Camera","submodule":"Material"},{"file":"src/webgl/p5.RendererGL.js","line":331,"description":"<p>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.</p>\n<p>Note that this will reinitialize the drawing context\nif called after the WebGL canvas is made.</p>\n<p>If an object is passed as the parameter, all attributes\nnot declared in the object will be set to defaults.</p>\n<p>The available attributes are:\n<br>\nalpha - indicates if the canvas contains an alpha buffer\ndefault is true</p>\n<p>depth - indicates whether the drawing buffer has a depth buffer\nof at least 16 bits - default is true</p>\n<p>stencil - indicates whether the drawing buffer has a stencil buffer\nof at least 8 bits</p>\n<p>antialias - indicates whether or not to perform anti-aliasing\ndefault is false (true in Safari)</p>\n<p>premultipliedAlpha - indicates that the page compositor will assume\nthe drawing buffer contains colors with pre-multiplied alpha\ndefault is false</p>\n<p>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</p>\n<p>perPixelLighting - if true, per-pixel lighting will be used in the\nlighting shader otherwise per-vertex lighting is used.\ndefault is true.</p>\n","itemtype":"method","name":"setAttributes","example":["\n<div>\n<code>\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</code>\n</div>\n<br>\nNow with the antialias attribute set to true.\n<br>\n<div>\n<code>\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</code>\n</div>\n\n<div>\n<code>\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</code>\n</div>"],"alt":"a rotating cube with smoother edges","class":"p5","module":"Rendering","submodule":"Rendering","overloads":[{"line":331,"params":[{"name":"key","description":"<p>Name of attribute</p>\n","type":"String"},{"name":"value","description":"<p>New value of named attribute</p>\n","type":"Boolean"}]},{"line":470,"params":[{"name":"obj","description":"<p>object with key-value pairs</p>\n","type":"Object"}]}]},{"file":"src/webgl/p5.Shader.js","line":296,"description":"<p>Wrapper around gl.uniform functions.\nAs we store uniform info in the shader we can use that\nto do type checking on the supplied data and call\nthe appropriate function.</p>\n","itemtype":"method","name":"setUniform","chainable":1,"params":[{"name":"uniformName","description":"<p>the name of the uniform in the\nshader program</p>\n","type":"String"},{"name":"data","description":"<p>the data to be associated\nwith that uniform; type varies (could be a single numerical value, array,\nmatrix, or texture / sampler reference)</p>\n","type":"Object|Number|Boolean|Number[]"}],"example":["\n<div modernizr='webgl'>\n<code>\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\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</code>\n</div>"],"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":"Lights, Camera","submodule":"Material"},{"file":"lib/addons/p5.sound.js","line":1,"class":"p5.sound","module":"Lights, Camera"},{"file":"lib/addons/p5.sound.js","line":52,"description":"<p>p5.sound \n<a href=\"https://p5js.org/reference/#/libraries/p5.sound\">https://p5js.org/reference/#/libraries/p5.sound</a></p>\n<p>From the Processing Foundation and contributors\n<a href=\"https://github.com/processing/p5.js-sound/graphs/contributors\">https://github.com/processing/p5.js-sound/graphs/contributors</a></p>\n<p>MIT License (MIT)\n<a href=\"https://github.com/processing/p5.js-sound/blob/master/LICENSE\">https://github.com/processing/p5.js-sound/blob/master/LICENSE</a></p>\n<p>Some of the many audio libraries & resources that inspire p5.sound:</p>\n<ul>\n<li><p>TONE.js (c) Yotam Mann. Licensed under The MIT License (MIT). <a href=\"https://github.com/TONEnoTONE/Tone.js\">https://github.com/TONEnoTONE/Tone.js</a></p>\n</li>\n<li><p>buzz.js (c) Jay Salvat. Licensed under The MIT License (MIT). <a href=\"http://buzz.jaysalvat.com/\">http://buzz.jaysalvat.com/</a></p>\n</li>\n<li><p>Boris Smus Web Audio API book, 2013. Licensed under the Apache License <a href=\"http://www.apache.org/licenses/LICENSE-2.0\">http://www.apache.org/licenses/LICENSE-2.0</a></p>\n</li>\n<li><p>wavesurfer.js <a href=\"https://github.com/katspaugh/wavesurfer.js\">https://github.com/katspaugh/wavesurfer.js</a></p>\n</li>\n<li><p>Web Audio Components by Jordan Santell <a href=\"https://github.com/web-audio-components\">https://github.com/web-audio-components</a></p>\n</li>\n<li><p>Wilm Thoben's Sound library for Processing <a href=\"https://github.com/processing/processing/tree/master/java/libraries/sound\">https://github.com/processing/processing/tree/master/java/libraries/sound</a></p>\n<p>Web Audio API: <a href=\"http://w3.org/TR/webaudio/\">http://w3.org/TR/webaudio/</a></p>\n</li>\n</ul>\n","class":"p5.sound","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":166,"description":"<p>Returns a number representing the master amplitude (volume) for sound\nin this sketch.</p>\n","itemtype":"method","name":"getMasterVolume","return":{"description":"Master amplitude (volume) for sound in this sketch.\n                 Should be between 0.0 (silence) and 1.0.","type":"Number"},"class":"p5.sound","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":178,"description":"<p>Scale the output of all sound in this sketch</p>\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 <code>rampTime</code> parameter. For more\ncomplex fades, see the Envelope class.\n\n<p>Alternately, you can pass in a signal source such as an\noscillator to modulate the amplitude with an audio signal.</p>\n<p><b>How This Works</b>: 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.</p>\n\n<p>If no value is provided, returns a Web Audio API Gain Node</p>","itemtype":"method","name":"masterVolume","params":[{"name":"volume","description":"<p>Volume (amplitude) between 0.0\n                                   and 1.0 or modulating signal/oscillator</p>\n","type":"Number|Object"},{"name":"rampTime","description":"<p>Fade for t seconds</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>Schedule this event to happen at\n                               t seconds in the future</p>\n","type":"Number","optional":true}],"class":"p5.sound","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":221,"description":"<p><code>p5.soundOut</code> is the p5.sound master output. It sends output to\nthe destination of this window's web audio context. It contains\nWeb Audio API nodes including a dyanmicsCompressor (<code>.limiter</code>),\nand Gain Nodes for <code>.input</code> and <code>.output</code>.</p>\n","itemtype":"property","name":"soundOut","type":"Object","class":"p5.sound","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":300,"description":"<p>In classes that extend\np5.Effect, connect effect nodes\nto the wet parameter</p>\n","class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":316,"description":"<p>Set the output volume of the filter.</p>\n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"<p>amplitude between 0 and 1.0</p>\n","type":"Number","optional":true},{"name":"rampTime","description":"<p>create a fade that lasts until rampTime</p>\n","type":"Number","optional":true},{"name":"tFromNow","description":"<p>schedule this event to happen in tFromNow seconds</p>\n","type":"Number","optional":true}],"class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":336,"description":"<p>Link effects together in a chain\nExample usage: filter.chain(reverb, delay, panner);\nMay be used with an open-ended number of arguments</p>\n","itemtype":"method","name":"chain","params":[{"name":"arguments","description":"<p>Chain together multiple sound objects</p>\n","type":"Object","optional":true}],"class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":358,"description":"<p>Adjust the dry/wet value.</p>\n","itemtype":"method","name":"drywet","params":[{"name":"fade","description":"<p>The desired drywet value (0 - 1.0)</p>\n","type":"Number","optional":true}],"class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":374,"description":"<p>Send output to a p5.js-sound, Web Audio Node, or use signal to\ncontrol an AudioParam</p>\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":388,"description":"<p>Disconnect all output.</p>\n","itemtype":"method","name":"disconnect","class":"p5.Effect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":451,"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":455,"description":"<p>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.</p>\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":470,"description":"<p>Returns the closest MIDI note value for\na given frequency.</p>\n","itemtype":"method","name":"freqToMidi","params":[{"name":"frequency","description":"<p>A freqeuncy, for example, the \"A\"\n                           above Middle C is 440Hz</p>\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":486,"description":"<p>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.</p>\n","itemtype":"method","name":"midiToFreq","params":[{"name":"midiNote","description":"<p>The number of a MIDI note</p>\n","type":"Number"}],"return":{"description":"Frequency value of the given MIDI note","type":"Number"},"example":["\n<div><code>\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</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":570,"description":"<p>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.\n<a href=\"http://media.io/\">Here</a> is a free online file\nconverter.</p>\n","itemtype":"method","name":"soundFormats","params":[{"name":"formats","description":"<p>i.e. 'mp3', 'wav', 'ogg'</p>\n","type":"String","optional":true,"multiple":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":688,"description":"<p>Used by Osc and Envelope to chain signal math</p>\n","class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":967,"description":"<p>The p5.Filter is built with a\n<a href=\"http://www.w3.org/TR/webaudio/#BiquadFilterNode\">\nWeb Audio BiquadFilter Node</a>.</p>\n","itemtype":"property","name":"biquadFilter","type":"DelayNode","class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":989,"description":"<p>Filter an audio signal according to a set\nof filter parameters.</p>\n","itemtype":"method","name":"process","params":[{"name":"Signal","description":"<p>An object that outputs audio</p>\n","type":"Object"},{"name":"freq","description":"<p>Frequency in Hz, from 10 to 22050</p>\n","type":"Number","optional":true},{"name":"res","description":"<p>Resonance/Width of the filter frequency\n                      from 0.001 to 1000</p>\n","type":"Number","optional":true}],"class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1004,"description":"<p>Set the frequency and the resonance of the filter.</p>\n","itemtype":"method","name":"set","params":[{"name":"freq","description":"<p>Frequency in Hz, from 10 to 22050</p>\n","type":"Number","optional":true},{"name":"res","description":"<p>Resonance (Q) from 0.001 to 1000</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Filter","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1024,"description":"<p>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).</p>\n","itemtype":"method","name":"freq","params":[{"name":"freq","description":"<p>Filter Frequency</p>\n","type":"Number"},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\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":1053,"description":"<p>Controls either width of a bandpass frequency,\nor the resonance of a low/highpass cutoff frequency.</p>\n","itemtype":"method","name":"res","params":[{"name":"res","description":"<p>Resonance/Width of filter freq\n                     from 0.001 to 1000</p>\n","type":"Number"},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\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":1079,"description":"<p>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.</p>\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":1104,"description":"<p>Toggle function. Switches between the specified type and allpass</p>\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":1123,"description":"<p>Set the type of a p5.Filter. Possible types include:\n\"lowpass\" (default), \"highpass\", \"bandpass\",\n\"lowshelf\", \"highshelf\", \"peaking\", \"notch\",\n\"allpass\".</p>\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":1218,"description":"<p>Returns the Audio Context for this sketch. Useful for users\nwho would like to dig deeper into the <a target='_blank' href=\n'http://webaudio.github.io/web-audio-api/'>Web Audio API\n</a>.</p>\n\n<p>Some browsers require users to startAudioContext\nwith a user gesture, such as touchStarted in the example below.</p>","itemtype":"method","name":"getAudioContext","return":{"description":"AudioContext for this sketch","type":"Object"},"example":["\n<div><code>\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</div></code>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1257,"description":"<p>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\n<a href=\"https://goo.gl/7K7WLu\" title=\"Google Chrome's autoplay\npolicy\">Google Chrome</a>, which create the Web Audio API's\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/AudioContext\"\ntitle=\"Audio Context @ MDN\">Audio Context</a>\nin a suspended state.</p>\n\n<p>In these browser-specific policies, sound will not play until a user\ninteraction event (i.e. <code>mousePressed()</code>) explicitly resumes\nthe AudioContext, or starts an audio node. This can be accomplished by\ncalling <code>start()</code> on a <code>p5.Oscillator</code>,\n<code> play()</code> on a <code>p5.SoundFile</code>, or simply\n<code>userStartAudio()</code>.</p>\n\n<p><code>userStartAudio()</code> 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 <code>mousePressed()</code> as in the\nexample below. This method utilizes\n<a href=\"https://github.com/tambien/StartAudioContext\">StartAudioContext\n</a>, a library by Yotam Mann (MIT Licence, 2016).</p>","params":[{"name":"element(s)","description":"<p>This argument can be an Element,\n                              Selector String, NodeList, p5.Element,\n                              jQuery Element, or an Array of any of those.</p>\n","type":"Element|Array","optional":true},{"name":"callback","description":"<p>Callback to invoke when the AudioContext\n                              has started</p>\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<div><code>\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</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1477,"description":"<p>Start an oscillator.</p>\n<p>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: <code>userStartAudio()</code>.</p>\n","itemtype":"method","name":"start","params":[{"name":"time","description":"<p>startTime in seconds from now.</p>\n","type":"Number","optional":true},{"name":"frequency","description":"<p>frequency in Hz.</p>\n","type":"Number","optional":true}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1525,"description":"<p>Stop an oscillator. Accepts an optional parameter\nto determine how long (in seconds from now) until the\noscillator stops.</p>\n","itemtype":"method","name":"stop","params":[{"name":"secondsFromNow","description":"<p>Time, in seconds from now.</p>\n","type":"Number"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1544,"description":"<p>Set the amplitude between 0 and 1.0. Or, pass in an object\nsuch as an oscillator to modulate amplitude with an audio signal.</p>\n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"<p>between 0 and 1.0\n                            or a modulating signal/oscillator</p>\n","type":"Number|Object"},{"name":"rampTime","description":"<p>create a fade that lasts rampTime</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\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":1584,"description":"<p>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.</p>\n","itemtype":"method","name":"freq","params":[{"name":"Frequency","description":"<p>Frequency in Hz\n                                      or modulating signal/oscillator</p>\n","type":"Number|Object"},{"name":"rampTime","description":"<p>Ramp time (in seconds)</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>Schedule this event to happen\n                                 at x seconds from now</p>\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<div><code>\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</code></div>"],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1662,"description":"<p>Set type to 'sine', 'triangle', 'sawtooth' or 'square'.</p>\n","itemtype":"method","name":"setType","params":[{"name":"type","description":"<p>'sine', 'triangle', 'sawtooth' or 'square'.</p>\n","type":"String"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1678,"description":"<p>Connect to a p5.sound / Web Audio object.</p>\n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"<p>A p5.sound or Web Audio object</p>\n","type":"Object"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1698,"description":"<p>Disconnect all outputs</p>\n","itemtype":"method","name":"disconnect","class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1721,"description":"<p>Pan between Left (-1) and Right (1)</p>\n","itemtype":"method","name":"pan","params":[{"name":"panning","description":"<p>Number between -1 and 1</p>\n","type":"Number"},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1759,"description":"<p>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.</p>\n","itemtype":"method","name":"phase","params":[{"name":"phase","description":"<p>float between 0.0 and 1.0</p>\n","type":"Number"}],"class":"p5.Oscillator","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":1818,"description":"<p>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.</p>\n","itemtype":"method","name":"add","params":[{"name":"number","description":"<p>Constant number to add</p>\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":1838,"description":"<p>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.</p>\n","itemtype":"method","name":"mult","params":[{"name":"number","description":"<p>Constant number to multiply</p>\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":1857,"description":"<p>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.</p>\n","itemtype":"method","name":"scale","params":[{"name":"inMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"inMax","description":"<p>input range maximum</p>\n","type":"Number"},{"name":"outMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"outMax","description":"<p>input range maximum</p>\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":2067,"description":"<p>Play tells the MonoSynth to start playing a note. This method schedules\nthe calling of .triggerAttack and .triggerRelease.</p>\n","itemtype":"method","name":"play","params":[{"name":"note","description":"<p>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 <a href = \"https://github.com/Tonejs/Tone.js/wiki/Instruments\">\n                               Tone</a>. Defaults to 440 hz.</p>\n","type":"String | Number"},{"name":"velocity","description":"<p>velocity of the note to play (ranging from 0 to 1)</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time from now (in seconds) at which to play</p>\n","type":"Number","optional":true},{"name":"sustainTime","description":"<p>time to sustain before releasing the envelope. Defaults to 0.15 seconds.</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>\n"],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2116,"description":"<p>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.</p>\n","params":[{"name":"note","description":"<p>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 <a href = \"https://github.com/Tonejs/Tone.js/wiki/Instruments\">\n                               Tone</a>. Defaults to 440 hz</p>\n","type":"String | Number"},{"name":"velocity","description":"<p>velocity of the note to play (ranging from 0 to 1)</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time from now (in seconds) at which to play</p>\n","type":"Number","optional":true}],"itemtype":"method","name":"triggerAttack","example":["\n<div><code>\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</code></div>"],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2162,"description":"<p>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.</p>\n","params":[{"name":"secondsFromNow","description":"<p>time to trigger the release</p>\n","type":"Number"}],"itemtype":"method","name":"triggerRelease","example":["\n<div><code>\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</code></div>"],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2199,"description":"<p>Set values like a traditional\n<a href=\"https://en.wikipedia.org/wiki/Synthesizer#/media/File:ADSR_parameter.svg\">\nADSR envelope\n</a>.</p>\n","itemtype":"method","name":"setADSR","params":[{"name":"attackTime","description":"<p>Time (in seconds before envelope\n                              reaches Attack Level</p>\n","type":"Number"},{"name":"decayTime","description":"<p>Time (in seconds) before envelope\n                              reaches Decay/Sustain Level</p>\n","type":"Number","optional":true},{"name":"susRatio","description":"<p>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 <code>setRange</code>),\n                              then decayLevel would increase proportionally, to become 0.5.</p>\n","type":"Number","optional":true},{"name":"releaseTime","description":"<p>Time in seconds from now (defaults to 0)</p>\n","type":"Number","optional":true}],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2226,"description":"<p>Getters and Setters</p>\n","itemtype":"property","name":"attack","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2232,"itemtype":"property","name":"decay","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2237,"itemtype":"property","name":"sustain","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2242,"itemtype":"property","name":"release","type":"Number","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2282,"description":"<p>MonoSynth amp</p>\n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"<p>desired volume</p>\n","type":"Number"},{"name":"rampTime","description":"<p>Time to reach new volume</p>\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":2300,"description":"<p>Connect to a p5.sound / Web Audio object.</p>\n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"<p>A p5.sound or Web Audio object</p>\n","type":"Object"}],"class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2313,"description":"<p>Disconnect all outputs</p>\n","itemtype":"method","name":"disconnect","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2326,"description":"<p>Get rid of the MonoSynth and free up its resources / memory.</p>\n","itemtype":"method","name":"dispose","class":"p5.MonoSynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2380,"description":"<p>Connect to p5 objects or Web Audio Nodes</p>\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":2392,"description":"<p>Disconnect from soundOut</p>\n","itemtype":"method","name":"disconnect","class":"p5.AudioVoice","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2474,"description":"<p>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.</p>\n","itemtype":"property","name":"notes","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2487,"description":"<p>A PolySynth must have at least 1 voice, defaults to 8</p>\n","itemtype":"property","name":"polyvalue","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2493,"description":"<p>Monosynth that generates the sound for each note that is triggered. The\np5.PolySynth defaults to using the p5.MonoSynth as its voice.</p>\n","itemtype":"property","name":"AudioVoice","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2530,"description":"<p>Play a note by triggering noteAttack and noteRelease with sustain time</p>\n","itemtype":"method","name":"play","params":[{"name":"note","description":"<p>midi note to play (ranging from 0 to 127 - 60 being a middle C)</p>\n","type":"Number","optional":true},{"name":"velocity","description":"<p>velocity of the note to play (ranging from 0 to 1)</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time from now (in seconds) at which to play</p>\n","type":"Number","optional":true},{"name":"sustainTime","description":"<p>time to sustain before releasing the envelope</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2578,"description":"<p>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.</p>\n","itemtype":"method","name":"noteADSR","params":[{"name":"note","description":"<p>Midi note on which ADSR should be set.</p>\n","type":"Number","optional":true},{"name":"attackTime","description":"<p>Time (in seconds before envelope\n                              reaches Attack Level</p>\n","type":"Number","optional":true},{"name":"decayTime","description":"<p>Time (in seconds) before envelope\n                              reaches Decay/Sustain Level</p>\n","type":"Number","optional":true},{"name":"susRatio","description":"<p>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 <code>setRange</code>),\n                              then decayLevel would increase proportionally, to become 0.5.</p>\n","type":"Number","optional":true},{"name":"releaseTime","description":"<p>Time in seconds from now (defaults to 0)</p>\n","type":"Number","optional":true}],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2609,"description":"<p>Set the PolySynths global envelope. This method modifies the envelopes of each\nmonosynth so that all notes are played with this envelope.</p>\n","itemtype":"method","name":"setADSR","params":[{"name":"attackTime","description":"<p>Time (in seconds before envelope\n                               reaches Attack Level</p>\n","type":"Number","optional":true},{"name":"decayTime","description":"<p>Time (in seconds) before envelope\n                               reaches Decay/Sustain Level</p>\n","type":"Number","optional":true},{"name":"susRatio","description":"<p>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 <code>setRange</code>),\n                               then decayLevel would increase proportionally, to become 0.5.</p>\n","type":"Number","optional":true},{"name":"releaseTime","description":"<p>Time in seconds from now (defaults to 0)</p>\n","type":"Number","optional":true}],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2636,"description":"<p>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.</p>\n","itemtype":"method","name":"noteAttack","params":[{"name":"note","description":"<p>midi note on which attack should be triggered.</p>\n","type":"Number","optional":true},{"name":"velocity","description":"<p>velocity of the note to play (ranging from 0 to 1)/</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time from now (in seconds)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2746,"description":"<p>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.</p>\n","itemtype":"method","name":"noteRelease","params":[{"name":"note","description":"<p>midi note on which attack should be triggered.\n                                  If no value is provided, all notes will be released.</p>\n","type":"Number","optional":true},{"name":"secondsFromNow","description":"<p>time to trigger the release</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>\n"],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2829,"description":"<p>Connect to a p5.sound / Web Audio object.</p>\n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"<p>A p5.sound or Web Audio object</p>\n","type":"Object"}],"class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2842,"description":"<p>Disconnect all outputs</p>\n","itemtype":"method","name":"disconnect","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2855,"description":"<p>Get rid of the MonoSynth and free up its resources / memory.</p>\n","itemtype":"method","name":"dispose","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":2969,"description":"<p>This module has shims</p>\n","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3105,"description":"<p>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</p>\n","class":"p5.PolySynth","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3492,"description":"<p>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<a href=\"https://github.com/processing/p5.js/wiki/Local-server\">\nlocal server</a> is recommended when loading external files.</p>\n","itemtype":"method","name":"loadSound","params":[{"name":"path","description":"<p>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.</p>\n","type":"String|Array"},{"name":"successCallback","description":"<p>Name of a function to call once file loads</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>Name of a function to call if there is\n                                    an error loading the file.</p>\n","type":"Function","optional":true},{"name":"whileLoading","description":"<p>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.</p>\n","type":"Function","optional":true}],"return":{"description":"Returns a p5.SoundFile","type":"SoundFile"},"example":["\n<div><code>\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</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3672,"description":"<p>Returns true if the sound file finished loading successfully.</p>\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":3688,"description":"<p>Play the p5.SoundFile</p>\n","itemtype":"method","name":"play","params":[{"name":"startTime","description":"<p>(optional) schedule playback to start (in seconds from now).</p>\n","type":"Number","optional":true},{"name":"rate","description":"<p>(optional) playback rate</p>\n","type":"Number","optional":true},{"name":"amp","description":"<p>(optional) amplitude (volume)\n                                    of playback</p>\n","type":"Number","optional":true},{"name":"cueStart","description":"<p>(optional) cue start time in seconds</p>\n","type":"Number","optional":true},{"name":"duration","description":"<p>(optional) duration of playback in seconds</p>\n","type":"Number","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3795,"description":"<p>p5.SoundFile has two play modes: <code>restart</code> and\n<code>sustain</code>. 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.</p>\n","itemtype":"method","name":"playMode","params":[{"name":"str","description":"<p>'restart' or 'sustain' or 'untilDone'</p>\n","type":"String"}],"example":["\n<div><code>\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 </code></div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3854,"description":"<p>Pauses a file that is currently playing. If the file is not\nplaying, then nothing will happen.</p>\n<p>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().</p>\n","itemtype":"method","name":"pause","params":[{"name":"startTime","description":"<p>(optional) schedule event to occur\n                             seconds from now</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code>\n</div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3911,"description":"<p>Loop the p5.SoundFile. Accepts optional parameters to set the\nplayback rate, playback volume, loopStart, loopEnd.</p>\n","itemtype":"method","name":"loop","params":[{"name":"startTime","description":"<p>(optional) schedule event to occur\n                            seconds from now</p>\n","type":"Number","optional":true},{"name":"rate","description":"<p>(optional) playback rate</p>\n","type":"Number","optional":true},{"name":"amp","description":"<p>(optional) playback volume</p>\n","type":"Number","optional":true},{"name":"cueLoopStart","description":"<p>(optional) startTime in seconds</p>\n","type":"Number","optional":true},{"name":"duration","description":"<p>(optional) loop duration in seconds</p>\n","type":"Number","optional":true}],"example":["\n <div><code>\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 </code>\n </div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3955,"description":"<p>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.</p>\n","itemtype":"method","name":"setLoop","params":[{"name":"Boolean","description":"<p>set looping to true or false</p>\n","type":"Boolean"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":3980,"description":"<p>Returns 'true' if a p5.SoundFile is currently looping and playing, 'false' if not.</p>\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":4000,"description":"<p>Returns true if a p5.SoundFile is playing, false if not (i.e.\npaused or stopped).</p>\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":4013,"description":"<p>Returns true if a p5.SoundFile is paused, false if not (i.e.\nplaying or stopped).</p>\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":4026,"description":"<p>Stop soundfile playback.</p>\n","itemtype":"method","name":"stop","params":[{"name":"startTime","description":"<p>(optional) schedule event to occur\n                            in seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4083,"description":"<p>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 <code>rampTime</code> parameter. For more\ncomplex fades, see the Envelope class.</p>\n<p>Alternately, you can pass in a signal source such as an\noscillator to modulate the amplitude with an audio signal.</p>\n","itemtype":"method","name":"setVolume","params":[{"name":"volume","description":"<p>Volume (amplitude) between 0.0\n                                   and 1.0 or modulating signal/oscillator</p>\n","type":"Number|Object"},{"name":"rampTime","description":"<p>Fade for t seconds</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>Schedule this event to happen at\n                               t seconds in the future</p>\n","type":"Number","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4128,"description":"<p>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).</p>\n","itemtype":"method","name":"pan","params":[{"name":"panValue","description":"<p>Set the stereo panner</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                                seconds from now</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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 </div></code>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4171,"description":"<p>Returns the current stereo pan position (-1.0 to 1.0)</p>\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":4185,"description":"<p>Set the playback rate of a sound file. Will change the speed and the pitch.\nValues less than zero will reverse the audio buffer.</p>\n","itemtype":"method","name":"rate","params":[{"name":"playbackRate","description":"<p>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.</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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 </code>\n </div>\n"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4275,"description":"<p>Returns the duration of a sound file in seconds.</p>\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":4291,"description":"<p>Return the current position of the p5.SoundFile playhead, in seconds.\nTime is relative to the normal buffer direction, so if <code>reverseBuffer</code>\nhas been called, currentTime will count backwards.</p>\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":4305,"description":"<p>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 <code>play</code> or <code>loop</code> methods.</p>\n","itemtype":"method","name":"jump","params":[{"name":"cueTime","description":"<p>cueTime of the soundFile in seconds.</p>\n","type":"Number"},{"name":"duration","description":"<p>duration in seconds.</p>\n","type":"Number"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4336,"description":"<p>Return the number of channels in a sound file.\nFor example, Mono = 1, Stereo = 2.</p>\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":4349,"description":"<p>Return the sample rate of the sound file.</p>\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":4361,"description":"<p>Return the number of samples in a sound file.\nEqual to sampleRate * duration.</p>\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":4374,"description":"<p>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.</p>\n<p>Inspired by Wavesurfer.js.</p>\n","itemtype":"method","name":"getPeaks","params":[{"name":"length","description":"<p>length is the size of the returned array.\n                         Larger length results in more precision.\n                         Defaults to 5*width of the browser window.</p>\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":4435,"description":"<p>Reverses the p5.SoundFile's buffer source.\nPlayback must be handled separately (see example).</p>\n","itemtype":"method","name":"reverseBuffer","example":["\n<div><code>\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 </code>\n </div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4488,"description":"<p>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.</p>\n","itemtype":"method","name":"onended","params":[{"name":"callback","description":"<p>function to call when the\n                            soundfile has ended.</p>\n","type":"Function"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4553,"description":"<p>Connects the output of a p5sound object to input of another\np5.sound object. For example, you may connect a p5.SoundFile to an\nFFT or an Effect. If no parameter is given, it will connect to\nthe master output. Most p5sound objects connect to the master\noutput when they are created.</p>\n","itemtype":"method","name":"connect","params":[{"name":"object","description":"<p>Audio object that accepts an input</p>\n","type":"Object","optional":true}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4577,"description":"<p>Disconnects the output of this p5sound object.</p>\n","itemtype":"method","name":"disconnect","class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4590,"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4597,"description":"<p>Reset the source for this SoundFile to a\nnew path (URL).</p>\n","itemtype":"method","name":"setPath","params":[{"name":"path","description":"<p>path to audio file</p>\n","type":"String"},{"name":"callback","description":"<p>Callback</p>\n","type":"Function"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4614,"description":"<p>Replace the current Audio Buffer with a new Buffer.</p>\n","itemtype":"method","name":"setBuffer","params":[{"name":"buf","description":"<p>Array of Float32 Array(s). 2 Float32 Arrays\n                   will create a stereo source. 1 will create\n                   a mono source.</p>\n","type":"Array"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4708,"description":"<p>processPeaks returns an array of timestamps where it thinks there is a beat.</p>\n<p>This is an asynchronous function that processes the soundfile in an offline audio context,\nand sends the results to your callback function.</p>\n<p>The process involves running the soundfile through a lowpass filter, and finding all of the\npeaks above the initial threshold. If the total number of peaks are below the minimum number of peaks,\nit decreases the threshold and re-runs the analysis until either minPeaks or minThreshold are reached.</p>\n","itemtype":"method","name":"processPeaks","params":[{"name":"callback","description":"<p>a function to call once this data is returned</p>\n","type":"Function"},{"name":"initThreshold","description":"<p>initial threshold defaults to 0.9</p>\n","type":"Number","optional":true},{"name":"minThreshold","description":"<p>minimum threshold defaults to 0.22</p>\n","type":"Number","optional":true},{"name":"minPeaks","description":"<p>minimum number of peaks defaults to 200</p>\n","type":"Number","optional":true}],"return":{"description":"Array of timestamped peaks","type":"Array"},"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4929,"description":"<p>Schedule events to trigger every time a MediaElement\n(audio/video) reaches a playback cue point.</p>\n<p>Accepts a callback function, a time (in seconds) at which to trigger\nthe callback, and an optional parameter for the callback.</p>\n<p>Time will be passed as the first parameter to the callback function,\nand param will be the second parameter.</p>\n","itemtype":"method","name":"addCue","params":[{"name":"time","description":"<p>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.</p>\n","type":"Number"},{"name":"callback","description":"<p>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.</p>\n","type":"Function"},{"name":"value","description":"<p>An object to be passed as the\n                           second parameter to the\n                           callback function.</p>\n","type":"Object","optional":true}],"return":{"description":"id ID of this cue,\n                    useful for removeCue(id)","type":"Number"},"example":["\n<div><code>\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</code></div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":4999,"description":"<p>Remove a callback based on its ID. The ID is returned by the\naddCue method.</p>\n","itemtype":"method","name":"removeCue","params":[{"name":"id","description":"<p>ID of the cue, as returned by addCue</p>\n","type":"Number"}],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5025,"description":"<p>Remove all of the callbacks that had originally been scheduled\nvia the addCue method.</p>\n","itemtype":"method","name":"clearCues","class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5054,"description":"<p>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\n<a href=\"/docs/reference/#/p5.SoundFile/getBlob\">getBlob</a></p>\n","itemtype":"method","name":"save","params":[{"name":"fileName","description":"<p>name of the resulting .wav file.</p>\n","type":"String","optional":true}],"example":["\n <div><code>\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</code></div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5085,"description":"<p>This method is useful for sending a SoundFile to a server. It returns the\n.wav-encoded audio data as a \"<a target=\"_blank\" title=\"Blob reference at\nMDN\" href=\"https://developer.mozilla.org/en-US/docs/Web/API/Blob\">Blob</a>\".\nA Blob is a file-like data object that can be uploaded to a server\nwith an <a href=\"/docs/reference/#/p5/httpDo\">http</a> request. We'll\nuse the <code>httpDo</code> options object to send a POST request with some\nspecific options: we encode the request as <code>multipart/form-data</code>,\nand attach the blob as one of the form values using <code>FormData</code>.</p>\n","itemtype":"method","name":"getBlob","return":{"description":"A file-like data object","type":"Blob"},"example":["\n <div><code>\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 `<Audio>` Element accepts Object URL's\n   createAudio(blobUrl).showControls();\n\n   createDiv();\n\n   // The ObjectURL exists as long as this tab is open\n   let input = createInput(blobUrl);\n   input.attribute('readonly', true);\n   input.mouseClicked(function() { input.elt.select() });\n }\n\n</code></div>"],"class":"p5.SoundFile","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5276,"description":"<p>Connects to the p5sound instance (master output) by default.\nOptionally, you can pass in a specific source (i.e. a soundfile).</p>\n","itemtype":"method","name":"setInput","params":[{"name":"snd","description":"<p>set the sound source\n                                     (optional, defaults to\n                                     master output)</p>\n","type":"SoundObject|undefined","optional":true},{"name":"smoothing","description":"<p>a range between 0.0 and 1.0\n                                      to smooth amplitude readings</p>\n","type":"Number|undefined","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5367,"description":"<p>Returns a single Amplitude reading at the moment it is called.\nFor continuous readings, run in the draw loop.</p>\n","itemtype":"method","name":"getLevel","params":[{"name":"channel","description":"<p>Optionally return only channel 0 (left) or 1 (right)</p>\n","type":"Number","optional":true}],"return":{"description":"Amplitude as a number between 0.0 and 1.0","type":"Number"},"example":["\n<div><code>\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</code></div>"],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5421,"description":"<p>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.</p>\n","itemtype":"method","name":"toggleNormalize","params":[{"name":"boolean","description":"<p>set normalize to true (1) or false (0)</p>\n","type":"Boolean","optional":true}],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5449,"description":"<p>Smooth Amplitude analysis by averaging with the last analysis\nframe. Off by default.</p>\n","itemtype":"method","name":"smooth","params":[{"name":"set","description":"<p>smoothing from 0.0 <= 1</p>\n","type":"Number"}],"class":"p5.Amplitude","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5625,"description":"<p>Set the input source for the FFT analysis. If no source is\nprovided, FFT will analyze all sound in the sketch.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"source","description":"<p>p5.sound object (or web audio API source node)</p>\n","type":"Object","optional":true}],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5648,"description":"<p>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.</p>\n","itemtype":"method","name":"waveform","params":[{"name":"bins","description":"<p>Must be a power of two between\n                          16 and 1024. Defaults to 1024.</p>\n","type":"Number","optional":true},{"name":"precision","description":"<p>If any value is provided, will return results\n                            in a Float32 Array which is more precise\n                            than a regular array.</p>\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":5699,"description":"<p>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\n<code>getEnergy()</code>.</p>\n","itemtype":"method","name":"analyze","params":[{"name":"bins","description":"<p>Must be a power of two between\n                           16 and 1024. Defaults to 1024.</p>\n","type":"Number","optional":true},{"name":"scale","description":"<p>If \"dB,\" returns decibel\n                           float measurements between\n                           -140 and 0 (max).\n                           Otherwise returns integers from 0-255.</p>\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<div><code>\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</code></div>\n\n"],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5795,"description":"<p>Returns the amount of energy (volume) at a specific\n<a href=\"https://en.wikipedia.org/wiki/Audio_frequency\" target=\"_blank\">\nfrequency</a>, 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).\n<em>NOTE: analyze() must be called prior to getEnergy(). Analyze()\ntells the FFT to analyze frequency data, and getEnergy() uses\nthe results determine the value at a specific frequency or\nrange of frequencies.</em></p></p>\n","itemtype":"method","name":"getEnergy","params":[{"name":"frequency1","description":"<p>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.</p>\n","type":"Number|String"},{"name":"frequency2","description":"<p>If a second frequency is given,\n                              will return average amount of\n                              energy that exists between the\n                              two frequencies.</p>\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":5882,"description":"<p>Returns the\n<a href=\"http://en.wikipedia.org/wiki/Spectral_centroid\" target=\"_blank\">\nspectral centroid</a> of the input signal.\n<em>NOTE: analyze() must be called prior to getCentroid(). Analyze()\ntells the FFT to analyze frequency data, and getCentroid() uses\nthe results determine the spectral centroid.</em></p></p>\n","itemtype":"method","name":"getCentroid","return":{"description":"Spectral Centroid Frequency   Frequency of the spectral centroid in Hz.","type":"Number"},"example":["\n<div><code>\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 </code></div>"],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5968,"description":"<p>Smooth FFT analysis by averaging with the last analysis frame.</p>\n","itemtype":"method","name":"smooth","params":[{"name":"smoothing","description":"<p>0.0 < smoothing < 1.0.\n                             Defaults to 0.8.</p>\n","type":"Number"}],"class":"p5.FFT","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":5994,"description":"<p>Returns an array of average amplitude values for a given number\nof frequency bands split equally. N defaults to 16.\n<em>NOTE: 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.</em></p></p>\n","itemtype":"method","name":"linAverages","params":[{"name":"N","description":"<p>Number of returned frequency groups</p>\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":6028,"description":"<p>Returns an array of average amplitude values of the spectrum, for a given\nset of <a href=\"https://en.wikipedia.org/wiki/Octave_band\" target=\"_blank\">\nOctave Bands</a>\n<em>NOTE: 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.</em></p></p>\n","itemtype":"method","name":"logAverages","params":[{"name":"octaveBands","description":"<p>Array of Octave Bands objects for grouping</p>\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":6063,"description":"<p>Calculates and Returns the 1/N\n<a href=\"https://en.wikipedia.org/wiki/Octave_band\" target=\"_blank\">Octave Bands</a>\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.</p>\n","itemtype":"method","name":"getOctaveBands","params":[{"name":"N","description":"<p>Specifies the 1/N type of generated octave bands</p>\n","type":"Number"},{"name":"fCtr0","description":"<p>Minimum central frequency for the lowest band</p>\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":6209,"description":"<p>Fade to value, for smooth transitions</p>\n","itemtype":"method","name":"fade","params":[{"name":"value","description":"<p>Value to set this signal</p>\n","type":"Number"},{"name":"secondsFromNow","description":"<p>Length of fade, in seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6223,"description":"<p>Connect a p5.sound object or Web Audio node to this\np5.Signal so that its amplitude values can be scaled.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"input","description":"","type":"Object"}],"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6240,"description":"<p>Add a constant value to this audio signal,\nand return the resulting audio signal. Does\nnot change the value of the original signal,\ninstead it returns a new p5.SignalAdd.</p>\n","itemtype":"method","name":"add","params":[{"name":"number","description":"","type":"Number"}],"return":{"description":"object","type":"p5.Signal"},"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6262,"description":"<p>Multiply this signal by a constant value,\nand return the resulting audio signal. Does\nnot change the value of the original signal,\ninstead it returns a new p5.SignalMult.</p>\n","itemtype":"method","name":"mult","params":[{"name":"number","description":"<p>to multiply</p>\n","type":"Number"}],"return":{"description":"object","type":"p5.Signal"},"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6284,"description":"<p>Scale this signal value to a given range,\nand return the result as an audio signal. Does\nnot change the value of the original signal,\ninstead it returns a new p5.SignalScale.</p>\n","itemtype":"method","name":"scale","params":[{"name":"number","description":"<p>to multiply</p>\n","type":"Number"},{"name":"inMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"inMax","description":"<p>input range maximum</p>\n","type":"Number"},{"name":"outMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"outMax","description":"<p>input range maximum</p>\n","type":"Number"}],"return":{"description":"object","type":"p5.Signal"},"class":"p5.Signal","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6397,"description":"<p>Time until envelope reaches attackLevel</p>\n","itemtype":"property","name":"attackTime","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6402,"description":"<p>Level once attack is complete.</p>\n","itemtype":"property","name":"attackLevel","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6408,"description":"<p>Time until envelope reaches decayLevel.</p>\n","itemtype":"property","name":"decayTime","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6414,"description":"<p>Level after decay. The envelope will sustain here until it is released.</p>\n","itemtype":"property","name":"decayLevel","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6420,"description":"<p>Duration of the release portion of the envelope.</p>\n","itemtype":"property","name":"releaseTime","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6426,"description":"<p>Level at the end of the release.</p>\n","itemtype":"property","name":"releaseLevel","class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6463,"description":"<p>Reset the envelope with a series of time/value pairs.</p>\n","itemtype":"method","name":"set","params":[{"name":"attackTime","description":"<p>Time (in seconds) before level\n                               reaches attackLevel</p>\n","type":"Number"},{"name":"attackLevel","description":"<p>Typically an amplitude between\n                               0.0 and 1.0</p>\n","type":"Number"},{"name":"decayTime","description":"<p>Time</p>\n","type":"Number"},{"name":"decayLevel","description":"<p>Amplitude (In a standard ADSR envelope,\n                               decayLevel = sustainLevel)</p>\n","type":"Number"},{"name":"releaseTime","description":"<p>Release Time (in seconds)</p>\n","type":"Number"},{"name":"releaseLevel","description":"<p>Amplitude</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>\n"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6525,"description":"<p>Set values like a traditional\n<a href=\"https://en.wikipedia.org/wiki/Synthesizer#/media/File:ADSR_parameter.svg\">\nADSR envelope\n</a>.</p>\n","itemtype":"method","name":"setADSR","params":[{"name":"attackTime","description":"<p>Time (in seconds before envelope\n                              reaches Attack Level</p>\n","type":"Number"},{"name":"decayTime","description":"<p>Time (in seconds) before envelope\n                              reaches Decay/Sustain Level</p>\n","type":"Number","optional":true},{"name":"susRatio","description":"<p>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 <code>setRange</code>),\n                              then decayLevel would increase proportionally, to become 0.5.</p>\n","type":"Number","optional":true},{"name":"releaseTime","description":"<p>Time in seconds from now (defaults to 0)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6594,"description":"<p>Set max (attackLevel) and min (releaseLevel) of envelope.</p>\n","itemtype":"method","name":"setRange","params":[{"name":"aLevel","description":"<p>attack level (defaults to 1)</p>\n","type":"Number"},{"name":"rLevel","description":"<p>release level (defaults to 0)</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6667,"description":"<p>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.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"inputs","description":"<p>A p5.sound object or\n                              Web Audio Param.</p>\n","type":"Object","optional":true,"multiple":true}],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6685,"description":"<p>Set whether the envelope ramp is linear (default) or exponential.\nExponential ramps can be useful because we perceive amplitude\nand frequency logarithmically.</p>\n","itemtype":"method","name":"setExp","params":[{"name":"isExp","description":"<p>true is exponential, false is linear</p>\n","type":"Boolean"}],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6708,"description":"<p>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 <a href=\"\nhttp://docs.webplatform.org/wiki/apis/webaudio/AudioParam\">\nWeb Audio Audio Param.</a></p>","itemtype":"method","name":"play","params":[{"name":"unit","description":"<p>A p5.sound object or\n                              Web Audio Param.</p>\n","type":"Object"},{"name":"startTime","description":"<p>time from now (in seconds) at which to play</p>\n","type":"Number","optional":true},{"name":"sustainTime","description":"<p>time to sustain before releasing the envelope</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6779,"description":"<p>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 <a href=\"\nhttp://docs.webplatform.org/wiki/apis/webaudio/AudioParam\">\nWeb Audio Param</a>.</p>\n","itemtype":"method","name":"triggerAttack","params":[{"name":"unit","description":"<p>p5.sound Object or Web Audio Param</p>\n","type":"Object"},{"name":"secondsFromNow","description":"<p>time from now (in seconds)</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6887,"description":"<p>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.</p>\n","itemtype":"method","name":"triggerRelease","params":[{"name":"unit","description":"<p>p5.sound Object or Web Audio Param</p>\n","type":"Object"},{"name":"secondsFromNow","description":"<p>time to trigger the release</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":6981,"description":"<p>Exponentially ramp to a value using the first two\nvalues from <code><a href=\"#/p5.Envelope/setADSR\">setADSR(attackTime, decayTime)</a></code>\nas <a href=\"https://en.wikipedia.org/wiki/RC_time_constant\">\ntime constants</a> for simple exponential ramps.\nIf the value is higher than current value, it uses attackTime,\nwhile a decrease uses decayTime.</p>\n","itemtype":"method","name":"ramp","params":[{"name":"unit","description":"<p>p5.sound Object or Web Audio Param</p>\n","type":"Object"},{"name":"secondsFromNow","description":"<p>When to trigger the ramp</p>\n","type":"Number"},{"name":"v","description":"<p>Target value</p>\n","type":"Number"},{"name":"v2","description":"<p>Second target value (optional)</p>\n","type":"Number","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.Envelope","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7095,"description":"<p>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.</p>\n","itemtype":"method","name":"add","params":[{"name":"number","description":"<p>Constant number to add</p>\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":7114,"description":"<p>Multiply the p5.Envelope's output amplitude\nby a fixed value. Calling this method\nagain will override the initial mult() with new values.</p>\n","itemtype":"method","name":"mult","params":[{"name":"number","description":"<p>Constant number to multiply</p>\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":7133,"description":"<p>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.</p>\n","itemtype":"method","name":"scale","params":[{"name":"inMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"inMax","description":"<p>input range maximum</p>\n","type":"Number"},{"name":"outMin","description":"<p>input range minumum</p>\n","type":"Number"},{"name":"outMax","description":"<p>input range maximum</p>\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":7268,"description":"<p>Set the width of a Pulse object (an oscillator that implements\nPulse Width Modulation).</p>\n","itemtype":"method","name":"width","params":[{"name":"width","description":"<p>Width between the pulses (0 to 1.0,\n                       defaults to 0)</p>\n","type":"Number","optional":true}],"class":"p5.Pulse","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7484,"description":"<p>Set type of noise to 'white', 'pink' or 'brown'.\nWhite is the default.</p>\n","itemtype":"method","name":"setType","params":[{"name":"type","description":"<p>'white', 'pink' or 'brown'</p>\n","type":"String","optional":true}],"class":"p5.Noise","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7630,"itemtype":"property","name":"input","type":"GainNode","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7634,"itemtype":"property","name":"output","type":"GainNode","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7639,"itemtype":"property","name":"stream","type":"MediaStream|null","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7644,"itemtype":"property","name":"mediaStream","type":"MediaStreamAudioSourceNode|null","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7649,"itemtype":"property","name":"currentSource","type":"Number|null","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7654,"description":"<p>Client must allow browser to access their microphone / audioin source.\nDefault: false. Will become true when the client enables access.</p>\n","itemtype":"property","name":"enabled","type":"Boolean","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7662,"description":"<p>Input amplitude, connect to it by default but not to master out</p>\n","itemtype":"property","name":"amplitude","type":"p5.Amplitude","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7678,"description":"<p>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.<br/></p>\n<p>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.</p>\n","itemtype":"method","name":"start","params":[{"name":"successCallback","description":"<p>Name of a function to call on\n                                  success.</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>Name of a function to call if\n                                  there was an error. For example,\n                                  some browsers do not support\n                                  getUserMedia.</p>\n","type":"Function","optional":true}],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7733,"description":"<p>Turn the AudioIn off. If the AudioIn is stopped, it cannot getLevel().\nIf re-starting, the user may be prompted for permission access.</p>\n","itemtype":"method","name":"stop","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7752,"description":"<p>Connect to an audio unit. If no parameter is provided, will\nconnect to the master output (i.e. your speakers).<br/></p>\n","itemtype":"method","name":"connect","params":[{"name":"unit","description":"<p>An object that accepts audio input,\n                        such as an FFT</p>\n","type":"Object","optional":true}],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7776,"description":"<p>Disconnect the AudioIn from all audio units. For example, if\nconnect() had been called, disconnect() will stop sending\nsignal to your speakers.<br/></p>\n","itemtype":"method","name":"disconnect","class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7793,"description":"<p>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). <em>NOTE: AudioIn must\n.start() before using .getLevel().</em><br/></p>\n","itemtype":"method","name":"getLevel","params":[{"name":"smoothing","description":"<p>Smoothing is 0.0 by default.\n                             Smooths values based on previous values.</p>\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":7815,"description":"<p>Set amplitude (volume) of a mic input between 0 and 1.0. <br/></p>\n","itemtype":"method","name":"amp","params":[{"name":"vol","description":"<p>between 0 and 1.0</p>\n","type":"Number"},{"name":"time","description":"<p>ramp time (optional)</p>\n","type":"Number","optional":true}],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7837,"description":"<p>Returns a list of available input sources. This is a wrapper\nfor <a title=\"MediaDevices.enumerateDevices() - Web APIs | MDN\" target=\"_blank\" href=\n \"<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\"\">https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\"</a></p>\n<blockquote>\n<p>and it returns a Promise.</p>\n</blockquote>\n","itemtype":"method","name":"getSources","params":[{"name":"successCallback","description":"<p>This callback function handles the sources when they\n                                     have been enumerated. The callback function\n                                     receives the deviceList array as its only argument</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>This optional callback receives the error\n                                   message as its argument.</p>\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 <div><code>\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 </code></div>"],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":7896,"description":"<p>Set the input source. Accepts a number representing a\nposition in the array returned by getSources().\nThis is only available in browsers that support\n<a title=\"MediaDevices.enumerateDevices() - Web APIs | MDN\" target=\"_blank\" href=\n\"<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\"\">https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\"</a></p>\n<blockquote>\n<p>navigator.mediaDevices.enumerateDevices()</a>.<br/></p>\n</blockquote>\n","itemtype":"method","name":"setSource","params":[{"name":"num","description":"<p>position of input source in the array</p>\n","type":"Number"}],"example":["\n<div><code>\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</code></div>"],"class":"p5.AudioIn","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8107,"description":"<p>The p5.EQ is built with abstracted p5.Filter objects.\nTo modify any bands, use methods of the <a\nhref=\"/reference/#/p5.Filter\" title=\"p5.Filter reference\">\np5.Filter</a> API, especially <code>gain</code> and <code>freq</code>.\nBands are stored in an array, with indices 0 - 3, or 0 - 7</p>\n","itemtype":"property","name":"bands","type":"Array","class":"p5.EQ","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8148,"description":"<p>Process an input by connecting it to the EQ</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>Audio source</p>\n","type":"Object"}],"class":"p5.EQ","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8321,"description":"<p><a title=\"Web Audio Panner docs\"  href=\n\"https://developer.mozilla.org/en-US/docs/Web/API/PannerNode\">\nWeb Audio Spatial Panner Node</a></p>\n<p>Properties include</p>\n<ul>\n<li><a title=\"w3 spec for Panning Model\"\nhref=\"<a href=\"https://www.w3.org/TR/webaudio/#idl-def-PanningModelType\"\">https://www.w3.org/TR/webaudio/#idl-def-PanningModelType\"</a><blockquote>\n<p>panningModel</a>: \"equal power\" or \"HRTF\"</p>\n</blockquote>\n</li>\n<li><a title=\"w3 spec for Distance Model\"\nhref=\"<a href=\"https://www.w3.org/TR/webaudio/#idl-def-DistanceModelType\"\">https://www.w3.org/TR/webaudio/#idl-def-DistanceModelType\"</a><blockquote>\n<p>distanceModel</a>: \"linear\", \"inverse\", or \"exponential\"</p>\n</blockquote>\n</li>\n</ul>\n","itemtype":"property","name":"panner","type":"AudioNode","class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8346,"description":"<p>Connect an audio sorce</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>Input source</p>\n","type":"Object"}],"class":"p5.Panner3D","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8357,"description":"<p>Set the X,Y,Z position of the Panner</p>\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":8375,"description":"<p>Getter and setter methods for position coordinates</p>\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":8382,"description":"<p>Getter and setter methods for position coordinates</p>\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":8389,"description":"<p>Getter and setter methods for position coordinates</p>\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":8438,"description":"<p>Set the X,Y,Z position of the Panner</p>\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":8456,"description":"<p>Getter and setter methods for orient coordinates</p>\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":8463,"description":"<p>Getter and setter methods for orient coordinates</p>\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":8470,"description":"<p>Getter and setter methods for orient coordinates</p>\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":8519,"description":"<p>Set the rolloff factor and max distance</p>\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":8532,"description":"<p>Maxium distance between the source and the listener</p>\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":8548,"description":"<p>How quickly the volume is reduced as the source moves away from the listener</p>\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":8885,"description":"<p>The p5.Delay is built with two\n<a href=\"http://www.w3.org/TR/webaudio/#DelayNode\">\nWeb Audio Delay Nodes</a>, one for each stereo channel.</p>\n","itemtype":"property","name":"leftDelay","type":"DelayNode","class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8895,"description":"<p>The p5.Delay is built with two\n<a href=\"http://www.w3.org/TR/webaudio/#DelayNode\">\nWeb Audio Delay Nodes</a>, one for each stereo channel.</p>\n","itemtype":"property","name":"rightDelay","type":"DelayNode","class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8942,"description":"<p>Add delay to an audio signal according to a set\nof delay parameters.</p>\n","itemtype":"method","name":"process","params":[{"name":"Signal","description":"<p>An object that outputs audio</p>\n","type":"Object"},{"name":"delayTime","description":"<p>Time (in seconds) of the delay/echo.\n                             Some browsers limit delayTime to\n                             1 second.</p>\n","type":"Number","optional":true},{"name":"feedback","description":"<p>sends the delay back through itself\n                             in a loop that decreases in volume\n                             each time.</p>\n","type":"Number","optional":true},{"name":"lowPass","description":"<p>Cutoff frequency. Only frequencies\n                             below the lowPass will be part of the\n                             delay.</p>\n","type":"Number","optional":true}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":8984,"description":"<p>Set the delay (echo) time, in seconds. Usually this value will be\na floating point number between 0.0 and 1.0.</p>\n","itemtype":"method","name":"delayTime","params":[{"name":"delayTime","description":"<p>Time (in seconds) of the delay</p>\n","type":"Number"}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9005,"description":"<p>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</p>\n","itemtype":"method","name":"feedback","params":[{"name":"feedback","description":"<p>0.0 to 1.0, or an object such as an\n                                Oscillator that can be used to\n                                modulate this param</p>\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":9036,"description":"<p>Set a lowpass filter frequency for the delay. A lowpass filter\nwill cut off any frequencies higher than the filter frequency.</p>\n","itemtype":"method","name":"filter","params":[{"name":"cutoffFreq","description":"<p>A lowpass filter will cut off any\n                            frequencies higher than the filter frequency.</p>\n","type":"Number|Object"},{"name":"res","description":"<p>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.</p>\n","type":"Number|Object"}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9057,"description":"<p>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.</p>\n","itemtype":"method","name":"setType","params":[{"name":"type","description":"<p>'pingPong' (1) or 'default' (0)</p>\n","type":"String|Number"}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9109,"description":"<p>Set the output level of the delay effect.</p>\n","itemtype":"method","name":"amp","params":[{"name":"volume","description":"<p>amplitude between 0 and 1.0</p>\n","type":"Number"},{"name":"rampTime","description":"<p>create a fade that lasts rampTime</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9120,"description":"<p>Send output to a p5.sound or web audio object</p>\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":9128,"description":"<p>Disconnect all output.</p>\n","itemtype":"method","name":"disconnect","class":"p5.Delay","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9265,"description":"<p>Connect a source to the reverb, and assign reverb parameters.</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>p5.sound / Web Audio object with a sound\n                         output.</p>\n","type":"Object"},{"name":"seconds","description":"<p>Duration of the reverb, in seconds.\n                         Min: 0, Max: 10. Defaults to 3.</p>\n","type":"Number","optional":true},{"name":"decayRate","description":"<p>Percentage of decay with each echo.\n                          Min: 0, Max: 100. Defaults to 2.</p>\n","type":"Number","optional":true},{"name":"reverse","description":"<p>Play the reverb backwards or forwards.</p>\n","type":"Boolean","optional":true}],"class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9301,"description":"<p>Set the reverb settings. Similar to .process(), but without\nassigning a new input.</p>\n","itemtype":"method","name":"set","params":[{"name":"seconds","description":"<p>Duration of the reverb, in seconds.\n                         Min: 0, Max: 10. Defaults to 3.</p>\n","type":"Number","optional":true},{"name":"decayRate","description":"<p>Percentage of decay with each echo.\n                          Min: 0, Max: 100. Defaults to 2.</p>\n","type":"Number","optional":true},{"name":"reverse","description":"<p>Play the reverb backwards or forwards.</p>\n","type":"Boolean","optional":true}],"class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9336,"description":"<p>Set the output level of the reverb effect.</p>\n","itemtype":"method","name":"amp","params":[{"name":"volume","description":"<p>amplitude between 0 and 1.0</p>\n","type":"Number"},{"name":"rampTime","description":"<p>create a fade that lasts rampTime</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9347,"description":"<p>Send output to a p5.sound or web audio object</p>\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":9355,"description":"<p>Disconnect all output.</p>\n","itemtype":"method","name":"disconnect","class":"p5.Reverb","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9461,"description":"<p>Internally, the p5.Convolver uses the a\n<a href=\"http://www.w3.org/TR/webaudio/#ConvolverNode\">\nWeb Audio Convolver Node</a>.</p>\n","itemtype":"property","name":"convolverNode","type":"ConvolverNode","class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9489,"description":"<p>Create a p5.Convolver. Accepts a path to a soundfile\nthat will be used to generate an impulse response.</p>\n","itemtype":"method","name":"createConvolver","params":[{"name":"path","description":"<p>path to a sound file</p>\n","type":"String"},{"name":"callback","description":"<p>function to call if loading is successful.\n                              The object will be passed in as the argument\n                              to the callback function.</p>\n","type":"Function","optional":true},{"name":"errorCallback","description":"<p>function to call if loading is not successful.\n                              A custom error will be passed in as the argument\n                              to the callback function.</p>\n","type":"Function","optional":true}],"return":{"description":"","type":"p5.Convolver"},"example":["\n<div><code>\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 master output...\n  sound.disconnect();\n\n  // ...and process with cVerb\n  // so that we only hear the convolution\n  cVerb.process(sound);\n}\n\nfunction playSound() {\n  sound.play();\n}\n</code></div>"],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9635,"description":"<p>Connect a source to the convolver.</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>p5.sound / Web Audio object with a sound\n                         output.</p>\n","type":"Object"}],"example":["\n<div><code>\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 master output...\n  sound.disconnect();\n\n  // ...and process with cVerb\n  // so that we only hear the convolution\n  cVerb.process(sound);\n}\n\nfunction playSound() {\n  sound.play();\n}\n\n</code></div>"],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9682,"description":"<p>If you load multiple impulse files using the .addImpulse method,\nthey will be stored as Objects in this Array. Toggle between them\nwith the <code>toggleImpulse(id)</code> method.</p>\n","itemtype":"property","name":"impulses","type":"Array","class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9693,"description":"<p>Load and assign a new Impulse Response to the p5.Convolver.\nThe impulse is added to the <code>.impulses</code> array. Previous\nimpulses can be accessed with the <code>.toggleImpulse(id)</code>\nmethod.</p>\n","itemtype":"method","name":"addImpulse","params":[{"name":"path","description":"<p>path to a sound file</p>\n","type":"String"},{"name":"callback","description":"<p>function (optional)</p>\n","type":"Function"},{"name":"errorCallback","description":"<p>function (optional)</p>\n","type":"Function"}],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9713,"description":"<p>Similar to .addImpulse, except that the <code>.impulses</code>\nArray is reset to save memory. A new <code>.impulses</code>\narray is created with this impulse as the only item.</p>\n","itemtype":"method","name":"resetImpulse","params":[{"name":"path","description":"<p>path to a sound file</p>\n","type":"String"},{"name":"callback","description":"<p>function (optional)</p>\n","type":"Function"},{"name":"errorCallback","description":"<p>function (optional)</p>\n","type":"Function"}],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9735,"description":"<p>If you have used <code>.addImpulse()</code> to add multiple impulses\nto a p5.Convolver, then you can use this method to toggle between\nthe items in the <code>.impulses</code> 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 <code>.impulses\n</code> Array (Number).<br/>\nYou can access the objects in the .impulses Array directly. Each\nObject has two attributes: an <code>.audioBuffer</code> (type:\nWeb Audio <a href=\"\nhttp://webaudio.github.io/web-audio-api/#the-audiobuffer-interface\">\nAudioBuffer)</a> and a <code>.name</code>, a String that corresponds\nwith the original filename.</p>\n","itemtype":"method","name":"toggleImpulse","params":[{"name":"id","description":"<p>Identify the impulse by its original filename\n                          (String), or by its position in the\n                          <code>.impulses</code> Array (Number).</p>\n","type":"String|Number"}],"class":"p5.Convolver","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9903,"description":"<p>Set the global tempo, in beats per minute, for all\np5.Parts. This method will impact all active p5.Parts.</p>\n","itemtype":"method","name":"setBPM","params":[{"name":"BPM","description":"<p>Beats Per Minute</p>\n","type":"Number"},{"name":"rampTime","description":"<p>Seconds from now</p>\n","type":"Number"}],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":9990,"description":"<p>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.</p>\n","itemtype":"property","name":"sequence","type":"Array","class":"p5.Phrase","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10076,"description":"<p>Set the tempo of this part, in Beats Per Minute.</p>\n","itemtype":"method","name":"setBPM","params":[{"name":"BPM","description":"<p>Beats Per Minute</p>\n","type":"Number"},{"name":"rampTime","description":"<p>Seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10089,"description":"<p>Returns the tempo, in Beats Per Minute, of this part.</p>\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":10101,"description":"<p>Start playback of this part. It will play\nthrough all of its phrases at a speed\ndetermined by setBPM.</p>\n","itemtype":"method","name":"start","params":[{"name":"time","description":"<p>seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10120,"description":"<p>Loop playback of this part. It will begin\nlooping through all of its phrases at a speed\ndetermined by setBPM.</p>\n","itemtype":"method","name":"loop","params":[{"name":"time","description":"<p>seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10141,"description":"<p>Tell the part to stop looping.</p>\n","itemtype":"method","name":"noLoop","class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10156,"description":"<p>Stop the part and cue it to step 0. Playback will resume from the begining of the Part when it is played again.</p>\n","itemtype":"method","name":"stop","params":[{"name":"time","description":"<p>seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10169,"description":"<p>Pause the part. Playback will resume\nfrom the current step.</p>\n","itemtype":"method","name":"pause","params":[{"name":"time","description":"<p>seconds from now</p>\n","type":"Number"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10184,"description":"<p>Add a p5.Phrase to this Part.</p>\n","itemtype":"method","name":"addPhrase","params":[{"name":"phrase","description":"<p>reference to a p5.Phrase</p>\n","type":"p5.Phrase"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10210,"description":"<p>Remove a phrase from this part, based on the name it was\ngiven when it was created.</p>\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":10227,"description":"<p>Get a phrase from this part, based on the name it was\ngiven when it was created. Now you can modify its array.</p>\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":10244,"description":"<p>Find all sequences with the specified name, and replace their patterns with the specified array.</p>\n","itemtype":"method","name":"replaceSequence","params":[{"name":"phraseName","description":"","type":"String"},{"name":"sequence","description":"<p>Array of values to pass into the callback\n                          at each step of the phrase.</p>\n","type":"Array"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10273,"description":"<p>Set the function that will be called at every step. This will clear the previous function.</p>\n","itemtype":"method","name":"onStep","params":[{"name":"callback","description":"<p>The name of the callback\n                            you want to fire\n                            on every beat/tatum.</p>\n","type":"Function"}],"class":"p5.Part","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10332,"description":"<p>Start playback of the score.</p>\n","itemtype":"method","name":"start","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10344,"description":"<p>Stop playback of the score.</p>\n","itemtype":"method","name":"stop","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10357,"description":"<p>Pause playback of the score.</p>\n","itemtype":"method","name":"pause","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10368,"description":"<p>Loop playback of the score.</p>\n","itemtype":"method","name":"loop","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10380,"description":"<p>Stop looping playback of the score. If it\nis currently playing, this will go into effect\nafter the current round of playback completes.</p>\n","itemtype":"method","name":"noLoop","class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10411,"description":"<p>Set the tempo for all parts in the score</p>\n","itemtype":"method","name":"setBPM","params":[{"name":"BPM","description":"<p>Beats Per Minute</p>\n","type":"Number"},{"name":"rampTime","description":"<p>Seconds from now</p>\n","type":"Number"}],"class":"p5.Score","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10508,"description":"<p>musicalTimeMode uses <a href = \"https://github.com/Tonejs/Tone.js/wiki/Time\">Tone.Time</a> convention\ntrue if string, false if number</p>\n","itemtype":"property","name":"musicalTimeMode","type":"Boolean","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10516,"description":"<p>musicalTimeMode variables\nmodify these only when the interval is specified in musicalTime format as a string</p>\n","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10524,"description":"<p>Set a limit to the number of loops to play. defaults to Infinity</p>\n","itemtype":"property","name":"maxIterations","type":"Number","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10534,"description":"<p>Do not initiate the callback if timeFromNow is < 0\nThis ususually occurs for a few milliseconds when the page\nis not fully loaded</p>\n<p>The callback should only be called until maxIterations is reached</p>\n","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10549,"description":"<p>Start the loop</p>\n","itemtype":"method","name":"start","params":[{"name":"timeFromNow","description":"<p>schedule a starting time</p>\n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10566,"description":"<p>Stop the loop</p>\n","itemtype":"method","name":"stop","params":[{"name":"timeFromNow","description":"<p>schedule a stopping time</p>\n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10583,"description":"<p>Pause the loop</p>\n","itemtype":"method","name":"pause","params":[{"name":"timeFromNow","description":"<p>schedule a pausing time</p>\n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10600,"description":"<p>Synchronize loops. Use this method to start two more more loops in synchronization\nor to start a loop in synchronization with a loop that is already playing\nThis method will schedule the implicit loop in sync with the explicit master loop\ni.e. loopToStart.syncedStart(loopToSyncWith)</p>\n","itemtype":"method","name":"syncedStart","params":[{"name":"otherLoop","description":"<p>a p5.SoundLoop to sync with</p>\n","type":"Object"},{"name":"timeFromNow","description":"<p>Start the loops in sync after timeFromNow seconds</p>\n","type":"Number","optional":true}],"class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10705,"description":"<p>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)</p>\n","itemtype":"property","name":"bpm","type":"Number","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10728,"description":"<p>number of quarter notes in a measure (defaults to 4)</p>\n","itemtype":"property","name":"timeSignature","type":"Number","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10748,"description":"<p>length of the loops interval</p>\n","itemtype":"property","name":"interval","type":"Number|String","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10765,"description":"<p>how many times the callback has been called so far</p>\n","itemtype":"property","name":"iterations","type":"Number","readonly":"","class":"p5.SoundLoop","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10817,"description":"<p>The p5.Compressor is built with a <a href=\"https://www.w3.org/TR/webaudio/#the-dynamicscompressornode-interface\"\n  target=\"_blank\" title=\"W3 spec for Dynamics Compressor Node\">Web Audio Dynamics Compressor Node\n  </a></p>\n","itemtype":"property","name":"compressor","type":"AudioNode","class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10830,"description":"<p>Performs the same function as .connect, but also accepts\noptional parameters to set compressor's audioParams</p>\n","itemtype":"method","name":"process","params":[{"name":"src","description":"<p>Sound source to be connected</p>\n","type":"Object"},{"name":"attack","description":"<p>The amount of time (in seconds) to reduce the gain by 10dB,\n                           default = .003, range 0 - 1</p>\n","type":"Number","optional":true},{"name":"knee","description":"<p>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</p>\n","type":"Number","optional":true},{"name":"ratio","description":"<p>The amount of dB change in input for a 1 dB change in output\n                           default = 12, range 1 - 20</p>\n","type":"Number","optional":true},{"name":"threshold","description":"<p>The decibel value above which the compression will start taking effect\n                           default = -24, range -100 - 0</p>\n","type":"Number","optional":true},{"name":"release","description":"<p>The amount of time (in seconds) to increase the gain by 10dB\n                           default = .25, range 0 - 1</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10855,"description":"<p>Set the paramters of a compressor.</p>\n","itemtype":"method","name":"set","params":[{"name":"attack","description":"<p>The amount of time (in seconds) to reduce the gain by 10dB,\n                           default = .003, range 0 - 1</p>\n","type":"Number"},{"name":"knee","description":"<p>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</p>\n","type":"Number"},{"name":"ratio","description":"<p>The amount of dB change in input for a 1 dB change in output\n                           default = 12, range 1 - 20</p>\n","type":"Number"},{"name":"threshold","description":"<p>The decibel value above which the compression will start taking effect\n                           default = -24, range -100 - 0</p>\n","type":"Number"},{"name":"release","description":"<p>The amount of time (in seconds) to increase the gain by 10dB\n                           default = .25, range 0 - 1</p>\n","type":"Number"}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10894,"description":"<p>Get current attack or set value w/ time ramp</p>\n","itemtype":"method","name":"attack","params":[{"name":"attack","description":"<p>Attack is the amount of time (in seconds) to reduce the gain by 10dB,\n                         default = .003, range 0 - 1</p>\n","type":"Number","optional":true},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10919,"description":"<p>Get current knee or set value w/ time ramp</p>\n","itemtype":"method","name":"knee","params":[{"name":"knee","description":"<p>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</p>\n","type":"Number","optional":true},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10944,"description":"<p>Get current ratio or set value w/ time ramp</p>\n","itemtype":"method","name":"ratio","params":[{"name":"ratio","description":"<p>The amount of dB change in input for a 1 dB change in output\n                           default = 12, range 1 - 20</p>\n","type":"Number","optional":true},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10967,"description":"<p>Get current threshold or set value w/ time ramp</p>\n","itemtype":"method","name":"threshold","params":[{"name":"threshold","description":"<p>The decibel value above which the compression will start taking effect\n                           default = -24, range -100 - 0</p>\n","type":"Number"},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":10990,"description":"<p>Get current release or set value w/ time ramp</p>\n","itemtype":"method","name":"release","params":[{"name":"release","description":"<p>The amount of time (in seconds) to increase the gain by 10dB\n                           default = .25, range 0 - 1</p>\n","type":"Number"},{"name":"time","description":"<p>Assign time value to schedule the change in value</p>\n","type":"Number","optional":true}],"class":"p5.Compressor","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11014,"description":"<p>Return the current reduction value</p>\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":11169,"description":"<p>Connect a specific device to the p5.SoundRecorder.\nIf no parameter is given, p5.SoundRecorer will record\nall audible p5.sound from your sketch.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"unit","description":"<p>p5.sound object or a web audio unit\n                       that outputs sound</p>\n","type":"Object","optional":true}],"class":"p5.SoundRecorder","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11194,"description":"<p>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.</p>\n","itemtype":"method","name":"record","params":[{"name":"soundFile","description":"<p>p5.SoundFile</p>\n","type":"p5.SoundFile"},{"name":"duration","description":"<p>Time (in seconds)</p>\n","type":"Number","optional":true},{"name":"callback","description":"<p>The name of a function that will be\n                              called once the recording completes</p>\n","type":"Function","optional":true}],"class":"p5.SoundRecorder","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11229,"description":"<p>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.</p>\n","itemtype":"method","name":"stop","class":"p5.SoundRecorder","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11259,"description":"<p>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\n<a href=\"/docs/reference/#/p5.SoundFile/saveBlob\"><code>p5.SoundFile.saveBlob</code></a>.</p>\n","itemtype":"method","name":"saveSound","params":[{"name":"soundFile","description":"<p>p5.SoundFile that you wish to save</p>\n","type":"p5.SoundFile"},{"name":"fileName","description":"<p>name of the resulting .wav file.</p>\n","type":"String"}],"class":"p5","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11389,"description":"<p>isDetected is set to true when a peak is detected.</p>\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":11402,"description":"<p>The update method is run in the draw loop.</p>\n<p>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.</p>\n","itemtype":"method","name":"update","params":[{"name":"fftObject","description":"<p>A p5.FFT object</p>\n","type":"p5.FFT"}],"class":"p5.PeakDetect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11438,"description":"<p>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.</p>\n","itemtype":"method","name":"onPeak","params":[{"name":"callback","description":"<p>Name of a function that will\n                            be called when a peak is\n                            detected.</p>\n","type":"Function"},{"name":"val","description":"<p>Optional value to pass\n                            into the function when\n                            a peak is detected.</p>\n","type":"Object","optional":true}],"example":["\n<div><code>\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</code></div>"],"class":"p5.PeakDetect","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11600,"description":"<p>Connect a source to the gain node.</p>\n","itemtype":"method","name":"setInput","params":[{"name":"src","description":"<p>p5.sound / Web Audio object with a sound\n                         output.</p>\n","type":"Object"}],"class":"p5.Gain","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11613,"description":"<p>Send output to a p5.sound or web audio object</p>\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":11626,"description":"<p>Disconnect all output.</p>\n","itemtype":"method","name":"disconnect","class":"p5.Gain","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11639,"description":"<p>Set the output level of the gain node.</p>\n","itemtype":"method","name":"amp","params":[{"name":"volume","description":"<p>amplitude between 0 and 1.0</p>\n","type":"Number"},{"name":"rampTime","description":"<p>create a fade that lasts rampTime</p>\n","type":"Number","optional":true},{"name":"timeFromNow","description":"<p>schedule this event to happen\n                              seconds from now</p>\n","type":"Number","optional":true}],"class":"p5.Gain","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11743,"description":"<p>The p5.Distortion is built with a\n<a href=\"http://www.w3.org/TR/webaudio/#WaveShaperNode\">\nWeb Audio WaveShaper Node</a>.</p>\n","itemtype":"property","name":"WaveShaperNode","type":"AudioNode","class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11760,"description":"<p>Process a sound source, optionally specify amount and oversample values.</p>\n","itemtype":"method","name":"process","params":[{"name":"amount","description":"<p>Unbounded distortion amount.\n                               Normal values range from 0-1.</p>\n","type":"Number","optional":true,"optdefault":"0.25"},{"name":"oversample","description":"<p>'none', '2x', or '4x'.</p>\n","type":"String","optional":true,"optdefault":"'none'"}],"class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11774,"description":"<p>Set the amount and oversample of the waveshaper distortion.</p>\n","itemtype":"method","name":"set","params":[{"name":"amount","description":"<p>Unbounded distortion amount.\n                               Normal values range from 0-1.</p>\n","type":"Number","optional":true,"optdefault":"0.25"},{"name":"oversample","description":"<p>'none', '2x', or '4x'.</p>\n","type":"String","optional":true,"optdefault":"'none'"}],"class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"},{"file":"lib/addons/p5.sound.js","line":11796,"description":"<p>Return the distortion amount, typically between 0-1.</p>\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":11809,"description":"<p>Return the oversampling.</p>\n","itemtype":"method","name":"getOversample","return":{"description":"Oversample can either be 'none', '2x', or '4x'.","type":"String"},"class":"p5.Distortion","module":"p5.sound","submodule":"p5.sound"}],"warnings":[{"message":"unknown tag: alt","line":" src/color/creating_reading.js:16"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:45"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:72"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:116"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:297"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:326"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:361"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:452"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:482"},{"message":"unknown tag: alt","line":" src/color/creating_reading.js:522"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:51"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:249"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:278"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:302"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:326"},{"message":"unknown tag: alt","line":" src/color/p5.Color.js:751"},{"message":"unknown tag: alt","line":" src/color/setting.js:13"},{"message":"unknown tag: alt","line":" src/color/setting.js:180"},{"message":"unknown tag: alt","line":" src/color/setting.js:214"},{"message":"unknown tag: alt","line":" src/color/setting.js:333"},{"message":"unknown tag: alt","line":" src/color/setting.js:492"},{"message":"unknown tag: alt","line":" src/color/setting.js:533"},{"message":"unknown tag: alt","line":" src/color/setting.js:573"},{"message":"unknown tag: alt","line":" src/color/setting.js:745"},{"message":"unknown tag: alt","line":" src/color/setting.js:825"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:102"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:218"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:258"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:317"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:373"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:447"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:512"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:578"},{"message":"unknown tag: alt","line":" src/core/shape/2d_primitives.js:662"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:12"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:81"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:115"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:184"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:219"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:259"},{"message":"unknown tag: alt","line":" src/core/shape/attributes.js:331"},{"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:130"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:185"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:264"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:358"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:398"},{"message":"unknown tag: alt","line":" src/core/shape/curves.js:493"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:20"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:67"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:267"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:389"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:434"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:498"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:557"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:642"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:707"},{"message":"unknown tag: alt","line":" src/core/shape/vertex.js:800"},{"message":"unknown tag: alt","line":" src/core/constants.js:58"},{"message":"unknown tag: alt","line":" src/core/constants.js:76"},{"message":"unknown tag: alt","line":" src/core/constants.js:94"},{"message":"unknown tag: alt","line":" src/core/constants.js:112"},{"message":"unknown tag: alt","line":" src/core/constants.js:130"},{"message":"unknown tag: alt","line":" src/core/environment.js:20"},{"message":"unknown tag: alt","line":" src/core/environment.js:52"},{"message":"unknown tag: alt","line":" src/core/environment.js:79"},{"message":"unknown tag: alt","line":" src/core/environment.js:129"},{"message":"unknown tag: alt","line":" src/core/environment.js:160"},{"message":"unknown tag: alt","line":" src/core/environment.js:228"},{"message":"unknown tag: alt","line":" src/core/environment.js:331"},{"message":"unknown tag: alt","line":" src/core/environment.js:354"},{"message":"unknown tag: alt","line":" src/core/environment.js:372"},{"message":"unknown tag: alt","line":" src/core/environment.js:390"},{"message":"unknown tag: alt","line":" src/core/environment.js:405"},{"message":"unknown tag: alt","line":" src/core/environment.js:421"},{"message":"unknown tag: alt","line":" src/core/environment.js:499"},{"message":"unknown tag: alt","line":" src/core/environment.js:549"},{"message":"replacing incorrect tag: returns with return","line":" src/core/environment.js:585"},{"message":"replacing incorrect tag: returns with return","line":" src/core/environment.js:604"},{"message":"unknown tag: alt","line":" src/core/environment.js:604"},{"message":"unknown tag: alt","line":" src/core/environment.js:659"},{"message":"unknown tag: alt","line":" src/core/environment.js:687"},{"message":"unknown tag: alt","line":" src/core/environment.js:706"},{"message":"replacing incorrect tag: function with method","line":" src/core/internationalization.js:10"},{"message":"replacing incorrect tag: returns with return","line":" src/core/internationalization.js:10"},{"message":"unknown tag: alt","line":" src/core/main.js:42"},{"message":"unknown tag: alt","line":" src/core/main.js:83"},{"message":"unknown tag: alt","line":" src/core/main.js:114"},{"message":"unknown tag: alt","line":" src/core/main.js:411"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:47"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:114"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:154"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:189"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:246"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:292"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:354"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:403"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:454"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:510"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:551"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:592"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:639"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:678"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:725"},{"message":"unknown tag: alt","line":" src/core/p5.Element.js:763"},{"message":"unknown tag: alt","line":" src/core/p5.Graphics.js:70"},{"message":"unknown tag: alt","line":" src/core/p5.Graphics.js:122"},{"message":"unknown tag: alt","line":" src/core/reference.js:6"},{"message":"unknown tag: alt","line":" src/core/reference.js:33"},{"message":"unknown tag: alt","line":" src/core/reference.js:86"},{"message":"unknown tag: alt","line":" src/core/reference.js:114"},{"message":"unknown tag: alt","line":" src/core/reference.js:136"},{"message":"unknown tag: alt","line":" src/core/reference.js:157"},{"message":"unknown tag: alt","line":" src/core/reference.js:178"},{"message":"unknown tag: alt","line":" src/core/reference.js:199"},{"message":"unknown tag: alt","line":" src/core/reference.js:230"},{"message":"unknown tag: alt","line":" src/core/reference.js:266"},{"message":"unknown tag: alt","line":" src/core/reference.js:287"},{"message":"unknown tag: alt","line":" src/core/reference.js:308"},{"message":"unknown tag: alt","line":" src/core/reference.js:330"},{"message":"unknown tag: alt","line":" src/core/reference.js:350"},{"message":"unknown tag: alt","line":" src/core/reference.js:378"},{"message":"unknown tag: alt","line":" src/core/reference.js:407"},{"message":"unknown tag: alt","line":" src/core/reference.js:447"},{"message":"unknown tag: alt","line":" src/core/reference.js:489"},{"message":"unknown tag: alt","line":" src/core/reference.js:511"},{"message":"unknown tag: alt","line":" src/core/rendering.js:15"},{"message":"unknown tag: alt","line":" src/core/rendering.js:120"},{"message":"unknown tag: alt","line":" src/core/rendering.js:174"},{"message":"unknown tag: alt","line":" src/core/rendering.js:195"},{"message":"unknown tag: alt","line":" src/core/rendering.js:234"},{"message":"unknown tag: alt","line":" src/core/rendering.js:317"},{"message":"unknown tag: alt","line":" src/core/structure.js:10"},{"message":"unknown tag: alt","line":" src/core/structure.js:83"},{"message":"unknown tag: alt","line":" src/core/structure.js:134"},{"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:496"},{"message":"unknown tag: alt","line":" src/core/transform.js:11"},{"message":"unknown tag: alt","line":" src/core/transform.js:151"},{"message":"unknown tag: alt","line":" src/core/transform.js:176"},{"message":"unknown tag: alt","line":" src/core/transform.js:215"},{"message":"unknown tag: alt","line":" src/core/transform.js:251"},{"message":"unknown tag: alt","line":" src/core/transform.js:287"},{"message":"unknown tag: alt","line":" src/core/transform.js:325"},{"message":"unknown tag: alt","line":" src/core/transform.js:399"},{"message":"unknown tag: alt","line":" src/core/transform.js:438"},{"message":"unknown tag: alt","line":" src/core/transform.js:477"},{"message":"unknown tag: alt","line":" src/data/local_storage.js:10"},{"message":"unknown tag: alt","line":" src/data/local_storage.js:101"},{"message":"unknown tag: alt","line":" src/dom/dom.js:200"},{"message":"unknown tag: alt","line":" src/dom/dom.js:267"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1494"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1556"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1660"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1699"},{"message":"replacing incorrect tag: returns with return","line":" src/dom/dom.js:1819"},{"message":"unknown tag: alt","line":" src/dom/dom.js:2195"},{"message":"unknown tag: alt","line":" src/dom/dom.js:2704"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:23"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:46"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:69"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:135"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:168"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:201"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:239"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:285"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:330"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:389"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:428"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:471"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:515"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:546"},{"message":"unknown tag: alt","line":" src/events/acceleration.js:604"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:10"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:36"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:64"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:105"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:191"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:242"},{"message":"unknown tag: alt","line":" src/events/keyboard.js:305"},{"message":"unknown tag: alt","line":" src/events/mouse.js:12"},{"message":"unknown tag: alt","line":" src/events/mouse.js:43"},{"message":"unknown tag: alt","line":" src/events/mouse.js:80"},{"message":"unknown tag: alt","line":" src/events/mouse.js:106"},{"message":"unknown tag: alt","line":" src/events/mouse.js:132"},{"message":"unknown tag: alt","line":" src/events/mouse.js:164"},{"message":"unknown tag: alt","line":" src/events/mouse.js:195"},{"message":"unknown tag: alt","line":" src/events/mouse.js:233"},{"message":"unknown tag: alt","line":" src/events/mouse.js:271"},{"message":"unknown tag: alt","line":" src/events/mouse.js:311"},{"message":"unknown tag: alt","line":" src/events/mouse.js:351"},{"message":"unknown tag: alt","line":" src/events/mouse.js:389"},{"message":"unknown tag: alt","line":" src/events/mouse.js:481"},{"message":"unknown tag: alt","line":" src/events/mouse.js:535"},{"message":"unknown tag: alt","line":" src/events/mouse.js:615"},{"message":"unknown tag: alt","line":" src/events/mouse.js:696"},{"message":"unknown tag: alt","line":" src/events/mouse.js:772"},{"message":"unknown tag: alt","line":" src/events/mouse.js:841"},{"message":"unknown tag: alt","line":" src/events/mouse.js:926"},{"message":"unknown tag: alt","line":" src/events/mouse.js:979"},{"message":"unknown tag: alt","line":" src/events/mouse.js:1025"},{"message":"unknown tag: alt","line":" src/events/touch.js:10"},{"message":"unknown tag: alt","line":" src/events/touch.js:71"},{"message":"unknown tag: alt","line":" src/events/touch.js:151"},{"message":"unknown tag: alt","line":" src/events/touch.js:223"},{"message":"unknown tag: alt","line":" src/image/image.js:15"},{"message":"unknown tag: alt","line":" src/image/image.js:94"},{"message":"unknown tag: alt","line":" src/image/image.js:413"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:18"},{"message":"replacing incorrect tag: returns with return","line":" src/image/loading_displaying.js:233"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:250"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:420"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:518"},{"message":"unknown tag: alt","line":" src/image/loading_displaying.js:582"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:88"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:115"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:152"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:256"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:291"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:341"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:395"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:432"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:543"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:598"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:659"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:694"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:815"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:856"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:896"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:927"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:971"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:1006"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:1043"},{"message":"unknown tag: alt","line":" src/image/p5.Image.js:1079"},{"message":"unknown tag: alt","line":" src/image/pixels.js:12"},{"message":"unknown tag: alt","line":" src/image/pixels.js:80"},{"message":"unknown tag: alt","line":" src/image/pixels.js:173"},{"message":"unknown tag: alt","line":" src/image/pixels.js:307"},{"message":"unknown tag: alt","line":" src/image/pixels.js:481"},{"message":"unknown tag: alt","line":" src/image/pixels.js:566"},{"message":"unknown tag: alt","line":" src/image/pixels.js:602"},{"message":"unknown tag: alt","line":" src/image/pixels.js:674"},{"message":"unknown tag: alt","line":" src/io/files.js:20"},{"message":"unknown tag: alt","line":" src/io/files.js:183"},{"message":"unknown tag: alt","line":" src/io/files.js:293"},{"message":"unknown tag: alt","line":" src/io/files.js:575"},{"message":"replacing incorrect tag: returns with return","line":" src/io/files.js:685"},{"message":"unknown tag: alt","line":" src/io/files.js:685"},{"message":"unknown tag: alt","line":" src/io/files.js:1398"},{"message":"unknown tag: alt","line":" src/io/files.js:1540"},{"message":"unknown tag: alt","line":" src/io/files.js:1597"},{"message":"unknown tag: alt","line":" src/io/files.js:1661"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:85"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:148"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:195"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:240"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:288"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:352"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:545"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:597"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:638"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:896"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:960"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1009"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1055"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1100"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1146"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1190"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1242"},{"message":"unknown tag: alt","line":" src/io/p5.Table.js:1305"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:40"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:102"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:146"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:191"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:239"},{"message":"unknown tag: alt","line":" src/io/p5.TableRow.js:295"},{"message":"unknown tag: alt","line":" src/io/p5.XML.js:9"},{"message":"unknown tag: alt","line":" src/math/calculation.js:10"},{"message":"unknown tag: alt","line":" src/math/calculation.js:33"},{"message":"unknown tag: alt","line":" src/math/calculation.js:72"},{"message":"unknown tag: alt","line":" src/math/calculation.js:116"},{"message":"unknown tag: alt","line":" src/math/calculation.js:181"},{"message":"unknown tag: alt","line":" src/math/calculation.js:230"},{"message":"unknown tag: alt","line":" src/math/calculation.js:268"},{"message":"unknown tag: alt","line":" src/math/calculation.js:315"},{"message":"unknown tag: alt","line":" src/math/calculation.js:370"},{"message":"unknown tag: alt","line":" src/math/calculation.js:408"},{"message":"unknown tag: alt","line":" src/math/calculation.js:463"},{"message":"unknown tag: alt","line":" src/math/calculation.js:512"},{"message":"unknown tag: alt","line":" src/math/calculation.js:561"},{"message":"unknown tag: alt","line":" src/math/calculation.js:613"},{"message":"unknown tag: alt","line":" src/math/calculation.js:647"},{"message":"unknown tag: alt","line":" src/math/calculation.js:701"},{"message":"unknown tag: alt","line":" src/math/calculation.js:745"},{"message":"replacing incorrect tag: returns with return","line":" src/math/calculation.js:832"},{"message":"unknown tag: alt","line":" src/math/calculation.js:832"},{"message":"unknown tag: alt","line":" src/math/math.js:10"},{"message":"unknown tag: alt","line":" src/math/noise.js:36"},{"message":"unknown tag: alt","line":" src/math/noise.js:178"},{"message":"unknown tag: alt","line":" src/math/noise.js:243"},{"message":"unknown tag: alt","line":" src/math/p5.Vector.js:10"},{"message":"unknown tag: alt","line":" src/math/random.js:37"},{"message":"unknown tag: alt","line":" src/math/random.js:66"},{"message":"unknown tag: alt","line":" src/math/random.js:153"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:123"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:159"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:186"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:213"},{"message":"unknown tag: alt","line":" src/math/trigonometry.js:285"},{"message":"replacing incorrect tag: returns with return","line":" src/math/trigonometry.js:320"},{"message":"replacing incorrect tag: returns with return","line":" src/math/trigonometry.js:335"},{"message":"replacing incorrect tag: returns with return","line":" src/math/trigonometry.js:350"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:11"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:81"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:118"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:150"},{"message":"unknown tag: alt","line":" src/typography/attributes.js:187"},{"message":"unknown tag: alt","line":" src/typography/loading_displaying.js:16"},{"message":"unknown tag: alt","line":" src/typography/loading_displaying.js:140"},{"message":"unknown tag: alt","line":" src/typography/loading_displaying.js:229"},{"message":"unknown tag: alt","line":" src/typography/p5.Font.js:31"},{"message":"unknown tag: alt","line":" src/utilities/conversion.js:10"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:15"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:43"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:130"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:239"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:313"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:375"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:453"},{"message":"unknown tag: alt","line":" src/utilities/string_functions.js:539"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:10"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:31"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:52"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:73"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:100"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:122"},{"message":"unknown tag: alt","line":" src/utilities/time_date.js:143"},{"message":"unknown tag: alt","line":" src/webgl/3d_primitives.js:13"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:11"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:145"},{"message":"unknown tag: alt","line":" src/webgl/interaction.js:353"},{"message":"unknown tag: alt","line":" src/webgl/light.js:10"},{"message":"unknown tag: alt","line":" src/webgl/light.js:91"},{"message":"unknown tag: alt","line":" src/webgl/light.js:176"},{"message":"unknown tag: alt","line":" src/webgl/light.js:279"},{"message":"unknown tag: alt","line":" src/webgl/light.js:386"},{"message":"unknown tag: alt","line":" src/webgl/light.js:417"},{"message":"unknown tag: alt","line":" src/webgl/light.js:502"},{"message":"unknown tag: alt","line":" src/webgl/light.js:842"},{"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:586"},{"message":"unknown tag: alt","line":" src/webgl/material.js:12"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/material.js:111"},{"message":"unknown tag: alt","line":" src/webgl/material.js:111"},{"message":"unknown tag: alt","line":" src/webgl/material.js:179"},{"message":"unknown tag: alt","line":" src/webgl/material.js:283"},{"message":"unknown tag: alt","line":" src/webgl/material.js:321"},{"message":"unknown tag: alt","line":" src/webgl/material.js:421"},{"message":"unknown tag: alt","line":" src/webgl/material.js:421"},{"message":"unknown tag: alt","line":" src/webgl/material.js:499"},{"message":"unknown tag: alt","line":" src/webgl/material.js:571"},{"message":"unknown tag: alt","line":" src/webgl/material.js:651"},{"message":"unknown tag: alt","line":" src/webgl/material.js:717"},{"message":"unknown tag: alt","line":" src/webgl/material.js:767"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:13"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:115"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:175"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:231"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:297"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:339"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:669"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:727"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:785"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:933"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:1005"},{"message":"unknown tag: alt","line":" src/webgl/p5.Camera.js:1270"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.RendererGL.Immediate.js:180"},{"message":"unknown tag: parem","line":" src/webgl/p5.RendererGL.Immediate.js:301"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/p5.RendererGL.Retained.js:8"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:331"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:600"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:641"},{"message":"unknown tag: alt","line":" src/webgl/p5.RendererGL.js:746"},{"message":"unknown tag: alt","line":" src/webgl/p5.Shader.js:296"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:115"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/text.js:158"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:191"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:203"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:236"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:250"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:388"},{"message":"replacing incorrect tag: returns with return","line":" src/webgl/text.js:388"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:456"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:471"},{"message":"replacing incorrect tag: function with method","line":" src/webgl/text.js:556"},{"message":"replacing incorrect tag: params with param","line":" lib/addons/p5.sound.js:4374"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:4374"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:5085"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:7837"},{"message":"replacing incorrect tag: returns with return","line":" lib/addons/p5.sound.js:9005"},{"message":"Missing item type\nConversions adapted from <http://www.easyrgb.com/en/math.php>.\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:19"},{"message":"Missing item type\nConvert an HSBA array to RGBA.","line":" src/color/color_conversion.js:45"},{"message":"Missing item type\nConvert an HSLA array to HSBA.","line":" src/color/color_conversion.js:100"},{"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:123"},{"message":"Missing item type\nConvert an RGBA array to HSBA.","line":" src/color/color_conversion.js:187"},{"message":"Missing item type\nConvert an RGBA array to HSLA.","line":" src/color/color_conversion.js:226"},{"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:397"},{"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:428"},{"message":"Missing item type\nCSS named colors.","line":" src/color/p5.Color.js:447"},{"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:601"},{"message":"Missing item type\nFull color string patterns. The capture groups are necessary.","line":" src/color/p5.Color.js:614"},{"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:751"},{"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:962"},{"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:675"},{"message":"Missing item type","line":" src/core/friendly_errors/file_errors.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:34"},{"message":"Missing item type","line":" src/core/friendly_errors/validate_params.js:1"},{"message":"Missing item type\nValidates parameters\nparam  {String}               func    the name of the function\nparam  {Array}                args    user input arguments\n\nexample:\n const a;\n ellipse(10,10,a,5);\nconsole ouput:\n \"It looks like ellipse received an empty variable in spot #2.\"\n\nexample:\n ellipse(10,\"foo\",5,5);\nconsole output:\n \"ellipse was expecting a number for parameter #1,\n          received \"foo\" instead.\"","line":" src/core/friendly_errors/validate_params.js:623"},{"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:305"},{"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 <a href=\"#/p5/setup\">setup()</a> is\nrecommended. The default rate is 60 frames per second.\n\nCalling <a href=\"#/p5/frameRate\">frameRate()</a> with no arguments returns the current framerate.","line":" src/core/environment.js:315"},{"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\nSet up our translation function, with loaded languages","line":" src/core/internationalization.js:27"},{"message":"Missing item type","line":" src/core/legacy.js:1"},{"message":"Missing item type\nHelper fxn for sharing pixel methods","line":" src/core/p5.Element.js:827"},{"message":"Missing item type\nResize our canvas element.","line":" src/core/p5.Renderer.js:95"},{"message":"Missing item type\nHelper fxn to check font type (system or otf)","line":" src/core/p5.Renderer.js:341"},{"message":"Missing item type\nHelper fxn to measure ascent and descent.\nAdapted from http://stackoverflow.com/a/25355178","line":" src/core/p5.Renderer.js:393"},{"message":"Missing item type\np5.Renderer2D\nThe 2D graphics canvas renderer class.\nextends p5.Renderer","line":" src/core/p5.Renderer2D.js:7"},{"message":"Missing item type\nGenerate a cubic Bezier representing an arc on the unit circle of total\nangle `size` radians, beginning `start` radians above the x-axis. Up to\nfour of these curves are combined to make a full arc.\n\nSee www.joecridge.me/bezier.pdf for an explanation of the method.","line":" src/core/p5.Renderer2D.js:386"},{"message":"Missing item type\nshim for Uint8ClampedArray.slice\n(allows arrayCopy to work with pixels[])\nwith thanks to http://halfpapstudios.com/blog/tag/html5-canvas/\nEnumerable set to false to protect for...in from\nUint8ClampedArray.prototype pollution.","line":" src/core/shim.js:18"},{"message":"Missing item type\nthis is implementation of Object.assign() which is unavailable in\nIE11 and (non-Chrome) Android browsers.\nThe assign() method is used to copy the values of all enumerable\nown properties from one or more source objects to a target object.\nIt will return the target object.\nModified from https://github.com/ljharb/object.assign","line":" src/core/shim.js:39"},{"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:197"},{"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:387"},{"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:425"},{"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:536"},{"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:600"},{"message":"Missing item type\nHelper function for select and selectAll","line":" src/dom/dom.js:126"},{"message":"Missing item type\nHelper function for getElement and getElements.","line":" src/dom/dom.js:141"},{"message":"Missing item type\nHelpers for create methods.","line":" src/dom/dom.js:301"},{"message":"Missing item type","line":" src/dom/dom.js:433"},{"message":"Missing item type","line":" src/dom/dom.js:1100"},{"message":"Missing item type","line":" src/dom/dom.js:1193"},{"message":"Missing item type","line":" src/dom/dom.js:1232"},{"message":"Missing item type","line":" src/dom/dom.js:3158"},{"message":"Missing item type","line":" src/dom/dom.js:3224"},{"message":"Missing item type","line":" src/dom/dom.js:3286"},{"message":"Missing item type\n_updatePAccelerations updates the pAcceleration values","line":" src/events/acceleration.js:124"},{"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:295"},{"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:381"},{"message":"Missing item type\nThis module defines the filters for use with image buffers.\n\nThis module is basically a collection of functions stored in an object\nas opposed to modules. The functions are destructive, modifying\nthe passed in canvas rather than creating a copy.\n\nGenerally speaking users of this module will use the Filters.apply method\non a canvas to create an effect.\n\nA number of functions are borrowed/adapted from\nhttp://www.html5rocks.com/en/tutorials/canvas/imagefilters/\nor the java processing implementation.","line":" src/image/filters.js:3"},{"message":"Missing item type\nReturns the pixel buffer for a canvas","line":" src/image/filters.js:24"},{"message":"Missing item type\nReturns a 32 bit number containing ARGB data at ith pixel in the\n1D array containing pixels data.","line":" src/image/filters.js:44"},{"message":"Missing item type\nModifies pixels RGBA values to values contained in the data object.","line":" src/image/filters.js:65"},{"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:85"},{"message":"Missing item type\nReturns a blank ImageData object.","line":" src/image/filters.js:105"},{"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:120"},{"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:173"},{"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:207"},{"message":"Missing item type\nSets the alpha channel to entirely opaque. No parameter is used.","line":" src/image/filters.js:230"},{"message":"Missing item type\nSets each pixel to its inverse value. No parameter is used.","line":" src/image/filters.js:246"},{"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:261"},{"message":"Missing item type\nreduces the bright areas in an image","line":" src/image/filters.js:293"},{"message":"Missing item type\nincreases the bright areas in an image","line":" src/image/filters.js:380"},{"message":"Missing item type\nThis module defines the p5 methods for the <a href=\"#/p5.Image\">p5.Image</a> 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:153"},{"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:233"},{"message":"Missing item type\nApply the current tint color to the input image, return the resulting\ncanvas.","line":" src/image/loading_displaying.js:546"},{"message":"Missing item type\nThis module defines the <a href=\"#/p5.Image\">p5.Image</a> 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:222"},{"message":"Missing item type\nHelper fxn for sharing pixel methods","line":" src/image/p5.Image.js:248"},{"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 <a href=\"#/p5/saveStrings\">saveStrings</a>, <a href=\"#/p5/saveJSON\">saveJSON</a>, <a href=\"#/p5/saveTable\">saveTable</a> etc.","line":" src/io/files.js:1786"},{"message":"Missing item type\nReturns a file extension, or another string\nif the provided parameter has no extension.","line":" src/io/files.js:1854"},{"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:1887"},{"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:1899"},{"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<a href=\"http://en.wikipedia.org/wiki/Comma-separated_values\">\ncomma separated values</a>, 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\n<a href=\"http://tools.ietf.org/html/rfc4180\">here</a>.\nTo load files, use the <a href=\"#/p5/loadTable\">loadTable</a> method.\nTo save tables to your computer, use the <a href=\"#/p5/save\">save</a> method\n or the <a href=\"#/p5/saveTable\">saveTable</a> method.\n\nPossible options include:\n<ul>\n<li>csv - parse the table as comma-separated values\n<li>tsv - parse the table as tab-separated values\n<li>header - this table has a header (title) row\n</ul>","line":" src/io/p5.Table.js:9"},{"message":"Missing item type\nMultiplies a vector by a scalar and returns a new vector.","line":" src/math/p5.Vector.js:2064"},{"message":"Missing item type\nDivides a vector by a scalar and returns a new vector.","line":" src/math/p5.Vector.js:2116"},{"message":"Missing item type\nCalculates the dot product of two vectors.","line":" src/math/p5.Vector.js:2169"},{"message":"Missing item type\nCalculates the cross product of two vectors.","line":" src/math/p5.Vector.js:2183"},{"message":"Missing item type\nCalculates the Euclidean distance between two points (considering a\npoint as a vector object).","line":" src/math/p5.Vector.js:2197"},{"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:2212"},{"message":"Missing item type\nHelper function to measure ascent and descent.","line":" src/typography/attributes.js:280"},{"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:273"},{"message":"Missing item type\nReturns an opentype path for the supplied string and position.","line":" src/typography/p5.Font.js:288"},{"message":"Missing item type","line":" src/webgl/3d_primitives.js:301"},{"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:955"},{"message":"Missing item type\nDraw a line given two points","line":" src/webgl/3d_primitives.js:1355"},{"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:179"},{"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:288"},{"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:315"},{"message":"Missing item type\nThis function matches the `query` at the provided `offset`","line":" src/webgl/loading.js:342"},{"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:354"},{"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:442"},{"message":"Missing item type","line":" src/webgl/material.js:812"},{"message":"Missing item type","line":" src/webgl/material.js:843"},{"message":"Missing item type\nCreate a 2D array for establishing stroke connections","line":" src/webgl/p5.Geometry.js:212"},{"message":"Missing item type\nCreate 4 vertices for each stroke line, two at the beginning position\nand two at the end position. These vertices are displaced relative to\nthat line's normal on the GPU","line":" src/webgl/p5.Geometry.js:233"},{"message":"Missing item type","line":" src/webgl/p5.Matrix.js:1"},{"message":"Missing item type\nPRIVATE","line":" src/webgl/p5.Matrix.js:722"},{"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:12"},{"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 <a href=\"#/p5/beginShape\">beginShape()</a> & de-activated when you call <a href=\"#/p5/endShape\">endShape()</a>.\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:106"},{"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:146"},{"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:180"},{"message":"Missing item type\nCalled from _processVertices() when applicable. This function tesselates immediateMode.geometry.","line":" src/webgl/p5.RendererGL.Immediate.js:225"},{"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:245"},{"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:280"},{"message":"Missing item type\nCalled from _drawImmediateFill(). Currently adds default normals which\nonly work for flat shapes.","line":" src/webgl/p5.RendererGL.Immediate.js:301"},{"message":"Missing item type\ninitializes buffer defaults. runs each time a new geometry is\nregistered","line":" src/webgl/p5.RendererGL.Retained.js:8"},{"message":"Missing item type\ncreates a buffers object that holds the WebGL render buffers\nfor a geometry.","line":" src/webgl/p5.RendererGL.Retained.js:59"},{"message":"Missing item type\nDraws buffers given a geometry key ID","line":" src/webgl/p5.RendererGL.Retained.js:97"},{"message":"Missing item type\nmodel view, projection, & normal\nmatrices","line":" src/webgl/p5.RendererGL.js:117"},{"message":"Missing item type\n[background description]","line":" src/webgl/p5.RendererGL.js:583"},{"message":"Missing item type\n[resize description]","line":" src/webgl/p5.RendererGL.js:857"},{"message":"Missing item type\nclears color and depth buffers\nwith r,g,b,a","line":" src/webgl/p5.RendererGL.js:887"},{"message":"Missing item type\n[translate description]","line":" src/webgl/p5.RendererGL.js:919"},{"message":"Missing item type\nScales the Model View Matrix by a vector","line":" src/webgl/p5.RendererGL.js:938"},{"message":"Missing item type\nturn a two dimensional array into one dimensional array","line":" src/webgl/p5.RendererGL.js:1356"},{"message":"Missing item type\nturn a p5.Vector Array into a one dimensional number array","line":" src/webgl/p5.RendererGL.js:1393"},{"message":"Missing item type\nensures that p5 is using a 3d renderer. throws an error if not.","line":" src/webgl/p5.RendererGL.js:1411"},{"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\nThe p5.Effect class is built\n \tusing Tone.js CrossFade","line":" lib/addons/p5.sound.js:293"},{"message":"Missing item type\nIn classes that extend\np5.Effect, connect effect nodes\nto the wet parameter","line":" lib/addons/p5.sound.js:300"},{"message":"Missing item type","line":" lib/addons/p5.sound.js:451"},{"message":"Missing item type\nUsed by Osc and Envelope to chain signal math","line":" lib/addons/p5.sound.js:688"},{"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:2721"},{"message":"Missing item type\nThis module has shims","line":" lib/addons/p5.sound.js:2969"},{"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:3105"},{"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:3555"},{"message":"Missing item type\nStop playback on all of this soundfile's sources.","line":" lib/addons/p5.sound.js:4056"},{"message":"Missing item type","line":" lib/addons/p5.sound.js:4590"},{"message":"Missing item type\nEQFilter extends p5.Filter with constraints\nnecessary for the p5.EQ","line":" lib/addons/p5.sound.js:8235"},{"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:9362"},{"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:9557"},{"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:10516"},{"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:10534"},{"message":"Missing item type\ncallback invoked when the recording is over","line":" lib/addons/p5.sound.js:11153"},{"message":"Missing item type","line":" lib/addons/p5.sound.min.js:1"}],"consts":{"RGB":["p5.colorMode"],"HSB":["p5.colorMode"],"HSL":["p5.colorMode"],"CHORD":["p5.arc"],"PIE":["p5.arc"],"OPEN":["p5.arc"],"CENTER":["p5.ellipseMode","p5.rectMode","p5.imageMode","p5.textAlign"],"RADIUS":["p5.ellipseMode","p5.rectMode"],"CORNER":["p5.ellipseMode","p5.rectMode","p5.imageMode"],"CORNERS":["p5.ellipseMode","p5.rectMode","p5.imageMode"],"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"],"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"],"VIDEO":["p5.createCapture"],"AUDIO":["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"],"BLUR":["p5.Image.filter","p5.filter"],"ERODE":["p5.Image.filter","p5.filter"],"DILATE":["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"],"IMAGE":["p5.textureMode"],"CLAMP":["p5.textureWrap"],"REPEAT":["p5.textureWrap"],"MIRROR":["p5.textureWrap"]}}
\ No newline at end of file

From b3004266059b46cfacaa69a8d4c5c875208ddaa1 Mon Sep 17 00:00:00 2001
From: Sanjay Singh Rajpoot
 <67458417+SanjaySinghRajpoot@users.noreply.github.com>
Date: Tue, 30 Mar 2021 08:58:00 +0530
Subject: [PATCH 07/10] Reverting Updating Files Commit

---
 package-lock.json                             |   81 +-
 package.json                                  |    2 +-
 src/assets/js/reference.js                    | 9528 ++++++++---------
 src/data/data.yml                             |    2 +-
 .../pages/reference/assets/Avenir.otf         |  Bin 127448 -> 0 bytes
 .../reference/assets/AvenirNextLTPro-Demi.otf |  Bin 69940 -> 0 bytes
 6 files changed, 4829 insertions(+), 4784 deletions(-)
 delete mode 100644 src/templates/pages/reference/assets/Avenir.otf
 delete mode 100644 src/templates/pages/reference/assets/AvenirNextLTPro-Demi.otf

diff --git a/package-lock.json b/package-lock.json
index 2d76bdc862..95bdaf7153 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1391,8 +1391,7 @@
         },
         "kind-of": {
           "version": "6.0.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
-          "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
+          "resolved": "",
           "dev": true
         }
       }
@@ -2807,9 +2806,9 @@
       }
     },
     "bl": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/bl/-/bl-1.2.2.tgz",
-      "integrity": "sha512-e8tQYnZodmebYDWGH7KMRvtzKXaJHx3BbilrgZCfvyLUYdKpK1t5PSPmpkny/SgiTSCnjfLW7v5rlONXVFkQEA==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-1.2.3.tgz",
+      "integrity": "sha512-pvcNpa0UU69UT341rO6AYy4FVAIkUHuZXRIWbq+zHnsVcRzDDjIAhGuuYoi0d//cwIwtt4pkpKycWEfjdV+vww==",
       "dev": true,
       "requires": {
         "readable-stream": "^2.3.5",
@@ -4963,9 +4962,9 @@
       "optional": true
     },
     "diff": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-2.2.3.tgz",
-      "integrity": "sha1-YOr9DSjukG5Oj/ClLBIpUhAzv5k=",
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",
+      "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==",
       "dev": true
     },
     "digits": {
@@ -8190,14 +8189,62 @@
       }
     },
     "grunt-postcss": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/grunt-postcss/-/grunt-postcss-0.8.0.tgz",
-      "integrity": "sha1-jzCor2B5A84MRfAfC+QsYOMc6w4=",
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/grunt-postcss/-/grunt-postcss-0.9.0.tgz",
+      "integrity": "sha512-lglLcVaoOIqH0sFv7RqwUKkEFGQwnlqyAKbatxZderwZGV1nDyKHN7gZS9LUiTx1t5GOvRBx0BEalHMyVwFAIA==",
       "dev": true,
       "requires": {
-        "chalk": "^1.0.0",
-        "diff": "^2.0.2",
-        "postcss": "^5.0.0"
+        "chalk": "^2.1.0",
+        "diff": "^3.0.0",
+        "postcss": "^6.0.11"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "6.0.23",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.1",
+            "source-map": "^0.6.1",
+            "supports-color": "^5.4.0"
+          }
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
       }
     },
     "grunt-serve": {
@@ -18219,8 +18266,7 @@
         },
         "kind-of": {
           "version": "6.0.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
-          "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
+          "resolved": "",
           "dev": true
         }
       }
@@ -19697,8 +19743,7 @@
         },
         "kind-of": {
           "version": "6.0.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
-          "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
+          "resolved": "",
           "dev": true
         }
       }
diff --git a/package.json b/package.json
index 8a92f3b068..5ae6e6345c 100644
--- a/package.json
+++ b/package.json
@@ -92,4 +92,4 @@
   "dependencies": {
     "upath": "^1.2.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/assets/js/reference.js b/src/assets/js/reference.js
index 37150da749..5b4baa0ecd 100644
--- a/src/assets/js/reference.js
+++ b/src/assets/js/reference.js
@@ -1,4948 +1,4948 @@
 (function () {
-// https://github.com/umdjs/umd/blob/master/templates/returnExports.js
-(function (root, factory) {
-  if (typeof define === 'function' && define.amd) {
-    define('documented-method',[], factory);
-  } else if (typeof module === 'object' && module.exports) {
-    module.exports = factory();
-  } else {
-    root.DocumentedMethod = factory();
-  }
-}(this, function () {
-  function extend(target, src) {
-    Object.keys(src).forEach(function(prop) {
-      target[prop] = src[prop];
-    });
-    return target;
-  }
-
-  function DocumentedMethod(classitem) {
-    extend(this, classitem);
-
-    if (this.overloads) {
-      // Make each overload inherit properties from their parent
-      // classitem.
-      this.overloads = this.overloads.map(function(overload) {
-        return extend(Object.create(this), overload);
-      }, this);
-
-      if (this.params) {
-        throw new Error('params for overloaded methods should be undefined');
-      }
-
-      this.params = this._getMergedParams();
+  // https://github.com/umdjs/umd/blob/master/templates/returnExports.js
+  (function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+      define('documented-method',[], factory);
+    } else if (typeof module === 'object' && module.exports) {
+      module.exports = factory();
+    } else {
+      root.DocumentedMethod = factory();
     }
-  }
-
-  DocumentedMethod.prototype = {
-    // Merge parameters across all overloaded versions of this item.
-    _getMergedParams: function() {
-      var paramNames = {};
-      var params = [];
-
-      this.overloads.forEach(function(overload) {
-        if (!overload.params) {
-          return;
-        }
-        overload.params.forEach(function(param) {
-          if (param.name in paramNames) {
-            return;
-          }
-          paramNames[param.name] = param;
-          params.push(param);
-        });
+  }(this, function () {
+    function extend(target, src) {
+      Object.keys(src).forEach(function(prop) {
+        target[prop] = src[prop];
       });
-
-      return params;
+      return target;
     }
-  };
-
-  return DocumentedMethod;
-}));
-
-/**
- * @license RequireJS text 2.0.10 Copyright (c) 2010-2012, The Dojo Foundation All Rights Reserved.
- * Available via the MIT or new BSD license.
- * see: http://github.com/requirejs/text for details
- */
-/*jslint regexp: true */
-/*global require, XMLHttpRequest, ActiveXObject,
-  define, window, process, Packages,
-  java, location, Components, FileUtils */
-
-define('text',['module'], function (module) {
-    'use strict';
-
-    var text, fs, Cc, Ci, xpcIsWindows,
-        progIds = ['Msxml2.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.4.0'],
-        xmlRegExp = /^\s*<\?xml(\s)+version=[\'\"](\d)*.(\d)*[\'\"](\s)*\?>/im,
-        bodyRegExp = /<body[^>]*>\s*([\s\S]+)\s*<\/body>/im,
-        hasLocation = typeof location !== 'undefined' && location.href,
-        defaultProtocol = hasLocation && location.protocol && location.protocol.replace(/\:/, ''),
-        defaultHostName = hasLocation && location.hostname,
-        defaultPort = hasLocation && (location.port || undefined),
-        buildMap = {},
-        masterConfig = (module.config && module.config()) || {};
-
-    text = {
-        version: '2.0.10',
-
-        strip: function (content) {
-            //Strips <?xml ...?> declarations so that external SVG and XML
-            //documents can be added to a document without worry. Also, if the string
-            //is an HTML document, only the part inside the body tag is returned.
-            if (content) {
-                content = content.replace(xmlRegExp, "");
-                var matches = content.match(bodyRegExp);
-                if (matches) {
-                    content = matches[1];
-                }
-            } else {
-                content = "";
-            }
-            return content;
-        },
-
-        jsEscape: function (content) {
-            return content.replace(/(['\\])/g, '\\$1')
-                .replace(/[\f]/g, "\\f")
-                .replace(/[\b]/g, "\\b")
-                .replace(/[\n]/g, "\\n")
-                .replace(/[\t]/g, "\\t")
-                .replace(/[\r]/g, "\\r")
-                .replace(/[\u2028]/g, "\\u2028")
-                .replace(/[\u2029]/g, "\\u2029");
-        },
-
-        createXhr: masterConfig.createXhr || function () {
-            //Would love to dump the ActiveX crap in here. Need IE 6 to die first.
-            var xhr, i, progId;
-            if (typeof XMLHttpRequest !== "undefined") {
-                return new XMLHttpRequest();
-            } else if (typeof ActiveXObject !== "undefined") {
-                for (i = 0; i < 3; i += 1) {
-                    progId = progIds[i];
-                    try {
-                        xhr = new ActiveXObject(progId);
-                    } catch (e) {}
-
-                    if (xhr) {
-                        progIds = [progId];  // so faster next time
-                        break;
-                    }
-                }
-            }
-
-            return xhr;
-        },
-
-        /**
-         * Parses a resource name into its component parts. Resource names
-         * look like: module/name.ext!strip, where the !strip part is
-         * optional.
-         * @param {String} name the resource name
-         * @returns {Object} with properties "moduleName", "ext" and "strip"
-         * where strip is a boolean.
-         */
-        parseName: function (name) {
-            var modName, ext, temp,
-                strip = false,
-                index = name.indexOf("."),
-                isRelative = name.indexOf('./') === 0 ||
-                             name.indexOf('../') === 0;
-
-            if (index !== -1 && (!isRelative || index > 1)) {
-                modName = name.substring(0, index);
-                ext = name.substring(index + 1, name.length);
-            } else {
-                modName = name;
-            }
-
-            temp = ext || modName;
-            index = temp.indexOf("!");
-            if (index !== -1) {
-                //Pull off the strip arg.
-                strip = temp.substring(index + 1) === "strip";
-                temp = temp.substring(0, index);
-                if (ext) {
-                    ext = temp;
-                } else {
-                    modName = temp;
-                }
-            }
-
-            return {
-                moduleName: modName,
-                ext: ext,
-                strip: strip
-            };
-        },
-
-        xdRegExp: /^((\w+)\:)?\/\/([^\/\\]+)/,
-
-        /**
-         * Is an URL on another domain. Only works for browser use, returns
-         * false in non-browser environments. Only used to know if an
-         * optimized .js version of a text resource should be loaded
-         * instead.
-         * @param {String} url
-         * @returns Boolean
-         */
-        useXhr: function (url, protocol, hostname, port) {
-            var uProtocol, uHostName, uPort,
-                match = text.xdRegExp.exec(url);
-            if (!match) {
-                return true;
-            }
-            uProtocol = match[2];
-            uHostName = match[3];
-
-            uHostName = uHostName.split(':');
-            uPort = uHostName[1];
-            uHostName = uHostName[0];
-
-            return (!uProtocol || uProtocol === protocol) &&
-                   (!uHostName || uHostName.toLowerCase() === hostname.toLowerCase()) &&
-                   ((!uPort && !uHostName) || uPort === port);
-        },
-
-        finishLoad: function (name, strip, content, onLoad) {
-            content = strip ? text.strip(content) : content;
-            if (masterConfig.isBuild) {
-                buildMap[name] = content;
-            }
-            onLoad(content);
-        },
-
-        load: function (name, req, onLoad, config) {
-            //Name has format: some.module.filext!strip
-            //The strip part is optional.
-            //if strip is present, then that means only get the string contents
-            //inside a body tag in an HTML string. For XML/SVG content it means
-            //removing the <?xml ...?> declarations so the content can be inserted
-            //into the current doc without problems.
-
-            // Do not bother with the work if a build and text will
-            // not be inlined.
-            if (config.isBuild && !config.inlineText) {
-                onLoad();
-                return;
-            }
-
-            masterConfig.isBuild = config.isBuild;
-
-            var parsed = text.parseName(name),
-                nonStripName = parsed.moduleName +
-                    (parsed.ext ? '.' + parsed.ext : ''),
-                url = req.toUrl(nonStripName),
-                useXhr = (masterConfig.useXhr) ||
-                         text.useXhr;
-
-            // Do not load if it is an empty: url
-            if (url.indexOf('empty:') === 0) {
-                onLoad();
-                return;
-            }
-
-            //Load the text. Use XHR if possible and in a browser.
-            if (!hasLocation || useXhr(url, defaultProtocol, defaultHostName, defaultPort)) {
-                text.get(url, function (content) {
-                    text.finishLoad(name, parsed.strip, content, onLoad);
-                }, function (err) {
-                    if (onLoad.error) {
-                        onLoad.error(err);
-                    }
-                });
-            } else {
-                //Need to fetch the resource across domains. Assume
-                //the resource has been optimized into a JS module. Fetch
-                //by the module name + extension, but do not include the
-                //!strip part to avoid file system issues.
-                req([nonStripName], function (content) {
-                    text.finishLoad(parsed.moduleName + '.' + parsed.ext,
-                                    parsed.strip, content, onLoad);
-                });
-            }
-        },
-
-        write: function (pluginName, moduleName, write, config) {
-            if (buildMap.hasOwnProperty(moduleName)) {
-                var content = text.jsEscape(buildMap[moduleName]);
-                write.asModule(pluginName + "!" + moduleName,
-                               "define(function () { return '" +
-                                   content +
-                               "';});\n");
-            }
-        },
-
-        writeFile: function (pluginName, moduleName, req, write, config) {
-            var parsed = text.parseName(moduleName),
-                extPart = parsed.ext ? '.' + parsed.ext : '',
-                nonStripName = parsed.moduleName + extPart,
-                //Use a '.js' file name so that it indicates it is a
-                //script that can be loaded across domains.
-                fileName = req.toUrl(parsed.moduleName + extPart) + '.js';
-
-            //Leverage own load() method to load plugin value, but only
-            //write out values that do not have the strip argument,
-            //to avoid any potential issues with ! in file names.
-            text.load(nonStripName, req, function (value) {
-                //Use own write() method to construct full module value.
-                //But need to create shell that translates writeFile's
-                //write() to the right interface.
-                var textWrite = function (contents) {
-                    return write(fileName, contents);
-                };
-                textWrite.asModule = function (moduleName, contents) {
-                    return write.asModule(moduleName, fileName, contents);
-                };
-
-                text.write(pluginName, nonStripName, textWrite, config);
-            }, config);
+  
+    function DocumentedMethod(classitem) {
+      extend(this, classitem);
+  
+      if (this.overloads) {
+        // Make each overload inherit properties from their parent
+        // classitem.
+        this.overloads = this.overloads.map(function(overload) {
+          return extend(Object.create(this), overload);
+        }, this);
+  
+        if (this.params) {
+          throw new Error('params for overloaded methods should be undefined');
         }
-    };
-
-    if (masterConfig.env === 'node' || (!masterConfig.env &&
-            typeof process !== "undefined" &&
-            process.versions &&
-            !!process.versions.node &&
-            !process.versions['node-webkit'])) {
-        //Using special require.nodeRequire, something added by r.js.
-        fs = require.nodeRequire('fs');
-
-        text.get = function (url, callback, errback) {
-            try {
-                var file = fs.readFileSync(url, 'utf8');
-                //Remove BOM (Byte Mark Order) from utf8 files if it is there.
-                if (file.indexOf('\uFEFF') === 0) {
-                    file = file.substring(1);
-                }
-                callback(file);
-            } catch (e) {
-                errback(e);
-            }
-        };
-    } else if (masterConfig.env === 'xhr' || (!masterConfig.env &&
-            text.createXhr())) {
-        text.get = function (url, callback, errback, headers) {
-            var xhr = text.createXhr(), header;
-            xhr.open('GET', url, true);
-
-            //Allow plugins direct access to xhr headers
-            if (headers) {
-                for (header in headers) {
-                    if (headers.hasOwnProperty(header)) {
-                        xhr.setRequestHeader(header.toLowerCase(), headers[header]);
-                    }
-                }
-            }
-
-            //Allow overrides specified in config
-            if (masterConfig.onXhr) {
-                masterConfig.onXhr(xhr, url);
-            }
-
-            xhr.onreadystatechange = function (evt) {
-                var status, err;
-                //Do not explicitly handle errors, those should be
-                //visible via console output in the browser.
-                if (xhr.readyState === 4) {
-                    status = xhr.status;
-                    if (status > 399 && status < 600) {
-                        //An http 4xx or 5xx error. Signal an error.
-                        err = new Error(url + ' HTTP status: ' + status);
-                        err.xhr = xhr;
-                        errback(err);
-                    } else {
-                        callback(xhr.responseText);
-                    }
-
-                    if (masterConfig.onXhrComplete) {
-                        masterConfig.onXhrComplete(xhr, url);
-                    }
-                }
-            };
-            xhr.send(null);
-        };
-    } else if (masterConfig.env === 'rhino' || (!masterConfig.env &&
-            typeof Packages !== 'undefined' && typeof java !== 'undefined')) {
-        //Why Java, why is this so awkward?
-        text.get = function (url, callback) {
-            var stringBuffer, line,
-                encoding = "utf-8",
-                file = new java.io.File(url),
-                lineSeparator = java.lang.System.getProperty("line.separator"),
-                input = new java.io.BufferedReader(new java.io.InputStreamReader(new java.io.FileInputStream(file), encoding)),
-                content = '';
-            try {
-                stringBuffer = new java.lang.StringBuffer();
-                line = input.readLine();
-
-                // Byte Order Mark (BOM) - The Unicode Standard, version 3.0, page 324
-                // http://www.unicode.org/faq/utf_bom.html
-
-                // Note that when we use utf-8, the BOM should appear as "EF BB BF", but it doesn't due to this bug in the JDK:
-                // http://bugs.sun.com/bugdatabase/view_bug.do?bug_id=4508058
-                if (line && line.length() && line.charAt(0) === 0xfeff) {
-                    // Eat the BOM, since we've already found the encoding on this file,
-                    // and we plan to concatenating this buffer with others; the BOM should
-                    // only appear at the top of a file.
-                    line = line.substring(1);
-                }
-
-                if (line !== null) {
-                    stringBuffer.append(line);
-                }
-
-                while ((line = input.readLine()) !== null) {
-                    stringBuffer.append(lineSeparator);
-                    stringBuffer.append(line);
-                }
-                //Make sure we return a JavaScript string and not a Java string.
-                content = String(stringBuffer.toString()); //String
-            } finally {
-                input.close();
-            }
-            callback(content);
-        };
-    } else if (masterConfig.env === 'xpconnect' || (!masterConfig.env &&
-            typeof Components !== 'undefined' && Components.classes &&
-            Components.interfaces)) {
-        //Avert your gaze!
-        Cc = Components.classes,
-        Ci = Components.interfaces;
-        Components.utils['import']('resource://gre/modules/FileUtils.jsm');
-        xpcIsWindows = ('@mozilla.org/windows-registry-key;1' in Cc);
-
-        text.get = function (url, callback) {
-            var inStream, convertStream, fileObj,
-                readData = {};
-
-            if (xpcIsWindows) {
-                url = url.replace(/\//g, '\\');
-            }
-
-            fileObj = new FileUtils.File(url);
-
-            //XPCOM, you so crazy
-            try {
-                inStream = Cc['@mozilla.org/network/file-input-stream;1']
-                           .createInstance(Ci.nsIFileInputStream);
-                inStream.init(fileObj, 1, 0, false);
-
-                convertStream = Cc['@mozilla.org/intl/converter-input-stream;1']
-                                .createInstance(Ci.nsIConverterInputStream);
-                convertStream.init(inStream, "utf-8", inStream.available(),
-                Ci.nsIConverterInputStream.DEFAULT_REPLACEMENT_CHARACTER);
-
-                convertStream.readString(inStream.available(), readData);
-                convertStream.close();
-                inStream.close();
-                callback(readData.value);
-            } catch (e) {
-                throw new Error((fileObj && fileObj.path || '') + ': ' + e);
-            }
-        };
+  
+        this.params = this._getMergedParams();
+      }
     }
-    return text;
-});
-
-
-define('text!tpl/search.html',[],function () { return '<h2 class="sr-only">search</h2>\n<form>\n  <input id="search_reference_field" type="text" class="<%=className%>" value="" placeholder="<%=placeholder%>" aria-label="search reference">\n  <label class="sr-only" for="search_reference_field">Search reference</label>\n</form>\n\n';});
-
-
-define('text!tpl/search_suggestion.html',[],function () { return '<p id="index-<%=idx%>" class="search-suggestion">\n\n  <strong><%=name%></strong>\n\n  <span class="small">\n    <% if (final) { %>\n    constant\n    <% } else if (itemtype) { %>\n    <%=itemtype%> \n    <% } %>\n\n    <% if (className) { %>\n    in <strong><%=className%></strong>\n    <% } %>\n\n    <% if (typeof is_constructor !== \'undefined\' && is_constructor) { %>\n    <strong><span class="glyphicon glyphicon-star"></span> constructor</strong>\n    <% } %>\n  </span>\n\n</p>';});
-
-/*!
- * typeahead.js 0.10.2
- * https://github.com/twitter/typeahead.js
- * Copyright 2013-2014 Twitter, Inc. and other contributors; Licensed MIT
- */
-define('typeahead',[], function() {
-
-//(function($) {
-
-
-    var _ = {
-        isMsie: function() {
-            return /(msie|trident)/i.test(navigator.userAgent) ? navigator.userAgent.match(/(msie |rv:)(\d+(.\d+)?)/i)[2] : false;
-        },
-        isBlankString: function(str) {
-            return !str || /^\s*$/.test(str);
-        },
-        escapeRegExChars: function(str) {
-            return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
-        },
-        isString: function(obj) {
-            return typeof obj === "string";
-        },
-        isNumber: function(obj) {
-            return typeof obj === "number";
-        },
-        isArray: $.isArray,
-        isFunction: $.isFunction,
-        isObject: $.isPlainObject,
-        isUndefined: function(obj) {
-            return typeof obj === "undefined";
-        },
-        bind: $.proxy,
-        each: function(collection, cb) {
-            $.each(collection, reverseArgs);
-            function reverseArgs(index, value) {
-                return cb(value, index);
-            }
-        },
-        map: $.map,
-        filter: $.grep,
-        every: function(obj, test) {
-            var result = true;
-            if (!obj) {
-                return result;
-            }
-            $.each(obj, function(key, val) {
-                if (!(result = test.call(null, val, key, obj))) {
-                    return false;
-                }
-            });
-            return !!result;
-        },
-        some: function(obj, test) {
-            var result = false;
-            if (!obj) {
-                return result;
-            }
-            $.each(obj, function(key, val) {
-                if (result = test.call(null, val, key, obj)) {
-                    return false;
-                }
-            });
-            return !!result;
-        },
-        mixin: $.extend,
-        getUniqueId: function() {
-            var counter = 0;
-            return function() {
-                return counter++;
-            };
-        }(),
-        templatify: function templatify(obj) {
-            return $.isFunction(obj) ? obj : template;
-            function template() {
-                return String(obj);
-            }
-        },
-        defer: function(fn) {
-            setTimeout(fn, 0);
-        },
-        debounce: function(func, wait, immediate) {
-            var timeout, result;
-            return function() {
-                var context = this, args = arguments, later, callNow;
-                later = function() {
-                    timeout = null;
-                    if (!immediate) {
-                        result = func.apply(context, args);
-                    }
-                };
-                callNow = immediate && !timeout;
-                clearTimeout(timeout);
-                timeout = setTimeout(later, wait);
-                if (callNow) {
-                    result = func.apply(context, args);
-                }
-                return result;
-            };
-        },
-        throttle: function(func, wait) {
-            var context, args, timeout, result, previous, later;
-            previous = 0;
-            later = function() {
-                previous = new Date();
-                timeout = null;
-                result = func.apply(context, args);
-            };
-            return function() {
-                var now = new Date(), remaining = wait - (now - previous);
-                context = this;
-                args = arguments;
-                if (remaining <= 0) {
-                    clearTimeout(timeout);
-                    timeout = null;
-                    previous = now;
-                    result = func.apply(context, args);
-                } else if (!timeout) {
-                    timeout = setTimeout(later, remaining);
-                }
-                return result;
-            };
-        },
-        noop: function() {}
-    };
-    var VERSION = "0.10.2";
-    var tokenizers = function(root) {
-        return {
-            nonword: nonword,
-            whitespace: whitespace,
-            obj: {
-                nonword: getObjTokenizer(nonword),
-                whitespace: getObjTokenizer(whitespace)
-            }
-        };
-        function whitespace(s) {
-            return s.split(/\s+/);
-        }
-        function nonword(s) {
-            return s.split(/\W+/);
-        }
-        function getObjTokenizer(tokenizer) {
-            return function setKey(key) {
-                return function tokenize(o) {
-                    return tokenizer(o[key]);
-                };
-            };
-        }
-    }();
-    var LruCache = function() {
-        function LruCache(maxSize) {
-            this.maxSize = maxSize || 100;
-            this.size = 0;
-            this.hash = {};
-            this.list = new List();
-        }
-        _.mixin(LruCache.prototype, {
-            set: function set(key, val) {
-                var tailItem = this.list.tail, node;
-                if (this.size >= this.maxSize) {
-                    this.list.remove(tailItem);
-                    delete this.hash[tailItem.key];
-                }
-                if (node = this.hash[key]) {
-                    node.val = val;
-                    this.list.moveToFront(node);
-                } else {
-                    node = new Node(key, val);
-                    this.list.add(node);
-                    this.hash[key] = node;
-                    this.size++;
-                }
-            },
-            get: function get(key) {
-                var node = this.hash[key];
-                if (node) {
-                    this.list.moveToFront(node);
-                    return node.val;
-                }
-            }
-        });
-        function List() {
-            this.head = this.tail = null;
-        }
-        _.mixin(List.prototype, {
-            add: function add(node) {
-                if (this.head) {
-                    node.next = this.head;
-                    this.head.prev = node;
-                }
-                this.head = node;
-                this.tail = this.tail || node;
-            },
-            remove: function remove(node) {
-                node.prev ? node.prev.next = node.next : this.head = node.next;
-                node.next ? node.next.prev = node.prev : this.tail = node.prev;
-            },
-            moveToFront: function(node) {
-                this.remove(node);
-                this.add(node);
-            }
-        });
-        function Node(key, val) {
-            this.key = key;
-            this.val = val;
-            this.prev = this.next = null;
-        }
-        return LruCache;
-    }();
-    var PersistentStorage = function() {
-        var ls, methods;
-        try {
-            ls = window.localStorage;
-            ls.setItem("~~~", "!");
-            ls.removeItem("~~~");
-        } catch (err) {
-            ls = null;
-        }
-        function PersistentStorage(namespace) {
-            this.prefix = [ "__", namespace, "__" ].join("");
-            this.ttlKey = "__ttl__";
-            this.keyMatcher = new RegExp("^" + this.prefix);
-        }
-        if (ls && window.JSON) {
-            methods = {
-                _prefix: function(key) {
-                    return this.prefix + key;
-                },
-                _ttlKey: function(key) {
-                    return this._prefix(key) + this.ttlKey;
-                },
-                get: function(key) {
-                    if (this.isExpired(key)) {
-                        this.remove(key);
-                    }
-                    return decode(ls.getItem(this._prefix(key)));
-                },
-                set: function(key, val, ttl) {
-                    if (_.isNumber(ttl)) {
-                        ls.setItem(this._ttlKey(key), encode(now() + ttl));
-                    } else {
-                        ls.removeItem(this._ttlKey(key));
-                    }
-                    return ls.setItem(this._prefix(key), encode(val));
-                },
-                remove: function(key) {
-                    ls.removeItem(this._ttlKey(key));
-                    ls.removeItem(this._prefix(key));
-                    return this;
-                },
-                clear: function() {
-                    var i, key, keys = [], len = ls.length;
-                    for (i = 0; i < len; i++) {
-                        if ((key = ls.key(i)).match(this.keyMatcher)) {
-                            keys.push(key.replace(this.keyMatcher, ""));
-                        }
-                    }
-                    for (i = keys.length; i--; ) {
-                        this.remove(keys[i]);
-                    }
-                    return this;
-                },
-                isExpired: function(key) {
-                    var ttl = decode(ls.getItem(this._ttlKey(key)));
-                    return _.isNumber(ttl) && now() > ttl ? true : false;
-                }
-            };
-        } else {
-            methods = {
-                get: _.noop,
-                set: _.noop,
-                remove: _.noop,
-                clear: _.noop,
-                isExpired: _.noop
-            };
-        }
-        _.mixin(PersistentStorage.prototype, methods);
-        return PersistentStorage;
-        function now() {
-            return new Date().getTime();
-        }
-        function encode(val) {
-            return JSON.stringify(_.isUndefined(val) ? null : val);
-        }
-        function decode(val) {
-            return JSON.parse(val);
-        }
-    }();
-    var Transport = function() {
-        var pendingRequestsCount = 0, pendingRequests = {}, maxPendingRequests = 6, requestCache = new LruCache(10);
-        function Transport(o) {
-            o = o || {};
-            this._send = o.transport ? callbackToDeferred(o.transport) : $.ajax;
-            this._get = o.rateLimiter ? o.rateLimiter(this._get) : this._get;
-        }
-        Transport.setMaxPendingRequests = function setMaxPendingRequests(num) {
-            maxPendingRequests = num;
-        };
-        Transport.resetCache = function clearCache() {
-            requestCache = new LruCache(10);
-        };
-        _.mixin(Transport.prototype, {
-            _get: function(url, o, cb) {
-                var that = this, jqXhr;
-                if (jqXhr = pendingRequests[url]) {
-                    jqXhr.done(done).fail(fail);
-                } else if (pendingRequestsCount < maxPendingRequests) {
-                    pendingRequestsCount++;
-                    pendingRequests[url] = this._send(url, o).done(done).fail(fail).always(always);
-                } else {
-                    this.onDeckRequestArgs = [].slice.call(arguments, 0);
-                }
-                function done(resp) {
-                    cb && cb(null, resp);
-                    requestCache.set(url, resp);
-                }
-                function fail() {
-                    cb && cb(true);
-                }
-                function always() {
-                    pendingRequestsCount--;
-                    delete pendingRequests[url];
-                    if (that.onDeckRequestArgs) {
-                        that._get.apply(that, that.onDeckRequestArgs);
-                        that.onDeckRequestArgs = null;
-                    }
-                }
-            },
-            get: function(url, o, cb) {
-                var resp;
-                if (_.isFunction(o)) {
-                    cb = o;
-                    o = {};
-                }
-                if (resp = requestCache.get(url)) {
-                    _.defer(function() {
-                        cb && cb(null, resp);
-                    });
-                } else {
-                    this._get(url, o, cb);
-                }
-                return !!resp;
-            }
-        });
-        return Transport;
-        function callbackToDeferred(fn) {
-            return function customSendWrapper(url, o) {
-                var deferred = $.Deferred();
-                fn(url, o, onSuccess, onError);
-                return deferred;
-                function onSuccess(resp) {
-                    _.defer(function() {
-                        deferred.resolve(resp);
-                    });
-                }
-                function onError(err) {
-                    _.defer(function() {
-                        deferred.reject(err);
-                    });
-                }
-            };
-        }
-    }();
-    var SearchIndex = function() {
-        function SearchIndex(o) {
-            o = o || {};
-            if (!o.datumTokenizer || !o.queryTokenizer) {
-                $.error("datumTokenizer and queryTokenizer are both required");
-            }
-            this.datumTokenizer = o.datumTokenizer;
-            this.queryTokenizer = o.queryTokenizer;
-            this.reset();
-        }
-        _.mixin(SearchIndex.prototype, {
-            bootstrap: function bootstrap(o) {
-                this.datums = o.datums;
-                this.trie = o.trie;
-            },
-            add: function(data) {
-                var that = this;
-                data = _.isArray(data) ? data : [ data ];
-                _.each(data, function(datum) {
-                    var id, tokens;
-                    id = that.datums.push(datum) - 1;
-                    tokens = normalizeTokens(that.datumTokenizer(datum));
-                    _.each(tokens, function(token) {
-                        var node, chars, ch;
-                        node = that.trie;
-                        chars = token.split("");
-                        while (ch = chars.shift()) {
-                            node = node.children[ch] || (node.children[ch] = newNode());
-                            node.ids.push(id);
-                        }
-                    });
-                });
-            },
-            get: function get(query) {
-                var that = this, tokens, matches;
-                tokens = normalizeTokens(this.queryTokenizer(query));
-                _.each(tokens, function(token) {
-                    var node, chars, ch, ids;
-                    if (matches && matches.length === 0) {
-                        return false;
-                    }
-                    node = that.trie;
-                    chars = token.split("");
-                    while (node && (ch = chars.shift())) {
-                        node = node.children[ch];
-                    }
-                    if (node && chars.length === 0) {
-                        ids = node.ids.slice(0);
-                        matches = matches ? getIntersection(matches, ids) : ids;
-                    } else {
-                        matches = [];
-                        return false;
-                    }
-                });
-                return matches ? _.map(unique(matches), function(id) {
-                    return that.datums[id];
-                }) : [];
-            },
-            reset: function reset() {
-                this.datums = [];
-                this.trie = newNode();
-            },
-            serialize: function serialize() {
-                return {
-                    datums: this.datums,
-                    trie: this.trie
-                };
-            }
-        });
-        return SearchIndex;
-        function normalizeTokens(tokens) {
-            tokens = _.filter(tokens, function(token) {
-                return !!token;
-            });
-            tokens = _.map(tokens, function(token) {
-                return token.toLowerCase();
-            });
-            return tokens;
-        }
-        function newNode() {
-            return {
-                ids: [],
-                children: {}
-            };
-        }
-        function unique(array) {
-            var seen = {}, uniques = [];
-            for (var i = 0; i < array.length; i++) {
-                if (!seen[array[i]]) {
-                    seen[array[i]] = true;
-                    uniques.push(array[i]);
-                }
-            }
-            return uniques;
-        }
-        function getIntersection(arrayA, arrayB) {
-            var ai = 0, bi = 0, intersection = [];
-            arrayA = arrayA.sort(compare);
-            arrayB = arrayB.sort(compare);
-            while (ai < arrayA.length && bi < arrayB.length) {
-                if (arrayA[ai] < arrayB[bi]) {
-                    ai++;
-                } else if (arrayA[ai] > arrayB[bi]) {
-                    bi++;
-                } else {
-                    intersection.push(arrayA[ai]);
-                    ai++;
-                    bi++;
-                }
-            }
-            return intersection;
-            function compare(a, b) {
-                return a - b;
-            }
-        }
-    }();
-    var oParser = function() {
-        return {
-            local: getLocal,
-            prefetch: getPrefetch,
-            remote: getRemote
-        };
-        function getLocal(o) {
-            return o.local || null;
-        }
-        function getPrefetch(o) {
-            var prefetch, defaults;
-            defaults = {
-                url: null,
-                thumbprint: "",
-                ttl: 24 * 60 * 60 * 1e3,
-                filter: null,
-                ajax: {}
-            };
-            if (prefetch = o.prefetch || null) {
-                prefetch = _.isString(prefetch) ? {
-                    url: prefetch
-                } : prefetch;
-                prefetch = _.mixin(defaults, prefetch);
-                prefetch.thumbprint = VERSION + prefetch.thumbprint;
-                prefetch.ajax.type = prefetch.ajax.type || "GET";
-                prefetch.ajax.dataType = prefetch.ajax.dataType || "json";
-                !prefetch.url && $.error("prefetch requires url to be set");
-            }
-            return prefetch;
-        }
-        function getRemote(o) {
-            var remote, defaults;
-            defaults = {
-                url: null,
-                wildcard: "%QUERY",
-                replace: null,
-                rateLimitBy: "debounce",
-                rateLimitWait: 300,
-                send: null,
-                filter: null,
-                ajax: {}
-            };
-            if (remote = o.remote || null) {
-                remote = _.isString(remote) ? {
-                    url: remote
-                } : remote;
-                remote = _.mixin(defaults, remote);
-                remote.rateLimiter = /^throttle$/i.test(remote.rateLimitBy) ? byThrottle(remote.rateLimitWait) : byDebounce(remote.rateLimitWait);
-                remote.ajax.type = remote.ajax.type || "GET";
-                remote.ajax.dataType = remote.ajax.dataType || "json";
-                delete remote.rateLimitBy;
-                delete remote.rateLimitWait;
-                !remote.url && $.error("remote requires url to be set");
-            }
-            return remote;
-            function byDebounce(wait) {
-                return function(fn) {
-                    return _.debounce(fn, wait);
-                };
-            }
-            function byThrottle(wait) {
-                return function(fn) {
-                    return _.throttle(fn, wait);
-                };
-            }
-        }
-    }();
-    (function(root) {
-        var old, keys;
-        old = root.Bloodhound;
-        keys = {
-            data: "data",
-            protocol: "protocol",
-            thumbprint: "thumbprint"
-        };
-        root.Bloodhound = Bloodhound;
-        function Bloodhound(o) {
-            if (!o || !o.local && !o.prefetch && !o.remote) {
-                $.error("one of local, prefetch, or remote is required");
-            }
-            this.limit = o.limit || 5;
-            this.sorter = getSorter(o.sorter);
-            this.dupDetector = o.dupDetector || ignoreDuplicates;
-            this.local = oParser.local(o);
-            this.prefetch = oParser.prefetch(o);
-            this.remote = oParser.remote(o);
-            this.cacheKey = this.prefetch ? this.prefetch.cacheKey || this.prefetch.url : null;
-            this.index = new SearchIndex({
-                datumTokenizer: o.datumTokenizer,
-                queryTokenizer: o.queryTokenizer
-            });
-            this.storage = this.cacheKey ? new PersistentStorage(this.cacheKey) : null;
-        }
-        Bloodhound.noConflict = function noConflict() {
-            root.Bloodhound = old;
-            return Bloodhound;
-        };
-        Bloodhound.tokenizers = tokenizers;
-        _.mixin(Bloodhound.prototype, {
-            _loadPrefetch: function loadPrefetch(o) {
-                var that = this, serialized, deferred;
-                if (serialized = this._readFromStorage(o.thumbprint)) {
-                    this.index.bootstrap(serialized);
-                    deferred = $.Deferred().resolve();
-                } else {
-                    deferred = $.ajax(o.url, o.ajax).done(handlePrefetchResponse);
-                }
-                return deferred;
-                function handlePrefetchResponse(resp) {
-                    that.clear();
-                    that.add(o.filter ? o.filter(resp) : resp);
-                    that._saveToStorage(that.index.serialize(), o.thumbprint, o.ttl);
-                }
-            },
-            _getFromRemote: function getFromRemote(query, cb) {
-                var that = this, url, uriEncodedQuery;
-                query = query || "";
-                uriEncodedQuery = encodeURIComponent(query);
-                url = this.remote.replace ? this.remote.replace(this.remote.url, query) : this.remote.url.replace(this.remote.wildcard, uriEncodedQuery);
-                return this.transport.get(url, this.remote.ajax, handleRemoteResponse);
-                function handleRemoteResponse(err, resp) {
-                    err ? cb([]) : cb(that.remote.filter ? that.remote.filter(resp) : resp);
-                }
-            },
-            _saveToStorage: function saveToStorage(data, thumbprint, ttl) {
-                if (this.storage) {
-                    this.storage.set(keys.data, data, ttl);
-                    this.storage.set(keys.protocol, location.protocol, ttl);
-                    this.storage.set(keys.thumbprint, thumbprint, ttl);
-                }
-            },
-            _readFromStorage: function readFromStorage(thumbprint) {
-                var stored = {}, isExpired;
-                if (this.storage) {
-                    stored.data = this.storage.get(keys.data);
-                    stored.protocol = this.storage.get(keys.protocol);
-                    stored.thumbprint = this.storage.get(keys.thumbprint);
-                }
-                isExpired = stored.thumbprint !== thumbprint || stored.protocol !== location.protocol;
-                return stored.data && !isExpired ? stored.data : null;
-            },
-            _initialize: function initialize() {
-                var that = this, local = this.local, deferred;
-                deferred = this.prefetch ? this._loadPrefetch(this.prefetch) : $.Deferred().resolve();
-                local && deferred.done(addLocalToIndex);
-                this.transport = this.remote ? new Transport(this.remote) : null;
-                return this.initPromise = deferred.promise();
-                function addLocalToIndex() {
-                    that.add(_.isFunction(local) ? local() : local);
-                }
-            },
-            initialize: function initialize(force) {
-                return !this.initPromise || force ? this._initialize() : this.initPromise;
-            },
-            add: function add(data) {
-                this.index.add(data);
-            },
-            get: function get(query, cb) {
-                var that = this, matches = [], cacheHit = false;
-                matches = this.index.get(query);
-                matches = this.sorter(matches).slice(0, this.limit);
-                if (matches.length < this.limit && this.transport) {
-                    cacheHit = this._getFromRemote(query, returnRemoteMatches);
-                }
-                if (!cacheHit) {
-                    (matches.length > 0 || !this.transport) && cb && cb(matches);
-                }
-                function returnRemoteMatches(remoteMatches) {
-                    var matchesWithBackfill = matches.slice(0);
-                    _.each(remoteMatches, function(remoteMatch) {
-                        var isDuplicate;
-                        isDuplicate = _.some(matchesWithBackfill, function(match) {
-                            return that.dupDetector(remoteMatch, match);
-                        });
-                        !isDuplicate && matchesWithBackfill.push(remoteMatch);
-                        return matchesWithBackfill.length < that.limit;
-                    });
-                    cb && cb(that.sorter(matchesWithBackfill));
-                }
-            },
-            clear: function clear() {
-                this.index.reset();
-            },
-            clearPrefetchCache: function clearPrefetchCache() {
-                this.storage && this.storage.clear();
-            },
-            clearRemoteCache: function clearRemoteCache() {
-                this.transport && Transport.resetCache();
-            },
-            ttAdapter: function ttAdapter() {
-                return _.bind(this.get, this);
+  
+    DocumentedMethod.prototype = {
+      // Merge parameters across all overloaded versions of this item.
+      _getMergedParams: function() {
+        var paramNames = {};
+        var params = [];
+  
+        this.overloads.forEach(function(overload) {
+          if (!overload.params) {
+            return;
+          }
+          overload.params.forEach(function(param) {
+            if (param.name in paramNames) {
+              return;
             }
+            paramNames[param.name] = param;
+            params.push(param);
+          });
         });
-        return Bloodhound;
-        function getSorter(sortFn) {
-            return _.isFunction(sortFn) ? sort : noSort;
-            function sort(array) {
-                return array.sort(sortFn);
-            }
-            function noSort(array) {
-                return array;
-            }
-        }
-        function ignoreDuplicates() {
-            return false;
-        }
-    })(this);
-    var html = {
-        wrapper: '<span class="twitter-typeahead"></span>',
-        dropdown: '<span class="tt-dropdown-menu"></span>',
-        dataset: '<div class="tt-dataset-%CLASS%"></div>',
-        suggestions: '<span class="tt-suggestions"></span>',
-        suggestion: '<div class="tt-suggestion"></div>'
-    };
-    var css = {
-        wrapper: {
-            position: "relative",
-            display: "inline-block"
-        },
-        hint: {
-            position: "absolute",
-            top: "0",
-            left: "0",
-            borderColor: "transparent",
-            boxShadow: "none"
-        },
-        input: {
-            position: "relative",
-            verticalAlign: "top",
-            backgroundColor: "transparent"
-        },
-        inputWithNoHint: {
-            position: "relative",
-            verticalAlign: "top"
-        },
-        dropdown: {
-            position: "absolute",
-            top: "100%",
-            left: "0",
-            zIndex: "100",
-            display: "none"
-        },
-        suggestions: {
-            display: "block"
-        },
-        suggestion: {
-            whiteSpace: "nowrap",
-            cursor: "pointer"
-        },
-        suggestionChild: {
-            whiteSpace: "normal"
-        },
-        ltr: {
-            left: "0",
-            right: "auto"
-        },
-        rtl: {
-            left: "auto",
-            right: " 0"
-        }
+  
+        return params;
+      }
     };
-    if (_.isMsie()) {
-        _.mixin(css.input, {
-            backgroundImage: "url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)"
-        });
-    }
-    if (_.isMsie() && _.isMsie() <= 7) {
-        _.mixin(css.input, {
-            marginTop: "-1px"
-        });
-    }
-    var EventBus = function() {
-        var namespace = "typeahead:";
-        function EventBus(o) {
-            if (!o || !o.el) {
-                $.error("EventBus initialized without el");
-            }
-            this.$el = $(o.el);
-        }
-        _.mixin(EventBus.prototype, {
-            trigger: function(type) {
-                var args = [].slice.call(arguments, 1);
-                this.$el.trigger(namespace + type, args);
-            }
-        });
-        return EventBus;
-    }();
-    var EventEmitter = function() {
-        var splitter = /\s+/, nextTick = getNextTick();
-        return {
-            onSync: onSync,
-            onAsync: onAsync,
-            off: off,
-            trigger: trigger
-        };
-        function on(method, types, cb, context) {
-            var type;
-            if (!cb) {
-                return this;
-            }
-            types = types.split(splitter);
-            cb = context ? bindContext(cb, context) : cb;
-            this._callbacks = this._callbacks || {};
-            while (type = types.shift()) {
-                this._callbacks[type] = this._callbacks[type] || {
-                    sync: [],
-                    async: []
-                };
-                this._callbacks[type][method].push(cb);
-            }
-            return this;
-        }
-        function onAsync(types, cb, context) {
-            return on.call(this, "async", types, cb, context);
-        }
-        function onSync(types, cb, context) {
-            return on.call(this, "sync", types, cb, context);
-        }
-        function off(types) {
-            var type;
-            if (!this._callbacks) {
-                return this;
-            }
-            types = types.split(splitter);
-            while (type = types.shift()) {
-                delete this._callbacks[type];
-            }
-            return this;
-        }
-        function trigger(types) {
-            var type, callbacks, args, syncFlush, asyncFlush;
-            if (!this._callbacks) {
-                return this;
-            }
-            types = types.split(splitter);
-            args = [].slice.call(arguments, 1);
-            while ((type = types.shift()) && (callbacks = this._callbacks[type])) {
-                syncFlush = getFlush(callbacks.sync, this, [ type ].concat(args));
-                asyncFlush = getFlush(callbacks.async, this, [ type ].concat(args));
-                syncFlush() && nextTick(asyncFlush);
-            }
-            return this;
-        }
-        function getFlush(callbacks, context, args) {
-            return flush;
-            function flush() {
-                var cancelled;
-                for (var i = 0; !cancelled && i < callbacks.length; i += 1) {
-                    cancelled = callbacks[i].apply(context, args) === false;
-                }
-                return !cancelled;
-            }
-        }
-        function getNextTick() {
-            var nextTickFn;
-            if (window.setImmediate) {
-                nextTickFn = function nextTickSetImmediate(fn) {
-                    setImmediate(function() {
-                        fn();
-                    });
-                };
-            } else {
-                nextTickFn = function nextTickSetTimeout(fn) {
-                    setTimeout(function() {
-                        fn();
-                    }, 0);
-                };
-            }
-            return nextTickFn;
-        }
-        function bindContext(fn, context) {
-            return fn.bind ? fn.bind(context) : function() {
-                fn.apply(context, [].slice.call(arguments, 0));
-            };
-        }
-    }();
-    var highlight = function(doc) {
-        var defaults = {
-            node: null,
-            pattern: null,
-            tagName: "strong",
-            className: null,
-            wordsOnly: false,
-            caseSensitive: false
-        };
-        return function hightlight(o) {
-            var regex;
-            o = _.mixin({}, defaults, o);
-            if (!o.node || !o.pattern) {
-                return;
-            }
-            o.pattern = _.isArray(o.pattern) ? o.pattern : [ o.pattern ];
-            regex = getRegex(o.pattern, o.caseSensitive, o.wordsOnly);
-            traverse(o.node, hightlightTextNode);
-            function hightlightTextNode(textNode) {
-                var match, patternNode;
-                if (match = regex.exec(textNode.data)) {
-                    wrapperNode = doc.createElement(o.tagName);
-                    o.className && (wrapperNode.className = o.className);
-                    patternNode = textNode.splitText(match.index);
-                    patternNode.splitText(match[0].length);
-                    wrapperNode.appendChild(patternNode.cloneNode(true));
-                    textNode.parentNode.replaceChild(wrapperNode, patternNode);
-                }
-                return !!match;
-            }
-            function traverse(el, hightlightTextNode) {
-                var childNode, TEXT_NODE_TYPE = 3;
-                for (var i = 0; i < el.childNodes.length; i++) {
-                    childNode = el.childNodes[i];
-                    if (childNode.nodeType === TEXT_NODE_TYPE) {
-                        i += hightlightTextNode(childNode) ? 1 : 0;
-                    } else {
-                        traverse(childNode, hightlightTextNode);
-                    }
-                }
-            }
-        };
-        function getRegex(patterns, caseSensitive, wordsOnly) {
-            var escapedPatterns = [], regexStr;
-            for (var i = 0; i < patterns.length; i++) {
-                escapedPatterns.push(_.escapeRegExChars(patterns[i]));
-            }
-            regexStr = wordsOnly ? "\\b(" + escapedPatterns.join("|") + ")\\b" : "(" + escapedPatterns.join("|") + ")";
-            return caseSensitive ? new RegExp(regexStr) : new RegExp(regexStr, "i");
-        }
-    }(window.document);
-    var Input = function() {
-        var specialKeyCodeMap;
-        specialKeyCodeMap = {
-            9: "tab",
-            27: "esc",
-            37: "left",
-            39: "right",
-            13: "enter",
-            38: "up",
-            40: "down"
-        };
-        function Input(o) {
-            var that = this, onBlur, onFocus, onKeydown, onInput;
-            o = o || {};
-            if (!o.input) {
-                $.error("input is missing");
-            }
-            onBlur = _.bind(this._onBlur, this);
-            onFocus = _.bind(this._onFocus, this);
-            onKeydown = _.bind(this._onKeydown, this);
-            onInput = _.bind(this._onInput, this);
-            this.$hint = $(o.hint);
-            this.$input = $(o.input).on("blur.tt", onBlur).on("focus.tt", onFocus).on("keydown.tt", onKeydown);
-            if (this.$hint.length === 0) {
-                this.setHint = this.getHint = this.clearHint = this.clearHintIfInvalid = _.noop;
-            }
-            if (!_.isMsie()) {
-                this.$input.on("input.tt", onInput);
-            } else {
-                this.$input.on("keydown.tt keypress.tt cut.tt paste.tt", function($e) {
-                    if (specialKeyCodeMap[$e.which || $e.keyCode]) {
-                        return;
-                    }
-                    _.defer(_.bind(that._onInput, that, $e));
-                });
-            }
-            this.query = this.$input.val();
-            this.$overflowHelper = buildOverflowHelper(this.$input);
-        }
-        Input.normalizeQuery = function(str) {
-            return (str || "").replace(/^\s*/g, "").replace(/\s{2,}/g, " ");
-        };
-        _.mixin(Input.prototype, EventEmitter, {
-            _onBlur: function onBlur() {
-                this.resetInputValue();
-                this.trigger("blurred");
-            },
-            _onFocus: function onFocus() {
-                this.trigger("focused");
-            },
-            _onKeydown: function onKeydown($e) {
-                var keyName = specialKeyCodeMap[$e.which || $e.keyCode];
-                this._managePreventDefault(keyName, $e);
-                if (keyName && this._shouldTrigger(keyName, $e)) {
-                    this.trigger(keyName + "Keyed", $e);
-                }
-            },
-            _onInput: function onInput() {
-                this._checkInputValue();
-            },
-            _managePreventDefault: function managePreventDefault(keyName, $e) {
-                var preventDefault, hintValue, inputValue;
-                switch (keyName) {
-                  case "tab":
-                    hintValue = this.getHint();
-                    inputValue = this.getInputValue();
-                    preventDefault = hintValue && hintValue !== inputValue && !withModifier($e);
-                    break;
-
-                  case "up":
-                  case "down":
-                    preventDefault = !withModifier($e);
-                    break;
-
-                  default:
-                    preventDefault = false;
-                }
-                preventDefault && $e.preventDefault();
-            },
-            _shouldTrigger: function shouldTrigger(keyName, $e) {
-                var trigger;
-                switch (keyName) {
-                  case "tab":
-                    trigger = !withModifier($e);
-                    break;
-
-                  default:
-                    trigger = true;
-                }
-                return trigger;
-            },
-            _checkInputValue: function checkInputValue() {
-                var inputValue, areEquivalent, hasDifferentWhitespace;
-                inputValue = this.getInputValue();
-                areEquivalent = areQueriesEquivalent(inputValue, this.query);
-                hasDifferentWhitespace = areEquivalent ? this.query.length !== inputValue.length : false;
-                if (!areEquivalent) {
-                    this.trigger("queryChanged", this.query = inputValue);
-                } else if (hasDifferentWhitespace) {
-                    this.trigger("whitespaceChanged", this.query);
-                }
-            },
-            focus: function focus() {
-                this.$input.focus();
-            },
-            blur: function blur() {
-                this.$input.blur();
-            },
-            getQuery: function getQuery() {
-                return this.query;
-            },
-            setQuery: function setQuery(query) {
-                this.query = query;
-            },
-            getInputValue: function getInputValue() {
-                return this.$input.val();
-            },
-            setInputValue: function setInputValue(value, silent) {
-                this.$input.val(value);
-                silent ? this.clearHint() : this._checkInputValue();
-            },
-            resetInputValue: function resetInputValue() {
-                this.setInputValue(this.query, true);
-            },
-            getHint: function getHint() {
-                return this.$hint.val();
-            },
-            setHint: function setHint(value) {
-                this.$hint.val(value);
-            },
-            clearHint: function clearHint() {
-                this.setHint("");
-            },
-            clearHintIfInvalid: function clearHintIfInvalid() {
-                var val, hint, valIsPrefixOfHint, isValid;
-                val = this.getInputValue();
-                hint = this.getHint();
-                valIsPrefixOfHint = val !== hint && hint.indexOf(val) === 0;
-                isValid = val !== "" && valIsPrefixOfHint && !this.hasOverflow();
-                !isValid && this.clearHint();
-            },
-            getLanguageDirection: function getLanguageDirection() {
-                return (this.$input.css("direction") || "ltr").toLowerCase();
-            },
-            hasOverflow: function hasOverflow() {
-                var constraint = this.$input.width() - 2;
-                this.$overflowHelper.text(this.getInputValue());
-                return this.$overflowHelper.width() >= constraint;
-            },
-            isCursorAtEnd: function() {
-                var valueLength, selectionStart, range;
-                valueLength = this.$input.val().length;
-                selectionStart = this.$input[0].selectionStart;
-                if (_.isNumber(selectionStart)) {
-                    return selectionStart === valueLength;
-                } else if (document.selection) {
-                    range = document.selection.createRange();
-                    range.moveStart("character", -valueLength);
-                    return valueLength === range.text.length;
-                }
-                return true;
-            },
-            destroy: function destroy() {
-                this.$hint.off(".tt");
-                this.$input.off(".tt");
-                this.$hint = this.$input = this.$overflowHelper = null;
-            }
-        });
-        return Input;
-        function buildOverflowHelper($input) {
-            return $('<pre aria-hidden="true"></pre>').css({
-                position: "absolute",
-                visibility: "hidden",
-                whiteSpace: "pre",
-                fontFamily: $input.css("font-family"),
-                fontSize: $input.css("font-size"),
-                fontStyle: $input.css("font-style"),
-                fontVariant: $input.css("font-variant"),
-                fontWeight: $input.css("font-weight"),
-                wordSpacing: $input.css("word-spacing"),
-                letterSpacing: $input.css("letter-spacing"),
-                textIndent: $input.css("text-indent"),
-                textRendering: $input.css("text-rendering"),
-                textTransform: $input.css("text-transform")
-            }).insertAfter($input);
-        }
-        function areQueriesEquivalent(a, b) {
-            return Input.normalizeQuery(a) === Input.normalizeQuery(b);
-        }
-        function withModifier($e) {
-            return $e.altKey || $e.ctrlKey || $e.metaKey || $e.shiftKey;
-        }
-    }();
-    var Dataset = function() {
-        var datasetKey = "ttDataset", valueKey = "ttValue", datumKey = "ttDatum";
-        function Dataset(o) {
-            o = o || {};
-            o.templates = o.templates || {};
-            if (!o.source) {
-                $.error("missing source");
-            }
-            if (o.name && !isValidName(o.name)) {
-                $.error("invalid dataset name: " + o.name);
-            }
-            this.query = null;
-            this.highlight = !!o.highlight;
-            this.name = o.name || _.getUniqueId();
-            this.source = o.source;
-            this.displayFn = getDisplayFn(o.display || o.displayKey);
-            this.templates = getTemplates(o.templates, this.displayFn);
-            this.$el = $(html.dataset.replace("%CLASS%", this.name));
-        }
-        Dataset.extractDatasetName = function extractDatasetName(el) {
-            return $(el).data(datasetKey);
-        };
-        Dataset.extractValue = function extractDatum(el) {
-            return $(el).data(valueKey);
-        };
-        Dataset.extractDatum = function extractDatum(el) {
-            return $(el).data(datumKey);
-        };
-        _.mixin(Dataset.prototype, EventEmitter, {
-            _render: function render(query, suggestions) {
-                if (!this.$el) {
-                    return;
-                }
-                var that = this, hasSuggestions;
-                this.$el.empty();
-                hasSuggestions = suggestions && suggestions.length;
-                if (!hasSuggestions && this.templates.empty) {
-                    this.$el.html(getEmptyHtml()).prepend(that.templates.header ? getHeaderHtml() : null).append(that.templates.footer ? getFooterHtml() : null);
-                } else if (hasSuggestions) {
-                    this.$el.html(getSuggestionsHtml()).prepend(that.templates.header ? getHeaderHtml() : null).append(that.templates.footer ? getFooterHtml() : null);
-                }
-                this.trigger("rendered");
-                function getEmptyHtml() {
-                    return that.templates.empty({
-                        query: query,
-                        isEmpty: true
-                    });
-                }
-                function getSuggestionsHtml() {
-                    var $suggestions, nodes;
-                    $suggestions = $(html.suggestions).css(css.suggestions);
-                    nodes = _.map(suggestions, getSuggestionNode);
-                    $suggestions.append.apply($suggestions, nodes);
-                    that.highlight && highlight({
-                        node: $suggestions[0],
-                        pattern: query
-                    });
-                    return $suggestions;
-                    function getSuggestionNode(suggestion) {
-                        var $el;
-                        $el = $(html.suggestion).append(that.templates.suggestion(suggestion)).data(datasetKey, that.name).data(valueKey, that.displayFn(suggestion)).data(datumKey, suggestion);
-                        $el.children().each(function() {
-                            $(this).css(css.suggestionChild);
-                        });
-                        return $el;
-                    }
-                }
-                function getHeaderHtml() {
-                    return that.templates.header({
-                        query: query,
-                        isEmpty: !hasSuggestions
-                    });
-                }
-                function getFooterHtml() {
-                    return that.templates.footer({
-                        query: query,
-                        isEmpty: !hasSuggestions
-                    });
-                }
-            },
-            getRoot: function getRoot() {
-                return this.$el;
-            },
-            update: function update(query) {
-                var that = this;
-                this.query = query;
-                this.canceled = false;
-                this.source(query, render);
-                function render(suggestions) {
-                    if (!that.canceled && query === that.query) {
-                        that._render(query, suggestions);
-                    }
-                }
-            },
-            cancel: function cancel() {
-                this.canceled = true;
-            },
-            clear: function clear() {
-                this.cancel();
-                this.$el.empty();
-                this.trigger("rendered");
-            },
-            isEmpty: function isEmpty() {
-                return this.$el.is(":empty");
-            },
-            destroy: function destroy() {
-                this.$el = null;
-            }
+  
+    return DocumentedMethod;
+  }));
+  
+  /**
+   * @license RequireJS text 2.0.10 Copyright (c) 2010-2012, The Dojo Foundation All Rights Reserved.
+   * Available via the MIT or new BSD license.
+   * see: http://github.com/requirejs/text for details
+   */
+  /*jslint regexp: true */
+  /*global require, XMLHttpRequest, ActiveXObject,
+    define, window, process, Packages,
+    java, location, Components, FileUtils */
+  
+  define('text',['module'], function (module) {
+      'use strict';
+  
+      var text, fs, Cc, Ci, xpcIsWindows,
+          progIds = ['Msxml2.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.4.0'],
+          xmlRegExp = /^\s*<\?xml(\s)+version=[\'\"](\d)*.(\d)*[\'\"](\s)*\?>/im,
+          bodyRegExp = /<body[^>]*>\s*([\s\S]+)\s*<\/body>/im,
+          hasLocation = typeof location !== 'undefined' && location.href,
+          defaultProtocol = hasLocation && location.protocol && location.protocol.replace(/\:/, ''),
+          defaultHostName = hasLocation && location.hostname,
+          defaultPort = hasLocation && (location.port || undefined),
+          buildMap = {},
+          masterConfig = (module.config && module.config()) || {};
+  
+      text = {
+          version: '2.0.10',
+  
+          strip: function (content) {
+              //Strips <?xml ...?> declarations so that external SVG and XML
+              //documents can be added to a document without worry. Also, if the string
+              //is an HTML document, only the part inside the body tag is returned.
+              if (content) {
+                  content = content.replace(xmlRegExp, "");
+                  var matches = content.match(bodyRegExp);
+                  if (matches) {
+                      content = matches[1];
+                  }
+              } else {
+                  content = "";
+              }
+              return content;
+          },
+  
+          jsEscape: function (content) {
+              return content.replace(/(['\\])/g, '\\$1')
+                  .replace(/[\f]/g, "\\f")
+                  .replace(/[\b]/g, "\\b")
+                  .replace(/[\n]/g, "\\n")
+                  .replace(/[\t]/g, "\\t")
+                  .replace(/[\r]/g, "\\r")
+                  .replace(/[\u2028]/g, "\\u2028")
+                  .replace(/[\u2029]/g, "\\u2029");
+          },
+  
+          createXhr: masterConfig.createXhr || function () {
+              //Would love to dump the ActiveX crap in here. Need IE 6 to die first.
+              var xhr, i, progId;
+              if (typeof XMLHttpRequest !== "undefined") {
+                  return new XMLHttpRequest();
+              } else if (typeof ActiveXObject !== "undefined") {
+                  for (i = 0; i < 3; i += 1) {
+                      progId = progIds[i];
+                      try {
+                          xhr = new ActiveXObject(progId);
+                      } catch (e) {}
+  
+                      if (xhr) {
+                          progIds = [progId];  // so faster next time
+                          break;
+                      }
+                  }
+              }
+  
+              return xhr;
+          },
+  
+          /**
+           * Parses a resource name into its component parts. Resource names
+           * look like: module/name.ext!strip, where the !strip part is
+           * optional.
+           * @param {String} name the resource name
+           * @returns {Object} with properties "moduleName", "ext" and "strip"
+           * where strip is a boolean.
+           */
+          parseName: function (name) {
+              var modName, ext, temp,
+                  strip = false,
+                  index = name.indexOf("."),
+                  isRelative = name.indexOf('./') === 0 ||
+                               name.indexOf('../') === 0;
+  
+              if (index !== -1 && (!isRelative || index > 1)) {
+                  modName = name.substring(0, index);
+                  ext = name.substring(index + 1, name.length);
+              } else {
+                  modName = name;
+              }
+  
+              temp = ext || modName;
+              index = temp.indexOf("!");
+              if (index !== -1) {
+                  //Pull off the strip arg.
+                  strip = temp.substring(index + 1) === "strip";
+                  temp = temp.substring(0, index);
+                  if (ext) {
+                      ext = temp;
+                  } else {
+                      modName = temp;
+                  }
+              }
+  
+              return {
+                  moduleName: modName,
+                  ext: ext,
+                  strip: strip
+              };
+          },
+  
+          xdRegExp: /^((\w+)\:)?\/\/([^\/\\]+)/,
+  
+          /**
+           * Is an URL on another domain. Only works for browser use, returns
+           * false in non-browser environments. Only used to know if an
+           * optimized .js version of a text resource should be loaded
+           * instead.
+           * @param {String} url
+           * @returns Boolean
+           */
+          useXhr: function (url, protocol, hostname, port) {
+              var uProtocol, uHostName, uPort,
+                  match = text.xdRegExp.exec(url);
+              if (!match) {
+                  return true;
+              }
+              uProtocol = match[2];
+              uHostName = match[3];
+  
+              uHostName = uHostName.split(':');
+              uPort = uHostName[1];
+              uHostName = uHostName[0];
+  
+              return (!uProtocol || uProtocol === protocol) &&
+                     (!uHostName || uHostName.toLowerCase() === hostname.toLowerCase()) &&
+                     ((!uPort && !uHostName) || uPort === port);
+          },
+  
+          finishLoad: function (name, strip, content, onLoad) {
+              content = strip ? text.strip(content) : content;
+              if (masterConfig.isBuild) {
+                  buildMap[name] = content;
+              }
+              onLoad(content);
+          },
+  
+          load: function (name, req, onLoad, config) {
+              //Name has format: some.module.filext!strip
+              //The strip part is optional.
+              //if strip is present, then that means only get the string contents
+              //inside a body tag in an HTML string. For XML/SVG content it means
+              //removing the <?xml ...?> declarations so the content can be inserted
+              //into the current doc without problems.
+  
+              // Do not bother with the work if a build and text will
+              // not be inlined.
+              if (config.isBuild && !config.inlineText) {
+                  onLoad();
+                  return;
+              }
+  
+              masterConfig.isBuild = config.isBuild;
+  
+              var parsed = text.parseName(name),
+                  nonStripName = parsed.moduleName +
+                      (parsed.ext ? '.' + parsed.ext : ''),
+                  url = req.toUrl(nonStripName),
+                  useXhr = (masterConfig.useXhr) ||
+                           text.useXhr;
+  
+              // Do not load if it is an empty: url
+              if (url.indexOf('empty:') === 0) {
+                  onLoad();
+                  return;
+              }
+  
+              //Load the text. Use XHR if possible and in a browser.
+              if (!hasLocation || useXhr(url, defaultProtocol, defaultHostName, defaultPort)) {
+                  text.get(url, function (content) {
+                      text.finishLoad(name, parsed.strip, content, onLoad);
+                  }, function (err) {
+                      if (onLoad.error) {
+                          onLoad.error(err);
+                      }
+                  });
+              } else {
+                  //Need to fetch the resource across domains. Assume
+                  //the resource has been optimized into a JS module. Fetch
+                  //by the module name + extension, but do not include the
+                  //!strip part to avoid file system issues.
+                  req([nonStripName], function (content) {
+                      text.finishLoad(parsed.moduleName + '.' + parsed.ext,
+                                      parsed.strip, content, onLoad);
+                  });
+              }
+          },
+  
+          write: function (pluginName, moduleName, write, config) {
+              if (buildMap.hasOwnProperty(moduleName)) {
+                  var content = text.jsEscape(buildMap[moduleName]);
+                  write.asModule(pluginName + "!" + moduleName,
+                                 "define(function () { return '" +
+                                     content +
+                                 "';});\n");
+              }
+          },
+  
+          writeFile: function (pluginName, moduleName, req, write, config) {
+              var parsed = text.parseName(moduleName),
+                  extPart = parsed.ext ? '.' + parsed.ext : '',
+                  nonStripName = parsed.moduleName + extPart,
+                  //Use a '.js' file name so that it indicates it is a
+                  //script that can be loaded across domains.
+                  fileName = req.toUrl(parsed.moduleName + extPart) + '.js';
+  
+              //Leverage own load() method to load plugin value, but only
+              //write out values that do not have the strip argument,
+              //to avoid any potential issues with ! in file names.
+              text.load(nonStripName, req, function (value) {
+                  //Use own write() method to construct full module value.
+                  //But need to create shell that translates writeFile's
+                  //write() to the right interface.
+                  var textWrite = function (contents) {
+                      return write(fileName, contents);
+                  };
+                  textWrite.asModule = function (moduleName, contents) {
+                      return write.asModule(moduleName, fileName, contents);
+                  };
+  
+                  text.write(pluginName, nonStripName, textWrite, config);
+              }, config);
+          }
+      };
+  
+      if (masterConfig.env === 'node' || (!masterConfig.env &&
+              typeof process !== "undefined" &&
+              process.versions &&
+              !!process.versions.node &&
+              !process.versions['node-webkit'])) {
+          //Using special require.nodeRequire, something added by r.js.
+          fs = require.nodeRequire('fs');
+  
+          text.get = function (url, callback, errback) {
+              try {
+                  var file = fs.readFileSync(url, 'utf8');
+                  //Remove BOM (Byte Mark Order) from utf8 files if it is there.
+                  if (file.indexOf('\uFEFF') === 0) {
+                      file = file.substring(1);
+                  }
+                  callback(file);
+              } catch (e) {
+                  errback(e);
+              }
+          };
+      } else if (masterConfig.env === 'xhr' || (!masterConfig.env &&
+              text.createXhr())) {
+          text.get = function (url, callback, errback, headers) {
+              var xhr = text.createXhr(), header;
+              xhr.open('GET', url, true);
+  
+              //Allow plugins direct access to xhr headers
+              if (headers) {
+                  for (header in headers) {
+                      if (headers.hasOwnProperty(header)) {
+                          xhr.setRequestHeader(header.toLowerCase(), headers[header]);
+                      }
+                  }
+              }
+  
+              //Allow overrides specified in config
+              if (masterConfig.onXhr) {
+                  masterConfig.onXhr(xhr, url);
+              }
+  
+              xhr.onreadystatechange = function (evt) {
+                  var status, err;
+                  //Do not explicitly handle errors, those should be
+                  //visible via console output in the browser.
+                  if (xhr.readyState === 4) {
+                      status = xhr.status;
+                      if (status > 399 && status < 600) {
+                          //An http 4xx or 5xx error. Signal an error.
+                          err = new Error(url + ' HTTP status: ' + status);
+                          err.xhr = xhr;
+                          errback(err);
+                      } else {
+                          callback(xhr.responseText);
+                      }
+  
+                      if (masterConfig.onXhrComplete) {
+                          masterConfig.onXhrComplete(xhr, url);
+                      }
+                  }
+              };
+              xhr.send(null);
+          };
+      } else if (masterConfig.env === 'rhino' || (!masterConfig.env &&
+              typeof Packages !== 'undefined' && typeof java !== 'undefined')) {
+          //Why Java, why is this so awkward?
+          text.get = function (url, callback) {
+              var stringBuffer, line,
+                  encoding = "utf-8",
+                  file = new java.io.File(url),
+                  lineSeparator = java.lang.System.getProperty("line.separator"),
+                  input = new java.io.BufferedReader(new java.io.InputStreamReader(new java.io.FileInputStream(file), encoding)),
+                  content = '';
+              try {
+                  stringBuffer = new java.lang.StringBuffer();
+                  line = input.readLine();
+  
+                  // Byte Order Mark (BOM) - The Unicode Standard, version 3.0, page 324
+                  // http://www.unicode.org/faq/utf_bom.html
+  
+                  // Note that when we use utf-8, the BOM should appear as "EF BB BF", but it doesn't due to this bug in the JDK:
+                  // http://bugs.sun.com/bugdatabase/view_bug.do?bug_id=4508058
+                  if (line && line.length() && line.charAt(0) === 0xfeff) {
+                      // Eat the BOM, since we've already found the encoding on this file,
+                      // and we plan to concatenating this buffer with others; the BOM should
+                      // only appear at the top of a file.
+                      line = line.substring(1);
+                  }
+  
+                  if (line !== null) {
+                      stringBuffer.append(line);
+                  }
+  
+                  while ((line = input.readLine()) !== null) {
+                      stringBuffer.append(lineSeparator);
+                      stringBuffer.append(line);
+                  }
+                  //Make sure we return a JavaScript string and not a Java string.
+                  content = String(stringBuffer.toString()); //String
+              } finally {
+                  input.close();
+              }
+              callback(content);
+          };
+      } else if (masterConfig.env === 'xpconnect' || (!masterConfig.env &&
+              typeof Components !== 'undefined' && Components.classes &&
+              Components.interfaces)) {
+          //Avert your gaze!
+          Cc = Components.classes,
+          Ci = Components.interfaces;
+          Components.utils['import']('resource://gre/modules/FileUtils.jsm');
+          xpcIsWindows = ('@mozilla.org/windows-registry-key;1' in Cc);
+  
+          text.get = function (url, callback) {
+              var inStream, convertStream, fileObj,
+                  readData = {};
+  
+              if (xpcIsWindows) {
+                  url = url.replace(/\//g, '\\');
+              }
+  
+              fileObj = new FileUtils.File(url);
+  
+              //XPCOM, you so crazy
+              try {
+                  inStream = Cc['@mozilla.org/network/file-input-stream;1']
+                             .createInstance(Ci.nsIFileInputStream);
+                  inStream.init(fileObj, 1, 0, false);
+  
+                  convertStream = Cc['@mozilla.org/intl/converter-input-stream;1']
+                                  .createInstance(Ci.nsIConverterInputStream);
+                  convertStream.init(inStream, "utf-8", inStream.available(),
+                  Ci.nsIConverterInputStream.DEFAULT_REPLACEMENT_CHARACTER);
+  
+                  convertStream.readString(inStream.available(), readData);
+                  convertStream.close();
+                  inStream.close();
+                  callback(readData.value);
+              } catch (e) {
+                  throw new Error((fileObj && fileObj.path || '') + ': ' + e);
+              }
+          };
+      }
+      return text;
+  });
+  
+  
+  define('text!tpl/search.html',[],function () { return '<h2 class="sr-only">search</h2>\n<form>\n  <input id="search_reference_field" type="text" class="<%=className%>" value="" placeholder="<%=placeholder%>" aria-label="search reference">\n  <label class="sr-only" for="search_reference_field">Search reference</label>\n</form>\n\n';});
+  
+  
+  define('text!tpl/search_suggestion.html',[],function () { return '<p id="index-<%=idx%>" class="search-suggestion">\n\n  <strong><%=name%></strong>\n\n  <span class="small">\n    <% if (final) { %>\n    constant\n    <% } else if (itemtype) { %>\n    <%=itemtype%> \n    <% } %>\n\n    <% if (className) { %>\n    in <strong><%=className%></strong>\n    <% } %>\n\n    <% if (typeof is_constructor !== \'undefined\' && is_constructor) { %>\n    <strong><span class="glyphicon glyphicon-star"></span> constructor</strong>\n    <% } %>\n  </span>\n\n</p>';});
+  
+  /*!
+   * typeahead.js 0.10.2
+   * https://github.com/twitter/typeahead.js
+   * Copyright 2013-2014 Twitter, Inc. and other contributors; Licensed MIT
+   */
+  define('typeahead',[], function() {
+  
+  //(function($) {
+  
+  
+      var _ = {
+          isMsie: function() {
+              return /(msie|trident)/i.test(navigator.userAgent) ? navigator.userAgent.match(/(msie |rv:)(\d+(.\d+)?)/i)[2] : false;
+          },
+          isBlankString: function(str) {
+              return !str || /^\s*$/.test(str);
+          },
+          escapeRegExChars: function(str) {
+              return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
+          },
+          isString: function(obj) {
+              return typeof obj === "string";
+          },
+          isNumber: function(obj) {
+              return typeof obj === "number";
+          },
+          isArray: $.isArray,
+          isFunction: $.isFunction,
+          isObject: $.isPlainObject,
+          isUndefined: function(obj) {
+              return typeof obj === "undefined";
+          },
+          bind: $.proxy,
+          each: function(collection, cb) {
+              $.each(collection, reverseArgs);
+              function reverseArgs(index, value) {
+                  return cb(value, index);
+              }
+          },
+          map: $.map,
+          filter: $.grep,
+          every: function(obj, test) {
+              var result = true;
+              if (!obj) {
+                  return result;
+              }
+              $.each(obj, function(key, val) {
+                  if (!(result = test.call(null, val, key, obj))) {
+                      return false;
+                  }
+              });
+              return !!result;
+          },
+          some: function(obj, test) {
+              var result = false;
+              if (!obj) {
+                  return result;
+              }
+              $.each(obj, function(key, val) {
+                  if (result = test.call(null, val, key, obj)) {
+                      return false;
+                  }
+              });
+              return !!result;
+          },
+          mixin: $.extend,
+          getUniqueId: function() {
+              var counter = 0;
+              return function() {
+                  return counter++;
+              };
+          }(),
+          templatify: function templatify(obj) {
+              return $.isFunction(obj) ? obj : template;
+              function template() {
+                  return String(obj);
+              }
+          },
+          defer: function(fn) {
+              setTimeout(fn, 0);
+          },
+          debounce: function(func, wait, immediate) {
+              var timeout, result;
+              return function() {
+                  var context = this, args = arguments, later, callNow;
+                  later = function() {
+                      timeout = null;
+                      if (!immediate) {
+                          result = func.apply(context, args);
+                      }
+                  };
+                  callNow = immediate && !timeout;
+                  clearTimeout(timeout);
+                  timeout = setTimeout(later, wait);
+                  if (callNow) {
+                      result = func.apply(context, args);
+                  }
+                  return result;
+              };
+          },
+          throttle: function(func, wait) {
+              var context, args, timeout, result, previous, later;
+              previous = 0;
+              later = function() {
+                  previous = new Date();
+                  timeout = null;
+                  result = func.apply(context, args);
+              };
+              return function() {
+                  var now = new Date(), remaining = wait - (now - previous);
+                  context = this;
+                  args = arguments;
+                  if (remaining <= 0) {
+                      clearTimeout(timeout);
+                      timeout = null;
+                      previous = now;
+                      result = func.apply(context, args);
+                  } else if (!timeout) {
+                      timeout = setTimeout(later, remaining);
+                  }
+                  return result;
+              };
+          },
+          noop: function() {}
+      };
+      var VERSION = "0.10.2";
+      var tokenizers = function(root) {
+          return {
+              nonword: nonword,
+              whitespace: whitespace,
+              obj: {
+                  nonword: getObjTokenizer(nonword),
+                  whitespace: getObjTokenizer(whitespace)
+              }
+          };
+          function whitespace(s) {
+              return s.split(/\s+/);
+          }
+          function nonword(s) {
+              return s.split(/\W+/);
+          }
+          function getObjTokenizer(tokenizer) {
+              return function setKey(key) {
+                  return function tokenize(o) {
+                      return tokenizer(o[key]);
+                  };
+              };
+          }
+      }();
+      var LruCache = function() {
+          function LruCache(maxSize) {
+              this.maxSize = maxSize || 100;
+              this.size = 0;
+              this.hash = {};
+              this.list = new List();
+          }
+          _.mixin(LruCache.prototype, {
+              set: function set(key, val) {
+                  var tailItem = this.list.tail, node;
+                  if (this.size >= this.maxSize) {
+                      this.list.remove(tailItem);
+                      delete this.hash[tailItem.key];
+                  }
+                  if (node = this.hash[key]) {
+                      node.val = val;
+                      this.list.moveToFront(node);
+                  } else {
+                      node = new Node(key, val);
+                      this.list.add(node);
+                      this.hash[key] = node;
+                      this.size++;
+                  }
+              },
+              get: function get(key) {
+                  var node = this.hash[key];
+                  if (node) {
+                      this.list.moveToFront(node);
+                      return node.val;
+                  }
+              }
+          });
+          function List() {
+              this.head = this.tail = null;
+          }
+          _.mixin(List.prototype, {
+              add: function add(node) {
+                  if (this.head) {
+                      node.next = this.head;
+                      this.head.prev = node;
+                  }
+                  this.head = node;
+                  this.tail = this.tail || node;
+              },
+              remove: function remove(node) {
+                  node.prev ? node.prev.next = node.next : this.head = node.next;
+                  node.next ? node.next.prev = node.prev : this.tail = node.prev;
+              },
+              moveToFront: function(node) {
+                  this.remove(node);
+                  this.add(node);
+              }
+          });
+          function Node(key, val) {
+              this.key = key;
+              this.val = val;
+              this.prev = this.next = null;
+          }
+          return LruCache;
+      }();
+      var PersistentStorage = function() {
+          var ls, methods;
+          try {
+              ls = window.localStorage;
+              ls.setItem("~~~", "!");
+              ls.removeItem("~~~");
+          } catch (err) {
+              ls = null;
+          }
+          function PersistentStorage(namespace) {
+              this.prefix = [ "__", namespace, "__" ].join("");
+              this.ttlKey = "__ttl__";
+              this.keyMatcher = new RegExp("^" + this.prefix);
+          }
+          if (ls && window.JSON) {
+              methods = {
+                  _prefix: function(key) {
+                      return this.prefix + key;
+                  },
+                  _ttlKey: function(key) {
+                      return this._prefix(key) + this.ttlKey;
+                  },
+                  get: function(key) {
+                      if (this.isExpired(key)) {
+                          this.remove(key);
+                      }
+                      return decode(ls.getItem(this._prefix(key)));
+                  },
+                  set: function(key, val, ttl) {
+                      if (_.isNumber(ttl)) {
+                          ls.setItem(this._ttlKey(key), encode(now() + ttl));
+                      } else {
+                          ls.removeItem(this._ttlKey(key));
+                      }
+                      return ls.setItem(this._prefix(key), encode(val));
+                  },
+                  remove: function(key) {
+                      ls.removeItem(this._ttlKey(key));
+                      ls.removeItem(this._prefix(key));
+                      return this;
+                  },
+                  clear: function() {
+                      var i, key, keys = [], len = ls.length;
+                      for (i = 0; i < len; i++) {
+                          if ((key = ls.key(i)).match(this.keyMatcher)) {
+                              keys.push(key.replace(this.keyMatcher, ""));
+                          }
+                      }
+                      for (i = keys.length; i--; ) {
+                          this.remove(keys[i]);
+                      }
+                      return this;
+                  },
+                  isExpired: function(key) {
+                      var ttl = decode(ls.getItem(this._ttlKey(key)));
+                      return _.isNumber(ttl) && now() > ttl ? true : false;
+                  }
+              };
+          } else {
+              methods = {
+                  get: _.noop,
+                  set: _.noop,
+                  remove: _.noop,
+                  clear: _.noop,
+                  isExpired: _.noop
+              };
+          }
+          _.mixin(PersistentStorage.prototype, methods);
+          return PersistentStorage;
+          function now() {
+              return new Date().getTime();
+          }
+          function encode(val) {
+              return JSON.stringify(_.isUndefined(val) ? null : val);
+          }
+          function decode(val) {
+              return JSON.parse(val);
+          }
+      }();
+      var Transport = function() {
+          var pendingRequestsCount = 0, pendingRequests = {}, maxPendingRequests = 6, requestCache = new LruCache(10);
+          function Transport(o) {
+              o = o || {};
+              this._send = o.transport ? callbackToDeferred(o.transport) : $.ajax;
+              this._get = o.rateLimiter ? o.rateLimiter(this._get) : this._get;
+          }
+          Transport.setMaxPendingRequests = function setMaxPendingRequests(num) {
+              maxPendingRequests = num;
+          };
+          Transport.resetCache = function clearCache() {
+              requestCache = new LruCache(10);
+          };
+          _.mixin(Transport.prototype, {
+              _get: function(url, o, cb) {
+                  var that = this, jqXhr;
+                  if (jqXhr = pendingRequests[url]) {
+                      jqXhr.done(done).fail(fail);
+                  } else if (pendingRequestsCount < maxPendingRequests) {
+                      pendingRequestsCount++;
+                      pendingRequests[url] = this._send(url, o).done(done).fail(fail).always(always);
+                  } else {
+                      this.onDeckRequestArgs = [].slice.call(arguments, 0);
+                  }
+                  function done(resp) {
+                      cb && cb(null, resp);
+                      requestCache.set(url, resp);
+                  }
+                  function fail() {
+                      cb && cb(true);
+                  }
+                  function always() {
+                      pendingRequestsCount--;
+                      delete pendingRequests[url];
+                      if (that.onDeckRequestArgs) {
+                          that._get.apply(that, that.onDeckRequestArgs);
+                          that.onDeckRequestArgs = null;
+                      }
+                  }
+              },
+              get: function(url, o, cb) {
+                  var resp;
+                  if (_.isFunction(o)) {
+                      cb = o;
+                      o = {};
+                  }
+                  if (resp = requestCache.get(url)) {
+                      _.defer(function() {
+                          cb && cb(null, resp);
+                      });
+                  } else {
+                      this._get(url, o, cb);
+                  }
+                  return !!resp;
+              }
+          });
+          return Transport;
+          function callbackToDeferred(fn) {
+              return function customSendWrapper(url, o) {
+                  var deferred = $.Deferred();
+                  fn(url, o, onSuccess, onError);
+                  return deferred;
+                  function onSuccess(resp) {
+                      _.defer(function() {
+                          deferred.resolve(resp);
+                      });
+                  }
+                  function onError(err) {
+                      _.defer(function() {
+                          deferred.reject(err);
+                      });
+                  }
+              };
+          }
+      }();
+      var SearchIndex = function() {
+          function SearchIndex(o) {
+              o = o || {};
+              if (!o.datumTokenizer || !o.queryTokenizer) {
+                  $.error("datumTokenizer and queryTokenizer are both required");
+              }
+              this.datumTokenizer = o.datumTokenizer;
+              this.queryTokenizer = o.queryTokenizer;
+              this.reset();
+          }
+          _.mixin(SearchIndex.prototype, {
+              bootstrap: function bootstrap(o) {
+                  this.datums = o.datums;
+                  this.trie = o.trie;
+              },
+              add: function(data) {
+                  var that = this;
+                  data = _.isArray(data) ? data : [ data ];
+                  _.each(data, function(datum) {
+                      var id, tokens;
+                      id = that.datums.push(datum) - 1;
+                      tokens = normalizeTokens(that.datumTokenizer(datum));
+                      _.each(tokens, function(token) {
+                          var node, chars, ch;
+                          node = that.trie;
+                          chars = token.split("");
+                          while (ch = chars.shift()) {
+                              node = node.children[ch] || (node.children[ch] = newNode());
+                              node.ids.push(id);
+                          }
+                      });
+                  });
+              },
+              get: function get(query) {
+                  var that = this, tokens, matches;
+                  tokens = normalizeTokens(this.queryTokenizer(query));
+                  _.each(tokens, function(token) {
+                      var node, chars, ch, ids;
+                      if (matches && matches.length === 0) {
+                          return false;
+                      }
+                      node = that.trie;
+                      chars = token.split("");
+                      while (node && (ch = chars.shift())) {
+                          node = node.children[ch];
+                      }
+                      if (node && chars.length === 0) {
+                          ids = node.ids.slice(0);
+                          matches = matches ? getIntersection(matches, ids) : ids;
+                      } else {
+                          matches = [];
+                          return false;
+                      }
+                  });
+                  return matches ? _.map(unique(matches), function(id) {
+                      return that.datums[id];
+                  }) : [];
+              },
+              reset: function reset() {
+                  this.datums = [];
+                  this.trie = newNode();
+              },
+              serialize: function serialize() {
+                  return {
+                      datums: this.datums,
+                      trie: this.trie
+                  };
+              }
+          });
+          return SearchIndex;
+          function normalizeTokens(tokens) {
+              tokens = _.filter(tokens, function(token) {
+                  return !!token;
+              });
+              tokens = _.map(tokens, function(token) {
+                  return token.toLowerCase();
+              });
+              return tokens;
+          }
+          function newNode() {
+              return {
+                  ids: [],
+                  children: {}
+              };
+          }
+          function unique(array) {
+              var seen = {}, uniques = [];
+              for (var i = 0; i < array.length; i++) {
+                  if (!seen[array[i]]) {
+                      seen[array[i]] = true;
+                      uniques.push(array[i]);
+                  }
+              }
+              return uniques;
+          }
+          function getIntersection(arrayA, arrayB) {
+              var ai = 0, bi = 0, intersection = [];
+              arrayA = arrayA.sort(compare);
+              arrayB = arrayB.sort(compare);
+              while (ai < arrayA.length && bi < arrayB.length) {
+                  if (arrayA[ai] < arrayB[bi]) {
+                      ai++;
+                  } else if (arrayA[ai] > arrayB[bi]) {
+                      bi++;
+                  } else {
+                      intersection.push(arrayA[ai]);
+                      ai++;
+                      bi++;
+                  }
+              }
+              return intersection;
+              function compare(a, b) {
+                  return a - b;
+              }
+          }
+      }();
+      var oParser = function() {
+          return {
+              local: getLocal,
+              prefetch: getPrefetch,
+              remote: getRemote
+          };
+          function getLocal(o) {
+              return o.local || null;
+          }
+          function getPrefetch(o) {
+              var prefetch, defaults;
+              defaults = {
+                  url: null,
+                  thumbprint: "",
+                  ttl: 24 * 60 * 60 * 1e3,
+                  filter: null,
+                  ajax: {}
+              };
+              if (prefetch = o.prefetch || null) {
+                  prefetch = _.isString(prefetch) ? {
+                      url: prefetch
+                  } : prefetch;
+                  prefetch = _.mixin(defaults, prefetch);
+                  prefetch.thumbprint = VERSION + prefetch.thumbprint;
+                  prefetch.ajax.type = prefetch.ajax.type || "GET";
+                  prefetch.ajax.dataType = prefetch.ajax.dataType || "json";
+                  !prefetch.url && $.error("prefetch requires url to be set");
+              }
+              return prefetch;
+          }
+          function getRemote(o) {
+              var remote, defaults;
+              defaults = {
+                  url: null,
+                  wildcard: "%QUERY",
+                  replace: null,
+                  rateLimitBy: "debounce",
+                  rateLimitWait: 300,
+                  send: null,
+                  filter: null,
+                  ajax: {}
+              };
+              if (remote = o.remote || null) {
+                  remote = _.isString(remote) ? {
+                      url: remote
+                  } : remote;
+                  remote = _.mixin(defaults, remote);
+                  remote.rateLimiter = /^throttle$/i.test(remote.rateLimitBy) ? byThrottle(remote.rateLimitWait) : byDebounce(remote.rateLimitWait);
+                  remote.ajax.type = remote.ajax.type || "GET";
+                  remote.ajax.dataType = remote.ajax.dataType || "json";
+                  delete remote.rateLimitBy;
+                  delete remote.rateLimitWait;
+                  !remote.url && $.error("remote requires url to be set");
+              }
+              return remote;
+              function byDebounce(wait) {
+                  return function(fn) {
+                      return _.debounce(fn, wait);
+                  };
+              }
+              function byThrottle(wait) {
+                  return function(fn) {
+                      return _.throttle(fn, wait);
+                  };
+              }
+          }
+      }();
+      (function(root) {
+          var old, keys;
+          old = root.Bloodhound;
+          keys = {
+              data: "data",
+              protocol: "protocol",
+              thumbprint: "thumbprint"
+          };
+          root.Bloodhound = Bloodhound;
+          function Bloodhound(o) {
+              if (!o || !o.local && !o.prefetch && !o.remote) {
+                  $.error("one of local, prefetch, or remote is required");
+              }
+              this.limit = o.limit || 5;
+              this.sorter = getSorter(o.sorter);
+              this.dupDetector = o.dupDetector || ignoreDuplicates;
+              this.local = oParser.local(o);
+              this.prefetch = oParser.prefetch(o);
+              this.remote = oParser.remote(o);
+              this.cacheKey = this.prefetch ? this.prefetch.cacheKey || this.prefetch.url : null;
+              this.index = new SearchIndex({
+                  datumTokenizer: o.datumTokenizer,
+                  queryTokenizer: o.queryTokenizer
+              });
+              this.storage = this.cacheKey ? new PersistentStorage(this.cacheKey) : null;
+          }
+          Bloodhound.noConflict = function noConflict() {
+              root.Bloodhound = old;
+              return Bloodhound;
+          };
+          Bloodhound.tokenizers = tokenizers;
+          _.mixin(Bloodhound.prototype, {
+              _loadPrefetch: function loadPrefetch(o) {
+                  var that = this, serialized, deferred;
+                  if (serialized = this._readFromStorage(o.thumbprint)) {
+                      this.index.bootstrap(serialized);
+                      deferred = $.Deferred().resolve();
+                  } else {
+                      deferred = $.ajax(o.url, o.ajax).done(handlePrefetchResponse);
+                  }
+                  return deferred;
+                  function handlePrefetchResponse(resp) {
+                      that.clear();
+                      that.add(o.filter ? o.filter(resp) : resp);
+                      that._saveToStorage(that.index.serialize(), o.thumbprint, o.ttl);
+                  }
+              },
+              _getFromRemote: function getFromRemote(query, cb) {
+                  var that = this, url, uriEncodedQuery;
+                  query = query || "";
+                  uriEncodedQuery = encodeURIComponent(query);
+                  url = this.remote.replace ? this.remote.replace(this.remote.url, query) : this.remote.url.replace(this.remote.wildcard, uriEncodedQuery);
+                  return this.transport.get(url, this.remote.ajax, handleRemoteResponse);
+                  function handleRemoteResponse(err, resp) {
+                      err ? cb([]) : cb(that.remote.filter ? that.remote.filter(resp) : resp);
+                  }
+              },
+              _saveToStorage: function saveToStorage(data, thumbprint, ttl) {
+                  if (this.storage) {
+                      this.storage.set(keys.data, data, ttl);
+                      this.storage.set(keys.protocol, location.protocol, ttl);
+                      this.storage.set(keys.thumbprint, thumbprint, ttl);
+                  }
+              },
+              _readFromStorage: function readFromStorage(thumbprint) {
+                  var stored = {}, isExpired;
+                  if (this.storage) {
+                      stored.data = this.storage.get(keys.data);
+                      stored.protocol = this.storage.get(keys.protocol);
+                      stored.thumbprint = this.storage.get(keys.thumbprint);
+                  }
+                  isExpired = stored.thumbprint !== thumbprint || stored.protocol !== location.protocol;
+                  return stored.data && !isExpired ? stored.data : null;
+              },
+              _initialize: function initialize() {
+                  var that = this, local = this.local, deferred;
+                  deferred = this.prefetch ? this._loadPrefetch(this.prefetch) : $.Deferred().resolve();
+                  local && deferred.done(addLocalToIndex);
+                  this.transport = this.remote ? new Transport(this.remote) : null;
+                  return this.initPromise = deferred.promise();
+                  function addLocalToIndex() {
+                      that.add(_.isFunction(local) ? local() : local);
+                  }
+              },
+              initialize: function initialize(force) {
+                  return !this.initPromise || force ? this._initialize() : this.initPromise;
+              },
+              add: function add(data) {
+                  this.index.add(data);
+              },
+              get: function get(query, cb) {
+                  var that = this, matches = [], cacheHit = false;
+                  matches = this.index.get(query);
+                  matches = this.sorter(matches).slice(0, this.limit);
+                  if (matches.length < this.limit && this.transport) {
+                      cacheHit = this._getFromRemote(query, returnRemoteMatches);
+                  }
+                  if (!cacheHit) {
+                      (matches.length > 0 || !this.transport) && cb && cb(matches);
+                  }
+                  function returnRemoteMatches(remoteMatches) {
+                      var matchesWithBackfill = matches.slice(0);
+                      _.each(remoteMatches, function(remoteMatch) {
+                          var isDuplicate;
+                          isDuplicate = _.some(matchesWithBackfill, function(match) {
+                              return that.dupDetector(remoteMatch, match);
+                          });
+                          !isDuplicate && matchesWithBackfill.push(remoteMatch);
+                          return matchesWithBackfill.length < that.limit;
+                      });
+                      cb && cb(that.sorter(matchesWithBackfill));
+                  }
+              },
+              clear: function clear() {
+                  this.index.reset();
+              },
+              clearPrefetchCache: function clearPrefetchCache() {
+                  this.storage && this.storage.clear();
+              },
+              clearRemoteCache: function clearRemoteCache() {
+                  this.transport && Transport.resetCache();
+              },
+              ttAdapter: function ttAdapter() {
+                  return _.bind(this.get, this);
+              }
+          });
+          return Bloodhound;
+          function getSorter(sortFn) {
+              return _.isFunction(sortFn) ? sort : noSort;
+              function sort(array) {
+                  return array.sort(sortFn);
+              }
+              function noSort(array) {
+                  return array;
+              }
+          }
+          function ignoreDuplicates() {
+              return false;
+          }
+      })(this);
+      var html = {
+          wrapper: '<span class="twitter-typeahead"></span>',
+          dropdown: '<span class="tt-dropdown-menu"></span>',
+          dataset: '<div class="tt-dataset-%CLASS%"></div>',
+          suggestions: '<span class="tt-suggestions"></span>',
+          suggestion: '<div class="tt-suggestion"></div>'
+      };
+      var css = {
+          wrapper: {
+              position: "relative",
+              display: "inline-block"
+          },
+          hint: {
+              position: "absolute",
+              top: "0",
+              left: "0",
+              borderColor: "transparent",
+              boxShadow: "none"
+          },
+          input: {
+              position: "relative",
+              verticalAlign: "top",
+              backgroundColor: "transparent"
+          },
+          inputWithNoHint: {
+              position: "relative",
+              verticalAlign: "top"
+          },
+          dropdown: {
+              position: "absolute",
+              top: "100%",
+              left: "0",
+              zIndex: "100",
+              display: "none"
+          },
+          suggestions: {
+              display: "block"
+          },
+          suggestion: {
+              whiteSpace: "nowrap",
+              cursor: "pointer"
+          },
+          suggestionChild: {
+              whiteSpace: "normal"
+          },
+          ltr: {
+              left: "0",
+              right: "auto"
+          },
+          rtl: {
+              left: "auto",
+              right: " 0"
+          }
+      };
+      if (_.isMsie()) {
+          _.mixin(css.input, {
+              backgroundImage: "url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)"
+          });
+      }
+      if (_.isMsie() && _.isMsie() <= 7) {
+          _.mixin(css.input, {
+              marginTop: "-1px"
+          });
+      }
+      var EventBus = function() {
+          var namespace = "typeahead:";
+          function EventBus(o) {
+              if (!o || !o.el) {
+                  $.error("EventBus initialized without el");
+              }
+              this.$el = $(o.el);
+          }
+          _.mixin(EventBus.prototype, {
+              trigger: function(type) {
+                  var args = [].slice.call(arguments, 1);
+                  this.$el.trigger(namespace + type, args);
+              }
+          });
+          return EventBus;
+      }();
+      var EventEmitter = function() {
+          var splitter = /\s+/, nextTick = getNextTick();
+          return {
+              onSync: onSync,
+              onAsync: onAsync,
+              off: off,
+              trigger: trigger
+          };
+          function on(method, types, cb, context) {
+              var type;
+              if (!cb) {
+                  return this;
+              }
+              types = types.split(splitter);
+              cb = context ? bindContext(cb, context) : cb;
+              this._callbacks = this._callbacks || {};
+              while (type = types.shift()) {
+                  this._callbacks[type] = this._callbacks[type] || {
+                      sync: [],
+                      async: []
+                  };
+                  this._callbacks[type][method].push(cb);
+              }
+              return this;
+          }
+          function onAsync(types, cb, context) {
+              return on.call(this, "async", types, cb, context);
+          }
+          function onSync(types, cb, context) {
+              return on.call(this, "sync", types, cb, context);
+          }
+          function off(types) {
+              var type;
+              if (!this._callbacks) {
+                  return this;
+              }
+              types = types.split(splitter);
+              while (type = types.shift()) {
+                  delete this._callbacks[type];
+              }
+              return this;
+          }
+          function trigger(types) {
+              var type, callbacks, args, syncFlush, asyncFlush;
+              if (!this._callbacks) {
+                  return this;
+              }
+              types = types.split(splitter);
+              args = [].slice.call(arguments, 1);
+              while ((type = types.shift()) && (callbacks = this._callbacks[type])) {
+                  syncFlush = getFlush(callbacks.sync, this, [ type ].concat(args));
+                  asyncFlush = getFlush(callbacks.async, this, [ type ].concat(args));
+                  syncFlush() && nextTick(asyncFlush);
+              }
+              return this;
+          }
+          function getFlush(callbacks, context, args) {
+              return flush;
+              function flush() {
+                  var cancelled;
+                  for (var i = 0; !cancelled && i < callbacks.length; i += 1) {
+                      cancelled = callbacks[i].apply(context, args) === false;
+                  }
+                  return !cancelled;
+              }
+          }
+          function getNextTick() {
+              var nextTickFn;
+              if (window.setImmediate) {
+                  nextTickFn = function nextTickSetImmediate(fn) {
+                      setImmediate(function() {
+                          fn();
+                      });
+                  };
+              } else {
+                  nextTickFn = function nextTickSetTimeout(fn) {
+                      setTimeout(function() {
+                          fn();
+                      }, 0);
+                  };
+              }
+              return nextTickFn;
+          }
+          function bindContext(fn, context) {
+              return fn.bind ? fn.bind(context) : function() {
+                  fn.apply(context, [].slice.call(arguments, 0));
+              };
+          }
+      }();
+      var highlight = function(doc) {
+          var defaults = {
+              node: null,
+              pattern: null,
+              tagName: "strong",
+              className: null,
+              wordsOnly: false,
+              caseSensitive: false
+          };
+          return function hightlight(o) {
+              var regex;
+              o = _.mixin({}, defaults, o);
+              if (!o.node || !o.pattern) {
+                  return;
+              }
+              o.pattern = _.isArray(o.pattern) ? o.pattern : [ o.pattern ];
+              regex = getRegex(o.pattern, o.caseSensitive, o.wordsOnly);
+              traverse(o.node, hightlightTextNode);
+              function hightlightTextNode(textNode) {
+                  var match, patternNode;
+                  if (match = regex.exec(textNode.data)) {
+                      wrapperNode = doc.createElement(o.tagName);
+                      o.className && (wrapperNode.className = o.className);
+                      patternNode = textNode.splitText(match.index);
+                      patternNode.splitText(match[0].length);
+                      wrapperNode.appendChild(patternNode.cloneNode(true));
+                      textNode.parentNode.replaceChild(wrapperNode, patternNode);
+                  }
+                  return !!match;
+              }
+              function traverse(el, hightlightTextNode) {
+                  var childNode, TEXT_NODE_TYPE = 3;
+                  for (var i = 0; i < el.childNodes.length; i++) {
+                      childNode = el.childNodes[i];
+                      if (childNode.nodeType === TEXT_NODE_TYPE) {
+                          i += hightlightTextNode(childNode) ? 1 : 0;
+                      } else {
+                          traverse(childNode, hightlightTextNode);
+                      }
+                  }
+              }
+          };
+          function getRegex(patterns, caseSensitive, wordsOnly) {
+              var escapedPatterns = [], regexStr;
+              for (var i = 0; i < patterns.length; i++) {
+                  escapedPatterns.push(_.escapeRegExChars(patterns[i]));
+              }
+              regexStr = wordsOnly ? "\\b(" + escapedPatterns.join("|") + ")\\b" : "(" + escapedPatterns.join("|") + ")";
+              return caseSensitive ? new RegExp(regexStr) : new RegExp(regexStr, "i");
+          }
+      }(window.document);
+      var Input = function() {
+          var specialKeyCodeMap;
+          specialKeyCodeMap = {
+              9: "tab",
+              27: "esc",
+              37: "left",
+              39: "right",
+              13: "enter",
+              38: "up",
+              40: "down"
+          };
+          function Input(o) {
+              var that = this, onBlur, onFocus, onKeydown, onInput;
+              o = o || {};
+              if (!o.input) {
+                  $.error("input is missing");
+              }
+              onBlur = _.bind(this._onBlur, this);
+              onFocus = _.bind(this._onFocus, this);
+              onKeydown = _.bind(this._onKeydown, this);
+              onInput = _.bind(this._onInput, this);
+              this.$hint = $(o.hint);
+              this.$input = $(o.input).on("blur.tt", onBlur).on("focus.tt", onFocus).on("keydown.tt", onKeydown);
+              if (this.$hint.length === 0) {
+                  this.setHint = this.getHint = this.clearHint = this.clearHintIfInvalid = _.noop;
+              }
+              if (!_.isMsie()) {
+                  this.$input.on("input.tt", onInput);
+              } else {
+                  this.$input.on("keydown.tt keypress.tt cut.tt paste.tt", function($e) {
+                      if (specialKeyCodeMap[$e.which || $e.keyCode]) {
+                          return;
+                      }
+                      _.defer(_.bind(that._onInput, that, $e));
+                  });
+              }
+              this.query = this.$input.val();
+              this.$overflowHelper = buildOverflowHelper(this.$input);
+          }
+          Input.normalizeQuery = function(str) {
+              return (str || "").replace(/^\s*/g, "").replace(/\s{2,}/g, " ");
+          };
+          _.mixin(Input.prototype, EventEmitter, {
+              _onBlur: function onBlur() {
+                  this.resetInputValue();
+                  this.trigger("blurred");
+              },
+              _onFocus: function onFocus() {
+                  this.trigger("focused");
+              },
+              _onKeydown: function onKeydown($e) {
+                  var keyName = specialKeyCodeMap[$e.which || $e.keyCode];
+                  this._managePreventDefault(keyName, $e);
+                  if (keyName && this._shouldTrigger(keyName, $e)) {
+                      this.trigger(keyName + "Keyed", $e);
+                  }
+              },
+              _onInput: function onInput() {
+                  this._checkInputValue();
+              },
+              _managePreventDefault: function managePreventDefault(keyName, $e) {
+                  var preventDefault, hintValue, inputValue;
+                  switch (keyName) {
+                    case "tab":
+                      hintValue = this.getHint();
+                      inputValue = this.getInputValue();
+                      preventDefault = hintValue && hintValue !== inputValue && !withModifier($e);
+                      break;
+  
+                    case "up":
+                    case "down":
+                      preventDefault = !withModifier($e);
+                      break;
+  
+                    default:
+                      preventDefault = false;
+                  }
+                  preventDefault && $e.preventDefault();
+              },
+              _shouldTrigger: function shouldTrigger(keyName, $e) {
+                  var trigger;
+                  switch (keyName) {
+                    case "tab":
+                      trigger = !withModifier($e);
+                      break;
+  
+                    default:
+                      trigger = true;
+                  }
+                  return trigger;
+              },
+              _checkInputValue: function checkInputValue() {
+                  var inputValue, areEquivalent, hasDifferentWhitespace;
+                  inputValue = this.getInputValue();
+                  areEquivalent = areQueriesEquivalent(inputValue, this.query);
+                  hasDifferentWhitespace = areEquivalent ? this.query.length !== inputValue.length : false;
+                  if (!areEquivalent) {
+                      this.trigger("queryChanged", this.query = inputValue);
+                  } else if (hasDifferentWhitespace) {
+                      this.trigger("whitespaceChanged", this.query);
+                  }
+              },
+              focus: function focus() {
+                  this.$input.focus();
+              },
+              blur: function blur() {
+                  this.$input.blur();
+              },
+              getQuery: function getQuery() {
+                  return this.query;
+              },
+              setQuery: function setQuery(query) {
+                  this.query = query;
+              },
+              getInputValue: function getInputValue() {
+                  return this.$input.val();
+              },
+              setInputValue: function setInputValue(value, silent) {
+                  this.$input.val(value);
+                  silent ? this.clearHint() : this._checkInputValue();
+              },
+              resetInputValue: function resetInputValue() {
+                  this.setInputValue(this.query, true);
+              },
+              getHint: function getHint() {
+                  return this.$hint.val();
+              },
+              setHint: function setHint(value) {
+                  this.$hint.val(value);
+              },
+              clearHint: function clearHint() {
+                  this.setHint("");
+              },
+              clearHintIfInvalid: function clearHintIfInvalid() {
+                  var val, hint, valIsPrefixOfHint, isValid;
+                  val = this.getInputValue();
+                  hint = this.getHint();
+                  valIsPrefixOfHint = val !== hint && hint.indexOf(val) === 0;
+                  isValid = val !== "" && valIsPrefixOfHint && !this.hasOverflow();
+                  !isValid && this.clearHint();
+              },
+              getLanguageDirection: function getLanguageDirection() {
+                  return (this.$input.css("direction") || "ltr").toLowerCase();
+              },
+              hasOverflow: function hasOverflow() {
+                  var constraint = this.$input.width() - 2;
+                  this.$overflowHelper.text(this.getInputValue());
+                  return this.$overflowHelper.width() >= constraint;
+              },
+              isCursorAtEnd: function() {
+                  var valueLength, selectionStart, range;
+                  valueLength = this.$input.val().length;
+                  selectionStart = this.$input[0].selectionStart;
+                  if (_.isNumber(selectionStart)) {
+                      return selectionStart === valueLength;
+                  } else if (document.selection) {
+                      range = document.selection.createRange();
+                      range.moveStart("character", -valueLength);
+                      return valueLength === range.text.length;
+                  }
+                  return true;
+              },
+              destroy: function destroy() {
+                  this.$hint.off(".tt");
+                  this.$input.off(".tt");
+                  this.$hint = this.$input = this.$overflowHelper = null;
+              }
+          });
+          return Input;
+          function buildOverflowHelper($input) {
+              return $('<pre aria-hidden="true"></pre>').css({
+                  position: "absolute",
+                  visibility: "hidden",
+                  whiteSpace: "pre",
+                  fontFamily: $input.css("font-family"),
+                  fontSize: $input.css("font-size"),
+                  fontStyle: $input.css("font-style"),
+                  fontVariant: $input.css("font-variant"),
+                  fontWeight: $input.css("font-weight"),
+                  wordSpacing: $input.css("word-spacing"),
+                  letterSpacing: $input.css("letter-spacing"),
+                  textIndent: $input.css("text-indent"),
+                  textRendering: $input.css("text-rendering"),
+                  textTransform: $input.css("text-transform")
+              }).insertAfter($input);
+          }
+          function areQueriesEquivalent(a, b) {
+              return Input.normalizeQuery(a) === Input.normalizeQuery(b);
+          }
+          function withModifier($e) {
+              return $e.altKey || $e.ctrlKey || $e.metaKey || $e.shiftKey;
+          }
+      }();
+      var Dataset = function() {
+          var datasetKey = "ttDataset", valueKey = "ttValue", datumKey = "ttDatum";
+          function Dataset(o) {
+              o = o || {};
+              o.templates = o.templates || {};
+              if (!o.source) {
+                  $.error("missing source");
+              }
+              if (o.name && !isValidName(o.name)) {
+                  $.error("invalid dataset name: " + o.name);
+              }
+              this.query = null;
+              this.highlight = !!o.highlight;
+              this.name = o.name || _.getUniqueId();
+              this.source = o.source;
+              this.displayFn = getDisplayFn(o.display || o.displayKey);
+              this.templates = getTemplates(o.templates, this.displayFn);
+              this.$el = $(html.dataset.replace("%CLASS%", this.name));
+          }
+          Dataset.extractDatasetName = function extractDatasetName(el) {
+              return $(el).data(datasetKey);
+          };
+          Dataset.extractValue = function extractDatum(el) {
+              return $(el).data(valueKey);
+          };
+          Dataset.extractDatum = function extractDatum(el) {
+              return $(el).data(datumKey);
+          };
+          _.mixin(Dataset.prototype, EventEmitter, {
+              _render: function render(query, suggestions) {
+                  if (!this.$el) {
+                      return;
+                  }
+                  var that = this, hasSuggestions;
+                  this.$el.empty();
+                  hasSuggestions = suggestions && suggestions.length;
+                  if (!hasSuggestions && this.templates.empty) {
+                      this.$el.html(getEmptyHtml()).prepend(that.templates.header ? getHeaderHtml() : null).append(that.templates.footer ? getFooterHtml() : null);
+                  } else if (hasSuggestions) {
+                      this.$el.html(getSuggestionsHtml()).prepend(that.templates.header ? getHeaderHtml() : null).append(that.templates.footer ? getFooterHtml() : null);
+                  }
+                  this.trigger("rendered");
+                  function getEmptyHtml() {
+                      return that.templates.empty({
+                          query: query,
+                          isEmpty: true
+                      });
+                  }
+                  function getSuggestionsHtml() {
+                      var $suggestions, nodes;
+                      $suggestions = $(html.suggestions).css(css.suggestions);
+                      nodes = _.map(suggestions, getSuggestionNode);
+                      $suggestions.append.apply($suggestions, nodes);
+                      that.highlight && highlight({
+                          node: $suggestions[0],
+                          pattern: query
+                      });
+                      return $suggestions;
+                      function getSuggestionNode(suggestion) {
+                          var $el;
+                          $el = $(html.suggestion).append(that.templates.suggestion(suggestion)).data(datasetKey, that.name).data(valueKey, that.displayFn(suggestion)).data(datumKey, suggestion);
+                          $el.children().each(function() {
+                              $(this).css(css.suggestionChild);
+                          });
+                          return $el;
+                      }
+                  }
+                  function getHeaderHtml() {
+                      return that.templates.header({
+                          query: query,
+                          isEmpty: !hasSuggestions
+                      });
+                  }
+                  function getFooterHtml() {
+                      return that.templates.footer({
+                          query: query,
+                          isEmpty: !hasSuggestions
+                      });
+                  }
+              },
+              getRoot: function getRoot() {
+                  return this.$el;
+              },
+              update: function update(query) {
+                  var that = this;
+                  this.query = query;
+                  this.canceled = false;
+                  this.source(query, render);
+                  function render(suggestions) {
+                      if (!that.canceled && query === that.query) {
+                          that._render(query, suggestions);
+                      }
+                  }
+              },
+              cancel: function cancel() {
+                  this.canceled = true;
+              },
+              clear: function clear() {
+                  this.cancel();
+                  this.$el.empty();
+                  this.trigger("rendered");
+              },
+              isEmpty: function isEmpty() {
+                  return this.$el.is(":empty");
+              },
+              destroy: function destroy() {
+                  this.$el = null;
+              }
+          });
+          return Dataset;
+          function getDisplayFn(display) {
+              display = display || "value";
+              return _.isFunction(display) ? display : displayFn;
+              function displayFn(obj) {
+                  return obj[display];
+              }
+          }
+          function getTemplates(templates, displayFn) {
+              return {
+                  empty: templates.empty && _.templatify(templates.empty),
+                  header: templates.header && _.templatify(templates.header),
+                  footer: templates.footer && _.templatify(templates.footer),
+                  suggestion: templates.suggestion || suggestionTemplate
+              };
+              function suggestionTemplate(context) {
+                  return "<p>" + displayFn(context) + "</p>";
+              }
+          }
+          function isValidName(str) {
+              return /^[_a-zA-Z0-9-]+$/.test(str);
+          }
+      }();
+      var Dropdown = function() {
+          function Dropdown(o) {
+              var that = this, onSuggestionClick, onSuggestionMouseEnter, onSuggestionMouseLeave;
+              o = o || {};
+              if (!o.menu) {
+                  $.error("menu is required");
+              }
+              this.isOpen = false;
+              this.isEmpty = true;
+              this.datasets = _.map(o.datasets, initializeDataset);
+              onSuggestionClick = _.bind(this._onSuggestionClick, this);
+              onSuggestionMouseEnter = _.bind(this._onSuggestionMouseEnter, this);
+              onSuggestionMouseLeave = _.bind(this._onSuggestionMouseLeave, this);
+              this.$menu = $(o.menu).on("click.tt", ".tt-suggestion", onSuggestionClick).on("mouseenter.tt", ".tt-suggestion", onSuggestionMouseEnter).on("mouseleave.tt", ".tt-suggestion", onSuggestionMouseLeave);
+              _.each(this.datasets, function(dataset) {
+                  that.$menu.append(dataset.getRoot());
+                  dataset.onSync("rendered", that._onRendered, that);
+              });
+          }
+          _.mixin(Dropdown.prototype, EventEmitter, {
+              _onSuggestionClick: function onSuggestionClick($e) {
+                  this.trigger("suggestionClicked", $($e.currentTarget));
+              },
+              _onSuggestionMouseEnter: function onSuggestionMouseEnter($e) {
+                  this._removeCursor();
+                  this._setCursor($($e.currentTarget), true);
+              },
+              _onSuggestionMouseLeave: function onSuggestionMouseLeave() {
+                  this._removeCursor();
+              },
+              _onRendered: function onRendered() {
+                  this.isEmpty = _.every(this.datasets, isDatasetEmpty);
+                  this.isEmpty ? this._hide() : this.isOpen && this._show();
+                  this.trigger("datasetRendered");
+                  function isDatasetEmpty(dataset) {
+                      return dataset.isEmpty();
+                  }
+              },
+              _hide: function() {
+                  this.$menu.hide();
+              },
+              _show: function() {
+                  this.$menu.css("display", "block");
+              },
+              _getSuggestions: function getSuggestions() {
+                  return this.$menu.find(".tt-suggestion");
+              },
+              _getCursor: function getCursor() {
+                  return this.$menu.find(".tt-cursor").first();
+              },
+              _setCursor: function setCursor($el, silent) {
+                  $el.first().addClass("tt-cursor");
+                  !silent && this.trigger("cursorMoved");
+              },
+              _removeCursor: function removeCursor() {
+                  this._getCursor().removeClass("tt-cursor");
+              },
+              _moveCursor: function moveCursor(increment) {
+                  var $suggestions, $oldCursor, newCursorIndex, $newCursor;
+                  if (!this.isOpen) {
+                      return;
+                  }
+                  $oldCursor = this._getCursor();
+                  $suggestions = this._getSuggestions();
+                  this._removeCursor();
+                  newCursorIndex = $suggestions.index($oldCursor) + increment;
+                  newCursorIndex = (newCursorIndex + 1) % ($suggestions.length + 1) - 1;
+                  if (newCursorIndex === -1) {
+                      this.trigger("cursorRemoved");
+                      return;
+                  } else if (newCursorIndex < -1) {
+                      newCursorIndex = $suggestions.length - 1;
+                  }
+                  this._setCursor($newCursor = $suggestions.eq(newCursorIndex));
+                  this._ensureVisible($newCursor);
+              },
+              _ensureVisible: function ensureVisible($el) {
+                  var elTop, elBottom, menuScrollTop, menuHeight;
+                  elTop = $el.position().top;
+                  elBottom = elTop + $el.outerHeight(true);
+                  menuScrollTop = this.$menu.scrollTop();
+                  menuHeight = this.$menu.height() + parseInt(this.$menu.css("paddingTop"), 10) + parseInt(this.$menu.css("paddingBottom"), 10);
+                  if (elTop < 0) {
+                      this.$menu.scrollTop(menuScrollTop + elTop);
+                  } else if (menuHeight < elBottom) {
+                      this.$menu.scrollTop(menuScrollTop + (elBottom - menuHeight));
+                  }
+              },
+              close: function close() {
+                  if (this.isOpen) {
+                      this.isOpen = false;
+                      this._removeCursor();
+                      this._hide();
+                      this.trigger("closed");
+                  }
+              },
+              open: function open() {
+                  if (!this.isOpen) {
+                      this.isOpen = true;
+                      !this.isEmpty && this._show();
+                      this.trigger("opened");
+                  }
+              },
+              setLanguageDirection: function setLanguageDirection(dir) {
+                  this.$menu.css(dir === "ltr" ? css.ltr : css.rtl);
+              },
+              moveCursorUp: function moveCursorUp() {
+                  this._moveCursor(-1);
+              },
+              moveCursorDown: function moveCursorDown() {
+                  this._moveCursor(+1);
+              },
+              getDatumForSuggestion: function getDatumForSuggestion($el) {
+                  var datum = null;
+                  if ($el.length) {
+                      datum = {
+                          raw: Dataset.extractDatum($el),
+                          value: Dataset.extractValue($el),
+                          datasetName: Dataset.extractDatasetName($el)
+                      };
+                  }
+                  return datum;
+              },
+              getDatumForCursor: function getDatumForCursor() {
+                  return this.getDatumForSuggestion(this._getCursor().first());
+              },
+              getDatumForTopSuggestion: function getDatumForTopSuggestion() {
+                  return this.getDatumForSuggestion(this._getSuggestions().first());
+              },
+              update: function update(query) {
+                  _.each(this.datasets, updateDataset);
+                  function updateDataset(dataset) {
+                      dataset.update(query);
+                  }
+              },
+              empty: function empty() {
+                  _.each(this.datasets, clearDataset);
+                  this.isEmpty = true;
+                  function clearDataset(dataset) {
+                      dataset.clear();
+                  }
+              },
+              isVisible: function isVisible() {
+                  return this.isOpen && !this.isEmpty;
+              },
+              destroy: function destroy() {
+                  this.$menu.off(".tt");
+                  this.$menu = null;
+                  _.each(this.datasets, destroyDataset);
+                  function destroyDataset(dataset) {
+                      dataset.destroy();
+                  }
+              }
+          });
+          return Dropdown;
+          function initializeDataset(oDataset) {
+              return new Dataset(oDataset);
+          }
+      }();
+      var Typeahead = function() {
+          var attrsKey = "ttAttrs";
+          function Typeahead(o) {
+              var $menu, $input, $hint;
+              o = o || {};
+              if (!o.input) {
+                  $.error("missing input");
+              }
+              this.isActivated = false;
+              this.autoselect = !!o.autoselect;
+              this.minLength = _.isNumber(o.minLength) ? o.minLength : 1;
+              this.$node = buildDomStructure(o.input, o.withHint);
+              $menu = this.$node.find(".tt-dropdown-menu");
+              $input = this.$node.find(".tt-input");
+              $hint = this.$node.find(".tt-hint");
+              $input.on("blur.tt", function($e) {
+                  var active, isActive, hasActive;
+                  active = document.activeElement;
+                  isActive = $menu.is(active);
+                  hasActive = $menu.has(active).length > 0;
+                  if (_.isMsie() && (isActive || hasActive)) {
+                      $e.preventDefault();
+                      $e.stopImmediatePropagation();
+                      _.defer(function() {
+                          $input.focus();
+                      });
+                  }
+              });
+              $menu.on("mousedown.tt", function($e) {
+                  $e.preventDefault();
+              });
+              this.eventBus = o.eventBus || new EventBus({
+                  el: $input
+              });
+              this.dropdown = new Dropdown({
+                  menu: $menu,
+                  datasets: o.datasets
+              }).onSync("suggestionClicked", this._onSuggestionClicked, this).onSync("cursorMoved", this._onCursorMoved, this).onSync("cursorRemoved", this._onCursorRemoved, this).onSync("opened", this._onOpened, this).onSync("closed", this._onClosed, this).onAsync("datasetRendered", this._onDatasetRendered, this);
+              this.input = new Input({
+                  input: $input,
+                  hint: $hint
+              }).onSync("focused", this._onFocused, this).onSync("blurred", this._onBlurred, this).onSync("enterKeyed", this._onEnterKeyed, this).onSync("tabKeyed", this._onTabKeyed, this).onSync("escKeyed", this._onEscKeyed, this).onSync("upKeyed", this._onUpKeyed, this).onSync("downKeyed", this._onDownKeyed, this).onSync("leftKeyed", this._onLeftKeyed, this).onSync("rightKeyed", this._onRightKeyed, this).onSync("queryChanged", this._onQueryChanged, this).onSync("whitespaceChanged", this._onWhitespaceChanged, this);
+              this._setLanguageDirection();
+          }
+          _.mixin(Typeahead.prototype, {
+              _onSuggestionClicked: function onSuggestionClicked(type, $el) {
+                  var datum;
+                  if (datum = this.dropdown.getDatumForSuggestion($el)) {
+                      this._select(datum);
+                  }
+              },
+              _onCursorMoved: function onCursorMoved() {
+                  var datum = this.dropdown.getDatumForCursor();
+                  this.input.setInputValue(datum.value, true);
+                  this.eventBus.trigger("cursorchanged", datum.raw, datum.datasetName);
+              },
+              _onCursorRemoved: function onCursorRemoved() {
+                  this.input.resetInputValue();
+                  this._updateHint();
+              },
+              _onDatasetRendered: function onDatasetRendered() {
+                  this._updateHint();
+              },
+              _onOpened: function onOpened() {
+                  this._updateHint();
+                  this.eventBus.trigger("opened");
+              },
+              _onClosed: function onClosed() {
+                  this.input.clearHint();
+                  this.eventBus.trigger("closed");
+              },
+              _onFocused: function onFocused() {
+                  this.isActivated = true;
+                  this.dropdown.open();
+              },
+              _onBlurred: function onBlurred() {
+                  this.isActivated = false;
+                  this.dropdown.empty();
+                  this.dropdown.close();
+                  this.setVal("", true); //LM
+              },
+              _onEnterKeyed: function onEnterKeyed(type, $e) {
+                  var cursorDatum, topSuggestionDatum;
+                  cursorDatum = this.dropdown.getDatumForCursor();
+                  topSuggestionDatum = this.dropdown.getDatumForTopSuggestion();
+                  if (cursorDatum) {
+                      this._select(cursorDatum);
+                      $e.preventDefault();
+                  } else if (this.autoselect && topSuggestionDatum) {
+                      this._select(topSuggestionDatum);
+                      $e.preventDefault();
+                  }
+              },
+              _onTabKeyed: function onTabKeyed(type, $e) {
+                  var datum;
+                  if (datum = this.dropdown.getDatumForCursor()) {
+                      this._select(datum);
+                      $e.preventDefault();
+                  } else {
+                      this._autocomplete(true);
+                  }
+              },
+              _onEscKeyed: function onEscKeyed() {
+                  this.dropdown.close();
+                  this.input.resetInputValue();
+              },
+              _onUpKeyed: function onUpKeyed() {
+                  var query = this.input.getQuery();
+                  this.dropdown.isEmpty && query.length >= this.minLength ? this.dropdown.update(query) : this.dropdown.moveCursorUp();
+                  this.dropdown.open();
+              },
+              _onDownKeyed: function onDownKeyed() {
+                  var query = this.input.getQuery();
+                  this.dropdown.isEmpty && query.length >= this.minLength ? this.dropdown.update(query) : this.dropdown.moveCursorDown();
+                  this.dropdown.open();
+              },
+              _onLeftKeyed: function onLeftKeyed() {
+                  this.dir === "rtl" && this._autocomplete();
+              },
+              _onRightKeyed: function onRightKeyed() {
+                  this.dir === "ltr" && this._autocomplete();
+              },
+              _onQueryChanged: function onQueryChanged(e, query) {
+                  this.input.clearHintIfInvalid();
+                  query.length >= this.minLength ? this.dropdown.update(query) : this.dropdown.empty();
+                  this.dropdown.open();
+                  this._setLanguageDirection();
+              },
+              _onWhitespaceChanged: function onWhitespaceChanged() {
+                  this._updateHint();
+                  this.dropdown.open();
+              },
+              _setLanguageDirection: function setLanguageDirection() {
+                  var dir;
+                  if (this.dir !== (dir = this.input.getLanguageDirection())) {
+                      this.dir = dir;
+                      this.$node.css("direction", dir);
+                      this.dropdown.setLanguageDirection(dir);
+                  }
+              },
+              _updateHint: function updateHint() {
+                  var datum, val, query, escapedQuery, frontMatchRegEx, match;
+                  datum = this.dropdown.getDatumForTopSuggestion();
+                  if (datum && this.dropdown.isVisible() && !this.input.hasOverflow()) {
+                      val = this.input.getInputValue();
+                      query = Input.normalizeQuery(val);
+                      escapedQuery = _.escapeRegExChars(query);
+                      frontMatchRegEx = new RegExp("^(?:" + escapedQuery + ")(.+$)", "i");
+                      match = frontMatchRegEx.exec(datum.value);
+                      match ? this.input.setHint(val + match[1]) : this.input.clearHint();
+                  } else {
+                      this.input.clearHint();
+                  }
+              },
+              _autocomplete: function autocomplete(laxCursor) {
+                  var hint, query, isCursorAtEnd, datum;
+                  hint = this.input.getHint();
+                  query = this.input.getQuery();
+                  isCursorAtEnd = laxCursor || this.input.isCursorAtEnd();
+                  if (hint && query !== hint && isCursorAtEnd) {
+                      datum = this.dropdown.getDatumForTopSuggestion();
+                      datum && this.input.setInputValue(datum.value);
+                      this.eventBus.trigger("autocompleted", datum.raw, datum.datasetName);
+                  }
+              },
+              _select: function select(datum) {
+                  this.input.setQuery(datum.value);
+                  this.input.setInputValue(datum.value, true);
+                  this._setLanguageDirection();
+                  this.eventBus.trigger("selected", datum.raw, datum.datasetName);
+                  this.dropdown.close();
+                  _.defer(_.bind(this.dropdown.empty, this.dropdown));
+              },
+              open: function open() {
+                  this.dropdown.open();
+              },
+              close: function close() {
+                  this.dropdown.close();
+              },
+              setVal: function setVal(val) {
+                  if (this.isActivated) {
+                      this.input.setInputValue(val);
+                  } else {
+                      this.input.setQuery(val);
+                      this.input.setInputValue(val, true);
+                  }
+                  this._setLanguageDirection();
+              },
+              getVal: function getVal() {
+                  return this.input.getQuery();
+              },
+              destroy: function destroy() {
+                  this.input.destroy();
+                  this.dropdown.destroy();
+                  destroyDomStructure(this.$node);
+                  this.$node = null;
+              }
+          });
+          return Typeahead;
+          function buildDomStructure(input, withHint) {
+              var $input, $wrapper, $dropdown, $hint;
+              $input = $(input);
+              $wrapper = $(html.wrapper).css(css.wrapper);
+              $dropdown = $(html.dropdown).css(css.dropdown);
+              $hint = $input.clone().css(css.hint).css(getBackgroundStyles($input));
+              $hint.val("").removeData().addClass("tt-hint").removeAttr("id name placeholder").prop("disabled", true).attr({
+                  autocomplete: "off",
+                  spellcheck: "false"
+              });
+              $input.data(attrsKey, {
+                  dir: $input.attr("dir"),
+                  autocomplete: $input.attr("autocomplete"),
+                  spellcheck: $input.attr("spellcheck"),
+                  style: $input.attr("style")
+              });
+              $input.addClass("tt-input").attr({
+                  autocomplete: "off",
+                  spellcheck: false
+              }).css(withHint ? css.input : css.inputWithNoHint);
+              try {
+                  !$input.attr("dir") && $input.attr("dir", "auto");
+              } catch (e) {}
+              return $input.wrap($wrapper).parent().prepend(withHint ? $hint : null).append($dropdown);
+          }
+          function getBackgroundStyles($el) {
+              return {
+                  backgroundAttachment: $el.css("background-attachment"),
+                  backgroundClip: $el.css("background-clip"),
+                  backgroundColor: $el.css("background-color"),
+                  backgroundImage: $el.css("background-image"),
+                  backgroundOrigin: $el.css("background-origin"),
+                  backgroundPosition: $el.css("background-position"),
+                  backgroundRepeat: $el.css("background-repeat"),
+                  backgroundSize: $el.css("background-size")
+              };
+          }
+          function destroyDomStructure($node) {
+              var $input = $node.find(".tt-input");
+              _.each($input.data(attrsKey), function(val, key) {
+                  _.isUndefined(val) ? $input.removeAttr(key) : $input.attr(key, val);
+              });
+              $input.detach().removeData(attrsKey).removeClass("tt-input").insertAfter($node);
+              $node.remove();
+          }
+      }();
+      (function() {
+          var old, typeaheadKey, methods;
+          old = $.fn.typeahead;
+          typeaheadKey = "ttTypeahead";
+          methods = {
+              initialize: function initialize(o, datasets) {
+                  datasets = _.isArray(datasets) ? datasets : [].slice.call(arguments, 1);
+                  o = o || {};
+                  return this.each(attach);
+                  function attach() {
+                      var $input = $(this), eventBus, typeahead;
+                      _.each(datasets, function(d) {
+                          d.highlight = !!o.highlight;
+                      });
+                      typeahead = new Typeahead({
+                          input: $input,
+                          eventBus: eventBus = new EventBus({
+                              el: $input
+                          }),
+                          withHint: _.isUndefined(o.hint) ? true : !!o.hint,
+                          minLength: o.minLength,
+                          autoselect: o.autoselect,
+                          datasets: datasets
+                      });
+                      $input.data(typeaheadKey, typeahead);
+                  }
+              },
+              open: function open() {
+                  return this.each(openTypeahead);
+                  function openTypeahead() {
+                      var $input = $(this), typeahead;
+                      if (typeahead = $input.data(typeaheadKey)) {
+                          typeahead.open();
+                      }
+                  }
+              },
+              close: function close() {
+                  return this.each(closeTypeahead);
+                  function closeTypeahead() {
+                      var $input = $(this), typeahead;
+                      if (typeahead = $input.data(typeaheadKey)) {
+                          typeahead.close();
+                      }
+                  }
+              },
+              val: function val(newVal) {
+                  return !arguments.length ? getVal(this.first()) : this.each(setVal);
+                  function setVal() {
+                      var $input = $(this), typeahead;
+                      if (typeahead = $input.data(typeaheadKey)) {
+                          typeahead.setVal(newVal);
+                      }
+                  }
+                  function getVal($input) {
+                      var typeahead, query;
+                      if (typeahead = $input.data(typeaheadKey)) {
+                          query = typeahead.getVal();
+                      }
+                      return query;
+                  }
+              },
+              destroy: function destroy() {
+                  return this.each(unattach);
+                  function unattach() {
+                      var $input = $(this), typeahead;
+                      if (typeahead = $input.data(typeaheadKey)) {
+                          typeahead.destroy();
+                          $input.removeData(typeaheadKey);
+                      }
+                  }
+              }
+          };
+          $.fn.typeahead = function(method) {
+              if (methods[method]) {
+                  return methods[method].apply(this, [].slice.call(arguments, 1));
+              } else {
+                  return methods.initialize.apply(this, arguments);
+              }
+          };
+          $.fn.typeahead.noConflict = function noConflict() {
+              $.fn.typeahead = old;
+              return this;
+          };
+      })();
+      
+      
+      
+  //})(window.jQuery);
+  
+  
+  });
+  define('searchView',[
+    'App',
+    // Templates
+    'text!tpl/search.html',
+    'text!tpl/search_suggestion.html',
+    // Tools
+    'typeahead'
+  ], function(App, searchTpl, suggestionTpl) {
+  
+    var searchView = Backbone.View.extend({
+      el: '#search',
+      /**
+       * Init.
+       */
+      init: function() {
+        var tpl = _.template(searchTpl);
+        var className = 'form-control input-lg';
+        var placeholder = 'Search reference';
+        this.searchHtml = tpl({
+          'placeholder': placeholder,
+          'className': className
         });
-        return Dataset;
-        function getDisplayFn(display) {
-            display = display || "value";
-            return _.isFunction(display) ? display : displayFn;
-            function displayFn(obj) {
-                return obj[display];
-            }
-        }
-        function getTemplates(templates, displayFn) {
-            return {
-                empty: templates.empty && _.templatify(templates.empty),
-                header: templates.header && _.templatify(templates.header),
-                footer: templates.footer && _.templatify(templates.footer),
-                suggestion: templates.suggestion || suggestionTemplate
-            };
-            function suggestionTemplate(context) {
-                return "<p>" + displayFn(context) + "</p>";
-            }
-        }
-        function isValidName(str) {
-            return /^[_a-zA-Z0-9-]+$/.test(str);
-        }
-    }();
-    var Dropdown = function() {
-        function Dropdown(o) {
-            var that = this, onSuggestionClick, onSuggestionMouseEnter, onSuggestionMouseLeave;
-            o = o || {};
-            if (!o.menu) {
-                $.error("menu is required");
-            }
-            this.isOpen = false;
-            this.isEmpty = true;
-            this.datasets = _.map(o.datasets, initializeDataset);
-            onSuggestionClick = _.bind(this._onSuggestionClick, this);
-            onSuggestionMouseEnter = _.bind(this._onSuggestionMouseEnter, this);
-            onSuggestionMouseLeave = _.bind(this._onSuggestionMouseLeave, this);
-            this.$menu = $(o.menu).on("click.tt", ".tt-suggestion", onSuggestionClick).on("mouseenter.tt", ".tt-suggestion", onSuggestionMouseEnter).on("mouseleave.tt", ".tt-suggestion", onSuggestionMouseLeave);
-            _.each(this.datasets, function(dataset) {
-                that.$menu.append(dataset.getRoot());
-                dataset.onSync("rendered", that._onRendered, that);
-            });
-        }
-        _.mixin(Dropdown.prototype, EventEmitter, {
-            _onSuggestionClick: function onSuggestionClick($e) {
-                this.trigger("suggestionClicked", $($e.currentTarget));
-            },
-            _onSuggestionMouseEnter: function onSuggestionMouseEnter($e) {
-                this._removeCursor();
-                this._setCursor($($e.currentTarget), true);
-            },
-            _onSuggestionMouseLeave: function onSuggestionMouseLeave() {
-                this._removeCursor();
-            },
-            _onRendered: function onRendered() {
-                this.isEmpty = _.every(this.datasets, isDatasetEmpty);
-                this.isEmpty ? this._hide() : this.isOpen && this._show();
-                this.trigger("datasetRendered");
-                function isDatasetEmpty(dataset) {
-                    return dataset.isEmpty();
-                }
-            },
-            _hide: function() {
-                this.$menu.hide();
-            },
-            _show: function() {
-                this.$menu.css("display", "block");
-            },
-            _getSuggestions: function getSuggestions() {
-                return this.$menu.find(".tt-suggestion");
-            },
-            _getCursor: function getCursor() {
-                return this.$menu.find(".tt-cursor").first();
-            },
-            _setCursor: function setCursor($el, silent) {
-                $el.first().addClass("tt-cursor");
-                !silent && this.trigger("cursorMoved");
-            },
-            _removeCursor: function removeCursor() {
-                this._getCursor().removeClass("tt-cursor");
-            },
-            _moveCursor: function moveCursor(increment) {
-                var $suggestions, $oldCursor, newCursorIndex, $newCursor;
-                if (!this.isOpen) {
-                    return;
-                }
-                $oldCursor = this._getCursor();
-                $suggestions = this._getSuggestions();
-                this._removeCursor();
-                newCursorIndex = $suggestions.index($oldCursor) + increment;
-                newCursorIndex = (newCursorIndex + 1) % ($suggestions.length + 1) - 1;
-                if (newCursorIndex === -1) {
-                    this.trigger("cursorRemoved");
-                    return;
-                } else if (newCursorIndex < -1) {
-                    newCursorIndex = $suggestions.length - 1;
-                }
-                this._setCursor($newCursor = $suggestions.eq(newCursorIndex));
-                this._ensureVisible($newCursor);
-            },
-            _ensureVisible: function ensureVisible($el) {
-                var elTop, elBottom, menuScrollTop, menuHeight;
-                elTop = $el.position().top;
-                elBottom = elTop + $el.outerHeight(true);
-                menuScrollTop = this.$menu.scrollTop();
-                menuHeight = this.$menu.height() + parseInt(this.$menu.css("paddingTop"), 10) + parseInt(this.$menu.css("paddingBottom"), 10);
-                if (elTop < 0) {
-                    this.$menu.scrollTop(menuScrollTop + elTop);
-                } else if (menuHeight < elBottom) {
-                    this.$menu.scrollTop(menuScrollTop + (elBottom - menuHeight));
-                }
-            },
-            close: function close() {
-                if (this.isOpen) {
-                    this.isOpen = false;
-                    this._removeCursor();
-                    this._hide();
-                    this.trigger("closed");
-                }
-            },
-            open: function open() {
-                if (!this.isOpen) {
-                    this.isOpen = true;
-                    !this.isEmpty && this._show();
-                    this.trigger("opened");
-                }
-            },
-            setLanguageDirection: function setLanguageDirection(dir) {
-                this.$menu.css(dir === "ltr" ? css.ltr : css.rtl);
-            },
-            moveCursorUp: function moveCursorUp() {
-                this._moveCursor(-1);
-            },
-            moveCursorDown: function moveCursorDown() {
-                this._moveCursor(+1);
-            },
-            getDatumForSuggestion: function getDatumForSuggestion($el) {
-                var datum = null;
-                if ($el.length) {
-                    datum = {
-                        raw: Dataset.extractDatum($el),
-                        value: Dataset.extractValue($el),
-                        datasetName: Dataset.extractDatasetName($el)
-                    };
-                }
-                return datum;
-            },
-            getDatumForCursor: function getDatumForCursor() {
-                return this.getDatumForSuggestion(this._getCursor().first());
-            },
-            getDatumForTopSuggestion: function getDatumForTopSuggestion() {
-                return this.getDatumForSuggestion(this._getSuggestions().first());
-            },
-            update: function update(query) {
-                _.each(this.datasets, updateDataset);
-                function updateDataset(dataset) {
-                    dataset.update(query);
-                }
-            },
-            empty: function empty() {
-                _.each(this.datasets, clearDataset);
-                this.isEmpty = true;
-                function clearDataset(dataset) {
-                    dataset.clear();
-                }
-            },
-            isVisible: function isVisible() {
-                return this.isOpen && !this.isEmpty;
-            },
-            destroy: function destroy() {
-                this.$menu.off(".tt");
-                this.$menu = null;
-                _.each(this.datasets, destroyDataset);
-                function destroyDataset(dataset) {
-                    dataset.destroy();
-                }
+        this.items = App.classes.concat(App.allItems);
+  
+        return this;
+      },
+      /**
+       * Render input field with Typehead activated.
+       */
+      render: function() {
+        // Append the view to the dom
+        this.$el.append(this.searchHtml);
+  
+        // Render Typeahead
+        var $searchInput = this.$el.find('input[type=text]');
+        this.typeaheadRender($searchInput);
+        this.typeaheadEvents($searchInput);
+  
+        return this;
+      },
+      /**
+       * Apply Twitter Typeahead to the search input field.
+       * @param {jquery} $input
+       */
+      typeaheadRender: function($input) {
+        var self = this;
+        $input.typeahead(null, {
+          'displayKey': 'name',
+          'minLength': 2,
+          //'highlight': true,
+          'source': self.substringMatcher(this.items),
+          'templates': {
+            'empty': '<p class="empty-message">Unable to find any item that match the current query</p>',
+            'suggestion': _.template(suggestionTpl)
+          }
+        });
+      },
+      /**
+       * Setup typeahead custom events (item selected).
+       */
+      typeaheadEvents: function($input) {
+        var self = this;
+        $input.on('typeahead:selected', function(e, item, datasetName) {
+          var selectedItem = self.items[item.idx];
+          select(selectedItem);
+        });
+        $input.on('keydown', function(e) {
+          if (e.which === 13) { // enter
+            var txt = $input.val();
+            var f = _.find(self.items, function(it) { return it.name == txt; });
+            if (f) {
+              select(f);
             }
+          } else if (e.which === 27) {
+            $input.blur();
+          }
         });
-        return Dropdown;
-        function initializeDataset(oDataset) {
-            return new Dataset(oDataset);
+  
+        function select(selectedItem) {
+          var hash = App.router.getHash(selectedItem);//
+          App.router.navigate(hash, {'trigger': true});
+          $('#item').focus();
         }
-    }();
-    var Typeahead = function() {
-        var attrsKey = "ttAttrs";
-        function Typeahead(o) {
-            var $menu, $input, $hint;
-            o = o || {};
-            if (!o.input) {
-                $.error("missing input");
+      },
+      /**
+       * substringMatcher function for Typehead (search for strings in an array).
+       * @param {array} array
+       * @returns {Function}
+       */
+      substringMatcher: function(array) {
+        return function findMatches(query, callback) {
+          var matches = [], substrRegex, arrayLength = array.length;
+  
+          // regex used to determine if a string contains the substring `query`
+          substrRegex = new RegExp(query, 'i');
+  
+          // iterate through the pool of strings and for any string that
+          // contains the substring `query`, add it to the `matches` array
+          for (var i=0; i < arrayLength; i++) {
+            var item = array[i];
+            if (substrRegex.test(item.name)) {
+              // typeahead expects suggestions to be a js object
+              matches.push({
+                'itemtype': item.itemtype,
+                'name': item.name,
+                'className': item.class,
+                'is_constructor': !!item.is_constructor,
+                'final': item.final,
+                'idx': i
+              });
             }
-            this.isActivated = false;
-            this.autoselect = !!o.autoselect;
-            this.minLength = _.isNumber(o.minLength) ? o.minLength : 1;
-            this.$node = buildDomStructure(o.input, o.withHint);
-            $menu = this.$node.find(".tt-dropdown-menu");
-            $input = this.$node.find(".tt-input");
-            $hint = this.$node.find(".tt-hint");
-            $input.on("blur.tt", function($e) {
-                var active, isActive, hasActive;
-                active = document.activeElement;
-                isActive = $menu.is(active);
-                hasActive = $menu.has(active).length > 0;
-                if (_.isMsie() && (isActive || hasActive)) {
-                    $e.preventDefault();
-                    $e.stopImmediatePropagation();
-                    _.defer(function() {
-                        $input.focus();
-                    });
-                }
-            });
-            $menu.on("mousedown.tt", function($e) {
-                $e.preventDefault();
-            });
-            this.eventBus = o.eventBus || new EventBus({
-                el: $input
-            });
-            this.dropdown = new Dropdown({
-                menu: $menu,
-                datasets: o.datasets
-            }).onSync("suggestionClicked", this._onSuggestionClicked, this).onSync("cursorMoved", this._onCursorMoved, this).onSync("cursorRemoved", this._onCursorRemoved, this).onSync("opened", this._onOpened, this).onSync("closed", this._onClosed, this).onAsync("datasetRendered", this._onDatasetRendered, this);
-            this.input = new Input({
-                input: $input,
-                hint: $hint
-            }).onSync("focused", this._onFocused, this).onSync("blurred", this._onBlurred, this).onSync("enterKeyed", this._onEnterKeyed, this).onSync("tabKeyed", this._onTabKeyed, this).onSync("escKeyed", this._onEscKeyed, this).onSync("upKeyed", this._onUpKeyed, this).onSync("downKeyed", this._onDownKeyed, this).onSync("leftKeyed", this._onLeftKeyed, this).onSync("rightKeyed", this._onRightKeyed, this).onSync("queryChanged", this._onQueryChanged, this).onSync("whitespaceChanged", this._onWhitespaceChanged, this);
-            this._setLanguageDirection();
-        }
-        _.mixin(Typeahead.prototype, {
-            _onSuggestionClicked: function onSuggestionClicked(type, $el) {
-                var datum;
-                if (datum = this.dropdown.getDatumForSuggestion($el)) {
-                    this._select(datum);
-                }
-            },
-            _onCursorMoved: function onCursorMoved() {
-                var datum = this.dropdown.getDatumForCursor();
-                this.input.setInputValue(datum.value, true);
-                this.eventBus.trigger("cursorchanged", datum.raw, datum.datasetName);
-            },
-            _onCursorRemoved: function onCursorRemoved() {
-                this.input.resetInputValue();
-                this._updateHint();
-            },
-            _onDatasetRendered: function onDatasetRendered() {
-                this._updateHint();
-            },
-            _onOpened: function onOpened() {
-                this._updateHint();
-                this.eventBus.trigger("opened");
-            },
-            _onClosed: function onClosed() {
-                this.input.clearHint();
-                this.eventBus.trigger("closed");
-            },
-            _onFocused: function onFocused() {
-                this.isActivated = true;
-                this.dropdown.open();
-            },
-            _onBlurred: function onBlurred() {
-                this.isActivated = false;
-                this.dropdown.empty();
-                this.dropdown.close();
-                this.setVal("", true); //LM
-            },
-            _onEnterKeyed: function onEnterKeyed(type, $e) {
-                var cursorDatum, topSuggestionDatum;
-                cursorDatum = this.dropdown.getDatumForCursor();
-                topSuggestionDatum = this.dropdown.getDatumForTopSuggestion();
-                if (cursorDatum) {
-                    this._select(cursorDatum);
-                    $e.preventDefault();
-                } else if (this.autoselect && topSuggestionDatum) {
-                    this._select(topSuggestionDatum);
-                    $e.preventDefault();
-                }
-            },
-            _onTabKeyed: function onTabKeyed(type, $e) {
-                var datum;
-                if (datum = this.dropdown.getDatumForCursor()) {
-                    this._select(datum);
-                    $e.preventDefault();
-                } else {
-                    this._autocomplete(true);
-                }
-            },
-            _onEscKeyed: function onEscKeyed() {
-                this.dropdown.close();
-                this.input.resetInputValue();
-            },
-            _onUpKeyed: function onUpKeyed() {
-                var query = this.input.getQuery();
-                this.dropdown.isEmpty && query.length >= this.minLength ? this.dropdown.update(query) : this.dropdown.moveCursorUp();
-                this.dropdown.open();
-            },
-            _onDownKeyed: function onDownKeyed() {
-                var query = this.input.getQuery();
-                this.dropdown.isEmpty && query.length >= this.minLength ? this.dropdown.update(query) : this.dropdown.moveCursorDown();
-                this.dropdown.open();
-            },
-            _onLeftKeyed: function onLeftKeyed() {
-                this.dir === "rtl" && this._autocomplete();
-            },
-            _onRightKeyed: function onRightKeyed() {
-                this.dir === "ltr" && this._autocomplete();
-            },
-            _onQueryChanged: function onQueryChanged(e, query) {
-                this.input.clearHintIfInvalid();
-                query.length >= this.minLength ? this.dropdown.update(query) : this.dropdown.empty();
-                this.dropdown.open();
-                this._setLanguageDirection();
-            },
-            _onWhitespaceChanged: function onWhitespaceChanged() {
-                this._updateHint();
-                this.dropdown.open();
-            },
-            _setLanguageDirection: function setLanguageDirection() {
-                var dir;
-                if (this.dir !== (dir = this.input.getLanguageDirection())) {
-                    this.dir = dir;
-                    this.$node.css("direction", dir);
-                    this.dropdown.setLanguageDirection(dir);
-                }
-            },
-            _updateHint: function updateHint() {
-                var datum, val, query, escapedQuery, frontMatchRegEx, match;
-                datum = this.dropdown.getDatumForTopSuggestion();
-                if (datum && this.dropdown.isVisible() && !this.input.hasOverflow()) {
-                    val = this.input.getInputValue();
-                    query = Input.normalizeQuery(val);
-                    escapedQuery = _.escapeRegExChars(query);
-                    frontMatchRegEx = new RegExp("^(?:" + escapedQuery + ")(.+$)", "i");
-                    match = frontMatchRegEx.exec(datum.value);
-                    match ? this.input.setHint(val + match[1]) : this.input.clearHint();
-                } else {
-                    this.input.clearHint();
-                }
-            },
-            _autocomplete: function autocomplete(laxCursor) {
-                var hint, query, isCursorAtEnd, datum;
-                hint = this.input.getHint();
-                query = this.input.getQuery();
-                isCursorAtEnd = laxCursor || this.input.isCursorAtEnd();
-                if (hint && query !== hint && isCursorAtEnd) {
-                    datum = this.dropdown.getDatumForTopSuggestion();
-                    datum && this.input.setInputValue(datum.value);
-                    this.eventBus.trigger("autocompleted", datum.raw, datum.datasetName);
-                }
-            },
-            _select: function select(datum) {
-                this.input.setQuery(datum.value);
-                this.input.setInputValue(datum.value, true);
-                this._setLanguageDirection();
-                this.eventBus.trigger("selected", datum.raw, datum.datasetName);
-                this.dropdown.close();
-                _.defer(_.bind(this.dropdown.empty, this.dropdown));
-            },
-            open: function open() {
-                this.dropdown.open();
-            },
-            close: function close() {
-                this.dropdown.close();
-            },
-            setVal: function setVal(val) {
-                if (this.isActivated) {
-                    this.input.setInputValue(val);
-                } else {
-                    this.input.setQuery(val);
-                    this.input.setInputValue(val, true);
+          }
+  
+          callback(matches);
+        };
+      }
+  
+    });
+  
+    return searchView;
+  
+  });
+  
+  
+  define('text!tpl/list.html',[],function () { return '<% _.each(groups, function(group){ %>\n  <div class="reference-group clearfix main-ref-page">  \n    <h2 class="group-name" id="group-<%=group.name%>" tab-index="-1"><%=group.name%></h2>\n    <div class="reference-subgroups clearfix main-ref-page">  \n    <% _.each(group.subgroups, function(subgroup, ind) { %>\n      <div class="reference-subgroup">\n        <% if (subgroup.name !== \'0\') { %>\n          <h3 id="<%=group.name%><%=ind%>" class="subgroup-name subgroup-<%=subgroup.name%>"><%=subgroup.name%></h3>\n        <% } %>\n        <ul aria-labelledby="<%=group.name%> <%=ind%>">\n        <% _.each(subgroup.items, function(item) { %>\n        <li><a href="<%=item.hash%>"><%=item.name%><% if (item.itemtype === \'method\') { %>()<%}%></a></li>\n        <% }); %>\n        </ul>\n      </div>\n    <% }); %>\n    </div>\n  </div>\n<% }); %>\n';});
+  
+  define('listView',[
+    'App',
+    // Templates
+    'text!tpl/list.html'
+  ], function (App, listTpl) {
+    var striptags = function(html) {
+      var div = document.createElement('div');
+      div.innerHTML = html;
+      return div.textContent;
+    };
+  
+    var listView = Backbone.View.extend({
+      el: '#list',
+      events: {},
+      /**
+       * Init.
+       */
+      init: function () {
+        this.listTpl = _.template(listTpl);
+  
+        return this;
+      },
+      /**
+       * Render the list.
+       */
+      render: function (items, listCollection) {
+        if (items && listCollection) {
+          var self = this;
+  
+          // Render items and group them by module
+          // module === group
+          this.groups = {};
+          _.each(items, function (item, i) {
+  
+            if (!item.private && item.file.indexOf('addons') === -1) { //addons don't get displayed on main page
+  
+              var group = item.module || '_';
+              var subgroup = item.submodule || '_';
+              if (group === subgroup) {
+                subgroup = '0';
+              }
+              var hash = App.router.getHash(item);
+  
+              // fixes broken links for #/p5/> and #/p5/>=
+              item.hash = item.hash.replace('>', '&gt;');
+  
+              // Create a group list
+              if (!self.groups[group]) {
+                self.groups[group] = {
+                  name: group.replace('_', '&nbsp;'),
+                  subgroups: {}
+                };
+              }
+  
+              // Create a subgroup list
+              if (!self.groups[group].subgroups[subgroup]) {
+                self.groups[group].subgroups[subgroup] = {
+                  name: subgroup.replace('_', '&nbsp;'),
+                  items: []
+                };
+              }
+  
+              // hide the un-interesting constants
+              if (group === 'Constants' && !item.example)
+                return;
+  
+              if (item.class === 'p5') {
+  
+                self.groups[group].subgroups[subgroup].items.push(item);
+  
+              } else {
+  
+                var found = _.find(self.groups[group].subgroups[subgroup].items,
+                  function(i){ return i.name == item.class; });
+  
+                if (!found) {
+  
+                  // FIX TO INVISIBLE OBJECTS: DH (see also router.js)
+                  var ind = hash.lastIndexOf('/');
+                  hash = item.hash.substring(0, ind).replace('p5/','p5.');
+                  self.groups[group].subgroups[subgroup].items.push({
+                    name: item.class,
+                    hash: hash
+                  });
                 }
-                this._setLanguageDirection();
-            },
-            getVal: function getVal() {
-                return this.input.getQuery();
-            },
-            destroy: function destroy() {
-                this.input.destroy();
-                this.dropdown.destroy();
-                destroyDomStructure(this.$node);
-                this.$node = null;
+  
+              }
             }
-        });
-        return Typeahead;
-        function buildDomStructure(input, withHint) {
-            var $input, $wrapper, $dropdown, $hint;
-            $input = $(input);
-            $wrapper = $(html.wrapper).css(css.wrapper);
-            $dropdown = $(html.dropdown).css(css.dropdown);
-            $hint = $input.clone().css(css.hint).css(getBackgroundStyles($input));
-            $hint.val("").removeData().addClass("tt-hint").removeAttr("id name placeholder").prop("disabled", true).attr({
-                autocomplete: "off",
-                spellcheck: "false"
-            });
-            $input.data(attrsKey, {
-                dir: $input.attr("dir"),
-                autocomplete: $input.attr("autocomplete"),
-                spellcheck: $input.attr("spellcheck"),
-                style: $input.attr("style")
-            });
-            $input.addClass("tt-input").attr({
-                autocomplete: "off",
-                spellcheck: false
-            }).css(withHint ? css.input : css.inputWithNoHint);
-            try {
-                !$input.attr("dir") && $input.attr("dir", "auto");
-            } catch (e) {}
-            return $input.wrap($wrapper).parent().prepend(withHint ? $hint : null).append($dropdown);
-        }
-        function getBackgroundStyles($el) {
-            return {
-                backgroundAttachment: $el.css("background-attachment"),
-                backgroundClip: $el.css("background-clip"),
-                backgroundColor: $el.css("background-color"),
-                backgroundImage: $el.css("background-image"),
-                backgroundOrigin: $el.css("background-origin"),
-                backgroundPosition: $el.css("background-position"),
-                backgroundRepeat: $el.css("background-repeat"),
-                backgroundSize: $el.css("background-size")
-            };
+          });
+  
+          // Put the <li> items html into the list <ul>
+          var listHtml = self.listTpl({
+            'striptags': striptags,
+            'title': self.capitalizeFirst(listCollection),
+            'groups': self.groups,
+            'listCollection': listCollection
+          });
+  
+          // Render the view
+          this.$el.html(listHtml);
         }
-        function destroyDomStructure($node) {
-            var $input = $node.find(".tt-input");
-            _.each($input.data(attrsKey), function(val, key) {
-                _.isUndefined(val) ? $input.removeAttr(key) : $input.attr(key, val);
-            });
-            $input.detach().removeData(attrsKey).removeClass("tt-input").insertAfter($node);
-            $node.remove();
+  
+        var renderEvent = new Event('reference-rendered');
+        window.dispatchEvent(renderEvent);
+  
+        return this;
+      },
+      /**
+       * Show a list of items.
+       * @param {array} items Array of item objects.
+       * @returns {object} This view.
+       */
+      show: function (listGroup) {
+        if (App[listGroup]) {
+          this.render(App[listGroup], listGroup);
         }
-    }();
-    (function() {
-        var old, typeaheadKey, methods;
-        old = $.fn.typeahead;
-        typeaheadKey = "ttTypeahead";
-        methods = {
-            initialize: function initialize(o, datasets) {
-                datasets = _.isArray(datasets) ? datasets : [].slice.call(arguments, 1);
-                o = o || {};
-                return this.each(attach);
-                function attach() {
-                    var $input = $(this), eventBus, typeahead;
-                    _.each(datasets, function(d) {
-                        d.highlight = !!o.highlight;
-                    });
-                    typeahead = new Typeahead({
-                        input: $input,
-                        eventBus: eventBus = new EventBus({
-                            el: $input
-                        }),
-                        withHint: _.isUndefined(o.hint) ? true : !!o.hint,
-                        minLength: o.minLength,
-                        autoselect: o.autoselect,
-                        datasets: datasets
-                    });
-                    $input.data(typeaheadKey, typeahead);
-                }
-            },
-            open: function open() {
-                return this.each(openTypeahead);
-                function openTypeahead() {
-                    var $input = $(this), typeahead;
-                    if (typeahead = $input.data(typeaheadKey)) {
-                        typeahead.open();
-                    }
-                }
-            },
-            close: function close() {
-                return this.each(closeTypeahead);
-                function closeTypeahead() {
-                    var $input = $(this), typeahead;
-                    if (typeahead = $input.data(typeaheadKey)) {
-                        typeahead.close();
-                    }
-                }
-            },
-            val: function val(newVal) {
-                return !arguments.length ? getVal(this.first()) : this.each(setVal);
-                function setVal() {
-                    var $input = $(this), typeahead;
-                    if (typeahead = $input.data(typeaheadKey)) {
-                        typeahead.setVal(newVal);
-                    }
-                }
-                function getVal($input) {
-                    var typeahead, query;
-                    if (typeahead = $input.data(typeaheadKey)) {
-                        query = typeahead.getVal();
-                    }
-                    return query;
-                }
-            },
-            destroy: function destroy() {
-                return this.each(unattach);
-                function unattach() {
-                    var $input = $(this), typeahead;
-                    if (typeahead = $input.data(typeaheadKey)) {
-                        typeahead.destroy();
-                        $input.removeData(typeaheadKey);
-                    }
-                }
-            }
-        };
-        $.fn.typeahead = function(method) {
-            if (methods[method]) {
-                return methods[method].apply(this, [].slice.call(arguments, 1));
-            } else {
-                return methods.initialize.apply(this, arguments);
-            }
-        };
-        $.fn.typeahead.noConflict = function noConflict() {
-            $.fn.typeahead = old;
-            return this;
-        };
-    })();
-    
-    
-    
-//})(window.jQuery);
-
-
-});
-define('searchView',[
-  'App',
-  // Templates
-  'text!tpl/search.html',
-  'text!tpl/search_suggestion.html',
-  // Tools
-  'typeahead'
-], function(App, searchTpl, suggestionTpl) {
-
-  var searchView = Backbone.View.extend({
-    el: '#search',
+        App.pageView.hideContentViews();
+  
+        this.$el.show();
+  
+        return this;
+      },
+      /**
+       * Helper method to capitalize the first letter of a string
+       * @param {string} str
+       * @returns {string} Returns the string.
+       */
+      capitalizeFirst: function (str) {
+        return str.substr(0, 1).toUpperCase() + str.substr(1);
+      }
+  
+  
+  
+    });
+  
+    return listView;
+  
+  });
+  
+  
+  define('text!tpl/item.html',[],function () { return '<h2><%=item.name%><% if (item.isMethod) { %>()<% } %></h2>\n\n<% if (item.example) { %>\n<div class="example">\n  <h3 id="reference-example">Examples</h3>\n\n  <div class="example-content" data-alt="<%= item.alt %>">\n    <% _.each(item.example, function(example, i){ %>\n      <%= example %>\n    <% }); %>\n  </div>\n</div>\n<% } %>\n\n<div class="description">\n\n  <h3 id="reference-description">Description</h3>\n\n  <% if (item.deprecated) { %>\n    <p>\n      Deprecated: <%=item.name%><% if (item.isMethod) { %>()<% } %> is deprecated and will be removed in a future version of p5. <% if (item.deprecationMessage) { %><%=item.deprecationMessage%><% } %>\n    </p>\n  <% } %>\n\n\n  <span class=\'description-text\'><%= item.description %></span>\n\n  <% if (item.extends) { %>\n    <p><span id="reference-extends">Extends</span> <a href="/reference/#/<%=item.extends%>" title="<%=item.extends%> reference"><%=item.extends%></a></p>\n  <% } %>\n\n  <% if (item.module === \'p5.sound\') { %>\n    <p>This function requires you include the p5.sound library.  Add the following into the head of your index.html file:\n      <pre><code class="language-javascript">&lt;script src="path/to/p5.sound.js"&gt;&lt;/script&gt;</code></pre>\n    </p>\n  <% } %>\n\n  <% if (item.constRefs) { %>\n    <p>Used by:\n  <%\n      var refs = item.constRefs;\n      for (var i = 0; i < refs.length; i ++) {\n        var ref = refs[i];\n        var name = ref;\n        if (name.substr(0, 3) === \'p5.\') {\n          name = name.substr(3);\n        }\n  if (i !== 0) {\n          if (i == refs.length - 1) {\n            %> and <%\n          } else {\n            %>, <%\n          }\n        }\n        %><a href="./#/<%= ref.replace(\'.\', \'/\') %>"><%= name %>()</a><%\n      }\n  %>\n    </p>\n  <% } %>\n</div>\n\n<% if (isConstructor || !isClass) { %>\n\n<div class="syntax">\n  <h3 id="reference-syntax">Syntax</h3>\n  <p>\n    <% syntaxes.forEach(function(syntax) { %>\n    <pre class="language-javascript"><%= syntax %></pre>\n    <% }) %>\n  </p>\n</div>\n\n\n<% if (item.params) { %>\n  <div class="params">\n    <h3 id="reference-parameters">Parameters</h3>\n    <ul aria-labelledby=\'reference-parameters\'>\n    <% for (var i=0; i<item.params.length; i++) { %>\n      <% var p = item.params[i] %>\n      <li>\n        <div class=\'paramname\'><%=p.name%></div>\n        <% if (p.type) { %>\n          <div class=\'paramtype\'>\n          <% var type = p.type.replace(/(p5\\.[A-Z][A-Za-z]*)/, \'<a href="#/$1">$1</a>\'); %>\n          <span class="param-type label label-info"><%=type%></span>: <%=p.description%>\n          <% if (p.optional) { %> (Optional)<% } %>\n          </div>\n        <% } %>\n      </li>\n    <% } %>\n    </ul>\n  </div>\n<% } %>\n\n<% if (item.return && item.return.type) { %>\n  <div>\n    <h3 id="reference-returns">Returns</h3>\n    <p class=\'returns\'><span class="param-type label label-info"><%=item.return.type%></span>: <%= item.return.description %></p>\n  </div>\n<% } %>\n\n<% } %>\n';});
+  
+  
+  define('text!tpl/class.html',[],function () { return '\n<% if (typeof constructor !== \'undefined\') { %>\n<div class="constructor">\n  <%=constructor%>\n</div>\n<% } %>\n\n<% let fields = _.filter(things, function(item) { return item.itemtype === \'property\' && item.access !== \'private\' }); %>\n<% if (fields.length > 0) { %>\n  <h3 id=\'reference-fields\'>Fields</h3>\n  <ul aria-labelledby=\'reference-fields\'>\n  <% _.each(fields, function(item) { %>\n    <li>\n      <div class=\'paramname\'><a href="<%=item.hash%>" <% if (item.module !== module) { %>class="addon"<% } %>><%=item.name%></a></div>\n      <div class=\'paramtype\'><%= item.description %></div>\n    </li>\n  <% }); %>\n  </ul>\n<% } %>\n\n<% let methods = _.filter(things, function(item) { return item.itemtype === \'method\' && item.access !== \'private\' }); %>\n<% if (methods.length > 0) { %>\n  <h3 id=\'reference-methods\'>Methods</h3>\n  <ul aria-labelledby=\'reference-methods\'>\n    <% _.each(methods, function(item) { %>\n      <li>\n        <div class=\'paramname\'><a href="<%=item.hash%>" <% if (item.module !== module) { %>class="addon"<% } %>><%=item.name%><% if (item.itemtype === \'method\') { %>()<%}%></a></div>\n        <div class=\'paramtype\'><%= item.description %></div>\n      </li>\n    <% }); %>\n  </ul>\n<% } %>\n';});
+  
+  
+  define('text!tpl/itemEnd.html',[],function () { return '\n<br><br>\n\n<div>\n<% if (item.file && item.line) { %>\n<span id="reference-error1">Notice any errors or typos?</span> <a href="https://github.com/processing/p5.js/issues"><span id="reference-contribute2">Please let us know.</span></a> <span id="reference-error3">Please feel free to edit</span> <a href="https://github.com/processing/p5.js/blob/<%= appVersion %>/<%= item.file %>#L<%= item.line %>" target="_blank" ><%= item.file %></a> <span id="reference-error5">and issue a pull request!</span>\n<% } %>\n</div>\n\n<a style="border-bottom:none !important;" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target=_blank><img src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" style="width:88px" alt="creative commons logo"/></a>\n<br><br>\n';});
+  
+  // Copyright (C) 2006 Google Inc.
+  //
+  // Licensed under the Apache License, Version 2.0 (the "License");
+  // you may not use this file except in compliance with the License.
+  // You may obtain a copy of the License at
+  //
+  //      http://www.apache.org/licenses/LICENSE-2.0
+  //
+  // Unless required by applicable law or agreed to in writing, software
+  // distributed under the License is distributed on an "AS IS" BASIS,
+  // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  // See the License for the specific language governing permissions and
+  // limitations under the License.
+  
+  
+  /**
+   * @fileoverview
+   * some functions for browser-side pretty printing of code contained in html.
+   *
+   * <p>
+   * For a fairly comprehensive set of languages see the
+   * <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html#langs">README</a>
+   * file that came with this source.  At a minimum, the lexer should work on a
+   * number of languages including C and friends, Java, Python, Bash, SQL, HTML,
+   * XML, CSS, Javascript, and Makefiles.  It works passably on Ruby, PHP and Awk
+   * and a subset of Perl, but, because of commenting conventions, doesn't work on
+   * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class.
+   * <p>
+   * Usage: <ol>
+   * <li> include this source file in an html page via
+   *   {@code <script src="/path/to/prettify.js"></script>}
+   * <li> define style rules.  See the example page for examples.
+   * <li> mark the {@code <pre>} and {@code <code>} tags in your source with
+   *    {@code class=prettyprint.}
+   *    You can also use the (html deprecated) {@code <xmp>} tag, but the pretty
+   *    printer needs to do more substantial DOM manipulations to support that, so
+   *    some css styles may not be preserved.
+   * </ol>
+   * That's it.  I wanted to keep the API as simple as possible, so there's no
+   * need to specify which language the code is in, but if you wish, you can add
+   * another class to the {@code <pre>} or {@code <code>} element to specify the
+   * language, as in {@code <pre class="prettyprint lang-java">}.  Any class that
+   * starts with "lang-" followed by a file extension, specifies the file type.
+   * See the "lang-*.js" files in this directory for code that implements
+   * per-language file handlers.
+   * <p>
+   * Change log:<br>
+   * cbeust, 2006/08/22
+   * <blockquote>
+   *   Java annotations (start with "@") are now captured as literals ("lit")
+   * </blockquote>
+   * @requires console
+   */
+  
+  // JSLint declarations
+  /*global console, document, navigator, setTimeout, window, define */
+  
+  /** @define {boolean} */
+  var IN_GLOBAL_SCOPE = true;
+  
+  /**
+   * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
+   * UI events.
+   * If set to {@code false}, {@code prettyPrint()} is synchronous.
+   */
+  window['PR_SHOULD_USE_CONTINUATION'] = true;
+  
+  /**
+   * Pretty print a chunk of code.
+   * @param {string} sourceCodeHtml The HTML to pretty print.
+   * @param {string} opt_langExtension The language name to use.
+   *     Typically, a filename extension like 'cpp' or 'java'.
+   * @param {number|boolean} opt_numberLines True to number lines,
+   *     or the 1-indexed number of the first line in sourceCodeHtml.
+   * @return {string} code as html, but prettier
+   */
+  var prettyPrintOne;
+  /**
+   * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
+   * {@code class=prettyprint} and prettify them.
+   *
+   * @param {Function} opt_whenDone called when prettifying is done.
+   * @param {HTMLElement|HTMLDocument} opt_root an element or document
+   *   containing all the elements to pretty print.
+   *   Defaults to {@code document.body}.
+   */
+  var prettyPrint;
+  
+  
+  (function () {
+    var win = window;
+    // Keyword lists for various languages.
+    // We use things that coerce to strings to make them compact when minified
+    // and to defeat aggressive optimizers that fold large string constants.
+    var FLOW_CONTROL_KEYWORDS = ["break,continue,do,else,for,if,return,while"];
+    var C_KEYWORDS = [FLOW_CONTROL_KEYWORDS,"auto,case,char,const,default," + 
+        "double,enum,extern,float,goto,inline,int,long,register,short,signed," +
+        "sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"];
+    var COMMON_KEYWORDS = [C_KEYWORDS,"catch,class,delete,false,import," +
+        "new,operator,private,protected,public,this,throw,true,try,typeof"];
+    var CPP_KEYWORDS = [COMMON_KEYWORDS,"alignof,align_union,asm,axiom,bool," +
+        "concept,concept_map,const_cast,constexpr,decltype,delegate," +
+        "dynamic_cast,explicit,export,friend,generic,late_check," +
+        "mutable,namespace,nullptr,property,reinterpret_cast,static_assert," +
+        "static_cast,template,typeid,typename,using,virtual,where"];
+    var JAVA_KEYWORDS = [COMMON_KEYWORDS,
+        "abstract,assert,boolean,byte,extends,final,finally,implements,import," +
+        "instanceof,interface,null,native,package,strictfp,super,synchronized," +
+        "throws,transient"];
+    var CSHARP_KEYWORDS = [JAVA_KEYWORDS,
+        "as,base,by,checked,decimal,delegate,descending,dynamic,event," +
+        "fixed,foreach,from,group,implicit,in,internal,into,is,let," +
+        "lock,object,out,override,orderby,params,partial,readonly,ref,sbyte," +
+        "sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort," +
+        "var,virtual,where"];
+    var COFFEE_KEYWORDS = "all,and,by,catch,class,else,extends,false,finally," +
+        "for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then," +
+        "throw,true,try,unless,until,when,while,yes";
+    var JSCRIPT_KEYWORDS = [COMMON_KEYWORDS,
+        "debugger,eval,export,function,get,null,set,undefined,var,with," +
+        "Infinity,NaN"];
+    var PERL_KEYWORDS = "caller,delete,die,do,dump,elsif,eval,exit,foreach,for," +
+        "goto,if,import,last,local,my,next,no,our,print,package,redo,require," +
+        "sub,undef,unless,until,use,wantarray,while,BEGIN,END";
+    var PYTHON_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "and,as,assert,class,def,del," +
+        "elif,except,exec,finally,from,global,import,in,is,lambda," +
+        "nonlocal,not,or,pass,print,raise,try,with,yield," +
+        "False,True,None"];
+    var RUBY_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "alias,and,begin,case,class," +
+        "def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo," +
+        "rescue,retry,self,super,then,true,undef,unless,until,when,yield," +
+        "BEGIN,END"];
+     var RUST_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "as,assert,const,copy,drop," +
+        "enum,extern,fail,false,fn,impl,let,log,loop,match,mod,move,mut,priv," +
+        "pub,pure,ref,self,static,struct,true,trait,type,unsafe,use"];
+    var SH_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "case,done,elif,esac,eval,fi," +
+        "function,in,local,set,then,until"];
+    var ALL_KEYWORDS = [
+        CPP_KEYWORDS, CSHARP_KEYWORDS, JSCRIPT_KEYWORDS, PERL_KEYWORDS,
+        PYTHON_KEYWORDS, RUBY_KEYWORDS, SH_KEYWORDS];
+    var C_TYPES = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)\b/;
+  
+    // token style names.  correspond to css classes
     /**
-     * Init.
+     * token style for a string literal
+     * @const
      */
-    init: function() {
-      var tpl = _.template(searchTpl);
-      var className = 'form-control input-lg';
-      var placeholder = 'Search reference';
-      this.searchHtml = tpl({
-        'placeholder': placeholder,
-        'className': className
-      });
-      this.items = App.classes.concat(App.allItems);
-
-      return this;
-    },
+    var PR_STRING = 'str';
     /**
-     * Render input field with Typehead activated.
+     * token style for a keyword
+     * @const
      */
-    render: function() {
-      // Append the view to the dom
-      this.$el.append(this.searchHtml);
-
-      // Render Typeahead
-      var $searchInput = this.$el.find('input[type=text]');
-      this.typeaheadRender($searchInput);
-      this.typeaheadEvents($searchInput);
-
-      return this;
-    },
+    var PR_KEYWORD = 'kwd';
     /**
-     * Apply Twitter Typeahead to the search input field.
-     * @param {jquery} $input
+     * token style for a comment
+     * @const
      */
-    typeaheadRender: function($input) {
-      var self = this;
-      $input.typeahead(null, {
-        'displayKey': 'name',
-        'minLength': 2,
-        //'highlight': true,
-        'source': self.substringMatcher(this.items),
-        'templates': {
-          'empty': '<p class="empty-message">Unable to find any item that match the current query</p>',
-          'suggestion': _.template(suggestionTpl)
-        }
-      });
-    },
+    var PR_COMMENT = 'com';
     /**
-     * Setup typeahead custom events (item selected).
+     * token style for a type
+     * @const
      */
-    typeaheadEvents: function($input) {
-      var self = this;
-      $input.on('typeahead:selected', function(e, item, datasetName) {
-        var selectedItem = self.items[item.idx];
-        select(selectedItem);
-      });
-      $input.on('keydown', function(e) {
-        if (e.which === 13) { // enter
-          var txt = $input.val();
-          var f = _.find(self.items, function(it) { return it.name == txt; });
-          if (f) {
-            select(f);
-          }
-        } else if (e.which === 27) {
-          $input.blur();
-        }
-      });
-
-      function select(selectedItem) {
-        var hash = App.router.getHash(selectedItem);//
-        App.router.navigate(hash, {'trigger': true});
-        $('#item').focus();
-      }
-    },
+    var PR_TYPE = 'typ';
     /**
-     * substringMatcher function for Typehead (search for strings in an array).
-     * @param {array} array
-     * @returns {Function}
+     * token style for a literal value.  e.g. 1, null, true.
+     * @const
      */
-    substringMatcher: function(array) {
-      return function findMatches(query, callback) {
-        var matches = [], substrRegex, arrayLength = array.length;
-
-        // regex used to determine if a string contains the substring `query`
-        substrRegex = new RegExp(query, 'i');
-
-        // iterate through the pool of strings and for any string that
-        // contains the substring `query`, add it to the `matches` array
-        for (var i=0; i < arrayLength; i++) {
-          var item = array[i];
-          if (substrRegex.test(item.name)) {
-            // typeahead expects suggestions to be a js object
-            matches.push({
-              'itemtype': item.itemtype,
-              'name': item.name,
-              'className': item.class,
-              'is_constructor': !!item.is_constructor,
-              'final': item.final,
-              'idx': i
-            });
-          }
-        }
-
-        callback(matches);
-      };
-    }
-
-  });
-
-  return searchView;
-
-});
-
-
-define('text!tpl/list.html',[],function () { return '<% _.each(groups, function(group){ %>\n  <div class="reference-group clearfix main-ref-page">  \n    <h2 class="group-name" id="group-<%=group.name%>" tab-index="-1"><%=group.name%></h2>\n    <div class="reference-subgroups clearfix main-ref-page">  \n    <% _.each(group.subgroups, function(subgroup, ind) { %>\n      <div class="reference-subgroup">\n        <% if (subgroup.name !== \'0\') { %>\n          <h3 id="<%=group.name%><%=ind%>" class="subgroup-name subgroup-<%=subgroup.name%>"><%=subgroup.name%></h3>\n        <% } %>\n        <ul aria-labelledby="<%=group.name%> <%=ind%>">\n        <% _.each(subgroup.items, function(item) { %>\n        <li><a href="<%=item.hash%>"><%=item.name%><% if (item.itemtype === \'method\') { %>()<%}%></a></li>\n        <% }); %>\n        </ul>\n      </div>\n    <% }); %>\n    </div>\n  </div>\n<% }); %>\n';});
-
-define('listView',[
-  'App',
-  // Templates
-  'text!tpl/list.html'
-], function (App, listTpl) {
-  var striptags = function(html) {
-    var div = document.createElement('div');
-    div.innerHTML = html;
-    return div.textContent;
-  };
-
-  var listView = Backbone.View.extend({
-    el: '#list',
-    events: {},
+    var PR_LITERAL = 'lit';
     /**
-     * Init.
+     * token style for a punctuation string.
+     * @const
      */
-    init: function () {
-      this.listTpl = _.template(listTpl);
-
-      return this;
-    },
+    var PR_PUNCTUATION = 'pun';
     /**
-     * Render the list.
+     * token style for plain text.
+     * @const
      */
-    render: function (items, listCollection) {
-      if (items && listCollection) {
-        var self = this;
-
-        // Render items and group them by module
-        // module === group
-        this.groups = {};
-        _.each(items, function (item, i) {
-
-          if (!item.private && item.file.indexOf('addons') === -1) { //addons don't get displayed on main page
-
-            var group = item.module || '_';
-            var subgroup = item.submodule || '_';
-            if (group === subgroup) {
-              subgroup = '0';
-            }
-            var hash = App.router.getHash(item);
-
-            // fixes broken links for #/p5/> and #/p5/>=
-            item.hash = item.hash.replace('>', '&gt;');
-
-            // Create a group list
-            if (!self.groups[group]) {
-              self.groups[group] = {
-                name: group.replace('_', '&nbsp;'),
-                subgroups: {}
-              };
-            }
-
-            // Create a subgroup list
-            if (!self.groups[group].subgroups[subgroup]) {
-              self.groups[group].subgroups[subgroup] = {
-                name: subgroup.replace('_', '&nbsp;'),
-                items: []
-              };
-            }
-
-            // hide the un-interesting constants
-            if (group === 'Constants' && !item.example)
-              return;
-
-            if (item.class === 'p5') {
-
-              self.groups[group].subgroups[subgroup].items.push(item);
-
-            } else {
-
-              var found = _.find(self.groups[group].subgroups[subgroup].items,
-                function(i){ return i.name == item.class; });
-
-              if (!found) {
-
-                // FIX TO INVISIBLE OBJECTS: DH (see also router.js)
-                var ind = hash.lastIndexOf('/');
-                hash = item.hash.substring(0, ind).replace('p5/','p5.');
-                self.groups[group].subgroups[subgroup].items.push({
-                  name: item.class,
-                  hash: hash
-                });
-              }
-
-            }
-          }
-        });
-
-        // Put the <li> items html into the list <ul>
-        var listHtml = self.listTpl({
-          'striptags': striptags,
-          'title': self.capitalizeFirst(listCollection),
-          'groups': self.groups,
-          'listCollection': listCollection
-        });
-
-        // Render the view
-        this.$el.html(listHtml);
-      }
-
-      var renderEvent = new Event('reference-rendered');
-      window.dispatchEvent(renderEvent);
-
-      return this;
-    },
+    var PR_PLAIN = 'pln';
+  
     /**
-     * Show a list of items.
-     * @param {array} items Array of item objects.
-     * @returns {object} This view.
+     * token style for an sgml tag.
+     * @const
      */
-    show: function (listGroup) {
-      if (App[listGroup]) {
-        this.render(App[listGroup], listGroup);
-      }
-      App.pageView.hideContentViews();
-
-      this.$el.show();
-
-      return this;
-    },
+    var PR_TAG = 'tag';
     /**
-     * Helper method to capitalize the first letter of a string
-     * @param {string} str
-     * @returns {string} Returns the string.
+     * token style for a markup declaration such as a DOCTYPE.
+     * @const
      */
-    capitalizeFirst: function (str) {
-      return str.substr(0, 1).toUpperCase() + str.substr(1);
-    }
-
-
-
-  });
-
-  return listView;
-
-});
-
-
-define('text!tpl/item.html',[],function () { return '<h2><%=item.name%><% if (item.isMethod) { %>()<% } %></h2>\n\n<% if (item.example) { %>\n<div class="example">\n  <h3 id="reference-example">Examples</h3>\n\n  <div class="example-content" data-alt="<%= item.alt %>">\n    <% _.each(item.example, function(example, i){ %>\n      <%= example %>\n    <% }); %>\n  </div>\n</div>\n<% } %>\n\n<div class="description">\n\n  <h3 id="reference-description">Description</h3>\n\n  <% if (item.deprecated) { %>\n    <p>\n      Deprecated: <%=item.name%><% if (item.isMethod) { %>()<% } %> is deprecated and will be removed in a future version of p5. <% if (item.deprecationMessage) { %><%=item.deprecationMessage%><% } %>\n    </p>\n  <% } %>\n\n\n  <span class=\'description-text\'><%= item.description %></span>\n\n  <% if (item.extends) { %>\n    <p><span id="reference-extends">Extends</span> <a href="/reference/#/<%=item.extends%>" title="<%=item.extends%> reference"><%=item.extends%></a></p>\n  <% } %>\n\n  <% if (item.module === \'p5.sound\') { %>\n    <p>This function requires you include the p5.sound library.  Add the following into the head of your index.html file:\n      <pre><code class="language-javascript">&lt;script src="path/to/p5.sound.js"&gt;&lt;/script&gt;</code></pre>\n    </p>\n  <% } %>\n\n  <% if (item.constRefs) { %>\n    <p>Used by:\n  <%\n      var refs = item.constRefs;\n      for (var i = 0; i < refs.length; i ++) {\n        var ref = refs[i];\n        var name = ref;\n        if (name.substr(0, 3) === \'p5.\') {\n          name = name.substr(3);\n        }\n  if (i !== 0) {\n          if (i == refs.length - 1) {\n            %> and <%\n          } else {\n            %>, <%\n          }\n        }\n        %><a href="./#/<%= ref.replace(\'.\', \'/\') %>"><%= name %>()</a><%\n      }\n  %>\n    </p>\n  <% } %>\n</div>\n\n<% if (isConstructor || !isClass) { %>\n\n<div class="syntax">\n  <h3 id="reference-syntax">Syntax</h3>\n  <p>\n    <% syntaxes.forEach(function(syntax) { %>\n    <pre class="language-javascript"><%= syntax %></pre>\n    <% }) %>\n  </p>\n</div>\n\n\n<% if (item.params) { %>\n  <div class="params">\n    <h3 id="reference-parameters">Parameters</h3>\n    <ul aria-labelledby=\'reference-parameters\'>\n    <% for (var i=0; i<item.params.length; i++) { %>\n      <% var p = item.params[i] %>\n      <li>\n        <div class=\'paramname\'><%=p.name%></div>\n        <% if (p.type) { %>\n          <div class=\'paramtype\'>\n          <% var type = p.type.replace(/(p5\\.[A-Z][A-Za-z]*)/, \'<a href="#/$1">$1</a>\'); %>\n          <span class="param-type label label-info"><%=type%></span>: <%=p.description%>\n          <% if (p.optional) { %> (Optional)<% } %>\n          </div>\n        <% } %>\n      </li>\n    <% } %>\n    </ul>\n  </div>\n<% } %>\n\n<% if (item.return && item.return.type) { %>\n  <div>\n    <h3 id="reference-returns">Returns</h3>\n    <p class=\'returns\'><span class="param-type label label-info"><%=item.return.type%></span>: <%= item.return.description %></p>\n  </div>\n<% } %>\n\n<% } %>\n';});
-
-
-define('text!tpl/class.html',[],function () { return '\n<% if (typeof constructor !== \'undefined\') { %>\n<div class="constructor">\n  <%=constructor%>\n</div>\n<% } %>\n\n<% let fields = _.filter(things, function(item) { return item.itemtype === \'property\' && item.access !== \'private\' }); %>\n<% if (fields.length > 0) { %>\n  <h3 id=\'reference-fields\'>Fields</h3>\n  <ul aria-labelledby=\'reference-fields\'>\n  <% _.each(fields, function(item) { %>\n    <li>\n      <div class=\'paramname\'><a href="<%=item.hash%>" <% if (item.module !== module) { %>class="addon"<% } %>><%=item.name%></a></div>\n      <div class=\'paramtype\'><%= item.description %></div>\n    </li>\n  <% }); %>\n  </ul>\n<% } %>\n\n<% let methods = _.filter(things, function(item) { return item.itemtype === \'method\' && item.access !== \'private\' }); %>\n<% if (methods.length > 0) { %>\n  <h3 id=\'reference-methods\'>Methods</h3>\n  <ul aria-labelledby=\'reference-methods\'>\n    <% _.each(methods, function(item) { %>\n      <li>\n        <div class=\'paramname\'><a href="<%=item.hash%>" <% if (item.module !== module) { %>class="addon"<% } %>><%=item.name%><% if (item.itemtype === \'method\') { %>()<%}%></a></div>\n        <div class=\'paramtype\'><%= item.description %></div>\n      </li>\n    <% }); %>\n  </ul>\n<% } %>\n';});
-
-
-define('text!tpl/itemEnd.html',[],function () { return '\n<br><br>\n\n<div>\n<% if (item.file && item.line) { %>\n<span id="reference-error1">Notice any errors or typos?</span> <a href="https://github.com/processing/p5.js/issues"><span id="reference-contribute2">Please let us know.</span></a> <span id="reference-error3">Please feel free to edit</span> <a href="https://github.com/processing/p5.js/blob/<%= appVersion %>/<%= item.file %>#L<%= item.line %>" target="_blank" ><%= item.file %></a> <span id="reference-error5">and issue a pull request!</span>\n<% } %>\n</div>\n\n<a style="border-bottom:none !important;" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target=_blank><img src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" style="width:88px" alt="creative commons logo"/></a>\n<br><br>\n';});
-
-// Copyright (C) 2006 Google Inc.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-
-/**
- * @fileoverview
- * some functions for browser-side pretty printing of code contained in html.
- *
- * <p>
- * For a fairly comprehensive set of languages see the
- * <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html#langs">README</a>
- * file that came with this source.  At a minimum, the lexer should work on a
- * number of languages including C and friends, Java, Python, Bash, SQL, HTML,
- * XML, CSS, Javascript, and Makefiles.  It works passably on Ruby, PHP and Awk
- * and a subset of Perl, but, because of commenting conventions, doesn't work on
- * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class.
- * <p>
- * Usage: <ol>
- * <li> include this source file in an html page via
- *   {@code <script src="/path/to/prettify.js"></script>}
- * <li> define style rules.  See the example page for examples.
- * <li> mark the {@code <pre>} and {@code <code>} tags in your source with
- *    {@code class=prettyprint.}
- *    You can also use the (html deprecated) {@code <xmp>} tag, but the pretty
- *    printer needs to do more substantial DOM manipulations to support that, so
- *    some css styles may not be preserved.
- * </ol>
- * That's it.  I wanted to keep the API as simple as possible, so there's no
- * need to specify which language the code is in, but if you wish, you can add
- * another class to the {@code <pre>} or {@code <code>} element to specify the
- * language, as in {@code <pre class="prettyprint lang-java">}.  Any class that
- * starts with "lang-" followed by a file extension, specifies the file type.
- * See the "lang-*.js" files in this directory for code that implements
- * per-language file handlers.
- * <p>
- * Change log:<br>
- * cbeust, 2006/08/22
- * <blockquote>
- *   Java annotations (start with "@") are now captured as literals ("lit")
- * </blockquote>
- * @requires console
- */
-
-// JSLint declarations
-/*global console, document, navigator, setTimeout, window, define */
-
-/** @define {boolean} */
-var IN_GLOBAL_SCOPE = true;
-
-/**
- * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
- * UI events.
- * If set to {@code false}, {@code prettyPrint()} is synchronous.
- */
-window['PR_SHOULD_USE_CONTINUATION'] = true;
-
-/**
- * Pretty print a chunk of code.
- * @param {string} sourceCodeHtml The HTML to pretty print.
- * @param {string} opt_langExtension The language name to use.
- *     Typically, a filename extension like 'cpp' or 'java'.
- * @param {number|boolean} opt_numberLines True to number lines,
- *     or the 1-indexed number of the first line in sourceCodeHtml.
- * @return {string} code as html, but prettier
- */
-var prettyPrintOne;
-/**
- * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
- * {@code class=prettyprint} and prettify them.
- *
- * @param {Function} opt_whenDone called when prettifying is done.
- * @param {HTMLElement|HTMLDocument} opt_root an element or document
- *   containing all the elements to pretty print.
- *   Defaults to {@code document.body}.
- */
-var prettyPrint;
-
-
-(function () {
-  var win = window;
-  // Keyword lists for various languages.
-  // We use things that coerce to strings to make them compact when minified
-  // and to defeat aggressive optimizers that fold large string constants.
-  var FLOW_CONTROL_KEYWORDS = ["break,continue,do,else,for,if,return,while"];
-  var C_KEYWORDS = [FLOW_CONTROL_KEYWORDS,"auto,case,char,const,default," + 
-      "double,enum,extern,float,goto,inline,int,long,register,short,signed," +
-      "sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"];
-  var COMMON_KEYWORDS = [C_KEYWORDS,"catch,class,delete,false,import," +
-      "new,operator,private,protected,public,this,throw,true,try,typeof"];
-  var CPP_KEYWORDS = [COMMON_KEYWORDS,"alignof,align_union,asm,axiom,bool," +
-      "concept,concept_map,const_cast,constexpr,decltype,delegate," +
-      "dynamic_cast,explicit,export,friend,generic,late_check," +
-      "mutable,namespace,nullptr,property,reinterpret_cast,static_assert," +
-      "static_cast,template,typeid,typename,using,virtual,where"];
-  var JAVA_KEYWORDS = [COMMON_KEYWORDS,
-      "abstract,assert,boolean,byte,extends,final,finally,implements,import," +
-      "instanceof,interface,null,native,package,strictfp,super,synchronized," +
-      "throws,transient"];
-  var CSHARP_KEYWORDS = [JAVA_KEYWORDS,
-      "as,base,by,checked,decimal,delegate,descending,dynamic,event," +
-      "fixed,foreach,from,group,implicit,in,internal,into,is,let," +
-      "lock,object,out,override,orderby,params,partial,readonly,ref,sbyte," +
-      "sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort," +
-      "var,virtual,where"];
-  var COFFEE_KEYWORDS = "all,and,by,catch,class,else,extends,false,finally," +
-      "for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then," +
-      "throw,true,try,unless,until,when,while,yes";
-  var JSCRIPT_KEYWORDS = [COMMON_KEYWORDS,
-      "debugger,eval,export,function,get,null,set,undefined,var,with," +
-      "Infinity,NaN"];
-  var PERL_KEYWORDS = "caller,delete,die,do,dump,elsif,eval,exit,foreach,for," +
-      "goto,if,import,last,local,my,next,no,our,print,package,redo,require," +
-      "sub,undef,unless,until,use,wantarray,while,BEGIN,END";
-  var PYTHON_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "and,as,assert,class,def,del," +
-      "elif,except,exec,finally,from,global,import,in,is,lambda," +
-      "nonlocal,not,or,pass,print,raise,try,with,yield," +
-      "False,True,None"];
-  var RUBY_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "alias,and,begin,case,class," +
-      "def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo," +
-      "rescue,retry,self,super,then,true,undef,unless,until,when,yield," +
-      "BEGIN,END"];
-   var RUST_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "as,assert,const,copy,drop," +
-      "enum,extern,fail,false,fn,impl,let,log,loop,match,mod,move,mut,priv," +
-      "pub,pure,ref,self,static,struct,true,trait,type,unsafe,use"];
-  var SH_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "case,done,elif,esac,eval,fi," +
-      "function,in,local,set,then,until"];
-  var ALL_KEYWORDS = [
-      CPP_KEYWORDS, CSHARP_KEYWORDS, JSCRIPT_KEYWORDS, PERL_KEYWORDS,
-      PYTHON_KEYWORDS, RUBY_KEYWORDS, SH_KEYWORDS];
-  var C_TYPES = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)\b/;
-
-  // token style names.  correspond to css classes
-  /**
-   * token style for a string literal
-   * @const
-   */
-  var PR_STRING = 'str';
-  /**
-   * token style for a keyword
-   * @const
-   */
-  var PR_KEYWORD = 'kwd';
-  /**
-   * token style for a comment
-   * @const
-   */
-  var PR_COMMENT = 'com';
-  /**
-   * token style for a type
-   * @const
-   */
-  var PR_TYPE = 'typ';
-  /**
-   * token style for a literal value.  e.g. 1, null, true.
-   * @const
-   */
-  var PR_LITERAL = 'lit';
-  /**
-   * token style for a punctuation string.
-   * @const
-   */
-  var PR_PUNCTUATION = 'pun';
-  /**
-   * token style for plain text.
-   * @const
-   */
-  var PR_PLAIN = 'pln';
-
-  /**
-   * token style for an sgml tag.
-   * @const
-   */
-  var PR_TAG = 'tag';
-  /**
-   * token style for a markup declaration such as a DOCTYPE.
-   * @const
-   */
-  var PR_DECLARATION = 'dec';
-  /**
-   * token style for embedded source.
-   * @const
-   */
-  var PR_SOURCE = 'src';
-  /**
-   * token style for an sgml attribute name.
-   * @const
-   */
-  var PR_ATTRIB_NAME = 'atn';
-  /**
-   * token style for an sgml attribute value.
-   * @const
-   */
-  var PR_ATTRIB_VALUE = 'atv';
-
-  /**
-   * A class that indicates a section of markup that is not code, e.g. to allow
-   * embedding of line numbers within code listings.
-   * @const
-   */
-  var PR_NOCODE = 'nocode';
-
-  
+    var PR_DECLARATION = 'dec';
+    /**
+     * token style for embedded source.
+     * @const
+     */
+    var PR_SOURCE = 'src';
+    /**
+     * token style for an sgml attribute name.
+     * @const
+     */
+    var PR_ATTRIB_NAME = 'atn';
+    /**
+     * token style for an sgml attribute value.
+     * @const
+     */
+    var PR_ATTRIB_VALUE = 'atv';
   
-  /**
-   * A set of tokens that can precede a regular expression literal in
-   * javascript
-   * http://web.archive.org/web/20070717142515/http://www.mozilla.org/js/language/js20/rationale/syntax.html
-   * has the full list, but I've removed ones that might be problematic when
-   * seen in languages that don't support regular expression literals.
-   *
-   * <p>Specifically, I've removed any keywords that can't precede a regexp
-   * literal in a syntactically legal javascript program, and I've removed the
-   * "in" keyword since it's not a keyword in many languages, and might be used
-   * as a count of inches.
-   *
-   * <p>The link above does not accurately describe EcmaScript rules since
-   * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
-   * very well in practice.
-   *
-   * @private
-   * @const
-   */
-  var REGEXP_PRECEDER_PATTERN = '(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<<?=?|>>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*';
-  
-  // CAVEAT: this does not properly handle the case where a regular
-  // expression immediately follows another since a regular expression may
-  // have flags for case-sensitivity and the like.  Having regexp tokens
-  // adjacent is not valid in any language I'm aware of, so I'm punting.
-  // TODO: maybe style special characters inside a regexp as punctuation.
-
-  /**
-   * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
-   * matches the union of the sets of strings matched by the input RegExp.
-   * Since it matches globally, if the input strings have a start-of-input
-   * anchor (/^.../), it is ignored for the purposes of unioning.
-   * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
-   * @return {RegExp} a global regex.
-   */
-  function combinePrefixPatterns(regexs) {
-    var capturedGroupIndex = 0;
-  
-    var needToFoldCase = false;
-    var ignoreCase = false;
-    for (var i = 0, n = regexs.length; i < n; ++i) {
-      var regex = regexs[i];
-      if (regex.ignoreCase) {
-        ignoreCase = true;
-      } else if (/[a-z]/i.test(regex.source.replace(
-                     /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
-        needToFoldCase = true;
-        ignoreCase = false;
-        break;
-      }
-    }
+    /**
+     * A class that indicates a section of markup that is not code, e.g. to allow
+     * embedding of line numbers within code listings.
+     * @const
+     */
+    var PR_NOCODE = 'nocode';
   
-    var escapeCharToCodeUnit = {
-      'b': 8,
-      't': 9,
-      'n': 0xa,
-      'v': 0xb,
-      'f': 0xc,
-      'r': 0xd
-    };
+    
+    
+    /**
+     * A set of tokens that can precede a regular expression literal in
+     * javascript
+     * http://web.archive.org/web/20070717142515/http://www.mozilla.org/js/language/js20/rationale/syntax.html
+     * has the full list, but I've removed ones that might be problematic when
+     * seen in languages that don't support regular expression literals.
+     *
+     * <p>Specifically, I've removed any keywords that can't precede a regexp
+     * literal in a syntactically legal javascript program, and I've removed the
+     * "in" keyword since it's not a keyword in many languages, and might be used
+     * as a count of inches.
+     *
+     * <p>The link above does not accurately describe EcmaScript rules since
+     * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
+     * very well in practice.
+     *
+     * @private
+     * @const
+     */
+    var REGEXP_PRECEDER_PATTERN = '(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<<?=?|>>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*';
+    
+    // CAVEAT: this does not properly handle the case where a regular
+    // expression immediately follows another since a regular expression may
+    // have flags for case-sensitivity and the like.  Having regexp tokens
+    // adjacent is not valid in any language I'm aware of, so I'm punting.
+    // TODO: maybe style special characters inside a regexp as punctuation.
   
-    function decodeEscape(charsetPart) {
-      var cc0 = charsetPart.charCodeAt(0);
-      if (cc0 !== 92 /* \\ */) {
-        return cc0;
+    /**
+     * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
+     * matches the union of the sets of strings matched by the input RegExp.
+     * Since it matches globally, if the input strings have a start-of-input
+     * anchor (/^.../), it is ignored for the purposes of unioning.
+     * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
+     * @return {RegExp} a global regex.
+     */
+    function combinePrefixPatterns(regexs) {
+      var capturedGroupIndex = 0;
+    
+      var needToFoldCase = false;
+      var ignoreCase = false;
+      for (var i = 0, n = regexs.length; i < n; ++i) {
+        var regex = regexs[i];
+        if (regex.ignoreCase) {
+          ignoreCase = true;
+        } else if (/[a-z]/i.test(regex.source.replace(
+                       /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
+          needToFoldCase = true;
+          ignoreCase = false;
+          break;
+        }
       }
-      var c1 = charsetPart.charAt(1);
-      cc0 = escapeCharToCodeUnit[c1];
-      if (cc0) {
-        return cc0;
-      } else if ('0' <= c1 && c1 <= '7') {
-        return parseInt(charsetPart.substring(1), 8);
-      } else if (c1 === 'u' || c1 === 'x') {
-        return parseInt(charsetPart.substring(2), 16);
-      } else {
-        return charsetPart.charCodeAt(1);
+    
+      var escapeCharToCodeUnit = {
+        'b': 8,
+        't': 9,
+        'n': 0xa,
+        'v': 0xb,
+        'f': 0xc,
+        'r': 0xd
+      };
+    
+      function decodeEscape(charsetPart) {
+        var cc0 = charsetPart.charCodeAt(0);
+        if (cc0 !== 92 /* \\ */) {
+          return cc0;
+        }
+        var c1 = charsetPart.charAt(1);
+        cc0 = escapeCharToCodeUnit[c1];
+        if (cc0) {
+          return cc0;
+        } else if ('0' <= c1 && c1 <= '7') {
+          return parseInt(charsetPart.substring(1), 8);
+        } else if (c1 === 'u' || c1 === 'x') {
+          return parseInt(charsetPart.substring(2), 16);
+        } else {
+          return charsetPart.charCodeAt(1);
+        }
       }
-    }
-  
-    function encodeEscape(charCode) {
-      if (charCode < 0x20) {
-        return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
+    
+      function encodeEscape(charCode) {
+        if (charCode < 0x20) {
+          return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
+        }
+        var ch = String.fromCharCode(charCode);
+        return (ch === '\\' || ch === '-' || ch === ']' || ch === '^')
+            ? "\\" + ch : ch;
       }
-      var ch = String.fromCharCode(charCode);
-      return (ch === '\\' || ch === '-' || ch === ']' || ch === '^')
-          ? "\\" + ch : ch;
-    }
-  
-    function caseFoldCharset(charSet) {
-      var charsetParts = charSet.substring(1, charSet.length - 1).match(
-          new RegExp(
-              '\\\\u[0-9A-Fa-f]{4}'
-              + '|\\\\x[0-9A-Fa-f]{2}'
-              + '|\\\\[0-3][0-7]{0,2}'
-              + '|\\\\[0-7]{1,2}'
-              + '|\\\\[\\s\\S]'
-              + '|-'
-              + '|[^-\\\\]',
-              'g'));
-      var ranges = [];
-      var inverse = charsetParts[0] === '^';
-  
-      var out = ['['];
-      if (inverse) { out.push('^'); }
-  
-      for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
-        var p = charsetParts[i];
-        if (/\\[bdsw]/i.test(p)) {  // Don't muck with named groups.
-          out.push(p);
-        } else {
-          var start = decodeEscape(p);
-          var end;
-          if (i + 2 < n && '-' === charsetParts[i + 1]) {
-            end = decodeEscape(charsetParts[i + 2]);
-            i += 2;
+    
+      function caseFoldCharset(charSet) {
+        var charsetParts = charSet.substring(1, charSet.length - 1).match(
+            new RegExp(
+                '\\\\u[0-9A-Fa-f]{4}'
+                + '|\\\\x[0-9A-Fa-f]{2}'
+                + '|\\\\[0-3][0-7]{0,2}'
+                + '|\\\\[0-7]{1,2}'
+                + '|\\\\[\\s\\S]'
+                + '|-'
+                + '|[^-\\\\]',
+                'g'));
+        var ranges = [];
+        var inverse = charsetParts[0] === '^';
+    
+        var out = ['['];
+        if (inverse) { out.push('^'); }
+    
+        for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
+          var p = charsetParts[i];
+          if (/\\[bdsw]/i.test(p)) {  // Don't muck with named groups.
+            out.push(p);
           } else {
-            end = start;
-          }
-          ranges.push([start, end]);
-          // If the range might intersect letters, then expand it.
-          // This case handling is too simplistic.
-          // It does not deal with non-latin case folding.
-          // It works for latin source code identifiers though.
-          if (!(end < 65 || start > 122)) {
-            if (!(end < 65 || start > 90)) {
-              ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
+            var start = decodeEscape(p);
+            var end;
+            if (i + 2 < n && '-' === charsetParts[i + 1]) {
+              end = decodeEscape(charsetParts[i + 2]);
+              i += 2;
+            } else {
+              end = start;
             }
-            if (!(end < 97 || start > 122)) {
-              ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
+            ranges.push([start, end]);
+            // If the range might intersect letters, then expand it.
+            // This case handling is too simplistic.
+            // It does not deal with non-latin case folding.
+            // It works for latin source code identifiers though.
+            if (!(end < 65 || start > 122)) {
+              if (!(end < 65 || start > 90)) {
+                ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
+              }
+              if (!(end < 97 || start > 122)) {
+                ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
+              }
             }
           }
         }
-      }
-  
-      // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
-      // -> [[1, 12], [14, 14], [16, 17]]
-      ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1]  - a[1]); });
-      var consolidatedRanges = [];
-      var lastRange = [];
-      for (var i = 0; i < ranges.length; ++i) {
-        var range = ranges[i];
-        if (range[0] <= lastRange[1] + 1) {
-          lastRange[1] = Math.max(lastRange[1], range[1]);
-        } else {
-          consolidatedRanges.push(lastRange = range);
+    
+        // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
+        // -> [[1, 12], [14, 14], [16, 17]]
+        ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1]  - a[1]); });
+        var consolidatedRanges = [];
+        var lastRange = [];
+        for (var i = 0; i < ranges.length; ++i) {
+          var range = ranges[i];
+          if (range[0] <= lastRange[1] + 1) {
+            lastRange[1] = Math.max(lastRange[1], range[1]);
+          } else {
+            consolidatedRanges.push(lastRange = range);
+          }
         }
-      }
-  
-      for (var i = 0; i < consolidatedRanges.length; ++i) {
-        var range = consolidatedRanges[i];
-        out.push(encodeEscape(range[0]));
-        if (range[1] > range[0]) {
-          if (range[1] + 1 > range[0]) { out.push('-'); }
-          out.push(encodeEscape(range[1]));
+    
+        for (var i = 0; i < consolidatedRanges.length; ++i) {
+          var range = consolidatedRanges[i];
+          out.push(encodeEscape(range[0]));
+          if (range[1] > range[0]) {
+            if (range[1] + 1 > range[0]) { out.push('-'); }
+            out.push(encodeEscape(range[1]));
+          }
         }
+        out.push(']');
+        return out.join('');
       }
-      out.push(']');
-      return out.join('');
-    }
-  
-    function allowAnywhereFoldCaseAndRenumberGroups(regex) {
-      // Split into character sets, escape sequences, punctuation strings
-      // like ('(', '(?:', ')', '^'), and runs of characters that do not
-      // include any of the above.
-      var parts = regex.source.match(
-          new RegExp(
-              '(?:'
-              + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]'  // a character set
-              + '|\\\\u[A-Fa-f0-9]{4}'  // a unicode escape
-              + '|\\\\x[A-Fa-f0-9]{2}'  // a hex escape
-              + '|\\\\[0-9]+'  // a back-reference or octal escape
-              + '|\\\\[^ux0-9]'  // other escape sequence
-              + '|\\(\\?[:!=]'  // start of a non-capturing group
-              + '|[\\(\\)\\^]'  // start/end of a group, or line start
-              + '|[^\\x5B\\x5C\\(\\)\\^]+'  // run of other characters
-              + ')',
-              'g'));
-      var n = parts.length;
-  
-      // Maps captured group numbers to the number they will occupy in
-      // the output or to -1 if that has not been determined, or to
-      // undefined if they need not be capturing in the output.
-      var capturedGroups = [];
-  
-      // Walk over and identify back references to build the capturedGroups
-      // mapping.
-      for (var i = 0, groupIndex = 0; i < n; ++i) {
-        var p = parts[i];
-        if (p === '(') {
-          // groups are 1-indexed, so max group index is count of '('
-          ++groupIndex;
-        } else if ('\\' === p.charAt(0)) {
-          var decimalValue = +p.substring(1);
-          if (decimalValue) {
-            if (decimalValue <= groupIndex) {
-              capturedGroups[decimalValue] = -1;
-            } else {
-              // Replace with an unambiguous escape sequence so that
-              // an octal escape sequence does not turn into a backreference
-              // to a capturing group from an earlier regex.
-              parts[i] = encodeEscape(decimalValue);
+    
+      function allowAnywhereFoldCaseAndRenumberGroups(regex) {
+        // Split into character sets, escape sequences, punctuation strings
+        // like ('(', '(?:', ')', '^'), and runs of characters that do not
+        // include any of the above.
+        var parts = regex.source.match(
+            new RegExp(
+                '(?:'
+                + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]'  // a character set
+                + '|\\\\u[A-Fa-f0-9]{4}'  // a unicode escape
+                + '|\\\\x[A-Fa-f0-9]{2}'  // a hex escape
+                + '|\\\\[0-9]+'  // a back-reference or octal escape
+                + '|\\\\[^ux0-9]'  // other escape sequence
+                + '|\\(\\?[:!=]'  // start of a non-capturing group
+                + '|[\\(\\)\\^]'  // start/end of a group, or line start
+                + '|[^\\x5B\\x5C\\(\\)\\^]+'  // run of other characters
+                + ')',
+                'g'));
+        var n = parts.length;
+    
+        // Maps captured group numbers to the number they will occupy in
+        // the output or to -1 if that has not been determined, or to
+        // undefined if they need not be capturing in the output.
+        var capturedGroups = [];
+    
+        // Walk over and identify back references to build the capturedGroups
+        // mapping.
+        for (var i = 0, groupIndex = 0; i < n; ++i) {
+          var p = parts[i];
+          if (p === '(') {
+            // groups are 1-indexed, so max group index is count of '('
+            ++groupIndex;
+          } else if ('\\' === p.charAt(0)) {
+            var decimalValue = +p.substring(1);
+            if (decimalValue) {
+              if (decimalValue <= groupIndex) {
+                capturedGroups[decimalValue] = -1;
+              } else {
+                // Replace with an unambiguous escape sequence so that
+                // an octal escape sequence does not turn into a backreference
+                // to a capturing group from an earlier regex.
+                parts[i] = encodeEscape(decimalValue);
+              }
             }
           }
         }
-      }
-  
-      // Renumber groups and reduce capturing groups to non-capturing groups
-      // where possible.
-      for (var i = 1; i < capturedGroups.length; ++i) {
-        if (-1 === capturedGroups[i]) {
-          capturedGroups[i] = ++capturedGroupIndex;
+    
+        // Renumber groups and reduce capturing groups to non-capturing groups
+        // where possible.
+        for (var i = 1; i < capturedGroups.length; ++i) {
+          if (-1 === capturedGroups[i]) {
+            capturedGroups[i] = ++capturedGroupIndex;
+          }
         }
-      }
-      for (var i = 0, groupIndex = 0; i < n; ++i) {
-        var p = parts[i];
-        if (p === '(') {
-          ++groupIndex;
-          if (!capturedGroups[groupIndex]) {
-            parts[i] = '(?:';
+        for (var i = 0, groupIndex = 0; i < n; ++i) {
+          var p = parts[i];
+          if (p === '(') {
+            ++groupIndex;
+            if (!capturedGroups[groupIndex]) {
+              parts[i] = '(?:';
+            }
+          } else if ('\\' === p.charAt(0)) {
+            var decimalValue = +p.substring(1);
+            if (decimalValue && decimalValue <= groupIndex) {
+              parts[i] = '\\' + capturedGroups[decimalValue];
+            }
           }
-        } else if ('\\' === p.charAt(0)) {
-          var decimalValue = +p.substring(1);
-          if (decimalValue && decimalValue <= groupIndex) {
-            parts[i] = '\\' + capturedGroups[decimalValue];
+        }
+    
+        // Remove any prefix anchors so that the output will match anywhere.
+        // ^^ really does mean an anchored match though.
+        for (var i = 0; i < n; ++i) {
+          if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
+        }
+    
+        // Expand letters to groups to handle mixing of case-sensitive and
+        // case-insensitive patterns if necessary.
+        if (regex.ignoreCase && needToFoldCase) {
+          for (var i = 0; i < n; ++i) {
+            var p = parts[i];
+            var ch0 = p.charAt(0);
+            if (p.length >= 2 && ch0 === '[') {
+              parts[i] = caseFoldCharset(p);
+            } else if (ch0 !== '\\') {
+              // TODO: handle letters in numeric escapes.
+              parts[i] = p.replace(
+                  /[a-zA-Z]/g,
+                  function (ch) {
+                    var cc = ch.charCodeAt(0);
+                    return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
+                  });
+            }
           }
         }
+    
+        return parts.join('');
       }
-  
-      // Remove any prefix anchors so that the output will match anywhere.
-      // ^^ really does mean an anchored match though.
-      for (var i = 0; i < n; ++i) {
-        if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
+    
+      var rewritten = [];
+      for (var i = 0, n = regexs.length; i < n; ++i) {
+        var regex = regexs[i];
+        if (regex.global || regex.multiline) { throw new Error('' + regex); }
+        rewritten.push(
+            '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
       }
+    
+      return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
+    }
   
-      // Expand letters to groups to handle mixing of case-sensitive and
-      // case-insensitive patterns if necessary.
-      if (regex.ignoreCase && needToFoldCase) {
-        for (var i = 0; i < n; ++i) {
-          var p = parts[i];
-          var ch0 = p.charAt(0);
-          if (p.length >= 2 && ch0 === '[') {
-            parts[i] = caseFoldCharset(p);
-          } else if (ch0 !== '\\') {
-            // TODO: handle letters in numeric escapes.
-            parts[i] = p.replace(
-                /[a-zA-Z]/g,
-                function (ch) {
-                  var cc = ch.charCodeAt(0);
-                  return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
-                });
+    /**
+     * Split markup into a string of source code and an array mapping ranges in
+     * that string to the text nodes in which they appear.
+     *
+     * <p>
+     * The HTML DOM structure:</p>
+     * <pre>
+     * (Element   "p"
+     *   (Element "b"
+     *     (Text  "print "))       ; #1
+     *   (Text    "'Hello '")      ; #2
+     *   (Element "br")            ; #3
+     *   (Text    "  + 'World';")) ; #4
+     * </pre>
+     * <p>
+     * corresponds to the HTML
+     * {@code <p><b>print </b>'Hello '<br>  + 'World';</p>}.</p>
+     *
+     * <p>
+     * It will produce the output:</p>
+     * <pre>
+     * {
+     *   sourceCode: "print 'Hello '\n  + 'World';",
+     *   //                     1          2
+     *   //           012345678901234 5678901234567
+     *   spans: [0, #1, 6, #2, 14, #3, 15, #4]
+     * }
+     * </pre>
+     * <p>
+     * where #1 is a reference to the {@code "print "} text node above, and so
+     * on for the other text nodes.
+     * </p>
+     *
+     * <p>
+     * The {@code} spans array is an array of pairs.  Even elements are the start
+     * indices of substrings, and odd elements are the text nodes (or BR elements)
+     * that contain the text for those substrings.
+     * Substrings continue until the next index or the end of the source.
+     * </p>
+     *
+     * @param {Node} node an HTML DOM subtree containing source-code.
+     * @param {boolean} isPreformatted true if white-space in text nodes should
+     *    be considered significant.
+     * @return {Object} source code and the text nodes in which they occur.
+     */
+    function extractSourceSpans(node, isPreformatted) {
+      var nocode = /(?:^|\s)nocode(?:\s|$)/;
+    
+      var chunks = [];
+      var length = 0;
+      var spans = [];
+      var k = 0;
+    
+      function walk(node) {
+        var type = node.nodeType;
+        if (type == 1) {  // Element
+          if (nocode.test(node.className)) { return; }
+          for (var child = node.firstChild; child; child = child.nextSibling) {
+            walk(child);
+          }
+          var nodeName = node.nodeName.toLowerCase();
+          if ('br' === nodeName || 'li' === nodeName) {
+            chunks[k] = '\n';
+            spans[k << 1] = length++;
+            spans[(k++ << 1) | 1] = node;
+          }
+        } else if (type == 3 || type == 4) {  // Text
+          var text = node.nodeValue;
+          if (text.length) {
+            if (!isPreformatted) {
+              text = text.replace(/[ \t\r\n]+/g, ' ');
+            } else {
+              text = text.replace(/\r\n?/g, '\n');  // Normalize newlines.
+            }
+            // TODO: handle tabs here?
+            chunks[k] = text;
+            spans[k << 1] = length;
+            length += text.length;
+            spans[(k++ << 1) | 1] = node;
           }
         }
       }
-  
-      return parts.join('');
+    
+      walk(node);
+    
+      return {
+        sourceCode: chunks.join('').replace(/\n$/, ''),
+        spans: spans
+      };
     }
   
-    var rewritten = [];
-    for (var i = 0, n = regexs.length; i < n; ++i) {
-      var regex = regexs[i];
-      if (regex.global || regex.multiline) { throw new Error('' + regex); }
-      rewritten.push(
-          '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
+    /**
+     * Apply the given language handler to sourceCode and add the resulting
+     * decorations to out.
+     * @param {number} basePos the index of sourceCode within the chunk of source
+     *    whose decorations are already present on out.
+     */
+    function appendDecorations(basePos, sourceCode, langHandler, out) {
+      if (!sourceCode) { return; }
+      var job = {
+        sourceCode: sourceCode,
+        basePos: basePos
+      };
+      langHandler(job);
+      out.push.apply(out, job.decorations);
     }
   
-    return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
-  }
-
-  /**
-   * Split markup into a string of source code and an array mapping ranges in
-   * that string to the text nodes in which they appear.
-   *
-   * <p>
-   * The HTML DOM structure:</p>
-   * <pre>
-   * (Element   "p"
-   *   (Element "b"
-   *     (Text  "print "))       ; #1
-   *   (Text    "'Hello '")      ; #2
-   *   (Element "br")            ; #3
-   *   (Text    "  + 'World';")) ; #4
-   * </pre>
-   * <p>
-   * corresponds to the HTML
-   * {@code <p><b>print </b>'Hello '<br>  + 'World';</p>}.</p>
-   *
-   * <p>
-   * It will produce the output:</p>
-   * <pre>
-   * {
-   *   sourceCode: "print 'Hello '\n  + 'World';",
-   *   //                     1          2
-   *   //           012345678901234 5678901234567
-   *   spans: [0, #1, 6, #2, 14, #3, 15, #4]
-   * }
-   * </pre>
-   * <p>
-   * where #1 is a reference to the {@code "print "} text node above, and so
-   * on for the other text nodes.
-   * </p>
-   *
-   * <p>
-   * The {@code} spans array is an array of pairs.  Even elements are the start
-   * indices of substrings, and odd elements are the text nodes (or BR elements)
-   * that contain the text for those substrings.
-   * Substrings continue until the next index or the end of the source.
-   * </p>
-   *
-   * @param {Node} node an HTML DOM subtree containing source-code.
-   * @param {boolean} isPreformatted true if white-space in text nodes should
-   *    be considered significant.
-   * @return {Object} source code and the text nodes in which they occur.
-   */
-  function extractSourceSpans(node, isPreformatted) {
-    var nocode = /(?:^|\s)nocode(?:\s|$)/;
-  
-    var chunks = [];
-    var length = 0;
-    var spans = [];
-    var k = 0;
-  
-    function walk(node) {
-      var type = node.nodeType;
-      if (type == 1) {  // Element
-        if (nocode.test(node.className)) { return; }
-        for (var child = node.firstChild; child; child = child.nextSibling) {
-          walk(child);
-        }
-        var nodeName = node.nodeName.toLowerCase();
-        if ('br' === nodeName || 'li' === nodeName) {
-          chunks[k] = '\n';
-          spans[k << 1] = length++;
-          spans[(k++ << 1) | 1] = node;
-        }
-      } else if (type == 3 || type == 4) {  // Text
-        var text = node.nodeValue;
-        if (text.length) {
-          if (!isPreformatted) {
-            text = text.replace(/[ \t\r\n]+/g, ' ');
-          } else {
-            text = text.replace(/\r\n?/g, '\n');  // Normalize newlines.
-          }
-          // TODO: handle tabs here?
-          chunks[k] = text;
-          spans[k << 1] = length;
-          length += text.length;
-          spans[(k++ << 1) | 1] = node;
-        }
+    var notWs = /\S/;
+  
+    /**
+     * Given an element, if it contains only one child element and any text nodes
+     * it contains contain only space characters, return the sole child element.
+     * Otherwise returns undefined.
+     * <p>
+     * This is meant to return the CODE element in {@code <pre><code ...>} when
+     * there is a single child element that contains all the non-space textual
+     * content, but not to return anything where there are multiple child elements
+     * as in {@code <pre><code>...</code><code>...</code></pre>} or when there
+     * is textual content.
+     */
+    function childContentWrapper(element) {
+      var wrapper = undefined;
+      for (var c = element.firstChild; c; c = c.nextSibling) {
+        var type = c.nodeType;
+        wrapper = (type === 1)  // Element Node
+            ? (wrapper ? element : c)
+            : (type === 3)  // Text Node
+            ? (notWs.test(c.nodeValue) ? element : wrapper)
+            : wrapper;
       }
+      return wrapper === element ? undefined : wrapper;
     }
   
-    walk(node);
-  
-    return {
-      sourceCode: chunks.join('').replace(/\n$/, ''),
-      spans: spans
-    };
-  }
-
-  /**
-   * Apply the given language handler to sourceCode and add the resulting
-   * decorations to out.
-   * @param {number} basePos the index of sourceCode within the chunk of source
-   *    whose decorations are already present on out.
-   */
-  function appendDecorations(basePos, sourceCode, langHandler, out) {
-    if (!sourceCode) { return; }
-    var job = {
-      sourceCode: sourceCode,
-      basePos: basePos
-    };
-    langHandler(job);
-    out.push.apply(out, job.decorations);
-  }
-
-  var notWs = /\S/;
-
-  /**
-   * Given an element, if it contains only one child element and any text nodes
-   * it contains contain only space characters, return the sole child element.
-   * Otherwise returns undefined.
-   * <p>
-   * This is meant to return the CODE element in {@code <pre><code ...>} when
-   * there is a single child element that contains all the non-space textual
-   * content, but not to return anything where there are multiple child elements
-   * as in {@code <pre><code>...</code><code>...</code></pre>} or when there
-   * is textual content.
-   */
-  function childContentWrapper(element) {
-    var wrapper = undefined;
-    for (var c = element.firstChild; c; c = c.nextSibling) {
-      var type = c.nodeType;
-      wrapper = (type === 1)  // Element Node
-          ? (wrapper ? element : c)
-          : (type === 3)  // Text Node
-          ? (notWs.test(c.nodeValue) ? element : wrapper)
-          : wrapper;
-    }
-    return wrapper === element ? undefined : wrapper;
-  }
-
-  /** Given triples of [style, pattern, context] returns a lexing function,
-    * The lexing function interprets the patterns to find token boundaries and
-    * returns a decoration list of the form
-    * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
-    * where index_n is an index into the sourceCode, and style_n is a style
-    * constant like PR_PLAIN.  index_n-1 <= index_n, and style_n-1 applies to
-    * all characters in sourceCode[index_n-1:index_n].
-    *
-    * The stylePatterns is a list whose elements have the form
-    * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
-    *
-    * Style is a style constant like PR_PLAIN, or can be a string of the
-    * form 'lang-FOO', where FOO is a language extension describing the
-    * language of the portion of the token in $1 after pattern executes.
-    * E.g., if style is 'lang-lisp', and group 1 contains the text
-    * '(hello (world))', then that portion of the token will be passed to the
-    * registered lisp handler for formatting.
-    * The text before and after group 1 will be restyled using this decorator
-    * so decorators should take care that this doesn't result in infinite
-    * recursion.  For example, the HTML lexer rule for SCRIPT elements looks
-    * something like ['lang-js', /<[s]cript>(.+?)<\/script>/].  This may match
-    * '<script>foo()<\/script>', which would cause the current decorator to
-    * be called with '<script>' which would not match the same rule since
-    * group 1 must not be empty, so it would be instead styled as PR_TAG by
-    * the generic tag rule.  The handler registered for the 'js' extension would
-    * then be called with 'foo()', and finally, the current decorator would
-    * be called with '<\/script>' which would not match the original rule and
-    * so the generic tag rule would identify it as a tag.
-    *
-    * Pattern must only match prefixes, and if it matches a prefix, then that
-    * match is considered a token with the same style.
-    *
-    * Context is applied to the last non-whitespace, non-comment token
-    * recognized.
-    *
-    * Shortcut is an optional string of characters, any of which, if the first
-    * character, gurantee that this pattern and only this pattern matches.
-    *
-    * @param {Array} shortcutStylePatterns patterns that always start with
-    *   a known character.  Must have a shortcut string.
-    * @param {Array} fallthroughStylePatterns patterns that will be tried in
-    *   order if the shortcut ones fail.  May have shortcuts.
-    *
-    * @return {function (Object)} a
-    *   function that takes source code and returns a list of decorations.
-    */
-  function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
-    var shortcuts = {};
-    var tokenizer;
-    (function () {
-      var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
-      var allRegexs = [];
-      var regexKeys = {};
-      for (var i = 0, n = allPatterns.length; i < n; ++i) {
-        var patternParts = allPatterns[i];
-        var shortcutChars = patternParts[3];
-        if (shortcutChars) {
-          for (var c = shortcutChars.length; --c >= 0;) {
-            shortcuts[shortcutChars.charAt(c)] = patternParts;
+    /** Given triples of [style, pattern, context] returns a lexing function,
+      * The lexing function interprets the patterns to find token boundaries and
+      * returns a decoration list of the form
+      * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
+      * where index_n is an index into the sourceCode, and style_n is a style
+      * constant like PR_PLAIN.  index_n-1 <= index_n, and style_n-1 applies to
+      * all characters in sourceCode[index_n-1:index_n].
+      *
+      * The stylePatterns is a list whose elements have the form
+      * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
+      *
+      * Style is a style constant like PR_PLAIN, or can be a string of the
+      * form 'lang-FOO', where FOO is a language extension describing the
+      * language of the portion of the token in $1 after pattern executes.
+      * E.g., if style is 'lang-lisp', and group 1 contains the text
+      * '(hello (world))', then that portion of the token will be passed to the
+      * registered lisp handler for formatting.
+      * The text before and after group 1 will be restyled using this decorator
+      * so decorators should take care that this doesn't result in infinite
+      * recursion.  For example, the HTML lexer rule for SCRIPT elements looks
+      * something like ['lang-js', /<[s]cript>(.+?)<\/script>/].  This may match
+      * '<script>foo()<\/script>', which would cause the current decorator to
+      * be called with '<script>' which would not match the same rule since
+      * group 1 must not be empty, so it would be instead styled as PR_TAG by
+      * the generic tag rule.  The handler registered for the 'js' extension would
+      * then be called with 'foo()', and finally, the current decorator would
+      * be called with '<\/script>' which would not match the original rule and
+      * so the generic tag rule would identify it as a tag.
+      *
+      * Pattern must only match prefixes, and if it matches a prefix, then that
+      * match is considered a token with the same style.
+      *
+      * Context is applied to the last non-whitespace, non-comment token
+      * recognized.
+      *
+      * Shortcut is an optional string of characters, any of which, if the first
+      * character, gurantee that this pattern and only this pattern matches.
+      *
+      * @param {Array} shortcutStylePatterns patterns that always start with
+      *   a known character.  Must have a shortcut string.
+      * @param {Array} fallthroughStylePatterns patterns that will be tried in
+      *   order if the shortcut ones fail.  May have shortcuts.
+      *
+      * @return {function (Object)} a
+      *   function that takes source code and returns a list of decorations.
+      */
+    function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
+      var shortcuts = {};
+      var tokenizer;
+      (function () {
+        var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
+        var allRegexs = [];
+        var regexKeys = {};
+        for (var i = 0, n = allPatterns.length; i < n; ++i) {
+          var patternParts = allPatterns[i];
+          var shortcutChars = patternParts[3];
+          if (shortcutChars) {
+            for (var c = shortcutChars.length; --c >= 0;) {
+              shortcuts[shortcutChars.charAt(c)] = patternParts;
+            }
+          }
+          var regex = patternParts[1];
+          var k = '' + regex;
+          if (!regexKeys.hasOwnProperty(k)) {
+            allRegexs.push(regex);
+            regexKeys[k] = null;
           }
         }
-        var regex = patternParts[1];
-        var k = '' + regex;
-        if (!regexKeys.hasOwnProperty(k)) {
-          allRegexs.push(regex);
-          regexKeys[k] = null;
-        }
-      }
-      allRegexs.push(/[\0-\uffff]/);
-      tokenizer = combinePrefixPatterns(allRegexs);
-    })();
-
-    var nPatterns = fallthroughStylePatterns.length;
-
-    /**
-     * Lexes job.sourceCode and produces an output array job.decorations of
-     * style classes preceded by the position at which they start in
-     * job.sourceCode in order.
-     *
-     * @param {Object} job an object like <pre>{
-     *    sourceCode: {string} sourceText plain text,
-     *    basePos: {int} position of job.sourceCode in the larger chunk of
-     *        sourceCode.
-     * }</pre>
-     */
-    var decorate = function (job) {
-      var sourceCode = job.sourceCode, basePos = job.basePos;
-      /** Even entries are positions in source in ascending order.  Odd enties
-        * are style markers (e.g., PR_COMMENT) that run from that position until
-        * the end.
-        * @type {Array.<number|string>}
-        */
-      var decorations = [basePos, PR_PLAIN];
-      var pos = 0;  // index into sourceCode
-      var tokens = sourceCode.match(tokenizer) || [];
-      var styleCache = {};
-
-      for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
-        var token = tokens[ti];
-        var style = styleCache[token];
-        var match = void 0;
-
-        var isEmbedded;
-        if (typeof style === 'string') {
-          isEmbedded = false;
-        } else {
-          var patternParts = shortcuts[token.charAt(0)];
-          if (patternParts) {
-            match = token.match(patternParts[1]);
-            style = patternParts[0];
+        allRegexs.push(/[\0-\uffff]/);
+        tokenizer = combinePrefixPatterns(allRegexs);
+      })();
+  
+      var nPatterns = fallthroughStylePatterns.length;
+  
+      /**
+       * Lexes job.sourceCode and produces an output array job.decorations of
+       * style classes preceded by the position at which they start in
+       * job.sourceCode in order.
+       *
+       * @param {Object} job an object like <pre>{
+       *    sourceCode: {string} sourceText plain text,
+       *    basePos: {int} position of job.sourceCode in the larger chunk of
+       *        sourceCode.
+       * }</pre>
+       */
+      var decorate = function (job) {
+        var sourceCode = job.sourceCode, basePos = job.basePos;
+        /** Even entries are positions in source in ascending order.  Odd enties
+          * are style markers (e.g., PR_COMMENT) that run from that position until
+          * the end.
+          * @type {Array.<number|string>}
+          */
+        var decorations = [basePos, PR_PLAIN];
+        var pos = 0;  // index into sourceCode
+        var tokens = sourceCode.match(tokenizer) || [];
+        var styleCache = {};
+  
+        for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
+          var token = tokens[ti];
+          var style = styleCache[token];
+          var match = void 0;
+  
+          var isEmbedded;
+          if (typeof style === 'string') {
+            isEmbedded = false;
           } else {
-            for (var i = 0; i < nPatterns; ++i) {
-              patternParts = fallthroughStylePatterns[i];
+            var patternParts = shortcuts[token.charAt(0)];
+            if (patternParts) {
               match = token.match(patternParts[1]);
-              if (match) {
-                style = patternParts[0];
-                break;
+              style = patternParts[0];
+            } else {
+              for (var i = 0; i < nPatterns; ++i) {
+                patternParts = fallthroughStylePatterns[i];
+                match = token.match(patternParts[1]);
+                if (match) {
+                  style = patternParts[0];
+                  break;
+                }
+              }
+  
+              if (!match) {  // make sure that we make progress
+                style = PR_PLAIN;
               }
             }
-
-            if (!match) {  // make sure that we make progress
-              style = PR_PLAIN;
+  
+            isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
+            if (isEmbedded && !(match && typeof match[1] === 'string')) {
+              isEmbedded = false;
+              style = PR_SOURCE;
             }
+  
+            if (!isEmbedded) { styleCache[token] = style; }
           }
-
-          isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
-          if (isEmbedded && !(match && typeof match[1] === 'string')) {
-            isEmbedded = false;
-            style = PR_SOURCE;
+  
+          var tokenStart = pos;
+          pos += token.length;
+  
+          if (!isEmbedded) {
+            decorations.push(basePos + tokenStart, style);
+          } else {  // Treat group 1 as an embedded block of source code.
+            var embeddedSource = match[1];
+            var embeddedSourceStart = token.indexOf(embeddedSource);
+            var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
+            if (match[2]) {
+              // If embeddedSource can be blank, then it would match at the
+              // beginning which would cause us to infinitely recurse on the
+              // entire token, so we catch the right context in match[2].
+              embeddedSourceEnd = token.length - match[2].length;
+              embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
+            }
+            var lang = style.substring(5);
+            // Decorate the left of the embedded source
+            appendDecorations(
+                basePos + tokenStart,
+                token.substring(0, embeddedSourceStart),
+                decorate, decorations);
+            // Decorate the embedded source
+            appendDecorations(
+                basePos + tokenStart + embeddedSourceStart,
+                embeddedSource,
+                langHandlerForExtension(lang, embeddedSource),
+                decorations);
+            // Decorate the right of the embedded section
+            appendDecorations(
+                basePos + tokenStart + embeddedSourceEnd,
+                token.substring(embeddedSourceEnd),
+                decorate, decorations);
           }
-
-          if (!isEmbedded) { styleCache[token] = style; }
         }
-
-        var tokenStart = pos;
-        pos += token.length;
-
-        if (!isEmbedded) {
-          decorations.push(basePos + tokenStart, style);
-        } else {  // Treat group 1 as an embedded block of source code.
-          var embeddedSource = match[1];
-          var embeddedSourceStart = token.indexOf(embeddedSource);
-          var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
-          if (match[2]) {
-            // If embeddedSource can be blank, then it would match at the
-            // beginning which would cause us to infinitely recurse on the
-            // entire token, so we catch the right context in match[2].
-            embeddedSourceEnd = token.length - match[2].length;
-            embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
+        job.decorations = decorations;
+      };
+      return decorate;
+    }
+  
+    /** returns a function that produces a list of decorations from source text.
+      *
+      * This code treats ", ', and ` as string delimiters, and \ as a string
+      * escape.  It does not recognize perl's qq() style strings.
+      * It has no special handling for double delimiter escapes as in basic, or
+      * the tripled delimiters used in python, but should work on those regardless
+      * although in those cases a single string literal may be broken up into
+      * multiple adjacent string literals.
+      *
+      * It recognizes C, C++, and shell style comments.
+      *
+      * @param {Object} options a set of optional parameters.
+      * @return {function (Object)} a function that examines the source code
+      *     in the input job and builds the decoration list.
+      */
+    function sourceDecorator(options) {
+      var shortcutStylePatterns = [], fallthroughStylePatterns = [];
+      if (options['tripleQuotedStrings']) {
+        // '''multi-line-string''', 'single-line-string', and double-quoted
+        shortcutStylePatterns.push(
+            [PR_STRING,  /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
+             null, '\'"']);
+      } else if (options['multiLineStrings']) {
+        // 'multi-line-string', "multi-line-string"
+        shortcutStylePatterns.push(
+            [PR_STRING,  /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
+             null, '\'"`']);
+      } else {
+        // 'single-line-string', "single-line-string"
+        shortcutStylePatterns.push(
+            [PR_STRING,
+             /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
+             null, '"\'']);
+      }
+      if (options['verbatimStrings']) {
+        // verbatim-string-literal production from the C# grammar.  See issue 93.
+        fallthroughStylePatterns.push(
+            [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
+      }
+      var hc = options['hashComments'];
+      if (hc) {
+        if (options['cStyleComments']) {
+          if (hc > 1) {  // multiline hash comments
+            shortcutStylePatterns.push(
+                [PR_COMMENT, /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, null, '#']);
+          } else {
+            // Stop C preprocessor declarations at an unclosed open comment
+            shortcutStylePatterns.push(
+                [PR_COMMENT, /^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\r\n]*)/,
+                 null, '#']);
           }
-          var lang = style.substring(5);
-          // Decorate the left of the embedded source
-          appendDecorations(
-              basePos + tokenStart,
-              token.substring(0, embeddedSourceStart),
-              decorate, decorations);
-          // Decorate the embedded source
-          appendDecorations(
-              basePos + tokenStart + embeddedSourceStart,
-              embeddedSource,
-              langHandlerForExtension(lang, embeddedSource),
-              decorations);
-          // Decorate the right of the embedded section
-          appendDecorations(
-              basePos + tokenStart + embeddedSourceEnd,
-              token.substring(embeddedSourceEnd),
-              decorate, decorations);
+          // #include <stdio.h>
+          fallthroughStylePatterns.push(
+              [PR_STRING,
+               /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/,
+               null]);
+        } else {
+          shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
         }
       }
-      job.decorations = decorations;
-    };
-    return decorate;
-  }
-
-  /** returns a function that produces a list of decorations from source text.
-    *
-    * This code treats ", ', and ` as string delimiters, and \ as a string
-    * escape.  It does not recognize perl's qq() style strings.
-    * It has no special handling for double delimiter escapes as in basic, or
-    * the tripled delimiters used in python, but should work on those regardless
-    * although in those cases a single string literal may be broken up into
-    * multiple adjacent string literals.
-    *
-    * It recognizes C, C++, and shell style comments.
-    *
-    * @param {Object} options a set of optional parameters.
-    * @return {function (Object)} a function that examines the source code
-    *     in the input job and builds the decoration list.
-    */
-  function sourceDecorator(options) {
-    var shortcutStylePatterns = [], fallthroughStylePatterns = [];
-    if (options['tripleQuotedStrings']) {
-      // '''multi-line-string''', 'single-line-string', and double-quoted
-      shortcutStylePatterns.push(
-          [PR_STRING,  /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
-           null, '\'"']);
-    } else if (options['multiLineStrings']) {
-      // 'multi-line-string', "multi-line-string"
-      shortcutStylePatterns.push(
-          [PR_STRING,  /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
-           null, '\'"`']);
-    } else {
-      // 'single-line-string', "single-line-string"
-      shortcutStylePatterns.push(
-          [PR_STRING,
-           /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
-           null, '"\'']);
-    }
-    if (options['verbatimStrings']) {
-      // verbatim-string-literal production from the C# grammar.  See issue 93.
-      fallthroughStylePatterns.push(
-          [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
-    }
-    var hc = options['hashComments'];
-    if (hc) {
       if (options['cStyleComments']) {
-        if (hc > 1) {  // multiline hash comments
-          shortcutStylePatterns.push(
-              [PR_COMMENT, /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, null, '#']);
-        } else {
-          // Stop C preprocessor declarations at an unclosed open comment
-          shortcutStylePatterns.push(
-              [PR_COMMENT, /^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\r\n]*)/,
-               null, '#']);
-        }
-        // #include <stdio.h>
+        fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
         fallthroughStylePatterns.push(
-            [PR_STRING,
-             /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/,
+            [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
+      }
+      var regexLiterals = options['regexLiterals'];
+      if (regexLiterals) {
+        /**
+         * @const
+         */
+        var regexExcls = regexLiterals > 1
+          ? ''  // Multiline regex literals
+          : '\n\r';
+        /**
+         * @const
+         */
+        var regexAny = regexExcls ? '.' : '[\\S\\s]';
+        /**
+         * @const
+         */
+        var REGEX_LITERAL = (
+            // A regular expression literal starts with a slash that is
+            // not followed by * or / so that it is not confused with
+            // comments.
+            '/(?=[^/*' + regexExcls + '])'
+            // and then contains any number of raw characters,
+            + '(?:[^/\\x5B\\x5C' + regexExcls + ']'
+            // escape sequences (\x5C),
+            +    '|\\x5C' + regexAny
+            // or non-nesting character sets (\x5B\x5D);
+            +    '|\\x5B(?:[^\\x5C\\x5D' + regexExcls + ']'
+            +             '|\\x5C' + regexAny + ')*(?:\\x5D|$))+'
+            // finally closed by a /.
+            + '/');
+        fallthroughStylePatterns.push(
+            ['lang-regex',
+             RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
+             ]);
+      }
+  
+      var types = options['types'];
+      if (types) {
+        fallthroughStylePatterns.push([PR_TYPE, types]);
+      }
+  
+      var keywords = ("" + options['keywords']).replace(/^ | $/g, '');
+      if (keywords.length) {
+        fallthroughStylePatterns.push(
+            [PR_KEYWORD,
+             new RegExp('^(?:' + keywords.replace(/[\s,]+/g, '|') + ')\\b'),
              null]);
-      } else {
-        shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
       }
-    }
-    if (options['cStyleComments']) {
-      fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
-      fallthroughStylePatterns.push(
-          [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
-    }
-    var regexLiterals = options['regexLiterals'];
-    if (regexLiterals) {
-      /**
-       * @const
-       */
-      var regexExcls = regexLiterals > 1
-        ? ''  // Multiline regex literals
-        : '\n\r';
-      /**
-       * @const
-       */
-      var regexAny = regexExcls ? '.' : '[\\S\\s]';
-      /**
-       * @const
-       */
-      var REGEX_LITERAL = (
-          // A regular expression literal starts with a slash that is
-          // not followed by * or / so that it is not confused with
-          // comments.
-          '/(?=[^/*' + regexExcls + '])'
-          // and then contains any number of raw characters,
-          + '(?:[^/\\x5B\\x5C' + regexExcls + ']'
-          // escape sequences (\x5C),
-          +    '|\\x5C' + regexAny
-          // or non-nesting character sets (\x5B\x5D);
-          +    '|\\x5B(?:[^\\x5C\\x5D' + regexExcls + ']'
-          +             '|\\x5C' + regexAny + ')*(?:\\x5D|$))+'
-          // finally closed by a /.
-          + '/');
-      fallthroughStylePatterns.push(
-          ['lang-regex',
-           RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
-           ]);
-    }
-
-    var types = options['types'];
-    if (types) {
-      fallthroughStylePatterns.push([PR_TYPE, types]);
-    }
-
-    var keywords = ("" + options['keywords']).replace(/^ | $/g, '');
-    if (keywords.length) {
+  
+      shortcutStylePatterns.push([PR_PLAIN,       /^\s+/, null, ' \r\n\t\xA0']);
+  
+      var punctuation =
+        // The Bash man page says
+  
+        // A word is a sequence of characters considered as a single
+        // unit by GRUB. Words are separated by metacharacters,
+        // which are the following plus space, tab, and newline: { }
+        // | & $ ; < >
+        // ...
+        
+        // A word beginning with # causes that word and all remaining
+        // characters on that line to be ignored.
+  
+        // which means that only a '#' after /(?:^|[{}|&$;<>\s])/ starts a
+        // comment but empirically
+        // $ echo {#}
+        // {#}
+        // $ echo \$#
+        // $#
+        // $ echo }#
+        // }#
+  
+        // so /(?:^|[|&;<>\s])/ is more appropriate.
+  
+        // http://gcc.gnu.org/onlinedocs/gcc-2.95.3/cpp_1.html#SEC3
+        // suggests that this definition is compatible with a
+        // default mode that tries to use a single token definition
+        // to recognize both bash/python style comments and C
+        // preprocessor directives.
+  
+        // This definition of punctuation does not include # in the list of
+        // follow-on exclusions, so # will not be broken before if preceeded
+        // by a punctuation character.  We could try to exclude # after
+        // [|&;<>] but that doesn't seem to cause many major problems.
+        // If that does turn out to be a problem, we should change the below
+        // when hc is truthy to include # in the run of punctuation characters
+        // only when not followint [|&;<>].
+        '^.[^\\s\\w.$@\'"`/\\\\]*';
+      if (options['regexLiterals']) {
+        punctuation += '(?!\s*\/)';
+      }
+  
       fallthroughStylePatterns.push(
-          [PR_KEYWORD,
-           new RegExp('^(?:' + keywords.replace(/[\s,]+/g, '|') + ')\\b'),
-           null]);
-    }
-
-    shortcutStylePatterns.push([PR_PLAIN,       /^\s+/, null, ' \r\n\t\xA0']);
-
-    var punctuation =
-      // The Bash man page says
-
-      // A word is a sequence of characters considered as a single
-      // unit by GRUB. Words are separated by metacharacters,
-      // which are the following plus space, tab, and newline: { }
-      // | & $ ; < >
-      // ...
-      
-      // A word beginning with # causes that word and all remaining
-      // characters on that line to be ignored.
-
-      // which means that only a '#' after /(?:^|[{}|&$;<>\s])/ starts a
-      // comment but empirically
-      // $ echo {#}
-      // {#}
-      // $ echo \$#
-      // $#
-      // $ echo }#
-      // }#
-
-      // so /(?:^|[|&;<>\s])/ is more appropriate.
-
-      // http://gcc.gnu.org/onlinedocs/gcc-2.95.3/cpp_1.html#SEC3
-      // suggests that this definition is compatible with a
-      // default mode that tries to use a single token definition
-      // to recognize both bash/python style comments and C
-      // preprocessor directives.
-
-      // This definition of punctuation does not include # in the list of
-      // follow-on exclusions, so # will not be broken before if preceeded
-      // by a punctuation character.  We could try to exclude # after
-      // [|&;<>] but that doesn't seem to cause many major problems.
-      // If that does turn out to be a problem, we should change the below
-      // when hc is truthy to include # in the run of punctuation characters
-      // only when not followint [|&;<>].
-      '^.[^\\s\\w.$@\'"`/\\\\]*';
-    if (options['regexLiterals']) {
-      punctuation += '(?!\s*\/)';
+          // TODO(mikesamuel): recognize non-latin letters and numerals in idents
+          [PR_LITERAL,     /^@[a-z_$][a-z_$@0-9]*/i, null],
+          [PR_TYPE,        /^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/, null],
+          [PR_PLAIN,       /^[a-z_$][a-z_$@0-9]*/i, null],
+          [PR_LITERAL,
+           new RegExp(
+               '^(?:'
+               // A hex number
+               + '0x[a-f0-9]+'
+               // or an octal or decimal number,
+               + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
+               // possibly in scientific notation
+               + '(?:e[+\\-]?\\d+)?'
+               + ')'
+               // with an optional modifier like UL for unsigned long
+               + '[a-z]*', 'i'),
+           null, '0123456789'],
+          // Don't treat escaped quotes in bash as starting strings.
+          // See issue 144.
+          [PR_PLAIN,       /^\\[\s\S]?/, null],
+          [PR_PUNCTUATION, new RegExp(punctuation), null]);
+  
+      return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
     }
-
-    fallthroughStylePatterns.push(
-        // TODO(mikesamuel): recognize non-latin letters and numerals in idents
-        [PR_LITERAL,     /^@[a-z_$][a-z_$@0-9]*/i, null],
-        [PR_TYPE,        /^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/, null],
-        [PR_PLAIN,       /^[a-z_$][a-z_$@0-9]*/i, null],
-        [PR_LITERAL,
-         new RegExp(
-             '^(?:'
-             // A hex number
-             + '0x[a-f0-9]+'
-             // or an octal or decimal number,
-             + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
-             // possibly in scientific notation
-             + '(?:e[+\\-]?\\d+)?'
-             + ')'
-             // with an optional modifier like UL for unsigned long
-             + '[a-z]*', 'i'),
-         null, '0123456789'],
-        // Don't treat escaped quotes in bash as starting strings.
-        // See issue 144.
-        [PR_PLAIN,       /^\\[\s\S]?/, null],
-        [PR_PUNCTUATION, new RegExp(punctuation), null]);
-
-    return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
-  }
-
-  var decorateSource = sourceDecorator({
-        'keywords': ALL_KEYWORDS,
-        'hashComments': true,
-        'cStyleComments': true,
-        'multiLineStrings': true,
-        'regexLiterals': true
-      });
-
-  /**
-   * Given a DOM subtree, wraps it in a list, and puts each line into its own
-   * list item.
-   *
-   * @param {Node} node modified in place.  Its content is pulled into an
-   *     HTMLOListElement, and each line is moved into a separate list item.
-   *     This requires cloning elements, so the input might not have unique
-   *     IDs after numbering.
-   * @param {boolean} isPreformatted true iff white-space in text nodes should
-   *     be treated as significant.
-   */
-  function numberLines(node, opt_startLineNum, isPreformatted) {
-    var nocode = /(?:^|\s)nocode(?:\s|$)/;
-    var lineBreak = /\r\n?|\n/;
   
-    var document = node.ownerDocument;
+    var decorateSource = sourceDecorator({
+          'keywords': ALL_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        });
   
-    var li = document.createElement('li');
-    while (node.firstChild) {
-      li.appendChild(node.firstChild);
-    }
-    // An array of lines.  We split below, so this is initialized to one
-    // un-split line.
-    var listItems = [li];
-  
-    function walk(node) {
-      var type = node.nodeType;
-      if (type == 1 && !nocode.test(node.className)) {  // Element
-        if ('br' === node.nodeName) {
-          breakAfter(node);
-          // Discard the <BR> since it is now flush against a </LI>.
-          if (node.parentNode) {
-            node.parentNode.removeChild(node);
+    /**
+     * Given a DOM subtree, wraps it in a list, and puts each line into its own
+     * list item.
+     *
+     * @param {Node} node modified in place.  Its content is pulled into an
+     *     HTMLOListElement, and each line is moved into a separate list item.
+     *     This requires cloning elements, so the input might not have unique
+     *     IDs after numbering.
+     * @param {boolean} isPreformatted true iff white-space in text nodes should
+     *     be treated as significant.
+     */
+    function numberLines(node, opt_startLineNum, isPreformatted) {
+      var nocode = /(?:^|\s)nocode(?:\s|$)/;
+      var lineBreak = /\r\n?|\n/;
+    
+      var document = node.ownerDocument;
+    
+      var li = document.createElement('li');
+      while (node.firstChild) {
+        li.appendChild(node.firstChild);
+      }
+      // An array of lines.  We split below, so this is initialized to one
+      // un-split line.
+      var listItems = [li];
+    
+      function walk(node) {
+        var type = node.nodeType;
+        if (type == 1 && !nocode.test(node.className)) {  // Element
+          if ('br' === node.nodeName) {
+            breakAfter(node);
+            // Discard the <BR> since it is now flush against a </LI>.
+            if (node.parentNode) {
+              node.parentNode.removeChild(node);
+            }
+          } else {
+            for (var child = node.firstChild; child; child = child.nextSibling) {
+              walk(child);
+            }
           }
-        } else {
-          for (var child = node.firstChild; child; child = child.nextSibling) {
-            walk(child);
+        } else if ((type == 3 || type == 4) && isPreformatted) {  // Text
+          var text = node.nodeValue;
+          var match = text.match(lineBreak);
+          if (match) {
+            var firstLine = text.substring(0, match.index);
+            node.nodeValue = firstLine;
+            var tail = text.substring(match.index + match[0].length);
+            if (tail) {
+              var parent = node.parentNode;
+              parent.insertBefore(
+                document.createTextNode(tail), node.nextSibling);
+            }
+            breakAfter(node);
+            if (!firstLine) {
+              // Don't leave blank text nodes in the DOM.
+              node.parentNode.removeChild(node);
+            }
           }
         }
-      } else if ((type == 3 || type == 4) && isPreformatted) {  // Text
-        var text = node.nodeValue;
-        var match = text.match(lineBreak);
-        if (match) {
-          var firstLine = text.substring(0, match.index);
-          node.nodeValue = firstLine;
-          var tail = text.substring(match.index + match[0].length);
-          if (tail) {
-            var parent = node.parentNode;
-            parent.insertBefore(
-              document.createTextNode(tail), node.nextSibling);
-          }
-          breakAfter(node);
-          if (!firstLine) {
-            // Don't leave blank text nodes in the DOM.
-            node.parentNode.removeChild(node);
+      }
+    
+      // Split a line after the given node.
+      function breakAfter(lineEndNode) {
+        // If there's nothing to the right, then we can skip ending the line
+        // here, and move root-wards since splitting just before an end-tag
+        // would require us to create a bunch of empty copies.
+        while (!lineEndNode.nextSibling) {
+          lineEndNode = lineEndNode.parentNode;
+          if (!lineEndNode) { return; }
+        }
+    
+        function breakLeftOf(limit, copy) {
+          // Clone shallowly if this node needs to be on both sides of the break.
+          var rightSide = copy ? limit.cloneNode(false) : limit;
+          var parent = limit.parentNode;
+          if (parent) {
+            // We clone the parent chain.
+            // This helps us resurrect important styling elements that cross lines.
+            // E.g. in <i>Foo<br>Bar</i>
+            // should be rewritten to <li><i>Foo</i></li><li><i>Bar</i></li>.
+            var parentClone = breakLeftOf(parent, 1);
+            // Move the clone and everything to the right of the original
+            // onto the cloned parent.
+            var next = limit.nextSibling;
+            parentClone.appendChild(rightSide);
+            for (var sibling = next; sibling; sibling = next) {
+              next = sibling.nextSibling;
+              parentClone.appendChild(sibling);
+            }
           }
+          return rightSide;
+        }
+    
+        var copiedListItem = breakLeftOf(lineEndNode.nextSibling, 0);
+    
+        // Walk the parent chain until we reach an unattached LI.
+        for (var parent;
+             // Check nodeType since IE invents document fragments.
+             (parent = copiedListItem.parentNode) && parent.nodeType === 1;) {
+          copiedListItem = parent;
         }
+        // Put it on the list of lines for later processing.
+        listItems.push(copiedListItem);
       }
+    
+      // Split lines while there are lines left to split.
+      for (var i = 0;  // Number of lines that have been split so far.
+           i < listItems.length;  // length updated by breakAfter calls.
+           ++i) {
+        walk(listItems[i]);
+      }
+    
+      // Make sure numeric indices show correctly.
+      if (opt_startLineNum === (opt_startLineNum|0)) {
+        listItems[0].setAttribute('value', opt_startLineNum);
+      }
+    
+      var ol = document.createElement('ol');
+      ol.className = 'linenums';
+      var offset = Math.max(0, ((opt_startLineNum - 1 /* zero index */)) | 0) || 0;
+      for (var i = 0, n = listItems.length; i < n; ++i) {
+        li = listItems[i];
+        // Stick a class on the LIs so that stylesheets can
+        // color odd/even rows, or any other row pattern that
+        // is co-prime with 10.
+        li.className = 'L' + ((i + offset) % 10);
+        if (!li.firstChild) {
+          li.appendChild(document.createTextNode('\xA0'));
+        }
+        ol.appendChild(li);
+      }
+    
+      node.appendChild(ol);
     }
-  
-    // Split a line after the given node.
-    function breakAfter(lineEndNode) {
-      // If there's nothing to the right, then we can skip ending the line
-      // here, and move root-wards since splitting just before an end-tag
-      // would require us to create a bunch of empty copies.
-      while (!lineEndNode.nextSibling) {
-        lineEndNode = lineEndNode.parentNode;
-        if (!lineEndNode) { return; }
+    /**
+     * Breaks {@code job.sourceCode} around style boundaries in
+     * {@code job.decorations} and modifies {@code job.sourceNode} in place.
+     * @param {Object} job like <pre>{
+     *    sourceCode: {string} source as plain text,
+     *    sourceNode: {HTMLElement} the element containing the source,
+     *    spans: {Array.<number|Node>} alternating span start indices into source
+     *       and the text node or element (e.g. {@code <BR>}) corresponding to that
+     *       span.
+     *    decorations: {Array.<number|string} an array of style classes preceded
+     *       by the position at which they start in job.sourceCode in order
+     * }</pre>
+     * @private
+     */
+    function recombineTagsAndDecorations(job) {
+      var isIE8OrEarlier = /\bMSIE\s(\d+)/.exec(navigator.userAgent);
+      isIE8OrEarlier = isIE8OrEarlier && +isIE8OrEarlier[1] <= 8;
+      var newlineRe = /\n/g;
+    
+      var source = job.sourceCode;
+      var sourceLength = source.length;
+      // Index into source after the last code-unit recombined.
+      var sourceIndex = 0;
+    
+      var spans = job.spans;
+      var nSpans = spans.length;
+      // Index into spans after the last span which ends at or before sourceIndex.
+      var spanIndex = 0;
+    
+      var decorations = job.decorations;
+      var nDecorations = decorations.length;
+      // Index into decorations after the last decoration which ends at or before
+      // sourceIndex.
+      var decorationIndex = 0;
+    
+      // Remove all zero-length decorations.
+      decorations[nDecorations] = sourceLength;
+      var decPos, i;
+      for (i = decPos = 0; i < nDecorations;) {
+        if (decorations[i] !== decorations[i + 2]) {
+          decorations[decPos++] = decorations[i++];
+          decorations[decPos++] = decorations[i++];
+        } else {
+          i += 2;
+        }
       }
-  
-      function breakLeftOf(limit, copy) {
-        // Clone shallowly if this node needs to be on both sides of the break.
-        var rightSide = copy ? limit.cloneNode(false) : limit;
-        var parent = limit.parentNode;
-        if (parent) {
-          // We clone the parent chain.
-          // This helps us resurrect important styling elements that cross lines.
-          // E.g. in <i>Foo<br>Bar</i>
-          // should be rewritten to <li><i>Foo</i></li><li><i>Bar</i></li>.
-          var parentClone = breakLeftOf(parent, 1);
-          // Move the clone and everything to the right of the original
-          // onto the cloned parent.
-          var next = limit.nextSibling;
-          parentClone.appendChild(rightSide);
-          for (var sibling = next; sibling; sibling = next) {
-            next = sibling.nextSibling;
-            parentClone.appendChild(sibling);
-          }
+      nDecorations = decPos;
+    
+      // Simplify decorations.
+      for (i = decPos = 0; i < nDecorations;) {
+        var startPos = decorations[i];
+        // Conflate all adjacent decorations that use the same style.
+        var startDec = decorations[i + 1];
+        var end = i + 2;
+        while (end + 2 <= nDecorations && decorations[end + 1] === startDec) {
+          end += 2;
         }
-        return rightSide;
+        decorations[decPos++] = startPos;
+        decorations[decPos++] = startDec;
+        i = end;
       }
-  
-      var copiedListItem = breakLeftOf(lineEndNode.nextSibling, 0);
-  
-      // Walk the parent chain until we reach an unattached LI.
-      for (var parent;
-           // Check nodeType since IE invents document fragments.
-           (parent = copiedListItem.parentNode) && parent.nodeType === 1;) {
-        copiedListItem = parent;
+    
+      nDecorations = decorations.length = decPos;
+    
+      var sourceNode = job.sourceNode;
+      var oldDisplay;
+      if (sourceNode) {
+        oldDisplay = sourceNode.style.display;
+        sourceNode.style.display = 'none';
       }
-      // Put it on the list of lines for later processing.
-      listItems.push(copiedListItem);
-    }
-  
-    // Split lines while there are lines left to split.
-    for (var i = 0;  // Number of lines that have been split so far.
-         i < listItems.length;  // length updated by breakAfter calls.
-         ++i) {
-      walk(listItems[i]);
-    }
-  
-    // Make sure numeric indices show correctly.
-    if (opt_startLineNum === (opt_startLineNum|0)) {
-      listItems[0].setAttribute('value', opt_startLineNum);
-    }
-  
-    var ol = document.createElement('ol');
-    ol.className = 'linenums';
-    var offset = Math.max(0, ((opt_startLineNum - 1 /* zero index */)) | 0) || 0;
-    for (var i = 0, n = listItems.length; i < n; ++i) {
-      li = listItems[i];
-      // Stick a class on the LIs so that stylesheets can
-      // color odd/even rows, or any other row pattern that
-      // is co-prime with 10.
-      li.className = 'L' + ((i + offset) % 10);
-      if (!li.firstChild) {
-        li.appendChild(document.createTextNode('\xA0'));
+      try {
+        var decoration = null;
+        while (spanIndex < nSpans) {
+          var spanStart = spans[spanIndex];
+          var spanEnd = spans[spanIndex + 2] || sourceLength;
+    
+          var decEnd = decorations[decorationIndex + 2] || sourceLength;
+    
+          var end = Math.min(spanEnd, decEnd);
+    
+          var textNode = spans[spanIndex + 1];
+          var styledText;
+          if (textNode.nodeType !== 1  // Don't muck with <BR>s or <LI>s
+              // Don't introduce spans around empty text nodes.
+              && (styledText = source.substring(sourceIndex, end))) {
+            // This may seem bizarre, and it is.  Emitting LF on IE causes the
+            // code to display with spaces instead of line breaks.
+            // Emitting Windows standard issue linebreaks (CRLF) causes a blank
+            // space to appear at the beginning of every line but the first.
+            // Emitting an old Mac OS 9 line separator makes everything spiffy.
+            if (isIE8OrEarlier) {
+              styledText = styledText.replace(newlineRe, '\r');
+            }
+            textNode.nodeValue = styledText;
+            var document = textNode.ownerDocument;
+            var span = document.createElement('span');
+            span.className = decorations[decorationIndex + 1];
+            var parentNode = textNode.parentNode;
+            parentNode.replaceChild(span, textNode);
+            span.appendChild(textNode);
+            if (sourceIndex < spanEnd) {  // Split off a text node.
+              spans[spanIndex + 1] = textNode
+                  // TODO: Possibly optimize by using '' if there's no flicker.
+                  = document.createTextNode(source.substring(end, spanEnd));
+              parentNode.insertBefore(textNode, span.nextSibling);
+            }
+          }
+    
+          sourceIndex = end;
+    
+          if (sourceIndex >= spanEnd) {
+            spanIndex += 2;
+          }
+          if (sourceIndex >= decEnd) {
+            decorationIndex += 2;
+          }
+        }
+      } finally {
+        if (sourceNode) {
+          sourceNode.style.display = oldDisplay;
+        }
       }
-      ol.appendChild(li);
     }
   
-    node.appendChild(ol);
-  }
-  /**
-   * Breaks {@code job.sourceCode} around style boundaries in
-   * {@code job.decorations} and modifies {@code job.sourceNode} in place.
-   * @param {Object} job like <pre>{
-   *    sourceCode: {string} source as plain text,
-   *    sourceNode: {HTMLElement} the element containing the source,
-   *    spans: {Array.<number|Node>} alternating span start indices into source
-   *       and the text node or element (e.g. {@code <BR>}) corresponding to that
-   *       span.
-   *    decorations: {Array.<number|string} an array of style classes preceded
-   *       by the position at which they start in job.sourceCode in order
-   * }</pre>
-   * @private
-   */
-  function recombineTagsAndDecorations(job) {
-    var isIE8OrEarlier = /\bMSIE\s(\d+)/.exec(navigator.userAgent);
-    isIE8OrEarlier = isIE8OrEarlier && +isIE8OrEarlier[1] <= 8;
-    var newlineRe = /\n/g;
-  
-    var source = job.sourceCode;
-    var sourceLength = source.length;
-    // Index into source after the last code-unit recombined.
-    var sourceIndex = 0;
-  
-    var spans = job.spans;
-    var nSpans = spans.length;
-    // Index into spans after the last span which ends at or before sourceIndex.
-    var spanIndex = 0;
-  
-    var decorations = job.decorations;
-    var nDecorations = decorations.length;
-    // Index into decorations after the last decoration which ends at or before
-    // sourceIndex.
-    var decorationIndex = 0;
-  
-    // Remove all zero-length decorations.
-    decorations[nDecorations] = sourceLength;
-    var decPos, i;
-    for (i = decPos = 0; i < nDecorations;) {
-      if (decorations[i] !== decorations[i + 2]) {
-        decorations[decPos++] = decorations[i++];
-        decorations[decPos++] = decorations[i++];
-      } else {
-        i += 2;
+    /** Maps language-specific file extensions to handlers. */
+    var langHandlerRegistry = {};
+    /** Register a language handler for the given file extensions.
+      * @param {function (Object)} handler a function from source code to a list
+      *      of decorations.  Takes a single argument job which describes the
+      *      state of the computation.   The single parameter has the form
+      *      {@code {
+      *        sourceCode: {string} as plain text.
+      *        decorations: {Array.<number|string>} an array of style classes
+      *                     preceded by the position at which they start in
+      *                     job.sourceCode in order.
+      *                     The language handler should assigned this field.
+      *        basePos: {int} the position of source in the larger source chunk.
+      *                 All positions in the output decorations array are relative
+      *                 to the larger source chunk.
+      *      } }
+      * @param {Array.<string>} fileExtensions
+      */
+    function registerLangHandler(handler, fileExtensions) {
+      for (var i = fileExtensions.length; --i >= 0;) {
+        var ext = fileExtensions[i];
+        if (!langHandlerRegistry.hasOwnProperty(ext)) {
+          langHandlerRegistry[ext] = handler;
+        } else if (win['console']) {
+          console['warn']('cannot override language handler %s', ext);
+        }
       }
     }
-    nDecorations = decPos;
-  
-    // Simplify decorations.
-    for (i = decPos = 0; i < nDecorations;) {
-      var startPos = decorations[i];
-      // Conflate all adjacent decorations that use the same style.
-      var startDec = decorations[i + 1];
-      var end = i + 2;
-      while (end + 2 <= nDecorations && decorations[end + 1] === startDec) {
-        end += 2;
+    function langHandlerForExtension(extension, source) {
+      if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
+        // Treat it as markup if the first non whitespace character is a < and
+        // the last non-whitespace character is a >.
+        extension = /^\s*</.test(source)
+            ? 'default-markup'
+            : 'default-code';
       }
-      decorations[decPos++] = startPos;
-      decorations[decPos++] = startDec;
-      i = end;
+      return langHandlerRegistry[extension];
     }
+    registerLangHandler(decorateSource, ['default-code']);
+    registerLangHandler(
+        createSimpleLexer(
+            [],
+            [
+             [PR_PLAIN,       /^[^<?]+/],
+             [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
+             [PR_COMMENT,     /^<\!--[\s\S]*?(?:-\->|$)/],
+             // Unescaped content in an unknown language
+             ['lang-',        /^<\?([\s\S]+?)(?:\?>|$)/],
+             ['lang-',        /^<%([\s\S]+?)(?:%>|$)/],
+             [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
+             ['lang-',        /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
+             // Unescaped content in javascript.  (Or possibly vbscript).
+             ['lang-js',      /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
+             // Contains unescaped stylesheet content
+             ['lang-css',     /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
+             ['lang-in.tag',  /^(<\/?[a-z][^<>]*>)/i]
+            ]),
+        ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
+    registerLangHandler(
+        createSimpleLexer(
+            [
+             [PR_PLAIN,        /^[\s]+/, null, ' \t\r\n'],
+             [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
+             ],
+            [
+             [PR_TAG,          /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
+             [PR_ATTRIB_NAME,  /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
+             ['lang-uq.val',   /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
+             [PR_PUNCTUATION,  /^[=<>\/]+/],
+             ['lang-js',       /^on\w+\s*=\s*\"([^\"]+)\"/i],
+             ['lang-js',       /^on\w+\s*=\s*\'([^\']+)\'/i],
+             ['lang-js',       /^on\w+\s*=\s*([^\"\'>\s]+)/i],
+             ['lang-css',      /^style\s*=\s*\"([^\"]+)\"/i],
+             ['lang-css',      /^style\s*=\s*\'([^\']+)\'/i],
+             ['lang-css',      /^style\s*=\s*([^\"\'>\s]+)/i]
+             ]),
+        ['in.tag']);
+    registerLangHandler(
+        createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
+    registerLangHandler(sourceDecorator({
+            'keywords': CPP_KEYWORDS,
+            'hashComments': true,
+            'cStyleComments': true,
+            'types': C_TYPES
+          }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
+    registerLangHandler(sourceDecorator({
+            'keywords': 'null,true,false'
+          }), ['json']);
+    registerLangHandler(sourceDecorator({
+            'keywords': CSHARP_KEYWORDS,
+            'hashComments': true,
+            'cStyleComments': true,
+            'verbatimStrings': true,
+            'types': C_TYPES
+          }), ['cs']);
+    registerLangHandler(sourceDecorator({
+            'keywords': JAVA_KEYWORDS,
+            'cStyleComments': true
+          }), ['java']);
+    registerLangHandler(sourceDecorator({
+            'keywords': SH_KEYWORDS,
+            'hashComments': true,
+            'multiLineStrings': true
+          }), ['bash', 'bsh', 'csh', 'sh']);
+    registerLangHandler(sourceDecorator({
+            'keywords': PYTHON_KEYWORDS,
+            'hashComments': true,
+            'multiLineStrings': true,
+            'tripleQuotedStrings': true
+          }), ['cv', 'py', 'python']);
+    registerLangHandler(sourceDecorator({
+            'keywords': PERL_KEYWORDS,
+            'hashComments': true,
+            'multiLineStrings': true,
+            'regexLiterals': 2  // multiline regex literals
+          }), ['perl', 'pl', 'pm']);
+    registerLangHandler(sourceDecorator({
+            'keywords': RUBY_KEYWORDS,
+            'hashComments': true,
+            'multiLineStrings': true,
+            'regexLiterals': true
+          }), ['rb', 'ruby']);
+    registerLangHandler(sourceDecorator({
+            'keywords': JSCRIPT_KEYWORDS,
+            'cStyleComments': true,
+            'regexLiterals': true
+          }), ['javascript', 'js']);
+    registerLangHandler(sourceDecorator({
+            'keywords': COFFEE_KEYWORDS,
+            'hashComments': 3,  // ### style block comments
+            'cStyleComments': true,
+            'multilineStrings': true,
+            'tripleQuotedStrings': true,
+            'regexLiterals': true
+          }), ['coffee']);
+    registerLangHandler(sourceDecorator({
+            'keywords': RUST_KEYWORDS,
+            'cStyleComments': true,
+            'multilineStrings': true
+          }), ['rc', 'rs', 'rust']);
+    registerLangHandler(
+        createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
   
-    nDecorations = decorations.length = decPos;
+    function applyDecorator(job) {
+      var opt_langExtension = job.langExtension;
   
-    var sourceNode = job.sourceNode;
-    var oldDisplay;
-    if (sourceNode) {
-      oldDisplay = sourceNode.style.display;
-      sourceNode.style.display = 'none';
-    }
-    try {
-      var decoration = null;
-      while (spanIndex < nSpans) {
-        var spanStart = spans[spanIndex];
-        var spanEnd = spans[spanIndex + 2] || sourceLength;
-  
-        var decEnd = decorations[decorationIndex + 2] || sourceLength;
-  
-        var end = Math.min(spanEnd, decEnd);
-  
-        var textNode = spans[spanIndex + 1];
-        var styledText;
-        if (textNode.nodeType !== 1  // Don't muck with <BR>s or <LI>s
-            // Don't introduce spans around empty text nodes.
-            && (styledText = source.substring(sourceIndex, end))) {
-          // This may seem bizarre, and it is.  Emitting LF on IE causes the
-          // code to display with spaces instead of line breaks.
-          // Emitting Windows standard issue linebreaks (CRLF) causes a blank
-          // space to appear at the beginning of every line but the first.
-          // Emitting an old Mac OS 9 line separator makes everything spiffy.
-          if (isIE8OrEarlier) {
-            styledText = styledText.replace(newlineRe, '\r');
-          }
-          textNode.nodeValue = styledText;
-          var document = textNode.ownerDocument;
-          var span = document.createElement('span');
-          span.className = decorations[decorationIndex + 1];
-          var parentNode = textNode.parentNode;
-          parentNode.replaceChild(span, textNode);
-          span.appendChild(textNode);
-          if (sourceIndex < spanEnd) {  // Split off a text node.
-            spans[spanIndex + 1] = textNode
-                // TODO: Possibly optimize by using '' if there's no flicker.
-                = document.createTextNode(source.substring(end, spanEnd));
-            parentNode.insertBefore(textNode, span.nextSibling);
-          }
-        }
+      try {
+        // Extract tags, and convert the source code to plain text.
+        var sourceAndSpans = extractSourceSpans(job.sourceNode, job.pre);
+        /** Plain text. @type {string} */
+        var source = sourceAndSpans.sourceCode;
+        job.sourceCode = source;
+        job.spans = sourceAndSpans.spans;
+        job.basePos = 0;
   
-        sourceIndex = end;
+        // Apply the appropriate language handler
+        langHandlerForExtension(opt_langExtension, source)(job);
   
-        if (sourceIndex >= spanEnd) {
-          spanIndex += 2;
+        // Integrate the decorations and tags back into the source code,
+        // modifying the sourceNode in place.
+        recombineTagsAndDecorations(job);
+      } catch (e) {
+        if (win['console']) {
+          console['log'](e && e['stack'] || e);
         }
-        if (sourceIndex >= decEnd) {
-          decorationIndex += 2;
-        }
-      }
-    } finally {
-      if (sourceNode) {
-        sourceNode.style.display = oldDisplay;
       }
     }
-  }
-
-  /** Maps language-specific file extensions to handlers. */
-  var langHandlerRegistry = {};
-  /** Register a language handler for the given file extensions.
-    * @param {function (Object)} handler a function from source code to a list
-    *      of decorations.  Takes a single argument job which describes the
-    *      state of the computation.   The single parameter has the form
-    *      {@code {
-    *        sourceCode: {string} as plain text.
-    *        decorations: {Array.<number|string>} an array of style classes
-    *                     preceded by the position at which they start in
-    *                     job.sourceCode in order.
-    *                     The language handler should assigned this field.
-    *        basePos: {int} the position of source in the larger source chunk.
-    *                 All positions in the output decorations array are relative
-    *                 to the larger source chunk.
-    *      } }
-    * @param {Array.<string>} fileExtensions
-    */
-  function registerLangHandler(handler, fileExtensions) {
-    for (var i = fileExtensions.length; --i >= 0;) {
-      var ext = fileExtensions[i];
-      if (!langHandlerRegistry.hasOwnProperty(ext)) {
-        langHandlerRegistry[ext] = handler;
-      } else if (win['console']) {
-        console['warn']('cannot override language handler %s', ext);
+  
+    /**
+     * Pretty print a chunk of code.
+     * @param sourceCodeHtml {string} The HTML to pretty print.
+     * @param opt_langExtension {string} The language name to use.
+     *     Typically, a filename extension like 'cpp' or 'java'.
+     * @param opt_numberLines {number|boolean} True to number lines,
+     *     or the 1-indexed number of the first line in sourceCodeHtml.
+     */
+    function $prettyPrintOne(sourceCodeHtml, opt_langExtension, opt_numberLines) {
+      var container = document.createElement('div');
+      // This could cause images to load and onload listeners to fire.
+      // E.g. <img onerror="alert(1337)" src="nosuchimage.png">.
+      // We assume that the inner HTML is from a trusted source.
+      // The pre-tag is required for IE8 which strips newlines from innerHTML
+      // when it is injected into a <pre> tag.
+      // http://stackoverflow.com/questions/451486/pre-tag-loses-line-breaks-when-setting-innerhtml-in-ie
+      // http://stackoverflow.com/questions/195363/inserting-a-newline-into-a-pre-tag-ie-javascript
+      container.innerHTML = '<pre>' + sourceCodeHtml + '</pre>';
+      container = container.firstChild;
+      if (opt_numberLines) {
+        numberLines(container, opt_numberLines, true);
       }
+  
+      var job = {
+        langExtension: opt_langExtension,
+        numberLines: opt_numberLines,
+        sourceNode: container,
+        pre: 1
+      };
+      applyDecorator(job);
+      return container.innerHTML;
     }
-  }
-  function langHandlerForExtension(extension, source) {
-    if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
-      // Treat it as markup if the first non whitespace character is a < and
-      // the last non-whitespace character is a >.
-      extension = /^\s*</.test(source)
-          ? 'default-markup'
-          : 'default-code';
-    }
-    return langHandlerRegistry[extension];
-  }
-  registerLangHandler(decorateSource, ['default-code']);
-  registerLangHandler(
-      createSimpleLexer(
-          [],
-          [
-           [PR_PLAIN,       /^[^<?]+/],
-           [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
-           [PR_COMMENT,     /^<\!--[\s\S]*?(?:-\->|$)/],
-           // Unescaped content in an unknown language
-           ['lang-',        /^<\?([\s\S]+?)(?:\?>|$)/],
-           ['lang-',        /^<%([\s\S]+?)(?:%>|$)/],
-           [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
-           ['lang-',        /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
-           // Unescaped content in javascript.  (Or possibly vbscript).
-           ['lang-js',      /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
-           // Contains unescaped stylesheet content
-           ['lang-css',     /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
-           ['lang-in.tag',  /^(<\/?[a-z][^<>]*>)/i]
-          ]),
-      ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
-  registerLangHandler(
-      createSimpleLexer(
-          [
-           [PR_PLAIN,        /^[\s]+/, null, ' \t\r\n'],
-           [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
-           ],
-          [
-           [PR_TAG,          /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
-           [PR_ATTRIB_NAME,  /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
-           ['lang-uq.val',   /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
-           [PR_PUNCTUATION,  /^[=<>\/]+/],
-           ['lang-js',       /^on\w+\s*=\s*\"([^\"]+)\"/i],
-           ['lang-js',       /^on\w+\s*=\s*\'([^\']+)\'/i],
-           ['lang-js',       /^on\w+\s*=\s*([^\"\'>\s]+)/i],
-           ['lang-css',      /^style\s*=\s*\"([^\"]+)\"/i],
-           ['lang-css',      /^style\s*=\s*\'([^\']+)\'/i],
-           ['lang-css',      /^style\s*=\s*([^\"\'>\s]+)/i]
-           ]),
-      ['in.tag']);
-  registerLangHandler(
-      createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
-  registerLangHandler(sourceDecorator({
-          'keywords': CPP_KEYWORDS,
-          'hashComments': true,
-          'cStyleComments': true,
-          'types': C_TYPES
-        }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
-  registerLangHandler(sourceDecorator({
-          'keywords': 'null,true,false'
-        }), ['json']);
-  registerLangHandler(sourceDecorator({
-          'keywords': CSHARP_KEYWORDS,
-          'hashComments': true,
-          'cStyleComments': true,
-          'verbatimStrings': true,
-          'types': C_TYPES
-        }), ['cs']);
-  registerLangHandler(sourceDecorator({
-          'keywords': JAVA_KEYWORDS,
-          'cStyleComments': true
-        }), ['java']);
-  registerLangHandler(sourceDecorator({
-          'keywords': SH_KEYWORDS,
-          'hashComments': true,
-          'multiLineStrings': true
-        }), ['bash', 'bsh', 'csh', 'sh']);
-  registerLangHandler(sourceDecorator({
-          'keywords': PYTHON_KEYWORDS,
-          'hashComments': true,
-          'multiLineStrings': true,
-          'tripleQuotedStrings': true
-        }), ['cv', 'py', 'python']);
-  registerLangHandler(sourceDecorator({
-          'keywords': PERL_KEYWORDS,
-          'hashComments': true,
-          'multiLineStrings': true,
-          'regexLiterals': 2  // multiline regex literals
-        }), ['perl', 'pl', 'pm']);
-  registerLangHandler(sourceDecorator({
-          'keywords': RUBY_KEYWORDS,
-          'hashComments': true,
-          'multiLineStrings': true,
-          'regexLiterals': true
-        }), ['rb', 'ruby']);
-  registerLangHandler(sourceDecorator({
-          'keywords': JSCRIPT_KEYWORDS,
-          'cStyleComments': true,
-          'regexLiterals': true
-        }), ['javascript', 'js']);
-  registerLangHandler(sourceDecorator({
-          'keywords': COFFEE_KEYWORDS,
-          'hashComments': 3,  // ### style block comments
-          'cStyleComments': true,
-          'multilineStrings': true,
-          'tripleQuotedStrings': true,
-          'regexLiterals': true
-        }), ['coffee']);
-  registerLangHandler(sourceDecorator({
-          'keywords': RUST_KEYWORDS,
-          'cStyleComments': true,
-          'multilineStrings': true
-        }), ['rc', 'rs', 'rust']);
-  registerLangHandler(
-      createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
-
-  function applyDecorator(job) {
-    var opt_langExtension = job.langExtension;
-
-    try {
-      // Extract tags, and convert the source code to plain text.
-      var sourceAndSpans = extractSourceSpans(job.sourceNode, job.pre);
-      /** Plain text. @type {string} */
-      var source = sourceAndSpans.sourceCode;
-      job.sourceCode = source;
-      job.spans = sourceAndSpans.spans;
-      job.basePos = 0;
-
-      // Apply the appropriate language handler
-      langHandlerForExtension(opt_langExtension, source)(job);
-
-      // Integrate the decorations and tags back into the source code,
-      // modifying the sourceNode in place.
-      recombineTagsAndDecorations(job);
-    } catch (e) {
-      if (win['console']) {
-        console['log'](e && e['stack'] || e);
+  
+     /**
+      * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
+      * {@code class=prettyprint} and prettify them.
+      *
+      * @param {Function} opt_whenDone called when prettifying is done.
+      * @param {HTMLElement|HTMLDocument} opt_root an element or document
+      *   containing all the elements to pretty print.
+      *   Defaults to {@code document.body}.
+      */
+    function $prettyPrint(opt_whenDone, opt_root) {
+      var root = opt_root || document.body;
+      var doc = root.ownerDocument || document;
+      function byTagName(tn) { return root.getElementsByTagName(tn); }
+      // fetch a list of nodes to rewrite
+      var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
+      var elements = [];
+      for (var i = 0; i < codeSegments.length; ++i) {
+        for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
+          elements.push(codeSegments[i][j]);
+        }
       }
-    }
-  }
-
-  /**
-   * Pretty print a chunk of code.
-   * @param sourceCodeHtml {string} The HTML to pretty print.
-   * @param opt_langExtension {string} The language name to use.
-   *     Typically, a filename extension like 'cpp' or 'java'.
-   * @param opt_numberLines {number|boolean} True to number lines,
-   *     or the 1-indexed number of the first line in sourceCodeHtml.
-   */
-  function $prettyPrintOne(sourceCodeHtml, opt_langExtension, opt_numberLines) {
-    var container = document.createElement('div');
-    // This could cause images to load and onload listeners to fire.
-    // E.g. <img onerror="alert(1337)" src="nosuchimage.png">.
-    // We assume that the inner HTML is from a trusted source.
-    // The pre-tag is required for IE8 which strips newlines from innerHTML
-    // when it is injected into a <pre> tag.
-    // http://stackoverflow.com/questions/451486/pre-tag-loses-line-breaks-when-setting-innerhtml-in-ie
-    // http://stackoverflow.com/questions/195363/inserting-a-newline-into-a-pre-tag-ie-javascript
-    container.innerHTML = '<pre>' + sourceCodeHtml + '</pre>';
-    container = container.firstChild;
-    if (opt_numberLines) {
-      numberLines(container, opt_numberLines, true);
-    }
-
-    var job = {
-      langExtension: opt_langExtension,
-      numberLines: opt_numberLines,
-      sourceNode: container,
-      pre: 1
-    };
-    applyDecorator(job);
-    return container.innerHTML;
-  }
-
-   /**
-    * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
-    * {@code class=prettyprint} and prettify them.
-    *
-    * @param {Function} opt_whenDone called when prettifying is done.
-    * @param {HTMLElement|HTMLDocument} opt_root an element or document
-    *   containing all the elements to pretty print.
-    *   Defaults to {@code document.body}.
-    */
-  function $prettyPrint(opt_whenDone, opt_root) {
-    var root = opt_root || document.body;
-    var doc = root.ownerDocument || document;
-    function byTagName(tn) { return root.getElementsByTagName(tn); }
-    // fetch a list of nodes to rewrite
-    var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
-    var elements = [];
-    for (var i = 0; i < codeSegments.length; ++i) {
-      for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
-        elements.push(codeSegments[i][j]);
+      codeSegments = null;
+  
+      var clock = Date;
+      if (!clock['now']) {
+        clock = { 'now': function () { return +(new Date); } };
       }
-    }
-    codeSegments = null;
-
-    var clock = Date;
-    if (!clock['now']) {
-      clock = { 'now': function () { return +(new Date); } };
-    }
-
-    // The loop is broken into a series of continuations to make sure that we
-    // don't make the browser unresponsive when rewriting a large page.
-    var k = 0;
-    var prettyPrintingJob;
-
-    var langExtensionRe = /\blang(?:uage)?-([\w.]+)(?!\S)/;
-    var prettyPrintRe = /\bprettyprint\b/;
-    var prettyPrintedRe = /\bprettyprinted\b/;
-    var preformattedTagNameRe = /pre|xmp/i;
-    var codeRe = /^code$/i;
-    var preCodeXmpRe = /^(?:pre|code|xmp)$/i;
-    var EMPTY = {};
-
-    function doWork() {
-      var endTime = (win['PR_SHOULD_USE_CONTINUATION'] ?
-                     clock['now']() + 250 /* ms */ :
-                     Infinity);
-      for (; k < elements.length && clock['now']() < endTime; k++) {
-        var cs = elements[k];
-
-        // Look for a preceding comment like
-        // <?prettify lang="..." linenums="..."?>
-        var attrs = EMPTY;
-        {
-          for (var preceder = cs; (preceder = preceder.previousSibling);) {
-            var nt = preceder.nodeType;
-            // <?foo?> is parsed by HTML 5 to a comment node (8)
-            // like <!--?foo?-->, but in XML is a processing instruction
-            var value = (nt === 7 || nt === 8) && preceder.nodeValue;
-            if (value
-                ? !/^\??prettify\b/.test(value)
-                : (nt !== 3 || /\S/.test(preceder.nodeValue))) {
-              // Skip over white-space text nodes but not others.
-              break;
-            }
-            if (value) {
-              attrs = {};
-              value.replace(
-                  /\b(\w+)=([\w:.%+-]+)/g,
-                function (_, name, value) { attrs[name] = value; });
-              break;
-            }
-          }
-        }
-
-        var className = cs.className;
-        if ((attrs !== EMPTY || prettyPrintRe.test(className))
-            // Don't redo this if we've already done it.
-            // This allows recalling pretty print to just prettyprint elements
-            // that have been added to the page since last call.
-            && !prettyPrintedRe.test(className)) {
-
-          // make sure this is not nested in an already prettified element
-          var nested = false;
-          for (var p = cs.parentNode; p; p = p.parentNode) {
-            var tn = p.tagName;
-            if (preCodeXmpRe.test(tn)
-                && p.className && prettyPrintRe.test(p.className)) {
-              nested = true;
-              break;
+  
+      // The loop is broken into a series of continuations to make sure that we
+      // don't make the browser unresponsive when rewriting a large page.
+      var k = 0;
+      var prettyPrintingJob;
+  
+      var langExtensionRe = /\blang(?:uage)?-([\w.]+)(?!\S)/;
+      var prettyPrintRe = /\bprettyprint\b/;
+      var prettyPrintedRe = /\bprettyprinted\b/;
+      var preformattedTagNameRe = /pre|xmp/i;
+      var codeRe = /^code$/i;
+      var preCodeXmpRe = /^(?:pre|code|xmp)$/i;
+      var EMPTY = {};
+  
+      function doWork() {
+        var endTime = (win['PR_SHOULD_USE_CONTINUATION'] ?
+                       clock['now']() + 250 /* ms */ :
+                       Infinity);
+        for (; k < elements.length && clock['now']() < endTime; k++) {
+          var cs = elements[k];
+  
+          // Look for a preceding comment like
+          // <?prettify lang="..." linenums="..."?>
+          var attrs = EMPTY;
+          {
+            for (var preceder = cs; (preceder = preceder.previousSibling);) {
+              var nt = preceder.nodeType;
+              // <?foo?> is parsed by HTML 5 to a comment node (8)
+              // like <!--?foo?-->, but in XML is a processing instruction
+              var value = (nt === 7 || nt === 8) && preceder.nodeValue;
+              if (value
+                  ? !/^\??prettify\b/.test(value)
+                  : (nt !== 3 || /\S/.test(preceder.nodeValue))) {
+                // Skip over white-space text nodes but not others.
+                break;
+              }
+              if (value) {
+                attrs = {};
+                value.replace(
+                    /\b(\w+)=([\w:.%+-]+)/g,
+                  function (_, name, value) { attrs[name] = value; });
+                break;
+              }
             }
           }
-          if (!nested) {
-            // Mark done.  If we fail to prettyprint for whatever reason,
-            // we shouldn't try again.
-            cs.className += ' prettyprinted';
-
-            // If the classes includes a language extensions, use it.
-            // Language extensions can be specified like
-            //     <pre class="prettyprint lang-cpp">
-            // the language extension "cpp" is used to find a language handler
-            // as passed to PR.registerLangHandler.
-            // HTML5 recommends that a language be specified using "language-"
-            // as the prefix instead.  Google Code Prettify supports both.
-            // http://dev.w3.org/html5/spec-author-view/the-code-element.html
-            var langExtension = attrs['lang'];
-            if (!langExtension) {
-              langExtension = className.match(langExtensionRe);
-              // Support <pre class="prettyprint"><code class="language-c">
-              var wrapper;
-              if (!langExtension && (wrapper = childContentWrapper(cs))
-                  && codeRe.test(wrapper.tagName)) {
-                langExtension = wrapper.className.match(langExtensionRe);
+  
+          var className = cs.className;
+          if ((attrs !== EMPTY || prettyPrintRe.test(className))
+              // Don't redo this if we've already done it.
+              // This allows recalling pretty print to just prettyprint elements
+              // that have been added to the page since last call.
+              && !prettyPrintedRe.test(className)) {
+  
+            // make sure this is not nested in an already prettified element
+            var nested = false;
+            for (var p = cs.parentNode; p; p = p.parentNode) {
+              var tn = p.tagName;
+              if (preCodeXmpRe.test(tn)
+                  && p.className && prettyPrintRe.test(p.className)) {
+                nested = true;
+                break;
               }
-
-              if (langExtension) { langExtension = langExtension[1]; }
-            }
-
-            var preformatted;
-            if (preformattedTagNameRe.test(cs.tagName)) {
-              preformatted = 1;
-            } else {
-              var currentStyle = cs['currentStyle'];
-              var defaultView = doc.defaultView;
-              var whitespace = (
-                  currentStyle
-                  ? currentStyle['whiteSpace']
-                  : (defaultView
-                     && defaultView.getComputedStyle)
-                  ? defaultView.getComputedStyle(cs, null)
-                  .getPropertyValue('white-space')
-                  : 0);
-              preformatted = whitespace
-                  && 'pre' === whitespace.substring(0, 3);
             }
-
-            // Look for a class like linenums or linenums:<n> where <n> is the
-            // 1-indexed number of the first line.
-            var lineNums = attrs['linenums'];
-            if (!(lineNums = lineNums === 'true' || +lineNums)) {
-              lineNums = className.match(/\blinenums\b(?::(\d+))?/);
-              lineNums =
-                lineNums
-                ? lineNums[1] && lineNums[1].length
-                  ? +lineNums[1] : true
-                : false;
+            if (!nested) {
+              // Mark done.  If we fail to prettyprint for whatever reason,
+              // we shouldn't try again.
+              cs.className += ' prettyprinted';
+  
+              // If the classes includes a language extensions, use it.
+              // Language extensions can be specified like
+              //     <pre class="prettyprint lang-cpp">
+              // the language extension "cpp" is used to find a language handler
+              // as passed to PR.registerLangHandler.
+              // HTML5 recommends that a language be specified using "language-"
+              // as the prefix instead.  Google Code Prettify supports both.
+              // http://dev.w3.org/html5/spec-author-view/the-code-element.html
+              var langExtension = attrs['lang'];
+              if (!langExtension) {
+                langExtension = className.match(langExtensionRe);
+                // Support <pre class="prettyprint"><code class="language-c">
+                var wrapper;
+                if (!langExtension && (wrapper = childContentWrapper(cs))
+                    && codeRe.test(wrapper.tagName)) {
+                  langExtension = wrapper.className.match(langExtensionRe);
+                }
+  
+                if (langExtension) { langExtension = langExtension[1]; }
+              }
+  
+              var preformatted;
+              if (preformattedTagNameRe.test(cs.tagName)) {
+                preformatted = 1;
+              } else {
+                var currentStyle = cs['currentStyle'];
+                var defaultView = doc.defaultView;
+                var whitespace = (
+                    currentStyle
+                    ? currentStyle['whiteSpace']
+                    : (defaultView
+                       && defaultView.getComputedStyle)
+                    ? defaultView.getComputedStyle(cs, null)
+                    .getPropertyValue('white-space')
+                    : 0);
+                preformatted = whitespace
+                    && 'pre' === whitespace.substring(0, 3);
+              }
+  
+              // Look for a class like linenums or linenums:<n> where <n> is the
+              // 1-indexed number of the first line.
+              var lineNums = attrs['linenums'];
+              if (!(lineNums = lineNums === 'true' || +lineNums)) {
+                lineNums = className.match(/\blinenums\b(?::(\d+))?/);
+                lineNums =
+                  lineNums
+                  ? lineNums[1] && lineNums[1].length
+                    ? +lineNums[1] : true
+                  : false;
+              }
+              if (lineNums) { numberLines(cs, lineNums, preformatted); }
+  
+              // do the pretty printing
+              prettyPrintingJob = {
+                langExtension: langExtension,
+                sourceNode: cs,
+                numberLines: lineNums,
+                pre: preformatted
+              };
+              applyDecorator(prettyPrintingJob);
             }
-            if (lineNums) { numberLines(cs, lineNums, preformatted); }
-
-            // do the pretty printing
-            prettyPrintingJob = {
-              langExtension: langExtension,
-              sourceNode: cs,
-              numberLines: lineNums,
-              pre: preformatted
-            };
-            applyDecorator(prettyPrintingJob);
           }
         }
+        if (k < elements.length) {
+          // finish up in a continuation
+          setTimeout(doWork, 250);
+        } else if ('function' === typeof opt_whenDone) {
+          opt_whenDone();
+        }
       }
-      if (k < elements.length) {
-        // finish up in a continuation
-        setTimeout(doWork, 250);
-      } else if ('function' === typeof opt_whenDone) {
-        opt_whenDone();
-      }
+  
+      doWork();
     }
-
-    doWork();
-  }
-
-  /**
-   * Contains functions for creating and registering new language handlers.
-   * @type {Object}
-   */
-  var PR = win['PR'] = {
-        'createSimpleLexer': createSimpleLexer,
-        'registerLangHandler': registerLangHandler,
-        'sourceDecorator': sourceDecorator,
-        'PR_ATTRIB_NAME': PR_ATTRIB_NAME,
-        'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE,
-        'PR_COMMENT': PR_COMMENT,
-        'PR_DECLARATION': PR_DECLARATION,
-        'PR_KEYWORD': PR_KEYWORD,
-        'PR_LITERAL': PR_LITERAL,
-        'PR_NOCODE': PR_NOCODE,
-        'PR_PLAIN': PR_PLAIN,
-        'PR_PUNCTUATION': PR_PUNCTUATION,
-        'PR_SOURCE': PR_SOURCE,
-        'PR_STRING': PR_STRING,
-        'PR_TAG': PR_TAG,
-        'PR_TYPE': PR_TYPE,
-        'prettyPrintOne':
-           IN_GLOBAL_SCOPE
-             ? (win['prettyPrintOne'] = $prettyPrintOne)
-             : (prettyPrintOne = $prettyPrintOne),
-        'prettyPrint': prettyPrint =
-           IN_GLOBAL_SCOPE
-             ? (win['prettyPrint'] = $prettyPrint)
-             : (prettyPrint = $prettyPrint)
-      };
-
-  // Make PR available via the Asynchronous Module Definition (AMD) API.
-  // Per https://github.com/amdjs/amdjs-api/wiki/AMD:
-  // The Asynchronous Module Definition (AMD) API specifies a
-  // mechanism for defining modules such that the module and its
-  // dependencies can be asynchronously loaded.
-  // ...
-  // To allow a clear indicator that a global define function (as
-  // needed for script src browser loading) conforms to the AMD API,
-  // any global define function SHOULD have a property called "amd"
-  // whose value is an object. This helps avoid conflict with any
-  // other existing JavaScript code that could have defined a define()
-  // function that does not conform to the AMD API.
-  if (typeof define === "function" && define['amd']) {
-    define("google-code-prettify", [], function () {
-      return PR; 
-    });
-  }
-})();
-
-define("prettify", function(){});
-
-define('itemView',[
-  'App',
-  // Templates
-  'text!tpl/item.html',
-  'text!tpl/class.html',
-  'text!tpl/itemEnd.html',
-  // Tools
-  'prettify'
-], function(App, itemTpl, classTpl, endTpl) {
-  'use strict';
-
-  var appVersion = App.project.version || 'master';
-
-  var itemView = Backbone.View.extend({
-    el: '#item',
-    init: function() {
-      this.$html = $('html');
-      this.$body = $('body');
-      this.$scrollBody = $('html, body'); // hack for Chrome/Firefox scroll
-
-      this.tpl = _.template(itemTpl);
-      this.classTpl = _.template(classTpl);
-      this.endTpl = _.template(endTpl);
-
-      return this;
-    },
-    getSyntax: function(isMethod, cleanItem) {
-      var isConstructor = cleanItem.is_constructor;
-      var syntax = '';
-      if (isConstructor) {
-        syntax += 'new ';
-      } else if (cleanItem.static && cleanItem.class) {
-        syntax += cleanItem.class + '.';
-      }
-      syntax += cleanItem.name;
-
-      if (isMethod || isConstructor) {
-        syntax += '(';
-        if (cleanItem.params) {
-          for (var i = 0; i < cleanItem.params.length; i++) {
-            var p = cleanItem.params[i];
-            if (p.optional) {
-              syntax += '[';
-            }
-            syntax += p.name;
-            if (p.optdefault) {
-              syntax += '=' + p.optdefault;
-            }
-            if (p.optional) {
-              syntax += ']';
-            }
-            if (i !== cleanItem.params.length - 1) {
-              syntax += ', ';
+  
+    /**
+     * Contains functions for creating and registering new language handlers.
+     * @type {Object}
+     */
+    var PR = win['PR'] = {
+          'createSimpleLexer': createSimpleLexer,
+          'registerLangHandler': registerLangHandler,
+          'sourceDecorator': sourceDecorator,
+          'PR_ATTRIB_NAME': PR_ATTRIB_NAME,
+          'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE,
+          'PR_COMMENT': PR_COMMENT,
+          'PR_DECLARATION': PR_DECLARATION,
+          'PR_KEYWORD': PR_KEYWORD,
+          'PR_LITERAL': PR_LITERAL,
+          'PR_NOCODE': PR_NOCODE,
+          'PR_PLAIN': PR_PLAIN,
+          'PR_PUNCTUATION': PR_PUNCTUATION,
+          'PR_SOURCE': PR_SOURCE,
+          'PR_STRING': PR_STRING,
+          'PR_TAG': PR_TAG,
+          'PR_TYPE': PR_TYPE,
+          'prettyPrintOne':
+             IN_GLOBAL_SCOPE
+               ? (win['prettyPrintOne'] = $prettyPrintOne)
+               : (prettyPrintOne = $prettyPrintOne),
+          'prettyPrint': prettyPrint =
+             IN_GLOBAL_SCOPE
+               ? (win['prettyPrint'] = $prettyPrint)
+               : (prettyPrint = $prettyPrint)
+        };
+  
+    // Make PR available via the Asynchronous Module Definition (AMD) API.
+    // Per https://github.com/amdjs/amdjs-api/wiki/AMD:
+    // The Asynchronous Module Definition (AMD) API specifies a
+    // mechanism for defining modules such that the module and its
+    // dependencies can be asynchronously loaded.
+    // ...
+    // To allow a clear indicator that a global define function (as
+    // needed for script src browser loading) conforms to the AMD API,
+    // any global define function SHOULD have a property called "amd"
+    // whose value is an object. This helps avoid conflict with any
+    // other existing JavaScript code that could have defined a define()
+    // function that does not conform to the AMD API.
+    if (typeof define === "function" && define['amd']) {
+      define("google-code-prettify", [], function () {
+        return PR; 
+      });
+    }
+  })();
+  
+  define("prettify", function(){});
+  
+  define('itemView',[
+    'App',
+    // Templates
+    'text!tpl/item.html',
+    'text!tpl/class.html',
+    'text!tpl/itemEnd.html',
+    // Tools
+    'prettify'
+  ], function(App, itemTpl, classTpl, endTpl) {
+    'use strict';
+  
+    var appVersion = App.project.version || 'master';
+  
+    var itemView = Backbone.View.extend({
+      el: '#item',
+      init: function() {
+        this.$html = $('html');
+        this.$body = $('body');
+        this.$scrollBody = $('html, body'); // hack for Chrome/Firefox scroll
+  
+        this.tpl = _.template(itemTpl);
+        this.classTpl = _.template(classTpl);
+        this.endTpl = _.template(endTpl);
+  
+        return this;
+      },
+      getSyntax: function(isMethod, cleanItem) {
+        var isConstructor = cleanItem.is_constructor;
+        var syntax = '';
+        if (isConstructor) {
+          syntax += 'new ';
+        } else if (cleanItem.static && cleanItem.class) {
+          syntax += cleanItem.class + '.';
+        }
+        syntax += cleanItem.name;
+  
+        if (isMethod || isConstructor) {
+          syntax += '(';
+          if (cleanItem.params) {
+            for (var i = 0; i < cleanItem.params.length; i++) {
+              var p = cleanItem.params[i];
+              if (p.optional) {
+                syntax += '[';
+              }
+              syntax += p.name;
+              if (p.optdefault) {
+                syntax += '=' + p.optdefault;
+              }
+              if (p.optional) {
+                syntax += ']';
+              }
+              if (i !== cleanItem.params.length - 1) {
+                syntax += ', ';
+              }
             }
           }
+          syntax += ')';
         }
-        syntax += ')';
-      }
-
-      return syntax;
-    },
-    // Return a list of valid syntaxes across all overloaded versions of
-    // this item.
-    //
-    // For reference, we ultimately want to replicate something like this:
-    //
-    // https://processing.org/reference/color_.html
-    getSyntaxes: function(isMethod, cleanItem) {
-      var overloads = cleanItem.overloads || [cleanItem];
-      return overloads.map(this.getSyntax.bind(this, isMethod));
-    },
-    render: function(item) {
-      if (item) {
-        var itemHtml = '';
-        var cleanItem = this.clean(item);
-        var isClass = item.hasOwnProperty('itemtype') ? 0 : 1;
-        var collectionName = isClass
-            ? 'Constructor'
-            : this.capitalizeFirst(cleanItem.itemtype),
-          isConstructor = cleanItem.is_constructor;
-        cleanItem.isMethod = collectionName === 'Method';
-
-        var syntaxes = this.getSyntaxes(cleanItem.isMethod, cleanItem);
-
-        // Set the item header (title)
-
-        // Set item contents
-        if (isClass) {
-          var constructor = this.tpl({
-            item: cleanItem,
-            isClass: true,
-            isConstructor: isConstructor,
-            syntaxes: syntaxes
-          });
-          cleanItem.constructor = constructor;
-
-          var contents = _.find(App.classes, function(c) {
-            return c.name === cleanItem.name;
-          });
-          cleanItem.things = contents.items;
-
-          itemHtml = this.classTpl(cleanItem);
-        } else {
-          cleanItem.constRefs =
-            item.module === 'Constants' && App.data.consts[item.name];
-
-          itemHtml = this.tpl({
-            item: cleanItem,
-            isClass: false,
-            isConstructor: false,
-            syntaxes: syntaxes
-          });
+  
+        return syntax;
+      },
+      // Return a list of valid syntaxes across all overloaded versions of
+      // this item.
+      //
+      // For reference, we ultimately want to replicate something like this:
+      //
+      // https://processing.org/reference/color_.html
+      getSyntaxes: function(isMethod, cleanItem) {
+        var overloads = cleanItem.overloads || [cleanItem];
+        return overloads.map(this.getSyntax.bind(this, isMethod));
+      },
+      render: function(item) {
+        if (item) {
+          var itemHtml = '';
+          var cleanItem = this.clean(item);
+          var isClass = item.hasOwnProperty('itemtype') ? 0 : 1;
+          var collectionName = isClass
+              ? 'Constructor'
+              : this.capitalizeFirst(cleanItem.itemtype),
+            isConstructor = cleanItem.is_constructor;
+          cleanItem.isMethod = collectionName === 'Method';
+  
+          var syntaxes = this.getSyntaxes(cleanItem.isMethod, cleanItem);
+  
+          // Set the item header (title)
+  
+          // Set item contents
+          if (isClass) {
+            var constructor = this.tpl({
+              item: cleanItem,
+              isClass: true,
+              isConstructor: isConstructor,
+              syntaxes: syntaxes
+            });
+            cleanItem.constructor = constructor;
+  
+            var contents = _.find(App.classes, function(c) {
+              return c.name === cleanItem.name;
+            });
+            cleanItem.things = contents.items;
+  
+            itemHtml = this.classTpl(cleanItem);
+          } else {
+            cleanItem.constRefs =
+              item.module === 'Constants' && App.data.consts[item.name];
+  
+            itemHtml = this.tpl({
+              item: cleanItem,
+              isClass: false,
+              isConstructor: false,
+              syntaxes: syntaxes
+            });
+          }
+  
+          itemHtml += this.endTpl({ item: cleanItem, appVersion: appVersion });
+  
+          // Insert the view in the dom
+          this.$el.html(itemHtml);
+  
+          renderCode(cleanItem.name);
+  
+          // Set the document title based on the item name.
+          // If it is a method, add parentheses to the name
+          if (item.itemtype === 'method') {
+            App.pageView.appendToDocumentTitle(item.name + '()');
+          } else {
+            App.pageView.appendToDocumentTitle(item.name);
+          }
+  
+          // Hook up alt-text for examples
+          setTimeout(function() {
+            var alts = $('.example-content')[0];
+            if (alts) {
+              alts = $(alts)
+                .data('alt')
+                .split('\n');
+  
+              var canvases = $('.cnv_div');
+              for (var j = 0; j < alts.length; j++) {
+                if (j < canvases.length) {
+                  $(canvases[j]).append(
+                    '<span class="sr-only">' + alts[j] + '</span>'
+                  );
+                }
+              }
+            }
+          }, 1000);
+          Prism.highlightAll();
         }
-
-        itemHtml += this.endTpl({ item: cleanItem, appVersion: appVersion });
-
-        // Insert the view in the dom
-        this.$el.html(itemHtml);
-
-        renderCode(cleanItem.name);
-
-        // Set the document title based on the item name.
-        // If it is a method, add parentheses to the name
-        if (item.itemtype === 'method') {
-          App.pageView.appendToDocumentTitle(item.name + '()');
-        } else {
-          App.pageView.appendToDocumentTitle(item.name);
+  
+        var renderEvent = new Event('reference-rendered');
+        window.dispatchEvent(renderEvent);
+  
+        return this;
+      },
+      /**
+       * Clean item properties: url encode properties containing paths.
+       * @param {object} item The item object.
+       * @returns {object} Returns the same item object with urlencoded paths.
+       */
+      clean: function(item) {
+        var cleanItem = item;
+  
+        if (cleanItem.hasOwnProperty('file')) {
+          cleanItem.urlencodedfile = encodeURIComponent(item.file);
         }
-
-        // Hook up alt-text for examples
-        setTimeout(function() {
-          var alts = $('.example-content')[0];
-          if (alts) {
-            alts = $(alts)
-              .data('alt')
-              .split('\n');
-
-            var canvases = $('.cnv_div');
-            for (var j = 0; j < alts.length; j++) {
-              if (j < canvases.length) {
-                $(canvases[j]).append(
-                  '<span class="sr-only">' + alts[j] + '</span>'
-                );
-              }
+        return cleanItem;
+      },
+      /**
+       * Show a single item.
+       * @param {object} item Item object.
+       * @returns {object} This view.
+       */
+      show: function(item) {
+        if (item) {
+          this.render(item);
+        }
+  
+        App.pageView.hideContentViews();
+  
+        this.$el.show();
+  
+        this.scrollTop();
+        $('#item').focus();
+        return this;
+      },
+      /**
+       * Show a message if no item is found.
+       * @returns {object} This view.
+       */
+      nothingFound: function() {
+        this.$el.html(
+          '<p><br><br>Ouch. I am unable to find any item that match the current query.</p>'
+        );
+        App.pageView.hideContentViews();
+        this.$el.show();
+  
+        return this;
+      },
+      /**
+       * Scroll to the top of the window with an animation.
+       */
+      scrollTop: function() {
+        // Hack for Chrome/Firefox scroll animation
+        // Chrome scrolls 'body', Firefox scrolls 'html'
+        var scroll = this.$body.scrollTop() > 0 || this.$html.scrollTop() > 0;
+        if (scroll) {
+          this.$scrollBody.animate({ scrollTop: 0 }, 600);
+        }
+      },
+      /**
+       * Helper method to capitalize the first letter of a string
+       * @param {string} str
+       * @returns {string} Returns the string.
+       */
+      capitalizeFirst: function(str) {
+        return str.substr(0, 1).toUpperCase() + str.substr(1);
+      }
+    });
+  
+    return itemView;
+  });
+  
+  
+  define('text!tpl/menu.html',[],function () { return '<div>\n  <br>\n  <span id="reference-description1">Can\'t find what you\'re looking for? You may want to check out</span>\n  <a href="#/libraries/p5.sound">p5.sound</a>.<br><a href=\'https://p5js.org/offline-reference/p5-reference.zip\' target=_blank><span id="reference-description3">You can also download an offline version of the reference.</span></a>\n</div>\n\n<div id=\'collection-list-categories\'>\n<h2 class="sr-only" id="categories">Categories</h2>\n<% var i=0; %>\n<% var max=Math.floor(groups.length/4); %>\n<% var rem=groups.length%4; %>\n\n<% _.each(groups, function(group){ %>\n  <% var m = rem > 0 ? 1 : 0 %>\n  <% if (i === 0) { %>\n    <ul aria-labelledby="categories">\n    <% } %>\n    <li><a href="#group-<%=group%>"><%=group%></a></li>\n    <% if (i === (max+m-1)) { %>\n    </ul>\n  \t<% rem-- %>\n  \t<% i=0 %>\n  <% } else { %>\n  \t<% i++ %>\n  <% } %>\n<% }); %>\n</div>\n';});
+  
+  define('menuView',[
+    'App',
+    'text!tpl/menu.html'
+  ], function(App, menuTpl) {
+  
+    var menuView = Backbone.View.extend({
+      el: '#collection-list-nav',
+      /**
+       * Init.
+       * @returns {object} This view.
+       */
+      init: function() {
+        this.menuTpl = _.template(menuTpl);
+        return this;
+      },
+      /**
+       * Render.
+       * @returns {object} This view.
+       */
+      render: function() {
+  
+        var groups = [];
+        _.each(App.modules, function (item, i) {
+          if (!item.is_submodule) {
+            if (!item.file || item.file.indexOf('addons') === -1) { //addons don't get displayed on main page
+              groups.push(item.name);
             }
           }
-        }, 1000);
-        Prism.highlightAll();
-      }
-
-      var renderEvent = new Event('reference-rendered');
-      window.dispatchEvent(renderEvent);
-
-      return this;
-    },
-    /**
-     * Clean item properties: url encode properties containing paths.
-     * @param {object} item The item object.
-     * @returns {object} Returns the same item object with urlencoded paths.
-     */
-    clean: function(item) {
-      var cleanItem = item;
-
-      if (cleanItem.hasOwnProperty('file')) {
-        cleanItem.urlencodedfile = encodeURIComponent(item.file);
-      }
-      return cleanItem;
-    },
-    /**
-     * Show a single item.
-     * @param {object} item Item object.
-     * @returns {object} This view.
-     */
-    show: function(item) {
-      if (item) {
-        this.render(item);
-      }
-
-      App.pageView.hideContentViews();
-
-      this.$el.show();
-
-      this.scrollTop();
-      $('#item').focus();
-      return this;
-    },
-    /**
-     * Show a message if no item is found.
-     * @returns {object} This view.
-     */
-    nothingFound: function() {
-      this.$el.html(
-        '<p><br><br>Ouch. I am unable to find any item that match the current query.</p>'
-      );
-      App.pageView.hideContentViews();
-      this.$el.show();
-
-      return this;
-    },
-    /**
-     * Scroll to the top of the window with an animation.
-     */
-    scrollTop: function() {
-      // Hack for Chrome/Firefox scroll animation
-      // Chrome scrolls 'body', Firefox scrolls 'html'
-      var scroll = this.$body.scrollTop() > 0 || this.$html.scrollTop() > 0;
-      if (scroll) {
-        this.$scrollBody.animate({ scrollTop: 0 }, 600);
+          //}
+        });
+  
+        // Sort groups by name A-Z
+        groups.sort();
+  
+        var menuHtml = this.menuTpl({
+          'groups': groups
+        });
+  
+        // Render the view
+        this.$el.html(menuHtml);
+      },
+  
+      hide: function() {
+        this.$el.hide();
+      },
+  
+      show: function() {
+        this.$el.show();
+      },
+  
+      /**
+       * Update the menu.
+       * @param {string} el The name of the current route.
+       */
+      update: function(menuItem) {
+        //console.log(menuItem);
+        // this.$menuItems.removeClass('active');
+        // this.$menuItems.find('a[href=#'+menuItem+']').parent().addClass('active');
+  
       }
-    },
-    /**
-     * Helper method to capitalize the first letter of a string
-     * @param {string} str
-     * @returns {string} Returns the string.
-     */
-    capitalizeFirst: function(str) {
-      return str.substr(0, 1).toUpperCase() + str.substr(1);
-    }
+    });
+  
+    return menuView;
+  
   });
-
-  return itemView;
-});
-
-
-define('text!tpl/menu.html',[],function () { return '<div>\n  <br>\n  <span id="reference-description1">Can\'t find what you\'re looking for? You may want to check out</span>\n  <a href="#/libraries/p5.sound">p5.sound</a>.<br><a href=\'https://p5js.org/offline-reference/p5-reference.zip\' target=_blank><span id="reference-description3">You can also download an offline version of the reference.</span></a>\n</div>\n\n<div id=\'collection-list-categories\'>\n<h2 class="sr-only" id="categories">Categories</h2>\n<% var i=0; %>\n<% var max=Math.floor(groups.length/4); %>\n<% var rem=groups.length%4; %>\n\n<% _.each(groups, function(group){ %>\n  <% var m = rem > 0 ? 1 : 0 %>\n  <% if (i === 0) { %>\n    <ul aria-labelledby="categories">\n    <% } %>\n    <li><a href="#group-<%=group%>"><%=group%></a></li>\n    <% if (i === (max+m-1)) { %>\n    </ul>\n  \t<% rem-- %>\n  \t<% i=0 %>\n  <% } else { %>\n  \t<% i++ %>\n  <% } %>\n<% }); %>\n</div>\n';});
-
-define('menuView',[
-  'App',
-  'text!tpl/menu.html'
-], function(App, menuTpl) {
-
-  var menuView = Backbone.View.extend({
-    el: '#collection-list-nav',
-    /**
-     * Init.
-     * @returns {object} This view.
-     */
-    init: function() {
-      this.menuTpl = _.template(menuTpl);
-      return this;
-    },
-    /**
-     * Render.
-     * @returns {object} This view.
-     */
-    render: function() {
-
-      var groups = [];
-      _.each(App.modules, function (item, i) {
-        if (!item.is_submodule) {
-          if (!item.file || item.file.indexOf('addons') === -1) { //addons don't get displayed on main page
-            groups.push(item.name);
+  
+  
+  define('text!tpl/library.html',[],function () { return '<h3><%= module.name %> library</h3>\n\n<p><%= module.description %></p>\n\n<div id="library-page" class="reference-group clearfix">  \n\n<% var t = 0; col = 0; %>\n\n<% _.each(groups, function(group){ %>\n  <% if (t == 0) { %> \n    <div class="column_<%=col%>">\n  <% } %>\n  <% if (group.name !== module.name && group.name !== \'p5\') { %>\n    <% if (group.hash) { %> <a href="<%=group.hash%>" <% if (group.module !== module.name) { %>class="core"<% } %>><% } %>  \n    <h2 class="group-name <% if (t == 0) { %> first<%}%>"><%=group.name%></h2>\n    <% if (group.hash) { %> </a><br> <% } %>\n  <% } %>\n  <% _.each(group.items.filter(function(item) {return item.access !== \'private\'}), function(item) { %>\n    <a href="<%=item.hash%>" <% if (item.module !== module.name) { %>class="core"<% } %>><%=item.name%><% if (item.itemtype === \'method\') { %>()<%}%></a><br>\n    <% t++; %>\n  <% }); %>\n  <% if (t >= Math.floor(totalItems/4)) { col++; t = 0; %>\n    </div>\n  <% } %>\n<% }); %>\n</div>\n';});
+  
+  define(
+    'libraryView',[
+      'App',
+      // Templates
+      'text!tpl/library.html'
+    ],
+    function(App, libraryTpl) {
+      var libraryView = Backbone.View.extend({
+        el: '#list',
+        events: {},
+        /**
+         * Init.
+         */
+        init: function() {
+          this.libraryTpl = _.template(libraryTpl);
+  
+          return this;
+        },
+        /**
+         * Render the list.
+         */
+        render: function(m, listCollection) {
+          if (m && listCollection) {
+            var self = this;
+  
+            // Render items and group them by module
+            // module === group
+            this.groups = {};
+            _.each(m.items, function(item, i) {
+              var module = item.module || '_';
+              var group;
+              // Override default group with a selected category
+              // TODO: Overwriting with the first category might not be the best choice
+              // We might also want to have links for categories
+              if (item.category && item.category[0]) {
+                group = item.category[0];
+                // Populate item.hash
+                App.router.getHash(item);
+  
+                // Create a group list without link hash
+                if (!self.groups[group]) {
+                  self.groups[group] = {
+                    name: group.replace('_', '&nbsp;'),
+                    module: module,
+                    hash: undefined,
+                    items: []
+                  };
+                }
+              } else {
+                group = item.class || '_';
+                var hash = App.router.getHash(item);
+  
+                var ind = hash.lastIndexOf('/');
+                hash = hash.substring(0, ind);
+  
+                // Create a group list
+                if (!self.groups[group]) {
+                  self.groups[group] = {
+                    name: group.replace('_', '&nbsp;'),
+                    module: module,
+                    hash: hash,
+                    items: []
+                  };
+                }
+              }
+  
+              self.groups[group].items.push(item);
+            });
+  
+            // Sort groups by name A-Z
+            self.groups = _.sortBy(self.groups, this.sortByName);
+  
+            // Put the <li> items html into the list <ul>
+            var libraryHtml = self.libraryTpl({
+              title: self.capitalizeFirst(listCollection),
+              module: m.module,
+              totalItems: m.items.length,
+              groups: self.groups
+            });
+  
+            // Render the view
+            this.$el.html(libraryHtml);
+          }
+  
+          return this;
+        },
+        /**
+         * Show a list of items.
+         * @param {array} items Array of item objects.
+         * @returns {object} This view.
+         */
+        show: function(listGroup) {
+          if (App[listGroup]) {
+            this.render(App[listGroup], listGroup);
           }
+          App.pageView.hideContentViews();
+  
+          this.$el.show();
+  
+          return this;
+        },
+        /**
+         * Helper method to capitalize the first letter of a string
+         * @param {string} str
+         * @returns {string} Returns the string.
+         */
+        capitalizeFirst: function(str) {
+          return str.substr(0, 1).toUpperCase() + str.substr(1);
+        },
+        /**
+         * Sort function (for the Array.prototype.sort() native method): from A to Z.
+         * @param {string} a
+         * @param {string} b
+         * @returns {Array} Returns an array with elements sorted from A to Z.
+         */
+        sortAZ: function(a, b) {
+          return a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase() ? 1 : -1;
+        },
+  
+        sortByName: function(a, b) {
+          if (a.name === 'p5') return -1;
+          else return 0;
         }
-        //}
-      });
-
-      // Sort groups by name A-Z
-      groups.sort();
-
-      var menuHtml = this.menuTpl({
-        'groups': groups
       });
-
-      // Render the view
-      this.$el.html(menuHtml);
-    },
-
-    hide: function() {
-      this.$el.hide();
-    },
-
-    show: function() {
-      this.$el.show();
-    },
-
-    /**
-     * Update the menu.
-     * @param {string} el The name of the current route.
-     */
-    update: function(menuItem) {
-      //console.log(menuItem);
-      // this.$menuItems.removeClass('active');
-      // this.$menuItems.find('a[href=#'+menuItem+']').parent().addClass('active');
-
+  
+      return libraryView;
     }
-  });
-
-  return menuView;
-
-});
-
-
-define('text!tpl/library.html',[],function () { return '<h3><%= module.name %> library</h3>\n\n<p><%= module.description %></p>\n\n<div id="library-page" class="reference-group clearfix">  \n\n<% var t = 0; col = 0; %>\n\n<% _.each(groups, function(group){ %>\n  <% if (t == 0) { %> \n    <div class="column_<%=col%>">\n  <% } %>\n  <% if (group.name !== module.name && group.name !== \'p5\') { %>\n    <% if (group.hash) { %> <a href="<%=group.hash%>" <% if (group.module !== module.name) { %>class="core"<% } %>><% } %>  \n    <h2 class="group-name <% if (t == 0) { %> first<%}%>"><%=group.name%></h2>\n    <% if (group.hash) { %> </a><br> <% } %>\n  <% } %>\n  <% _.each(group.items.filter(function(item) {return item.access !== \'private\'}), function(item) { %>\n    <a href="<%=item.hash%>" <% if (item.module !== module.name) { %>class="core"<% } %>><%=item.name%><% if (item.itemtype === \'method\') { %>()<%}%></a><br>\n    <% t++; %>\n  <% }); %>\n  <% if (t >= Math.floor(totalItems/4)) { col++; t = 0; %>\n    </div>\n  <% } %>\n<% }); %>\n</div>\n';});
-
-define(
-  'libraryView',[
+  );
+  
+  define('pageView',[
     'App',
-    // Templates
-    'text!tpl/library.html'
-  ],
-  function(App, libraryTpl) {
-    var libraryView = Backbone.View.extend({
-      el: '#list',
-      events: {},
+  
+    // Views
+    'searchView',
+    'listView',
+    'itemView',
+    'menuView',
+    'libraryView'
+  ], function(App, searchView, listView, itemView, menuView, libraryView) {
+  
+    // Store the original title parts so we can substitue different endings.
+    var _originalDocumentTitle = window.document.title;
+  
+    var pageView = Backbone.View.extend({
+      el: 'body',
       /**
        * Init.
        */
       init: function() {
-        this.libraryTpl = _.template(libraryTpl);
-
+        App.$container = $('#container');
+        App.contentViews = [];
+  
         return this;
       },
       /**
-       * Render the list.
+       * Render.
        */
-      render: function(m, listCollection) {
-        if (m && listCollection) {
-          var self = this;
-
-          // Render items and group them by module
-          // module === group
-          this.groups = {};
-          _.each(m.items, function(item, i) {
-            var module = item.module || '_';
-            var group;
-            // Override default group with a selected category
-            // TODO: Overwriting with the first category might not be the best choice
-            // We might also want to have links for categories
-            if (item.category && item.category[0]) {
-              group = item.category[0];
-              // Populate item.hash
-              App.router.getHash(item);
-
-              // Create a group list without link hash
-              if (!self.groups[group]) {
-                self.groups[group] = {
-                  name: group.replace('_', '&nbsp;'),
-                  module: module,
-                  hash: undefined,
-                  items: []
-                };
-              }
-            } else {
-              group = item.class || '_';
-              var hash = App.router.getHash(item);
-
-              var ind = hash.lastIndexOf('/');
-              hash = hash.substring(0, ind);
-
-              // Create a group list
-              if (!self.groups[group]) {
-                self.groups[group] = {
-                  name: group.replace('_', '&nbsp;'),
-                  module: module,
-                  hash: hash,
-                  items: []
-                };
-              }
-            }
-
-            self.groups[group].items.push(item);
-          });
-
-          // Sort groups by name A-Z
-          self.groups = _.sortBy(self.groups, this.sortByName);
-
-          // Put the <li> items html into the list <ul>
-          var libraryHtml = self.libraryTpl({
-            title: self.capitalizeFirst(listCollection),
-            module: m.module,
-            totalItems: m.items.length,
-            groups: self.groups
-          });
-
-          // Render the view
-          this.$el.html(libraryHtml);
+      render: function() {
+  
+        // Menu view
+        if (!App.menuView) {
+          App.menuView = new menuView();
+          App.menuView.init().render();
+        }
+  
+        // Item view
+        if (!App.itemView) {
+          App.itemView = new itemView();
+          App.itemView.init().render();
+          // Add the item view to the views array
+          App.contentViews.push(App.itemView);
+        }
+  
+        // List view
+        if (!App.listView) {
+          App.listView = new listView();
+          App.listView.init().render();
+          // Add the list view to the views array
+          App.contentViews.push(App.listView);
+        }
+  
+        // Library view
+        if (!App.libraryView) {
+          App.libraryView = new libraryView();
+          App.libraryView.init().render();
+          // Add the list view to the views array
+          App.contentViews.push(App.libraryView);
+        }
+  
+        // Search
+        if (!App.searchView) {
+          App.searchView = new searchView();
+          App.searchView.init().render();
         }
-
         return this;
       },
       /**
-       * Show a list of items.
-       * @param {array} items Array of item objects.
+       * Hide item and list views.
        * @returns {object} This view.
        */
-      show: function(listGroup) {
-        if (App[listGroup]) {
-          this.render(App[listGroup], listGroup);
-        }
-        App.pageView.hideContentViews();
-
-        this.$el.show();
-
+      hideContentViews: function() {
+        _.each(App.contentViews, function(view, i) {
+          view.$el.hide();
+        });
+  
         return this;
       },
       /**
-       * Helper method to capitalize the first letter of a string
-       * @param {string} str
-       * @returns {string} Returns the string.
+       * Append the supplied name to the first part of original document title.
+       * If no name is supplied, the title will reset to the original one.
        */
-      capitalizeFirst: function(str) {
-        return str.substr(0, 1).toUpperCase() + str.substr(1);
+      appendToDocumentTitle: function(name){
+        if(name){
+          let firstTitlePart = _originalDocumentTitle.split(" | ")[0];
+          window.document.title = [firstTitlePart, name].join(" | ");
+        } else {
+          window.document.title = _originalDocumentTitle;
+        }
+      }    
+    });
+  
+    return pageView;
+  
+  });
+  
+  define('router',[
+    'App'
+  ], function(App) {
+  
+    'use strict'; //
+  
+    var Router = Backbone.Router.extend({
+  
+      routes: {
+        '': 'list',
+        'p5': 'list',
+        'p5/': 'list',
+        'classes': 'list',
+        'search': 'search',
+        'libraries/:lib': 'library',
+        ':searchClass(/:searchItem)': 'get'
       },
       /**
-       * Sort function (for the Array.prototype.sort() native method): from A to Z.
-       * @param {string} a
-       * @param {string} b
-       * @returns {Array} Returns an array with elements sorted from A to Z.
+       * Whether the json API data was loaded.
        */
-      sortAZ: function(a, b) {
-        return a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase() ? 1 : -1;
-      },
-
-      sortByName: function(a, b) {
-        if (a.name === 'p5') return -1;
-        else return 0;
-      }
-    });
-
-    return libraryView;
-  }
-);
-
-define('pageView',[
-  'App',
-
-  // Views
-  'searchView',
-  'listView',
-  'itemView',
-  'menuView',
-  'libraryView'
-], function(App, searchView, listView, itemView, menuView, libraryView) {
-
-  // Store the original title parts so we can substitue different endings.
-  var _originalDocumentTitle = window.document.title;
-
-  var pageView = Backbone.View.extend({
-    el: 'body',
-    /**
-     * Init.
-     */
-    init: function() {
-      App.$container = $('#container');
-      App.contentViews = [];
-
-      return this;
-    },
-    /**
-     * Render.
-     */
-    render: function() {
-
-      // Menu view
-      if (!App.menuView) {
-        App.menuView = new menuView();
-        App.menuView.init().render();
-      }
-
-      // Item view
-      if (!App.itemView) {
-        App.itemView = new itemView();
-        App.itemView.init().render();
-        // Add the item view to the views array
-        App.contentViews.push(App.itemView);
-      }
-
-      // List view
-      if (!App.listView) {
-        App.listView = new listView();
-        App.listView.init().render();
-        // Add the list view to the views array
-        App.contentViews.push(App.listView);
-      }
-
-      // Library view
-      if (!App.libraryView) {
-        App.libraryView = new libraryView();
-        App.libraryView.init().render();
-        // Add the list view to the views array
-        App.contentViews.push(App.libraryView);
-      }
-
-      // Search
-      if (!App.searchView) {
-        App.searchView = new searchView();
-        App.searchView.init().render();
-      }
-      return this;
-    },
-    /**
-     * Hide item and list views.
-     * @returns {object} This view.
-     */
-    hideContentViews: function() {
-      _.each(App.contentViews, function(view, i) {
-        view.$el.hide();
-      });
-
-      return this;
-    },
-    /**
-     * Append the supplied name to the first part of original document title.
-     * If no name is supplied, the title will reset to the original one.
-     */
-    appendToDocumentTitle: function(name){
-      if(name){
-        let firstTitlePart = _originalDocumentTitle.split(" | ")[0];
-        window.document.title = [firstTitlePart, name].join(" | ");
-      } else {
-        window.document.title = _originalDocumentTitle;
-      }
-    }    
-  });
-
-  return pageView;
-
-});
-
-define('router',[
-  'App'
-], function(App) {
-
-  'use strict'; //
-
-  var Router = Backbone.Router.extend({
-
-    routes: {
-      '': 'list',
-      'p5': 'list',
-      'p5/': 'list',
-      'classes': 'list',
-      'search': 'search',
-      'libraries/:lib': 'library',
-      ':searchClass(/:searchItem)': 'get'
-    },
-    /**
-     * Whether the json API data was loaded.
-     */
-    _initialized: false,
-    /**
-     * Initialize the app: load json API data and create searchable arrays.
-     */
-    init: function(callback) {
-      var self = this;
-      require(['pageView'], function(pageView) {
-
-        // If already initialized, move away from here!
-        if (self._initialized) {
+      _initialized: false,
+      /**
+       * Initialize the app: load json API data and create searchable arrays.
+       */
+      init: function(callback) {
+        var self = this;
+        require(['pageView'], function(pageView) {
+  
+          // If already initialized, move away from here!
+          if (self._initialized) {
+            if (callback)
+              callback();
+            return;
+          }
+  
+          // Update initialization state: must be done now to avoid recursive mess
+          self._initialized = true;
+  
+          // Render views
+          if (!App.pageView) {
+            App.pageView = new pageView();
+            App.pageView.init().render();
+          }
+  
+          // If a callback is set (a route has already been called), run it
+          // otherwise, show the default list
           if (callback)
             callback();
+          else
+            self.list();
+        });
+      },
+      /**
+       * Start route. Simply check if initialized.
+       */
+      start: function() {
+        this.init();
+      },
+      /**
+       * Show item details by searching a class or a class item (method, property or event).
+       * @param {string} searchClass The class name (mandatory).
+       * @param {string} searchItem The class item name: can be a method, property or event name.
+       */
+      get: function(searchClass, searchItem) {
+  
+        // if looking for a library page, redirect
+        if (searchClass === 'p5.sound' && !searchItem) {
+          window.location.hash = '/libraries/'+searchClass;
           return;
         }
-
-        // Update initialization state: must be done now to avoid recursive mess
-        self._initialized = true;
-
-        // Render views
-        if (!App.pageView) {
-          App.pageView = new pageView();
-          App.pageView.init().render();
-        }
-
-        // If a callback is set (a route has already been called), run it
-        // otherwise, show the default list
-        if (callback)
-          callback();
-        else
-          self.list();
-      });
-    },
-    /**
-     * Start route. Simply check if initialized.
-     */
-    start: function() {
-      this.init();
-    },
-    /**
-     * Show item details by searching a class or a class item (method, property or event).
-     * @param {string} searchClass The class name (mandatory).
-     * @param {string} searchItem The class item name: can be a method, property or event name.
-     */
-    get: function(searchClass, searchItem) {
-
-      // if looking for a library page, redirect
-      if (searchClass === 'p5.sound' && !searchItem) {
-        window.location.hash = '/libraries/'+searchClass;
-        return;
-      }
-
-      var self = this;
-      this.init(function() {
-        var item = self.getItem(searchClass, searchItem);
-
-        App.menuView.hide();
-
-        if (item) {
-          App.itemView.show(item);
-        } else {
-          //App.itemView.nothingFound();
-
-          self.list();
-        }
-
-        styleCodeLinks();
-      });
-    },
-    /**
-     * Returns one item object by searching a class or a class item (method, property or event).
-     * @param {string} searchClass The class name (mandatory).
-     * @param {string} searchItem The class item name: can be a method, property or event name.
-     * @returns {object} The item found or undefined if nothing was found.
-     */
-    getItem: function(searchClass, searchItem) {
-      var classes = App.classes,
-              items = App.allItems,
-              classesCount = classes.length,
-              itemsCount = items.length,
-              className = searchClass ? searchClass.toLowerCase() : undefined,
-              itemName = searchItem ? searchItem : undefined,
-              found;
-
-      // Only search for a class, if itemName is undefined
-      if (className && !itemName) {
-        for (var i = 0; i < classesCount; i++) {
-          if (classes[i].name.toLowerCase() === className) {
-            found = classes[i];
-            _.each(found.items, function(i, idx) {
-              i.hash = App.router.getHash(i);
-            });
-            break;
+  
+        var self = this;
+        this.init(function() {
+          var item = self.getItem(searchClass, searchItem);
+  
+          App.menuView.hide();
+  
+          if (item) {
+            App.itemView.show(item);
+          } else {
+            //App.itemView.nothingFound();
+  
+            self.list();
           }
-        }
-        // Search for a class item
-      } else if (className && itemName) {
-        // Search case sensitively
-        for (var i = 0; i < itemsCount; i++) {
-          if (items[i].class.toLowerCase() === className &&
-            items[i].name === itemName) {
-            found = items[i];
-            break;
+  
+          styleCodeLinks();
+        });
+      },
+      /**
+       * Returns one item object by searching a class or a class item (method, property or event).
+       * @param {string} searchClass The class name (mandatory).
+       * @param {string} searchItem The class item name: can be a method, property or event name.
+       * @returns {object} The item found or undefined if nothing was found.
+       */
+      getItem: function(searchClass, searchItem) {
+        var classes = App.classes,
+                items = App.allItems,
+                classesCount = classes.length,
+                itemsCount = items.length,
+                className = searchClass ? searchClass.toLowerCase() : undefined,
+                itemName = searchItem ? searchItem : undefined,
+                found;
+  
+        // Only search for a class, if itemName is undefined
+        if (className && !itemName) {
+          for (var i = 0; i < classesCount; i++) {
+            if (classes[i].name.toLowerCase() === className) {
+              found = classes[i];
+              _.each(found.items, function(i, idx) {
+                i.hash = App.router.getHash(i);
+              });
+              break;
+            }
           }
-        }
-
-        // If no match was found, fallback to search case insensitively
-        if(!found){
+          // Search for a class item
+        } else if (className && itemName) {
+          // Search case sensitively
           for (var i = 0; i < itemsCount; i++) {
-            if(items[i].class.toLowerCase() === className &&
-              items[i].name.toLowerCase() === itemName.toLowerCase()){
+            if (items[i].class.toLowerCase() === className &&
+              items[i].name === itemName) {
               found = items[i];
               break;
             }
           }
+  
+          // If no match was found, fallback to search case insensitively
+          if(!found){
+            for (var i = 0; i < itemsCount; i++) {
+              if(items[i].class.toLowerCase() === className &&
+                items[i].name.toLowerCase() === itemName.toLowerCase()){
+                found = items[i];
+                break;
+              }
+            }
+          }
         }
-      }
-
-      return found;
-    },
-    /**
-     * List items.
-     * @param {string} collection The name of the collection to list.
-     */
-    list: function(collection) {
-
-      collection = 'allItems';
-
-      // Make sure collection is valid
-      if (App.collections.indexOf(collection) < 0) {
-        return;
-      }
-
-      this.init(function() {
-        App.menuView.show(collection);
-        App.menuView.update(collection);
-        App.listView.show(collection);
-        styleCodeLinks();
-      });
-    },
-    /**
-     * Display information for a library.
-     * @param {string} collection The name of the collection to list.
-     */
-    library: function(collection) {
-      this.init(function() {
-        App.menuView.hide();
-        App.libraryView.show(collection.substring(3)); //remove p5.
-        styleCodeLinks();
-      });
-    },
-    /**
-     * Close all content views.
-     */
-    search: function() {
-      this.init(function() {
-        App.menuView.hide();
-        App.pageView.hideContentViews();
-      });
-    },
-
-    /**
-     * Create an hash/url for the item.
-     * @param {Object} item A class, method, property or event object.
-     * @returns {String} The hash string, including the '#'.
-     */
-     getHash: function(item) {
-
-       if (!item.hash) {
-
-         // FIX TO INVISIBLE OBJECTS: DH (see also listView.js)
-
-         if (item.class) {
-           var clsFunc = '#/' + item.class + '.' + item.name;
-           var idx = clsFunc.lastIndexOf('.');
-           item.hash = clsFunc.substring(0,idx) + '/' + clsFunc.substring(idx+1);
-         } else {
-          item.hash = '#/' + item.name;
+  
+        return found;
+      },
+      /**
+       * List items.
+       * @param {string} collection The name of the collection to list.
+       */
+      list: function(collection) {
+  
+        collection = 'allItems';
+  
+        // Make sure collection is valid
+        if (App.collections.indexOf(collection) < 0) {
+          return;
+        }
+  
+        this.init(function() {
+          App.menuView.show(collection);
+          App.menuView.update(collection);
+          App.listView.show(collection);
+          styleCodeLinks();
+        });
+      },
+      /**
+       * Display information for a library.
+       * @param {string} collection The name of the collection to list.
+       */
+      library: function(collection) {
+        this.init(function() {
+          App.menuView.hide();
+          App.libraryView.show(collection.substring(3)); //remove p5.
+          styleCodeLinks();
+        });
+      },
+      /**
+       * Close all content views.
+       */
+      search: function() {
+        this.init(function() {
+          App.menuView.hide();
+          App.pageView.hideContentViews();
+        });
+      },
+  
+      /**
+       * Create an hash/url for the item.
+       * @param {Object} item A class, method, property or event object.
+       * @returns {String} The hash string, including the '#'.
+       */
+       getHash: function(item) {
+  
+         if (!item.hash) {
+  
+           // FIX TO INVISIBLE OBJECTS: DH (see also listView.js)
+  
+           if (item.class) {
+             var clsFunc = '#/' + item.class + '.' + item.name;
+             var idx = clsFunc.lastIndexOf('.');
+             item.hash = clsFunc.substring(0,idx) + '/' + clsFunc.substring(idx+1);
+           } else {
+            item.hash = '#/' + item.name;
+           }
          }
-       }
-
-       return item.hash;
-    }
-  });
-
-  
-  function styleCodeLinks() {
-    var links = document.getElementsByTagName("a");
-    for (var iLink = 0; iLink < links.length; iLink++) {
-      var link = links[iLink];
-      if (link.hash.startsWith('#/p5')) {
-        link.classList.add('code');
-      }
-    }
-  }
-
-
-  // Get the router
-  App.router = new Router();
-
-  // Start history
-  Backbone.history.start();
-
-  return App.router;
-
-});
-
-/**
- * Define global App.
- */
-var App = window.App || {};
-define('App', [],function() {
-  return App;
-});
-
-/**
- * Load json API data and start the router.
- * @param {module} App
- * @param {module} router
- */
-require([
-  'App',
-  './documented-method'], function(App, DocumentedMethod) {
-
-  // Set collections
-  App.collections = ['allItems', 'classes', 'events', 'methods', 'properties', 'p5.sound'];
-
-  // Get json API data
-  $.getJSON('data.min.json', function(data) {
-    App.data = data;
-    App.classes = [];
-    App.methods = [];
-    App.properties = [];
-    App.events = [];
-    App.allItems = [];
-    App.sound = { items: [] };
-    App.dom = { items: [] };
-    App.modules = [];
-    App.project = data.project;
-
-
-    var modules = data.modules;
-
-    // Get class items (methods, properties, events)
-    _.each(modules, function(m, idx, array) {
-      App.modules.push(m);
-      if (m.name == "p5.sound") {
-        App.sound.module = m;
+  
+         return item.hash;
       }
     });
-
-
-    var items = data.classitems;
-    var classes = data.classes;
-
-    // Get classes
-    _.each(classes, function(c, idx, array) {
-      if (!c.private) {
-        App.classes.push(c);
+  
+    
+    function styleCodeLinks() {
+      var links = document.getElementsByTagName("a");
+      for (var iLink = 0; iLink < links.length; iLink++) {
+        var link = links[iLink];
+        if (link.hash.startsWith('#/p5')) {
+          link.classList.add('code');
+        }
       }
-    });
-
-
-    // Get class items (methods, properties, events)
-    _.each(items, function(el, idx, array) {
-      if (el.itemtype) {
-        if (el.itemtype === "method") {
-          el = new DocumentedMethod(el);
-          App.methods.push(el);
-          App.allItems.push(el);
-        } else if (el.itemtype === "property") {
-          App.properties.push(el);
-          App.allItems.push(el);
-        } else if (el.itemtype === "event") {
-          App.events.push(el);
-          App.allItems.push(el);
+    }
+  
+  
+    // Get the router
+    App.router = new Router();
+  
+    // Start history
+    Backbone.history.start();
+  
+    return App.router;
+  
+  });
+  
+  /**
+   * Define global App.
+   */
+  var App = window.App || {};
+  define('App', [],function() {
+    return App;
+  });
+  
+  /**
+   * Load json API data and start the router.
+   * @param {module} App
+   * @param {module} router
+   */
+  require([
+    'App',
+    './documented-method'], function(App, DocumentedMethod) {
+  
+    // Set collections
+    App.collections = ['allItems', 'classes', 'events', 'methods', 'properties', 'p5.sound'];
+  
+    // Get json API data
+    $.getJSON('data.min.json', function(data) {
+      App.data = data;
+      App.classes = [];
+      App.methods = [];
+      App.properties = [];
+      App.events = [];
+      App.allItems = [];
+      App.sound = { items: [] };
+      App.dom = { items: [] };
+      App.modules = [];
+      App.project = data.project;
+  
+  
+      var modules = data.modules;
+  
+      // Get class items (methods, properties, events)
+      _.each(modules, function(m, idx, array) {
+        App.modules.push(m);
+        if (m.name == "p5.sound") {
+          App.sound.module = m;
+        }
+      });
+  
+  
+      var items = data.classitems;
+      var classes = data.classes;
+  
+      // Get classes
+      _.each(classes, function(c, idx, array) {
+        if (!c.private) {
+          App.classes.push(c);
         }
-
-        // libraries
-        if (el.module === "p5.sound") {
-          App.sound.items.push(el);
+      });
+  
+  
+      // Get class items (methods, properties, events)
+      _.each(items, function(el, idx, array) {
+        if (el.itemtype) {
+          if (el.itemtype === "method") {
+            el = new DocumentedMethod(el);
+            App.methods.push(el);
+            App.allItems.push(el);
+          } else if (el.itemtype === "property") {
+            App.properties.push(el);
+            App.allItems.push(el);
+          } else if (el.itemtype === "event") {
+            App.events.push(el);
+            App.allItems.push(el);
+          }
+  
+          // libraries
+          if (el.module === "p5.sound") {
+            App.sound.items.push(el);
+          }
         }
-      }
-    });
-
-    _.each(App.classes, function(c, idx) {
-      c.items = _.filter(App.allItems, function(it){ return it.class === c.name; });
+      });
+  
+      _.each(App.classes, function(c, idx) {
+        c.items = _.filter(App.allItems, function(it){ return it.class === c.name; });
+      });
+  
+      require(['router']);
     });
-
-    require(['router']);
   });
-});
-
-define("main", function(){});
-
-}());
\ No newline at end of file
+  
+  define("main", function(){});
+  
+  }());
\ No newline at end of file
diff --git a/src/data/data.yml b/src/data/data.yml
index f6e0a9acca..e354d417b0 100644
--- a/src/data/data.yml
+++ b/src/data/data.yml
@@ -1,2 +1,2 @@
 title: p5.js
-version: 1.1.9
+version: 1.3.1
diff --git a/src/templates/pages/reference/assets/Avenir.otf b/src/templates/pages/reference/assets/Avenir.otf
deleted file mode 100644
index 38941ae72f5c9b0d9f3ba46c812778261177698c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 127448
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

diff --git a/src/templates/pages/reference/assets/AvenirNextLTPro-Demi.otf b/src/templates/pages/reference/assets/AvenirNextLTPro-Demi.otf
deleted file mode 100644
index 750b0c599400e4ed4480a40e96fc7691a646d329..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 69940
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


From 59b427d30b3dc80f1f7babc99a8adcb7175e32de Mon Sep 17 00:00:00 2001
From: Sanjay Singh Rajpoot
 <67458417+SanjaySinghRajpoot@users.noreply.github.com>
Date: Tue, 30 Mar 2021 08:59:17 +0530
Subject: [PATCH 08/10] Revert "Updating Files"

This reverts commit 33a4379cd7d43a6a6b7f8c6a359768f2c608ccf5.
---
 src/data/data.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/data/data.yml b/src/data/data.yml
index e354d417b0..ad2433e73d 100644
--- a/src/data/data.yml
+++ b/src/data/data.yml
@@ -1,2 +1,2 @@
 title: p5.js
-version: 1.3.1
+version: 1.2.0

From 7b874ab258980c9fb6a95f89a485b00b1bb68354 Mon Sep 17 00:00:00 2001
From: Sanjay Singh Rajpoot
 <67458417+SanjaySinghRajpoot@users.noreply.github.com>
Date: Tue, 30 Mar 2021 09:00:00 +0530
Subject: [PATCH 09/10] Revert "Files changed"

This reverts commit bd7a6745cf7bcaa3b2088a2090297b9eb6b293b7.
---
 package.json               |    4 +-
 src/assets/js/reference.js | 9530 ++++++++++++++++++------------------
 2 files changed, 4767 insertions(+), 4767 deletions(-)

diff --git a/package.json b/package.json
index 5ae6e6345c..81a56887a2 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,7 @@
     "grunt-file-append": "0.0.7",
     "grunt-html": "^11.1.1",
     "grunt-newer": "^1.3.0",
-    "grunt-postcss": "^0.8.0",
+    "grunt-postcss": "^0.9.0",
     "grunt-serve": "^0.1.6",
     "grunt-shell": "^3.0.1",
     "grunt-uncss": "^0.8.6",
@@ -92,4 +92,4 @@
   "dependencies": {
     "upath": "^1.2.0"
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/js/reference.js b/src/assets/js/reference.js
index 5b4baa0ecd..499651487e 100644
--- a/src/assets/js/reference.js
+++ b/src/assets/js/reference.js
@@ -1,4948 +1,4948 @@
 (function () {
-  // https://github.com/umdjs/umd/blob/master/templates/returnExports.js
-  (function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-      define('documented-method',[], factory);
-    } else if (typeof module === 'object' && module.exports) {
-      module.exports = factory();
-    } else {
-      root.DocumentedMethod = factory();
-    }
-  }(this, function () {
-    function extend(target, src) {
-      Object.keys(src).forEach(function(prop) {
-        target[prop] = src[prop];
-      });
-      return target;
-    }
-  
-    function DocumentedMethod(classitem) {
-      extend(this, classitem);
-  
-      if (this.overloads) {
-        // Make each overload inherit properties from their parent
-        // classitem.
-        this.overloads = this.overloads.map(function(overload) {
-          return extend(Object.create(this), overload);
-        }, this);
-  
-        if (this.params) {
-          throw new Error('params for overloaded methods should be undefined');
-        }
-  
-        this.params = this._getMergedParams();
+// https://github.com/umdjs/umd/blob/master/templates/returnExports.js
+(function (root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define('documented-method',[], factory);
+  } else if (typeof module === 'object' && module.exports) {
+    module.exports = factory();
+  } else {
+    root.DocumentedMethod = factory();
+  }
+}(this, function () {
+  function extend(target, src) {
+    Object.keys(src).forEach(function(prop) {
+      target[prop] = src[prop];
+    });
+    return target;
+  }
+
+  function DocumentedMethod(classitem) {
+    extend(this, classitem);
+
+    if (this.overloads) {
+      // Make each overload inherit properties from their parent
+      // classitem.
+      this.overloads = this.overloads.map(function(overload) {
+        return extend(Object.create(this), overload);
+      }, this);
+
+      if (this.params) {
+        throw new Error('params for overloaded methods should be undefined');
       }
+
+      this.params = this._getMergedParams();
     }
-  
-    DocumentedMethod.prototype = {
-      // Merge parameters across all overloaded versions of this item.
-      _getMergedParams: function() {
-        var paramNames = {};
-        var params = [];
-  
-        this.overloads.forEach(function(overload) {
-          if (!overload.params) {
+  }
+
+  DocumentedMethod.prototype = {
+    // Merge parameters across all overloaded versions of this item.
+    _getMergedParams: function() {
+      var paramNames = {};
+      var params = [];
+
+      this.overloads.forEach(function(overload) {
+        if (!overload.params) {
+          return;
+        }
+        overload.params.forEach(function(param) {
+          if (param.name in paramNames) {
             return;
           }
-          overload.params.forEach(function(param) {
-            if (param.name in paramNames) {
-              return;
-            }
-            paramNames[param.name] = param;
-            params.push(param);
-          });
-        });
-  
-        return params;
-      }
-    };
-  
-    return DocumentedMethod;
-  }));
-  
-  /**
-   * @license RequireJS text 2.0.10 Copyright (c) 2010-2012, The Dojo Foundation All Rights Reserved.
-   * Available via the MIT or new BSD license.
-   * see: http://github.com/requirejs/text for details
-   */
-  /*jslint regexp: true */
-  /*global require, XMLHttpRequest, ActiveXObject,
-    define, window, process, Packages,
-    java, location, Components, FileUtils */
-  
-  define('text',['module'], function (module) {
-      'use strict';
-  
-      var text, fs, Cc, Ci, xpcIsWindows,
-          progIds = ['Msxml2.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.4.0'],
-          xmlRegExp = /^\s*<\?xml(\s)+version=[\'\"](\d)*.(\d)*[\'\"](\s)*\?>/im,
-          bodyRegExp = /<body[^>]*>\s*([\s\S]+)\s*<\/body>/im,
-          hasLocation = typeof location !== 'undefined' && location.href,
-          defaultProtocol = hasLocation && location.protocol && location.protocol.replace(/\:/, ''),
-          defaultHostName = hasLocation && location.hostname,
-          defaultPort = hasLocation && (location.port || undefined),
-          buildMap = {},
-          masterConfig = (module.config && module.config()) || {};
-  
-      text = {
-          version: '2.0.10',
-  
-          strip: function (content) {
-              //Strips <?xml ...?> declarations so that external SVG and XML
-              //documents can be added to a document without worry. Also, if the string
-              //is an HTML document, only the part inside the body tag is returned.
-              if (content) {
-                  content = content.replace(xmlRegExp, "");
-                  var matches = content.match(bodyRegExp);
-                  if (matches) {
-                      content = matches[1];
-                  }
-              } else {
-                  content = "";
-              }
-              return content;
-          },
-  
-          jsEscape: function (content) {
-              return content.replace(/(['\\])/g, '\\$1')
-                  .replace(/[\f]/g, "\\f")
-                  .replace(/[\b]/g, "\\b")
-                  .replace(/[\n]/g, "\\n")
-                  .replace(/[\t]/g, "\\t")
-                  .replace(/[\r]/g, "\\r")
-                  .replace(/[\u2028]/g, "\\u2028")
-                  .replace(/[\u2029]/g, "\\u2029");
-          },
-  
-          createXhr: masterConfig.createXhr || function () {
-              //Would love to dump the ActiveX crap in here. Need IE 6 to die first.
-              var xhr, i, progId;
-              if (typeof XMLHttpRequest !== "undefined") {
-                  return new XMLHttpRequest();
-              } else if (typeof ActiveXObject !== "undefined") {
-                  for (i = 0; i < 3; i += 1) {
-                      progId = progIds[i];
-                      try {
-                          xhr = new ActiveXObject(progId);
-                      } catch (e) {}
-  
-                      if (xhr) {
-                          progIds = [progId];  // so faster next time
-                          break;
-                      }
-                  }
-              }
-  
-              return xhr;
-          },
-  
-          /**
-           * Parses a resource name into its component parts. Resource names
-           * look like: module/name.ext!strip, where the !strip part is
-           * optional.
-           * @param {String} name the resource name
-           * @returns {Object} with properties "moduleName", "ext" and "strip"
-           * where strip is a boolean.
-           */
-          parseName: function (name) {
-              var modName, ext, temp,
-                  strip = false,
-                  index = name.indexOf("."),
-                  isRelative = name.indexOf('./') === 0 ||
-                               name.indexOf('../') === 0;
-  
-              if (index !== -1 && (!isRelative || index > 1)) {
-                  modName = name.substring(0, index);
-                  ext = name.substring(index + 1, name.length);
-              } else {
-                  modName = name;
-              }
-  
-              temp = ext || modName;
-              index = temp.indexOf("!");
-              if (index !== -1) {
-                  //Pull off the strip arg.
-                  strip = temp.substring(index + 1) === "strip";
-                  temp = temp.substring(0, index);
-                  if (ext) {
-                      ext = temp;
-                  } else {
-                      modName = temp;
-                  }
-              }
-  
-              return {
-                  moduleName: modName,
-                  ext: ext,
-                  strip: strip
-              };
-          },
-  
-          xdRegExp: /^((\w+)\:)?\/\/([^\/\\]+)/,
-  
-          /**
-           * Is an URL on another domain. Only works for browser use, returns
-           * false in non-browser environments. Only used to know if an
-           * optimized .js version of a text resource should be loaded
-           * instead.
-           * @param {String} url
-           * @returns Boolean
-           */
-          useXhr: function (url, protocol, hostname, port) {
-              var uProtocol, uHostName, uPort,
-                  match = text.xdRegExp.exec(url);
-              if (!match) {
-                  return true;
-              }
-              uProtocol = match[2];
-              uHostName = match[3];
-  
-              uHostName = uHostName.split(':');
-              uPort = uHostName[1];
-              uHostName = uHostName[0];
-  
-              return (!uProtocol || uProtocol === protocol) &&
-                     (!uHostName || uHostName.toLowerCase() === hostname.toLowerCase()) &&
-                     ((!uPort && !uHostName) || uPort === port);
-          },
-  
-          finishLoad: function (name, strip, content, onLoad) {
-              content = strip ? text.strip(content) : content;
-              if (masterConfig.isBuild) {
-                  buildMap[name] = content;
-              }
-              onLoad(content);
-          },
-  
-          load: function (name, req, onLoad, config) {
-              //Name has format: some.module.filext!strip
-              //The strip part is optional.
-              //if strip is present, then that means only get the string contents
-              //inside a body tag in an HTML string. For XML/SVG content it means
-              //removing the <?xml ...?> declarations so the content can be inserted
-              //into the current doc without problems.
-  
-              // Do not bother with the work if a build and text will
-              // not be inlined.
-              if (config.isBuild && !config.inlineText) {
-                  onLoad();
-                  return;
-              }
-  
-              masterConfig.isBuild = config.isBuild;
-  
-              var parsed = text.parseName(name),
-                  nonStripName = parsed.moduleName +
-                      (parsed.ext ? '.' + parsed.ext : ''),
-                  url = req.toUrl(nonStripName),
-                  useXhr = (masterConfig.useXhr) ||
-                           text.useXhr;
-  
-              // Do not load if it is an empty: url
-              if (url.indexOf('empty:') === 0) {
-                  onLoad();
-                  return;
-              }
-  
-              //Load the text. Use XHR if possible and in a browser.
-              if (!hasLocation || useXhr(url, defaultProtocol, defaultHostName, defaultPort)) {
-                  text.get(url, function (content) {
-                      text.finishLoad(name, parsed.strip, content, onLoad);
-                  }, function (err) {
-                      if (onLoad.error) {
-                          onLoad.error(err);
-                      }
-                  });
-              } else {
-                  //Need to fetch the resource across domains. Assume
-                  //the resource has been optimized into a JS module. Fetch
-                  //by the module name + extension, but do not include the
-                  //!strip part to avoid file system issues.
-                  req([nonStripName], function (content) {
-                      text.finishLoad(parsed.moduleName + '.' + parsed.ext,
-                                      parsed.strip, content, onLoad);
-                  });
-              }
-          },
-  
-          write: function (pluginName, moduleName, write, config) {
-              if (buildMap.hasOwnProperty(moduleName)) {
-                  var content = text.jsEscape(buildMap[moduleName]);
-                  write.asModule(pluginName + "!" + moduleName,
-                                 "define(function () { return '" +
-                                     content +
-                                 "';});\n");
-              }
-          },
-  
-          writeFile: function (pluginName, moduleName, req, write, config) {
-              var parsed = text.parseName(moduleName),
-                  extPart = parsed.ext ? '.' + parsed.ext : '',
-                  nonStripName = parsed.moduleName + extPart,
-                  //Use a '.js' file name so that it indicates it is a
-                  //script that can be loaded across domains.
-                  fileName = req.toUrl(parsed.moduleName + extPart) + '.js';
-  
-              //Leverage own load() method to load plugin value, but only
-              //write out values that do not have the strip argument,
-              //to avoid any potential issues with ! in file names.
-              text.load(nonStripName, req, function (value) {
-                  //Use own write() method to construct full module value.
-                  //But need to create shell that translates writeFile's
-                  //write() to the right interface.
-                  var textWrite = function (contents) {
-                      return write(fileName, contents);
-                  };
-                  textWrite.asModule = function (moduleName, contents) {
-                      return write.asModule(moduleName, fileName, contents);
-                  };
-  
-                  text.write(pluginName, nonStripName, textWrite, config);
-              }, config);
-          }
-      };
-  
-      if (masterConfig.env === 'node' || (!masterConfig.env &&
-              typeof process !== "undefined" &&
-              process.versions &&
-              !!process.versions.node &&
-              !process.versions['node-webkit'])) {
-          //Using special require.nodeRequire, something added by r.js.
-          fs = require.nodeRequire('fs');
-  
-          text.get = function (url, callback, errback) {
-              try {
-                  var file = fs.readFileSync(url, 'utf8');
-                  //Remove BOM (Byte Mark Order) from utf8 files if it is there.
-                  if (file.indexOf('\uFEFF') === 0) {
-                      file = file.substring(1);
-                  }
-                  callback(file);
-              } catch (e) {
-                  errback(e);
-              }
-          };
-      } else if (masterConfig.env === 'xhr' || (!masterConfig.env &&
-              text.createXhr())) {
-          text.get = function (url, callback, errback, headers) {
-              var xhr = text.createXhr(), header;
-              xhr.open('GET', url, true);
-  
-              //Allow plugins direct access to xhr headers
-              if (headers) {
-                  for (header in headers) {
-                      if (headers.hasOwnProperty(header)) {
-                          xhr.setRequestHeader(header.toLowerCase(), headers[header]);
-                      }
-                  }
-              }
-  
-              //Allow overrides specified in config
-              if (masterConfig.onXhr) {
-                  masterConfig.onXhr(xhr, url);
-              }
-  
-              xhr.onreadystatechange = function (evt) {
-                  var status, err;
-                  //Do not explicitly handle errors, those should be
-                  //visible via console output in the browser.
-                  if (xhr.readyState === 4) {
-                      status = xhr.status;
-                      if (status > 399 && status < 600) {
-                          //An http 4xx or 5xx error. Signal an error.
-                          err = new Error(url + ' HTTP status: ' + status);
-                          err.xhr = xhr;
-                          errback(err);
-                      } else {
-                          callback(xhr.responseText);
-                      }
-  
-                      if (masterConfig.onXhrComplete) {
-                          masterConfig.onXhrComplete(xhr, url);
-                      }
-                  }
-              };
-              xhr.send(null);
-          };
-      } else if (masterConfig.env === 'rhino' || (!masterConfig.env &&
-              typeof Packages !== 'undefined' && typeof java !== 'undefined')) {
-          //Why Java, why is this so awkward?
-          text.get = function (url, callback) {
-              var stringBuffer, line,
-                  encoding = "utf-8",
-                  file = new java.io.File(url),
-                  lineSeparator = java.lang.System.getProperty("line.separator"),
-                  input = new java.io.BufferedReader(new java.io.InputStreamReader(new java.io.FileInputStream(file), encoding)),
-                  content = '';
-              try {
-                  stringBuffer = new java.lang.StringBuffer();
-                  line = input.readLine();
-  
-                  // Byte Order Mark (BOM) - The Unicode Standard, version 3.0, page 324
-                  // http://www.unicode.org/faq/utf_bom.html
-  
-                  // Note that when we use utf-8, the BOM should appear as "EF BB BF", but it doesn't due to this bug in the JDK:
-                  // http://bugs.sun.com/bugdatabase/view_bug.do?bug_id=4508058
-                  if (line && line.length() && line.charAt(0) === 0xfeff) {
-                      // Eat the BOM, since we've already found the encoding on this file,
-                      // and we plan to concatenating this buffer with others; the BOM should
-                      // only appear at the top of a file.
-                      line = line.substring(1);
-                  }
-  
-                  if (line !== null) {
-                      stringBuffer.append(line);
-                  }
-  
-                  while ((line = input.readLine()) !== null) {
-                      stringBuffer.append(lineSeparator);
-                      stringBuffer.append(line);
-                  }
-                  //Make sure we return a JavaScript string and not a Java string.
-                  content = String(stringBuffer.toString()); //String
-              } finally {
-                  input.close();
-              }
-              callback(content);
-          };
-      } else if (masterConfig.env === 'xpconnect' || (!masterConfig.env &&
-              typeof Components !== 'undefined' && Components.classes &&
-              Components.interfaces)) {
-          //Avert your gaze!
-          Cc = Components.classes,
-          Ci = Components.interfaces;
-          Components.utils['import']('resource://gre/modules/FileUtils.jsm');
-          xpcIsWindows = ('@mozilla.org/windows-registry-key;1' in Cc);
-  
-          text.get = function (url, callback) {
-              var inStream, convertStream, fileObj,
-                  readData = {};
-  
-              if (xpcIsWindows) {
-                  url = url.replace(/\//g, '\\');
-              }
-  
-              fileObj = new FileUtils.File(url);
-  
-              //XPCOM, you so crazy
-              try {
-                  inStream = Cc['@mozilla.org/network/file-input-stream;1']
-                             .createInstance(Ci.nsIFileInputStream);
-                  inStream.init(fileObj, 1, 0, false);
-  
-                  convertStream = Cc['@mozilla.org/intl/converter-input-stream;1']
-                                  .createInstance(Ci.nsIConverterInputStream);
-                  convertStream.init(inStream, "utf-8", inStream.available(),
-                  Ci.nsIConverterInputStream.DEFAULT_REPLACEMENT_CHARACTER);
-  
-                  convertStream.readString(inStream.available(), readData);
-                  convertStream.close();
-                  inStream.close();
-                  callback(readData.value);
-              } catch (e) {
-                  throw new Error((fileObj && fileObj.path || '') + ': ' + e);
-              }
-          };
-      }
-      return text;
-  });
-  
-  
-  define('text!tpl/search.html',[],function () { return '<h2 class="sr-only">search</h2>\n<form>\n  <input id="search_reference_field" type="text" class="<%=className%>" value="" placeholder="<%=placeholder%>" aria-label="search reference">\n  <label class="sr-only" for="search_reference_field">Search reference</label>\n</form>\n\n';});
-  
-  
-  define('text!tpl/search_suggestion.html',[],function () { return '<p id="index-<%=idx%>" class="search-suggestion">\n\n  <strong><%=name%></strong>\n\n  <span class="small">\n    <% if (final) { %>\n    constant\n    <% } else if (itemtype) { %>\n    <%=itemtype%> \n    <% } %>\n\n    <% if (className) { %>\n    in <strong><%=className%></strong>\n    <% } %>\n\n    <% if (typeof is_constructor !== \'undefined\' && is_constructor) { %>\n    <strong><span class="glyphicon glyphicon-star"></span> constructor</strong>\n    <% } %>\n  </span>\n\n</p>';});
-  
-  /*!
-   * typeahead.js 0.10.2
-   * https://github.com/twitter/typeahead.js
-   * Copyright 2013-2014 Twitter, Inc. and other contributors; Licensed MIT
-   */
-  define('typeahead',[], function() {
-  
-  //(function($) {
-  
-  
-      var _ = {
-          isMsie: function() {
-              return /(msie|trident)/i.test(navigator.userAgent) ? navigator.userAgent.match(/(msie |rv:)(\d+(.\d+)?)/i)[2] : false;
-          },
-          isBlankString: function(str) {
-              return !str || /^\s*$/.test(str);
-          },
-          escapeRegExChars: function(str) {
-              return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
-          },
-          isString: function(obj) {
-              return typeof obj === "string";
-          },
-          isNumber: function(obj) {
-              return typeof obj === "number";
-          },
-          isArray: $.isArray,
-          isFunction: $.isFunction,
-          isObject: $.isPlainObject,
-          isUndefined: function(obj) {
-              return typeof obj === "undefined";
-          },
-          bind: $.proxy,
-          each: function(collection, cb) {
-              $.each(collection, reverseArgs);
-              function reverseArgs(index, value) {
-                  return cb(value, index);
-              }
-          },
-          map: $.map,
-          filter: $.grep,
-          every: function(obj, test) {
-              var result = true;
-              if (!obj) {
-                  return result;
-              }
-              $.each(obj, function(key, val) {
-                  if (!(result = test.call(null, val, key, obj))) {
-                      return false;
-                  }
-              });
-              return !!result;
-          },
-          some: function(obj, test) {
-              var result = false;
-              if (!obj) {
-                  return result;
-              }
-              $.each(obj, function(key, val) {
-                  if (result = test.call(null, val, key, obj)) {
-                      return false;
-                  }
-              });
-              return !!result;
-          },
-          mixin: $.extend,
-          getUniqueId: function() {
-              var counter = 0;
-              return function() {
-                  return counter++;
-              };
-          }(),
-          templatify: function templatify(obj) {
-              return $.isFunction(obj) ? obj : template;
-              function template() {
-                  return String(obj);
-              }
-          },
-          defer: function(fn) {
-              setTimeout(fn, 0);
-          },
-          debounce: function(func, wait, immediate) {
-              var timeout, result;
-              return function() {
-                  var context = this, args = arguments, later, callNow;
-                  later = function() {
-                      timeout = null;
-                      if (!immediate) {
-                          result = func.apply(context, args);
-                      }
-                  };
-                  callNow = immediate && !timeout;
-                  clearTimeout(timeout);
-                  timeout = setTimeout(later, wait);
-                  if (callNow) {
-                      result = func.apply(context, args);
-                  }
-                  return result;
-              };
-          },
-          throttle: function(func, wait) {
-              var context, args, timeout, result, previous, later;
-              previous = 0;
-              later = function() {
-                  previous = new Date();
-                  timeout = null;
-                  result = func.apply(context, args);
-              };
-              return function() {
-                  var now = new Date(), remaining = wait - (now - previous);
-                  context = this;
-                  args = arguments;
-                  if (remaining <= 0) {
-                      clearTimeout(timeout);
-                      timeout = null;
-                      previous = now;
-                      result = func.apply(context, args);
-                  } else if (!timeout) {
-                      timeout = setTimeout(later, remaining);
-                  }
-                  return result;
-              };
-          },
-          noop: function() {}
-      };
-      var VERSION = "0.10.2";
-      var tokenizers = function(root) {
-          return {
-              nonword: nonword,
-              whitespace: whitespace,
-              obj: {
-                  nonword: getObjTokenizer(nonword),
-                  whitespace: getObjTokenizer(whitespace)
-              }
-          };
-          function whitespace(s) {
-              return s.split(/\s+/);
-          }
-          function nonword(s) {
-              return s.split(/\W+/);
-          }
-          function getObjTokenizer(tokenizer) {
-              return function setKey(key) {
-                  return function tokenize(o) {
-                      return tokenizer(o[key]);
-                  };
-              };
-          }
-      }();
-      var LruCache = function() {
-          function LruCache(maxSize) {
-              this.maxSize = maxSize || 100;
-              this.size = 0;
-              this.hash = {};
-              this.list = new List();
-          }
-          _.mixin(LruCache.prototype, {
-              set: function set(key, val) {
-                  var tailItem = this.list.tail, node;
-                  if (this.size >= this.maxSize) {
-                      this.list.remove(tailItem);
-                      delete this.hash[tailItem.key];
-                  }
-                  if (node = this.hash[key]) {
-                      node.val = val;
-                      this.list.moveToFront(node);
-                  } else {
-                      node = new Node(key, val);
-                      this.list.add(node);
-                      this.hash[key] = node;
-                      this.size++;
-                  }
-              },
-              get: function get(key) {
-                  var node = this.hash[key];
-                  if (node) {
-                      this.list.moveToFront(node);
-                      return node.val;
-                  }
-              }
-          });
-          function List() {
-              this.head = this.tail = null;
-          }
-          _.mixin(List.prototype, {
-              add: function add(node) {
-                  if (this.head) {
-                      node.next = this.head;
-                      this.head.prev = node;
-                  }
-                  this.head = node;
-                  this.tail = this.tail || node;
-              },
-              remove: function remove(node) {
-                  node.prev ? node.prev.next = node.next : this.head = node.next;
-                  node.next ? node.next.prev = node.prev : this.tail = node.prev;
-              },
-              moveToFront: function(node) {
-                  this.remove(node);
-                  this.add(node);
-              }
-          });
-          function Node(key, val) {
-              this.key = key;
-              this.val = val;
-              this.prev = this.next = null;
-          }
-          return LruCache;
-      }();
-      var PersistentStorage = function() {
-          var ls, methods;
-          try {
-              ls = window.localStorage;
-              ls.setItem("~~~", "!");
-              ls.removeItem("~~~");
-          } catch (err) {
-              ls = null;
-          }
-          function PersistentStorage(namespace) {
-              this.prefix = [ "__", namespace, "__" ].join("");
-              this.ttlKey = "__ttl__";
-              this.keyMatcher = new RegExp("^" + this.prefix);
-          }
-          if (ls && window.JSON) {
-              methods = {
-                  _prefix: function(key) {
-                      return this.prefix + key;
-                  },
-                  _ttlKey: function(key) {
-                      return this._prefix(key) + this.ttlKey;
-                  },
-                  get: function(key) {
-                      if (this.isExpired(key)) {
-                          this.remove(key);
-                      }
-                      return decode(ls.getItem(this._prefix(key)));
-                  },
-                  set: function(key, val, ttl) {
-                      if (_.isNumber(ttl)) {
-                          ls.setItem(this._ttlKey(key), encode(now() + ttl));
-                      } else {
-                          ls.removeItem(this._ttlKey(key));
-                      }
-                      return ls.setItem(this._prefix(key), encode(val));
-                  },
-                  remove: function(key) {
-                      ls.removeItem(this._ttlKey(key));
-                      ls.removeItem(this._prefix(key));
-                      return this;
-                  },
-                  clear: function() {
-                      var i, key, keys = [], len = ls.length;
-                      for (i = 0; i < len; i++) {
-                          if ((key = ls.key(i)).match(this.keyMatcher)) {
-                              keys.push(key.replace(this.keyMatcher, ""));
-                          }
-                      }
-                      for (i = keys.length; i--; ) {
-                          this.remove(keys[i]);
-                      }
-                      return this;
-                  },
-                  isExpired: function(key) {
-                      var ttl = decode(ls.getItem(this._ttlKey(key)));
-                      return _.isNumber(ttl) && now() > ttl ? true : false;
-                  }
-              };
-          } else {
-              methods = {
-                  get: _.noop,
-                  set: _.noop,
-                  remove: _.noop,
-                  clear: _.noop,
-                  isExpired: _.noop
-              };
-          }
-          _.mixin(PersistentStorage.prototype, methods);
-          return PersistentStorage;
-          function now() {
-              return new Date().getTime();
-          }
-          function encode(val) {
-              return JSON.stringify(_.isUndefined(val) ? null : val);
-          }
-          function decode(val) {
-              return JSON.parse(val);
-          }
-      }();
-      var Transport = function() {
-          var pendingRequestsCount = 0, pendingRequests = {}, maxPendingRequests = 6, requestCache = new LruCache(10);
-          function Transport(o) {
-              o = o || {};
-              this._send = o.transport ? callbackToDeferred(o.transport) : $.ajax;
-              this._get = o.rateLimiter ? o.rateLimiter(this._get) : this._get;
-          }
-          Transport.setMaxPendingRequests = function setMaxPendingRequests(num) {
-              maxPendingRequests = num;
-          };
-          Transport.resetCache = function clearCache() {
-              requestCache = new LruCache(10);
-          };
-          _.mixin(Transport.prototype, {
-              _get: function(url, o, cb) {
-                  var that = this, jqXhr;
-                  if (jqXhr = pendingRequests[url]) {
-                      jqXhr.done(done).fail(fail);
-                  } else if (pendingRequestsCount < maxPendingRequests) {
-                      pendingRequestsCount++;
-                      pendingRequests[url] = this._send(url, o).done(done).fail(fail).always(always);
-                  } else {
-                      this.onDeckRequestArgs = [].slice.call(arguments, 0);
-                  }
-                  function done(resp) {
-                      cb && cb(null, resp);
-                      requestCache.set(url, resp);
-                  }
-                  function fail() {
-                      cb && cb(true);
-                  }
-                  function always() {
-                      pendingRequestsCount--;
-                      delete pendingRequests[url];
-                      if (that.onDeckRequestArgs) {
-                          that._get.apply(that, that.onDeckRequestArgs);
-                          that.onDeckRequestArgs = null;
-                      }
-                  }
-              },
-              get: function(url, o, cb) {
-                  var resp;
-                  if (_.isFunction(o)) {
-                      cb = o;
-                      o = {};
-                  }
-                  if (resp = requestCache.get(url)) {
-                      _.defer(function() {
-                          cb && cb(null, resp);
-                      });
-                  } else {
-                      this._get(url, o, cb);
-                  }
-                  return !!resp;
-              }
-          });
-          return Transport;
-          function callbackToDeferred(fn) {
-              return function customSendWrapper(url, o) {
-                  var deferred = $.Deferred();
-                  fn(url, o, onSuccess, onError);
-                  return deferred;
-                  function onSuccess(resp) {
-                      _.defer(function() {
-                          deferred.resolve(resp);
-                      });
-                  }
-                  function onError(err) {
-                      _.defer(function() {
-                          deferred.reject(err);
-                      });
-                  }
-              };
-          }
-      }();
-      var SearchIndex = function() {
-          function SearchIndex(o) {
-              o = o || {};
-              if (!o.datumTokenizer || !o.queryTokenizer) {
-                  $.error("datumTokenizer and queryTokenizer are both required");
-              }
-              this.datumTokenizer = o.datumTokenizer;
-              this.queryTokenizer = o.queryTokenizer;
-              this.reset();
-          }
-          _.mixin(SearchIndex.prototype, {
-              bootstrap: function bootstrap(o) {
-                  this.datums = o.datums;
-                  this.trie = o.trie;
-              },
-              add: function(data) {
-                  var that = this;
-                  data = _.isArray(data) ? data : [ data ];
-                  _.each(data, function(datum) {
-                      var id, tokens;
-                      id = that.datums.push(datum) - 1;
-                      tokens = normalizeTokens(that.datumTokenizer(datum));
-                      _.each(tokens, function(token) {
-                          var node, chars, ch;
-                          node = that.trie;
-                          chars = token.split("");
-                          while (ch = chars.shift()) {
-                              node = node.children[ch] || (node.children[ch] = newNode());
-                              node.ids.push(id);
-                          }
-                      });
-                  });
-              },
-              get: function get(query) {
-                  var that = this, tokens, matches;
-                  tokens = normalizeTokens(this.queryTokenizer(query));
-                  _.each(tokens, function(token) {
-                      var node, chars, ch, ids;
-                      if (matches && matches.length === 0) {
-                          return false;
-                      }
-                      node = that.trie;
-                      chars = token.split("");
-                      while (node && (ch = chars.shift())) {
-                          node = node.children[ch];
-                      }
-                      if (node && chars.length === 0) {
-                          ids = node.ids.slice(0);
-                          matches = matches ? getIntersection(matches, ids) : ids;
-                      } else {
-                          matches = [];
-                          return false;
-                      }
-                  });
-                  return matches ? _.map(unique(matches), function(id) {
-                      return that.datums[id];
-                  }) : [];
-              },
-              reset: function reset() {
-                  this.datums = [];
-                  this.trie = newNode();
-              },
-              serialize: function serialize() {
-                  return {
-                      datums: this.datums,
-                      trie: this.trie
-                  };
-              }
-          });
-          return SearchIndex;
-          function normalizeTokens(tokens) {
-              tokens = _.filter(tokens, function(token) {
-                  return !!token;
-              });
-              tokens = _.map(tokens, function(token) {
-                  return token.toLowerCase();
-              });
-              return tokens;
-          }
-          function newNode() {
-              return {
-                  ids: [],
-                  children: {}
-              };
-          }
-          function unique(array) {
-              var seen = {}, uniques = [];
-              for (var i = 0; i < array.length; i++) {
-                  if (!seen[array[i]]) {
-                      seen[array[i]] = true;
-                      uniques.push(array[i]);
-                  }
-              }
-              return uniques;
-          }
-          function getIntersection(arrayA, arrayB) {
-              var ai = 0, bi = 0, intersection = [];
-              arrayA = arrayA.sort(compare);
-              arrayB = arrayB.sort(compare);
-              while (ai < arrayA.length && bi < arrayB.length) {
-                  if (arrayA[ai] < arrayB[bi]) {
-                      ai++;
-                  } else if (arrayA[ai] > arrayB[bi]) {
-                      bi++;
-                  } else {
-                      intersection.push(arrayA[ai]);
-                      ai++;
-                      bi++;
-                  }
-              }
-              return intersection;
-              function compare(a, b) {
-                  return a - b;
-              }
-          }
-      }();
-      var oParser = function() {
-          return {
-              local: getLocal,
-              prefetch: getPrefetch,
-              remote: getRemote
-          };
-          function getLocal(o) {
-              return o.local || null;
-          }
-          function getPrefetch(o) {
-              var prefetch, defaults;
-              defaults = {
-                  url: null,
-                  thumbprint: "",
-                  ttl: 24 * 60 * 60 * 1e3,
-                  filter: null,
-                  ajax: {}
-              };
-              if (prefetch = o.prefetch || null) {
-                  prefetch = _.isString(prefetch) ? {
-                      url: prefetch
-                  } : prefetch;
-                  prefetch = _.mixin(defaults, prefetch);
-                  prefetch.thumbprint = VERSION + prefetch.thumbprint;
-                  prefetch.ajax.type = prefetch.ajax.type || "GET";
-                  prefetch.ajax.dataType = prefetch.ajax.dataType || "json";
-                  !prefetch.url && $.error("prefetch requires url to be set");
-              }
-              return prefetch;
-          }
-          function getRemote(o) {
-              var remote, defaults;
-              defaults = {
-                  url: null,
-                  wildcard: "%QUERY",
-                  replace: null,
-                  rateLimitBy: "debounce",
-                  rateLimitWait: 300,
-                  send: null,
-                  filter: null,
-                  ajax: {}
-              };
-              if (remote = o.remote || null) {
-                  remote = _.isString(remote) ? {
-                      url: remote
-                  } : remote;
-                  remote = _.mixin(defaults, remote);
-                  remote.rateLimiter = /^throttle$/i.test(remote.rateLimitBy) ? byThrottle(remote.rateLimitWait) : byDebounce(remote.rateLimitWait);
-                  remote.ajax.type = remote.ajax.type || "GET";
-                  remote.ajax.dataType = remote.ajax.dataType || "json";
-                  delete remote.rateLimitBy;
-                  delete remote.rateLimitWait;
-                  !remote.url && $.error("remote requires url to be set");
-              }
-              return remote;
-              function byDebounce(wait) {
-                  return function(fn) {
-                      return _.debounce(fn, wait);
-                  };
-              }
-              function byThrottle(wait) {
-                  return function(fn) {
-                      return _.throttle(fn, wait);
-                  };
-              }
-          }
-      }();
-      (function(root) {
-          var old, keys;
-          old = root.Bloodhound;
-          keys = {
-              data: "data",
-              protocol: "protocol",
-              thumbprint: "thumbprint"
-          };
-          root.Bloodhound = Bloodhound;
-          function Bloodhound(o) {
-              if (!o || !o.local && !o.prefetch && !o.remote) {
-                  $.error("one of local, prefetch, or remote is required");
-              }
-              this.limit = o.limit || 5;
-              this.sorter = getSorter(o.sorter);
-              this.dupDetector = o.dupDetector || ignoreDuplicates;
-              this.local = oParser.local(o);
-              this.prefetch = oParser.prefetch(o);
-              this.remote = oParser.remote(o);
-              this.cacheKey = this.prefetch ? this.prefetch.cacheKey || this.prefetch.url : null;
-              this.index = new SearchIndex({
-                  datumTokenizer: o.datumTokenizer,
-                  queryTokenizer: o.queryTokenizer
-              });
-              this.storage = this.cacheKey ? new PersistentStorage(this.cacheKey) : null;
-          }
-          Bloodhound.noConflict = function noConflict() {
-              root.Bloodhound = old;
-              return Bloodhound;
-          };
-          Bloodhound.tokenizers = tokenizers;
-          _.mixin(Bloodhound.prototype, {
-              _loadPrefetch: function loadPrefetch(o) {
-                  var that = this, serialized, deferred;
-                  if (serialized = this._readFromStorage(o.thumbprint)) {
-                      this.index.bootstrap(serialized);
-                      deferred = $.Deferred().resolve();
-                  } else {
-                      deferred = $.ajax(o.url, o.ajax).done(handlePrefetchResponse);
-                  }
-                  return deferred;
-                  function handlePrefetchResponse(resp) {
-                      that.clear();
-                      that.add(o.filter ? o.filter(resp) : resp);
-                      that._saveToStorage(that.index.serialize(), o.thumbprint, o.ttl);
-                  }
-              },
-              _getFromRemote: function getFromRemote(query, cb) {
-                  var that = this, url, uriEncodedQuery;
-                  query = query || "";
-                  uriEncodedQuery = encodeURIComponent(query);
-                  url = this.remote.replace ? this.remote.replace(this.remote.url, query) : this.remote.url.replace(this.remote.wildcard, uriEncodedQuery);
-                  return this.transport.get(url, this.remote.ajax, handleRemoteResponse);
-                  function handleRemoteResponse(err, resp) {
-                      err ? cb([]) : cb(that.remote.filter ? that.remote.filter(resp) : resp);
-                  }
-              },
-              _saveToStorage: function saveToStorage(data, thumbprint, ttl) {
-                  if (this.storage) {
-                      this.storage.set(keys.data, data, ttl);
-                      this.storage.set(keys.protocol, location.protocol, ttl);
-                      this.storage.set(keys.thumbprint, thumbprint, ttl);
-                  }
-              },
-              _readFromStorage: function readFromStorage(thumbprint) {
-                  var stored = {}, isExpired;
-                  if (this.storage) {
-                      stored.data = this.storage.get(keys.data);
-                      stored.protocol = this.storage.get(keys.protocol);
-                      stored.thumbprint = this.storage.get(keys.thumbprint);
-                  }
-                  isExpired = stored.thumbprint !== thumbprint || stored.protocol !== location.protocol;
-                  return stored.data && !isExpired ? stored.data : null;
-              },
-              _initialize: function initialize() {
-                  var that = this, local = this.local, deferred;
-                  deferred = this.prefetch ? this._loadPrefetch(this.prefetch) : $.Deferred().resolve();
-                  local && deferred.done(addLocalToIndex);
-                  this.transport = this.remote ? new Transport(this.remote) : null;
-                  return this.initPromise = deferred.promise();
-                  function addLocalToIndex() {
-                      that.add(_.isFunction(local) ? local() : local);
-                  }
-              },
-              initialize: function initialize(force) {
-                  return !this.initPromise || force ? this._initialize() : this.initPromise;
-              },
-              add: function add(data) {
-                  this.index.add(data);
-              },
-              get: function get(query, cb) {
-                  var that = this, matches = [], cacheHit = false;
-                  matches = this.index.get(query);
-                  matches = this.sorter(matches).slice(0, this.limit);
-                  if (matches.length < this.limit && this.transport) {
-                      cacheHit = this._getFromRemote(query, returnRemoteMatches);
-                  }
-                  if (!cacheHit) {
-                      (matches.length > 0 || !this.transport) && cb && cb(matches);
-                  }
-                  function returnRemoteMatches(remoteMatches) {
-                      var matchesWithBackfill = matches.slice(0);
-                      _.each(remoteMatches, function(remoteMatch) {
-                          var isDuplicate;
-                          isDuplicate = _.some(matchesWithBackfill, function(match) {
-                              return that.dupDetector(remoteMatch, match);
-                          });
-                          !isDuplicate && matchesWithBackfill.push(remoteMatch);
-                          return matchesWithBackfill.length < that.limit;
-                      });
-                      cb && cb(that.sorter(matchesWithBackfill));
-                  }
-              },
-              clear: function clear() {
-                  this.index.reset();
-              },
-              clearPrefetchCache: function clearPrefetchCache() {
-                  this.storage && this.storage.clear();
-              },
-              clearRemoteCache: function clearRemoteCache() {
-                  this.transport && Transport.resetCache();
-              },
-              ttAdapter: function ttAdapter() {
-                  return _.bind(this.get, this);
-              }
-          });
-          return Bloodhound;
-          function getSorter(sortFn) {
-              return _.isFunction(sortFn) ? sort : noSort;
-              function sort(array) {
-                  return array.sort(sortFn);
-              }
-              function noSort(array) {
-                  return array;
-              }
-          }
-          function ignoreDuplicates() {
-              return false;
-          }
-      })(this);
-      var html = {
-          wrapper: '<span class="twitter-typeahead"></span>',
-          dropdown: '<span class="tt-dropdown-menu"></span>',
-          dataset: '<div class="tt-dataset-%CLASS%"></div>',
-          suggestions: '<span class="tt-suggestions"></span>',
-          suggestion: '<div class="tt-suggestion"></div>'
-      };
-      var css = {
-          wrapper: {
-              position: "relative",
-              display: "inline-block"
-          },
-          hint: {
-              position: "absolute",
-              top: "0",
-              left: "0",
-              borderColor: "transparent",
-              boxShadow: "none"
-          },
-          input: {
-              position: "relative",
-              verticalAlign: "top",
-              backgroundColor: "transparent"
-          },
-          inputWithNoHint: {
-              position: "relative",
-              verticalAlign: "top"
-          },
-          dropdown: {
-              position: "absolute",
-              top: "100%",
-              left: "0",
-              zIndex: "100",
-              display: "none"
-          },
-          suggestions: {
-              display: "block"
-          },
-          suggestion: {
-              whiteSpace: "nowrap",
-              cursor: "pointer"
-          },
-          suggestionChild: {
-              whiteSpace: "normal"
-          },
-          ltr: {
-              left: "0",
-              right: "auto"
-          },
-          rtl: {
-              left: "auto",
-              right: " 0"
-          }
-      };
-      if (_.isMsie()) {
-          _.mixin(css.input, {
-              backgroundImage: "url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)"
-          });
-      }
-      if (_.isMsie() && _.isMsie() <= 7) {
-          _.mixin(css.input, {
-              marginTop: "-1px"
-          });
-      }
-      var EventBus = function() {
-          var namespace = "typeahead:";
-          function EventBus(o) {
-              if (!o || !o.el) {
-                  $.error("EventBus initialized without el");
-              }
-              this.$el = $(o.el);
-          }
-          _.mixin(EventBus.prototype, {
-              trigger: function(type) {
-                  var args = [].slice.call(arguments, 1);
-                  this.$el.trigger(namespace + type, args);
-              }
-          });
-          return EventBus;
-      }();
-      var EventEmitter = function() {
-          var splitter = /\s+/, nextTick = getNextTick();
-          return {
-              onSync: onSync,
-              onAsync: onAsync,
-              off: off,
-              trigger: trigger
-          };
-          function on(method, types, cb, context) {
-              var type;
-              if (!cb) {
-                  return this;
-              }
-              types = types.split(splitter);
-              cb = context ? bindContext(cb, context) : cb;
-              this._callbacks = this._callbacks || {};
-              while (type = types.shift()) {
-                  this._callbacks[type] = this._callbacks[type] || {
-                      sync: [],
-                      async: []
-                  };
-                  this._callbacks[type][method].push(cb);
-              }
-              return this;
-          }
-          function onAsync(types, cb, context) {
-              return on.call(this, "async", types, cb, context);
-          }
-          function onSync(types, cb, context) {
-              return on.call(this, "sync", types, cb, context);
-          }
-          function off(types) {
-              var type;
-              if (!this._callbacks) {
-                  return this;
-              }
-              types = types.split(splitter);
-              while (type = types.shift()) {
-                  delete this._callbacks[type];
-              }
-              return this;
-          }
-          function trigger(types) {
-              var type, callbacks, args, syncFlush, asyncFlush;
-              if (!this._callbacks) {
-                  return this;
-              }
-              types = types.split(splitter);
-              args = [].slice.call(arguments, 1);
-              while ((type = types.shift()) && (callbacks = this._callbacks[type])) {
-                  syncFlush = getFlush(callbacks.sync, this, [ type ].concat(args));
-                  asyncFlush = getFlush(callbacks.async, this, [ type ].concat(args));
-                  syncFlush() && nextTick(asyncFlush);
-              }
-              return this;
-          }
-          function getFlush(callbacks, context, args) {
-              return flush;
-              function flush() {
-                  var cancelled;
-                  for (var i = 0; !cancelled && i < callbacks.length; i += 1) {
-                      cancelled = callbacks[i].apply(context, args) === false;
-                  }
-                  return !cancelled;
-              }
-          }
-          function getNextTick() {
-              var nextTickFn;
-              if (window.setImmediate) {
-                  nextTickFn = function nextTickSetImmediate(fn) {
-                      setImmediate(function() {
-                          fn();
-                      });
-                  };
-              } else {
-                  nextTickFn = function nextTickSetTimeout(fn) {
-                      setTimeout(function() {
-                          fn();
-                      }, 0);
-                  };
-              }
-              return nextTickFn;
-          }
-          function bindContext(fn, context) {
-              return fn.bind ? fn.bind(context) : function() {
-                  fn.apply(context, [].slice.call(arguments, 0));
-              };
-          }
-      }();
-      var highlight = function(doc) {
-          var defaults = {
-              node: null,
-              pattern: null,
-              tagName: "strong",
-              className: null,
-              wordsOnly: false,
-              caseSensitive: false
-          };
-          return function hightlight(o) {
-              var regex;
-              o = _.mixin({}, defaults, o);
-              if (!o.node || !o.pattern) {
-                  return;
-              }
-              o.pattern = _.isArray(o.pattern) ? o.pattern : [ o.pattern ];
-              regex = getRegex(o.pattern, o.caseSensitive, o.wordsOnly);
-              traverse(o.node, hightlightTextNode);
-              function hightlightTextNode(textNode) {
-                  var match, patternNode;
-                  if (match = regex.exec(textNode.data)) {
-                      wrapperNode = doc.createElement(o.tagName);
-                      o.className && (wrapperNode.className = o.className);
-                      patternNode = textNode.splitText(match.index);
-                      patternNode.splitText(match[0].length);
-                      wrapperNode.appendChild(patternNode.cloneNode(true));
-                      textNode.parentNode.replaceChild(wrapperNode, patternNode);
-                  }
-                  return !!match;
-              }
-              function traverse(el, hightlightTextNode) {
-                  var childNode, TEXT_NODE_TYPE = 3;
-                  for (var i = 0; i < el.childNodes.length; i++) {
-                      childNode = el.childNodes[i];
-                      if (childNode.nodeType === TEXT_NODE_TYPE) {
-                          i += hightlightTextNode(childNode) ? 1 : 0;
-                      } else {
-                          traverse(childNode, hightlightTextNode);
-                      }
-                  }
-              }
-          };
-          function getRegex(patterns, caseSensitive, wordsOnly) {
-              var escapedPatterns = [], regexStr;
-              for (var i = 0; i < patterns.length; i++) {
-                  escapedPatterns.push(_.escapeRegExChars(patterns[i]));
-              }
-              regexStr = wordsOnly ? "\\b(" + escapedPatterns.join("|") + ")\\b" : "(" + escapedPatterns.join("|") + ")";
-              return caseSensitive ? new RegExp(regexStr) : new RegExp(regexStr, "i");
-          }
-      }(window.document);
-      var Input = function() {
-          var specialKeyCodeMap;
-          specialKeyCodeMap = {
-              9: "tab",
-              27: "esc",
-              37: "left",
-              39: "right",
-              13: "enter",
-              38: "up",
-              40: "down"
-          };
-          function Input(o) {
-              var that = this, onBlur, onFocus, onKeydown, onInput;
-              o = o || {};
-              if (!o.input) {
-                  $.error("input is missing");
-              }
-              onBlur = _.bind(this._onBlur, this);
-              onFocus = _.bind(this._onFocus, this);
-              onKeydown = _.bind(this._onKeydown, this);
-              onInput = _.bind(this._onInput, this);
-              this.$hint = $(o.hint);
-              this.$input = $(o.input).on("blur.tt", onBlur).on("focus.tt", onFocus).on("keydown.tt", onKeydown);
-              if (this.$hint.length === 0) {
-                  this.setHint = this.getHint = this.clearHint = this.clearHintIfInvalid = _.noop;
-              }
-              if (!_.isMsie()) {
-                  this.$input.on("input.tt", onInput);
-              } else {
-                  this.$input.on("keydown.tt keypress.tt cut.tt paste.tt", function($e) {
-                      if (specialKeyCodeMap[$e.which || $e.keyCode]) {
-                          return;
-                      }
-                      _.defer(_.bind(that._onInput, that, $e));
-                  });
-              }
-              this.query = this.$input.val();
-              this.$overflowHelper = buildOverflowHelper(this.$input);
-          }
-          Input.normalizeQuery = function(str) {
-              return (str || "").replace(/^\s*/g, "").replace(/\s{2,}/g, " ");
-          };
-          _.mixin(Input.prototype, EventEmitter, {
-              _onBlur: function onBlur() {
-                  this.resetInputValue();
-                  this.trigger("blurred");
-              },
-              _onFocus: function onFocus() {
-                  this.trigger("focused");
-              },
-              _onKeydown: function onKeydown($e) {
-                  var keyName = specialKeyCodeMap[$e.which || $e.keyCode];
-                  this._managePreventDefault(keyName, $e);
-                  if (keyName && this._shouldTrigger(keyName, $e)) {
-                      this.trigger(keyName + "Keyed", $e);
-                  }
-              },
-              _onInput: function onInput() {
-                  this._checkInputValue();
-              },
-              _managePreventDefault: function managePreventDefault(keyName, $e) {
-                  var preventDefault, hintValue, inputValue;
-                  switch (keyName) {
-                    case "tab":
-                      hintValue = this.getHint();
-                      inputValue = this.getInputValue();
-                      preventDefault = hintValue && hintValue !== inputValue && !withModifier($e);
-                      break;
-  
-                    case "up":
-                    case "down":
-                      preventDefault = !withModifier($e);
-                      break;
-  
-                    default:
-                      preventDefault = false;
-                  }
-                  preventDefault && $e.preventDefault();
-              },
-              _shouldTrigger: function shouldTrigger(keyName, $e) {
-                  var trigger;
-                  switch (keyName) {
-                    case "tab":
-                      trigger = !withModifier($e);
-                      break;
-  
-                    default:
-                      trigger = true;
-                  }
-                  return trigger;
-              },
-              _checkInputValue: function checkInputValue() {
-                  var inputValue, areEquivalent, hasDifferentWhitespace;
-                  inputValue = this.getInputValue();
-                  areEquivalent = areQueriesEquivalent(inputValue, this.query);
-                  hasDifferentWhitespace = areEquivalent ? this.query.length !== inputValue.length : false;
-                  if (!areEquivalent) {
-                      this.trigger("queryChanged", this.query = inputValue);
-                  } else if (hasDifferentWhitespace) {
-                      this.trigger("whitespaceChanged", this.query);
-                  }
-              },
-              focus: function focus() {
-                  this.$input.focus();
-              },
-              blur: function blur() {
-                  this.$input.blur();
-              },
-              getQuery: function getQuery() {
-                  return this.query;
-              },
-              setQuery: function setQuery(query) {
-                  this.query = query;
-              },
-              getInputValue: function getInputValue() {
-                  return this.$input.val();
-              },
-              setInputValue: function setInputValue(value, silent) {
-                  this.$input.val(value);
-                  silent ? this.clearHint() : this._checkInputValue();
-              },
-              resetInputValue: function resetInputValue() {
-                  this.setInputValue(this.query, true);
-              },
-              getHint: function getHint() {
-                  return this.$hint.val();
-              },
-              setHint: function setHint(value) {
-                  this.$hint.val(value);
-              },
-              clearHint: function clearHint() {
-                  this.setHint("");
-              },
-              clearHintIfInvalid: function clearHintIfInvalid() {
-                  var val, hint, valIsPrefixOfHint, isValid;
-                  val = this.getInputValue();
-                  hint = this.getHint();
-                  valIsPrefixOfHint = val !== hint && hint.indexOf(val) === 0;
-                  isValid = val !== "" && valIsPrefixOfHint && !this.hasOverflow();
-                  !isValid && this.clearHint();
-              },
-              getLanguageDirection: function getLanguageDirection() {
-                  return (this.$input.css("direction") || "ltr").toLowerCase();
-              },
-              hasOverflow: function hasOverflow() {
-                  var constraint = this.$input.width() - 2;
-                  this.$overflowHelper.text(this.getInputValue());
-                  return this.$overflowHelper.width() >= constraint;
-              },
-              isCursorAtEnd: function() {
-                  var valueLength, selectionStart, range;
-                  valueLength = this.$input.val().length;
-                  selectionStart = this.$input[0].selectionStart;
-                  if (_.isNumber(selectionStart)) {
-                      return selectionStart === valueLength;
-                  } else if (document.selection) {
-                      range = document.selection.createRange();
-                      range.moveStart("character", -valueLength);
-                      return valueLength === range.text.length;
-                  }
-                  return true;
-              },
-              destroy: function destroy() {
-                  this.$hint.off(".tt");
-                  this.$input.off(".tt");
-                  this.$hint = this.$input = this.$overflowHelper = null;
-              }
-          });
-          return Input;
-          function buildOverflowHelper($input) {
-              return $('<pre aria-hidden="true"></pre>').css({
-                  position: "absolute",
-                  visibility: "hidden",
-                  whiteSpace: "pre",
-                  fontFamily: $input.css("font-family"),
-                  fontSize: $input.css("font-size"),
-                  fontStyle: $input.css("font-style"),
-                  fontVariant: $input.css("font-variant"),
-                  fontWeight: $input.css("font-weight"),
-                  wordSpacing: $input.css("word-spacing"),
-                  letterSpacing: $input.css("letter-spacing"),
-                  textIndent: $input.css("text-indent"),
-                  textRendering: $input.css("text-rendering"),
-                  textTransform: $input.css("text-transform")
-              }).insertAfter($input);
-          }
-          function areQueriesEquivalent(a, b) {
-              return Input.normalizeQuery(a) === Input.normalizeQuery(b);
-          }
-          function withModifier($e) {
-              return $e.altKey || $e.ctrlKey || $e.metaKey || $e.shiftKey;
-          }
-      }();
-      var Dataset = function() {
-          var datasetKey = "ttDataset", valueKey = "ttValue", datumKey = "ttDatum";
-          function Dataset(o) {
-              o = o || {};
-              o.templates = o.templates || {};
-              if (!o.source) {
-                  $.error("missing source");
-              }
-              if (o.name && !isValidName(o.name)) {
-                  $.error("invalid dataset name: " + o.name);
-              }
-              this.query = null;
-              this.highlight = !!o.highlight;
-              this.name = o.name || _.getUniqueId();
-              this.source = o.source;
-              this.displayFn = getDisplayFn(o.display || o.displayKey);
-              this.templates = getTemplates(o.templates, this.displayFn);
-              this.$el = $(html.dataset.replace("%CLASS%", this.name));
-          }
-          Dataset.extractDatasetName = function extractDatasetName(el) {
-              return $(el).data(datasetKey);
-          };
-          Dataset.extractValue = function extractDatum(el) {
-              return $(el).data(valueKey);
-          };
-          Dataset.extractDatum = function extractDatum(el) {
-              return $(el).data(datumKey);
-          };
-          _.mixin(Dataset.prototype, EventEmitter, {
-              _render: function render(query, suggestions) {
-                  if (!this.$el) {
-                      return;
-                  }
-                  var that = this, hasSuggestions;
-                  this.$el.empty();
-                  hasSuggestions = suggestions && suggestions.length;
-                  if (!hasSuggestions && this.templates.empty) {
-                      this.$el.html(getEmptyHtml()).prepend(that.templates.header ? getHeaderHtml() : null).append(that.templates.footer ? getFooterHtml() : null);
-                  } else if (hasSuggestions) {
-                      this.$el.html(getSuggestionsHtml()).prepend(that.templates.header ? getHeaderHtml() : null).append(that.templates.footer ? getFooterHtml() : null);
-                  }
-                  this.trigger("rendered");
-                  function getEmptyHtml() {
-                      return that.templates.empty({
-                          query: query,
-                          isEmpty: true
-                      });
-                  }
-                  function getSuggestionsHtml() {
-                      var $suggestions, nodes;
-                      $suggestions = $(html.suggestions).css(css.suggestions);
-                      nodes = _.map(suggestions, getSuggestionNode);
-                      $suggestions.append.apply($suggestions, nodes);
-                      that.highlight && highlight({
-                          node: $suggestions[0],
-                          pattern: query
-                      });
-                      return $suggestions;
-                      function getSuggestionNode(suggestion) {
-                          var $el;
-                          $el = $(html.suggestion).append(that.templates.suggestion(suggestion)).data(datasetKey, that.name).data(valueKey, that.displayFn(suggestion)).data(datumKey, suggestion);
-                          $el.children().each(function() {
-                              $(this).css(css.suggestionChild);
-                          });
-                          return $el;
-                      }
-                  }
-                  function getHeaderHtml() {
-                      return that.templates.header({
-                          query: query,
-                          isEmpty: !hasSuggestions
-                      });
-                  }
-                  function getFooterHtml() {
-                      return that.templates.footer({
-                          query: query,
-                          isEmpty: !hasSuggestions
-                      });
-                  }
-              },
-              getRoot: function getRoot() {
-                  return this.$el;
-              },
-              update: function update(query) {
-                  var that = this;
-                  this.query = query;
-                  this.canceled = false;
-                  this.source(query, render);
-                  function render(suggestions) {
-                      if (!that.canceled && query === that.query) {
-                          that._render(query, suggestions);
-                      }
-                  }
-              },
-              cancel: function cancel() {
-                  this.canceled = true;
-              },
-              clear: function clear() {
-                  this.cancel();
-                  this.$el.empty();
-                  this.trigger("rendered");
-              },
-              isEmpty: function isEmpty() {
-                  return this.$el.is(":empty");
-              },
-              destroy: function destroy() {
-                  this.$el = null;
-              }
-          });
-          return Dataset;
-          function getDisplayFn(display) {
-              display = display || "value";
-              return _.isFunction(display) ? display : displayFn;
-              function displayFn(obj) {
-                  return obj[display];
-              }
-          }
-          function getTemplates(templates, displayFn) {
-              return {
-                  empty: templates.empty && _.templatify(templates.empty),
-                  header: templates.header && _.templatify(templates.header),
-                  footer: templates.footer && _.templatify(templates.footer),
-                  suggestion: templates.suggestion || suggestionTemplate
-              };
-              function suggestionTemplate(context) {
-                  return "<p>" + displayFn(context) + "</p>";
-              }
-          }
-          function isValidName(str) {
-              return /^[_a-zA-Z0-9-]+$/.test(str);
-          }
-      }();
-      var Dropdown = function() {
-          function Dropdown(o) {
-              var that = this, onSuggestionClick, onSuggestionMouseEnter, onSuggestionMouseLeave;
-              o = o || {};
-              if (!o.menu) {
-                  $.error("menu is required");
-              }
-              this.isOpen = false;
-              this.isEmpty = true;
-              this.datasets = _.map(o.datasets, initializeDataset);
-              onSuggestionClick = _.bind(this._onSuggestionClick, this);
-              onSuggestionMouseEnter = _.bind(this._onSuggestionMouseEnter, this);
-              onSuggestionMouseLeave = _.bind(this._onSuggestionMouseLeave, this);
-              this.$menu = $(o.menu).on("click.tt", ".tt-suggestion", onSuggestionClick).on("mouseenter.tt", ".tt-suggestion", onSuggestionMouseEnter).on("mouseleave.tt", ".tt-suggestion", onSuggestionMouseLeave);
-              _.each(this.datasets, function(dataset) {
-                  that.$menu.append(dataset.getRoot());
-                  dataset.onSync("rendered", that._onRendered, that);
-              });
-          }
-          _.mixin(Dropdown.prototype, EventEmitter, {
-              _onSuggestionClick: function onSuggestionClick($e) {
-                  this.trigger("suggestionClicked", $($e.currentTarget));
-              },
-              _onSuggestionMouseEnter: function onSuggestionMouseEnter($e) {
-                  this._removeCursor();
-                  this._setCursor($($e.currentTarget), true);
-              },
-              _onSuggestionMouseLeave: function onSuggestionMouseLeave() {
-                  this._removeCursor();
-              },
-              _onRendered: function onRendered() {
-                  this.isEmpty = _.every(this.datasets, isDatasetEmpty);
-                  this.isEmpty ? this._hide() : this.isOpen && this._show();
-                  this.trigger("datasetRendered");
-                  function isDatasetEmpty(dataset) {
-                      return dataset.isEmpty();
-                  }
-              },
-              _hide: function() {
-                  this.$menu.hide();
-              },
-              _show: function() {
-                  this.$menu.css("display", "block");
-              },
-              _getSuggestions: function getSuggestions() {
-                  return this.$menu.find(".tt-suggestion");
-              },
-              _getCursor: function getCursor() {
-                  return this.$menu.find(".tt-cursor").first();
-              },
-              _setCursor: function setCursor($el, silent) {
-                  $el.first().addClass("tt-cursor");
-                  !silent && this.trigger("cursorMoved");
-              },
-              _removeCursor: function removeCursor() {
-                  this._getCursor().removeClass("tt-cursor");
-              },
-              _moveCursor: function moveCursor(increment) {
-                  var $suggestions, $oldCursor, newCursorIndex, $newCursor;
-                  if (!this.isOpen) {
-                      return;
-                  }
-                  $oldCursor = this._getCursor();
-                  $suggestions = this._getSuggestions();
-                  this._removeCursor();
-                  newCursorIndex = $suggestions.index($oldCursor) + increment;
-                  newCursorIndex = (newCursorIndex + 1) % ($suggestions.length + 1) - 1;
-                  if (newCursorIndex === -1) {
-                      this.trigger("cursorRemoved");
-                      return;
-                  } else if (newCursorIndex < -1) {
-                      newCursorIndex = $suggestions.length - 1;
-                  }
-                  this._setCursor($newCursor = $suggestions.eq(newCursorIndex));
-                  this._ensureVisible($newCursor);
-              },
-              _ensureVisible: function ensureVisible($el) {
-                  var elTop, elBottom, menuScrollTop, menuHeight;
-                  elTop = $el.position().top;
-                  elBottom = elTop + $el.outerHeight(true);
-                  menuScrollTop = this.$menu.scrollTop();
-                  menuHeight = this.$menu.height() + parseInt(this.$menu.css("paddingTop"), 10) + parseInt(this.$menu.css("paddingBottom"), 10);
-                  if (elTop < 0) {
-                      this.$menu.scrollTop(menuScrollTop + elTop);
-                  } else if (menuHeight < elBottom) {
-                      this.$menu.scrollTop(menuScrollTop + (elBottom - menuHeight));
-                  }
-              },
-              close: function close() {
-                  if (this.isOpen) {
-                      this.isOpen = false;
-                      this._removeCursor();
-                      this._hide();
-                      this.trigger("closed");
-                  }
-              },
-              open: function open() {
-                  if (!this.isOpen) {
-                      this.isOpen = true;
-                      !this.isEmpty && this._show();
-                      this.trigger("opened");
-                  }
-              },
-              setLanguageDirection: function setLanguageDirection(dir) {
-                  this.$menu.css(dir === "ltr" ? css.ltr : css.rtl);
-              },
-              moveCursorUp: function moveCursorUp() {
-                  this._moveCursor(-1);
-              },
-              moveCursorDown: function moveCursorDown() {
-                  this._moveCursor(+1);
-              },
-              getDatumForSuggestion: function getDatumForSuggestion($el) {
-                  var datum = null;
-                  if ($el.length) {
-                      datum = {
-                          raw: Dataset.extractDatum($el),
-                          value: Dataset.extractValue($el),
-                          datasetName: Dataset.extractDatasetName($el)
-                      };
-                  }
-                  return datum;
-              },
-              getDatumForCursor: function getDatumForCursor() {
-                  return this.getDatumForSuggestion(this._getCursor().first());
-              },
-              getDatumForTopSuggestion: function getDatumForTopSuggestion() {
-                  return this.getDatumForSuggestion(this._getSuggestions().first());
-              },
-              update: function update(query) {
-                  _.each(this.datasets, updateDataset);
-                  function updateDataset(dataset) {
-                      dataset.update(query);
-                  }
-              },
-              empty: function empty() {
-                  _.each(this.datasets, clearDataset);
-                  this.isEmpty = true;
-                  function clearDataset(dataset) {
-                      dataset.clear();
-                  }
-              },
-              isVisible: function isVisible() {
-                  return this.isOpen && !this.isEmpty;
-              },
-              destroy: function destroy() {
-                  this.$menu.off(".tt");
-                  this.$menu = null;
-                  _.each(this.datasets, destroyDataset);
-                  function destroyDataset(dataset) {
-                      dataset.destroy();
-                  }
-              }
-          });
-          return Dropdown;
-          function initializeDataset(oDataset) {
-              return new Dataset(oDataset);
-          }
-      }();
-      var Typeahead = function() {
-          var attrsKey = "ttAttrs";
-          function Typeahead(o) {
-              var $menu, $input, $hint;
-              o = o || {};
-              if (!o.input) {
-                  $.error("missing input");
-              }
-              this.isActivated = false;
-              this.autoselect = !!o.autoselect;
-              this.minLength = _.isNumber(o.minLength) ? o.minLength : 1;
-              this.$node = buildDomStructure(o.input, o.withHint);
-              $menu = this.$node.find(".tt-dropdown-menu");
-              $input = this.$node.find(".tt-input");
-              $hint = this.$node.find(".tt-hint");
-              $input.on("blur.tt", function($e) {
-                  var active, isActive, hasActive;
-                  active = document.activeElement;
-                  isActive = $menu.is(active);
-                  hasActive = $menu.has(active).length > 0;
-                  if (_.isMsie() && (isActive || hasActive)) {
-                      $e.preventDefault();
-                      $e.stopImmediatePropagation();
-                      _.defer(function() {
-                          $input.focus();
-                      });
-                  }
-              });
-              $menu.on("mousedown.tt", function($e) {
-                  $e.preventDefault();
-              });
-              this.eventBus = o.eventBus || new EventBus({
-                  el: $input
-              });
-              this.dropdown = new Dropdown({
-                  menu: $menu,
-                  datasets: o.datasets
-              }).onSync("suggestionClicked", this._onSuggestionClicked, this).onSync("cursorMoved", this._onCursorMoved, this).onSync("cursorRemoved", this._onCursorRemoved, this).onSync("opened", this._onOpened, this).onSync("closed", this._onClosed, this).onAsync("datasetRendered", this._onDatasetRendered, this);
-              this.input = new Input({
-                  input: $input,
-                  hint: $hint
-              }).onSync("focused", this._onFocused, this).onSync("blurred", this._onBlurred, this).onSync("enterKeyed", this._onEnterKeyed, this).onSync("tabKeyed", this._onTabKeyed, this).onSync("escKeyed", this._onEscKeyed, this).onSync("upKeyed", this._onUpKeyed, this).onSync("downKeyed", this._onDownKeyed, this).onSync("leftKeyed", this._onLeftKeyed, this).onSync("rightKeyed", this._onRightKeyed, this).onSync("queryChanged", this._onQueryChanged, this).onSync("whitespaceChanged", this._onWhitespaceChanged, this);
-              this._setLanguageDirection();
-          }
-          _.mixin(Typeahead.prototype, {
-              _onSuggestionClicked: function onSuggestionClicked(type, $el) {
-                  var datum;
-                  if (datum = this.dropdown.getDatumForSuggestion($el)) {
-                      this._select(datum);
-                  }
-              },
-              _onCursorMoved: function onCursorMoved() {
-                  var datum = this.dropdown.getDatumForCursor();
-                  this.input.setInputValue(datum.value, true);
-                  this.eventBus.trigger("cursorchanged", datum.raw, datum.datasetName);
-              },
-              _onCursorRemoved: function onCursorRemoved() {
-                  this.input.resetInputValue();
-                  this._updateHint();
-              },
-              _onDatasetRendered: function onDatasetRendered() {
-                  this._updateHint();
-              },
-              _onOpened: function onOpened() {
-                  this._updateHint();
-                  this.eventBus.trigger("opened");
-              },
-              _onClosed: function onClosed() {
-                  this.input.clearHint();
-                  this.eventBus.trigger("closed");
-              },
-              _onFocused: function onFocused() {
-                  this.isActivated = true;
-                  this.dropdown.open();
-              },
-              _onBlurred: function onBlurred() {
-                  this.isActivated = false;
-                  this.dropdown.empty();
-                  this.dropdown.close();
-                  this.setVal("", true); //LM
-              },
-              _onEnterKeyed: function onEnterKeyed(type, $e) {
-                  var cursorDatum, topSuggestionDatum;
-                  cursorDatum = this.dropdown.getDatumForCursor();
-                  topSuggestionDatum = this.dropdown.getDatumForTopSuggestion();
-                  if (cursorDatum) {
-                      this._select(cursorDatum);
-                      $e.preventDefault();
-                  } else if (this.autoselect && topSuggestionDatum) {
-                      this._select(topSuggestionDatum);
-                      $e.preventDefault();
-                  }
-              },
-              _onTabKeyed: function onTabKeyed(type, $e) {
-                  var datum;
-                  if (datum = this.dropdown.getDatumForCursor()) {
-                      this._select(datum);
-                      $e.preventDefault();
-                  } else {
-                      this._autocomplete(true);
-                  }
-              },
-              _onEscKeyed: function onEscKeyed() {
-                  this.dropdown.close();
-                  this.input.resetInputValue();
-              },
-              _onUpKeyed: function onUpKeyed() {
-                  var query = this.input.getQuery();
-                  this.dropdown.isEmpty && query.length >= this.minLength ? this.dropdown.update(query) : this.dropdown.moveCursorUp();
-                  this.dropdown.open();
-              },
-              _onDownKeyed: function onDownKeyed() {
-                  var query = this.input.getQuery();
-                  this.dropdown.isEmpty && query.length >= this.minLength ? this.dropdown.update(query) : this.dropdown.moveCursorDown();
-                  this.dropdown.open();
-              },
-              _onLeftKeyed: function onLeftKeyed() {
-                  this.dir === "rtl" && this._autocomplete();
-              },
-              _onRightKeyed: function onRightKeyed() {
-                  this.dir === "ltr" && this._autocomplete();
-              },
-              _onQueryChanged: function onQueryChanged(e, query) {
-                  this.input.clearHintIfInvalid();
-                  query.length >= this.minLength ? this.dropdown.update(query) : this.dropdown.empty();
-                  this.dropdown.open();
-                  this._setLanguageDirection();
-              },
-              _onWhitespaceChanged: function onWhitespaceChanged() {
-                  this._updateHint();
-                  this.dropdown.open();
-              },
-              _setLanguageDirection: function setLanguageDirection() {
-                  var dir;
-                  if (this.dir !== (dir = this.input.getLanguageDirection())) {
-                      this.dir = dir;
-                      this.$node.css("direction", dir);
-                      this.dropdown.setLanguageDirection(dir);
-                  }
-              },
-              _updateHint: function updateHint() {
-                  var datum, val, query, escapedQuery, frontMatchRegEx, match;
-                  datum = this.dropdown.getDatumForTopSuggestion();
-                  if (datum && this.dropdown.isVisible() && !this.input.hasOverflow()) {
-                      val = this.input.getInputValue();
-                      query = Input.normalizeQuery(val);
-                      escapedQuery = _.escapeRegExChars(query);
-                      frontMatchRegEx = new RegExp("^(?:" + escapedQuery + ")(.+$)", "i");
-                      match = frontMatchRegEx.exec(datum.value);
-                      match ? this.input.setHint(val + match[1]) : this.input.clearHint();
-                  } else {
-                      this.input.clearHint();
-                  }
-              },
-              _autocomplete: function autocomplete(laxCursor) {
-                  var hint, query, isCursorAtEnd, datum;
-                  hint = this.input.getHint();
-                  query = this.input.getQuery();
-                  isCursorAtEnd = laxCursor || this.input.isCursorAtEnd();
-                  if (hint && query !== hint && isCursorAtEnd) {
-                      datum = this.dropdown.getDatumForTopSuggestion();
-                      datum && this.input.setInputValue(datum.value);
-                      this.eventBus.trigger("autocompleted", datum.raw, datum.datasetName);
-                  }
-              },
-              _select: function select(datum) {
-                  this.input.setQuery(datum.value);
-                  this.input.setInputValue(datum.value, true);
-                  this._setLanguageDirection();
-                  this.eventBus.trigger("selected", datum.raw, datum.datasetName);
-                  this.dropdown.close();
-                  _.defer(_.bind(this.dropdown.empty, this.dropdown));
-              },
-              open: function open() {
-                  this.dropdown.open();
-              },
-              close: function close() {
-                  this.dropdown.close();
-              },
-              setVal: function setVal(val) {
-                  if (this.isActivated) {
-                      this.input.setInputValue(val);
-                  } else {
-                      this.input.setQuery(val);
-                      this.input.setInputValue(val, true);
-                  }
-                  this._setLanguageDirection();
-              },
-              getVal: function getVal() {
-                  return this.input.getQuery();
-              },
-              destroy: function destroy() {
-                  this.input.destroy();
-                  this.dropdown.destroy();
-                  destroyDomStructure(this.$node);
-                  this.$node = null;
-              }
-          });
-          return Typeahead;
-          function buildDomStructure(input, withHint) {
-              var $input, $wrapper, $dropdown, $hint;
-              $input = $(input);
-              $wrapper = $(html.wrapper).css(css.wrapper);
-              $dropdown = $(html.dropdown).css(css.dropdown);
-              $hint = $input.clone().css(css.hint).css(getBackgroundStyles($input));
-              $hint.val("").removeData().addClass("tt-hint").removeAttr("id name placeholder").prop("disabled", true).attr({
-                  autocomplete: "off",
-                  spellcheck: "false"
-              });
-              $input.data(attrsKey, {
-                  dir: $input.attr("dir"),
-                  autocomplete: $input.attr("autocomplete"),
-                  spellcheck: $input.attr("spellcheck"),
-                  style: $input.attr("style")
-              });
-              $input.addClass("tt-input").attr({
-                  autocomplete: "off",
-                  spellcheck: false
-              }).css(withHint ? css.input : css.inputWithNoHint);
-              try {
-                  !$input.attr("dir") && $input.attr("dir", "auto");
-              } catch (e) {}
-              return $input.wrap($wrapper).parent().prepend(withHint ? $hint : null).append($dropdown);
-          }
-          function getBackgroundStyles($el) {
-              return {
-                  backgroundAttachment: $el.css("background-attachment"),
-                  backgroundClip: $el.css("background-clip"),
-                  backgroundColor: $el.css("background-color"),
-                  backgroundImage: $el.css("background-image"),
-                  backgroundOrigin: $el.css("background-origin"),
-                  backgroundPosition: $el.css("background-position"),
-                  backgroundRepeat: $el.css("background-repeat"),
-                  backgroundSize: $el.css("background-size")
-              };
-          }
-          function destroyDomStructure($node) {
-              var $input = $node.find(".tt-input");
-              _.each($input.data(attrsKey), function(val, key) {
-                  _.isUndefined(val) ? $input.removeAttr(key) : $input.attr(key, val);
-              });
-              $input.detach().removeData(attrsKey).removeClass("tt-input").insertAfter($node);
-              $node.remove();
-          }
-      }();
-      (function() {
-          var old, typeaheadKey, methods;
-          old = $.fn.typeahead;
-          typeaheadKey = "ttTypeahead";
-          methods = {
-              initialize: function initialize(o, datasets) {
-                  datasets = _.isArray(datasets) ? datasets : [].slice.call(arguments, 1);
-                  o = o || {};
-                  return this.each(attach);
-                  function attach() {
-                      var $input = $(this), eventBus, typeahead;
-                      _.each(datasets, function(d) {
-                          d.highlight = !!o.highlight;
-                      });
-                      typeahead = new Typeahead({
-                          input: $input,
-                          eventBus: eventBus = new EventBus({
-                              el: $input
-                          }),
-                          withHint: _.isUndefined(o.hint) ? true : !!o.hint,
-                          minLength: o.minLength,
-                          autoselect: o.autoselect,
-                          datasets: datasets
-                      });
-                      $input.data(typeaheadKey, typeahead);
-                  }
-              },
-              open: function open() {
-                  return this.each(openTypeahead);
-                  function openTypeahead() {
-                      var $input = $(this), typeahead;
-                      if (typeahead = $input.data(typeaheadKey)) {
-                          typeahead.open();
-                      }
-                  }
-              },
-              close: function close() {
-                  return this.each(closeTypeahead);
-                  function closeTypeahead() {
-                      var $input = $(this), typeahead;
-                      if (typeahead = $input.data(typeaheadKey)) {
-                          typeahead.close();
-                      }
-                  }
-              },
-              val: function val(newVal) {
-                  return !arguments.length ? getVal(this.first()) : this.each(setVal);
-                  function setVal() {
-                      var $input = $(this), typeahead;
-                      if (typeahead = $input.data(typeaheadKey)) {
-                          typeahead.setVal(newVal);
-                      }
-                  }
-                  function getVal($input) {
-                      var typeahead, query;
-                      if (typeahead = $input.data(typeaheadKey)) {
-                          query = typeahead.getVal();
-                      }
-                      return query;
-                  }
-              },
-              destroy: function destroy() {
-                  return this.each(unattach);
-                  function unattach() {
-                      var $input = $(this), typeahead;
-                      if (typeahead = $input.data(typeaheadKey)) {
-                          typeahead.destroy();
-                          $input.removeData(typeaheadKey);
-                      }
-                  }
-              }
-          };
-          $.fn.typeahead = function(method) {
-              if (methods[method]) {
-                  return methods[method].apply(this, [].slice.call(arguments, 1));
-              } else {
-                  return methods.initialize.apply(this, arguments);
-              }
-          };
-          $.fn.typeahead.noConflict = function noConflict() {
-              $.fn.typeahead = old;
-              return this;
-          };
-      })();
-      
-      
-      
-  //})(window.jQuery);
-  
-  
-  });
-  define('searchView',[
-    'App',
-    // Templates
-    'text!tpl/search.html',
-    'text!tpl/search_suggestion.html',
-    // Tools
-    'typeahead'
-  ], function(App, searchTpl, suggestionTpl) {
-  
-    var searchView = Backbone.View.extend({
-      el: '#search',
-      /**
-       * Init.
-       */
-      init: function() {
-        var tpl = _.template(searchTpl);
-        var className = 'form-control input-lg';
-        var placeholder = 'Search reference';
-        this.searchHtml = tpl({
-          'placeholder': placeholder,
-          'className': className
-        });
-        this.items = App.classes.concat(App.allItems);
-  
-        return this;
-      },
-      /**
-       * Render input field with Typehead activated.
-       */
-      render: function() {
-        // Append the view to the dom
-        this.$el.append(this.searchHtml);
-  
-        // Render Typeahead
-        var $searchInput = this.$el.find('input[type=text]');
-        this.typeaheadRender($searchInput);
-        this.typeaheadEvents($searchInput);
-  
-        return this;
-      },
-      /**
-       * Apply Twitter Typeahead to the search input field.
-       * @param {jquery} $input
-       */
-      typeaheadRender: function($input) {
-        var self = this;
-        $input.typeahead(null, {
-          'displayKey': 'name',
-          'minLength': 2,
-          //'highlight': true,
-          'source': self.substringMatcher(this.items),
-          'templates': {
-            'empty': '<p class="empty-message">Unable to find any item that match the current query</p>',
-            'suggestion': _.template(suggestionTpl)
-          }
-        });
-      },
-      /**
-       * Setup typeahead custom events (item selected).
-       */
-      typeaheadEvents: function($input) {
-        var self = this;
-        $input.on('typeahead:selected', function(e, item, datasetName) {
-          var selectedItem = self.items[item.idx];
-          select(selectedItem);
+          paramNames[param.name] = param;
+          params.push(param);
         });
-        $input.on('keydown', function(e) {
-          if (e.which === 13) { // enter
-            var txt = $input.val();
-            var f = _.find(self.items, function(it) { return it.name == txt; });
-            if (f) {
-              select(f);
+      });
+
+      return params;
+    }
+  };
+
+  return DocumentedMethod;
+}));
+
+/**
+ * @license RequireJS text 2.0.10 Copyright (c) 2010-2012, The Dojo Foundation All Rights Reserved.
+ * Available via the MIT or new BSD license.
+ * see: http://github.com/requirejs/text for details
+ */
+/*jslint regexp: true */
+/*global require, XMLHttpRequest, ActiveXObject,
+  define, window, process, Packages,
+  java, location, Components, FileUtils */
+
+define('text',['module'], function (module) {
+    'use strict';
+
+    var text, fs, Cc, Ci, xpcIsWindows,
+        progIds = ['Msxml2.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.4.0'],
+        xmlRegExp = /^\s*<\?xml(\s)+version=[\'\"](\d)*.(\d)*[\'\"](\s)*\?>/im,
+        bodyRegExp = /<body[^>]*>\s*([\s\S]+)\s*<\/body>/im,
+        hasLocation = typeof location !== 'undefined' && location.href,
+        defaultProtocol = hasLocation && location.protocol && location.protocol.replace(/\:/, ''),
+        defaultHostName = hasLocation && location.hostname,
+        defaultPort = hasLocation && (location.port || undefined),
+        buildMap = {},
+        masterConfig = (module.config && module.config()) || {};
+
+    text = {
+        version: '2.0.10',
+
+        strip: function (content) {
+            //Strips <?xml ...?> declarations so that external SVG and XML
+            //documents can be added to a document without worry. Also, if the string
+            //is an HTML document, only the part inside the body tag is returned.
+            if (content) {
+                content = content.replace(xmlRegExp, "");
+                var matches = content.match(bodyRegExp);
+                if (matches) {
+                    content = matches[1];
+                }
+            } else {
+                content = "";
+            }
+            return content;
+        },
+
+        jsEscape: function (content) {
+            return content.replace(/(['\\])/g, '\\$1')
+                .replace(/[\f]/g, "\\f")
+                .replace(/[\b]/g, "\\b")
+                .replace(/[\n]/g, "\\n")
+                .replace(/[\t]/g, "\\t")
+                .replace(/[\r]/g, "\\r")
+                .replace(/[\u2028]/g, "\\u2028")
+                .replace(/[\u2029]/g, "\\u2029");
+        },
+
+        createXhr: masterConfig.createXhr || function () {
+            //Would love to dump the ActiveX crap in here. Need IE 6 to die first.
+            var xhr, i, progId;
+            if (typeof XMLHttpRequest !== "undefined") {
+                return new XMLHttpRequest();
+            } else if (typeof ActiveXObject !== "undefined") {
+                for (i = 0; i < 3; i += 1) {
+                    progId = progIds[i];
+                    try {
+                        xhr = new ActiveXObject(progId);
+                    } catch (e) {}
+
+                    if (xhr) {
+                        progIds = [progId];  // so faster next time
+                        break;
+                    }
+                }
+            }
+
+            return xhr;
+        },
+
+        /**
+         * Parses a resource name into its component parts. Resource names
+         * look like: module/name.ext!strip, where the !strip part is
+         * optional.
+         * @param {String} name the resource name
+         * @returns {Object} with properties "moduleName", "ext" and "strip"
+         * where strip is a boolean.
+         */
+        parseName: function (name) {
+            var modName, ext, temp,
+                strip = false,
+                index = name.indexOf("."),
+                isRelative = name.indexOf('./') === 0 ||
+                             name.indexOf('../') === 0;
+
+            if (index !== -1 && (!isRelative || index > 1)) {
+                modName = name.substring(0, index);
+                ext = name.substring(index + 1, name.length);
+            } else {
+                modName = name;
+            }
+
+            temp = ext || modName;
+            index = temp.indexOf("!");
+            if (index !== -1) {
+                //Pull off the strip arg.
+                strip = temp.substring(index + 1) === "strip";
+                temp = temp.substring(0, index);
+                if (ext) {
+                    ext = temp;
+                } else {
+                    modName = temp;
+                }
+            }
+
+            return {
+                moduleName: modName,
+                ext: ext,
+                strip: strip
+            };
+        },
+
+        xdRegExp: /^((\w+)\:)?\/\/([^\/\\]+)/,
+
+        /**
+         * Is an URL on another domain. Only works for browser use, returns
+         * false in non-browser environments. Only used to know if an
+         * optimized .js version of a text resource should be loaded
+         * instead.
+         * @param {String} url
+         * @returns Boolean
+         */
+        useXhr: function (url, protocol, hostname, port) {
+            var uProtocol, uHostName, uPort,
+                match = text.xdRegExp.exec(url);
+            if (!match) {
+                return true;
+            }
+            uProtocol = match[2];
+            uHostName = match[3];
+
+            uHostName = uHostName.split(':');
+            uPort = uHostName[1];
+            uHostName = uHostName[0];
+
+            return (!uProtocol || uProtocol === protocol) &&
+                   (!uHostName || uHostName.toLowerCase() === hostname.toLowerCase()) &&
+                   ((!uPort && !uHostName) || uPort === port);
+        },
+
+        finishLoad: function (name, strip, content, onLoad) {
+            content = strip ? text.strip(content) : content;
+            if (masterConfig.isBuild) {
+                buildMap[name] = content;
+            }
+            onLoad(content);
+        },
+
+        load: function (name, req, onLoad, config) {
+            //Name has format: some.module.filext!strip
+            //The strip part is optional.
+            //if strip is present, then that means only get the string contents
+            //inside a body tag in an HTML string. For XML/SVG content it means
+            //removing the <?xml ...?> declarations so the content can be inserted
+            //into the current doc without problems.
+
+            // Do not bother with the work if a build and text will
+            // not be inlined.
+            if (config.isBuild && !config.inlineText) {
+                onLoad();
+                return;
             }
-          } else if (e.which === 27) {
-            $input.blur();
-          }
-        });
-  
-        function select(selectedItem) {
-          var hash = App.router.getHash(selectedItem);//
-          App.router.navigate(hash, {'trigger': true});
-          $('#item').focus();
+
+            masterConfig.isBuild = config.isBuild;
+
+            var parsed = text.parseName(name),
+                nonStripName = parsed.moduleName +
+                    (parsed.ext ? '.' + parsed.ext : ''),
+                url = req.toUrl(nonStripName),
+                useXhr = (masterConfig.useXhr) ||
+                         text.useXhr;
+
+            // Do not load if it is an empty: url
+            if (url.indexOf('empty:') === 0) {
+                onLoad();
+                return;
+            }
+
+            //Load the text. Use XHR if possible and in a browser.
+            if (!hasLocation || useXhr(url, defaultProtocol, defaultHostName, defaultPort)) {
+                text.get(url, function (content) {
+                    text.finishLoad(name, parsed.strip, content, onLoad);
+                }, function (err) {
+                    if (onLoad.error) {
+                        onLoad.error(err);
+                    }
+                });
+            } else {
+                //Need to fetch the resource across domains. Assume
+                //the resource has been optimized into a JS module. Fetch
+                //by the module name + extension, but do not include the
+                //!strip part to avoid file system issues.
+                req([nonStripName], function (content) {
+                    text.finishLoad(parsed.moduleName + '.' + parsed.ext,
+                                    parsed.strip, content, onLoad);
+                });
+            }
+        },
+
+        write: function (pluginName, moduleName, write, config) {
+            if (buildMap.hasOwnProperty(moduleName)) {
+                var content = text.jsEscape(buildMap[moduleName]);
+                write.asModule(pluginName + "!" + moduleName,
+                               "define(function () { return '" +
+                                   content +
+                               "';});\n");
+            }
+        },
+
+        writeFile: function (pluginName, moduleName, req, write, config) {
+            var parsed = text.parseName(moduleName),
+                extPart = parsed.ext ? '.' + parsed.ext : '',
+                nonStripName = parsed.moduleName + extPart,
+                //Use a '.js' file name so that it indicates it is a
+                //script that can be loaded across domains.
+                fileName = req.toUrl(parsed.moduleName + extPart) + '.js';
+
+            //Leverage own load() method to load plugin value, but only
+            //write out values that do not have the strip argument,
+            //to avoid any potential issues with ! in file names.
+            text.load(nonStripName, req, function (value) {
+                //Use own write() method to construct full module value.
+                //But need to create shell that translates writeFile's
+                //write() to the right interface.
+                var textWrite = function (contents) {
+                    return write(fileName, contents);
+                };
+                textWrite.asModule = function (moduleName, contents) {
+                    return write.asModule(moduleName, fileName, contents);
+                };
+
+                text.write(pluginName, nonStripName, textWrite, config);
+            }, config);
         }
-      },
-      /**
-       * substringMatcher function for Typehead (search for strings in an array).
-       * @param {array} array
-       * @returns {Function}
-       */
-      substringMatcher: function(array) {
-        return function findMatches(query, callback) {
-          var matches = [], substrRegex, arrayLength = array.length;
-  
-          // regex used to determine if a string contains the substring `query`
-          substrRegex = new RegExp(query, 'i');
-  
-          // iterate through the pool of strings and for any string that
-          // contains the substring `query`, add it to the `matches` array
-          for (var i=0; i < arrayLength; i++) {
-            var item = array[i];
-            if (substrRegex.test(item.name)) {
-              // typeahead expects suggestions to be a js object
-              matches.push({
-                'itemtype': item.itemtype,
-                'name': item.name,
-                'className': item.class,
-                'is_constructor': !!item.is_constructor,
-                'final': item.final,
-                'idx': i
-              });
+    };
+
+    if (masterConfig.env === 'node' || (!masterConfig.env &&
+            typeof process !== "undefined" &&
+            process.versions &&
+            !!process.versions.node &&
+            !process.versions['node-webkit'])) {
+        //Using special require.nodeRequire, something added by r.js.
+        fs = require.nodeRequire('fs');
+
+        text.get = function (url, callback, errback) {
+            try {
+                var file = fs.readFileSync(url, 'utf8');
+                //Remove BOM (Byte Mark Order) from utf8 files if it is there.
+                if (file.indexOf('\uFEFF') === 0) {
+                    file = file.substring(1);
+                }
+                callback(file);
+            } catch (e) {
+                errback(e);
             }
-          }
-  
-          callback(matches);
         };
-      }
-  
-    });
-  
-    return searchView;
-  
-  });
-  
-  
-  define('text!tpl/list.html',[],function () { return '<% _.each(groups, function(group){ %>\n  <div class="reference-group clearfix main-ref-page">  \n    <h2 class="group-name" id="group-<%=group.name%>" tab-index="-1"><%=group.name%></h2>\n    <div class="reference-subgroups clearfix main-ref-page">  \n    <% _.each(group.subgroups, function(subgroup, ind) { %>\n      <div class="reference-subgroup">\n        <% if (subgroup.name !== \'0\') { %>\n          <h3 id="<%=group.name%><%=ind%>" class="subgroup-name subgroup-<%=subgroup.name%>"><%=subgroup.name%></h3>\n        <% } %>\n        <ul aria-labelledby="<%=group.name%> <%=ind%>">\n        <% _.each(subgroup.items, function(item) { %>\n        <li><a href="<%=item.hash%>"><%=item.name%><% if (item.itemtype === \'method\') { %>()<%}%></a></li>\n        <% }); %>\n        </ul>\n      </div>\n    <% }); %>\n    </div>\n  </div>\n<% }); %>\n';});
-  
-  define('listView',[
-    'App',
-    // Templates
-    'text!tpl/list.html'
-  ], function (App, listTpl) {
-    var striptags = function(html) {
-      var div = document.createElement('div');
-      div.innerHTML = html;
-      return div.textContent;
-    };
-  
-    var listView = Backbone.View.extend({
-      el: '#list',
-      events: {},
-      /**
-       * Init.
-       */
-      init: function () {
-        this.listTpl = _.template(listTpl);
-  
-        return this;
-      },
-      /**
-       * Render the list.
-       */
-      render: function (items, listCollection) {
-        if (items && listCollection) {
-          var self = this;
-  
-          // Render items and group them by module
-          // module === group
-          this.groups = {};
-          _.each(items, function (item, i) {
-  
-            if (!item.private && item.file.indexOf('addons') === -1) { //addons don't get displayed on main page
-  
-              var group = item.module || '_';
-              var subgroup = item.submodule || '_';
-              if (group === subgroup) {
-                subgroup = '0';
-              }
-              var hash = App.router.getHash(item);
-  
-              // fixes broken links for #/p5/> and #/p5/>=
-              item.hash = item.hash.replace('>', '&gt;');
-  
-              // Create a group list
-              if (!self.groups[group]) {
-                self.groups[group] = {
-                  name: group.replace('_', '&nbsp;'),
-                  subgroups: {}
+    } else if (masterConfig.env === 'xhr' || (!masterConfig.env &&
+            text.createXhr())) {
+        text.get = function (url, callback, errback, headers) {
+            var xhr = text.createXhr(), header;
+            xhr.open('GET', url, true);
+
+            //Allow plugins direct access to xhr headers
+            if (headers) {
+                for (header in headers) {
+                    if (headers.hasOwnProperty(header)) {
+                        xhr.setRequestHeader(header.toLowerCase(), headers[header]);
+                    }
+                }
+            }
+
+            //Allow overrides specified in config
+            if (masterConfig.onXhr) {
+                masterConfig.onXhr(xhr, url);
+            }
+
+            xhr.onreadystatechange = function (evt) {
+                var status, err;
+                //Do not explicitly handle errors, those should be
+                //visible via console output in the browser.
+                if (xhr.readyState === 4) {
+                    status = xhr.status;
+                    if (status > 399 && status < 600) {
+                        //An http 4xx or 5xx error. Signal an error.
+                        err = new Error(url + ' HTTP status: ' + status);
+                        err.xhr = xhr;
+                        errback(err);
+                    } else {
+                        callback(xhr.responseText);
+                    }
+
+                    if (masterConfig.onXhrComplete) {
+                        masterConfig.onXhrComplete(xhr, url);
+                    }
+                }
+            };
+            xhr.send(null);
+        };
+    } else if (masterConfig.env === 'rhino' || (!masterConfig.env &&
+            typeof Packages !== 'undefined' && typeof java !== 'undefined')) {
+        //Why Java, why is this so awkward?
+        text.get = function (url, callback) {
+            var stringBuffer, line,
+                encoding = "utf-8",
+                file = new java.io.File(url),
+                lineSeparator = java.lang.System.getProperty("line.separator"),
+                input = new java.io.BufferedReader(new java.io.InputStreamReader(new java.io.FileInputStream(file), encoding)),
+                content = '';
+            try {
+                stringBuffer = new java.lang.StringBuffer();
+                line = input.readLine();
+
+                // Byte Order Mark (BOM) - The Unicode Standard, version 3.0, page 324
+                // http://www.unicode.org/faq/utf_bom.html
+
+                // Note that when we use utf-8, the BOM should appear as "EF BB BF", but it doesn't due to this bug in the JDK:
+                // http://bugs.sun.com/bugdatabase/view_bug.do?bug_id=4508058
+                if (line && line.length() && line.charAt(0) === 0xfeff) {
+                    // Eat the BOM, since we've already found the encoding on this file,
+                    // and we plan to concatenating this buffer with others; the BOM should
+                    // only appear at the top of a file.
+                    line = line.substring(1);
+                }
+
+                if (line !== null) {
+                    stringBuffer.append(line);
+                }
+
+                while ((line = input.readLine()) !== null) {
+                    stringBuffer.append(lineSeparator);
+                    stringBuffer.append(line);
+                }
+                //Make sure we return a JavaScript string and not a Java string.
+                content = String(stringBuffer.toString()); //String
+            } finally {
+                input.close();
+            }
+            callback(content);
+        };
+    } else if (masterConfig.env === 'xpconnect' || (!masterConfig.env &&
+            typeof Components !== 'undefined' && Components.classes &&
+            Components.interfaces)) {
+        //Avert your gaze!
+        Cc = Components.classes,
+        Ci = Components.interfaces;
+        Components.utils['import']('resource://gre/modules/FileUtils.jsm');
+        xpcIsWindows = ('@mozilla.org/windows-registry-key;1' in Cc);
+
+        text.get = function (url, callback) {
+            var inStream, convertStream, fileObj,
+                readData = {};
+
+            if (xpcIsWindows) {
+                url = url.replace(/\//g, '\\');
+            }
+
+            fileObj = new FileUtils.File(url);
+
+            //XPCOM, you so crazy
+            try {
+                inStream = Cc['@mozilla.org/network/file-input-stream;1']
+                           .createInstance(Ci.nsIFileInputStream);
+                inStream.init(fileObj, 1, 0, false);
+
+                convertStream = Cc['@mozilla.org/intl/converter-input-stream;1']
+                                .createInstance(Ci.nsIConverterInputStream);
+                convertStream.init(inStream, "utf-8", inStream.available(),
+                Ci.nsIConverterInputStream.DEFAULT_REPLACEMENT_CHARACTER);
+
+                convertStream.readString(inStream.available(), readData);
+                convertStream.close();
+                inStream.close();
+                callback(readData.value);
+            } catch (e) {
+                throw new Error((fileObj && fileObj.path || '') + ': ' + e);
+            }
+        };
+    }
+    return text;
+});
+
+
+define('text!tpl/search.html',[],function () { return '<h2 class="sr-only">search</h2>\r\n<form>\r\n  <input id="search_reference_field" type="text" class="<%=className%>" value="" placeholder="<%=placeholder%>" aria-label="search reference">\r\n  <label class="sr-only" for="search_reference_field">Search reference</label>\r\n</form>\r\n\r\n';});
+
+
+define('text!tpl/search_suggestion.html',[],function () { return '<p id="index-<%=idx%>" class="search-suggestion">\r\n\r\n  <strong><%=name%></strong>\r\n\r\n  <span class="small">\r\n    <% if (final) { %>\r\n    constant\r\n    <% } else if (itemtype) { %>\r\n    <%=itemtype%> \r\n    <% } %>\r\n\r\n    <% if (className) { %>\r\n    in <strong><%=className%></strong>\r\n    <% } %>\r\n\r\n    <% if (typeof is_constructor !== \'undefined\' && is_constructor) { %>\r\n    <strong><span class="glyphicon glyphicon-star"></span> constructor</strong>\r\n    <% } %>\r\n  </span>\r\n\r\n</p>';});
+
+/*!
+ * typeahead.js 0.10.2
+ * https://github.com/twitter/typeahead.js
+ * Copyright 2013-2014 Twitter, Inc. and other contributors; Licensed MIT
+ */
+define('typeahead',[], function() {
+
+//(function($) {
+
+
+    var _ = {
+        isMsie: function() {
+            return /(msie|trident)/i.test(navigator.userAgent) ? navigator.userAgent.match(/(msie |rv:)(\d+(.\d+)?)/i)[2] : false;
+        },
+        isBlankString: function(str) {
+            return !str || /^\s*$/.test(str);
+        },
+        escapeRegExChars: function(str) {
+            return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
+        },
+        isString: function(obj) {
+            return typeof obj === "string";
+        },
+        isNumber: function(obj) {
+            return typeof obj === "number";
+        },
+        isArray: $.isArray,
+        isFunction: $.isFunction,
+        isObject: $.isPlainObject,
+        isUndefined: function(obj) {
+            return typeof obj === "undefined";
+        },
+        bind: $.proxy,
+        each: function(collection, cb) {
+            $.each(collection, reverseArgs);
+            function reverseArgs(index, value) {
+                return cb(value, index);
+            }
+        },
+        map: $.map,
+        filter: $.grep,
+        every: function(obj, test) {
+            var result = true;
+            if (!obj) {
+                return result;
+            }
+            $.each(obj, function(key, val) {
+                if (!(result = test.call(null, val, key, obj))) {
+                    return false;
+                }
+            });
+            return !!result;
+        },
+        some: function(obj, test) {
+            var result = false;
+            if (!obj) {
+                return result;
+            }
+            $.each(obj, function(key, val) {
+                if (result = test.call(null, val, key, obj)) {
+                    return false;
+                }
+            });
+            return !!result;
+        },
+        mixin: $.extend,
+        getUniqueId: function() {
+            var counter = 0;
+            return function() {
+                return counter++;
+            };
+        }(),
+        templatify: function templatify(obj) {
+            return $.isFunction(obj) ? obj : template;
+            function template() {
+                return String(obj);
+            }
+        },
+        defer: function(fn) {
+            setTimeout(fn, 0);
+        },
+        debounce: function(func, wait, immediate) {
+            var timeout, result;
+            return function() {
+                var context = this, args = arguments, later, callNow;
+                later = function() {
+                    timeout = null;
+                    if (!immediate) {
+                        result = func.apply(context, args);
+                    }
                 };
-              }
-  
-              // Create a subgroup list
-              if (!self.groups[group].subgroups[subgroup]) {
-                self.groups[group].subgroups[subgroup] = {
-                  name: subgroup.replace('_', '&nbsp;'),
-                  items: []
+                callNow = immediate && !timeout;
+                clearTimeout(timeout);
+                timeout = setTimeout(later, wait);
+                if (callNow) {
+                    result = func.apply(context, args);
+                }
+                return result;
+            };
+        },
+        throttle: function(func, wait) {
+            var context, args, timeout, result, previous, later;
+            previous = 0;
+            later = function() {
+                previous = new Date();
+                timeout = null;
+                result = func.apply(context, args);
+            };
+            return function() {
+                var now = new Date(), remaining = wait - (now - previous);
+                context = this;
+                args = arguments;
+                if (remaining <= 0) {
+                    clearTimeout(timeout);
+                    timeout = null;
+                    previous = now;
+                    result = func.apply(context, args);
+                } else if (!timeout) {
+                    timeout = setTimeout(later, remaining);
+                }
+                return result;
+            };
+        },
+        noop: function() {}
+    };
+    var VERSION = "0.10.2";
+    var tokenizers = function(root) {
+        return {
+            nonword: nonword,
+            whitespace: whitespace,
+            obj: {
+                nonword: getObjTokenizer(nonword),
+                whitespace: getObjTokenizer(whitespace)
+            }
+        };
+        function whitespace(s) {
+            return s.split(/\s+/);
+        }
+        function nonword(s) {
+            return s.split(/\W+/);
+        }
+        function getObjTokenizer(tokenizer) {
+            return function setKey(key) {
+                return function tokenize(o) {
+                    return tokenizer(o[key]);
                 };
-              }
-  
-              // hide the un-interesting constants
-              if (group === 'Constants' && !item.example)
-                return;
-  
-              if (item.class === 'p5') {
-  
-                self.groups[group].subgroups[subgroup].items.push(item);
-  
-              } else {
-  
-                var found = _.find(self.groups[group].subgroups[subgroup].items,
-                  function(i){ return i.name == item.class; });
-  
-                if (!found) {
-  
-                  // FIX TO INVISIBLE OBJECTS: DH (see also router.js)
-                  var ind = hash.lastIndexOf('/');
-                  hash = item.hash.substring(0, ind).replace('p5/','p5.');
-                  self.groups[group].subgroups[subgroup].items.push({
-                    name: item.class,
-                    hash: hash
-                  });
+            };
+        }
+    }();
+    var LruCache = function() {
+        function LruCache(maxSize) {
+            this.maxSize = maxSize || 100;
+            this.size = 0;
+            this.hash = {};
+            this.list = new List();
+        }
+        _.mixin(LruCache.prototype, {
+            set: function set(key, val) {
+                var tailItem = this.list.tail, node;
+                if (this.size >= this.maxSize) {
+                    this.list.remove(tailItem);
+                    delete this.hash[tailItem.key];
+                }
+                if (node = this.hash[key]) {
+                    node.val = val;
+                    this.list.moveToFront(node);
+                } else {
+                    node = new Node(key, val);
+                    this.list.add(node);
+                    this.hash[key] = node;
+                    this.size++;
+                }
+            },
+            get: function get(key) {
+                var node = this.hash[key];
+                if (node) {
+                    this.list.moveToFront(node);
+                    return node.val;
                 }
-  
-              }
             }
-          });
-  
-          // Put the <li> items html into the list <ul>
-          var listHtml = self.listTpl({
-            'striptags': striptags,
-            'title': self.capitalizeFirst(listCollection),
-            'groups': self.groups,
-            'listCollection': listCollection
-          });
-  
-          // Render the view
-          this.$el.html(listHtml);
+        });
+        function List() {
+            this.head = this.tail = null;
         }
-  
-        var renderEvent = new Event('reference-rendered');
-        window.dispatchEvent(renderEvent);
-  
-        return this;
-      },
-      /**
-       * Show a list of items.
-       * @param {array} items Array of item objects.
-       * @returns {object} This view.
-       */
-      show: function (listGroup) {
-        if (App[listGroup]) {
-          this.render(App[listGroup], listGroup);
+        _.mixin(List.prototype, {
+            add: function add(node) {
+                if (this.head) {
+                    node.next = this.head;
+                    this.head.prev = node;
+                }
+                this.head = node;
+                this.tail = this.tail || node;
+            },
+            remove: function remove(node) {
+                node.prev ? node.prev.next = node.next : this.head = node.next;
+                node.next ? node.next.prev = node.prev : this.tail = node.prev;
+            },
+            moveToFront: function(node) {
+                this.remove(node);
+                this.add(node);
+            }
+        });
+        function Node(key, val) {
+            this.key = key;
+            this.val = val;
+            this.prev = this.next = null;
         }
-        App.pageView.hideContentViews();
-  
-        this.$el.show();
-  
-        return this;
-      },
-      /**
-       * Helper method to capitalize the first letter of a string
-       * @param {string} str
-       * @returns {string} Returns the string.
-       */
-      capitalizeFirst: function (str) {
-        return str.substr(0, 1).toUpperCase() + str.substr(1);
-      }
-  
-  
-  
-    });
-  
-    return listView;
-  
-  });
-  
-  
-  define('text!tpl/item.html',[],function () { return '<h2><%=item.name%><% if (item.isMethod) { %>()<% } %></h2>\n\n<% if (item.example) { %>\n<div class="example">\n  <h3 id="reference-example">Examples</h3>\n\n  <div class="example-content" data-alt="<%= item.alt %>">\n    <% _.each(item.example, function(example, i){ %>\n      <%= example %>\n    <% }); %>\n  </div>\n</div>\n<% } %>\n\n<div class="description">\n\n  <h3 id="reference-description">Description</h3>\n\n  <% if (item.deprecated) { %>\n    <p>\n      Deprecated: <%=item.name%><% if (item.isMethod) { %>()<% } %> is deprecated and will be removed in a future version of p5. <% if (item.deprecationMessage) { %><%=item.deprecationMessage%><% } %>\n    </p>\n  <% } %>\n\n\n  <span class=\'description-text\'><%= item.description %></span>\n\n  <% if (item.extends) { %>\n    <p><span id="reference-extends">Extends</span> <a href="/reference/#/<%=item.extends%>" title="<%=item.extends%> reference"><%=item.extends%></a></p>\n  <% } %>\n\n  <% if (item.module === \'p5.sound\') { %>\n    <p>This function requires you include the p5.sound library.  Add the following into the head of your index.html file:\n      <pre><code class="language-javascript">&lt;script src="path/to/p5.sound.js"&gt;&lt;/script&gt;</code></pre>\n    </p>\n  <% } %>\n\n  <% if (item.constRefs) { %>\n    <p>Used by:\n  <%\n      var refs = item.constRefs;\n      for (var i = 0; i < refs.length; i ++) {\n        var ref = refs[i];\n        var name = ref;\n        if (name.substr(0, 3) === \'p5.\') {\n          name = name.substr(3);\n        }\n  if (i !== 0) {\n          if (i == refs.length - 1) {\n            %> and <%\n          } else {\n            %>, <%\n          }\n        }\n        %><a href="./#/<%= ref.replace(\'.\', \'/\') %>"><%= name %>()</a><%\n      }\n  %>\n    </p>\n  <% } %>\n</div>\n\n<% if (isConstructor || !isClass) { %>\n\n<div class="syntax">\n  <h3 id="reference-syntax">Syntax</h3>\n  <p>\n    <% syntaxes.forEach(function(syntax) { %>\n    <pre class="language-javascript"><%= syntax %></pre>\n    <% }) %>\n  </p>\n</div>\n\n\n<% if (item.params) { %>\n  <div class="params">\n    <h3 id="reference-parameters">Parameters</h3>\n    <ul aria-labelledby=\'reference-parameters\'>\n    <% for (var i=0; i<item.params.length; i++) { %>\n      <% var p = item.params[i] %>\n      <li>\n        <div class=\'paramname\'><%=p.name%></div>\n        <% if (p.type) { %>\n          <div class=\'paramtype\'>\n          <% var type = p.type.replace(/(p5\\.[A-Z][A-Za-z]*)/, \'<a href="#/$1">$1</a>\'); %>\n          <span class="param-type label label-info"><%=type%></span>: <%=p.description%>\n          <% if (p.optional) { %> (Optional)<% } %>\n          </div>\n        <% } %>\n      </li>\n    <% } %>\n    </ul>\n  </div>\n<% } %>\n\n<% if (item.return && item.return.type) { %>\n  <div>\n    <h3 id="reference-returns">Returns</h3>\n    <p class=\'returns\'><span class="param-type label label-info"><%=item.return.type%></span>: <%= item.return.description %></p>\n  </div>\n<% } %>\n\n<% } %>\n';});
-  
-  
-  define('text!tpl/class.html',[],function () { return '\n<% if (typeof constructor !== \'undefined\') { %>\n<div class="constructor">\n  <%=constructor%>\n</div>\n<% } %>\n\n<% let fields = _.filter(things, function(item) { return item.itemtype === \'property\' && item.access !== \'private\' }); %>\n<% if (fields.length > 0) { %>\n  <h3 id=\'reference-fields\'>Fields</h3>\n  <ul aria-labelledby=\'reference-fields\'>\n  <% _.each(fields, function(item) { %>\n    <li>\n      <div class=\'paramname\'><a href="<%=item.hash%>" <% if (item.module !== module) { %>class="addon"<% } %>><%=item.name%></a></div>\n      <div class=\'paramtype\'><%= item.description %></div>\n    </li>\n  <% }); %>\n  </ul>\n<% } %>\n\n<% let methods = _.filter(things, function(item) { return item.itemtype === \'method\' && item.access !== \'private\' }); %>\n<% if (methods.length > 0) { %>\n  <h3 id=\'reference-methods\'>Methods</h3>\n  <ul aria-labelledby=\'reference-methods\'>\n    <% _.each(methods, function(item) { %>\n      <li>\n        <div class=\'paramname\'><a href="<%=item.hash%>" <% if (item.module !== module) { %>class="addon"<% } %>><%=item.name%><% if (item.itemtype === \'method\') { %>()<%}%></a></div>\n        <div class=\'paramtype\'><%= item.description %></div>\n      </li>\n    <% }); %>\n  </ul>\n<% } %>\n';});
-  
-  
-  define('text!tpl/itemEnd.html',[],function () { return '\n<br><br>\n\n<div>\n<% if (item.file && item.line) { %>\n<span id="reference-error1">Notice any errors or typos?</span> <a href="https://github.com/processing/p5.js/issues"><span id="reference-contribute2">Please let us know.</span></a> <span id="reference-error3">Please feel free to edit</span> <a href="https://github.com/processing/p5.js/blob/<%= appVersion %>/<%= item.file %>#L<%= item.line %>" target="_blank" ><%= item.file %></a> <span id="reference-error5">and issue a pull request!</span>\n<% } %>\n</div>\n\n<a style="border-bottom:none !important;" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target=_blank><img src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" style="width:88px" alt="creative commons logo"/></a>\n<br><br>\n';});
-  
-  // Copyright (C) 2006 Google Inc.
-  //
-  // Licensed under the Apache License, Version 2.0 (the "License");
-  // you may not use this file except in compliance with the License.
-  // You may obtain a copy of the License at
-  //
-  //      http://www.apache.org/licenses/LICENSE-2.0
-  //
-  // Unless required by applicable law or agreed to in writing, software
-  // distributed under the License is distributed on an "AS IS" BASIS,
-  // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  // See the License for the specific language governing permissions and
-  // limitations under the License.
-  
-  
-  /**
-   * @fileoverview
-   * some functions for browser-side pretty printing of code contained in html.
-   *
-   * <p>
-   * For a fairly comprehensive set of languages see the
-   * <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html#langs">README</a>
-   * file that came with this source.  At a minimum, the lexer should work on a
-   * number of languages including C and friends, Java, Python, Bash, SQL, HTML,
-   * XML, CSS, Javascript, and Makefiles.  It works passably on Ruby, PHP and Awk
-   * and a subset of Perl, but, because of commenting conventions, doesn't work on
-   * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class.
-   * <p>
-   * Usage: <ol>
-   * <li> include this source file in an html page via
-   *   {@code <script src="/path/to/prettify.js"></script>}
-   * <li> define style rules.  See the example page for examples.
-   * <li> mark the {@code <pre>} and {@code <code>} tags in your source with
-   *    {@code class=prettyprint.}
-   *    You can also use the (html deprecated) {@code <xmp>} tag, but the pretty
-   *    printer needs to do more substantial DOM manipulations to support that, so
-   *    some css styles may not be preserved.
-   * </ol>
-   * That's it.  I wanted to keep the API as simple as possible, so there's no
-   * need to specify which language the code is in, but if you wish, you can add
-   * another class to the {@code <pre>} or {@code <code>} element to specify the
-   * language, as in {@code <pre class="prettyprint lang-java">}.  Any class that
-   * starts with "lang-" followed by a file extension, specifies the file type.
-   * See the "lang-*.js" files in this directory for code that implements
-   * per-language file handlers.
-   * <p>
-   * Change log:<br>
-   * cbeust, 2006/08/22
-   * <blockquote>
-   *   Java annotations (start with "@") are now captured as literals ("lit")
-   * </blockquote>
-   * @requires console
-   */
-  
-  // JSLint declarations
-  /*global console, document, navigator, setTimeout, window, define */
-  
-  /** @define {boolean} */
-  var IN_GLOBAL_SCOPE = true;
-  
-  /**
-   * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
-   * UI events.
-   * If set to {@code false}, {@code prettyPrint()} is synchronous.
-   */
-  window['PR_SHOULD_USE_CONTINUATION'] = true;
-  
-  /**
-   * Pretty print a chunk of code.
-   * @param {string} sourceCodeHtml The HTML to pretty print.
-   * @param {string} opt_langExtension The language name to use.
-   *     Typically, a filename extension like 'cpp' or 'java'.
-   * @param {number|boolean} opt_numberLines True to number lines,
-   *     or the 1-indexed number of the first line in sourceCodeHtml.
-   * @return {string} code as html, but prettier
-   */
-  var prettyPrintOne;
-  /**
-   * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
-   * {@code class=prettyprint} and prettify them.
-   *
-   * @param {Function} opt_whenDone called when prettifying is done.
-   * @param {HTMLElement|HTMLDocument} opt_root an element or document
-   *   containing all the elements to pretty print.
-   *   Defaults to {@code document.body}.
-   */
-  var prettyPrint;
-  
-  
-  (function () {
-    var win = window;
-    // Keyword lists for various languages.
-    // We use things that coerce to strings to make them compact when minified
-    // and to defeat aggressive optimizers that fold large string constants.
-    var FLOW_CONTROL_KEYWORDS = ["break,continue,do,else,for,if,return,while"];
-    var C_KEYWORDS = [FLOW_CONTROL_KEYWORDS,"auto,case,char,const,default," + 
-        "double,enum,extern,float,goto,inline,int,long,register,short,signed," +
-        "sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"];
-    var COMMON_KEYWORDS = [C_KEYWORDS,"catch,class,delete,false,import," +
-        "new,operator,private,protected,public,this,throw,true,try,typeof"];
-    var CPP_KEYWORDS = [COMMON_KEYWORDS,"alignof,align_union,asm,axiom,bool," +
-        "concept,concept_map,const_cast,constexpr,decltype,delegate," +
-        "dynamic_cast,explicit,export,friend,generic,late_check," +
-        "mutable,namespace,nullptr,property,reinterpret_cast,static_assert," +
-        "static_cast,template,typeid,typename,using,virtual,where"];
-    var JAVA_KEYWORDS = [COMMON_KEYWORDS,
-        "abstract,assert,boolean,byte,extends,final,finally,implements,import," +
-        "instanceof,interface,null,native,package,strictfp,super,synchronized," +
-        "throws,transient"];
-    var CSHARP_KEYWORDS = [JAVA_KEYWORDS,
-        "as,base,by,checked,decimal,delegate,descending,dynamic,event," +
-        "fixed,foreach,from,group,implicit,in,internal,into,is,let," +
-        "lock,object,out,override,orderby,params,partial,readonly,ref,sbyte," +
-        "sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort," +
-        "var,virtual,where"];
-    var COFFEE_KEYWORDS = "all,and,by,catch,class,else,extends,false,finally," +
-        "for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then," +
-        "throw,true,try,unless,until,when,while,yes";
-    var JSCRIPT_KEYWORDS = [COMMON_KEYWORDS,
-        "debugger,eval,export,function,get,null,set,undefined,var,with," +
-        "Infinity,NaN"];
-    var PERL_KEYWORDS = "caller,delete,die,do,dump,elsif,eval,exit,foreach,for," +
-        "goto,if,import,last,local,my,next,no,our,print,package,redo,require," +
-        "sub,undef,unless,until,use,wantarray,while,BEGIN,END";
-    var PYTHON_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "and,as,assert,class,def,del," +
-        "elif,except,exec,finally,from,global,import,in,is,lambda," +
-        "nonlocal,not,or,pass,print,raise,try,with,yield," +
-        "False,True,None"];
-    var RUBY_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "alias,and,begin,case,class," +
-        "def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo," +
-        "rescue,retry,self,super,then,true,undef,unless,until,when,yield," +
-        "BEGIN,END"];
-     var RUST_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "as,assert,const,copy,drop," +
-        "enum,extern,fail,false,fn,impl,let,log,loop,match,mod,move,mut,priv," +
-        "pub,pure,ref,self,static,struct,true,trait,type,unsafe,use"];
-    var SH_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "case,done,elif,esac,eval,fi," +
-        "function,in,local,set,then,until"];
-    var ALL_KEYWORDS = [
-        CPP_KEYWORDS, CSHARP_KEYWORDS, JSCRIPT_KEYWORDS, PERL_KEYWORDS,
-        PYTHON_KEYWORDS, RUBY_KEYWORDS, SH_KEYWORDS];
-    var C_TYPES = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)\b/;
-  
-    // token style names.  correspond to css classes
-    /**
-     * token style for a string literal
-     * @const
-     */
-    var PR_STRING = 'str';
-    /**
-     * token style for a keyword
-     * @const
-     */
-    var PR_KEYWORD = 'kwd';
-    /**
-     * token style for a comment
-     * @const
-     */
-    var PR_COMMENT = 'com';
-    /**
-     * token style for a type
-     * @const
-     */
-    var PR_TYPE = 'typ';
-    /**
-     * token style for a literal value.  e.g. 1, null, true.
-     * @const
-     */
-    var PR_LITERAL = 'lit';
-    /**
-     * token style for a punctuation string.
-     * @const
-     */
-    var PR_PUNCTUATION = 'pun';
-    /**
-     * token style for plain text.
-     * @const
-     */
-    var PR_PLAIN = 'pln';
-  
-    /**
-     * token style for an sgml tag.
-     * @const
-     */
-    var PR_TAG = 'tag';
-    /**
-     * token style for a markup declaration such as a DOCTYPE.
-     * @const
-     */
-    var PR_DECLARATION = 'dec';
-    /**
-     * token style for embedded source.
-     * @const
-     */
-    var PR_SOURCE = 'src';
-    /**
-     * token style for an sgml attribute name.
-     * @const
-     */
-    var PR_ATTRIB_NAME = 'atn';
-    /**
-     * token style for an sgml attribute value.
-     * @const
-     */
-    var PR_ATTRIB_VALUE = 'atv';
-  
-    /**
-     * A class that indicates a section of markup that is not code, e.g. to allow
-     * embedding of line numbers within code listings.
-     * @const
-     */
-    var PR_NOCODE = 'nocode';
-  
-    
-    
-    /**
-     * A set of tokens that can precede a regular expression literal in
-     * javascript
-     * http://web.archive.org/web/20070717142515/http://www.mozilla.org/js/language/js20/rationale/syntax.html
-     * has the full list, but I've removed ones that might be problematic when
-     * seen in languages that don't support regular expression literals.
-     *
-     * <p>Specifically, I've removed any keywords that can't precede a regexp
-     * literal in a syntactically legal javascript program, and I've removed the
-     * "in" keyword since it's not a keyword in many languages, and might be used
-     * as a count of inches.
-     *
-     * <p>The link above does not accurately describe EcmaScript rules since
-     * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
-     * very well in practice.
-     *
-     * @private
-     * @const
-     */
-    var REGEXP_PRECEDER_PATTERN = '(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<<?=?|>>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*';
-    
-    // CAVEAT: this does not properly handle the case where a regular
-    // expression immediately follows another since a regular expression may
-    // have flags for case-sensitivity and the like.  Having regexp tokens
-    // adjacent is not valid in any language I'm aware of, so I'm punting.
-    // TODO: maybe style special characters inside a regexp as punctuation.
-  
-    /**
-     * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
-     * matches the union of the sets of strings matched by the input RegExp.
-     * Since it matches globally, if the input strings have a start-of-input
-     * anchor (/^.../), it is ignored for the purposes of unioning.
-     * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
-     * @return {RegExp} a global regex.
-     */
-    function combinePrefixPatterns(regexs) {
-      var capturedGroupIndex = 0;
-    
-      var needToFoldCase = false;
-      var ignoreCase = false;
-      for (var i = 0, n = regexs.length; i < n; ++i) {
-        var regex = regexs[i];
-        if (regex.ignoreCase) {
-          ignoreCase = true;
-        } else if (/[a-z]/i.test(regex.source.replace(
-                       /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
-          needToFoldCase = true;
-          ignoreCase = false;
-          break;
+        return LruCache;
+    }();
+    var PersistentStorage = function() {
+        var ls, methods;
+        try {
+            ls = window.localStorage;
+            ls.setItem("~~~", "!");
+            ls.removeItem("~~~");
+        } catch (err) {
+            ls = null;
+        }
+        function PersistentStorage(namespace) {
+            this.prefix = [ "__", namespace, "__" ].join("");
+            this.ttlKey = "__ttl__";
+            this.keyMatcher = new RegExp("^" + this.prefix);
+        }
+        if (ls && window.JSON) {
+            methods = {
+                _prefix: function(key) {
+                    return this.prefix + key;
+                },
+                _ttlKey: function(key) {
+                    return this._prefix(key) + this.ttlKey;
+                },
+                get: function(key) {
+                    if (this.isExpired(key)) {
+                        this.remove(key);
+                    }
+                    return decode(ls.getItem(this._prefix(key)));
+                },
+                set: function(key, val, ttl) {
+                    if (_.isNumber(ttl)) {
+                        ls.setItem(this._ttlKey(key), encode(now() + ttl));
+                    } else {
+                        ls.removeItem(this._ttlKey(key));
+                    }
+                    return ls.setItem(this._prefix(key), encode(val));
+                },
+                remove: function(key) {
+                    ls.removeItem(this._ttlKey(key));
+                    ls.removeItem(this._prefix(key));
+                    return this;
+                },
+                clear: function() {
+                    var i, key, keys = [], len = ls.length;
+                    for (i = 0; i < len; i++) {
+                        if ((key = ls.key(i)).match(this.keyMatcher)) {
+                            keys.push(key.replace(this.keyMatcher, ""));
+                        }
+                    }
+                    for (i = keys.length; i--; ) {
+                        this.remove(keys[i]);
+                    }
+                    return this;
+                },
+                isExpired: function(key) {
+                    var ttl = decode(ls.getItem(this._ttlKey(key)));
+                    return _.isNumber(ttl) && now() > ttl ? true : false;
+                }
+            };
+        } else {
+            methods = {
+                get: _.noop,
+                set: _.noop,
+                remove: _.noop,
+                clear: _.noop,
+                isExpired: _.noop
+            };
+        }
+        _.mixin(PersistentStorage.prototype, methods);
+        return PersistentStorage;
+        function now() {
+            return new Date().getTime();
+        }
+        function encode(val) {
+            return JSON.stringify(_.isUndefined(val) ? null : val);
+        }
+        function decode(val) {
+            return JSON.parse(val);
+        }
+    }();
+    var Transport = function() {
+        var pendingRequestsCount = 0, pendingRequests = {}, maxPendingRequests = 6, requestCache = new LruCache(10);
+        function Transport(o) {
+            o = o || {};
+            this._send = o.transport ? callbackToDeferred(o.transport) : $.ajax;
+            this._get = o.rateLimiter ? o.rateLimiter(this._get) : this._get;
+        }
+        Transport.setMaxPendingRequests = function setMaxPendingRequests(num) {
+            maxPendingRequests = num;
+        };
+        Transport.resetCache = function clearCache() {
+            requestCache = new LruCache(10);
+        };
+        _.mixin(Transport.prototype, {
+            _get: function(url, o, cb) {
+                var that = this, jqXhr;
+                if (jqXhr = pendingRequests[url]) {
+                    jqXhr.done(done).fail(fail);
+                } else if (pendingRequestsCount < maxPendingRequests) {
+                    pendingRequestsCount++;
+                    pendingRequests[url] = this._send(url, o).done(done).fail(fail).always(always);
+                } else {
+                    this.onDeckRequestArgs = [].slice.call(arguments, 0);
+                }
+                function done(resp) {
+                    cb && cb(null, resp);
+                    requestCache.set(url, resp);
+                }
+                function fail() {
+                    cb && cb(true);
+                }
+                function always() {
+                    pendingRequestsCount--;
+                    delete pendingRequests[url];
+                    if (that.onDeckRequestArgs) {
+                        that._get.apply(that, that.onDeckRequestArgs);
+                        that.onDeckRequestArgs = null;
+                    }
+                }
+            },
+            get: function(url, o, cb) {
+                var resp;
+                if (_.isFunction(o)) {
+                    cb = o;
+                    o = {};
+                }
+                if (resp = requestCache.get(url)) {
+                    _.defer(function() {
+                        cb && cb(null, resp);
+                    });
+                } else {
+                    this._get(url, o, cb);
+                }
+                return !!resp;
+            }
+        });
+        return Transport;
+        function callbackToDeferred(fn) {
+            return function customSendWrapper(url, o) {
+                var deferred = $.Deferred();
+                fn(url, o, onSuccess, onError);
+                return deferred;
+                function onSuccess(resp) {
+                    _.defer(function() {
+                        deferred.resolve(resp);
+                    });
+                }
+                function onError(err) {
+                    _.defer(function() {
+                        deferred.reject(err);
+                    });
+                }
+            };
         }
-      }
-    
-      var escapeCharToCodeUnit = {
-        'b': 8,
-        't': 9,
-        'n': 0xa,
-        'v': 0xb,
-        'f': 0xc,
-        'r': 0xd
-      };
-    
-      function decodeEscape(charsetPart) {
-        var cc0 = charsetPart.charCodeAt(0);
-        if (cc0 !== 92 /* \\ */) {
-          return cc0;
+    }();
+    var SearchIndex = function() {
+        function SearchIndex(o) {
+            o = o || {};
+            if (!o.datumTokenizer || !o.queryTokenizer) {
+                $.error("datumTokenizer and queryTokenizer are both required");
+            }
+            this.datumTokenizer = o.datumTokenizer;
+            this.queryTokenizer = o.queryTokenizer;
+            this.reset();
         }
-        var c1 = charsetPart.charAt(1);
-        cc0 = escapeCharToCodeUnit[c1];
-        if (cc0) {
-          return cc0;
-        } else if ('0' <= c1 && c1 <= '7') {
-          return parseInt(charsetPart.substring(1), 8);
-        } else if (c1 === 'u' || c1 === 'x') {
-          return parseInt(charsetPart.substring(2), 16);
-        } else {
-          return charsetPart.charCodeAt(1);
+        _.mixin(SearchIndex.prototype, {
+            bootstrap: function bootstrap(o) {
+                this.datums = o.datums;
+                this.trie = o.trie;
+            },
+            add: function(data) {
+                var that = this;
+                data = _.isArray(data) ? data : [ data ];
+                _.each(data, function(datum) {
+                    var id, tokens;
+                    id = that.datums.push(datum) - 1;
+                    tokens = normalizeTokens(that.datumTokenizer(datum));
+                    _.each(tokens, function(token) {
+                        var node, chars, ch;
+                        node = that.trie;
+                        chars = token.split("");
+                        while (ch = chars.shift()) {
+                            node = node.children[ch] || (node.children[ch] = newNode());
+                            node.ids.push(id);
+                        }
+                    });
+                });
+            },
+            get: function get(query) {
+                var that = this, tokens, matches;
+                tokens = normalizeTokens(this.queryTokenizer(query));
+                _.each(tokens, function(token) {
+                    var node, chars, ch, ids;
+                    if (matches && matches.length === 0) {
+                        return false;
+                    }
+                    node = that.trie;
+                    chars = token.split("");
+                    while (node && (ch = chars.shift())) {
+                        node = node.children[ch];
+                    }
+                    if (node && chars.length === 0) {
+                        ids = node.ids.slice(0);
+                        matches = matches ? getIntersection(matches, ids) : ids;
+                    } else {
+                        matches = [];
+                        return false;
+                    }
+                });
+                return matches ? _.map(unique(matches), function(id) {
+                    return that.datums[id];
+                }) : [];
+            },
+            reset: function reset() {
+                this.datums = [];
+                this.trie = newNode();
+            },
+            serialize: function serialize() {
+                return {
+                    datums: this.datums,
+                    trie: this.trie
+                };
+            }
+        });
+        return SearchIndex;
+        function normalizeTokens(tokens) {
+            tokens = _.filter(tokens, function(token) {
+                return !!token;
+            });
+            tokens = _.map(tokens, function(token) {
+                return token.toLowerCase();
+            });
+            return tokens;
         }
-      }
-    
-      function encodeEscape(charCode) {
-        if (charCode < 0x20) {
-          return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
+        function newNode() {
+            return {
+                ids: [],
+                children: {}
+            };
         }
-        var ch = String.fromCharCode(charCode);
-        return (ch === '\\' || ch === '-' || ch === ']' || ch === '^')
-            ? "\\" + ch : ch;
-      }
-    
-      function caseFoldCharset(charSet) {
-        var charsetParts = charSet.substring(1, charSet.length - 1).match(
-            new RegExp(
-                '\\\\u[0-9A-Fa-f]{4}'
-                + '|\\\\x[0-9A-Fa-f]{2}'
-                + '|\\\\[0-3][0-7]{0,2}'
-                + '|\\\\[0-7]{1,2}'
-                + '|\\\\[\\s\\S]'
-                + '|-'
-                + '|[^-\\\\]',
-                'g'));
-        var ranges = [];
-        var inverse = charsetParts[0] === '^';
-    
-        var out = ['['];
-        if (inverse) { out.push('^'); }
-    
-        for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
-          var p = charsetParts[i];
-          if (/\\[bdsw]/i.test(p)) {  // Don't muck with named groups.
-            out.push(p);
-          } else {
-            var start = decodeEscape(p);
-            var end;
-            if (i + 2 < n && '-' === charsetParts[i + 1]) {
-              end = decodeEscape(charsetParts[i + 2]);
-              i += 2;
+        function unique(array) {
+            var seen = {}, uniques = [];
+            for (var i = 0; i < array.length; i++) {
+                if (!seen[array[i]]) {
+                    seen[array[i]] = true;
+                    uniques.push(array[i]);
+                }
+            }
+            return uniques;
+        }
+        function getIntersection(arrayA, arrayB) {
+            var ai = 0, bi = 0, intersection = [];
+            arrayA = arrayA.sort(compare);
+            arrayB = arrayB.sort(compare);
+            while (ai < arrayA.length && bi < arrayB.length) {
+                if (arrayA[ai] < arrayB[bi]) {
+                    ai++;
+                } else if (arrayA[ai] > arrayB[bi]) {
+                    bi++;
+                } else {
+                    intersection.push(arrayA[ai]);
+                    ai++;
+                    bi++;
+                }
+            }
+            return intersection;
+            function compare(a, b) {
+                return a - b;
+            }
+        }
+    }();
+    var oParser = function() {
+        return {
+            local: getLocal,
+            prefetch: getPrefetch,
+            remote: getRemote
+        };
+        function getLocal(o) {
+            return o.local || null;
+        }
+        function getPrefetch(o) {
+            var prefetch, defaults;
+            defaults = {
+                url: null,
+                thumbprint: "",
+                ttl: 24 * 60 * 60 * 1e3,
+                filter: null,
+                ajax: {}
+            };
+            if (prefetch = o.prefetch || null) {
+                prefetch = _.isString(prefetch) ? {
+                    url: prefetch
+                } : prefetch;
+                prefetch = _.mixin(defaults, prefetch);
+                prefetch.thumbprint = VERSION + prefetch.thumbprint;
+                prefetch.ajax.type = prefetch.ajax.type || "GET";
+                prefetch.ajax.dataType = prefetch.ajax.dataType || "json";
+                !prefetch.url && $.error("prefetch requires url to be set");
+            }
+            return prefetch;
+        }
+        function getRemote(o) {
+            var remote, defaults;
+            defaults = {
+                url: null,
+                wildcard: "%QUERY",
+                replace: null,
+                rateLimitBy: "debounce",
+                rateLimitWait: 300,
+                send: null,
+                filter: null,
+                ajax: {}
+            };
+            if (remote = o.remote || null) {
+                remote = _.isString(remote) ? {
+                    url: remote
+                } : remote;
+                remote = _.mixin(defaults, remote);
+                remote.rateLimiter = /^throttle$/i.test(remote.rateLimitBy) ? byThrottle(remote.rateLimitWait) : byDebounce(remote.rateLimitWait);
+                remote.ajax.type = remote.ajax.type || "GET";
+                remote.ajax.dataType = remote.ajax.dataType || "json";
+                delete remote.rateLimitBy;
+                delete remote.rateLimitWait;
+                !remote.url && $.error("remote requires url to be set");
+            }
+            return remote;
+            function byDebounce(wait) {
+                return function(fn) {
+                    return _.debounce(fn, wait);
+                };
+            }
+            function byThrottle(wait) {
+                return function(fn) {
+                    return _.throttle(fn, wait);
+                };
+            }
+        }
+    }();
+    (function(root) {
+        var old, keys;
+        old = root.Bloodhound;
+        keys = {
+            data: "data",
+            protocol: "protocol",
+            thumbprint: "thumbprint"
+        };
+        root.Bloodhound = Bloodhound;
+        function Bloodhound(o) {
+            if (!o || !o.local && !o.prefetch && !o.remote) {
+                $.error("one of local, prefetch, or remote is required");
+            }
+            this.limit = o.limit || 5;
+            this.sorter = getSorter(o.sorter);
+            this.dupDetector = o.dupDetector || ignoreDuplicates;
+            this.local = oParser.local(o);
+            this.prefetch = oParser.prefetch(o);
+            this.remote = oParser.remote(o);
+            this.cacheKey = this.prefetch ? this.prefetch.cacheKey || this.prefetch.url : null;
+            this.index = new SearchIndex({
+                datumTokenizer: o.datumTokenizer,
+                queryTokenizer: o.queryTokenizer
+            });
+            this.storage = this.cacheKey ? new PersistentStorage(this.cacheKey) : null;
+        }
+        Bloodhound.noConflict = function noConflict() {
+            root.Bloodhound = old;
+            return Bloodhound;
+        };
+        Bloodhound.tokenizers = tokenizers;
+        _.mixin(Bloodhound.prototype, {
+            _loadPrefetch: function loadPrefetch(o) {
+                var that = this, serialized, deferred;
+                if (serialized = this._readFromStorage(o.thumbprint)) {
+                    this.index.bootstrap(serialized);
+                    deferred = $.Deferred().resolve();
+                } else {
+                    deferred = $.ajax(o.url, o.ajax).done(handlePrefetchResponse);
+                }
+                return deferred;
+                function handlePrefetchResponse(resp) {
+                    that.clear();
+                    that.add(o.filter ? o.filter(resp) : resp);
+                    that._saveToStorage(that.index.serialize(), o.thumbprint, o.ttl);
+                }
+            },
+            _getFromRemote: function getFromRemote(query, cb) {
+                var that = this, url, uriEncodedQuery;
+                query = query || "";
+                uriEncodedQuery = encodeURIComponent(query);
+                url = this.remote.replace ? this.remote.replace(this.remote.url, query) : this.remote.url.replace(this.remote.wildcard, uriEncodedQuery);
+                return this.transport.get(url, this.remote.ajax, handleRemoteResponse);
+                function handleRemoteResponse(err, resp) {
+                    err ? cb([]) : cb(that.remote.filter ? that.remote.filter(resp) : resp);
+                }
+            },
+            _saveToStorage: function saveToStorage(data, thumbprint, ttl) {
+                if (this.storage) {
+                    this.storage.set(keys.data, data, ttl);
+                    this.storage.set(keys.protocol, location.protocol, ttl);
+                    this.storage.set(keys.thumbprint, thumbprint, ttl);
+                }
+            },
+            _readFromStorage: function readFromStorage(thumbprint) {
+                var stored = {}, isExpired;
+                if (this.storage) {
+                    stored.data = this.storage.get(keys.data);
+                    stored.protocol = this.storage.get(keys.protocol);
+                    stored.thumbprint = this.storage.get(keys.thumbprint);
+                }
+                isExpired = stored.thumbprint !== thumbprint || stored.protocol !== location.protocol;
+                return stored.data && !isExpired ? stored.data : null;
+            },
+            _initialize: function initialize() {
+                var that = this, local = this.local, deferred;
+                deferred = this.prefetch ? this._loadPrefetch(this.prefetch) : $.Deferred().resolve();
+                local && deferred.done(addLocalToIndex);
+                this.transport = this.remote ? new Transport(this.remote) : null;
+                return this.initPromise = deferred.promise();
+                function addLocalToIndex() {
+                    that.add(_.isFunction(local) ? local() : local);
+                }
+            },
+            initialize: function initialize(force) {
+                return !this.initPromise || force ? this._initialize() : this.initPromise;
+            },
+            add: function add(data) {
+                this.index.add(data);
+            },
+            get: function get(query, cb) {
+                var that = this, matches = [], cacheHit = false;
+                matches = this.index.get(query);
+                matches = this.sorter(matches).slice(0, this.limit);
+                if (matches.length < this.limit && this.transport) {
+                    cacheHit = this._getFromRemote(query, returnRemoteMatches);
+                }
+                if (!cacheHit) {
+                    (matches.length > 0 || !this.transport) && cb && cb(matches);
+                }
+                function returnRemoteMatches(remoteMatches) {
+                    var matchesWithBackfill = matches.slice(0);
+                    _.each(remoteMatches, function(remoteMatch) {
+                        var isDuplicate;
+                        isDuplicate = _.some(matchesWithBackfill, function(match) {
+                            return that.dupDetector(remoteMatch, match);
+                        });
+                        !isDuplicate && matchesWithBackfill.push(remoteMatch);
+                        return matchesWithBackfill.length < that.limit;
+                    });
+                    cb && cb(that.sorter(matchesWithBackfill));
+                }
+            },
+            clear: function clear() {
+                this.index.reset();
+            },
+            clearPrefetchCache: function clearPrefetchCache() {
+                this.storage && this.storage.clear();
+            },
+            clearRemoteCache: function clearRemoteCache() {
+                this.transport && Transport.resetCache();
+            },
+            ttAdapter: function ttAdapter() {
+                return _.bind(this.get, this);
+            }
+        });
+        return Bloodhound;
+        function getSorter(sortFn) {
+            return _.isFunction(sortFn) ? sort : noSort;
+            function sort(array) {
+                return array.sort(sortFn);
+            }
+            function noSort(array) {
+                return array;
+            }
+        }
+        function ignoreDuplicates() {
+            return false;
+        }
+    })(this);
+    var html = {
+        wrapper: '<span class="twitter-typeahead"></span>',
+        dropdown: '<span class="tt-dropdown-menu"></span>',
+        dataset: '<div class="tt-dataset-%CLASS%"></div>',
+        suggestions: '<span class="tt-suggestions"></span>',
+        suggestion: '<div class="tt-suggestion"></div>'
+    };
+    var css = {
+        wrapper: {
+            position: "relative",
+            display: "inline-block"
+        },
+        hint: {
+            position: "absolute",
+            top: "0",
+            left: "0",
+            borderColor: "transparent",
+            boxShadow: "none"
+        },
+        input: {
+            position: "relative",
+            verticalAlign: "top",
+            backgroundColor: "transparent"
+        },
+        inputWithNoHint: {
+            position: "relative",
+            verticalAlign: "top"
+        },
+        dropdown: {
+            position: "absolute",
+            top: "100%",
+            left: "0",
+            zIndex: "100",
+            display: "none"
+        },
+        suggestions: {
+            display: "block"
+        },
+        suggestion: {
+            whiteSpace: "nowrap",
+            cursor: "pointer"
+        },
+        suggestionChild: {
+            whiteSpace: "normal"
+        },
+        ltr: {
+            left: "0",
+            right: "auto"
+        },
+        rtl: {
+            left: "auto",
+            right: " 0"
+        }
+    };
+    if (_.isMsie()) {
+        _.mixin(css.input, {
+            backgroundImage: "url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)"
+        });
+    }
+    if (_.isMsie() && _.isMsie() <= 7) {
+        _.mixin(css.input, {
+            marginTop: "-1px"
+        });
+    }
+    var EventBus = function() {
+        var namespace = "typeahead:";
+        function EventBus(o) {
+            if (!o || !o.el) {
+                $.error("EventBus initialized without el");
+            }
+            this.$el = $(o.el);
+        }
+        _.mixin(EventBus.prototype, {
+            trigger: function(type) {
+                var args = [].slice.call(arguments, 1);
+                this.$el.trigger(namespace + type, args);
+            }
+        });
+        return EventBus;
+    }();
+    var EventEmitter = function() {
+        var splitter = /\s+/, nextTick = getNextTick();
+        return {
+            onSync: onSync,
+            onAsync: onAsync,
+            off: off,
+            trigger: trigger
+        };
+        function on(method, types, cb, context) {
+            var type;
+            if (!cb) {
+                return this;
+            }
+            types = types.split(splitter);
+            cb = context ? bindContext(cb, context) : cb;
+            this._callbacks = this._callbacks || {};
+            while (type = types.shift()) {
+                this._callbacks[type] = this._callbacks[type] || {
+                    sync: [],
+                    async: []
+                };
+                this._callbacks[type][method].push(cb);
+            }
+            return this;
+        }
+        function onAsync(types, cb, context) {
+            return on.call(this, "async", types, cb, context);
+        }
+        function onSync(types, cb, context) {
+            return on.call(this, "sync", types, cb, context);
+        }
+        function off(types) {
+            var type;
+            if (!this._callbacks) {
+                return this;
+            }
+            types = types.split(splitter);
+            while (type = types.shift()) {
+                delete this._callbacks[type];
+            }
+            return this;
+        }
+        function trigger(types) {
+            var type, callbacks, args, syncFlush, asyncFlush;
+            if (!this._callbacks) {
+                return this;
+            }
+            types = types.split(splitter);
+            args = [].slice.call(arguments, 1);
+            while ((type = types.shift()) && (callbacks = this._callbacks[type])) {
+                syncFlush = getFlush(callbacks.sync, this, [ type ].concat(args));
+                asyncFlush = getFlush(callbacks.async, this, [ type ].concat(args));
+                syncFlush() && nextTick(asyncFlush);
+            }
+            return this;
+        }
+        function getFlush(callbacks, context, args) {
+            return flush;
+            function flush() {
+                var cancelled;
+                for (var i = 0; !cancelled && i < callbacks.length; i += 1) {
+                    cancelled = callbacks[i].apply(context, args) === false;
+                }
+                return !cancelled;
+            }
+        }
+        function getNextTick() {
+            var nextTickFn;
+            if (window.setImmediate) {
+                nextTickFn = function nextTickSetImmediate(fn) {
+                    setImmediate(function() {
+                        fn();
+                    });
+                };
             } else {
-              end = start;
+                nextTickFn = function nextTickSetTimeout(fn) {
+                    setTimeout(function() {
+                        fn();
+                    }, 0);
+                };
             }
-            ranges.push([start, end]);
-            // If the range might intersect letters, then expand it.
-            // This case handling is too simplistic.
-            // It does not deal with non-latin case folding.
-            // It works for latin source code identifiers though.
-            if (!(end < 65 || start > 122)) {
-              if (!(end < 65 || start > 90)) {
-                ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
-              }
-              if (!(end < 97 || start > 122)) {
-                ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
-              }
+            return nextTickFn;
+        }
+        function bindContext(fn, context) {
+            return fn.bind ? fn.bind(context) : function() {
+                fn.apply(context, [].slice.call(arguments, 0));
+            };
+        }
+    }();
+    var highlight = function(doc) {
+        var defaults = {
+            node: null,
+            pattern: null,
+            tagName: "strong",
+            className: null,
+            wordsOnly: false,
+            caseSensitive: false
+        };
+        return function hightlight(o) {
+            var regex;
+            o = _.mixin({}, defaults, o);
+            if (!o.node || !o.pattern) {
+                return;
             }
-          }
+            o.pattern = _.isArray(o.pattern) ? o.pattern : [ o.pattern ];
+            regex = getRegex(o.pattern, o.caseSensitive, o.wordsOnly);
+            traverse(o.node, hightlightTextNode);
+            function hightlightTextNode(textNode) {
+                var match, patternNode;
+                if (match = regex.exec(textNode.data)) {
+                    wrapperNode = doc.createElement(o.tagName);
+                    o.className && (wrapperNode.className = o.className);
+                    patternNode = textNode.splitText(match.index);
+                    patternNode.splitText(match[0].length);
+                    wrapperNode.appendChild(patternNode.cloneNode(true));
+                    textNode.parentNode.replaceChild(wrapperNode, patternNode);
+                }
+                return !!match;
+            }
+            function traverse(el, hightlightTextNode) {
+                var childNode, TEXT_NODE_TYPE = 3;
+                for (var i = 0; i < el.childNodes.length; i++) {
+                    childNode = el.childNodes[i];
+                    if (childNode.nodeType === TEXT_NODE_TYPE) {
+                        i += hightlightTextNode(childNode) ? 1 : 0;
+                    } else {
+                        traverse(childNode, hightlightTextNode);
+                    }
+                }
+            }
+        };
+        function getRegex(patterns, caseSensitive, wordsOnly) {
+            var escapedPatterns = [], regexStr;
+            for (var i = 0; i < patterns.length; i++) {
+                escapedPatterns.push(_.escapeRegExChars(patterns[i]));
+            }
+            regexStr = wordsOnly ? "\\b(" + escapedPatterns.join("|") + ")\\b" : "(" + escapedPatterns.join("|") + ")";
+            return caseSensitive ? new RegExp(regexStr) : new RegExp(regexStr, "i");
         }
-    
-        // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
-        // -> [[1, 12], [14, 14], [16, 17]]
-        ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1]  - a[1]); });
-        var consolidatedRanges = [];
-        var lastRange = [];
-        for (var i = 0; i < ranges.length; ++i) {
-          var range = ranges[i];
-          if (range[0] <= lastRange[1] + 1) {
-            lastRange[1] = Math.max(lastRange[1], range[1]);
-          } else {
-            consolidatedRanges.push(lastRange = range);
-          }
+    }(window.document);
+    var Input = function() {
+        var specialKeyCodeMap;
+        specialKeyCodeMap = {
+            9: "tab",
+            27: "esc",
+            37: "left",
+            39: "right",
+            13: "enter",
+            38: "up",
+            40: "down"
+        };
+        function Input(o) {
+            var that = this, onBlur, onFocus, onKeydown, onInput;
+            o = o || {};
+            if (!o.input) {
+                $.error("input is missing");
+            }
+            onBlur = _.bind(this._onBlur, this);
+            onFocus = _.bind(this._onFocus, this);
+            onKeydown = _.bind(this._onKeydown, this);
+            onInput = _.bind(this._onInput, this);
+            this.$hint = $(o.hint);
+            this.$input = $(o.input).on("blur.tt", onBlur).on("focus.tt", onFocus).on("keydown.tt", onKeydown);
+            if (this.$hint.length === 0) {
+                this.setHint = this.getHint = this.clearHint = this.clearHintIfInvalid = _.noop;
+            }
+            if (!_.isMsie()) {
+                this.$input.on("input.tt", onInput);
+            } else {
+                this.$input.on("keydown.tt keypress.tt cut.tt paste.tt", function($e) {
+                    if (specialKeyCodeMap[$e.which || $e.keyCode]) {
+                        return;
+                    }
+                    _.defer(_.bind(that._onInput, that, $e));
+                });
+            }
+            this.query = this.$input.val();
+            this.$overflowHelper = buildOverflowHelper(this.$input);
         }
-    
-        for (var i = 0; i < consolidatedRanges.length; ++i) {
-          var range = consolidatedRanges[i];
-          out.push(encodeEscape(range[0]));
-          if (range[1] > range[0]) {
-            if (range[1] + 1 > range[0]) { out.push('-'); }
-            out.push(encodeEscape(range[1]));
-          }
+        Input.normalizeQuery = function(str) {
+            return (str || "").replace(/^\s*/g, "").replace(/\s{2,}/g, " ");
+        };
+        _.mixin(Input.prototype, EventEmitter, {
+            _onBlur: function onBlur() {
+                this.resetInputValue();
+                this.trigger("blurred");
+            },
+            _onFocus: function onFocus() {
+                this.trigger("focused");
+            },
+            _onKeydown: function onKeydown($e) {
+                var keyName = specialKeyCodeMap[$e.which || $e.keyCode];
+                this._managePreventDefault(keyName, $e);
+                if (keyName && this._shouldTrigger(keyName, $e)) {
+                    this.trigger(keyName + "Keyed", $e);
+                }
+            },
+            _onInput: function onInput() {
+                this._checkInputValue();
+            },
+            _managePreventDefault: function managePreventDefault(keyName, $e) {
+                var preventDefault, hintValue, inputValue;
+                switch (keyName) {
+                  case "tab":
+                    hintValue = this.getHint();
+                    inputValue = this.getInputValue();
+                    preventDefault = hintValue && hintValue !== inputValue && !withModifier($e);
+                    break;
+
+                  case "up":
+                  case "down":
+                    preventDefault = !withModifier($e);
+                    break;
+
+                  default:
+                    preventDefault = false;
+                }
+                preventDefault && $e.preventDefault();
+            },
+            _shouldTrigger: function shouldTrigger(keyName, $e) {
+                var trigger;
+                switch (keyName) {
+                  case "tab":
+                    trigger = !withModifier($e);
+                    break;
+
+                  default:
+                    trigger = true;
+                }
+                return trigger;
+            },
+            _checkInputValue: function checkInputValue() {
+                var inputValue, areEquivalent, hasDifferentWhitespace;
+                inputValue = this.getInputValue();
+                areEquivalent = areQueriesEquivalent(inputValue, this.query);
+                hasDifferentWhitespace = areEquivalent ? this.query.length !== inputValue.length : false;
+                if (!areEquivalent) {
+                    this.trigger("queryChanged", this.query = inputValue);
+                } else if (hasDifferentWhitespace) {
+                    this.trigger("whitespaceChanged", this.query);
+                }
+            },
+            focus: function focus() {
+                this.$input.focus();
+            },
+            blur: function blur() {
+                this.$input.blur();
+            },
+            getQuery: function getQuery() {
+                return this.query;
+            },
+            setQuery: function setQuery(query) {
+                this.query = query;
+            },
+            getInputValue: function getInputValue() {
+                return this.$input.val();
+            },
+            setInputValue: function setInputValue(value, silent) {
+                this.$input.val(value);
+                silent ? this.clearHint() : this._checkInputValue();
+            },
+            resetInputValue: function resetInputValue() {
+                this.setInputValue(this.query, true);
+            },
+            getHint: function getHint() {
+                return this.$hint.val();
+            },
+            setHint: function setHint(value) {
+                this.$hint.val(value);
+            },
+            clearHint: function clearHint() {
+                this.setHint("");
+            },
+            clearHintIfInvalid: function clearHintIfInvalid() {
+                var val, hint, valIsPrefixOfHint, isValid;
+                val = this.getInputValue();
+                hint = this.getHint();
+                valIsPrefixOfHint = val !== hint && hint.indexOf(val) === 0;
+                isValid = val !== "" && valIsPrefixOfHint && !this.hasOverflow();
+                !isValid && this.clearHint();
+            },
+            getLanguageDirection: function getLanguageDirection() {
+                return (this.$input.css("direction") || "ltr").toLowerCase();
+            },
+            hasOverflow: function hasOverflow() {
+                var constraint = this.$input.width() - 2;
+                this.$overflowHelper.text(this.getInputValue());
+                return this.$overflowHelper.width() >= constraint;
+            },
+            isCursorAtEnd: function() {
+                var valueLength, selectionStart, range;
+                valueLength = this.$input.val().length;
+                selectionStart = this.$input[0].selectionStart;
+                if (_.isNumber(selectionStart)) {
+                    return selectionStart === valueLength;
+                } else if (document.selection) {
+                    range = document.selection.createRange();
+                    range.moveStart("character", -valueLength);
+                    return valueLength === range.text.length;
+                }
+                return true;
+            },
+            destroy: function destroy() {
+                this.$hint.off(".tt");
+                this.$input.off(".tt");
+                this.$hint = this.$input = this.$overflowHelper = null;
+            }
+        });
+        return Input;
+        function buildOverflowHelper($input) {
+            return $('<pre aria-hidden="true"></pre>').css({
+                position: "absolute",
+                visibility: "hidden",
+                whiteSpace: "pre",
+                fontFamily: $input.css("font-family"),
+                fontSize: $input.css("font-size"),
+                fontStyle: $input.css("font-style"),
+                fontVariant: $input.css("font-variant"),
+                fontWeight: $input.css("font-weight"),
+                wordSpacing: $input.css("word-spacing"),
+                letterSpacing: $input.css("letter-spacing"),
+                textIndent: $input.css("text-indent"),
+                textRendering: $input.css("text-rendering"),
+                textTransform: $input.css("text-transform")
+            }).insertAfter($input);
         }
-        out.push(']');
-        return out.join('');
-      }
-    
-      function allowAnywhereFoldCaseAndRenumberGroups(regex) {
-        // Split into character sets, escape sequences, punctuation strings
-        // like ('(', '(?:', ')', '^'), and runs of characters that do not
-        // include any of the above.
-        var parts = regex.source.match(
-            new RegExp(
-                '(?:'
-                + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]'  // a character set
-                + '|\\\\u[A-Fa-f0-9]{4}'  // a unicode escape
-                + '|\\\\x[A-Fa-f0-9]{2}'  // a hex escape
-                + '|\\\\[0-9]+'  // a back-reference or octal escape
-                + '|\\\\[^ux0-9]'  // other escape sequence
-                + '|\\(\\?[:!=]'  // start of a non-capturing group
-                + '|[\\(\\)\\^]'  // start/end of a group, or line start
-                + '|[^\\x5B\\x5C\\(\\)\\^]+'  // run of other characters
-                + ')',
-                'g'));
-        var n = parts.length;
-    
-        // Maps captured group numbers to the number they will occupy in
-        // the output or to -1 if that has not been determined, or to
-        // undefined if they need not be capturing in the output.
-        var capturedGroups = [];
-    
-        // Walk over and identify back references to build the capturedGroups
-        // mapping.
-        for (var i = 0, groupIndex = 0; i < n; ++i) {
-          var p = parts[i];
-          if (p === '(') {
-            // groups are 1-indexed, so max group index is count of '('
-            ++groupIndex;
-          } else if ('\\' === p.charAt(0)) {
-            var decimalValue = +p.substring(1);
-            if (decimalValue) {
-              if (decimalValue <= groupIndex) {
-                capturedGroups[decimalValue] = -1;
-              } else {
-                // Replace with an unambiguous escape sequence so that
-                // an octal escape sequence does not turn into a backreference
-                // to a capturing group from an earlier regex.
-                parts[i] = encodeEscape(decimalValue);
-              }
+        function areQueriesEquivalent(a, b) {
+            return Input.normalizeQuery(a) === Input.normalizeQuery(b);
+        }
+        function withModifier($e) {
+            return $e.altKey || $e.ctrlKey || $e.metaKey || $e.shiftKey;
+        }
+    }();
+    var Dataset = function() {
+        var datasetKey = "ttDataset", valueKey = "ttValue", datumKey = "ttDatum";
+        function Dataset(o) {
+            o = o || {};
+            o.templates = o.templates || {};
+            if (!o.source) {
+                $.error("missing source");
             }
-          }
+            if (o.name && !isValidName(o.name)) {
+                $.error("invalid dataset name: " + o.name);
+            }
+            this.query = null;
+            this.highlight = !!o.highlight;
+            this.name = o.name || _.getUniqueId();
+            this.source = o.source;
+            this.displayFn = getDisplayFn(o.display || o.displayKey);
+            this.templates = getTemplates(o.templates, this.displayFn);
+            this.$el = $(html.dataset.replace("%CLASS%", this.name));
         }
-    
-        // Renumber groups and reduce capturing groups to non-capturing groups
-        // where possible.
-        for (var i = 1; i < capturedGroups.length; ++i) {
-          if (-1 === capturedGroups[i]) {
-            capturedGroups[i] = ++capturedGroupIndex;
-          }
+        Dataset.extractDatasetName = function extractDatasetName(el) {
+            return $(el).data(datasetKey);
+        };
+        Dataset.extractValue = function extractDatum(el) {
+            return $(el).data(valueKey);
+        };
+        Dataset.extractDatum = function extractDatum(el) {
+            return $(el).data(datumKey);
+        };
+        _.mixin(Dataset.prototype, EventEmitter, {
+            _render: function render(query, suggestions) {
+                if (!this.$el) {
+                    return;
+                }
+                var that = this, hasSuggestions;
+                this.$el.empty();
+                hasSuggestions = suggestions && suggestions.length;
+                if (!hasSuggestions && this.templates.empty) {
+                    this.$el.html(getEmptyHtml()).prepend(that.templates.header ? getHeaderHtml() : null).append(that.templates.footer ? getFooterHtml() : null);
+                } else if (hasSuggestions) {
+                    this.$el.html(getSuggestionsHtml()).prepend(that.templates.header ? getHeaderHtml() : null).append(that.templates.footer ? getFooterHtml() : null);
+                }
+                this.trigger("rendered");
+                function getEmptyHtml() {
+                    return that.templates.empty({
+                        query: query,
+                        isEmpty: true
+                    });
+                }
+                function getSuggestionsHtml() {
+                    var $suggestions, nodes;
+                    $suggestions = $(html.suggestions).css(css.suggestions);
+                    nodes = _.map(suggestions, getSuggestionNode);
+                    $suggestions.append.apply($suggestions, nodes);
+                    that.highlight && highlight({
+                        node: $suggestions[0],
+                        pattern: query
+                    });
+                    return $suggestions;
+                    function getSuggestionNode(suggestion) {
+                        var $el;
+                        $el = $(html.suggestion).append(that.templates.suggestion(suggestion)).data(datasetKey, that.name).data(valueKey, that.displayFn(suggestion)).data(datumKey, suggestion);
+                        $el.children().each(function() {
+                            $(this).css(css.suggestionChild);
+                        });
+                        return $el;
+                    }
+                }
+                function getHeaderHtml() {
+                    return that.templates.header({
+                        query: query,
+                        isEmpty: !hasSuggestions
+                    });
+                }
+                function getFooterHtml() {
+                    return that.templates.footer({
+                        query: query,
+                        isEmpty: !hasSuggestions
+                    });
+                }
+            },
+            getRoot: function getRoot() {
+                return this.$el;
+            },
+            update: function update(query) {
+                var that = this;
+                this.query = query;
+                this.canceled = false;
+                this.source(query, render);
+                function render(suggestions) {
+                    if (!that.canceled && query === that.query) {
+                        that._render(query, suggestions);
+                    }
+                }
+            },
+            cancel: function cancel() {
+                this.canceled = true;
+            },
+            clear: function clear() {
+                this.cancel();
+                this.$el.empty();
+                this.trigger("rendered");
+            },
+            isEmpty: function isEmpty() {
+                return this.$el.is(":empty");
+            },
+            destroy: function destroy() {
+                this.$el = null;
+            }
+        });
+        return Dataset;
+        function getDisplayFn(display) {
+            display = display || "value";
+            return _.isFunction(display) ? display : displayFn;
+            function displayFn(obj) {
+                return obj[display];
+            }
         }
-        for (var i = 0, groupIndex = 0; i < n; ++i) {
-          var p = parts[i];
-          if (p === '(') {
-            ++groupIndex;
-            if (!capturedGroups[groupIndex]) {
-              parts[i] = '(?:';
+        function getTemplates(templates, displayFn) {
+            return {
+                empty: templates.empty && _.templatify(templates.empty),
+                header: templates.header && _.templatify(templates.header),
+                footer: templates.footer && _.templatify(templates.footer),
+                suggestion: templates.suggestion || suggestionTemplate
+            };
+            function suggestionTemplate(context) {
+                return "<p>" + displayFn(context) + "</p>";
             }
-          } else if ('\\' === p.charAt(0)) {
-            var decimalValue = +p.substring(1);
-            if (decimalValue && decimalValue <= groupIndex) {
-              parts[i] = '\\' + capturedGroups[decimalValue];
+        }
+        function isValidName(str) {
+            return /^[_a-zA-Z0-9-]+$/.test(str);
+        }
+    }();
+    var Dropdown = function() {
+        function Dropdown(o) {
+            var that = this, onSuggestionClick, onSuggestionMouseEnter, onSuggestionMouseLeave;
+            o = o || {};
+            if (!o.menu) {
+                $.error("menu is required");
             }
-          }
+            this.isOpen = false;
+            this.isEmpty = true;
+            this.datasets = _.map(o.datasets, initializeDataset);
+            onSuggestionClick = _.bind(this._onSuggestionClick, this);
+            onSuggestionMouseEnter = _.bind(this._onSuggestionMouseEnter, this);
+            onSuggestionMouseLeave = _.bind(this._onSuggestionMouseLeave, this);
+            this.$menu = $(o.menu).on("click.tt", ".tt-suggestion", onSuggestionClick).on("mouseenter.tt", ".tt-suggestion", onSuggestionMouseEnter).on("mouseleave.tt", ".tt-suggestion", onSuggestionMouseLeave);
+            _.each(this.datasets, function(dataset) {
+                that.$menu.append(dataset.getRoot());
+                dataset.onSync("rendered", that._onRendered, that);
+            });
         }
-    
-        // Remove any prefix anchors so that the output will match anywhere.
-        // ^^ really does mean an anchored match though.
-        for (var i = 0; i < n; ++i) {
-          if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
+        _.mixin(Dropdown.prototype, EventEmitter, {
+            _onSuggestionClick: function onSuggestionClick($e) {
+                this.trigger("suggestionClicked", $($e.currentTarget));
+            },
+            _onSuggestionMouseEnter: function onSuggestionMouseEnter($e) {
+                this._removeCursor();
+                this._setCursor($($e.currentTarget), true);
+            },
+            _onSuggestionMouseLeave: function onSuggestionMouseLeave() {
+                this._removeCursor();
+            },
+            _onRendered: function onRendered() {
+                this.isEmpty = _.every(this.datasets, isDatasetEmpty);
+                this.isEmpty ? this._hide() : this.isOpen && this._show();
+                this.trigger("datasetRendered");
+                function isDatasetEmpty(dataset) {
+                    return dataset.isEmpty();
+                }
+            },
+            _hide: function() {
+                this.$menu.hide();
+            },
+            _show: function() {
+                this.$menu.css("display", "block");
+            },
+            _getSuggestions: function getSuggestions() {
+                return this.$menu.find(".tt-suggestion");
+            },
+            _getCursor: function getCursor() {
+                return this.$menu.find(".tt-cursor").first();
+            },
+            _setCursor: function setCursor($el, silent) {
+                $el.first().addClass("tt-cursor");
+                !silent && this.trigger("cursorMoved");
+            },
+            _removeCursor: function removeCursor() {
+                this._getCursor().removeClass("tt-cursor");
+            },
+            _moveCursor: function moveCursor(increment) {
+                var $suggestions, $oldCursor, newCursorIndex, $newCursor;
+                if (!this.isOpen) {
+                    return;
+                }
+                $oldCursor = this._getCursor();
+                $suggestions = this._getSuggestions();
+                this._removeCursor();
+                newCursorIndex = $suggestions.index($oldCursor) + increment;
+                newCursorIndex = (newCursorIndex + 1) % ($suggestions.length + 1) - 1;
+                if (newCursorIndex === -1) {
+                    this.trigger("cursorRemoved");
+                    return;
+                } else if (newCursorIndex < -1) {
+                    newCursorIndex = $suggestions.length - 1;
+                }
+                this._setCursor($newCursor = $suggestions.eq(newCursorIndex));
+                this._ensureVisible($newCursor);
+            },
+            _ensureVisible: function ensureVisible($el) {
+                var elTop, elBottom, menuScrollTop, menuHeight;
+                elTop = $el.position().top;
+                elBottom = elTop + $el.outerHeight(true);
+                menuScrollTop = this.$menu.scrollTop();
+                menuHeight = this.$menu.height() + parseInt(this.$menu.css("paddingTop"), 10) + parseInt(this.$menu.css("paddingBottom"), 10);
+                if (elTop < 0) {
+                    this.$menu.scrollTop(menuScrollTop + elTop);
+                } else if (menuHeight < elBottom) {
+                    this.$menu.scrollTop(menuScrollTop + (elBottom - menuHeight));
+                }
+            },
+            close: function close() {
+                if (this.isOpen) {
+                    this.isOpen = false;
+                    this._removeCursor();
+                    this._hide();
+                    this.trigger("closed");
+                }
+            },
+            open: function open() {
+                if (!this.isOpen) {
+                    this.isOpen = true;
+                    !this.isEmpty && this._show();
+                    this.trigger("opened");
+                }
+            },
+            setLanguageDirection: function setLanguageDirection(dir) {
+                this.$menu.css(dir === "ltr" ? css.ltr : css.rtl);
+            },
+            moveCursorUp: function moveCursorUp() {
+                this._moveCursor(-1);
+            },
+            moveCursorDown: function moveCursorDown() {
+                this._moveCursor(+1);
+            },
+            getDatumForSuggestion: function getDatumForSuggestion($el) {
+                var datum = null;
+                if ($el.length) {
+                    datum = {
+                        raw: Dataset.extractDatum($el),
+                        value: Dataset.extractValue($el),
+                        datasetName: Dataset.extractDatasetName($el)
+                    };
+                }
+                return datum;
+            },
+            getDatumForCursor: function getDatumForCursor() {
+                return this.getDatumForSuggestion(this._getCursor().first());
+            },
+            getDatumForTopSuggestion: function getDatumForTopSuggestion() {
+                return this.getDatumForSuggestion(this._getSuggestions().first());
+            },
+            update: function update(query) {
+                _.each(this.datasets, updateDataset);
+                function updateDataset(dataset) {
+                    dataset.update(query);
+                }
+            },
+            empty: function empty() {
+                _.each(this.datasets, clearDataset);
+                this.isEmpty = true;
+                function clearDataset(dataset) {
+                    dataset.clear();
+                }
+            },
+            isVisible: function isVisible() {
+                return this.isOpen && !this.isEmpty;
+            },
+            destroy: function destroy() {
+                this.$menu.off(".tt");
+                this.$menu = null;
+                _.each(this.datasets, destroyDataset);
+                function destroyDataset(dataset) {
+                    dataset.destroy();
+                }
+            }
+        });
+        return Dropdown;
+        function initializeDataset(oDataset) {
+            return new Dataset(oDataset);
         }
-    
-        // Expand letters to groups to handle mixing of case-sensitive and
-        // case-insensitive patterns if necessary.
-        if (regex.ignoreCase && needToFoldCase) {
-          for (var i = 0; i < n; ++i) {
-            var p = parts[i];
-            var ch0 = p.charAt(0);
-            if (p.length >= 2 && ch0 === '[') {
-              parts[i] = caseFoldCharset(p);
-            } else if (ch0 !== '\\') {
-              // TODO: handle letters in numeric escapes.
-              parts[i] = p.replace(
-                  /[a-zA-Z]/g,
-                  function (ch) {
-                    var cc = ch.charCodeAt(0);
-                    return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
-                  });
+    }();
+    var Typeahead = function() {
+        var attrsKey = "ttAttrs";
+        function Typeahead(o) {
+            var $menu, $input, $hint;
+            o = o || {};
+            if (!o.input) {
+                $.error("missing input");
             }
-          }
+            this.isActivated = false;
+            this.autoselect = !!o.autoselect;
+            this.minLength = _.isNumber(o.minLength) ? o.minLength : 1;
+            this.$node = buildDomStructure(o.input, o.withHint);
+            $menu = this.$node.find(".tt-dropdown-menu");
+            $input = this.$node.find(".tt-input");
+            $hint = this.$node.find(".tt-hint");
+            $input.on("blur.tt", function($e) {
+                var active, isActive, hasActive;
+                active = document.activeElement;
+                isActive = $menu.is(active);
+                hasActive = $menu.has(active).length > 0;
+                if (_.isMsie() && (isActive || hasActive)) {
+                    $e.preventDefault();
+                    $e.stopImmediatePropagation();
+                    _.defer(function() {
+                        $input.focus();
+                    });
+                }
+            });
+            $menu.on("mousedown.tt", function($e) {
+                $e.preventDefault();
+            });
+            this.eventBus = o.eventBus || new EventBus({
+                el: $input
+            });
+            this.dropdown = new Dropdown({
+                menu: $menu,
+                datasets: o.datasets
+            }).onSync("suggestionClicked", this._onSuggestionClicked, this).onSync("cursorMoved", this._onCursorMoved, this).onSync("cursorRemoved", this._onCursorRemoved, this).onSync("opened", this._onOpened, this).onSync("closed", this._onClosed, this).onAsync("datasetRendered", this._onDatasetRendered, this);
+            this.input = new Input({
+                input: $input,
+                hint: $hint
+            }).onSync("focused", this._onFocused, this).onSync("blurred", this._onBlurred, this).onSync("enterKeyed", this._onEnterKeyed, this).onSync("tabKeyed", this._onTabKeyed, this).onSync("escKeyed", this._onEscKeyed, this).onSync("upKeyed", this._onUpKeyed, this).onSync("downKeyed", this._onDownKeyed, this).onSync("leftKeyed", this._onLeftKeyed, this).onSync("rightKeyed", this._onRightKeyed, this).onSync("queryChanged", this._onQueryChanged, this).onSync("whitespaceChanged", this._onWhitespaceChanged, this);
+            this._setLanguageDirection();
+        }
+        _.mixin(Typeahead.prototype, {
+            _onSuggestionClicked: function onSuggestionClicked(type, $el) {
+                var datum;
+                if (datum = this.dropdown.getDatumForSuggestion($el)) {
+                    this._select(datum);
+                }
+            },
+            _onCursorMoved: function onCursorMoved() {
+                var datum = this.dropdown.getDatumForCursor();
+                this.input.setInputValue(datum.value, true);
+                this.eventBus.trigger("cursorchanged", datum.raw, datum.datasetName);
+            },
+            _onCursorRemoved: function onCursorRemoved() {
+                this.input.resetInputValue();
+                this._updateHint();
+            },
+            _onDatasetRendered: function onDatasetRendered() {
+                this._updateHint();
+            },
+            _onOpened: function onOpened() {
+                this._updateHint();
+                this.eventBus.trigger("opened");
+            },
+            _onClosed: function onClosed() {
+                this.input.clearHint();
+                this.eventBus.trigger("closed");
+            },
+            _onFocused: function onFocused() {
+                this.isActivated = true;
+                this.dropdown.open();
+            },
+            _onBlurred: function onBlurred() {
+                this.isActivated = false;
+                this.dropdown.empty();
+                this.dropdown.close();
+                this.setVal("", true); //LM
+            },
+            _onEnterKeyed: function onEnterKeyed(type, $e) {
+                var cursorDatum, topSuggestionDatum;
+                cursorDatum = this.dropdown.getDatumForCursor();
+                topSuggestionDatum = this.dropdown.getDatumForTopSuggestion();
+                if (cursorDatum) {
+                    this._select(cursorDatum);
+                    $e.preventDefault();
+                } else if (this.autoselect && topSuggestionDatum) {
+                    this._select(topSuggestionDatum);
+                    $e.preventDefault();
+                }
+            },
+            _onTabKeyed: function onTabKeyed(type, $e) {
+                var datum;
+                if (datum = this.dropdown.getDatumForCursor()) {
+                    this._select(datum);
+                    $e.preventDefault();
+                } else {
+                    this._autocomplete(true);
+                }
+            },
+            _onEscKeyed: function onEscKeyed() {
+                this.dropdown.close();
+                this.input.resetInputValue();
+            },
+            _onUpKeyed: function onUpKeyed() {
+                var query = this.input.getQuery();
+                this.dropdown.isEmpty && query.length >= this.minLength ? this.dropdown.update(query) : this.dropdown.moveCursorUp();
+                this.dropdown.open();
+            },
+            _onDownKeyed: function onDownKeyed() {
+                var query = this.input.getQuery();
+                this.dropdown.isEmpty && query.length >= this.minLength ? this.dropdown.update(query) : this.dropdown.moveCursorDown();
+                this.dropdown.open();
+            },
+            _onLeftKeyed: function onLeftKeyed() {
+                this.dir === "rtl" && this._autocomplete();
+            },
+            _onRightKeyed: function onRightKeyed() {
+                this.dir === "ltr" && this._autocomplete();
+            },
+            _onQueryChanged: function onQueryChanged(e, query) {
+                this.input.clearHintIfInvalid();
+                query.length >= this.minLength ? this.dropdown.update(query) : this.dropdown.empty();
+                this.dropdown.open();
+                this._setLanguageDirection();
+            },
+            _onWhitespaceChanged: function onWhitespaceChanged() {
+                this._updateHint();
+                this.dropdown.open();
+            },
+            _setLanguageDirection: function setLanguageDirection() {
+                var dir;
+                if (this.dir !== (dir = this.input.getLanguageDirection())) {
+                    this.dir = dir;
+                    this.$node.css("direction", dir);
+                    this.dropdown.setLanguageDirection(dir);
+                }
+            },
+            _updateHint: function updateHint() {
+                var datum, val, query, escapedQuery, frontMatchRegEx, match;
+                datum = this.dropdown.getDatumForTopSuggestion();
+                if (datum && this.dropdown.isVisible() && !this.input.hasOverflow()) {
+                    val = this.input.getInputValue();
+                    query = Input.normalizeQuery(val);
+                    escapedQuery = _.escapeRegExChars(query);
+                    frontMatchRegEx = new RegExp("^(?:" + escapedQuery + ")(.+$)", "i");
+                    match = frontMatchRegEx.exec(datum.value);
+                    match ? this.input.setHint(val + match[1]) : this.input.clearHint();
+                } else {
+                    this.input.clearHint();
+                }
+            },
+            _autocomplete: function autocomplete(laxCursor) {
+                var hint, query, isCursorAtEnd, datum;
+                hint = this.input.getHint();
+                query = this.input.getQuery();
+                isCursorAtEnd = laxCursor || this.input.isCursorAtEnd();
+                if (hint && query !== hint && isCursorAtEnd) {
+                    datum = this.dropdown.getDatumForTopSuggestion();
+                    datum && this.input.setInputValue(datum.value);
+                    this.eventBus.trigger("autocompleted", datum.raw, datum.datasetName);
+                }
+            },
+            _select: function select(datum) {
+                this.input.setQuery(datum.value);
+                this.input.setInputValue(datum.value, true);
+                this._setLanguageDirection();
+                this.eventBus.trigger("selected", datum.raw, datum.datasetName);
+                this.dropdown.close();
+                _.defer(_.bind(this.dropdown.empty, this.dropdown));
+            },
+            open: function open() {
+                this.dropdown.open();
+            },
+            close: function close() {
+                this.dropdown.close();
+            },
+            setVal: function setVal(val) {
+                if (this.isActivated) {
+                    this.input.setInputValue(val);
+                } else {
+                    this.input.setQuery(val);
+                    this.input.setInputValue(val, true);
+                }
+                this._setLanguageDirection();
+            },
+            getVal: function getVal() {
+                return this.input.getQuery();
+            },
+            destroy: function destroy() {
+                this.input.destroy();
+                this.dropdown.destroy();
+                destroyDomStructure(this.$node);
+                this.$node = null;
+            }
+        });
+        return Typeahead;
+        function buildDomStructure(input, withHint) {
+            var $input, $wrapper, $dropdown, $hint;
+            $input = $(input);
+            $wrapper = $(html.wrapper).css(css.wrapper);
+            $dropdown = $(html.dropdown).css(css.dropdown);
+            $hint = $input.clone().css(css.hint).css(getBackgroundStyles($input));
+            $hint.val("").removeData().addClass("tt-hint").removeAttr("id name placeholder").prop("disabled", true).attr({
+                autocomplete: "off",
+                spellcheck: "false"
+            });
+            $input.data(attrsKey, {
+                dir: $input.attr("dir"),
+                autocomplete: $input.attr("autocomplete"),
+                spellcheck: $input.attr("spellcheck"),
+                style: $input.attr("style")
+            });
+            $input.addClass("tt-input").attr({
+                autocomplete: "off",
+                spellcheck: false
+            }).css(withHint ? css.input : css.inputWithNoHint);
+            try {
+                !$input.attr("dir") && $input.attr("dir", "auto");
+            } catch (e) {}
+            return $input.wrap($wrapper).parent().prepend(withHint ? $hint : null).append($dropdown);
+        }
+        function getBackgroundStyles($el) {
+            return {
+                backgroundAttachment: $el.css("background-attachment"),
+                backgroundClip: $el.css("background-clip"),
+                backgroundColor: $el.css("background-color"),
+                backgroundImage: $el.css("background-image"),
+                backgroundOrigin: $el.css("background-origin"),
+                backgroundPosition: $el.css("background-position"),
+                backgroundRepeat: $el.css("background-repeat"),
+                backgroundSize: $el.css("background-size")
+            };
+        }
+        function destroyDomStructure($node) {
+            var $input = $node.find(".tt-input");
+            _.each($input.data(attrsKey), function(val, key) {
+                _.isUndefined(val) ? $input.removeAttr(key) : $input.attr(key, val);
+            });
+            $input.detach().removeData(attrsKey).removeClass("tt-input").insertAfter($node);
+            $node.remove();
         }
+    }();
+    (function() {
+        var old, typeaheadKey, methods;
+        old = $.fn.typeahead;
+        typeaheadKey = "ttTypeahead";
+        methods = {
+            initialize: function initialize(o, datasets) {
+                datasets = _.isArray(datasets) ? datasets : [].slice.call(arguments, 1);
+                o = o || {};
+                return this.each(attach);
+                function attach() {
+                    var $input = $(this), eventBus, typeahead;
+                    _.each(datasets, function(d) {
+                        d.highlight = !!o.highlight;
+                    });
+                    typeahead = new Typeahead({
+                        input: $input,
+                        eventBus: eventBus = new EventBus({
+                            el: $input
+                        }),
+                        withHint: _.isUndefined(o.hint) ? true : !!o.hint,
+                        minLength: o.minLength,
+                        autoselect: o.autoselect,
+                        datasets: datasets
+                    });
+                    $input.data(typeaheadKey, typeahead);
+                }
+            },
+            open: function open() {
+                return this.each(openTypeahead);
+                function openTypeahead() {
+                    var $input = $(this), typeahead;
+                    if (typeahead = $input.data(typeaheadKey)) {
+                        typeahead.open();
+                    }
+                }
+            },
+            close: function close() {
+                return this.each(closeTypeahead);
+                function closeTypeahead() {
+                    var $input = $(this), typeahead;
+                    if (typeahead = $input.data(typeaheadKey)) {
+                        typeahead.close();
+                    }
+                }
+            },
+            val: function val(newVal) {
+                return !arguments.length ? getVal(this.first()) : this.each(setVal);
+                function setVal() {
+                    var $input = $(this), typeahead;
+                    if (typeahead = $input.data(typeaheadKey)) {
+                        typeahead.setVal(newVal);
+                    }
+                }
+                function getVal($input) {
+                    var typeahead, query;
+                    if (typeahead = $input.data(typeaheadKey)) {
+                        query = typeahead.getVal();
+                    }
+                    return query;
+                }
+            },
+            destroy: function destroy() {
+                return this.each(unattach);
+                function unattach() {
+                    var $input = $(this), typeahead;
+                    if (typeahead = $input.data(typeaheadKey)) {
+                        typeahead.destroy();
+                        $input.removeData(typeaheadKey);
+                    }
+                }
+            }
+        };
+        $.fn.typeahead = function(method) {
+            if (methods[method]) {
+                return methods[method].apply(this, [].slice.call(arguments, 1));
+            } else {
+                return methods.initialize.apply(this, arguments);
+            }
+        };
+        $.fn.typeahead.noConflict = function noConflict() {
+            $.fn.typeahead = old;
+            return this;
+        };
+    })();
     
-        return parts.join('');
-      }
     
-      var rewritten = [];
-      for (var i = 0, n = regexs.length; i < n; ++i) {
-        var regex = regexs[i];
-        if (regex.global || regex.multiline) { throw new Error('' + regex); }
-        rewritten.push(
-            '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
-      }
     
-      return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
-    }
-  
+//})(window.jQuery);
+
+
+});
+define('searchView',[
+  'App',
+  // Templates
+  'text!tpl/search.html',
+  'text!tpl/search_suggestion.html',
+  // Tools
+  'typeahead'
+], function(App, searchTpl, suggestionTpl) {
+
+  var searchView = Backbone.View.extend({
+    el: '#search',
     /**
-     * Split markup into a string of source code and an array mapping ranges in
-     * that string to the text nodes in which they appear.
-     *
-     * <p>
-     * The HTML DOM structure:</p>
-     * <pre>
-     * (Element   "p"
-     *   (Element "b"
-     *     (Text  "print "))       ; #1
-     *   (Text    "'Hello '")      ; #2
-     *   (Element "br")            ; #3
-     *   (Text    "  + 'World';")) ; #4
-     * </pre>
-     * <p>
-     * corresponds to the HTML
-     * {@code <p><b>print </b>'Hello '<br>  + 'World';</p>}.</p>
-     *
-     * <p>
-     * It will produce the output:</p>
-     * <pre>
-     * {
-     *   sourceCode: "print 'Hello '\n  + 'World';",
-     *   //                     1          2
-     *   //           012345678901234 5678901234567
-     *   spans: [0, #1, 6, #2, 14, #3, 15, #4]
-     * }
-     * </pre>
-     * <p>
-     * where #1 is a reference to the {@code "print "} text node above, and so
-     * on for the other text nodes.
-     * </p>
-     *
-     * <p>
-     * The {@code} spans array is an array of pairs.  Even elements are the start
-     * indices of substrings, and odd elements are the text nodes (or BR elements)
-     * that contain the text for those substrings.
-     * Substrings continue until the next index or the end of the source.
-     * </p>
-     *
-     * @param {Node} node an HTML DOM subtree containing source-code.
-     * @param {boolean} isPreformatted true if white-space in text nodes should
-     *    be considered significant.
-     * @return {Object} source code and the text nodes in which they occur.
+     * Init.
      */
-    function extractSourceSpans(node, isPreformatted) {
-      var nocode = /(?:^|\s)nocode(?:\s|$)/;
-    
-      var chunks = [];
-      var length = 0;
-      var spans = [];
-      var k = 0;
-    
-      function walk(node) {
-        var type = node.nodeType;
-        if (type == 1) {  // Element
-          if (nocode.test(node.className)) { return; }
-          for (var child = node.firstChild; child; child = child.nextSibling) {
-            walk(child);
+    init: function() {
+      var tpl = _.template(searchTpl);
+      var className = 'form-control input-lg';
+      var placeholder = 'Search reference';
+      this.searchHtml = tpl({
+        'placeholder': placeholder,
+        'className': className
+      });
+      this.items = App.classes.concat(App.allItems);
+
+      return this;
+    },
+    /**
+     * Render input field with Typehead activated.
+     */
+    render: function() {
+      // Append the view to the dom
+      this.$el.append(this.searchHtml);
+
+      // Render Typeahead
+      var $searchInput = this.$el.find('input[type=text]');
+      this.typeaheadRender($searchInput);
+      this.typeaheadEvents($searchInput);
+
+      return this;
+    },
+    /**
+     * Apply Twitter Typeahead to the search input field.
+     * @param {jquery} $input
+     */
+    typeaheadRender: function($input) {
+      var self = this;
+      $input.typeahead(null, {
+        'displayKey': 'name',
+        'minLength': 2,
+        //'highlight': true,
+        'source': self.substringMatcher(this.items),
+        'templates': {
+          'empty': '<p class="empty-message">Unable to find any item that match the current query</p>',
+          'suggestion': _.template(suggestionTpl)
+        }
+      });
+    },
+    /**
+     * Setup typeahead custom events (item selected).
+     */
+    typeaheadEvents: function($input) {
+      var self = this;
+      $input.on('typeahead:selected', function(e, item, datasetName) {
+        var selectedItem = self.items[item.idx];
+        select(selectedItem);
+      });
+      $input.on('keydown', function(e) {
+        if (e.which === 13) { // enter
+          var txt = $input.val();
+          var f = _.find(self.items, function(it) { return it.name == txt; });
+          if (f) {
+            select(f);
           }
-          var nodeName = node.nodeName.toLowerCase();
-          if ('br' === nodeName || 'li' === nodeName) {
-            chunks[k] = '\n';
-            spans[k << 1] = length++;
-            spans[(k++ << 1) | 1] = node;
+        } else if (e.which === 27) {
+          $input.blur();
+        }
+      });
+
+      function select(selectedItem) {
+        var hash = App.router.getHash(selectedItem);//
+        App.router.navigate(hash, {'trigger': true});
+        $('#item').focus();
+      }
+    },
+    /**
+     * substringMatcher function for Typehead (search for strings in an array).
+     * @param {array} array
+     * @returns {Function}
+     */
+    substringMatcher: function(array) {
+      return function findMatches(query, callback) {
+        var matches = [], substrRegex, arrayLength = array.length;
+
+        // regex used to determine if a string contains the substring `query`
+        substrRegex = new RegExp(query, 'i');
+
+        // iterate through the pool of strings and for any string that
+        // contains the substring `query`, add it to the `matches` array
+        for (var i=0; i < arrayLength; i++) {
+          var item = array[i];
+          if (substrRegex.test(item.name)) {
+            // typeahead expects suggestions to be a js object
+            matches.push({
+              'itemtype': item.itemtype,
+              'name': item.name,
+              'className': item.class,
+              'is_constructor': !!item.is_constructor,
+              'final': item.final,
+              'idx': i
+            });
           }
-        } else if (type == 3 || type == 4) {  // Text
-          var text = node.nodeValue;
-          if (text.length) {
-            if (!isPreformatted) {
-              text = text.replace(/[ \t\r\n]+/g, ' ');
+        }
+
+        callback(matches);
+      };
+    }
+
+  });
+
+  return searchView;
+
+});
+
+
+define('text!tpl/list.html',[],function () { return '<% _.each(groups, function(group){ %>\r\n  <div class="reference-group clearfix main-ref-page">  \r\n    <h2 class="group-name" id="group-<%=group.name%>" tab-index="-1"><%=group.name%></h2>\r\n    <div class="reference-subgroups clearfix main-ref-page">  \r\n    <% _.each(group.subgroups, function(subgroup, ind) { %>\r\n      <div class="reference-subgroup">\r\n        <% if (subgroup.name !== \'0\') { %>\r\n          <h3 id="<%=group.name%><%=ind%>" class="subgroup-name subgroup-<%=subgroup.name%>"><%=subgroup.name%></h3>\r\n        <% } %>\r\n        <ul aria-labelledby="<%=group.name%> <%=ind%>">\r\n        <% _.each(subgroup.items, function(item) { %>\r\n        <li><a href="<%=item.hash%>"><%=item.name%><% if (item.itemtype === \'method\') { %>()<%}%></a></li>\r\n        <% }); %>\r\n        </ul>\r\n      </div>\r\n    <% }); %>\r\n    </div>\r\n  </div>\r\n<% }); %>\r\n';});
+
+define('listView',[
+  'App',
+  // Templates
+  'text!tpl/list.html'
+], function (App, listTpl) {
+  var striptags = function(html) {
+    var div = document.createElement('div');
+    div.innerHTML = html;
+    return div.textContent;
+  };
+
+  var listView = Backbone.View.extend({
+    el: '#list',
+    events: {},
+    /**
+     * Init.
+     */
+    init: function () {
+      this.listTpl = _.template(listTpl);
+
+      return this;
+    },
+    /**
+     * Render the list.
+     */
+    render: function (items, listCollection) {
+      if (items && listCollection) {
+        var self = this;
+
+        // Render items and group them by module
+        // module === group
+        this.groups = {};
+        _.each(items, function (item, i) {
+
+          if (!item.private && item.file.indexOf('addons') === -1) { //addons don't get displayed on main page
+
+            var group = item.module || '_';
+            var subgroup = item.submodule || '_';
+            if (group === subgroup) {
+              subgroup = '0';
+            }
+            var hash = App.router.getHash(item);
+
+            // fixes broken links for #/p5/> and #/p5/>=
+            item.hash = item.hash.replace('>', '&gt;');
+
+            // Create a group list
+            if (!self.groups[group]) {
+              self.groups[group] = {
+                name: group.replace('_', '&nbsp;'),
+                subgroups: {}
+              };
+            }
+
+            // Create a subgroup list
+            if (!self.groups[group].subgroups[subgroup]) {
+              self.groups[group].subgroups[subgroup] = {
+                name: subgroup.replace('_', '&nbsp;'),
+                items: []
+              };
+            }
+
+            // hide the un-interesting constants
+            if (group === 'Constants' && !item.example)
+              return;
+
+            if (item.class === 'p5') {
+
+              self.groups[group].subgroups[subgroup].items.push(item);
+
             } else {
-              text = text.replace(/\r\n?/g, '\n');  // Normalize newlines.
+
+              var found = _.find(self.groups[group].subgroups[subgroup].items,
+                function(i){ return i.name == item.class; });
+
+              if (!found) {
+
+                // FIX TO INVISIBLE OBJECTS: DH (see also router.js)
+                var ind = hash.lastIndexOf('/');
+                hash = item.hash.substring(0, ind).replace('p5/','p5.');
+                self.groups[group].subgroups[subgroup].items.push({
+                  name: item.class,
+                  hash: hash
+                });
+              }
+
             }
-            // TODO: handle tabs here?
-            chunks[k] = text;
-            spans[k << 1] = length;
-            length += text.length;
-            spans[(k++ << 1) | 1] = node;
           }
-        }
+        });
+
+        // Put the <li> items html into the list <ul>
+        var listHtml = self.listTpl({
+          'striptags': striptags,
+          'title': self.capitalizeFirst(listCollection),
+          'groups': self.groups,
+          'listCollection': listCollection
+        });
+
+        // Render the view
+        this.$el.html(listHtml);
       }
-    
-      walk(node);
-    
-      return {
-        sourceCode: chunks.join('').replace(/\n$/, ''),
-        spans: spans
-      };
-    }
-  
+
+      var renderEvent = new Event('reference-rendered');
+      window.dispatchEvent(renderEvent);
+
+      return this;
+    },
     /**
-     * Apply the given language handler to sourceCode and add the resulting
-     * decorations to out.
-     * @param {number} basePos the index of sourceCode within the chunk of source
-     *    whose decorations are already present on out.
+     * Show a list of items.
+     * @param {array} items Array of item objects.
+     * @returns {object} This view.
      */
-    function appendDecorations(basePos, sourceCode, langHandler, out) {
-      if (!sourceCode) { return; }
-      var job = {
-        sourceCode: sourceCode,
-        basePos: basePos
-      };
-      langHandler(job);
-      out.push.apply(out, job.decorations);
+    show: function (listGroup) {
+      if (App[listGroup]) {
+        this.render(App[listGroup], listGroup);
+      }
+      App.pageView.hideContentViews();
+
+      this.$el.show();
+
+      return this;
+    },
+    /**
+     * Helper method to capitalize the first letter of a string
+     * @param {string} str
+     * @returns {string} Returns the string.
+     */
+    capitalizeFirst: function (str) {
+      return str.substr(0, 1).toUpperCase() + str.substr(1);
     }
+
+
+
+  });
+
+  return listView;
+
+});
+
+
+define('text!tpl/item.html',[],function () { return '<h2><%=item.name%><% if (item.isMethod) { %>()<% } %></h2>\r\n\r\n<% if (item.example) { %>\r\n<div class="example">\r\n  <h3 id="reference-example">Examples</h3>\r\n\r\n  <div class="example-content" data-alt="<%= item.alt %>">\r\n    <% _.each(item.example, function(example, i){ %>\r\n      <%= example %>\r\n    <% }); %>\r\n  </div>\r\n</div>\r\n<% } %>\r\n\r\n<div class="description">\r\n\r\n  <h3 id="reference-description">Description</h3>\r\n\r\n  <% if (item.deprecated) { %>\r\n    <p>\r\n      Deprecated: <%=item.name%><% if (item.isMethod) { %>()<% } %> is deprecated and will be removed in a future version of p5. <% if (item.deprecationMessage) { %><%=item.deprecationMessage%><% } %>\r\n    </p>\r\n  <% } %>\r\n\r\n\r\n  <span class=\'description-text\'><%= item.description %></span>\r\n\r\n  <% if (item.extends) { %>\r\n    <p><span id="reference-extends">Extends</span> <a href="/reference/#/<%=item.extends%>" title="<%=item.extends%> reference"><%=item.extends%></a></p>\r\n  <% } %>\r\n\r\n  <% if (item.module === \'p5.sound\') { %>\r\n    <p>This function requires you include the p5.sound library.  Add the following into the head of your index.html file:\r\n      <pre><code class="language-javascript">&lt;script src="path/to/p5.sound.js"&gt;&lt;/script&gt;</code></pre>\r\n    </p>\r\n  <% } %>\r\n\r\n  <% if (item.constRefs) { %>\r\n    <p>Used by:\r\n  <%\r\n      var refs = item.constRefs;\r\n      for (var i = 0; i < refs.length; i ++) {\r\n        var ref = refs[i];\r\n        var name = ref;\r\n        if (name.substr(0, 3) === \'p5.\') {\r\n          name = name.substr(3);\r\n        }\r\n  if (i !== 0) {\r\n          if (i == refs.length - 1) {\r\n            %> and <%\r\n          } else {\r\n            %>, <%\r\n          }\r\n        }\r\n        %><a href="./#/<%= ref.replace(\'.\', \'/\') %>"><%= name %>()</a><%\r\n      }\r\n  %>\r\n    </p>\r\n  <% } %>\r\n</div>\r\n\r\n<% if (isConstructor || !isClass) { %>\r\n\r\n<div class="syntax">\r\n  <h3 id="reference-syntax">Syntax</h3>\r\n  <p>\r\n    <% syntaxes.forEach(function(syntax) { %>\r\n    <pre class="language-javascript"><%= syntax %></pre>\r\n    <% }) %>\r\n  </p>\r\n</div>\r\n\r\n\r\n<% if (item.params) { %>\r\n  <div class="params">\r\n    <h3 id="reference-parameters">Parameters</h3>\r\n    <ul aria-labelledby=\'reference-parameters\'>\r\n    <% for (var i=0; i<item.params.length; i++) { %>\r\n      <% var p = item.params[i] %>\r\n      <li>\r\n        <div class=\'paramname\'><%=p.name%></div>\r\n        <% if (p.type) { %>\r\n          <div class=\'paramtype\'>\r\n          <% var type = p.type.replace(/(p5\\.[A-Z][A-Za-z]*)/, \'<a href="#/$1">$1</a>\'); %>\r\n          <span class="param-type label label-info"><%=type%></span>: <%=p.description%>\r\n          <% if (p.optional) { %> (Optional)<% } %>\r\n          </div>\r\n        <% } %>\r\n      </li>\r\n    <% } %>\r\n    </ul>\r\n  </div>\r\n<% } %>\r\n\r\n<% if (item.return && item.return.type) { %>\r\n  <div>\r\n    <h3 id="reference-returns">Returns</h3>\r\n    <p class=\'returns\'><span class="param-type label label-info"><%=item.return.type%></span>: <%= item.return.description %></p>\r\n  </div>\r\n<% } %>\r\n\r\n<% } %>\r\n';});
+
+
+define('text!tpl/class.html',[],function () { return '\r\n<% if (typeof constructor !== \'undefined\') { %>\r\n<div class="constructor">\r\n  <%=constructor%>\r\n</div>\r\n<% } %>\r\n\r\n<% let fields = _.filter(things, function(item) { return item.itemtype === \'property\' && item.access !== \'private\' }); %>\r\n<% if (fields.length > 0) { %>\r\n  <h3 id=\'reference-fields\'>Fields</h3>\r\n  <ul aria-labelledby=\'reference-fields\'>\r\n  <% _.each(fields, function(item) { %>\r\n    <li>\r\n      <div class=\'paramname\'><a href="<%=item.hash%>" <% if (item.module !== module) { %>class="addon"<% } %>><%=item.name%></a></div>\r\n      <div class=\'paramtype\'><%= item.description %></div>\r\n    </li>\r\n  <% }); %>\r\n  </ul>\r\n<% } %>\r\n\r\n<% let methods = _.filter(things, function(item) { return item.itemtype === \'method\' && item.access !== \'private\' }); %>\r\n<% if (methods.length > 0) { %>\r\n  <h3 id=\'reference-methods\'>Methods</h3>\r\n  <ul aria-labelledby=\'reference-methods\'>\r\n    <% _.each(methods, function(item) { %>\r\n      <li>\r\n        <div class=\'paramname\'><a href="<%=item.hash%>" <% if (item.module !== module) { %>class="addon"<% } %>><%=item.name%><% if (item.itemtype === \'method\') { %>()<%}%></a></div>\r\n        <div class=\'paramtype\'><%= item.description %></div>\r\n      </li>\r\n    <% }); %>\r\n  </ul>\r\n<% } %>\r\n';});
+
+
+define('text!tpl/itemEnd.html',[],function () { return '\r\n<br><br>\r\n\r\n<div>\r\n<% if (item.file && item.line) { %>\r\n<span id="reference-error1">Notice any errors or typos?</span> <a href="https://github.com/processing/p5.js/issues"><span id="reference-contribute2">Please let us know.</span></a> <span id="reference-error3">Please feel free to edit</span> <a href="https://github.com/processing/p5.js/blob/<%= appVersion %>/<%= item.file %>#L<%= item.line %>" target="_blank" ><%= item.file %></a> <span id="reference-error5">and issue a pull request!</span>\r\n<% } %>\r\n</div>\r\n\r\n<a style="border-bottom:none !important;" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target=_blank><img src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" style="width:88px" alt="creative commons logo"/></a>\r\n<br><br>\r\n';});
+
+// Copyright (C) 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+/**
+ * @fileoverview
+ * some functions for browser-side pretty printing of code contained in html.
+ *
+ * <p>
+ * For a fairly comprehensive set of languages see the
+ * <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html#langs">README</a>
+ * file that came with this source.  At a minimum, the lexer should work on a
+ * number of languages including C and friends, Java, Python, Bash, SQL, HTML,
+ * XML, CSS, Javascript, and Makefiles.  It works passably on Ruby, PHP and Awk
+ * and a subset of Perl, but, because of commenting conventions, doesn't work on
+ * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class.
+ * <p>
+ * Usage: <ol>
+ * <li> include this source file in an html page via
+ *   {@code <script src="/path/to/prettify.js"></script>}
+ * <li> define style rules.  See the example page for examples.
+ * <li> mark the {@code <pre>} and {@code <code>} tags in your source with
+ *    {@code class=prettyprint.}
+ *    You can also use the (html deprecated) {@code <xmp>} tag, but the pretty
+ *    printer needs to do more substantial DOM manipulations to support that, so
+ *    some css styles may not be preserved.
+ * </ol>
+ * That's it.  I wanted to keep the API as simple as possible, so there's no
+ * need to specify which language the code is in, but if you wish, you can add
+ * another class to the {@code <pre>} or {@code <code>} element to specify the
+ * language, as in {@code <pre class="prettyprint lang-java">}.  Any class that
+ * starts with "lang-" followed by a file extension, specifies the file type.
+ * See the "lang-*.js" files in this directory for code that implements
+ * per-language file handlers.
+ * <p>
+ * Change log:<br>
+ * cbeust, 2006/08/22
+ * <blockquote>
+ *   Java annotations (start with "@") are now captured as literals ("lit")
+ * </blockquote>
+ * @requires console
+ */
+
+// JSLint declarations
+/*global console, document, navigator, setTimeout, window, define */
+
+/** @define {boolean} */
+var IN_GLOBAL_SCOPE = true;
+
+/**
+ * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
+ * UI events.
+ * If set to {@code false}, {@code prettyPrint()} is synchronous.
+ */
+window['PR_SHOULD_USE_CONTINUATION'] = true;
+
+/**
+ * Pretty print a chunk of code.
+ * @param {string} sourceCodeHtml The HTML to pretty print.
+ * @param {string} opt_langExtension The language name to use.
+ *     Typically, a filename extension like 'cpp' or 'java'.
+ * @param {number|boolean} opt_numberLines True to number lines,
+ *     or the 1-indexed number of the first line in sourceCodeHtml.
+ * @return {string} code as html, but prettier
+ */
+var prettyPrintOne;
+/**
+ * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
+ * {@code class=prettyprint} and prettify them.
+ *
+ * @param {Function} opt_whenDone called when prettifying is done.
+ * @param {HTMLElement|HTMLDocument} opt_root an element or document
+ *   containing all the elements to pretty print.
+ *   Defaults to {@code document.body}.
+ */
+var prettyPrint;
+
+
+(function () {
+  var win = window;
+  // Keyword lists for various languages.
+  // We use things that coerce to strings to make them compact when minified
+  // and to defeat aggressive optimizers that fold large string constants.
+  var FLOW_CONTROL_KEYWORDS = ["break,continue,do,else,for,if,return,while"];
+  var C_KEYWORDS = [FLOW_CONTROL_KEYWORDS,"auto,case,char,const,default," + 
+      "double,enum,extern,float,goto,inline,int,long,register,short,signed," +
+      "sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"];
+  var COMMON_KEYWORDS = [C_KEYWORDS,"catch,class,delete,false,import," +
+      "new,operator,private,protected,public,this,throw,true,try,typeof"];
+  var CPP_KEYWORDS = [COMMON_KEYWORDS,"alignof,align_union,asm,axiom,bool," +
+      "concept,concept_map,const_cast,constexpr,decltype,delegate," +
+      "dynamic_cast,explicit,export,friend,generic,late_check," +
+      "mutable,namespace,nullptr,property,reinterpret_cast,static_assert," +
+      "static_cast,template,typeid,typename,using,virtual,where"];
+  var JAVA_KEYWORDS = [COMMON_KEYWORDS,
+      "abstract,assert,boolean,byte,extends,final,finally,implements,import," +
+      "instanceof,interface,null,native,package,strictfp,super,synchronized," +
+      "throws,transient"];
+  var CSHARP_KEYWORDS = [JAVA_KEYWORDS,
+      "as,base,by,checked,decimal,delegate,descending,dynamic,event," +
+      "fixed,foreach,from,group,implicit,in,internal,into,is,let," +
+      "lock,object,out,override,orderby,params,partial,readonly,ref,sbyte," +
+      "sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort," +
+      "var,virtual,where"];
+  var COFFEE_KEYWORDS = "all,and,by,catch,class,else,extends,false,finally," +
+      "for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then," +
+      "throw,true,try,unless,until,when,while,yes";
+  var JSCRIPT_KEYWORDS = [COMMON_KEYWORDS,
+      "debugger,eval,export,function,get,null,set,undefined,var,with," +
+      "Infinity,NaN"];
+  var PERL_KEYWORDS = "caller,delete,die,do,dump,elsif,eval,exit,foreach,for," +
+      "goto,if,import,last,local,my,next,no,our,print,package,redo,require," +
+      "sub,undef,unless,until,use,wantarray,while,BEGIN,END";
+  var PYTHON_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "and,as,assert,class,def,del," +
+      "elif,except,exec,finally,from,global,import,in,is,lambda," +
+      "nonlocal,not,or,pass,print,raise,try,with,yield," +
+      "False,True,None"];
+  var RUBY_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "alias,and,begin,case,class," +
+      "def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo," +
+      "rescue,retry,self,super,then,true,undef,unless,until,when,yield," +
+      "BEGIN,END"];
+   var RUST_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "as,assert,const,copy,drop," +
+      "enum,extern,fail,false,fn,impl,let,log,loop,match,mod,move,mut,priv," +
+      "pub,pure,ref,self,static,struct,true,trait,type,unsafe,use"];
+  var SH_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "case,done,elif,esac,eval,fi," +
+      "function,in,local,set,then,until"];
+  var ALL_KEYWORDS = [
+      CPP_KEYWORDS, CSHARP_KEYWORDS, JSCRIPT_KEYWORDS, PERL_KEYWORDS,
+      PYTHON_KEYWORDS, RUBY_KEYWORDS, SH_KEYWORDS];
+  var C_TYPES = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)\b/;
+
+  // token style names.  correspond to css classes
+  /**
+   * token style for a string literal
+   * @const
+   */
+  var PR_STRING = 'str';
+  /**
+   * token style for a keyword
+   * @const
+   */
+  var PR_KEYWORD = 'kwd';
+  /**
+   * token style for a comment
+   * @const
+   */
+  var PR_COMMENT = 'com';
+  /**
+   * token style for a type
+   * @const
+   */
+  var PR_TYPE = 'typ';
+  /**
+   * token style for a literal value.  e.g. 1, null, true.
+   * @const
+   */
+  var PR_LITERAL = 'lit';
+  /**
+   * token style for a punctuation string.
+   * @const
+   */
+  var PR_PUNCTUATION = 'pun';
+  /**
+   * token style for plain text.
+   * @const
+   */
+  var PR_PLAIN = 'pln';
+
+  /**
+   * token style for an sgml tag.
+   * @const
+   */
+  var PR_TAG = 'tag';
+  /**
+   * token style for a markup declaration such as a DOCTYPE.
+   * @const
+   */
+  var PR_DECLARATION = 'dec';
+  /**
+   * token style for embedded source.
+   * @const
+   */
+  var PR_SOURCE = 'src';
+  /**
+   * token style for an sgml attribute name.
+   * @const
+   */
+  var PR_ATTRIB_NAME = 'atn';
+  /**
+   * token style for an sgml attribute value.
+   * @const
+   */
+  var PR_ATTRIB_VALUE = 'atv';
+
+  /**
+   * A class that indicates a section of markup that is not code, e.g. to allow
+   * embedding of line numbers within code listings.
+   * @const
+   */
+  var PR_NOCODE = 'nocode';
+
   
-    var notWs = /\S/;
   
-    /**
-     * Given an element, if it contains only one child element and any text nodes
-     * it contains contain only space characters, return the sole child element.
-     * Otherwise returns undefined.
-     * <p>
-     * This is meant to return the CODE element in {@code <pre><code ...>} when
-     * there is a single child element that contains all the non-space textual
-     * content, but not to return anything where there are multiple child elements
-     * as in {@code <pre><code>...</code><code>...</code></pre>} or when there
-     * is textual content.
-     */
-    function childContentWrapper(element) {
-      var wrapper = undefined;
-      for (var c = element.firstChild; c; c = c.nextSibling) {
-        var type = c.nodeType;
-        wrapper = (type === 1)  // Element Node
-            ? (wrapper ? element : c)
-            : (type === 3)  // Text Node
-            ? (notWs.test(c.nodeValue) ? element : wrapper)
-            : wrapper;
+  /**
+   * A set of tokens that can precede a regular expression literal in
+   * javascript
+   * http://web.archive.org/web/20070717142515/http://www.mozilla.org/js/language/js20/rationale/syntax.html
+   * has the full list, but I've removed ones that might be problematic when
+   * seen in languages that don't support regular expression literals.
+   *
+   * <p>Specifically, I've removed any keywords that can't precede a regexp
+   * literal in a syntactically legal javascript program, and I've removed the
+   * "in" keyword since it's not a keyword in many languages, and might be used
+   * as a count of inches.
+   *
+   * <p>The link above does not accurately describe EcmaScript rules since
+   * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
+   * very well in practice.
+   *
+   * @private
+   * @const
+   */
+  var REGEXP_PRECEDER_PATTERN = '(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<<?=?|>>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*';
+  
+  // CAVEAT: this does not properly handle the case where a regular
+  // expression immediately follows another since a regular expression may
+  // have flags for case-sensitivity and the like.  Having regexp tokens
+  // adjacent is not valid in any language I'm aware of, so I'm punting.
+  // TODO: maybe style special characters inside a regexp as punctuation.
+
+  /**
+   * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
+   * matches the union of the sets of strings matched by the input RegExp.
+   * Since it matches globally, if the input strings have a start-of-input
+   * anchor (/^.../), it is ignored for the purposes of unioning.
+   * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
+   * @return {RegExp} a global regex.
+   */
+  function combinePrefixPatterns(regexs) {
+    var capturedGroupIndex = 0;
+  
+    var needToFoldCase = false;
+    var ignoreCase = false;
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.ignoreCase) {
+        ignoreCase = true;
+      } else if (/[a-z]/i.test(regex.source.replace(
+                     /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
+        needToFoldCase = true;
+        ignoreCase = false;
+        break;
       }
-      return wrapper === element ? undefined : wrapper;
     }
   
-    /** Given triples of [style, pattern, context] returns a lexing function,
-      * The lexing function interprets the patterns to find token boundaries and
-      * returns a decoration list of the form
-      * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
-      * where index_n is an index into the sourceCode, and style_n is a style
-      * constant like PR_PLAIN.  index_n-1 <= index_n, and style_n-1 applies to
-      * all characters in sourceCode[index_n-1:index_n].
-      *
-      * The stylePatterns is a list whose elements have the form
-      * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
-      *
-      * Style is a style constant like PR_PLAIN, or can be a string of the
-      * form 'lang-FOO', where FOO is a language extension describing the
-      * language of the portion of the token in $1 after pattern executes.
-      * E.g., if style is 'lang-lisp', and group 1 contains the text
-      * '(hello (world))', then that portion of the token will be passed to the
-      * registered lisp handler for formatting.
-      * The text before and after group 1 will be restyled using this decorator
-      * so decorators should take care that this doesn't result in infinite
-      * recursion.  For example, the HTML lexer rule for SCRIPT elements looks
-      * something like ['lang-js', /<[s]cript>(.+?)<\/script>/].  This may match
-      * '<script>foo()<\/script>', which would cause the current decorator to
-      * be called with '<script>' which would not match the same rule since
-      * group 1 must not be empty, so it would be instead styled as PR_TAG by
-      * the generic tag rule.  The handler registered for the 'js' extension would
-      * then be called with 'foo()', and finally, the current decorator would
-      * be called with '<\/script>' which would not match the original rule and
-      * so the generic tag rule would identify it as a tag.
-      *
-      * Pattern must only match prefixes, and if it matches a prefix, then that
-      * match is considered a token with the same style.
-      *
-      * Context is applied to the last non-whitespace, non-comment token
-      * recognized.
-      *
-      * Shortcut is an optional string of characters, any of which, if the first
-      * character, gurantee that this pattern and only this pattern matches.
-      *
-      * @param {Array} shortcutStylePatterns patterns that always start with
-      *   a known character.  Must have a shortcut string.
-      * @param {Array} fallthroughStylePatterns patterns that will be tried in
-      *   order if the shortcut ones fail.  May have shortcuts.
-      *
-      * @return {function (Object)} a
-      *   function that takes source code and returns a list of decorations.
-      */
-    function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
-      var shortcuts = {};
-      var tokenizer;
-      (function () {
-        var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
-        var allRegexs = [];
-        var regexKeys = {};
-        for (var i = 0, n = allPatterns.length; i < n; ++i) {
-          var patternParts = allPatterns[i];
-          var shortcutChars = patternParts[3];
-          if (shortcutChars) {
-            for (var c = shortcutChars.length; --c >= 0;) {
-              shortcuts[shortcutChars.charAt(c)] = patternParts;
-            }
-          }
-          var regex = patternParts[1];
-          var k = '' + regex;
-          if (!regexKeys.hasOwnProperty(k)) {
-            allRegexs.push(regex);
-            regexKeys[k] = null;
-          }
-        }
-        allRegexs.push(/[\0-\uffff]/);
-        tokenizer = combinePrefixPatterns(allRegexs);
-      })();
-  
-      var nPatterns = fallthroughStylePatterns.length;
+    var escapeCharToCodeUnit = {
+      'b': 8,
+      't': 9,
+      'n': 0xa,
+      'v': 0xb,
+      'f': 0xc,
+      'r': 0xd
+    };
   
-      /**
-       * Lexes job.sourceCode and produces an output array job.decorations of
-       * style classes preceded by the position at which they start in
-       * job.sourceCode in order.
-       *
-       * @param {Object} job an object like <pre>{
-       *    sourceCode: {string} sourceText plain text,
-       *    basePos: {int} position of job.sourceCode in the larger chunk of
-       *        sourceCode.
-       * }</pre>
-       */
-      var decorate = function (job) {
-        var sourceCode = job.sourceCode, basePos = job.basePos;
-        /** Even entries are positions in source in ascending order.  Odd enties
-          * are style markers (e.g., PR_COMMENT) that run from that position until
-          * the end.
-          * @type {Array.<number|string>}
-          */
-        var decorations = [basePos, PR_PLAIN];
-        var pos = 0;  // index into sourceCode
-        var tokens = sourceCode.match(tokenizer) || [];
-        var styleCache = {};
+    function decodeEscape(charsetPart) {
+      var cc0 = charsetPart.charCodeAt(0);
+      if (cc0 !== 92 /* \\ */) {
+        return cc0;
+      }
+      var c1 = charsetPart.charAt(1);
+      cc0 = escapeCharToCodeUnit[c1];
+      if (cc0) {
+        return cc0;
+      } else if ('0' <= c1 && c1 <= '7') {
+        return parseInt(charsetPart.substring(1), 8);
+      } else if (c1 === 'u' || c1 === 'x') {
+        return parseInt(charsetPart.substring(2), 16);
+      } else {
+        return charsetPart.charCodeAt(1);
+      }
+    }
   
-        for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
-          var token = tokens[ti];
-          var style = styleCache[token];
-          var match = void 0;
+    function encodeEscape(charCode) {
+      if (charCode < 0x20) {
+        return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
+      }
+      var ch = String.fromCharCode(charCode);
+      return (ch === '\\' || ch === '-' || ch === ']' || ch === '^')
+          ? "\\" + ch : ch;
+    }
   
-          var isEmbedded;
-          if (typeof style === 'string') {
-            isEmbedded = false;
+    function caseFoldCharset(charSet) {
+      var charsetParts = charSet.substring(1, charSet.length - 1).match(
+          new RegExp(
+              '\\\\u[0-9A-Fa-f]{4}'
+              + '|\\\\x[0-9A-Fa-f]{2}'
+              + '|\\\\[0-3][0-7]{0,2}'
+              + '|\\\\[0-7]{1,2}'
+              + '|\\\\[\\s\\S]'
+              + '|-'
+              + '|[^-\\\\]',
+              'g'));
+      var ranges = [];
+      var inverse = charsetParts[0] === '^';
+  
+      var out = ['['];
+      if (inverse) { out.push('^'); }
+  
+      for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
+        var p = charsetParts[i];
+        if (/\\[bdsw]/i.test(p)) {  // Don't muck with named groups.
+          out.push(p);
+        } else {
+          var start = decodeEscape(p);
+          var end;
+          if (i + 2 < n && '-' === charsetParts[i + 1]) {
+            end = decodeEscape(charsetParts[i + 2]);
+            i += 2;
           } else {
-            var patternParts = shortcuts[token.charAt(0)];
-            if (patternParts) {
-              match = token.match(patternParts[1]);
-              style = patternParts[0];
-            } else {
-              for (var i = 0; i < nPatterns; ++i) {
-                patternParts = fallthroughStylePatterns[i];
-                match = token.match(patternParts[1]);
-                if (match) {
-                  style = patternParts[0];
-                  break;
-                }
-              }
-  
-              if (!match) {  // make sure that we make progress
-                style = PR_PLAIN;
-              }
+            end = start;
+          }
+          ranges.push([start, end]);
+          // If the range might intersect letters, then expand it.
+          // This case handling is too simplistic.
+          // It does not deal with non-latin case folding.
+          // It works for latin source code identifiers though.
+          if (!(end < 65 || start > 122)) {
+            if (!(end < 65 || start > 90)) {
+              ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
             }
-  
-            isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
-            if (isEmbedded && !(match && typeof match[1] === 'string')) {
-              isEmbedded = false;
-              style = PR_SOURCE;
+            if (!(end < 97 || start > 122)) {
+              ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
             }
-  
-            if (!isEmbedded) { styleCache[token] = style; }
           }
+        }
+      }
   
-          var tokenStart = pos;
-          pos += token.length;
+      // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
+      // -> [[1, 12], [14, 14], [16, 17]]
+      ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1]  - a[1]); });
+      var consolidatedRanges = [];
+      var lastRange = [];
+      for (var i = 0; i < ranges.length; ++i) {
+        var range = ranges[i];
+        if (range[0] <= lastRange[1] + 1) {
+          lastRange[1] = Math.max(lastRange[1], range[1]);
+        } else {
+          consolidatedRanges.push(lastRange = range);
+        }
+      }
   
-          if (!isEmbedded) {
-            decorations.push(basePos + tokenStart, style);
-          } else {  // Treat group 1 as an embedded block of source code.
-            var embeddedSource = match[1];
-            var embeddedSourceStart = token.indexOf(embeddedSource);
-            var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
-            if (match[2]) {
-              // If embeddedSource can be blank, then it would match at the
-              // beginning which would cause us to infinitely recurse on the
-              // entire token, so we catch the right context in match[2].
-              embeddedSourceEnd = token.length - match[2].length;
-              embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
-            }
-            var lang = style.substring(5);
-            // Decorate the left of the embedded source
-            appendDecorations(
-                basePos + tokenStart,
-                token.substring(0, embeddedSourceStart),
-                decorate, decorations);
-            // Decorate the embedded source
-            appendDecorations(
-                basePos + tokenStart + embeddedSourceStart,
-                embeddedSource,
-                langHandlerForExtension(lang, embeddedSource),
-                decorations);
-            // Decorate the right of the embedded section
-            appendDecorations(
-                basePos + tokenStart + embeddedSourceEnd,
-                token.substring(embeddedSourceEnd),
-                decorate, decorations);
-          }
+      for (var i = 0; i < consolidatedRanges.length; ++i) {
+        var range = consolidatedRanges[i];
+        out.push(encodeEscape(range[0]));
+        if (range[1] > range[0]) {
+          if (range[1] + 1 > range[0]) { out.push('-'); }
+          out.push(encodeEscape(range[1]));
         }
-        job.decorations = decorations;
-      };
-      return decorate;
+      }
+      out.push(']');
+      return out.join('');
     }
   
-    /** returns a function that produces a list of decorations from source text.
-      *
-      * This code treats ", ', and ` as string delimiters, and \ as a string
-      * escape.  It does not recognize perl's qq() style strings.
-      * It has no special handling for double delimiter escapes as in basic, or
-      * the tripled delimiters used in python, but should work on those regardless
-      * although in those cases a single string literal may be broken up into
-      * multiple adjacent string literals.
-      *
-      * It recognizes C, C++, and shell style comments.
-      *
-      * @param {Object} options a set of optional parameters.
-      * @return {function (Object)} a function that examines the source code
-      *     in the input job and builds the decoration list.
-      */
-    function sourceDecorator(options) {
-      var shortcutStylePatterns = [], fallthroughStylePatterns = [];
-      if (options['tripleQuotedStrings']) {
-        // '''multi-line-string''', 'single-line-string', and double-quoted
-        shortcutStylePatterns.push(
-            [PR_STRING,  /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
-             null, '\'"']);
-      } else if (options['multiLineStrings']) {
-        // 'multi-line-string', "multi-line-string"
-        shortcutStylePatterns.push(
-            [PR_STRING,  /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
-             null, '\'"`']);
-      } else {
-        // 'single-line-string', "single-line-string"
-        shortcutStylePatterns.push(
-            [PR_STRING,
-             /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
-             null, '"\'']);
-      }
-      if (options['verbatimStrings']) {
-        // verbatim-string-literal production from the C# grammar.  See issue 93.
-        fallthroughStylePatterns.push(
-            [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
-      }
-      var hc = options['hashComments'];
-      if (hc) {
-        if (options['cStyleComments']) {
-          if (hc > 1) {  // multiline hash comments
-            shortcutStylePatterns.push(
-                [PR_COMMENT, /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, null, '#']);
-          } else {
-            // Stop C preprocessor declarations at an unclosed open comment
-            shortcutStylePatterns.push(
-                [PR_COMMENT, /^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\r\n]*)/,
-                 null, '#']);
+    function allowAnywhereFoldCaseAndRenumberGroups(regex) {
+      // Split into character sets, escape sequences, punctuation strings
+      // like ('(', '(?:', ')', '^'), and runs of characters that do not
+      // include any of the above.
+      var parts = regex.source.match(
+          new RegExp(
+              '(?:'
+              + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]'  // a character set
+              + '|\\\\u[A-Fa-f0-9]{4}'  // a unicode escape
+              + '|\\\\x[A-Fa-f0-9]{2}'  // a hex escape
+              + '|\\\\[0-9]+'  // a back-reference or octal escape
+              + '|\\\\[^ux0-9]'  // other escape sequence
+              + '|\\(\\?[:!=]'  // start of a non-capturing group
+              + '|[\\(\\)\\^]'  // start/end of a group, or line start
+              + '|[^\\x5B\\x5C\\(\\)\\^]+'  // run of other characters
+              + ')',
+              'g'));
+      var n = parts.length;
+  
+      // Maps captured group numbers to the number they will occupy in
+      // the output or to -1 if that has not been determined, or to
+      // undefined if they need not be capturing in the output.
+      var capturedGroups = [];
+  
+      // Walk over and identify back references to build the capturedGroups
+      // mapping.
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          // groups are 1-indexed, so max group index is count of '('
+          ++groupIndex;
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue) {
+            if (decimalValue <= groupIndex) {
+              capturedGroups[decimalValue] = -1;
+            } else {
+              // Replace with an unambiguous escape sequence so that
+              // an octal escape sequence does not turn into a backreference
+              // to a capturing group from an earlier regex.
+              parts[i] = encodeEscape(decimalValue);
+            }
           }
-          // #include <stdio.h>
-          fallthroughStylePatterns.push(
-              [PR_STRING,
-               /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/,
-               null]);
-        } else {
-          shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
         }
       }
-      if (options['cStyleComments']) {
-        fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
-        fallthroughStylePatterns.push(
-            [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
-      }
-      var regexLiterals = options['regexLiterals'];
-      if (regexLiterals) {
-        /**
-         * @const
-         */
-        var regexExcls = regexLiterals > 1
-          ? ''  // Multiline regex literals
-          : '\n\r';
-        /**
-         * @const
-         */
-        var regexAny = regexExcls ? '.' : '[\\S\\s]';
-        /**
-         * @const
-         */
-        var REGEX_LITERAL = (
-            // A regular expression literal starts with a slash that is
-            // not followed by * or / so that it is not confused with
-            // comments.
-            '/(?=[^/*' + regexExcls + '])'
-            // and then contains any number of raw characters,
-            + '(?:[^/\\x5B\\x5C' + regexExcls + ']'
-            // escape sequences (\x5C),
-            +    '|\\x5C' + regexAny
-            // or non-nesting character sets (\x5B\x5D);
-            +    '|\\x5B(?:[^\\x5C\\x5D' + regexExcls + ']'
-            +             '|\\x5C' + regexAny + ')*(?:\\x5D|$))+'
-            // finally closed by a /.
-            + '/');
-        fallthroughStylePatterns.push(
-            ['lang-regex',
-             RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
-             ]);
-      }
   
-      var types = options['types'];
-      if (types) {
-        fallthroughStylePatterns.push([PR_TYPE, types]);
+      // Renumber groups and reduce capturing groups to non-capturing groups
+      // where possible.
+      for (var i = 1; i < capturedGroups.length; ++i) {
+        if (-1 === capturedGroups[i]) {
+          capturedGroups[i] = ++capturedGroupIndex;
+        }
       }
-  
-      var keywords = ("" + options['keywords']).replace(/^ | $/g, '');
-      if (keywords.length) {
-        fallthroughStylePatterns.push(
-            [PR_KEYWORD,
-             new RegExp('^(?:' + keywords.replace(/[\s,]+/g, '|') + ')\\b'),
-             null]);
+      for (var i = 0, groupIndex = 0; i < n; ++i) {
+        var p = parts[i];
+        if (p === '(') {
+          ++groupIndex;
+          if (!capturedGroups[groupIndex]) {
+            parts[i] = '(?:';
+          }
+        } else if ('\\' === p.charAt(0)) {
+          var decimalValue = +p.substring(1);
+          if (decimalValue && decimalValue <= groupIndex) {
+            parts[i] = '\\' + capturedGroups[decimalValue];
+          }
+        }
       }
   
-      shortcutStylePatterns.push([PR_PLAIN,       /^\s+/, null, ' \r\n\t\xA0']);
-  
-      var punctuation =
-        // The Bash man page says
-  
-        // A word is a sequence of characters considered as a single
-        // unit by GRUB. Words are separated by metacharacters,
-        // which are the following plus space, tab, and newline: { }
-        // | & $ ; < >
-        // ...
-        
-        // A word beginning with # causes that word and all remaining
-        // characters on that line to be ignored.
-  
-        // which means that only a '#' after /(?:^|[{}|&$;<>\s])/ starts a
-        // comment but empirically
-        // $ echo {#}
-        // {#}
-        // $ echo \$#
-        // $#
-        // $ echo }#
-        // }#
-  
-        // so /(?:^|[|&;<>\s])/ is more appropriate.
-  
-        // http://gcc.gnu.org/onlinedocs/gcc-2.95.3/cpp_1.html#SEC3
-        // suggests that this definition is compatible with a
-        // default mode that tries to use a single token definition
-        // to recognize both bash/python style comments and C
-        // preprocessor directives.
-  
-        // This definition of punctuation does not include # in the list of
-        // follow-on exclusions, so # will not be broken before if preceeded
-        // by a punctuation character.  We could try to exclude # after
-        // [|&;<>] but that doesn't seem to cause many major problems.
-        // If that does turn out to be a problem, we should change the below
-        // when hc is truthy to include # in the run of punctuation characters
-        // only when not followint [|&;<>].
-        '^.[^\\s\\w.$@\'"`/\\\\]*';
-      if (options['regexLiterals']) {
-        punctuation += '(?!\s*\/)';
+      // Remove any prefix anchors so that the output will match anywhere.
+      // ^^ really does mean an anchored match though.
+      for (var i = 0; i < n; ++i) {
+        if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
       }
   
-      fallthroughStylePatterns.push(
-          // TODO(mikesamuel): recognize non-latin letters and numerals in idents
-          [PR_LITERAL,     /^@[a-z_$][a-z_$@0-9]*/i, null],
-          [PR_TYPE,        /^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/, null],
-          [PR_PLAIN,       /^[a-z_$][a-z_$@0-9]*/i, null],
-          [PR_LITERAL,
-           new RegExp(
-               '^(?:'
-               // A hex number
-               + '0x[a-f0-9]+'
-               // or an octal or decimal number,
-               + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
-               // possibly in scientific notation
-               + '(?:e[+\\-]?\\d+)?'
-               + ')'
-               // with an optional modifier like UL for unsigned long
-               + '[a-z]*', 'i'),
-           null, '0123456789'],
-          // Don't treat escaped quotes in bash as starting strings.
-          // See issue 144.
-          [PR_PLAIN,       /^\\[\s\S]?/, null],
-          [PR_PUNCTUATION, new RegExp(punctuation), null]);
+      // Expand letters to groups to handle mixing of case-sensitive and
+      // case-insensitive patterns if necessary.
+      if (regex.ignoreCase && needToFoldCase) {
+        for (var i = 0; i < n; ++i) {
+          var p = parts[i];
+          var ch0 = p.charAt(0);
+          if (p.length >= 2 && ch0 === '[') {
+            parts[i] = caseFoldCharset(p);
+          } else if (ch0 !== '\\') {
+            // TODO: handle letters in numeric escapes.
+            parts[i] = p.replace(
+                /[a-zA-Z]/g,
+                function (ch) {
+                  var cc = ch.charCodeAt(0);
+                  return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
+                });
+          }
+        }
+      }
   
-      return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
+      return parts.join('');
     }
   
-    var decorateSource = sourceDecorator({
-          'keywords': ALL_KEYWORDS,
-          'hashComments': true,
-          'cStyleComments': true,
-          'multiLineStrings': true,
-          'regexLiterals': true
-        });
+    var rewritten = [];
+    for (var i = 0, n = regexs.length; i < n; ++i) {
+      var regex = regexs[i];
+      if (regex.global || regex.multiline) { throw new Error('' + regex); }
+      rewritten.push(
+          '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
+    }
   
-    /**
-     * Given a DOM subtree, wraps it in a list, and puts each line into its own
-     * list item.
-     *
-     * @param {Node} node modified in place.  Its content is pulled into an
-     *     HTMLOListElement, and each line is moved into a separate list item.
-     *     This requires cloning elements, so the input might not have unique
-     *     IDs after numbering.
-     * @param {boolean} isPreformatted true iff white-space in text nodes should
-     *     be treated as significant.
-     */
-    function numberLines(node, opt_startLineNum, isPreformatted) {
-      var nocode = /(?:^|\s)nocode(?:\s|$)/;
-      var lineBreak = /\r\n?|\n/;
-    
-      var document = node.ownerDocument;
-    
-      var li = document.createElement('li');
-      while (node.firstChild) {
-        li.appendChild(node.firstChild);
-      }
-      // An array of lines.  We split below, so this is initialized to one
-      // un-split line.
-      var listItems = [li];
-    
-      function walk(node) {
-        var type = node.nodeType;
-        if (type == 1 && !nocode.test(node.className)) {  // Element
-          if ('br' === node.nodeName) {
-            breakAfter(node);
-            // Discard the <BR> since it is now flush against a </LI>.
-            if (node.parentNode) {
-              node.parentNode.removeChild(node);
-            }
+    return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
+  }
+
+  /**
+   * Split markup into a string of source code and an array mapping ranges in
+   * that string to the text nodes in which they appear.
+   *
+   * <p>
+   * The HTML DOM structure:</p>
+   * <pre>
+   * (Element   "p"
+   *   (Element "b"
+   *     (Text  "print "))       ; #1
+   *   (Text    "'Hello '")      ; #2
+   *   (Element "br")            ; #3
+   *   (Text    "  + 'World';")) ; #4
+   * </pre>
+   * <p>
+   * corresponds to the HTML
+   * {@code <p><b>print </b>'Hello '<br>  + 'World';</p>}.</p>
+   *
+   * <p>
+   * It will produce the output:</p>
+   * <pre>
+   * {
+   *   sourceCode: "print 'Hello '\n  + 'World';",
+   *   //                     1          2
+   *   //           012345678901234 5678901234567
+   *   spans: [0, #1, 6, #2, 14, #3, 15, #4]
+   * }
+   * </pre>
+   * <p>
+   * where #1 is a reference to the {@code "print "} text node above, and so
+   * on for the other text nodes.
+   * </p>
+   *
+   * <p>
+   * The {@code} spans array is an array of pairs.  Even elements are the start
+   * indices of substrings, and odd elements are the text nodes (or BR elements)
+   * that contain the text for those substrings.
+   * Substrings continue until the next index or the end of the source.
+   * </p>
+   *
+   * @param {Node} node an HTML DOM subtree containing source-code.
+   * @param {boolean} isPreformatted true if white-space in text nodes should
+   *    be considered significant.
+   * @return {Object} source code and the text nodes in which they occur.
+   */
+  function extractSourceSpans(node, isPreformatted) {
+    var nocode = /(?:^|\s)nocode(?:\s|$)/;
+  
+    var chunks = [];
+    var length = 0;
+    var spans = [];
+    var k = 0;
+  
+    function walk(node) {
+      var type = node.nodeType;
+      if (type == 1) {  // Element
+        if (nocode.test(node.className)) { return; }
+        for (var child = node.firstChild; child; child = child.nextSibling) {
+          walk(child);
+        }
+        var nodeName = node.nodeName.toLowerCase();
+        if ('br' === nodeName || 'li' === nodeName) {
+          chunks[k] = '\n';
+          spans[k << 1] = length++;
+          spans[(k++ << 1) | 1] = node;
+        }
+      } else if (type == 3 || type == 4) {  // Text
+        var text = node.nodeValue;
+        if (text.length) {
+          if (!isPreformatted) {
+            text = text.replace(/[ \t\r\n]+/g, ' ');
           } else {
-            for (var child = node.firstChild; child; child = child.nextSibling) {
-              walk(child);
-            }
-          }
-        } else if ((type == 3 || type == 4) && isPreformatted) {  // Text
-          var text = node.nodeValue;
-          var match = text.match(lineBreak);
-          if (match) {
-            var firstLine = text.substring(0, match.index);
-            node.nodeValue = firstLine;
-            var tail = text.substring(match.index + match[0].length);
-            if (tail) {
-              var parent = node.parentNode;
-              parent.insertBefore(
-                document.createTextNode(tail), node.nextSibling);
-            }
-            breakAfter(node);
-            if (!firstLine) {
-              // Don't leave blank text nodes in the DOM.
-              node.parentNode.removeChild(node);
-            }
+            text = text.replace(/\r\n?/g, '\n');  // Normalize newlines.
           }
+          // TODO: handle tabs here?
+          chunks[k] = text;
+          spans[k << 1] = length;
+          length += text.length;
+          spans[(k++ << 1) | 1] = node;
         }
       }
-    
-      // Split a line after the given node.
-      function breakAfter(lineEndNode) {
-        // If there's nothing to the right, then we can skip ending the line
-        // here, and move root-wards since splitting just before an end-tag
-        // would require us to create a bunch of empty copies.
-        while (!lineEndNode.nextSibling) {
-          lineEndNode = lineEndNode.parentNode;
-          if (!lineEndNode) { return; }
-        }
-    
-        function breakLeftOf(limit, copy) {
-          // Clone shallowly if this node needs to be on both sides of the break.
-          var rightSide = copy ? limit.cloneNode(false) : limit;
-          var parent = limit.parentNode;
-          if (parent) {
-            // We clone the parent chain.
-            // This helps us resurrect important styling elements that cross lines.
-            // E.g. in <i>Foo<br>Bar</i>
-            // should be rewritten to <li><i>Foo</i></li><li><i>Bar</i></li>.
-            var parentClone = breakLeftOf(parent, 1);
-            // Move the clone and everything to the right of the original
-            // onto the cloned parent.
-            var next = limit.nextSibling;
-            parentClone.appendChild(rightSide);
-            for (var sibling = next; sibling; sibling = next) {
-              next = sibling.nextSibling;
-              parentClone.appendChild(sibling);
-            }
+    }
+  
+    walk(node);
+  
+    return {
+      sourceCode: chunks.join('').replace(/\n$/, ''),
+      spans: spans
+    };
+  }
+
+  /**
+   * Apply the given language handler to sourceCode and add the resulting
+   * decorations to out.
+   * @param {number} basePos the index of sourceCode within the chunk of source
+   *    whose decorations are already present on out.
+   */
+  function appendDecorations(basePos, sourceCode, langHandler, out) {
+    if (!sourceCode) { return; }
+    var job = {
+      sourceCode: sourceCode,
+      basePos: basePos
+    };
+    langHandler(job);
+    out.push.apply(out, job.decorations);
+  }
+
+  var notWs = /\S/;
+
+  /**
+   * Given an element, if it contains only one child element and any text nodes
+   * it contains contain only space characters, return the sole child element.
+   * Otherwise returns undefined.
+   * <p>
+   * This is meant to return the CODE element in {@code <pre><code ...>} when
+   * there is a single child element that contains all the non-space textual
+   * content, but not to return anything where there are multiple child elements
+   * as in {@code <pre><code>...</code><code>...</code></pre>} or when there
+   * is textual content.
+   */
+  function childContentWrapper(element) {
+    var wrapper = undefined;
+    for (var c = element.firstChild; c; c = c.nextSibling) {
+      var type = c.nodeType;
+      wrapper = (type === 1)  // Element Node
+          ? (wrapper ? element : c)
+          : (type === 3)  // Text Node
+          ? (notWs.test(c.nodeValue) ? element : wrapper)
+          : wrapper;
+    }
+    return wrapper === element ? undefined : wrapper;
+  }
+
+  /** Given triples of [style, pattern, context] returns a lexing function,
+    * The lexing function interprets the patterns to find token boundaries and
+    * returns a decoration list of the form
+    * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
+    * where index_n is an index into the sourceCode, and style_n is a style
+    * constant like PR_PLAIN.  index_n-1 <= index_n, and style_n-1 applies to
+    * all characters in sourceCode[index_n-1:index_n].
+    *
+    * The stylePatterns is a list whose elements have the form
+    * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
+    *
+    * Style is a style constant like PR_PLAIN, or can be a string of the
+    * form 'lang-FOO', where FOO is a language extension describing the
+    * language of the portion of the token in $1 after pattern executes.
+    * E.g., if style is 'lang-lisp', and group 1 contains the text
+    * '(hello (world))', then that portion of the token will be passed to the
+    * registered lisp handler for formatting.
+    * The text before and after group 1 will be restyled using this decorator
+    * so decorators should take care that this doesn't result in infinite
+    * recursion.  For example, the HTML lexer rule for SCRIPT elements looks
+    * something like ['lang-js', /<[s]cript>(.+?)<\/script>/].  This may match
+    * '<script>foo()<\/script>', which would cause the current decorator to
+    * be called with '<script>' which would not match the same rule since
+    * group 1 must not be empty, so it would be instead styled as PR_TAG by
+    * the generic tag rule.  The handler registered for the 'js' extension would
+    * then be called with 'foo()', and finally, the current decorator would
+    * be called with '<\/script>' which would not match the original rule and
+    * so the generic tag rule would identify it as a tag.
+    *
+    * Pattern must only match prefixes, and if it matches a prefix, then that
+    * match is considered a token with the same style.
+    *
+    * Context is applied to the last non-whitespace, non-comment token
+    * recognized.
+    *
+    * Shortcut is an optional string of characters, any of which, if the first
+    * character, gurantee that this pattern and only this pattern matches.
+    *
+    * @param {Array} shortcutStylePatterns patterns that always start with
+    *   a known character.  Must have a shortcut string.
+    * @param {Array} fallthroughStylePatterns patterns that will be tried in
+    *   order if the shortcut ones fail.  May have shortcuts.
+    *
+    * @return {function (Object)} a
+    *   function that takes source code and returns a list of decorations.
+    */
+  function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
+    var shortcuts = {};
+    var tokenizer;
+    (function () {
+      var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
+      var allRegexs = [];
+      var regexKeys = {};
+      for (var i = 0, n = allPatterns.length; i < n; ++i) {
+        var patternParts = allPatterns[i];
+        var shortcutChars = patternParts[3];
+        if (shortcutChars) {
+          for (var c = shortcutChars.length; --c >= 0;) {
+            shortcuts[shortcutChars.charAt(c)] = patternParts;
           }
-          return rightSide;
         }
-    
-        var copiedListItem = breakLeftOf(lineEndNode.nextSibling, 0);
-    
-        // Walk the parent chain until we reach an unattached LI.
-        for (var parent;
-             // Check nodeType since IE invents document fragments.
-             (parent = copiedListItem.parentNode) && parent.nodeType === 1;) {
-          copiedListItem = parent;
-        }
-        // Put it on the list of lines for later processing.
-        listItems.push(copiedListItem);
-      }
-    
-      // Split lines while there are lines left to split.
-      for (var i = 0;  // Number of lines that have been split so far.
-           i < listItems.length;  // length updated by breakAfter calls.
-           ++i) {
-        walk(listItems[i]);
-      }
-    
-      // Make sure numeric indices show correctly.
-      if (opt_startLineNum === (opt_startLineNum|0)) {
-        listItems[0].setAttribute('value', opt_startLineNum);
-      }
-    
-      var ol = document.createElement('ol');
-      ol.className = 'linenums';
-      var offset = Math.max(0, ((opt_startLineNum - 1 /* zero index */)) | 0) || 0;
-      for (var i = 0, n = listItems.length; i < n; ++i) {
-        li = listItems[i];
-        // Stick a class on the LIs so that stylesheets can
-        // color odd/even rows, or any other row pattern that
-        // is co-prime with 10.
-        li.className = 'L' + ((i + offset) % 10);
-        if (!li.firstChild) {
-          li.appendChild(document.createTextNode('\xA0'));
+        var regex = patternParts[1];
+        var k = '' + regex;
+        if (!regexKeys.hasOwnProperty(k)) {
+          allRegexs.push(regex);
+          regexKeys[k] = null;
         }
-        ol.appendChild(li);
       }
-    
-      node.appendChild(ol);
-    }
+      allRegexs.push(/[\0-\uffff]/);
+      tokenizer = combinePrefixPatterns(allRegexs);
+    })();
+
+    var nPatterns = fallthroughStylePatterns.length;
+
     /**
-     * Breaks {@code job.sourceCode} around style boundaries in
-     * {@code job.decorations} and modifies {@code job.sourceNode} in place.
-     * @param {Object} job like <pre>{
-     *    sourceCode: {string} source as plain text,
-     *    sourceNode: {HTMLElement} the element containing the source,
-     *    spans: {Array.<number|Node>} alternating span start indices into source
-     *       and the text node or element (e.g. {@code <BR>}) corresponding to that
-     *       span.
-     *    decorations: {Array.<number|string} an array of style classes preceded
-     *       by the position at which they start in job.sourceCode in order
+     * Lexes job.sourceCode and produces an output array job.decorations of
+     * style classes preceded by the position at which they start in
+     * job.sourceCode in order.
+     *
+     * @param {Object} job an object like <pre>{
+     *    sourceCode: {string} sourceText plain text,
+     *    basePos: {int} position of job.sourceCode in the larger chunk of
+     *        sourceCode.
      * }</pre>
-     * @private
      */
-    function recombineTagsAndDecorations(job) {
-      var isIE8OrEarlier = /\bMSIE\s(\d+)/.exec(navigator.userAgent);
-      isIE8OrEarlier = isIE8OrEarlier && +isIE8OrEarlier[1] <= 8;
-      var newlineRe = /\n/g;
-    
-      var source = job.sourceCode;
-      var sourceLength = source.length;
-      // Index into source after the last code-unit recombined.
-      var sourceIndex = 0;
-    
-      var spans = job.spans;
-      var nSpans = spans.length;
-      // Index into spans after the last span which ends at or before sourceIndex.
-      var spanIndex = 0;
-    
-      var decorations = job.decorations;
-      var nDecorations = decorations.length;
-      // Index into decorations after the last decoration which ends at or before
-      // sourceIndex.
-      var decorationIndex = 0;
-    
-      // Remove all zero-length decorations.
-      decorations[nDecorations] = sourceLength;
-      var decPos, i;
-      for (i = decPos = 0; i < nDecorations;) {
-        if (decorations[i] !== decorations[i + 2]) {
-          decorations[decPos++] = decorations[i++];
-          decorations[decPos++] = decorations[i++];
+    var decorate = function (job) {
+      var sourceCode = job.sourceCode, basePos = job.basePos;
+      /** Even entries are positions in source in ascending order.  Odd enties
+        * are style markers (e.g., PR_COMMENT) that run from that position until
+        * the end.
+        * @type {Array.<number|string>}
+        */
+      var decorations = [basePos, PR_PLAIN];
+      var pos = 0;  // index into sourceCode
+      var tokens = sourceCode.match(tokenizer) || [];
+      var styleCache = {};
+
+      for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
+        var token = tokens[ti];
+        var style = styleCache[token];
+        var match = void 0;
+
+        var isEmbedded;
+        if (typeof style === 'string') {
+          isEmbedded = false;
         } else {
-          i += 2;
-        }
-      }
-      nDecorations = decPos;
-    
-      // Simplify decorations.
-      for (i = decPos = 0; i < nDecorations;) {
-        var startPos = decorations[i];
-        // Conflate all adjacent decorations that use the same style.
-        var startDec = decorations[i + 1];
-        var end = i + 2;
-        while (end + 2 <= nDecorations && decorations[end + 1] === startDec) {
-          end += 2;
-        }
-        decorations[decPos++] = startPos;
-        decorations[decPos++] = startDec;
-        i = end;
-      }
-    
-      nDecorations = decorations.length = decPos;
-    
-      var sourceNode = job.sourceNode;
-      var oldDisplay;
-      if (sourceNode) {
-        oldDisplay = sourceNode.style.display;
-        sourceNode.style.display = 'none';
-      }
-      try {
-        var decoration = null;
-        while (spanIndex < nSpans) {
-          var spanStart = spans[spanIndex];
-          var spanEnd = spans[spanIndex + 2] || sourceLength;
-    
-          var decEnd = decorations[decorationIndex + 2] || sourceLength;
-    
-          var end = Math.min(spanEnd, decEnd);
-    
-          var textNode = spans[spanIndex + 1];
-          var styledText;
-          if (textNode.nodeType !== 1  // Don't muck with <BR>s or <LI>s
-              // Don't introduce spans around empty text nodes.
-              && (styledText = source.substring(sourceIndex, end))) {
-            // This may seem bizarre, and it is.  Emitting LF on IE causes the
-            // code to display with spaces instead of line breaks.
-            // Emitting Windows standard issue linebreaks (CRLF) causes a blank
-            // space to appear at the beginning of every line but the first.
-            // Emitting an old Mac OS 9 line separator makes everything spiffy.
-            if (isIE8OrEarlier) {
-              styledText = styledText.replace(newlineRe, '\r');
+          var patternParts = shortcuts[token.charAt(0)];
+          if (patternParts) {
+            match = token.match(patternParts[1]);
+            style = patternParts[0];
+          } else {
+            for (var i = 0; i < nPatterns; ++i) {
+              patternParts = fallthroughStylePatterns[i];
+              match = token.match(patternParts[1]);
+              if (match) {
+                style = patternParts[0];
+                break;
+              }
             }
-            textNode.nodeValue = styledText;
-            var document = textNode.ownerDocument;
-            var span = document.createElement('span');
-            span.className = decorations[decorationIndex + 1];
-            var parentNode = textNode.parentNode;
-            parentNode.replaceChild(span, textNode);
-            span.appendChild(textNode);
-            if (sourceIndex < spanEnd) {  // Split off a text node.
-              spans[spanIndex + 1] = textNode
-                  // TODO: Possibly optimize by using '' if there's no flicker.
-                  = document.createTextNode(source.substring(end, spanEnd));
-              parentNode.insertBefore(textNode, span.nextSibling);
+
+            if (!match) {  // make sure that we make progress
+              style = PR_PLAIN;
             }
           }
-    
-          sourceIndex = end;
-    
-          if (sourceIndex >= spanEnd) {
-            spanIndex += 2;
-          }
-          if (sourceIndex >= decEnd) {
-            decorationIndex += 2;
+
+          isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
+          if (isEmbedded && !(match && typeof match[1] === 'string')) {
+            isEmbedded = false;
+            style = PR_SOURCE;
           }
+
+          if (!isEmbedded) { styleCache[token] = style; }
         }
-      } finally {
-        if (sourceNode) {
-          sourceNode.style.display = oldDisplay;
-        }
-      }
-    }
-  
-    /** Maps language-specific file extensions to handlers. */
-    var langHandlerRegistry = {};
-    /** Register a language handler for the given file extensions.
-      * @param {function (Object)} handler a function from source code to a list
-      *      of decorations.  Takes a single argument job which describes the
-      *      state of the computation.   The single parameter has the form
-      *      {@code {
-      *        sourceCode: {string} as plain text.
-      *        decorations: {Array.<number|string>} an array of style classes
-      *                     preceded by the position at which they start in
-      *                     job.sourceCode in order.
-      *                     The language handler should assigned this field.
-      *        basePos: {int} the position of source in the larger source chunk.
-      *                 All positions in the output decorations array are relative
-      *                 to the larger source chunk.
-      *      } }
-      * @param {Array.<string>} fileExtensions
-      */
-    function registerLangHandler(handler, fileExtensions) {
-      for (var i = fileExtensions.length; --i >= 0;) {
-        var ext = fileExtensions[i];
-        if (!langHandlerRegistry.hasOwnProperty(ext)) {
-          langHandlerRegistry[ext] = handler;
-        } else if (win['console']) {
-          console['warn']('cannot override language handler %s', ext);
+
+        var tokenStart = pos;
+        pos += token.length;
+
+        if (!isEmbedded) {
+          decorations.push(basePos + tokenStart, style);
+        } else {  // Treat group 1 as an embedded block of source code.
+          var embeddedSource = match[1];
+          var embeddedSourceStart = token.indexOf(embeddedSource);
+          var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
+          if (match[2]) {
+            // If embeddedSource can be blank, then it would match at the
+            // beginning which would cause us to infinitely recurse on the
+            // entire token, so we catch the right context in match[2].
+            embeddedSourceEnd = token.length - match[2].length;
+            embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
+          }
+          var lang = style.substring(5);
+          // Decorate the left of the embedded source
+          appendDecorations(
+              basePos + tokenStart,
+              token.substring(0, embeddedSourceStart),
+              decorate, decorations);
+          // Decorate the embedded source
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceStart,
+              embeddedSource,
+              langHandlerForExtension(lang, embeddedSource),
+              decorations);
+          // Decorate the right of the embedded section
+          appendDecorations(
+              basePos + tokenStart + embeddedSourceEnd,
+              token.substring(embeddedSourceEnd),
+              decorate, decorations);
         }
       }
+      job.decorations = decorations;
+    };
+    return decorate;
+  }
+
+  /** returns a function that produces a list of decorations from source text.
+    *
+    * This code treats ", ', and ` as string delimiters, and \ as a string
+    * escape.  It does not recognize perl's qq() style strings.
+    * It has no special handling for double delimiter escapes as in basic, or
+    * the tripled delimiters used in python, but should work on those regardless
+    * although in those cases a single string literal may be broken up into
+    * multiple adjacent string literals.
+    *
+    * It recognizes C, C++, and shell style comments.
+    *
+    * @param {Object} options a set of optional parameters.
+    * @return {function (Object)} a function that examines the source code
+    *     in the input job and builds the decoration list.
+    */
+  function sourceDecorator(options) {
+    var shortcutStylePatterns = [], fallthroughStylePatterns = [];
+    if (options['tripleQuotedStrings']) {
+      // '''multi-line-string''', 'single-line-string', and double-quoted
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
+           null, '\'"']);
+    } else if (options['multiLineStrings']) {
+      // 'multi-line-string', "multi-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,  /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
+           null, '\'"`']);
+    } else {
+      // 'single-line-string', "single-line-string"
+      shortcutStylePatterns.push(
+          [PR_STRING,
+           /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
+           null, '"\'']);
     }
-    function langHandlerForExtension(extension, source) {
-      if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
-        // Treat it as markup if the first non whitespace character is a < and
-        // the last non-whitespace character is a >.
-        extension = /^\s*</.test(source)
-            ? 'default-markup'
-            : 'default-code';
-      }
-      return langHandlerRegistry[extension];
+    if (options['verbatimStrings']) {
+      // verbatim-string-literal production from the C# grammar.  See issue 93.
+      fallthroughStylePatterns.push(
+          [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
     }
-    registerLangHandler(decorateSource, ['default-code']);
-    registerLangHandler(
-        createSimpleLexer(
-            [],
-            [
-             [PR_PLAIN,       /^[^<?]+/],
-             [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
-             [PR_COMMENT,     /^<\!--[\s\S]*?(?:-\->|$)/],
-             // Unescaped content in an unknown language
-             ['lang-',        /^<\?([\s\S]+?)(?:\?>|$)/],
-             ['lang-',        /^<%([\s\S]+?)(?:%>|$)/],
-             [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
-             ['lang-',        /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
-             // Unescaped content in javascript.  (Or possibly vbscript).
-             ['lang-js',      /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
-             // Contains unescaped stylesheet content
-             ['lang-css',     /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
-             ['lang-in.tag',  /^(<\/?[a-z][^<>]*>)/i]
-            ]),
-        ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
-    registerLangHandler(
-        createSimpleLexer(
-            [
-             [PR_PLAIN,        /^[\s]+/, null, ' \t\r\n'],
-             [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
-             ],
-            [
-             [PR_TAG,          /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
-             [PR_ATTRIB_NAME,  /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
-             ['lang-uq.val',   /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
-             [PR_PUNCTUATION,  /^[=<>\/]+/],
-             ['lang-js',       /^on\w+\s*=\s*\"([^\"]+)\"/i],
-             ['lang-js',       /^on\w+\s*=\s*\'([^\']+)\'/i],
-             ['lang-js',       /^on\w+\s*=\s*([^\"\'>\s]+)/i],
-             ['lang-css',      /^style\s*=\s*\"([^\"]+)\"/i],
-             ['lang-css',      /^style\s*=\s*\'([^\']+)\'/i],
-             ['lang-css',      /^style\s*=\s*([^\"\'>\s]+)/i]
-             ]),
-        ['in.tag']);
-    registerLangHandler(
-        createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
-    registerLangHandler(sourceDecorator({
-            'keywords': CPP_KEYWORDS,
-            'hashComments': true,
-            'cStyleComments': true,
-            'types': C_TYPES
-          }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
-    registerLangHandler(sourceDecorator({
-            'keywords': 'null,true,false'
-          }), ['json']);
-    registerLangHandler(sourceDecorator({
-            'keywords': CSHARP_KEYWORDS,
-            'hashComments': true,
-            'cStyleComments': true,
-            'verbatimStrings': true,
-            'types': C_TYPES
-          }), ['cs']);
-    registerLangHandler(sourceDecorator({
-            'keywords': JAVA_KEYWORDS,
-            'cStyleComments': true
-          }), ['java']);
-    registerLangHandler(sourceDecorator({
-            'keywords': SH_KEYWORDS,
-            'hashComments': true,
-            'multiLineStrings': true
-          }), ['bash', 'bsh', 'csh', 'sh']);
-    registerLangHandler(sourceDecorator({
-            'keywords': PYTHON_KEYWORDS,
-            'hashComments': true,
-            'multiLineStrings': true,
-            'tripleQuotedStrings': true
-          }), ['cv', 'py', 'python']);
-    registerLangHandler(sourceDecorator({
-            'keywords': PERL_KEYWORDS,
-            'hashComments': true,
-            'multiLineStrings': true,
-            'regexLiterals': 2  // multiline regex literals
-          }), ['perl', 'pl', 'pm']);
-    registerLangHandler(sourceDecorator({
-            'keywords': RUBY_KEYWORDS,
-            'hashComments': true,
-            'multiLineStrings': true,
-            'regexLiterals': true
-          }), ['rb', 'ruby']);
-    registerLangHandler(sourceDecorator({
-            'keywords': JSCRIPT_KEYWORDS,
-            'cStyleComments': true,
-            'regexLiterals': true
-          }), ['javascript', 'js']);
-    registerLangHandler(sourceDecorator({
-            'keywords': COFFEE_KEYWORDS,
-            'hashComments': 3,  // ### style block comments
-            'cStyleComments': true,
-            'multilineStrings': true,
-            'tripleQuotedStrings': true,
-            'regexLiterals': true
-          }), ['coffee']);
-    registerLangHandler(sourceDecorator({
-            'keywords': RUST_KEYWORDS,
-            'cStyleComments': true,
-            'multilineStrings': true
-          }), ['rc', 'rs', 'rust']);
-    registerLangHandler(
-        createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
-  
-    function applyDecorator(job) {
-      var opt_langExtension = job.langExtension;
-  
-      try {
-        // Extract tags, and convert the source code to plain text.
-        var sourceAndSpans = extractSourceSpans(job.sourceNode, job.pre);
-        /** Plain text. @type {string} */
-        var source = sourceAndSpans.sourceCode;
-        job.sourceCode = source;
-        job.spans = sourceAndSpans.spans;
-        job.basePos = 0;
-  
-        // Apply the appropriate language handler
-        langHandlerForExtension(opt_langExtension, source)(job);
-  
-        // Integrate the decorations and tags back into the source code,
-        // modifying the sourceNode in place.
-        recombineTagsAndDecorations(job);
-      } catch (e) {
-        if (win['console']) {
-          console['log'](e && e['stack'] || e);
+    var hc = options['hashComments'];
+    if (hc) {
+      if (options['cStyleComments']) {
+        if (hc > 1) {  // multiline hash comments
+          shortcutStylePatterns.push(
+              [PR_COMMENT, /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, null, '#']);
+        } else {
+          // Stop C preprocessor declarations at an unclosed open comment
+          shortcutStylePatterns.push(
+              [PR_COMMENT, /^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\r\n]*)/,
+               null, '#']);
         }
+        // #include <stdio.h>
+        fallthroughStylePatterns.push(
+            [PR_STRING,
+             /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/,
+             null]);
+      } else {
+        shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
       }
     }
-  
-    /**
-     * Pretty print a chunk of code.
-     * @param sourceCodeHtml {string} The HTML to pretty print.
-     * @param opt_langExtension {string} The language name to use.
-     *     Typically, a filename extension like 'cpp' or 'java'.
-     * @param opt_numberLines {number|boolean} True to number lines,
-     *     or the 1-indexed number of the first line in sourceCodeHtml.
-     */
-    function $prettyPrintOne(sourceCodeHtml, opt_langExtension, opt_numberLines) {
-      var container = document.createElement('div');
-      // This could cause images to load and onload listeners to fire.
-      // E.g. <img onerror="alert(1337)" src="nosuchimage.png">.
-      // We assume that the inner HTML is from a trusted source.
-      // The pre-tag is required for IE8 which strips newlines from innerHTML
-      // when it is injected into a <pre> tag.
-      // http://stackoverflow.com/questions/451486/pre-tag-loses-line-breaks-when-setting-innerhtml-in-ie
-      // http://stackoverflow.com/questions/195363/inserting-a-newline-into-a-pre-tag-ie-javascript
-      container.innerHTML = '<pre>' + sourceCodeHtml + '</pre>';
-      container = container.firstChild;
-      if (opt_numberLines) {
-        numberLines(container, opt_numberLines, true);
-      }
-  
-      var job = {
-        langExtension: opt_langExtension,
-        numberLines: opt_numberLines,
-        sourceNode: container,
-        pre: 1
-      };
-      applyDecorator(job);
-      return container.innerHTML;
+    if (options['cStyleComments']) {
+      fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
+      fallthroughStylePatterns.push(
+          [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
     }
+    var regexLiterals = options['regexLiterals'];
+    if (regexLiterals) {
+      /**
+       * @const
+       */
+      var regexExcls = regexLiterals > 1
+        ? ''  // Multiline regex literals
+        : '\n\r';
+      /**
+       * @const
+       */
+      var regexAny = regexExcls ? '.' : '[\\S\\s]';
+      /**
+       * @const
+       */
+      var REGEX_LITERAL = (
+          // A regular expression literal starts with a slash that is
+          // not followed by * or / so that it is not confused with
+          // comments.
+          '/(?=[^/*' + regexExcls + '])'
+          // and then contains any number of raw characters,
+          + '(?:[^/\\x5B\\x5C' + regexExcls + ']'
+          // escape sequences (\x5C),
+          +    '|\\x5C' + regexAny
+          // or non-nesting character sets (\x5B\x5D);
+          +    '|\\x5B(?:[^\\x5C\\x5D' + regexExcls + ']'
+          +             '|\\x5C' + regexAny + ')*(?:\\x5D|$))+'
+          // finally closed by a /.
+          + '/');
+      fallthroughStylePatterns.push(
+          ['lang-regex',
+           RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
+           ]);
+    }
+
+    var types = options['types'];
+    if (types) {
+      fallthroughStylePatterns.push([PR_TYPE, types]);
+    }
+
+    var keywords = ("" + options['keywords']).replace(/^ | $/g, '');
+    if (keywords.length) {
+      fallthroughStylePatterns.push(
+          [PR_KEYWORD,
+           new RegExp('^(?:' + keywords.replace(/[\s,]+/g, '|') + ')\\b'),
+           null]);
+    }
+
+    shortcutStylePatterns.push([PR_PLAIN,       /^\s+/, null, ' \r\n\t\xA0']);
+
+    var punctuation =
+      // The Bash man page says
+
+      // A word is a sequence of characters considered as a single
+      // unit by GRUB. Words are separated by metacharacters,
+      // which are the following plus space, tab, and newline: { }
+      // | & $ ; < >
+      // ...
+      
+      // A word beginning with # causes that word and all remaining
+      // characters on that line to be ignored.
+
+      // which means that only a '#' after /(?:^|[{}|&$;<>\s])/ starts a
+      // comment but empirically
+      // $ echo {#}
+      // {#}
+      // $ echo \$#
+      // $#
+      // $ echo }#
+      // }#
+
+      // so /(?:^|[|&;<>\s])/ is more appropriate.
+
+      // http://gcc.gnu.org/onlinedocs/gcc-2.95.3/cpp_1.html#SEC3
+      // suggests that this definition is compatible with a
+      // default mode that tries to use a single token definition
+      // to recognize both bash/python style comments and C
+      // preprocessor directives.
+
+      // This definition of punctuation does not include # in the list of
+      // follow-on exclusions, so # will not be broken before if preceeded
+      // by a punctuation character.  We could try to exclude # after
+      // [|&;<>] but that doesn't seem to cause many major problems.
+      // If that does turn out to be a problem, we should change the below
+      // when hc is truthy to include # in the run of punctuation characters
+      // only when not followint [|&;<>].
+      '^.[^\\s\\w.$@\'"`/\\\\]*';
+    if (options['regexLiterals']) {
+      punctuation += '(?!\s*\/)';
+    }
+
+    fallthroughStylePatterns.push(
+        // TODO(mikesamuel): recognize non-latin letters and numerals in idents
+        [PR_LITERAL,     /^@[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_TYPE,        /^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/, null],
+        [PR_PLAIN,       /^[a-z_$][a-z_$@0-9]*/i, null],
+        [PR_LITERAL,
+         new RegExp(
+             '^(?:'
+             // A hex number
+             + '0x[a-f0-9]+'
+             // or an octal or decimal number,
+             + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
+             // possibly in scientific notation
+             + '(?:e[+\\-]?\\d+)?'
+             + ')'
+             // with an optional modifier like UL for unsigned long
+             + '[a-z]*', 'i'),
+         null, '0123456789'],
+        // Don't treat escaped quotes in bash as starting strings.
+        // See issue 144.
+        [PR_PLAIN,       /^\\[\s\S]?/, null],
+        [PR_PUNCTUATION, new RegExp(punctuation), null]);
+
+    return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
+  }
+
+  var decorateSource = sourceDecorator({
+        'keywords': ALL_KEYWORDS,
+        'hashComments': true,
+        'cStyleComments': true,
+        'multiLineStrings': true,
+        'regexLiterals': true
+      });
+
+  /**
+   * Given a DOM subtree, wraps it in a list, and puts each line into its own
+   * list item.
+   *
+   * @param {Node} node modified in place.  Its content is pulled into an
+   *     HTMLOListElement, and each line is moved into a separate list item.
+   *     This requires cloning elements, so the input might not have unique
+   *     IDs after numbering.
+   * @param {boolean} isPreformatted true iff white-space in text nodes should
+   *     be treated as significant.
+   */
+  function numberLines(node, opt_startLineNum, isPreformatted) {
+    var nocode = /(?:^|\s)nocode(?:\s|$)/;
+    var lineBreak = /\r\n?|\n/;
   
-     /**
-      * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
-      * {@code class=prettyprint} and prettify them.
-      *
-      * @param {Function} opt_whenDone called when prettifying is done.
-      * @param {HTMLElement|HTMLDocument} opt_root an element or document
-      *   containing all the elements to pretty print.
-      *   Defaults to {@code document.body}.
-      */
-    function $prettyPrint(opt_whenDone, opt_root) {
-      var root = opt_root || document.body;
-      var doc = root.ownerDocument || document;
-      function byTagName(tn) { return root.getElementsByTagName(tn); }
-      // fetch a list of nodes to rewrite
-      var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
-      var elements = [];
-      for (var i = 0; i < codeSegments.length; ++i) {
-        for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
-          elements.push(codeSegments[i][j]);
-        }
-      }
-      codeSegments = null;
-  
-      var clock = Date;
-      if (!clock['now']) {
-        clock = { 'now': function () { return +(new Date); } };
-      }
-  
-      // The loop is broken into a series of continuations to make sure that we
-      // don't make the browser unresponsive when rewriting a large page.
-      var k = 0;
-      var prettyPrintingJob;
-  
-      var langExtensionRe = /\blang(?:uage)?-([\w.]+)(?!\S)/;
-      var prettyPrintRe = /\bprettyprint\b/;
-      var prettyPrintedRe = /\bprettyprinted\b/;
-      var preformattedTagNameRe = /pre|xmp/i;
-      var codeRe = /^code$/i;
-      var preCodeXmpRe = /^(?:pre|code|xmp)$/i;
-      var EMPTY = {};
-  
-      function doWork() {
-        var endTime = (win['PR_SHOULD_USE_CONTINUATION'] ?
-                       clock['now']() + 250 /* ms */ :
-                       Infinity);
-        for (; k < elements.length && clock['now']() < endTime; k++) {
-          var cs = elements[k];
-  
-          // Look for a preceding comment like
-          // <?prettify lang="..." linenums="..."?>
-          var attrs = EMPTY;
-          {
-            for (var preceder = cs; (preceder = preceder.previousSibling);) {
-              var nt = preceder.nodeType;
-              // <?foo?> is parsed by HTML 5 to a comment node (8)
-              // like <!--?foo?-->, but in XML is a processing instruction
-              var value = (nt === 7 || nt === 8) && preceder.nodeValue;
-              if (value
-                  ? !/^\??prettify\b/.test(value)
-                  : (nt !== 3 || /\S/.test(preceder.nodeValue))) {
-                // Skip over white-space text nodes but not others.
-                break;
-              }
-              if (value) {
-                attrs = {};
-                value.replace(
-                    /\b(\w+)=([\w:.%+-]+)/g,
-                  function (_, name, value) { attrs[name] = value; });
-                break;
-              }
-            }
-          }
-  
-          var className = cs.className;
-          if ((attrs !== EMPTY || prettyPrintRe.test(className))
-              // Don't redo this if we've already done it.
-              // This allows recalling pretty print to just prettyprint elements
-              // that have been added to the page since last call.
-              && !prettyPrintedRe.test(className)) {
-  
-            // make sure this is not nested in an already prettified element
-            var nested = false;
-            for (var p = cs.parentNode; p; p = p.parentNode) {
-              var tn = p.tagName;
-              if (preCodeXmpRe.test(tn)
-                  && p.className && prettyPrintRe.test(p.className)) {
-                nested = true;
-                break;
-              }
-            }
-            if (!nested) {
-              // Mark done.  If we fail to prettyprint for whatever reason,
-              // we shouldn't try again.
-              cs.className += ' prettyprinted';
-  
-              // If the classes includes a language extensions, use it.
-              // Language extensions can be specified like
-              //     <pre class="prettyprint lang-cpp">
-              // the language extension "cpp" is used to find a language handler
-              // as passed to PR.registerLangHandler.
-              // HTML5 recommends that a language be specified using "language-"
-              // as the prefix instead.  Google Code Prettify supports both.
-              // http://dev.w3.org/html5/spec-author-view/the-code-element.html
-              var langExtension = attrs['lang'];
-              if (!langExtension) {
-                langExtension = className.match(langExtensionRe);
-                // Support <pre class="prettyprint"><code class="language-c">
-                var wrapper;
-                if (!langExtension && (wrapper = childContentWrapper(cs))
-                    && codeRe.test(wrapper.tagName)) {
-                  langExtension = wrapper.className.match(langExtensionRe);
-                }
-  
-                if (langExtension) { langExtension = langExtension[1]; }
-              }
-  
-              var preformatted;
-              if (preformattedTagNameRe.test(cs.tagName)) {
-                preformatted = 1;
-              } else {
-                var currentStyle = cs['currentStyle'];
-                var defaultView = doc.defaultView;
-                var whitespace = (
-                    currentStyle
-                    ? currentStyle['whiteSpace']
-                    : (defaultView
-                       && defaultView.getComputedStyle)
-                    ? defaultView.getComputedStyle(cs, null)
-                    .getPropertyValue('white-space')
-                    : 0);
-                preformatted = whitespace
-                    && 'pre' === whitespace.substring(0, 3);
-              }
-  
-              // Look for a class like linenums or linenums:<n> where <n> is the
-              // 1-indexed number of the first line.
-              var lineNums = attrs['linenums'];
-              if (!(lineNums = lineNums === 'true' || +lineNums)) {
-                lineNums = className.match(/\blinenums\b(?::(\d+))?/);
-                lineNums =
-                  lineNums
-                  ? lineNums[1] && lineNums[1].length
-                    ? +lineNums[1] : true
-                  : false;
-              }
-              if (lineNums) { numberLines(cs, lineNums, preformatted); }
+    var document = node.ownerDocument;
   
-              // do the pretty printing
-              prettyPrintingJob = {
-                langExtension: langExtension,
-                sourceNode: cs,
-                numberLines: lineNums,
-                pre: preformatted
-              };
-              applyDecorator(prettyPrintingJob);
-            }
+    var li = document.createElement('li');
+    while (node.firstChild) {
+      li.appendChild(node.firstChild);
+    }
+    // An array of lines.  We split below, so this is initialized to one
+    // un-split line.
+    var listItems = [li];
+  
+    function walk(node) {
+      var type = node.nodeType;
+      if (type == 1 && !nocode.test(node.className)) {  // Element
+        if ('br' === node.nodeName) {
+          breakAfter(node);
+          // Discard the <BR> since it is now flush against a </LI>.
+          if (node.parentNode) {
+            node.parentNode.removeChild(node);
+          }
+        } else {
+          for (var child = node.firstChild; child; child = child.nextSibling) {
+            walk(child);
           }
         }
-        if (k < elements.length) {
-          // finish up in a continuation
-          setTimeout(doWork, 250);
-        } else if ('function' === typeof opt_whenDone) {
-          opt_whenDone();
+      } else if ((type == 3 || type == 4) && isPreformatted) {  // Text
+        var text = node.nodeValue;
+        var match = text.match(lineBreak);
+        if (match) {
+          var firstLine = text.substring(0, match.index);
+          node.nodeValue = firstLine;
+          var tail = text.substring(match.index + match[0].length);
+          if (tail) {
+            var parent = node.parentNode;
+            parent.insertBefore(
+              document.createTextNode(tail), node.nextSibling);
+          }
+          breakAfter(node);
+          if (!firstLine) {
+            // Don't leave blank text nodes in the DOM.
+            node.parentNode.removeChild(node);
+          }
         }
       }
-  
-      doWork();
-    }
-  
-    /**
-     * Contains functions for creating and registering new language handlers.
-     * @type {Object}
-     */
-    var PR = win['PR'] = {
-          'createSimpleLexer': createSimpleLexer,
-          'registerLangHandler': registerLangHandler,
-          'sourceDecorator': sourceDecorator,
-          'PR_ATTRIB_NAME': PR_ATTRIB_NAME,
-          'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE,
-          'PR_COMMENT': PR_COMMENT,
-          'PR_DECLARATION': PR_DECLARATION,
-          'PR_KEYWORD': PR_KEYWORD,
-          'PR_LITERAL': PR_LITERAL,
-          'PR_NOCODE': PR_NOCODE,
-          'PR_PLAIN': PR_PLAIN,
-          'PR_PUNCTUATION': PR_PUNCTUATION,
-          'PR_SOURCE': PR_SOURCE,
-          'PR_STRING': PR_STRING,
-          'PR_TAG': PR_TAG,
-          'PR_TYPE': PR_TYPE,
-          'prettyPrintOne':
-             IN_GLOBAL_SCOPE
-               ? (win['prettyPrintOne'] = $prettyPrintOne)
-               : (prettyPrintOne = $prettyPrintOne),
-          'prettyPrint': prettyPrint =
-             IN_GLOBAL_SCOPE
-               ? (win['prettyPrint'] = $prettyPrint)
-               : (prettyPrint = $prettyPrint)
-        };
-  
-    // Make PR available via the Asynchronous Module Definition (AMD) API.
-    // Per https://github.com/amdjs/amdjs-api/wiki/AMD:
-    // The Asynchronous Module Definition (AMD) API specifies a
-    // mechanism for defining modules such that the module and its
-    // dependencies can be asynchronously loaded.
-    // ...
-    // To allow a clear indicator that a global define function (as
-    // needed for script src browser loading) conforms to the AMD API,
-    // any global define function SHOULD have a property called "amd"
-    // whose value is an object. This helps avoid conflict with any
-    // other existing JavaScript code that could have defined a define()
-    // function that does not conform to the AMD API.
-    if (typeof define === "function" && define['amd']) {
-      define("google-code-prettify", [], function () {
-        return PR; 
-      });
     }
-  })();
-  
-  define("prettify", function(){});
-  
-  define('itemView',[
-    'App',
-    // Templates
-    'text!tpl/item.html',
-    'text!tpl/class.html',
-    'text!tpl/itemEnd.html',
-    // Tools
-    'prettify'
-  ], function(App, itemTpl, classTpl, endTpl) {
-    'use strict';
   
-    var appVersion = App.project.version || 'master';
-  
-    var itemView = Backbone.View.extend({
-      el: '#item',
-      init: function() {
-        this.$html = $('html');
-        this.$body = $('body');
-        this.$scrollBody = $('html, body'); // hack for Chrome/Firefox scroll
-  
-        this.tpl = _.template(itemTpl);
-        this.classTpl = _.template(classTpl);
-        this.endTpl = _.template(endTpl);
-  
-        return this;
-      },
-      getSyntax: function(isMethod, cleanItem) {
-        var isConstructor = cleanItem.is_constructor;
-        var syntax = '';
-        if (isConstructor) {
-          syntax += 'new ';
-        } else if (cleanItem.static && cleanItem.class) {
-          syntax += cleanItem.class + '.';
-        }
-        syntax += cleanItem.name;
+    // Split a line after the given node.
+    function breakAfter(lineEndNode) {
+      // If there's nothing to the right, then we can skip ending the line
+      // here, and move root-wards since splitting just before an end-tag
+      // would require us to create a bunch of empty copies.
+      while (!lineEndNode.nextSibling) {
+        lineEndNode = lineEndNode.parentNode;
+        if (!lineEndNode) { return; }
+      }
   
-        if (isMethod || isConstructor) {
-          syntax += '(';
-          if (cleanItem.params) {
-            for (var i = 0; i < cleanItem.params.length; i++) {
-              var p = cleanItem.params[i];
-              if (p.optional) {
-                syntax += '[';
-              }
-              syntax += p.name;
-              if (p.optdefault) {
-                syntax += '=' + p.optdefault;
-              }
-              if (p.optional) {
-                syntax += ']';
-              }
-              if (i !== cleanItem.params.length - 1) {
-                syntax += ', ';
-              }
-            }
+      function breakLeftOf(limit, copy) {
+        // Clone shallowly if this node needs to be on both sides of the break.
+        var rightSide = copy ? limit.cloneNode(false) : limit;
+        var parent = limit.parentNode;
+        if (parent) {
+          // We clone the parent chain.
+          // This helps us resurrect important styling elements that cross lines.
+          // E.g. in <i>Foo<br>Bar</i>
+          // should be rewritten to <li><i>Foo</i></li><li><i>Bar</i></li>.
+          var parentClone = breakLeftOf(parent, 1);
+          // Move the clone and everything to the right of the original
+          // onto the cloned parent.
+          var next = limit.nextSibling;
+          parentClone.appendChild(rightSide);
+          for (var sibling = next; sibling; sibling = next) {
+            next = sibling.nextSibling;
+            parentClone.appendChild(sibling);
           }
-          syntax += ')';
         }
+        return rightSide;
+      }
   
-        return syntax;
-      },
-      // Return a list of valid syntaxes across all overloaded versions of
-      // this item.
-      //
-      // For reference, we ultimately want to replicate something like this:
-      //
-      // https://processing.org/reference/color_.html
-      getSyntaxes: function(isMethod, cleanItem) {
-        var overloads = cleanItem.overloads || [cleanItem];
-        return overloads.map(this.getSyntax.bind(this, isMethod));
-      },
-      render: function(item) {
-        if (item) {
-          var itemHtml = '';
-          var cleanItem = this.clean(item);
-          var isClass = item.hasOwnProperty('itemtype') ? 0 : 1;
-          var collectionName = isClass
-              ? 'Constructor'
-              : this.capitalizeFirst(cleanItem.itemtype),
-            isConstructor = cleanItem.is_constructor;
-          cleanItem.isMethod = collectionName === 'Method';
-  
-          var syntaxes = this.getSyntaxes(cleanItem.isMethod, cleanItem);
-  
-          // Set the item header (title)
-  
-          // Set item contents
-          if (isClass) {
-            var constructor = this.tpl({
-              item: cleanItem,
-              isClass: true,
-              isConstructor: isConstructor,
-              syntaxes: syntaxes
-            });
-            cleanItem.constructor = constructor;
+      var copiedListItem = breakLeftOf(lineEndNode.nextSibling, 0);
   
-            var contents = _.find(App.classes, function(c) {
-              return c.name === cleanItem.name;
-            });
-            cleanItem.things = contents.items;
+      // Walk the parent chain until we reach an unattached LI.
+      for (var parent;
+           // Check nodeType since IE invents document fragments.
+           (parent = copiedListItem.parentNode) && parent.nodeType === 1;) {
+        copiedListItem = parent;
+      }
+      // Put it on the list of lines for later processing.
+      listItems.push(copiedListItem);
+    }
   
-            itemHtml = this.classTpl(cleanItem);
-          } else {
-            cleanItem.constRefs =
-              item.module === 'Constants' && App.data.consts[item.name];
+    // Split lines while there are lines left to split.
+    for (var i = 0;  // Number of lines that have been split so far.
+         i < listItems.length;  // length updated by breakAfter calls.
+         ++i) {
+      walk(listItems[i]);
+    }
   
-            itemHtml = this.tpl({
-              item: cleanItem,
-              isClass: false,
-              isConstructor: false,
-              syntaxes: syntaxes
-            });
-          }
+    // Make sure numeric indices show correctly.
+    if (opt_startLineNum === (opt_startLineNum|0)) {
+      listItems[0].setAttribute('value', opt_startLineNum);
+    }
   
-          itemHtml += this.endTpl({ item: cleanItem, appVersion: appVersion });
+    var ol = document.createElement('ol');
+    ol.className = 'linenums';
+    var offset = Math.max(0, ((opt_startLineNum - 1 /* zero index */)) | 0) || 0;
+    for (var i = 0, n = listItems.length; i < n; ++i) {
+      li = listItems[i];
+      // Stick a class on the LIs so that stylesheets can
+      // color odd/even rows, or any other row pattern that
+      // is co-prime with 10.
+      li.className = 'L' + ((i + offset) % 10);
+      if (!li.firstChild) {
+        li.appendChild(document.createTextNode('\xA0'));
+      }
+      ol.appendChild(li);
+    }
   
-          // Insert the view in the dom
-          this.$el.html(itemHtml);
+    node.appendChild(ol);
+  }
+  /**
+   * Breaks {@code job.sourceCode} around style boundaries in
+   * {@code job.decorations} and modifies {@code job.sourceNode} in place.
+   * @param {Object} job like <pre>{
+   *    sourceCode: {string} source as plain text,
+   *    sourceNode: {HTMLElement} the element containing the source,
+   *    spans: {Array.<number|Node>} alternating span start indices into source
+   *       and the text node or element (e.g. {@code <BR>}) corresponding to that
+   *       span.
+   *    decorations: {Array.<number|string} an array of style classes preceded
+   *       by the position at which they start in job.sourceCode in order
+   * }</pre>
+   * @private
+   */
+  function recombineTagsAndDecorations(job) {
+    var isIE8OrEarlier = /\bMSIE\s(\d+)/.exec(navigator.userAgent);
+    isIE8OrEarlier = isIE8OrEarlier && +isIE8OrEarlier[1] <= 8;
+    var newlineRe = /\n/g;
+  
+    var source = job.sourceCode;
+    var sourceLength = source.length;
+    // Index into source after the last code-unit recombined.
+    var sourceIndex = 0;
+  
+    var spans = job.spans;
+    var nSpans = spans.length;
+    // Index into spans after the last span which ends at or before sourceIndex.
+    var spanIndex = 0;
+  
+    var decorations = job.decorations;
+    var nDecorations = decorations.length;
+    // Index into decorations after the last decoration which ends at or before
+    // sourceIndex.
+    var decorationIndex = 0;
+  
+    // Remove all zero-length decorations.
+    decorations[nDecorations] = sourceLength;
+    var decPos, i;
+    for (i = decPos = 0; i < nDecorations;) {
+      if (decorations[i] !== decorations[i + 2]) {
+        decorations[decPos++] = decorations[i++];
+        decorations[decPos++] = decorations[i++];
+      } else {
+        i += 2;
+      }
+    }
+    nDecorations = decPos;
+  
+    // Simplify decorations.
+    for (i = decPos = 0; i < nDecorations;) {
+      var startPos = decorations[i];
+      // Conflate all adjacent decorations that use the same style.
+      var startDec = decorations[i + 1];
+      var end = i + 2;
+      while (end + 2 <= nDecorations && decorations[end + 1] === startDec) {
+        end += 2;
+      }
+      decorations[decPos++] = startPos;
+      decorations[decPos++] = startDec;
+      i = end;
+    }
   
-          renderCode(cleanItem.name);
+    nDecorations = decorations.length = decPos;
   
-          // Set the document title based on the item name.
-          // If it is a method, add parentheses to the name
-          if (item.itemtype === 'method') {
-            App.pageView.appendToDocumentTitle(item.name + '()');
-          } else {
-            App.pageView.appendToDocumentTitle(item.name);
+    var sourceNode = job.sourceNode;
+    var oldDisplay;
+    if (sourceNode) {
+      oldDisplay = sourceNode.style.display;
+      sourceNode.style.display = 'none';
+    }
+    try {
+      var decoration = null;
+      while (spanIndex < nSpans) {
+        var spanStart = spans[spanIndex];
+        var spanEnd = spans[spanIndex + 2] || sourceLength;
+  
+        var decEnd = decorations[decorationIndex + 2] || sourceLength;
+  
+        var end = Math.min(spanEnd, decEnd);
+  
+        var textNode = spans[spanIndex + 1];
+        var styledText;
+        if (textNode.nodeType !== 1  // Don't muck with <BR>s or <LI>s
+            // Don't introduce spans around empty text nodes.
+            && (styledText = source.substring(sourceIndex, end))) {
+          // This may seem bizarre, and it is.  Emitting LF on IE causes the
+          // code to display with spaces instead of line breaks.
+          // Emitting Windows standard issue linebreaks (CRLF) causes a blank
+          // space to appear at the beginning of every line but the first.
+          // Emitting an old Mac OS 9 line separator makes everything spiffy.
+          if (isIE8OrEarlier) {
+            styledText = styledText.replace(newlineRe, '\r');
+          }
+          textNode.nodeValue = styledText;
+          var document = textNode.ownerDocument;
+          var span = document.createElement('span');
+          span.className = decorations[decorationIndex + 1];
+          var parentNode = textNode.parentNode;
+          parentNode.replaceChild(span, textNode);
+          span.appendChild(textNode);
+          if (sourceIndex < spanEnd) {  // Split off a text node.
+            spans[spanIndex + 1] = textNode
+                // TODO: Possibly optimize by using '' if there's no flicker.
+                = document.createTextNode(source.substring(end, spanEnd));
+            parentNode.insertBefore(textNode, span.nextSibling);
           }
-  
-          // Hook up alt-text for examples
-          setTimeout(function() {
-            var alts = $('.example-content')[0];
-            if (alts) {
-              alts = $(alts)
-                .data('alt')
-                .split('\n');
-  
-              var canvases = $('.cnv_div');
-              for (var j = 0; j < alts.length; j++) {
-                if (j < canvases.length) {
-                  $(canvases[j]).append(
-                    '<span class="sr-only">' + alts[j] + '</span>'
-                  );
-                }
-              }
-            }
-          }, 1000);
-          Prism.highlightAll();
         }
   
-        var renderEvent = new Event('reference-rendered');
-        window.dispatchEvent(renderEvent);
-  
-        return this;
-      },
-      /**
-       * Clean item properties: url encode properties containing paths.
-       * @param {object} item The item object.
-       * @returns {object} Returns the same item object with urlencoded paths.
-       */
-      clean: function(item) {
-        var cleanItem = item;
+        sourceIndex = end;
   
-        if (cleanItem.hasOwnProperty('file')) {
-          cleanItem.urlencodedfile = encodeURIComponent(item.file);
+        if (sourceIndex >= spanEnd) {
+          spanIndex += 2;
         }
-        return cleanItem;
-      },
-      /**
-       * Show a single item.
-       * @param {object} item Item object.
-       * @returns {object} This view.
-       */
-      show: function(item) {
-        if (item) {
-          this.render(item);
+        if (sourceIndex >= decEnd) {
+          decorationIndex += 2;
         }
-  
-        App.pageView.hideContentViews();
-  
-        this.$el.show();
-  
-        this.scrollTop();
-        $('#item').focus();
-        return this;
-      },
-      /**
-       * Show a message if no item is found.
-       * @returns {object} This view.
-       */
-      nothingFound: function() {
-        this.$el.html(
-          '<p><br><br>Ouch. I am unable to find any item that match the current query.</p>'
-        );
-        App.pageView.hideContentViews();
-        this.$el.show();
-  
-        return this;
-      },
-      /**
-       * Scroll to the top of the window with an animation.
-       */
-      scrollTop: function() {
-        // Hack for Chrome/Firefox scroll animation
-        // Chrome scrolls 'body', Firefox scrolls 'html'
-        var scroll = this.$body.scrollTop() > 0 || this.$html.scrollTop() > 0;
-        if (scroll) {
-          this.$scrollBody.animate({ scrollTop: 0 }, 600);
+      }
+    } finally {
+      if (sourceNode) {
+        sourceNode.style.display = oldDisplay;
+      }
+    }
+  }
+
+  /** Maps language-specific file extensions to handlers. */
+  var langHandlerRegistry = {};
+  /** Register a language handler for the given file extensions.
+    * @param {function (Object)} handler a function from source code to a list
+    *      of decorations.  Takes a single argument job which describes the
+    *      state of the computation.   The single parameter has the form
+    *      {@code {
+    *        sourceCode: {string} as plain text.
+    *        decorations: {Array.<number|string>} an array of style classes
+    *                     preceded by the position at which they start in
+    *                     job.sourceCode in order.
+    *                     The language handler should assigned this field.
+    *        basePos: {int} the position of source in the larger source chunk.
+    *                 All positions in the output decorations array are relative
+    *                 to the larger source chunk.
+    *      } }
+    * @param {Array.<string>} fileExtensions
+    */
+  function registerLangHandler(handler, fileExtensions) {
+    for (var i = fileExtensions.length; --i >= 0;) {
+      var ext = fileExtensions[i];
+      if (!langHandlerRegistry.hasOwnProperty(ext)) {
+        langHandlerRegistry[ext] = handler;
+      } else if (win['console']) {
+        console['warn']('cannot override language handler %s', ext);
+      }
+    }
+  }
+  function langHandlerForExtension(extension, source) {
+    if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
+      // Treat it as markup if the first non whitespace character is a < and
+      // the last non-whitespace character is a >.
+      extension = /^\s*</.test(source)
+          ? 'default-markup'
+          : 'default-code';
+    }
+    return langHandlerRegistry[extension];
+  }
+  registerLangHandler(decorateSource, ['default-code']);
+  registerLangHandler(
+      createSimpleLexer(
+          [],
+          [
+           [PR_PLAIN,       /^[^<?]+/],
+           [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
+           [PR_COMMENT,     /^<\!--[\s\S]*?(?:-\->|$)/],
+           // Unescaped content in an unknown language
+           ['lang-',        /^<\?([\s\S]+?)(?:\?>|$)/],
+           ['lang-',        /^<%([\s\S]+?)(?:%>|$)/],
+           [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
+           ['lang-',        /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
+           // Unescaped content in javascript.  (Or possibly vbscript).
+           ['lang-js',      /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
+           // Contains unescaped stylesheet content
+           ['lang-css',     /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
+           ['lang-in.tag',  /^(<\/?[a-z][^<>]*>)/i]
+          ]),
+      ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
+  registerLangHandler(
+      createSimpleLexer(
+          [
+           [PR_PLAIN,        /^[\s]+/, null, ' \t\r\n'],
+           [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
+           ],
+          [
+           [PR_TAG,          /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
+           [PR_ATTRIB_NAME,  /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
+           ['lang-uq.val',   /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
+           [PR_PUNCTUATION,  /^[=<>\/]+/],
+           ['lang-js',       /^on\w+\s*=\s*\"([^\"]+)\"/i],
+           ['lang-js',       /^on\w+\s*=\s*\'([^\']+)\'/i],
+           ['lang-js',       /^on\w+\s*=\s*([^\"\'>\s]+)/i],
+           ['lang-css',      /^style\s*=\s*\"([^\"]+)\"/i],
+           ['lang-css',      /^style\s*=\s*\'([^\']+)\'/i],
+           ['lang-css',      /^style\s*=\s*([^\"\'>\s]+)/i]
+           ]),
+      ['in.tag']);
+  registerLangHandler(
+      createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CPP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'types': C_TYPES
+        }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': 'null,true,false'
+        }), ['json']);
+  registerLangHandler(sourceDecorator({
+          'keywords': CSHARP_KEYWORDS,
+          'hashComments': true,
+          'cStyleComments': true,
+          'verbatimStrings': true,
+          'types': C_TYPES
+        }), ['cs']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JAVA_KEYWORDS,
+          'cStyleComments': true
+        }), ['java']);
+  registerLangHandler(sourceDecorator({
+          'keywords': SH_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true
+        }), ['bash', 'bsh', 'csh', 'sh']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PYTHON_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'tripleQuotedStrings': true
+        }), ['cv', 'py', 'python']);
+  registerLangHandler(sourceDecorator({
+          'keywords': PERL_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': 2  // multiline regex literals
+        }), ['perl', 'pl', 'pm']);
+  registerLangHandler(sourceDecorator({
+          'keywords': RUBY_KEYWORDS,
+          'hashComments': true,
+          'multiLineStrings': true,
+          'regexLiterals': true
+        }), ['rb', 'ruby']);
+  registerLangHandler(sourceDecorator({
+          'keywords': JSCRIPT_KEYWORDS,
+          'cStyleComments': true,
+          'regexLiterals': true
+        }), ['javascript', 'js']);
+  registerLangHandler(sourceDecorator({
+          'keywords': COFFEE_KEYWORDS,
+          'hashComments': 3,  // ### style block comments
+          'cStyleComments': true,
+          'multilineStrings': true,
+          'tripleQuotedStrings': true,
+          'regexLiterals': true
+        }), ['coffee']);
+  registerLangHandler(sourceDecorator({
+          'keywords': RUST_KEYWORDS,
+          'cStyleComments': true,
+          'multilineStrings': true
+        }), ['rc', 'rs', 'rust']);
+  registerLangHandler(
+      createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
+
+  function applyDecorator(job) {
+    var opt_langExtension = job.langExtension;
+
+    try {
+      // Extract tags, and convert the source code to plain text.
+      var sourceAndSpans = extractSourceSpans(job.sourceNode, job.pre);
+      /** Plain text. @type {string} */
+      var source = sourceAndSpans.sourceCode;
+      job.sourceCode = source;
+      job.spans = sourceAndSpans.spans;
+      job.basePos = 0;
+
+      // Apply the appropriate language handler
+      langHandlerForExtension(opt_langExtension, source)(job);
+
+      // Integrate the decorations and tags back into the source code,
+      // modifying the sourceNode in place.
+      recombineTagsAndDecorations(job);
+    } catch (e) {
+      if (win['console']) {
+        console['log'](e && e['stack'] || e);
+      }
+    }
+  }
+
+  /**
+   * Pretty print a chunk of code.
+   * @param sourceCodeHtml {string} The HTML to pretty print.
+   * @param opt_langExtension {string} The language name to use.
+   *     Typically, a filename extension like 'cpp' or 'java'.
+   * @param opt_numberLines {number|boolean} True to number lines,
+   *     or the 1-indexed number of the first line in sourceCodeHtml.
+   */
+  function $prettyPrintOne(sourceCodeHtml, opt_langExtension, opt_numberLines) {
+    var container = document.createElement('div');
+    // This could cause images to load and onload listeners to fire.
+    // E.g. <img onerror="alert(1337)" src="nosuchimage.png">.
+    // We assume that the inner HTML is from a trusted source.
+    // The pre-tag is required for IE8 which strips newlines from innerHTML
+    // when it is injected into a <pre> tag.
+    // http://stackoverflow.com/questions/451486/pre-tag-loses-line-breaks-when-setting-innerhtml-in-ie
+    // http://stackoverflow.com/questions/195363/inserting-a-newline-into-a-pre-tag-ie-javascript
+    container.innerHTML = '<pre>' + sourceCodeHtml + '</pre>';
+    container = container.firstChild;
+    if (opt_numberLines) {
+      numberLines(container, opt_numberLines, true);
+    }
+
+    var job = {
+      langExtension: opt_langExtension,
+      numberLines: opt_numberLines,
+      sourceNode: container,
+      pre: 1
+    };
+    applyDecorator(job);
+    return container.innerHTML;
+  }
+
+   /**
+    * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
+    * {@code class=prettyprint} and prettify them.
+    *
+    * @param {Function} opt_whenDone called when prettifying is done.
+    * @param {HTMLElement|HTMLDocument} opt_root an element or document
+    *   containing all the elements to pretty print.
+    *   Defaults to {@code document.body}.
+    */
+  function $prettyPrint(opt_whenDone, opt_root) {
+    var root = opt_root || document.body;
+    var doc = root.ownerDocument || document;
+    function byTagName(tn) { return root.getElementsByTagName(tn); }
+    // fetch a list of nodes to rewrite
+    var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
+    var elements = [];
+    for (var i = 0; i < codeSegments.length; ++i) {
+      for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
+        elements.push(codeSegments[i][j]);
+      }
+    }
+    codeSegments = null;
+
+    var clock = Date;
+    if (!clock['now']) {
+      clock = { 'now': function () { return +(new Date); } };
+    }
+
+    // The loop is broken into a series of continuations to make sure that we
+    // don't make the browser unresponsive when rewriting a large page.
+    var k = 0;
+    var prettyPrintingJob;
+
+    var langExtensionRe = /\blang(?:uage)?-([\w.]+)(?!\S)/;
+    var prettyPrintRe = /\bprettyprint\b/;
+    var prettyPrintedRe = /\bprettyprinted\b/;
+    var preformattedTagNameRe = /pre|xmp/i;
+    var codeRe = /^code$/i;
+    var preCodeXmpRe = /^(?:pre|code|xmp)$/i;
+    var EMPTY = {};
+
+    function doWork() {
+      var endTime = (win['PR_SHOULD_USE_CONTINUATION'] ?
+                     clock['now']() + 250 /* ms */ :
+                     Infinity);
+      for (; k < elements.length && clock['now']() < endTime; k++) {
+        var cs = elements[k];
+
+        // Look for a preceding comment like
+        // <?prettify lang="..." linenums="..."?>
+        var attrs = EMPTY;
+        {
+          for (var preceder = cs; (preceder = preceder.previousSibling);) {
+            var nt = preceder.nodeType;
+            // <?foo?> is parsed by HTML 5 to a comment node (8)
+            // like <!--?foo?-->, but in XML is a processing instruction
+            var value = (nt === 7 || nt === 8) && preceder.nodeValue;
+            if (value
+                ? !/^\??prettify\b/.test(value)
+                : (nt !== 3 || /\S/.test(preceder.nodeValue))) {
+              // Skip over white-space text nodes but not others.
+              break;
+            }
+            if (value) {
+              attrs = {};
+              value.replace(
+                  /\b(\w+)=([\w:.%+-]+)/g,
+                function (_, name, value) { attrs[name] = value; });
+              break;
+            }
+          }
         }
-      },
-      /**
-       * Helper method to capitalize the first letter of a string
-       * @param {string} str
-       * @returns {string} Returns the string.
-       */
-      capitalizeFirst: function(str) {
-        return str.substr(0, 1).toUpperCase() + str.substr(1);
+
+        var className = cs.className;
+        if ((attrs !== EMPTY || prettyPrintRe.test(className))
+            // Don't redo this if we've already done it.
+            // This allows recalling pretty print to just prettyprint elements
+            // that have been added to the page since last call.
+            && !prettyPrintedRe.test(className)) {
+
+          // make sure this is not nested in an already prettified element
+          var nested = false;
+          for (var p = cs.parentNode; p; p = p.parentNode) {
+            var tn = p.tagName;
+            if (preCodeXmpRe.test(tn)
+                && p.className && prettyPrintRe.test(p.className)) {
+              nested = true;
+              break;
+            }
+          }
+          if (!nested) {
+            // Mark done.  If we fail to prettyprint for whatever reason,
+            // we shouldn't try again.
+            cs.className += ' prettyprinted';
+
+            // If the classes includes a language extensions, use it.
+            // Language extensions can be specified like
+            //     <pre class="prettyprint lang-cpp">
+            // the language extension "cpp" is used to find a language handler
+            // as passed to PR.registerLangHandler.
+            // HTML5 recommends that a language be specified using "language-"
+            // as the prefix instead.  Google Code Prettify supports both.
+            // http://dev.w3.org/html5/spec-author-view/the-code-element.html
+            var langExtension = attrs['lang'];
+            if (!langExtension) {
+              langExtension = className.match(langExtensionRe);
+              // Support <pre class="prettyprint"><code class="language-c">
+              var wrapper;
+              if (!langExtension && (wrapper = childContentWrapper(cs))
+                  && codeRe.test(wrapper.tagName)) {
+                langExtension = wrapper.className.match(langExtensionRe);
+              }
+
+              if (langExtension) { langExtension = langExtension[1]; }
+            }
+
+            var preformatted;
+            if (preformattedTagNameRe.test(cs.tagName)) {
+              preformatted = 1;
+            } else {
+              var currentStyle = cs['currentStyle'];
+              var defaultView = doc.defaultView;
+              var whitespace = (
+                  currentStyle
+                  ? currentStyle['whiteSpace']
+                  : (defaultView
+                     && defaultView.getComputedStyle)
+                  ? defaultView.getComputedStyle(cs, null)
+                  .getPropertyValue('white-space')
+                  : 0);
+              preformatted = whitespace
+                  && 'pre' === whitespace.substring(0, 3);
+            }
+
+            // Look for a class like linenums or linenums:<n> where <n> is the
+            // 1-indexed number of the first line.
+            var lineNums = attrs['linenums'];
+            if (!(lineNums = lineNums === 'true' || +lineNums)) {
+              lineNums = className.match(/\blinenums\b(?::(\d+))?/);
+              lineNums =
+                lineNums
+                ? lineNums[1] && lineNums[1].length
+                  ? +lineNums[1] : true
+                : false;
+            }
+            if (lineNums) { numberLines(cs, lineNums, preformatted); }
+
+            // do the pretty printing
+            prettyPrintingJob = {
+              langExtension: langExtension,
+              sourceNode: cs,
+              numberLines: lineNums,
+              pre: preformatted
+            };
+            applyDecorator(prettyPrintingJob);
+          }
+        }
+      }
+      if (k < elements.length) {
+        // finish up in a continuation
+        setTimeout(doWork, 250);
+      } else if ('function' === typeof opt_whenDone) {
+        opt_whenDone();
       }
+    }
+
+    doWork();
+  }
+
+  /**
+   * Contains functions for creating and registering new language handlers.
+   * @type {Object}
+   */
+  var PR = win['PR'] = {
+        'createSimpleLexer': createSimpleLexer,
+        'registerLangHandler': registerLangHandler,
+        'sourceDecorator': sourceDecorator,
+        'PR_ATTRIB_NAME': PR_ATTRIB_NAME,
+        'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE,
+        'PR_COMMENT': PR_COMMENT,
+        'PR_DECLARATION': PR_DECLARATION,
+        'PR_KEYWORD': PR_KEYWORD,
+        'PR_LITERAL': PR_LITERAL,
+        'PR_NOCODE': PR_NOCODE,
+        'PR_PLAIN': PR_PLAIN,
+        'PR_PUNCTUATION': PR_PUNCTUATION,
+        'PR_SOURCE': PR_SOURCE,
+        'PR_STRING': PR_STRING,
+        'PR_TAG': PR_TAG,
+        'PR_TYPE': PR_TYPE,
+        'prettyPrintOne':
+           IN_GLOBAL_SCOPE
+             ? (win['prettyPrintOne'] = $prettyPrintOne)
+             : (prettyPrintOne = $prettyPrintOne),
+        'prettyPrint': prettyPrint =
+           IN_GLOBAL_SCOPE
+             ? (win['prettyPrint'] = $prettyPrint)
+             : (prettyPrint = $prettyPrint)
+      };
+
+  // Make PR available via the Asynchronous Module Definition (AMD) API.
+  // Per https://github.com/amdjs/amdjs-api/wiki/AMD:
+  // The Asynchronous Module Definition (AMD) API specifies a
+  // mechanism for defining modules such that the module and its
+  // dependencies can be asynchronously loaded.
+  // ...
+  // To allow a clear indicator that a global define function (as
+  // needed for script src browser loading) conforms to the AMD API,
+  // any global define function SHOULD have a property called "amd"
+  // whose value is an object. This helps avoid conflict with any
+  // other existing JavaScript code that could have defined a define()
+  // function that does not conform to the AMD API.
+  if (typeof define === "function" && define['amd']) {
+    define("google-code-prettify", [], function () {
+      return PR; 
     });
-  
-    return itemView;
-  });
-  
-  
-  define('text!tpl/menu.html',[],function () { return '<div>\n  <br>\n  <span id="reference-description1">Can\'t find what you\'re looking for? You may want to check out</span>\n  <a href="#/libraries/p5.sound">p5.sound</a>.<br><a href=\'https://p5js.org/offline-reference/p5-reference.zip\' target=_blank><span id="reference-description3">You can also download an offline version of the reference.</span></a>\n</div>\n\n<div id=\'collection-list-categories\'>\n<h2 class="sr-only" id="categories">Categories</h2>\n<% var i=0; %>\n<% var max=Math.floor(groups.length/4); %>\n<% var rem=groups.length%4; %>\n\n<% _.each(groups, function(group){ %>\n  <% var m = rem > 0 ? 1 : 0 %>\n  <% if (i === 0) { %>\n    <ul aria-labelledby="categories">\n    <% } %>\n    <li><a href="#group-<%=group%>"><%=group%></a></li>\n    <% if (i === (max+m-1)) { %>\n    </ul>\n  \t<% rem-- %>\n  \t<% i=0 %>\n  <% } else { %>\n  \t<% i++ %>\n  <% } %>\n<% }); %>\n</div>\n';});
-  
-  define('menuView',[
-    'App',
-    'text!tpl/menu.html'
-  ], function(App, menuTpl) {
-  
-    var menuView = Backbone.View.extend({
-      el: '#collection-list-nav',
-      /**
-       * Init.
-       * @returns {object} This view.
-       */
-      init: function() {
-        this.menuTpl = _.template(menuTpl);
-        return this;
-      },
-      /**
-       * Render.
-       * @returns {object} This view.
-       */
-      render: function() {
-  
-        var groups = [];
-        _.each(App.modules, function (item, i) {
-          if (!item.is_submodule) {
-            if (!item.file || item.file.indexOf('addons') === -1) { //addons don't get displayed on main page
-              groups.push(item.name);
+  }
+})();
+
+define("prettify", function(){});
+
+define('itemView',[
+  'App',
+  // Templates
+  'text!tpl/item.html',
+  'text!tpl/class.html',
+  'text!tpl/itemEnd.html',
+  // Tools
+  'prettify'
+], function(App, itemTpl, classTpl, endTpl) {
+  'use strict';
+
+  var appVersion = App.project.version || 'master';
+
+  var itemView = Backbone.View.extend({
+    el: '#item',
+    init: function() {
+      this.$html = $('html');
+      this.$body = $('body');
+      this.$scrollBody = $('html, body'); // hack for Chrome/Firefox scroll
+
+      this.tpl = _.template(itemTpl);
+      this.classTpl = _.template(classTpl);
+      this.endTpl = _.template(endTpl);
+
+      return this;
+    },
+    getSyntax: function(isMethod, cleanItem) {
+      var isConstructor = cleanItem.is_constructor;
+      var syntax = '';
+      if (isConstructor) {
+        syntax += 'new ';
+      } else if (cleanItem.static && cleanItem.class) {
+        syntax += cleanItem.class + '.';
+      }
+      syntax += cleanItem.name;
+
+      if (isMethod || isConstructor) {
+        syntax += '(';
+        if (cleanItem.params) {
+          for (var i = 0; i < cleanItem.params.length; i++) {
+            var p = cleanItem.params[i];
+            if (p.optional) {
+              syntax += '[';
+            }
+            syntax += p.name;
+            if (p.optdefault) {
+              syntax += '=' + p.optdefault;
+            }
+            if (p.optional) {
+              syntax += ']';
+            }
+            if (i !== cleanItem.params.length - 1) {
+              syntax += ', ';
             }
           }
-          //}
-        });
-  
-        // Sort groups by name A-Z
-        groups.sort();
-  
-        var menuHtml = this.menuTpl({
-          'groups': groups
-        });
-  
-        // Render the view
-        this.$el.html(menuHtml);
-      },
-  
-      hide: function() {
-        this.$el.hide();
-      },
-  
-      show: function() {
-        this.$el.show();
-      },
-  
-      /**
-       * Update the menu.
-       * @param {string} el The name of the current route.
-       */
-      update: function(menuItem) {
-        //console.log(menuItem);
-        // this.$menuItems.removeClass('active');
-        // this.$menuItems.find('a[href=#'+menuItem+']').parent().addClass('active');
-  
+        }
+        syntax += ')';
       }
-    });
-  
-    return menuView;
-  
-  });
-  
-  
-  define('text!tpl/library.html',[],function () { return '<h3><%= module.name %> library</h3>\n\n<p><%= module.description %></p>\n\n<div id="library-page" class="reference-group clearfix">  \n\n<% var t = 0; col = 0; %>\n\n<% _.each(groups, function(group){ %>\n  <% if (t == 0) { %> \n    <div class="column_<%=col%>">\n  <% } %>\n  <% if (group.name !== module.name && group.name !== \'p5\') { %>\n    <% if (group.hash) { %> <a href="<%=group.hash%>" <% if (group.module !== module.name) { %>class="core"<% } %>><% } %>  \n    <h2 class="group-name <% if (t == 0) { %> first<%}%>"><%=group.name%></h2>\n    <% if (group.hash) { %> </a><br> <% } %>\n  <% } %>\n  <% _.each(group.items.filter(function(item) {return item.access !== \'private\'}), function(item) { %>\n    <a href="<%=item.hash%>" <% if (item.module !== module.name) { %>class="core"<% } %>><%=item.name%><% if (item.itemtype === \'method\') { %>()<%}%></a><br>\n    <% t++; %>\n  <% }); %>\n  <% if (t >= Math.floor(totalItems/4)) { col++; t = 0; %>\n    </div>\n  <% } %>\n<% }); %>\n</div>\n';});
-  
-  define(
-    'libraryView',[
-      'App',
-      // Templates
-      'text!tpl/library.html'
-    ],
-    function(App, libraryTpl) {
-      var libraryView = Backbone.View.extend({
-        el: '#list',
-        events: {},
-        /**
-         * Init.
-         */
-        init: function() {
-          this.libraryTpl = _.template(libraryTpl);
-  
-          return this;
-        },
-        /**
-         * Render the list.
-         */
-        render: function(m, listCollection) {
-          if (m && listCollection) {
-            var self = this;
-  
-            // Render items and group them by module
-            // module === group
-            this.groups = {};
-            _.each(m.items, function(item, i) {
-              var module = item.module || '_';
-              var group;
-              // Override default group with a selected category
-              // TODO: Overwriting with the first category might not be the best choice
-              // We might also want to have links for categories
-              if (item.category && item.category[0]) {
-                group = item.category[0];
-                // Populate item.hash
-                App.router.getHash(item);
-  
-                // Create a group list without link hash
-                if (!self.groups[group]) {
-                  self.groups[group] = {
-                    name: group.replace('_', '&nbsp;'),
-                    module: module,
-                    hash: undefined,
-                    items: []
-                  };
-                }
-              } else {
-                group = item.class || '_';
-                var hash = App.router.getHash(item);
-  
-                var ind = hash.lastIndexOf('/');
-                hash = hash.substring(0, ind);
-  
-                // Create a group list
-                if (!self.groups[group]) {
-                  self.groups[group] = {
-                    name: group.replace('_', '&nbsp;'),
-                    module: module,
-                    hash: hash,
-                    items: []
-                  };
-                }
+
+      return syntax;
+    },
+    // Return a list of valid syntaxes across all overloaded versions of
+    // this item.
+    //
+    // For reference, we ultimately want to replicate something like this:
+    //
+    // https://processing.org/reference/color_.html
+    getSyntaxes: function(isMethod, cleanItem) {
+      var overloads = cleanItem.overloads || [cleanItem];
+      return overloads.map(this.getSyntax.bind(this, isMethod));
+    },
+    render: function(item) {
+      if (item) {
+        var itemHtml = '';
+        var cleanItem = this.clean(item);
+        var isClass = item.hasOwnProperty('itemtype') ? 0 : 1;
+        var collectionName = isClass
+            ? 'Constructor'
+            : this.capitalizeFirst(cleanItem.itemtype),
+          isConstructor = cleanItem.is_constructor;
+        cleanItem.isMethod = collectionName === 'Method';
+
+        var syntaxes = this.getSyntaxes(cleanItem.isMethod, cleanItem);
+
+        // Set the item header (title)
+
+        // Set item contents
+        if (isClass) {
+          var constructor = this.tpl({
+            item: cleanItem,
+            isClass: true,
+            isConstructor: isConstructor,
+            syntaxes: syntaxes
+          });
+          cleanItem.constructor = constructor;
+
+          var contents = _.find(App.classes, function(c) {
+            return c.name === cleanItem.name;
+          });
+          cleanItem.things = contents.items;
+
+          itemHtml = this.classTpl(cleanItem);
+        } else {
+          cleanItem.constRefs =
+            item.module === 'Constants' && App.data.consts[item.name];
+
+          itemHtml = this.tpl({
+            item: cleanItem,
+            isClass: false,
+            isConstructor: false,
+            syntaxes: syntaxes
+          });
+        }
+
+        itemHtml += this.endTpl({ item: cleanItem, appVersion: appVersion });
+
+        // Insert the view in the dom
+        this.$el.html(itemHtml);
+
+        renderCode(cleanItem.name);
+
+        // Set the document title based on the item name.
+        // If it is a method, add parentheses to the name
+        if (item.itemtype === 'method') {
+          App.pageView.appendToDocumentTitle(item.name + '()');
+        } else {
+          App.pageView.appendToDocumentTitle(item.name);
+        }
+
+        // Hook up alt-text for examples
+        setTimeout(function() {
+          var alts = $('.example-content')[0];
+          if (alts) {
+            alts = $(alts)
+              .data('alt')
+              .split('\n');
+
+            var canvases = $('.cnv_div');
+            for (var j = 0; j < alts.length; j++) {
+              if (j < canvases.length) {
+                $(canvases[j]).append(
+                  '<span class="sr-only">' + alts[j] + '</span>'
+                );
               }
-  
-              self.groups[group].items.push(item);
-            });
-  
-            // Sort groups by name A-Z
-            self.groups = _.sortBy(self.groups, this.sortByName);
-  
-            // Put the <li> items html into the list <ul>
-            var libraryHtml = self.libraryTpl({
-              title: self.capitalizeFirst(listCollection),
-              module: m.module,
-              totalItems: m.items.length,
-              groups: self.groups
-            });
-  
-            // Render the view
-            this.$el.html(libraryHtml);
+            }
           }
-  
-          return this;
-        },
-        /**
-         * Show a list of items.
-         * @param {array} items Array of item objects.
-         * @returns {object} This view.
-         */
-        show: function(listGroup) {
-          if (App[listGroup]) {
-            this.render(App[listGroup], listGroup);
+        }, 1000);
+        Prism.highlightAll();
+      }
+
+      var renderEvent = new Event('reference-rendered');
+      window.dispatchEvent(renderEvent);
+
+      return this;
+    },
+    /**
+     * Clean item properties: url encode properties containing paths.
+     * @param {object} item The item object.
+     * @returns {object} Returns the same item object with urlencoded paths.
+     */
+    clean: function(item) {
+      var cleanItem = item;
+
+      if (cleanItem.hasOwnProperty('file')) {
+        cleanItem.urlencodedfile = encodeURIComponent(item.file);
+      }
+      return cleanItem;
+    },
+    /**
+     * Show a single item.
+     * @param {object} item Item object.
+     * @returns {object} This view.
+     */
+    show: function(item) {
+      if (item) {
+        this.render(item);
+      }
+
+      App.pageView.hideContentViews();
+
+      this.$el.show();
+
+      this.scrollTop();
+      $('#item').focus();
+      return this;
+    },
+    /**
+     * Show a message if no item is found.
+     * @returns {object} This view.
+     */
+    nothingFound: function() {
+      this.$el.html(
+        '<p><br><br>Ouch. I am unable to find any item that match the current query.</p>'
+      );
+      App.pageView.hideContentViews();
+      this.$el.show();
+
+      return this;
+    },
+    /**
+     * Scroll to the top of the window with an animation.
+     */
+    scrollTop: function() {
+      // Hack for Chrome/Firefox scroll animation
+      // Chrome scrolls 'body', Firefox scrolls 'html'
+      var scroll = this.$body.scrollTop() > 0 || this.$html.scrollTop() > 0;
+      if (scroll) {
+        this.$scrollBody.animate({ scrollTop: 0 }, 600);
+      }
+    },
+    /**
+     * Helper method to capitalize the first letter of a string
+     * @param {string} str
+     * @returns {string} Returns the string.
+     */
+    capitalizeFirst: function(str) {
+      return str.substr(0, 1).toUpperCase() + str.substr(1);
+    }
+  });
+
+  return itemView;
+});
+
+
+define('text!tpl/menu.html',[],function () { return '<div>\r\n  <br>\r\n  <span id="reference-description1">Can\'t find what you\'re looking for? You may want to check out</span>\r\n  <a href="#/libraries/p5.sound">p5.sound</a>.<br><a href=\'https://p5js.org/offline-reference/p5-reference.zip\' target=_blank><span id="reference-description3">You can also download an offline version of the reference.</span></a>\r\n</div>\r\n\r\n<div id=\'collection-list-categories\'>\r\n<h2 class="sr-only" id="categories">Categories</h2>\r\n<% var i=0; %>\r\n<% var max=Math.floor(groups.length/4); %>\r\n<% var rem=groups.length%4; %>\r\n\r\n<% _.each(groups, function(group){ %>\r\n  <% var m = rem > 0 ? 1 : 0 %>\r\n  <% if (i === 0) { %>\r\n    <ul aria-labelledby="categories">\r\n    <% } %>\r\n    <li><a href="#group-<%=group%>"><%=group%></a></li>\r\n    <% if (i === (max+m-1)) { %>\r\n    </ul>\r\n  \t<% rem-- %>\r\n  \t<% i=0 %>\r\n  <% } else { %>\r\n  \t<% i++ %>\r\n  <% } %>\r\n<% }); %>\r\n</div>\r\n';});
+
+define('menuView',[
+  'App',
+  'text!tpl/menu.html'
+], function(App, menuTpl) {
+
+  var menuView = Backbone.View.extend({
+    el: '#collection-list-nav',
+    /**
+     * Init.
+     * @returns {object} This view.
+     */
+    init: function() {
+      this.menuTpl = _.template(menuTpl);
+      return this;
+    },
+    /**
+     * Render.
+     * @returns {object} This view.
+     */
+    render: function() {
+
+      var groups = [];
+      _.each(App.modules, function (item, i) {
+        if (!item.is_submodule) {
+          if (!item.file || item.file.indexOf('addons') === -1) { //addons don't get displayed on main page
+            groups.push(item.name);
           }
-          App.pageView.hideContentViews();
-  
-          this.$el.show();
-  
-          return this;
-        },
-        /**
-         * Helper method to capitalize the first letter of a string
-         * @param {string} str
-         * @returns {string} Returns the string.
-         */
-        capitalizeFirst: function(str) {
-          return str.substr(0, 1).toUpperCase() + str.substr(1);
-        },
-        /**
-         * Sort function (for the Array.prototype.sort() native method): from A to Z.
-         * @param {string} a
-         * @param {string} b
-         * @returns {Array} Returns an array with elements sorted from A to Z.
-         */
-        sortAZ: function(a, b) {
-          return a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase() ? 1 : -1;
-        },
-  
-        sortByName: function(a, b) {
-          if (a.name === 'p5') return -1;
-          else return 0;
         }
+        //}
       });
-  
-      return libraryView;
+
+      // Sort groups by name A-Z
+      groups.sort();
+
+      var menuHtml = this.menuTpl({
+        'groups': groups
+      });
+
+      // Render the view
+      this.$el.html(menuHtml);
+    },
+
+    hide: function() {
+      this.$el.hide();
+    },
+
+    show: function() {
+      this.$el.show();
+    },
+
+    /**
+     * Update the menu.
+     * @param {string} el The name of the current route.
+     */
+    update: function(menuItem) {
+      //console.log(menuItem);
+      // this.$menuItems.removeClass('active');
+      // this.$menuItems.find('a[href=#'+menuItem+']').parent().addClass('active');
+
     }
-  );
-  
-  define('pageView',[
+  });
+
+  return menuView;
+
+});
+
+
+define('text!tpl/library.html',[],function () { return '<h3><%= module.name %> library</h3>\r\n\r\n<p><%= module.description %></p>\r\n\r\n<div id="library-page" class="reference-group clearfix">  \r\n\r\n<% var t = 0; col = 0; %>\r\n\r\n<% _.each(groups, function(group){ %>\r\n  <% if (t == 0) { %> \r\n    <div class="column_<%=col%>">\r\n  <% } %>\r\n  <% if (group.name !== module.name && group.name !== \'p5\') { %>\r\n    <% if (group.hash) { %> <a href="<%=group.hash%>" <% if (group.module !== module.name) { %>class="core"<% } %>><% } %>  \r\n    <h2 class="group-name <% if (t == 0) { %> first<%}%>"><%=group.name%></h2>\r\n    <% if (group.hash) { %> </a><br> <% } %>\r\n  <% } %>\r\n  <% _.each(group.items.filter(function(item) {return item.access !== \'private\'}), function(item) { %>\r\n    <a href="<%=item.hash%>" <% if (item.module !== module.name) { %>class="core"<% } %>><%=item.name%><% if (item.itemtype === \'method\') { %>()<%}%></a><br>\r\n    <% t++; %>\r\n  <% }); %>\r\n  <% if (t >= Math.floor(totalItems/4)) { col++; t = 0; %>\r\n    </div>\r\n  <% } %>\r\n<% }); %>\r\n</div>\r\n';});
+
+define(
+  'libraryView',[
     'App',
-  
-    // Views
-    'searchView',
-    'listView',
-    'itemView',
-    'menuView',
-    'libraryView'
-  ], function(App, searchView, listView, itemView, menuView, libraryView) {
-  
-    // Store the original title parts so we can substitue different endings.
-    var _originalDocumentTitle = window.document.title;
-  
-    var pageView = Backbone.View.extend({
-      el: 'body',
+    // Templates
+    'text!tpl/library.html'
+  ],
+  function(App, libraryTpl) {
+    var libraryView = Backbone.View.extend({
+      el: '#list',
+      events: {},
       /**
        * Init.
        */
       init: function() {
-        App.$container = $('#container');
-        App.contentViews = [];
-  
+        this.libraryTpl = _.template(libraryTpl);
+
         return this;
       },
       /**
-       * Render.
+       * Render the list.
        */
-      render: function() {
-  
-        // Menu view
-        if (!App.menuView) {
-          App.menuView = new menuView();
-          App.menuView.init().render();
-        }
-  
-        // Item view
-        if (!App.itemView) {
-          App.itemView = new itemView();
-          App.itemView.init().render();
-          // Add the item view to the views array
-          App.contentViews.push(App.itemView);
-        }
-  
-        // List view
-        if (!App.listView) {
-          App.listView = new listView();
-          App.listView.init().render();
-          // Add the list view to the views array
-          App.contentViews.push(App.listView);
-        }
-  
-        // Library view
-        if (!App.libraryView) {
-          App.libraryView = new libraryView();
-          App.libraryView.init().render();
-          // Add the list view to the views array
-          App.contentViews.push(App.libraryView);
-        }
-  
-        // Search
-        if (!App.searchView) {
-          App.searchView = new searchView();
-          App.searchView.init().render();
+      render: function(m, listCollection) {
+        if (m && listCollection) {
+          var self = this;
+
+          // Render items and group them by module
+          // module === group
+          this.groups = {};
+          _.each(m.items, function(item, i) {
+            var module = item.module || '_';
+            var group;
+            // Override default group with a selected category
+            // TODO: Overwriting with the first category might not be the best choice
+            // We might also want to have links for categories
+            if (item.category && item.category[0]) {
+              group = item.category[0];
+              // Populate item.hash
+              App.router.getHash(item);
+
+              // Create a group list without link hash
+              if (!self.groups[group]) {
+                self.groups[group] = {
+                  name: group.replace('_', '&nbsp;'),
+                  module: module,
+                  hash: undefined,
+                  items: []
+                };
+              }
+            } else {
+              group = item.class || '_';
+              var hash = App.router.getHash(item);
+
+              var ind = hash.lastIndexOf('/');
+              hash = hash.substring(0, ind);
+
+              // Create a group list
+              if (!self.groups[group]) {
+                self.groups[group] = {
+                  name: group.replace('_', '&nbsp;'),
+                  module: module,
+                  hash: hash,
+                  items: []
+                };
+              }
+            }
+
+            self.groups[group].items.push(item);
+          });
+
+          // Sort groups by name A-Z
+          self.groups = _.sortBy(self.groups, this.sortByName);
+
+          // Put the <li> items html into the list <ul>
+          var libraryHtml = self.libraryTpl({
+            title: self.capitalizeFirst(listCollection),
+            module: m.module,
+            totalItems: m.items.length,
+            groups: self.groups
+          });
+
+          // Render the view
+          this.$el.html(libraryHtml);
         }
+
         return this;
       },
       /**
-       * Hide item and list views.
+       * Show a list of items.
+       * @param {array} items Array of item objects.
        * @returns {object} This view.
        */
-      hideContentViews: function() {
-        _.each(App.contentViews, function(view, i) {
-          view.$el.hide();
-        });
-  
+      show: function(listGroup) {
+        if (App[listGroup]) {
+          this.render(App[listGroup], listGroup);
+        }
+        App.pageView.hideContentViews();
+
+        this.$el.show();
+
         return this;
       },
       /**
-       * Append the supplied name to the first part of original document title.
-       * If no name is supplied, the title will reset to the original one.
+       * Helper method to capitalize the first letter of a string
+       * @param {string} str
+       * @returns {string} Returns the string.
        */
-      appendToDocumentTitle: function(name){
-        if(name){
-          let firstTitlePart = _originalDocumentTitle.split(" | ")[0];
-          window.document.title = [firstTitlePart, name].join(" | ");
-        } else {
-          window.document.title = _originalDocumentTitle;
-        }
-      }    
-    });
-  
-    return pageView;
-  
-  });
-  
-  define('router',[
-    'App'
-  ], function(App) {
-  
-    'use strict'; //
-  
-    var Router = Backbone.Router.extend({
-  
-      routes: {
-        '': 'list',
-        'p5': 'list',
-        'p5/': 'list',
-        'classes': 'list',
-        'search': 'search',
-        'libraries/:lib': 'library',
-        ':searchClass(/:searchItem)': 'get'
+      capitalizeFirst: function(str) {
+        return str.substr(0, 1).toUpperCase() + str.substr(1);
       },
       /**
-       * Whether the json API data was loaded.
+       * Sort function (for the Array.prototype.sort() native method): from A to Z.
+       * @param {string} a
+       * @param {string} b
+       * @returns {Array} Returns an array with elements sorted from A to Z.
        */
-      _initialized: false,
-      /**
-       * Initialize the app: load json API data and create searchable arrays.
-       */
-      init: function(callback) {
-        var self = this;
-        require(['pageView'], function(pageView) {
-  
-          // If already initialized, move away from here!
-          if (self._initialized) {
-            if (callback)
-              callback();
-            return;
-          }
-  
-          // Update initialization state: must be done now to avoid recursive mess
-          self._initialized = true;
-  
-          // Render views
-          if (!App.pageView) {
-            App.pageView = new pageView();
-            App.pageView.init().render();
-          }
-  
-          // If a callback is set (a route has already been called), run it
-          // otherwise, show the default list
+      sortAZ: function(a, b) {
+        return a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase() ? 1 : -1;
+      },
+
+      sortByName: function(a, b) {
+        if (a.name === 'p5') return -1;
+        else return 0;
+      }
+    });
+
+    return libraryView;
+  }
+);
+
+define('pageView',[
+  'App',
+
+  // Views
+  'searchView',
+  'listView',
+  'itemView',
+  'menuView',
+  'libraryView'
+], function(App, searchView, listView, itemView, menuView, libraryView) {
+
+  // Store the original title parts so we can substitue different endings.
+  var _originalDocumentTitle = window.document.title;
+
+  var pageView = Backbone.View.extend({
+    el: 'body',
+    /**
+     * Init.
+     */
+    init: function() {
+      App.$container = $('#container');
+      App.contentViews = [];
+
+      return this;
+    },
+    /**
+     * Render.
+     */
+    render: function() {
+
+      // Menu view
+      if (!App.menuView) {
+        App.menuView = new menuView();
+        App.menuView.init().render();
+      }
+
+      // Item view
+      if (!App.itemView) {
+        App.itemView = new itemView();
+        App.itemView.init().render();
+        // Add the item view to the views array
+        App.contentViews.push(App.itemView);
+      }
+
+      // List view
+      if (!App.listView) {
+        App.listView = new listView();
+        App.listView.init().render();
+        // Add the list view to the views array
+        App.contentViews.push(App.listView);
+      }
+
+      // Library view
+      if (!App.libraryView) {
+        App.libraryView = new libraryView();
+        App.libraryView.init().render();
+        // Add the list view to the views array
+        App.contentViews.push(App.libraryView);
+      }
+
+      // Search
+      if (!App.searchView) {
+        App.searchView = new searchView();
+        App.searchView.init().render();
+      }
+      return this;
+    },
+    /**
+     * Hide item and list views.
+     * @returns {object} This view.
+     */
+    hideContentViews: function() {
+      _.each(App.contentViews, function(view, i) {
+        view.$el.hide();
+      });
+
+      return this;
+    },
+    /**
+     * Append the supplied name to the first part of original document title.
+     * If no name is supplied, the title will reset to the original one.
+     */
+    appendToDocumentTitle: function(name){
+      if(name){
+        let firstTitlePart = _originalDocumentTitle.split(" | ")[0];
+        window.document.title = [firstTitlePart, name].join(" | ");
+      } else {
+        window.document.title = _originalDocumentTitle;
+      }
+    }    
+  });
+
+  return pageView;
+
+});
+
+define('router',[
+  'App'
+], function(App) {
+
+  'use strict'; //
+
+  var Router = Backbone.Router.extend({
+
+    routes: {
+      '': 'list',
+      'p5': 'list',
+      'p5/': 'list',
+      'classes': 'list',
+      'search': 'search',
+      'libraries/:lib': 'library',
+      ':searchClass(/:searchItem)': 'get'
+    },
+    /**
+     * Whether the json API data was loaded.
+     */
+    _initialized: false,
+    /**
+     * Initialize the app: load json API data and create searchable arrays.
+     */
+    init: function(callback) {
+      var self = this;
+      require(['pageView'], function(pageView) {
+
+        // If already initialized, move away from here!
+        if (self._initialized) {
           if (callback)
             callback();
-          else
-            self.list();
-        });
-      },
-      /**
-       * Start route. Simply check if initialized.
-       */
-      start: function() {
-        this.init();
-      },
-      /**
-       * Show item details by searching a class or a class item (method, property or event).
-       * @param {string} searchClass The class name (mandatory).
-       * @param {string} searchItem The class item name: can be a method, property or event name.
-       */
-      get: function(searchClass, searchItem) {
-  
-        // if looking for a library page, redirect
-        if (searchClass === 'p5.sound' && !searchItem) {
-          window.location.hash = '/libraries/'+searchClass;
           return;
         }
-  
-        var self = this;
-        this.init(function() {
-          var item = self.getItem(searchClass, searchItem);
-  
-          App.menuView.hide();
-  
-          if (item) {
-            App.itemView.show(item);
-          } else {
-            //App.itemView.nothingFound();
-  
-            self.list();
+
+        // Update initialization state: must be done now to avoid recursive mess
+        self._initialized = true;
+
+        // Render views
+        if (!App.pageView) {
+          App.pageView = new pageView();
+          App.pageView.init().render();
+        }
+
+        // If a callback is set (a route has already been called), run it
+        // otherwise, show the default list
+        if (callback)
+          callback();
+        else
+          self.list();
+      });
+    },
+    /**
+     * Start route. Simply check if initialized.
+     */
+    start: function() {
+      this.init();
+    },
+    /**
+     * Show item details by searching a class or a class item (method, property or event).
+     * @param {string} searchClass The class name (mandatory).
+     * @param {string} searchItem The class item name: can be a method, property or event name.
+     */
+    get: function(searchClass, searchItem) {
+
+      // if looking for a library page, redirect
+      if (searchClass === 'p5.sound' && !searchItem) {
+        window.location.hash = '/libraries/'+searchClass;
+        return;
+      }
+
+      var self = this;
+      this.init(function() {
+        var item = self.getItem(searchClass, searchItem);
+
+        App.menuView.hide();
+
+        if (item) {
+          App.itemView.show(item);
+        } else {
+          //App.itemView.nothingFound();
+
+          self.list();
+        }
+
+        styleCodeLinks();
+      });
+    },
+    /**
+     * Returns one item object by searching a class or a class item (method, property or event).
+     * @param {string} searchClass The class name (mandatory).
+     * @param {string} searchItem The class item name: can be a method, property or event name.
+     * @returns {object} The item found or undefined if nothing was found.
+     */
+    getItem: function(searchClass, searchItem) {
+      var classes = App.classes,
+              items = App.allItems,
+              classesCount = classes.length,
+              itemsCount = items.length,
+              className = searchClass ? searchClass.toLowerCase() : undefined,
+              itemName = searchItem ? searchItem : undefined,
+              found;
+
+      // Only search for a class, if itemName is undefined
+      if (className && !itemName) {
+        for (var i = 0; i < classesCount; i++) {
+          if (classes[i].name.toLowerCase() === className) {
+            found = classes[i];
+            _.each(found.items, function(i, idx) {
+              i.hash = App.router.getHash(i);
+            });
+            break;
           }
-  
-          styleCodeLinks();
-        });
-      },
-      /**
-       * Returns one item object by searching a class or a class item (method, property or event).
-       * @param {string} searchClass The class name (mandatory).
-       * @param {string} searchItem The class item name: can be a method, property or event name.
-       * @returns {object} The item found or undefined if nothing was found.
-       */
-      getItem: function(searchClass, searchItem) {
-        var classes = App.classes,
-                items = App.allItems,
-                classesCount = classes.length,
-                itemsCount = items.length,
-                className = searchClass ? searchClass.toLowerCase() : undefined,
-                itemName = searchItem ? searchItem : undefined,
-                found;
-  
-        // Only search for a class, if itemName is undefined
-        if (className && !itemName) {
-          for (var i = 0; i < classesCount; i++) {
-            if (classes[i].name.toLowerCase() === className) {
-              found = classes[i];
-              _.each(found.items, function(i, idx) {
-                i.hash = App.router.getHash(i);
-              });
-              break;
-            }
+        }
+        // Search for a class item
+      } else if (className && itemName) {
+        // Search case sensitively
+        for (var i = 0; i < itemsCount; i++) {
+          if (items[i].class.toLowerCase() === className &&
+            items[i].name === itemName) {
+            found = items[i];
+            break;
           }
-          // Search for a class item
-        } else if (className && itemName) {
-          // Search case sensitively
+        }
+
+        // If no match was found, fallback to search case insensitively
+        if(!found){
           for (var i = 0; i < itemsCount; i++) {
-            if (items[i].class.toLowerCase() === className &&
-              items[i].name === itemName) {
+            if(items[i].class.toLowerCase() === className &&
+              items[i].name.toLowerCase() === itemName.toLowerCase()){
               found = items[i];
               break;
             }
           }
-  
-          // If no match was found, fallback to search case insensitively
-          if(!found){
-            for (var i = 0; i < itemsCount; i++) {
-              if(items[i].class.toLowerCase() === className &&
-                items[i].name.toLowerCase() === itemName.toLowerCase()){
-                found = items[i];
-                break;
-              }
-            }
-          }
-        }
-  
-        return found;
-      },
-      /**
-       * List items.
-       * @param {string} collection The name of the collection to list.
-       */
-      list: function(collection) {
-  
-        collection = 'allItems';
-  
-        // Make sure collection is valid
-        if (App.collections.indexOf(collection) < 0) {
-          return;
         }
-  
-        this.init(function() {
-          App.menuView.show(collection);
-          App.menuView.update(collection);
-          App.listView.show(collection);
-          styleCodeLinks();
-        });
-      },
-      /**
-       * Display information for a library.
-       * @param {string} collection The name of the collection to list.
-       */
-      library: function(collection) {
-        this.init(function() {
-          App.menuView.hide();
-          App.libraryView.show(collection.substring(3)); //remove p5.
-          styleCodeLinks();
-        });
-      },
-      /**
-       * Close all content views.
-       */
-      search: function() {
-        this.init(function() {
-          App.menuView.hide();
-          App.pageView.hideContentViews();
-        });
-      },
-  
-      /**
-       * Create an hash/url for the item.
-       * @param {Object} item A class, method, property or event object.
-       * @returns {String} The hash string, including the '#'.
-       */
-       getHash: function(item) {
-  
-         if (!item.hash) {
-  
-           // FIX TO INVISIBLE OBJECTS: DH (see also listView.js)
-  
-           if (item.class) {
-             var clsFunc = '#/' + item.class + '.' + item.name;
-             var idx = clsFunc.lastIndexOf('.');
-             item.hash = clsFunc.substring(0,idx) + '/' + clsFunc.substring(idx+1);
-           } else {
-            item.hash = '#/' + item.name;
-           }
-         }
-  
-         return item.hash;
       }
-    });
-  
-    
-    function styleCodeLinks() {
-      var links = document.getElementsByTagName("a");
-      for (var iLink = 0; iLink < links.length; iLink++) {
-        var link = links[iLink];
-        if (link.hash.startsWith('#/p5')) {
-          link.classList.add('code');
-        }
+
+      return found;
+    },
+    /**
+     * List items.
+     * @param {string} collection The name of the collection to list.
+     */
+    list: function(collection) {
+
+      collection = 'allItems';
+
+      // Make sure collection is valid
+      if (App.collections.indexOf(collection) < 0) {
+        return;
       }
+
+      this.init(function() {
+        App.menuView.show(collection);
+        App.menuView.update(collection);
+        App.listView.show(collection);
+        styleCodeLinks();
+      });
+    },
+    /**
+     * Display information for a library.
+     * @param {string} collection The name of the collection to list.
+     */
+    library: function(collection) {
+      this.init(function() {
+        App.menuView.hide();
+        App.libraryView.show(collection.substring(3)); //remove p5.
+        styleCodeLinks();
+      });
+    },
+    /**
+     * Close all content views.
+     */
+    search: function() {
+      this.init(function() {
+        App.menuView.hide();
+        App.pageView.hideContentViews();
+      });
+    },
+
+    /**
+     * Create an hash/url for the item.
+     * @param {Object} item A class, method, property or event object.
+     * @returns {String} The hash string, including the '#'.
+     */
+     getHash: function(item) {
+
+       if (!item.hash) {
+
+         // FIX TO INVISIBLE OBJECTS: DH (see also listView.js)
+
+         if (item.class) {
+           var clsFunc = '#/' + item.class + '.' + item.name;
+           var idx = clsFunc.lastIndexOf('.');
+           item.hash = clsFunc.substring(0,idx) + '/' + clsFunc.substring(idx+1);
+         } else {
+          item.hash = '#/' + item.name;
+         }
+       }
+
+       return item.hash;
     }
-  
-  
-    // Get the router
-    App.router = new Router();
-  
-    // Start history
-    Backbone.history.start();
-  
-    return App.router;
-  
-  });
-  
-  /**
-   * Define global App.
-   */
-  var App = window.App || {};
-  define('App', [],function() {
-    return App;
   });
-  
-  /**
-   * Load json API data and start the router.
-   * @param {module} App
-   * @param {module} router
-   */
-  require([
-    'App',
-    './documented-method'], function(App, DocumentedMethod) {
-  
-    // Set collections
-    App.collections = ['allItems', 'classes', 'events', 'methods', 'properties', 'p5.sound'];
-  
-    // Get json API data
-    $.getJSON('data.min.json', function(data) {
-      App.data = data;
-      App.classes = [];
-      App.methods = [];
-      App.properties = [];
-      App.events = [];
-      App.allItems = [];
-      App.sound = { items: [] };
-      App.dom = { items: [] };
-      App.modules = [];
-      App.project = data.project;
-  
-  
-      var modules = data.modules;
-  
-      // Get class items (methods, properties, events)
-      _.each(modules, function(m, idx, array) {
-        App.modules.push(m);
-        if (m.name == "p5.sound") {
-          App.sound.module = m;
-        }
-      });
-  
-  
-      var items = data.classitems;
-      var classes = data.classes;
-  
-      // Get classes
-      _.each(classes, function(c, idx, array) {
-        if (!c.private) {
-          App.classes.push(c);
+
+  
+  function styleCodeLinks() {
+    var links = document.getElementsByTagName("a");
+    for (var iLink = 0; iLink < links.length; iLink++) {
+      var link = links[iLink];
+      if (link.hash.startsWith('#/p5')) {
+        link.classList.add('code');
+      }
+    }
+  }
+
+
+  // Get the router
+  App.router = new Router();
+
+  // Start history
+  Backbone.history.start();
+
+  return App.router;
+
+});
+
+/**
+ * Define global App.
+ */
+var App = window.App || {};
+define('App', [],function() {
+  return App;
+});
+
+/**
+ * Load json API data and start the router.
+ * @param {module} App
+ * @param {module} router
+ */
+require([
+  'App',
+  './documented-method'], function(App, DocumentedMethod) {
+
+  // Set collections
+  App.collections = ['allItems', 'classes', 'events', 'methods', 'properties', 'p5.sound'];
+
+  // Get json API data
+  $.getJSON('data.min.json', function(data) {
+    App.data = data;
+    App.classes = [];
+    App.methods = [];
+    App.properties = [];
+    App.events = [];
+    App.allItems = [];
+    App.sound = { items: [] };
+    App.dom = { items: [] };
+    App.modules = [];
+    App.project = data.project;
+
+
+    var modules = data.modules;
+
+    // Get class items (methods, properties, events)
+    _.each(modules, function(m, idx, array) {
+      App.modules.push(m);
+      if (m.name == "p5.sound") {
+        App.sound.module = m;
+      }
+    });
+
+
+    var items = data.classitems;
+    var classes = data.classes;
+
+    // Get classes
+    _.each(classes, function(c, idx, array) {
+      if (!c.private) {
+        App.classes.push(c);
+      }
+    });
+
+
+    // Get class items (methods, properties, events)
+    _.each(items, function(el, idx, array) {
+      if (el.itemtype) {
+        if (el.itemtype === "method") {
+          el = new DocumentedMethod(el);
+          App.methods.push(el);
+          App.allItems.push(el);
+        } else if (el.itemtype === "property") {
+          App.properties.push(el);
+          App.allItems.push(el);
+        } else if (el.itemtype === "event") {
+          App.events.push(el);
+          App.allItems.push(el);
         }
-      });
-  
-  
-      // Get class items (methods, properties, events)
-      _.each(items, function(el, idx, array) {
-        if (el.itemtype) {
-          if (el.itemtype === "method") {
-            el = new DocumentedMethod(el);
-            App.methods.push(el);
-            App.allItems.push(el);
-          } else if (el.itemtype === "property") {
-            App.properties.push(el);
-            App.allItems.push(el);
-          } else if (el.itemtype === "event") {
-            App.events.push(el);
-            App.allItems.push(el);
-          }
-  
-          // libraries
-          if (el.module === "p5.sound") {
-            App.sound.items.push(el);
-          }
+
+        // libraries
+        if (el.module === "p5.sound") {
+          App.sound.items.push(el);
         }
-      });
-  
-      _.each(App.classes, function(c, idx) {
-        c.items = _.filter(App.allItems, function(it){ return it.class === c.name; });
-      });
-  
-      require(['router']);
+      }
+    });
+
+    _.each(App.classes, function(c, idx) {
+      c.items = _.filter(App.allItems, function(it){ return it.class === c.name; });
     });
+
+    require(['router']);
   });
-  
-  define("main", function(){});
-  
-  }());
\ No newline at end of file
+});
+
+define("main", function(){});
+
+}());
\ No newline at end of file

From 2f727fa7115cc44dfb70f45fde33f22a6ebf619f Mon Sep 17 00:00:00 2001
From: Sanjay Singh Rajpoot
 <67458417+SanjaySinghRajpoot@users.noreply.github.com>
Date: Tue, 30 Mar 2021 03:32:00 +0000
Subject: [PATCH 10/10] Automatic update of translation files
 (7b874ab258980c9fb6a95f89a485b00b1bb68354)

---
 package-lock.json | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 95bdaf7153..8610c677a7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1391,7 +1391,8 @@
         },
         "kind-of": {
           "version": "6.0.2",
-          "resolved": "",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+          "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
           "dev": true
         }
       }
@@ -18266,7 +18267,8 @@
         },
         "kind-of": {
           "version": "6.0.2",
-          "resolved": "",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+          "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
           "dev": true
         }
       }
@@ -19743,7 +19745,8 @@
         },
         "kind-of": {
           "version": "6.0.2",
-          "resolved": "",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
+          "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
           "dev": true
         }
       }