जब किसी आकृति का यूवी निर्देशांक बनावट से परे चला जाता है तो बनावट के व्यवहार का तरीका बदल जाता है।
texture() को काम करने के लिए, किसी आकृति को उसकी सतह पर बिंदुओं को छवि में पिक्सेल पर मैप करने के तरीके की आवश्यकता होती है। rect() और box() जैसी अंतर्निहित आकृतियाँ पहले से ही मौजूद हैं बनावट मानचित्रण उनके शीर्षों के आधार पर। vertex() के साथ बनाई गई कस्टम आकृतियों को यूवी निर्देशांक के रूप में पारित होने के लिए बनावट मैपिंग की आवश्यकता होती है।
प्रत्येक कॉल vertex() में 5 तर्क शामिल होने चाहिए, जैसे vertex(x, y, z, u, v)<!-- कोड-->, एक छवि के भीतर निर्देशांक <code>(x, y, z)</code> पर शीर्ष को निर्देशांक <code>(u, v)</code> पर पिक्सेल पर मैप करने के लिए। उदाहरण के लिए, एक आयताकार छवि के कोनों को डिफ़ॉल्ट रूप से एक आयत के कोनों पर मैप किया जाता है:
<code> // Apply the image as a texture. texture(img); <p>// Draw the rectangle. rect(0, 0, 30, 50); </p></code> <p>यदि उपरोक्त कोड स्निपेट में छवि का आयाम 300 x 500 पिक्सेल है, वही परिणाम इस प्रकार प्राप्त किया जा सकता है:</p> <code> // Apply the image as a texture. texture(img); <p>// Draw the rectangle. beginShape();</p> <p>// Top-left. // u: 0, v: 0 vertex(0, 0, 0, 0, 0);</p> <p>// Top-right. // u: 300, v: 0 vertex(30, 0, 0, 300, 0);</p> <p>// Bottom-right. // u: 300, v: 500 vertex(30, 50, 0, 300, 500);</p> <p>// Bottom-left. // u: 0, v: 500 vertex(0, 50, 0, 0, 500);</p> <p>endShape(); </p></code> <p><code>textureWrap()</code> नियंत्रित करता है कि बनावट कैसे व्यवहार करती है जब उनकी यूवी बनावट से परे जाती है। ऐसा करने से टाइलिंग जैसे दिलचस्प दृश्य प्रभाव उत्पन्न हो सकते हैं। उदाहरण के लिए, ऊपर दिए गए कस्टम आकार में यू-निर्देशांक छवि की चौड़ाई से अधिक हो सकते हैं:</p> <code> // Apply the image as a texture. texture(img); <p>// Draw the rectangle. beginShape(); vertex(0, 0, 0, 0, 0);</p> <p>// Top-right. // u: 600 vertex(30, 0, 0, 600, 0);</p> <p>// Bottom-right. // u: 600 vertex(30, 50, 0, 600, 500);</p> <p>vertex(0, 50, 0, 0, 500); endShape(); </p></code> <p>600 के यू-निर्देशांक बनावट छवि की चौड़ाई 300 से अधिक हैं। यह दिलचस्प संभावनाएं पैदा करता है।</p> <p>पहला पैरामीटर, <code>wrapX</code>, तीन संभावित स्थिरांक स्वीकार करता है। यदि <code>CLAMP</code> पास हो जाता है, जैसा कि <code>textureWrap(CLAMP)</code> में होता है, तो बनावट के किनारे पर मौजूद पिक्सेल आकृति के किनारों तक विस्तारित हो जाएंगे। यदि <code>REPEAT</code> पास हो जाता है, जैसे कि <code>textureWrap(REPEAT)</code> में, बनावट आकृति के किनारों तक पहुंचने तक बार-बार टाइल होगी। यदि <code>MIRROR</code> पास हो जाता है, जैसा कि <code>textureWrap(MIRROR)</code> में होता है, तो बनावट बार-बार टाइल करेगी जब तक कि वह आकृति के किनारों तक नहीं पहुंच जाती, और टाइलों के बीच उसका अभिविन्यास बदल जाता है। डिफ़ॉल्ट रूप से, बनावट <code>CLAMP</code>.</p> <p>दूसरा पैरामीटर, <code>wrapY</code>, वैकल्पिक है। यह समान तीन स्थिरांक स्वीकार करता है, <code>CLAMP</code>, <code>REPEAT</code>, और<code>MIRROR</code>। यदि इनमें से एक स्थिरांक पारित हो जाता है, जैसे कि <code>textureWRAP(MIRROR, REPEAT)</code>, तो बनावट <code>MIRROR</code> क्षैतिज रूप से और <code>दोहराया जाएगा</code> लंबवत रूप से होगी। डिफ़ॉल्ट रूप से, <code>wrapY</code> को <code>wrapX</code> के समान मान पर सेट किया जाएगा।</p> <p>ध्यान दें: <code>textureWrap()</code> का उपयोग केवल WebGL मोड में किया जा सकता है।</p>
उदाहरण
सिंटैक्स
textureWrap(wrapX, [wrapY])
पैरामीटर्स
या तो क्लैंप, रिपीट, या मिरर
या तो क्लैंप, रिपीट, या मिरर
संबंधित संदर्भ
copyToContext
एक ड्रॉइंग संदर्भ से दूसरे में शेडर को कॉपी करता है। प्रत्येक p5.Shader ऑब्जेक्ट को shader() कॉल करके कंपाइल किया जाना चाहिए ताकि यह चल सके। कंपाइलेशन एक ड्रॉइंग संदर्भ में होता है जो आम तौर पर मुख्य कैनवास या p5.Graphics का एक इंस्टेंस होता है। एक शेडर केवल उसी संदर्भ में उपयोग किया जा सकता है जहां इसे कंपाइल किया गया था। copyToContext() विधि शेडर को फिर से कंपाइल करती है और इसे दूसरे ड्रॉइंग संदर्भ में कॉपी करती है जहां इसका पुन: उपयोग किया जा सकता है। पैरामीटर context वह ड्रॉइंग संदर्भ है जहां शेडर का उपयोग किया जाएगा। शेडर को p5.Graphics के एक इंस्टेंस में, जैसे myShader.copyToContext(pg), कॉपी किया जा सकता है। शेडर को window का उपयोग कर p5.Graphics ऑब्जेक्ट से मुख्य कैनवास में भी कॉपी किया जा सकता है, जैसे myShader.copyToContext(window)। नोट: createShader(), createFilterShader(), या loadShader() के साथ बनाया गया p5.Shader ऑब्जेक्ट, createFramebuffer() के साथ बनाए गए p5.Framebuffer ऑब्जेक्ट के साथ सीधे उपयोग किया जा सकता है। दोनों ऑब्जेक्ट का मुख्य कैनवास के समान संदर्भ होता है। .
setUniform
शेडर के एकरूप (वैश्विक) चर को सेट करता है। शेडर कार्यक्रम कंप्यूटर के ग्राफ़िक्स प्रोसेसिंग यूनिट (GPU) पर चलते हैं। वे कंप्यूटर के मेमोरी के एक हिस्से में रहते हैं जो स्केच से पूरी तरह से अलग होता है। एकरूप वह वैश्विक चर होते हैं जो किसी शेडर कार्यक्रम के भीतर होते हैं। वे सीपीयू पर चलने वाले स्केच से जीपीयू पर चलने वाले शेडर कार्यक्रम में मान पास करने का एक तरीका प्रदान करते हैं। पहला पैरामीटर, uniformName, एकरूप के नाम की एक स्ट्रिंग है। ऊपर के शेडर के लिए, uniformName 'r' होगा। दूसरा पैरामीटर, data, वह मान है जिसका उपयोग एकरूप को सेट करने के लिए किया जाना चाहिए। उदाहरण के लिए, myShader.setUniform('r', 0.5) कॉल करने से उपर्युक्त शेडर में r एकरूप को 0.5 पर सेट कर दिया जाएगा। डेटा एकरूप के प्रकार के अनुरूप होना चाहिए। नंबर, स्ट्रिंग, बूलियन, एरे और कई प्रकार की छवियां सभी setUniform() के साथ शेडर में पास की जा सकती हैं। .
ambientMaterial
आकारों के सतह के पदार्थ के आंबियंट रंग को सेट करता है। ambientMaterial() रंग ambientLight() रंग के घटकों को सेट करता है जिन्हें आकार प्रतिबिंबित करेंगे। उदाहरण के लिए, ambientMaterial(255, 255, 0) कहने से एक आकार लाल और हरे रोशनी को प्रतिबिंबित करेगा, लेकिन नीले रोशनी को नहीं। ambientMaterial() को तीन तरीकों से कॉल किया जा सकता है, जिनमें अलग-अलग पैरामीटर हैं, ताकि पदार्थ का रंग सेट किया जा सके। ambientMaterial() को कॉल करने का पहला तरीका एक पैरामीटर, gray है। 0 और 255 के बीच के ग्रेस्केल मान, जैसे ambientMaterial(50), पदार्थ के रंग को सेट करने के लिए पास किए जा सकते हैं। उच्चतर ग्रेस्केल मान आकार को अधिक प्रकाशित दिखाते हैं। ambientMaterial() को कॉल करने का दूसरा तरीका एक पैरामीटर, color है। एक p5.Color ऑब्जेक्ट, रंग मानों का एक array, या CSS रंग स्ट्रिंग, जैसे ambientMaterial('magenta'), पदार्थ के रंग को सेट करने के लिए पास किया जा सकता है। ambientMaterial() को कॉल करने का तीसरा तरीका तीन पैरामीटर, v1, v2, और v3 है। RGB, HSB, या HSL मान, जैसे ambientMaterial(255, 0, 0), पदार्थ के रंगों को सेट करने के लिए पास किए जा सकते हैं। रंग मान वर्तमान colorMode() का उपयोग करके व्याख्या किए जाएंगे। नोट: ambientMaterial() केवल WebGL मोड में उपयोग किया जा सकता है। .
createFilterShader
filter() फ़ंक्शन के साथ उपयोग करने के लिए एक p5.Shader ऑब्जेक्ट बनाता है। createFilterShader() createShader() की तरह काम करता है, लेकिन एक डिफ़ॉल्ट वर्टेक्स शेडर शामिल होता है। createFilterShader() का इरादा filter() के साथ उपयोग करने के लिए है जिससे किसी कैनवास के कंटेंट्स को फ़िल्टर किया जा सके। एक फ़िल्टर शेडर पूरे कैनवास पर लागू होगा, न कि केवल p5.Geometry ऑब्जेक्ट्स पर। पैरामीटर, fragSrc, फ्रैग्मेंट शेडर को सेट करता है। यह एक स्ट्रिंग है जो GLSL में लिखे फ्रैग्मेंट शेडर प्रोग्राम को कंटेन करता है। बने हुए p5.Shader ऑब्जेक्ट में कुछ यूनिफॉर्म्स हैं जो सेट किए जा सकते हैं: sampler2D tex0, जो कैनवास कंटेंट्स को एक टेक्सचर के रूप में कंटेन करता है। vec2 canvasSize, जो कैनवास की चौड़ाई और ऊंचाई है, पिक्सल घनत्व को छोड़कर। vec2 texelSize, जो एक भौतिक पिक्सल का आकार है जिसमें पिक्सल घनत्व शामिल है। यह 1.0 / (width * density) के लिए पिक्सल चौड़ाई और 1.0 / (height * density) के लिए पिक्सल ऊंचाई के रूप में गणना की जाती है। बने हुए p5.Shader में varying vec2 vTexCoord भी प्रदान किया जाता है, जिसमें 0 और 1 के बीच के मूल्य होते हैं। vTexCoord बताता है कि पिक्सल कैनवास पर कहाँ खींचा जाएगा। फ़िल्टर और शेडर के बारे में अधिक जानकारी के लिए, Adam Ferriss के शेडर उदाहरण रिपो या शेडर का परिचय ट्यूटोरियल देखें। .