diff --git a/contributor_docs/hi/access.md b/contributor_docs/hi/access.md
index 50c3015358..20c3f54826 100644
--- a/contributor_docs/hi/access.md
+++ b/contributor_docs/hi/access.md
@@ -1,40 +1,56 @@
-# पहुँच पर हमारा ध्यान
-
-[२०१९ के योगदानकर्ताओं के सम्मेलन](https://p5js.org/community/contributors-conference-2019.html) में, हमने पहुंच को बढ़ाने के लिए केवल p5.js में सुविधाओं को जोड़ने के लिए एक प्रतिबद्धता बनाई (जिसका अर्थ है समावेश / और / पहुंच क्षमता) । इसका अर्थ है विविधता के वैक्टर (जैसे लिंग, सामाजिक, आर्थिक, नस्ल, जातीयता, भाषा, विकलांगता, आदि) पर विचार करना जो पहुंच / भागीदारी को प्रभावित कर सकता है; और बाधाओं को स्वीकार, विघटित करने और रोकने के लिए कार्रवाई कर रहा है। हम p5.js. के साथ अधिक विशेषाधिकार प्राप्त समूहों के निरंतर आराम से अधिक ऐतिहासिक रूप से हाशिए वाले समूहों की आवश्यकताओं को प्राथमिकता देते हैं।
+
-हम उन सुविधा अनुरोधों को स्वीकार नहीं करेंगे जो पहुंच बढ़ाने के हमारे प्रयास का समर्थन नहीं करते हैं। आप इस मानदंड को हमारे मुद्दे और पुल अनुरोध टेम्पलेट्स में परिलक्षित देखेंगे।
-
-यह p5.js. के भीतर पहुंच और समावेश के बारे में चल रही बातचीत का हिस्सा है इन मूल मूल्यों को धारण करने की हमारी मंशा जिससे p5.js बनाया गया है, हमारे [सामुदायिक वक्तव्य](../CODE_OF_CONDUCT.md) में रखी गई है, जिसे [2015 के योगदानकर्ताओं के सम्मेलन](https://p5js.org/community/contributors-conference-2015.html) में लिखा गया था।
+# पहुँच पर हमारा ध्यान
-**कृपया इसे एक प्रारंभिक बिंदु माने** हम इस बारे में अधिक बातचीत को आमंत्रित करना चाहते हैं कि पहुँच का क्या अर्थ है और हम इसे कैसे प्राथमिकता दे सकते हैं।
+[2019 योगदानकर्ता सम्मेलन](https://p5js.org/community/contributors-conference-2019.html) में, p5.js ने केवल नई सुविधाओं को जोड़ने की प्रतिबद्धता जताई जो पहुंच (समावेशन और पहुंच) को बढ़ाती हैं। हम उन सुविधा अनुरोधों को स्वीकार नहीं करेंगे जो इन प्रयासों का समर्थन नहीं करते हैं। हम बाधाओं को स्वीकार करने, ख़त्म करने और रोकने के कार्य के लिए प्रतिबद्ध हैं। इसका मतलब विविधता के अनुभवों को जोड़ने पर विचार करना है जो पहुंच और भागीदारी को प्रभावित कर सकते हैं। इनमें लिंग, नस्ल, जातीयता, कामुकता, भाषा, स्थान आदि का संरेखण शामिल है। हम p5.js समुदाय के भीतर विशेषाधिकार प्राप्त लोगों की निरंतर सुविधा पर हाशिए पर रहने वाले समूहों की जरूरतों को केंद्रित करते हैं। हम सामूहिक रूप से पहुंच का अर्थ तलाश रहे हैं। हम सीख रहे हैं कि कैसे अभ्यास करें और पहुंच कैसे सिखाएं। हम व्यापक, अंतर्संबंधीय और गठबंधनवादी ढांचे के माध्यम से पहुंच के बारे में सोचना चुनते हैं। यह प्रतिबद्धता हमारे [सामुदायिक वक्तव्य](https://p5js.org/community/) में उल्लिखित p5.js के मूल मूल्यों का हिस्सा है।
-## पहुँच के प्रकार
+## पहुंच के प्रकार
-बढ़ती पहुंच p5.js समुदाय के लोगों की संख्या के विस्तार पर केंद्रित नहीं है। यह p5.js को उपलब्ध कराने और उन लोगों के लिए स्वीकार्य करने पर ध्यान केंद्रित करता है, जिन्हें p5.js समुदाय (जानबूझकर या नहीं) और समान उपकरण और समुदायों से बाहर रखा गया है।
+पहुंच बढ़ाना p5.js समुदाय में लोगों की संख्या का विस्तार करने पर केंद्रित नहीं है। यह उन लोगों के लिए p5.js को उपलब्ध कराने और उन तक पहुंच योग्य बनाने की एक निरंतर प्रतिबद्धता है, जिन्हें संरचनात्मक उत्पीड़न के परिणामस्वरूप p5.js समुदाय से बाहर रखा गया है। यह प्रतिबद्धता p5.js द्वारा प्रदान किए जाने वाले टूल और प्लेटफ़ॉर्म तक फैली हुई है। इसमें p5.js नेतृत्व की संरचना, निर्णय लेना और कार्य भी शामिल हैं। हम गति, विकास और प्रतिस्पर्धा की तकनीकी संस्कृति का विरोध करते हैं। हम सामूहिक देखभाल के कार्यों के रूप में जानबूझकर, धीमेपन, समायोजन और जवाबदेही को प्राथमिकता देते हैं।
-यहां पहुंच का मतलब है कि p5.js को इसके लिए बेहतर बनाना:
+यहां पहुंच का अर्थ है p5.js को इनके लिए न्यायसंगत बनाना:
- जो लोग अंग्रेजी के अलावा अन्य भाषाएं बोलते हैं
-- काले लोग, स्वदेशी लोग और रंग के लोग
-- जो लोग समलैंगिक, समलैंगिक, उभयलिंगी, ट्रांस या क्वीर हैं
-- सीमांत लिंग वाले लोग
-- विकलांग या बीमारी वाले लोग
-- वे लोग जिनके पास कक्षा या आय के कारण रचनात्मक कोडिंग के साथ जुड़ने के अवसरों और / या संसाधनों का अभाव है
-- ओपन सोर्स और क्रिएटिव कोडिंग में बहुत कम या पहले के अनुभव वाले लोग
-- और अन्य लोग जिन्हें व्यवस्थित रूप से बाहर रखा गया है और ऐतिहासिक रूप से कम आंकलन किया गया है
+- काले लोग, स्वदेशी लोग और रंग के लोग
+- समलैंगिक, उभयलिंगी, पैनसेक्सुअल और अलैंगिक लोग
+- ट्रांस, जेंडरफ्लुइड, एजेंडर, इंटरसेक्स, महिलाएं, और हाशिए पर अन्य लिंग वाले लोग
+- जो लोग अंधे हैं, डी/बधिर हैं[^2] या सुनने में कठिन हैं, विकलांग हैं/विकलांगता से ग्रस्त हैं, न्यूरोडायवर्जेंट हैं, और लंबे समय से बीमार हैं[^3]
+- जिन लोगों की आय कम है, या जिनके पास वित्तीय या सांस्कृतिक पूंजी तक पहुंच नहीं है
+- ओपन सोर्स और क्रिएटिव कोडिंग में बहुत कम या कोई पूर्व अनुभव नहीं रखने वाले लोग
+- विविध शैक्षिक पृष्ठभूमि के लोग
+- बच्चों और बुजुर्गों सहित सभी आयु वर्ग के लोग
+- विभिन्न तकनीकी कौशल, उपकरण और इंटरनेट पहुंच वाले लोग
+- विविध धार्मिक पृष्ठभूमि के लोग
+- अन्य लोग जिन्हें व्यवस्थित रूप से बहिष्कृत किया गया है और ऐतिहासिक रूप से कम प्रतिनिधित्व दिया गया है
+- और उसके सभी चौराहे
+
+हम अपनी-अपनी पहचान का वर्णन करने के लिए उपयोग किए जाने वाले शब्दों की जटिलता को पहचानते हैं। भाषा सूक्ष्म है, विकसित हो रही है और विवादित है। यह एक विस्तृत सूची नहीं है। हम अपनी प्रतिबद्धताओं और p5.js समुदाय की विविध आवश्यकताओं के प्रति जवाबदेह होने का प्रयास करते हैं।
### उदाहरण
-हमारे द्वारा पहुँच बढ़ाने के लिए किए गए प्रयासों के उदाहरण हैं:
+ये उन प्रयासों के उदाहरण हैं जिनके बारे में हमारा मानना है कि पहुंच में वृद्धि होगी:
-- अधिक दस्तावेजों और अन्य सामग्रियों का अधिक भाषाओं में अनुवाद करना
-- सहायक तकनीकों के लिए हमारे समर्थन में सुधार (जैसे कि स्क्रीन्रेडर्स)
-- हमारे टूल में वेब कंटेंट अभिगम्यता दिशानिर्देशों का पालन करना और उपयोगकर्ताओं को उनकी परियोजनाओं में उनका पालन करना आसान बनाने की दिशा में काम करना
-- टूल का उपयोग करने वाले लोगों के लिए p5.js त्रुटि संदेशों को अधिक सहायक और सहायक बनाना
-- ऐतिहासिक रूप से रचनात्मक कोडिंग और डिजिटल आर्ट्स में हाशिए पर छोड़ दिए गए समुदायों के भीतर p5.js के शिक्षार्थियों का परामर्श और समर्थन करना
-
-ऐसी अन्य चीजें हैं जिनके बारे में हमने अभी तक सोचा नहीं है और हम यह पता लगाने के लिए उत्साहित हैं कि वे एक साथ क्या कर रहे हैं। यदि आपके पास एक विचार है, तो कृपया [इसे एक मुद्दे के रूप में साझा करें](https://github.com/processing/p5.js/issues/new/choose)।
+- दस्तावेज़ीकरण और अन्य सामग्रियों का अधिक भाषाओं में अनुवाद करना, भाषाई साम्राज्यवाद को विकेंद्रीकृत करना[^4] (उदाहरण के लिए, रोलैंडो वर्गास' [कुना भाषा में प्रसंस्करण](https://medium.com/@ProcessingOrg/culture-as-translation-processing-in) -कुना-लैंग्वेज-विथ-रोलैंडो-वर्गास-एंड-एडिन्सन-इज़क्विएर्डो-8079एफ14851एफ7), फेलिप सैंटोस गोम्स, जूलिया ब्रासिल, कैथरीन फिन ज़ेंडर, और मार्सेला मैनसिनो की [पी सिन्को: पुर्तगाली बोलने वालों के लिए अंतर्राष्ट्रीयकरण और लोकप्रियकरण](https:// मीडियम.com/processing-foundation/translating-p5-js-into-portuguese-for-the-brazilian-community-14b969e77ab1))
+- सहायक तकनीकों के लिए हमारे समर्थन में सुधार करना, जैसे कि स्क्रीन रीडर (उदाहरण के लिए, केटी लियू का [p5.js में Alt टेक्स्ट जोड़ना](https://medium.com/processing-foundation/adding-alt-text-e2c7684e44f8), क्लेयर किर्नी -वोल्पे का [पी5 एक्सेसिबिलिटी प्रोजेक्ट](https://medium.com/processing-foundation/p5-accessibility-115d84535fa8))
+- हमारे टूल में [वेब कंटेंट एक्सेसिबिलिटी दिशानिर्देशों] (https://www.w3.org/TR/WCAG21/) का पालन करना और उपयोगकर्ताओं के लिए अपने प्रोजेक्ट में उनका पालन करना आसान बनाने की दिशा में काम करना
+- टूल का उपयोग करने वाले लोगों के लिए p5.js त्रुटि संदेशों को अधिक उपयोगी और सहायक बनाना (उदाहरण के लिए, [p5.js फ्रेंडली एरर सिस्टम (FES)](https://github.com/processing/p5.js/blob/main/) योगदानकर्ता_docs/friendly_error_system.md))
+- उन समुदायों के भीतर p5.js के शिक्षार्थियों को सलाह देना और समर्थन करना, जिन्हें ऐतिहासिक रूप से रचनात्मक कोडिंग और डिजिटल कलाओं से बाहर रखा गया है और हाशिए पर रखा गया है।
+- सामुदायिक कार्यक्रमों की मेजबानी (उदाहरण के लिए, [p5.js Access Day 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) एक्सेस-केंद्रित आयोजन रणनीति (उदाहरण के लिए, एएसएल व्याख्या, लाइव कैप्शनिंग, सुलभ स्थान) के साथ
+- शैक्षिक संसाधनों के निर्माण का समर्थन करना (उदाहरण के लिए, अडेकेमी सिजुवाडे-उकाडिके का [ए11वाई पाठ्यक्रम](http://a11ysyllabus.site/))
+- हमारे काम के दस्तावेज़ और रिपोर्ट प्रकाशित करना जो WCAG दिशानिर्देशों का पालन करते हैं, सरल भाषा का उपयोग करते हैं, और विविध अनुभवों से शुरुआती लोगों पर ध्यान केंद्रित करते हैं (उदाहरण के लिए, [OSACC p5.js एक्सेस रिपोर्ट] (https://github.com/processing/OSACC-p5)। जेएस-एक्सेस-रिपोर्ट))
## रखरखाव
+हम उन सुविधा अनुरोधों को स्वीकार नहीं कर रहे हैं जो पहुंच बढ़ाने के हमारे प्रयास का समर्थन नहीं करते हैं। आप इस मानदंड को हमारे अंक में प्रतिबिंबित देखेंगे और अनुरोध टेम्पलेट खींचेंगे। हम p5.js के मौजूदा फीचर सेट को बनाए रखने के अपने इरादे की भी पुष्टि करते हैं। हम बग्स को ठीक करना चाहेंगे, भले ही वे कोडबेस के किसी भी क्षेत्र में हों। हमारा मानना है कि टूल की स्थिरता इसे शुरुआती लोगों के लिए अधिक सुलभ बनाती है। पहुंच में सुधार करने वाले सुविधा अनुरोधों के उदाहरणों में शामिल हैं:
+कम शक्तिशाली हार्डवेयर का उपयोग करने वाले लोगों के लिए प्रदर्शन बढ़ता है (उदाहरण के लिए, फ़्रेमबफ़र्स से ड्राइंग/पढ़ने के लिए समर्थन)
+एपीआई में संगति (उदाहरण के लिए, शुरुआती आकार ()/एंडशेप () के साथ आर्क बनाने के लिए आर्क वर्टेक्स () जोड़ें)
+
+___
+
+कृपया इसे एक 'जीवित दस्तावेज़' मानें। हम इस बारे में बातचीत जारी रखेंगे कि पहुंच को प्राथमिकता देने का क्या मतलब है। हम अपने समुदाय को इस दस्तावेज़ और इसमें वर्णित मूल्यों से जुड़ने के लिए आमंत्रित करते हैं। यदि आपके पास विचार या सुझाव हैं, तो हम आपको उन्हें Github पर एक मुद्दे के रूप में या hello@p5js.org पर ईमेल करके साझा करने के लिए आमंत्रित करते हैं।
+
+पी5.जेएस एक्सेस स्टेटमेंट के इस संस्करण को एवलिन मासो, नेट डेकर, बॉबी जो स्मिथ III, सैमी वीलर, सोनिया (सुह्युन) चोई, शिन शिन, केट होलेनबैक, लॉरेन ली मैक्कार्थी, कैरोलीन सिंडर्स, कियानकियान ये के सहयोग से संशोधित किया गया था। 2023 ओपन सोर्स आर्ट्स कंट्रीब्यूटर्स कॉन्फ्रेंस में ट्रिस्टन जोवानी मैग्नो एस्पिनोज़ा, तन्वी शर्मा, त्सिज टैफेस और सारा सिस्टन। इसे प्रोसेसिंग फाउंडेशन फ़ेलोशिप के सहयोग से बॉबी जो स्मिथ III और नेट डेकर द्वारा अंतिम रूप दिया गया और प्रकाशित किया गया।
-हम p5.js. के मौजूदा फीचर सेट को बनाए रखने के अपने इरादे की भी पुष्टि करते हैं हम त्रुटियों को ठीक करना चाहते हैं चाहे कोडबेस के किस क्षेत्र में हो क्योंकि हम मानते हैं कि उपकरण की निरंतरता इसे शुरुआती लोगों के लिए अधिक सुलभ बनाती है।
\ No newline at end of file
+[^1]: क्रेंशॉ, किम्बर्ले (1989)। "जाति और लिंग के प्रतिच्छेदन को सीमाबद्ध करना: भेदभाव विरोधी सिद्धांत, नारीवादी सिद्धांत और नस्लवाद विरोधी राजनीति की एक काली नारीवादी आलोचना"। शिकागो विश्वविद्यालय कानूनी फोरम। 1989 (1): 139-167। आईएसएसएन 0892-5593। पूरा पाठ Archive.org पर।
+[^2]: कैपिटल 'डी' डेफ उन लोगों को संदर्भित करता है जो सांस्कृतिक रूप से बधिर हैं या बधिर समुदाय का हिस्सा हैं, जबकि लोअर केस 'डी' डेफ एक ऑडियोलॉजिकल शब्द है जो बधिर पहचान से जुड़े लोगों का वर्णन नहीं कर सकता है।
+[^3]: विकलांगता समुदाय के भीतर 'व्यक्ति-प्रथम' बनाम 'पहचान-प्रथम' भाषा के बीच अलग-अलग प्राथमिकताएँ हैं। पढ़ें [ऑटिज़्म समुदाय में व्यक्ति-प्रथम बनाम पहचान-प्रथम भाषा पर बहस को खोलना](https://news.northeaster.edu/2018/07/12/unpacking-the-debate-over-person-first-vs -पहचान-प्रथम-भाषा-में-ऑटिज्म-समुदाय/) और [मैं विकलांग हूं: पहचान-प्रथम बनाम लोग-प्रथम भाषा पर](https://thebodyisnotanapology.com/magazine/i-am-disabled-on -पहचान-प्रथम-बनाम-लोग-प्रथम-भाषा/)।
+[^4]: भाषाई साम्राज्यवाद, या भाषा साम्राज्यवाद, शाही विस्तार और वैश्वीकरण के कारण मूल भाषाओं की कीमत पर अंग्रेजी जैसी कुछ भाषाओं के चल रहे वर्चस्व/प्राथमिकता/थोपे जाने को संदर्भित करता है।
\ No newline at end of file
diff --git a/contributor_docs/hi/contributing_to_the_p5.js_reference.md b/contributor_docs/hi/contributing_to_the_p5.js_reference.md
index eb5c61dddc..3a9efa1beb 100644
--- a/contributor_docs/hi/contributing_to_the_p5.js_reference.md
+++ b/contributor_docs/hi/contributing_to_the_p5.js_reference.md
@@ -1,4 +1,4 @@
-
+
# p5.js संदर्भ में योगदान
diff --git a/contributor_docs/hi/contributor_guidelines.md b/contributor_docs/hi/contributor_guidelines.md
index 84d84da171..e0cf1b87c4 100644
--- a/contributor_docs/hi/contributor_guidelines.md
+++ b/contributor_docs/hi/contributor_guidelines.md
@@ -1,4 +1,4 @@
-
+
# योगदानकर्ता दिशानिर्देश
diff --git a/contributor_docs/hi/steward_guidelines.md b/contributor_docs/hi/steward_guidelines.md
index 2d9dfe355f..90c9210493 100644
--- a/contributor_docs/hi/steward_guidelines.md
+++ b/contributor_docs/hi/steward_guidelines.md
@@ -1,4 +1,4 @@
-
+
# स्टीवर्ड दिशानिर्देश
diff --git a/contributor_docs/hi/webgl_contribution_guide.md b/contributor_docs/hi/webgl_contribution_guide.md
index c27493aa3a..0aa57c57db 100644
--- a/contributor_docs/hi/webgl_contribution_guide.md
+++ b/contributor_docs/hi/webgl_contribution_guide.md
@@ -1,4 +1,4 @@
-
+
# वेबजीएल योगदान गाइड
diff --git a/contributor_docs/ko/access.md b/contributor_docs/ko/access.md
new file mode 100644
index 0000000000..596b9c6528
--- /dev/null
+++ b/contributor_docs/ko/access.md
@@ -0,0 +1,58 @@
+
+
+# 접근성에 대한 초점
+
+[2019 기여자 회의](https://p5js.org/community/contributors-conference-2019.html)에서, p5.js는 접근성(포용과 접근성)을 향상시키는 새로운 기능만 추가하기로 약속했습니다. 이러한 노력을 지지하지 않는 기능 요청은 수용되지 않을 것입니다. 우리는 장벽을 인식하고, 없애고, 예방하는 노력을 약속합니다. 이는 접근성과 참여에 영향을 미칠 수 있는 다양성의 교차[^1] 경험을 고려한다는 것을 의미합니다. 이같은 교차 경험은 젠더, 인종, 민족, 성성, 언어, 위치 등으로 구성됩니다. 우리는 p5.js 커뮤니티 내에서 특권을 가진 사람들의 지속적인 편안함보다 소외된 집단의 요구에 초점을 맞추고 있습니다. 우리 모두가 접근성의 의미를 탐색하고 있습니다. 그리고 접근성을 실천하고 가르치는 방법을 배우고 있습니다. 우리는 접근성을 확장적, 교차적, 연대적 프레임워크를 통해 생각하기로 선택합니다. 이 약속은 p5.js의 핵심 가치 중 하나로, 우리의 [커뮤니티 성명서](https://p5js.org/community/)에 기재되어 있습니다.
+
+## 접근성의 종류
+
+접근성 향상은 단순히 p5.js 커뮤니티의 인원을 늘리는 데 초점을 맞추지 않습니다. 구조적 차별으로 인해 p5.js 커뮤니티에서 소외된 사람들에게 p5.js를 접근하기 쉽게 만들려는 지속적인 약속입니다. 이 약속은 p5.js가 제공하는 도구와 플랫폼에도 적용되며, p5.js 리더십의 구성, 결정 및 행동을 포함합니다. 우리는 속도, 성장, 경쟁을 중시하는 기술 문화에 저항합니다. 우리는 집단적 관심의 행위로서 지향성, 느림, 수용성, 책임감을 우선시합니다.
+
+여기서의 접근성은 다음과 같은 사람들을 위해 p5.js를 공평하게 만드는 것을 의미합니다:
+
+- 영어 이외의 언어를 사용하는 사람들
+- 흑인, 원주민, 유색인종, 소외된 민족의 사람들
+- 레즈비언, 게이, 바이섹슈얼, 퀴어, 성 정체성을 탐색 중인 사람들, 팬섹슈얼, 무성애자
+- 트랜스, 젠더플루이드, 에이젠더, 간성, 두 영혼의 사람들, 여성, 그 외 다른 성적 소수자들
+- 시각장애인, 청각장애인(deaf) 또는 농인(Deaf)[^2], 장애인/장애를 가진 사람들, 신경다양인, 만성 질병을 가진 사람들[^3]
+- 소득이 낮거나 금융 및 문화 자본에 접근성이 부족한 사람들
+- 오픈 소스와 크리에이티브 코딩에 대한 경험이 거의 없거나 전혀 없는 사람들
+- 다양한 교육적 배경을 가진 사람들
+- 어린이와 노인을 포함한 모든 연령대의 사람들
+- 다양한 종류의 기술적 스킬, 도구, 그리고 접근 권한을 가진 사람들
+- 다양한 종교적 배경을 가진 사람들
+- 제도적으로 배제되고 역사적으로 과소대표되는 사람들
+- 그리고 모든 이들의 교차점들
+
+우리는 각자의 정체성을 설명하는 용어의 복잡성을 인식합니다. 언어는 미묘하고, 진화하며, 논쟁의 여지가 있습니다. 이 목록이 모든 경우를 다루지는 않습니다. 우리는 우리의 약속과 p5.js 커뮤니티의 다양한 요구 사항을 명명하고 책임질 수 있도록 시도하고 있습니다.
+
+
+### 예시
+다음은 접근성을 향상을 위한 노력의 예시입니다:
+
+- 문서 및 기타 자료를 더 많은 언어로 번역하여 언어 제국주의[^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의 [p5.js에 대한 대체 텍스트(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/)을 준수하도록 하고, 사용자들이 프로젝트에서 이를 쉽게 따를 수 있도록 노력하기
+- p5.js 오류 메시지를 사용하는 사람들에게 더 유용한 도움 제공하기 (예: [p5.js 친절한 오류 메세지 시스템(FES)](https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md))
+- 크리에이티브 코딩 및 디지털 아트 영역에서 역사적으로 배제되고 차별을 받은 공동체들 속 p5.js 학습자를 멘토링 및 지원하기
+- 접근성 중심의 조직 전략(예: ASL 통역, 실시간 자막, 접근하기 쉬운 장소)으로 커뮤니티 이벤트 개최 (예: [p5.js Access Day 2022](https://p5js.org/community/p5js-access-day-2022.html), [The Web We Want: p5.js 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 p5.js 접근성 보고서](https://github.com/processing/OSACC-p5.js-Access-Report))
+
+
+## 유지보수
+우리는 접근성 향상을 지지하지 않는 기능 요청을 받지 않을 것입니다. 이 기준은 우리의 이슈 및 풀 리퀘스트 템플릿에 반영됩니다. 또한, 기존 p5.js 기능 세트를 유지겠다는 의사를 단언합니다. 우리는 코드베이스의 어느 부분에 속하는 버그든지 상관없이 수정하고 싶습니다. 우리는 도구의 일관성이 초심자의 접근성을 향상한다고 믿습니다. 접근성을 향상시키는 기능 요청의 예시는 다음과 같습니다:
+하드웨어 성능이 낮은 사람들을 위한 성능 향상 (예: 프레임 버퍼에 그리기/읽기 지원)
+API의 일관성 (예: beginShape()와 endShape()로 호를 만들기 위한 arcVertex() 추가)
+
+___
+
+이 문서를 '살아있는 문서'로 생각해 주시기 바랍니다. 접근성의 우선순위를 정하는 것이 무엇을 의미하는지에 대한 대화를 이어갈 것입니다. 이 문서가 설명하는 가치에 대해 이야기를 나눌 수 있도록 우리의 커뮤니티에 초대합니다. 아이디어나 제안할 것이 있다면 Github에서 이슈로 공유하거나 [hello@p5js.org](mailto:hello@p5js.org)로 이메일을 보내주시기 바랍니다.
+
+이 버전의 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가 최종 확정, 발표했습니다.
+
+[^1]: Crenshaw, Kimberlé (1989). "Demarginalizing the intersection of race and sex: a black feminist critique of antidiscrimination doctrine, feminist theory and antiracist politics". University of Chicago Legal Forum. 1989 (1): 139–167. ISSN 0892-5593. 전문은 Archive.org에서 확인 가능합니다.
+[^2]: 대문자 "Deaf"는 문화적으로 청각 장애인이거나 청각 장애인 공동체의 일원을 의미하는 반면, 소문자 "deaf"는 앞서 설명된 대문자 "Deaf" 정체성과는 무관히 쓰이는 청각학적 용어입니다.
+[^3]: 청각 장애 커뮤니티 내에는 ‘사람 우선’ vs ‘정체성 우선’ 언어 사이의 다양한 선호가 있습니다. [Unpacking the debate over person-first vs. identity-first language in the 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]: 언어 제국주의는 제국주의의 확장과 세계화로 인해 모국어를 희생해가며 영어와 같은 특정 언어를 지속적으로 지배, 우선, 강요하는 것을 말합니다.
+
diff --git a/contributor_docs/ko/contributing_to_the_p5.js_reference.md b/contributor_docs/ko/contributing_to_the_p5.js_reference.md
index aa26fa5533..139492a247 100644
--- a/contributor_docs/ko/contributing_to_the_p5.js_reference.md
+++ b/contributor_docs/ko/contributing_to_the_p5.js_reference.md
@@ -1,4 +1,4 @@
-
+
# p5.js 레퍼런스에 기여하기
diff --git a/contributor_docs/ko/contributor_guidelines.md b/contributor_docs/ko/contributor_guidelines.md
index 58464a596e..b99223096f 100644
--- a/contributor_docs/ko/contributor_guidelines.md
+++ b/contributor_docs/ko/contributor_guidelines.md
@@ -1,4 +1,4 @@
-
+
# 기여자 가이드라인
diff --git a/contributor_docs/ko/steward_guidelines.md b/contributor_docs/ko/steward_guidelines.md
index b49cd064a9..330c23bcea 100644
--- a/contributor_docs/ko/steward_guidelines.md
+++ b/contributor_docs/ko/steward_guidelines.md
@@ -1,4 +1,4 @@
-
+
# 스튜어드(Steward) 지침
diff --git a/contributor_docs/ko/webgl_contribution_guide.md b/contributor_docs/ko/webgl_contribution_guide.md
index f2d6caba7f..65b3f399d2 100644
--- a/contributor_docs/ko/webgl_contribution_guide.md
+++ b/contributor_docs/ko/webgl_contribution_guide.md
@@ -1,4 +1,4 @@
-
+
# WebGL 기여 안내
diff --git a/contributor_docs/zh/README.md b/contributor_docs/zh-Hans/README.md
similarity index 100%
rename from contributor_docs/zh/README.md
rename to contributor_docs/zh-Hans/README.md
diff --git a/contributor_docs/zh/access.md b/contributor_docs/zh-Hans/access.md
similarity index 100%
rename from contributor_docs/zh/access.md
rename to contributor_docs/zh-Hans/access.md
diff --git a/contributor_docs/zh/archive/custom_p5_build.md b/contributor_docs/zh-Hans/archive/custom_p5_build.md
similarity index 100%
rename from contributor_docs/zh/archive/custom_p5_build.md
rename to contributor_docs/zh-Hans/archive/custom_p5_build.md
diff --git a/contributor_docs/zh/archive/internationalization.md b/contributor_docs/zh-Hans/archive/internationalization.md
similarity index 100%
rename from contributor_docs/zh/archive/internationalization.md
rename to contributor_docs/zh-Hans/archive/internationalization.md
diff --git a/contributor_docs/zh/archive/issue_labels.md b/contributor_docs/zh-Hans/archive/issue_labels.md
similarity index 100%
rename from contributor_docs/zh/archive/issue_labels.md
rename to contributor_docs/zh-Hans/archive/issue_labels.md
diff --git a/contributor_docs/zh/archive/supported_browsers.md b/contributor_docs/zh-Hans/archive/supported_browsers.md
similarity index 100%
rename from contributor_docs/zh/archive/supported_browsers.md
rename to contributor_docs/zh-Hans/archive/supported_browsers.md
diff --git a/contributor_docs/zh/contributing_to_the_p5.js_reference.md b/contributor_docs/zh-Hans/contributing_to_the_p5.js_reference.md
similarity index 99%
rename from contributor_docs/zh/contributing_to_the_p5.js_reference.md
rename to contributor_docs/zh-Hans/contributing_to_the_p5.js_reference.md
index 2e825642cd..73933f0d75 100644
--- a/contributor_docs/zh/contributing_to_the_p5.js_reference.md
+++ b/contributor_docs/zh-Hans/contributing_to_the_p5.js_reference.md
@@ -1,4 +1,4 @@
-
+
# 为 p5.js 参考文献做贡献
diff --git a/contributor_docs/zh/contributor_guidelines.md b/contributor_docs/zh-Hans/contributor_guidelines.md
similarity index 99%
rename from contributor_docs/zh/contributor_guidelines.md
rename to contributor_docs/zh-Hans/contributor_guidelines.md
index b6d6910484..d01281393c 100644
--- a/contributor_docs/zh/contributor_guidelines.md
+++ b/contributor_docs/zh-Hans/contributor_guidelines.md
@@ -1,4 +1,4 @@
-
+
# 贡献者指南
@@ -523,4 +523,4 @@ git rebase --continue
如果你的 PR 需要进一步更改，并且你能够完成这些更改，请按照之前的[相同流程](#git-工作流程) 进行操作。但务必在本地仓库副本的相关分支进行修改、提交， 并将提交推送到你 fork 的远程仓库。一旦提交成功，新的提交会自动显示在你的 PR 中。然后在 PR 中留言，让审阅者知道你已经按要求做了更改。如果不需要额外的更改，你的 PR 将被合并！
-[**⬆ 回到顶部**](#贡献者指南)
\ No newline at end of file
+[**⬆ 回到顶部**](#贡献者指南)
diff --git a/contributor_docs/zh/creating_libraries.md b/contributor_docs/zh-Hans/creating_libraries.md
similarity index 100%
rename from contributor_docs/zh/creating_libraries.md
rename to contributor_docs/zh-Hans/creating_libraries.md
diff --git a/contributor_docs/zh/fes_reference_dev_notes.md b/contributor_docs/zh-Hans/fes_reference_dev_notes.md
similarity index 100%
rename from contributor_docs/zh/fes_reference_dev_notes.md
rename to contributor_docs/zh-Hans/fes_reference_dev_notes.md
diff --git a/contributor_docs/zh/friendly_error_system.md b/contributor_docs/zh-Hans/friendly_error_system.md
similarity index 100%
rename from contributor_docs/zh/friendly_error_system.md
rename to contributor_docs/zh-Hans/friendly_error_system.md
diff --git a/contributor_docs/zh/release_process.md b/contributor_docs/zh-Hans/release_process.md
similarity index 100%
rename from contributor_docs/zh/release_process.md
rename to contributor_docs/zh-Hans/release_process.md
diff --git a/contributor_docs/zh/steward_guidelines.md b/contributor_docs/zh-Hans/steward_guidelines.md
similarity index 99%
rename from contributor_docs/zh/steward_guidelines.md
rename to contributor_docs/zh-Hans/steward_guidelines.md
index 8388699b78..3ba05a2696 100644
--- a/contributor_docs/zh/steward_guidelines.md
+++ b/contributor_docs/zh-Hans/steward_guidelines.md
@@ -1,4 +1,4 @@
-
+
# 管理员指南
无论你是刚加入我们的管理员，还是 p5.js 经验丰富的维护者，或者介于两者之间，本指南包含了许多信息、技巧和诀窍，将帮助你和其他贡献者有效地为 p5.js 做出贡献。除非另有说明，这里所写的大部分内容都是指南，这意味着你可以根据自己的工作流程来适应这里所指示的做法。
diff --git a/contributor_docs/zh/unit_testing.md b/contributor_docs/zh-Hans/unit_testing.md
similarity index 100%
rename from contributor_docs/zh/unit_testing.md
rename to contributor_docs/zh-Hans/unit_testing.md
diff --git a/contributor_docs/zh/web_accessibility.md b/contributor_docs/zh-Hans/web_accessibility.md
similarity index 100%
rename from contributor_docs/zh/web_accessibility.md
rename to contributor_docs/zh-Hans/web_accessibility.md
diff --git a/contributor_docs/zh/webgl_contribution_guide.md b/contributor_docs/zh-Hans/webgl_contribution_guide.md
similarity index 99%
rename from contributor_docs/zh/webgl_contribution_guide.md
rename to contributor_docs/zh-Hans/webgl_contribution_guide.md
index 5e89d2710c..0d408925f7 100644
--- a/contributor_docs/zh/webgl_contribution_guide.md
+++ b/contributor_docs/zh-Hans/webgl_contribution_guide.md
@@ -1,4 +1,4 @@
-
+
# WebGL 贡献指南
diff --git a/contributor_docs/zh/webgl_mode_architecture.md b/contributor_docs/zh-Hans/webgl_mode_architecture.md
similarity index 100%
rename from contributor_docs/zh/webgl_mode_architecture.md
rename to contributor_docs/zh-Hans/webgl_mode_architecture.md
diff --git a/src/webgl/interaction.js b/src/webgl/interaction.js
index 3b9fed3baa..6245becfce 100644
--- a/src/webgl/interaction.js
+++ b/src/webgl/interaction.js
@@ -9,61 +9,154 @@ import p5 from '../core/main';
import * as constants from '../core/constants';
/**
- * Allows movement around a 3D sketch using a mouse or trackpad or touch.
+ * Allows the user to orbit around a 3D sketch using a mouse, trackpad, or
+ * touchscreen.
+ *
+ * 3D sketches are viewed through an imaginary camera. Calling
+ * `orbitControl()` within the draw() function allows
+ * the user to change the camera’s position:
+ *
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Rest of sketch.
+ * }
+ *
+ *
* Left-clicking and dragging or swipe motion will rotate the camera position
- * about the center of the sketch, right-clicking and dragging or multi-swipe
- * will pan the camera position without rotation, and using the mouse wheel
- * (scrolling) or pinch in/out will move the camera further or closer
- * from the center of the sketch. This function can be called with parameters
- * dictating sensitivity to mouse/touch movement along the X and Y axes.
- * Calling this function without parameters is equivalent to calling
- * orbitControl(1,1). To reverse direction of movement in either axis,
- * enter a negative number for sensitivity.
+ * about the center of the sketch. Right-clicking and dragging or multi-swipe
+ * will pan the camera position without rotation. Using the mouse wheel
+ * (scrolling) or pinch in/out will move the camera further or closer from the
+ * center of the sketch.
+ *
+ * The first three parameters, `sensitivityX`, `sensitivityY`, and
+ * `sensitivityZ`, are optional. They’re numbers that set the sketch’s
+ * sensitivity to movement along each axis. For example, calling
+ * `orbitControl(1, 2, -1)` keeps movement along the x-axis at its default
+ * value, makes the sketch twice as sensitive to movement along the y-axis,
+ * and reverses motion along the z-axis. By default, all sensitivity values
+ * are 1.
+ *
+ * The fourth parameter, `options`, is also optional. It’s an object that
+ * changes the behavior of orbiting. For example, calling
+ * `orbitControl(1, 1, 1, options)` keeps the default sensitivity values while
+ * changing the behaviors set with `options`. The object can have the
+ * following properties:
+ *
+ *
+ * let options = {
+ * // Setting this to false makes mobile interactions smoother by
+ * // preventing accidental interactions with the page while orbiting.
+ * // By default, it's true.
+ * disableTouchActions: true,
+ *
+ * // Setting this to true makes the camera always rotate in the
+ * // direction the mouse/touch is moving.
+ * // By default, it's false.
+ * freeRotation: false
+ * };
+ *
+ * orbitControl(1, 1, 1, options);
+ *
+ *
* @method orbitControl
* @for p5
- * @param {Number} [sensitivityX] sensitivity to mouse movement along X axis
- * @param {Number} [sensitivityY] sensitivity to mouse movement along Y axis
- * @param {Number} [sensitivityZ] sensitivity to scroll movement along Z axis
- * @param {Object} [options] An optional object that can contain additional settings,
- * disableTouchActions - Boolean, default value is true.
- * Setting this to true makes mobile interactions smoother by preventing
- * accidental interactions with the page while orbiting. But if you're already
- * doing it via css or want the default touch actions, consider setting it to false.
- * freeRotation - Boolean, default value is false.
- * By default, horizontal movement of the mouse or touch pointer rotates the camera
- * around the y-axis, and vertical movement rotates the camera around the x-axis.
- * But if setting this option to true, the camera always rotates in the direction
- * the pointer is moving. For zoom and move, the behavior is the same regardless of
- * true/false.
+ * @param {Number} [sensitivityX] sensitivity to movement along the x-axis. Defaults to 1.
+ * @param {Number} [sensitivityY] sensitivity to movement along the y-axis. Defaults to 1.
+ * @param {Number} [sensitivityZ] sensitivity to movement along the z-axis. Defaults to 1.
+ * @param {Object} [options] object with two optional properties, `disableTouchActions`
+ * and `freeRotation`. Both are `Boolean`s. `disableTouchActions`
+ * defaults to `true` and `freeRotation` defaults to `false`.
* @chainable
+ *
* @example
*
*
+ * // Click and drag the mouse to view the scene from different angles.
+ *
* function setup() {
* createCanvas(100, 100, WEBGL);
- * normalMaterial();
- * describe(
- * 'Camera orbits around a box when mouse is hold-clicked & then moved.'
- * );
- * camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
- * perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+ *
+ * describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');
* }
+ *
* function draw() {
* background(200);
*
- * // If you execute the line commented out instead of next line, the direction of rotation
- * // will be the direction the mouse or touch pointer moves, not around the X or Y axis.
+ * // Enable orbiting with the mouse.
* orbitControl();
- * // orbitControl(1, 1, 1, {freeRotation: true});
*
- * rotateY(0.5);
+ * // Style the box.
+ * normalMaterial();
+ *
+ * // Draw the box.
+ * box(30, 50);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * // Make the interactions 3X sensitive.
+ * orbitControl(3, 3, 3);
+ *
+ * // Style the box.
+ * normalMaterial();
+ *
+ * // Draw the box.
* box(30, 50);
* }
*
*
*
- * @alt
- * Camera orbits around a box when mouse is hold-clicked & then moved.
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Create an options object.
+ * let options = {
+ * disableTouchActions: false,
+ * freeRotation: true
+ * };
+ *
+ * // Enable orbiting with the mouse.
+ * // Prevent accidental touch actions on touchscreen devices
+ * // and enable free rotation.
+ * orbitControl(1, 1, 1, options);
+ *
+ * // Style the box.
+ * normalMaterial();
+ *
+ * // Draw the box.
+ * box(30, 50);
+ * }
+ *
+ *
*/
// implementation based on three.js 'orbitControls':
@@ -376,152 +469,182 @@ p5.prototype.orbitControl = function(
/**
- * debugMode() helps visualize 3D space by adding a grid to indicate where the
- * ‘ground’ is in a sketch and an axes icon which indicates the +X, +Y, and +Z
- * directions. This function can be called without parameters to create a
- * default grid and axes icon, or it can be called according to the examples
- * above to customize the size and position of the grid and/or axes icon. The
- * grid is drawn using the most recently set stroke color and weight. To
- * specify these parameters, add a call to stroke() and strokeWeight()
- * just before the end of the draw() loop.
- *
- * By default, the grid will run through the origin (0,0,0) of the sketch
- * along the XZ plane
- * and the axes icon will be offset from the origin. Both the grid and axes
- * icon will be sized according to the current canvas size. Note that because the
- * grid runs parallel to the default camera view, it is often helpful to use
- * debugMode along with orbitControl to allow full view of the grid.
+ * Adds a grid and an axes icon to clarify orientation in 3D sketches.
+ *
+ * `debugMode()` adds a grid that shows where the “ground” is in a sketch. By
+ * default, the grid will run through the origin `(0, 0, 0)` of the sketch
+ * along the XZ plane. `debugMode()` also adds an axes icon that points along
+ * the positive x-, y-, and z-axes. Calling `debugMode()` displays the grid
+ * and axes icon with their default size and position.
+ *
+ * There are four ways to call `debugMode()` with optional parameters to
+ * customize the debugging environment.
+ *
+ * The first way to call `debugMode()` has one parameter, `mode`. If the
+ * system constant `GRID` is passed, as in `debugMode(GRID)`, then the grid
+ * will be displayed and the axes icon will be hidden. If the constant `AXES`
+ * is passed, as in `debugMode(AXES)`, then the axes icon will be displayed
+ * and the grid will be hidden.
+ *
+ * The second way to call `debugMode()` has six parameters. The first
+ * parameter, `mode`, selects either `GRID` or `AXES` to be displayed. The
+ * next five parameters, `gridSize`, `gridDivisions`, `xOff`, `yOff`, and
+ * `zOff` are optional. They’re numbers that set the appearance of the grid
+ * (`gridSize` and `gridDivisions`) and the placement of the axes icon
+ * (`xOff`, `yOff`, and `zOff`). For example, calling
+ * `debugMode(20, 5, 10, 10, 10)` sets the `gridSize` to 20 pixels, the number
+ * of `gridDivisions` to 5, and offsets the axes icon by 10 pixels along the
+ * x-, y-, and z-axes.
+ *
+ * The third way to call `debugMode()` has five parameters. The first
+ * parameter, `mode`, selects either `GRID` or `AXES` to be displayed. The
+ * next four parameters, `axesSize`, `xOff`, `yOff`, and `zOff` are optional.
+ * They’re numbers that set the appearance of the size of the axes icon
+ * (`axesSize`) and its placement (`xOff`, `yOff`, and `zOff`).
+ *
+ * The fourth way to call `debugMode()` has nine optional parameters. The
+ * first five parameters, `gridSize`, `gridDivisions`, `gridXOff`, `gridYOff`,
+ * and `gridZOff` are numbers that set the appearance of the grid. For
+ * example, calling `debugMode(100, 5, 0, 0, 0)` sets the `gridSize` to 100,
+ * the number of `gridDivisions` to 5, and sets all the offsets to 0 so that
+ * the grid is centered at the origin. The next four parameters, `axesSize`,
+ * `xOff`, `yOff`, and `zOff` are numbers that set the appearance of the size
+ * of the axes icon (`axesSize`) and its placement (`axesXOff`, `axesYOff`,
+ * and `axesZOff`). For example, calling
+ * `debugMode(100, 5, 0, 0, 0, 50, 10, 10, 10)` sets the `gridSize` to 100,
+ * the number of `gridDivisions` to 5, and sets all the offsets to 0 so that
+ * the grid is centered at the origin. It then sets the `axesSize` to 50 and
+ * offsets the icon 10 pixels along each axis.
+ *
* @method debugMode
+ *
* @example
*
*
+ * // Click and drag the mouse to view the scene from different angles.
+ *
* function setup() {
* createCanvas(100, 100, WEBGL);
- * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
- * perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
- * normalMaterial();
+ *
+ * // Enable debug mode.
* debugMode();
- * describe(
- * 'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z. the grid and icon disappear when the spacebar is pressed.'
- * );
+ *
+ * describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box.');
* }
*
* function draw() {
* background(200);
+ *
+ * // Enable orbiting with the mouse.
* orbitControl();
- * box(15, 30);
- * // Press the spacebar to turn debugMode off!
- * if (keyIsDown(32)) {
- * noDebugMode();
- * }
- * }
- *
- *
- * @alt
- * a 3D box is centered on a grid in a 3D sketch. an icon
- * indicates the direction of each axis: a red line points +X,
- * a green line +Y, and a blue line +Z. the grid and icon disappear when the
- * spacebar is pressed.
*
- * @example
- *
- *
- * function setup() {
- * createCanvas(100, 100, WEBGL);
- * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
- * perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
+ * // Style the box.
* normalMaterial();
- * debugMode(GRID);
- * describe('a 3D box is centered on a grid in a 3D sketch.');
- * }
*
- * function draw() {
- * background(200);
- * orbitControl();
- * box(15, 30);
+ * // Draw the box.
+ * box(20, 40);
* }
*
*
- * @alt
- * a 3D box is centered on a grid in a 3D sketch.
*
- * @example
*
*
+ * // Click and drag the mouse to view the scene from different angles.
+ *
* function setup() {
* createCanvas(100, 100, WEBGL);
- * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
- * perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
- * normalMaterial();
+ *
+ * // Enable debug mode.
+ * // Only display the axes icon.
* debugMode(AXES);
- * describe(
- * 'a 3D box is centered in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z.'
- * );
+ *
+ * describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box.');
* }
*
* function draw() {
* background(200);
+ *
+ * // Enable orbiting with the mouse.
* orbitControl();
- * box(15, 30);
+ *
+ * // Style the box.
+ * normalMaterial();
+ *
+ * // Draw the box.
+ * box(20, 40);
* }
*
*
- * @alt
- * a 3D box is centered in a 3D sketch. an icon
- * indicates the direction of each axis: a red line points +X,
- * a green line +Y, and a blue line +Z.
*
- * @example
*
*
+ * // Click and drag the mouse to view the scene from different angles.
+ *
* function setup() {
* createCanvas(100, 100, WEBGL);
- * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
- * perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
- * normalMaterial();
- * debugMode(GRID, 100, 10, 0, 0, 0);
- * describe('a 3D box is centered on a grid in a 3D sketch');
+ *
+ * // Enable debug mode.
+ * // Only display the grid and customize it:
+ * // - size: 50
+ * // - divisions: 10
+ * // - offsets: 0, 20, 0
+ * debugMode(GRID, 50, 10, 0, 20, 0);
+ *
+ * describe('A multicolor box on a gray background. A grid is displayed below the box.');
* }
*
* function draw() {
* background(200);
+ *
+ * // Enable orbiting with the mouse.
* orbitControl();
- * box(15, 30);
+ *
+ * // Style the box.
+ * normalMaterial();
+ *
+ * // Draw the box.
+ * box(20, 40);
* }
*
*
- * @alt
- * a 3D box is centered on a grid in a 3D sketch
*
- * @example
*
*
+ * // Click and drag the mouse to view the scene from different angles.
+ *
* function setup() {
* createCanvas(100, 100, WEBGL);
- * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
- * perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
- * normalMaterial();
- * debugMode(100, 10, 0, 0, 0, 20, 0, -40, 0);
- * describe(
- * 'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z.'
- * );
+ *
+ * // Enable debug mode.
+ * // Display the grid and axes icon and customize them:
+ * // Grid
+ * // ----
+ * // - size: 50
+ * // - divisions: 10
+ * // - offsets: 0, 20, 0
+ * // Axes
+ * // ----
+ * // - size: 50
+ * // - offsets: 0, 0, 0
+ * debugMode(50, 10, 0, 20, 0, 50, 0, 0, 0);
+ *
+ * describe('A multicolor box on a gray background. A grid is displayed below the box. An axes icon is displayed at the center of the box.');
* }
*
* function draw() {
- * noStroke();
* background(200);
+ *
+ * // Enable orbiting with the mouse.
* orbitControl();
- * box(15, 30);
- * // set the stroke color and weight for the grid!
- * stroke(255, 0, 150);
- * strokeWeight(0.8);
+ *
+ * // Style the box.
+ * normalMaterial();
+ *
+ * // Draw the box.
+ * box(20, 40);
* }
*
*
- * @alt
- * a 3D box is centered on a grid in a 3D sketch. an icon
- * indicates the direction of each axis: a red line points +X,
- * a green line +Y, and a blue line +Z.
*/
/**
@@ -532,17 +655,17 @@ p5.prototype.orbitControl = function(
/**
* @method debugMode
* @param {Constant} mode
- * @param {Number} [gridSize] size of one side of the grid
- * @param {Number} [gridDivisions] number of divisions in the grid
- * @param {Number} [xOff] X axis offset from origin (0,0,0)
- * @param {Number} [yOff] Y axis offset from origin (0,0,0)
- * @param {Number} [zOff] Z axis offset from origin (0,0,0)
+ * @param {Number} [gridSize] side length of the grid.
+ * @param {Number} [gridDivisions] number of divisions in the grid.
+ * @param {Number} [xOff] offset from origin along the x-axis.
+ * @param {Number} [yOff] offset from origin along the y-axis.
+ * @param {Number} [zOff] offset from origin along the z-axis.
*/
/**
* @method debugMode
* @param {Constant} mode
- * @param {Number} [axesSize] size of axes icon
+ * @param {Number} [axesSize] length of axes icon markers.
* @param {Number} [xOff]
* @param {Number} [yOff]
* @param {Number} [zOff]
@@ -552,13 +675,13 @@ p5.prototype.orbitControl = function(
* @method debugMode
* @param {Number} [gridSize]
* @param {Number} [gridDivisions]
- * @param {Number} [gridXOff]
- * @param {Number} [gridYOff]
- * @param {Number} [gridZOff]
+ * @param {Number} [gridXOff] grid offset from the origin along the x-axis.
+ * @param {Number} [gridYOff] grid offset from the origin along the y-axis.
+ * @param {Number} [gridZOff] grid offset from the origin along the z-axis.
* @param {Number} [axesSize]
- * @param {Number} [axesXOff]
- * @param {Number} [axesYOff]
- * @param {Number} [axesZOff]
+ * @param {Number} [axesXOff] axes icon offset from the origin along the x-axis.
+ * @param {Number} [axesYOff] axes icon offset from the origin along the y-axis.
+ * @param {Number} [axesZOff] axes icon offset from the origin along the z-axis.
*/
p5.prototype.debugMode = function(...args) {
@@ -600,38 +723,42 @@ p5.prototype.debugMode = function(...args) {
};
/**
- * Turns off debugMode() in a 3D sketch.
+ * Turns off debugMode() in a 3D sketch.
+ *
* @method noDebugMode
+ *
* @example
*
*
+ * // Click and drag the mouse to view the scene from different angles.
+ *
* function setup() {
* createCanvas(100, 100, WEBGL);
- * camera(0, -30, 100, 0, 0, 0, 0, 1, 0);
- * perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
- * normalMaterial();
+ *
+ * // Enable debug mode.
* debugMode();
- * describe(
- * 'a 3D box is centered on a grid in a 3D sketch. an icon indicates the direction of each axis: a red line points +X, a green line +Y, and a blue line +Z. the grid and icon disappear when the spacebar is pressed.'
- * );
+ *
+ * describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box. They disappear when the user double-clicks.');
* }
*
* function draw() {
* background(200);
+ *
+ * // Enable orbiting with the mouse.
* orbitControl();
- * box(15, 30);
- * // Press the spacebar to turn debugMode off!
- * if (keyIsDown(32)) {
- * noDebugMode();
- * }
+ *
+ * // Style the box.
+ * normalMaterial();
+ *
+ * // Draw the box. box(20, 40);
+ * }
+ *
+ * // Disable debug mode when the user double-clicks.
+ * function doubleClicked() {
+ * noDebugMode();
* }
*
*
- * @alt
- * a 3D box is centered on a grid in a 3D sketch. an icon
- * indicates the direction of each axis: a red line points +X,
- * a green line +Y, and a blue line +Z. the grid and icon disappear when the
- * spacebar is pressed.
*/
p5.prototype.noDebugMode = function() {
this._assert3d('noDebugMode');
diff --git a/src/webgl/light.js b/src/webgl/light.js
index 6729cc18bc..15651467f2 100644
--- a/src/webgl/light.js
+++ b/src/webgl/light.js
@@ -8,111 +8,182 @@
import p5 from '../core/main';
/**
- * Creates an ambient light with the given color.
+ * Creates a light that shines from all directions.
*
- * Ambient light does not come from a specific direction.
- * Objects are evenly lit from all sides. Ambient lights are
- * almost always used in combination with other types of lights.
+ * Ambient light does not come from one direction. Instead, 3D shapes are
+ * lit evenly from all sides. Ambient lights are almost always used in
+ * combination with other types of lights.
*
- * Note: lights need to be called (whether directly or indirectly)
- * within draw() to remain persistent in a looping program.
- * Placing them in setup() will cause them to only have an effect
- * the first time through the loop.
+ * There are three ways to call `ambientLight()` with optional parameters to
+ * set the light’s color.
+ *
+ * The first way to call `ambientLight()` has two parameters, `gray` and
+ * `alpha`. `alpha` is optional. Grayscale and alpha values between 0 and 255
+ * can be passed to set the ambient light’s color, as in `ambientLight(50)` or
+ * `ambientLight(50, 30)`.
+ *
+ * The second way to call `ambientLight()` has one parameter, color. A
+ * p5.Color object, an array of color values, or a
+ * CSS color string, as in `ambientLight('magenta')`, can be passed to set the
+ * ambient light’s color.
+ *
+ * The third way to call `ambientLight()` has four parameters, `v1`, `v2`,
+ * `v3`, and `alpha`. `alpha` is optional. RGBA, HSBA, or HSLA values can be
+ * passed to set the ambient light’s colors, as in `ambientLight(255, 0, 0)`
+ * or `ambientLight(255, 0, 0, 30)`. Color values will be interpreted using
+ * the current colorMode().
*
* @method ambientLight
- * @param {Number} v1 red or hue value relative to
- * the current color range
- * @param {Number} v2 green or saturation value
- * relative to the current color range
- * @param {Number} v3 blue or brightness value
- * relative to the current color range
- * @param {Number} [alpha] alpha value relative to current
- * color range (default is 0-255)
+ * @param {Number} v1 red or hue value in the current
+ * colorMode().
+ * @param {Number} v2 green or saturation value in the current
+ * colorMode().
+ * @param {Number} v3 blue, brightness, or lightness value in the current
+ * colorMode().
+ * @param {Number} [alpha] alpha (transparency) value in the current
+ * colorMode().
* @chainable
*
* @example
*
*
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click the canvas to turn on the light.
+ *
+ * let isLit = false;
+ *
* function setup() {
* createCanvas(100, 100, WEBGL);
- * noStroke();
- * describe('sphere with coral color under black light');
+ *
+ * describe('A sphere drawn against a gray background. The sphere appears to change color when the user double-clicks.');
* }
+ *
* function draw() {
- * background(100);
- * ambientLight(0); // black light (no light)
- * ambientMaterial(255, 127, 80); // coral material
- * sphere(40);
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Control the light.
+ * if (isLit === true) {
+ * // Use a grayscale value of 80.
+ * ambientLight(80);
+ * }
+ *
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ * // Turn on the ambient light when the user double-clicks.
+ * function doubleClicked() {
+ * isLit = true;
* }
*
*
- * @alt
- * sphere with coral color under black light
*
- * @example
*
*
+ * // Click and drag the mouse to view the scene from different angles.
+ *
* function setup() {
* createCanvas(100, 100, WEBGL);
- * noStroke();
- * describe('sphere with coral color under white light');
+ *
+ * describe('A faded magenta sphere drawn against a gray background.');
* }
+ *
* function draw() {
- * background(100);
- * ambientLight(255); // white light
- * ambientMaterial(255, 127, 80); // coral material
- * sphere(40);
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * // Use a p5.Color object.
+ * let c = color('orchid');
+ * ambientLight(c);
+ *
+ * // Draw the sphere.
+ * sphere();
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A faded magenta sphere drawn against a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * // Use a CSS color string.
+ * ambientLight('#DA70D6');
+ *
+ * // Draw the sphere.
+ * sphere(30);
* }
*
*
- * @alt
- * sphere with coral color under white light
*
- * @example
*
*
+ * // Click and drag the mouse to view the scene from different angles.
+ *
* function setup() {
- * createCanvas(100,100,WEBGL);
- * camera(0,-100,300);
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A faded magenta sphere drawn against a gray background.');
* }
+ *
* function draw() {
- * background(230);
- * ambientMaterial(237,34,93); //Pink Material
- * ambientLight(mouseY);
- * //As you move the mouse up to down it changes from no ambient light to full ambient light.
- * rotateY(millis()/2000);
- * box(100);
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * // Use RGB values
+ * ambientLight(218, 112, 214);
+ *
+ * // Draw the sphere.
+ * sphere(30);
* }
*
*
- * @alt
- * pink ambient material cube under the ambient light
*/
/**
* @method ambientLight
- * @param {Number} gray number specifying value between
- * white and black
+ * @param {Number} gray grayscale value between 0 and 255.
* @param {Number} [alpha]
* @chainable
*/
/**
* @method ambientLight
- * @param {String} value a color string
+ * @param {String} value color as a CSS string.
* @chainable
*/
/**
* @method ambientLight
- * @param {Number[]} values an array containing the red,green,blue &
- * and alpha components of the color
+ * @param {Number[]} values color as an array of RGBA, HSBA, or HSLA
+ * values.
* @chainable
*/
/**
* @method ambientLight
- * @param {p5.Color} color color as a p5.Color
+ * @param {p5.Color} color color as a p5.Color object.
* @chainable
*/
p5.prototype.ambientLight = function (v1, v2, v3, a) {
@@ -132,101 +203,245 @@ p5.prototype.ambientLight = function (v1, v2, v3, a) {
};
/**
- * Sets the color of the specular highlight of a non-ambient light
- * (i.e. all lights except ambientLight()).
+ * Sets the specular color for lights.
*
- * specularColor() affects only the lights which are created after
- * it in the code.
- *
- * This function is used in combination with
- * specularMaterial().
- * If a geometry does not use specularMaterial(), this function
- * will have no effect.
- *
- * The default color is white (255, 255, 255), which is used if
- * specularColor() is not explicitly called.
- *
- * Note: specularColor is equivalent to the Processing function
- * lightSpecular.
+ * `specularColor()` affects lights that bounce off a surface in a preferred
+ * direction. These lights include
+ * directionalLight(),
+ * pointLight(), and
+ * spotLight(). The function helps to create
+ * highlights on p5.Geometry objects that are
+ * styled with specularMaterial(). If a
+ * geometry does not use
+ * specularMaterial(), then
+ * `specularColor()` will have no effect.
+ *
+ * Note: `specularColor()` doesn’t affect lights that bounce in all
+ * directions, including ambientLight() and
+ * imageLight().
+ *
+ * There are three ways to call `specularColor()` with optional parameters to
+ * set the specular highlight color.
+ *
+ * The first way to call `specularColor()` has two optional parameters, `gray`
+ * and `alpha`. Grayscale and alpha values between 0 and 255, as in
+ * `specularColor(50)` or `specularColor(50, 80)`, can be passed to set the
+ * specular highlight color.
+ *
+ * The second way to call `specularColor()` has one optional parameter,
+ * `color`. A p5.Color object, an array of color
+ * values, or a CSS color string can be passed to set the specular highlight
+ * color.
+ *
+ * The third way to call `specularColor()` has four optional parameters, `v1`,
+ * `v2`, `v3`, and `alpha`. RGBA, HSBA, or HSLA values, as in
+ * `specularColor(255, 0, 0, 80)`, can be passed to set the specular highlight
+ * color. Color values will be interpreted using the current
+ * colorMode().
*
* @method specularColor
- * @param {Number} v1 red or hue value relative to
- * the current color range
- * @param {Number} v2 green or saturation value
- * relative to the current color range
- * @param {Number} v3 blue or brightness value
- * relative to the current color range
+ * @param {Number} v1 red or hue value in the current
+ * colorMode().
+ * @param {Number} v2 green or saturation value in the current
+ * colorMode().
+ * @param {Number} v3 blue, brightness, or lightness value in the current
+ * colorMode().
* @chainable
+ *
* @example
*
*
- * let setRedSpecularColor = true;
+ * // Click and drag the mouse to view the scene from different angles.
*
* function setup() {
* createCanvas(100, 100, WEBGL);
- * noStroke();
- * describe(
- * 'Sphere with specular highlight. Clicking the mouse toggles the specular highlight color between red and the default white.'
- * );
+ *
+ * describe('A white sphere drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // No specular color.
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click the canvas to add a point light.
+ *
+ * let isLit = false;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A sphere drawn on a gray background. A spotlight starts shining when the user double-clicks.');
* }
*
* function draw() {
- * background(0);
+ * background(200);
*
- * ambientLight(60);
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Style the sphere.
+ * noStroke();
+ * specularColor(100);
+ * specularMaterial(255, 255, 255);
*
- * // add a point light to showcase specular color
- * // -- use mouse location to position the light
- * let lightPosX = mouseX - width / 2;
- * let lightPosY = mouseY - height / 2;
- * // -- set the light's specular color
- * if (setRedSpecularColor) {
- * specularColor(255, 0, 0); // red specular highlight
+ * // Control the light.
+ * if (isLit === true) {
+ * // Add a white point light from the top-right.
+ * pointLight(255, 255, 255, 30, -20, 40);
* }
- * // -- create the light
- * pointLight(200, 200, 200, lightPosX, lightPosY, 50); // white light
*
- * // use specular material with high shininess
- * specularMaterial(150);
- * shininess(50);
+ * // Draw the sphere.
+ * sphere(30);
+ * }
*
- * sphere(30, 64, 64);
+ * // Turn on the point light when the user double-clicks.
+ * function doubleClicked() {
+ * isLit = true;
* }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');
+ * }
+ *
+ * function draw() {
+ * background(200);
*
- * function mouseClicked() {
- * setRedSpecularColor = !setRedSpecularColor;
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Add a specular highlight.
+ * // Use a p5.Color object.
+ * let c = color('dodgerblue');
+ * specularColor(c);
+ *
+ * // Add a white point light from the top-right.
+ * pointLight(255, 255, 255, 30, -20, 40);
+ *
+ * // Style the sphere.
+ * noStroke();
+ *
+ * // Add a white specular material.
+ * specularMaterial(255, 255, 255);
+ *
+ * // Draw the sphere.
+ * sphere(30);
* }
*
*
*
- * @alt
- * Sphere with specular highlight. Clicking the mouse toggles the
- * specular highlight color between red and the default white.
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Add a specular highlight.
+ * // Use a CSS color string.
+ * specularColor('#1E90FF');
+ *
+ * // Add a white point light from the top-right.
+ * pointLight(255, 255, 255, 30, -20, 40);
+ *
+ * // Style the sphere.
+ * noStroke();
+ *
+ * // Add a white specular material.
+ * specularMaterial(255, 255, 255);
+ *
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Add a specular highlight.
+ * // Use RGB values.
+ * specularColor(30, 144, 255);
+ *
+ * // Add a white point light from the top-right.
+ * pointLight(255, 255, 255, 30, -20, 40);
+ *
+ * // Style the sphere.
+ * noStroke();
+ *
+ * // Add a white specular material.
+ * specularMaterial(255, 255, 255);
+ *
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ *
*/
/**
* @method specularColor
- * @param {Number} gray number specifying value between
- * white and black
+ * @param {Number} gray grayscale value between 0 and 255.
* @chainable
*/
/**
* @method specularColor
- * @param {String} value color as a CSS string
+ * @param {String} value color as a CSS string.
* @chainable
*/
/**
* @method specularColor
- * @param {Number[]} values color as an array containing the
- * red, green, and blue components
+ * @param {Number[]} values color as an array of RGBA, HSBA, or HSLA
+ * values.
* @chainable
*/
/**
* @method specularColor
- * @param {p5.Color} color color as a p5.Color
+ * @param {p5.Color} color color as a p5.Color object.
* @chainable
*/
p5.prototype.specularColor = function (v1, v2, v3) {
@@ -244,61 +459,155 @@ p5.prototype.specularColor = function (v1, v2, v3) {
};
/**
- * Creates a directional light with the given color and direction.
+ * Creates a light that shines in one direction.
+ *
+ * Directional lights don’t shine from a specific point. They’re like a sun
+ * that shines from somewhere offscreen. The light’s direction is set using
+ * three `(x, y, z)` values between -1 and 1. For example, setting a light’s
+ * direction as `(1, 0, 0)` will light p5.Geometry
+ * objects from the left since the light faces directly to the right.
+ *
+ * There are four ways to call `directionalLight()` with parameters to set the
+ * light’s color and direction.
+ *
+ * The first way to call `directionalLight()` has six parameters. The first
+ * three parameters, `v1`, `v2`, and `v3`, set the light’s color using the
+ * current colorMode(). The last three
+ * parameters, `x`, `y`, and `z`, set the light’s direction. For example,
+ * `directionalLight(255, 0, 0, 1, 0, 0)` creates a red `(255, 0, 0)` light
+ * that shines to the right `(1, 0, 0)`.
+ *
+ * The second way to call `directionalLight()` has four parameters. The first
+ * three parameters, `v1`, `v2`, and `v3`, set the light’s color using the
+ * current colorMode(). The last parameter,
+ * `direction` sets the light’s direction using a
+ * p5.Geometry object. For example,
+ * `directionalLight(255, 0, 0, lightDir)` creates a red `(255, 0, 0)` light
+ * that shines in the direction the `lightDir` vector points.
+ *
+ * The third way to call `directionalLight()` has four parameters. The first
+ * parameter, `color`, sets the light’s color using a
+ * p5.Color object or an array of color values. The
+ * last three parameters, `x`, `y`, and `z`, set the light’s direction. For
+ * example, `directionalLight(myColor, 1, 0, 0)` creates a light that shines
+ * to the right `(1, 0, 0)` with the color value of `myColor`.
+ *
+ * The fourth way to call `directionalLight()` has two parameters. The first
+ * parameter, `color`, sets the light’s color using a
+ * p5.Color object or an array of color values. The
+ * second parameter, `direction`, sets the light’s direction using a
+ * p5.Color object. For example,
+ * `directionalLight(myColor, lightDir)` creates a light that shines in the
+ * direction the `lightDir` vector points with the color value of `myColor`.
*
- * Directional light comes from one direction.
- * The direction is specified as numbers inclusively between -1 and 1.
- * For example, setting the direction as (0, -1, 0) will cause the
- * geometry to be lit from below (since the light will be facing
- * directly upwards). Similarly, setting the direction as (1, 0, 0)
- * will cause the geometry to be lit from the left (since the light
- * will be facing directly rightwards).
+ * @method directionalLight
+ * @param {Number} v1 red or hue value in the current
+ * colorMode().
+ * @param {Number} v2 green or saturation value in the current
+ * colorMode().
+ * @param {Number} v3 blue, brightness, or lightness value in the current
+ * colorMode().
+ * @param {Number} x x-component of the light's direction between -1 and 1.
+ * @param {Number} y y-component of the light's direction between -1 and 1.
+ * @param {Number} z z-component of the light's direction between -1 and 1.
+ * @chainable
*
- * Directional lights do not have a specific point of origin, and
- * therefore cannot be positioned closer or farther away from a geometry.
+ * @example
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click to turn on the directional light.
*
- * A maximum of **5** directional lights can be active at once.
+ * let isLit = false;
*
- * Note: lights need to be called (whether directly or indirectly)
- * within draw() to remain persistent in a looping program.
- * Placing them in setup() will cause them to only have an effect
- * the first time through the loop.
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A sphere drawn on a gray background. A red light starts shining from above when the user double-clicks.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Control the light.
+ * if (isLit === true) {
+ * // Add a red directional light from above.
+ * // Use RGB values and XYZ directions.
+ * directionalLight(255, 0, 0, 0, 1, 0);
+ * }
+ *
+ * // Style the sphere.
+ * noStroke();
+ *
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ *
*
- * @method directionalLight
- * @param {Number} v1 red or hue value relative to the current
- * color range
- * @param {Number} v2 green or saturation value relative to the
- * current color range
- * @param {Number} v3 blue or brightness value relative to the
- * current color range
- * @param {Number} x x component of direction (inclusive range of -1 to 1)
- * @param {Number} y y component of direction (inclusive range of -1 to 1)
- * @param {Number} z z component of direction (inclusive range of -1 to 1)
- * @chainable
- * @example
*
*
+ * // Click and drag the mouse to view the scene from different angles.
+ *
* function setup() {
* createCanvas(100, 100, WEBGL);
- * describe(
- * 'scene with sphere and directional light. The direction of the light is controlled with the mouse position.'
- * );
+ *
+ * describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');
* }
+ *
* function draw() {
- * background(0);
- * //move your mouse to change light direction
- * let dirX = (mouseX / width - 0.5) * 2;
- * let dirY = (mouseY / height - 0.5) * 2;
- * directionalLight(250, 250, 250, -dirX, -dirY, -1);
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Add a red directional light from above.
+ * // Use a p5.Color object and XYZ directions.
+ * let c = color(255, 0, 0);
+ * directionalLight(c, 0, 1, 0);
+ *
+ * // Style the sphere.
* noStroke();
- * sphere(40);
+ *
+ * // Draw the sphere.
+ * sphere(30);
* }
*
*
*
- * @alt
- * scene with sphere and directional light. The direction of
- * the light is controlled with the mouse position.
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Add a red directional light from above.
+ * // Use a p5.Color object and a p5.Vector object.
+ * let c = color(255, 0, 0);
+ * let lightDir = createVector(0, 1, 0);
+ * directionalLight(c, lightDir);
+ *
+ * // Style the sphere.
+ * noStroke();
+ *
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ *
*/
/**
@@ -306,15 +615,15 @@ p5.prototype.specularColor = function (v1, v2, v3) {
* @param {Number} v1
* @param {Number} v2
* @param {Number} v3
- * @param {p5.Vector} direction direction of light as a
- * p5.Vector
+ * @param {p5.Vector} direction direction of the light as a
+ * p5.Vector object.
* @chainable
*/
/**
* @method directionalLight
- * @param {p5.Color|Number[]|String} color color as a p5.Color,
- * as an array, or as a CSS string
+ * @param {p5.Color|Number[]|String} color color as a p5.Color object,
+ * an array of color values, or as a CSS string.
* @param {Number} x
* @param {Number} y
* @param {Number} z
@@ -371,62 +680,210 @@ p5.prototype.directionalLight = function (v1, v2, v3, x, y, z) {
};
/**
- * Creates a point light with the given color and position.
- *
- * A point light emits light from a single point in all directions.
- * Because the light is emitted from a specific point (position),
- * it has a different effect when it is positioned farther vs. nearer
- * an object.
- *
- * A maximum of **5** point lights can be active at once.
- *
- * Note: lights need to be called (whether directly or indirectly)
- * within draw() to remain persistent in a looping program.
- * Placing them in setup() will cause them to only have an effect
- * the first time through the loop.
+ * Creates a light that shines from a point in all directions.
+ *
+ * Point lights are like light bulbs that shine in all directions. They can be
+ * placed at different positions to achieve different lighting effects. A
+ * maximum of 5 point lights can be active at once.
+ *
+ * There are four ways to call `pointLight()` with parameters to set the
+ * light’s color and position.
+ *
+ * The first way to call `pointLight()` has six parameters. The first three
+ * parameters, `v1`, `v2`, and `v3`, set the light’s color using the current
+ * colorMode(). The last three parameters, `x`,
+ * `y`, and `z`, set the light’s position. For example,
+ * `pointLight(255, 0, 0, 50, 0, 0)` creates a red `(255, 0, 0)` light that
+ * shines from the coordinates `(50, 0, 0)`.
+ *
+ * The second way to call `pointLight()` has four parameters. The first three
+ * parameters, `v1`, `v2`, and `v3`, set the light’s color using the current
+ * colorMode(). The last parameter, position sets
+ * the light’s position using a p5.Vector object.
+ * For example, `pointLight(255, 0, 0, lightPos)` creates a red `(255, 0, 0)`
+ * light that shines from the position set by the `lightPos` vector.
+ *
+ * The third way to call `pointLight()` has four parameters. The first
+ * parameter, `color`, sets the light’s color using a
+ * p5.Color object or an array of color values. The
+ * last three parameters, `x`, `y`, and `z`, set the light’s position. For
+ * example, `directionalLight(myColor, 50, 0, 0)` creates a light that shines
+ * from the coordinates `(50, 0, 0)` with the color value of `myColor`.
+ *
+ * The fourth way to call `pointLight()` has two parameters. The first
+ * parameter, `color`, sets the light’s color using a
+ * p5.Color object or an array of color values. The
+ * second parameter, `position`, sets the light’s position using a
+ * p5.Vector object. For example,
+ * `directionalLight(myColor, lightPos)` creates a light that shines from the
+ * position set by the `lightPos` vector with the color value of `myColor`.
*
* @method pointLight
- * @param {Number} v1 red or hue value relative to the current
- * color range
- * @param {Number} v2 green or saturation value relative to the
- * current color range
- * @param {Number} v3 blue or brightness value relative to the
- * current color range
- * @param {Number} x x component of position
- * @param {Number} y y component of position
- * @param {Number} z z component of position
+ * @param {Number} v1 red or hue value in the current
+ * colorMode().
+ * @param {Number} v2 green or saturation value in the current
+ * colorMode().
+ * @param {Number} v3 blue, brightness, or lightness value in the current
+ * colorMode().
+ * @param {Number} x x-coordinate of the light.
+ * @param {Number} y y-coordinate of the light.
+ * @param {Number} z z-coordinate of the light.
* @chainable
+ *
* @example
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click to turn on the point light.
+ *
+ * let isLit = false;
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A sphere drawn on a gray background. A red light starts shining from above when the user double-clicks.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Control the light.
+ * if (isLit === true) {
+ * // Add a red point light from above.
+ * // Use RGB values and XYZ coordinates.
+ * pointLight(255, 0, 0, 0, -150, 0);
+ * }
+ *
+ * // Style the sphere.
+ * noStroke();
+ *
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ * // Turn on the point light when the user double-clicks.
+ * function doubleClicked() {
+ * isLit = true;
+ * }
+ *
+ *
+ *
*
*
+ * // Click and drag the mouse to view the scene from different angles.
+ *
* function setup() {
* createCanvas(100, 100, WEBGL);
- * describe(
- * 'scene with sphere and point light. The position of the light is controlled with the mouse position.'
- * );
+ *
+ * describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');
* }
+ *
* function draw() {
- * background(0);
- * // move your mouse to change light position
- * let locX = mouseX - width / 2;
- * let locY = mouseY - height / 2;
- * // to set the light position,
- * // think of the world's coordinate as:
- * // -width/2,-height/2 ----------- width/2,-height/2
- * // | |
- * // | 0,0 |
- * // | |
- * // -width/2,height/2 ----------- width/2,height/2
- * pointLight(250, 250, 250, locX, locY, 50);
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Add a red point light from above.
+ * // Use a p5.Color object and XYZ directions.
+ * let c = color(255, 0, 0);
+ * pointLight(c, 0, -150, 0);
+ *
+ * // Style the sphere.
* noStroke();
- * sphere(40);
+ *
+ * // Draw the sphere.
+ * sphere(30);
* }
*
*
*
- * @alt
- * scene with sphere and point light. The position of
- * the light is controlled with the mouse position.
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Add a red point light from above.
+ * // Use a p5.Color object and a p5.Vector object.
+ * let c = color(255, 0, 0);
+ * let lightPos = createVector(0, -150, 0);
+ * pointLight(c, lightPos);
+ *
+ * // Style the sphere.
+ * noStroke();
+ *
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('Four spheres arranged in a square and drawn on a gray background. The spheres appear bright red toward the center of the square. The color gets darker toward the corners of the square.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Add a red point light that points to the center of the scene.
+ * // Use a p5.Color object and a p5.Vector object.
+ * let c = color(255, 0, 0);
+ * let lightPos = createVector(0, 0, 65);
+ * pointLight(c, lightPos);
+ *
+ * // Style the spheres.
+ * noStroke();
+ *
+ * // Draw a sphere up and to the left.
+ * push();
+ * translate(-25, -25, 25);
+ * sphere(10);
+ * pop();
+ *
+ * // Draw a box up and to the right.
+ * push();
+ * translate(25, -25, 25);
+ * sphere(10);
+ * pop();
+ *
+ * // Draw a sphere down and to the left.
+ * push();
+ * translate(-25, 25, 25);
+ * sphere(10);
+ * pop();
+ *
+ * // Draw a box down and to the right.
+ * push();
+ * translate(25, 25, 25);
+ * sphere(10);
+ * pop();
+ * }
+ *
+ *
*/
/**
@@ -434,14 +891,15 @@ p5.prototype.directionalLight = function (v1, v2, v3, x, y, z) {
* @param {Number} v1
* @param {Number} v2
* @param {Number} v3
- * @param {p5.Vector} position of light as a p5.Vector
+ * @param {p5.Vector} position position of the light as a
+ * p5.Vector object.
* @chainable
*/
/**
* @method pointLight
- * @param {p5.Color|Number[]|String} color color as a p5.Color,
- * as an array, or as a CSS string
+ * @param {p5.Color|Number[]|String} color color as a p5.Color object,
+ * an array of color values, or a CSS string.
* @param {Number} x
* @param {Number} y
* @param {Number} z
@@ -495,102 +953,62 @@ p5.prototype.pointLight = function (v1, v2, v3, x, y, z) {
};
/**
- * Creates an image light with the given image.
- *
- * The image light simulates light from all the directions.
- * This is done by using the image as a texture for an infinitely
- * large sphere light. This sphere contains
- * or encapsulates the whole scene/drawing.
- * It will have different effect for varying shininess of the
- * object in the drawing.
- * Under the hood it is mainly doing 2 types of calculations,
- * the first one is creating an irradiance map the
- * environment map of the input image.
- * The second one is managing reflections based on the shininess
- * or roughness of the material used in the scene.
- *
- * Note: The image's diffuse light will be affected by fill()
- * and the specular reflections will be affected by specularMaterial()
- * and shininess().
+ * Creates an ambient light from an image.
*
- * @method imageLight
- * @param {p5.image} img image for the background
- * @example
- *
- *
- * let img;
+ * `imageLight()` simulates a light shining from all directions. The effect is
+ * like placing the sketch at the center of a giant sphere that uses the image
+ * as its texture. The image's diffuse light will be affected by
+ * fill() and the specular reflections will be
+ * affected by specularMaterial() and
+ * shininess().
*
- * function preload() {
- * img = loadImage('assets/outdoor_image.jpg');
- * }
- * function setup() {
- * createCanvas(100, 100, WEBGL);
- * camera(0, 0, 50*sqrt(3), 0, 0, 0, 0 ,1, 0);
- * perspective(PI/3, 1, 5, 500);
- * }
- * function draw() {
- * background(220);
+ * The parameter, `img`, is the p5.Image object to
+ * use as the light source.
*
- * push();
- * camera(0, 0, 1, 0, 0, 0, 0, 1, 0);
- * ortho(-1, 1, -1, 1, 0, 1);
- * noLights();
- * noStroke();
- * texture(img);
- * plane(2);
- * pop();
+ * @method imageLight
+ * @param {p5.image} img image to use as the light source.
*
- * ambientLight(50);
- * imageLight(img);
- * specularMaterial(20);
- * noStroke();
- * rotateX(frameCount * 0.005);
- * rotateY(frameCount * 0.005);
- * box(50);
- * }
- *
- *
*
+ * // Click and drag the mouse to view the scene from different angles.
+ *
* let img;
- * let slider;
*
+ * // Load an image and create a p5.Image object.
* function preload() {
* img = loadImage('assets/outdoor_spheremap.jpg');
* }
+ *
* function setup() {
* createCanvas(100, 100, WEBGL);
- * slider = createSlider(0, 400, 100, 1);
- * slider.position(0, height);
- * camera(0, 0, 50*sqrt(3), 0, 0, 0, 0 ,1, 0);
- * perspective(PI/3, 1, 5, 500);
+ *
+ * describe('A sphere floating above a landscape. The surface of the sphere reflects the landscape.');
* }
+ *
* function draw() {
- * background(220);
+ * // Enable orbiting with the mouse.
+ * orbitControl();
*
- * push();
- * camera(0, 0, 1, 0, 0, 0, 0, 1, 0);
- * ortho(-1, 1, -1, 1, 0, 1);
- * noLights();
- * noStroke();
- * texture(img);
- * plane(2);
- * pop();
+ * // Draw the image as a panorama (360˚ background).
+ * panorama(img);
*
+ * // Add a soft ambient light.
* ambientLight(50);
+ *
+ * // Add light from the image.
* imageLight(img);
+ *
+ * // Style the sphere.
* specularMaterial(20);
- * shininess(slider.value());
+ * shininess(100);
* noStroke();
+ *
+ * // Draw the sphere.
* sphere(30);
* }
*
*
- * @alt
- * light with slider having a slider for varying roughness
*/
p5.prototype.imageLight = function (img) {
// activeImageLight property is checked by _setFillUniforms
@@ -600,47 +1018,56 @@ p5.prototype.imageLight = function (img) {
};
/**
- * The `panorama(img)` method transforms images containing
- * 360-degree content, such as maps or HDRIs, into immersive
- * 3D backgrounds that surround your scene. This is similar to calling
- * `background(color)`; call `panorama(img)` before drawing your
- * scene to create a 360-degree background from your image. It
- * operates on the concept of sphere mapping, where the image is
- * mapped onto an infinitely large sphere based on the angles of the
- * camera.
- *
- * To enable 360-degree viewing, either use `orbitControl()` or try changing
- * the orientation of the camera to see different parts of the background.
+ * Creates an immersive 3D background.
+ *
+ * `panorama()` transforms images containing 360˚ content, such as maps or
+ * HDRIs, into immersive 3D backgrounds that surround a sketch. Exploring the
+ * space requires changing the camera's perspective with functions such as
+ * orbitControl() or
+ * camera().
*
* @method panorama
- * @param {p5.Image} img A 360-degree image to use as a background panorama
+ * @param {p5.Image} img 360˚ image to use as the background.
+ *
* @example
*
*
+ * // Click and drag the mouse to view the scene from different angles.
+ *
* let img;
+ *
+ * // Load an image and create a p5.Image object.
* function preload() {
* img = loadImage('assets/outdoor_spheremap.jpg');
* }
+ *
* function setup() {
* createCanvas(100 ,100 ,WEBGL);
+ *
+ * describe('A sphere floating above a landscape. The surface of the sphere reflects the landscape. The full landscape is viewable in 3D as the user drags the mouse.');
* }
+ *
* function draw() {
+ * // Add the panorama.
* panorama(img);
- * imageMode(CENTER);
+ *
+ * // Enable orbiting with the mouse.
* orbitControl();
- * noStroke();
- * push();
+ *
+ * // Use the image as a light source.
* imageLight(img);
- * specularMaterial('green');
+ *
+ * // Style the sphere.
+ * noStroke();
+ * specularMaterial(50);
* shininess(200);
* metalness(100);
- * sphere(25);
- * pop();
+ *
+ * // Draw the sphere.
+ * sphere(30);
* }
*
*
- * @alt
- * The image transformed into a panoramic scene.
*/
p5.prototype.panorama = function (img) {
this.filter(this._renderer._getSphereMapping(img));
@@ -658,28 +1085,68 @@ p5.prototype.panorama = function (img) {
*
* @method lights
* @chainable
+ *
* @example
*
*
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click to turn on the lights.
+ *
+ * let isLit = false;
+ *
* function setup() {
* createCanvas(100, 100, WEBGL);
- * camera(0, 0, 50*sqrt(3), 0, 0, 0, 0, 1, 0);
- * perspective(PI/3, 1, 5*sqrt(3), 500*sqrt(3));
- * describe('the light is partially ambient and partially directional');
+ *
+ * describe('A white box drawn against a gray background. The quality of the light changes when the user double-clicks.');
* }
+ *
* function draw() {
- * background(0);
- * lights();
- * rotateX(millis() / 1000);
- * rotateY(millis() / 1000);
- * rotateZ(millis() / 1000);
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Control the lights.
+ * if (isLit === true) {
+ * lights();
+ * }
+ *
+ * // Draw the box.
* box();
* }
+ *
+ * // Turn on the lights when the user double-clicks.
+ * function doubleClicked() {
+ * isLit = true;
+ * }
*
*
*
- * @alt
- * the light is partially ambient and partially directional
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ *
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ *
+ * describe('A white box drawn against a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * ambientLight(128, 128, 128);
+ * directionalLight(128, 128, 128, 0, 0, -1);
+ *
+ * // Draw the box.
+ * box();
+ * }
+ *
+ *
*/
p5.prototype.lights = function () {
this._assert3d('lights');
@@ -694,56 +1161,66 @@ p5.prototype.lights = function () {
* Sets the falloff rate for pointLight()
* and spotLight().
*
- * lightFalloff() affects only the lights which are created after it
- * in the code.
+ * A light’s falloff describes the intensity of its beam at a distance. For
+ * example, a lantern has a slow falloff, a flashlight has a medium falloff,
+ * and a laser pointer has a sharp falloff.
*
- * The `constant`, `linear`, an `quadratic` parameters are used to calculate falloff as follows:
+ * `lightFalloff()` has three parameters, `constant`, `linear`, and
+ * `quadratic`. They’re numbers used to calculate falloff at a distance, `d`,
+ * as follows:
*
- * d = distance from light position to vertex position
+ * `falloff = 1 / (constant + d * linear + (d * d) * quadratic)`
*
- * falloff = 1 / (CONSTANT + d \* LINEAR + (d \* d) \* QUADRATIC)
+ * Note: `constant`, `linear`, and `quadratic` should always be set to values
+ * greater than 0.
*
* @method lightFalloff
- * @param {Number} constant CONSTANT value for determining falloff
- * @param {Number} linear LINEAR value for determining falloff
- * @param {Number} quadratic QUADRATIC value for determining falloff
+ * @param {Number} constant constant value for calculating falloff.
+ * @param {Number} linear linear value for calculating falloff.
+ * @param {Number} quadratic quadratic value for calculating falloff.
* @chainable
+ *
* @example
*
*
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click to change the falloff rate.
+ *
+ * let useFalloff = false;
+ *
* function setup() {
* createCanvas(100, 100, WEBGL);
- * noStroke();
- * describe(
- * 'Two spheres with different falloff values show different intensity of light'
- * );
+ *
+ * describe('A sphere drawn against a gray background. The intensity of the light changes when the user double-clicks.');
* }
+ *
* function draw() {
- * background(125);
+ * background(50);
*
- * let locX = mouseX - width / 2;
- * let locY = mouseY - height / 2;
- * locX /= 2; // half scale
+ * // Enable orbiting with the mouse.
+ * orbitControl();
*
- * lightFalloff(1, 0, 0);
- * push();
- * translate(-25, 0, 0);
- * pointLight(250, 250, 250, locX - 25, locY, 50);
- * sphere(20);
- * pop();
+ * // Set the light falloff.
+ * if (useFalloff === true) {
+ * lightFalloff(2, 0, 0);
+ * }
*
- * lightFalloff(0.97, 0.03, 0);
- * push();
- * translate(25, 0, 0);
- * pointLight(250, 250, 250, locX + 25, locY, 50);
- * sphere(20);
- * pop();
+ * // Add a white point light from the front.
+ * pointLight(255, 255, 255, 0, 0, 100);
+ *
+ * // Style the sphere.
+ * noStroke();
+ *
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ * // Change the falloff value when the user double-clicks.
+ * function doubleClicked() {
+ * useFalloff = true;
* }
*
*
- *
- * @alt
- * Two spheres with different falloff values show different intensity of light
*/
p5.prototype.lightFalloff = function (
constantAttenuation,
@@ -792,84 +1269,138 @@ p5.prototype.lightFalloff = function (
};
/**
- * Creates a spot light with the given color, position,
- * light direction, angle, and concentration.
+ * Creates a light that shines from a point in one direction.
+ *
+ * Spot lights are like flashlights that shine in one direction creating a
+ * cone of light. The shape of the cone can be controlled using the angle and
+ * concentration parameters. A maximum of 5 spot lights can be active at once.
+ *
+ * There are eight ways to call `spotLight()` with parameters to set the
+ * light’s color, position, direction. For example,
+ * `spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0)` creates a red `(255, 0, 0)` light
+ * at the origin `(0, 0, 0)` that points to the right `(1, 0, 0)`.
+ *
+ * The `angle` parameter is optional. It sets the radius of the light cone.
+ * For example, `spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16)` creates a
+ * red `(255, 0, 0)` light at the origin `(0, 0, 0)` that points to the right
+ * `(1, 0, 0)` with an angle of `PI / 16` radians. By default, `angle` is
+ * `PI / 3` radians.
+ *
+ * The `concentration` parameter is also optional. It focuses the light
+ * towards the center of the light cone. For example,
+ * `spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16, 50)` creates a red
+ * `(255, 0, 0)` light at the origin `(0, 0, 0)` that points to the right
+ * `(1, 0, 0)` with an angle of `PI / 16` radians at concentration of 50. By
+ * default, `concentration` is 100.
+ *
+ * @method spotLight
+ * @param {Number} v1 red or hue value in the current
+ * colorMode().
+ * @param {Number} v2 green or saturation value in the current
+ * colorMode().
+ * @param {Number} v3 blue, brightness, or lightness value in the current
+ * colorMode().
+ * @param {Number} x x-coordinate of the light.
+ * @param {Number} y y-coordinate of the light.
+ * @param {Number} z z-coordinate of the light.
+ * @param {Number} rx x-component of light direction between -1 and 1.
+ * @param {Number} ry y-component of light direction between -1 and 1.
+ * @param {Number} rz z-component of light direction between -1 and 1.
+ * @param {Number} [angle] angle of the light cone. Defaults to `PI / 3`.
+ * @param {Number} [concentration] concentration of the light. Defaults to 100.
+ * @chainable
+ *
+ * @example
+ *
+ *
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click to adjust the spotlight.
*
- * Like a pointLight(), a spotLight()
- * emits light from a specific point (position). It has a different effect
- * when it is positioned farther vs. nearer an object.
+ * let isLit = false;
*
- * However, unlike a pointLight(), the light is emitted in **one direction**
- * along a conical shape. The shape of the cone can be controlled using
- * the `angle` and `concentration` parameters.
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
*
- * The `angle` parameter is used to
- * determine the radius of the cone. And the `concentration`
- * parameter is used to focus the light towards the center of
- * the cone. Both parameters are optional, however if you want
- * to specify `concentration`, you must also specify `angle`.
- * The minimum concentration value is 1.
+ * describe('A white sphere drawn on a gray background. A red spotlight starts shining when the user double-clicks.');
+ * }
*
- * A maximum of **5** spot lights can be active at once.
+ * function draw() {
+ * background(50);
*
- * Note: lights need to be called (whether directly or indirectly)
- * within draw() to remain persistent in a looping program.
- * Placing them in setup() will cause them to only have an effect
- * the first time through the loop.
+ * // Enable orbiting with the mouse.
+ * orbitControl();
*
- * @method spotLight
- * @param {Number} v1 red or hue value relative to the current color range
- * @param {Number} v2 green or saturation value relative to the current color range
- * @param {Number} v3 blue or brightness value relative to the current color range
- * @param {Number} x x component of position
- * @param {Number} y y component of position
- * @param {Number} z z component of position
- * @param {Number} rx x component of light direction (inclusive range of -1 to 1)
- * @param {Number} ry y component of light direction (inclusive range of -1 to 1)
- * @param {Number} rz z component of light direction (inclusive range of -1 to 1)
- * @param {Number} [angle] angle of cone. Defaults to PI/3
- * @param {Number} [concentration] concentration of cone. Defaults to 100
- * @chainable
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Control the spotlight.
+ * if (isLit === true) {
+ * // Add a red spot light that shines into the screen.
+ * // Set its angle to PI / 32 radians.
+ * spotLight(255, 0, 0, 0, 0, 100, 0, 0, -1, PI / 32);
+ * }
+ *
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ * // Turn on the spotlight when the user double-clicks.
+ * function doubleClicked() {
+ * isLit = true;
+ * }
+ *
+ *
*
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click to adjust the spotlight.
+ *
+ * let isLit = false;
+ *
* function setup() {
* createCanvas(100, 100, WEBGL);
- * describe(
- * 'scene with sphere and spot light. The position of the light is controlled with the mouse position.'
- * );
+ *
+ * describe('A white sphere drawn on a gray background. A red spotlight starts shining when the user double-clicks.');
* }
+ *
* function draw() {
- * background(0);
- * // move your mouse to change light position
- * let locX = mouseX - width / 2;
- * let locY = mouseY - height / 2;
- * // to set the light position,
- * // think of the world's coordinate as:
- * // -width/2,-height/2 ----------- width/2,-height/2
- * // | |
- * // | 0,0 |
- * // | |
- * // -width/2,height/2 ----------- width/2,height/2
- * ambientLight(50);
- * spotLight(0, 250, 0, locX, locY, 100, 0, 0, -1, Math.PI / 16);
- * noStroke();
- * sphere(40);
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Control the spotlight.
+ * if (isLit === true) {
+ * // Add a red spot light that shines into the screen.
+ * // Set its angle to PI / 3 radians (default).
+ * // Set its concentration to 1000.
+ * let c = color(255, 0, 0);
+ * let position = createVector(0, 0, 100);
+ * let direction = createVector(0, 0, -1);
+ * spotLight(c, position, direction, PI / 3, 1000);
+ * }
+ *
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ *
+ * // Turn on the spotlight when the user double-clicks.
+ * function doubleClicked() {
+ * isLit = true;
* }
*
*
- *
- * @alt
- * scene with sphere and spot light. The position of
- * the light is controlled with the mouse position.
*/
/**
* @method spotLight
- * @param {p5.Color|Number[]|String} color color as a p5.Color,
- * as an array, or as a CSS string
- * @param {p5.Vector} position position of light as a p5.Vector
- * @param {p5.Vector} direction direction of light as a p5.Vector
+ * @param {p5.Color|Number[]|String} color color as a p5.Color object,
+ * an array of color values, or a CSS string.
+ * @param {p5.Vector} position position of the light as a p5.Vector object.
+ * @param {p5.Vector} direction direction of light as a p5.Vector object.
* @param {Number} [angle]
* @param {Number} [concentration]
*/
@@ -1153,52 +1684,62 @@ p5.prototype.spotLight = function (
};
/**
- * Removes all lights present in a sketch.
+ * Removes all lights from the sketch.
*
- * All subsequent geometry is rendered without lighting (until a new
- * light is created with a call to one of the lighting functions
- * (lights(),
+ * Calling `noLights()` removes any lights created with
+ * lights(),
* ambientLight(),
* directionalLight(),
- * pointLight(),
- * spotLight()).
+ * pointLight(), or
+ * spotLight(). These functions may be called
+ * after `noLights()` to create a new lighting scheme.
*
* @method noLights
* @chainable
+ *
* @example
*
*
+ * // Click and drag the mouse to view the scene from different angles.
+ *
* function setup() {
* createCanvas(100, 100, WEBGL);
- * describe(
- * 'Three white spheres. Each appears as a different color due to lighting.'
- * );
+ *
+ * describe('Two spheres drawn against a gray background. The top sphere is white and the bottom sphere is red.');
* }
+ *
* function draw() {
- * background(200);
+ * background(50);
+ *
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ *
+ * // Turn on the lights.
+ * lights();
+ *
+ * // Style the spheres.
* noStroke();
*
- * ambientLight(255, 0, 0);
- * translate(-30, 0, 0);
- * ambientMaterial(255);
- * sphere(13);
+ * // Draw the top sphere.
+ * push();
+ * translate(0, -25, 0);
+ * sphere(20);
+ * pop();
*
+ * // Turn off the lights.
* noLights();
- * translate(30, 0, 0);
- * ambientMaterial(255);
- * sphere(13);
- *
- * ambientLight(0, 255, 0);
- * translate(30, 0, 0);
- * ambientMaterial(255);
- * sphere(13);
+ *
+ * // Add a red directional light that points into the screen.
+ * directionalLight(255, 0, 0, 0, 0, -1);
+ *
+ * // Draw the bottom sphere.
+ * push();
+ * translate(0, 25, 0);
+ * sphere(20);
+ * pop();
* }
*
*
- *
- * @alt
- * Three white spheres. Each appears as a different
- * color due to lighting.
*/
p5.prototype.noLights = function (...args) {
this._assert3d('noLights');