रंग

डिजिटल दुनिया में, जब हम किसी रंग के बारे में बात करना चाहते हैं, तो सटीकता की आवश्यकता होती है। "अरे, क्या आप उस सर्कल को हरा-हरा बना सकते हैं?" नहीं करूँगा। रंग, बल्कि, संख्याओं की एक सीमा के रूप में परिभाषित किया गया है। चलो सबसे सरल मामले से शुरू करते हैं: काले और सफेद या ग्रेस्केल। 0 का मतलब है काला, 255 का मतलब है सफेद। बीच में, हर दूसरे नंबर- 50, 87, 162, 209, और इसी तरह से ग्रे की एक छाया है जो काले से सफेद तक होती है।

कुछ खींचने से पहले stroke() और fill() कार्य करने से पहले, हम किसी भी दिए गए आकार का रंग निर्धारित कर सकते हैं. ़ ंक्शन background() भी है , ो खिड़की के लिए एक पृष्ठभूमि रंग सेट करता है। यहाँ एक उदाहरण है

        background(255);    // सफेद करने के लिए पृष्ठभूमि की स्थापना
 stroke(0);          // काला करने के लिए रूपरेखा (स्ट्रोक) की स्थापना
 fill(150);          // एक आकृति के इंटीरियर को सेट करना (भरना) ग्रे करने के लिए
 rect(50,50,75,100); // आयत खींचना
      

स्ट्रोक या भरण को कार्यों के साथ समाप्त किया जा सकता है: noStroke() और noFill() हमारी प्रवृत्ति को बिना किसी रूपरेखा के "स्ट्रोक (0)" कहना हो सकता है, हालांकि, यह याद रखना महत्वपूर्ण है कि 0 "कुछ भी नहीं" है, बल्कि रंग काले को दर्शाता है। इसके अलावा, दोनों को खत्म करने के लिए याद रखें - noStroke() और noFill() ,कुछ भी नहीं दिखाई देगा!

इसके अलावा, अगर हम दो आकृतियाँ बनाते हैं, तो p5.js हमेशा सबसे हाल ही में निर्दिष्ट स्ट्रोक का उपयोग करेगा और ऊपर से नीचे तक कोड को पढ़ेगा।

RGB रंग

फिंगर पेंटिंग याद है? तीन " प्राथमिक " रंगों को मिलाकर, किसी भी रंग को उत्पन्न किया जा सकता है। सभी रंगों को एक साथ घूमने से मैला भूरा हुआ। जितना अधिक पेंट आपने जोड़ा, उतना ही गहरा। डिजिटल रंगों का निर्माण भी तीन प्राथमिक रंगों को मिलाकर किया जाता है, लेकिन यह पेंट से अलग तरह से काम करता है। सबसे पहले, प्राइमरी अलग हैं: लाल, हरा और नीला (यानी, " RGB " रंग)। और स्क्रीन पर रंग के साथ, आप प्रकाश मिश्रण कर रहे हैं, पेंट नहीं कर रहे हैं, इसलिए मिश्रण के नियम भी अलग हैं।

• लाल + हरा = पीला
• लाल + नीला = बैंगनी
• हरा + नीला = सियान (नीला-हरा)
• लाल + हरा + नीला = सफेद
• कोई रंग नहीं = काला

यह मानता है कि रंग सभी के रूप में संभव के रूप में उज्ज्वल हैं, लेकिन निश्चित रूप से, आपके पास उपलब्ध रंग की एक सीमा है, इसलिए कुछ लाल प्लस कुछ हरे रंग के साथ कुछ नीले बराबर ग्रे, और लाल रंग का एक सा नीला नीला बैंगनी के बराबर है। हालांकि यह कुछ करने के लिए इस्तेमाल किया जा सकता है, जितना अधिक आप आरजीबी रंग के साथ कार्यक्रम और प्रयोग करते हैं, उतना ही यह सहज हो जाएगा, बहुत कुछ अपनी उंगलियों के साथ घूमता रंगों की तरह। और निश्चित रूप से आप कुछ नीले रंग के साथ कुछ लाल मिश्रण नहीं कर सकते, आपको एक सटीक राशि प्रदान करनी होगी। ग्रेस्केल के साथ, व्यक्तिगत रंग तत्वों को 0 (उस रंग में से कोई भी) से लेकर 255 तक (जितना संभव हो) के रूप में व्यक्त किया जाता है, और वे आर, जी और बी क्रम में सूचीबद्ध होते हैं। प्रयोग के माध्यम से रंग मिश्रण, लेकिन अगले हम कुछ सामान्य रंगों का उपयोग करके कुछ कोड को कवर करेंगे।

रंग पारदर्शिता

प्रत्येक रंग के लाल, हरे और नीले रंग के घटकों के अलावा, एक अतिरिक्त वैकल्पिक चौथा घटक है, जिसे रंग के " अल्फा " के रूप में जाना जाता है। अल्फा का अर्थ पारदर्शिता है और विशेष रूप से उपयोगी है जब आप उन तत्वों को आकर्षित करना चाहते हैं जो आंशिक रूप से एक-दूसरे के ऊपर से देखते हैं। किसी छवि के लिए अल्फा मान कभी-कभी सामूहिक रूप से एक छवि के " अल्फा चैनल " के रूप में संदर्भित होते हैं।

यह महसूस करना महत्वपूर्ण है कि पिक्सेल सचमुच पारदर्शी नहीं हैं, यह बस एक सुविधाजनक भ्रम है जो रंगों को सम्मिश्रण करने से पूरा होता है। पर्दे के पीछे, p5.js रंग संख्या लेता है और सम्मिश्रण की ऑप्टिकल धारणा बनाते हुए एक प्रतिशत को दूसरे के प्रतिशत में जोड़ता है। (यदि आप प्रोग्रामिंग में रुचि रखते हैं " गुलाब के रंग का " चश्मा, तो यह वह जगह है जहाँ आप शुरू करेंगे।)

अल्फा मान भी 0 से 255 तक होता है, जिसमें 0 पूरी तरह से पारदर्शी होता है (यानी, 0% अपारदर्शी) और 255 पूरी तरह से अपारदर्शी (यानी, 100% अपारदर्शी).

कस्टम रंग रेंज

0 से 255 के बीच आरजीबी रंग एकमात्र तरीका नहीं है जो आप पी 5.js में रंग संभाल सकते हैं, वास्तव में, यह हमें किसी भी तरह से रंग के बारे में सोचने की अनुमति देता है। उदाहरण के लिए, आप रंग के बारे में सोचना पसंद कर सकते हैं जो 0 से लेकर 100 (प्रतिशत की तरह) तक हो सकता है। आप एक कस्टम colorMode () निर्दिष्ट करके ऐसा कर सकते हैं। colorMode().

      colorMode(RGB,100);
      

उपरोक्त फ़ंक्शन कहता है: " ठीक है, हम लाल, हरे और नीले रंग के संदर्भ में रंग के बारे में सोचना चाहते हैं। RGB मूल्यों की सीमा 0 से 100 तक होगी। "

हालाँकि ऐसा करने के लिए यह शायद ही सुविधाजनक है, आप प्रत्येक रंग घटक के लिए अलग-अलग रेंज भी रख सकते हैं:

      colorMode(RGB,100,500,10,255);
      

अब हम कह रहे हैं कि "लाल मान 0 से 100 तक जाते हैं, 0 से 500 तक हरा, 0 से 10 तक नीला और 0 से 255 तक अल्फा। "

अंत में, जबकि आपको अपनी सभी प्रोग्रामिंग जरूरतों के लिए केवल RGB रंग की आवश्यकता होगी, आप HSB (ह्यू, संतृप्ति और चमक) मोड में भी रंग निर्दिष्ट कर सकते हैं। बहुत अधिक विस्तार में आए बिना, एचएसबी रंग निम्नानुसार काम करता है:

• रंग- रंग प्रकार, डिफ़ॉल्ट रूप से 0 से 255 तक होता है।
• परिपूर्णता- रंग की जीवंतता, डिफ़ॉल्ट रूप से 0 से 255।
• चमक, रंग की चमक, डिफ़ॉल्ट रूप से 0 से 255।

साथ में colorMode() आप इन मूल्यों के लिए अपनी सीमाएं निर्धारित कर सकते हैं। कुछ लोग ह्यू के लिए 0-360 (रंग व्हील पर 360 डिग्री सोचते हैं) और संतृप्ति और चमक के लिए 0-100 (0-100% के बारे में सोचें) की एक सीमा पसंद करते हैं।