\n```\n\nयदि आप चाहते हैं कि उदाहरण को ऑटोमेटेड टेस्ट का हिस्सा के रूप में नहीं चलाया जाए (उदाहरण के लिए, यदि उदाहरण में उपयोगकर्ता संवाद की आवश्यकता हो), तो `
` में \"notest\" वर्ग शामिल करें:\n\n```\n* @example\n*
\n* function setup() {\n* let c = createCanvas(100, 100);\n* saveCanvas(c, 'myCanvas', 'jpg');\n* }\n*
\n```\n\nयदि आपका उदाहरण बाहरी संसाधन फ़ाइलों का उपयोग करता है, तो उन्हें [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets/) फ़ोल्डर में रखें (या पहले से वहां मौजूद कोई उपयोग करें) फिर उन्हें कोड में \"assets/filename.ext\" के साथ लिंक करें। उदाहरण के लिए [tint()](http://p5js.org/reference/#/p5/tint/) संदर्भ देखें।\n\n### `describe()` का उपयोग करके कैनवास का विवरण जोड़ें\n\nअंतिम रूप में, आपको हर उदाहरण के लिए p5.js फ़ंक्शन `describe()` का उपयोग करना आवश्यक है ताकि कैनवास के लिए एक स्क्रीन-रीडर एक्सेसिबल विवरण बनाया जा सके। केवल एक पैरामीटर शामिल करें: एक स्ट्रिंग जिसमें कैनवास पर क्या हो रहा है, इसका संक्षिप्त विवरण हो।\n\n```\n* @example\n*
\n* \n* let xoff = 0.0;\n* function draw() {\n* background(204);\n* xoff = xoff + 0.01;\n* let n = noise(xoff) * width;\n* line(n, 0, n, height);\n* describe('A vertical line moves randomly from left to right.');\n* }\n* \n*
\n* \n*
\n* \n* let noiseScale = 0.02;\n* function draw() {\n* background(0);\n* for (let x = 0; x < width; x += 1) {\n* let noiseVal = noise((mouseX + x) * noiseScale, mouseY * noiseScale);\n* stroke(noiseVal*255);\n* line(x, mouseY + noiseVal * 80, x, height);\n* }\n* describe('A horizontal wave pattern moves in the opposite direction of the mouse.');\n* }\n* \n*
\n```\n\n`describe()` पर अधिक जानकारी के लिए [web accessibility contributor documentation](https://p5js.org/contributor-docs/#/web_accessibility?id=user-generated-accessible-canvas-descriptions) पर जाएं।\n\nऊपर दिए गए सभी तत्वों के साथ, आपके पास p5.js संदर्भ टिप्पणियों को लिखने और संपादित करने के लिए अधिकांश उपकरण होने चाहिए। हालांकि, p5.js में आपके सामने कुछ और विशेष उपयोग होते हैं जो JSDoc शैली की संदर्भ टिप्पणियों के विशेष प्रयोग होते हैं। ये परिस्थितिकी रूप से उपयोगी होते हैं और अक्सर जरूरी नहीं होते।\n\n### `@private` टैग\n\nआप `@private` टैग का उपयोग कर सकते हैं अगर कोई गुप्त फ़ंक्शन या चर है। यदि किसी विशेषता को `@private` के रूप में चिह्नित किया जाता है तो यह वेबसाइट पर रेंडर किए गए संदर्भ का हिस्सा नहीं होगा। `@private` टैग का उपयोग एक संदर्भ टिप्पणियों ब्लॉक को निजी रूप में चिह्नित करने के लिए किया जाता है जब आप पुस्तकालय के लिए आंतरिक विशेषताओं का विवरण करते हैं। उदाहरण के लिए, नीचे `_start` के संदर्भ टिप्पणियों को देखें:\n\n```\n/**\n * _start calls preload() setup() and draw()\n * \n * @method _start\n * @private\n */\np5.prototype._start = function () {\n```\n\n### `@module` और संबंधित टैग\n\nप्रत्येक स्रोत कोड फ़ाइल के शीर्ष पर एक `@module` टैग होगा। मॉड्यूल p5.js में एक समूह का प्रतिनिधित्व करते हैं जो वेबसाइट पर रेंडर किए गए संदर्भ पृष्ठ पर उपयोगकर्ता द्वारा उपयोग की जाने वाली विशेषताओं में विभाजित होता है। प्रत्येक मॉड्यूल में, `@submodule` टैग के साथ अतिरिक्त उपमॉड्यूल परिभाषित होते हैं।\n\n`@for` टैग इस मॉड्यूल और कुल `p5` क्लास के बीच संबंध को परिभाषित करता है, यहां कहना प्रभावी रूप से कि यह मॉड्यूल `p5` क्लास का हिस्सा है।\n\n`@requires` टैग वर्तमान मॉड्यूल के लिए आवश्यक आयातित मॉड्यूल को परिभाषित करता है जिस पर वर्तमान मॉड्यूल का निर्भर करता है।\n\n```\n/**\n * @module Color\n * @submodule Creating & Reading\n * @for p5\n * @requires core\n * @requires constants\n */\n```\n\np5.js का अनुसरण किया जाने वाला शैली यह है कि `src/` फ़ोल्डर में प्रत्येक सबफ़ोल्डर एक `@module` होगा जबकि सबफ़ोल्डर में शामिल हर फ़ाइल अपने उपयुक्त सबफ़ोल्डर के `@module` के तहत अपना खुद का `@submodule` होगा। p5.js स्रोत कोड में नए सबफ़ोल्डर/फ़ाइल नहीं जोड़ रहे हैं तो आपको इस संदर्भ टिप्पणियों ब्लॉक को संपादित करने की आवश्यकता नहीं होनी चाहिए।\n\n### `@class` टैग\n\nक्लास निर्माताओं को `@class` टैग और `@constructor` टैग के साथ परिभाषित किया जाता है। इस ब्लॉक के लिए प्रारूप एक समूची फ़ंक्शन के प्रारूप के समान होता है, क्लास का नाम `@class` टैग के साथ परिभाषित किया जाना चाहिए और `@constructor` टैग इस बात को सूचित करेगा कि क्लास में एक कंस्ट्रक्टर फ़ंक्शन है। `p5.Color` क्लास के लिए नीचे उदाहरण देखें:\n\n```\n/**\n * एक वर्ण को वर्णन करने के लिए एक क्लास। प्रत्येक `p5.Color` ऑब्जेक्ट रंग मोड\n * और स्तर की अधिकतम जो कि उसके निर्माण के दौरान सक्रिय थे। ये मान हैं\n * ऑब्जेक्ट के निर्माण में पारित विशेषताओं का व्याख्या करने के लिए उपयोग किए जाते हैं। वे\n * आउटपुट प्रारूपिकरण की भी निर्धारित करते हैं जैसे कि जब\n *
saturation() is called.\n *\n * रंग को आंतरिक रूप से एक आदर्श RGBA मानों की एक सरणी के रूप में संग्रहीत किया जाता है, जो 0 से 1 तक नॉर्मलाइज़ किया गया है। ये मान उपयोग किए जाते हैं\n * सबसे निकटतम स्क्रीन रंगों की गणना करने के लिए, जो 0 से 255 तक के RGBA स्तर होते हैं। स्क्रीन रंग\n * प्रेषित किए जाते हैं रेंडरर को।\n *\n * जब विभिन्न रंग प्रतिनिधित्वों की गणना की जाती है, तो परिणाम को प्रदर्शन के लिए कैश किया जाता है\n * प्रदर्शन। ये मान नॉर्मलाइज़ किए गए, फ़्लोटिंग-पॉइंट संख्याएँ हैं।\n *\n *
color() is the recommended way to create an instance\n * of this class.\n *\n * @class p5.Color\n * @constructor\n * @param {p5} [pInst] pointer to p5 instance.\n *\n * @param {Number[]|String} vals an array containing the color values\n * for red, green, blue and alpha channel\n * or CSS color.\n */\n```\n\n## संदर्भ उत्पन्न करना और पूर्वावलोकन करना\n\np5.js रिपॉजिटरी इस तरह से सेट अप किया गया है कि आपको p5.js वेबसाइट को बिल्ड और चलाने की आवश्यकता न होने पर भी संदर्भ को उत्पन्न और पूर्वावलोकन कर सकते हैं।\n\n* स्रोत कोड में संदर्भ टिप्पणियों से संदर्भ उत्पन्न करने का मुख्य आदेश निम्नलिखित कमांड को चलाना है। \n\n```\nnpm run docs\n```\n\nयह आवश्यक पूर्वावलोकन फ़ाइलें और मुख्य `docs/reference/data.json` फ़ाइल को उत्पन्न करेगा, जो समान फ़ाइल (संक्षेपन के बाद) है जो वेबसाइट पर संदर्भ पृष्ठ को प्रस्तुत करने के लिए उपयोग किया जाएगा।\n\n* संदर्भ पर निरंतर कार्य के लिए आप निम्न कमांड चला सकते हैं।\n\n```\nnpm run docs:dev\n```\n\nयह प्रस्तुत किए गए संदर्भ का एक लाइव पूर्वावलोकन लॉन्च करेगा जो हर बार आपके द्वारा परिवर्तन करने पर अपडेट हो जाएगा (आपको परिवर्तन करने के बाद उन्हें प्रदर्शित होते देखने के लिए पृष्ठ को ताज़ा करना होगा)। यह उपयोगी है, विशेष रूप से ब्राउज़र में चल रहे उदाहरण कोड का पूर्वावलोकन करने के लिए।\n\n* मुख्य टेम्पलेट फ़ाइलें `docs/` फ़ोल्डर में संग्रहित हैं और अधिकांश मामलों में, आपको इस फ़ोल्डर में फ़ाइलों में सीधे परिवर्तन नहीं करने चाहिए, केवल नए संपत्ति फ़ाइलों को `docs/yuidoc-p5-theme/assets` फ़ोल्डर में जोड़ने के लिए।\n\n## अगले कदम\n\nसंदर्भ प्रणाली के अतिरिक्त विवरण के लिए, आप [JSDoc](https://jsdoc.app/) और [YUIDoc](https://yui.github.io/yuidoc/) के दस्तावेज़ को देख सकते हैं।\n\nसंदर्भ से संबंधित मुद्दों के उदाहरण के लिए, [#6519](https://github.com/processing/p5.js/issues/6519/) और [#6045](https://github.com/processing/p5.js/issues/6045/) पर नज़र डालें। [योगदानकर्ता दिशानिर्देश](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md) दस्तावेज़ भी एक अच्छा स्थान है शुरू करने के लिए।\n"},"स्टीवर्ड दिशानिर्देश\n":{"relativeUrl":"/contribute/steward_guidelines","description":"{/* p5.js में योगदान को प्रबंधित और समीक्षा करने के तरीके के बारे में जानें। */}\n\n\n\nचाहे आप हाल ही में हमारे साथ स्टीवर्ड के रूप में शामिल हुए हों, p5.js के अनुभवी रखरखावकर्ता हों, या कहीं बीच में हों, यह गाइड जानकारी के साथ-साथ उन सुझावों और ट्रिक्स को शामिल करता है जो आपको p5.js में प्रभावी योगदान देने में मदद करेगा। यहां लिखा गया अधिकांश दिशानिर्देश हैं, अगर कुछ और नहीं बताया गया है, तो इसका अर्थ है कि आप यहां दिखाए गए अभ्यासों को अपने काम के लिए अनुकूल बना सकते हैं।\n\n## विषय सूची\n\n* [समस्याएँ](../steward_guidelines.md#समस्याएँ/)\n\n * [बग रिपोर्ट](../steward_guidelines.md#बग-रिपोर्ट/)\n * [सुविधा अनुरोध](../steward_guidelines.md#सुविधा-अनुरोध/)\n * [सुविधा विस्तार](../steward_guidelines.md#सुविधा-विस्तार/)\n * [चर्चा](../steward_guidelines.md#चर्चा/)\n\n* [पुल-रिक्वेस्ट](../steward_guidelines.md#पुल-रिक्वेस्ट/)\n\n * [सरल सुधार](../steward_guidelines.md#सरल-सुधार/)\n * [बग फ़िक्स](../steward_guidelines.md#बग-फ़िक्स/)\n * [नई सुविधा/सुविधा वृद्धि](../steward_guidelines.md#नई-सुविधासुविधा-वृद्धि/)\n * [डिपेंडेबॉट](../steward_guidelines.md#डिपेंडेबॉट/)\n\n* [निर्माण प्रक्रिया](../steward_guidelines.md#निर्माण-प्रक्रिया/)\n\n * [मुख्य निर्माण कार्य](../steward_guidelines.md#मुख्य-निर्माण-कार्य/)\n * [विविध कार्य](../steward_guidelines.md#विविध-कार्य/)\n\n* [युक्तियाँ और ट्रिक्स](../steward_guidelines.md#युक्तियाँ-और-ट्रिक्स/)\n\n * [उत्तर टेम्पलेट](../steward_guidelines.md#उत्तर-टेम्पलेट/)\n * [गिटहब सीएलआई](../steward_guidelines.md#गिटहब-सीएलआई/)\n * [सूचनाओं का प्रबंधन](../steward_guidelines.md#सूचनाओं-का-प्रबंधन/)\n\n***\n\n## समस्याएँ\n\nहम अधिकांश स्रोत कोड योगदानों को एक समस्या के साथ शुरू करने की प्रोत्साहना करते हैं, क्योंकि समस्या वह स्थान हैं जहां अधिकांश चर्चाएं होंगी। किसी मुद्दे की समीक्षा करते समय उठाए जाने वाले कदम इस बात पर निर्भर करेंगे कि यह किस प्रकार का मुद्दा है। रेपो विभिन्न प्रकार की समस्याओं को बेहतर ढंग से व्यवस्थित करने और समस्या लेखकों को अपनी समस्याओं के बारे में सभी प्रासंगिक जानकारी प्रदान करने के लिए [गिटहब समस्या टेम्पलेट](https://github.com/processing/p5.js/blob/main/.github/ISSUE_TEMPLATE/) का उपयोग करती है। समस्या की समीक्षा का पहला कदम अक्सर भरे गए टेम्पलेट को देखना होगा और यह तय करना होगा कि क्या आपको अतिरिक्त जानकारी की आवश्यकता है (जैसे कि कुछ क्षेत्र भरे नहीं गए हों या गलत टेम्पलेट का प्रयोग किया गया हो)।\n\n### बग रिपोर्ट\n\nबग रिपोर्ट समस्याओं को \"बग मिला\" (`Found a bug`) समस्या टेम्पलेट का प्रयोग करना चाहिए। बग रिपोर्ट का समाधान करने के लिए निम्नलिखित कार्यक्रम सामान्य होता है:\n\n1. बग को अनुकृत करें\n * टेम्प्लेट का लक्ष्य समीक्षक को संबंधित बग को दोहराने का प्रयास करने के लिए पर्याप्त जानकारी प्रदान करना है।\n * यदि रिपोर्ट किया गया बग वर्तमान रेपो के लिए प्रासंगिक नहीं है (p5.js, p5.js-वेबसाइट, या अन्यत्र):\n * यदि आपके पास संबंधित रेपो तक पहुंच है, तो इसे स्थानांतरित करें।\n * अन्यथा, एक टिप्पणी छोड़ें जिसमें बग रिपोर्ट को कहां फाइल किया जाना चाहिए (सीधा लिंक सहित) और समस्या को बंद करें।\n * बग रिपोर्ट की समीक्षा करने में पहला कदम यह देखना है कि बग प्रतिकृति के लिए पर्याप्त जानकारी प्रदान की गई है या नहीं, और यदि हां, तो वर्णित अनुसार बग को दोहराने का प्रयास करें।\n2. अगर बग प्रतिरूपित किया जा सकता है:\n * किसी विशेष बग को सही करने का सबसे अच्छा तरीका निर्धारित करने के लिए कुछ चर्चा की जा सकती है। कभी-कभी, यह सीधा हो सकता है; कभी-कभी, यह कठिन हो सकता है। कृपया इस निर्णय को एक मामला-दर-मामला आधार पर लेते समय [p5.js' डिज़ाइन सिद्धांतों](../design_principles/) का उल्लेख करें।\n * यदि समस्या लेखक ने समस्या में इस संकेत किया है कि वे एक सुधार योगदान देने के लिए तत्पर हैं:\n * कॉमेंट छोड़कर समस्या को सुधारने के लिए समस्या लेखक को स्वीकृत करें और उन्हें समस्या के लिए असाइन करें। \"असाइनी (`Assignee`)\" के बगल में \"टोलिया (`cog button`)\" का उपयोग करें।\n * यदि समस्या लेखक कोई सुधार नहीं करना चाहते हैं:\n * बग प्रतिरूपित होने का स्वीकृति छोड़ें।\n * बग को स्वयं ठीक करने का प्रयास करें या बग को ठीक करने की आवश्यकता होने पर मदद की जरूरत के लिए `मदद चाहिए (help wanted)` लेबल जोड़ें।\n3. यदि बग प्रतिरूपित नहीं हो सकता है:\n * अअतिरिक्त जानकारी के लिए पूछें जो पहले से ही टेम्पलेट में प्रदान नहीं की गई है (p5.js संस्करण, ब्राउज़र संस्करण, ओएस संस्करण आदि)।\n * यदि आपका परीक्षण पर्याप्त नहीं है जो समस्या में रिपोर्ट किया गया है (उदाहरण के लिए, एक अलग ब्राउज़र या ओएस):\n * एक टिप्पणी छोड़ें कि आप अपने विशिष्ट पर्यावरण में प्रतिरूपित नहीं कर सकते हैं।\n * बग को प्रतिरूपित करने के लिए `मदद चाहिए (help wanted)` लेबल जोड़ें और समस्या को जिन निर्दिष्ट सेटअप के साथ प्रतिरूपित किया गया है, उनसे बग को प्रतिरूपित करने के लिए कहें।\n * कभी-कभी, बग केवल वेब संपादक के उपयोग करते समय ही होते हैं और स्थानीय टेस्ट करते समय नहीं। इस मामले में, समस्या को [वेब संपादक रेपो](https://github.com/processing/p5.js-web-editor/) की ओर पुनर्निर्देशित किया जाना चाहिए।\n * यदि प्रतिरूपण बाद में संभव है, तो कदम 2 पर वापस जाएं।\n4. यदि बग उपयोगकर्ता द्वारा प्रदान किए गए कोड से आता है और p5.js के व्यवहार से नहीं:\n * यह निर्धारित करें कि क्या p5.js दस्तावेज़ीकरण, कोड कार्यान्वयन, या मित्रसंपर्क त्रुटि प्रणाली को सुधारा जा सकता है ताकि वही गलती फिर से न हो।\n * कृपया आगे किसी भी परिवर्तन के लिए [मंच](https://discourse.processing.org/) या [डिस्कॉर्ड](https://discord.com/invite/SHQ8dH25r9/) पर और अधिक प्रश्न अद्यतन करें और यदि p5.js में कोई अधिक परिवर्तन नहीं करना है, तो समस्या को बंद करें।\n\n### सुविधा अनुरोध\n\nसुविधा अनुरोध \"नई सुविधा अनुरोध\" समस्या टेम्पलेट का उपयोग करनी चाहिए। सुविधा अनुरोध को सम्बोधित करने के लिए निम्नलिखित वर्कफ़्लो सामान्य है:\n\n1. पहुंच बढ़ाने के लिए p5.js की प्रतिबद्धता के हिस्से के रूप में, एक सुविधा अनुरोध को यह मामला बनाना चाहिए कि यह उन समुदायों तक p5.js की पहुंच कैसे बढ़ाता है जो ऐतिहासिक रूप से क्षेत्र में हाशिए पर हैं। अधिक विवरण [यहां](../access/) उपलब्ध हैं।\n * यदि कोई सुविधा अनुरोध \"पहुंच बढ़ाने\" क्षेत्र को पर्याप्त रूप से भरा नहीं है, तो आप समस्या लेखक से सुविधा कैसे पहुंच बढ़ाती है, इसके बारे में पूछ सकते हैं।\n * सुविधा की पहुंच का बयान किसी अलग समुदाय सदस्य, समस्या समीक्षकों सहित, द्वारा प्रदान किया जा सकता है।\n2. नई सुविधा अनुरोध को निम्नलिखित मानकों के आधार पर समाविष्टि के लिए मूल्यांकन किया जा सकता है।\n * क्या सुविधा परियोजना के धारा और [डिज़ाइन सिद्धांतों](../design_principles/) में फिट है?\n * उदाहरण के लिए, एक नई आकृति जोड़ने का अनुरोध किया जा सकता है, लेकिन ब्राउज़र-आधारित आईओटी प्रोटोकॉल को ग्रहण करने का अनुरोध असंगत होगा।\n * सम्पूर्ण रूप से, p5.js का धारा संक्षिप्त होना चाहिए ताकि अनियमित उपयोग की सुविधाओं से बचा जा सके।\n * यदि कोई सुविधा p5.js के धारा में फिट नहीं होती है, तो सुझाव दें कि समस्या लेखक सुविधा को एक ऐड-ऑन पुस्तकालय के रूप में अमल करें।\n * यदि स्पष्ट नहीं है कि यह फिट है या नहीं, तो एक प्रमाण-प्रतिसाद के रूप में एक ऐड-ऑन पुस्तकालय बनाने का सुझाव देना एक अच्छा विचार हो सकता है। यह प्रयोक्ताओं को सुविधा का उपयोग करने का एक तरीका देता है, इसका उपयोग और महत्ता का एक अधिक स्पष्ट उदाहरण प्रदान करता है, और पूरी तरह से एक स्थायी समाधान की तरह पूरा नहीं होना चाहिए। यह परियोजना की मूल धारा में बाद में शामिल किया जा सकता है।\n * क्या इस सुविधा के कारण ब्रेकिंग परिवर्तन होने की संभावना है?\n * क्या यह मौजूदा p5.js फ़ंक्शंस और वेरिएबल्स के साथ विरोध करेगा?\n * क्या यह p5.js के लिए पहले से लिखे गए विशिष्ट रेखाचित्रों के साथ टकराव करेगा?\n * निम्नलिखित सुविधाएं जो संघर्ष पैदा कर सकती हैं जैसा कि उपरोक्त किए गए वे ब्रेकिंग बदलाव के रूप में गिना जाता है। [प्रमुख संस्करण रिलीज](https://docs.npmjs.com/about-semantic-versioning/) के बिना, हमें p5.js में ब्रेकिंग बदलाव नहीं करने चाहिए।\n * क्या प्रस्तावित नई सुविधा को पहले से p5.js में मौजूद सुविधाओं का उपयोग करके, एक्सिस्टिंग साधारित जावास्क्रिप्ट कोड या मौजूदा सरल उपयोगिता वाली पुस्तकालयों का उपयोग करके प्राप्त किया जा सकता है?\n * उदाहरण के लिए, `join([\"हैलो\", \"वर्ल्ड!\"])` जैसी स्ट्रिंग्स की एक सरणी में शामिल होने के लिए एक p5.js फ़ंक्शन प्रदान करने के बजाय, मूल जावास्क्रिप्ट `[\"हैलो\", \"वर्ल्ड!\"].join()` को प्राथमिकता दी जानी चाहिए।\n3. यदि पहुंच की आवश्यकता और अन्य विचार पूरे हो गए हैं, तो पुल रिक्वेस्ट की दिशा में काम शुरू करने से पहले कम से कम दो प्रबंधकों या अनुरक्षकों को नई सुविधा के अनुरोध को मंजूरी देनी होगी। नई सुविधाओं के पुल रिक्वेस्ट की समीक्षा प्रक्रिया नीचे विवरणित है।\n\n### सुविधा विस्तार\n\nसुविधा विस्तार समस्याओं को \"मौजूदा सुविधा विस्तार\" समस्या टेम्प्लेट का उपयोग करना चाहिए। प्रक्रिया नई सुविधा अनुरोधों के साथ बहुत समान है। नई सुविधा अनुरोध और सुविधा विस्तार के बीच का अंतर कभी-कभी कम हो सकता है। सुविधा विस्तार मुख्य रूप से p5.js के मौजूदा कार्यों के साथ संबंधित होता है जबकि नई सुविधा अनुरोध पूरी तरह से नए कार्यों को जोड़ने का अनुरोध कर सकता है।\n\n1. नई सुविधा अनुरोधों की तरह, सुविधा विस्तार को केवल उन्हें स्वीकार किया जाना चाहिए अगर वे p5.js के पहुँच को बढ़ाते हैं। कृपया [ऊपर दिए गए खंड](../steward_guidelines.md#सुविधा-अनुरोध/) का बिंदु 1 देखें।\n\n2. सुविधा विस्तार के लिए समावेशन मानदंड सुविधा अनुरोधों के समान हैं, लेकिन संभावित ब्रेकिंग परिवर्तनों पर विशेष ध्यान दिया जाना चाहिए।\n\n * मौजूदा कार्यों को संशोधित करते समय, सभी पिछले मान्य और दस्तावेजित कार्य साकार तरीके से बर्ताव करने चाहिए।\n\n3. पुल रिक्वेस्ट की ओर काम शुरू करने से पहले फीचर संवर्द्धन को कम से कम एक प्रबंधक या अनुरक्षक द्वारा अनुमोदित किया जाना चाहिए। सुविधा विस्तार के लिए पुल रिक्वेस्ट समीक्षा प्रक्रिया नीचे विवरणित है।\n\n### चर्चा\n\nइस प्रकार की समस्या के पास एक न्यूनतम टेम्प्लेट (\"चर्चा\" (discussion)) होता है और इसका उपयोग विषय के चारों ओर संवाद जमा करने के लिए किया जाना चाहिए, जो बाद में किसी विशेष मुद्दे में एकत्रित किया जाता है, जैसे कि एक सुविधा अनुरोध। इन प्रकार की चर्चा समस्याओं को समाप्त होने पर बंद किया जा सकता है और परिणामी अधिक विशिष्ट समस्याएं बना दी गई हैं:\n\n* यदि कोई समस्या चर्चा के रूप में खोला गया है, उदाहरण के लिए, एक बग रिपोर्ट होना चाहिए, तो सही लेबल लागू किया जाना चाहिए और \"चर्चा\" लेबल हटा दिया जाना चाहिए। यदि पहले से शामिल नहीं है तो बग के बारे में अतिरिक्त जानकारी भी लेखक से मांगी जानी चाहिए।\n* यदि कोई समस्या चर्चा के रूप में खोला गया है, लेकिन स्रोत कोड योगदान के लिए प्रासंगिक नहीं है या अन्यथा गिटहब रिपॉजिटरी/योगदान प्रक्रिया/योगदान समुदाय के लिए प्रासंगिक नहीं है, तो उन्हें फ़ोरम या डिस्कॉर्ड पर पुनर्निर्देशित किया जाना चाहिए और मुद्दा बंद कर दिया जाना चाहिए।\n* यदि लागू हो, तो चर्चा के लिए अतिरिक्त लेबल जोड़े जा सकते हैं ताकि एक नजर में यह देखा जा सके कि यह किस प्रकार की चर्चा है।\n\n***\n\n## पुल रिक्वेस्ट\n\nप्राय: p5.js रिपॉजिट्रीज में कोड योगदानों का अधिकांश पुल रिक्वेस्ट के माध्यम से होता है। प्रबंधकों और अनुरक्षकों के पास रिपॉजिटरी तक पहुंच हो सकती है, लेकिन फिर भी उन्हें कोड का योगदान करते समय उसी मुद्दे> पुल रिक्वेस्ट> समीक्षा प्रक्रिया का पालन करने के लिए प्रोत्साहित किया जाता है। यहां पुल रिक्वेस्ट की समीक्षा के चरण दिए गए हैं:\n\n* पुल रिक्वेस्ट टेम्पलेट [यहाँ मिलेगा](https://github.com/processing/p5.js/blob/main/.github/PULL_REQUEST_TEMPLATE.md)।\n* लगभग सभी पुल रिक्वेस्टों में संबंधित समस्याएं को पहले खोला और चर्चा की जानी चाहिए, जिसका अर्थ है कि किसी भी प्रबंधक या अनुरक्षक द्वारा पुल रिक्वेस्ट की समीक्षा करने से पहले प्रासंगिक [इश्यू वर्कफ़्लो](../steward_guidelines.md#समस्याएँ/) का पहले पालन किया जाना चाहिए।\n * एकमात्र उदाहरण जहां यह लागू नहीं होता है, वे बहुत मामूली टाइपो फिक्स होते हैं, जिनके लिए एक खुली समस्या की आवश्यकता नहीं होती है और रेपो तक मर्ज पहुंच वाले किसी भी व्यक्ति द्वारा विलय किया जा सकता है, भले ही वे किसी विशेष क्षेत्र के प्रबंधक न हों।\n * हालांकि यह अपवाद मौजूद है, हम इसे व्यवहार में तभी लागू करेंगे जब योगदानकर्ताओं को पहले नए समस्याएं खोलने के लिए प्रोत्साहित किया जाएगा। दूसरे शब्दों में, यदि इस बारे में संदेह है कि यह अपवाद लागू होता है या नहीं, तो फिर भी एक समस्या खोलें।\n* यदि कोई पुल रिक्वेस्ट संदर्भित समस्या को पूरी तरह से हल नहीं करता है, तो आप मूल पोस्ट को संपादित कर सकते हैं और `Resolves #OOOO` को `Addresses #OOOO` में बदल सकते हैं ताकि पुल रिक्वेस्ट विलय होने पर यह स्वचालित रूप से मूल समस्या को बंद न करे।\n\n### सरल सुधार\n\nसरल सुधार, जैसे कि छोटी टाइपो फिक्स, को मर्ज एक्सेस वाले किसी भी व्यक्ति द्वारा सीधे मर्ज किया जा सकता है। यह सुनिश्चित करने के लिए कि स्वचालित सीआई परीक्षण पास हो गया है, पुल रिक्वेस्ट \"फ़ाइलें परिवर्तित (files changed)\" टैब पर जांचें।\n\n\n\n\n\n### बग फ़िक्स\n\n1. बग फ़िक्स का समीक्षा उस संबंधित क्षेत्र के स्टीवर्ड द्वारा किया जाना चाहिए, आदर्शतः उसी जिसने संदर्भित मुद्दे को फ़िक्स के लिए स्वीकृति दी थी।\n\n2. पुल रिक्वेस्ट \"फ़ाइलें बदली गईं\" टैब का उपयोग प्रारंभ में यह समीक्षा करने के लिए किया जा सकता है कि समस्या चर्चा में बताए अनुसार समाधान लागू किया गया है या नहीं।\n\n3. पुल रिक्वेस्ट को संभावनापूर्वक और संबंधित होने पर स्थानीय रूप से परीक्षण किया जाना चाहिए। यदि संभव हो, तो गिटहब CLI कुछ प्रक्रिया को सुव्यवस्थित करने में मदद कर सकता है। (यहाँ [टिप्स और ट्रिक्स](../steward_guidelines.md#युक्तियाँ-और-ट्रिक्स/) में अधिक देखें).\n * [ ] फ़िक्स को मूल समस्या को पर्याप्त रूप से संबोधित करना चाहिए।\n * [ ] फ़िक्स को किसी भी मौजूदा व्यवहार में परिवर्तन नहीं करना चाहिए जब तक मूल समस्या में सहमति न हो।\n * [ ] फ़िक्स पर p5.js पर कोई महत्वपूर्ण प्रभाव नहीं होना चाहिए।\n * [ ] फ़िक्स पर p5.js की पहुँच कोई प्रभाव नहीं होना चाहिए।\n * [ ] फ़िक्स को जावास्क्रिप्ट कोडिंग के आधुनिक मानक का उपयोग करना चाहिए।\n * [ ] फ़िक्स को सभी स्वचालित परीक्षणों को पार करना चाहिए और यदि योग्य हो, तो नए परीक्षण शामिल करना चाहिए।\n\n4. यदि कोई अतिरिक्त परिवर्तन आवश्यक हो, तो पंक्ति टिप्पणियाँ यहाँ जोड़ी [जानी चाहिए](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/commenting-on-a-pull-request#adding-line-comments-to-a-pull-request)।\n\n * एक सुझाव ब्लॉक का उपयोग किया जा सकता है विशिष्ट परिवर्तनों का सुझाव देने के लिए:\n \\\n \\\n \n\n * यदि कई परिवर्तन की आवश्यकता है, तो एकाधिक बार एकल-लाइन टिप्पणियाँ न जोड़ें। बजाय इसके, कई-लाइन टिप्पणियाँ और एक ही परिवर्तन के लिए एक मांग करने के लिए यहाँ दस्तावेज़ की प्रक्रिया का [पालन करें](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/reviewing-proposed-changes-in-a-pull-request/)।\n\n * यदि लाइन टिप्पणियाँ स्पष्टीकरण या चर्चा के लिए हैं, तो \"अनुरोध परिवर्तन\" की बजाय \"टिप्पणी\" का चयन करें:\\\n \n\n5. एक बार जब पुल रिक्वेस्ट की समीक्षा हो जाती है और किसी अतिरिक्त बदलाव की आवश्यकता नहीं होती है, तो एक प्रबंधक पिछले चरण में \"स्वीकृत\" विकल्प चुनकर, अतिरिक्त टिप्पणियों के साथ या उसके बिना, पुल रिक्वेस्ट को \"स्वीकृत\" के रूप में चिह्नित कर सकता है। यदि वांछित हो तो प्रबंधक या तो किसी अन्य प्रबंधक या अनुरक्षक द्वारा अतिरिक्त समीक्षा का अनुरोध कर सकता है, यदि उनके पास मर्ज की पहुंच है तो पुल रिक्वेस्ट का विलय कर सकता है, या अनुरक्षक से विलय का अनुरोध कर सकता है।\n\n6. @[all-contributors](https://allcontributors.org/docs/en/emoji-key/) बॉट को बुलाया जाना चाहिए ताकि `README.md` फ़ाइल में नए योगदानकर्ताओं को योगदानकर्ताओं की सूची में जोड़ा जा सके। `[योगदान के प्रकार]` के स्थान पर हर प्रकार का योगदान निर्दिष्ट किया जा सकता है, योगदान के उपलब्ध प्रकार की पूरी सूची ऊपर दी गई लिंक में मिलेगी।\n\n`@all-contributors` `please` `add` `@[गिटहब हैंडल]` `for` `[योगदान के प्रकार]`\n\n### नई सुविधा/सुविधा वृद्धि\n\nनई सुविधा या सुविधा वृद्धि पुल रिक्वेस्ट के लिए परिक्रिया बग निवारण के साथ मिलती जुलती है, केवल एक विशेष अंतर है:\n\n* एक नई सुविधा/सुविधा वृद्धि पुल रिक्वेस्ट को मर्ज करने से पहले कम से कम दो स्टीवर्ड या रक्षक द्वारा समीक्षित और मंजूर किया जाना चाहिए।\n\n### डिपेंडेबॉट\n\nडिपेंडेबॉट पुल रिक्वेस्ट आमतौर पर केवल रिपो व्यवस्थापकों को ही दिखाई जाती हैं, इसलिए यदि यह आपके लिए लागू नहीं होता है, तो कृपया इस खंड को छोड़ें।\n\n* यदि संस्करण अद्यतन एक [सीमवर](https://semver.org/) पैच संस्करण है और स्वचालित सीआई परीक्षण पास हो गया है, तो डिपेंडेबॉट पुल रिक्वेस्ट को सीधे मर्ज किया जा सकता है।\n* स्वचालित सीआई परीक्षण पास होने पर मामूली सेमेस्टर संस्करण परिवर्तनों वाले डिपेंडाबोट पुल रिक्वेस्ट को आमतौर पर सीधे मर्ज किया जा सकता है। अद्यतन निर्भरता के चेंजलॉग पर त्वरित जांच की अनुशंसा की जाती है।\n* प्रमुख सेमेस्टर संस्करण परिवर्तनों के साथ डिपेंडाबॉट पुल रिक्वेस्ट संभवतः निर्माण प्रक्रिया या p5.js कार्यक्षमता को प्रभावित करेंगे। इस मामले में, यदि संभव हो तो समीक्षक को वर्तमान संस्करण से लक्ष्य संस्करण तक चेंजलॉग की समीक्षा करने के लिए प्रोत्साहित किया जाता है। उनसे यह भी अपेक्षा की जाती है कि वे स्थानीय स्तर पर पुल रिक्वेस्ट का परीक्षण करें ताकि यह सुनिश्चित किया जा सके कि सभी प्रक्रियाएं कार्य कर रही हैं, और निर्भरता में संभावित ब्रेकिंग परिवर्तनों के कारण कोई भी आवश्यक परिवर्तन करें।\n * कई निर्भरताओं ने मुख्य संस्करण संख्याओं को केवल इसलिए बढ़ाया है क्योंकि वे बहुत पुराने संस्करणों के लिए आधिकारिक समर्थन को हटा देते हैं। बहुत से मामलों में, मुख्य संस्करण परिवर्तन निर्भरता एपीआई परिवर्तन से होने वाले तोड़फोड़ को नहीं अवश्य मतलब है।\n\n***\n\n## निर्माण प्रक्रिया\n\nयह खंड सामान्य निर्माण सेटअप या आदेश का विवरण नहीं करेगा, बल्कि विवरणों के पीछे क्या हो रहा है उसके बारे में जानकारी देगा। कृपया अधिक विस्तृत निर्माण जानकारी के लिए [योगदानकर्ता दिशानिर्देश](../contributing_documentation.md#🗯-संदर्भ-के-लिए-योगदान-करें/) देखें।\n\n`Gruntfile.js` फ़ाइल p5.js के मुख्य निर्माण परिभाषणों को संबोधित करती है। पुस्तकालय और दस्तावेज़ीकरण निर्माण के लिए उपयोग किए जाने वाले विभिन्न उपकरणों में `Grunt`, `Browserify`, `YUIDoc`, `ESLint`, `Babel`, `Uglify`, और `Mocha` शामिल हैं। यह हमारे लिए `default (डिफ़ॉल्ट)` टास्क के साथ शुरू करने और वहां से पिछले काम करने में मददगार हो सकता है। इस विवरण के दौरान `Gruntfile.js` दस्तावेज़ को खोलना भी उपयोगी हो सकता है।\n\n### मुख्य निर्माण कार्य\n\n```\ngrunt.registerTask('default', ['lint', 'test']);\n```\n\nजब हम `grunt` या `npm` स्क्रिप्ट npm `test` चलाते हैं, तो हम लिंट फिर परीक्षण के रूप में डिफ़ॉल्ट टास्क चलाते हैं।\n\n#### `lint` कार्य\n\n```\ngrunt.registerTask('lint', ['lint:source', 'lint:samples']);\n```\n\nलिंट कार्य में दो उप-कार्य होते हैं: `lint:source` और `lint:samples`। `lint:source` को तीन और उप-कार्यों में विभाजित किया गया है `eslint:build`, `eslint:source`, और `eslint:test`, जो ESLint का उपयोग निर्माण स्क्रिप्ट, सोर्स कोड, और परीक्षण स्क्रिप्ट की जाँच करने के लिए करता है।\n\n`lint:samples` कार्य पहले `yui` कार्य को चलाएगा जिसमें स्वयं `yuidoc: prod`, `clean:reference`, और `minjson` शामिल हैं, जो स्रोत कोड से दस्तावेज़ को JSON दस्तावेज़ में परिवर्तित करते हैं, पिछले चरण से अप्रयुक्त फ़ाइलें हटाते हैं, और उत्पन्न JSON फ़ाइल को क्रमशः `data.min.json` में छोटा करते हैं।\n\n`lint:samples` में अगला है `eslint-samples:source`, जो एक कस्टम लिखित कार्य है जिसकी परिभाषा [tasks/build/eslint-samples.js](../tasks/build/eslint-samples.js) में है; यह दस्तावेज़ीकरण उदाहरण कोड की जांच करने के लिए ESLint चलाएगा ताकि यह सुनिश्चित किया जा सके कि वे बाकी p5.js के समान कोडिंग कन्वेंशन का पालन करते हैं (`yui` यहां पहले चलाया गया है क्योंकि हमें उदाहरणों को लिंट करने से पहले JSON फ़ाइल बनाने की आवश्यकता है)।\n\n#### `test` कार्य\n\n```js\ngrunt.registerTask(\"test\", [\"build\", \"connect:server\", \"mochaChrome\", \"mochaTest\", \"nyc:report\"]);\n```\n\nसबसे पहले `test` तहत `build` कार्य को देखते हैं।\n\n```js\ngrunt.registerTask(\"build\", [\"browserify\", \"browserify:min\", \"uglify\", \"browserify:test\"]);\n```\n\n`browserify` से शुरू होने वाले कार्य [tasks/build/browserify.js](../tasks/build/browserify.js) में परिभाषित होते हैं। इनमें सभी मुख्य कदम होते हैं जो बहुत से उपयोगकर्ता कोड फ़ाइलों को संग्रहीत और एक में बनाने के लिए हैं:\n\n* `browserify` p5.js का निर्माण कार्य है जबकि `browserify:min` अगले कदम में संक्षिप्त किए जाने वाले एक बीच की फ़ाइल को बनाता है। `browserify` और `browserify:min` के बीच अंतर यह है कि `browserify:min` FES के लिए कार्यात्मक नहीं होने वाले डेटा को नहीं समाहित करता।\n* `uglify` `browserify:min` की उत्पादित फ़ाइल को छोटा करता है और अंतिम `p5.min.js` बनाता है (इस कदम की विन्यासिकता मुख्य `Gruntfile.js` में है)।\n* `browserify:test` का उपयोग पूर्ण p5.js के समान संस्करण बनाने के लिए किया जाता है, सिवाय परीक्षण कोड कवरेज रिपोर्टिंग के लिए जोड़े गए कोड को छोड़कर ([Istanbul](https://istanbul.js.org/) का उपयोग करके) को बाहर रखा गया है।\n\nसबसे पहले, `node.js` के `fs.readFileSync()` का उपयोग करके पढ़े गए कोड को `brfs-babel` का उपयोग करके फ़ाइल की वास्तविक सामग्री से बदल दिया जाता है। इसका उपयोग मुख्य रूप से WebGL कोड द्वारा अलग-अलग फ़ाइलों के रूप में लिखे गए स्रोत कोड से इनलाइन शेडर कोड के लिए किया जाता है।\n\nइसके बाद, `package.json` में परिभाषित \\[ब्राउजर्सलिस्ट] ([https://browsersl.ist/](https://browsersl.ist/)) आवश्यकता से मेल खाने के लिए `node_modules` से स्रोत कोड और सभी निर्भरताओं को `Babel` का उपयोग करके ट्रांसपाइल्ड किया जाता है। यह यह भी सुनिश्चित करता है कि सभी ES6 `import` विवरण CommonJS `require()` कथनों में परिवर्तित हो जाते हैं जिन्हें ब्राउज़र समझता है। यह हमें ब्राउज़र संगतता के बारे में चिंता किए बिना ES6 और उससे आगे उपलब्ध नए सिंटैक्स का उपयोग करने में भी सक्षम बनाता है।\n\nबंडलिंग के बाद, लेकिन बंडल कोड को फ़ाइल में लिखे जाने से पहले, कोड को `pretty-fast` के माध्यम से पारित किया जाता है (यदि कोड को छोटा नहीं किया जाना है, तो इसे साफ किया जाना चाहिए ताकि अंतिम स्वरूपण थोड़ा अधिक सुसंगत हो)। ऐसा इसलिए किया जाता है क्योंकि हम आशा करते हैं कि यदि वांछित हो तो p5.js स्रोत कोड को पढ़ा और निरीक्षण किया जा सकता है।\n\nयहां कुछ छोटे विस्तृत कदम छोड़े गए हैं; आप नीचे दिए गए ब्राउज़रीफ़ाई निर्माण परिभाषण फ़ाइल की जांच करने के लिए सब कुछ को और करीब से देख सकते हैं।\n\n```\nconnect:server\n```\n\nयह कदम स्थानीय सर्वर को शुरू करता है जो परीक्षण फ़ाइलों और निर्मित स्रोत कोड फ़ाइलों को होस्ट करता है ताकि क्रोम में स्वचालित परीक्षण चलाया जा सके।\n\n```\nmochaChrome\n```\n\nयह कदम [tasks/test/mocha-chrome.js](../tasks/test/mocha-chrome.js) में परिभाषित है। यह `Puppeteer` का उपयोग करता है जो `Chrome` का एक हेडलेस संस्करण शुरू करता है जिसे रिमोट नियंत्रित किया जा सकता है, और `./test` फ़ोल्डर में `HTML` फ़ाइलों के साथ जुड़े परीक्षणों को चलाता है, जिसमें लाइब्रेरी के अनमिनिफ़ाइड और मिनिफ़ाइड संस्करणों को यूनिट परीक्षण सुइटों और सभी संदर्भ उदाहरणों के साथ परीक्षण किया जाता है।\n\n```\nmochaTest\n```\n\nयह चरण `mochaChrome` से भिन्न है क्योंकि यह `Chrome` के बजाय `Node.js` में चलाया जाता है और लाइब्रेरी में केवल सुविधाओं के एक छोटे उपसमूह का परीक्षण करता है। p5.js में अधिकांश सुविधाओं के लिए ब्राउज़र वातावरण की आवश्यकता होगी, इसलिए परीक्षणों के इस सेट का विस्तार केवल तभी किया जाना चाहिए जब नए परीक्षणों को वास्तव में ब्राउज़र वातावरण की आवश्यकता न हो।\n\n```\nnyc:report\n```\n\nअंत में, सभी निर्माण और परीक्षण पूरे होने के बाद, यह चरण परीक्षण कवरेज रिपोर्ट एकत्र करेगा। तुलना के लिए, `mochaChrome` लाइब्रेरी के पूर्ण संस्करण का परीक्षण कर रहा था और परीक्षण कवरेज डेटा को कंसोल पर प्रिंट कर रहा था। p5.js के लिए परीक्षण कवरेज मुख्य रूप से निगरानी और कुछ अतिरिक्त डेटा बिंदुओं के लिए है; 100% परीक्षण कवरेज प्राप्त करना कोई लक्ष्य नहीं है।\n\nऔर यही `Gruntfile.js` कॉन्फ़िगरेशन में डिफ़ॉल्ट कार्य को कवर करता है!\n\n### विविध कार्य\n\nसभी कदमों को `npx grunt [कदम]` के साथ सीधे चलाया जा सकता है। ऊपर नहीं चित्रित कुछ कार्य हैं जो ऊपर नहीं शामिल हैं लेकिन कुछ विशेष प्रकार के मामलों में उपयोगी हो सकते हैं।\n\n```\ngrunt yui:dev\n```\n\nयह कार्य ऊपर बताए अनुसार दस्तावेज़ीकरण और लाइब्रेरी बिल्ड चलाएगा, और फिर एक वेब सर्वर शुरू करेगा जो वेबसाइट पर [http://localhost:9001/docs/reference/](http://localhost:9001/docs/reference/) पर पाए गए संदर्भ पृष्ठ के समान संस्करण पेश करेगा। इसके बाद यह परिवर्तनों के लिए स्रोत कोड की निगरानी भी करेगा और दस्तावेज़ीकरण और लाइब्रेरी का पुनर्निर्माण भी करेगा।\n\n`grunt` `yui:dev` तब उपयोगी होता है जब आप इनलाइन दस्तावेज़ में संदर्भ पर काम कर रहे होते हैं। इस कमांड का उपयोग करने के बाद, आपको निर्मित फ़ाइलों को p5.js रिपॉजिटरी से स्थानीय p5.js-वेबसाइट रिपॉजिटरी में स्थानांतरित करने और हर बार बदलाव करने पर वेबसाइट को फिर से बनाने की ज़रूरत नहीं है; आप अपने ब्राउज़र में संदर्भ के इस थोड़े सरलीकृत संस्करण के साथ अपने परिवर्तनों का पूर्वावलोकन कर सकते हैं। इस तरह, आप अधिक आश्वस्त हो सकते हैं कि आपके परिवर्तन संभवतः वेबसाइट पर सही ढंग से दिखाई देंगे। ध्यान दें कि यह केवल इनलाइन दस्तावेज़ीकरण में संशोधन के लिए है; स्टाइलिंग और लेआउट सहित, संदर्भ पृष्ठ में परिवर्तन किए जाने चाहिए और वेबसाइट रिपॉजिटरी पर परीक्षण किया जाना चाहिए।\n\n```\ngrunt watch\ngrunt watch:main\ngrunt watch:quick\n```\n\n`watch` कार्य विभिन्न फ़ाइलों के लिए बदलावों की निगरानी करेंगे और कौन से फ़ाइलों में क्या परिवर्तन हुआ है, उस अनुसार संबंधित कार्यों को चलाएगे। ये सभी कार्य एक ही चीज़ करते हैं, जिसका दायरा अलग है।\n\n`watch` कार्य स्रोत कोड में परिवर्तनों का पता लगाने पर पूर्ण डिफ़ॉल्ट कार्य चलाने के समान सभी बिल्ड और परीक्षण चलाएगा।\n\n`watch:main` कार्य लाइब्रेरी निर्माण और परीक्षण चलाएगा लेकिन स्रोत कोड में परिवर्तनों का पता लगाने पर संदर्भ का पुनर्निर्माण नहीं करेगा।\n\n`watch:quick` कार्य केवल स्रोत कोड में परिवर्तनों का पता लगाने पर लाइब्रेरी बिल्ड चलाएगा।\n\nआप जिस पर काम कर रहे हैं उसके आधार पर, यहां सबसे न्यूनतम घड़ी कार्य चुनने से आप जब भी कुछ बदलाव करना चाहें तो मैन्युअल रूप से पुनर्निर्माण चलाने से बच सकते हैं।\n\n***\n\n## रिहाई प्रक्रिया\n\nकृपया रिलीज [`release_process.md`](../release_process/) देखें।\n\n***\n\n## युक्तियाँ और ट्रिक्स\n\nकभी-कभी, समीक्षा के लिए जितने भी जटिल पुल रिक्वेस्ट हैं, उन्हें स्थानीय रूप से परीक्षण करने के लिए गिट के जटिल कमांड की आवश्यकता हो सकती है। भाग्य से, गिटहब सीएलआई टूल इस प्रक्रिया और अधिक के साथ बहुत मदद कर सकता है।\n\n### उत्तर टेम्पलेट\n\nएक आसान गिटहब सुविधा जिसका आप उपयोग कर सकते हैं वह है [उत्तर टेम्पलेट](https://docs.github.com/en/get-started/writing-on-github/working-with-saveled-replies/about-saveled-replies/), जो समस्या\nया पुल रिक्वेस्टों का उत्तर लिखते समय उपयोग के लिए उपलब्ध है। ऊपर वर्णित कुछ वर्कफ़्लो में समान या बहुत समान उत्तरों के साथ समस्याएं या पुल रिक्वेस्ट का जवाब देने की आवश्यकता हो सकती है (प्रश्नों को फ़ोरम पर पुनर्निर्देशित करना, फिक्सिंग के लिए किसी समस्या को स्वीकार करना, आदि), और सहेजे गए उत्तरों का उपयोग करना इसे थोड़ा और अधिक कुशल बना सकता है।\n\nनीचे कुछ सहेजे गए उत्तर दिए गए हैं जिनका उपयोग p5.js अनुरक्षकों द्वारा किया जा रहा है। आप उन्हें स्वयं उपयोग कर सकते हैं या अपना खुद का बना सकते हैं!\n\n##### समापन: पुनरुत्पादन नहीं किया जा सकता\n\n> हम इसे पुन: पेश करने में सक्षम नहीं हैं, लेकिन यदि आप कोई कोड नमूना प्रदान कर सकते हैं जो समस्या को दर्शाता है तो कृपया बेझिझक इसे दोबारा खोलें। धन्यवाद!\n\n##### समापन: स्निपेट की आवश्यकता है\n\n> मैं इसे संगठनात्मक उद्देश्यों के लिए बंद कर रहा हूं। यदि आप एक कोड स्निपेट प्रदान कर सकते हैं जो समस्या को दर्शाता है तो कृपया फिर से खोलें। धन्यवाद!\n\n##### समापन: फोरम का उपयोग करें\n\n> यहां गिटहब समस्या p5.js लाइब्रेरी के बग और समस्याएं के लिए एक अच्छी जगह हैं। अपना स्वयं का कोड लिखने, परीक्षण करने या ट्यूटोरियल का अनुसरण करने के बारे में प्रश्नों के लिए, [फोरम](https://discourse.processing.org/) पोस्ट करने के लिए सबसे अच्छी जगह है। धन्यवाद!\n\n##### समापन: जीएसओसी\n\n> धन्यवाद! जीएसओसी प्रस्तावों पर चर्चा करने के लिए सबसे अच्छी जगह हमारा [फोरम](https://discourse.processing.org/c/summer-of-code/) है।\n\n##### समापन: पहुंच\n\n> मुझे इस सुविधा में बहुत अधिक रुचि नहीं दिख रही है, और हमारे पास इसकी स्पष्ट व्याख्या नहीं है कि यह कैसे [पहुंच का विस्तार करता है](../access/), इसलिए मैं इसे अभी बंद कर दूंगा। यदि समस्या अनुरोध में एक एक्सेस स्टेटमेंट जोड़ा जा सकता है, तो कृपया पुनः खोलने का स्वागत करें।\n\n> हमें इस बारे में कोई और स्पष्टीकरण नहीं दिख रहा है कि यह मुद्दा कैसे [पहुंच का विस्तार करता है](../access/), इसलिए मैं इस समस्या को अभी के लिए बंद कर दूंगा। यदि फीचर अनुरोध में अधिक विस्तृत एक्सेस स्टेटमेंट जोड़ा जा सकता है, तो कृपया इसे फिर से खोलने का स्वागत करें। धन्यवाद!\n\n##### समापन: ऐडऑन\n\n> मुझे लगता है कि यह फ़ंक्शन p5.js एपीआई के दायरे से परे है (हम इसे यथासंभव न्यूनतम रखने की कोशिश करते हैं), लेकिन यह एक ऐडऑन लाइब्रेरी के लिए एक बेहतरीन शुरुआती बिंदु हो सकता है। ऐडऑन बनाने के तरीके के लिए यहां दस्तावेज़ देखें: [https://github.com/processing/p5.js/blob/main/contributor\\_docs/creating\\_libraries.md](../creating_libraries/)\n\n##### समापन पुल रिक्वेस्ट: पहले समस्या की आवश्यकता है\n\n> धन्यवाद. एक अनुस्मारक के रूप में, पुल रिक्वेस्टों को खोलने और समस्या के साथ टैग करने से पहले समस्याएं को खोला जाना चाहिए। विकास पर नज़र रखने और चर्चा को स्पष्ट रखने के लिए यह आवश्यक है। धन्यवाद!\n\n##### समस्या को ठीक करने के लिए स्वीकृति दें\n\n> आप सुधार के साथ आगे बढ़ सकते हैं। धन्यवाद।\n\n##### मर्ज किया गया पुल रिक्वेस्ट\n\n> किये गये परिवर्तन मुझे अच्छे लग रहे हैं। धन्यवाद!\n\n### गिटहब सीएलआई\n\nआपके परीक्षण के लिए स्थानीय स्तर पर कोड का पुल रिक्वेस्ट संस्करण प्राप्त करने के लिए आवश्यक जटिल गिट कमांड के साथ एक जटिल पुल रिक्वेस्ट की समीक्षा करना मुश्किल हो सकता है। सौभाग्य से, [गिटहब CLI](https://cli.github.com/) टूल इस प्रक्रिया और बहुत कुछ में काफी मदद कर सकता है।\n\nCLI को स्थानीय रूप से लिंक करने के लिए इस आईडी का कमांड `gh pr checkout [पुल रिक्वेस्ट आईडी]` चलाने से पुल रिक्वेस्ट की संस्करण कोड को आपके लिए स्थानीय रूप से प्राप्त करना संभव है, और रिमोट फोर्क को प्राप्त करने, एक ब्रांच बनाने और ब्रांच को चेकआउट करने की प्रक्रिया सभी आपके लिए स्वचालित रूप से की जाती है। मुख्य शाखा पर वापस जाना एक ब्रांच को स्विच करने के लिए उसी तरह होगा जैसे `git checkout main`। आप एक टिप्पणी भी छोड़ सकते हैं बिना वेबपेज पर जाने की आवश्यकता के साथ पुल रिक्वेस्ट में से!\n\nगिटहब एसईएलआई में बहुत सारे अन्य कमांड भी उपलब्ध हैं जो आपको उपयोगी हो सकते हैं या नहीं मिल सकते हैं, लेकिन यह एक अच्छा उपकरण है जिसका आपके आसपास होना है किसी भी मामले में।\n\n### सूचनाओं का प्रबंधन\n\nनए समस्याएं या पुल रिक्वेस्ट के लिए \"समस्याएं\" या \"पुल रिक्वेस्ट\" टैबों का मैन्युअल निगरानी करने की बजाय, आप रिपो को देखकर \"नजर रखना (watch)\" कर सकते हैं जिसमें रेपो के नाम के साथ एक आई आइकन है जो रेपो के नाम के विपरीत है।\n\n\n\nरेपो को देखकर, नई समस्याएं, नई पुल रिक्वेस्ट्स, आपके उपयोगकर्ता हैंडल का उल्लेख, और अन्य गतिविधियां, जिनकी आपने रेपो में सब्सक्राइब की हैं, इन घटनाओं को आपके [सूचना पृष्ठ](https://github.com/notifications/) पर सूचनाएं के रूप में भेजी जाती हैं, जिन्हें आप स्वीकार कर सकते हैं या उन्हें ईमेल इनबॉक्स की तरह पढ़कर या खारिज कर सकते हैं।\n\nकई मामलों में, आपको GitHub से रेपो में हो रही घटनाओं के बारे में ईमेल भी मिल सकते हैं, और आप इन्हें अपनी [सूचना सेटिंग्स पेज](https://github.com/settings/notifications/) से कस्टमाइज़ कर सकते हैं (पूरी तरह से उनका अनसब्सक्राइब करके समेत)।\n\nआपके काम करने के तरीके को ध्यान में रखते हुए इन्हें सेट करना, समस्याओं/पुल रिक्वेस्ट समीक्षा को मैन्युअली से खोजने की आवश्यकता न हो और GitHub से अंतहीन सूचनाओं से अधिक भरी होने से बचाने में अंतर हो सकता है। यहां एक अच्छा संतुलन आवश्यक है। एक शुरुआती सुझाव के रूप में, स्टीवर्ड्स को इस रेपो के लिए \"समस्याएँ\" और \"पुल रिक्वेस्ट्स\" के लिए देखना चाहिए और इसे \"भाग लेना, @मेंशन्स और कस्टम (Participating, @mentions and custom)\" पर सेट करना चाहिए।\n"},"इकाई परीक्षण\n":{"relativeUrl":"/contribute/unit_testing","description":"\n\nहम यह सुनिश्चित करने के लिए इकाई परीक्षण का उपयोग करते हैं कि कोडबेस के अलग-अलग घटक काम करते हैं जैसा कि हम उनसे उम्मीद करते हैं।\n\n### संदर्भ\n\nयहां एक समान तकनीक स्टैक के साथ [यूनिट परीक्षण](https://codeburst.io/javascript-unit-testing-using-mocha-and-chai-1d97d9f18e71/) के लिए एक अच्छा, त्वरित परिचय है, और यहां गहराई से [व्याख्या](https://blog.logrocket.com/a-quick-and-complete-guide-to-mocha-testing-d0e0ea09f09d/) दी गयी है।\n\n### सभी यूनिट टेस्ट को चलाना\n\nरेपो रूट में, अपने टर्मिनल में निम्न कमांड का उपयोग करें\n\n```shell\n$ npm test\n```\n\n### परीक्षण कवरेज\n\nजब भी परीक्षण चलाए जाते हैं, एक कवरेज रिपोर्ट तैयार की जाती है। यह कवरेज रिपोर्ट बताती है कि परीक्षण सूट द्वारा किस स्रोत कोड फ़ाइलों का उपयोग किया गया था, प्रभावी रूप से हमें बता रहा था कि कोडबेस का कितना परीक्षण किया गया था।\n\nपरीक्षण चलाने के बाद एक सारांश मुद्रित किया जाता है, और आप किसी भी वेब ब्राउज़र में `coverage/index.html` पर विस्तृत रिपोर्ट देख सकते हैं। आप अपने डिफॉल्ट वेब ब्राउज़र में पेज खोलने के लिए Mac पर कमांड लाइन से `open coverage/index.html` चला सकते हैं। आप कमांड का उपयोग करके टर्मिनल में परीक्षण चलाने के बाद कवरेज रिपोर्ट भी देख सकते हैं `npx nyc report --reporter=text`.\n\n### एक सुइट चला कर देखें\n\nएकल परीक्षण या परीक्षणों के समूह को चलाने के लिए,`.only` सुइट में या तो `.js` फ़ाइल में परीक्षण करें और उपरोक्त आदेश का उपयोग करके परीक्षण चलाएं। सावधान रहो, हालांकि आप प्रतिबद्ध नहीं हैं। `.only` (हम हमेशा चाहते हैं कि हमारा CI सभी यूनिट टेस्ट चलाए।)\n\n### एक उदाहरण\n\nकेवल \"p5.ColorConversion\" परीक्षणों का सूट चलाने के लिए, आप पढ़ने के लिए `test/unit/color/color_conversion.js` की पहली पंक्ति को बदल देंगे-\n\n```js\nsuite.only('color/p5.ColorConversion', function() {\n```\n\nअब जब आप `npm test` का उपयोग करते हैं, तो केवल उस `function()` बॉडी के भीतर परीक्षण चलाए जाएंगे।\n\n### एक परीक्षण सूट लंघन\n\nयह सुविधा .only () का विलोम है। .Skip () को जोड़कर, आप मोचा को इन सुइट्स और टेस्ट केस (मामलों) को अनदेखा करने के लिए कह सकते हैं। कुछ भी छोड़ दिया जाना लंबित के रूप में चिह्नित किया जाएगा, और इस तरह की रिपोर्ट की जाएगी।\n\n## आधारिक संरचना\n\n### ढांचा\n\nहम अपने यूनिट परीक्षणों को संरचित करने और चलाने के लिए [Mocha](https://mochajs.org/) का उपयोग करते हैं हम कोड का व्यवहार कैसे करना चाहिए, इसके बारे में अलग-अलग कथन लिखने के लिए हम \\[chai assert (और except)]\\([https://www.chaijs.com](https://www.chaijs.com) api/assert/) का उपयोग करते हैं।\n\n### वातावरण\n\nहमारे पास `test/unit` फ़ोल्डर के तहत परीक्षण का एक संग्रह है जो ब्राउज़र में चलता है और `test/node` के तहत परीक्षणों का एक संग्रह है जो नोड्स .js. में चलता है।\n\nब्राउज़र परीक्षण [हेडलेस क्रोम](https://developers.google.com/web/updates/2017/06/headless-karma-mocha-chai/) में चलते हैं। यही कारण है कि जब आप परीक्षण चलाते हैं तो आपको ब्राउज़र विंडो पॉप-अप नहीं दिखाई देती है।\n\n### सेटअप और सहायक\n\nये वर्तमान में केवल ब्राउज़र परीक्षणों के लिए उपलब्ध हैं (जहाँ हमारे अधिकांश परीक्षण चलते हैं)-\n\n* test/js/mocha\\_setup.js मोचा के लिए कुछ विकल्प कॉन्फ़िगर करता है।\n* test/js/chai\\_helpers.js chai.assert में चाई स्थापित करता है और कुछ उपयोगी कार्यों को जोड़ता है।\n* test/js/p5\\_helpers.js p5 स्केच के परीक्षण के लिए कुछ सहायकों को जोड़ता है।\n\nNode.js परीक्षणों के लिए सेटअप सभी `test/mocha.opts` में किया जाता है।\n\n### निरंतर एकीकरण परीक्षण\n\nजब आप p5.js रेपो में एक पुल अनुरोध भेजते हैं, तो यह स्वचालित रूप से [परीक्षण चलाएगा](https://github.com/processing/p5.js/actions/)। इससे हमें यह जांचने में मदद मिलती है कि परीक्षण प्रत्येक पुल अनुरोध के लिए गुजरता है, व्यक्तिगत योगदानकर्ताओं से कोई अतिरिक्त काम नहीं है। यह स्वतः ही [कोडेकोव](https://codecov.io/github/processing/p5.js) रिपोर्ट को कवरेज रिपोर्ट भी अपलोड कर देता है।\n\n### इकाई परीक्षण जोड़ना\n\nयदि आप अधिक इकाई परीक्षण जोड़ना चाहते हैं, तो देखें और देखें कि क्या उस घटक के लिए पहले से ही एक परीक्षण फ़ाइल है जिसके लिए आप परीक्षण जोड़ना चाहते हैं। आम तौर पर, src में दिए गए फ़ाइल के लिए `test/unit` के तहत एक ही रास्ते पर होते हैं। (उदाहरण के लिए `src/color/p5.Color.js` के लिए परीक्षण `test/unit/color/p5.Color.js`\nमें हैं।)\n\nयदि आपको एक नहीं मिल रहा है, तो शायद इसलिए कि उस फ़ाइल के लिए कोई परीक्षण नहीं हुआ है (अभी तक पलक), इसलिए ऊपर दिए गए सम्मेलनों के अनुसार एक नई फ़ाइल बनाएं। यदि आप जिस मॉड्यूल का परीक्षण कर रहे हैं, उसे काम करने के लिए ब्राउज़र की आवश्यकता होती है, तो आप इसे test/unit में रखना चाहते हैं, लेकिन यदि ऐसा नहीं है, तो आप इसे test/node के तहत जोड़ना चाह सकते हैं। जब संदेह हो, तो test/unit में एक ब्राउज़र टेस्ट जोड़ने के लिए डिफ़ॉल्ट! (यदि हमें ज़रूरत है तो बाद में स्थानांतरित करना बहुत आसान है।)\n\nयदि आपको test/unit के लिए मॉड्यूल के लिए एक परीक्षण फ़ाइल को जोड़ना है, तो आपको test/unit/spec.js में युक्ति के लिए परीक्षण के तहत मॉड्यूल की भी आवश्यकता होगी। यह सुनिश्चित करेगा कि आपके परीक्षण को चलाने के लिए आवश्यक मॉड्यूल लोड किए गए हैं। आप इन परीक्षणों को ब्राउज़र में test/test.html फ़ाइल देखकर देख सकते हैं।\n\n### इकाई परीक्षण लिखना\n\nएक इकाई चुनें, यह परीक्षण करने के लिए एक विधि या एक चर हो सकता है। एक उदाहरण के रूप में `p5.prototype.isKeyPressed` का उपयोग करें। परीक्षण लिखने की शुरुआत करने से पहले, हमें इस पद्धति के अपेक्षित व्यवहार को समझने की आवश्यकता है। **अपेक्षित व्यवहार**: बूलियन सिस्टम वैरिएबल सही होना चाहिए यदि कोई कुंजी दबाया जाता है और गलत है यदि कोई कुंजी दबाया नहीं जाता है। अब आप इस अपेक्षित व्यवहार के खिलाफ विभिन्न परीक्षणों के बारे में सोच सकते हैं। संभावित परीक्षण मामले हो सकते हैं-\n\n* वेरिएबल एक बूलियन है।\n* यह सच होना चाहिए अगर एक कुंजी को दबाया जाता है।\n* यह सच होना चाहिए अगर एक कुंजी को दबाया जाता है - वर्णमाला कुंजी, संख्या कुंजी, विशेष कुंजी आदि।\n* यदि कई कुंजियों को दबाया जाए तो यह सही होना चाहिए।\n* यह गलत होना चाहिए अगर कोई कुंजी दबाया नहीं जाता है।\n* यदि आप अधिक के बारे में सोच सकते हैं, तो आगे बढ़ें और उनके लिए परीक्षण जोड़ें।\n\nहम `p5.prototype.isKeyPressed` के लिए एक परीक्षण सूट बना सकते हैं और इसके लिए परीक्षण बनाना शुरू कर सकते हैं। हम अपने यूनिट परीक्षणों की संरचना के लिए Mocha का उपयोग करेंगे।\n\n```js\nsuite('p5.prototype.keyIsPressed', function() {\n test('keyIsPressed is a boolean', function() {\n //परीक्षण यहाँ लिखें\n });\n\n test('keyIsPressed is true on key press', function() {\n //परीक्षण यहाँ लिखें\n });\n\n test('keyIsPressed is false when no keys are pressed', function() {\n //परीक्षण यहाँ लिखें\n });\n});\n```\n\nहमने परीक्षणों की संरचना की है, लेकिन हमने अभी तक परीक्षण नहीं लिखे हैं। हम इसके लिए ची के दावे का उपयोग करेंगे। निम्नलिखित को धयान मे रखते हुए-\n\n```js\ntest('keyIsPressed is a boolean', function() {\n assert.isBoolean(myp5.keyIsPressed); //दावा करता है कि मूल्य एक बूलियन है।\n});\n```\n\nइसी प्रकार हम `assert.strictEqual(myp5.keyIsPressed, true)` का उपयोग कर सकते हैं यदि मान सत्य है। आप यहां चाय के दावे के बारे में अधिक पढ़ सकते हैं। अब जब आप परीक्षण लिख चुके हैं, तो उन्हें चलाएं और देखें कि क्या विधि अपेक्षित रूप से व्यवहार करती है। यदि नहीं, तो उसी के लिए एक मुद्दा बनाएं और यदि आप चाहें, तो आप इसे ठीक करने पर भी काम कर सकते हैं।\n"},"वेबजीएल योगदान गाइड\n":{"relativeUrl":"/contribute/webgl_contribution_guide","description":"{/* p5.js WebGL मोड सोर्स कोड पर काम कैसे शुरू करें। */}\n\n\n\nनमस्ते, यदि आप इस पृष्ठ को पढ़ रहे हैं, तो आप शायद वेबजीएल मोड पर काम करने में मदद करने के इच्छुक हैं। आपकी मदद के लिए धन्यवाद, हम आपकी सहायता के लिए आभारी हैं! इस पृष्ठ का उद्देश्य वेबजीएल योगदानों को संरचित करने का तरीका समझाना और परिवर्तन करते समय कुछ सुझाव प्रदान करना है।\n\n## संसाधन\n\n* हमारे [p5.js वेबजीएल मोड की संरचना अवलोकन](https://github.com/processing/p5.js/blob/main/contributor_docs/webgl_mode_architecture.md) पढ़ें ताकि समझा जा सके कि 2डी मोड से वेबजीएल मोड कैसे भिन्न है। इससे शेडर, स्ट्रोक और अन्य के लिए कुछ कार्यान्वयन विशेषताओं को समझने में मदद मिलेगी।\n* हमारे [योगदानकर्ता दिशानिर्देश](https://p5js.org/contributor-docs/#/./contributor_guidelines/) पढ़ें जिससे यह पता चलेगा कि समस्या को कैसे बनाया जाए, कोडबेस को कैसे सेट किया जाए और परिवर्तनों को कैसे परीक्षित किया जाए।\n* यह जानना भी उपयोगी हो सकता है कि ब्राउज़र के वेबजीएल एपीआई के बारे में थोड़ा जानना, जिस पर p5.js का वेबजीएल मोड बनाया गया है:\n * [वेबजीएल मूलभूत बातें](https://webglfundamentals.org/) कई कोर रेंडरिंग अवधारणाओं पर जाती है\n * [शेडर की किताब](https://thebookofshaders.com/) वेबजीएल शेडर में उपयोग की जाने वाली कई तकनीकों को समझाती है\n\n## योजना बनाना\n\nहम खुली समस्यों को [एक गिटहब प्रोजेक्ट में](https://github.com/orgs/processing/projects/5/) व्यवस्थित करते हैं, जहां हम उन्हें कुछ प्रकारों में विभाजित करते हैं:\n\n* **प्रणाली-स्तरीय परिवर्तन** लंबी अवधि के लक्ष्य हैं जिनके कोड में व्यापक निहितार्थ हैं। इन्हें कार्यान्वयन में कूटनीति और योजनाबद्धता की सबसे अधिक चर्चा और योजना की आवश्यकता होती है।।\n* **कोई समाधान नहीं वाले बग** ऐसे बग रिपोर्ट हैं जिनमें कारण को संकीर्ण करने के लिए डीबगिंग की आवश्यकता होती है। ये अभी तक ठीक करने के लिए तैयार नहीं हैं: एकबार कारण मिल जाता है, तो हम इसे कैसे ठीक करना है, इस पर चर्चा कर सकते हैं।\n* **समाधान वाले बग लेकिन कोई पीआर नहीं वाले बग** वे हैं जहां हमने इसे कैसे ठीक करना है तय कर लिया है और किसी को भी कोड लिखने के लिए स्वतंत्र हैं।\n* **छोटे विस्तार** वे समस्या हैं जिनमें नई सुविधाएं हैं जिनके लिए वर्तमान संरचना के भीतर एक स्पष्ट स्थान है और इसे फिट करने की तरीके पर चर्चा करने की आवश्यकता नहीं है। एक बार यह तय हो जाता है कि इन्हें करना लायक है, तो आप कोड लिखने के लिए स्वतंत्र हैं।\n* **2डी सुविधाएं** वे हैं जो पहले से ही p5.js में मौजूद हैं लेकिन वेबजीएल मोड में नहीं। इस सुविधा को लागू करने के बाद, उम्मीद है कि इसका व्यवहार 2डी मोड से मेल खाएगा। हमें शायद इसके सर्वोत्तम कार्यान्वयन पर चर्चा करनी पड़ सकती है, लेकिन इनके लिए उपयोगकर्ता आवश्यकताएं स्पष्ट हैं।\n* **सभी संदर्भों में काम नहीं करने वाली सुविधाएं** वे हैं जो वेबजीएल मोड में मौजूद हैं लेकिन वेबजीएल मोड का उपयोग करने के सभी तरीकों में काम नहीं करती हैं। उदाहरण के लिए, कुछ p5.js विधियां 2डी निर्देशांकों और 3डी निर्देशांकों दोनों के साथ काम करती हैं, लेकिन अन्य 3डी निर्देशांकों का उपयोग करने पर टूट जाती हैं। आमतौर पर इन पर काम शुरू करने के लिए स्वतंत्र हैं।\n* **विशेषता अनुरोध** सभी अन्य कोड परिवर्तन अनुरोध हैं। इन पर यह सुनिश्चित करने के लिए थोड़ी चर्चा करने की आवश्यकता होती है कि वे वेबजीएल मोड की रोडमैप में फिट बैठते हैं या नहीं।\n* **दस्तावेजीकरण समस्या** वे हैं जिनके लिए कोड परिवर्तन की आवश्यकता नहीं होती है, बल्कि इसके बजाय p5.js के व्यवहार की बेहतर दस्तावेजीकरण की आवश्यकता होती है।\n\n## कोड कहाँ रखना है\n\nयहां वेबजीएल से संबंधित सभी चीजें src/webgl सबडायरेक्टरी में हैं। इस डायरेक्टरी के भीतर, शीर्ष-स्तरीय p5.js फ़ंक्शन विषय क्षेत्र के आधार पर फाइलों में विभाजित हैं: प्रकाश सेट करने के आदेश lighting.js में जाते हैं; सामग्रियां सेट करने के आदेश materials.js में जाते हैं।\n\nजब उपयोगकर्ता-अभिमुख वर्गों को लागू किया जाता है, तो हम आमतौर पर एक फ़ाइल प्रति वर्ग रखने की कोशिश करते हैं। इन फ़ाइलों में कभी-कभी कुछ अन्य आंतरिक उपयोगिता वर्ग हो सकते हैं। उदाहरण के लिए, `p5.Framebuffer.js` में `p5.Framebuffer` वर्ग शामिल है, और इसमें अन्य मुख्य वर्गों की कुछ फ्रेमबफर-विशिष्ट उपवर्ग भी शामिल हैं। अन्य फ्रेमबफर-विशिष्ट उपवर्ग भी इस फ़ाइल में जा सकते हैं।\n\n`p5.RendererGL` एक बड़ा वर्ग है जो बहुत सारे व्यवहार को संभालता है। इस कारण से, एक बड़ी वर्ग फ़ाइल होने के बजाय, इसकी कार्यक्षमता कई फ़ाइलों में विभाजित है, जो इस बात पर निर्भर करती है कि यह किस विषय क्षेत्र से संबंधित है। यहां एक विवरण है कि हम `p5.RendererGL` को किन फाइलों में विभाजित करते हैं, और प्रत्येक में क्या डालना है:\n\n#### `p5.RendererGL.js`\n\nआरंभीकरण और मूल कार्यक्षमता।\n\n#### `p5.RendererGL.Immediate.js`\n\n**तत्काल मोड** आरेखण से संबंधित कार्यक्षमता (आकृतियां जो संग्रहीत और पुन: उपयोग नहीं की जाएंगी, जैसे `beginShape()` और `endShape()`)\n\n#### `p5.RendererGL.Retained.js`\n\n**रिटेन्ड मोड** आरेखण से संबंधित कार्यक्षमता (आकृतियां जो पुन: उपयोग के लिए संग्रहीत की गई हैं, जैसे `sphere()`)\n\n#### `material.js`\n\nमिश्रण मोड का प्रबंधन\n\n#### `3d_primitives.js`\n\nउपयोगकर्ता-अभिमुख फ़ंक्शन जो आकृतियां आरेखित करते हैं, जैसे `triangle()`। ये आकृतियों की ज्यामिति परिभाषित करते हैं। उन आकृतियों का रेंडरिंग फिर `p5.RendererGL.Retained.js` या `p5.RendererGL.Immediate.js` में होता है, ज्यामिति इनपुट को एक सामान्य आकृति के रूप में मानते हुए।\n\n#### `Text.js`\n\nलेखन रेंडरिंग के लिए कार्यक्षमता और उपयोगिता वर्ग।\n\n## वेबजीएल परिवर्तनों का परीक्षण करना\n\n### सुसंगतता का परीक्षण\n\np5.js में फ़ंक्शन का उपयोग करने के बहुत से तरीके हैं। इसकी मैन्युअल रूप से जांच करना मुश्किल है, इसलिए हम जहां भी संभव हो युनिट टेस्ट जोड़ते हैं। इस तरह, जब हम नए परिवर्तन करते हैं, तो हम अधिक आश्वस्त हो सकते हैं कि हमने किसी चीज को नहीं तोड़ा है यदि सभी युनिट टेस्ट अभी भी पास हो रहे हैं।\n\nजब एक नया टेस्ट जोड़ा जाता है, तो यदि विशेषता कुछ ऐसा है जो 2डी मोड में भी काम करता है, तो सुसंगतता की जांच करने का सबसे अच्छा तरीका यह है कि आप देखें कि दोनों मोड में परिणामी पिक्सेल समान हैं। एक युनिट टेस्ट में इसका एक उदाहरण यहां दिया गया है:\n\n```js\ntest('coplanar strokes match 2D', function() {\n const getColors = function(mode) {\n myp5.createCanvas(20, 20, mode);\n myp5.pixelDensity(1);\n myp5.background(255);\n myp5.strokeCap(myp5.SQUARE);\n myp5.strokeJoin(myp5.MITER);\n if (mode === myp5.WEBGL) {\n myp5.translate(-myp5.width/2, -myp5.height/2);\n }\n myp5.stroke('black');\n myp5.strokeWeight(4);\n myp5.fill('red');\n myp5.rect(10, 10, 15, 15);\n myp5.fill('blue');\n myp5.rect(0, 0, 15, 15);\n myp5.loadPixels();\n return [...myp5.pixels];\n };\n assert.deepEqual(getColors(myp5.P2D), getColors(myp5.WEBGL));\n});\n```\n\nयह हमेशा काम नहीं करता क्योंकि आप 2डी मोड में एंटीएलियासिंग को बंद नहीं कर सकते, और वेबजीएल मोड में एंटीएलियासिंग अक्सर थोड़ा अलग होगा। हालांकि, ये x और y अक्षों में सीधी रेखाओं के लिए काम कर सकता है!\n\nयदि कोई सुविधा केवल वेबजीएल के लिए है, तो 2डी मोड के साथ पिक्सेल की तुलना करने के बजाय, हम अक्सर कुछ पिक्सेल की जांच करते हैं ताकि यह सुनिश्चित किया जा सके कि उनका रंग वह है जिसकी हम उम्मीद करते हैं। एक दिन, हम इसे हमारे अपेक्षित परिणामों की पूरी छवि स्नैपशॉट की तुलना करने के लिए एक अधिक मजबूत प्रणाली में बदल सकते हैं, बजाय कुछ पिक्सेल की तुलना करने के, लेकिन अभी के लिए, यहां एक पिक्सेल रंग जांच का उदाहरण है:\n\n```js\ntest('color interpolation', function() {\n const renderer = myp5.createCanvas(256, 256, myp5.WEBGL);\n // upper color: (200, 0, 0, 255);\n // lower color: (0, 0, 200, 255);\n // expected center color: (100, 0, 100, 255);\n myp5.beginShape();\n myp5.fill(200, 0, 0);\n myp5.vertex(-128, -128);\n myp5.fill(200, 0, 0);\n myp5.vertex(128, -128);\n myp5.fill(0, 0, 200);\n myp5.vertex(128, 128);\n myp5.fill(0, 0, 200);\n myp5.vertex(-128, 128);\n myp5.endShape(myp5.CLOSE);\n assert.equal(renderer._useVertexColor, true);\n assert.deepEqual(myp5.get(128, 128), [100, 0, 100, 255]);\n});\n```\n\n### परफॉर्मेंस परीक्षण\n\nजबकि यह p5.js का # 1 समस्या नहीं है, हम सुनिश्चित करने की कोशिश करते हैं कि परिवर्तन परफॉर्मेंस पर बहुत अधिक प्रभाव नहीं डालते हैं। आमतौर पर, यह दो परीक्षण स्केच बनाकर किया जाता है: एक आपके बदलाव के साथ और एक बिना बदलाव के। फिर हम दोनों के फ्रेम रेट की तुलना करते हैं।\n\nपरफॉर्मेंस को मापने के बारे में कुछ सलाह:\n\n* अपने स्केच के शीर्ष पर `p5.disableFriendlyErrors = true` के साथ अनुकूल त्रुटियों को अक्षम करें (या बस `p5.min.js` का परीक्षण करें, जिसमें अनुकूल त्रुटि प्रणाली शामिल नहीं है)\n* स्थिर स्टेट फ्रेम दर का स्पष्ट अनुभव प्राप्त करने के लिए औसत फ्रेम दर प्रदर्शित करें:\n\n```js\nlet frameRateP;\nlet avgFrameRates = [];\nlet frameRateSum = 0;\nconst numSamples = 30;\nfunction setup() {\n // ...\n frameRateP = createP();\n frameRateP.position(0, 0);\n}\nfunction draw() {\n // ...\n const rate = frameRate() / numSamples;\n avgFrameRates.push(rate);\n frameRateSum += rate;\n if (avgFrameRates.length > numSamples) {\n frameRateSum -= avgFrameRates.shift();\n }\n \n frameRateP.html(round(frameRateSum) + ' avg fps');\n}\n```\n\nहम निम्नलिखित मामलों का परीक्षण करने की कोशिश करते हैं क्योंकि वे रेंडरिंग पाइपलाइन के विभिन्न हिस्सों पर दबाव डालते हैं:\n\n* कुछ बहुत ही जटिल आकृतियां (उदाहरण के लिए, एक बड़ा 3डी मॉडल या एक लंबी वक्र रेखा)\n* कई सरल आकृतियां (उदाहरण के लिए, एक फॉर लूप में कई बार `line()` फ़ंक्शन का उपयोग)\n"}},"examples":{"आदिम आकार":{"relativeUrl":"/examples/shapes-and-color-shape-primitives","description":"\nयह प्रोग्राम\n
square(),\n
rect(),\n
ellipse(),\n
circle(),\n
arc(),\n
line(),\n
triangle(),\nऔर
quad() जैसे मूल आकार के आदिम कार्यों के उपयोग को प्रदर्शित करता है।"},"रंग":{"relativeUrl":"/examples/shapes-and-color-color","description":"\r\nयह रंग जोड़कर आकार आदिम उदाहरण पर विस्तार करता है।\r\n
background() कैनवास को एक रंग से भरता है,
stroke() रेखाएं खींचने के लिए रंग सेट करता है, और
fill() आकृतियों के अंदर का रंग सेट करता है।
noStroke() और
noFill() क्रमशः लाइन रंग और आंतरिक रंग बंद करते है।\r\n\r\nरंगों को कई अलग-अलग तरीकों से दर्शाया जा सकता है। यह उदाहरण कई विकल्प प्रदर्शित करता ह।"},"रेखाएँ खींचना":{"relativeUrl":"/examples/animation-and-variables-drawing-lines","description":"\r\nएक रेखा खींचने के लिए माउस को क्लिक करें और खींचें।\r\n\r\nयह उदाहरण कई बिल्ट-इन वेरिएबल के उपयोग को प्रदर्शित करता है।\r\n
mouseX और
mouseY वर्तमान माउस स्थिति को संग्रहीत करता है, जबकि पिछली माउस स्थिति को
pmouseX और
pmouseY द्वारा दर्शाया जाता है।\r\n\r\n *\r\n\r\nयह उदाहरण HSB (रंग-संतृप्ति-चमक) के साथ
colorMode का उपयोग भी दिखाता है, ताकि पहला वेरिएबल रंग सेट कर पाये।"},"घटनाओं के साथ एनीमेशन":{"relativeUrl":"/examples/animation-and-variables-animation-with-events","description":"\r\nयह उदाहरण
loop() और
noLoop() के उपयोग को एनीमेशन को रोकने और फिर से शुरू करने के लिए दर्शाता है।\r\n\r\nमाउस पर क्लिक करने से एनीमेशन लूप चालू हो जाता है। यदि एनीमेशन लूप बंद हो जाता है, तो उपयोगकर्ता एक फ्रेम को आगे बढ़ाने के लिए कोई भी कुंजी दबा सकता है। ध्यान दें: कुंजी दबाने को पंजीकृत करने के लिए उपयोगकर्ता को कैनवास पर फोकस सेट करने के लिए क्लिक करना होगा।\r\n\r\nएकल फ़्रेम को आगे बढ़ाने का काम
redraw() फ़ंक्शन को कॉल करके पूरा किया जाता है, जो आंतरिक रूप से draw() कॉल करता है।"},"मोबाइल डिवाइस मूवमेंट":{"relativeUrl":"/examples/animation-and-variables-mobile-device-movement","description":"\r\n
deviceMoved()\r\nफ़ंक्शन तब चलता है जब स्केच प्रदर्शित करने वाला मोबाइल उपकरण चलता है।\r\n\r\nइस उदाहरण में,
accelerationX,
accelerationY, और
accelerationZ मान वृत्त की स्थिति और आकार निर्धारित करते हैं। यह केवल मोबाइल उपकरणों के लिए काम करता है।"},"स्थितियाँ":{"relativeUrl":"/examples/animation-and-variables-conditions","description":"\r\n
if और
else कथन
कोड के ब्लॉक केवल तभी चलाते हैं जब कोई निश्चित शर्त सत्य हो। यह उदाहरण केवल तभी एनिमेट होता है जब माउस को नीचे दबाया जाता है। ऐसा लाइन 59 पर मौजूद
if स्टेटमेंट के कारण है। आप
if और
else स्टेटमेंट्स के बारे में अधिक पढ़ सकते हैं
p5 रेफरेंस में या MDN पर।\r\n\r\nतुलना ऑपरेटर दो मानों की तुलना करके स्थितियाँ बनाने में मदद करते हैं। इस उदाहरण में, पंक्ति 69 पर
if कथन के कारण रंग कम से कम 360 होने पर वृत्त का रंग शून्य पर रीसेट हो जाता है। आप तुलना ऑपरेटरों के बारे में अधिक पढ़ सकते हैं
MDN पर।\r\n\r\n\r\nतार्किक संचालक शर्तों को संयोजित करने की अनुमति देते हैं।
&& जांचता है कि दोनों स्थितियां सच हैं। इस उदाहरण में वृत्त जब कैनवास के क्षैतिज केंद्र की ओर होता है तो उसमें काला भराव होता है, और जब ऐसा नहीं होता है तो उसमें सफेद भराव होता है। ऐसा पंक्ति 45 पर दिए गए
if कथन के कारण है, जो जाँचता है कि वृत्त की x स्थिति कम से कम 100 है और 300 से अधिक नहीं है।\r\n
|| जांचता है कि इनमें से कम से कम एक स्थितियाँ सत्य हैं। जब वृत्त पंक्ति 75 पर दिए गए
if कथन के कारण कैनवास के बाएँ या दाएँ किनारे तक पहुँचता है तो वह क्षैतिज गति को उलट देता है।\r\n"},"शब्द":{"relativeUrl":"/examples/imported-media-words","description":"\r\n
text() फ़ंक्शन का उपयोग कैनवास में टेक्स्ट डालने के लिए किया जाता है।\r\n\r\nआप
loadFont() और
fontSize() फ़ंक्शन का उपयोग करके फ़ॉन्ट और टेक्स्ट का आकार बदल सकते हैं।\r\n\r\nटेक्स्ट को
textAlign() फ़ंक्शन के साथ बाएं, केंद्र या दाएं संरेखित किया जा सकता है, और, आकृतियों की तरह, टेक्स्ट को
fill() से रंगीन किया जा सकता है।\r\n"},"छवि डेटा कॉपी करें":{"relativeUrl":"/examples/imported-media-copy-image-data","description":"\r\n
copy() विधि का उपयोग करके, आप किसी छवि को रंगने की प्रक्रिया का अनुकरण कर सकते हैं। यह काले और सफेद छवि के शीर्ष पर जहां भी कर्सर खींचा जाता है, रंगीन छवि की एक छवि की प्रतिलिपि बनाकर किया जाता है।"},"अल्फा मास्क":{"relativeUrl":"/examples/imported-media-alpha-mask","description":"\r\n
mask() विधि का उपयोग करके, आप एक छवि के लिए एक मास्क बना सकते हैं, और इसका उपयोग कर सकते हैं विभिन्न भागों में पारदर्शिता निर्दिष्ट करने के लिए। इस उदाहरण को स्थानीय रूप से चलाने के लिए, आपको दो छवि फ़ाइलों और एक चालू
स्थानीय सर्वर की आवश्यकता होगी।"},"छवि पारदर्शिता":{"relativeUrl":"/examples/imported-media-image-transparency","description":"\r\nयह प्रोग्राम
tint() फ़ंक्शन के साथ छवि के अल्फा मान को संशोधित करके एक छवि को दूसरी छवि पर ओवरले करता है। छवि की स्थिति बदलने के लिए कर्सर को कैनवास पर बाएँ और दाएँ घुमाएँ। इस उदाहरण को स्थानीय रूप से चलाने के लिए, आपको एक छवि फ़ाइल और एक चालू
स्थानीय सर्वर की आवश्यकता होगी।"},"ऑडियो प्लेयर":{"relativeUrl":"/examples/imported-media-create-audio","description":"\r\n
createAudio() एक ऑडियो प्लेयर बनाता है। यह उदाहरण ऑडियो प्लेयर के नियंत्रण को प्रदर्शित करता है और उसकी गति को समायोजित करता है। जब माउस विंडो के बाएँ किनारे पर होता है तो प्लेबैक गति सामान्य होती है, और जैसे ही माउस दाईं ओर जाता है यह तेज़ हो जाती है। ऑडियो प्लेयर जैसे मीडिया तत्वों का उपयोग करने के बारे में अधिक जानकारी
p5.MediaElement संदर्भ पृष्ठ पर है। ऑडियो फ़ाइल एक
सार्वजनिक डोमेन में जोसेफ़ प्रेस द्वारा बनाया गया पियानो लूप है।"},"वीडियो प्लेयर":{"relativeUrl":"/examples/imported-media-video","description":"\r\n
noCanvas() और
createVideo() फ़ंक्शन का उपयोग करके आप
DOM में एक वीडियो अपलोड कर सकते हैं, वीडियो को कैनवास में एम्बेड किए बिना। कैनवास तत्व के भीतर एम्बेडेड वीडियो बनाने के लिए,
वीडियो कैनवास उदाहरण पर जाएं।"},"वीडियो कैनवास":{"relativeUrl":"/examples/imported-media-video-canvas","description":"\r\n
createVideo() और
image() फ़ंक्शंस का उपयोग करके आप कैनवास में एक वीडियो अपलोड कर सकते हैं।\r\nचूँकि वीडियो कैप्चर
image() कंस्ट्रक्टर से होकर गुजरता है, आप इसमें फ़िल्टर जोड़ सकते हैं
filter() विधि का उपयोग करके।\r\nइस उदाहरण को स्थानीय रूप से चलाने के लिए, आपको एक चालू
स्थानीय सर्वर की आवश्यकता होगी।\r\nकैनवास में एम्बेड किए बिना वीडियो बनाने के लिए,
वीडियो उदाहरण पर जाएं।"},"विडियो रिकॉर्ड":{"relativeUrl":"/examples/imported-media-video-capture","description":"\r\n
createCapture() \r\nऔर
image() फ़ंक्शन का उपयोग करके आप किसी डिवाइस का वीडियो कैप्चर ले सकते हैं और उसे कैनवास में बना सकते हैं।\r\nचूँकि वीडियो कैप्चर
image() कंस्ट्रक्टर से होकर गुजरता है, आप इसमें
filter() विधि से फ़िल्टर जोड़ सकते हैं।\r\nवीडियो अपलोड करने, प्रस्तुत करने या स्टाइल करने की विभिन्न रणनीतियों के लिए,
वीडियो और
वीडियो कैनवस उदाहरण पर जाएं।"},"छवि ड्रॉप":{"relativeUrl":"/examples/input-elements-image-drop","description":"\r\n
drop() एक p5.js तत्व विधि है जो हर बार कॉलबैक फ़ंक्शन को कॉल करती है जब एक फ़ाइल तत्व में लोड करना पूरा करती है। \r\nअपलोड की गई फ़ाइल एक
p5.File क्लास में बनाई गई है।\r\nआप फ़ाइल प्रकार की जांच करने के लिए
drop() कॉलबैक का उपयोग कर सकते हैं, और फिर विभिन्न फ़ाइल प्रकारों पर अलग-अलग प्रतिक्रिया देने के लिए सशर्त विवरण लिख सकते हैं।"},"इनपुट और बटन":{"relativeUrl":"/examples/input-elements-input-button","description":"\r\n
createElement(),
createInput(), और
createButton() फ़ंक्शंस के साथ, आप टेक्स्ट इनपुट के माध्यम से सबमिट किए गए एक टेक्स्ट स्ट्रिंग ले सकते हैं और इसे अपने कैनवास पर प्रदर्शित कर सकते हैं।"},"फॉर्म तत्व":{"relativeUrl":"/examples/input-elements-dom-form-elements","description":"\r\n
डॉक्यूमेंट ऑब्जेक्ट मॉडल, या DOM, वेब पेज की परिणामी संरचना का प्रतिनिधित्व करता है। \r\np5.js के फॉर्म तत्वों का उपयोग करके, जैसे
createInput(),
createSelect(), और
createRadio(), आप
select,
input, या
radio button के माध्यम से सबमिट की गई जानकारी लेने के विभिन्न तरीके बना सकते हैं और जानकारी के आधार पर DOM को अपडेट कर सकते हैं।\r\n "},"ट्रांसलेट":{"relativeUrl":"/examples/transformation-translate","description":"\r\ntranslate() फ़ंक्शन कोऑर्डनिट सिस्टम के ऑरिजिन को निर्दिष्ट स्थान पर ले जाता है।\r\n
push() और
पॉप() फ़ंक्शन कोऑर्डनिट सिस्टम और विभिन्न अन्य ड्राइंग सेटिंग्स, जैसे भरण रंग, को सहेजते और पुनर्स्थापित करते हैं।\r\nध्यान दें कि इस उदाहरण में, हम हर बार एक अलग कोऑर्डनिट सिस्टम में आकृतियाँ (आयत और वृत्त) बनाते हैं।\r\n"},"रोटेट":{"relativeUrl":"/examples/transformation-rotate","description":"\r\n
rotate() फ़ंक्शन वर्तमान समन्वय प्रणाली को वर्तमान मूल के चारों ओर घुमाता है।\r\nध्यान दें कि डिफ़ॉल्ट रूप से मूल कैनवास का ऊपरी बाएँ कोना है।\r\nकैनवास के केंद्र के चारों ओर घूमने के लिए, हमें पहले समन्वय प्रणाली का अनुवाद करना होगा, और फिर नए मूल के चारों ओर घूमना होगा।\r\n
push() और
pop() फ़ंक्शन क्रमशः समन्वय प्रणाली को सहेजते और पुनर्स्थापित करते हैं।\r\n"},"स्केल":{"relativeUrl":"/examples/transformation-scale","description":"\r\n
scale() फ़ंक्शन निर्दिष्ट स्केल द्वारा वर्तमान समन्वय प्रणाली को बधा देता है।\r\n
push() और
pop() फ़ंक्शन क्रमशः समन्वय प्रणाली को सहेजते और पुनर्स्थापित करते हैं।\r\nइस उदाहरण में, तीन अलग-अलग स्केलिंग फैक्टर के साथ, 200 आकार के वर्ग बनाये गये हैं।"},"रेखिक आंतरिक":{"relativeUrl":"/examples/calculating-values-interpolate","description":"\r\n
Interpolation\r\nदो अन्य मानों के बीच मान की गणना करता है। उदाहरण के लिए, संख्या 5 है\r\n0 और 10 के मध्य। विभिन्न प्रकार के प्रक्षेप उपयोग\r\nमूल्यों के बीच परिवर्तन की विभिन्न दरें। रेखिक आंतरिक,\r\nजिसे संक्षेप में एलआरपी कहा जाता है, परिवर्तन की निरंतर दर का उपयोग करता है।\r\n
lerp()\r\nफ़ंक्शन दो संख्याओं के बीच रैखिक रूप से अंतरण करता है।\r\n\r\nमाउस को स्क्रीन पर ले जाएँ और प्रतीक अनुसरण करेगा।\r\nएनीमेशन के प्रत्येक फ्रेम को चित्रित करने के बीच, दीर्घवृत्त भाग चलता है\r\nकर्सर की ओर इसकी वर्तमान स्थिति से दूरी की।"},"नक्शा":{"relativeUrl":"/examples/calculating-values-map","description":"\r\nThe\r\n
map()\r\nफ़ंक्शन किसी मान को एक श्रेणी से दूसरी श्रेणी में परिवर्तित करता है। इस उदाहरण में, मानचित्र\r\nकर्सर की क्षैतिज स्थिति को 0-720 से 0-360 की सीमा में परिवर्तित करता है।\r\nपरिणामी मान वृत्त का रंग बन जाता है। मानचित्र कर्सर को भी परिवर्तित करता है\r\nऊर्ध्वाधर स्थिति 0-400 से 20-300 की सीमा तक। परिणामी मूल्य\r\nवृत्त का व्यास बन जाता है।"},"यादृच्छिक":{"relativeUrl":"/examples/calculating-values-random","description":"\r\nयह उदाहरण इस फंक्शन के उपयोग को \r\n
random()\r\nदर्शाता है।\r\n\r\nजब उपयोगकर्ता माउस बटन दबाता है, तो स्थिति और रंग\r\nवृत्त का अनियमित रूप से परिवर्तन होता है।"},"विवश":{"relativeUrl":"/examples/calculating-values-constrain","description":"\r\nयह उदाहरण कर्सर की स्थिति के अनुसार एक वृत्त खींचता है\r\nवृत्त को एक आयत के भीतर रखता है। यह पारित करके ऐसा करता है\r\nमाउस के निर्देशांक में\r\n
constrain()\r\nफंक्शन।\r\n"},"घड़ी":{"relativeUrl":"/examples/calculating-values-clock","description":"\r\nइन फंक्शन से वर्तमान समय पढ़ा जा सकता है\r\n
second(),\r\n
minute(),\r\nand
hour()\r\nयह उदाहरण उपयोग करता है\r\n
map()\r\nहाथों के कोण की गणना करने के लिए. इसके बाद उपयोग होता है\r\n
transformations\r\nउनकी स्थिति निर्धारित करने के लिए."},"रंग अंतर्वेशन":{"relativeUrl":"/examples/repetition-color-interpolation","description":"\r\n
Interpolation\r\nदो अन्य मानों के बीच मान की गणना करता है। उदाहरण के लिए, संख्या 5 है\r\n0 और 10 के मध्य। विभिन्न प्रकार के प्रक्षेप उपयोग\r\nमूल्यों के बीच परिवर्तन की विभिन्न दरें। रेखिक आंतरिक,\r\nजिसे संक्षेप में एलआरपी कहा जाता है, परिवर्तन की निरंतर दर का उपयोग करता है।\r\n
lerp()\r\nफ़ंक्शन दो संख्याओं के बीच रैखिक रूप से अंतरण करता है।\r\n
lerpColor()\r\nफ़ंक्शन, यहां प्रदर्शित किया गया है, दो रंगों के बीच रैखिक रूप से अंतरण करता है।\r\nइस उदाहरण में, स्ट्राइपकाउंट वैरिएबल कितने क्षैतिज को समायोजित करता है\r\nधारियाँ दिखाई देती हैं. मान को अधिक संख्या पर सेट करने से वह कम दिखाई देगी\r\nअलग-अलग धारियों की तरह और एक ढाल की तरह।"},"रंग पहिया":{"relativeUrl":"/examples/repetition-color-wheel","description":"\r\nयह उदाहरण भिन्न-भिन्न रंग की उपस्थिति को दर्शाता है\r\nयह एक का उपयोग करता है\r\n
for loop\r\nपरिवर्तनों को दोहराने के लिए. लूप प्रारंभ होता है\r\nएक चर जिसे कोण कहा जाता है, जो वृत्त के घूर्णन को इस प्रकार बदलता है\r\nसाथ ही उसका रंग भी. हर बार जब लूप दोहराया जाता है, तो एक वृत्त खींचा जाता है\r\nकैनवास के केंद्र के सापेक्ष.\r\n
push()\r\nऔर
pop()\r\nफ़ंक्शंस इन परिवर्तनों को केवल व्यक्तिगत सर्कल को प्रभावित करते हैं।\r\n"},"बेज़ियर":{"relativeUrl":"/examples/repetition-bezier","description":"\r\n
bezier() \r\nनियंत्रण और एंकर बिंदुओं का उपयोग करके वक्र बनाए जाते हैं।\r\nके लिए पहले दो पैरामीटर\r\n
bezier()\r\nफ़ंक्शन वक्र में पहला बिंदु और अंतिम दो पैरामीटर निर्दिष्ट करता है\r\nअंतिम बिंदु निर्दिष्ट करें. मध्य पैरामीटर नियंत्रण बिंदु निर्धारित करते हैं\r\nवक्र के आकार को परिभाषित करें."},"बहुरूपदर्शक":{"relativeUrl":"/examples/repetition-kaleidoscope","description":"\r\nबहुरूपदर्शक दो या दो से अधिक वाला एक ऑप्टिकल उपकरण है\r\nपरावर्तक सतहें एक दूसरे से एक कोण पर झुकी हुई होती हैं। का उपयोग\r\n
translate(),\r\n
rotate(),\r\nऔर
scale() फ़ंक्शन, आप परिणामी दृश्य को दोहरा सकते हैं\r\nएक कैनवास में बहुरूपदर्शक का."},"शोर":{"relativeUrl":"/examples/repetition-noise","description":"\r\n
Perlin noise\r\nकेन पेरलिन द्वारा लिखित एक एल्गोरिदम है जो दोनों प्रकार के अनुक्रम उत्पन्न करता है\r\nयादृच्छिक और जैविक.\r\n
शोर()\r\np5 में फ़ंक्शन पर्लिन शोर उत्पन्न करता है।\r\n\r\nइस उदाहरण में बिंदुओं का आकार शोर मानों के आधार पर किया गया है। स्लाइडर पर\r\nबाएँ बिंदुओं के बीच की दूरी निर्धारित करता है। दाईं ओर का स्लाइडर ऑफसेट सेट करता है\r\nशोर गणना में."},"पुनरावर्ती वृक्ष":{"relativeUrl":"/examples/repetition-recursive-tree","description":"\r\nयह रिकर्सन के माध्यम से एक सरल पेड़ जैसी संरचना प्रस्तुत करने का एक उदाहरण है।\r\nशाखा कोण की गणना क्षैतिज माउस के फ़ंक्शन के रूप में की जाती है\r\nजगह। कोण बदलने के लिए माउस को बाएँ और दाएँ घुमाएँ।\r\nप्रोसेसिंग के लिए डैनियल शिफमैन के
Recursive tree example पर आधारित।\r\n"},"यादृच्छिक कविता":{"relativeUrl":"/examples/listing-data-with-arrays-random-poetry","description":"\r\n
floor()\r\nऔर\r\n
random()\r\nफ़ंक्शंस, का उपयोग\r\nआप किसी सरणी से यादृच्छिक रूप से आइटमों की एक श्रृंखला का चयन कर सकते हैं\r\nऔर उन्हें कैनवास पर विभिन्न आकारों और स्थानों पर बनाएं।"},"साइन और कोसाइन":{"relativeUrl":"/examples/angles-and-motion-sine-cosine","description":"\r\nयह उदाहरण दर्शाता है\r\n
sine and cosine\r\nगणितीय कार्य.\r\n\r\nएनीमेशन यूनिट सर्कल के चारों ओर एक समान गोलाकार गति दिखाता है\r\n(त्रिज्या 1 वाला वृत्त)। x-अक्ष से मापा गया कोई भी कोण\r\nवृत्त पर एक बिंदु निर्धारित करता है। कोण की कोज्या और ज्या\r\nको क्रमशः x और y निर्देशांक के रूप में परिभाषित किया गया है\r\nबिंदु।"},"उद्देश्य":{"relativeUrl":"/examples/angles-and-motion-aim","description":"\r\n
atan2()\r\nफ़ंक्शन दो स्थितियों के बीच के कोण की गणना करता है। यह कोण\r\nगणना का उपयोग किसी आकृति को किसी चीज़ की ओर घुमाने के लिए किया जा सकता है। इस में\r\nउदाहरण के लिए, आंखें कर्सर को देखने के लिए घूमती हैं।"},"त्रिकोण पट्टी":{"relativeUrl":"/examples/angles-and-motion-triangle-strip","description":"\r\nयह उदाहरण दर्शाता है कि आकृति कैसे बनाई जाती है\r\nका उपयोग करके, इसके शीर्षों को TRIANGLE_STRIP मोड में निर्दिष्ट करके\r\n
beginShape(),\r\n
endShape(),\r\nऔर\r\n
vertex()\r\nकार्य."},"सर्कल क्लिकर":{"relativeUrl":"/examples/games-circle-clicker","description":"\r\nयह उदाहरण एक खेल को समय सीमा और स्कोर के साथ प्रदर्शित करता है। ब्राउज़र का\r\n
local storage\r\nउच्च स्कोर को संग्रहीत करता है ताकि जब गेम उसी ब्राउज़र का उपयोग करके दोबारा खेला जाए,\r\nउच्च स्कोर बना हुआ है. ब्राउज़र डेटा साफ़ करने से उच्च स्कोर भी साफ़ हो जाता है।"},"पिंग पोंग":{"relativeUrl":"/examples/games-ping-pong","description":"\r\nयह सबसे पुराने आर्केड वीडियो में से एक से प्रेरित गेम है\r\nखेल: अटारी\r\n
pong।\r\nइस दो-खिलाड़ियों के खेल में, प्रत्येक खिलाड़ी एक पैडल को नियंत्रित करता है, जिसे a द्वारा दर्शाया जाता है\r\nसफ़ेद आयत. W और S कुंजियाँ बाईं ओर के पैडल को ऊपर और नीचे घुमाती हैं,\r\nऔर ऊपर और नीचे तीर कुंजियाँ पैडल को दाईं ओर ऊपर और नीचे घुमाती हैं।\r\nखिलाड़ी गेंद को उछालकर अंक अर्जित करते हैं, जिसे एक सफेद वर्ग द्वारा दर्शाया जाता है,\r\nकैनवास के प्रतिद्वंद्वी पक्ष के किनारे से आगे निकलें।`"},"साँप":{"relativeUrl":"/examples/games-snake","description":"\r\nयह एक प्रकार के आर्केड गेम का पुनरुत्पादन है जिसे कहा जाता है\r\n
snake।\r\nपहला स्नेक गेम नाकाबंदी था, जो 1976 में जारी किया गया था, और कई\r\nगेम समान संरचना का उपयोग करते हैं. स्नेक गेम्स में, खिलाड़ी नियंत्रण करता है\r\nइस उदाहरण में साँप की गतिविधियों को हरे रंग से दर्शाया गया है\r\nरेखा। खिलाड़ी का लक्ष्य साँप को एक फल से टकराना है,\r\nएक लाल बिंदु द्वारा दर्शाया गया। हर बार सांप किसी फल से टकराता है,\r\nसाँप लम्बा हो जाता है। खिलाड़ी का लक्ष्य साँप को उतना बड़ा करना है\r\nजितना संभव हो सांप को अपने आप से या किनारों से टकराए बिना\r\nखेल क्षेत्र का.\r\n\r\nयह उदाहरण एक सारणी का उपयोग करता है\r\n
vector\r\nसाँप के प्रत्येक खंड की स्थिति को संग्रहीत करने के लिए। तीर\r\nचाबियाँ साँप की गति को नियंत्रित करती हैं।"},"ज्योमेट्री":{"relativeUrl":"/examples/3d-geometries","description":"\r\np5 के
WEBGL \r\nमोड में 7 आदिम आकार शामिल हैं। वे आकृतियाँ समतल, बॉक्स, बेलन, शंकु, टोरस, गोला और दीर्घवृत्ताभ हैं। इसके अतिरिक्त, \r\n
model() के माध्यम से लोड की गई एक कस्टम ज्यामिति प्रदर्शित करता है\r\n
loadModel()। \r\nइस उदाहरण में प्रत्येक आदिम आकृतियाँ शामिल हैं। इसमें
NASA के संग्रह से एक मॉडल भी शामिल है।"},"कस्टम ज्यामिति":{"relativeUrl":"/examples/3d-custom-geometry","description":"\r\n
buildGeometry() \r\nफ़ंक्शन आकृतियों को एक 3D मॉडल में संग्रहीत करता है जिसे कुशलतापूर्वक उपयोग और पुन: उपयोग किया जा सकता है।"},"सामग्री":{"relativeUrl":"/examples/3d-materials","description":"\r\n3डी रेंडरिंग में, एक सामग्री यह निर्धारित करती है कि कोई सतह प्रकाश के प्रति कैसी प्रतिक्रिया करती है। p5 का
WEBGL मोड सपोर्ट करता है\r\n
परिवेश,\r\n
उत्सर्जक,\r\n
सामान्य, और\r\n
स्पेक्युलर\r\nसामग्री.\r\n\r\nएक परिवेशीय सामग्री केवल परिवेशी प्रकाश के प्रति प्रतिक्रिया करती है। एक स्पेक्युलर\r\nसामग्री किसी भी प्रकाश स्रोत पर प्रतिक्रिया करती है। पी5 में, एक उत्सर्जक पदार्थ\r\nप्रकाश स्रोत की परवाह किए बिना अपना रंग प्रदर्शित करता है। अन्य सन्दर्भों में,\r\nआमतौर पर एक उत्सर्जक पदार्थ प्रकाश उत्सर्जित करता है। एक सामान्य सामग्री\r\nसतह के प्रत्येक भाग की दिशा की कल्पना करता है। एक सामान्य\r\nसामग्री प्रकाश के प्रति प्रतिक्रिया नहीं करती।\r\n\r\nपरिवेशी और उत्सर्जक सामग्रियों को एक दूसरे के साथ जोड़ा जा सकता है।\r\nइन्हें फिल और स्ट्रोक के साथ भी जोड़ा जा सकता है। भरण एक आधार सेट करता है\r\nसतह के लिए रंग, और स्ट्रोक वस्तु के लिए रंग निर्धारित करता है\r\nशिखर.\r\n\r\nइसके अतिरिक्त,\r\n
texture()\r\nकिसी वस्तु को छवि के साथ लपेटता है। इस उदाहरण में मॉडल और छवि बनावट हैं
NASA के संग्रह से।."},"कक्षा नियंत्रण":{"relativeUrl":"/examples/3d-orbit-control","description":"\r\n
कक्षा नियंत्रण\r\n3D में कैमरा ओरिएंटेशन को समायोजित करने के लिए माउस या टच इनपुट का उपयोग करता है\r\nस्केच. कैमरा घुमाने के लिए, माउस पर बायाँ-क्लिक करें और खींचें या स्वाइप करें\r\nएक टच स्क्रीन पर. कैमरे को पैन करने के लिए, राइट क्लिक करें और माउस खींचें\r\nया टच स्क्रीन पर एकाधिक अंगुलियों से स्वाइप करें। कैमरा हिलाने के लिए\r\nस्केच के केंद्र के करीब या आगे, स्क्रॉल व्हील का उपयोग करें\r\nमाउस पर या टच स्क्रीन पर पिंच इन/आउट करें।"},"फ़िल्टर शेडर":{"relativeUrl":"/examples/3d-filter-shader","description":"\r\nफ़िल्टर शेडर्स किसी भी चीज़ पर प्रभाव लागू करने का एक तरीका है\r\nकैनवास पर है. इस उदाहरण में, प्रभाव एक वीडियो पर लागू किया जाता है।"},"शेडर के साथ स्थितियों को समायोजित करना":{"relativeUrl":"/examples/3d-adjusting-positions-with-a-shader","description":"\r\nशेडर्स आकृतियों के शीर्षों की स्थिति को समायोजित कर सकते हैं।\r\nयह आपको 3D मॉडल को विकृत और चेतन करने देता है।"},"फ़्रेमबफ़र धुंधला":{"relativeUrl":"/examples/3d-framebuffer-blur","description":"\r\nइस उदाहरण में
shader ब्लर लगाने के लिए \r\n
p5.Framebuffer से गहराई से जानकारी का उपयोग करता है। वास्तविक कैमरे पर, वस्तुएँ धुंधली दिखाई देती हैं यदि वे लेंस के फोकस से अधिक निकट या दूर हों। यह उस प्रभाव का अनुकरण करता है. सबसे पहले, स्केच फ़्रेमबफ़र को पांच गोले प्रदान करता है। फिर, \r\nयह ब्लर शेडर का उपयोग करके फ़्रेमबफ़र को कैनवास पर प्रस्तुत करता है।"},"ग्राफ़िक्स बनाएं":{"relativeUrl":"/examples/advanced-canvas-rendering-create-graphics","description":"\r\n
createGraphics()\r\nफ़ंक्शन का उपयोग एक नया p5.Graphics ऑब्जेक्ट बनाने के लिए किया जा सकता है, जो कैनवास के भीतर एक ऑफ-स्क्रीन ग्राफिक्स बफर के रूप में काम कर सकता है। \r\nऑफ-स्क्रीन बफ़र्स के आयाम और गुण उनकी वर्तमान डिस्प्ले सतह से भिन्न हो सकते हैं, भले ही वे एक ही स्थान पर मौजूद प्रतीत होते हों।"},"एकाधिक कैनवस":{"relativeUrl":"/examples/advanced-canvas-rendering-multiple-canvases","description":"\r\nडिफ़ॉल्ट रूप से, p5 ग्लोबल मोड में चलता है, जिसका अर्थ है\r\nसभी p5 फ़ंक्शंस वैश्विक दायरे में हैं, और सभी कैनवास-संबंधित फ़ंक्शंस\r\nएक ही कैनवास पर लागू करें. p5 इंस्टेंस मोड में भी चल सकता है, जिसमें वे\r\nसमान फ़ंक्शन p5 वर्ग के उदाहरण की विधियाँ हैं। प्रत्येक उदाहरण\r\np5 का अपना कैनवास हो सकता है.\r\n\r\nइंस्टेंस मोड का उपयोग करने के लिए, एक फ़ंक्शन को प्रतिनिधित्व करने वाले पैरामीटर के साथ परिभाषित किया जाना चाहिए\r\np5 उदाहरण (इस उदाहरण में p लेबल किया गया है)। सभी p5 फ़ंक्शंस और वेरिएबल्स\r\nजो आम तौर पर वैश्विक हैं वे इस फ़ंक्शन के भीतर इस पैरामीटर से संबंधित होंगे\r\nदायरा। फ़ंक्शन को p5 कंस्ट्रक्टर में पास करके, उसे चलाता है।"},"एक बनावट के रूप में शेडर":{"relativeUrl":"/examples/advanced-canvas-rendering-shader-as-a-texture","description":"\r\nशेडर्स को टेक्सचर के रूप में 2D/3D आकृतियों पर लागू किया जा सकता है।\r\n\r\nP5.js में शेडर्स का उपयोग करने के बारे में अधिक जानने के लिए:\r\n
p5.js Shaders"},"बर्फ के टुकड़े":{"relativeUrl":"/examples/classes-and-objects-snowflakes","description":"\r\nयह उदाहरण कण प्रणाली के उपयोग को प्रदर्शित करता है\r\nगिरते बर्फ के टुकड़ों की गति का अनुकरण करने के लिए। यह प्रोग्राम एक को परिभाषित करता है\r\nस्नोफ्लेक
class\r\nऔर बर्फ के टुकड़े वाली वस्तुओं को रखने के लिए एक सरणी का उपयोग करता है।"},"शेक बॉल बाउंस":{"relativeUrl":"/examples/classes-and-objects-shake-ball-bounce","description":"\r\n
class का उपयोग करके, आप उन वृत्तों का एक संग्रह\r\nबना सकते हैं जो कैनवास के भीतर चलते हैं मोबाइल डिवाइस का झुकाव. स्केच प्रदर्शित करने के लिए आपको यह पृष्ठ मोबाइल डिवाइस पर खोलना होगा।"},"जुड़े हुए कण":{"relativeUrl":"/examples/classes-and-objects-connected-particles","description":"\r\nयह उदाहरण दो कस्टम
Classes का उपयोग करता है।\r\nकण वर्ग स्थिति, वेग और रंग को संग्रहीत करता है। यह प्रस्तुत करता है\r\nवर्तमान स्थिति और रंग का उपयोग करके एक वृत्त, और यह अद्यतन करता है\r\nवर्तमान वेग का उपयोग कर स्थिति. पथ वर्ग एक सरणी संग्रहीत करता है\r\nकण वर्ग से निर्मित वस्तुओं की। यह पंक्तियाँ प्रस्तुत करता है\r\nप्रत्येक कण को जोड़ना। जब उपयोगकर्ता माउस पर क्लिक करता है\r\nस्केच पथ वर्ग का एक नया उदाहरण बनाता है। जब उपयोगकर्ता खींचता है\r\nमाउस, स्केच कण वर्ग का एक नया उदाहरण जोड़ता है\r\nवर्तमान पथ."},"झुंड बनाना":{"relativeUrl":"/examples/classes-and-objects-flocking","description":"\r\nझुंड के व्यवहार का प्रदर्शन. कार्यान्वयन की पूरी चर्चा डेनियल शिफ़मैन की
Nature of Code पुस्तक में पाई जा सकती है। सिमुलेशन
क्रेग रेनॉल्ड्स \r\nके शोध पर आधारित है, जिन्होंने पक्षी जैसी वस्तु का प्रतिनिधित्व करने के लिए 'बॉइड' शब्द का इस्तेमाल किया था।"},"स्थानीय भंडारण":{"relativeUrl":"/examples/loading-and-saving-data-local-storage","description":"\nब्राउज़र वेबसाइटों को विज़िटर का डेटा संग्रहीत करने की अनुमति देते हैं\nउपकरण। यह कहा जाता है\n
local storage.\n
getItem(),\n
storeItem(),\n
clearStorage(),\nand
removeItem()\nफ़ंक्शन इसे नियंत्रित करते हैं.\n\nयह उदाहरण जावा में लिखे डैनियल शिफमैन के लोडिंग JSON डेटा और प्रोसेसिंग के लिए सारणीबद्ध डेटा उदाहरणों को लोड करने से प्रेरित है। \nयह बबल के लिए डेटा व्यवस्थित करने के लिए
class\nका उपयोग करता है। विज़िटर नए बबल जोड़ सकते हैं, और उनका डेटा स्थानीय संग्रहण में सहेजा जाएगा। यदि आगंतुक स्केच को दोबारा देखता है, तो वह उसी बुलबुले को फिर से लोड करेगा।"},"JSON":{"relativeUrl":"/examples/loading-and-saving-data-json","description":"\n
जावास्क्रिप्ट ऑब्जेक्ट नोटेशन, या JSON,\n एक प्रारूप है किसी फ़ाइल में डेटा लिखना. जबकि सिंटैक्स जावास्क्रिप्ट से आता है, JSON का उपयोग कई अन्य संदर्भों में किया जाता है। \n यह उदाहरण जावा में लिखे डैनियल शिफमैन के लोडिंग JSON डेटा उदाहरण फॉर प्रोसेसिंग पर आधारित है। यह एक \n
class का उपयोग करता है\nएक बुलबुले के लिए डेटा व्यवस्थित करने के लिए। जब स्केच शुरू होता है, तो यह JSON फ़ाइल से दो बबल के लिए डेटा लोड करता है। \nविज़िटर नए बबल जोड़ सकता है, एक अद्यतन JSON फ़ाइल डाउनलोड कर सकता है और JSON फ़ाइल में लोड कर सकता है।"},"तालिका":{"relativeUrl":"/examples/loading-and-saving-data-table","description":"\nकॉमा-सेपरेटेड वैल्यूज़, या सीएसवी, फ़ाइल में डेटा लिखने का एक प्रारूप है। p5 \n
p5.Table \nका उपयोग करके इस प्रारूप के साथ काम कर सकता है। यह उदाहरण प्रोसेसिंग के लिए डेनियल शिफमैन के \n
Loading Tabular Data \nउदाहरण पर आधारित है। यह बुलबुले का प्रतिनिधित्व करने वाले डेटा को व्यवस्थित करने के लिए एक वर्ग का उपयोग करता है। जब स्केच शुरू होता है, \nतो यह CSV फ़ाइल से चार बबल के लिए डेटा लोड करता है। विज़िटर नए बबल जोड़ सकता है, अद्यतन CSV फ़ाइल डाउनलोड कर सकता है और CSV फ़ाइल में लोड कर सकता है।"},"गैर-ऑर्थोगोनल प्रतिबिंब":{"relativeUrl":"/examples/math-and-physics-non-orthogonal-reflection","description":"\nयह उदाहरण एक गेंद को तिरछी दिशा में उछलते हुए दर्शाता है\nसतह, प्रतिबिंब के लिए वेक्टर गणनाओं का उपयोग करके कार्यान्वित की गई।\n\nकोड का व्यापक उपयोग होता है\n
p5.Vector\nवर्ग, सहित\n
createVector() नए वेक्टर बनाने के लिए फ़ंक्शन,\nऔर वेक्टर विधियाँ\n
add()\nऔर\n
dot()\nवेक्टर गणना के लिए."},"नरम शरीर":{"relativeUrl":"/examples/math-and-physics-soft-body","description":"\nनरम शरीर के अनुभव का भौतिकी अनुकरण\nमाउस की स्थिति की ओर त्वरण। आकृति निर्मित होती है\n
curveVertex() का उपयोग करके वक्रों के साथ\nऔर
curveTightness()।"},"ताकतों":{"relativeUrl":"/examples/math-and-physics-forces","description":"\nपिंडों पर कार्य करने वाली अनेक शक्तियों का प्रदर्शन।\nपिंड लगातार गुरुत्वाकर्षण का अनुभव करते हैं। शरीर में तरल पदार्थ का अनुभव होता है\n\"पानी\" में होने पर प्रतिरोध।\n(
natureofcode.com)\n\nबल की गणना का उपयोग करके की जाती है\n
p5.Vector\nक्लास, जिसमें वेक्टर बनाने के लिए
createVector() फ़ंक्शन शामिल है।"},"धुएँ के कण":{"relativeUrl":"/examples/math-and-physics-smoke-particle-system","description":"\n\nस्मोक पार्टिकल सिस्टम डेमो, प्रसंस्करण के लिए डैन शिफमैन के मूल
उदाहरण पर आधारित है। कोड का उपयोग करता है\n
p5.Vector\nक्लास, जिसमें
createVector() फ़ंक्शन शामिल है। कणों को अद्यतन करने के लिए विभिन्न गणनाएँ'\nस्थिति और वेग p5.वेक्टर विधियों से निष्पादित किए जाते हैं। कण प्रणाली को एक
वर्ग के रूप में कार्यान्वित किया जाता है, जिसमें वस्तुओं की एक सरणी होती है (वर्ग कण की)।"},"Game of Life":{"relativeUrl":"/examples/math-and-physics-game-of-life","description":"\nद गेम ऑफ लाइफ गणितज्ञ जॉन कॉनवे द्वारा बनाया गया एक सेलुलर ऑटोमेटन है। सेल्युलर ऑटोमेटन एक प्रकार का अनुकरण है। \nजीवन के खेल में, कोशिकाओं का एक ग्रिड होता है जिसमें प्रत्येक कोशिका या तो मृत होती है या जीवित होती है। इस उदाहरण में, \nकाले वर्ग जीवित कोशिकाओं का प्रतिनिधित्व करते हैं और सफेद वर्ग मृत कोशिकाओं का प्रतिनिधित्व करते हैं। जैसे-जैसे सिमुलेशन चलता है, \nकोशिकाएं नियमों के एक सेट के आधार पर मृत और जीवित होने के बीच स्विच करती हैं:\n
\n - दो से कम जीवित पड़ोसियों वाली कोई भी जीवित कोशिका मर जाती है।
\n - तीन से अधिक जीवित पड़ोसियों वाली कोई भी जीवित कोशिका मर जाती है।
\n - दो या तीन जीवित पड़ोसियों के साथ कोई भी जीवित कोशिका अपरिवर्तित रहती है,\nअगली पीढ़ी के लिए.
\n - ठीक तीन जीवित पड़ोसियों वाली कोई भी मृत कोशिका जीवित हो जाएगी।
\n
\nये नियम जटिल अंतःक्रियाएँ उत्पन्न करते हैं। आरंभ करने के लिए कैनवास पर क्लिक करें\nयादृच्छिक कोशिकाओं के साथ अनुकरण। कैनवास पर फिर से क्लिक करना होगा\nइसे पुनः आरंभ करें."},"Mandelbrot Set":{"relativeUrl":"/examples/math-and-physics-mandelbrot","description":"\nडैनियल शिफ़मैन के आधार पर मैंडेलब्रॉट सेट का रंगीन प्रतिपादन प्रसंस्करण के लिए
मैंडेलब्रॉट उदाहरण।"}},"reference":{"Array":{"relativeUrl":"/reference/p5/Array"},"abs()":{"relativeUrl":"/reference/p5/abs","alias":"abs"},"acos()":{"relativeUrl":"/reference/p5/acos","alias":"acos"},"alpha()":{"relativeUrl":"/reference/p5/alpha","alias":"alpha"},"ambientLight()":{"relativeUrl":"/reference/p5/ambientLight","alias":"ambientLight"},"ambientMaterial()":{"relativeUrl":"/reference/p5/ambientMaterial","alias":"ambientMaterial"},"angleMode()":{"relativeUrl":"/reference/p5/angleMode","alias":"angleMode"},"applyMatrix()":{"relativeUrl":"/reference/p5/applyMatrix","alias":"applyMatrix"},"arc()":{"relativeUrl":"/reference/p5/arc","alias":"arc"},"asin()":{"relativeUrl":"/reference/p5/asin","alias":"asin"},"atan()":{"relativeUrl":"/reference/p5/atan","alias":"atan"},"atan2()":{"relativeUrl":"/reference/p5/atan2","alias":"atan2"},"background()":{"relativeUrl":"/reference/p5/background","alias":"background"},"beginClip()":{"relativeUrl":"/reference/p5/beginClip","alias":"beginClip"},"beginContour":{"relativeUrl":"/reference/p5/beginContour"},"beginGeometry":{"relativeUrl":"/reference/p5/beginGeometry"},"beginShape":{"relativeUrl":"/reference/p5/beginShape"},"bezier":{"relativeUrl":"/reference/p5/bezier"},"bezierDetail":{"relativeUrl":"/reference/p5/bezierDetail"},"bezierPoint":{"relativeUrl":"/reference/p5/bezierPoint"},"bezierTangent":{"relativeUrl":"/reference/p5/bezierTangent"},"bezierVertex":{"relativeUrl":"/reference/p5/bezierVertex"},"blend()":{"relativeUrl":"/reference/p5/blend","alias":"blend"},"blue()":{"relativeUrl":"/reference/p5/blue","alias":"blue"},"boolean()":{"relativeUrl":"/reference/p5/boolean","alias":"boolean"},"box":{"relativeUrl":"/reference/p5/box"},"brightness()":{"relativeUrl":"/reference/p5/brightness","alias":"brightness"},"buildGeometry":{"relativeUrl":"/reference/p5/buildGeometry"},"camera()":{"relativeUrl":"/reference/p5/camera","alias":"camera"},"ceil()":{"relativeUrl":"/reference/p5/ceil","alias":"ceil"},"changed()":{"relativeUrl":"/reference/p5/changed","alias":"changed"},"circle()":{"relativeUrl":"/reference/p5/circle","alias":"circle"},"class":{"relativeUrl":"/reference/p5/class"},"clear()":{"relativeUrl":"/reference/p5/clear","alias":"clear"},"clip()":{"relativeUrl":"/reference/p5/clip","alias":"clip"},"color()":{"relativeUrl":"/reference/p5/color","alias":"color"},"colorMode()":{"relativeUrl":"/reference/p5/colorMode","alias":"colorMode"},"cone":{"relativeUrl":"/reference/p5/cone"},"DEGREES":{"relativeUrl":"/reference/p5/DEGREES"},"HALF_PI":{"relativeUrl":"/reference/p5/HALF_PI"},"PI":{"relativeUrl":"/reference/p5/PI"},"QUARTER_PI":{"relativeUrl":"/reference/p5/QUARTER_PI"},"RADIANS":{"relativeUrl":"/reference/p5/RADIANS"},"TAU":{"relativeUrl":"/reference/p5/TAU"},"TWO_PI":{"relativeUrl":"/reference/p5/TWO_PI"},"constrain()":{"relativeUrl":"/reference/p5/constrain","alias":"constrain"},"copy()":{"relativeUrl":"/reference/p5/copy","alias":"copy"},"cos()":{"relativeUrl":"/reference/p5/cos","alias":"cos"},"createA":{"relativeUrl":"/reference/p5/createA"},"createAudio":{"relativeUrl":"/reference/p5/createAudio"},"createButton":{"relativeUrl":"/reference/p5/createButton"},"createCamera()":{"relativeUrl":"/reference/p5/createCamera","alias":"createCamera"},"createCapture":{"relativeUrl":"/reference/p5/createCapture"},"createCheckbox":{"relativeUrl":"/reference/p5/createCheckbox"},"createColorPicker":{"relativeUrl":"/reference/p5/createColorPicker"},"createDiv":{"relativeUrl":"/reference/p5/createDiv"},"createElement":{"relativeUrl":"/reference/p5/createElement"},"createFileInput":{"relativeUrl":"/reference/p5/createFileInput"},"createFilterShader()":{"relativeUrl":"/reference/p5/createFilterShader","alias":"createFilterShader"},"createImage()":{"relativeUrl":"/reference/p5/createImage","alias":"createImage"},"createImg":{"relativeUrl":"/reference/p5/createImg"},"createInput":{"relativeUrl":"/reference/p5/createInput"},"createP":{"relativeUrl":"/reference/p5/createP"},"createRadio":{"relativeUrl":"/reference/p5/createRadio"},"createSelect":{"relativeUrl":"/reference/p5/createSelect"},"createShader()":{"relativeUrl":"/reference/p5/createShader","alias":"createShader"},"createSlider":{"relativeUrl":"/reference/p5/createSlider"},"createSpan":{"relativeUrl":"/reference/p5/createSpan"},"createVector()":{"relativeUrl":"/reference/p5/createVector","alias":"createVector"},"createVideo":{"relativeUrl":"/reference/p5/createVideo"},"cursor()":{"relativeUrl":"/reference/p5/cursor","alias":"cursor"},"curve":{"relativeUrl":"/reference/p5/curve"},"curveDetail":{"relativeUrl":"/reference/p5/curveDetail"},"curvePoint":{"relativeUrl":"/reference/p5/curvePoint"},"curveTangent":{"relativeUrl":"/reference/p5/curveTangent"},"curveTightness":{"relativeUrl":"/reference/p5/curveTightness"},"curveVertex()":{"relativeUrl":"/reference/p5/curveVertex","alias":"curveVertex"},"cylinder":{"relativeUrl":"/reference/p5/cylinder"},"debugMode()":{"relativeUrl":"/reference/p5/debugMode","alias":"debugMode"},"degrees()":{"relativeUrl":"/reference/p5/degrees","alias":"degrees"},"deltaTime":{"relativeUrl":"/reference/p5/deltaTime"},"describe()":{"relativeUrl":"/reference/p5/describe","alias":"describe"},"describeElement()":{"relativeUrl":"/reference/p5/describeElement","alias":"describeElement"},"directionalLight()":{"relativeUrl":"/reference/p5/directionalLight","alias":"directionalLight"},"displayDensity()":{"relativeUrl":"/reference/p5/displayDensity","alias":"displayDensity"},"displayHeight":{"relativeUrl":"/reference/p5/displayHeight"},"displayWidth":{"relativeUrl":"/reference/p5/displayWidth"},"dist()":{"relativeUrl":"/reference/p5/dist","alias":"dist"},"doubleClicked()":{"relativeUrl":"/reference/p5/doubleClicked","alias":"doubleClicked"},"ellipse()":{"relativeUrl":"/reference/p5/ellipse","alias":"ellipse"},"ellipseMode()":{"relativeUrl":"/reference/p5/ellipseMode","alias":"ellipseMode"},"ellipsoid":{"relativeUrl":"/reference/p5/ellipsoid"},"emissiveMaterial()":{"relativeUrl":"/reference/p5/emissiveMaterial","alias":"emissiveMaterial"},"endClip()":{"relativeUrl":"/reference/p5/endClip","alias":"endClip"},"endContour":{"relativeUrl":"/reference/p5/endContour"},"endGeometry":{"relativeUrl":"/reference/p5/endGeometry"},"endShape":{"relativeUrl":"/reference/p5/endShape"},"erase()":{"relativeUrl":"/reference/p5/erase","alias":"erase"},"exitPointerLock()":{"relativeUrl":"/reference/p5/exitPointerLock","alias":"exitPointerLock"},"exp()":{"relativeUrl":"/reference/p5/exp","alias":"exp"},"filter()":{"relativeUrl":"/reference/p5/filter","alias":"filter"},"floor()":{"relativeUrl":"/reference/p5/floor","alias":"floor"},"focused":{"relativeUrl":"/reference/p5/focused"},"for":{"relativeUrl":"/reference/p5/for"},"fract()":{"relativeUrl":"/reference/p5/fract","alias":"fract"},"frameCount":{"relativeUrl":"/reference/p5/frameCount"},"frameRate()":{"relativeUrl":"/reference/p5/frameRate","alias":"frameRate"},"freeGeometry":{"relativeUrl":"/reference/p5/freeGeometry"},"frustum()":{"relativeUrl":"/reference/p5/frustum","alias":"frustum"},"fullscreen()":{"relativeUrl":"/reference/p5/fullscreen","alias":"fullscreen"},"function":{"relativeUrl":"/reference/p5/function"},"get()":{"relativeUrl":"/reference/p5/get","alias":"get"},"getTargetFrameRate()":{"relativeUrl":"/reference/p5/getTargetFrameRate","alias":"getTargetFrameRate"},"getURL()":{"relativeUrl":"/reference/p5/getURL","alias":"getURL"},"getURLParams()":{"relativeUrl":"/reference/p5/getURLParams","alias":"getURLParams"},"getURLPath()":{"relativeUrl":"/reference/p5/getURLPath","alias":"getURLPath"},"green()":{"relativeUrl":"/reference/p5/green","alias":"green"},"gridOutput()":{"relativeUrl":"/reference/p5/gridOutput","alias":"gridOutput"},"height":{"relativeUrl":"/reference/p5/height"},"hue()":{"relativeUrl":"/reference/p5/hue","alias":"hue"},"if":{"relativeUrl":"/reference/p5/if"},"image()":{"relativeUrl":"/reference/p5/image","alias":"image"},"imageLight()":{"relativeUrl":"/reference/p5/imageLight","alias":"imageLight"},"imageMode()":{"relativeUrl":"/reference/p5/imageMode","alias":"imageMode"},"input()":{"relativeUrl":"/reference/p5/input","alias":"input"},"key":{"relativeUrl":"/reference/p5/key"},"keyCode":{"relativeUrl":"/reference/p5/keyCode"},"keyIsDown()":{"relativeUrl":"/reference/p5/keyIsDown","alias":"keyIsDown"},"keyIsPressed":{"relativeUrl":"/reference/p5/keyIsPressed"},"keyPressed()":{"relativeUrl":"/reference/p5/keyPressed","alias":"keyPressed"},"keyReleased()":{"relativeUrl":"/reference/p5/keyReleased","alias":"keyReleased"},"keyTyped()":{"relativeUrl":"/reference/p5/keyTyped","alias":"keyTyped"},"lerp()":{"relativeUrl":"/reference/p5/lerp","alias":"lerp"},"lerpColor()":{"relativeUrl":"/reference/p5/lerpColor","alias":"lerpColor"},"let":{"relativeUrl":"/reference/p5/let"},"lightFalloff()":{"relativeUrl":"/reference/p5/lightFalloff","alias":"lightFalloff"},"lightness()":{"relativeUrl":"/reference/p5/lightness","alias":"lightness"},"lights()":{"relativeUrl":"/reference/p5/lights","alias":"lights"},"line()":{"relativeUrl":"/reference/p5/line","alias":"line"},"linePerspective()":{"relativeUrl":"/reference/p5/linePerspective","alias":"linePerspective"},"loadFont()":{"relativeUrl":"/reference/p5/loadFont","alias":"loadFont"},"loadImage()":{"relativeUrl":"/reference/p5/loadImage","alias":"loadImage"},"loadModel":{"relativeUrl":"/reference/p5/loadModel"},"loadPixels()":{"relativeUrl":"/reference/p5/loadPixels","alias":"loadPixels"},"loadShader()":{"relativeUrl":"/reference/p5/loadShader","alias":"loadShader"},"log()":{"relativeUrl":"/reference/p5/log","alias":"log"},"mag()":{"relativeUrl":"/reference/p5/mag","alias":"mag"},"map()":{"relativeUrl":"/reference/p5/map","alias":"map"},"max()":{"relativeUrl":"/reference/p5/max","alias":"max"},"metalness()":{"relativeUrl":"/reference/p5/metalness","alias":"metalness"},"min()":{"relativeUrl":"/reference/p5/min","alias":"min"},"model":{"relativeUrl":"/reference/p5/model"},"mouseButton":{"relativeUrl":"/reference/p5/mouseButton"},"mouseClicked()":{"relativeUrl":"/reference/p5/mouseClicked","alias":"mouseClicked"},"mouseDragged()":{"relativeUrl":"/reference/p5/mouseDragged","alias":"mouseDragged"},"mouseIsPressed":{"relativeUrl":"/reference/p5/mouseIsPressed"},"mouseMoved()":{"relativeUrl":"/reference/p5/mouseMoved","alias":"mouseMoved"},"mousePressed()":{"relativeUrl":"/reference/p5/mousePressed","alias":"mousePressed"},"mouseReleased()":{"relativeUrl":"/reference/p5/mouseReleased","alias":"mouseReleased"},"mouseWheel()":{"relativeUrl":"/reference/p5/mouseWheel","alias":"mouseWheel"},"mouseX":{"relativeUrl":"/reference/p5/mouseX"},"mouseY":{"relativeUrl":"/reference/p5/mouseY"},"movedX":{"relativeUrl":"/reference/p5/movedX"},"movedY":{"relativeUrl":"/reference/p5/movedY"},"noCursor()":{"relativeUrl":"/reference/p5/noCursor","alias":"noCursor"},"noDebugMode()":{"relativeUrl":"/reference/p5/noDebugMode","alias":"noDebugMode"},"noErase()":{"relativeUrl":"/reference/p5/noErase","alias":"noErase"},"noFill()":{"relativeUrl":"/reference/p5/noFill","alias":"noFill"},"noLights()":{"relativeUrl":"/reference/p5/noLights","alias":"noLights"},"noSmooth()":{"relativeUrl":"/reference/p5/noSmooth","alias":"noSmooth"},"noStroke()":{"relativeUrl":"/reference/p5/noStroke","alias":"noStroke"},"noTint()":{"relativeUrl":"/reference/p5/noTint","alias":"noTint"},"noise()":{"relativeUrl":"/reference/p5/noise","alias":"noise"},"noiseDetail()":{"relativeUrl":"/reference/p5/noiseDetail","alias":"noiseDetail"},"noiseSeed()":{"relativeUrl":"/reference/p5/noiseSeed","alias":"noiseSeed"},"norm()":{"relativeUrl":"/reference/p5/norm","alias":"norm"},"normal":{"relativeUrl":"/reference/p5/normal"},"normalMaterial()":{"relativeUrl":"/reference/p5/normalMaterial","alias":"normalMaterial"},"Number":{"relativeUrl":"/reference/p5/number"},"Object":{"relativeUrl":"/reference/p5/object"},"orbitControl()":{"relativeUrl":"/reference/p5/orbitControl","alias":"orbitControl"},"ortho()":{"relativeUrl":"/reference/p5/ortho","alias":"ortho"},"p5.Camera":{"relativeUrl":"/reference/p5/p5.Camera"},"p5.Color":{"relativeUrl":"/reference/p5/p5.Color"},"p5.Element":{"relativeUrl":"/reference/p5/p5.Element"},"p5.File":{"relativeUrl":"/reference/p5/p5.File"},"p5.Font":{"relativeUrl":"/reference/p5/p5.Font"},"p5.Image":{"relativeUrl":"/reference/p5/p5.Image"},"p5.MediaElement":{"relativeUrl":"/reference/p5/p5.MediaElement"},"p5.Shader":{"relativeUrl":"/reference/p5/p5.Shader"},"p5.Vector":{"relativeUrl":"/reference/p5/p5.Vector"},"panorama()":{"relativeUrl":"/reference/p5/panorama","alias":"panorama"},"perspective()":{"relativeUrl":"/reference/p5/perspective","alias":"perspective"},"pixelDensity()":{"relativeUrl":"/reference/p5/pixelDensity","alias":"pixelDensity"},"pixels":{"relativeUrl":"/reference/p5/pixels"},"plane":{"relativeUrl":"/reference/p5/plane"},"pmouseX":{"relativeUrl":"/reference/p5/pmouseX"},"pmouseY":{"relativeUrl":"/reference/p5/pmouseY"},"point()":{"relativeUrl":"/reference/p5/point","alias":"point"},"pointLight()":{"relativeUrl":"/reference/p5/pointLight","alias":"pointLight"},"pow()":{"relativeUrl":"/reference/p5/pow","alias":"pow"},"print()":{"relativeUrl":"/reference/p5/print","alias":"print"},"pwinMouseX":{"relativeUrl":"/reference/p5/pwinMouseX"},"pwinMouseY":{"relativeUrl":"/reference/p5/pwinMouseY"},"quad()":{"relativeUrl":"/reference/p5/quad","alias":"quad"},"quadraticVertex":{"relativeUrl":"/reference/p5/quadraticVertex"},"radians()":{"relativeUrl":"/reference/p5/radians","alias":"radians"},"random()":{"relativeUrl":"/reference/p5/random","alias":"random"},"randomGaussian()":{"relativeUrl":"/reference/p5/randomGaussian","alias":"randomGaussian"},"randomSeed()":{"relativeUrl":"/reference/p5/randomSeed","alias":"randomSeed"},"rect()":{"relativeUrl":"/reference/p5/rect","alias":"rect"},"rectMode()":{"relativeUrl":"/reference/p5/rectMode","alias":"rectMode"},"red()":{"relativeUrl":"/reference/p5/red","alias":"red"},"removeElements":{"relativeUrl":"/reference/p5/removeElements"},"requestPointerLock()":{"relativeUrl":"/reference/p5/requestPointerLock","alias":"requestPointerLock"},"resetMatrix()":{"relativeUrl":"/reference/p5/resetMatrix","alias":"resetMatrix"},"resetShader()":{"relativeUrl":"/reference/p5/resetShader","alias":"resetShader"},"rotate()":{"relativeUrl":"/reference/p5/rotate","alias":"rotate"},"rotateX()":{"relativeUrl":"/reference/p5/rotateX","alias":"rotateX"},"rotateY()":{"relativeUrl":"/reference/p5/rotateY","alias":"rotateY"},"rotateZ()":{"relativeUrl":"/reference/p5/rotateZ","alias":"rotateZ"},"round()":{"relativeUrl":"/reference/p5/round","alias":"round"},"saturation()":{"relativeUrl":"/reference/p5/saturation","alias":"saturation"},"saveCanvas()":{"relativeUrl":"/reference/p5/saveCanvas","alias":"saveCanvas"},"saveFrames()":{"relativeUrl":"/reference/p5/saveFrames","alias":"saveFrames"},"saveGif()":{"relativeUrl":"/reference/p5/saveGif","alias":"saveGif"},"scale()":{"relativeUrl":"/reference/p5/scale","alias":"scale"},"select":{"relativeUrl":"/reference/p5/select"},"selectAll":{"relativeUrl":"/reference/p5/selectAll"},"set()":{"relativeUrl":"/reference/p5/set","alias":"set"},"setCamera()":{"relativeUrl":"/reference/p5/setCamera","alias":"setCamera"},"shader()":{"relativeUrl":"/reference/p5/shader","alias":"shader"},"shearX()":{"relativeUrl":"/reference/p5/shearX","alias":"shearX"},"shearY()":{"relativeUrl":"/reference/p5/shearY","alias":"shearY"},"shininess()":{"relativeUrl":"/reference/p5/shininess","alias":"shininess"},"sin()":{"relativeUrl":"/reference/p5/sin","alias":"sin"},"specularColor()":{"relativeUrl":"/reference/p5/specularColor","alias":"specularColor"},"specularMaterial()":{"relativeUrl":"/reference/p5/specularMaterial","alias":"specularMaterial"},"sphere":{"relativeUrl":"/reference/p5/sphere"},"spotLight()":{"relativeUrl":"/reference/p5/spotLight","alias":"spotLight"},"sq()":{"relativeUrl":"/reference/p5/sq","alias":"sq"},"sqrt()":{"relativeUrl":"/reference/p5/sqrt","alias":"sqrt"},"String":{"relativeUrl":"/reference/p5/string"},"strokeCap()":{"relativeUrl":"/reference/p5/strokeCap","alias":"strokeCap"},"strokeJoin()":{"relativeUrl":"/reference/p5/strokeJoin","alias":"strokeJoin"},"strokeWeight()":{"relativeUrl":"/reference/p5/strokeWeight","alias":"strokeWeight"},"tan()":{"relativeUrl":"/reference/p5/tan","alias":"tan"},"text()":{"relativeUrl":"/reference/p5/text","alias":"text"},"textAlign()":{"relativeUrl":"/reference/p5/textAlign","alias":"textAlign"},"textAscent()":{"relativeUrl":"/reference/p5/textAscent","alias":"textAscent"},"textDescent()":{"relativeUrl":"/reference/p5/textDescent","alias":"textDescent"},"textFont()":{"relativeUrl":"/reference/p5/textFont","alias":"textFont"},"textLeading()":{"relativeUrl":"/reference/p5/textLeading","alias":"textLeading"},"textOutput()":{"relativeUrl":"/reference/p5/textOutput","alias":"textOutput"},"textSize()":{"relativeUrl":"/reference/p5/textSize","alias":"textSize"},"textStyle()":{"relativeUrl":"/reference/p5/textStyle","alias":"textStyle"},"textWidth()":{"relativeUrl":"/reference/p5/textWidth","alias":"textWidth"},"textWrap()":{"relativeUrl":"/reference/p5/textWrap","alias":"textWrap"},"texture()":{"relativeUrl":"/reference/p5/texture","alias":"texture"},"textureMode()":{"relativeUrl":"/reference/p5/textureMode","alias":"textureMode"},"textureWrap()":{"relativeUrl":"/reference/p5/textureWrap","alias":"textureWrap"},"tint()":{"relativeUrl":"/reference/p5/tint","alias":"tint"},"torus":{"relativeUrl":"/reference/p5/torus"},"touchEnded()":{"relativeUrl":"/reference/p5/touchEnded","alias":"touchEnded"},"touchMoved()":{"relativeUrl":"/reference/p5/touchMoved","alias":"touchMoved"},"touchStarted()":{"relativeUrl":"/reference/p5/touchStarted","alias":"touchStarted"},"touches":{"relativeUrl":"/reference/p5/touches"},"translate()":{"relativeUrl":"/reference/p5/translate","alias":"translate"},"triangle()":{"relativeUrl":"/reference/p5/triangle","alias":"triangle"},"updatePixels()":{"relativeUrl":"/reference/p5/updatePixels","alias":"updatePixels"},"vertex":{"relativeUrl":"/reference/p5/vertex"},"webglVersion":{"relativeUrl":"/reference/p5/webglVersion"},"while":{"relativeUrl":"/reference/p5/while"},"width":{"relativeUrl":"/reference/p5/width"},"winMouseX":{"relativeUrl":"/reference/p5/winMouseX"},"winMouseY":{"relativeUrl":"/reference/p5/winMouseY"},"windowHeight":{"relativeUrl":"/reference/p5/windowHeight"},"windowResized()":{"relativeUrl":"/reference/p5/windowResized","alias":"windowResized"},"windowWidth":{"relativeUrl":"/reference/p5/windowWidth"},"p5.Camera.camera()":{"relativeUrl":"/reference/p5.Camera/camera","alias":"camera"},"p5.Camera.centerX":{"relativeUrl":"/reference/p5.Camera/centerX","alias":"centerX"},"p5.Camera.centerY":{"relativeUrl":"/reference/p5.Camera/centerY","alias":"centerY"},"p5.Camera.centerZ":{"relativeUrl":"/reference/p5.Camera/centerZ","alias":"centerZ"},"p5.Camera.eyeX":{"relativeUrl":"/reference/p5.Camera/eyeX","alias":"eyeX"},"p5.Camera.eyeY":{"relativeUrl":"/reference/p5.Camera/eyeY","alias":"eyeY"},"p5.Camera.eyeZ":{"relativeUrl":"/reference/p5.Camera/eyeZ","alias":"eyeZ"},"p5.Camera.frustum()":{"relativeUrl":"/reference/p5.Camera/frustum","alias":"frustum"},"p5.Camera.lookAt()":{"relativeUrl":"/reference/p5.Camera/lookAt","alias":"lookAt"},"p5.Camera.move()":{"relativeUrl":"/reference/p5.Camera/move","alias":"move"},"p5.Camera.ortho()":{"relativeUrl":"/reference/p5.Camera/ortho","alias":"ortho"},"p5.Camera.pan()":{"relativeUrl":"/reference/p5.Camera/pan","alias":"pan"},"p5.Camera.perspective()":{"relativeUrl":"/reference/p5.Camera/perspective","alias":"perspective"},"p5.Camera.set()":{"relativeUrl":"/reference/p5.Camera/set","alias":"set"},"p5.Camera.setPosition()":{"relativeUrl":"/reference/p5.Camera/setPosition","alias":"setPosition"},"p5.Camera.slerp()":{"relativeUrl":"/reference/p5.Camera/slerp","alias":"slerp"},"p5.Camera.tilt()":{"relativeUrl":"/reference/p5.Camera/tilt","alias":"tilt"},"p5.Camera.upX":{"relativeUrl":"/reference/p5.Camera/upX","alias":"upX"},"p5.Camera.upY":{"relativeUrl":"/reference/p5.Camera/upY","alias":"upY"},"p5.Camera.upZ":{"relativeUrl":"/reference/p5.Camera/upZ","alias":"upZ"},"p5.Color.setAlpha()":{"relativeUrl":"/reference/p5.Color/setAlpha","alias":"setAlpha"},"p5.Color.setBlue()":{"relativeUrl":"/reference/p5.Color/setBlue","alias":"setBlue"},"p5.Color.setGreen()":{"relativeUrl":"/reference/p5.Color/setGreen","alias":"setGreen"},"p5.Color.setRed()":{"relativeUrl":"/reference/p5.Color/setRed","alias":"setRed"},"p5.Color.toString()":{"relativeUrl":"/reference/p5.Color/toString","alias":"toString"},"p5.Shader.copyToContext()":{"relativeUrl":"/reference/p5.Shader/copyToContext","alias":"copyToContext"},"p5.Shader.setUniform()":{"relativeUrl":"/reference/p5.Shader/setUniform","alias":"setUniform"}},"contributor-docs-fallback":{"🌸 Welcome! 🌺\n":{"relativeUrl":"/contribute/README","description":"interest contributing p5js collaborative project contributions volunteers community contributors appreciates involvement forms acknowledge capacity time financial means participate actively ways expand meaning word contributor experienced developer starting unique perspectives skills experiences enrich encourage involved works includes documentation teaching writing code making art design activism organizing curating imagine [contribute page](https://p5js.org/contribute/) overview contribute [all-contributors](https://github.com/kentcdodds/all-contributors/) specification @all-contributors bot handle adding people READMEmd file add issue PR comment ``` @[your GitHub handle] [your contribution type] find relevant type [here](https://allcontributors.org/docs/en/emoji-key/). automatically list merging docs published [website](https://p5js.org/contribute/), hosted [GitHub repository](https://github.com/processing/p5.js/tree/main/contributor_docs/). Contributing stress free experience levels fixing small typo refactoring complex 3D rendering functionalities things familiar read [community statement](https://p5js.org/about/#community-statement). prioritizing work expands access inclusion accessibility [our statement]/access/ details Started ready start started reasons purpose split roughly categories * Source including Non-source Depending kind section ## [Source contribution]/contributor_guidelines/ typical p5js-website repository follow steps Open Discuss Approved opening Pull Request Make merged Head [this link]/contributor_guidelines/ guided step navigate table contents page skip part refresher stick workflow strictly contributed projects feel hoops jump simple aimed make easy stewards/maintainers meaningfully spending working accepted ensure proposals fixes adequately discussed considered begin save steward/maintainer additional review outright happen result **We learning opportunity** measure sucess volume received limit long takes complete pace check period inactivity stewards maintainers support information related area general maintenance [steward guidelines]/steward_guidelines/ non-source exhaustively listed involve repositories examples tutorials website planned reach channel email social media [Discourse forum](https://discourse.processing.org/c/p5js/10/), Discord **Create** Inspire sketches designers artists coders programmers showcase creative amazing sketch gallery Dont forget tag @p5xjs [Instagram](https://www.instagram.com/p5xjs/) [X](https://twitter.com/p5xjs/), share **Teach** Teach workshop class friend collaborator Share syllabus video materials **Organize** Host events Curate exhibition Activate local **Donate** open-source made supported dedicated remain restrictions impact life position give back donation Processing Foundation donations directly fund development features improved designed inclusive welcomes background resources level thought dont [let know]mailtohello@p5jsorg participation important contributes lively"},"Our Focus on Access\n":{"relativeUrl":"/contribute/access","description":"{/* commitment access means contributors users library */} [2019 Contributors Conference](https://p5js.org/events/contributors-conference-2019/), p5js made add features increase inclusion accessibility accept feature requests support efforts commit work acknowledging dismantling preventing barriers intersecting[^1] experiences diversity impact participation include alignments gender race ethnicity sexuality language location cetera center marginalized groups continued comfort privileged community collectively exploring meaning learning practice teach choose expansive intersectional coalitionary frameworks part core values outlined [Community Statement](https://p5js.org/about/#community-statement). ## Kinds Increasing focused expanding raw number people making approachable excluded consequence structural oppression extends tools platforms offers includes makeup decision-making actions leadership resist technological culture speed growth competition prioritize intentionality slowness accommodation accountability acts collective care Access equitable * People speak languages English Black Indigenous Color ethnicities Lesbian gay bisexual queer questioning pansexual asexual Trans genderfluid agender intersex two-spirit women genders blind d/Deaf[^2] hard hearing disabled/have disability neurodivergent chronically ill[^3] lower income lack financial cultural capital prior experience open source creative coding diverse educational backgrounds age including children elders variety skill internet religious systematically historically underrepresented intersections thereof recognize complexity terms describe respective identities Language nuanced evolving contested exhaustive list provide attempt accountable commitments ### Examples examples Translating documentation materials decentering linguistic imperialism[^4] Rolando Vargas [Processing Kuna Language](https://medium.com/@ProcessingOrg/culture-as-translation-processing-in-kuna-language-with-rolando-vargas-and-edinson-izquierdo-8079f14851f7/), Felipe Santos Gomes Julia Brasil Katherine Finn Zander Marcela Mancinos [Pê Cinco Internationalization Popularization Portuguese Speakers](https://medium.com/processing-foundation/translating-p5-js-into-portuguese-for-the-brazilian-community-14b969e77ab1/)) Improving assistive technologies screen readers Katie Lius [Adding Alt Text p5.js](https://medium.com/processing-foundation/adding-alt-text-e2c7684e44f8/), Claire Kearney-Volpes [P5 Accessibility Project](https://medium.com/processing-foundation/p5-accessibility-115d84535fa8/)) [Web Content Guidelines](https://www.w3.org/TR/WCAG21/) working easier follow projects Making error messages helpful supportive tool [p5js Friendly Error System FES]/friendly_error_system/ Mentoring supporting learners communities digital arts Hosting events Day 2022](https://p5js.org/events/p5js-access-day-2022/), [The Web W3C TPAC 2020)](https://medium.com/processing-foundation/p5-js-x-w3c-tpac-bee4c621a053/) access-centered organizing tactics ASL interpretation live captioning accessible venues Supporting creation resources Adekemi Sijuwade-Ukadikes [A11y Syllabus](http://a11ysyllabus.site/)) Publishing reports WCAG guidelines plain focus beginners [OSACC Report](https://github.com/processing/OSACC-p5.js-Access-Report/)) Maintenance accepting effort criteria reflected issue pull request templates affirm intention maintain existing set fix bugs area codebase consistency makes improve Performance increases powerful hardware Support drawing to/reading framebuffers Consistency API Add arcVertex creating arcs beginShape/endShape *** living document continue conversation invite engage describes ideas suggestions share Github emailing [hello@p5jsorg]mailtohello@p5jsorg version Statement revised collaboration Evelyn Masso Nat Decker Bobby Joe Smith III Sammie Veeler Sonia Suhyun Choi Xin Kate Hollenbach Lauren Lee McCarthy Caroline Sinders Qianqian Ye Tristan Jovani Magno Espinoza Tanvi Sharma Tsige Tafesse Sarah Ciston Open Source Arts Conference finalized published Processing Foundation Fellowship [^1] Crenshaw Kimberlé Demarginalizing intersection sex black feminist critique antidiscrimination doctrine theory antiracist politics University Chicago Legal Forum 139–167 ISSN 0892-5593 Full text Archiveorg [^2] Capital Deaf refers culturally case deaf audiological term identity [^3] differing preferences person-first identity-first Read [Unpacking debate autism community](https://news.northeastern.edu/2018/07/12/unpacking-the-debate-over-person-first-vs-identity-first-language-in-the-autism-community/), [Disability-Affirming Person-First versus Identity-First Language](https://editorstorontoblog.com/2024/02/23/disability-affirming-language-person-first-versus-identity-first-language/), [Person-First Glossary](https://ogs.ny.gov/system/files/documents/2024/02/person-first-and-identity-first-glossary_english_final.pdf). [^4] Linguistic Imperialism ongoing domination/prioritization/imposition expense native due imperial expansion globalization"},"Contributing to the p5.js Reference\n":{"relativeUrl":"/contribute/contributing_to_the_p5js_reference","description":"{/* Write edit p5js reference format */} author code [reference](https://p5js.org/reference/) page website including alongside librarys source specialized comments include description functions signature parameters return usage examples words content function/variables built document show write eventually rendered correctly follow guide editing writing function variable ## quick introduction work lines library ``` /** * Calculates sine angle `sin` geometric tasks creative coding values returned oscillate -1 input increases takes account current angleMode @method sin @param {Number} @return @example draw { background200 = frameCount sint + linex circlex describe'A white ball string oscillates down' } sinx pointx series black dots form wave pattern' cost infinity symbol' */ actual JavaScript defines Reference start `/**` end `*/` line starting `*` block manner interpreted documentation familiar style [JSDoc](https://jsdoc.app/). JSDoc similar tool called [YUIDoc](https://yui.github.io/yuidoc/), syntax comment divided individual elements Lets break section compare [`sin()`](https://p5js.org/reference/p5/sin/). top text markdown HTML concise describe details quirks behaviors typically sections `@` symbol keywords `@method` define case note brackets `` `@param` arguments accepts keyword stored curly `{}` type parameter word rest `@return` generically {type} Description optional add square [name] ### Additional info Constants defined [`constants.js`](https://github.com/processing/p5.js/blob/main/src/core/constants.js) `{Constant}` valid enumerated `either` {Constant} horizAlign horizontal alignment LEFT CENTER types data tag left Chaining method returns parent object skip @chainable signatures multiple options individually [`background()`](https://p5js.org/reference/p5/background/) number Syntax Choose version list template additional tags background {String} colorstring color formats integer rgb rgba percentage 3-digit hex 6-digit [a] alpha gray specifies Multiple create separate difference addition Limit feature unnecessary noise variables looked references constants Variables structure system mouseX position mouse relative canvas top-left corner 2-D -width/2 -height/2 WebGL touch hold recent point @property @readOnly // Move background244 linemouseX describe'horizontal moves x-position' `mouseX` `@property` defining `@readonly` present internally overwritten directly user Adding `mouseX`s talked `@example` run visit [Screenshot red showing section]src/content/contributor-docs/images/reference-screenshotpng relevant const color255 fillc rect15 Sets redValue redc fillredValue rect50 rectangles edges rectangle yellow opening closing insert basic principle good things simple minimal meaningful explain works complicated 100x100 pixels `setup` included automatically wrapped default created wont practices featureTo closed separated blank arc50 PI QUARTER_PI OPEN describe'An ellipse arc open' describe'The bottom half arc' execute class `norender` describe'ellipse part automated tests requires interaction `notest` setup createCanvas100 saveCanvasc myCanvas' jpg' external asset files put [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets/) folder reuse link assets/filenameext [tint()](https://p5js.org/reference/p5/tint/) Add `describe` Finally required screen-reader accessible Include happening xoff background204 noisexoff width linen height vertical randomly right' noiseScale background0 [web accessibility contributor documentation]/web_accessibility/#describe tools needed situationally `@private` property private marked reason mark internal features `_start` _start calls preload @private p5prototype_start `@module` related file Modules correspond group split Inside module submodules `@submodule` `@for` relationship `p5` effectively `@requires` imported modules depends @module Color @submodule Creating Reading @for p5 @requires core convention subfolder `src/` inside subfolders adding subfolders/files shouldnt `@class` Class constructors `@constructor` classs constructor `p5Color` stores mode level maxes active construction interpret passed object's determine output formatting saturation array ideal RGBA floating normalized calculate closest screen colors levels Screen renderer representations calculated results cached performance floating-point numbers recommended instance @class p5Color @constructor {p5} [pInst] pointer {Number[]|String} vals green blue channel CSS Generating previewing repository set generate preview needing build main command npm docs `docs/reference/datajson` minification render continuous docsdev launch live update time make refresh making running browser `docs/` cases `docs/yuidoc-p5-theme/assets` steps checkout [JSDoc](https://jsdoc.app/) [YUIDoc](https://yui.github.io/yuidoc/). issues [#6519](https://github.com/processing/p5.js/issues/6519/) [#6045](https://github.com/processing/p5.js/issues/6045/). [contributor guidelines]/contributor_guidelines/ place"},"Contributor Guidelines\n":{"relativeUrl":"/contribute/contributor_guidelines","description":"{/* Essential information contributing p5js GitHub */} contributor guidelines document contributors contribute code refresh memories technical steps contributions repositories writing tutorials planning classes organizing events relevant pages Stewards maintainers find [steward guidelines]/steward_guidelines/ helpful reviewing issues pull requests long comprehensive signpost points utilize table contents sections Feel free skip planned **If start section step-by-step setup development process Quick Started Developers section** Table Contents * [All issues]#all-about-issues [What issues]#what-are-issues [Issue templates]#issue-templates [Found bug]#found-a-bug [Existing Feature Enhancement]#existing-feature-enhancement [New Request]#new-feature-request [Discussion]#discussion [Working codebase]#working-on-the-p5js-codebase [Quick Developers]#quick-get-started-for-developers [Using Github edit functionality]#using-the-github-edit-functionality [Forking working fork]#forking-p5js-and-working-from-your-fork Desktop]#using-github-desktop git command line interface]#using-the-git-command-line-interface [Codebase breakdown]#codebase-breakdown [Build setup]#build-setup [Git workflow]#git-workflow [Source code]#source-code [Unit tests]#unit-tests [Inline documentation]#inline-documentation [Accessibility]#accessibility [Code standard]#code-standard [Software Design principles]#software-design-principles [Pull requests]#pull-requests [Creating request]#creating-a-pull-request request information]#pull-request-information [Title]#title [Resolves]#resolves [Changes]#changes [Screenshots change]#screenshots-of-the-change [PR Checklist]#pr-checklist [Rebase resolve conflicts]#rebase-and-resolve-conflicts [Discuss amend]#discuss-and-amend *** majority activity repo short great place contribution journey ## [A cropped screenshot library repository showing top corner red box drawn surrounding Issues tab]src/content/contributor-docs/images/issues-tabpng Issue generic post aims describe issue bug report add feature discussion works related Comments added account including bots discuss topics project opened wide variety reasons source Topics debugging inviting collaborators unrelated discussed [forum](https://discourse.processing.com) platforms [Discord](https://discord.gg/SHQ8dH25r9/). created easy-to-use templates aid deciding topic posted p5js's make easier stewards understand review file receive reply faster [Screenshot title Warning logged Safari filter shader 2D mode #6597]src/content/contributor-docs/images/github-issuepng simply tab click button side presented options corresponds template redirects question recommend choosing option ensure receives attention promptly [Cropped repository's page green highlighted it]src/content/contributor-docs/images/new-issuepng ### bug\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml) encounter incorrect behavior behaving documentation [this template](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml). note debug sketch problem [Discourse forum](https://discourse.processing.org) fields fill *Most sub-area p5js* - helps identify respond automatically tagging [labels](https://github.com/processing/p5.js/labels/). *p5js version* version number `` tag link p5js/p5minjs similar `142` numbers separated periods *Web browser isolate behaviors browsers follow instructions Chrome Firefox address bar navigate `chrome//version` `aboutsupport` menu item choose *Operating System* include OS `macOS 125` bugs stem *Steps reproduce this* arguably important share list detailed replicating Sharing basic sample demonstrates replicate facing formulating solution **Replication key** aimed provide sketch's environment solutions **Be avoid statements** image function work specific display loaded GIF size things expect expected actual fix reported description simple suggestion support **You approved implementation** proposed accepted approach filed fixing closed approval reports [area steward maintainer](https://github.com/processing/p5.js#stewards) begin Enhancement\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Enhancement\\&projects=\\&template=existing-feature-enhancement.yml) propose functionality existing features functions constants rendering define color `color` accept colors *Increasing Access* required field insert statement adding enhancement [increase access]/access/ people historically marginalized creative arts technology **No proposals this** offer members community argument addresses accessibility *Feature details* proposal good includes clear case needed guarantee Request\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Feature+Request\\&projects=\\&template=feature-request.yml) drawing native HTML elements `createTable` overlap cases whichever feel form identical Existing Enhancement [previous section]#existing-feature-enhancement details maintainers](https://github.com/processing/p5.js#stewards) [\"Discussion\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Discussion\\&projects=\\&template=discussion.yml) filing fit fitting rare practice adopt Web API [new request]#new-feature-request additional [feature enchancement]#existing-feature-enchancement announcement local coding event forum contacting Processing Foundation publicity opening Labels panel panels labels area bare minimum text link](https://github.com/processing/p5.js/issues/6517/) [**⬆ back top**]#contributor-guidelines Working codebase Prerequisites proceed minimally familiar nodejs v18 Introduction implementation ready Similarly joined discussions original author volunteer submit assign jump queue** PR willingness assigned prioritize serve order accepting months individual check leaving polite comment progress generally time frame basis takes pace confident hard limit spend trouble aspect hesitate guide work/contribute p5js'🌸 developer directly improving sub-projects [Friendly Error Systems]/friendly_error_system/ [Create fork p5.js.](https://docs.github.com/en/get-started/quickstart/fork-a-repo/) [Clone computer.](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository/) [Add upstream command](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/configuring-a-remote-repository-for-a-fork/): ``` remote https://github.com/processing/p5.js Make machine [NodeJs](https://nodejs.org/en/download/) installed node -v Install dependencies npm ci Create branch `main` descriptive checkout -b [branch_name] making frequently run tests ensures broken test Add unit commit create Request]#pull-requests viewing web interface content pencil icon convenient provided simplifies processes covering quick edits view src/color/color\\_conversionjs arrow pointing image]src/content/contributor-docs/images/edit-filepng recommended main complex built tested locally fluent compared editing Forking step meaning open purpose means creating copy storing Fork labeled 593k outlined dark orange]src/content/contributor-docs/images/forkpng direct write access official Desktop program lets graphical user typing commands terminal switch [download install Desktop.](https://desktop.github.com/) application sign signed projects Select named `yourUsername/p5js` blue Clone change leave default settings continue [The signing half screen lists bottom right]src/content/contributor-docs/images/github-desktop-initpng cloned plan parent Continue cloning asks purposes]src/content/contributor-docs/images/github-desktop-forkpng `git` fork's URL clicking Code `https://github.com/limzykenneth/p5.js.git`. files landing orange outline]src/content/contributor-docs/images/code-buttonpng clone download Run folder store [git_url] Replace `[git_url]` copied minutes depending speed internet connection coffee finished downloaded `p5js` preferred editor Codebase breakdown key folders `src` eventually combined final p5minjs lives [`test`]/unit_testing/ testing examples `tasks` custom build `Gruntfilejs` configuration `contributor_docs` configurations kinds modifications Build set Assuming downloads Pretty Git workflow parts subsections building scratch complete errors running `lib/` `p5minjs` starting implies branched commits affecting branches Branches enable multiple isolated confidence mess affect Current Branch header window enter purposes describing selection entering exist appears]src/content/contributor-docs/images/github-desktop-create-branchpng `git branch_name` replacing `branch_name` separate `npm test` Running breaking moving committing made collection saved essentially records current state arise general aim lump big guideline completed subtask sentence app show changed left sidebar Type high-level elaborate blank Click Commit finalize circled lower window]src/content/contributor-docs/images/github-desktop-commitpng Check status listed [restore](https://git-scm.com/docs/git-restore/) intended diff intend Stage -m [your_commit_message] `[your_commit_message]` replaced message avoiding statements `Documentation 1` `Add circle function` Repeat periodically Source visit documented reference website Notice typos src/core/shape/2d\\_primitivesjs Part underline it]src/content/contributor-docs/images/reference-code-linkpng Unit [here]/unit_testing/ Note implementations included Inline inline [here]/contributing_to_the_p5js_reference/ Accessibility [here]/web_accessibility/ Friendly System [here]/friendly_error_system/ standard style enforced [ESLlint](https://eslint.org/). pass linting easiest ESLint plugin error highlighting popular editors Software principles mind design priorities differ coming familiarize **Access** foremost decisions increases groups Read **Beginner Friendly** friendly beginner coders offering low barrier interactive visual cutting-edge HTML5/Canvas/DOM APIs **Educational** focused curriculum supports educational supporting class curricula introduce core engaging **JavaScript community** practices accessible beginners modeling proper JavaScript patterns usage abstracting open-source wider creation dissemination **Processing inspired language transition Java easy Pull applicable committed preparing merged formally merge forked history Creating push uploading changes[A online red]src/content/contributor-docs/images/publish-branchpng uploaded prompting Clicking preview Press Request pushing items pane Review marked circle]src/content/contributor-docs/images/preview-pull-requestpng -u origin dropdown Contribute Open response request]src/content/contributor-docs/images/new-branchpng yellow call action Compare request]src/content/contributor-docs/images/recent-pushespng prepopulated template]src/content/contributor-docs/images/new-prpng Title briefly Resolves `Resolves #[Add here]` replace `[Add addressing/fixing [above]#all-about-issues #1234` close `Resolves` `Addresses` Include Screenshots optional circumstances renders visuals canvas Checklist checklist tick `[ ]` `[x]` Rebase conflicts Fix shaders rectMode applied #6603]src/content/contributor-docs/images/opened-prpng inspect pay match times Commits Files base resolved true [rebase](https://git-scm.com/book/en/v2/Git-Branching-Rebasing/) Conflicts recently resolving Basic instruction Resolve button[A conflicting filenames highlighted]src/content/contributor-docs/images/resolve-conflictspng shown `>>>>>>` `=======` shows GitHub's conflict resolution markers highlighted]src/content/contributor-docs/images/conflicts-interfacepng Remove Mark addressed remove mark upper enabled]src/content/contributor-docs/images/mark-as-resolvedpng enabled]src/content/contributor-docs/images/commit-mergepng complicated prefer manual method https://github.com/processing/p5.js` fetch upstream` rebase upstream/main` lib/p5js lib/p5minjs --continue push` Discuss amend maintainer days patient meantime reviewed happen hurray questions panic perfectly normal requested [same before]#git-workflow pushed Leave reviewer"},"Creating an Addon Library\n":{"relativeUrl":"/contribute/creating_libraries","description":"{/* Extend p5js functionalities addon library */} JavaScript code extends adds core functionality wide range doesnt aim cover Web API Addon libraries extend needing incorporate features guide steps creating loads simple CSV file implementing `loadCSV` function examples create * Provide simplified interface [p5.ble.js](https://github.com/ITPNYU/p5.ble.js) [p5.serialserver](https://github.com/p5-serial/p5.serialserver) Implement specialized algorithms [p5.pattern](https://github.com/SYM380/p5.pattern) [p5.mapper](https://github.com/jdeboi/p5.mapper) Test widely browsers [p5.webserial](https://github.com/gohai/p5.webserial/) [p5.joystick](https://github.com/Vamoss/p5.joystick) alternative implementations existing [número](https://github.com/nickmcintyre/numero/) [p5.cmyk.js](https://github.com/jtnimoy/p5.cmyk.js) ## Prerequisites foundation Prototype-based object orientation Javascript Step lets blank call p5loadcsvjs main adding methods p5prototype p5 add method ```js p5prototypeloadCSV = function{ consolelog'I load soon' } ``` includes project global `createCanvas` `background` classes as` p5Element` or` p5Graphics` prototypes `p5Elementprototype` extended `shout` exclamation mark end elements HTML p5Elementprototypeshout { thiseltinnerHTML += ' attached `p5prototype` method` loadCSV` logs message console Run sketch the` ` tag setup createCanvas400 loadCSV ```html tags Running print single accept argument defined parameter filename consolelog`I ${filename} soon` test // Prints datacsv loadCSV'datacsv' access functions variables `circle` `PI` `this` `hour` `minute` customize give information called keyword attach Dont arrow syntax => created refer window === true refers consolelogthis ${thishour}${thisminute}` looked handy implement algorithm perform drawings previous started explore source module written inside details work hood utilize advanced made files asynchronous p5jss loading `loadJSON` `loadStrings` make functionfilename{ result [] fetchfilename thenres restext thendata datasplit'\\n'forEachline resultpushlinesplit'' return creates empty array variable `result` Fetch parse split line rows row words run pass path log output setup{ myCSV printmyCSV notice logging data reason `preload` nature makes returned `fetch` finish fetching Simply moving case solve problem preload{ prints told addons wait `registerPreloadMethod` filename{ this_decrementPreload p5prototyperegisterPreloadMethod'loadCSV' Note things `p5prototyperegisterPreloadMethod` passing string parsed pushed `this_decrementPreload` `myCSV` populated due inherent limitations technique type overwritten body set properties push reassign ``result datasplit`\\n``` bit magic happening firstly additional fetchcode> running related objects passed reference types strings numbers means points original `let []` contrast returning copied lose relation behavior modify long dont separate registerPreloadMethod this\\_decrementPreload internal list track detects counter larger waiting defer `setup` starting `draw` loop Loading decrement calling effectively signaling complete reaches loadings start expected callback support `p5prototypes` major feature action hooks Action lifetime runs clean removed `remove` enable order execution `init` — Called initialized initialization `p5` constructor executed mode automatically assigned `window` active `beforePreload` `afterPreload` `beforeSetup` `afterSetup` `pre` beginning repeatedly `post` hook snippet p5prototypedoRemoveStuff cleanup p5prototyperegisterMethodremove p5prototypesetDefaultBackground Set background pink default thisbackground#ed225d p5prototyperegisterMethodpre unregister longer needed p5prototypeunregisterMethod'remove' extra tips authoring **Must extend** **or prototype p5\\* classes** offer constants instantiated mix offering convenience **Naming conventions** **Don't overwrite properties** extending careful names intend replace **p5js modes instance mode** bound allowing users prefix native `Math` `console` shouldnt named **Class use** `PascalCase`** `camelCase`**** Classes prefixed namespace **do include the** **prefix class names** welcomed non-prefixed p5prototypep5MyClass p5prototypemyAddonMyClass p5prototypemyMethod filenames word lowercase** distinguish p5soundjs encouraged follow format naming **Packaging** **Create JS library** easy projects suggest [bundler](https://rollupjs.org/) provide options normal sketching/debugging [minified](https://terser.org/) version faster **Contributed hosted documented maintained creators** GitHub website fully open **Documentation key** documentation find contributed wont included similar [library overview page](http://p5js.org/reference/#/libraries/p5.sound), [class page](http://p5js.org/reference/#/p5.Vector), [method page](http://p5js.org/reference/#/p5/arc/). **Examples great too** show people online download anything[ ](http://jsfiddle.net/) collection web editor showcase works **Submit ready distribution youd [p5js.org/libraries](https://p5js.org/libraries/) page submit pull request repository [this intruction](https://github.com/processing/p5.js-website/blob/main/docs/contributing_libraries.md)!"},"Documentation Style Guide\n":{"relativeUrl":"/contribute/documentation_style_guide","description":"{/* reference give documentation consistent voice */} guidelines writing p5js document remix resources * Ruby Rails [API Documentation Guidlines](https://guides.rubyonrails.org/api_documentation_guidelines.html) CC BY-SA WordPress [accessibility](https://make.wordpress.org/docs/style-guide/general-guidelines/accessibility/) [inclusivity](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/) CC0 Airbnb [JavaScript Style Guide](https://airbnb.io/javascript/) MIT community large diverse people learn code subset students K–12 classes reading guide write effective inclusive accessible prose purposes simple samples ## Table Contents ### Writing [YUIDoc]#yuidoc [English]#english [Oxford Comma]#oxford-comma [Wording]#wording [Unbiased Documentation]#unbiased-documentation [Accessibility Disability]#accessibility-and-disability Code [Code Samples]#code-samples [Comments]#comments [Whitespace]#whitespace [Semicolons]#semicolons [Naming Conventions]#naming-conventions [Variables]#variables [Strings]#strings [Boolean Operators]#boolean-operators [Conditionals]#conditionals [Iteration]#iteration [Objects]#objects [Arrays]#arrays [Functions]#functions [Arrow Functions]#arrow-functions [Chaining]#chaining [Classes]#classes [Assets]#assets YUIDoc generate API docs navigate root directory run `npm install` execute ``` $ npm grunt yuidev output docs/reference Refer [inline guide]/contributing_to_the_p5js_reference/ information **[⬆ back top]#table-of-contents** English American color center modularize [a list British spelling differences here](https://en.wikipedia.org/wiki/American_and_British_English_spelling_differences/). Oxford Comma comma](https://en.wikipedia.org/wiki/Serial_comma/) red white blue Wording Write declarative sentences Brevity point present tense Returns object Returned return Start comments upper case Follow regular punctuation rules ```javascript // Draws fractal Julia set function drawFractalc radius maxIter { } Communicate current things explicitly implicitly idioms recommended Reorder sections emphasize favored approaches needed model practices approachable beginners comprehensive Explore edge cases combination arguments bugs beginner's Spell names correctly CSS HTML JavaScript WebGL doubt refer authoritative source official Unbiased bias kind person documenting demanding/sensitive topics time educate Ensure doesnt hurt offend unintentionally unbiased gender identity expression sexual orientation race ethnicity language neuro-type size disability class religion culture subculture political opinion age skill level occupation background Make examples Avoid politicized content remain neutral accessibility insult harm Dont make generalizations countries cultures includes positive prejudiced discriminatory minority communities terms related historical events Prefer wordings avoid yous declare variable `let` style variables **Pronouns** | Recommended ----------- ------------------ Accessibility Disability Emphasize reader underlining inconveniences disabled [approved terminology](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology) specific disabilities Maintain uniform structure important points stylistically visually screen test [List readers](https://en.wikipedia.org/wiki/List_of_screen_readers/). multi-platform types devices operating systems Create input gesture based controllers mice keyboards ableist pragmatic approach semantics add purely sake matches element group links tables tabular formats span tags rowspan colspan Tables prove difficult readers **Accessibility terminology** terminiology adapted [Writing documentation](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology). people-first CDC's [Communicating People Disabilities](https://www.cdc.gov/ncbddd/disabilityandhealth/materials/factsheets/fs-communicating-with-people.html). --------------------------------------------------------------- ------------------------------------------------------------------ handicapped differently abled challenged abnormal normal healthy able-bodied \\[disability] victim suffering affected stricken unable speak synthetic speech dumb mute deaf low-hearing hearing-impaired blind low-vision vision-impaired visually-challenged cognitive developmental mentally-challenged slow-learner limited mobility physical crippled Samples Choose meaningful cover basics gotchas advanced syntax explain feature works draw circles circle convey idea follow Comments `//` single line Place newline subject comment Put empty block Bad magicWord = Please' Remember Good keyIsPressed === true thing1 note thing2 space easier read //Remember multiline /** */ //Bad /* Whitespace Indent blocks spaces setup ∙∙∙∙createCanvas400 ∙createCanvas400 ∙∙createCanvas400 leading brace setup{ createCanvas400 opening parenthesis control statements `if` `for` argument ifkeyIsPressed doStuff createCanvas operators y=x+5 + Semicolons Yep > JavaScript's [automatic semicolon insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion) lead subtle Naming Conventions letter descriptive fx vectorFieldx objects functions instances camelCase OBJEcttsssss {} this_is_my_object thisIsMyObject PascalCase player constructorname thisname Player trailing underscores private properties methods Spy constructorsecret this_secret secret thissecret Variables `var` declared confusing scoping reasonable circlex var throws ReferenceError `const` reason reassigned sketches helpful default flower 🌸' const declaration assignment declarations positions getPositions startSearch dragonball z' Assign place scoped - unnecessary search getCharactername default' character charactersfindc => cname false unary increments decrements `++` `--` Unary increment decrement insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion). silent errors incrementing decrementing values expressive update num `+= 1` `num++` num++ --num += -= Strings quotes `''` strings Hilma af Klint template literals interpolation newlines `Hilma Klint` Klint' concatenate characters Broken hard searchable essay \\ simplest convenient definitions' concatenation Template concise provide proper string features Dave' textname conversation serve purpose anymore Goodbye text`${name} Goodbye` unnecessarily escape Backslashes readability bad \\'this\\ \\i\\s \\quoted\\' good Air cool' Boolean Operators `===` `==` `=` shortcuts booleans understand mouseIsPressed == ' collectionlength `switch` parentheses mixing exceptions arithmetic `+` `-` `**` avoids huh && || / Conditionals braces circlemouseX mouseY `else` preceding closing thing3 executes `return` statement mouseIsOnLeft mouseX number letters abc' selection conditionals refrigeratorIsRunning goCatchIt Iteration `while` `do-while` loops iterate fixed times numPetals Pure side effects `forEach` `map` `every` `filter` `find` `findIndex` `reduce` `some` `` arrays `Objectkeys` `Objectvalues` `Objectentries` produce iterating diameters [50 10] circle0 Objects literal creation ball Object quote invalid identifiers improves highlighting engines optimizing performance secretObject x' y' top-secret' classified' dot notation access turtle Leonardo' dodgerblue' weapon 🗡️' food 🍕' turtleName turtle['name'] turtlename bracket `[]` getPropprop turtle[prop] getProp'name' commas mathematician firstName Ada lastName Lovelace Ada' Lovelace' Add comma artist Lauren' McCarthy McCarthy' Arrays array images Array [] [Array#push](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push/) direct items lyrics lyrics[lyricslength] rough edges smooth' lyricspush'Little `slice` method copy numbersCopy Function foo parameter mutate createBalldiameter diameter put parameters drawSpiralangle length drawSpirallength angle Arrow Functions arrow anonymous Callbacks common creates version context `this` complex rewrite loadImage'assets/moonwalkjpg' img imageimg preload Complex preprocessing processImage processImageimg implicit Omit body returns [1 3]mapnumber squared ** `${number} ${squared}` ${number 2}` include reduces changing Chaining individual calls chaining accommodate users familiar concept fill0 strokeWeight6 textSize20 fill0strokeWeight6textSize20 Classes `class` manipulating `prototype` directly exception explaining [create libraries]/creating_libraries/ Moverx thisx thisy thisradius Moverprototypeupdate Moverprototyperender circlethisx Mover constructorx render `extends` inheritance RandomMover extends random-1 custom `toString` toString `Mover ${thisx} ${thisy}` constructor delegates parent Dot DragonBall Ball superx numStars thisnumStars duplicate members Duplicate member prefer duplicates means bug thisxspeed thisyspeed reset Assets load assets folder called models project organization required website folders online Examples [src/data/examples/assets](https://github.com/processing/p5.js-website/tree/main/src/data/examples/) Reference Pages [src/templates/pages/reference/assets](https://github.com/processing/p5.js-website/tree/main/src/templates/pages/reference/assets/) Learn [src/assets/learn](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/) loadImage'moonwalkjpg'"},"Friendly Errors System Contribution Guide\n":{"relativeUrl":"/contribute/fes_contribution_guide","description":"{/* overview Friendly Error System codebase reference developers */} `core/friendly_errors` folder code p5js Systems FES responsible generating messages Errors starting `🌸 says` console supplementing default browser-generated error houses functions types errors gather locations including handling file load autoplay parameter checking library custom implemented contributors document starts FES's main section find full information description syntax parameters location individual part notes previous Development Notes outlining limitations future directions [Development Notes]#-development-notes contributing ## Overview * `p5_friendlyError` formats prints `_report` input message `p5_validateParameters` validate received values wrong type missing `p5_friendlyFileLoadError` guide users related `p5_friendlyAutoplayError` browser's policy diagram outlines connect [A files uses]src/content/contributor-docs/images/fessvg Individual `fes_corejs` `_friendlyError` `_friendlyAutoplayError` helper formatting testing `validate_paramsjs` `_validateParameters` validation `file_errorsjs` `_friendlyFileLoadError `and `browser_errorsjs` list browser generated global class `fesglobalErrors` `stacktracejs` parse stack borrowed [stacktrace.js](https://github.com/stacktracejs/stacktrace.js)). 📚 Reference Functions ### #### Description primary function directly output **Note** `p5_fesLogger` set running tests `consolelog` Mocha case `_fesLogger` pass string tested asserted Syntax ```js _reportmessage func color ``` Parameters @param {String} Message printed [func] {Number|String} [color] CSS `[func]` append link end `[color]` property current version Location core/friendly\\_errors/fes\\_corejs creates p5 call offer `_friendlyFileLoadError` inside `image/loading_displaying/loadImage` `io/files/loadFont` `io/files/loadTable` `io/files/loadJSON` `io/files/loadStrings` `io/files/loadXML` `io/files/loadBytes` sequence _friendlyFileLoadError _report _friendlyFileLoadErrorerrorType filePath {Number} errorType Number Path caused `errorType` refers specific enumerated `core/friendly_errors/file_errorsjs` File categorized distinct cases categorization designed facilitate delivery precise informative scenarios read data font show large Examples Loading /// myFont preload { = loadFont'assets/OpenSans-Regularttf' } setup fill'#ED225D' textFontmyFont textSize36 text'p5*js' draw {} generate addition browsers unsupported 🌸 problem loading path assets/OpenSans-Regularttf correct hosting online local server + info https://github.com/processing/p5.js/wiki/Local-server /friendly\\_errors/file\\_errorsjs called internally linked playing media video due calls `translator` print key `fesautoplay` keys `translations/en/translationjson` runs matching `docs/reference/datajson` created function's inline documentation checks number `fesfriendlyParamError*` `p5_validateParametersFUNCT_NAME ARGUMENTS` `p5prototype_validateParametersFUNCT_NAME requires recommended static general purposes remained debugging unit `accessibility/outputs` `color/creating_reading` `color/setting` `core/environment` `core/rendering` `core/shape/2d_primitives` `core/shape/attributes` `core/shape/curves` `core/shape/vertex` `core/transform` `data/p5TypedDict` `dom/dom` `events/acceleration` `events/keyboard` `image/image` `image/loading_displaying` `image/p5Image` `image/pixel` `io/files` `math/calculation` `math/random` `typography/attributes` `typography/loading_displaying` `utilities/string_functions` `webgl/3d_primitives` `webgl/interaction` `webgl/light` `webgl/loading` `webgl/material` `webgl/p5Camera` validateParameters buildArgTypeCache addType lookupParamDoc scoreOverload testParamTypes testParamType getOverloadErrors _friendlyParamError ValidationError report friendlyWelcome _validateParametersfunc args {Array} User arguments Missing Parameter arc1 [sketchjs line 13] arc expecting (http://p5js.org/reference/#/p5/arc) mismatch 1' MathPI 14] core/friendly\\_errors/validate\\_paramsjs `fesErrorMonitor` monitors guess source provide additional guidance includes trace sequential program leading point thrown Stack traces determining internal user `fesglobalErrors*` comprehensive `fesglobalErrorssyntax*` `fesglobalErrorsreference*` `fesglobalErrorstype*` `processStack` `feswrongPreload` `feslibraryError` stacktrace `printFriendlyStack` `fesglobalErrorsstackTop` `fesglobalErrorsstackSubseq` spell-check `handleMisspelling` `fesmisspelling` `_fesErrorMonitor` automatically triggered `error` events unhandled promise rejections `unhandledrejection` `window` manually catch block someCode catcherr p5_fesErrorMonitorerr works subset `ReferenceError` `SyntaxError` `TypeError` complete supported roughly _fesErrorMonitor processStack printFriendlyError ReferenceError _handleMisspelling computeEditDistance printFriendlyStack SyntaxError TypeError fesErrorMonitorevent {*} event Internal // background background200 8] properties undefined reading background' occurred stated loadImage loadJSON loadFont loadStrings (http://p5js.org/reference/#/p5/preload) cnv createCanvas200 cnvmouseClicked 12] bind' mouseClicked issue passed (http://p5js.org/reference/#/p5/mouseClicked) Scope += 5] defined scope check spelling letter-casing JavaScript case-sensitive https://p5js.org/examples/data-variable-scope.html Spelling xolor1 2] accidentally written xolor (http://p5js.org/reference/#/p5/color) `checkForUserDefinedFunctions` Checks user-defined `setup` `draw` `mouseMoved` capitalization mistake `fescheckUserDefinedFns` checkForUserDefinedFunctionscontext context Current Set window mode instance loadImage'myimagepng' preLoad intentional /friendly\\_errors/fes\\_corejs `helpForMisusedAtTopLevelCode` `fesmisusedTopLevel` err {Boolean} log false 💌 Limitations False Positive versus Negative Cases encounter positives negatives positive alarm warns fine hand negative doesnt alert important identify fix save time make things confusing fixing real problems easier less-than-ideal situations design chosen eliminate choose avoid incorrect warnings distract mislead Related `fesGlobalErrors` detect overwritten variables declared `const` `var` Variables undetected limitation `let` handles variable instantiation resolved functionality web editor details pull request \\[[#4730](https://github.com/processing/p5.js/pull/4730/)]. Performance Issue enabled disabled `p5minjs` prevent slowing process error-checking system significantly slow \\~10x [Friendly performance test](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/performance/code/friendly-error-system/). disable top sketch p5disableFriendlyErrors true disables stuff drawing note action features reduce argument impact providing detailed fails attempt override space Thoughts Future Work Decouple \\[[#5629](https://github.com/processing/p5.js/issues/5629/)] Eliminate Identify Add test coverage - intuitive clear translatable discussion internationalization i18n Book](https://almchung.github.io/p5-fes-i18n-book/en/). common generalize `bezierVertex` `quadraticVertex` required object initiated `nf` `nfc` `nfp` `nfs` Conclusion README outlined structure explains organization purpose making navigate understand Additionally provided included discuss potential areas improvement development excited share insights community Survey conducted 2021-2022 findings [21-22 Report Comic](https://almchung.github.io/p5jsFESsurvey/) Full Report](https://observablehq.com/@almchung/p5-fes-21-survey/). TODO uncomment publish article ways add methods recommend [How Messages]#/ takes adding step-by-step"},"🌸 p5.js Friendly Error System (FES)\n":{"relativeUrl":"/contribute/friendly_error_system","description":"{/* overview system p5js provide errors friendly language */} ## Overview Friendly Error System FES 🌸 aims programmers providing error messages simple supplements browser's console adding alternative description links helpful references prints window [p5js Web Editor] browser JavaScript single minified file p5 p5minjs omits https://editor.p5js.org/ Lowering Barriers Debugging design tool match people lower barriers debugging exception evaluate existing hear directly ran community survey gather feedback future wishes Errors insights members contributors results summary comic full report * [21-22 Survey Report Comic] Full Report] https://almchung.github.io/p5jsFESsurvey/ https://observablehq.com/@almchung/p5-fes-21-survey Writing Messages contribute library writing translating part [internationalization] effort generate content [i18next]-based `translator` function dynamic message generation languages including English - default contributions world 🌐 https://github.com/processing/p5.js/blob/main/contributor_docs/archive/internationalization.md [i18next] https://www.i18next.com/ #### Practices writers prioritize lowering barrier understanding increasing accessibility process [Friendly i18n Book] discusses challenges practices cross-cultural context points book Understand audience make assumptions learn inclusive strive bias harm Adhere Code Conduct] sentences breaking sentence smaller blocks utilizing i18next's [interpolation] feature Prioritize communication great experience Avoid figures speech Introduce technical concept term time consistency link external resource written beginner-friendly plenty short practical examples https://almchung.github.io/p5-fes-i18n-book/ https://www.i18next.com/translation-function/interpolation https://github.com/processing/p5.js/blob/main/CODE_OF_CONDUCT.md#p5js-code-of-conduct [expert blind spots] https://tilt.colostate.edu/TipsAndGuides/Tip/181 public project separate [repo] https://github.com/almchung/p5-fes-i18n-book Location Translation Files based i18next imported `src/core/internationalizationjs` generates text data JSON translation ``` translations/{{detected locale code default=en}}/translationjson detected Korean designator `ko` read translated `translations/ko/translationjson` assemble final include regional information `es-PE` Spanish Peru Structure `translationjson` [format i18next](https://www.i18next.com/misc/json-format/). basic format file's item key double quotation marks `` closed curly brackets `{}` ```json { } ASCII logo saved \\n /\\\\| |/\\\\ \\\\ ` / \\\\/|_|\\\\/ \\n\\n supports interpolation pass variable dynamically `{{}}` set placeholder greeting {{who}} `greeting` `who` ```JavaScript translator'greeting' result generated `fes`'s `fileLoadError` demonstrates image problem loading {{suggestion}} call pre-generated `suggestion` translator'fesfileLoadErrorimage' suggestion Add Modify [internationalization doc] step-by-step guide modifying files Understanding Works section give displays detailed functions [FES Reference + Dev Notes] https://github.com/processing/p5.js/tree/main/src/core/friendly_errors#fes-reference-and-notes-from-developers calls multiple locations situations throws user API custom cases benefit find core components inside `src/core/friendly_errors` `translations/` Message Generators responsible catching generating [`_friendlyFileLoadError`] catches [`_validateParameters`] checks input parameters inline documents \\[`_fesErrorMonitor`] handles global reference [Dev /fes_contribution_guidemd#_friendlyerror /fes_contribution_guidemd#_validateparameters [`_fesErrorMontitor`] /fes_contribution_guidemd#feserrormonitor /fes_contribution_guidemd#-development-notes Displayer `fes_corejs/_friendlyError` p5_friendlyError translator'fesglobalErrorstypenotfunc' translationObj called Turning [disable performance] `p5disableFriendlyErrors` turn `true` p5disableFriendlyErrors = true setup createCanvas100 automatically https://github.com/processing/p5.js/wiki/Optimizing-p5.js-Code-for-Performance#disable-the-friendly-error-system-fes"},"How to add Friendly Error Messages\n":{"relativeUrl":"/contribute/how-to-add-friendly-error-messages","description":"{/* support Friendly Errors method Follow step-by-step guide */} walks steps write Error FE messages System FES 🌸 supports custom error handling outputs logs user dynamically generated [i18next](https://www.i18next.com/)-based `translator` p5js provide translations matching environment ## ❗️No `p5minjs` * integrated \\[i18next] codebase usage limited unminified build minified version includes basic framework internationalization code actual implementation Browserify task `src/core/initjs` specific logic avoid loading setting result adding affect size Prerequisites begin identify cases describes case requires number types arguments [✅Adding Parameter Validation FES]#-adding-parameter-validation-using-fes involves type file catch errors files [📥 Adding File Loading FES]#-handling-file-loading-error-messages-with-fes written detects occurred show [🐈 Library Messages FES]#-adding-library-error-messages-using-fes ✅ parameter validation ### Step – Double-check inline documentation ensure [inline documentation]/contributing_to_the_p5js_reference/ full list parameters `circle` starts description ``` /** Draws circle canvas round shape point edge distance center default set location sets shape's width height diameter origin changed ellipseMode function @method @param {Number} x-coordinate y-coordinate @chainable @example circle30 describe'A white black outline middle gray canvas' */ validate Call `p5_validateParameters` back call `validate_params` format `p5_validateParameters'[name method]' arguments` produce message ```js p5_validateParameters'circle' called provided match expectations line p5prototypecircle = { const args Arrayprototypeslicecallarguments argspusharguments[2] return this_renderEllipseargs } Build test typical action rebuild `p5js` `npm run build` find `/lib/empty-example/indexhtml` replace script `/p5minjs` `/p5js` Note `lib/p5minjs` doesnt `lib/p5js` edit `/lib/empty-example/sketchjs` Missing Wrong expressions // circle100 required Notice successfully draws hello' generate [sketchjs 9] expecting received (http://p5js.org/reference/#/p5/circle) 14] 12] Number string Congratulations 🎈 📥 Handling Check load divided distinct helpful occurs lets separate situations read data font large found top `core/friendly_errors/file_errorsjs` add `fileLoadErrorCases` existing applied string-based corresponds `case 3` translator'fesfileLoadErrorstrings' suggestion loadStrings scenario remember skip ahead [**Step 4**]#step-4 2**]#step-2 create Discuss issue board ticket discuss creating confirm duplicate Write short paragraph describing loads [issue board](https://github.com/processing/p5.js/issues/), press Issue button choose 💡 Existing Feature Enhancement option empty form Add title lines `fileLoadErrrorCases` \\[a high-level case] Increasing access section enter prepared beginning step check box sub-area question Lastly enhancement details detailing confirming maintainers ready Inside `fileLoadErrorCases`s `switch` statement end {{next number}} translator'fesfileLoadError{{tag name}}' {{name method}} double angle brackets `{{}}` instance previous start 12` braces final `p5_friendlyFileLoadError` `p5_friendlyFileLoadError[case number] [file path]` inside statements `loadStrings` [`httpDo.call()`](https://p5js.org/reference/#/p5/httpDo/) callback executed p5prototypehttpDocall args[0] GET' text' => [ omitted ] functionerr p5_friendlyFileLoadError3 calls `p5_friendlyFileLoadError3 [the argument problem text checking path assets/wrongnametxt correct hosting online running local server + info https://github.com/processing/p5.js/wiki/Local-server implementing 🐈 detect users applicable providing fail-safes values missing Identify [This MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling/) good overview options control flow JavaScripts native constructs \\\\ `p5_friendlyError` `p5_friendlyError'[custom message]' [method name]'` Replace including square `bezierVertex` p5_friendlyError vertex calling bezierVertex' bezierVertex 19] library stated passed (http://p5js.org/reference/#/p5/bezierVertex) ✏️ Writing international audiences writers prioritize lowering barrier understanding increasing accessibility debugging process 7] shown Korean browser `ko-KR` locale 줄7] 최소 3개의 인수argument를 받는 함수 circle에 인수가 1개만 입력되었습니다 [Friendly i18n Book](https://almchung.github.io/p5-fes-i18n-book/) discusses challenges practices writing cross-cultural context main points book Understand audience make assumptions learn language inclusive strive friendly bias harm simple sentences breaking sentence smaller blocks utilize [i18next's interpolation feature.](https://www.i18next.com/translation-function/interpolation/) Prioritize communication great experience languages Avoid figures speech Introduce technical concept term time consistency link external resource beginner-friendly plenty practical examples public project contribute [this repo.](https://github.com/almchung/p5-fes-i18n-book/) 🔍 Optional Unit tests unit bugs early delivering intended contributors accidentally break interfere functionality guides testing [Unit Testing Test Driven Development](https://archive.p5js.org/learn/tdd.html) Andy Timmons [Contributors Doc Testing]/unit_testing/ suite'validateParameters multi-format' test'color optional incorrect type' assertvalidationErrorfunction p5_validateParameters'color' [0 A'] Conclusion instructions include Additionally excited share insights community Survey conducted 2021-2022 findings formats [21-22 Report Comic](https://almchung.github.io/p5jsFESsurvey/) Full Report](https://observablehq.com/@almchung/p5-fes-21-survey/) in-depth information design aspects refer [FES README document]/friendly_error_system/ document detailed explanations development notes beneficial seeking deeper"},"Release process\n":{"relativeUrl":"/contribute/release_process","description":"{/* updates GitHub turned version library */} ## Approach * follow [semver](https://semver.org/) versioning pattern means `MAJORMINORPATCH` Requirements Git nodejs NPM installed system build push access remote repository Secret `NPM_TOKEN` set `ACCESS_TOKEN` Security tokens release steps run fully [repository secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository) created [here](https://docs.npmjs.com/creating-and-viewing-access-tokens/) create read publish token user belongs project personal `p5js` `p5js-website` `p5js-release` repositories generated [here](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token/) scopes choose `repo` `workflow` recommended organization specific account limit account's write required Usage ```sh $ git checkout main npm [major|minor|patch] Choose tag origin v142 Replace number ``` actual Actions CI Monitor check results commands executed action monitored [Actions tab](https://github.com/processing/p5.js/actions/) p5js repo page job clicking give detailed log running [Screenshot job]src/content/contributor-docs/images/release-actionpng completed released Check [release](https://github.com/processing/p5.js/releases/) [NPM](https://www.npmjs.com/package/p5/) pages latest view draft make changelog website updated deploy relevant page](https://github.com/processing/p5.js-website/actions/) desired [Downloads page](https://p5js.org/download/) CDNs bit time day update automatically pull *** happening Action [New release]/github/workflows/releaseyml triggered matches `v***` `npm ___` command Clone setup extract install dependencies `npm` test test` Create files uploaded releases Update Copy `datajson` `dataminjson` location `p5minjs` `p5soundminjs` `datayml` file `enjson` based Commit back Bower libraries principle concentrate place environment step defined workflow part configuration Testing testing difficult [act](https://github.com/nektos/act/) locally tested developed require temporary modifications definition roughly document precise change requirements present mocha Chrome tests needed `apt` setting rest eye error messages information packages missing pushing commented avoid accidentally unintended"},"Steward Guidelines\n":{"relativeUrl":"/contribute/steward_guidelines","description":"{/* Learn manage review contributions p5js */} joined steward seasoned maintainer guide information tips tricks effectively contribute written guidelines stated means adapt practices shown suit workflow ## Table Contents * [Issues]#issues [Bug report]#bug-report [Feature request]#feature-request enhancement]#feature-enhancement [Discussion]#discussion [Pull Requests]#pull-requests [Simple fix]#simple-fix fix]#bug-fix [New feature/feature enhancement]#new-feature-feature-enhancement [Dependabot]#dependabot [Build Process]#build-process [Main build task]#main-build-task [Miscellaneous tasks]#miscellaneous-tasks [Release Process]#release-process [Tips Tricks]#tips--tricks [Reply templates]#reply-templates [GitHub CLI]#github-cli [Managing notifications]#managing-notifications *** Issues encourage source code start issue issues place discussions steps reviewing depend kind repo templates](https://github.com/processing/p5.js/blob/main/.github/ISSUE_TEMPLATE/) order organize kinds authors provide relevant problems step filled-out template determining additional fields filled incorrect ### Bug report Found bug typical addressing reports Replicate goal reviewer attempt replicate question reported opened p5js-website Transfer access leave comment filed direct link provided close replication replicated discussion required determine fix straightforward tricky refer [p5js design principles]/contributor_guidelinesmd#software-design-principles making decision case-by-case basis author Approve fixing leaving assigning cog button side Assignee Leave recognizing replicable Attempt add `help wanted` label signal needing info version browser OS testing environment differs specific Add setup bugs occur web editor locally case redirected [web repo](https://github.com/processing/p5.js-web-editor/). back stems user behavior Determine documentation implementation friendly error system improved prevent mistake made Kindly redirect questions [forum](https://discourse.processing.org/) [Discord](https://discord.com/invite/SHQ8dH25r9/) Feature request Request feature requests part commitment increase make increases communities historically marginalized field details [here]/access/ Increasing Access sufficiently statement member community including reviewers assessed inclusion based criteria fit project scope [design drawing primitive shape considered adopt browser-based IOT protocol narrow avoid excessive bloat rarely features suggest implement addon library unclear fits good idea proof-of-concept helps give users concrete usage importance necessarily complete solution fully integrated core breaking change conflict existing functions variables sketches Features conflicts [major release](https://docs.npmjs.com/about-semantic-versioning/), proposed achieved functionalities simple native JavaScript easy-to-use libraries providing function join array strings `join[Hello world]` `[Hello world]join` preferred requirement considerations fulfilled stewards maintainers approve work begin PR process documented enhancement Existing Enhancement similar difference blurry deals requesting added Similar accepted point [section above]#feature-request Inclusion enhancements attention paid potential modifying previous valid signatures behave approved Discussion type minimal gather feedback topic general coalescing sorts closed conversation finishes resulting created correct applied removed Additional requested included contribution GitHub repositories/contribution process/contribution forum Discord labels glance Pull Requests repositories happen pull Stewards push encouraged follow > contributing found [here](https://github.com/processing/p5.js/blob/main/.github/PULL_REQUEST_TEMPLATE.md). discussed meaning [issue workflow]#issues reviewed instances apply minor typo fixes require open merged merge area exception exists practice contributors words doubt applies solve referenced edit original post Resolves #OOOO Addresses automatically Simple small directly Check Files Changed tab ensure automated CI test passes [The files changed viewing GitHub]src/content/contributor-docs/images/files-changedpng checks passed indicator highlighted button]src/content/contributor-docs/images/all-checks-passedpng ideally initially implemented tested CLI streamline Tricks]#tips-tricks [ ] address behaviors agreed significant performance impact accessibility modern standard coding pass tests include line comments lines [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/commenting-on-a-pull-request#adding-line-comments-to-a-pull-request). suggestion block changes\\ Suggest Change writing request]src/content/contributor-docs/images/suggest-changepng\\ [A suggested appearing fences tag]src/content/contributor-docs/images/suggested-value-changepng\\ previewed diff]src/content/contributor-docs/images/suggestion-previewpng multiple dont single-line times procedure [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/reviewing-proposed-changes-in-a-pull-request/) multiple-line single clarification choose Comment option circled Finish Review menu]src/content/contributor-docs/images/comment-reviewpng mark Approved choosing desired @[all-contributors](https://allcontributors.org/docs/en/emoji-key/) bot called list READMEmd file `[contribution` `type]` full types `@all-contributors` `please` `add` `@[GitHub` `handle]` `for` notable Dependabot PRs visible admins skip section update [semver](https://semver.org/) patch semver long quick check changelog updated dependency recommended major affect current target processes functioning due dependencies bump numbers drop official support versions Nodejs cases API Build cover commands happening scenes [contributors guidelines]/contributor_guidelinesmd#working-on-p5js-codebase detailed Gruntfilejs main definitions tools includes limited Grunt Browserify YUIDoc ESLint Babel Uglify Mocha helpful `default` task backward document explainer Main ``` gruntregisterTask'default' ['lint' test'] run `grunt` npm script `npm test` default consisting `lint` `test` #### Task gruntregisterTask'lint' ['lintsource' lintsamples'] consists tasks `lintsource` `lintsamples` subdivided `eslintbuild` `eslintsource` `eslinttest` scripts `yui` `yuidocprod` `cleanreference` `minjson` extract JSON remove unused minify generated `dataminjson` `eslint-samplessource` custom definition [/tasks/build/eslint-samplesjs]/tasks/build/eslint-samplesjs convention rest built lint examples ```js gruntregisterTask'test' build' connectserver' mochaChrome' mochaTest' nycreport `build` gruntregisterTask'build' browserify' browserifymin' uglify' browserifytest Tasks `browserify` defined [/tasks/build/browserifyjs]/tasks/build/browserifyjs differences builds `browserifymin` intermediate minified data needed FES `uglify` takes output final p5minjs configuration `browserifytest` building identical coverage reporting [Istanbul](https://istanbul.js.org/)). `fsreadFileSync` nodejs replaced file's actual content `brfs-babel` WebGL inline shader separate node\\_modules transpiled match [Browserslist](https://browsersl.ist/) packagejson ES6 import statements CommonJS `require` browserify understands enables newer syntax worrying compatibility bundling bundled `pretty-fast` meant cleaned formatting bit consistent anticipate read inspected left linked closer connectserver spins local server hosting Chrome mochaChrome [/tasks/test/mocha-chromejs]/tasks/test/mocha-chromejs Puppeteer spin headless remote controlled runs HTML `/test` folder unminified unit suites reference mochaTest `mochaChrome` subset set expanded Finally print console Test monitoring points 100% covers Miscellaneous `npx grunt [step]` covered yuidev spinning serves functionally page find website [http://localhost:9001/docs/reference/](http://localhost:9001/docs/reference/). monitor rebuild `yuidev` working move repository time preview slightly simplified confident show correctly Note modifications styling layout watch watchmain watchquick series thing `watch` running detecting `watchmain` `watchquick` Depending save manually Release [release\\_processmd]/release_process/ Tips number overwhelming put things easier utilize Reply templates handy [Saved Replies](https://docs.github.com/en/get-started/writing-on-github/working-with-saved-replies/about-saved-replies/) authoring reply responding replies redirecting accepting Saved Replies efficient create ##### Closing Reproduce reproduce feel free reopen sample demonstrates Snippet closing organizational purposes snippet illustrates Forum tutorials GSOC discuss proposals [forum](https://discourse.processing.org/c/summer-of-code/). lot interest clear explanation [expands access]/access/ Addon great starting docs [Creating Library]/creating_libraries/ Issue reminder tagged tracking development keeping ahead Merged Reviewing complex difficult git PR's Fortunately CLI](https://cli.github.com/) tool greatly installing logging command `gh pr checkout [pull_request_id]` fetching fork creating branch checking switching `git main` visit webpage Managing notifications tabs clicking Watch eye icon top opposite [Cropped screenshot corner showing buttons center Sponsor Fork Starred]src/content/contributor-docs/images/github-repo-metricspng watching events mentions handle activities subscribed [notification page](https://github.com/notifications/), marked dismissed email inbox receive emails customize unsubscribing completely [notifications settings page](https://github.com/settings/notifications/). Setting issues/PRs overwhelmed endless balance Participating @mentions"},"Unit Testing\n":{"relativeUrl":"/contribute/unit_testing","description":"{/* Guide writing tests p5js source code */} Unit testing essential part large codebase stay bug-free small pieces aim test individual components larger base correctness making function class creating object instances correctly unit ensure functions librarys introduce bugs unexpected behavior called regression Tests run `npm test` command terminal guide walk process implementing adding feature existing changing implement relevant ## Prerequisites * foundation Contributor guidelines local development setup inside Files folders test-related files located `test` folder wont focus `unit` subfolder subfolders roughly correspond `src` time counterpart composed modules module public Testing frameworks [Mocha](https://mochajs.org) runner responsible running providing solid framework reporting results long output Mocha doesnt assertion library collection handy lets properties values equal type throws error [Chai's `assert` `expect`)](https://www.chaijs.com/api/assert/) write statements behave Writing start pick variable Lets `p5prototypekeyIsPressed` beginning understand expected *expected behavior* `keyIsPressed` `true` key pressed `false` keys cases boolean - alphabet number special multiple `suite` built-in provided environment file `test/unit/events/keyboardjs` find additional `setup` `teardown` describes case checks single feature/behavior tested argument passed description suite/test purpose give clear suite press ```js suite'p5prototypekeyIsPressed' { test'keyIsPressed boolean' //write } true press' false pressed' ``` structured written Chai's `myp5` defined top section callback creates instance mode sketch myp5 setupfunctiondone p5functionp psetup = `p` parameter access variables assigned functionalities Remember previously mentioned Chai //Asserts assertisBooleanmyp5keyIsPressed create actual practice means condition similar statement throw Chais `assertisBoolean` check `myp5keyIsPressed` [documentation](https://www.chaijs.com/api/assert/) kinds things method behaves correct Adding add component Generally path `test/unit` `src/color/p5Colorjs` `test/unit/color/p5Colorjs` added make copy rename match delete inserting keeping teardown suite'module_name' myID myCanvasID' cnv pcreateCanvas100 cnvidmyID teardownfunction myp5remove `spec` `test/unit/specjs` loaded // test/unit/specjs var spec typography ['attributes' loadFont' p5Font' yourModule'] grouped representing function/variable expand suite'p5prototypeyourFunction' test'should [test something]' assertions suites needed didnt Conventions conventions practices follow `test`s self-contained rely Test minimal thing accepts arguments Prefer `expect` Running straightforward takes simply bit repetitive tricks streamline `npx grunt watchmain` automatically build save manually frequent mark skipped `skip` `only` syntax suiteskip'p5prototypeyourFunction' suiteonly'p5prototypeyourFunction' `grunt yuidev` launch server reference live [`http://127.0.0.1:9001/test/test.html`](http://127.0.0.1:9001/test/test.html) browser debugger middle log complex objects filter search term `grep=` URL [`http://127.0.0.1:9001/test/test.html?grep=framebuffer`](http://127.0.0.1:9001/test/test.html?grep=framebuffer) Visual sketches unexpectedly change implementation features visual lives `test/unit/visual/cases` Inside sample calls `screenshot` visualTest'2D maintain size' functionp5 screenshot p5createCanvas50 p5WEBGL p5noStroke p5fill'red' p5rectModep5CENTER p5rect0 p5width/2 p5height/2 filename list `test/visual/visualTestListjs` Additionally continuous integration pull request `visual` generate screenshots intentionally matching `test/unit/visual/screenshots` re-run inspect [http://127.0.0.1:9001/test/visual.html](http://127.0.0.1:9001/test/visual.html) CI optimizing speed advantageous concise avoid unnecessary frames minimize canvas size load assets specific functionality address scenarios involving operations asynchronous 3D model rendering returning promise resolves completing ensuring efficiency approach visualSuite'3D Model rendering' visualTest'OBJ displayed correctly' Return Promise waits operation complete return Promiseresolve => Load asynchronously p5loadModel'unit/assets/teapotobj' p5background200 p5rotateX10 p5rotateY10 p5modelmodel comparison Resolve completion resolve"},"p5.js Web Accessibility\n":{"relativeUrl":"/contribute/web_accessibility","description":"{/* Understand p5js Web Accessibility features make sketch accessible */} document describes structure web accessibility contributors sketches [screen reader](https://en.wikipedia.org/wiki/Screen_reader/)-accessible, visit [Writing Accessible Canvas Descriptions](https://p5js.org/tutorials/writing-accessible-canvas-descriptions/) tutorial screen reader [Using Screen Reader tutorial](https://p5js.org/tutorials/p5js-with-screen-reader/). canvas HTML element grid pixels doesnt provide reader-accessible information shapes drawn functions readers providing [fallback text](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage#accessible_content) descriptions Ill describe details implementation ## Prerequisites * foundation Contributor guidelines local development setup inside label code Library-generated outputs basic supports library-generated `textOutput` `gridOutput` user-generated `describe` `describeElement` inserted child elements `` work snippet serve ```js function { createCanvas400 } draw background#ccccff textOutput fillorange ellipse100 fillfuchsia rect300 ``` [An orange circle pink square light purple canvas]src/content/contributor-docs/images/sketch-with-shapespng creates output present general description includes size color number > lavender blue list position area shape top left covering 1% canvas\\ fuchsia bottom 2% selected table provided location coordinates location=top area=1%\\ = generates ```html Text Output white lays content form based spatial background objects object types cell depending type circle\\ individually *orange %* *fuchsia generated Grid % user passes `LABEL` argument additional created \\ visible version embedded non-screen users display create unnecessary redundancy recommend part process removing publishing sharing [A text earlier it]src/content/contributor-docs/images/sketch-text-outputpng ### Outputs located [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js), updated distributed library section support #### outputsjs [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js) public methods activate setting `this_accessibleOutputstext` `this_accessibleOutputsgrid `to `true` calling `this_createOutput'textOutput' Fallback'` `this_createOutput'gridOutput' passed parameter method activates `this_accessibleOutputstextLabel` calls Label'` file private `_createOutput` Depending vary initializes `thisingredients` stores data including `shapes` `colors` `pShapes` string previous `thisdummyDOM` exist HTMLCollection DOM `_updateAccsOutput` called end `setup` `draw` accessibleOutputs differs current update `_updateTextOutput` `_updateGridOutput` Calling ingredients helps avoid overwhelming access divs constantly updating `_addAccsOutput` `this_accessibleOutputs` returns true `this_accessibleOutputsgrid` `_accsBackground` `background` resets `thisingredientsshapes` `this_rgbColorName` store `thisingredientscolorsbackground` `_accsCanvasColors` fill stroke updates colors saving `thisingredientscolorsfill` `thisingredientscolorsstroke` names `_accsOutput` Builds creating src/accessibility call helper gather needed include `_getMiddle` Returns middle point centroid rectangles arcs ellipses triangles quadrilaterals `_getPos` left' mid right' `_canvasLocator` 10\\*10 mapped `_getArea` percentage total outputjs `p5prototypetriangle` `p5prototype_renderRect` `p5prototypequad` `p5prototypepoint` `p5prototypeline` `p5prototype_renderEllipse` `p5prototypearc` `p5prototyperedraw` `p5prototyperesizeCanvas` `this_setup` `p5Renderer2Dprototypestroke` `p5Renderer2Dprototypefill` `p5Renderer2Dprototypebackground` textOutputjs [src/accessibility/textOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/textOutput.js) main build summary Building supported `p5` prototype `_textSummary` `_shapeDetails` `_shapeList` gridOutputjs [src/accessibility/gridOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/gridOutput.js) `this_accessibleOutputsgridLabel` maps `_gridSummary` `_gridMap` `_gridShapeDetails` line color\\_namerjs naming important [src/accessibility/color\\_namer.js](https://github.com/processing/p5.js/blob/main/src/accessibility/color_namer.js) `_rgbColorName` receives RGBA values [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js). `p5color_conversion_rgbaToHSBA` HSV `_calculateColor` [colorNamer.js](https://github.com/MathuraMG/color-namer/), developed [2018 Processing Foundation fellowship](https://medium.com/processing-foundation/making-p5-js-accessible-e2ce366e05a0/) consultation blind expert comparing stored `colorLookUp` array returning closest User-generated author-defined optional determines displayed [src/accessibility/describe.js](https://github.com/processing/p5.js/blob/main/src/accessibility/describe.js): `_descriptionText` Checks `FALLBACK` ensures ends punctuation mark ' adds improve readability `_describeHTML` Creates fallback tag adjacent background'pink' fill'red' noStroke circle67 circle83 triangle91 describe'A red heart bottom-right corner' LABEL page reading corner]src/content/contributor-docs/images/sketch-text-output2png describeElement groups meaning custom-drawn made multiple lines Heart corner `_elementName` checks colon character `_describeElementHTML` div describeElement'Heart' circle666 circle832 triangle912 yellow background' corner]src/content/contributor-docs/images/sketch-text-output3png"},"WebGL Contribution Guide\n":{"relativeUrl":"/contribute/webgl_contribution_guide","description":"{/* started working p5js WebGL mode source code */} reading page interested helping work grateful exists explain structure contributions offer tips making ## Resources * Read [p5js architecture overview]/webgl_mode_architecture/ understand differs 2D valuable reference implementation specifics shaders strokes [contributor guidelines]/contributor_guidelines/ information create issues set codebase test helpful bit browser's API p5js's built top [WebGL fundamentals](https://webglfundamentals.org/) core rendering concepts [The Book Shaders](https://thebookofshaders.com/) explains techniques Planning organize open [in GitHub Project](https://github.com/orgs/processing/projects/20/), divide types **System-level changes** longer-term goals far-reaching implications require discussion planning jumping **Bugs solution yet** bug reports debugging narrow ready fixed found discuss fix solutions PR** bugs decided free write **Minor enhancements** features obvious spot current needing fit agreed worth **2D features** exist expected behavior feature implemented match user requirements clear **Features contexts** ways methods coordinates 3D break generally begin **Feature requests** change requests make things mode's roadmap **Documentation** documentation Put Code related `src/webgl` subdirectory directory top-level functions split files based subject area commands light `lightingjs` materials `materialsjs` implementing user-facing classes file class occasionally internal utility `p5Framebufferjs` includes `p5Framebuffer` additionally consists framebuffer-specific subclasses main `p5RendererGL` large handles lot reason functionality description put #### `p5RendererGLjs` Initialization `p5RendererGLImmediatejs` Functionality **immediate mode** drawing shapes stored reused `beginShape` `endShape` `p5RendererGLRetainedjs` **retained reuse `sphere` `materialjs` Management blend modes `3d_primitivesjs` User-facing draw `triangle` define geometry treating input generic shape `Textjs` text Testing ### Consistency hard manually verify add unit tests confident pass adding works check consistency resulting pixels ```js test'coplanar 2D' function { const getColors = functionmode myp5createCanvas20 myp5pixelDensity1 myp5background255 myp5strokeCapmyp5SQUARE myp5strokeJoinmyp5MITER === myp5WEBGL myp5translate-myp5width/2 -myp5height/2 } myp5stroke'black' myp5strokeWeight4 myp5fill'red' myp5rect10 myp5fill'blue' myp5rect0 myp5loadPixels return [myp5pixels] assertdeepEqualgetColorsmyp5P2D getColorsmyp5WEBGL ``` turn antialiasing slightly straight lines axes WebGL-only comparing ensure color expect day robust system compares full image snapshots results pixel test'color interpolation' renderer myp5createCanvas256 // upper lower center myp5beginShape myp5fill200 myp5vertex-128 -128 myp5vertex128 myp5fill0 myp5endShapemyp5CLOSE assertequalrenderer_useVertexColor true assertdeepEqualmyp5get128 [100 255] Performance #1 concern hit performance Typically creating sketches compare frame rates advice measure Disable friendly errors `p5disableFriendlyErrors true` sketch `p5minjs` include error Display average rate sense steady state frameRateP avgFrameRates [] frameRateSum numSamples setup createP frameRatePposition0 frameRate / avgFrameRatespushrate += avgFrameRateslength > -= avgFrameRatesshift frameRatePhtmlroundframeRateSum + avg fps' cases stress parts pipeline complicated model long curve simple `line` called times loop"},"p5.js WebGL Mode Architecture\n":{"relativeUrl":"/contribute/webgl_mode_architecture","description":"{/* overview design decisions make WebGL mode motivation */} document intended contributors library makers extend codebase sketches reading tutorials [on p5js Tutorials page](https://p5js.org/tutorials/#webgl) ## renderers run 2D user [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/) built web browser rendering high-performance 3D graphics key difference direct access computer's GPU allowing performantly render shapes perform image processing tasks track progress issues [a GitHub Project.](https://github.com/orgs/processing/projects/20/) Goals evaluating feature aligns goals **Features beginner-friendly** provide beginner-friendly introduction features offers means offer simple APIs cameras lighting shaders support advanced interfere simplicity core **Improving parity mode** frictionless transition making click easily users create work shader aims superset mode's **Simplicity extensibility paramount** small extensible libraries Keeping makes easier optimize reduce bug surface area Extension avenue include **Improve performance** fast interfering previous Good performance accessible wide variety viewers devices designing ensure performant implementation give preference Design differences browser's canvas context levels abstraction generally lower-level higher-level motivates fundamental p5js's modes * **WebGL creates deeply nested data structures** passes commands leading shallow call stacks contrast responsible breaking triangles caching future reuse complicated logic necessitates splitting code number classes `p5Texture` `p5RenderBuffer` `p5DataArray` implementations readable maintainable customization** control curves rendered converting picks default `curveDetail` API lets line segments predict balance quality case high- low-level APIs** finer-grained faced task picking level high unable advantage low pass managing complexity Drawing ### Creating fills strokes geometry drawn consists draw shape ready component composed calls function `circle` `beginShape` `vertex` renderer [break series points](https://github.com/processing/p5.js/blob/main/src/webgl/3d_primitives.js). points connected lines trigonometry figure place circle `curveVertex` `bezierVertex` look-up tables turn Bézier curve #### Fills outline filled drawing functions `beginShapeTRIANGLE_STRIP` made [libtess](https://github.com/brendankenny/libtess.js/) break [p5.RendererGL.Immediate.js](https://github.com/processing/p5.js/blob/main/src/webgl/p5.RendererGL.Immediate.js), polygon outlines `_processVertices` libtess turns format screen Strokes varying widths styles expand centers form expansion types joins caps illustrated Generated https://codepen.io/davepvm/pen/ZEVdppQ connect add join miter extends edges rectangles intersect point bevel connects corners straight round circular arc switching recompute quad extent bounds display pixels present selected style illustrate fits similar strategy stroke disconnected ends cap square extended determines calculated change based camera's perspective avoid recalculation store information camera-dependent **center line** model space shown red **direction tangent start end blue pink helps compute **a flag uniquely identifies corner shape** Combined normal 90-degree rotation determine direction thickness combine camera intrinsics produce final positions Rendering retained **immediate **retained **Immediate optimized frame time drew spend storing saves memory variations `quadraticVertex` called `endShape` `rect` rounded `bezier` `curve` `line` `image` Retained redrawing dont re-triangulating sending saved `p5Geometry` object stores triangle uploaded buffers Calling `freeGeometry` clears re-upload `sphere` `cone` internally `buildGeometry` runs collects p5Geometry returns redrawn efficiently Materials lights single pick write materials system scene reacts light including color shininess Custom material behavior Shaders **Color Shader** flat colors activated `fill` `stroke` **Lighting complex textures Activated calling `lights` `ambientLight` `directionalLight` `pointLight` `spotLight` adds list added contribute shading fill **Normal/Debug `normalMaterial` Lights Users set parameters position contributes view-independent view-dependent reflections reflection matches desired setting `specularColor` **color shader** properties **Fill color** Set applies `beginShape`/`endShape` apply vertex texture `texture` override mixed diffuse describes bright dark areas due directly cast **Specular material** specular reflected highlights shape's parameter `specularMaterial` unspecified **Shininess** `shininess` sharp **Ambient ambient Ambient constant omnidirectional `ambientMaterial` **Emissive `emissiveMaterial` producing Shader turned attributes uniforms reference custom supply automatically writers unclear Future section describe plans improving improve publicly documenting supporting Global objects contexts global `uniform mat4 uModelViewMatrix` matrix convert object-space camera-space uProjectionMatrix` mat3 uNormalMatrix` normals Additionally per-vertex `attribute vec3 aPosition` aNormal` pointing outward vec2 aTexCoord` coordinate referring location aVertexColor` optional bool uUseLighting` provided `uUseLighting` passed ##### int uAmbientLightCount` maximum uAmbientColor[5]` Directional uDirectionalLightCount` directional uLightingDirection[5]` Light directions uDirectionalDiffuseColors[5]` uDirectionalSpecularColors[5]` Point uPointLightCount` uPointLightLocation[5]` Locations uPointLightDiffuseColors[5]` Diffuse uPointLightSpecularColors[5]` Specular Spot uSpotLightCount` spot float uSpotLightAngle[5]` cone radii uSpotLightConc[5]` Concentration focus uSpotLightDiffuseColors[5]` uSpotLightSpecularColors[5]` uSpotLightLocation[5]` locations uSpotLightDirection[5]` Fill vec4 uMaterialColor` uUseVertexColor` Per-vertex isTexture` sampler2D uSampler` uTint` tint multiplier uSpecular` show uShininess` uSpecularMatColor` blend uHasSetAmbient` uAmbientMatColor` inputs Lines supplied uViewport` vector `[minX minY maxX maxY]` rectangle uPerspective` boolean projection uStrokeJoin` enum representing represent `ROUND` `MITER` `BEVEL` uStrokeCap` `PROJECT` `SQUARE` aTangentIn` segment aTangentOut` aSide` part details Points uPointSize` radius Classes ```mermaid --- title classDiagram class Base[p5Renderer] { } P2D[p5Renderer2D] WebGL[p5RendererGL] Geometry[p5Geometry] Shader[p5Shader] Texture[p5Texture] Framebuffer[p5Framebuffer] Base <|-- P2D o-- Geometry *-- Texture Framebuffer ``` entry **p5RendererGL** Top-level current conform common `p5Renderer` interface split `p5RendererGLImmediatejs` `p5RendererGLRetainedjs` references models stored `retainedModegeometry` map `modelyourGeometry` geometry's resources main `p5Graphics` entries represented `p5Shader` `shaderyourShader` handles compiling source uniform type `p5Image` `p5MediaElement` `p5Framebuffer` asset data's representation send images manually updated assets changed video Textures unique Framebuffers surfaces Unlike `p5Framebuffer`s live transferred CPU bottleneck extra transfer reason functional aim building blocks craft extensions block considered confidently commit major milestone sufficient ecosystem lacking extension **Extend richer content** accomplish supported stable update animated gltf group multiple imported unsupported **Enable brittle shaders** integrates forced scratch copy paste parts versions internal naming structure import pieces positioning augment [an issue open task.](https://github.com/processing/p5.js/issues/6144/) strike method introduce tune output faster lower-quality Line bottlenecks state benefit lower fidelity higher options methods usage patterns `endShapeshouldClose count` supports instanced efficient"}},"examples-fallback":{"Shape Primitives":{"relativeUrl":"/examples/shapes-and-color-shape-primitives","description":"program demonstrates basic shape primitive functions square rect ellipse circle arc line triangle quad"},"Color":{"relativeUrl":"/examples/shapes-and-color-color","description":"expands Shape Primitives adding color background fills canvas stroke sets drawing lines fill inside shapes noStroke noFill turn line Colors represented ways demonstrates options"},"Drawing Lines":{"relativeUrl":"/examples/animation-and-variables-drawing-lines","description":"Click drag mouse draw line demonstrates built-in variables mouseX mouseY store current position previous represented pmouseX pmouseY * shows colorMode HSB hue-saturation-brightness variable sets hue"},"Animation with Events":{"relativeUrl":"/examples/animation-and-variables-animation-with-events","description":"demonstrates loop noLoop pause resume animation Clicking mouse toggles stopped user press key advance frame Note click set focus canvas presses registered Advancing single accomplished calling redraw function results call draw"},"Mobile Device Movement":{"relativeUrl":"/examples/animation-and-variables-mobile-device-movement","description":"deviceMoved function runs mobile device displaying sketch moves accelerationX accelerationY accelerationZ values set position size circle works devices"},"Conditions":{"relativeUrl":"/examples/animation-and-variables-conditions","description":"statements block code run condition true animates mouse held statement line read p5 reference MDN Comparison operators form conditions comparing values hue circle resets comparison Logical combined && checks black fill horizontal center canvas white circle's position || reverses speed reaches left edge"},"Words":{"relativeUrl":"/examples/imported-media-words","description":"text function inserting canvas change font size loadFont fontSize functions aligned left center textAlign shapes colored fill"},"Copy Image Data":{"relativeUrl":"/examples/imported-media-copy-image-data","description":"copy method simulate coloring image copying colored top black-and-white cursor dragged"},"Alpha Mask":{"relativeUrl":"/examples/imported-media-alpha-mask","description":"mask method create image transparency parts run locally files running local server"},"Image Transparency":{"relativeUrl":"/examples/imported-media-image-transparency","description":"program overlays image modifying alpha tint function Move cursor left canvas change image's position run locally file running local server"},"Audio Player":{"relativeUrl":"/examples/imported-media-create-audio","description":"createAudio creates audio player displays player's controls adjusts speed playback normal mouse left edge window faster moves information media elements players p5MediaElement reference page file public domain piano loop Josef Pres"},"Video Player":{"relativeUrl":"/examples/imported-media-video","description":"noCanvas createVideo functions upload video DOM embedding canvas building embedded element visit Video Canvas"},"Video on Canvas":{"relativeUrl":"/examples/imported-media-video-canvas","description":"createVideo image functions upload video canvas capture passed constructor add filters filter method run locally running local server build embedding visit Video"},"Video Capture":{"relativeUrl":"/examples/imported-media-video-capture","description":"createCapture image functions device's video capture draw canvas passed constructor add filters filter method strategies uploading presenting styling videos visit Video Canvas examples"},"Image Drop":{"relativeUrl":"/examples/input-elements-image-drop","description":"drop p5js element method registers callback time file loaded uploaded created p5File class check type write conditional statements responding"},"Input and Button":{"relativeUrl":"/examples/input-elements-input-button","description":"createElement createInput createButton functions string text submitted input display canvas"},"Form Elements":{"relativeUrl":"/examples/input-elements-dom-form-elements","description":"Document Object Model DOM represents resulting structure web page p5js's form elements createInput createSelect createRadio build ways information submitted select input radio button update based"},"Translate":{"relativeUrl":"/examples/transformation-translate","description":"translate function moves origin coordinate system location push pop functions save restore drawing settings fill color Note draw shapes rectangle circle time"},"Rotate":{"relativeUrl":"/examples/transformation-rotate","description":"rotate function rotates current coordinate system origin Note default upper left corner canvas order center translate push pop functions save restore"},"Scale":{"relativeUrl":"/examples/transformation-scale","description":"scale function scales current coordinate system factor push pop functions save restore square size drawn origin scaling factors"},"Linear Interpolation":{"relativeUrl":"/examples/calculating-values-interpolate","description":"Interpolation calculates values number halfway types interpolation rates change Linear abbreviated lerp constant rate function linearly interpolates numbers Move mouse screen symbol follow drawing frame animation ellipse moves part distance current position cursor"},"Map":{"relativeUrl":"/examples/calculating-values-map","description":"map function converts range cursor's horizontal position 0-720 0-360 resulting circle's hue Map vertical 0-400 20-300 diameter"},"Random":{"relativeUrl":"/examples/calculating-values-random","description":"demonstrates random function user presses mouse button position color circle change randomly"},"Constrain":{"relativeUrl":"/examples/calculating-values-constrain","description":"draws circle cursor's position rectangle passing mouse's coordinates constrain function"},"Clock":{"relativeUrl":"/examples/calculating-values-clock","description":"current time read minute hour functions map calculate angle hands transformations set position"},"Color Interpolation":{"relativeUrl":"/examples/repetition-color-interpolation","description":"Interpolation calculates values number halfway types interpolation rates change Linear abbreviated lerp constant rate function linearly interpolates numbers lerpColor demonstrated colors stripeCount variable adjusts horizontal stripes Setting higher individual gradient"},"Color Wheel":{"relativeUrl":"/examples/repetition-color-wheel","description":"illustrates appearance hues loop repeat transformations initializes variable called angle rotation circle hue time repeats drawn relative center canvas push pop functions make affect individual"},"Bezier":{"relativeUrl":"/examples/repetition-bezier","description":"bezier curves created control anchor points parameters function point curve middle set define shape"},"Kaleidoscope":{"relativeUrl":"/examples/repetition-kaleidoscope","description":"kaleidoscope optical instrument reflecting surfaces tilted angle translate rotate scale functions replicate resulting visual canvas"},"Noise":{"relativeUrl":"/examples/repetition-noise","description":"Perlin noise algorithm written Ken produce sequences random organic function p5 produces dots sized based values slider left sets distance offset calculation"},"Recursive Tree":{"relativeUrl":"/examples/repetition-recursive-tree","description":"rendering simple tree-like structure recursion branching angle calculated function horizontal mouse location Move left change Based Daniel Shiffman's Recursive Tree Processing"},"Random Poetry":{"relativeUrl":"/examples/listing-data-with-arrays-random-poetry","description":"floor random functions randomly select series items array draw sizes positions canvas"},"Sine and Cosine":{"relativeUrl":"/examples/angles-and-motion-sine-cosine","description":"demonstrates sine cosine mathematical functions animation shows uniform circular motion unit circle radius angle measured x-axis determines point defined coordinates"},"Aim":{"relativeUrl":"/examples/angles-and-motion-aim","description":"atan2 function calculates angle positions rotate shape eyes cursor"},"Triangle Strip":{"relativeUrl":"/examples/angles-and-motion-triangle-strip","description":"demonstrates create shape vertices TRIANGLE_STRIP mode beginShape endShape vertex functions"},"Circle Clicker":{"relativeUrl":"/examples/games-circle-clicker","description":"demonstrates game time limit score browser's local storage stores high played browser remains Clearing data clears"},"Ping Pong":{"relativeUrl":"/examples/games-ping-pong","description":"game inspired oldest arcade video games Atari's Pong two-player player controls paddle represented white rectangle keys move left arrow Players score points bouncing ball square past edge opponent's side canvas`"},"Snake":{"relativeUrl":"/examples/games-snake","description":"reproduction type arcade game called Snake Blockade released games structure player controls movements snake represented green line player's goal collide fruit red dot time collides grows longer grow long colliding edges play area array vectors store positions segments arrow keys control snake's movement"},"Geometries":{"relativeUrl":"/examples/3d-geometries","description":"p5's WEBGL mode includes primitive shapes plane box cylinder cone torus sphere ellipsoid Additionally model displays custom geometry loaded loadModel NASA's collection"},"Custom Geometry":{"relativeUrl":"/examples/3d-custom-geometry","description":"buildGeometry function stores shapes 3D model efficiently reused"},"Materials":{"relativeUrl":"/examples/3d-materials","description":"3D rendering material determines surface responds light p5's WEBGL mode supports ambient emissive normal specular materials source p5 displays color contexts typically emits visualizes direction part faces respond Ambient combined fill stroke Fill sets base object's vertices Additionally texture wraps object image model NASA's collection"},"Orbit Control":{"relativeUrl":"/examples/3d-orbit-control","description":"Orbit control mouse touch input adjust camera orientation 3D sketch rotate left click drag swipe screen pan multiple fingers move closer center scroll wheel pinch in/out"},"Filter Shader":{"relativeUrl":"/examples/3d-filter-shader","description":"Filter shaders apply effect canvas applied video"},"Adjusting Positions with a Shader":{"relativeUrl":"/examples/3d-adjusting-positions-with-a-shader","description":"Shaders adjust positions vertices shapes lets distort animate 3D models"},"Framebuffer Blur":{"relativeUrl":"/examples/3d-framebuffer-blur","description":"shader depth information p5Framebuffer apply blur real camera objects blurred closer farther lens's focus simulates effect sketch renders spheres framebuffer canvas"},"Create Graphics":{"relativeUrl":"/examples/advanced-canvas-rendering-create-graphics","description":"createGraphics function create p5Graphics object serve off-screen graphics buffer canvas Off-screen buffers dimensions properties current display surface existing space"},"Multiple Canvases":{"relativeUrl":"/examples/advanced-canvas-rendering-multiple-canvases","description":"default p5 runs Global Mode means functions global scope canvas-related apply single canvas run Instance methods instance class mode function defined parameter representing labeled variables typically belong function's Passing constructor"},"Shader as a Texture":{"relativeUrl":"/examples/advanced-canvas-rendering-shader-as-a-texture","description":"Shaders applied 2D/3D shapes textures learn shaders p5js"},"Snowflakes":{"relativeUrl":"/examples/classes-and-objects-snowflakes","description":"demonstrates particle system simulate motion falling snowflakes program defines snowflake class array hold objects"},"Shake Ball Bounce":{"relativeUrl":"/examples/classes-and-objects-shake-ball-bounce","description":"class create collection circles move canvas response tilt mobile device open page display sketch"},"Connected Particles":{"relativeUrl":"/examples/classes-and-objects-connected-particles","description":"custom classes Particle class stores position velocity hue renders circle current updates Path array objects created lines connecting particles user clicks mouse sketch creates instance drags adds path"},"Flocking":{"relativeUrl":"/examples/classes-and-objects-flocking","description":"Demonstration flocking behavior Full discussion implementation found Nature Code book Daniel Shiffman simulation based research Craig Reynolds term boid represent bird-like object"},"Local Storage":{"relativeUrl":"/examples/loading-and-saving-data-local-storage","description":"Browsers websites store data visitor's device called local storage getItem storeItem clearStorage removeItem functions control inspired Daniel Shiffman's Loading JSON Data Tabular examples Processing written Java class organize bubble visitor add bubbles saved revisits sketch reload"},"JSON":{"relativeUrl":"/examples/loading-and-saving-data-json","description":"JavaScript Object Notation JSON format writing data file syntax contexts based Daniel Shiffman's Loading Data Processing written Java class organize bubble sketch starts loads bubbles visitor add download updated load"},"Table":{"relativeUrl":"/examples/loading-and-saving-data-table","description":"Comma-Separated Values CSV format writing data file p5 work p5Table based Daniel Shiffman's Loading Tabular Data Processing class organize representing bubble sketch starts loads bubbles visitor add download updated load"},"Non-Orthogonal Reflection":{"relativeUrl":"/examples/math-and-physics-non-orthogonal-reflection","description":"demonstrates ball bouncing slanted surface implemented vector calculations reflection code makes extensive p5Vector class including createVector function create vectors methods add dot"},"Soft Body":{"relativeUrl":"/examples/math-and-physics-soft-body","description":"Physics simulation soft body experiencing acceleration mouse position shape created curves curveVertex curveTightness"},"Forces":{"relativeUrl":"/examples/math-and-physics-forces","description":"Demonstration multiple forces acting bodies Bodies experience gravity continuously fluid resistance water natureofcodecom force calculations performed p5Vector class including createVector function create vectors"},"Smoke Particles":{"relativeUrl":"/examples/math-and-physics-smoke-particle-system","description":"Smoke particle system demo based Dan Shiffman's original Processing code makes p5Vector class including createVector function calculations updating particles positions velocities performed methods implemented array objects Particle"},"Game of Life":{"relativeUrl":"/examples/math-and-physics-game-of-life","description":"Game Life cellular automaton created mathematician John Conway type simulation grid cells cell dead alive black squares represent living white runs switch based set rules live fewer neighbours dies lives unchanged generation life generate complex interactions Click canvas start randomized Clicking restart"},"Mandelbrot Set":{"relativeUrl":"/examples/math-and-physics-mandelbrot","description":"Colorful rendering Mandelbrot set based Daniel Shiffman's Processing"}},"libraries-fallback":{"BasicECSJs":{"relativeUrl":"/libraries/","description":"A basic javascript ECS system, with SceneManagers, Scenes and GameObjects with their own Start and Update functions."},"BasicUnitTesterJs":{"relativeUrl":"/libraries/","description":"BasicUnitTesterJs is a basic javascript unit tester designed to work on all JS platforms and be small and streamlined for the best developer experience."},"DoubleLinkedListLibJs":{"relativeUrl":"/libraries/","description":"A simple double linked list that stores the head, tail and length of the list"},"MatrixJs":{"relativeUrl":"/libraries/","description":"A basic javascript library for dynamic and powerful matrices based on lists wrapped around with a powerful class."},"OneWayLinkedListLibJs":{"relativeUrl":"/libraries/","description":"A simple one way linked list that stores the head, tail and length of the list"},"Tilemapp5js":{"relativeUrl":"/libraries/","description":"A simple to use & performant tilemap p5.js library"},"TurtleGFX":{"relativeUrl":"/libraries/","description":"TurtleGFX allows to code with Turtle Graphics in JavaScript. Great for education and creative coding."},"VecJs":{"relativeUrl":"/libraries/","description":"A basic javascript library for dynamic vectors (e.g. vec2 & vec3) based on lists."},"WebGL2FBO":{"relativeUrl":"/libraries/","description":"A simple library for OOP encapsulation and abstraction of some of WebGL2 Framebuffers and the Renderbuffers they rely on"},"WebGL2Tex":{"relativeUrl":"/libraries/","description":"A simple library for OOP encapsulation and abstraction of some of the different WebGL2 textures while still giving full control over them."},"BMWalker.js":{"relativeUrl":"/libraries/","description":"A simple JavaScript library for drawing the biological motion 'Walker'."},"c2.js":{"relativeUrl":"/libraries/","description":"c2.js is a JavaScript library for creative coding based on computational geometry, physics simulation, evolutionary algorithm and other modules."},"canvasGUI":{"relativeUrl":"/libraries/","description":"Create GUI controls directly on your canvas."},"concaveHull":{"relativeUrl":"/libraries/","description":"Calculate a Concave Hull from a set of points in 2D space"},"HY5":{"relativeUrl":"/libraries/","description":"hydra 🙏 p5.js ~ share visuals between both frameworks!"},"lygia":{"relativeUrl":"/libraries/","description":"LYGIA is a shader library of reusable functions that will let you prototype, port or ship a project in just few minutes. It's very granular, flexible and efficient. Support multiple shading languages and can easily be added to any project, enviroment or framework of your choice. \n"},"ml5.js":{"relativeUrl":"/libraries/","description":"Friendly machine learning for the web—a neighborly approach to creating and exploring artificial intelligence in the browser."},"número":{"relativeUrl":"/libraries/","description":"A friendly and intuitive math library for p5.js."},"p5.FIP":{"relativeUrl":"/libraries/","description":"Real-time image processing library - add filters and post-processing to your p5.js sketches."},"p5.Polar":{"relativeUrl":"/libraries/","description":"p5.Polar provides mathematical abstractions making it easy to create create beautiful, kaleidoscopic, radial patterns."},"p5.SceneManager":{"relativeUrl":"/libraries/","description":"p5.SceneManager helps you create sketches with multiple states / scenes. Each scene is a like a sketch within the main sketch."},"p5.Utils":{"relativeUrl":"/libraries/","description":"p5.Utils is a tool collection for my coding class, featuring a pixel ruler, gradient fill color bindings, and other helpful shortcuts for beginners."},"p5.anaglyph":{"relativeUrl":"/libraries/","description":"A library for creating 3D stereoscopic 3D scenes and images using red/cyan glasses"},"p5.animS":{"relativeUrl":"/libraries/","description":"Animates p5.js shapes by rendering their drawing processes."},"p5.asciify":{"relativeUrl":"/libraries/","description":"Apply real-time ASCII conversion to your favourite WebGL p5.js sketches to create unique, text-based visuals instantly."},"p5.bezier":{"relativeUrl":"/libraries/","description":"p5.bezier helps draw Bézier curves with more than four control points and closed curves."},"p5.ble":{"relativeUrl":"/libraries/","description":"A Javascript library that enables communication between your BLE devices and your p5.js sketch."},"p5.brush":{"relativeUrl":"/libraries/","description":"Unlock custom brushes, natural fill effects and intuitive hatching in p5.js."},"p5.capture":{"relativeUrl":"/libraries/","description":"Record your p5.js sketches effortlessly!"},"p5.cmyk":{"relativeUrl":"/libraries/","description":"CMYK color for p5.js"},"p5.collide2d":{"relativeUrl":"/libraries/","description":"p5.collide2D provides tools for calculating collision detection for 2D geometry with p5.js."},"p5.colorGenerator":{"relativeUrl":"/libraries/","description":"p5.colorGenerator generates harmonious color schemes by starting from a given base color or selecting a random color as a starting point."},"p5.createLoop":{"relativeUrl":"/libraries/","description":"Create animation loops with noise and GIF exports in one line of code."},"p5.csg":{"relativeUrl":"/libraries/","description":"A library for constructive solid geometry. Do Boolean operations on your p5.Geometry to make new shapes!"},"p5.fab":{"relativeUrl":"/libraries/","description":"p5.fab controls digital fabrication machines from p5.js!\n"},"p5.fillGradient":{"relativeUrl":"/libraries/","description":"Fill shapes in p5.js with Linear, Radial and Conic Gradients."},"p5.filterRenderer":{"relativeUrl":"/libraries/","description":"A library for rendering 3D scenes with depth-of-field blur and with ambient occlusion shadows."},"p5.flex":{"relativeUrl":"/libraries/","description":"p5 container with responsive canvas feature."},"p5.geolocation":{"relativeUrl":"/libraries/","description":"p5.geolocation provides techniques for acquiring, watching, calculating, and geofencing user locations for p5.js."},"p5.glitch":{"relativeUrl":"/libraries/","description":"p5.js library for glitching images and binary files in the web browser"},"p5.grain":{"relativeUrl":"/libraries/","description":"Conveniently add film grain, seamless texture overlays, and manipulate pixels to achieve nostalgic and artistic effects in p5.js sketches and artworks."},"p5.joystick":{"relativeUrl":"/libraries/","description":"Connect and play with physical joysticks."},"p5.localessage":{"relativeUrl":"/libraries/","description":"p5.localmessage provides a simple interface to send messages locally from one sketch to another."},"p5.mapper":{"relativeUrl":"/libraries/","description":"A projection mapping library for p5.js"},"p5.marching":{"relativeUrl":"/libraries/","description":"Raster to vector conversion, isosurfaces."},"p5.palette":{"relativeUrl":"/libraries/","description":"A library to manage color palettes in p5.js"},"p5.party":{"relativeUrl":"/libraries/","description":"quickly prototype networked multiplayer games and apps"},"p5.pattern":{"relativeUrl":"/libraries/","description":"A pattern drawing library for p5.js."},"p5.qol":{"relativeUrl":"/libraries/","description":"Extend p5 with Quality of Life utilities."},"p5.quadrille.js":{"relativeUrl":"/libraries/","description":"A library for creating puzzle and board games, and for visual computing experiments."},"p5.Riso":{"relativeUrl":"/libraries/","description":"p5.Riso is a library for generating files suitable for Risograph printing. It helps turn your sketches into multi-color prints."},"p5.scaler":{"relativeUrl":"/libraries/","description":"Smart scaling of p5.js sketches in a variety of ways (to fit the browser's inner dimensions, to fit the canvas DOM container, to a specific ratio, etc)."},"p5.serialserver":{"relativeUrl":"/libraries/","description":"p5.serialserver is a p5.js library that enables communication between your p5.js sketch and a serial enabled device, for example, an Arduino microcontroller."},"p5.simpleAR":{"relativeUrl":"/libraries/","description":"A simple JavaScript library that easily converts existing p5.js sketches to AR."},"p5.speech":{"relativeUrl":"/libraries/","description":"p5.speech provides simple, clear access to the Web Speech and Speech Recognition APIs, allowing for the easy creation of sketches that can talk and listen."},"p5.teach.js":{"relativeUrl":"/libraries/","description":"A beginner friendly math animation library for p5.js"},"p5.toio":{"relativeUrl":"/libraries/","description":"A JavaScript library for controlling toio™Core Cube from p5.js sketches."},"p5.touchgui":{"relativeUrl":"/libraries/","description":"p5.touchgui is intended to extend p5.js and make it easy to add buttons, sliders, and other GUI (graphical user interface) objects to your p5.js sketches, enabling you to focus on quickly iterating ideas with easily created GUI objects that work with both mouse and multi-touch input."},"p5.treegl":{"relativeUrl":"/libraries/","description":"Shader development and space transformations WEBGL p5.js library."},"p5.tween":{"relativeUrl":"/libraries/","description":"With p5.tween you can create easily animations as tween in a few keyframes."},"p5.videorecorder":{"relativeUrl":"/libraries/","description":"Record your canvas as a video file with audio."},"p5.warp":{"relativeUrl":"/libraries/","description":"Fast 3D domain warping using shaders."},"p5.webserial":{"relativeUrl":"/libraries/","description":"A library for interacting with Serial devices from within the browser, based on Web Serial API (available on Chrome and Edge)."},"p5.xr":{"relativeUrl":"/libraries/","description":"A library for creating VR and AR sketches with p5."},"p5grid":{"relativeUrl":"/libraries/","description":"Hexagonal Tiling Library"},"p5jsDebugCam":{"relativeUrl":"/libraries/","description":"A basic keyboard only debug camera for p5.js"},"p5mirror":{"relativeUrl":"/libraries/","description":"A library to download your editor.p5js sketches into a git repo or locally"},"p5play":{"relativeUrl":"/libraries/","description":"JS game engine that uses p5.js for graphics and Box2D for physics."},"p5snap":{"relativeUrl":"/libraries/","description":"a command-line interface to create snapshots of sketches"},"p5videoKit":{"relativeUrl":"/libraries/","description":"A dashboard for mixing video in the browser"},"pretty-grid":{"relativeUrl":"/libraries/","description":"Create and manipulate grids with Javascript"},"rita.js":{"relativeUrl":"/libraries/","description":"tools for natural language and generative writing"},"Shader Park":{"relativeUrl":"/libraries/","description":"Explore shader programming through a JavaScript interface without the complexity of GLSL. Quickly script shaders using a P5.js style language."},"simple.js":{"relativeUrl":"/libraries/","description":"Helper functions and defaults for young and new coders."},"Total Serialism":{"relativeUrl":"/libraries/","description":"A toolbox full of methods for procedurally generating and transforming arrays mainly focused on algorithmic composition. Includes methods like markov-chain, cellular automaton, lindenmayer system, euclidean distribution and much more! Generate the array with your desired method and easily iterate over them in a for-loop to draw the results."},"UI Renderer":{"relativeUrl":"/libraries/","description":"Create a UI within your sketch, including utilities for different layouts and interactive sliders."},"WEBMIDI.js":{"relativeUrl":"/libraries/","description":"A user-friendly library to send and receive MIDI messages with ease."}},"events-fallback":{"p5.js Contributors Conference 2015":{"relativeUrl":"/events/contributors-conference-2015","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro group approximately participants gathered spent week [Frank-Ratchye STUDIO Creative Inquiry](http://studioforcreativeinquiry.org/), advancing code documentation community outreach tools p5js programming environment Participants Hong Kong Seattle Los Angeles Boston York working professionals fields creative technology interaction design new-media arts included half-dozen undergraduate graduate students Carnegie Mellons Schools Art Architecture [A smile make p5 sign hands]/images/cc2015/2015_1jpg [Woman presenting statement laptop]/images/cc2015/2015_3jpg expressively speaks microphone male collaborators on]/images/cc2015/2015_4jpg [Participants attentively listen presentation]/images/cc2015/2015_5jpg reads female students]/images/cc2015/2015_6jpg sit circle white board sticky notes student microphone]/images/cc2015/2015_7jpg table laptops compare code]/images/cc2015/2015_8jpg [Whiteboard colored written programming]/images/cc2015/2015_9jpg speaking valuing skill sets powerpoint classroom]/images/cc2015/2015_10jpg podium auditorium stage skyping screen]/images/cc2015/2015_11jpg [Overhead view classroom laptops]/images/cc2015/2015_12jpg [Five people discussion circle]/images/cc2015/2015_13jpg sharing notes]/images/cc2015/2015_14jpg [Man participants]/images/cc2015/2015_15jpg jump throw hands air green lawn]/images/cc2015/2015_2jpg ## [Jason Alderman](http://huah.net/jason/), [Sepand Ansari](http://sepans.com/), [Tega Brain](http://tegabrain.com/), [Emily Chen](https://medium.com/@emchenNYC/), [Andres Colubri](http://andrescolubri.net/), [Luca Damasco](https://twitter.com/lucapodular), [Guy de Bree](http://guydebree.com/), [Christine Carteret](http://www.cjdecarteret.com/), [Xy Feng](http://xystudio.cc/), [Sarah Groff-Palermo](http://www.sarahgp.com/), [Chris Hallberg](http://www.crhallberg.com/), [Val Head](http://valhead.com/), [Johanna Hedva](http://johannahedva.com/), [Kate Hollenbach](http://www.katehollenbach.com/), [Jennifer Jacobs](http://web.media.mit.edu/~jacobsj/), [Epic Jefferson](http://www.epicjefferson.com/), [Michelle Partogi](http://michellepartogi.com/), [Sam Lavigne](http://lav.io/), [Golan Levin](http://flong.com/), [Cici Liu](http://www.liuchangitp.com/), [Maya Man](http://www.mayaman.cc/), [Lauren McCarthy](http://lauren-mccarthy.com/), [David Newbury](http://www.workergnome.com/), [Paolo Pedercini](http://molleindustria.org/), [Luisa Pereira](http://luisaph.com/), [Miles Peyton](http://mileshiroo.info/), [Caroline Record](http://carolinerecord.com/), [Berenger Recoules](http://b2renger.github.io/), [Stephanie Pi](https://pibloginthesky.wordpress.com/), Sigal](http://jasonsigal.cc/), [Kevin Siwoff](http://studioindefinit.com/), [Charlotte Stiles](http://charlottestiles.com/) Diversity Alongside technical development main focuses conference diversity began panel—[Diversity Voices Race Gender Ability Class FLOSS Internet](http://studioforcreativeinquiry.org/events/diversity-seven-voices-on-race-gender-ability-class-for-floss-and-the-internet). Organized Hedva](http://johannahedva.com/) panel place Tuesday Kresge Auditorium Mellon University Speakers [Casey Reas](http://reas.com/), [Phoenix Perry](http://phoenixperry.com/), [Taeyoon Choi](http://taeyoonchoi.com/), [Sara Hendren](http://ablersite.org/), [Chandler McWilliams](http://chandlermcwilliams.com/). poster Internet]/images/cc2015/diversity_640jpg Support contributor Inquiry](http://studioforcreativeinquiry.org/) academic laboratory atypical anti-disciplinary inter-institutional research intersections science culture event made grant [National Endowment Arts](https://arts.gov/), generous support [NYU Interactive Telecommunications Program](https://tisch.nyu.edu/itp) ITP [Processing Foundation](http://foundation.processing.org/), [TheArtificial](http://theartificial.nl/), [Bocoup](http://bocoup.com/), [Darius Kazemi](http://tinysubversions.com/), [Emergent Digital Practices | Denver] **Thank you** [The National Arts NEA]/images/logo/artworksjpg Frank-Ratchye Inquiry]/images/logo/frank-ratchyepng ITP]/images/logo/itppng Emergent program Denver]/images/logo/edppng [ITP]/images/logo/bocouppng Artificial]/images/logo/theartificialpng undefined"},"p5.js Contributors Conference 2019":{"relativeUrl":"/events/contributors-conference-2019","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro interdisciplinary group participants gathered Frank-Ratchye STUDIO Creative Inquiry advancing code documentation community outreach tools exploring current landscape p5js programming environment Comprising diverse range fields creative technology interaction design media arts conference aimed fostering dialogue multidisciplinary lens Working groups focused topic areas Access Music Code Performance Landscape Tech Internationalization Videos Qianqian Ye [Man podium giving presentation group]/images/cc2019/2019_1jpg [Participants sitting long table lunch discussion]/images/cc2019/2019_2jpg [Classroom working laptops]/images/cc2019/2019_4jpg meeting dark classroom]/images/cc2019/2019_5jpg [Woman classroom participants]/images/cc2019/2019_6jpg conversing busy classroom]/images/cc2019/2019_7jpg microphone speaking fellow classroom]/images/cc2019/2019_8jpg [Participant speaks front projected text problem anonymyzing data]/images/cc2019/2019_9jpg [Person reads add features increase access]/images/cc2019/2019_10jpg talking ]/images/cc2019/2019_11jpg [A man participants]/images/cc2019/2019_12jpg sit speakers listening intently]/images/cc2019/2019_13jpg sacred boundaries projection her]/images/cc2019/2019_15jpg [Overhead view panel people image 3d rendered it]/images/cc2019/2019_16jpg laptops observe screen]/images/cc2019/2019_17jpg lifesize teddy bear works laptop]/images/cc2019/2019_18jpg standing smiling]/images/cc2019/2019_19jpg [Four circle conversing]/images/cc2019/2019_20jpg eating together]/images/cc2019/2019_21jpg large shaped classroom]/images/cc2019/2019_22jpg energetically microphone]/images/cc2019/2019_23jpg [Group campfire made LCD monitors]/images/cc2019/campfirejpg photo smiling enthusiastically hands air]/images/cc2019/2019_24jpg Photos Jacquelyn Johnson ## Participants American Artist Omayeli Arenyeka Sina Bahram Aatish Bhatia Natalie Braginsky Jon Chambers Luca Damasco Aren Davey Ted Davis Carlos Garcia Stalgia Grigg Kate Hollenbach shawné michaelain holloway Claire Kearney-Volpe Sona Lee Kenneth Lim Evelyn Masso Lauren McCarthy LaJuné McMillian Allison Parrish Luisa Pereira Guillermo Montecinos Aarón Montoya-Moraga Luis Morales-Navarro Shefali Nayak Everest Pipkin Olivia Ross Dorothy Santos Yasheng Jun Shern Chan Cassie Tarakajian Valley Xin Alex Yixuan Xu Outputs - Blackness Gender Virtual Space led art installations prototype notebook interface Created library system p5 Editor Prototypes connecting libraries Global Contributor's Toolkit write non-violent zine overhaul website accessibility Including updates screen reader improvements home download started reference pages contributions p5grid implementation highly flexible triangle square hexagon octagon girds p5multiplayer set template files building multi-device multiplayer game multiple clients connect host page L05 Experiments P5LIVE testing early implementations softCompile OSC interfacing added connectivity demo MIDI setup collaborative live-coding vj Collaborative performances performance Workshops closing Golan Levin Support contributor place Carnegie Mellon University academic laboratory atypical anti-disciplinary inter-institutional research intersections science culture event grant National Endowment Arts generous support Processing Foundation Mozilla Clinic Open Source COSA Denver NYU Tandon IDM ITP FHNW Academy Art Design DePaul College Computing Digital Media Parsons School Technology **Thank you** [The NEA]/images/logo/artworksjpg Inquiry]/images/logo/frank-ratchyepng [University Applied Sciences Northwestern Switzerland Design]/images/logo/northwestern-switzerlandjpg [Processing Foundation]/images/logo/processing-foundationpng [Clinic Arts]/images/logo/COSApng [NYU Engineering Integrated Media]/images/logo/nyujpg [Parsons Technology]/images/logo/Parsonsjpg ITP]/images/logo/itppng [DePaul University]/images/logo/depaulpng undefined"},"p5.js Access Day 2022":{"relativeUrl":"/events/p5js-access-day-2022","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js Access Day virtual conference talk access open-source software arts OSSTA greater issues day-long online event features themed-sessions — Critical Web Accessibility Disability Arts Community Building Translation space contributors experienced practitioners projects share knowledge perspectives dreams building technical spaces Organizer curator [Qianqian Ye](https://qianqian-ye.com/) Event Coordinator Video Producer [Karen Abe](https://www.instagram.com/prod.ka/) ## Recap ASL Interpretation Opening Moderator [Kate Hollenbach](http://www.katehollenbach.com/), Speakers [Luis Morales-Navarro](http://luismn.com/), [Jes Daigle](https://twitter.com/techandautism) [Xiaowei Wang](https://www.xiaoweiwang.com/), [Natalee Decker](https://www.instagram.com/crip_fantasy/), [Kemi Sijuwade-Ukadike](https://www.linkedin.com/in/adekemisijuwade), [Kevin Gotkin](https://kevingotkin.com/) [Dorothy Santos](https://dorothysantos.com/), [Tiny Tech Zine](https://tinytechzines.org/), [Close Isnt Home](https://closeisnthome.com/), [Zainab Aliyu](https://zai.zone/) [Kenneth Lim](https://limzykenneth.com/), [Inhwa Yeom](https://yinhwa.art/), [Shaharyar Shamshi](https://shaharyarshamshi.xyz/), [Felipe Gomes](https://felipesg.cargo.site/) Closing Production - Advisor [Claire Kearney-Volpe](http://www.takinglifeseriously.com/index.html), [Saber Khan](https://www.edsaber.info/), [evelyn masso](https://outofambit.format.com/), [Lauren Lee McCarthy](http://lauren-mccarthy.com/), [Xin Xin](https://xin-xin.info/) Live [Pro Bono ASL](https://www.probonoasl.com/) Graphic Designer [Katie Chan](https://twitter.com/katiechaan) Support Abe](https://www.instagram.com/prod.ka/), [Jay Borgwardt](https://www.jayborgwardt.com/), [Yuehao Jiang](https://yuehaojiang.com/) Closed Captioning Transcription Ju Hye Kim Xiao Yi Wang-Beckval Wong](https://www.instagram.com/claireewongg/) made grant [Mozilla Foundation](https://foundation.mozilla.org/) Award generous support [Processing Foundation](https://processingfoundation.org/) [Frank-Ratchye STUDIO Creative Inquiry](http://studioforcreativeinquiry.org/). **Thank you** Foundation]/images/logo/mozilla-foundationpng [The Frank-Ratchye Inquiry]/images/logo/frank-ratchyepng Foundation]/images/logo/processing-foundationpng undefined"},"p5.js Community Salon 2023":{"relativeUrl":"/events/p5js-community-salon-2023","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js Community Salon public gathering community members share connect NYU ITP Thursday March 630-730pm event group speakers briefly work food social time ## Organizers organized Project Lead [Qianqian Ye](https://qianqian-ye.com), part IMA/ITP Fellowship supported Sonia Choi Communications Coordinator Processing Foundation Photo credit [Ziyuan Lin](https://www.ziyuanlin.com). Ye holding mic big tv screen grid contributor photos it]/images/p5js-salon-2023/salon-2JPG Speakers Zainab Aliyu [Zainab image book reading excerpt it]/images/p5js-salon-2023/salon-3JPG Aarati Akkapedi [Aarati whiteboard collection printed them]/images/p5js-salon-2023/salon-4JPG [Suhyun work]/images/p5js-salon-2023/salon-5JPG Don Hanson [Don front work]/images/p5js-salon-2023/salon-6JPG Shawné Michaelain Holloway [Shawné work]/images/p5js-salon-2023/salon-7JPG Tsige Tafesse [Tsige Open Call]/images/p5js-salon-2023/salon-8JPG Rachel Lim [Rachel Web Editor Features]/images/p5js-salon-2023/salon-9JPG Jackie Liu [Jackie series screenshots game project Chao bing]/images/p5js-salon-2023/salon-10JPG Olivia McKayla Ross [Olivia p5 salon poster it]/images/p5js-salon-2023/salon-11JPG Munus Shih [Munus pronouns facts him]/images/p5js-salon-2023/salon-12JPG Xin [Xin text work]/images/p5js-salon-2023/salon-13JPG Lavanya Suresh [Lavanya Kolams]/images/p5js-salon-2023/salon-14JPG [p5js poster]/images/p5js-salon-2023/0-banner-p5js-community-salonjpg [A presenters organizers smiling making silly faces camera kneeling standing upright]/images/p5js-salon-2023/salon-15JPG audience sitting crowded room curious expression]/images/p5js-salon-2023/salon-16JPG ### Recap Video Part Support **Thank you** [NYU ITP]/images/logo/itppng undefined"},"Sovereign Tech Fund x p5.js Documentation Accessibility Project":{"relativeUrl":"/events/stf-2024","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js selected receive total €450000 rounds funding [Sovereign Tech Fund](https://sovereigntechfund.de/en) enhance [p5js Documentation organization accessibility](https://www.sovereigntechfund.de/tech/p5js). work part Sovereign Funds [Contribute Back Open Source Challenges](https://sovereigntechfund.de/en/challenges/). project addressed longstanding challenges scatterness limited accessibility documentation final deliverable includes updated website focus accessible organized translated contributor Additionally features curated collection community sketches add-ons library educational resources providing improved aims facilitate effective navigation feature exploration empowering users create richer innovative projects promotes inclusivity ensuring people diverse backgrounds skill levels cultures engage meaningfully ## Contributors brought approximately contributors 60-75 participating round team included experienced first-time forming global group dedicated writing translating designing engineering researching conducting reviews open-source typically operate independently fostered collective efforts encouraging collaboration individuals skills perspectives shift collaborative endeavors led cohesive synergistic approach advancing exemplifying strength community-driven initiatives landscape **Thank participated STF made 💗** Processing Foundation administrative support** ### Round *September December 2023* #### Internal Team * Project Lead Manager Qianqian Ye Doc Kenneth Lim Dave Pagurek Nick McIntyre Assistant Karen Abe Website Designer Stefanie Tam Tyler Yin Developer Bocoup cypress masso Stalgia Grigg Carmen Cañas Isaac Durazo Accessibility Consultant Andy Slater Proofreader Fivver Definition Workshop Organizer Winnie Koundinya Dhulipalla Facilitator Yasmine Boudiaf Jazmin Morris Participants UAL CCI Examples Caleb Foss Writer Darren Kessner Kathryn Lichlyter Reviewer Amy Chen Lance Cole Tutorials Writers Reviewers Joanne Amarisa Gregory Benedis-Grab Christine Belzie Tristan Bunn Julien Kris Ruth Ikegah Portia Morrell Jaleesa Trapp Akanksha Vyas WebGL Adam Ferriss Contributor Alm Chung Tanvi Kumar Luis Morales-Navarro Community Statement Code Conduct Oluwakemi Oritsejafor Zainab Aliyu *January April 2024* Copywriter Sarah Ciston sketch Curator Special Sinan Ascioglu OpenProcessing supporting Translation Researcher Spanish Steward Cristian Bañuelos Sebastián Méndez Diana Galindo Clavijo Xavier Gongora Marcela Martinez Galvan Emilio Ocelotl Reyes Marianne Teixido Guzmán Chinese Weijia Li Miaoye Chirui Cheng Lingxiao Wang Shengnan Angela Rong Yudi Wu Hindi Divyansh Srivastava Eshaan Aggarwal Akash Jaiswalm Aditya Rana Sanjay Singh Rajpoot Surbhi Pittie Korean Inhwa Yeom Sejin Yewon Jang Yunyoung Minwook Park Sunghun Hyunwoo Rhee Reference Technical Layla Quiñones Nat Decker thai Lu Cielo Saucedo Liam Coleman Revisions Kate Machmeyer Support supported Fund supports development improvement maintenance open digital infrastructure public interest goal strengthen source ecosystem sustainably focusing security resilience technological diversity code funded German Federal Ministry Economic Affairs Climate Action BMWK hosted Agency Disruptive Innovation GmbH SPRIND **Thanks project** Links [STF](https://www.sovereigntechfund.de/programs/challenges): Contribute Open-source Challenge [MEDIUM](https://medium.com/@ProcessingOrg/p5-js-receives-major-funding-from-the-sovereign-tech-fund-bbf61d1171fe): Receives Major Funding Fund]/images/logo/stfwebp undefined"}},"people-fallback":{"A Welles":{"relativeUrl":"/people/#a-welles"},"Aarati Akkapeddi ":{"relativeUrl":"/people/#aarati-akkapeddi-"},"Aaron Casanova":{"relativeUrl":"/people/#aaron-casanova"},"Aaron George":{"relativeUrl":"/people/#aaron-george"},"aarón montoya-moraga":{"relativeUrl":"/people/#aaron-montoya-moraga"},"Aaron Ni":{"relativeUrl":"/people/#aaron-ni"},"Aatish Bhatia":{"relativeUrl":"/people/#aatish-bhatia"},"Abdiel Lopez":{"relativeUrl":"/people/#abdiel-lopez"},"Abe Pazos":{"relativeUrl":"/people/#abe-pazos"},"Abhi Gulati":{"relativeUrl":"/people/#abhi-gulati"},"Abhinav Kumar":{"relativeUrl":"/people/#abhinav-kumar"},"Abhinav Sagar":{"relativeUrl":"/people/#abhinav-sagar"},"Abhinav Srinivas":{"relativeUrl":"/people/#abhinav-srinivas"},"Abishake":{"relativeUrl":"/people/#abishake"},"Acha":{"relativeUrl":"/people/#acha"},"Adam Ferriss":{"relativeUrl":"/people/#adam-ferriss"},"Adam Král":{"relativeUrl":"/people/#adam-kral"},"Adam Smith":{"relativeUrl":"/people/#adam-smith"},"Adarsh":{"relativeUrl":"/people/#adarsh"},"Adil Rabbani":{"relativeUrl":"/people/#adil-rabbani"},"Aditya Deshpande":{"relativeUrl":"/people/#aditya-deshpande"},"Aditya Mohan":{"relativeUrl":"/people/#aditya-mohan"},"Aditya Rachman Putra":{"relativeUrl":"/people/#aditya-rachman-putra"},"Aditya Rana":{"relativeUrl":"/people/#aditya-rana"},"Aditya Shrivastav":{"relativeUrl":"/people/#aditya-shrivastav"},"Aditya Siddheshwar":{"relativeUrl":"/people/#aditya-siddheshwar"},"aditya123473892":{"relativeUrl":"/people/#aditya123473892"},"Adwaith D":{"relativeUrl":"/people/#adwaith-d"},"agrshch":{"relativeUrl":"/people/#agrshch"},"Ahmet Kaya":{"relativeUrl":"/people/#ahmet-kaya"},"Aidan Nelson":{"relativeUrl":"/people/#aidan-nelson"},"Aierie":{"relativeUrl":"/people/#aierie"},"Ajaya Mati":{"relativeUrl":"/people/#ajaya-mati"},"ajayTDM":{"relativeUrl":"/people/#ajaytdm"},"Ajeet Pratap Singh":{"relativeUrl":"/people/#ajeet-pratap-singh"},"Akash Jaiswal":{"relativeUrl":"/people/#akash-jaiswal"},"AKASH RAJ":{"relativeUrl":"/people/#akash-raj"},"Akash":{"relativeUrl":"/people/#akash"},"Akhil Raj":{"relativeUrl":"/people/#akhil-raj"},"Akshat Nema":{"relativeUrl":"/people/#akshat-nema"},"Akshay Padte":{"relativeUrl":"/people/#akshay-padte"},"al6862":{"relativeUrl":"/people/#al6862"},"Alberto Di Biase":{"relativeUrl":"/people/#alberto-di-biase"},"Alejandra Trejo":{"relativeUrl":"/people/#alejandra-trejo"},"Alejandro":{"relativeUrl":"/people/#alejandro"},"Alex Lyons":{"relativeUrl":"/people/#alex-lyons"},"Alex Troesch":{"relativeUrl":"/people/#alex-troesch"},"AliLordLoss":{"relativeUrl":"/people/#alilordloss"},"AlM Chng":{"relativeUrl":"/people/#alm-chng"},"Aloneduckling":{"relativeUrl":"/people/#aloneduckling"},"alp tuğan":{"relativeUrl":"/people/#alp-tugan"},"Amey Bhavsar":{"relativeUrl":"/people/#amey-bhavsar"},"anagondesign":{"relativeUrl":"/people/#anagondesign"},"András Gárdos":{"relativeUrl":"/people/#andras-gardos"},"AndrasGG":{"relativeUrl":"/people/#andrasgg"},"andrei antonescu":{"relativeUrl":"/people/#andrei-antonescu"},"Andy Timmons":{"relativeUrl":"/people/#andy-timmons"},"Ankush Banik":{"relativeUrl":"/people/#ankush-banik"},"Anna Carreras":{"relativeUrl":"/people/#anna-carreras"},"Annie McKinnon":{"relativeUrl":"/people/#annie-mckinnon"},"anniezhengg":{"relativeUrl":"/people/#anniezhengg"},"Anshuman Maurya":{"relativeUrl":"/people/#anshuman-maurya"},"Anthony Su":{"relativeUrl":"/people/#anthony-su"},"Antoinette Bumatay-Chan":{"relativeUrl":"/people/#antoinette-bumatay-chan"},"Antonio Jesús Sánchez Padial":{"relativeUrl":"/people/#antonio-jesus-sanchez-padial"},"ANURAG GUPTA":{"relativeUrl":"/people/#anurag-gupta"},"Aqmalp99":{"relativeUrl":"/people/#aqmalp99"},"Arbaaz":{"relativeUrl":"/people/#arbaaz"},"Arihant Parsoya":{"relativeUrl":"/people/#arihant-parsoya"},"Arijit Kundu":{"relativeUrl":"/people/#arijit-kundu"},"Arijit":{"relativeUrl":"/people/#arijit"},"Armaan Gupta":{"relativeUrl":"/people/#armaan-gupta"},"Arsenije Savic":{"relativeUrl":"/people/#arsenije-savic"},"ArshM17":{"relativeUrl":"/people/#arshm17"},"Aryan Koundal":{"relativeUrl":"/people/#aryan-koundal"},"Aryan Singh":{"relativeUrl":"/people/#aryan-singh"},"Aryan Thakor":{"relativeUrl":"/people/#aryan-thakor"},"Ashley Kang":{"relativeUrl":"/people/#ashley-kang"},"Ashris":{"relativeUrl":"/people/#ashris"},"ashu8912":{"relativeUrl":"/people/#ashu8912"},"Ashwani Dey":{"relativeUrl":"/people/#ashwani-dey"},"AsukaMinato":{"relativeUrl":"/people/#asukaminato"},"Atul Varma":{"relativeUrl":"/people/#atul-varma"},"Austin Cawley-Edwards":{"relativeUrl":"/people/#austin-cawley-edwards"},"Austin Lee Slominski":{"relativeUrl":"/people/#austin-lee-slominski"},"Avelar":{"relativeUrl":"/people/#avelar"},"Ayush Jain":{"relativeUrl":"/people/#ayush-jain"},"Ayush Shankar":{"relativeUrl":"/people/#ayush-shankar"},"Ayush Sharma":{"relativeUrl":"/people/#ayush-sharma"},"b2renger":{"relativeUrl":"/people/#b2renger"},"Beau Muylle":{"relativeUrl":"/people/#beau-muylle"},"Ben Fry":{"relativeUrl":"/people/#ben-fry"},"Ben Greenberg":{"relativeUrl":"/people/#ben-greenberg"},"Ben Hinchley":{"relativeUrl":"/people/#ben-hinchley"},"Ben Moren":{"relativeUrl":"/people/#ben-moren"},"Ben Scheiner":{"relativeUrl":"/people/#ben-scheiner"},"Ben Wendt":{"relativeUrl":"/people/#ben-wendt"},"Benjamin Davies":{"relativeUrl":"/people/#benjamin-davies"},"Benoît Bouré":{"relativeUrl":"/people/#benoit-boure"},"benpalevsky":{"relativeUrl":"/people/#benpalevsky"},"BerfinA":{"relativeUrl":"/people/#berfina"},"Berke Özgen":{"relativeUrl":"/people/#berke-ozgen"},"Bernice Wu":{"relativeUrl":"/people/#bernice-wu"},"Bharath Kumar R":{"relativeUrl":"/people/#bharath-kumar-r"},"Blaize Kaye":{"relativeUrl":"/people/#blaize-kaye"},"Boaz":{"relativeUrl":"/people/#boaz"},"Bob Holt":{"relativeUrl":"/people/#bob-holt"},"Bob Ippolito":{"relativeUrl":"/people/#bob-ippolito"},"Bobby Kazimiroff":{"relativeUrl":"/people/#bobby-kazimiroff"},"Boris Bucha":{"relativeUrl":"/people/#boris-bucha"},"Brad Buchanan":{"relativeUrl":"/people/#brad-buchanan"},"Brad Smith":{"relativeUrl":"/people/#brad-smith"},"Brahvim":{"relativeUrl":"/people/#brahvim"},"Brett Cooper":{"relativeUrl":"/people/#brett-cooper"},"Brian Boucheron":{"relativeUrl":"/people/#brian-boucheron"},"Brian Whitman":{"relativeUrl":"/people/#brian-whitman"},"brightredchilli":{"relativeUrl":"/people/#brightredchilli"},"Bryan":{"relativeUrl":"/people/#bryan"},"bsubbaraman":{"relativeUrl":"/people/#bsubbaraman"},"Bulkan Evcimen":{"relativeUrl":"/people/#bulkan-evcimen"},"c-dacanay":{"relativeUrl":"/people/#c-dacanay"},"cab_kyabe":{"relativeUrl":"/people/#cab-kyabe"},"cacoollib":{"relativeUrl":"/people/#cacoollib"},"Caitlin":{"relativeUrl":"/people/#caitlin"},"Caleb Eggensperger":{"relativeUrl":"/people/#caleb-eggensperger"},"Caleb Foss":{"relativeUrl":"/people/#caleb-foss"},"Caleb Mazalevskis":{"relativeUrl":"/people/#caleb-mazalevskis"},"Callie":{"relativeUrl":"/people/#callie"},"Cameron Yick":{"relativeUrl":"/people/#cameron-yick"},"Camille Roux":{"relativeUrl":"/people/#camille-roux"},"Caroline Hermans":{"relativeUrl":"/people/#caroline-hermans"},"Caroline Record":{"relativeUrl":"/people/#caroline-record"},"Casey Reas":{"relativeUrl":"/people/#casey-reas"},"Cassie Tarakajian":{"relativeUrl":"/people/#cassie-tarakajian"},"cedarfall":{"relativeUrl":"/people/#cedarfall"},"Ceesjan Luiten":{"relativeUrl":"/people/#ceesjan-luiten"},"Chan Jun Shern":{"relativeUrl":"/people/#chan-jun-shern"},"Chandler McWilliams":{"relativeUrl":"/people/#chandler-mcwilliams"},"Char":{"relativeUrl":"/people/#char"},"chaski":{"relativeUrl":"/people/#chaski"},"chechenxu":{"relativeUrl":"/people/#chechenxu"},"Chelly Jin":{"relativeUrl":"/people/#chelly-jin"},"Chiciuc Nicușor":{"relativeUrl":"/people/#chiciuc-nicusor"},"Chinmay Kadam":{"relativeUrl":"/people/#chinmay-kadam"},"Chiun Hau You":{"relativeUrl":"/people/#chiun-hau-you"},"Chris Hallberg":{"relativeUrl":"/people/#chris-hallberg"},"Chris P.":{"relativeUrl":"/people/#chris-p-"},"Chris Thomson":{"relativeUrl":"/people/#chris-thomson"},"Chris":{"relativeUrl":"/people/#chris"},"Christine de Carteret":{"relativeUrl":"/people/#christine-de-carteret"},"Christopher Coleman":{"relativeUrl":"/people/#christopher-coleman"},"Christopher John Ryan":{"relativeUrl":"/people/#christopher-john-ryan"},"Claire K-V":{"relativeUrl":"/people/#claire-k-v"},"Cliff Su":{"relativeUrl":"/people/#cliff-su"},"codeanticode":{"relativeUrl":"/people/#codeanticode"},"Coding for the Arts":{"relativeUrl":"/people/#coding-for-the-arts"},"Cody Fuller":{"relativeUrl":"/people/#cody-fuller"},"cog25":{"relativeUrl":"/people/#cog25"},"CommanderRoot":{"relativeUrl":"/people/#commanderroot"},"computational mama":{"relativeUrl":"/people/#computational-mama"},"Connie Liu":{"relativeUrl":"/people/#connie-liu"},"Constance Yu":{"relativeUrl":"/people/#constance-yu"},"Corey Farwell":{"relativeUrl":"/people/#corey-farwell"},"Corey Gouker":{"relativeUrl":"/people/#corey-gouker"},"Cosme Escobedo":{"relativeUrl":"/people/#cosme-escobedo"},"Craig Pickard":{"relativeUrl":"/people/#craig-pickard"},"Cristóbal Valenzuela":{"relativeUrl":"/people/#cristobal-valenzuela"},"cypress masso":{"relativeUrl":"/people/#cypress-masso"},"Dabe Andre Enajada":{"relativeUrl":"/people/#dabe-andre-enajada"},"Dan Hoizner":{"relativeUrl":"/people/#dan-hoizner"},"Dan":{"relativeUrl":"/people/#dan"},"Dana Mulder":{"relativeUrl":"/people/#dana-mulder"},"Daniel Adams":{"relativeUrl":"/people/#daniel-adams"},"Daniel Grantham":{"relativeUrl":"/people/#daniel-grantham"},"Daniel Howe":{"relativeUrl":"/people/#daniel-howe"},"Daniel Marino":{"relativeUrl":"/people/#daniel-marino"},"Daniel Michel":{"relativeUrl":"/people/#daniel-michel"},"Daniel Sarno":{"relativeUrl":"/people/#daniel-sarno"},"Daniel Shiffman":{"relativeUrl":"/people/#daniel-shiffman"},"Darby Rathbone":{"relativeUrl":"/people/#darby-rathbone"},"Darío Hereñú":{"relativeUrl":"/people/#dario-herenu"},"Darius Morawiec":{"relativeUrl":"/people/#darius-morawiec"},"Dave Pagurek":{"relativeUrl":"/people/#dave-pagurek"},"Dave":{"relativeUrl":"/people/#dave"},"David Aerne":{"relativeUrl":"/people/#david-aerne"},"David Newbury":{"relativeUrl":"/people/#david-newbury"},"David Weiss":{"relativeUrl":"/people/#david-weiss"},"David White":{"relativeUrl":"/people/#david-white"},"David Wicks":{"relativeUrl":"/people/#david-wicks"},"David":{"relativeUrl":"/people/#david"},"Decoy4ever":{"relativeUrl":"/people/#decoy4ever"},"Derek Enlow":{"relativeUrl":"/people/#derek-enlow"},"Derek J. Kinsman":{"relativeUrl":"/people/#derek-j--kinsman"},"Derrick McMillen":{"relativeUrl":"/people/#derrick-mcmillen"},"Deveshi Dwivedi":{"relativeUrl":"/people/#deveshi-dwivedi"},"Devon Rifkin":{"relativeUrl":"/people/#devon-rifkin"},"Dewansh Thakur":{"relativeUrl":"/people/#dewansh-thakur"},"Dharshan":{"relativeUrl":"/people/#dharshan"},"Dhruv Sahnan":{"relativeUrl":"/people/#dhruv-sahnan"},"Diana Galindo":{"relativeUrl":"/people/#diana-galindo"},"digitalfrost":{"relativeUrl":"/people/#digitalfrost"},"Divyansh013":{"relativeUrl":"/people/#divyansh013"},"DIVYANSHU RAJ":{"relativeUrl":"/people/#divyanshu-raj"},"Diya Solanki":{"relativeUrl":"/people/#diya-solanki"},"DIYgirls":{"relativeUrl":"/people/#diygirls"},"Dominic Jodoin":{"relativeUrl":"/people/#dominic-jodoin"},"Dorothy R. Santos":{"relativeUrl":"/people/#dorothy-r--santos"},"Dr. Holomorfo":{"relativeUrl":"/people/#dr--holomorfo"},"dummyAccount22":{"relativeUrl":"/people/#dummyaccount22"},"Dusk":{"relativeUrl":"/people/#dusk"},"Dwiferdio Seagal Putra":{"relativeUrl":"/people/#dwiferdio-seagal-putra"},"e-Coucou":{"relativeUrl":"/people/#e-coucou"},"Ed Brannin":{"relativeUrl":"/people/#ed-brannin"},"Eden Cridge":{"relativeUrl":"/people/#eden-cridge"},"elgin mclaren":{"relativeUrl":"/people/#elgin-mclaren"},"Elliot-Hernandez":{"relativeUrl":"/people/#elliot-hernandez"},"EmilioOcelotl":{"relativeUrl":"/people/#emilioocelotl"},"Emily Chen":{"relativeUrl":"/people/#emily-chen"},"Emily Xie":{"relativeUrl":"/people/#emily-xie"},"Emma Krantz":{"relativeUrl":"/people/#emma-krantz"},"Epic Jefferson":{"relativeUrl":"/people/#epic-jefferson"},"epramer-godaddy":{"relativeUrl":"/people/#epramer-godaddy"},"Erica Pramer":{"relativeUrl":"/people/#erica-pramer"},"Erik Butcher":{"relativeUrl":"/people/#erik-butcher"},"Eshaan Aggarwal":{"relativeUrl":"/people/#eshaan-aggarwal"},"Evelyn Eastmond":{"relativeUrl":"/people/#evelyn-eastmond"},"evelyn masso":{"relativeUrl":"/people/#evelyn-masso"},"everything became blue":{"relativeUrl":"/people/#everything-became-blue"},"Evorage":{"relativeUrl":"/people/#evorage"},"Ewan Johnstone":{"relativeUrl":"/people/#ewan-johnstone"},"Fabian Morón Zirfas":{"relativeUrl":"/people/#fabian-moron-zirfas"},"Faith Wuyue Yu":{"relativeUrl":"/people/#faith-wuyue-yu"},"FAL":{"relativeUrl":"/people/#fal"},"Federico Grandi":{"relativeUrl":"/people/#federico-grandi"},"feedzh":{"relativeUrl":"/people/#feedzh"},"Fenil Gandhi":{"relativeUrl":"/people/#fenil-gandhi"},"ffd8":{"relativeUrl":"/people/#ffd8"},"Fisher Diede":{"relativeUrl":"/people/#fisher-diede"},"FORCHA PEARL":{"relativeUrl":"/people/#forcha-pearl"},"Francesco Bigiarini":{"relativeUrl":"/people/#francesco-bigiarini"},"Freddie Rawlins":{"relativeUrl":"/people/#freddie-rawlins"},"Frederik Ring":{"relativeUrl":"/people/#frederik-ring"},"Fun Planet":{"relativeUrl":"/people/#fun-planet"},"Gareth Battensby":{"relativeUrl":"/people/#gareth-battensby"},"Gareth Williams":{"relativeUrl":"/people/#gareth-williams"},"Garima":{"relativeUrl":"/people/#garima"},"gauini":{"relativeUrl":"/people/#gauini"},"Gaurav Tiwary":{"relativeUrl":"/people/#gaurav-tiwary"},"Gene Kogan":{"relativeUrl":"/people/#gene-kogan"},"Geraldo Neto":{"relativeUrl":"/people/#geraldo-neto"},"ggorlen":{"relativeUrl":"/people/#ggorlen"},"Ghales":{"relativeUrl":"/people/#ghales"},"Golan Levin":{"relativeUrl":"/people/#golan-levin"},"GoToLoop":{"relativeUrl":"/people/#gotoloop"},"Gracia-zhang":{"relativeUrl":"/people/#gracia-zhang"},"Greg Sadetsky":{"relativeUrl":"/people/#greg-sadetsky"},"Gregor Martynus":{"relativeUrl":"/people/#gregor-martynus"},"Guilherme Silveira":{"relativeUrl":"/people/#guilherme-silveira"},"Guillermo Montecinos":{"relativeUrl":"/people/#guillermo-montecinos"},"Gus Becker":{"relativeUrl":"/people/#gus-becker"},"Haider Ali Punjabi":{"relativeUrl":"/people/#haider-ali-punjabi"},"Half Scheidl":{"relativeUrl":"/people/#half-scheidl"},"harkirat singh":{"relativeUrl":"/people/#harkirat-singh"},"Harman Batheja":{"relativeUrl":"/people/#harman-batheja"},"Harrycheng233":{"relativeUrl":"/people/#harrycheng233"},"Harsh Agrawal":{"relativeUrl":"/people/#harsh-agrawal"},"Harsh Range":{"relativeUrl":"/people/#harsh-range"},"Harshil Goel":{"relativeUrl":"/people/#harshil-goel"},"Hilary Lau":{"relativeUrl":"/people/#hilary-lau"},"Himanshu Malviya":{"relativeUrl":"/people/#himanshu-malviya"},"Hirad Sab":{"relativeUrl":"/people/#hirad-sab"},"Hitesh Kumar":{"relativeUrl":"/people/#hitesh-kumar"},"hrishit":{"relativeUrl":"/people/#hrishit"},"hunahpu18":{"relativeUrl":"/people/#hunahpu18"},"hvillase":{"relativeUrl":"/people/#hvillase"},"iambiancafonseca":{"relativeUrl":"/people/#iambiancafonseca"},"IENGROUND":{"relativeUrl":"/people/#ienground"},"Ike Bischof":{"relativeUrl":"/people/#ike-bischof"},"Ikko Ashimine":{"relativeUrl":"/people/#ikko-ashimine"},"Ilona Brand":{"relativeUrl":"/people/#ilona-brand"},"INARI_DARKFOX":{"relativeUrl":"/people/#inari-darkfox"},"Inhwa":{"relativeUrl":"/people/#inhwa"},"Isaac Durazo ":{"relativeUrl":"/people/#isaac-durazo-"},"İsmail Namdar":{"relativeUrl":"/people/#ismail-namdar"},"Ivy Feraco":{"relativeUrl":"/people/#ivy-feraco"},"J Wong":{"relativeUrl":"/people/#j-wong"},"Jack B. Du":{"relativeUrl":"/people/#jack-b--du"},"Jack Dempsey":{"relativeUrl":"/people/#jack-dempsey"},"Jacques P. du Toit":{"relativeUrl":"/people/#jacques-p--du-toit"},"Jai Kotia":{"relativeUrl":"/people/#jai-kotia"},"Jai Vignesh J":{"relativeUrl":"/people/#jai-vignesh-j"},"Jakub Valtar":{"relativeUrl":"/people/#jakub-valtar"},"James Dunn":{"relativeUrl":"/people/#james-dunn"},"Janis Sepúlveda":{"relativeUrl":"/people/#janis-sepulveda"},"Jared Berghold":{"relativeUrl":"/people/#jared-berghold"},"Jared Donovan":{"relativeUrl":"/people/#jared-donovan"},"Jared Sprague":{"relativeUrl":"/people/#jared-sprague"},"Jason Alderman":{"relativeUrl":"/people/#jason-alderman"},"Jason Mandel":{"relativeUrl":"/people/#jason-mandel"},"Jason Sigal":{"relativeUrl":"/people/#jason-sigal"},"Jatin Panjwani":{"relativeUrl":"/people/#jatin-panjwani"},"Jay Gupta":{"relativeUrl":"/people/#jay-gupta"},"Jaymz Rhime":{"relativeUrl":"/people/#jaymz-rhime"},"Jean-Michaël Celerier":{"relativeUrl":"/people/#jean-michael-celerier"},"Jean Pierre Charalambos":{"relativeUrl":"/people/#jean-pierre-charalambos"},"jeanette":{"relativeUrl":"/people/#jeanette"},"Jen Kagan":{"relativeUrl":"/people/#jen-kagan"},"Jenna deBoisblanc":{"relativeUrl":"/people/#jenna-deboisblanc"},"Jenna":{"relativeUrl":"/people/#jenna"},"Jennifer Jacobs":{"relativeUrl":"/people/#jennifer-jacobs"},"Jens Axel Søgaard":{"relativeUrl":"/people/#jens-axel-søgaard"},"jeong":{"relativeUrl":"/people/#jeong"},"Jerel Johnson":{"relativeUrl":"/people/#jerel-johnson"},"Jeremy Tuloup":{"relativeUrl":"/people/#jeremy-tuloup"},"Jess Klein":{"relativeUrl":"/people/#jess-klein"},"jesse cahn-thompson":{"relativeUrl":"/people/#jesse-cahn-thompson"},"Jesús Enrique Rascón":{"relativeUrl":"/people/#jesus-enrique-rascon"},"JetStarBlues":{"relativeUrl":"/people/#jetstarblues"},"Jiashan Wu":{"relativeUrl":"/people/#jiashan-wu"},"Jimish Fotariya":{"relativeUrl":"/people/#jimish-fotariya"},"Jithin KS":{"relativeUrl":"/people/#jithin-ks"},"Jiwon Park (hanpanic)":{"relativeUrl":"/people/#jiwon-park-(hanpanic)"},"JoeCastor":{"relativeUrl":"/people/#joecastor"},"Johan Karlsson":{"relativeUrl":"/people/#johan-karlsson"},"John Pasquarello":{"relativeUrl":"/people/#john-pasquarello"},"Jon Kaufman":{"relativeUrl":"/people/#jon-kaufman"},"Jonas Rinke":{"relativeUrl":"/people/#jonas-rinke"},"Jonathan Dahan":{"relativeUrl":"/people/#jonathan-dahan"},"Jonathan-David Schröder":{"relativeUrl":"/people/#jonathan-david-schroder"},"Jonathan Heindl":{"relativeUrl":"/people/#jonathan-heindl"},"Joonas Jokinen":{"relativeUrl":"/people/#joonas-jokinen"},"Jordan Shaw":{"relativeUrl":"/people/#jordan-shaw"},"Jordan Sucher":{"relativeUrl":"/people/#jordan-sucher"},"Jorge Moreno":{"relativeUrl":"/people/#jorge-moreno"},"José Miguel Tajuelo Garrigós":{"relativeUrl":"/people/#jose-miguel-tajuelo-garrigos"},"Joseph Aronson":{"relativeUrl":"/people/#joseph-aronson"},"Joseph Hong":{"relativeUrl":"/people/#joseph-hong"},"Joshua Marris":{"relativeUrl":"/people/#joshua-marris"},"Joshua Noble":{"relativeUrl":"/people/#joshua-noble"},"Joshua Storm Becker":{"relativeUrl":"/people/#joshua-storm-becker"},"Jstodd":{"relativeUrl":"/people/#jstodd"},"JT Nimoy":{"relativeUrl":"/people/#jt-nimoy"},"Juan Irache":{"relativeUrl":"/people/#juan-irache"},"juliane nagao":{"relativeUrl":"/people/#juliane-nagao"},"Julio Lab":{"relativeUrl":"/people/#julio-lab"},"Juraj Onuska":{"relativeUrl":"/people/#juraj-onuska"},"Justin Kim":{"relativeUrl":"/people/#justin-kim"},"Jyotiraditya Pradhan":{"relativeUrl":"/people/#jyotiraditya-pradhan"},"K.Adam White":{"relativeUrl":"/people/#k-adam-white"},"kaabe1":{"relativeUrl":"/people/#kaabe1"},"Kai-han Chang":{"relativeUrl":"/people/#kai-han-chang"},"Karen":{"relativeUrl":"/people/#karen"},"karinaxlpz":{"relativeUrl":"/people/#karinaxlpz"},"Kate Grant":{"relativeUrl":"/people/#kate-grant"},"Kate Hollenbach":{"relativeUrl":"/people/#kate-hollenbach"},"Kathryn Isabelle Lawrence":{"relativeUrl":"/people/#kathryn-isabelle-lawrence"},"Katie":{"relativeUrl":"/people/#katie"},"Katsuya Endoh":{"relativeUrl":"/people/#katsuya-endoh"},"Keith Tan":{"relativeUrl":"/people/#keith-tan"},"Ken Miller":{"relativeUrl":"/people/#ken-miller"},"Kenneth Lim":{"relativeUrl":"/people/#kenneth-lim"},"Keshav Malik":{"relativeUrl":"/people/#keshav-malik"},"Kevin Barabash":{"relativeUrl":"/people/#kevin-barabash"},"Kevin Bradley":{"relativeUrl":"/people/#kevin-bradley"},"Kevin Grajeda":{"relativeUrl":"/people/#kevin-grajeda"},"Kevin Ho":{"relativeUrl":"/people/#kevin-ho"},"Kevin Siwoff":{"relativeUrl":"/people/#kevin-siwoff"},"Kevin Workman":{"relativeUrl":"/people/#kevin-workman"},"kjav":{"relativeUrl":"/people/#kjav"},"konstantinstanmeyer":{"relativeUrl":"/people/#konstantinstanmeyer"},"koolaidkrusade":{"relativeUrl":"/people/#koolaidkrusade"},"kroko / Reinis Adovičs":{"relativeUrl":"/people/#kroko---reinis-adovics"},"Kunal Kumar Verma":{"relativeUrl":"/people/#kunal-kumar-verma"},"Kyle James":{"relativeUrl":"/people/#kyle-james"},"Kyle McDonald":{"relativeUrl":"/people/#kyle-mcdonald"},"L05":{"relativeUrl":"/people/#l05"},"Laksh Singla":{"relativeUrl":"/people/#laksh-singla"},"Lakshay Joshi":{"relativeUrl":"/people/#lakshay-joshi"},"lam802":{"relativeUrl":"/people/#lam802"},"Laura Ciro":{"relativeUrl":"/people/#laura-ciro"},"Lauren Lee McCarthy":{"relativeUrl":"/people/#lauren-lee-mccarthy"},"Lauren":{"relativeUrl":"/people/#lauren"},"Lee T":{"relativeUrl":"/people/#lee-t"},"LEMIBANDDEXARI":{"relativeUrl":"/people/#lemibanddexari"},"Leo Kamwathi":{"relativeUrl":"/people/#leo-kamwathi"},"Leo Wang":{"relativeUrl":"/people/#leo-wang"},"Leslie Yip":{"relativeUrl":"/people/#leslie-yip"},"Liam Piesley":{"relativeUrl":"/people/#liam-piesley"},"Liang Tang":{"relativeUrl":"/people/#liang-tang"},"Linda Paiste":{"relativeUrl":"/people/#linda-paiste"},"Lingxiao Wang":{"relativeUrl":"/people/#lingxiao-wang"},"linnhallonqvist":{"relativeUrl":"/people/#linnhallonqvist"},"Lionel Ringenbach":{"relativeUrl":"/people/#lionel-ringenbach"},"Lisa Mabley":{"relativeUrl":"/people/#lisa-mabley"},"Liu Chang":{"relativeUrl":"/people/#liu-chang"},"Liz Peng":{"relativeUrl":"/people/#liz-peng"},"Long Phan":{"relativeUrl":"/people/#long-phan"},"lottihill":{"relativeUrl":"/people/#lottihill"},"Louis Demange":{"relativeUrl":"/people/#louis-demange"},"Luc de wit":{"relativeUrl":"/people/#luc-de-wit"},"Luca Damasco":{"relativeUrl":"/people/#luca-damasco"},"Luis Morales-Navarro":{"relativeUrl":"/people/#luis-morales-navarro"},"luisaph":{"relativeUrl":"/people/#luisaph"},"Luke Burgess-Yeo":{"relativeUrl":"/people/#luke-burgess-yeo"},"M":{"relativeUrl":"/people/#m"},"Maciej Stankiewicz":{"relativeUrl":"/people/#maciej-stankiewicz"},"maddy":{"relativeUrl":"/people/#maddy"},"maddyfisher":{"relativeUrl":"/people/#maddyfisher"},"mainstreamdev":{"relativeUrl":"/people/#mainstreamdev"},"Malay Vasa":{"relativeUrl":"/people/#malay-vasa"},"Manan Arora":{"relativeUrl":"/people/#manan-arora"},"Mann Shah":{"relativeUrl":"/people/#mann-shah"},"manpreet":{"relativeUrl":"/people/#manpreet"},"Marc Abbey":{"relativeUrl":"/people/#marc-abbey"},"Marcus Parsons":{"relativeUrl":"/people/#marcus-parsons"},"Mark Nikora":{"relativeUrl":"/people/#mark-nikora"},"Mark Russo":{"relativeUrl":"/people/#mark-russo"},"Martin Lorentzon":{"relativeUrl":"/people/#martin-lorentzon"},"Mateusz Swiatkowski":{"relativeUrl":"/people/#mateusz-swiatkowski"},"mathewpan2":{"relativeUrl":"/people/#mathewpan2"},"Mathura MG":{"relativeUrl":"/people/#mathura-mg"},"MATSUDA, Kouichi":{"relativeUrl":"/people/#matsuda,-kouichi"},"Matthew Kaney":{"relativeUrl":"/people/#matthew-kaney"},"Mattia Micheletta Merlin":{"relativeUrl":"/people/#mattia-micheletta-merlin"},"Mauricio Verano Merino":{"relativeUrl":"/people/#mauricio-verano-merino"},"Max Goldstein":{"relativeUrl":"/people/#max-goldstein"},"Max Kolyanov":{"relativeUrl":"/people/#max-kolyanov"},"Max Segal":{"relativeUrl":"/people/#max-segal"},"maxdevjs":{"relativeUrl":"/people/#maxdevjs"},"Maya Arguelles":{"relativeUrl":"/people/#maya-arguelles"},"Maya Man":{"relativeUrl":"/people/#maya-man"},"mcturner1995":{"relativeUrl":"/people/#mcturner1995"},"meezwhite":{"relativeUrl":"/people/#meezwhite"},"Melody Sharp":{"relativeUrl":"/people/#melody-sharp"},"mhsh312":{"relativeUrl":"/people/#mhsh312"},"Miaoye Que":{"relativeUrl":"/people/#miaoye-que"},"Michael Hadley":{"relativeUrl":"/people/#michael-hadley"},"Michael J Conrad":{"relativeUrl":"/people/#michael-j-conrad"},"Mikael Lindqvist":{"relativeUrl":"/people/#mikael-lindqvist"},"Mike ":{"relativeUrl":"/people/#mike-"},"Mike Anderson":{"relativeUrl":"/people/#mike-anderson"},"Miles Peyton":{"relativeUrl":"/people/#miles-peyton"},"min-kim42":{"relativeUrl":"/people/#min-kim42"},"MiniPear":{"relativeUrl":"/people/#minipear"},"Minjun Kim":{"relativeUrl":"/people/#minjun-kim"},"Minwook Park":{"relativeUrl":"/people/#minwook-park"},"Mislav Milicevic":{"relativeUrl":"/people/#mislav-milicevic"},"ml.008":{"relativeUrl":"/people/#ml-008"},"mohamedalisaifudeen":{"relativeUrl":"/people/#mohamedalisaifudeen"},"Mohammad Hussain Nagaria":{"relativeUrl":"/people/#mohammad-hussain-nagaria"},"Mohana Sundaram S":{"relativeUrl":"/people/#mohana-sundaram-s"},"Mohit Balwani":{"relativeUrl":"/people/#mohit-balwani"},"Moira Turner":{"relativeUrl":"/people/#moira-turner"},"Monalisa Maity":{"relativeUrl":"/people/#monalisa-maity"},"Monica Powell":{"relativeUrl":"/people/#monica-powell"},"Mostafa Ewis":{"relativeUrl":"/people/#mostafa-ewis"},"Mr. Algorithm":{"relativeUrl":"/people/#mr--algorithm"},"Muhammad Haroon":{"relativeUrl":"/people/#muhammad-haroon"},"Munus Shih":{"relativeUrl":"/people/#munus-shih"},"Musab Kılıç":{"relativeUrl":"/people/#musab-kılıc"},"mxchelle":{"relativeUrl":"/people/#mxchelle"},"Nabeel (Dexter)":{"relativeUrl":"/people/#nabeel-(dexter)"},"Nabil Hassein":{"relativeUrl":"/people/#nabil-hassein"},"Nahuel Palumbo":{"relativeUrl":"/people/#nahuel-palumbo"},"Nakul Shahdadpuri":{"relativeUrl":"/people/#nakul-shahdadpuri"},"nancy":{"relativeUrl":"/people/#nancy"},"Naoto Hieda":{"relativeUrl":"/people/#naoto-hieda"},"naoyashiga":{"relativeUrl":"/people/#naoyashiga"},"Nat Decker":{"relativeUrl":"/people/#nat-decker"},"Nicholas Marino":{"relativeUrl":"/people/#nicholas-marino"},"NicholasGillen":{"relativeUrl":"/people/#nicholasgillen"},"Nick Briz":{"relativeUrl":"/people/#nick-briz"},"Nick McIntyre":{"relativeUrl":"/people/#nick-mcintyre"},"Nick Müller":{"relativeUrl":"/people/#nick-muller"},"Nick Yahnke":{"relativeUrl":"/people/#nick-yahnke"},"Nico Finkernagel":{"relativeUrl":"/people/#nico-finkernagel"},"Niels Joubert":{"relativeUrl":"/people/#niels-joubert"},"NIINOMI":{"relativeUrl":"/people/#niinomi"},"Nik Nyby":{"relativeUrl":"/people/#nik-nyby"},"Nikhil":{"relativeUrl":"/people/#nikhil"},"nikhilkalburgi":{"relativeUrl":"/people/#nikhilkalburgi"},"Niki Ito":{"relativeUrl":"/people/#niki-ito"},"Niklas Peters":{"relativeUrl":"/people/#niklas-peters"},"Nisar Hassan Naqvi":{"relativeUrl":"/people/#nisar-hassan-naqvi"},"Nitin Rana":{"relativeUrl":"/people/#nitin-rana"},"Nitish Bansal":{"relativeUrl":"/people/#nitish-bansal"},"nully0x":{"relativeUrl":"/people/#nully0x"},"odm275":{"relativeUrl":"/people/#odm275"},"oleboleskole3":{"relativeUrl":"/people/#oleboleskole3"},"Oleksii Bulba":{"relativeUrl":"/people/#oleksii-bulba"},"Oliver Steele":{"relativeUrl":"/people/#oliver-steele"},"Oliver Wright":{"relativeUrl":"/people/#oliver-wright"},"Onexi":{"relativeUrl":"/people/#onexi"},"Ong Zhi Zheng":{"relativeUrl":"/people/#ong-zhi-zheng"},"Oren Shoham":{"relativeUrl":"/people/#oren-shoham"},"Orwiss":{"relativeUrl":"/people/#orwiss"},"ov":{"relativeUrl":"/people/#ov"},"oz":{"relativeUrl":"/people/#oz"},"paollabd":{"relativeUrl":"/people/#paollabd"},"Paolo Pedercini":{"relativeUrl":"/people/#paolo-pedercini"},"Paul Wheeler":{"relativeUrl":"/people/#paul-wheeler"},"Peiling Jiang":{"relativeUrl":"/people/#peiling-jiang"},"perminder-17":{"relativeUrl":"/people/#perminder-17"},"Peter Marsh":{"relativeUrl":"/people/#peter-marsh"},"peter":{"relativeUrl":"/people/#peter"},"Petr Brzek":{"relativeUrl":"/people/#petr-brzek"},"Philip Bell":{"relativeUrl":"/people/#philip-bell"},"Phoenix Perry":{"relativeUrl":"/people/#phoenix-perry"},"pie999":{"relativeUrl":"/people/#pie999"},"Pierre Krafft":{"relativeUrl":"/people/#pierre-krafft"},"pifragile":{"relativeUrl":"/people/#pifragile"},"piinthecloud":{"relativeUrl":"/people/#piinthecloud"},"Pim Tournaye":{"relativeUrl":"/people/#pim-tournaye"},"pinky-pig":{"relativeUrl":"/people/#pinky-pig"},"PiyushChandra17":{"relativeUrl":"/people/#piyushchandra17"},"plural":{"relativeUrl":"/people/#plural"},"Poulav Bhowmick":{"relativeUrl":"/people/#poulav-bhowmick"},"PracDuckling":{"relativeUrl":"/people/#pracduckling"},"Pragya":{"relativeUrl":"/people/#pragya"},"Prashant Gupta":{"relativeUrl":"/people/#prashant-gupta"},"Prateek Jain":{"relativeUrl":"/people/#prateek-jain"},"Prateekgit":{"relativeUrl":"/people/#prateekgit"},"Pratyay Banerjee":{"relativeUrl":"/people/#pratyay-banerjee"},"Priya-Pathak":{"relativeUrl":"/people/#priya-pathak"},"Qianqian Ye":{"relativeUrl":"/people/#qianqian-ye"},"Quinton Ashley":{"relativeUrl":"/people/#quinton-ashley"},"R. Luke DuBois":{"relativeUrl":"/people/#r--luke-dubois"},"Rachel Lim":{"relativeUrl":"/people/#rachel-lim"},"raclim":{"relativeUrl":"/people/#raclim"},"Rahul Mohata":{"relativeUrl":"/people/#rahul-mohata"},"rahulrangers":{"relativeUrl":"/people/#rahulrangers"},"Rajiv Ranjan Singh":{"relativeUrl":"/people/#rajiv-ranjan-singh"},"Ramin":{"relativeUrl":"/people/#ramin"},"Ramon Jr. Yniguez":{"relativeUrl":"/people/#ramon-jr--yniguez"},"RandomGamingDev":{"relativeUrl":"/people/#randomgamingdev"},"Raphaël de Courville":{"relativeUrl":"/people/#raphael-de-courville"},"reejuBhattacharya":{"relativeUrl":"/people/#reejubhattacharya"},"Reijo Vosu":{"relativeUrl":"/people/#reijo-vosu"},"reona396":{"relativeUrl":"/people/#reona396"},"rinkydevi":{"relativeUrl":"/people/#rinkydevi"},"Rishabh Taparia":{"relativeUrl":"/people/#rishabh-taparia"},"Rishi":{"relativeUrl":"/people/#rishi"},"Robyn Overstreet":{"relativeUrl":"/people/#robyn-overstreet"},"Rohan Julka":{"relativeUrl":"/people/#rohan-julka"},"Rune Skjoldborg Madsen":{"relativeUrl":"/people/#rune-skjoldborg-madsen"},"Ryan Slade":{"relativeUrl":"/people/#ryan-slade"},"Ryuya":{"relativeUrl":"/people/#ryuya"},"saber khan":{"relativeUrl":"/people/#saber-khan"},"Sachin Varghese":{"relativeUrl":"/people/#sachin-varghese"},"Sagar Arora":{"relativeUrl":"/people/#sagar-arora"},"Sai Bhushan":{"relativeUrl":"/people/#sai-bhushan"},"Saksham Saxena":{"relativeUrl":"/people/#saksham-saxena"},"sam delong":{"relativeUrl":"/people/#sam-delong"},"Sam Lavigne":{"relativeUrl":"/people/#sam-lavigne"},"sambensim":{"relativeUrl":"/people/#sambensim"},"Samir Ghosh":{"relativeUrl":"/people/#samir-ghosh"},"Sampo Rapeli":{"relativeUrl":"/people/#sampo-rapeli"},"Samrudh Shetty":{"relativeUrl":"/people/#samrudh-shetty"},"Samuel Alarco Cantos":{"relativeUrl":"/people/#samuel-alarco-cantos"},"Samuel Cho":{"relativeUrl":"/people/#samuel-cho"},"Sanchit Kapoor":{"relativeUrl":"/people/#sanchit-kapoor"},"Sandeep Kumar Bhagat":{"relativeUrl":"/people/#sandeep-kumar-bhagat"},"Sanjay Singh Rajpoot":{"relativeUrl":"/people/#sanjay-singh-rajpoot"},"Sanket Singh":{"relativeUrl":"/people/#sanket-singh"},"Sarah Ciston":{"relativeUrl":"/people/#sarah-ciston"},"Sarah Groff Hennigh-Palermo":{"relativeUrl":"/people/#sarah-groff-hennigh-palermo"},"Sarthak Saxena":{"relativeUrl":"/people/#sarthak-saxena"},"Saskia Freeke":{"relativeUrl":"/people/#saskia-freeke"},"Satyam Kulkarni":{"relativeUrl":"/people/#satyam-kulkarni"},"Sawai Singh Rajpurohit":{"relativeUrl":"/people/#sawai-singh-rajpurohit"},"Scott Garner":{"relativeUrl":"/people/#scott-garner"},"Scott Murray":{"relativeUrl":"/people/#scott-murray"},"Seb Méndez":{"relativeUrl":"/people/#seb-mendez"},"SejinOH":{"relativeUrl":"/people/#sejinoh"},"Sekani Warner":{"relativeUrl":"/people/#sekani-warner"},"senbaku":{"relativeUrl":"/people/#senbaku"},"Seonghyeon Kim":{"relativeUrl":"/people/#seonghyeon-kim"},"Sepand Ansari":{"relativeUrl":"/people/#sepand-ansari"},"Serena20003":{"relativeUrl":"/people/#serena20003"},"Seth":{"relativeUrl":"/people/#seth"},"Seung-Gi Kim(David)":{"relativeUrl":"/people/#seung-gi-kim(david)"},"shaharyarshamshi":{"relativeUrl":"/people/#shaharyarshamshi"},"Shahma Ansari":{"relativeUrl":"/people/#shahma-ansari"},"Shahriar Rahman Rubayet":{"relativeUrl":"/people/#shahriar-rahman-rubayet"},"Shawn Van Every":{"relativeUrl":"/people/#shawn-van-every"},"sheamus":{"relativeUrl":"/people/#sheamus"},"SHIBAHARA Hiroki":{"relativeUrl":"/people/#shibahara-hiroki"},"Shirou":{"relativeUrl":"/people/#shirou"},"Shivansh Sharma":{"relativeUrl":"/people/#shivansh-sharma"},"Shoury Singh":{"relativeUrl":"/people/#shoury-singh"},"Shubham Kumar":{"relativeUrl":"/people/#shubham-kumar"},"Shubham Rathore":{"relativeUrl":"/people/#shubham-rathore"},"shujulin":{"relativeUrl":"/people/#shujulin"},"siddhant":{"relativeUrl":"/people/#siddhant"},"Simranjeet Singh":{"relativeUrl":"/people/#simranjeet-singh"},"Sinan Ascioglu":{"relativeUrl":"/people/#sinan-ascioglu"},"Sithe Ncube":{"relativeUrl":"/people/#sithe-ncube"},"Sivaram D":{"relativeUrl":"/people/#sivaram-d"},"skyperx":{"relativeUrl":"/people/#skyperx"},"sm7515":{"relativeUrl":"/people/#sm7515"},"smilee":{"relativeUrl":"/people/#smilee"},"So Sun Park":{"relativeUrl":"/people/#so-sun-park"},"Sona Lee":{"relativeUrl":"/people/#sona-lee"},"sortasleepy":{"relativeUrl":"/people/#sortasleepy"},"Souvik Kumar":{"relativeUrl":"/people/#souvik-kumar"},"Sparsh Paliwal":{"relativeUrl":"/people/#sparsh-paliwal"},"sparshg":{"relativeUrl":"/people/#sparshg"},"Spencer Faith":{"relativeUrl":"/people/#spencer-faith"},"sphantom-code":{"relativeUrl":"/people/#sphantom-code"},"Spongman":{"relativeUrl":"/people/#spongman"},"Stalgia Grigg":{"relativeUrl":"/people/#stalgia-grigg"},"stampyzfanz":{"relativeUrl":"/people/#stampyzfanz"},"Stef Tervelde":{"relativeUrl":"/people/#stef-tervelde"},"Steven Green":{"relativeUrl":"/people/#steven-green"},"Stig Møller Hansen":{"relativeUrl":"/people/#stig-møller-hansen"},"stormCup":{"relativeUrl":"/people/#stormcup"},"Sudhanshu Tiwari":{"relativeUrl":"/people/#sudhanshu-tiwari"},"suhani6904":{"relativeUrl":"/people/#suhani6904"},"Suhas CV":{"relativeUrl":"/people/#suhas-cv"},"Summer Rizzo":{"relativeUrl":"/people/#summer-rizzo"},"Sun Lifei":{"relativeUrl":"/people/#sun-lifei"},"surajsurajsuraj":{"relativeUrl":"/people/#surajsurajsuraj"},"Surbhi Pittie":{"relativeUrl":"/people/#surbhi-pittie"},"susan evans":{"relativeUrl":"/people/#susan-evans"},"Swapnil-2001":{"relativeUrl":"/people/#swapnil-2001"},"sz245":{"relativeUrl":"/people/#sz245"},"tae":{"relativeUrl":"/people/#tae"},"Taeyoon Choi":{"relativeUrl":"/people/#taeyoon-choi"},"takawo":{"relativeUrl":"/people/#takawo"},"Takuma Kira":{"relativeUrl":"/people/#takuma-kira"},"Tanner Dolby":{"relativeUrl":"/people/#tanner-dolby"},"Tanvi Kumar":{"relativeUrl":"/people/#tanvi-kumar"},"tapioca24":{"relativeUrl":"/people/#tapioca24"},"taseenb":{"relativeUrl":"/people/#taseenb"},"Tega Brain":{"relativeUrl":"/people/#tega-brain"},"Teixido":{"relativeUrl":"/people/#teixido"},"TetroGem":{"relativeUrl":"/people/#tetrogem"},"tetunori":{"relativeUrl":"/people/#tetunori"},"Théodore Orfèvres":{"relativeUrl":"/people/#theodore-orfevres"},"Thomas Diewald":{"relativeUrl":"/people/#thomas-diewald"},"Thomas Herlea":{"relativeUrl":"/people/#thomas-herlea"},"Tiago Hermano":{"relativeUrl":"/people/#tiago-hermano"},"Tibor Udvari":{"relativeUrl":"/people/#tibor-udvari"},"Todd H. Page":{"relativeUrl":"/people/#todd-h--page"},"togekisse":{"relativeUrl":"/people/#togekisse"},"Tokini Irene Fubara":{"relativeUrl":"/people/#tokini-irene-fubara"},"tonipizza":{"relativeUrl":"/people/#tonipizza"},"truemaxdh":{"relativeUrl":"/people/#truemaxdh"},"trych":{"relativeUrl":"/people/#trych"},"tuan":{"relativeUrl":"/people/#tuan"},"Tushar Choudhari":{"relativeUrl":"/people/#tushar-choudhari"},"TwoTicks":{"relativeUrl":"/people/#twoticks"},"Tyler Jordan":{"relativeUrl":"/people/#tyler-jordan"},"Tyler Stefanich":{"relativeUrl":"/people/#tyler-stefanich"},"Umang Utkarsh":{"relativeUrl":"/people/#umang-utkarsh"},"Unicar":{"relativeUrl":"/people/#unicar"},"UnityOfFairfax":{"relativeUrl":"/people/#unityoffairfax"},"uno seis tres":{"relativeUrl":"/people/#uno-seis-tres"},"Urvashi":{"relativeUrl":"/people/#urvashi"},"Utkarsh Tiwari":{"relativeUrl":"/people/#utkarsh-tiwari"},"Val Head":{"relativeUrl":"/people/#val-head"},"Varsha Verma":{"relativeUrl":"/people/#varsha-verma"},"Vasu Goel":{"relativeUrl":"/people/#vasu-goel"},"Vedhant Agarwal":{"relativeUrl":"/people/#vedhant-agarwal"},"Victor Morgan":{"relativeUrl":"/people/#victor-morgan"},"Vijith Assar":{"relativeUrl":"/people/#vijith-assar"},"viola ":{"relativeUrl":"/people/#viola-"},"vipulrawat":{"relativeUrl":"/people/#vipulrawat"},"Vishal Sharma":{"relativeUrl":"/people/#vishal-sharma"},"Vishal Singh":{"relativeUrl":"/people/#vishal-singh"},"Vishesh Rawal":{"relativeUrl":"/people/#vishesh-rawal"},"Vishwas Srivastava":{"relativeUrl":"/people/#vishwas-srivastava"},"Vítor Galvão":{"relativeUrl":"/people/#vitor-galvao"},"Vivek Tiwari":{"relativeUrl":"/people/#vivek-tiwari"},"wackbyte":{"relativeUrl":"/people/#wackbyte"},"Wade Marshall":{"relativeUrl":"/people/#wade-marshall"},"wagedu":{"relativeUrl":"/people/#wagedu"},"Wes Lord":{"relativeUrl":"/people/#wes-lord"},"Will Martin":{"relativeUrl":"/people/#will-martin"},"willallstet":{"relativeUrl":"/people/#willallstet"},"William Hazard":{"relativeUrl":"/people/#william-hazard"},"Wu Che Yu":{"relativeUrl":"/people/#wu-che-yu"},"Xavier Góngora":{"relativeUrl":"/people/#xavier-gongora"},"Xavier Snelgrove":{"relativeUrl":"/people/#xavier-snelgrove"},"XingZiLong":{"relativeUrl":"/people/#xingzilong"},"XTY":{"relativeUrl":"/people/#xty"},"XY Feng":{"relativeUrl":"/people/#xy-feng"},"Yana Agun Siswanto":{"relativeUrl":"/people/#yana-agun-siswanto"},"Yannick Assogba":{"relativeUrl":"/people/#yannick-assogba"},"Yasai":{"relativeUrl":"/people/#yasai"},"Yash Pandey":{"relativeUrl":"/people/#yash-pandey"},"YewonCALLI":{"relativeUrl":"/people/#yewoncalli"},"Yifan Mai":{"relativeUrl":"/people/#yifan-mai"},"Yining Shi":{"relativeUrl":"/people/#yining-shi"},"Yograj Rajput":{"relativeUrl":"/people/#yograj-rajput"},"Yolonanido":{"relativeUrl":"/people/#yolonanido"},"Yousef Abu-Salah":{"relativeUrl":"/people/#yousef-abu-salah"},"yu":{"relativeUrl":"/people/#yu"},"Yuki":{"relativeUrl":"/people/#yuki"},"Yuting Lu":{"relativeUrl":"/people/#yuting-lu"},"Zac Tolle":{"relativeUrl":"/people/#zac-tolle"},"Zach Rispoli":{"relativeUrl":"/people/#zach-rispoli"},"zacharystenger":{"relativeUrl":"/people/#zacharystenger"},"Zearin":{"relativeUrl":"/people/#zearin"},"Zeke Sikelianos":{"relativeUrl":"/people/#zeke-sikelianos"},"zelf0":{"relativeUrl":"/people/#zelf0"},"Zeno Zeng":{"relativeUrl":"/people/#zeno-zeng"},"Zhao Xin":{"relativeUrl":"/people/#zhao-xin"},"Zoë Ingram":{"relativeUrl":"/people/#zoe-ingram"},"Zoe Stenger":{"relativeUrl":"/people/#zoe-stenger"},"æmon":{"relativeUrl":"/people/#æmon"},"李坤霖":{"relativeUrl":"/people/#李坤霖"}},"reference-fallback":{"abs()":{"relativeUrl":"/reference/p5/abs","alias":"abs"},"accelerationX":{"relativeUrl":"/reference/p5/accelerationX"},"accelerationY":{"relativeUrl":"/reference/p5/accelerationY"},"accelerationZ":{"relativeUrl":"/reference/p5/accelerationZ"},"acos()":{"relativeUrl":"/reference/p5/acos","alias":"acos"},"alpha()":{"relativeUrl":"/reference/p5/alpha","alias":"alpha"},"ambientLight()":{"relativeUrl":"/reference/p5/ambientLight","alias":"ambientLight"},"ambientMaterial()":{"relativeUrl":"/reference/p5/ambientMaterial","alias":"ambientMaterial"},"angleMode()":{"relativeUrl":"/reference/p5/angleMode","alias":"angleMode"},"append()":{"relativeUrl":"/reference/p5/append","alias":"append"},"applyMatrix()":{"relativeUrl":"/reference/p5/applyMatrix","alias":"applyMatrix"},"arc()":{"relativeUrl":"/reference/p5/arc","alias":"arc"},"arrayCopy()":{"relativeUrl":"/reference/p5/arrayCopy","alias":"arrayCopy"},"asin()":{"relativeUrl":"/reference/p5/asin","alias":"asin"},"atan()":{"relativeUrl":"/reference/p5/atan","alias":"atan"},"atan2()":{"relativeUrl":"/reference/p5/atan2","alias":"atan2"},"background()":{"relativeUrl":"/reference/p5/background","alias":"background"},"baseColorShader()":{"relativeUrl":"/reference/p5/baseColorShader","alias":"baseColorShader"},"baseMaterialShader()":{"relativeUrl":"/reference/p5/baseMaterialShader","alias":"baseMaterialShader"},"baseNormalShader()":{"relativeUrl":"/reference/p5/baseNormalShader","alias":"baseNormalShader"},"baseStrokeShader()":{"relativeUrl":"/reference/p5/baseStrokeShader","alias":"baseStrokeShader"},"beginClip()":{"relativeUrl":"/reference/p5/beginClip","alias":"beginClip"},"beginContour()":{"relativeUrl":"/reference/p5/beginContour","alias":"beginContour"},"beginGeometry()":{"relativeUrl":"/reference/p5/beginGeometry","alias":"beginGeometry"},"beginShape()":{"relativeUrl":"/reference/p5/beginShape","alias":"beginShape"},"bezier()":{"relativeUrl":"/reference/p5/bezier","alias":"bezier"},"bezierDetail()":{"relativeUrl":"/reference/p5/bezierDetail","alias":"bezierDetail"},"bezierPoint()":{"relativeUrl":"/reference/p5/bezierPoint","alias":"bezierPoint"},"bezierTangent()":{"relativeUrl":"/reference/p5/bezierTangent","alias":"bezierTangent"},"bezierVertex()":{"relativeUrl":"/reference/p5/bezierVertex","alias":"bezierVertex"},"blend()":{"relativeUrl":"/reference/p5/blend","alias":"blend"},"blendMode()":{"relativeUrl":"/reference/p5/blendMode","alias":"blendMode"},"blue()":{"relativeUrl":"/reference/p5/blue","alias":"blue"},"boolean()":{"relativeUrl":"/reference/p5/boolean","alias":"boolean"},"box()":{"relativeUrl":"/reference/p5/box","alias":"box"},"brightness()":{"relativeUrl":"/reference/p5/brightness","alias":"brightness"},"buildGeometry()":{"relativeUrl":"/reference/p5/buildGeometry","alias":"buildGeometry"},"byte()":{"relativeUrl":"/reference/p5/byte","alias":"byte"},"camera()":{"relativeUrl":"/reference/p5/camera","alias":"camera"},"ceil()":{"relativeUrl":"/reference/p5/ceil","alias":"ceil"},"changed()":{"relativeUrl":"/reference/p5/changed","alias":"changed"},"char()":{"relativeUrl":"/reference/p5/char","alias":"char"},"circle()":{"relativeUrl":"/reference/p5/circle","alias":"circle"},"class":{"relativeUrl":"/reference/p5/class"},"clear()":{"relativeUrl":"/reference/p5/clear","alias":"clear"},"clearDepth()":{"relativeUrl":"/reference/p5/clearDepth","alias":"clearDepth"},"clearStorage()":{"relativeUrl":"/reference/p5/clearStorage","alias":"clearStorage"},"clip()":{"relativeUrl":"/reference/p5/clip","alias":"clip"},"color()":{"relativeUrl":"/reference/p5/color","alias":"color"},"colorMode()":{"relativeUrl":"/reference/p5/colorMode","alias":"colorMode"},"concat()":{"relativeUrl":"/reference/p5/concat","alias":"concat"},"cone()":{"relativeUrl":"/reference/p5/cone","alias":"cone"},"console":{"relativeUrl":"/reference/p5/console"},"AUTO":{"relativeUrl":"/reference/p5/AUTO"},"DEGREES":{"relativeUrl":"/reference/p5/DEGREES"},"HALF_PI":{"relativeUrl":"/reference/p5/HALF_PI"},"HSB":{"relativeUrl":"/reference/p5/HSB"},"P2D":{"relativeUrl":"/reference/p5/P2D"},"PI":{"relativeUrl":"/reference/p5/PI"},"QUARTER_PI":{"relativeUrl":"/reference/p5/QUARTER_PI"},"RADIANS":{"relativeUrl":"/reference/p5/RADIANS"},"TAU":{"relativeUrl":"/reference/p5/TAU"},"TWO_PI":{"relativeUrl":"/reference/p5/TWO_PI"},"VERSION":{"relativeUrl":"/reference/p5/VERSION"},"WEBGL":{"relativeUrl":"/reference/p5/WEBGL"},"WEBGL2":{"relativeUrl":"/reference/p5/WEBGL2"},"constrain()":{"relativeUrl":"/reference/p5/constrain","alias":"constrain"},"copy()":{"relativeUrl":"/reference/p5/copy","alias":"copy"},"cos()":{"relativeUrl":"/reference/p5/cos","alias":"cos"},"createA()":{"relativeUrl":"/reference/p5/createA","alias":"createA"},"createAudio()":{"relativeUrl":"/reference/p5/createAudio","alias":"createAudio"},"createButton()":{"relativeUrl":"/reference/p5/createButton","alias":"createButton"},"createCamera()":{"relativeUrl":"/reference/p5/createCamera","alias":"createCamera"},"createCanvas()":{"relativeUrl":"/reference/p5/createCanvas","alias":"createCanvas"},"createCapture()":{"relativeUrl":"/reference/p5/createCapture","alias":"createCapture"},"createCheckbox()":{"relativeUrl":"/reference/p5/createCheckbox","alias":"createCheckbox"},"createColorPicker()":{"relativeUrl":"/reference/p5/createColorPicker","alias":"createColorPicker"},"createDiv()":{"relativeUrl":"/reference/p5/createDiv","alias":"createDiv"},"createElement()":{"relativeUrl":"/reference/p5/createElement","alias":"createElement"},"createFileInput()":{"relativeUrl":"/reference/p5/createFileInput","alias":"createFileInput"},"createFilterShader()":{"relativeUrl":"/reference/p5/createFilterShader","alias":"createFilterShader"},"createFramebuffer()":{"relativeUrl":"/reference/p5/createFramebuffer","alias":"createFramebuffer"},"createGraphics()":{"relativeUrl":"/reference/p5/createGraphics","alias":"createGraphics"},"createImage()":{"relativeUrl":"/reference/p5/createImage","alias":"createImage"},"createImg()":{"relativeUrl":"/reference/p5/createImg","alias":"createImg"},"createInput()":{"relativeUrl":"/reference/p5/createInput","alias":"createInput"},"createModel()":{"relativeUrl":"/reference/p5/createModel","alias":"createModel"},"createNumberDict()":{"relativeUrl":"/reference/p5/createNumberDict","alias":"createNumberDict"},"createP()":{"relativeUrl":"/reference/p5/createP","alias":"createP"},"createRadio()":{"relativeUrl":"/reference/p5/createRadio","alias":"createRadio"},"createSelect()":{"relativeUrl":"/reference/p5/createSelect","alias":"createSelect"},"createShader()":{"relativeUrl":"/reference/p5/createShader","alias":"createShader"},"createSlider()":{"relativeUrl":"/reference/p5/createSlider","alias":"createSlider"},"createSpan()":{"relativeUrl":"/reference/p5/createSpan","alias":"createSpan"},"createStringDict()":{"relativeUrl":"/reference/p5/createStringDict","alias":"createStringDict"},"createVector()":{"relativeUrl":"/reference/p5/createVector","alias":"createVector"},"createVideo()":{"relativeUrl":"/reference/p5/createVideo","alias":"createVideo"},"createWriter()":{"relativeUrl":"/reference/p5/createWriter","alias":"createWriter"},"cursor()":{"relativeUrl":"/reference/p5/cursor","alias":"cursor"},"curve()":{"relativeUrl":"/reference/p5/curve","alias":"curve"},"curveDetail()":{"relativeUrl":"/reference/p5/curveDetail","alias":"curveDetail"},"curvePoint()":{"relativeUrl":"/reference/p5/curvePoint","alias":"curvePoint"},"curveTangent()":{"relativeUrl":"/reference/p5/curveTangent","alias":"curveTangent"},"curveTightness()":{"relativeUrl":"/reference/p5/curveTightness","alias":"curveTightness"},"curveVertex()":{"relativeUrl":"/reference/p5/curveVertex","alias":"curveVertex"},"cylinder()":{"relativeUrl":"/reference/p5/cylinder","alias":"cylinder"},"day()":{"relativeUrl":"/reference/p5/day","alias":"day"},"debugMode()":{"relativeUrl":"/reference/p5/debugMode","alias":"debugMode"},"degrees()":{"relativeUrl":"/reference/p5/degrees","alias":"degrees"},"deltaTime":{"relativeUrl":"/reference/p5/deltaTime"},"describe()":{"relativeUrl":"/reference/p5/describe","alias":"describe"},"describeElement()":{"relativeUrl":"/reference/p5/describeElement","alias":"describeElement"},"deviceMoved()":{"relativeUrl":"/reference/p5/deviceMoved","alias":"deviceMoved"},"deviceOrientation":{"relativeUrl":"/reference/p5/deviceOrientation"},"deviceShaken()":{"relativeUrl":"/reference/p5/deviceShaken","alias":"deviceShaken"},"deviceTurned()":{"relativeUrl":"/reference/p5/deviceTurned","alias":"deviceTurned"},"directionalLight()":{"relativeUrl":"/reference/p5/directionalLight","alias":"directionalLight"},"disableFriendlyErrors":{"relativeUrl":"/reference/p5/disableFriendlyErrors"},"displayDensity()":{"relativeUrl":"/reference/p5/displayDensity","alias":"displayDensity"},"displayHeight":{"relativeUrl":"/reference/p5/displayHeight"},"displayWidth":{"relativeUrl":"/reference/p5/displayWidth"},"dist()":{"relativeUrl":"/reference/p5/dist","alias":"dist"},"doubleClicked()":{"relativeUrl":"/reference/p5/doubleClicked","alias":"doubleClicked"},"draw()":{"relativeUrl":"/reference/p5/draw","alias":"draw"},"drawingContext":{"relativeUrl":"/reference/p5/drawingContext"},"ellipse()":{"relativeUrl":"/reference/p5/ellipse","alias":"ellipse"},"ellipseMode()":{"relativeUrl":"/reference/p5/ellipseMode","alias":"ellipseMode"},"ellipsoid()":{"relativeUrl":"/reference/p5/ellipsoid","alias":"ellipsoid"},"emissiveMaterial()":{"relativeUrl":"/reference/p5/emissiveMaterial","alias":"emissiveMaterial"},"endClip()":{"relativeUrl":"/reference/p5/endClip","alias":"endClip"},"endContour()":{"relativeUrl":"/reference/p5/endContour","alias":"endContour"},"endGeometry()":{"relativeUrl":"/reference/p5/endGeometry","alias":"endGeometry"},"endShape()":{"relativeUrl":"/reference/p5/endShape","alias":"endShape"},"erase()":{"relativeUrl":"/reference/p5/erase","alias":"erase"},"exitPointerLock()":{"relativeUrl":"/reference/p5/exitPointerLock","alias":"exitPointerLock"},"exp()":{"relativeUrl":"/reference/p5/exp","alias":"exp"},"fill()":{"relativeUrl":"/reference/p5/fill","alias":"fill"},"filter()":{"relativeUrl":"/reference/p5/filter","alias":"filter"},"float()":{"relativeUrl":"/reference/p5/float","alias":"float"},"floor()":{"relativeUrl":"/reference/p5/floor","alias":"floor"},"focused":{"relativeUrl":"/reference/p5/focused"},"for":{"relativeUrl":"/reference/p5/for"},"fract()":{"relativeUrl":"/reference/p5/fract","alias":"fract"},"frameCount":{"relativeUrl":"/reference/p5/frameCount"},"frameRate()":{"relativeUrl":"/reference/p5/frameRate","alias":"frameRate"},"freeGeometry()":{"relativeUrl":"/reference/p5/freeGeometry","alias":"freeGeometry"},"frustum()":{"relativeUrl":"/reference/p5/frustum","alias":"frustum"},"fullscreen()":{"relativeUrl":"/reference/p5/fullscreen","alias":"fullscreen"},"function":{"relativeUrl":"/reference/p5/function"},"get()":{"relativeUrl":"/reference/p5/get","alias":"get"},"getItem()":{"relativeUrl":"/reference/p5/getItem","alias":"getItem"},"getTargetFrameRate()":{"relativeUrl":"/reference/p5/getTargetFrameRate","alias":"getTargetFrameRate"},"getURL()":{"relativeUrl":"/reference/p5/getURL","alias":"getURL"},"getURLParams()":{"relativeUrl":"/reference/p5/getURLParams","alias":"getURLParams"},"getURLPath()":{"relativeUrl":"/reference/p5/getURLPath","alias":"getURLPath"},"green()":{"relativeUrl":"/reference/p5/green","alias":"green"},"gridOutput()":{"relativeUrl":"/reference/p5/gridOutput","alias":"gridOutput"},"height":{"relativeUrl":"/reference/p5/height"},"hex()":{"relativeUrl":"/reference/p5/hex","alias":"hex"},"hour()":{"relativeUrl":"/reference/p5/hour","alias":"hour"},"httpDo()":{"relativeUrl":"/reference/p5/httpDo","alias":"httpDo"},"httpGet()":{"relativeUrl":"/reference/p5/httpGet","alias":"httpGet"},"httpPost()":{"relativeUrl":"/reference/p5/httpPost","alias":"httpPost"},"hue()":{"relativeUrl":"/reference/p5/hue","alias":"hue"},"if":{"relativeUrl":"/reference/p5/if"},"image()":{"relativeUrl":"/reference/p5/image","alias":"image"},"imageLight()":{"relativeUrl":"/reference/p5/imageLight","alias":"imageLight"},"imageMode()":{"relativeUrl":"/reference/p5/imageMode","alias":"imageMode"},"input()":{"relativeUrl":"/reference/p5/input","alias":"input"},"int()":{"relativeUrl":"/reference/p5/int","alias":"int"},"isLooping()":{"relativeUrl":"/reference/p5/isLooping","alias":"isLooping"},"join()":{"relativeUrl":"/reference/p5/join","alias":"join"},"key":{"relativeUrl":"/reference/p5/key"},"keyCode":{"relativeUrl":"/reference/p5/keyCode"},"keyIsDown()":{"relativeUrl":"/reference/p5/keyIsDown","alias":"keyIsDown"},"keyIsPressed":{"relativeUrl":"/reference/p5/keyIsPressed"},"keyPressed()":{"relativeUrl":"/reference/p5/keyPressed","alias":"keyPressed"},"keyReleased()":{"relativeUrl":"/reference/p5/keyReleased","alias":"keyReleased"},"keyTyped()":{"relativeUrl":"/reference/p5/keyTyped","alias":"keyTyped"},"lerp()":{"relativeUrl":"/reference/p5/lerp","alias":"lerp"},"lerpColor()":{"relativeUrl":"/reference/p5/lerpColor","alias":"lerpColor"},"let":{"relativeUrl":"/reference/p5/let"},"lightFalloff()":{"relativeUrl":"/reference/p5/lightFalloff","alias":"lightFalloff"},"lightness()":{"relativeUrl":"/reference/p5/lightness","alias":"lightness"},"lights()":{"relativeUrl":"/reference/p5/lights","alias":"lights"},"line()":{"relativeUrl":"/reference/p5/line","alias":"line"},"linePerspective()":{"relativeUrl":"/reference/p5/linePerspective","alias":"linePerspective"},"loadBytes()":{"relativeUrl":"/reference/p5/loadBytes","alias":"loadBytes"},"loadFont()":{"relativeUrl":"/reference/p5/loadFont","alias":"loadFont"},"loadImage()":{"relativeUrl":"/reference/p5/loadImage","alias":"loadImage"},"loadJSON()":{"relativeUrl":"/reference/p5/loadJSON","alias":"loadJSON"},"loadModel()":{"relativeUrl":"/reference/p5/loadModel","alias":"loadModel"},"loadPixels()":{"relativeUrl":"/reference/p5/loadPixels","alias":"loadPixels"},"loadShader()":{"relativeUrl":"/reference/p5/loadShader","alias":"loadShader"},"loadStrings()":{"relativeUrl":"/reference/p5/loadStrings","alias":"loadStrings"},"loadTable()":{"relativeUrl":"/reference/p5/loadTable","alias":"loadTable"},"loadXML()":{"relativeUrl":"/reference/p5/loadXML","alias":"loadXML"},"log()":{"relativeUrl":"/reference/p5/log","alias":"log"},"loop()":{"relativeUrl":"/reference/p5/loop","alias":"loop"},"mag()":{"relativeUrl":"/reference/p5/mag","alias":"mag"},"map()":{"relativeUrl":"/reference/p5/map","alias":"map"},"match()":{"relativeUrl":"/reference/p5/match","alias":"match"},"matchAll()":{"relativeUrl":"/reference/p5/matchAll","alias":"matchAll"},"max()":{"relativeUrl":"/reference/p5/max","alias":"max"},"metalness()":{"relativeUrl":"/reference/p5/metalness","alias":"metalness"},"millis()":{"relativeUrl":"/reference/p5/millis","alias":"millis"},"min()":{"relativeUrl":"/reference/p5/min","alias":"min"},"minute()":{"relativeUrl":"/reference/p5/minute","alias":"minute"},"model()":{"relativeUrl":"/reference/p5/model","alias":"model"},"month()":{"relativeUrl":"/reference/p5/month","alias":"month"},"mouseButton":{"relativeUrl":"/reference/p5/mouseButton"},"mouseClicked()":{"relativeUrl":"/reference/p5/mouseClicked","alias":"mouseClicked"},"mouseDragged()":{"relativeUrl":"/reference/p5/mouseDragged","alias":"mouseDragged"},"mouseIsPressed":{"relativeUrl":"/reference/p5/mouseIsPressed"},"mouseMoved()":{"relativeUrl":"/reference/p5/mouseMoved","alias":"mouseMoved"},"mousePressed()":{"relativeUrl":"/reference/p5/mousePressed","alias":"mousePressed"},"mouseReleased()":{"relativeUrl":"/reference/p5/mouseReleased","alias":"mouseReleased"},"mouseWheel()":{"relativeUrl":"/reference/p5/mouseWheel","alias":"mouseWheel"},"mouseX":{"relativeUrl":"/reference/p5/mouseX"},"mouseY":{"relativeUrl":"/reference/p5/mouseY"},"movedX":{"relativeUrl":"/reference/p5/movedX"},"movedY":{"relativeUrl":"/reference/p5/movedY"},"nf()":{"relativeUrl":"/reference/p5/nf","alias":"nf"},"nfc()":{"relativeUrl":"/reference/p5/nfc","alias":"nfc"},"nfp()":{"relativeUrl":"/reference/p5/nfp","alias":"nfp"},"nfs()":{"relativeUrl":"/reference/p5/nfs","alias":"nfs"},"noCanvas()":{"relativeUrl":"/reference/p5/noCanvas","alias":"noCanvas"},"noCursor()":{"relativeUrl":"/reference/p5/noCursor","alias":"noCursor"},"noDebugMode()":{"relativeUrl":"/reference/p5/noDebugMode","alias":"noDebugMode"},"noErase()":{"relativeUrl":"/reference/p5/noErase","alias":"noErase"},"noFill()":{"relativeUrl":"/reference/p5/noFill","alias":"noFill"},"noLights()":{"relativeUrl":"/reference/p5/noLights","alias":"noLights"},"noLoop()":{"relativeUrl":"/reference/p5/noLoop","alias":"noLoop"},"noSmooth()":{"relativeUrl":"/reference/p5/noSmooth","alias":"noSmooth"},"noStroke()":{"relativeUrl":"/reference/p5/noStroke","alias":"noStroke"},"noTint()":{"relativeUrl":"/reference/p5/noTint","alias":"noTint"},"noise()":{"relativeUrl":"/reference/p5/noise","alias":"noise"},"noiseDetail()":{"relativeUrl":"/reference/p5/noiseDetail","alias":"noiseDetail"},"noiseSeed()":{"relativeUrl":"/reference/p5/noiseSeed","alias":"noiseSeed"},"norm()":{"relativeUrl":"/reference/p5/norm","alias":"norm"},"normal()":{"relativeUrl":"/reference/p5/normal","alias":"normal"},"normalMaterial()":{"relativeUrl":"/reference/p5/normalMaterial","alias":"normalMaterial"},"orbitControl()":{"relativeUrl":"/reference/p5/orbitControl","alias":"orbitControl"},"ortho()":{"relativeUrl":"/reference/p5/ortho","alias":"ortho"},"p5.Camera":{"relativeUrl":"/reference/p5/p5.Camera"},"p5.Color":{"relativeUrl":"/reference/p5/p5.Color"},"p5.Element":{"relativeUrl":"/reference/p5/p5.Element"},"p5.File":{"relativeUrl":"/reference/p5/p5.File"},"p5.Font":{"relativeUrl":"/reference/p5/p5.Font"},"p5.Framebuffer":{"relativeUrl":"/reference/p5/p5.Framebuffer"},"p5.Geometry":{"relativeUrl":"/reference/p5/p5.Geometry"},"p5.Graphics":{"relativeUrl":"/reference/p5/p5.Graphics"},"p5.Image":{"relativeUrl":"/reference/p5/p5.Image"},"p5.MediaElement":{"relativeUrl":"/reference/p5/p5.MediaElement"},"p5.NumberDict":{"relativeUrl":"/reference/p5/p5.NumberDict"},"p5.PrintWriter":{"relativeUrl":"/reference/p5/p5.PrintWriter"},"p5.Renderer":{"relativeUrl":"/reference/p5/p5.Renderer"},"p5.Shader":{"relativeUrl":"/reference/p5/p5.Shader"},"p5.StringDict":{"relativeUrl":"/reference/p5/p5.StringDict"},"p5.Table":{"relativeUrl":"/reference/p5/p5.Table"},"p5.TableRow":{"relativeUrl":"/reference/p5/p5.TableRow"},"p5.TypedDict":{"relativeUrl":"/reference/p5/p5.TypedDict"},"p5.Vector":{"relativeUrl":"/reference/p5/p5.Vector"},"p5.XML":{"relativeUrl":"/reference/p5/p5.XML"},"p5":{"relativeUrl":"/reference/p5/p5"},"pAccelerationX":{"relativeUrl":"/reference/p5/pAccelerationX"},"pAccelerationY":{"relativeUrl":"/reference/p5/pAccelerationY"},"pAccelerationZ":{"relativeUrl":"/reference/p5/pAccelerationZ"},"pRotationX":{"relativeUrl":"/reference/p5/pRotationX"},"pRotationY":{"relativeUrl":"/reference/p5/pRotationY"},"pRotationZ":{"relativeUrl":"/reference/p5/pRotationZ"},"paletteLerp()":{"relativeUrl":"/reference/p5/paletteLerp","alias":"paletteLerp"},"panorama()":{"relativeUrl":"/reference/p5/panorama","alias":"panorama"},"perspective()":{"relativeUrl":"/reference/p5/perspective","alias":"perspective"},"pixelDensity()":{"relativeUrl":"/reference/p5/pixelDensity","alias":"pixelDensity"},"pixels":{"relativeUrl":"/reference/p5/pixels"},"plane()":{"relativeUrl":"/reference/p5/plane","alias":"plane"},"pmouseX":{"relativeUrl":"/reference/p5/pmouseX"},"pmouseY":{"relativeUrl":"/reference/p5/pmouseY"},"point()":{"relativeUrl":"/reference/p5/point","alias":"point"},"pointLight()":{"relativeUrl":"/reference/p5/pointLight","alias":"pointLight"},"pop()":{"relativeUrl":"/reference/p5/pop","alias":"pop"},"pow()":{"relativeUrl":"/reference/p5/pow","alias":"pow"},"preload()":{"relativeUrl":"/reference/p5/preload","alias":"preload"},"print()":{"relativeUrl":"/reference/p5/print","alias":"print"},"push()":{"relativeUrl":"/reference/p5/push","alias":"push"},"pwinMouseX":{"relativeUrl":"/reference/p5/pwinMouseX"},"pwinMouseY":{"relativeUrl":"/reference/p5/pwinMouseY"},"quad()":{"relativeUrl":"/reference/p5/quad","alias":"quad"},"quadraticVertex()":{"relativeUrl":"/reference/p5/quadraticVertex","alias":"quadraticVertex"},"radians()":{"relativeUrl":"/reference/p5/radians","alias":"radians"},"random()":{"relativeUrl":"/reference/p5/random","alias":"random"},"randomGaussian()":{"relativeUrl":"/reference/p5/randomGaussian","alias":"randomGaussian"},"randomSeed()":{"relativeUrl":"/reference/p5/randomSeed","alias":"randomSeed"},"rect()":{"relativeUrl":"/reference/p5/rect","alias":"rect"},"rectMode()":{"relativeUrl":"/reference/p5/rectMode","alias":"rectMode"},"red()":{"relativeUrl":"/reference/p5/red","alias":"red"},"redraw()":{"relativeUrl":"/reference/p5/redraw","alias":"redraw"},"remove()":{"relativeUrl":"/reference/p5/remove","alias":"remove"},"removeElements()":{"relativeUrl":"/reference/p5/removeElements","alias":"removeElements"},"removeItem()":{"relativeUrl":"/reference/p5/removeItem","alias":"removeItem"},"requestPointerLock()":{"relativeUrl":"/reference/p5/requestPointerLock","alias":"requestPointerLock"},"resetMatrix()":{"relativeUrl":"/reference/p5/resetMatrix","alias":"resetMatrix"},"resetShader()":{"relativeUrl":"/reference/p5/resetShader","alias":"resetShader"},"resizeCanvas()":{"relativeUrl":"/reference/p5/resizeCanvas","alias":"resizeCanvas"},"reverse()":{"relativeUrl":"/reference/p5/reverse","alias":"reverse"},"rotate()":{"relativeUrl":"/reference/p5/rotate","alias":"rotate"},"rotateX()":{"relativeUrl":"/reference/p5/rotateX","alias":"rotateX"},"rotateY()":{"relativeUrl":"/reference/p5/rotateY","alias":"rotateY"},"rotateZ()":{"relativeUrl":"/reference/p5/rotateZ","alias":"rotateZ"},"rotationX":{"relativeUrl":"/reference/p5/rotationX"},"rotationY":{"relativeUrl":"/reference/p5/rotationY"},"rotationZ":{"relativeUrl":"/reference/p5/rotationZ"},"round()":{"relativeUrl":"/reference/p5/round","alias":"round"},"saturation()":{"relativeUrl":"/reference/p5/saturation","alias":"saturation"},"save()":{"relativeUrl":"/reference/p5/save","alias":"save"},"saveCanvas()":{"relativeUrl":"/reference/p5/saveCanvas","alias":"saveCanvas"},"saveFrames()":{"relativeUrl":"/reference/p5/saveFrames","alias":"saveFrames"},"saveGif()":{"relativeUrl":"/reference/p5/saveGif","alias":"saveGif"},"saveJSON()":{"relativeUrl":"/reference/p5/saveJSON","alias":"saveJSON"},"saveStrings()":{"relativeUrl":"/reference/p5/saveStrings","alias":"saveStrings"},"saveTable()":{"relativeUrl":"/reference/p5/saveTable","alias":"saveTable"},"scale()":{"relativeUrl":"/reference/p5/scale","alias":"scale"},"second()":{"relativeUrl":"/reference/p5/second","alias":"second"},"select()":{"relativeUrl":"/reference/p5/select","alias":"select"},"selectAll()":{"relativeUrl":"/reference/p5/selectAll","alias":"selectAll"},"set()":{"relativeUrl":"/reference/p5/set","alias":"set"},"setAttributes()":{"relativeUrl":"/reference/p5/setAttributes","alias":"setAttributes"},"setCamera()":{"relativeUrl":"/reference/p5/setCamera","alias":"setCamera"},"setMoveThreshold()":{"relativeUrl":"/reference/p5/setMoveThreshold","alias":"setMoveThreshold"},"setShakeThreshold()":{"relativeUrl":"/reference/p5/setShakeThreshold","alias":"setShakeThreshold"},"setup()":{"relativeUrl":"/reference/p5/setup","alias":"setup"},"shader()":{"relativeUrl":"/reference/p5/shader","alias":"shader"},"shearX()":{"relativeUrl":"/reference/p5/shearX","alias":"shearX"},"shearY()":{"relativeUrl":"/reference/p5/shearY","alias":"shearY"},"shininess()":{"relativeUrl":"/reference/p5/shininess","alias":"shininess"},"shorten()":{"relativeUrl":"/reference/p5/shorten","alias":"shorten"},"shuffle()":{"relativeUrl":"/reference/p5/shuffle","alias":"shuffle"},"sin()":{"relativeUrl":"/reference/p5/sin","alias":"sin"},"smooth()":{"relativeUrl":"/reference/p5/smooth","alias":"smooth"},"sort()":{"relativeUrl":"/reference/p5/sort","alias":"sort"},"specularColor()":{"relativeUrl":"/reference/p5/specularColor","alias":"specularColor"},"specularMaterial()":{"relativeUrl":"/reference/p5/specularMaterial","alias":"specularMaterial"},"sphere()":{"relativeUrl":"/reference/p5/sphere","alias":"sphere"},"splice()":{"relativeUrl":"/reference/p5/splice","alias":"splice"},"split()":{"relativeUrl":"/reference/p5/split","alias":"split"},"splitTokens()":{"relativeUrl":"/reference/p5/splitTokens","alias":"splitTokens"},"spotLight()":{"relativeUrl":"/reference/p5/spotLight","alias":"spotLight"},"sq()":{"relativeUrl":"/reference/p5/sq","alias":"sq"},"sqrt()":{"relativeUrl":"/reference/p5/sqrt","alias":"sqrt"},"square()":{"relativeUrl":"/reference/p5/square","alias":"square"},"storeItem()":{"relativeUrl":"/reference/p5/storeItem","alias":"storeItem"},"str()":{"relativeUrl":"/reference/p5/str","alias":"str"},"stroke()":{"relativeUrl":"/reference/p5/stroke","alias":"stroke"},"strokeCap()":{"relativeUrl":"/reference/p5/strokeCap","alias":"strokeCap"},"strokeJoin()":{"relativeUrl":"/reference/p5/strokeJoin","alias":"strokeJoin"},"strokeWeight()":{"relativeUrl":"/reference/p5/strokeWeight","alias":"strokeWeight"},"subset()":{"relativeUrl":"/reference/p5/subset","alias":"subset"},"tan()":{"relativeUrl":"/reference/p5/tan","alias":"tan"},"text()":{"relativeUrl":"/reference/p5/text","alias":"text"},"textAlign()":{"relativeUrl":"/reference/p5/textAlign","alias":"textAlign"},"textAscent()":{"relativeUrl":"/reference/p5/textAscent","alias":"textAscent"},"textDescent()":{"relativeUrl":"/reference/p5/textDescent","alias":"textDescent"},"textFont()":{"relativeUrl":"/reference/p5/textFont","alias":"textFont"},"textLeading()":{"relativeUrl":"/reference/p5/textLeading","alias":"textLeading"},"textOutput()":{"relativeUrl":"/reference/p5/textOutput","alias":"textOutput"},"textSize()":{"relativeUrl":"/reference/p5/textSize","alias":"textSize"},"textStyle()":{"relativeUrl":"/reference/p5/textStyle","alias":"textStyle"},"textWidth()":{"relativeUrl":"/reference/p5/textWidth","alias":"textWidth"},"textWrap()":{"relativeUrl":"/reference/p5/textWrap","alias":"textWrap"},"texture()":{"relativeUrl":"/reference/p5/texture","alias":"texture"},"textureMode()":{"relativeUrl":"/reference/p5/textureMode","alias":"textureMode"},"textureWrap()":{"relativeUrl":"/reference/p5/textureWrap","alias":"textureWrap"},"tint()":{"relativeUrl":"/reference/p5/tint","alias":"tint"},"torus()":{"relativeUrl":"/reference/p5/torus","alias":"torus"},"touchEnded()":{"relativeUrl":"/reference/p5/touchEnded","alias":"touchEnded"},"touchMoved()":{"relativeUrl":"/reference/p5/touchMoved","alias":"touchMoved"},"touchStarted()":{"relativeUrl":"/reference/p5/touchStarted","alias":"touchStarted"},"touches":{"relativeUrl":"/reference/p5/touches"},"translate()":{"relativeUrl":"/reference/p5/translate","alias":"translate"},"triangle()":{"relativeUrl":"/reference/p5/triangle","alias":"triangle"},"trim()":{"relativeUrl":"/reference/p5/trim","alias":"trim"},"turnAxis":{"relativeUrl":"/reference/p5/turnAxis"},"Array":{"relativeUrl":"/reference/p5/Array"},"Boolean":{"relativeUrl":"/reference/p5/Boolean"},"Number":{"relativeUrl":"/reference/p5/Number"},"Object":{"relativeUrl":"/reference/p5/Object"},"String":{"relativeUrl":"/reference/p5/String"},"unchar()":{"relativeUrl":"/reference/p5/unchar","alias":"unchar"},"unhex()":{"relativeUrl":"/reference/p5/unhex","alias":"unhex"},"updatePixels()":{"relativeUrl":"/reference/p5/updatePixels","alias":"updatePixels"},"vertex()":{"relativeUrl":"/reference/p5/vertex","alias":"vertex"},"webglVersion":{"relativeUrl":"/reference/p5/webglVersion"},"while":{"relativeUrl":"/reference/p5/while"},"width":{"relativeUrl":"/reference/p5/width"},"winMouseX":{"relativeUrl":"/reference/p5/winMouseX"},"winMouseY":{"relativeUrl":"/reference/p5/winMouseY"},"windowHeight":{"relativeUrl":"/reference/p5/windowHeight"},"windowResized()":{"relativeUrl":"/reference/p5/windowResized","alias":"windowResized"},"windowWidth":{"relativeUrl":"/reference/p5/windowWidth"},"year()":{"relativeUrl":"/reference/p5/year","alias":"year"},"p5.Amplitude.getLevel()":{"relativeUrl":"/reference/p5.Amplitude/getLevel","alias":"getLevel"},"p5.Amplitude.setInput()":{"relativeUrl":"/reference/p5.Amplitude/setInput","alias":"setInput"},"p5.Amplitude.smooth()":{"relativeUrl":"/reference/p5.Amplitude/smooth","alias":"smooth"},"p5.AudioIn.amp()":{"relativeUrl":"/reference/p5.AudioIn/amp","alias":"amp"},"p5.AudioIn.start()":{"relativeUrl":"/reference/p5.AudioIn/start","alias":"start"},"p5.AudioIn.stop()":{"relativeUrl":"/reference/p5.AudioIn/stop","alias":"stop"},"p5.Biquad.freq()":{"relativeUrl":"/reference/p5.Biquad/freq","alias":"freq"},"p5.Biquad.gain()":{"relativeUrl":"/reference/p5.Biquad/gain","alias":"gain"},"p5.Biquad.res()":{"relativeUrl":"/reference/p5.Biquad/res","alias":"res"},"p5.Biquad.setType()":{"relativeUrl":"/reference/p5.Biquad/setType","alias":"setType"},"p5.Camera.camera()":{"relativeUrl":"/reference/p5.Camera/camera","alias":"camera"},"p5.Camera.centerX":{"relativeUrl":"/reference/p5.Camera/centerX","alias":"centerX"},"p5.Camera.centerY":{"relativeUrl":"/reference/p5.Camera/centerY","alias":"centerY"},"p5.Camera.centerZ":{"relativeUrl":"/reference/p5.Camera/centerZ","alias":"centerZ"},"p5.Camera.eyeX":{"relativeUrl":"/reference/p5.Camera/eyeX","alias":"eyeX"},"p5.Camera.eyeY":{"relativeUrl":"/reference/p5.Camera/eyeY","alias":"eyeY"},"p5.Camera.eyeZ":{"relativeUrl":"/reference/p5.Camera/eyeZ","alias":"eyeZ"},"p5.Camera.frustum()":{"relativeUrl":"/reference/p5.Camera/frustum","alias":"frustum"},"p5.Camera.lookAt()":{"relativeUrl":"/reference/p5.Camera/lookAt","alias":"lookAt"},"p5.Camera.move()":{"relativeUrl":"/reference/p5.Camera/move","alias":"move"},"p5.Camera.ortho()":{"relativeUrl":"/reference/p5.Camera/ortho","alias":"ortho"},"p5.Camera.pan()":{"relativeUrl":"/reference/p5.Camera/pan","alias":"pan"},"p5.Camera.perspective()":{"relativeUrl":"/reference/p5.Camera/perspective","alias":"perspective"},"p5.Camera.roll()":{"relativeUrl":"/reference/p5.Camera/roll","alias":"roll"},"p5.Camera.set()":{"relativeUrl":"/reference/p5.Camera/set","alias":"set"},"p5.Camera.setPosition()":{"relativeUrl":"/reference/p5.Camera/setPosition","alias":"setPosition"},"p5.Camera.slerp()":{"relativeUrl":"/reference/p5.Camera/slerp","alias":"slerp"},"p5.Camera.tilt()":{"relativeUrl":"/reference/p5.Camera/tilt","alias":"tilt"},"p5.Camera.upX":{"relativeUrl":"/reference/p5.Camera/upX","alias":"upX"},"p5.Camera.upY":{"relativeUrl":"/reference/p5.Camera/upY","alias":"upY"},"p5.Camera.upZ":{"relativeUrl":"/reference/p5.Camera/upZ","alias":"upZ"},"p5.Color.setAlpha()":{"relativeUrl":"/reference/p5.Color/setAlpha","alias":"setAlpha"},"p5.Color.setBlue()":{"relativeUrl":"/reference/p5.Color/setBlue","alias":"setBlue"},"p5.Color.setGreen()":{"relativeUrl":"/reference/p5.Color/setGreen","alias":"setGreen"},"p5.Color.setRed()":{"relativeUrl":"/reference/p5.Color/setRed","alias":"setRed"},"p5.Color.toString()":{"relativeUrl":"/reference/p5.Color/toString","alias":"toString"},"p5.Delay.amp()":{"relativeUrl":"/reference/p5.Delay/amp","alias":"amp"},"p5.Delay.delayTime()":{"relativeUrl":"/reference/p5.Delay/delayTime","alias":"delayTime"},"p5.Delay.feedback()":{"relativeUrl":"/reference/p5.Delay/feedback","alias":"feedback"},"p5.Delay.process()":{"relativeUrl":"/reference/p5.Delay/process","alias":"process"},"p5.Element.addClass()":{"relativeUrl":"/reference/p5.Element/addClass","alias":"addClass"},"p5.Element.attribute()":{"relativeUrl":"/reference/p5.Element/attribute","alias":"attribute"},"p5.Element.center()":{"relativeUrl":"/reference/p5.Element/center","alias":"center"},"p5.Element.child()":{"relativeUrl":"/reference/p5.Element/child","alias":"child"},"p5.Element.class()":{"relativeUrl":"/reference/p5.Element/class","alias":"class"},"p5.Element.doubleClicked()":{"relativeUrl":"/reference/p5.Element/doubleClicked","alias":"doubleClicked"},"p5.Element.dragLeave()":{"relativeUrl":"/reference/p5.Element/dragLeave","alias":"dragLeave"},"p5.Element.dragOver()":{"relativeUrl":"/reference/p5.Element/dragOver","alias":"dragOver"},"p5.Element.draggable()":{"relativeUrl":"/reference/p5.Element/draggable","alias":"draggable"},"p5.Element.drop()":{"relativeUrl":"/reference/p5.Element/drop","alias":"drop"},"p5.Element.elt":{"relativeUrl":"/reference/p5.Element/elt","alias":"elt"},"p5.Element.hasClass()":{"relativeUrl":"/reference/p5.Element/hasClass","alias":"hasClass"},"p5.Element.height":{"relativeUrl":"/reference/p5.Element/height","alias":"height"},"p5.Element.hide()":{"relativeUrl":"/reference/p5.Element/hide","alias":"hide"},"p5.Element.html()":{"relativeUrl":"/reference/p5.Element/html","alias":"html"},"p5.Element.id()":{"relativeUrl":"/reference/p5.Element/id","alias":"id"},"p5.Element.mouseClicked()":{"relativeUrl":"/reference/p5.Element/mouseClicked","alias":"mouseClicked"},"p5.Element.mouseMoved()":{"relativeUrl":"/reference/p5.Element/mouseMoved","alias":"mouseMoved"},"p5.Element.mouseOut()":{"relativeUrl":"/reference/p5.Element/mouseOut","alias":"mouseOut"},"p5.Element.mouseOver()":{"relativeUrl":"/reference/p5.Element/mouseOver","alias":"mouseOver"},"p5.Element.mousePressed()":{"relativeUrl":"/reference/p5.Element/mousePressed","alias":"mousePressed"},"p5.Element.mouseReleased()":{"relativeUrl":"/reference/p5.Element/mouseReleased","alias":"mouseReleased"},"p5.Element.mouseWheel()":{"relativeUrl":"/reference/p5.Element/mouseWheel","alias":"mouseWheel"},"p5.Element.parent()":{"relativeUrl":"/reference/p5.Element/parent","alias":"parent"},"p5.Element.position()":{"relativeUrl":"/reference/p5.Element/position","alias":"position"},"p5.Element.remove()":{"relativeUrl":"/reference/p5.Element/remove","alias":"remove"},"p5.Element.removeAttribute()":{"relativeUrl":"/reference/p5.Element/removeAttribute","alias":"removeAttribute"},"p5.Element.removeClass()":{"relativeUrl":"/reference/p5.Element/removeClass","alias":"removeClass"},"p5.Element.show()":{"relativeUrl":"/reference/p5.Element/show","alias":"show"},"p5.Element.size()":{"relativeUrl":"/reference/p5.Element/size","alias":"size"},"p5.Element.style()":{"relativeUrl":"/reference/p5.Element/style","alias":"style"},"p5.Element.toggleClass()":{"relativeUrl":"/reference/p5.Element/toggleClass","alias":"toggleClass"},"p5.Element.touchEnded()":{"relativeUrl":"/reference/p5.Element/touchEnded","alias":"touchEnded"},"p5.Element.touchMoved()":{"relativeUrl":"/reference/p5.Element/touchMoved","alias":"touchMoved"},"p5.Element.touchStarted()":{"relativeUrl":"/reference/p5.Element/touchStarted","alias":"touchStarted"},"p5.Element.value()":{"relativeUrl":"/reference/p5.Element/value","alias":"value"},"p5.Element.width":{"relativeUrl":"/reference/p5.Element/width","alias":"width"},"p5.Envelope.attackTime()":{"relativeUrl":"/reference/p5.Envelope/attackTime","alias":"attackTime"},"p5.Envelope.play()":{"relativeUrl":"/reference/p5.Envelope/play","alias":"play"},"p5.Envelope.releaseTime()":{"relativeUrl":"/reference/p5.Envelope/releaseTime","alias":"releaseTime"},"p5.Envelope.setADSR()":{"relativeUrl":"/reference/p5.Envelope/setADSR","alias":"setADSR"},"p5.Envelope.triggerAttack()":{"relativeUrl":"/reference/p5.Envelope/triggerAttack","alias":"triggerAttack"},"p5.Envelope.triggerRelease()":{"relativeUrl":"/reference/p5.Envelope/triggerRelease","alias":"triggerRelease"},"p5.FFT.analyze()":{"relativeUrl":"/reference/p5.FFT/analyze","alias":"analyze"},"p5.FFT.waveform()":{"relativeUrl":"/reference/p5.FFT/waveform","alias":"waveform"},"p5.File.data":{"relativeUrl":"/reference/p5.File/data","alias":"data"},"p5.File.file":{"relativeUrl":"/reference/p5.File/file","alias":"file"},"p5.File.name":{"relativeUrl":"/reference/p5.File/name","alias":"name"},"p5.File.size":{"relativeUrl":"/reference/p5.File/size","alias":"size"},"p5.File.subtype":{"relativeUrl":"/reference/p5.File/subtype","alias":"subtype"},"p5.File.type":{"relativeUrl":"/reference/p5.File/type","alias":"type"},"p5.Font.font":{"relativeUrl":"/reference/p5.Font/font","alias":"font"},"p5.Font.textBounds()":{"relativeUrl":"/reference/p5.Font/textBounds","alias":"textBounds"},"p5.Font.textToPoints()":{"relativeUrl":"/reference/p5.Font/textToPoints","alias":"textToPoints"},"p5.Framebuffer.autoSized()":{"relativeUrl":"/reference/p5.Framebuffer/autoSized","alias":"autoSized"},"p5.Framebuffer.begin()":{"relativeUrl":"/reference/p5.Framebuffer/begin","alias":"begin"},"p5.Framebuffer.color":{"relativeUrl":"/reference/p5.Framebuffer/color","alias":"color"},"p5.Framebuffer.createCamera()":{"relativeUrl":"/reference/p5.Framebuffer/createCamera","alias":"createCamera"},"p5.Framebuffer.depth":{"relativeUrl":"/reference/p5.Framebuffer/depth","alias":"depth"},"p5.Framebuffer.draw()":{"relativeUrl":"/reference/p5.Framebuffer/draw","alias":"draw"},"p5.Framebuffer.end()":{"relativeUrl":"/reference/p5.Framebuffer/end","alias":"end"},"p5.Framebuffer.get()":{"relativeUrl":"/reference/p5.Framebuffer/get","alias":"get"},"p5.Framebuffer.loadPixels()":{"relativeUrl":"/reference/p5.Framebuffer/loadPixels","alias":"loadPixels"},"p5.Framebuffer.pixelDensity()":{"relativeUrl":"/reference/p5.Framebuffer/pixelDensity","alias":"pixelDensity"},"p5.Framebuffer.pixels":{"relativeUrl":"/reference/p5.Framebuffer/pixels","alias":"pixels"},"p5.Framebuffer.remove()":{"relativeUrl":"/reference/p5.Framebuffer/remove","alias":"remove"},"p5.Framebuffer.resize()":{"relativeUrl":"/reference/p5.Framebuffer/resize","alias":"resize"},"p5.Framebuffer.updatePixels()":{"relativeUrl":"/reference/p5.Framebuffer/updatePixels","alias":"updatePixels"},"p5.Gain.amp()":{"relativeUrl":"/reference/p5.Gain/amp","alias":"amp"},"p5.Geometry.calculateBoundingBox()":{"relativeUrl":"/reference/p5.Geometry/calculateBoundingBox","alias":"calculateBoundingBox"},"p5.Geometry.clearColors()":{"relativeUrl":"/reference/p5.Geometry/clearColors","alias":"clearColors"},"p5.Geometry.computeFaces()":{"relativeUrl":"/reference/p5.Geometry/computeFaces","alias":"computeFaces"},"p5.Geometry.computeNormals()":{"relativeUrl":"/reference/p5.Geometry/computeNormals","alias":"computeNormals"},"p5.Geometry.faces":{"relativeUrl":"/reference/p5.Geometry/faces","alias":"faces"},"p5.Geometry.flipU()":{"relativeUrl":"/reference/p5.Geometry/flipU","alias":"flipU"},"p5.Geometry.flipV()":{"relativeUrl":"/reference/p5.Geometry/flipV","alias":"flipV"},"p5.Geometry.normalize()":{"relativeUrl":"/reference/p5.Geometry/normalize","alias":"normalize"},"p5.Geometry.saveObj()":{"relativeUrl":"/reference/p5.Geometry/saveObj","alias":"saveObj"},"p5.Geometry.saveStl()":{"relativeUrl":"/reference/p5.Geometry/saveStl","alias":"saveStl"},"p5.Geometry.uvs":{"relativeUrl":"/reference/p5.Geometry/uvs","alias":"uvs"},"p5.Geometry.vertexNormals":{"relativeUrl":"/reference/p5.Geometry/vertexNormals","alias":"vertexNormals"},"p5.Geometry.vertices":{"relativeUrl":"/reference/p5.Geometry/vertices","alias":"vertices"},"p5.Graphics.createFramebuffer()":{"relativeUrl":"/reference/p5.Graphics/createFramebuffer","alias":"createFramebuffer"},"p5.Graphics.remove()":{"relativeUrl":"/reference/p5.Graphics/remove","alias":"remove"},"p5.Graphics.reset()":{"relativeUrl":"/reference/p5.Graphics/reset","alias":"reset"},"p5.Image.blend()":{"relativeUrl":"/reference/p5.Image/blend","alias":"blend"},"p5.Image.copy()":{"relativeUrl":"/reference/p5.Image/copy","alias":"copy"},"p5.Image.delay()":{"relativeUrl":"/reference/p5.Image/delay","alias":"delay"},"p5.Image.filter()":{"relativeUrl":"/reference/p5.Image/filter","alias":"filter"},"p5.Image.get()":{"relativeUrl":"/reference/p5.Image/get","alias":"get"},"p5.Image.getCurrentFrame()":{"relativeUrl":"/reference/p5.Image/getCurrentFrame","alias":"getCurrentFrame"},"p5.Image.height":{"relativeUrl":"/reference/p5.Image/height","alias":"height"},"p5.Image.loadPixels()":{"relativeUrl":"/reference/p5.Image/loadPixels","alias":"loadPixels"},"p5.Image.mask()":{"relativeUrl":"/reference/p5.Image/mask","alias":"mask"},"p5.Image.numFrames()":{"relativeUrl":"/reference/p5.Image/numFrames","alias":"numFrames"},"p5.Image.pause()":{"relativeUrl":"/reference/p5.Image/pause","alias":"pause"},"p5.Image.pixelDensity()":{"relativeUrl":"/reference/p5.Image/pixelDensity","alias":"pixelDensity"},"p5.Image.pixels":{"relativeUrl":"/reference/p5.Image/pixels","alias":"pixels"},"p5.Image.play()":{"relativeUrl":"/reference/p5.Image/play","alias":"play"},"p5.Image.reset()":{"relativeUrl":"/reference/p5.Image/reset","alias":"reset"},"p5.Image.resize()":{"relativeUrl":"/reference/p5.Image/resize","alias":"resize"},"p5.Image.save()":{"relativeUrl":"/reference/p5.Image/save","alias":"save"},"p5.Image.set()":{"relativeUrl":"/reference/p5.Image/set","alias":"set"},"p5.Image.setFrame()":{"relativeUrl":"/reference/p5.Image/setFrame","alias":"setFrame"},"p5.Image.updatePixels()":{"relativeUrl":"/reference/p5.Image/updatePixels","alias":"updatePixels"},"p5.Image.width":{"relativeUrl":"/reference/p5.Image/width","alias":"width"},"p5.MediaElement.addCue()":{"relativeUrl":"/reference/p5.MediaElement/addCue","alias":"addCue"},"p5.MediaElement.autoplay()":{"relativeUrl":"/reference/p5.MediaElement/autoplay","alias":"autoplay"},"p5.MediaElement.clearCues()":{"relativeUrl":"/reference/p5.MediaElement/clearCues","alias":"clearCues"},"p5.MediaElement.connect()":{"relativeUrl":"/reference/p5.MediaElement/connect","alias":"connect"},"p5.MediaElement.disconnect()":{"relativeUrl":"/reference/p5.MediaElement/disconnect","alias":"disconnect"},"p5.MediaElement.duration()":{"relativeUrl":"/reference/p5.MediaElement/duration","alias":"duration"},"p5.MediaElement.hideControls()":{"relativeUrl":"/reference/p5.MediaElement/hideControls","alias":"hideControls"},"p5.MediaElement.loop()":{"relativeUrl":"/reference/p5.MediaElement/loop","alias":"loop"},"p5.MediaElement.noLoop()":{"relativeUrl":"/reference/p5.MediaElement/noLoop","alias":"noLoop"},"p5.MediaElement.onended()":{"relativeUrl":"/reference/p5.MediaElement/onended","alias":"onended"},"p5.MediaElement.pause()":{"relativeUrl":"/reference/p5.MediaElement/pause","alias":"pause"},"p5.MediaElement.play()":{"relativeUrl":"/reference/p5.MediaElement/play","alias":"play"},"p5.MediaElement.removeCue()":{"relativeUrl":"/reference/p5.MediaElement/removeCue","alias":"removeCue"},"p5.MediaElement.showControls()":{"relativeUrl":"/reference/p5.MediaElement/showControls","alias":"showControls"},"p5.MediaElement.speed()":{"relativeUrl":"/reference/p5.MediaElement/speed","alias":"speed"},"p5.MediaElement.src":{"relativeUrl":"/reference/p5.MediaElement/src","alias":"src"},"p5.MediaElement.stop()":{"relativeUrl":"/reference/p5.MediaElement/stop","alias":"stop"},"p5.MediaElement.time()":{"relativeUrl":"/reference/p5.MediaElement/time","alias":"time"},"p5.MediaElement.volume()":{"relativeUrl":"/reference/p5.MediaElement/volume","alias":"volume"},"p5.Noise.amp()":{"relativeUrl":"/reference/p5.Noise/amp","alias":"amp"},"p5.Noise.start()":{"relativeUrl":"/reference/p5.Noise/start","alias":"start"},"p5.Noise.stop()":{"relativeUrl":"/reference/p5.Noise/stop","alias":"stop"},"p5.NumberDict.add()":{"relativeUrl":"/reference/p5.NumberDict/add","alias":"add"},"p5.NumberDict.div()":{"relativeUrl":"/reference/p5.NumberDict/div","alias":"div"},"p5.NumberDict.maxKey()":{"relativeUrl":"/reference/p5.NumberDict/maxKey","alias":"maxKey"},"p5.NumberDict.maxValue()":{"relativeUrl":"/reference/p5.NumberDict/maxValue","alias":"maxValue"},"p5.NumberDict.minKey()":{"relativeUrl":"/reference/p5.NumberDict/minKey","alias":"minKey"},"p5.NumberDict.minValue()":{"relativeUrl":"/reference/p5.NumberDict/minValue","alias":"minValue"},"p5.NumberDict.mult()":{"relativeUrl":"/reference/p5.NumberDict/mult","alias":"mult"},"p5.NumberDict.sub()":{"relativeUrl":"/reference/p5.NumberDict/sub","alias":"sub"},"p5.Oscillator.amp()":{"relativeUrl":"/reference/p5.Oscillator/amp","alias":"amp"},"p5.Oscillator.freq()":{"relativeUrl":"/reference/p5.Oscillator/freq","alias":"freq"},"p5.Oscillator.phase()":{"relativeUrl":"/reference/p5.Oscillator/phase","alias":"phase"},"p5.Oscillator.setType()":{"relativeUrl":"/reference/p5.Oscillator/setType","alias":"setType"},"p5.Oscillator.start()":{"relativeUrl":"/reference/p5.Oscillator/start","alias":"start"},"p5.Oscillator.stop()":{"relativeUrl":"/reference/p5.Oscillator/stop","alias":"stop"},"p5.Panner.pan()":{"relativeUrl":"/reference/p5.Panner/pan","alias":"pan"},"p5.Panner3D.maxDist()":{"relativeUrl":"/reference/p5.Panner3D/maxDist","alias":"maxDist"},"p5.Panner3D.positionX()":{"relativeUrl":"/reference/p5.Panner3D/positionX","alias":"positionX"},"p5.Panner3D.positionY()":{"relativeUrl":"/reference/p5.Panner3D/positionY","alias":"positionY"},"p5.Panner3D.positionZ()":{"relativeUrl":"/reference/p5.Panner3D/positionZ","alias":"positionZ"},"p5.Panner3D.process()":{"relativeUrl":"/reference/p5.Panner3D/process","alias":"process"},"p5.Panner3D.rolloff()":{"relativeUrl":"/reference/p5.Panner3D/rolloff","alias":"rolloff"},"p5.Panner3D.set()":{"relativeUrl":"/reference/p5.Panner3D/set","alias":"set"},"p5.Panner3D.setFalloff()":{"relativeUrl":"/reference/p5.Panner3D/setFalloff","alias":"setFalloff"},"p5.PitchShifter.shift()":{"relativeUrl":"/reference/p5.PitchShifter/shift","alias":"shift"},"p5.PrintWriter.clear()":{"relativeUrl":"/reference/p5.PrintWriter/clear","alias":"clear"},"p5.PrintWriter.close()":{"relativeUrl":"/reference/p5.PrintWriter/close","alias":"close"},"p5.PrintWriter.print()":{"relativeUrl":"/reference/p5.PrintWriter/print","alias":"print"},"p5.PrintWriter.write()":{"relativeUrl":"/reference/p5.PrintWriter/write","alias":"write"},"p5.Reverb.set()":{"relativeUrl":"/reference/p5.Reverb/set","alias":"set"},"p5.Shader.copyToContext()":{"relativeUrl":"/reference/p5.Shader/copyToContext","alias":"copyToContext"},"p5.Shader.inspectHooks()":{"relativeUrl":"/reference/p5.Shader/inspectHooks","alias":"inspectHooks"},"p5.Shader.modify()":{"relativeUrl":"/reference/p5.Shader/modify","alias":"modify"},"p5.Shader.setUniform()":{"relativeUrl":"/reference/p5.Shader/setUniform","alias":"setUniform"},"p5.SoundFile.amp()":{"relativeUrl":"/reference/p5.SoundFile/amp","alias":"amp"},"p5.SoundFile.channels()":{"relativeUrl":"/reference/p5.SoundFile/channels","alias":"channels"},"p5.SoundFile.duration()":{"relativeUrl":"/reference/p5.SoundFile/duration","alias":"duration"},"p5.SoundFile.frames()":{"relativeUrl":"/reference/p5.SoundFile/frames","alias":"frames"},"p5.SoundFile.isLooping()":{"relativeUrl":"/reference/p5.SoundFile/isLooping","alias":"isLooping"},"p5.SoundFile.isPlaying()":{"relativeUrl":"/reference/p5.SoundFile/isPlaying","alias":"isPlaying"},"p5.SoundFile.jump()":{"relativeUrl":"/reference/p5.SoundFile/jump","alias":"jump"},"p5.SoundFile.loop()":{"relativeUrl":"/reference/p5.SoundFile/loop","alias":"loop"},"p5.SoundFile.onended()":{"relativeUrl":"/reference/p5.SoundFile/onended","alias":"onended"},"p5.SoundFile.pause()":{"relativeUrl":"/reference/p5.SoundFile/pause","alias":"pause"},"p5.SoundFile.play()":{"relativeUrl":"/reference/p5.SoundFile/play","alias":"play"},"p5.SoundFile.rate()":{"relativeUrl":"/reference/p5.SoundFile/rate","alias":"rate"},"p5.SoundFile.sampleRate()":{"relativeUrl":"/reference/p5.SoundFile/sampleRate","alias":"sampleRate"},"p5.SoundFile.setLoop()":{"relativeUrl":"/reference/p5.SoundFile/setLoop","alias":"setLoop"},"p5.SoundFile.setPath()":{"relativeUrl":"/reference/p5.SoundFile/setPath","alias":"setPath"},"p5.SoundFile.start()":{"relativeUrl":"/reference/p5.SoundFile/start","alias":"start"},"p5.SoundFile.stop()":{"relativeUrl":"/reference/p5.SoundFile/stop","alias":"stop"},"p5.Table.addColumn()":{"relativeUrl":"/reference/p5.Table/addColumn","alias":"addColumn"},"p5.Table.addRow()":{"relativeUrl":"/reference/p5.Table/addRow","alias":"addRow"},"p5.Table.clearRows()":{"relativeUrl":"/reference/p5.Table/clearRows","alias":"clearRows"},"p5.Table.columns":{"relativeUrl":"/reference/p5.Table/columns","alias":"columns"},"p5.Table.findRow()":{"relativeUrl":"/reference/p5.Table/findRow","alias":"findRow"},"p5.Table.findRows()":{"relativeUrl":"/reference/p5.Table/findRows","alias":"findRows"},"p5.Table.get()":{"relativeUrl":"/reference/p5.Table/get","alias":"get"},"p5.Table.getArray()":{"relativeUrl":"/reference/p5.Table/getArray","alias":"getArray"},"p5.Table.getColumn()":{"relativeUrl":"/reference/p5.Table/getColumn","alias":"getColumn"},"p5.Table.getColumnCount()":{"relativeUrl":"/reference/p5.Table/getColumnCount","alias":"getColumnCount"},"p5.Table.getNum()":{"relativeUrl":"/reference/p5.Table/getNum","alias":"getNum"},"p5.Table.getObject()":{"relativeUrl":"/reference/p5.Table/getObject","alias":"getObject"},"p5.Table.getRow()":{"relativeUrl":"/reference/p5.Table/getRow","alias":"getRow"},"p5.Table.getRowCount()":{"relativeUrl":"/reference/p5.Table/getRowCount","alias":"getRowCount"},"p5.Table.getRows()":{"relativeUrl":"/reference/p5.Table/getRows","alias":"getRows"},"p5.Table.getString()":{"relativeUrl":"/reference/p5.Table/getString","alias":"getString"},"p5.Table.matchRow()":{"relativeUrl":"/reference/p5.Table/matchRow","alias":"matchRow"},"p5.Table.matchRows()":{"relativeUrl":"/reference/p5.Table/matchRows","alias":"matchRows"},"p5.Table.removeColumn()":{"relativeUrl":"/reference/p5.Table/removeColumn","alias":"removeColumn"},"p5.Table.removeRow()":{"relativeUrl":"/reference/p5.Table/removeRow","alias":"removeRow"},"p5.Table.removeTokens()":{"relativeUrl":"/reference/p5.Table/removeTokens","alias":"removeTokens"},"p5.Table.rows":{"relativeUrl":"/reference/p5.Table/rows","alias":"rows"},"p5.Table.set()":{"relativeUrl":"/reference/p5.Table/set","alias":"set"},"p5.Table.setNum()":{"relativeUrl":"/reference/p5.Table/setNum","alias":"setNum"},"p5.Table.setString()":{"relativeUrl":"/reference/p5.Table/setString","alias":"setString"},"p5.Table.trim()":{"relativeUrl":"/reference/p5.Table/trim","alias":"trim"},"p5.TableRow.get()":{"relativeUrl":"/reference/p5.TableRow/get","alias":"get"},"p5.TableRow.getNum()":{"relativeUrl":"/reference/p5.TableRow/getNum","alias":"getNum"},"p5.TableRow.getString()":{"relativeUrl":"/reference/p5.TableRow/getString","alias":"getString"},"p5.TableRow.set()":{"relativeUrl":"/reference/p5.TableRow/set","alias":"set"},"p5.TableRow.setNum()":{"relativeUrl":"/reference/p5.TableRow/setNum","alias":"setNum"},"p5.TableRow.setString()":{"relativeUrl":"/reference/p5.TableRow/setString","alias":"setString"},"p5.TypedDict.clear()":{"relativeUrl":"/reference/p5.TypedDict/clear","alias":"clear"},"p5.TypedDict.create()":{"relativeUrl":"/reference/p5.TypedDict/create","alias":"create"},"p5.TypedDict.get()":{"relativeUrl":"/reference/p5.TypedDict/get","alias":"get"},"p5.TypedDict.hasKey()":{"relativeUrl":"/reference/p5.TypedDict/hasKey","alias":"hasKey"},"p5.TypedDict.print()":{"relativeUrl":"/reference/p5.TypedDict/print","alias":"print"},"p5.TypedDict.remove()":{"relativeUrl":"/reference/p5.TypedDict/remove","alias":"remove"},"p5.TypedDict.saveJSON()":{"relativeUrl":"/reference/p5.TypedDict/saveJSON","alias":"saveJSON"},"p5.TypedDict.saveTable()":{"relativeUrl":"/reference/p5.TypedDict/saveTable","alias":"saveTable"},"p5.TypedDict.set()":{"relativeUrl":"/reference/p5.TypedDict/set","alias":"set"},"p5.TypedDict.size()":{"relativeUrl":"/reference/p5.TypedDict/size","alias":"size"},"p5.Vector.add()":{"relativeUrl":"/reference/p5.Vector/add","alias":"add"},"p5.Vector.angleBetween()":{"relativeUrl":"/reference/p5.Vector/angleBetween","alias":"angleBetween"},"p5.Vector.array()":{"relativeUrl":"/reference/p5.Vector/array","alias":"array"},"p5.Vector.clampToZero()":{"relativeUrl":"/reference/p5.Vector/clampToZero","alias":"clampToZero"},"p5.Vector.copy()":{"relativeUrl":"/reference/p5.Vector/copy","alias":"copy"},"p5.Vector.cross()":{"relativeUrl":"/reference/p5.Vector/cross","alias":"cross"},"p5.Vector.dist()":{"relativeUrl":"/reference/p5.Vector/dist","alias":"dist"},"p5.Vector.div()":{"relativeUrl":"/reference/p5.Vector/div","alias":"div"},"p5.Vector.dot()":{"relativeUrl":"/reference/p5.Vector/dot","alias":"dot"},"p5.Vector.equals()":{"relativeUrl":"/reference/p5.Vector/equals","alias":"equals"},"p5.Vector.fromAngle()":{"relativeUrl":"/reference/p5.Vector/fromAngle","alias":"fromAngle"},"p5.Vector.fromAngles()":{"relativeUrl":"/reference/p5.Vector/fromAngles","alias":"fromAngles"},"p5.Vector.heading()":{"relativeUrl":"/reference/p5.Vector/heading","alias":"heading"},"p5.Vector.lerp()":{"relativeUrl":"/reference/p5.Vector/lerp","alias":"lerp"},"p5.Vector.limit()":{"relativeUrl":"/reference/p5.Vector/limit","alias":"limit"},"p5.Vector.mag()":{"relativeUrl":"/reference/p5.Vector/mag","alias":"mag"},"p5.Vector.magSq()":{"relativeUrl":"/reference/p5.Vector/magSq","alias":"magSq"},"p5.Vector.mult()":{"relativeUrl":"/reference/p5.Vector/mult","alias":"mult"},"p5.Vector.normalize()":{"relativeUrl":"/reference/p5.Vector/normalize","alias":"normalize"},"p5.Vector.random2D()":{"relativeUrl":"/reference/p5.Vector/random2D","alias":"random2D"},"p5.Vector.random3D()":{"relativeUrl":"/reference/p5.Vector/random3D","alias":"random3D"},"p5.Vector.reflect()":{"relativeUrl":"/reference/p5.Vector/reflect","alias":"reflect"},"p5.Vector.rem()":{"relativeUrl":"/reference/p5.Vector/rem","alias":"rem"},"p5.Vector.rotate()":{"relativeUrl":"/reference/p5.Vector/rotate","alias":"rotate"},"p5.Vector.set()":{"relativeUrl":"/reference/p5.Vector/set","alias":"set"},"p5.Vector.setHeading()":{"relativeUrl":"/reference/p5.Vector/setHeading","alias":"setHeading"},"p5.Vector.setMag()":{"relativeUrl":"/reference/p5.Vector/setMag","alias":"setMag"},"p5.Vector.slerp()":{"relativeUrl":"/reference/p5.Vector/slerp","alias":"slerp"},"p5.Vector.sub()":{"relativeUrl":"/reference/p5.Vector/sub","alias":"sub"},"p5.Vector.toString()":{"relativeUrl":"/reference/p5.Vector/toString","alias":"toString"},"p5.Vector.x":{"relativeUrl":"/reference/p5.Vector/x","alias":"x"},"p5.Vector.y":{"relativeUrl":"/reference/p5.Vector/y","alias":"y"},"p5.Vector.z":{"relativeUrl":"/reference/p5.Vector/z","alias":"z"},"p5.XML.addChild()":{"relativeUrl":"/reference/p5.XML/addChild","alias":"addChild"},"p5.XML.getAttributeCount()":{"relativeUrl":"/reference/p5.XML/getAttributeCount","alias":"getAttributeCount"},"p5.XML.getChild()":{"relativeUrl":"/reference/p5.XML/getChild","alias":"getChild"},"p5.XML.getChildren()":{"relativeUrl":"/reference/p5.XML/getChildren","alias":"getChildren"},"p5.XML.getContent()":{"relativeUrl":"/reference/p5.XML/getContent","alias":"getContent"},"p5.XML.getName()":{"relativeUrl":"/reference/p5.XML/getName","alias":"getName"},"p5.XML.getNum()":{"relativeUrl":"/reference/p5.XML/getNum","alias":"getNum"},"p5.XML.getParent()":{"relativeUrl":"/reference/p5.XML/getParent","alias":"getParent"},"p5.XML.getString()":{"relativeUrl":"/reference/p5.XML/getString","alias":"getString"},"p5.XML.hasAttribute()":{"relativeUrl":"/reference/p5.XML/hasAttribute","alias":"hasAttribute"},"p5.XML.hasChildren()":{"relativeUrl":"/reference/p5.XML/hasChildren","alias":"hasChildren"},"p5.XML.listAttributes()":{"relativeUrl":"/reference/p5.XML/listAttributes","alias":"listAttributes"},"p5.XML.listChildren()":{"relativeUrl":"/reference/p5.XML/listChildren","alias":"listChildren"},"p5.XML.removeChild()":{"relativeUrl":"/reference/p5.XML/removeChild","alias":"removeChild"},"p5.XML.serialize()":{"relativeUrl":"/reference/p5.XML/serialize","alias":"serialize"},"p5.XML.setAttribute()":{"relativeUrl":"/reference/p5.XML/setAttribute","alias":"setAttribute"},"p5.XML.setContent()":{"relativeUrl":"/reference/p5.XML/setContent","alias":"setContent"},"p5.XML.setName()":{"relativeUrl":"/reference/p5.XML/setName","alias":"setName"},"p5.sound.getAudioContext()":{"relativeUrl":"/reference/p5.sound/getAudioContext","alias":"getAudioContext"},"p5.sound.loadSound()":{"relativeUrl":"/reference/p5.sound/loadSound","alias":"loadSound"},"p5.Amplitude":{"relativeUrl":"/reference/p5.sound/p5.Amplitude"},"p5.AudioIn":{"relativeUrl":"/reference/p5.sound/p5.AudioIn"},"p5.Biquad":{"relativeUrl":"/reference/p5.sound/p5.Biquad"},"p5.Delay":{"relativeUrl":"/reference/p5.sound/p5.Delay"},"p5.Envelope":{"relativeUrl":"/reference/p5.sound/p5.Envelope"},"p5.FFT":{"relativeUrl":"/reference/p5.sound/p5.FFT"},"p5.Gain":{"relativeUrl":"/reference/p5.sound/p5.Gain"},"p5.Noise":{"relativeUrl":"/reference/p5.sound/p5.Noise"},"p5.Oscillator":{"relativeUrl":"/reference/p5.sound/p5.Oscillator"},"p5.Panner":{"relativeUrl":"/reference/p5.sound/p5.Panner"},"p5.Panner3D":{"relativeUrl":"/reference/p5.sound/p5.Panner3D"},"p5.PitchShifter":{"relativeUrl":"/reference/p5.sound/p5.PitchShifter"},"p5.Reverb":{"relativeUrl":"/reference/p5.sound/p5.Reverb"},"p5.SawOsc":{"relativeUrl":"/reference/p5.sound/p5.SawOsc"},"p5.SinOsc":{"relativeUrl":"/reference/p5.sound/p5.SinOsc"},"p5.SoundFile":{"relativeUrl":"/reference/p5.sound/p5.SoundFile"},"p5.SqrOsc":{"relativeUrl":"/reference/p5.sound/p5.SqrOsc"},"p5.TriOsc":{"relativeUrl":"/reference/p5.sound/p5.TriOsc"},"p5.sound.setAudioContext()":{"relativeUrl":"/reference/p5.sound/setAudioContext","alias":"setAudioContext"},"p5.sound.userStartAudio()":{"relativeUrl":"/reference/p5.sound/userStartAudio","alias":"userStartAudio"},"p5.sound.userStopAudio()":{"relativeUrl":"/reference/p5.sound/userStopAudio","alias":"userStopAudio"}},"tutorials-fallback":{"Animating with Media Objects":{"relativeUrl":"/tutorials/animating-with-media-objects","description":"Learn how to load images and GIFs to your sketches by creating an interactive garden!"},"Color Gradients":{"relativeUrl":"/tutorials/color-gradients","description":"Use radial gradients, linear gradients, and blend modes to create lens flare stickers & colorful filters on top of a webcam selfie."},"Conditionals and Interactivity":{"relativeUrl":"/tutorials/conditionals-and-interactivity","description":"A tutorial on how to use conditional statements and make interactive sketches."},"Coordinates and Transformations":{"relativeUrl":"/tutorials/coordinates-and-transformations","description":"An overview of the different ways you can position objects in WebGL mode."},"Creating and Styling HTML":{"relativeUrl":"/tutorials/creating-styling-html","description":"Dive into the art of creative coding and learn to build and beautify HTML with p5.js."},"Creating Custom Geometry in WebGL":{"relativeUrl":"/tutorials/custom-geometry","description":"A guide to the different ways you can create your own 3D shapes."},"Custom Shapes and Smooth Curves":{"relativeUrl":"/tutorials/custom-shapes-and-smooth-curves","description":"Use vertex(), bezierVertex(), beginShape() and endShape() to create angular and curved sparkle stickers to place on top of your webcam selfie."},"Data Structure Garden":{"relativeUrl":"/tutorials/data-structure-garden","description":"A tutorial on how to use JavaScript objects and arrays."},"Field Guide to Debugging":{"relativeUrl":"/tutorials/field-guide-to-debugging","description":"Learn some healthy habits and best practices for locating bugs in your program, and finding ways to overcome them."},"Get Started":{"relativeUrl":"/tutorials/get-started","description":"A tutorial that introduces basic p5.js functions and guides you through the steps to create an interactive landscape."},"Getting Started with Node.js":{"relativeUrl":"/tutorials/getting-started-with-nodejs","description":"Learn about HTTP requests and how to use Node.js in your p5.js projects to create dynamic projects that save and retrieve files."},"How to Optimize Your Sketches":{"relativeUrl":"/tutorials/how-to-optimize-your-sketches","description":"An advanced tutorial on how to optimize code in your sketches to run more efficiently."},"Introduction to Shaders":{"relativeUrl":"/tutorials/intro-to-shaders","description":"An introduction to the different ways you can create interesting visual effects with your computer's GPU."},"Layered Rendering with Framebuffers":{"relativeUrl":"/tutorials/layered-rendering-with-framebuffers","description":"Framebuffers are the fastest way to create a scene out of multiple layers in WebGL. Explore how to use them, and the unique 3D information they provide."},"Lights, Camera, Materials":{"relativeUrl":"/tutorials/lights-camera-materials","description":"Learn how to light and frame 3D scenes, and how to style 3D objects."},"Loading and Selecting Fonts":{"relativeUrl":"/tutorials/loading-and-selecting-fonts","description":"Explore typography in creative coding: A Quick guide to choosing and selecting fonts."},"Optimizing WebGL Sketches":{"relativeUrl":"/tutorials/optimizing-webgl-sketches","description":"Tips to help make your sketches run as smoothly as possible on as many devices as possible."},"Organizing Code with Functions":{"relativeUrl":"/tutorials/organizing-code-with-functions","description":"A tutorial on how to create and use functions to help you organize your code."},"How to Use the p5.js Web Editor with a Screen Reader":{"relativeUrl":"/tutorials/p5js-with-screen-reader","description":"A tutorial for setting up the p5.js Web Editor for screen readers."},"Repeating with Loops":{"relativeUrl":"/tutorials/repeating-with-loops","description":"Create a crawling caterpillar race using loops and arrays!"},"Responding to Inputs":{"relativeUrl":"/tutorials/responding-to-inputs","description":"Code nostalgia: Unleash your creativity and bring a vintage snake game to life with p5.js!"},"Setting Up Your Environment":{"relativeUrl":"/tutorials/setting-up-your-environment","description":"A quick tutorial for setting up the p5.js Web Editor and VS Code to write and save p5.js projects."},"Simple Melody App":{"relativeUrl":"/tutorials/simple-melody-app","description":"Use p5.Oscillator objects to generate musical notes in an app where users can write and replay melodies they create by interacting with the canvas!"},"Abracadabra: Speak With Your Hands in p5.js and ml5.js":{"relativeUrl":"/tutorials/speak-with-your-hands","description":"Control sketches with your hands using ml5.js"},"Variables and Change":{"relativeUrl":"/tutorials/variables-and-change","description":"Learn about variables and how they can be used to create animated sketches!"},"Writing Accessible Canvas Descriptions":{"relativeUrl":"/tutorials/writing-accessible-canvas-descriptions","description":"A tutorial for how to label p5.js code for screen readers."}}}
\ No newline at end of file
diff --git a/public/search-indices/ko.json b/public/search-indices/ko.json
index fd6f16c558..9f02a8cbf3 100644
--- a/public/search-indices/ko.json
+++ b/public/search-indices/ko.json
@@ -1 +1 @@
-{"contributor-docs":{"🌸 환영합니다! 🌺\n":{"relativeUrl":"/contribute/README","description":"p5js에 기여하는데에 관심을 가져주셔서 감사합니다 커뮤니티는 모든 형태의 기여를 소중하게 생각하며 컨트리뷰터의 의미를 최대한 넓은 범위로 확장하고자 합니다 이는 문서화 강의 코드 작성 창작 활동 글쓰기 디자인 운동 조직화 큐레이팅 여러분이 상상할 수 있는 걸 포괄합니다 [우리의 커뮤니티 페이지](https://p5js.org/community/#contribute)에는 커뮤니티에 참여하고 기여할 여러가지 방법들에 대한 개요가 제시되어 있습니다 기술적인 하고자 하신다면 시작하기에 앞서 글을 더 읽어주시기 바랍니다 프로젝트는 [올-컨트리뷰터스(all-contributors)](https://github.com/kentcdodds/all-contributors/) 사양을 따릅니다 [안내 사항](https://github.com/processing/p5.js/issues/2309/)을 [리드미(readme)](https://github.com/processing/p5.js/blob/main/README.md#contributors)에 본인을 추가하세요 [깃허브 이슈](https://github.com/processing/p5.js/issues/)에 여러분의 컨트리뷰션을 댓글로 달아주시면 저희가 추가해드리겠습니다 보관 위치 p5js 프로젝트의 핵심적인 저장소들은 아래와 같습니다 * [p5.js](https://github.com/processing/p5.js): 본 저장소에는 라이브러리의 소스 코드가 보관되어 [유저들이 보게 되는 p5js의 레퍼런스 매뉴얼](https://p5js.org/reference/) 코드에 포함되어 [JSDoc](http://usejsdoc.org/) 각주에서 생성됩니다 저장소는 [로렌 리 맥카시Lauren Lee McCarthy)](https://github.com/lmccart/)가 관리합니다 [p5.js-website](https://github.com/processing/p5.js-website/): 매뉴얼을 제외한 [p5js 웹사이트](http://p5js.org)의 [p5.js-sound](https://github.com/processing/p5.js-sound/): p5soundjs 라이브러리가 [제이슨 시갈Jason Sigal)](https://github.com/therewasaguy/)이 [p5.js-web-editor](https://github.com/processing/p5.js-web-editor/): 웹 에디터](https://editor.p5js.org)의 [캐시 타라케지언Cassie Tarakajian)](https://github.com/catarak/)이 예전의 에디터](https://github.com/processing/p5.js-editor/)는 이제 사용되지 않다는 점을 참고하십시오 [p5.accessibility](https://github.com/processing/p5.accessibility): 맹인 장애인들이 쉽게 p5 캔버스를 사용할 있도록 하는 라이브러리입니다 저장소 파일 구조 프로젝트엔 많은 파일들이 여기에 간략한 헷갈릴 수도 있지만 기여하기 저장소의 파일을 이해할 필요까지는 없습니다 우리는 한 영역인라인 도큐멘테이션을 고치는 것이 예가 될 있겠습니다에서 시작해서 차근차근 영역으로 나아가는 권장합니다 루이사 페레이라Luisa Pereira의 [Looking Inside p5.js](https://www.luisapereira.net/teaching/materials/processing-foundation/)에 작업 흐름에 사용되는 도구와 파일들에 소개를 동영상으로 확인하실 `contributor_docs/`에는 컨트리뷰터들을 위한 관례와 원칙을 설명하는 문서가 들어 `docs/`에는 사실 문서들이 대신 [온라인 매뉴얼](https://p5js.org/reference/)을 생성하기 담겨 `lib/`에는 비어 예시 파일과 [p5js-sound 저장소](https://github.com/processing/p5.js-sound/)에서 풀 리퀘스트를 통해 정기적으로 업데이트 p5sound 애드온이 이곳은 빌드 된 [Grunt](https://gruntjs.com/)를 이용해 하나의 파일로 컴파일 후에 위치하게 곳이기도 할 깃허브 저장소로 따로 이동시킬 필요가 없는 것입니다 `src/` 에는 라이브러리를 있는데 이들은 분리된 모듈의 형태로 주제별로 정리되어 p5js를 수정하고자 작업을 하면 됩니다 대부분의 폴더 안에는 각각의 리드미 파일readmemd이 있으니 이를 참고해 해주시기 `tasks/`에는 새로운 버전의 배포 릴리스 하는데에 관련된 자동화 작업들을 수행하는 스크립트들이 `tests/`는 내용 수정이 있어도 제대로 작동하도록 보장해주는 유닛 테스트들을 담고 `utils/`는 저장소에 유용할 추가적인 파일들을 디렉토리는 무시해도 괜찮습니다 문서화는 가장 중요한 부분입니다 낮은 품질의 이용자와 컨트리뷰터들의 진입 장벽을 높여 프로젝트 참여도를 저하시킵니다 [contributing\\_documentationmd]/contributing_documentation/ 페이지는 문서화를 시작하는 데에 깊이 개요를 제시합니다 같은 곳들에서 주로 찾아볼 [p5js.org/reference](https://p5js.org/reference/)는 코드의 [인라인 도큐멘테이션]/inline_documentation/으로부터 텍스트 설명 파라미터 스니펫 등을 포함합니다 코드와 인라인 긴밀히 연결시키고 문서화에 기여하는 게 만큼이나 중요하다는 생각을 강화하기 위해 활용하는 되면 라이브러리와 작동하는 방식 사이에 문제가 없음을 확실히 하기 도큐멘테이션과 예시를 확인합니다 이에 위해선 [inline\\_documentationmd]/inline_documentation/ 페이지를 살펴보는 걸로 시작하시기 [p5js.org/examples](http://p5js.org/examples/)페이지는 학습하는 길이가 긴 예시들을 위해서는 [adding\\_examples.md](https://github.com/processing/p5.js-website/blob/main/contributor_docs/Adding_examples.md) 살펴보시기 [p5js.org/tutorials](https://p5js.org/tutorials/)페이지는 p5js와 프로그래밍의 개념을 배울 도와주는 튜토리얼들을 웹사이트의 튜토리얼에 튜토리얼](https://p5js.org/learn/tutorial-guide.html)을 웹사이트는 현재 가지 언어들을 지원하고 있음을 국제화혹은 줄여서 i18n라고 불립니다 문서는 [i18n\\_contribution](https://github.com/processing/p5.js-website/blob/main/contributor_docs/i18n_contribution.md) 페이지에서 자세히 보실 이슈 흐름 알려진 버그와 추가되었으면 기능들은 이슈](https://github.com/processing/p5.js/issues/)들을 추적됩니다 [레이블]/issue_labels/들은 이슈들을 카테고리별로 분류하는 사용되는데 예를 들면 [초보자에게 적합한 이슈들](https://github.com/processing/p5.js/labels/level%3Abeginner/)을 레이블링 식입니다 이미 제기된 중에 시작하고 싶은 있다면 컨트리뷰터들이 진행 사항을 파악하고 도움을 줄 해당 이슈에 댓글을 달아주시기 이슈를 해결했다면 마스터 브랜치에 [풀 리퀘스트PR를 제출]/preparing_a_pull_request/하십시오 PR의 칸에 resolves #XXXX#XXXX를 해결함라고 써서 해결한 태그해주시기 PR이 다루기는 완전히 해결하지는 못하는 거라면즉 merge 되고 나서도 이슈가 열려 있어야 addresses 다룸이라고 써주시기 버그를 발견했거나 새롭게 더하고 기능에 아이디어가 먼저 제출해주시기 제출하지 않고 수정 사항이나 기능을 제출해버리는 경우 수락하기 어려울 가능성이 높습니다 피드백을 받고 다뤄도 괜찮다는 확인했다면 위의 절차를 고치거나 추가하는 시작할 버그 리포트를 재현하거나 버전 번호 재현 안내서와 주요 정보들을 요청하는 선별하는 작업할 용이한 방법 중 하나는 [코드 트리아지CodeTriage에서 구독](https://www.codetriage.com/processing/p5.js)하는 겁니다 [[Open Source Helpers](https://www.codetriage.com/processing/p5.js/badges/users.svg)](https://www.codetriage.com/processing/p5.js) [organization.md](https://github.com/processing/p5.js/blob/main/contributor_docs/organization.md) 파일은 이슈들이 체계화 있는지 그에 의사결정 과정은 이루어지는지에 대략적인 관심이 기여해주시기 개발 과정 프로세스라는 처음에는 까다로울 그렇게 느끼는 건 뿐만이 아니라 처음엔 모두가 혼란을 겪곤 밑을 보시면 셋업 과정을 차례 질문이 [포럼](https://discourse.processing.org/c/p5js/)에 물어보거나 막힌 부분을 [이슈](https://github.com/processing/p5.js/issues/)를 제출하면 최대한의 드리도록 하겠습니다 아래 절차는 [코딩 트레인The Coding Train의 비디오 강의](https://youtu.be/Rr3vLyP1Ods/)에서도 다루고 있습니다🚋🌈 [node.js](http://nodejs.org/)를 설치하세요 nodejs를 설치하면 자동적으로 [npm](https://www.npmjs.org) 패키지 매니저도 설치됩니다 본인의 계정에 저장소](https://github.com/processing/p5.js)를 [포크](https://help.github.com/articles/fork-a-repo/) 하십시오 포크 저장소를 로컬 컴퓨터에 [클론](https://help.github.com/articles/cloning-a-repository/) ```shell $ git clone https://github.com/YOUR_USERNAME/p5.js.git ``` 폴더로 들어가 npm에 필요한 디펜던시를 설치하십시오 cd npm ci [Grunt](https://gruntjs.com/)가 설치되었을텐데 코드로부터 빌드하기 이용할 run grunt 계속해서 변경해야 사전에 수동으로 일일이 명령어를 입력하지 않아도 변경 다시 빌드해줄 `npm dev`를 실행 나을 로컬에서 베이스를 변경하고 깃Git으로 [커밋](https://help.github.com/articles/github-glossary/#commit) add -u commit -m YOUR COMMIT MESSAGE 문법 오류가 확인하고 고장 문제들에 테스트를 grunt`를 번 실행하십시오 포크에 [푸시](https://help.github.com/articles/github-glossary/#push) push 준비되었다면 리퀘스트](https://help.github.com/articles/creating-a-pull-request/)로 제출하십시오 커밋이 거절 당하는 베이스에 개발자 툴들은 것들에 대해 일부러 매우 엄격한 기준을 적용하도록 만들어져 이건 좋은 일관성 있게 만들고 규율이 지켜지도록 도울 뭔가를 변경하고자 만들었던 당할 의미하기는 낙담하지는 말아주세요 경험 개발자들의 커밋도 종종 당하곤 보통은 테스트가 문제인 경우가 많습니다 ## p5js는 깔끔하고 스타일의 문법을 요구하기에 [Prettier](https://prettier.io/)와 [ESlint](https://eslint.org/)라는 툴의 사용이 필수입니다 커밋을 전에 특정 스타일 규칙을 점검하게 되는데 사용하는 에디터에 [ESlint 플러그인](https://eslint.org/docs/user-guide/integrations#editors)을 타이핑 함과 오류를 하이라이트 해줍니다 스타일에 관해서 유연성과 내는데 참여와 기여의 낮추기 위함입니다 에러를 포착하기 터미널에서 실행하세요`$` 프롬프트는 마십시오 lint 오류는 고쳐질 lintfix 기존 스타일을 고수하는 선호되는게 보통이지만 [가끔은](https://github.com/processing/p5.js/search?utf8=%E2%9C%93\\&q=prettier-ignore\\&type=) 코드를 이해하기 만들기도 경우에는 Prettier의 `// prettier-ignore` 주석을 [예외적인 경우를 처리](https://prettier.io/docs/en/ignore.html)할 요구되는 선호 사항들은 그럴만한 이유가 있기 가능하다면 예외적인 만들지 말아주시길 규칙에 요약본이 목록이 전부가 아니기 [.prettierrc](https://github.com/processing/p5.js/blob/main/.prettierrc)와 [.eslintrc](https://github.com/processing/p5.js/blob/main/.eslintrc) 파일의 전체 목록을 참고 하시기 ES6 사용합니다 큰 따옴표 보다는 작은 따옴표를 들여쓰기는 스페이스 두 개로 처리합니다 정의되어 변수들은 적어도 번은 사용되던가 없애야 x == true false로 비교문을 작성하지 x를 사용하십시오 true는 분명히 if 와는 다릅니다 여지가 객체를 널null과 비교하고 숫자를 0에 문자열string을 비교하십시오 작성하는 함수가 모호하거나 복잡한 답니다 스타일링 팁을 참고하기 [모질라 자바스크립트 연습Mozilla JS practice)](https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Coding_Style#JavaScript_practices)을 보십시오 테스트 테스트란 주논리와 성능 검증을 보완하기 만들어진 규모의 코드들입니다 [unit\\_testingmd]/unit_testing/ 페이지에 테스트에 정보가 개발한다면 아마도 포함해야 통과하지 못한다면 그건 어딘가에 있다는 뜻이므로 돌리기 디펜던시들을 설치해야 이것이 *모든* 설치할 간단하게는 테스팅에 디펜던시들은 다음을 [Mocha](https://mochajs.org/): 개별적인 실행하는 강력한 테스팅 프레임워크 [mocha-chrome](https://github.com/shellscape/mocha-chrome/): 구글 크롬을 Mocha 돌리는 모차 플러그인 디펜던시들이 설치되면 Grunt를 돌리십시오 때론 커맨드 라인 브라우저에서 것도 유용합니다 서버 [연결](https://github.com/gruntjs/grunt-contrib-connect/)을 시작하십시오 dev 서버가 돌아가면 `test/testhtml`을 열 있을 완전한 설명은 문서의 범위를 벗어나는 것이지만 간략하게만 src/ 디렉토리에 가해진 중대한 새로 구현된 기능은 Mocha가 실행할 파일이 test/ 동반되어야 하는데 향후 나올 라이브러리에서도 작동할 것임을 검증하기 작성할 [Chaijs 레퍼런스](http://www.chaijs.com/api/assert/)를 어서션assertion 메세지를 구성함으로써 미래에 테스트로 잡아낼 오류들이 있고 결과적으로 개발자들이 만들어주시기를 [contributor\\_docs/](https://github.com/processing/p5.js/tree/main/contributor_docs/) 폴더에는 살펴볼만한 파일들도 비기술적인 영역과 관계된 것들입니다 흐름에서 영상 p5.js](https://www.luisapereira.net/teaching/materials/processing-foundation/)에서 트레인의 동영상](https://youtu.be/Rr3vLyP1Ods/)🚋🌈에서는 기술적 것에 제공합니다 [도커Docker 이미지](https://github.com/toolness/p5.js-docker/)는 [도커](https://www.docker.com/)에 마운트 [Node](https://nodejs.org/) 필수 요소들을 필요 없이 도커 설치를 제외하고는 방식으로든지 호스트 운영 체제에 영향을 주지 않고도 개발하는데에 사용될 [json 데이터 파일](https://p5js.org/reference/data.json)을 생성하는데 공개 API를 있으며 에디터에서 메서드를 자동으로 완성하는 등의 자동화된 툴링에 웹사이트에서 되지만 일부로 있지는 않습니다 최근에 [ES6](https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_-_ECMAScript_2015)로 마이그레이션 됐습니다 변화가 기여에 미칠지를 보기 [ES6 채택]/es6-adoption/을 방문해주십시오"},"접근성에 대한 초점\n":{"relativeUrl":"/contribute/access","description":"{/* 라이브러리의 기여자와 사용자에게 접근성에 대한 우리의 약속이 무엇을 의미하는가 */} [2019 기여자 회의](https://p5js.org/community/contributors-conference-2019.html)에서, p5js는 접근성포용과 접근성을 향상시키는 새로운 기능만 추가하기로 약속했습니다 노력을 지지하지 않는 기능 요청은 수용되지 않을 것입니다 우리는 장벽을 인식하고 없애고 예방하는 약속합니다 이는 접근성과 참여에 영향을 미칠 수 있는 다양성의 교차[^1] 경험을 고려한다는 것을 의미합니다 이같은 교차 경험은 젠더 인종 민족 성성 언어 위치 등으로 구성됩니다 p5js 커뮤니티 내에서 특권을 가진 사람들의 지속적인 편안함보다 소외된 집단의 요구에 초점을 맞추고 있습니다 모두가 접근성의 의미를 탐색하고 실천하고 가르치는 방법을 배우고 확장적 교차적 연대적 프레임워크를 통해 생각하기로 선택합니다 약속은 p5js의 핵심 가치 중 하나로 [커뮤니티 성명서](https://p5js.org/about/#community-statement)에 기재되어 ## 종류 접근성 향상은 단순히 커뮤니티의 인원을 늘리는 데 맞추지 않습니다 구조적 차별으로 인해 커뮤니티에서 사람들에게 p5js를 접근하기 쉽게 만들려는 약속입니다 p5js가 제공하는 도구와 플랫폼에도 적용되며 리더십의 구성 결정 행동을 포함합니다 속도 성장 경쟁을 중시하는 기술 문화에 저항합니다 집단적 관심의 행위로서 지향성 느림 수용성 책임감을 우선시합니다 여기서의 접근성은 다음과 같은 사람들을 위해 공평하게 만드는 * 영어 이외의 언어를 사용하는 사람들 흑인 원주민 유색인종 민족의 레즈비언 게이 바이섹슈얼 퀴어 성 정체성을 탐색 중인 팬섹슈얼 무성애자 트랜스 젠더플루이드 에이젠더 간성 두 영혼의 여성 외 성적 소수자들 시각장애인 청각장애인deaf 또는 농인Deaf[^2] 장애인/장애를 신경다양인 만성 질병을 사람들[^3] 소득이 낮거나 금융 문화 자본에 접근성이 부족한 오픈 소스와 크리에이티브 코딩에 경험이 없거나 전혀 없는 다양한 교육적 배경을 어린이와 노인을 포함한 모든 연령대의 종류의 기술적 스킬 도구 접근 권한을 종교적 제도적으로 배제되고 역사적으로 과소대표되는 이들의 교차점들 각자의 설명하는 용어의 복잡성을 인식합니다 언어는 미묘하고 진화하며 논쟁의 여지가 목록이 경우를 다루지는 약속과 요구 사항을 명명하고 책임질 있도록 시도하고 ### 예시 다음은 향상을 위한 노력의 예시입니다 문서 자료를 더 많은 언어로 번역하여 제국주의[^4]에서 벗어나는 Rolando Vargas의 [프로세싱Processing 쿠나어 번역](https://medium.com/@ProcessingOrg/culture-as-translation-processing-in-kuna-language-with-rolando-vargas-and-edinson-izquierdo-8079f14851f7/), Felipe Santos Gomes Julia Brasil Katherine Finn Zander Marcela Mancino의 [Pê Cinco 포르투갈어 사용자를 국제화 보급화](https://medium.com/processing-foundation/translating-p5-js-into-portuguese-for-the-brazilian-community-14b969e77ab1/)) 스크린 리더 보조 기술에 지원 개선 Katie Liu의 [p5js에 대체 텍스트alt text 추가](https://medium.com/processing-foundation/adding-alt-text-e2c7684e44f8/), Claire Kearney-Volpe의 [P5 향상 프로젝트](https://medium.com/processing-foundation/p5-accessibility-115d84535fa8/)) 도구가 [웹 콘텐츠 지침(WCAG)](https://www.w3.org/TR/WCAG21/)을 준수하도록 하고 사용자들이 프로젝트에서 이를 따를 노력하기 오류 메시지를 유용한 도움 제공하기 [p5js 친절한 메세지 시스템(FES)](https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md)) 코딩 디지털 아트 영역에서 차별을 받은 공동체들 속 학습자를 멘토링 지원하기 중심의 조직 전략예 ASL 통역 실시간 자막 쉬운 장소으로 이벤트 개최 Access Day 2022](https://p5js.org/community/p5js-access-day-2022.html), [The Web We Want x W3C TPAC 2020](https://medium.com/processing-foundation/p5-js-x-w3c-tpac-bee4c621a053/)) 교육 자료 생성 Adekemi Sijuwade-Ukadike의 [A11y Syllabus](http://a11ysyllabus.site/)) WCAG 지침을 따르고 평이한 사용하며 초심자에 맞춘 작업 보고서 게시 [OSACC 보고서](https://github.com/processing/OSACC-p5.js-Access-Report/)) 유지보수 요청을 받지 기준은 이슈 풀 리퀘스트 템플릿에 반영됩니다 기존 세트를 유지겠다는 의사를 단언합니다 코드베이스의 부분에 속하는 버그든지 상관없이 수정하고 싶습니다 도구의 일관성이 초심자의 향상한다고 믿습니다 요청의 예시는 같습니다 하드웨어 성능이 낮은 성능 프레임 버퍼에 그리기/읽기 API의 일관성 beginShape와 endShape로 호를 만들기 arcVertex 추가 *** 문서를 살아있는 문서'로 생각해 주시기 바랍니다 우선순위를 정하는 것이 의미하는지에 대화를 이어갈 문서가 가치에 대해 이야기를 나눌 커뮤니티에 초대합니다 아이디어나 제안할 있다면 Github에서 이슈로 공유하거나 [hello@p5jsorg]mailtohello@p5jsorg로 이메일을 보내주시기 버전의 성명서는 2023년 소스 컨퍼런스에서 Evelyn Masso Nat Decker Bobby Joe Smith III Sammie Veeler Sonia Suhyun Choi Xin Kate Hollenbach Lauren Lee McCarthy Caroline Sinders Qianqian Ye Tristan Jovani Magno Espinoza Tanvi Sharma Tsige Tafesse Sarah Ciston의 협업을 수정되었습니다 프로세싱 재단 펠로우십의 지원을 III와 Decker가 최종 확정 발표했습니다 [^1] Crenshaw Kimberlé Demarginalizing the intersection of race and sex a black feminist critique antidiscrimination doctrine theory antiracist politics University Chicago Legal Forum 139–167 ISSN 0892-5593 전문은 Archiveorg에서 확인 가능합니다 [^2] 대문자 Deaf는 문화적으로 청각 장애인이거나 장애인 공동체의 일원을 의미하는 반면 소문자 deaf는 앞서 설명된 Deaf 정체성과는 무관히 쓰이는 청각학적 용어입니다 [^3] 장애 내에는 사람 vs 정체성 사이의 선호가 [Unpacking debate over person-first identity-first language in autism community](https://news.northeastern.edu/2018/07/12/unpacking-the-debate-over-person-first-vs-identity-first-language-in-the-autism-community/)와 [I am Disabled On Identity-First Versus People-First Language](https://thebodyisnotanapology.com/magazine/i-am-disabled-on-identity-first-versus-people-first-language/)를 읽어보세요 [^4] 제국주의는 제국주의의 확장과 세계화로 모국어를 희생해가며 영어와 특정 지속적으로 지배 강요하는 말합니다"},"p5.js 레퍼런스에 기여하기\n":{"relativeUrl":"/contribute/contributing_to_the_p5js_reference","description":"{/* 올바른 형식을 사용하여 p5js 레퍼런스 문서를 작성하고 편집하세요 */} p5js에서는 소스 코드에 특별한 형태의 주석을 작성하는 방법을 통해 공식 웹사이트 [레퍼런스](https://p5js.org/reference/) 페이지에서 확인할 수 있는 코드 레퍼런스를 생성합니다 주석reference comments에는 설명 함수의 시그니처매개변수와 반환 값 사용 예제가 포함됩니다 다시 말해 함수 변수의 보여지는 모든 내용은 소스코드와 작성된 만들어집니다 문서에서 우리는 웹사이트에서 레퍼런스가 올바르게 렌더링될 있도록 지정하는 법을 알아보겠습니다 수정하거나 작성할 가이드를 준수해 주시기 바랍니다 ## comments 작동 방식에 대한 간단한 소개 코드를 보면 많은 라인이 주석으로 작성되어 것을 있습니다 다음과 같은 모습입니다 ``` /** * Calculates the sine of an angle `sin` is useful for many geometric tasks in creative coding The values returned oscillate between -1 and as input increases takes into account current angleMode @method sin @param {Number} @return @example function draw { background200 let t = frameCount x y sint + linex circlex describe'A white ball on a string oscillates up down' } sinx pointx series black dots form wave pattern' cost infinity symbol' */ 주석 뒤에는 함수를 정의하는 실제 자바스크립트 코드가 뒤따릅니다 주석은 항상 `/**`로 시작하고 `*/`로 끝나며 시작과 끝 사이의 라인은 `*`로 시작합니다 방식으로 블록 안에 문서로 해석될 것입니다 여러분이 [JSDoc](https://jsdoc.app/)을 접해본 적이 있다면 스타일의 주석이 익숙하게 느껴질 p5js는 JSDoc을 사용하는 것은 아니지만 JSDoc과 매우 유사한 문법을 가진 [YUIDoc](https://yui.github.io/yuidoc/)을 사용하고 주석에서는 블록이 더 작은 개별 요소로 나뉘어 집니다 이제부터 요소들을 자세히 앞서 보았던 블록을 살펴보고 섹션이 역할을 하는지 알아봅시다 작성한 내용이 [`sin()`](https://p5js.org/reference/#/p5/sin/) 페이지에서는 보여지는지 비교해보세요 주석의 맨 위에는 설명이 텍스트로 설명에는 마크다운 구문과 HTML이 포함될 있어요 설명은 간결하게 작성되어야 하며 필요하다면 특이사항이나 세부 내용을 추가하여 함수가 일을 최대한 잘 설명해야 합니다 함수에 위 세 개의 섹션을 포함하는데 `@` 기호 뒤에 중 하나의 키워드가 따라옵니다 `@method`는 이름을 정의할 사용합니다 예시에서 이름은 `sin`입니다함수 이름에는 괄호 ``가 포함되지 않는다는 점을 주의하세요 `@param`은 받는 매개변수나 인자argument를 `@param` 키워드 중괄호 `{}`가 감싸고 부분은 매개변수의 타입을 의미합니다 타입 나오는 단어는이 예시의 이름 나머지 매개변수를 설명하는 부분입니다 `@return`은 값을 `@return` 값의 매개변수는 따라야 {type} name Description here 매개변수가 선택 사항optional parameter인 경우에는 대괄호로 감싸주세요 [name] ### 알아보기 상수constants 취하는 값이 [`constants.js`](https://github.com/processing/p5.js/blob/main/src/core/constants.js)에 정의된 값들 하나라면 타입은 `{Constant}`로 지정되어야 `either` 키워드와 유효한 값들을 나열해야 예를 들면 같습니다 {Constant} horizAlign horizontal alignment either LEFT CENTER or RIGHT 값은 아래 data 없는 함수라면 태그를 생략해도 됩니다 체이닝chaining 부모 객체를 반환하는 경우라면 생략하고 대신 줄을 추가할 @chainable 추가 시그니처 여러 매개변수 옵션을 가지고 각각을 개별적으로 명시할 들어 [`background()`](http://p5js.org/reference/#p5/background/) 함수는 다양한 지원하고 있습니다background 문법 확인해 보세요 먼저 옵션 하나를 선택하여 살펴본 형식에 첫 번째 시그니처에 작성합니다 끝나면 시그니처를 각각의 시그니처는 @method와 태그만 있으며 각자의 범위 내에 예시를 참고해 주세요 background {String} colorstring color possible formats include integer rgb rgba percentage 3-digit hex 6-digit [a] alpha value gray specifies 다중 두 간의 유일한 차이점이 선택적 추가뿐이라면 별도의 만들 필요는 없습니다 가능한 기능의 사용을 제한해주세요 필요 이상으로 복잡하게 있기 때문입니다 변수 지금까지 함수와 상수에 방법에 대해 알아보았습니다 레퍼런스도 비슷한 구조를 따르지만 사용되는 태그가 다릅니다 system variable mouseX always contains position mouse relative to canvas at top-left corner 2-D -width/2 -height/2 WebGL If touch used instead will hold most recent point @property @readOnly // Move across background244 linemouseX describe'horizontal line moves left right with x-position' 블록의 시작 부분에는 있습니다이 예시에서는 `mouseX` 정의하기 위해 `@method` `@property`를 `@property`는 `@params`와 타입과 `@readonly` 태그는 대부분의 변수에 설정되어 사용자에 덮어씌워지지 않아야 함을 내부적으로 나타내기 사용됩니다 예제 추가하기 `sin`과 주석에서 찾아볼 있지만 아직 다루지 않은 `@example` 태그입니다 페이지를 방문할 실행될 곳입니다 [Screenshot reference page red showing only example code section]src/content/contributor-docs/images/reference-screenshotpng 위의 예제를 만들어내는 const c color255 fillc rect15 Sets redValue redc fillredValue rect50 describe Two rectangles edges rectangle yellow one 태그 다음에는 HTML `` 시작되고 뒤따라옵니다 열린 태그와 닫힌 사이에 작성하면 좋은 작성하기 위한 기본 원칙은 단순하고 작게 겁니다 예제는 의미가 있어야 하고 기능이 작동하는지 너무 복잡하지 않게 설명할 예제의 캔버스는 100x100 픽셀의 크기를 가져야 예제와 `setup` 작성되지 픽셀 크기의 회색 배경 캔버스를 만드는 자동으로 래핑wrapping됩니다 모범 사례 스타일에 자세한 여기서 않습니다 스타일 기능에 후에 한 구분해서 비워두고 arc50 PI QUARTER_PI OPEN describe'An ellipse created using arc its top open' describe'The bottom half arc' 실행되길 원하지 않는다면단지 보여주고 싶을 뿐이라면 ``에 `norender` 클래스를 추가해주세요 describe'ellipse 자동화된 테스트 과정에서 않는다면예를 사용자 상호작용이 필요한 경우 `notest` setup createCanvas100 saveCanvasc myCanvas' jpg' 외부 애셋 파일을 사용해야 파일들을 [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets/) 폴더에 넣어두세요이미 해당 존재하는 재사용해도 코드에서 assets/filenameext 경로로 불러와 사용하면 [tint()](http://p5js.org/reference/#/p5/tint/) 참고하세요 `describe`로 캔버스 마지막으로 추가한 예제에 스크린 리더가 읽어낼 설명을 추가해야 `describe`를 사용해서요 매개 변수는 하나입니다 캔버스에서 일이 벌어지고 있는지 간략하게 문자열 하나면 xoff background204 n noisexoff width linen height vertical randomly from right' noiseScale background0 `describe`에 [web accessibility contributor documentation](https://p5js.org/contributor-docs/#/web_accessibility?id=user-generated-accessible-canvas-descriptions)를 지금까지의 설명으로 편집하는 작업에 준비를 마쳤습니다 p5js에는 JSDoc 전문적으로 활용하는 방법이 가지 남아있습니다 방법들은 상황에 유용할 자주 아닙니다 `@private` 속성이나 변수가 비공개private 함수이거나 비공개 변수라면 쓸 기능은 웹사이트의 레퍼런스로 렌더링되지 비공개private로 이유는 라이브러리 자체에 내부 기능을 문서화하기 위해서입니다 아래에 `_start`의 그런 사례입니다 _start calls preload @private p5prototype_start `@module` 관련 태그들 파일 최상단에는 모듈은 p5js에서 다루는 기능들을 그룹화한 것으로 섹션으로 보여집니다 모듈 내부에는 `@submodule` 태그로 추가적인 하위 모듈이 `@for` 모듈과 `p5` 전체 클래스 관계를 정의하여 클래스의 일부라는 효과적으로 나타냅니다 `@requires` 현재 의존하고 있어 임포트되는imported 필수 모듈들을 정의합니다 @module Color @submodule Creating Reading @for p5 @requires core constants 따르는 규칙은 `src/` 폴더 내의 서브폴더가 `@module`이 되며 서브폴더 파일이 `@module`에 속한 `@submodule`이 된다는 새로운 서브폴더나 추가하지 않는 편집할 필요가 `@class` 생성자는 `@constructor` 정의됩니다 형식은 블록으로 방식과 유사하며 정의되어야 클래스에 생성자 있음을 `p5Color` A class Each object stores mode level maxes that were active during construction These are interpret arguments passed object's constructor They also determine output formatting such when saturation called stored internally array ideal RGBA floating normalized calculate closest screen colors which levels Screen sent renderer When different representations calculated results cached performance floating-point numbers recommended way create instance this @class p5Color @constructor {p5} [pInst] pointer {Number[]|String} vals containing green blue channel CSS 생성과 미리보기 리포지토리는 웹사이트를 빌드하고 실행하지 않아도 생성하고 미리 볼 코드의 주석으로부터 생성하기 명령어는 npm run docs 과정을 파일들과 주요 `docs/reference/datajson` 생성됩니다 파일은 웹 사이트에서 렌더링하는데 것과 동일한 경량화 후의 파일입니다 작업을 연속적으로 수행하기 명령어를 실행할 docsdev 변경사항이 생길때마다 렌더링을 업데이트하는 실시간 미리보기live preview 시작합니다변경 후에는 새로고침해야 변경 사항이 나타납니다 이는 특히 브라우저에서 실행 중인 보는데 유용합니다 템플릿 파일들은 `docs/` 저장되어 직접 변경해서는 안됩니다 단 `docs/yuidoc-p5-theme/assets` 추가하는 예외입니다 단계로 시스템에 사항을 알고 싶다면 [JSDoc](https://jsdoc.app/) [YUIDoc](https://yui.github.io/yuidoc/) 레퍼런스와 관련된 이슈issues를 [#6519](https://github.com/processing/p5.js/issues/6519/)와 [#6045](https://github.com/processing/p5.js/issues/6045/)를 [기여자 가이드라인](https://docs.google.com/document/d/1roBu-7s9xspuie3M6EhEokYWc82DZhDNYO2SQiY4k68/edit?tab=t.0#heading=h.627q50vo09fb) 문서도 시작하기에 자료입니다"},"기여자 가이드라인\n":{"relativeUrl":"/contribute/contributor_guidelines","description":"{/* GitHub에서 p5js에 기여하는 데 필수적인 정보 */} 기여자 가이드라인에 오신 것을 환영합니다 문서는 코드를 기여하고자 하는 신규 가지 기술적 단계를 다시 기억하고자 또는 p5js 코드 기여와 관련된 모든 사람을 위한 문서입니다 리포지토리repository 외부에서 기여하려는 경우튜토리얼 작성 수업 계획 이벤트 조직 페이지를 살펴보세요 스튜어드 유지 관리자maintainers는 이슈 풀 리퀘스트를 검토하는 더 유용한 [스튜어드 가이드라인](https://github.com/processing/p5.js/blob/main/contributor_docs/steward_guidelines.md)을 찾을 수 있습니다 긴 종합적인 문서이지만 가능한 단계와 항목을 명확하게 지시하도록 할 것입니다 목차를 활용하여 자신에게 섹션을 찾아보세요 계획된 관련이 없는 경우 건너 뛰어도 괜찮습니다 **새로운 기여자인 첫 번째 섹션 이슈Issue에 대해 알아보기로 시작하는 것이 좋습니다 개발 프로세스의 단계별 설정만 필요한 개발자를 빠른 시작 참조하세요** 목차 * [이슈Issue에 알아보기]/all-about-issues/ [이슈Issue란 무엇인가요]/what-are-issues/ [이슈 템플릿Issue Templates]/issue-templates/ [버그 발견]/found-a-bug/ [기존 기능 향상]/existing-feature-enhancement/ [새로운 요청]/new-feature-request/ [토론Discussion]/discussion/ [p5js 코드베이스 작업]/working-on-the-p5js-codebase/ [개발자를 시작]/quick-get-started-for-developers/ [Github 편집 사용하기]/using-the-github-edit-functionality/ [p5js를 포크하고 포크에서 작업하기]/forking-p5js-and-working-from-your-fork/ Desktop 사용하기]/using-github-desktop/ [git 명령줄command line 인터페이스 사용하기]/using-the-git-command-line-interface/ [코드베이스code base 분석]/codebase-breakdown/ [빌드 설정]/build-setup/ [Git 워크플로우]/git-workflow/ [소스 코드]/source-code/ [단위 테스트]/unit-tests/ [인라인 문서화]/inline-documentation/ [국제화](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#internationalization) [접근성]/accessibility/ [코드 표준]/code-standard/ [소프트웨어 디자인 원칙]/software-design-principles/ [풀 리퀘스트]/pull-requests/ 리퀘스트 생성]/creating-a-pull-request/ 정보]/pull-request-information/ [제목]/title/ [해결]/resolves/ [변경 사항]/changes/ 사항의 스크린샷]/screenshots-of-the-change/ 체크리스트]/pr-checklist/ [리베이스 충돌 해결]/rebase-and-resolve-conflicts/ [논의 고치기amend]/discuss-and-amend/ *** 이슈에 알아보기 p5js의 GitHub 리포지토리줄여서 repo에서 활동의 대부분이 이슈에서 발생하며 이는 여러분이 기여를 여정을 하기 좋은 장소입니다 ## 이슈란 무엇인가 [A cropped screenshot of the library repository only showing contents top right corner A red box is drawn on surrounding Issues tab]src/content/contributor-docs/images/issues-tabpng 이슈는 깃허브 포스트post를 일컫는 보편적인 용어이며 문제에 잘 설명하기 버그 보고 새로운 추가 요청 의견 라이브러리 개발과 될 봇을 포함한 계정을 가진 사람이 코멘트주석를 달 기여자들끼리 리포지토리 내에서 프로젝트 주제에 논의하는 공간입니다 다양한 이유로 이슈가 오픈될 있지만 우리는 보통 소스 코드에 대한 개발에 논의를 위해 이슈를 사용합니다 당신의 디버그 협업자 초대 관련없는 주제는 [포럼 (forum)](https://discourse.processing.com/) 이나 [디스코드 (Discord)](https://discord.gg/SHQ8dH25r9/) 같은 플랫폼에서 상의되어야합니다 이슈인지 곳에 포스트 되어야 하는지 결정할 있도록 쉽게 사용할 있는 템플릿을 만들었습니다 템플릿 템플릿은 스튜어드와 관리자가 이해하고 검토하기 만들어줍니다 해당 제출하고 빠르게 답변을 받을 도와줍니다 [Screenshot an example what issue looks like The title in Warning being logged Safari when using a filter shader 2D mode #6597]src/content/contributor-docs/images/github-issuepng 제기하려면 저장소의 탭으로 이동하고 오른쪽에 New 버튼을 클릭하기만 하면 됩니다 여러 옵션이 제시되며 각각은 템플릿에 해당하거나 질문을 제출할 적절한 위치로 리디렉션됩니다 제대로 된 관심을 가장 연관성있는 옵션을 선택하는 권장합니다 [Cropped repository's page with green button highlighted it]src/content/contributor-docs/images/new-issuepng ### 발견\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml) p5js에서 잘못된 동작이 발생하거나 문서에 설명된 대로 동작하지 않는 경우[이 템플릿](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml)을 사용하세요 스케치sketch 디버깅 중 발생한 문제는 먼저 [Discourse 포럼](https://discourse.processing.org) 질문하세요 채워야 필드가 *가장 적합한 하위 영역은 무엇인가요* - 문제를 식별하고 응답하기 자동으로 \\[라벨label]태그를 지정하여 도와줍니다.([https://github.com/processing/p5.js/blob/main/contributor\\_docs/issue\\_labels.md](https://github.com/processing/p5.js/blob/main/contributor_docs/issue_labels.md)). *p5js 버전* 버전 번호는`` 태그 링크 p5js/p5minjs 파일의 줄에서 이것은 `142` 점으로 구분된 세 개의 숫자로 이루어져 있을 *웹 브라우저 간의 동작을 분리하는 도움이 번호를 찾으려면 사용 중인 브라우저에 아래 표의 지침을 따르세요 Chrome Firefox In address bar navigate to `chrome//version` `aboutsupport` Under menu item choose About *운영 체제* 가능하면 운영 체제 포함해야 합니다 `macOS 125` 일부 버그는 체제의 동작에서 비롯될 *이것을 재현하는 단계* 공유해야 중요한 정보입니다 버그를 재현하기 세부 나열해야 보여주는 기본적인 예제 공유하는 것은 당신이 겪고 재현하고 해결책을 만들기 큰 **재현이 핵심입니다** 템플릿의 많은 필드는 복제하는 목표로 여러분의 스케치 환경과 발견한 재현시킬 방법에 정보를 제공할수록 누구든지 찾기에 쉬워질 입니다 **가능한 한 자세히 설명하고 추상적인 문장을 피하세요** 예를 들어 image function이 작동하지 않습니다이라고 하지 말고 로드된 GIF 이미지를 올바른 크기로 표시하지 않습니다 설명하세요 마주치고 설명하는 방법은 두 가지를 공유한 샘플 코드가 무엇을 기대하는지 예상되는 동작 실제로 작동하는지 실제 방금 보고한 수정하고 싶다면 설명란에 그렇게 표시할 후 설명한 수정할 것인지 간단한 제안을 제공할 이렇게 지원이 필요한지를 알 **이슈가 승인되지 않거나 승인이 이루어지기 전에 이슈와 제출하거나 변경 작업을 시작해서는 안됩니다** 제안된 수정이 수락되지 않을 완전히 접근 방식이 필요할 있거나 문제가 있기 때문입니다 수정 나기 제출된 리퀘스트는 날 때까지 닫혀있을 것입니다closed 수정을 승인된 이슈에는 적어도 명의 [영역 관리자](https://github.com/processing/p5.js#stewards)의 승인을 받아야 시작할 향상\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Enhancement\\&projects=\\&template=existing-feature-enhancement.yml) 기존 기능함수 상수 렌더링 등에 사항 제안 추가를 `color` 함수 색상을 받아들이는 함수에 색상 정의 방법을 추가하는 경우에는 사용해야 템플릿에는 필드를 입력해야 *접근성향상* -이 필수 향상을 통해 p5js가 창작 예술이나 기술 분야에서 역사적으로 소외된 사람들에게 \\[접근성 향상] ([https://github.com/processing/p5.js/blob/main/contributor\\_docs/access.md](https://github.com/processing/p5.js/blob/main/contributor_docs/access.md) 시킬 설명을 넣는 곳입니다 **이것없이는 제안도 않습니다** 확실하지 않음을 기입하고 그들이 접근성을 다루는지에 아이디어가 있다면 커뮤니티의 구성원들이 논점을 제안할 우리가 해결하는데 [라벨](https://github.com/processing/p5.js/blob/main/contributor_docs/issue_labels.md)을 지정할 *기능 향상 사항* 제안에 작성하는 제안에는 종종 향상이 필요한지에 명확한 사례가 포함됩니다 제안이 승인되기 위해서는 1명의 필요합니다 **이슈에 제안과 수락될 것임을 보장할 없기 주어질 닫힙니다closed 요청\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Feature+Request\\&projects=\\&template=feature-request.yml) 기능을 제안하려는 경우에 `createTable`함수를 사용하여 HTML `` 요소를 그리는 제안은 기존의 중복될 있으며 적합하다고 생각되는 선택하면 양식 향상의 필드와 동일합니다 채워 넣어야 하는지에 자세한 내용은[이전 섹션]#existing-feature-enchancement을 참조해주세요 최소 2명의 관리자](https://github.com/processing/p5.js#stewards) **제안이 모든풀 [\"토론(Discussion)\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Discussion\\&projects=\\&template=discussion.yml) 제출 위의 것에도 맞지 사용됩니다 실제로는 템플릿에도 드물어야 특정 웹 API 채택할지에 토론은 요청](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#new-feature-request); 제출해야 추가적인 모드를 것에 토론은[기존 향상](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#existing-feature-enchancement); 주최하는 지역 크리에이티브 코딩creative coding 이벤트에 발표는 포럼에 게시하고 지원이나 홍보를 원한다면 Processing Foundation에 연락해야 토론 오픈할 측면 패널의 라벨 패널을 관련 라벨을 추가하여 영역으로 알릴 자체는 최소한의 텍스트 필드만 예시 보려면 [이 링크](https://github.com/processing/p5.js/issues/6517/)를 확인하세요 [**⬆ back top**]#contributor-guidelines 작업 사전 요구 계속 진행 하려면 명령줄 git nodejsv18 최소한으로 숙지하고 로컬 환경을 설정해야 소개 이제 논의되었고 구현이 승인되었으며 변경을 준비가 되었습니다 기반 마찬가지로 발견했거나 토론에 참여했으며 스튜어드에 승인되었지만 원래 문제 작성자나 구성원 작업할 의사가 없음을 표시한 자발적으로 여기에 스튜어드가 할당하도록 **다른 사람의 차례를 어기면 안 됩니다** 의향을 표시하거나 이미 사람에게 할당되어 리퀘스트을 제출하여 대기열을 넘어서는 안됩니다 항상 선착순 우선시할 누군가가 아직 동일한 PR을 제출하면 닫힐 할당된 개인의 마지막 활동이 없었다면 공손한 코멘트를 남겨 상황을 묻고 구현에 필요한지 물어볼 대부분 사람들이 작업하는 시간이 소요되기에 이바지함에 \u001d긴 시간을 허용합니다 당신은 자신의 속도로 일하고 오래 작업에 할애할 있는지에 엄격한 제한이 없다는 자신감을 가질 필요가 기여의 측면에서든 발생하면 도움을 요청하는 주저하지 마십시오 관리자뿐만 아니라 커뮤니티 회원들도 최선을 다해 안내할 가이드 p5js의🌸 코드베이스code base에 작업/기여를 원하는 p5js를 직접 개선하거나 [친숙한 오류 메세지 시스템](https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md)과 프로젝트를 개선하기 수행할 [p5js의 포크를 생성합니다.](https://docs.github.com/en/get-started/quickstart/fork-a-repo/) [생성한 컴퓨터에 복제합니다.](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository/) [다음 명령을 업스트림upstream을 추가합니다.](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/configuring-a-remote-repository-for-a-fork/): ``` remote add upstream https://github.com/processing/p5.js [NodeJs](https://nodejs.org/en/download/) 설치되어 있는지 확인하십시오 명령어를 확인할 node -v 입력하여 라이브러리를 설치하세요 npm ci 다음과 설명적인 브랜치 이름을 `main` 브랜치에서 브랜치를 만들어 주세요 checkout -b [branch_name] 코드베이스를 변경하기 시작하면 자주 테스트를 실행하세요 작업은 걸리지만 손상되지 않는지 확인합니다 test 추가하거나 단위 추가합니다 작업이 완료되면 사항을 커밋하고 리퀘스트](https://p5js.org/contributor-docs/#/./contributor_guidelines?id=pull-requests)를 생성할 인터페이스상 파일 내용 상단에 연필 아이콘 버튼이 버튼은 제공하는 기능으로 파일을 빠르고 간편하게 편집할 file view src/color/color\\_conversionjs arrow pointing pencil icon side image]src/content/contributor-docs/images/edit-filepng 매우 단순한 외에는 사용하는 권장되지 이에 주요 이유 하나는 코드의 보다 복잡한 리퀘스트로 제출되기 로컬에서 구축하고 테스트해야 기능에서 환경보다 유연하게 경우가 많기 포크fork에서 작업하기 단계는 리포지토리repository를 포크하는 포크fork는 오픈 소스에서 특정한 의미를 가지고 여기서는 리포지토리의 사본을 생성하여 계정에 저장하는 의미합니다 리포지토리를 포크하려면 페이지 상단 근처에 포크fork GitHub가 복사본을 만듭니다 main labeled fork and Fork 593k outlined dark orange]src/content/contributor-docs/images/forkpng 리포지토리에 쓰기 액세스 권한이 없을 가능성이 높기 작업해야 하며 작업하면 변경한 나중에 공식 Desktop은 터미널에 입력하는 대신에 그래픽 사용자 인터페이스를 git을 프로그램입니다 git에 익숙하지 않은 옵션이며 때마다 Desktop과 terminal 사이를 자유롭게 전환할 [GitHub Desktop을 다운로드하고 설치](https://desktop.github.com/)합니다. 설치가 응용 프로그램을 엽니다 계정으로 로그인하라는 메시지가 나타납니다 로그인한 후에는 포크한 포함하여 목록이 표시됩니다 포크인 `yourUsername/p5js`를 선택하고 파란색 Clone 클릭합니다 저장할 위치에 요청할 이를 변경하거나 기본 설정을 유지한 채로 계속할 [The user interface after signing On half screen it lists your projects bottom right]src/content/contributor-docs/images/github-desktop-initpng 복제가 되면 사용할지에 상위 프로젝트에 기여할 계속Continue을 cloning It asks if you are planning contribute parent project or use for own purposes]src/content/contributor-docs/images/github-desktop-forkpng `git` 사용하기 포크가 생성되면 포크 페이지로 이동하여 초록색 Code 클릭해서 URL을 복사하세요 `https://github.com/limzykenneth/p5.js.git` 모양이어야 list files landing orange outline]src/content/contributor-docs/images/code-buttonpng 환경에서 명령줄로 저장소를 클론하세요 클론Clone은 단순히 저장소와 장치로 다운로드하는 폴더를 저장하고 싶은 폴더에서 clone [git_url] 위에서 복사한 `[git_url]`자리에 작성하세요 과정은 인터넷 연결 속도에 분 정도 걸릴 있으니 커피 잔을 내리면서 기다리는 것도 좋을 같아요 과정이 선호하는 에디터에서 다운로드한 `p5js` 열고 내용을 살펴볼 분석 폴더 안에 파일과 폴더는 같습니다 `src` 최종적으로 p5js와 p5minjs 파일로 결합되어 위치하는 [`test`](https://github.com/processing/p5.js/blob/main/contributor_docs/unit_testing.md) 테스트와 문서 예제를 테스트하기 `tasks` 세밀하게 맞춤화된 빌드 위치한 `Gruntfilejs` 구성 파일입니다 `contributor_docs` 기여자들이 작성한 문서를 비롯한 파일이 폴더들은 파일이나 종류의 지원 파일일 뿐입니다 대부분의 없습니다 설정 시작하기 빌드하고 테스트할 odejs가 있다는 가정하에 다음을 npm이 의존성dependency을 다운로드해야 그게 다입니다 설정이 완료되었습니다 꽤 간단하죠 Git 워크플로우 부분과 내용은 아래의 참고해보세요 처음부터 실행해보세요 에러없이 완료되어야 테스트 없이 라이브러리만 run build 명령어 사용하더라도 `lib/`폴더 `p5js`와 `p5minjs`로 라이브러리가 빌드됩니다 빌드된 파일들을 테스트에 만드는 git에서 브랜치는 이름에서 있듯이 `main`이나 브랜치에 영향을 주지 않고 커밋을 추가할 분기된 버전입니다 있게 해줍니다 독립된 식으로요 망쳐도 Desktop에서 현재 커밋하려면 완료한 앱을 열어야 왼쪽 사이드바에 표시되고 내의 구체적인 사항이 창 하단 모서리에 옆의 입력란에는 간략하고 개괄적인 이것이 커밋의 제목이 설명 입력란은 커밋에 작성하거나 그냥 비워둘 Commit 눌러 확정하세요 branch selection After entering new name that does not yet exist Create Branch appears]src/content/contributor-docs/images/github-desktop-create-branchpng 터미널에서 `git branch_name`을 실행하고 `branch_name`을 설명할 이름으로 바꾸면 별도의 진행하면서 특히 `npm test`를 실행하는 데는 해치지 아래에 커밋하기 실행해야 코드베이스codebase에 완료했다면 커밋해야 커밋은 저장된 모음으로 커밋 시점의 내 상태를 기록합니다 궁금하시죠 모으기보다는 커밋하는 문장으로 완료할 입력란에 고급 입력합니다 기술하거나 having made change area where need write circled lower left window]src/content/contributor-docs/images/github-desktop-commitpng 확인하려면 status 변경하지 뜬다면 상태로 [복원](https://git-scm.com/docs/git-restore/)해야 하거나 의도한 사항인지 확인해야 입력하세요 diff 리퀘스트PR Pull request에 포함시키지 않으려는 사항은 커밋해서는 명령어로 사항에 스테이징커밋으로 저장하다하세요 commit -m [your_commit_message] `[your_commit_message]`는 메세지로 대체해야 일반적인 문구는 피해주세요 `Documentation fix 1` 대신 `Add documentation circle function`와 적어주세요 Add function 위 반복하면서 주기적으로 실행하여 Source code 계획을 하고 알고 방법 문서Documentation를 방문하는 문서의 하단에는 링크가 reference website containing sentence Notice any errors typos Please let us know feel free edit src/core/shape/2d\\_primitivesjs pull request Part above says underline it]src/content/contributor-docs/images/reference-code-linkpng Unit tests 계획이라면 [여기](https://github.com/processing/p5.js/blob/main/contributor_docs/unit_testing.md)를 참조하세요 개선 수정에 대해서는 구현implementation을 커버하는 테스트가 리퀘스트에 포함되어야 한다는 점을 유의하세요 인라인 Inline 계획하고 [여기](https://github.com/processing/p5.js/blob/main/contributor_docs/inline_documentation.md)를 접근성 Accessibility 기능에 [여기](https://github.com/processing/p5.js/blob/main/contributor_docs/web_accessibility.md)를 친절한 에러 시스템에 [여기](https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md)를 표준 스타일은 [ESLint](https://eslint.org/)에 시행됩니다 커밋commit과 리퀘스트pull request는 linting프로그래밍 오류를 찾아내는 과정을 통과해야만 받아들여집니다 코딩 표준을 따르는 쉬운 에디터용 ESLint 플러그인을 사용하고 리팅linting 하이라이팅대부분 에디터용으로 제공됨을 활성화하는 소프트웨어 원칙 원칙을 염두에 두는 중요합니다 우리의 우선순위는 프로젝트의 우선순위와 다를 잇으므로 프로젝트에서 오는 원칙에 익숙해지는 **접근성** 무엇보다 우선시하며 내리는 결정은 그룹에 늘릴지 고려해야 선언문에서 읽을 **초보자 친화적** API는 초보자에게 친화적을 최신 HTML5/Canvas/DOM API를 인터랙티브하고 시각적인 콘텐츠를 낮은 장벽을 제공합니다 **교육적** p5js는 교육적 사용을 지원하는 API와 커리큘럼에 중점을 두고 API에 완전한 참조와 지원하고 창의적 명확하고 몰입도 순서를 소개하는 튜토리얼과 커리큘럼을 포함합니다 **자바스크립트와 커뮤니티** 자바스크립트 패턴과 사용법을 모델링하면서 곳에서는 추상화함으로써 관행을 접근하기 라이브러리로서 문서화 전파 과정의 넓은 커뮤니티를 **프로세싱과 프로세싱 언어와 커뮤니티에 영감을 받았으며 자바에서 자바스크립트로의 전환을 쉽고 위로 올라가기**]#contributor-guidelines requests PR 변경사항을 테스트까지 마친 후해당할 test` 오류가 발생하지 커밋했다면 저장소로 새 병합하기 준비할 공식적으로 저장소예를 저장소에 저장소로부터의 히스토리로 병합하거나 당겨오도록 생성 푸시하는 포크로 업로드하는 것으로 생각하세요 갓허브 데스크탑GitHub Desktop애서는 변경하는 버튼 깃허브에 클릭하여 푸시하세요[A committing changes push online red]src/content/contributor-docs/images/publish-branchpng 업로드되면 생성하라는 번 클릭하면 미리보기와 요청을 생성하는 Request 시작합니다 Github pushing sidebar changed items pane below No local header blue Review has been marked up circle]src/content/contributor-docs/images/preview-pull-requestpng -u origin 푸시가 열 표시될 브라우저에서 이동할 없다면 목록 상단의 드롭다운 버튼으로 브랜치로 전환한 Contribute를 클릭하고 Open request를 클릭하세요 command response includes link open request]src/content/contributor-docs/images/new-branchpng 방문할 버튼도 볼 수도 web section near yellow call action text Compare request]src/content/contributor-docs/images/recent-pushespng prepopulated p5js's template]src/content/contributor-docs/images/new-prpng 제출하기 작성해야 제목 제목은 간략하게 설명해야 여기서 지양해야 해결 템블릿에는 `Resolves #[Add number here]`라는 문구가 있는데 `[Add here]` 부분을 수정하려는 [above](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#all-about-issues) eg #1234` 번호로 변경해야 리퀘스트가 병합된 닫히게 닫고 싶지 않다면아마도 리퀘스트에서 변경사항으로 올 것이기 `Resolves` `Addresses`로 변경하세요 진행한 구현 사항과 결정 검토review할 추가하세요 스크린샷 상황에 선택적이며 캔버스에 시각적 렌더링하는 방식과 편집기의 스크린샷이 스케치의 스크린샷임을 유의해주세요 체크리스트 변경사항과 항목이 해당하는 `[ ]`를 `[x]`로 변경해주세요 request을 리베이스 Fix shaders rectMode applied #6603]src/content/contributor-docs/images/opened-prpng 오픈된 검토하고 사항들을 주의해주세요 수는 작업한 수와 일치해야 Commits 탭에는 단 커밋만 표시되어야 Files 탭은 비교하여 변경사항만을 보여주어야 부근에 This no conflicts branch라고 must be resolved라고 표시되어서는 사실이 아니라면예상했던 것보다 커밋이 충돌이 [rebase](https://git-scm.com/book/en/v2/Git-Branching-Rebasing/)를 진행하거나 충돌을 해결해야 충돌이란 최근에 변경사항이 적용된 파일에 진행하였으나 깃git에서 변경사항 묶음을 유지할지 제외할지 확정하지 못한 해결하는 어려움이 저희에게 알려주시면 안내해 드리겠습니다 지침은 가끔 깃허브는 Resolve Conflicts 보여주면서 해결할 합니다[A merge conflicting filenames listed there highlighted]src/content/contributor-docs/images/resolve-conflictspng `>>>>>>` 사이에 표시되며 `=======`으로 구분됩니다 부분은 보여주고 쪽 부분에는 메인 변경된 보여줍니다 GitHub's conflict resolution contains markers highlighted]src/content/contributor-docs/images/conflicts-interfacepng 표시를 제거하고 포함될 최종 코드만 남겨둡니다 해결되었을 Mark as resolved를 클릭할 editing remove mark resolved upper enabled]src/content/contributor-docs/images/mark-as-resolvedpng 해결되면 커밋할 all have enabled]src/content/contributor-docs/images/commit-mergepng 깃허브의 인터페이스에서 표시하기에는 너무 수동 방식을 선호한다면 https://github.com/processing/p5.js` fetch upstream` rebase upstream/main` 발생했을 lib/p5js와 lib/p5minjs 파일에서만 발생했다면 해결하기 쉽습니다 빌드하기만 파일에서 발생했고 확실히 모르겠다면 요청하세요 --continue push` 체크 리스트는 단계들을 거친 후에 해결될 않다면 논의 고치기amend 열리면 스튜어드나 검토할 답변할 있기까지 며칠이 조금만 기다려주세요 그동안 이슈들을 확인해 보는 어떨까요 검토한 하나가 발생할 승인되어 병합됩니다 축하합니다 후자의 경우라도 당황하지 마세요 정상적인 과정이며 스튜어드는 완성할 돕기 리퀘스트의 요청되었고 진행할 [이전과 과정](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#git-workflow)를 따르되 복사본 계속해서 진행하고 커밋한 포크된 원격 푸시하세요 푸시하면 검토자에게 요청된 진행했다는 알리기 댓글을 남기세요 필요하지 PR은 병합merge될"},"새로운 라이브러리 생성하기\n":{"relativeUrl":"/contribute/creating_libraries","description":"p5js 라이브러리는 p5js의 핵심 기능을 확장하거나 추가하는 모든 자바스크립트 코드가 될 수 있습니다 라이브러리에는 두 가지 범주가 코어 라이브러리DOM Sound는 배포의 일부이며 기여된 커뮤니티의 구성원이 개발 소유 유지 관리합니다 여러분이 라이브러리 하나를 만들고 있고 [p5js.org/libraries](https://p5js.org/libraries/) 페이지에 포함하고 싶다면 [이 폼](https://docs.google.com/forms/d/e/1FAIpQLSdWWb95cfvosaIFI7msA7XC5zOEVsNruaA5klN1jH95ESJVcw/viewform/)을 제출해 주세요 자바스크립트를 작성하고 사용하는 방법에는 여러 가지가 있으므로 저희는 작업을 여러분에게 맡기도록 하겠습니다 다음은 라이브러리가 잘 동작하도록 하기 위한 참고 사항입니다 ## 코드 ### p5prototype에 메소드를 추가하여 p5 확장 할 예를 들어 domjs의 코드는 DOM에 [HTMLImageElement](https://developer.Mozilla.org/en-US/docs/Web/API/HTMLImageElement/)를 `createImg`메소드를 추가하기 위해 p5를 확장하는 것입니다 ```js p5prototypecreateImg = function src { const elt documentcreateElement'img' //const new Image // 위에 1행보다 더 짧게 대체 eltsrc return addElementelt this } ``` DOM 프로젝트에 포함되면 `createImg`는 `createCanvas` 또는 `background`와 호출 내부 helpers를 private 함수 사용하기 사용자에 호출되지 않을 목적의 함수를 의미합니다 위의 예제의 `addElement`는 [dom.js](https://GitHub.com/processing/p5.js/blob/main/src/dom/dom.js)에서 입니다 `p5prototype`에는 공개적으로 바운드 되지 않았습니다 프로토타입에 클래스를 아래 예제에서 `p5Elementprototype`은 `html` 메소드와 확장되어 엘리먼트의 html을 설정합니다 p5Elementprototypehtml html thiseltinnerHTML //thiselttextContent //innerHTML보다 안전한 대안 preload에서 있도록 p5에 메소드 이름을 등록하려면 registerPreloadMethod를 이용하세요 소리 이미지 외부 파일 로딩과 같은 일부 비동기 기능에는 동기 옵션이 제공됩니다 `loadStringspath [callback]` 은 두번째 매개변수로 선택적으로 콜백 허용합니다이 함수는 loadStrings 함수가 완료된 후 호출됩니다 사용자는 콜백함수 없이 `preload`에서 loadStrings를 있으며 p5js는 `preload`의 작업이 완료 때까지 기다렸다가 `setup`으로 이동합니다 등록하고 등록하고자 하는 메소드명과 `registerPreloadMethod`를 호출하고 프로토타입 객체를 ~~기본값은 p5prototype~~ 포함하여 메소드에 전달합니다 예제는 soundfilejsp5sound 라이브러리에 `loadSound`를 등록하는 행 보여줍니다 p5prototyperegisterPreloadMethod'loadSound' p5prototype *callback* **preload** 대한 함수의 예제 preload 콜백과 p5prototypegetData callback 함수에서 데이터를 복제하고 반환할 만듭니다 덮어쓰거나 재할당하지 않고 업데이트해야 합니다 preload가 원래 포인터/레퍼런스를 유지하는 것이 중요합니다 const로 변수를 선언하면 실수로 재할당하는 경우를 방지해 줍니다 ret {} 작업할 일부입니다 loadDataFromSpacefunction data 데이터의 프로퍼티들을 반복합니다 for let prop in ret의 프로퍼티들로 설정복제합니다 전달받은 빈 업데이트합니다 객체로 ret을 재할당할 수는 없습니다 콘텐츠를 데이터로 ret[prop] data[prop] 콜백이 함수인지 아닌지 확인합니다 if typeof == function' callbackdata 실행 채워진 반환합니다 ***p5*** 여러번 호출되는 **registerMethod** 사용하세요 p5prototypedoRemoveStuff 제거하는 p5prototyperegisterMethod'remove' 등록 수있는 이름은 다음과 같습니다 등록하기 전에 먼저 정의해야 * **pre** — `draw` 시작 시 드로잉에 영향을 줄 **post** 끝에 **remove** `remove`가 호출되면 **init** 스케치가 처음 초기화 스케치 함수`p5` 생성자로 전달 된 것가 실행되기 전역 모드 설정 호출되기 여러분의 스케치에 무엇이든 추가 모드가 활성화되어 있으면 자동으로 `window `에 복사됩니다 목록을 대략적으로 정리하면 [https://GitHub.com/processing/processing/wiki/Library-Basics#library-methods](https://GitHub.com/processing/processing/wiki/Library-Basics#library-methods) 여러분만의 생성 전혀 확장하지 대신에 인스턴스화하고 라이브러리와 연계하여 사용할 있는 제공할 다 혼합 작명 **p5 덮어 쓰지 않아야 합니다** p5prototype을 때는 기존 프로퍼티 함수명을 사용하지 않도록 주의해야 [hasOwnProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty/) 사용하여 확인해 볼 들면 맨 위에서 행을 추가하면 이미 `rect` 메소드가 존재하기 true 출력할 consolelogp5prototypehasOwnProperty'rect' **위와 유사하게 클래스 않아야합니다** p5Image p5Vector p5Element 등을 경우 위와 동일한 프로토콜을 따라야 **p5js는 모드와 인스턴스 이렇게 있습니다** 모드에서 속성과 메서드는 window 객체에 바인딩되므로 접두사 `background` 메서드를 기본 콘솔에 빠르게 Google 검색으로 JS 이름들이 존재하는지 테스트 해 **일반적으로 클래스는 대문자로 표시되며 메서드와 프로퍼티들은 소문자로 시작합니다** p5의 클래스들은 앞에 p5가 붙습니다 네임스페이스를 클래스에만 붙이려고 직접 만들 **클래스명에 접두사로 포함하지 고유한 접두사나 접두사가 없는 이름으로 생성해 **p5js 이름에도 붙지만 단어는 소문자**로 클래스와 구별됩니다 p5soundjs가 지정하려면 형식을 따라주세요 패키징하기 **라이브러리가 포함 단일 파일을 만듭니다** 사용자가 쉽게 라이브러리를 연결할 빠른 로딩을 일반 파일과 [최소화된](http://jscompress.com/) 버전 모두에 옵션에 대해 고려 **기여된 제작자가 호스팅 문서화 관리합니다** 라이브러리들은 GitHub 별도의 웹 사이트 어딘가에 있을 **문서가 핵심입니다** 문서는 찾아보고 다운로드 하여 곳에 있어야 레퍼런스에 포함되지 않지만 유사한 따르고 싶을 수도 [라이브러리 개요 페이지](http://p5js.org/reference/#/libraries/p5.sound), [클래스 페이지](http://p5js.org/reference/#/p5.Vector) [메소드 페이지](http://p5js.org/reference/#/p5/arc/) 예제를 참조하세요 **예제가 좋습니다** 사람들에게 일을 보여주세요 자바스크립트이므로 사람들은 다운로드하기 전 온라인에서 되는 것을 예제들을 호스팅하기 쉬운 [jsfiddle](http://jsfiddle.net/) [codepen](http://codepen.io)이라는 두가지 좋은 **알려주세요** 배포 준비가 되면 [hello@p5jsorg]mailtohello@p5jsorg로 링크와 정보와 보내주세요 페이지](http://p5js.org/libraries/)에"},"p5.js 친절한 에러 시스템(Friendly Error System, FES)\n":{"relativeUrl":"/contribute/friendly_error_system","description":"## 개요 FES는 학습을 시작할 일반적인 사용자 오류를 겪는 새로운 프로그래머를 돕도록 설계되었습니다 시스템은 시작 잡아내고 사용자가 해결하도록 명확한 표현과 링크를 제공합니다 막 마주칠 수 있는 함수에만 적용됩니다 서버를 실행하지 않고 파일을 로드한다거나 URL로 loadImage 함수를 호출하는 등의 특히 문제는 예외입니다 FES의 목표는 종종 암호화된 콘솔 보완하기 위해 이해하기 쉬운 오류 메시지를 생성하는 것입니다 예를 들어 자바스크립트는 기본적으로 파라미터의 타입 검사를 지원하지 않기 경험이 없는 자바스크립트 개발자는 파라미터 입력 시 발생하는 에러를 발견하기가 더욱 어렵습니다 FES 메시지는 우리가 이해할 보통의 언어로 되어 있고 문서로도 연결되며 초보자 수준으로 작성되었습니다 오류들은 p5js를 통해 여러 파일에서 발생하지만 대부분의 작업과 작성은 `src/core/friendly_errors`에서 일어납니다 `p5js`에서는 FES가 활성 상태이고 `p5minjs`에서는 비활성 상태입니다 FES를 비활성화 하려면 `p5disableFriendlyErrors = true` 설정하면 됩니다 종류의 감지하고 출력할 있습니다 `validateParameters`는 인라인 문서 기반으로 함수의 파라미터를 점검합니다 `friendlyFileLoadError`는 파일 로딩 잡아냅니다 두 검사는 기존의 선택된 p5 함수에 통합되었지만 `p5_validateParameters` 호출하여 더 많은 함수나 자체 라이브러리를 추가할 유용한 얻기 함수에서나 `friendlyError`를 호출할 `helpForMisusedAtTopLevelCode`는 윈도우 로드 호출되며 setup이나 draw 외부에서 p5js 사용할 있는지 확인합니다 자세한 기술 정보는 [src/core/friendly\\_errors/fes\\_core.js](https://github.com/processing/p5.js/blob/main/src/core/friendly_errors/fes_core.js)에서 메모를 참고하세요 ### `core/friendly_errors/file_errors/friendlyFileLoadError` * 함수는 파일이 올바로 로드되지 않으면 친절한 생성하고 표시합니다 로드하기에는 너무 큰지 확인해서 경고를 생성하기도 합니다 이것은 다음과 `p5_friendlyFileLoadErrorERROR_TYPE FILE_PATH` 예시 ```javascript /// 폰트 누락 let myFont function preload { loadFont'assets/OpenSans-Regularttf' } setup fill'#ED225D' textFontmyFont textSize36 text'p5*js' {} 콘솔에 다음의 메시지가 생성됩니다 > 폰트를 로드하는 데 문제가 같습니다 경로 [assets / OpenSans-Regularttf]가 올바른지 온라인 호스팅하는지 또는 로컬 서버가 실행 중인지 확인하십시오 ``` 현재 버전에는 `image` `XML` `table` `text` `json` `font`에 대한 템플릿이 포함되어 `image/loading_displaying/loadImage` `io/files/loadFont` `io/files/loadTable` `io/files/loadJSON` `io/files/loadStrings` `io/files/loadXML` `io/files/loadBytes`에 구현되었습니다 크기가 커서 중 생기는 오류는 loadX 메소드에 `core/friendly_errors/validate_params/validateParameters` `docs/reference/datajson`에 정보와 일치하는지 검증을 실행합니다 함수 호출이 올바른 개수와 파라미터형을 가지고 arc1 ptjs arc 4번째 자리인덱스는 0부터 시작에 빈 값이 들어온 의도한 것이 범위의 문제입니다 [https://p5js.org/examples/data-variable-scope.html]. [http://p5js.org/reference/#p5/arc] 5번째 자료형 arc'1' MathPI pie' p5jsarc 0번째 자리에는인덱스는 시작에는 숫자가 들어와야 하는데 문자열이 들어왔습니다 `p5_validateParametersFUNCT_NAME ARGUMENTS` `p5prototype_validateParametersFUNCT_NAME 는 검증이 필요한 내부에서 씁니다 목적으로는 사용하는 좋습니다 은 주로 디버깅이나 단위 테스트 목적으로 사용합니다 `color/creating_reading` `core/2d_primitives` `core/curves` `utilities/string_functions` 함수로 구현되어 추가 기능 p5와 디버거로 개발자들을 환영합니다 IDE와 웹 에디터에서 동작합니다 개발자 유의사항 객체를 생성할 파라미터로 사용될 모든 객체는 클래스 선언부에서 `name` 파라미터오브젝트의 이름 값을 지정해야 들면 p5newObject functionparameter thisparameter 파라미터' thisname p5newObject' 허용되는 타입은 `Boolean` `Number` `String` 객체의 이름위의 주요 항목 참고입니다 유형에 배열 파라미터에는 `Array` 쓰세요 경우 특정 타입의 파라미터가 허용되는지예시 `Number[]` `String[]` 설명 섹션에 적습니다 지원되는 이렇습니다 가집니다 `p5Color` `p5Element` `p5Graphics` `p5Renderer` `p5Renderer2D` `p5Image` `p5Table` `p5TableRow` `p5XML` `p5Vector` `p5Font` `p5Geometry` `p5Matrix` `p5RendererGL` p5js에서 p5minjs에서는 기능이 프로세스 속도를 저하시키지 않도록 비활성화되어 검사 코드를 상당히 느리게 할 있습니다일부 최대 배 성능 테스트를 참조하십시오 [friendly error performance test](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/performance/code/friendly-error-system/). 아래 한 줄의 코드로 p5disableFriendlyErrors true // 설정 작업 이렇게 하면 FES에서 저하를 일으키는 부분인자 확인 같은이 비활성화됩니다 성능에 영향을 주지 않는 부분파일 실패 오류나 전역에서 오버라이드 경고 등은 그대로 유지됩니다 알려진 제한사항 프로그램 늦춥니다 옵션에서 true`를 설정하여 축소 버전`p5minjs`에서는 기본 설정이 비활성입니다 FES에서는 오류가 정상으로 처리되는 상황이 발생할 경우는 보통 함수가 설계된 형태와 실제 방식이 일치하지 않을 생깁니다예시 그리기 원래 2D와 3D 설정에서 서로 바꿔 있도록 라인을 그리면 FES에 잡히지 않습니다 `line` 2D 문서에는 패턴이 허용되기 때문입니다 버전의 `_rendererisP3D` 같은 환경 변수를 확인하지 않는다는 의미이기도 const x3 undefined line0 `const` `var` 사용해 선언할 덮어 쓴 전역 변수만 감지할 `let`을 사용했다면 감지되지 `let`이 인스턴스화하는 방식 현재는 해결이 진행 보다 유형을 식별하고 일반화합니다 `bezierVertex` `quadraticVertex` - 필수 초기화하지 않음 `nf` `nfc` `nfp` `nfs` 숫자형 양수 체크 향후 색상 재도입합니다 직관적인 출력합니다 `validateParameters`에 스페인어 번역도 완료합니다 색맹 친화적이 되도록 색상을 정교한 아스키 코드는 언제나 환영입니다 잡습니다 브라우저가 콘솔로 던지는 잡아내면 매우 도움이 될 그것과 일치하는 주석을 볼 코드 조각은 windowconsole 메소드를 기능을 수정하는 새 감싼다 있지 않지만 잘 형식을 갖춘 제공할 있을 것이다 original original_functions log originallog warn originalwarn originalerror [log error]forEachfunctionfunc{ windowconsole[func] functionmsg 래퍼 함수에서 잡아낸 msg'로 무엇인가 처리한 호출하라 original_functions[func]applyoriginal arguments"},"배포 프로세스\n":{"relativeUrl":"/contribute/release_process","description":"## 접근법 * 우리는 `주부수` 버전 패턴을 따르는 유의적 관리 따릅니다 요구사항 Git nodejs NPM이 여러분의 시스템에 설치되어 있어야 합니다 NPM CLI에 로그인 되어 `npm whoami`에 로그인되어 있는지 확인합니다 높은 대역폭 다운로드/풀/푸쉬 할것이 많습니다 총 \\~190MB 예상 사용법 ```shell $ npm run release ``` 빌드 단계가 실행되며 프로세스를 마치려면 `np`에서 제공하는 프롬프트를 따라야합니다 단계에서는 grunt 태스크를 실행해 라이브러리의 zip 버전을 생성하고 bower에서 릴리즈 하고 웹사이트에 해당 레퍼런스를 실제로 일어나는 release`는 [`np`](https://www.npmjs.com/package/np/)를 실행하여 먼저 하위 만들어내는 `grunt release-p5`의 별칭입니다 `np`는 로컬 저장소를 체크하고 릴리즈를 생성하기 위해 설정을 준비하므로써 시작합니다 계속 진행하기 저장소에 커밋이 안된 변경사항이 있으면 안됩니다 `node_modules`를 재설치하고 test`로 테스트를 실행합니다 처음에 선택한 항목에 범프합니다 이전 실패하면 저장소는 release`를 실행하기 전 초기 단계로 돌아갑니다 업데이트된 넘버로 문서와 라이브러리를 빌드하기 `packagejson`안에 `prepublishOnly`에 언급된 태스크가 실행`grunt prerelease` 됩니다 패키지가 게시됩니다 NPM에 출시 `packagejson`에 `files`에 파일들만 태그들과 커밋들을 git remote에 푸쉬됩니다 초안 릴리즈는 수정할 수 있는 변경로그들과 githubcom에 생성됩니다 `lib` 폴더 안에현재 빈 예제가 포함되어 있음 Zip 파일 `p5zip`을 생성하며 위에서 생성한 GitHub Release 초안에 업로드 되어야 프로세스가 완료되면 `release/` 가리키는 창이 열리고 창에는 Github Release의 일부로 업로드해야 하는 모든 파일을 포함하고 있습니다 새로 된 Bower용 [p5.js-release](https://github.com/processing/p5.js-release/) 푸시합니다 참조를 [p5.js-website](https://github.com/processing/p5.js-website/)에 테스팅 대한 푸시 액세스 권한이 경우 release---preview`를 릴리스 간단하게 실행 할 단계를 실행하더라도 추적 파일이 변경되지 않으며 리모트에 푸시되지 않습니다 없는 `packagejson`의 `name` 필드를 네임스페이스 버전으로 편집해야합니다 예를 들면 평소처럼 전에 `@username/p5`을 입력하고 번경사항을 git에 커밋합니다 패키지된 네임스페이스에 패키지를 게시하지 않도록 선택하라는 메시지가 표시되면 온라인에는 아무 것도 게시되지 편집 한 release`로 릴리스의 전체 실행할 잇습니다 Bower 릴리스와 웹 사이트에 복제하고 푸시할 위치를 선택하려며 다음과 추가 인수를 지정 -- --bowerReleaser=username` **참고** `np` `620`에는 현재 패키지 이름으로 릴리스를 막는 [bug](https://github.com/sindresorhus/np/issues/508/)가 존재하며 이것을 테스트해야하는 `521`로 되돌릴 않으면 단계에서 실패합니다"},"스튜어드(Steward) 지침\n":{"relativeUrl":"/contribute/steward_guidelines","description":"{/* p5js에 대한 기여를 관리하고 검토하는 방법에 대해 알아보세요 */} 방금 스튜어드steward로 참여하셨거나 p5js의 숙련된 유지관리자maintainer거나 사이 어딘가에 있으시거나 안내서에는 효과적으로 기여하는 데 도움이 되는 정보는 팁과 요령이 포함되어 있습니다 여기에 작성된 대부분의 내용은 달리 명시되지 않는 한 지침에 불과하므 여기서 보여지는 절차들은 여러분의 작업 흐름에 맞게 조정할 수 ## 목차 * [이슈Issues]/steward_guidelinesmd#issues [버그 보고]/steward_guidelinesmd#bug-report [기능 요청]/steward_guidelinesmd#feature-request 향상]/steward_guidelinesmd#feature-enhancement [토론Discussion]/steward_guidelinesmd#discussion [풀 리퀘스트Pull Requests]/steward_guidelinesmd#pull-requests [간단한 수정]/steward_guidelinesmd#simple-fix 수정]/steward_guidelinesmd#bug-fix [새로운 기능/기능 향상]/steward_guidelinesmd#new-feature-feature-enhancement [디펜다봇Dependabot]/steward_guidelinesmd#dependabot [빌드 과정]/steward_guidelinesmd#build-process [주요 빌드 작업]/steward_guidelinesmd#main-build-task [기타 작업]/steward_guidelinesmd#miscellaneous-tasks [배포 과정]/steward_guidelinesmd#release-process [팁과 요령]/steward_guidelinesmd#tips--tricks [회신 템플릿 Reply templates]/steward_guidelinesmd#reply-templates [깃허브 CLI]/steward_guidelinesmd#github-cli [알림 관리]/steward_guidelinesmd#managing-notifications *** 이슈Issues 우리는 소스 코드 기여가 이슈Issue에서 시작하는 것을 권장하며 이슈는 논의가 이루어지는 곳입니다 문제를 검토할 취해야 할 단계는 문제의 종류에 달라집니다 리포지토리repo는 다양한 유형의 더 잘 정리하고 문제 작성자가 문제에 정보를 제공하도록 권장하기 위해 이슈 템플릿(templates)](https://github.com/processing/p5.js/blob/main/.github/ISSUE_TEMPLATE/)을 사용합니다 첫 번째 종종 입력된 템플릿을 살펴보고 추가 정보가 필요한지 여부를 결정하는 것입니다 일부 필드가 입력되지 않았거나 잘못된 템플릿이 사용되었을 경우 ### 버그 보고 보고는 Found a bug 템플릿template을 사용해야 합니다 보고를 하기 위해서는 다음과 같은 과정이 일반적입니다 재현 템플릿의 목표는 검토자가 버그를 재현할 있도록 충분한 제공하는 보고된 버그가 리포지토리repo와 관련이 없는 p5js 웹사이트 접근 권한이 있다면 연관 리포지토리로 전송합니다 않으면 보고서가 위치할 곳에 답변을 직접 연결되는 링크와 남기고 이슈를 닫습니다 제공되는지 확인하고 제공되는 경우에 설명된 대로 재현을 시도하는 있는 특정 고치는 최선의 방법을 찾기 약간의 필요할 때로는 간단할 수도 있고 까다로울 사례별로 결정을 내릴 때는 [p5js 디자인 원칙]/design_principles/를 참조하세요 수정에 기여할 의향이 코멘트를 남기 이슈에 할당하여 수정을 승인합니다 담당자Assignee 우측에 톱니바퀴 버튼을 사용하세요 기여하기 원하지 가능한지 알아볼 댓글을 남깁니다 해결하려고 시도하거나 해결이 필요한 문제임을 나타내기 `help wanted` 라벨을 추가하여 수정이 표시합니다 템플릿template에 부족하다면 요청합니다 버전 브라우저 OS 테스트 환경이 환경과 또는 환경에서 없다는 의견을 추가하고 설정을 가진 사람에게 버그는 웹 에디터를 사용할 때만 발생하고 로컬에서 테스트할 발생하지 않습니다 [웹 에디터 리포지토리(repo)](https://github.com/processing/p5.js-web-editor/)로 리디렉션해야 나중에 재현이 가능해 2번로 다시 이동합니다 동작이 아니라 사용자가 보고서에 제공한 코드에서 발생한 문서화 구현 친근한 오류 시스템friendly error system을 개선하여 동일한 오류가 않도록 있는지 판단합니다 질문이 있으면 [포럼(forum)](https://discourse.processing.org/) [디스코드(Discord)](https://discord.com/invite/SHQ8dH25r9/) 리디렉션하고 변경사항이 없다면 종결close하세요 기능 요청 요청은 새로운 요청New Feature Request 기능을 요청하기 접근성 향상을 위한 노력의 일환으로 해당 분야에서 역사적으로 소외된 커뮤니티에서 접근성을 높이는 사례가 되어야 자세한 [이 곳]/access/에서 볼 요청에 향상Increasing Access 충분히 않은 작성자에게 기능이 높이는지 질문할 기능의 설명은 검토자를 포함한 커뮤니티의 구성원이 제공할 기준에 포함 평가할 프로젝트 범위와 [디자인 원칙]/design_principles/에 적합한가요 예를 들어 기본 도형을 추가하는 고려될 있지만 기반 IOT 프로토콜 고려 범위에서 벗어날 가능성이 높습니다 전반적으로 범위는 드물게 사용되는 기능으로 인한 과도한 팽창을 피하기 상대적으로 범위가 좁아야 범위에 맞지 애드온 라이브러리addon library로 만들도록 제안합니다 맞는지 불분명한 개념 증명 차원에서 library를 제안하는 것도 좋은 방법입니다 이는 사용자에게 제공하고 쓰임새와 중요성에 구체적인 예시를 제공하며 완전히 통합된 기능처럼 해결책이 완벽할 필요는 없습니다 적합하다고 판단될 내에 통합될 이전 버전과 호환성이 변경breaking changes의 원인이 될 있나요 기존 함수 변수와 충돌이 발생하나요 기존에 p5js로 일반적인 스케치와 충돌하요 위와 충돌을 일으킬 기능들은 변경으로 간주됩니다 배포](https://docs.npmjs.com/about-semantic-versioning/)가 변경을 만들지는 제안된 이미 간단한 순수 자바스크립트 코드나 기존의 사용하기 쉬운 라이브러리를 사용하여 만들어질 문자열 배열을 연결하기 `join[Hello world]`보다는 문법인 `[Hello world]join`가 우선시됩니다 요구 사항과 나머지 사항이 충족된 PR을 시작하기 전에 최소 2명의 스튜어드 유지관리자가 요청을 승인해야 기능에 PR 검토 과정은 아래에 설명되어 향상 향상Existing Enhancement 요청과 매우 비슷합니다 가끔 향상의 차이가 명확하지 않을 향상은 주로 다루지만 추가하도록 요청할 마찬가지로 경우에만 허용됩니다 [위 섹션](http://guidelines.md#feature-request)의 1번 항목을 참고해주세요 향상에 기준은 요청의 경우와 비슷하지만 잠재적으로 changes을 특히 주의해야 함수를 수정하는 모든 이전의 유효하고 문서화된 시그니처function signature 함수의 원형에 명시되는 매개변수 리스트가 방식으로 동작해야 PR이 시작되기 적어도 명의 유지관리자의 승인을 받아야 문서화되어 토론Discussion 토론Discussion을 가지고 있으며 것으로 통합하기 주제에 피드백을 모으는 데에 사용되어야 종류의 토론 대화가 끝나고 문제가 생성되면 종료될 이슈가 토론으로 열려 것들은 올바른 적용하고 없애야 버그에 포함되지 않았다면 요청해야 이가 열렸지만 기여와 없거나 깃허브 리포지토리repository/기여 과정/기여 커뮤니티와 포럼forum 디스코드Discord로 리디렉션하고고 닫아야 경우에는 눈에 토론인지 알 있게 표시하기 추가해야 풀 Requests 리포지토리repository에 기여는 리퀘스트pull request를 통해 이루어집니다 스튜어드와 유지관리자는 리포지토리에 푸시push 기여 시 똑같이 > 과정을 거치도록 권장합니다 같습니다 리퀘스트 템플릿은 곳](https://github.com/processing/p5.js/blob/main/.github/PULL_REQUEST_TEMPLATE.md)에서 확인할 리퀘스트는 먼저 관련 열고 논의해야 [이슈 절차workflow]/steward_guidelinesmd#issues를 따른 뒤에 스튜어드나 검토해야 절차가 적용되지 유일한 경우는 오타 수정 뿐이며 열 필요가 없고 분야의 스튜어드가 아니더라도 병합merge 사람이 병합할 예외가 존재하지만 기여자들이 열도록 적용될지 모르겠다면 어쨌든 열어보세요 제시된 리퀘스트를 해결되지 원본 게시물post의 Resolves #OOOO를 Addresses #OOOO로 수정하여 병합 시에 자동으로 닫히지 않게끔 수정은 누구나 PR의 변경된 파일Files Changed 탭에서 자동 지속적 통합Continuous Integration CI 테스트를 통과하는지 확인하세요 [The files changed tab when viewing pull request on GitHub]src/content/contributor-docs/images/files-changedpng All checks have passed indicator GitHub highlighted above the merge button]src/content/contributor-docs/images/all-checks-passedpng 스튜어드에 검토되어야 하며 이상적으로는 이슈의 승인한 이를 수행해야 탭을 토론discussion에 되었는지 최초로 PR은 가능하고 적절하다면 테스트해야 CLI는 간소화하는 많은 아래의 요령]/steward_guidelinesmd#tips-tricks에 [ ] 원래의 해결해야 이슈에서 합의되지 동작을 변경해서는 안됩니다 성능에 큰 영향을 주지 않아야 접근성에 영향도 최신 표준 코딩을 수정사항은 자동화된 통과해야 하고 새 포함해야 변경 곳](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/commenting-on-a-pull-request#adding-line-comments-to-a-pull-request)에 행에 줄별 주석line comments을 제안 블록suggestion block으로 사항을 제안할 있습니다\\ Suggest Change button while writing comment code in request]src/content/contributor-docs/images/suggest-changepng\\ [A suggested change appearing within fences with suggestion tag]src/content/contributor-docs/images/suggested-value-changepng\\ previewed as diff]src/content/contributor-docs/images/suggestion-previewpng 여러 번 변경이 줄 주석single-line 추가하지 마세요 대신 곳](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/reviewing-proposed-changes-in-a-pull-request/)에 절차에 주석multiple-line comments과 번의 요청으로 변경하세요 comments이 설명이나 토론을 것이라면 요청Request changes 답글Comment을 선택해 주세요\\ option circled Finish Review menu]src/content/contributor-docs/images/comment-reviewpng 검토되고 필요하지 스튜어드는 댓글이 있든 없든 단계에서 승인Approve 옵션을 선택하여 승인Approved으로 표시할 그런 원한다면 유지관리자에게 검토를 병합하거나 병합을 기여자를 [README.md](http://readme.md/) 파일의 기여자 목록에 추가하려면 @[all-contributors](https://allcontributors.org/docs/en/emoji-key/) 봇을 호출해야 각각의 유형은 `[contribution` `type]`에 전체 목록은 위 링크에서 [images/suggest-changepng]src/content/contributor-docs/images/suggest-changepng [images/suggested-value-changepng]src/content/contributor-docs/images/suggested-value-changepng [images/suggestion-previewpng]src/content/contributor-docs/images/suggestion-previewpng `@all-contributors` `please` `add` `@[GitHub` `handle]` `for` `type]` 수정과 가지 주목해야 차이점이 병합merge되기 두 검토와 디펜다봇Dependabot 보통 리포지토리의 관리자admins에게만 표시되므로 여러분에게 해당하지 않는다면 섹션을 건너뛰어 주세요 [유의적 버전(semver)](https://semver.org/) 패치patch 업데이트면서 통과한 Dependabot 병합merge될 디펜다봇 유의적 버전의 경미한 다루는 테스트만 통과하면 병합될 빠르게 업데이트된 종속성dependency의 기록changelog을 확인하는 것이 좋습니다 주요 과정이나 검토자reviewer는 가능하면 버전부터 대상 버전까지의 기록을 검토하고 로컬 테스트하여 정상적으로 작동하는지 확인합니다 종속성의 호환성 대비에 제출합니다 Nodejs는 오래된 버전에 공식 지원을 중단하기 꽤나 종속성이 충돌합니다 종속성 API 것은 아닙니다 과정 섹션에서는 설정이나 명령어는 다루지 않고 뒤에서 일이 일어나고 자세히 설명합니다 Gruntfilejs 파일에는 정의들이 라이브러리와 문서를 구축하는 사용된 도구 중에는 Grunt Browserify YUIDoc ESLint Babel Uglify Mocha가 이게 다는 `default` 작업으로 거기서부터 거꾸로 작업하는 우리에게 도움될 시점에는 설명을 따라가며 Gruntfilejs를 열어보는 ``` gruntregisterTask'default' ['lint' test'] `grunt` npm 스크립트 `npm test`를 열었을 `lint`와 `test`로 구성된 작업이 실행됩니다 #### `lint` gruntregisterTask'lint' ['lintsource' lintsamples'] 작업은 하위 구성됩니다 `lintsource` `lintsamples` 는 ESLint를 스크립트를 `eslintbuild` `eslintsource` `eslinttest`의 세 나뉩니다 `yuidocprod` `cleanreference` `minjson`로 `yui` 작업을 실행합니다 코드로부터 추출하여 JSON 문서로 변환합니다 사용되지 파일을 제거하며 생성된 `dataminjson` 최소화합니다 다음은 `eslint-samplessource`로 [/tasks/build/eslint-samplesjs]/tasks/build/eslint-samplesjs에 정의되어 사용자 작성 작업입니다 문서 예제 코드가 부분와 코딩 규칙을 따르는지 확인하기 실행할 예제를 린트lint하기 빌드해야 `yui`는 `test` ```js gruntregisterTask'test' build' connectserver' mochaChrome' mochaTest' nycreport `build` 살펴보겠습니다 gruntregisterTask'build' browserify' browserifymin' uglify' browserifytest `browserify`로 작업들은 [/tasks/build/browserifyjs]/tasks/build/browserifyjs에 비슷한 단계로 되어 파일에서 하나로 빌드하는 단계입니다 `browserify`는 p5js를 반면 `browserifymin`는 최소화할 중간 파일들을 빌드합니다 `browserify`와 `browserifymin`의 차이점은 `browserifymin`에는 FES가 작동하는 데이터가 있지 않다는 `uglify`는 `browserifymin` 출력 가져와 최종적으로 p5minjs로 단계의 구성은 메인 Gruntfilejs에 `browserifytest`는 [Istanbul](https://istanbul.js.org/)을 p5js와 버전으로 빌드됩니다 단 커버리지test coverage 추가된 코드를 `fsreadFileSync` nodejs 전용 코드의 사용은 `brfs-babel`을 실제 내용으로 대체됩니다 WebGL 별도의 파일로 셰이더shader 삽입inline하기 사용됩니다 node\\_modules의 종속성dependency을 Babel을 packagejson에서 정의된 Browserslist 사항에 맞춰 트랜스파일transpile하고 ES6 import문import statement을 browserify가 이해하는 CommonJS require로 호환성에 걱정 없이 이상에서 구문syntax을 됩니다 번들링bundling 후 번들링된 파일에 기록되기 전까지 코드는 `pretty-fast`를 전달됩니다 최종 포맷이 일관되도록 정리되어야 원하는 읽고 검사할 있을 예상됩니다 세부 단계가 나와 위에 링크된 browserify 정의 확인하여 내용을 connectserver 단계에서는 파일과 빌드된 호스팅하는 서버를 가동하여 크롬Chrome에서 mochaChrome [/tasks/test/mocha-chromejs]/tasks/test/mocha-chromejs에 Puppeteer를 사용해 원격 제어가 가능한 크롬의 헤드리스 버전을 가동하고 `/test` 폴더에 HTML 관련된 여기에는 라이브러리의 축소되지 축소된 단위 테스트unit test 모음에 테스트하는 레퍼런스 mochaTest 크롬 nodejs에서 실행되고 중 일부만 테스트한다는 점에서 `mochaChrome`과 기능은 필요하므로 세트는 테스트에 확장해야 마지막으로 빌드와 테스트가 완료되면 `mochaChrome`이 라이브러리 커버리지 보고서를 수집하고 범위 데이터를 콘솔에 출력합니다 커버리지는 추가적인 데이터 포인트를 모니터링하고 확보하는 100%를 목표로 하지는 여기까지 기본적인 환경 구성configuration 다루어 보았습니다 `npx grunt [step]`으로 위에서 다루지는 않았지만 상황에서 유용할 작업도 yuidev 빌드를 실행한 가동합니다 서버는 [http://localhost:9001/docs/reference/](http://localhost:9001/docs/reference/)와 기능적으로 유사한 페이지를 제공합니다 변경점을 문서와 `yuidev`는 인라인 문서의 유용한데 저장소repository에서 저장소로 이동할 필요도 생길 때마다 웹사이트를 빌드할 없기 때문입니다 브라우저에서 단순화된 변경사항을 미리 보면 이렇게 하면 웹사이트에 올바르게 표시되는지 해당된다는 알아두세요 스타일 레이아웃 페이지 자체에 변경사항은 저장소에서 생성 watch watchmain watchquick 워치Watch 감시하고 실행하여 레퍼런스나 범위의 차이를 제외하면 수행합니다 `watch` 감지할 실행하는 것처럼 보일 거예요 `watchmain` 실행하지만 감지해도 레퍼런스를 빌드하지는 `watchquick` 감지된 중인 내용에 가장 효율적인 워치watch 방식을 선택한다면 변경사항마다 수동으로 빌드하지 않아도 배포 [release\\_processmd]/release_process/를 요령 때때로 검토가 이슈와 수가 너무 많아질 보다 용이한 가지를 알려드립니다 회신 양식 Template 리퀘스트에 작성을 돕는 깃허브GitHub 기능인 [저장된 회신Saved Replies)](https://docs.github.com/en/get-started/writing-on-github/working-with-saved-replies/about-saved-replies/)이 흐름workflow 일부는 동일하거나 답변포럼으로 질문을 리디렉션하거나 승인 등으로 PR에 응답해야 있는데 **저장된 회신**을 사용하면 작업의 효율이 올라갈 유지관리자maintainer가 사용하는 회신**의 일부입니다 사용하거나 만들어 보세요 ##### 종결Closing 없음 We're not able to reproduce this but please feel free reopen if you can provide sample that demonstrates issue Thanks 이것을 수는 없지만 보여줄 샘플 열어주세요 감사합니다 스니펫 필요 I'm closing for organizational purposes Please snippet illustrates 조직 운영 관리 종결합니다 설명하는 스니펫을 포럼 사용 The issues here are good place bugs and library itself For questions about your own tests or following tutorials [forum](https://discourse.processing.org/) is best post 자체의 버그나 올리는 튜토리얼에 것에 싶다면 [포럼](https://discourse.processing.org/)만한 곳이 없을 거에요 GSOC discuss proposals our [forum](https://discourse.processing.org/c/summer-of-code/). 제안을 논의하고 우리의 [포럼](https://discourse.processing.org/c/summer-of-code/)만한 없답니다 seeing lot of interest feature we don't clear explanation how it [expands access]/access/ so I will close now If an access statement be added welcome 기능으로부터 이점을 찾을 [접근성을 확장]/access/하는지에 명확한 설명이 없으므로 종결하겠습니다 추가할 되면 언제든지 We do see further more detailed Thank 이슈로 인해 [접근성이 확장]/access/되는지에 애드온Addon 부가 think function beyond scope try keep minimal possible could great starting point addon See docs create [https://github.com/processing/p5.js/blob/main/contributor\\_docs/creating\\_libraries.md](../creating_libraries/) 범위를 벗어나는 같지만 최소한의 크기를 유지하고 싶어요 만드는 시작점이 애드온을 생성하는 알고 확인해 필요함 As reminder need opened before requests tagged This necessary tracking development keeping discussion 참고로 게시하고 태그를 지정하기 게시해야 개발을 추적하고 명확하게 유지하는 필요해요 해결 You go ahead fix 계속 해결해도 Looks 괜찮아 보이는데요 CLI 복잡한 여러분이 git 명령어로 가져오면 어려울 다행히도 CLI](https://cli.github.com/)가 과정에서 도움을 있겠군요 CLI를 설치하고 로그인하고 `gh pr checkout [pull_request_id]` 명령어를 실행하면 가능하며 포크 가져오기 브랜치 체크아웃 수행됩니다 main 브랜치로 돌아가는 `git main`으로 브랜치를 전환하는 것과 방문하지 않고도 CLI에서 남길 CLI에는 수많은 명령어가 사용하기에 도구입니다 알림 이슈나 **이슈** **풀 리퀘스트** 저장소 이름 반대편 상단에 눈 아이콘이 **보기Watch** 클릭하여 저장소를 [Cropped screenshot top right corner repository page showing series buttons center from left Sponsor Watch Fork Starred]src/content/contributor-docs/images/github-repo-metricspng 보기를 활성화하면 핸들에 언급 구독한 활동과 이벤트가 페이지](https://github.com/notifications/)에 알림으로 전송되며 이메일의 받은 편지함과 비슷하게 *읽음* *삭제됨* 표시될 보기가 활성화된 저장소에 이메일을 GitHub로부터 수신할 설정 페이지](https://github.com/settings/notifications/)에서 아예 구독 취소하는 방식에 맞는 선택하는 여러분은 사안을 찾아내야 하는 귀찮음과 깃허브의 끝없는 압박 사이의 선택지에 서 균형 잡힌 선택이 필요한데 처음이라면 **이슈**와 리퀘스트**에 **보기**를 활성화하고 참여 @멘션 정의에 이메일만 수신하도록 설정하는 추천합니다"},"단위 테스팅\n":{"relativeUrl":"/contribute/unit_testing","description":"단위 테스트를 사용하여 코드베이스의 개별 컴포넌트가 예상대로 작동하는지 확인합니다 ## 참조 비슷한 기술 스택과 [빠르고 좋은 테스팅 소개](https://codeburst.io/javascript-unit-testing-using-mocha-and-chai-1d97d9f18e71/)가 있고 [좀 더 깊이 살펴 볼수 있는 자료](https://blog.logrocket.com/a-quick-and-complete-guide-to-mocha-testing-d0e0ea09f09d/)가 있습니다 모든 테스트 실행하기 루트 레파지토리에서 커맨드를 터미널에서 사용해주세요 ```shellsession npm test ``` 커버리지 테스가 실행될때 마다 보고서가 생성됩니다 보고서에는 스위트가 소스 코드 파일을 테스트해 보았는지 자세히 설명하여 많은 코드베이스를 테스트했는지 효과적으로 알려줍니다 요약본은 실행하고 난 뒤에 출력되며 상세한 보고서는 웹브라우저에나 `coverage/indexhtml`에서 볼 수 맥 커맨드라인에서 `open coverage/indexhtml`를 실행하면 디폴트 브라우저에 해당 페이지가 열립니다 커맨드 `npx nyc report --reporter=text`를 사용하고 후 리포트를 ### 단윌 스위트 실행 단일 테스트나 그룹 위해 `js` 파일에 `suite` `test`에 `only`를 붙이고 위에 명령어를 사용해 실행합니다 **`only`를 커밋하지 않도록 주의해주세요**저희는 항상 CI가 *모든* 실행하기를 원합니다 #### 예제 p5ColorConversion 스위트를 `test/unit/color/color_lightjs`의 첫 행을 다음과 변경합니다 ```js suiteonly'color/p5ColorConversion' function { 이제 `npm test`를 사용하면 `function`내에서만 테스트가 실행됩니다 건너뛰기 기능은 `only` 반대입니다 `skip`을 추가하면서 Mocha가 케이스들을 무시하도록 할 있으며 건너뛴 항목은 보류 중으로 표시되고 이대로 보고됩니다 인프라 프레임워크 구조화하고 [mocha](https://mochajs.org)를 사용합니다 [chai의 `assert` `expect`)](https://www.chaijs.com/api/assert/)를 코드의 작동 방식에 대한 문장을 작성합니다 환경 브라우저에서 실행되는 `test/unit` 폴더 아래 모음과 Nodejs에서 `test/node` 컬렉션이 브라우저 테스트는 [headless Chrome](https://developers.google.com/web/updates/2017/06/headless-karma-mocha-chai/)에서 실행할 창이 나타나지 않습니다 설정 헬퍼 함수 현재 테스트에서만 사용할 있습니다대부분의 위치 * `test/js/mocha_setupjs` mocha의 몇가지 옵션을 `test/js/chai_helpersjs` chai `chaiassert` 도움되는 추가 `test/js/p5_helpersjs` p5 스케치의 도와주는 Nodejs를 위한 설정은 `test/mochaopts`에서 수행됩니다 지속적인 통합 p5js 풀리퀘스트를 오픈하면 자동으로 [테스트가 실행]/ttps//githubcom/processing/p5js/actions/ 됩니다 이를 통해 기여자의 추가적인 작업 없이 풀 리퀘스트 대해 통과했는지 재확인할 [Codecov](https://codecov.io/github/processing/p5.js)에 리포트가 업로드 단위테스트를 추가하고 싶다면 컴포넌트에 파일이 이미 존재하는지 확인해 보세요 `src/`에서 주어진 `test/unit`과 같은 경로에 있습니다예를 들면 `src/color/p5Colorjs`의 `test/unit/color/p5Colorjs`안에 찾을 없다면 아마 없기 때문일 것이기에 아직 😉 컨벤션에 새로운 생성합니다 작성하고 모듈이 동작하기위해 브라우저가 필요하다면 `test/unit`안에 넣고 싶지만 않다면 아래에 추가할 **의심이 든다면 `test/unit`에 추가하면 됩니다추후 필요한 경우 이동하는 편이 매우 쉽습니다** 모듈을 추가해야 `test/unit/specjs`안 `spec`배열의 두어야 합니다 부분은 실행에 로드되어 있는지 `test/testhtml` 보면서 테스트들을 확인 작성 단위를 선택하세요 메소드 또는 변수 예제로 `p5prototypeisKeyPressed`를 봅시다 작성하기 전에 메소드의 예상되는 동작을 이해할 필요가 **예상되는 동작** boolean 시스템 변수는 키를 누르는 참이고 누르지 않으면 거짓입니다 동작에 다양한 생각할 잇습니다 가능한 케이스는 같습니다 변수가 boolean이다 누르면 참이어야 한다 키알파벳 키 숫자 특수문자 등를 누르더라도 여러 거짓이어야 생각나는 것이 있다면 계속해서 추가하세요 생성하고 작성할 구성하기 mocha를 것입니다 suite'p5prototypekeyIsPressed' test'keyIsPressed is a boolean' //이곳에서 } true on key press' false when no keys are pressed' 구성했지만 작성하지 않았습니다 chai의 assert를 다음을 고려해 assertisBooleanmyp5keyIsPressed //해당 값이 boolean인지 유사하게 참인지 확인하기 `assertstrictEqualmyp5keyIsPressed true` 사용 assert에 [여기](https://www.chaijs.com/api/assert/)에서 좀더 했으므로 메소드가 확인해보세요 동일한 이슈를 원한다면 문제를 해결"},"WebGL 기여 안내\n":{"relativeUrl":"/contribute/webgl_contribution_guide","description":"{/* p5js WebGL 모드에서 소스 코드 작업을 시작하는 방법 */} 여러분이 페이지를 읽고 있다면 아마도 모드에서의 작업에 도움을 주고 싶으신 것이겠죠 여러분의 기여에 다시 한 번 감사의 말씀을 드립니다 페이지에서는 기여가 구성되었는지를 설명하고 변경사항을 만들기 위한 가지 팁을 제공합니다 ## 참고 자료 * p5js의 모드가 기반으로 하고 있는 2D 모드와 다른지 이해하려면 [p5js 모드 아키텍쳐]/webgl_mode_architecture/를 읽어보세요 셰이더 선 등에 대한 구현 세부 사항에 가치 자료가 됩니다 문제 생성 코드베이스codebase 원천 모음 설정 변경 사항 테스트에 정보가 필요하다면 [기여자 가이드라인](https://p5js.org/contributor-docs/#/./contributor_guidelines/)을 브라우저의 API에 대해 알아두면 도움이 될 수 있는데 [WebGL fundamentals](https://webglfundamentals.org/)에서 많은 핵심 렌더링 개념에 검토할 있습니다 [The Book of Shaders](https://thebookofshaders.com/)에 셰이더에서 사용되는 기술들이 설명되어 계획 [깃허브GitHub 프로젝트](https://github.com/orgs/processing/projects/5/)에 게시된 이슈issue를 정리하고 다음과 같은 유형으로 나누었습니다 **시스템 차원 변경사항 System-level changes** 란 코드에 광범위한 영향을 미치는 장기적 목표입니다 이것은 실행에 옮기기 전 수많은 논의와 계획을 필요로 합니다 **아직 해결책이 없는 버그 Bugs with no solution yet** 원인을 줄이기 약간의 디버깅이 필요한 신고입니다 아직 해결될 준비가 되어 있지 않으며 원인이 발견되면 이를 고치기 최고의 해결책을 논의할 있게 **해결책이 있지만 PR이 solutions but PR** 는 해결할 지 결정되었으며 누구나 자유롭게 코드를 작성할 **경미한 개선 Minor enhancements** 이란 현재의 아키텍쳐 내에서 확실한 위치를 가지는 새로운 기능에 이슈이며 맞출 것인지에 논의를 하지 않아도 기능이 가치가 있다고 동의하면 **2D 기능 features** p5js에는 모드에는 기능입니다 기능은 모드의 동작과 일치하는 결과물이 구현될 것으로 예상됩니다 최적의 구현에 필요가 이에 사용자 요구 사항은 명확합니다 **모든 환경에서 작동하지 않는 Features that don't work in all contexts ** 모드에 존재하지만 모드를 사용할 모든 방식으로 작동하지는 예를 들어 일부 메소드는 좌표계와 3D 좌표계에서 작동하지만 사용하면 중단될 수도 보통은 시작할 **기능 요청 Feature requests** 요청을 말합니다 요청이 지침에 맞는 것인지 확인하기 위해서는 논의가 필요합니다 **문서화 Documentation** 이슈는 변경이 필요하지 않지만 대신 동작을 위해 더 잘 문서화하는 것이 이슈입니다 어디에 넣어야 하나요 WebGL과 관련된 것은 `src/webgl` 하위 디렉토리에 해당 디렉토리 최상위 조명을 설정하는 명령어는 `lightingjs`로 재질을 `materialsjs`로 주제 영역에 여러 파일로 나뉘었습니다 지향 클래스를 구현할 클래스당 만드려고 노력하고 파일들은 때때로 개의 내부 보조 기능utility 가질 `p5Framebufferjs`는 `p5Framebuffer` 포함하고 추가로 메인 클래스의 프레임버퍼 관련 클래스로 구성됩니다 파일에는 추가적인 클래스도 들어갈 `p5RendererGL`은 처리하는 대형 클래스입니다 하나의 클래스 파일이 아닌 영역인지에 `p5RendererGL`을 분할한 파일과 파일에 무엇이 있는지는 같습니다 #### `p5RendererGLjs` 초기화 `p5RendererGLImmediatejs` **즉시 immediate mode** 드로잉`beginShape`나 `endShape`와 보관 재사용되지 않을 모양과 `p5RendererGLRetainedjs` **보류 retained 드로잉`sphere`와 재사용을 저장된 `materialjs` 혼합 관리 `3d_primitivesjs` `triangle`과 도형을 그리는 함수 함수들은 도형의 기하학적 구조를 정의합니다 그런 렌더링은 또는 `p5RendererGLImmediatejs`에서 발생하며 형상 입력을 일반 모양으로 취급합니다 `Textjs` 글자 렌더링을 테스트 ### 일관성 함수를 방법은 가지가 것을 수동으로 확인하는 어려우므로 가능한 곳에 단위 테스트unit test를 추가합니다 그래야 변경점이 생겨도 테스트를 통과한다면 아무 문제가 발생되지 않았다고 확신할 있기 때문입니다 새 추가할 모드에서도 작동하는 경우 일관성을 중 하나는 픽셀 두 동일한지를 것입니다 다음은 테스트의 예시 하나입니다 ```js test'coplanar strokes match 2D' function { const getColors = functionmode myp5createCanvas20 mode myp5pixelDensity1 myp5background255 myp5strokeCapmyp5SQUARE myp5strokeJoinmyp5MITER if === myp5WEBGL myp5translate-myp5width/2 -myp5height/2 } myp5stroke'black' myp5strokeWeight4 myp5fill'red' myp5rect10 myp5fill'blue' myp5rect0 myp5loadPixels return [myp5pixels] assertdeepEqualgetColorsmyp5P2D getColorsmyp5WEBGL ``` 안티앨리어싱계단 현상 방지 기술 antialiasing을 끌 없고 안티앨리어싱은 종종 다르기 항상 코드가 않습니다 x축 y축 상의 직선에 대해서는 작동합니다 전용이라면 결과물을 비교하기보다는 픽셀을 확인해서 색상이 예상한 색상인지 경우가 많습니다 언젠가는 픽셀이 예상 결과물의 전체 이미지 스냅샷을 비교하는 보다 강력한 시스템으로 전환할 있겠지만 현재로서는 색상을 예시가 test'color interpolation' renderer myp5createCanvas256 // upper color lower expected center myp5beginShape myp5fill200 myp5vertex-128 -128 myp5vertex128 myp5fill0 myp5endShapemyp5CLOSE assertequalrenderer_useVertexColor true assertdeepEqualmyp5get128 [100 255] 성능 p5js가 가장 걱정하는 부분은 아니지만 성능을 크게 저하하지 않도록 보통 변경사항이 적용된 것과 적용되지 않은 스케치를 생성해서 이루어지고 프레임 속도를 비교합니다 측정에 조언을 드리자면 스케치 상단에서 `p5disableFriendlyErrors true`로 친절한 오류를 비활성화해 보세요 오류 메시지가 `p5minjs`를 테스트해보세요 안정적인 명확하게 파악하기 평균 표시해 let frameRateP avgFrameRates [] frameRateSum numSamples setup createP frameRatePposition0 draw rate frameRate / avgFrameRatespushrate += avgFrameRateslength > -= avgFrameRatesshift frameRatePhtmlroundframeRateSum + avg fps' 파이프라인의 부분에 스트레스를 주기 해야 하는 가지의 매우 복잡한 모양 대용량의 모델이나 긴 곡선 수의 단순한 for 반복문에서 호출되는 `line`"},"p5.js WEBGL 모드 아키텍쳐\n":{"relativeUrl":"/contribute/webgl_mode_architecture","description":"문서는 p5js 기여자 메인테이너 이해 관계자를 위한 p5js의 WEBGL 모드의 구조를 설명합니다 스케치에서 3D 그래픽을 사용하는 데 관심이 있다면 대신에 [튜토리얼 보기](https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5/)를 참조해주세요 ## 구조 객체에 대한 개요 아키텍처의 핵심 객체는 p5RendererGL p5Shader p5Texture p5Geometry입니다 p5RendererGL의 단일 인스턴스는 자체 p5Shaders p5Textures p5Geometry를 관리하며 p5Geometry—a 목표는 WebGL을 사용하여 오프스크린 렌더링을 허용하는 것이지만 아직 테스트되지 않았습니다 쉐이더와 텍스쳐는 렌더러를 통한 특정 GL 컨텍스트와 관련이 있습니다 ### WEBGL/3D 모드 용 렌더러입니다 p5Renderer에서 파생되었으며 2D 모드에서 사용할 수 없는 추가 기능 예를 들명 `box` `cone` 쉐이더의 사용 가속 텍스처 렌더링 조명에 기능을 제공합니다 * 쉐이더p5Shader 객체 텍스처p5Texture 객체를 관리 생성 캐쉬합니다 쉐이더에서 속성 배열로 도형의 좌표를 준비합니다 획 채우기 텍스쳐 다양한 조명 메서드가 호출 될 올바른 쉐이더를 선택한 해당 적절한 정형을 데이터 유지 사용되는 유형의 조명과 파라미터의 개수입니다 begin/endShape로 생성된 모양은 고정 에서3D 기본 지오메트리를 캐시하며 그릴 때마다 동적으로 생성되어 즉시모드에서 GL에 푸시됩니다 렌더러는 현재 그리기 조건에 적합한 p5Shader를 선택하는 것을 관리합니다 p5Shader클래스는 프로그램의 정형과 속성에 액세스를 vertex 프래그먼트 쉐이더 컴포넌트를 컴파일하고 연결합니다 정형에 액세스하고 설정하기위한 API를 쉐이더가 모양을 하기 전에 필요한 텍스처를 바인딩합니다 렌더링에 bindShader 메서드를 제공하고 그린 후에는 unbindShader 섹션에서 설명 된 것처럼 4개의 `p5Image``p5MediaElement``p5Element` 또는 `ImageData`를 바탕으로 텍스처의 상태를 유형에 이미지 처리를 내부적으로 처리하기때문에 p5Renderer 구현은 다룰때 메서드에서 특별한 예외를 만들 필요가 없습니다 데이터가 변경되었는지 여부를 잘 추측하면서 모든 프레임을 조건부로 업데이트합니다 성능을 높이기 위해 변경 사항이 경우 업로드하지 않습니다 p5Geometry 객체의 캐시에 객체로 저장됩니다 그려진 모양과 매개 변수를 기반으로 문자열을 매핑합니다 `box70 20`로 만든 상자의 지오메트리는 `'box|70|80|90|10|20'` 첫번째 단계에서 보유하고 있는 함수를 호출해 만들고 앞서 언급 한 문자열 ID를 지오메트리 해시에 저장합니다 추후 해시안에서 찾아 호출하고 찾았을 새 만드는 대신 기존 참조하여 사용합니다 요소에 꼭지점 법선 면 선 세트에 법선을 계산하는 방법을 모드로 속성은 렌더러의 저장되고 드로잉 컨텍스트에 그리는데 후 폐기됩니다 고정된 원형에 반면 모드는 모양에 사용됩니다 | 함수 ------------ ----------------- plane bezier box curve sphere line cylinder beginShape cone ellipsoid endShape torus point triangle curveVertex arc bezierVertex quadraticVertex ellipse rect quad text 필요에 배열을 텍스처는 `texture` 메서드와 비디오용으로 생성되거나 커스텀 쉐이더에 제공되는 정형으로 생성됩니다 렌더러에 텍스쳐가 먼저 주어진 이미지/비디오에 텍스처가 생성되었는지 확인한 텍스쳐를 찾을 경우에만 새로운 유형 #### 색상 색상에 평평한 음영을 쉐이더조명 텍스처용 다음을 `ambientLight` `directionalLight` `pointLight` `spotLight` `specularColor`에 설정된 변수 `ambientMaterial` `emissiveMaterial` `specularMaterial`에 재질 `texture`로 설정 일반 쉐이더는 `normalMaterial`이 중일 설정됩니다 표면의 정규 벡터를 색상을 결정합니다 매개변수 표준 모델 뷰 카메라 정형 Parameter Line Shader TexLight Color Normal Point --------------------------------- ----------- --------------- ------------- `uniform mat4 uModelViewMatrix` x uProjectionMatrix` vec4 uViewPort` uPerspective` ------------------------------ `attribute vec3 aPosition` aNormal` vec2 aTexCoord` mat3 uNormalMatrix` aDirection` float uStrokeWeight` uMaterialColor` aVertexColor` --------------------------------------------- int uAmbientLightCount` uDirectionalLightCount` uPointLightCount` uSpotLightCount` uAmbientColor[8]` uLightingDirection[8]` uDirectionalDiffuseColors[8]` uDirectionalSpecularColors[8]` uPointLightLocation[8]` uPointLightDiffuseColors[8]` uPointLightSpecularColors[8]` uSpotLightAngle[8]` uSpotLightConc[8]` uSpotLightDiffuseColors[8]` uSpotLightSpecularColors[8]` uSpotLightLocation[8]` uSpotLightDirection[8]` bool uSpecular` uEmissive` uShininess` uUseLighting` uConstantAttenuation` uLinearAttenuation` uQuadraticAttenuation` ----------------------------- sampler2D uSampler` isTexture` ---------------------------- uResolution` uPointSize` ----------------------------------- `varying vVertexNormal` vVertTexCoord` vLightWeighting` highp vColor` vStrokeWeight` 단계 커밍 쑨"}},"examples":{"기본 조형":{"relativeUrl":"/examples/shapes-and-color-shape-primitives","description":"프로그램은 기본 도형의 함수인 square rect ellipse circle arc line triangle and quad 사용을 보여주고 있습니다"},"색상":{"relativeUrl":"/examples/shapes-and-color-color","description":"색상을 추가하여 기본 조형 예제를 확장해 봅시다 background는 캔버스를 하나의 색상으로 채우고 stroke는 그려지는 윤곽선의 정하며 fill은 도형 내부의 정합니다 noStroke와 noFill은 색상과 채우기 없앨 수 있습니다 색상은 다양한 방법으로 표현될 있으며 예제는 가지의 옵션을 보여주고"},"윤곽선 그리기":{"relativeUrl":"/examples/animation-and-variables-drawing-lines","description":"마우스를 클릭하고 드래그하여 윤곽선을 그려봅시다 예제는 가지 내장된 변수의 사용을 보여줍니다 mouseX와 mouseY는 현재 마우스 위치 정보를 가지며 이전 위치는 pmouseX와 pmouseY를 이용해 가져올 수 있습니다 * colorMode에서 HSB색조-채도-밝기 방식을 사용하여 첫번째 변수가 색조를 설정하는 것도"},"이벤트가 있는 애니메이션":{"relativeUrl":"/examples/animation-and-variables-animation-with-events","description":"예제는 loop와 noLoop를 사용하여 애니메이션을 일시정지하고 재개하는 방법을 보여줍니다 마우스를 클릭하면 애니메이션 반복이 전환됩니다 정지되면 사용자는 아무 키나 눌러 한 프레임을 넘길 수 있습니다 참고 키를 누르는 이벤트가 제대로 전달되기 위해 캔버스에 포커스를 두려면 캔버스를 클릭해야 합니다 하나의 넘기기 위해서는 redraw를 호출할 있는데 draw 함수가 번 호출됩니다"},"모바일 기기의 움직임":{"relativeUrl":"/examples/animation-and-variables-mobile-device-movement","description":"deviceMoved 함수는 스케치를 표시하는 모바일 기기가 움직일 실행됩니다 예제에서 accelerationX accelerationY accelerationZ 값은 원의 위치와 크기를 정하고 있습니다 이것은 기기에서만 작동합니다"},"조건식":{"relativeUrl":"/examples/animation-and-variables-conditions","description":"if와 else문은 특정 조건이 참일 때만 코드 블록이 실행되도록 합니다 예제는 마우스를 누른 상태에서만 애니메이션이 59번 줄의 if문 이렇게 동작할 수 있습니다 else문에 대한 자세한 내용은 p5 레퍼런스나 MDN에서 읽을 비교 연산자는 두 값을 비교하여 조건식을 형성하는 데 도움을 줍니다 예제에서는 69번 if문에 원의 색조가 이상일 0으로 재설정됩니다 연산자에 논리 결합할 있게 &&는 모든 조건식이 참인지를 확인합니다 예제에서 원은 캔버스의 수평 중심으로 향할 검은색으로 채워지고 않으면 흰색으로 채워집니다 이것은 45번 때문인데 명령문은 \bx좌표가 이하인지를 확인하고 ||는 적어도 하나의 75번 원이 왼쪽이나 오른쪽 가장자리에 도달할 속도를 만듭니다"},"단어":{"relativeUrl":"/examples/imported-media-words","description":"text 함수는 캔버스에 글자를 삽입하는 데 사용됩니다 loadFont fontSize 함수를 사용하여 글꼴 글자 크기를 변경할 수 있습니다 textAlign 왼쪽 가운데 또는 오른쪽으로 정렬할 있으며 도형에서와 fill을 글자에 색상을 입힐"},"이미지 데이터 복사":{"relativeUrl":"/examples/imported-media-copy-image-data","description":"copy 메서드를 사용하면 커서가 드래그되는 곳마다 흑백 이미지 위에 색상이 있는 이미지를 복사하여 이미지에 색상을 입히는 것처럼 보이게 할 수 있습니다"},"알파 마스크":{"relativeUrl":"/examples/imported-media-alpha-mask","description":"mask 메서드를 사용하면 이미지의 마스크를 만들어 부분에서 투명도를 지정할 수 있습니다 예제를 로컬에서 실행하려면 두 개의 이미지 파일과 실행 중인 로컬 서버가 필요합니다"},"이미지 투명도":{"relativeUrl":"/examples/imported-media-image-transparency","description":"프로그램은 tint 함수로 이미지의 알파 값을 수정하여 한 이미지를 이미지 위에 덮어씌웁니다 위치를 변경하려면 캔버스를 가로질러 커서를 좌우로 이동합니다 예제를 로컬에서 실행하려면 파일과 실행 중인 로컬 서버가 필요합니다"},"오디오 플레이어":{"relativeUrl":"/examples/imported-media-create-audio","description":"createAudio는 오디오 플레이어를 생성합니다 예제는 플레이어의 컨트롤을 표시하고 속도를 조정합니다 재생 속도는 마우스가 창의 왼쪽 가장자리에 있을 보통이고 오른쪽으로 움직일수록 더 빨라집니다 플레이어와 같은 미디어 요소 사용에 대한 자세한 정보는 p5MediaElement 레퍼런스 페이지를 확인하세요 파일은 Josef Pres의 피아노 루프로 자유 이용 저작물입니다"},"비디오 플레이어":{"relativeUrl":"/examples/imported-media-video","description":"noCanvas와 createVideo 함수를 사용하면 캔버스에 비디오를 내장하지 않고도 DOM에 업로드할 수 있습니다 캔버스 요소에 내장하려는 경우 Video Canvas 예제를 확인해 보세요"},"캔버스에서의 비디오":{"relativeUrl":"/examples/imported-media-video-canvas","description":"createVideo와 image 함수를 사용하면 비디오를 캔버스에 업로드할 수 있습니다 비디오 캡처는 생성자를 통해 전달될 있으므로 filter 메서드를 사용하여 캡처에 필터를 추가할 예제를 로컬에서 실행하려면 실행 중인 로컬 서버가 필요합니다 캔버스 내에 내장하지 않고 구축하려면 Video 확인해 보세요"},"비디오 캡처":{"relativeUrl":"/examples/imported-media-video-capture","description":"createCapture와 image 함수를 사용하면 장치의 비디오 캡처를 가져와 캔버스에 그릴 수 있습니다 캡처는 생성자를 통해 전달될 있으므로 filter 메서드를 사용하여 캡처에 필터를 추가할 비디오를 업로드하거나 발표하거나 스타일을 지정하기 위한 다양한 전략을 보려면 Video와 Video Canvas를 확인해 보세요"},"이미지 드롭":{"relativeUrl":"/examples/input-elements-image-drop","description":"drop은 p5js 요소 메서드로 파일이 요소에 로드될 때마다 콜백을 등록합니다 업로드된 파일은 p5File로 만들어집니다 drop 사용하여 파일 유형을 확인한 유형에 대응하는 조건문을 작성할 수 있습니다"},"입력칸과 버튼":{"relativeUrl":"/examples/input-elements-input-button","description":"createElement createInput createButton 함수를 사용하여 글자 입력칸을 통해 제출된 글자를 가져와 캔버스에 표시할 수 있습니다"},"폼 요소":{"relativeUrl":"/examples/input-elements-dom-form-elements","description":"문서 객체 모델 DOM은 웹 페이지의 결과로 나오는 구조를 나타냅니다 createInput createSelect createRadio와 같은 p5js의 폼 요소를 사용하여 [드롭다운] 메뉴 선택 입력칸 또는 라디오 버튼을 통해 제출된 정보를 갖는 다양한 방법을 구축하고 기반으로 DOM을 업데이트할 수 있습니다"},"이동(Translate)":{"relativeUrl":"/examples/transformation-translate","description":"translate 함수는 좌표계의 원점을 지정된 위치로 이동합니다 push와 pop 좌표계나 채우기 색상과 같은 드로잉 설정을 저장 복원합니다 예제에서는 도형직사각형이나 원을 좌표계에서 있습니다"},"회전(Rotate)":{"relativeUrl":"/examples/transformation-rotate","description":"rotate 함수는 현재 원점을 중심으로 좌표계를 회전합니다 기본적으로 원점은 캔버스의 왼쪽 위 모서리라는 사실을 알아두세요 가운데를 회전하려면 먼저 이동한 새 회전해야 합니다 push와 pop 저장 복원합니다"},"크기(Scale)":{"relativeUrl":"/examples/transformation-scale","description":"scale 함수는 지정된 인수만큼 현재 좌표계의 크기를 조정Scaling합니다 push와 pop 좌표계를 저장 복원합니다 예제에서는 세 가지의 서로 크기 조정 인수를 사용해 크기가 200인 정사각형을 원점에 있습니다"},"선형 보간법":{"relativeUrl":"/examples/calculating-values-interpolate","description":"보간법 두 개의 값 사이의 값을 계산합니다 예를 들어 숫자 5는 0과 중간 지점입니다 다양한 유형의 보간법은 사이에서 변화율을 사용합니다 선형 줄여서 lerp는 일정한 lerp 함수는 사이를 선형으로 보간합니다 화면을 가로질러 마우스를 움직이면 기호가 따라옵니다 애니메이션의 프레임을 그리는 타원은 현재 위치에서 커서의 위치를 향해 거리의 일부만큼 이동합니다"},"매핑(Map)":{"relativeUrl":"/examples/calculating-values-map","description":"map 함수는 값을 하나의 범위에서 범위로 변환합니다 예제에서 매핑은 커서의 수평 위치를 0-720의 0-360 결과값은 원의 색상이 됩니다 수직 0-400의 20-300의 지름이"},"랜덤":{"relativeUrl":"/examples/calculating-values-random","description":"예제는 random 함수의 사용법을 보여줍니다 사용자가 마우스 버튼을 누를 원의 위치와 색상이 무작위로 변경됩니다"},"제한(Constrain)":{"relativeUrl":"/examples/calculating-values-constrain","description":"예제는 커서의 위치에 원을 그리지만 원이 직사각형 내에 유지되도록 합니다 이는 마우스의 좌표를 constrain 함수에 전달함으로써 수행합니다"},"시계":{"relativeUrl":"/examples/calculating-values-clock","description":"현재 시각은 second minute hour 함수를 사용하여 읽을 수 있습니다 예제는 map 시계 바늘의 각도를 계산합니다 그런 좌표계 변환을 위치를 설정합니다"},"색상 보간":{"relativeUrl":"/examples/repetition-color-interpolation","description":"보간법은 두 값 사이의 값을 계산합니다 예를 들어 숫자 5는 0과 중간 지점입니다 다양한 유형의 사이에서 변화율을 사용합니다 선형 보간법 줄여서 lerp는 일정한 lerp 함수는 사이를 선형으로 보간합니다 여기에서 보여지는 lerpColor 색상 예제에서 stripeCount 변수는 수평 줄무늬가 개 나타나는지 조정합니다 값이 더 높은 숫자로 설정되면 개별 줄무늬처럼 보이는 것이 아니라 그라데이션처럼 보입니다"},"색상환(Color Wheel)":{"relativeUrl":"/examples/repetition-color-wheel","description":"예제는 다양한 색상의 모습을 보여줍니다 for 반복문을 사용하여 변환을 반복합니다 반복문은 angle이라는 변수를 초기화하며 변수는 원의 회전과 색상을 변경합니다 반복문이 반복될 때마다 원은 캔버스 중심에 상대적으로 그려집니다 push와 pop함수는 개별 원에만 영향을 줄 수 있도록 합니다"},"베지어 곡선":{"relativeUrl":"/examples/repetition-bezier","description":"bezier 곡선은 제어점과 고정점을 생성됩니다 함수의 첫 두 매개변수는 곡선의 번째 점을 지정하고 마지막 지정합니다 중간 곡선 모양을 정의하는 제어점입니다"},"만화경":{"relativeUrl":"/examples/repetition-kaleidoscope","description":"만화경은 두 개 이상의 반사면이 서로를 향해 비스듬히 기울어진 광학 기기입니다 translate rotate scale 함수를 사용하면 캔버스에서 만화경을 통해 만든 비주얼을 복제할 수 있습니다"},"노이즈":{"relativeUrl":"/examples/repetition-noise","description":"펄린 노이즈 는 켄 펄린Ken Perlin이 작성한 알고리즘으로 무작위성과 유기성을 지닌 시퀀스입니다 p5의 noise함수는 노이즈를 만듭니다 예제에서 점들은 값에 기반하여 크기가 결정됩니다 왼쪽의 슬라이더를 이용해 점들 사이의 거리를 설정합니다 오른쪽 계산에서의 오프셋offset 값을"},"재귀 트리":{"relativeUrl":"/examples/repetition-recursive-tree","description":"이것은 재귀를 통해 간단한 트리같은 구조를 렌더링하는 예제입니다 분기 각도는 마우스의 수평 위치에 대한 함수로 계산됩니다 마우스를 왼쪽과 오른쪽으로 움직여 각도를 변경하세요 다니엘 쉬프먼의 Processing에서 작성된 재귀 트리 예제를 바탕으로 합니다"},"랜덤 시":{"relativeUrl":"/examples/listing-data-with-arrays-random-poetry","description":"floor와 random 함수를 사용하여 배열에서 일련의 항목을 무작위로 선택하고 캔버스의 다양한 크기와 위치에 그릴 수 있습니다"},"사인과 코사인":{"relativeUrl":"/examples/angles-and-motion-sine-cosine","description":"예제는 사인과 코사인 수학 함수를 보여줍니다 애니메이션은 단위 원 반지름이 1인 주위에서 일정한 원형 운동을 x축으로부터 측정된 각도는 위의 점을 결정합니다 각도의 코사인과 사인은 점의 x좌표 y좌표로 정의합니다"},"조준":{"relativeUrl":"/examples/angles-and-motion-aim","description":"atan2 함수는 두 위치 사이의 각도를 계산합니다 함수가 계산하는 각도는 것을 향해 도형을 회전시키는 데 사용할 수 있습니다 예제에서는 눈이 커서를 바라보도록 회전합니다"},"삼각형 스트립":{"relativeUrl":"/examples/angles-and-motion-triangle-strip","description":"예제는 beginShape endShape vertex 함수를 사용하여 TRIANGLE_STRIP 모드에서 그것의 꼭짓점들을 지정함으로써 도형을 생성하는 방법을 보여줍니다"},"써클 클리커":{"relativeUrl":"/examples/games-circle-clicker","description":"예제는 제한과 점수가 있는 게임입니다 브라우저의 로컬 스토리지가 최고 점수를 저장하므로 같은 브라우저를 사용해서 게임을 다시 플레이할 점수 기록이 유지됩니다 브라우저 데이터를 지우면 기록도 지워집니다"},"핑퐁":{"relativeUrl":"/examples/games-ping-pong","description":"이것은 가장 오래된 아케이드 비디오 게임 중 하나인 아타리의 Pong에서 영감을 받은 게임입니다 2인용 게임이며 플레이어는 하얀 사각형으로 표현된 패들을 제어합니다 W와 S키는 왼쪽의 위아래로 움직이고 위쪽과 아래쪽 화살표 키는 오른쪽의 움직입니다 플레이어들은 공을 상대방 쪽 캔버스 가장자리 너머로 튕겨내어 점수를 얻습니다"},"스네이크 게임":{"relativeUrl":"/examples/games-snake","description":"이것은 스네이크라고 불리는 아케이드 게임 유형의 복제판입니다 첫 번째 스네이크 게임은 1976년에 출시된 블록케이드였으며 많은 게임들이 같은 구조를 사용합니다 게임에서 플레이어는 예제에서 녹색 선으로 표현된 뱀의 움직임을 제어합니다 플레이어의 목표는 뱀을 빨간 점으로 과일과 충돌시키는 것입니다 뱀이 충돌할 때마다 뱀은 더 길어집니다 자신이나 플레이 영역의 가장자리와 충돌하지 않으면서 가능한 한 길게 성장시키는 예제는 부분의 위치를 저장하기 위해 벡터 배열을 화살표 키는"},"지오메트리":{"relativeUrl":"/examples/3d-geometries","description":"p5의 WEBGL 모드에는 7개의 기본 도형이 포함되어 있습니다 도형들은 평면 상자 원기둥 원뿔 도넛형 타원체입니다 추가적으로 model은 loadModel을 통해 불러온 사용자 정의 지오메트리를 보여줍니다 예제에는 도형들이 있으며 NASA's collection에서 가져온 모델도"},"사용자 정의 지오메트리":{"relativeUrl":"/examples/3d-custom-geometry","description":"buildGeometry 함수는 도형을 3D 모델에 저장하여 모델을 효율적으로 사용 재사용합니다"},"재질(Materials)":{"relativeUrl":"/examples/3d-materials","description":"3D 렌더링에서 재질은 표면이 빛에 반응하는지를 결정합니다 p5의 WEBGL 모드는 ambient emissive normal specular 재질을 지원합니다 Ambient 주변광ambient light에만 반응합니다 Specular 모든 광원에 p5에서 Emissive 광원과 상관없이 본인의 색을 나타냅니다 맥락에서 보면 빛을 방출합니다 Normal 표면의 부분이 방향을 향하고 있는지를 시각화합니다 반응하지 않습니다 재질과 서로 조합될 수 있습니다 두 채우기fill와 윤곽선stroke과도 채우기는 기본 색상을 설정하고 윤곽선은 객체의 정점 설정합니다 추가적으로 texture는 이미지로 물체를 감쌉니다 예제의 모델과 이미지 텍스처는 NASA's collection에서 가져온 것입니다"},"궤도 컨트롤(Orbit Control)":{"relativeUrl":"/examples/3d-orbit-control","description":"궤도 컨트롤Orbit control은 마우스나 터치 입력을 3D 스케치에서 카메라 방향을 조정합니다 카메라를 회전하려면 마우스를 왼쪽 클릭하고 드래그하거나 터치스크린에서 스와이프하세요 이동하려면 오른쪽 두 손가락으로 스케치의 중심으로 더 가까이하거나 멀리하려면 마우스의 스크롤 휠을 사용하거나 핀치 인/아웃하세요"},"필터 셰이더(Filter Shader)":{"relativeUrl":"/examples/3d-filter-shader","description":"필터 셰이더는 캔버스에 있는 것에도 효과를 적용할 수 방법입니다 예제에서는 비디오에 효과가 적용됩니다"},"셰이더로 위치 조정하기":{"relativeUrl":"/examples/3d-adjusting-positions-with-a-shader","description":"셰이더는 도형의 정점 위치를 조정할 수 있습니다 이를 통해 3D 모델을 왜곡하고 애니메이션화할"},"프레임버퍼 흐림(Framebuffer Blur)":{"relativeUrl":"/examples/3d-framebuffer-blur","description":"예제에서 사용하는 셰이더는 p5Framebuffer로부터의 깊이 정보를 사용하여 흐림 효과를 적용합니다 실제 카메라에서 렌즈의 초점보다 가깝거나 멀리있는 물체는 흐릿하게 보입니다 이는 모방합니다 먼저 스케치는 프레임버퍼에 개의 구체를 렌더링합니다 셰이더를 프레임버퍼를 캔버스에"},"그래픽 생성하기":{"relativeUrl":"/examples/advanced-canvas-rendering-create-graphics","description":"createGraphics 함수는 새로운 p5Graphics 객체를 생성하는 데 사용됩니다 객체는 캔버스 내에서 오프-스크린 그래픽 버퍼off-screen graphic buffer로 사용될 수 있습니다 buffer는 현재 디스플레이 표면과 차원과 속성을 가질 있음에도 같은 공간에 존재하는 것처럼 보입니다"},"다중 캔버스":{"relativeUrl":"/examples/advanced-canvas-rendering-multiple-canvases","description":"기본적으로 p5는 전역 모드Global Mode에서 실행되며 이는 모든 p5 함수가 범위 안에 있고 캔버스 관련 하나의 캔버스에 적용된다는 것을 의미합니다 인스턴스 모드Instance Mode에서도 실행할 수 있으며 모드에서는 같은 함수들이 클래스의 인스턴스의 메서드가 됩니다 p5의 인스턴스는 각자의 캔버스를 가질 있습니다 모드를 사용하려면 인스턴스를 나타내는 매개변수이 예제에서는 p로 표시됨를 가진 함수를 정의해야 합니다 평소에 범위에 있던 함수와 변수들이 함수의 내에서 매개변수에 속하게 생성자에 전달하면 실행됩니다"},"셰이더를 텍스처로 사용하기":{"relativeUrl":"/examples/advanced-canvas-rendering-shader-as-a-texture","description":"셰이더는 2D/3D 도형에 텍스처로 적용될 수 있습니다 p5js에서 셰이더 사용에 대해 더 알아보기 p5js"},"눈송이(Snowflakes)":{"relativeUrl":"/examples/classes-and-objects-snowflakes","description":"예제는 입자 시스템을 사용하여 떨어지는 눈송이의 움직임을 시뮬레이션하는 방법을 보여줍니다 프로그램은 눈송이 클래스를 정의하고 배열을 객체들을 보관합니다"},"흔들어서 공 튀기기":{"relativeUrl":"/examples/classes-and-objects-shake-ball-bounce","description":"클래스를 사용하여 모바일 기기의 기울기에 반응하여 캔버스 내에서 움직이는 원들의 집합을 생성할 수 있습니다 스케치를 표시하려면 기기에서 페이지를 열어야 합니다"},"연결된 입자들":{"relativeUrl":"/examples/classes-and-objects-connected-particles","description":"예제는 두 개의 사용자 정의 클래스를 사용합니다 Particle 클래스는 위치 속도 색조를 저장합니다 현재 위치와 사용하여 원을 렌더링하고 속도를 위치를 업데이트합니다 Path 클래스에서 생성된 객체들의 배열을 이는 입자를 연결하는 선을 렌더링합니다 사용자가 마우스를 클릭하면 스케치는 클래스의 새 인스턴스를 만듭니다 드래그하면 경로에 추가합니다"},"무리지어 움직이기(Flocking)":{"relativeUrl":"/examples/classes-and-objects-flocking","description":"무리의 움직임을 시뮬레이션 합니다 구현에 대한 자세한 논의는 다니엘 쉬프만Daniel Shiffman의 Nature of Code 책에서 살펴볼 수 있습니다 시뮬레이션은 새와 비슷한 객체를 나타내는 boid'라는 용어를 사용한 크레이그 레이놀즈Craig Reynolds의 연구에 기반하고"},"로컬 스토리지(Local Storage)":{"relativeUrl":"/examples/loading-and-saving-data-local-storage","description":"브라우저는 웹사이트가 방문자의 기기에 데이터를 저장할 수 있도록 허용하고 있습니다 이를 로컬 스토리지Local Storage라고 합니다 getItem storeItem clearStorage removeItem 함수들이 제어합니다 예제는 다니엘 쉬프만Daniel Shiffman의 Java로 작성된 JSON 데이터 가져오기Loading Data와 테이블 Tabular Data 예제를 참고하여 만들어졌습니다 이는 버블에 대한 구성하기 위해 클래스를 사용합니다 방문자는 새로운 버블을 추가할 있으며 그들의 데이터는 스토리지에 저장됩니다 방문자가 스케치를 다시 방문하면 동일한 버블이 로드됩니다"},"JSON":{"relativeUrl":"/examples/loading-and-saving-data-json","description":"JavaScript Object Notation 또는 JSON은 파일에 데이터를 작성하는 형식입니다 구문은 JavaScript에서 가져왔지만 맥락에서도 많이 사용됩니다 예제는 다니엘 쉬프만Daniel Shiffman의 Java로 작성된 Processing용 JSON 데이터 로드 예제를 기반으로 합니다 이는 버블에 대한 구성하기 위해 클래스를 사용합니다 스케치가 시작될 두 개의 파일에서 로드합니다 방문자는 새로운 버블을 추가할 수 있고 업데이트된 파일을 다운로드하고 로드할 있습니다"},"테이블":{"relativeUrl":"/examples/loading-and-saving-data-table","description":"쉼표로 구분된 값CSV은 파일에 데이터를 작성하는 형식입니다 p5는 p5Table을 사용하여 형식을 작업할 수 있습니다 예제는 다니엘 쉬프만Daniel Shiffman의 Processing에서 작성된 테이블 데이터 가져오기Loading Tabular Data 예제를 기반으로 합니다 이는 버블을 나타내는 구성하기 위해 클래스를 사용합니다 스케치가 시작될 개의 버블에 대한 CSV 파일에서 로드합니다 방문자는 새로운 추가할 있고 업데이트된 파일을 다운로드하고 로드할"},"비직각 반사":{"relativeUrl":"/examples/math-and-physics-non-orthogonal-reflection","description":"예제는 반사를 위한 벡터 계산을 사용하여 경사진 표면에서 튕기는 공을 시뮬레이션합니다 코드는 새로운 벡터를 만들기 위해 createVector 함수를 포함한 p5Vector 클래스를 광범위하게 사용합니다 add와 dot 메서드를"},"소프트 바디(Soft Body)":{"relativeUrl":"/examples/math-and-physics-soft-body","description":"마우스 위치로 가속되는 부드러운 물체의 물리 시뮬레이션을 통해 소프트 바디를 구현합니다 모양은 curveVertex와 curveTightness를 사용하여 곡선으로 생성됩니다"},"힘":{"relativeUrl":"/examples/math-and-physics-forces","description":"다수의 힘이 물체에 작용하는 시뮬레이션입니다 물체에는 지속적으로 중력이 적용됩니다 물체가 물에 있을 때는 유체 저항이 작용합니다 natureofcodecom 힘 계산은 p5Vector 클래스를 사용되며 수행되며 이는 벡터를 생성하기 위한 createVector 함수를 포함합니다"},"연기 입자(Smoke Particles)":{"relativeUrl":"/examples/math-and-physics-smoke-particle-system","description":"다니엘 쉬프만Dan Shiffman의 원본 Processing 예제를 기반으로 한 연기 입자 시스템 데모입니다 코드는 p5Vector 클래스를 활용하며 이는 createVector 함수를 포함합니다 입자의 위치와 속도를 업데이트하는 다양한 계산은 메서드를 사용하여 수행됩니다 시스템은 클래스로 구현되어 있으며 Particle 클래스의 객체 배열을"},"라이프 게임(Game of Life)":{"relativeUrl":"/examples/math-and-physics-game-of-life","description":"라이프 게임Life Game은 수학자 존 콘웨이John Conway가 만든 세포 자동자입니다 자동자는 시뮬레이션의 한 유형입니다 게임에서는 셀이 죽거나 살아 있는지에 그리드가 있습니다 예제에서 검은색 정사각형은 생존하는 셀을 나타내고 흰색 죽은 나타냅니다 시뮬레이션이 실행되는 셀은 규칙에 살아납니다 주변에 살아있는 이웃이 두 개 미만인 모든 죽습니다 세 이상인 또는 개인 변경 없이 세대로 넘어갑니다 정확히 규칙은 복잡한 상호 작용을 생성합니다 캔버스를 클릭하여 무작위로 생성된 셀로 시뮬레이션을 시작할 수 다시 클릭하면 시작됩니다"},"망델브로 집합(Mandelbrot Set)":{"relativeUrl":"/examples/math-and-physics-mandelbrot","description":"다니엘 쉬프만Daniel Shiffman의 Processing 망델브로 예제를 기반으로 한 집합의 다채로운 렌더링을 제공합니다"}},"reference":{"Array":{"relativeUrl":"/reference/p5/Array"},"abs()":{"relativeUrl":"/reference/p5/abs","alias":"abs"},"acos()":{"relativeUrl":"/reference/p5/acos","alias":"acos"},"알파":{"relativeUrl":"/reference/p5/alpha"},"ambientLight()":{"relativeUrl":"/reference/p5/ambientLight","alias":"ambientLight"},"ambientMaterial()":{"relativeUrl":"/reference/p5/ambientMaterial","alias":"ambientMaterial"},"angleMode()":{"relativeUrl":"/reference/p5/angleMode","alias":"angleMode"},"applyMatrix()":{"relativeUrl":"/reference/p5/applyMatrix","alias":"applyMatrix"},"arc()":{"relativeUrl":"/reference/p5/arc","alias":"arc"},"asin()":{"relativeUrl":"/reference/p5/asin","alias":"asin"},"atan()":{"relativeUrl":"/reference/p5/atan","alias":"atan"},"atan2()":{"relativeUrl":"/reference/p5/atan2","alias":"atan2"},"background()":{"relativeUrl":"/reference/p5/background","alias":"background"},"beginClip()":{"relativeUrl":"/reference/p5/beginClip","alias":"beginClip"},"beginContour()":{"relativeUrl":"/reference/p5/beginContour","alias":"beginContour"},"beginGeometry()":{"relativeUrl":"/reference/p5/beginGeometry","alias":"beginGeometry"},"beginShape()":{"relativeUrl":"/reference/p5/beginShape","alias":"beginShape"},"bezier()":{"relativeUrl":"/reference/p5/bezier","alias":"bezier"},"bezierDetail()":{"relativeUrl":"/reference/p5/bezierDetail","alias":"bezierDetail"},"bezierPoint()":{"relativeUrl":"/reference/p5/bezierPoint","alias":"bezierPoint"},"bezierTangent()":{"relativeUrl":"/reference/p5/bezierTangent","alias":"bezierTangent"},"bezierVertex()":{"relativeUrl":"/reference/p5/bezierVertex","alias":"bezierVertex"},"blend()":{"relativeUrl":"/reference/p5/blend","alias":"blend"},"blue()":{"relativeUrl":"/reference/p5/blue","alias":"blue"},"boolean()":{"relativeUrl":"/reference/p5/boolean","alias":"boolean"},"box()":{"relativeUrl":"/reference/p5/box","alias":"box"},"밝기값":{"relativeUrl":"/reference/p5/brightness"},"buildGeometry()":{"relativeUrl":"/reference/p5/buildGeometry","alias":"buildGeometry"},"camera()":{"relativeUrl":"/reference/p5/camera","alias":"camera"},"ceil()":{"relativeUrl":"/reference/p5/ceil","alias":"ceil"},"changed()":{"relativeUrl":"/reference/p5/changed","alias":"changed"},"circle()":{"relativeUrl":"/reference/p5/circle","alias":"circle"},"class":{"relativeUrl":"/reference/p5/class"},"clear()":{"relativeUrl":"/reference/p5/clear","alias":"clear"},"clip()":{"relativeUrl":"/reference/p5/clip","alias":"clip"},"색상 함수":{"relativeUrl":"/reference/p5/color"},"colorMode()":{"relativeUrl":"/reference/p5/colorMode","alias":"colorMode"},"cone()":{"relativeUrl":"/reference/p5/cone","alias":"cone"},"DEGREES":{"relativeUrl":"/reference/p5/DEGREES"},"HALF_PI":{"relativeUrl":"/reference/p5/HALF_PI"},"PI":{"relativeUrl":"/reference/p5/PI"},"QUARTER_PI":{"relativeUrl":"/reference/p5/QUARTER_PI"},"RADIANS":{"relativeUrl":"/reference/p5/RADIANS"},"TAU":{"relativeUrl":"/reference/p5/TAU"},"TWO_PI":{"relativeUrl":"/reference/p5/TWO_PI"},"constrain()":{"relativeUrl":"/reference/p5/constrain","alias":"constrain"},"copy()":{"relativeUrl":"/reference/p5/copy","alias":"copy"},"cos()":{"relativeUrl":"/reference/p5/cos","alias":"cos"},"createA()":{"relativeUrl":"/reference/p5/createA","alias":"createA"},"createAudio()":{"relativeUrl":"/reference/p5/createAudio","alias":"createAudio"},"createButton()":{"relativeUrl":"/reference/p5/createButton","alias":"createButton"},"createCamera()":{"relativeUrl":"/reference/p5/createCamera","alias":"createCamera"},"createCapture()":{"relativeUrl":"/reference/p5/createCapture","alias":"createCapture"},"createCheckbox()":{"relativeUrl":"/reference/p5/createCheckbox","alias":"createCheckbox"},"createColorPicker()":{"relativeUrl":"/reference/p5/createColorPicker","alias":"createColorPicker"},"createDiv()":{"relativeUrl":"/reference/p5/createDiv","alias":"createDiv"},"createElement()":{"relativeUrl":"/reference/p5/createElement","alias":"createElement"},"createFileInput()":{"relativeUrl":"/reference/p5/createFileInput","alias":"createFileInput"},"createFilterShader()":{"relativeUrl":"/reference/p5/createFilterShader","alias":"createFilterShader"},"createImage()":{"relativeUrl":"/reference/p5/createImage","alias":"createImage"},"createImg()":{"relativeUrl":"/reference/p5/createImg","alias":"createImg"},"createInput()":{"relativeUrl":"/reference/p5/createInput","alias":"createInput"},"createP()":{"relativeUrl":"/reference/p5/createP","alias":"createP"},"createRadio()":{"relativeUrl":"/reference/p5/createRadio","alias":"createRadio"},"createSelect()":{"relativeUrl":"/reference/p5/createSelect","alias":"createSelect"},"createShader()":{"relativeUrl":"/reference/p5/createShader","alias":"createShader"},"createSlider()":{"relativeUrl":"/reference/p5/createSlider","alias":"createSlider"},"createSpan()":{"relativeUrl":"/reference/p5/createSpan","alias":"createSpan"},"createVector()":{"relativeUrl":"/reference/p5/createVector","alias":"createVector"},"createVideo()":{"relativeUrl":"/reference/p5/createVideo","alias":"createVideo"},"cursor()":{"relativeUrl":"/reference/p5/cursor","alias":"cursor"},"curve()":{"relativeUrl":"/reference/p5/curve","alias":"curve"},"curveDetail()":{"relativeUrl":"/reference/p5/curveDetail","alias":"curveDetail"},"curvePoint()":{"relativeUrl":"/reference/p5/curvePoint","alias":"curvePoint"},"curveTangent()":{"relativeUrl":"/reference/p5/curveTangent","alias":"curveTangent"},"curveTightness()":{"relativeUrl":"/reference/p5/curveTightness","alias":"curveTightness"},"curveVertex()":{"relativeUrl":"/reference/p5/curveVertex","alias":"curveVertex"},"cylinder()":{"relativeUrl":"/reference/p5/cylinder","alias":"cylinder"},"debugMode()":{"relativeUrl":"/reference/p5/debugMode","alias":"debugMode"},"degrees()":{"relativeUrl":"/reference/p5/degrees","alias":"degrees"},"deltaTime":{"relativeUrl":"/reference/p5/deltaTime"},"describe()":{"relativeUrl":"/reference/p5/describe","alias":"describe"},"describeElement()":{"relativeUrl":"/reference/p5/describeElement","alias":"describeElement"},"directionalLight()":{"relativeUrl":"/reference/p5/directionalLight","alias":"directionalLight"},"displayDensity()":{"relativeUrl":"/reference/p5/displayDensity","alias":"displayDensity"},"displayHeight":{"relativeUrl":"/reference/p5/displayHeight"},"displayWidth":{"relativeUrl":"/reference/p5/displayWidth"},"dist()":{"relativeUrl":"/reference/p5/dist","alias":"dist"},"doubleClicked()":{"relativeUrl":"/reference/p5/doubleClicked","alias":"doubleClicked"},"ellipse()":{"relativeUrl":"/reference/p5/ellipse","alias":"ellipse"},"ellipseMode()":{"relativeUrl":"/reference/p5/ellipseMode","alias":"ellipseMode"},"ellipsoid()":{"relativeUrl":"/reference/p5/ellipsoid","alias":"ellipsoid"},"emissiveMaterial()":{"relativeUrl":"/reference/p5/emissiveMaterial","alias":"emissiveMaterial"},"endClip()":{"relativeUrl":"/reference/p5/endClip","alias":"endClip"},"endContour()":{"relativeUrl":"/reference/p5/endContour","alias":"endContour"},"endGeometry()":{"relativeUrl":"/reference/p5/endGeometry","alias":"endGeometry"},"endShape()":{"relativeUrl":"/reference/p5/endShape","alias":"endShape"},"erase()":{"relativeUrl":"/reference/p5/erase","alias":"erase"},"exitPointerLock()":{"relativeUrl":"/reference/p5/exitPointerLock","alias":"exitPointerLock"},"exp()":{"relativeUrl":"/reference/p5/exp","alias":"exp"},"filter()":{"relativeUrl":"/reference/p5/filter","alias":"filter"},"floor()":{"relativeUrl":"/reference/p5/floor","alias":"floor"},"focused()":{"relativeUrl":"/reference/p5/focused","alias":"focused"},"for":{"relativeUrl":"/reference/p5/for"},"fract()":{"relativeUrl":"/reference/p5/fract","alias":"fract"},"frameCount":{"relativeUrl":"/reference/p5/frameCount"},"frameRate()":{"relativeUrl":"/reference/p5/frameRate","alias":"frameRate"},"freeGeometry()":{"relativeUrl":"/reference/p5/freeGeometry","alias":"freeGeometry"},"frustum()":{"relativeUrl":"/reference/p5/frustum","alias":"frustum"},"fullscreen()":{"relativeUrl":"/reference/p5/fullscreen","alias":"fullscreen"},"function":{"relativeUrl":"/reference/p5/function"},"get()":{"relativeUrl":"/reference/p5/get","alias":"get"},"getTargetFrameRate()":{"relativeUrl":"/reference/p5/getTargetFrameRate","alias":"getTargetFrameRate"},"getURL()":{"relativeUrl":"/reference/p5/getURL","alias":"getURL"},"getURLParams()":{"relativeUrl":"/reference/p5/getURLParams","alias":"getURLParams"},"getURLPath()":{"relativeUrl":"/reference/p5/getURLPath","alias":"getURLPath"},"초록(green)()":{"relativeUrl":"/reference/p5/green","alias":"초록(green)"},"gridOutput()":{"relativeUrl":"/reference/p5/gridOutput","alias":"gridOutput"},"height":{"relativeUrl":"/reference/p5/height"},"색조":{"relativeUrl":"/reference/p5/hue"},"if":{"relativeUrl":"/reference/p5/if"},"image()":{"relativeUrl":"/reference/p5/image","alias":"image"},"imageLight()":{"relativeUrl":"/reference/p5/imageLight","alias":"imageLight"},"imageMode()":{"relativeUrl":"/reference/p5/imageMode","alias":"imageMode"},"input()":{"relativeUrl":"/reference/p5/input","alias":"input"},"key":{"relativeUrl":"/reference/p5/key"},"keyCode":{"relativeUrl":"/reference/p5/keyCode"},"keyIsDown()":{"relativeUrl":"/reference/p5/keyIsDown","alias":"keyIsDown"},"keyIsPressed":{"relativeUrl":"/reference/p5/keyIsPressed"},"keyPressed()":{"relativeUrl":"/reference/p5/keyPressed","alias":"keyPressed"},"keyReleased()":{"relativeUrl":"/reference/p5/keyReleased","alias":"keyReleased"},"keyTyped()":{"relativeUrl":"/reference/p5/keyTyped","alias":"keyTyped"},"lerp()":{"relativeUrl":"/reference/p5/lerp","alias":"lerp"},"lerpColor()":{"relativeUrl":"/reference/p5/lerpColor","alias":"lerpColor"},"let":{"relativeUrl":"/reference/p5/let"},"lightFalloff()":{"relativeUrl":"/reference/p5/lightFalloff","alias":"lightFalloff"},"lightness()":{"relativeUrl":"/reference/p5/lightness","alias":"lightness"},"lights()":{"relativeUrl":"/reference/p5/lights","alias":"lights"},"line()":{"relativeUrl":"/reference/p5/line","alias":"line"},"linePerspective()":{"relativeUrl":"/reference/p5/linePerspective","alias":"linePerspective"},"loadFont()":{"relativeUrl":"/reference/p5/loadFont","alias":"loadFont"},"loadImage()":{"relativeUrl":"/reference/p5/loadImage","alias":"loadImage"},"loadModel()":{"relativeUrl":"/reference/p5/loadModel","alias":"loadModel"},"loadPixels()":{"relativeUrl":"/reference/p5/loadPixels","alias":"loadPixels"},"loadShader()":{"relativeUrl":"/reference/p5/loadShader","alias":"loadShader"},"log()":{"relativeUrl":"/reference/p5/log","alias":"log"},"mag()":{"relativeUrl":"/reference/p5/mag","alias":"mag"},"map()":{"relativeUrl":"/reference/p5/map","alias":"map"},"max()":{"relativeUrl":"/reference/p5/max","alias":"max"},"metalness()":{"relativeUrl":"/reference/p5/metalness","alias":"metalness"},"min()":{"relativeUrl":"/reference/p5/min","alias":"min"},"model()":{"relativeUrl":"/reference/p5/model","alias":"model"},"mouseButton":{"relativeUrl":"/reference/p5/mouseButton"},"mouseClicked()":{"relativeUrl":"/reference/p5/mouseClicked","alias":"mouseClicked"},"mouseDragged()":{"relativeUrl":"/reference/p5/mouseDragged","alias":"mouseDragged"},"mouseIsPressed":{"relativeUrl":"/reference/p5/mouseIsPressed"},"mouseMoved()":{"relativeUrl":"/reference/p5/mouseMoved","alias":"mouseMoved"},"mousePressed()":{"relativeUrl":"/reference/p5/mousePressed","alias":"mousePressed"},"mouseReleased()":{"relativeUrl":"/reference/p5/mouseReleased","alias":"mouseReleased"},"mouseWheel()":{"relativeUrl":"/reference/p5/mouseWheel","alias":"mouseWheel"},"mouseX":{"relativeUrl":"/reference/p5/mouseX"},"mouseY":{"relativeUrl":"/reference/p5/mouseY"},"movedX":{"relativeUrl":"/reference/p5/movedX"},"movedY":{"relativeUrl":"/reference/p5/movedY"},"noCursor()":{"relativeUrl":"/reference/p5/noCursor","alias":"noCursor"},"noDebugMode()":{"relativeUrl":"/reference/p5/noDebugMode","alias":"noDebugMode"},"noErase()":{"relativeUrl":"/reference/p5/noErase","alias":"noErase"},"noFill()":{"relativeUrl":"/reference/p5/noFill","alias":"noFill"},"noLights()":{"relativeUrl":"/reference/p5/noLights","alias":"noLights"},"noSmooth()":{"relativeUrl":"/reference/p5/noSmooth","alias":"noSmooth"},"noStroke()":{"relativeUrl":"/reference/p5/noStroke","alias":"noStroke"},"noTint()":{"relativeUrl":"/reference/p5/noTint","alias":"noTint"},"noise()":{"relativeUrl":"/reference/p5/noise","alias":"noise"},"noiseDetail()":{"relativeUrl":"/reference/p5/noiseDetail","alias":"noiseDetail"},"noiseSeed()":{"relativeUrl":"/reference/p5/noiseSeed","alias":"noiseSeed"},"norm()":{"relativeUrl":"/reference/p5/norm","alias":"norm"},"normal()":{"relativeUrl":"/reference/p5/normal","alias":"normal"},"normalMaterial()":{"relativeUrl":"/reference/p5/normalMaterial","alias":"normalMaterial"},"Number":{"relativeUrl":"/reference/p5/number"},"Object":{"relativeUrl":"/reference/p5/object"},"orbitControl()":{"relativeUrl":"/reference/p5/orbitControl","alias":"orbitControl"},"ortho()":{"relativeUrl":"/reference/p5/ortho","alias":"ortho"},"p5.Camera":{"relativeUrl":"/reference/p5/p5.Camera"},"p5.Color":{"relativeUrl":"/reference/p5/p5.Color"},"p5.Element":{"relativeUrl":"/reference/p5/p5.Element"},"p5.File":{"relativeUrl":"/reference/p5/p5.File"},"p5.Font":{"relativeUrl":"/reference/p5/p5.Font"},"p5.Image":{"relativeUrl":"/reference/p5/p5.Image"},"p5.MediaElement":{"relativeUrl":"/reference/p5/p5.MediaElement"},"p5.Shader":{"relativeUrl":"/reference/p5/p5.Shader"},"p5.Vector":{"relativeUrl":"/reference/p5/p5.Vector"},"panorama()":{"relativeUrl":"/reference/p5/panorama","alias":"panorama"},"perspective()":{"relativeUrl":"/reference/p5/perspective","alias":"perspective"},"pixelDensity()":{"relativeUrl":"/reference/p5/pixelDensity","alias":"pixelDensity"},"pixels":{"relativeUrl":"/reference/p5/pixels"},"plane()":{"relativeUrl":"/reference/p5/plane","alias":"plane"},"pmouseX":{"relativeUrl":"/reference/p5/pmouseX"},"pmouseY":{"relativeUrl":"/reference/p5/pmouseY"},"point()":{"relativeUrl":"/reference/p5/point","alias":"point"},"pointLight()":{"relativeUrl":"/reference/p5/pointLight","alias":"pointLight"},"pow()":{"relativeUrl":"/reference/p5/pow","alias":"pow"},"print()":{"relativeUrl":"/reference/p5/print","alias":"print"},"pwinMouseX":{"relativeUrl":"/reference/p5/pwinMouseX"},"pwinMouseY":{"relativeUrl":"/reference/p5/pwinMouseY"},"quad()":{"relativeUrl":"/reference/p5/quad","alias":"quad"},"quadraticVertex()":{"relativeUrl":"/reference/p5/quadraticVertex","alias":"quadraticVertex"},"radians()":{"relativeUrl":"/reference/p5/radians","alias":"radians"},"random()":{"relativeUrl":"/reference/p5/random","alias":"random"},"randomGaussian()":{"relativeUrl":"/reference/p5/randomGaussian","alias":"randomGaussian"},"randomSeed()":{"relativeUrl":"/reference/p5/randomSeed","alias":"randomSeed"},"rect()":{"relativeUrl":"/reference/p5/rect","alias":"rect"},"rectMode()":{"relativeUrl":"/reference/p5/rectMode","alias":"rectMode"},"red()":{"relativeUrl":"/reference/p5/red","alias":"red"},"removeElements()":{"relativeUrl":"/reference/p5/removeElements","alias":"removeElements"},"requestPointerLock()":{"relativeUrl":"/reference/p5/requestPointerLock","alias":"requestPointerLock"},"resetMatrix()":{"relativeUrl":"/reference/p5/resetMatrix","alias":"resetMatrix"},"resetShader()":{"relativeUrl":"/reference/p5/resetShader","alias":"resetShader"},"rotate()":{"relativeUrl":"/reference/p5/rotate","alias":"rotate"},"rotateX()":{"relativeUrl":"/reference/p5/rotateX","alias":"rotateX"},"rotateY()":{"relativeUrl":"/reference/p5/rotateY","alias":"rotateY"},"rotateZ()":{"relativeUrl":"/reference/p5/rotateZ","alias":"rotateZ"},"round()":{"relativeUrl":"/reference/p5/round","alias":"round"},"saturation()":{"relativeUrl":"/reference/p5/saturation","alias":"saturation"},"saveCanvas()":{"relativeUrl":"/reference/p5/saveCanvas","alias":"saveCanvas"},"saveFrames()":{"relativeUrl":"/reference/p5/saveFrames","alias":"saveFrames"},"saveGif()":{"relativeUrl":"/reference/p5/saveGif","alias":"saveGif"},"scale()":{"relativeUrl":"/reference/p5/scale","alias":"scale"},"select()":{"relativeUrl":"/reference/p5/select","alias":"select"},"selectAll()":{"relativeUrl":"/reference/p5/selectAll","alias":"selectAll"},"set()":{"relativeUrl":"/reference/p5/set","alias":"set"},"setCamera()":{"relativeUrl":"/reference/p5/setCamera","alias":"setCamera"},"shader()":{"relativeUrl":"/reference/p5/shader","alias":"shader"},"shearX()":{"relativeUrl":"/reference/p5/shearX","alias":"shearX"},"shearY()":{"relativeUrl":"/reference/p5/shearY","alias":"shearY"},"shininess()":{"relativeUrl":"/reference/p5/shininess","alias":"shininess"},"sin()":{"relativeUrl":"/reference/p5/sin","alias":"sin"},"specularColor()":{"relativeUrl":"/reference/p5/specularColor","alias":"specularColor"},"specularMaterial()":{"relativeUrl":"/reference/p5/specularMaterial","alias":"specularMaterial"},"sphere()":{"relativeUrl":"/reference/p5/sphere","alias":"sphere"},"spotLight()":{"relativeUrl":"/reference/p5/spotLight","alias":"spotLight"},"sq()":{"relativeUrl":"/reference/p5/sq","alias":"sq"},"sqrt()":{"relativeUrl":"/reference/p5/sqrt","alias":"sqrt"},"String":{"relativeUrl":"/reference/p5/string"},"strokeCap()":{"relativeUrl":"/reference/p5/strokeCap","alias":"strokeCap"},"strokeJoin()":{"relativeUrl":"/reference/p5/strokeJoin","alias":"strokeJoin"},"strokeWeight()":{"relativeUrl":"/reference/p5/strokeWeight","alias":"strokeWeight"},"tan()":{"relativeUrl":"/reference/p5/tan","alias":"tan"},"text()":{"relativeUrl":"/reference/p5/text","alias":"text"},"textAlign()":{"relativeUrl":"/reference/p5/textAlign","alias":"textAlign"},"textAscent()":{"relativeUrl":"/reference/p5/textAscent","alias":"textAscent"},"textDescent()":{"relativeUrl":"/reference/p5/textDescent","alias":"textDescent"},"textFont()":{"relativeUrl":"/reference/p5/textFont","alias":"textFont"},"textLeading()":{"relativeUrl":"/reference/p5/textLeading","alias":"textLeading"},"textOutput()":{"relativeUrl":"/reference/p5/textOutput","alias":"textOutput"},"textSize()":{"relativeUrl":"/reference/p5/textSize","alias":"textSize"},"textStyle()":{"relativeUrl":"/reference/p5/textStyle","alias":"textStyle"},"textWidth()":{"relativeUrl":"/reference/p5/textWidth","alias":"textWidth"},"textWrap()":{"relativeUrl":"/reference/p5/textWrap","alias":"textWrap"},"texture()":{"relativeUrl":"/reference/p5/texture","alias":"texture"},"textureMode()":{"relativeUrl":"/reference/p5/textureMode","alias":"textureMode"},"textureWrap()":{"relativeUrl":"/reference/p5/textureWrap","alias":"textureWrap"},"tint()":{"relativeUrl":"/reference/p5/tint","alias":"tint"},"torus()":{"relativeUrl":"/reference/p5/torus","alias":"torus"},"touchEnded()":{"relativeUrl":"/reference/p5/touchEnded","alias":"touchEnded"},"touchMoved()":{"relativeUrl":"/reference/p5/touchMoved","alias":"touchMoved"},"touchStarted()":{"relativeUrl":"/reference/p5/touchStarted","alias":"touchStarted"},"touches":{"relativeUrl":"/reference/p5/touches"},"translate()":{"relativeUrl":"/reference/p5/translate","alias":"translate"},"triangle()":{"relativeUrl":"/reference/p5/triangle","alias":"triangle"},"updatePixels()":{"relativeUrl":"/reference/p5/updatePixels","alias":"updatePixels"},"vertex()":{"relativeUrl":"/reference/p5/vertex","alias":"vertex"},"webglVersion":{"relativeUrl":"/reference/p5/webglVersion"},"while":{"relativeUrl":"/reference/p5/while"},"width":{"relativeUrl":"/reference/p5/width"},"winMouseX":{"relativeUrl":"/reference/p5/winMouseX"},"winMouseY":{"relativeUrl":"/reference/p5/winMouseY"},"windowHeight":{"relativeUrl":"/reference/p5/windowHeight"},"windowResized()":{"relativeUrl":"/reference/p5/windowResized","alias":"windowResized"},"windowWidth":{"relativeUrl":"/reference/p5/windowWidth"},"p5.Camera.camera()":{"relativeUrl":"/reference/p5.Camera/camera","alias":"camera"},"p5.Camera.centerX":{"relativeUrl":"/reference/p5.Camera/centerX","alias":"centerX"},"p5.Camera.centerY":{"relativeUrl":"/reference/p5.Camera/centerY","alias":"centerY"},"p5.Camera.centerZ":{"relativeUrl":"/reference/p5.Camera/centerZ","alias":"centerZ"},"p5.Camera.eyeX":{"relativeUrl":"/reference/p5.Camera/eyeX","alias":"eyeX"},"p5.Camera.eyeY":{"relativeUrl":"/reference/p5.Camera/eyeY","alias":"eyeY"},"p5.Camera.eyeZ":{"relativeUrl":"/reference/p5.Camera/eyeZ","alias":"eyeZ"},"p5.Camera.frustum()":{"relativeUrl":"/reference/p5.Camera/frustum","alias":"frustum"},"p5.Camera.lookAt()":{"relativeUrl":"/reference/p5.Camera/lookAt","alias":"lookAt"},"p5.Camera.move()":{"relativeUrl":"/reference/p5.Camera/move","alias":"move"},"p5.Camera.ortho()":{"relativeUrl":"/reference/p5.Camera/ortho","alias":"ortho"},"p5.Camera.pan()":{"relativeUrl":"/reference/p5.Camera/pan","alias":"pan"},"p5.Camera.perspective()":{"relativeUrl":"/reference/p5.Camera/perspective","alias":"perspective"},"p5.Camera.set()":{"relativeUrl":"/reference/p5.Camera/set","alias":"set"},"p5.Camera.setPosition()":{"relativeUrl":"/reference/p5.Camera/setPosition","alias":"setPosition"},"p5.Camera.slerp()":{"relativeUrl":"/reference/p5.Camera/slerp","alias":"slerp"},"p5.Camera.tilt()":{"relativeUrl":"/reference/p5.Camera/tilt","alias":"tilt"},"p5.Camera.upX":{"relativeUrl":"/reference/p5.Camera/upX","alias":"upX"},"p5.Camera.upY":{"relativeUrl":"/reference/p5.Camera/upY","alias":"upY"},"p5.Camera.upZ":{"relativeUrl":"/reference/p5.Camera/upZ","alias":"upZ"},"p5.Shader.copyToContext()":{"relativeUrl":"/reference/p5.Shader/copyToContext","alias":"copyToContext"},"p5.Shader.setUniform()":{"relativeUrl":"/reference/p5.Shader/setUniform","alias":"setUniform"}},"contributor-docs-fallback":{"🌸 Welcome! 🌺\n":{"relativeUrl":"/contribute/README","description":"interest contributing p5js collaborative project contributions volunteers community contributors appreciates involvement forms acknowledge capacity time financial means participate actively ways expand meaning word contributor experienced developer starting unique perspectives skills experiences enrich encourage involved works includes documentation teaching writing code making art design activism organizing curating imagine [contribute page](https://p5js.org/contribute/) overview contribute [all-contributors](https://github.com/kentcdodds/all-contributors/) specification @all-contributors bot handle adding people READMEmd file add issue PR comment ``` @[your GitHub handle] [your contribution type] find relevant type [here](https://allcontributors.org/docs/en/emoji-key/). automatically list merging docs published [website](https://p5js.org/contribute/), hosted [GitHub repository](https://github.com/processing/p5.js/tree/main/contributor_docs/). Contributing stress free experience levels fixing small typo refactoring complex 3D rendering functionalities things familiar read [community statement](https://p5js.org/about/#community-statement). prioritizing work expands access inclusion accessibility [our statement]/access/ details Started ready start started reasons purpose split roughly categories * Source including Non-source Depending kind section ## [Source contribution]/contributor_guidelines/ typical p5js-website repository follow steps Open Discuss Approved opening Pull Request Make merged Head [this link]/contributor_guidelines/ guided step navigate table contents page skip part refresher stick workflow strictly contributed projects feel hoops jump simple aimed make easy stewards/maintainers meaningfully spending working accepted ensure proposals fixes adequately discussed considered begin save steward/maintainer additional review outright happen result **We learning opportunity** measure sucess volume received limit long takes complete pace check period inactivity stewards maintainers support information related area general maintenance [steward guidelines]/steward_guidelines/ non-source exhaustively listed involve repositories examples tutorials website planned reach channel email social media [Discourse forum](https://discourse.processing.org/c/p5js/10/), Discord **Create** Inspire sketches designers artists coders programmers showcase creative amazing sketch gallery Dont forget tag @p5xjs [Instagram](https://www.instagram.com/p5xjs/) [X](https://twitter.com/p5xjs/), share **Teach** Teach workshop class friend collaborator Share syllabus video materials **Organize** Host events Curate exhibition Activate local **Donate** open-source made supported dedicated remain restrictions impact life position give back donation Processing Foundation donations directly fund development features improved designed inclusive welcomes background resources level thought dont [let know]mailtohello@p5jsorg participation important contributes lively"},"Our Focus on Access\n":{"relativeUrl":"/contribute/access","description":"{/* commitment access means contributors users library */} [2019 Contributors Conference](https://p5js.org/events/contributors-conference-2019/), p5js made add features increase inclusion accessibility accept feature requests support efforts commit work acknowledging dismantling preventing barriers intersecting[^1] experiences diversity impact participation include alignments gender race ethnicity sexuality language location cetera center marginalized groups continued comfort privileged community collectively exploring meaning learning practice teach choose expansive intersectional coalitionary frameworks part core values outlined [Community Statement](https://p5js.org/about/#community-statement). ## Kinds Increasing focused expanding raw number people making approachable excluded consequence structural oppression extends tools platforms offers includes makeup decision-making actions leadership resist technological culture speed growth competition prioritize intentionality slowness accommodation accountability acts collective care Access equitable * People speak languages English Black Indigenous Color ethnicities Lesbian gay bisexual queer questioning pansexual asexual Trans genderfluid agender intersex two-spirit women genders blind d/Deaf[^2] hard hearing disabled/have disability neurodivergent chronically ill[^3] lower income lack financial cultural capital prior experience open source creative coding diverse educational backgrounds age including children elders variety skill internet religious systematically historically underrepresented intersections thereof recognize complexity terms describe respective identities Language nuanced evolving contested exhaustive list provide attempt accountable commitments ### Examples examples Translating documentation materials decentering linguistic imperialism[^4] Rolando Vargas [Processing Kuna Language](https://medium.com/@ProcessingOrg/culture-as-translation-processing-in-kuna-language-with-rolando-vargas-and-edinson-izquierdo-8079f14851f7/), Felipe Santos Gomes Julia Brasil Katherine Finn Zander Marcela Mancinos [Pê Cinco Internationalization Popularization Portuguese Speakers](https://medium.com/processing-foundation/translating-p5-js-into-portuguese-for-the-brazilian-community-14b969e77ab1/)) Improving assistive technologies screen readers Katie Lius [Adding Alt Text p5.js](https://medium.com/processing-foundation/adding-alt-text-e2c7684e44f8/), Claire Kearney-Volpes [P5 Accessibility Project](https://medium.com/processing-foundation/p5-accessibility-115d84535fa8/)) [Web Content Guidelines](https://www.w3.org/TR/WCAG21/) working easier follow projects Making error messages helpful supportive tool [p5js Friendly Error System FES]/friendly_error_system/ Mentoring supporting learners communities digital arts Hosting events Day 2022](https://p5js.org/events/p5js-access-day-2022/), [The Web W3C TPAC 2020)](https://medium.com/processing-foundation/p5-js-x-w3c-tpac-bee4c621a053/) access-centered organizing tactics ASL interpretation live captioning accessible venues Supporting creation resources Adekemi Sijuwade-Ukadikes [A11y Syllabus](http://a11ysyllabus.site/)) Publishing reports WCAG guidelines plain focus beginners [OSACC Report](https://github.com/processing/OSACC-p5.js-Access-Report/)) Maintenance accepting effort criteria reflected issue pull request templates affirm intention maintain existing set fix bugs area codebase consistency makes improve Performance increases powerful hardware Support drawing to/reading framebuffers Consistency API Add arcVertex creating arcs beginShape/endShape *** living document continue conversation invite engage describes ideas suggestions share Github emailing [hello@p5jsorg]mailtohello@p5jsorg version Statement revised collaboration Evelyn Masso Nat Decker Bobby Joe Smith III Sammie Veeler Sonia Suhyun Choi Xin Kate Hollenbach Lauren Lee McCarthy Caroline Sinders Qianqian Ye Tristan Jovani Magno Espinoza Tanvi Sharma Tsige Tafesse Sarah Ciston Open Source Arts Conference finalized published Processing Foundation Fellowship [^1] Crenshaw Kimberlé Demarginalizing intersection sex black feminist critique antidiscrimination doctrine theory antiracist politics University Chicago Legal Forum 139–167 ISSN 0892-5593 Full text Archiveorg [^2] Capital Deaf refers culturally case deaf audiological term identity [^3] differing preferences person-first identity-first Read [Unpacking debate autism community](https://news.northeastern.edu/2018/07/12/unpacking-the-debate-over-person-first-vs-identity-first-language-in-the-autism-community/), [Disability-Affirming Person-First versus Identity-First Language](https://editorstorontoblog.com/2024/02/23/disability-affirming-language-person-first-versus-identity-first-language/), [Person-First Glossary](https://ogs.ny.gov/system/files/documents/2024/02/person-first-and-identity-first-glossary_english_final.pdf). [^4] Linguistic Imperialism ongoing domination/prioritization/imposition expense native due imperial expansion globalization"},"Contributing to the p5.js Reference\n":{"relativeUrl":"/contribute/contributing_to_the_p5js_reference","description":"{/* Write edit p5js reference format */} author code [reference](https://p5js.org/reference/) page website including alongside librarys source specialized comments include description functions signature parameters return usage examples words content function/variables built document show write eventually rendered correctly follow guide editing writing function variable ## quick introduction work lines library ``` /** * Calculates sine angle `sin` geometric tasks creative coding values returned oscillate -1 input increases takes account current angleMode @method sin @param {Number} @return @example draw { background200 = frameCount sint + linex circlex describe'A white ball string oscillates down' } sinx pointx series black dots form wave pattern' cost infinity symbol' */ actual JavaScript defines Reference start `/**` end `*/` line starting `*` block manner interpreted documentation familiar style [JSDoc](https://jsdoc.app/). JSDoc similar tool called [YUIDoc](https://yui.github.io/yuidoc/), syntax comment divided individual elements Lets break section compare [`sin()`](https://p5js.org/reference/p5/sin/). top text markdown HTML concise describe details quirks behaviors typically sections `@` symbol keywords `@method` define case note brackets `` `@param` arguments accepts keyword stored curly `{}` type parameter word rest `@return` generically {type} Description optional add square [name] ### Additional info Constants defined [`constants.js`](https://github.com/processing/p5.js/blob/main/src/core/constants.js) `{Constant}` valid enumerated `either` {Constant} horizAlign horizontal alignment LEFT CENTER types data tag left Chaining method returns parent object skip @chainable signatures multiple options individually [`background()`](https://p5js.org/reference/p5/background/) number Syntax Choose version list template additional tags background {String} colorstring color formats integer rgb rgba percentage 3-digit hex 6-digit [a] alpha gray specifies Multiple create separate difference addition Limit feature unnecessary noise variables looked references constants Variables structure system mouseX position mouse relative canvas top-left corner 2-D -width/2 -height/2 WebGL touch hold recent point @property @readOnly // Move background244 linemouseX describe'horizontal moves x-position' `mouseX` `@property` defining `@readonly` present internally overwritten directly user Adding `mouseX`s talked `@example` run visit [Screenshot red showing section]src/content/contributor-docs/images/reference-screenshotpng relevant const color255 fillc rect15 Sets redValue redc fillredValue rect50 rectangles edges rectangle yellow opening closing insert basic principle good things simple minimal meaningful explain works complicated 100x100 pixels `setup` included automatically wrapped default created wont practices featureTo closed separated blank arc50 PI QUARTER_PI OPEN describe'An ellipse arc open' describe'The bottom half arc' execute class `norender` describe'ellipse part automated tests requires interaction `notest` setup createCanvas100 saveCanvasc myCanvas' jpg' external asset files put [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets/) folder reuse link assets/filenameext [tint()](https://p5js.org/reference/p5/tint/) Add `describe` Finally required screen-reader accessible Include happening xoff background204 noisexoff width linen height vertical randomly right' noiseScale background0 [web accessibility contributor documentation]/web_accessibility/#describe tools needed situationally `@private` property private marked reason mark internal features `_start` _start calls preload @private p5prototype_start `@module` related file Modules correspond group split Inside module submodules `@submodule` `@for` relationship `p5` effectively `@requires` imported modules depends @module Color @submodule Creating Reading @for p5 @requires core convention subfolder `src/` inside subfolders adding subfolders/files shouldnt `@class` Class constructors `@constructor` classs constructor `p5Color` stores mode level maxes active construction interpret passed object's determine output formatting saturation array ideal RGBA floating normalized calculate closest screen colors levels Screen renderer representations calculated results cached performance floating-point numbers recommended instance @class p5Color @constructor {p5} [pInst] pointer {Number[]|String} vals green blue channel CSS Generating previewing repository set generate preview needing build main command npm docs `docs/reference/datajson` minification render continuous docsdev launch live update time make refresh making running browser `docs/` cases `docs/yuidoc-p5-theme/assets` steps checkout [JSDoc](https://jsdoc.app/) [YUIDoc](https://yui.github.io/yuidoc/). issues [#6519](https://github.com/processing/p5.js/issues/6519/) [#6045](https://github.com/processing/p5.js/issues/6045/). [contributor guidelines]/contributor_guidelines/ place"},"Contributor Guidelines\n":{"relativeUrl":"/contribute/contributor_guidelines","description":"{/* Essential information contributing p5js GitHub */} contributor guidelines document contributors contribute code refresh memories technical steps contributions repositories writing tutorials planning classes organizing events relevant pages Stewards maintainers find [steward guidelines]/steward_guidelines/ helpful reviewing issues pull requests long comprehensive signpost points utilize table contents sections Feel free skip planned **If start section step-by-step setup development process Quick Started Developers section** Table Contents * [All issues]#all-about-issues [What issues]#what-are-issues [Issue templates]#issue-templates [Found bug]#found-a-bug [Existing Feature Enhancement]#existing-feature-enhancement [New Request]#new-feature-request [Discussion]#discussion [Working codebase]#working-on-the-p5js-codebase [Quick Developers]#quick-get-started-for-developers [Using Github edit functionality]#using-the-github-edit-functionality [Forking working fork]#forking-p5js-and-working-from-your-fork Desktop]#using-github-desktop git command line interface]#using-the-git-command-line-interface [Codebase breakdown]#codebase-breakdown [Build setup]#build-setup [Git workflow]#git-workflow [Source code]#source-code [Unit tests]#unit-tests [Inline documentation]#inline-documentation [Accessibility]#accessibility [Code standard]#code-standard [Software Design principles]#software-design-principles [Pull requests]#pull-requests [Creating request]#creating-a-pull-request request information]#pull-request-information [Title]#title [Resolves]#resolves [Changes]#changes [Screenshots change]#screenshots-of-the-change [PR Checklist]#pr-checklist [Rebase resolve conflicts]#rebase-and-resolve-conflicts [Discuss amend]#discuss-and-amend *** majority activity repo short great place contribution journey ## [A cropped screenshot library repository showing top corner red box drawn surrounding Issues tab]src/content/contributor-docs/images/issues-tabpng Issue generic post aims describe issue bug report add feature discussion works related Comments added account including bots discuss topics project opened wide variety reasons source Topics debugging inviting collaborators unrelated discussed [forum](https://discourse.processing.com) platforms [Discord](https://discord.gg/SHQ8dH25r9/). created easy-to-use templates aid deciding topic posted p5js's make easier stewards understand review file receive reply faster [Screenshot title Warning logged Safari filter shader 2D mode #6597]src/content/contributor-docs/images/github-issuepng simply tab click button side presented options corresponds template redirects question recommend choosing option ensure receives attention promptly [Cropped repository's page green highlighted it]src/content/contributor-docs/images/new-issuepng ### bug\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml) encounter incorrect behavior behaving documentation [this template](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml). note debug sketch problem [Discourse forum](https://discourse.processing.org) fields fill *Most sub-area p5js* - helps identify respond automatically tagging [labels](https://github.com/processing/p5.js/labels/). *p5js version* version number `` tag link p5js/p5minjs similar `142` numbers separated periods *Web browser isolate behaviors browsers follow instructions Chrome Firefox address bar navigate `chrome//version` `aboutsupport` menu item choose *Operating System* include OS `macOS 125` bugs stem *Steps reproduce this* arguably important share list detailed replicating Sharing basic sample demonstrates replicate facing formulating solution **Replication key** aimed provide sketch's environment solutions **Be avoid statements** image function work specific display loaded GIF size things expect expected actual fix reported description simple suggestion support **You approved implementation** proposed accepted approach filed fixing closed approval reports [area steward maintainer](https://github.com/processing/p5.js#stewards) begin Enhancement\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Enhancement\\&projects=\\&template=existing-feature-enhancement.yml) propose functionality existing features functions constants rendering define color `color` accept colors *Increasing Access* required field insert statement adding enhancement [increase access]/access/ people historically marginalized creative arts technology **No proposals this** offer members community argument addresses accessibility *Feature details* proposal good includes clear case needed guarantee Request\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Feature+Request\\&projects=\\&template=feature-request.yml) drawing native HTML elements `createTable` overlap cases whichever feel form identical Existing Enhancement [previous section]#existing-feature-enhancement details maintainers](https://github.com/processing/p5.js#stewards) [\"Discussion\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Discussion\\&projects=\\&template=discussion.yml) filing fit fitting rare practice adopt Web API [new request]#new-feature-request additional [feature enchancement]#existing-feature-enchancement announcement local coding event forum contacting Processing Foundation publicity opening Labels panel panels labels area bare minimum text link](https://github.com/processing/p5.js/issues/6517/) [**⬆ back top**]#contributor-guidelines Working codebase Prerequisites proceed minimally familiar nodejs v18 Introduction implementation ready Similarly joined discussions original author volunteer submit assign jump queue** PR willingness assigned prioritize serve order accepting months individual check leaving polite comment progress generally time frame basis takes pace confident hard limit spend trouble aspect hesitate guide work/contribute p5js'🌸 developer directly improving sub-projects [Friendly Error Systems]/friendly_error_system/ [Create fork p5.js.](https://docs.github.com/en/get-started/quickstart/fork-a-repo/) [Clone computer.](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository/) [Add upstream command](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/configuring-a-remote-repository-for-a-fork/): ``` remote https://github.com/processing/p5.js Make machine [NodeJs](https://nodejs.org/en/download/) installed node -v Install dependencies npm ci Create branch `main` descriptive checkout -b [branch_name] making frequently run tests ensures broken test Add unit commit create Request]#pull-requests viewing web interface content pencil icon convenient provided simplifies processes covering quick edits view src/color/color\\_conversionjs arrow pointing image]src/content/contributor-docs/images/edit-filepng recommended main complex built tested locally fluent compared editing Forking step meaning open purpose means creating copy storing Fork labeled 593k outlined dark orange]src/content/contributor-docs/images/forkpng direct write access official Desktop program lets graphical user typing commands terminal switch [download install Desktop.](https://desktop.github.com/) application sign signed projects Select named `yourUsername/p5js` blue Clone change leave default settings continue [The signing half screen lists bottom right]src/content/contributor-docs/images/github-desktop-initpng cloned plan parent Continue cloning asks purposes]src/content/contributor-docs/images/github-desktop-forkpng `git` fork's URL clicking Code `https://github.com/limzykenneth/p5.js.git`. files landing orange outline]src/content/contributor-docs/images/code-buttonpng clone download Run folder store [git_url] Replace `[git_url]` copied minutes depending speed internet connection coffee finished downloaded `p5js` preferred editor Codebase breakdown key folders `src` eventually combined final p5minjs lives [`test`]/unit_testing/ testing examples `tasks` custom build `Gruntfilejs` configuration `contributor_docs` configurations kinds modifications Build set Assuming downloads Pretty Git workflow parts subsections building scratch complete errors running `lib/` `p5minjs` starting implies branched commits affecting branches Branches enable multiple isolated confidence mess affect Current Branch header window enter purposes describing selection entering exist appears]src/content/contributor-docs/images/github-desktop-create-branchpng `git branch_name` replacing `branch_name` separate `npm test` Running breaking moving committing made collection saved essentially records current state arise general aim lump big guideline completed subtask sentence app show changed left sidebar Type high-level elaborate blank Click Commit finalize circled lower window]src/content/contributor-docs/images/github-desktop-commitpng Check status listed [restore](https://git-scm.com/docs/git-restore/) intended diff intend Stage -m [your_commit_message] `[your_commit_message]` replaced message avoiding statements `Documentation 1` `Add circle function` Repeat periodically Source visit documented reference website Notice typos src/core/shape/2d\\_primitivesjs Part underline it]src/content/contributor-docs/images/reference-code-linkpng Unit [here]/unit_testing/ Note implementations included Inline inline [here]/contributing_to_the_p5js_reference/ Accessibility [here]/web_accessibility/ Friendly System [here]/friendly_error_system/ standard style enforced [ESLlint](https://eslint.org/). pass linting easiest ESLint plugin error highlighting popular editors Software principles mind design priorities differ coming familiarize **Access** foremost decisions increases groups Read **Beginner Friendly** friendly beginner coders offering low barrier interactive visual cutting-edge HTML5/Canvas/DOM APIs **Educational** focused curriculum supports educational supporting class curricula introduce core engaging **JavaScript community** practices accessible beginners modeling proper JavaScript patterns usage abstracting open-source wider creation dissemination **Processing inspired language transition Java easy Pull applicable committed preparing merged formally merge forked history Creating push uploading changes[A online red]src/content/contributor-docs/images/publish-branchpng uploaded prompting Clicking preview Press Request pushing items pane Review marked circle]src/content/contributor-docs/images/preview-pull-requestpng -u origin dropdown Contribute Open response request]src/content/contributor-docs/images/new-branchpng yellow call action Compare request]src/content/contributor-docs/images/recent-pushespng prepopulated template]src/content/contributor-docs/images/new-prpng Title briefly Resolves `Resolves #[Add here]` replace `[Add addressing/fixing [above]#all-about-issues #1234` close `Resolves` `Addresses` Include Screenshots optional circumstances renders visuals canvas Checklist checklist tick `[ ]` `[x]` Rebase conflicts Fix shaders rectMode applied #6603]src/content/contributor-docs/images/opened-prpng inspect pay match times Commits Files base resolved true [rebase](https://git-scm.com/book/en/v2/Git-Branching-Rebasing/) Conflicts recently resolving Basic instruction Resolve button[A conflicting filenames highlighted]src/content/contributor-docs/images/resolve-conflictspng shown `>>>>>>` `=======` shows GitHub's conflict resolution markers highlighted]src/content/contributor-docs/images/conflicts-interfacepng Remove Mark addressed remove mark upper enabled]src/content/contributor-docs/images/mark-as-resolvedpng enabled]src/content/contributor-docs/images/commit-mergepng complicated prefer manual method https://github.com/processing/p5.js` fetch upstream` rebase upstream/main` lib/p5js lib/p5minjs --continue push` Discuss amend maintainer days patient meantime reviewed happen hurray questions panic perfectly normal requested [same before]#git-workflow pushed Leave reviewer"},"Creating an Addon Library\n":{"relativeUrl":"/contribute/creating_libraries","description":"{/* Extend p5js functionalities addon library */} JavaScript code extends adds core functionality wide range doesnt aim cover Web API Addon libraries extend needing incorporate features guide steps creating loads simple CSV file implementing `loadCSV` function examples create * Provide simplified interface [p5.ble.js](https://github.com/ITPNYU/p5.ble.js) [p5.serialserver](https://github.com/p5-serial/p5.serialserver) Implement specialized algorithms [p5.pattern](https://github.com/SYM380/p5.pattern) [p5.mapper](https://github.com/jdeboi/p5.mapper) Test widely browsers [p5.webserial](https://github.com/gohai/p5.webserial/) [p5.joystick](https://github.com/Vamoss/p5.joystick) alternative implementations existing [número](https://github.com/nickmcintyre/numero/) [p5.cmyk.js](https://github.com/jtnimoy/p5.cmyk.js) ## Prerequisites foundation Prototype-based object orientation Javascript Step lets blank call p5loadcsvjs main adding methods p5prototype p5 add method ```js p5prototypeloadCSV = function{ consolelog'I load soon' } ``` includes project global `createCanvas` `background` classes as` p5Element` or` p5Graphics` prototypes `p5Elementprototype` extended `shout` exclamation mark end elements HTML p5Elementprototypeshout { thiseltinnerHTML += ' attached `p5prototype` method` loadCSV` logs message console Run sketch the` ` tag setup createCanvas400 loadCSV ```html tags Running print single accept argument defined parameter filename consolelog`I ${filename} soon` test // Prints datacsv loadCSV'datacsv' access functions variables `circle` `PI` `this` `hour` `minute` customize give information called keyword attach Dont arrow syntax => created refer window === true refers consolelogthis ${thishour}${thisminute}` looked handy implement algorithm perform drawings previous started explore source module written inside details work hood utilize advanced made files asynchronous p5jss loading `loadJSON` `loadStrings` make functionfilename{ result [] fetchfilename thenres restext thendata datasplit'\\n'forEachline resultpushlinesplit'' return creates empty array variable `result` Fetch parse split line rows row words run pass path log output setup{ myCSV printmyCSV notice logging data reason `preload` nature makes returned `fetch` finish fetching Simply moving case solve problem preload{ prints told addons wait `registerPreloadMethod` filename{ this_decrementPreload p5prototyperegisterPreloadMethod'loadCSV' Note things `p5prototyperegisterPreloadMethod` passing string parsed pushed `this_decrementPreload` `myCSV` populated due inherent limitations technique type overwritten body set properties push reassign ``result datasplit`\\n``` bit magic happening firstly additional fetchcode> running related objects passed reference types strings numbers means points original `let []` contrast returning copied lose relation behavior modify long dont separate registerPreloadMethod this\\_decrementPreload internal list track detects counter larger waiting defer `setup` starting `draw` loop Loading decrement calling effectively signaling complete reaches loadings start expected callback support `p5prototypes` major feature action hooks Action lifetime runs clean removed `remove` enable order execution `init` — Called initialized initialization `p5` constructor executed mode automatically assigned `window` active `beforePreload` `afterPreload` `beforeSetup` `afterSetup` `pre` beginning repeatedly `post` hook snippet p5prototypedoRemoveStuff cleanup p5prototyperegisterMethodremove p5prototypesetDefaultBackground Set background pink default thisbackground#ed225d p5prototyperegisterMethodpre unregister longer needed p5prototypeunregisterMethod'remove' extra tips authoring **Must extend** **or prototype p5\\* classes** offer constants instantiated mix offering convenience **Naming conventions** **Don't overwrite properties** extending careful names intend replace **p5js modes instance mode** bound allowing users prefix native `Math` `console` shouldnt named **Class use** `PascalCase`** `camelCase`**** Classes prefixed namespace **do include the** **prefix class names** welcomed non-prefixed p5prototypep5MyClass p5prototypemyAddonMyClass p5prototypemyMethod filenames word lowercase** distinguish p5soundjs encouraged follow format naming **Packaging** **Create JS library** easy projects suggest [bundler](https://rollupjs.org/) provide options normal sketching/debugging [minified](https://terser.org/) version faster **Contributed hosted documented maintained creators** GitHub website fully open **Documentation key** documentation find contributed wont included similar [library overview page](http://p5js.org/reference/#/libraries/p5.sound), [class page](http://p5js.org/reference/#/p5.Vector), [method page](http://p5js.org/reference/#/p5/arc/). **Examples great too** show people online download anything[ ](http://jsfiddle.net/) collection web editor showcase works **Submit ready distribution youd [p5js.org/libraries](https://p5js.org/libraries/) page submit pull request repository [this intruction](https://github.com/processing/p5.js-website/blob/main/docs/contributing_libraries.md)!"},"Documentation Style Guide\n":{"relativeUrl":"/contribute/documentation_style_guide","description":"{/* reference give documentation consistent voice */} guidelines writing p5js document remix resources * Ruby Rails [API Documentation Guidlines](https://guides.rubyonrails.org/api_documentation_guidelines.html) CC BY-SA WordPress [accessibility](https://make.wordpress.org/docs/style-guide/general-guidelines/accessibility/) [inclusivity](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/) CC0 Airbnb [JavaScript Style Guide](https://airbnb.io/javascript/) MIT community large diverse people learn code subset students K–12 classes reading guide write effective inclusive accessible prose purposes simple samples ## Table Contents ### Writing [YUIDoc]#yuidoc [English]#english [Oxford Comma]#oxford-comma [Wording]#wording [Unbiased Documentation]#unbiased-documentation [Accessibility Disability]#accessibility-and-disability Code [Code Samples]#code-samples [Comments]#comments [Whitespace]#whitespace [Semicolons]#semicolons [Naming Conventions]#naming-conventions [Variables]#variables [Strings]#strings [Boolean Operators]#boolean-operators [Conditionals]#conditionals [Iteration]#iteration [Objects]#objects [Arrays]#arrays [Functions]#functions [Arrow Functions]#arrow-functions [Chaining]#chaining [Classes]#classes [Assets]#assets YUIDoc generate API docs navigate root directory run `npm install` execute ``` $ npm grunt yuidev output docs/reference Refer [inline guide]/contributing_to_the_p5js_reference/ information **[⬆ back top]#table-of-contents** English American color center modularize [a list British spelling differences here](https://en.wikipedia.org/wiki/American_and_British_English_spelling_differences/). Oxford Comma comma](https://en.wikipedia.org/wiki/Serial_comma/) red white blue Wording Write declarative sentences Brevity point present tense Returns object Returned return Start comments upper case Follow regular punctuation rules ```javascript // Draws fractal Julia set function drawFractalc radius maxIter { } Communicate current things explicitly implicitly idioms recommended Reorder sections emphasize favored approaches needed model practices approachable beginners comprehensive Explore edge cases combination arguments bugs beginner's Spell names correctly CSS HTML JavaScript WebGL doubt refer authoritative source official Unbiased bias kind person documenting demanding/sensitive topics time educate Ensure doesnt hurt offend unintentionally unbiased gender identity expression sexual orientation race ethnicity language neuro-type size disability class religion culture subculture political opinion age skill level occupation background Make examples Avoid politicized content remain neutral accessibility insult harm Dont make generalizations countries cultures includes positive prejudiced discriminatory minority communities terms related historical events Prefer wordings avoid yous declare variable `let` style variables **Pronouns** | Recommended ----------- ------------------ Accessibility Disability Emphasize reader underlining inconveniences disabled [approved terminology](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology) specific disabilities Maintain uniform structure important points stylistically visually screen test [List readers](https://en.wikipedia.org/wiki/List_of_screen_readers/). multi-platform types devices operating systems Create input gesture based controllers mice keyboards ableist pragmatic approach semantics add purely sake matches element group links tables tabular formats span tags rowspan colspan Tables prove difficult readers **Accessibility terminology** terminiology adapted [Writing documentation](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology). people-first CDC's [Communicating People Disabilities](https://www.cdc.gov/ncbddd/disabilityandhealth/materials/factsheets/fs-communicating-with-people.html). --------------------------------------------------------------- ------------------------------------------------------------------ handicapped differently abled challenged abnormal normal healthy able-bodied \\[disability] victim suffering affected stricken unable speak synthetic speech dumb mute deaf low-hearing hearing-impaired blind low-vision vision-impaired visually-challenged cognitive developmental mentally-challenged slow-learner limited mobility physical crippled Samples Choose meaningful cover basics gotchas advanced syntax explain feature works draw circles circle convey idea follow Comments `//` single line Place newline subject comment Put empty block Bad magicWord = Please' Remember Good keyIsPressed === true thing1 note thing2 space easier read //Remember multiline /** */ //Bad /* Whitespace Indent blocks spaces setup ∙∙∙∙createCanvas400 ∙createCanvas400 ∙∙createCanvas400 leading brace setup{ createCanvas400 opening parenthesis control statements `if` `for` argument ifkeyIsPressed doStuff createCanvas operators y=x+5 + Semicolons Yep > JavaScript's [automatic semicolon insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion) lead subtle Naming Conventions letter descriptive fx vectorFieldx objects functions instances camelCase OBJEcttsssss {} this_is_my_object thisIsMyObject PascalCase player constructorname thisname Player trailing underscores private properties methods Spy constructorsecret this_secret secret thissecret Variables `var` declared confusing scoping reasonable circlex var throws ReferenceError `const` reason reassigned sketches helpful default flower 🌸' const declaration assignment declarations positions getPositions startSearch dragonball z' Assign place scoped - unnecessary search getCharactername default' character charactersfindc => cname false unary increments decrements `++` `--` Unary increment decrement insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion). silent errors incrementing decrementing values expressive update num `+= 1` `num++` num++ --num += -= Strings quotes `''` strings Hilma af Klint template literals interpolation newlines `Hilma Klint` Klint' concatenate characters Broken hard searchable essay \\ simplest convenient definitions' concatenation Template concise provide proper string features Dave' textname conversation serve purpose anymore Goodbye text`${name} Goodbye` unnecessarily escape Backslashes readability bad \\'this\\ \\i\\s \\quoted\\' good Air cool' Boolean Operators `===` `==` `=` shortcuts booleans understand mouseIsPressed == ' collectionlength `switch` parentheses mixing exceptions arithmetic `+` `-` `**` avoids huh && || / Conditionals braces circlemouseX mouseY `else` preceding closing thing3 executes `return` statement mouseIsOnLeft mouseX number letters abc' selection conditionals refrigeratorIsRunning goCatchIt Iteration `while` `do-while` loops iterate fixed times numPetals Pure side effects `forEach` `map` `every` `filter` `find` `findIndex` `reduce` `some` `` arrays `Objectkeys` `Objectvalues` `Objectentries` produce iterating diameters [50 10] circle0 Objects literal creation ball Object quote invalid identifiers improves highlighting engines optimizing performance secretObject x' y' top-secret' classified' dot notation access turtle Leonardo' dodgerblue' weapon 🗡️' food 🍕' turtleName turtle['name'] turtlename bracket `[]` getPropprop turtle[prop] getProp'name' commas mathematician firstName Ada lastName Lovelace Ada' Lovelace' Add comma artist Lauren' McCarthy McCarthy' Arrays array images Array [] [Array#push](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push/) direct items lyrics lyrics[lyricslength] rough edges smooth' lyricspush'Little `slice` method copy numbersCopy Function foo parameter mutate createBalldiameter diameter put parameters drawSpiralangle length drawSpirallength angle Arrow Functions arrow anonymous Callbacks common creates version context `this` complex rewrite loadImage'assets/moonwalkjpg' img imageimg preload Complex preprocessing processImage processImageimg implicit Omit body returns [1 3]mapnumber squared ** `${number} ${squared}` ${number 2}` include reduces changing Chaining individual calls chaining accommodate users familiar concept fill0 strokeWeight6 textSize20 fill0strokeWeight6textSize20 Classes `class` manipulating `prototype` directly exception explaining [create libraries]/creating_libraries/ Moverx thisx thisy thisradius Moverprototypeupdate Moverprototyperender circlethisx Mover constructorx render `extends` inheritance RandomMover extends random-1 custom `toString` toString `Mover ${thisx} ${thisy}` constructor delegates parent Dot DragonBall Ball superx numStars thisnumStars duplicate members Duplicate member prefer duplicates means bug thisxspeed thisyspeed reset Assets load assets folder called models project organization required website folders online Examples [src/data/examples/assets](https://github.com/processing/p5.js-website/tree/main/src/data/examples/) Reference Pages [src/templates/pages/reference/assets](https://github.com/processing/p5.js-website/tree/main/src/templates/pages/reference/assets/) Learn [src/assets/learn](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/) loadImage'moonwalkjpg'"},"Friendly Errors System Contribution Guide\n":{"relativeUrl":"/contribute/fes_contribution_guide","description":"{/* overview Friendly Error System codebase reference developers */} `core/friendly_errors` folder code p5js Systems FES responsible generating messages Errors starting `🌸 says` console supplementing default browser-generated error houses functions types errors gather locations including handling file load autoplay parameter checking library custom implemented contributors document starts FES's main section find full information description syntax parameters location individual part notes previous Development Notes outlining limitations future directions [Development Notes]#-development-notes contributing ## Overview * `p5_friendlyError` formats prints `_report` input message `p5_validateParameters` validate received values wrong type missing `p5_friendlyFileLoadError` guide users related `p5_friendlyAutoplayError` browser's policy diagram outlines connect [A files uses]src/content/contributor-docs/images/fessvg Individual `fes_corejs` `_friendlyError` `_friendlyAutoplayError` helper formatting testing `validate_paramsjs` `_validateParameters` validation `file_errorsjs` `_friendlyFileLoadError `and `browser_errorsjs` list browser generated global class `fesglobalErrors` `stacktracejs` parse stack borrowed [stacktrace.js](https://github.com/stacktracejs/stacktrace.js)). 📚 Reference Functions ### #### Description primary function directly output **Note** `p5_fesLogger` set running tests `consolelog` Mocha case `_fesLogger` pass string tested asserted Syntax ```js _reportmessage func color ``` Parameters @param {String} Message printed [func] {Number|String} [color] CSS `[func]` append link end `[color]` property current version Location core/friendly\\_errors/fes\\_corejs creates p5 call offer `_friendlyFileLoadError` inside `image/loading_displaying/loadImage` `io/files/loadFont` `io/files/loadTable` `io/files/loadJSON` `io/files/loadStrings` `io/files/loadXML` `io/files/loadBytes` sequence _friendlyFileLoadError _report _friendlyFileLoadErrorerrorType filePath {Number} errorType Number Path caused `errorType` refers specific enumerated `core/friendly_errors/file_errorsjs` File categorized distinct cases categorization designed facilitate delivery precise informative scenarios read data font show large Examples Loading /// myFont preload { = loadFont'assets/OpenSans-Regularttf' } setup fill'#ED225D' textFontmyFont textSize36 text'p5*js' draw {} generate addition browsers unsupported 🌸 problem loading path assets/OpenSans-Regularttf correct hosting online local server + info https://github.com/processing/p5.js/wiki/Local-server /friendly\\_errors/file\\_errorsjs called internally linked playing media video due calls `translator` print key `fesautoplay` keys `translations/en/translationjson` runs matching `docs/reference/datajson` created function's inline documentation checks number `fesfriendlyParamError*` `p5_validateParametersFUNCT_NAME ARGUMENTS` `p5prototype_validateParametersFUNCT_NAME requires recommended static general purposes remained debugging unit `accessibility/outputs` `color/creating_reading` `color/setting` `core/environment` `core/rendering` `core/shape/2d_primitives` `core/shape/attributes` `core/shape/curves` `core/shape/vertex` `core/transform` `data/p5TypedDict` `dom/dom` `events/acceleration` `events/keyboard` `image/image` `image/loading_displaying` `image/p5Image` `image/pixel` `io/files` `math/calculation` `math/random` `typography/attributes` `typography/loading_displaying` `utilities/string_functions` `webgl/3d_primitives` `webgl/interaction` `webgl/light` `webgl/loading` `webgl/material` `webgl/p5Camera` validateParameters buildArgTypeCache addType lookupParamDoc scoreOverload testParamTypes testParamType getOverloadErrors _friendlyParamError ValidationError report friendlyWelcome _validateParametersfunc args {Array} User arguments Missing Parameter arc1 [sketchjs line 13] arc expecting (http://p5js.org/reference/#/p5/arc) mismatch 1' MathPI 14] core/friendly\\_errors/validate\\_paramsjs `fesErrorMonitor` monitors guess source provide additional guidance includes trace sequential program leading point thrown Stack traces determining internal user `fesglobalErrors*` comprehensive `fesglobalErrorssyntax*` `fesglobalErrorsreference*` `fesglobalErrorstype*` `processStack` `feswrongPreload` `feslibraryError` stacktrace `printFriendlyStack` `fesglobalErrorsstackTop` `fesglobalErrorsstackSubseq` spell-check `handleMisspelling` `fesmisspelling` `_fesErrorMonitor` automatically triggered `error` events unhandled promise rejections `unhandledrejection` `window` manually catch block someCode catcherr p5_fesErrorMonitorerr works subset `ReferenceError` `SyntaxError` `TypeError` complete supported roughly _fesErrorMonitor processStack printFriendlyError ReferenceError _handleMisspelling computeEditDistance printFriendlyStack SyntaxError TypeError fesErrorMonitorevent {*} event Internal // background background200 8] properties undefined reading background' occurred stated loadImage loadJSON loadFont loadStrings (http://p5js.org/reference/#/p5/preload) cnv createCanvas200 cnvmouseClicked 12] bind' mouseClicked issue passed (http://p5js.org/reference/#/p5/mouseClicked) Scope += 5] defined scope check spelling letter-casing JavaScript case-sensitive https://p5js.org/examples/data-variable-scope.html Spelling xolor1 2] accidentally written xolor (http://p5js.org/reference/#/p5/color) `checkForUserDefinedFunctions` Checks user-defined `setup` `draw` `mouseMoved` capitalization mistake `fescheckUserDefinedFns` checkForUserDefinedFunctionscontext context Current Set window mode instance loadImage'myimagepng' preLoad intentional /friendly\\_errors/fes\\_corejs `helpForMisusedAtTopLevelCode` `fesmisusedTopLevel` err {Boolean} log false 💌 Limitations False Positive versus Negative Cases encounter positives negatives positive alarm warns fine hand negative doesnt alert important identify fix save time make things confusing fixing real problems easier less-than-ideal situations design chosen eliminate choose avoid incorrect warnings distract mislead Related `fesGlobalErrors` detect overwritten variables declared `const` `var` Variables undetected limitation `let` handles variable instantiation resolved functionality web editor details pull request \\[[#4730](https://github.com/processing/p5.js/pull/4730/)]. Performance Issue enabled disabled `p5minjs` prevent slowing process error-checking system significantly slow \\~10x [Friendly performance test](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/performance/code/friendly-error-system/). disable top sketch p5disableFriendlyErrors true disables stuff drawing note action features reduce argument impact providing detailed fails attempt override space Thoughts Future Work Decouple \\[[#5629](https://github.com/processing/p5.js/issues/5629/)] Eliminate Identify Add test coverage - intuitive clear translatable discussion internationalization i18n Book](https://almchung.github.io/p5-fes-i18n-book/en/). common generalize `bezierVertex` `quadraticVertex` required object initiated `nf` `nfc` `nfp` `nfs` Conclusion README outlined structure explains organization purpose making navigate understand Additionally provided included discuss potential areas improvement development excited share insights community Survey conducted 2021-2022 findings [21-22 Report Comic](https://almchung.github.io/p5jsFESsurvey/) Full Report](https://observablehq.com/@almchung/p5-fes-21-survey/). TODO uncomment publish article ways add methods recommend [How Messages]#/ takes adding step-by-step"},"🌸 p5.js Friendly Error System (FES)\n":{"relativeUrl":"/contribute/friendly_error_system","description":"{/* overview system p5js provide errors friendly language */} ## Overview Friendly Error System FES 🌸 aims programmers providing error messages simple supplements browser's console adding alternative description links helpful references prints window [p5js Web Editor] browser JavaScript single minified file p5 p5minjs omits https://editor.p5js.org/ Lowering Barriers Debugging design tool match people lower barriers debugging exception evaluate existing hear directly ran community survey gather feedback future wishes Errors insights members contributors results summary comic full report * [21-22 Survey Report Comic] Full Report] https://almchung.github.io/p5jsFESsurvey/ https://observablehq.com/@almchung/p5-fes-21-survey Writing Messages contribute library writing translating part [internationalization] effort generate content [i18next]-based `translator` function dynamic message generation languages including English - default contributions world 🌐 https://github.com/processing/p5.js/blob/main/contributor_docs/archive/internationalization.md [i18next] https://www.i18next.com/ #### Practices writers prioritize lowering barrier understanding increasing accessibility process [Friendly i18n Book] discusses challenges practices cross-cultural context points book Understand audience make assumptions learn inclusive strive bias harm Adhere Code Conduct] sentences breaking sentence smaller blocks utilizing i18next's [interpolation] feature Prioritize communication great experience Avoid figures speech Introduce technical concept term time consistency link external resource written beginner-friendly plenty short practical examples https://almchung.github.io/p5-fes-i18n-book/ https://www.i18next.com/translation-function/interpolation https://github.com/processing/p5.js/blob/main/CODE_OF_CONDUCT.md#p5js-code-of-conduct [expert blind spots] https://tilt.colostate.edu/TipsAndGuides/Tip/181 public project separate [repo] https://github.com/almchung/p5-fes-i18n-book Location Translation Files based i18next imported `src/core/internationalizationjs` generates text data JSON translation ``` translations/{{detected locale code default=en}}/translationjson detected Korean designator `ko` read translated `translations/ko/translationjson` assemble final include regional information `es-PE` Spanish Peru Structure `translationjson` [format i18next](https://www.i18next.com/misc/json-format/). basic format file's item key double quotation marks `` closed curly brackets `{}` ```json { } ASCII logo saved \\n /\\\\| |/\\\\ \\\\ ` / \\\\/|_|\\\\/ \\n\\n supports interpolation pass variable dynamically `{{}}` set placeholder greeting {{who}} `greeting` `who` ```JavaScript translator'greeting' result generated `fes`'s `fileLoadError` demonstrates image problem loading {{suggestion}} call pre-generated `suggestion` translator'fesfileLoadErrorimage' suggestion Add Modify [internationalization doc] step-by-step guide modifying files Understanding Works section give displays detailed functions [FES Reference + Dev Notes] https://github.com/processing/p5.js/tree/main/src/core/friendly_errors#fes-reference-and-notes-from-developers calls multiple locations situations throws user API custom cases benefit find core components inside `src/core/friendly_errors` `translations/` Message Generators responsible catching generating [`_friendlyFileLoadError`] catches [`_validateParameters`] checks input parameters inline documents \\[`_fesErrorMonitor`] handles global reference [Dev /fes_contribution_guidemd#_friendlyerror /fes_contribution_guidemd#_validateparameters [`_fesErrorMontitor`] /fes_contribution_guidemd#feserrormonitor /fes_contribution_guidemd#-development-notes Displayer `fes_corejs/_friendlyError` p5_friendlyError translator'fesglobalErrorstypenotfunc' translationObj called Turning [disable performance] `p5disableFriendlyErrors` turn `true` p5disableFriendlyErrors = true setup createCanvas100 automatically https://github.com/processing/p5.js/wiki/Optimizing-p5.js-Code-for-Performance#disable-the-friendly-error-system-fes"},"How to add Friendly Error Messages\n":{"relativeUrl":"/contribute/how-to-add-friendly-error-messages","description":"{/* support Friendly Errors method Follow step-by-step guide */} walks steps write Error FE messages System FES 🌸 supports custom error handling outputs logs user dynamically generated [i18next](https://www.i18next.com/)-based `translator` p5js provide translations matching environment ## ❗️No `p5minjs` * integrated \\[i18next] codebase usage limited unminified build minified version includes basic framework internationalization code actual implementation Browserify task `src/core/initjs` specific logic avoid loading setting result adding affect size Prerequisites begin identify cases describes case requires number types arguments [✅Adding Parameter Validation FES]#-adding-parameter-validation-using-fes involves type file catch errors files [📥 Adding File Loading FES]#-handling-file-loading-error-messages-with-fes written detects occurred show [🐈 Library Messages FES]#-adding-library-error-messages-using-fes ✅ parameter validation ### Step – Double-check inline documentation ensure [inline documentation]/contributing_to_the_p5js_reference/ full list parameters `circle` starts description ``` /** Draws circle canvas round shape point edge distance center default set location sets shape's width height diameter origin changed ellipseMode function @method @param {Number} x-coordinate y-coordinate @chainable @example circle30 describe'A white black outline middle gray canvas' */ validate Call `p5_validateParameters` back call `validate_params` format `p5_validateParameters'[name method]' arguments` produce message ```js p5_validateParameters'circle' called provided match expectations line p5prototypecircle = { const args Arrayprototypeslicecallarguments argspusharguments[2] return this_renderEllipseargs } Build test typical action rebuild `p5js` `npm run build` find `/lib/empty-example/indexhtml` replace script `/p5minjs` `/p5js` Note `lib/p5minjs` doesnt `lib/p5js` edit `/lib/empty-example/sketchjs` Missing Wrong expressions // circle100 required Notice successfully draws hello' generate [sketchjs 9] expecting received (http://p5js.org/reference/#/p5/circle) 14] 12] Number string Congratulations 🎈 📥 Handling Check load divided distinct helpful occurs lets separate situations read data font large found top `core/friendly_errors/file_errorsjs` add `fileLoadErrorCases` existing applied string-based corresponds `case 3` translator'fesfileLoadErrorstrings' suggestion loadStrings scenario remember skip ahead [**Step 4**]#step-4 2**]#step-2 create Discuss issue board ticket discuss creating confirm duplicate Write short paragraph describing loads [issue board](https://github.com/processing/p5.js/issues/), press Issue button choose 💡 Existing Feature Enhancement option empty form Add title lines `fileLoadErrrorCases` \\[a high-level case] Increasing access section enter prepared beginning step check box sub-area question Lastly enhancement details detailing confirming maintainers ready Inside `fileLoadErrorCases`s `switch` statement end {{next number}} translator'fesfileLoadError{{tag name}}' {{name method}} double angle brackets `{{}}` instance previous start 12` braces final `p5_friendlyFileLoadError` `p5_friendlyFileLoadError[case number] [file path]` inside statements `loadStrings` [`httpDo.call()`](https://p5js.org/reference/#/p5/httpDo/) callback executed p5prototypehttpDocall args[0] GET' text' => [ omitted ] functionerr p5_friendlyFileLoadError3 calls `p5_friendlyFileLoadError3 [the argument problem text checking path assets/wrongnametxt correct hosting online running local server + info https://github.com/processing/p5.js/wiki/Local-server implementing 🐈 detect users applicable providing fail-safes values missing Identify [This MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling/) good overview options control flow JavaScripts native constructs \\\\ `p5_friendlyError` `p5_friendlyError'[custom message]' [method name]'` Replace including square `bezierVertex` p5_friendlyError vertex calling bezierVertex' bezierVertex 19] library stated passed (http://p5js.org/reference/#/p5/bezierVertex) ✏️ Writing international audiences writers prioritize lowering barrier understanding increasing accessibility debugging process 7] shown Korean browser `ko-KR` locale 줄7] 최소 3개의 인수argument를 받는 함수 circle에 인수가 1개만 입력되었습니다 [Friendly i18n Book](https://almchung.github.io/p5-fes-i18n-book/) discusses challenges practices writing cross-cultural context main points book Understand audience make assumptions learn language inclusive strive friendly bias harm simple sentences breaking sentence smaller blocks utilize [i18next's interpolation feature.](https://www.i18next.com/translation-function/interpolation/) Prioritize communication great experience languages Avoid figures speech Introduce technical concept term time consistency link external resource beginner-friendly plenty practical examples public project contribute [this repo.](https://github.com/almchung/p5-fes-i18n-book/) 🔍 Optional Unit tests unit bugs early delivering intended contributors accidentally break interfere functionality guides testing [Unit Testing Test Driven Development](https://archive.p5js.org/learn/tdd.html) Andy Timmons [Contributors Doc Testing]/unit_testing/ suite'validateParameters multi-format' test'color optional incorrect type' assertvalidationErrorfunction p5_validateParameters'color' [0 A'] Conclusion instructions include Additionally excited share insights community Survey conducted 2021-2022 findings formats [21-22 Report Comic](https://almchung.github.io/p5jsFESsurvey/) Full Report](https://observablehq.com/@almchung/p5-fes-21-survey/) in-depth information design aspects refer [FES README document]/friendly_error_system/ document detailed explanations development notes beneficial seeking deeper"},"Release process\n":{"relativeUrl":"/contribute/release_process","description":"{/* updates GitHub turned version library */} ## Approach * follow [semver](https://semver.org/) versioning pattern means `MAJORMINORPATCH` Requirements Git nodejs NPM installed system build push access remote repository Secret `NPM_TOKEN` set `ACCESS_TOKEN` Security tokens release steps run fully [repository secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository) created [here](https://docs.npmjs.com/creating-and-viewing-access-tokens/) create read publish token user belongs project personal `p5js` `p5js-website` `p5js-release` repositories generated [here](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token/) scopes choose `repo` `workflow` recommended organization specific account limit account's write required Usage ```sh $ git checkout main npm [major|minor|patch] Choose tag origin v142 Replace number ``` actual Actions CI Monitor check results commands executed action monitored [Actions tab](https://github.com/processing/p5.js/actions/) p5js repo page job clicking give detailed log running [Screenshot job]src/content/contributor-docs/images/release-actionpng completed released Check [release](https://github.com/processing/p5.js/releases/) [NPM](https://www.npmjs.com/package/p5/) pages latest view draft make changelog website updated deploy relevant page](https://github.com/processing/p5.js-website/actions/) desired [Downloads page](https://p5js.org/download/) CDNs bit time day update automatically pull *** happening Action [New release]/github/workflows/releaseyml triggered matches `v***` `npm ___` command Clone setup extract install dependencies `npm` test test` Create files uploaded releases Update Copy `datajson` `dataminjson` location `p5minjs` `p5soundminjs` `datayml` file `enjson` based Commit back Bower libraries principle concentrate place environment step defined workflow part configuration Testing testing difficult [act](https://github.com/nektos/act/) locally tested developed require temporary modifications definition roughly document precise change requirements present mocha Chrome tests needed `apt` setting rest eye error messages information packages missing pushing commented avoid accidentally unintended"},"Steward Guidelines\n":{"relativeUrl":"/contribute/steward_guidelines","description":"{/* Learn manage review contributions p5js */} joined steward seasoned maintainer guide information tips tricks effectively contribute written guidelines stated means adapt practices shown suit workflow ## Table Contents * [Issues]#issues [Bug report]#bug-report [Feature request]#feature-request enhancement]#feature-enhancement [Discussion]#discussion [Pull Requests]#pull-requests [Simple fix]#simple-fix fix]#bug-fix [New feature/feature enhancement]#new-feature-feature-enhancement [Dependabot]#dependabot [Build Process]#build-process [Main build task]#main-build-task [Miscellaneous tasks]#miscellaneous-tasks [Release Process]#release-process [Tips Tricks]#tips--tricks [Reply templates]#reply-templates [GitHub CLI]#github-cli [Managing notifications]#managing-notifications *** Issues encourage source code start issue issues place discussions steps reviewing depend kind repo templates](https://github.com/processing/p5.js/blob/main/.github/ISSUE_TEMPLATE/) order organize kinds authors provide relevant problems step filled-out template determining additional fields filled incorrect ### Bug report Found bug typical addressing reports Replicate goal reviewer attempt replicate question reported opened p5js-website Transfer access leave comment filed direct link provided close replication replicated discussion required determine fix straightforward tricky refer [p5js design principles]/contributor_guidelinesmd#software-design-principles making decision case-by-case basis author Approve fixing leaving assigning cog button side Assignee Leave recognizing replicable Attempt add `help wanted` label signal needing info version browser OS testing environment differs specific Add setup bugs occur web editor locally case redirected [web repo](https://github.com/processing/p5.js-web-editor/). back stems user behavior Determine documentation implementation friendly error system improved prevent mistake made Kindly redirect questions [forum](https://discourse.processing.org/) [Discord](https://discord.com/invite/SHQ8dH25r9/) Feature request Request feature requests part commitment increase make increases communities historically marginalized field details [here]/access/ Increasing Access sufficiently statement member community including reviewers assessed inclusion based criteria fit project scope [design drawing primitive shape considered adopt browser-based IOT protocol narrow avoid excessive bloat rarely features suggest implement addon library unclear fits good idea proof-of-concept helps give users concrete usage importance necessarily complete solution fully integrated core breaking change conflict existing functions variables sketches Features conflicts [major release](https://docs.npmjs.com/about-semantic-versioning/), proposed achieved functionalities simple native JavaScript easy-to-use libraries providing function join array strings `join[Hello world]` `[Hello world]join` preferred requirement considerations fulfilled stewards maintainers approve work begin PR process documented enhancement Existing Enhancement similar difference blurry deals requesting added Similar accepted point [section above]#feature-request Inclusion enhancements attention paid potential modifying previous valid signatures behave approved Discussion type minimal gather feedback topic general coalescing sorts closed conversation finishes resulting created correct applied removed Additional requested included contribution GitHub repositories/contribution process/contribution forum Discord labels glance Pull Requests repositories happen pull Stewards push encouraged follow > contributing found [here](https://github.com/processing/p5.js/blob/main/.github/PULL_REQUEST_TEMPLATE.md). discussed meaning [issue workflow]#issues reviewed instances apply minor typo fixes require open merged merge area exception exists practice contributors words doubt applies solve referenced edit original post Resolves #OOOO Addresses automatically Simple small directly Check Files Changed tab ensure automated CI test passes [The files changed viewing GitHub]src/content/contributor-docs/images/files-changedpng checks passed indicator highlighted button]src/content/contributor-docs/images/all-checks-passedpng ideally initially implemented tested CLI streamline Tricks]#tips-tricks [ ] address behaviors agreed significant performance impact accessibility modern standard coding pass tests include line comments lines [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/commenting-on-a-pull-request#adding-line-comments-to-a-pull-request). suggestion block changes\\ Suggest Change writing request]src/content/contributor-docs/images/suggest-changepng\\ [A suggested appearing fences tag]src/content/contributor-docs/images/suggested-value-changepng\\ previewed diff]src/content/contributor-docs/images/suggestion-previewpng multiple dont single-line times procedure [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/reviewing-proposed-changes-in-a-pull-request/) multiple-line single clarification choose Comment option circled Finish Review menu]src/content/contributor-docs/images/comment-reviewpng mark Approved choosing desired @[all-contributors](https://allcontributors.org/docs/en/emoji-key/) bot called list READMEmd file `[contribution` `type]` full types `@all-contributors` `please` `add` `@[GitHub` `handle]` `for` notable Dependabot PRs visible admins skip section update [semver](https://semver.org/) patch semver long quick check changelog updated dependency recommended major affect current target processes functioning due dependencies bump numbers drop official support versions Nodejs cases API Build cover commands happening scenes [contributors guidelines]/contributor_guidelinesmd#working-on-p5js-codebase detailed Gruntfilejs main definitions tools includes limited Grunt Browserify YUIDoc ESLint Babel Uglify Mocha helpful `default` task backward document explainer Main ``` gruntregisterTask'default' ['lint' test'] run `grunt` npm script `npm test` default consisting `lint` `test` #### Task gruntregisterTask'lint' ['lintsource' lintsamples'] consists tasks `lintsource` `lintsamples` subdivided `eslintbuild` `eslintsource` `eslinttest` scripts `yui` `yuidocprod` `cleanreference` `minjson` extract JSON remove unused minify generated `dataminjson` `eslint-samplessource` custom definition [/tasks/build/eslint-samplesjs]/tasks/build/eslint-samplesjs convention rest built lint examples ```js gruntregisterTask'test' build' connectserver' mochaChrome' mochaTest' nycreport `build` gruntregisterTask'build' browserify' browserifymin' uglify' browserifytest Tasks `browserify` defined [/tasks/build/browserifyjs]/tasks/build/browserifyjs differences builds `browserifymin` intermediate minified data needed FES `uglify` takes output final p5minjs configuration `browserifytest` building identical coverage reporting [Istanbul](https://istanbul.js.org/)). `fsreadFileSync` nodejs replaced file's actual content `brfs-babel` WebGL inline shader separate node\\_modules transpiled match [Browserslist](https://browsersl.ist/) packagejson ES6 import statements CommonJS `require` browserify understands enables newer syntax worrying compatibility bundling bundled `pretty-fast` meant cleaned formatting bit consistent anticipate read inspected left linked closer connectserver spins local server hosting Chrome mochaChrome [/tasks/test/mocha-chromejs]/tasks/test/mocha-chromejs Puppeteer spin headless remote controlled runs HTML `/test` folder unminified unit suites reference mochaTest `mochaChrome` subset set expanded Finally print console Test monitoring points 100% covers Miscellaneous `npx grunt [step]` covered yuidev spinning serves functionally page find website [http://localhost:9001/docs/reference/](http://localhost:9001/docs/reference/). monitor rebuild `yuidev` working move repository time preview slightly simplified confident show correctly Note modifications styling layout watch watchmain watchquick series thing `watch` running detecting `watchmain` `watchquick` Depending save manually Release [release\\_processmd]/release_process/ Tips number overwhelming put things easier utilize Reply templates handy [Saved Replies](https://docs.github.com/en/get-started/writing-on-github/working-with-saved-replies/about-saved-replies/) authoring reply responding replies redirecting accepting Saved Replies efficient create ##### Closing Reproduce reproduce feel free reopen sample demonstrates Snippet closing organizational purposes snippet illustrates Forum tutorials GSOC discuss proposals [forum](https://discourse.processing.org/c/summer-of-code/). lot interest clear explanation [expands access]/access/ Addon great starting docs [Creating Library]/creating_libraries/ Issue reminder tagged tracking development keeping ahead Merged Reviewing complex difficult git PR's Fortunately CLI](https://cli.github.com/) tool greatly installing logging command `gh pr checkout [pull_request_id]` fetching fork creating branch checking switching `git main` visit webpage Managing notifications tabs clicking Watch eye icon top opposite [Cropped screenshot corner showing buttons center Sponsor Fork Starred]src/content/contributor-docs/images/github-repo-metricspng watching events mentions handle activities subscribed [notification page](https://github.com/notifications/), marked dismissed email inbox receive emails customize unsubscribing completely [notifications settings page](https://github.com/settings/notifications/). Setting issues/PRs overwhelmed endless balance Participating @mentions"},"Unit Testing\n":{"relativeUrl":"/contribute/unit_testing","description":"{/* Guide writing tests p5js source code */} Unit testing essential part large codebase stay bug-free small pieces aim test individual components larger base correctness making function class creating object instances correctly unit ensure functions librarys introduce bugs unexpected behavior called regression Tests run `npm test` command terminal guide walk process implementing adding feature existing changing implement relevant ## Prerequisites * foundation Contributor guidelines local development setup inside Files folders test-related files located `test` folder wont focus `unit` subfolder subfolders roughly correspond `src` time counterpart composed modules module public Testing frameworks [Mocha](https://mochajs.org) runner responsible running providing solid framework reporting results long output Mocha doesnt assertion library collection handy lets properties values equal type throws error [Chai's `assert` `expect`)](https://www.chaijs.com/api/assert/) write statements behave Writing start pick variable Lets `p5prototypekeyIsPressed` beginning understand expected *expected behavior* `keyIsPressed` `true` key pressed `false` keys cases boolean - alphabet number special multiple `suite` built-in provided environment file `test/unit/events/keyboardjs` find additional `setup` `teardown` describes case checks single feature/behavior tested argument passed description suite/test purpose give clear suite press ```js suite'p5prototypekeyIsPressed' { test'keyIsPressed boolean' //write } true press' false pressed' ``` structured written Chai's `myp5` defined top section callback creates instance mode sketch myp5 setupfunctiondone p5functionp psetup = `p` parameter access variables assigned functionalities Remember previously mentioned Chai //Asserts assertisBooleanmyp5keyIsPressed create actual practice means condition similar statement throw Chais `assertisBoolean` check `myp5keyIsPressed` [documentation](https://www.chaijs.com/api/assert/) kinds things method behaves correct Adding add component Generally path `test/unit` `src/color/p5Colorjs` `test/unit/color/p5Colorjs` added make copy rename match delete inserting keeping teardown suite'module_name' myID myCanvasID' cnv pcreateCanvas100 cnvidmyID teardownfunction myp5remove `spec` `test/unit/specjs` loaded // test/unit/specjs var spec typography ['attributes' loadFont' p5Font' yourModule'] grouped representing function/variable expand suite'p5prototypeyourFunction' test'should [test something]' assertions suites needed didnt Conventions conventions practices follow `test`s self-contained rely Test minimal thing accepts arguments Prefer `expect` Running straightforward takes simply bit repetitive tricks streamline `npx grunt watchmain` automatically build save manually frequent mark skipped `skip` `only` syntax suiteskip'p5prototypeyourFunction' suiteonly'p5prototypeyourFunction' `grunt yuidev` launch server reference live [`http://127.0.0.1:9001/test/test.html`](http://127.0.0.1:9001/test/test.html) browser debugger middle log complex objects filter search term `grep=` URL [`http://127.0.0.1:9001/test/test.html?grep=framebuffer`](http://127.0.0.1:9001/test/test.html?grep=framebuffer) Visual sketches unexpectedly change implementation features visual lives `test/unit/visual/cases` Inside sample calls `screenshot` visualTest'2D maintain size' functionp5 screenshot p5createCanvas50 p5WEBGL p5noStroke p5fill'red' p5rectModep5CENTER p5rect0 p5width/2 p5height/2 filename list `test/visual/visualTestListjs` Additionally continuous integration pull request `visual` generate screenshots intentionally matching `test/unit/visual/screenshots` re-run inspect [http://127.0.0.1:9001/test/visual.html](http://127.0.0.1:9001/test/visual.html) CI optimizing speed advantageous concise avoid unnecessary frames minimize canvas size load assets specific functionality address scenarios involving operations asynchronous 3D model rendering returning promise resolves completing ensuring efficiency approach visualSuite'3D Model rendering' visualTest'OBJ displayed correctly' Return Promise waits operation complete return Promiseresolve => Load asynchronously p5loadModel'unit/assets/teapotobj' p5background200 p5rotateX10 p5rotateY10 p5modelmodel comparison Resolve completion resolve"},"p5.js Web Accessibility\n":{"relativeUrl":"/contribute/web_accessibility","description":"{/* Understand p5js Web Accessibility features make sketch accessible */} document describes structure web accessibility contributors sketches [screen reader](https://en.wikipedia.org/wiki/Screen_reader/)-accessible, visit [Writing Accessible Canvas Descriptions](https://p5js.org/tutorials/writing-accessible-canvas-descriptions/) tutorial screen reader [Using Screen Reader tutorial](https://p5js.org/tutorials/p5js-with-screen-reader/). canvas HTML element grid pixels doesnt provide reader-accessible information shapes drawn functions readers providing [fallback text](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage#accessible_content) descriptions Ill describe details implementation ## Prerequisites * foundation Contributor guidelines local development setup inside label code Library-generated outputs basic supports library-generated `textOutput` `gridOutput` user-generated `describe` `describeElement` inserted child elements `` work snippet serve ```js function { createCanvas400 } draw background#ccccff textOutput fillorange ellipse100 fillfuchsia rect300 ``` [An orange circle pink square light purple canvas]src/content/contributor-docs/images/sketch-with-shapespng creates output present general description includes size color number > lavender blue list position area shape top left covering 1% canvas\\ fuchsia bottom 2% selected table provided location coordinates location=top area=1%\\ = generates ```html Text Output white lays content form based spatial background objects object types cell depending type circle\\ individually *orange %* *fuchsia generated Grid % user passes `LABEL` argument additional created \\ visible version embedded non-screen users display create unnecessary redundancy recommend part process removing publishing sharing [A text earlier it]src/content/contributor-docs/images/sketch-text-outputpng ### Outputs located [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js), updated distributed library section support #### outputsjs [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js) public methods activate setting `this_accessibleOutputstext` `this_accessibleOutputsgrid `to `true` calling `this_createOutput'textOutput' Fallback'` `this_createOutput'gridOutput' passed parameter method activates `this_accessibleOutputstextLabel` calls Label'` file private `_createOutput` Depending vary initializes `thisingredients` stores data including `shapes` `colors` `pShapes` string previous `thisdummyDOM` exist HTMLCollection DOM `_updateAccsOutput` called end `setup` `draw` accessibleOutputs differs current update `_updateTextOutput` `_updateGridOutput` Calling ingredients helps avoid overwhelming access divs constantly updating `_addAccsOutput` `this_accessibleOutputs` returns true `this_accessibleOutputsgrid` `_accsBackground` `background` resets `thisingredientsshapes` `this_rgbColorName` store `thisingredientscolorsbackground` `_accsCanvasColors` fill stroke updates colors saving `thisingredientscolorsfill` `thisingredientscolorsstroke` names `_accsOutput` Builds creating src/accessibility call helper gather needed include `_getMiddle` Returns middle point centroid rectangles arcs ellipses triangles quadrilaterals `_getPos` left' mid right' `_canvasLocator` 10\\*10 mapped `_getArea` percentage total outputjs `p5prototypetriangle` `p5prototype_renderRect` `p5prototypequad` `p5prototypepoint` `p5prototypeline` `p5prototype_renderEllipse` `p5prototypearc` `p5prototyperedraw` `p5prototyperesizeCanvas` `this_setup` `p5Renderer2Dprototypestroke` `p5Renderer2Dprototypefill` `p5Renderer2Dprototypebackground` textOutputjs [src/accessibility/textOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/textOutput.js) main build summary Building supported `p5` prototype `_textSummary` `_shapeDetails` `_shapeList` gridOutputjs [src/accessibility/gridOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/gridOutput.js) `this_accessibleOutputsgridLabel` maps `_gridSummary` `_gridMap` `_gridShapeDetails` line color\\_namerjs naming important [src/accessibility/color\\_namer.js](https://github.com/processing/p5.js/blob/main/src/accessibility/color_namer.js) `_rgbColorName` receives RGBA values [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js). `p5color_conversion_rgbaToHSBA` HSV `_calculateColor` [colorNamer.js](https://github.com/MathuraMG/color-namer/), developed [2018 Processing Foundation fellowship](https://medium.com/processing-foundation/making-p5-js-accessible-e2ce366e05a0/) consultation blind expert comparing stored `colorLookUp` array returning closest User-generated author-defined optional determines displayed [src/accessibility/describe.js](https://github.com/processing/p5.js/blob/main/src/accessibility/describe.js): `_descriptionText` Checks `FALLBACK` ensures ends punctuation mark ' adds improve readability `_describeHTML` Creates fallback tag adjacent background'pink' fill'red' noStroke circle67 circle83 triangle91 describe'A red heart bottom-right corner' LABEL page reading corner]src/content/contributor-docs/images/sketch-text-output2png describeElement groups meaning custom-drawn made multiple lines Heart corner `_elementName` checks colon character `_describeElementHTML` div describeElement'Heart' circle666 circle832 triangle912 yellow background' corner]src/content/contributor-docs/images/sketch-text-output3png"},"WebGL Contribution Guide\n":{"relativeUrl":"/contribute/webgl_contribution_guide","description":"{/* started working p5js WebGL mode source code */} reading page interested helping work grateful exists explain structure contributions offer tips making ## Resources * Read [p5js architecture overview]/webgl_mode_architecture/ understand differs 2D valuable reference implementation specifics shaders strokes [contributor guidelines]/contributor_guidelines/ information create issues set codebase test helpful bit browser's API p5js's built top [WebGL fundamentals](https://webglfundamentals.org/) core rendering concepts [The Book Shaders](https://thebookofshaders.com/) explains techniques Planning organize open [in GitHub Project](https://github.com/orgs/processing/projects/20/), divide types **System-level changes** longer-term goals far-reaching implications require discussion planning jumping **Bugs solution yet** bug reports debugging narrow ready fixed found discuss fix solutions PR** bugs decided free write **Minor enhancements** features obvious spot current needing fit agreed worth **2D features** exist expected behavior feature implemented match user requirements clear **Features contexts** ways methods coordinates 3D break generally begin **Feature requests** change requests make things mode's roadmap **Documentation** documentation Put Code related `src/webgl` subdirectory directory top-level functions split files based subject area commands light `lightingjs` materials `materialsjs` implementing user-facing classes file class occasionally internal utility `p5Framebufferjs` includes `p5Framebuffer` additionally consists framebuffer-specific subclasses main `p5RendererGL` large handles lot reason functionality description put #### `p5RendererGLjs` Initialization `p5RendererGLImmediatejs` Functionality **immediate mode** drawing shapes stored reused `beginShape` `endShape` `p5RendererGLRetainedjs` **retained reuse `sphere` `materialjs` Management blend modes `3d_primitivesjs` User-facing draw `triangle` define geometry treating input generic shape `Textjs` text Testing ### Consistency hard manually verify add unit tests confident pass adding works check consistency resulting pixels ```js test'coplanar 2D' function { const getColors = functionmode myp5createCanvas20 myp5pixelDensity1 myp5background255 myp5strokeCapmyp5SQUARE myp5strokeJoinmyp5MITER === myp5WEBGL myp5translate-myp5width/2 -myp5height/2 } myp5stroke'black' myp5strokeWeight4 myp5fill'red' myp5rect10 myp5fill'blue' myp5rect0 myp5loadPixels return [myp5pixels] assertdeepEqualgetColorsmyp5P2D getColorsmyp5WEBGL ``` turn antialiasing slightly straight lines axes WebGL-only comparing ensure color expect day robust system compares full image snapshots results pixel test'color interpolation' renderer myp5createCanvas256 // upper lower center myp5beginShape myp5fill200 myp5vertex-128 -128 myp5vertex128 myp5fill0 myp5endShapemyp5CLOSE assertequalrenderer_useVertexColor true assertdeepEqualmyp5get128 [100 255] Performance #1 concern hit performance Typically creating sketches compare frame rates advice measure Disable friendly errors `p5disableFriendlyErrors true` sketch `p5minjs` include error Display average rate sense steady state frameRateP avgFrameRates [] frameRateSum numSamples setup createP frameRatePposition0 frameRate / avgFrameRatespushrate += avgFrameRateslength > -= avgFrameRatesshift frameRatePhtmlroundframeRateSum + avg fps' cases stress parts pipeline complicated model long curve simple `line` called times loop"},"p5.js WebGL Mode Architecture\n":{"relativeUrl":"/contribute/webgl_mode_architecture","description":"{/* overview design decisions make WebGL mode motivation */} document intended contributors library makers extend codebase sketches reading tutorials [on p5js Tutorials page](https://p5js.org/tutorials/#webgl) ## renderers run 2D user [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/) built web browser rendering high-performance 3D graphics key difference direct access computer's GPU allowing performantly render shapes perform image processing tasks track progress issues [a GitHub Project.](https://github.com/orgs/processing/projects/20/) Goals evaluating feature aligns goals **Features beginner-friendly** provide beginner-friendly introduction features offers means offer simple APIs cameras lighting shaders support advanced interfere simplicity core **Improving parity mode** frictionless transition making click easily users create work shader aims superset mode's **Simplicity extensibility paramount** small extensible libraries Keeping makes easier optimize reduce bug surface area Extension avenue include **Improve performance** fast interfering previous Good performance accessible wide variety viewers devices designing ensure performant implementation give preference Design differences browser's canvas context levels abstraction generally lower-level higher-level motivates fundamental p5js's modes * **WebGL creates deeply nested data structures** passes commands leading shallow call stacks contrast responsible breaking triangles caching future reuse complicated logic necessitates splitting code number classes `p5Texture` `p5RenderBuffer` `p5DataArray` implementations readable maintainable customization** control curves rendered converting picks default `curveDetail` API lets line segments predict balance quality case high- low-level APIs** finer-grained faced task picking level high unable advantage low pass managing complexity Drawing ### Creating fills strokes geometry drawn consists draw shape ready component composed calls function `circle` `beginShape` `vertex` renderer [break series points](https://github.com/processing/p5.js/blob/main/src/webgl/3d_primitives.js). points connected lines trigonometry figure place circle `curveVertex` `bezierVertex` look-up tables turn Bézier curve #### Fills outline filled drawing functions `beginShapeTRIANGLE_STRIP` made [libtess](https://github.com/brendankenny/libtess.js/) break [p5.RendererGL.Immediate.js](https://github.com/processing/p5.js/blob/main/src/webgl/p5.RendererGL.Immediate.js), polygon outlines `_processVertices` libtess turns format screen Strokes varying widths styles expand centers form expansion types joins caps illustrated Generated https://codepen.io/davepvm/pen/ZEVdppQ connect add join miter extends edges rectangles intersect point bevel connects corners straight round circular arc switching recompute quad extent bounds display pixels present selected style illustrate fits similar strategy stroke disconnected ends cap square extended determines calculated change based camera's perspective avoid recalculation store information camera-dependent **center line** model space shown red **direction tangent start end blue pink helps compute **a flag uniquely identifies corner shape** Combined normal 90-degree rotation determine direction thickness combine camera intrinsics produce final positions Rendering retained **immediate **retained **Immediate optimized frame time drew spend storing saves memory variations `quadraticVertex` called `endShape` `rect` rounded `bezier` `curve` `line` `image` Retained redrawing dont re-triangulating sending saved `p5Geometry` object stores triangle uploaded buffers Calling `freeGeometry` clears re-upload `sphere` `cone` internally `buildGeometry` runs collects p5Geometry returns redrawn efficiently Materials lights single pick write materials system scene reacts light including color shininess Custom material behavior Shaders **Color Shader** flat colors activated `fill` `stroke` **Lighting complex textures Activated calling `lights` `ambientLight` `directionalLight` `pointLight` `spotLight` adds list added contribute shading fill **Normal/Debug `normalMaterial` Lights Users set parameters position contributes view-independent view-dependent reflections reflection matches desired setting `specularColor` **color shader** properties **Fill color** Set applies `beginShape`/`endShape` apply vertex texture `texture` override mixed diffuse describes bright dark areas due directly cast **Specular material** specular reflected highlights shape's parameter `specularMaterial` unspecified **Shininess** `shininess` sharp **Ambient ambient Ambient constant omnidirectional `ambientMaterial` **Emissive `emissiveMaterial` producing Shader turned attributes uniforms reference custom supply automatically writers unclear Future section describe plans improving improve publicly documenting supporting Global objects contexts global `uniform mat4 uModelViewMatrix` matrix convert object-space camera-space uProjectionMatrix` mat3 uNormalMatrix` normals Additionally per-vertex `attribute vec3 aPosition` aNormal` pointing outward vec2 aTexCoord` coordinate referring location aVertexColor` optional bool uUseLighting` provided `uUseLighting` passed ##### int uAmbientLightCount` maximum uAmbientColor[5]` Directional uDirectionalLightCount` directional uLightingDirection[5]` Light directions uDirectionalDiffuseColors[5]` uDirectionalSpecularColors[5]` Point uPointLightCount` uPointLightLocation[5]` Locations uPointLightDiffuseColors[5]` Diffuse uPointLightSpecularColors[5]` Specular Spot uSpotLightCount` spot float uSpotLightAngle[5]` cone radii uSpotLightConc[5]` Concentration focus uSpotLightDiffuseColors[5]` uSpotLightSpecularColors[5]` uSpotLightLocation[5]` locations uSpotLightDirection[5]` Fill vec4 uMaterialColor` uUseVertexColor` Per-vertex isTexture` sampler2D uSampler` uTint` tint multiplier uSpecular` show uShininess` uSpecularMatColor` blend uHasSetAmbient` uAmbientMatColor` inputs Lines supplied uViewport` vector `[minX minY maxX maxY]` rectangle uPerspective` boolean projection uStrokeJoin` enum representing represent `ROUND` `MITER` `BEVEL` uStrokeCap` `PROJECT` `SQUARE` aTangentIn` segment aTangentOut` aSide` part details Points uPointSize` radius Classes ```mermaid --- title classDiagram class Base[p5Renderer] { } P2D[p5Renderer2D] WebGL[p5RendererGL] Geometry[p5Geometry] Shader[p5Shader] Texture[p5Texture] Framebuffer[p5Framebuffer] Base <|-- P2D o-- Geometry *-- Texture Framebuffer ``` entry **p5RendererGL** Top-level current conform common `p5Renderer` interface split `p5RendererGLImmediatejs` `p5RendererGLRetainedjs` references models stored `retainedModegeometry` map `modelyourGeometry` geometry's resources main `p5Graphics` entries represented `p5Shader` `shaderyourShader` handles compiling source uniform type `p5Image` `p5MediaElement` `p5Framebuffer` asset data's representation send images manually updated assets changed video Textures unique Framebuffers surfaces Unlike `p5Framebuffer`s live transferred CPU bottleneck extra transfer reason functional aim building blocks craft extensions block considered confidently commit major milestone sufficient ecosystem lacking extension **Extend richer content** accomplish supported stable update animated gltf group multiple imported unsupported **Enable brittle shaders** integrates forced scratch copy paste parts versions internal naming structure import pieces positioning augment [an issue open task.](https://github.com/processing/p5.js/issues/6144/) strike method introduce tune output faster lower-quality Line bottlenecks state benefit lower fidelity higher options methods usage patterns `endShapeshouldClose count` supports instanced efficient"}},"examples-fallback":{"Shape Primitives":{"relativeUrl":"/examples/shapes-and-color-shape-primitives","description":"program demonstrates basic shape primitive functions square rect ellipse circle arc line triangle quad"},"Color":{"relativeUrl":"/examples/shapes-and-color-color","description":"expands Shape Primitives adding color background fills canvas stroke sets drawing lines fill inside shapes noStroke noFill turn line Colors represented ways demonstrates options"},"Drawing Lines":{"relativeUrl":"/examples/animation-and-variables-drawing-lines","description":"Click drag mouse draw line demonstrates built-in variables mouseX mouseY store current position previous represented pmouseX pmouseY * shows colorMode HSB hue-saturation-brightness variable sets hue"},"Animation with Events":{"relativeUrl":"/examples/animation-and-variables-animation-with-events","description":"demonstrates loop noLoop pause resume animation Clicking mouse toggles stopped user press key advance frame Note click set focus canvas presses registered Advancing single accomplished calling redraw function results call draw"},"Mobile Device Movement":{"relativeUrl":"/examples/animation-and-variables-mobile-device-movement","description":"deviceMoved function runs mobile device displaying sketch moves accelerationX accelerationY accelerationZ values set position size circle works devices"},"Conditions":{"relativeUrl":"/examples/animation-and-variables-conditions","description":"statements block code run condition true animates mouse held statement line read p5 reference MDN Comparison operators form conditions comparing values hue circle resets comparison Logical combined && checks black fill horizontal center canvas white circle's position || reverses speed reaches left edge"},"Words":{"relativeUrl":"/examples/imported-media-words","description":"text function inserting canvas change font size loadFont fontSize functions aligned left center textAlign shapes colored fill"},"Copy Image Data":{"relativeUrl":"/examples/imported-media-copy-image-data","description":"copy method simulate coloring image copying colored top black-and-white cursor dragged"},"Alpha Mask":{"relativeUrl":"/examples/imported-media-alpha-mask","description":"mask method create image transparency parts run locally files running local server"},"Image Transparency":{"relativeUrl":"/examples/imported-media-image-transparency","description":"program overlays image modifying alpha tint function Move cursor left canvas change image's position run locally file running local server"},"Audio Player":{"relativeUrl":"/examples/imported-media-create-audio","description":"createAudio creates audio player displays player's controls adjusts speed playback normal mouse left edge window faster moves information media elements players p5MediaElement reference page file public domain piano loop Josef Pres"},"Video Player":{"relativeUrl":"/examples/imported-media-video","description":"noCanvas createVideo functions upload video DOM embedding canvas building embedded element visit Video Canvas"},"Video on Canvas":{"relativeUrl":"/examples/imported-media-video-canvas","description":"createVideo image functions upload video canvas capture passed constructor add filters filter method run locally running local server build embedding visit Video"},"Video Capture":{"relativeUrl":"/examples/imported-media-video-capture","description":"createCapture image functions device's video capture draw canvas passed constructor add filters filter method strategies uploading presenting styling videos visit Video Canvas examples"},"Image Drop":{"relativeUrl":"/examples/input-elements-image-drop","description":"drop p5js element method registers callback time file loaded uploaded created p5File class check type write conditional statements responding"},"Input and Button":{"relativeUrl":"/examples/input-elements-input-button","description":"createElement createInput createButton functions string text submitted input display canvas"},"Form Elements":{"relativeUrl":"/examples/input-elements-dom-form-elements","description":"Document Object Model DOM represents resulting structure web page p5js's form elements createInput createSelect createRadio build ways information submitted select input radio button update based"},"Translate":{"relativeUrl":"/examples/transformation-translate","description":"translate function moves origin coordinate system location push pop functions save restore drawing settings fill color Note draw shapes rectangle circle time"},"Rotate":{"relativeUrl":"/examples/transformation-rotate","description":"rotate function rotates current coordinate system origin Note default upper left corner canvas order center translate push pop functions save restore"},"Scale":{"relativeUrl":"/examples/transformation-scale","description":"scale function scales current coordinate system factor push pop functions save restore square size drawn origin scaling factors"},"Linear Interpolation":{"relativeUrl":"/examples/calculating-values-interpolate","description":"Interpolation calculates values number halfway types interpolation rates change Linear abbreviated lerp constant rate function linearly interpolates numbers Move mouse screen symbol follow drawing frame animation ellipse moves part distance current position cursor"},"Map":{"relativeUrl":"/examples/calculating-values-map","description":"map function converts range cursor's horizontal position 0-720 0-360 resulting circle's hue Map vertical 0-400 20-300 diameter"},"Random":{"relativeUrl":"/examples/calculating-values-random","description":"demonstrates random function user presses mouse button position color circle change randomly"},"Constrain":{"relativeUrl":"/examples/calculating-values-constrain","description":"draws circle cursor's position rectangle passing mouse's coordinates constrain function"},"Clock":{"relativeUrl":"/examples/calculating-values-clock","description":"current time read minute hour functions map calculate angle hands transformations set position"},"Color Interpolation":{"relativeUrl":"/examples/repetition-color-interpolation","description":"Interpolation calculates values number halfway types interpolation rates change Linear abbreviated lerp constant rate function linearly interpolates numbers lerpColor demonstrated colors stripeCount variable adjusts horizontal stripes Setting higher individual gradient"},"Color Wheel":{"relativeUrl":"/examples/repetition-color-wheel","description":"illustrates appearance hues loop repeat transformations initializes variable called angle rotation circle hue time repeats drawn relative center canvas push pop functions make affect individual"},"Bezier":{"relativeUrl":"/examples/repetition-bezier","description":"bezier curves created control anchor points parameters function point curve middle set define shape"},"Kaleidoscope":{"relativeUrl":"/examples/repetition-kaleidoscope","description":"kaleidoscope optical instrument reflecting surfaces tilted angle translate rotate scale functions replicate resulting visual canvas"},"Noise":{"relativeUrl":"/examples/repetition-noise","description":"Perlin noise algorithm written Ken produce sequences random organic function p5 produces dots sized based values slider left sets distance offset calculation"},"Recursive Tree":{"relativeUrl":"/examples/repetition-recursive-tree","description":"rendering simple tree-like structure recursion branching angle calculated function horizontal mouse location Move left change Based Daniel Shiffman's Recursive Tree Processing"},"Random Poetry":{"relativeUrl":"/examples/listing-data-with-arrays-random-poetry","description":"floor random functions randomly select series items array draw sizes positions canvas"},"Sine and Cosine":{"relativeUrl":"/examples/angles-and-motion-sine-cosine","description":"demonstrates sine cosine mathematical functions animation shows uniform circular motion unit circle radius angle measured x-axis determines point defined coordinates"},"Aim":{"relativeUrl":"/examples/angles-and-motion-aim","description":"atan2 function calculates angle positions rotate shape eyes cursor"},"Triangle Strip":{"relativeUrl":"/examples/angles-and-motion-triangle-strip","description":"demonstrates create shape vertices TRIANGLE_STRIP mode beginShape endShape vertex functions"},"Circle Clicker":{"relativeUrl":"/examples/games-circle-clicker","description":"demonstrates game time limit score browser's local storage stores high played browser remains Clearing data clears"},"Ping Pong":{"relativeUrl":"/examples/games-ping-pong","description":"game inspired oldest arcade video games Atari's Pong two-player player controls paddle represented white rectangle keys move left arrow Players score points bouncing ball square past edge opponent's side canvas`"},"Snake":{"relativeUrl":"/examples/games-snake","description":"reproduction type arcade game called Snake Blockade released games structure player controls movements snake represented green line player's goal collide fruit red dot time collides grows longer grow long colliding edges play area array vectors store positions segments arrow keys control snake's movement"},"Geometries":{"relativeUrl":"/examples/3d-geometries","description":"p5's WEBGL mode includes primitive shapes plane box cylinder cone torus sphere ellipsoid Additionally model displays custom geometry loaded loadModel NASA's collection"},"Custom Geometry":{"relativeUrl":"/examples/3d-custom-geometry","description":"buildGeometry function stores shapes 3D model efficiently reused"},"Materials":{"relativeUrl":"/examples/3d-materials","description":"3D rendering material determines surface responds light p5's WEBGL mode supports ambient emissive normal specular materials source p5 displays color contexts typically emits visualizes direction part faces respond Ambient combined fill stroke Fill sets base object's vertices Additionally texture wraps object image model NASA's collection"},"Orbit Control":{"relativeUrl":"/examples/3d-orbit-control","description":"Orbit control mouse touch input adjust camera orientation 3D sketch rotate left click drag swipe screen pan multiple fingers move closer center scroll wheel pinch in/out"},"Filter Shader":{"relativeUrl":"/examples/3d-filter-shader","description":"Filter shaders apply effect canvas applied video"},"Adjusting Positions with a Shader":{"relativeUrl":"/examples/3d-adjusting-positions-with-a-shader","description":"Shaders adjust positions vertices shapes lets distort animate 3D models"},"Framebuffer Blur":{"relativeUrl":"/examples/3d-framebuffer-blur","description":"shader depth information p5Framebuffer apply blur real camera objects blurred closer farther lens's focus simulates effect sketch renders spheres framebuffer canvas"},"Create Graphics":{"relativeUrl":"/examples/advanced-canvas-rendering-create-graphics","description":"createGraphics function create p5Graphics object serve off-screen graphics buffer canvas Off-screen buffers dimensions properties current display surface existing space"},"Multiple Canvases":{"relativeUrl":"/examples/advanced-canvas-rendering-multiple-canvases","description":"default p5 runs Global Mode means functions global scope canvas-related apply single canvas run Instance methods instance class mode function defined parameter representing labeled variables typically belong function's Passing constructor"},"Shader as a Texture":{"relativeUrl":"/examples/advanced-canvas-rendering-shader-as-a-texture","description":"Shaders applied 2D/3D shapes textures learn shaders p5js"},"Snowflakes":{"relativeUrl":"/examples/classes-and-objects-snowflakes","description":"demonstrates particle system simulate motion falling snowflakes program defines snowflake class array hold objects"},"Shake Ball Bounce":{"relativeUrl":"/examples/classes-and-objects-shake-ball-bounce","description":"class create collection circles move canvas response tilt mobile device open page display sketch"},"Connected Particles":{"relativeUrl":"/examples/classes-and-objects-connected-particles","description":"custom classes Particle class stores position velocity hue renders circle current updates Path array objects created lines connecting particles user clicks mouse sketch creates instance drags adds path"},"Flocking":{"relativeUrl":"/examples/classes-and-objects-flocking","description":"Demonstration flocking behavior Full discussion implementation found Nature Code book Daniel Shiffman simulation based research Craig Reynolds term boid represent bird-like object"},"Local Storage":{"relativeUrl":"/examples/loading-and-saving-data-local-storage","description":"Browsers websites store data visitor's device called local storage getItem storeItem clearStorage removeItem functions control inspired Daniel Shiffman's Loading JSON Data Tabular examples Processing written Java class organize bubble visitor add bubbles saved revisits sketch reload"},"JSON":{"relativeUrl":"/examples/loading-and-saving-data-json","description":"JavaScript Object Notation JSON format writing data file syntax contexts based Daniel Shiffman's Loading Data Processing written Java class organize bubble sketch starts loads bubbles visitor add download updated load"},"Table":{"relativeUrl":"/examples/loading-and-saving-data-table","description":"Comma-Separated Values CSV format writing data file p5 work p5Table based Daniel Shiffman's Loading Tabular Data Processing class organize representing bubble sketch starts loads bubbles visitor add download updated load"},"Non-Orthogonal Reflection":{"relativeUrl":"/examples/math-and-physics-non-orthogonal-reflection","description":"demonstrates ball bouncing slanted surface implemented vector calculations reflection code makes extensive p5Vector class including createVector function create vectors methods add dot"},"Soft Body":{"relativeUrl":"/examples/math-and-physics-soft-body","description":"Physics simulation soft body experiencing acceleration mouse position shape created curves curveVertex curveTightness"},"Forces":{"relativeUrl":"/examples/math-and-physics-forces","description":"Demonstration multiple forces acting bodies Bodies experience gravity continuously fluid resistance water natureofcodecom force calculations performed p5Vector class including createVector function create vectors"},"Smoke Particles":{"relativeUrl":"/examples/math-and-physics-smoke-particle-system","description":"Smoke particle system demo based Dan Shiffman's original Processing code makes p5Vector class including createVector function calculations updating particles positions velocities performed methods implemented array objects Particle"},"Game of Life":{"relativeUrl":"/examples/math-and-physics-game-of-life","description":"Game Life cellular automaton created mathematician John Conway type simulation grid cells cell dead alive black squares represent living white runs switch based set rules live fewer neighbours dies lives unchanged generation life generate complex interactions Click canvas start randomized Clicking restart"},"Mandelbrot Set":{"relativeUrl":"/examples/math-and-physics-mandelbrot","description":"Colorful rendering Mandelbrot set based Daniel Shiffman's Processing"}},"libraries-fallback":{"BasicECSJs":{"relativeUrl":"/libraries/","description":"A basic javascript ECS system, with SceneManagers, Scenes and GameObjects with their own Start and Update functions."},"BasicUnitTesterJs":{"relativeUrl":"/libraries/","description":"BasicUnitTesterJs is a basic javascript unit tester designed to work on all JS platforms and be small and streamlined for the best developer experience."},"DoubleLinkedListLibJs":{"relativeUrl":"/libraries/","description":"A simple double linked list that stores the head, tail and length of the list"},"MatrixJs":{"relativeUrl":"/libraries/","description":"A basic javascript library for dynamic and powerful matrices based on lists wrapped around with a powerful class."},"OneWayLinkedListLibJs":{"relativeUrl":"/libraries/","description":"A simple one way linked list that stores the head, tail and length of the list"},"Tilemapp5js":{"relativeUrl":"/libraries/","description":"A simple to use & performant tilemap p5.js library"},"TurtleGFX":{"relativeUrl":"/libraries/","description":"TurtleGFX allows to code with Turtle Graphics in JavaScript. Great for education and creative coding."},"VecJs":{"relativeUrl":"/libraries/","description":"A basic javascript library for dynamic vectors (e.g. vec2 & vec3) based on lists."},"WebGL2FBO":{"relativeUrl":"/libraries/","description":"A simple library for OOP encapsulation and abstraction of some of WebGL2 Framebuffers and the Renderbuffers they rely on"},"WebGL2Tex":{"relativeUrl":"/libraries/","description":"A simple library for OOP encapsulation and abstraction of some of the different WebGL2 textures while still giving full control over them."},"BMWalker.js":{"relativeUrl":"/libraries/","description":"A simple JavaScript library for drawing the biological motion 'Walker'."},"c2.js":{"relativeUrl":"/libraries/","description":"c2.js is a JavaScript library for creative coding based on computational geometry, physics simulation, evolutionary algorithm and other modules."},"canvasGUI":{"relativeUrl":"/libraries/","description":"Create GUI controls directly on your canvas."},"concaveHull":{"relativeUrl":"/libraries/","description":"Calculate a Concave Hull from a set of points in 2D space"},"HY5":{"relativeUrl":"/libraries/","description":"hydra 🙏 p5.js ~ share visuals between both frameworks!"},"lygia":{"relativeUrl":"/libraries/","description":"LYGIA is a shader library of reusable functions that will let you prototype, port or ship a project in just few minutes. It's very granular, flexible and efficient. Support multiple shading languages and can easily be added to any project, enviroment or framework of your choice. \n"},"ml5.js":{"relativeUrl":"/libraries/","description":"Friendly machine learning for the web—a neighborly approach to creating and exploring artificial intelligence in the browser."},"número":{"relativeUrl":"/libraries/","description":"A friendly and intuitive math library for p5.js."},"p5.FIP":{"relativeUrl":"/libraries/","description":"Real-time image processing library - add filters and post-processing to your p5.js sketches."},"p5.Polar":{"relativeUrl":"/libraries/","description":"p5.Polar provides mathematical abstractions making it easy to create create beautiful, kaleidoscopic, radial patterns."},"p5.SceneManager":{"relativeUrl":"/libraries/","description":"p5.SceneManager helps you create sketches with multiple states / scenes. Each scene is a like a sketch within the main sketch."},"p5.Utils":{"relativeUrl":"/libraries/","description":"p5.Utils is a tool collection for my coding class, featuring a pixel ruler, gradient fill color bindings, and other helpful shortcuts for beginners."},"p5.anaglyph":{"relativeUrl":"/libraries/","description":"A library for creating 3D stereoscopic 3D scenes and images using red/cyan glasses"},"p5.animS":{"relativeUrl":"/libraries/","description":"Animates p5.js shapes by rendering their drawing processes."},"p5.asciify":{"relativeUrl":"/libraries/","description":"Apply real-time ASCII conversion to your favourite WebGL p5.js sketches to create unique, text-based visuals instantly."},"p5.bezier":{"relativeUrl":"/libraries/","description":"p5.bezier helps draw Bézier curves with more than four control points and closed curves."},"p5.ble":{"relativeUrl":"/libraries/","description":"A Javascript library that enables communication between your BLE devices and your p5.js sketch."},"p5.brush":{"relativeUrl":"/libraries/","description":"Unlock custom brushes, natural fill effects and intuitive hatching in p5.js."},"p5.capture":{"relativeUrl":"/libraries/","description":"Record your p5.js sketches effortlessly!"},"p5.cmyk":{"relativeUrl":"/libraries/","description":"CMYK color for p5.js"},"p5.collide2d":{"relativeUrl":"/libraries/","description":"p5.collide2D provides tools for calculating collision detection for 2D geometry with p5.js."},"p5.createLoop":{"relativeUrl":"/libraries/","description":"Create animation loops with noise and GIF exports in one line of code."},"p5.csg":{"relativeUrl":"/libraries/","description":"A library for constructive solid geometry. Do Boolean operations on your p5.Geometry to make new shapes!"},"p5.fab":{"relativeUrl":"/libraries/","description":"p5.fab controls digital fabrication machines from p5.js!\n"},"p5.fillGradient":{"relativeUrl":"/libraries/","description":"Fill shapes in p5.js with Linear, Radial and Conic Gradients."},"p5.filterRenderer":{"relativeUrl":"/libraries/","description":"A library for rendering 3D scenes with depth-of-field blur and with ambient occlusion shadows."},"p5.flex":{"relativeUrl":"/libraries/","description":"p5 container with responsive canvas feature."},"p5.geolocation":{"relativeUrl":"/libraries/","description":"p5.geolocation provides techniques for acquiring, watching, calculating, and geofencing user locations for p5.js."},"p5.glitch":{"relativeUrl":"/libraries/","description":"p5.js library for glitching images and binary files in the web browser"},"p5.grain":{"relativeUrl":"/libraries/","description":"Conveniently add film grain, seamless texture overlays, and manipulate pixels to achieve nostalgic and artistic effects in p5.js sketches and artworks."},"p5.joystick":{"relativeUrl":"/libraries/","description":"Connect and play with physical joysticks."},"p5.localessage":{"relativeUrl":"/libraries/","description":"p5.localmessage provides a simple interface to send messages locally from one sketch to another."},"p5.mapper":{"relativeUrl":"/libraries/","description":"A projection mapping library for p5.js"},"p5.marching":{"relativeUrl":"/libraries/","description":"Raster to vector conversion, isosurfaces."},"p5.palette":{"relativeUrl":"/libraries/","description":"A library to manage color palettes in p5.js"},"p5.party":{"relativeUrl":"/libraries/","description":"quickly prototype networked multiplayer games and apps"},"p5.pattern":{"relativeUrl":"/libraries/","description":"A pattern drawing library for p5.js."},"p5.qol":{"relativeUrl":"/libraries/","description":"Extend p5 with Quality of Life utilities."},"p5.quadrille.js":{"relativeUrl":"/libraries/","description":"A library for creating puzzle and board games, and for visual computing experiments."},"p5.Riso":{"relativeUrl":"/libraries/","description":"p5.Riso is a library for generating files suitable for Risograph printing. It helps turn your sketches into multi-color prints."},"p5.scaler":{"relativeUrl":"/libraries/","description":"Smart scaling of p5.js sketches in a variety of ways (to fit the browser's inner dimensions, to fit the canvas DOM container, to a specific ratio, etc)."},"p5.serialserver":{"relativeUrl":"/libraries/","description":"p5.serialserver is a p5.js library that enables communication between your p5.js sketch and a serial enabled device, for example, an Arduino microcontroller."},"p5.simpleAR":{"relativeUrl":"/libraries/","description":"A simple JavaScript library that easily converts existing p5.js sketches to AR."},"p5.speech":{"relativeUrl":"/libraries/","description":"p5.speech provides simple, clear access to the Web Speech and Speech Recognition APIs, allowing for the easy creation of sketches that can talk and listen."},"p5.teach.js":{"relativeUrl":"/libraries/","description":"A beginner friendly math animation library for p5.js"},"p5.toio":{"relativeUrl":"/libraries/","description":"A JavaScript library for controlling toio™Core Cube from p5.js sketches."},"p5.touchgui":{"relativeUrl":"/libraries/","description":"p5.touchgui is intended to extend p5.js and make it easy to add buttons, sliders, and other GUI (graphical user interface) objects to your p5.js sketches, enabling you to focus on quickly iterating ideas with easily created GUI objects that work with both mouse and multi-touch input."},"p5.treegl":{"relativeUrl":"/libraries/","description":"Shader development and space transformations WEBGL p5.js library."},"p5.tween":{"relativeUrl":"/libraries/","description":"With p5.tween you can create easily animations as tween in a few keyframes."},"p5.videorecorder":{"relativeUrl":"/libraries/","description":"Record your canvas as a video file with audio."},"p5.warp":{"relativeUrl":"/libraries/","description":"Fast 3D domain warping using shaders."},"p5.webserial":{"relativeUrl":"/libraries/","description":"A library for interacting with Serial devices from within the browser, based on Web Serial API (available on Chrome and Edge)."},"p5.xr":{"relativeUrl":"/libraries/","description":"A library for creating VR and AR sketches with p5."},"p5grid":{"relativeUrl":"/libraries/","description":"Hexagonal Tiling Library"},"p5jsDebugCam":{"relativeUrl":"/libraries/","description":"A basic keyboard only debug camera for p5.js"},"p5mirror":{"relativeUrl":"/libraries/","description":"A library to download your editor.p5js sketches into a git repo or locally"},"p5play":{"relativeUrl":"/libraries/","description":"JS game engine that uses p5.js for graphics and Box2D for physics."},"p5snap":{"relativeUrl":"/libraries/","description":"a command-line interface to create snapshots of sketches"},"p5videoKit":{"relativeUrl":"/libraries/","description":"A dashboard for mixing video in the browser"},"pretty-grid":{"relativeUrl":"/libraries/","description":"Create and manipulate grids with Javascript"},"rita.js":{"relativeUrl":"/libraries/","description":"tools for natural language and generative writing"},"Shader Park":{"relativeUrl":"/libraries/","description":"Explore shader programming through a JavaScript interface without the complexity of GLSL. Quickly script shaders using a P5.js style language."},"simple.js":{"relativeUrl":"/libraries/","description":"Helper functions and defaults for young and new coders."},"Total Serialism":{"relativeUrl":"/libraries/","description":"A toolbox full of methods for procedurally generating and transforming arrays mainly focused on algorithmic composition. Includes methods like markov-chain, cellular automaton, lindenmayer system, euclidean distribution and much more! Generate the array with your desired method and easily iterate over them in a for-loop to draw the results."},"UI Renderer":{"relativeUrl":"/libraries/","description":"Create a UI within your sketch, including utilities for different layouts and interactive sliders."},"WEBMIDI.js":{"relativeUrl":"/libraries/","description":"A user-friendly library to send and receive MIDI messages with ease."}},"events-fallback":{"p5.js Contributors Conference 2015":{"relativeUrl":"/events/contributors-conference-2015","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro group approximately participants gathered spent week [Frank-Ratchye STUDIO Creative Inquiry](http://studioforcreativeinquiry.org/), advancing code documentation community outreach tools p5js programming environment Participants Hong Kong Seattle Los Angeles Boston York working professionals fields creative technology interaction design new-media arts included half-dozen undergraduate graduate students Carnegie Mellons Schools Art Architecture [A smile make p5 sign hands]/images/cc2015/2015_1jpg [Woman presenting statement laptop]/images/cc2015/2015_3jpg expressively speaks microphone male collaborators on]/images/cc2015/2015_4jpg [Participants attentively listen presentation]/images/cc2015/2015_5jpg reads female students]/images/cc2015/2015_6jpg sit circle white board sticky notes student microphone]/images/cc2015/2015_7jpg table laptops compare code]/images/cc2015/2015_8jpg [Whiteboard colored written programming]/images/cc2015/2015_9jpg speaking valuing skill sets powerpoint classroom]/images/cc2015/2015_10jpg podium auditorium stage skyping screen]/images/cc2015/2015_11jpg [Overhead view classroom laptops]/images/cc2015/2015_12jpg [Five people discussion circle]/images/cc2015/2015_13jpg sharing notes]/images/cc2015/2015_14jpg [Man participants]/images/cc2015/2015_15jpg jump throw hands air green lawn]/images/cc2015/2015_2jpg ## [Jason Alderman](http://huah.net/jason/), [Sepand Ansari](http://sepans.com/), [Tega Brain](http://tegabrain.com/), [Emily Chen](https://medium.com/@emchenNYC/), [Andres Colubri](http://andrescolubri.net/), [Luca Damasco](https://twitter.com/lucapodular), [Guy de Bree](http://guydebree.com/), [Christine Carteret](http://www.cjdecarteret.com/), [Xy Feng](http://xystudio.cc/), [Sarah Groff-Palermo](http://www.sarahgp.com/), [Chris Hallberg](http://www.crhallberg.com/), [Val Head](http://valhead.com/), [Johanna Hedva](http://johannahedva.com/), [Kate Hollenbach](http://www.katehollenbach.com/), [Jennifer Jacobs](http://web.media.mit.edu/~jacobsj/), [Epic Jefferson](http://www.epicjefferson.com/), [Michelle Partogi](http://michellepartogi.com/), [Sam Lavigne](http://lav.io/), [Golan Levin](http://flong.com/), [Cici Liu](http://www.liuchangitp.com/), [Maya Man](http://www.mayaman.cc/), [Lauren McCarthy](http://lauren-mccarthy.com/), [David Newbury](http://www.workergnome.com/), [Paolo Pedercini](http://molleindustria.org/), [Luisa Pereira](http://luisaph.com/), [Miles Peyton](http://mileshiroo.info/), [Caroline Record](http://carolinerecord.com/), [Berenger Recoules](http://b2renger.github.io/), [Stephanie Pi](https://pibloginthesky.wordpress.com/), Sigal](http://jasonsigal.cc/), [Kevin Siwoff](http://studioindefinit.com/), [Charlotte Stiles](http://charlottestiles.com/) Diversity Alongside technical development main focuses conference diversity began panel—[Diversity Voices Race Gender Ability Class FLOSS Internet](http://studioforcreativeinquiry.org/events/diversity-seven-voices-on-race-gender-ability-class-for-floss-and-the-internet). Organized Hedva](http://johannahedva.com/) panel place Tuesday Kresge Auditorium Mellon University Speakers [Casey Reas](http://reas.com/), [Phoenix Perry](http://phoenixperry.com/), [Taeyoon Choi](http://taeyoonchoi.com/), [Sara Hendren](http://ablersite.org/), [Chandler McWilliams](http://chandlermcwilliams.com/). poster Internet]/images/cc2015/diversity_640jpg Support contributor Inquiry](http://studioforcreativeinquiry.org/) academic laboratory atypical anti-disciplinary inter-institutional research intersections science culture event made grant [National Endowment Arts](https://arts.gov/), generous support [NYU Interactive Telecommunications Program](https://tisch.nyu.edu/itp) ITP [Processing Foundation](http://foundation.processing.org/), [TheArtificial](http://theartificial.nl/), [Bocoup](http://bocoup.com/), [Darius Kazemi](http://tinysubversions.com/), [Emergent Digital Practices | Denver] **Thank you** [The National Arts NEA]/images/logo/artworksjpg Frank-Ratchye Inquiry]/images/logo/frank-ratchyepng ITP]/images/logo/itppng Emergent program Denver]/images/logo/edppng [ITP]/images/logo/bocouppng Artificial]/images/logo/theartificialpng undefined"},"p5.js Contributors Conference 2019":{"relativeUrl":"/events/contributors-conference-2019","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro interdisciplinary group participants gathered Frank-Ratchye STUDIO Creative Inquiry advancing code documentation community outreach tools exploring current landscape p5js programming environment Comprising diverse range fields creative technology interaction design media arts conference aimed fostering dialogue multidisciplinary lens Working groups focused topic areas Access Music Code Performance Landscape Tech Internationalization Videos Qianqian Ye [Man podium giving presentation group]/images/cc2019/2019_1jpg [Participants sitting long table lunch discussion]/images/cc2019/2019_2jpg [Classroom working laptops]/images/cc2019/2019_4jpg meeting dark classroom]/images/cc2019/2019_5jpg [Woman classroom participants]/images/cc2019/2019_6jpg conversing busy classroom]/images/cc2019/2019_7jpg microphone speaking fellow classroom]/images/cc2019/2019_8jpg [Participant speaks front projected text problem anonymyzing data]/images/cc2019/2019_9jpg [Person reads add features increase access]/images/cc2019/2019_10jpg talking ]/images/cc2019/2019_11jpg [A man participants]/images/cc2019/2019_12jpg sit speakers listening intently]/images/cc2019/2019_13jpg sacred boundaries projection her]/images/cc2019/2019_15jpg [Overhead view panel people image 3d rendered it]/images/cc2019/2019_16jpg laptops observe screen]/images/cc2019/2019_17jpg lifesize teddy bear works laptop]/images/cc2019/2019_18jpg standing smiling]/images/cc2019/2019_19jpg [Four circle conversing]/images/cc2019/2019_20jpg eating together]/images/cc2019/2019_21jpg large shaped classroom]/images/cc2019/2019_22jpg energetically microphone]/images/cc2019/2019_23jpg [Group campfire made LCD monitors]/images/cc2019/campfirejpg photo smiling enthusiastically hands air]/images/cc2019/2019_24jpg Photos Jacquelyn Johnson ## Participants American Artist Omayeli Arenyeka Sina Bahram Aatish Bhatia Natalie Braginsky Jon Chambers Luca Damasco Aren Davey Ted Davis Carlos Garcia Stalgia Grigg Kate Hollenbach shawné michaelain holloway Claire Kearney-Volpe Sona Lee Kenneth Lim Evelyn Masso Lauren McCarthy LaJuné McMillian Allison Parrish Luisa Pereira Guillermo Montecinos Aarón Montoya-Moraga Luis Morales-Navarro Shefali Nayak Everest Pipkin Olivia Ross Dorothy Santos Yasheng Jun Shern Chan Cassie Tarakajian Valley Xin Alex Yixuan Xu Outputs - Blackness Gender Virtual Space led art installations prototype notebook interface Created library system p5 Editor Prototypes connecting libraries Global Contributor's Toolkit write non-violent zine overhaul website accessibility Including updates screen reader improvements home download started reference pages contributions p5grid implementation highly flexible triangle square hexagon octagon girds p5multiplayer set template files building multi-device multiplayer game multiple clients connect host page L05 Experiments P5LIVE testing early implementations softCompile OSC interfacing added connectivity demo MIDI setup collaborative live-coding vj Collaborative performances performance Workshops closing Golan Levin Support contributor place Carnegie Mellon University academic laboratory atypical anti-disciplinary inter-institutional research intersections science culture event grant National Endowment Arts generous support Processing Foundation Mozilla Clinic Open Source COSA Denver NYU Tandon IDM ITP FHNW Academy Art Design DePaul College Computing Digital Media Parsons School Technology **Thank you** [The NEA]/images/logo/artworksjpg Inquiry]/images/logo/frank-ratchyepng [University Applied Sciences Northwestern Switzerland Design]/images/logo/northwestern-switzerlandjpg [Processing Foundation]/images/logo/processing-foundationpng [Clinic Arts]/images/logo/COSApng [NYU Engineering Integrated Media]/images/logo/nyujpg [Parsons Technology]/images/logo/Parsonsjpg ITP]/images/logo/itppng [DePaul University]/images/logo/depaulpng undefined"},"p5.js Access Day 2022":{"relativeUrl":"/events/p5js-access-day-2022","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js Access Day virtual conference talk access open-source software arts OSSTA greater issues day-long online event features themed-sessions — Critical Web Accessibility Disability Arts Community Building Translation space contributors experienced practitioners projects share knowledge perspectives dreams building technical spaces Organizer curator [Qianqian Ye](https://qianqian-ye.com/) Event Coordinator Video Producer [Karen Abe](https://www.instagram.com/prod.ka/) ## Recap ASL Interpretation Opening Moderator [Kate Hollenbach](http://www.katehollenbach.com/), Speakers [Luis Morales-Navarro](http://luismn.com/), [Jes Daigle](https://twitter.com/techandautism) [Xiaowei Wang](https://www.xiaoweiwang.com/), [Natalee Decker](https://www.instagram.com/crip_fantasy/), [Kemi Sijuwade-Ukadike](https://www.linkedin.com/in/adekemisijuwade), [Kevin Gotkin](https://kevingotkin.com/) [Dorothy Santos](https://dorothysantos.com/), [Tiny Tech Zine](https://tinytechzines.org/), [Close Isnt Home](https://closeisnthome.com/), [Zainab Aliyu](https://zai.zone/) [Kenneth Lim](https://limzykenneth.com/), [Inhwa Yeom](https://yinhwa.art/), [Shaharyar Shamshi](https://shaharyarshamshi.xyz/), [Felipe Gomes](https://felipesg.cargo.site/) Closing Production - Advisor [Claire Kearney-Volpe](http://www.takinglifeseriously.com/index.html), [Saber Khan](https://www.edsaber.info/), [evelyn masso](https://outofambit.format.com/), [Lauren Lee McCarthy](http://lauren-mccarthy.com/), [Xin Xin](https://xin-xin.info/) Live [Pro Bono ASL](https://www.probonoasl.com/) Graphic Designer [Katie Chan](https://twitter.com/katiechaan) Support Abe](https://www.instagram.com/prod.ka/), [Jay Borgwardt](https://www.jayborgwardt.com/), [Yuehao Jiang](https://yuehaojiang.com/) Closed Captioning Transcription Ju Hye Kim Xiao Yi Wang-Beckval Wong](https://www.instagram.com/claireewongg/) made grant [Mozilla Foundation](https://foundation.mozilla.org/) Award generous support [Processing Foundation](https://processingfoundation.org/) [Frank-Ratchye STUDIO Creative Inquiry](http://studioforcreativeinquiry.org/). **Thank you** Foundation]/images/logo/mozilla-foundationpng [The Frank-Ratchye Inquiry]/images/logo/frank-ratchyepng Foundation]/images/logo/processing-foundationpng undefined"},"p5.js Community Salon 2023":{"relativeUrl":"/events/p5js-community-salon-2023","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js Community Salon public gathering community members share connect NYU ITP Thursday March 630-730pm event group speakers briefly work food social time ## Organizers organized Project Lead [Qianqian Ye](https://qianqian-ye.com), part IMA/ITP Fellowship supported Sonia Choi Communications Coordinator Processing Foundation Photo credit [Ziyuan Lin](https://www.ziyuanlin.com). Ye holding mic big tv screen grid contributor photos it]/images/p5js-salon-2023/salon-2JPG Speakers Zainab Aliyu [Zainab image book reading excerpt it]/images/p5js-salon-2023/salon-3JPG Aarati Akkapedi [Aarati whiteboard collection printed them]/images/p5js-salon-2023/salon-4JPG [Suhyun work]/images/p5js-salon-2023/salon-5JPG Don Hanson [Don front work]/images/p5js-salon-2023/salon-6JPG Shawné Michaelain Holloway [Shawné work]/images/p5js-salon-2023/salon-7JPG Tsige Tafesse [Tsige Open Call]/images/p5js-salon-2023/salon-8JPG Rachel Lim [Rachel Web Editor Features]/images/p5js-salon-2023/salon-9JPG Jackie Liu [Jackie series screenshots game project Chao bing]/images/p5js-salon-2023/salon-10JPG Olivia McKayla Ross [Olivia p5 salon poster it]/images/p5js-salon-2023/salon-11JPG Munus Shih [Munus pronouns facts him]/images/p5js-salon-2023/salon-12JPG Xin [Xin text work]/images/p5js-salon-2023/salon-13JPG Lavanya Suresh [Lavanya Kolams]/images/p5js-salon-2023/salon-14JPG [p5js poster]/images/p5js-salon-2023/0-banner-p5js-community-salonjpg [A presenters organizers smiling making silly faces camera kneeling standing upright]/images/p5js-salon-2023/salon-15JPG audience sitting crowded room curious expression]/images/p5js-salon-2023/salon-16JPG ### Recap Video Part Support **Thank you** [NYU ITP]/images/logo/itppng undefined"},"Sovereign Tech Fund x p5.js Documentation Accessibility Project":{"relativeUrl":"/events/stf-2024","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js selected receive total €450000 rounds funding [Sovereign Tech Fund](https://sovereigntechfund.de/en) enhance [p5js Documentation organization accessibility](https://www.sovereigntechfund.de/tech/p5js). work part Sovereign Funds [Contribute Back Open Source Challenges](https://sovereigntechfund.de/en/challenges/). project addressed longstanding challenges scatterness limited accessibility documentation final deliverable includes updated website focus accessible organized translated contributor Additionally features curated collection community sketches add-ons library educational resources providing improved aims facilitate effective navigation feature exploration empowering users create richer innovative projects promotes inclusivity ensuring people diverse backgrounds skill levels cultures engage meaningfully ## Contributors brought approximately contributors 60-75 participating round team included experienced first-time forming global group dedicated writing translating designing engineering researching conducting reviews open-source typically operate independently fostered collective efforts encouraging collaboration individuals skills perspectives shift collaborative endeavors led cohesive synergistic approach advancing exemplifying strength community-driven initiatives landscape **Thank participated STF made 💗** Processing Foundation administrative support** ### Round *September December 2023* #### Internal Team * Project Lead Manager Qianqian Ye Doc Kenneth Lim Dave Pagurek Nick McIntyre Assistant Karen Abe Website Designer Stefanie Tam Tyler Yin Developer Bocoup cypress masso Stalgia Grigg Carmen Cañas Isaac Durazo Accessibility Consultant Andy Slater Proofreader Fivver Definition Workshop Organizer Winnie Koundinya Dhulipalla Facilitator Yasmine Boudiaf Jazmin Morris Participants UAL CCI Examples Caleb Foss Writer Darren Kessner Kathryn Lichlyter Reviewer Amy Chen Lance Cole Tutorials Writers Reviewers Joanne Amarisa Gregory Benedis-Grab Christine Belzie Tristan Bunn Julien Kris Ruth Ikegah Portia Morrell Jaleesa Trapp Akanksha Vyas WebGL Adam Ferriss Contributor Alm Chung Tanvi Kumar Luis Morales-Navarro Community Statement Code Conduct Oluwakemi Oritsejafor Zainab Aliyu *January April 2024* Copywriter Sarah Ciston sketch Curator Special Sinan Ascioglu OpenProcessing supporting Translation Researcher Spanish Steward Cristian Bañuelos Sebastián Méndez Diana Galindo Clavijo Xavier Gongora Marcela Martinez Galvan Emilio Ocelotl Reyes Marianne Teixido Guzmán Chinese Weijia Li Miaoye Chirui Cheng Lingxiao Wang Shengnan Angela Rong Yudi Wu Hindi Divyansh Srivastava Eshaan Aggarwal Akash Jaiswalm Aditya Rana Sanjay Singh Rajpoot Surbhi Pittie Korean Inhwa Yeom Sejin Yewon Jang Yunyoung Minwook Park Sunghun Hyunwoo Rhee Reference Technical Layla Quiñones Nat Decker thai Lu Cielo Saucedo Liam Coleman Revisions Kate Machmeyer Support supported Fund supports development improvement maintenance open digital infrastructure public interest goal strengthen source ecosystem sustainably focusing security resilience technological diversity code funded German Federal Ministry Economic Affairs Climate Action BMWK hosted Agency Disruptive Innovation GmbH SPRIND **Thanks project** Links [STF](https://www.sovereigntechfund.de/programs/challenges): Contribute Open-source Challenge [MEDIUM](https://medium.com/@ProcessingOrg/p5-js-receives-major-funding-from-the-sovereign-tech-fund-bbf61d1171fe): Receives Major Funding Fund]/images/logo/stfwebp undefined"}},"people-fallback":{"A Welles":{"relativeUrl":"/people/#a-welles"},"Aaron Casanova":{"relativeUrl":"/people/#aaron-casanova"},"Aaron George":{"relativeUrl":"/people/#aaron-george"},"aarón montoya-moraga":{"relativeUrl":"/people/#aaron-montoya-moraga"},"Aaron Ni":{"relativeUrl":"/people/#aaron-ni"},"Aatish Bhatia":{"relativeUrl":"/people/#aatish-bhatia"},"Abe Pazos":{"relativeUrl":"/people/#abe-pazos"},"Abhi Gulati":{"relativeUrl":"/people/#abhi-gulati"},"Abhinav Kumar":{"relativeUrl":"/people/#abhinav-kumar"},"Abhinav Sagar":{"relativeUrl":"/people/#abhinav-sagar"},"Abhinav Srinivas":{"relativeUrl":"/people/#abhinav-srinivas"},"Abishake":{"relativeUrl":"/people/#abishake"},"Acha":{"relativeUrl":"/people/#acha"},"Adam Ferriss":{"relativeUrl":"/people/#adam-ferriss"},"Adam Král":{"relativeUrl":"/people/#adam-kral"},"Adam Smith":{"relativeUrl":"/people/#adam-smith"},"Adarsh":{"relativeUrl":"/people/#adarsh"},"Adil Rabbani":{"relativeUrl":"/people/#adil-rabbani"},"Aditya Deshpande":{"relativeUrl":"/people/#aditya-deshpande"},"Aditya Mohan":{"relativeUrl":"/people/#aditya-mohan"},"Aditya Rachman Putra":{"relativeUrl":"/people/#aditya-rachman-putra"},"Aditya Rana":{"relativeUrl":"/people/#aditya-rana"},"Aditya Shrivastav":{"relativeUrl":"/people/#aditya-shrivastav"},"Aditya Siddheshwar":{"relativeUrl":"/people/#aditya-siddheshwar"},"aditya123473892":{"relativeUrl":"/people/#aditya123473892"},"Adwaith D":{"relativeUrl":"/people/#adwaith-d"},"agrshch":{"relativeUrl":"/people/#agrshch"},"Ahmet Kaya":{"relativeUrl":"/people/#ahmet-kaya"},"Aidan Nelson":{"relativeUrl":"/people/#aidan-nelson"},"Aierie":{"relativeUrl":"/people/#aierie"},"Ajaya Mati":{"relativeUrl":"/people/#ajaya-mati"},"ajayTDM":{"relativeUrl":"/people/#ajaytdm"},"Ajeet Pratap Singh":{"relativeUrl":"/people/#ajeet-pratap-singh"},"Akash Jaiswal":{"relativeUrl":"/people/#akash-jaiswal"},"AKASH RAJ":{"relativeUrl":"/people/#akash-raj"},"Akash":{"relativeUrl":"/people/#akash"},"Akhil Raj":{"relativeUrl":"/people/#akhil-raj"},"Akshat Nema":{"relativeUrl":"/people/#akshat-nema"},"Akshay Padte":{"relativeUrl":"/people/#akshay-padte"},"al6862":{"relativeUrl":"/people/#al6862"},"Alberto Di Biase":{"relativeUrl":"/people/#alberto-di-biase"},"Alejandra Trejo":{"relativeUrl":"/people/#alejandra-trejo"},"Alejandro":{"relativeUrl":"/people/#alejandro"},"Alex Lyons":{"relativeUrl":"/people/#alex-lyons"},"Alex Troesch":{"relativeUrl":"/people/#alex-troesch"},"AliLordLoss":{"relativeUrl":"/people/#alilordloss"},"AlM Chng":{"relativeUrl":"/people/#alm-chng"},"Aloneduckling":{"relativeUrl":"/people/#aloneduckling"},"alp tuğan":{"relativeUrl":"/people/#alp-tugan"},"Amey Bhavsar":{"relativeUrl":"/people/#amey-bhavsar"},"anagondesign":{"relativeUrl":"/people/#anagondesign"},"András Gárdos":{"relativeUrl":"/people/#andras-gardos"},"AndrasGG":{"relativeUrl":"/people/#andrasgg"},"andrei antonescu":{"relativeUrl":"/people/#andrei-antonescu"},"Andy Timmons":{"relativeUrl":"/people/#andy-timmons"},"Ankush Banik":{"relativeUrl":"/people/#ankush-banik"},"Anna Carreras":{"relativeUrl":"/people/#anna-carreras"},"Annie McKinnon":{"relativeUrl":"/people/#annie-mckinnon"},"anniezhengg":{"relativeUrl":"/people/#anniezhengg"},"Anshuman Maurya":{"relativeUrl":"/people/#anshuman-maurya"},"Anthony Su":{"relativeUrl":"/people/#anthony-su"},"Antonio Jesús Sánchez Padial":{"relativeUrl":"/people/#antonio-jesus-sanchez-padial"},"ANURAG GUPTA":{"relativeUrl":"/people/#anurag-gupta"},"Aqmalp99":{"relativeUrl":"/people/#aqmalp99"},"Arbaaz":{"relativeUrl":"/people/#arbaaz"},"Arihant Parsoya":{"relativeUrl":"/people/#arihant-parsoya"},"Arijit Kundu":{"relativeUrl":"/people/#arijit-kundu"},"Arijit":{"relativeUrl":"/people/#arijit"},"Armaan Gupta":{"relativeUrl":"/people/#armaan-gupta"},"Arsenije Savic":{"relativeUrl":"/people/#arsenije-savic"},"ArshM17":{"relativeUrl":"/people/#arshm17"},"Aryan Koundal":{"relativeUrl":"/people/#aryan-koundal"},"Aryan Singh":{"relativeUrl":"/people/#aryan-singh"},"Aryan Thakor":{"relativeUrl":"/people/#aryan-thakor"},"Ashley Kang":{"relativeUrl":"/people/#ashley-kang"},"Ashris":{"relativeUrl":"/people/#ashris"},"ashu8912":{"relativeUrl":"/people/#ashu8912"},"AsukaMinato":{"relativeUrl":"/people/#asukaminato"},"Atul Varma":{"relativeUrl":"/people/#atul-varma"},"Austin Cawley-Edwards":{"relativeUrl":"/people/#austin-cawley-edwards"},"Austin Lee Slominski":{"relativeUrl":"/people/#austin-lee-slominski"},"Avelar":{"relativeUrl":"/people/#avelar"},"Ayush Jain":{"relativeUrl":"/people/#ayush-jain"},"Ayush Shankar":{"relativeUrl":"/people/#ayush-shankar"},"Ayush Sharma":{"relativeUrl":"/people/#ayush-sharma"},"b2renger":{"relativeUrl":"/people/#b2renger"},"Beau Muylle":{"relativeUrl":"/people/#beau-muylle"},"Ben Fry":{"relativeUrl":"/people/#ben-fry"},"Ben Greenberg":{"relativeUrl":"/people/#ben-greenberg"},"Ben Hinchley":{"relativeUrl":"/people/#ben-hinchley"},"Ben Moren":{"relativeUrl":"/people/#ben-moren"},"Ben Scheiner":{"relativeUrl":"/people/#ben-scheiner"},"Ben Wendt":{"relativeUrl":"/people/#ben-wendt"},"Benjamin Davies":{"relativeUrl":"/people/#benjamin-davies"},"Benoît Bouré":{"relativeUrl":"/people/#benoit-boure"},"BerfinA":{"relativeUrl":"/people/#berfina"},"Berke Özgen":{"relativeUrl":"/people/#berke-ozgen"},"Bernice Wu":{"relativeUrl":"/people/#bernice-wu"},"Bharath Kumar R":{"relativeUrl":"/people/#bharath-kumar-r"},"Blaize Kaye":{"relativeUrl":"/people/#blaize-kaye"},"Boaz":{"relativeUrl":"/people/#boaz"},"Bob Holt":{"relativeUrl":"/people/#bob-holt"},"Bob Ippolito":{"relativeUrl":"/people/#bob-ippolito"},"Bobby Kazimiroff":{"relativeUrl":"/people/#bobby-kazimiroff"},"Boris Bucha":{"relativeUrl":"/people/#boris-bucha"},"Brad Buchanan":{"relativeUrl":"/people/#brad-buchanan"},"Brad Smith":{"relativeUrl":"/people/#brad-smith"},"Brahvim":{"relativeUrl":"/people/#brahvim"},"Brett Cooper":{"relativeUrl":"/people/#brett-cooper"},"Brian Boucheron":{"relativeUrl":"/people/#brian-boucheron"},"Brian Whitman":{"relativeUrl":"/people/#brian-whitman"},"brightredchilli":{"relativeUrl":"/people/#brightredchilli"},"Bryan":{"relativeUrl":"/people/#bryan"},"bsubbaraman":{"relativeUrl":"/people/#bsubbaraman"},"Bulkan Evcimen":{"relativeUrl":"/people/#bulkan-evcimen"},"cab_kyabe":{"relativeUrl":"/people/#cab-kyabe"},"cacoollib":{"relativeUrl":"/people/#cacoollib"},"Caitlin":{"relativeUrl":"/people/#caitlin"},"Caleb Eggensperger":{"relativeUrl":"/people/#caleb-eggensperger"},"Caleb Foss":{"relativeUrl":"/people/#caleb-foss"},"Caleb Mazalevskis":{"relativeUrl":"/people/#caleb-mazalevskis"},"Cameron Yick":{"relativeUrl":"/people/#cameron-yick"},"Camille Roux":{"relativeUrl":"/people/#camille-roux"},"Caroline Hermans":{"relativeUrl":"/people/#caroline-hermans"},"Caroline Record":{"relativeUrl":"/people/#caroline-record"},"Casey Reas":{"relativeUrl":"/people/#casey-reas"},"Cassie Tarakajian":{"relativeUrl":"/people/#cassie-tarakajian"},"cedarfall":{"relativeUrl":"/people/#cedarfall"},"Ceesjan Luiten":{"relativeUrl":"/people/#ceesjan-luiten"},"Chan Jun Shern":{"relativeUrl":"/people/#chan-jun-shern"},"Chandler McWilliams":{"relativeUrl":"/people/#chandler-mcwilliams"},"Char":{"relativeUrl":"/people/#char"},"chaski":{"relativeUrl":"/people/#chaski"},"chechenxu":{"relativeUrl":"/people/#chechenxu"},"Chelly Jin":{"relativeUrl":"/people/#chelly-jin"},"Chiciuc Nicușor":{"relativeUrl":"/people/#chiciuc-nicusor"},"Chinmay Kadam":{"relativeUrl":"/people/#chinmay-kadam"},"Chiun Hau You":{"relativeUrl":"/people/#chiun-hau-you"},"Chris Hallberg":{"relativeUrl":"/people/#chris-hallberg"},"Chris P.":{"relativeUrl":"/people/#chris-p-"},"Chris Thomson":{"relativeUrl":"/people/#chris-thomson"},"Chris":{"relativeUrl":"/people/#chris"},"Christine de Carteret":{"relativeUrl":"/people/#christine-de-carteret"},"Christopher Coleman":{"relativeUrl":"/people/#christopher-coleman"},"Christopher John Ryan":{"relativeUrl":"/people/#christopher-john-ryan"},"Claire K-V":{"relativeUrl":"/people/#claire-k-v"},"Cliff Su":{"relativeUrl":"/people/#cliff-su"},"codeanticode":{"relativeUrl":"/people/#codeanticode"},"Coding for the Arts":{"relativeUrl":"/people/#coding-for-the-arts"},"Cody Fuller":{"relativeUrl":"/people/#cody-fuller"},"CommanderRoot":{"relativeUrl":"/people/#commanderroot"},"Connie Liu":{"relativeUrl":"/people/#connie-liu"},"Constance Yu":{"relativeUrl":"/people/#constance-yu"},"Corey Farwell":{"relativeUrl":"/people/#corey-farwell"},"Corey Gouker":{"relativeUrl":"/people/#corey-gouker"},"Cosme Escobedo":{"relativeUrl":"/people/#cosme-escobedo"},"Craig Pickard":{"relativeUrl":"/people/#craig-pickard"},"Cristóbal Valenzuela":{"relativeUrl":"/people/#cristobal-valenzuela"},"cypress masso":{"relativeUrl":"/people/#cypress-masso"},"Dabe Andre Enajada":{"relativeUrl":"/people/#dabe-andre-enajada"},"Dan Hoizner":{"relativeUrl":"/people/#dan-hoizner"},"Dan":{"relativeUrl":"/people/#dan"},"Dana Mulder":{"relativeUrl":"/people/#dana-mulder"},"Daniel Adams":{"relativeUrl":"/people/#daniel-adams"},"Daniel Grantham":{"relativeUrl":"/people/#daniel-grantham"},"Daniel Howe":{"relativeUrl":"/people/#daniel-howe"},"Daniel Marino":{"relativeUrl":"/people/#daniel-marino"},"Daniel Michel":{"relativeUrl":"/people/#daniel-michel"},"Daniel Sarno":{"relativeUrl":"/people/#daniel-sarno"},"Daniel Shiffman":{"relativeUrl":"/people/#daniel-shiffman"},"Darby Rathbone":{"relativeUrl":"/people/#darby-rathbone"},"Darío Hereñú":{"relativeUrl":"/people/#dario-herenu"},"Darius Morawiec":{"relativeUrl":"/people/#darius-morawiec"},"Dave Pagurek":{"relativeUrl":"/people/#dave-pagurek"},"Dave":{"relativeUrl":"/people/#dave"},"David Aerne":{"relativeUrl":"/people/#david-aerne"},"David Newbury":{"relativeUrl":"/people/#david-newbury"},"David Weiss":{"relativeUrl":"/people/#david-weiss"},"David White":{"relativeUrl":"/people/#david-white"},"David Wicks":{"relativeUrl":"/people/#david-wicks"},"David":{"relativeUrl":"/people/#david"},"Decoy4ever":{"relativeUrl":"/people/#decoy4ever"},"Derek Enlow":{"relativeUrl":"/people/#derek-enlow"},"Derek J. Kinsman":{"relativeUrl":"/people/#derek-j--kinsman"},"Derrick McMillen":{"relativeUrl":"/people/#derrick-mcmillen"},"Deveshi Dwivedi":{"relativeUrl":"/people/#deveshi-dwivedi"},"Devon Rifkin":{"relativeUrl":"/people/#devon-rifkin"},"Dewansh Thakur":{"relativeUrl":"/people/#dewansh-thakur"},"Dharshan":{"relativeUrl":"/people/#dharshan"},"Dhruv Sahnan":{"relativeUrl":"/people/#dhruv-sahnan"},"Diana Galindo":{"relativeUrl":"/people/#diana-galindo"},"digitalfrost":{"relativeUrl":"/people/#digitalfrost"},"Divyansh013":{"relativeUrl":"/people/#divyansh013"},"DIVYANSHU RAJ":{"relativeUrl":"/people/#divyanshu-raj"},"Diya Solanki":{"relativeUrl":"/people/#diya-solanki"},"DIYgirls":{"relativeUrl":"/people/#diygirls"},"Dominic Jodoin":{"relativeUrl":"/people/#dominic-jodoin"},"Dorothy R. Santos":{"relativeUrl":"/people/#dorothy-r--santos"},"Dr. Holomorfo":{"relativeUrl":"/people/#dr--holomorfo"},"dummyAccount22":{"relativeUrl":"/people/#dummyaccount22"},"Dusk":{"relativeUrl":"/people/#dusk"},"Dwiferdio Seagal Putra":{"relativeUrl":"/people/#dwiferdio-seagal-putra"},"e-Coucou":{"relativeUrl":"/people/#e-coucou"},"Ed Brannin":{"relativeUrl":"/people/#ed-brannin"},"Eden Cridge":{"relativeUrl":"/people/#eden-cridge"},"elgin mclaren":{"relativeUrl":"/people/#elgin-mclaren"},"Elliot-Hernandez":{"relativeUrl":"/people/#elliot-hernandez"},"EmilioOcelotl":{"relativeUrl":"/people/#emilioocelotl"},"Emily Chen":{"relativeUrl":"/people/#emily-chen"},"Emily Xie":{"relativeUrl":"/people/#emily-xie"},"Emma Krantz":{"relativeUrl":"/people/#emma-krantz"},"Epic Jefferson":{"relativeUrl":"/people/#epic-jefferson"},"epramer-godaddy":{"relativeUrl":"/people/#epramer-godaddy"},"Erica Pramer":{"relativeUrl":"/people/#erica-pramer"},"Erik Butcher":{"relativeUrl":"/people/#erik-butcher"},"Eshaan Aggarwal":{"relativeUrl":"/people/#eshaan-aggarwal"},"Evelyn Eastmond":{"relativeUrl":"/people/#evelyn-eastmond"},"evelyn masso":{"relativeUrl":"/people/#evelyn-masso"},"everything became blue":{"relativeUrl":"/people/#everything-became-blue"},"Evorage":{"relativeUrl":"/people/#evorage"},"Ewan Johnstone":{"relativeUrl":"/people/#ewan-johnstone"},"Fabian Morón Zirfas":{"relativeUrl":"/people/#fabian-moron-zirfas"},"Faith Wuyue Yu":{"relativeUrl":"/people/#faith-wuyue-yu"},"FAL":{"relativeUrl":"/people/#fal"},"Federico Grandi":{"relativeUrl":"/people/#federico-grandi"},"feedzh":{"relativeUrl":"/people/#feedzh"},"Fenil Gandhi":{"relativeUrl":"/people/#fenil-gandhi"},"ffd8":{"relativeUrl":"/people/#ffd8"},"Fisher Diede":{"relativeUrl":"/people/#fisher-diede"},"Francesco Bigiarini":{"relativeUrl":"/people/#francesco-bigiarini"},"Freddie Rawlins":{"relativeUrl":"/people/#freddie-rawlins"},"Frederik Ring":{"relativeUrl":"/people/#frederik-ring"},"Fun Planet":{"relativeUrl":"/people/#fun-planet"},"Gareth Battensby":{"relativeUrl":"/people/#gareth-battensby"},"Gareth Williams":{"relativeUrl":"/people/#gareth-williams"},"Garima":{"relativeUrl":"/people/#garima"},"gauini":{"relativeUrl":"/people/#gauini"},"Gaurav Tiwary":{"relativeUrl":"/people/#gaurav-tiwary"},"Gene Kogan":{"relativeUrl":"/people/#gene-kogan"},"Geraldo Neto":{"relativeUrl":"/people/#geraldo-neto"},"ggorlen":{"relativeUrl":"/people/#ggorlen"},"Ghales":{"relativeUrl":"/people/#ghales"},"Golan Levin":{"relativeUrl":"/people/#golan-levin"},"GoToLoop":{"relativeUrl":"/people/#gotoloop"},"Gracia-zhang":{"relativeUrl":"/people/#gracia-zhang"},"Greg Sadetsky":{"relativeUrl":"/people/#greg-sadetsky"},"Gregor Martynus":{"relativeUrl":"/people/#gregor-martynus"},"Guilherme Silveira":{"relativeUrl":"/people/#guilherme-silveira"},"Guillermo Montecinos":{"relativeUrl":"/people/#guillermo-montecinos"},"Gus Becker":{"relativeUrl":"/people/#gus-becker"},"Haider Ali Punjabi":{"relativeUrl":"/people/#haider-ali-punjabi"},"Half Scheidl":{"relativeUrl":"/people/#half-scheidl"},"harkirat singh":{"relativeUrl":"/people/#harkirat-singh"},"Harman Batheja":{"relativeUrl":"/people/#harman-batheja"},"Harrycheng233":{"relativeUrl":"/people/#harrycheng233"},"Harsh Agrawal":{"relativeUrl":"/people/#harsh-agrawal"},"Harsh Range":{"relativeUrl":"/people/#harsh-range"},"Harshil Goel":{"relativeUrl":"/people/#harshil-goel"},"Hilary Lau":{"relativeUrl":"/people/#hilary-lau"},"Himanshu Malviya":{"relativeUrl":"/people/#himanshu-malviya"},"Hirad Sab":{"relativeUrl":"/people/#hirad-sab"},"Hitesh Kumar":{"relativeUrl":"/people/#hitesh-kumar"},"hrishit":{"relativeUrl":"/people/#hrishit"},"hunahpu18":{"relativeUrl":"/people/#hunahpu18"},"hvillase":{"relativeUrl":"/people/#hvillase"},"iambiancafonseca":{"relativeUrl":"/people/#iambiancafonseca"},"IENGROUND":{"relativeUrl":"/people/#ienground"},"Ike Bischof":{"relativeUrl":"/people/#ike-bischof"},"Ikko Ashimine":{"relativeUrl":"/people/#ikko-ashimine"},"INARI_DARKFOX":{"relativeUrl":"/people/#inari-darkfox"},"Inhwa":{"relativeUrl":"/people/#inhwa"},"Isaac Durazo ":{"relativeUrl":"/people/#isaac-durazo-"},"İsmail Namdar":{"relativeUrl":"/people/#ismail-namdar"},"Ivy Feraco":{"relativeUrl":"/people/#ivy-feraco"},"J Wong":{"relativeUrl":"/people/#j-wong"},"Jack B. Du":{"relativeUrl":"/people/#jack-b--du"},"Jack Dempsey":{"relativeUrl":"/people/#jack-dempsey"},"Jacques P. du Toit":{"relativeUrl":"/people/#jacques-p--du-toit"},"Jai Kotia":{"relativeUrl":"/people/#jai-kotia"},"Jai Vignesh J":{"relativeUrl":"/people/#jai-vignesh-j"},"Jakub Valtar":{"relativeUrl":"/people/#jakub-valtar"},"James Dunn":{"relativeUrl":"/people/#james-dunn"},"Janis Sepúlveda":{"relativeUrl":"/people/#janis-sepulveda"},"Jared Donovan":{"relativeUrl":"/people/#jared-donovan"},"Jared Sprague":{"relativeUrl":"/people/#jared-sprague"},"Jason Alderman":{"relativeUrl":"/people/#jason-alderman"},"Jason Mandel":{"relativeUrl":"/people/#jason-mandel"},"Jason Sigal":{"relativeUrl":"/people/#jason-sigal"},"Jatin Panjwani":{"relativeUrl":"/people/#jatin-panjwani"},"Jay Gupta":{"relativeUrl":"/people/#jay-gupta"},"Jaymz Rhime":{"relativeUrl":"/people/#jaymz-rhime"},"Jean-Michaël Celerier":{"relativeUrl":"/people/#jean-michael-celerier"},"Jean Pierre Charalambos":{"relativeUrl":"/people/#jean-pierre-charalambos"},"Jen Kagan":{"relativeUrl":"/people/#jen-kagan"},"Jenna deBoisblanc":{"relativeUrl":"/people/#jenna-deboisblanc"},"Jenna":{"relativeUrl":"/people/#jenna"},"Jennifer Jacobs":{"relativeUrl":"/people/#jennifer-jacobs"},"Jens Axel Søgaard":{"relativeUrl":"/people/#jens-axel-søgaard"},"jeong":{"relativeUrl":"/people/#jeong"},"Jerel Johnson":{"relativeUrl":"/people/#jerel-johnson"},"Jeremy Tuloup":{"relativeUrl":"/people/#jeremy-tuloup"},"Jess Klein":{"relativeUrl":"/people/#jess-klein"},"jesse cahn-thompson":{"relativeUrl":"/people/#jesse-cahn-thompson"},"Jesús Enrique Rascón":{"relativeUrl":"/people/#jesus-enrique-rascon"},"JetStarBlues":{"relativeUrl":"/people/#jetstarblues"},"Jiashan Wu":{"relativeUrl":"/people/#jiashan-wu"},"Jimish Fotariya":{"relativeUrl":"/people/#jimish-fotariya"},"Jithin KS":{"relativeUrl":"/people/#jithin-ks"},"Jiwon Park (hanpanic)":{"relativeUrl":"/people/#jiwon-park-(hanpanic)"},"JoeCastor":{"relativeUrl":"/people/#joecastor"},"Johan Karlsson":{"relativeUrl":"/people/#johan-karlsson"},"John Pasquarello":{"relativeUrl":"/people/#john-pasquarello"},"Jon Kaufman":{"relativeUrl":"/people/#jon-kaufman"},"Jonas Rinke":{"relativeUrl":"/people/#jonas-rinke"},"Jonathan Dahan":{"relativeUrl":"/people/#jonathan-dahan"},"Jonathan-David Schröder":{"relativeUrl":"/people/#jonathan-david-schroder"},"Jonathan Heindl":{"relativeUrl":"/people/#jonathan-heindl"},"Joonas Jokinen":{"relativeUrl":"/people/#joonas-jokinen"},"Jordan Shaw":{"relativeUrl":"/people/#jordan-shaw"},"Jordan Sucher":{"relativeUrl":"/people/#jordan-sucher"},"Jorge Moreno":{"relativeUrl":"/people/#jorge-moreno"},"José Miguel Tajuelo Garrigós":{"relativeUrl":"/people/#jose-miguel-tajuelo-garrigos"},"Joseph Aronson":{"relativeUrl":"/people/#joseph-aronson"},"Joseph Hong":{"relativeUrl":"/people/#joseph-hong"},"Joshua Marris":{"relativeUrl":"/people/#joshua-marris"},"Joshua Noble":{"relativeUrl":"/people/#joshua-noble"},"Joshua Storm Becker":{"relativeUrl":"/people/#joshua-storm-becker"},"Jstodd":{"relativeUrl":"/people/#jstodd"},"JT Nimoy":{"relativeUrl":"/people/#jt-nimoy"},"Juan Irache":{"relativeUrl":"/people/#juan-irache"},"juliane nagao":{"relativeUrl":"/people/#juliane-nagao"},"Julio Lab":{"relativeUrl":"/people/#julio-lab"},"Juraj Onuska":{"relativeUrl":"/people/#juraj-onuska"},"Justin Kim":{"relativeUrl":"/people/#justin-kim"},"Jyotiraditya Pradhan":{"relativeUrl":"/people/#jyotiraditya-pradhan"},"K.Adam White":{"relativeUrl":"/people/#k-adam-white"},"kaabe1":{"relativeUrl":"/people/#kaabe1"},"Kai-han Chang":{"relativeUrl":"/people/#kai-han-chang"},"Karen":{"relativeUrl":"/people/#karen"},"karinaxlpz":{"relativeUrl":"/people/#karinaxlpz"},"Kate Grant":{"relativeUrl":"/people/#kate-grant"},"Kate Hollenbach":{"relativeUrl":"/people/#kate-hollenbach"},"Kathryn Isabelle Lawrence":{"relativeUrl":"/people/#kathryn-isabelle-lawrence"},"Katie":{"relativeUrl":"/people/#katie"},"Katsuya Endoh":{"relativeUrl":"/people/#katsuya-endoh"},"Keith Tan":{"relativeUrl":"/people/#keith-tan"},"Ken Miller":{"relativeUrl":"/people/#ken-miller"},"Kenneth Lim":{"relativeUrl":"/people/#kenneth-lim"},"Keshav Malik":{"relativeUrl":"/people/#keshav-malik"},"Kevin Barabash":{"relativeUrl":"/people/#kevin-barabash"},"Kevin Bradley":{"relativeUrl":"/people/#kevin-bradley"},"Kevin Grajeda":{"relativeUrl":"/people/#kevin-grajeda"},"Kevin Ho":{"relativeUrl":"/people/#kevin-ho"},"Kevin Siwoff":{"relativeUrl":"/people/#kevin-siwoff"},"Kevin Workman":{"relativeUrl":"/people/#kevin-workman"},"kjav":{"relativeUrl":"/people/#kjav"},"konstantinstanmeyer":{"relativeUrl":"/people/#konstantinstanmeyer"},"koolaidkrusade":{"relativeUrl":"/people/#koolaidkrusade"},"kroko / Reinis Adovičs":{"relativeUrl":"/people/#kroko---reinis-adovics"},"Kunal Kumar Verma":{"relativeUrl":"/people/#kunal-kumar-verma"},"Kyle James":{"relativeUrl":"/people/#kyle-james"},"Kyle McDonald":{"relativeUrl":"/people/#kyle-mcdonald"},"L05":{"relativeUrl":"/people/#l05"},"Laksh Singla":{"relativeUrl":"/people/#laksh-singla"},"Lakshay Joshi":{"relativeUrl":"/people/#lakshay-joshi"},"lam802":{"relativeUrl":"/people/#lam802"},"Laura Ciro":{"relativeUrl":"/people/#laura-ciro"},"Lauren Lee McCarthy":{"relativeUrl":"/people/#lauren-lee-mccarthy"},"Lauren":{"relativeUrl":"/people/#lauren"},"Lee T":{"relativeUrl":"/people/#lee-t"},"LEMIBANDDEXARI":{"relativeUrl":"/people/#lemibanddexari"},"Leo Kamwathi":{"relativeUrl":"/people/#leo-kamwathi"},"Leo Wang":{"relativeUrl":"/people/#leo-wang"},"Leslie Yip":{"relativeUrl":"/people/#leslie-yip"},"Liam Piesley":{"relativeUrl":"/people/#liam-piesley"},"Liang Tang":{"relativeUrl":"/people/#liang-tang"},"Linda Paiste":{"relativeUrl":"/people/#linda-paiste"},"Lingxiao Wang":{"relativeUrl":"/people/#lingxiao-wang"},"linnhallonqvist":{"relativeUrl":"/people/#linnhallonqvist"},"Lionel Ringenbach":{"relativeUrl":"/people/#lionel-ringenbach"},"Lisa Mabley":{"relativeUrl":"/people/#lisa-mabley"},"Liu Chang":{"relativeUrl":"/people/#liu-chang"},"Liz Peng":{"relativeUrl":"/people/#liz-peng"},"Long Phan":{"relativeUrl":"/people/#long-phan"},"lottihill":{"relativeUrl":"/people/#lottihill"},"Louis Demange":{"relativeUrl":"/people/#louis-demange"},"Luc de wit":{"relativeUrl":"/people/#luc-de-wit"},"Luca Damasco":{"relativeUrl":"/people/#luca-damasco"},"Luis Morales-Navarro":{"relativeUrl":"/people/#luis-morales-navarro"},"luisaph":{"relativeUrl":"/people/#luisaph"},"Luke Burgess-Yeo":{"relativeUrl":"/people/#luke-burgess-yeo"},"M":{"relativeUrl":"/people/#m"},"Maciej Stankiewicz":{"relativeUrl":"/people/#maciej-stankiewicz"},"maddy":{"relativeUrl":"/people/#maddy"},"maddyfisher":{"relativeUrl":"/people/#maddyfisher"},"mainstreamdev":{"relativeUrl":"/people/#mainstreamdev"},"Malay Vasa":{"relativeUrl":"/people/#malay-vasa"},"Manan Arora":{"relativeUrl":"/people/#manan-arora"},"Mann Shah":{"relativeUrl":"/people/#mann-shah"},"manpreet":{"relativeUrl":"/people/#manpreet"},"Marc Abbey":{"relativeUrl":"/people/#marc-abbey"},"Marcus Parsons":{"relativeUrl":"/people/#marcus-parsons"},"Mark Nikora":{"relativeUrl":"/people/#mark-nikora"},"Mark Russo":{"relativeUrl":"/people/#mark-russo"},"Mateusz Swiatkowski":{"relativeUrl":"/people/#mateusz-swiatkowski"},"Mathura MG":{"relativeUrl":"/people/#mathura-mg"},"MATSUDA, Kouichi":{"relativeUrl":"/people/#matsuda,-kouichi"},"Matthew Kaney":{"relativeUrl":"/people/#matthew-kaney"},"Mattia Micheletta Merlin":{"relativeUrl":"/people/#mattia-micheletta-merlin"},"Mauricio Verano Merino":{"relativeUrl":"/people/#mauricio-verano-merino"},"Max Goldstein":{"relativeUrl":"/people/#max-goldstein"},"Max Kolyanov":{"relativeUrl":"/people/#max-kolyanov"},"Max Segal":{"relativeUrl":"/people/#max-segal"},"maxdevjs":{"relativeUrl":"/people/#maxdevjs"},"Maya Man":{"relativeUrl":"/people/#maya-man"},"mcturner1995":{"relativeUrl":"/people/#mcturner1995"},"meezwhite":{"relativeUrl":"/people/#meezwhite"},"mhsh312":{"relativeUrl":"/people/#mhsh312"},"Miaoye Que":{"relativeUrl":"/people/#miaoye-que"},"Michael Hadley":{"relativeUrl":"/people/#michael-hadley"},"Michael J Conrad":{"relativeUrl":"/people/#michael-j-conrad"},"Mikael Lindqvist":{"relativeUrl":"/people/#mikael-lindqvist"},"Mike ":{"relativeUrl":"/people/#mike-"},"Mike Anderson":{"relativeUrl":"/people/#mike-anderson"},"Miles Peyton":{"relativeUrl":"/people/#miles-peyton"},"min-kim42":{"relativeUrl":"/people/#min-kim42"},"MiniPear":{"relativeUrl":"/people/#minipear"},"Minjun Kim":{"relativeUrl":"/people/#minjun-kim"},"Minwook Park":{"relativeUrl":"/people/#minwook-park"},"Mislav Milicevic":{"relativeUrl":"/people/#mislav-milicevic"},"ml.008":{"relativeUrl":"/people/#ml-008"},"mohamedalisaifudeen":{"relativeUrl":"/people/#mohamedalisaifudeen"},"Mohammad Hussain Nagaria":{"relativeUrl":"/people/#mohammad-hussain-nagaria"},"Mohana Sundaram S":{"relativeUrl":"/people/#mohana-sundaram-s"},"Mohit Balwani":{"relativeUrl":"/people/#mohit-balwani"},"Moira Turner":{"relativeUrl":"/people/#moira-turner"},"Monalisa Maity":{"relativeUrl":"/people/#monalisa-maity"},"Monica Powell":{"relativeUrl":"/people/#monica-powell"},"Mostafa Ewis":{"relativeUrl":"/people/#mostafa-ewis"},"Mr. Algorithm":{"relativeUrl":"/people/#mr--algorithm"},"Muhammad Haroon":{"relativeUrl":"/people/#muhammad-haroon"},"Munus Shih":{"relativeUrl":"/people/#munus-shih"},"Musab Kılıç":{"relativeUrl":"/people/#musab-kılıc"},"mxchelle":{"relativeUrl":"/people/#mxchelle"},"Nabeel (Dexter)":{"relativeUrl":"/people/#nabeel-(dexter)"},"Nabil Hassein":{"relativeUrl":"/people/#nabil-hassein"},"Nahuel Palumbo":{"relativeUrl":"/people/#nahuel-palumbo"},"Nakul Shahdadpuri":{"relativeUrl":"/people/#nakul-shahdadpuri"},"nancy":{"relativeUrl":"/people/#nancy"},"Naoto Hieda":{"relativeUrl":"/people/#naoto-hieda"},"naoyashiga":{"relativeUrl":"/people/#naoyashiga"},"Nat Decker":{"relativeUrl":"/people/#nat-decker"},"Nicholas Marino":{"relativeUrl":"/people/#nicholas-marino"},"NicholasGillen":{"relativeUrl":"/people/#nicholasgillen"},"Nick Briz":{"relativeUrl":"/people/#nick-briz"},"Nick McIntyre":{"relativeUrl":"/people/#nick-mcintyre"},"Nick Müller":{"relativeUrl":"/people/#nick-muller"},"Nick Yahnke":{"relativeUrl":"/people/#nick-yahnke"},"Nico Finkernagel":{"relativeUrl":"/people/#nico-finkernagel"},"Niels Joubert":{"relativeUrl":"/people/#niels-joubert"},"NIINOMI":{"relativeUrl":"/people/#niinomi"},"Nik Nyby":{"relativeUrl":"/people/#nik-nyby"},"Nikhil":{"relativeUrl":"/people/#nikhil"},"nikhilkalburgi":{"relativeUrl":"/people/#nikhilkalburgi"},"Niki Ito":{"relativeUrl":"/people/#niki-ito"},"Niklas Peters":{"relativeUrl":"/people/#niklas-peters"},"Nisar Hassan Naqvi":{"relativeUrl":"/people/#nisar-hassan-naqvi"},"Nitin Rana":{"relativeUrl":"/people/#nitin-rana"},"Nitish Bansal":{"relativeUrl":"/people/#nitish-bansal"},"nully0x":{"relativeUrl":"/people/#nully0x"},"odm275":{"relativeUrl":"/people/#odm275"},"oleboleskole3":{"relativeUrl":"/people/#oleboleskole3"},"Oleksii Bulba":{"relativeUrl":"/people/#oleksii-bulba"},"Oliver Steele":{"relativeUrl":"/people/#oliver-steele"},"Oliver Wright":{"relativeUrl":"/people/#oliver-wright"},"Onexi":{"relativeUrl":"/people/#onexi"},"Ong Zhi Zheng":{"relativeUrl":"/people/#ong-zhi-zheng"},"Oren Shoham":{"relativeUrl":"/people/#oren-shoham"},"Orwiss":{"relativeUrl":"/people/#orwiss"},"ov":{"relativeUrl":"/people/#ov"},"oz":{"relativeUrl":"/people/#oz"},"paollabd":{"relativeUrl":"/people/#paollabd"},"Paolo Pedercini":{"relativeUrl":"/people/#paolo-pedercini"},"Paul Wheeler":{"relativeUrl":"/people/#paul-wheeler"},"Peiling Jiang":{"relativeUrl":"/people/#peiling-jiang"},"perminder-17":{"relativeUrl":"/people/#perminder-17"},"Peter Marsh":{"relativeUrl":"/people/#peter-marsh"},"peter":{"relativeUrl":"/people/#peter"},"Petr Brzek":{"relativeUrl":"/people/#petr-brzek"},"Philip Bell":{"relativeUrl":"/people/#philip-bell"},"Phoenix Perry":{"relativeUrl":"/people/#phoenix-perry"},"pie999":{"relativeUrl":"/people/#pie999"},"Pierre Krafft":{"relativeUrl":"/people/#pierre-krafft"},"pifragile":{"relativeUrl":"/people/#pifragile"},"piinthecloud":{"relativeUrl":"/people/#piinthecloud"},"pinky-pig":{"relativeUrl":"/people/#pinky-pig"},"PiyushChandra17":{"relativeUrl":"/people/#piyushchandra17"},"plural":{"relativeUrl":"/people/#plural"},"Poulav Bhowmick":{"relativeUrl":"/people/#poulav-bhowmick"},"PracDuckling":{"relativeUrl":"/people/#pracduckling"},"Pragya":{"relativeUrl":"/people/#pragya"},"Prashant Gupta":{"relativeUrl":"/people/#prashant-gupta"},"Prateek Jain":{"relativeUrl":"/people/#prateek-jain"},"Prateekgit":{"relativeUrl":"/people/#prateekgit"},"Pratyay Banerjee":{"relativeUrl":"/people/#pratyay-banerjee"},"Priya-Pathak":{"relativeUrl":"/people/#priya-pathak"},"Qianqian Ye":{"relativeUrl":"/people/#qianqian-ye"},"Quinton Ashley":{"relativeUrl":"/people/#quinton-ashley"},"R. Luke DuBois":{"relativeUrl":"/people/#r--luke-dubois"},"Rachel Lim":{"relativeUrl":"/people/#rachel-lim"},"raclim":{"relativeUrl":"/people/#raclim"},"Rahul Mohata":{"relativeUrl":"/people/#rahul-mohata"},"rahulrangers":{"relativeUrl":"/people/#rahulrangers"},"Rajiv Ranjan Singh":{"relativeUrl":"/people/#rajiv-ranjan-singh"},"Ramin":{"relativeUrl":"/people/#ramin"},"Ramon Jr. Yniguez":{"relativeUrl":"/people/#ramon-jr--yniguez"},"RandomGamingDev":{"relativeUrl":"/people/#randomgamingdev"},"Raphaël de Courville":{"relativeUrl":"/people/#raphael-de-courville"},"reejuBhattacharya":{"relativeUrl":"/people/#reejubhattacharya"},"Reijo Vosu":{"relativeUrl":"/people/#reijo-vosu"},"reona396":{"relativeUrl":"/people/#reona396"},"rinkydevi":{"relativeUrl":"/people/#rinkydevi"},"Rishabh Taparia":{"relativeUrl":"/people/#rishabh-taparia"},"Robyn Overstreet":{"relativeUrl":"/people/#robyn-overstreet"},"Rohan Julka":{"relativeUrl":"/people/#rohan-julka"},"Rune Skjoldborg Madsen":{"relativeUrl":"/people/#rune-skjoldborg-madsen"},"Ryan Slade":{"relativeUrl":"/people/#ryan-slade"},"Ryuya":{"relativeUrl":"/people/#ryuya"},"saber khan":{"relativeUrl":"/people/#saber-khan"},"Sachin Varghese":{"relativeUrl":"/people/#sachin-varghese"},"Sagar Arora":{"relativeUrl":"/people/#sagar-arora"},"Sai Bhushan":{"relativeUrl":"/people/#sai-bhushan"},"Saksham Saxena":{"relativeUrl":"/people/#saksham-saxena"},"sam delong":{"relativeUrl":"/people/#sam-delong"},"Sam Lavigne":{"relativeUrl":"/people/#sam-lavigne"},"sambensim":{"relativeUrl":"/people/#sambensim"},"Samir Ghosh":{"relativeUrl":"/people/#samir-ghosh"},"Sampo Rapeli":{"relativeUrl":"/people/#sampo-rapeli"},"Samrudh Shetty":{"relativeUrl":"/people/#samrudh-shetty"},"Samuel Alarco Cantos":{"relativeUrl":"/people/#samuel-alarco-cantos"},"Samuel Cho":{"relativeUrl":"/people/#samuel-cho"},"Sanchit Kapoor":{"relativeUrl":"/people/#sanchit-kapoor"},"Sandeep Kumar Bhagat":{"relativeUrl":"/people/#sandeep-kumar-bhagat"},"Sanjay Singh Rajpoot":{"relativeUrl":"/people/#sanjay-singh-rajpoot"},"Sanket Singh":{"relativeUrl":"/people/#sanket-singh"},"Sarah Ciston":{"relativeUrl":"/people/#sarah-ciston"},"Sarah Groff Hennigh-Palermo":{"relativeUrl":"/people/#sarah-groff-hennigh-palermo"},"Sarthak Saxena":{"relativeUrl":"/people/#sarthak-saxena"},"Saskia Freeke":{"relativeUrl":"/people/#saskia-freeke"},"Satyam Kulkarni":{"relativeUrl":"/people/#satyam-kulkarni"},"Sawai Singh Rajpurohit":{"relativeUrl":"/people/#sawai-singh-rajpurohit"},"Scott Garner":{"relativeUrl":"/people/#scott-garner"},"Scott Murray":{"relativeUrl":"/people/#scott-murray"},"Seb Méndez":{"relativeUrl":"/people/#seb-mendez"},"SejinOH":{"relativeUrl":"/people/#sejinoh"},"Sekani Warner":{"relativeUrl":"/people/#sekani-warner"},"senbaku":{"relativeUrl":"/people/#senbaku"},"Seonghyeon Kim":{"relativeUrl":"/people/#seonghyeon-kim"},"Sepand Ansari":{"relativeUrl":"/people/#sepand-ansari"},"Serena20003":{"relativeUrl":"/people/#serena20003"},"Seth":{"relativeUrl":"/people/#seth"},"Seung-Gi Kim(David)":{"relativeUrl":"/people/#seung-gi-kim(david)"},"shaharyarshamshi":{"relativeUrl":"/people/#shaharyarshamshi"},"Shahma Ansari":{"relativeUrl":"/people/#shahma-ansari"},"Shahriar Rahman Rubayet":{"relativeUrl":"/people/#shahriar-rahman-rubayet"},"Shawn Van Every":{"relativeUrl":"/people/#shawn-van-every"},"sheamus":{"relativeUrl":"/people/#sheamus"},"SHIBAHARA Hiroki":{"relativeUrl":"/people/#shibahara-hiroki"},"Shirou":{"relativeUrl":"/people/#shirou"},"Shivansh Sharma":{"relativeUrl":"/people/#shivansh-sharma"},"Shubham Kumar":{"relativeUrl":"/people/#shubham-kumar"},"Shubham Rathore":{"relativeUrl":"/people/#shubham-rathore"},"shujulin":{"relativeUrl":"/people/#shujulin"},"siddhant":{"relativeUrl":"/people/#siddhant"},"Simranjeet Singh":{"relativeUrl":"/people/#simranjeet-singh"},"Sinan Ascioglu":{"relativeUrl":"/people/#sinan-ascioglu"},"Sithe Ncube":{"relativeUrl":"/people/#sithe-ncube"},"Sivaram D":{"relativeUrl":"/people/#sivaram-d"},"skyperx":{"relativeUrl":"/people/#skyperx"},"sm7515":{"relativeUrl":"/people/#sm7515"},"smilee":{"relativeUrl":"/people/#smilee"},"So Sun Park":{"relativeUrl":"/people/#so-sun-park"},"Sona Lee":{"relativeUrl":"/people/#sona-lee"},"sortasleepy":{"relativeUrl":"/people/#sortasleepy"},"Souvik Kumar":{"relativeUrl":"/people/#souvik-kumar"},"Sparsh Paliwal":{"relativeUrl":"/people/#sparsh-paliwal"},"sparshg":{"relativeUrl":"/people/#sparshg"},"Spencer Faith":{"relativeUrl":"/people/#spencer-faith"},"sphantom-code":{"relativeUrl":"/people/#sphantom-code"},"Spongman":{"relativeUrl":"/people/#spongman"},"Stalgia Grigg":{"relativeUrl":"/people/#stalgia-grigg"},"stampyzfanz":{"relativeUrl":"/people/#stampyzfanz"},"Stef Tervelde":{"relativeUrl":"/people/#stef-tervelde"},"Steven Green":{"relativeUrl":"/people/#steven-green"},"Stig Møller Hansen":{"relativeUrl":"/people/#stig-møller-hansen"},"stormCup":{"relativeUrl":"/people/#stormcup"},"Sudhanshu Tiwari":{"relativeUrl":"/people/#sudhanshu-tiwari"},"suhani6904":{"relativeUrl":"/people/#suhani6904"},"Suhas CV":{"relativeUrl":"/people/#suhas-cv"},"Summer Rizzo":{"relativeUrl":"/people/#summer-rizzo"},"Sun Lifei":{"relativeUrl":"/people/#sun-lifei"},"surajsurajsuraj":{"relativeUrl":"/people/#surajsurajsuraj"},"Surbhi Pittie":{"relativeUrl":"/people/#surbhi-pittie"},"susan evans":{"relativeUrl":"/people/#susan-evans"},"Swapnil-2001":{"relativeUrl":"/people/#swapnil-2001"},"sz245":{"relativeUrl":"/people/#sz245"},"tae":{"relativeUrl":"/people/#tae"},"Taeyoon Choi":{"relativeUrl":"/people/#taeyoon-choi"},"takawo":{"relativeUrl":"/people/#takawo"},"Takuma Kira":{"relativeUrl":"/people/#takuma-kira"},"Tanner Dolby":{"relativeUrl":"/people/#tanner-dolby"},"Tanvi Kumar":{"relativeUrl":"/people/#tanvi-kumar"},"tapioca24":{"relativeUrl":"/people/#tapioca24"},"taseenb":{"relativeUrl":"/people/#taseenb"},"Tega Brain":{"relativeUrl":"/people/#tega-brain"},"Teixido":{"relativeUrl":"/people/#teixido"},"TetroGem":{"relativeUrl":"/people/#tetrogem"},"tetunori":{"relativeUrl":"/people/#tetunori"},"Théodore Orfèvres":{"relativeUrl":"/people/#theodore-orfevres"},"Thomas Diewald":{"relativeUrl":"/people/#thomas-diewald"},"Thomas Herlea":{"relativeUrl":"/people/#thomas-herlea"},"Tiago Hermano":{"relativeUrl":"/people/#tiago-hermano"},"Todd H. Page":{"relativeUrl":"/people/#todd-h--page"},"togekisse":{"relativeUrl":"/people/#togekisse"},"Tokini Irene Fubara":{"relativeUrl":"/people/#tokini-irene-fubara"},"tonipizza":{"relativeUrl":"/people/#tonipizza"},"truemaxdh":{"relativeUrl":"/people/#truemaxdh"},"trych":{"relativeUrl":"/people/#trych"},"tuan":{"relativeUrl":"/people/#tuan"},"Tushar Choudhari":{"relativeUrl":"/people/#tushar-choudhari"},"TwoTicks":{"relativeUrl":"/people/#twoticks"},"Tyler Jordan":{"relativeUrl":"/people/#tyler-jordan"},"Tyler Stefanich":{"relativeUrl":"/people/#tyler-stefanich"},"Umang Utkarsh":{"relativeUrl":"/people/#umang-utkarsh"},"Unicar":{"relativeUrl":"/people/#unicar"},"UnityOfFairfax":{"relativeUrl":"/people/#unityoffairfax"},"uno seis tres":{"relativeUrl":"/people/#uno-seis-tres"},"Urvashi":{"relativeUrl":"/people/#urvashi"},"Utkarsh Tiwari":{"relativeUrl":"/people/#utkarsh-tiwari"},"Val Head":{"relativeUrl":"/people/#val-head"},"Varsha Verma":{"relativeUrl":"/people/#varsha-verma"},"Vasu Goel":{"relativeUrl":"/people/#vasu-goel"},"Vedhant Agarwal":{"relativeUrl":"/people/#vedhant-agarwal"},"Victor Morgan":{"relativeUrl":"/people/#victor-morgan"},"Vijith Assar":{"relativeUrl":"/people/#vijith-assar"},"viola ":{"relativeUrl":"/people/#viola-"},"vipulrawat":{"relativeUrl":"/people/#vipulrawat"},"Vishal Sharma":{"relativeUrl":"/people/#vishal-sharma"},"Vishal Singh":{"relativeUrl":"/people/#vishal-singh"},"Vishwas Srivastava":{"relativeUrl":"/people/#vishwas-srivastava"},"Vítor Galvão":{"relativeUrl":"/people/#vitor-galvao"},"Vivek Tiwari":{"relativeUrl":"/people/#vivek-tiwari"},"wackbyte":{"relativeUrl":"/people/#wackbyte"},"Wade Marshall":{"relativeUrl":"/people/#wade-marshall"},"wagedu":{"relativeUrl":"/people/#wagedu"},"Wes Lord":{"relativeUrl":"/people/#wes-lord"},"Will Martin":{"relativeUrl":"/people/#will-martin"},"Wu Che Yu":{"relativeUrl":"/people/#wu-che-yu"},"Xavier Góngora":{"relativeUrl":"/people/#xavier-gongora"},"Xavier Snelgrove":{"relativeUrl":"/people/#xavier-snelgrove"},"XingZiLong":{"relativeUrl":"/people/#xingzilong"},"XTY":{"relativeUrl":"/people/#xty"},"XY Feng":{"relativeUrl":"/people/#xy-feng"},"Yana Agun Siswanto":{"relativeUrl":"/people/#yana-agun-siswanto"},"Yannick Assogba":{"relativeUrl":"/people/#yannick-assogba"},"Yasai":{"relativeUrl":"/people/#yasai"},"Yash Pandey":{"relativeUrl":"/people/#yash-pandey"},"YewonCALLI":{"relativeUrl":"/people/#yewoncalli"},"Yifan Mai":{"relativeUrl":"/people/#yifan-mai"},"Yining Shi":{"relativeUrl":"/people/#yining-shi"},"Yograj Rajput":{"relativeUrl":"/people/#yograj-rajput"},"Yolonanido":{"relativeUrl":"/people/#yolonanido"},"Yousef Abu-Salah":{"relativeUrl":"/people/#yousef-abu-salah"},"yu":{"relativeUrl":"/people/#yu"},"Yuki":{"relativeUrl":"/people/#yuki"},"Yuting Lu":{"relativeUrl":"/people/#yuting-lu"},"Zac Tolle":{"relativeUrl":"/people/#zac-tolle"},"Zach Rispoli":{"relativeUrl":"/people/#zach-rispoli"},"zacharystenger":{"relativeUrl":"/people/#zacharystenger"},"Zearin":{"relativeUrl":"/people/#zearin"},"Zeke Sikelianos":{"relativeUrl":"/people/#zeke-sikelianos"},"zelf0":{"relativeUrl":"/people/#zelf0"},"Zeno Zeng":{"relativeUrl":"/people/#zeno-zeng"},"Zhao Xin":{"relativeUrl":"/people/#zhao-xin"},"Zoë Ingram":{"relativeUrl":"/people/#zoe-ingram"},"Zoe Stenger":{"relativeUrl":"/people/#zoe-stenger"},"æmon":{"relativeUrl":"/people/#æmon"},"李坤霖":{"relativeUrl":"/people/#李坤霖"}},"reference-fallback":{"abs()":{"relativeUrl":"/reference/p5/abs","alias":"abs"},"accelerationX":{"relativeUrl":"/reference/p5/accelerationX"},"accelerationY":{"relativeUrl":"/reference/p5/accelerationY"},"accelerationZ":{"relativeUrl":"/reference/p5/accelerationZ"},"acos()":{"relativeUrl":"/reference/p5/acos","alias":"acos"},"alpha()":{"relativeUrl":"/reference/p5/alpha","alias":"alpha"},"ambientLight()":{"relativeUrl":"/reference/p5/ambientLight","alias":"ambientLight"},"ambientMaterial()":{"relativeUrl":"/reference/p5/ambientMaterial","alias":"ambientMaterial"},"angleMode()":{"relativeUrl":"/reference/p5/angleMode","alias":"angleMode"},"append()":{"relativeUrl":"/reference/p5/append","alias":"append"},"applyMatrix()":{"relativeUrl":"/reference/p5/applyMatrix","alias":"applyMatrix"},"arc()":{"relativeUrl":"/reference/p5/arc","alias":"arc"},"arrayCopy()":{"relativeUrl":"/reference/p5/arrayCopy","alias":"arrayCopy"},"asin()":{"relativeUrl":"/reference/p5/asin","alias":"asin"},"atan()":{"relativeUrl":"/reference/p5/atan","alias":"atan"},"atan2()":{"relativeUrl":"/reference/p5/atan2","alias":"atan2"},"background()":{"relativeUrl":"/reference/p5/background","alias":"background"},"beginClip()":{"relativeUrl":"/reference/p5/beginClip","alias":"beginClip"},"beginContour()":{"relativeUrl":"/reference/p5/beginContour","alias":"beginContour"},"beginGeometry()":{"relativeUrl":"/reference/p5/beginGeometry","alias":"beginGeometry"},"beginShape()":{"relativeUrl":"/reference/p5/beginShape","alias":"beginShape"},"bezier()":{"relativeUrl":"/reference/p5/bezier","alias":"bezier"},"bezierDetail()":{"relativeUrl":"/reference/p5/bezierDetail","alias":"bezierDetail"},"bezierPoint()":{"relativeUrl":"/reference/p5/bezierPoint","alias":"bezierPoint"},"bezierTangent()":{"relativeUrl":"/reference/p5/bezierTangent","alias":"bezierTangent"},"bezierVertex()":{"relativeUrl":"/reference/p5/bezierVertex","alias":"bezierVertex"},"blend()":{"relativeUrl":"/reference/p5/blend","alias":"blend"},"blendMode()":{"relativeUrl":"/reference/p5/blendMode","alias":"blendMode"},"blue()":{"relativeUrl":"/reference/p5/blue","alias":"blue"},"boolean()":{"relativeUrl":"/reference/p5/boolean","alias":"boolean"},"box()":{"relativeUrl":"/reference/p5/box","alias":"box"},"brightness()":{"relativeUrl":"/reference/p5/brightness","alias":"brightness"},"buildGeometry()":{"relativeUrl":"/reference/p5/buildGeometry","alias":"buildGeometry"},"byte()":{"relativeUrl":"/reference/p5/byte","alias":"byte"},"camera()":{"relativeUrl":"/reference/p5/camera","alias":"camera"},"ceil()":{"relativeUrl":"/reference/p5/ceil","alias":"ceil"},"changed()":{"relativeUrl":"/reference/p5/changed","alias":"changed"},"char()":{"relativeUrl":"/reference/p5/char","alias":"char"},"circle()":{"relativeUrl":"/reference/p5/circle","alias":"circle"},"class":{"relativeUrl":"/reference/p5/class"},"clear()":{"relativeUrl":"/reference/p5/clear","alias":"clear"},"clearDepth()":{"relativeUrl":"/reference/p5/clearDepth","alias":"clearDepth"},"clearStorage()":{"relativeUrl":"/reference/p5/clearStorage","alias":"clearStorage"},"clip()":{"relativeUrl":"/reference/p5/clip","alias":"clip"},"color()":{"relativeUrl":"/reference/p5/color","alias":"color"},"colorMode()":{"relativeUrl":"/reference/p5/colorMode","alias":"colorMode"},"concat()":{"relativeUrl":"/reference/p5/concat","alias":"concat"},"cone()":{"relativeUrl":"/reference/p5/cone","alias":"cone"},"console":{"relativeUrl":"/reference/p5/console"},"AUTO":{"relativeUrl":"/reference/p5/AUTO"},"DEGREES":{"relativeUrl":"/reference/p5/DEGREES"},"HALF_PI":{"relativeUrl":"/reference/p5/HALF_PI"},"HSB":{"relativeUrl":"/reference/p5/HSB"},"P2D":{"relativeUrl":"/reference/p5/P2D"},"PI":{"relativeUrl":"/reference/p5/PI"},"QUARTER_PI":{"relativeUrl":"/reference/p5/QUARTER_PI"},"RADIANS":{"relativeUrl":"/reference/p5/RADIANS"},"TAU":{"relativeUrl":"/reference/p5/TAU"},"TWO_PI":{"relativeUrl":"/reference/p5/TWO_PI"},"VERSION":{"relativeUrl":"/reference/p5/VERSION"},"WEBGL":{"relativeUrl":"/reference/p5/WEBGL"},"WEBGL2":{"relativeUrl":"/reference/p5/WEBGL2"},"constrain()":{"relativeUrl":"/reference/p5/constrain","alias":"constrain"},"copy()":{"relativeUrl":"/reference/p5/copy","alias":"copy"},"cos()":{"relativeUrl":"/reference/p5/cos","alias":"cos"},"createA()":{"relativeUrl":"/reference/p5/createA","alias":"createA"},"createAudio()":{"relativeUrl":"/reference/p5/createAudio","alias":"createAudio"},"createButton()":{"relativeUrl":"/reference/p5/createButton","alias":"createButton"},"createCamera()":{"relativeUrl":"/reference/p5/createCamera","alias":"createCamera"},"createCanvas()":{"relativeUrl":"/reference/p5/createCanvas","alias":"createCanvas"},"createCapture()":{"relativeUrl":"/reference/p5/createCapture","alias":"createCapture"},"createCheckbox()":{"relativeUrl":"/reference/p5/createCheckbox","alias":"createCheckbox"},"createColorPicker()":{"relativeUrl":"/reference/p5/createColorPicker","alias":"createColorPicker"},"createConvolver()":{"relativeUrl":"/reference/p5/createConvolver","alias":"createConvolver"},"createDiv()":{"relativeUrl":"/reference/p5/createDiv","alias":"createDiv"},"createElement()":{"relativeUrl":"/reference/p5/createElement","alias":"createElement"},"createFileInput()":{"relativeUrl":"/reference/p5/createFileInput","alias":"createFileInput"},"createFilterShader()":{"relativeUrl":"/reference/p5/createFilterShader","alias":"createFilterShader"},"createFramebuffer()":{"relativeUrl":"/reference/p5/createFramebuffer","alias":"createFramebuffer"},"createGraphics()":{"relativeUrl":"/reference/p5/createGraphics","alias":"createGraphics"},"createImage()":{"relativeUrl":"/reference/p5/createImage","alias":"createImage"},"createImg()":{"relativeUrl":"/reference/p5/createImg","alias":"createImg"},"createInput()":{"relativeUrl":"/reference/p5/createInput","alias":"createInput"},"createNumberDict()":{"relativeUrl":"/reference/p5/createNumberDict","alias":"createNumberDict"},"createP()":{"relativeUrl":"/reference/p5/createP","alias":"createP"},"createRadio()":{"relativeUrl":"/reference/p5/createRadio","alias":"createRadio"},"createSelect()":{"relativeUrl":"/reference/p5/createSelect","alias":"createSelect"},"createShader()":{"relativeUrl":"/reference/p5/createShader","alias":"createShader"},"createSlider()":{"relativeUrl":"/reference/p5/createSlider","alias":"createSlider"},"createSpan()":{"relativeUrl":"/reference/p5/createSpan","alias":"createSpan"},"createStringDict()":{"relativeUrl":"/reference/p5/createStringDict","alias":"createStringDict"},"createVector()":{"relativeUrl":"/reference/p5/createVector","alias":"createVector"},"createVideo()":{"relativeUrl":"/reference/p5/createVideo","alias":"createVideo"},"createWriter()":{"relativeUrl":"/reference/p5/createWriter","alias":"createWriter"},"cursor()":{"relativeUrl":"/reference/p5/cursor","alias":"cursor"},"curve()":{"relativeUrl":"/reference/p5/curve","alias":"curve"},"curveDetail()":{"relativeUrl":"/reference/p5/curveDetail","alias":"curveDetail"},"curvePoint()":{"relativeUrl":"/reference/p5/curvePoint","alias":"curvePoint"},"curveTangent()":{"relativeUrl":"/reference/p5/curveTangent","alias":"curveTangent"},"curveTightness()":{"relativeUrl":"/reference/p5/curveTightness","alias":"curveTightness"},"curveVertex()":{"relativeUrl":"/reference/p5/curveVertex","alias":"curveVertex"},"cylinder()":{"relativeUrl":"/reference/p5/cylinder","alias":"cylinder"},"day()":{"relativeUrl":"/reference/p5/day","alias":"day"},"debugMode()":{"relativeUrl":"/reference/p5/debugMode","alias":"debugMode"},"degrees()":{"relativeUrl":"/reference/p5/degrees","alias":"degrees"},"deltaTime":{"relativeUrl":"/reference/p5/deltaTime"},"describe()":{"relativeUrl":"/reference/p5/describe","alias":"describe"},"describeElement()":{"relativeUrl":"/reference/p5/describeElement","alias":"describeElement"},"deviceMoved()":{"relativeUrl":"/reference/p5/deviceMoved","alias":"deviceMoved"},"deviceOrientation":{"relativeUrl":"/reference/p5/deviceOrientation"},"deviceShaken()":{"relativeUrl":"/reference/p5/deviceShaken","alias":"deviceShaken"},"deviceTurned()":{"relativeUrl":"/reference/p5/deviceTurned","alias":"deviceTurned"},"directionalLight()":{"relativeUrl":"/reference/p5/directionalLight","alias":"directionalLight"},"disableFriendlyErrors":{"relativeUrl":"/reference/p5/disableFriendlyErrors"},"displayDensity()":{"relativeUrl":"/reference/p5/displayDensity","alias":"displayDensity"},"displayHeight":{"relativeUrl":"/reference/p5/displayHeight"},"displayWidth":{"relativeUrl":"/reference/p5/displayWidth"},"dist()":{"relativeUrl":"/reference/p5/dist","alias":"dist"},"doubleClicked()":{"relativeUrl":"/reference/p5/doubleClicked","alias":"doubleClicked"},"draw()":{"relativeUrl":"/reference/p5/draw","alias":"draw"},"drawingContext":{"relativeUrl":"/reference/p5/drawingContext"},"ellipse()":{"relativeUrl":"/reference/p5/ellipse","alias":"ellipse"},"ellipseMode()":{"relativeUrl":"/reference/p5/ellipseMode","alias":"ellipseMode"},"ellipsoid()":{"relativeUrl":"/reference/p5/ellipsoid","alias":"ellipsoid"},"emissiveMaterial()":{"relativeUrl":"/reference/p5/emissiveMaterial","alias":"emissiveMaterial"},"endClip()":{"relativeUrl":"/reference/p5/endClip","alias":"endClip"},"endContour()":{"relativeUrl":"/reference/p5/endContour","alias":"endContour"},"endGeometry()":{"relativeUrl":"/reference/p5/endGeometry","alias":"endGeometry"},"endShape()":{"relativeUrl":"/reference/p5/endShape","alias":"endShape"},"erase()":{"relativeUrl":"/reference/p5/erase","alias":"erase"},"exitPointerLock()":{"relativeUrl":"/reference/p5/exitPointerLock","alias":"exitPointerLock"},"exp()":{"relativeUrl":"/reference/p5/exp","alias":"exp"},"fill()":{"relativeUrl":"/reference/p5/fill","alias":"fill"},"filter()":{"relativeUrl":"/reference/p5/filter","alias":"filter"},"float()":{"relativeUrl":"/reference/p5/float","alias":"float"},"floor()":{"relativeUrl":"/reference/p5/floor","alias":"floor"},"focused":{"relativeUrl":"/reference/p5/focused"},"for":{"relativeUrl":"/reference/p5/for"},"fract()":{"relativeUrl":"/reference/p5/fract","alias":"fract"},"frameCount":{"relativeUrl":"/reference/p5/frameCount"},"frameRate()":{"relativeUrl":"/reference/p5/frameRate","alias":"frameRate"},"freeGeometry()":{"relativeUrl":"/reference/p5/freeGeometry","alias":"freeGeometry"},"freqToMidi()":{"relativeUrl":"/reference/p5/freqToMidi","alias":"freqToMidi"},"frustum()":{"relativeUrl":"/reference/p5/frustum","alias":"frustum"},"fullscreen()":{"relativeUrl":"/reference/p5/fullscreen","alias":"fullscreen"},"function":{"relativeUrl":"/reference/p5/function"},"get()":{"relativeUrl":"/reference/p5/get","alias":"get"},"getAudioContext()":{"relativeUrl":"/reference/p5/getAudioContext","alias":"getAudioContext"},"getItem()":{"relativeUrl":"/reference/p5/getItem","alias":"getItem"},"getOutputVolume()":{"relativeUrl":"/reference/p5/getOutputVolume","alias":"getOutputVolume"},"getTargetFrameRate()":{"relativeUrl":"/reference/p5/getTargetFrameRate","alias":"getTargetFrameRate"},"getURL()":{"relativeUrl":"/reference/p5/getURL","alias":"getURL"},"getURLParams()":{"relativeUrl":"/reference/p5/getURLParams","alias":"getURLParams"},"getURLPath()":{"relativeUrl":"/reference/p5/getURLPath","alias":"getURLPath"},"green()":{"relativeUrl":"/reference/p5/green","alias":"green"},"gridOutput()":{"relativeUrl":"/reference/p5/gridOutput","alias":"gridOutput"},"height":{"relativeUrl":"/reference/p5/height"},"hex()":{"relativeUrl":"/reference/p5/hex","alias":"hex"},"hour()":{"relativeUrl":"/reference/p5/hour","alias":"hour"},"httpDo()":{"relativeUrl":"/reference/p5/httpDo","alias":"httpDo"},"httpGet()":{"relativeUrl":"/reference/p5/httpGet","alias":"httpGet"},"httpPost()":{"relativeUrl":"/reference/p5/httpPost","alias":"httpPost"},"hue()":{"relativeUrl":"/reference/p5/hue","alias":"hue"},"if":{"relativeUrl":"/reference/p5/if"},"image()":{"relativeUrl":"/reference/p5/image","alias":"image"},"imageLight()":{"relativeUrl":"/reference/p5/imageLight","alias":"imageLight"},"imageMode()":{"relativeUrl":"/reference/p5/imageMode","alias":"imageMode"},"input()":{"relativeUrl":"/reference/p5/input","alias":"input"},"int()":{"relativeUrl":"/reference/p5/int","alias":"int"},"isLooping()":{"relativeUrl":"/reference/p5/isLooping","alias":"isLooping"},"join()":{"relativeUrl":"/reference/p5/join","alias":"join"},"key":{"relativeUrl":"/reference/p5/key"},"keyCode":{"relativeUrl":"/reference/p5/keyCode"},"keyIsDown()":{"relativeUrl":"/reference/p5/keyIsDown","alias":"keyIsDown"},"keyIsPressed":{"relativeUrl":"/reference/p5/keyIsPressed"},"keyPressed()":{"relativeUrl":"/reference/p5/keyPressed","alias":"keyPressed"},"keyReleased()":{"relativeUrl":"/reference/p5/keyReleased","alias":"keyReleased"},"keyTyped()":{"relativeUrl":"/reference/p5/keyTyped","alias":"keyTyped"},"lerp()":{"relativeUrl":"/reference/p5/lerp","alias":"lerp"},"lerpColor()":{"relativeUrl":"/reference/p5/lerpColor","alias":"lerpColor"},"let":{"relativeUrl":"/reference/p5/let"},"lightFalloff()":{"relativeUrl":"/reference/p5/lightFalloff","alias":"lightFalloff"},"lightness()":{"relativeUrl":"/reference/p5/lightness","alias":"lightness"},"lights()":{"relativeUrl":"/reference/p5/lights","alias":"lights"},"line()":{"relativeUrl":"/reference/p5/line","alias":"line"},"linePerspective()":{"relativeUrl":"/reference/p5/linePerspective","alias":"linePerspective"},"loadBytes()":{"relativeUrl":"/reference/p5/loadBytes","alias":"loadBytes"},"loadFont()":{"relativeUrl":"/reference/p5/loadFont","alias":"loadFont"},"loadImage()":{"relativeUrl":"/reference/p5/loadImage","alias":"loadImage"},"loadJSON()":{"relativeUrl":"/reference/p5/loadJSON","alias":"loadJSON"},"loadModel()":{"relativeUrl":"/reference/p5/loadModel","alias":"loadModel"},"loadPixels()":{"relativeUrl":"/reference/p5/loadPixels","alias":"loadPixels"},"loadShader()":{"relativeUrl":"/reference/p5/loadShader","alias":"loadShader"},"loadSound()":{"relativeUrl":"/reference/p5/loadSound","alias":"loadSound"},"loadStrings()":{"relativeUrl":"/reference/p5/loadStrings","alias":"loadStrings"},"loadTable()":{"relativeUrl":"/reference/p5/loadTable","alias":"loadTable"},"loadXML()":{"relativeUrl":"/reference/p5/loadXML","alias":"loadXML"},"log()":{"relativeUrl":"/reference/p5/log","alias":"log"},"loop()":{"relativeUrl":"/reference/p5/loop","alias":"loop"},"mag()":{"relativeUrl":"/reference/p5/mag","alias":"mag"},"map()":{"relativeUrl":"/reference/p5/map","alias":"map"},"match()":{"relativeUrl":"/reference/p5/match","alias":"match"},"matchAll()":{"relativeUrl":"/reference/p5/matchAll","alias":"matchAll"},"max()":{"relativeUrl":"/reference/p5/max","alias":"max"},"metalness()":{"relativeUrl":"/reference/p5/metalness","alias":"metalness"},"midiToFreq()":{"relativeUrl":"/reference/p5/midiToFreq","alias":"midiToFreq"},"millis()":{"relativeUrl":"/reference/p5/millis","alias":"millis"},"min()":{"relativeUrl":"/reference/p5/min","alias":"min"},"minute()":{"relativeUrl":"/reference/p5/minute","alias":"minute"},"model()":{"relativeUrl":"/reference/p5/model","alias":"model"},"month()":{"relativeUrl":"/reference/p5/month","alias":"month"},"mouseButton":{"relativeUrl":"/reference/p5/mouseButton"},"mouseClicked()":{"relativeUrl":"/reference/p5/mouseClicked","alias":"mouseClicked"},"mouseDragged()":{"relativeUrl":"/reference/p5/mouseDragged","alias":"mouseDragged"},"mouseIsPressed":{"relativeUrl":"/reference/p5/mouseIsPressed"},"mouseMoved()":{"relativeUrl":"/reference/p5/mouseMoved","alias":"mouseMoved"},"mousePressed()":{"relativeUrl":"/reference/p5/mousePressed","alias":"mousePressed"},"mouseReleased()":{"relativeUrl":"/reference/p5/mouseReleased","alias":"mouseReleased"},"mouseWheel()":{"relativeUrl":"/reference/p5/mouseWheel","alias":"mouseWheel"},"mouseX":{"relativeUrl":"/reference/p5/mouseX"},"mouseY":{"relativeUrl":"/reference/p5/mouseY"},"movedX":{"relativeUrl":"/reference/p5/movedX"},"movedY":{"relativeUrl":"/reference/p5/movedY"},"nf()":{"relativeUrl":"/reference/p5/nf","alias":"nf"},"nfc()":{"relativeUrl":"/reference/p5/nfc","alias":"nfc"},"nfp()":{"relativeUrl":"/reference/p5/nfp","alias":"nfp"},"nfs()":{"relativeUrl":"/reference/p5/nfs","alias":"nfs"},"noCanvas()":{"relativeUrl":"/reference/p5/noCanvas","alias":"noCanvas"},"noCursor()":{"relativeUrl":"/reference/p5/noCursor","alias":"noCursor"},"noDebugMode()":{"relativeUrl":"/reference/p5/noDebugMode","alias":"noDebugMode"},"noErase()":{"relativeUrl":"/reference/p5/noErase","alias":"noErase"},"noFill()":{"relativeUrl":"/reference/p5/noFill","alias":"noFill"},"noLights()":{"relativeUrl":"/reference/p5/noLights","alias":"noLights"},"noLoop()":{"relativeUrl":"/reference/p5/noLoop","alias":"noLoop"},"noSmooth()":{"relativeUrl":"/reference/p5/noSmooth","alias":"noSmooth"},"noStroke()":{"relativeUrl":"/reference/p5/noStroke","alias":"noStroke"},"noTint()":{"relativeUrl":"/reference/p5/noTint","alias":"noTint"},"noise()":{"relativeUrl":"/reference/p5/noise","alias":"noise"},"noiseDetail()":{"relativeUrl":"/reference/p5/noiseDetail","alias":"noiseDetail"},"noiseSeed()":{"relativeUrl":"/reference/p5/noiseSeed","alias":"noiseSeed"},"norm()":{"relativeUrl":"/reference/p5/norm","alias":"norm"},"normal()":{"relativeUrl":"/reference/p5/normal","alias":"normal"},"normalMaterial()":{"relativeUrl":"/reference/p5/normalMaterial","alias":"normalMaterial"},"orbitControl()":{"relativeUrl":"/reference/p5/orbitControl","alias":"orbitControl"},"ortho()":{"relativeUrl":"/reference/p5/ortho","alias":"ortho"},"outputVolume()":{"relativeUrl":"/reference/p5/outputVolume","alias":"outputVolume"},"p5.Camera":{"relativeUrl":"/reference/p5/p5.Camera"},"p5.Color":{"relativeUrl":"/reference/p5/p5.Color"},"p5.Element":{"relativeUrl":"/reference/p5/p5.Element"},"p5.File":{"relativeUrl":"/reference/p5/p5.File"},"p5.Font":{"relativeUrl":"/reference/p5/p5.Font"},"p5.Framebuffer":{"relativeUrl":"/reference/p5/p5.Framebuffer"},"p5.Geometry":{"relativeUrl":"/reference/p5/p5.Geometry"},"p5.Graphics":{"relativeUrl":"/reference/p5/p5.Graphics"},"p5.Image":{"relativeUrl":"/reference/p5/p5.Image"},"p5.MediaElement":{"relativeUrl":"/reference/p5/p5.MediaElement"},"p5.NumberDict":{"relativeUrl":"/reference/p5/p5.NumberDict"},"p5.PrintWriter":{"relativeUrl":"/reference/p5/p5.PrintWriter"},"p5.Renderer":{"relativeUrl":"/reference/p5/p5.Renderer"},"p5.Shader":{"relativeUrl":"/reference/p5/p5.Shader"},"p5.StringDict":{"relativeUrl":"/reference/p5/p5.StringDict"},"p5.Table":{"relativeUrl":"/reference/p5/p5.Table"},"p5.TableRow":{"relativeUrl":"/reference/p5/p5.TableRow"},"p5.TypedDict":{"relativeUrl":"/reference/p5/p5.TypedDict"},"p5.Vector":{"relativeUrl":"/reference/p5/p5.Vector"},"p5.XML":{"relativeUrl":"/reference/p5/p5.XML"},"p5":{"relativeUrl":"/reference/p5/p5"},"pAccelerationX":{"relativeUrl":"/reference/p5/pAccelerationX"},"pAccelerationY":{"relativeUrl":"/reference/p5/pAccelerationY"},"pAccelerationZ":{"relativeUrl":"/reference/p5/pAccelerationZ"},"pRotationX":{"relativeUrl":"/reference/p5/pRotationX"},"pRotationY":{"relativeUrl":"/reference/p5/pRotationY"},"pRotationZ":{"relativeUrl":"/reference/p5/pRotationZ"},"panorama()":{"relativeUrl":"/reference/p5/panorama","alias":"panorama"},"perspective()":{"relativeUrl":"/reference/p5/perspective","alias":"perspective"},"pixelDensity()":{"relativeUrl":"/reference/p5/pixelDensity","alias":"pixelDensity"},"pixels":{"relativeUrl":"/reference/p5/pixels"},"plane()":{"relativeUrl":"/reference/p5/plane","alias":"plane"},"pmouseX":{"relativeUrl":"/reference/p5/pmouseX"},"pmouseY":{"relativeUrl":"/reference/p5/pmouseY"},"point()":{"relativeUrl":"/reference/p5/point","alias":"point"},"pointLight()":{"relativeUrl":"/reference/p5/pointLight","alias":"pointLight"},"pop()":{"relativeUrl":"/reference/p5/pop","alias":"pop"},"pow()":{"relativeUrl":"/reference/p5/pow","alias":"pow"},"preload()":{"relativeUrl":"/reference/p5/preload","alias":"preload"},"print()":{"relativeUrl":"/reference/p5/print","alias":"print"},"push()":{"relativeUrl":"/reference/p5/push","alias":"push"},"pwinMouseX":{"relativeUrl":"/reference/p5/pwinMouseX"},"pwinMouseY":{"relativeUrl":"/reference/p5/pwinMouseY"},"quad()":{"relativeUrl":"/reference/p5/quad","alias":"quad"},"quadraticVertex()":{"relativeUrl":"/reference/p5/quadraticVertex","alias":"quadraticVertex"},"radians()":{"relativeUrl":"/reference/p5/radians","alias":"radians"},"random()":{"relativeUrl":"/reference/p5/random","alias":"random"},"randomGaussian()":{"relativeUrl":"/reference/p5/randomGaussian","alias":"randomGaussian"},"randomSeed()":{"relativeUrl":"/reference/p5/randomSeed","alias":"randomSeed"},"rect()":{"relativeUrl":"/reference/p5/rect","alias":"rect"},"rectMode()":{"relativeUrl":"/reference/p5/rectMode","alias":"rectMode"},"red()":{"relativeUrl":"/reference/p5/red","alias":"red"},"redraw()":{"relativeUrl":"/reference/p5/redraw","alias":"redraw"},"remove()":{"relativeUrl":"/reference/p5/remove","alias":"remove"},"removeElements()":{"relativeUrl":"/reference/p5/removeElements","alias":"removeElements"},"removeItem()":{"relativeUrl":"/reference/p5/removeItem","alias":"removeItem"},"requestPointerLock()":{"relativeUrl":"/reference/p5/requestPointerLock","alias":"requestPointerLock"},"resetMatrix()":{"relativeUrl":"/reference/p5/resetMatrix","alias":"resetMatrix"},"resetShader()":{"relativeUrl":"/reference/p5/resetShader","alias":"resetShader"},"resizeCanvas()":{"relativeUrl":"/reference/p5/resizeCanvas","alias":"resizeCanvas"},"reverse()":{"relativeUrl":"/reference/p5/reverse","alias":"reverse"},"rotate()":{"relativeUrl":"/reference/p5/rotate","alias":"rotate"},"rotateX()":{"relativeUrl":"/reference/p5/rotateX","alias":"rotateX"},"rotateY()":{"relativeUrl":"/reference/p5/rotateY","alias":"rotateY"},"rotateZ()":{"relativeUrl":"/reference/p5/rotateZ","alias":"rotateZ"},"rotationX":{"relativeUrl":"/reference/p5/rotationX"},"rotationY":{"relativeUrl":"/reference/p5/rotationY"},"rotationZ":{"relativeUrl":"/reference/p5/rotationZ"},"round()":{"relativeUrl":"/reference/p5/round","alias":"round"},"sampleRate()":{"relativeUrl":"/reference/p5/sampleRate","alias":"sampleRate"},"saturation()":{"relativeUrl":"/reference/p5/saturation","alias":"saturation"},"save()":{"relativeUrl":"/reference/p5/save","alias":"save"},"saveCanvas()":{"relativeUrl":"/reference/p5/saveCanvas","alias":"saveCanvas"},"saveFrames()":{"relativeUrl":"/reference/p5/saveFrames","alias":"saveFrames"},"saveGif()":{"relativeUrl":"/reference/p5/saveGif","alias":"saveGif"},"saveJSON()":{"relativeUrl":"/reference/p5/saveJSON","alias":"saveJSON"},"saveSound()":{"relativeUrl":"/reference/p5/saveSound","alias":"saveSound"},"saveStrings()":{"relativeUrl":"/reference/p5/saveStrings","alias":"saveStrings"},"saveTable()":{"relativeUrl":"/reference/p5/saveTable","alias":"saveTable"},"scale()":{"relativeUrl":"/reference/p5/scale","alias":"scale"},"second()":{"relativeUrl":"/reference/p5/second","alias":"second"},"select()":{"relativeUrl":"/reference/p5/select","alias":"select"},"selectAll()":{"relativeUrl":"/reference/p5/selectAll","alias":"selectAll"},"set()":{"relativeUrl":"/reference/p5/set","alias":"set"},"setAttributes()":{"relativeUrl":"/reference/p5/setAttributes","alias":"setAttributes"},"setBPM()":{"relativeUrl":"/reference/p5/setBPM","alias":"setBPM"},"setCamera()":{"relativeUrl":"/reference/p5/setCamera","alias":"setCamera"},"setMoveThreshold()":{"relativeUrl":"/reference/p5/setMoveThreshold","alias":"setMoveThreshold"},"setShakeThreshold()":{"relativeUrl":"/reference/p5/setShakeThreshold","alias":"setShakeThreshold"},"setup()":{"relativeUrl":"/reference/p5/setup","alias":"setup"},"shader()":{"relativeUrl":"/reference/p5/shader","alias":"shader"},"shearX()":{"relativeUrl":"/reference/p5/shearX","alias":"shearX"},"shearY()":{"relativeUrl":"/reference/p5/shearY","alias":"shearY"},"shininess()":{"relativeUrl":"/reference/p5/shininess","alias":"shininess"},"shorten()":{"relativeUrl":"/reference/p5/shorten","alias":"shorten"},"shuffle()":{"relativeUrl":"/reference/p5/shuffle","alias":"shuffle"},"sin()":{"relativeUrl":"/reference/p5/sin","alias":"sin"},"smooth()":{"relativeUrl":"/reference/p5/smooth","alias":"smooth"},"sort()":{"relativeUrl":"/reference/p5/sort","alias":"sort"},"soundFormats()":{"relativeUrl":"/reference/p5/soundFormats","alias":"soundFormats"},"soundOut":{"relativeUrl":"/reference/p5/soundOut"},"specularColor()":{"relativeUrl":"/reference/p5/specularColor","alias":"specularColor"},"specularMaterial()":{"relativeUrl":"/reference/p5/specularMaterial","alias":"specularMaterial"},"sphere()":{"relativeUrl":"/reference/p5/sphere","alias":"sphere"},"splice()":{"relativeUrl":"/reference/p5/splice","alias":"splice"},"split()":{"relativeUrl":"/reference/p5/split","alias":"split"},"splitTokens()":{"relativeUrl":"/reference/p5/splitTokens","alias":"splitTokens"},"spotLight()":{"relativeUrl":"/reference/p5/spotLight","alias":"spotLight"},"sq()":{"relativeUrl":"/reference/p5/sq","alias":"sq"},"sqrt()":{"relativeUrl":"/reference/p5/sqrt","alias":"sqrt"},"square()":{"relativeUrl":"/reference/p5/square","alias":"square"},"storeItem()":{"relativeUrl":"/reference/p5/storeItem","alias":"storeItem"},"str()":{"relativeUrl":"/reference/p5/str","alias":"str"},"stroke()":{"relativeUrl":"/reference/p5/stroke","alias":"stroke"},"strokeCap()":{"relativeUrl":"/reference/p5/strokeCap","alias":"strokeCap"},"strokeJoin()":{"relativeUrl":"/reference/p5/strokeJoin","alias":"strokeJoin"},"strokeWeight()":{"relativeUrl":"/reference/p5/strokeWeight","alias":"strokeWeight"},"subset()":{"relativeUrl":"/reference/p5/subset","alias":"subset"},"tan()":{"relativeUrl":"/reference/p5/tan","alias":"tan"},"text()":{"relativeUrl":"/reference/p5/text","alias":"text"},"textAlign()":{"relativeUrl":"/reference/p5/textAlign","alias":"textAlign"},"textAscent()":{"relativeUrl":"/reference/p5/textAscent","alias":"textAscent"},"textDescent()":{"relativeUrl":"/reference/p5/textDescent","alias":"textDescent"},"textFont()":{"relativeUrl":"/reference/p5/textFont","alias":"textFont"},"textLeading()":{"relativeUrl":"/reference/p5/textLeading","alias":"textLeading"},"textOutput()":{"relativeUrl":"/reference/p5/textOutput","alias":"textOutput"},"textSize()":{"relativeUrl":"/reference/p5/textSize","alias":"textSize"},"textStyle()":{"relativeUrl":"/reference/p5/textStyle","alias":"textStyle"},"textWidth()":{"relativeUrl":"/reference/p5/textWidth","alias":"textWidth"},"textWrap()":{"relativeUrl":"/reference/p5/textWrap","alias":"textWrap"},"texture()":{"relativeUrl":"/reference/p5/texture","alias":"texture"},"textureMode()":{"relativeUrl":"/reference/p5/textureMode","alias":"textureMode"},"textureWrap()":{"relativeUrl":"/reference/p5/textureWrap","alias":"textureWrap"},"tint()":{"relativeUrl":"/reference/p5/tint","alias":"tint"},"torus()":{"relativeUrl":"/reference/p5/torus","alias":"torus"},"touchEnded()":{"relativeUrl":"/reference/p5/touchEnded","alias":"touchEnded"},"touchMoved()":{"relativeUrl":"/reference/p5/touchMoved","alias":"touchMoved"},"touchStarted()":{"relativeUrl":"/reference/p5/touchStarted","alias":"touchStarted"},"touches":{"relativeUrl":"/reference/p5/touches"},"translate()":{"relativeUrl":"/reference/p5/translate","alias":"translate"},"triangle()":{"relativeUrl":"/reference/p5/triangle","alias":"triangle"},"trim()":{"relativeUrl":"/reference/p5/trim","alias":"trim"},"turnAxis":{"relativeUrl":"/reference/p5/turnAxis"},"Array":{"relativeUrl":"/reference/p5/Array"},"Boolean":{"relativeUrl":"/reference/p5/Boolean"},"Number":{"relativeUrl":"/reference/p5/Number"},"Object":{"relativeUrl":"/reference/p5/Object"},"String":{"relativeUrl":"/reference/p5/String"},"unchar()":{"relativeUrl":"/reference/p5/unchar","alias":"unchar"},"unhex()":{"relativeUrl":"/reference/p5/unhex","alias":"unhex"},"updatePixels()":{"relativeUrl":"/reference/p5/updatePixels","alias":"updatePixels"},"userStartAudio()":{"relativeUrl":"/reference/p5/userStartAudio","alias":"userStartAudio"},"vertex()":{"relativeUrl":"/reference/p5/vertex","alias":"vertex"},"webglVersion":{"relativeUrl":"/reference/p5/webglVersion"},"while":{"relativeUrl":"/reference/p5/while"},"width":{"relativeUrl":"/reference/p5/width"},"winMouseX":{"relativeUrl":"/reference/p5/winMouseX"},"winMouseY":{"relativeUrl":"/reference/p5/winMouseY"},"windowHeight":{"relativeUrl":"/reference/p5/windowHeight"},"windowResized()":{"relativeUrl":"/reference/p5/windowResized","alias":"windowResized"},"windowWidth":{"relativeUrl":"/reference/p5/windowWidth"},"year()":{"relativeUrl":"/reference/p5/year","alias":"year"},"p5.Amplitude.getLevel()":{"relativeUrl":"/reference/p5.Amplitude/getLevel","alias":"getLevel"},"p5.Amplitude.setInput()":{"relativeUrl":"/reference/p5.Amplitude/setInput","alias":"setInput"},"p5.Amplitude.smooth()":{"relativeUrl":"/reference/p5.Amplitude/smooth","alias":"smooth"},"p5.Amplitude.toggleNormalize()":{"relativeUrl":"/reference/p5.Amplitude/toggleNormalize","alias":"toggleNormalize"},"p5.AudioIn.amp()":{"relativeUrl":"/reference/p5.AudioIn/amp","alias":"amp"},"p5.AudioIn.amplitude":{"relativeUrl":"/reference/p5.AudioIn/amplitude","alias":"amplitude"},"p5.AudioIn.connect()":{"relativeUrl":"/reference/p5.AudioIn/connect","alias":"connect"},"p5.AudioIn.disconnect()":{"relativeUrl":"/reference/p5.AudioIn/disconnect","alias":"disconnect"},"p5.AudioIn.enabled":{"relativeUrl":"/reference/p5.AudioIn/enabled","alias":"enabled"},"p5.AudioIn.getLevel()":{"relativeUrl":"/reference/p5.AudioIn/getLevel","alias":"getLevel"},"p5.AudioIn.getSources()":{"relativeUrl":"/reference/p5.AudioIn/getSources","alias":"getSources"},"p5.AudioIn.setSource()":{"relativeUrl":"/reference/p5.AudioIn/setSource","alias":"setSource"},"p5.AudioIn.start()":{"relativeUrl":"/reference/p5.AudioIn/start","alias":"start"},"p5.AudioIn.stop()":{"relativeUrl":"/reference/p5.AudioIn/stop","alias":"stop"},"p5.AudioVoice.connect()":{"relativeUrl":"/reference/p5.AudioVoice/connect","alias":"connect"},"p5.AudioVoice.disconnect()":{"relativeUrl":"/reference/p5.AudioVoice/disconnect","alias":"disconnect"},"p5.Camera.camera()":{"relativeUrl":"/reference/p5.Camera/camera","alias":"camera"},"p5.Camera.centerX":{"relativeUrl":"/reference/p5.Camera/centerX","alias":"centerX"},"p5.Camera.centerY":{"relativeUrl":"/reference/p5.Camera/centerY","alias":"centerY"},"p5.Camera.centerZ":{"relativeUrl":"/reference/p5.Camera/centerZ","alias":"centerZ"},"p5.Camera.eyeX":{"relativeUrl":"/reference/p5.Camera/eyeX","alias":"eyeX"},"p5.Camera.eyeY":{"relativeUrl":"/reference/p5.Camera/eyeY","alias":"eyeY"},"p5.Camera.eyeZ":{"relativeUrl":"/reference/p5.Camera/eyeZ","alias":"eyeZ"},"p5.Camera.frustum()":{"relativeUrl":"/reference/p5.Camera/frustum","alias":"frustum"},"p5.Camera.lookAt()":{"relativeUrl":"/reference/p5.Camera/lookAt","alias":"lookAt"},"p5.Camera.move()":{"relativeUrl":"/reference/p5.Camera/move","alias":"move"},"p5.Camera.ortho()":{"relativeUrl":"/reference/p5.Camera/ortho","alias":"ortho"},"p5.Camera.pan()":{"relativeUrl":"/reference/p5.Camera/pan","alias":"pan"},"p5.Camera.perspective()":{"relativeUrl":"/reference/p5.Camera/perspective","alias":"perspective"},"p5.Camera.roll()":{"relativeUrl":"/reference/p5.Camera/roll","alias":"roll"},"p5.Camera.set()":{"relativeUrl":"/reference/p5.Camera/set","alias":"set"},"p5.Camera.setPosition()":{"relativeUrl":"/reference/p5.Camera/setPosition","alias":"setPosition"},"p5.Camera.slerp()":{"relativeUrl":"/reference/p5.Camera/slerp","alias":"slerp"},"p5.Camera.tilt()":{"relativeUrl":"/reference/p5.Camera/tilt","alias":"tilt"},"p5.Camera.upX":{"relativeUrl":"/reference/p5.Camera/upX","alias":"upX"},"p5.Camera.upY":{"relativeUrl":"/reference/p5.Camera/upY","alias":"upY"},"p5.Camera.upZ":{"relativeUrl":"/reference/p5.Camera/upZ","alias":"upZ"},"p5.Color.setAlpha()":{"relativeUrl":"/reference/p5.Color/setAlpha","alias":"setAlpha"},"p5.Color.setBlue()":{"relativeUrl":"/reference/p5.Color/setBlue","alias":"setBlue"},"p5.Color.setGreen()":{"relativeUrl":"/reference/p5.Color/setGreen","alias":"setGreen"},"p5.Color.setRed()":{"relativeUrl":"/reference/p5.Color/setRed","alias":"setRed"},"p5.Color.toString()":{"relativeUrl":"/reference/p5.Color/toString","alias":"toString"},"p5.Compressor.attack()":{"relativeUrl":"/reference/p5.Compressor/attack","alias":"attack"},"p5.Compressor.compressor":{"relativeUrl":"/reference/p5.Compressor/compressor","alias":"compressor"},"p5.Compressor.knee()":{"relativeUrl":"/reference/p5.Compressor/knee","alias":"knee"},"p5.Compressor.process()":{"relativeUrl":"/reference/p5.Compressor/process","alias":"process"},"p5.Compressor.ratio()":{"relativeUrl":"/reference/p5.Compressor/ratio","alias":"ratio"},"p5.Compressor.reduction()":{"relativeUrl":"/reference/p5.Compressor/reduction","alias":"reduction"},"p5.Compressor.release()":{"relativeUrl":"/reference/p5.Compressor/release","alias":"release"},"p5.Compressor.set()":{"relativeUrl":"/reference/p5.Compressor/set","alias":"set"},"p5.Compressor.threshold()":{"relativeUrl":"/reference/p5.Compressor/threshold","alias":"threshold"},"p5.Convolver.addImpulse()":{"relativeUrl":"/reference/p5.Convolver/addImpulse","alias":"addImpulse"},"p5.Convolver.convolverNode":{"relativeUrl":"/reference/p5.Convolver/convolverNode","alias":"convolverNode"},"p5.Convolver.impulses":{"relativeUrl":"/reference/p5.Convolver/impulses","alias":"impulses"},"p5.Convolver.process()":{"relativeUrl":"/reference/p5.Convolver/process","alias":"process"},"p5.Convolver.resetImpulse()":{"relativeUrl":"/reference/p5.Convolver/resetImpulse","alias":"resetImpulse"},"p5.Convolver.toggleImpulse()":{"relativeUrl":"/reference/p5.Convolver/toggleImpulse","alias":"toggleImpulse"},"p5.Delay.amp()":{"relativeUrl":"/reference/p5.Delay/amp","alias":"amp"},"p5.Delay.connect()":{"relativeUrl":"/reference/p5.Delay/connect","alias":"connect"},"p5.Delay.delayTime()":{"relativeUrl":"/reference/p5.Delay/delayTime","alias":"delayTime"},"p5.Delay.disconnect()":{"relativeUrl":"/reference/p5.Delay/disconnect","alias":"disconnect"},"p5.Delay.feedback()":{"relativeUrl":"/reference/p5.Delay/feedback","alias":"feedback"},"p5.Delay.filter()":{"relativeUrl":"/reference/p5.Delay/filter","alias":"filter"},"p5.Delay.leftDelay":{"relativeUrl":"/reference/p5.Delay/leftDelay","alias":"leftDelay"},"p5.Delay.process()":{"relativeUrl":"/reference/p5.Delay/process","alias":"process"},"p5.Delay.rightDelay":{"relativeUrl":"/reference/p5.Delay/rightDelay","alias":"rightDelay"},"p5.Delay.setType()":{"relativeUrl":"/reference/p5.Delay/setType","alias":"setType"},"p5.Distortion.WaveShaperNode":{"relativeUrl":"/reference/p5.Distortion/WaveShaperNode","alias":"WaveShaperNode"},"p5.Distortion.getAmount()":{"relativeUrl":"/reference/p5.Distortion/getAmount","alias":"getAmount"},"p5.Distortion.getOversample()":{"relativeUrl":"/reference/p5.Distortion/getOversample","alias":"getOversample"},"p5.Distortion.process()":{"relativeUrl":"/reference/p5.Distortion/process","alias":"process"},"p5.Distortion.set()":{"relativeUrl":"/reference/p5.Distortion/set","alias":"set"},"p5.EQ.bands":{"relativeUrl":"/reference/p5.EQ/bands","alias":"bands"},"p5.EQ.process()":{"relativeUrl":"/reference/p5.EQ/process","alias":"process"},"p5.Effect.amp()":{"relativeUrl":"/reference/p5.Effect/amp","alias":"amp"},"p5.Effect.chain()":{"relativeUrl":"/reference/p5.Effect/chain","alias":"chain"},"p5.Effect.connect()":{"relativeUrl":"/reference/p5.Effect/connect","alias":"connect"},"p5.Effect.disconnect()":{"relativeUrl":"/reference/p5.Effect/disconnect","alias":"disconnect"},"p5.Effect.drywet()":{"relativeUrl":"/reference/p5.Effect/drywet","alias":"drywet"},"p5.Element.addClass()":{"relativeUrl":"/reference/p5.Element/addClass","alias":"addClass"},"p5.Element.attribute()":{"relativeUrl":"/reference/p5.Element/attribute","alias":"attribute"},"p5.Element.center()":{"relativeUrl":"/reference/p5.Element/center","alias":"center"},"p5.Element.child()":{"relativeUrl":"/reference/p5.Element/child","alias":"child"},"p5.Element.class()":{"relativeUrl":"/reference/p5.Element/class","alias":"class"},"p5.Element.doubleClicked()":{"relativeUrl":"/reference/p5.Element/doubleClicked","alias":"doubleClicked"},"p5.Element.dragLeave()":{"relativeUrl":"/reference/p5.Element/dragLeave","alias":"dragLeave"},"p5.Element.dragOver()":{"relativeUrl":"/reference/p5.Element/dragOver","alias":"dragOver"},"p5.Element.draggable()":{"relativeUrl":"/reference/p5.Element/draggable","alias":"draggable"},"p5.Element.drop()":{"relativeUrl":"/reference/p5.Element/drop","alias":"drop"},"p5.Element.elt":{"relativeUrl":"/reference/p5.Element/elt","alias":"elt"},"p5.Element.hasClass()":{"relativeUrl":"/reference/p5.Element/hasClass","alias":"hasClass"},"p5.Element.height":{"relativeUrl":"/reference/p5.Element/height","alias":"height"},"p5.Element.hide()":{"relativeUrl":"/reference/p5.Element/hide","alias":"hide"},"p5.Element.html()":{"relativeUrl":"/reference/p5.Element/html","alias":"html"},"p5.Element.id()":{"relativeUrl":"/reference/p5.Element/id","alias":"id"},"p5.Element.mouseClicked()":{"relativeUrl":"/reference/p5.Element/mouseClicked","alias":"mouseClicked"},"p5.Element.mouseMoved()":{"relativeUrl":"/reference/p5.Element/mouseMoved","alias":"mouseMoved"},"p5.Element.mouseOut()":{"relativeUrl":"/reference/p5.Element/mouseOut","alias":"mouseOut"},"p5.Element.mouseOver()":{"relativeUrl":"/reference/p5.Element/mouseOver","alias":"mouseOver"},"p5.Element.mousePressed()":{"relativeUrl":"/reference/p5.Element/mousePressed","alias":"mousePressed"},"p5.Element.mouseReleased()":{"relativeUrl":"/reference/p5.Element/mouseReleased","alias":"mouseReleased"},"p5.Element.mouseWheel()":{"relativeUrl":"/reference/p5.Element/mouseWheel","alias":"mouseWheel"},"p5.Element.parent()":{"relativeUrl":"/reference/p5.Element/parent","alias":"parent"},"p5.Element.position()":{"relativeUrl":"/reference/p5.Element/position","alias":"position"},"p5.Element.remove()":{"relativeUrl":"/reference/p5.Element/remove","alias":"remove"},"p5.Element.removeAttribute()":{"relativeUrl":"/reference/p5.Element/removeAttribute","alias":"removeAttribute"},"p5.Element.removeClass()":{"relativeUrl":"/reference/p5.Element/removeClass","alias":"removeClass"},"p5.Element.show()":{"relativeUrl":"/reference/p5.Element/show","alias":"show"},"p5.Element.size()":{"relativeUrl":"/reference/p5.Element/size","alias":"size"},"p5.Element.style()":{"relativeUrl":"/reference/p5.Element/style","alias":"style"},"p5.Element.toggleClass()":{"relativeUrl":"/reference/p5.Element/toggleClass","alias":"toggleClass"},"p5.Element.touchEnded()":{"relativeUrl":"/reference/p5.Element/touchEnded","alias":"touchEnded"},"p5.Element.touchMoved()":{"relativeUrl":"/reference/p5.Element/touchMoved","alias":"touchMoved"},"p5.Element.touchStarted()":{"relativeUrl":"/reference/p5.Element/touchStarted","alias":"touchStarted"},"p5.Element.value()":{"relativeUrl":"/reference/p5.Element/value","alias":"value"},"p5.Element.width":{"relativeUrl":"/reference/p5.Element/width","alias":"width"},"p5.Envelope.add()":{"relativeUrl":"/reference/p5.Envelope/add","alias":"add"},"p5.Envelope.attackLevel":{"relativeUrl":"/reference/p5.Envelope/attackLevel","alias":"attackLevel"},"p5.Envelope.attackTime":{"relativeUrl":"/reference/p5.Envelope/attackTime","alias":"attackTime"},"p5.Envelope.decayLevel":{"relativeUrl":"/reference/p5.Envelope/decayLevel","alias":"decayLevel"},"p5.Envelope.decayTime":{"relativeUrl":"/reference/p5.Envelope/decayTime","alias":"decayTime"},"p5.Envelope.mult()":{"relativeUrl":"/reference/p5.Envelope/mult","alias":"mult"},"p5.Envelope.play()":{"relativeUrl":"/reference/p5.Envelope/play","alias":"play"},"p5.Envelope.ramp()":{"relativeUrl":"/reference/p5.Envelope/ramp","alias":"ramp"},"p5.Envelope.releaseLevel":{"relativeUrl":"/reference/p5.Envelope/releaseLevel","alias":"releaseLevel"},"p5.Envelope.releaseTime":{"relativeUrl":"/reference/p5.Envelope/releaseTime","alias":"releaseTime"},"p5.Envelope.scale()":{"relativeUrl":"/reference/p5.Envelope/scale","alias":"scale"},"p5.Envelope.set()":{"relativeUrl":"/reference/p5.Envelope/set","alias":"set"},"p5.Envelope.setADSR()":{"relativeUrl":"/reference/p5.Envelope/setADSR","alias":"setADSR"},"p5.Envelope.setExp()":{"relativeUrl":"/reference/p5.Envelope/setExp","alias":"setExp"},"p5.Envelope.setInput()":{"relativeUrl":"/reference/p5.Envelope/setInput","alias":"setInput"},"p5.Envelope.setRange()":{"relativeUrl":"/reference/p5.Envelope/setRange","alias":"setRange"},"p5.Envelope.triggerAttack()":{"relativeUrl":"/reference/p5.Envelope/triggerAttack","alias":"triggerAttack"},"p5.Envelope.triggerRelease()":{"relativeUrl":"/reference/p5.Envelope/triggerRelease","alias":"triggerRelease"},"p5.FFT.analyze()":{"relativeUrl":"/reference/p5.FFT/analyze","alias":"analyze"},"p5.FFT.getCentroid()":{"relativeUrl":"/reference/p5.FFT/getCentroid","alias":"getCentroid"},"p5.FFT.getEnergy()":{"relativeUrl":"/reference/p5.FFT/getEnergy","alias":"getEnergy"},"p5.FFT.getOctaveBands()":{"relativeUrl":"/reference/p5.FFT/getOctaveBands","alias":"getOctaveBands"},"p5.FFT.linAverages()":{"relativeUrl":"/reference/p5.FFT/linAverages","alias":"linAverages"},"p5.FFT.logAverages()":{"relativeUrl":"/reference/p5.FFT/logAverages","alias":"logAverages"},"p5.FFT.setInput()":{"relativeUrl":"/reference/p5.FFT/setInput","alias":"setInput"},"p5.FFT.smooth()":{"relativeUrl":"/reference/p5.FFT/smooth","alias":"smooth"},"p5.FFT.waveform()":{"relativeUrl":"/reference/p5.FFT/waveform","alias":"waveform"},"p5.File.data":{"relativeUrl":"/reference/p5.File/data","alias":"data"},"p5.File.file":{"relativeUrl":"/reference/p5.File/file","alias":"file"},"p5.File.name":{"relativeUrl":"/reference/p5.File/name","alias":"name"},"p5.File.size":{"relativeUrl":"/reference/p5.File/size","alias":"size"},"p5.File.subtype":{"relativeUrl":"/reference/p5.File/subtype","alias":"subtype"},"p5.File.type":{"relativeUrl":"/reference/p5.File/type","alias":"type"},"p5.Filter.biquadFilter":{"relativeUrl":"/reference/p5.Filter/biquadFilter","alias":"biquadFilter"},"p5.Filter.freq()":{"relativeUrl":"/reference/p5.Filter/freq","alias":"freq"},"p5.Filter.gain()":{"relativeUrl":"/reference/p5.Filter/gain","alias":"gain"},"p5.Filter.process()":{"relativeUrl":"/reference/p5.Filter/process","alias":"process"},"p5.Filter.res()":{"relativeUrl":"/reference/p5.Filter/res","alias":"res"},"p5.Filter.set()":{"relativeUrl":"/reference/p5.Filter/set","alias":"set"},"p5.Filter.setType()":{"relativeUrl":"/reference/p5.Filter/setType","alias":"setType"},"p5.Filter.toggle()":{"relativeUrl":"/reference/p5.Filter/toggle","alias":"toggle"},"p5.Font.font":{"relativeUrl":"/reference/p5.Font/font","alias":"font"},"p5.Font.textBounds()":{"relativeUrl":"/reference/p5.Font/textBounds","alias":"textBounds"},"p5.Font.textToPoints()":{"relativeUrl":"/reference/p5.Font/textToPoints","alias":"textToPoints"},"p5.Framebuffer.autoSized()":{"relativeUrl":"/reference/p5.Framebuffer/autoSized","alias":"autoSized"},"p5.Framebuffer.begin()":{"relativeUrl":"/reference/p5.Framebuffer/begin","alias":"begin"},"p5.Framebuffer.color":{"relativeUrl":"/reference/p5.Framebuffer/color","alias":"color"},"p5.Framebuffer.createCamera()":{"relativeUrl":"/reference/p5.Framebuffer/createCamera","alias":"createCamera"},"p5.Framebuffer.depth":{"relativeUrl":"/reference/p5.Framebuffer/depth","alias":"depth"},"p5.Framebuffer.draw()":{"relativeUrl":"/reference/p5.Framebuffer/draw","alias":"draw"},"p5.Framebuffer.end()":{"relativeUrl":"/reference/p5.Framebuffer/end","alias":"end"},"p5.Framebuffer.get()":{"relativeUrl":"/reference/p5.Framebuffer/get","alias":"get"},"p5.Framebuffer.loadPixels()":{"relativeUrl":"/reference/p5.Framebuffer/loadPixels","alias":"loadPixels"},"p5.Framebuffer.pixelDensity()":{"relativeUrl":"/reference/p5.Framebuffer/pixelDensity","alias":"pixelDensity"},"p5.Framebuffer.pixels":{"relativeUrl":"/reference/p5.Framebuffer/pixels","alias":"pixels"},"p5.Framebuffer.remove()":{"relativeUrl":"/reference/p5.Framebuffer/remove","alias":"remove"},"p5.Framebuffer.resize()":{"relativeUrl":"/reference/p5.Framebuffer/resize","alias":"resize"},"p5.Framebuffer.updatePixels()":{"relativeUrl":"/reference/p5.Framebuffer/updatePixels","alias":"updatePixels"},"p5.Gain.amp()":{"relativeUrl":"/reference/p5.Gain/amp","alias":"amp"},"p5.Gain.connect()":{"relativeUrl":"/reference/p5.Gain/connect","alias":"connect"},"p5.Gain.disconnect()":{"relativeUrl":"/reference/p5.Gain/disconnect","alias":"disconnect"},"p5.Gain.setInput()":{"relativeUrl":"/reference/p5.Gain/setInput","alias":"setInput"},"p5.Geometry.calculateBoundingBox()":{"relativeUrl":"/reference/p5.Geometry/calculateBoundingBox","alias":"calculateBoundingBox"},"p5.Geometry.clearColors()":{"relativeUrl":"/reference/p5.Geometry/clearColors","alias":"clearColors"},"p5.Geometry.computeFaces()":{"relativeUrl":"/reference/p5.Geometry/computeFaces","alias":"computeFaces"},"p5.Geometry.computeNormals()":{"relativeUrl":"/reference/p5.Geometry/computeNormals","alias":"computeNormals"},"p5.Geometry.faces":{"relativeUrl":"/reference/p5.Geometry/faces","alias":"faces"},"p5.Geometry.flipU()":{"relativeUrl":"/reference/p5.Geometry/flipU","alias":"flipU"},"p5.Geometry.flipV()":{"relativeUrl":"/reference/p5.Geometry/flipV","alias":"flipV"},"p5.Geometry.normalize()":{"relativeUrl":"/reference/p5.Geometry/normalize","alias":"normalize"},"p5.Geometry.saveObj()":{"relativeUrl":"/reference/p5.Geometry/saveObj","alias":"saveObj"},"p5.Geometry.saveStl()":{"relativeUrl":"/reference/p5.Geometry/saveStl","alias":"saveStl"},"p5.Geometry.uvs":{"relativeUrl":"/reference/p5.Geometry/uvs","alias":"uvs"},"p5.Geometry.vertexNormals":{"relativeUrl":"/reference/p5.Geometry/vertexNormals","alias":"vertexNormals"},"p5.Geometry.vertices":{"relativeUrl":"/reference/p5.Geometry/vertices","alias":"vertices"},"p5.Graphics.createFramebuffer()":{"relativeUrl":"/reference/p5.Graphics/createFramebuffer","alias":"createFramebuffer"},"p5.Graphics.remove()":{"relativeUrl":"/reference/p5.Graphics/remove","alias":"remove"},"p5.Graphics.reset()":{"relativeUrl":"/reference/p5.Graphics/reset","alias":"reset"},"p5.Image.blend()":{"relativeUrl":"/reference/p5.Image/blend","alias":"blend"},"p5.Image.copy()":{"relativeUrl":"/reference/p5.Image/copy","alias":"copy"},"p5.Image.delay()":{"relativeUrl":"/reference/p5.Image/delay","alias":"delay"},"p5.Image.filter()":{"relativeUrl":"/reference/p5.Image/filter","alias":"filter"},"p5.Image.get()":{"relativeUrl":"/reference/p5.Image/get","alias":"get"},"p5.Image.getCurrentFrame()":{"relativeUrl":"/reference/p5.Image/getCurrentFrame","alias":"getCurrentFrame"},"p5.Image.height":{"relativeUrl":"/reference/p5.Image/height","alias":"height"},"p5.Image.loadPixels()":{"relativeUrl":"/reference/p5.Image/loadPixels","alias":"loadPixels"},"p5.Image.mask()":{"relativeUrl":"/reference/p5.Image/mask","alias":"mask"},"p5.Image.numFrames()":{"relativeUrl":"/reference/p5.Image/numFrames","alias":"numFrames"},"p5.Image.pause()":{"relativeUrl":"/reference/p5.Image/pause","alias":"pause"},"p5.Image.pixelDensity()":{"relativeUrl":"/reference/p5.Image/pixelDensity","alias":"pixelDensity"},"p5.Image.pixels":{"relativeUrl":"/reference/p5.Image/pixels","alias":"pixels"},"p5.Image.play()":{"relativeUrl":"/reference/p5.Image/play","alias":"play"},"p5.Image.reset()":{"relativeUrl":"/reference/p5.Image/reset","alias":"reset"},"p5.Image.resize()":{"relativeUrl":"/reference/p5.Image/resize","alias":"resize"},"p5.Image.save()":{"relativeUrl":"/reference/p5.Image/save","alias":"save"},"p5.Image.set()":{"relativeUrl":"/reference/p5.Image/set","alias":"set"},"p5.Image.setFrame()":{"relativeUrl":"/reference/p5.Image/setFrame","alias":"setFrame"},"p5.Image.updatePixels()":{"relativeUrl":"/reference/p5.Image/updatePixels","alias":"updatePixels"},"p5.Image.width":{"relativeUrl":"/reference/p5.Image/width","alias":"width"},"p5.MediaElement.addCue()":{"relativeUrl":"/reference/p5.MediaElement/addCue","alias":"addCue"},"p5.MediaElement.autoplay()":{"relativeUrl":"/reference/p5.MediaElement/autoplay","alias":"autoplay"},"p5.MediaElement.clearCues()":{"relativeUrl":"/reference/p5.MediaElement/clearCues","alias":"clearCues"},"p5.MediaElement.connect()":{"relativeUrl":"/reference/p5.MediaElement/connect","alias":"connect"},"p5.MediaElement.disconnect()":{"relativeUrl":"/reference/p5.MediaElement/disconnect","alias":"disconnect"},"p5.MediaElement.duration()":{"relativeUrl":"/reference/p5.MediaElement/duration","alias":"duration"},"p5.MediaElement.hideControls()":{"relativeUrl":"/reference/p5.MediaElement/hideControls","alias":"hideControls"},"p5.MediaElement.loop()":{"relativeUrl":"/reference/p5.MediaElement/loop","alias":"loop"},"p5.MediaElement.noLoop()":{"relativeUrl":"/reference/p5.MediaElement/noLoop","alias":"noLoop"},"p5.MediaElement.onended()":{"relativeUrl":"/reference/p5.MediaElement/onended","alias":"onended"},"p5.MediaElement.pause()":{"relativeUrl":"/reference/p5.MediaElement/pause","alias":"pause"},"p5.MediaElement.play()":{"relativeUrl":"/reference/p5.MediaElement/play","alias":"play"},"p5.MediaElement.removeCue()":{"relativeUrl":"/reference/p5.MediaElement/removeCue","alias":"removeCue"},"p5.MediaElement.showControls()":{"relativeUrl":"/reference/p5.MediaElement/showControls","alias":"showControls"},"p5.MediaElement.speed()":{"relativeUrl":"/reference/p5.MediaElement/speed","alias":"speed"},"p5.MediaElement.src":{"relativeUrl":"/reference/p5.MediaElement/src","alias":"src"},"p5.MediaElement.stop()":{"relativeUrl":"/reference/p5.MediaElement/stop","alias":"stop"},"p5.MediaElement.time()":{"relativeUrl":"/reference/p5.MediaElement/time","alias":"time"},"p5.MediaElement.volume()":{"relativeUrl":"/reference/p5.MediaElement/volume","alias":"volume"},"p5.MonoSynth.amp()":{"relativeUrl":"/reference/p5.MonoSynth/amp","alias":"amp"},"p5.MonoSynth.attack":{"relativeUrl":"/reference/p5.MonoSynth/attack","alias":"attack"},"p5.MonoSynth.connect()":{"relativeUrl":"/reference/p5.MonoSynth/connect","alias":"connect"},"p5.MonoSynth.disconnect()":{"relativeUrl":"/reference/p5.MonoSynth/disconnect","alias":"disconnect"},"p5.MonoSynth.dispose()":{"relativeUrl":"/reference/p5.MonoSynth/dispose","alias":"dispose"},"p5.MonoSynth.play()":{"relativeUrl":"/reference/p5.MonoSynth/play","alias":"play"},"p5.MonoSynth.setADSR()":{"relativeUrl":"/reference/p5.MonoSynth/setADSR","alias":"setADSR"},"p5.MonoSynth.triggerAttack()":{"relativeUrl":"/reference/p5.MonoSynth/triggerAttack","alias":"triggerAttack"},"p5.MonoSynth.triggerRelease()":{"relativeUrl":"/reference/p5.MonoSynth/triggerRelease","alias":"triggerRelease"},"p5.Noise.setType()":{"relativeUrl":"/reference/p5.Noise/setType","alias":"setType"},"p5.NumberDict.add()":{"relativeUrl":"/reference/p5.NumberDict/add","alias":"add"},"p5.NumberDict.div()":{"relativeUrl":"/reference/p5.NumberDict/div","alias":"div"},"p5.NumberDict.maxKey()":{"relativeUrl":"/reference/p5.NumberDict/maxKey","alias":"maxKey"},"p5.NumberDict.maxValue()":{"relativeUrl":"/reference/p5.NumberDict/maxValue","alias":"maxValue"},"p5.NumberDict.minKey()":{"relativeUrl":"/reference/p5.NumberDict/minKey","alias":"minKey"},"p5.NumberDict.minValue()":{"relativeUrl":"/reference/p5.NumberDict/minValue","alias":"minValue"},"p5.NumberDict.mult()":{"relativeUrl":"/reference/p5.NumberDict/mult","alias":"mult"},"p5.NumberDict.sub()":{"relativeUrl":"/reference/p5.NumberDict/sub","alias":"sub"},"p5.Oscillator.add()":{"relativeUrl":"/reference/p5.Oscillator/add","alias":"add"},"p5.Oscillator.amp()":{"relativeUrl":"/reference/p5.Oscillator/amp","alias":"amp"},"p5.Oscillator.connect()":{"relativeUrl":"/reference/p5.Oscillator/connect","alias":"connect"},"p5.Oscillator.disconnect()":{"relativeUrl":"/reference/p5.Oscillator/disconnect","alias":"disconnect"},"p5.Oscillator.freq()":{"relativeUrl":"/reference/p5.Oscillator/freq","alias":"freq"},"p5.Oscillator.getAmp()":{"relativeUrl":"/reference/p5.Oscillator/getAmp","alias":"getAmp"},"p5.Oscillator.getFreq()":{"relativeUrl":"/reference/p5.Oscillator/getFreq","alias":"getFreq"},"p5.Oscillator.getPan()":{"relativeUrl":"/reference/p5.Oscillator/getPan","alias":"getPan"},"p5.Oscillator.getType()":{"relativeUrl":"/reference/p5.Oscillator/getType","alias":"getType"},"p5.Oscillator.mult()":{"relativeUrl":"/reference/p5.Oscillator/mult","alias":"mult"},"p5.Oscillator.pan()":{"relativeUrl":"/reference/p5.Oscillator/pan","alias":"pan"},"p5.Oscillator.phase()":{"relativeUrl":"/reference/p5.Oscillator/phase","alias":"phase"},"p5.Oscillator.scale()":{"relativeUrl":"/reference/p5.Oscillator/scale","alias":"scale"},"p5.Oscillator.setType()":{"relativeUrl":"/reference/p5.Oscillator/setType","alias":"setType"},"p5.Oscillator.start()":{"relativeUrl":"/reference/p5.Oscillator/start","alias":"start"},"p5.Oscillator.stop()":{"relativeUrl":"/reference/p5.Oscillator/stop","alias":"stop"},"p5.Panner3D.maxDist()":{"relativeUrl":"/reference/p5.Panner3D/maxDist","alias":"maxDist"},"p5.Panner3D.orient()":{"relativeUrl":"/reference/p5.Panner3D/orient","alias":"orient"},"p5.Panner3D.orientX()":{"relativeUrl":"/reference/p5.Panner3D/orientX","alias":"orientX"},"p5.Panner3D.orientY()":{"relativeUrl":"/reference/p5.Panner3D/orientY","alias":"orientY"},"p5.Panner3D.orientZ()":{"relativeUrl":"/reference/p5.Panner3D/orientZ","alias":"orientZ"},"p5.Panner3D.panner":{"relativeUrl":"/reference/p5.Panner3D/panner","alias":"panner"},"p5.Panner3D.positionX()":{"relativeUrl":"/reference/p5.Panner3D/positionX","alias":"positionX"},"p5.Panner3D.positionY()":{"relativeUrl":"/reference/p5.Panner3D/positionY","alias":"positionY"},"p5.Panner3D.positionZ()":{"relativeUrl":"/reference/p5.Panner3D/positionZ","alias":"positionZ"},"p5.Panner3D.process()":{"relativeUrl":"/reference/p5.Panner3D/process","alias":"process"},"p5.Panner3D.rollof()":{"relativeUrl":"/reference/p5.Panner3D/rollof","alias":"rollof"},"p5.Panner3D.set()":{"relativeUrl":"/reference/p5.Panner3D/set","alias":"set"},"p5.Panner3D.setFalloff()":{"relativeUrl":"/reference/p5.Panner3D/setFalloff","alias":"setFalloff"},"p5.Part.addPhrase()":{"relativeUrl":"/reference/p5.Part/addPhrase","alias":"addPhrase"},"p5.Part.getBPM()":{"relativeUrl":"/reference/p5.Part/getBPM","alias":"getBPM"},"p5.Part.getPhrase()":{"relativeUrl":"/reference/p5.Part/getPhrase","alias":"getPhrase"},"p5.Part.loop()":{"relativeUrl":"/reference/p5.Part/loop","alias":"loop"},"p5.Part.noLoop()":{"relativeUrl":"/reference/p5.Part/noLoop","alias":"noLoop"},"p5.Part.onStep()":{"relativeUrl":"/reference/p5.Part/onStep","alias":"onStep"},"p5.Part.pause()":{"relativeUrl":"/reference/p5.Part/pause","alias":"pause"},"p5.Part.removePhrase()":{"relativeUrl":"/reference/p5.Part/removePhrase","alias":"removePhrase"},"p5.Part.replaceSequence()":{"relativeUrl":"/reference/p5.Part/replaceSequence","alias":"replaceSequence"},"p5.Part.setBPM()":{"relativeUrl":"/reference/p5.Part/setBPM","alias":"setBPM"},"p5.Part.start()":{"relativeUrl":"/reference/p5.Part/start","alias":"start"},"p5.Part.stop()":{"relativeUrl":"/reference/p5.Part/stop","alias":"stop"},"isDetected":{"relativeUrl":"/reference/p5.PeakDetect/isDetected"},"p5.PeakDetect.onPeak()":{"relativeUrl":"/reference/p5.PeakDetect/onPeak","alias":"onPeak"},"p5.PeakDetect.update()":{"relativeUrl":"/reference/p5.PeakDetect/update","alias":"update"},"p5.Phrase.sequence":{"relativeUrl":"/reference/p5.Phrase/sequence","alias":"sequence"},"p5.PolySynth.AudioVoice":{"relativeUrl":"/reference/p5.PolySynth/AudioVoice","alias":"AudioVoice"},"p5.PolySynth.connect()":{"relativeUrl":"/reference/p5.PolySynth/connect","alias":"connect"},"p5.PolySynth.disconnect()":{"relativeUrl":"/reference/p5.PolySynth/disconnect","alias":"disconnect"},"p5.PolySynth.dispose()":{"relativeUrl":"/reference/p5.PolySynth/dispose","alias":"dispose"},"p5.PolySynth.noteADSR()":{"relativeUrl":"/reference/p5.PolySynth/noteADSR","alias":"noteADSR"},"p5.PolySynth.noteAttack()":{"relativeUrl":"/reference/p5.PolySynth/noteAttack","alias":"noteAttack"},"p5.PolySynth.noteRelease()":{"relativeUrl":"/reference/p5.PolySynth/noteRelease","alias":"noteRelease"},"p5.PolySynth.notes":{"relativeUrl":"/reference/p5.PolySynth/notes","alias":"notes"},"p5.PolySynth.play()":{"relativeUrl":"/reference/p5.PolySynth/play","alias":"play"},"p5.PolySynth.polyvalue":{"relativeUrl":"/reference/p5.PolySynth/polyvalue","alias":"polyvalue"},"p5.PolySynth.setADSR()":{"relativeUrl":"/reference/p5.PolySynth/setADSR","alias":"setADSR"},"p5.PrintWriter.clear()":{"relativeUrl":"/reference/p5.PrintWriter/clear","alias":"clear"},"p5.PrintWriter.close()":{"relativeUrl":"/reference/p5.PrintWriter/close","alias":"close"},"p5.PrintWriter.print()":{"relativeUrl":"/reference/p5.PrintWriter/print","alias":"print"},"p5.PrintWriter.write()":{"relativeUrl":"/reference/p5.PrintWriter/write","alias":"write"},"p5.Pulse.width()":{"relativeUrl":"/reference/p5.Pulse/width","alias":"width"},"p5.Reverb.amp()":{"relativeUrl":"/reference/p5.Reverb/amp","alias":"amp"},"p5.Reverb.connect()":{"relativeUrl":"/reference/p5.Reverb/connect","alias":"connect"},"p5.Reverb.disconnect()":{"relativeUrl":"/reference/p5.Reverb/disconnect","alias":"disconnect"},"p5.Reverb.process()":{"relativeUrl":"/reference/p5.Reverb/process","alias":"process"},"p5.Reverb.set()":{"relativeUrl":"/reference/p5.Reverb/set","alias":"set"},"p5.Score.loop()":{"relativeUrl":"/reference/p5.Score/loop","alias":"loop"},"p5.Score.noLoop()":{"relativeUrl":"/reference/p5.Score/noLoop","alias":"noLoop"},"p5.Score.pause()":{"relativeUrl":"/reference/p5.Score/pause","alias":"pause"},"p5.Score.setBPM()":{"relativeUrl":"/reference/p5.Score/setBPM","alias":"setBPM"},"p5.Score.start()":{"relativeUrl":"/reference/p5.Score/start","alias":"start"},"p5.Score.stop()":{"relativeUrl":"/reference/p5.Score/stop","alias":"stop"},"p5.Shader.copyToContext()":{"relativeUrl":"/reference/p5.Shader/copyToContext","alias":"copyToContext"},"p5.Shader.setUniform()":{"relativeUrl":"/reference/p5.Shader/setUniform","alias":"setUniform"},"p5.SoundFile.addCue()":{"relativeUrl":"/reference/p5.SoundFile/addCue","alias":"addCue"},"p5.SoundFile.channels()":{"relativeUrl":"/reference/p5.SoundFile/channels","alias":"channels"},"p5.SoundFile.clearCues()":{"relativeUrl":"/reference/p5.SoundFile/clearCues","alias":"clearCues"},"p5.SoundFile.connect()":{"relativeUrl":"/reference/p5.SoundFile/connect","alias":"connect"},"p5.SoundFile.currentTime()":{"relativeUrl":"/reference/p5.SoundFile/currentTime","alias":"currentTime"},"p5.SoundFile.disconnect()":{"relativeUrl":"/reference/p5.SoundFile/disconnect","alias":"disconnect"},"p5.SoundFile.duration()":{"relativeUrl":"/reference/p5.SoundFile/duration","alias":"duration"},"p5.SoundFile.frames()":{"relativeUrl":"/reference/p5.SoundFile/frames","alias":"frames"},"p5.SoundFile.getBlob()":{"relativeUrl":"/reference/p5.SoundFile/getBlob","alias":"getBlob"},"p5.SoundFile.getPan()":{"relativeUrl":"/reference/p5.SoundFile/getPan","alias":"getPan"},"p5.SoundFile.getPeaks()":{"relativeUrl":"/reference/p5.SoundFile/getPeaks","alias":"getPeaks"},"p5.SoundFile.isLoaded()":{"relativeUrl":"/reference/p5.SoundFile/isLoaded","alias":"isLoaded"},"p5.SoundFile.isLooping()":{"relativeUrl":"/reference/p5.SoundFile/isLooping","alias":"isLooping"},"p5.SoundFile.isPaused()":{"relativeUrl":"/reference/p5.SoundFile/isPaused","alias":"isPaused"},"p5.SoundFile.isPlaying()":{"relativeUrl":"/reference/p5.SoundFile/isPlaying","alias":"isPlaying"},"p5.SoundFile.jump()":{"relativeUrl":"/reference/p5.SoundFile/jump","alias":"jump"},"p5.SoundFile.loop()":{"relativeUrl":"/reference/p5.SoundFile/loop","alias":"loop"},"p5.SoundFile.onended()":{"relativeUrl":"/reference/p5.SoundFile/onended","alias":"onended"},"p5.SoundFile.pan()":{"relativeUrl":"/reference/p5.SoundFile/pan","alias":"pan"},"p5.SoundFile.pause()":{"relativeUrl":"/reference/p5.SoundFile/pause","alias":"pause"},"p5.SoundFile.play()":{"relativeUrl":"/reference/p5.SoundFile/play","alias":"play"},"p5.SoundFile.playMode()":{"relativeUrl":"/reference/p5.SoundFile/playMode","alias":"playMode"},"p5.SoundFile.rate()":{"relativeUrl":"/reference/p5.SoundFile/rate","alias":"rate"},"p5.SoundFile.removeCue()":{"relativeUrl":"/reference/p5.SoundFile/removeCue","alias":"removeCue"},"p5.SoundFile.reverseBuffer()":{"relativeUrl":"/reference/p5.SoundFile/reverseBuffer","alias":"reverseBuffer"},"p5.SoundFile.sampleRate()":{"relativeUrl":"/reference/p5.SoundFile/sampleRate","alias":"sampleRate"},"p5.SoundFile.save()":{"relativeUrl":"/reference/p5.SoundFile/save","alias":"save"},"p5.SoundFile.setBuffer()":{"relativeUrl":"/reference/p5.SoundFile/setBuffer","alias":"setBuffer"},"p5.SoundFile.setLoop()":{"relativeUrl":"/reference/p5.SoundFile/setLoop","alias":"setLoop"},"p5.SoundFile.setPath()":{"relativeUrl":"/reference/p5.SoundFile/setPath","alias":"setPath"},"p5.SoundFile.setVolume()":{"relativeUrl":"/reference/p5.SoundFile/setVolume","alias":"setVolume"},"p5.SoundFile.stop()":{"relativeUrl":"/reference/p5.SoundFile/stop","alias":"stop"},"p5.SoundLoop.bpm":{"relativeUrl":"/reference/p5.SoundLoop/bpm","alias":"bpm"},"p5.SoundLoop.interval":{"relativeUrl":"/reference/p5.SoundLoop/interval","alias":"interval"},"p5.SoundLoop.iterations":{"relativeUrl":"/reference/p5.SoundLoop/iterations","alias":"iterations"},"p5.SoundLoop.maxIterations":{"relativeUrl":"/reference/p5.SoundLoop/maxIterations","alias":"maxIterations"},"p5.SoundLoop.musicalTimeMode":{"relativeUrl":"/reference/p5.SoundLoop/musicalTimeMode","alias":"musicalTimeMode"},"p5.SoundLoop.pause()":{"relativeUrl":"/reference/p5.SoundLoop/pause","alias":"pause"},"p5.SoundLoop.start()":{"relativeUrl":"/reference/p5.SoundLoop/start","alias":"start"},"p5.SoundLoop.stop()":{"relativeUrl":"/reference/p5.SoundLoop/stop","alias":"stop"},"p5.SoundLoop.syncedStart()":{"relativeUrl":"/reference/p5.SoundLoop/syncedStart","alias":"syncedStart"},"p5.SoundLoop.timeSignature":{"relativeUrl":"/reference/p5.SoundLoop/timeSignature","alias":"timeSignature"},"p5.SoundRecorder.record()":{"relativeUrl":"/reference/p5.SoundRecorder/record","alias":"record"},"p5.SoundRecorder.setInput()":{"relativeUrl":"/reference/p5.SoundRecorder/setInput","alias":"setInput"},"p5.SoundRecorder.stop()":{"relativeUrl":"/reference/p5.SoundRecorder/stop","alias":"stop"},"p5.Table.addColumn()":{"relativeUrl":"/reference/p5.Table/addColumn","alias":"addColumn"},"p5.Table.addRow()":{"relativeUrl":"/reference/p5.Table/addRow","alias":"addRow"},"p5.Table.clearRows()":{"relativeUrl":"/reference/p5.Table/clearRows","alias":"clearRows"},"p5.Table.columns":{"relativeUrl":"/reference/p5.Table/columns","alias":"columns"},"p5.Table.findRow()":{"relativeUrl":"/reference/p5.Table/findRow","alias":"findRow"},"p5.Table.findRows()":{"relativeUrl":"/reference/p5.Table/findRows","alias":"findRows"},"p5.Table.get()":{"relativeUrl":"/reference/p5.Table/get","alias":"get"},"p5.Table.getArray()":{"relativeUrl":"/reference/p5.Table/getArray","alias":"getArray"},"p5.Table.getColumn()":{"relativeUrl":"/reference/p5.Table/getColumn","alias":"getColumn"},"p5.Table.getColumnCount()":{"relativeUrl":"/reference/p5.Table/getColumnCount","alias":"getColumnCount"},"p5.Table.getNum()":{"relativeUrl":"/reference/p5.Table/getNum","alias":"getNum"},"p5.Table.getObject()":{"relativeUrl":"/reference/p5.Table/getObject","alias":"getObject"},"p5.Table.getRow()":{"relativeUrl":"/reference/p5.Table/getRow","alias":"getRow"},"p5.Table.getRowCount()":{"relativeUrl":"/reference/p5.Table/getRowCount","alias":"getRowCount"},"p5.Table.getRows()":{"relativeUrl":"/reference/p5.Table/getRows","alias":"getRows"},"p5.Table.getString()":{"relativeUrl":"/reference/p5.Table/getString","alias":"getString"},"p5.Table.matchRow()":{"relativeUrl":"/reference/p5.Table/matchRow","alias":"matchRow"},"p5.Table.matchRows()":{"relativeUrl":"/reference/p5.Table/matchRows","alias":"matchRows"},"p5.Table.removeColumn()":{"relativeUrl":"/reference/p5.Table/removeColumn","alias":"removeColumn"},"p5.Table.removeRow()":{"relativeUrl":"/reference/p5.Table/removeRow","alias":"removeRow"},"p5.Table.removeTokens()":{"relativeUrl":"/reference/p5.Table/removeTokens","alias":"removeTokens"},"p5.Table.rows":{"relativeUrl":"/reference/p5.Table/rows","alias":"rows"},"p5.Table.set()":{"relativeUrl":"/reference/p5.Table/set","alias":"set"},"p5.Table.setNum()":{"relativeUrl":"/reference/p5.Table/setNum","alias":"setNum"},"p5.Table.setString()":{"relativeUrl":"/reference/p5.Table/setString","alias":"setString"},"p5.Table.trim()":{"relativeUrl":"/reference/p5.Table/trim","alias":"trim"},"p5.TableRow.get()":{"relativeUrl":"/reference/p5.TableRow/get","alias":"get"},"p5.TableRow.getNum()":{"relativeUrl":"/reference/p5.TableRow/getNum","alias":"getNum"},"p5.TableRow.getString()":{"relativeUrl":"/reference/p5.TableRow/getString","alias":"getString"},"p5.TableRow.set()":{"relativeUrl":"/reference/p5.TableRow/set","alias":"set"},"p5.TableRow.setNum()":{"relativeUrl":"/reference/p5.TableRow/setNum","alias":"setNum"},"p5.TableRow.setString()":{"relativeUrl":"/reference/p5.TableRow/setString","alias":"setString"},"p5.TypedDict.clear()":{"relativeUrl":"/reference/p5.TypedDict/clear","alias":"clear"},"p5.TypedDict.create()":{"relativeUrl":"/reference/p5.TypedDict/create","alias":"create"},"p5.TypedDict.get()":{"relativeUrl":"/reference/p5.TypedDict/get","alias":"get"},"p5.TypedDict.hasKey()":{"relativeUrl":"/reference/p5.TypedDict/hasKey","alias":"hasKey"},"p5.TypedDict.print()":{"relativeUrl":"/reference/p5.TypedDict/print","alias":"print"},"p5.TypedDict.remove()":{"relativeUrl":"/reference/p5.TypedDict/remove","alias":"remove"},"p5.TypedDict.saveJSON()":{"relativeUrl":"/reference/p5.TypedDict/saveJSON","alias":"saveJSON"},"p5.TypedDict.saveTable()":{"relativeUrl":"/reference/p5.TypedDict/saveTable","alias":"saveTable"},"p5.TypedDict.set()":{"relativeUrl":"/reference/p5.TypedDict/set","alias":"set"},"p5.TypedDict.size()":{"relativeUrl":"/reference/p5.TypedDict/size","alias":"size"},"p5.Vector.add()":{"relativeUrl":"/reference/p5.Vector/add","alias":"add"},"p5.Vector.angleBetween()":{"relativeUrl":"/reference/p5.Vector/angleBetween","alias":"angleBetween"},"p5.Vector.array()":{"relativeUrl":"/reference/p5.Vector/array","alias":"array"},"p5.Vector.clampToZero()":{"relativeUrl":"/reference/p5.Vector/clampToZero","alias":"clampToZero"},"p5.Vector.copy()":{"relativeUrl":"/reference/p5.Vector/copy","alias":"copy"},"p5.Vector.cross()":{"relativeUrl":"/reference/p5.Vector/cross","alias":"cross"},"p5.Vector.dist()":{"relativeUrl":"/reference/p5.Vector/dist","alias":"dist"},"p5.Vector.div()":{"relativeUrl":"/reference/p5.Vector/div","alias":"div"},"p5.Vector.dot()":{"relativeUrl":"/reference/p5.Vector/dot","alias":"dot"},"p5.Vector.equals()":{"relativeUrl":"/reference/p5.Vector/equals","alias":"equals"},"p5.Vector.fromAngle()":{"relativeUrl":"/reference/p5.Vector/fromAngle","alias":"fromAngle"},"p5.Vector.fromAngles()":{"relativeUrl":"/reference/p5.Vector/fromAngles","alias":"fromAngles"},"p5.Vector.heading()":{"relativeUrl":"/reference/p5.Vector/heading","alias":"heading"},"p5.Vector.lerp()":{"relativeUrl":"/reference/p5.Vector/lerp","alias":"lerp"},"p5.Vector.limit()":{"relativeUrl":"/reference/p5.Vector/limit","alias":"limit"},"p5.Vector.mag()":{"relativeUrl":"/reference/p5.Vector/mag","alias":"mag"},"p5.Vector.magSq()":{"relativeUrl":"/reference/p5.Vector/magSq","alias":"magSq"},"p5.Vector.mult()":{"relativeUrl":"/reference/p5.Vector/mult","alias":"mult"},"p5.Vector.normalize()":{"relativeUrl":"/reference/p5.Vector/normalize","alias":"normalize"},"p5.Vector.random2D()":{"relativeUrl":"/reference/p5.Vector/random2D","alias":"random2D"},"p5.Vector.random3D()":{"relativeUrl":"/reference/p5.Vector/random3D","alias":"random3D"},"p5.Vector.reflect()":{"relativeUrl":"/reference/p5.Vector/reflect","alias":"reflect"},"p5.Vector.rem()":{"relativeUrl":"/reference/p5.Vector/rem","alias":"rem"},"p5.Vector.rotate()":{"relativeUrl":"/reference/p5.Vector/rotate","alias":"rotate"},"p5.Vector.set()":{"relativeUrl":"/reference/p5.Vector/set","alias":"set"},"p5.Vector.setHeading()":{"relativeUrl":"/reference/p5.Vector/setHeading","alias":"setHeading"},"p5.Vector.setMag()":{"relativeUrl":"/reference/p5.Vector/setMag","alias":"setMag"},"p5.Vector.slerp()":{"relativeUrl":"/reference/p5.Vector/slerp","alias":"slerp"},"p5.Vector.sub()":{"relativeUrl":"/reference/p5.Vector/sub","alias":"sub"},"p5.Vector.toString()":{"relativeUrl":"/reference/p5.Vector/toString","alias":"toString"},"p5.Vector.x":{"relativeUrl":"/reference/p5.Vector/x","alias":"x"},"p5.Vector.y":{"relativeUrl":"/reference/p5.Vector/y","alias":"y"},"p5.Vector.z":{"relativeUrl":"/reference/p5.Vector/z","alias":"z"},"p5.XML.addChild()":{"relativeUrl":"/reference/p5.XML/addChild","alias":"addChild"},"p5.XML.getAttributeCount()":{"relativeUrl":"/reference/p5.XML/getAttributeCount","alias":"getAttributeCount"},"p5.XML.getChild()":{"relativeUrl":"/reference/p5.XML/getChild","alias":"getChild"},"p5.XML.getChildren()":{"relativeUrl":"/reference/p5.XML/getChildren","alias":"getChildren"},"p5.XML.getContent()":{"relativeUrl":"/reference/p5.XML/getContent","alias":"getContent"},"p5.XML.getName()":{"relativeUrl":"/reference/p5.XML/getName","alias":"getName"},"p5.XML.getNum()":{"relativeUrl":"/reference/p5.XML/getNum","alias":"getNum"},"p5.XML.getParent()":{"relativeUrl":"/reference/p5.XML/getParent","alias":"getParent"},"p5.XML.getString()":{"relativeUrl":"/reference/p5.XML/getString","alias":"getString"},"p5.XML.hasAttribute()":{"relativeUrl":"/reference/p5.XML/hasAttribute","alias":"hasAttribute"},"p5.XML.hasChildren()":{"relativeUrl":"/reference/p5.XML/hasChildren","alias":"hasChildren"},"p5.XML.listAttributes()":{"relativeUrl":"/reference/p5.XML/listAttributes","alias":"listAttributes"},"p5.XML.listChildren()":{"relativeUrl":"/reference/p5.XML/listChildren","alias":"listChildren"},"p5.XML.removeChild()":{"relativeUrl":"/reference/p5.XML/removeChild","alias":"removeChild"},"p5.XML.serialize()":{"relativeUrl":"/reference/p5.XML/serialize","alias":"serialize"},"p5.XML.setAttribute()":{"relativeUrl":"/reference/p5.XML/setAttribute","alias":"setAttribute"},"p5.XML.setContent()":{"relativeUrl":"/reference/p5.XML/setContent","alias":"setContent"},"p5.XML.setName()":{"relativeUrl":"/reference/p5.XML/setName","alias":"setName"},"p5.Amplitude":{"relativeUrl":"/reference/p5.sound/p5.Amplitude"},"p5.AudioIn":{"relativeUrl":"/reference/p5.sound/p5.AudioIn"},"p5.AudioVoice":{"relativeUrl":"/reference/p5.sound/p5.AudioVoice"},"p5.BandPass":{"relativeUrl":"/reference/p5.sound/p5.BandPass"},"p5.Compressor":{"relativeUrl":"/reference/p5.sound/p5.Compressor"},"p5.Convolver":{"relativeUrl":"/reference/p5.sound/p5.Convolver"},"p5.Delay":{"relativeUrl":"/reference/p5.sound/p5.Delay"},"p5.Distortion":{"relativeUrl":"/reference/p5.sound/p5.Distortion"},"p5.EQ":{"relativeUrl":"/reference/p5.sound/p5.EQ"},"p5.Effect":{"relativeUrl":"/reference/p5.sound/p5.Effect"},"p5.Envelope":{"relativeUrl":"/reference/p5.sound/p5.Envelope"},"p5.FFT":{"relativeUrl":"/reference/p5.sound/p5.FFT"},"p5.Filter":{"relativeUrl":"/reference/p5.sound/p5.Filter"},"p5.Gain":{"relativeUrl":"/reference/p5.sound/p5.Gain"},"p5.HighPass":{"relativeUrl":"/reference/p5.sound/p5.HighPass"},"p5.LowPass":{"relativeUrl":"/reference/p5.sound/p5.LowPass"},"p5.MonoSynth":{"relativeUrl":"/reference/p5.sound/p5.MonoSynth"},"p5.Noise":{"relativeUrl":"/reference/p5.sound/p5.Noise"},"p5.OnsetDetect":{"relativeUrl":"/reference/p5.sound/p5.OnsetDetect"},"p5.Oscillator":{"relativeUrl":"/reference/p5.sound/p5.Oscillator"},"p5.Panner3D":{"relativeUrl":"/reference/p5.sound/p5.Panner3D"},"p5.Part":{"relativeUrl":"/reference/p5.sound/p5.Part"},"p5.PeakDetect":{"relativeUrl":"/reference/p5.sound/p5.PeakDetect"},"p5.Phrase":{"relativeUrl":"/reference/p5.sound/p5.Phrase"},"p5.PolySynth":{"relativeUrl":"/reference/p5.sound/p5.PolySynth"},"p5.Pulse":{"relativeUrl":"/reference/p5.sound/p5.Pulse"},"p5.Reverb":{"relativeUrl":"/reference/p5.sound/p5.Reverb"},"p5.SawOsc":{"relativeUrl":"/reference/p5.sound/p5.SawOsc"},"p5.Score":{"relativeUrl":"/reference/p5.sound/p5.Score"},"p5.SinOsc":{"relativeUrl":"/reference/p5.sound/p5.SinOsc"},"p5.SoundFile":{"relativeUrl":"/reference/p5.sound/p5.SoundFile"},"p5.SoundLoop":{"relativeUrl":"/reference/p5.sound/p5.SoundLoop"},"p5.SoundRecorder":{"relativeUrl":"/reference/p5.sound/p5.SoundRecorder"},"p5.SqrOsc":{"relativeUrl":"/reference/p5.sound/p5.SqrOsc"},"p5.TriOsc":{"relativeUrl":"/reference/p5.sound/p5.TriOsc"}},"tutorials-fallback":{"Animating with Media Objects":{"relativeUrl":"/tutorials/animating-with-media-objects","description":"Learn how to load images and GIFs to your sketches by creating an interactive garden!"},"Color Gradients":{"relativeUrl":"/tutorials/color-gradients","description":"Use radial gradients, linear gradients, and blend modes to create lens flare stickers & colorful filters on top of a webcam selfie."},"Conditionals and Interactivity":{"relativeUrl":"/tutorials/conditionals-and-interactivity","description":"A tutorial on how to use conditional statements and make interactive sketches."},"Coordinates and Transformations":{"relativeUrl":"/tutorials/coordinates-and-transformations","description":"An overview of the different ways you can position objects in WebGL mode."},"Creating and Styling HTML":{"relativeUrl":"/tutorials/creating-styling-html","description":"Dive into the art of creative coding and learn to build and beautify HTML with p5.js."},"Creating Custom Geometry in WebGL":{"relativeUrl":"/tutorials/custom-geometry","description":"A guide to the different ways you can create your own 3D shapes."},"Custom Shapes and Smooth Curves":{"relativeUrl":"/tutorials/custom-shapes-and-smooth-curves","description":"Use vertex(), bezierVertex(), beginShape() and endShape() to create angular and curved sparkle stickers to place on top of your webcam selfie."},"Data Structure Garden":{"relativeUrl":"/tutorials/data-structure-garden","description":"A tutorial on how to use JavaScript objects and arrays."},"Field Guide to Debugging":{"relativeUrl":"/tutorials/field-guide-to-debugging","description":"Learn some healthy habits and best practices for locating bugs in your program, and finding ways to overcome them."},"Get Started":{"relativeUrl":"/tutorials/get-started","description":"A tutorial that introduces basic p5.js functions and guides you through the steps to create an interactive landscape."},"Getting Started with Node.js":{"relativeUrl":"/tutorials/getting-started-with-nodejs","description":"Learn about HTTP requests and how to use Node.js in your p5.js projects to create dynamic projects that save and retrieve files."},"How to Optimize Your Sketches":{"relativeUrl":"/tutorials/how-to-optimize-your-sketches","description":"An advanced tutorial on how to optimize code in your sketches to run more efficiently."},"Introduction to Shaders":{"relativeUrl":"/tutorials/intro-to-shaders","description":"An introduction to the different ways you can create interesting visual effects with your computer's GPU."},"Layered Rendering with Framebuffers":{"relativeUrl":"/tutorials/layered-rendering-with-framebuffers","description":"Framebuffers are the fastest way to create a scene out of multiple layers in WebGL. Explore how to use them, and the unique 3D information they provide."},"Lights, Camera, Materials":{"relativeUrl":"/tutorials/lights-camera-materials","description":"Learn how to light and frame 3D scenes, and how to style 3D objects."},"Loading and Selecting Fonts":{"relativeUrl":"/tutorials/loading-and-selecting-fonts","description":"Explore typography in creative coding: A Quick guide to choosing and selecting fonts."},"Optimizing WebGL Sketches":{"relativeUrl":"/tutorials/optimizing-webgl-sketches","description":"Tips to help make your sketches run as smoothly as possible on as many devices as possible."},"Organizing Code with Functions":{"relativeUrl":"/tutorials/organizing-code-with-functions","description":"A tutorial on how to create and use functions to help you organize your code."},"How to Use the p5.js Web Editor with a Screen Reader":{"relativeUrl":"/tutorials/p5js-with-screen-reader","description":"A tutorial for setting up the p5.js Web Editor for screen readers."},"Repeating with Loops":{"relativeUrl":"/tutorials/repeating-with-loops","description":"Create a crawling caterpillar race using loops and arrays!"},"Responding to Inputs":{"relativeUrl":"/tutorials/responding-to-inputs","description":"Code nostalgia: Unleash your creativity and bring a vintage snake game to life with p5.js!"},"Setting Up Your Environment":{"relativeUrl":"/tutorials/setting-up-your-environment","description":"A quick tutorial for setting up the p5.js Web Editor and VS Code to write and save p5.js projects."},"Simple Melody App":{"relativeUrl":"/tutorials/simple-melody-app","description":"Use p5.Oscillator objects to generate musical notes in an app where users can write and replay melodies they create by interacting with the canvas!"},"Abracadabra: Speak With Your Hands in p5.js and ml5.js":{"relativeUrl":"/tutorials/speak-with-your-hands","description":"Control sketches with your hands using ml5.js"},"Variables and Change":{"relativeUrl":"/tutorials/variables-and-change","description":"Learn about variables and how they can be used to create animated sketches!"},"Writing Accessible Canvas Descriptions":{"relativeUrl":"/tutorials/writing-accessible-canvas-descriptions","description":"A tutorial for how to label p5.js code for screen readers."}}}
\ No newline at end of file
+{"contributor-docs":{"🌸 환영합니다! 🌺\n":{"relativeUrl":"/contribute/README","description":"p5js에 기여하는데에 관심을 가져주셔서 감사합니다 커뮤니티는 모든 형태의 기여를 소중하게 생각하며 컨트리뷰터의 의미를 최대한 넓은 범위로 확장하고자 합니다 이는 문서화 강의 코드 작성 창작 활동 글쓰기 디자인 운동 조직화 큐레이팅 여러분이 상상할 수 있는 걸 포괄합니다 [우리의 커뮤니티 페이지](https://p5js.org/community/#contribute)에는 커뮤니티에 참여하고 기여할 여러가지 방법들에 대한 개요가 제시되어 있습니다 기술적인 하고자 하신다면 시작하기에 앞서 글을 더 읽어주시기 바랍니다 프로젝트는 [올-컨트리뷰터스(all-contributors)](https://github.com/kentcdodds/all-contributors/) 사양을 따릅니다 [안내 사항](https://github.com/processing/p5.js/issues/2309/)을 [리드미(readme)](https://github.com/processing/p5.js/blob/main/README.md#contributors)에 본인을 추가하세요 [깃허브 이슈](https://github.com/processing/p5.js/issues/)에 여러분의 컨트리뷰션을 댓글로 달아주시면 저희가 추가해드리겠습니다 보관 위치 p5js 프로젝트의 핵심적인 저장소들은 아래와 같습니다 * [p5.js](https://github.com/processing/p5.js): 본 저장소에는 라이브러리의 소스 코드가 보관되어 [유저들이 보게 되는 p5js의 레퍼런스 매뉴얼](https://p5js.org/reference/) 코드에 포함되어 [JSDoc](http://usejsdoc.org/) 각주에서 생성됩니다 저장소는 [로렌 리 맥카시Lauren Lee McCarthy)](https://github.com/lmccart/)가 관리합니다 [p5.js-website](https://github.com/processing/p5.js-website/): 매뉴얼을 제외한 [p5js 웹사이트](http://p5js.org)의 [p5.js-sound](https://github.com/processing/p5.js-sound/): p5soundjs 라이브러리가 [제이슨 시갈Jason Sigal)](https://github.com/therewasaguy/)이 [p5.js-web-editor](https://github.com/processing/p5.js-web-editor/): 웹 에디터](https://editor.p5js.org)의 [캐시 타라케지언Cassie Tarakajian)](https://github.com/catarak/)이 예전의 에디터](https://github.com/processing/p5.js-editor/)는 이제 사용되지 않다는 점을 참고하십시오 [p5.accessibility](https://github.com/processing/p5.accessibility): 맹인 장애인들이 쉽게 p5 캔버스를 사용할 있도록 하는 라이브러리입니다 저장소 파일 구조 프로젝트엔 많은 파일들이 여기에 간략한 헷갈릴 수도 있지만 기여하기 저장소의 파일을 이해할 필요까지는 없습니다 우리는 한 영역인라인 도큐멘테이션을 고치는 것이 예가 될 있겠습니다에서 시작해서 차근차근 영역으로 나아가는 권장합니다 루이사 페레이라Luisa Pereira의 [Looking Inside p5.js](https://www.luisapereira.net/teaching/materials/processing-foundation/)에 작업 흐름에 사용되는 도구와 파일들에 소개를 동영상으로 확인하실 `contributor_docs/`에는 컨트리뷰터들을 위한 관례와 원칙을 설명하는 문서가 들어 `docs/`에는 사실 문서들이 대신 [온라인 매뉴얼](https://p5js.org/reference/)을 생성하기 담겨 `lib/`에는 비어 예시 파일과 [p5js-sound 저장소](https://github.com/processing/p5.js-sound/)에서 풀 리퀘스트를 통해 정기적으로 업데이트 p5sound 애드온이 이곳은 빌드 된 [Grunt](https://gruntjs.com/)를 이용해 하나의 파일로 컴파일 후에 위치하게 곳이기도 할 깃허브 저장소로 따로 이동시킬 필요가 없는 것입니다 `src/` 에는 라이브러리를 있는데 이들은 분리된 모듈의 형태로 주제별로 정리되어 p5js를 수정하고자 작업을 하면 됩니다 대부분의 폴더 안에는 각각의 리드미 파일readmemd이 있으니 이를 참고해 해주시기 `tasks/`에는 새로운 버전의 배포 릴리스 하는데에 관련된 자동화 작업들을 수행하는 스크립트들이 `tests/`는 내용 수정이 있어도 제대로 작동하도록 보장해주는 유닛 테스트들을 담고 `utils/`는 저장소에 유용할 추가적인 파일들을 디렉토리는 무시해도 괜찮습니다 문서화는 가장 중요한 부분입니다 낮은 품질의 이용자와 컨트리뷰터들의 진입 장벽을 높여 프로젝트 참여도를 저하시킵니다 [contributing\\_documentationmd]/contributing_documentation/ 페이지는 문서화를 시작하는 데에 깊이 개요를 제시합니다 같은 곳들에서 주로 찾아볼 [p5js.org/reference](https://p5js.org/reference/)는 코드의 [인라인 도큐멘테이션]/inline_documentation/으로부터 텍스트 설명 파라미터 스니펫 등을 포함합니다 코드와 인라인 긴밀히 연결시키고 문서화에 기여하는 게 만큼이나 중요하다는 생각을 강화하기 위해 활용하는 되면 라이브러리와 작동하는 방식 사이에 문제가 없음을 확실히 하기 도큐멘테이션과 예시를 확인합니다 이에 위해선 [inline\\_documentationmd]/inline_documentation/ 페이지를 살펴보는 걸로 시작하시기 [p5js.org/examples](http://p5js.org/examples/)페이지는 학습하는 길이가 긴 예시들을 위해서는 [adding\\_examples.md](https://github.com/processing/p5.js-website/blob/main/contributor_docs/Adding_examples.md) 살펴보시기 [p5js.org/tutorials](https://p5js.org/tutorials/)페이지는 p5js와 프로그래밍의 개념을 배울 도와주는 튜토리얼들을 웹사이트의 튜토리얼에 튜토리얼](https://p5js.org/learn/tutorial-guide.html)을 웹사이트는 현재 가지 언어들을 지원하고 있음을 국제화혹은 줄여서 i18n라고 불립니다 문서는 [i18n\\_contribution](https://github.com/processing/p5.js-website/blob/main/contributor_docs/i18n_contribution.md) 페이지에서 자세히 보실 이슈 흐름 알려진 버그와 추가되었으면 기능들은 이슈](https://github.com/processing/p5.js/issues/)들을 추적됩니다 [레이블]/issue_labels/들은 이슈들을 카테고리별로 분류하는 사용되는데 예를 들면 [초보자에게 적합한 이슈들](https://github.com/processing/p5.js/labels/level%3Abeginner/)을 레이블링 식입니다 이미 제기된 중에 시작하고 싶은 있다면 컨트리뷰터들이 진행 사항을 파악하고 도움을 줄 해당 이슈에 댓글을 달아주시기 이슈를 해결했다면 마스터 브랜치에 [풀 리퀘스트PR를 제출]/preparing_a_pull_request/하십시오 PR의 칸에 resolves #XXXX#XXXX를 해결함라고 써서 해결한 태그해주시기 PR이 다루기는 완전히 해결하지는 못하는 거라면즉 merge 되고 나서도 이슈가 열려 있어야 addresses 다룸이라고 써주시기 버그를 발견했거나 새롭게 더하고 기능에 아이디어가 먼저 제출해주시기 제출하지 않고 수정 사항이나 기능을 제출해버리는 경우 수락하기 어려울 가능성이 높습니다 피드백을 받고 다뤄도 괜찮다는 확인했다면 위의 절차를 고치거나 추가하는 시작할 버그 리포트를 재현하거나 버전 번호 재현 안내서와 주요 정보들을 요청하는 선별하는 작업할 용이한 방법 중 하나는 [코드 트리아지CodeTriage에서 구독](https://www.codetriage.com/processing/p5.js)하는 겁니다 [[Open Source Helpers](https://www.codetriage.com/processing/p5.js/badges/users.svg)](https://www.codetriage.com/processing/p5.js) [organization.md](https://github.com/processing/p5.js/blob/main/contributor_docs/organization.md) 파일은 이슈들이 체계화 있는지 그에 의사결정 과정은 이루어지는지에 대략적인 관심이 기여해주시기 개발 과정 프로세스라는 처음에는 까다로울 그렇게 느끼는 건 뿐만이 아니라 처음엔 모두가 혼란을 겪곤 밑을 보시면 셋업 과정을 차례 질문이 [포럼](https://discourse.processing.org/c/p5js/)에 물어보거나 막힌 부분을 [이슈](https://github.com/processing/p5.js/issues/)를 제출하면 최대한의 드리도록 하겠습니다 아래 절차는 [코딩 트레인The Coding Train의 비디오 강의](https://youtu.be/Rr3vLyP1Ods/)에서도 다루고 있습니다🚋🌈 [node.js](http://nodejs.org/)를 설치하세요 nodejs를 설치하면 자동적으로 [npm](https://www.npmjs.org) 패키지 매니저도 설치됩니다 본인의 계정에 저장소](https://github.com/processing/p5.js)를 [포크](https://help.github.com/articles/fork-a-repo/) 하십시오 포크 저장소를 로컬 컴퓨터에 [클론](https://help.github.com/articles/cloning-a-repository/) ```shell $ git clone https://github.com/YOUR_USERNAME/p5.js.git ``` 폴더로 들어가 npm에 필요한 디펜던시를 설치하십시오 cd npm ci [Grunt](https://gruntjs.com/)가 설치되었을텐데 코드로부터 빌드하기 이용할 run grunt 계속해서 변경해야 사전에 수동으로 일일이 명령어를 입력하지 않아도 변경 다시 빌드해줄 `npm dev`를 실행 나을 로컬에서 베이스를 변경하고 깃Git으로 [커밋](https://help.github.com/articles/github-glossary/#commit) add -u commit -m YOUR COMMIT MESSAGE 문법 오류가 확인하고 고장 문제들에 테스트를 grunt`를 번 실행하십시오 포크에 [푸시](https://help.github.com/articles/github-glossary/#push) push 준비되었다면 리퀘스트](https://help.github.com/articles/creating-a-pull-request/)로 제출하십시오 커밋이 거절 당하는 베이스에 개발자 툴들은 것들에 대해 일부러 매우 엄격한 기준을 적용하도록 만들어져 이건 좋은 일관성 있게 만들고 규율이 지켜지도록 도울 뭔가를 변경하고자 만들었던 당할 의미하기는 낙담하지는 말아주세요 경험 개발자들의 커밋도 종종 당하곤 보통은 테스트가 문제인 경우가 많습니다 ## p5js는 깔끔하고 스타일의 문법을 요구하기에 [Prettier](https://prettier.io/)와 [ESlint](https://eslint.org/)라는 툴의 사용이 필수입니다 커밋을 전에 특정 스타일 규칙을 점검하게 되는데 사용하는 에디터에 [ESlint 플러그인](https://eslint.org/docs/user-guide/integrations#editors)을 타이핑 함과 오류를 하이라이트 해줍니다 스타일에 관해서 유연성과 내는데 참여와 기여의 낮추기 위함입니다 에러를 포착하기 터미널에서 실행하세요`$` 프롬프트는 마십시오 lint 오류는 고쳐질 lintfix 기존 스타일을 고수하는 선호되는게 보통이지만 [가끔은](https://github.com/processing/p5.js/search?utf8=%E2%9C%93\\&q=prettier-ignore\\&type=) 코드를 이해하기 만들기도 경우에는 Prettier의 `// prettier-ignore` 주석을 [예외적인 경우를 처리](https://prettier.io/docs/en/ignore.html)할 요구되는 선호 사항들은 그럴만한 이유가 있기 가능하다면 예외적인 만들지 말아주시길 규칙에 요약본이 목록이 전부가 아니기 [.prettierrc](https://github.com/processing/p5.js/blob/main/.prettierrc)와 [.eslintrc](https://github.com/processing/p5.js/blob/main/.eslintrc) 파일의 전체 목록을 참고 하시기 ES6 사용합니다 큰 따옴표 보다는 작은 따옴표를 들여쓰기는 스페이스 두 개로 처리합니다 정의되어 변수들은 적어도 번은 사용되던가 없애야 x == true false로 비교문을 작성하지 x를 사용하십시오 true는 분명히 if 와는 다릅니다 여지가 객체를 널null과 비교하고 숫자를 0에 문자열string을 비교하십시오 작성하는 함수가 모호하거나 복잡한 답니다 스타일링 팁을 참고하기 [모질라 자바스크립트 연습Mozilla JS practice)](https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Coding_Style#JavaScript_practices)을 보십시오 테스트 테스트란 주논리와 성능 검증을 보완하기 만들어진 규모의 코드들입니다 [unit\\_testingmd]/unit_testing/ 페이지에 테스트에 정보가 개발한다면 아마도 포함해야 통과하지 못한다면 그건 어딘가에 있다는 뜻이므로 돌리기 디펜던시들을 설치해야 이것이 *모든* 설치할 간단하게는 테스팅에 디펜던시들은 다음을 [Mocha](https://mochajs.org/): 개별적인 실행하는 강력한 테스팅 프레임워크 [mocha-chrome](https://github.com/shellscape/mocha-chrome/): 구글 크롬을 Mocha 돌리는 모차 플러그인 디펜던시들이 설치되면 Grunt를 돌리십시오 때론 커맨드 라인 브라우저에서 것도 유용합니다 서버 [연결](https://github.com/gruntjs/grunt-contrib-connect/)을 시작하십시오 dev 서버가 돌아가면 `test/testhtml`을 열 있을 완전한 설명은 문서의 범위를 벗어나는 것이지만 간략하게만 src/ 디렉토리에 가해진 중대한 새로 구현된 기능은 Mocha가 실행할 파일이 test/ 동반되어야 하는데 향후 나올 라이브러리에서도 작동할 것임을 검증하기 작성할 [Chaijs 레퍼런스](http://www.chaijs.com/api/assert/)를 어서션assertion 메세지를 구성함으로써 미래에 테스트로 잡아낼 오류들이 있고 결과적으로 개발자들이 만들어주시기를 [contributor\\_docs/](https://github.com/processing/p5.js/tree/main/contributor_docs/) 폴더에는 살펴볼만한 파일들도 비기술적인 영역과 관계된 것들입니다 흐름에서 영상 p5.js](https://www.luisapereira.net/teaching/materials/processing-foundation/)에서 트레인의 동영상](https://youtu.be/Rr3vLyP1Ods/)🚋🌈에서는 기술적 것에 제공합니다 [도커Docker 이미지](https://github.com/toolness/p5.js-docker/)는 [도커](https://www.docker.com/)에 마운트 [Node](https://nodejs.org/) 필수 요소들을 필요 없이 도커 설치를 제외하고는 방식으로든지 호스트 운영 체제에 영향을 주지 않고도 개발하는데에 사용될 [json 데이터 파일](https://p5js.org/reference/data.json)을 생성하는데 공개 API를 있으며 에디터에서 메서드를 자동으로 완성하는 등의 자동화된 툴링에 웹사이트에서 되지만 일부로 있지는 않습니다 최근에 [ES6](https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_-_ECMAScript_2015)로 마이그레이션 됐습니다 변화가 기여에 미칠지를 보기 [ES6 채택]/es6-adoption/을 방문해주십시오"},"접근성에 대한 초점\n":{"relativeUrl":"/contribute/access","description":"{/* 라이브러리의 기여자와 사용자에게 접근성에 대한 우리의 약속이 무엇을 의미하는가 */} [2019 기여자 회의](https://p5js.org/community/contributors-conference-2019.html)에서, p5js는 접근성포용과 접근성을 향상시키는 새로운 기능만 추가하기로 약속했습니다 노력을 지지하지 않는 기능 요청은 수용되지 않을 것입니다 우리는 장벽을 인식하고 없애고 예방하는 약속합니다 이는 접근성과 참여에 영향을 미칠 수 있는 다양성의 교차[^1] 경험을 고려한다는 것을 의미합니다 이같은 교차 경험은 젠더 인종 민족 성성 언어 위치 등으로 구성됩니다 p5js 커뮤니티 내에서 특권을 가진 사람들의 지속적인 편안함보다 소외된 집단의 요구에 초점을 맞추고 있습니다 모두가 접근성의 의미를 탐색하고 실천하고 가르치는 방법을 배우고 확장적 교차적 연대적 프레임워크를 통해 생각하기로 선택합니다 약속은 p5js의 핵심 가치 중 하나로 [커뮤니티 성명서](https://p5js.org/about/#community-statement)에 기재되어 ## 종류 접근성 향상은 단순히 커뮤니티의 인원을 늘리는 데 맞추지 않습니다 구조적 차별으로 인해 커뮤니티에서 사람들에게 p5js를 접근하기 쉽게 만들려는 약속입니다 p5js가 제공하는 도구와 플랫폼에도 적용되며 리더십의 구성 결정 행동을 포함합니다 속도 성장 경쟁을 중시하는 기술 문화에 저항합니다 집단적 관심의 행위로서 지향성 느림 수용성 책임감을 우선시합니다 여기서의 접근성은 다음과 같은 사람들을 위해 공평하게 만드는 * 영어 이외의 언어를 사용하는 사람들 흑인 원주민 유색인종 민족의 레즈비언 게이 바이섹슈얼 퀴어 성 정체성을 탐색 중인 팬섹슈얼 무성애자 트랜스 젠더플루이드 에이젠더 간성 두 영혼의 여성 외 성적 소수자들 시각장애인 청각장애인deaf 또는 농인Deaf[^2] 장애인/장애를 신경다양인 만성 질병을 사람들[^3] 소득이 낮거나 금융 문화 자본에 접근성이 부족한 오픈 소스와 크리에이티브 코딩에 경험이 없거나 전혀 없는 다양한 교육적 배경을 어린이와 노인을 포함한 모든 연령대의 종류의 기술적 스킬 도구 접근 권한을 종교적 제도적으로 배제되고 역사적으로 과소대표되는 이들의 교차점들 각자의 설명하는 용어의 복잡성을 인식합니다 언어는 미묘하고 진화하며 논쟁의 여지가 목록이 경우를 다루지는 약속과 요구 사항을 명명하고 책임질 있도록 시도하고 ### 예시 다음은 향상을 위한 노력의 예시입니다 문서 자료를 더 많은 언어로 번역하여 제국주의[^4]에서 벗어나는 Rolando Vargas의 [프로세싱Processing 쿠나어 번역](https://medium.com/@ProcessingOrg/culture-as-translation-processing-in-kuna-language-with-rolando-vargas-and-edinson-izquierdo-8079f14851f7/), Felipe Santos Gomes Julia Brasil Katherine Finn Zander Marcela Mancino의 [Pê Cinco 포르투갈어 사용자를 국제화 보급화](https://medium.com/processing-foundation/translating-p5-js-into-portuguese-for-the-brazilian-community-14b969e77ab1/)) 스크린 리더 보조 기술에 지원 개선 Katie Liu의 [p5js에 대체 텍스트alt text 추가](https://medium.com/processing-foundation/adding-alt-text-e2c7684e44f8/), Claire Kearney-Volpe의 [P5 향상 프로젝트](https://medium.com/processing-foundation/p5-accessibility-115d84535fa8/)) 도구가 [웹 콘텐츠 지침(WCAG)](https://www.w3.org/TR/WCAG21/)을 준수하도록 하고 사용자들이 프로젝트에서 이를 따를 노력하기 오류 메시지를 유용한 도움 제공하기 [p5js 친절한 메세지 시스템(FES)](https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md)) 코딩 디지털 아트 영역에서 차별을 받은 공동체들 속 학습자를 멘토링 지원하기 중심의 조직 전략예 ASL 통역 실시간 자막 쉬운 장소으로 이벤트 개최 Access Day 2022](https://p5js.org/community/p5js-access-day-2022.html), [The Web We Want x W3C TPAC 2020](https://medium.com/processing-foundation/p5-js-x-w3c-tpac-bee4c621a053/)) 교육 자료 생성 Adekemi Sijuwade-Ukadike의 [A11y Syllabus](http://a11ysyllabus.site/)) WCAG 지침을 따르고 평이한 사용하며 초심자에 맞춘 작업 보고서 게시 [OSACC 보고서](https://github.com/processing/OSACC-p5.js-Access-Report/)) 유지보수 요청을 받지 기준은 이슈 풀 리퀘스트 템플릿에 반영됩니다 기존 세트를 유지겠다는 의사를 단언합니다 코드베이스의 부분에 속하는 버그든지 상관없이 수정하고 싶습니다 도구의 일관성이 초심자의 향상한다고 믿습니다 요청의 예시는 같습니다 하드웨어 성능이 낮은 성능 프레임 버퍼에 그리기/읽기 API의 일관성 beginShape와 endShape로 호를 만들기 arcVertex 추가 *** 문서를 살아있는 문서'로 생각해 주시기 바랍니다 우선순위를 정하는 것이 의미하는지에 대화를 이어갈 문서가 가치에 대해 이야기를 나눌 커뮤니티에 초대합니다 아이디어나 제안할 있다면 Github에서 이슈로 공유하거나 [hello@p5jsorg]mailtohello@p5jsorg로 이메일을 보내주시기 버전의 성명서는 2023년 소스 컨퍼런스에서 Evelyn Masso Nat Decker Bobby Joe Smith III Sammie Veeler Sonia Suhyun Choi Xin Kate Hollenbach Lauren Lee McCarthy Caroline Sinders Qianqian Ye Tristan Jovani Magno Espinoza Tanvi Sharma Tsige Tafesse Sarah Ciston의 협업을 수정되었습니다 프로세싱 재단 펠로우십의 지원을 III와 Decker가 최종 확정 발표했습니다 [^1] Crenshaw Kimberlé Demarginalizing the intersection of race and sex a black feminist critique antidiscrimination doctrine theory antiracist politics University Chicago Legal Forum 139–167 ISSN 0892-5593 전문은 Archiveorg에서 확인 가능합니다 [^2] 대문자 Deaf는 문화적으로 청각 장애인이거나 장애인 공동체의 일원을 의미하는 반면 소문자 deaf는 앞서 설명된 Deaf 정체성과는 무관히 쓰이는 청각학적 용어입니다 [^3] 장애 내에는 사람 vs 정체성 사이의 선호가 [Unpacking debate over person-first identity-first language in autism community](https://news.northeastern.edu/2018/07/12/unpacking-the-debate-over-person-first-vs-identity-first-language-in-the-autism-community/)와 [I am Disabled On Identity-First Versus People-First Language](https://thebodyisnotanapology.com/magazine/i-am-disabled-on-identity-first-versus-people-first-language/)를 읽어보세요 [^4] 제국주의는 제국주의의 확장과 세계화로 모국어를 희생해가며 영어와 특정 지속적으로 지배 강요하는 말합니다"},"p5.js 레퍼런스에 기여하기\n":{"relativeUrl":"/contribute/contributing_to_the_p5js_reference","description":"{/* 올바른 형식을 사용하여 p5js 레퍼런스 문서를 작성하고 편집하세요 */} p5js에서는 소스 코드에 특별한 형태의 주석을 작성하는 방법을 통해 공식 웹사이트 [레퍼런스](https://p5js.org/reference/) 페이지에서 확인할 수 있는 코드 레퍼런스를 생성합니다 주석reference comments에는 설명 함수의 시그니처매개변수와 반환 값 사용 예제가 포함됩니다 다시 말해 함수 변수의 보여지는 모든 내용은 소스코드와 작성된 만들어집니다 문서에서 우리는 웹사이트에서 레퍼런스가 올바르게 렌더링될 있도록 지정하는 법을 알아보겠습니다 수정하거나 작성할 가이드를 준수해 주시기 바랍니다 ## comments 작동 방식에 대한 간단한 소개 코드를 보면 많은 라인이 주석으로 작성되어 것을 있습니다 다음과 같은 모습입니다 ``` /** * Calculates the sine of an angle `sin` is useful for many geometric tasks in creative coding The values returned oscillate between -1 and as input increases takes into account current angleMode @method sin @param {Number} @return @example function draw { background200 let t = frameCount x y sint + linex circlex describe'A white ball on a string oscillates up down' } sinx pointx series black dots form wave pattern' cost infinity symbol' */ 주석 뒤에는 함수를 정의하는 실제 자바스크립트 코드가 뒤따릅니다 주석은 항상 `/**`로 시작하고 `*/`로 끝나며 시작과 끝 사이의 라인은 `*`로 시작합니다 방식으로 블록 안에 문서로 해석될 것입니다 여러분이 [JSDoc](https://jsdoc.app/)을 접해본 적이 있다면 스타일의 주석이 익숙하게 느껴질 p5js는 JSDoc을 사용하는 것은 아니지만 JSDoc과 매우 유사한 문법을 가진 [YUIDoc](https://yui.github.io/yuidoc/)을 사용하고 주석에서는 블록이 더 작은 개별 요소로 나뉘어 집니다 이제부터 요소들을 자세히 앞서 보았던 블록을 살펴보고 섹션이 역할을 하는지 알아봅시다 작성한 내용이 [`sin()`](https://p5js.org/reference/#/p5/sin/) 페이지에서는 보여지는지 비교해보세요 주석의 맨 위에는 설명이 텍스트로 설명에는 마크다운 구문과 HTML이 포함될 있어요 설명은 간결하게 작성되어야 하며 필요하다면 특이사항이나 세부 내용을 추가하여 함수가 일을 최대한 잘 설명해야 합니다 함수에 위 세 개의 섹션을 포함하는데 `@` 기호 뒤에 중 하나의 키워드가 따라옵니다 `@method`는 이름을 정의할 사용합니다 예시에서 이름은 `sin`입니다함수 이름에는 괄호 ``가 포함되지 않는다는 점을 주의하세요 `@param`은 받는 매개변수나 인자argument를 `@param` 키워드 중괄호 `{}`가 감싸고 부분은 매개변수의 타입을 의미합니다 타입 나오는 단어는이 예시의 이름 나머지 매개변수를 설명하는 부분입니다 `@return`은 값을 `@return` 값의 매개변수는 따라야 {type} name Description here 매개변수가 선택 사항optional parameter인 경우에는 대괄호로 감싸주세요 [name] ### 알아보기 상수constants 취하는 값이 [`constants.js`](https://github.com/processing/p5.js/blob/main/src/core/constants.js)에 정의된 값들 하나라면 타입은 `{Constant}`로 지정되어야 `either` 키워드와 유효한 값들을 나열해야 예를 들면 같습니다 {Constant} horizAlign horizontal alignment either LEFT CENTER or RIGHT 값은 아래 data 없는 함수라면 태그를 생략해도 됩니다 체이닝chaining 부모 객체를 반환하는 경우라면 생략하고 대신 줄을 추가할 @chainable 추가 시그니처 여러 매개변수 옵션을 가지고 각각을 개별적으로 명시할 들어 [`background()`](http://p5js.org/reference/#p5/background/) 함수는 다양한 지원하고 있습니다background 문법 확인해 보세요 먼저 옵션 하나를 선택하여 살펴본 형식에 첫 번째 시그니처에 작성합니다 끝나면 시그니처를 각각의 시그니처는 @method와 태그만 있으며 각자의 범위 내에 예시를 참고해 주세요 background {String} colorstring color possible formats include integer rgb rgba percentage 3-digit hex 6-digit [a] alpha value gray specifies 다중 두 간의 유일한 차이점이 선택적 추가뿐이라면 별도의 만들 필요는 없습니다 가능한 기능의 사용을 제한해주세요 필요 이상으로 복잡하게 있기 때문입니다 변수 지금까지 함수와 상수에 방법에 대해 알아보았습니다 레퍼런스도 비슷한 구조를 따르지만 사용되는 태그가 다릅니다 system variable mouseX always contains position mouse relative to canvas at top-left corner 2-D -width/2 -height/2 WebGL If touch used instead will hold most recent point @property @readOnly // Move across background244 linemouseX describe'horizontal line moves left right with x-position' 블록의 시작 부분에는 있습니다이 예시에서는 `mouseX` 정의하기 위해 `@method` `@property`를 `@property`는 `@params`와 타입과 `@readonly` 태그는 대부분의 변수에 설정되어 사용자에 덮어씌워지지 않아야 함을 내부적으로 나타내기 사용됩니다 예제 추가하기 `sin`과 주석에서 찾아볼 있지만 아직 다루지 않은 `@example` 태그입니다 페이지를 방문할 실행될 곳입니다 [Screenshot reference page red showing only example code section]src/content/contributor-docs/images/reference-screenshotpng 위의 예제를 만들어내는 const c color255 fillc rect15 Sets redValue redc fillredValue rect50 describe Two rectangles edges rectangle yellow one 태그 다음에는 HTML `` 시작되고 뒤따라옵니다 열린 태그와 닫힌 사이에 작성하면 좋은 작성하기 위한 기본 원칙은 단순하고 작게 겁니다 예제는 의미가 있어야 하고 기능이 작동하는지 너무 복잡하지 않게 설명할 예제의 캔버스는 100x100 픽셀의 크기를 가져야 예제와 `setup` 작성되지 픽셀 크기의 회색 배경 캔버스를 만드는 자동으로 래핑wrapping됩니다 모범 사례 스타일에 자세한 여기서 않습니다 스타일 기능에 후에 한 구분해서 비워두고 arc50 PI QUARTER_PI OPEN describe'An ellipse created using arc its top open' describe'The bottom half arc' 실행되길 원하지 않는다면단지 보여주고 싶을 뿐이라면 ``에 `norender` 클래스를 추가해주세요 describe'ellipse 자동화된 테스트 과정에서 않는다면예를 사용자 상호작용이 필요한 경우 `notest` setup createCanvas100 saveCanvasc myCanvas' jpg' 외부 애셋 파일을 사용해야 파일들을 [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets/) 폴더에 넣어두세요이미 해당 존재하는 재사용해도 코드에서 assets/filenameext 경로로 불러와 사용하면 [tint()](http://p5js.org/reference/#/p5/tint/) 참고하세요 `describe`로 캔버스 마지막으로 추가한 예제에 스크린 리더가 읽어낼 설명을 추가해야 `describe`를 사용해서요 매개 변수는 하나입니다 캔버스에서 일이 벌어지고 있는지 간략하게 문자열 하나면 xoff background204 n noisexoff width linen height vertical randomly from right' noiseScale background0 `describe`에 [web accessibility contributor documentation](https://p5js.org/contributor-docs/#/web_accessibility?id=user-generated-accessible-canvas-descriptions)를 지금까지의 설명으로 편집하는 작업에 준비를 마쳤습니다 p5js에는 JSDoc 전문적으로 활용하는 방법이 가지 남아있습니다 방법들은 상황에 유용할 자주 아닙니다 `@private` 속성이나 변수가 비공개private 함수이거나 비공개 변수라면 쓸 기능은 웹사이트의 레퍼런스로 렌더링되지 비공개private로 이유는 라이브러리 자체에 내부 기능을 문서화하기 위해서입니다 아래에 `_start`의 그런 사례입니다 _start calls preload @private p5prototype_start `@module` 관련 태그들 파일 최상단에는 모듈은 p5js에서 다루는 기능들을 그룹화한 것으로 섹션으로 보여집니다 모듈 내부에는 `@submodule` 태그로 추가적인 하위 모듈이 `@for` 모듈과 `p5` 전체 클래스 관계를 정의하여 클래스의 일부라는 효과적으로 나타냅니다 `@requires` 현재 의존하고 있어 임포트되는imported 필수 모듈들을 정의합니다 @module Color @submodule Creating Reading @for p5 @requires core constants 따르는 규칙은 `src/` 폴더 내의 서브폴더가 `@module`이 되며 서브폴더 파일이 `@module`에 속한 `@submodule`이 된다는 새로운 서브폴더나 추가하지 않는 편집할 필요가 `@class` 생성자는 `@constructor` 정의됩니다 형식은 블록으로 방식과 유사하며 정의되어야 클래스에 생성자 있음을 `p5Color` A class Each object stores mode level maxes that were active during construction These are interpret arguments passed object's constructor They also determine output formatting such when saturation called stored internally array ideal RGBA floating normalized calculate closest screen colors which levels Screen sent renderer When different representations calculated results cached performance floating-point numbers recommended way create instance this @class p5Color @constructor {p5} [pInst] pointer {Number[]|String} vals containing green blue channel CSS 생성과 미리보기 리포지토리는 웹사이트를 빌드하고 실행하지 않아도 생성하고 미리 볼 코드의 주석으로부터 생성하기 명령어는 npm run docs 과정을 파일들과 주요 `docs/reference/datajson` 생성됩니다 파일은 웹 사이트에서 렌더링하는데 것과 동일한 경량화 후의 파일입니다 작업을 연속적으로 수행하기 명령어를 실행할 docsdev 변경사항이 생길때마다 렌더링을 업데이트하는 실시간 미리보기live preview 시작합니다변경 후에는 새로고침해야 변경 사항이 나타납니다 이는 특히 브라우저에서 실행 중인 보는데 유용합니다 템플릿 파일들은 `docs/` 저장되어 직접 변경해서는 안됩니다 단 `docs/yuidoc-p5-theme/assets` 추가하는 예외입니다 단계로 시스템에 사항을 알고 싶다면 [JSDoc](https://jsdoc.app/) [YUIDoc](https://yui.github.io/yuidoc/) 레퍼런스와 관련된 이슈issues를 [#6519](https://github.com/processing/p5.js/issues/6519/)와 [#6045](https://github.com/processing/p5.js/issues/6045/)를 [기여자 가이드라인](https://docs.google.com/document/d/1roBu-7s9xspuie3M6EhEokYWc82DZhDNYO2SQiY4k68/edit?tab=t.0#heading=h.627q50vo09fb) 문서도 시작하기에 자료입니다"},"기여자 가이드라인\n":{"relativeUrl":"/contribute/contributor_guidelines","description":"{/* GitHub에서 p5js에 기여하는 데 필수적인 정보 */} 기여자 가이드라인에 오신 것을 환영합니다 문서는 코드를 기여하고자 하는 신규 가지 기술적 단계를 다시 기억하고자 또는 p5js 코드 기여와 관련된 모든 사람을 위한 문서입니다 리포지토리repository 외부에서 기여하려는 경우튜토리얼 작성 수업 계획 이벤트 조직 페이지를 살펴보세요 스튜어드 유지 관리자maintainers는 이슈 풀 리퀘스트를 검토하는 더 유용한 [스튜어드 가이드라인](https://github.com/processing/p5.js/blob/main/contributor_docs/steward_guidelines.md)을 찾을 수 있습니다 긴 종합적인 문서이지만 가능한 단계와 항목을 명확하게 지시하도록 할 것입니다 목차를 활용하여 자신에게 섹션을 찾아보세요 계획된 관련이 없는 경우 건너 뛰어도 괜찮습니다 **새로운 기여자인 첫 번째 섹션 이슈Issue에 대해 알아보기로 시작하는 것이 좋습니다 개발 프로세스의 단계별 설정만 필요한 개발자를 빠른 시작 참조하세요** 목차 * [이슈Issue에 알아보기]/all-about-issues/ [이슈Issue란 무엇인가요]/what-are-issues/ [이슈 템플릿Issue Templates]/issue-templates/ [버그 발견]/found-a-bug/ [기존 기능 향상]/existing-feature-enhancement/ [새로운 요청]/new-feature-request/ [토론Discussion]/discussion/ [p5js 코드베이스 작업]/working-on-the-p5js-codebase/ [개발자를 시작]/quick-get-started-for-developers/ [Github 편집 사용하기]/using-the-github-edit-functionality/ [p5js를 포크하고 포크에서 작업하기]/forking-p5js-and-working-from-your-fork/ Desktop 사용하기]/using-github-desktop/ [git 명령줄command line 인터페이스 사용하기]/using-the-git-command-line-interface/ [코드베이스code base 분석]/codebase-breakdown/ [빌드 설정]/build-setup/ [Git 워크플로우]/git-workflow/ [소스 코드]/source-code/ [단위 테스트]/unit-tests/ [인라인 문서화]/inline-documentation/ [국제화](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#internationalization) [접근성]/accessibility/ [코드 표준]/code-standard/ [소프트웨어 디자인 원칙]/software-design-principles/ [풀 리퀘스트]/pull-requests/ 리퀘스트 생성]/creating-a-pull-request/ 정보]/pull-request-information/ [제목]/title/ [해결]/resolves/ [변경 사항]/changes/ 사항의 스크린샷]/screenshots-of-the-change/ 체크리스트]/pr-checklist/ [리베이스 충돌 해결]/rebase-and-resolve-conflicts/ [논의 고치기amend]/discuss-and-amend/ *** 이슈에 알아보기 p5js의 GitHub 리포지토리줄여서 repo에서 활동의 대부분이 이슈에서 발생하며 이는 여러분이 기여를 여정을 하기 좋은 장소입니다 ## 이슈란 무엇인가 [A cropped screenshot of the library repository only showing contents top right corner A red box is drawn on surrounding Issues tab]src/content/contributor-docs/images/issues-tabpng 이슈는 깃허브 포스트post를 일컫는 보편적인 용어이며 문제에 잘 설명하기 버그 보고 새로운 추가 요청 의견 라이브러리 개발과 될 봇을 포함한 계정을 가진 사람이 코멘트주석를 달 기여자들끼리 리포지토리 내에서 프로젝트 주제에 논의하는 공간입니다 다양한 이유로 이슈가 오픈될 있지만 우리는 보통 소스 코드에 대한 개발에 논의를 위해 이슈를 사용합니다 당신의 디버그 협업자 초대 관련없는 주제는 [포럼 (forum)](https://discourse.processing.com/) 이나 [디스코드 (Discord)](https://discord.gg/SHQ8dH25r9/) 같은 플랫폼에서 상의되어야합니다 이슈인지 곳에 포스트 되어야 하는지 결정할 있도록 쉽게 사용할 있는 템플릿을 만들었습니다 템플릿 템플릿은 스튜어드와 관리자가 이해하고 검토하기 만들어줍니다 해당 제출하고 빠르게 답변을 받을 도와줍니다 [Screenshot an example what issue looks like The title in Warning being logged Safari when using a filter shader 2D mode #6597]src/content/contributor-docs/images/github-issuepng 제기하려면 저장소의 탭으로 이동하고 오른쪽에 New 버튼을 클릭하기만 하면 됩니다 여러 옵션이 제시되며 각각은 템플릿에 해당하거나 질문을 제출할 적절한 위치로 리디렉션됩니다 제대로 된 관심을 가장 연관성있는 옵션을 선택하는 권장합니다 [Cropped repository's page with green button highlighted it]src/content/contributor-docs/images/new-issuepng ### 발견\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml) p5js에서 잘못된 동작이 발생하거나 문서에 설명된 대로 동작하지 않는 경우[이 템플릿](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml)을 사용하세요 스케치sketch 디버깅 중 발생한 문제는 먼저 [Discourse 포럼](https://discourse.processing.org) 질문하세요 채워야 필드가 *가장 적합한 하위 영역은 무엇인가요* - 문제를 식별하고 응답하기 자동으로 \\[라벨label]태그를 지정하여 도와줍니다.([https://github.com/processing/p5.js/blob/main/contributor\\_docs/issue\\_labels.md](https://github.com/processing/p5.js/blob/main/contributor_docs/issue_labels.md)). *p5js 버전* 버전 번호는`` 태그 링크 p5js/p5minjs 파일의 줄에서 이것은 `142` 점으로 구분된 세 개의 숫자로 이루어져 있을 *웹 브라우저 간의 동작을 분리하는 도움이 번호를 찾으려면 사용 중인 브라우저에 아래 표의 지침을 따르세요 Chrome Firefox In address bar navigate to `chrome//version` `aboutsupport` Under menu item choose About *운영 체제* 가능하면 운영 체제 포함해야 합니다 `macOS 125` 일부 버그는 체제의 동작에서 비롯될 *이것을 재현하는 단계* 공유해야 중요한 정보입니다 버그를 재현하기 세부 나열해야 보여주는 기본적인 예제 공유하는 것은 당신이 겪고 재현하고 해결책을 만들기 큰 **재현이 핵심입니다** 템플릿의 많은 필드는 복제하는 목표로 여러분의 스케치 환경과 발견한 재현시킬 방법에 정보를 제공할수록 누구든지 찾기에 쉬워질 입니다 **가능한 한 자세히 설명하고 추상적인 문장을 피하세요** 예를 들어 image function이 작동하지 않습니다이라고 하지 말고 로드된 GIF 이미지를 올바른 크기로 표시하지 않습니다 설명하세요 마주치고 설명하는 방법은 두 가지를 공유한 샘플 코드가 무엇을 기대하는지 예상되는 동작 실제로 작동하는지 실제 방금 보고한 수정하고 싶다면 설명란에 그렇게 표시할 후 설명한 수정할 것인지 간단한 제안을 제공할 이렇게 지원이 필요한지를 알 **이슈가 승인되지 않거나 승인이 이루어지기 전에 이슈와 제출하거나 변경 작업을 시작해서는 안됩니다** 제안된 수정이 수락되지 않을 완전히 접근 방식이 필요할 있거나 문제가 있기 때문입니다 수정 나기 제출된 리퀘스트는 날 때까지 닫혀있을 것입니다closed 수정을 승인된 이슈에는 적어도 명의 [영역 관리자](https://github.com/processing/p5.js#stewards)의 승인을 받아야 시작할 향상\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Enhancement\\&projects=\\&template=existing-feature-enhancement.yml) 기존 기능함수 상수 렌더링 등에 사항 제안 추가를 `color` 함수 색상을 받아들이는 함수에 색상 정의 방법을 추가하는 경우에는 사용해야 템플릿에는 필드를 입력해야 *접근성향상* -이 필수 향상을 통해 p5js가 창작 예술이나 기술 분야에서 역사적으로 소외된 사람들에게 \\[접근성 향상] ([https://github.com/processing/p5.js/blob/main/contributor\\_docs/access.md](https://github.com/processing/p5.js/blob/main/contributor_docs/access.md) 시킬 설명을 넣는 곳입니다 **이것없이는 제안도 않습니다** 확실하지 않음을 기입하고 그들이 접근성을 다루는지에 아이디어가 있다면 커뮤니티의 구성원들이 논점을 제안할 우리가 해결하는데 [라벨](https://github.com/processing/p5.js/blob/main/contributor_docs/issue_labels.md)을 지정할 *기능 향상 사항* 제안에 작성하는 제안에는 종종 향상이 필요한지에 명확한 사례가 포함됩니다 제안이 승인되기 위해서는 1명의 필요합니다 **이슈에 제안과 수락될 것임을 보장할 없기 주어질 닫힙니다closed 요청\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Feature+Request\\&projects=\\&template=feature-request.yml) 기능을 제안하려는 경우에 `createTable`함수를 사용하여 HTML `` 요소를 그리는 제안은 기존의 중복될 있으며 적합하다고 생각되는 선택하면 양식 향상의 필드와 동일합니다 채워 넣어야 하는지에 자세한 내용은[이전 섹션]#existing-feature-enchancement을 참조해주세요 최소 2명의 관리자](https://github.com/processing/p5.js#stewards) **제안이 모든풀 [\"토론(Discussion)\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Discussion\\&projects=\\&template=discussion.yml) 제출 위의 것에도 맞지 사용됩니다 실제로는 템플릿에도 드물어야 특정 웹 API 채택할지에 토론은 요청](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#new-feature-request); 제출해야 추가적인 모드를 것에 토론은[기존 향상](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#existing-feature-enchancement); 주최하는 지역 크리에이티브 코딩creative coding 이벤트에 발표는 포럼에 게시하고 지원이나 홍보를 원한다면 Processing Foundation에 연락해야 토론 오픈할 측면 패널의 라벨 패널을 관련 라벨을 추가하여 영역으로 알릴 자체는 최소한의 텍스트 필드만 예시 보려면 [이 링크](https://github.com/processing/p5.js/issues/6517/)를 확인하세요 [**⬆ back top**]#contributor-guidelines 작업 사전 요구 계속 진행 하려면 명령줄 git nodejsv18 최소한으로 숙지하고 로컬 환경을 설정해야 소개 이제 논의되었고 구현이 승인되었으며 변경을 준비가 되었습니다 기반 마찬가지로 발견했거나 토론에 참여했으며 스튜어드에 승인되었지만 원래 문제 작성자나 구성원 작업할 의사가 없음을 표시한 자발적으로 여기에 스튜어드가 할당하도록 **다른 사람의 차례를 어기면 안 됩니다** 의향을 표시하거나 이미 사람에게 할당되어 리퀘스트을 제출하여 대기열을 넘어서는 안됩니다 항상 선착순 우선시할 누군가가 아직 동일한 PR을 제출하면 닫힐 할당된 개인의 마지막 활동이 없었다면 공손한 코멘트를 남겨 상황을 묻고 구현에 필요한지 물어볼 대부분 사람들이 작업하는 시간이 소요되기에 이바지함에 \u001d긴 시간을 허용합니다 당신은 자신의 속도로 일하고 오래 작업에 할애할 있는지에 엄격한 제한이 없다는 자신감을 가질 필요가 기여의 측면에서든 발생하면 도움을 요청하는 주저하지 마십시오 관리자뿐만 아니라 커뮤니티 회원들도 최선을 다해 안내할 가이드 p5js의🌸 코드베이스code base에 작업/기여를 원하는 p5js를 직접 개선하거나 [친숙한 오류 메세지 시스템](https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md)과 프로젝트를 개선하기 수행할 [p5js의 포크를 생성합니다.](https://docs.github.com/en/get-started/quickstart/fork-a-repo/) [생성한 컴퓨터에 복제합니다.](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository/) [다음 명령을 업스트림upstream을 추가합니다.](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/configuring-a-remote-repository-for-a-fork/): ``` remote add upstream https://github.com/processing/p5.js [NodeJs](https://nodejs.org/en/download/) 설치되어 있는지 확인하십시오 명령어를 확인할 node -v 입력하여 라이브러리를 설치하세요 npm ci 다음과 설명적인 브랜치 이름을 `main` 브랜치에서 브랜치를 만들어 주세요 checkout -b [branch_name] 코드베이스를 변경하기 시작하면 자주 테스트를 실행하세요 작업은 걸리지만 손상되지 않는지 확인합니다 test 추가하거나 단위 추가합니다 작업이 완료되면 사항을 커밋하고 리퀘스트](https://p5js.org/contributor-docs/#/./contributor_guidelines?id=pull-requests)를 생성할 인터페이스상 파일 내용 상단에 연필 아이콘 버튼이 버튼은 제공하는 기능으로 파일을 빠르고 간편하게 편집할 file view src/color/color\\_conversionjs arrow pointing pencil icon side image]src/content/contributor-docs/images/edit-filepng 매우 단순한 외에는 사용하는 권장되지 이에 주요 이유 하나는 코드의 보다 복잡한 리퀘스트로 제출되기 로컬에서 구축하고 테스트해야 기능에서 환경보다 유연하게 경우가 많기 포크fork에서 작업하기 단계는 리포지토리repository를 포크하는 포크fork는 오픈 소스에서 특정한 의미를 가지고 여기서는 리포지토리의 사본을 생성하여 계정에 저장하는 의미합니다 리포지토리를 포크하려면 페이지 상단 근처에 포크fork GitHub가 복사본을 만듭니다 main labeled fork and Fork 593k outlined dark orange]src/content/contributor-docs/images/forkpng 리포지토리에 쓰기 액세스 권한이 없을 가능성이 높기 작업해야 하며 작업하면 변경한 나중에 공식 Desktop은 터미널에 입력하는 대신에 그래픽 사용자 인터페이스를 git을 프로그램입니다 git에 익숙하지 않은 옵션이며 때마다 Desktop과 terminal 사이를 자유롭게 전환할 [GitHub Desktop을 다운로드하고 설치](https://desktop.github.com/)합니다. 설치가 응용 프로그램을 엽니다 계정으로 로그인하라는 메시지가 나타납니다 로그인한 후에는 포크한 포함하여 목록이 표시됩니다 포크인 `yourUsername/p5js`를 선택하고 파란색 Clone 클릭합니다 저장할 위치에 요청할 이를 변경하거나 기본 설정을 유지한 채로 계속할 [The user interface after signing On half screen it lists your projects bottom right]src/content/contributor-docs/images/github-desktop-initpng 복제가 되면 사용할지에 상위 프로젝트에 기여할 계속Continue을 cloning It asks if you are planning contribute parent project or use for own purposes]src/content/contributor-docs/images/github-desktop-forkpng `git` 사용하기 포크가 생성되면 포크 페이지로 이동하여 초록색 Code 클릭해서 URL을 복사하세요 `https://github.com/limzykenneth/p5.js.git` 모양이어야 list files landing orange outline]src/content/contributor-docs/images/code-buttonpng 환경에서 명령줄로 저장소를 클론하세요 클론Clone은 단순히 저장소와 장치로 다운로드하는 폴더를 저장하고 싶은 폴더에서 clone [git_url] 위에서 복사한 `[git_url]`자리에 작성하세요 과정은 인터넷 연결 속도에 분 정도 걸릴 있으니 커피 잔을 내리면서 기다리는 것도 좋을 같아요 과정이 선호하는 에디터에서 다운로드한 `p5js` 열고 내용을 살펴볼 분석 폴더 안에 파일과 폴더는 같습니다 `src` 최종적으로 p5js와 p5minjs 파일로 결합되어 위치하는 [`test`](https://github.com/processing/p5.js/blob/main/contributor_docs/unit_testing.md) 테스트와 문서 예제를 테스트하기 `tasks` 세밀하게 맞춤화된 빌드 위치한 `Gruntfilejs` 구성 파일입니다 `contributor_docs` 기여자들이 작성한 문서를 비롯한 파일이 폴더들은 파일이나 종류의 지원 파일일 뿐입니다 대부분의 없습니다 설정 시작하기 빌드하고 테스트할 odejs가 있다는 가정하에 다음을 npm이 의존성dependency을 다운로드해야 그게 다입니다 설정이 완료되었습니다 꽤 간단하죠 Git 워크플로우 부분과 내용은 아래의 참고해보세요 처음부터 실행해보세요 에러없이 완료되어야 테스트 없이 라이브러리만 run build 명령어 사용하더라도 `lib/`폴더 `p5js`와 `p5minjs`로 라이브러리가 빌드됩니다 빌드된 파일들을 테스트에 만드는 git에서 브랜치는 이름에서 있듯이 `main`이나 브랜치에 영향을 주지 않고 커밋을 추가할 분기된 버전입니다 있게 해줍니다 독립된 식으로요 망쳐도 Desktop에서 현재 커밋하려면 완료한 앱을 열어야 왼쪽 사이드바에 표시되고 내의 구체적인 사항이 창 하단 모서리에 옆의 입력란에는 간략하고 개괄적인 이것이 커밋의 제목이 설명 입력란은 커밋에 작성하거나 그냥 비워둘 Commit 눌러 확정하세요 branch selection After entering new name that does not yet exist Create Branch appears]src/content/contributor-docs/images/github-desktop-create-branchpng 터미널에서 `git branch_name`을 실행하고 `branch_name`을 설명할 이름으로 바꾸면 별도의 진행하면서 특히 `npm test`를 실행하는 데는 해치지 아래에 커밋하기 실행해야 코드베이스codebase에 완료했다면 커밋해야 커밋은 저장된 모음으로 커밋 시점의 내 상태를 기록합니다 궁금하시죠 모으기보다는 커밋하는 문장으로 완료할 입력란에 고급 입력합니다 기술하거나 having made change area where need write circled lower left window]src/content/contributor-docs/images/github-desktop-commitpng 확인하려면 status 변경하지 뜬다면 상태로 [복원](https://git-scm.com/docs/git-restore/)해야 하거나 의도한 사항인지 확인해야 입력하세요 diff 리퀘스트PR Pull request에 포함시키지 않으려는 사항은 커밋해서는 명령어로 사항에 스테이징커밋으로 저장하다하세요 commit -m [your_commit_message] `[your_commit_message]`는 메세지로 대체해야 일반적인 문구는 피해주세요 `Documentation fix 1` 대신 `Add documentation circle function`와 적어주세요 Add function 위 반복하면서 주기적으로 실행하여 Source code 계획을 하고 알고 방법 문서Documentation를 방문하는 문서의 하단에는 링크가 reference website containing sentence Notice any errors typos Please let us know feel free edit src/core/shape/2d\\_primitivesjs pull request Part above says underline it]src/content/contributor-docs/images/reference-code-linkpng Unit tests 계획이라면 [여기](https://github.com/processing/p5.js/blob/main/contributor_docs/unit_testing.md)를 참조하세요 개선 수정에 대해서는 구현implementation을 커버하는 테스트가 리퀘스트에 포함되어야 한다는 점을 유의하세요 인라인 Inline 계획하고 [여기](https://github.com/processing/p5.js/blob/main/contributor_docs/inline_documentation.md)를 접근성 Accessibility 기능에 [여기](https://github.com/processing/p5.js/blob/main/contributor_docs/web_accessibility.md)를 친절한 에러 시스템에 [여기](https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md)를 표준 스타일은 [ESLint](https://eslint.org/)에 시행됩니다 커밋commit과 리퀘스트pull request는 linting프로그래밍 오류를 찾아내는 과정을 통과해야만 받아들여집니다 코딩 표준을 따르는 쉬운 에디터용 ESLint 플러그인을 사용하고 리팅linting 하이라이팅대부분 에디터용으로 제공됨을 활성화하는 소프트웨어 원칙 원칙을 염두에 두는 중요합니다 우리의 우선순위는 프로젝트의 우선순위와 다를 잇으므로 프로젝트에서 오는 원칙에 익숙해지는 **접근성** 무엇보다 우선시하며 내리는 결정은 그룹에 늘릴지 고려해야 선언문에서 읽을 **초보자 친화적** API는 초보자에게 친화적을 최신 HTML5/Canvas/DOM API를 인터랙티브하고 시각적인 콘텐츠를 낮은 장벽을 제공합니다 **교육적** p5js는 교육적 사용을 지원하는 API와 커리큘럼에 중점을 두고 API에 완전한 참조와 지원하고 창의적 명확하고 몰입도 순서를 소개하는 튜토리얼과 커리큘럼을 포함합니다 **자바스크립트와 커뮤니티** 자바스크립트 패턴과 사용법을 모델링하면서 곳에서는 추상화함으로써 관행을 접근하기 라이브러리로서 문서화 전파 과정의 넓은 커뮤니티를 **프로세싱과 프로세싱 언어와 커뮤니티에 영감을 받았으며 자바에서 자바스크립트로의 전환을 쉽고 위로 올라가기**]#contributor-guidelines requests PR 변경사항을 테스트까지 마친 후해당할 test` 오류가 발생하지 커밋했다면 저장소로 새 병합하기 준비할 공식적으로 저장소예를 저장소에 저장소로부터의 히스토리로 병합하거나 당겨오도록 생성 푸시하는 포크로 업로드하는 것으로 생각하세요 갓허브 데스크탑GitHub Desktop애서는 변경하는 버튼 깃허브에 클릭하여 푸시하세요[A committing changes push online red]src/content/contributor-docs/images/publish-branchpng 업로드되면 생성하라는 번 클릭하면 미리보기와 요청을 생성하는 Request 시작합니다 Github pushing sidebar changed items pane below No local header blue Review has been marked up circle]src/content/contributor-docs/images/preview-pull-requestpng -u origin 푸시가 열 표시될 브라우저에서 이동할 없다면 목록 상단의 드롭다운 버튼으로 브랜치로 전환한 Contribute를 클릭하고 Open request를 클릭하세요 command response includes link open request]src/content/contributor-docs/images/new-branchpng 방문할 버튼도 볼 수도 web section near yellow call action text Compare request]src/content/contributor-docs/images/recent-pushespng prepopulated p5js's template]src/content/contributor-docs/images/new-prpng 제출하기 작성해야 제목 제목은 간략하게 설명해야 여기서 지양해야 해결 템블릿에는 `Resolves #[Add number here]`라는 문구가 있는데 `[Add here]` 부분을 수정하려는 [above](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#all-about-issues) eg #1234` 번호로 변경해야 리퀘스트가 병합된 닫히게 닫고 싶지 않다면아마도 리퀘스트에서 변경사항으로 올 것이기 `Resolves` `Addresses`로 변경하세요 진행한 구현 사항과 결정 검토review할 추가하세요 스크린샷 상황에 선택적이며 캔버스에 시각적 렌더링하는 방식과 편집기의 스크린샷이 스케치의 스크린샷임을 유의해주세요 체크리스트 변경사항과 항목이 해당하는 `[ ]`를 `[x]`로 변경해주세요 request을 리베이스 Fix shaders rectMode applied #6603]src/content/contributor-docs/images/opened-prpng 오픈된 검토하고 사항들을 주의해주세요 수는 작업한 수와 일치해야 Commits 탭에는 단 커밋만 표시되어야 Files 탭은 비교하여 변경사항만을 보여주어야 부근에 This no conflicts branch라고 must be resolved라고 표시되어서는 사실이 아니라면예상했던 것보다 커밋이 충돌이 [rebase](https://git-scm.com/book/en/v2/Git-Branching-Rebasing/)를 진행하거나 충돌을 해결해야 충돌이란 최근에 변경사항이 적용된 파일에 진행하였으나 깃git에서 변경사항 묶음을 유지할지 제외할지 확정하지 못한 해결하는 어려움이 저희에게 알려주시면 안내해 드리겠습니다 지침은 가끔 깃허브는 Resolve Conflicts 보여주면서 해결할 합니다[A merge conflicting filenames listed there highlighted]src/content/contributor-docs/images/resolve-conflictspng `>>>>>>` 사이에 표시되며 `=======`으로 구분됩니다 부분은 보여주고 쪽 부분에는 메인 변경된 보여줍니다 GitHub's conflict resolution contains markers highlighted]src/content/contributor-docs/images/conflicts-interfacepng 표시를 제거하고 포함될 최종 코드만 남겨둡니다 해결되었을 Mark as resolved를 클릭할 editing remove mark resolved upper enabled]src/content/contributor-docs/images/mark-as-resolvedpng 해결되면 커밋할 all have enabled]src/content/contributor-docs/images/commit-mergepng 깃허브의 인터페이스에서 표시하기에는 너무 수동 방식을 선호한다면 https://github.com/processing/p5.js` fetch upstream` rebase upstream/main` 발생했을 lib/p5js와 lib/p5minjs 파일에서만 발생했다면 해결하기 쉽습니다 빌드하기만 파일에서 발생했고 확실히 모르겠다면 요청하세요 --continue push` 체크 리스트는 단계들을 거친 후에 해결될 않다면 논의 고치기amend 열리면 스튜어드나 검토할 답변할 있기까지 며칠이 조금만 기다려주세요 그동안 이슈들을 확인해 보는 어떨까요 검토한 하나가 발생할 승인되어 병합됩니다 축하합니다 후자의 경우라도 당황하지 마세요 정상적인 과정이며 스튜어드는 완성할 돕기 리퀘스트의 요청되었고 진행할 [이전과 과정](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#git-workflow)를 따르되 복사본 계속해서 진행하고 커밋한 포크된 원격 푸시하세요 푸시하면 검토자에게 요청된 진행했다는 알리기 댓글을 남기세요 필요하지 PR은 병합merge될"},"새로운 라이브러리 생성하기\n":{"relativeUrl":"/contribute/creating_libraries","description":"p5js 라이브러리는 p5js의 핵심 기능을 확장하거나 추가하는 모든 자바스크립트 코드가 될 수 있습니다 라이브러리에는 두 가지 범주가 코어 라이브러리DOM Sound는 배포의 일부이며 기여된 커뮤니티의 구성원이 개발 소유 유지 관리합니다 여러분이 라이브러리 하나를 만들고 있고 [p5js.org/libraries](https://p5js.org/libraries/) 페이지에 포함하고 싶다면 [이 폼](https://docs.google.com/forms/d/e/1FAIpQLSdWWb95cfvosaIFI7msA7XC5zOEVsNruaA5klN1jH95ESJVcw/viewform/)을 제출해 주세요 자바스크립트를 작성하고 사용하는 방법에는 여러 가지가 있으므로 저희는 작업을 여러분에게 맡기도록 하겠습니다 다음은 라이브러리가 잘 동작하도록 하기 위한 참고 사항입니다 ## 코드 ### p5prototype에 메소드를 추가하여 p5 확장 할 예를 들어 domjs의 코드는 DOM에 [HTMLImageElement](https://developer.Mozilla.org/en-US/docs/Web/API/HTMLImageElement/)를 `createImg`메소드를 추가하기 위해 p5를 확장하는 것입니다 ```js p5prototypecreateImg = function src { const elt documentcreateElement'img' //const new Image // 위에 1행보다 더 짧게 대체 eltsrc return addElementelt this } ``` DOM 프로젝트에 포함되면 `createImg`는 `createCanvas` 또는 `background`와 호출 내부 helpers를 private 함수 사용하기 사용자에 호출되지 않을 목적의 함수를 의미합니다 위의 예제의 `addElement`는 [dom.js](https://GitHub.com/processing/p5.js/blob/main/src/dom/dom.js)에서 입니다 `p5prototype`에는 공개적으로 바운드 되지 않았습니다 프로토타입에 클래스를 아래 예제에서 `p5Elementprototype`은 `html` 메소드와 확장되어 엘리먼트의 html을 설정합니다 p5Elementprototypehtml html thiseltinnerHTML //thiselttextContent //innerHTML보다 안전한 대안 preload에서 있도록 p5에 메소드 이름을 등록하려면 registerPreloadMethod를 이용하세요 소리 이미지 외부 파일 로딩과 같은 일부 비동기 기능에는 동기 옵션이 제공됩니다 `loadStringspath [callback]` 은 두번째 매개변수로 선택적으로 콜백 허용합니다이 함수는 loadStrings 함수가 완료된 후 호출됩니다 사용자는 콜백함수 없이 `preload`에서 loadStrings를 있으며 p5js는 `preload`의 작업이 완료 때까지 기다렸다가 `setup`으로 이동합니다 등록하고 등록하고자 하는 메소드명과 `registerPreloadMethod`를 호출하고 프로토타입 객체를 ~~기본값은 p5prototype~~ 포함하여 메소드에 전달합니다 예제는 soundfilejsp5sound 라이브러리에 `loadSound`를 등록하는 행 보여줍니다 p5prototyperegisterPreloadMethod'loadSound' p5prototype *callback* **preload** 대한 함수의 예제 preload 콜백과 p5prototypegetData callback 함수에서 데이터를 복제하고 반환할 만듭니다 덮어쓰거나 재할당하지 않고 업데이트해야 합니다 preload가 원래 포인터/레퍼런스를 유지하는 것이 중요합니다 const로 변수를 선언하면 실수로 재할당하는 경우를 방지해 줍니다 ret {} 작업할 일부입니다 loadDataFromSpacefunction data 데이터의 프로퍼티들을 반복합니다 for let prop in ret의 프로퍼티들로 설정복제합니다 전달받은 빈 업데이트합니다 객체로 ret을 재할당할 수는 없습니다 콘텐츠를 데이터로 ret[prop] data[prop] 콜백이 함수인지 아닌지 확인합니다 if typeof == function' callbackdata 실행 채워진 반환합니다 ***p5*** 여러번 호출되는 **registerMethod** 사용하세요 p5prototypedoRemoveStuff 제거하는 p5prototyperegisterMethod'remove' 등록 수있는 이름은 다음과 같습니다 등록하기 전에 먼저 정의해야 * **pre** — `draw` 시작 시 드로잉에 영향을 줄 **post** 끝에 **remove** `remove`가 호출되면 **init** 스케치가 처음 초기화 스케치 함수`p5` 생성자로 전달 된 것가 실행되기 전역 모드 설정 호출되기 여러분의 스케치에 무엇이든 추가 모드가 활성화되어 있으면 자동으로 `window `에 복사됩니다 목록을 대략적으로 정리하면 [https://GitHub.com/processing/processing/wiki/Library-Basics#library-methods](https://GitHub.com/processing/processing/wiki/Library-Basics#library-methods) 여러분만의 생성 전혀 확장하지 대신에 인스턴스화하고 라이브러리와 연계하여 사용할 있는 제공할 다 혼합 작명 **p5 덮어 쓰지 않아야 합니다** p5prototype을 때는 기존 프로퍼티 함수명을 사용하지 않도록 주의해야 [hasOwnProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty/) 사용하여 확인해 볼 들면 맨 위에서 행을 추가하면 이미 `rect` 메소드가 존재하기 true 출력할 consolelogp5prototypehasOwnProperty'rect' **위와 유사하게 클래스 않아야합니다** p5Image p5Vector p5Element 등을 경우 위와 동일한 프로토콜을 따라야 **p5js는 모드와 인스턴스 이렇게 있습니다** 모드에서 속성과 메서드는 window 객체에 바인딩되므로 접두사 `background` 메서드를 기본 콘솔에 빠르게 Google 검색으로 JS 이름들이 존재하는지 테스트 해 **일반적으로 클래스는 대문자로 표시되며 메서드와 프로퍼티들은 소문자로 시작합니다** p5의 클래스들은 앞에 p5가 붙습니다 네임스페이스를 클래스에만 붙이려고 직접 만들 **클래스명에 접두사로 포함하지 고유한 접두사나 접두사가 없는 이름으로 생성해 **p5js 이름에도 붙지만 단어는 소문자**로 클래스와 구별됩니다 p5soundjs가 지정하려면 형식을 따라주세요 패키징하기 **라이브러리가 포함 단일 파일을 만듭니다** 사용자가 쉽게 라이브러리를 연결할 빠른 로딩을 일반 파일과 [최소화된](http://jscompress.com/) 버전 모두에 옵션에 대해 고려 **기여된 제작자가 호스팅 문서화 관리합니다** 라이브러리들은 GitHub 별도의 웹 사이트 어딘가에 있을 **문서가 핵심입니다** 문서는 찾아보고 다운로드 하여 곳에 있어야 레퍼런스에 포함되지 않지만 유사한 따르고 싶을 수도 [라이브러리 개요 페이지](http://p5js.org/reference/#/libraries/p5.sound), [클래스 페이지](http://p5js.org/reference/#/p5.Vector) [메소드 페이지](http://p5js.org/reference/#/p5/arc/) 예제를 참조하세요 **예제가 좋습니다** 사람들에게 일을 보여주세요 자바스크립트이므로 사람들은 다운로드하기 전 온라인에서 되는 것을 예제들을 호스팅하기 쉬운 [jsfiddle](http://jsfiddle.net/) [codepen](http://codepen.io)이라는 두가지 좋은 **알려주세요** 배포 준비가 되면 [hello@p5jsorg]mailtohello@p5jsorg로 링크와 정보와 보내주세요 페이지](http://p5js.org/libraries/)에"},"p5.js 친절한 에러 시스템(Friendly Error System, FES)\n":{"relativeUrl":"/contribute/friendly_error_system","description":"## 개요 FES는 학습을 시작할 일반적인 사용자 오류를 겪는 새로운 프로그래머를 돕도록 설계되었습니다 시스템은 시작 잡아내고 사용자가 해결하도록 명확한 표현과 링크를 제공합니다 막 마주칠 수 있는 함수에만 적용됩니다 서버를 실행하지 않고 파일을 로드한다거나 URL로 loadImage 함수를 호출하는 등의 특히 문제는 예외입니다 FES의 목표는 종종 암호화된 콘솔 보완하기 위해 이해하기 쉬운 오류 메시지를 생성하는 것입니다 예를 들어 자바스크립트는 기본적으로 파라미터의 타입 검사를 지원하지 않기 경험이 없는 자바스크립트 개발자는 파라미터 입력 시 발생하는 에러를 발견하기가 더욱 어렵습니다 FES 메시지는 우리가 이해할 보통의 언어로 되어 있고 문서로도 연결되며 초보자 수준으로 작성되었습니다 오류들은 p5js를 통해 여러 파일에서 발생하지만 대부분의 작업과 작성은 `src/core/friendly_errors`에서 일어납니다 `p5js`에서는 FES가 활성 상태이고 `p5minjs`에서는 비활성 상태입니다 FES를 비활성화 하려면 `p5disableFriendlyErrors = true` 설정하면 됩니다 종류의 감지하고 출력할 있습니다 `validateParameters`는 인라인 문서 기반으로 함수의 파라미터를 점검합니다 `friendlyFileLoadError`는 파일 로딩 잡아냅니다 두 검사는 기존의 선택된 p5 함수에 통합되었지만 `p5_validateParameters` 호출하여 더 많은 함수나 자체 라이브러리를 추가할 유용한 얻기 함수에서나 `friendlyError`를 호출할 `helpForMisusedAtTopLevelCode`는 윈도우 로드 호출되며 setup이나 draw 외부에서 p5js 사용할 있는지 확인합니다 자세한 기술 정보는 [src/core/friendly\\_errors/fes\\_core.js](https://github.com/processing/p5.js/blob/main/src/core/friendly_errors/fes_core.js)에서 메모를 참고하세요 ### `core/friendly_errors/file_errors/friendlyFileLoadError` * 함수는 파일이 올바로 로드되지 않으면 친절한 생성하고 표시합니다 로드하기에는 너무 큰지 확인해서 경고를 생성하기도 합니다 이것은 다음과 `p5_friendlyFileLoadErrorERROR_TYPE FILE_PATH` 예시 ```javascript /// 폰트 누락 let myFont function preload { loadFont'assets/OpenSans-Regularttf' } setup fill'#ED225D' textFontmyFont textSize36 text'p5*js' {} 콘솔에 다음의 메시지가 생성됩니다 > 폰트를 로드하는 데 문제가 같습니다 경로 [assets / OpenSans-Regularttf]가 올바른지 온라인 호스팅하는지 또는 로컬 서버가 실행 중인지 확인하십시오 ``` 현재 버전에는 `image` `XML` `table` `text` `json` `font`에 대한 템플릿이 포함되어 `image/loading_displaying/loadImage` `io/files/loadFont` `io/files/loadTable` `io/files/loadJSON` `io/files/loadStrings` `io/files/loadXML` `io/files/loadBytes`에 구현되었습니다 크기가 커서 중 생기는 오류는 loadX 메소드에 `core/friendly_errors/validate_params/validateParameters` `docs/reference/datajson`에 정보와 일치하는지 검증을 실행합니다 함수 호출이 올바른 개수와 파라미터형을 가지고 arc1 ptjs arc 4번째 자리인덱스는 0부터 시작에 빈 값이 들어온 의도한 것이 범위의 문제입니다 [https://p5js.org/examples/data-variable-scope.html]. [http://p5js.org/reference/#p5/arc] 5번째 자료형 arc'1' MathPI pie' p5jsarc 0번째 자리에는인덱스는 시작에는 숫자가 들어와야 하는데 문자열이 들어왔습니다 `p5_validateParametersFUNCT_NAME ARGUMENTS` `p5prototype_validateParametersFUNCT_NAME 는 검증이 필요한 내부에서 씁니다 목적으로는 사용하는 좋습니다 은 주로 디버깅이나 단위 테스트 목적으로 사용합니다 `color/creating_reading` `core/2d_primitives` `core/curves` `utilities/string_functions` 함수로 구현되어 추가 기능 p5와 디버거로 개발자들을 환영합니다 IDE와 웹 에디터에서 동작합니다 개발자 유의사항 객체를 생성할 파라미터로 사용될 모든 객체는 클래스 선언부에서 `name` 파라미터오브젝트의 이름 값을 지정해야 들면 p5newObject functionparameter thisparameter 파라미터' thisname p5newObject' 허용되는 타입은 `Boolean` `Number` `String` 객체의 이름위의 주요 항목 참고입니다 유형에 배열 파라미터에는 `Array` 쓰세요 경우 특정 타입의 파라미터가 허용되는지예시 `Number[]` `String[]` 설명 섹션에 적습니다 지원되는 이렇습니다 가집니다 `p5Color` `p5Element` `p5Graphics` `p5Renderer` `p5Renderer2D` `p5Image` `p5Table` `p5TableRow` `p5XML` `p5Vector` `p5Font` `p5Geometry` `p5Matrix` `p5RendererGL` p5js에서 p5minjs에서는 기능이 프로세스 속도를 저하시키지 않도록 비활성화되어 검사 코드를 상당히 느리게 할 있습니다일부 최대 배 성능 테스트를 참조하십시오 [friendly error performance test](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/performance/code/friendly-error-system/). 아래 한 줄의 코드로 p5disableFriendlyErrors true // 설정 작업 이렇게 하면 FES에서 저하를 일으키는 부분인자 확인 같은이 비활성화됩니다 성능에 영향을 주지 않는 부분파일 실패 오류나 전역에서 오버라이드 경고 등은 그대로 유지됩니다 알려진 제한사항 프로그램 늦춥니다 옵션에서 true`를 설정하여 축소 버전`p5minjs`에서는 기본 설정이 비활성입니다 FES에서는 오류가 정상으로 처리되는 상황이 발생할 경우는 보통 함수가 설계된 형태와 실제 방식이 일치하지 않을 생깁니다예시 그리기 원래 2D와 3D 설정에서 서로 바꿔 있도록 라인을 그리면 FES에 잡히지 않습니다 `line` 2D 문서에는 패턴이 허용되기 때문입니다 버전의 `_rendererisP3D` 같은 환경 변수를 확인하지 않는다는 의미이기도 const x3 undefined line0 `const` `var` 사용해 선언할 덮어 쓴 전역 변수만 감지할 `let`을 사용했다면 감지되지 `let`이 인스턴스화하는 방식 현재는 해결이 진행 보다 유형을 식별하고 일반화합니다 `bezierVertex` `quadraticVertex` - 필수 초기화하지 않음 `nf` `nfc` `nfp` `nfs` 숫자형 양수 체크 향후 색상 재도입합니다 직관적인 출력합니다 `validateParameters`에 스페인어 번역도 완료합니다 색맹 친화적이 되도록 색상을 정교한 아스키 코드는 언제나 환영입니다 잡습니다 브라우저가 콘솔로 던지는 잡아내면 매우 도움이 될 그것과 일치하는 주석을 볼 코드 조각은 windowconsole 메소드를 기능을 수정하는 새 감싼다 있지 않지만 잘 형식을 갖춘 제공할 있을 것이다 original original_functions log originallog warn originalwarn originalerror [log error]forEachfunctionfunc{ windowconsole[func] functionmsg 래퍼 함수에서 잡아낸 msg'로 무엇인가 처리한 호출하라 original_functions[func]applyoriginal arguments"},"배포 프로세스\n":{"relativeUrl":"/contribute/release_process","description":"## 접근법 * 우리는 `주부수` 버전 패턴을 따르는 유의적 관리 따릅니다 요구사항 Git nodejs NPM이 여러분의 시스템에 설치되어 있어야 합니다 NPM CLI에 로그인 되어 `npm whoami`에 로그인되어 있는지 확인합니다 높은 대역폭 다운로드/풀/푸쉬 할것이 많습니다 총 \\~190MB 예상 사용법 ```shell $ npm run release ``` 빌드 단계가 실행되며 프로세스를 마치려면 `np`에서 제공하는 프롬프트를 따라야합니다 단계에서는 grunt 태스크를 실행해 라이브러리의 zip 버전을 생성하고 bower에서 릴리즈 하고 웹사이트에 해당 레퍼런스를 실제로 일어나는 release`는 [`np`](https://www.npmjs.com/package/np/)를 실행하여 먼저 하위 만들어내는 `grunt release-p5`의 별칭입니다 `np`는 로컬 저장소를 체크하고 릴리즈를 생성하기 위해 설정을 준비하므로써 시작합니다 계속 진행하기 저장소에 커밋이 안된 변경사항이 있으면 안됩니다 `node_modules`를 재설치하고 test`로 테스트를 실행합니다 처음에 선택한 항목에 범프합니다 이전 실패하면 저장소는 release`를 실행하기 전 초기 단계로 돌아갑니다 업데이트된 넘버로 문서와 라이브러리를 빌드하기 `packagejson`안에 `prepublishOnly`에 언급된 태스크가 실행`grunt prerelease` 됩니다 패키지가 게시됩니다 NPM에 출시 `packagejson`에 `files`에 파일들만 태그들과 커밋들을 git remote에 푸쉬됩니다 초안 릴리즈는 수정할 수 있는 변경로그들과 githubcom에 생성됩니다 `lib` 폴더 안에현재 빈 예제가 포함되어 있음 Zip 파일 `p5zip`을 생성하며 위에서 생성한 GitHub Release 초안에 업로드 되어야 프로세스가 완료되면 `release/` 가리키는 창이 열리고 창에는 Github Release의 일부로 업로드해야 하는 모든 파일을 포함하고 있습니다 새로 된 Bower용 [p5.js-release](https://github.com/processing/p5.js-release/) 푸시합니다 참조를 [p5.js-website](https://github.com/processing/p5.js-website/)에 테스팅 대한 푸시 액세스 권한이 경우 release---preview`를 릴리스 간단하게 실행 할 단계를 실행하더라도 추적 파일이 변경되지 않으며 리모트에 푸시되지 않습니다 없는 `packagejson`의 `name` 필드를 네임스페이스 버전으로 편집해야합니다 예를 들면 평소처럼 전에 `@username/p5`을 입력하고 번경사항을 git에 커밋합니다 패키지된 네임스페이스에 패키지를 게시하지 않도록 선택하라는 메시지가 표시되면 온라인에는 아무 것도 게시되지 편집 한 release`로 릴리스의 전체 실행할 잇습니다 Bower 릴리스와 웹 사이트에 복제하고 푸시할 위치를 선택하려며 다음과 추가 인수를 지정 -- --bowerReleaser=username` **참고** `np` `620`에는 현재 패키지 이름으로 릴리스를 막는 [bug](https://github.com/sindresorhus/np/issues/508/)가 존재하며 이것을 테스트해야하는 `521`로 되돌릴 않으면 단계에서 실패합니다"},"스튜어드(Steward) 지침\n":{"relativeUrl":"/contribute/steward_guidelines","description":"{/* p5js에 대한 기여를 관리하고 검토하는 방법에 대해 알아보세요 */} 방금 스튜어드steward로 참여하셨거나 p5js의 숙련된 유지관리자maintainer거나 사이 어딘가에 있으시거나 안내서에는 효과적으로 기여하는 데 도움이 되는 정보는 팁과 요령이 포함되어 있습니다 여기에 작성된 대부분의 내용은 달리 명시되지 않는 한 지침에 불과하므 여기서 보여지는 절차들은 여러분의 작업 흐름에 맞게 조정할 수 ## 목차 * [이슈Issues]/steward_guidelinesmd#issues [버그 보고]/steward_guidelinesmd#bug-report [기능 요청]/steward_guidelinesmd#feature-request 향상]/steward_guidelinesmd#feature-enhancement [토론Discussion]/steward_guidelinesmd#discussion [풀 리퀘스트Pull Requests]/steward_guidelinesmd#pull-requests [간단한 수정]/steward_guidelinesmd#simple-fix 수정]/steward_guidelinesmd#bug-fix [새로운 기능/기능 향상]/steward_guidelinesmd#new-feature-feature-enhancement [디펜다봇Dependabot]/steward_guidelinesmd#dependabot [빌드 과정]/steward_guidelinesmd#build-process [주요 빌드 작업]/steward_guidelinesmd#main-build-task [기타 작업]/steward_guidelinesmd#miscellaneous-tasks [배포 과정]/steward_guidelinesmd#release-process [팁과 요령]/steward_guidelinesmd#tips--tricks [회신 템플릿 Reply templates]/steward_guidelinesmd#reply-templates [깃허브 CLI]/steward_guidelinesmd#github-cli [알림 관리]/steward_guidelinesmd#managing-notifications *** 이슈Issues 우리는 소스 코드 기여가 이슈Issue에서 시작하는 것을 권장하며 이슈는 논의가 이루어지는 곳입니다 문제를 검토할 취해야 할 단계는 문제의 종류에 달라집니다 리포지토리repo는 다양한 유형의 더 잘 정리하고 문제 작성자가 문제에 정보를 제공하도록 권장하기 위해 이슈 템플릿(templates)](https://github.com/processing/p5.js/blob/main/.github/ISSUE_TEMPLATE/)을 사용합니다 첫 번째 종종 입력된 템플릿을 살펴보고 추가 정보가 필요한지 여부를 결정하는 것입니다 일부 필드가 입력되지 않았거나 잘못된 템플릿이 사용되었을 경우 ### 버그 보고 보고는 Found a bug 템플릿template을 사용해야 합니다 보고를 하기 위해서는 다음과 같은 과정이 일반적입니다 재현 템플릿의 목표는 검토자가 버그를 재현할 있도록 충분한 제공하는 보고된 버그가 리포지토리repo와 관련이 없는 p5js 웹사이트 접근 권한이 있다면 연관 리포지토리로 전송합니다 않으면 보고서가 위치할 곳에 답변을 직접 연결되는 링크와 남기고 이슈를 닫습니다 제공되는지 확인하고 제공되는 경우에 설명된 대로 재현을 시도하는 있는 특정 고치는 최선의 방법을 찾기 약간의 필요할 때로는 간단할 수도 있고 까다로울 사례별로 결정을 내릴 때는 [p5js 디자인 원칙]/design_principles/를 참조하세요 수정에 기여할 의향이 코멘트를 남기 이슈에 할당하여 수정을 승인합니다 담당자Assignee 우측에 톱니바퀴 버튼을 사용하세요 기여하기 원하지 가능한지 알아볼 댓글을 남깁니다 해결하려고 시도하거나 해결이 필요한 문제임을 나타내기 `help wanted` 라벨을 추가하여 수정이 표시합니다 템플릿template에 부족하다면 요청합니다 버전 브라우저 OS 테스트 환경이 환경과 또는 환경에서 없다는 의견을 추가하고 설정을 가진 사람에게 버그는 웹 에디터를 사용할 때만 발생하고 로컬에서 테스트할 발생하지 않습니다 [웹 에디터 리포지토리(repo)](https://github.com/processing/p5.js-web-editor/)로 리디렉션해야 나중에 재현이 가능해 2번로 다시 이동합니다 동작이 아니라 사용자가 보고서에 제공한 코드에서 발생한 문서화 구현 친근한 오류 시스템friendly error system을 개선하여 동일한 오류가 않도록 있는지 판단합니다 질문이 있으면 [포럼(forum)](https://discourse.processing.org/) [디스코드(Discord)](https://discord.com/invite/SHQ8dH25r9/) 리디렉션하고 변경사항이 없다면 종결close하세요 기능 요청 요청은 새로운 요청New Feature Request 기능을 요청하기 접근성 향상을 위한 노력의 일환으로 해당 분야에서 역사적으로 소외된 커뮤니티에서 접근성을 높이는 사례가 되어야 자세한 [이 곳]/access/에서 볼 요청에 향상Increasing Access 충분히 않은 작성자에게 기능이 높이는지 질문할 기능의 설명은 검토자를 포함한 커뮤니티의 구성원이 제공할 기준에 포함 평가할 프로젝트 범위와 [디자인 원칙]/design_principles/에 적합한가요 예를 들어 기본 도형을 추가하는 고려될 있지만 기반 IOT 프로토콜 고려 범위에서 벗어날 가능성이 높습니다 전반적으로 범위는 드물게 사용되는 기능으로 인한 과도한 팽창을 피하기 상대적으로 범위가 좁아야 범위에 맞지 애드온 라이브러리addon library로 만들도록 제안합니다 맞는지 불분명한 개념 증명 차원에서 library를 제안하는 것도 좋은 방법입니다 이는 사용자에게 제공하고 쓰임새와 중요성에 구체적인 예시를 제공하며 완전히 통합된 기능처럼 해결책이 완벽할 필요는 없습니다 적합하다고 판단될 내에 통합될 이전 버전과 호환성이 변경breaking changes의 원인이 될 있나요 기존 함수 변수와 충돌이 발생하나요 기존에 p5js로 일반적인 스케치와 충돌하요 위와 충돌을 일으킬 기능들은 변경으로 간주됩니다 배포](https://docs.npmjs.com/about-semantic-versioning/)가 변경을 만들지는 제안된 이미 간단한 순수 자바스크립트 코드나 기존의 사용하기 쉬운 라이브러리를 사용하여 만들어질 문자열 배열을 연결하기 `join[Hello world]`보다는 문법인 `[Hello world]join`가 우선시됩니다 요구 사항과 나머지 사항이 충족된 PR을 시작하기 전에 최소 2명의 스튜어드 유지관리자가 요청을 승인해야 기능에 PR 검토 과정은 아래에 설명되어 향상 향상Existing Enhancement 요청과 매우 비슷합니다 가끔 향상의 차이가 명확하지 않을 향상은 주로 다루지만 추가하도록 요청할 마찬가지로 경우에만 허용됩니다 [위 섹션](http://guidelines.md#feature-request)의 1번 항목을 참고해주세요 향상에 기준은 요청의 경우와 비슷하지만 잠재적으로 changes을 특히 주의해야 함수를 수정하는 모든 이전의 유효하고 문서화된 시그니처function signature 함수의 원형에 명시되는 매개변수 리스트가 방식으로 동작해야 PR이 시작되기 적어도 명의 유지관리자의 승인을 받아야 문서화되어 토론Discussion 토론Discussion을 가지고 있으며 것으로 통합하기 주제에 피드백을 모으는 데에 사용되어야 종류의 토론 대화가 끝나고 문제가 생성되면 종료될 이슈가 토론으로 열려 것들은 올바른 적용하고 없애야 버그에 포함되지 않았다면 요청해야 이가 열렸지만 기여와 없거나 깃허브 리포지토리repository/기여 과정/기여 커뮤니티와 포럼forum 디스코드Discord로 리디렉션하고고 닫아야 경우에는 눈에 토론인지 알 있게 표시하기 추가해야 풀 Requests 리포지토리repository에 기여는 리퀘스트pull request를 통해 이루어집니다 스튜어드와 유지관리자는 리포지토리에 푸시push 기여 시 똑같이 > 과정을 거치도록 권장합니다 같습니다 리퀘스트 템플릿은 곳](https://github.com/processing/p5.js/blob/main/.github/PULL_REQUEST_TEMPLATE.md)에서 확인할 리퀘스트는 먼저 관련 열고 논의해야 [이슈 절차workflow]/steward_guidelinesmd#issues를 따른 뒤에 스튜어드나 검토해야 절차가 적용되지 유일한 경우는 오타 수정 뿐이며 열 필요가 없고 분야의 스튜어드가 아니더라도 병합merge 사람이 병합할 예외가 존재하지만 기여자들이 열도록 적용될지 모르겠다면 어쨌든 열어보세요 제시된 리퀘스트를 해결되지 원본 게시물post의 Resolves #OOOO를 Addresses #OOOO로 수정하여 병합 시에 자동으로 닫히지 않게끔 수정은 누구나 PR의 변경된 파일Files Changed 탭에서 자동 지속적 통합Continuous Integration CI 테스트를 통과하는지 확인하세요 [The files changed tab when viewing pull request on GitHub]src/content/contributor-docs/images/files-changedpng All checks have passed indicator GitHub highlighted above the merge button]src/content/contributor-docs/images/all-checks-passedpng 스튜어드에 검토되어야 하며 이상적으로는 이슈의 승인한 이를 수행해야 탭을 토론discussion에 되었는지 최초로 PR은 가능하고 적절하다면 테스트해야 CLI는 간소화하는 많은 아래의 요령]/steward_guidelinesmd#tips-tricks에 [ ] 원래의 해결해야 이슈에서 합의되지 동작을 변경해서는 안됩니다 성능에 큰 영향을 주지 않아야 접근성에 영향도 최신 표준 코딩을 수정사항은 자동화된 통과해야 하고 새 포함해야 변경 곳](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/commenting-on-a-pull-request#adding-line-comments-to-a-pull-request)에 행에 줄별 주석line comments을 제안 블록suggestion block으로 사항을 제안할 있습니다\\ Suggest Change button while writing comment code in request]src/content/contributor-docs/images/suggest-changepng\\ [A suggested change appearing within fences with suggestion tag]src/content/contributor-docs/images/suggested-value-changepng\\ previewed as diff]src/content/contributor-docs/images/suggestion-previewpng 여러 번 변경이 줄 주석single-line 추가하지 마세요 대신 곳](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/reviewing-proposed-changes-in-a-pull-request/)에 절차에 주석multiple-line comments과 번의 요청으로 변경하세요 comments이 설명이나 토론을 것이라면 요청Request changes 답글Comment을 선택해 주세요\\ option circled Finish Review menu]src/content/contributor-docs/images/comment-reviewpng 검토되고 필요하지 스튜어드는 댓글이 있든 없든 단계에서 승인Approve 옵션을 선택하여 승인Approved으로 표시할 그런 원한다면 유지관리자에게 검토를 병합하거나 병합을 기여자를 [README.md](http://readme.md/) 파일의 기여자 목록에 추가하려면 @[all-contributors](https://allcontributors.org/docs/en/emoji-key/) 봇을 호출해야 각각의 유형은 `[contribution` `type]`에 전체 목록은 위 링크에서 [images/suggest-changepng]src/content/contributor-docs/images/suggest-changepng [images/suggested-value-changepng]src/content/contributor-docs/images/suggested-value-changepng [images/suggestion-previewpng]src/content/contributor-docs/images/suggestion-previewpng `@all-contributors` `please` `add` `@[GitHub` `handle]` `for` `type]` 수정과 가지 주목해야 차이점이 병합merge되기 두 검토와 디펜다봇Dependabot 보통 리포지토리의 관리자admins에게만 표시되므로 여러분에게 해당하지 않는다면 섹션을 건너뛰어 주세요 [유의적 버전(semver)](https://semver.org/) 패치patch 업데이트면서 통과한 Dependabot 병합merge될 디펜다봇 유의적 버전의 경미한 다루는 테스트만 통과하면 병합될 빠르게 업데이트된 종속성dependency의 기록changelog을 확인하는 것이 좋습니다 주요 과정이나 검토자reviewer는 가능하면 버전부터 대상 버전까지의 기록을 검토하고 로컬 테스트하여 정상적으로 작동하는지 확인합니다 종속성의 호환성 대비에 제출합니다 Nodejs는 오래된 버전에 공식 지원을 중단하기 꽤나 종속성이 충돌합니다 종속성 API 것은 아닙니다 과정 섹션에서는 설정이나 명령어는 다루지 않고 뒤에서 일이 일어나고 자세히 설명합니다 Gruntfilejs 파일에는 정의들이 라이브러리와 문서를 구축하는 사용된 도구 중에는 Grunt Browserify YUIDoc ESLint Babel Uglify Mocha가 이게 다는 `default` 작업으로 거기서부터 거꾸로 작업하는 우리에게 도움될 시점에는 설명을 따라가며 Gruntfilejs를 열어보는 ``` gruntregisterTask'default' ['lint' test'] `grunt` npm 스크립트 `npm test`를 열었을 `lint`와 `test`로 구성된 작업이 실행됩니다 #### `lint` gruntregisterTask'lint' ['lintsource' lintsamples'] 작업은 하위 구성됩니다 `lintsource` `lintsamples` 는 ESLint를 스크립트를 `eslintbuild` `eslintsource` `eslinttest`의 세 나뉩니다 `yuidocprod` `cleanreference` `minjson`로 `yui` 작업을 실행합니다 코드로부터 추출하여 JSON 문서로 변환합니다 사용되지 파일을 제거하며 생성된 `dataminjson` 최소화합니다 다음은 `eslint-samplessource`로 [/tasks/build/eslint-samplesjs]/tasks/build/eslint-samplesjs에 정의되어 사용자 작성 작업입니다 문서 예제 코드가 부분와 코딩 규칙을 따르는지 확인하기 실행할 예제를 린트lint하기 빌드해야 `yui`는 `test` ```js gruntregisterTask'test' build' connectserver' mochaChrome' mochaTest' nycreport `build` 살펴보겠습니다 gruntregisterTask'build' browserify' browserifymin' uglify' browserifytest `browserify`로 작업들은 [/tasks/build/browserifyjs]/tasks/build/browserifyjs에 비슷한 단계로 되어 파일에서 하나로 빌드하는 단계입니다 `browserify`는 p5js를 반면 `browserifymin`는 최소화할 중간 파일들을 빌드합니다 `browserify`와 `browserifymin`의 차이점은 `browserifymin`에는 FES가 작동하는 데이터가 있지 않다는 `uglify`는 `browserifymin` 출력 가져와 최종적으로 p5minjs로 단계의 구성은 메인 Gruntfilejs에 `browserifytest`는 [Istanbul](https://istanbul.js.org/)을 p5js와 버전으로 빌드됩니다 단 커버리지test coverage 추가된 코드를 `fsreadFileSync` nodejs 전용 코드의 사용은 `brfs-babel`을 실제 내용으로 대체됩니다 WebGL 별도의 파일로 셰이더shader 삽입inline하기 사용됩니다 node\\_modules의 종속성dependency을 Babel을 packagejson에서 정의된 Browserslist 사항에 맞춰 트랜스파일transpile하고 ES6 import문import statement을 browserify가 이해하는 CommonJS require로 호환성에 걱정 없이 이상에서 구문syntax을 됩니다 번들링bundling 후 번들링된 파일에 기록되기 전까지 코드는 `pretty-fast`를 전달됩니다 최종 포맷이 일관되도록 정리되어야 원하는 읽고 검사할 있을 예상됩니다 세부 단계가 나와 위에 링크된 browserify 정의 확인하여 내용을 connectserver 단계에서는 파일과 빌드된 호스팅하는 서버를 가동하여 크롬Chrome에서 mochaChrome [/tasks/test/mocha-chromejs]/tasks/test/mocha-chromejs에 Puppeteer를 사용해 원격 제어가 가능한 크롬의 헤드리스 버전을 가동하고 `/test` 폴더에 HTML 관련된 여기에는 라이브러리의 축소되지 축소된 단위 테스트unit test 모음에 테스트하는 레퍼런스 mochaTest 크롬 nodejs에서 실행되고 중 일부만 테스트한다는 점에서 `mochaChrome`과 기능은 필요하므로 세트는 테스트에 확장해야 마지막으로 빌드와 테스트가 완료되면 `mochaChrome`이 라이브러리 커버리지 보고서를 수집하고 범위 데이터를 콘솔에 출력합니다 커버리지는 추가적인 데이터 포인트를 모니터링하고 확보하는 100%를 목표로 하지는 여기까지 기본적인 환경 구성configuration 다루어 보았습니다 `npx grunt [step]`으로 위에서 다루지는 않았지만 상황에서 유용할 작업도 yuidev 빌드를 실행한 가동합니다 서버는 [http://localhost:9001/docs/reference/](http://localhost:9001/docs/reference/)와 기능적으로 유사한 페이지를 제공합니다 변경점을 문서와 `yuidev`는 인라인 문서의 유용한데 저장소repository에서 저장소로 이동할 필요도 생길 때마다 웹사이트를 빌드할 없기 때문입니다 브라우저에서 단순화된 변경사항을 미리 보면 이렇게 하면 웹사이트에 올바르게 표시되는지 해당된다는 알아두세요 스타일 레이아웃 페이지 자체에 변경사항은 저장소에서 생성 watch watchmain watchquick 워치Watch 감시하고 실행하여 레퍼런스나 범위의 차이를 제외하면 수행합니다 `watch` 감지할 실행하는 것처럼 보일 거예요 `watchmain` 실행하지만 감지해도 레퍼런스를 빌드하지는 `watchquick` 감지된 중인 내용에 가장 효율적인 워치watch 방식을 선택한다면 변경사항마다 수동으로 빌드하지 않아도 배포 [release\\_processmd]/release_process/를 요령 때때로 검토가 이슈와 수가 너무 많아질 보다 용이한 가지를 알려드립니다 회신 양식 Template 리퀘스트에 작성을 돕는 깃허브GitHub 기능인 [저장된 회신Saved Replies)](https://docs.github.com/en/get-started/writing-on-github/working-with-saved-replies/about-saved-replies/)이 흐름workflow 일부는 동일하거나 답변포럼으로 질문을 리디렉션하거나 승인 등으로 PR에 응답해야 있는데 **저장된 회신**을 사용하면 작업의 효율이 올라갈 유지관리자maintainer가 사용하는 회신**의 일부입니다 사용하거나 만들어 보세요 ##### 종결Closing 없음 We're not able to reproduce this but please feel free reopen if you can provide sample that demonstrates issue Thanks 이것을 수는 없지만 보여줄 샘플 열어주세요 감사합니다 스니펫 필요 I'm closing for organizational purposes Please snippet illustrates 조직 운영 관리 종결합니다 설명하는 스니펫을 포럼 사용 The issues here are good place bugs and library itself For questions about your own tests or following tutorials [forum](https://discourse.processing.org/) is best post 자체의 버그나 올리는 튜토리얼에 것에 싶다면 [포럼](https://discourse.processing.org/)만한 곳이 없을 거에요 GSOC discuss proposals our [forum](https://discourse.processing.org/c/summer-of-code/). 제안을 논의하고 우리의 [포럼](https://discourse.processing.org/c/summer-of-code/)만한 없답니다 seeing lot of interest feature we don't clear explanation how it [expands access]/access/ so I will close now If an access statement be added welcome 기능으로부터 이점을 찾을 [접근성을 확장]/access/하는지에 명확한 설명이 없으므로 종결하겠습니다 추가할 되면 언제든지 We do see further more detailed Thank 이슈로 인해 [접근성이 확장]/access/되는지에 애드온Addon 부가 think function beyond scope try keep minimal possible could great starting point addon See docs create [https://github.com/processing/p5.js/blob/main/contributor\\_docs/creating\\_libraries.md](../creating_libraries/) 범위를 벗어나는 같지만 최소한의 크기를 유지하고 싶어요 만드는 시작점이 애드온을 생성하는 알고 확인해 필요함 As reminder need opened before requests tagged This necessary tracking development keeping discussion 참고로 게시하고 태그를 지정하기 게시해야 개발을 추적하고 명확하게 유지하는 필요해요 해결 You go ahead fix 계속 해결해도 Looks 괜찮아 보이는데요 CLI 복잡한 여러분이 git 명령어로 가져오면 어려울 다행히도 CLI](https://cli.github.com/)가 과정에서 도움을 있겠군요 CLI를 설치하고 로그인하고 `gh pr checkout [pull_request_id]` 명령어를 실행하면 가능하며 포크 가져오기 브랜치 체크아웃 수행됩니다 main 브랜치로 돌아가는 `git main`으로 브랜치를 전환하는 것과 방문하지 않고도 CLI에서 남길 CLI에는 수많은 명령어가 사용하기에 도구입니다 알림 이슈나 **이슈** **풀 리퀘스트** 저장소 이름 반대편 상단에 눈 아이콘이 **보기Watch** 클릭하여 저장소를 [Cropped screenshot top right corner repository page showing series buttons center from left Sponsor Watch Fork Starred]src/content/contributor-docs/images/github-repo-metricspng 보기를 활성화하면 핸들에 언급 구독한 활동과 이벤트가 페이지](https://github.com/notifications/)에 알림으로 전송되며 이메일의 받은 편지함과 비슷하게 *읽음* *삭제됨* 표시될 보기가 활성화된 저장소에 이메일을 GitHub로부터 수신할 설정 페이지](https://github.com/settings/notifications/)에서 아예 구독 취소하는 방식에 맞는 선택하는 여러분은 사안을 찾아내야 하는 귀찮음과 깃허브의 끝없는 압박 사이의 선택지에 서 균형 잡힌 선택이 필요한데 처음이라면 **이슈**와 리퀘스트**에 **보기**를 활성화하고 참여 @멘션 정의에 이메일만 수신하도록 설정하는 추천합니다"},"단위 테스팅\n":{"relativeUrl":"/contribute/unit_testing","description":"단위 테스트를 사용하여 코드베이스의 개별 컴포넌트가 예상대로 작동하는지 확인합니다 ## 참조 비슷한 기술 스택과 [빠르고 좋은 테스팅 소개](https://codeburst.io/javascript-unit-testing-using-mocha-and-chai-1d97d9f18e71/)가 있고 [좀 더 깊이 살펴 볼수 있는 자료](https://blog.logrocket.com/a-quick-and-complete-guide-to-mocha-testing-d0e0ea09f09d/)가 있습니다 모든 테스트 실행하기 루트 레파지토리에서 커맨드를 터미널에서 사용해주세요 ```shellsession npm test ``` 커버리지 테스가 실행될때 마다 보고서가 생성됩니다 보고서에는 스위트가 소스 코드 파일을 테스트해 보았는지 자세히 설명하여 많은 코드베이스를 테스트했는지 효과적으로 알려줍니다 요약본은 실행하고 난 뒤에 출력되며 상세한 보고서는 웹브라우저에나 `coverage/indexhtml`에서 볼 수 맥 커맨드라인에서 `open coverage/indexhtml`를 실행하면 디폴트 브라우저에 해당 페이지가 열립니다 커맨드 `npx nyc report --reporter=text`를 사용하고 후 리포트를 ### 단윌 스위트 실행 단일 테스트나 그룹 위해 `js` 파일에 `suite` `test`에 `only`를 붙이고 위에 명령어를 사용해 실행합니다 **`only`를 커밋하지 않도록 주의해주세요**저희는 항상 CI가 *모든* 실행하기를 원합니다 #### 예제 p5ColorConversion 스위트를 `test/unit/color/color_lightjs`의 첫 행을 다음과 변경합니다 ```js suiteonly'color/p5ColorConversion' function { 이제 `npm test`를 사용하면 `function`내에서만 테스트가 실행됩니다 건너뛰기 기능은 `only` 반대입니다 `skip`을 추가하면서 Mocha가 케이스들을 무시하도록 할 있으며 건너뛴 항목은 보류 중으로 표시되고 이대로 보고됩니다 인프라 프레임워크 구조화하고 [mocha](https://mochajs.org)를 사용합니다 [chai의 `assert` `expect`)](https://www.chaijs.com/api/assert/)를 코드의 작동 방식에 대한 문장을 작성합니다 환경 브라우저에서 실행되는 `test/unit` 폴더 아래 모음과 Nodejs에서 `test/node` 컬렉션이 브라우저 테스트는 [headless Chrome](https://developers.google.com/web/updates/2017/06/headless-karma-mocha-chai/)에서 실행할 창이 나타나지 않습니다 설정 헬퍼 함수 현재 테스트에서만 사용할 있습니다대부분의 위치 * `test/js/mocha_setupjs` mocha의 몇가지 옵션을 `test/js/chai_helpersjs` chai `chaiassert` 도움되는 추가 `test/js/p5_helpersjs` p5 스케치의 도와주는 Nodejs를 위한 설정은 `test/mochaopts`에서 수행됩니다 지속적인 통합 p5js 풀리퀘스트를 오픈하면 자동으로 [테스트가 실행]/ttps//githubcom/processing/p5js/actions/ 됩니다 이를 통해 기여자의 추가적인 작업 없이 풀 리퀘스트 대해 통과했는지 재확인할 [Codecov](https://codecov.io/github/processing/p5.js)에 리포트가 업로드 단위테스트를 추가하고 싶다면 컴포넌트에 파일이 이미 존재하는지 확인해 보세요 `src/`에서 주어진 `test/unit`과 같은 경로에 있습니다예를 들면 `src/color/p5Colorjs`의 `test/unit/color/p5Colorjs`안에 찾을 없다면 아마 없기 때문일 것이기에 아직 😉 컨벤션에 새로운 생성합니다 작성하고 모듈이 동작하기위해 브라우저가 필요하다면 `test/unit`안에 넣고 싶지만 않다면 아래에 추가할 **의심이 든다면 `test/unit`에 추가하면 됩니다추후 필요한 경우 이동하는 편이 매우 쉽습니다** 모듈을 추가해야 `test/unit/specjs`안 `spec`배열의 두어야 합니다 부분은 실행에 로드되어 있는지 `test/testhtml` 보면서 테스트들을 확인 작성 단위를 선택하세요 메소드 또는 변수 예제로 `p5prototypeisKeyPressed`를 봅시다 작성하기 전에 메소드의 예상되는 동작을 이해할 필요가 **예상되는 동작** boolean 시스템 변수는 키를 누르는 참이고 누르지 않으면 거짓입니다 동작에 다양한 생각할 잇습니다 가능한 케이스는 같습니다 변수가 boolean이다 누르면 참이어야 한다 키알파벳 키 숫자 특수문자 등를 누르더라도 여러 거짓이어야 생각나는 것이 있다면 계속해서 추가하세요 생성하고 작성할 구성하기 mocha를 것입니다 suite'p5prototypekeyIsPressed' test'keyIsPressed is a boolean' //이곳에서 } true on key press' false when no keys are pressed' 구성했지만 작성하지 않았습니다 chai의 assert를 다음을 고려해 assertisBooleanmyp5keyIsPressed //해당 값이 boolean인지 유사하게 참인지 확인하기 `assertstrictEqualmyp5keyIsPressed true` 사용 assert에 [여기](https://www.chaijs.com/api/assert/)에서 좀더 했으므로 메소드가 확인해보세요 동일한 이슈를 원한다면 문제를 해결"},"WebGL 기여 안내\n":{"relativeUrl":"/contribute/webgl_contribution_guide","description":"{/* p5js WebGL 모드에서 소스 코드 작업을 시작하는 방법 */} 여러분이 페이지를 읽고 있다면 아마도 모드에서의 작업에 도움을 주고 싶으신 것이겠죠 여러분의 기여에 다시 한 번 감사의 말씀을 드립니다 페이지에서는 기여가 구성되었는지를 설명하고 변경사항을 만들기 위한 가지 팁을 제공합니다 ## 참고 자료 * p5js의 모드가 기반으로 하고 있는 2D 모드와 다른지 이해하려면 [p5js 모드 아키텍쳐]/webgl_mode_architecture/를 읽어보세요 셰이더 선 등에 대한 구현 세부 사항에 가치 자료가 됩니다 문제 생성 코드베이스codebase 원천 모음 설정 변경 사항 테스트에 정보가 필요하다면 [기여자 가이드라인](https://p5js.org/contributor-docs/#/./contributor_guidelines/)을 브라우저의 API에 대해 알아두면 도움이 될 수 있는데 [WebGL fundamentals](https://webglfundamentals.org/)에서 많은 핵심 렌더링 개념에 검토할 있습니다 [The Book of Shaders](https://thebookofshaders.com/)에 셰이더에서 사용되는 기술들이 설명되어 계획 [깃허브GitHub 프로젝트](https://github.com/orgs/processing/projects/5/)에 게시된 이슈issue를 정리하고 다음과 같은 유형으로 나누었습니다 **시스템 차원 변경사항 System-level changes** 란 코드에 광범위한 영향을 미치는 장기적 목표입니다 이것은 실행에 옮기기 전 수많은 논의와 계획을 필요로 합니다 **아직 해결책이 없는 버그 Bugs with no solution yet** 원인을 줄이기 약간의 디버깅이 필요한 신고입니다 아직 해결될 준비가 되어 있지 않으며 원인이 발견되면 이를 고치기 최고의 해결책을 논의할 있게 **해결책이 있지만 PR이 solutions but PR** 는 해결할 지 결정되었으며 누구나 자유롭게 코드를 작성할 **경미한 개선 Minor enhancements** 이란 현재의 아키텍쳐 내에서 확실한 위치를 가지는 새로운 기능에 이슈이며 맞출 것인지에 논의를 하지 않아도 기능이 가치가 있다고 동의하면 **2D 기능 features** p5js에는 모드에는 기능입니다 기능은 모드의 동작과 일치하는 결과물이 구현될 것으로 예상됩니다 최적의 구현에 필요가 이에 사용자 요구 사항은 명확합니다 **모든 환경에서 작동하지 않는 Features that don't work in all contexts ** 모드에 존재하지만 모드를 사용할 모든 방식으로 작동하지는 예를 들어 일부 메소드는 좌표계와 3D 좌표계에서 작동하지만 사용하면 중단될 수도 보통은 시작할 **기능 요청 Feature requests** 요청을 말합니다 요청이 지침에 맞는 것인지 확인하기 위해서는 논의가 필요합니다 **문서화 Documentation** 이슈는 변경이 필요하지 않지만 대신 동작을 위해 더 잘 문서화하는 것이 이슈입니다 어디에 넣어야 하나요 WebGL과 관련된 것은 `src/webgl` 하위 디렉토리에 해당 디렉토리 최상위 조명을 설정하는 명령어는 `lightingjs`로 재질을 `materialsjs`로 주제 영역에 여러 파일로 나뉘었습니다 지향 클래스를 구현할 클래스당 만드려고 노력하고 파일들은 때때로 개의 내부 보조 기능utility 가질 `p5Framebufferjs`는 `p5Framebuffer` 포함하고 추가로 메인 클래스의 프레임버퍼 관련 클래스로 구성됩니다 파일에는 추가적인 클래스도 들어갈 `p5RendererGL`은 처리하는 대형 클래스입니다 하나의 클래스 파일이 아닌 영역인지에 `p5RendererGL`을 분할한 파일과 파일에 무엇이 있는지는 같습니다 #### `p5RendererGLjs` 초기화 `p5RendererGLImmediatejs` **즉시 immediate mode** 드로잉`beginShape`나 `endShape`와 보관 재사용되지 않을 모양과 `p5RendererGLRetainedjs` **보류 retained 드로잉`sphere`와 재사용을 저장된 `materialjs` 혼합 관리 `3d_primitivesjs` `triangle`과 도형을 그리는 함수 함수들은 도형의 기하학적 구조를 정의합니다 그런 렌더링은 또는 `p5RendererGLImmediatejs`에서 발생하며 형상 입력을 일반 모양으로 취급합니다 `Textjs` 글자 렌더링을 테스트 ### 일관성 함수를 방법은 가지가 것을 수동으로 확인하는 어려우므로 가능한 곳에 단위 테스트unit test를 추가합니다 그래야 변경점이 생겨도 테스트를 통과한다면 아무 문제가 발생되지 않았다고 확신할 있기 때문입니다 새 추가할 모드에서도 작동하는 경우 일관성을 중 하나는 픽셀 두 동일한지를 것입니다 다음은 테스트의 예시 하나입니다 ```js test'coplanar strokes match 2D' function { const getColors = functionmode myp5createCanvas20 mode myp5pixelDensity1 myp5background255 myp5strokeCapmyp5SQUARE myp5strokeJoinmyp5MITER if === myp5WEBGL myp5translate-myp5width/2 -myp5height/2 } myp5stroke'black' myp5strokeWeight4 myp5fill'red' myp5rect10 myp5fill'blue' myp5rect0 myp5loadPixels return [myp5pixels] assertdeepEqualgetColorsmyp5P2D getColorsmyp5WEBGL ``` 안티앨리어싱계단 현상 방지 기술 antialiasing을 끌 없고 안티앨리어싱은 종종 다르기 항상 코드가 않습니다 x축 y축 상의 직선에 대해서는 작동합니다 전용이라면 결과물을 비교하기보다는 픽셀을 확인해서 색상이 예상한 색상인지 경우가 많습니다 언젠가는 픽셀이 예상 결과물의 전체 이미지 스냅샷을 비교하는 보다 강력한 시스템으로 전환할 있겠지만 현재로서는 색상을 예시가 test'color interpolation' renderer myp5createCanvas256 // upper color lower expected center myp5beginShape myp5fill200 myp5vertex-128 -128 myp5vertex128 myp5fill0 myp5endShapemyp5CLOSE assertequalrenderer_useVertexColor true assertdeepEqualmyp5get128 [100 255] 성능 p5js가 가장 걱정하는 부분은 아니지만 성능을 크게 저하하지 않도록 보통 변경사항이 적용된 것과 적용되지 않은 스케치를 생성해서 이루어지고 프레임 속도를 비교합니다 측정에 조언을 드리자면 스케치 상단에서 `p5disableFriendlyErrors true`로 친절한 오류를 비활성화해 보세요 오류 메시지가 `p5minjs`를 테스트해보세요 안정적인 명확하게 파악하기 평균 표시해 let frameRateP avgFrameRates [] frameRateSum numSamples setup createP frameRatePposition0 draw rate frameRate / avgFrameRatespushrate += avgFrameRateslength > -= avgFrameRatesshift frameRatePhtmlroundframeRateSum + avg fps' 파이프라인의 부분에 스트레스를 주기 해야 하는 가지의 매우 복잡한 모양 대용량의 모델이나 긴 곡선 수의 단순한 for 반복문에서 호출되는 `line`"},"p5.js WEBGL 모드 아키텍쳐\n":{"relativeUrl":"/contribute/webgl_mode_architecture","description":"문서는 p5js 기여자 메인테이너 이해 관계자를 위한 p5js의 WEBGL 모드의 구조를 설명합니다 스케치에서 3D 그래픽을 사용하는 데 관심이 있다면 대신에 [튜토리얼 보기](https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5/)를 참조해주세요 ## 구조 객체에 대한 개요 아키텍처의 핵심 객체는 p5RendererGL p5Shader p5Texture p5Geometry입니다 p5RendererGL의 단일 인스턴스는 자체 p5Shaders p5Textures p5Geometry를 관리하며 p5Geometry—a 목표는 WebGL을 사용하여 오프스크린 렌더링을 허용하는 것이지만 아직 테스트되지 않았습니다 쉐이더와 텍스쳐는 렌더러를 통한 특정 GL 컨텍스트와 관련이 있습니다 ### WEBGL/3D 모드 용 렌더러입니다 p5Renderer에서 파생되었으며 2D 모드에서 사용할 수 없는 추가 기능 예를 들명 `box` `cone` 쉐이더의 사용 가속 텍스처 렌더링 조명에 기능을 제공합니다 * 쉐이더p5Shader 객체 텍스처p5Texture 객체를 관리 생성 캐쉬합니다 쉐이더에서 속성 배열로 도형의 좌표를 준비합니다 획 채우기 텍스쳐 다양한 조명 메서드가 호출 될 올바른 쉐이더를 선택한 해당 적절한 정형을 데이터 유지 사용되는 유형의 조명과 파라미터의 개수입니다 begin/endShape로 생성된 모양은 고정 에서3D 기본 지오메트리를 캐시하며 그릴 때마다 동적으로 생성되어 즉시모드에서 GL에 푸시됩니다 렌더러는 현재 그리기 조건에 적합한 p5Shader를 선택하는 것을 관리합니다 p5Shader클래스는 프로그램의 정형과 속성에 액세스를 vertex 프래그먼트 쉐이더 컴포넌트를 컴파일하고 연결합니다 정형에 액세스하고 설정하기위한 API를 쉐이더가 모양을 하기 전에 필요한 텍스처를 바인딩합니다 렌더링에 bindShader 메서드를 제공하고 그린 후에는 unbindShader 섹션에서 설명 된 것처럼 4개의 `p5Image``p5MediaElement``p5Element` 또는 `ImageData`를 바탕으로 텍스처의 상태를 유형에 이미지 처리를 내부적으로 처리하기때문에 p5Renderer 구현은 다룰때 메서드에서 특별한 예외를 만들 필요가 없습니다 데이터가 변경되었는지 여부를 잘 추측하면서 모든 프레임을 조건부로 업데이트합니다 성능을 높이기 위해 변경 사항이 경우 업로드하지 않습니다 p5Geometry 객체의 캐시에 객체로 저장됩니다 그려진 모양과 매개 변수를 기반으로 문자열을 매핑합니다 `box70 20`로 만든 상자의 지오메트리는 `'box|70|80|90|10|20'` 첫번째 단계에서 보유하고 있는 함수를 호출해 만들고 앞서 언급 한 문자열 ID를 지오메트리 해시에 저장합니다 추후 해시안에서 찾아 호출하고 찾았을 새 만드는 대신 기존 참조하여 사용합니다 요소에 꼭지점 법선 면 선 세트에 법선을 계산하는 방법을 모드로 속성은 렌더러의 저장되고 드로잉 컨텍스트에 그리는데 후 폐기됩니다 고정된 원형에 반면 모드는 모양에 사용됩니다 | 함수 ------------ ----------------- plane bezier box curve sphere line cylinder beginShape cone ellipsoid endShape torus point triangle curveVertex arc bezierVertex quadraticVertex ellipse rect quad text 필요에 배열을 텍스처는 `texture` 메서드와 비디오용으로 생성되거나 커스텀 쉐이더에 제공되는 정형으로 생성됩니다 렌더러에 텍스쳐가 먼저 주어진 이미지/비디오에 텍스처가 생성되었는지 확인한 텍스쳐를 찾을 경우에만 새로운 유형 #### 색상 색상에 평평한 음영을 쉐이더조명 텍스처용 다음을 `ambientLight` `directionalLight` `pointLight` `spotLight` `specularColor`에 설정된 변수 `ambientMaterial` `emissiveMaterial` `specularMaterial`에 재질 `texture`로 설정 일반 쉐이더는 `normalMaterial`이 중일 설정됩니다 표면의 정규 벡터를 색상을 결정합니다 매개변수 표준 모델 뷰 카메라 정형 Parameter Line Shader TexLight Color Normal Point --------------------------------- ----------- --------------- ------------- `uniform mat4 uModelViewMatrix` x uProjectionMatrix` vec4 uViewPort` uPerspective` ------------------------------ `attribute vec3 aPosition` aNormal` vec2 aTexCoord` mat3 uNormalMatrix` aDirection` float uStrokeWeight` uMaterialColor` aVertexColor` --------------------------------------------- int uAmbientLightCount` uDirectionalLightCount` uPointLightCount` uSpotLightCount` uAmbientColor[8]` uLightingDirection[8]` uDirectionalDiffuseColors[8]` uDirectionalSpecularColors[8]` uPointLightLocation[8]` uPointLightDiffuseColors[8]` uPointLightSpecularColors[8]` uSpotLightAngle[8]` uSpotLightConc[8]` uSpotLightDiffuseColors[8]` uSpotLightSpecularColors[8]` uSpotLightLocation[8]` uSpotLightDirection[8]` bool uSpecular` uEmissive` uShininess` uUseLighting` uConstantAttenuation` uLinearAttenuation` uQuadraticAttenuation` ----------------------------- sampler2D uSampler` isTexture` ---------------------------- uResolution` uPointSize` ----------------------------------- `varying vVertexNormal` vVertTexCoord` vLightWeighting` highp vColor` vStrokeWeight` 단계 커밍 쑨"}},"examples":{"기본 조형":{"relativeUrl":"/examples/shapes-and-color-shape-primitives","description":"프로그램은 기본 도형의 함수인 square rect ellipse circle arc line triangle and quad 사용을 보여주고 있습니다"},"색상":{"relativeUrl":"/examples/shapes-and-color-color","description":"색상을 추가하여 기본 조형 예제를 확장해 봅시다 background는 캔버스를 하나의 색상으로 채우고 stroke는 그려지는 윤곽선의 정하며 fill은 도형 내부의 정합니다 noStroke와 noFill은 색상과 채우기 없앨 수 있습니다 색상은 다양한 방법으로 표현될 있으며 예제는 가지의 옵션을 보여주고"},"윤곽선 그리기":{"relativeUrl":"/examples/animation-and-variables-drawing-lines","description":"마우스를 클릭하고 드래그하여 윤곽선을 그려봅시다 예제는 가지 내장된 변수의 사용을 보여줍니다 mouseX와 mouseY는 현재 마우스 위치 정보를 가지며 이전 위치는 pmouseX와 pmouseY를 이용해 가져올 수 있습니다 * colorMode에서 HSB색조-채도-밝기 방식을 사용하여 첫번째 변수가 색조를 설정하는 것도"},"이벤트가 있는 애니메이션":{"relativeUrl":"/examples/animation-and-variables-animation-with-events","description":"예제는 loop와 noLoop를 사용하여 애니메이션을 일시정지하고 재개하는 방법을 보여줍니다 마우스를 클릭하면 애니메이션 반복이 전환됩니다 정지되면 사용자는 아무 키나 눌러 한 프레임을 넘길 수 있습니다 참고 키를 누르는 이벤트가 제대로 전달되기 위해 캔버스에 포커스를 두려면 캔버스를 클릭해야 합니다 하나의 넘기기 위해서는 redraw를 호출할 있는데 draw 함수가 번 호출됩니다"},"모바일 기기의 움직임":{"relativeUrl":"/examples/animation-and-variables-mobile-device-movement","description":"deviceMoved 함수는 스케치를 표시하는 모바일 기기가 움직일 실행됩니다 예제에서 accelerationX accelerationY accelerationZ 값은 원의 위치와 크기를 정하고 있습니다 이것은 기기에서만 작동합니다"},"조건식":{"relativeUrl":"/examples/animation-and-variables-conditions","description":"if와 else문은 특정 조건이 참일 때만 코드 블록이 실행되도록 합니다 예제는 마우스를 누른 상태에서만 애니메이션이 59번 줄의 if문 이렇게 동작할 수 있습니다 else문에 대한 자세한 내용은 p5 레퍼런스나 MDN에서 읽을 비교 연산자는 두 값을 비교하여 조건식을 형성하는 데 도움을 줍니다 예제에서는 69번 if문에 원의 색조가 이상일 0으로 재설정됩니다 연산자에 논리 결합할 있게 &&는 모든 조건식이 참인지를 확인합니다 예제에서 원은 캔버스의 수평 중심으로 향할 검은색으로 채워지고 않으면 흰색으로 채워집니다 이것은 45번 때문인데 명령문은 \bx좌표가 이하인지를 확인하고 ||는 적어도 하나의 75번 원이 왼쪽이나 오른쪽 가장자리에 도달할 속도를 만듭니다"},"단어":{"relativeUrl":"/examples/imported-media-words","description":"text 함수는 캔버스에 글자를 삽입하는 데 사용됩니다 loadFont fontSize 함수를 사용하여 글꼴 글자 크기를 변경할 수 있습니다 textAlign 왼쪽 가운데 또는 오른쪽으로 정렬할 있으며 도형에서와 fill을 글자에 색상을 입힐"},"이미지 데이터 복사":{"relativeUrl":"/examples/imported-media-copy-image-data","description":"copy 메서드를 사용하면 커서가 드래그되는 곳마다 흑백 이미지 위에 색상이 있는 이미지를 복사하여 이미지에 색상을 입히는 것처럼 보이게 할 수 있습니다"},"알파 마스크":{"relativeUrl":"/examples/imported-media-alpha-mask","description":"mask 메서드를 사용하면 이미지의 마스크를 만들어 부분에서 투명도를 지정할 수 있습니다 예제를 로컬에서 실행하려면 두 개의 이미지 파일과 실행 중인 로컬 서버가 필요합니다"},"이미지 투명도":{"relativeUrl":"/examples/imported-media-image-transparency","description":"프로그램은 tint 함수로 이미지의 알파 값을 수정하여 한 이미지를 이미지 위에 덮어씌웁니다 위치를 변경하려면 캔버스를 가로질러 커서를 좌우로 이동합니다 예제를 로컬에서 실행하려면 파일과 실행 중인 로컬 서버가 필요합니다"},"오디오 플레이어":{"relativeUrl":"/examples/imported-media-create-audio","description":"createAudio는 오디오 플레이어를 생성합니다 예제는 플레이어의 컨트롤을 표시하고 속도를 조정합니다 재생 속도는 마우스가 창의 왼쪽 가장자리에 있을 보통이고 오른쪽으로 움직일수록 더 빨라집니다 플레이어와 같은 미디어 요소 사용에 대한 자세한 정보는 p5MediaElement 레퍼런스 페이지를 확인하세요 파일은 Josef Pres의 피아노 루프로 자유 이용 저작물입니다"},"비디오 플레이어":{"relativeUrl":"/examples/imported-media-video","description":"noCanvas와 createVideo 함수를 사용하면 캔버스에 비디오를 내장하지 않고도 DOM에 업로드할 수 있습니다 캔버스 요소에 내장하려는 경우 Video Canvas 예제를 확인해 보세요"},"캔버스에서의 비디오":{"relativeUrl":"/examples/imported-media-video-canvas","description":"createVideo와 image 함수를 사용하면 비디오를 캔버스에 업로드할 수 있습니다 비디오 캡처는 생성자를 통해 전달될 있으므로 filter 메서드를 사용하여 캡처에 필터를 추가할 예제를 로컬에서 실행하려면 실행 중인 로컬 서버가 필요합니다 캔버스 내에 내장하지 않고 구축하려면 Video 확인해 보세요"},"비디오 캡처":{"relativeUrl":"/examples/imported-media-video-capture","description":"createCapture와 image 함수를 사용하면 장치의 비디오 캡처를 가져와 캔버스에 그릴 수 있습니다 캡처는 생성자를 통해 전달될 있으므로 filter 메서드를 사용하여 캡처에 필터를 추가할 비디오를 업로드하거나 발표하거나 스타일을 지정하기 위한 다양한 전략을 보려면 Video와 Video Canvas를 확인해 보세요"},"이미지 드롭":{"relativeUrl":"/examples/input-elements-image-drop","description":"drop은 p5js 요소 메서드로 파일이 요소에 로드될 때마다 콜백을 등록합니다 업로드된 파일은 p5File로 만들어집니다 drop 사용하여 파일 유형을 확인한 유형에 대응하는 조건문을 작성할 수 있습니다"},"입력칸과 버튼":{"relativeUrl":"/examples/input-elements-input-button","description":"createElement createInput createButton 함수를 사용하여 글자 입력칸을 통해 제출된 글자를 가져와 캔버스에 표시할 수 있습니다"},"폼 요소":{"relativeUrl":"/examples/input-elements-dom-form-elements","description":"문서 객체 모델 DOM은 웹 페이지의 결과로 나오는 구조를 나타냅니다 createInput createSelect createRadio와 같은 p5js의 폼 요소를 사용하여 [드롭다운] 메뉴 선택 입력칸 또는 라디오 버튼을 통해 제출된 정보를 갖는 다양한 방법을 구축하고 기반으로 DOM을 업데이트할 수 있습니다"},"이동(Translate)":{"relativeUrl":"/examples/transformation-translate","description":"translate 함수는 좌표계의 원점을 지정된 위치로 이동합니다 push와 pop 좌표계나 채우기 색상과 같은 드로잉 설정을 저장 복원합니다 예제에서는 도형직사각형이나 원을 좌표계에서 있습니다"},"회전(Rotate)":{"relativeUrl":"/examples/transformation-rotate","description":"rotate 함수는 현재 원점을 중심으로 좌표계를 회전합니다 기본적으로 원점은 캔버스의 왼쪽 위 모서리라는 사실을 알아두세요 가운데를 회전하려면 먼저 이동한 새 회전해야 합니다 push와 pop 저장 복원합니다"},"크기(Scale)":{"relativeUrl":"/examples/transformation-scale","description":"scale 함수는 지정된 인수만큼 현재 좌표계의 크기를 조정Scaling합니다 push와 pop 좌표계를 저장 복원합니다 예제에서는 세 가지의 서로 크기 조정 인수를 사용해 크기가 200인 정사각형을 원점에 있습니다"},"선형 보간법":{"relativeUrl":"/examples/calculating-values-interpolate","description":"보간법 두 개의 값 사이의 값을 계산합니다 예를 들어 숫자 5는 0과 중간 지점입니다 다양한 유형의 보간법은 사이에서 변화율을 사용합니다 선형 줄여서 lerp는 일정한 lerp 함수는 사이를 선형으로 보간합니다 화면을 가로질러 마우스를 움직이면 기호가 따라옵니다 애니메이션의 프레임을 그리는 타원은 현재 위치에서 커서의 위치를 향해 거리의 일부만큼 이동합니다"},"매핑(Map)":{"relativeUrl":"/examples/calculating-values-map","description":"map 함수는 값을 하나의 범위에서 범위로 변환합니다 예제에서 매핑은 커서의 수평 위치를 0-720의 0-360 결과값은 원의 색상이 됩니다 수직 0-400의 20-300의 지름이"},"랜덤":{"relativeUrl":"/examples/calculating-values-random","description":"예제는 random 함수의 사용법을 보여줍니다 사용자가 마우스 버튼을 누를 원의 위치와 색상이 무작위로 변경됩니다"},"제한(Constrain)":{"relativeUrl":"/examples/calculating-values-constrain","description":"예제는 커서의 위치에 원을 그리지만 원이 직사각형 내에 유지되도록 합니다 이는 마우스의 좌표를 constrain 함수에 전달함으로써 수행합니다"},"시계":{"relativeUrl":"/examples/calculating-values-clock","description":"현재 시각은 second minute hour 함수를 사용하여 읽을 수 있습니다 예제는 map 시계 바늘의 각도를 계산합니다 그런 좌표계 변환을 위치를 설정합니다"},"색상 보간":{"relativeUrl":"/examples/repetition-color-interpolation","description":"보간법은 두 값 사이의 값을 계산합니다 예를 들어 숫자 5는 0과 중간 지점입니다 다양한 유형의 사이에서 변화율을 사용합니다 선형 보간법 줄여서 lerp는 일정한 lerp 함수는 사이를 선형으로 보간합니다 여기에서 보여지는 lerpColor 색상 예제에서 stripeCount 변수는 수평 줄무늬가 개 나타나는지 조정합니다 값이 더 높은 숫자로 설정되면 개별 줄무늬처럼 보이는 것이 아니라 그라데이션처럼 보입니다"},"색상환(Color Wheel)":{"relativeUrl":"/examples/repetition-color-wheel","description":"예제는 다양한 색상의 모습을 보여줍니다 for 반복문을 사용하여 변환을 반복합니다 반복문은 angle이라는 변수를 초기화하며 변수는 원의 회전과 색상을 변경합니다 반복문이 반복될 때마다 원은 캔버스 중심에 상대적으로 그려집니다 push와 pop함수는 개별 원에만 영향을 줄 수 있도록 합니다"},"베지어 곡선":{"relativeUrl":"/examples/repetition-bezier","description":"bezier 곡선은 제어점과 고정점을 생성됩니다 함수의 첫 두 매개변수는 곡선의 번째 점을 지정하고 마지막 지정합니다 중간 곡선 모양을 정의하는 제어점입니다"},"만화경":{"relativeUrl":"/examples/repetition-kaleidoscope","description":"만화경은 두 개 이상의 반사면이 서로를 향해 비스듬히 기울어진 광학 기기입니다 translate rotate scale 함수를 사용하면 캔버스에서 만화경을 통해 만든 비주얼을 복제할 수 있습니다"},"노이즈":{"relativeUrl":"/examples/repetition-noise","description":"펄린 노이즈 는 켄 펄린Ken Perlin이 작성한 알고리즘으로 무작위성과 유기성을 지닌 시퀀스입니다 p5의 noise함수는 노이즈를 만듭니다 예제에서 점들은 값에 기반하여 크기가 결정됩니다 왼쪽의 슬라이더를 이용해 점들 사이의 거리를 설정합니다 오른쪽 계산에서의 오프셋offset 값을"},"재귀 트리":{"relativeUrl":"/examples/repetition-recursive-tree","description":"이것은 재귀를 통해 간단한 트리같은 구조를 렌더링하는 예제입니다 분기 각도는 마우스의 수평 위치에 대한 함수로 계산됩니다 마우스를 왼쪽과 오른쪽으로 움직여 각도를 변경하세요 다니엘 쉬프먼의 Processing에서 작성된 재귀 트리 예제를 바탕으로 합니다"},"랜덤 시":{"relativeUrl":"/examples/listing-data-with-arrays-random-poetry","description":"floor와 random 함수를 사용하여 배열에서 일련의 항목을 무작위로 선택하고 캔버스의 다양한 크기와 위치에 그릴 수 있습니다"},"사인과 코사인":{"relativeUrl":"/examples/angles-and-motion-sine-cosine","description":"예제는 사인과 코사인 수학 함수를 보여줍니다 애니메이션은 단위 원 반지름이 1인 주위에서 일정한 원형 운동을 x축으로부터 측정된 각도는 위의 점을 결정합니다 각도의 코사인과 사인은 점의 x좌표 y좌표로 정의합니다"},"조준":{"relativeUrl":"/examples/angles-and-motion-aim","description":"atan2 함수는 두 위치 사이의 각도를 계산합니다 함수가 계산하는 각도는 것을 향해 도형을 회전시키는 데 사용할 수 있습니다 예제에서는 눈이 커서를 바라보도록 회전합니다"},"삼각형 스트립":{"relativeUrl":"/examples/angles-and-motion-triangle-strip","description":"예제는 beginShape endShape vertex 함수를 사용하여 TRIANGLE_STRIP 모드에서 그것의 꼭짓점들을 지정함으로써 도형을 생성하는 방법을 보여줍니다"},"써클 클리커":{"relativeUrl":"/examples/games-circle-clicker","description":"예제는 제한과 점수가 있는 게임입니다 브라우저의 로컬 스토리지가 최고 점수를 저장하므로 같은 브라우저를 사용해서 게임을 다시 플레이할 점수 기록이 유지됩니다 브라우저 데이터를 지우면 기록도 지워집니다"},"핑퐁":{"relativeUrl":"/examples/games-ping-pong","description":"이것은 가장 오래된 아케이드 비디오 게임 중 하나인 아타리의 Pong에서 영감을 받은 게임입니다 2인용 게임이며 플레이어는 하얀 사각형으로 표현된 패들을 제어합니다 W와 S키는 왼쪽의 위아래로 움직이고 위쪽과 아래쪽 화살표 키는 오른쪽의 움직입니다 플레이어들은 공을 상대방 쪽 캔버스 가장자리 너머로 튕겨내어 점수를 얻습니다"},"스네이크 게임":{"relativeUrl":"/examples/games-snake","description":"이것은 스네이크라고 불리는 아케이드 게임 유형의 복제판입니다 첫 번째 스네이크 게임은 1976년에 출시된 블록케이드였으며 많은 게임들이 같은 구조를 사용합니다 게임에서 플레이어는 예제에서 녹색 선으로 표현된 뱀의 움직임을 제어합니다 플레이어의 목표는 뱀을 빨간 점으로 과일과 충돌시키는 것입니다 뱀이 충돌할 때마다 뱀은 더 길어집니다 자신이나 플레이 영역의 가장자리와 충돌하지 않으면서 가능한 한 길게 성장시키는 예제는 부분의 위치를 저장하기 위해 벡터 배열을 화살표 키는"},"지오메트리":{"relativeUrl":"/examples/3d-geometries","description":"p5의 WEBGL 모드에는 7개의 기본 도형이 포함되어 있습니다 도형들은 평면 상자 원기둥 원뿔 도넛형 타원체입니다 추가적으로 model은 loadModel을 통해 불러온 사용자 정의 지오메트리를 보여줍니다 예제에는 도형들이 있으며 NASA's collection에서 가져온 모델도"},"사용자 정의 지오메트리":{"relativeUrl":"/examples/3d-custom-geometry","description":"buildGeometry 함수는 도형을 3D 모델에 저장하여 모델을 효율적으로 사용 재사용합니다"},"재질(Materials)":{"relativeUrl":"/examples/3d-materials","description":"3D 렌더링에서 재질은 표면이 빛에 반응하는지를 결정합니다 p5의 WEBGL 모드는 ambient emissive normal specular 재질을 지원합니다 Ambient 주변광ambient light에만 반응합니다 Specular 모든 광원에 p5에서 Emissive 광원과 상관없이 본인의 색을 나타냅니다 맥락에서 보면 빛을 방출합니다 Normal 표면의 부분이 방향을 향하고 있는지를 시각화합니다 반응하지 않습니다 재질과 서로 조합될 수 있습니다 두 채우기fill와 윤곽선stroke과도 채우기는 기본 색상을 설정하고 윤곽선은 객체의 정점 설정합니다 추가적으로 texture는 이미지로 물체를 감쌉니다 예제의 모델과 이미지 텍스처는 NASA's collection에서 가져온 것입니다"},"궤도 컨트롤(Orbit Control)":{"relativeUrl":"/examples/3d-orbit-control","description":"궤도 컨트롤Orbit control은 마우스나 터치 입력을 3D 스케치에서 카메라 방향을 조정합니다 카메라를 회전하려면 마우스를 왼쪽 클릭하고 드래그하거나 터치스크린에서 스와이프하세요 이동하려면 오른쪽 두 손가락으로 스케치의 중심으로 더 가까이하거나 멀리하려면 마우스의 스크롤 휠을 사용하거나 핀치 인/아웃하세요"},"필터 셰이더(Filter Shader)":{"relativeUrl":"/examples/3d-filter-shader","description":"필터 셰이더는 캔버스에 있는 것에도 효과를 적용할 수 방법입니다 예제에서는 비디오에 효과가 적용됩니다"},"셰이더로 위치 조정하기":{"relativeUrl":"/examples/3d-adjusting-positions-with-a-shader","description":"셰이더는 도형의 정점 위치를 조정할 수 있습니다 이를 통해 3D 모델을 왜곡하고 애니메이션화할"},"프레임버퍼 흐림(Framebuffer Blur)":{"relativeUrl":"/examples/3d-framebuffer-blur","description":"예제에서 사용하는 셰이더는 p5Framebuffer로부터의 깊이 정보를 사용하여 흐림 효과를 적용합니다 실제 카메라에서 렌즈의 초점보다 가깝거나 멀리있는 물체는 흐릿하게 보입니다 이는 모방합니다 먼저 스케치는 프레임버퍼에 개의 구체를 렌더링합니다 셰이더를 프레임버퍼를 캔버스에"},"그래픽 생성하기":{"relativeUrl":"/examples/advanced-canvas-rendering-create-graphics","description":"createGraphics 함수는 새로운 p5Graphics 객체를 생성하는 데 사용됩니다 객체는 캔버스 내에서 오프-스크린 그래픽 버퍼off-screen graphic buffer로 사용될 수 있습니다 buffer는 현재 디스플레이 표면과 차원과 속성을 가질 있음에도 같은 공간에 존재하는 것처럼 보입니다"},"다중 캔버스":{"relativeUrl":"/examples/advanced-canvas-rendering-multiple-canvases","description":"기본적으로 p5는 전역 모드Global Mode에서 실행되며 이는 모든 p5 함수가 범위 안에 있고 캔버스 관련 하나의 캔버스에 적용된다는 것을 의미합니다 인스턴스 모드Instance Mode에서도 실행할 수 있으며 모드에서는 같은 함수들이 클래스의 인스턴스의 메서드가 됩니다 p5의 인스턴스는 각자의 캔버스를 가질 있습니다 모드를 사용하려면 인스턴스를 나타내는 매개변수이 예제에서는 p로 표시됨를 가진 함수를 정의해야 합니다 평소에 범위에 있던 함수와 변수들이 함수의 내에서 매개변수에 속하게 생성자에 전달하면 실행됩니다"},"셰이더를 텍스처로 사용하기":{"relativeUrl":"/examples/advanced-canvas-rendering-shader-as-a-texture","description":"셰이더는 2D/3D 도형에 텍스처로 적용될 수 있습니다 p5js에서 셰이더 사용에 대해 더 알아보기 p5js"},"눈송이(Snowflakes)":{"relativeUrl":"/examples/classes-and-objects-snowflakes","description":"예제는 입자 시스템을 사용하여 떨어지는 눈송이의 움직임을 시뮬레이션하는 방법을 보여줍니다 프로그램은 눈송이 클래스를 정의하고 배열을 객체들을 보관합니다"},"흔들어서 공 튀기기":{"relativeUrl":"/examples/classes-and-objects-shake-ball-bounce","description":"클래스를 사용하여 모바일 기기의 기울기에 반응하여 캔버스 내에서 움직이는 원들의 집합을 생성할 수 있습니다 스케치를 표시하려면 기기에서 페이지를 열어야 합니다"},"연결된 입자들":{"relativeUrl":"/examples/classes-and-objects-connected-particles","description":"예제는 두 개의 사용자 정의 클래스를 사용합니다 Particle 클래스는 위치 속도 색조를 저장합니다 현재 위치와 사용하여 원을 렌더링하고 속도를 위치를 업데이트합니다 Path 클래스에서 생성된 객체들의 배열을 이는 입자를 연결하는 선을 렌더링합니다 사용자가 마우스를 클릭하면 스케치는 클래스의 새 인스턴스를 만듭니다 드래그하면 경로에 추가합니다"},"무리지어 움직이기(Flocking)":{"relativeUrl":"/examples/classes-and-objects-flocking","description":"무리의 움직임을 시뮬레이션 합니다 구현에 대한 자세한 논의는 다니엘 쉬프만Daniel Shiffman의 Nature of Code 책에서 살펴볼 수 있습니다 시뮬레이션은 새와 비슷한 객체를 나타내는 boid'라는 용어를 사용한 크레이그 레이놀즈Craig Reynolds의 연구에 기반하고"},"로컬 스토리지(Local Storage)":{"relativeUrl":"/examples/loading-and-saving-data-local-storage","description":"브라우저는 웹사이트가 방문자의 기기에 데이터를 저장할 수 있도록 허용하고 있습니다 이를 로컬 스토리지Local Storage라고 합니다 getItem storeItem clearStorage removeItem 함수들이 제어합니다 예제는 다니엘 쉬프만Daniel Shiffman의 Java로 작성된 JSON 데이터 가져오기Loading Data와 테이블 Tabular Data 예제를 참고하여 만들어졌습니다 이는 버블에 대한 구성하기 위해 클래스를 사용합니다 방문자는 새로운 버블을 추가할 있으며 그들의 데이터는 스토리지에 저장됩니다 방문자가 스케치를 다시 방문하면 동일한 버블이 로드됩니다"},"JSON":{"relativeUrl":"/examples/loading-and-saving-data-json","description":"JavaScript Object Notation 또는 JSON은 파일에 데이터를 작성하는 형식입니다 구문은 JavaScript에서 가져왔지만 맥락에서도 많이 사용됩니다 예제는 다니엘 쉬프만Daniel Shiffman의 Java로 작성된 Processing용 JSON 데이터 로드 예제를 기반으로 합니다 이는 버블에 대한 구성하기 위해 클래스를 사용합니다 스케치가 시작될 두 개의 파일에서 로드합니다 방문자는 새로운 버블을 추가할 수 있고 업데이트된 파일을 다운로드하고 로드할 있습니다"},"테이블":{"relativeUrl":"/examples/loading-and-saving-data-table","description":"쉼표로 구분된 값CSV은 파일에 데이터를 작성하는 형식입니다 p5는 p5Table을 사용하여 형식을 작업할 수 있습니다 예제는 다니엘 쉬프만Daniel Shiffman의 Processing에서 작성된 테이블 데이터 가져오기Loading Tabular Data 예제를 기반으로 합니다 이는 버블을 나타내는 구성하기 위해 클래스를 사용합니다 스케치가 시작될 개의 버블에 대한 CSV 파일에서 로드합니다 방문자는 새로운 추가할 있고 업데이트된 파일을 다운로드하고 로드할"},"비직각 반사":{"relativeUrl":"/examples/math-and-physics-non-orthogonal-reflection","description":"예제는 반사를 위한 벡터 계산을 사용하여 경사진 표면에서 튕기는 공을 시뮬레이션합니다 코드는 새로운 벡터를 만들기 위해 createVector 함수를 포함한 p5Vector 클래스를 광범위하게 사용합니다 add와 dot 메서드를"},"소프트 바디(Soft Body)":{"relativeUrl":"/examples/math-and-physics-soft-body","description":"마우스 위치로 가속되는 부드러운 물체의 물리 시뮬레이션을 통해 소프트 바디를 구현합니다 모양은 curveVertex와 curveTightness를 사용하여 곡선으로 생성됩니다"},"힘":{"relativeUrl":"/examples/math-and-physics-forces","description":"다수의 힘이 물체에 작용하는 시뮬레이션입니다 물체에는 지속적으로 중력이 적용됩니다 물체가 물에 있을 때는 유체 저항이 작용합니다 natureofcodecom 힘 계산은 p5Vector 클래스를 사용되며 수행되며 이는 벡터를 생성하기 위한 createVector 함수를 포함합니다"},"연기 입자(Smoke Particles)":{"relativeUrl":"/examples/math-and-physics-smoke-particle-system","description":"다니엘 쉬프만Dan Shiffman의 원본 Processing 예제를 기반으로 한 연기 입자 시스템 데모입니다 코드는 p5Vector 클래스를 활용하며 이는 createVector 함수를 포함합니다 입자의 위치와 속도를 업데이트하는 다양한 계산은 메서드를 사용하여 수행됩니다 시스템은 클래스로 구현되어 있으며 Particle 클래스의 객체 배열을"},"라이프 게임(Game of Life)":{"relativeUrl":"/examples/math-and-physics-game-of-life","description":"라이프 게임Life Game은 수학자 존 콘웨이John Conway가 만든 세포 자동자입니다 자동자는 시뮬레이션의 한 유형입니다 게임에서는 셀이 죽거나 살아 있는지에 그리드가 있습니다 예제에서 검은색 정사각형은 생존하는 셀을 나타내고 흰색 죽은 나타냅니다 시뮬레이션이 실행되는 셀은 규칙에 살아납니다 주변에 살아있는 이웃이 두 개 미만인 모든 죽습니다 세 이상인 또는 개인 변경 없이 세대로 넘어갑니다 정확히 규칙은 복잡한 상호 작용을 생성합니다 캔버스를 클릭하여 무작위로 생성된 셀로 시뮬레이션을 시작할 수 다시 클릭하면 시작됩니다"},"망델브로 집합(Mandelbrot Set)":{"relativeUrl":"/examples/math-and-physics-mandelbrot","description":"다니엘 쉬프만Daniel Shiffman의 Processing 망델브로 예제를 기반으로 한 집합의 다채로운 렌더링을 제공합니다"}},"reference":{"Array":{"relativeUrl":"/reference/p5/Array"},"abs()":{"relativeUrl":"/reference/p5/abs","alias":"abs"},"acos()":{"relativeUrl":"/reference/p5/acos","alias":"acos"},"알파":{"relativeUrl":"/reference/p5/alpha"},"ambientLight()":{"relativeUrl":"/reference/p5/ambientLight","alias":"ambientLight"},"ambientMaterial()":{"relativeUrl":"/reference/p5/ambientMaterial","alias":"ambientMaterial"},"angleMode()":{"relativeUrl":"/reference/p5/angleMode","alias":"angleMode"},"applyMatrix()":{"relativeUrl":"/reference/p5/applyMatrix","alias":"applyMatrix"},"arc()":{"relativeUrl":"/reference/p5/arc","alias":"arc"},"asin()":{"relativeUrl":"/reference/p5/asin","alias":"asin"},"atan()":{"relativeUrl":"/reference/p5/atan","alias":"atan"},"atan2()":{"relativeUrl":"/reference/p5/atan2","alias":"atan2"},"background()":{"relativeUrl":"/reference/p5/background","alias":"background"},"beginClip()":{"relativeUrl":"/reference/p5/beginClip","alias":"beginClip"},"beginContour()":{"relativeUrl":"/reference/p5/beginContour","alias":"beginContour"},"beginGeometry()":{"relativeUrl":"/reference/p5/beginGeometry","alias":"beginGeometry"},"beginShape()":{"relativeUrl":"/reference/p5/beginShape","alias":"beginShape"},"bezier()":{"relativeUrl":"/reference/p5/bezier","alias":"bezier"},"bezierDetail()":{"relativeUrl":"/reference/p5/bezierDetail","alias":"bezierDetail"},"bezierPoint()":{"relativeUrl":"/reference/p5/bezierPoint","alias":"bezierPoint"},"bezierTangent()":{"relativeUrl":"/reference/p5/bezierTangent","alias":"bezierTangent"},"bezierVertex()":{"relativeUrl":"/reference/p5/bezierVertex","alias":"bezierVertex"},"blend()":{"relativeUrl":"/reference/p5/blend","alias":"blend"},"blue()":{"relativeUrl":"/reference/p5/blue","alias":"blue"},"boolean()":{"relativeUrl":"/reference/p5/boolean","alias":"boolean"},"box()":{"relativeUrl":"/reference/p5/box","alias":"box"},"밝기값":{"relativeUrl":"/reference/p5/brightness"},"buildGeometry()":{"relativeUrl":"/reference/p5/buildGeometry","alias":"buildGeometry"},"camera()":{"relativeUrl":"/reference/p5/camera","alias":"camera"},"ceil()":{"relativeUrl":"/reference/p5/ceil","alias":"ceil"},"changed()":{"relativeUrl":"/reference/p5/changed","alias":"changed"},"circle()":{"relativeUrl":"/reference/p5/circle","alias":"circle"},"class":{"relativeUrl":"/reference/p5/class"},"clear()":{"relativeUrl":"/reference/p5/clear","alias":"clear"},"clip()":{"relativeUrl":"/reference/p5/clip","alias":"clip"},"색상 함수":{"relativeUrl":"/reference/p5/color"},"colorMode()":{"relativeUrl":"/reference/p5/colorMode","alias":"colorMode"},"cone()":{"relativeUrl":"/reference/p5/cone","alias":"cone"},"DEGREES":{"relativeUrl":"/reference/p5/DEGREES"},"HALF_PI":{"relativeUrl":"/reference/p5/HALF_PI"},"PI":{"relativeUrl":"/reference/p5/PI"},"QUARTER_PI":{"relativeUrl":"/reference/p5/QUARTER_PI"},"RADIANS":{"relativeUrl":"/reference/p5/RADIANS"},"TAU":{"relativeUrl":"/reference/p5/TAU"},"TWO_PI":{"relativeUrl":"/reference/p5/TWO_PI"},"constrain()":{"relativeUrl":"/reference/p5/constrain","alias":"constrain"},"copy()":{"relativeUrl":"/reference/p5/copy","alias":"copy"},"cos()":{"relativeUrl":"/reference/p5/cos","alias":"cos"},"createA()":{"relativeUrl":"/reference/p5/createA","alias":"createA"},"createAudio()":{"relativeUrl":"/reference/p5/createAudio","alias":"createAudio"},"createButton()":{"relativeUrl":"/reference/p5/createButton","alias":"createButton"},"createCamera()":{"relativeUrl":"/reference/p5/createCamera","alias":"createCamera"},"createCapture()":{"relativeUrl":"/reference/p5/createCapture","alias":"createCapture"},"createCheckbox()":{"relativeUrl":"/reference/p5/createCheckbox","alias":"createCheckbox"},"createColorPicker()":{"relativeUrl":"/reference/p5/createColorPicker","alias":"createColorPicker"},"createDiv()":{"relativeUrl":"/reference/p5/createDiv","alias":"createDiv"},"createElement()":{"relativeUrl":"/reference/p5/createElement","alias":"createElement"},"createFileInput()":{"relativeUrl":"/reference/p5/createFileInput","alias":"createFileInput"},"createFilterShader()":{"relativeUrl":"/reference/p5/createFilterShader","alias":"createFilterShader"},"createImage()":{"relativeUrl":"/reference/p5/createImage","alias":"createImage"},"createImg()":{"relativeUrl":"/reference/p5/createImg","alias":"createImg"},"createInput()":{"relativeUrl":"/reference/p5/createInput","alias":"createInput"},"createP()":{"relativeUrl":"/reference/p5/createP","alias":"createP"},"createRadio()":{"relativeUrl":"/reference/p5/createRadio","alias":"createRadio"},"createSelect()":{"relativeUrl":"/reference/p5/createSelect","alias":"createSelect"},"createShader()":{"relativeUrl":"/reference/p5/createShader","alias":"createShader"},"createSlider()":{"relativeUrl":"/reference/p5/createSlider","alias":"createSlider"},"createSpan()":{"relativeUrl":"/reference/p5/createSpan","alias":"createSpan"},"createVector()":{"relativeUrl":"/reference/p5/createVector","alias":"createVector"},"createVideo()":{"relativeUrl":"/reference/p5/createVideo","alias":"createVideo"},"cursor()":{"relativeUrl":"/reference/p5/cursor","alias":"cursor"},"curve()":{"relativeUrl":"/reference/p5/curve","alias":"curve"},"curveDetail()":{"relativeUrl":"/reference/p5/curveDetail","alias":"curveDetail"},"curvePoint()":{"relativeUrl":"/reference/p5/curvePoint","alias":"curvePoint"},"curveTangent()":{"relativeUrl":"/reference/p5/curveTangent","alias":"curveTangent"},"curveTightness()":{"relativeUrl":"/reference/p5/curveTightness","alias":"curveTightness"},"curveVertex()":{"relativeUrl":"/reference/p5/curveVertex","alias":"curveVertex"},"cylinder()":{"relativeUrl":"/reference/p5/cylinder","alias":"cylinder"},"debugMode()":{"relativeUrl":"/reference/p5/debugMode","alias":"debugMode"},"degrees()":{"relativeUrl":"/reference/p5/degrees","alias":"degrees"},"deltaTime":{"relativeUrl":"/reference/p5/deltaTime"},"describe()":{"relativeUrl":"/reference/p5/describe","alias":"describe"},"describeElement()":{"relativeUrl":"/reference/p5/describeElement","alias":"describeElement"},"directionalLight()":{"relativeUrl":"/reference/p5/directionalLight","alias":"directionalLight"},"displayDensity()":{"relativeUrl":"/reference/p5/displayDensity","alias":"displayDensity"},"displayHeight":{"relativeUrl":"/reference/p5/displayHeight"},"displayWidth":{"relativeUrl":"/reference/p5/displayWidth"},"dist()":{"relativeUrl":"/reference/p5/dist","alias":"dist"},"doubleClicked()":{"relativeUrl":"/reference/p5/doubleClicked","alias":"doubleClicked"},"ellipse()":{"relativeUrl":"/reference/p5/ellipse","alias":"ellipse"},"ellipseMode()":{"relativeUrl":"/reference/p5/ellipseMode","alias":"ellipseMode"},"ellipsoid()":{"relativeUrl":"/reference/p5/ellipsoid","alias":"ellipsoid"},"emissiveMaterial()":{"relativeUrl":"/reference/p5/emissiveMaterial","alias":"emissiveMaterial"},"endClip()":{"relativeUrl":"/reference/p5/endClip","alias":"endClip"},"endContour()":{"relativeUrl":"/reference/p5/endContour","alias":"endContour"},"endGeometry()":{"relativeUrl":"/reference/p5/endGeometry","alias":"endGeometry"},"endShape()":{"relativeUrl":"/reference/p5/endShape","alias":"endShape"},"erase()":{"relativeUrl":"/reference/p5/erase","alias":"erase"},"exitPointerLock()":{"relativeUrl":"/reference/p5/exitPointerLock","alias":"exitPointerLock"},"exp()":{"relativeUrl":"/reference/p5/exp","alias":"exp"},"filter()":{"relativeUrl":"/reference/p5/filter","alias":"filter"},"floor()":{"relativeUrl":"/reference/p5/floor","alias":"floor"},"focused()":{"relativeUrl":"/reference/p5/focused","alias":"focused"},"for":{"relativeUrl":"/reference/p5/for"},"fract()":{"relativeUrl":"/reference/p5/fract","alias":"fract"},"frameCount":{"relativeUrl":"/reference/p5/frameCount"},"frameRate()":{"relativeUrl":"/reference/p5/frameRate","alias":"frameRate"},"freeGeometry()":{"relativeUrl":"/reference/p5/freeGeometry","alias":"freeGeometry"},"frustum()":{"relativeUrl":"/reference/p5/frustum","alias":"frustum"},"fullscreen()":{"relativeUrl":"/reference/p5/fullscreen","alias":"fullscreen"},"function":{"relativeUrl":"/reference/p5/function"},"get()":{"relativeUrl":"/reference/p5/get","alias":"get"},"getTargetFrameRate()":{"relativeUrl":"/reference/p5/getTargetFrameRate","alias":"getTargetFrameRate"},"getURL()":{"relativeUrl":"/reference/p5/getURL","alias":"getURL"},"getURLParams()":{"relativeUrl":"/reference/p5/getURLParams","alias":"getURLParams"},"getURLPath()":{"relativeUrl":"/reference/p5/getURLPath","alias":"getURLPath"},"초록(green)()":{"relativeUrl":"/reference/p5/green","alias":"초록(green)"},"gridOutput()":{"relativeUrl":"/reference/p5/gridOutput","alias":"gridOutput"},"height":{"relativeUrl":"/reference/p5/height"},"색조":{"relativeUrl":"/reference/p5/hue"},"if":{"relativeUrl":"/reference/p5/if"},"image()":{"relativeUrl":"/reference/p5/image","alias":"image"},"imageLight()":{"relativeUrl":"/reference/p5/imageLight","alias":"imageLight"},"imageMode()":{"relativeUrl":"/reference/p5/imageMode","alias":"imageMode"},"input()":{"relativeUrl":"/reference/p5/input","alias":"input"},"key":{"relativeUrl":"/reference/p5/key"},"keyCode":{"relativeUrl":"/reference/p5/keyCode"},"keyIsDown()":{"relativeUrl":"/reference/p5/keyIsDown","alias":"keyIsDown"},"keyIsPressed":{"relativeUrl":"/reference/p5/keyIsPressed"},"keyPressed()":{"relativeUrl":"/reference/p5/keyPressed","alias":"keyPressed"},"keyReleased()":{"relativeUrl":"/reference/p5/keyReleased","alias":"keyReleased"},"keyTyped()":{"relativeUrl":"/reference/p5/keyTyped","alias":"keyTyped"},"lerp()":{"relativeUrl":"/reference/p5/lerp","alias":"lerp"},"lerpColor()":{"relativeUrl":"/reference/p5/lerpColor","alias":"lerpColor"},"let":{"relativeUrl":"/reference/p5/let"},"lightFalloff()":{"relativeUrl":"/reference/p5/lightFalloff","alias":"lightFalloff"},"lightness()":{"relativeUrl":"/reference/p5/lightness","alias":"lightness"},"lights()":{"relativeUrl":"/reference/p5/lights","alias":"lights"},"line()":{"relativeUrl":"/reference/p5/line","alias":"line"},"linePerspective()":{"relativeUrl":"/reference/p5/linePerspective","alias":"linePerspective"},"loadFont()":{"relativeUrl":"/reference/p5/loadFont","alias":"loadFont"},"loadImage()":{"relativeUrl":"/reference/p5/loadImage","alias":"loadImage"},"loadModel()":{"relativeUrl":"/reference/p5/loadModel","alias":"loadModel"},"loadPixels()":{"relativeUrl":"/reference/p5/loadPixels","alias":"loadPixels"},"loadShader()":{"relativeUrl":"/reference/p5/loadShader","alias":"loadShader"},"log()":{"relativeUrl":"/reference/p5/log","alias":"log"},"mag()":{"relativeUrl":"/reference/p5/mag","alias":"mag"},"map()":{"relativeUrl":"/reference/p5/map","alias":"map"},"max()":{"relativeUrl":"/reference/p5/max","alias":"max"},"metalness()":{"relativeUrl":"/reference/p5/metalness","alias":"metalness"},"min()":{"relativeUrl":"/reference/p5/min","alias":"min"},"model()":{"relativeUrl":"/reference/p5/model","alias":"model"},"mouseButton":{"relativeUrl":"/reference/p5/mouseButton"},"mouseClicked()":{"relativeUrl":"/reference/p5/mouseClicked","alias":"mouseClicked"},"mouseDragged()":{"relativeUrl":"/reference/p5/mouseDragged","alias":"mouseDragged"},"mouseIsPressed":{"relativeUrl":"/reference/p5/mouseIsPressed"},"mouseMoved()":{"relativeUrl":"/reference/p5/mouseMoved","alias":"mouseMoved"},"mousePressed()":{"relativeUrl":"/reference/p5/mousePressed","alias":"mousePressed"},"mouseReleased()":{"relativeUrl":"/reference/p5/mouseReleased","alias":"mouseReleased"},"mouseWheel()":{"relativeUrl":"/reference/p5/mouseWheel","alias":"mouseWheel"},"mouseX":{"relativeUrl":"/reference/p5/mouseX"},"mouseY":{"relativeUrl":"/reference/p5/mouseY"},"movedX":{"relativeUrl":"/reference/p5/movedX"},"movedY":{"relativeUrl":"/reference/p5/movedY"},"noCursor()":{"relativeUrl":"/reference/p5/noCursor","alias":"noCursor"},"noDebugMode()":{"relativeUrl":"/reference/p5/noDebugMode","alias":"noDebugMode"},"noErase()":{"relativeUrl":"/reference/p5/noErase","alias":"noErase"},"noFill()":{"relativeUrl":"/reference/p5/noFill","alias":"noFill"},"noLights()":{"relativeUrl":"/reference/p5/noLights","alias":"noLights"},"noSmooth()":{"relativeUrl":"/reference/p5/noSmooth","alias":"noSmooth"},"noStroke()":{"relativeUrl":"/reference/p5/noStroke","alias":"noStroke"},"noTint()":{"relativeUrl":"/reference/p5/noTint","alias":"noTint"},"noise()":{"relativeUrl":"/reference/p5/noise","alias":"noise"},"noiseDetail()":{"relativeUrl":"/reference/p5/noiseDetail","alias":"noiseDetail"},"noiseSeed()":{"relativeUrl":"/reference/p5/noiseSeed","alias":"noiseSeed"},"norm()":{"relativeUrl":"/reference/p5/norm","alias":"norm"},"normal()":{"relativeUrl":"/reference/p5/normal","alias":"normal"},"normalMaterial()":{"relativeUrl":"/reference/p5/normalMaterial","alias":"normalMaterial"},"Number":{"relativeUrl":"/reference/p5/number"},"Object":{"relativeUrl":"/reference/p5/object"},"orbitControl()":{"relativeUrl":"/reference/p5/orbitControl","alias":"orbitControl"},"ortho()":{"relativeUrl":"/reference/p5/ortho","alias":"ortho"},"p5.Camera":{"relativeUrl":"/reference/p5/p5.Camera"},"p5.Color":{"relativeUrl":"/reference/p5/p5.Color"},"p5.Element":{"relativeUrl":"/reference/p5/p5.Element"},"p5.File":{"relativeUrl":"/reference/p5/p5.File"},"p5.Font":{"relativeUrl":"/reference/p5/p5.Font"},"p5.Image":{"relativeUrl":"/reference/p5/p5.Image"},"p5.MediaElement":{"relativeUrl":"/reference/p5/p5.MediaElement"},"p5.Shader":{"relativeUrl":"/reference/p5/p5.Shader"},"p5.Vector":{"relativeUrl":"/reference/p5/p5.Vector"},"panorama()":{"relativeUrl":"/reference/p5/panorama","alias":"panorama"},"perspective()":{"relativeUrl":"/reference/p5/perspective","alias":"perspective"},"pixelDensity()":{"relativeUrl":"/reference/p5/pixelDensity","alias":"pixelDensity"},"pixels":{"relativeUrl":"/reference/p5/pixels"},"plane()":{"relativeUrl":"/reference/p5/plane","alias":"plane"},"pmouseX":{"relativeUrl":"/reference/p5/pmouseX"},"pmouseY":{"relativeUrl":"/reference/p5/pmouseY"},"point()":{"relativeUrl":"/reference/p5/point","alias":"point"},"pointLight()":{"relativeUrl":"/reference/p5/pointLight","alias":"pointLight"},"pow()":{"relativeUrl":"/reference/p5/pow","alias":"pow"},"print()":{"relativeUrl":"/reference/p5/print","alias":"print"},"pwinMouseX":{"relativeUrl":"/reference/p5/pwinMouseX"},"pwinMouseY":{"relativeUrl":"/reference/p5/pwinMouseY"},"quad()":{"relativeUrl":"/reference/p5/quad","alias":"quad"},"quadraticVertex()":{"relativeUrl":"/reference/p5/quadraticVertex","alias":"quadraticVertex"},"radians()":{"relativeUrl":"/reference/p5/radians","alias":"radians"},"random()":{"relativeUrl":"/reference/p5/random","alias":"random"},"randomGaussian()":{"relativeUrl":"/reference/p5/randomGaussian","alias":"randomGaussian"},"randomSeed()":{"relativeUrl":"/reference/p5/randomSeed","alias":"randomSeed"},"rect()":{"relativeUrl":"/reference/p5/rect","alias":"rect"},"rectMode()":{"relativeUrl":"/reference/p5/rectMode","alias":"rectMode"},"red()":{"relativeUrl":"/reference/p5/red","alias":"red"},"removeElements()":{"relativeUrl":"/reference/p5/removeElements","alias":"removeElements"},"requestPointerLock()":{"relativeUrl":"/reference/p5/requestPointerLock","alias":"requestPointerLock"},"resetMatrix()":{"relativeUrl":"/reference/p5/resetMatrix","alias":"resetMatrix"},"resetShader()":{"relativeUrl":"/reference/p5/resetShader","alias":"resetShader"},"rotate()":{"relativeUrl":"/reference/p5/rotate","alias":"rotate"},"rotateX()":{"relativeUrl":"/reference/p5/rotateX","alias":"rotateX"},"rotateY()":{"relativeUrl":"/reference/p5/rotateY","alias":"rotateY"},"rotateZ()":{"relativeUrl":"/reference/p5/rotateZ","alias":"rotateZ"},"round()":{"relativeUrl":"/reference/p5/round","alias":"round"},"saturation()":{"relativeUrl":"/reference/p5/saturation","alias":"saturation"},"saveCanvas()":{"relativeUrl":"/reference/p5/saveCanvas","alias":"saveCanvas"},"saveFrames()":{"relativeUrl":"/reference/p5/saveFrames","alias":"saveFrames"},"saveGif()":{"relativeUrl":"/reference/p5/saveGif","alias":"saveGif"},"scale()":{"relativeUrl":"/reference/p5/scale","alias":"scale"},"select()":{"relativeUrl":"/reference/p5/select","alias":"select"},"selectAll()":{"relativeUrl":"/reference/p5/selectAll","alias":"selectAll"},"set()":{"relativeUrl":"/reference/p5/set","alias":"set"},"setCamera()":{"relativeUrl":"/reference/p5/setCamera","alias":"setCamera"},"shader()":{"relativeUrl":"/reference/p5/shader","alias":"shader"},"shearX()":{"relativeUrl":"/reference/p5/shearX","alias":"shearX"},"shearY()":{"relativeUrl":"/reference/p5/shearY","alias":"shearY"},"shininess()":{"relativeUrl":"/reference/p5/shininess","alias":"shininess"},"sin()":{"relativeUrl":"/reference/p5/sin","alias":"sin"},"specularColor()":{"relativeUrl":"/reference/p5/specularColor","alias":"specularColor"},"specularMaterial()":{"relativeUrl":"/reference/p5/specularMaterial","alias":"specularMaterial"},"sphere()":{"relativeUrl":"/reference/p5/sphere","alias":"sphere"},"spotLight()":{"relativeUrl":"/reference/p5/spotLight","alias":"spotLight"},"sq()":{"relativeUrl":"/reference/p5/sq","alias":"sq"},"sqrt()":{"relativeUrl":"/reference/p5/sqrt","alias":"sqrt"},"String":{"relativeUrl":"/reference/p5/string"},"strokeCap()":{"relativeUrl":"/reference/p5/strokeCap","alias":"strokeCap"},"strokeJoin()":{"relativeUrl":"/reference/p5/strokeJoin","alias":"strokeJoin"},"strokeWeight()":{"relativeUrl":"/reference/p5/strokeWeight","alias":"strokeWeight"},"tan()":{"relativeUrl":"/reference/p5/tan","alias":"tan"},"text()":{"relativeUrl":"/reference/p5/text","alias":"text"},"textAlign()":{"relativeUrl":"/reference/p5/textAlign","alias":"textAlign"},"textAscent()":{"relativeUrl":"/reference/p5/textAscent","alias":"textAscent"},"textDescent()":{"relativeUrl":"/reference/p5/textDescent","alias":"textDescent"},"textFont()":{"relativeUrl":"/reference/p5/textFont","alias":"textFont"},"textLeading()":{"relativeUrl":"/reference/p5/textLeading","alias":"textLeading"},"textOutput()":{"relativeUrl":"/reference/p5/textOutput","alias":"textOutput"},"textSize()":{"relativeUrl":"/reference/p5/textSize","alias":"textSize"},"textStyle()":{"relativeUrl":"/reference/p5/textStyle","alias":"textStyle"},"textWidth()":{"relativeUrl":"/reference/p5/textWidth","alias":"textWidth"},"textWrap()":{"relativeUrl":"/reference/p5/textWrap","alias":"textWrap"},"texture()":{"relativeUrl":"/reference/p5/texture","alias":"texture"},"textureMode()":{"relativeUrl":"/reference/p5/textureMode","alias":"textureMode"},"textureWrap()":{"relativeUrl":"/reference/p5/textureWrap","alias":"textureWrap"},"tint()":{"relativeUrl":"/reference/p5/tint","alias":"tint"},"torus()":{"relativeUrl":"/reference/p5/torus","alias":"torus"},"touchEnded()":{"relativeUrl":"/reference/p5/touchEnded","alias":"touchEnded"},"touchMoved()":{"relativeUrl":"/reference/p5/touchMoved","alias":"touchMoved"},"touchStarted()":{"relativeUrl":"/reference/p5/touchStarted","alias":"touchStarted"},"touches":{"relativeUrl":"/reference/p5/touches"},"translate()":{"relativeUrl":"/reference/p5/translate","alias":"translate"},"triangle()":{"relativeUrl":"/reference/p5/triangle","alias":"triangle"},"updatePixels()":{"relativeUrl":"/reference/p5/updatePixels","alias":"updatePixels"},"vertex()":{"relativeUrl":"/reference/p5/vertex","alias":"vertex"},"webglVersion":{"relativeUrl":"/reference/p5/webglVersion"},"while":{"relativeUrl":"/reference/p5/while"},"width":{"relativeUrl":"/reference/p5/width"},"winMouseX":{"relativeUrl":"/reference/p5/winMouseX"},"winMouseY":{"relativeUrl":"/reference/p5/winMouseY"},"windowHeight":{"relativeUrl":"/reference/p5/windowHeight"},"windowResized()":{"relativeUrl":"/reference/p5/windowResized","alias":"windowResized"},"windowWidth":{"relativeUrl":"/reference/p5/windowWidth"},"p5.Camera.camera()":{"relativeUrl":"/reference/p5.Camera/camera","alias":"camera"},"p5.Camera.centerX":{"relativeUrl":"/reference/p5.Camera/centerX","alias":"centerX"},"p5.Camera.centerY":{"relativeUrl":"/reference/p5.Camera/centerY","alias":"centerY"},"p5.Camera.centerZ":{"relativeUrl":"/reference/p5.Camera/centerZ","alias":"centerZ"},"p5.Camera.eyeX":{"relativeUrl":"/reference/p5.Camera/eyeX","alias":"eyeX"},"p5.Camera.eyeY":{"relativeUrl":"/reference/p5.Camera/eyeY","alias":"eyeY"},"p5.Camera.eyeZ":{"relativeUrl":"/reference/p5.Camera/eyeZ","alias":"eyeZ"},"p5.Camera.frustum()":{"relativeUrl":"/reference/p5.Camera/frustum","alias":"frustum"},"p5.Camera.lookAt()":{"relativeUrl":"/reference/p5.Camera/lookAt","alias":"lookAt"},"p5.Camera.move()":{"relativeUrl":"/reference/p5.Camera/move","alias":"move"},"p5.Camera.ortho()":{"relativeUrl":"/reference/p5.Camera/ortho","alias":"ortho"},"p5.Camera.pan()":{"relativeUrl":"/reference/p5.Camera/pan","alias":"pan"},"p5.Camera.perspective()":{"relativeUrl":"/reference/p5.Camera/perspective","alias":"perspective"},"p5.Camera.set()":{"relativeUrl":"/reference/p5.Camera/set","alias":"set"},"p5.Camera.setPosition()":{"relativeUrl":"/reference/p5.Camera/setPosition","alias":"setPosition"},"p5.Camera.slerp()":{"relativeUrl":"/reference/p5.Camera/slerp","alias":"slerp"},"p5.Camera.tilt()":{"relativeUrl":"/reference/p5.Camera/tilt","alias":"tilt"},"p5.Camera.upX":{"relativeUrl":"/reference/p5.Camera/upX","alias":"upX"},"p5.Camera.upY":{"relativeUrl":"/reference/p5.Camera/upY","alias":"upY"},"p5.Camera.upZ":{"relativeUrl":"/reference/p5.Camera/upZ","alias":"upZ"},"p5.Shader.copyToContext()":{"relativeUrl":"/reference/p5.Shader/copyToContext","alias":"copyToContext"},"p5.Shader.setUniform()":{"relativeUrl":"/reference/p5.Shader/setUniform","alias":"setUniform"}},"contributor-docs-fallback":{"🌸 Welcome! 🌺\n":{"relativeUrl":"/contribute/README","description":"interest contributing p5js collaborative project contributions volunteers community contributors appreciates involvement forms acknowledge capacity time financial means participate actively ways expand meaning word contributor experienced developer starting unique perspectives skills experiences enrich encourage involved works includes documentation teaching writing code making art design activism organizing curating imagine [contribute page](https://p5js.org/contribute/) overview contribute [all-contributors](https://github.com/kentcdodds/all-contributors/) specification @all-contributors bot handle adding people READMEmd file add issue PR comment ``` @[your GitHub handle] [your contribution type] find relevant type [here](https://allcontributors.org/docs/en/emoji-key/). automatically list merging docs published [website](https://p5js.org/contribute/), hosted [GitHub repository](https://github.com/processing/p5.js/tree/main/contributor_docs/). Contributing stress free experience levels fixing small typo refactoring complex 3D rendering functionalities things familiar read [community statement](https://p5js.org/about/#community-statement). prioritizing work expands access inclusion accessibility [our statement]/access/ details Started ready start started reasons purpose split roughly categories * Source including Non-source Depending kind section ## [Source contribution]/contributor_guidelines/ typical p5js-website repository follow steps Open Discuss Approved opening Pull Request Make merged Head [this link]/contributor_guidelines/ guided step navigate table contents page skip part refresher stick workflow strictly contributed projects feel hoops jump simple aimed make easy stewards/maintainers meaningfully spending working accepted ensure proposals fixes adequately discussed considered begin save steward/maintainer additional review outright happen result **We learning opportunity** measure sucess volume received limit long takes complete pace check period inactivity stewards maintainers support information related area general maintenance [steward guidelines]/steward_guidelines/ non-source exhaustively listed involve repositories examples tutorials website planned reach channel email social media [Discourse forum](https://discourse.processing.org/c/p5js/10/), Discord **Create** Inspire sketches designers artists coders programmers showcase creative amazing sketch gallery Dont forget tag @p5xjs [Instagram](https://www.instagram.com/p5xjs/) [X](https://twitter.com/p5xjs/), share **Teach** Teach workshop class friend collaborator Share syllabus video materials **Organize** Host events Curate exhibition Activate local **Donate** open-source made supported dedicated remain restrictions impact life position give back donation Processing Foundation donations directly fund development features improved designed inclusive welcomes background resources level thought dont [let know]mailtohello@p5jsorg participation important contributes lively"},"Our Focus on Access\n":{"relativeUrl":"/contribute/access","description":"{/* commitment access means contributors users library */} [2019 Contributors Conference](https://p5js.org/events/contributors-conference-2019/), p5js made add features increase inclusion accessibility accept feature requests support efforts commit work acknowledging dismantling preventing barriers intersecting[^1] experiences diversity impact participation include alignments gender race ethnicity sexuality language location cetera center marginalized groups continued comfort privileged community collectively exploring meaning learning practice teach choose expansive intersectional coalitionary frameworks part core values outlined [Community Statement](https://p5js.org/about/#community-statement). ## Kinds Increasing focused expanding raw number people making approachable excluded consequence structural oppression extends tools platforms offers includes makeup decision-making actions leadership resist technological culture speed growth competition prioritize intentionality slowness accommodation accountability acts collective care Access equitable * People speak languages English Black Indigenous Color ethnicities Lesbian gay bisexual queer questioning pansexual asexual Trans genderfluid agender intersex two-spirit women genders blind d/Deaf[^2] hard hearing disabled/have disability neurodivergent chronically ill[^3] lower income lack financial cultural capital prior experience open source creative coding diverse educational backgrounds age including children elders variety skill internet religious systematically historically underrepresented intersections thereof recognize complexity terms describe respective identities Language nuanced evolving contested exhaustive list provide attempt accountable commitments ### Examples examples Translating documentation materials decentering linguistic imperialism[^4] Rolando Vargas [Processing Kuna Language](https://medium.com/@ProcessingOrg/culture-as-translation-processing-in-kuna-language-with-rolando-vargas-and-edinson-izquierdo-8079f14851f7/), Felipe Santos Gomes Julia Brasil Katherine Finn Zander Marcela Mancinos [Pê Cinco Internationalization Popularization Portuguese Speakers](https://medium.com/processing-foundation/translating-p5-js-into-portuguese-for-the-brazilian-community-14b969e77ab1/)) Improving assistive technologies screen readers Katie Lius [Adding Alt Text p5.js](https://medium.com/processing-foundation/adding-alt-text-e2c7684e44f8/), Claire Kearney-Volpes [P5 Accessibility Project](https://medium.com/processing-foundation/p5-accessibility-115d84535fa8/)) [Web Content Guidelines](https://www.w3.org/TR/WCAG21/) working easier follow projects Making error messages helpful supportive tool [p5js Friendly Error System FES]/friendly_error_system/ Mentoring supporting learners communities digital arts Hosting events Day 2022](https://p5js.org/events/p5js-access-day-2022/), [The Web W3C TPAC 2020)](https://medium.com/processing-foundation/p5-js-x-w3c-tpac-bee4c621a053/) access-centered organizing tactics ASL interpretation live captioning accessible venues Supporting creation resources Adekemi Sijuwade-Ukadikes [A11y Syllabus](http://a11ysyllabus.site/)) Publishing reports WCAG guidelines plain focus beginners [OSACC Report](https://github.com/processing/OSACC-p5.js-Access-Report/)) Maintenance accepting effort criteria reflected issue pull request templates affirm intention maintain existing set fix bugs area codebase consistency makes improve Performance increases powerful hardware Support drawing to/reading framebuffers Consistency API Add arcVertex creating arcs beginShape/endShape *** living document continue conversation invite engage describes ideas suggestions share Github emailing [hello@p5jsorg]mailtohello@p5jsorg version Statement revised collaboration Evelyn Masso Nat Decker Bobby Joe Smith III Sammie Veeler Sonia Suhyun Choi Xin Kate Hollenbach Lauren Lee McCarthy Caroline Sinders Qianqian Ye Tristan Jovani Magno Espinoza Tanvi Sharma Tsige Tafesse Sarah Ciston Open Source Arts Conference finalized published Processing Foundation Fellowship [^1] Crenshaw Kimberlé Demarginalizing intersection sex black feminist critique antidiscrimination doctrine theory antiracist politics University Chicago Legal Forum 139–167 ISSN 0892-5593 Full text Archiveorg [^2] Capital Deaf refers culturally case deaf audiological term identity [^3] differing preferences person-first identity-first Read [Unpacking debate autism community](https://news.northeastern.edu/2018/07/12/unpacking-the-debate-over-person-first-vs-identity-first-language-in-the-autism-community/), [Disability-Affirming Person-First versus Identity-First Language](https://editorstorontoblog.com/2024/02/23/disability-affirming-language-person-first-versus-identity-first-language/), [Person-First Glossary](https://ogs.ny.gov/system/files/documents/2024/02/person-first-and-identity-first-glossary_english_final.pdf). [^4] Linguistic Imperialism ongoing domination/prioritization/imposition expense native due imperial expansion globalization"},"Contributing to the p5.js Reference\n":{"relativeUrl":"/contribute/contributing_to_the_p5js_reference","description":"{/* Write edit p5js reference format */} author code [reference](https://p5js.org/reference/) page website including alongside librarys source specialized comments include description functions signature parameters return usage examples words content function/variables built document show write eventually rendered correctly follow guide editing writing function variable ## quick introduction work lines library ``` /** * Calculates sine angle `sin` geometric tasks creative coding values returned oscillate -1 input increases takes account current angleMode @method sin @param {Number} @return @example draw { background200 = frameCount sint + linex circlex describe'A white ball string oscillates down' } sinx pointx series black dots form wave pattern' cost infinity symbol' */ actual JavaScript defines Reference start `/**` end `*/` line starting `*` block manner interpreted documentation familiar style [JSDoc](https://jsdoc.app/). JSDoc similar tool called [YUIDoc](https://yui.github.io/yuidoc/), syntax comment divided individual elements Lets break section compare [`sin()`](https://p5js.org/reference/p5/sin/). top text markdown HTML concise describe details quirks behaviors typically sections `@` symbol keywords `@method` define case note brackets `` `@param` arguments accepts keyword stored curly `{}` type parameter word rest `@return` generically {type} Description optional add square [name] ### Additional info Constants defined [`constants.js`](https://github.com/processing/p5.js/blob/main/src/core/constants.js) `{Constant}` valid enumerated `either` {Constant} horizAlign horizontal alignment LEFT CENTER types data tag left Chaining method returns parent object skip @chainable signatures multiple options individually [`background()`](https://p5js.org/reference/p5/background/) number Syntax Choose version list template additional tags background {String} colorstring color formats integer rgb rgba percentage 3-digit hex 6-digit [a] alpha gray specifies Multiple create separate difference addition Limit feature unnecessary noise variables looked references constants Variables structure system mouseX position mouse relative canvas top-left corner 2-D -width/2 -height/2 WebGL touch hold recent point @property @readOnly // Move background244 linemouseX describe'horizontal moves x-position' `mouseX` `@property` defining `@readonly` present internally overwritten directly user Adding `mouseX`s talked `@example` run visit [Screenshot red showing section]src/content/contributor-docs/images/reference-screenshotpng relevant const color255 fillc rect15 Sets redValue redc fillredValue rect50 rectangles edges rectangle yellow opening closing insert basic principle good things simple minimal meaningful explain works complicated 100x100 pixels `setup` included automatically wrapped default created wont practices featureTo closed separated blank arc50 PI QUARTER_PI OPEN describe'An ellipse arc open' describe'The bottom half arc' execute class `norender` describe'ellipse part automated tests requires interaction `notest` setup createCanvas100 saveCanvasc myCanvas' jpg' external asset files put [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets/) folder reuse link assets/filenameext [tint()](https://p5js.org/reference/p5/tint/) Add `describe` Finally required screen-reader accessible Include happening xoff background204 noisexoff width linen height vertical randomly right' noiseScale background0 [web accessibility contributor documentation]/web_accessibility/#describe tools needed situationally `@private` property private marked reason mark internal features `_start` _start calls preload @private p5prototype_start `@module` related file Modules correspond group split Inside module submodules `@submodule` `@for` relationship `p5` effectively `@requires` imported modules depends @module Color @submodule Creating Reading @for p5 @requires core convention subfolder `src/` inside subfolders adding subfolders/files shouldnt `@class` Class constructors `@constructor` classs constructor `p5Color` stores mode level maxes active construction interpret passed object's determine output formatting saturation array ideal RGBA floating normalized calculate closest screen colors levels Screen renderer representations calculated results cached performance floating-point numbers recommended instance @class p5Color @constructor {p5} [pInst] pointer {Number[]|String} vals green blue channel CSS Generating previewing repository set generate preview needing build main command npm docs `docs/reference/datajson` minification render continuous docsdev launch live update time make refresh making running browser `docs/` cases `docs/yuidoc-p5-theme/assets` steps checkout [JSDoc](https://jsdoc.app/) [YUIDoc](https://yui.github.io/yuidoc/). issues [#6519](https://github.com/processing/p5.js/issues/6519/) [#6045](https://github.com/processing/p5.js/issues/6045/). [contributor guidelines]/contributor_guidelines/ place"},"Contributor Guidelines\n":{"relativeUrl":"/contribute/contributor_guidelines","description":"{/* Essential information contributing p5js GitHub */} contributor guidelines document contributors contribute code refresh memories technical steps contributions repositories writing tutorials planning classes organizing events relevant pages Stewards maintainers find [steward guidelines]/steward_guidelines/ helpful reviewing issues pull requests long comprehensive signpost points utilize table contents sections Feel free skip planned **If start section step-by-step setup development process Quick Started Developers section** Table Contents * [All issues]#all-about-issues [What issues]#what-are-issues [Issue templates]#issue-templates [Found bug]#found-a-bug [Existing Feature Enhancement]#existing-feature-enhancement [New Request]#new-feature-request [Discussion]#discussion [Working codebase]#working-on-the-p5js-codebase [Quick Developers]#quick-get-started-for-developers [Using Github edit functionality]#using-the-github-edit-functionality [Forking working fork]#forking-p5js-and-working-from-your-fork Desktop]#using-github-desktop git command line interface]#using-the-git-command-line-interface [Codebase breakdown]#codebase-breakdown [Build setup]#build-setup [Git workflow]#git-workflow [Source code]#source-code [Unit tests]#unit-tests [Inline documentation]#inline-documentation [Accessibility]#accessibility [Code standard]#code-standard [Software Design principles]#software-design-principles [Pull requests]#pull-requests [Creating request]#creating-a-pull-request request information]#pull-request-information [Title]#title [Resolves]#resolves [Changes]#changes [Screenshots change]#screenshots-of-the-change [PR Checklist]#pr-checklist [Rebase resolve conflicts]#rebase-and-resolve-conflicts [Discuss amend]#discuss-and-amend *** majority activity repo short great place contribution journey ## [A cropped screenshot library repository showing top corner red box drawn surrounding Issues tab]src/content/contributor-docs/images/issues-tabpng Issue generic post aims describe issue bug report add feature discussion works related Comments added account including bots discuss topics project opened wide variety reasons source Topics debugging inviting collaborators unrelated discussed [forum](https://discourse.processing.com) platforms [Discord](https://discord.gg/SHQ8dH25r9/). created easy-to-use templates aid deciding topic posted p5js's make easier stewards understand review file receive reply faster [Screenshot title Warning logged Safari filter shader 2D mode #6597]src/content/contributor-docs/images/github-issuepng simply tab click button side presented options corresponds template redirects question recommend choosing option ensure receives attention promptly [Cropped repository's page green highlighted it]src/content/contributor-docs/images/new-issuepng ### bug\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml) encounter incorrect behavior behaving documentation [this template](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Bug\\&projects=\\&template=found-a-bug.yml). note debug sketch problem [Discourse forum](https://discourse.processing.org) fields fill *Most sub-area p5js* - helps identify respond automatically tagging [labels](https://github.com/processing/p5.js/labels/). *p5js version* version number `` tag link p5js/p5minjs similar `142` numbers separated periods *Web browser isolate behaviors browsers follow instructions Chrome Firefox address bar navigate `chrome//version` `aboutsupport` menu item choose *Operating System* include OS `macOS 125` bugs stem *Steps reproduce this* arguably important share list detailed replicating Sharing basic sample demonstrates replicate facing formulating solution **Replication key** aimed provide sketch's environment solutions **Be avoid statements** image function work specific display loaded GIF size things expect expected actual fix reported description simple suggestion support **You approved implementation** proposed accepted approach filed fixing closed approval reports [area steward maintainer](https://github.com/processing/p5.js#stewards) begin Enhancement\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Enhancement\\&projects=\\&template=existing-feature-enhancement.yml) propose functionality existing features functions constants rendering define color `color` accept colors *Increasing Access* required field insert statement adding enhancement [increase access]/access/ people historically marginalized creative arts technology **No proposals this** offer members community argument addresses accessibility *Feature details* proposal good includes clear case needed guarantee Request\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Feature+Request\\&projects=\\&template=feature-request.yml) drawing native HTML elements `createTable` overlap cases whichever feel form identical Existing Enhancement [previous section]#existing-feature-enhancement details maintainers](https://github.com/processing/p5.js#stewards) [\"Discussion\"](https://github.com/processing/p5.js/issues/new?assignees=\\&labels=Discussion\\&projects=\\&template=discussion.yml) filing fit fitting rare practice adopt Web API [new request]#new-feature-request additional [feature enchancement]#existing-feature-enchancement announcement local coding event forum contacting Processing Foundation publicity opening Labels panel panels labels area bare minimum text link](https://github.com/processing/p5.js/issues/6517/) [**⬆ back top**]#contributor-guidelines Working codebase Prerequisites proceed minimally familiar nodejs v18 Introduction implementation ready Similarly joined discussions original author volunteer submit assign jump queue** PR willingness assigned prioritize serve order accepting months individual check leaving polite comment progress generally time frame basis takes pace confident hard limit spend trouble aspect hesitate guide work/contribute p5js'🌸 developer directly improving sub-projects [Friendly Error Systems]/friendly_error_system/ [Create fork p5.js.](https://docs.github.com/en/get-started/quickstart/fork-a-repo/) [Clone computer.](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository/) [Add upstream command](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/configuring-a-remote-repository-for-a-fork/): ``` remote https://github.com/processing/p5.js Make machine [NodeJs](https://nodejs.org/en/download/) installed node -v Install dependencies npm ci Create branch `main` descriptive checkout -b [branch_name] making frequently run tests ensures broken test Add unit commit create Request]#pull-requests viewing web interface content pencil icon convenient provided simplifies processes covering quick edits view src/color/color\\_conversionjs arrow pointing image]src/content/contributor-docs/images/edit-filepng recommended main complex built tested locally fluent compared editing Forking step meaning open purpose means creating copy storing Fork labeled 593k outlined dark orange]src/content/contributor-docs/images/forkpng direct write access official Desktop program lets graphical user typing commands terminal switch [download install Desktop.](https://desktop.github.com/) application sign signed projects Select named `yourUsername/p5js` blue Clone change leave default settings continue [The signing half screen lists bottom right]src/content/contributor-docs/images/github-desktop-initpng cloned plan parent Continue cloning asks purposes]src/content/contributor-docs/images/github-desktop-forkpng `git` fork's URL clicking Code `https://github.com/limzykenneth/p5.js.git`. files landing orange outline]src/content/contributor-docs/images/code-buttonpng clone download Run folder store [git_url] Replace `[git_url]` copied minutes depending speed internet connection coffee finished downloaded `p5js` preferred editor Codebase breakdown key folders `src` eventually combined final p5minjs lives [`test`]/unit_testing/ testing examples `tasks` custom build `Gruntfilejs` configuration `contributor_docs` configurations kinds modifications Build set Assuming downloads Pretty Git workflow parts subsections building scratch complete errors running `lib/` `p5minjs` starting implies branched commits affecting branches Branches enable multiple isolated confidence mess affect Current Branch header window enter purposes describing selection entering exist appears]src/content/contributor-docs/images/github-desktop-create-branchpng `git branch_name` replacing `branch_name` separate `npm test` Running breaking moving committing made collection saved essentially records current state arise general aim lump big guideline completed subtask sentence app show changed left sidebar Type high-level elaborate blank Click Commit finalize circled lower window]src/content/contributor-docs/images/github-desktop-commitpng Check status listed [restore](https://git-scm.com/docs/git-restore/) intended diff intend Stage -m [your_commit_message] `[your_commit_message]` replaced message avoiding statements `Documentation 1` `Add circle function` Repeat periodically Source visit documented reference website Notice typos src/core/shape/2d\\_primitivesjs Part underline it]src/content/contributor-docs/images/reference-code-linkpng Unit [here]/unit_testing/ Note implementations included Inline inline [here]/contributing_to_the_p5js_reference/ Accessibility [here]/web_accessibility/ Friendly System [here]/friendly_error_system/ standard style enforced [ESLlint](https://eslint.org/). pass linting easiest ESLint plugin error highlighting popular editors Software principles mind design priorities differ coming familiarize **Access** foremost decisions increases groups Read **Beginner Friendly** friendly beginner coders offering low barrier interactive visual cutting-edge HTML5/Canvas/DOM APIs **Educational** focused curriculum supports educational supporting class curricula introduce core engaging **JavaScript community** practices accessible beginners modeling proper JavaScript patterns usage abstracting open-source wider creation dissemination **Processing inspired language transition Java easy Pull applicable committed preparing merged formally merge forked history Creating push uploading changes[A online red]src/content/contributor-docs/images/publish-branchpng uploaded prompting Clicking preview Press Request pushing items pane Review marked circle]src/content/contributor-docs/images/preview-pull-requestpng -u origin dropdown Contribute Open response request]src/content/contributor-docs/images/new-branchpng yellow call action Compare request]src/content/contributor-docs/images/recent-pushespng prepopulated template]src/content/contributor-docs/images/new-prpng Title briefly Resolves `Resolves #[Add here]` replace `[Add addressing/fixing [above]#all-about-issues #1234` close `Resolves` `Addresses` Include Screenshots optional circumstances renders visuals canvas Checklist checklist tick `[ ]` `[x]` Rebase conflicts Fix shaders rectMode applied #6603]src/content/contributor-docs/images/opened-prpng inspect pay match times Commits Files base resolved true [rebase](https://git-scm.com/book/en/v2/Git-Branching-Rebasing/) Conflicts recently resolving Basic instruction Resolve button[A conflicting filenames highlighted]src/content/contributor-docs/images/resolve-conflictspng shown `>>>>>>` `=======` shows GitHub's conflict resolution markers highlighted]src/content/contributor-docs/images/conflicts-interfacepng Remove Mark addressed remove mark upper enabled]src/content/contributor-docs/images/mark-as-resolvedpng enabled]src/content/contributor-docs/images/commit-mergepng complicated prefer manual method https://github.com/processing/p5.js` fetch upstream` rebase upstream/main` lib/p5js lib/p5minjs --continue push` Discuss amend maintainer days patient meantime reviewed happen hurray questions panic perfectly normal requested [same before]#git-workflow pushed Leave reviewer"},"Creating an Addon Library\n":{"relativeUrl":"/contribute/creating_libraries","description":"{/* Extend p5js functionalities addon library */} JavaScript code extends adds core functionality wide range doesnt aim cover Web API Addon libraries extend needing incorporate features guide steps creating loads simple CSV file implementing `loadCSV` function examples create * Provide simplified interface [p5.ble.js](https://github.com/ITPNYU/p5.ble.js) [p5.serialserver](https://github.com/p5-serial/p5.serialserver) Implement specialized algorithms [p5.pattern](https://github.com/SYM380/p5.pattern) [p5.mapper](https://github.com/jdeboi/p5.mapper) Test widely browsers [p5.webserial](https://github.com/gohai/p5.webserial/) [p5.joystick](https://github.com/Vamoss/p5.joystick) alternative implementations existing [número](https://github.com/nickmcintyre/numero/) [p5.cmyk.js](https://github.com/jtnimoy/p5.cmyk.js) ## Prerequisites foundation Prototype-based object orientation Javascript Step lets blank call p5loadcsvjs main adding methods p5prototype p5 add method ```js p5prototypeloadCSV = function{ consolelog'I load soon' } ``` includes project global `createCanvas` `background` classes as` p5Element` or` p5Graphics` prototypes `p5Elementprototype` extended `shout` exclamation mark end elements HTML p5Elementprototypeshout { thiseltinnerHTML += ' attached `p5prototype` method` loadCSV` logs message console Run sketch the` ` tag setup createCanvas400 loadCSV ```html tags Running print single accept argument defined parameter filename consolelog`I ${filename} soon` test // Prints datacsv loadCSV'datacsv' access functions variables `circle` `PI` `this` `hour` `minute` customize give information called keyword attach Dont arrow syntax => created refer window === true refers consolelogthis ${thishour}${thisminute}` looked handy implement algorithm perform drawings previous started explore source module written inside details work hood utilize advanced made files asynchronous p5jss loading `loadJSON` `loadStrings` make functionfilename{ result [] fetchfilename thenres restext thendata datasplit'\\n'forEachline resultpushlinesplit'' return creates empty array variable `result` Fetch parse split line rows row words run pass path log output setup{ myCSV printmyCSV notice logging data reason `preload` nature makes returned `fetch` finish fetching Simply moving case solve problem preload{ prints told addons wait `registerPreloadMethod` filename{ this_decrementPreload p5prototyperegisterPreloadMethod'loadCSV' Note things `p5prototyperegisterPreloadMethod` passing string parsed pushed `this_decrementPreload` `myCSV` populated due inherent limitations technique type overwritten body set properties push reassign ``result datasplit`\\n``` bit magic happening firstly additional fetchcode> running related objects passed reference types strings numbers means points original `let []` contrast returning copied lose relation behavior modify long dont separate registerPreloadMethod this\\_decrementPreload internal list track detects counter larger waiting defer `setup` starting `draw` loop Loading decrement calling effectively signaling complete reaches loadings start expected callback support `p5prototypes` major feature action hooks Action lifetime runs clean removed `remove` enable order execution `init` — Called initialized initialization `p5` constructor executed mode automatically assigned `window` active `beforePreload` `afterPreload` `beforeSetup` `afterSetup` `pre` beginning repeatedly `post` hook snippet p5prototypedoRemoveStuff cleanup p5prototyperegisterMethodremove p5prototypesetDefaultBackground Set background pink default thisbackground#ed225d p5prototyperegisterMethodpre unregister longer needed p5prototypeunregisterMethod'remove' extra tips authoring **Must extend** **or prototype p5\\* classes** offer constants instantiated mix offering convenience **Naming conventions** **Don't overwrite properties** extending careful names intend replace **p5js modes instance mode** bound allowing users prefix native `Math` `console` shouldnt named **Class use** `PascalCase`** `camelCase`**** Classes prefixed namespace **do include the** **prefix class names** welcomed non-prefixed p5prototypep5MyClass p5prototypemyAddonMyClass p5prototypemyMethod filenames word lowercase** distinguish p5soundjs encouraged follow format naming **Packaging** **Create JS library** easy projects suggest [bundler](https://rollupjs.org/) provide options normal sketching/debugging [minified](https://terser.org/) version faster **Contributed hosted documented maintained creators** GitHub website fully open **Documentation key** documentation find contributed wont included similar [library overview page](http://p5js.org/reference/#/libraries/p5.sound), [class page](http://p5js.org/reference/#/p5.Vector), [method page](http://p5js.org/reference/#/p5/arc/). **Examples great too** show people online download anything[ ](http://jsfiddle.net/) collection web editor showcase works **Submit ready distribution youd [p5js.org/libraries](https://p5js.org/libraries/) page submit pull request repository [this intruction](https://github.com/processing/p5.js-website/blob/main/docs/contributing_libraries.md)!"},"Documentation Style Guide\n":{"relativeUrl":"/contribute/documentation_style_guide","description":"{/* reference give documentation consistent voice */} guidelines writing p5js document remix resources * Ruby Rails [API Documentation Guidlines](https://guides.rubyonrails.org/api_documentation_guidelines.html) CC BY-SA WordPress [accessibility](https://make.wordpress.org/docs/style-guide/general-guidelines/accessibility/) [inclusivity](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/) CC0 Airbnb [JavaScript Style Guide](https://airbnb.io/javascript/) MIT community large diverse people learn code subset students K–12 classes reading guide write effective inclusive accessible prose purposes simple samples ## Table Contents ### Writing [YUIDoc]#yuidoc [English]#english [Oxford Comma]#oxford-comma [Wording]#wording [Unbiased Documentation]#unbiased-documentation [Accessibility Disability]#accessibility-and-disability Code [Code Samples]#code-samples [Comments]#comments [Whitespace]#whitespace [Semicolons]#semicolons [Naming Conventions]#naming-conventions [Variables]#variables [Strings]#strings [Boolean Operators]#boolean-operators [Conditionals]#conditionals [Iteration]#iteration [Objects]#objects [Arrays]#arrays [Functions]#functions [Arrow Functions]#arrow-functions [Chaining]#chaining [Classes]#classes [Assets]#assets YUIDoc generate API docs navigate root directory run `npm install` execute ``` $ npm grunt yuidev output docs/reference Refer [inline guide]/contributing_to_the_p5js_reference/ information **[⬆ back top]#table-of-contents** English American color center modularize [a list British spelling differences here](https://en.wikipedia.org/wiki/American_and_British_English_spelling_differences/). Oxford Comma comma](https://en.wikipedia.org/wiki/Serial_comma/) red white blue Wording Write declarative sentences Brevity point present tense Returns object Returned return Start comments upper case Follow regular punctuation rules ```javascript // Draws fractal Julia set function drawFractalc radius maxIter { } Communicate current things explicitly implicitly idioms recommended Reorder sections emphasize favored approaches needed model practices approachable beginners comprehensive Explore edge cases combination arguments bugs beginner's Spell names correctly CSS HTML JavaScript WebGL doubt refer authoritative source official Unbiased bias kind person documenting demanding/sensitive topics time educate Ensure doesnt hurt offend unintentionally unbiased gender identity expression sexual orientation race ethnicity language neuro-type size disability class religion culture subculture political opinion age skill level occupation background Make examples Avoid politicized content remain neutral accessibility insult harm Dont make generalizations countries cultures includes positive prejudiced discriminatory minority communities terms related historical events Prefer wordings avoid yous declare variable `let` style variables **Pronouns** | Recommended ----------- ------------------ Accessibility Disability Emphasize reader underlining inconveniences disabled [approved terminology](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology) specific disabilities Maintain uniform structure important points stylistically visually screen test [List readers](https://en.wikipedia.org/wiki/List_of_screen_readers/). multi-platform types devices operating systems Create input gesture based controllers mice keyboards ableist pragmatic approach semantics add purely sake matches element group links tables tabular formats span tags rowspan colspan Tables prove difficult readers **Accessibility terminology** terminiology adapted [Writing documentation](https://make.wordpress.org/docs/style-guide/general-guidelines/inclusivity/#accessibility-terminology). people-first CDC's [Communicating People Disabilities](https://www.cdc.gov/ncbddd/disabilityandhealth/materials/factsheets/fs-communicating-with-people.html). --------------------------------------------------------------- ------------------------------------------------------------------ handicapped differently abled challenged abnormal normal healthy able-bodied \\[disability] victim suffering affected stricken unable speak synthetic speech dumb mute deaf low-hearing hearing-impaired blind low-vision vision-impaired visually-challenged cognitive developmental mentally-challenged slow-learner limited mobility physical crippled Samples Choose meaningful cover basics gotchas advanced syntax explain feature works draw circles circle convey idea follow Comments `//` single line Place newline subject comment Put empty block Bad magicWord = Please' Remember Good keyIsPressed === true thing1 note thing2 space easier read //Remember multiline /** */ //Bad /* Whitespace Indent blocks spaces setup ∙∙∙∙createCanvas400 ∙createCanvas400 ∙∙createCanvas400 leading brace setup{ createCanvas400 opening parenthesis control statements `if` `for` argument ifkeyIsPressed doStuff createCanvas operators y=x+5 + Semicolons Yep > JavaScript's [automatic semicolon insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion) lead subtle Naming Conventions letter descriptive fx vectorFieldx objects functions instances camelCase OBJEcttsssss {} this_is_my_object thisIsMyObject PascalCase player constructorname thisname Player trailing underscores private properties methods Spy constructorsecret this_secret secret thissecret Variables `var` declared confusing scoping reasonable circlex var throws ReferenceError `const` reason reassigned sketches helpful default flower 🌸' const declaration assignment declarations positions getPositions startSearch dragonball z' Assign place scoped - unnecessary search getCharactername default' character charactersfindc => cname false unary increments decrements `++` `--` Unary increment decrement insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion). silent errors incrementing decrementing values expressive update num `+= 1` `num++` num++ --num += -= Strings quotes `''` strings Hilma af Klint template literals interpolation newlines `Hilma Klint` Klint' concatenate characters Broken hard searchable essay \\ simplest convenient definitions' concatenation Template concise provide proper string features Dave' textname conversation serve purpose anymore Goodbye text`${name} Goodbye` unnecessarily escape Backslashes readability bad \\'this\\ \\i\\s \\quoted\\' good Air cool' Boolean Operators `===` `==` `=` shortcuts booleans understand mouseIsPressed == ' collectionlength `switch` parentheses mixing exceptions arithmetic `+` `-` `**` avoids huh && || / Conditionals braces circlemouseX mouseY `else` preceding closing thing3 executes `return` statement mouseIsOnLeft mouseX number letters abc' selection conditionals refrigeratorIsRunning goCatchIt Iteration `while` `do-while` loops iterate fixed times numPetals Pure side effects `forEach` `map` `every` `filter` `find` `findIndex` `reduce` `some` `` arrays `Objectkeys` `Objectvalues` `Objectentries` produce iterating diameters [50 10] circle0 Objects literal creation ball Object quote invalid identifiers improves highlighting engines optimizing performance secretObject x' y' top-secret' classified' dot notation access turtle Leonardo' dodgerblue' weapon 🗡️' food 🍕' turtleName turtle['name'] turtlename bracket `[]` getPropprop turtle[prop] getProp'name' commas mathematician firstName Ada lastName Lovelace Ada' Lovelace' Add comma artist Lauren' McCarthy McCarthy' Arrays array images Array [] [Array#push](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push/) direct items lyrics lyrics[lyricslength] rough edges smooth' lyricspush'Little `slice` method copy numbersCopy Function foo parameter mutate createBalldiameter diameter put parameters drawSpiralangle length drawSpirallength angle Arrow Functions arrow anonymous Callbacks common creates version context `this` complex rewrite loadImage'assets/moonwalkjpg' img imageimg preload Complex preprocessing processImage processImageimg implicit Omit body returns [1 3]mapnumber squared ** `${number} ${squared}` ${number 2}` include reduces changing Chaining individual calls chaining accommodate users familiar concept fill0 strokeWeight6 textSize20 fill0strokeWeight6textSize20 Classes `class` manipulating `prototype` directly exception explaining [create libraries]/creating_libraries/ Moverx thisx thisy thisradius Moverprototypeupdate Moverprototyperender circlethisx Mover constructorx render `extends` inheritance RandomMover extends random-1 custom `toString` toString `Mover ${thisx} ${thisy}` constructor delegates parent Dot DragonBall Ball superx numStars thisnumStars duplicate members Duplicate member prefer duplicates means bug thisxspeed thisyspeed reset Assets load assets folder called models project organization required website folders online Examples [src/data/examples/assets](https://github.com/processing/p5.js-website/tree/main/src/data/examples/) Reference Pages [src/templates/pages/reference/assets](https://github.com/processing/p5.js-website/tree/main/src/templates/pages/reference/assets/) Learn [src/assets/learn](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/) loadImage'moonwalkjpg'"},"Friendly Errors System Contribution Guide\n":{"relativeUrl":"/contribute/fes_contribution_guide","description":"{/* overview Friendly Error System codebase reference developers */} `core/friendly_errors` folder code p5js Systems FES responsible generating messages Errors starting `🌸 says` console supplementing default browser-generated error houses functions types errors gather locations including handling file load autoplay parameter checking library custom implemented contributors document starts FES's main section find full information description syntax parameters location individual part notes previous Development Notes outlining limitations future directions [Development Notes]#-development-notes contributing ## Overview * `p5_friendlyError` formats prints `_report` input message `p5_validateParameters` validate received values wrong type missing `p5_friendlyFileLoadError` guide users related `p5_friendlyAutoplayError` browser's policy diagram outlines connect [A files uses]src/content/contributor-docs/images/fessvg Individual `fes_corejs` `_friendlyError` `_friendlyAutoplayError` helper formatting testing `validate_paramsjs` `_validateParameters` validation `file_errorsjs` `_friendlyFileLoadError `and `browser_errorsjs` list browser generated global class `fesglobalErrors` `stacktracejs` parse stack borrowed [stacktrace.js](https://github.com/stacktracejs/stacktrace.js)). 📚 Reference Functions ### #### Description primary function directly output **Note** `p5_fesLogger` set running tests `consolelog` Mocha case `_fesLogger` pass string tested asserted Syntax ```js _reportmessage func color ``` Parameters @param {String} Message printed [func] {Number|String} [color] CSS `[func]` append link end `[color]` property current version Location core/friendly\\_errors/fes\\_corejs creates p5 call offer `_friendlyFileLoadError` inside `image/loading_displaying/loadImage` `io/files/loadFont` `io/files/loadTable` `io/files/loadJSON` `io/files/loadStrings` `io/files/loadXML` `io/files/loadBytes` sequence _friendlyFileLoadError _report _friendlyFileLoadErrorerrorType filePath {Number} errorType Number Path caused `errorType` refers specific enumerated `core/friendly_errors/file_errorsjs` File categorized distinct cases categorization designed facilitate delivery precise informative scenarios read data font show large Examples Loading /// myFont preload { = loadFont'assets/OpenSans-Regularttf' } setup fill'#ED225D' textFontmyFont textSize36 text'p5*js' draw {} generate addition browsers unsupported 🌸 problem loading path assets/OpenSans-Regularttf correct hosting online local server + info https://github.com/processing/p5.js/wiki/Local-server /friendly\\_errors/file\\_errorsjs called internally linked playing media video due calls `translator` print key `fesautoplay` keys `translations/en/translationjson` runs matching `docs/reference/datajson` created function's inline documentation checks number `fesfriendlyParamError*` `p5_validateParametersFUNCT_NAME ARGUMENTS` `p5prototype_validateParametersFUNCT_NAME requires recommended static general purposes remained debugging unit `accessibility/outputs` `color/creating_reading` `color/setting` `core/environment` `core/rendering` `core/shape/2d_primitives` `core/shape/attributes` `core/shape/curves` `core/shape/vertex` `core/transform` `data/p5TypedDict` `dom/dom` `events/acceleration` `events/keyboard` `image/image` `image/loading_displaying` `image/p5Image` `image/pixel` `io/files` `math/calculation` `math/random` `typography/attributes` `typography/loading_displaying` `utilities/string_functions` `webgl/3d_primitives` `webgl/interaction` `webgl/light` `webgl/loading` `webgl/material` `webgl/p5Camera` validateParameters buildArgTypeCache addType lookupParamDoc scoreOverload testParamTypes testParamType getOverloadErrors _friendlyParamError ValidationError report friendlyWelcome _validateParametersfunc args {Array} User arguments Missing Parameter arc1 [sketchjs line 13] arc expecting (http://p5js.org/reference/#/p5/arc) mismatch 1' MathPI 14] core/friendly\\_errors/validate\\_paramsjs `fesErrorMonitor` monitors guess source provide additional guidance includes trace sequential program leading point thrown Stack traces determining internal user `fesglobalErrors*` comprehensive `fesglobalErrorssyntax*` `fesglobalErrorsreference*` `fesglobalErrorstype*` `processStack` `feswrongPreload` `feslibraryError` stacktrace `printFriendlyStack` `fesglobalErrorsstackTop` `fesglobalErrorsstackSubseq` spell-check `handleMisspelling` `fesmisspelling` `_fesErrorMonitor` automatically triggered `error` events unhandled promise rejections `unhandledrejection` `window` manually catch block someCode catcherr p5_fesErrorMonitorerr works subset `ReferenceError` `SyntaxError` `TypeError` complete supported roughly _fesErrorMonitor processStack printFriendlyError ReferenceError _handleMisspelling computeEditDistance printFriendlyStack SyntaxError TypeError fesErrorMonitorevent {*} event Internal // background background200 8] properties undefined reading background' occurred stated loadImage loadJSON loadFont loadStrings (http://p5js.org/reference/#/p5/preload) cnv createCanvas200 cnvmouseClicked 12] bind' mouseClicked issue passed (http://p5js.org/reference/#/p5/mouseClicked) Scope += 5] defined scope check spelling letter-casing JavaScript case-sensitive https://p5js.org/examples/data-variable-scope.html Spelling xolor1 2] accidentally written xolor (http://p5js.org/reference/#/p5/color) `checkForUserDefinedFunctions` Checks user-defined `setup` `draw` `mouseMoved` capitalization mistake `fescheckUserDefinedFns` checkForUserDefinedFunctionscontext context Current Set window mode instance loadImage'myimagepng' preLoad intentional /friendly\\_errors/fes\\_corejs `helpForMisusedAtTopLevelCode` `fesmisusedTopLevel` err {Boolean} log false 💌 Limitations False Positive versus Negative Cases encounter positives negatives positive alarm warns fine hand negative doesnt alert important identify fix save time make things confusing fixing real problems easier less-than-ideal situations design chosen eliminate choose avoid incorrect warnings distract mislead Related `fesGlobalErrors` detect overwritten variables declared `const` `var` Variables undetected limitation `let` handles variable instantiation resolved functionality web editor details pull request \\[[#4730](https://github.com/processing/p5.js/pull/4730/)]. Performance Issue enabled disabled `p5minjs` prevent slowing process error-checking system significantly slow \\~10x [Friendly performance test](https://github.com/processing/p5.js-website/tree/main/src/assets/learn/performance/code/friendly-error-system/). disable top sketch p5disableFriendlyErrors true disables stuff drawing note action features reduce argument impact providing detailed fails attempt override space Thoughts Future Work Decouple \\[[#5629](https://github.com/processing/p5.js/issues/5629/)] Eliminate Identify Add test coverage - intuitive clear translatable discussion internationalization i18n Book](https://almchung.github.io/p5-fes-i18n-book/en/). common generalize `bezierVertex` `quadraticVertex` required object initiated `nf` `nfc` `nfp` `nfs` Conclusion README outlined structure explains organization purpose making navigate understand Additionally provided included discuss potential areas improvement development excited share insights community Survey conducted 2021-2022 findings [21-22 Report Comic](https://almchung.github.io/p5jsFESsurvey/) Full Report](https://observablehq.com/@almchung/p5-fes-21-survey/). TODO uncomment publish article ways add methods recommend [How Messages]#/ takes adding step-by-step"},"🌸 p5.js Friendly Error System (FES)\n":{"relativeUrl":"/contribute/friendly_error_system","description":"{/* overview system p5js provide errors friendly language */} ## Overview Friendly Error System FES 🌸 aims programmers providing error messages simple supplements browser's console adding alternative description links helpful references prints window [p5js Web Editor] browser JavaScript single minified file p5 p5minjs omits https://editor.p5js.org/ Lowering Barriers Debugging design tool match people lower barriers debugging exception evaluate existing hear directly ran community survey gather feedback future wishes Errors insights members contributors results summary comic full report * [21-22 Survey Report Comic] Full Report] https://almchung.github.io/p5jsFESsurvey/ https://observablehq.com/@almchung/p5-fes-21-survey Writing Messages contribute library writing translating part [internationalization] effort generate content [i18next]-based `translator` function dynamic message generation languages including English - default contributions world 🌐 https://github.com/processing/p5.js/blob/main/contributor_docs/archive/internationalization.md [i18next] https://www.i18next.com/ #### Practices writers prioritize lowering barrier understanding increasing accessibility process [Friendly i18n Book] discusses challenges practices cross-cultural context points book Understand audience make assumptions learn inclusive strive bias harm Adhere Code Conduct] sentences breaking sentence smaller blocks utilizing i18next's [interpolation] feature Prioritize communication great experience Avoid figures speech Introduce technical concept term time consistency link external resource written beginner-friendly plenty short practical examples https://almchung.github.io/p5-fes-i18n-book/ https://www.i18next.com/translation-function/interpolation https://github.com/processing/p5.js/blob/main/CODE_OF_CONDUCT.md#p5js-code-of-conduct [expert blind spots] https://tilt.colostate.edu/TipsAndGuides/Tip/181 public project separate [repo] https://github.com/almchung/p5-fes-i18n-book Location Translation Files based i18next imported `src/core/internationalizationjs` generates text data JSON translation ``` translations/{{detected locale code default=en}}/translationjson detected Korean designator `ko` read translated `translations/ko/translationjson` assemble final include regional information `es-PE` Spanish Peru Structure `translationjson` [format i18next](https://www.i18next.com/misc/json-format/). basic format file's item key double quotation marks `` closed curly brackets `{}` ```json { } ASCII logo saved \\n /\\\\| |/\\\\ \\\\ ` / \\\\/|_|\\\\/ \\n\\n supports interpolation pass variable dynamically `{{}}` set placeholder greeting {{who}} `greeting` `who` ```JavaScript translator'greeting' result generated `fes`'s `fileLoadError` demonstrates image problem loading {{suggestion}} call pre-generated `suggestion` translator'fesfileLoadErrorimage' suggestion Add Modify [internationalization doc] step-by-step guide modifying files Understanding Works section give displays detailed functions [FES Reference + Dev Notes] https://github.com/processing/p5.js/tree/main/src/core/friendly_errors#fes-reference-and-notes-from-developers calls multiple locations situations throws user API custom cases benefit find core components inside `src/core/friendly_errors` `translations/` Message Generators responsible catching generating [`_friendlyFileLoadError`] catches [`_validateParameters`] checks input parameters inline documents \\[`_fesErrorMonitor`] handles global reference [Dev /fes_contribution_guidemd#_friendlyerror /fes_contribution_guidemd#_validateparameters [`_fesErrorMontitor`] /fes_contribution_guidemd#feserrormonitor /fes_contribution_guidemd#-development-notes Displayer `fes_corejs/_friendlyError` p5_friendlyError translator'fesglobalErrorstypenotfunc' translationObj called Turning [disable performance] `p5disableFriendlyErrors` turn `true` p5disableFriendlyErrors = true setup createCanvas100 automatically https://github.com/processing/p5.js/wiki/Optimizing-p5.js-Code-for-Performance#disable-the-friendly-error-system-fes"},"How to add Friendly Error Messages\n":{"relativeUrl":"/contribute/how-to-add-friendly-error-messages","description":"{/* support Friendly Errors method Follow step-by-step guide */} walks steps write Error FE messages System FES 🌸 supports custom error handling outputs logs user dynamically generated [i18next](https://www.i18next.com/)-based `translator` p5js provide translations matching environment ## ❗️No `p5minjs` * integrated \\[i18next] codebase usage limited unminified build minified version includes basic framework internationalization code actual implementation Browserify task `src/core/initjs` specific logic avoid loading setting result adding affect size Prerequisites begin identify cases describes case requires number types arguments [✅Adding Parameter Validation FES]#-adding-parameter-validation-using-fes involves type file catch errors files [📥 Adding File Loading FES]#-handling-file-loading-error-messages-with-fes written detects occurred show [🐈 Library Messages FES]#-adding-library-error-messages-using-fes ✅ parameter validation ### Step – Double-check inline documentation ensure [inline documentation]/contributing_to_the_p5js_reference/ full list parameters `circle` starts description ``` /** Draws circle canvas round shape point edge distance center default set location sets shape's width height diameter origin changed ellipseMode function @method @param {Number} x-coordinate y-coordinate @chainable @example circle30 describe'A white black outline middle gray canvas' */ validate Call `p5_validateParameters` back call `validate_params` format `p5_validateParameters'[name method]' arguments` produce message ```js p5_validateParameters'circle' called provided match expectations line p5prototypecircle = { const args Arrayprototypeslicecallarguments argspusharguments[2] return this_renderEllipseargs } Build test typical action rebuild `p5js` `npm run build` find `/lib/empty-example/indexhtml` replace script `/p5minjs` `/p5js` Note `lib/p5minjs` doesnt `lib/p5js` edit `/lib/empty-example/sketchjs` Missing Wrong expressions // circle100 required Notice successfully draws hello' generate [sketchjs 9] expecting received (http://p5js.org/reference/#/p5/circle) 14] 12] Number string Congratulations 🎈 📥 Handling Check load divided distinct helpful occurs lets separate situations read data font large found top `core/friendly_errors/file_errorsjs` add `fileLoadErrorCases` existing applied string-based corresponds `case 3` translator'fesfileLoadErrorstrings' suggestion loadStrings scenario remember skip ahead [**Step 4**]#step-4 2**]#step-2 create Discuss issue board ticket discuss creating confirm duplicate Write short paragraph describing loads [issue board](https://github.com/processing/p5.js/issues/), press Issue button choose 💡 Existing Feature Enhancement option empty form Add title lines `fileLoadErrrorCases` \\[a high-level case] Increasing access section enter prepared beginning step check box sub-area question Lastly enhancement details detailing confirming maintainers ready Inside `fileLoadErrorCases`s `switch` statement end {{next number}} translator'fesfileLoadError{{tag name}}' {{name method}} double angle brackets `{{}}` instance previous start 12` braces final `p5_friendlyFileLoadError` `p5_friendlyFileLoadError[case number] [file path]` inside statements `loadStrings` [`httpDo.call()`](https://p5js.org/reference/#/p5/httpDo/) callback executed p5prototypehttpDocall args[0] GET' text' => [ omitted ] functionerr p5_friendlyFileLoadError3 calls `p5_friendlyFileLoadError3 [the argument problem text checking path assets/wrongnametxt correct hosting online running local server + info https://github.com/processing/p5.js/wiki/Local-server implementing 🐈 detect users applicable providing fail-safes values missing Identify [This MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling/) good overview options control flow JavaScripts native constructs \\\\ `p5_friendlyError` `p5_friendlyError'[custom message]' [method name]'` Replace including square `bezierVertex` p5_friendlyError vertex calling bezierVertex' bezierVertex 19] library stated passed (http://p5js.org/reference/#/p5/bezierVertex) ✏️ Writing international audiences writers prioritize lowering barrier understanding increasing accessibility debugging process 7] shown Korean browser `ko-KR` locale 줄7] 최소 3개의 인수argument를 받는 함수 circle에 인수가 1개만 입력되었습니다 [Friendly i18n Book](https://almchung.github.io/p5-fes-i18n-book/) discusses challenges practices writing cross-cultural context main points book Understand audience make assumptions learn language inclusive strive friendly bias harm simple sentences breaking sentence smaller blocks utilize [i18next's interpolation feature.](https://www.i18next.com/translation-function/interpolation/) Prioritize communication great experience languages Avoid figures speech Introduce technical concept term time consistency link external resource beginner-friendly plenty practical examples public project contribute [this repo.](https://github.com/almchung/p5-fes-i18n-book/) 🔍 Optional Unit tests unit bugs early delivering intended contributors accidentally break interfere functionality guides testing [Unit Testing Test Driven Development](https://archive.p5js.org/learn/tdd.html) Andy Timmons [Contributors Doc Testing]/unit_testing/ suite'validateParameters multi-format' test'color optional incorrect type' assertvalidationErrorfunction p5_validateParameters'color' [0 A'] Conclusion instructions include Additionally excited share insights community Survey conducted 2021-2022 findings formats [21-22 Report Comic](https://almchung.github.io/p5jsFESsurvey/) Full Report](https://observablehq.com/@almchung/p5-fes-21-survey/) in-depth information design aspects refer [FES README document]/friendly_error_system/ document detailed explanations development notes beneficial seeking deeper"},"Release process\n":{"relativeUrl":"/contribute/release_process","description":"{/* updates GitHub turned version library */} ## Approach * follow [semver](https://semver.org/) versioning pattern means `MAJORMINORPATCH` Requirements Git nodejs NPM installed system build push access remote repository Secret `NPM_TOKEN` set `ACCESS_TOKEN` Security tokens release steps run fully [repository secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository) created [here](https://docs.npmjs.com/creating-and-viewing-access-tokens/) create read publish token user belongs project personal `p5js` `p5js-website` `p5js-release` repositories generated [here](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token/) scopes choose `repo` `workflow` recommended organization specific account limit account's write required Usage ```sh $ git checkout main npm [major|minor|patch] Choose tag origin v142 Replace number ``` actual Actions CI Monitor check results commands executed action monitored [Actions tab](https://github.com/processing/p5.js/actions/) p5js repo page job clicking give detailed log running [Screenshot job]src/content/contributor-docs/images/release-actionpng completed released Check [release](https://github.com/processing/p5.js/releases/) [NPM](https://www.npmjs.com/package/p5/) pages latest view draft make changelog website updated deploy relevant page](https://github.com/processing/p5.js-website/actions/) desired [Downloads page](https://p5js.org/download/) CDNs bit time day update automatically pull *** happening Action [New release]/github/workflows/releaseyml triggered matches `v***` `npm ___` command Clone setup extract install dependencies `npm` test test` Create files uploaded releases Update Copy `datajson` `dataminjson` location `p5minjs` `p5soundminjs` `datayml` file `enjson` based Commit back Bower libraries principle concentrate place environment step defined workflow part configuration Testing testing difficult [act](https://github.com/nektos/act/) locally tested developed require temporary modifications definition roughly document precise change requirements present mocha Chrome tests needed `apt` setting rest eye error messages information packages missing pushing commented avoid accidentally unintended"},"Steward Guidelines\n":{"relativeUrl":"/contribute/steward_guidelines","description":"{/* Learn manage review contributions p5js */} joined steward seasoned maintainer guide information tips tricks effectively contribute written guidelines stated means adapt practices shown suit workflow ## Table Contents * [Issues]#issues [Bug report]#bug-report [Feature request]#feature-request enhancement]#feature-enhancement [Discussion]#discussion [Pull Requests]#pull-requests [Simple fix]#simple-fix fix]#bug-fix [New feature/feature enhancement]#new-feature-feature-enhancement [Dependabot]#dependabot [Build Process]#build-process [Main build task]#main-build-task [Miscellaneous tasks]#miscellaneous-tasks [Release Process]#release-process [Tips Tricks]#tips--tricks [Reply templates]#reply-templates [GitHub CLI]#github-cli [Managing notifications]#managing-notifications *** Issues encourage source code start issue issues place discussions steps reviewing depend kind repo templates](https://github.com/processing/p5.js/blob/main/.github/ISSUE_TEMPLATE/) order organize kinds authors provide relevant problems step filled-out template determining additional fields filled incorrect ### Bug report Found bug typical addressing reports Replicate goal reviewer attempt replicate question reported opened p5js-website Transfer access leave comment filed direct link provided close replication replicated discussion required determine fix straightforward tricky refer [p5js design principles]/contributor_guidelinesmd#software-design-principles making decision case-by-case basis author Approve fixing leaving assigning cog button side Assignee Leave recognizing replicable Attempt add `help wanted` label signal needing info version browser OS testing environment differs specific Add setup bugs occur web editor locally case redirected [web repo](https://github.com/processing/p5.js-web-editor/). back stems user behavior Determine documentation implementation friendly error system improved prevent mistake made Kindly redirect questions [forum](https://discourse.processing.org/) [Discord](https://discord.com/invite/SHQ8dH25r9/) Feature request Request feature requests part commitment increase make increases communities historically marginalized field details [here]/access/ Increasing Access sufficiently statement member community including reviewers assessed inclusion based criteria fit project scope [design drawing primitive shape considered adopt browser-based IOT protocol narrow avoid excessive bloat rarely features suggest implement addon library unclear fits good idea proof-of-concept helps give users concrete usage importance necessarily complete solution fully integrated core breaking change conflict existing functions variables sketches Features conflicts [major release](https://docs.npmjs.com/about-semantic-versioning/), proposed achieved functionalities simple native JavaScript easy-to-use libraries providing function join array strings `join[Hello world]` `[Hello world]join` preferred requirement considerations fulfilled stewards maintainers approve work begin PR process documented enhancement Existing Enhancement similar difference blurry deals requesting added Similar accepted point [section above]#feature-request Inclusion enhancements attention paid potential modifying previous valid signatures behave approved Discussion type minimal gather feedback topic general coalescing sorts closed conversation finishes resulting created correct applied removed Additional requested included contribution GitHub repositories/contribution process/contribution forum Discord labels glance Pull Requests repositories happen pull Stewards push encouraged follow > contributing found [here](https://github.com/processing/p5.js/blob/main/.github/PULL_REQUEST_TEMPLATE.md). discussed meaning [issue workflow]#issues reviewed instances apply minor typo fixes require open merged merge area exception exists practice contributors words doubt applies solve referenced edit original post Resolves #OOOO Addresses automatically Simple small directly Check Files Changed tab ensure automated CI test passes [The files changed viewing GitHub]src/content/contributor-docs/images/files-changedpng checks passed indicator highlighted button]src/content/contributor-docs/images/all-checks-passedpng ideally initially implemented tested CLI streamline Tricks]#tips-tricks [ ] address behaviors agreed significant performance impact accessibility modern standard coding pass tests include line comments lines [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/commenting-on-a-pull-request#adding-line-comments-to-a-pull-request). suggestion block changes\\ Suggest Change writing request]src/content/contributor-docs/images/suggest-changepng\\ [A suggested appearing fences tag]src/content/contributor-docs/images/suggested-value-changepng\\ previewed diff]src/content/contributor-docs/images/suggestion-previewpng multiple dont single-line times procedure [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/reviewing-proposed-changes-in-a-pull-request/) multiple-line single clarification choose Comment option circled Finish Review menu]src/content/contributor-docs/images/comment-reviewpng mark Approved choosing desired @[all-contributors](https://allcontributors.org/docs/en/emoji-key/) bot called list READMEmd file `[contribution` `type]` full types `@all-contributors` `please` `add` `@[GitHub` `handle]` `for` notable Dependabot PRs visible admins skip section update [semver](https://semver.org/) patch semver long quick check changelog updated dependency recommended major affect current target processes functioning due dependencies bump numbers drop official support versions Nodejs cases API Build cover commands happening scenes [contributors guidelines]/contributor_guidelinesmd#working-on-p5js-codebase detailed Gruntfilejs main definitions tools includes limited Grunt Browserify YUIDoc ESLint Babel Uglify Mocha helpful `default` task backward document explainer Main ``` gruntregisterTask'default' ['lint' test'] run `grunt` npm script `npm test` default consisting `lint` `test` #### Task gruntregisterTask'lint' ['lintsource' lintsamples'] consists tasks `lintsource` `lintsamples` subdivided `eslintbuild` `eslintsource` `eslinttest` scripts `yui` `yuidocprod` `cleanreference` `minjson` extract JSON remove unused minify generated `dataminjson` `eslint-samplessource` custom definition [/tasks/build/eslint-samplesjs]/tasks/build/eslint-samplesjs convention rest built lint examples ```js gruntregisterTask'test' build' connectserver' mochaChrome' mochaTest' nycreport `build` gruntregisterTask'build' browserify' browserifymin' uglify' browserifytest Tasks `browserify` defined [/tasks/build/browserifyjs]/tasks/build/browserifyjs differences builds `browserifymin` intermediate minified data needed FES `uglify` takes output final p5minjs configuration `browserifytest` building identical coverage reporting [Istanbul](https://istanbul.js.org/)). `fsreadFileSync` nodejs replaced file's actual content `brfs-babel` WebGL inline shader separate node\\_modules transpiled match [Browserslist](https://browsersl.ist/) packagejson ES6 import statements CommonJS `require` browserify understands enables newer syntax worrying compatibility bundling bundled `pretty-fast` meant cleaned formatting bit consistent anticipate read inspected left linked closer connectserver spins local server hosting Chrome mochaChrome [/tasks/test/mocha-chromejs]/tasks/test/mocha-chromejs Puppeteer spin headless remote controlled runs HTML `/test` folder unminified unit suites reference mochaTest `mochaChrome` subset set expanded Finally print console Test monitoring points 100% covers Miscellaneous `npx grunt [step]` covered yuidev spinning serves functionally page find website [http://localhost:9001/docs/reference/](http://localhost:9001/docs/reference/). monitor rebuild `yuidev` working move repository time preview slightly simplified confident show correctly Note modifications styling layout watch watchmain watchquick series thing `watch` running detecting `watchmain` `watchquick` Depending save manually Release [release\\_processmd]/release_process/ Tips number overwhelming put things easier utilize Reply templates handy [Saved Replies](https://docs.github.com/en/get-started/writing-on-github/working-with-saved-replies/about-saved-replies/) authoring reply responding replies redirecting accepting Saved Replies efficient create ##### Closing Reproduce reproduce feel free reopen sample demonstrates Snippet closing organizational purposes snippet illustrates Forum tutorials GSOC discuss proposals [forum](https://discourse.processing.org/c/summer-of-code/). lot interest clear explanation [expands access]/access/ Addon great starting docs [Creating Library]/creating_libraries/ Issue reminder tagged tracking development keeping ahead Merged Reviewing complex difficult git PR's Fortunately CLI](https://cli.github.com/) tool greatly installing logging command `gh pr checkout [pull_request_id]` fetching fork creating branch checking switching `git main` visit webpage Managing notifications tabs clicking Watch eye icon top opposite [Cropped screenshot corner showing buttons center Sponsor Fork Starred]src/content/contributor-docs/images/github-repo-metricspng watching events mentions handle activities subscribed [notification page](https://github.com/notifications/), marked dismissed email inbox receive emails customize unsubscribing completely [notifications settings page](https://github.com/settings/notifications/). Setting issues/PRs overwhelmed endless balance Participating @mentions"},"Unit Testing\n":{"relativeUrl":"/contribute/unit_testing","description":"{/* Guide writing tests p5js source code */} Unit testing essential part large codebase stay bug-free small pieces aim test individual components larger base correctness making function class creating object instances correctly unit ensure functions librarys introduce bugs unexpected behavior called regression Tests run `npm test` command terminal guide walk process implementing adding feature existing changing implement relevant ## Prerequisites * foundation Contributor guidelines local development setup inside Files folders test-related files located `test` folder wont focus `unit` subfolder subfolders roughly correspond `src` time counterpart composed modules module public Testing frameworks [Mocha](https://mochajs.org) runner responsible running providing solid framework reporting results long output Mocha doesnt assertion library collection handy lets properties values equal type throws error [Chai's `assert` `expect`)](https://www.chaijs.com/api/assert/) write statements behave Writing start pick variable Lets `p5prototypekeyIsPressed` beginning understand expected *expected behavior* `keyIsPressed` `true` key pressed `false` keys cases boolean - alphabet number special multiple `suite` built-in provided environment file `test/unit/events/keyboardjs` find additional `setup` `teardown` describes case checks single feature/behavior tested argument passed description suite/test purpose give clear suite press ```js suite'p5prototypekeyIsPressed' { test'keyIsPressed boolean' //write } true press' false pressed' ``` structured written Chai's `myp5` defined top section callback creates instance mode sketch myp5 setupfunctiondone p5functionp psetup = `p` parameter access variables assigned functionalities Remember previously mentioned Chai //Asserts assertisBooleanmyp5keyIsPressed create actual practice means condition similar statement throw Chais `assertisBoolean` check `myp5keyIsPressed` [documentation](https://www.chaijs.com/api/assert/) kinds things method behaves correct Adding add component Generally path `test/unit` `src/color/p5Colorjs` `test/unit/color/p5Colorjs` added make copy rename match delete inserting keeping teardown suite'module_name' myID myCanvasID' cnv pcreateCanvas100 cnvidmyID teardownfunction myp5remove `spec` `test/unit/specjs` loaded // test/unit/specjs var spec typography ['attributes' loadFont' p5Font' yourModule'] grouped representing function/variable expand suite'p5prototypeyourFunction' test'should [test something]' assertions suites needed didnt Conventions conventions practices follow `test`s self-contained rely Test minimal thing accepts arguments Prefer `expect` Running straightforward takes simply bit repetitive tricks streamline `npx grunt watchmain` automatically build save manually frequent mark skipped `skip` `only` syntax suiteskip'p5prototypeyourFunction' suiteonly'p5prototypeyourFunction' `grunt yuidev` launch server reference live [`http://127.0.0.1:9001/test/test.html`](http://127.0.0.1:9001/test/test.html) browser debugger middle log complex objects filter search term `grep=` URL [`http://127.0.0.1:9001/test/test.html?grep=framebuffer`](http://127.0.0.1:9001/test/test.html?grep=framebuffer) Visual sketches unexpectedly change implementation features visual lives `test/unit/visual/cases` Inside sample calls `screenshot` visualTest'2D maintain size' functionp5 screenshot p5createCanvas50 p5WEBGL p5noStroke p5fill'red' p5rectModep5CENTER p5rect0 p5width/2 p5height/2 filename list `test/visual/visualTestListjs` Additionally continuous integration pull request `visual` generate screenshots intentionally matching `test/unit/visual/screenshots` re-run inspect [http://127.0.0.1:9001/test/visual.html](http://127.0.0.1:9001/test/visual.html) CI optimizing speed advantageous concise avoid unnecessary frames minimize canvas size load assets specific functionality address scenarios involving operations asynchronous 3D model rendering returning promise resolves completing ensuring efficiency approach visualSuite'3D Model rendering' visualTest'OBJ displayed correctly' Return Promise waits operation complete return Promiseresolve => Load asynchronously p5loadModel'unit/assets/teapotobj' p5background200 p5rotateX10 p5rotateY10 p5modelmodel comparison Resolve completion resolve"},"p5.js Web Accessibility\n":{"relativeUrl":"/contribute/web_accessibility","description":"{/* Understand p5js Web Accessibility features make sketch accessible */} document describes structure web accessibility contributors sketches [screen reader](https://en.wikipedia.org/wiki/Screen_reader/)-accessible, visit [Writing Accessible Canvas Descriptions](https://p5js.org/tutorials/writing-accessible-canvas-descriptions/) tutorial screen reader [Using Screen Reader tutorial](https://p5js.org/tutorials/p5js-with-screen-reader/). canvas HTML element grid pixels doesnt provide reader-accessible information shapes drawn functions readers providing [fallback text](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage#accessible_content) descriptions Ill describe details implementation ## Prerequisites * foundation Contributor guidelines local development setup inside label code Library-generated outputs basic supports library-generated `textOutput` `gridOutput` user-generated `describe` `describeElement` inserted child elements `` work snippet serve ```js function { createCanvas400 } draw background#ccccff textOutput fillorange ellipse100 fillfuchsia rect300 ``` [An orange circle pink square light purple canvas]src/content/contributor-docs/images/sketch-with-shapespng creates output present general description includes size color number > lavender blue list position area shape top left covering 1% canvas\\ fuchsia bottom 2% selected table provided location coordinates location=top area=1%\\ = generates ```html Text Output white lays content form based spatial background objects object types cell depending type circle\\ individually *orange %* *fuchsia generated Grid % user passes `LABEL` argument additional created \\ visible version embedded non-screen users display create unnecessary redundancy recommend part process removing publishing sharing [A text earlier it]src/content/contributor-docs/images/sketch-text-outputpng ### Outputs located [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js), updated distributed library section support #### outputsjs [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js) public methods activate setting `this_accessibleOutputstext` `this_accessibleOutputsgrid `to `true` calling `this_createOutput'textOutput' Fallback'` `this_createOutput'gridOutput' passed parameter method activates `this_accessibleOutputstextLabel` calls Label'` file private `_createOutput` Depending vary initializes `thisingredients` stores data including `shapes` `colors` `pShapes` string previous `thisdummyDOM` exist HTMLCollection DOM `_updateAccsOutput` called end `setup` `draw` accessibleOutputs differs current update `_updateTextOutput` `_updateGridOutput` Calling ingredients helps avoid overwhelming access divs constantly updating `_addAccsOutput` `this_accessibleOutputs` returns true `this_accessibleOutputsgrid` `_accsBackground` `background` resets `thisingredientsshapes` `this_rgbColorName` store `thisingredientscolorsbackground` `_accsCanvasColors` fill stroke updates colors saving `thisingredientscolorsfill` `thisingredientscolorsstroke` names `_accsOutput` Builds creating src/accessibility call helper gather needed include `_getMiddle` Returns middle point centroid rectangles arcs ellipses triangles quadrilaterals `_getPos` left' mid right' `_canvasLocator` 10\\*10 mapped `_getArea` percentage total outputjs `p5prototypetriangle` `p5prototype_renderRect` `p5prototypequad` `p5prototypepoint` `p5prototypeline` `p5prototype_renderEllipse` `p5prototypearc` `p5prototyperedraw` `p5prototyperesizeCanvas` `this_setup` `p5Renderer2Dprototypestroke` `p5Renderer2Dprototypefill` `p5Renderer2Dprototypebackground` textOutputjs [src/accessibility/textOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/textOutput.js) main build summary Building supported `p5` prototype `_textSummary` `_shapeDetails` `_shapeList` gridOutputjs [src/accessibility/gridOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/gridOutput.js) `this_accessibleOutputsgridLabel` maps `_gridSummary` `_gridMap` `_gridShapeDetails` line color\\_namerjs naming important [src/accessibility/color\\_namer.js](https://github.com/processing/p5.js/blob/main/src/accessibility/color_namer.js) `_rgbColorName` receives RGBA values [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js). `p5color_conversion_rgbaToHSBA` HSV `_calculateColor` [colorNamer.js](https://github.com/MathuraMG/color-namer/), developed [2018 Processing Foundation fellowship](https://medium.com/processing-foundation/making-p5-js-accessible-e2ce366e05a0/) consultation blind expert comparing stored `colorLookUp` array returning closest User-generated author-defined optional determines displayed [src/accessibility/describe.js](https://github.com/processing/p5.js/blob/main/src/accessibility/describe.js): `_descriptionText` Checks `FALLBACK` ensures ends punctuation mark ' adds improve readability `_describeHTML` Creates fallback tag adjacent background'pink' fill'red' noStroke circle67 circle83 triangle91 describe'A red heart bottom-right corner' LABEL page reading corner]src/content/contributor-docs/images/sketch-text-output2png describeElement groups meaning custom-drawn made multiple lines Heart corner `_elementName` checks colon character `_describeElementHTML` div describeElement'Heart' circle666 circle832 triangle912 yellow background' corner]src/content/contributor-docs/images/sketch-text-output3png"},"WebGL Contribution Guide\n":{"relativeUrl":"/contribute/webgl_contribution_guide","description":"{/* started working p5js WebGL mode source code */} reading page interested helping work grateful exists explain structure contributions offer tips making ## Resources * Read [p5js architecture overview]/webgl_mode_architecture/ understand differs 2D valuable reference implementation specifics shaders strokes [contributor guidelines]/contributor_guidelines/ information create issues set codebase test helpful bit browser's API p5js's built top [WebGL fundamentals](https://webglfundamentals.org/) core rendering concepts [The Book Shaders](https://thebookofshaders.com/) explains techniques Planning organize open [in GitHub Project](https://github.com/orgs/processing/projects/20/), divide types **System-level changes** longer-term goals far-reaching implications require discussion planning jumping **Bugs solution yet** bug reports debugging narrow ready fixed found discuss fix solutions PR** bugs decided free write **Minor enhancements** features obvious spot current needing fit agreed worth **2D features** exist expected behavior feature implemented match user requirements clear **Features contexts** ways methods coordinates 3D break generally begin **Feature requests** change requests make things mode's roadmap **Documentation** documentation Put Code related `src/webgl` subdirectory directory top-level functions split files based subject area commands light `lightingjs` materials `materialsjs` implementing user-facing classes file class occasionally internal utility `p5Framebufferjs` includes `p5Framebuffer` additionally consists framebuffer-specific subclasses main `p5RendererGL` large handles lot reason functionality description put #### `p5RendererGLjs` Initialization `p5RendererGLImmediatejs` Functionality **immediate mode** drawing shapes stored reused `beginShape` `endShape` `p5RendererGLRetainedjs` **retained reuse `sphere` `materialjs` Management blend modes `3d_primitivesjs` User-facing draw `triangle` define geometry treating input generic shape `Textjs` text Testing ### Consistency hard manually verify add unit tests confident pass adding works check consistency resulting pixels ```js test'coplanar 2D' function { const getColors = functionmode myp5createCanvas20 myp5pixelDensity1 myp5background255 myp5strokeCapmyp5SQUARE myp5strokeJoinmyp5MITER === myp5WEBGL myp5translate-myp5width/2 -myp5height/2 } myp5stroke'black' myp5strokeWeight4 myp5fill'red' myp5rect10 myp5fill'blue' myp5rect0 myp5loadPixels return [myp5pixels] assertdeepEqualgetColorsmyp5P2D getColorsmyp5WEBGL ``` turn antialiasing slightly straight lines axes WebGL-only comparing ensure color expect day robust system compares full image snapshots results pixel test'color interpolation' renderer myp5createCanvas256 // upper lower center myp5beginShape myp5fill200 myp5vertex-128 -128 myp5vertex128 myp5fill0 myp5endShapemyp5CLOSE assertequalrenderer_useVertexColor true assertdeepEqualmyp5get128 [100 255] Performance #1 concern hit performance Typically creating sketches compare frame rates advice measure Disable friendly errors `p5disableFriendlyErrors true` sketch `p5minjs` include error Display average rate sense steady state frameRateP avgFrameRates [] frameRateSum numSamples setup createP frameRatePposition0 frameRate / avgFrameRatespushrate += avgFrameRateslength > -= avgFrameRatesshift frameRatePhtmlroundframeRateSum + avg fps' cases stress parts pipeline complicated model long curve simple `line` called times loop"},"p5.js WebGL Mode Architecture\n":{"relativeUrl":"/contribute/webgl_mode_architecture","description":"{/* overview design decisions make WebGL mode motivation */} document intended contributors library makers extend codebase sketches reading tutorials [on p5js Tutorials page](https://p5js.org/tutorials/#webgl) ## renderers run 2D user [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/) built web browser rendering high-performance 3D graphics key difference direct access computer's GPU allowing performantly render shapes perform image processing tasks track progress issues [a GitHub Project.](https://github.com/orgs/processing/projects/20/) Goals evaluating feature aligns goals **Features beginner-friendly** provide beginner-friendly introduction features offers means offer simple APIs cameras lighting shaders support advanced interfere simplicity core **Improving parity mode** frictionless transition making click easily users create work shader aims superset mode's **Simplicity extensibility paramount** small extensible libraries Keeping makes easier optimize reduce bug surface area Extension avenue include **Improve performance** fast interfering previous Good performance accessible wide variety viewers devices designing ensure performant implementation give preference Design differences browser's canvas context levels abstraction generally lower-level higher-level motivates fundamental p5js's modes * **WebGL creates deeply nested data structures** passes commands leading shallow call stacks contrast responsible breaking triangles caching future reuse complicated logic necessitates splitting code number classes `p5Texture` `p5RenderBuffer` `p5DataArray` implementations readable maintainable customization** control curves rendered converting picks default `curveDetail` API lets line segments predict balance quality case high- low-level APIs** finer-grained faced task picking level high unable advantage low pass managing complexity Drawing ### Creating fills strokes geometry drawn consists draw shape ready component composed calls function `circle` `beginShape` `vertex` renderer [break series points](https://github.com/processing/p5.js/blob/main/src/webgl/3d_primitives.js). points connected lines trigonometry figure place circle `curveVertex` `bezierVertex` look-up tables turn Bézier curve #### Fills outline filled drawing functions `beginShapeTRIANGLE_STRIP` made [libtess](https://github.com/brendankenny/libtess.js/) break [p5.RendererGL.Immediate.js](https://github.com/processing/p5.js/blob/main/src/webgl/p5.RendererGL.Immediate.js), polygon outlines `_processVertices` libtess turns format screen Strokes varying widths styles expand centers form expansion types joins caps illustrated Generated https://codepen.io/davepvm/pen/ZEVdppQ connect add join miter extends edges rectangles intersect point bevel connects corners straight round circular arc switching recompute quad extent bounds display pixels present selected style illustrate fits similar strategy stroke disconnected ends cap square extended determines calculated change based camera's perspective avoid recalculation store information camera-dependent **center line** model space shown red **direction tangent start end blue pink helps compute **a flag uniquely identifies corner shape** Combined normal 90-degree rotation determine direction thickness combine camera intrinsics produce final positions Rendering retained **immediate **retained **Immediate optimized frame time drew spend storing saves memory variations `quadraticVertex` called `endShape` `rect` rounded `bezier` `curve` `line` `image` Retained redrawing dont re-triangulating sending saved `p5Geometry` object stores triangle uploaded buffers Calling `freeGeometry` clears re-upload `sphere` `cone` internally `buildGeometry` runs collects p5Geometry returns redrawn efficiently Materials lights single pick write materials system scene reacts light including color shininess Custom material behavior Shaders **Color Shader** flat colors activated `fill` `stroke` **Lighting complex textures Activated calling `lights` `ambientLight` `directionalLight` `pointLight` `spotLight` adds list added contribute shading fill **Normal/Debug `normalMaterial` Lights Users set parameters position contributes view-independent view-dependent reflections reflection matches desired setting `specularColor` **color shader** properties **Fill color** Set applies `beginShape`/`endShape` apply vertex texture `texture` override mixed diffuse describes bright dark areas due directly cast **Specular material** specular reflected highlights shape's parameter `specularMaterial` unspecified **Shininess** `shininess` sharp **Ambient ambient Ambient constant omnidirectional `ambientMaterial` **Emissive `emissiveMaterial` producing Shader turned attributes uniforms reference custom supply automatically writers unclear Future section describe plans improving improve publicly documenting supporting Global objects contexts global `uniform mat4 uModelViewMatrix` matrix convert object-space camera-space uProjectionMatrix` mat3 uNormalMatrix` normals Additionally per-vertex `attribute vec3 aPosition` aNormal` pointing outward vec2 aTexCoord` coordinate referring location aVertexColor` optional bool uUseLighting` provided `uUseLighting` passed ##### int uAmbientLightCount` maximum uAmbientColor[5]` Directional uDirectionalLightCount` directional uLightingDirection[5]` Light directions uDirectionalDiffuseColors[5]` uDirectionalSpecularColors[5]` Point uPointLightCount` uPointLightLocation[5]` Locations uPointLightDiffuseColors[5]` Diffuse uPointLightSpecularColors[5]` Specular Spot uSpotLightCount` spot float uSpotLightAngle[5]` cone radii uSpotLightConc[5]` Concentration focus uSpotLightDiffuseColors[5]` uSpotLightSpecularColors[5]` uSpotLightLocation[5]` locations uSpotLightDirection[5]` Fill vec4 uMaterialColor` uUseVertexColor` Per-vertex isTexture` sampler2D uSampler` uTint` tint multiplier uSpecular` show uShininess` uSpecularMatColor` blend uHasSetAmbient` uAmbientMatColor` inputs Lines supplied uViewport` vector `[minX minY maxX maxY]` rectangle uPerspective` boolean projection uStrokeJoin` enum representing represent `ROUND` `MITER` `BEVEL` uStrokeCap` `PROJECT` `SQUARE` aTangentIn` segment aTangentOut` aSide` part details Points uPointSize` radius Classes ```mermaid --- title classDiagram class Base[p5Renderer] { } P2D[p5Renderer2D] WebGL[p5RendererGL] Geometry[p5Geometry] Shader[p5Shader] Texture[p5Texture] Framebuffer[p5Framebuffer] Base <|-- P2D o-- Geometry *-- Texture Framebuffer ``` entry **p5RendererGL** Top-level current conform common `p5Renderer` interface split `p5RendererGLImmediatejs` `p5RendererGLRetainedjs` references models stored `retainedModegeometry` map `modelyourGeometry` geometry's resources main `p5Graphics` entries represented `p5Shader` `shaderyourShader` handles compiling source uniform type `p5Image` `p5MediaElement` `p5Framebuffer` asset data's representation send images manually updated assets changed video Textures unique Framebuffers surfaces Unlike `p5Framebuffer`s live transferred CPU bottleneck extra transfer reason functional aim building blocks craft extensions block considered confidently commit major milestone sufficient ecosystem lacking extension **Extend richer content** accomplish supported stable update animated gltf group multiple imported unsupported **Enable brittle shaders** integrates forced scratch copy paste parts versions internal naming structure import pieces positioning augment [an issue open task.](https://github.com/processing/p5.js/issues/6144/) strike method introduce tune output faster lower-quality Line bottlenecks state benefit lower fidelity higher options methods usage patterns `endShapeshouldClose count` supports instanced efficient"}},"examples-fallback":{"Shape Primitives":{"relativeUrl":"/examples/shapes-and-color-shape-primitives","description":"program demonstrates basic shape primitive functions square rect ellipse circle arc line triangle quad"},"Color":{"relativeUrl":"/examples/shapes-and-color-color","description":"expands Shape Primitives adding color background fills canvas stroke sets drawing lines fill inside shapes noStroke noFill turn line Colors represented ways demonstrates options"},"Drawing Lines":{"relativeUrl":"/examples/animation-and-variables-drawing-lines","description":"Click drag mouse draw line demonstrates built-in variables mouseX mouseY store current position previous represented pmouseX pmouseY * shows colorMode HSB hue-saturation-brightness variable sets hue"},"Animation with Events":{"relativeUrl":"/examples/animation-and-variables-animation-with-events","description":"demonstrates loop noLoop pause resume animation Clicking mouse toggles stopped user press key advance frame Note click set focus canvas presses registered Advancing single accomplished calling redraw function results call draw"},"Mobile Device Movement":{"relativeUrl":"/examples/animation-and-variables-mobile-device-movement","description":"deviceMoved function runs mobile device displaying sketch moves accelerationX accelerationY accelerationZ values set position size circle works devices"},"Conditions":{"relativeUrl":"/examples/animation-and-variables-conditions","description":"statements block code run condition true animates mouse held statement line read p5 reference MDN Comparison operators form conditions comparing values hue circle resets comparison Logical combined && checks black fill horizontal center canvas white circle's position || reverses speed reaches left edge"},"Words":{"relativeUrl":"/examples/imported-media-words","description":"text function inserting canvas change font size loadFont fontSize functions aligned left center textAlign shapes colored fill"},"Copy Image Data":{"relativeUrl":"/examples/imported-media-copy-image-data","description":"copy method simulate coloring image copying colored top black-and-white cursor dragged"},"Alpha Mask":{"relativeUrl":"/examples/imported-media-alpha-mask","description":"mask method create image transparency parts run locally files running local server"},"Image Transparency":{"relativeUrl":"/examples/imported-media-image-transparency","description":"program overlays image modifying alpha tint function Move cursor left canvas change image's position run locally file running local server"},"Audio Player":{"relativeUrl":"/examples/imported-media-create-audio","description":"createAudio creates audio player displays player's controls adjusts speed playback normal mouse left edge window faster moves information media elements players p5MediaElement reference page file public domain piano loop Josef Pres"},"Video Player":{"relativeUrl":"/examples/imported-media-video","description":"noCanvas createVideo functions upload video DOM embedding canvas building embedded element visit Video Canvas"},"Video on Canvas":{"relativeUrl":"/examples/imported-media-video-canvas","description":"createVideo image functions upload video canvas capture passed constructor add filters filter method run locally running local server build embedding visit Video"},"Video Capture":{"relativeUrl":"/examples/imported-media-video-capture","description":"createCapture image functions device's video capture draw canvas passed constructor add filters filter method strategies uploading presenting styling videos visit Video Canvas examples"},"Image Drop":{"relativeUrl":"/examples/input-elements-image-drop","description":"drop p5js element method registers callback time file loaded uploaded created p5File class check type write conditional statements responding"},"Input and Button":{"relativeUrl":"/examples/input-elements-input-button","description":"createElement createInput createButton functions string text submitted input display canvas"},"Form Elements":{"relativeUrl":"/examples/input-elements-dom-form-elements","description":"Document Object Model DOM represents resulting structure web page p5js's form elements createInput createSelect createRadio build ways information submitted select input radio button update based"},"Translate":{"relativeUrl":"/examples/transformation-translate","description":"translate function moves origin coordinate system location push pop functions save restore drawing settings fill color Note draw shapes rectangle circle time"},"Rotate":{"relativeUrl":"/examples/transformation-rotate","description":"rotate function rotates current coordinate system origin Note default upper left corner canvas order center translate push pop functions save restore"},"Scale":{"relativeUrl":"/examples/transformation-scale","description":"scale function scales current coordinate system factor push pop functions save restore square size drawn origin scaling factors"},"Linear Interpolation":{"relativeUrl":"/examples/calculating-values-interpolate","description":"Interpolation calculates values number halfway types interpolation rates change Linear abbreviated lerp constant rate function linearly interpolates numbers Move mouse screen symbol follow drawing frame animation ellipse moves part distance current position cursor"},"Map":{"relativeUrl":"/examples/calculating-values-map","description":"map function converts range cursor's horizontal position 0-720 0-360 resulting circle's hue Map vertical 0-400 20-300 diameter"},"Random":{"relativeUrl":"/examples/calculating-values-random","description":"demonstrates random function user presses mouse button position color circle change randomly"},"Constrain":{"relativeUrl":"/examples/calculating-values-constrain","description":"draws circle cursor's position rectangle passing mouse's coordinates constrain function"},"Clock":{"relativeUrl":"/examples/calculating-values-clock","description":"current time read minute hour functions map calculate angle hands transformations set position"},"Color Interpolation":{"relativeUrl":"/examples/repetition-color-interpolation","description":"Interpolation calculates values number halfway types interpolation rates change Linear abbreviated lerp constant rate function linearly interpolates numbers lerpColor demonstrated colors stripeCount variable adjusts horizontal stripes Setting higher individual gradient"},"Color Wheel":{"relativeUrl":"/examples/repetition-color-wheel","description":"illustrates appearance hues loop repeat transformations initializes variable called angle rotation circle hue time repeats drawn relative center canvas push pop functions make affect individual"},"Bezier":{"relativeUrl":"/examples/repetition-bezier","description":"bezier curves created control anchor points parameters function point curve middle set define shape"},"Kaleidoscope":{"relativeUrl":"/examples/repetition-kaleidoscope","description":"kaleidoscope optical instrument reflecting surfaces tilted angle translate rotate scale functions replicate resulting visual canvas"},"Noise":{"relativeUrl":"/examples/repetition-noise","description":"Perlin noise algorithm written Ken produce sequences random organic function p5 produces dots sized based values slider left sets distance offset calculation"},"Recursive Tree":{"relativeUrl":"/examples/repetition-recursive-tree","description":"rendering simple tree-like structure recursion branching angle calculated function horizontal mouse location Move left change Based Daniel Shiffman's Recursive Tree Processing"},"Random Poetry":{"relativeUrl":"/examples/listing-data-with-arrays-random-poetry","description":"floor random functions randomly select series items array draw sizes positions canvas"},"Sine and Cosine":{"relativeUrl":"/examples/angles-and-motion-sine-cosine","description":"demonstrates sine cosine mathematical functions animation shows uniform circular motion unit circle radius angle measured x-axis determines point defined coordinates"},"Aim":{"relativeUrl":"/examples/angles-and-motion-aim","description":"atan2 function calculates angle positions rotate shape eyes cursor"},"Triangle Strip":{"relativeUrl":"/examples/angles-and-motion-triangle-strip","description":"demonstrates create shape vertices TRIANGLE_STRIP mode beginShape endShape vertex functions"},"Circle Clicker":{"relativeUrl":"/examples/games-circle-clicker","description":"demonstrates game time limit score browser's local storage stores high played browser remains Clearing data clears"},"Ping Pong":{"relativeUrl":"/examples/games-ping-pong","description":"game inspired oldest arcade video games Atari's Pong two-player player controls paddle represented white rectangle keys move left arrow Players score points bouncing ball square past edge opponent's side canvas`"},"Snake":{"relativeUrl":"/examples/games-snake","description":"reproduction type arcade game called Snake Blockade released games structure player controls movements snake represented green line player's goal collide fruit red dot time collides grows longer grow long colliding edges play area array vectors store positions segments arrow keys control snake's movement"},"Geometries":{"relativeUrl":"/examples/3d-geometries","description":"p5's WEBGL mode includes primitive shapes plane box cylinder cone torus sphere ellipsoid Additionally model displays custom geometry loaded loadModel NASA's collection"},"Custom Geometry":{"relativeUrl":"/examples/3d-custom-geometry","description":"buildGeometry function stores shapes 3D model efficiently reused"},"Materials":{"relativeUrl":"/examples/3d-materials","description":"3D rendering material determines surface responds light p5's WEBGL mode supports ambient emissive normal specular materials source p5 displays color contexts typically emits visualizes direction part faces respond Ambient combined fill stroke Fill sets base object's vertices Additionally texture wraps object image model NASA's collection"},"Orbit Control":{"relativeUrl":"/examples/3d-orbit-control","description":"Orbit control mouse touch input adjust camera orientation 3D sketch rotate left click drag swipe screen pan multiple fingers move closer center scroll wheel pinch in/out"},"Filter Shader":{"relativeUrl":"/examples/3d-filter-shader","description":"Filter shaders apply effect canvas applied video"},"Adjusting Positions with a Shader":{"relativeUrl":"/examples/3d-adjusting-positions-with-a-shader","description":"Shaders adjust positions vertices shapes lets distort animate 3D models"},"Framebuffer Blur":{"relativeUrl":"/examples/3d-framebuffer-blur","description":"shader depth information p5Framebuffer apply blur real camera objects blurred closer farther lens's focus simulates effect sketch renders spheres framebuffer canvas"},"Create Graphics":{"relativeUrl":"/examples/advanced-canvas-rendering-create-graphics","description":"createGraphics function create p5Graphics object serve off-screen graphics buffer canvas Off-screen buffers dimensions properties current display surface existing space"},"Multiple Canvases":{"relativeUrl":"/examples/advanced-canvas-rendering-multiple-canvases","description":"default p5 runs Global Mode means functions global scope canvas-related apply single canvas run Instance methods instance class mode function defined parameter representing labeled variables typically belong function's Passing constructor"},"Shader as a Texture":{"relativeUrl":"/examples/advanced-canvas-rendering-shader-as-a-texture","description":"Shaders applied 2D/3D shapes textures learn shaders p5js"},"Snowflakes":{"relativeUrl":"/examples/classes-and-objects-snowflakes","description":"demonstrates particle system simulate motion falling snowflakes program defines snowflake class array hold objects"},"Shake Ball Bounce":{"relativeUrl":"/examples/classes-and-objects-shake-ball-bounce","description":"class create collection circles move canvas response tilt mobile device open page display sketch"},"Connected Particles":{"relativeUrl":"/examples/classes-and-objects-connected-particles","description":"custom classes Particle class stores position velocity hue renders circle current updates Path array objects created lines connecting particles user clicks mouse sketch creates instance drags adds path"},"Flocking":{"relativeUrl":"/examples/classes-and-objects-flocking","description":"Demonstration flocking behavior Full discussion implementation found Nature Code book Daniel Shiffman simulation based research Craig Reynolds term boid represent bird-like object"},"Local Storage":{"relativeUrl":"/examples/loading-and-saving-data-local-storage","description":"Browsers websites store data visitor's device called local storage getItem storeItem clearStorage removeItem functions control inspired Daniel Shiffman's Loading JSON Data Tabular examples Processing written Java class organize bubble visitor add bubbles saved revisits sketch reload"},"JSON":{"relativeUrl":"/examples/loading-and-saving-data-json","description":"JavaScript Object Notation JSON format writing data file syntax contexts based Daniel Shiffman's Loading Data Processing written Java class organize bubble sketch starts loads bubbles visitor add download updated load"},"Table":{"relativeUrl":"/examples/loading-and-saving-data-table","description":"Comma-Separated Values CSV format writing data file p5 work p5Table based Daniel Shiffman's Loading Tabular Data Processing class organize representing bubble sketch starts loads bubbles visitor add download updated load"},"Non-Orthogonal Reflection":{"relativeUrl":"/examples/math-and-physics-non-orthogonal-reflection","description":"demonstrates ball bouncing slanted surface implemented vector calculations reflection code makes extensive p5Vector class including createVector function create vectors methods add dot"},"Soft Body":{"relativeUrl":"/examples/math-and-physics-soft-body","description":"Physics simulation soft body experiencing acceleration mouse position shape created curves curveVertex curveTightness"},"Forces":{"relativeUrl":"/examples/math-and-physics-forces","description":"Demonstration multiple forces acting bodies Bodies experience gravity continuously fluid resistance water natureofcodecom force calculations performed p5Vector class including createVector function create vectors"},"Smoke Particles":{"relativeUrl":"/examples/math-and-physics-smoke-particle-system","description":"Smoke particle system demo based Dan Shiffman's original Processing code makes p5Vector class including createVector function calculations updating particles positions velocities performed methods implemented array objects Particle"},"Game of Life":{"relativeUrl":"/examples/math-and-physics-game-of-life","description":"Game Life cellular automaton created mathematician John Conway type simulation grid cells cell dead alive black squares represent living white runs switch based set rules live fewer neighbours dies lives unchanged generation life generate complex interactions Click canvas start randomized Clicking restart"},"Mandelbrot Set":{"relativeUrl":"/examples/math-and-physics-mandelbrot","description":"Colorful rendering Mandelbrot set based Daniel Shiffman's Processing"}},"libraries-fallback":{"BasicECSJs":{"relativeUrl":"/libraries/","description":"A basic javascript ECS system, with SceneManagers, Scenes and GameObjects with their own Start and Update functions."},"BasicUnitTesterJs":{"relativeUrl":"/libraries/","description":"BasicUnitTesterJs is a basic javascript unit tester designed to work on all JS platforms and be small and streamlined for the best developer experience."},"DoubleLinkedListLibJs":{"relativeUrl":"/libraries/","description":"A simple double linked list that stores the head, tail and length of the list"},"MatrixJs":{"relativeUrl":"/libraries/","description":"A basic javascript library for dynamic and powerful matrices based on lists wrapped around with a powerful class."},"OneWayLinkedListLibJs":{"relativeUrl":"/libraries/","description":"A simple one way linked list that stores the head, tail and length of the list"},"Tilemapp5js":{"relativeUrl":"/libraries/","description":"A simple to use & performant tilemap p5.js library"},"TurtleGFX":{"relativeUrl":"/libraries/","description":"TurtleGFX allows to code with Turtle Graphics in JavaScript. Great for education and creative coding."},"VecJs":{"relativeUrl":"/libraries/","description":"A basic javascript library for dynamic vectors (e.g. vec2 & vec3) based on lists."},"WebGL2FBO":{"relativeUrl":"/libraries/","description":"A simple library for OOP encapsulation and abstraction of some of WebGL2 Framebuffers and the Renderbuffers they rely on"},"WebGL2Tex":{"relativeUrl":"/libraries/","description":"A simple library for OOP encapsulation and abstraction of some of the different WebGL2 textures while still giving full control over them."},"BMWalker.js":{"relativeUrl":"/libraries/","description":"A simple JavaScript library for drawing the biological motion 'Walker'."},"c2.js":{"relativeUrl":"/libraries/","description":"c2.js is a JavaScript library for creative coding based on computational geometry, physics simulation, evolutionary algorithm and other modules."},"canvasGUI":{"relativeUrl":"/libraries/","description":"Create GUI controls directly on your canvas."},"concaveHull":{"relativeUrl":"/libraries/","description":"Calculate a Concave Hull from a set of points in 2D space"},"HY5":{"relativeUrl":"/libraries/","description":"hydra 🙏 p5.js ~ share visuals between both frameworks!"},"lygia":{"relativeUrl":"/libraries/","description":"LYGIA is a shader library of reusable functions that will let you prototype, port or ship a project in just few minutes. It's very granular, flexible and efficient. Support multiple shading languages and can easily be added to any project, enviroment or framework of your choice. \n"},"ml5.js":{"relativeUrl":"/libraries/","description":"Friendly machine learning for the web—a neighborly approach to creating and exploring artificial intelligence in the browser."},"número":{"relativeUrl":"/libraries/","description":"A friendly and intuitive math library for p5.js."},"p5.FIP":{"relativeUrl":"/libraries/","description":"Real-time image processing library - add filters and post-processing to your p5.js sketches."},"p5.Polar":{"relativeUrl":"/libraries/","description":"p5.Polar provides mathematical abstractions making it easy to create create beautiful, kaleidoscopic, radial patterns."},"p5.SceneManager":{"relativeUrl":"/libraries/","description":"p5.SceneManager helps you create sketches with multiple states / scenes. Each scene is a like a sketch within the main sketch."},"p5.Utils":{"relativeUrl":"/libraries/","description":"p5.Utils is a tool collection for my coding class, featuring a pixel ruler, gradient fill color bindings, and other helpful shortcuts for beginners."},"p5.anaglyph":{"relativeUrl":"/libraries/","description":"A library for creating 3D stereoscopic 3D scenes and images using red/cyan glasses"},"p5.animS":{"relativeUrl":"/libraries/","description":"Animates p5.js shapes by rendering their drawing processes."},"p5.asciify":{"relativeUrl":"/libraries/","description":"Apply real-time ASCII conversion to your favourite WebGL p5.js sketches to create unique, text-based visuals instantly."},"p5.bezier":{"relativeUrl":"/libraries/","description":"p5.bezier helps draw Bézier curves with more than four control points and closed curves."},"p5.ble":{"relativeUrl":"/libraries/","description":"A Javascript library that enables communication between your BLE devices and your p5.js sketch."},"p5.brush":{"relativeUrl":"/libraries/","description":"Unlock custom brushes, natural fill effects and intuitive hatching in p5.js."},"p5.capture":{"relativeUrl":"/libraries/","description":"Record your p5.js sketches effortlessly!"},"p5.cmyk":{"relativeUrl":"/libraries/","description":"CMYK color for p5.js"},"p5.collide2d":{"relativeUrl":"/libraries/","description":"p5.collide2D provides tools for calculating collision detection for 2D geometry with p5.js."},"p5.colorGenerator":{"relativeUrl":"/libraries/","description":"p5.colorGenerator generates harmonious color schemes by starting from a given base color or selecting a random color as a starting point."},"p5.createLoop":{"relativeUrl":"/libraries/","description":"Create animation loops with noise and GIF exports in one line of code."},"p5.csg":{"relativeUrl":"/libraries/","description":"A library for constructive solid geometry. Do Boolean operations on your p5.Geometry to make new shapes!"},"p5.fab":{"relativeUrl":"/libraries/","description":"p5.fab controls digital fabrication machines from p5.js!\n"},"p5.fillGradient":{"relativeUrl":"/libraries/","description":"Fill shapes in p5.js with Linear, Radial and Conic Gradients."},"p5.filterRenderer":{"relativeUrl":"/libraries/","description":"A library for rendering 3D scenes with depth-of-field blur and with ambient occlusion shadows."},"p5.flex":{"relativeUrl":"/libraries/","description":"p5 container with responsive canvas feature."},"p5.geolocation":{"relativeUrl":"/libraries/","description":"p5.geolocation provides techniques for acquiring, watching, calculating, and geofencing user locations for p5.js."},"p5.glitch":{"relativeUrl":"/libraries/","description":"p5.js library for glitching images and binary files in the web browser"},"p5.grain":{"relativeUrl":"/libraries/","description":"Conveniently add film grain, seamless texture overlays, and manipulate pixels to achieve nostalgic and artistic effects in p5.js sketches and artworks."},"p5.joystick":{"relativeUrl":"/libraries/","description":"Connect and play with physical joysticks."},"p5.localessage":{"relativeUrl":"/libraries/","description":"p5.localmessage provides a simple interface to send messages locally from one sketch to another."},"p5.mapper":{"relativeUrl":"/libraries/","description":"A projection mapping library for p5.js"},"p5.marching":{"relativeUrl":"/libraries/","description":"Raster to vector conversion, isosurfaces."},"p5.palette":{"relativeUrl":"/libraries/","description":"A library to manage color palettes in p5.js"},"p5.party":{"relativeUrl":"/libraries/","description":"quickly prototype networked multiplayer games and apps"},"p5.pattern":{"relativeUrl":"/libraries/","description":"A pattern drawing library for p5.js."},"p5.qol":{"relativeUrl":"/libraries/","description":"Extend p5 with Quality of Life utilities."},"p5.quadrille.js":{"relativeUrl":"/libraries/","description":"A library for creating puzzle and board games, and for visual computing experiments."},"p5.Riso":{"relativeUrl":"/libraries/","description":"p5.Riso is a library for generating files suitable for Risograph printing. It helps turn your sketches into multi-color prints."},"p5.scaler":{"relativeUrl":"/libraries/","description":"Smart scaling of p5.js sketches in a variety of ways (to fit the browser's inner dimensions, to fit the canvas DOM container, to a specific ratio, etc)."},"p5.serialserver":{"relativeUrl":"/libraries/","description":"p5.serialserver is a p5.js library that enables communication between your p5.js sketch and a serial enabled device, for example, an Arduino microcontroller."},"p5.simpleAR":{"relativeUrl":"/libraries/","description":"A simple JavaScript library that easily converts existing p5.js sketches to AR."},"p5.speech":{"relativeUrl":"/libraries/","description":"p5.speech provides simple, clear access to the Web Speech and Speech Recognition APIs, allowing for the easy creation of sketches that can talk and listen."},"p5.teach.js":{"relativeUrl":"/libraries/","description":"A beginner friendly math animation library for p5.js"},"p5.toio":{"relativeUrl":"/libraries/","description":"A JavaScript library for controlling toio™Core Cube from p5.js sketches."},"p5.touchgui":{"relativeUrl":"/libraries/","description":"p5.touchgui is intended to extend p5.js and make it easy to add buttons, sliders, and other GUI (graphical user interface) objects to your p5.js sketches, enabling you to focus on quickly iterating ideas with easily created GUI objects that work with both mouse and multi-touch input."},"p5.treegl":{"relativeUrl":"/libraries/","description":"Shader development and space transformations WEBGL p5.js library."},"p5.tween":{"relativeUrl":"/libraries/","description":"With p5.tween you can create easily animations as tween in a few keyframes."},"p5.videorecorder":{"relativeUrl":"/libraries/","description":"Record your canvas as a video file with audio."},"p5.warp":{"relativeUrl":"/libraries/","description":"Fast 3D domain warping using shaders."},"p5.webserial":{"relativeUrl":"/libraries/","description":"A library for interacting with Serial devices from within the browser, based on Web Serial API (available on Chrome and Edge)."},"p5.xr":{"relativeUrl":"/libraries/","description":"A library for creating VR and AR sketches with p5."},"p5grid":{"relativeUrl":"/libraries/","description":"Hexagonal Tiling Library"},"p5jsDebugCam":{"relativeUrl":"/libraries/","description":"A basic keyboard only debug camera for p5.js"},"p5mirror":{"relativeUrl":"/libraries/","description":"A library to download your editor.p5js sketches into a git repo or locally"},"p5play":{"relativeUrl":"/libraries/","description":"JS game engine that uses p5.js for graphics and Box2D for physics."},"p5snap":{"relativeUrl":"/libraries/","description":"a command-line interface to create snapshots of sketches"},"p5videoKit":{"relativeUrl":"/libraries/","description":"A dashboard for mixing video in the browser"},"pretty-grid":{"relativeUrl":"/libraries/","description":"Create and manipulate grids with Javascript"},"rita.js":{"relativeUrl":"/libraries/","description":"tools for natural language and generative writing"},"Shader Park":{"relativeUrl":"/libraries/","description":"Explore shader programming through a JavaScript interface without the complexity of GLSL. Quickly script shaders using a P5.js style language."},"simple.js":{"relativeUrl":"/libraries/","description":"Helper functions and defaults for young and new coders."},"Total Serialism":{"relativeUrl":"/libraries/","description":"A toolbox full of methods for procedurally generating and transforming arrays mainly focused on algorithmic composition. Includes methods like markov-chain, cellular automaton, lindenmayer system, euclidean distribution and much more! Generate the array with your desired method and easily iterate over them in a for-loop to draw the results."},"UI Renderer":{"relativeUrl":"/libraries/","description":"Create a UI within your sketch, including utilities for different layouts and interactive sliders."},"WEBMIDI.js":{"relativeUrl":"/libraries/","description":"A user-friendly library to send and receive MIDI messages with ease."}},"events-fallback":{"p5.js Contributors Conference 2015":{"relativeUrl":"/events/contributors-conference-2015","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro group approximately participants gathered spent week [Frank-Ratchye STUDIO Creative Inquiry](http://studioforcreativeinquiry.org/), advancing code documentation community outreach tools p5js programming environment Participants Hong Kong Seattle Los Angeles Boston York working professionals fields creative technology interaction design new-media arts included half-dozen undergraduate graduate students Carnegie Mellons Schools Art Architecture [A smile make p5 sign hands]/images/cc2015/2015_1jpg [Woman presenting statement laptop]/images/cc2015/2015_3jpg expressively speaks microphone male collaborators on]/images/cc2015/2015_4jpg [Participants attentively listen presentation]/images/cc2015/2015_5jpg reads female students]/images/cc2015/2015_6jpg sit circle white board sticky notes student microphone]/images/cc2015/2015_7jpg table laptops compare code]/images/cc2015/2015_8jpg [Whiteboard colored written programming]/images/cc2015/2015_9jpg speaking valuing skill sets powerpoint classroom]/images/cc2015/2015_10jpg podium auditorium stage skyping screen]/images/cc2015/2015_11jpg [Overhead view classroom laptops]/images/cc2015/2015_12jpg [Five people discussion circle]/images/cc2015/2015_13jpg sharing notes]/images/cc2015/2015_14jpg [Man participants]/images/cc2015/2015_15jpg jump throw hands air green lawn]/images/cc2015/2015_2jpg ## [Jason Alderman](http://huah.net/jason/), [Sepand Ansari](http://sepans.com/), [Tega Brain](http://tegabrain.com/), [Emily Chen](https://medium.com/@emchenNYC/), [Andres Colubri](http://andrescolubri.net/), [Luca Damasco](https://twitter.com/lucapodular), [Guy de Bree](http://guydebree.com/), [Christine Carteret](http://www.cjdecarteret.com/), [Xy Feng](http://xystudio.cc/), [Sarah Groff-Palermo](http://www.sarahgp.com/), [Chris Hallberg](http://www.crhallberg.com/), [Val Head](http://valhead.com/), [Johanna Hedva](http://johannahedva.com/), [Kate Hollenbach](http://www.katehollenbach.com/), [Jennifer Jacobs](http://web.media.mit.edu/~jacobsj/), [Epic Jefferson](http://www.epicjefferson.com/), [Michelle Partogi](http://michellepartogi.com/), [Sam Lavigne](http://lav.io/), [Golan Levin](http://flong.com/), [Cici Liu](http://www.liuchangitp.com/), [Maya Man](http://www.mayaman.cc/), [Lauren McCarthy](http://lauren-mccarthy.com/), [David Newbury](http://www.workergnome.com/), [Paolo Pedercini](http://molleindustria.org/), [Luisa Pereira](http://luisaph.com/), [Miles Peyton](http://mileshiroo.info/), [Caroline Record](http://carolinerecord.com/), [Berenger Recoules](http://b2renger.github.io/), [Stephanie Pi](https://pibloginthesky.wordpress.com/), Sigal](http://jasonsigal.cc/), [Kevin Siwoff](http://studioindefinit.com/), [Charlotte Stiles](http://charlottestiles.com/) Diversity Alongside technical development main focuses conference diversity began panel—[Diversity Voices Race Gender Ability Class FLOSS Internet](http://studioforcreativeinquiry.org/events/diversity-seven-voices-on-race-gender-ability-class-for-floss-and-the-internet). Organized Hedva](http://johannahedva.com/) panel place Tuesday Kresge Auditorium Mellon University Speakers [Casey Reas](http://reas.com/), [Phoenix Perry](http://phoenixperry.com/), [Taeyoon Choi](http://taeyoonchoi.com/), [Sara Hendren](http://ablersite.org/), [Chandler McWilliams](http://chandlermcwilliams.com/). poster Internet]/images/cc2015/diversity_640jpg Support contributor Inquiry](http://studioforcreativeinquiry.org/) academic laboratory atypical anti-disciplinary inter-institutional research intersections science culture event made grant [National Endowment Arts](https://arts.gov/), generous support [NYU Interactive Telecommunications Program](https://tisch.nyu.edu/itp) ITP [Processing Foundation](http://foundation.processing.org/), [TheArtificial](http://theartificial.nl/), [Bocoup](http://bocoup.com/), [Darius Kazemi](http://tinysubversions.com/), [Emergent Digital Practices | Denver] **Thank you** [The National Arts NEA]/images/logo/artworksjpg Frank-Ratchye Inquiry]/images/logo/frank-ratchyepng ITP]/images/logo/itppng Emergent program Denver]/images/logo/edppng [ITP]/images/logo/bocouppng Artificial]/images/logo/theartificialpng undefined"},"p5.js Contributors Conference 2019":{"relativeUrl":"/events/contributors-conference-2019","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro interdisciplinary group participants gathered Frank-Ratchye STUDIO Creative Inquiry advancing code documentation community outreach tools exploring current landscape p5js programming environment Comprising diverse range fields creative technology interaction design media arts conference aimed fostering dialogue multidisciplinary lens Working groups focused topic areas Access Music Code Performance Landscape Tech Internationalization Videos Qianqian Ye [Man podium giving presentation group]/images/cc2019/2019_1jpg [Participants sitting long table lunch discussion]/images/cc2019/2019_2jpg [Classroom working laptops]/images/cc2019/2019_4jpg meeting dark classroom]/images/cc2019/2019_5jpg [Woman classroom participants]/images/cc2019/2019_6jpg conversing busy classroom]/images/cc2019/2019_7jpg microphone speaking fellow classroom]/images/cc2019/2019_8jpg [Participant speaks front projected text problem anonymyzing data]/images/cc2019/2019_9jpg [Person reads add features increase access]/images/cc2019/2019_10jpg talking ]/images/cc2019/2019_11jpg [A man participants]/images/cc2019/2019_12jpg sit speakers listening intently]/images/cc2019/2019_13jpg sacred boundaries projection her]/images/cc2019/2019_15jpg [Overhead view panel people image 3d rendered it]/images/cc2019/2019_16jpg laptops observe screen]/images/cc2019/2019_17jpg lifesize teddy bear works laptop]/images/cc2019/2019_18jpg standing smiling]/images/cc2019/2019_19jpg [Four circle conversing]/images/cc2019/2019_20jpg eating together]/images/cc2019/2019_21jpg large shaped classroom]/images/cc2019/2019_22jpg energetically microphone]/images/cc2019/2019_23jpg [Group campfire made LCD monitors]/images/cc2019/campfirejpg photo smiling enthusiastically hands air]/images/cc2019/2019_24jpg Photos Jacquelyn Johnson ## Participants American Artist Omayeli Arenyeka Sina Bahram Aatish Bhatia Natalie Braginsky Jon Chambers Luca Damasco Aren Davey Ted Davis Carlos Garcia Stalgia Grigg Kate Hollenbach shawné michaelain holloway Claire Kearney-Volpe Sona Lee Kenneth Lim Evelyn Masso Lauren McCarthy LaJuné McMillian Allison Parrish Luisa Pereira Guillermo Montecinos Aarón Montoya-Moraga Luis Morales-Navarro Shefali Nayak Everest Pipkin Olivia Ross Dorothy Santos Yasheng Jun Shern Chan Cassie Tarakajian Valley Xin Alex Yixuan Xu Outputs - Blackness Gender Virtual Space led art installations prototype notebook interface Created library system p5 Editor Prototypes connecting libraries Global Contributor's Toolkit write non-violent zine overhaul website accessibility Including updates screen reader improvements home download started reference pages contributions p5grid implementation highly flexible triangle square hexagon octagon girds p5multiplayer set template files building multi-device multiplayer game multiple clients connect host page L05 Experiments P5LIVE testing early implementations softCompile OSC interfacing added connectivity demo MIDI setup collaborative live-coding vj Collaborative performances performance Workshops closing Golan Levin Support contributor place Carnegie Mellon University academic laboratory atypical anti-disciplinary inter-institutional research intersections science culture event grant National Endowment Arts generous support Processing Foundation Mozilla Clinic Open Source COSA Denver NYU Tandon IDM ITP FHNW Academy Art Design DePaul College Computing Digital Media Parsons School Technology **Thank you** [The NEA]/images/logo/artworksjpg Inquiry]/images/logo/frank-ratchyepng [University Applied Sciences Northwestern Switzerland Design]/images/logo/northwestern-switzerlandjpg [Processing Foundation]/images/logo/processing-foundationpng [Clinic Arts]/images/logo/COSApng [NYU Engineering Integrated Media]/images/logo/nyujpg [Parsons Technology]/images/logo/Parsonsjpg ITP]/images/logo/itppng [DePaul University]/images/logo/depaulpng undefined"},"p5.js Access Day 2022":{"relativeUrl":"/events/p5js-access-day-2022","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js Access Day virtual conference talk access open-source software arts OSSTA greater issues day-long online event features themed-sessions — Critical Web Accessibility Disability Arts Community Building Translation space contributors experienced practitioners projects share knowledge perspectives dreams building technical spaces Organizer curator [Qianqian Ye](https://qianqian-ye.com/) Event Coordinator Video Producer [Karen Abe](https://www.instagram.com/prod.ka/) ## Recap ASL Interpretation Opening Moderator [Kate Hollenbach](http://www.katehollenbach.com/), Speakers [Luis Morales-Navarro](http://luismn.com/), [Jes Daigle](https://twitter.com/techandautism) [Xiaowei Wang](https://www.xiaoweiwang.com/), [Natalee Decker](https://www.instagram.com/crip_fantasy/), [Kemi Sijuwade-Ukadike](https://www.linkedin.com/in/adekemisijuwade), [Kevin Gotkin](https://kevingotkin.com/) [Dorothy Santos](https://dorothysantos.com/), [Tiny Tech Zine](https://tinytechzines.org/), [Close Isnt Home](https://closeisnthome.com/), [Zainab Aliyu](https://zai.zone/) [Kenneth Lim](https://limzykenneth.com/), [Inhwa Yeom](https://yinhwa.art/), [Shaharyar Shamshi](https://shaharyarshamshi.xyz/), [Felipe Gomes](https://felipesg.cargo.site/) Closing Production - Advisor [Claire Kearney-Volpe](http://www.takinglifeseriously.com/index.html), [Saber Khan](https://www.edsaber.info/), [evelyn masso](https://outofambit.format.com/), [Lauren Lee McCarthy](http://lauren-mccarthy.com/), [Xin Xin](https://xin-xin.info/) Live [Pro Bono ASL](https://www.probonoasl.com/) Graphic Designer [Katie Chan](https://twitter.com/katiechaan) Support Abe](https://www.instagram.com/prod.ka/), [Jay Borgwardt](https://www.jayborgwardt.com/), [Yuehao Jiang](https://yuehaojiang.com/) Closed Captioning Transcription Ju Hye Kim Xiao Yi Wang-Beckval Wong](https://www.instagram.com/claireewongg/) made grant [Mozilla Foundation](https://foundation.mozilla.org/) Award generous support [Processing Foundation](https://processingfoundation.org/) [Frank-Ratchye STUDIO Creative Inquiry](http://studioforcreativeinquiry.org/). **Thank you** Foundation]/images/logo/mozilla-foundationpng [The Frank-Ratchye Inquiry]/images/logo/frank-ratchyepng Foundation]/images/logo/processing-foundationpng undefined"},"p5.js Community Salon 2023":{"relativeUrl":"/events/p5js-community-salon-2023","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js Community Salon public gathering community members share connect NYU ITP Thursday March 630-730pm event group speakers briefly work food social time ## Organizers organized Project Lead [Qianqian Ye](https://qianqian-ye.com), part IMA/ITP Fellowship supported Sonia Choi Communications Coordinator Processing Foundation Photo credit [Ziyuan Lin](https://www.ziyuanlin.com). Ye holding mic big tv screen grid contributor photos it]/images/p5js-salon-2023/salon-2JPG Speakers Zainab Aliyu [Zainab image book reading excerpt it]/images/p5js-salon-2023/salon-3JPG Aarati Akkapedi [Aarati whiteboard collection printed them]/images/p5js-salon-2023/salon-4JPG [Suhyun work]/images/p5js-salon-2023/salon-5JPG Don Hanson [Don front work]/images/p5js-salon-2023/salon-6JPG Shawné Michaelain Holloway [Shawné work]/images/p5js-salon-2023/salon-7JPG Tsige Tafesse [Tsige Open Call]/images/p5js-salon-2023/salon-8JPG Rachel Lim [Rachel Web Editor Features]/images/p5js-salon-2023/salon-9JPG Jackie Liu [Jackie series screenshots game project Chao bing]/images/p5js-salon-2023/salon-10JPG Olivia McKayla Ross [Olivia p5 salon poster it]/images/p5js-salon-2023/salon-11JPG Munus Shih [Munus pronouns facts him]/images/p5js-salon-2023/salon-12JPG Xin [Xin text work]/images/p5js-salon-2023/salon-13JPG Lavanya Suresh [Lavanya Kolams]/images/p5js-salon-2023/salon-14JPG [p5js poster]/images/p5js-salon-2023/0-banner-p5js-community-salonjpg [A presenters organizers smiling making silly faces camera kneeling standing upright]/images/p5js-salon-2023/salon-15JPG audience sitting crowded room curious expression]/images/p5js-salon-2023/salon-16JPG ### Recap Video Part Support **Thank you** [NYU ITP]/images/logo/itppng undefined"},"Sovereign Tech Fund x p5.js Documentation Accessibility Project":{"relativeUrl":"/events/stf-2024","description":"import YouTubeEmbed ///components/YouTubeEmbed/indexastro Logos ///components/Logos/indexastro p5js selected receive total €450000 rounds funding [Sovereign Tech Fund](https://sovereigntechfund.de/en) enhance [p5js Documentation organization accessibility](https://www.sovereigntechfund.de/tech/p5js). work part Sovereign Funds [Contribute Back Open Source Challenges](https://sovereigntechfund.de/en/challenges/). project addressed longstanding challenges scatterness limited accessibility documentation final deliverable includes updated website focus accessible organized translated contributor Additionally features curated collection community sketches add-ons library educational resources providing improved aims facilitate effective navigation feature exploration empowering users create richer innovative projects promotes inclusivity ensuring people diverse backgrounds skill levels cultures engage meaningfully ## Contributors brought approximately contributors 60-75 participating round team included experienced first-time forming global group dedicated writing translating designing engineering researching conducting reviews open-source typically operate independently fostered collective efforts encouraging collaboration individuals skills perspectives shift collaborative endeavors led cohesive synergistic approach advancing exemplifying strength community-driven initiatives landscape **Thank participated STF made 💗** Processing Foundation administrative support** ### Round *September December 2023* #### Internal Team * Project Lead Manager Qianqian Ye Doc Kenneth Lim Dave Pagurek Nick McIntyre Assistant Karen Abe Website Designer Stefanie Tam Tyler Yin Developer Bocoup cypress masso Stalgia Grigg Carmen Cañas Isaac Durazo Accessibility Consultant Andy Slater Proofreader Fivver Definition Workshop Organizer Winnie Koundinya Dhulipalla Facilitator Yasmine Boudiaf Jazmin Morris Participants UAL CCI Examples Caleb Foss Writer Darren Kessner Kathryn Lichlyter Reviewer Amy Chen Lance Cole Tutorials Writers Reviewers Joanne Amarisa Gregory Benedis-Grab Christine Belzie Tristan Bunn Julien Kris Ruth Ikegah Portia Morrell Jaleesa Trapp Akanksha Vyas WebGL Adam Ferriss Contributor Alm Chung Tanvi Kumar Luis Morales-Navarro Community Statement Code Conduct Oluwakemi Oritsejafor Zainab Aliyu *January April 2024* Copywriter Sarah Ciston sketch Curator Special Sinan Ascioglu OpenProcessing supporting Translation Researcher Spanish Steward Cristian Bañuelos Sebastián Méndez Diana Galindo Clavijo Xavier Gongora Marcela Martinez Galvan Emilio Ocelotl Reyes Marianne Teixido Guzmán Chinese Weijia Li Miaoye Chirui Cheng Lingxiao Wang Shengnan Angela Rong Yudi Wu Hindi Divyansh Srivastava Eshaan Aggarwal Akash Jaiswalm Aditya Rana Sanjay Singh Rajpoot Surbhi Pittie Korean Inhwa Yeom Sejin Yewon Jang Yunyoung Minwook Park Sunghun Hyunwoo Rhee Reference Technical Layla Quiñones Nat Decker thai Lu Cielo Saucedo Liam Coleman Revisions Kate Machmeyer Support supported Fund supports development improvement maintenance open digital infrastructure public interest goal strengthen source ecosystem sustainably focusing security resilience technological diversity code funded German Federal Ministry Economic Affairs Climate Action BMWK hosted Agency Disruptive Innovation GmbH SPRIND **Thanks project** Links [STF](https://www.sovereigntechfund.de/programs/challenges): Contribute Open-source Challenge [MEDIUM](https://medium.com/@ProcessingOrg/p5-js-receives-major-funding-from-the-sovereign-tech-fund-bbf61d1171fe): Receives Major Funding Fund]/images/logo/stfwebp undefined"}},"people-fallback":{"A Welles":{"relativeUrl":"/people/#a-welles"},"Aarati Akkapeddi ":{"relativeUrl":"/people/#aarati-akkapeddi-"},"Aaron Casanova":{"relativeUrl":"/people/#aaron-casanova"},"Aaron George":{"relativeUrl":"/people/#aaron-george"},"aarón montoya-moraga":{"relativeUrl":"/people/#aaron-montoya-moraga"},"Aaron Ni":{"relativeUrl":"/people/#aaron-ni"},"Aatish Bhatia":{"relativeUrl":"/people/#aatish-bhatia"},"Abdiel Lopez":{"relativeUrl":"/people/#abdiel-lopez"},"Abe Pazos":{"relativeUrl":"/people/#abe-pazos"},"Abhi Gulati":{"relativeUrl":"/people/#abhi-gulati"},"Abhinav Kumar":{"relativeUrl":"/people/#abhinav-kumar"},"Abhinav Sagar":{"relativeUrl":"/people/#abhinav-sagar"},"Abhinav Srinivas":{"relativeUrl":"/people/#abhinav-srinivas"},"Abishake":{"relativeUrl":"/people/#abishake"},"Acha":{"relativeUrl":"/people/#acha"},"Adam Ferriss":{"relativeUrl":"/people/#adam-ferriss"},"Adam Král":{"relativeUrl":"/people/#adam-kral"},"Adam Smith":{"relativeUrl":"/people/#adam-smith"},"Adarsh":{"relativeUrl":"/people/#adarsh"},"Adil Rabbani":{"relativeUrl":"/people/#adil-rabbani"},"Aditya Deshpande":{"relativeUrl":"/people/#aditya-deshpande"},"Aditya Mohan":{"relativeUrl":"/people/#aditya-mohan"},"Aditya Rachman Putra":{"relativeUrl":"/people/#aditya-rachman-putra"},"Aditya Rana":{"relativeUrl":"/people/#aditya-rana"},"Aditya Shrivastav":{"relativeUrl":"/people/#aditya-shrivastav"},"Aditya Siddheshwar":{"relativeUrl":"/people/#aditya-siddheshwar"},"aditya123473892":{"relativeUrl":"/people/#aditya123473892"},"Adwaith D":{"relativeUrl":"/people/#adwaith-d"},"agrshch":{"relativeUrl":"/people/#agrshch"},"Ahmet Kaya":{"relativeUrl":"/people/#ahmet-kaya"},"Aidan Nelson":{"relativeUrl":"/people/#aidan-nelson"},"Aierie":{"relativeUrl":"/people/#aierie"},"Ajaya Mati":{"relativeUrl":"/people/#ajaya-mati"},"ajayTDM":{"relativeUrl":"/people/#ajaytdm"},"Ajeet Pratap Singh":{"relativeUrl":"/people/#ajeet-pratap-singh"},"Akash Jaiswal":{"relativeUrl":"/people/#akash-jaiswal"},"AKASH RAJ":{"relativeUrl":"/people/#akash-raj"},"Akash":{"relativeUrl":"/people/#akash"},"Akhil Raj":{"relativeUrl":"/people/#akhil-raj"},"Akshat Nema":{"relativeUrl":"/people/#akshat-nema"},"Akshay Padte":{"relativeUrl":"/people/#akshay-padte"},"al6862":{"relativeUrl":"/people/#al6862"},"Alberto Di Biase":{"relativeUrl":"/people/#alberto-di-biase"},"Alejandra Trejo":{"relativeUrl":"/people/#alejandra-trejo"},"Alejandro":{"relativeUrl":"/people/#alejandro"},"Alex Lyons":{"relativeUrl":"/people/#alex-lyons"},"Alex Troesch":{"relativeUrl":"/people/#alex-troesch"},"AliLordLoss":{"relativeUrl":"/people/#alilordloss"},"AlM Chng":{"relativeUrl":"/people/#alm-chng"},"Aloneduckling":{"relativeUrl":"/people/#aloneduckling"},"alp tuğan":{"relativeUrl":"/people/#alp-tugan"},"Amey Bhavsar":{"relativeUrl":"/people/#amey-bhavsar"},"anagondesign":{"relativeUrl":"/people/#anagondesign"},"András Gárdos":{"relativeUrl":"/people/#andras-gardos"},"AndrasGG":{"relativeUrl":"/people/#andrasgg"},"andrei antonescu":{"relativeUrl":"/people/#andrei-antonescu"},"Andy Timmons":{"relativeUrl":"/people/#andy-timmons"},"Ankush Banik":{"relativeUrl":"/people/#ankush-banik"},"Anna Carreras":{"relativeUrl":"/people/#anna-carreras"},"Annie McKinnon":{"relativeUrl":"/people/#annie-mckinnon"},"anniezhengg":{"relativeUrl":"/people/#anniezhengg"},"Anshuman Maurya":{"relativeUrl":"/people/#anshuman-maurya"},"Anthony Su":{"relativeUrl":"/people/#anthony-su"},"Antoinette Bumatay-Chan":{"relativeUrl":"/people/#antoinette-bumatay-chan"},"Antonio Jesús Sánchez Padial":{"relativeUrl":"/people/#antonio-jesus-sanchez-padial"},"ANURAG GUPTA":{"relativeUrl":"/people/#anurag-gupta"},"Aqmalp99":{"relativeUrl":"/people/#aqmalp99"},"Arbaaz":{"relativeUrl":"/people/#arbaaz"},"Arihant Parsoya":{"relativeUrl":"/people/#arihant-parsoya"},"Arijit Kundu":{"relativeUrl":"/people/#arijit-kundu"},"Arijit":{"relativeUrl":"/people/#arijit"},"Armaan Gupta":{"relativeUrl":"/people/#armaan-gupta"},"Arsenije Savic":{"relativeUrl":"/people/#arsenije-savic"},"ArshM17":{"relativeUrl":"/people/#arshm17"},"Aryan Koundal":{"relativeUrl":"/people/#aryan-koundal"},"Aryan Singh":{"relativeUrl":"/people/#aryan-singh"},"Aryan Thakor":{"relativeUrl":"/people/#aryan-thakor"},"Ashley Kang":{"relativeUrl":"/people/#ashley-kang"},"Ashris":{"relativeUrl":"/people/#ashris"},"ashu8912":{"relativeUrl":"/people/#ashu8912"},"Ashwani Dey":{"relativeUrl":"/people/#ashwani-dey"},"AsukaMinato":{"relativeUrl":"/people/#asukaminato"},"Atul Varma":{"relativeUrl":"/people/#atul-varma"},"Austin Cawley-Edwards":{"relativeUrl":"/people/#austin-cawley-edwards"},"Austin Lee Slominski":{"relativeUrl":"/people/#austin-lee-slominski"},"Avelar":{"relativeUrl":"/people/#avelar"},"Ayush Jain":{"relativeUrl":"/people/#ayush-jain"},"Ayush Shankar":{"relativeUrl":"/people/#ayush-shankar"},"Ayush Sharma":{"relativeUrl":"/people/#ayush-sharma"},"b2renger":{"relativeUrl":"/people/#b2renger"},"Beau Muylle":{"relativeUrl":"/people/#beau-muylle"},"Ben Fry":{"relativeUrl":"/people/#ben-fry"},"Ben Greenberg":{"relativeUrl":"/people/#ben-greenberg"},"Ben Hinchley":{"relativeUrl":"/people/#ben-hinchley"},"Ben Moren":{"relativeUrl":"/people/#ben-moren"},"Ben Scheiner":{"relativeUrl":"/people/#ben-scheiner"},"Ben Wendt":{"relativeUrl":"/people/#ben-wendt"},"Benjamin Davies":{"relativeUrl":"/people/#benjamin-davies"},"Benoît Bouré":{"relativeUrl":"/people/#benoit-boure"},"benpalevsky":{"relativeUrl":"/people/#benpalevsky"},"BerfinA":{"relativeUrl":"/people/#berfina"},"Berke Özgen":{"relativeUrl":"/people/#berke-ozgen"},"Bernice Wu":{"relativeUrl":"/people/#bernice-wu"},"Bharath Kumar R":{"relativeUrl":"/people/#bharath-kumar-r"},"Blaize Kaye":{"relativeUrl":"/people/#blaize-kaye"},"Boaz":{"relativeUrl":"/people/#boaz"},"Bob Holt":{"relativeUrl":"/people/#bob-holt"},"Bob Ippolito":{"relativeUrl":"/people/#bob-ippolito"},"Bobby Kazimiroff":{"relativeUrl":"/people/#bobby-kazimiroff"},"Boris Bucha":{"relativeUrl":"/people/#boris-bucha"},"Brad Buchanan":{"relativeUrl":"/people/#brad-buchanan"},"Brad Smith":{"relativeUrl":"/people/#brad-smith"},"Brahvim":{"relativeUrl":"/people/#brahvim"},"Brett Cooper":{"relativeUrl":"/people/#brett-cooper"},"Brian Boucheron":{"relativeUrl":"/people/#brian-boucheron"},"Brian Whitman":{"relativeUrl":"/people/#brian-whitman"},"brightredchilli":{"relativeUrl":"/people/#brightredchilli"},"Bryan":{"relativeUrl":"/people/#bryan"},"bsubbaraman":{"relativeUrl":"/people/#bsubbaraman"},"Bulkan Evcimen":{"relativeUrl":"/people/#bulkan-evcimen"},"c-dacanay":{"relativeUrl":"/people/#c-dacanay"},"cab_kyabe":{"relativeUrl":"/people/#cab-kyabe"},"cacoollib":{"relativeUrl":"/people/#cacoollib"},"Caitlin":{"relativeUrl":"/people/#caitlin"},"Caleb Eggensperger":{"relativeUrl":"/people/#caleb-eggensperger"},"Caleb Foss":{"relativeUrl":"/people/#caleb-foss"},"Caleb Mazalevskis":{"relativeUrl":"/people/#caleb-mazalevskis"},"Callie":{"relativeUrl":"/people/#callie"},"Cameron Yick":{"relativeUrl":"/people/#cameron-yick"},"Camille Roux":{"relativeUrl":"/people/#camille-roux"},"Caroline Hermans":{"relativeUrl":"/people/#caroline-hermans"},"Caroline Record":{"relativeUrl":"/people/#caroline-record"},"Casey Reas":{"relativeUrl":"/people/#casey-reas"},"Cassie Tarakajian":{"relativeUrl":"/people/#cassie-tarakajian"},"cedarfall":{"relativeUrl":"/people/#cedarfall"},"Ceesjan Luiten":{"relativeUrl":"/people/#ceesjan-luiten"},"Chan Jun Shern":{"relativeUrl":"/people/#chan-jun-shern"},"Chandler McWilliams":{"relativeUrl":"/people/#chandler-mcwilliams"},"Char":{"relativeUrl":"/people/#char"},"chaski":{"relativeUrl":"/people/#chaski"},"chechenxu":{"relativeUrl":"/people/#chechenxu"},"Chelly Jin":{"relativeUrl":"/people/#chelly-jin"},"Chiciuc Nicușor":{"relativeUrl":"/people/#chiciuc-nicusor"},"Chinmay Kadam":{"relativeUrl":"/people/#chinmay-kadam"},"Chiun Hau You":{"relativeUrl":"/people/#chiun-hau-you"},"Chris Hallberg":{"relativeUrl":"/people/#chris-hallberg"},"Chris P.":{"relativeUrl":"/people/#chris-p-"},"Chris Thomson":{"relativeUrl":"/people/#chris-thomson"},"Chris":{"relativeUrl":"/people/#chris"},"Christine de Carteret":{"relativeUrl":"/people/#christine-de-carteret"},"Christopher Coleman":{"relativeUrl":"/people/#christopher-coleman"},"Christopher John Ryan":{"relativeUrl":"/people/#christopher-john-ryan"},"Claire K-V":{"relativeUrl":"/people/#claire-k-v"},"Cliff Su":{"relativeUrl":"/people/#cliff-su"},"codeanticode":{"relativeUrl":"/people/#codeanticode"},"Coding for the Arts":{"relativeUrl":"/people/#coding-for-the-arts"},"Cody Fuller":{"relativeUrl":"/people/#cody-fuller"},"cog25":{"relativeUrl":"/people/#cog25"},"CommanderRoot":{"relativeUrl":"/people/#commanderroot"},"computational mama":{"relativeUrl":"/people/#computational-mama"},"Connie Liu":{"relativeUrl":"/people/#connie-liu"},"Constance Yu":{"relativeUrl":"/people/#constance-yu"},"Corey Farwell":{"relativeUrl":"/people/#corey-farwell"},"Corey Gouker":{"relativeUrl":"/people/#corey-gouker"},"Cosme Escobedo":{"relativeUrl":"/people/#cosme-escobedo"},"Craig Pickard":{"relativeUrl":"/people/#craig-pickard"},"Cristóbal Valenzuela":{"relativeUrl":"/people/#cristobal-valenzuela"},"cypress masso":{"relativeUrl":"/people/#cypress-masso"},"Dabe Andre Enajada":{"relativeUrl":"/people/#dabe-andre-enajada"},"Dan Hoizner":{"relativeUrl":"/people/#dan-hoizner"},"Dan":{"relativeUrl":"/people/#dan"},"Dana Mulder":{"relativeUrl":"/people/#dana-mulder"},"Daniel Adams":{"relativeUrl":"/people/#daniel-adams"},"Daniel Grantham":{"relativeUrl":"/people/#daniel-grantham"},"Daniel Howe":{"relativeUrl":"/people/#daniel-howe"},"Daniel Marino":{"relativeUrl":"/people/#daniel-marino"},"Daniel Michel":{"relativeUrl":"/people/#daniel-michel"},"Daniel Sarno":{"relativeUrl":"/people/#daniel-sarno"},"Daniel Shiffman":{"relativeUrl":"/people/#daniel-shiffman"},"Darby Rathbone":{"relativeUrl":"/people/#darby-rathbone"},"Darío Hereñú":{"relativeUrl":"/people/#dario-herenu"},"Darius Morawiec":{"relativeUrl":"/people/#darius-morawiec"},"Dave Pagurek":{"relativeUrl":"/people/#dave-pagurek"},"Dave":{"relativeUrl":"/people/#dave"},"David Aerne":{"relativeUrl":"/people/#david-aerne"},"David Newbury":{"relativeUrl":"/people/#david-newbury"},"David Weiss":{"relativeUrl":"/people/#david-weiss"},"David White":{"relativeUrl":"/people/#david-white"},"David Wicks":{"relativeUrl":"/people/#david-wicks"},"David":{"relativeUrl":"/people/#david"},"Decoy4ever":{"relativeUrl":"/people/#decoy4ever"},"Derek Enlow":{"relativeUrl":"/people/#derek-enlow"},"Derek J. Kinsman":{"relativeUrl":"/people/#derek-j--kinsman"},"Derrick McMillen":{"relativeUrl":"/people/#derrick-mcmillen"},"Deveshi Dwivedi":{"relativeUrl":"/people/#deveshi-dwivedi"},"Devon Rifkin":{"relativeUrl":"/people/#devon-rifkin"},"Dewansh Thakur":{"relativeUrl":"/people/#dewansh-thakur"},"Dharshan":{"relativeUrl":"/people/#dharshan"},"Dhruv Sahnan":{"relativeUrl":"/people/#dhruv-sahnan"},"Diana Galindo":{"relativeUrl":"/people/#diana-galindo"},"digitalfrost":{"relativeUrl":"/people/#digitalfrost"},"Divyansh013":{"relativeUrl":"/people/#divyansh013"},"DIVYANSHU RAJ":{"relativeUrl":"/people/#divyanshu-raj"},"Diya Solanki":{"relativeUrl":"/people/#diya-solanki"},"DIYgirls":{"relativeUrl":"/people/#diygirls"},"Dominic Jodoin":{"relativeUrl":"/people/#dominic-jodoin"},"Dorothy R. Santos":{"relativeUrl":"/people/#dorothy-r--santos"},"Dr. Holomorfo":{"relativeUrl":"/people/#dr--holomorfo"},"dummyAccount22":{"relativeUrl":"/people/#dummyaccount22"},"Dusk":{"relativeUrl":"/people/#dusk"},"Dwiferdio Seagal Putra":{"relativeUrl":"/people/#dwiferdio-seagal-putra"},"e-Coucou":{"relativeUrl":"/people/#e-coucou"},"Ed Brannin":{"relativeUrl":"/people/#ed-brannin"},"Eden Cridge":{"relativeUrl":"/people/#eden-cridge"},"elgin mclaren":{"relativeUrl":"/people/#elgin-mclaren"},"Elliot-Hernandez":{"relativeUrl":"/people/#elliot-hernandez"},"EmilioOcelotl":{"relativeUrl":"/people/#emilioocelotl"},"Emily Chen":{"relativeUrl":"/people/#emily-chen"},"Emily Xie":{"relativeUrl":"/people/#emily-xie"},"Emma Krantz":{"relativeUrl":"/people/#emma-krantz"},"Epic Jefferson":{"relativeUrl":"/people/#epic-jefferson"},"epramer-godaddy":{"relativeUrl":"/people/#epramer-godaddy"},"Erica Pramer":{"relativeUrl":"/people/#erica-pramer"},"Erik Butcher":{"relativeUrl":"/people/#erik-butcher"},"Eshaan Aggarwal":{"relativeUrl":"/people/#eshaan-aggarwal"},"Evelyn Eastmond":{"relativeUrl":"/people/#evelyn-eastmond"},"evelyn masso":{"relativeUrl":"/people/#evelyn-masso"},"everything became blue":{"relativeUrl":"/people/#everything-became-blue"},"Evorage":{"relativeUrl":"/people/#evorage"},"Ewan Johnstone":{"relativeUrl":"/people/#ewan-johnstone"},"Fabian Morón Zirfas":{"relativeUrl":"/people/#fabian-moron-zirfas"},"Faith Wuyue Yu":{"relativeUrl":"/people/#faith-wuyue-yu"},"FAL":{"relativeUrl":"/people/#fal"},"Federico Grandi":{"relativeUrl":"/people/#federico-grandi"},"feedzh":{"relativeUrl":"/people/#feedzh"},"Fenil Gandhi":{"relativeUrl":"/people/#fenil-gandhi"},"ffd8":{"relativeUrl":"/people/#ffd8"},"Fisher Diede":{"relativeUrl":"/people/#fisher-diede"},"FORCHA PEARL":{"relativeUrl":"/people/#forcha-pearl"},"Francesco Bigiarini":{"relativeUrl":"/people/#francesco-bigiarini"},"Freddie Rawlins":{"relativeUrl":"/people/#freddie-rawlins"},"Frederik Ring":{"relativeUrl":"/people/#frederik-ring"},"Fun Planet":{"relativeUrl":"/people/#fun-planet"},"Gareth Battensby":{"relativeUrl":"/people/#gareth-battensby"},"Gareth Williams":{"relativeUrl":"/people/#gareth-williams"},"Garima":{"relativeUrl":"/people/#garima"},"gauini":{"relativeUrl":"/people/#gauini"},"Gaurav Tiwary":{"relativeUrl":"/people/#gaurav-tiwary"},"Gene Kogan":{"relativeUrl":"/people/#gene-kogan"},"Geraldo Neto":{"relativeUrl":"/people/#geraldo-neto"},"ggorlen":{"relativeUrl":"/people/#ggorlen"},"Ghales":{"relativeUrl":"/people/#ghales"},"Golan Levin":{"relativeUrl":"/people/#golan-levin"},"GoToLoop":{"relativeUrl":"/people/#gotoloop"},"Gracia-zhang":{"relativeUrl":"/people/#gracia-zhang"},"Greg Sadetsky":{"relativeUrl":"/people/#greg-sadetsky"},"Gregor Martynus":{"relativeUrl":"/people/#gregor-martynus"},"Guilherme Silveira":{"relativeUrl":"/people/#guilherme-silveira"},"Guillermo Montecinos":{"relativeUrl":"/people/#guillermo-montecinos"},"Gus Becker":{"relativeUrl":"/people/#gus-becker"},"Haider Ali Punjabi":{"relativeUrl":"/people/#haider-ali-punjabi"},"Half Scheidl":{"relativeUrl":"/people/#half-scheidl"},"harkirat singh":{"relativeUrl":"/people/#harkirat-singh"},"Harman Batheja":{"relativeUrl":"/people/#harman-batheja"},"Harrycheng233":{"relativeUrl":"/people/#harrycheng233"},"Harsh Agrawal":{"relativeUrl":"/people/#harsh-agrawal"},"Harsh Range":{"relativeUrl":"/people/#harsh-range"},"Harshil Goel":{"relativeUrl":"/people/#harshil-goel"},"Hilary Lau":{"relativeUrl":"/people/#hilary-lau"},"Himanshu Malviya":{"relativeUrl":"/people/#himanshu-malviya"},"Hirad Sab":{"relativeUrl":"/people/#hirad-sab"},"Hitesh Kumar":{"relativeUrl":"/people/#hitesh-kumar"},"hrishit":{"relativeUrl":"/people/#hrishit"},"hunahpu18":{"relativeUrl":"/people/#hunahpu18"},"hvillase":{"relativeUrl":"/people/#hvillase"},"iambiancafonseca":{"relativeUrl":"/people/#iambiancafonseca"},"IENGROUND":{"relativeUrl":"/people/#ienground"},"Ike Bischof":{"relativeUrl":"/people/#ike-bischof"},"Ikko Ashimine":{"relativeUrl":"/people/#ikko-ashimine"},"Ilona Brand":{"relativeUrl":"/people/#ilona-brand"},"INARI_DARKFOX":{"relativeUrl":"/people/#inari-darkfox"},"Inhwa":{"relativeUrl":"/people/#inhwa"},"Isaac Durazo ":{"relativeUrl":"/people/#isaac-durazo-"},"İsmail Namdar":{"relativeUrl":"/people/#ismail-namdar"},"Ivy Feraco":{"relativeUrl":"/people/#ivy-feraco"},"J Wong":{"relativeUrl":"/people/#j-wong"},"Jack B. Du":{"relativeUrl":"/people/#jack-b--du"},"Jack Dempsey":{"relativeUrl":"/people/#jack-dempsey"},"Jacques P. du Toit":{"relativeUrl":"/people/#jacques-p--du-toit"},"Jai Kotia":{"relativeUrl":"/people/#jai-kotia"},"Jai Vignesh J":{"relativeUrl":"/people/#jai-vignesh-j"},"Jakub Valtar":{"relativeUrl":"/people/#jakub-valtar"},"James Dunn":{"relativeUrl":"/people/#james-dunn"},"Janis Sepúlveda":{"relativeUrl":"/people/#janis-sepulveda"},"Jared Berghold":{"relativeUrl":"/people/#jared-berghold"},"Jared Donovan":{"relativeUrl":"/people/#jared-donovan"},"Jared Sprague":{"relativeUrl":"/people/#jared-sprague"},"Jason Alderman":{"relativeUrl":"/people/#jason-alderman"},"Jason Mandel":{"relativeUrl":"/people/#jason-mandel"},"Jason Sigal":{"relativeUrl":"/people/#jason-sigal"},"Jatin Panjwani":{"relativeUrl":"/people/#jatin-panjwani"},"Jay Gupta":{"relativeUrl":"/people/#jay-gupta"},"Jaymz Rhime":{"relativeUrl":"/people/#jaymz-rhime"},"Jean-Michaël Celerier":{"relativeUrl":"/people/#jean-michael-celerier"},"Jean Pierre Charalambos":{"relativeUrl":"/people/#jean-pierre-charalambos"},"jeanette":{"relativeUrl":"/people/#jeanette"},"Jen Kagan":{"relativeUrl":"/people/#jen-kagan"},"Jenna deBoisblanc":{"relativeUrl":"/people/#jenna-deboisblanc"},"Jenna":{"relativeUrl":"/people/#jenna"},"Jennifer Jacobs":{"relativeUrl":"/people/#jennifer-jacobs"},"Jens Axel Søgaard":{"relativeUrl":"/people/#jens-axel-søgaard"},"jeong":{"relativeUrl":"/people/#jeong"},"Jerel Johnson":{"relativeUrl":"/people/#jerel-johnson"},"Jeremy Tuloup":{"relativeUrl":"/people/#jeremy-tuloup"},"Jess Klein":{"relativeUrl":"/people/#jess-klein"},"jesse cahn-thompson":{"relativeUrl":"/people/#jesse-cahn-thompson"},"Jesús Enrique Rascón":{"relativeUrl":"/people/#jesus-enrique-rascon"},"JetStarBlues":{"relativeUrl":"/people/#jetstarblues"},"Jiashan Wu":{"relativeUrl":"/people/#jiashan-wu"},"Jimish Fotariya":{"relativeUrl":"/people/#jimish-fotariya"},"Jithin KS":{"relativeUrl":"/people/#jithin-ks"},"Jiwon Park (hanpanic)":{"relativeUrl":"/people/#jiwon-park-(hanpanic)"},"JoeCastor":{"relativeUrl":"/people/#joecastor"},"Johan Karlsson":{"relativeUrl":"/people/#johan-karlsson"},"John Pasquarello":{"relativeUrl":"/people/#john-pasquarello"},"Jon Kaufman":{"relativeUrl":"/people/#jon-kaufman"},"Jonas Rinke":{"relativeUrl":"/people/#jonas-rinke"},"Jonathan Dahan":{"relativeUrl":"/people/#jonathan-dahan"},"Jonathan-David Schröder":{"relativeUrl":"/people/#jonathan-david-schroder"},"Jonathan Heindl":{"relativeUrl":"/people/#jonathan-heindl"},"Joonas Jokinen":{"relativeUrl":"/people/#joonas-jokinen"},"Jordan Shaw":{"relativeUrl":"/people/#jordan-shaw"},"Jordan Sucher":{"relativeUrl":"/people/#jordan-sucher"},"Jorge Moreno":{"relativeUrl":"/people/#jorge-moreno"},"José Miguel Tajuelo Garrigós":{"relativeUrl":"/people/#jose-miguel-tajuelo-garrigos"},"Joseph Aronson":{"relativeUrl":"/people/#joseph-aronson"},"Joseph Hong":{"relativeUrl":"/people/#joseph-hong"},"Joshua Marris":{"relativeUrl":"/people/#joshua-marris"},"Joshua Noble":{"relativeUrl":"/people/#joshua-noble"},"Joshua Storm Becker":{"relativeUrl":"/people/#joshua-storm-becker"},"Jstodd":{"relativeUrl":"/people/#jstodd"},"JT Nimoy":{"relativeUrl":"/people/#jt-nimoy"},"Juan Irache":{"relativeUrl":"/people/#juan-irache"},"juliane nagao":{"relativeUrl":"/people/#juliane-nagao"},"Julio Lab":{"relativeUrl":"/people/#julio-lab"},"Juraj Onuska":{"relativeUrl":"/people/#juraj-onuska"},"Justin Kim":{"relativeUrl":"/people/#justin-kim"},"Jyotiraditya Pradhan":{"relativeUrl":"/people/#jyotiraditya-pradhan"},"K.Adam White":{"relativeUrl":"/people/#k-adam-white"},"kaabe1":{"relativeUrl":"/people/#kaabe1"},"Kai-han Chang":{"relativeUrl":"/people/#kai-han-chang"},"Karen":{"relativeUrl":"/people/#karen"},"karinaxlpz":{"relativeUrl":"/people/#karinaxlpz"},"Kate Grant":{"relativeUrl":"/people/#kate-grant"},"Kate Hollenbach":{"relativeUrl":"/people/#kate-hollenbach"},"Kathryn Isabelle Lawrence":{"relativeUrl":"/people/#kathryn-isabelle-lawrence"},"Katie":{"relativeUrl":"/people/#katie"},"Katsuya Endoh":{"relativeUrl":"/people/#katsuya-endoh"},"Keith Tan":{"relativeUrl":"/people/#keith-tan"},"Ken Miller":{"relativeUrl":"/people/#ken-miller"},"Kenneth Lim":{"relativeUrl":"/people/#kenneth-lim"},"Keshav Malik":{"relativeUrl":"/people/#keshav-malik"},"Kevin Barabash":{"relativeUrl":"/people/#kevin-barabash"},"Kevin Bradley":{"relativeUrl":"/people/#kevin-bradley"},"Kevin Grajeda":{"relativeUrl":"/people/#kevin-grajeda"},"Kevin Ho":{"relativeUrl":"/people/#kevin-ho"},"Kevin Siwoff":{"relativeUrl":"/people/#kevin-siwoff"},"Kevin Workman":{"relativeUrl":"/people/#kevin-workman"},"kjav":{"relativeUrl":"/people/#kjav"},"konstantinstanmeyer":{"relativeUrl":"/people/#konstantinstanmeyer"},"koolaidkrusade":{"relativeUrl":"/people/#koolaidkrusade"},"kroko / Reinis Adovičs":{"relativeUrl":"/people/#kroko---reinis-adovics"},"Kunal Kumar Verma":{"relativeUrl":"/people/#kunal-kumar-verma"},"Kyle James":{"relativeUrl":"/people/#kyle-james"},"Kyle McDonald":{"relativeUrl":"/people/#kyle-mcdonald"},"L05":{"relativeUrl":"/people/#l05"},"Laksh Singla":{"relativeUrl":"/people/#laksh-singla"},"Lakshay Joshi":{"relativeUrl":"/people/#lakshay-joshi"},"lam802":{"relativeUrl":"/people/#lam802"},"Laura Ciro":{"relativeUrl":"/people/#laura-ciro"},"Lauren Lee McCarthy":{"relativeUrl":"/people/#lauren-lee-mccarthy"},"Lauren":{"relativeUrl":"/people/#lauren"},"Lee T":{"relativeUrl":"/people/#lee-t"},"LEMIBANDDEXARI":{"relativeUrl":"/people/#lemibanddexari"},"Leo Kamwathi":{"relativeUrl":"/people/#leo-kamwathi"},"Leo Wang":{"relativeUrl":"/people/#leo-wang"},"Leslie Yip":{"relativeUrl":"/people/#leslie-yip"},"Liam Piesley":{"relativeUrl":"/people/#liam-piesley"},"Liang Tang":{"relativeUrl":"/people/#liang-tang"},"Linda Paiste":{"relativeUrl":"/people/#linda-paiste"},"Lingxiao Wang":{"relativeUrl":"/people/#lingxiao-wang"},"linnhallonqvist":{"relativeUrl":"/people/#linnhallonqvist"},"Lionel Ringenbach":{"relativeUrl":"/people/#lionel-ringenbach"},"Lisa Mabley":{"relativeUrl":"/people/#lisa-mabley"},"Liu Chang":{"relativeUrl":"/people/#liu-chang"},"Liz Peng":{"relativeUrl":"/people/#liz-peng"},"Long Phan":{"relativeUrl":"/people/#long-phan"},"lottihill":{"relativeUrl":"/people/#lottihill"},"Louis Demange":{"relativeUrl":"/people/#louis-demange"},"Luc de wit":{"relativeUrl":"/people/#luc-de-wit"},"Luca Damasco":{"relativeUrl":"/people/#luca-damasco"},"Luis Morales-Navarro":{"relativeUrl":"/people/#luis-morales-navarro"},"luisaph":{"relativeUrl":"/people/#luisaph"},"Luke Burgess-Yeo":{"relativeUrl":"/people/#luke-burgess-yeo"},"M":{"relativeUrl":"/people/#m"},"Maciej Stankiewicz":{"relativeUrl":"/people/#maciej-stankiewicz"},"maddy":{"relativeUrl":"/people/#maddy"},"maddyfisher":{"relativeUrl":"/people/#maddyfisher"},"mainstreamdev":{"relativeUrl":"/people/#mainstreamdev"},"Malay Vasa":{"relativeUrl":"/people/#malay-vasa"},"Manan Arora":{"relativeUrl":"/people/#manan-arora"},"Mann Shah":{"relativeUrl":"/people/#mann-shah"},"manpreet":{"relativeUrl":"/people/#manpreet"},"Marc Abbey":{"relativeUrl":"/people/#marc-abbey"},"Marcus Parsons":{"relativeUrl":"/people/#marcus-parsons"},"Mark Nikora":{"relativeUrl":"/people/#mark-nikora"},"Mark Russo":{"relativeUrl":"/people/#mark-russo"},"Martin Lorentzon":{"relativeUrl":"/people/#martin-lorentzon"},"Mateusz Swiatkowski":{"relativeUrl":"/people/#mateusz-swiatkowski"},"mathewpan2":{"relativeUrl":"/people/#mathewpan2"},"Mathura MG":{"relativeUrl":"/people/#mathura-mg"},"MATSUDA, Kouichi":{"relativeUrl":"/people/#matsuda,-kouichi"},"Matthew Kaney":{"relativeUrl":"/people/#matthew-kaney"},"Mattia Micheletta Merlin":{"relativeUrl":"/people/#mattia-micheletta-merlin"},"Mauricio Verano Merino":{"relativeUrl":"/people/#mauricio-verano-merino"},"Max Goldstein":{"relativeUrl":"/people/#max-goldstein"},"Max Kolyanov":{"relativeUrl":"/people/#max-kolyanov"},"Max Segal":{"relativeUrl":"/people/#max-segal"},"maxdevjs":{"relativeUrl":"/people/#maxdevjs"},"Maya Arguelles":{"relativeUrl":"/people/#maya-arguelles"},"Maya Man":{"relativeUrl":"/people/#maya-man"},"mcturner1995":{"relativeUrl":"/people/#mcturner1995"},"meezwhite":{"relativeUrl":"/people/#meezwhite"},"Melody Sharp":{"relativeUrl":"/people/#melody-sharp"},"mhsh312":{"relativeUrl":"/people/#mhsh312"},"Miaoye Que":{"relativeUrl":"/people/#miaoye-que"},"Michael Hadley":{"relativeUrl":"/people/#michael-hadley"},"Michael J Conrad":{"relativeUrl":"/people/#michael-j-conrad"},"Mikael Lindqvist":{"relativeUrl":"/people/#mikael-lindqvist"},"Mike ":{"relativeUrl":"/people/#mike-"},"Mike Anderson":{"relativeUrl":"/people/#mike-anderson"},"Miles Peyton":{"relativeUrl":"/people/#miles-peyton"},"min-kim42":{"relativeUrl":"/people/#min-kim42"},"MiniPear":{"relativeUrl":"/people/#minipear"},"Minjun Kim":{"relativeUrl":"/people/#minjun-kim"},"Minwook Park":{"relativeUrl":"/people/#minwook-park"},"Mislav Milicevic":{"relativeUrl":"/people/#mislav-milicevic"},"ml.008":{"relativeUrl":"/people/#ml-008"},"mohamedalisaifudeen":{"relativeUrl":"/people/#mohamedalisaifudeen"},"Mohammad Hussain Nagaria":{"relativeUrl":"/people/#mohammad-hussain-nagaria"},"Mohana Sundaram S":{"relativeUrl":"/people/#mohana-sundaram-s"},"Mohit Balwani":{"relativeUrl":"/people/#mohit-balwani"},"Moira Turner":{"relativeUrl":"/people/#moira-turner"},"Monalisa Maity":{"relativeUrl":"/people/#monalisa-maity"},"Monica Powell":{"relativeUrl":"/people/#monica-powell"},"Mostafa Ewis":{"relativeUrl":"/people/#mostafa-ewis"},"Mr. Algorithm":{"relativeUrl":"/people/#mr--algorithm"},"Muhammad Haroon":{"relativeUrl":"/people/#muhammad-haroon"},"Munus Shih":{"relativeUrl":"/people/#munus-shih"},"Musab Kılıç":{"relativeUrl":"/people/#musab-kılıc"},"mxchelle":{"relativeUrl":"/people/#mxchelle"},"Nabeel (Dexter)":{"relativeUrl":"/people/#nabeel-(dexter)"},"Nabil Hassein":{"relativeUrl":"/people/#nabil-hassein"},"Nahuel Palumbo":{"relativeUrl":"/people/#nahuel-palumbo"},"Nakul Shahdadpuri":{"relativeUrl":"/people/#nakul-shahdadpuri"},"nancy":{"relativeUrl":"/people/#nancy"},"Naoto Hieda":{"relativeUrl":"/people/#naoto-hieda"},"naoyashiga":{"relativeUrl":"/people/#naoyashiga"},"Nat Decker":{"relativeUrl":"/people/#nat-decker"},"Nicholas Marino":{"relativeUrl":"/people/#nicholas-marino"},"NicholasGillen":{"relativeUrl":"/people/#nicholasgillen"},"Nick Briz":{"relativeUrl":"/people/#nick-briz"},"Nick McIntyre":{"relativeUrl":"/people/#nick-mcintyre"},"Nick Müller":{"relativeUrl":"/people/#nick-muller"},"Nick Yahnke":{"relativeUrl":"/people/#nick-yahnke"},"Nico Finkernagel":{"relativeUrl":"/people/#nico-finkernagel"},"Niels Joubert":{"relativeUrl":"/people/#niels-joubert"},"NIINOMI":{"relativeUrl":"/people/#niinomi"},"Nik Nyby":{"relativeUrl":"/people/#nik-nyby"},"Nikhil":{"relativeUrl":"/people/#nikhil"},"nikhilkalburgi":{"relativeUrl":"/people/#nikhilkalburgi"},"Niki Ito":{"relativeUrl":"/people/#niki-ito"},"Niklas Peters":{"relativeUrl":"/people/#niklas-peters"},"Nisar Hassan Naqvi":{"relativeUrl":"/people/#nisar-hassan-naqvi"},"Nitin Rana":{"relativeUrl":"/people/#nitin-rana"},"Nitish Bansal":{"relativeUrl":"/people/#nitish-bansal"},"nully0x":{"relativeUrl":"/people/#nully0x"},"odm275":{"relativeUrl":"/people/#odm275"},"oleboleskole3":{"relativeUrl":"/people/#oleboleskole3"},"Oleksii Bulba":{"relativeUrl":"/people/#oleksii-bulba"},"Oliver Steele":{"relativeUrl":"/people/#oliver-steele"},"Oliver Wright":{"relativeUrl":"/people/#oliver-wright"},"Onexi":{"relativeUrl":"/people/#onexi"},"Ong Zhi Zheng":{"relativeUrl":"/people/#ong-zhi-zheng"},"Oren Shoham":{"relativeUrl":"/people/#oren-shoham"},"Orwiss":{"relativeUrl":"/people/#orwiss"},"ov":{"relativeUrl":"/people/#ov"},"oz":{"relativeUrl":"/people/#oz"},"paollabd":{"relativeUrl":"/people/#paollabd"},"Paolo Pedercini":{"relativeUrl":"/people/#paolo-pedercini"},"Paul Wheeler":{"relativeUrl":"/people/#paul-wheeler"},"Peiling Jiang":{"relativeUrl":"/people/#peiling-jiang"},"perminder-17":{"relativeUrl":"/people/#perminder-17"},"Peter Marsh":{"relativeUrl":"/people/#peter-marsh"},"peter":{"relativeUrl":"/people/#peter"},"Petr Brzek":{"relativeUrl":"/people/#petr-brzek"},"Philip Bell":{"relativeUrl":"/people/#philip-bell"},"Phoenix Perry":{"relativeUrl":"/people/#phoenix-perry"},"pie999":{"relativeUrl":"/people/#pie999"},"Pierre Krafft":{"relativeUrl":"/people/#pierre-krafft"},"pifragile":{"relativeUrl":"/people/#pifragile"},"piinthecloud":{"relativeUrl":"/people/#piinthecloud"},"Pim Tournaye":{"relativeUrl":"/people/#pim-tournaye"},"pinky-pig":{"relativeUrl":"/people/#pinky-pig"},"PiyushChandra17":{"relativeUrl":"/people/#piyushchandra17"},"plural":{"relativeUrl":"/people/#plural"},"Poulav Bhowmick":{"relativeUrl":"/people/#poulav-bhowmick"},"PracDuckling":{"relativeUrl":"/people/#pracduckling"},"Pragya":{"relativeUrl":"/people/#pragya"},"Prashant Gupta":{"relativeUrl":"/people/#prashant-gupta"},"Prateek Jain":{"relativeUrl":"/people/#prateek-jain"},"Prateekgit":{"relativeUrl":"/people/#prateekgit"},"Pratyay Banerjee":{"relativeUrl":"/people/#pratyay-banerjee"},"Priya-Pathak":{"relativeUrl":"/people/#priya-pathak"},"Qianqian Ye":{"relativeUrl":"/people/#qianqian-ye"},"Quinton Ashley":{"relativeUrl":"/people/#quinton-ashley"},"R. Luke DuBois":{"relativeUrl":"/people/#r--luke-dubois"},"Rachel Lim":{"relativeUrl":"/people/#rachel-lim"},"raclim":{"relativeUrl":"/people/#raclim"},"Rahul Mohata":{"relativeUrl":"/people/#rahul-mohata"},"rahulrangers":{"relativeUrl":"/people/#rahulrangers"},"Rajiv Ranjan Singh":{"relativeUrl":"/people/#rajiv-ranjan-singh"},"Ramin":{"relativeUrl":"/people/#ramin"},"Ramon Jr. Yniguez":{"relativeUrl":"/people/#ramon-jr--yniguez"},"RandomGamingDev":{"relativeUrl":"/people/#randomgamingdev"},"Raphaël de Courville":{"relativeUrl":"/people/#raphael-de-courville"},"reejuBhattacharya":{"relativeUrl":"/people/#reejubhattacharya"},"Reijo Vosu":{"relativeUrl":"/people/#reijo-vosu"},"reona396":{"relativeUrl":"/people/#reona396"},"rinkydevi":{"relativeUrl":"/people/#rinkydevi"},"Rishabh Taparia":{"relativeUrl":"/people/#rishabh-taparia"},"Rishi":{"relativeUrl":"/people/#rishi"},"Robyn Overstreet":{"relativeUrl":"/people/#robyn-overstreet"},"Rohan Julka":{"relativeUrl":"/people/#rohan-julka"},"Rune Skjoldborg Madsen":{"relativeUrl":"/people/#rune-skjoldborg-madsen"},"Ryan Slade":{"relativeUrl":"/people/#ryan-slade"},"Ryuya":{"relativeUrl":"/people/#ryuya"},"saber khan":{"relativeUrl":"/people/#saber-khan"},"Sachin Varghese":{"relativeUrl":"/people/#sachin-varghese"},"Sagar Arora":{"relativeUrl":"/people/#sagar-arora"},"Sai Bhushan":{"relativeUrl":"/people/#sai-bhushan"},"Saksham Saxena":{"relativeUrl":"/people/#saksham-saxena"},"sam delong":{"relativeUrl":"/people/#sam-delong"},"Sam Lavigne":{"relativeUrl":"/people/#sam-lavigne"},"sambensim":{"relativeUrl":"/people/#sambensim"},"Samir Ghosh":{"relativeUrl":"/people/#samir-ghosh"},"Sampo Rapeli":{"relativeUrl":"/people/#sampo-rapeli"},"Samrudh Shetty":{"relativeUrl":"/people/#samrudh-shetty"},"Samuel Alarco Cantos":{"relativeUrl":"/people/#samuel-alarco-cantos"},"Samuel Cho":{"relativeUrl":"/people/#samuel-cho"},"Sanchit Kapoor":{"relativeUrl":"/people/#sanchit-kapoor"},"Sandeep Kumar Bhagat":{"relativeUrl":"/people/#sandeep-kumar-bhagat"},"Sanjay Singh Rajpoot":{"relativeUrl":"/people/#sanjay-singh-rajpoot"},"Sanket Singh":{"relativeUrl":"/people/#sanket-singh"},"Sarah Ciston":{"relativeUrl":"/people/#sarah-ciston"},"Sarah Groff Hennigh-Palermo":{"relativeUrl":"/people/#sarah-groff-hennigh-palermo"},"Sarthak Saxena":{"relativeUrl":"/people/#sarthak-saxena"},"Saskia Freeke":{"relativeUrl":"/people/#saskia-freeke"},"Satyam Kulkarni":{"relativeUrl":"/people/#satyam-kulkarni"},"Sawai Singh Rajpurohit":{"relativeUrl":"/people/#sawai-singh-rajpurohit"},"Scott Garner":{"relativeUrl":"/people/#scott-garner"},"Scott Murray":{"relativeUrl":"/people/#scott-murray"},"Seb Méndez":{"relativeUrl":"/people/#seb-mendez"},"SejinOH":{"relativeUrl":"/people/#sejinoh"},"Sekani Warner":{"relativeUrl":"/people/#sekani-warner"},"senbaku":{"relativeUrl":"/people/#senbaku"},"Seonghyeon Kim":{"relativeUrl":"/people/#seonghyeon-kim"},"Sepand Ansari":{"relativeUrl":"/people/#sepand-ansari"},"Serena20003":{"relativeUrl":"/people/#serena20003"},"Seth":{"relativeUrl":"/people/#seth"},"Seung-Gi Kim(David)":{"relativeUrl":"/people/#seung-gi-kim(david)"},"shaharyarshamshi":{"relativeUrl":"/people/#shaharyarshamshi"},"Shahma Ansari":{"relativeUrl":"/people/#shahma-ansari"},"Shahriar Rahman Rubayet":{"relativeUrl":"/people/#shahriar-rahman-rubayet"},"Shawn Van Every":{"relativeUrl":"/people/#shawn-van-every"},"sheamus":{"relativeUrl":"/people/#sheamus"},"SHIBAHARA Hiroki":{"relativeUrl":"/people/#shibahara-hiroki"},"Shirou":{"relativeUrl":"/people/#shirou"},"Shivansh Sharma":{"relativeUrl":"/people/#shivansh-sharma"},"Shoury Singh":{"relativeUrl":"/people/#shoury-singh"},"Shubham Kumar":{"relativeUrl":"/people/#shubham-kumar"},"Shubham Rathore":{"relativeUrl":"/people/#shubham-rathore"},"shujulin":{"relativeUrl":"/people/#shujulin"},"siddhant":{"relativeUrl":"/people/#siddhant"},"Simranjeet Singh":{"relativeUrl":"/people/#simranjeet-singh"},"Sinan Ascioglu":{"relativeUrl":"/people/#sinan-ascioglu"},"Sithe Ncube":{"relativeUrl":"/people/#sithe-ncube"},"Sivaram D":{"relativeUrl":"/people/#sivaram-d"},"skyperx":{"relativeUrl":"/people/#skyperx"},"sm7515":{"relativeUrl":"/people/#sm7515"},"smilee":{"relativeUrl":"/people/#smilee"},"So Sun Park":{"relativeUrl":"/people/#so-sun-park"},"Sona Lee":{"relativeUrl":"/people/#sona-lee"},"sortasleepy":{"relativeUrl":"/people/#sortasleepy"},"Souvik Kumar":{"relativeUrl":"/people/#souvik-kumar"},"Sparsh Paliwal":{"relativeUrl":"/people/#sparsh-paliwal"},"sparshg":{"relativeUrl":"/people/#sparshg"},"Spencer Faith":{"relativeUrl":"/people/#spencer-faith"},"sphantom-code":{"relativeUrl":"/people/#sphantom-code"},"Spongman":{"relativeUrl":"/people/#spongman"},"Stalgia Grigg":{"relativeUrl":"/people/#stalgia-grigg"},"stampyzfanz":{"relativeUrl":"/people/#stampyzfanz"},"Stef Tervelde":{"relativeUrl":"/people/#stef-tervelde"},"Steven Green":{"relativeUrl":"/people/#steven-green"},"Stig Møller Hansen":{"relativeUrl":"/people/#stig-møller-hansen"},"stormCup":{"relativeUrl":"/people/#stormcup"},"Sudhanshu Tiwari":{"relativeUrl":"/people/#sudhanshu-tiwari"},"suhani6904":{"relativeUrl":"/people/#suhani6904"},"Suhas CV":{"relativeUrl":"/people/#suhas-cv"},"Summer Rizzo":{"relativeUrl":"/people/#summer-rizzo"},"Sun Lifei":{"relativeUrl":"/people/#sun-lifei"},"surajsurajsuraj":{"relativeUrl":"/people/#surajsurajsuraj"},"Surbhi Pittie":{"relativeUrl":"/people/#surbhi-pittie"},"susan evans":{"relativeUrl":"/people/#susan-evans"},"Swapnil-2001":{"relativeUrl":"/people/#swapnil-2001"},"sz245":{"relativeUrl":"/people/#sz245"},"tae":{"relativeUrl":"/people/#tae"},"Taeyoon Choi":{"relativeUrl":"/people/#taeyoon-choi"},"takawo":{"relativeUrl":"/people/#takawo"},"Takuma Kira":{"relativeUrl":"/people/#takuma-kira"},"Tanner Dolby":{"relativeUrl":"/people/#tanner-dolby"},"Tanvi Kumar":{"relativeUrl":"/people/#tanvi-kumar"},"tapioca24":{"relativeUrl":"/people/#tapioca24"},"taseenb":{"relativeUrl":"/people/#taseenb"},"Tega Brain":{"relativeUrl":"/people/#tega-brain"},"Teixido":{"relativeUrl":"/people/#teixido"},"TetroGem":{"relativeUrl":"/people/#tetrogem"},"tetunori":{"relativeUrl":"/people/#tetunori"},"Théodore Orfèvres":{"relativeUrl":"/people/#theodore-orfevres"},"Thomas Diewald":{"relativeUrl":"/people/#thomas-diewald"},"Thomas Herlea":{"relativeUrl":"/people/#thomas-herlea"},"Tiago Hermano":{"relativeUrl":"/people/#tiago-hermano"},"Tibor Udvari":{"relativeUrl":"/people/#tibor-udvari"},"Todd H. Page":{"relativeUrl":"/people/#todd-h--page"},"togekisse":{"relativeUrl":"/people/#togekisse"},"Tokini Irene Fubara":{"relativeUrl":"/people/#tokini-irene-fubara"},"tonipizza":{"relativeUrl":"/people/#tonipizza"},"truemaxdh":{"relativeUrl":"/people/#truemaxdh"},"trych":{"relativeUrl":"/people/#trych"},"tuan":{"relativeUrl":"/people/#tuan"},"Tushar Choudhari":{"relativeUrl":"/people/#tushar-choudhari"},"TwoTicks":{"relativeUrl":"/people/#twoticks"},"Tyler Jordan":{"relativeUrl":"/people/#tyler-jordan"},"Tyler Stefanich":{"relativeUrl":"/people/#tyler-stefanich"},"Umang Utkarsh":{"relativeUrl":"/people/#umang-utkarsh"},"Unicar":{"relativeUrl":"/people/#unicar"},"UnityOfFairfax":{"relativeUrl":"/people/#unityoffairfax"},"uno seis tres":{"relativeUrl":"/people/#uno-seis-tres"},"Urvashi":{"relativeUrl":"/people/#urvashi"},"Utkarsh Tiwari":{"relativeUrl":"/people/#utkarsh-tiwari"},"Val Head":{"relativeUrl":"/people/#val-head"},"Varsha Verma":{"relativeUrl":"/people/#varsha-verma"},"Vasu Goel":{"relativeUrl":"/people/#vasu-goel"},"Vedhant Agarwal":{"relativeUrl":"/people/#vedhant-agarwal"},"Victor Morgan":{"relativeUrl":"/people/#victor-morgan"},"Vijith Assar":{"relativeUrl":"/people/#vijith-assar"},"viola ":{"relativeUrl":"/people/#viola-"},"vipulrawat":{"relativeUrl":"/people/#vipulrawat"},"Vishal Sharma":{"relativeUrl":"/people/#vishal-sharma"},"Vishal Singh":{"relativeUrl":"/people/#vishal-singh"},"Vishesh Rawal":{"relativeUrl":"/people/#vishesh-rawal"},"Vishwas Srivastava":{"relativeUrl":"/people/#vishwas-srivastava"},"Vítor Galvão":{"relativeUrl":"/people/#vitor-galvao"},"Vivek Tiwari":{"relativeUrl":"/people/#vivek-tiwari"},"wackbyte":{"relativeUrl":"/people/#wackbyte"},"Wade Marshall":{"relativeUrl":"/people/#wade-marshall"},"wagedu":{"relativeUrl":"/people/#wagedu"},"Wes Lord":{"relativeUrl":"/people/#wes-lord"},"Will Martin":{"relativeUrl":"/people/#will-martin"},"willallstet":{"relativeUrl":"/people/#willallstet"},"William Hazard":{"relativeUrl":"/people/#william-hazard"},"Wu Che Yu":{"relativeUrl":"/people/#wu-che-yu"},"Xavier Góngora":{"relativeUrl":"/people/#xavier-gongora"},"Xavier Snelgrove":{"relativeUrl":"/people/#xavier-snelgrove"},"XingZiLong":{"relativeUrl":"/people/#xingzilong"},"XTY":{"relativeUrl":"/people/#xty"},"XY Feng":{"relativeUrl":"/people/#xy-feng"},"Yana Agun Siswanto":{"relativeUrl":"/people/#yana-agun-siswanto"},"Yannick Assogba":{"relativeUrl":"/people/#yannick-assogba"},"Yasai":{"relativeUrl":"/people/#yasai"},"Yash Pandey":{"relativeUrl":"/people/#yash-pandey"},"YewonCALLI":{"relativeUrl":"/people/#yewoncalli"},"Yifan Mai":{"relativeUrl":"/people/#yifan-mai"},"Yining Shi":{"relativeUrl":"/people/#yining-shi"},"Yograj Rajput":{"relativeUrl":"/people/#yograj-rajput"},"Yolonanido":{"relativeUrl":"/people/#yolonanido"},"Yousef Abu-Salah":{"relativeUrl":"/people/#yousef-abu-salah"},"yu":{"relativeUrl":"/people/#yu"},"Yuki":{"relativeUrl":"/people/#yuki"},"Yuting Lu":{"relativeUrl":"/people/#yuting-lu"},"Zac Tolle":{"relativeUrl":"/people/#zac-tolle"},"Zach Rispoli":{"relativeUrl":"/people/#zach-rispoli"},"zacharystenger":{"relativeUrl":"/people/#zacharystenger"},"Zearin":{"relativeUrl":"/people/#zearin"},"Zeke Sikelianos":{"relativeUrl":"/people/#zeke-sikelianos"},"zelf0":{"relativeUrl":"/people/#zelf0"},"Zeno Zeng":{"relativeUrl":"/people/#zeno-zeng"},"Zhao Xin":{"relativeUrl":"/people/#zhao-xin"},"Zoë Ingram":{"relativeUrl":"/people/#zoe-ingram"},"Zoe Stenger":{"relativeUrl":"/people/#zoe-stenger"},"æmon":{"relativeUrl":"/people/#æmon"},"李坤霖":{"relativeUrl":"/people/#李坤霖"}},"reference-fallback":{"abs()":{"relativeUrl":"/reference/p5/abs","alias":"abs"},"accelerationX":{"relativeUrl":"/reference/p5/accelerationX"},"accelerationY":{"relativeUrl":"/reference/p5/accelerationY"},"accelerationZ":{"relativeUrl":"/reference/p5/accelerationZ"},"acos()":{"relativeUrl":"/reference/p5/acos","alias":"acos"},"alpha()":{"relativeUrl":"/reference/p5/alpha","alias":"alpha"},"ambientLight()":{"relativeUrl":"/reference/p5/ambientLight","alias":"ambientLight"},"ambientMaterial()":{"relativeUrl":"/reference/p5/ambientMaterial","alias":"ambientMaterial"},"angleMode()":{"relativeUrl":"/reference/p5/angleMode","alias":"angleMode"},"append()":{"relativeUrl":"/reference/p5/append","alias":"append"},"applyMatrix()":{"relativeUrl":"/reference/p5/applyMatrix","alias":"applyMatrix"},"arc()":{"relativeUrl":"/reference/p5/arc","alias":"arc"},"arrayCopy()":{"relativeUrl":"/reference/p5/arrayCopy","alias":"arrayCopy"},"asin()":{"relativeUrl":"/reference/p5/asin","alias":"asin"},"atan()":{"relativeUrl":"/reference/p5/atan","alias":"atan"},"atan2()":{"relativeUrl":"/reference/p5/atan2","alias":"atan2"},"background()":{"relativeUrl":"/reference/p5/background","alias":"background"},"baseColorShader()":{"relativeUrl":"/reference/p5/baseColorShader","alias":"baseColorShader"},"baseMaterialShader()":{"relativeUrl":"/reference/p5/baseMaterialShader","alias":"baseMaterialShader"},"baseNormalShader()":{"relativeUrl":"/reference/p5/baseNormalShader","alias":"baseNormalShader"},"baseStrokeShader()":{"relativeUrl":"/reference/p5/baseStrokeShader","alias":"baseStrokeShader"},"beginClip()":{"relativeUrl":"/reference/p5/beginClip","alias":"beginClip"},"beginContour()":{"relativeUrl":"/reference/p5/beginContour","alias":"beginContour"},"beginGeometry()":{"relativeUrl":"/reference/p5/beginGeometry","alias":"beginGeometry"},"beginShape()":{"relativeUrl":"/reference/p5/beginShape","alias":"beginShape"},"bezier()":{"relativeUrl":"/reference/p5/bezier","alias":"bezier"},"bezierDetail()":{"relativeUrl":"/reference/p5/bezierDetail","alias":"bezierDetail"},"bezierPoint()":{"relativeUrl":"/reference/p5/bezierPoint","alias":"bezierPoint"},"bezierTangent()":{"relativeUrl":"/reference/p5/bezierTangent","alias":"bezierTangent"},"bezierVertex()":{"relativeUrl":"/reference/p5/bezierVertex","alias":"bezierVertex"},"blend()":{"relativeUrl":"/reference/p5/blend","alias":"blend"},"blendMode()":{"relativeUrl":"/reference/p5/blendMode","alias":"blendMode"},"blue()":{"relativeUrl":"/reference/p5/blue","alias":"blue"},"boolean()":{"relativeUrl":"/reference/p5/boolean","alias":"boolean"},"box()":{"relativeUrl":"/reference/p5/box","alias":"box"},"brightness()":{"relativeUrl":"/reference/p5/brightness","alias":"brightness"},"buildGeometry()":{"relativeUrl":"/reference/p5/buildGeometry","alias":"buildGeometry"},"byte()":{"relativeUrl":"/reference/p5/byte","alias":"byte"},"camera()":{"relativeUrl":"/reference/p5/camera","alias":"camera"},"ceil()":{"relativeUrl":"/reference/p5/ceil","alias":"ceil"},"changed()":{"relativeUrl":"/reference/p5/changed","alias":"changed"},"char()":{"relativeUrl":"/reference/p5/char","alias":"char"},"circle()":{"relativeUrl":"/reference/p5/circle","alias":"circle"},"class":{"relativeUrl":"/reference/p5/class"},"clear()":{"relativeUrl":"/reference/p5/clear","alias":"clear"},"clearDepth()":{"relativeUrl":"/reference/p5/clearDepth","alias":"clearDepth"},"clearStorage()":{"relativeUrl":"/reference/p5/clearStorage","alias":"clearStorage"},"clip()":{"relativeUrl":"/reference/p5/clip","alias":"clip"},"color()":{"relativeUrl":"/reference/p5/color","alias":"color"},"colorMode()":{"relativeUrl":"/reference/p5/colorMode","alias":"colorMode"},"concat()":{"relativeUrl":"/reference/p5/concat","alias":"concat"},"cone()":{"relativeUrl":"/reference/p5/cone","alias":"cone"},"console":{"relativeUrl":"/reference/p5/console"},"AUTO":{"relativeUrl":"/reference/p5/AUTO"},"DEGREES":{"relativeUrl":"/reference/p5/DEGREES"},"HALF_PI":{"relativeUrl":"/reference/p5/HALF_PI"},"HSB":{"relativeUrl":"/reference/p5/HSB"},"P2D":{"relativeUrl":"/reference/p5/P2D"},"PI":{"relativeUrl":"/reference/p5/PI"},"QUARTER_PI":{"relativeUrl":"/reference/p5/QUARTER_PI"},"RADIANS":{"relativeUrl":"/reference/p5/RADIANS"},"TAU":{"relativeUrl":"/reference/p5/TAU"},"TWO_PI":{"relativeUrl":"/reference/p5/TWO_PI"},"VERSION":{"relativeUrl":"/reference/p5/VERSION"},"WEBGL":{"relativeUrl":"/reference/p5/WEBGL"},"WEBGL2":{"relativeUrl":"/reference/p5/WEBGL2"},"constrain()":{"relativeUrl":"/reference/p5/constrain","alias":"constrain"},"copy()":{"relativeUrl":"/reference/p5/copy","alias":"copy"},"cos()":{"relativeUrl":"/reference/p5/cos","alias":"cos"},"createA()":{"relativeUrl":"/reference/p5/createA","alias":"createA"},"createAudio()":{"relativeUrl":"/reference/p5/createAudio","alias":"createAudio"},"createButton()":{"relativeUrl":"/reference/p5/createButton","alias":"createButton"},"createCamera()":{"relativeUrl":"/reference/p5/createCamera","alias":"createCamera"},"createCanvas()":{"relativeUrl":"/reference/p5/createCanvas","alias":"createCanvas"},"createCapture()":{"relativeUrl":"/reference/p5/createCapture","alias":"createCapture"},"createCheckbox()":{"relativeUrl":"/reference/p5/createCheckbox","alias":"createCheckbox"},"createColorPicker()":{"relativeUrl":"/reference/p5/createColorPicker","alias":"createColorPicker"},"createDiv()":{"relativeUrl":"/reference/p5/createDiv","alias":"createDiv"},"createElement()":{"relativeUrl":"/reference/p5/createElement","alias":"createElement"},"createFileInput()":{"relativeUrl":"/reference/p5/createFileInput","alias":"createFileInput"},"createFilterShader()":{"relativeUrl":"/reference/p5/createFilterShader","alias":"createFilterShader"},"createFramebuffer()":{"relativeUrl":"/reference/p5/createFramebuffer","alias":"createFramebuffer"},"createGraphics()":{"relativeUrl":"/reference/p5/createGraphics","alias":"createGraphics"},"createImage()":{"relativeUrl":"/reference/p5/createImage","alias":"createImage"},"createImg()":{"relativeUrl":"/reference/p5/createImg","alias":"createImg"},"createInput()":{"relativeUrl":"/reference/p5/createInput","alias":"createInput"},"createModel()":{"relativeUrl":"/reference/p5/createModel","alias":"createModel"},"createNumberDict()":{"relativeUrl":"/reference/p5/createNumberDict","alias":"createNumberDict"},"createP()":{"relativeUrl":"/reference/p5/createP","alias":"createP"},"createRadio()":{"relativeUrl":"/reference/p5/createRadio","alias":"createRadio"},"createSelect()":{"relativeUrl":"/reference/p5/createSelect","alias":"createSelect"},"createShader()":{"relativeUrl":"/reference/p5/createShader","alias":"createShader"},"createSlider()":{"relativeUrl":"/reference/p5/createSlider","alias":"createSlider"},"createSpan()":{"relativeUrl":"/reference/p5/createSpan","alias":"createSpan"},"createStringDict()":{"relativeUrl":"/reference/p5/createStringDict","alias":"createStringDict"},"createVector()":{"relativeUrl":"/reference/p5/createVector","alias":"createVector"},"createVideo()":{"relativeUrl":"/reference/p5/createVideo","alias":"createVideo"},"createWriter()":{"relativeUrl":"/reference/p5/createWriter","alias":"createWriter"},"cursor()":{"relativeUrl":"/reference/p5/cursor","alias":"cursor"},"curve()":{"relativeUrl":"/reference/p5/curve","alias":"curve"},"curveDetail()":{"relativeUrl":"/reference/p5/curveDetail","alias":"curveDetail"},"curvePoint()":{"relativeUrl":"/reference/p5/curvePoint","alias":"curvePoint"},"curveTangent()":{"relativeUrl":"/reference/p5/curveTangent","alias":"curveTangent"},"curveTightness()":{"relativeUrl":"/reference/p5/curveTightness","alias":"curveTightness"},"curveVertex()":{"relativeUrl":"/reference/p5/curveVertex","alias":"curveVertex"},"cylinder()":{"relativeUrl":"/reference/p5/cylinder","alias":"cylinder"},"day()":{"relativeUrl":"/reference/p5/day","alias":"day"},"debugMode()":{"relativeUrl":"/reference/p5/debugMode","alias":"debugMode"},"degrees()":{"relativeUrl":"/reference/p5/degrees","alias":"degrees"},"deltaTime":{"relativeUrl":"/reference/p5/deltaTime"},"describe()":{"relativeUrl":"/reference/p5/describe","alias":"describe"},"describeElement()":{"relativeUrl":"/reference/p5/describeElement","alias":"describeElement"},"deviceMoved()":{"relativeUrl":"/reference/p5/deviceMoved","alias":"deviceMoved"},"deviceOrientation":{"relativeUrl":"/reference/p5/deviceOrientation"},"deviceShaken()":{"relativeUrl":"/reference/p5/deviceShaken","alias":"deviceShaken"},"deviceTurned()":{"relativeUrl":"/reference/p5/deviceTurned","alias":"deviceTurned"},"directionalLight()":{"relativeUrl":"/reference/p5/directionalLight","alias":"directionalLight"},"disableFriendlyErrors":{"relativeUrl":"/reference/p5/disableFriendlyErrors"},"displayDensity()":{"relativeUrl":"/reference/p5/displayDensity","alias":"displayDensity"},"displayHeight":{"relativeUrl":"/reference/p5/displayHeight"},"displayWidth":{"relativeUrl":"/reference/p5/displayWidth"},"dist()":{"relativeUrl":"/reference/p5/dist","alias":"dist"},"doubleClicked()":{"relativeUrl":"/reference/p5/doubleClicked","alias":"doubleClicked"},"draw()":{"relativeUrl":"/reference/p5/draw","alias":"draw"},"drawingContext":{"relativeUrl":"/reference/p5/drawingContext"},"ellipse()":{"relativeUrl":"/reference/p5/ellipse","alias":"ellipse"},"ellipseMode()":{"relativeUrl":"/reference/p5/ellipseMode","alias":"ellipseMode"},"ellipsoid()":{"relativeUrl":"/reference/p5/ellipsoid","alias":"ellipsoid"},"emissiveMaterial()":{"relativeUrl":"/reference/p5/emissiveMaterial","alias":"emissiveMaterial"},"endClip()":{"relativeUrl":"/reference/p5/endClip","alias":"endClip"},"endContour()":{"relativeUrl":"/reference/p5/endContour","alias":"endContour"},"endGeometry()":{"relativeUrl":"/reference/p5/endGeometry","alias":"endGeometry"},"endShape()":{"relativeUrl":"/reference/p5/endShape","alias":"endShape"},"erase()":{"relativeUrl":"/reference/p5/erase","alias":"erase"},"exitPointerLock()":{"relativeUrl":"/reference/p5/exitPointerLock","alias":"exitPointerLock"},"exp()":{"relativeUrl":"/reference/p5/exp","alias":"exp"},"fill()":{"relativeUrl":"/reference/p5/fill","alias":"fill"},"filter()":{"relativeUrl":"/reference/p5/filter","alias":"filter"},"float()":{"relativeUrl":"/reference/p5/float","alias":"float"},"floor()":{"relativeUrl":"/reference/p5/floor","alias":"floor"},"focused":{"relativeUrl":"/reference/p5/focused"},"for":{"relativeUrl":"/reference/p5/for"},"fract()":{"relativeUrl":"/reference/p5/fract","alias":"fract"},"frameCount":{"relativeUrl":"/reference/p5/frameCount"},"frameRate()":{"relativeUrl":"/reference/p5/frameRate","alias":"frameRate"},"freeGeometry()":{"relativeUrl":"/reference/p5/freeGeometry","alias":"freeGeometry"},"frustum()":{"relativeUrl":"/reference/p5/frustum","alias":"frustum"},"fullscreen()":{"relativeUrl":"/reference/p5/fullscreen","alias":"fullscreen"},"function":{"relativeUrl":"/reference/p5/function"},"get()":{"relativeUrl":"/reference/p5/get","alias":"get"},"getItem()":{"relativeUrl":"/reference/p5/getItem","alias":"getItem"},"getTargetFrameRate()":{"relativeUrl":"/reference/p5/getTargetFrameRate","alias":"getTargetFrameRate"},"getURL()":{"relativeUrl":"/reference/p5/getURL","alias":"getURL"},"getURLParams()":{"relativeUrl":"/reference/p5/getURLParams","alias":"getURLParams"},"getURLPath()":{"relativeUrl":"/reference/p5/getURLPath","alias":"getURLPath"},"green()":{"relativeUrl":"/reference/p5/green","alias":"green"},"gridOutput()":{"relativeUrl":"/reference/p5/gridOutput","alias":"gridOutput"},"height":{"relativeUrl":"/reference/p5/height"},"hex()":{"relativeUrl":"/reference/p5/hex","alias":"hex"},"hour()":{"relativeUrl":"/reference/p5/hour","alias":"hour"},"httpDo()":{"relativeUrl":"/reference/p5/httpDo","alias":"httpDo"},"httpGet()":{"relativeUrl":"/reference/p5/httpGet","alias":"httpGet"},"httpPost()":{"relativeUrl":"/reference/p5/httpPost","alias":"httpPost"},"hue()":{"relativeUrl":"/reference/p5/hue","alias":"hue"},"if":{"relativeUrl":"/reference/p5/if"},"image()":{"relativeUrl":"/reference/p5/image","alias":"image"},"imageLight()":{"relativeUrl":"/reference/p5/imageLight","alias":"imageLight"},"imageMode()":{"relativeUrl":"/reference/p5/imageMode","alias":"imageMode"},"input()":{"relativeUrl":"/reference/p5/input","alias":"input"},"int()":{"relativeUrl":"/reference/p5/int","alias":"int"},"isLooping()":{"relativeUrl":"/reference/p5/isLooping","alias":"isLooping"},"join()":{"relativeUrl":"/reference/p5/join","alias":"join"},"key":{"relativeUrl":"/reference/p5/key"},"keyCode":{"relativeUrl":"/reference/p5/keyCode"},"keyIsDown()":{"relativeUrl":"/reference/p5/keyIsDown","alias":"keyIsDown"},"keyIsPressed":{"relativeUrl":"/reference/p5/keyIsPressed"},"keyPressed()":{"relativeUrl":"/reference/p5/keyPressed","alias":"keyPressed"},"keyReleased()":{"relativeUrl":"/reference/p5/keyReleased","alias":"keyReleased"},"keyTyped()":{"relativeUrl":"/reference/p5/keyTyped","alias":"keyTyped"},"lerp()":{"relativeUrl":"/reference/p5/lerp","alias":"lerp"},"lerpColor()":{"relativeUrl":"/reference/p5/lerpColor","alias":"lerpColor"},"let":{"relativeUrl":"/reference/p5/let"},"lightFalloff()":{"relativeUrl":"/reference/p5/lightFalloff","alias":"lightFalloff"},"lightness()":{"relativeUrl":"/reference/p5/lightness","alias":"lightness"},"lights()":{"relativeUrl":"/reference/p5/lights","alias":"lights"},"line()":{"relativeUrl":"/reference/p5/line","alias":"line"},"linePerspective()":{"relativeUrl":"/reference/p5/linePerspective","alias":"linePerspective"},"loadBytes()":{"relativeUrl":"/reference/p5/loadBytes","alias":"loadBytes"},"loadFont()":{"relativeUrl":"/reference/p5/loadFont","alias":"loadFont"},"loadImage()":{"relativeUrl":"/reference/p5/loadImage","alias":"loadImage"},"loadJSON()":{"relativeUrl":"/reference/p5/loadJSON","alias":"loadJSON"},"loadModel()":{"relativeUrl":"/reference/p5/loadModel","alias":"loadModel"},"loadPixels()":{"relativeUrl":"/reference/p5/loadPixels","alias":"loadPixels"},"loadShader()":{"relativeUrl":"/reference/p5/loadShader","alias":"loadShader"},"loadStrings()":{"relativeUrl":"/reference/p5/loadStrings","alias":"loadStrings"},"loadTable()":{"relativeUrl":"/reference/p5/loadTable","alias":"loadTable"},"loadXML()":{"relativeUrl":"/reference/p5/loadXML","alias":"loadXML"},"log()":{"relativeUrl":"/reference/p5/log","alias":"log"},"loop()":{"relativeUrl":"/reference/p5/loop","alias":"loop"},"mag()":{"relativeUrl":"/reference/p5/mag","alias":"mag"},"map()":{"relativeUrl":"/reference/p5/map","alias":"map"},"match()":{"relativeUrl":"/reference/p5/match","alias":"match"},"matchAll()":{"relativeUrl":"/reference/p5/matchAll","alias":"matchAll"},"max()":{"relativeUrl":"/reference/p5/max","alias":"max"},"metalness()":{"relativeUrl":"/reference/p5/metalness","alias":"metalness"},"millis()":{"relativeUrl":"/reference/p5/millis","alias":"millis"},"min()":{"relativeUrl":"/reference/p5/min","alias":"min"},"minute()":{"relativeUrl":"/reference/p5/minute","alias":"minute"},"model()":{"relativeUrl":"/reference/p5/model","alias":"model"},"month()":{"relativeUrl":"/reference/p5/month","alias":"month"},"mouseButton":{"relativeUrl":"/reference/p5/mouseButton"},"mouseClicked()":{"relativeUrl":"/reference/p5/mouseClicked","alias":"mouseClicked"},"mouseDragged()":{"relativeUrl":"/reference/p5/mouseDragged","alias":"mouseDragged"},"mouseIsPressed":{"relativeUrl":"/reference/p5/mouseIsPressed"},"mouseMoved()":{"relativeUrl":"/reference/p5/mouseMoved","alias":"mouseMoved"},"mousePressed()":{"relativeUrl":"/reference/p5/mousePressed","alias":"mousePressed"},"mouseReleased()":{"relativeUrl":"/reference/p5/mouseReleased","alias":"mouseReleased"},"mouseWheel()":{"relativeUrl":"/reference/p5/mouseWheel","alias":"mouseWheel"},"mouseX":{"relativeUrl":"/reference/p5/mouseX"},"mouseY":{"relativeUrl":"/reference/p5/mouseY"},"movedX":{"relativeUrl":"/reference/p5/movedX"},"movedY":{"relativeUrl":"/reference/p5/movedY"},"nf()":{"relativeUrl":"/reference/p5/nf","alias":"nf"},"nfc()":{"relativeUrl":"/reference/p5/nfc","alias":"nfc"},"nfp()":{"relativeUrl":"/reference/p5/nfp","alias":"nfp"},"nfs()":{"relativeUrl":"/reference/p5/nfs","alias":"nfs"},"noCanvas()":{"relativeUrl":"/reference/p5/noCanvas","alias":"noCanvas"},"noCursor()":{"relativeUrl":"/reference/p5/noCursor","alias":"noCursor"},"noDebugMode()":{"relativeUrl":"/reference/p5/noDebugMode","alias":"noDebugMode"},"noErase()":{"relativeUrl":"/reference/p5/noErase","alias":"noErase"},"noFill()":{"relativeUrl":"/reference/p5/noFill","alias":"noFill"},"noLights()":{"relativeUrl":"/reference/p5/noLights","alias":"noLights"},"noLoop()":{"relativeUrl":"/reference/p5/noLoop","alias":"noLoop"},"noSmooth()":{"relativeUrl":"/reference/p5/noSmooth","alias":"noSmooth"},"noStroke()":{"relativeUrl":"/reference/p5/noStroke","alias":"noStroke"},"noTint()":{"relativeUrl":"/reference/p5/noTint","alias":"noTint"},"noise()":{"relativeUrl":"/reference/p5/noise","alias":"noise"},"noiseDetail()":{"relativeUrl":"/reference/p5/noiseDetail","alias":"noiseDetail"},"noiseSeed()":{"relativeUrl":"/reference/p5/noiseSeed","alias":"noiseSeed"},"norm()":{"relativeUrl":"/reference/p5/norm","alias":"norm"},"normal()":{"relativeUrl":"/reference/p5/normal","alias":"normal"},"normalMaterial()":{"relativeUrl":"/reference/p5/normalMaterial","alias":"normalMaterial"},"orbitControl()":{"relativeUrl":"/reference/p5/orbitControl","alias":"orbitControl"},"ortho()":{"relativeUrl":"/reference/p5/ortho","alias":"ortho"},"p5.Camera":{"relativeUrl":"/reference/p5/p5.Camera"},"p5.Color":{"relativeUrl":"/reference/p5/p5.Color"},"p5.Element":{"relativeUrl":"/reference/p5/p5.Element"},"p5.File":{"relativeUrl":"/reference/p5/p5.File"},"p5.Font":{"relativeUrl":"/reference/p5/p5.Font"},"p5.Framebuffer":{"relativeUrl":"/reference/p5/p5.Framebuffer"},"p5.Geometry":{"relativeUrl":"/reference/p5/p5.Geometry"},"p5.Graphics":{"relativeUrl":"/reference/p5/p5.Graphics"},"p5.Image":{"relativeUrl":"/reference/p5/p5.Image"},"p5.MediaElement":{"relativeUrl":"/reference/p5/p5.MediaElement"},"p5.NumberDict":{"relativeUrl":"/reference/p5/p5.NumberDict"},"p5.PrintWriter":{"relativeUrl":"/reference/p5/p5.PrintWriter"},"p5.Renderer":{"relativeUrl":"/reference/p5/p5.Renderer"},"p5.Shader":{"relativeUrl":"/reference/p5/p5.Shader"},"p5.StringDict":{"relativeUrl":"/reference/p5/p5.StringDict"},"p5.Table":{"relativeUrl":"/reference/p5/p5.Table"},"p5.TableRow":{"relativeUrl":"/reference/p5/p5.TableRow"},"p5.TypedDict":{"relativeUrl":"/reference/p5/p5.TypedDict"},"p5.Vector":{"relativeUrl":"/reference/p5/p5.Vector"},"p5.XML":{"relativeUrl":"/reference/p5/p5.XML"},"p5":{"relativeUrl":"/reference/p5/p5"},"pAccelerationX":{"relativeUrl":"/reference/p5/pAccelerationX"},"pAccelerationY":{"relativeUrl":"/reference/p5/pAccelerationY"},"pAccelerationZ":{"relativeUrl":"/reference/p5/pAccelerationZ"},"pRotationX":{"relativeUrl":"/reference/p5/pRotationX"},"pRotationY":{"relativeUrl":"/reference/p5/pRotationY"},"pRotationZ":{"relativeUrl":"/reference/p5/pRotationZ"},"paletteLerp()":{"relativeUrl":"/reference/p5/paletteLerp","alias":"paletteLerp"},"panorama()":{"relativeUrl":"/reference/p5/panorama","alias":"panorama"},"perspective()":{"relativeUrl":"/reference/p5/perspective","alias":"perspective"},"pixelDensity()":{"relativeUrl":"/reference/p5/pixelDensity","alias":"pixelDensity"},"pixels":{"relativeUrl":"/reference/p5/pixels"},"plane()":{"relativeUrl":"/reference/p5/plane","alias":"plane"},"pmouseX":{"relativeUrl":"/reference/p5/pmouseX"},"pmouseY":{"relativeUrl":"/reference/p5/pmouseY"},"point()":{"relativeUrl":"/reference/p5/point","alias":"point"},"pointLight()":{"relativeUrl":"/reference/p5/pointLight","alias":"pointLight"},"pop()":{"relativeUrl":"/reference/p5/pop","alias":"pop"},"pow()":{"relativeUrl":"/reference/p5/pow","alias":"pow"},"preload()":{"relativeUrl":"/reference/p5/preload","alias":"preload"},"print()":{"relativeUrl":"/reference/p5/print","alias":"print"},"push()":{"relativeUrl":"/reference/p5/push","alias":"push"},"pwinMouseX":{"relativeUrl":"/reference/p5/pwinMouseX"},"pwinMouseY":{"relativeUrl":"/reference/p5/pwinMouseY"},"quad()":{"relativeUrl":"/reference/p5/quad","alias":"quad"},"quadraticVertex()":{"relativeUrl":"/reference/p5/quadraticVertex","alias":"quadraticVertex"},"radians()":{"relativeUrl":"/reference/p5/radians","alias":"radians"},"random()":{"relativeUrl":"/reference/p5/random","alias":"random"},"randomGaussian()":{"relativeUrl":"/reference/p5/randomGaussian","alias":"randomGaussian"},"randomSeed()":{"relativeUrl":"/reference/p5/randomSeed","alias":"randomSeed"},"rect()":{"relativeUrl":"/reference/p5/rect","alias":"rect"},"rectMode()":{"relativeUrl":"/reference/p5/rectMode","alias":"rectMode"},"red()":{"relativeUrl":"/reference/p5/red","alias":"red"},"redraw()":{"relativeUrl":"/reference/p5/redraw","alias":"redraw"},"remove()":{"relativeUrl":"/reference/p5/remove","alias":"remove"},"removeElements()":{"relativeUrl":"/reference/p5/removeElements","alias":"removeElements"},"removeItem()":{"relativeUrl":"/reference/p5/removeItem","alias":"removeItem"},"requestPointerLock()":{"relativeUrl":"/reference/p5/requestPointerLock","alias":"requestPointerLock"},"resetMatrix()":{"relativeUrl":"/reference/p5/resetMatrix","alias":"resetMatrix"},"resetShader()":{"relativeUrl":"/reference/p5/resetShader","alias":"resetShader"},"resizeCanvas()":{"relativeUrl":"/reference/p5/resizeCanvas","alias":"resizeCanvas"},"reverse()":{"relativeUrl":"/reference/p5/reverse","alias":"reverse"},"rotate()":{"relativeUrl":"/reference/p5/rotate","alias":"rotate"},"rotateX()":{"relativeUrl":"/reference/p5/rotateX","alias":"rotateX"},"rotateY()":{"relativeUrl":"/reference/p5/rotateY","alias":"rotateY"},"rotateZ()":{"relativeUrl":"/reference/p5/rotateZ","alias":"rotateZ"},"rotationX":{"relativeUrl":"/reference/p5/rotationX"},"rotationY":{"relativeUrl":"/reference/p5/rotationY"},"rotationZ":{"relativeUrl":"/reference/p5/rotationZ"},"round()":{"relativeUrl":"/reference/p5/round","alias":"round"},"saturation()":{"relativeUrl":"/reference/p5/saturation","alias":"saturation"},"save()":{"relativeUrl":"/reference/p5/save","alias":"save"},"saveCanvas()":{"relativeUrl":"/reference/p5/saveCanvas","alias":"saveCanvas"},"saveFrames()":{"relativeUrl":"/reference/p5/saveFrames","alias":"saveFrames"},"saveGif()":{"relativeUrl":"/reference/p5/saveGif","alias":"saveGif"},"saveJSON()":{"relativeUrl":"/reference/p5/saveJSON","alias":"saveJSON"},"saveStrings()":{"relativeUrl":"/reference/p5/saveStrings","alias":"saveStrings"},"saveTable()":{"relativeUrl":"/reference/p5/saveTable","alias":"saveTable"},"scale()":{"relativeUrl":"/reference/p5/scale","alias":"scale"},"second()":{"relativeUrl":"/reference/p5/second","alias":"second"},"select()":{"relativeUrl":"/reference/p5/select","alias":"select"},"selectAll()":{"relativeUrl":"/reference/p5/selectAll","alias":"selectAll"},"set()":{"relativeUrl":"/reference/p5/set","alias":"set"},"setAttributes()":{"relativeUrl":"/reference/p5/setAttributes","alias":"setAttributes"},"setCamera()":{"relativeUrl":"/reference/p5/setCamera","alias":"setCamera"},"setMoveThreshold()":{"relativeUrl":"/reference/p5/setMoveThreshold","alias":"setMoveThreshold"},"setShakeThreshold()":{"relativeUrl":"/reference/p5/setShakeThreshold","alias":"setShakeThreshold"},"setup()":{"relativeUrl":"/reference/p5/setup","alias":"setup"},"shader()":{"relativeUrl":"/reference/p5/shader","alias":"shader"},"shearX()":{"relativeUrl":"/reference/p5/shearX","alias":"shearX"},"shearY()":{"relativeUrl":"/reference/p5/shearY","alias":"shearY"},"shininess()":{"relativeUrl":"/reference/p5/shininess","alias":"shininess"},"shorten()":{"relativeUrl":"/reference/p5/shorten","alias":"shorten"},"shuffle()":{"relativeUrl":"/reference/p5/shuffle","alias":"shuffle"},"sin()":{"relativeUrl":"/reference/p5/sin","alias":"sin"},"smooth()":{"relativeUrl":"/reference/p5/smooth","alias":"smooth"},"sort()":{"relativeUrl":"/reference/p5/sort","alias":"sort"},"specularColor()":{"relativeUrl":"/reference/p5/specularColor","alias":"specularColor"},"specularMaterial()":{"relativeUrl":"/reference/p5/specularMaterial","alias":"specularMaterial"},"sphere()":{"relativeUrl":"/reference/p5/sphere","alias":"sphere"},"splice()":{"relativeUrl":"/reference/p5/splice","alias":"splice"},"split()":{"relativeUrl":"/reference/p5/split","alias":"split"},"splitTokens()":{"relativeUrl":"/reference/p5/splitTokens","alias":"splitTokens"},"spotLight()":{"relativeUrl":"/reference/p5/spotLight","alias":"spotLight"},"sq()":{"relativeUrl":"/reference/p5/sq","alias":"sq"},"sqrt()":{"relativeUrl":"/reference/p5/sqrt","alias":"sqrt"},"square()":{"relativeUrl":"/reference/p5/square","alias":"square"},"storeItem()":{"relativeUrl":"/reference/p5/storeItem","alias":"storeItem"},"str()":{"relativeUrl":"/reference/p5/str","alias":"str"},"stroke()":{"relativeUrl":"/reference/p5/stroke","alias":"stroke"},"strokeCap()":{"relativeUrl":"/reference/p5/strokeCap","alias":"strokeCap"},"strokeJoin()":{"relativeUrl":"/reference/p5/strokeJoin","alias":"strokeJoin"},"strokeWeight()":{"relativeUrl":"/reference/p5/strokeWeight","alias":"strokeWeight"},"subset()":{"relativeUrl":"/reference/p5/subset","alias":"subset"},"tan()":{"relativeUrl":"/reference/p5/tan","alias":"tan"},"text()":{"relativeUrl":"/reference/p5/text","alias":"text"},"textAlign()":{"relativeUrl":"/reference/p5/textAlign","alias":"textAlign"},"textAscent()":{"relativeUrl":"/reference/p5/textAscent","alias":"textAscent"},"textDescent()":{"relativeUrl":"/reference/p5/textDescent","alias":"textDescent"},"textFont()":{"relativeUrl":"/reference/p5/textFont","alias":"textFont"},"textLeading()":{"relativeUrl":"/reference/p5/textLeading","alias":"textLeading"},"textOutput()":{"relativeUrl":"/reference/p5/textOutput","alias":"textOutput"},"textSize()":{"relativeUrl":"/reference/p5/textSize","alias":"textSize"},"textStyle()":{"relativeUrl":"/reference/p5/textStyle","alias":"textStyle"},"textWidth()":{"relativeUrl":"/reference/p5/textWidth","alias":"textWidth"},"textWrap()":{"relativeUrl":"/reference/p5/textWrap","alias":"textWrap"},"texture()":{"relativeUrl":"/reference/p5/texture","alias":"texture"},"textureMode()":{"relativeUrl":"/reference/p5/textureMode","alias":"textureMode"},"textureWrap()":{"relativeUrl":"/reference/p5/textureWrap","alias":"textureWrap"},"tint()":{"relativeUrl":"/reference/p5/tint","alias":"tint"},"torus()":{"relativeUrl":"/reference/p5/torus","alias":"torus"},"touchEnded()":{"relativeUrl":"/reference/p5/touchEnded","alias":"touchEnded"},"touchMoved()":{"relativeUrl":"/reference/p5/touchMoved","alias":"touchMoved"},"touchStarted()":{"relativeUrl":"/reference/p5/touchStarted","alias":"touchStarted"},"touches":{"relativeUrl":"/reference/p5/touches"},"translate()":{"relativeUrl":"/reference/p5/translate","alias":"translate"},"triangle()":{"relativeUrl":"/reference/p5/triangle","alias":"triangle"},"trim()":{"relativeUrl":"/reference/p5/trim","alias":"trim"},"turnAxis":{"relativeUrl":"/reference/p5/turnAxis"},"Array":{"relativeUrl":"/reference/p5/Array"},"Boolean":{"relativeUrl":"/reference/p5/Boolean"},"Number":{"relativeUrl":"/reference/p5/Number"},"Object":{"relativeUrl":"/reference/p5/Object"},"String":{"relativeUrl":"/reference/p5/String"},"unchar()":{"relativeUrl":"/reference/p5/unchar","alias":"unchar"},"unhex()":{"relativeUrl":"/reference/p5/unhex","alias":"unhex"},"updatePixels()":{"relativeUrl":"/reference/p5/updatePixels","alias":"updatePixels"},"vertex()":{"relativeUrl":"/reference/p5/vertex","alias":"vertex"},"webglVersion":{"relativeUrl":"/reference/p5/webglVersion"},"while":{"relativeUrl":"/reference/p5/while"},"width":{"relativeUrl":"/reference/p5/width"},"winMouseX":{"relativeUrl":"/reference/p5/winMouseX"},"winMouseY":{"relativeUrl":"/reference/p5/winMouseY"},"windowHeight":{"relativeUrl":"/reference/p5/windowHeight"},"windowResized()":{"relativeUrl":"/reference/p5/windowResized","alias":"windowResized"},"windowWidth":{"relativeUrl":"/reference/p5/windowWidth"},"year()":{"relativeUrl":"/reference/p5/year","alias":"year"},"p5.Amplitude.getLevel()":{"relativeUrl":"/reference/p5.Amplitude/getLevel","alias":"getLevel"},"p5.Amplitude.setInput()":{"relativeUrl":"/reference/p5.Amplitude/setInput","alias":"setInput"},"p5.Amplitude.smooth()":{"relativeUrl":"/reference/p5.Amplitude/smooth","alias":"smooth"},"p5.AudioIn.amp()":{"relativeUrl":"/reference/p5.AudioIn/amp","alias":"amp"},"p5.AudioIn.start()":{"relativeUrl":"/reference/p5.AudioIn/start","alias":"start"},"p5.AudioIn.stop()":{"relativeUrl":"/reference/p5.AudioIn/stop","alias":"stop"},"p5.Biquad.freq()":{"relativeUrl":"/reference/p5.Biquad/freq","alias":"freq"},"p5.Biquad.gain()":{"relativeUrl":"/reference/p5.Biquad/gain","alias":"gain"},"p5.Biquad.res()":{"relativeUrl":"/reference/p5.Biquad/res","alias":"res"},"p5.Biquad.setType()":{"relativeUrl":"/reference/p5.Biquad/setType","alias":"setType"},"p5.Camera.camera()":{"relativeUrl":"/reference/p5.Camera/camera","alias":"camera"},"p5.Camera.centerX":{"relativeUrl":"/reference/p5.Camera/centerX","alias":"centerX"},"p5.Camera.centerY":{"relativeUrl":"/reference/p5.Camera/centerY","alias":"centerY"},"p5.Camera.centerZ":{"relativeUrl":"/reference/p5.Camera/centerZ","alias":"centerZ"},"p5.Camera.eyeX":{"relativeUrl":"/reference/p5.Camera/eyeX","alias":"eyeX"},"p5.Camera.eyeY":{"relativeUrl":"/reference/p5.Camera/eyeY","alias":"eyeY"},"p5.Camera.eyeZ":{"relativeUrl":"/reference/p5.Camera/eyeZ","alias":"eyeZ"},"p5.Camera.frustum()":{"relativeUrl":"/reference/p5.Camera/frustum","alias":"frustum"},"p5.Camera.lookAt()":{"relativeUrl":"/reference/p5.Camera/lookAt","alias":"lookAt"},"p5.Camera.move()":{"relativeUrl":"/reference/p5.Camera/move","alias":"move"},"p5.Camera.ortho()":{"relativeUrl":"/reference/p5.Camera/ortho","alias":"ortho"},"p5.Camera.pan()":{"relativeUrl":"/reference/p5.Camera/pan","alias":"pan"},"p5.Camera.perspective()":{"relativeUrl":"/reference/p5.Camera/perspective","alias":"perspective"},"p5.Camera.roll()":{"relativeUrl":"/reference/p5.Camera/roll","alias":"roll"},"p5.Camera.set()":{"relativeUrl":"/reference/p5.Camera/set","alias":"set"},"p5.Camera.setPosition()":{"relativeUrl":"/reference/p5.Camera/setPosition","alias":"setPosition"},"p5.Camera.slerp()":{"relativeUrl":"/reference/p5.Camera/slerp","alias":"slerp"},"p5.Camera.tilt()":{"relativeUrl":"/reference/p5.Camera/tilt","alias":"tilt"},"p5.Camera.upX":{"relativeUrl":"/reference/p5.Camera/upX","alias":"upX"},"p5.Camera.upY":{"relativeUrl":"/reference/p5.Camera/upY","alias":"upY"},"p5.Camera.upZ":{"relativeUrl":"/reference/p5.Camera/upZ","alias":"upZ"},"p5.Color.setAlpha()":{"relativeUrl":"/reference/p5.Color/setAlpha","alias":"setAlpha"},"p5.Color.setBlue()":{"relativeUrl":"/reference/p5.Color/setBlue","alias":"setBlue"},"p5.Color.setGreen()":{"relativeUrl":"/reference/p5.Color/setGreen","alias":"setGreen"},"p5.Color.setRed()":{"relativeUrl":"/reference/p5.Color/setRed","alias":"setRed"},"p5.Color.toString()":{"relativeUrl":"/reference/p5.Color/toString","alias":"toString"},"p5.Delay.amp()":{"relativeUrl":"/reference/p5.Delay/amp","alias":"amp"},"p5.Delay.delayTime()":{"relativeUrl":"/reference/p5.Delay/delayTime","alias":"delayTime"},"p5.Delay.feedback()":{"relativeUrl":"/reference/p5.Delay/feedback","alias":"feedback"},"p5.Delay.process()":{"relativeUrl":"/reference/p5.Delay/process","alias":"process"},"p5.Element.addClass()":{"relativeUrl":"/reference/p5.Element/addClass","alias":"addClass"},"p5.Element.attribute()":{"relativeUrl":"/reference/p5.Element/attribute","alias":"attribute"},"p5.Element.center()":{"relativeUrl":"/reference/p5.Element/center","alias":"center"},"p5.Element.child()":{"relativeUrl":"/reference/p5.Element/child","alias":"child"},"p5.Element.class()":{"relativeUrl":"/reference/p5.Element/class","alias":"class"},"p5.Element.doubleClicked()":{"relativeUrl":"/reference/p5.Element/doubleClicked","alias":"doubleClicked"},"p5.Element.dragLeave()":{"relativeUrl":"/reference/p5.Element/dragLeave","alias":"dragLeave"},"p5.Element.dragOver()":{"relativeUrl":"/reference/p5.Element/dragOver","alias":"dragOver"},"p5.Element.draggable()":{"relativeUrl":"/reference/p5.Element/draggable","alias":"draggable"},"p5.Element.drop()":{"relativeUrl":"/reference/p5.Element/drop","alias":"drop"},"p5.Element.elt":{"relativeUrl":"/reference/p5.Element/elt","alias":"elt"},"p5.Element.hasClass()":{"relativeUrl":"/reference/p5.Element/hasClass","alias":"hasClass"},"p5.Element.height":{"relativeUrl":"/reference/p5.Element/height","alias":"height"},"p5.Element.hide()":{"relativeUrl":"/reference/p5.Element/hide","alias":"hide"},"p5.Element.html()":{"relativeUrl":"/reference/p5.Element/html","alias":"html"},"p5.Element.id()":{"relativeUrl":"/reference/p5.Element/id","alias":"id"},"p5.Element.mouseClicked()":{"relativeUrl":"/reference/p5.Element/mouseClicked","alias":"mouseClicked"},"p5.Element.mouseMoved()":{"relativeUrl":"/reference/p5.Element/mouseMoved","alias":"mouseMoved"},"p5.Element.mouseOut()":{"relativeUrl":"/reference/p5.Element/mouseOut","alias":"mouseOut"},"p5.Element.mouseOver()":{"relativeUrl":"/reference/p5.Element/mouseOver","alias":"mouseOver"},"p5.Element.mousePressed()":{"relativeUrl":"/reference/p5.Element/mousePressed","alias":"mousePressed"},"p5.Element.mouseReleased()":{"relativeUrl":"/reference/p5.Element/mouseReleased","alias":"mouseReleased"},"p5.Element.mouseWheel()":{"relativeUrl":"/reference/p5.Element/mouseWheel","alias":"mouseWheel"},"p5.Element.parent()":{"relativeUrl":"/reference/p5.Element/parent","alias":"parent"},"p5.Element.position()":{"relativeUrl":"/reference/p5.Element/position","alias":"position"},"p5.Element.remove()":{"relativeUrl":"/reference/p5.Element/remove","alias":"remove"},"p5.Element.removeAttribute()":{"relativeUrl":"/reference/p5.Element/removeAttribute","alias":"removeAttribute"},"p5.Element.removeClass()":{"relativeUrl":"/reference/p5.Element/removeClass","alias":"removeClass"},"p5.Element.show()":{"relativeUrl":"/reference/p5.Element/show","alias":"show"},"p5.Element.size()":{"relativeUrl":"/reference/p5.Element/size","alias":"size"},"p5.Element.style()":{"relativeUrl":"/reference/p5.Element/style","alias":"style"},"p5.Element.toggleClass()":{"relativeUrl":"/reference/p5.Element/toggleClass","alias":"toggleClass"},"p5.Element.touchEnded()":{"relativeUrl":"/reference/p5.Element/touchEnded","alias":"touchEnded"},"p5.Element.touchMoved()":{"relativeUrl":"/reference/p5.Element/touchMoved","alias":"touchMoved"},"p5.Element.touchStarted()":{"relativeUrl":"/reference/p5.Element/touchStarted","alias":"touchStarted"},"p5.Element.value()":{"relativeUrl":"/reference/p5.Element/value","alias":"value"},"p5.Element.width":{"relativeUrl":"/reference/p5.Element/width","alias":"width"},"p5.Envelope.attackTime()":{"relativeUrl":"/reference/p5.Envelope/attackTime","alias":"attackTime"},"p5.Envelope.play()":{"relativeUrl":"/reference/p5.Envelope/play","alias":"play"},"p5.Envelope.releaseTime()":{"relativeUrl":"/reference/p5.Envelope/releaseTime","alias":"releaseTime"},"p5.Envelope.setADSR()":{"relativeUrl":"/reference/p5.Envelope/setADSR","alias":"setADSR"},"p5.Envelope.triggerAttack()":{"relativeUrl":"/reference/p5.Envelope/triggerAttack","alias":"triggerAttack"},"p5.Envelope.triggerRelease()":{"relativeUrl":"/reference/p5.Envelope/triggerRelease","alias":"triggerRelease"},"p5.FFT.analyze()":{"relativeUrl":"/reference/p5.FFT/analyze","alias":"analyze"},"p5.FFT.waveform()":{"relativeUrl":"/reference/p5.FFT/waveform","alias":"waveform"},"p5.File.data":{"relativeUrl":"/reference/p5.File/data","alias":"data"},"p5.File.file":{"relativeUrl":"/reference/p5.File/file","alias":"file"},"p5.File.name":{"relativeUrl":"/reference/p5.File/name","alias":"name"},"p5.File.size":{"relativeUrl":"/reference/p5.File/size","alias":"size"},"p5.File.subtype":{"relativeUrl":"/reference/p5.File/subtype","alias":"subtype"},"p5.File.type":{"relativeUrl":"/reference/p5.File/type","alias":"type"},"p5.Font.font":{"relativeUrl":"/reference/p5.Font/font","alias":"font"},"p5.Font.textBounds()":{"relativeUrl":"/reference/p5.Font/textBounds","alias":"textBounds"},"p5.Font.textToPoints()":{"relativeUrl":"/reference/p5.Font/textToPoints","alias":"textToPoints"},"p5.Framebuffer.autoSized()":{"relativeUrl":"/reference/p5.Framebuffer/autoSized","alias":"autoSized"},"p5.Framebuffer.begin()":{"relativeUrl":"/reference/p5.Framebuffer/begin","alias":"begin"},"p5.Framebuffer.color":{"relativeUrl":"/reference/p5.Framebuffer/color","alias":"color"},"p5.Framebuffer.createCamera()":{"relativeUrl":"/reference/p5.Framebuffer/createCamera","alias":"createCamera"},"p5.Framebuffer.depth":{"relativeUrl":"/reference/p5.Framebuffer/depth","alias":"depth"},"p5.Framebuffer.draw()":{"relativeUrl":"/reference/p5.Framebuffer/draw","alias":"draw"},"p5.Framebuffer.end()":{"relativeUrl":"/reference/p5.Framebuffer/end","alias":"end"},"p5.Framebuffer.get()":{"relativeUrl":"/reference/p5.Framebuffer/get","alias":"get"},"p5.Framebuffer.loadPixels()":{"relativeUrl":"/reference/p5.Framebuffer/loadPixels","alias":"loadPixels"},"p5.Framebuffer.pixelDensity()":{"relativeUrl":"/reference/p5.Framebuffer/pixelDensity","alias":"pixelDensity"},"p5.Framebuffer.pixels":{"relativeUrl":"/reference/p5.Framebuffer/pixels","alias":"pixels"},"p5.Framebuffer.remove()":{"relativeUrl":"/reference/p5.Framebuffer/remove","alias":"remove"},"p5.Framebuffer.resize()":{"relativeUrl":"/reference/p5.Framebuffer/resize","alias":"resize"},"p5.Framebuffer.updatePixels()":{"relativeUrl":"/reference/p5.Framebuffer/updatePixels","alias":"updatePixels"},"p5.Gain.amp()":{"relativeUrl":"/reference/p5.Gain/amp","alias":"amp"},"p5.Geometry.calculateBoundingBox()":{"relativeUrl":"/reference/p5.Geometry/calculateBoundingBox","alias":"calculateBoundingBox"},"p5.Geometry.clearColors()":{"relativeUrl":"/reference/p5.Geometry/clearColors","alias":"clearColors"},"p5.Geometry.computeFaces()":{"relativeUrl":"/reference/p5.Geometry/computeFaces","alias":"computeFaces"},"p5.Geometry.computeNormals()":{"relativeUrl":"/reference/p5.Geometry/computeNormals","alias":"computeNormals"},"p5.Geometry.faces":{"relativeUrl":"/reference/p5.Geometry/faces","alias":"faces"},"p5.Geometry.flipU()":{"relativeUrl":"/reference/p5.Geometry/flipU","alias":"flipU"},"p5.Geometry.flipV()":{"relativeUrl":"/reference/p5.Geometry/flipV","alias":"flipV"},"p5.Geometry.normalize()":{"relativeUrl":"/reference/p5.Geometry/normalize","alias":"normalize"},"p5.Geometry.saveObj()":{"relativeUrl":"/reference/p5.Geometry/saveObj","alias":"saveObj"},"p5.Geometry.saveStl()":{"relativeUrl":"/reference/p5.Geometry/saveStl","alias":"saveStl"},"p5.Geometry.uvs":{"relativeUrl":"/reference/p5.Geometry/uvs","alias":"uvs"},"p5.Geometry.vertexNormals":{"relativeUrl":"/reference/p5.Geometry/vertexNormals","alias":"vertexNormals"},"p5.Geometry.vertices":{"relativeUrl":"/reference/p5.Geometry/vertices","alias":"vertices"},"p5.Graphics.createFramebuffer()":{"relativeUrl":"/reference/p5.Graphics/createFramebuffer","alias":"createFramebuffer"},"p5.Graphics.remove()":{"relativeUrl":"/reference/p5.Graphics/remove","alias":"remove"},"p5.Graphics.reset()":{"relativeUrl":"/reference/p5.Graphics/reset","alias":"reset"},"p5.Image.blend()":{"relativeUrl":"/reference/p5.Image/blend","alias":"blend"},"p5.Image.copy()":{"relativeUrl":"/reference/p5.Image/copy","alias":"copy"},"p5.Image.delay()":{"relativeUrl":"/reference/p5.Image/delay","alias":"delay"},"p5.Image.filter()":{"relativeUrl":"/reference/p5.Image/filter","alias":"filter"},"p5.Image.get()":{"relativeUrl":"/reference/p5.Image/get","alias":"get"},"p5.Image.getCurrentFrame()":{"relativeUrl":"/reference/p5.Image/getCurrentFrame","alias":"getCurrentFrame"},"p5.Image.height":{"relativeUrl":"/reference/p5.Image/height","alias":"height"},"p5.Image.loadPixels()":{"relativeUrl":"/reference/p5.Image/loadPixels","alias":"loadPixels"},"p5.Image.mask()":{"relativeUrl":"/reference/p5.Image/mask","alias":"mask"},"p5.Image.numFrames()":{"relativeUrl":"/reference/p5.Image/numFrames","alias":"numFrames"},"p5.Image.pause()":{"relativeUrl":"/reference/p5.Image/pause","alias":"pause"},"p5.Image.pixelDensity()":{"relativeUrl":"/reference/p5.Image/pixelDensity","alias":"pixelDensity"},"p5.Image.pixels":{"relativeUrl":"/reference/p5.Image/pixels","alias":"pixels"},"p5.Image.play()":{"relativeUrl":"/reference/p5.Image/play","alias":"play"},"p5.Image.reset()":{"relativeUrl":"/reference/p5.Image/reset","alias":"reset"},"p5.Image.resize()":{"relativeUrl":"/reference/p5.Image/resize","alias":"resize"},"p5.Image.save()":{"relativeUrl":"/reference/p5.Image/save","alias":"save"},"p5.Image.set()":{"relativeUrl":"/reference/p5.Image/set","alias":"set"},"p5.Image.setFrame()":{"relativeUrl":"/reference/p5.Image/setFrame","alias":"setFrame"},"p5.Image.updatePixels()":{"relativeUrl":"/reference/p5.Image/updatePixels","alias":"updatePixels"},"p5.Image.width":{"relativeUrl":"/reference/p5.Image/width","alias":"width"},"p5.MediaElement.addCue()":{"relativeUrl":"/reference/p5.MediaElement/addCue","alias":"addCue"},"p5.MediaElement.autoplay()":{"relativeUrl":"/reference/p5.MediaElement/autoplay","alias":"autoplay"},"p5.MediaElement.clearCues()":{"relativeUrl":"/reference/p5.MediaElement/clearCues","alias":"clearCues"},"p5.MediaElement.connect()":{"relativeUrl":"/reference/p5.MediaElement/connect","alias":"connect"},"p5.MediaElement.disconnect()":{"relativeUrl":"/reference/p5.MediaElement/disconnect","alias":"disconnect"},"p5.MediaElement.duration()":{"relativeUrl":"/reference/p5.MediaElement/duration","alias":"duration"},"p5.MediaElement.hideControls()":{"relativeUrl":"/reference/p5.MediaElement/hideControls","alias":"hideControls"},"p5.MediaElement.loop()":{"relativeUrl":"/reference/p5.MediaElement/loop","alias":"loop"},"p5.MediaElement.noLoop()":{"relativeUrl":"/reference/p5.MediaElement/noLoop","alias":"noLoop"},"p5.MediaElement.onended()":{"relativeUrl":"/reference/p5.MediaElement/onended","alias":"onended"},"p5.MediaElement.pause()":{"relativeUrl":"/reference/p5.MediaElement/pause","alias":"pause"},"p5.MediaElement.play()":{"relativeUrl":"/reference/p5.MediaElement/play","alias":"play"},"p5.MediaElement.removeCue()":{"relativeUrl":"/reference/p5.MediaElement/removeCue","alias":"removeCue"},"p5.MediaElement.showControls()":{"relativeUrl":"/reference/p5.MediaElement/showControls","alias":"showControls"},"p5.MediaElement.speed()":{"relativeUrl":"/reference/p5.MediaElement/speed","alias":"speed"},"p5.MediaElement.src":{"relativeUrl":"/reference/p5.MediaElement/src","alias":"src"},"p5.MediaElement.stop()":{"relativeUrl":"/reference/p5.MediaElement/stop","alias":"stop"},"p5.MediaElement.time()":{"relativeUrl":"/reference/p5.MediaElement/time","alias":"time"},"p5.MediaElement.volume()":{"relativeUrl":"/reference/p5.MediaElement/volume","alias":"volume"},"p5.Noise.amp()":{"relativeUrl":"/reference/p5.Noise/amp","alias":"amp"},"p5.Noise.start()":{"relativeUrl":"/reference/p5.Noise/start","alias":"start"},"p5.Noise.stop()":{"relativeUrl":"/reference/p5.Noise/stop","alias":"stop"},"p5.NumberDict.add()":{"relativeUrl":"/reference/p5.NumberDict/add","alias":"add"},"p5.NumberDict.div()":{"relativeUrl":"/reference/p5.NumberDict/div","alias":"div"},"p5.NumberDict.maxKey()":{"relativeUrl":"/reference/p5.NumberDict/maxKey","alias":"maxKey"},"p5.NumberDict.maxValue()":{"relativeUrl":"/reference/p5.NumberDict/maxValue","alias":"maxValue"},"p5.NumberDict.minKey()":{"relativeUrl":"/reference/p5.NumberDict/minKey","alias":"minKey"},"p5.NumberDict.minValue()":{"relativeUrl":"/reference/p5.NumberDict/minValue","alias":"minValue"},"p5.NumberDict.mult()":{"relativeUrl":"/reference/p5.NumberDict/mult","alias":"mult"},"p5.NumberDict.sub()":{"relativeUrl":"/reference/p5.NumberDict/sub","alias":"sub"},"p5.Oscillator.amp()":{"relativeUrl":"/reference/p5.Oscillator/amp","alias":"amp"},"p5.Oscillator.freq()":{"relativeUrl":"/reference/p5.Oscillator/freq","alias":"freq"},"p5.Oscillator.phase()":{"relativeUrl":"/reference/p5.Oscillator/phase","alias":"phase"},"p5.Oscillator.setType()":{"relativeUrl":"/reference/p5.Oscillator/setType","alias":"setType"},"p5.Oscillator.start()":{"relativeUrl":"/reference/p5.Oscillator/start","alias":"start"},"p5.Oscillator.stop()":{"relativeUrl":"/reference/p5.Oscillator/stop","alias":"stop"},"p5.Panner.pan()":{"relativeUrl":"/reference/p5.Panner/pan","alias":"pan"},"p5.Panner3D.maxDist()":{"relativeUrl":"/reference/p5.Panner3D/maxDist","alias":"maxDist"},"p5.Panner3D.positionX()":{"relativeUrl":"/reference/p5.Panner3D/positionX","alias":"positionX"},"p5.Panner3D.positionY()":{"relativeUrl":"/reference/p5.Panner3D/positionY","alias":"positionY"},"p5.Panner3D.positionZ()":{"relativeUrl":"/reference/p5.Panner3D/positionZ","alias":"positionZ"},"p5.Panner3D.process()":{"relativeUrl":"/reference/p5.Panner3D/process","alias":"process"},"p5.Panner3D.rolloff()":{"relativeUrl":"/reference/p5.Panner3D/rolloff","alias":"rolloff"},"p5.Panner3D.set()":{"relativeUrl":"/reference/p5.Panner3D/set","alias":"set"},"p5.Panner3D.setFalloff()":{"relativeUrl":"/reference/p5.Panner3D/setFalloff","alias":"setFalloff"},"p5.PitchShifter.shift()":{"relativeUrl":"/reference/p5.PitchShifter/shift","alias":"shift"},"p5.PrintWriter.clear()":{"relativeUrl":"/reference/p5.PrintWriter/clear","alias":"clear"},"p5.PrintWriter.close()":{"relativeUrl":"/reference/p5.PrintWriter/close","alias":"close"},"p5.PrintWriter.print()":{"relativeUrl":"/reference/p5.PrintWriter/print","alias":"print"},"p5.PrintWriter.write()":{"relativeUrl":"/reference/p5.PrintWriter/write","alias":"write"},"p5.Reverb.set()":{"relativeUrl":"/reference/p5.Reverb/set","alias":"set"},"p5.Shader.copyToContext()":{"relativeUrl":"/reference/p5.Shader/copyToContext","alias":"copyToContext"},"p5.Shader.inspectHooks()":{"relativeUrl":"/reference/p5.Shader/inspectHooks","alias":"inspectHooks"},"p5.Shader.modify()":{"relativeUrl":"/reference/p5.Shader/modify","alias":"modify"},"p5.Shader.setUniform()":{"relativeUrl":"/reference/p5.Shader/setUniform","alias":"setUniform"},"p5.SoundFile.amp()":{"relativeUrl":"/reference/p5.SoundFile/amp","alias":"amp"},"p5.SoundFile.channels()":{"relativeUrl":"/reference/p5.SoundFile/channels","alias":"channels"},"p5.SoundFile.duration()":{"relativeUrl":"/reference/p5.SoundFile/duration","alias":"duration"},"p5.SoundFile.frames()":{"relativeUrl":"/reference/p5.SoundFile/frames","alias":"frames"},"p5.SoundFile.isLooping()":{"relativeUrl":"/reference/p5.SoundFile/isLooping","alias":"isLooping"},"p5.SoundFile.isPlaying()":{"relativeUrl":"/reference/p5.SoundFile/isPlaying","alias":"isPlaying"},"p5.SoundFile.jump()":{"relativeUrl":"/reference/p5.SoundFile/jump","alias":"jump"},"p5.SoundFile.loop()":{"relativeUrl":"/reference/p5.SoundFile/loop","alias":"loop"},"p5.SoundFile.onended()":{"relativeUrl":"/reference/p5.SoundFile/onended","alias":"onended"},"p5.SoundFile.pause()":{"relativeUrl":"/reference/p5.SoundFile/pause","alias":"pause"},"p5.SoundFile.play()":{"relativeUrl":"/reference/p5.SoundFile/play","alias":"play"},"p5.SoundFile.rate()":{"relativeUrl":"/reference/p5.SoundFile/rate","alias":"rate"},"p5.SoundFile.sampleRate()":{"relativeUrl":"/reference/p5.SoundFile/sampleRate","alias":"sampleRate"},"p5.SoundFile.setLoop()":{"relativeUrl":"/reference/p5.SoundFile/setLoop","alias":"setLoop"},"p5.SoundFile.setPath()":{"relativeUrl":"/reference/p5.SoundFile/setPath","alias":"setPath"},"p5.SoundFile.start()":{"relativeUrl":"/reference/p5.SoundFile/start","alias":"start"},"p5.SoundFile.stop()":{"relativeUrl":"/reference/p5.SoundFile/stop","alias":"stop"},"p5.Table.addColumn()":{"relativeUrl":"/reference/p5.Table/addColumn","alias":"addColumn"},"p5.Table.addRow()":{"relativeUrl":"/reference/p5.Table/addRow","alias":"addRow"},"p5.Table.clearRows()":{"relativeUrl":"/reference/p5.Table/clearRows","alias":"clearRows"},"p5.Table.columns":{"relativeUrl":"/reference/p5.Table/columns","alias":"columns"},"p5.Table.findRow()":{"relativeUrl":"/reference/p5.Table/findRow","alias":"findRow"},"p5.Table.findRows()":{"relativeUrl":"/reference/p5.Table/findRows","alias":"findRows"},"p5.Table.get()":{"relativeUrl":"/reference/p5.Table/get","alias":"get"},"p5.Table.getArray()":{"relativeUrl":"/reference/p5.Table/getArray","alias":"getArray"},"p5.Table.getColumn()":{"relativeUrl":"/reference/p5.Table/getColumn","alias":"getColumn"},"p5.Table.getColumnCount()":{"relativeUrl":"/reference/p5.Table/getColumnCount","alias":"getColumnCount"},"p5.Table.getNum()":{"relativeUrl":"/reference/p5.Table/getNum","alias":"getNum"},"p5.Table.getObject()":{"relativeUrl":"/reference/p5.Table/getObject","alias":"getObject"},"p5.Table.getRow()":{"relativeUrl":"/reference/p5.Table/getRow","alias":"getRow"},"p5.Table.getRowCount()":{"relativeUrl":"/reference/p5.Table/getRowCount","alias":"getRowCount"},"p5.Table.getRows()":{"relativeUrl":"/reference/p5.Table/getRows","alias":"getRows"},"p5.Table.getString()":{"relativeUrl":"/reference/p5.Table/getString","alias":"getString"},"p5.Table.matchRow()":{"relativeUrl":"/reference/p5.Table/matchRow","alias":"matchRow"},"p5.Table.matchRows()":{"relativeUrl":"/reference/p5.Table/matchRows","alias":"matchRows"},"p5.Table.removeColumn()":{"relativeUrl":"/reference/p5.Table/removeColumn","alias":"removeColumn"},"p5.Table.removeRow()":{"relativeUrl":"/reference/p5.Table/removeRow","alias":"removeRow"},"p5.Table.removeTokens()":{"relativeUrl":"/reference/p5.Table/removeTokens","alias":"removeTokens"},"p5.Table.rows":{"relativeUrl":"/reference/p5.Table/rows","alias":"rows"},"p5.Table.set()":{"relativeUrl":"/reference/p5.Table/set","alias":"set"},"p5.Table.setNum()":{"relativeUrl":"/reference/p5.Table/setNum","alias":"setNum"},"p5.Table.setString()":{"relativeUrl":"/reference/p5.Table/setString","alias":"setString"},"p5.Table.trim()":{"relativeUrl":"/reference/p5.Table/trim","alias":"trim"},"p5.TableRow.get()":{"relativeUrl":"/reference/p5.TableRow/get","alias":"get"},"p5.TableRow.getNum()":{"relativeUrl":"/reference/p5.TableRow/getNum","alias":"getNum"},"p5.TableRow.getString()":{"relativeUrl":"/reference/p5.TableRow/getString","alias":"getString"},"p5.TableRow.set()":{"relativeUrl":"/reference/p5.TableRow/set","alias":"set"},"p5.TableRow.setNum()":{"relativeUrl":"/reference/p5.TableRow/setNum","alias":"setNum"},"p5.TableRow.setString()":{"relativeUrl":"/reference/p5.TableRow/setString","alias":"setString"},"p5.TypedDict.clear()":{"relativeUrl":"/reference/p5.TypedDict/clear","alias":"clear"},"p5.TypedDict.create()":{"relativeUrl":"/reference/p5.TypedDict/create","alias":"create"},"p5.TypedDict.get()":{"relativeUrl":"/reference/p5.TypedDict/get","alias":"get"},"p5.TypedDict.hasKey()":{"relativeUrl":"/reference/p5.TypedDict/hasKey","alias":"hasKey"},"p5.TypedDict.print()":{"relativeUrl":"/reference/p5.TypedDict/print","alias":"print"},"p5.TypedDict.remove()":{"relativeUrl":"/reference/p5.TypedDict/remove","alias":"remove"},"p5.TypedDict.saveJSON()":{"relativeUrl":"/reference/p5.TypedDict/saveJSON","alias":"saveJSON"},"p5.TypedDict.saveTable()":{"relativeUrl":"/reference/p5.TypedDict/saveTable","alias":"saveTable"},"p5.TypedDict.set()":{"relativeUrl":"/reference/p5.TypedDict/set","alias":"set"},"p5.TypedDict.size()":{"relativeUrl":"/reference/p5.TypedDict/size","alias":"size"},"p5.Vector.add()":{"relativeUrl":"/reference/p5.Vector/add","alias":"add"},"p5.Vector.angleBetween()":{"relativeUrl":"/reference/p5.Vector/angleBetween","alias":"angleBetween"},"p5.Vector.array()":{"relativeUrl":"/reference/p5.Vector/array","alias":"array"},"p5.Vector.clampToZero()":{"relativeUrl":"/reference/p5.Vector/clampToZero","alias":"clampToZero"},"p5.Vector.copy()":{"relativeUrl":"/reference/p5.Vector/copy","alias":"copy"},"p5.Vector.cross()":{"relativeUrl":"/reference/p5.Vector/cross","alias":"cross"},"p5.Vector.dist()":{"relativeUrl":"/reference/p5.Vector/dist","alias":"dist"},"p5.Vector.div()":{"relativeUrl":"/reference/p5.Vector/div","alias":"div"},"p5.Vector.dot()":{"relativeUrl":"/reference/p5.Vector/dot","alias":"dot"},"p5.Vector.equals()":{"relativeUrl":"/reference/p5.Vector/equals","alias":"equals"},"p5.Vector.fromAngle()":{"relativeUrl":"/reference/p5.Vector/fromAngle","alias":"fromAngle"},"p5.Vector.fromAngles()":{"relativeUrl":"/reference/p5.Vector/fromAngles","alias":"fromAngles"},"p5.Vector.heading()":{"relativeUrl":"/reference/p5.Vector/heading","alias":"heading"},"p5.Vector.lerp()":{"relativeUrl":"/reference/p5.Vector/lerp","alias":"lerp"},"p5.Vector.limit()":{"relativeUrl":"/reference/p5.Vector/limit","alias":"limit"},"p5.Vector.mag()":{"relativeUrl":"/reference/p5.Vector/mag","alias":"mag"},"p5.Vector.magSq()":{"relativeUrl":"/reference/p5.Vector/magSq","alias":"magSq"},"p5.Vector.mult()":{"relativeUrl":"/reference/p5.Vector/mult","alias":"mult"},"p5.Vector.normalize()":{"relativeUrl":"/reference/p5.Vector/normalize","alias":"normalize"},"p5.Vector.random2D()":{"relativeUrl":"/reference/p5.Vector/random2D","alias":"random2D"},"p5.Vector.random3D()":{"relativeUrl":"/reference/p5.Vector/random3D","alias":"random3D"},"p5.Vector.reflect()":{"relativeUrl":"/reference/p5.Vector/reflect","alias":"reflect"},"p5.Vector.rem()":{"relativeUrl":"/reference/p5.Vector/rem","alias":"rem"},"p5.Vector.rotate()":{"relativeUrl":"/reference/p5.Vector/rotate","alias":"rotate"},"p5.Vector.set()":{"relativeUrl":"/reference/p5.Vector/set","alias":"set"},"p5.Vector.setHeading()":{"relativeUrl":"/reference/p5.Vector/setHeading","alias":"setHeading"},"p5.Vector.setMag()":{"relativeUrl":"/reference/p5.Vector/setMag","alias":"setMag"},"p5.Vector.slerp()":{"relativeUrl":"/reference/p5.Vector/slerp","alias":"slerp"},"p5.Vector.sub()":{"relativeUrl":"/reference/p5.Vector/sub","alias":"sub"},"p5.Vector.toString()":{"relativeUrl":"/reference/p5.Vector/toString","alias":"toString"},"p5.Vector.x":{"relativeUrl":"/reference/p5.Vector/x","alias":"x"},"p5.Vector.y":{"relativeUrl":"/reference/p5.Vector/y","alias":"y"},"p5.Vector.z":{"relativeUrl":"/reference/p5.Vector/z","alias":"z"},"p5.XML.addChild()":{"relativeUrl":"/reference/p5.XML/addChild","alias":"addChild"},"p5.XML.getAttributeCount()":{"relativeUrl":"/reference/p5.XML/getAttributeCount","alias":"getAttributeCount"},"p5.XML.getChild()":{"relativeUrl":"/reference/p5.XML/getChild","alias":"getChild"},"p5.XML.getChildren()":{"relativeUrl":"/reference/p5.XML/getChildren","alias":"getChildren"},"p5.XML.getContent()":{"relativeUrl":"/reference/p5.XML/getContent","alias":"getContent"},"p5.XML.getName()":{"relativeUrl":"/reference/p5.XML/getName","alias":"getName"},"p5.XML.getNum()":{"relativeUrl":"/reference/p5.XML/getNum","alias":"getNum"},"p5.XML.getParent()":{"relativeUrl":"/reference/p5.XML/getParent","alias":"getParent"},"p5.XML.getString()":{"relativeUrl":"/reference/p5.XML/getString","alias":"getString"},"p5.XML.hasAttribute()":{"relativeUrl":"/reference/p5.XML/hasAttribute","alias":"hasAttribute"},"p5.XML.hasChildren()":{"relativeUrl":"/reference/p5.XML/hasChildren","alias":"hasChildren"},"p5.XML.listAttributes()":{"relativeUrl":"/reference/p5.XML/listAttributes","alias":"listAttributes"},"p5.XML.listChildren()":{"relativeUrl":"/reference/p5.XML/listChildren","alias":"listChildren"},"p5.XML.removeChild()":{"relativeUrl":"/reference/p5.XML/removeChild","alias":"removeChild"},"p5.XML.serialize()":{"relativeUrl":"/reference/p5.XML/serialize","alias":"serialize"},"p5.XML.setAttribute()":{"relativeUrl":"/reference/p5.XML/setAttribute","alias":"setAttribute"},"p5.XML.setContent()":{"relativeUrl":"/reference/p5.XML/setContent","alias":"setContent"},"p5.XML.setName()":{"relativeUrl":"/reference/p5.XML/setName","alias":"setName"},"p5.sound.getAudioContext()":{"relativeUrl":"/reference/p5.sound/getAudioContext","alias":"getAudioContext"},"p5.sound.loadSound()":{"relativeUrl":"/reference/p5.sound/loadSound","alias":"loadSound"},"p5.Amplitude":{"relativeUrl":"/reference/p5.sound/p5.Amplitude"},"p5.AudioIn":{"relativeUrl":"/reference/p5.sound/p5.AudioIn"},"p5.Biquad":{"relativeUrl":"/reference/p5.sound/p5.Biquad"},"p5.Delay":{"relativeUrl":"/reference/p5.sound/p5.Delay"},"p5.Envelope":{"relativeUrl":"/reference/p5.sound/p5.Envelope"},"p5.FFT":{"relativeUrl":"/reference/p5.sound/p5.FFT"},"p5.Gain":{"relativeUrl":"/reference/p5.sound/p5.Gain"},"p5.Noise":{"relativeUrl":"/reference/p5.sound/p5.Noise"},"p5.Oscillator":{"relativeUrl":"/reference/p5.sound/p5.Oscillator"},"p5.Panner":{"relativeUrl":"/reference/p5.sound/p5.Panner"},"p5.Panner3D":{"relativeUrl":"/reference/p5.sound/p5.Panner3D"},"p5.PitchShifter":{"relativeUrl":"/reference/p5.sound/p5.PitchShifter"},"p5.Reverb":{"relativeUrl":"/reference/p5.sound/p5.Reverb"},"p5.SawOsc":{"relativeUrl":"/reference/p5.sound/p5.SawOsc"},"p5.SinOsc":{"relativeUrl":"/reference/p5.sound/p5.SinOsc"},"p5.SoundFile":{"relativeUrl":"/reference/p5.sound/p5.SoundFile"},"p5.SqrOsc":{"relativeUrl":"/reference/p5.sound/p5.SqrOsc"},"p5.TriOsc":{"relativeUrl":"/reference/p5.sound/p5.TriOsc"},"p5.sound.setAudioContext()":{"relativeUrl":"/reference/p5.sound/setAudioContext","alias":"setAudioContext"},"p5.sound.userStartAudio()":{"relativeUrl":"/reference/p5.sound/userStartAudio","alias":"userStartAudio"},"p5.sound.userStopAudio()":{"relativeUrl":"/reference/p5.sound/userStopAudio","alias":"userStopAudio"}},"tutorials-fallback":{"Animating with Media Objects":{"relativeUrl":"/tutorials/animating-with-media-objects","description":"Learn how to load images and GIFs to your sketches by creating an interactive garden!"},"Color Gradients":{"relativeUrl":"/tutorials/color-gradients","description":"Use radial gradients, linear gradients, and blend modes to create lens flare stickers & colorful filters on top of a webcam selfie."},"Conditionals and Interactivity":{"relativeUrl":"/tutorials/conditionals-and-interactivity","description":"A tutorial on how to use conditional statements and make interactive sketches."},"Coordinates and Transformations":{"relativeUrl":"/tutorials/coordinates-and-transformations","description":"An overview of the different ways you can position objects in WebGL mode."},"Creating and Styling HTML":{"relativeUrl":"/tutorials/creating-styling-html","description":"Dive into the art of creative coding and learn to build and beautify HTML with p5.js."},"Creating Custom Geometry in WebGL":{"relativeUrl":"/tutorials/custom-geometry","description":"A guide to the different ways you can create your own 3D shapes."},"Custom Shapes and Smooth Curves":{"relativeUrl":"/tutorials/custom-shapes-and-smooth-curves","description":"Use vertex(), bezierVertex(), beginShape() and endShape() to create angular and curved sparkle stickers to place on top of your webcam selfie."},"Data Structure Garden":{"relativeUrl":"/tutorials/data-structure-garden","description":"A tutorial on how to use JavaScript objects and arrays."},"Field Guide to Debugging":{"relativeUrl":"/tutorials/field-guide-to-debugging","description":"Learn some healthy habits and best practices for locating bugs in your program, and finding ways to overcome them."},"Get Started":{"relativeUrl":"/tutorials/get-started","description":"A tutorial that introduces basic p5.js functions and guides you through the steps to create an interactive landscape."},"Getting Started with Node.js":{"relativeUrl":"/tutorials/getting-started-with-nodejs","description":"Learn about HTTP requests and how to use Node.js in your p5.js projects to create dynamic projects that save and retrieve files."},"How to Optimize Your Sketches":{"relativeUrl":"/tutorials/how-to-optimize-your-sketches","description":"An advanced tutorial on how to optimize code in your sketches to run more efficiently."},"Introduction to Shaders":{"relativeUrl":"/tutorials/intro-to-shaders","description":"An introduction to the different ways you can create interesting visual effects with your computer's GPU."},"Layered Rendering with Framebuffers":{"relativeUrl":"/tutorials/layered-rendering-with-framebuffers","description":"Framebuffers are the fastest way to create a scene out of multiple layers in WebGL. Explore how to use them, and the unique 3D information they provide."},"Lights, Camera, Materials":{"relativeUrl":"/tutorials/lights-camera-materials","description":"Learn how to light and frame 3D scenes, and how to style 3D objects."},"Loading and Selecting Fonts":{"relativeUrl":"/tutorials/loading-and-selecting-fonts","description":"Explore typography in creative coding: A Quick guide to choosing and selecting fonts."},"Optimizing WebGL Sketches":{"relativeUrl":"/tutorials/optimizing-webgl-sketches","description":"Tips to help make your sketches run as smoothly as possible on as many devices as possible."},"Organizing Code with Functions":{"relativeUrl":"/tutorials/organizing-code-with-functions","description":"A tutorial on how to create and use functions to help you organize your code."},"How to Use the p5.js Web Editor with a Screen Reader":{"relativeUrl":"/tutorials/p5js-with-screen-reader","description":"A tutorial for setting up the p5.js Web Editor for screen readers."},"Repeating with Loops":{"relativeUrl":"/tutorials/repeating-with-loops","description":"Create a crawling caterpillar race using loops and arrays!"},"Responding to Inputs":{"relativeUrl":"/tutorials/responding-to-inputs","description":"Code nostalgia: Unleash your creativity and bring a vintage snake game to life with p5.js!"},"Setting Up Your Environment":{"relativeUrl":"/tutorials/setting-up-your-environment","description":"A quick tutorial for setting up the p5.js Web Editor and VS Code to write and save p5.js projects."},"Simple Melody App":{"relativeUrl":"/tutorials/simple-melody-app","description":"Use p5.Oscillator objects to generate musical notes in an app where users can write and replay melodies they create by interacting with the canvas!"},"Abracadabra: Speak With Your Hands in p5.js and ml5.js":{"relativeUrl":"/tutorials/speak-with-your-hands","description":"Control sketches with your hands using ml5.js"},"Variables and Change":{"relativeUrl":"/tutorials/variables-and-change","description":"Learn about variables and how they can be used to create animated sketches!"},"Writing Accessible Canvas Descriptions":{"relativeUrl":"/tutorials/writing-accessible-canvas-descriptions","description":"A tutorial for how to label p5.js code for screen readers."}}}
\ No newline at end of file
diff --git a/public/search-indices/zh-Hans.json b/public/search-indices/zh-Hans.json
index e5c6455b9b..45aeadbb54 100644
--- a/public/search-indices/zh-Hans.json
+++ b/public/search-indices/zh-Hans.json
@@ -1 +1 @@
-{"contributor-docs":{"🌸欢迎！🌺\n":{"relativeUrl":"/contribute/README","description":"\n\n感谢你有兴趣为 p5.js 做出贡献！我们的团队重视每一种形式的帮助，并且正在尽可能的扩大你能帮助的范围，这包括了参考文献、教学、编写程序、创作艺术、写作、设计、活动、组织、展策或者任何你能想象到的东西。[我们的社群网页](https://p5js.org/community/#contribute)提供了一些贡献与参与项目的方法。如果你要提供技术性的帮助，请接着往下读。\n\n本项目遵循[贡献者名单](https://github.com/kentcdodds/all-contributors/)规格。你可遵循[指示](https://github.com/processing/p5.js/issues/2309/)把你和你的贡献添加到 [readme](https://github.com/processing/p5.js/blob/main/README.md#contributors)，或者是在 [GitHub issue](https://github.com/processing/p5.js/issues/) 中评论你的贡献，我们就会把你加入到贡献者名单中。\n\n# 源代码\n\np5.js 项目除了这个代码库外还包括了以下几个其他的代码库：\n\n* [p5.js](https://github.com/processing/p5.js)：包括了 p5.js 源代码。[面向用户的 p5.js 参考文献](https://p5js.org/reference/)也是由包含在此源代码中的 [JSDoc](http://usejsdoc.org/) 注解生成的。[Lauren Lee McCarthy](https://github.com/lmccart/) 为维持者。\n* [p5.js-website](https://github.com/processing/p5.js-website/)：此源代码包含了 \\[p5.js website]\\([http://p5js.org](http://p5js.org) /)的大多数代码（除参考文献外）。[Lauren Lee McCarthy](https://github.com/lmccart/) 为维持者。\n* [p5.js-sound](https://github.com/processing/p5.js-sound/)：包括了 p5.sound.js 程式库。[Jason Sigal](https://github.com/therewasaguy/) 为维持者。\n* [p5.js-web-editor](https://github.com/processing/p5.js-web-editor/)：包含了 [p5.js web editor](https://editor.p5js.org) 的源代码。[Cassie Tarakajian](https://github.com/catarak/) 为维持者。请注意，旧版 [p5.js editor](https://github.com/processing/p5.js-editor/) 已不再受支持。\n* [p5.accessibility](https://github.com/processing/p5.accessibility)：使 p5.js 更适合盲人和视障人士使用的程式库。\n\n# 文件结构\n\n这个代码库有很多文件，所以这里提供了文件总览。有些文件可能很难懂——不过你并不需要每一个都看懂才能开始。我们建议你先从一个特定区域入手（例如说，修复某些内联参考文献），并逐渐地探索更多领域。Luisa Pereira 的 [Looking Inside p5.js](https://www.luisapereira.net/teaching/materials/processing-foundation/) 也给出了 p5.js 工具与文件的视频总览。\n\n* `contributor_docs/` 包含了贡献者所需遵循的原则；\n* `docs/` 并不包含参考文献！它包含了 **生成** [线上参考文献](https://p5js.org/reference/)的代码；\n* `lib/` 包含一个空白示例和 p5.sound 扩展程式库，并且会周期性地通过 [p5.js-sound 代码库](https://github.com/processing/p5.js-sound/) 更新。这里也是当用 [Grunt](https://gruntjs.com/) 把 p5.js 编译到单个文件后 p5.js 程式库的位置。发出 Pull request 时，无需将其检入 GitHub 代码库。\n* `src/` 包含所有的源代码，这些源代码通常组织成多个单独的模块。 如果要更改 p5.js，这就是你需要参考的地方。大多数文件夹内部都有独自的 README.md 文件，以帮助您浏览该文件夹。\n* `tasks/` 包含创建 p5.js 与新版本 p5.js 的构建、部署和发行有关的自动化任务的脚本。\n* `tests/` 包含单元测试，这些单元测试可确保库随着更改仍继续正常运行。\n* `utils/` 可能包含对存储库有用的其他文件，但是通常您可以忽略此目录。\n\n# 参考文献\n\n我们意识到参考文献是这个项目中最重要的部分。不好的参考文献是新用户与新贡献者的最大屏障，让项目不具有包容性。[contributing\\_documentation.md](../contributing_documentation/) 页面为开始修改参考文献给出了一个深入的导览。p5.js 的参考文献可以在以下几个地方找到：\n\n* [p5js.org/reference](https://p5js.org/reference/)：由 [inline documentation](../inline_documentation/) 的源代码生成。它包括了文本描述和参数以及随附的代码片段示例。我们将所有这些内联文献和代码放在一起，以使代码和参考文献保持紧密的联系，并强化这样的思想，贡献参考文献与贡献代码至少同等重要。构建库后，它将检查内联参考文献和示例，以确保它们与代码的行为方式匹配。 要做出贡献，您可以先查看 [inline\\_documentation.md](../inline_documentation/) 页面。\n* [p5js.org/examples](http://p5js.org/examples/) 页面包含更长的示例，这些示例对于学习 p5.js 可能有用。要做出贡献，您可以先查看 [adding\\_examples.md](https://github.com/processing/p5.js-website/blob/main/contributor_docs/Adding_examples.md)。\n* [p5js.org/learn](https://p5js.org/learn/) 页面包含可帮助您学习 p5.js 和编程概念的教程。 要做出贡献，您可以先查看 [p5.js guide to contributing to tutorials](https://p5js.org/learn/tutorial-guide.html)。\n* 您可能会注意到 p5.js 网站目前支持几种不同的语言。这称为国际化（i18n）。您可以在 [i18n\\_contribution](https://github.com/processing/p5.js-website/blob/main/contributor_docs/i18n_contribution.md)页面了解更多。\n\n# GitHub Issue 流程\n\n* 我们使用 [GitHub issue](https://github.com/processing/p5.js/issues/) 跟踪已知的错误和预期的新功能。[Issue lables](../issue_labels/) 用于将问题分类，例如[适合初学者](https://github.com/processing/p5.js/labels/level%3Abeginner/)的问题。\n\n* 如果您想开始处理现有问题，请对你打算探查的问题发表评论，以便其他贡献者知道该问题正在处理中并可以提供帮助。\n\n* 完成有关此问题的工作后，请针对 p5.js main 分支[提交 Pull request](../preparing_a_pull_request/) 。在PR的描述字段中，包括 “resolves #XXXX” 标记，以解决您要解决的问题。如果 PR 并不能完全解决该问题（即，在PR合并后该问题应保持打开状态），请输入 “addresses #XXXX”。\n\n* 如果发现错误或有想要添加新功能的主意，请先提交问题。请不要直接地提交包含修复程序或新功能的 Pull Request，而不先发出问题，否则我们将无法接受该 Pull Request。在有关该问题获得反馈并得到同意解决该问题后，您可以按照上述过程以提供修复或功能。\n\n* 您可以对问题进行分类，其中可能包括复制错误报告或要求提供重要信息，例如版本号或复制说明。 如果您想开始分类问题，一种简单的入门方法是[在 CodeTriage 上订阅 p5.js](https://www.codetriage.com/processing/p5.js)。[](https://www.codetriage.com/processing/p5.js)\n\n* [organization.md](https://github.com/processing/p5.js/blob/main/contributor_docs/organization.md) 文件提供了有关如何组织问题以及决策过程的高级概述。如果您有兴趣，欢迎您参与。\n\n# 开发过程\n\n我们知道开发过程可能会有点难——不只是你一个人，所有人一开始都会这么觉得。你可以遵循下面的步骤来设置；如果遇到了问题，你可以在[论坛](https://discourse.processing.org/c/p5js/)上讨论或发布一个关于你的问题的 [issue](https://github.com/processing/p5.js/issues/)，我们会尽力帮助你的。\n\n1. 下载 [node.js](http://nodejs.org/)（同时将会自动下载 [npm](https://www.npmjs.org) 程式包管理器）\n\n2. 将 [p5.js 代码库](https://github.com/processing/p5.js) [fork](https://help.github.com/articles/fork-a-repo/) 到你的 GitHub 账号\n\n3. [复制](https://help.github.com/articles/cloning-a-repository/) 此代码库的新 fork 到本地电脑：\n\n ```shell\n $ git clone https://github.com/您的用户名/p5.js.git\n ```\n\n4. 导航到项目文件夹，并使用 npm 安装其所有所需的程式包。\n\n ```shell\n $ cd p5.js\n $ npm ci\n ```\n\n5. [Grunt](https://gruntjs.com/) 需要被安装，您可以使用它从源代码构建程式库。\n\n ```shell\n $ npm run grunt\n ```\n\n 如果您要不断更改库中的文件，您可以运行 `npm run dev` 以便在源文件发生任何更改时自动为您重建程式库，而无需手动键入命令。\n\n6. 在本地源代码更改然后用 Git [commit](https://help.github.com/articles/github-glossary/#commit) 它们。\n\n ```shell\n $ git add -u\n $ git commit -m \"YOUR COMMIT MESSAGE\"\n ```\n\n7. 再次运行 `npm run grunt` 确保没有语法错误，测试失败或其他问题。\n\n8. 将您对 GitHub 上的 fork 上载（[Push](https://help.github.com/articles/github-glossary/#push)）新更改。\n\n ```shell\n $ git push\n ```\n\n9. 一切准备就绪后，使用 [pull request](https://help.github.com/articles/creating-a-pull-request/) 发布。\n\n# 注意事项\n\np5.js 代码库附带的开发人员工具在某些方面特意非常严格。这是一件好事！它使所有内容保持一致，并勉励您在编写代码时保持一致性。这意味着您可能尝试更改某些东西——但您的提交可能会被项目拒绝，但不要灰心，即使是经验丰富的 p5.js 开发人员也方会犯同样的错误。通常，问题将出在以下两个方面之一：代码语法或单元测试。\n\n## 代码语法\n\np5.js 要求整齐且在风格上一致的代码语法，它使用 [ESlint](https://eslint.org/) 帮助检查代码。提交前这些工具会检查某些样式规则，但是您也可以为代码编辑器安装 [ESlint 插件](https://eslint.org/docs/user-guide/integrations#editors)，以在键入代码后立即显示错误。总的来说，在代码风格方面我们会趋向选择灵活性，以减少参与和贡献的阻碍。\n\n要检查错误，在命令行输入以下指令（不要键入 `$` 提示符）：\n\n```shell\n$ npm run lint\n```\n\n一些语法错误可以自动修复：\n\n```shell\n$ npm run lint:fix\n```\n\n坚持使用已建立的项目样式通常是更可取的，但是[偶尔](https://github.com/processing/p5.js/search?utf8=%E2%9C%93\\&q=prettier-ignore\\&type=)可能使用不同的语法会使您的代码更易于理解。 这些情况下，Prettier [提供了一个解决方式](https://prettier.io/docs/en/ignore.html)，`// prettier-ignore`注释，您可以使用它来指定个别例外代码。不过如果可以的话，尽量避免使用它，因为 linter 实施的大多数代码格式都有好的理由。\n\n这是代码样式规则的快速摘要。请注意，此列表可能不完整，最好参考 [.prettierrc](https://github.com/processing/p5.js/blob/main/.prettierrc) 和 [.eslintrc](https://github.com/processing/p5.js/blob/main/.eslintrc) 文件以获取完整列表。\n\n* 使用 ES6 语法\n\n* 优先使用单引号\n\n* 缩排使用两个空格\n\n* 所有变量至少要使用一次，否则彻底删除\n\n* 不要使用 `x == true` 或 `x == false`，请使用 `(x)` 或 `(x)!`。如果可能导致误解，请将物件与 `null` 对比、字符串与 `\"\"` 对比、数字与 `0` 对比。\n\n* 在复杂或模棱两可的地方使用注释\n\n* 参考 [Mozilla JS practices](https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Coding_Style#JavaScript_practices) 以了解一些有用的代码格式技巧。\n\n## 单元测试\n\n单元测试是一小段代码，它们是对主逻辑的补充，并执行验证。[unit\\_testing.md](../unit_testing/)页面提供了有关使用单元测试的更多信息。如果您正在开发 p5.js 的主要新功能，尽可能应该包含测试。不要提交没有通过测试的 pull request，因为这意味着某些代码中有错误。\n\n以运行单元测试，您需要确保已安装项目的依赖项。\n\n```shell\n$ npm ci\n```\n\n这将安装*所有* p5.js 的依赖项； 简要地说，特定于单元测试的最重要依赖项包括：\n\n-[Mocha](https://mochajs.org/)，一个功能强大的测试框架，可以执行特定于 p5.js 的各个测试文件\n-[mocha-chrome](https://github.com/shellscape/mocha-chrome/)，一个可使用无头 Google Chrome 浏览器运行 mocha 测试的 mocha 插件\n\n一旦安装了依赖项，请使用Grunt运行单元测试。\n\n```shell\n$ grunt\n```\n\n在浏览器而不是命令行中运行测试有时很有用。 为此，请首先启动 [connect](https://github.com/gruntjs/grunt-contrib-connect/) 服务器：\n\n```shell\n$ npm run dev\n```\n\n在服务器运行的情况下，您应该能够在浏览器中打开 `test/test.html`。\n\n完整的单元测试指南超出了 p5.js 文档的范围，但是简短的版本是 `src/` 目录中包含的源代码中若有任何重大更改或新功能，它应随附有在 `test/` 目录中的测试记录，以验证该库的所有将来版本中的行为一致。在编写单元测试时，请使用 [Chai.js 参考文献](http://www.chaijs.com/api/assert/)作为分阶段声明消息的指南，以便将来在测试中捕获的任何错误都会是一致地，并使其他开发人员更容易理解问题在哪里。\n\n# 其他\n\n* 您可以浏览 [contributor\\_docs /](https://github.com/processing/p5.js/tree/main/contributor_docs/) 文件夹中的其他文件。它们涉及贡献于此项目的技术和非技术方面的特定领域。\n* [深入p5.js](https://www.luisapereira.net/teaching/materials/processing-foundation/) 是 p5.js 开发工作流程中使用的工具和文件的视频教程。\n* [来自 The Coding Train 的视频](https://youtu.be/Rr3vLyP1Ods/) :train::rainbow: 概述了对 p5.js 的技术贡献入门。\n* p5.js [Docker 映像](https://github.com/toolness/p5.js-docker/)可以安装在 [Docker](https://www.docker.com/) 中，并用于开发p5 .js，无需手动安装诸如 [Node](https://nodejs.org/) 之类的要求，也无需以其他方式影响主机操作系统（除了安装 Docker 外）。\n* p5.js 库的构建过程会生成一个 [json 数据文件](https://p5js.org/reference/data.json)，其中包含了 p5.js 的公共 API，可用于自动化工具中，例如在编辑器中自动完成 p5.js 语法。该文件托管在 p5.js 网站上，但不包含在代码库中。\n* p5.js 的语言最近已改版到 [ES6](https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_-__ECMAScript_2015)。要查看此举措如何影响您的贡献，请参考 [ES6 adoption](../es6-adoption/) 。\n"},"我们关注的重点是可及性\n":{"relativeUrl":"/contribute/access","description":"{/* 我们对可及性的承诺对贡献者和库的用户意味着什么。 */}\n\n\n\n在[ 2019 年贡献者大会](https://p5js.org/community/contributors-conference-2019.html)上，我们承诺只向 p5.js 添加提高可及性（包括包容性和无障碍性）的功能。我们不会接受那些不支持这些努力的功能请求。我们致力于识别、消除和预防与可及性相关的障碍。这意味着要考虑在交叉[^1]体验中可能影响可及性和参与度的多样性方向。这包括了性别、种族、族裔、性别倾向、语言、地理位置等因素的考虑。我们会优先考虑边缘群体的需求，而不是仅维护在 p5.js 社区中特权群体的长期舒适体验。我们正共同探索和研究可及性的含义，并积极学习该如何实践和传授可及性相关的知识。我们选择通过广泛、交叉和联合的框架来思考可及性。这一承诺是我们在[社区声明](https://p5js.org/about/#community-statement)中概述的 p5.js 核心价值观的一部分。\n\n## 可及性的种类\n\n增加可及性并不专注于扩大 p5.js 社区的人数。它是一种持续的承诺，旨在使 p5.js 对因结构性压迫而被排除在 p5.js 社区外的人们更加可用和易于接触。这一承诺扩展到 p5.js 提供的工具和平台。它还包括 p5.js 领导层的组成、决策和行动。我们反对技术文化中对速度、增长和竞争的追求。我们将致力于推行以下互相关照的集体行为：深思熟虑、放慢步调、互相照应和积极负责。\n\n这里的可及性意味着为以下人群改进 p5.js：\n\n* 非英语母语的人\n* 黑人、原住民、有色人种以及边缘化民族的人\n* 同性恋、双性恋、酷儿、探索中、泛性恋和无性恋的人\n* 跨性别、流动性别、无性别、间性人、双精神身份人士、女性以及以及其他性别边缘化的人\n* 盲人、聋人[^2]或重听、残疾/有残疾、神经多样性和慢性病[^3]患者\n* 收入较低或缺乏经济或文化基础的人\n* 几乎没有或很少开源和创意编码经验的人\n* 来自多样教育背景的人\n* 包括儿童和老年人在内的所有年龄段的人\n* 拥有各种技术技能、工具和互联网访问的人\n* 来自多样宗教背景的人\n* 其他被系统性排除和历史上代表性不足的人\n* 及以上所有的交叉复合的人\n\n我们意识到用来描述我们各自身份的术语的复杂性。语言是微妙的、不断发展的，且常常存在争议。这并不是一个详尽的列表。我们努力给予命名，并对我们的承诺及 p5.js 社区的多样需求承担责任。\n\n### 示例\n\n我们认为以下举措有助于增加可及性：\n\n* 将文档和其他资料翻译成更多的语言，从而解构语言帝国主义[^4]（例如，Rolando Vargas 的[用库纳语编程](https://medium.com/@ProcessingOrg/culture-as-translation-processing-in-kuna-language-with-rolando-vargas-and-edinson-izquierdo-8079f14851f7/)，Felipe Santos Gomes, Julia Brasil, Katherine Finn Zander, 和 Marcela Mancino 的[为葡萄牙语用户的 Pê Cinco：国际化与普及](https://medium.com/processing-foundation/translating-p5-js-into-portuguese-for-the-brazilian-community-14b969e77ab1/)）\n* 改进对辅助技术的支持，比如屏幕阅读器（例如，Katie Liu 的[在 p5.js 中添加 Alt 文本](https://medium.com/processing-foundation/adding-alt-text-e2c7684e44f8/)，Claire Kearney-Volpe 的[ p5 可及性项目](https://medium.com/processing-foundation/p5-accessibility-115d84535fa8/)）\n* 遵循我们工具中的[网络内容无障碍指南](https://www.w3.org/TR/WCAG21/)，并致力于让用户在其项目中更轻松地遵守这些准则\n* 让 p5.js 的错误信息对使用该工具的人士更为友好和获取更多支持。（例如，[ p5.js 友好错误系统(FES)](https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md)）\n* 在创意编程和数字艺术领域历史上被排除和边缘化的社区内指导和支持 p5.js 的学习者\n* 举办社区活动（例如，[ p5.js 无障碍日 2022](https://p5js.org/community/p5js-access-day-2022.html)，[我们想要的网络：p5.js x W3C TPAC 2020](https://medium.com/processing-foundation/p5-js-x-w3c-tpac-bee4c621a053/)），采用以可及为中心的组织策略（例如，美国手语翻译，实时字幕，无障碍场地）\n* 支持创建教育资源（例如，Adekemi Sijuwade-Ukadike 的[可及性教学大纲](http://a11ysyllabus.site/)）\n* 发布我们的工作文档和报告，遵循 WCAG 指南，使用简明语言，专注于来自多样经历的初学者（例如，[ OSACC p5.js 访问报告](https://github.com/processing/OSACC-p5.js-Access-Report/)）\n\n## 维护\n\n我们不接受那些不支持我们增加可及性努力的功能请求。你将在我们的 issue 和 PR 模板中看到这一标准的体现。我们还确认了保持 p5.js 现有功能集的意图。我们愿意修复代码库中任何区域的错误。我们相信工具的一致性将使其对初学者更加易用。提升易用性的功能请求示例包括：\n为使用性能较低硬件的人提升性能（例如，支持向帧缓冲区绘制/从帧缓冲区读取）\nAPI 的一致性（例如，添加 arcVertex() 函数以通过 beginShape()/endShape() 创建弧线）\n\n***\n\n请将此视为一份“不断发展中的文档”。我们将持续讨论并优先考虑可及性的含义。我们邀请我们的社区参与讨论这份文档及其所描述的价值观。如果你有任何想法或建议，欢迎通过在 Github 上提交 issue 或通过发送电子邮件至 [hello@p5js.org](mailto:hello@p5js.org) 与我们分享。\n\n这个版本的 p5.js 可及性声明是在2023年开源艺术贡献者大会上，与 Evelyn Masso、Nat Decker、Bobby Joe Smith III、Sammie Veeler、Sonia (Suhyun) Choi、Xin Xin、Kate Hollenbach、Lauren Lee McCarthy、Caroline Sinders、Qianqian Ye、Tristan Jovani Magno Espinoza、Tanvi Sharma、Tsige Tafesse 和 Sarah Ciston 的合作下修订的。它在 Bobby Joe Smith III 和 Nat Decker 的 Processing Foundation 研究奖金支持下完成并发布。\n\n[^1]: Crenshaw, Kimberlé (1989)。\"Demarginalizing the intersection of race and sex: a black feminist critique of antidiscrimination doctrine, feminist theory and antiracist politics\"。芝加哥大学法律论坛。1989 (1): 139–167。ISSN 0892-5593。全文在 Archive.org。\n\n[^2]: 大写的 ‘D’Deaf 指的是文化上属于 Deaf 社区的人，而小写的 ‘d’deaf 是一个听力学术语，可以描述不与 Deaf 身份相关联的人。\n\n[^3]: 在残疾社区内，对于‘以人为本’与‘以身份为先’语言的偏好存在分歧。阅读[在自闭症社区中关于以人为本与以身份为先语言的辩论解包](https://news.northeastern.edu/2018/07/12/unpacking-the-debate-over-person-first-vs-identity-first-language-in-the-autism-community/) 和[我是残疾人：关于身份先行与人先行语言的讨论](https://thebodyisnotanapology.com/magazine/i-am-disabled-on-identity-first-versus-people-first-language/)。\n\n[^4]: 语言帝国主义或语言霸权，指的是某些语言（如英语）由于帝国扩张和全球化而持续的统治/优先/强加，以牺牲本土语言为代价的现象。\n"},"为 p5.js 参考文献做贡献\n":{"relativeUrl":"/contribute/contributing_to_the_p5js_reference","description":"{/* 使用正确的格式编写和编辑 p5.js 参考资料。 */}\n\n\n\n在 p5.js 中，我们通过在库的源代码中包含专门的注释，来编写你在 p5.js 网站上看到的[参考文献](https://p5js.org/reference/)页面上的代码参考。这些参考注释包括描述、函数签名（其参数和返回值）和使用示例。换句话说，每个 p5.js 函数/变量的参考页面上的内容都是从源代码中的参考注释构建的。\n\n本文档将向你展示如何编写和格式化参考注释，以便最终能够正确地呈现到网站上。每当你编辑或编写任何 p5.js 函数或变量的参考时，都应遵循此指南。\n\n## 关于参考注释如何工作的简要介绍\n\n当你查看 p5.js 的源代码时，你会看到库中许多行都是参考注释；它们看起来像这样：\n\n```\n/**\n * Calculates the sine of an angle. `sin()` is useful for many geometric tasks\n * in creative coding. The values returned oscillate between -1 and 1 as the\n * input angle increases. `sin()` takes into account the current\n *
angleMode.\n *\n * @method sin\n * @param {Number} angle the angle.\n * @return {Number} sine of the angle.\n *\n * @example\n *
\n * \n * function draw() {\n * background(200);\n *\n * let t = frameCount;\n * let x = 50;\n * let y = 30 * sin(t * 0.05) + 50;\n * line(x, 50, x, y);\n * circle(x, y, 20);\n *\n * describe('A white ball on a string oscillates up and down.');\n * }\n * \n *
\n *\n *
\n * \n * function draw() {\n * let x = frameCount;\n * let y = 30 * sin(x * 0.1) + 50;\n * point(x, y);\n *\n * describe('A series of black dots form a wave pattern.');\n * }\n * \n *
\n *\n *
\n * \n * function draw() {\n * let t = frameCount;\n * let x = 30 * cos(t * 0.1) + 50;\n * let y = 10 * sin(t * 0.2) + 50;\n * point(x, y);\n *\n * describe('A series of black dots form an infinity symbol.');\n * }\n * \n *
\n */\n```\n\n实际定义函数的 JavaScript 代码往往紧随其后。参考注释始终以 `/**` 开始并以 `*/` 结束，两者之间的每一行都以 `*` 开头。\n\n这种形式的代码块中的任何内容都将被解释为参考文献。你可能通过 [JSDoc](https://jsdoc.app/) 已熟悉这种样式的代码注释。虽然 p5.js 不使用 JSDoc，但它使用了一个非常相似的工具，叫做 [YUIDoc](https://yui.github.io/yuidoc/)，它具有非常相似的参考语法。在这种参考注释样式中，每个注释块进一步分成各个元素，我们将在下面看一下。\n\n## 参考注释块\n\n让我们解析上面 `sin()` 函数的参考注释块，并查看每个部分的作用。你可以将此处的注释与参考页面上的[`sin()`](https://p5js.org/reference/#/p5/sin/)进行比较。\n\n```\n/**\n * Calculates the sine of an angle. `sin()` is useful for many geometric tasks\n * in creative coding. The values returned oscillate between -1 and 1 as the\n * input angle increases. `sin()` takes into account the current\n *
angleMode.\n```\n\n在注释的顶部是函数的文本描述。此描述可以包含 markdown 语法和 HTML。描述应该简洁明了，描述函数的功能，并在必要时描述一些有关其性能或反常行为的细节。\n\n```\n * @method sin\n * @param {Number} angle the angle.\n * @return {Number} sine of the angle.\n```\n\n函数通常具有上述三个部分，每个部分以 `@` 符号开始，后跟以下关键字之一：\n\n* `@method` 用于定义函数的名称，在本例中是 `sin`（注意函数名称不包括括号 `()`）。\n* `@param` 用于定义函数接受的参数或参数。\n * 在关键字 `@param` 之后，存储在花括号 `{}` 中的是参数的类型。\n * 在类型之后，下一个单词（angle）是参数的名称。\n * 名称之后，该行的其余部分是参数的描述。\n* `@return` 用于定义函数的返回值。\n * 在关键字 `@return` 之后，存储在花括号 `{}` 中的是返回值的类型。\n * 在类型之后，该行的其余部分是返回值的描述。\n\n对于参数，通常应遵循以下格式：\n\n```\n@param {type} name Description here.\n```\n\n如果参数是可选的，请在名称周围添加方括号：\n\n```\n@param {type} [name] Description here.\n```\n\n### 额外信息：常量\n\n如果参数接受在 [`constants.js`](https://github.com/processing/p5.js/blob/main/src/core/constants.js) 中定义的一个或多个值，则类型应指定为 `{Constant}`，并在关键字 `either` 后的注释中枚举有效值，例如：\n\n```\n@param {Constant} horizAlign horizontal alignment, either LEFT, CENTER, or RIGHT\n```\n\n对于返回类型，应遵循以下格式：\n\n```\n@return {type} Description of the data returned.\n```\n\n如果函数不返回值，则可以省略 `@return` 标签。\n\n### 额外信息：链式\n\n如果方法返回父对象，则可以跳过 `@return` 标签，并改为添加以下行：\n\n```\n@chainable\n```\n\n## 其他签名\n\n如果一个函数有多个可能的参数选项，则可以分别指定每个参数。例如，[`background()`](http://p5js.org/reference/#p5/background/) 函数有许多不同的参数选项（请参阅参考页面上的“语法”部分）。选择一个版本以使用上面的模板列出作为第一个签名。在第一个参考注释块的末尾，你可以添加额外的签名，每个签名都在自己的块中，仅使用以下示例中的 `@method` 和 `@param` 标签。\n\n```\n/**\n * @method background\n * @param {String} colorstring color string, possible formats include: integer\n * rgb() or rgba(), percentage rgb() or rgba(),\n * 3-digit hex, 6-digit hex\n * @param {Number} [a] alpha value\n */\n\n/**\n * @method background\n * @param {Number} gray specifies a value between white and black\n * @param {Number} [a]\n */\n```\n\n### 额外信息：多个签名\n\n如果两个签名之间唯一的区别是添加了一个可选参数，则不必创建单独的签名。如果可能的话，请限制使用此功能，因为它可能会在参考文献中制造不必要的干扰信息或相似信息。\n\n## p5.js 变量的参考文献\n\n到目前为止，我们已经看过了如何为函数和常量编写参考文献。变量遵循相同的结构，但使用不同的标签。\n\n```\n/**\n * The system variable mouseX always contains the current horizontal\n * position of the mouse, relative to (0, 0) of the canvas. The value at\n * the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL.\n * If touch is used instead of mouse input, mouseX will hold the x value\n * of the most recent touch point.\n *\n * @property {Number} mouseX\n * @readOnly\n *\n * @example\n *
\n * \n * // Move the mouse across the canvas\n * function draw() {\n * background(244, 248, 252);\n * line(mouseX, 0, mouseX, 100);\n * describe('horizontal black line moves left and right with mouse x-position');\n * }\n * \n *
\n */\n```\n\n块的开始包含变量的描述（在该例子中是 `mouseX`）。为了定义变量的名称，我们使用 `@property` 而不是 `@method`。`@property` 的语法与 `@param` 类似，用于定义类型及其名称。大多数 p5.js 变量都带有 `@readonly` 标签，用于内部指示该值不应由库用户直接覆盖。\n\n## 添加示例\n\n`sin()` 和 `mouseX` 的参考注释中，都有一个我们还没有讨论过的 `@example` 标签。这个标签是你定义访问参考页面时运行的代码示例的地方。\n\n\n\n创建以上示例的相关 `@example` 标签如下：\n\n```\n * @example\n *
\n * \n * const c = color(255, 204, 0);\n * fill(c);\n * rect(15, 20, 35, 60);\n * // Sets 'redValue' to 255.\n * const redValue = red(c);\n * fill(redValue, 0, 0);\n * rect(50, 20, 35, 60);\n * describe(\n * 'Two rectangles with black edges. The rectangle on the left is yellow and the one on the right is red.'\n * );\n * \n *
\n```\n\n在 `@example` 标签之后，你应该开始一个 HTML `
` 标签，后跟一个 `
` 标签。在开放和闭合的 `` 标签之间，你将插入相关示例代码。编写参考示例代码的基本原则是保持简单和简洁。示例应该有意义，并解释功能的工作原理，而不会太复杂。示例的画布应该是 100x100 像素，如果没有包含 `setup()` 函数，例如上面的示例，则代码将自动包装在一个默认的 100x100 像素灰色背景画布中创建的 `setup()` 函数中。我们不会在这里详细讨论示例代码的最佳实践和代码风格；请参阅参考样式指南。\n\n你可以为一个功能添加多个示例。为此，添加一个额外的 `` 和 `
` HTML 块，直接放在第一个关闭后，中间用一个空行分隔。\n\n```\n* @example\n* \n* \n* arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);\n* describe('An ellipse created using an arc with its top right open.');\n* \n*
\n*\n* \n* \n* arc(50, 50, 80, 80, 0, PI, OPEN);\n* describe('The bottom half of an ellipse created using arc.');\n* \n*
\n```\n\n如果你不希望参考页面执行示例代码（即，你只希望代码显示出来），请在 `` 中包含 “`norender`” 类：\n\n```\n* @example\n*
\n* \n* arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);\n* describe('ellipse created using arc with its top right open');\n* \n*
\n```\n\n如果你不希望示例作为自动化测试的一部分运行（例如，如果示例需要用户交互），请在 `
` 中包含 `“notest”` 类：\n\n```\n* @example\n*
\n* function setup() {\n* let c = createCanvas(100, 100);\n* saveCanvas(c, 'myCanvas', 'jpg');\n* }\n*
\n```\n\n如果你的示例使用外部素材文件，请将它们放入 [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets/) 文件夹中（或者重用其中已有的文件），然后在代码中使用 \"assets/filename.ext\" 链接到它们。请参阅 [tint()](http://p5js.org/reference/#/p5/tint/) 参考示例。\n\n### 使用 `describe()` 添加画布描述\n\n最后，对于你添加的每个示例，都需要使用 p5.js 函数 `describe()` 来创建一个屏幕阅读器可访问的画布描述。只包括一个参数：一个字符串，其中简要描述了画布上发生的事情。\n\n```\n* @example\n*
\n* \n* let xoff = 0.0;\n* function draw() {\n* background(204);\n* xoff = xoff + 0.01;\n* let n = noise(xoff) * width;\n* line(n, 0, n, height);\n* describe('A vertical line moves randomly from left to right.');\n* }\n* \n*
\n*\n*
\n* \n* let noiseScale = 0.02;\n* function draw() {\n* background(0);\n* for (let x = 0; x < width; x += 1) {\n* let noiseVal = noise((mouseX + x) * noiseScale, mouseY * noiseScale);\n* stroke(noiseVal*255);\n* line(x, mouseY + noiseVal * 80, x, height);\n* }\n* describe('A horizontal wave pattern moves in the opposite direction of the mouse.');\n* }\n* \n*
\n```\n\n有关 `describe()` 的更多信息，请访问 [网络无障碍贡献者文档](https://p5js.org/contributor-docs/#/web_accessibility?id=user-generated-accessible-canvas-descriptions)。\n\n以上就是你编写和编辑 p5.js 参考注释的大多数方法。然而，还有一些 JSDoc 样式参考注释的更多专门用法，你可能会在 p5.js 中遇到。这些在某些情况下很有用，但通常不是你经常需要的东西。\n\n### `@private` 标签\n\n如果属性或变量是私有函数或变量，则可以使用 `@private`。如果将功能标记为 `@private`，则不会将其作为渲染的参考的一部分包含在网站上。使用 `@private` 标签将参考注释块标记为私有的原因是当你记录库本身的内部功能时。例如，参考下面的 `_start` 的参考注释：\n\n```\n/**\n * _start calls preload() setup() and draw()\n *\n * @method _start\n * @private\n */\np5.prototype._start = function () {\n```\n\n### `@module` 和相关标签\n\n每个源代码文件的顶部都将有一个 `@module` 标签。模块对应于 p5.js 中的一组功能，在网站上呈现的渲染的参考页面将这些功能分成相应的部分。在每个模块中，使用 `@submodule` 标签定义额外的子模块。\n\n`@for` 标签定义此模块与整体 `p5` 类之间的关系，有效地表示此模块是 `p5` 类的一部分。\n\n`@requires` 标签定义当前模块依赖的所需导入模块。\n\n```\n/**\n * @module Color\n * @submodule Creating & Reading\n * @for p5\n * @requires core\n * @requires constants\n */\n```\n\np5.js 遵循的约定是 `src/` 文件夹中的每个子文件夹将是一个 `@module`，而子文件夹中的每个文件将是该子文件夹的 `@module` 下的一个 `@submodule`。除非你正在向 p5.js 源代码添加新的子文件夹/文件，否则你不应直接编辑此参考注释块中的文件。\n\n### `@class` 标签\n\n使用 `@class` 标签和 `@constructor` 标签定义类构造函数。此块的格式类似于使用 `@method` 块定义函数的方式，类的名称将需要使用 `@class` 标签定义，而 `@constructor` 标签将指示类具有构造函数。参见下面的示例 `p5.Color` 类：\n\n```\n/**\n * A class to describe a color. Each `p5.Color` object stores the color mode\n * and level maxes that were active during its construction. These values are\n * used to interpret the arguments passed to the object's constructor. They\n * also determine output formatting such as when\n *
saturation() is called.\n *\n * Color is stored internally as an array of ideal RGBA values in floating\n * point form, normalized from 0 to 1. These values are used to calculate the\n * closest screen colors, which are RGBA levels from 0 to 255. Screen colors\n * are sent to the renderer.\n *\n * When different color representations are calculated, the results are cached\n * for performance. These values are normalized, floating-point numbers.\n *\n *
color() is the recommended way to create an instance\n * of this class.\n *\n * @class p5.Color\n * @constructor\n * @param {p5} [pInst] pointer to p5 instance.\n *\n * @param {Number[]|String} vals an array containing the color values\n * for red, green, blue and alpha channel\n * or CSS color.\n */\n```\n\n## 生成和预览参考文献\n\np5.js 存储库已经设置好，可以生成和预览参考文献，而不需要构建和运行 p5.js 网站。\n\n* 从源代码中的参考注释生成参考文献的主要命令是运行以下命令。\n\n```\nnpm run docs\n```\n\n这将生成必要的预览文件和主 `docs/reference/data.json` 文件，这个文件（在缩小后）将用于在网站上呈现参考页面。\n\n* 为了持续修改完善参考文献，你可以运行以下命令。\n\n```\nnpm run docs:dev\n```\n\n这将启动一个渲染参考文献的实时预览，每次你进行更改时都会更新（你需要在进行更改后刷新页面才能看到它们）。对于在浏览器中预览示例代码来说，这特别有用。\n\n* 主要的模板文件存储在 `docs/` 文件夹中，在大多数情况下，你不应直接更改此文件夹中的文件，除非是要在 `docs/yuidoc-p5-theme/assets` 文件夹中添加新的文件。\n\n## 下一步\n\n有关参考系统的详细信息，你可以查看[JSDoc](https://jsdoc.app/) 和 [YUIDoc](https://yui.github.io/yuidoc/) 的文档。\n\n有关参考资料相关 issue 的示例，请查看[#6519](https://github.com/processing/p5.js/issues/6519/) 和 [#6045](https://github.com/processing/p5.js/issues/6045/)。[贡献者指南](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md) 文档也是一个很好的起点。\n"},"贡献者指南\n":{"relativeUrl":"/contribute/contributor_guidelines","description":"{/* 关于在 GitHub 上为 p5.js 做出贡献的重要信息。 */}\n\n\n\n欢迎来到 p5.js 贡献者指南！本文档适用于有意为 p5.js 贡献代码的新贡献者、希望复习一些技术步骤的贡献者、以及其他与为 p5.js 贡献代码相关的任何事情。\n\n如果你希望在 p5.js 代码库之外做出贡献（例如编写教程、规划教学课程、组织活动等），请查看其他相关页面。管理员或维护人员可以通过[管理员指南](../steward_guidelines/)查阅问题审核与拉取请求相关的内容。\n\n本文档尽管内容较多且覆盖面很广，但我们还是会尽量清晰地注明所有步骤和要点。你可以使用目录查找特定章节。如果文档中的某些章节与你要贡献的内容无关，可以选择跳过。\n\n**如果你是一个新贡献者，你可以从第一章节 “关于 Issues” 开始阅读。如果你想查看关于开发流程的详细指南，可以移步 “开发者快速入门指南” 章节**\n\n# 目录\n\n* [贡献者指南](#贡献者指南/)\n* [目录](#目录/)\n* [关于 Issues](#关于-issues/)\n * [所谓 “Issues” 是指什么？](#所谓-issues-是指什么/)\n * [Issue 模板](#issue-模板/)\n * [抓到个 bug](#抓到个-bug/)\n * [增强现有功能](#增强现有功能/)\n * [新功能开发请求](#新功能开发请求/)\n * [发起讨论](#发起讨论/)\n* [修改 p5.js 代码库](#修改-p5js-代码库/)\n * [必备条件](#必备条件/)\n * [介绍](#介绍/)\n * [开发者快速入门指南](#开发者快速入门指南/)\n * [使用 GitHub 的编辑功能](#使用-github-的编辑功能/)\n * [Fork p5.js 并在你的 Fork 中工作](#fork-p5js-并在你的-fork-中工作/)\n * [使用 GitHub 桌面版](#使用-github-桌面版/)\n * [使用 git 命令行界面](#使用-git-命令行界面/)\n * [代码库拆解](#代码库拆解/)\n * [构建设置](#构建设置/)\n * [Git 工作流程](#git-工作流程/)\n * [源代码](#源代码/)\n * [单元测试](#单元测试/)\n * [内联文档](#内联文档/)\n * [无障碍](#无障碍/)\n * [代码规范](#代码规范/)\n * [设计原则](#设计原则/)\n* [拉取请求](#拉取请求/)\n * [创建拉取请求](#创建拉取请求/)\n * [拉取请求信息](#拉取请求信息/)\n * [标题](#标题/)\n * [解决](#解决/)\n * [更改](#更改/)\n * [更改的截图](#更改的截图/)\n * [PR 检查列表](#pr-检查列表/)\n * [变基和解决冲突](#变基和解决冲突/)\n * [讨论和修改](#讨论和修改/)\n\n***\n\n# 关于 Issues\n\np5.js 的 GitHub 存储库上的大部分活动都发生在 Issues 板块，Issues 很可能也是你开始贡献过程的地方。\n\n## 所谓 “Issues” 是指什么？\n\n\n\n“Issues” 是 GitHub 上描述问题的帖子的通用名称。这个 Issue 可以是一份错误报告，一个添加新功能的请求、一个讨论、或任何与 p5.js 资料库开发有关的帖子。任意 GitHub 账号，乃至于机器人，都可以在每个问题下面评论！这里就是贡献者们讨论与本项目开发相关议题的地方。\n\n尽管提出问题可以有各种各样的理由，但我们通常只使用问题来讨论与 p5.js 源代码开发相关的主题。其他例如调试你个人的代码、邀请合作者加入你个人的项目或其他与上述主题无关的内容应该在[论坛](https://discourse.processing.com)或其他诸如[Discord](https://discord.gg/SHQ8dH25r9/)之类平台上讨论。\n\n我们创建了简单易用的 Issue 模板，助你判定某一主题到底是 GitHub 的问题，还是该在其他地方发布的问题！\n\n## Issue 模板\n\np5.js 的 Issue 模板不仅能助力管理员和维护者更好地理解和审核问题，更能助你更便捷地提出问题并获得答复。\n\n\n\n若要提交新的 Issue，请点进 p5.js 存储库的 ”Issues“ 选项卡，然后点击右侧的 “New issue”按钮。点击后，将显示几个不同的选项，每个选项对应一个相关的 Issue 模板，或者将你重新定向到其他适当的地方提交你的 Issue。建议你选择最贴近需求的选项，以确保你的问题能够迅速得到关注。\n\n\n\n### [抓到个 bug](https://github.com/processing/p5.js/issues/new?assignees=%5C\\&labels=Bug%5C\\&projects=%5C\\&template=found-a-bug.yml)\n\n当你在使用 p5.js 时遇到潜在的错误或某些现象与文档描述不符时，请使用[这个模版](https://github.com/processing/p5.js/issues/new?assignees=%5C\\&labels=Bug%5C\\&projects=%5C\\&template=found-a-bug.yml)。请注意，如果你是在调试代码且认为可能是你自己的代码出了问题，则应该先在[论坛](https://discourse.processing.org)上提问。\n\n该模板有以下字段需要填写：\n\n1. *p5.js 中与之最相关的子领域是？* - 回答该问题将触发自动标记功能，为问题打上相关的[标签](https://github.com/processing/p5.js/blob/main/contributor_docs/issue_labels.md)，这有助于我们更好地识别和回应你的问题。\n2. *p5.js 版本* - 你可以在`