diff --git a/contributor_docs/hi/contributing_documentation.md b/contributor_docs/hi/contributing_documentation.md
index 7163d02f47..37fc1d49a3 100644
--- a/contributor_docs/hi/contributing_documentation.md
+++ b/contributor_docs/hi/contributing_documentation.md
@@ -1,3 +1,5 @@
+# योगदान के लिए दस्तावेज़ीकरण
+
 नए शिक्षार्थियों और अनुभवी प्रोग्रामर के लिए समान रूप से प्रलेखन आवश्यक है। यह हमारे समुदाय को उन लोगों के लिए एक अनुकूल हाथ बढ़ाकर समावेशी बनाने में मदद करता है जो p5.js. से कम परिचित हैं। यह हमें कोड के साथ बग्स और मुद्दों को खोजने में भी मदद करता है, क्योंकि हम परीक्षण करते हैं और प्रलेखन करते समय चीजों को आज़माते हैं।
 
 प्रलेखन में योगदान देने के कई तरीके हैं:
diff --git a/contributor_docs/hi/creating_libraries.md b/contributor_docs/hi/creating_libraries.md
new file mode 100644
index 0000000000..02db16d0b8
--- /dev/null
+++ b/contributor_docs/hi/creating_libraries.md
@@ -0,0 +1,141 @@
+# लाइब्रेरी बनाना
+
+p5.js लाइब्रेरी कोड हो सकती है जो p5.js कोर फ़ंक्शनैलिटी को बढ़ाने या जोड़ने के लिए जावास्क्रिप्ट को विस्तारित करती है। इसमें दो प्रकार की लाइब्रेरी होती हैं। कोर लाइब्रेरीज (p5.Sound) p5.js डिस्ट्रीब्यूशन का हिस्सा होती हैं, जबकि योगदानीय लाइब्रेरीज सदस्यों के द्वारा विकसित, स्वामित्व, और रखी जाती हैं जो p5.js समुदाय के सदस्य होते हैं।
+
+यदि आपने एक लाइब्रेरी बनाई है और आप चाहते हैं कि इसे [p5js.org/libraries](https://p5js.org/libraries) पृष्ठ पर शामिल किया जाए, तो [इस फॉर्म](https://docs.google.com/forms/d/e/1FAIpQLSdWWb95cfvosaIFI7msA7XC5zOEVsNruaA5klN1jH95ESJVcw/viewform). को सबमिट करें।
+
+# एक नई लाइब्रेरी बनाएं
+
+यहां आपको जावास्क्रिप्ट लेखन और p5.js के साथ इस्तेमाल करने के कई तरीके मिलते हैं। यहां आपकी लाइब्रेरी को अच्छी तरह से काम करने के लिए कुछ नोट्स हैं।
+
+## कोड
+
+### आप p5.prototype में विधियों को जोड़कर p5 कोर फ़ंक्शनैलिटी को बढ़ा सकते हैं।
+
+उदाहरण के लिए, नीचे दिए गए कोड में dom.js में `createImg()` जोड़ा गया है जो DOM में [HTMLImageElement](https://developer.Mozilla.org/en-US/docs/Web/API/HTMLImageElement) जोड़ता है।
+
+
+  ```js
+  p5.prototype.createImg = function (src) {
+    const elt = document.createElement('img');
+    //const elt = new Image; // इसमें से एक को वृद्धि के लिए बहुत संक्षेपित विकल्प।
+
+    elt.src = src;
+    return addElement(elt, this);
+  };
+  ```
+ जब DOM लाइब्रेरी परियोजना में शामिल की जाती है, तो `createImg()` को `createCanvas()` या `background()` की तरह कॉल किया जा सकता है।
+
+### आंतरिक सहायकों के लिए आंतरिक फ़ंक्शन्स का उपयोग करें।
+
+उपयोगकर्ताओं द्वारा कॉल किए जाने की नहीं होने वाले फ़ंक्शन्स। उपरोक्त उदाहरण में `addElement()` [dom.js](https://GitHub.com/processing/p5.js/blob/main/src/dom/dom.js) में एक आंतरिक फ़ंक्शन है। इसे p5.prototype के साथ सार्वजनिक रूप से बांधा नहीं जाता है।
+
+### आप p5.js class को भी विस्तारित कर सकते हैं, उनके prototypes में विधियों को जोड़कर।
+
+नीचे दिए गए उदाहरण में, `p5.Element.prototype` को `html()` विधि के साथ विस्तारित किया गया है, जो तत्व के आंतरिक एचटीएमएल को सेट करता है।
+
+
+  ```js
+  p5.Element.prototype.html = function (html) {
+    this.elt.innerHTML = html;
+    //this.elt.textContent = html; // innerHTML के लिए बहुत सुरक्षित विकल्प।
+  };
+  ```
+
+### registerPreloadMethod() का उपयोग करें ताकि प्रीलोड() में कहा जा सके कि कौन-कौन से विधियों को कॉल किया जा सकता हैं।
+
+सामान्यत: कुछ एसिंक्रोनस फ़ंक्शन्स के साथ (जैसे कि ध्वनि, छवि, या अन्य बाह्य फ़ाइल लोड करना) में, एक विकल्पक स्थिति और एसिंक्रोनस विकल्प दोनों प्रदान किए जाते हैं। उदाहरण के लिए, `loadStrings(path, [callback])` एक वैकल्पिक दूसरे कॉलबैक आर्ग्यमेंट को स्वीकार करता है - एक फ़ंक्शन जो लोडStrings फ़ंक्शन पूर्ण होने के बाद कॉल होता है। हालांकि, एक उपयोगकर्ता इसे `preload()` में बिना कॉलबैक के भी कॉल कर सकता है, और p5.js `preload() `पूर्ण होने का इंतज़ार करेगा जब तक कि `setup()` में आगे नहीं बढ़ता है। यदि आप अपनी विधि को प्रीलोड() में बिना कॉलबैक के बुलाना चाहते हैं, तो आप `registerPreloadMethod()` के साथ अपनी विधि का नाम पंजीकृत कर सकते हैं, और इसे ~~(पूर्वनिर्धारित रूप से p5.prototype)~~ से गुजारने वाले प्रोटोटाइप ऑब्जेक्ट के साथ पास करें। नीचे के उदाहरण में "soundfile.js" (p5.sound लाइब्रेरी) में `loadSound()` को पंजीकृत करने की एक पंक्ति है।
+
+
+  ```js
+  p5.prototype.registerPreloadMethod('loadSound', p5.prototype);
+  ```
+
+### आंतरिक कॉलबैक और preload() के लिए एसिंक फ़ंक्शन का उदाहरण।
+
+```js
+// preload() या कॉलबैक के साथ एसिंक फ़ंक्शन का उदाहारण।
+p5.prototype.getData = function (callback) {
+  /// एक ऑब्जेक्ट बनाएं जो एसिंक फ़ंक्शन से डेटा को क्लोन करेगा और इसे लौटाएगा।
+  // हमें उस ऑब्जेक्ट को नीचे अपडेट करने की आवश्यकता है, उसे पुनर-निर्धारित करने/पुनर-असाइन करने की नहीं।
+  // यह preload() के लिए महत्वपूर्ण है क्योंकि असली पॉइंटर/रेफरेंस को सहेजने के लिए।
+  // Const के साथ चर नाम घोषित करने से यह सुनिश्चित होता है कि उन्हें भूल से पुनर-निर्धारित नहीं किया जाएगा।
+  const ret = {};
+  // आपके साथ काम कर रहे कुछ एसिंक फ़ंक्शन।
+  loadDataFromSpace(function (data) {
+    // डेटा में गुणों में फ़ॉरच करें।
+    for (let prop in data) {
+      // Set the ret's properties to be the data's properties (cloning).
+      // That is, update empty ret object with properties from received data.
+      // You CANNOT overwrite/reassign ret with another object though.
+      // Rather its content needs to be updated with the data.
+      ret[prop] = data[prop];
+    }
+    // Check whether callback is indeed a function.
+    if (typeof callback == 'function') {
+      callback(data); // do the callback.
+    }
+  });
+  // Return the object which has been filled with the data above.
+  return ret;
+};
+```
+
+### registerMethod() और unregisterMethod() का उपयोग करके फ़ंक्शनों को p5 के साथ रजिस्टर और अनरजिस्टर करने के लिए।
+
+  ```js
+  p5.prototype.doRemoveStuff = function () { 
+  // लाइब्रेरी सफाई साफ-सफाई
+  };
+  p5.prototype.registerMethod('remove', p5.prototype.doRemoveStuff);
+  // जब यह और आवश्यक नहीं हो, तो फिर मैथड को अनरजिस्टर करें।
+  p5.prototype.unregisterMethod('remove', p5.prototype.doRemoveStuff);
+  ```
+
+रजिस्टर और अनरजिस्टर करने के लिए आपके पास निम्नलिखित सूची के साथ फ़ंक्शन नाम हैं। ध्यान दें कि आपको फ़ंक्शन को पहले परिभाषित करना हो सकता है:
+
+  * **pre** — `draw()` के शुरुआत में कॉल किया जाता है। यह  चित्रण पर प्रभाव डाल सकता है।
+  * **post** — `draw()` के अंत में कॉल किया जाता है।
+  * **remove** — `remove()` को कॉल करने पर कॉल किया जाता है।
+  * **init** — स्केच को पहली बार शुरू करते समय कॉल किया जाता है, स्केच प्रारंभीकरण फ़ंक्शन (जो `p5` कंस्ट्रक्टर में पारित किया गया था) के निष्पादन से पहले। यह भी किसी भी वैश्विक मोड सेटअप से पहले कॉल किया जाता है, ताकि आपकी लाइब्रेरी स्केच में कुछ भी जोड़ सके और यदि वैश्विक मोड सक्रिय है तो यह स्वचालित रूप से `विंडो` में कॉपी हो जाए।
+  * **beforePreload** — `preload()` फ़ंक्शन के पहले कॉल किया जाता है।
+  * **afterPreload** — `preload()` फ़ंक्शन के बाद कॉल किया जाता है।
+  * **beforeSetup** — `setup()` फ़ंक्शन के पहले कॉल किया जाता है।
+  * **afterSetup** — `setup()` फ़ंक्शन के बाद कॉल किया जाता है।
+
+जल्द ही इस सूची के साथ और भी आएगा: https://GitHub.com/processing/processing/wiki/Library-Basics#library-methods
+
+
+### आप अपनी खुद की classes भी बना सकते हैं।
+
+आपकी लाइब्रेरी संभाल सकती है कि वह पूरी तरह से p5 या p5 classes को नहीं बढ़ाती है, बल्कि केवल उपयोगकर्ताओं को उससे संबंधित classes प्रदान करती है। या यह दोनों का मिश्रण कर सकती है।
+
+## नामकरण
+
+* **p5 फ़ंक्शन या गुण अधिरोहित न करें।** जब आप p5.prototype को विस्तारित कर रहे होते हैं, ध्यान दें कि आप मौजूदा गुणों या फ़ंक्शनों के नामों का उपयोग नहीं कर रहे हैं। आप [hasOwnProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty) का उपयोग नामों की जांच के लिए कर सकते हैं। उदाहारण के लिए, निम्नलिखित लाइन आपके लाइब्रेरी फ़ाइल के शीर्ष में रखने पर सत्य प्रिंट करेगी क्योंकि `rect()` विधि मौजूद है:
+
+
+  ```js
+  console.log(p5.prototype.hasOwnProperty('rect'));
+  ```
+
+* **उसी तरह, p5 कक्षा के फ़ंक्शन या गुणों को अधिरोपित न करें।** यदि आप p5.Image, p5.Vector, p5.Element आदि को विस्तारित कर रहे हैं, तो उपर दिए गए प्रोटोकॉल का पालन करें।
+
+* **p5.js के दो मोड होते हैं, ग्लोबल मोड और इंस्टेंस मोड।** ग्लोबल मोड में, सभी p5 गुण और विधियां विंडो ऑब्जेक्ट से जुड़ी होती हैं, जिससे उपयोगकर्ता को `background()` जैसी विधियों को किसी भी चीज़ के साथ प्रिफ़िक्स किए बिना बुलाने का सुविधानुसार कार्य कर सकता है। हालांकि, इसका मतलब है कि आपको सावधान रहना चाहिए कि आप प्राकृतिक JavaScript कार्यक्षमता को अधिरोपित नहीं कर रहे हैं। आप इसे कन्सोल में लिखकर या एक तेज़ गूगल सर्च के साथ मौजूद JS नामों का परीक्षण कर सकते हैं।
+
+* **कक्षाएँ सामान्यत: मेज़केस, और विधियाँ छोटे अक्षरों से शुरू होती हैं।** p5 में कक्षाएँ p5 के साथ प्रारंभ होती हैं। हम चाहेंगे कि इस नामकक्ष को केवल p5 कोर कक्षाओं के लिए ही बनाए रखें, इसलिए जब आप अपने खुद के बना रहे हैं, **कृपया कक्षा नामों के लिए p5. प्रीफ़िक्स शामिल न करें।** आप अपना खुद का प्रीफ़िक्स बना सकते हैं, या उन्हें बिना प्रीफ़िक्स के नाम दे सकते हैं।
+
+* **p5.js लाइब्रेरी फ़ाइलों का नाम भी p5 के साथ प्रीफ़िक्स के साथ है**, कक्षाओं से उन्हें भिन्न करने के लिए। उदाहरण के लिए, p5.sound.js। आपको अपनी फ़ाइलों के नाम को इसी प्रारूप का पालन करने के लिए प्रेरित किया जाता है।
+
+
+## पैकेजिंग
+
+* **एकल JS फ़ाइल बनाएं जिसमें आपकी पुस्तकालय हो।** इससे उपयोगकर्ताओं को इसे अपने परियोजनाओं में लिंक करना आसान होता है। आप एक सामान्य JS फ़ाइल और तेज लोडिंग के लिए [ मिनीफाइड ](http://jscompress.com/)संस्करण के लिएविकल्पों की भी सोच सकते हैं।
+
+* **योगदानित पुस्तकालयें उनके निर्माताओं द्वारा होस्ट की जाती हैं, उनके द्वारा दस्तावेजित की जाती हैं, और उनका रखरखाव किया जाता है।** यह GitHub पर, एक अलग वेबसाइट पर, या कहीं और हो सकता है।
+
+* **दस्तावेज़ीकरण महत्वपूर्ण है!** आपकी पुस्तकालय के लिए दस्तावेज़ सुबिधाजनक स्थान पर होना चाहिए ताकि उपयोगकर्ता जो पुस्तकालय डाउनलोड और उपयोग करते हैं, उन्हें आसानी से मिल सके। योगदानित पुस्तकालयों के लिए मुख्य p5.js संदर्भ में उनका वर्णन शामिल नहीं होगा, लेकिन आपको एक ही स्वरूप का पालन करना चाहिए। [यहां](http://p5js.org/reference/#/libraries/p5.sound) library का अवलोकन पृष्ठ, [ वर्ग का अवलोकन पृष्ठ](http://p5js.org/reference/#/p5.Vector), और [ विधि पृष्ठ](http://p5js.org/reference/#/p5/arc) के उदाहरण देखें।
+
+* **उदाहरण भी बढ़िया होते हैं!** वे लोगों को दिखाते हैं कि आपकी पुस्तकालय क्या कर सकती है। क्योंकि यह सब जावास्क्रिप्ट है, लोग उन्हें ऑनलाइन डाउनलोड करने से पहले ऑनलाइन देख सकते हैं। [jsfiddle](http://jsfiddle.net/) और [codepen](http://codepen.io) उदाहरण होस्ट करने के लिए दो शानदार विकल्प हैं।
+
+* **हमें बताएं!** जब आपकी libraries वितरण के लिए तैयार हो जाए, [hello@p5js.org](mailto:hello@p5js.org) पर एक लिंक और कुछ जानकारी भेजें। हम इसे [libraries पृष्ठ](http://p5js.org/libraries/) में शामिल करेंगे!
\ No newline at end of file
diff --git a/contributor_docs/hi/custom_p5_build.md b/contributor_docs/hi/custom_p5_build.md
new file mode 100644
index 0000000000..de674584f6
--- /dev/null
+++ b/contributor_docs/hi/custom_p5_build.md
@@ -0,0 +1,44 @@
+# चुनिंदा घटकों के साथ p5.js का एक कस्टम बिल्ड बनाना
+
+## अवलोकन
+
+p5.js का एक उत्कृष्ट नया [फ़ीचर](https://github.com/processing/p5.js/pull/2051) उपयोगकर्ता को इसके मॉड्यूल के कस्टम संयोजन के रूप में p5.js बनाने की अनुमति देता है। यह लाइब्रेरी के उत्पादन संस्करण के आकार को कम करने में बहुत मदद करता है, साथ ही समग्र प्रदर्शन में सुधार करता है।
+
+यह सुविधा Google Summer of Code 2017 के प्रस्ताव के एक भाग के रूप में सुझाई गई थी।
+
+## उपयोग
+
+वर्तमान में, उपयोग कमांड लाइन से मैन्युअल रूप से ग्रंट कार्य को लागू करने के माध्यम से होता है:
+
+```sh
+git clone https://github.com/processing/p5.js.git
+cd p5.js
+npm ci
+npm run grunt
+npm run grunt combineModules:module_x:module_y
+```
+
+यहां, `module_n` उन मॉड्यूल के नाम को संदर्भित करता है जिन्हें आप चुनना चाहते हैं। जैसा कि ऊपर दिखाया गया है, एकाधिक मॉड्यूल पारित किए जाने चाहिए। साथ ही, सही ढंग से काम करने के लिए इन मॉड्यूल का नाम `/src` निर्देशिका में उनके फ़ोल्डरों के समान होना चाहिए। जबकि `कोर` को डिफ़ॉल्ट रूप से शामिल किया गया है, `कोर/शेप` को काम करने के लिए लाइन() और अन्य मुख्य विशेषताओं जैसे आकारों के लिए शामिल करने की आवश्यकता है।
+
+उपरोक्त उपयोग उदाहरण संभवतः पूर्ण `p5.min.js` से बड़ा `p5Custom.js` आउटपुट देगा क्योंकि `uglify` कार्य का उपयोग करके आउटपुट को छोटा नहीं किया गया है।
+
+बंडल आकार को यथासंभव कम करने के लिए अनुशंसित कदम हैं:
+
+```sh
+git clone https://github.com/processing/p5.js.git
+cd p5.js
+npm ci
+npm run grunt
+npm run grunt combineModules:min:module_x:module_y uglify
+```
+
+## उदाहरण
+
+- `एनपीएम रन ग्रंट कंबाइनमॉड्यूल: न्यूनतम: कोर/आकार: रंग: गणित: छवि बदसूरत`
+  CombinModules और uglify कार्यों के साथ `lib/modules` निर्देशिका में एक `p5Custom.min.js` बंडल बनाता है। ध्यान दें कि मॉड्यूल को `combineModules:min` के बाद सूचीबद्ध किया जाना चाहिए और `uglify` कार्य में मॉड्यूल सूची के बाद एक स्थान होना चाहिए।
+
+- `एनपीएम रन ग्रंट कंबाइन मॉड्यूल्स: कोर/शेप: कलर: मैथ: इमेज`
+  `lib/modules` निर्देशिका में एक गैर-मिनिफाइड `p5Custom.js` बंडल उत्पन्न करता है।
+
+- `एनपीएम रन ग्रंट कंबाइनमॉड्यूल: न्यूनतम: कोर/आकार: रंग: गणित: छवि`
+  `CombineModules:min` कार्य के साथ `lib/modules` निर्देशिका में `p5Custom.pre-min.js` उत्पन्न करता है। ध्यान दें कि इस उदाहरण में `npm run grunt uglify` को `combineModules:min` कार्य चलाने के बाद अलग से चलाया जा सकता है।
\ No newline at end of file
diff --git a/contributor_docs/hi/friendly_error_system.md b/contributor_docs/hi/friendly_error_system.md
new file mode 100644
index 0000000000..a9f90208f8
--- /dev/null
+++ b/contributor_docs/hi/friendly_error_system.md
@@ -0,0 +1,178 @@
+
+# 🌸 p5.js अनुकूल त्रुटि प्रणाली (FES)
+## अवलोकन
+
+फ्रेंडली एरर सिस्टम (FES, 🌸) का उद्देश्य सरल, मैत्रीपूर्ण भाषा में त्रुटि संदेश प्रदान करके नए प्रोग्रामर की मदद करना है। यह त्रुटि का वैकल्पिक विवरण और सहायक संदर्भों के लिंक जोड़कर आपके ब्राउज़र के कंसोल त्रुटि संदेशों को पूरक करता है।
+
+FES कंसोल विंडो में संदेशों को प्रिंट करता है, जैसा कि [p5.js वेब एडिटर] और आपके ब्राउज़र JavaScript कंसोल में देखा जाता है। p5 (p5.min.js) की एकल लघु फ़ाइल FES को छोड़ देती है।
+
+[p5.js वेब संपादक]: https://editor.p5js.org/
+
+## डिबगिंग में आने वाली बाधाओं को कम करना
+किसी उपकरण का डिज़ाइन उन लोगों की ज़रूरत से मेल खाना चाहिए जो इसका उपयोग करेंगे। एक उपकरण के रूप में जिसका लक्ष्य डिबगिंग में आने वाली बाधाओं को कम करना है, FES का डिज़ाइन कोई अपवाद नहीं है।
+
+हमारे मौजूदा डिज़ाइन का मूल्यांकन करने का सबसे अच्छा तरीका p5.js का उपयोग करने वाले लोगों से सीधे सुनना है। हमने फ्रेंडली एरर्स के लिए फीडबैक और भविष्य की शुभकामनाएं इकट्ठा करने के लिए 2021 में एक सामुदायिक सर्वेक्षण चलाया।
+
+हमारा मानना ​​है कि हमारे समुदाय के सदस्यों की अंतर्दृष्टि हमारे योगदानकर्ताओं के लिए उपयोगी होगी। आप सारांश कॉमिक या पूरी रिपोर्ट के माध्यम से परिणाम देख सकते हैं:
+* [21-22 एफईएस सर्वेक्षण रिपोर्ट कॉमिक]
+* [21-22 एफईएस सर्वेक्षण पूर्ण रिपोर्ट]
+
+
+[21-22 एफईएस सर्वेक्षण रिपोर्ट कॉमिक]: ​​https://almchung.github.io/p5jsFESsurvey/
+[21-22 एफईएस सर्वेक्षण पूर्ण रिपोर्ट]: https://observablehq.com/@almchung/p5-fes-21-survey
+
+## मैत्रीपूर्ण त्रुटि संदेश लिखना
+
+त्रुटि संदेशों को लिखकर और अनुवाद करके p5.js लाइब्रेरी में योगदान कैसे करें?
+
+FES p5.js के [अंतर्राष्ट्रीयकरण] प्रयास का एक हिस्सा है। हम सभी FES संदेशों की सामग्री [i18next]-आधारित `translator()` फ़ंक्शन के माध्यम से उत्पन्न करते हैं। यह गतिशील त्रुटि संदेश पीढ़ी अंग्रेजी सहित सभी भाषाओं के लिए होती है - p5.js की डिफ़ॉल्ट भाषा।
+
+हम दुनिया भर से योगदान का स्वागत करते हैं! 🌐
+
+[अंतर्राष्ट्रीयकरण]: https://github.com/processing/p5.js/blob/main/contributor_docs/internationalization.md
+[i18next]: https://www.i18next.com/
+
+#### सर्वोत्तम अभ्यास लिखना
+
+एफईएस संदेश लेखकों को त्रुटि संदेशों को समझने की बाधा को कम करने और डिबगिंग प्रक्रिया की पहुंच बढ़ाने को प्राथमिकता देनी चाहिए।
+
+
+[फ्रेंडली एरर्स i18n बुक] अंतर-सांस्कृतिक i18n संदर्भ में अनुकूल त्रुटि संदेश लिखने के लिए चुनौतियों और सर्वोत्तम प्रथाओं पर चर्चा करता है। यहाँ पुस्तक से कुछ बिंदु दिए गए हैं:
+
+* अपने दर्शकों को समझें: हमारे त्रुटि संदेशों के दर्शकों के बारे में धारणा न बनाएं। यह जानने का प्रयास करें कि हमारी लाइब्रेरी का उपयोग कौन कर रहा है और वे इसका उपयोग कैसे करते हैं।
+* भाषा को समावेशी रखें. हम त्रुटि संदेशों को "अनुकूल" बनाने का प्रयास करते हैं, आपके लिए इसका क्या अर्थ है? अपनी भाषा में संभावित पूर्वाग्रह और हानि की तलाश करें। [p5.js आचार संहिता] का पालन करें।
+* जब भी संभव हो सरल वाक्यों का प्रयोग करें। i18नेक्स्ट की [इंटरपोलेशन] सुविधा का सर्वोत्तम उपयोग करने के लिए अपने वाक्य को छोटे ब्लॉकों में तोड़ने पर विचार करें।
+* अंतर-सांस्कृतिक संचार को प्राथमिकता दें और विभिन्न भाषाओं में बेहतरीन अनुभव प्रदान करें। अलंकारों के प्रयोग से बचें.
+* एक समय में एक तकनीकी अवधारणा या तकनीकी शब्द का परिचय दें। तकनीकी लेखन में निरंतरता रखें. शुरुआती-अनुकूल भाषा में लिखे गए एक बाहरी संसाधन को बहुत सारे छोटे, व्यावहारिक उदाहरणों के साथ जोड़ने का प्रयास करें।
+
+[फ्रेंडली एरर्स i18n बुक]: https://almchung.github.io/p5-fes-i18n-book/
+[इंटरपोलेशन]: https://www.i18next.com/translation-function/interpolation
+[p5.js आचार संहिता]: https://github.com/processing/p5.js/blob/main/CODE_OF_CONDUCT.md#p5js-code-of-conduct
+[विशेषज्ञ ब्लाइंड स्पॉट]: https://tilt.colostate.edu/TipsAndGuides/Tip/181
+
+[फ्रेंडली एरर्स आई18एन बुक] एक सार्वजनिक परियोजना है, और आप इस अलग [रेपो] के माध्यम से पुस्तक में योगदान कर सकते हैं।
+
+[रेपो]: https://github.com/almchung/p5-fes-i18n-book
+
+[repo]: https://github.com/almchung/p5-fes-i18n-book
+
+
+#### अनुवाद फ़ाइलों का स्थान
+`translator()` i18next पर आधारित है और `src/core/internationalization.js` से आयातित है। यह JSON अनुवाद फ़ाइल से टेक्स्ट डेटा को देखकर संदेश उत्पन्न करता है:
+
+```
+translations/{{detected locale code, default=en}}/translation.json
+```
+
+उदाहरण:
+यदि पता लगाया गया ब्राउज़र स्थान कोरियाई है (भाषा निर्दिष्टकर्ता: `ko`), तो `translator()` `translations/ko/translation.json` से अनुवादित टेक्स्ट ब्लॉक में पढ़ा जाएगा। फिर `translator()` टेक्स्ट ब्लॉक को अंतिम संदेश में इकट्ठा करेगा।
+
+भाषा डिज़ाइनर में क्षेत्रीय जानकारी भी शामिल हो सकती है, जैसे `es-PE` (पेरू से स्पेनिश)।
+
+#### अनुवाद फ़ाइलों की संरचना
+`translation.json` में एक [i18next द्वारा प्रयुक्त प्रारूप](https://www.i18next.com/misc/json-format) है।
+
+अनुवाद फ़ाइल के आइटम के मूल प्रारूप में दोहरे उद्धरण चिह्नों `""` में एक कुंजी और एक मान (संदेश) होता है, जो घुंघराले कोष्ठक `{}` द्वारा बंद होता है:
+```json
+{ "key": "value" }
+```
+
+उदाहरण के लिए, हमारे पास ASCII लोगो इस प्रारूप में सहेजा गया है:
+```json
+"logo": "    _ \n /\\| |/\\ \n \\ ` ' /  \n / , . \\  \n \\/|_|\\/ \n\n"
+```
+i18next इंटरपोलेशन का समर्थन करता है, जो हमें गतिशील रूप से एक संदेश उत्पन्न करने के लिए एक वेरिएबल पास करने की अनुमति देता है। हम वेरिएबल का प्लेसहोल्डर सेट करने के लिए `{{}}` दो बार घुंघराले ब्रैकेट का उपयोग करते हैं:
+```json
+"greeting": "Hello, {{who}}!"
+```
+
+यहां, कुंजी `greeting` है, और वेरिएबल नाम `who` है।
+
+इस संदेश को गतिशील रूप से उत्पन्न करने के लिए, हमें एक मान पारित करने की आवश्यकता होगी:
+
+```JavaScript
+translator('greeting', { who: 'everyone' } );
+```
+
+`translator` द्वारा उत्पन्न परिणाम इस तरह दिखेगा:
+
+```
+Hello, everyone!
+```
+
+
+यहां `fes` के `fileLoadError` से एक आइटम है जो इंटरपोलेशन प्रदर्शित करता है:
+```json
+"image": "It looks like there was a problem loading your image. {{suggestion}}"
+```
+
+अंतिम संदेश को गतिशील रूप से उत्पन्न करने के लिए, FES कुंजी और पूर्व-निर्मित `suggestion` मान के साथ `translator()` को कॉल करेगा।
+
+```JavaScript
+translator('fes.fileLoadError.image', { suggestion });
+```
+
+#### How to Add or Modify Translation
+
+[अंतर्राष्ट्रीयकरण दस्तावेज़] में अनुवाद फ़ाइलों को जोड़ने और संशोधित करने के लिए चरण-दर-चरण मार्गदर्शिका है।
+
+[अंतर्राष्ट्रीयकरण दस्तावेज़]: https://github.com/processing/p5.js/blob/main/contributor_docs/internationalization.md
+
+## यह समझना कि एफईएस कैसे काम करता है
+इस अनुभाग में, हम इस बात का अवलोकन देंगे कि FES संदेशों को कैसे उत्पन्न और प्रदर्शित करता है। एफईएस कार्यों पर अधिक विस्तृत जानकारी के लिए, कृपया हमारा [एफईएस संदर्भ + देव नोट्स] देखें।
+
+[एफईएस संदर्भ + देव नोट्स]: https://github.com/processing/p5.js/tree/main/src/core/friendly_errors#fes-reference-and-notes-from-developers
+
+
+#### अवलोकन
+p5.js विभिन्न स्थितियों के लिए कई स्थानों से FES को कॉल करता है, जब:
+* ब्राउज़र एक त्रुटि देता है.
+* उपयोगकर्ता कोड p5.js API से एक फ़ंक्शन को कॉल करता है।
+* अन्य कस्टम मामले जहां उपयोगकर्ता को सहायता संदेश से लाभ होगा।
+
+#### एफईएस कोड स्थान
+आप एफईएस के मुख्य घटकों को अंदर पा सकते हैं:
+`src/core/friendly_errors`।
+आप `translator()`  द्वारा उपयोग की गई अनुवाद फ़ाइलें अंदर पा सकते हैं:
+`translations/`.
+
+#### एफईएस संदेश जेनरेटर
+ये फ़ंक्शन मुख्य रूप से त्रुटियों को पकड़ने और FES संदेश उत्पन्न करने के लिए जिम्मेदार हैं:
+* [`_friendlyFileLoadError()`] फ़ाइल लोडिंग त्रुटियों को पकड़ता है।
+* [`_validateParameters()`] इनलाइन दस्तावेज़ों के आधार पर p5.js फ़ंक्शन के इनपुट पैरामीटर की जाँच करता है।
+* [`_fesErrorMontitor()`] वैश्विक त्रुटियों को संभालता है।
+
+पूर्ण संदर्भ के लिए, कृपया हमारे [डेव नोट्स] देखें।
+
+[`_friendlyFileLoadError()`]: https://github.com/processing/p5.js/blob/main/contributor_docs/fes_reference_dev_notes.md#_friendlyfileloaderror
+[`_validateParameters()`]: https://github.com/processing/p5.js/blob/main/contributor_docs/fes_reference_dev_notes.md#validateparameters
+[`_fesErrorMontitor()`]: https://github.com/processing/p5.js/blob/main/contributor_docs/fes_reference_dev_notes.md#feserrormonitor
+[डेव नोट्स]: https://github.com/processing/p5.js/blob/main/contributor_docs/fes_reference_dev_notes.md
+
+
+#### एफईएस संदेश प्रदर्शक
+`fes_core.js/_friendlyError()` कंसोल में उत्पन्न अनुकूल त्रुटि संदेशों को प्रिंट करता है। उदाहरण के लिए:
+
+```JavaScript
+p5._friendlyError(
+  translator('fes.globalErrors.type.notfunc', translationObj)
+);
+```
+इस फ़ंक्शन को p5 में कहीं भी कॉल किया जा सकता है।
+
+## एफईएस को बंद करना
+ऐसे मामले हो सकते हैं जहां आप [प्रदर्शन के लिए FES को अक्षम करना](https://github.com/processing/p5.js/wiki/Optimize-p5.js-Code-for-Performance#disable-the-friendly-error-system-fes) चाहते हों।
+
+`p5.disableFriendlyErrors` आपको `true` पर सेट होने पर FES को बंद करने की अनुमति देता है।
+
+उदाहरण:
+
+```JavaScript
+p5.disableFriendlyErrors = true;
+
+function setup() {
+  createCanvas(100, 50);
+}
+```
+
+p5 की एकल लघु फ़ाइल (यानी, p5.min.js) स्वचालित रूप से FES को छोड़ देती है।
\ No newline at end of file
diff --git a/contributor_docs/hi/inline_documentation.md b/contributor_docs/hi/inline_documentation.md
new file mode 100644
index 0000000000..5dfbb211a1
--- /dev/null
+++ b/contributor_docs/hi/inline_documentation.md
@@ -0,0 +1,316 @@
+#  p5.js में  इन - लाइन दस्तावेज़ जोड़ना
+
+पी5.js स्रोत कोड में इनलाइन दस्तावेज़ीकरण जोड़कर, संदर्भ स्वचालित रूप से उत्पन्न किया जा सकता है। इस दस्तावेज़ीकरण में शामिल करने के लिए टैग और जानकारी को सही रूप से स्वरूपित करने के लिए नीचे दिए गए हैं। दस्तावेज़ीकरण स्रोत कोड से स्वचालित रूप से निर्मित होता है, इसलिए आपके दस्तावेज़ीकरण को संदर्भ में दिखने में कुछ दिनों तक का समय लग सकता है। यदि कुछ दिनों से अधिक समय हो गया है या आपको अन्य समस्याएँ हो रही हैं, तो [hello@p5js.org](mailto:hello@p5js.org)g पर ईमेल करें।
+
+यहां बुनियादी जानकारी है, yuidoc स्टाइल के अधिक विशेषताएँ [यहां देखें](http://yui.github.io/yuidoc/syntax/index.html)। 
+**कृपया 80 कॉलम तक रेखा लंबी न करें, नई लाइनें शुरू करें जब यह चला जाए।**
+
+[आवश्यक उदाहरणों की सूची](https://github.com/processing/p5.js/issues/2865) (आप इस सूची को बना कर देख सकते हैं या लॉग संदेशों को ग्रंट के साथ पुनर्निर्माण करके सबसे अद्यतित सूची देख सकते हैं)
+
+## तत्व प्रकार और विवरण निर्दिष्ट करें
+
+तत्व 4 प्रकार के होते हैं: `@class`, `@method`, `@property`, `@event`।
+दस्तावेज़ में तत्व को प्रदर्शित करने के लिए आपको इनमें से किसी एक को उसके बाद तत्व के नाम के साथ निर्दिष्ट करना होगा। विवरण शीर्ष पर दिखना चाहिए. कुछ स्वरूपण युक्तियाँ:
+
+*  आप विवरण पाठ को प्रारूपित करने के लिए मार्कडाउन सिंटैक्स का उपयोग कर सकते हैं।
+*  किसी भी फ़ंक्शन, वेरिएबल, या स्थिर नाम को दोनों तरफ सिंगल कोट्स का उपयोग करके `monospaced` किया जाना चाहिए।
+* डबल लाइन ब्रेक को नए पैराग्राफ के रूप में पहचाना जाता है। आपको `<br><br>` टैग डालने की आवश्यकता नहीं है।
+* जब संभव हो, अन्य फ़ंक्शन या वेरिएबल नामों का उल्लेख करते समय अन्य फ़ाइलों से लिंक करें। उदाहरण के लिए, आप [loadImage](https://github.com/processing/p5.js/blob/main/src/image/loading_displaying.js#L21) के विवरण में लिंक की गई प्रीलोड विधि देख सकते हैं।
+* अधिक सिंटैक्स जानकारी के लिए यहां [yuidoc का संदर्भ](http://yui.github.io/yuidoc/syntax/index.html#basic-requirements) है।
+
+```js
+   /**
+    * The x component of the vector
+    * @property x
+    * @type {Number}
+    */
+    this.x = x || 0;
+```
+
+```js
+
+  /**
+   * Draw an arc
+   *
+   * If x, y, width, height, start and stop are the only params provided, draws an
+   * open pie.
+   * If mode is provided draws the arc either open, chord or pie, dependant
+   * on the variable provided
+   *
+   * @param  {Number} x x-coordinate of the arc's ellipse
+   * @param  {Number} y y-coordinate of the arc's ellipse
+   * @param  {Number} width width of the arc's ellipse by default
+   * @param  {Number} height height of the arc's ellipse by default
+   * @param  {Number} start angle to start the arc, specified in radians
+   * @param  {Number} stop angle to stop the arc, specified in radians
+   * @param  {String} [mode] optional parameter to determine the way of drawing the arc
+   */
+```
+
+```js
+  /**
+   *
+   * Calculates the magnitude (length) of the vector and returns the result
+   * as a float (this is simply the equation <em>sqrt(x*x + y*y + z*z)</em>.)
+   *
+   * @method mag
+   * @return {number} magnitude (length) of the vector
+   */
+   PVector.prototype.mag = function () {
+    return Math.sqrt(this.magSq());
+   };
+```
+
+## पैरामीटर निर्दिष्ट करें
+
+विधियों के लिए, कोई भी `@params` निर्दिष्ट किया जाना चाहिए। उन्हें रिक्त स्थान, टैब आदि के साथ स्वरूपित नहीं किया जाना चाहिए और मानक का पालन करना चाहिए:
+```
+@param {type} name Description here, no problem how long.
+```
+
+यदि पैरामीटर वैकल्पिक है, तो नाम के चारों ओर वर्गाकार कोष्ठक जोड़ें:
+
+```
+@param {type} [name] Description here.
+```
+
+यदि पैरामीटर [`constents.js`](https://github.com/processing/p5.js/blob/main/src/core/constents.js) में परिभाषित एक या अधिक मान लेता है,
+तो प्रकार को `{स्थिर}` के रूप में निर्दिष्ट किया जाना चाहिए और मान्य मानों को `दोनों में से किसी एक' कीवर्ड के बाद टिप्पणी में गिना जाना चाहिए, उदाहरण के लिए:
+```
+@param {Constant} horizAlign horizontal alignment, either LEFT, CENTER, or RIGHT
+```
+## रिटर्न प्रकार निर्दिष्ट करें
+`@return` `@params` के समान है, लेकिन नाम के बिना। यह `@method` में अंतिम तत्व होना चाहिए। JS प्रकार हैं: स्ट्रिंग, संख्या, बूलियन, ऑब्जेक्ट, ऐरे, नल और अपरिभाषित। यदि कोई रिटर्न प्रकार नहीं है, तो `@return` शामिल न करें।
+```
+@return {type} Description of the data returned.
+```
+यदि विधि मूल ऑब्जेक्ट लौटाती है, तो आप `@return` को छोड़ सकते हैं और इसके बजाय इस पंक्ति को जोड़ सकते हैं:
+```
+@chainable
+```
+## अतिरिक्त हस्ताक्षर
+यदि किसी विधि में एकाधिक संभावित पैरामीटर विकल्प हैं, तो आप प्रत्येक को व्यक्तिगत रूप से निर्दिष्ट कर सकते हैं। उदाहरण के लिए, "सिंटैक्स" के अंतर्गत [पृष्ठभूमि](http://p5js.org/reference/#p5/background) के उदाहरण देखें। ऐसा करने के लिए, उपरोक्त दिशानिर्देशों का उपयोग करके पहले हस्ताक्षर के रूप में सूचीबद्ध करने के लिए एक संस्करण चुनें। दस्तावेज़ीकरण ब्लॉक के अंत में, आप नीचे दिए गए उदाहरण का अनुसरण करते हुए, प्रत्येक अपने स्वयं के ब्लॉक में अतिरिक्त हस्ताक्षर जोड़ सकते हैं।
+```js
+/**
+ * @method background
+ * @param {String} colorstring color string, possible formats include: integer
+ *                         rgb() or rgba(), percentage rgb() or rgba(),
+ *                         3-digit hex, 6-digit hex
+ * @param {Number} [a] alpha value
+ */
+
+/**
+ * @method background
+ * @param {Number} gray specifies a value between white and black
+ * @param {Number} [a]
+ */
+```
+टिप्पणियाँ:
+* यदि किसी पैरामीटर का विवरण पहले दिया गया था, जैसे इस मामले में `a`, तो आपको उसके विवरण को दोबारा लिखने की आवश्यकता नहीं है।
+* यदि दो हस्ताक्षरों के बीच एकमात्र अंतर वैकल्पिक पैरामीटर जोड़ने का है तो अलग हस्ताक्षर बनाना आवश्यक नहीं है।
+* आप इस इनलाइन के दो उदाहरण [बैकग्राउंड](https://github.com/processing/p5.js/blob/f38f91308fdacc2f1982e0430b620778fff30a5a/src/color/setting.js#L106) और [color](https://github.com/processing/p5.js/blob/f38f91308fdacc2f1982e0430b620778fff30a5a/src/color/creating_reading.js#L241) के सोर्स कोड में देख सकते हैं। 
+## अन्य टैग निर्दिष्ट करें
+यदि कोई गुण या चर एक स्थिरांक है तो `@final` का उपयोग करें:
+```js
+    /**
+     * PI is a mathematical constant with the value 3.14159265358979323846.
+     * @property PI
+     * @type Number
+     * @final
+     */
+    PI: PI
+```
+यदि कोई संपत्ति या वैरिएबल एक निजी वैरिएबल है तो `@private` का उपयोग करें (डिफ़ॉल्ट `@public` है इसलिए निर्दिष्ट करने की कोई आवश्यकता नहीं है)।
+```js
+    /**
+     * _start calls preload() setup() and draw()
+     * 
+     * @method _start
+     * @private
+     */
+     p5.prototype._start = function () {
+```
+
+## फ़ाइलों के लिए मॉड्यूल निर्दिष्ट करें
+
+प्रत्येक *फ़ाइल* के शीर्ष पर एक `@मॉड्यूल` टैग होना चाहिए। मॉड्यूल को जावास्क्रिप्ट फ़ाइलों (या require.js मॉड्यूल) के अनुरूप होना चाहिए। वे वस्तुओं की सूची में समूह के रूप में काम कर सकते हैं। [यहां देखें](https://p5js.org/reference/#collection-list-nav) (मॉड्यूल रंग, छवि, IO, PVECTOR, आदि हैं)।
+
+```js
+/**
+ * @module image
+ */
+define(function (require) {
+  // code here
+};
+```
+
+
+## Constructors
+
+Constructors को `@class` से परिभाषित किया गया है। प्रत्येक कंस्ट्रक्टर के पास टैग `@class` होना चाहिए जिसके बाद क्लास का नाम, साथ ही टैग `@constructor`, और कोई भी `@param` टैग होना चाहिए।
+
+```js
+  /**
+   * The p5 constructor function.
+   * @class p5
+   * @constructor
+   * @param {Object} [node] The canvas element. A canvas will be added to the DOM if not provided.
+   * @param {Object} [sketch] The sketch object.
+   */
+   const p5 = function(node, sketch) {
+     ...
+   }
+```
+
+## कोड नमूने जोड़ना
+
+आप `@example` के साथ कोड नमूने जोड़ सकते हैं। कोड नमूने `<code></code>` टैग के बीच रखे जाने चाहिए जिनमें टिप्पणियाँ भी शामिल हों। शैली पर अधिक जानकारी के लिए कृपया [दस्तावेज़ीकरण शैली मार्गदर्शिका](./documentation_style_guide.md) की समीक्षा करें।
+
+जब तक अन्यथा `setup()` फ़ंक्शन के साथ निर्दिष्ट न किया जाए, प्रत्येक `<code>` ब्लॉक स्वचालित रूप से ग्रे पृष्ठभूमि के साथ 100x100 पिक्सेल के कैनवास पर चलता है। यदि आपका कोड नमूना कैनवास के अलावा अन्य HTML तत्व बनाता है, तो उन्हें 100 पिक्सेल की चौड़ाई के साथ प्रस्तुत किया जाएगा।
+
+```
+@example
+<div>
+<code>
+arc(50, 55, 50, 50, 0, HALF_PI);
+noFill();
+arc(50, 55, 60, 60, HALF_PI, PI);
+arc(50, 55, 70, 70, PI, PI + QUARTER_PI);
+arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);
+describe('A shattered outline of an ellipse created using four arcs.');
+</code>
+</div>
+```
+
+आपके पास एक फ़ंक्शन के लिए कई उदाहरण हो सकते हैं, बस सुनिश्चित करें कि आपके पास केवल हैं
+एक `@example` जिसके बाद प्रत्येक उदाहरण की अपनी `<div>` रैपिंग अलग हो गई है
+एक लाइन ब्रेक से.
+
+```
+@example
+<div>
+<code>
+arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);
+describe('An ellipse created using an arc with its top right open.');
+</code>
+</div>
+<div>
+<code>
+arc(50, 50, 80, 80, 0, PI, OPEN);
+describe('The bottom half of an ellipse created using arc.');
+</code>
+</div>
+```
+
+यदि आप नहीं चाहते कि उदाहरण आपके कोड को निष्पादित करे (यानी आप चाहते हैं कि कोड केवल दिखे), तो `"norender"` वर्ग को `<div>` में शामिल करें:
+```
+@example
+<div class="norender">
+<code>
+arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);
+describe('ellipse created using arc with its top right open');
+</code>
+</div>
+```
+
+यदि आप नहीं चाहते कि उदाहरण को बिल्ड परीक्षणों के भाग के रूप में चलाया जाए (उदाहरण के लिए, यदि उदाहरण के लिए उपयोगकर्ता इंटरैक्शन की आवश्यकता है, या हेडलेस-क्रोम परीक्षण ढांचे द्वारा समर्थित कार्यक्षमता का उपयोग नहीं करता है), तो वर्ग `"नोटेस्ट"` को शामिल करें `<div>` :
+
+```
+@example
+<div class='norender notest'><code>
+function setup() {
+  let c = createCanvas(100, 100);
+  saveCanvas(c, 'myCanvas', 'jpg');
+}
+</code></div>
+```
+यदि आपको बाहरी संपत्ति फ़ाइलों से लिंक करने की आवश्यकता है, तो उन्हें [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets) में डालें और फिर उन्हें कोड में "assets/filename.ext" के साथ लिंक करें। [टिंट उदाहरण](http://p5js.org/reference/#/p5/tint) देखें।
+
+
+### वर्णन () का उपयोग करके एक कैनवास विवरण जोड़ें
+अंत में, आपके द्वारा जोड़े गए प्रत्येक उदाहरण के लिए, आपको कैनवास के लिए स्क्रीन-रीडर सुलभ विवरण बनाने के लिए उदाहरण में p5.js फ़ंक्शन `describe()` का उपयोग करना आवश्यक है। केवल एक पैरामीटर शामिल करें: कैनवास पर क्या हो रहा है इसका संक्षिप्त विवरण वाली एक स्ट्रिंग। दूसरा पैरामीटर न जोड़ें.
+```
+@example
+<div>
+<code>
+let xoff = 0.0;
+function draw() {
+  background(204);
+  xoff = xoff + 0.01;
+  let n = noise(xoff) * width;
+  line(n, 0, n, height);
+  decribe('A vertical line moves randomly from left to right.');
+}
+</code>
+</div>
+<div>
+<code>
+let noiseScale = 0.02;
+function draw() {
+  background(0);
+  for (let x = 0; x < width; x += 1) {
+    let noiseVal = noise((mouseX + x) * noiseScale, mouseY * noiseScale);
+    stroke(noiseVal*255);
+    line(x, mouseY + noiseVal * 80, x, height);
+  }
+  describe('A horizontal wave pattern moves in the opposite direction of the mouse.');
+}
+</code>
+</div>
+```
+`वर्णन()` पर अधिक जानकारी के लिए [वेब एक्सेसिबिलिटी योगदानकर्ता दस्तावेज़](https://p5js.org/contributor-docs/#/web_accessibility?id=user-generated-accessible-canvas-descriptions) पर जाएं।
+
+पिछले दस्तावेज़ दिशानिर्देशों में स्क्रीन-रीडर सुलभ कैनवास विवरण बनाने के लिए [alt-text](https://moz.com/learn/seo/alt-text) जोड़ने की आवश्यकता थी। अब इसकी अनुशंसा नहीं की जाती. हमेशा `वर्णन()` का प्रयोग करें। पहले, किसी दिए गए फ़ंक्शन के लिए सभी उदाहरणों के अंत में `@alt` टैग के साथ ऑल्ट-टेक्स्ट जोड़ा गया था (प्रत्येक के तहत एक व्यक्तिगत `@alt` टैग नहीं), और विवरण को अलग करने के लिए एक लाइन ब्रेक जोड़ा गया था एकाधिक उदाहरण.
+
+```
+@example
+<div>
+<code>
+let xoff = 0.0;
+function draw() {
+  background(204);
+  xoff = xoff + 0.01;
+  let n = noise(xoff) * width;
+  line(n, 0, n, height);
+}
+</code>
+</div>
+<div>
+<code>
+let noiseScale = 0.02;
+function draw() {
+  background(0);
+  for (let x = 0; x < width; x += 1) {
+    let noiseVal = noise((mouseX + x) * noiseScale, mouseY * noiseScale);
+    stroke(noiseVal * 255);
+    line(x, mouseY + noiseVal * 80, x, height);
+  }
+}
+</code>
+</div>
+@alt
+vertical line moves left to right with updating noise values.
+horizontal wave pattern effected by mouse x-position & updating noise values.
+```
+
+## तरीकों के लिए टेम्पलेट
+यहां एक अच्छी तरह से प्रलेखित विधि का एक उदाहरण दिया गया है। एक नई विधि बनाने के लिए, आप [इस टेम्पलेट](https://github.com/processing/p5.js/tree/main/contributor_docs/method.example.js) का उपयोग कर सकते हैं। टेक्स्ट को अपनी विधि के वेरिएबल से बदलें और शेष को हटा दें।
+
+![Image showing inline documentation example for methods](https://raw.githubusercontent.com/processing/p5.js/main/contributor_docs/images/method-template-example.png)
+
+
+## दस्तावेज़ तैयार करना
+
+* सभी आवश्यक स्थानीय फ़ाइलों के साथ-साथ स्रोत कोड से संदर्भ की एक प्रति उत्पन्न करने के लिए पहले एक बार `npm run docs` चलाएँ। जब भी आप yuidoc संदर्भ पृष्ठ के पीछे कोर JS फ़ाइलों में परिवर्तन करें तो इसे फिर से चलाएँ। ये yuidoc-p5-थीम फ़ोल्डर में स्थित फ़ाइलों में परिवर्तन हैं, src में इनलाइन दस्तावेज़ परिवर्तन नहीं हैं।
+
+* यदि आपने केवल स्रोत कोड में परिवर्तन किया है, तो आप केवल `npm run grunt yui` चला सकते हैं, हालाँकि `npm run grunt yui:build` भी काम करेगा। 
+
+* आप साइट का लाइव पूर्वावलोकन लॉन्च करने के लिए `npm run docs:dev` चला सकते हैं जो आपके द्वारा हर बार बदलाव करने पर अपडेट हो जाएगा। (परिवर्तन करने के बाद उन्हें प्रदर्शित करने के लिए आपको पृष्ठ को ताज़ा करना होगा।)
+
+बिल्ड संदर्भ दस्तावेज़/संदर्भ में पाया जा सकता है। इसे स्थानीय रूप से पूर्वावलोकन करने के लिए, `npm run grunt yui:dev` चलाएँ और इसे http://localhost:9001/docs/reference/ के रूप में देखें।
+
+
+
+## स्पेनिश भाषा संस्करण
+
+[स्पेनिश संस्करण](http://p5js.org/es/reference) थोड़ा अलग तरीके से बनाया गया है। इस सामग्री को अद्यतन करने के लिए यहां [निर्देश](https://github.com/processing/p5.js-website/blob/main/contributor_docs/i18n_contribution.md) हैं।
\ No newline at end of file
diff --git a/contributor_docs/hi/release_process.md b/contributor_docs/hi/release_process.md
new file mode 100644
index 0000000000..b5e4aedc91
--- /dev/null
+++ b/contributor_docs/hi/release_process.md
@@ -0,0 +1,67 @@
+#  रिलीज़ प्रक्रिया
+
+## दृष्टिकोण
+* हम [सेमवर](https://semver.org/) वर्जनिंग पैटर्न का पालन करते हैं, जिसका अर्थ है कि हम इस वर्जनिंग पैटर्न का पालन करते हैं: `MAJOR:MINOR:PATCH`।
+
+## आवश्यकताएं
+* Git, node.js और NPM आपके सिस्टम पर स्थापित हैं
+* आप लाइब्रेरी बनाने में सक्षम हैं और रिमोट रिपॉजिटरी तक पुश एक्सेस प्राप्त कर सकते हैं
+* गुप्त `NPM_TOKEN` मान दूरस्थ रिपॉजिटरी पर सेट है
+* गुप्त `ACCESS_TOKEN` मान दूरस्थ रिपॉजिटरी पर सेट किया गया है
+
+## सुरक्षा टोकन
+रिलीज़ चरणों को पूरी तरह से चलाने के लिए, दो [रिपोजिटरी रहस्य](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository) होने चाहिए नीचे के रूप में सेट करें.
+
+* पढ़ने और प्रकाशित करने के लिए टोकन बनाने के लिए [यहां](https://docs.npmjs.com/creating-and-viewing-access-tokens) चरणों का पालन करके `NPM_TOKEN` बनाया जा सकता है। टोकन जिस उपयोगकर्ता का है, उसके पास एनपीएम पर प्रोजेक्ट तक प्रकाशन की पहुंच होनी चाहिए।
+
+* `ACCESS_TOKEN` उस उपयोगकर्ता के लिए एक व्यक्तिगत एक्सेस टोकन है जिसके पास `p5.js`, `p5.js-website`, और `p5.js-release` रिपॉजिटरी तक पहुंच है। टोकन [यहां](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token) चरणों का उपयोग करके उत्पन्न किया जा सकता है। स्कोप, केवल `रेपो` और `वर्कफ़्लो` चुनें। इसके लिए एक संगठन विशिष्ट खाते का उपयोग करने की अनुशंसा की जाती है (अर्थात व्यक्तिगत खाते से नहीं) और खाते की लेखन पहुंच को केवल आवश्यक रिपॉजिटरी तक सीमित करें।
+
+## Usage
+```sh
+$ git checkout main
+$ npm version [major|minor|patch] # Choose the appropriate version tag
+$ git push origin main
+$ git push origin v1.4.2 # Replace the version number with the one just created above
+```
+वास्तविक रिलीज़ चरण GitHub Actions CI पर चलते हैं।
+
+## Monitor and check results
+एक बार उपरोक्त कमांड निष्पादित हो जाने के बाद, बिल्ड और रिलीज़ कार्रवाई की निगरानी p5.js GitHub रेपो पेज पर ["एक्शन" टैब](https://github.com/processing/p5.js/actions) से की जा सकती है। ऐसी Job की तलाश करें जिस पर लिखा हो "नया p5.js रिलीज़", Job पर क्लिक करने से जो चल रहा है उसका अधिक विस्तृत जॉब लॉग मिल सकता है।
+
+![नया p5.js रिलीज़" कार्य चलाने वाले GitHub एक्शन का स्क्रीनशॉट](images/release-action.png)
+
+एक बार काम पूरा हो जाने के बाद, लाइब्रेरी को GitHub और NPM पर जारी कर दिया जाएगा। यह देखने के लिए कि नवीनतम संस्करण जारी किया गया है, [रिलीज़](https://github.com/processing/p5.js/releases) और [NPM](https://www.npmjs.com/package/p5) पेज देखें . आपको GitHub पर ड्राफ्ट रिलीज़ देखना चाहिए, यदि आवश्यक हो तो चेंजलॉग में बदलाव करें, फिर रिलीज़ प्रकाशित करें।
+
+जैसे ही वेबसाइट का अपना निर्माण और परिनियोजन कार्य पूरा हो जाएगा, उसे अपडेट कर दिया जाएगा, इसकी निगरानी प्रासंगिक ["कार्रवाई" पृष्ठ](https://github.com/processing/p5.js-website/actions) पर भी की जा सकती है। यदि वांछित है, और उसके बाद नवीनतम संस्करण संख्या के लिए वेबसाइट पर ["डाउनलोड" पृष्ठ](https://p5js.org/download/) देखें।
+
+सीडीएन को अपडेट होने में थोड़ा अधिक समय (एक या दो दिन) लगेगा लेकिन रिलीज होने पर वे स्वचालित रूप से एनपीएम से हट जाएंगे इसलिए किसी विशेष कार्रवाई की आवश्यकता नहीं है।
+
+
+## असल में क्या हो रहा है
+GitHub एक्शन ["नया p5.js रिलीज़"](../.github/workflows/release.yml) एक टैग पर ट्रिगर होता है जो पैटर्न `v*.*.*` से मेल खाता है जो `npm version ___` आदेश से बनाया जाता ह .
+
+
+एक बार ट्रिगर होने पर, यह निम्नलिखित चरण चलाएगा:
+1. रिपॉजिटरी को क्लोन करें, नोड.जेएस सेटअप करें, संस्करण संख्या निकालें, `एनपीएम` के साथ निर्भरताएं स्थापित करें, और `एनपीएम टेस्ट` के साथ परीक्षण चलाएं।
+2. रिलीज़ फ़ाइलें बनाएं जिन्हें GitHub रिलीज़ पर अपलोड किया जाएगा।
+3. GitHub पर एक रिलीज़ बनाएं और NPM पर नवीनतम संस्करण प्रकाशित करें।
+4. वेबसाइट फ़ाइलें अद्यतन करें
+1. वेबसाइट रिपॉजिटरी को क्लोन करें
+2. `data.json` और `data.min.json` को सही स्थान पर कॉपी करें
+3. `p5.min.js` और `p5.sound.min.js` को सही स्थान पर कॉपी करें
+4. `data.yml` फ़ाइल को नवीनतम संस्करण संख्या के साथ अद्यतन करें
+5. `en.json` फ़ाइल को `data.min.json` के आधार पर अपडेट करें
+6. परिवर्तनों को प्रतिबद्ध करें और वेबसाइट रिपॉजिटरी में वापस भेजें
+5. बोवर फ़ाइलें अद्यतन करें
+1. बोवर रिलीज़ रिपॉजिटरी का क्लोन बनाएं
+2. सभी लाइब्रेरी फ़ाइलों को सही स्थान पर कॉपी करें
+3. परिवर्तनों को प्रतिबद्ध करें और वेबसाइट रिपॉजिटरी में वापस भेजें
+
+सिद्धांत रूप में, हम एक ही स्थान पर चलने के लिए यथासंभव अधिक से अधिक चरणों पर ध्यान केंद्रित करने का प्रयास करते हैं, अर्थात। सीआई वातावरण में. यदि एक नया चरण जो केवल रिलीज़ पर चलाया जाता है, आवश्यक है, तो इसे संभवतः सीआई वर्कफ़्लो में परिभाषित किया जाना चाहिए, न कि बिल्ड कॉन्फ़िगरेशन के भाग के रूप में।
+
+## परिक्षण
+चूंकि रिलीज़ चरण सीआई में चलाए जाते हैं, इसलिए उनका परीक्षण करना कठिन हो सकता है। स्थानीय स्तर पर चरणों को चलाने का परीक्षण करने के लिए [एक्ट](https://github.com/nektos/act) का उपयोग करना संभव है (और विकसित होने के दौरान उनका परीक्षण कैसे किया गया था) लेकिन वर्कफ़्लो परिभाषा में कुछ अस्थायी संशोधन की आवश्यकता है, हम करेंगे यहां मोटे तौर पर दस्तावेजीकरण करें क्योंकि समय के साथ सटीक चरण बदल जाएंगे।
+
+परीक्षण चरण नहीं चलेंगे क्योंकि मोचा क्रोम परीक्षण चलाने के लिए सभी सिस्टम आवश्यकताएँ मौजूद नहीं हैं। शेष परिवेश को स्थापित करने से पहले कुछ सिस्टम निर्भरताओं को `apt` के साथ स्थापित करने की आवश्यकता होगी। त्रुटि संदेशों पर नज़र रखें जिससे यह जानकारी मिलनी चाहिए कि कौन से पैकेज गायब हैं।
+
+गलती से अनपेक्षित परिवर्तनों को आगे बढ़ाने से बचने के लिए दूरस्थ रिपॉजिटरी में परिवर्तनों को आगे बढ़ाने से संबंधित कदमों पर टिप्पणी की जानी चाहिए।
\ No newline at end of file
diff --git a/contributor_docs/hi/repo_structure.md b/contributor_docs/hi/repo_structure.md
new file mode 100644
index 0000000000..d11ea4e79e
--- /dev/null
+++ b/contributor_docs/hi/repo_structure.md
@@ -0,0 +1,36 @@
+# हमारा कोड कहा रहता है
+
+
+व्यापक p5.js प्रोजेक्ट में इसके अलावा कुछ रिपॉजिटरी शामिल हैं:
+
+- **[p5.js](https://github.com/processing/p5.js)**: इस रिपॉजिटरी में p5.js लाइब्रेरी के लिए सोर्स कोड है। [उपयोगकर्ता-सामना करने वाला p5.js संदर्भ मैनुअल](https://p5js.org/reference/) भी इस स्रोत कोड में शामिल [JSDoc](https://jsdoc.app/) टिप्पणियों से उत्पन्न होता है। इसका रखरखाव [Qianqian Ye](https://github.com/qianqianye) और [स्टीवर्ड्स](https://github.com/processing/p5.js#stewards) के एक समूह द्वारा किया जाता है।
+
+- **[p5.js-website](https://github.com/processing/p5.js-website)**: इस रिपॉजिटरी में [p5.js website](http://p5js.org), संदर्भ मैनुअल के अपवाद के साथ। इसका रखरखाव [Qianqian Ye](https://github.com/qianqianye), [केनेथ लिम](https://github.com/limzykenneth), और [स्टीवर्ड्स]([https://github](https://github.com/processing/p5.js-website#stewards)) के एक समूह द्वारा किया जाता है। 
+
+
+- **[p5.js-sound](https://github.com/processing/p5.js-sound)**: इस रिपॉजिटरी में p5.sound.js लाइब्रेरी शामिल है। इसका रखरखाव [जेसन सिगल](https://github.com/wherewasaguy) द्वारा किया जाता है।
+
+- **[p5.js-web-editor](https://github.com/processing/p5.js-web-editor)**: इस रिपॉजिटरी में [p5.js वेब एडिटर]( https://editor.p5js.org). इसका रखरखाव [कैसी ताराकाजियन](https://github.com/catarak) द्वारा किया जाता है।
+
+- ऊपर सूचीबद्ध नहीं की गई अन्य ऐड-ऑन लाइब्रेरीज़ में आमतौर पर अपने स्वयं के भंडार और अनुरक्षक होते हैं और सीधे p5.js प्रोजेक्ट द्वारा बनाए नहीं रखे जाते हैं।
+
+
+## रिपॉजिटरी फ़ाइल संरचना
+
+यहाँ बहुत सारी फ़ाइलें हैं! यहां एक संक्षिप्त अवलोकन दिया गया है. यह भ्रमित करने वाला हो सकता है, लेकिन आरंभ करने के लिए आपको रिपॉजिटरी की प्रत्येक फ़ाइल को समझने की आवश्यकता नहीं है। हम अनुशंसा करते हैं कि एक क्षेत्र से शुरुआत करें (उदाहरण के लिए, कुछ इनलाइन दस्तावेज़ों को ठीक करना), और अधिक खोज करने के लिए बाहर की ओर काम करें। लुइसा परेरा का [लुकिंग इनसाइड p5.js](https://www.luisapereira.net/teaching/materials/processing-foundation) p5.js वर्कफ़्लो में उपयोग किए गए टूल और फ़ाइलों का एक वीडियो टूर भी देता है।
+
+- 📁`contributor_docs/` में ऐसे दस्तावेज़ शामिल हैं जो योगदानकर्ताओं के लिए प्रथाओं और सिद्धांतों की व्याख्या करते हैं
+- 📁`docs/` में वास्तव में दस्तावेज़ शामिल नहीं हैं! बल्कि, इसमें [ऑनलाइन संदर्भ मैनुअल](https://p5js.org/reference/) *जेनरेट* करने के लिए उपयोग किया गया कोड शामिल है।
+- 📁`lib/` में एक खाली उदाहरण और p5.sound ऐड-ऑन शामिल है, जिसे समय-समय पर [p5.js-sound रिपॉजिटरी](https://github.com/processing/p5.js) से पुल अनुरोध के माध्यम से अपडेट किया जाता है। यह वह जगह भी है जहां निर्मित p5.js लाइब्रेरी को [ग्रंट](https://gruntjs.com/) का उपयोग करके एकल फ़ाइल में संकलित करने के बाद रखा जाता है। जब आप पुल अनुरोध करते हैं तो इसे GitHub रिपॉजिटरी में जांचने की आवश्यकता नहीं है।
+- 📁`src/` में लाइब्रेरी के लिए सभी स्रोत कोड शामिल हैं, जो शीर्ष रूप से अलग-अलग मॉड्यूल में व्यवस्थित हैं। यदि आप p5.js बदल रहे हैं तो आप इसी पर काम करेंगे। आपको अपना रास्ता खोजने में मदद करने के लिए अधिकांश फ़ोल्डरों के अंदर अपनी स्वयं की readme.md फ़ाइलें होती हैं।
+- 📁`tasks/` में ऐसी स्क्रिप्ट्स होती हैं जो p5.js के नए संस्करणों के निर्माण, परिनियोजन और रिलीज़ से संबंधित स्वचालित कार्य करती हैं।
+- 📁`tests/` में यूनिट परीक्षण शामिल हैं जो यह सुनिश्चित करते हैं कि परिवर्तन किए जाने पर लाइब्रेरी सही ढंग से कार्य करती रहे।
+- 📁`utils/` में रिपॉजिटरी के लिए उपयोगी अतिरिक्त फ़ाइलें हो सकती हैं, लेकिन आम तौर पर आप इस निर्देशिका को अनदेखा कर सकते हैं।
+
+
+## मिश्रित
+- 📁[`contributor_docs/`](https://github.com/processing/p5.js/tree/main/contributor_docs) फ़ोल्डर में अन्य फ़ाइलें हैं जिन्हें आप एक्सप्लोर कर सकते हैं। वे इस परियोजना के तकनीकी और गैर-तकनीकी दोनों विशिष्ट क्षेत्रों में योगदान देने से संबंधित हैं।
+- [लुकिंग इनसाइड p5.js](https://www.luisapereira.net/teaching/materials/processing-foundation) p5.js डेवलपमेंट वर्कफ़्लो में उपयोग किए जाने वाले टूल और फ़ाइलों का एक वीडियो टूर है।
+- [द कोडिंग ट्रेन का यह वीडियो](https://youtu.be/Rr3vLyP1Ods) :train::rainbow: p5.js में तकनीकी योगदान के साथ शुरुआत करने का एक सिंहावलोकन देता है।
+- p5.js [डॉकर छवि](https://github.com/toolness/p5.js-docker) को [Docker](https://www.docker.com/) में माउंट किया जा सकता है और p5 विकसित करने के लिए उपयोग किया जा सकता है .js को [नोड](https://nodejs.org/) जैसी आवश्यकताओं की मैन्युअल स्थापना की आवश्यकता के बिना या किसी भी तरह से होस्ट ऑपरेटिंग सिस्टम को प्रभावित किए बिना, डॉकर की स्थापना के अलावा।
+- p5.js लाइब्रेरी के लिए निर्माण प्रक्रिया एक [JSON डेटा फ़ाइल](https://p5js.org/reference/data.json) उत्पन्न करती है जिसमें p5.js की सार्वजनिक एपीआई होती है और इसका उपयोग स्वचालित टूलींग में किया जा सकता है, जैसे जहाँ तक एक संपादक में p5.js विधियों को स्वतः पूर्ण करने का प्रश्न है। यह फ़ाइल p5.js वेबसाइट पर होस्ट की गई है, लेकिन यह रिपॉजिटरी के भाग के रूप में शामिल नहीं है।
\ No newline at end of file
diff --git a/contributor_docs/hi/sidebar.md b/contributor_docs/hi/sidebar.md
new file mode 100644
index 0000000000..9c76cf96e3
--- /dev/null
+++ b/contributor_docs/hi/sidebar.md
@@ -0,0 +1,21 @@
+<!-- docs/_sidebar.md -->
+
+- [__योगदानकर्ता परिचय__](README.md)
+- __CONTRIBUTING DOCS__
+  - [योगदान के लिए दस्तावेज़ीकरण](contributing_documentation.md)
+  - [मुद्दे लेबल](issue_labels.md)
+- __CONTRIBUTING THOUGHTS__
+  - [डिज़ाइन सिद्धांत](design_principles.md)
+  - [योगदान का आयोजन](organization.md)
+- __CONTRIBUTING CODE__
+  - [लाइब्रेरी बनाना](creating_libraries.md)
+  - [इनलाइन दस्तावेज़ीकरण](inline_documentation.md)
+  - [इकाई परीक्षण](unit_testing.md)
+  - [अनुकूल-त्रुटि प्रणाली](friendly_error_system.md)
+- __RELATED INFO__
+  - [रिपॉज़िटरी संरचना](repo_structure.md)
+  - [WebGL आर्किटेक्चर](webgl_mode_architecture.md)
+  - [समर्थित ब्राउज़र्स](supported_browsers.md)
+  - [वेब एक्सेसिबिलिटी](web_accessibility.md)
+  - [कस्टम बिल्ड्स](custom_p5_build.md)
+  - [रिलीज प्रक्रिया](release_process.md)
\ No newline at end of file
diff --git a/contributor_docs/hi/supported_browsers.md b/contributor_docs/hi/supported_browsers.md
new file mode 100644
index 0000000000..48a6836bd7
--- /dev/null
+++ b/contributor_docs/hi/supported_browsers.md
@@ -0,0 +1,16 @@
+
+# समर्थित ब्राउज़र
+
+## हमारा घोषित लक्ष्य
+p5.js पुराने ब्राउज़रों के लिए समर्थन प्रदान करने के लिए [ब्राउज़रलिस्ट](https://browsersl.ist/) और [Babel](https://babeljs.io/) का उपयोग करता है। उपयोग में आने वाली ब्राउज़र सूची कॉन्फ़िगरेशन [`last 2 versions, not dead`](https://browserslist.dev/?q=bGFzdCAyIHZlcnNpb25zLCBub3QgZGVhZA%3D%3D) है। `last 2 versions` का अर्थ है किसी भी ब्राउज़र की अंतिम दो रिलीज़, `not dead` का अर्थ है वे ब्राउज़र जिन्हें पिछले 24 महीनों में आधिकारिक समर्थन या अपडेट प्राप्त था। किसी ब्राउज़र के समर्थित होने के लिए ये दोनों स्थितियाँ सत्य होनी चाहिए।
+
+व्यवहार में, आप अभी भी जावास्क्रिप्ट में उपलब्ध अधिकांश नवीनतम सुविधाओं का उपयोग कर सकते हैं क्योंकि बैबेल संभवतः उन्हें आवश्यक संगतता सूची से मेल खाने वाली किसी चीज़ में ट्रांसपाइल या पॉलीफ़िल करने में सक्षम होगा। कुछ सुविधाएँ जैसे [Web API](https://developer.mozilla.org/en-US/docs/Web/API), [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API), या इसी तरह की विशेषताएं जो मूल जावास्क्रिप्ट भाषा का हिस्सा नहीं हैं, उन्हें बैबेल द्वारा नियंत्रित नहीं किया जा सकता है और उन्हें मामले दर मामले के आधार पर मूल्यांकन करने की आवश्यकता होगी।
+
+यह जांचने के लिए अच्छी जगहें हैं कि कोई सुविधा उपलब्ध है या नहीं, ये हैं [caniuse.com](https://caniuse.com/) और [MDN](https://developer.mozilla.org/en-US/)।
+
+## यह कहां लागू होता है
+समर्थित ब्राउज़र आवश्यकता p5.js स्रोत कोड, सभी उदाहरण (वेबसाइट उदाहरण पृष्ठ और दस्तावेज़ीकरण दोनों), और सभी आधिकारिक ट्यूटोरियल पर लागू होगी। तृतीय पक्ष ऐड-ऑन लाइब्रेरीज़ को समान आवश्यकता का पालन करने की आवश्यकता नहीं है लेकिन उन्हें ऐसा करने के लिए प्रोत्साहित किया जाता है।
+
+कई मामलों में जो ब्राउज़र आधिकारिक रूप से समर्थित नहीं हैं वे संभवतः अभी भी p5.js के साथ काम करेंगे लेकिन हम इस मामले में कोई गारंटी नहीं देते हैं।
+
+कोड परिवर्तन से संबंधित पीआर इस आवश्यकता का पालन सुनिश्चित करने के लिए प्रत्येक अनुभाग के प्रबंधक जिम्मेदार होंगे।
\ No newline at end of file
diff --git a/contributor_docs/hi/web_accessibility.md b/contributor_docs/hi/web_accessibility.md
new file mode 100644
index 0000000000..344910520c
--- /dev/null
+++ b/contributor_docs/hi/web_accessibility.md
@@ -0,0 +1,108 @@
+
+# p5.js वेब एक्सेसिबिलिटी
+
+यह दस्तावेज़ योगदानकर्ताओं और अनुरक्षकों और किसी भी अन्य इच्छुक पार्टियों के लिए p5.js की वेब एक्सेसिबिलिटी सुविधाओं की संरचना का वर्णन करता है। यदि आप अपने स्केच [स्क्रीन रीडर](https://en.wikipedia.org/wiki/Screen_reader) को सुलभ बनाने में रुचि रखते हैं, तो [ट्यूटोरियल](https://p5js.org/learn) पर जाएं या यदि आप चाहें तो स्क्रीन रीडर के साथ p5.js का उपयोग करने के लिए [स्क्रीन रीडर ट्यूटोरियल के साथ p5.js का उपयोग करना](https://p5js.org/learn/p5-screen-reader.html) पर जाएं।
+
+## अवलोकन
+
+क्योंकि कैनवास HTML तत्व एक बिटमैप है और उस पर खींची गई आकृतियों पर किसी भी स्क्रीन रीडर तक पहुंच योग्य जानकारी प्रदान नहीं करता है, p5.js में कई फ़ंक्शन हैं जो कैनवास को स्क्रीन रीडर्स के लिए अधिक सुलभ बनाते हैं।
+
+वर्तमान में, p5.js कैनवास पर मूल आकृतियों के लिए लाइब्रेरी द्वारा निर्मित स्क्रीन रीडर सुलभ आउटपुट का समर्थन करता है (`textOutput()` और `gridOutput()` के साथ) और उपयोगकर्ता-जनित स्क्रीन रीडर कैनवास सामग्री के सुलभ विवरण (`describe()` के साथ) का समर्थन करता है और `describeElement()`।
+
+## लाइब्रेरी ने बुनियादी आकृतियों के लिए सुलभ आउटपुट तैयार किए
+
+बुनियादी आकृतियों के लिए समर्थित सुलभ आउटपुट में टेक्स्ट और ग्रिड आउटपुट शामिल हैं।
+
+`textOutput()` एक स्क्रीन रीडर सुलभ आउटपुट बनाता है जो कैनवास पर मौजूद आकृतियों का वर्णन करता है। कैनवास के सामान्य विवरण में कैनवास का आकार, कैनवास का रंग और कैनवास में तत्वों की संख्या शामिल है (उदाहरण: 'आपका आउटपुट 400 x 400 पिक्सेल, लैवेंडर नीला कैनवास है जिसमें निम्नलिखित 4 आकृतियाँ हैं:')। इस विवरण के बाद आकृतियों की एक सूची दी गई है जहां प्रत्येक आकृति के रंग, स्थिति और क्षेत्र का वर्णन किया गया है (उदाहरण: "ऊपर बाईं ओर नारंगी दीर्घवृत्त कैनवास के 1% को कवर करता है")। अधिक विवरण प्राप्त करने के लिए प्रत्येक तत्व का चयन किया जा सकता है। तत्वों की एक तालिका भी प्रदान की गई है। इस तालिका में आकार, रंग, स्थान, निर्देशांक और क्षेत्र का वर्णन किया गया है (उदाहरण: "नारंगी दीर्घवृत्त स्थान = शीर्ष बाएँ क्षेत्र = 2")।
+
+`ग्रिडआउटपुट()` प्रत्येक आकृति के स्थानिक स्थान के आधार पर कैनवास की सामग्री को ग्रिड (एचटीएमएल तालिका) के रूप में प्रस्तुत करता है। तालिका आउटपुट से पहले कैनवास का संक्षिप्त विवरण उपलब्ध है। इस विवरण में शामिल हैं: पृष्ठभूमि का रंग, कैनवास का आकार, वस्तुओं की संख्या और वस्तु प्रकार (उदाहरण: "लैवेंडर नीला कैनवास 200 गुणा 200 है और इसमें 4 वस्तुएं हैं - 3 दीर्घवृत्त 1 आयत")। ग्रिड स्थानिक रूप से सामग्री का वर्णन करता है, प्रत्येक तत्व को उसकी स्थिति के आधार पर तालिका के एक सेल पर रखा जाता है। प्रत्येक कोशिका में एक तत्व का रंग और उस तत्व के आकार का प्रकार उपलब्ध होता है (उदाहरण: "नारंगी दीर्घवृत्त")। अधिक विवरण प्राप्त करने के लिए इन विवरणों को व्यक्तिगत रूप से चुना जा सकता है। तत्वों की एक सूची जहां आकार, रंग, स्थान और क्षेत्र का वर्णन किया गया है (उदाहरण: "नारंगी दीर्घवृत्त स्थान = शीर्ष बायां क्षेत्र = 1%)" भी उपलब्ध है।
+
+यदि कोई उपयोगकर्ता इनमें से किसी भी फ़ंक्शन में `LABEL` को एक पैरामीटर के रूप में पास करता है, तो कैनवास के निकट आउटपुट के साथ एक अतिरिक्त div बनाया जाता है, यह गैर-स्क्रीन रीडर उपयोगकर्ताओं के लिए उपयोगी है जो कैनवास के बाहर आउटपुट प्रदर्शित करना चाहते हैं।' जैसे ही वे कोड करते हैं सब DOM। हालाँकि, `LABEL` का उपयोग करने से स्क्रीन रीडर उपयोगकर्ताओं के लिए अनावश्यक अतिरेक पैदा हो जाएगा। हम केवल स्केच की विकास प्रक्रिया के हिस्से के रूप में `LABEL` का उपयोग करने और स्क्रीन रीडर उपयोगकर्ताओं के साथ अपना स्केच प्रकाशित करने या साझा करने से पहले इसे हटाने की सलाह देते हैं।
+
+### आउटपुट संरचना
+हालाँकि `textOutput()` और `gridOutput()` [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js) में स्थित हैं ), आउटपुट लाइब्रेरी में वितरित फ़ंक्शंस का उपयोग करके बनाए और अपडेट किए जाते हैं। यह अनुभाग उन विभिन्न कार्यों का विवरण देता है जो सुलभ आउटपुट का समर्थन करते हैं।
+
+#### outputs.js
+[src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js) इसमें मुख्य कार्य शामिल हैं जो सुलभ आउटपुट बनाते हैं:
+
+* `textOutput()`: यह फ़ंक्शन `this._accessibleOutputs.text` को `true` पर सेट करके और `_createOutput('textOutput', 'Fallback')` को कॉल करके टेक्स्ट आउटपुट को सक्रिय करता है। यदि `LABEL` को एक पैरामीटर के रूप में पारित किया जाता है तो फ़ंक्शन `this._accessibleOutputs.textLabel` को `true` के रूप में सेट करके टेक्स्ट आउटपुट लेबल को भी सक्रिय करता है और लेबल के लिए `_createOutput('textOutput', 'Label')` को कॉल करता है।
+
+* `gridOutput()`: यह फ़ंक्शन `this._accessibleOutputs.grid` को `true` पर सेट करके और `_createOutput('gridOutput', 'Fallback')` को कॉल करके ग्रिड आउटपुट को सक्रिय करता है। यदि `LABEL` को एक पैरामीटर के रूप में पारित किया जाता है, तो फ़ंक्शन `this._accessibleOutputs.textLabel` को `true` के रूप में सेट करके ग्रिड आउटपुट लेबल को भी सक्रिय करता है और लेबल के लिए `_createOutput('gridOutput', 'Label')` को कॉल करता है।
+
+* `_createOutput()`: यह फ़ंक्शन सभी पहुंच योग्य आउटपुट के लिए HTML संरचना बनाता है। आउटपुट के प्रकार और प्रदर्शन के आधार पर बनाई गई HTML संरचना भिन्न होती है। फ़ंक्शन `this.ingredients` को भी आरंभ करता है जो आउटपुट के लिए सभी डेटा को संग्रहीत करता है जिसमें शामिल हैं: आकार, रंग और pShapes (जो कैनवास के पिछले आकार की एक स्ट्रिंग को संग्रहीत करता है)। यदि यह मौजूद नहीं है तो यह `this.dummyDOM` भी बनाता है। `this.dummyDOM` `<body>` के अंदर DOM तत्वों के HTMLCollection को संग्रहीत करता है।
+
+* `_updateAccsOutput()`: accessibleOutputs का उपयोग करने पर इसे `setup()` और `draw()` के अंत में कॉल किया जाता है। यदि `this.ingredients` वर्तमान आउटपुट से भिन्न है, तो यह फ़ंक्शन आउटपुट (`_updateGridOutput` और `_updateTextOutput`) के अपडेट फ़ंक्शन को कॉल करता है। इस फ़ंक्शन को केवल `setup()` और `draw()` के अंत में कॉल करने के साथ-साथ केवल `_updateGridOutput` और `_updateTextOutput` को केवल तभी कॉल करने पर जब सामग्री अलग-अलग हो, स्क्रीन रीडर पर दबाव डालने से बचने में मदद मिलती है।
+
+* `_addAccsOutput()`: जब accessableOutputs सत्य होते हैं तो यह फ़ंक्शन सत्य लौटाता है।
+
+* `_accsBackground()`: इसे `background()` के अंत में कहा जाता है। यह `this.ingredients.shapes` को रीसेट करता है और यदि पृष्ठभूमि का रंग पहले से अलग है तो यह रंग का नाम प्राप्त करने और इसे `this.ingredients.colors.background` में संग्रहीत करने के लिए `_rgbColorName()` को कॉल करता है।
+
+* `_accsCanvasColors()`: भरण() और स्ट्रोक() के अंत में कहा जाता है। यह फ़ंक्शन भरण और स्ट्रोक रंगों को `this.ingredients.colors.fill` और `this.ingredients.colors.stroke` में सहेजकर अद्यतन करता है। यह रंगों के नाम प्राप्त करने के लिए `_rgbColorName()` को भी कॉल करता है।
+
+* `_accsOutput()`: `this.ingredients.shapes` बनाता है जिसमें आउटपुट बनाने के लिए उपयोग की जाने वाली सभी आकृतियाँ शामिल होती हैं। इस फ़ंक्शन को मूल आकार फ़ंक्शन के अंत में कॉल किया जाता है (src/accessibility से परे एक्सेसिबल आउटपुट देखें)। इसे कॉल करने वाले आकार के आधार पर, `_accsOutput()` उस आकार के बारे में सारी जानकारी इकट्ठा करने के लिए सहायक फ़ंक्शन को कॉल कर सकता है जो आउटपुट बनाने के लिए आवश्यक होगी। ये फ़ंक्शन, जो प्रोटोटाइप का हिस्सा नहीं हैं, में शामिल हैं:
+
+  * `_getMiddle()`: आयतों, चापों, दीर्घवृत्तों, त्रिभुजों और चतुर्भुजों का मध्य बिंदु या केन्द्रक लौटाता है।
+  * `_getPos()`: कैनवास पर किसी आकृति की स्थिति लौटाता है (उदाहरण: 'ऊपरी बाएँ', 'मध्य दाएँ')।
+  * `_canvasLocator()`: कैनवास पर मैप किए गए 10*10 ग्रिड पर आकृति का स्थान लौटाता है।
+  * `_getArea()`: कैनवास के कुल क्षेत्रफल के प्रतिशत के रूप में आकृति का क्षेत्रफल लौटाता है।
+
+When `this._accessibleOutputs.text` or `this._accessibleOutputs.text` are `true` several functions across the p5.js library call functions in output.js:
+
+* `_accsOutput()` is called in:
+  * `p5.prototype.triangle()`
+  * `p5.prototype._renderRect()`
+  * `p5.prototype.quad()`
+  * `pp5.prototype.point()`
+  * `p5.prototype.line()`
+  * `p5.prototype._renderEllipse()`
+  * `p5.prototype.arc()`
+
+* `_updateAccsOutput()` is called in:
+  * `p5.prototype.redraw()`
+  * `p5.prototype.resizeCanvas()`
+  * `this._setup`
+
+* `_accsCanvasColors()` is called in:
+  * `p5.Renderer2D.prototype.stroke()`
+  * `p5.Renderer2D.prototype.fill()`
+
+* `_accsBackground()` is called in:
+  * `p5.Renderer2D.prototype.background()`
+
+#### textOutput.js
+[src/accessibility/textOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/textOutput.js) में टेक्स्ट आउटपुट को अपडेट करने वाले सभी फ़ंक्शन शामिल हैं। इस फ़ाइल में मुख्य फ़ंक्शन `_updateTextOutput()` है जिसे `_updateAccsOutput()` द्वारा [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/) में कॉल किया जाता है। src/accessibility/outputs.js) जब `this._accessibleOutputs.text` या `this._accessibleOutputs.textLabel` `true` हों।
+
+`_updateTextOutput()` टेक्स्ट आउटपुट और टेक्स्ट आउटपुट लेबल की सामग्री बनाने के लिए `this.ingredients` का उपयोग करता है जिसमें सारांश, आकृतियों की एक सूची और आकृतियों के विवरण की एक तालिका शामिल होती है। यदि ये वर्तमान आउटपुट से भिन्न हैं तो यह उन्हें अपडेट करता है। आउटपुट सामग्री का निर्माण फ़ाइल में कई सहायक कार्यों द्वारा समर्थित है जो प्रोटोटाइप का हिस्सा नहीं हैं:
+* `_textSummary()`: टेक्स्ट आउटपुट सारांश की सामग्री बनाता है।
+* `_shapeDetails()`: टेक्स्ट आउटपुट तालिका बनाता है जिसमें आकार विवरण होता है।
+* `_shapeList()`: आकृतियों की सूची बनाता हैtext output.
+
+#### gridOutput.js
+[src/accessibility/gridOutput.js](https://github.com/processing/p5.js/blob/main/src/accessibility/gridOutput.js) में ग्रिड आउटपुट को अपडेट करने वाले सभी फ़ंक्शन शामिल हैं। इस फ़ाइल में मुख्य फ़ंक्शन `_updateGridOutput()` है जिसे `_updateAccsOutput()` द्वारा [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/) में कॉल किया जाता है। src/accessibility/outputs.js) जब `this._accessibleOutputs.grid` या `this._accessibleOutputs.gridLabel` `सही` हों।
+
+`_updateGridOutput()` ग्रिड आउटपुट और ग्रिड आउटपुट लेबल की सामग्री बनाने के लिए `this.ingredients` का उपयोग करता है जिसमें एक सारांश, एक ग्रिड जो आकृतियों के स्थान और आकृतियों की सूची को मैप करता है। यदि ये वर्तमान आउटपुट से भिन्न हैं तो यह उन्हें अपडेट करता है। आउटपुट सामग्री का निर्माण फ़ाइल में कई सहायक कार्यों द्वारा समर्थित है जो प्रोटोटाइप का हिस्सा नहीं हैं:
+* `_gridSummary()`: ग्रिड आउटपुट सारांश की सामग्री बनाता है।
+* `_gridMap()`: एक ग्रिड बनाता है जो कैनवास पर आकृतियों के स्थान को मैप करता है।
+* `_gridShapeDetails()`: ग्रिड आउटपुट के आकृतियों की सूची बनाता है, सूची की प्रत्येक पंक्ति में आकृति के बारे में विवरण शामिल होता है।
+
+#### color_namer.js
+स्क्रीन रीडर सुलभ आउटपुट बनाते समय, कैनवास में उपयोग किए गए रंगों का नामकरण महत्वपूर्ण है। [src/accessibility/color_namer.js](https://github.com/processing/p5.js/blob/main/src/accessibility/color_namer.js) में `_rgbColorName()` एक फ़ंक्शन शामिल है जो आरजीबीए मान प्राप्त करता है और लौटाता है एक रंग का नाम. इस फ़ंक्शन को [src/accessibility/outputs.js](https://github.com/processing/p5.js/blob/main/src/accessibility/outputs.js) में `_accsBackground()` और `_accsCanvasColors` द्वारा कॉल किया जाता है ).
+
+`_rgbColorName()` रंग के एचएसवी मान प्राप्त करने के लिए `color_conversion._rgbaToHSBA()` का उपयोग करता है और फिर रंग का नाम प्राप्त करने के लिए `_calculatorColor()` का उपयोग करता है। इस फ़ाइल में फ़ंक्शन `_calculatorColor()` [colorNamer.js](https://github.com/MathuraMG/color-namer) से आता है जिसे [2018 प्रोसेसिंग फाउंडेशन फ़ेलोशिप](https://) के हिस्से के रूप में विकसित किया गया था। मीडियम.कॉम/प्रोसेसिंग-फाउंडेशन/मेकिंग-पी5-जेएस-एक्सेसिबल-ई2सीई366ई05ए0) और ब्लाइंड स्क्रीन रीडर विशेषज्ञ उपयोगकर्ताओं के परामर्श से। यह फ़ंक्शन `colorLookUp` सरणी में संग्रहीत एचएसवी मानों की तुलना करके रंग नाम लौटाता है। फ़ंक्शन को अद्यतन किया जाना चाहिए क्योंकि ग्रे के कुछ रंगों को सही ढंग से नामित नहीं किया गया है। इसे अद्यतन करते समय, उन टिप्पणियों को शामिल करके योगदानकर्ता की पठनीयता सुनिश्चित करना भी महत्वपूर्ण है जो बताती हैं कि कोड की प्रत्येक पंक्ति क्या करती है।
+
+## उपयोगकर्ता-जनित सुलभ कैनवास विवरण
+
+### वर्णन करना()
+'वर्णन()' फ़ंक्शन कैनवास के लिए एक स्क्रीन रीडर सुलभ विवरण बनाता है। पहला पैरामीटर कैनवास के विवरण के साथ एक स्ट्रिंग होना चाहिए। दूसरा पैरामीटर वैकल्पिक है. यदि निर्दिष्ट किया गया है, तो यह निर्धारित करता है कि विवरण कैसे प्रदर्शित किया जाएगा। सभी विवरण कैनवास तत्व के उप DOM का हिस्सा बन जाते हैं। यदि कोई उपयोगकर्ता `LABEL` को दूसरे पैरामीटर के रूप में पास करता है, तो कैनवास से सटे विवरण के साथ एक अतिरिक्त div बनाया जाता है।
+
+`वर्णन()` [src/accessibility/describe.js](https://github.com/processing/p5.js/blob/main/src/accessibility/describe.js) में कई कार्यों द्वारा समर्थित है:
+* `_descriptionText()`: जांचता है कि टेक्स्ट `LABEL` या `FALLBACK` नहीं है और सुनिश्चित करता है कि टेक्स्ट विराम चिह्न के साथ समाप्त होता है। यदि पाठ '.', ',', ';', '?', '!' के साथ समाप्त नहीं होता है, तो यह फ़ंक्शन एक 'जोड़ता है।' स्ट्रिंग के अंत में. पाठ लौटाता है.
+* `_describeHTML()`: कैनवास के लिए फ़ॉलबैक HTML संरचना बनाता है। यदि `वर्णन()` का दूसरा पैरामीटर `LABEL` है, तो यह फ़ंक्शन विवरण पाठ के लिए कैनवास तत्व से सटे एक div बनाता है।
+
+### describeElement()
+`describeElement()` फ़ंक्शन स्केच तत्वों या आकृतियों के समूहों के लिए एक स्क्रीन रीडर सुलभ विवरण बनाता है जो एक साथ अर्थ बनाते हैं। पहला पैरामीटर तत्व के नाम के साथ एक स्ट्रिंग होना चाहिए, दूसरा पैरामीटर तत्व के विवरण के साथ एक स्ट्रिंग होना चाहिए। तीसरा पैरामीटर वैकल्पिक है. यदि निर्दिष्ट किया गया है, तो यह निर्धारित करता है कि विवरण कैसे प्रदर्शित किया जाएगा। सभी तत्व विवरण कैनवास तत्व के उप DOM का हिस्सा बन जाते हैं। यदि कोई उपयोगकर्ता `LABEL` को तीसरे पैरामीटर के रूप में पास करता है, तो कैनवास से सटे तत्व विवरण के साथ एक अतिरिक्त div बनाया जाता है। 
+
+`describeElement()` को [src/accessibility/describe.js](https://github.com/processing/p5.js/blob/main/src/accessibility/describe.js) में कई फ़ंक्शन द्वारा समर्थित किया गया है:
+* `_elementName()`: जांचता है कि तत्व का नाम `LABEL` या `FALLBACK` नहीं है और यह सुनिश्चित करता है कि टेक्स्ट कोलन के साथ समाप्त होता है। तत्व का नाम लौटाता है.
+* `_descriptionText()`: जांचता है कि टेक्स्ट `LABEL` या `FALLBACK` नहीं है और सुनिश्चित करता है कि टेक्स्ट विराम चिह्न के साथ समाप्त होता है। यदि पाठ '.', ',', ';', '?', '!' के साथ समाप्त नहीं होता है, तो यह फ़ंक्शन एक 'जोड़ता है।' स्ट्रिंग के अंत में. पाठ लौटाता है.
+* `_describeElementHTML()`: कैनवास के लिए फ़ॉलबैक HTML संरचना बनाता है। जब `describeElement()` का दूसरा पैरामीटर `LABEL` होता है, तो यह फ़ंक्शन विवरण के लिए कैनवास तत्व से सटे एक div बनाता है।
\ No newline at end of file
diff --git a/contributor_docs/hi/webgl_mode_architecture.md b/contributor_docs/hi/webgl_mode_architecture.md
new file mode 100644
index 0000000000..1959bf60ea
--- /dev/null
+++ b/contributor_docs/hi/webgl_mode_architecture.md
@@ -0,0 +1,258 @@
+# p5.js WebGL मोड आर्किटेक्चर
+
+यह दस्तावेज़ उन योगदानकर्ताओं और पुस्तकालय निर्माताओं के लिए है जो WebGL कोडबेस का विस्तार करना चाहते हैं। यदि आप अपने स्केच में वेबजीएल मोड का उपयोग करने में सहायता ढूंढ रहे हैं, तो इसके बजाय वेबजीएल ट्यूटोरियल [पी5.जेएस लर्न पेज पर](https://p5js.org/learn/) पढ़ने पर विचार करें।
+
+
+## वेबजीएल मोड क्या है?
+
+ऐसे दो रेंडरर हैं जिन्हें p5.js 2D और WebGL मोड में चला सकते हैं। p5.js में WebGL मोड उपयोगकर्ता को उच्च-रेंडरिंग के लिए वेब ब्राउज़र में निर्मित [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) का उपयोग करने की अनुमति देता है। प्रदर्शन 2डी और 3डी ग्राफिक्स। 2डी मोड और वेबजीएल मोड के बीच मुख्य अंतर यह है कि बाद वाला कंप्यूटर के जीपीयू तक अधिक सीधी पहुंच प्रदान करता है, जिससे यह 3डी में आकृतियों को प्रदर्शनपूर्वक प्रस्तुत करने या अन्य ग्राफिक्स और छवि प्रसंस्करण कार्यों को करने की अनुमति देता है।
+
+हम [एक GitHub प्रोजेक्ट](https://github.com/orgs/processing/projects/20) में WebGL मुद्दों की प्रगति पर नज़र रखते हैं। 
+
+## वेबजीएल मोड के लक्ष्य
+
+किसी नई सुविधा का मूल्यांकन करते समय, हम इस बात पर विचार करते हैं कि क्या यह p5.js और WebGL मोड के लक्ष्यों के अनुरूप है:
+
+1. **सुविधाएँ शुरुआती के अनुकूल होनी चाहिए:** इसे WebGL और इसके द्वारा प्रदान की जाने वाली सुविधाओं का **शुरुआती-अनुकूल परिचय प्रदान करना चाहिए। इसका मतलब है कि हमें 3डी आकृतियों, कैमरों, प्रकाश व्यवस्था और शेडर्स के लिए सरल एपीआई की पेशकश करनी चाहिए। हम अभी भी उन्नत सुविधाओं का समर्थन कर सकते हैं, लेकिन केवल तभी जब वे मुख्य सुविधाओं की सरलता में हस्तक्षेप न करें।
+2. **2डी मोड के साथ फीचर समानता में सुधार:**यह 2डी मोड से घर्षण रहित संक्रमण होना चाहिए,** जिससे 3डी और वेबजीएल उपयोगकर्ताओं के लिए अधिक आसानी से "क्लिक" कर सके। इसका मतलब है कि हम ऐसी सुविधाएं बनाने का प्रयास करते हैं जो 2डी मोड और वेबजीएल मोड में भी काम करती हैं। चूँकि WebGL में 3D और शेडर सुविधाएँ भी हैं, इसका मतलब है कि WebGL मोड का लक्ष्य 2D मोड की सुविधाओं का एक सुपरसेट होना है।
+3. **सरलता और विस्तारशीलता सर्वोपरि हैं:** इसमें **एक छोटा कोर होना चाहिए और पुस्तकालयों के लिए विस्तार योग्य होना चाहिए।** WebGL मोड को छोटा रखने से मुख्य सुविधाओं को अनुकूलित करना और बग सतह क्षेत्र को कम करना आसान हो जाता है। एक्सटेंशन पुस्तकालयों के माध्यम से अधिक उन्नत सुविधाओं को शामिल करने का अवसर प्रदान करता है।
+4. **p5.js के प्रदर्शन में सुधार करें:** इसे **पिछले लक्ष्यों में हस्तक्षेप किए बिना यथासंभव तेज़ चलना चाहिए।** अच्छा प्रदर्शन विभिन्न प्रकार के दर्शकों और उपकरणों के लिए स्केच को सुलभ रखता है। नए एपीआई डिज़ाइन करते समय, हम यह सुनिश्चित करने का प्रयास करते हैं कि डिज़ाइन का कार्यान्वयन प्रभावी हो। हालाँकि, हम 2डी मोड के साथ सरलता और समानता को प्राथमिकता देते हैं।
+
+
+## 2डी मोड के साथ डिज़ाइन में अंतर
+
+ब्राउज़र के 2डी और वेबजीएल कैनवास संदर्भ एपीआई अमूर्तता के बहुत अलग स्तर प्रदान करते हैं, जिसमें वेबजीएल आम तौर पर निचले स्तर का होता है और 2डी उच्च स्तर का होता है। यह p5.js के WebGL और 2D मोड के बीच कुछ मूलभूत डिज़ाइन अंतरों को प्रेरित करता है।
+
+- **वेबजीएल मोड अधिक गहराई से नेस्टेड डेटा संरचनाएं बनाता है।** 2डी मोड आम तौर पर ब्राउज़र को कमांड भेजता है, जिससे अपेक्षाकृत उथले कॉल स्टैक होते हैं। इसके विपरीत, WebGL मोड आकृतियों को त्रिकोणों में तोड़ने, उन्हें प्रस्तुत करने और अक्सर भविष्य में पुन: उपयोग के लिए उन्हें कैशिंग करने के लिए जिम्मेदार है। अधिक जटिल रेंडरिंग तर्क के कारण कार्यान्वयन को पठनीय और रखरखाव योग्य बनाए रखने के लिए कोड को `p5.Texture`, `p5.RenderBuffer`, और `p5.DataArray` जैसे कई वर्गों में विभाजित करने की आवश्यकता होती है।
+- **वेबजीएल मोड अधिक अनुकूलन प्रदान करता है।** उदाहरण के लिए, जबकि 2डी मोड यह नियंत्रित नहीं करता है कि वक्र कैसे प्रस्तुत किए जाते हैं, वेबजीएल उन्हें त्रिकोण में परिवर्तित करने के लिए जिम्मेदार है। हालांकि यह एक समझदार डिफ़ॉल्ट चुनता है, `कर्वडिटेल()` एपीआई उपयोगकर्ताओं को यह नियंत्रित करने देता है कि कितने लाइन सेगमेंट का उपयोग करना है, क्योंकि हम प्रत्येक उपयोग के मामले के लिए गुणवत्ता और प्रदर्शन के सर्वोत्तम संतुलन की भविष्यवाणी नहीं कर सकते हैं।
+- **वेबजीएल मोड को उच्च और निम्न-स्तरीय एपीआई को संतुलित करना होगा।** चूंकि ब्राउज़र वेबजीएल एपीआई के साथ बेहतर नियंत्रण उपलब्ध है, इसलिए पी5.जेएस का वेबजीएल मोड उपयोगकर्ताओं को कुछ हद तक नियंत्रण प्रदान करने में सक्षम है जहां 2डी मोड नहीं कर सकता है। फिर हमें उपयोगकर्ताओं के लिए अमूर्तता का सही स्तर चुनने के कार्य का सामना करना पड़ता है। बहुत अधिक है, और वे ब्राउज़र द्वारा प्रदान की जाने वाली कुछ चीज़ों का लाभ उठाने में असमर्थ हैं; बहुत कम, और हम जटिलता और प्रदर्शन के प्रबंधन का बहुत सारा काम उपयोगकर्ता पर डाल देते हैं।
+
+
+## आकृतियाँ बनाना
+
+### आकृतियाँ बनाना: भरण, स्ट्रोक, और 3डी ज्यामिति
+
+2D और WebGL दोनों में p5.js द्वारा खींची गई हर चीज़ में भरण और स्ट्रोक शामिल हैं। कभी-कभी, हम केवल एक या दूसरे को ही बनाते हैं, लेकिन प्रत्येक आकृति को किसी भी घटक को खींचने के लिए तैयार होना चाहिए।
+
+वेबजीएल में सभी आकृतियाँ त्रिभुजों से बनी हैं। जब कोई उपयोगकर्ता `सर्कल()`, `beginShape(),` या `वर्टेक्स()` जैसे फ़ंक्शन को कॉल करता है, तो रेंडरर को [आकार को बिंदुओं की श्रृंखला में तोड़ना होगा](https://github.com/processing/p5.js/blob/main/src/webgl/3d_primitives.js). बिंदु रेखाओं में जुड़े हुए हैं, और रेखाएँ त्रिभुजों में। उदाहरण के लिए, `सर्कल()` यह पता लगाने के लिए त्रिकोणमिति का उपयोग करता है कि सर्कल के साथ बिंदु कहां रखे जाएं। `curveVertex()` और `bezierVertex()` किसी भी बेज़ियर कर्व को बिंदुओं में बदलने के लिए लुक-अप टेबल बनाते हैं।
+
+
+#### Fills
+
+भराव बनाने के लिए, किसी आकृति की रूपरेखा को त्रिकोणों से भरना होगा। कुछ ड्राइंग फ़ंक्शन जैसे `beginShape(TRIANGLE_STRIP)` पहले से ही भरण के लिए त्रिकोण प्रदान करते हैं। यदि बनाई जा रही आकृति पहले से ही त्रिकोणों का उपयोग करके नहीं बनाई गई है, तो हम इसे तोड़ने के लिए लाइब्रेरी [libtess](https://github.com/brendankenny/libtess.js/) का उपयोग करते हैं: [p5.RendererGL.Immediate.js](https://github.com/processing/p5.js/blob/main/src/webgl/p5.RendererGL.Immediate.js) में , हम `_processVertices()` के माध्यम से बहुभुज रूपरेखा चलाते हैं। लिबटेस द्वारा उन्हें त्रिकोणों में बदलने के बाद, वे एक ऐसे प्रारूप में होते हैं जहां एक शेडर उन्हें स्क्रीन पर खींच सकता है।
+
+
+#### Strokes
+
+उनके नाम के बावजूद, अलग-अलग चौड़ाई और शैलियों के स्ट्रोक का समर्थन करने के लिए स्ट्रोक को भी भरने की आवश्यकता होती है। किसी आकृति की रूपरेखा के साथ रेखाओं को क्षेत्रफल के साथ आकृतियाँ बनाने के लिए अपने केंद्र से विस्तारित होने की आवश्यकता होती है। स्ट्रोक का विस्तार तीन प्रकार की आकृतियाँ बनाता है: जोड़, कैप और खंड, जैसा नीचे दिखाया गया है।
+
+<img alt="एक स्ट्रोक द्वारा बनाए गए खंड, जोड़ और टोपी के आकार का चित्रण।" src="images/line-diagram.svg" width="600" />
+<!-- Generated via https://codepen.io/davepvm/pen/ZEVdppQ -->
+
+जहां दो रेखा खंड जुड़ते हैं, वहां हम जोड़ जोड़ते हैं।
+
+- एक मेटर जोड़ आयतों के किनारों को तब तक फैलाता है जब तक कि वे एक बिंदु पर प्रतिच्छेद न कर दें।
+- एक बेवल जोड़ आयतों के कोनों को एक सीधी रेखा से जोड़ता है।
+- एक गोल जोड़ कोनों को एक गोलाकार चाप से जोड़ता है। 
+
+हम लाइन त्रिकोणों की पुनर्गणना किए बिना जॉइन शैलियों को बदलने का समर्थन करते हैं। ऐसा करने के लिए, हम प्रत्येक पंक्ति को दो त्रिभुजों से बने एक चतुर्भुज से जोड़ते हैं। क्वाड सीमा सभी संभावित सम्मिलित शैलियों को सीमित करती है। हम क्वाड के भीतर केवल उन पिक्सल को प्रदर्शित करने के लिए शेडर का उपयोग करते हैं जो चयनित जॉइन शैली में मौजूद हैं। हम बताते हैं कि प्रत्येक शैली नीचे दिए गए क्वाड में कैसे फिट बैठती है।
+
+<img alt="एक स्ट्रोक जॉइन का बाउंडिंग क्वाड और प्रत्येक जॉइन शैली इसमें कैसे फिट होती है। बाउंडिंग क्वाड एक वर्ग है। मेटर जोड़ पूरे वर्ग को भर देते हैं। वर्ग के एक कोने से गोल जुड़ता है। बेवेल जोड़ वर्ग को एक सीधी रेखा में आधा काटते हैं।" src="images/joins.svg" width="600" />
+
+हम लाइनों के कटे हुए सिरों पर मौजूद स्ट्रोक कैप के लिए एक समान रणनीति का उपयोग करते हैं। प्रत्येक टोपी एक चतुर्भुज है जो गोल, चौकोर और विस्तारित टोपी शैलियों को सीमित करती है। लाइन शेडर यह निर्धारित करता है कि उसे उन सीमाओं के भीतर कौन से पिक्सेल खींचने की आवश्यकता है। नीचे, हम बताते हैं कि प्रत्येक शैली क्वाड में कैसे फिट बैठती है।
+
+<img alt="स्ट्रोक कैप का बाउंडिंग क्वाड और प्रत्येक शैली इसमें कैसे फिट होती है। बाउंडिंग क्वाड एक आयत है। विस्तारित टोपी पूरे आयत को भर देती है। गोल टोपी आयत के अंदर एक अर्धवृत्त रखती है। वर्गाकार टोपी आयत को खाली छोड़ देती है।" src="images/caps.svg" width="600" />
+
+3डी आकृतियों में स्ट्रोक भी हो सकते हैं, लेकिन स्ट्रोक आकृतियों की गणना 2डी में की जाती है। इसका मतलब है कि वे कैमरे के परिप्रेक्ष्य के आधार पर बदल सकते हैं। हम यथासंभव पुनर्गणना से बचना चाहते हैं, इसलिए हम उस लाइन के बारे में सारी जानकारी संग्रहीत करते हैं जो कैमरे पर निर्भर नहीं है:
+
+- हम **लाइन के केंद्र बिंदुओं** को मॉडल स्पेस में शामिल करते हैं, जो नीचे लाल रंग में दिखाया गया है।
+- हम प्रत्येक आकृति के आरंभ और अंत में **रेखा की दिशा**, उसकी स्पर्शरेखा, क्रमशः नीले और गुलाबी रंग में दिखाते हैं। इससे हमें उन जोड़ों के आकार की गणना करने में मदद मिलती है जहां दो रेखाएं जुड़ती हैं।
+- हम **एक ध्वज शामिल करते हैं जो आकृति के प्रत्येक कोने को विशिष्ट रूप से पहचानता है।** स्पर्शरेखा और सामान्य (स्पर्शरेखा का 90-डिग्री रोटेशन) के साथ संयुक्त, यह यह निर्धारित करने में मदद करता है कि रेखा को मोटाई देने के लिए किस दिशा में विस्तार करना है .
+
+रेखा खींचने के लिए, हम स्क्रीन स्पेस में अंतिम रेखा स्थिति उत्पन्न करने के लिए उस जानकारी को एक शेडर में कैमरा इंट्रिनिक्स के साथ जोड़ते हैं।
+
+<img alt="रेखाओं और उनके बनने वाले अंतिम आकारों के बारे में संग्रहीत जानकारी।" src="images/flags.svg" width="600" />
+
+
+### आकार प्रतिपादन: तत्काल और बनाए रखा मोड
+
+स्क्रीन पर आकृतियाँ बनाने के लिए p5.js दो मार्गों का उपयोग करता है: **तत्काल मोड** और **बरकरार मोड।**
+
+**तत्काल मोड** उन आकृतियों के लिए अनुकूलित है जो हर फ्रेम को बदलती हैं। यदि आप एक ऐसा वक्र बना रहे हैं जो प्रत्येक फ्रेम को बदलता है, तो हर बार जब आप इसे बनाते हैं तो इसका आकार डेटा अलग होगा। इस वजह से, तत्काल मोड इसके लिए सबसे उपयुक्त है। यह p5.js को इंगित करता है कि इसे पुन: उपयोग के लिए आकृति को संग्रहीत करने में समय बर्बाद करने की आवश्यकता नहीं है, और यह ग्राफ़िक्स मेमोरी को समय के साथ सभी आकार विविधताओं से भरने से बचाता है। निम्नलिखित फ़ंक्शन इस मोड का उपयोग करते हैं:
+
+- `vertex()`, `curveVertex()`, `bezierVertex()`, और `quadraticVertex()`, जिसे `beginShape()` और `endShape()` के बीच बुलाया जाता है
+- `rect()` गोलाकार कोनों का उपयोग करते समय
+- `bezier()`
+- `curve()`
+- `line()`
+- `image()`
+
+बनाए रखा गया मोड उन आकृतियों के लिए अनुकूलित है जिन्हें आपको दोबारा बनाते रहना होगा और आकार नहीं बदलना होगा। एक बार जब कोई आकृति त्रिभुजों से बन जाती है और उसे खींचने के लिए GPU पर भेज दी जाती है, तो रिटेन्ड मोड उसे वहीं रखता है। इसे फिर से त्रिकोणित करने या जीपीयू को दोबारा भेजे बिना समय बर्बाद किए बिना इसे फिर से खींचा जा सकता है। सहेजा गया आकार डेटा p5.Geometry ऑब्जेक्ट में रखा जाता है। p5.जियोमेट्री त्रिकोण डेटा संग्रहीत करता है और GPU पर इसके अपलोड किए गए बफ़र्स का ट्रैक रखता है। `freeGeometry()` को कॉल करने से स्थान बनाने के लिए GPU डेटा साफ़ हो जाता है। इसके बाद इसे दोबारा ड्रॉ करने पर डेटा दोबारा अपलोड हो जाएगा। p5.js में कई 3D आकार ड्राइंग फ़ंक्शन, जैसे `sphere()` या `cone()`, आंतरिक रूप से इसका उपयोग करते हैं।
+
+आप तत्काल मोड कमांड से p5.Geometry बनाने के लिए buildGeometry() का उपयोग कर सकते हैं। आप इसे एक ऐसे फ़ंक्शन के साथ कॉल करते हैं जो किसी भी p5.js आकार ड्राइंग फ़ंक्शंस की एक श्रृंखला चलाता है। यह फ़ंक्शन चलाता है, आकृतियों को एक नए p5.Geometry में एकत्रित करता है, और उसे वापस कर देता है। फिर p5.ज्योमेट्री को भविष्य में कुशलतापूर्वक खींचा और पुनः तैयार किया जा सकता है।
+
+
+## सामग्री, रोशनी और शेडर
+
+हमारे द्वारा बनाई गई प्रत्येक आकृति को भरने के लिए एक ही शेडर का उपयोग किया जाता है, और उसके स्ट्रोक्स के लिए एक ही शेडर का उपयोग किया जाता है। कुछ डिफ़ॉल्ट शेडर्स हैं जिन्हें कोई भी p5.js में से चुन सकता है। आप डिफ़ॉल्ट शेडर के बजाय अपना स्वयं का शेडर भी लिख और उपयोग कर सकते हैं।
+
+डिफ़ॉल्ट शेडर्स p5.js की प्रकाश व्यवस्था और सामग्री प्रणाली के साथ काम करते हैं। उपयोगकर्ता किसी आकार के साथ यह निर्दिष्ट कर सकता है कि दृश्य में कौन सी रोशनी हैं और प्रत्येक वस्तु रंग और चमक सहित प्रकाश पर कैसे प्रतिक्रिया करती है। यह जानकारी खींची गई प्रत्येक वस्तु के लिए शेडर को दी जाती है। कस्टम शेडर्स समान प्रकाश व्यवस्था और सामग्री जानकारी तक भी पहुंच सकते हैं, जिससे उपयोगकर्ताओं और लाइब्रेरी निर्माताओं को डिफ़ॉल्ट रेंडरिंग व्यवहार का विस्तार करने की अनुमति मिलती है।
+
+
+### शेडर्स
+
+P5 में कुछ शेडर्स निर्मित हैं:
+
+- **रंग शेडर:** सपाट रंगों को चित्रित करने के लिए, `भरण()` या `स्ट्रोक()` का उपयोग करके सक्रिय किया जाता है।
+- **लाइटिंग शेडर:** जटिल प्रकाश व्यवस्था और बनावट के साथ 2डी और 3डी आकार बनाने के लिए। `lights()`, `ambientLight()`, `directionalLight()`, `pointLight()`, और `spotLight()` को कॉल करके सक्रिय किया गया। प्रत्येक प्रकाश सूची में एक प्रकाश जोड़ता है। सभी अतिरिक्त रोशनी आकृति की छायांकन में योगदान करती हैं। यदि आप रोशनी का उपयोग नहीं करते हैं, तो रंग शेडर का उपयोग करके आकृति बनाई जाएगी, जो केवल भरण रंग का उपयोग करता है।
+- **सामान्य/डीबग शेडर:** सामान्य सतह को रंग के रूप में उपयोग करके 2डी और 3डी आकार बनाने के लिए। इसे `normalMaterial()` कहकर सक्रिय किया जाता है।
+
+
+### रोशनी
+
+उपयोगकर्ता `ambientLight()`, `directionalLight()`, `pointLight()`, और `spotLight()` सेट कर सकते हैं। प्रत्येक प्रकाश सूची में एक प्रकाश जोड़ता है। सभी अतिरिक्त रोशनी आकृति की छायांकन में योगदान करती हैं। उन सभी का एक रंग होता है, और कुछ के कुछ अन्य पैरामीटर होते हैं, जैसे स्थिति या दिशा।
+
+`एम्बिएंटलाइट()` को छोड़कर सभी के लिए, जोड़ा गया प्रत्येक प्रकाश आकृतियों के दृश्य-स्वतंत्र प्रकाश और दृश्य-निर्भर प्रतिबिंबों में योगदान देता है। प्रत्येक प्रकाश का प्रतिबिंब, डिफ़ॉल्ट रूप से, उस प्रकाश के रंग से मेल खाता है। यदि वांछित है, तो कोई `specularColor()` सेट करके सभी प्रतिबिंबों का रंग बदल सकता है।
+
+यदि आप रोशनी का उपयोग नहीं करते हैं, तो आकृति **रंग शेडर** का उपयोग करके बनाई जाएगी, जो केवल भरण रंग का उपयोग करता है।
+
+
+### सामग्री
+
+प्रत्येक 3डी ऑब्जेक्ट में कुछ भौतिक गुण होते हैं जिन्हें उपयोगकर्ता द्वारा निर्धारित किया जा सकता है:
+
+- **रंग भरें:** यह वह रंग है जो आप तब देखते हैं जब रोशनी नहीं होती है। इसे `भरें()` के साथ सेट करें। यदि आकृति बनाने से पहले किया जाए तो यह पूरी आकृति पर लागू होता है। यदि `beginShape()`/`endShape()` के बीच `vertex()` से पहले कॉल किया जाता है, तो यह केवल उस शीर्ष पर लागू होगा। एक बनावट, यदि `बनावट()` पर कॉल से मौजूद है, तो भरण को ओवरराइड कर देगी। जब रोशनी होगी, तो यह रंग प्रकाश के फैले हुए घटक के साथ मिश्रित हो जाएगा। फैला हुआ घटक सतह पर सीधे प्रकाश पड़ने के कारण सतह के उज्ज्वल और अंधेरे क्षेत्रों का वर्णन करता है।
+- **स्पेक्युलर सामग्री:** यह वह रंग है जो प्रकाश के स्पेक्युलर घटक के साथ मिश्रित हो जाता है। स्पेक्युलर घटक आकृति की सतह पर दिखाई देने वाले प्रतिबिंबित हाइलाइट्स का वर्णन करता है। इस पैरामीटर को `specularMaterial()` के साथ सेट करें। यदि अनिर्दिष्ट है, तो आकृति में कोई प्रतिबिंब नहीं होगा।
+- **चमकदारता:** `चमकदार()` के साथ सेट करें, यह स्पेक्युलर प्रतिबिंब कितने तेज हैं।
+- **परिवेश सामग्री:** यह वह रंग है जो परिवेशीय प्रकाश के साथ मिश्रित हो जाता है। परिवेशीय प्रकाश आकृति पर निरंतर सर्वदिशात्मक प्रकाश का वर्णन करता है। इस पैरामीटर को `ambientMaterial()` के साथ सेट करें। यदि अनिर्दिष्ट है, तो यह भरण रंग के समान होगा।
+- **उत्सर्जक सामग्री**: `उत्सर्जक सामग्री()` के साथ सेट करें, यह आकृति की रोशनी में एक स्थिर रंग जोड़ता है, जैसे कि वह उस रंग की अपनी रोशनी पैदा कर रहा हो।
+
+
+### शेडर कार्यान्वयन
+
+प्रकाश व्यवस्था और सामग्री पैरामीटर शेडर विशेषताओं और वर्दी में बदल जाते हैं। यदि आप उन्हें कस्टम शेडर में संदर्भित करते हैं, तो p5.js उन्हें स्वचालित रूप से आपूर्ति करेगा।
+
+जबकि उन्नत शेडर लेखक इन गुणों का लाभ उठा सकते हैं, नए उपयोगकर्ताओं के लिए यह अस्पष्ट हो सकता है। भविष्य के लक्ष्य अनुभाग में, हम एपीआई में सुधार के लिए कुछ योजनाओं का वर्णन करते हैं। हम सार्वजनिक रूप से इसका दस्तावेजीकरण करने और इसका समर्थन करने से पहले इसमें सुधार करना चाह सकते हैं।
+
+
+#### वैश्विक
+
+सभी संदर्भों में सभी वस्तुओं के लिए, निम्नलिखित वैश्विक वर्दी उपलब्ध हैं:
+
+- `यूनिफ़ॉर्म mat4 uModelViewMatrix`: ऑब्जेक्ट-स्पेस स्थिति को कैमरा-स्पेस में बदलने के लिए एक मैट्रिक्स
+- `यूनिफ़ॉर्म mat4 uProjectionMatrix`: कैमरा-स्पेस स्थिति को स्क्रीन स्पेस में बदलने के लिए एक मैट्रिक्स
+- `यूनिफ़ॉर्म mat3 uNormalMatrix`: ऑब्जेक्ट-स्पेस मानदंडों को कैमरा-स्पेस में परिवर्तित करने के लिए एक मैट्रिक्स
+
+इसके अतिरिक्त, ये प्रति-शीर्ष गुण विशेषताओं के रूप में उपलब्ध हैं:
+
+- `विशेषता vec3 aPosition`: वस्तु स्थान में शीर्ष की स्थिति
+- `विशेषता vec3 aNormal`: भरण के लिए, सतह से बाहर की ओर इंगित करने वाली दिशा
+- `विशेषता vec2 aTexCoord`: भरण के लिए, बनावट छवि पर किसी स्थान को संदर्भित करते हुए x और y में 0 और 1 के बीच एक समन्वय
+- `विशेषता vec3 aVertexColor`: भरने के लिए, एक वैकल्पिक प्रति-वर्टेक्स रंग
+
+
+#### रोशनी
+
+- `यूनिफ़ॉर्म बूल यूयूज़लाइटिंग`: रोशनी प्रदान की गई है या नहीं
+
+यदि `uUseLighting` सेट किया गया है, तो आगे की प्रकाश व्यवस्था की जानकारी इसमें दी जाएगी:
+
+
+##### परिवेशीय रोशनी
+
+- `यूनिफ़ॉर्म int uAmbientLightCount`: कितनी परिवेशी लाइटें मौजूद हैं, अधिकतम 5 तक
+- `यूनिफ़ॉर्म vec3 uAmbientColor[5]`: परिवेशीय हल्के रंग
+
+
+##### दिशात्मक रोशनी
+
+- `यूनिफ़ॉर्म int uDirectionalLightCount`: कितनी दिशात्मक रोशनी मौजूद हैं, अधिकतम 5 तक
+- `यूनिफ़ॉर्म vec3 uLightingDirection[5]`: प्रकाश दिशाएँ
+- `यूनिफ़ॉर्म vec3 uDirectionalDiffuseColors[5]`: हल्के फैले हुए रंग
+- `यूनिफ़ॉर्म vec3 uडायरेक्शनल स्पेक्युलर कलर्स[5]`: हल्के स्पेक्युलर रंग
+
+
+##### प्वाइंट लाइटें
+
+- `यूनिफ़ॉर्म int uPointLightCount`: अधिकतम 5 तक, कितनी पॉइंट लाइटें मौजूद हैं
+- `यूनिफ़ॉर्म vec3 uPointLightLocation[5]`: बिंदु रोशनी का स्थान
+- `यूनिफ़ॉर्म vec3 uPointLightDiffuseColors[5]`: बिंदु रोशनी के बिखरे हुए रंग
+- `यूनिफ़ॉर्म vec3 uPointLightSpeculularColors[5]`: पॉइंट लाइट के स्पेक्युलर रंग
+
+##### स्पॉट लाइटें
+
+- `यूनिफ़ॉर्म इंट यूस्पॉटलाइटकाउंट`: कितनी स्पॉट लाइटें मौजूद हैं, अधिकतम 5 तक
+- `यूनिफ़ॉर्म फ़्लोट uSpotLightAngle[5]`: स्पॉट लाइट शंकु त्रिज्या
+- `यूनिफ़ॉर्म फ़्लोट uSpotLightConc[5]`: प्रत्येक स्पॉट लाइट की एकाग्रता (फ़ोकस)
+- `यूनिफ़ॉर्म vec3 uSpotLightDiffuseColors[5]`: हल्के फैले हुए रंग
+- `यूनिफ़ॉर्म vec3 uSpotLightSpeculularColors[5]`: हल्के स्पेक्युलर रंग
+- `यूनिफ़ॉर्म vec3 uSpotLightLocation[5]`: स्पॉट लाइट स्थान
+- `यूनिफ़ॉर्म vec3 uSpotLightDirection[5]`: स्पॉट लाइट दिशाएँ
+
+
+#### सामग्री
+
+##### रंग भरना
+
+- `यूनिफ़ॉर्म vec4 uMaterialColor`: आकार भरें रंग
+- `यूनिफ़ॉर्म बूल uUseVertexColor`: क्या प्रति-वर्टेक्स रंग हैं जो आकार भरने वाले रंग को ओवरराइड करते हैं
+- `विशेषता vec4 aVertexColor`: प्रति-वर्टेक्स भरण रंग
+- `यूनिफ़ॉर्म बूल इज़टेक्सचर`: क्या कोई बनावट निर्दिष्ट है
+- `यूनिफ़ॉर्म सैम्पलर2डी यूसैम्पलर`: एक बनावट
+- `यूनिफ़ॉर्म vec4 uTint`: बनावट के लिए एक टिंट गुणक
+
+
+##### स्पेक्युलर प्रतिबिंब
+
+- `यूनिफ़ॉर्म बूल यूस्पेक्युलर`: क्या प्रतिबिंब दिखाना है
+- `यूनिफ़ॉर्म फ़्लोट यू शाइनीनेस`: सामग्री की चमक
+- `यूनिफ़ॉर्म vec4 uSpeularMatColor`: स्पेक्युलर प्रकाश के साथ मिश्रण करने के लिए सामग्री का रंग
+
+
+##### परिवेश रंग
+
+- `यूनिफ़ॉर्म बूल uHasSetAmbient`: क्या परिवेश रंग सेट किया गया है या क्या इसे डिफ़ॉल्ट रूप से भरण रंग में सेट किया जाना चाहिए
+- `यूनिफ़ॉर्म vec4 uAmbientMatColor`: परिवेश प्रकाश के साथ मिश्रण करने के लिए सामग्री का रंग
+
+
+#### अन्य शेडर इनपुट
+
+##### पंक्तियाँ
+
+डिफ़ॉल्ट लाइन शेडर स्वचालित रूप से वर्दी में इन वैश्विक गुणों के साथ आपूर्ति की जाती है:
+
+- `uniform vec4 uViewport`: एक वेक्टर जिसमें स्क्रीन आयत का `[minX, minY, maxX, maxY]` होता है
+- `uniform इंट यूपर्सपेक्टिव`: एक बूलियन निर्दिष्ट करता है कि लाइन मोटाई पर परिप्रेक्ष्य प्रक्षेपण लागू करना है या नहीं
+- `uniform इंट यूस्ट्रोकजॉइन`: जॉइन शैली का प्रतिनिधित्व करने वाला एक एनम। 0, 1, और 2 `ROUND`, `MITER`, `BEVEL` का प्रतिनिधित्व करते हैं।
+- `uniform int uStrokeCap`: कैप शैली का प्रतिनिधित्व करने वाला एक एनम। 0, 1, और 2 'गोल', 'प्रोजेक्ट', 'वर्ग' का प्रतिनिधित्व करते हैं।
+
+इसमें निम्नलिखित प्रति-शीर्ष विशेषताएँ भी हैं:
+
+- `uniform vec3 aTangentIn`: रेखा खंड की शुरुआत में 3डी दिशा
+- `uniform vec3 aTangentOut`: रेखा खंड के अंत में 3D दिशा
+- `attribute float aside`: एक एनम यह दर्शाता है कि स्ट्रोक के किस भाग पर बिंदु स्थित है। विवरण के लिए स्ट्रोक्स अनुभाग देखें।
+
+##### अंक
+
+- `uniform float uPointSize`: खींचे जा रहे बिंदु की त्रिज्या
+
+## कक्षाएं
+
+अधिकांश WebGL कोड का प्रवेश बिंदु **p5.RendererGL** के माध्यम से होता है। शीर्ष-स्तरीय p5.js फ़ंक्शंस वर्तमान रेंडरर को पास कर दिए जाते हैं। 2डी और वेबजीएल दोनों मोड में रेंडरर क्लास हैं जो इस सामान्य इंटरफ़ेस के अनुरूप हैं। तत्काल मोड और बनाए रखा मोड फ़ंक्शन **p5.RendererGL.Immediate.js** और **p5.RendererGL.Retained.js** में विभाजित हैं।
+
+रेंडरर के भीतर, मॉडलों के संदर्भ **retainedMode.geometry** मानचित्र में संग्रहीत होते हैं। प्रत्येक मान **p5.Geometry** के बफ़र्स को संग्रहीत करने वाला एक ऑब्जेक्ट है। पहली बार मॉडल (योर ज्योमेट्री) को कॉल करते समय, रेंडरर मानचित्र में एक प्रविष्टि जोड़ता है। इसके बाद यह ज्यामिति के GPU संसाधनों के संदर्भ संग्रहीत करता है। यदि आप एक p5.Geometry को मुख्य कैनवास और एक WebGL p5.Graphics पर भी बनाते हैं, तो इसमें दो रेंडरर्स में प्रविष्टियाँ होंगी।
+
+प्रत्येक सामग्री को **p5.Shader द्वारा दर्शाया जाता है।** आप शेडर (आपका शेडर) फ़ंक्शन के माध्यम से रेंडरर में वर्तमान शेडर सेट करते हैं। यह क्लास शेडर सोर्स कोड संकलित करने और शेडर यूनिफॉर्म सेट करने का काम संभालती है।
+
+शेडर यूनिफ़ॉर्म सेट करते समय, यदि यूनिफ़ॉर्म प्रकार एक छवि है, तो रेंडरर इसके लिए एक p5.Texture बनाता है। प्रत्येक p5.Image, p5.Graphics, p5.MediaElement, या p5.Framebuffer एसेट को एक मिलेगा। यह GPU पर छवि डेटा के प्रतिनिधित्व का ट्रैक रखता है। शेडर में एसेट का उपयोग करने से पहले, यदि आवश्यक हो तो p5.js GPU को नया डेटा भेजेगा। छवियों के लिए, ऐसा तब होता है जब किसी उपयोगकर्ता ने किसी छवि के पिक्सेल को मैन्युअल रूप से अपडेट किया हो। ऐसा डेटा वाली परिसंपत्तियों के लिए हर फ्रेम में होता है, जो प्रत्येक फ्रेम में बदल सकता है, जैसे कि वीडियो या पी5.ग्राफिक्स।
+
+**p5.Framebuffer** ऑब्जेक्ट से संबंधित बनावट अद्वितीय हैं। फ़्रेमबफ़र ग्राफ़िक्स की तरह होते हैं: वे उन सतहों का प्रतिनिधित्व करते हैं जिन पर खींचा जा सकता है। P5.ग्राफिक्स के विपरीत, फ़्रेमबफ़र्स पूरी तरह से GPU पर रहते हैं। यदि कोई शेडर में बनावट के रूप में p5.ग्राफिक्स का उपयोग करता है, तो डेटा को सीपीयू से स्थानांतरित करने की आवश्यकता होती है। यह अक्सर एक प्रदर्शन बाधा हो सकती है। इसके विपरीत, फ़्रेमबफ़र पर ड्राइंग करते समय, आप सीधे इसकी GPU बनावट पर आकर्षित होते हैं। इस वजह से, कोई अतिरिक्त डेटा स्थानांतरण आवश्यक नहीं है। WebGL मोड इस कारण से जहां संभव हो वहां p5.ग्राफिक्स पर p5.Framebuffers का उपयोग करने का प्रयास करता है।
+
+
+## भविष्य के लक्ष्य
+
+वर्तमान में, WebGL मोड विभिन्न कार्यों के लिए कार्यात्मक है, लेकिन कई उपयोगकर्ता और पुस्तकालय निर्माता इसे नई दिशाओं में विस्तारित करना चाहते हैं। हमारा लक्ष्य उपयोगकर्ताओं और पुस्तकालय निर्माताओं के लिए बिल्डिंग ब्लॉक्स का एक सेट बनाना है जिससे वे एक्सटेंशन तैयार कर सकें। एक ब्लॉक को "पूर्ण" माना जा सकता है जब इसमें एक एक्स्टेंसिबल एपीआई हो जिसे हम आत्मविश्वास से समर्थन करने के लिए प्रतिबद्ध कर सकें। वेबजीएल मोड के लिए एक प्रमुख मील का पत्थर तब होगा जब हमारे पास पुस्तकालयों के पारिस्थितिकी तंत्र के लिए ऐसे ब्लॉकों का पर्याप्त सेट होगा। वर्तमान में विस्तार समर्थन की कमी वाले मुख्य क्षेत्र ज्यामिति और सामग्री हैं।
+
+- **समृद्ध सामग्री का समर्थन करने के लिए p5.Geometry का विस्तार करें।** कोई ज्यामिति बना सकता है, लेकिन कई कार्य जिन्हें उपयोगकर्ता पूरा करना चाहता है, वे अभी तक स्थिर एपीआई के साथ समर्थित नहीं हैं। कोई व्यक्ति ज्यामिति को कुशलतापूर्वक अद्यतन करना चाह सकता है, जो एनिमेटेड gltf मॉडल का समर्थन करने के लिए आवश्यक है। कोई व्यक्ति एकाधिक सामग्रियों को एक वस्तु में समूहित करना चाह सकता है, यदि वे किसी आयातित मॉडल में मौजूद हों। कोई शेडर के साथ काम करने के लिए कस्टम वर्टेक्स विशेषताएँ जोड़ना चाह सकता है। ये कार्य वर्तमान में असमर्थित हैं.
+- **कम भंगुर कस्टम शेडर्स सक्षम करें।** एक ऐसा शेडर बनाने के लिए जो p5.js की प्रकाश व्यवस्था और सामग्री प्रणाली को एकीकृत करता है, उपयोगकर्ता को वर्तमान में स्क्रैच से शेडर बनाने के लिए मजबूर किया जाता है। ये शेडर्स अक्सर डिफ़ॉल्ट शेडर्स के हिस्सों को कॉपी और पेस्ट करते हैं। यदि आंतरिक नामकरण या संरचना में परिवर्तन होता है तो यह संस्करणों के बीच टूट सकता है। कम भंगुर होने के लिए, पुस्तकालयों को डिफ़ॉल्ट टुकड़ों को आयात और पुन: उपयोग करने में सक्षम होना चाहिए। यह पुस्तकालयों को पोजिशनिंग लॉजिक का पुन: उपयोग करने या पोजिशनिंग लॉजिक को बढ़ाने की सुविधा देता है, लेकिन शेडिंग लॉजिक का पुन: उपयोग करने देता है। वर्तमान में [इस कार्य के लिए एक मुद्दा खुला है।](https://github.com/processing/p5.js/issues/6144)
+- **प्रदर्शन में सुधार।** WebGL मोड सुविधाओं और प्रदर्शन के बीच संतुलन बनाने का प्रयास करता है। एक तरीका आउटपुट गुणवत्ता को ट्यून करने के लिए एपीआई पेश करना है, जैसे कि कैसे `कर्वडिटेल ()` तेज़ लेकिन निम्न-गुणवत्ता वाले कर्व्स की अनुमति देता है। लाइन रेंडरिंग अपनी वर्तमान स्थिति में सामान्य प्रदर्शन बाधाओं में से एक है, और इसमें कम निष्ठा लेकिन उच्च प्रदर्शन विकल्प होने से लाभ हो सकता है। एक अन्य विधि नए प्रकार के ऑब्जेक्ट और रेंडरिंग विधियों को पेश करना है जो विभिन्न उपयोग पैटर्न के लिए अनुकूलित हैं, जैसे कि कैसे `एंडशेप (चाहिए बंद करें, गिनती करें)` अब कई आकृतियों के अधिक कुशल ड्राइंग के लिए वेबजीएल 2 इंस्टेंस्ड रेंडरिंग का समर्थन करता है।
\ No newline at end of file