\n
चौथा और पांचवां पैरामीटर, dw
और dh
हैं वैकल्पिक। उन्होंने सेट किया\nगंतव्य छवि बनाने के लिए चौड़ाई और ऊंचाई। डिफ़ॉल्ट रूप से, छवि()
\nपूर्ण स्रोत छवि को उसके मूल आकार में खींचता है।
छठे और सातवें पैरामीटर, sx
और sy
, हैं वैकल्पिक भी.\nये निर्देशांक किसी उपधारा के ऊपरी बाएँ कोने को परिभाषित करते हैं, जहाँ से खींचा जाना है\nस्रोत छवि.
आठवां और नौवां पैरामीटर, sw
और sh
, हैं वैकल्पिक भी.\nवे स्रोत से प्राप्त करने के लिए एक उपधारा की चौड़ाई और ऊंचाई को परिभाषित करते हैं\nछवि। डिफ़ॉल्ट रूप से, image()
शुरू होने वाला पूरा उपधारा खींचता है पर\n(sx, sy)
और स्रोत छवि के किनारों तक विस्तारित है।
नौवां पैरामीटर, फिट
, भी वैकल्पिक है। यह सक्षम बनाता है a की उपधारा\nस्रोत छवि को उसके पहलू अनुपात को प्रभावित किए बिना खींचा जाना चाहिए। अगर\nCONTAIN
पारित हो गया है, पूरा उपखंड इसके भीतर दिखाई देगा गंतव्य\nआयत। यदि कवर
पारित हो गया है, तो उपधारा पूरी तरह से पारित हो जाएगी आवरण\nगंतव्य आयत. इसमें ज़ूम इन करने का प्रभाव हो सकता है\nउपधारा.
दसवां और ग्यारहवां पैरामीटर, xAlign
और yAlign
, भी हैं\nवैकल्पिक। वे निर्धारित करते हैं कि फिट किए गए उपधारा को कैसे संरेखित किया जाए। xAlign
कर सकते हैं\nया तो बाएं
, दाएं
, या पर सेट किया जाए केंद्र
. yAlign
पर सेट किया जा सकता है\nया तो शीर्ष
, नीचे
, या केंद्र
। द्वारा डिफ़ॉल्ट, दोनों xAlign
और yAlign
\nCENTER
पर सेट हैं।
प्रदर्शित करने के लिए छवि.
\n"],"type":[0,"p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture"]}],[0,{"name":[0,"x"],"description":[0,"छवि के ऊपरी-बाएँ कोने का x-निर्देशांक।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"y"],"description":[0,"छवि के ऊपरी-बाएँ कोने का y-निर्देशांक।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"width"],"description":[0,"छवि खींचने के लिए चौड़ाई।
\n"],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"height"],"description":[0,"छवि खींचने के लिए ऊंचाई।
\n"],"type":[0,"Number"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"img"],"description":[0,""],"type":[0,"p5.Image|p5.Element|p5.Texture|p5.Framebuffer|p5.FramebufferTexture"]}],[0,{"name":[0,"dx"],"description":[0,"गंतव्य का x-निर्देशांक\n आयत जिसमें स्रोत छवि खींचनी है
\n"],"type":[0,"Number"]}],[0,{"name":[0,"dy"],"description":[0,"गंतव्य का y-निर्देशांक\n आयत जिसमें स्रोत छवि खींचनी है
\n"],"type":[0,"Number"]}],[0,{"name":[0,"dWidth"],"description":[0,"गंतव्य आयत की चौड़ाई
\n"],"type":[0,"Number"]}],[0,{"name":[0,"dHeight"],"description":[0,"गंतव्य आयत की ऊंचाई
\n"],"type":[0,"Number"]}],[0,{"name":[0,"sx"],"description":[0,"स्रोत के उपधारा का x-निर्देशांक\nगंतव्य आयत में चित्र बनाने के लिए
\n"],"type":[0,"Number"]}],[0,{"name":[0,"sy"],"description":[0,"स्रोत के उपधारा का y-निर्देशांक\nगंतव्य आयत में चित्र बनाने के लिए
\n"],"type":[0,"Number"]}],[0,{"name":[0,"sWidth"],"description":[0,"के उपधारा की चौड़ाई\n गंतव्य तक पहुंचने के लिए स्रोत छवि\n आयत
\n"],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"sHeight"],"description":[0,"उपखंड की ऊंचाई\n गंतव्य आयत में बनाने के लिए स्रोत छवि
\n"],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"fit"],"description":[0,"either CONTAIN or COVER
\n"],"type":[0,"Constant"],"optional":[0,true]}],[0,{"name":[0,"xAlign"],"description":[0,"either LEFT, RIGHT or CENTER default is CENTER
\n"],"type":[0,"Constant"],"optional":[0,true]}],[0,{"name":[0,"yAlign"],"description":[0,"either TOP, BOTTOM or CENTER default is CENTER
\n"],"type":[0,"Constant"],"optional":[0,true]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('/assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the image.\n image(img, 0, 0);\n\n describe('An image of the underside of a white umbrella with a gridded ceiling above.');\n}\n
\n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('/assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the image.\n image(img, 10, 10);\n\n describe('An image of the underside of a white umbrella with a gridded ceiling above. The image has dark gray borders on its left and top.');\n}\n
\n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('/assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the image 50x50.\n image(img, 0, 0, 50, 50);\n\n describe('An image of the underside of a white umbrella with a gridded ceiling above. The image is drawn in the top left corner of a dark gray square.');\n}\n
\n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('/assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the center of the image.\n image(img, 25, 25, 50, 50, 25, 25, 50, 50);\n\n describe('An image of a gridded ceiling drawn in the center of a dark gray square.');\n}\n
\n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('/assets/moonwalk.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the image and scale it to fit within the canvas.\n image(img, 0, 0, width, height, 0, 0, img.width, img.height, CONTAIN);\n\n describe('An image of an astronaut on the moon. The top and bottom borders of the image are dark gray.');\n}\n
\n\nlet img;\n\n// Load the image.\nfunction preload() {\n // Image is 50 x 50 pixels.\n img = loadImage('/assets/laDefense50.png');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Draw the image and scale it to cover the canvas.\n image(img, 0, 0, width, height, 0, 0, img.width, img.height, COVER);\n\n describe('A pixelated image of the underside of a white umbrella with a gridded ceiling above.');\n}\n
\nजब छवियाँ खींची जाती हैं तो वह स्थान बदल जाता है\nimage() कहा जाता है।
\nडिफ़ॉल्ट रूप से, पहला\nimage() के दो पैरामीटर x- और हैं\nछवि के ऊपरी-बाएँ कोने का y-निर्देशांक। अगले पैरामीटर हैं\nइसकी चौड़ाई और ऊंचाई. यह कॉलिंग के समान ही है imageMode(CORNER)
.
imageMode(CORNERS)
पहले दो पैरामीटर का भी उपयोग करता है\nimage() के x- और y-निर्देशांक के रूप में इमेजिस\nऊपरी बायां कोना। तीसरा और चौथा पैरामीटर इसके निर्देशांक हैं\nनिचला दायां कोना.
imageMode(CENTER)
पहले दो पैरामीटर का उपयोग करता है\nimage() के x- और y-निर्देशांक के रूप में इमेजिस\nकेंद्र। अगले पैरामीटर इसकी चौड़ाई और ऊंचाई हैं।
either CORNER, CORNERS, or CENTER.
\n"],"type":[0,"Constant"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('/assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use CORNER mode.\n imageMode(CORNER);\n\n // Display the image.\n image(img, 10, 10, 50, 50);\n\n describe('A square image of a brick wall is drawn at the top left of a gray square.');\n}\n
\n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('/assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use CORNERS mode.\n imageMode(CORNERS);\n\n // Display the image.\n image(img, 10, 10, 90, 40);\n\n describe('An image of a brick wall is drawn on a gray square. The image is squeezed into a small rectangular area.');\n}\n
\n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('/assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use CENTER mode.\n imageMode(CENTER);\n\n // Display the image.\n image(img, 50, 50, 80, 80);\n\n describe('A square image of a brick wall is drawn on a gray square.');\n}\n
\nएक p5.Image बनाने के लिए एक छवि लोड करता है वस्तु.
\nloadImage()
पहले पैरामीटर की तीन तरीकों में से एक व्याख्या करता है। यदि पथ\nएक छवि फ़ाइल प्रदान की गई है, loadImage()
इसे लोड करेगा। के लिए पथ स्थानीय\nफ़ाइलें सापेक्ष होनी चाहिए, जैसे '/assets/thundercat.jpg'
. यूआरएल जैसे कि\n<कोड>'https://example.com/thundercat.jpg' को ब्लॉक किया जा सकता है ब्राउज़र\nसुरक्षा। कच्चे छवि डेटा को बेस64 एन्कोडेड छवि के रूप में भी पारित किया जा सकता है\nफॉर्म 'data:image/png;base64,randomsequenceofcharacters'
.
दूसरा पैरामीटर वैकल्पिक है. यदि कोई फ़ंक्शन पारित हो जाता है, तो यह होगा\nछवि लोड होने के बाद कॉल किया जाता है। कॉलबैक फ़ंक्शन वैकल्पिक रूप से उपयोग कर सकता है\nनया p5.Image ऑब्जेक्ट।
\nतीसरा पैरामीटर भी वैकल्पिक है. यदि कोई फ़ंक्शन पारित हो जाता है, तो यह होगा\nयदि छवि लोड होने में विफल रहती है तो कॉल किया जाता है। कॉलबैक फ़ंक्शन वैकल्पिक रूप से उपयोग कर सकता है\nघटना त्रुटि.
\nछवियों को लोड होने में समय लग सकता है. loadImage()
में कॉल किया जा रहा है\npreload() यह सुनिश्चित करता है कि छवियां पहले लोड हों वे\nsetup() या draw().
लोड की जाने वाली छवि का पथ या बेस64 एन्कोडेड छवि।
\n"],"type":[0,"String"]}],[0,{"name":[0,"successCallback"],"description":[0,"फ़ंक्शन के साथ कॉल किया गया\n p5.Image एक बार\n भार.
\n"],"type":[0,"function(p5.Image)"],"optional":[0,true]}],[0,{"name":[0,"failureCallback"],"description":[0,"फंक्शन को इवेंट के साथ बुलाया गया\n यदि छवि लोड होने में विफल रहती है तो त्रुटि।
\n"],"type":[0,"Function(Event)"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"the p5.Image object."],"type":[0,"p5.Image"]}],"example":[1,[[0,"\n\nlet img;\n\n// Load the image and create a p5.Image object.\nfunction preload() {\n img = loadImage('/assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Draw the image.\n image(img, 0, 0);\n\n describe('Image of the underside of a white umbrella and a gridded ceiling.');\n}\n
\n\nfunction setup() {\n // Call handleImage() once the image loads.\n loadImage('/assets/laDefense.jpg', handleImage);\n\n describe('Image of the underside of a white umbrella and a gridded ceiling.');\n}\n\n// Display the image.\nfunction handleImage(img) {\n image(img, 0, 0);\n}\n
\n\nfunction setup() {\n // Call handleImage() once the image loads or\n // call handleError() if an error occurs.\n loadImage('/assets/laDefense.jpg', handleImage, handleError);\n}\n\n// Display the image.\nfunction handleImage(img) {\n image(img, 0, 0);\n\n describe('Image of the underside of a white umbrella and a gridded ceiling.');\n}\n\n// Log the error.\nfunction handleError(event) {\n console.error('Oops!', event);\n}\n
\nनिर्धारित वर्तमान टिंट को हटा देता है tint().
\nnoTint()
छवियों को उनके मूल रंगों में पुनर्स्थापित करता है।
\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('/assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Left.\n // Tint with a CSS color string.\n tint('red');\n image(img, 0, 0);\n\n // Right.\n // Remove the tint.\n noTint();\n image(img, 50, 0);\n\n describe('Two images of an umbrella and a ceiling side-by-side. The image on the left has a red tint.');\n}\n
\nस्केच से एक GIF उत्पन्न करता है और उसे एक फ़ाइल में सहेजता है।
\nsaveGif()
को setup() या किसी पर भी\nजब कोई स्केच चल रहा हो तो बिंदु।
पहला पैरामीटर, fileName
, gif का फ़ाइल नाम सेट करता है।
दूसरा पैरामीटर, अवधि
, gif की अवधि निर्धारित करता है सेकंड.
तीसरा पैरामीटर, विकल्प
, वैकल्पिक है। यदि कोई वस्तु है उत्तीर्ण,\nsaveGif()
gif को अनुकूलित करने के लिए इसके गुणों का उपयोग करेगा। सेवजीआईएफ()
\nगुणों को पहचानता है विलंब
, इकाइयाँ
, चुप
,\nअधिसूचना अवधि
, और अधिसूचना आईडी
।
gif का फ़ाइल नाम।
\n"],"type":[0,"String"]}],[0,{"name":[0,"duration"],"description":[0,"स्केच से कैप्चर करने की अवधि सेकंड में।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"options"],"description":[0,"एक वस्तु जिसमें पाँच और गुण हो सकते हैं:\n विलंब
, एक संख्या जो निर्दिष्ट करती है कि रिकॉर्डिंग से पहले कितना समय इंतजार करना है;\n इकाइयाँ
, एक स्ट्रिंग जो या तो 'सेकंड' या 'फ़्रेम' हो सकती है। डिफ़ॉल्ट रूप से यह 'सेकंड' है;\n साइलेंट
, एक बूलियन जो प्रगति सूचनाओं की उपस्थिति को परिभाषित करता है। डिफ़ॉल्ट रूप से यह गलत
है;\n अधिसूचना अवधि
, एक संख्या जो परिभाषित करती है कि अंतिम अधिसूचना कितने सेकंड में आएगी\n हम जियेंगे। डिफ़ॉल्ट रूप से यह 0
है, जिसका अर्थ है कि अधिसूचना कभी नहीं हटाई जाएगी;\n अधिसूचनाआईडी
, एक स्ट्रिंग जो अधिसूचना के DOM तत्व की आईडी निर्दिष्ट करती है। डिफ़ॉल्ट रूप से यह 'progressBar'
है।
\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A circle drawn in the middle of a gray square. The circle changes color from black to white, then repeats.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the circle.\n let c = frameCount % 255;\n fill(c);\n\n // Display the circle.\n circle(50, 50, 25);\n}\n\n// Save a 5-second gif when the user presses the 's' key.\nfunction keyPressed() {\n if (key === 's') {\n saveGif('mySketch', 5);\n }\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A circle drawn in the middle of a gray square. The circle changes color from black to white, then repeats.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the circle.\n let c = frameCount % 255;\n fill(c);\n\n // Display the circle.\n circle(50, 50, 25);\n}\n\n// Save a 5-second gif when the user presses the 's' key.\n// Wait 1 second after the key press before recording.\nfunction keyPressed() {\n if (key === 's') {\n saveGif('mySketch', 5, { delay: 1 });\n }\n}\n
\nरंग का उपयोग करके छवियों को रंगता है।
\ntint()
का संस्करण एक पैरामीटर के साथ इसकी व्याख्या करता है चार तरीके.\nयदि पैरामीटर एक संख्या है, तो इसे ग्रेस्केल मान के रूप में समझा जाता है। यदि\nपैरामीटर एक स्ट्रिंग है, इसकी व्याख्या सीएसएस रंग स्ट्रिंग के रूप में की जाती है। की सरणी\n[आर, जी, बी, ए]
मान या ए <ए href='/reference/p5/p5.Color'>p5.Color ऑब्जेक्ट कर सकते हैं\nटिंट का रंग सेट करने के लिए भी इसका उपयोग किया जाता है।
दो मापदंडों के साथ tint()
का संस्करण पहले वाले का उपयोग करता है के तौर पर\nग्रेस्केल मान और दूसरा अल्फा मान के रूप में। उदाहरण के लिए, कॉल करना\ntint(255, 128)
छवि को 50% पारदर्शी बना देगा।
तीन मापदंडों के साथ tint()
का संस्करण उनकी व्याख्या इस प्रकार करता है आरजीबी या\nएचएसबी मान, वर्तमान पर निर्भर करता है\ncolorMode()। वैकल्पिक चौथा पैरामीटर\nअल्फ़ा मान सेट करता है. उदाहरण के लिए, tint(255, 0, 0, 100)
देगा इमेजिस\nएक लाल रंग और उन्हें पारदर्शी बनाएं।
लाल या रंग का मान.
\n"],"type":[0,"Number"]}],[0,{"name":[0,"v2"],"description":[0,"हरा या संतृप्ति मान.
\n"],"type":[0,"Number"]}],[0,{"name":[0,"v3"],"description":[0,"नीला या चमक।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"alpha"],"description":[0,""],"type":[0,"Number"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"value"],"description":[0,"CSS रंग स्ट्रिंग।
\n"],"type":[0,"String"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"gray"],"description":[0,"grayscale value.
\n"],"type":[0,"Number"]}],[0,{"name":[0,"alpha"],"description":[0,""],"type":[0,"Number"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"values"],"description":[0,"सरणी जिसमें लाल, हरा, नीला और\n रंग के अल्फा घटक.
\n"],"type":[0,"Number[]"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"color"],"description":[0,"the tint color
\n"],"type":[0,"p5.Color"]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('/assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Left image.\n image(img, 0, 0);\n\n // Right image.\n // Tint with a CSS color string.\n tint('red');\n image(img, 50, 0);\n\n describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');\n}\n
\n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('/assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Left image.\n image(img, 0, 0);\n\n // Right image.\n // Tint with RGB values.\n tint(255, 0, 0);\n image(img, 50, 0);\n\n describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');\n}\n
\n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('/assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Left.\n image(img, 0, 0);\n\n // Right.\n // Tint with RGBA values.\n tint(255, 0, 0, 100);\n image(img, 50, 0);\n\n describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a transparent red tint.');\n}\n
\n\nlet img;\n\n// Load the image.\nfunction preload() {\n img = loadImage('/assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Left.\n image(img, 0, 0);\n\n // Right.\n // Tint with grayscale and alpha values.\n tint(255, 180);\n image(img, 50, 0);\n\n describe('Two images of an umbrella and a ceiling side-by-side. The image on the right is transparent.');\n}\n
\nवेबजीएल मोड में x-अक्ष के बारे में निर्देशांक प्रणाली को घुमाता है।
\nपैरामीटर, कोण
, घूमने की मात्रा है। उदाहरण के लिए, rotateX(1)
को कॉल करने से x-अक्ष के बारे में निर्देशांक प्रणाली 1 रेडियन से घूम जाती है। rotateX()
वर्तमान angleMode() का उपयोग करके कोण मानों की व्याख्या करता है।
डिफ़ॉल्ट रूप से, परिवर्तन जमा होते हैं। उदाहरण के लिए, rotateX(1)
को दो बार कॉल करने का प्रभाव rotateX(2)
को एक बार कॉल करने जैसा ही होता है। push() और pop() फ़ंक्शंस का उपयोग अलग-अलग ड्राइंग समूहों के भीतर परिवर्तनों को अलग करने के लिए किया जा सकता है।
नोट: ट्रांसफ़ॉर्मेशन ड्रॉ लूप की शुरुआत में रीसेट किए जाते हैं। draw() फ़ंक्शन के अंदर rotateX(1)
को कॉल करने से आकृतियाँ नहीं घूमेंगी।
angle of rotation in the current angleMode().
\n"],"type":[0,"Number"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,true],"example":[1,[[0,"\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateX(QUARTER_PI);\n\n // Draw a box.\n box();\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/16 turn.\n rotateX(QUARTER_PI / 2);\n\n // Rotate the coordinate system 1/16 turn.\n rotateX(QUARTER_PI / 2);\n\n // Draw a box.\n box();\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateX(45);\n\n // Draw a box.\n box();\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube rotates slowly against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system a little more each frame.\n let angle = frameCount * 0.01;\n rotateX(angle);\n\n // Draw a box.\n box();\n}\n
\nवेबजीएल मोड में y-अक्ष के बारे में निर्देशांक प्रणाली को घुमाता है।
\n\nपैरामीटर, कोण
, घूमने की मात्रा है। उदाहरण के लिए, rotateY(1)
को कॉल करने से y-अक्ष के बारे में निर्देशांक प्रणाली 1 रेडियन से घूम जाती है। rotateY()
वर्तमान angleMode() का उपयोग करके कोण मानों की व्याख्या करता है।\n
डिफ़ॉल्ट रूप से, परिवर्तन एकत्रित होते हैं। उदाहरण के लिए, कॉल करना\n rotateY(1)
को दो बार कॉल करने का वही प्रभाव होता है जो rotateY(2)
को एक बार कॉल करने पर होता है। push() और pop() फ़ंक्शंस का उपयोग अलग-अलग ड्राइंग समूहों के भीतर परिवर्तनों को अलग करने के लिए किया जा सकता है।
ध्यान दें: ट्रांसफ़ॉर्मेशन ड्रॉ लूप की शुरुआत में रीसेट किए जाते हैं। draw() फ़ंक्शन के अंदर rotateY(1)
को कॉल करने से आकृतियाँ नहीं घूमेंगी।
वर्तमान में घूर्णन का कोण angleMode().
\n"],"type":[0,"संख्या"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,true],"example":[1,[[0,"\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateY(QUARTER_PI);\n\n // Draw a box.\n box();\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/16 turn.\n rotateY(QUARTER_PI / 2);\n\n // Rotate the coordinate system 1/16 turn.\n rotateY(QUARTER_PI / 2);\n\n // Draw a box.\n box();\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateY(45);\n\n // Draw a box.\n box();\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube rotates slowly against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system a little more each frame.\n let angle = frameCount * 0.01;\n rotateY(angle);\n\n // Draw a box.\n box();\n}\n
\nवेबजीएल मोड में z-अक्ष के बारे में निर्देशांक प्रणाली को घुमाता है।
\n\nपैरामीटर, कोण
, घूमने की मात्रा है। उदाहरण के लिए, rotateZ(1)
को कॉल करने से z-अक्ष के बारे में निर्देशांक प्रणाली 1 रेडियन द्वारा घूम जाती है। rotateZ()
वर्तमान angleMode() का उपयोग करके कोण मानों की व्याख्या करता है।
डिफ़ॉल्ट रूप से, परिवर्तन एकत्रित होते हैं। उदाहरण के लिए, कॉल करना\n rotateZ(1)
को दो बार कॉल करने का वही प्रभाव होता है जो rotateZ(2)
को एक बार कॉल करने पर होता है। push() और pop() फ़ंक्शंस का उपयोग भीतर परिवर्तनों को अलग करने के लिए किया जा सकता है विशिष्ट ड्राइंग समूह।
ध्यान दें: ट्रांसफ़ॉर्मेशन ड्रॉ लूप की शुरुआत में रीसेट किए जाते हैं। draw() फ़ंक्शन के अंदर rotateZ(1)
को कॉल करने से आकृतियाँ नहीं घूमेंगी।
वर्तमान में घूर्णन का कोण angleMode().
\n"],"type":[0,"Number"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,true],"example":[1,[[0,"\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateZ(QUARTER_PI);\n\n // Draw a box.\n box();\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/16 turn.\n rotateZ(QUARTER_PI / 2);\n\n // Rotate the coordinate system 1/16 turn.\n rotateZ(QUARTER_PI / 2);\n\n // Draw a box.\n box();\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system 1/8 turn.\n rotateZ(45);\n\n // Draw a box.\n box();\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube rotates slowly against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Rotate the coordinate system a little more each frame.\n let angle = frameCount * 0.01;\n rotateZ(angle);\n\n // Draw a box.\n box();\n}\n
\nनिर्देशांक प्रणाली को मापता है।
\nडिफ़ॉल्ट रूप से, आकृतियाँ उनके मूल पैमाने पर खींची जाती हैं। 50 पिक्सेल चौड़ा एक आयत 100 पिक्सेल चौड़े कैनवास की आधी चौड़ाई घेरता हुआ प्रतीत होता है। scale()
फ़ंक्शन निर्देशांक प्रणाली को छोटा या फैला सकता है ताकि आकृतियाँ विभिन्न आकारों में दिखाई दें। scale()
को पैरामीटर के साथ कॉल करने के दो तरीके हैं जो स्केल फैक्टर सेट करते हैं।
कॉल करने का पहला तरीका scale()
स्केलिंग की मात्रा निर्धारित करने के लिए संख्याओं का उपयोग करता है। पहला पैरामीटर, s
, प्रत्येक अक्ष को स्केल करने के लिए मात्रा निर्धारित करता है। उदाहरण के लिए, scale(2)
को कॉल करने से x-, y- और z-अक्ष 2 के कारक तक फैल जाते हैं। अगले दो पैरामीटर, y
और z
, वैकल्पिक हैं। वे y- और z-अक्ष को स्केल करने के लिए राशि निर्धारित करते हैं। उदाहरण के लिए, scale(2, 0.5, 1)
को कॉल करने से x-अक्ष 2 के कारक से फैल जाता है, y-अक्ष 0.5 के कारक से सिकुड़ जाता है, और z-अक्ष अपरिवर्तित रह जाता है।
scale()
को कॉल करने का दूसरा तरीका p5.Vector ऑब्जेक्ट। उदाहरण के लिए, scale(myVector)
को कॉल करने पर राशि निर्धारित करने के लिए myVector
के x-, y- और z-घटकों का उपयोग किया जाता है।\n x-, y- और z-अक्ष के साथ स्केलिंग का। ऐसा करना कॉल करने जैसा ही है\n स्केल(myVector.x, myVector.y, myVector.z)
.
डिफ़ॉल्ट रूप से, परिवर्तन एकत्रित होते हैं। उदाहरण के लिए, कॉल करना\n scale(1)
को दो बार कॉल करने का वही प्रभाव होता है जो scale(2)
को एक बार कॉल करने पर होता है। push() और pop() फ़ंक्शंस का उपयोग भीतर परिवर्तनों को अलग करने के लिए किया जा सकता है विशिष्ट ड्राइंग समूह।
ध्यान दें: ट्रांसफ़ॉर्मेशन ड्रॉ लूप की शुरुआत में रीसेट किए जाते हैं। draw() फ़ंक्शन के अंदर scale(2)
को कॉल करने से आकृतियाँ लगातार नहीं बढ़ेंगी।
धनात्मक x-अक्ष के अनुदिश पैमाने की राशि।
\n"],"type":[0,"संख्या|पी5.वेक्टर|संख्या[]"]}],[0,{"name":[0,"y"],"description":[0,"धनात्मक y-अक्ष के अनुदिश पैमाने की राशि। के लिए डिफ़ॉल्ट\n एस
.पी>\n"],"type":[0,"संख्या"],"optional":[0,true]}],[0,{"name":[0,"z"],"description":[0,"
धनात्मक z-अक्ष के साथ पैमाने की राशि। डिफ़ॉल्ट y
.
वेक्टर जिसके घटकों का उपयोग स्केल करने के लिए किया जाना चाहिए।
\n"],"type":[0,"पी5.वेक्टर|संख्या[]"]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,true],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'Two white squares on a gray background. The larger square appears at the top-center. The smaller square appears at the top-left.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw a square at (30, 20).\n square(30, 20, 40);\n\n // Scale the coordinate system by a factor of 0.5.\n scale(0.5);\n\n // Draw a square at (30, 20).\n // It appears at (15, 10) after scaling.\n square(30, 20, 40);\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A rectangle and a square drawn in white on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw a square at (30, 20).\n square(30, 20, 40);\n\n // Scale the coordinate system by factors of\n // 0.5 along the x-axis and\n // 1.3 along the y-axis.\n scale(0.5, 1.3);\n\n // Draw a square at (30, 20).\n // It appears as a rectangle at (15, 26) after scaling.\n square(30, 20, 40);\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A rectangle and a square drawn in white on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw a square at (30, 20).\n square(30, 20, 40);\n\n // Create a p5.Vector object.\n let v = createVector(0.5, 1.3);\n\n // Scale the coordinate system by factors of\n // 0.5 along the x-axis and\n // 1.3 along the y-axis.\n scale(v);\n\n // Draw a square at (30, 20).\n // It appears as a rectangle at (15, 26) after scaling.\n square(30, 20, 40);\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A red box and a blue box drawn on a gray background. The red box appears embedded in the blue box.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the spheres.\n noStroke();\n\n // Draw the red sphere.\n fill('red');\n box();\n\n // Scale the coordinate system by factors of\n // 0.5 along the x-axis and\n // 1.3 along the y-axis and\n // 2 along the z-axis.\n scale(0.5, 1.3, 2);\n\n // Draw the blue sphere.\n fill('blue');\n box();\n}\n
\ny-अक्ष को कतरता है ताकि आकृतियाँ तिरछी दिखाई दें।
\nडिफ़ॉल्ट रूप से, x- और y-अक्ष लंबवत हैं। shearY()
फ़ंक्शन निर्देशांक प्रणाली को बदल देता है ताकि y-निर्देशांक का अनुवाद हो जाए जबकि x-निर्देशांक निश्चित हो जाएं।
पहला पैरामीटर, <कोड>कोणकोड>, कतरनी की मात्रा है। उदाहरण के लिए, shearY(1)
को कॉल करने से सूत्र y = y + x * tan(कोण)
का उपयोग करके सभी y-निर्देशांक बदल जाते हैं। shearY()
वर्तमान angleMode() का उपयोग करके कोण मानों की व्याख्या करता है।
डिफ़ॉल्ट रूप से, परिवर्तन एकत्रित होते हैं। उदाहरण के लिए, कॉल करना\n shearY(1)
को दो बार कॉल करने का वही प्रभाव होता है जो shearY(2)
को एक बार कॉल करने पर होता है। push() और pop() फ़ंक्शंस का उपयोग अलग करने के लिए किया जा सकता है\nअलग-अलग ड्राइंग समूहों के भीतर परिवर्तन।
ध्यान दें: ट्रांसफ़ॉर्मेशन ड्रॉ लूप की शुरुआत में रीसेट किए जाते हैं। draw() फ़ंक्शन के अंदर shearY(1)
को कॉल करने से आकृतियों को लगातार कतरनी नहीं होगी।
angle to shear by in the current angleMode().
\n"],"type":[0,"Number"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,true],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white quadrilateral on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Shear the coordinate system along the x-axis.\n shearY(QUARTER_PI);\n\n // Draw the square.\n square(0, 0, 50);\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe('A white quadrilateral on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Shear the coordinate system along the x-axis.\n shearY(45);\n\n // Draw the square.\n square(0, 0, 50);\n}\n
\nनिर्देशांक प्रणाली का अनुवाद करता है।
\n\nडिफ़ॉल्ट रूप से, मूल (0, 0)
स्केच के शीर्ष-बाएँ पर है\n 2डी मोड में कोना और वेबजीएल मोड में केंद्र। translate()
फ़ंक्शन मूल को एक अलग स्थिति में स्थानांतरित कर देता है। translate()
को कॉल करने के बाद खींची गई सभी चीज़ें स्थानांतरित होती दिखाई देंगी। translate()
को कॉल करने के दो तरीके हैं\n उन मापदंडों के साथ जो मूल की स्थिति निर्धारित करते हैं।
कॉल करने का पहला तरीका translate()
अनुवाद की मात्रा निर्धारित करने के लिए संख्याओं का उपयोग करता है। पहले दो पैरामीटर, x
और y
, सकारात्मक x- और y-अक्ष के साथ अनुवाद करने के लिए मात्रा निर्धारित करते हैं। उदाहरण के लिए, translate(20, 30)
को कॉल करने से मूल 20 पिक्सेल x-अक्ष पर और 30 पिक्सेल y-अक्ष पर अनुवादित हो जाता है। तीसरा पैरामीटर, z
, वैकल्पिक है। यह सकारात्मक z-अक्ष के साथ अनुवाद करने के लिए मात्रा निर्धारित करता है। उदाहरण के लिए, translate(20, 30, 40)
को कॉल करने से x-अक्ष पर मूल 20 पिक्सेल, y-अक्ष पर 30 पिक्सेल और z-अक्ष पर 40 पिक्सेल का अनुवाद होता है।
कॉल करने का दूसरा तरीका translate()
अनुवाद की मात्रा निर्धारित करने के लिए p5.Vector ऑब्जेक्ट का उपयोग करता है। उदाहरण के लिए, translate(myVector)
को कॉल करने पर x-, y- के साथ अनुवाद करने की मात्रा निर्धारित करने के लिए myVector
के x-, y- और z-घटकों का उपयोग किया जाता है। और z-अक्ष। ऐसा करना translate(myVector.x, myVector.y, myVector.z)
को कॉल करने के समान है।
डिफ़ॉल्ट रूप से, परिवर्तन जमा होते हैं। उदाहरण के लिए, translate(10, 0)
को दो बार कॉल करने का प्रभाव translate(20, 0)
को एक बार कॉल करने जैसा ही होता है। push() और pop() फ़ंक्शंस का उपयोग अलग-अलग ड्राइंग समूहों के भीतर परिवर्तनों को अलग करने के लिए किया जा सकता है। .
ध्यान दें: ट्रांसफ़ॉर्मेशन ड्रॉ लूप की शुरुआत में रीसेट किए जाते हैं। translate(10, 0) को कॉल करना\n href='/reference/p5/draw'>draw() फ़ंक्शन के कारण आकृतियाँ लगातार हिलती नहीं रहेंगी।
\n"],"line":[0,1224],"overloads":[1,[[0,{"params":[1,[[0,{"name":[0,"x"],"description":[0,"amount to translate along the positive x-axis.
\n"],"type":[0,"Number"]}],[0,{"name":[0,"y"],"description":[0,"amount to translate along the positive y-axis.
\n"],"type":[0,"Number"]}],[0,{"name":[0,"z"],"description":[0,"amount to translate along the positive z-axis.
\n"],"type":[0,"Number"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"vector"],"description":[0,"vector by which to translate.
\n"],"type":[0,"p5.Vector"]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,true],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a circle at coordinates (0, 0).\n circle(0, 0, 40);\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'Two circles drawn on a gray background. The blue circle on the right overlaps the red circle at the center.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw the red circle.\n fill('red');\n circle(0, 0, 40);\n\n // Translate the origin to the right.\n translate(25, 0);\n\n // Draw the blue circle.\n fill('blue');\n circle(0, 0, 40);\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle moves slowly from left to right on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the x-coordinate.\n let x = frameCount * 0.2;\n\n // Translate the origin.\n translate(x, 50);\n\n // Draw a circle at coordinates (0, 0).\n circle(0, 0, 40);\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Create a p5.Vector object.\n let v = createVector(50, 50);\n\n // Translate the origin by the vector.\n translate(v);\n\n // Draw a circle at coordinates (0, 0).\n circle(0, 0, 40);\n}\n
\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Two spheres sitting side-by-side on gray background. The sphere at the center is red. The sphere on the right is blue.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Turn on the lights.\n lights();\n\n // Style the spheres.\n noStroke();\n\n // Draw the red sphere.\n fill('red');\n sphere(10);\n\n // Translate the origin to the right.\n translate(30, 0, 0);\n\n // Draw the blue sphere.\n fill('blue');\n sphere(10);\n}\n
\nकर्सर की दिखावट को बदलता है।
\nपहला पैरामीटर, type
, कर्सर के प्रकार को प्रदर्शित करता है। अंदरूनी विकल्प हैं ARROW
, CROSS
, HAND
, MOVE
, TEXT
, और WAIT
। cursor()
भी मान्यतानुसार स्टैंडर्ड CSS कर्सर गुणों को स्ट्रिंग के रूप में पारित करता है: 'help'
, 'wait'
, 'crosshair'
, 'not-allowed'
, 'zoom-in'
, और 'grab'
। यदि एक छवि के पथ को पास किया जाता है, जैसे कि cursor('/assets/target.png')
, तो छवि को कर्सर के रूप में उपयोग किया जाएगा। छवियों का प्रारूप .cur, .gif, .jpg, .jpeg, या .png होना चाहिए और यह अधिकतम 32x32 पिक्सेल के बड़े होने चाहिए।
पैरामीटर x
और y
वैकल्पिक हैं। यदि कर्सर के लिए एक छवि का उपयोग किया जाता है, तो x
और y
छवि के भीतर इंगित की गई स्थान को सेट करते हैं। ये डिफ़ॉल्ट रूप से दोनों 0 होते हैं, ताकि कर्सर छवि के शीर्ष-बाएं कोने को इंगित करें। x
और y
को छवि की चौड़ाई और ऊँचाई से कम होना चाहिए।
स्थापित: ARROW, CROSS, HAND, MOVE, TEXT, या WAIT।
\n\nनेटिव CSS गुण: 'grab', 'progress', और ऐसा ही।
\n\nकर्सर छवि का पथ।
\n"],"type":[0,"String|Constant"]}],[0,{"name":[0,"x"],"description":[0,"कर्सर का क्षैतिज सक्रिय स्थान।
\n"],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"y"],"description":[0,"कर्सर का लंबवत सक्रिय स्थान।
\n"],"type":[0,"Number"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square. The cursor appears as crosshairs.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the cursor to crosshairs: +\n cursor(CROSS);\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square divided into quadrants. The cursor image changes when the mouse moves to each quadrant.');\n}\n\nfunction draw() {\n background(200);\n\n // Divide the canvas into quadrants.\n line(50, 0, 50, 100);\n line(0, 50, 100, 50);\n\n // Change cursor based on mouse position.\n if (mouseX < 50 && mouseY < 50) {\n cursor(CROSS);\n } else if (mouseX > 50 && mouseY < 50) {\n cursor('progress');\n } else if (mouseX > 50 && mouseY > 50) {\n cursor('https://avatars0.githubusercontent.com/u/1617169?s=16');\n } else {\n cursor('grab');\n }\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('An image of three purple curves follows the mouse. The image shifts when the mouse is pressed.');\n}\n\nfunction draw() {\n background(200);\n\n // Change the cursor's active spot\n // when the mouse is pressed.\n if (mouseIsPressed === true) {\n cursor('https://avatars0.githubusercontent.com/u/1617169?s=16', 8, 8);\n } else {\n cursor('https://avatars0.githubusercontent.com/u/1617169?s=16');\n }\n}\n
\nएक Number
वेरिएबल जो अंतिम फ्रेम खींचने में कितना समय लगा वह ट्रैक करता है।
deltaTime
में वह समय होता है जो draw() ने पिछले फ्रेम के दौरान क्रियान्वित करने में लिया। यह भौतिकीय को नकल करने के लिए उपयोगी है।
\nlet x = 0;\nlet speed = 0.05;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Set the frameRate to 30.\n frameRate(30);\n\n describe('A white circle moves from left to right on a gray background. It reappears on the left side when it reaches the right side.');\n}\n\nfunction draw() {\n background(200);\n\n // Use deltaTime to calculate\n // a change in position.\n let deltaX = speed * deltaTime;\n\n // Update the x variable.\n x += deltaX;\n\n // Reset x to 0 if it's\n // greater than 100.\n if (x > 100) {\n x = 0;\n }\n\n // Use x to set the circle's\n // position.\n circle(x, 50, 20);\n}\n
\nकैनवास का एक स्क्रीन रीडर-एक्सेस करने योग्य विवरण बनाता है।
\nपहला पैरामीटर, text
, कैनवास का विवरण है।
दूसरा पैरामीटर, display
, ऐच्छिक है। यह निर्धारित करता है कि विवरण कैसे प्रदर्शित किया जाएगा। यदि LABEL
पास किया जाता है, जैसे describe('A description.', LABEL)
, तो विवरण कैनवास के बगल में एक डिव तत्व में दिखाई जाएगा। यदि FALLBACK
पास किया जाता है, जैसे describe('A description.', FALLBACK)
, तो विवरण केवल स्क्रीन रीडर्स को ही दिखाई जाएगी। यह डिफ़ॉल्ट मोड है।
और जानने के लिए एक्सेस करने योग्य कैनवास विवरण लेखन करें।
\n"],"line":[0,18],"params":[1,[[0,{"name":[0,"text"],"description":[0,"कैनवास का विवरण।
\n"],"type":[0,"String"]}],[0,{"name":[0,"display"],"description":[0,"या तो LABEL या FALLBACK.
\n"],"type":[0,"Constant"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\nfunction setup() {\n background('pink');\n\n // Draw a heart.\n fill('red');\n noStroke();\n circle(67, 67, 20);\n circle(83, 67, 20);\n triangle(91, 73, 75, 95, 59, 73);\n\n // Add a general description of the canvas.\n describe('A pink square with a red heart in the bottom-right corner.');\n}\n
\n\nfunction setup() {\n background('pink');\n\n // Draw a heart.\n fill('red');\n noStroke();\n circle(67, 67, 20);\n circle(83, 67, 20);\n triangle(91, 73, 75, 95, 59, 73);\n\n // Add a general description of the canvas\n // and display it for debugging.\n describe('A pink square with a red heart in the bottom-right corner.', LABEL);\n}\n
\n\nfunction draw() {\n background(200);\n\n // The expression\n // frameCount % 100\n // causes x to increase from 0\n // to 99, then restart from 0.\n let x = frameCount % 100;\n\n // Draw the circle.\n fill(0, 255, 0);\n circle(x, 50, 40);\n\n // Add a general description of the canvas.\n describe(`A green circle at (${x}, 50) moves from left to right on a gray square.`);\n}\n
\n\nfunction draw() {\n background(200);\n\n // The expression\n // frameCount % 100\n // causes x to increase from 0\n // to 99, then restart from 0.\n let x = frameCount % 100;\n\n // Draw the circle.\n fill(0, 255, 0);\n circle(x, 50, 40);\n\n // Add a general description of the canvas\n // and display it for debugging.\n describe(`A green circle at (${x}, 50) moves from left to right on a gray square.`, LABEL);\n}\n
\nकैनवास में तत्वों का एक स्क्रीन रीडर-पहुंच योग्य विवरण बनाता है।
\nतत्व वह आकार होते हैं या आकारों के समूह होते हैं जो साथ में अर्थ बनाते हैं। उदाहरण के लिए, कुछ ओवरलैपिंग वृत्तों से एक \"आंख\" तत्व बना सकता है।
\nपहला पैरामीटर, name
, तत्व का नाम है।
दूसरा पैरामीटर, text
, तत्व का विवरण है।
तीसरा पैरामीटर, display
, वैकल्पिक है। यह निर्धारित करता है कि विवरण कैसे प्रदर्शित किया जाएगा। अगर LABEL
को पारित किया जाता है, जैसे कि describe('एक विवरण।', LABEL)
, तो विवरण कैनवास के बगल में एक div तत्व में दिखाई देगा। LABEL
का उपयोग करने से स्क्रीन रीडर के लिए अप्रयोगी प्रतिलिपियाँ बनती हैं। LABEL
का उपयोग केवल विकास के दौरान करें। यदि FALLBACK
को पारित किया जाता है, जैसे कि describe('एक विवरण।', FALLBACK)
, तो विवरण केवल स्क्रीन रीडर के लिए ही दिखाई देगा। यह डिफ़ॉल्ट मोड है।
स्केच योग्यता वाले कैनवास विवरण लिखना को अधिक जानने के लिए पढ़ें।
\n"],"line":[0,162],"params":[1,[[0,{"name":[0,"name"],"description":[0,"तत्व का नाम।
\n"],"type":[0,"String"]}],[0,{"name":[0,"text"],"description":[0,"तत्व का विवरण।
\n"],"type":[0,"String"]}],[0,{"name":[0,"display"],"description":[0,"या तो LABEL या FALLBACK ।
\n"],"type":[0,"Constant"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\nfunction setup() {\n background('pink');\n\n // Describe the first element\n // and draw it.\n describeElement('Circle', 'A yellow circle in the top-left corner.');\n noStroke();\n fill('yellow');\n circle(25, 25, 40);\n\n // Describe the second element\n // and draw it.\n describeElement('Heart', 'A red heart in the bottom-right corner.');\n fill('red');\n circle(66.6, 66.6, 20);\n circle(83.2, 66.6, 20);\n triangle(91.2, 72.6, 75, 95, 58.6, 72.6);\n\n // Add a general description of the canvas.\n describe('A red heart and yellow circle over a pink background.');\n}\n
\n\nfunction setup() {\n background('pink');\n\n // Describe the first element\n // and draw it. Display the\n // description for debugging.\n describeElement('Circle', 'A yellow circle in the top-left corner.', LABEL);\n noStroke();\n fill('yellow');\n circle(25, 25, 40);\n\n // Describe the second element\n // and draw it. Display the\n // description for debugging.\n describeElement('Heart', 'A red heart in the bottom-right corner.', LABEL);\n fill('red');\n circle(66.6, 66.6, 20);\n circle(83.2, 66.6, 20);\n triangle(91.2, 72.6, 75, 95, 58.6, 72.6);\n\n // Add a general description of the canvas.\n describe('A red heart and yellow circle over a pink background.');\n}\n
\nडिस्प्ले का वर्तमान पिक्सेल घनत्व लौटाता है।
\n"],"line":[0,1069],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"डिस्प्ले का वर्तमान पिक्सेल घनत्व."],"type":[0,"Number"]}],"example":[1,[[0,"\n\nfunction setup() {\n // Set the pixel density to 1.\n pixelDensity(1);\n\n // Create a canvas and draw\n // a circle.\n createCanvas(100, 100);\n background(200);\n circle(50, 50, 70);\n\n describe('A fuzzy white circle drawn on a gray background. The circle becomes sharper when the mouse is pressed.');\n}\n\nfunction mousePressed() {\n // Get the current display density.\n let d = displayDensity();\n\n // Use the display density to set\n // the sketch's pixel density.\n pixelDensity(d);\n\n // Paint the background and\n // draw a circle.\n background(200);\n circle(50, 50, 70);\n}\n
\nस्क्रीन प्रदर्शन की ऊचाई को संचित करने वाला एक Number
चर।
displayHeight
पूर्ण स्क्रीन कार्यक्रम चलाने के लिए उपयोगी है। इसकी मान वर्तमान pixelDensity() पर निर्भर करती है।
नोट: वास्तविक स्क्रीन की ऊचाई को इस प्रकार निर्धारित किया जा सकता है displayHeight * pixelDensity()
।
\nfunction setup() {\n // Set the canvas' width and height\n // using the display's dimensions.\n createCanvas(displayWidth, displayHeight);\n\n background(200);\n\n describe('A gray canvas that is the same size as the display.');\n}\n
\nस्क्रीन प्रदर्शन की चौड़ाई को संचित करने वाला एक Number
चर।
displayWidth
पूर्ण स्क्रीन कार्यक्रम चलाने के लिए उपयोगी है। इसकी मान वर्तमान pixelDensity() पर निर्भर करती है।
नोट: वास्तविक स्क्रीन की चौड़ाई को इस प्रकार निर्धारित किया जा सकता है displayWidth * pixelDensity()
।
\nfunction setup() {\n // Set the canvas' width and height\n // using the display's dimensions.\n createCanvas(displayWidth, displayHeight);\n\n background(200);\n\n describe('A gray canvas that is the same size as the display.');\n}\n
\nएक Boolean
चर जो true
है अगर ब्राउज़र केंद्रित है और false
है अगर नहीं।
ध्यान दें: ब्राउज़र विंडो केवल तभी इनपुट प्राप्त कर सकती है जब वह केंद्रित हो।
\n"],"line":[0,174],"itemtype":[0,"property"],"class":[0,"p5"],"example":[1,[[0,"\n\n// Open this example in two separate browser\n// windows placed side-by-side to demonstrate.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A square changes color from green to red when the browser window is out of focus.');\n}\n\nfunction draw() {\n // Change the background color\n // when the browser window\n // goes in/out of focus.\n if (focused === true) {\n background(0, 255, 0);\n } else {\n background(255, 0, 0);\n }\n}\n
\nएक Number
वेरिएबल जो स्केच की शुरुआत से अब तक खींचे गए फ्रेमों की संख्या को ट्रैक करता है।
frameCount
की मान setup() में 0 होती है। यह हर बार 1 बढ़ता है जब draw() में कोड का प्रोविडान होने वाले समय को समाप्त होता है।
\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Display the value of\n // frameCount.\n textSize(30);\n textAlign(CENTER, CENTER);\n text(frameCount, 50, 50);\n\n describe('The number 0 written in black in the middle of a gray square.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Set the frameRate to 30.\n frameRate(30);\n\n textSize(30);\n textAlign(CENTER, CENTER);\n\n describe('A number written in black in the middle of a gray square. Its value increases rapidly.');\n}\n\nfunction draw() {\n background(200);\n\n // Display the value of\n // frameCount.\n text(frameCount, 50, 50);\n}\n
\nप्रति सेकंड चित्र खींचने की संख्या सेट करता है।
\nएक संख्यात्मक आर्ग्यूमेंट के साथ frameRate()
को बुलाना, जैसे कि frameRate(30)
, 30 फ्रेम प्रति सेकंड (FPS) खींचने का प्रयास करता है। लक्षित फ्रेम दर स्केच की प्रोसेसिंग आवश्यकताओं के आधार पर हासिल नहीं की जा सकती है। अधिकांश कंप्यूटर 60 फ्रेम प्रति सेकंड (FPS) की डिफ़ॉल्ट फ्रेम दर का अनुसरण करते हैं। 24 FPS और उससे ऊपर की फ्रेम दरें सहज एनिमेशन के लिए पर्याप्त तेज होती हैं।
बिना किसी आर्ग्यूमेंट के frameRate()
को बुलाना वर्तमान फ्रेम दर लौटाता है। वापसी की गई मान एक अनुमान है।
प्रति सेकंड बनाए जाने वाले फ़्रेमों की संख्या।
\n"],"type":[0,"Number"]}]]]}],[0,{"params":[1,[]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,true],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background. The circle moves from left to right in a loop. It slows down when the mouse is pressed.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the x variable based\n // on the current frameCount.\n let x = frameCount % 100;\n\n // If the mouse is pressed,\n // decrease the frame rate.\n if (mouseIsPressed === true) {\n frameRate(10);\n } else {\n frameRate(60);\n }\n\n // Use x to set the circle's\n // position.\n circle(x, 50, 20);\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A number written in black on a gray background. The number decreases when the mouse is pressed.');\n}\n\nfunction draw() {\n background(200);\n\n // If the mouse is pressed, do lots\n // of math to slow down drawing.\n if (mouseIsPressed === true) {\n for (let i = 0; i < 1000000; i += 1) {\n random();\n }\n }\n\n // Get the current frame rate\n // and display it.\n let fps = frameRate();\n text(fps, 50, 50);\n}\n
\nफुल-स्क्रीन मोड को टॉगल करता है या वर्तमान मोड लौटाता है।
\nfullscreen(true)
बुलाने पर स्केच को पूर्ण स्क्रीन मोड में बदल देता है। fullscreen(false)
बुलाने पर स्केच का आदिकारिक आकार होता है।
किसी तर्क के बिना fullscreen()
बुलाने पर यदि स्केच पूर्ण स्क्रीन मोड में है तो true
लौटता है और यदि नहीं है तो false
लौटता है।
नोट: ब्राउज़र प्रतिबंधों के कारण, fullscreen()
को केवल उपयोगकर्ता इनपुट के साथ जैसे कि माउस प्रेस के साथ ही बुलाया जा सकता है।
क्या स्केच फ़ुलस्क्रीन मोड में होना चाहिए।
\n"],"type":[0,"बूलियन"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"वर्तमान फुल-स्क्रीन स्थिति."],"type":[0,"बूलियन"]}],"example":[1,[[0,"\n\nfunction setup() {\n background(200);\n\n describe('A gray canvas that switches between default and full-screen display when clicked.');\n}\n\n// If the mouse is pressed,\n// toggle full-screen mode.\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n let fs = fullscreen();\n fullscreen(!fs);\n }\n}\n
\nलक्षित फ्रेम दर को वापस देता है।
\n\nइस मूल्य का या तो सिस्टम फ्रेम दर होता है या frameRate() को पास किया गया अंतिम मान होता है।
\n"],"line":[0,447],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"_targetFrameRate"],"type":[0,"Number"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('The number 20 written in black on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the frame rate to 20.\n frameRate(20);\n\n // Get the target frame rate and\n // display it.\n let fps = getTargetFrameRate();\n text(fps, 43, 54);\n}\n
\nस्केच के वर्तमान URL को एक String
के रूप में लौटाता है।
\nfunction setup() {\n background(200);\n\n // Get the sketch's URL\n // and display it.\n let url = getURL();\n textWrap(CHAR);\n text(url, 0, 40, 100);\n\n describe('The URL \"https://p5js.org/reference/p5/getURL\" written in black on a gray background.');\n}\n
\nवर्तमान URL पैरामीटर को एक Object
में लौटाता है।
उदाहरण के लिए, यदि URL https://p5js.org?year=2014&month=May&day=15
पर होस्टेड स्केच में getURLParams()
को बुलाया जाता है तो { year: 2014, month: 'May', day: 15 }
वापस लौटता है।
\n// Imagine this sketch is hosted at the following URL:\n// https://p5js.org?year=2014&month=May&day=15\n\nfunction setup() {\n background(200);\n\n // Get the sketch's URL\n // parameters and display\n // them.\n let params = getURLParams();\n text(params.day, 10, 20);\n text(params.month, 10, 40);\n text(params.year, 10, 60);\n\n describe('The text \"15\", \"May\", and \"2014\" written in black on separate lines.');\n}\n
\nवर्तमान URL पथ को एक String
की Array
के रूप में वापस लौटाता है।
उदाहरण के लिए, यदि किसी URL पर स्केच होता है https://example.com/sketchbook
। तो getURLPath()
को बुलाने पर ['sketchbook']
वापस मिलता है। https://example.com/sketchbook/monday
URL पर होस्टेड स्केच के लिए, getURLPath()
['sketchbook', 'monday']
वापस करता है।
\nfunction setup() {\n background(200);\n\n // Get the sketch's URL path\n // and display the first\n // part.\n let path = getURLPath();\n text(path[0], 25, 54);\n\n describe('The word \"reference\" written in black on a gray background.');\n}\n
\nकैनवास पर आकारों का स्क्रीन पाठ पठन योग्य विवरण बनाता है।
\ngridOutput()
वेब पेज में एक सामान्य विवरण, आकारों का तालिका, और आकारों की सूची जोड़ता है। सामान्य विवरण में कैनवास का आकार, कैनवास का रंग, और आकारों की संख्या शामिल होती है। उदाहरण के लिए, gray canvas, 100 by 100 pixels, contains 2 shapes: 1 circle 1 square
।
gridOutput()
अपनी आकारों की तालिका का उपयोग ग्रिड के रूप में करता है। ग्रिड में प्रत्येक आकार को एक सेल में रखा जाता है जिसकी पंक्ति और स्तंभ उस आकार के स्थान को संदर्भित करते हैं। ग्रिड सेल्स उस स्थान पर आकार के रंग और प्रकार का विवरण करती हैं। उदाहरण के लिए, red circle
। इन विवरणों को व्यक्तिगत रूप से चुनकर अधिक विवरण प्राप्त किया जा सकता है। यह textOutput() से अलग है, जो अपनी तालिका का उपयोग सूची के रूप में करता है।
तालिका के पीछे आकारों की एक सूची होती है। सूची में प्रत्येक आकार की रंग, प्रकार, स्थान, और क्षेत्रफल का विवरण होता है। उदाहरण के लिए, red circle, location = middle, area = 3 %
।
display
पैरामीटर वैकल्पिक है। यह निर्धारित करता है कि विवरण कैसे प्रदर्शित किया जाएगा। यदि LABEL
पारित किया जाता है, जैसे gridOutput(LABEL)
, तो विवरण कैनवास के बगल में एक div तत्व में दिखाई देगा। LABEL
का उपयोग स्क्रीन पाठ पठन के लिए अप्रयोगी नकलियों को बनाता है। विकास के दौरान केवल LABEL
का उपयोग करें। यदि FALLBACK
पारित किया जाता है, जैसे gridOutput(FALLBACK)
, तो विवरण केवल स्क्रीन पाठ पठन के लिए ही दिखाई देगा। यह डिफ़ॉल्ट मोड है।
और अधिक जानने के लिए Writing accessible canvas descriptions पढ़ें।
\n"],"line":[0,144],"params":[1,[[0,{"name":[0,"display"],"description":[0,"या तो FALLBACK या LABEL.
\n"],"type":[0,"Constant"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\nfunction setup() {\n // Add the grid description.\n gridOutput();\n\n // Draw a couple of shapes.\n background(200);\n fill(255, 0, 0);\n circle(20, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle and a blue square on a gray background.');\n}\n
\n\nfunction setup() {\n // Add the grid description and\n // display it for debugging.\n gridOutput(LABEL);\n\n // Draw a couple of shapes.\n background(200);\n fill(255, 0, 0);\n circle(20, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle and a blue square on a gray background.');\n}\n
\n\nfunction draw() {\n // Add the grid description.\n gridOutput();\n\n // Draw a moving circle.\n background(200);\n let x = frameCount * 0.1;\n fill(255, 0, 0);\n circle(x, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle moves from left to right above a blue square.');\n}\n
\n\nfunction draw() {\n // Add the grid description and\n // display it for debugging.\n gridOutput(LABEL);\n\n // Draw a moving circle.\n background(200);\n let x = frameCount * 0.1;\n fill(255, 0, 0);\n circle(x, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle moves from left to right above a blue square.');\n}\n
\nकैनवास की ऊंचाई को पिक्सेल में संग्रहित करने वाला Number
वेरिएबल।
height
की डिफ़ॉल्ट मूल्य 100 होता है। createCanvas() या resizeCanvas() को बुलाने पर height
का मूल्य बदल जाता है। noCanvas() को बुलाने पर इसका मूल्य 0 हो जाता है।
\nfunction setup() {\n background(200);\n\n // Display the canvas' height.\n text(height, 42, 54);\n\n describe('The number 100 written in black on a gray square.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 50);\n\n background(200);\n\n // Display the canvas' height.\n text(height, 42, 27);\n\n describe('The number 50 written in black on a gray rectangle.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Display the canvas' height.\n text(height, 42, 54);\n\n describe('The number 100 written in black on a gray square. When the mouse is pressed, the square becomes a rectangle and the number becomes 50.');\n}\n\n// If the mouse is pressed, reisze\n// the canvas and display its new\n// height.\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n resizeCanvas(100, 50);\n background(200);\n text(height, 42, 27);\n }\n}\n
\nकर्सर को दृश्य से छुपाता है।
\n"],"line":[0,482],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\nfunction setup() {\n // Hide the cursor.\n noCursor();\n}\n\nfunction draw() {\n background(200);\n\n circle(mouseX, mouseY, 10);\n\n describe('A white circle on a gray background. The circle follows the mouse as it moves. The cursor is hidden.');\n}\n
\nपिक्सेल घनत्व सेट करता है या वर्तमान घनत्व लौटाता है।
\nकंप्यूटर प्रदर्शन छोटे बत्तियों के ग्रिड्स होते हैं जिन्हें पिक्सेल कहा जाता है। एक प्रदर्शन का पिक्सेल घनत्व बताता है कि वह कितने पिक्सेल को एक क्षेत्र में पैक करता है। छोटे पिक्सेल वाले प्रदर्शनों का अधिक पिक्सेल घनत्व होता है और वे तेज़ छवियाँ बनाते हैं।
\npixelDensity()
ऊंचे पिक्सेल घनत्व वाले प्रदर्शनों के लिए पिक्सेल स्केलिंग सेट करता है। डिफ़ॉल्ट रूप से, पिक्सेल घनत्व को प्रदर्शन के घनत्व के समान सेट किया जाता है। pixelDensity(1)
इसे बंद कर देता है।
बिना किसी तर्क के pixelDensity()
को बुलाने पर वर्तमान पिक्सेल घनत्व लौटता है।
वांछित पिक्सेल घनत्व।
\n"],"type":[0,"Number"],"optional":[0,true]}]]]}],[0,{"params":[1,[]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,true],"example":[1,[[0,"\n\nfunction setup() {\n // Set the pixel density to 1.\n pixelDensity(1);\n\n // Create a canvas and draw\n // a circle.\n createCanvas(100, 100);\n background(200);\n circle(50, 50, 70);\n\n describe('A fuzzy white circle on a gray canvas.');\n}\n
\n\nfunction setup() {\n // Set the pixel density to 3.\n pixelDensity(3);\n\n // Create a canvas, paint the\n // background, and draw a\n // circle.\n createCanvas(100, 100);\n background(200);\n circle(50, 50, 70);\n\n describe('A sharp white circle on a gray canvas.');\n}\n
\nवेब ब्राउज़र की कोन्सोल में पाठ दिखाता है।
\nprint()
डीबगिंग के दौरान मानों को प्रिंट करने के लिए सहायक है। प्रत्येक print()
कॉल एक नयी पंक्ति पाठ बनाता है।
नोट: रिक्त पंक्ति प्रिंट करने के लिए print('\\n')
को कॉल करें। किसी तार्किक के बिना print()
को कॉल करने पर ब्राउज़र की डायलॉग खुलती है जो दस्तावेज़ों को प्रिंट करने के लिए होती है।
कंसोल पर प्रिंट करने के लिए सामग्री।
\n"],"type":[0,"Any"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\nfunction setup() {\n // Prints \"hello, world\" to the console.\n print('hello, world');\n}\n
\n\nfunction setup() {\n let name = 'ada';\n // Prints \"hello, ada\" to the console.\n print(`hello, ${name}`);\n}\n
\nकैनवास पर आकारों का स्क्रीन पाठ पठन योग्य विवरण बनाता है।
\ntextOutput()
वेब पेज में एक सामान्य विवरण, आकारों की सूची, और आकारों का तालिका जोड़ता है। सामान्य विवरण में कैनवास का आकार, कैनवास का रंग, और आकारों की संख्या शामिल होती है। उदाहरण के लिए, Your output is a, 100 by 100 pixels, gray canvas containing the following 2 shapes:
।
सामान्य विवरण के बाद आकारों की सूची होती है। सूची में प्रत्येक आकार की रंग, स्थान, और क्षेत्रफल का विवरण होता है। उदाहरण के लिए, a red circle at middle covering 3% of the canvas
। प्रत्येक आकार को अधिक विवरण प्राप्त करने के लिए चुना जा सकता है।
textOutput()
अपनी आकारों की तालिका का उपयोग सूची के रूप में करता है। तालिका में आकार, रंग, स्थान, निर्देशांक और क्षेत्रफल का विवरण होता है। उदाहरण के लिए, red circle location = middle area = 3%
। यह gridOutput() से अलग है, जो अपनी तालिका का उपयोग ग्रिड के रूप में करता है।
display
पैरामीटर वैकल्पिक है। यह निर्धारित करता है कि विवरण कैसे प्रदर्शित किया जाएगा। यदि LABEL
पारित किया जाता है, जैसे textOutput(LABEL)
, तो विवरण कैनवास के बगल में एक div तत्व में दिखाई देगा। LABEL
का उपयोग स्क्रीन पाठ पठन के लिए अप्रयोगी नकलियों को बनाता है। विकास के दौरान केवल LABEL
का उपयोग करें। यदि FALLBACK
पारित किया जाता है, जैसे textOutput(FALLBACK)
, तो विवरण केवल स्क्रीन पाठ पठन के लिए ही दिखाई देगा। यह डिफ़ॉल्ट मोड है।
और अधिक जानने के लिए Writing accessible canvas descriptions पढ़ें।
\n"],"line":[0,10],"params":[1,[[0,{"name":[0,"display"],"description":[0,"या तो FALLBACK या LABEL.
\n"],"type":[0,"Constant"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\nfunction setup() {\n // Add the text description.\n textOutput();\n\n // Draw a couple of shapes.\n background(200);\n fill(255, 0, 0);\n circle(20, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle and a blue square on a gray background.');\n}\n
\n\nfunction setup() {\n // Add the text description and\n // display it for debugging.\n textOutput(LABEL);\n\n // Draw a couple of shapes.\n background(200);\n fill(255, 0, 0);\n circle(20, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle and a blue square on a gray background.');\n}\n
\n\nfunction draw() {\n // Add the text description.\n textOutput();\n\n // Draw a moving circle.\n background(200);\n let x = frameCount * 0.1;\n fill(255, 0, 0);\n circle(x, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle moves from left to right above a blue square.');\n}\n
\n\nfunction draw() {\n // Add the text description and\n // display it for debugging.\n textOutput(LABEL);\n\n // Draw a moving circle.\n background(200);\n let x = frameCount * 0.1;\n fill(255, 0, 0);\n circle(x, 20, 20);\n fill(0, 0, 255);\n square(50, 50, 50);\n\n // Add a general description of the canvas.\n describe('A red circle moves from left to right above a blue square.');\n}\n
\nउपयोग में वेबजीएल संस्करण के साथ एक String
चर।
webglVersion
का मूल्य निम्नलिखित स्ट्रिंग स्थायियों में से एक के बराबर होता है:
WEBGL2
जिसका मान 'webgl2'
है,WEBGL
जिसका मान 'webgl'
है, याP2D
जिसका मान 'p2d'
है। यह 2D स्केच के लिए डिफ़ॉल्ट है।वेबजीएल संस्करण सेट करने के तरीकों के लिए setAttributes() देखें।
\n"],"line":[0,508],"itemtype":[0,"property"],"class":[0,"p5"],"example":[1,[[0,"\n\nfunction setup() {\n background(200);\n\n // Display the current WebGL version.\n text(webglVersion, 42, 54);\n\n describe('The text \"p2d\" written in black on a gray background.');\n}\n
\n\nlet font;\n\nfunction preload() {\n // Load a font to use.\n font = loadFont('/assets/inconsolata.otf');\n}\n\nfunction setup() {\n // Create a canvas using WEBGL mode.\n createCanvas(100, 50, WEBGL);\n background(200);\n\n // Display the current WebGL version.\n fill(0);\n textFont(font);\n text(webglVersion, -15, 5);\n\n describe('The text \"webgl2\" written in black on a gray background.');\n}\n
\n\nlet font;\n\nfunction preload() {\n // Load a font to use.\n font = loadFont('/assets/inconsolata.otf');\n}\n\nfunction setup() {\n // Create a canvas using WEBGL mode.\n createCanvas(100, 50, WEBGL);\n\n // Set WebGL to version 1.\n setAttributes({ version: 1 });\n\n background(200);\n\n // Display the current WebGL version.\n fill(0);\n textFont(font);\n text(webglVersion, -14, 5);\n\n describe('The text \"webgl\" written in black on a gray background.');\n}\n
\nकैनवास की चौड़ाई को पिक्सेल में संग्रहित करने वाला Number
वेरिएबल।
width
की डिफ़ॉल्ट मूल्य 100 होता है। createCanvas() या resizeCanvas() को बुलाने पर width
का मूल्य बदल जाता है। noCanvas() को बुलाने पर इसका मूल्य 0 हो जाता है।
\nfunction setup() {\n background(200);\n\n // Display the canvas' width.\n text(width, 42, 54);\n\n describe('The number 100 written in black on a gray square.');\n}\n
\n\nfunction setup() {\n createCanvas(50, 100);\n\n background(200);\n\n // Display the canvas' width.\n text(width, 21, 54);\n\n describe('The number 50 written in black on a gray rectangle.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Display the canvas' width.\n text(width, 42, 54);\n\n describe('The number 100 written in black on a gray square. When the mouse is pressed, the square becomes a rectangle and the number becomes 50.');\n}\n\n// If the mouse is pressed, reisze\n// the canvas and display its new\n// width.\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n resizeCanvas(50, 100);\n background(200);\n text(width, 21, 54);\n }\n}\n
\nब्राउज़र के दृश्यकोण की ऊचाई को संचित करने वाला एक Number
चर।
लेआउट दृश्यकोण ब्राउज़र का क्षेत्र है जो ड्राइंग के लिए उपलब्ध है।
\n"],"line":[0,680],"itemtype":[0,"property"],"class":[0,"p5"],"example":[1,[[0,"\n\nfunction setup() {\n // Set the canvas' width and height\n // using the browser's dimensions.\n createCanvas(windowWidth, windowHeight);\n\n background(200);\n\n describe('A gray canvas that takes up the entire browser window.');\n}\n
\nजब ब्राउज़र विंडो का आकार बदलता है, तो बुलाई जाने वाली एक फ़ंक्शन।
\nwindowResized()
के शरीर में डाले गए कोड जब ब्राउज़र विंडो का आकार बदलता है, तो चलेगा। यह नए विंडो आकार को समायोजित करने के लिए एक अच्छा स्थान है resizeCanvas() को बुलाने या अन्य नई विंडो के आकार को ध्यान में रखते हुए अन्य समायोजन करने के लिए।
event
पैरामीटर वैकल्पिक है। यदि फ़ंक्शन घोषणा में जोड़ा जाता है, तो इसका उपयोग डीबगिंग या अन्य उद्देश्यों के लिए किया जा सकता है।
इवेंट का वैकल्पिक आकार बदलें।
\n"],"type":[0,"UIEvent"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n\n describe('A gray canvas with a white circle at its center. The canvas takes up the entire browser window. It changes size to match the browser window.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw a circle at the center.\n circle(width / 2, height / 2, 50);\n}\n\n// Resize the canvas when the\n// browser's size changes.\nfunction windowResized() {\n resizeCanvas(windowWidth, windowHeight);\n}\n
\nब्राउज़र के दृश्यकोण की चौड़ाई को संचित करने वाला एक Number
चर।
लेआउट दृश्यकोण ब्राउज़र का क्षेत्र है जो ड्राइंग के लिए उपलब्ध है।
\n"],"line":[0,652],"itemtype":[0,"property"],"class":[0,"p5"],"example":[1,[[0,"\n\nfunction setup() {\n // Set the canvas' width and height\n // using the browser's dimensions.\n createCanvas(windowWidth, windowHeight);\n\n background(200);\n\n describe('A gray canvas that takes up the entire browser window.');\n}\n
\nGet the shader used when no lights or materials are applied.
\nYou can call baseColorShader().modify()
\nand change any of the following hooks:
Hook | \nDescription | \n
---|---|
void beforeVertex | \nCalled at the start of the vertex shader. | \n
vec3 getLocalPosition | \nUpdate the position of vertices before transforms are applied. It takes in vec3 position and must return a modified version. | \n
vec3 getWorldPosition | \nUpdate the position of vertices after transforms are applied. It takes in vec3 position and pust return a modified version. | \n
vec3 getLocalNormal | \nUpdate the normal before transforms are applied. It takes in vec3 normal and must return a modified version. | \n
vec3 getWorldNormal | \nUpdate the normal after transforms are applied. It takes in vec3 normal and must return a modified version. | \n
vec2 getUV | \nUpdate the texture coordinates. It takes in vec2 uv and must return a modified version. | \n
vec4 getVertexColor | \nUpdate the color of each vertex. It takes in a vec4 color and must return a modified version. | \n
void afterVertex | \nCalled at the end of the vertex shader. | \n
void beforeFragment | \nCalled at the start of the fragment shader. | \n
vec4 getFinalColor | \nUpdate the final color after mixing. It takes in a vec4 color and must return a modified version. | \n
void afterFragment | \nCalled at the end of the fragment shader. | \n
Most of the time, you will need to write your hooks in GLSL ES version 300. If you\nare using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.
\nCall baseColorShader().inspectHooks()
to see all the possible hooks and\ntheir default implementations.
\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseColorShader().modify({\n uniforms: {\n 'float time': () => millis()\n },\n 'vec3 getWorldPosition': `(vec3 pos) {\n pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);\n return pos;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n shader(myShader);\n noStroke();\n fill('red');\n circle(0, 0, 50);\n}\n
\nGet the default shader used with lights, materials,\nand textures.
\nYou can call baseMaterialShader().modify()
\nand change any of the following hooks:
Hook | Description |
---|---|
\n\n
| \n\n Called at the start of the vertex shader. \n |
\n\n
| \n\n Update the position of vertices before transforms are applied. It takes in |
\n\n
| \n\n Update the position of vertices after transforms are applied. It takes in |
\n\n
| \n\n Update the normal before transforms are applied. It takes in |
\n\n
| \n\n Update the normal after transforms are applied. It takes in |
\n\n
| \n\n Update the texture coordinates. It takes in |
\n\n
| \n\n Update the color of each vertex. It takes in a |
\n\n
| \n\n Called at the end of the vertex shader. \n |
\n\n
| \n\n Called at the start of the fragment shader. \n |
\n\n
| \n\n Update the per-pixel inputs of the material. It takes in an
|
\n\n
| \n\n Take in a
|
\n\n
| \n\n Update the final color after mixing. It takes in a |
\n\n
| \n\n Called at the end of the fragment shader. \n |
Most of the time, you will need to write your hooks in GLSL ES version 300. If you\nare using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.
\nCall baseMaterialShader().inspectHooks()
to see all the possible hooks and\ntheir default implementations.
\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseMaterialShader().modify({\n uniforms: {\n 'float time': () => millis()\n },\n 'vec3 getWorldPosition': `(vec3 pos) {\n pos.y += 20.0 * sin(time * 0.001 + pos.x * 0.05);\n return pos;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n shader(myShader);\n lights();\n noStroke();\n fill('red');\n sphere(50);\n}\n
\n\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseMaterialShader().modify({\n declarations: 'vec3 myNormal;',\n 'Inputs getPixelInputs': `(Inputs inputs) {\n myNormal = inputs.normal;\n return inputs;\n }`,\n 'vec4 getFinalColor': `(vec4 color) {\n return mix(\n vec4(1.0, 1.0, 1.0, 1.0),\n color,\n abs(dot(myNormal, vec3(0.0, 0.0, 1.0)))\n );\n }`\n });\n}\n\nfunction draw() {\n background(255);\n rotateY(millis() * 0.001);\n shader(myShader);\n lights();\n noStroke();\n fill('red');\n torus(30);\n}\n
\n\nlet myShader;\nlet environment;\n\nfunction preload() {\n environment = loadImage('/assets/outdoor_spheremap.jpg');\n}\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseMaterialShader().modify({\n 'Inputs getPixelInputs': `(Inputs inputs) {\n float factor =\n sin(\n inputs.texCoord.x * ${TWO_PI} +\n inputs.texCoord.y * ${TWO_PI}\n ) * 0.4 + 0.5;\n inputs.shininess = mix(1., 100., factor);\n inputs.metalness = factor;\n return inputs;\n }`\n });\n}\n\nfunction draw() {\n panorama(environment);\n ambientLight(100);\n imageLight(environment);\n rotateY(millis() * 0.001);\n shader(myShader);\n noStroke();\n fill(255);\n specularMaterial(150);\n sphere(50);\n}\n
\n\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseMaterialShader().modify({\n 'Inputs getPixelInputs': `(Inputs inputs) {\n vec3 newNormal = inputs.normal;\n // Simple bump mapping: adjust the normal based on position\n newNormal.x += 0.2 * sin(\n sin(\n inputs.texCoord.y * ${TWO_PI} * 10.0 +\n inputs.texCoord.x * ${TWO_PI} * 25.0\n )\n );\n newNormal.y += 0.2 * sin(\n sin(\n inputs.texCoord.x * ${TWO_PI} * 10.0 +\n inputs.texCoord.y * ${TWO_PI} * 25.0\n )\n );\n inputs.normal = normalize(newNormal);\n return inputs;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n shader(myShader);\n ambientLight(150);\n pointLight(\n 255, 255, 255,\n 100*cos(frameCount*0.04), -50, 100*sin(frameCount*0.04)\n );\n noStroke();\n fill('red');\n shininess(200);\n specularMaterial(255);\n sphere(50);\n}\n
\nGet the shader used by normalMaterial()
.
You can call baseNormalShader().modify()
\nand change any of the following hooks:
Hook | \nDescription | \n
---|---|
void beforeVertex | \nCalled at the start of the vertex shader. | \n
vec3 getLocalPosition | \nUpdate the position of vertices before transforms are applied. It takes in vec3 position and must return a modified version. | \n
vec3 getWorldPosition | \nUpdate the position of vertices after transforms are applied. It takes in vec3 position and pust return a modified version. | \n
vec3 getLocalNormal | \nUpdate the normal before transforms are applied. It takes in vec3 normal and must return a modified version. | \n
vec3 getWorldNormal | \nUpdate the normal after transforms are applied. It takes in vec3 normal and must return a modified version. | \n
vec2 getUV | \nUpdate the texture coordinates. It takes in vec2 uv and must return a modified version. | \n
vec4 getVertexColor | \nUpdate the color of each vertex. It takes in a vec4 color and must return a modified version. | \n
void afterVertex | \nCalled at the end of the vertex shader. | \n
void beforeFragment | \nCalled at the start of the fragment shader. | \n
vec4 getFinalColor | \nUpdate the final color after mixing. It takes in a vec4 color and must return a modified version. | \n
void afterFragment | \nCalled at the end of the fragment shader. | \n
Most of the time, you will need to write your hooks in GLSL ES version 300. If you\nare using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.
\nCall baseNormalShader().inspectHooks()
to see all the possible hooks and\ntheir default implementations.
\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseNormalShader().modify({\n uniforms: {\n 'float time': () => millis()\n },\n 'vec3 getWorldPosition': `(vec3 pos) {\n pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);\n return pos;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n shader(myShader);\n noStroke();\n sphere(50);\n}\n
\n\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseNormalShader().modify({\n 'vec3 getWorldNormal': '(vec3 normal) { return abs(normal); }',\n 'vec4 getFinalColor': `(vec4 color) {\n // Map the r, g, and b values of the old normal to new colors\n // instead of just red, green, and blue:\n vec3 newColor =\n color.r * vec3(89.0, 240.0, 232.0) / 255.0 +\n color.g * vec3(240.0, 237.0, 89.0) / 255.0 +\n color.b * vec3(205.0, 55.0, 222.0) / 255.0;\n newColor = newColor / (color.r + color.g + color.b);\n return vec4(newColor, 1.0) * color.a;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n shader(myShader);\n noStroke();\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.015);\n box(100);\n}\n
\nGet the shader used when drawing the strokes of shapes.
\nYou can call baseStrokeShader().modify()
\nand change any of the following hooks:
Hook | Description |
---|---|
\n\n
| \n\n Called at the start of the vertex shader. \n |
\n\n
| \n\n Update the position of vertices before transforms are applied. It takes in |
\n\n
| \n\n Update the position of vertices after transforms are applied. It takes in |
\n\n
| \n\n Update the stroke weight. It takes in |
\n\n
| \n\n Update the center of the line. It takes in |
\n\n
| \n\n Update the position of each vertex on the edge of the line. It takes in |
\n\n
| \n\n Update the color of each vertex. It takes in a |
\n\n
| \n\n Called at the end of the vertex shader. \n |
\n\n
| \n\n Called at the start of the fragment shader. \n |
\n\n
| \n\n Update the inputs to the shader. It takes in a struct
|
\n\n
| \n\n Caps and joins are made by discarded pixels in the fragment shader to carve away unwanted areas. Use this to change this logic. It takes in a |
\n\n
| \n\n Update the final color after mixing. It takes in a |
\n\n
| \n\n Called at the end of the fragment shader. \n |
Most of the time, you will need to write your hooks in GLSL ES version 300. If you\nare using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.
\nCall baseStrokeShader().inspectHooks()
to see all the possible hooks and\ntheir default implementations.
\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseStrokeShader().modify({\n 'Inputs getPixelInputs': `(Inputs inputs) {\n float opacity = 1.0 - smoothstep(\n 0.0,\n 15.0,\n length(inputs.position - inputs.center)\n );\n inputs.color *= opacity;\n return inputs;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n shader(myShader);\n strokeWeight(30);\n line(\n -width/3,\n sin(millis()*0.001) * height/4,\n width/3,\n sin(millis()*0.001 + 1) * height/4\n );\n}\n
\n\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseStrokeShader().modify({\n uniforms: {\n 'float time': () => millis()\n },\n declarations: 'vec3 myPosition;',\n 'vec3 getWorldPosition': `(vec3 pos) {\n myPosition = pos;\n return pos;\n }`,\n 'float getStrokeWeight': `(float w) {\n // Add a somewhat random offset to the weight\n // that varies based on position and time\n float scale = 0.8 + 0.2*sin(10.0 * sin(\n floor(time/250.) +\n myPosition.x*0.01 +\n myPosition.y*0.01\n ));\n return w * scale;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n shader(myShader);\n myShader.setUniform('time', millis());\n strokeWeight(10);\n beginShape();\n for (let i = 0; i <= 50; i++) {\n let r = map(i, 0, 50, 0, width/3);\n let x = r*cos(i*0.2);\n let y = r*sin(i*0.2);\n vertex(x, y);\n }\n endShape();\n}\n
\n\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseStrokeShader().modify({\n 'float random': `(vec2 p) {\n vec3 p3 = fract(vec3(p.xyx) * .1031);\n p3 += dot(p3, p3.yzx + 33.33);\n return fract((p3.x + p3.y) * p3.z);\n }`,\n 'Inputs getPixelInputs': `(Inputs inputs) {\n // Replace alpha in the color with dithering by\n // randomly setting pixel colors to 0 based on opacity\n float a = inputs.color.a;\n inputs.color.a = 1.0;\n inputs.color *= random(inputs.position.xy) > a ? 0.0 : 1.0;\n return inputs;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n shader(myShader);\n strokeWeight(10);\n beginShape();\n for (let i = 0; i <= 50; i++) {\n stroke(\n 0,\n 255\n * map(i, 0, 20, 0, 1, true)\n * map(i, 30, 50, 1, 0, true)\n );\n vertex(\n map(i, 0, 50, -1, 1) * width/3,\n 50 * sin(i/10 + frameCount/100)\n );\n }\n endShape();\n}\n
\ndebugMode()
एक ग्रिड जोड़ता है जो दिखाता है कि स्केच में \"ज़मीन\" कहाँ है। डिफ़ॉल्ट रूप से, ग्रिड स्केच के मूल (0, 0, 0)
से XZ समतल के साथ चलेगा। debugMode()
एक एक्सिस आइकन भी जोड़ता है जो सकारात्मक x-, y- और z-अक्षों के साथ इंगित करता है। debugMode()
को कॉल करने से ग्रिड और एक्सिस आइकन उनके डिफ़ॉल्ट आकार और स्थिति के साथ प्रदर्शित होते हैं।
डीबगिंग वातावरण को अनुकूलित करने के लिए वैकल्पिक पैरामीटर के साथ debugMode()
को कॉल करने के चार तरीके हैं।
debugMode()
को कॉल करने का पहला तरीका एक पैरामीटर, mode
लेता है। यदि सिस्टम कॉन्स्टेंट GRID
पास किया जाता है, जैसे debugMode(GRID)
में, तो ग्रिड प्रदर्शित किया जाएगा और एक्सिस आइकन छिपा रहेगा। यदि कॉन्स्टेंट AXES
पास किया जाता है, जैसे debugMode(AXES)
में, तो एक्सिस आइकन प्रदर्शित किया जाएगा और ग्रिड छिपा रहेगा।
debugMode()
को बुलाने का दूसरा तरीका छह पैरामीटर्स होते हैं। पहला पैरामीटर, mode
, GRID
या AXES
को प्रदर्शित करने का चयन करता है। अगले पांच पैरामीटर, gridSize
, gridDivisions
, xOff
, yOff
, और zOff
, वैकल्पिक होते हैं। ये संख्याएं होती हैं जो ग्रिड की उपस्थिति (gridSize
और gridDivisions
) और धाराओं के आइकन का स्थान सेट करती हैं (xOff
, yOff
, और zOff
)। उदाहरण के लिए, debugMode(20, 5, 10, 10, 10)
बुलाना gridSize
को 20 पिक्सेल पर सेट करता है, gridDivisions
की संख्या 5 को सेट करता है, और x-, y-, और z-धाराओं के साथ 10 पिक्सेल के रूप में धाराओं के आइकन को ऑफसेट करता है।
debugMode()
को बुलाने का तीसरा तरीका पांच पैरामीटर्स होते हैं। पहला पैरामीटर, mode
, GRID
या AXES
को प्रदर्शित करने का चयन करता है। अगले चार पैरामीटर, axesSize
, xOff
, yOff
, और zOff
, वैकल्पिक होते हैं। ये संख्याएं होती हैं जो धाराओं के आकार (axesSize
) और उनके स्थान (xOff
, yOff
, और zOff
) को सेट करती हैं।
debugMode()
को बुलाने का चौथा तरीका नौ वैकल्पिक पैरामीटर्स होते हैं। पहले पांच पैरामीटर, gridSize
, gridDivisions
, gridXOff
, gridYOff
, और gridZOff
संख्याएं होती हैं जो ग्रिड की उपस्थिति को सेट करती हैं। उदाहरण के लिए, debugMode(100, 5, 0, 0, 0)
बुलाना gridSize
को 100 सेट करता है, gridDivisions
की संख्या 5 को सेट करता है, और सभी ऑफसेट्स को 0 पर सेट करता है ताकि ग्रिड को मध्य में सेंटर किया जाए। अगले चार पैरामीटर, axesSize
, xOff
, yOff
, और zOff
नंबर्स होते हैं जो धाराओं आइकन की उपस्थिति को सेट करते हैं (axesSize
) और उसका स्थान (axesXOff
, axesYOff
, और axesZOff
)। उदाहरण के लिए, debugMode(100, 5, 0, 0, 0, 50, 10, 10, 10)
बुलाना gridSize
को 100 सेट करता है, gridDivisions
की संख्या 5 को सेट करता है, और सभी ऑफसेट्स को 0 पर सेट करता है ताकि ग्रिड को मध्य में सेंटर किया जाए। फिर यह axesSize
को 50 सेट करता है और आइकन को प्रत्येक धारा के साथ 10 पिक्सेल के रूप में ऑफसेट करता है।
या तो GRID या AXES
\n"],"type":[0,"Constant"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"mode"],"description":[0,""],"type":[0,"Constant"]}],[0,{"name":[0,"gridSize"],"description":[0,"ग्रिड की पार्श्व लंबाई।
\n"],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"gridDivisions"],"description":[0,"ग्रिड में डिवीजनों की संख्या।
\n"],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"xOff"],"description":[0,"एक्स-अक्ष के साथ मूल से ऑफसेट।
\n"],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"yOff"],"description":[0,"y-अक्ष के साथ मूल से ऑफसेट।
\n"],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"zOff"],"description":[0,"z-अक्ष के साथ मूल से ऑफसेट।
\n"],"type":[0,"Number"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"mode"],"description":[0,""],"type":[0,"Constant"]}],[0,{"name":[0,"axesSize"],"description":[0,"अक्ष चिह्न मार्करों की लंबाई।
\n"],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"xOff"],"description":[0,""],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"yOff"],"description":[0,""],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"zOff"],"description":[0,""],"type":[0,"Number"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"gridSize"],"description":[0,""],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"gridDivisions"],"description":[0,""],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"gridXOff"],"description":[0,"एक्स-अक्ष के साथ मूल से ग्रिड ऑफसेट।
\n"],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"gridYOff"],"description":[0,"ग्रिड y-अक्ष के साथ मूल से ऑफसेट है।
\n"],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"gridZOff"],"description":[0,"जेड-अक्ष के साथ मूल से ग्रिड ऑफसेट।
\n"],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"axesSize"],"description":[0,""],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"axesXOff"],"description":[0,"अक्ष चिह्न मूल बिंदु से x-अक्ष के अनुदिश ऑफसेट होता है।
\n"],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"axesYOff"],"description":[0,"अक्ष चिह्न मूल बिंदु से y-अक्ष के अनुदिश ऑफसेट होता है।
\n"],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"axesZOff"],"description":[0,"अक्ष आइकन z-अक्ष के साथ मूल से ऑफसेट होता है।
\n"],"type":[0,"Number"],"optional":[0,true]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Enable debug mode.\n debugMode();\n\n describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(20, 40);\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Enable debug mode.\n // Only display the axes icon.\n debugMode(AXES);\n\n describe('A multicolor box on a gray background. A grid and axes icon are displayed near the box.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(20, 40);\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Enable debug mode.\n // Only display the grid and customize it:\n // - size: 50\n // - divisions: 10\n // - offsets: 0, 20, 0\n debugMode(GRID, 50, 10, 0, 20, 0);\n\n describe('A multicolor box on a gray background. A grid is displayed below the box.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(20, 40);\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Enable debug mode.\n // Display the grid and axes icon and customize them:\n // Grid\n // ----\n // - size: 50\n // - divisions: 10\n // - offsets: 0, 20, 0\n // Axes\n // ----\n // - size: 50\n // - offsets: 0, 0, 0\n debugMode(50, 10, 0, 20, 0, 50, 0, 0, 0);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(20, 40);\n}\n
\n3डी स्केच में debugMode() को बंद कर देता है।
\n"],"line":[0,725],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Enable debug mode.\n debugMode();\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box. box(20, 40);\n}\n\n// Disable debug mode when the user double-clicks.\nfunction doubleClicked() {\n noDebugMode();\n}\n
\nउपयोगकर्ता को माउस, ट्रैकपैड या टचस्क्रीन का उपयोग करके 3D स्केच के चारों ओर परिक्रमा करने की अनुमति देता है।
\n3D रेखाचित्र एक काल्पनिक कैमरे के माध्यम से देखे जाते हैं। draw() के भीतर orbitControl()
को कॉल करना फ़ंक्शन उपयोगकर्ता को कैमरे की स्थिति बदलने की अनुमति देता हैं।
\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();
\n // Rest of sketch.\n}\n
\nबाएं क्लिक करने और खींचने या स्वाइप करने से स्केच के केंद्र के बारे में कैमरे की स्थिति घूम जाएगी। राइट-क्लिक और ड्रैग या मल्टी-स्वाइप कैमरे की स्थिति को बिना घुमाए पैन कर देगा। माउस व्हील (स्क्रॉलिंग) या पिंच इन/आउट का उपयोग करने से कैमरा स्केच के केंद्र से आगे या करीब चला जाएगा।
\nपहले तीन पैरामीटर, sensitivityX
, sensitivityZ
, और sensitivityZ
, वैकल्पिक हैं। वे संख्याएँ हैं जो प्रत्येक अक्ष के साथ गति के प्रति स्केच की संवेदनशीलता निर्धारित करती हैं। उदाहरण के लिए, orbitControl(1, 2, -1)
को कॉल करने से x-अक्ष पर गति बनी रहती है डिफ़ॉल्ट मान, स्केच को y-अक्ष के साथ गति के प्रति दोगुना संवेदनशील बनाता है, और z-अक्ष के साथ गति को उलट देता है। डिफ़ॉल्ट रूप से, सभी संवेदनशीलता मान 1 हैं.
चौथा पैरामीटर, options
, भी वैकल्पिक है। यह एक ऐसी वस्तु है जो परिक्रमा करने के व्यवहार को बदल देती है। उदाहरण के लिए, orbitControl(1, 1, 1, option)
को कॉल करने से options
के साथ सेट किए गए व्यवहार को बदलते समय डिफ़ॉल्ट संवेदनशीलता मान बना रहता है। ऑब्जेक्ट में निम्नलिखित गुण हो सकते हैं:
\nlet options = {\n // Setting this to false makes mobile interactions smoother by\n // preventing accidental interactions with the page while orbiting.\n // By default, it's true.\n disableTouchActions: true,\n\n // Setting this to true makes the camera always rotate in the\n // direction the mouse/touch is moving.\n // By default, it's false.\n freeRotation: false\n};
\norbitControl(1, 1, 1, options);\n
\n"],"line":[0,11],"params":[1,[[0,{"name":[0,"sensitivityX"],"description":[0,"x-अक्ष के साथ गति के प्रति संवेदनशीलता। डिफ़ॉल्ट 1 हैं।
\n"],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"sensitivityY"],"description":[0,"y-अक्ष के साथ गति के प्रति संवेदनशीलता। डिफ़ॉल्ट 1 है।
\n"],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"sensitivityZ"],"description":[0,"z-अक्ष के साथ गति के प्रति संवेदनशीलता। डिफ़ॉल्ट 1 है।
\n"],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"options"],"description":[0,"ऑब्जेक्ट दो वैकल्पिक गुणों के साथ, disableTouchActions
और freeRotation
। दोनों Boolean
हैं। disableTouchActions
डिफ़ॉल्ट रूप से true
और freeRotation
डिफॉल्ट रूप से false
होता है।
\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(30, 50);\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n // Make the interactions 3X sensitive.\n orbitControl(3, 3, 3);\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(30, 50);\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A multicolor box on a gray background. The camera angle changes when the user interacts using a mouse, trackpad, or touchscreen.');\n}\n\nfunction draw() {\n background(200);\n\n // Create an options object.\n let options = {\n disableTouchActions: false,\n freeRotation: true\n };\n\n // Enable orbiting with the mouse.\n // Prevent accidental touch actions on touchscreen devices\n // and enable free rotation.\n orbitControl(1, 1, 1, options);\n\n // Style the box.\n normalMaterial();\n\n // Draw the box.\n box(30, 50);\n}\n
\n3D स्केच में वर्तमान कैमरा की स्थिति और उन्मुखीकरण को सेट करता है।
\n camera()
ऑब्जेक्ट्स को अलग-अलग कोणों से देखने की अनुमति देता है। इसमें नौ पैरामीटर हैं जो सभी वैकल्पिक हैं।
पहले तीन पैरामीटर, x
, y
, और z
, कैमरा की स्थिति के निर्देशांक हैं। उदाहरण के लिए, camera(0, 0, 0)
कहने से कैमरा को मूल (0, 0, 0)
पर रखा जाता है। डिफ़ॉल्ट रूप से, कैमरा (0, 0, 800)
पर रखा जाता है।
अगले तीन पैरामीटर, centerX
, centerY
, और centerZ
वह बिंदु हैं जिस ओर कैमरा देख रहा है। उदाहरण के लिए, camera(0, 0, 0, 10, 20, 30)
कहने से कैमरा को मूल (0, 0, 0)
पर रखा जाता है और यह (10, 20, 30)
की ओर देखता है। डिफ़ॉल्ट रूप से, कैमरा मूल (0, 0, 0)
की ओर देखता है।
अंतिम तीन पैरामीटर, upX
, upY
, और upZ
\"ऊपर\" वेक्टर के घटक हैं। \"ऊपर\" वेक्टर कैमरा के y-अक्ष को अभिमुख करता है। उदाहरण के लिए, camera(0, 0, 0, 10, 20, 30, 0, -1, 0)
कहने से कैमरा को मूल (0, 0, 0)
पर रखा जाता है, यह (10, 20, 30)
की ओर देखता है, और \"ऊपर\" वेक्टर को (0, -1, 0)
(जैसे कि उल्टा होने की तरह) सेट करता है। डिफ़ॉल्ट रूप से, \"ऊपर\" वेक्टर (0, 1, 0)
होता है।
नोट: camera()
केवल WebGL मोड में उपयोग किया जा सकता है।
कैमरा का x-अक्ष निर्देशांक। डिफ़ॉल्ट रूप से 0 होता है।
\n"],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"y"],"description":[0,"कैमरा का y-अक्ष निर्देशांक। डिफ़ॉल्ट रूप से 0 होता है।
\n"],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"z"],"description":[0,"कैमरा का z-अक्ष निर्देशांक। डिफ़ॉल्ट रूप से 800 होता है।
\n"],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"centerX"],"description":[0,"कैमरा जिस बिंदु पर केंद्रित होता है, उसका x-अक्ष निर्देशांक। डिफ़ॉल्ट रूप से 0 होता है।
\n"],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"centerY"],"description":[0,"कैमरा जिस बिंदु पर केंद्रित होता है, उसका y-अक्ष निर्देशांक। डिफ़ॉल्ट रूप से 0 होता है।
\n"],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"centerZ"],"description":[0,"कैमरा जिस बिंदु पर केंद्रित होता है, उसका z-अक्ष निर्देशांक। डिफ़ॉल्ट रूप से 0 होता है।
\n"],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"upX"],"description":[0,"कैमरा के \"ऊपर\" वेक्टर का x-निर्देशांक। डिफ़ॉल्ट रूप से 0 होता है।
\n"],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"upY"],"description":[0,"कैमरा के \"ऊपर\" वेक्टर का y-निर्देशांक। डिफ़ॉल्ट रूप से 0 होता है।
\n"],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"upZ"],"description":[0,"कैमरा के \"ऊपर\" वेक्टर का z-निर्देशांक। डिफ़ॉल्ट रूप से 0 होता है।
\n"],"type":[0,"Number"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,true],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Move the camera to the top-right.\n camera(200, -400, 800);\n\n // Draw the box.\n box();\n}\n
\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube apperas to sway left and right on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the camera's x-coordinate.\n let x = 400 * cos(frameCount * 0.01);\n\n // Orbit the camera around the box.\n camera(x, -400, 800);\n\n // Draw the box.\n box();\n}\n
\n\n// Adjust the range sliders to change the camera's position.\n\nlet xSlider;\nlet ySlider;\nlet zSlider;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create slider objects to set the camera's coordinates.\n xSlider = createSlider(-400, 400, 400);\n xSlider.position(0, 100);\n xSlider.size(100);\n ySlider = createSlider(-400, 400, -200);\n ySlider.position(0, 120);\n ySlider.size(100);\n zSlider = createSlider(0, 1600, 800);\n zSlider.position(0, 140);\n zSlider.size(100);\n\n describe(\n 'A white cube drawn against a gray background. Three range sliders appear beneath the image. The camera position changes when the user moves the sliders.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Get the camera's coordinates from the sliders.\n let x = xSlider.value();\n let y = ySlider.value();\n let z = zSlider.value();\n\n // Move the camera.\n camera(x, y, z);\n\n // Draw the box.\n box();\n}\n
\nएक नया p5.Camera ऑब्जेक्ट बनाता है और इसे वर्तमान (सक्रिय) कैमरा के रूप में सेट करता है।
\n नया कैमरा को एक डिफ़ॉल्ट स्थिति (0, 0, 800)
और एक डिफ़ॉल्ट पर्स्पेक्टिव प्रोजेक्शन के साथ प्रारंभ किया जाता है। इसके गुण p5.Camera मेथड्स जैसे myCamera.lookAt(0, 0, 0)
के साथ नियंत्रित किए जा सकते हैं।
नोट: हर 3D स्केच में एक डिफॉल्ट कैमरा प्रारंभ किया जाता है। यह कैमरा camera(), perspective(), ortho(), और frustum() फ़ंक्शन्स का उपयोग करके नियंत्रित किया जा सकता है यदि यह दृश्य में एकमात्र कैमरा है।
\n नोट: createCamera()
केवल WebGL मोड में उपयोग किया जा सकता है।
\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet usingCam1 = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n // Place it at the top-left.\n // Point it at the origin.\n cam2 = createCamera();\n cam2.setPosition(400, -400, 800);\n cam2.lookAt(0, 0, 0);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the box.\n box();\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (usingCam1 === true) {\n setCamera(cam2);\n usingCam1 = false;\n } else {\n setCamera(cam1);\n usingCam1 = true;\n }\n}\n
\n3D स्केच में वर्तमान कैमरा के फ्रस्टम को सेट करता है।
\nफ्रस्टम प्रोजेक्शन में, कैमरे से दूर की आकृतियाँ कैमरे के पास की आकृतियों की तुलना में छोटी दिखाई देती हैं। यह तकनीक, जिसे फोरशॉर्टनिंग कहा जाता है, यथार्थवादी 3D दृश्य बनाती है।
\nfrustum()
अपने व्यूइंग फ्रस्टम को बदलकर डिफ़ॉल्ट कैमरे के परिप्रेक्ष्य को बदल देता है। फ्रस्टम वह स्थान का आयतन है जो कैमरे को दिखाई देता है। फ्रस्टम का आकार एक पिरामिड होता है जिसका शीर्ष काट दिया गया होता है। कैमरा को वहां रखा जाता है जहां पिरामिड का शीर्ष होना चाहिए और पिरामिड के आधार की ओर इशारा करता है। यह फ्रस्टम के भीतर सब कुछ देखता है।
पहले चार पैरामीटर, left
, right
, bottom
, और top
, फ्रस्टम के पार्श्व, तल और शीर्ष के निर्देशांक सेट करते हैं। उदाहरण के लिए, frustum(-100, 100, 200, -200)
को कॉल करने से 200 पिक्सल चौड़ा और 400 पिक्सल ऊँचा फ्रस्टम बनता है। डिफ़ॉल्ट रूप से, ये निर्देशांक स्केच की चौड़ाई और ऊंचाई के आधार पर सेट किए जाते हैं, जैसे ortho(-width / 20, width / 20, height / 20, -height / 20)
में।
अंतिम दो पैरामीटर, near
और far
, कैमरा से फ्रस्टम के निकट और दूर के समतल की दूरी सेट करते हैं। उदाहरण के लिए, ortho(-100, 100, 200, -200, 50, 1000)
को कॉल करने से 200 पिक्सल चौड़ा, 400 पिक्सल ऊँचा फ्रस्टम बनता है, जो कैमरे से 50 पिक्सल दूर शुरू होता है और कैमरे से 1,000 पिक्सल दूर समाप्त होता है। डिफ़ॉल्ट रूप से, near को 0.1 * 800
पर सेट किया जाता है, जो कैमरा और मूल के बीच डिफ़ॉल्ट दूरी का 1/10 है। far
को 10 * 800
पर सेट किया गया है, जो कैमरा और मूल के बीच डिफ़ॉल्ट दूरी का 10 गुना है।
नोट: frustum()
का उपयोग केवल WebGL मोड में किया जा सकता है।
छिन्नक के बाएँ तल का x-निर्देशांक। डिफ़ॉल्ट -width / 20
।
छिन्नक के दाहिने तल का x-निर्देशांक। डिफ़ॉल्ट width / 20
।
y- छिन्नक के निचले तल का समन्वय। डिफ़ॉल्ट height / 20
।
छिन्नक के शीर्ष तल का y-निर्देशांक। डिफ़ॉल्ट -height / 20
।
z- छिन्नक के निकट तल का समन्वय। डिफ़ॉल्ट 0.1 * 800
.
छिन्नक के सुदूर तल का z-निर्देशांक। डिफ़ॉल्ट 10 * 800
।
\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A row of white cubes on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Apply the default frustum projection.\n frustum();\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n
\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Adjust the frustum.\n // Center it.\n // Set its width and height to 20 pixels.\n // Place its near plane 300 pixels from the camera.\n // Place its far plane 350 pixels from the camera.\n frustum(-10, 10, -10, 10, 300, 350);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n
\n3D स्केच में लाइनों के लिए पर्स्पेक्टिव को सक्षम या अक्षम करता है।
\nWebGL मोड में, जब लाइनें कैमरा से दूर होती हैं तो उन्हें पतली स्ट्रोक से खींचा जा सकता है। ऐसा करने से उन्हें अधिक यथार्थवादी दिखाई देता है।
\nडिफ़ॉल्ट रूप से, लाइनें उपयोग किए जा रहे पर्स्पेक्टिव के प्रकार के आधार पर अलग-अलग तरह से खींची जाती हैं:
\nperspective()
और frustum()
यथार्थवादी पर्स्पेक्टिव को दिखते करते हैं। इन मोड में, स्ट्रोक वजन लाइन के कैमरा से दूरी से प्रभावित होता है। ऐसा करने से एक अधिक प्राकृतिक दिखावा होता है। perspective()
3D स्केच के लिए डिफ़ॉल्ट मोड है।ortho()
यथार्थवादी पर्स्पेक्टिव का अनुकरण नहीं करता है। इस मोड में, स्ट्रोक वजन लाइन की कैमरा से दूरी से बेखबर होते हैं। ऐसा करने से एक अधिक यथार्थ और सुसंगत दिखावा होता है। linePerspective()
डिफ़ॉल्ट लाइन रेंडरिंग मोड को ओवरराइड कर सकता है।
पैरामीटर enable
वैकल्पिक है। यह लाइनों को कैसे खींचा जाए, इसका एक Boolean
मान है। यदि true
पास किया जाता है, जैसे linePerspective(true)
, तो लाइनें कैमरा से दूर होने पर पतली दिखेंगी। यदि false
पास किया जाता है, जैसे linePerspective(false)
, तो लाइनों का स्ट्रोक वजन उनकी कैमरा से दूरी से बेखबर होगा। डिफ़ॉल्ट रूप से, linePerspective()
सक्षम होता है।
कोई पैरामीटर लिए बिना linePerspective()
कॉल करने पर यह true
लौटेगा यदि यह सक्षम है और false
यदि नहीं।
नोट: linePerspective()
केवल WebGL मोड में ही उपयोग किया जा सकता है।
लाइन परिप्रेक्ष्य को सक्षम करना है या नहीं।
\n"],"type":[0,"Boolean"]}]]]}],[0,{"params":[1,[]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\n// Double-click the canvas to toggle the line perspective.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A white cube with black edges on a gray background. Its edges toggle between thick and thin when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n// Toggle the line perspective when the user double-clicks.\nfunction doubleClicked() {\n let isEnabled = linePerspective();\n linePerspective(!isEnabled);\n}\n
\n\n// Double-click the canvas to toggle the line perspective.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A row of cubes with black edges on a gray background. Their edges toggle between thick and thin when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Use an orthographic projection.\n ortho();\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n\n// Toggle the line perspective when the user double-clicks.\nfunction doubleClicked() {\n let isEnabled = linePerspective();\n linePerspective(!isEnabled);\n}\n
\n3D स्केच में वर्तमान कैमरा के लिए एक ऑर्थोग्राफ़िक प्रोजेक्शन सेट करता है।
\nऑर्थोग्राफ़िक प्रोजेक्शन में, समान आकार के आकार हमेशा समान आकार दिखाई देते हैं, भले ही वे कैमरा से करीब या दूर हों।
ortho()
कैमरे की परस्पेक्टिव को बदलता है क्योंकि यह इसके दृश्य फ्रस्टम को एक काटे हुए पिरामिड से एक आयताकार प्रिज्म में बदल देता है। कैमरा फ्रस्टम के सामने रखा जाता है और फ्रस्टम की नज़दीकी और दूरी के प्लेन के बीच का सब कुछ देखता है। ortho()
के छह वैकल्पिक पैरामीटर हैं जो फ्रस्टम को परिभाषित करते हैं।
पहले चार पैरामीटर, left
, right
, bottom
, और top
, फ्रस्टम के दाएं, बाएं, नीचे और ऊपर के निर्देशांक सेट करते हैं। उदाहरण के लिए, ortho(-100, 100, 200, -200)
कॉल करना एक ऐसा फ्रस्टम बनाता है जो 200 पिक्सल चौड़ा और 400 पिक्सल ऊंचा है। डिफ़ॉल्ट रूप से, ये निर्देशांक स्केच की चौड़ाई और ऊंचाई के आधार पर सेट हैं, जैसे ortho(-width / 2, width / 2, -height / 2, height / 2)
।
आखिरी दो पैरामीटर, near
और far
, फ्रस्टम के नज़दीकी और दूर प्लेन की दूरी को कैमरे से सेट करते हैं। उदाहरण के लिए, ortho(-100, 100, 200, 200, 50, 1000)
कॉल करना एक ऐसा फ्रस्टम बनाता है जो 200 पिक्सल चौड़ा, 400 पिक्सल ऊंचा है, कैमरे से 50 पिक्सल दूर शुरू होता है और 1,000 पिक्सल दूर समाप्त होता है। डिफ़ॉल्ट रूप से, near
और far
को क्रमशः 0 और max(width, height) + 800
पर सेट किया जाता है।
नोट: ortho()
केवल WebGL मोड में उपयोग किया जा सकता है।
छिन्नक के बाएँ तल का x-निर्देशांक। डिफ़ॉल्ट -width / 2
.
छिन्नक के दाहिने तल का x-निर्देशांक। डिफ़ॉल्ट width / 2
.
y- छिन्नक के निचले तल का समन्वय। डिफ़ॉल्ट height / 2
।
छिन्नक के शीर्ष तल का y-निर्देशांक। डिफ़ॉल्ट -height / 2
.
z- छिन्नक के निकट तल का समन्वय। डिफ़ॉल्ट 0.
\n"],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"far"],"description":[0," छिन्नक के सुदूर तल का z-निर्देशांक। डिफ़ॉल्ट maximum(width, height) + 800
।
\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A row of tiny, white cubes on a gray background. All the cubes appear the same size.');\n}\n\nfunction draw() {\n background(200);\n\n // Apply an orthographic projection.\n ortho();\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n
\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white cube on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Apply an orthographic projection.\n // Center the frustum.\n // Set its width and height to 20.\n // Place its near plane 300 pixels from the camera.\n // Place its far plane 350 pixels from the camera.\n ortho(-10, 10, -10, 10, 300, 350);\n\n // Translate the origin toward the camera.\n translate(-10, 10, 600);\n\n // Rotate the coordinate system.\n rotateY(-0.1);\n rotateX(-0.1);\n\n // Draw the row of boxes.\n for (let i = 0; i < 6; i += 1) {\n translate(0, 0, -40);\n box(10);\n }\n}\n
\n3D स्केच देखने के लिए एक कैमरा का वर्णन करने वाली एक क्लास।
\n प्रत्येक p5.Camera
ऑब्जेक्ट 3D स्पेस के एक भाग को देखने वाला एक कैमरा है। यह कैमरे के स्थान, उन्मुखीकरण और प्रक्षेपण के बारे में जानकारी संग्रहीत करता है।
WebGL मोड में, डिफ़ॉल्ट कैमरा एक p5.Camera
ऑब्जेक्ट है जिसे camera(), perspective(), ortho() और frustum() फ़ंक्शन द्वारा नियंत्रित किया जा सकता है। createCamera() से अतिरिक्त कैमरे बनाए जा सकते हैं और setCamera() से सक्रिय किया जा सकता है।
ध्यान दें: p5.Camera
की मेथड दो समन्वय प्रणालियों में काम करती हैं:
myCamera.setPosition()
कॉल करके कैमरा को \"वर्ल्ड\" समन्वय का उपयोग करके 3D स्पेस में रखा जा सकता है।myCamera.move()
कॉल करके कैमरा को अपने अक्षों पर ही हिलाया जा सकता है।3D स्केच में मौजूद वर्तमान कैमरे के लिए पर्सपेक्टिव प्रोजेक्शन सेट करता है।
\nपर्सपेक्टिव प्रोजेक्शन में, कैमरे से दूर की आकृतियां कैमरे के करीब की आकृतियों की तुलना में छोटी दिखाई देती हैं। इस तकनीक को फोर्शॉर्टनिंग कहा जाता है और यह वास्तविक 3D दृश्यों को बनाता है। यह WebGL मोड में डिफ़ॉल्ट रूप से लागू होता है।
\n perspective()
कैमरे के व्यूइंग फ्रस्टम को बदलकर कैमरे की पर्सपेक्टिव को बदलता है। फ्रस्टम वह वॉल्यूम है जिसे कैमरा देख सकता है। इसका आकार एक पिरामिड होता है जिसका शीर्ष काटा गया हो। कैमरा पिरामिड के शीर्ष पर रखा जाता है और फ्रस्टम के शीर्ष (नज़दीकी) और तल (दूर) प्लेन के बीच की चीज़ों को देखता है।
पहला पैरामीटर fovy
कैमरे का अनुभवजन्य क्षेत्रीय दृश्य है। यह एक कोण है जो कैमरे की दृश्य ऊंचाई या संकीर्णता को बताता है। उदाहरण के लिए, perspective(0.5)
कॉल कैमरे का अनुभवजन्य क्षेत्रीय दृश्य को 0.5 रेडियन पर सेट करता है। डिफ़ॉल्ट रूप से, fovy
स्केच की ऊंचाई और कैमरे के डिफ़ॉल्ट z-अक्ष के आधार पर गणना किया जाता है, जो 800 है। डिफ़ॉल्ट fovy
का फार्मूला 2 * atan(height / 2 / 800)
है।
दूसरा पैरामीटर aspect
कैमरे का आस्पेक्ट रेश्यो है। यह एक संख्या है जो शीर्ष प्लेन की चौड़ाई और ऊंचाई का अनुपात बताती है। उदाहरण के लिए, perspective(0.5, 1.5)
कॉल कैमरे के दृश्य क्षेत्र को 0.5 रेडियन और आस्पेक्ट रेश्यो को 1.5 पर सेट करता है, जिससे आकृतियां वर्गाकार कैनवास पर पतली दिखेंगी। डिफ़ॉल्ट रूप से, आस्पेक्ट width / height
पर सेट होता है।
तीसरा पैरामीटर near
कैमरे से नज़दीकी प्लेन की दूरी है। उदाहरण के लिए, perspective(0.5, 1.5, 100)
कॉल कैमरे के दृश्य क्षेत्र को 0.5 रेडियन, उसके आस्पेक्ट रेश्यो को 1.5, और नज़दीकी प्लेन को कैमरे से 100 पिक्सल दूर रखता है। कैमरे से 100 पिक्सल से कम दूर बनाई गई कोई भी आकृति दृश्य में नहीं होगी। डिफ़ॉल्ट रूप से, नज़दीकी को 0.1 * 800
पर सेट किया जाता है, जो कैमरे और मूल के बीच की डिफ़ॉल्ट दूरी का 1/10 वां हिस्सा है।
चौथा पैरामीटर far
कैमरे से दूर प्लेन की दूरी है। उदाहरण के लिए, perspective(0.5, 1.5, 100, 10000)
कॉल कैमरे के दृश्य क्षेत्र को 0.5 रेडियन, उसके आस्पेक्ट रेश्यो को 1.5, नज़दीकी प्लेन को कैमरे से 100 पिक्सल दूर, और दूर प्लेन को कैमरे से 10,000 पिक्सल दूर रखता है। कैमरे से 10,000 पिक्सल से अधिक दूर बनाई गई कोई भी आकृति दृश्य में नहीं होगी। डिफ़ॉल्ट रूप से, दूर को 10 * 800
पर सेट किया जाता है, जो कैमरे और मूल के बीच की डिफ़ॉल्ट दूरी का 10 गुना है।
ध्यान दें: perspective()
का उपयोग केवल WebGL मोड में किया जा सकता है।
कैमरा फ्रुम ऊर्ध्वाधर दृश्य क्षेत्र। डिफ़ॉल्ट 2 * atan(height / 2 / 800)
.
कैमरा फ्रस्टम पहलू अनुपात। डिफ़ॉल्ट width / height
.
कैमरे से निकटतम क्लिपिंग तल तक की दूरी। डिफ़ॉल्ट 0.1 * 800
.
कैमरे से सुदूर क्लिपिंग तल तक की दूरी। डिफ़ॉल्ट 10 * 800
.
\n// Double-click to squeeze the box.\n\nlet isSqueezed = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white rectangular prism on a gray background. The box appears to become thinner when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Place the camera at the top-right.\n camera(400, -400, 800);\n\n if (isSqueezed === true) {\n // Set fovy to 0.2.\n // Set aspect to 1.5.\n perspective(0.2, 1.5);\n }\n\n // Draw the box.\n box();\n}\n\n// Change the camera's perspective when the user double-clicks.\nfunction doubleClicked() {\n isSqueezed = true;\n}\n
\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white rectangular prism on a gray background. The prism moves away from the camera until it disappears.');\n}\n\nfunction draw() {\n background(200);\n\n // Place the camera at the top-right.\n camera(400, -400, 800);\n\n // Set fovy to 0.2.\n // Set aspect to 1.5.\n // Set near to 600.\n // Set far to 1200.\n perspective(0.2, 1.5, 600, 1200);\n\n // Move the origin away from the camera.\n let x = -frameCount;\n let y = frameCount;\n let z = -2 * frameCount;\n translate(x, y, z);\n\n // Draw the box.\n box();\n}\n
\n3D स्केच का वर्तमान (सक्रिय) कैमरा सेट करता है।
\nsetCamera()
एकाधिक कैमरों के बीच स्विच करने की अनुमति देता है createCamera() के साथ बनाया गया।
ध्यान दें: setCamera()
का उपयोग केवल WebGL मोड में किया जा सकता है।
कैमरा जिसे सक्रिय किया जाना चाहिए।
\n"],"type":[0,"p5.Camera"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\n// Double-click to toggle between cameras.\n\nlet cam1;\nlet cam2;\nlet usingCam1 = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = createCamera();\n\n // Create the second camera.\n // Place it at the top-left.\n // Point it at the origin.\n cam2 = createCamera();\n cam2.setPosition(400, -400, 800);\n cam2.lookAt(0, 0, 0);\n\n // Set the current camera to cam1.\n setCamera(cam1);\n\n describe('A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the box.\n box();\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (usingCam1 === true) {\n setCamera(cam2);\n usingCam1 = false;\n } else {\n setCamera(cam1);\n usingCam1 = true;\n }\n}\n
\nआकारों के सतह के पदार्थ के आंबियंट रंग को सेट करता है।
\n ambientMaterial()
रंग ambientLight() रंग के घटकों को सेट करता है जिन्हें आकार प्रतिबिंबित करेंगे। उदाहरण के लिए, ambientMaterial(255, 255, 0)
कहने से एक आकार लाल और हरे रोशनी को प्रतिबिंबित करेगा, लेकिन नीले रोशनी को नहीं। \n
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 मोड में उपयोग किया जा सकता है।
वर्तमान colorMode() में लाल या रंग का मान।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"v2"],"description":[0,"वर्तमान colorMode() में हरा या संतृप्ति मान।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"v3"],"description":[0,"वर्तमान colorMode() में नीला, चमक, या हल्कापन मान।
\n"],"type":[0,"Number"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"gray"],"description":[0,"0 (काला) और 255 (सफ़ेद) के बीच ग्रेस्केल मान।
\n"],"type":[0,"Number"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"color"],"description":[0,"एक p5.Color ऑब्जेक्ट के रूप में रंग, रंग मानों की एक सरणी, या एक CSS स्ट्रिंग।
\n"],"type":[0,"p5.Color|Number[]|String"]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,true],"example":[1,[[0,"\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A magenta cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Draw the box.\n box();\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A purple cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Add a dark gray ambient material.\n ambientMaterial(150);\n\n // Draw the box.\n box();\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Add a yellow ambient material using RGB values.\n ambientMaterial(255, 255, 0);\n\n // Draw the box.\n box();\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Add a yellow ambient material using a p5.Color object.\n let c = color(255, 255, 0);\n ambientMaterial(c);\n\n // Draw the box.\n box();\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a magenta ambient light.\n ambientLight(255, 0, 255);\n\n // Add a yellow ambient material using a color string.\n ambientMaterial('yellow');\n\n // Draw the box.\n box();\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A yellow cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white ambient light.\n ambientLight(255, 255, 255);\n\n // Add a yellow ambient material using a color string.\n ambientMaterial('yellow');\n\n // Draw the box.\n box();\n}\n
\nfilter() फ़ंक्शन के साथ उपयोग करने के लिए एक p5.Shader ऑब्जेक्ट बनाता है।
\n createFilterShader()
createShader() की तरह काम करता है, लेकिन एक डिफ़ॉल्ट वर्टेक्स शेडर शामिल होता है। createFilterShader()
का इरादा filter() के साथ उपयोग करने के लिए है जिससे किसी कैनवास के कंटेंट्स को फ़िल्टर किया जा सके। एक फ़िल्टर शेडर पूरे कैनवास पर लागू होगा, न कि केवल p5.Geometry ऑब्जेक्ट्स पर।
पैरामीटर, fragSrc
, फ्रैग्मेंट शेडर को सेट करता है। यह एक स्ट्रिंग है जो GLSL में लिखे फ्रैग्मेंट शेडर प्रोग्राम को कंटेन करता है।
बने हुए p5.Shader ऑब्जेक्ट में कुछ यूनिफॉर्म्स हैं जो सेट किए जा सकते हैं:
\nsampler2D tex0
, जो कैनवास कंटेंट्स को एक टेक्सचर के रूप में कंटेन करता है।vec2 canvasSize
, जो कैनवास की चौड़ाई और ऊंचाई है, पिक्सल घनत्व को छोड़कर।vec2 texelSize
, जो एक भौतिक पिक्सल का आकार है जिसमें पिक्सल घनत्व शामिल है। यह 1.0 / (width * density)
के लिए पिक्सल चौड़ाई और 1.0 / (height * density)
के लिए पिक्सल ऊंचाई के रूप में गणना की जाती है। बने हुए p5.Shader में varying vec2 vTexCoord
भी प्रदान किया जाता है, जिसमें 0 और 1 के बीच के मूल्य होते हैं। vTexCoord
बताता है कि पिक्सल कैनवास पर कहाँ खींचा जाएगा।
फ़िल्टर और शेडर के बारे में अधिक जानकारी के लिए, Adam Ferriss के शेडर उदाहरण रिपो या शेडर का परिचय ट्यूटोरियल देखें।
\n"],"line":[0,429],"params":[1,[[0,{"name":[0,"fragSrc"],"description":[0,"फ्रैगमेंट शेडर के लिए स्रोत कोड।
\n"],"type":[0,"String"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"फ़्रैगमेंट शेडर से नया शेडर ऑब्जेक्ट बनाया गया।"],"type":[0,"p5.Shader"]}],"example":[1,[[0,"\n\nfunction setup() {\n let fragSrc = `precision highp float;\n void main() {\n gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);\n }`;\n\n createCanvas(100, 100, WEBGL);\n let s = createFilterShader(fragSrc);\n filter(s);\n describe('a yellow canvas');\n}\n
\n\nlet img, s;\nfunction preload() {\n img = loadImage('/assets/bricks.jpg');\n}\nfunction setup() {\n let fragSrc = `precision highp float;\n\n // x,y coordinates, given from the vertex shader\n varying vec2 vTexCoord;\n\n // the canvas contents, given from filter()\n uniform sampler2D tex0;\n // other useful information from the canvas\n uniform vec2 texelSize;\n uniform vec2 canvasSize;\n // a custom variable from this sketch\n uniform float darkness;\n\n void main() {\n // get the color at current pixel\n vec4 color = texture2D(tex0, vTexCoord);\n // set the output color\n color.b = 1.0;\n color *= darkness;\n gl_FragColor = vec4(color.rgb, 1.0);\n }`;\n\n createCanvas(100, 100, WEBGL);\n s = createFilterShader(fragSrc);\n}\nfunction draw() {\n image(img, -50, -50);\n s.setUniform('darkness', 0.5);\n filter(s);\n describe('a image of bricks tinted dark blue');\n}\n
\nएक नया p5.Shader ऑब्जेक्ट बनाता है।
\nशेडर ग्राफ़िक्स प्रोसेसिंग यूनिट (GPU) पर चलने वाले प्रोग्राम हैं। वे एक साथ कई पिक्सल प्रोसेस कर सकते हैं, जिससे वे कई ग्राफ़िक्स कार्यों के लिए तेज हो जाते हैं। वे GLSL नामक भाषा में लिखे जाते हैं और स्केच में अन्य कोड के साथ चलते हैं।
एक बार जब p5.Shader ऑब्जेक्ट बन जाता है, तो इसका उपयोग shader() फ़ंक्शन के साथ किया जा सकता है, जैसे shader(myShader)
। एक शेडर प्रोग्राम दो भागों से मिलकर बनता है, एक वर्टेक्स शेडर और एक फ्रैग्मेंट शेडर। वर्टेक्स शेडर 3D ज्यामिति को स्क्रीन पर कहाँ रेंडर किया जाता है, प्रभावित करता है और फ्रैग्मेंट शेडर रंग को प्रभावित करता है।
पहला पैरामीटर, vertSrc
, वर्टेक्स शेडर को सेट करता है। यह एक स्ट्रिंग है जो GLSL में लिखे वर्टेक्स शेडर प्रोग्राम को कंटेन करता है।
दूसरा पैरामीटर, fragSrc
, फ्रैग्मेंट शेडर को सेट करता है। यह एक स्ट्रिंग है जो GLSL में लिखे फ्रैग्मेंट शेडर प्रोग्राम को कंटेन करता है।
नोट: केवल फ़िल्टर शेडर ही 2D मोड में उपयोग किए जा सकते हैं। सभी शेडर WebGL मोड में उपयोग किए जा सकते हैं।
\n"],"line":[0,173],"params":[1,[[0,{"name":[0,"vertSrc"],"description":[0,"वर्टेक्स शेडर के लिए स्रोत कोड।
\n"],"type":[0,"String"]}],[0,{"name":[0,"fragSrc"],"description":[0,"फ्रैगमेंट शेडर के लिए स्रोत कोड।
\n"],"type":[0,"String"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"वर्टेक्स और फ्रैगमेंट शेडर्स से बनाया गया नया शेडर ऑब्जेक्ट।"],"type":[0,"p5.Shader"]}],"example":[1,[[0,"\n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\n\nvoid main() {\n // Set each pixel's RGBA value to yellow.\n gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n let shaderProgram = createShader(vertSrc, fragSrc);\n\n // Compile and apply the p5.Shader object.\n shader(shaderProgram);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n\n describe('A yellow square.');\n}\n
\n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\nuniform vec2 p;\nuniform float r;\nconst int numIterations = 500;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 c = p + gl_FragCoord.xy * r;\n vec2 z = c;\n float n = 0.0;\n\n for (int i = numIterations; i > 0; i--) {\n if (z.x * z.x + z.y * z.y > 4.0) {\n n = float(i) / float(numIterations);\n break;\n }\n z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;\n }\n\n gl_FragColor = vec4(\n 0.5 - cos(n * 17.0) / 2.0,\n 0.5 - cos(n * 13.0) / 2.0,\n 0.5 - cos(n * 23.0) / 2.0,\n 1.0\n );\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n let mandelbrot = createShader(vertSrc, fragSrc);\n\n // Compile and apply the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n // p is the center point of the Mandelbrot image.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n // Set the shader uniform r to 0.005.\n // r is the size of the image in Mandelbrot-space.\n mandelbrot.setUniform('r', 0.005);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n\n describe('A black fractal image on a magenta background.');\n}\n
\n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\nuniform vec2 p;\nuniform float r;\nconst int numIterations = 500;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 c = p + gl_FragCoord.xy * r;\n vec2 z = c;\n float n = 0.0;\n\n for (int i = numIterations; i > 0; i--) {\n if (z.x * z.x + z.y * z.y > 4.0) {\n n = float(i) / float(numIterations);\n break;\n }\n\n z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;\n }\n\n gl_FragColor = vec4(\n 0.5 - cos(n * 17.0) / 2.0,\n 0.5 - cos(n * 13.0) / 2.0,\n 0.5 - cos(n * 23.0) / 2.0,\n 1.0\n );\n}\n`;\n\nlet mandelbrot;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n mandelbrot = createShader(vertSrc, fragSrc);\n\n // Apply the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n // p is the center point of the Mandelbrot image.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n describe('A fractal image zooms in and out of focus.');\n}\n\nfunction draw() {\n // Set the shader uniform r to a value that oscillates\n // between 0 and 0.005.\n // r is the size of the image in Mandelbrot-space.\n let radius = 0.005 * (sin(frameCount * 0.01) + 1);\n mandelbrot.setUniform('r', radius);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n}\n
\nआकृतियों की सतह सामग्री का उत्सर्जक रंग सेट करता है।
\nemissiveMaterial()
रंग एक रंग आकार प्रदर्शित करता है पूरी ताकत पर, प्रकाश व्यवस्था की परवाह किए बिना। इससे ऐसा प्रतीत हो सकता है कि एक आकार चमक रहा है। हालाँकि, उत्सर्जक सामग्री वास्तव में प्रकाश उत्सर्जित नहीं करती है जो आसपास की वस्तुओं को प्रभावित कर सकती है।
emissiveMaterial()
को सामग्री का रंग सेट करने के लिए विभिन्न पैरामीटर्स के साथ तीन तरीकों से बुलाया जा सकता है।
emissiveMaterial()
को कॉल करने का पहला तरीका एक पैरामीटर gray
है। 0 और 255 के बीच ग्रेस्केल मान, जैसे emissiveMaterial(50)
में, सामग्री का रंग सेट करने के लिए पास किया जा सकता है। उच्च ग्रेस्केल मान आकृतियों को उज्ज्वल दिखाते हैं।
emissiveMaterial()
को कॉल करने का दूसरा तरीका एक पैरामीटर color
है। एक p5.Color ऑब्जेक्ट, रंग मानों का एक ऐरे, या एक CSS रंग स्ट्रिंग, जैसे emissiveMaterial('magenta')
, सामग्री का रंग सेट करने के लिए पास किया जा सकता है।
emissiveMaterial()
को कॉल करने का तीसरा तरीका चार पैरामीटर v1
, v2
, v3
, और alpha
है। alpha
वैकल्पिक है। RGBA, HSBA, या HSLA मान सामग्री के रंग सेट करने के लिए पास किए जा सकते हैं, जैसे emissiveMaterial(255, 0, 0)
या emissiveMaterial(255, 0, 0, 30)
। रंग मान वर्तमान colorMode() का उपयोग करके व्याख्या किए जाएंगे।
नोट: emissiveMaterial()
केवल WebGL मोड में उपयोग किया जा सकता है।
वर्तमान colorMode() में लाल या रंग का मान।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"v2"],"description":[0,"वर्तमान colorMode() में हरा या संतृप्ति मान।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"v3"],"description":[0,"वर्तमान colorMode() में नीला, चमक, या हल्कापन मान।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"alpha"],"description":[0,"वर्तमान में अल्फा मान colorMode()।
\n"],"type":[0,"Number"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"gray"],"description":[0,"0 (काला) और 255 (सफ़ेद) के बीच ग्रेस्केल मान।
\n"],"type":[0,"Number"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"color"],"description":[0,"एक p5.Color ऑब्जेक्ट के रूप में रंग, रंग मानों की एक सरणी, या एक CSS स्ट्रिंग।
\n"],"type":[0,"p5.Color|Number[]|String"]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,true],"example":[1,[[0,"\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red cube drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white ambient light.\n ambientLight(255, 255, 255);\n\n // Add a red emissive material using RGB values.\n emissiveMaterial(255, 0, 0);\n\n // Draw the box.\n box();\n}\n
\nगेड एवं पिक्सेल शेडरों को लोड करके एक p5.Shader ऑब्जेक्ट बनाता है।
\nशेडर वह प्रोग्राम हैं जो ग्राफ़िक्स प्रोसेसिंग यूनिट (GPU) पर चलते हैं। वे एक ही समय में कई पिक्सेल प्रोसेस कर सकते हैं, जिससे वे कई ग्राफ़िक कार्यों के लिए तेज हो जाते हैं। वे GLSL नामक भाषा में लिखे जाते हैं और स्केच में शेष कोड के साथ चलते हैं।
\n एक बार p5.Shader ऑब्जेक्ट बना लिया गया, तो इसका उपयोग shader() फ़ंक्शन के साथ किया जा सकता है, जैसे shader(myShader)
। एक शेडर प्रोग्राम दो फ़ाइलों से बना होता है, एक गेड शेडर और एक पिक्सेल शेडर। गेड शेडर स्क्रीन पर 3D ज्यामिति के रेंडरिंग को प्रभावित करता है और पिक्सेल शेडर रंग को प्रभावित करता है।
loadShader()
.vert
और .frag
फ़ाइलों से गेड और पिक्सेल शेडर लोड करता है। उदाहरण के लिए, loadShader('/assets/shader.vert', '/assets/shader.frag')
कॉल करना दोनों आवश्यक शेडर लोड करता है और एक p5.Shader ऑब्जेक्ट लौटाता है।
तीसरा पैरामीटर, successCallback
, वैकल्पिक है। यदि कोई फ़ंक्शन पास किया जाता है, तो शेडर लोड होने के बाद इसे कॉल किया जाएगा। कॉलबैक फ़ंक्शन नए p5.Shader ऑब्जेक्ट का उपयोग कर सकता है।
चौथा पैरामीटर, failureCallback
, भी वैकल्पिक है। यदि कोई फ़ंक्शन पास किया जाता है, तो यदि शेडर लोड करना असफल हो जाता है तो इसे कॉल किया जाएगा। कॉलबैक फ़ंक्शन त्रुटि इवेंट का उपयोग कर सकता है।
शेडर लोड करने में समय लग सकता है। preload() में loadShader()
कॉल करने से यह सुनिश्चित हो जाता है कि शेडर setup() या draw() में उपयोग किए जाने से पहले लोड हो जाएं।
नोट: शेडर केवल WebGL मोड में ही उपयोग किए जा सकते हैं।
\n"],"line":[0,12],"params":[1,[[0,{"name":[0,"vertFilename"],"description":[0,"लोड किए जाने वाले वर्टेक्स शेडर का पथ।
\n"],"type":[0,"String"]}],[0,{"name":[0,"fragFilename"],"description":[0,"लोड किए जाने वाले फ़्रैगमेंट शेडर का पथ।
\n"],"type":[0,"String"]}],[0,{"name":[0,"successCallback"],"description":[0,"शेडर लोड होने के बाद कॉल करने का फ़ंक्शन। p5.Shader ऑब्जेक्ट को पास किया जा सकता है।
\n"],"type":[0,"Function"],"optional":[0,true]}],[0,{"name":[0,"failureCallback"],"description":[0,"यदि शेडर लोड होने में विफल रहता है तो कॉल करने का कार्य। एक Error
ईवेंट ऑब्जेक्ट पारित किया जा सकता है।
\n// Note: A \"uniform\" is a global variable within a shader program.\n\nlet mandelbrot;\n\n// Load the shader and create a p5.Shader object.\nfunction preload() {\n mandelbrot = loadShader('/assets/shader.vert', '/assets/shader.frag');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Compile and apply the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n // Set the shader uniform r to the value 1.5.\n mandelbrot.setUniform('r', 1.5);\n\n // Add a quad as a display surface for the shader.\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n\n describe('A black fractal image on a magenta background.');\n}\n
\n\n// Note: A \"uniform\" is a global variable within a shader program.\n\nlet mandelbrot;\n\n// Load the shader and create a p5.Shader object.\nfunction preload() {\n mandelbrot = loadShader('/assets/shader.vert', '/assets/shader.frag');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Use the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n describe('A fractal image zooms in and out of focus.');\n}\n\nfunction draw() {\n // Set the shader uniform r to a value that oscillates between 0 and 2.\n mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);\n\n // Add a quad as a display surface for the shader.\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n
\nspecularMaterial() की \"धातुत्व\" की मात्रा को सेट करता है।
\n metalness()
सामग्रियों को अधिक धातुमय दिख सकता है। यह सामग्रियों द्वारा प्रकाश स्रोतों की प्रतिध्वनि को प्रभावित करता है, जिनमें शामिल हैं: directionalLight(), pointLight(), spotLight(), और imageLight()।
पैरामीटर metallic
एक संख्या है जो धातुत्व की मात्रा को सेट करता है। metallic
1 से अधिक होना चाहिए, जो इसका डिफ़ॉल्ट मान है। उच्च मान, जैसे metalness(100)
, आभासी सामग्रियों को अधिक धातुमय दिखाते हैं।
धातुत्व की मात्रा.
\n"],"type":[0,"Number"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Two blue spheres drawn on a gray background. White light reflects from their surfaces as the mouse moves. The right sphere is more metallic than the left sphere.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Turn on an ambient light.\n ambientLight(200);\n\n // Get the mouse's coordinates.\n let mx = mouseX - 50;\n let my = mouseY - 50;\n\n // Turn on a white point light that follows the mouse.\n pointLight(255, 255, 255, mx, my, 50);\n\n // Style the spheres.\n noStroke();\n fill(30, 30, 255);\n specularMaterial(255);\n shininess(20);\n\n // Draw the left sphere with low metalness.\n translate(-25, 0, 0);\n metalness(1);\n sphere(20);\n\n // Draw the right sphere with high metalness.\n translate(50, 0, 0);\n metalness(50);\n sphere(20);\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nlet img;\n\nfunction preload() {\n img = loadImage('/assets/outdoor_spheremap.jpg');\n}\n\nfunction setup() {\n createCanvas(100 ,100 ,WEBGL);\n\n describe(\n 'Two spheres floating above a landscape. The surface of the spheres reflect the landscape. The right sphere is more reflective than the left sphere.'\n );\n}\n\nfunction draw() {\n // Add the panorama.\n panorama(img);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Use the image as a light source.\n imageLight(img);\n\n // Style the spheres.\n noStroke();\n specularMaterial(50);\n shininess(200);\n\n // Draw the left sphere with low metalness.\n translate(-25, 0, 0);\n metalness(1);\n sphere(20);\n\n // Draw the right sphere with high metalness.\n translate(50, 0, 0);\n metalness(50);\n sphere(20);\n}\n
\nवर्तमान सामग्री को सामान्य सामग्री के रूप में सेट करता है।
\nएक सामान्य सामग्री x-अक्ष की ओर वाली सतहों को लाल, y-अक्ष की ओर वाली सतहों को हरा और z-अक्ष की ओर वाली सतहों को नीला कर देती है। सामान्य सामग्री प्रकाश से प्रभावित नहीं होती है। इसे अक्सर प्लेसहोल्डर सामग्री के रूप में उपयोग किया जाता है डिबगिंग.
\nध्यान दें: normalMaterial()
का उपयोग केवल WebGL मोड में किया जा सकता है।
\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A multicolor torus drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the torus.\n normalMaterial();\n\n // Draw the torus.\n torus(30);\n}\n
\nडिफ़ॉल्ट शेडर्स को पुनर्स्थापित करता है।
\n\nresetShader()
shader() द्वारा पहले लागू किए गए किसी भी शेडर को निष्क्रिय कर देता है।
ध्यान दें: शेडर्स का उपयोग केवल WebGL मोड में किया जा सकता है।
\n"],"line":[0,773],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,true],"example":[1,[[0,"\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nuniform mat4 uProjectionMatrix;\nuniform mat4 uModelViewMatrix;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 position = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * position;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 uv = vTexCoord;\n vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));\n gl_FragColor = vec4(color, 1.0);\n}\n`;\n\nlet myShader;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n myShader = createShader(vertSrc, fragSrc);\n\n describe(\n 'Two rotating cubes on a gray background. The left one has a blue-purple gradient on each face. The right one is red.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw a box using the p5.Shader.\n // shader() sets the active shader to myShader.\n shader(myShader);\n push();\n translate(-25, 0, 0);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n box(width / 4);\n pop();\n\n // Draw a box using the default fill shader.\n // resetShader() restores the default fill shader.\n resetShader();\n fill(255, 0, 0);\n push();\n translate(25, 0, 0);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n box(width / 4);\n pop();\n}\n
\nचित्रण के दौरान लागू करने के लिए p5.Shader ऑब्जेक्ट को सेट करता है।
\nशेडर ग्राफिक्स प्रोसेसिंग यूनिट (GPU) पर चलने वाले कार्यक्रम हैं। वे एक साथ कई पिक्सेल या रिक्तियों को प्रोसेस कर सकते हैं, जिससे कई ग्राफिक्स कार्यों के लिए वे तेज होते हैं। उन्हें GLSL नामक भाषा में लिखा जाता है और वे स्केच में शेष कोड के साथ चलते हैं। p5.Shader ऑब्जेक्ट को createShader() और loadShader() फ़ंक्शन का उपयोग करके बनाया जा सकता है।
\n पैरामीटर s
लागू करने के लिए p5.Shader ऑब्जेक्ट है। उदाहरण के लिए, shader(myShader)
कॉल कैनवास पर प्रत्येक पिक्सेल को प्रोसेस करने के लिए myShader
को लागू करता है। शेडर का उपयोग किया जाएगा:
sampler2D
यूनिफॉर्म शामिल है, तो भरण के लिए।aNormal
विशेषता शामिल है, या यदि इसमें निम्नलिखित में से कोई भी यूनिफॉर्म शामिल हैं: \n\n uUseLighting
, \n uAmbientLightCount
, \n uDirectionalLightCount
, \n uPointLightCount
, \n uAmbientColor
, \n uDirectionalDiffuseColors
, \n uDirectionalSpecularColors
, \n uPointLightLocation
, \n uPointLightDiffuseColors
, \n uPointLightSpecularColors
, \n uLightingDirection
, या uSpecular
।uStrokeWeight
यूनिफॉर्म शामिल है, तो स्ट्रोक के लिए। p5.Shader ऑब्जेक्ट के फ्रैग्मेंट और वर्टेक्स शेडर का स्रोत कोड पहली बार shader()
को पास किए जाने पर कंपाइल किया जाएगा। शेडर कंपाइलिंग के बारे में अधिक जानकारी के लिए MDN देखें।
resetShader() कॉल करके किसी स्केच के डिफ़ॉल्ट शेडर को पुनर्स्थापित किया जा सकता है।
\nध्यान दें: शेडर केवल WebGL मोड में ही उपयोग किए जा सकते हैं।
\n"],"line":[0,571],"params":[1,[[0,{"name":[0,"s"],"description":[0,"p5.Shader लागू करने योग्य वस्तु।
\n"],"type":[0,"p5.Shader"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,true],"example":[1,[[0,"\n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\n\nvoid main() {\n // Set each pixel's RGBA value to yellow.\n gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n let shaderProgram = createShader(vertSrc, fragSrc);\n\n // Apply the p5.Shader object.\n shader(shaderProgram);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n\n describe('A yellow square.');\n}\n
\n\n// Note: A \"uniform\" is a global variable within a shader program.\n\nlet mandelbrot;\n\n// Load the shader and create a p5.Shader object.\nfunction preload() {\n mandelbrot = loadShader('/assets/shader.vert', '/assets/shader.frag');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Use the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n describe('A fractal image zooms in and out of focus.');\n}\n\nfunction draw() {\n // Set the shader uniform r to a value that oscillates between 0 and 2.\n mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);\n\n // Add a quad as a display surface for the shader.\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n
\n\n// Note: A \"uniform\" is a global variable within a shader program.\n\nlet redGreen;\nlet orangeBlue;\nlet showRedGreen = false;\n\n// Load the shader and create two separate p5.Shader objects.\nfunction preload() {\n redGreen = loadShader('/assets/shader.vert', '/assets/shader-gradient.frag');\n orangeBlue = loadShader('/assets/shader.vert', '/assets/shader-gradient.frag');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Initialize the redGreen shader.\n shader(redGreen);\n\n // Set the redGreen shader's center and background color.\n redGreen.setUniform('colorCenter', [1.0, 0.0, 0.0]);\n redGreen.setUniform('colorBackground', [0.0, 1.0, 0.0]);\n\n // Initialize the orangeBlue shader.\n shader(orangeBlue);\n\n // Set the orangeBlue shader's center and background color.\n orangeBlue.setUniform('colorCenter', [1.0, 0.5, 0.0]);\n orangeBlue.setUniform('colorBackground', [0.226, 0.0, 0.615]);\n\n describe(\n 'The scene toggles between two circular gradients when the user double-clicks. An orange and blue gradient vertically, and red and green gradient moves horizontally.'\n );\n}\n\nfunction draw() {\n // Update the offset values for each shader.\n // Move orangeBlue vertically.\n // Move redGreen horizontally.\n orangeBlue.setUniform('offset', [0, sin(frameCount * 0.01) + 1]);\n redGreen.setUniform('offset', [sin(frameCount * 0.01), 1]);\n\n if (showRedGreen === true) {\n shader(redGreen);\n } else {\n shader(orangeBlue);\n }\n\n // Style the drawing surface.\n noStroke();\n\n // Add a quad as a drawing surface.\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n\n// Toggle between shaders when the user double-clicks.\nfunction doubleClicked() {\n showRedGreen = !showRedGreen;\n}\n
\nएक specularMaterial() की चमक (\"चमक\") की मात्रा निर्धारित करता है।
\nचमकदार सामग्री कुंद सामग्री की तुलना में परावर्तित प्रकाश पर अधिक ध्यान केंद्रित करती है। shine()
सामग्री के प्रकाश स्रोतों को प्रतिबिंबित करने के तरीके को प्रभावित करता है जिसमें directionalLight(), पॉइंटलाइट(), और स्पॉटलाइट()।
पैरामीटर, shine
, एक संख्या है जो चमक की मात्रा निर्धारित करती है। shine
1 से अधिक होना चाहिए, जो इसका डिफ़ॉल्ट मान है।
चमक की मात्रा.
\n"],"type":[0,"Number"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,true],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Two red spheres drawn on a gray background. White light reflects from their surfaces as the mouse moves. The right sphere is shinier than the left sphere.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Turn on a red ambient light.\n ambientLight(255, 0, 0);\n\n // Get the mouse's coordinates.\n let mx = mouseX - 50;\n let my = mouseY - 50;\n\n // Turn on a white point light that follows the mouse.\n pointLight(255, 255, 255, mx, my, 50);\n\n // Style the sphere.\n noStroke();\n\n // Add a specular material with a grayscale value.\n specularMaterial(255);\n\n // Draw the left sphere with low shininess.\n translate(-25, 0, 0);\n shininess(10);\n sphere(20);\n\n // Draw the right sphere with high shininess.\n translate(50, 0, 0);\n shininess(100);\n sphere(20);\n}\n
\nचित्रों की सतह के पदार्थ के चमकदार रंग को सेट करता है।
specularMaterial()
रंग, प्रकाश के उन घटकों को सेट करता है जो चमकीले कोट वाले आकारों को प्रतिबिंबित करेंगे। उदाहरण के लिए, specularMaterial(255, 255, 0)
कॉल करने से एक आकार लाल और हरे प्रकाश को प्रतिबिंबित करेगा, लेकिन नीला प्रकाश नहीं।
ambientMaterial() से विपरीत, specularMaterial()
directionalLight(), pointLight(), और spotLight() सहित प्रकाश स्रोतों के पूर्ण रंग को प्रतिबिंबित करेगा। यही उन्हें \"चमकीला\" दिखने देता है। पदार्थ की चमक shininess() कार्य से नियंत्रित की जा सकती है।
specularMaterial()
को पदार्थ के रंग को सेट करने के लिए तीन तरीकों से कॉल किया जा सकता है।
पहला तरीका specularMaterial()
को कॉल करने में एक पैरामीटर, gray
होता है। 0 और 255 के बीच के ग्रेस्केल मान, जैसे specularMaterial(50)
, पदार्थ के रंग को सेट करने के लिए पास किए जा सकते हैं। उच्च ग्रेस्केल मान आकारों को बहुत चमकदार दिखाते हैं।
दूसरा तरीका specularMaterial()
को कॉल करने में एक पैरामीटर, color
होता है। p5.Color ऑब्जेक्ट, रंग मानों का एक एरे, या CSS रंग स्ट्रिंग, जैसे specularMaterial('magenta')
, पदार्थ के रंग को सेट करने के लिए पास की जा सकती हैं।
तीसरा तरीका specularMaterial()
को कॉल करने में चार पैरामीटर होते हैं, v1
, v2
, v3
, और alpha
। alpha
वैकल्पिक है। RGBA, HSBA, या HSLA मान, जैसे specularMaterial(255, 0, 0)
या specularMaterial(255, 0, 0, 30)
, पदार्थ के रंगों को सेट करने के लिए पास किए जा सकते हैं। वर्तमान colorMode() का उपयोग करके रंग मान व्याख्या किए जाएंगे।
0 (काला) और 255 (सफ़ेद) के बीच ग्रेस्केल मान।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"alpha"],"description":[0,"वर्तमान में अल्फा मान colorMode().
\n"],"type":[0,"Number"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"v1"],"description":[0,"वर्तमान colorMode() में लाल या रंग का मान।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"v2"],"description":[0,"वर्तमान colorMode() में हरा या संतृप्ति मान।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"v3"],"description":[0,"वर्तमान colorMode() में नीला, चमक, या हल्कापन मान।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"alpha"],"description":[0,""],"type":[0,"Number"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"color"],"description":[0,"एक p5.Color ऑब्जेक्ट के रूप में रंग, रंग मानों की एक सरणी, या एक CSS स्ट्रिंग।
\n"],"type":[0,"p5.Color|Number[]|String"]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,true],"example":[1,[[0,"\n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to apply a specular material.\n\nlet isGlossy = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A red torus drawn on a gray background. It becomes glossy when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white point light at the top-right.\n pointLight(255, 255, 255, 30, -40, 30);\n\n // Add a glossy coat if the user has double-clicked.\n if (isGlossy === true) {\n specularMaterial(255);\n shininess(50);\n }\n\n // Style the torus.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the torus.\n torus(30);\n}\n\n// Make the torus glossy when the user double-clicks.\nfunction doubleClicked() {\n isGlossy = true;\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to apply a specular material.\n\nlet isGlossy = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white point light at the top-right.\n pointLight(255, 255, 255, 30, -40, 30);\n\n // Add a glossy green coat if the user has double-clicked.\n if (isGlossy === true) {\n specularMaterial(0, 255, 0);\n shininess(50);\n }\n\n // Style the torus.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the torus.\n torus(30);\n}\n\n// Make the torus glossy when the user double-clicks.\nfunction doubleClicked() {\n isGlossy = true;\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to apply a specular material.\n\nlet isGlossy = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white point light at the top-right.\n pointLight(255, 255, 255, 30, -40, 30);\n\n // Add a glossy green coat if the user has double-clicked.\n if (isGlossy === true) {\n // Create a p5.Color object.\n let c = color('green');\n specularMaterial(c);\n shininess(50);\n }\n\n // Style the torus.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the torus.\n torus(30);\n}\n\n// Make the torus glossy when the user double-clicks.\nfunction doubleClicked() {\n isGlossy = true;\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to apply a specular material.\n\nlet isGlossy = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on a white point light at the top-right.\n pointLight(255, 255, 255, 30, -40, 30);\n\n // Add a glossy green coat if the user has double-clicked.\n if (isGlossy === true) {\n specularMaterial('#00FF00');\n shininess(50);\n }\n\n // Style the torus.\n noStroke();\n fill(255, 0, 0);\n\n // Draw the torus.\n torus(30);\n}\n\n// Make the torus glossy when the user double-clicks.\nfunction doubleClicked() {\n isGlossy = true;\n}\n
\nआकृतियों पर उपयोग किए जाने वाले टेक्सचर को सेट करता है।
\n टेक्सचर एक ऐसी स्किन की तरह है जो आकृति के चारों ओर लपेटी होती है। texture()
built-in आकृतियों जैसे square() और sphere() के साथ काम करता है, और buildGeometry() जैसे फ़ंक्शनों द्वारा बनाई गई कस्टम आकृतियों के साथ भी काम करता है। beginShape() द्वारा बनाई गई ज्यामिति को टेक्सचर देने के लिए, प्रत्येक vertex() कॉल में uv समन्वय पास करने होंगे।
पैरामीटर tex
, लागू करने के लिए टेक्सचर है। texture()
छवियों, वीडियो और ऑफ़-स्क्रीन रेंडरर जैसे p5.Graphics और p5.Framebuffer ऑब्जेक्ट सहित कई स्रोतों का उपयोग कर सकता है।
beginShape() द्वारा बनाई गई ज्यामिति को टेक्सचर देने के लिए, आपको vertex() में uv समन्वय निर्दिष्ट करने होंगे।
\n ध्यान दें: texture()
का उपयोग केवल WebGL मोड में किया जा सकता है।
बनावट के रूप में उपयोग करने के लिए मीडिया।
\n"],"type":[0,"p5.Image|p5.MediaElement|p5.Graphics|p5.Texture|p5.Framebuffer|p5.FramebufferTexture"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,true],"example":[1,[[0,"\n\nlet img;\n\n// Load an image and create a p5.Image object.\nfunction preload() {\n img = loadImage('/assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A spinning cube with an image of a ceiling on each face.');\n}\n\nfunction draw() {\n background(0);\n\n // Rotate around the x-, y-, and z-axes.\n rotateZ(frameCount * 0.01);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n\n // Apply the image as a texture.\n texture(img);\n\n // Draw the box.\n box(50);\n}\n
\n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Graphics object.\n pg = createGraphics(100, 100);\n\n // Draw a circle to the p5.Graphics object.\n pg.background(200);\n pg.circle(50, 50, 30);\n\n describe('A spinning cube with circle at the center of each face.');\n}\n\nfunction draw() {\n background(0);\n\n // Rotate around the x-, y-, and z-axes.\n rotateZ(frameCount * 0.01);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n\n // Apply the p5.Graphics object as a texture.\n texture(pg);\n\n // Draw the box.\n box(50);\n}\n
\n\nlet vid;\n\n// Load a video and create a p5.MediaElement object.\nfunction preload() {\n vid = createVideo('/assets/fingers.mov');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Hide the video.\n vid.hide();\n\n // Set the video to loop.\n vid.loop();\n\n describe('A rectangle with video as texture');\n}\n\nfunction draw() {\n background(0);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Apply the video as a texture.\n texture(vid);\n\n // Draw the rectangle.\n rect(-40, -40, 80, 80);\n}\n
\n\nlet vid;\n\n// Load a video and create a p5.MediaElement object.\nfunction preload() {\n vid = createVideo('/assets/fingers.mov');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Hide the video.\n vid.hide();\n\n // Set the video to loop.\n vid.loop();\n\n describe('A rectangle with video as texture');\n}\n\nfunction draw() {\n background(0);\n\n // Rotate around the y-axis.\n rotateY(frameCount * 0.01);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Apply the video as a texture.\n texture(vid);\n\n // Draw a custom shape using uv coordinates.\n beginShape();\n vertex(-40, -40, 0, 0);\n vertex(40, -40, 1, 0);\n vertex(40, 40, 1, 1);\n vertex(-40, 40, 0, 1);\n endShape();\n}\n
\nकस्टम आकारों पर पाठ्यवस्तुओं को लागू करते समय उपयोग की जाने वाली निर्देशांक प्रणाली को बदलता है।
\ntexture() को काम करने के लिए, एक आकार को अपनी सतह के बिंदुओं को एक छवि के पिक्सेलों से मैप करने की आवश्यकता होती है। rect() और box() जैसे बिल्ट-इन आकारों में इन पाठ्यवस्तु मैपिंग्स को उनके शीर्षों के आधार पर पहले से मौजूद होता है। vertex() के साथ बनाए गए कस्टम आकारों के लिए, पाठ्यवस्तु मैपिंग्स को uv निर्देशांकों के रूप में पास की जानी चाहिए।
vertex() को प्रत्येक कॉल में 5 आर्गुमेंट होने चाहिए, जैसे vertex(x, y, z, u, v)
, ताकि (x, y, z)
निर्देशांकों पर मौजूद शीर्ष को किसी छवि में (u, v)
निर्देशांकों पर मौजूद पिक्सेल से मैप किया जा सके। उदाहरण के लिए, एक आयतकार छवि के कोनों को डिफ़ॉल्ट रूप से एक आयत के कोनों से मैप किया जाता है:
\n// Apply the image as a texture.\ntexture(img);\n// Draw the rectangle.\nrect(0, 0, 30, 50);\n
\nयदि उपरोक्त कोड स्निपेट में छवि का आयाम 300 x 500 पिक्सेल है, तो समान परिणाम निम्नानुसार प्राप्त किया जा सकता है:
\n\n// Apply the image as a texture.\ntexture(img);\n// Draw the rectangle.\nbeginShape();
\n// Top-left.\n// u: 0, v: 0\nvertex(0, 0, 0, 0, 0);
\n// Top-right.\n// u: 300, v: 0\nvertex(30, 0, 0, 300, 0);
\n// Bottom-right.\n// u: 300, v: 500\nvertex(30, 50, 0, 300, 500);
\n// Bottom-left.\n// u: 0, v: 500\nvertex(0, 50, 0, 0, 500);
\nendShape();\n
\ntextureMode()
यूवी निर्देशांकों के लिए निर्देशांक प्रणाली को बदलता है।
पैरामीटर mode
दो संभावित स्थिरांकों को स्वीकार करता है। यदि NORMAL
पास किया जाता है, जैसे textureMode(NORMAL)
, तो पाठ्यवस्तु के यूवी निर्देशांक छवि के आयामों के बजाय 0 से 1 के दायरे में प्रदान किए जा सकते हैं। यह अलग-अलग आकार की छवियों के लिए एक ही कोड का उपयोग करने में मदद कर सकता है। उदाहरण के लिए, ऊपर दिए गए कोड स्निपेट को निम्नानुसार पुनर्लिखित किया जा सकता है:
\n// Set the texture mode to use normalized coordinates.\ntextureMode(NORMAL);\n// Apply the image as a texture.\ntexture(img);
\n// Draw the rectangle.\nbeginShape();
\n// Top-left.\n// u: 0, v: 0\nvertex(0, 0, 0, 0, 0);
\n// Top-right.\n// u: 1, v: 0\nvertex(30, 0, 0, 1, 0);
\n// Bottom-right.\n// u: 1, v: 1\nvertex(30, 50, 0, 1, 1);
\n// Bottom-left.\n// u: 0, v: 1\nvertex(0, 50, 0, 0, 1);
\nendShape();\n
\nडिफ़ॉल्ट रूप से, mode
IMAGE
है, जो छवि के आयामों के अनुसार यूवी निर्देशांक को मापता है। textureMode(IMAGE)
को कॉल करने से डिफ़ॉल्ट लागू होता है।
ध्यान दें: textureMode()
का उपयोग केवल WebGL मोड में किया जा सकता है।
या तो छवि या सामान्य।
\n"],"type":[0,"Constant"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\nlet img;\n\n// Load an image and create a p5.Image object.\nfunction preload() {\n img = loadImage('/assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('An image of a ceiling against a black background.');\n}\n\nfunction draw() {\n background(0);\n\n // Apply the image as a texture.\n texture(img);\n\n // Draw the custom shape.\n // Use the image's width and height as uv coordinates.\n beginShape();\n vertex(-30, -30, 0, 0);\n vertex(30, -30, img.width, 0);\n vertex(30, 30, img.width, img.height);\n vertex(-30, 30, 0, img.height);\n endShape();\n}\n
\n\nlet img;\n\n// Load an image and create a p5.Image object.\nfunction preload() {\n img = loadImage('/assets/laDefense.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('An image of a ceiling against a black background.');\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Apply the image as a texture.\n texture(img);\n\n // Draw the custom shape.\n // Use normalized uv coordinates.\n beginShape();\n vertex(-30, -30, 0, 0);\n vertex(30, -30, 1, 0);\n vertex(30, 30, 1, 1);\n vertex(-30, 30, 0, 1);\n endShape();\n}\n
\nजब किसी आकृति का यूवी निर्देशांक बनावट से परे चला जाता है तो बनावट के व्यवहार का तरीका बदल जाता है।
\ntexture() को काम करने के लिए, किसी आकृति को उसकी सतह पर बिंदुओं को छवि में पिक्सेल पर मैप करने के तरीके की आवश्यकता होती है। rect() और box() जैसी अंतर्निहित आकृतियाँ पहले से ही मौजूद हैं बनावट मानचित्रण उनके शीर्षों के आधार पर। vertex() के साथ बनाई गई कस्टम आकृतियों को यूवी निर्देशांक के रूप में पारित होने के लिए बनावट मैपिंग की आवश्यकता होती है।
\nप्रत्येक कॉल vertex() में 5 तर्क शामिल होने चाहिए, जैसे vertex(x, y, z, u, v) कोड>, एक छवि के भीतर निर्देशांक
(x, y, z)
पर शीर्ष को निर्देशांक (u, v)
पर पिक्सेल पर मैप करने के लिए। उदाहरण के लिए, एक आयताकार छवि के कोनों को डिफ़ॉल्ट रूप से एक आयत के कोनों पर मैप किया जाता है:
\n// Apply the image as a texture.\ntexture(img);\n\n// Draw the rectangle.\nrect(0, 0, 30, 50);\n
\nयदि उपरोक्त कोड स्निपेट में छवि का आयाम 300 x 500 पिक्सेल है,\nवही परिणाम इस प्रकार प्राप्त किया जा सकता है:
\n\n// Apply the image as a texture.\ntexture(img);\n\n// Draw the rectangle.\nbeginShape();
\n// Top-left.\n// u: 0, v: 0\nvertex(0, 0, 0, 0, 0);
\n// Top-right.\n// u: 300, v: 0\nvertex(30, 0, 0, 300, 0);
\n// Bottom-right.\n// u: 300, v: 500\nvertex(30, 50, 0, 300, 500);
\n// Bottom-left.\n// u: 0, v: 500\nvertex(0, 50, 0, 0, 500);
\nendShape();\n
\ntextureWrap()
नियंत्रित करता है कि बनावट कैसे व्यवहार करती है जब उनकी यूवी बनावट से परे जाती है। ऐसा करने से टाइलिंग जैसे दिलचस्प दृश्य प्रभाव उत्पन्न हो सकते हैं। उदाहरण के लिए, ऊपर दिए गए कस्टम आकार में यू-निर्देशांक छवि की चौड़ाई से अधिक हो सकते हैं:
\n// Apply the image as a texture.\ntexture(img);\n\n// Draw the rectangle.\nbeginShape();\nvertex(0, 0, 0, 0, 0);
\n// Top-right.\n// u: 600\nvertex(30, 0, 0, 600, 0);
\n// Bottom-right.\n// u: 600\nvertex(30, 50, 0, 600, 500);
\nvertex(0, 50, 0, 0, 500);\nendShape();\n
\n600 के यू-निर्देशांक बनावट छवि की चौड़ाई 300 से अधिक हैं। यह दिलचस्प संभावनाएं पैदा करता है।
\nपहला पैरामीटर, wrapX
, तीन संभावित स्थिरांक स्वीकार करता है। यदि CLAMP
पास हो जाता है, जैसा कि textureWrap(CLAMP)
में होता है, तो बनावट के किनारे पर मौजूद पिक्सेल आकृति के किनारों तक विस्तारित हो जाएंगे। यदि REPEAT
पास हो जाता है, जैसे कि textureWrap(REPEAT)
में, बनावट आकृति के किनारों तक पहुंचने तक बार-बार टाइल होगी। यदि MIRROR
पास हो जाता है, जैसा कि textureWrap(MIRROR)
में होता है, तो बनावट बार-बार टाइल करेगी जब तक कि वह आकृति के किनारों तक नहीं पहुंच जाती, और टाइलों के बीच उसका अभिविन्यास बदल जाता है। डिफ़ॉल्ट रूप से, बनावट CLAMP
.
दूसरा पैरामीटर, wrapY
, वैकल्पिक है। यह समान तीन स्थिरांक स्वीकार करता है, CLAMP
, REPEAT
, औरMIRROR
। यदि इनमें से एक स्थिरांक पारित हो जाता है, जैसे कि textureWRAP(MIRROR, REPEAT)
, तो बनावट MIRROR
क्षैतिज रूप से और दोहराया जाएगा
लंबवत रूप से होगी। डिफ़ॉल्ट रूप से, wrapY
को wrapX
के समान मान पर सेट किया जाएगा।
ध्यान दें: textureWrap()
का उपयोग केवल WebGL मोड में किया जा सकता है।
या तो क्लैंप, रिपीट, या मिरर
\n"],"type":[0,"Constant"]}],[0,{"name":[0,"wrapY"],"description":[0,"या तो क्लैंप, रिपीट, या मिरर
\n"],"type":[0,"Constant"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\nlet img;\n\nfunction preload() {\n img = loadImage('/assets/rockies128.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'An image of a landscape occupies the top-left corner of a square. Its edge colors smear to cover the other thre quarters of the square.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Set the texture wrapping.\n // Note: CLAMP is the default mode.\n textureWrap(CLAMP);\n\n // Apply the image as a texture.\n texture(img);\n\n // Style the shape.\n noStroke();\n\n // Draw the shape.\n // Use uv coordinates > 1.\n beginShape();\n vertex(-30, -30, 0, 0, 0);\n vertex(30, -30, 0, 2, 0);\n vertex(30, 30, 0, 2, 2);\n vertex(-30, 30, 0, 0, 2);\n endShape();\n}\n
\n\nlet img;\n\nfunction preload() {\n img = loadImage('/assets/rockies128.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('Four identical images of a landscape arranged in a grid.');\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Set the texture wrapping.\n textureWrap(REPEAT);\n\n // Apply the image as a texture.\n texture(img);\n\n // Style the shape.\n noStroke();\n\n // Draw the shape.\n // Use uv coordinates > 1.\n beginShape();\n vertex(-30, -30, 0, 0, 0);\n vertex(30, -30, 0, 2, 0);\n vertex(30, 30, 0, 2, 2);\n vertex(-30, 30, 0, 0, 2);\n endShape();\n}\n
\n\nlet img;\n\nfunction preload() {\n img = loadImage('/assets/rockies128.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Four identical images of a landscape arranged in a grid. The images are reflected horizontally and vertically, creating a kaleidoscope effect.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Set the texture wrapping.\n textureWrap(MIRROR);\n\n // Apply the image as a texture.\n texture(img);\n\n // Style the shape.\n noStroke();\n\n // Draw the shape.\n // Use uv coordinates > 1.\n beginShape();\n vertex(-30, -30, 0, 0, 0);\n vertex(30, -30, 0, 2, 0);\n vertex(30, 30, 0, 2, 2);\n vertex(-30, 30, 0, 0, 2);\n endShape();\n}\n
\n\nlet img;\n\nfunction preload() {\n img = loadImage('/assets/rockies128.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Four identical images of a landscape arranged in a grid. The top row and bottom row are reflections of each other.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Set the texture mode.\n textureMode(NORMAL);\n\n // Set the texture wrapping.\n textureWrap(REPEAT, MIRROR);\n\n // Apply the image as a texture.\n texture(img);\n\n // Style the shape.\n noStroke();\n\n // Draw the shape.\n // Use uv coordinates > 1.\n beginShape();\n vertex(-30, -30, 0, 0, 0);\n vertex(30, -30, 0, 2, 0);\n vertex(30, 30, 0, 2, 2);\n vertex(-30, 30, 0, 0, 2);\n endShape();\n}\n
\nएक ऐसी रोशनी बनाता है जो सभी दिशाओं से चमकती है।
\nपरिवेशीय प्रकाश एक दिशा से नहीं आता है। इसके बजाय, 3डी आकृतियाँ सभी तरफ से समान रूप से प्रकाशित होती हैं। परिवेशीय रोशनी का उपयोग अन्य प्रकार की रोशनी के साथ संयोजन के लिए लगभग हमेशा किया जाता है।
\nवैकल्पिक के साथ ambientLight()
को कॉल करने के तीन तरीके हैं प्रकाश का रंग सेट करने के लिए पैरामीटर।
कॉल करने का पहला तरीका ambientLight()
के दो पैरामीटर हैं, gray
और alpha
। alpha
> वैकल्पिक है. परिवेशी प्रकाश का रंग सेट करने के लिए 0 और 255 के बीच ग्रेस्केल और अल्फा मानों को पारित किया जा सकता है, जैसे ambientLight(50)
या ambientLight(50, 30)
.
कॉल करने का दूसरा तरीका ambientLight()
में एक पैरामीटर है, रंग। एक p5.Color ऑब्जेक्ट, रंग मानों की एक सरणी, या एक CSS रंग स्ट्रिंग, जैसा कि ambientLight('magenta') में है। कोड>, परिवेशीय प्रकाश का रंग सेट करने के लिए पारित किया जा सकता है।
कॉल करने का तीसरा तरीका ambientLight()
में चार पैरामीटर हैं, v1
, v2
, v3
और alpha
। alpha
वैकल्पिक है. परिवेशी प्रकाश के रंग सेट करने के लिए RGBA, HSBA, या HSLA मानों को पारित किया जा सकता है, जैसे ambientLight(255, 0, 0)
या ambientLight(255, 0, 0, 30) कोड>. रंग मानों की व्याख्या वर्तमान colorMode() का उपयोग करके की जाएगी।
वर्तमान colorMode() में लाल या रंग का मान।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"v2"],"description":[0,"वर्तमान colorMode() में हरा या संतृप्ति मान।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"v3"],"description":[0,"वर्तमान colorMode() में नीला, चमक, या हल्कापन मान।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"alpha"],"description":[0,"वर्तमान colorMode() में अल्फा (पारदर्शिता) मान।
\n"],"type":[0,"Number"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"gray"],"description":[0,"0 और 255 के बीच ग्रेस्केल मान।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"alpha"],"description":[0,""],"type":[0,"Number"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"value"],"description":[0,"सीएसएस स्ट्रिंग के रूप में रंग।
\n"],"type":[0,"String"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"values"],"description":[0,"आरजीबीए, एचएसबीए, या एचएसएलए मानों की एक सरणी के रूप में रंग।
\n"],"type":[0,"Number[]"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"color"],"description":[0,"एक p5.Color ऑब्जेक्ट के रूप में रंग दें।
\n"],"type":[0,"p5.Color"]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,true],"example":[1,[[0,"\n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to turn on the light.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn against a gray background. The sphere appears to change color when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Control the light.\n if (isLit === true) {\n // Use a grayscale value of 80.\n ambientLight(80);\n }\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Turn on the ambient light when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A faded magenta sphere drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n // Use a p5.Color object.\n let c = color('orchid');\n ambientLight(c);\n\n // Draw the sphere.\n sphere();\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A faded magenta sphere drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n // Use a CSS color string.\n ambientLight('#DA70D6');\n\n // Draw the sphere.\n sphere(30);\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A faded magenta sphere drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n // Use RGB values\n ambientLight(218, 112, 214);\n\n // Draw the sphere.\n sphere(30);\n}\n
\nएक ऐसी रोशनी बनाता है जो एक दिशा में चमकती है।
\nदिशात्मक रोशनी एक विशिष्ट बिंदु से नहीं चमकती हैं। वे उस सूरज की तरह हैं जो ऑफस्क्रीन कहीं से चमकता है। प्रकाश की दिशा -1 और 1 के बीच तीन (x, y, z)
मानों का उपयोग करके निर्धारित की जाती है। उदाहरण के लिए, प्रकाश की दिशा को (1, 0, 0)
के रूप में सेट करना p5.Geometry वस्तुओं को बायीं ओर से प्रकाशित करेगा क्योंकि प्रकाश का मुख सीधे दाईं ओर है।
प्रकाश का रंग और दिशा निर्धारित करने के लिए पैरामीटर के साथ directionalLight()
को कॉल करने के चार तरीके हैं।
कॉल करने का पहला तरीका directionalLight()
में छह पैरामीटर हैं। पहले तीन पैरामीटर, v1
, v2
, और v3
, वर्तमान कलरमोड(). अंतिम तीन पैरामीटर, x
, y
, और z
, प्रकाश की दिशा निर्धारित करते हैं। उदाहरण के लिए, directionalLight(255, 0, 0, 1, 0, 0)
एक लाल (255, 0, 0)
प्रकाश बनाता है जो दाईं ओर चमकता है (1, 0, 0)कोड>.
कॉल करने का दूसरा तरीका directionalLight()
में चार पैरामीटर हैं। पहले तीन पैरामीटर, v1
, v2
, और v3
, वर्तमान कलरमोड(). अंतिम पैरामीटर, direction
एक p5.Geometry ऑब्जेक्ट का उपयोग करके प्रकाश की दिशा निर्धारित करता है। उदाहरण के लिए, directionalLight(255, 0, 0, LightDir)
एक लाल (255, 0, 0)
प्रकाश बनाता है जो lightDir की दिशा में चमकता है। कोड> वेक्टर बिंदु.
कॉल करने का तीसरा तरीका directionalLight()
में चार पैरामीटर हैं। पहला पैरामीटर, color
, p5.Color ऑब्जेक्ट या रंग मानों की एक सरणी का उपयोग करके प्रकाश का रंग सेट करता है। अंतिम तीन पैरामीटर, x
, y
, और z
, प्रकाश की दिशा निर्धारित करते हैं। उदाहरण के लिए, directionalLight(myColor, 1, 0, 0)
एक ऐसी रोशनी बनाता है जो के रंग मान के साथ दाईं ओर चमकती है
(1, 0, 0)
मेरा रंगकोड>.
कॉल करने का चौथा तरीका directionalLight()
में दो पैरामीटर हैं। पहला पैरामीटर, color
, p5.Color ऑब्जेक्ट या रंग मानों की एक सरणी का उपयोग करके प्रकाश का रंग सेट करता है। दूसरा पैरामीटर, direction
, p5.Color ऑब्जेक्ट का उपयोग करके प्रकाश की दिशा निर्धारित करता है। उदाहरण के लिए, directionalLight(myColor,lightDir)
एक प्रकाश बनाता है जो lightDir
वेक्टर बिंदुओं की दिशा में myColor
के रंग मान के साथ चमकता है।< /पी>\n"],"line":[0,461],"overloads":[1,[[0,{"params":[1,[[0,{"name":[0,"v1"],"description":[0,"
वर्तमान colorMode() में लाल या रंग का मान।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"v2"],"description":[0,"वर्तमान colorMode() में हरा या संतृप्ति मान।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"v3"],"description":[0,"वर्तमान colorMode() में नीला, चमक, या हल्कापन मान।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"x"],"description":[0,"-1 और 1 के बीच प्रकाश की दिशा का x-निर्देशांक।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"y"],"description":[0,"-1 और 1 के बीच प्रकाश की दिशा का y-निर्देशांक।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"z"],"description":[0,"-1 और 1 के बीच प्रकाश की दिशा का z-निर्देशांक।
\n"],"type":[0,"Number"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"v1"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"v2"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"v3"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"direction"],"description":[0,"एक p5.Vector ऑब्जेक्ट के रूप में प्रकाश की दिशा।
\n"],"type":[0,"p5.Vector"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"color"],"description":[0,"एक p5.Color ऑब्जेक्ट के रूप में रंग, रंग मानों की एक सरणी, या एक CSS स्ट्रिंग के रूप में।
\n"],"type":[0,"p5.Color|Number[]|String"]}],[0,{"name":[0,"x"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"y"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"z"],"description":[0,""],"type":[0,"Number"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"color"],"description":[0,""],"type":[0,"p5.Color|Number[]|String"]}],[0,{"name":[0,"direction"],"description":[0,""],"type":[0,"p5.Vector"]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,true],"example":[1,[[0,"\n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to turn on the directional light.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. A red light starts shining from above when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Control the light.\n if (isLit === true) {\n // Add a red directional light from above.\n // Use RGB values and XYZ directions.\n directionalLight(255, 0, 0, 0, 1, 0);\n }\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a red directional light from above.\n // Use a p5.Color object and XYZ directions.\n let c = color(255, 0, 0);\n directionalLight(c, 0, 1, 0);\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a red directional light from above.\n // Use a p5.Color object and a p5.Vector object.\n let c = color(255, 0, 0);\n let lightDir = createVector(0, 1, 0);\n directionalLight(c, lightDir);\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n
\nएक छवि से एक परिवेशीय प्रकाश बनाता है।
\nimageLight()
सभी दिशाओं से चमकने वाली रोशनी का अनुकरण करता है। इसका प्रभाव स्केच को एक विशाल गोले के केंद्र में रखने जैसा है जो छवि को अपनी बनावट के रूप में उपयोग करता है। छवि का विसरित प्रकाश fill() से प्रभावित होगा और स्पेक्युलर प्रतिबिंब specularMaterial से प्रभावित होगा () और shininess()।
पैरामीटर, img
, प्रकाश स्रोत के रूप में उपयोग करने के लिए p5.Image ऑब्जेक्ट है।
प्रकाश स्रोत के रूप में उपयोग की जाने वाली छवि।
\n"],"type":[0,"p5.image"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\n// Click and drag the mouse to view the scene from different angles.\n\nlet img;\n\n// Load an image and create a p5.Image object.\nfunction preload() {\n img = loadImage('/assets/outdoor_spheremap.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere floating above a landscape. The surface of the sphere reflects the landscape.');\n}\n\nfunction draw() {\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the image as a panorama (360˚ background).\n panorama(img);\n\n // Add a soft ambient light.\n ambientLight(50);\n\n // Add light from the image.\n imageLight(img);\n\n // Style the sphere.\n specularMaterial(20);\n shininess(100);\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n
\npointLight() और spotLight() के लिए फ़ॉलऑफ़ रेट सेट करता है।
\nएक प्रकाश का फ़ॉलऑफ़ एक निश्चित दूरी पर उसकी किरण की तीव्रता का वर्णन करता है। उदाहरण के लिए, एक लालटेन में धीमा फ़ॉलऑफ़ होता है, एक फ्लैशलाइट में मध्यम फ़ॉलऑफ़ होता है, और एक लेज़र पॉइंटर में तेज़ फ़ॉलऑफ़ होता है।
\nlightFalloff()
में तीन पैरामीटर हैं, constant
, linear
, और quadratic
। ये संख्याएं हैं जो एक दूरी d
पर फ़ॉलऑफ़ की गणना करने के लिए उपयोग की जाती हैं, जैसा कि निम्नलिखित में दिखाया गया है:
falloff = 1 / (constant + d * linear + (d * d) * quadratic)
नोट: constant
, linear
, और quadratic
हमेशा 0 से अधिक मानों पर सेट किए जाने चाहिए।
फ़ॉलऑफ़ की गणना के लिए स्थिर मान।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"linear"],"description":[0,"फ़ॉलऑफ़ की गणना के लिए रैखिक मान।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"quadratic"],"description":[0,"फ़ॉलऑफ़ की गणना के लिए द्विघात मान।
\n"],"type":[0,"Number"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,true],"example":[1,[[0,"\n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to change the falloff rate.\n\nlet useFalloff = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn against a gray background. The intensity of the light changes when the user double-clicks.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Set the light falloff.\n if (useFalloff === true) {\n lightFalloff(2, 0, 0);\n }\n\n // Add a white point light from the front.\n pointLight(255, 255, 255, 0, 0, 100);\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Change the falloff value when the user double-clicks.\nfunction doubleClicked() {\n useFalloff = true;\n}\n
\nदृश्य में एक परिवेशीय और दिशात्मक प्रकाश रखता है। लाइटें परिवेश प्रकाश (128, 128, 128) और दिशात्मक प्रकाश (128, 128, 128, 0, 0, -1) पर सेट हैं।
\n\nध्यान दें: लूपिंग प्रोग्राम में लगातार बने रहने के लिए लाइट्स को ड्रॉ() के भीतर (प्रत्यक्ष या अप्रत्यक्ष रूप से) कॉल करने की आवश्यकता होती है। उन्हें setup() में रखने से वे केवल लूप के माध्यम से पहली बार ही प्रभाव डालेंगे।
\n"],"line":[0,1076],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,true],"example":[1,[[0,"\n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to turn on the lights.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box drawn against a gray background. The quality of the light changes when the user double-clicks.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Control the lights.\n if (isLit === true) {\n lights();\n }\n\n // Draw the box.\n box();\n}\n\n// Turn on the lights when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white box drawn against a gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n ambientLight(128, 128, 128);\n directionalLight(128, 128, 128, 0, 0, -1);\n\n // Draw the box.\n box();\n}\n
\nस्केच से सभी लाइटें हटा देता है।
\nकॉलिंग noLights()
से lights(), ambientLight(), directionalLight(), pointLight() a>, या spotLight()। नई प्रकाश योजना बनाने के लिए इन कार्यों को noLights()
के बाद कॉल किया जा सकता है।
\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('Two spheres drawn against a gray background. The top sphere is white and the bottom sphere is red.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Style the spheres.\n noStroke();\n\n // Draw the top sphere.\n push();\n translate(0, -25, 0);\n sphere(20);\n pop();\n\n // Turn off the lights.\n noLights();\n\n // Add a red directional light that points into the screen.\n directionalLight(255, 0, 0, 0, 0, -1);\n\n // Draw the bottom sphere.\n push();\n translate(0, 25, 0);\n sphere(20);\n pop();\n}\n
\nएक इमर्सिव 3डी बैकग्राउंड बनाता है।
\npanorama()
360˚ सामग्री वाली छवियों, जैसे मानचित्र या HDRI, को एक स्केच के चारों ओर इमर्सिव 3D पृष्ठभूमि में बदल देता है। अंतरिक्ष की खोज के लिए orbitControl() या camera()< जैसे कार्यों के साथ कैमरे के परिप्रेक्ष्य को बदलने की आवश्यकता होती है। /a>.
पृष्ठभूमि के रूप में उपयोग करने के लिए 360˚ छवि।
\n"],"type":[0,"p5.Image"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\n// Click and drag the mouse to view the scene from different angles.\n\nlet img;\n\n// Load an image and create a p5.Image object.\nfunction preload() {\n img = loadImage('/assets/outdoor_spheremap.jpg');\n}\n\nfunction setup() {\n createCanvas(100 ,100 ,WEBGL);\n\n 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.');\n}\n\nfunction draw() {\n // Add the panorama.\n panorama(img);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Use the image as a light source.\n imageLight(img);\n\n // Style the sphere.\n noStroke();\n specularMaterial(50);\n shininess(200);\n metalness(100);\n\n // Draw the sphere.\n sphere(30);\n}\n
\nसभी दिशाओं में एक बिंदु से चमकने वाला एक प्रकार का प्रकाश बनाता है।
\nपॉइंट लाइट्स उन्हें बल्ब के रूप में समझा जा सकता है जो सभी दिशाओं में चमकते हैं। विभिन्न स्थानों पर रखे जा सकते हैं ताकि विभिन्न प्रकाश प्रभाव प्राप्त किए जा सकें। एक समय में अधिकतम 5 पॉइंट लाइट्स सक्रिय हो सकते हैं।
\npointLight()
को प्रकाश के रंग और स्थिति सेट करने के लिए पैरामीटर के साथ चार तरीके होते हैं।
pointLight()
को बुलाने का पहला तरीका छह पैरामीटर्स होते हैं। पहले तीन पैरामीटर, v1
, v2
, और v3
, मौजूदा colorMode() का उपयोग करके प्रकाश का रंग सेट करते हैं। अंतिम तीन पैरामीटर, x
, y
, और z
, प्रकाश की स्थिति सेट करते हैं। उदाहरण के लिए, pointLight(255, 0, 0, 50, 0, 0)
एक लाल (255, 0, 0)
प्रकाश बनाता है जो निर्देशांक (50, 0, 0)
से चमकता है।
कॉल करने के दूसरे तरीके pointLight()
में चार पैरामीटर हैं। पहले तीन पैरामीटर, v1
, v2
, और v3
, वर्तमान कलरमोड(). अंतिम पैरामीटर, स्थिति p5.Vector ऑब्जेक्ट का उपयोग करके प्रकाश की स्थिति निर्धारित करती है। उदाहरण के लिए, pointLight(255, 0, 0,lightPos)
एक लाल (255, 0, 0)
प्रकाश बनाता है जो lightPos
वेक्टर द्वारा निर्धारित स्थिति से चमकता है.
pointLight()
को बुलाने का तीसरा तरीका चार पैरामीटर्स होते हैं। पहला पैरामीटर, color
, p5.Color ऑब्जेक्ट या रंग मानों के एक एरे का उपयोग करके प्रकाश का रंग सेट करता है। अंतिम तीन पैरामीटर, x
, y
, और z
, प्रकाश की स्थिति सेट करते हैं। उदाहरण के लिए, directionalLight(myColor, 50, 0, 0)
उन निर्देशांकों से चमकता है जो (50, 0, 0)
होते हैं और उसके रंग मान का उपयोग करता है myColor
।
pointLight()
को बुलाने का चौथा तरीका दो पैरामीटर्स होते हैं। पहला पैरामीटर, color
, p5.Color ऑब्जेक्ट या रंग मानों के एक एरे का उपयोग करके प्रकाश का रंग सेट करता है। दूसरा पैरामीटर, position
, p5.Vector ऑब्जेक्ट का उपयोग करके प्रकाश की स्थिति सेट करता है। उदाहरण के लिए, directionalLight(myColor, lightPos)
उस स्थिति से चमकता है जो lightPos
वेक्टर द्वारा सेट की गई होती है और उसके रंग मान का उपयोग करता है myColor
।
वर्तमान colorMode() में लाल या रंग का मान।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"v2"],"description":[0,"वर्तमान colorMode() में हरा या संतृप्ति मान।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"v3"],"description":[0,"वर्तमान colorMode() में नीला, चमक, या हल्कापन मान।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"x"],"description":[0,"x-प्रकाश का समन्वय।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"y"],"description":[0,"y-प्रकाश का समन्वय।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"z"],"description":[0,"z-प्रकाश का समन्वय।
\n"],"type":[0,"Number"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"v1"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"v2"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"v3"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"position"],"description":[0,"एक p5.Vector ऑब्जेक्ट के रूप में प्रकाश की स्थिति।
\n"],"type":[0,"p5.Vector"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"color"],"description":[0,"एक p5.Color ऑब्जेक्ट के रूप में रंग, रंग मानों की एक सरणी, या एक CSS स्ट्रिंग।
\n"],"type":[0,"p5.Color|Number[]|String"]}],[0,{"name":[0,"x"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"y"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"z"],"description":[0,""],"type":[0,"Number"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"color"],"description":[0,""],"type":[0,"p5.Color|Number[]|String"]}],[0,{"name":[0,"position"],"description":[0,""],"type":[0,"p5.Vector"]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,true],"example":[1,[[0,"\n\n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to turn on the point light.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. A red light starts shining from above when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Control the light.\n if (isLit === true) {\n // Add a red point light from above.\n // Use RGB values and XYZ coordinates.\n pointLight(255, 0, 0, 0, -150, 0);\n }\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Turn on the point light when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a red point light from above.\n // Use a p5.Color object and XYZ directions.\n let c = color(255, 0, 0);\n pointLight(c, 0, -150, 0);\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a red point light from above.\n // Use a p5.Color object and a p5.Vector object.\n let c = color(255, 0, 0);\n let lightPos = createVector(0, -150, 0);\n pointLight(c, lightPos);\n\n // Style the sphere.\n noStroke();\n\n // Draw the sphere.\n sphere(30);\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n 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.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a red point light that points to the center of the scene.\n // Use a p5.Color object and a p5.Vector object.\n let c = color(255, 0, 0);\n let lightPos = createVector(0, 0, 65);\n pointLight(c, lightPos);\n\n // Style the spheres.\n noStroke();\n\n // Draw a sphere up and to the left.\n push();\n translate(-25, -25, 25);\n sphere(10);\n pop();\n\n // Draw a box up and to the right.\n push();\n translate(25, -25, 25);\n sphere(10);\n pop();\n\n // Draw a sphere down and to the left.\n push();\n translate(-25, 25, 25);\n sphere(10);\n pop();\n\n // Draw a box down and to the right.\n push();\n translate(25, 25, 25);\n sphere(10);\n pop();\n}\n
\nरोशनी के लिए विशेषांक रंग सेट करता है।
\nspecularColor()
एक विशिष्ट दिशा में सतह से उतारने वाली रोशनी पर प्रभाव डालता है। इन रोशनियों में directionalLight(), pointLight(), और spotLight() शामिल होते हैं। यह फ़ंक्शन p5.Geometry ऑब्जेक्ट्स पर हाइलाइट बनाने में मदद करता है जो specularMaterial() के साथ स्टाइल किए गए होते हैं। यदि कोई ज्यामिति specularMaterial() का उपयोग नहीं करती है, तो specularColor()
का कोई प्रभाव नहीं होगा।
नोट: specularColor()
वह रोशनियों पर प्रभाव नहीं डालता है जो सभी दिशाओं में उतरती हैं, जैसा कि ambientLight() और imageLight()।
स्पेक्युलर हाइलाइट रंग सेट करने के लिए वैकल्पिक पैरामीटर के साथ specularColor()
को कॉल करने के तीन तरीके हैं।
कॉल करने का पहला तरीका specularColor()
में दो वैकल्पिक पैरामीटर हैं, ग्रे
और alpha
। ग्रेस्केल और अल्फा मान 0 और 255 के बीच, जैसे specularColor(50)
या specularColor(50, 80)
, हो सकते हैं स्पेक्युलर हाइलाइट रंग सेट करने के लिए पारित किया गया।
कॉल करने का दूसरा तरीका specularColor()
में एक वैकल्पिक पैरामीटर है, रंग
. स्पेक्युलर हाइलाइट रंग सेट करने के लिए एक p5.Color ऑब्जेक्ट, रंग मानों की एक सरणी, या एक CSS रंग स्ट्रिंग को पास किया जा सकता है।
कॉल करने का तीसरा तरीका specularColor()
में चार वैकल्पिक पैरामीटर हैं, v1
, v2
, v3
, और alpha
। RGBA, HSBA, या HSLA मान, जैसे कि specularColor(255, 0, 0, 80)
, को specular हाइलाइट रंग सेट करने के लिए पारित किया जा सकता है। रंग मानों की व्याख्या वर्तमान colorMode() का उपयोग करके की जाएगी।
वर्तमान colorMode() में लाल या रंग का मान।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"v2"],"description":[0,"वर्तमान colorMode() में हरा या संतृप्ति मान।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"v3"],"description":[0,"वर्तमान colorMode() में नीला, चमक, या हल्कापन मान।
\n"],"type":[0,"Number"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"gray"],"description":[0,"0 और 255 के बीच ग्रेस्केल मान।
\n"],"type":[0,"Number"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"value"],"description":[0,"सीएसएस स्ट्रिंग के रूप में रंग।
\n"],"type":[0,"String"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"values"],"description":[0,"आरजीबीए, एचएसबीए, या एचएसएलए मानों की एक सरणी के रूप में रंग।
\n"],"type":[0,"Number[]"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"color"],"description":[0,"एक p5.Color ऑब्जेक्ट के रूप में रंग दें।
\n"],"type":[0,"p5.Color"]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,true],"example":[1,[[0,"\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // No specular color.\n // Draw the sphere.\n sphere(30);\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click the canvas to add a point light.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A sphere drawn on a gray background. A spotlight starts shining when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Style the sphere.\n noStroke();\n specularColor(100);\n specularMaterial(255, 255, 255);\n\n // Control the light.\n if (isLit === true) {\n // Add a white point light from the top-right.\n pointLight(255, 255, 255, 30, -20, 40);\n }\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Turn on the point light when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a specular highlight.\n // Use a p5.Color object.\n let c = color('dodgerblue');\n specularColor(c);\n\n // Add a white point light from the top-right.\n pointLight(255, 255, 255, 30, -20, 40);\n\n // Style the sphere.\n noStroke();\n\n // Add a white specular material.\n specularMaterial(255, 255, 255);\n\n // Draw the sphere.\n sphere(30);\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a specular highlight.\n // Use a CSS color string.\n specularColor('#1E90FF');\n\n // Add a white point light from the top-right.\n pointLight(255, 255, 255, 30, -20, 40);\n\n // Style the sphere.\n noStroke();\n\n // Add a white specular material.\n specularMaterial(255, 255, 255);\n\n // Draw the sphere.\n sphere(30);\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Add a specular highlight.\n // Use RGB values.\n specularColor(30, 144, 255);\n\n // Add a white point light from the top-right.\n pointLight(255, 255, 255, 30, -20, 40);\n\n // Style the sphere.\n noStroke();\n\n // Add a white specular material.\n specularMaterial(255, 255, 255);\n\n // Draw the sphere.\n sphere(30);\n}\n
\nस्पॉट लाइट्स फ्लैशलाइट्स की तरह होते हैं जो एक दिशा में चमकते हैं और प्रकाश का एक शंकु बनाते हैं। शंकु का आकार कोण और एकाग्रता पैरामीटर्स का उपयोग करके नियंत्रित किया जा सकता है। एक साथ अधिकतम 5 स्पॉट लाइट्स सक्रिय हो सकती हैं।
\nप्रकाश का रंग, स्थिति और दिशा सेट करने के लिए पैरामीटर्स के साथ spotLight()
को कॉल करने के आठ तरीके हैं। उदाहरण के लिए, spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0)
मूल (0, 0, 0)
पर एक लाल (255, 0, 0)
प्रकाश बनाता है जो दाईं ओर (1, 0, 0)
की ओर इशारा करता है।
angle
पैरामीटर वैकल्पिक है। यह प्रकाश शंकु की त्रिज्या सेट करता है। उदाहरण के लिए, spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16)
मूल (0, 0, 0)
पर एक लाल (255, 0, 0)
प्रकाश बनाता है जो PI / 16
रेडियन के कोण के साथ दाईं ओर (1, 0, 0)
की ओर इशारा करता है। डिफ़ॉल्ट रूप से, angle
PI / 3
रेडियन होता है।
concentration
पैरामीटर भी वैकल्पिक है। यह प्रकाश शंकु के केंद्र की ओर प्रकाश को केंद्रित करता है। उदाहरण के लिए, spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16, 50)
मूल (0, 0, 0)
पर एक लाल (255, 0, 0)
प्रकाश बनाता है जो 50 के एकाग्रता पर PI / 16
रेडियन के कोण के साथ दाईं ओर (1, 0, 0)
की ओर इशारा करता है। डिफ़ॉल्ट रूप से, concentration
100 होता है।
वर्तमान colorMode() में लाल या रंग का मान।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"v2"],"description":[0,"वर्तमान colorMode() में हरा या संतृप्ति मान।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"v3"],"description":[0,"वर्तमान colorMode() में नीला, चमक, या हल्कापन मान।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"x"],"description":[0,"x-प्रकाश का समन्वय।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"y"],"description":[0,"y-प्रकाश का समन्वय।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"z"],"description":[0,"z-प्रकाश का समन्वय।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"rx"],"description":[0,"-1 और 1 के बीच प्रकाश दिशा का x-निर्देशांक।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"ry"],"description":[0,"-1 और 1 के बीच प्रकाश दिशा का y-निर्देशांक।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"rz"],"description":[0,"-1 और 1 के बीच प्रकाश दिशा का z-निर्देशांक।
\n"],"type":[0,"Number"]}],[0,{"name":[0,"angle"],"description":[0,"प्रकाश शंकु का कोण. डिफ़ॉल्ट PI / 3
.
प्रकाश की सांद्रता. 100 पर डिफ़ॉल्ट.
\n"],"type":[0,"Number"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"color"],"description":[0,"एक p5.Color ऑब्जेक्ट के रूप में रंग, रंग मानों की एक सरणी, या एक CSS स्ट्रिंग।
\n"],"type":[0,"p5.Color|Number[]|String"]}],[0,{"name":[0,"position"],"description":[0,"प्रकाश की स्थिति p5.Vector के रूप में object.
\n"],"type":[0,"p5.Vector"]}],[0,{"name":[0,"direction"],"description":[0,"एक p5.Vector ऑब्जेक्ट के रूप में प्रकाश की दिशा।
\n"],"type":[0,"p5.Vector"]}],[0,{"name":[0,"angle"],"description":[0,""],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"concentration"],"description":[0,""],"type":[0,"Number"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"v1"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"v2"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"v3"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"position"],"description":[0,""],"type":[0,"p5.Vector"]}],[0,{"name":[0,"direction"],"description":[0,""],"type":[0,"p5.Vector"]}],[0,{"name":[0,"angle"],"description":[0,""],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"concentration"],"description":[0,""],"type":[0,"Number"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"color"],"description":[0,""],"type":[0,"p5.Color|Number[]|String"]}],[0,{"name":[0,"x"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"y"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"z"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"direction"],"description":[0,""],"type":[0,"p5.Vector"]}],[0,{"name":[0,"angle"],"description":[0,""],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"concentration"],"description":[0,""],"type":[0,"Number"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"color"],"description":[0,""],"type":[0,"p5.Color|Number[]|String"]}],[0,{"name":[0,"position"],"description":[0,""],"type":[0,"p5.Vector"]}],[0,{"name":[0,"rx"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"ry"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"rz"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"angle"],"description":[0,""],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"concentration"],"description":[0,""],"type":[0,"Number"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"v1"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"v2"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"v3"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"x"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"y"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"z"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"direction"],"description":[0,""],"type":[0,"p5.Vector"]}],[0,{"name":[0,"angle"],"description":[0,""],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"concentration"],"description":[0,""],"type":[0,"Number"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"v1"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"v2"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"v3"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"position"],"description":[0,""],"type":[0,"p5.Vector"]}],[0,{"name":[0,"rx"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"ry"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"rz"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"angle"],"description":[0,""],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"concentration"],"description":[0,""],"type":[0,"Number"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"color"],"description":[0,""],"type":[0,"p5.Color|Number[]|String"]}],[0,{"name":[0,"x"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"y"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"z"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"rx"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"ry"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"rz"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"angle"],"description":[0,""],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"concentration"],"description":[0,""],"type":[0,"Number"],"optional":[0,true]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,true],"example":[1,[[0,"\n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to adjust the spotlight.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere drawn on a gray background. A red spotlight starts shining when the user double-clicks.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Control the spotlight.\n if (isLit === true) {\n // Add a red spot light that shines into the screen.\n // Set its angle to PI / 32 radians.\n spotLight(255, 0, 0, 0, 0, 100, 0, 0, -1, PI / 32);\n }\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Turn on the spotlight when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n// Double-click to adjust the spotlight.\n\nlet isLit = false;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe('A white sphere drawn on a gray background. A red spotlight starts shining when the user double-clicks.');\n}\n\nfunction draw() {\n background(50);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Turn on the lights.\n lights();\n\n // Control the spotlight.\n if (isLit === true) {\n // Add a red spot light that shines into the screen.\n // Set its angle to PI / 3 radians (default).\n // Set its concentration to 1000.\n let c = color(255, 0, 0);\n let position = createVector(0, 0, 100);\n let direction = createVector(0, 0, -1);\n spotLight(c, position, direction, PI / 3, 1000);\n }\n\n // Draw the sphere.\n sphere(30);\n}\n\n// Turn on the spotlight when the user double-clicks.\nfunction doubleClicked() {\n isLit = true;\n}\n
\nएक शेडर प्रोग्राम का वर्णन करने वाली एक क्लास।
\n प्रत्येक p5.Shader
ऑब्जेक्ट में एक शेडर प्रोग्राम होता है जो ग्राफिक्स प्रोसेसिंग यूनिट (GPU) पर चलता है। शेडर एक साथ कई पिक्सल या वर्टेक्स को प्रोसेस कर सकते हैं, जिससे वे कई ग्राफिक्स कार्यों के लिए तेज हो जाते हैं। वे GLSL नामक भाषा में लिखे जाते हैं और स्केच में शेष कोड के साथ चलते हैं।
एक शेडर प्रोग्राम दो फ़ाइलों से बना होता है, एक वर्टेक्स शेडर और एक फ्रैग्मेंट शेडर। वर्टेक्स शेडर 3D ज्यामिति को स्क्रीन पर कहां खींचता है और फ्रैग्मेंट शेडर रंग को प्रभावित करता है। एक बार p5.Shader
ऑब्जेक्ट बना लिया जाता है, तो इसका उपयोग shader() फ़ंक्शन के साथ किया जा सकता है, जैसे shader(myShader)
।
ध्यान दें: createShader(), createFilterShader() और loadShader() इस क्लास के एक इंस्टेंस बनाने के लिए अनुशंसित तरीके हैं।
\n"],"line":[0,11],"params":[1,[[0,{"name":[0,"renderer"],"description":[0,"इस शेडर के लिए WebGL संदर्भ।
\n"],"type":[0,"p5.RendererGL"]}],[0,{"name":[0,"vertSrc"],"description":[0,"वर्टेक्स शेडर प्रोग्राम के लिए स्रोत कोड।
\n"],"type":[0,"String"]}],[0,{"name":[0,"fragSrc"],"description":[0,"फ्रैगमेंट शेडर प्रोग्राम के लिए स्रोत कोड।
\n"],"type":[0,"String"]}]]],"chainable":[0,false],"example":[1,[[0,"\n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\n\nvoid main() {\n // Set each pixel's RGBA value to yellow.\n gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n let myShader = createShader(vertSrc, fragSrc);\n\n // Apply the p5.Shader object.\n shader(myShader);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n\n describe('A yellow square.');\n}\n
\n\n// Note: A \"uniform\" is a global variable within a shader program.\n\nlet mandelbrot;\n\n// Load the shader and create a p5.Shader object.\nfunction preload() {\n mandelbrot = loadShader('/assets/shader.vert', '/assets/shader.frag');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Use the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n describe('A fractal image zooms in and out of focus.');\n}\n\nfunction draw() {\n // Set the shader uniform r to a value that oscillates between 0 and 2.\n mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);\n\n // Add a quad as a display surface for the shader.\n quad(-1, -1, 1, -1, 1, 1, -1, 1);\n}\n
\nएक ड्राइंग संदर्भ से दूसरे में शेडर की कॉपी।
\n प्रत्येक p5.Shader
ऑब्जेक्ट को चलने से पहले shader() कॉल करके कॉम्पाइल करना होता है। कॉम्पाइलेशन एक ड्राइंग संदर्भ में होता है जो आमतौर पर मुख्य कैनवास या p5.Graphics का एक उदाहरण होता है। एक शेडर केवल उसी संदर्भ में उपयोग किया जा सकता है जिसमें यह कंपाइल किया गया था। copyToContext()
मेथड शेडर को फिर से कॉम्पाइल करती है और इसे किसी अन्य ड्राइंग संदर्भ में कॉपी करती है जहां इसका पुनः उपयोग किया जा सकता है।
पैरामीटर संदर्भ
, वह ड्राइंग संदर्भ है जहां शेडर का उपयोग किया जाएगा। शेडर को p5.Graphics के एक उदाहरण में कॉपी किया जा सकता है, जैसे myShader.copyToContext(pg)
। शेडर को window
वेरिएबल का उपयोग करके भी p5.Graphics ऑब्जेक्ट से मुख्य कैनवास में कॉपी किया जा सकता है, जैसे myShader.copyToContext(window)
।
ध्यान दें: createShader(), createFilterShader() या loadShader() से बनाया गया p5.Shader ऑब्जेक्ट createFramebuffer() से बनाए गए p5.Framebuffer ऑब्जेक्ट के साथ सीधे उपयोग किया जा सकता है। दोनों ऑब्जेक्ट मुख्य कैनवास के समान संदर्भ हैं।
\n"],"path":[0,"p5.Shader/copyToContext"]}],"setUniform":[0,{"description":[0,"शेडर के यूनिफ़ॉर्म (वैश्विक) चर को सेट करता है।
शेडर प्रोग्राम कंप्यूटर के ग्राफिक प्रोसेसिंग यूनिट (GPU) पर चलते हैं। वे कंप्यूटर की मेमोरी के एक हिस्से में रहते हैं जो उन स्केच से पूरी तरह अलग होता है जो उन्हें चलाते हैं। यूनिफ़ॉर्म शेडर प्रोग्राम के भीतर वैश्विक चर हैं। वे एक तरीका प्रदान करते हैं कि CPU पर चलने वाले स्केच से GPU पर चलने वाले शेडर प्रोग्राम में मान पास किए जा सकें।
\n पहला पैरामीटर, uniformName
, यूनिफ़ॉर्म का नाम होता है। उपरोक्त शेडर के लिए, uniformName
'r'
होगा।
दूसरा पैरामीटर, data
, वह मान है जिसे यूनिफ़ॉर्म को सेट करने के लिए उपयोग किया जाना चाहिए। उदाहरण के लिए, myShader.setUniform('r', 0.5)
कॉल करना शेडर में r
यूनिफ़ॉर्म को 0.5
पर सेट कर देगा। डेटा को यूनिफ़ॉर्म के प्रकार के अनुरूप होना चाहिए। संख्याएं, स्ट्रिंग, बूलियन, एरे और कई प्रकार की छवि setUniform()
के साथ शेडर में पास की जा सकती हैं।
एक ड्रॉइंग संदर्भ से दूसरे में शेडर को कॉपी करता है।
\nप्रत्येक 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 ऑब्जेक्ट के साथ सीधे उपयोग किया जा सकता है। दोनों ऑब्जेक्ट का मुख्य कैनवास के समान संदर्भ होता है।
\n"],"line":[0,211],"params":[1,[[0,{"name":[0,"context"],"description":[0,"कॉपी किए गए शेडर के लिए WebGL संदर्भ।
\n"],"type":[0,"p5|p5.Graphics"]}]]],"itemtype":[0,"method"],"class":[0,"p5.Shader"],"chainable":[0,false],"return":[0,{"description":[0,"लक्ष्य संदर्भ के लिए नया शेडर संकलित किया गया।"],"type":[0,"p5.Shader"]}],"example":[1,[[0,"\n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 uv = vTexCoord;\n vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));\n gl_FragColor = vec4(color, 1.0);\\\n}\n`;\n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Shader object.\n let original = createShader(vertSrc, fragSrc);\n\n // Compile the p5.Shader object.\n shader(original);\n\n // Create a p5.Graphics object.\n pg = createGraphics(50, 50, WEBGL);\n\n // Copy the original shader to the p5.Graphics object.\n let copied = original.copyToContext(pg);\n\n // Apply the copied shader to the p5.Graphics object.\n pg.shader(copied);\n\n // Style the display surface.\n pg.noStroke();\n\n // Add a display surface for the shader.\n pg.plane(50, 50);\n\n describe('A square with purple-blue gradient on its surface drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the p5.Graphics object to the main canvas.\n image(pg, -25, -25);\n}\n
\n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\n\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 uv = vTexCoord;\n vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));\n gl_FragColor = vec4(color, 1.0);\n}\n`;\n\nlet copied;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Graphics object.\n let pg = createGraphics(25, 25, WEBGL);\n\n // Create a p5.Shader object.\n let original = pg.createShader(vertSrc, fragSrc);\n\n // Compile the p5.Shader object.\n pg.shader(original);\n\n // Copy the original shader to the main canvas.\n copied = original.copyToContext(window);\n\n // Apply the copied shader to the main canvas.\n shader(copied);\n\n describe('A rotating cube with a purple-blue gradient on its surface drawn against a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Rotate around the x-, y-, and z-axes.\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n rotateZ(frameCount * 0.01);\n\n // Draw the box.\n box(50);\n}\n
\nशेडर के एकरूप (वैश्विक) चर को सेट करता है।
\nशेडर कार्यक्रम कंप्यूटर के ग्राफ़िक्स प्रोसेसिंग यूनिट (GPU) पर चलते हैं। वे कंप्यूटर के मेमोरी के एक हिस्से में रहते हैं जो स्केच से पूरी तरह से अलग होता है। एकरूप वह वैश्विक चर होते हैं जो किसी शेडर कार्यक्रम के भीतर होते हैं। वे सीपीयू पर चलने वाले स्केच से जीपीयू पर चलने वाले शेडर कार्यक्रम में मान पास करने का एक तरीका प्रदान करते हैं।
\nपहला पैरामीटर, uniformName
, एकरूप के नाम की एक स्ट्रिंग है। ऊपर के शेडर के लिए, uniformName
'r'
होगा।
दूसरा पैरामीटर, data
, वह मान है जिसका उपयोग एकरूप को सेट करने के लिए किया जाना चाहिए। उदाहरण के लिए, myShader.setUniform('r', 0.5)
कॉल करने से उपर्युक्त शेडर में r
एकरूप को 0.5
पर सेट कर दिया जाएगा। डेटा एकरूप के प्रकार के अनुरूप होना चाहिए। नंबर, स्ट्रिंग, बूलियन, एरे और कई प्रकार की छवियां सभी setUniform()
के साथ शेडर में पास की जा सकती हैं।
वर्दी का नाम. शीर्ष और खंड शेडर्स में प्रयुक्त नाम से मेल खाना चाहिए।
\n"],"type":[0,"String"]}],[0,{"name":[0,"data"],"description":[0,"वर्दी को निर्दिष्ट करने के लिए मान। वर्दी के डेटा प्रकार से मेल खाना चाहिए।
\n"],"type":[0,"Boolean|Number|Number[]|p5.Image|p5.Graphics|p5.MediaElement|p5.Texture"]}]]],"itemtype":[0,"method"],"class":[0,"p5.Shader"],"chainable":[0,true],"example":[1,[[0,"\n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\n\nuniform float r;\n\nvoid main() {\n gl_FragColor = vec4(r, 1.0, 1.0, 1.0);\n}\n`;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n let myShader = createShader(vertSrc, fragSrc);\n\n // Apply the p5.Shader object.\n shader(myShader);\n\n // Set the r uniform to 0.5.\n myShader.setUniform('r', 0.5);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface for the shader.\n plane(100, 100);\n\n describe('A cyan square.');\n}\n
\n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision mediump float;\n\nuniform float r;\n\nvoid main() {\n gl_FragColor = vec4(r, 1.0, 1.0, 1.0);\n}\n`;\n\nlet myShader;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n myShader = createShader(vertSrc, fragSrc);\n\n // Compile and apply the p5.Shader object.\n shader(myShader);\n\n describe('A square oscillates color between cyan and white.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the drawing surface.\n noStroke();\n\n // Update the r uniform.\n let nextR = 0.5 * (sin(frameCount * 0.01) + 1);\n myShader.setUniform('r', nextR);\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n}\n
\n\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\n\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vTexCoord = aTexCoord;\n vec4 positionVec4 = vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\nuniform vec2 p;\nuniform float r;\nconst int numIterations = 500;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec2 c = p + gl_FragCoord.xy * r;\n vec2 z = c;\n float n = 0.0;\n\n for (int i = numIterations; i > 0; i--) {\n if (z.x * z.x + z.y * z.y > 4.0) {\n n = float(i) / float(numIterations);\n break;\n }\n\n z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;\n }\n\n gl_FragColor = vec4(\n 0.5 - cos(n * 17.0) / 2.0,\n 0.5 - cos(n * 13.0) / 2.0,\n 0.5 - cos(n * 23.0) / 2.0,\n 1.0\n );\n}\n`;\n\nlet mandelbrot;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Shader object.\n mandelbrot = createShader(vertSrc, fragSrc);\n\n // Compile and apply the p5.Shader object.\n shader(mandelbrot);\n\n // Set the shader uniform p to an array.\n // p is the center point of the Mandelbrot image.\n mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);\n\n describe('A fractal image zooms in and out of focus.');\n}\n\nfunction draw() {\n // Set the shader uniform r to a value that oscillates\n // between 0 and 0.005.\n // r is the size of the image in Mandelbrot-space.\n let radius = 0.005 * (sin(frameCount * 0.01) + 1);\n mandelbrot.setUniform('r', radius);\n\n // Style the drawing surface.\n noStroke();\n\n // Add a plane as a drawing surface.\n plane(100, 100);\n}\n
\nLogs the hooks available in this shader, and their current implementation.
\nEach shader may let you override bits of its behavior. Each bit is called\na hook. A hook is either for the vertex shader, if it affects the\nposition of vertices, or in the fragment shader, if it affects the pixel\ncolor. This method logs those values to the console, letting you know what\nyou are able to use in a call to\nmodify()
.
For example, this shader will produce the following output:
\nmyShader = baseMaterialShader().modify({\n declarations: 'uniform float time;',\n 'vec3 getWorldPosition': `(vec3 pos) {\n pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);\n return pos;\n }`\n});\nmyShader.inspectHooks();\n
\n==== Vertex shader hooks: ====\nvoid beforeVertex() {}\nvec3 getLocalPosition(vec3 position) { return position; }\n[MODIFIED] vec3 getWorldPosition(vec3 pos) {\n pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);\n return pos;\n }\nvec3 getLocalNormal(vec3 normal) { return normal; }\nvec3 getWorldNormal(vec3 normal) { return normal; }\nvec2 getUV(vec2 uv) { return uv; }\nvec4 getVertexColor(vec4 color) { return color; }\nvoid afterVertex() {}\n\n==== Fragment shader hooks: ====\nvoid beforeFragment() {}\nInputs getPixelInputs(Inputs inputs) { return inputs; }\nvec4 combineColors(ColorComponents components) {\n vec4 color = vec4(0.);\n color.rgb += components.diffuse * components.baseColor;\n color.rgb += components.ambient * components.ambientColor;\n color.rgb += components.specular * components.specularColor;\n color.rgb += components.emissive;\n color.a = components.opacity;\n return color;\n }\nvec4 getFinalColor(vec4 color) { return color; }\nvoid afterFragment() {}\n
\n"],"line":[0,259],"itemtype":[0,"method"],"class":[0,"p5.Shader"],"chainable":[0,false],"beta":[0,true],"isConstructor":[0,false],"path":[0,"p5.Shader/inspectHooks"]}],"render":[0,null]}],[0,{"id":[0,"en/p5.Shader/modify.mdx"],"slug":[0,"en/p5shader/modify"],"body":[0,"\n\n# modify\n"],"collection":[0,"reference"],"data":[0,{"title":[0,"modify()"],"module":[0,"3D"],"submodule":[0,"Material"],"file":[0,"src/webgl/p5.Shader.js"],"description":[0,"Returns a new shader, based on the original, but with custom snippets\nof shader code replacing default behaviour.
\nEach shader may let you override bits of its behavior. Each bit is called\na hook. A hook is either for the vertex shader, if it affects the\nposition of vertices, or in the fragment shader, if it affects the pixel\ncolor. You can inspect the different hooks available by calling\nyourShader.inspectHooks()
. You can\nalso read the reference for the default material, normal material, color, line, and point shaders to\nsee what hooks they have available.
modify()
takes one parameter, hooks
, an object with the hooks you want\nto override. Each key of the hooks
object is the name\nof a hook, and the value is a string with the GLSL code for your hook.
If you supply functions that aren't existing hooks, they will get added at the start of\nthe shader as helper functions so that you can use them in your hooks.
\nTo add new uniforms to your shader, you can pass in a uniforms
object containing\nthe type and name of the uniform as the key, and a default value or function returning\na default value as its value. These will be automatically set when the shader is set\nwith shader(yourShader)
.
You can also add a declarations
key, where the value is a GLSL string declaring\ncustom uniform variables, globals, and functions shared\nbetween hooks. To add declarations just in a vertex or fragment shader, add\nvertexDeclarations
and fragmentDeclarations
keys.
The hooks in the shader to replace.
\n"],"type":[0,"Object"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5.Shader"],"chainable":[0,false],"beta":[0,true],"return":[0,{"description":[0,""],"type":[0,"p5.Shader"]}],"example":[1,[[0,"\n\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseMaterialShader().modify({\n uniforms: {\n 'float time': () => millis()\n },\n 'vec3 getWorldPosition': `(vec3 pos) {\n pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);\n return pos;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n shader(myShader);\n lights();\n noStroke();\n fill('red');\n sphere(50);\n}\n
\n\nlet myShader;\n\nfunction setup() {\n createCanvas(200, 200, WEBGL);\n myShader = baseMaterialShader().modify({\n // Manually specifying a uniform\n declarations: 'uniform float time;',\n 'vec3 getWorldPosition': `(vec3 pos) {\n pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);\n return pos;\n }`\n });\n}\n\nfunction draw() {\n background(255);\n shader(myShader);\n myShader.setUniform('time', millis());\n lights();\n noStroke();\n fill('red');\n sphere(50);\n}\n
\nSets the way colors blend when added to the canvas.
\nBy default, drawing with a solid color paints over the current pixel values\non the canvas. blendMode()
offers many options for blending colors.
Shapes, images, and text can be used as sources for drawing to the canvas.\nA source pixel changes the color of the canvas pixel where it's drawn. The\nfinal color results from blending the source pixel's color with the canvas\npixel's color. RGB color values from the source and canvas pixels are\ncompared, added, subtracted, multiplied, and divided to create different\neffects. Red values with red values, greens with greens, and blues with\nblues.
\nThe parameter, mode
, sets the blend mode. For example, calling\nblendMode(ADD)
sets the blend mode to ADD
. The following blend modes\nare available in both 2D and WebGL mode:
BLEND
: color values from the source overwrite the canvas. This is the default mode.ADD
: color values from the source are added to values from the canvas.DARKEST
: keeps the darkest color value.LIGHTEST
: keeps the lightest color value.EXCLUSION
: similar to DIFFERENCE
but with less contrast.MULTIPLY
: color values from the source are multiplied with values from the canvas. The result is always darker.SCREEN
: all color values are inverted, then multiplied, then inverted again. The result is always lighter. (Opposite of MULTIPLY
)REPLACE
: the last source drawn completely replaces the rest of the canvas.REMOVE
: overlapping pixels are removed by making them completely transparent.The following blend modes are only available in 2D mode:
\nDIFFERENCE
: color values from the source are subtracted from the values from the canvas. If the difference is a negative number, it's made positive.OVERLAY
: combines MULTIPLY
and SCREEN
. Dark values in the canvas get darker and light values get lighter.HARD_LIGHT
: combines MULTIPLY
and SCREEN
. Dark values in the source get darker and light values get lighter.SOFT_LIGHT
: a softer version of HARD_LIGHT
.DODGE
: lightens light tones and increases contrast. Divides the canvas color values by the inverted color values from the source.BURN
: darkens dark tones and increases contrast. Divides the source color values by the inverted color values from the canvas, then inverts the result.The following blend modes are only available in WebGL mode:
\nSUBTRACT
: RGB values from the source are subtracted from the values from the canvas. If the difference is a negative number, it's made positive. Alpha (transparency) values from the source and canvas are added.blend mode to set.\n either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,\n EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,\n SOFT_LIGHT, DODGE, BURN, ADD, REMOVE or SUBTRACT
\n"],"type":[0,"Constant"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Use the default blend mode.\n blendMode(BLEND);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('A Sky Blue line and a Deep Rose line form an X on a gray background.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Set the blend mode.\n blendMode(HARD_LIGHT);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('An ocean blue line and a hot pink line form an X on a gray background. The area where they overlap is Magenta purple.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Set the blend mode.\n blendMode(ADD);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('An icy blue line and a light lavender line form an X on a gray background. The area where they overlap is white.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Set the blend mode.\n blendMode(DARKEST);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('A steel blue line and a cranberry line form an X on a gray background. The area where they overlap is deep purple.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Set the blend mode.\n blendMode(BURN);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('A cobalt blue line and a burgundy line form an X on a gray background. The area where they overlap is black.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Set the blend mode.\n blendMode(LIGHTEST);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('A pale lavender line and a soft beige line form an X on a gray background. The area where they overlap is pale lilac.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Set the blend mode.\n blendMode(EXCLUSION);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('An earthy brown line and a muted sage line form an X on a gray background. The area where they overlap is sage green.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Set the blend mode.\n blendMode(MULTIPLY);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('A slate blue line and a plum line form an X on a gray background. The area where they overlap is dark Indigo.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Set the blend mode.\n blendMode(SCREEN);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('A baby blue line and a peach pink line form an X on a gray background. The area where they overlap is misty lilac.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Set the blend mode.\n blendMode(REPLACE);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('A diagonal deep rose line.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Set the blend mode.\n blendMode(REMOVE);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('The silhouette of an X is missing from a gray background.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Set the blend mode.\n blendMode(DIFFERENCE);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('A light burgundy line and a forest green line form an X on a gray background. The area where they overlap is dark cocoa.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Set the blend mode.\n blendMode(OVERLAY);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('A cornflower blue line and a light rose line form an X on a gray background. The area where they overlap is violet.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Set the blend mode.\n blendMode(SOFT_LIGHT);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('A pale sky line and a rose blush line form an X on a gray background. The area where they overlap is lavender.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Set the blend mode.\n blendMode(DODGE);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the first line.\n stroke('#1a85ff');\n line(25, 25, 75, 75);\n\n // Draw the second line.\n stroke('#d41159');\n line(75, 25, 25, 75);\n\n describe('An aqua blue line and a light pink line form an X on a gray background. The area where they overlap is white.');\n}\n
\n\nfunction setup() {\n // Create a canvas with WEBGL mode.\n createCanvas(100, 100, WEBGL);\n\n // Set the background color.\n background(180);\n\n // Set the blend mode to SUBTRACT.\n blendMode(SUBTRACT);\n\n // Style the lines.\n strokeWeight(30);\n\n // Draw the blue line.\n stroke('#1a85ff');\n line(-25, -25, 25, 25);\n\n // Draw the red line.\n stroke('#d41159');\n line(25, -25, -25, 25);\n\n describe('A burnt orange and a sea green line form an X on a gray background. The area where they overlap is forest green.');\n}\n
\nClears the depth buffer in WebGL mode.
\nclearDepth()
clears information about how far objects are from the camera\nin 3D space. This information is stored in an object called the\ndepth buffer. Clearing the depth buffer ensures new objects aren't drawn\nbehind old ones. Doing so can be useful for feedback effects in which the\nprevious frame serves as the background for the current frame.
The parameter, depth
, is optional. If a number is passed, as in\nclearDepth(0.5)
, it determines the range of objects to clear from the\ndepth buffer. 0 doesn't clear any depth information, 0.5 clears depth\ninformation halfway between the near and far clipping planes, and 1 clears\ndepth information all the way to the far clipping plane. By default,\ndepth
is 1.
Note: clearDepth()
can only be used in WebGL mode.
amount of the depth buffer to clear between 0\n (none) and 1 (far clipping plane). Defaults to 1.
\n"],"type":[0,"Number"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\nlet previous;\nlet current;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create the p5.Framebuffer objects.\n previous = createFramebuffer({ format: FLOAT });\n current = createFramebuffer({ format: FLOAT });\n\n describe(\n 'A multicolor box drifts from side to side on a white background. It leaves a trail that fades over time.'\n );\n}\n\nfunction draw() {\n // Swap the previous p5.Framebuffer and the\n // current one so it can be used as a texture.\n [previous, current] = [current, previous];\n\n // Start drawing to the current p5.Framebuffer.\n current.begin();\n\n // Paint the background.\n background(255);\n\n // Draw the previous p5.Framebuffer.\n // Clear the depth buffer so the previous\n // frame doesn't block the current one.\n push();\n tint(255, 250);\n image(previous, -50, -50);\n clearDepth();\n pop();\n\n // Draw the box on top of the previous frame.\n push();\n let x = 25 * sin(frameCount * 0.01);\n let y = 25 * sin(frameCount * 0.02);\n translate(x, y, 0);\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n normalMaterial();\n box(12);\n pop();\n\n // Stop drawing to the current p5.Framebuffer.\n current.end();\n\n // Display the current p5.Framebuffer.\n image(current, -50, -50);\n}\n
\nCreates a canvas element on the web page.
\ncreateCanvas()
creates the main drawing canvas for a sketch. It should\nonly be called once at the beginning of setup().\nCalling createCanvas()
more than once causes unpredictable behavior.
The first two parameters, width
and height
, are optional. They set the\ndimensions of the canvas and the values of the\nwidth and height system\nvariables. For example, calling createCanvas(900, 500)
creates a canvas\nthat's 900×500 pixels. By default, width
and height
are both 100.
The third parameter is also optional. If either of the constants P2D
or\nWEBGL
is passed, as in createCanvas(900, 500, WEBGL)
, then it will set\nthe sketch's rendering mode. If an existing\nHTMLCanvasElement\nis passed, as in createCanvas(900, 500, myCanvas)
, then it will be used\nby the sketch.
The fourth parameter is also optional. If an existing\nHTMLCanvasElement\nis passed, as in createCanvas(900, 500, WEBGL, myCanvas)
, then it will be\nused by the sketch.
Note: In WebGL mode, the canvas will use a WebGL2 context if it's supported\nby the browser. Check the webglVersion\nsystem variable to check what version is being used, or call\nsetAttributes({ version: 1 })
to create a WebGL1 context.
width of the canvas. Defaults to 100.
\n"],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"height"],"description":[0,"height of the canvas. Defaults to 100.
\n"],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"renderer"],"description":[0,"either P2D or WEBGL. Defaults to P2D
.
existing canvas element that should be used for the sketch.
\n"],"type":[0,"HTMLCanvasElement"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"width"],"description":[0,""],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"height"],"description":[0,""],"type":[0,"Number"],"optional":[0,true]}],[0,{"name":[0,"canvas"],"description":[0,""],"type":[0,"HTMLCanvasElement"],"optional":[0,true]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"new `p5.Renderer` that holds the canvas."],"type":[0,"p5.Renderer"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Draw a diagonal line.\n line(0, 0, width, height);\n\n describe('A diagonal line drawn from top-left to bottom-right on a gray background.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 50);\n\n background(180);\n\n // Draw a diagonal line.\n line(0, 0, width, height);\n\n describe('A diagonal line drawn from top-left to bottom-right on a gray background.');\n}\n
\n\n// Use WebGL mode.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(180);\n\n // Draw a diagonal line.\n line(-width / 2, -height / 2, width / 2, height / 2);\n\n describe('A diagonal line drawn from top-left to bottom-right on a gray background.');\n}\n
\n\nfunction setup() {\n // Create a p5.Render object.\n let cnv = createCanvas(50, 50);\n\n // Position the canvas.\n cnv.position(10, 20);\n\n background(180);\n\n // Draw a diagonal line.\n line(0, 0, width, height);\n\n describe('A diagonal line drawn from top-left to bottom-right on a gray background.');\n}\n
\nCreates and a new p5.Framebuffer object.
\np5.Framebuffer objects are separate drawing\nsurfaces that can be used as textures in WebGL mode. They're similar to\np5.Graphics objects and generally run much\nfaster when used as textures.
\nThe parameter, options
, is optional. An object can be passed to configure\nthe p5.Framebuffer object. The available\nproperties are:
format
: data format of the texture, either UNSIGNED_BYTE
, FLOAT
, or HALF_FLOAT
. Default is UNSIGNED_BYTE
.channels
: whether to store RGB
or RGBA
color channels. Default is to match the main canvas which is RGBA
.depth
: whether to include a depth buffer. Default is true
.depthFormat
: data format of depth information, either UNSIGNED_INT
or FLOAT
. Default is FLOAT
.stencil
: whether to include a stencil buffer for masking. depth
must be true
for this feature to work. Defaults to the value of depth
which is true
.antialias
: whether to perform anti-aliasing. If set to true
, as in { antialias: true }
, 2 samples will be used by default. The number of samples can also be set, as in { antialias: 4 }
. Default is to match setAttributes() which is false
(true
in Safari).width
: width of the p5.Framebuffer object. Default is to always match the main canvas width.height
: height of the p5.Framebuffer object. Default is to always match the main canvas height.density
: pixel density of the p5.Framebuffer object. Default is to always match the main canvas pixel density.textureFiltering
: how to read values from the p5.Framebuffer object. Either LINEAR
(nearby pixels will be interpolated) or NEAREST
(no interpolation). Generally, use LINEAR
when using the texture as an image and NEAREST
if reading the texture as data. Default is LINEAR
.If the width
, height
, or density
attributes are set, they won't automatically match the main canvas and must be changed manually.
Note: createFramebuffer()
can only be used in WebGL mode.
configuration options.
\n"],"type":[0,"Object"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"new framebuffer."],"type":[0,"p5.Framebuffer"]}],"example":[1,[[0,"\n\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n describe('A grid of white toruses rotating against a dark gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Start drawing to the p5.Framebuffer object.\n myBuffer.begin();\n\n // Clear the drawing surface.\n clear();\n\n // Turn on the lights.\n lights();\n\n // Rotate the coordinate system.\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n\n // Style the torus.\n noStroke();\n\n // Draw the torus.\n torus(20);\n\n // Stop drawing to the p5.Framebuffer object.\n myBuffer.end();\n\n // Iterate from left to right.\n for (let x = -50; x < 50; x += 25) {\n // Iterate from top to bottom.\n for (let y = -50; y < 50; y += 25) {\n // Draw the p5.Framebuffer object to the canvas.\n image(myBuffer, x, y, 25, 25);\n }\n }\n}\n
\n\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create an options object.\n let options = { width: 25, height: 25 };\n\n // Create a p5.Framebuffer object.\n // Use options for configuration.\n myBuffer = createFramebuffer(options);\n\n describe('A grid of white toruses rotating against a dark gray background.');\n}\n\nfunction draw() {\n background(50);\n\n // Start drawing to the p5.Framebuffer object.\n myBuffer.begin();\n\n // Clear the drawing surface.\n clear();\n\n // Turn on the lights.\n lights();\n\n // Rotate the coordinate system.\n rotateX(frameCount * 0.01);\n rotateY(frameCount * 0.01);\n\n // Style the torus.\n noStroke();\n\n // Draw the torus.\n torus(5, 2.5);\n\n // Stop drawing to the p5.Framebuffer object.\n myBuffer.end();\n\n // Iterate from left to right.\n for (let x = -50; x < 50; x += 25) {\n // Iterate from top to bottom.\n for (let y = -50; y < 50; y += 25) {\n // Draw the p5.Framebuffer object to the canvas.\n image(myBuffer, x, y);\n }\n }\n}\n
\nCreates a p5.Graphics object.
\ncreateGraphics()
creates an offscreen drawing canvas (graphics buffer)\nand returns it as a p5.Graphics object. Drawing\nto a separate graphics buffer can be helpful for performance and for\norganizing code.
The first two parameters, width
and height
, are optional. They set the\ndimensions of the p5.Graphics object. For\nexample, calling createGraphics(900, 500)
creates a graphics buffer\nthat's 900×500 pixels.
The third parameter is also optional. If either of the constants P2D
or\nWEBGL
is passed, as in createGraphics(900, 500, WEBGL)
, then it will set\nthe p5.Graphics object's rendering mode. If an\nexisting\nHTMLCanvasElement\nis passed, as in createGraphics(900, 500, myCanvas)
, then it will be used\nby the graphics buffer.
The fourth parameter is also optional. If an existing\nHTMLCanvasElement\nis passed, as in createGraphics(900, 500, WEBGL, myCanvas)
, then it will be\nused by the graphics buffer.
Note: In WebGL mode, the p5.Graphics object\nwill use a WebGL2 context if it's supported by the browser. Check the\nwebglVersion system variable to check what\nversion is being used, or call setAttributes({ version: 1 })
to create a\nWebGL1 context.
width of the graphics buffer.
\n"],"type":[0,"Number"]}],[0,{"name":[0,"height"],"description":[0,"height of the graphics buffer.
\n"],"type":[0,"Number"]}],[0,{"name":[0,"renderer"],"description":[0,"either P2D or WEBGL. Defaults to P2D.
\n"],"type":[0,"Constant"],"optional":[0,true]}],[0,{"name":[0,"canvas"],"description":[0,"existing canvas element that should be\n used for the graphics buffer..
\n"],"type":[0,"HTMLCanvasElement"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"width"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"height"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"canvas"],"description":[0,""],"type":[0,"HTMLCanvasElement"],"optional":[0,true]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"new graphics buffer."],"type":[0,"p5.Graphics"]}],"example":[1,[[0,"\n\n// Double-click to draw the contents of the graphics buffer.\n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Create the p5.Graphics object.\n pg = createGraphics(50, 50);\n\n // Draw to the graphics buffer.\n pg.background(100);\n pg.circle(pg.width / 2, pg.height / 2, 20);\n\n describe('A gray square. A smaller, darker square with a white circle at its center appears when the user double-clicks.');\n}\n\n// Display the graphics buffer when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n image(pg, 25, 25);\n }\n}\n
\n\n// Double-click to draw the contents of the graphics buffer.\n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Create the p5.Graphics object in WebGL mode.\n pg = createGraphics(50, 50, WEBGL);\n\n // Draw to the graphics buffer.\n pg.background(100);\n pg.lights();\n pg.noStroke();\n pg.rotateX(QUARTER_PI);\n pg.rotateY(QUARTER_PI);\n pg.torus(15, 5);\n\n describe('A gray square. A smaller, darker square with a white torus at its center appears when the user double-clicks.');\n}\n\n// Display the graphics buffer when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n image(pg, 25, 25);\n }\n}\n
\nA system variable that provides direct access to the sketch's\n element.
The element provides many specialized features that aren't\nincluded in the p5.js library. The
drawingContext
system variable\nprovides access to these features by exposing the sketch's\nCanvasRenderingContext2D\nobject.
\nfunction setup() {\n createCanvas(100, 100);\n\n background(180);\n\n // Style the circle using shadows.\n drawingContext.shadowOffsetX = 5;\n drawingContext.shadowOffsetY = -5;\n drawingContext.shadowBlur = 10;\n drawingContext.shadowColor = 'black';\n\n // Draw the circle.\n circle(50, 50, 40);\n\n describe(\"A white circle on a gray background. The circle's edges are shadowy.\");\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background('skyblue');\n\n // Style the circle using a color gradient.\n let myGradient = drawingContext.createRadialGradient(50, 50, 3, 50, 50, 40);\n myGradient.addColorStop(0, 'yellow');\n myGradient.addColorStop(0.6, 'orangered');\n myGradient.addColorStop(1, 'yellow');\n drawingContext.fillStyle = myGradient;\n drawingContext.strokeStyle = 'rgba(0, 0, 0, 0)';\n\n // Draw the circle.\n circle(50, 50, 40);\n\n describe('A fiery sun drawn on a light blue background.');\n}\n
\nRemoves the default canvas.
\nBy default, a 100×100 pixels canvas is created without needing to call\ncreateCanvas(). noCanvas()
removes the\ndefault canvas for sketches that don't need it.
\nfunction setup() {\n noCanvas();\n}\n
\nResizes the canvas to a given width and height.
\nresizeCanvas()
immediately clears the canvas and calls\nredraw(). It's common to call resizeCanvas()
\nwithin the body of windowResized() like\nso:
function windowResized() {\n resizeCanvas(windowWidth, windowHeight);\n}\n
\nThe first two parameters, width
and height
, set the dimensions of the\ncanvas. They also the values of the width and\nheight system variables. For example, calling\nresizeCanvas(300, 500)
resizes the canvas to 300×500 pixels, then sets\nwidth to 300 and\nheight 500.
The third parameter, noRedraw
, is optional. If true
is passed, as in\nresizeCanvas(300, 500, true)
, then the canvas will be canvas to 300×500\npixels but the redraw() function won't be called\nimmediately. By default, redraw() is called\nimmediately when resizeCanvas()
finishes executing.
width of the canvas.
\n"],"type":[0,"Number"]}],[0,{"name":[0,"height"],"description":[0,"height of the canvas.
\n"],"type":[0,"Number"]}],[0,{"name":[0,"noRedraw"],"description":[0,"whether to delay calling\n redraw(). Defaults\n to false
.
\n// Double-click to resize the canvas.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white circle drawn on a gray background. The canvas shrinks by half the first time the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(180);\n\n // Draw a circle at the center of the canvas.\n circle(width / 2, height / 2, 20);\n}\n\n// Resize the canvas when the user double-clicks.\nfunction doubleClicked() {\n resizeCanvas(50, 50);\n}\n
\n\n// Resize the web browser to change the canvas size.\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n\n describe('A white circle drawn on a gray background.');\n}\n\nfunction draw() {\n background(180);\n\n // Draw a circle at the center of the canvas.\n circle(width / 2, height / 2, 20);\n}\n\n// Always resize the canvas to fill the browser window.\nfunction windowResized() {\n resizeCanvas(windowWidth, windowHeight);\n}\n
\nSet attributes for the WebGL Drawing context.\nThis is a way of adjusting how the WebGL\nrenderer works to fine-tune the display and performance.
\nNote that this will reinitialize the drawing context\nif called after the WebGL canvas is made.
\nIf an object is passed as the parameter, all attributes\nnot declared in the object will be set to defaults.
\nThe available attributes are:\n
\nalpha - indicates if the canvas contains an alpha buffer\ndefault is true
depth - indicates whether the drawing buffer has a depth buffer\nof at least 16 bits - default is true
\nstencil - indicates whether the drawing buffer has a stencil buffer\nof at least 8 bits
\nantialias - indicates whether or not to perform anti-aliasing\ndefault is false (true in Safari)
\npremultipliedAlpha - indicates that the page compositor will assume\nthe drawing buffer contains colors with pre-multiplied alpha\ndefault is true
\npreserveDrawingBuffer - if true the buffers will not be cleared and\nand will preserve their values until cleared or overwritten by author\n(note that p5 clears automatically on draw loop)\ndefault is true
\nperPixelLighting - if true, per-pixel lighting will be used in the\nlighting shader otherwise per-vertex lighting is used.\ndefault is true.
\nversion - either 1 or 2, to specify which WebGL version to ask for. By\ndefault, WebGL 2 will be requested. If WebGL2 is not available, it will\nfall back to WebGL 1. You can check what version is used with by looking at\nthe global webglVersion
property.
Name of attribute
\n"],"type":[0,"String"]}],[0,{"name":[0,"value"],"description":[0,"New value of named attribute
\n"],"type":[0,"Boolean"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"obj"],"description":[0,"object with key-value pairs
\n"],"type":[0,"Object"]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(255);\n push();\n rotateZ(frameCount * 0.02);\n rotateX(frameCount * 0.02);\n rotateY(frameCount * 0.02);\n fill(0, 0, 0);\n box(50);\n pop();\n}\n
\n\nfunction setup() {\n setAttributes('antialias', true);\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(255);\n push();\n rotateZ(frameCount * 0.02);\n rotateX(frameCount * 0.02);\n rotateY(frameCount * 0.02);\n fill(0, 0, 0);\n box(50);\n pop();\n}\n
\n\n// press the mouse button to disable perPixelLighting\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n noStroke();\n fill(255);\n}\n\nlet lights = [\n { c: '#f00', t: 1.12, p: 1.91, r: 0.2 },\n { c: '#0f0', t: 1.21, p: 1.31, r: 0.2 },\n { c: '#00f', t: 1.37, p: 1.57, r: 0.2 },\n { c: '#ff0', t: 1.12, p: 1.91, r: 0.7 },\n { c: '#0ff', t: 1.21, p: 1.31, r: 0.7 },\n { c: '#f0f', t: 1.37, p: 1.57, r: 0.7 }\n];\n\nfunction draw() {\n let t = millis() / 1000 + 1000;\n background(0);\n directionalLight(color('#222'), 1, 1, 1);\n\n for (let i = 0; i < lights.length; i++) {\n let light = lights[i];\n pointLight(\n color(light.c),\n p5.Vector.fromAngles(t * light.t, t * light.p, width * light.r)\n );\n }\n\n specularMaterial(255);\n sphere(width * 0.1);\n\n rotateX(t * 0.77);\n rotateY(t * 0.83);\n rotateZ(t * 0.91);\n torus(width * 0.3, width * 0.07, 24, 10);\n}\n\nfunction mousePressed() {\n setAttributes('perPixelLighting', false);\n noStroke();\n fill(255);\n}\nfunction mouseReleased() {\n setAttributes('perPixelLighting', true);\n noStroke();\n fill(255);\n}\n
\nA class to describe a high-performance drawing surface for textures.
\nEach p5.Framebuffer
object provides a dedicated drawing surface called\na framebuffer. They're similar to\np5.Graphics objects but can run much faster.\nPerformance is improved because the framebuffer shares the same WebGL\ncontext as the canvas used to create it.
p5.Framebuffer
objects have all the drawing features of the main\ncanvas. Drawing instructions meant for the framebuffer must be placed\nbetween calls to\nmyBuffer.begin() and\nmyBuffer.end(). The resulting image\ncan be applied as a texture by passing the p5.Framebuffer
object to the\ntexture() function, as in texture(myBuffer)
.\nIt can also be displayed on the main canvas by passing it to the\nimage() function, as in image(myBuffer, 0, 0)
.
Note: createFramebuffer() is the\nrecommended way to create an instance of this class.
\n"],"line":[0,76],"params":[1,[[0,{"name":[0,"target"],"description":[0,"sketch instance or\n p5.Graphics\n object.
\n"],"type":[0,"p5.Graphics|p5"]}],[0,{"name":[0,"settings"],"description":[0,"configuration options.
\n"],"type":[0,"Object"],"optional":[0,true]}]]],"chainable":[0,false],"methods":[0,{"resize":[0,{"description":[0,"Resizes the framebuffer to a given width and height.
\nThe parameters, width
and height
, set the dimensions of the\nframebuffer. For example, calling myBuffer.resize(300, 500)
resizes\nthe framebuffer to 300×500 pixels, then sets myBuffer.width
to 300\nand myBuffer.height
500.
Sets the framebuffer's pixel density or returns its current density.
\nComputer displays are grids of little lights called pixels. A display's\npixel density describes how many pixels it packs into an area. Displays\nwith smaller pixels have a higher pixel density and create sharper\nimages.
\nThe parameter, density
, is optional. If a number is passed, as in\nmyBuffer.pixelDensity(1)
, it sets the framebuffer's pixel density. By\ndefault, the framebuffer's pixel density will match that of the canvas\nwhere it was created. All canvases default to match the display's pixel\ndensity.
Calling myBuffer.pixelDensity()
without an argument returns its current\npixel density.
Toggles the framebuffer's autosizing mode or returns the current mode.
\nBy default, the framebuffer automatically resizes to match the canvas\nthat created it. Calling myBuffer.autoSized(false)
disables this\nbehavior and calling myBuffer.autoSized(true)
re-enables it.
Calling myBuffer.autoSized()
without an argument returns true
if\nthe framebuffer automatically resizes and false
if not.
Creates a new\np5.Camera object to use with the framebuffer.
\nThe new camera is initialized with a default position (0, 0, 800)
and a\ndefault perspective projection. Its properties can be controlled with\np5.Camera methods such as myCamera.lookAt(0, 0, 0)
.
Framebuffer cameras should be created between calls to\nmyBuffer.begin() and\nmyBuffer.end() like so:
\nlet myCamera;\n\nmyBuffer.begin();\n\n// Create the camera for the framebuffer.\nmyCamera = myBuffer.createCamera();\n\nmyBuffer.end();\n
\nCalling setCamera() updates the\nframebuffer's projection using the camera.\nresetMatrix() must also be called for the\nview to change properly:
\nmyBuffer.begin();\n\n// Set the camera for the framebuffer.\nsetCamera(myCamera);\n\n// Reset all transformations.\nresetMatrix();\n\n// Draw stuff...\n\nmyBuffer.end();\n
\n"],"path":[0,"p5.Framebuffer/createCamera"]}],"remove":[0,{"description":[0,"Deletes the framebuffer from GPU memory.
\nCalling myBuffer.remove()
frees the GPU memory used by the framebuffer.\nThe framebuffer also uses a bit of memory on the CPU which can be freed\nlike so:
// Delete the framebuffer from GPU memory.\nmyBuffer.remove();\n\n// Delete the framebuffer from CPU memory.\nmyBuffer = undefined;\n
\nNote: All variables that reference the framebuffer must be assigned\nthe value undefined
to delete the framebuffer from CPU memory. If any\nvariable still refers to the framebuffer, then it won't be garbage\ncollected.
Begins drawing shapes to the framebuffer.
\nmyBuffer.begin()
and myBuffer.end()\nallow shapes to be drawn to the framebuffer. myBuffer.begin()
begins\ndrawing to the framebuffer and\nmyBuffer.end() stops drawing to the\nframebuffer. Changes won't be visible until the framebuffer is displayed\nas an image or texture.
Stops drawing shapes to the framebuffer.
\nmyBuffer.begin() and myBuffer.end()
\nallow shapes to be drawn to the framebuffer.\nmyBuffer.begin() begins drawing to\nthe framebuffer and myBuffer.end()
stops drawing to the framebuffer.\nChanges won't be visible until the framebuffer is displayed as an image\nor texture.
Draws to the framebuffer by calling a function that contains drawing\ninstructions.
\nThe parameter, callback
, is a function with the drawing instructions\nfor the framebuffer. For example, calling myBuffer.draw(myFunction)
\nwill call a function named myFunction()
to draw to the framebuffer.\nDoing so has the same effect as the following:
myBuffer.begin();\nmyFunction();\nmyBuffer.end();\n
\n"],"path":[0,"p5.Framebuffer/draw"]}],"loadPixels":[0,{"description":[0,"Loads the current value of each pixel in the framebuffer into its\npixels array.
\nmyBuffer.loadPixels()
must be called before reading from or writing to\nmyBuffer.pixels.
Gets a pixel or a region of pixels from the framebuffer.
\nmyBuffer.get()
is easy to use but it's not as fast as\nmyBuffer.pixels. Use\nmyBuffer.pixels to read many pixel\nvalues.
The version of myBuffer.get()
with no parameters returns the entire\nframebuffer as a a p5.Image object.
The version of myBuffer.get()
with two parameters interprets them as\ncoordinates. It returns an array with the [R, G, B, A]
values of the\npixel at the given point.
The version of myBuffer.get()
with four parameters interprets them as\ncoordinates and dimensions. It returns a subsection of the framebuffer as\na p5.Image object. The first two parameters are\nthe coordinates for the upper-left corner of the subsection. The last two\nparameters are the width and height of the subsection.
Updates the framebuffer with the RGBA values in the\npixels array.
\nmyBuffer.updatePixels()
only needs to be called after changing values\nin the myBuffer.pixels array. Such\nchanges can be made directly after calling\nmyBuffer.loadPixels().
An array containing the color of each pixel in the framebuffer.
\nmyBuffer.loadPixels() must be\ncalled before accessing the myBuffer.pixels
array.\nmyBuffer.updatePixels()\nmust be called after any changes are made.
Note: Updating pixels via this property is slower than drawing to the\nframebuffer directly. Consider using a\np5.Shader object instead of looping over\nmyBuffer.pixels
.
An object that stores the framebuffer's color data.
\nEach framebuffer uses a\nWebGLTexture\nobject internally to store its color data. The myBuffer.color
property\nmakes it possible to pass this data directly to other functions. For\nexample, calling texture(myBuffer.color)
or\nmyShader.setUniform('colorTexture', myBuffer.color)
may be helpful for\nadvanced use cases.
Note: By default, a framebuffer's y-coordinates are flipped compared to\nimages and videos. It's easy to flip a framebuffer's y-coordinates as\nneeded when applying it as a texture. For example, calling\nplane(myBuffer.width, -myBuffer.height)
will flip the framebuffer.
An object that stores the framebuffer's depth data.
\nEach framebuffer uses a\nWebGLTexture\nobject internally to store its depth data. The myBuffer.depth
property\nmakes it possible to pass this data directly to other functions. For\nexample, calling texture(myBuffer.depth)
or\nmyShader.setUniform('depthTexture', myBuffer.depth)
may be helpful for\nadvanced use cases.
Note: By default, a framebuffer's y-coordinates are flipped compared to\nimages and videos. It's easy to flip a framebuffer's y-coordinates as\nneeded when applying it as a texture. For example, calling\nplane(myBuffer.width, -myBuffer.height)
will flip the framebuffer.
Toggles the framebuffer's autosizing mode or returns the current mode.
\nBy default, the framebuffer automatically resizes to match the canvas\nthat created it. Calling myBuffer.autoSized(false)
disables this\nbehavior and calling myBuffer.autoSized(true)
re-enables it.
Calling myBuffer.autoSized()
without an argument returns true
if\nthe framebuffer automatically resizes and false
if not.
whether to automatically resize the framebuffer to match the canvas.
\n"],"type":[0,"Boolean"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5.Framebuffer"],"chainable":[0,false],"return":[0,{"description":[0,"current autosize setting."],"type":[0,"Boolean"]}],"example":[1,[[0,"\n\n// Double-click to toggle the autosizing mode.\n\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n describe('A multicolor sphere on a gray background. The image resizes when the user moves the mouse.');\n}\n\nfunction draw() {\n background(50);\n\n // Draw to the p5.Framebuffer object.\n myBuffer.begin();\n background(200);\n normalMaterial();\n sphere(width / 4);\n myBuffer.end();\n\n // Display the p5.Framebuffer object.\n image(myBuffer, -width / 2, -height / 2);\n}\n\n// Resize the canvas when the user moves the mouse.\nfunction mouseMoved() {\n let w = constrain(mouseX, 0, 100);\n let h = constrain(mouseY, 0, 100);\n resizeCanvas(w, h);\n}\n\n// Toggle autoSizing when the user double-clicks.\n// Note: opened an issue to fix(?) this.\nfunction doubleClicked() {\n let isAuto = myBuffer.autoSized();\n myBuffer.autoSized(!isAuto);\n}\n
\nBegins drawing shapes to the framebuffer.
\nmyBuffer.begin()
and myBuffer.end()\nallow shapes to be drawn to the framebuffer. myBuffer.begin()
begins\ndrawing to the framebuffer and\nmyBuffer.end() stops drawing to the\nframebuffer. Changes won't be visible until the framebuffer is displayed\nas an image or texture.
\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n describe('An empty gray canvas. The canvas gets darker and a rotating, multicolor torus appears while the user presses and holds the mouse.');\n}\n\nfunction draw() {\n background(200);\n\n // Start drawing to the p5.Framebuffer object.\n myBuffer.begin();\n\n background(50);\n rotateY(frameCount * 0.01);\n normalMaterial();\n torus(30);\n\n // Stop drawing to the p5.Framebuffer object.\n myBuffer.end();\n\n // Display the p5.Framebuffer object while\n // the user presses the mouse.\n if (mouseIsPressed === true) {\n image(myBuffer, -50, -50);\n }\n}\n
\nAn object that stores the framebuffer's color data.
\nEach framebuffer uses a\nWebGLTexture\nobject internally to store its color data. The myBuffer.color
property\nmakes it possible to pass this data directly to other functions. For\nexample, calling texture(myBuffer.color)
or\nmyShader.setUniform('colorTexture', myBuffer.color)
may be helpful for\nadvanced use cases.
Note: By default, a framebuffer's y-coordinates are flipped compared to\nimages and videos. It's easy to flip a framebuffer's y-coordinates as\nneeded when applying it as a texture. For example, calling\nplane(myBuffer.width, -myBuffer.height)
will flip the framebuffer.
\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Framebuffer object.\n let myBuffer = createFramebuffer();\n\n // Start drawing to the p5.Framebuffer object.\n myBuffer.begin();\n\n triangle(-25, 25, 0, -25, 25, 25);\n\n // Stop drawing to the p5.Framebuffer object.\n myBuffer.end();\n\n // Use the p5.Framebuffer object's WebGLTexture.\n texture(myBuffer.color);\n\n // Style the plane.\n noStroke();\n\n // Draw the plane.\n plane(myBuffer.width, myBuffer.height);\n\n describe('A white triangle on a gray background.');\n}\n
\nCreates a new\np5.Camera object to use with the framebuffer.
\nThe new camera is initialized with a default position (0, 0, 800)
and a\ndefault perspective projection. Its properties can be controlled with\np5.Camera methods such as myCamera.lookAt(0, 0, 0)
.
Framebuffer cameras should be created between calls to\nmyBuffer.begin() and\nmyBuffer.end() like so:
\nlet myCamera;\n\nmyBuffer.begin();\n\n// Create the camera for the framebuffer.\nmyCamera = myBuffer.createCamera();\n\nmyBuffer.end();\n
\nCalling setCamera() updates the\nframebuffer's projection using the camera.\nresetMatrix() must also be called for the\nview to change properly:
\nmyBuffer.begin();\n\n// Set the camera for the framebuffer.\nsetCamera(myCamera);\n\n// Reset all transformations.\nresetMatrix();\n\n// Draw stuff...\n\nmyBuffer.end();\n
\n"],"line":[0,892],"itemtype":[0,"method"],"class":[0,"p5.Framebuffer"],"chainable":[0,false],"return":[0,{"description":[0,"new camera."],"type":[0,"p5.Camera"]}],"example":[1,[[0,"\n\n// Double-click to toggle between cameras.\n\nlet myBuffer;\nlet cam1;\nlet cam2;\nlet usingCam1 = true;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n // Create the cameras between begin() and end().\n myBuffer.begin();\n\n // Create the first camera.\n // Keep its default settings.\n cam1 = myBuffer.createCamera();\n\n // Create the second camera.\n // Place it at the top-left.\n // Point it at the origin.\n cam2 = myBuffer.createCamera();\n cam2.setPosition(400, -400, 800);\n cam2.lookAt(0, 0, 0);\n\n myBuffer.end();\n\n describe(\n 'A white cube on a gray background. The camera toggles between frontal and aerial views when the user double-clicks.'\n );\n}\n\nfunction draw() {\n // Draw to the p5.Framebuffer object.\n myBuffer.begin();\n background(200);\n\n // Set the camera.\n if (usingCam1 === true) {\n setCamera(cam1);\n } else {\n setCamera(cam2);\n }\n\n // Reset all transformations.\n resetMatrix();\n\n // Draw the box.\n box();\n\n myBuffer.end();\n\n // Display the p5.Framebuffer object.\n image(myBuffer, -50, -50);\n}\n\n// Toggle the current camera when the user double-clicks.\nfunction doubleClicked() {\n if (usingCam1 === true) {\n usingCam1 = false;\n } else {\n usingCam1 = true;\n }\n}\n
\nAn object that stores the framebuffer's depth data.
\nEach framebuffer uses a\nWebGLTexture\nobject internally to store its depth data. The myBuffer.depth
property\nmakes it possible to pass this data directly to other functions. For\nexample, calling texture(myBuffer.depth)
or\nmyShader.setUniform('depthTexture', myBuffer.depth)
may be helpful for\nadvanced use cases.
Note: By default, a framebuffer's y-coordinates are flipped compared to\nimages and videos. It's easy to flip a framebuffer's y-coordinates as\nneeded when applying it as a texture. For example, calling\nplane(myBuffer.width, -myBuffer.height)
will flip the framebuffer.
\n// Note: A \"uniform\" is a global variable within a shader program.\n\n// Create a string with the vertex shader program.\n// The vertex shader is called for each vertex.\nlet vertSrc = `\nprecision highp float;\nattribute vec3 aPosition;\nattribute vec2 aTexCoord;\nuniform mat4 uModelViewMatrix;\nuniform mat4 uProjectionMatrix;\nvarying vec2 vTexCoord;\n\nvoid main() {\n vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);\n gl_Position = uProjectionMatrix * viewModelPosition;\n vTexCoord = aTexCoord;\n}\n`;\n\n// Create a string with the fragment shader program.\n// The fragment shader is called for each pixel.\nlet fragSrc = `\nprecision highp float;\nvarying vec2 vTexCoord;\nuniform sampler2D depth;\n\nvoid main() {\n // Get the pixel's depth value.\n float depthVal = texture2D(depth, vTexCoord).r;\n\n // Set the pixel's color based on its depth.\n gl_FragColor = mix(\n vec4(0., 0., 0., 1.),\n vec4(1., 0., 1., 1.),\n depthVal);\n}\n`;\n\nlet myBuffer;\nlet myShader;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n // Create a p5.Shader object.\n myShader = createShader(vertSrc, fragSrc);\n\n // Compile and apply the shader.\n shader(myShader);\n\n describe('The shadow of a box rotates slowly against a magenta background.');\n}\n\nfunction draw() {\n // Draw to the p5.Framebuffer object.\n myBuffer.begin();\n background(255);\n rotateX(frameCount * 0.01);\n box(20, 20, 80);\n myBuffer.end();\n\n // Set the shader's depth uniform using\n // the framebuffer's depth texture.\n myShader.setUniform('depth', myBuffer.depth);\n\n // Style the plane.\n noStroke();\n\n // Draw the plane.\n plane(myBuffer.width, myBuffer.height);\n}\n
\nDraws to the framebuffer by calling a function that contains drawing\ninstructions.
\nThe parameter, callback
, is a function with the drawing instructions\nfor the framebuffer. For example, calling myBuffer.draw(myFunction)
\nwill call a function named myFunction()
to draw to the framebuffer.\nDoing so has the same effect as the following:
myBuffer.begin();\nmyFunction();\nmyBuffer.end();\n
\n"],"line":[0,1323],"params":[1,[[0,{"name":[0,"callback"],"description":[0,"function that draws to the framebuffer.
\n"],"type":[0,"Function"]}]]],"itemtype":[0,"method"],"class":[0,"p5.Framebuffer"],"chainable":[0,false],"example":[1,[[0,"\n\n// Click the canvas to display the framebuffer.\n\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n describe('An empty gray canvas. The canvas gets darker and a rotating, multicolor torus appears while the user presses and holds the mouse.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw to the p5.Framebuffer object.\n myBuffer.draw(bagel);\n\n // Display the p5.Framebuffer object while\n // the user presses the mouse.\n if (mouseIsPressed === true) {\n image(myBuffer, -50, -50);\n }\n}\n\n// Draw a rotating, multicolor torus.\nfunction bagel() {\n background(50);\n rotateY(frameCount * 0.01);\n normalMaterial();\n torus(30);\n}\n
\nStops drawing shapes to the framebuffer.
\nmyBuffer.begin() and myBuffer.end()
\nallow shapes to be drawn to the framebuffer.\nmyBuffer.begin() begins drawing to\nthe framebuffer and myBuffer.end()
stops drawing to the framebuffer.\nChanges won't be visible until the framebuffer is displayed as an image\nor texture.
\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n describe('An empty gray canvas. The canvas gets darker and a rotating, multicolor torus appears while the user presses and holds the mouse.');\n}\n\nfunction draw() {\n background(200);\n\n // Start drawing to the p5.Framebuffer object.\n myBuffer.begin();\n\n background(50);\n rotateY(frameCount * 0.01);\n normalMaterial();\n torus(30);\n\n // Stop drawing to the p5.Framebuffer object.\n myBuffer.end();\n\n // Display the p5.Framebuffer object while\n // the user presses the mouse.\n if (mouseIsPressed === true) {\n image(myBuffer, -50, -50);\n }\n}\n
\nGets a pixel or a region of pixels from the framebuffer.
\nmyBuffer.get()
is easy to use but it's not as fast as\nmyBuffer.pixels. Use\nmyBuffer.pixels to read many pixel\nvalues.
The version of myBuffer.get()
with no parameters returns the entire\nframebuffer as a a p5.Image object.
The version of myBuffer.get()
with two parameters interprets them as\ncoordinates. It returns an array with the [R, G, B, A]
values of the\npixel at the given point.
The version of myBuffer.get()
with four parameters interprets them as\ncoordinates and dimensions. It returns a subsection of the framebuffer as\na p5.Image object. The first two parameters are\nthe coordinates for the upper-left corner of the subsection. The last two\nparameters are the width and height of the subsection.
x-coordinate of the pixel. Defaults to 0.
\n"],"type":[0,"Number"]}],[0,{"name":[0,"y"],"description":[0,"y-coordinate of the pixel. Defaults to 0.
\n"],"type":[0,"Number"]}],[0,{"name":[0,"w"],"description":[0,"width of the subsection to be returned.
\n"],"type":[0,"Number"]}],[0,{"name":[0,"h"],"description":[0,"height of the subsection to be returned.
\n"],"type":[0,"Number"]}]]]}],[0,{"params":[1,[]]}],[0,{"params":[1,[[0,{"name":[0,"x"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"y"],"description":[0,""],"type":[0,"Number"]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5.Framebuffer"],"chainable":[0,false],"return":[0,{"description":[0,"subsection as a p5.Image object."],"type":[0,"p5.Image"]}],"isConstructor":[0,false],"path":[0,"p5.Framebuffer/get"]}],"render":[0,null]}],[0,{"id":[0,"en/p5.Framebuffer/loadPixels.mdx"],"slug":[0,"en/p5framebuffer/loadpixels"],"body":[0,"\n\n# loadPixels\n"],"collection":[0,"reference"],"data":[0,{"title":[0,"loadPixels()"],"module":[0,"Rendering"],"submodule":[0,""],"file":[0,"src/webgl/p5.Framebuffer.js"],"description":[0,"Loads the current value of each pixel in the framebuffer into its\npixels array.
\nmyBuffer.loadPixels()
must be called before reading from or writing to\nmyBuffer.pixels.
\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Framebuffer object.\n let myBuffer = createFramebuffer();\n\n // Load the pixels array.\n myBuffer.loadPixels();\n\n // Get the number of pixels in the\n // top half of the framebuffer.\n let numPixels = myBuffer.pixels.length / 2;\n\n // Set the framebuffer's top half to pink.\n for (let i = 0; i < numPixels; i += 4) {\n myBuffer.pixels[i] = 255;\n myBuffer.pixels[i + 1] = 102;\n myBuffer.pixels[i + 2] = 204;\n myBuffer.pixels[i + 3] = 255;\n }\n\n // Update the pixels array.\n myBuffer.updatePixels();\n\n // Draw the p5.Framebuffer object to the canvas.\n image(myBuffer, -50, -50);\n\n describe('A pink rectangle above a gray rectangle.');\n}\n
\nSets the framebuffer's pixel density or returns its current density.
\nComputer displays are grids of little lights called pixels. A display's\npixel density describes how many pixels it packs into an area. Displays\nwith smaller pixels have a higher pixel density and create sharper\nimages.
\nThe parameter, density
, is optional. If a number is passed, as in\nmyBuffer.pixelDensity(1)
, it sets the framebuffer's pixel density. By\ndefault, the framebuffer's pixel density will match that of the canvas\nwhere it was created. All canvases default to match the display's pixel\ndensity.
Calling myBuffer.pixelDensity()
without an argument returns its current\npixel density.
pixel density to set.
\n"],"type":[0,"Number"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5.Framebuffer"],"chainable":[0,false],"return":[0,{"description":[0,"current pixel density."],"type":[0,"Number"]}],"example":[1,[[0,"\n\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n describe(\"A white circle on a gray canvas. The circle's edge become fuzzy while the user presses and holds the mouse.\");\n}\n\nfunction draw() {\n // Draw to the p5.Framebuffer object.\n myBuffer.begin();\n background(200);\n circle(0, 0, 40);\n myBuffer.end();\n\n // Display the p5.Framebuffer object.\n image(myBuffer, -50, -50);\n}\n\n// Decrease the pixel density when the user\n// presses the mouse.\nfunction mousePressed() {\n myBuffer.pixelDensity(1);\n}\n\n// Increase the pixel density when the user\n// releases the mouse.\nfunction mouseReleased() {\n myBuffer.pixelDensity(2);\n}\n
\n\nlet myBuffer;\nlet myFont;\n\n// Load a font and create a p5.Font object.\nfunction preload() {\n myFont = loadFont('/assets/inconsolata.otf');\n}\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n // Get the p5.Framebuffer object's pixel density.\n let d = myBuffer.pixelDensity();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont(myFont);\n textSize(16);\n fill(0);\n\n // Display the pixel density.\n text(`Density: ${d}`, 0, 0);\n\n describe(`The text \"Density: ${d}\" written in black on a gray background.`);\n}\n
\nAn array containing the color of each pixel in the framebuffer.
\nmyBuffer.loadPixels() must be\ncalled before accessing the myBuffer.pixels
array.\nmyBuffer.updatePixels()\nmust be called after any changes are made.
Note: Updating pixels via this property is slower than drawing to the\nframebuffer directly. Consider using a\np5.Shader object instead of looping over\nmyBuffer.pixels
.
\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Framebuffer object.\n let myBuffer = createFramebuffer();\n\n // Load the pixels array.\n myBuffer.loadPixels();\n\n // Get the number of pixels in the\n // top half of the framebuffer.\n let numPixels = myBuffer.pixels.length / 2;\n\n // Set the framebuffer's top half to pink.\n for (let i = 0; i < numPixels; i += 4) {\n myBuffer.pixels[i] = 255;\n myBuffer.pixels[i + 1] = 102;\n myBuffer.pixels[i + 2] = 204;\n myBuffer.pixels[i + 3] = 255;\n }\n\n // Update the pixels array.\n myBuffer.updatePixels();\n\n // Draw the p5.Framebuffer object to the canvas.\n image(myBuffer, -50, -50);\n\n describe('A pink rectangle above a gray rectangle.');\n}\n
\nDeletes the framebuffer from GPU memory.
\nCalling myBuffer.remove()
frees the GPU memory used by the framebuffer.\nThe framebuffer also uses a bit of memory on the CPU which can be freed\nlike so:
// Delete the framebuffer from GPU memory.\nmyBuffer.remove();\n\n// Delete the framebuffer from CPU memory.\nmyBuffer = undefined;\n
\nNote: All variables that reference the framebuffer must be assigned\nthe value undefined
to delete the framebuffer from CPU memory. If any\nvariable still refers to the framebuffer, then it won't be garbage\ncollected.
\n// Double-click to remove the p5.Framebuffer object.\n\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create an options object.\n let options = { width: 60, height: 60 };\n\n // Create a p5.Framebuffer object and\n // configure it using options.\n myBuffer = createFramebuffer(options);\n\n describe('A white circle at the center of a dark gray square disappears when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Display the p5.Framebuffer object if\n // it's available.\n if (myBuffer) {\n // Draw to the p5.Framebuffer object.\n myBuffer.begin();\n background(100);\n circle(0, 0, 20);\n myBuffer.end();\n\n image(myBuffer, -30, -30);\n }\n}\n\n// Remove the p5.Framebuffer object when the\n// the user double-clicks.\nfunction doubleClicked() {\n // Delete the framebuffer from GPU memory.\n myBuffer.remove();\n\n // Delete the framebuffer from CPU memory.\n myBuffer = undefined;\n}\n
\nResizes the framebuffer to a given width and height.
\nThe parameters, width
and height
, set the dimensions of the\nframebuffer. For example, calling myBuffer.resize(300, 500)
resizes\nthe framebuffer to 300×500 pixels, then sets myBuffer.width
to 300\nand myBuffer.height
500.
width of the framebuffer.
\n"],"type":[0,"Number"]}],[0,{"name":[0,"height"],"description":[0,"height of the framebuffer.
\n"],"type":[0,"Number"]}]]],"itemtype":[0,"method"],"class":[0,"p5.Framebuffer"],"chainable":[0,false],"example":[1,[[0,"\n\nlet myBuffer;\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n // Create a p5.Framebuffer object.\n myBuffer = createFramebuffer();\n\n describe('A multicolor sphere on a white surface. The image grows larger or smaller when the user moves the mouse, revealing a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw to the p5.Framebuffer object.\n myBuffer.begin();\n background(255);\n normalMaterial();\n sphere(20);\n myBuffer.end();\n\n // Display the p5.Framebuffer object.\n image(myBuffer, -50, -50);\n}\n\n// Resize the p5.Framebuffer object when the\n// user moves the mouse.\nfunction mouseMoved() {\n myBuffer.resize(mouseX, mouseY);\n}\n
\nUpdates the framebuffer with the RGBA values in the\npixels array.
\nmyBuffer.updatePixels()
only needs to be called after changing values\nin the myBuffer.pixels array. Such\nchanges can be made directly after calling\nmyBuffer.loadPixels().
\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n background(200);\n\n // Create a p5.Framebuffer object.\n let myBuffer = createFramebuffer();\n\n // Load the pixels array.\n myBuffer.loadPixels();\n\n // Get the number of pixels in the\n // top half of the framebuffer.\n let numPixels = myBuffer.pixels.length / 2;\n\n // Set the framebuffer's top half to pink.\n for (let i = 0; i < numPixels; i += 4) {\n myBuffer.pixels[i] = 255;\n myBuffer.pixels[i + 1] = 102;\n myBuffer.pixels[i + 2] = 204;\n myBuffer.pixels[i + 3] = 255;\n }\n\n // Update the pixels array.\n myBuffer.updatePixels();\n\n // Draw the p5.Framebuffer object to the canvas.\n image(myBuffer, -50, -50);\n\n describe('A pink rectangle above a gray rectangle.');\n}\n
\nA class to describe a drawing surface that's separate from the main canvas.
\nEach p5.Graphics
object provides a dedicated drawing surface called a\ngraphics buffer. Graphics buffers are helpful when drawing should happen\noffscreen. For example, separate scenes can be drawn offscreen and\ndisplayed only when needed.
p5.Graphics
objects have nearly all the drawing features of the main\ncanvas. For example, calling the method myGraphics.circle(50, 50, 20)
\ndraws to the graphics buffer. The resulting image can be displayed on the\nmain canvas by passing the p5.Graphics
object to the\nimage() function, as in image(myGraphics, 0, 0)
.
Note: createGraphics() is the recommended\nway to create an instance of this class.
\n"],"line":[0,10],"params":[1,[[0,{"name":[0,"width"],"description":[0,"width of the graphics buffer in pixels.
\n"],"type":[0,"Number"]}],[0,{"name":[0,"height"],"description":[0,"height of the graphics buffer in pixels.
\n"],"type":[0,"Number"]}],[0,{"name":[0,"renderer"],"description":[0,"renderer to use, either P2D or WEBGL.
\n"],"type":[0,"Constant"]}],[0,{"name":[0,"pInst"],"description":[0,"sketch instance.
\n"],"type":[0,"P5"],"optional":[0,true]}],[0,{"name":[0,"canvas"],"description":[0,"existing <canvas>
element to use.
\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object.\n pg = createGraphics(50, 50);\n\n // Draw to the p5.Graphics object.\n pg.background(100);\n pg.circle(25, 25, 20);\n\n describe('A dark gray square with a white circle at its center drawn on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Display the p5.Graphics object.\n image(pg, 25, 25);\n}\n
\n\n// Click the canvas to display the graphics buffer.\n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object.\n pg = createGraphics(50, 50);\n\n describe('A square appears on a gray background when the user presses the mouse. The square cycles between white and black.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the background color.\n let bg = frameCount % 255;\n\n // Draw to the p5.Graphics object.\n pg.background(bg);\n\n // Display the p5.Graphics object while\n // the user presses the mouse.\n if (mouseIsPressed === true) {\n image(pg, 25, 25);\n }\n}\n
\nResets the graphics buffer's transformations and lighting.
\nBy default, the main canvas resets certain transformation and lighting\nvalues each time draw() executes. p5.Graphics
\nobjects must reset these values manually by calling myGraphics.reset()
.
Removes the graphics buffer from the web page.
\nCalling myGraphics.remove()
removes the graphics buffer's\n element from the web page. The graphics buffer also uses\na bit of memory on the CPU that can be freed like so:
// Remove the graphics buffer from the web page.\nmyGraphics.remove();\n\n// Delete the graphics buffer from CPU memory.\nmyGraphics = undefined;\n
\nNote: All variables that reference the graphics buffer must be assigned\nthe value undefined
to delete the graphics buffer from CPU memory. If any\nvariable still refers to the graphics buffer, then it won't be garbage\ncollected.
Creates a new p5.Framebuffer object with\nthe same WebGL context as the graphics buffer.
\np5.Framebuffer objects are separate drawing\nsurfaces that can be used as textures in WebGL mode. They're similar to\np5.Graphics objects and generally run much\nfaster when used as textures. Creating a\np5.Framebuffer object in the same context\nas the graphics buffer makes this speedup possible.
\nThe parameter, options
, is optional. An object can be passed to configure\nthe p5.Framebuffer object. The available\nproperties are:
format
: data format of the texture, either UNSIGNED_BYTE
, FLOAT
, or HALF_FLOAT
. Default is UNSIGNED_BYTE
.channels
: whether to store RGB
or RGBA
color channels. Default is to match the graphics buffer which is RGBA
.depth
: whether to include a depth buffer. Default is true
.depthFormat
: data format of depth information, either UNSIGNED_INT
or FLOAT
. Default is FLOAT
.stencil
: whether to include a stencil buffer for masking. depth
must be true
for this feature to work. Defaults to the value of depth
which is true
.antialias
: whether to perform anti-aliasing. If set to true
, as in { antialias: true }
, 2 samples will be used by default. The number of samples can also be set, as in { antialias: 4 }
. Default is to match setAttributes() which is false
(true
in Safari).width
: width of the p5.Framebuffer object. Default is to always match the graphics buffer width.height
: height of the p5.Framebuffer object. Default is to always match the graphics buffer height.density
: pixel density of the p5.Framebuffer object. Default is to always match the graphics buffer pixel density.textureFiltering
: how to read values from the p5.Framebuffer object. Either LINEAR
(nearby pixels will be interpolated) or NEAREST
(no interpolation). Generally, use LINEAR
when using the texture as an image and NEAREST
if reading the texture as data. Default is LINEAR
.If the width
, height
, or density
attributes are set, they won't\nautomatically match the graphics buffer and must be changed manually.
Creates a new p5.Framebuffer object with\nthe same WebGL context as the graphics buffer.
\np5.Framebuffer objects are separate drawing\nsurfaces that can be used as textures in WebGL mode. They're similar to\np5.Graphics objects and generally run much\nfaster when used as textures. Creating a\np5.Framebuffer object in the same context\nas the graphics buffer makes this speedup possible.
\nThe parameter, options
, is optional. An object can be passed to configure\nthe p5.Framebuffer object. The available\nproperties are:
format
: data format of the texture, either UNSIGNED_BYTE
, FLOAT
, or HALF_FLOAT
. Default is UNSIGNED_BYTE
.channels
: whether to store RGB
or RGBA
color channels. Default is to match the graphics buffer which is RGBA
.depth
: whether to include a depth buffer. Default is true
.depthFormat
: data format of depth information, either UNSIGNED_INT
or FLOAT
. Default is FLOAT
.stencil
: whether to include a stencil buffer for masking. depth
must be true
for this feature to work. Defaults to the value of depth
which is true
.antialias
: whether to perform anti-aliasing. If set to true
, as in { antialias: true }
, 2 samples will be used by default. The number of samples can also be set, as in { antialias: 4 }
. Default is to match setAttributes() which is false
(true
in Safari).width
: width of the p5.Framebuffer object. Default is to always match the graphics buffer width.height
: height of the p5.Framebuffer object. Default is to always match the graphics buffer height.density
: pixel density of the p5.Framebuffer object. Default is to always match the graphics buffer pixel density.textureFiltering
: how to read values from the p5.Framebuffer object. Either LINEAR
(nearby pixels will be interpolated) or NEAREST
(no interpolation). Generally, use LINEAR
when using the texture as an image and NEAREST
if reading the texture as data. Default is LINEAR
.If the width
, height
, or density
attributes are set, they won't\nautomatically match the graphics buffer and must be changed manually.
configuration options.
\n"],"type":[0,"Object"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5.Graphics"],"chainable":[0,false],"return":[0,{"description":[0,"new framebuffer."],"type":[0,"p5.Framebuffer"]}],"example":[1,[[0,"\n\n// Click and hold a mouse button to change shapes.\n\nlet pg;\nlet torusLayer;\nlet boxLayer;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object using WebGL mode.\n pg = createGraphics(100, 100, WEBGL);\n\n // Create the p5.Framebuffer objects.\n torusLayer = pg.createFramebuffer();\n boxLayer = pg.createFramebuffer();\n\n describe('A grid of white toruses rotating against a dark gray background. The shapes become boxes while the user holds a mouse button.');\n}\n\nfunction draw() {\n // Update and draw the layers offscreen.\n drawTorus();\n drawBox();\n\n // Choose the layer to display.\n let layer;\n if (mouseIsPressed === true) {\n layer = boxLayer;\n } else {\n layer = torusLayer;\n }\n\n // Draw to the p5.Graphics object.\n pg.background(50);\n\n // Iterate from left to right.\n for (let x = -50; x < 50; x += 25) {\n // Iterate from top to bottom.\n for (let y = -50; y < 50; y += 25) {\n // Draw the layer to the p5.Graphics object\n pg.image(layer, x, y, 25, 25);\n }\n }\n\n // Display the p5.Graphics object.\n image(pg, 0, 0);\n}\n\n// Update and draw the torus layer offscreen.\nfunction drawTorus() {\n // Start drawing to the torus p5.Framebuffer.\n torusLayer.begin();\n\n // Clear the drawing surface.\n pg.clear();\n\n // Turn on the lights.\n pg.lights();\n\n // Rotate the coordinate system.\n pg.rotateX(frameCount * 0.01);\n pg.rotateY(frameCount * 0.01);\n\n // Style the torus.\n pg.noStroke();\n\n // Draw the torus.\n pg.torus(20);\n\n // Start drawing to the torus p5.Framebuffer.\n torusLayer.end();\n}\n\n// Update and draw the box layer offscreen.\nfunction drawBox() {\n // Start drawing to the box p5.Framebuffer.\n boxLayer.begin();\n\n // Clear the drawing surface.\n pg.clear();\n\n // Turn on the lights.\n pg.lights();\n\n // Rotate the coordinate system.\n pg.rotateX(frameCount * 0.01);\n pg.rotateY(frameCount * 0.01);\n\n // Style the box.\n pg.noStroke();\n\n // Draw the box.\n pg.box(30);\n\n // Start drawing to the box p5.Framebuffer.\n boxLayer.end();\n}\n
\n\n// Click and hold a mouse button to change shapes.\n\nlet pg;\nlet torusLayer;\nlet boxLayer;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create an options object.\n let options = { width: 25, height: 25 };\n\n // Create a p5.Graphics object using WebGL mode.\n pg = createGraphics(100, 100, WEBGL);\n\n // Create the p5.Framebuffer objects.\n // Use options for configuration.\n torusLayer = pg.createFramebuffer(options);\n boxLayer = pg.createFramebuffer(options);\n\n describe('A grid of white toruses rotating against a dark gray background. The shapes become boxes while the user holds a mouse button.');\n}\n\nfunction draw() {\n // Update and draw the layers offscreen.\n drawTorus();\n drawBox();\n\n // Choose the layer to display.\n let layer;\n if (mouseIsPressed === true) {\n layer = boxLayer;\n } else {\n layer = torusLayer;\n }\n\n // Draw to the p5.Graphics object.\n pg.background(50);\n\n // Iterate from left to right.\n for (let x = -50; x < 50; x += 25) {\n // Iterate from top to bottom.\n for (let y = -50; y < 50; y += 25) {\n // Draw the layer to the p5.Graphics object\n pg.image(layer, x, y);\n }\n }\n\n // Display the p5.Graphics object.\n image(pg, 0, 0);\n}\n\n// Update and draw the torus layer offscreen.\nfunction drawTorus() {\n // Start drawing to the torus p5.Framebuffer.\n torusLayer.begin();\n\n // Clear the drawing surface.\n pg.clear();\n\n // Turn on the lights.\n pg.lights();\n\n // Rotate the coordinate system.\n pg.rotateX(frameCount * 0.01);\n pg.rotateY(frameCount * 0.01);\n\n // Style the torus.\n pg.noStroke();\n\n // Draw the torus.\n pg.torus(5, 2.5);\n\n // Start drawing to the torus p5.Framebuffer.\n torusLayer.end();\n}\n\n// Update and draw the box layer offscreen.\nfunction drawBox() {\n // Start drawing to the box p5.Framebuffer.\n boxLayer.begin();\n\n // Clear the drawing surface.\n pg.clear();\n\n // Turn on the lights.\n pg.lights();\n\n // Rotate the coordinate system.\n pg.rotateX(frameCount * 0.01);\n pg.rotateY(frameCount * 0.01);\n\n // Style the box.\n pg.noStroke();\n\n // Draw the box.\n pg.box(7.5);\n\n // Start drawing to the box p5.Framebuffer.\n boxLayer.end();\n}\n
\nRemoves the graphics buffer from the web page.
\nCalling myGraphics.remove()
removes the graphics buffer's\n element from the web page. The graphics buffer also uses\na bit of memory on the CPU that can be freed like so:
// Remove the graphics buffer from the web page.\nmyGraphics.remove();\n\n// Delete the graphics buffer from CPU memory.\nmyGraphics = undefined;\n
\nNote: All variables that reference the graphics buffer must be assigned\nthe value undefined
to delete the graphics buffer from CPU memory. If any\nvariable still refers to the graphics buffer, then it won't be garbage\ncollected.
\n// Double-click to remove the p5.Graphics object.\n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object.\n pg = createGraphics(60, 60);\n\n // Draw to the p5.Graphics object.\n pg.background(100);\n pg.circle(30, 30, 20);\n\n describe('A white circle at the center of a dark gray square disappears when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Display the p5.Graphics object if\n // it's available.\n if (pg) {\n image(pg, 20, 20);\n }\n}\n\n// Remove the p5.Graphics object when the\n// the user double-clicks.\nfunction doubleClicked() {\n // Remove the p5.Graphics object from the web page.\n pg.remove();\n pg = undefined;\n}\n
\nResets the graphics buffer's transformations and lighting.
\nBy default, the main canvas resets certain transformation and lighting\nvalues each time draw() executes. p5.Graphics
\nobjects must reset these values manually by calling myGraphics.reset()
.
\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object.\n pg = createGraphics(60, 60);\n\n describe('A white circle moves downward slowly within a dark square. The circle resets at the top of the dark square when the user presses the mouse.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the p5.Graphics object's coordinate system.\n // The translation accumulates; the white circle moves.\n pg.translate(0, 0.1);\n\n // Draw to the p5.Graphics object.\n pg.background(100);\n pg.circle(30, 0, 10);\n\n // Display the p5.Graphics object.\n image(pg, 20, 20);\n\n // Translate the main canvas' coordinate system.\n // The translation doesn't accumulate; the dark\n // square is always in the same place.\n translate(0, 0.1);\n\n // Reset the p5.Graphics object when the\n // user presses the mouse.\n if (mouseIsPressed === true) {\n pg.reset();\n }\n}\n
\n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object.\n pg = createGraphics(60, 60);\n\n describe('A white circle at the center of a dark gray square. The image is drawn on a light gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the p5.Graphics object's coordinate system.\n pg.translate(30, 30);\n\n // Draw to the p5.Graphics object.\n pg.background(100);\n pg.circle(0, 0, 10);\n\n // Display the p5.Graphics object.\n image(pg, 20, 20);\n\n // Reset the p5.Graphics object automatically.\n pg.reset();\n}\n
\n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object using WebGL mode.\n pg = createGraphics(100, 100, WEBGL);\n\n describe(\"A sphere lit from above with a red light. The sphere's surface becomes glossy while the user clicks and holds the mouse.\");\n}\n\nfunction draw() {\n background(200);\n\n // Add a red point light from the top-right.\n pg.pointLight(255, 0, 0, 50, -100, 50);\n\n // Style the sphere.\n // It should appear glossy when the\n // lighting values are reset.\n pg.noStroke();\n pg.specularMaterial(255);\n pg.shininess(100);\n\n // Draw the sphere.\n pg.sphere(30);\n\n // Display the p5.Graphics object.\n image(pg, -50, -50);\n\n // Reset the p5.Graphics object when\n // the user presses the mouse.\n if (mouseIsPressed === true) {\n pg.reset();\n }\n}\n
\n\nlet pg;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Graphics object using WebGL mode.\n pg = createGraphics(100, 100, WEBGL);\n\n describe('A sphere with a glossy surface is lit from the top-right by a red light.');\n}\n\nfunction draw() {\n background(200);\n\n // Add a red point light from the top-right.\n pg.pointLight(255, 0, 0, 50, -100, 50);\n\n // Style the sphere.\n pg.noStroke();\n pg.specularMaterial(255);\n pg.shininess(100);\n\n // Draw the sphere.\n pg.sphere(30);\n\n // Display the p5.Graphics object.\n image(pg, 0, 0);\n\n // Reset the p5.Graphics object automatically.\n pg.reset();\n}\n
\nMain graphics and rendering context, as well as the base API\nimplementation for p5.js \"core\". To be used as the superclass for\nRenderer2D and Renderer3D classes, respectively.
\n"],"line":[0,10],"params":[1,[[0,{"name":[0,"elt"],"description":[0,"DOM node that is wrapped
\n"],"type":[0,"HTMLElement"]}],[0,{"name":[0,"pInst"],"description":[0,"pointer to p5 instance
\n"],"type":[0,"P5"],"optional":[0,true]}],[0,{"name":[0,"isMainCanvas"],"description":[0,"whether we're using it as main canvas
\n"],"type":[0,"Boolean"],"optional":[0,true]}]]],"chainable":[0,false],"isConstructor":[0,true],"path":[0,"p5/p5.Renderer"]}],"render":[0,null]}],"entries":[1,[]]}]]]}],[0,{"name":[0,"गणित"],"subcats":[1,[[0,{"name":[0],"entry":[0],"entries":[1,[]]}],[0,{"name":[0,"गणना"],"entry":[0],"entries":[1,[[0,{"id":[0,"hi/p5/abs.mdx"],"slug":[0,"hi/p5/abs"],"body":[0,"\n\n# abs\n"],"collection":[0,"reference"],"data":[0,{"title":[0,"abs()"],"module":[0,"गणित"],"submodule":[0,"गणना"],"file":[0,"src/math/calculation.js"],"description":[0,"किसी संख्या के पूर्ण मान की गणना करता है।
\nकिसी संख्या का निरपेक्ष मान संख्या रेखा पर शून्य से उसकी दूरी है। -5 और 5 दोनों शून्य से पांच इकाई दूर हैं, इसलिए abs(-5)
कहा जा रहा है और abs(5)
दोनों 5 लौटाते हैं। किसी संख्या का निरपेक्ष मान हमेशा होता है सकारात्मक.
गणना करने के लिए संख्या।
\n"],"type":[0,"संख्या"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"दी गई संख्या का निरपेक्ष मान."],"type":[0,"संख्या"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square with a vertical black line that divides it in half. A white rectangle gets taller when the user moves the mouse away from the line.');\n}\n\nfunction draw() {\n background(200);\n\n // Divide the canvas.\n line(50, 0, 50, 100);\n\n // Calculate the mouse's distance from the middle.\n let h = abs(mouseX - 50);\n\n // Draw a rectangle based on the mouse's distance\n // from the middle.\n rect(0, 100 - h, 100, h);\n}\n
\nनिकटतम पूर्णांक मान की गणना करता है जो किसी संख्या से बड़ा या उसके बराबर है।
\n\n\nउदाहरण के लिए, ceil(9.03)
और ceil(9.97)
को कॉल करना\nदोनों मान लौटाते हैं\n\n\n10.
संख्या को पूर्णांकित किया जाना है।
"],"type":[0,"संख्या"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"पूर्णांकित संख्या."],"type":[0,"पूर्णांक"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use RGB color with values from 0 to 1.\n colorMode(RGB, 1);\n\n noStroke();\n\n // Draw the left rectangle.\n let r = 0.3;\n fill(r, 0, 0);\n rect(0, 0, 50, 100);\n\n // Round r up to 1.\n r = ceil(r);\n\n // Draw the right rectangle.\n fill(r, 0, 0);\n rect(50, 0, 50, 100);\n\n describe('Two rectangles. The one on the left is dark red and the one on the right is bright red.');\n}\n
\nकिसी संख्या को न्यूनतम और अधिकतम मान के बीच सीमित करता है।
\n"],"line":[0,91],"params":[1,[[0,{"name":[0,"n"],"description":[0,"बाधित करने के लिए संख्या।
\n"],"type":[0,"संख्या"]}],[0,{"name":[0,"low"],"description":[0,"न्यूनतम सीमा.
\n"],"type":[0,"संख्या"]}],[0,{"name":[0,"high"],"description":[0,"अधिकतम सीमा.
\n"],"type":[0,"संख्या"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"विवश संख्या."],"type":[0,"संख्या"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black dot drawn on a gray square follows the mouse from left to right. Its movement is constrained to the middle third of the square.');\n}\n\nfunction draw() {\n background(200);\n\n let x = constrain(mouseX, 33, 67);\n let y = 50;\n\n strokeWeight(5);\n point(x, y);\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Two vertical lines. Two circles move horizontally with the mouse. One circle stops at the vertical lines.');\n}\n\nfunction draw() {\n background(200);\n\n // Set boundaries and draw them.\n let leftWall = 25;\n let rightWall = 75;\n line(leftWall, 0, leftWall, 100);\n line(rightWall, 0, rightWall, 100);\n\n // Draw a circle that follows the mouse freely.\n fill(255);\n circle(mouseX, 33, 9);\n\n // Draw a circle that's constrained.\n let xc = constrain(mouseX, leftWall, rightWall);\n fill(0);\n circle(xc, 67, 9);\n}\n
\nदो बिंदुओं के बीच की दूरी की गणना करता है।
\nचार मापदंडों के साथ dist()
का संस्करण दूरी की गणना करता है दो में आयाम.
छह मापदंडों के साथ dist()
का संस्करण दूरी की गणना करता है तीन में आयाम.
गणना करने के लिए p5.Vector.dist() का उपयोग करें दो p5.Vector के बीच की दूरी वस्तुएं.
\n"],"line":[0,155],"overloads":[1,[[0,{"params":[1,[[0,{"name":[0,"x1"],"description":[0,"x-पहले बिंदु का निर्देशांक।
\n"],"type":[0,"संख्या"]}],[0,{"name":[0,"y1"],"description":[0,"y-पहले बिंदु का निर्देशांक।
\n"],"type":[0,"संख्या"]}],[0,{"name":[0,"x2"],"description":[0,"दूसरे बिंदु का x-निर्देशांक।
\n"],"type":[0,"संख्या"]}],[0,{"name":[0,"y2"],"description":[0,"y-दूसरे बिंदु का निर्देशांक।
\n"],"type":[0,"संख्या"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"x1"],"description":[0,""],"type":[0,"संख्या"]}],[0,{"name":[0,"y1"],"description":[0,""],"type":[0,"संख्या"]}],[0,{"name":[0,"z1"],"description":[0,"z-पहले बिंदु का निर्देशांक।
\n"],"type":[0,"संख्या"]}],[0,{"name":[0,"x2"],"description":[0,""],"type":[0,"संख्या"]}],[0,{"name":[0,"y2"],"description":[0,""],"type":[0,"संख्या"]}],[0,{"name":[0,"z2"],"description":[0,"दूसरे बिंदु का z-निर्देशांक।
\n"],"type":[0,"संख्या"]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"दो बिंदुओं के बीच की दूरी."],"type":[0,"संख्या"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the coordinates.\n let x1 = 10;\n let y1 = 50;\n let x2 = 90;\n let y2 = 50;\n\n // Draw the points and a line connecting them.\n line(x1, y1, x2, y2);\n strokeWeight(5);\n point(x1, y1);\n point(x2, y2);\n\n // Calculate the distance.\n let d = dist(x1, y1, x2, y2);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the distance.\n text(d, 43, 40);\n\n describe('Two dots connected by a horizontal line. The number 80 is written above the center of the line.');\n}\n
\nनिकटतम पूर्णांक मान की गणना करता है जो किसी संख्या के मान से कम या उसके बराबर है।
\n"],"line":[0,294],"params":[1,[[0,{"name":[0,"n"],"description":[0,"संख्या को पूर्णांकित करना है।
\n"],"type":[0,"संख्या"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"पूर्णांकित संख्या."],"type":[0,"पूर्णांक"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use RGB color with values from 0 to 1.\n colorMode(RGB, 1);\n\n noStroke();\n\n // Draw the left rectangle.\n let r = 0.8;\n fill(r, 0, 0);\n rect(0, 0, 50, 100);\n\n // Round r down to 0.\n r = floor(r);\n\n // Draw the right rectangle.\n fill(r, 0, 0);\n rect(50, 0, 50, 100);\n\n describe('Two rectangles. The one on the left is bright red and the one on the right is black.');\n}\n
\nकिसी संख्या के भिन्नात्मक भाग की गणना करता है।
\nकिसी संख्या के भिन्नात्मक भाग में उसके दशमलव मान शामिल होते हैं। उदाहरण के लिए, fract(12.34)
0.34 लौटाता है।
संख्या जिसका भिन्नात्मक भाग मिलेगा।
\n"],"type":[0,"संख्या"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"n का भिन्नात्मक भाग."],"type":[0,"संख्या"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Original number.\n let n = 56.78;\n text(n, 50, 33);\n\n // Fractional part.\n let f = fract(n);\n text(f, 50, 67);\n\n describe('The number 56.78 written above the number 0.78.');\n}\n
\nएक विशिष्ट वृद्धि पर दो संख्याओं के बीच एक संख्या की गणना करता है।
\namt
पैरामीटर दो संख्याओं के बीच अंतरण की मात्रा है। 0.0 पहली संख्या के बराबर है, 0.1 पहली संख्या के बहुत करीब है, 0.5 बीच में आधा है, और 1.0 दूसरी संख्या के बराबर है। lerp()
फ़ंक्शन सीधे रास्ते पर गति बनाने और बिंदीदार रेखाएँ खींचने के लिए सुविधाजनक है।
यदि amt
का मान 0 से कम या 1 से अधिक है, lerp()
मूल अंतराल के बाहर एक संख्या लौटाएगा। उदाहरण के लिए, lerp(0, 10, 1.5)
को कॉल करने पर 15 वापस आएगा।
पहला मान.
\n"],"type":[0,"संख्या"]}],[0,{"name":[0,"stop"],"description":[0,"दूसरा मान.
\n"],"type":[0,"संख्या"]}],[0,{"name":[0,"amt"],"description":[0,"संख्या.
\n"],"type":[0,"संख्या"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"लुप्त मूल्य."],"type":[0,"संख्या"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Declare variables for coordinates.\n let a = 20;\n let b = 80;\n let c = lerp(a, b, 0.2);\n let d = lerp(a, b, 0.5);\n let e = lerp(a, b, 0.8);\n\n strokeWeight(5);\n\n // Draw the original points in black.\n stroke(0);\n point(a, 50);\n point(b, 50);\n\n // Draw the lerped points in gray.\n stroke(100);\n point(c, 50);\n point(d, 50);\n point(e, 50);\n\n describe('Five points in a horizontal line. The outer points are black and the inner points are gray.');\n}\n
\n\nlet x = 50;\nlet y = 50;\nlet targetX = 50;\nlet targetY = 50;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A white circle at the center of a gray canvas. The circle moves to where the user clicks, then moves smoothly back to the center.');\n}\n\nfunction draw() {\n background(220);\n\n // Move x and y toward the target.\n x = lerp(x, targetX, 0.05);\n y = lerp(y, targetY, 0.05);\n\n // Draw the circle.\n circle(x, y, 20);\n}\n\n// Set x and y when the user clicks the mouse.\nfunction mouseClicked() {\n x = mouseX;\n y = mouseY;\n}\n
\nएक वेक्टर के परिमाण, या लंबाई की गणना करता है।
\nएक वेक्टर के बारे में विभिन्न तरीकों से सोचा जा सकता है। एक दृष्टिकोण में, एक वेक्टर अंतरिक्ष में एक बिंदु है। वेक्टर के घटक, x
और y
, बिंदु के निर्देशांक (x, y)
हैं। एक वेक्टर का परिमाण मूल (0, 0)
से (x, y)
तक की दूरी है। mag(x, y)
dist(0, 0, x, y)
को कॉल करने का एक शॉर्टकट है।
एक वेक्टर को किसी जगह की ओर इशारा करते हुए एक तीर के रूप में भी सोचा जा सकता है। यह दृश्य प्रोग्रामिंग गति के लिए सहायक है। अधिक जानकारी के लिए p5.Vector देखें।
\np5.Vector.mag() का उपयोग करें >p5.वेक्टरऑब्जेक्ट।
\n"],"line":[0,481],"params":[1,[[0,{"name":[0,"x"],"description":[0,"पहला घटक.
\n"],"type":[0,"संख्या"]}],[0,{"name":[0,"y"],"description":[0,"दूसरा घटक.
\n"],"type":[0,"संख्या"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"वेक्टर का परिमाण."],"type":[0,"संख्या"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the vector's components.\n let x = 30;\n let y = 40;\n\n // Calculate the magnitude.\n let m = mag(x, y);\n\n // Style the text.\n textSize(16);\n\n // Display the vector and its magnitude.\n line(0, 0, x, y);\n text(m, x, y);\n\n describe('A diagonal line is drawn from the top left of the canvas. The number 50 is written at the end of the line.');\n}\n
\nकिसी संख्या को एक श्रेणी से दूसरी श्रेणी में पुनः मैप करता है।
\n\n\nउदाहरण के लिए, map(2, 0, 10, 0, 100)
को कॉल करने पर 20 रिटर्न मिलता है। पहले तीन तर्क मूल मान को 2 पर और मूल सीमा को 0 से 10 पर सेट करते हैं। अंतिम दो तर्क लक्ष्य सीमा को 0 से 100 तक निर्धारित करते हैं। लक्ष्य सीमा [0, 100] में 20 की स्थिति मूल सीमा [0, 10] में 2 की स्थिति के समानुपाती होती है।
छठा पैरामीटर, <कोड>इनबाउंड्सकोड>, वैकल्पिक है। डिफ़ॉल्ट रूप से,map()
लक्ष्य सीमा के बाहर मान लौटा सकता है। उदाहरण के लिए, map(11, 0, 10, 0, 100)
110 लौटाता है। true
को छठे पैरामीटर के रूप में पास करने से रीमैप किए गए मान को लक्ष्य सीमा तक सीमित कर दिया जाता है। उदाहरण के लिए, map(11, 0, 10, 0, 100, true)
100 लौटाता है।
रीमैप किया जाने वाला मान।
"],"type":[0,"संख्या"]}],[0,{"name":[0,"start1"],"description":[0,"\nमूल्य की वर्तमान सीमा की निचली सीमा।
"],"type":[0,"संख्या"]}],[0,{"name":[0,"stop1"],"description":[0,"\nमूल्य की वर्तमान सीमा की ऊपरी सीमा।
"],"type":[0,"संख्या"]}],[0,{"name":[0,"start2"],"description":[0,"\nमान की लक्ष्य सीमा की निचली सीमा।
"],"type":[0,"संख्या"]}],[0,{"name":[0,"stop2"],"description":[0,"\nमान की लक्ष्य सीमा की ऊपरी सीमा।
"],"type":[0,"संख्या"]}],[0,{"name":[0,"withinBounds"],"description":[0,"\nमान को नई मैप की गई श्रेणी तक सीमित रखें।
"],"type":[0,"Boolena"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"पुनः मैप किया गया नंबर."],"type":[0,"संख्या"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Two horizontal lines. The top line grows horizontally as the mouse moves to the right. The bottom line also grows horizontally but is scaled to stay on the left half of the canvas.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the top line.\n line(0, 25, mouseX, 25);\n\n // Remap mouseX from [0, 100] to [0, 50].\n let x = map(mouseX, 0, 100, 0, 50);\n\n // Draw the bottom line.\n line(0, 75, 0, x);\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A circle changes color from black to white as the mouse moves from left to right.');\n}\n\nfunction draw() {\n background(200);\n\n // Remap mouseX from [0, 100] to [0, 255]\n let c = map(mouseX, 0, 100, 0, 255);\n\n // Style the circle.\n fill(c);\n\n // Draw the circle.\n circle(50, 50, 20);\n}\n
\nसंख्याओं के अनुक्रम में सबसे बड़ा मान लौटाता है।
\n\n\nएक पैरामीटर के साथ max()
का संस्करण इसे संख्याओं की एक सरणी के रूप में व्याख्या करता है और सबसे बड़ी संख्या लौटाता है।
दो या अधिक मापदंडों के साथ max()
का संस्करण उन्हें अलग-अलग संख्याओं के रूप में व्याख्या करता है और सबसे बड़ी संख्या लौटाता है।
तुलना करने वाला पहला नंबर।
"],"type":[0,"संख्या"]}],[0,{"name":[0,"n1"],"description":[0,"\nतुलना करने के लिए दूसरा नंबर।
"],"type":[0,"संख्या"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"nums"],"description":[0,"\nतुलना करने के लिए संख्याएँ।
"],"type":[0,"संख्या[]"]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"अधिकतम संख्या।"],"type":[0,"संख्या"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate the maximum of 10, 5, and 20.\n let m = max(10, 5, 20);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the max.\n text(m, 50, 50);\n\n describe('The number 20 written in the middle of a gray square.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of numbers.\n let numbers = [10, 5, 20];\n\n // Calculate the maximum of the array.\n let m = max(numbers);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the max.\n text(m, 50, 50);\n\n describe('The number 20 written in the middle of a gray square.');\n}\n
\nसंख्याओं के अनुक्रम में सबसे छोटा मान लौटाता है।
\n\n\nएक पैरामीटर के साथ min()
का संस्करण इसे संख्याओं की एक सरणी के रूप में व्याख्या करता है और सबसे छोटी संख्या लौटाता है।
दो या अधिक मापदंडों के साथ min()
का संस्करण उन्हें व्यक्तिगत संख्याओं के रूप में व्याख्या करता है और सबसे छोटी संख्या लौटाता है।
तुलना करने वाला पहला नंबर।
"],"type":[0,"संख्या"]}],[0,{"name":[0,"n1"],"description":[0,"\nतुलना करने के लिए दूसरा नंबर।
"],"type":[0,"संख्या"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"nums"],"description":[0,"\nतुलना करने के लिए संख्याएँ।
"],"type":[0,"संख्या[]"]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"न्यूनतम संख्या."],"type":[0,"संख्या"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate the minimum of 10, 5, and 20.\n let m = min(10, 5, 20);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the min.\n text(m, 50, 50);\n\n describe('The number 5 written in the middle of a gray square.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of numbers.\n let numbers = [10, 5, 20];\n\n // Calculate the minimum of the array.\n let m = min(numbers);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the min.\n text(m, 50, 50);\n\n describe('The number 5 written in the middle of a gray square.');\n}\n
\nकिसी संख्या को एक श्रेणी से 0 और 1 के बीच के मान पर मैप करता है।
\n\n\nउदाहरण के लिए, norm(2, 0, 10)
0.2 लौटाता है। मूल श्रेणी [0,10] में 2 की स्थिति, सीमा [0, 1] में 0.2 की स्थिति के समानुपाती होती है। यह map(2, 0, 10, 0, 1)
को कॉल करने जैसा ही है।
मूल सीमा के बाहर की संख्याएँ 0 और 1 के बीच सीमित नहीं हैं। सीमा से बाहर के मान अक्सर जानबूझकर और उपयोगी होते हैं।
"],"line":[0,772],"params":[1,[[0,{"name":[0,"value"],"description":[0,"\nआने वाली वैल्यू को सामान्य किया जाएगा।
"],"type":[0,"संख्या"]}],[0,{"name":[0,"start"],"description":[0,"\nमूल्य की वर्तमान सीमा की निचली सीमा।
"],"type":[0,"संख्या"]}],[0,{"name":[0,"stop"],"description":[0,"\nमूल्य की वर्तमान सीमा की ऊपरी सीमा।
"],"type":[0,"संख्या"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"सामान्यीकृत संख्या."],"type":[0,"संख्या"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use RGB color with values from 0 to 1.\n colorMode(RGB, 1);\n\n describe('A square changes color from black to red as the mouse moves from left to right.');\n}\n\nfunction draw() {\n // Calculate the redValue.\n let redValue = norm(mouseX, 0, 100);\n\n // Paint the background.\n background(redValue, 0, 0);\n}\n
\nघातांकीय अभिव्यक्तियों की गणना करता है जैसे 23।
\n\nउदाहरण के लिए, pow(2, 3)
अभिव्यक्ति 2 × 2 × 2 का मूल्यांकन करता है। pow(2, -3)
1 ÷ (2 × 2 ×) का मूल्यांकन करता है 2).
घातांकीय अभिव्यक्ति का आधार।
"],"type":[0,"संख्या"]}],[0,{"name":[0,"e"],"description":[0,"\nजिस शक्ति से आधार बढ़ाया जा सके।
"],"type":[0,"संख्या"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"n^e."],"type":[0,"संख्या"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the base of the exponent.\n let base = 3;\n\n // Top-left.\n let d = pow(base, 1);\n circle(10, 10, d);\n\n // Left-center.\n d = pow(base, 2);\n circle(20, 20, d);\n\n // Right-center.\n d = pow(base, 3);\n circle(40, 40, d);\n\n // Bottom-right.\n d = pow(base, 4);\n circle(80, 80, d);\n\n describe('A series of circles that grow exponentially from top left to bottom right.');\n}\n
\nकिसी संख्या के निकटतम पूर्णांक की गणना करता है।
\n\n\nउदाहरण के लिए, राउंड(133.8)
मान 134 लौटाता है।
दूसरा पैरामीटर, दशमलव
, वैकल्पिक है। यह पूर्णांकन करते समय उपयोग किए जाने वाले दशमलव स्थानों की संख्या निर्धारित करता है। उदाहरण के लिए, राउंड(12.34, 1)12.3 लौटाता है। दशमलव डिफ़ॉल्ट रूप से 0 है।
संख्या को पूर्णांकित करना।
"],"type":[0,"संख्या"]}],[0,{"name":[0,"decimals"],"description":[0,"\nदशमलव स्थानों की संख्या, डिफ़ॉल्ट मान 0 है है।
"],"type":[0,"संख्या"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"गोलाकार संख्या."],"type":[0,"पूर्णांक"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Round a number.\n let x = round(4.2);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the rounded number.\n text(x, 50, 50);\n\n describe('The number 4 written in middle of the canvas.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Round a number to 2 decimal places.\n let x = round(12.782383, 2);\n\n // Style the text.\n textAlign(CENTER);\n textSize(16);\n\n // Display the rounded number.\n text(x, 50, 50);\n\n describe('The number 12.78 written in middle of canvas.');\n}\n
\nकिसी संख्या के वर्ग की गणना करता है।
\n\nकिसी संख्या का वर्ग करने का अर्थ है संख्या को उसी से गुणा करना। उदाहरण के लिए, sq(3)
\n 3 × 3 का मूल्यांकन करता है जो कि 9 है। sq(-3)
-3 × -3 का मूल्यांकन करता है जो कि 9 भी है। \n दो नकारात्मक संख्याओं को गुणा करने पर परिणाम मिलता है \n एक सकारात्मक संख्या. sq()
द्वारा लौटाया गया मान हमेशा सकारात्मक होता है।
संख्या से वर्ग।
\n"],"type":[0,"संख्या"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"वर्ग संख्या."],"type":[0,"संख्या"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n let d = sq(3);\n circle(33, 33, d);\n\n // Bottom-right.\n d = sq(6);\n circle(67, 67, d);\n\n describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is four times larger.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots that get higher quickly from left to right.');\n}\n\nfunction draw() {\n // Invert the y-axis.\n scale(1, -1);\n translate(0, -100);\n\n // Calculate the coordinates.\n let x = frameCount;\n let y = 0.01 * sq(x);\n\n // Draw the point.\n point(x, y);\n}\n
\nकिसी संख्या के वर्गमूल की गणना करता है।
\n\n\nमूल संख्या प्राप्त करने के लिए किसी संख्या के वर्गमूल को उसी से गुणा किया जा सकता है। उदाहरण के लिए, sqrt(9)
3 लौटाता है क्योंकि 3 × 3 = 9। sqrt()
हमेशा एक सकारात्मक मान देता है। sqrt()
नकारात्मक तर्कों जैसे sqrt(-9)
के साथ काम नहीं करता।
वर्गमूल के लिए गैर-नकारात्मक संख्या।
"],"type":[0,"संख्या"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"संख्या का वर्गमूल."],"type":[0,"संख्या"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n let d = sqrt(16);\n circle(33, 33, d);\n\n // Bottom-right.\n d = sqrt(1600);\n circle(67, 67, d);\n\n describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is ten times larger.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots that get higher slowly from left to right.');\n}\n\nfunction draw() {\n // Invert the y-axis.\n scale(1, -1);\n translate(0, -100);\n\n // Calculate the coordinates.\n let x = frameCount;\n let y = 5 * sqrt(x);\n\n // Draw the point.\n point(x, y);\n}\n
\nयूलर की संख्या e (2.71828...) के मान की गणना एक संख्या की घात तक की जाती है।
\n"],"line":[0,230],"params":[1,[[0,{"name":[0,"n"],"description":[0,"प्रतिपादक को बढ़ाना।
\n"],"type":[0,"संख्या"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"e^n"],"type":[0,"संख्या"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Top-left.\n let d = exp(1);\n circle(10, 10, d);\n\n // Left-center.\n d = exp(2);\n circle(20, 20, d);\n\n // Right-center.\n d = exp(3);\n circle(40, 40, d);\n\n // Bottom-right.\n d = exp(4);\n circle(80, 80, d);\n\n describe('A series of circles that grow exponentially from top left to bottom right.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots that grow exponentially from left to right.');\n}\n\nfunction draw() {\n // Invert the y-axis.\n scale(1, -1);\n translate(0, -100);\n\n // Calculate the coordinates.\n let x = frameCount;\n let y = 0.005 * exp(x * 0.1);\n\n // Draw a point.\n point(x, y);\n}\n
\nकिसी संख्या की चाप कोज्या की गणना करता है।
\nacos()
, का व्युत्क्रम है cos(). यह -1 से 1 की सीमा में तर्कों की अपेक्षा करता है। डिफ़ॉल्ट रूप से, \n acos()
0 से π (लगभग 3.14) की सीमा में मान लौटाता है। यदि angleMode() \n DEGREES
है, तो मान 0 से 180 की सीमा में लौटाए जाते हैं।
वह मान जिसकी चाप कोज्या लौटाई जानी है।
\n"],"type":[0,"संख्या"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"दिए गए मान की चाप कोज्या."],"type":[0,"संख्या"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate cos() and acos() values.\n let a = PI;\n let c = cos(a);\n let ac = acos(c);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(c, 3)}`, 35, 50);\n text(`${round(ac, 3)}`, 35, 75);\n\n describe('The numbers 3.142, -1, and 3.142 written on separate rows.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate cos() and acos() values.\n let a = PI + QUARTER_PI;\n let c = cos(a);\n let ac = acos(c);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(c, 3)}`, 35, 50);\n text(`${round(ac, 3)}`, 35, 75);\n\n describe('The numbers 3.927, -0.707, and 2.356 written on separate rows.');\n}\n
\nकोण मापने के लिए उपयोग की जाने वाली इकाई प्रणाली को बदलता है।
\nडिग्री और रेडियन दोनों कोण मापने की इकाइयाँ हैं। एक पूर्ण घूर्णन में 360˚ होते हैं। एक पूर्ण घूर्णन 2 × π (लगभग 6.28) रेडियन है।
\nकार्य जैसे rotate() और sin() डिफ़ॉल्ट रूप से कोणों को रेडियन से मापने की अपेक्षा करता है। angleMode(DEGREES)
को कॉल करने से डिग्री पर स्विच हो जाता है। angleMode(radians)
को कॉल करने से वापस radians पर स्विच हो जाता है।
बिना किसी तर्क के angleMode()
को कॉल करने से वर्तमान कोण मोड वापस आ जाता है, जो या तो radians
या डिग्री
होता है।
या तो radians या डिग्री।
\n"],"type":[0,"नियत"]}]]]}],[0,{"params":[1,[]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Rotate 1/8 turn.\n rotate(QUARTER_PI);\n\n // Draw a line.\n line(0, 0, 80, 0);\n\n describe('A diagonal line radiating from the top-left corner of a square.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Rotate 1/8 turn.\n rotate(45);\n\n // Draw a line.\n line(0, 0, 80, 0);\n\n describe('A diagonal line radiating from the top-left corner of a square.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Calculate the angle to rotate.\n let angle = TWO_PI / 7;\n\n // Move the origin to the center.\n translate(50, 50);\n\n // Style the flower.\n noStroke();\n fill(255, 50);\n\n // Draw the flower.\n for (let i = 0; i < 7; i += 1) {\n ellipse(0, 0, 80, 20);\n rotate(angle);\n }\n\n describe('A translucent white flower on a dark background.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(50);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Calculate the angle to rotate.\n let angle = 360 / 7;\n\n // Move the origin to the center.\n translate(50, 50);\n\n // Style the flower.\n noStroke();\n fill(255, 50);\n\n // Draw the flower.\n for (let i = 0; i < 7; i += 1) {\n ellipse(0, 0, 80, 20);\n rotate(angle);\n }\n\n describe('A translucent white flower on a dark background.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white ball on a string oscillates left and right.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the coordinates.\n let x = 30 * cos(frameCount * 0.05) + 50;\n let y = 50;\n\n // Draw the oscillator.\n line(50, y, x, y);\n circle(x, y, 20);\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Use degrees.\n angleMode(DEGREES);\n\n describe('A white ball on a string oscillates left and right.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the coordinates.\n let x = 30 * cos(frameCount * 2.86) + 50;\n let y = 50;\n\n // Draw the oscillator.\n line(50, y, x, y);\n circle(x, y, 20);\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the upper line.\n rotate(PI / 6);\n line(0, 0, 80, 0);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Draw the lower line.\n rotate(30);\n line(0, 0, 80, 0);\n\n describe('Two diagonal lines radiating from the top-left corner of a square. The lines are oriented 30 degrees from the edges of the square and 30 degrees apart from each other.');\n}\n
\nकिसी संख्या की चाप ज्या की गणना करता है।
\nasin()
, sin() का उलटा है। यह -1 से 1 की सीमा में इनपुट मान की अपेक्षा करता है। डिफ़ॉल्ट रूप से, asin()
-π ÷ 2 (लगभग -1.57) से π ÷ 2 (लगभग 1.57) की सीमा में मान लौटाता है। यदि angleMode() DEGREES
है तो मान -90 से 90 की सीमा में लौटाए जाते हैं।
वह मान जिसकी आर्क साइन वापस की जानी है।
\n"],"type":[0,"संख्या"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"दिए गए मान की चाप ज्या."],"type":[0,"संख्या"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate sin() and asin() values.\n let a = PI / 3;\n let s = sin(a);\n let as = asin(s);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(s, 3)}`, 35, 50);\n text(`${round(as, 3)}`, 35, 75);\n\n describe('The numbers 1.047, 0.866, and 1.047 written on separate rows.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate sin() and asin() values.\n let a = PI + PI / 3;\n let s = sin(a);\n let as = asin(s);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(s, 3)}`, 35, 50);\n text(`${round(as, 3)}`, 35, 75);\n\n describe('The numbers 4.189, -0.866, and -1.047 written on separate rows.');\n}\n
\nकिसी संख्या की चाप स्पर्श रेखा की गणना करता है।
\natan()
, tan() का उलटा है। यह -इन्फ़िनिटी से इन्फ़िनिटी की सीमा में इनपुट मानों की अपेक्षा करता है। डिफ़ॉल्ट रूप से, atan()
-π ÷ 2 (लगभग -1.57) से π ÷ 2 (लगभग 1.57) की सीमा में मान लौटाता है। यदि angleMode() DEGREES
है तो मान -90 से 90 की सीमा में लौटाए जाते हैं।
वह मान जिसकी चाप स्पर्शरेखा लौटाई जानी है।
\n"],"type":[0,"संख्या"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"दिए गए मान की चाप स्पर्श रेखा."],"type":[0,"संख्या"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate tan() and atan() values.\n let a = PI / 3;\n let t = tan(a);\n let at = atan(t);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(t, 3)}`, 35, 50);\n text(`${round(at, 3)}`, 35, 75);\n\n describe('The numbers 1.047, 1.732, and 1.047 written on separate rows.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate tan() and atan() values.\n let a = PI + PI / 3;\n let t = tan(a);\n let at = atan(t);\n\n // Display the values.\n text(`${round(a, 3)}`, 35, 25);\n text(`${round(t, 3)}`, 35, 50);\n text(`${round(at, 3)}`, 35, 75);\n\n describe('The numbers 4.189, 1.732, and 1.047 written on separate rows.');\n}\n
\nएक बिंदु, मूल बिंदु और धनात्मक x-अक्ष से बने कोण की गणना करता है।
\natan2()
का उपयोग अक्सर ज्यामिति को माउस की स्थिति में उन्मुख करने के लिए किया जाता है, जैसे atan2(mouseY, माउसX)
में। पहला पैरामीटर बिंदु का y-निर्देशांक है और दूसरा पैरामीटर इसका x-निर्देशांक है।
डिफ़ॉल्ट रूप से, atan2()
-π (लगभग -3.14) से π (3.14) की सीमा में मान लौटाता है। यदि angleMode() DEGREES
है, तो मान -180 से 180 की सीमा में लौटाए जाते हैं।
y-बिंदु का निर्देशांक।
\n"],"type":[0,"संख्या"]}],[0,{"name":[0,"x"],"description":[0,"बिंदु का x-निर्देशांक।
\n"],"type":[0,"संख्या"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"दिए गए बिंदु की चाप स्पर्श रेखा."],"type":[0,"संख्या"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A rectangle at the top-left of the canvas rotates with mouse movements.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the angle between the mouse\n // and the origin.\n let a = atan2(mouseY, mouseX);\n\n // Rotate.\n rotate(a);\n\n // Draw the shape.\n rect(0, 0, 60, 10);\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A rectangle at the center of the canvas rotates with mouse movements.');\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Get the mouse's coordinates relative to the origin.\n let x = mouseX - 50;\n let y = mouseY - 50;\n\n // Calculate the angle between the mouse and the origin.\n let a = atan2(y, x);\n\n // Rotate.\n rotate(a);\n\n // Draw the shape.\n rect(-30, -5, 60, 10);\n}\n
\nएक कोण की कोज्या की गणना करता है।
\ncos()
रचनात्मक कोडिंग में कई ज्यामितीय कार्यों के लिए उपयोगी है। इनपुट कोण बढ़ने पर लौटाए गए मान -1 और 1 के बीच दोलन करते हैं। cos()
वर्तमान angleMode().
कोण.
\n"],"type":[0,"संख्या"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"कोण की कोज्या."],"type":[0,"संख्या"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white ball on a string oscillates left and right.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the coordinates.\n let x = 30 * cos(frameCount * 0.05) + 50;\n let y = 50;\n\n // Draw the oscillator.\n line(50, y, x, y);\n circle(x, y, 20);\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots form a wave pattern.');\n}\n\nfunction draw() {\n // Calculate the coordinates.\n let x = frameCount;\n let y = 30 * cos(x * 0.1) + 50;\n\n // Draw the point.\n point(x, y);\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots form an infinity symbol.');\n}\n\nfunction draw() {\n // Calculate the coordinates.\n let x = 30 * cos(frameCount * 0.1) + 50;\n let y = 10 * sin(frameCount * 0.2) + 50;\n\n // Draw the point.\n point(x, y);\n}\n
\nरेडियन में मापे गए कोण को उसके मान को डिग्री में परिवर्तित करता है।
\nडिग्री और रेडियन दोनों कोण मापने की इकाइयाँ हैं। एक पूर्ण घूर्णन में 360˚ होते हैं। एक पूर्ण घूर्णन 2 × π (लगभग 6.28) रेडियन है।
\nसमान कोण को किसी भी इकाई के साथ व्यक्त किया जा सकता है। उदाहरण के लिए, 90° एक है\n पूर्ण घूर्णन का चौथाई भाग। वही कोण 2 × π ÷ 4 है\n (लगभग 1.57) रेडियन.
\n"],"line":[0,479],"params":[1,[[0,{"name":[0,"radians"],"description":[0,"रेडियन मान को डिग्री में परिवर्तित करें।
\n"],"type":[0,"संख्या"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"परिवर्तित कोण."],"type":[0,"संख्या"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Calculate the angle conversion.\n let rad = QUARTER_PI;\n let deg = degrees(rad);\n\n // Display the conversion.\n text(`${round(rad, 2)} rad = ${deg}˚`, 10, 50);\n\n describe('The text \"0.79 rad = 45˚\".');\n}\n
\nडिग्री में मापे गए कोण को रेडियन में उसके मान में परिवर्तित करता है।
\nडिग्री और रेडियन दोनों कोण मापने की इकाइयाँ हैं। एक पूर्ण घूर्णन में 360˚ होते हैं। एक पूर्ण घूर्णन 2 × π (लगभग 6.28) रेडियन है।
\nसमान कोण को किसी भी इकाई के साथ व्यक्त किया जा सकता है। उदाहरण के लिए, 90° पूर्ण घूर्णन का एक चौथाई है। वही कोण 2 × π ÷ 4 (लगभग 1.57) रेडियन है।
\n"],"line":[0,515],"params":[1,[[0,{"name":[0,"degrees"],"description":[0,"डिग्री मान को रेडियन में बदलने के लिए।
\n"],"type":[0,"संख्या"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"परिवर्तित कोण."],"type":[0,"संख्या"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Caclulate the angle conversion.\n let deg = 45;\n let rad = radians(deg);\n\n // Display the angle conversion.\n text(`${deg}˚ = ${round(rad, 3)} rad`, 10, 50);\n\n describe('The text \"45˚ = 0.785 rad\".');\n}\n
\nकोण की ज्या की गणना करता है।
\nsin()
रचनात्मक कोडिंग में कई ज्यामितीय कार्यों के लिए उपयोगी है। इनपुट कोण बढ़ने पर लौटाए गए मान -1 और 1 के बीच दोलन करते हैं। sin()
वर्तमान angleMode().
कोण.
\n"],"type":[0,"संख्या"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"कोण की ज्या."],"type":[0,"संख्या"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white ball on a string oscillates up and down.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the coordinates.\n let x = 50;\n let y = 30 * sin(frameCount * 0.05) + 50;\n\n // Draw the oscillator.\n line(50, y, x, y);\n circle(x, y, 20);\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots form a wave pattern.');\n}\n\nfunction draw() {\n // Calculate the coordinates.\n let x = frameCount;\n let y = 30 * sin(x * 0.1) + 50;\n\n // Draw the point.\n point(x, y);\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of black dots form an infinity symbol.');\n}\n\nfunction draw() {\n // Calculate the coordinates.\n let x = 30 * cos(frameCount * 0.1) + 50;\n let y = 10 * sin(frameCount * 0.2) + 50;\n\n // Draw the point.\n point(x, y);\n}\n
\nकिसी कोण की स्पर्श रेखा की गणना करता है।
\ntan()
रचनात्मक कोडिंग में कई ज्यामितीय कार्यों के लिए उपयोगी है। लौटाए गए मान -अनंत से अनंत तक होते हैं और इनपुट कोण बढ़ने पर समय-समय पर दोहराए जाते हैं। tan()
वर्तमान angleMode() को ध्यान में रखता है।
कोण.
\n"],"type":[0,"संख्या"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"कोण की स्पर्शरेखा."],"type":[0,"संख्या"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A series of identical curves drawn with black dots. Each curve starts from the top of the canvas, continues down at a slight angle, flattens out at the middle of the canvas, then continues to the bottom.');\n}\n\nfunction draw() {\n // Calculate the coordinates.\n let x = frameCount;\n let y = 5 * tan(x * 0.1) + 50;\n\n // Draw the point.\n point(x, y);\n}\n
\nnoise() फ़ंक्शन के लिए बीज मान सेट करता है।
\nडिफ़ॉल्ट रूप से, noise() हर बार स्केच चलाने पर अलग-अलग परिणाम देता है। noiseSeed()
को निरंतर तर्क के साथ कॉल करने से, जैसे noiseSeed(99)
, noise() बनता है हर बार स्केच चलाने पर समान परिणाम मिलते हैं।
मूल्य.
\n"],"type":[0,"संख्या"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the noise seed for consistent results.\n noiseSeed(99);\n\n describe('A black rectangle that grows randomly, first to the right and then to the left.');\n}\n\nfunction draw() {\n // Set the noise level and scale.\n let noiseLevel = 100;\n let noiseScale = 0.005;\n\n // Scale the input coordinate.\n let nt = noiseScale * frameCount;\n\n // Compute the noise value.\n let x = noiseLevel * noise(nt);\n\n // Draw the line.\n line(x, 0, x, height);\n}\n
\nकिसी सरणी से एक यादृच्छिक संख्या या एक यादृच्छिक तत्व लौटाता है।
\\nrandom()
समान वितरण का अनुसरण करता है, जिसका अर्थ है कि सभी परिणाम समान रूप से संभावित हैं। जब random()
का उपयोग संख्याएँ उत्पन्न करने के लिए किया जाता है, आउटपुट रेंज में सभी\\nनंबरों के वापस आने की समान संभावना होती है। जब\\nrandom()
का उपयोग किसी से तत्वों का चयन करने के लिए किया जाता है सरणी, सभी तत्वों को चुने जाने की संभावना समान रूप से होती है।
डिफ़ॉल्ट रूप से, random()
हर बार स्केच चलने पर अलग-अलग परिणाम देता है।\\nrandomSeed() फ़ंक्शन का उपयोग हर बार स्केच चलने पर संख्याओं या विकल्पों के समान अनुक्रम को उत्पन्न करने के लिए किया जा सकता है।
< का संस्करण कोड>random() बिना किसी पैरामीटर के 0\\nup से लेकर लेकिन 1 शामिल नहीं करते हुए एक यादृच्छिक संख्या लौटाता है।
\\nrandom()
का संस्करण एक के साथ पैरामीटर दो तरीकों में से एक पर काम करता है। यदि पारित किया गया तर्क एक संख्या है, तो random()
0 से ऊपर तक एक यादृच्छिक संख्या लौटाता है, लेकिन संख्या शामिल नहीं करता है। उदाहरण के लिए, random(5)
को कॉल करने से 0 और 5 के बीच का मान मिलता है। यदि पारित तर्क एक सरणी है, तो random()
\\nउस सरणी से एक यादृच्छिक तत्व लौटाता है। उदाहरण के लिए,\\nrandom(['\\U0001F981', '\\U0001F42F', '\\U0001F43B'])
को कॉल करने पर शेर, बाघ या भालू का इमोजी मिलता है।
random()
का संस्करण दी गई सीमा से एक यादृच्छिक संख्या लौटाता है। पारित तर्कों ने सीमा की निचली और ऊपरी सीमाएं निर्धारित कीं।\n"],"line":[0,86],"overloads":[1,[[0,{"params":[1,[[0,{"name":[0,"min"],"description":[0,"निचली सीमा (समावेशी)।
\n"],"type":[0,"संख्या।"],"optional":[0,true]}],[0,{"name":[0,"max"],"description":[0,"ऊपरी सीमा (अनन्य).
\n"],"type":[0,"संख्या।"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"choices"],"description":[0,"चुनने के लिए सरणी।
\n"],"type":[0,"ऐरे"]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"यादृच्छिक संख्या।"],"type":[0,"संख्या।"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get random coordinates between 0 and 100.\n let x = random(0, 100);\n let y = random(0, 100);\n\n // Draw a point.\n strokeWeight(5);\n point(x, y);\n\n describe('A black dot appears in a random position on a gray square.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get random coordinates between 0 and 100.\n let x = random(100);\n let y = random(100);\n\n // Draw the point.\n strokeWeight(5);\n point(x, y);\n\n describe('A black dot appears in a random position on a gray square.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of emoji strings.\n let animals = ['🦁', '🐯', '🐻'];\n\n // Choose a random element from the array.\n let choice = random(animals);\n\n // Style the text.\n textAlign(CENTER);\n textSize(20);\n\n // Display the emoji.\n text(choice, 50, 50);\n\n describe('An animal face is displayed at random. Either a lion, tiger, or bear.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(5);\n\n describe('A black dot moves around randomly on a gray square.');\n}\n\nfunction draw() {\n background(200);\n\n // Get random coordinates between 0 and 100.\n let x = random(100);\n let y = random(100);\n\n // Draw the point.\n strokeWeight(5);\n point(x, y);\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(5);\n\n describe('A black dot moves around randomly in the middle of a gray square.');\n}\n\nfunction draw() {\n background(200);\n\n // Get random coordinates between 45 and 55.\n let x = random(45, 55);\n let y = random(45, 55);\n\n // Draw the point.\n strokeWeight(5);\n point(x, y);\n}\n
\n\nlet x = 50;\nlet y = 50;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('A black dot moves around randomly leaving a trail.');\n}\n\nfunction draw() {\n // Update x and y randomly.\n x += random(-1, 1);\n y += random(-1, 1);\n\n // Draw the point.\n point(x, y);\n}\n
\nrandom() और randomGaussian()\n के लिए सीड मान सेट करता हैं।
\n\nडिफ़ॉल्ट रूप से, random() और randomGaussian() अलग-अलग परिणाम देते हैं जब भी कोई स्केच चलाया जाता है. randomSeed()
को निरंतर तर्क के साथ कॉल करने से, जैसे कि randomSeed(99)
, ये फ़ंक्शन हर बार स्केच चलाने पर समान परिणाम उत्पन्न करते हैं।
सीड मूल्य.
\n"],"type":[0,"संख्या"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get random coordinates.\n let x = random(0, 100);\n let y = random(0, 100);\n\n // Draw the white circle.\n circle(x, y, 10);\n\n // Set a random seed for consistency.\n randomSeed(99);\n\n // Get random coordinates.\n x = random(0, 100);\n y = random(0, 100);\n\n // Draw the black circle.\n fill(0);\n circle(x, y, 10);\n\n describe('A white circle appears at a random position. A black circle appears at (27.4, 25.8).');\n}\n
\nगाऊसी, या सामान्य, वितरण के अनुरूप एक यादृच्छिक संख्या लौटाता है।
\n\nप्लॉट किए जाने पर सामान्य वितरण घंटी वक्र की तरह दिखते हैं। एक केंद्रीय मान के आसपास सामान्य वितरण क्लस्टर के मानों को माध्य कहा जाता है। क्लस्टर का मानक विचलन इसके प्रसार का वर्णन करता है।
\n\nडिफ़ॉल्ट रूप से, randomGaussian()
हर बार स्केच चलने पर अलग-अलग परिणाम देता है। randomSeed() फ़ंक्शन का उपयोग हर बार स्केच चलने पर संख्याओं का समान क्रम उत्पन्न करने के लिए किया जा सकता है।
कोई न्यूनतम या अधिकतम मान नहीं है जो randomGaussian()
वापस आ सके। माध्य से दूर के मान बहुत असंभावित हैं और माध्य के निकट के मान बहुत संभावित हैं।
बिना किसी पैरामीटर वाला randomGaussian()
का संस्करण 0 के माध्य और 1 के मानक विचलन के साथ मान लौटाता है।
एक पैरामीटर के साथ randomGaussian()
का संस्करण पारित तर्क को माध्य के रूप में व्याख्या करता है। मानक विचलन 1 है.
दो मापदंडों के साथ randomGaussian()
का संस्करण पहले तर्क को माध्य के रूप में और दूसरे को मानक विचलन के रूप में व्याख्या करता है।
माध्य
\n"],"type":[0,"संख्या"],"optional":[0,true]}],[0,{"name":[0,"sd"],"description":[0,"मानक विचलन.
\n"],"type":[0,"संख्या"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"यादृच्छिक संख्या।"],"type":[0,"संख्या"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n describe('Three horizontal black lines are filled in randomly. The top line spans entire canvas. The middle line is very short. The bottom line spans two-thirds of the canvas.');\n}\n\nfunction draw() {\n // Style the circles.\n noStroke();\n fill(0, 10);\n\n // Uniform distribution between 0 and 100.\n let x = random(100);\n let y = 25;\n circle(x, y, 5);\n\n // Gaussian distribution with a mean of 50 and sd of 1.\n x = randomGaussian(50);\n y = 50;\n circle(x, y, 5);\n\n // Gaussian distribution with a mean of 50 and sd of 10.\n x = randomGaussian(50, 10);\n y = 75;\n circle(x, y, 5);\n}\n
\nएक नया p5.Vector ऑब्जेक्ट बनाता है।
\n\n\nएक वेक्टर के बारे में विभिन्न तरीकों से सोचा जा सकता है। एक दृश्य में, एक वेक्टर अंतरिक्ष की ओर इशारा करते हुए एक तीर की तरह है। सदिशों में परिमाण (लंबाई) और दिशा दोनों होते हैं। यह दृश्य गति प्रोग्रामिंग के लिए सहायक है।
\n\n\nएक वेक्टर के घटक उसके परिमाण और दिशा को निर्धारित करते हैं। उदाहरण के लिए, createVector(3, 4)
को कॉल करने से 3 के x-घटक के साथ एक नया p5.Vector ऑब्जेक्ट बनता है। और 4 का एक y-घटक। मूल से, इस वेक्टर की नोक दाईं ओर 3 इकाई और नीचे 4 इकाई है।
p5.Vector ऑब्जेक्ट का उपयोग अक्सर गति को प्रोग्राम करने के लिए किया जाता है क्योंकि वे गणित को सरल बनाते हैं। उदाहरण के लिए, एक चलती हुई गेंद की एक स्थिति और एक वेग होता है। स्थिति बताती है कि गेंद अंतरिक्ष में कहाँ है। गेंद की स्थिति वेक्टर मूल से गेंद के केंद्र तक फैली हुई है। वेग गेंद की गति और उसके घूमने की दिशा का वर्णन करता है। यदि गेंद सीधी ऊपर की ओर बढ़ रही है, तो इसका वेग वेक्टर सीधे ऊपर की ओर इंगित करता है। गेंद के वेग वेक्टर को उसकी स्थिति वेक्टर में जोड़ने से वह गतिमान हो जाती है, जैसा कि pos.add(vel)
में है। वेक्टर गणित p5.Vector वर्ग के अंदर के तरीकों पर निर्भर करता है।
वेक्टर का x घटक।
"],"type":[0,"संख्या"],"optional":[0,true]}],[0,{"name":[0,"y"],"description":[0,"\ny component of the vector.
"],"type":[0,"संख्या"],"optional":[0,true]}],[0,{"name":[0,"z"],"description":[0,"\nवेक्टर का z घटक।
"],"type":[0,"संख्या"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"नया p5.Vector ऑब्जेक्ट।"],"type":[0,"p5.Vector"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create p5.Vector objects.\n let p1 = createVector(25, 25);\n let p2 = createVector(50, 50);\n let p3 = createVector(75, 75);\n\n // Draw the dots.\n strokeWeight(5);\n point(p1);\n point(p2);\n point(p3);\n\n describe('Three black dots form a diagonal line from top left to bottom right.');\n}\n
\n\nlet pos;\nlet vel;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create p5.Vector objects.\n pos = createVector(50, 100);\n vel = createVector(0, -1);\n\n describe('A black dot moves from bottom to top on a gray square. The dot reappears at the bottom when it reaches the top.');\n}\n\nfunction draw() {\n background(200);\n\n // Add velocity to position.\n pos.add(vel);\n\n // If the dot reaches the top of the canvas,\n // restart from the bottom.\n if (pos.y < 0) {\n pos.y = 100;\n }\n\n // Draw the dot.\n strokeWeight(5);\n point(pos);\n}\n
\nरैंडम संख्याएँ लौटाता है जिन्हें ऑर्गेनिक महसूस करने के लिए ट्यून किया जा सकता है।
\n\n\n\"random() द्वारा लौटाए गए मान और randomGaussian() द्वारा बदले जा सकते हैं फ़ंक्शन कॉल के बीच बड़ी मात्रा में। इसके विपरीत, noise()
द्वारा लौटाए गए मानों को \"सुचारू\" बनाया जा सकता है। समान इनपुट के साथ noise()
पर कॉल करने से समान आउटपुट प्राप्त होंगे। <कोड>शोर()कोड> का उपयोग बनावट, गति, बनाने के लिए किया जाता है\"\nआकार, भू-भाग, इत्यादि। केन पेरलिन ने 1980 के दशक में मूल ट्रॉन फिल्म को एनिमेट करते समय शोर()
का आविष्कार किया।
noise()
हमेशा 0 और 1 के बीच मान लौटाता है। स्केच चलने के दौरान यह दिए गए इनपुट के लिए समान मान लौटाता है। noise()
हर बार स्केच चलने पर अलग-अलग परिणाम उत्पन्न करता है। noiseSeed() फ़ंक्शन का उपयोग हर बार स्केच चलने पर पर्लिन शोर मानों का समान क्रम उत्पन्न करने के लिए किया जा सकता है।
शोर के चरित्र को दो तरीकों से समायोजित किया जा सकता है। पहला तरीका इनपुट को स्केल करना है। noise()
इनपुट को निर्देशांक के रूप में व्याख्या करता है। जब इनपुट निर्देशांक करीब होंगे तो शोर मानों का क्रम सुचारू हो जाएगा। दूसरा तरीका noiseDetail()फ़ंक्शन का उपयोग करना है।
एक पैरामीटर के साथ शोर()कोड> का संस्करण एक आयाम में शोर मानों की गणना करता है। इस आयाम को अंतरिक्ष के रूप में सोचा जा सकता है, जैसे कि
शोर(x)
, या समय, जैसा कि शोर(t)
में।
दो मापदंडों के साथ <कोड>शोर()कोड> का संस्करण दो आयामों में शोर मानों की गणना करता है। इन आयामों को अंतरिक्ष के रूप में सोचा जा सकता है, जैसे कि शोर (x, y)
, या स्थान और समय, जैसा कि शोर (x, t)
में।
तीन मापदंडों के साथ <कोड>शोर()कोड> का संस्करण तीन आयामों में शोर मानों की गणना करता है। इन आयामों को अंतरिक्ष के रूप में सोचा जा सकता है, जैसे कि <कोड>शोर (x, y, z), या स्थान और समय, जैसा कि शोर (x, y, t)
में।
शोर स्थान में x-निर्देशांक।
"],"type":[0,"संख्या"]}],[0,{"name":[0,"y"],"description":[0,"\ny-शोर वाले स्थान में निर्देशांक।
"],"type":[0,"संख्या"],"optional":[0,true]}],[0,{"name":[0,"z"],"description":[0,"\nशोर स्थान में z-निर्देशांक।
"],"type":[0,"Number"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"निर्दिष्ट निर्देशांक पर पर्लिन शोर मान।"],"type":[0,"संख्या"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black dot moves randomly on a gray square.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the coordinates.\n let x = 100 * noise(0.005 * frameCount);\n let y = 100 * noise(0.005 * frameCount + 10000);\n\n // Draw the point.\n strokeWeight(5);\n point(x, y);\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A black dot moves randomly on a gray square.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the noise level and scale.\n let noiseLevel = 100;\n let noiseScale = 0.005;\n\n // Scale the input coordinate.\n let nt = noiseScale * frameCount;\n\n // Compute the noise values.\n let x = noiseLevel * noise(nt);\n let y = noiseLevel * noise(nt + 10000);\n\n // Draw the point.\n strokeWeight(5);\n point(x, y);\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A hilly terrain drawn in gray against a black sky.');\n}\n\nfunction draw() {\n // Set the noise level and scale.\n let noiseLevel = 100;\n let noiseScale = 0.02;\n\n // Scale the input coordinate.\n let x = frameCount;\n let nx = noiseScale * x;\n\n // Compute the noise value.\n let y = noiseLevel * noise(nx);\n\n // Draw the line.\n line(x, 0, x, y);\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A calm sea drawn in gray against a black sky.');\n}\n\nfunction draw() {\n background(200);\n\n // Set the noise level and scale.\n let noiseLevel = 100;\n let noiseScale = 0.002;\n\n // Iterate from left to right.\n for (let x = 0; x < 100; x += 1) {\n // Scale the input coordinates.\n let nx = noiseScale * x;\n let nt = noiseScale * frameCount;\n\n // Compute the noise value.\n let y = noiseLevel * noise(nx, nt);\n\n // Draw the line.\n line(x, 0, x, y);\n }\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Set the noise level and scale.\n let noiseLevel = 255;\n let noiseScale = 0.01;\n\n // Iterate from top to bottom.\n for (let y = 0; y < 100; y += 1) {\n // Iterate from left to right.\n for (let x = 0; x < 100; x += 1) {\n // Scale the input coordinates.\n let nx = noiseScale * x;\n let ny = noiseScale * y;\n\n // Compute the noise value.\n let c = noiseLevel * noise(nx, ny);\n\n // Draw the point.\n stroke(c);\n point(x, y);\n }\n }\n\n describe('A gray cloudy pattern.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray cloudy pattern that changes.');\n}\n\nfunction draw() {\n // Set the noise level and scale.\n let noiseLevel = 255;\n let noiseScale = 0.009;\n\n // Iterate from top to bottom.\n for (let y = 0; y < 100; y += 1) {\n // Iterate from left to right.\n for (let x = 0; x < width; x += 1) {\n // Scale the input coordinates.\n let nx = noiseScale * x;\n let ny = noiseScale * y;\n let nt = noiseScale * frameCount;\n\n // Compute the noise value.\n let c = noiseLevel * noise(nx, ny, nt);\n\n // Draw the point.\n stroke(c);\n point(x, y);\n }\n }\n}\n
\nnoise() फ़ंक्शन द्वारा उत्पन्न शोर के चरित्र को समायोजित करता है।
\n\n\nपर्लिन शोर मान शोर की परतों को एक साथ जोड़कर बनाया जाता है। शोर की परतें, जिन्हें ऑक्टेव्स कहा जाता है, संगीत में हार्मोनिक्स के समान हैं। निचले सप्तक आउटपुट सिग्नल में अधिक योगदान देते हैं। वे शोर की समग्र तीव्रता को परिभाषित करते हैं। उच्च सप्तक महीन दानेदार विवरण बनाते हैं।
\n\n\nडिफ़ॉल्ट रूप से, शोर मान चार सप्तक के संयोजन से बनाए जाते हैं। प्रत्येक उच्च सप्तक अपने पूर्ववर्ती की तुलना में आधा (50% कम) योगदान देता है। noiseDetail()
सप्तक की संख्या और फ़ॉलऑफ़ राशि को बदल देता है। उदाहरण के लिए, noiseDetail(6, 0.25)
को कॉल करने से यह सुनिश्चित होता है कि noise() छह सप्तक का उपयोग करेगा। प्रत्येक उच्च सप्तक अपने पूर्ववर्ती की तुलना में 25% अधिक (75% कम) योगदान देगा। 0 और 1 के बीच फ़ॉलऑफ़ मान मान्य हैं। हालाँकि, 0.5 से अधिक फ़ॉलऑफ़ मान के परिणामस्वरूप शोर मान 1 से अधिक हो सकता है।
शोर द्वारा उपयोग किए जाने वाले सप्तकों की संख्या.
"],"type":[0,"संख्या"]}],[0,{"name":[0,"falloff"],"description":[0,"\nप्रत्येक सप्तक के लिए फ़ॉलऑफ़ कारक।
"],"type":[0,"संख्या"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Set the noise level and scale.\n let noiseLevel = 255;\n let noiseScale = 0.02;\n\n // Iterate from top to bottom.\n for (let y = 0; y < 100; y += 1) {\n // Iterate from left to right.\n for (let x = 0; x < 50; x += 1) {\n // Scale the input coordinates.\n let nx = noiseScale * x;\n let ny = noiseScale * y;\n\n // Compute the noise value with six octaves\n // and a low falloff factor.\n noiseDetail(6, 0.25);\n let c = noiseLevel * noise(nx, ny);\n\n // Draw the left side.\n stroke(c);\n point(x, y);\n\n // Compute the noise value with four octaves\n // and a high falloff factor.\n noiseDetail(4, 0.5);\n c = noiseLevel * noise(nx, ny);\n\n // Draw the right side.\n stroke(c);\n point(x + 50, y);\n }\n }\n\n describe('Two gray cloudy patterns. The pattern on the right is cloudier than the pattern on the left.');\n}\n
\nMethod for executing an HTTP request. If data type is not specified,\np5 will try to guess based on the URL, defaulting to text.
\nFor more advanced use, you may also pass in the path as the first argument\nand a object as the second argument, the signature follows the one specified\nin the Fetch API specification.\nThis method is suitable for fetching files up to size of 64MB when \"GET\" is used.
name of the file or url to load
\n"],"type":[0,"String"]}],[0,{"name":[0,"method"],"description":[0,"either \"GET\", \"POST\", or \"PUT\",\n defaults to \"GET\"
\n"],"type":[0,"String"],"optional":[0,true]}],[0,{"name":[0,"datatype"],"description":[0,"\"json\", \"jsonp\", \"xml\", or \"text\"
\n"],"type":[0,"String"],"optional":[0,true]}],[0,{"name":[0,"data"],"description":[0,"param data passed sent with request
\n"],"type":[0,"Object"],"optional":[0,true]}],[0,{"name":[0,"callback"],"description":[0,"function to be executed after\n httpGet() completes, data is passed in\n as first argument
\n"],"type":[0,"Function"],"optional":[0,true]}],[0,{"name":[0,"errorCallback"],"description":[0,"function to be executed if\n there is an error, response is passed\n in as first argument
\n"],"type":[0,"Function"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"path"],"description":[0,""],"type":[0,"String"]}],[0,{"name":[0,"options"],"description":[0,"Request object options as documented in the\n \"fetch\" API\nreference
\n"],"type":[0,"Object"]}],[0,{"name":[0,"callback"],"description":[0,""],"type":[0,"Function"],"optional":[0,true]}],[0,{"name":[0,"errorCallback"],"description":[0,""],"type":[0,"Function"],"optional":[0,true]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"A promise that resolves with the data when the operation\n completes successfully or rejects with the error after\n one occurs."],"type":[0,"Promise"]}],"example":[1,[[0,"\n\n// Examples use USGS Earthquake API:\n// https://earthquake.usgs.gov/fdsnws/event/1/#methods\n\n// displays an animation of all USGS earthquakes\nlet earthquakes;\nlet eqFeatureIndex = 0;\n\nfunction preload() {\n let url = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson';\n httpDo(\n url,\n {\n method: 'GET',\n // Other Request options, like special headers for apis\n headers: { authorization: 'Bearer secretKey' }\n },\n function(res) {\n earthquakes = res;\n }\n );\n}\n\nfunction draw() {\n // wait until the data is loaded\n if (!earthquakes || !earthquakes.features[eqFeatureIndex]) {\n return;\n }\n clear();\n\n let feature = earthquakes.features[eqFeatureIndex];\n let mag = feature.properties.mag;\n let rad = mag / 11 * ((width + height) / 2);\n fill(255, 0, 0, 100);\n ellipse(width / 2 + random(-2, 2), height / 2 + random(-2, 2), rad, rad);\n\n if (eqFeatureIndex >= earthquakes.features.length) {\n eqFeatureIndex = 0;\n } else {\n eqFeatureIndex += 1;\n }\n}\n
\nMethod for executing an HTTP GET request. If data type is not specified,\np5 will try to guess based on the URL, defaulting to text. This is equivalent to\ncalling httpDo(path, 'GET')
. The 'binary' datatype will return\na Blob object, and the 'arrayBuffer' datatype will return an ArrayBuffer\nwhich can be used to initialize typed arrays (such as Uint8Array).
name of the file or url to load
\n"],"type":[0,"String"]}],[0,{"name":[0,"datatype"],"description":[0,"\"json\", \"jsonp\", \"binary\", \"arrayBuffer\",\n \"xml\", or \"text\"
\n"],"type":[0,"String"],"optional":[0,true]}],[0,{"name":[0,"data"],"description":[0,"param data passed sent with request
\n"],"type":[0,"Object|Boolean"],"optional":[0,true]}],[0,{"name":[0,"callback"],"description":[0,"function to be executed after\n httpGet() completes, data is passed in\n as first argument
\n"],"type":[0,"Function"],"optional":[0,true]}],[0,{"name":[0,"errorCallback"],"description":[0,"function to be executed if\n there is an error, response is passed\n in as first argument
\n"],"type":[0,"Function"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"path"],"description":[0,""],"type":[0,"String"]}],[0,{"name":[0,"data"],"description":[0,""],"type":[0,"Object|Boolean"]}],[0,{"name":[0,"callback"],"description":[0,""],"type":[0,"Function"],"optional":[0,true]}],[0,{"name":[0,"errorCallback"],"description":[0,""],"type":[0,"Function"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"path"],"description":[0,""],"type":[0,"String"]}],[0,{"name":[0,"callback"],"description":[0,""],"type":[0,"Function"]}],[0,{"name":[0,"errorCallback"],"description":[0,""],"type":[0,"Function"],"optional":[0,true]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"A promise that resolves with the data when the operation\n completes successfully or rejects with the error after\n one occurs."],"type":[0,"Promise"]}],"example":[1,[[0,"\n\n// Examples use USGS Earthquake API:\n// https://earthquake.usgs.gov/fdsnws/event/1/#methods\nlet earthquakes;\nfunction preload() {\n // Get the most recent earthquake in the database\n let url =\n 'https://earthquake.usgs.gov/fdsnws/event/1/query?' +\n 'format=geojson&limit=1&orderby=time';\n httpGet(url, 'jsonp', false, function(response) {\n // when the HTTP request completes, populate the variable that holds the\n // earthquake data used in the visualization.\n earthquakes = response;\n });\n}\n\nfunction draw() {\n if (!earthquakes) {\n // Wait until the earthquake data has loaded before drawing.\n return;\n }\n background(200);\n // Get the magnitude and name of the earthquake out of the loaded JSON\n let earthquakeMag = earthquakes.features[0].properties.mag;\n let earthquakeName = earthquakes.features[0].properties.place;\n ellipse(width / 2, height / 2, earthquakeMag * 10, earthquakeMag * 10);\n textAlign(CENTER);\n text(earthquakeName, 0, height - 30, width, 30);\n noLoop();\n}\n
Method for executing an HTTP POST request. If data type is not specified,\np5 will try to guess based on the URL, defaulting to text. This is equivalent to\ncalling httpDo(path, 'POST')
.
name of the file or url to load
\n"],"type":[0,"String"]}],[0,{"name":[0,"datatype"],"description":[0,"\"json\", \"jsonp\", \"xml\", or \"text\".\n If omitted, httpPost() will guess.
\n"],"type":[0,"String"],"optional":[0,true]}],[0,{"name":[0,"data"],"description":[0,"param data passed sent with request
\n"],"type":[0,"Object|Boolean"],"optional":[0,true]}],[0,{"name":[0,"callback"],"description":[0,"function to be executed after\n httpPost() completes, data is passed in\n as first argument
\n"],"type":[0,"Function"],"optional":[0,true]}],[0,{"name":[0,"errorCallback"],"description":[0,"function to be executed if\n there is an error, response is passed\n in as first argument
\n"],"type":[0,"Function"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"path"],"description":[0,""],"type":[0,"String"]}],[0,{"name":[0,"data"],"description":[0,""],"type":[0,"Object|Boolean"]}],[0,{"name":[0,"callback"],"description":[0,""],"type":[0,"Function"],"optional":[0,true]}],[0,{"name":[0,"errorCallback"],"description":[0,""],"type":[0,"Function"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"path"],"description":[0,""],"type":[0,"String"]}],[0,{"name":[0,"callback"],"description":[0,""],"type":[0,"Function"]}],[0,{"name":[0,"errorCallback"],"description":[0,""],"type":[0,"Function"],"optional":[0,true]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"A promise that resolves with the data when the operation\n completes successfully or rejects with the error after\n one occurs."],"type":[0,"Promise"]}],"example":[1,[[0,"\n\n// Examples use jsonplaceholder.typicode.com for a Mock Data API\n\nlet url = 'https://jsonplaceholder.typicode.com/posts';\nlet postData = { userId: 1, title: 'p5 Clicked!', body: 'p5.js is very cool.' };\n\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n}\n\nfunction mousePressed() {\n httpPost(url, 'json', postData, function(result) {\n strokeWeight(2);\n text(result.body, mouseX, mouseY);\n });\n}\n
\n\nlet url = 'ttps://invalidURL'; // A bad URL that will cause errors\nlet postData = { title: 'p5 Clicked!', body: 'p5.js is very cool.' };\n\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n}\n\nfunction mousePressed() {\n httpPost(\n url,\n 'json',\n postData,\n function(result) {\n // ... won't be called\n },\n function(error) {\n strokeWeight(2);\n text(error.toString(), mouseX, mouseY);\n }\n );\n}\n
This method is suitable for fetching files up to size of 64MB.
\n"],"line":[0,986],"params":[1,[[0,{"name":[0,"file"],"description":[0,"name of the file or URL to load
\n"],"type":[0,"String"]}],[0,{"name":[0,"callback"],"description":[0,"function to be executed after loadBytes()\n completes
\n"],"type":[0,"Function"],"optional":[0,true]}],[0,{"name":[0,"errorCallback"],"description":[0,"function to be executed if there\n is an error
\n"],"type":[0,"Function"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"an object whose 'bytes' property will be the loaded buffer"],"type":[0,"Object"]}],"example":[1,[[0,"\n\nlet data;\n\nfunction preload() {\n data = loadBytes('/assets/mammals.xml');\n}\n\nfunction setup() {\n for (let i = 0; i < 5; i++) {\n console.log(data.bytes[i].toString(16));\n }\n describe('no image displayed');\n}\n
Loads a JSON file to create an Object
.
JavaScript Object Notation\n(JSON)\nis a standard format for sending data between applications. The format is\nbased on JavaScript objects which have keys and values. JSON files store\ndata in an object with strings as keys. Values can be strings, numbers,\nBooleans, arrays, null
, or other objects.
The first parameter, path
, is always a string with the path to the file.\nPaths to local files should be relative, as in\nloadJSON('/assets/data.json')
. URLs such as\n'https://example.com/data.json'
may be blocked due to browser security.
The second parameter, successCallback
, is optional. If a function is\npassed, as in loadJSON('/assets/data.json', handleData)
, then the\nhandleData()
function will be called once the data loads. The object\ncreated from the JSON data will be passed to handleData()
as its only argument.
The third parameter, failureCallback
, is also optional. If a function is\npassed, as in loadJSON('/assets/data.json', handleData, handleFailure)
,\nthen the handleFailure()
function will be called if an error occurs while\nloading. The Error
object will be passed to handleFailure()
as its only\nargument.
Note: Data can take time to load. Calling loadJSON()
within\npreload() ensures data loads before it's used in\nsetup() or draw().
path of the JSON file to be loaded.
\n"],"type":[0,"String"]}],[0,{"name":[0,"successCallback"],"description":[0,"function to call once the data is loaded. Will be passed the object.
\n"],"type":[0,"Function"],"optional":[0,true]}],[0,{"name":[0,"errorCallback"],"description":[0,"function to call if the data fails to load. Will be passed an Error
event object.
\nlet myData;\n\n// Load the JSON and create an object.\nfunction preload() {\n myData = loadJSON('/assets/data.json');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the circle.\n fill(myData.color);\n noStroke();\n\n // Draw the circle.\n circle(myData.x, myData.y, myData.d);\n\n describe('A pink circle on a gray background.');\n}\n
\n\nlet myData;\n\n// Load the JSON and create an object.\nfunction preload() {\n myData = loadJSON('/assets/data.json');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.Color object and make it transparent.\n let c = color(myData.color);\n c.setAlpha(80);\n\n // Style the circles.\n fill(c);\n noStroke();\n\n // Iterate over the myData.bubbles array.\n for (let b of myData.bubbles) {\n // Draw a circle for each bubble.\n circle(b.x, b.y, b.d);\n }\n\n describe('Several pink bubbles floating in a blue sky.');\n}\n
\n\nlet myData;\n\n// Load the GeoJSON and create an object.\nfunction preload() {\n myData = loadJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get data about the most recent earthquake.\n let quake = myData.features[0].properties;\n\n // Draw a circle based on the earthquake's magnitude.\n circle(50, 50, quake.mag * 10);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(11);\n\n // Display the earthquake's location.\n text(quake.place, 5, 80, 100);\n\n describe(`A white circle on a gray background. The text \"${quake.place}\" is written beneath the circle.`);\n}\n
\n\nlet bigQuake;\n\n// Load the GeoJSON and preprocess it.\nfunction preload() {\n loadJSON(\n 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson',\n handleData\n );\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw a circle based on the earthquake's magnitude.\n circle(50, 50, bigQuake.mag * 10);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(11);\n\n // Display the earthquake's location.\n text(bigQuake.place, 5, 80, 100);\n\n describe(`A white circle on a gray background. The text \"${bigQuake.place}\" is written beneath the circle.`);\n}\n\n// Find the biggest recent earthquake.\nfunction handleData(data) {\n let maxMag = 0;\n // Iterate over the earthquakes array.\n for (let quake of data.features) {\n // Reassign bigQuake if a larger\n // magnitude quake is found.\n if (quake.properties.mag > maxMag) {\n bigQuake = quake.properties;\n }\n }\n}\n
\n\nlet bigQuake;\n\n// Load the GeoJSON and preprocess it.\nfunction preload() {\n loadJSON(\n 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson',\n handleData,\n handleError\n );\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw a circle based on the earthquake's magnitude.\n circle(50, 50, bigQuake.mag * 10);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(11);\n\n // Display the earthquake's location.\n text(bigQuake.place, 5, 80, 100);\n\n describe(`A white circle on a gray background. The text \"${bigQuake.place}\" is written beneath the circle.`);\n}\n\n// Find the biggest recent earthquake.\nfunction handleData(data) {\n let maxMag = 0;\n // Iterate over the earthquakes array.\n for (let quake of data.features) {\n // Reassign bigQuake if a larger\n // magnitude quake is found.\n if (quake.properties.mag > maxMag) {\n bigQuake = quake.properties;\n }\n }\n}\n\n// Log any errors to the console.\nfunction handleError(error) {\n console.log('Oops!', error);\n}\n
\nLoads a text file to create an Array
.
The first parameter, path
, is always a string with the path to the file.\nPaths to local files should be relative, as in\nloadStrings('/assets/data.txt')
. URLs such as\n'https://example.com/data.txt'
may be blocked due to browser security.
The second parameter, successCallback
, is optional. If a function is\npassed, as in loadStrings('/assets/data.txt', handleData)
, then the\nhandleData()
function will be called once the data loads. The array\ncreated from the text data will be passed to handleData()
as its only\nargument.
The third parameter, failureCallback
, is also optional. If a function is\npassed, as in loadStrings('/assets/data.txt', handleData, handleFailure)
,\nthen the handleFailure()
function will be called if an error occurs while\nloading. The Error
object will be passed to handleFailure()
as its only\nargument.
Note: Data can take time to load. Calling loadStrings()
within\npreload() ensures data loads before it's used in\nsetup() or draw().
path of the text file to be loaded.
\n"],"type":[0,"String"]}],[0,{"name":[0,"successCallback"],"description":[0,"function to call once the data is\n loaded. Will be passed the array.
\n"],"type":[0,"Function"],"optional":[0,true]}],[0,{"name":[0,"errorCallback"],"description":[0,"function to call if the data fails to\n load. Will be passed an Error
event\n object.
\nlet myData;\n\n// Load the text and create an array.\nfunction preload() {\n myData = loadStrings('/assets/test.txt');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Select a random line from the text.\n let phrase = random(myData);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display the text.\n text(phrase, 10, 50, 90);\n\n describe(`The text \"${phrase}\" written in black on a gray background.`);\n}\n
\n\nlet lastLine;\n\n// Load the text and preprocess it.\nfunction preload() {\n loadStrings('/assets/test.txt', handleData);\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display the text.\n text(lastLine, 10, 50, 90);\n\n describe('The text \"I talk like an orange\" written in black on a gray background.');\n}\n\n// Select the last line from the text.\nfunction handleData(data) {\n lastLine = data[data.length - 1];\n}\n
\n\nlet lastLine;\n\n// Load the text and preprocess it.\nfunction preload() {\n loadStrings('/assets/test.txt', handleData, handleError);\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display the text.\n text(lastLine, 10, 50, 90);\n\n describe('The text \"I talk like an orange\" written in black on a gray background.');\n}\n\n// Select the last line from the text.\nfunction handleData(data) {\n lastLine = data[data.length - 1];\n}\n\n// Log any errors to the console.\nfunction handleError(error) {\n console.error('Oops!', error);\n}\n
\nReads the contents of a file or URL and creates a p5.Table object with\nits values. If a file is specified, it must be located in the sketch's\n\"data\" folder. The filename parameter can also be a URL to a file found\nonline. By default, the file is assumed to be comma-separated (in CSV\nformat). Table only looks for a header row if the 'header' option is\nincluded.
\nThis method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. Calling loadTable() inside preload()\nguarantees to complete the operation before setup() and draw() are called.\nOutside of preload(), you may supply a callback function to handle the\nobject:
\nAll files loaded and saved use UTF-8 encoding. This method is suitable for fetching files up to size of 64MB.
\n"],"line":[0,505],"params":[1,[[0,{"name":[0,"filename"],"description":[0,"name of the file or URL to load
\n"],"type":[0,"String"]}],[0,{"name":[0,"extension"],"description":[0,"parse the table by comma-separated values \"csv\", semicolon-separated\n values \"ssv\", or tab-separated values \"tsv\"
\n"],"type":[0,"String"],"optional":[0,true]}],[0,{"name":[0,"header"],"description":[0,"\"header\" to indicate table has header row
\n"],"type":[0,"String"],"optional":[0,true]}],[0,{"name":[0,"callback"],"description":[0,"function to be executed after\n loadTable() completes. On success, the\n Table object is passed in as the\n first argument.
\n"],"type":[0,"Function"],"optional":[0,true]}],[0,{"name":[0,"errorCallback"],"description":[0,"function to be executed if\n there is an error, response is passed\n in as first argument
\n"],"type":[0,"Function"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"Table object containing data"],"type":[0,"Object"]}],"example":[1,[[0,"\n\n// Given the following CSV file called \"mammals.csv\"\n// located in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('/assets/mammals.csv', 'csv', 'header');\n //the file can be remote\n //table = loadTable(\"https://p5js.org/reference//assets/mammals.csv\",\n // \"csv\", \"header\");\n}\n\nfunction setup() {\n //count the columns\n print(table.getRowCount() + ' total rows in table');\n print(table.getColumnCount() + ' total columns in table');\n\n print(table.getColumn('name'));\n //[\"Goat\", \"Leopard\", \"Zebra\"]\n\n //cycle through the table\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++) {\n print(table.getString(r, c));\n }\n describe(`randomly generated text from a file,\n for example \"i smell like butter\"`);\n}\n
\nLoads an XML file to create a p5.XML object.
\nExtensible Markup Language\n(XML)\nis a standard format for sending data between applications. Like HTML, the\nXML format is based on tags and attributes, as in\n.
The first parameter, path
, is always a string with the path to the file.\nPaths to local files should be relative, as in\nloadXML('/assets/data.xml')
. URLs such as 'https://example.com/data.xml'
\nmay be blocked due to browser security.
The second parameter, successCallback
, is optional. If a function is\npassed, as in loadXML('/assets/data.xml', handleData)
, then the\nhandleData()
function will be called once the data loads. The\np5.XML object created from the data will be passed\nto handleData()
as its only argument.
The third parameter, failureCallback
, is also optional. If a function is\npassed, as in loadXML('/assets/data.xml', handleData, handleFailure)
, then\nthe handleFailure()
function will be called if an error occurs while\nloading. The Error
object will be passed to handleFailure()
as its only\nargument.
Note: Data can take time to load. Calling loadXML()
within\npreload() ensures data loads before it's used in\nsetup() or draw().
path of the XML file to be loaded.
\n"],"type":[0,"String"]}],[0,{"name":[0,"successCallback"],"description":[0,"function to call once the data is\n loaded. Will be passed the\n p5.XML object.
\n"],"type":[0,"Function"],"optional":[0,true]}],[0,{"name":[0,"errorCallback"],"description":[0,"function to call if the data fails to\n load. Will be passed an Error
event\n object.
\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('/assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get an array with all mammal tags.\n let mammals = myXML.getChildren('mammal');\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Iterate over the mammals array.\n for (let i = 0; i < mammals.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Get the mammal's common name.\n let name = mammals[i].getContent();\n\n // Display the mammal's name.\n text(name, 20, y);\n }\n\n describe(\n 'The words \"Goat\", \"Leopard\", and \"Zebra\" written on three separate lines. The text is black on a gray background.'\n );\n}\n
\n\nlet lastMammal;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n loadXML('/assets/animals.xml', handleData);\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(16);\n\n // Display the content of the last mammal element.\n text(lastMammal, 50, 50);\n\n describe('The word \"Zebra\" written in black on a gray background.');\n}\n\n// Get the content of the last mammal element.\nfunction handleData(data) {\n // Get an array with all mammal elements.\n let mammals = data.getChildren('mammal');\n\n // Get the content of the last mammal.\n lastMammal = mammals[mammals.length - 1].getContent();\n}\n
\n\nlet lastMammal;\n\n// Load the XML and preprocess it.\nfunction preload() {\n loadXML('/assets/animals.xml', handleData, handleError);\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(16);\n\n // Display the content of the last mammal element.\n text(lastMammal, 50, 50);\n\n describe('The word \"Zebra\" written in black on a gray background.');\n}\n\n// Get the content of the last mammal element.\nfunction handleData(data) {\n // Get an array with all mammal elements.\n let mammals = data.getChildren('mammal');\n\n // Get the content of the last mammal.\n lastMammal = mammals[mammals.length - 1].getContent();\n}\n\n// Log any errors to the console.\nfunction handleError(error) {\n console.error('Oops!', error);\n}\n
\nCreates a new p5.PrintWriter object.
\np5.PrintWriter objects provide a way to\nsave a sequence of text data, called the print stream, to the user's\ncomputer. They're low-level objects that enable precise control of text\noutput. Functions such as\nsaveStrings() and\nsaveJSON() are easier to use for simple file\nsaving.
\nThe first parameter, filename
, is the name of the file to be written. If\na string is passed, as in createWriter('words.txt')
, a new\np5.PrintWriter object will be created that\nwrites to a file named words.txt
.
The second parameter, extension
, is optional. If a string is passed, as\nin createWriter('words', 'csv')
, the first parameter will be interpreted\nas the file name and the second parameter as the extension.
name of the file to create.
\n"],"type":[0,"String"]}],[0,{"name":[0,"extension"],"description":[0,"format to use for the file.
\n"],"type":[0,"String"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"stream for writing data."],"type":[0,"p5.PrintWriter"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n // Create a p5.PrintWriter object.\n let myWriter = createWriter('xo.txt');\n\n // Add some lines to the print stream.\n myWriter.print('XOO');\n myWriter.print('OXO');\n myWriter.print('OOX');\n\n // Save the file and close the print stream.\n myWriter.close();\n }\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n // Create a p5.PrintWriter object.\n // Use the file format .csv.\n let myWriter = createWriter('mauna_loa_co2', 'csv');\n\n // Add some lines to the print stream.\n myWriter.print('date,ppm_co2');\n myWriter.print('1960-01-01,316.43');\n myWriter.print('1970-01-01,325.06');\n myWriter.print('1980-01-01,337.9');\n myWriter.print('1990-01-01,353.86');\n myWriter.print('2000-01-01,369.45');\n myWriter.print('2020-01-01,413.61');\n\n // Save the file and close the print stream.\n myWriter.close();\n }\n}\n
\nA class to describe a print stream.
\nEach p5.PrintWriter
object provides a way to save a sequence of text\ndata, called the print stream, to the user's computer. It's a low-level\nobject that enables precise control of text output. Functions such as\nsaveStrings() and\nsaveJSON() are easier to use for simple file\nsaving.
Note: createWriter() is the recommended way\nto make an instance of this class.
\n"],"line":[0,1565],"path":[0,"p5/p5.PrintWriter"]}],"render":[0,null]}],[0,{"id":[0,"en/p5/save.mdx"],"slug":[0,"en/p5/save"],"body":[0,"\n\n# save\n"],"collection":[0,"reference"],"data":[0,{"title":[0,"save()"],"module":[0,"IO"],"submodule":[0,"Output"],"file":[0,"src/io/files.js"],"description":[0,"Saves a given element(image, text, json, csv, wav, or html) to the client's\ncomputer. The first parameter can be a pointer to element we want to save.\nThe element can be one of p5.Element,an Array of\nStrings, an Array of JSON, a JSON object, a p5.Table\n, a p5.Image, or a p5.SoundFile (requires\np5.sound). The second parameter is a filename (including extension).The\nthird parameter is for options specific to this type of object. This method\nwill save a file that fits the given parameters.\nIf it is called without specifying an element, by default it will save the\nwhole canvas as an image file. You can optionally specify a filename as\nthe first parameter in such a case.\nNote that it is not recommended to\ncall this method within draw, as it will open a new save dialog on every\nrender.
\n"],"line":[0,1835],"params":[1,[[0,{"name":[0,"objectOrFilename"],"description":[0,"If filename is provided, will\n save canvas as an image with\n either png or jpg extension\n depending on the filename.\n If object is provided, will\n save depending on the object\n and filename (see examples\n above).
\n"],"type":[0,"Object|String"],"optional":[0,true]}],[0,{"name":[0,"filename"],"description":[0,"If an object is provided as the first\n parameter, then the second parameter\n indicates the filename,\n and should include an appropriate\n file extension (see examples above).
\n"],"type":[0,"String"],"optional":[0,true]}],[0,{"name":[0,"options"],"description":[0,"Additional options depend on\n filetype. For example, when saving JSON,\n true
indicates that the\n output will be optimized for filesize,\n rather than readability.
\n // Saves the canvas as an image\n cnv = createCanvas(300, 300);\n save(cnv, 'myCanvas.jpg');\n\n // Saves the canvas as an image by default\n save('myCanvas.jpg');\n describe('An example for saving a canvas as an image.');\n
\n // Saves p5.Image as an image\n img = createImage(10, 10);\n save(img, 'myImage.png');\n describe('An example for saving a p5.Image element as an image.');\n
\n // Saves p5.Renderer object as an image\n obj = createGraphics(100, 100);\n save(obj, 'myObject.png');\n describe('An example for saving a p5.Renderer element.');\n
\n let myTable = new p5.Table();\n // Saves table as html file\n save(myTable, 'myTable.html');\n\n // Comma Separated Values\n save(myTable, 'myTable.csv');\n\n // Tab Separated Values\n save(myTable, 'myTable.tsv');\n\n describe(`An example showing how to save a table in formats of\n HTML, CSV and TSV.`);\n
\n let myJSON = { a: 1, b: true };\n\n // Saves pretty JSON\n save(myJSON, 'my.json');\n\n // Optimizes JSON filesize\n save(myJSON, 'my.json', true);\n\n describe('An example for saving JSON to a txt file with some extra arguments.');\n
\n // Saves array of strings to text file with line breaks after each item\n let arrayOfStrings = ['a', 'b'];\n save(arrayOfStrings, 'my.txt');\n describe(`An example for saving an array of strings to text file\n with line breaks.`);\n
Saves an Object
or Array
to a JSON file.
JavaScript Object Notation\n(JSON)\nis a standard format for sending data between applications. The format is\nbased on JavaScript objects which have keys and values. JSON files store\ndata in an object with strings as keys. Values can be strings, numbers,\nBooleans, arrays, null
, or other objects.
The first parameter, json
, is the data to save. The data can be an array,\nas in [1, 2, 3]
, or an object, as in\n{ x: 50, y: 50, color: 'deeppink' }
.
The second parameter, filename
, is a string that sets the file's name.\nFor example, calling saveJSON([1, 2, 3], 'data.json')
saves the array\n[1, 2, 3]
to a file called data.json
on the user's computer.
The third parameter, optimize
, is optional. If true
is passed, as in\nsaveJSON([1, 2, 3], 'data.json', true)
, then all unneeded whitespace will\nbe removed to reduce the file size.
Note: The browser will either save the file immediately or prompt the user\nwith a dialogue window.
\n"],"line":[0,1979],"params":[1,[[0,{"name":[0,"json"],"description":[0,"data to save.
\n"],"type":[0,"Array|Object"]}],[0,{"name":[0,"filename"],"description":[0,"name of the file to be saved.
\n"],"type":[0,"String"]}],[0,{"name":[0,"optimize"],"description":[0,"whether to trim unneeded whitespace. Defaults\n to true
.
\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n // Create an array.\n let data = [1, 2, 3];\n\n // Save the JSON file.\n saveJSON(data, 'numbers.json');\n }\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n // Create an object.\n let data = { x: mouseX, y: mouseY };\n\n // Save the JSON file.\n saveJSON(data, 'state.json');\n }\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n // Create an object.\n let data = { x: mouseX, y: mouseY };\n\n // Save the JSON file and reduce its size.\n saveJSON(data, 'state.json', true);\n }\n}\n
\nSaves an Array
of String
s to a file, one per line.
The first parameter, list
, is an array with the strings to save.
The second parameter, filename
, is a string that sets the file's name.\nFor example, calling saveStrings(['0', '01', '011'], 'data.txt')
saves\nthe array ['0', '01', '011']
to a file called data.txt
on the user's\ncomputer.
The third parameter, extension
, is optional. If a string is passed, as in\nsaveStrings(['0', '01', '0
1'], 'data', 'txt')`, the second parameter will\nbe interpreted as the file name and the third parameter as the extension.
The fourth parameter, isCRLF
, is also optional, If true
is passed, as\nin saveStrings(['0', '01', '011'], 'data', 'txt', true)
, then two\ncharacters, \\r\\n
, will be added to the end of each string to create new\nlines in the saved file. \\r
is a carriage return (CR) and \\n
is a line\nfeed (LF). By default, only \\n
(line feed) is added to each string in\norder to create new lines.
Note: The browser will either save the file immediately or prompt the user\nwith a dialogue window.
\n"],"line":[0,2118],"params":[1,[[0,{"name":[0,"list"],"description":[0,"data to save.
\n"],"type":[0,"String[]"]}],[0,{"name":[0,"filename"],"description":[0,"name of file to be saved.
\n"],"type":[0,"String"]}],[0,{"name":[0,"extension"],"description":[0,"format to use for the file.
\n"],"type":[0,"String"],"optional":[0,true]}],[0,{"name":[0,"isCRLF"],"description":[0,"whether to add \\r\\n
to the end of each\n string. Defaults to false
.
\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n // Create an array.\n let data = ['0', '01', '011'];\n\n // Save the text file.\n saveStrings(data, 'data.txt');\n }\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n // Create an array.\n // ASCII art courtesy Wikipedia:\n // https://en.wikipedia.org/wiki/ASCII_art\n let data = [' (\\\\_/) ', \"(='.'=)\", '(\")_(\")'];\n\n // Save the text file.\n saveStrings(data, 'cat', 'txt');\n }\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {\n // Create an array.\n // +--+\n // / /|\n // +--+ +\n // | |/\n // +--+\n let data = [' +--+', ' / /|', '+--+ +', '| |/', '+--+'];\n\n // Save the text file.\n // Use CRLF for line endings.\n saveStrings(data, 'box', 'txt', true);\n }\n}\n
\nWrites the contents of a Table object to a file. Defaults to a\ntext file with comma-separated-values ('csv') but can also\nuse tab separation ('tsv'), or generate an HTML table ('html').\nThe file saving process and location of the saved file will\nvary between web browsers.
\n"],"line":[0,2275],"params":[1,[[0,{"name":[0,"Table"],"description":[0,"the Table object to save to a file
\n"],"type":[0,"p5.Table"]}],[0,{"name":[0,"filename"],"description":[0,"the filename to which the Table should be saved
\n"],"type":[0,"String"]}],[0,{"name":[0,"options"],"description":[0,"can be one of \"tsv\", \"csv\", or \"html\"
\n"],"type":[0,"String"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\n let table;\n\n function setup() {\n table = new p5.Table();\n\n table.addColumn('id');\n table.addColumn('species');\n table.addColumn('name');\n\n let newRow = table.addRow();\n newRow.setNum('id', table.getRowCount() - 1);\n newRow.setString('species', 'Panthera leo');\n newRow.setString('name', 'Lion');\n\n // To save, un-comment next line then click 'run'\n // saveTable(table, 'new.csv');\n\n describe('no image displayed');\n }\n\n // Saves the following to a file called 'new.csv':\n // id,species,name\n // 0,Panthera leo,Lion\n
Returns the current day as a number from 1–31.
\n"],"line":[0,10],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"current day between 1 and 31."],"type":[0,"Integer"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the current day.\n let d = day();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(12);\n textFont('Courier New');\n\n // Display the day.\n text(`Current day: ${d}`, 20, 50, 60);\n\n describe(`The text 'Current day: ${d}' written in black on a gray background.`);\n}\n
\nReturns the current hour as a number from 0–23.
\n"],"line":[0,44],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"current hour between 0 and 23."],"type":[0,"Integer"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the current hour.\n let h = hour();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(12);\n textFont('Courier New');\n\n // Display the hour.\n text(`Current hour: ${h}`, 20, 50, 60);\n\n describe(`The text 'Current hour: ${h}' written in black on a gray background.`);\n}\n
\nReturns the number of milliseconds since a sketch started running.
\nmillis()
keeps track of how long a sketch has been running in\nmilliseconds (thousandths of a second). This information is often\nhelpful for timing events and animations.
If a sketch has a\nsetup() function, then millis()
begins tracking\ntime before the code in setup() runs. If a\nsketch includes a preload() function, then\nmillis()
begins tracking time as soon as the code in\npreload() starts running.
\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the number of milliseconds the sketch has run.\n let ms = millis();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(10);\n textFont('Courier New');\n\n // Display how long it took setup() to be called.\n text(`Startup time: ${round(ms, 2)} ms`, 5, 50, 90);\n\n describe(\n `The text 'Startup time: ${round(ms, 2)} ms' written in black on a gray background.`\n );\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('The text \"Running time: S sec\" written in black on a gray background. The number S increases as the sketch runs.');\n}\n\nfunction draw() {\n background(200);\n\n // Get the number of seconds the sketch has run.\n let s = millis() / 1000;\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(10);\n textFont('Courier New');\n\n // Display how long the sketch has run.\n text(`Running time: ${nf(s, 1, 1)} sec`, 5, 50, 90);\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle oscillates left and right on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Get the number of seconds the sketch has run.\n let s = millis() / 1000;\n\n // Calculate an x-coordinate.\n let x = 30 * sin(s) + 50;\n\n // Draw the circle.\n circle(x, 50, 30);\n}\n
\n\n// Load the GeoJSON.\nfunction preload() {\n loadJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the number of milliseconds the sketch has run.\n let ms = millis();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(11);\n\n // Display how long it took to load the data.\n text(`It took ${round(ms, 2)} ms to load the data`, 5, 50, 100);\n\n describe(\n `The text \"It took ${round(ms, 2)} ms to load the data\" written in black on a gray background.`\n );\n}\n
\nReturns the current minute as a number from 0–59.
\n"],"line":[0,78],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"current minute between 0 and 59."],"type":[0,"Integer"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the current minute.\n let m = minute();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(12);\n textFont('Courier New');\n\n // Display the minute.\n text(`Current minute: ${m}`, 10, 50, 80);\n\n describe(`The text 'Current minute: ${m}' written in black on a gray background.`);\n}\n
\nReturns the current month as a number from 1–12.
\n"],"line":[0,242],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"current month between 1 and 12."],"type":[0,"Integer"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the current month.\n let m = month();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(12);\n textFont('Courier New');\n\n // Display the month.\n text(`Current month: ${m}`, 10, 50, 80);\n\n describe(`The text 'Current month: ${m}' written in black on a gray background.`);\n}\n
\nReturns the current second as a number from 0–59.
\n"],"line":[0,277],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"current second between 0 and 59."],"type":[0,"Integer"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the current second.\n let s = second();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(12);\n textFont('Courier New');\n\n // Display the second.\n text(`Current second: ${s}`, 10, 50, 80);\n\n describe(`The text 'Current second: ${s}' written in black on a gray background.`);\n}\n
\nReturns the current year as a number such as 1999.
\n"],"line":[0,311],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"current year."],"type":[0,"Integer"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the current year.\n let y = year();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(12);\n textFont('Courier New');\n\n // Display the year.\n text(`Current year: ${y}`, 10, 50, 80);\n\n describe(`The text 'Current year: ${y}' written in black on a gray background.`);\n}\n
\nTable objects store data with multiple rows and columns, much\nlike in a traditional spreadsheet. Tables can be generated from\nscratch, dynamically, or using data from an existing file.
\n"],"line":[0,33],"params":[1,[[0,{"name":[0,"rows"],"description":[0,"An array of p5.TableRow objects
\n"],"type":[0,"p5.TableRow[]"],"optional":[0,true]}]]],"chainable":[0,false],"methods":[0,{"addRow":[0,{"description":[0,"Use addRow() to add a new row of data to a p5.Table object. By default,\nan empty row is created. Typically, you would store a reference to\nthe new row in a TableRow object (see newRow in the example above),\nand then set individual values using set().
\nIf a p5.TableRow object is included as a parameter, then that row is\nduplicated and added to the table.
\n"],"path":[0,"p5.Table/addRow"]}],"removeRow":[0,{"description":[0,"Removes a row from the table object.
\n"],"path":[0,"p5.Table/removeRow"]}],"getRow":[0,{"description":[0,"Returns a reference to the specified p5.TableRow. The reference\ncan then be used to get and set values of the selected row.
\n"],"path":[0,"p5.Table/getRow"]}],"getRows":[0,{"description":[0,"Gets all rows from the table. Returns an array of p5.TableRows.
\n"],"path":[0,"p5.Table/getRows"]}],"findRow":[0,{"description":[0,"Finds the first row in the Table that contains the value\nprovided, and returns a reference to that row. Even if\nmultiple rows are possible matches, only the first matching\nrow is returned. The column to search may be specified by\neither its ID or title.
\n"],"path":[0,"p5.Table/findRow"]}],"findRows":[0,{"description":[0,"Finds the rows in the Table that contain the value\nprovided, and returns references to those rows. Returns an\nArray, so for must be used to iterate through all the rows,\nas shown in the example above. The column to search may be\nspecified by either its ID or title.
\n"],"path":[0,"p5.Table/findRows"]}],"matchRow":[0,{"description":[0,"Finds the first row in the Table that matches the regular\nexpression provided, and returns a reference to that row.\nEven if multiple rows are possible matches, only the first\nmatching row is returned. The column to search may be\nspecified by either its ID or title.
\n"],"path":[0,"p5.Table/matchRow"]}],"matchRows":[0,{"description":[0,"Finds the rows in the Table that match the regular expression provided,\nand returns references to those rows. Returns an array, so for must be\nused to iterate through all the rows, as shown in the example. The\ncolumn to search may be specified by either its ID or title.
\n"],"path":[0,"p5.Table/matchRows"]}],"getColumn":[0,{"description":[0,"Retrieves all values in the specified column, and returns them\nas an array. The column may be specified by either its ID or title.
\n"],"path":[0,"p5.Table/getColumn"]}],"clearRows":[0,{"description":[0,"Removes all rows from a Table. While all rows are removed,\ncolumns and column titles are maintained.
\n"],"path":[0,"p5.Table/clearRows"]}],"addColumn":[0,{"description":[0,"Use addColumn() to add a new column to a Table object.\nTypically, you will want to specify a title, so the column\nmay be easily referenced later by name. (If no title is\nspecified, the new column's title will be null.)
\n"],"path":[0,"p5.Table/addColumn"]}],"getColumnCount":[0,{"description":[0,"Returns the total number of columns in a Table.
\n"],"path":[0,"p5.Table/getColumnCount"]}],"getRowCount":[0,{"description":[0,"Returns the total number of rows in a Table.
\n"],"path":[0,"p5.Table/getRowCount"]}],"removeTokens":[0,{"description":[0,"Removes any of the specified characters (or \"tokens\").
\nIf no column is specified, then the values in all columns and\nrows are processed. A specific column may be referenced by\neither its ID or title.
\n"],"path":[0,"p5.Table/removeTokens"]}],"trim":[0,{"description":[0,"Trims leading and trailing whitespace, such as spaces and tabs,\nfrom String table values. If no column is specified, then the\nvalues in all columns and rows are trimmed. A specific column\nmay be referenced by either its ID or title.
\n"],"path":[0,"p5.Table/trim"]}],"removeColumn":[0,{"description":[0,"Use removeColumn() to remove an existing column from a Table\nobject. The column to be removed may be identified by either\nits title (a String) or its index value (an int).\nremoveColumn(0) would remove the first column, removeColumn(1)\nwould remove the second column, and so on.
\n"],"path":[0,"p5.Table/removeColumn"]}],"set":[0,{"description":[0,"Stores a value in the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.
\n"],"path":[0,"p5.Table/set"]}],"setNum":[0,{"description":[0,"Stores a Float value in the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.
\n"],"path":[0,"p5.Table/setNum"]}],"setString":[0,{"description":[0,"Stores a String value in the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.
\n"],"path":[0,"p5.Table/setString"]}],"get":[0,{"description":[0,"Retrieves a value from the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.
\n"],"path":[0,"p5.Table/get"]}],"getNum":[0,{"description":[0,"Retrieves a Float value from the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.
\n"],"path":[0,"p5.Table/getNum"]}],"getString":[0,{"description":[0,"Retrieves a String value from the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.
\n"],"path":[0,"p5.Table/getString"]}],"getObject":[0,{"description":[0,"Retrieves all table data and returns as an object. If a column name is\npassed in, each row object will be stored with that attribute as its\ntitle.
\n"],"path":[0,"p5.Table/getObject"]}],"getArray":[0,{"description":[0,"Retrieves all table data and returns it as a multidimensional array.
\n"],"path":[0,"p5.Table/getArray"]}]}],"properties":[0,{"columns":[0,{"description":[0,"An array containing the names of the columns in the table, if the \"header\" the table is\nloaded with the \"header\" parameter.
\n"],"path":[0,"p5.Table/columns"]}],"rows":[0,{"description":[0,"An array containing the p5.TableRow objects that make up the\nrows of the table. The same result as calling getRows()
\n"],"path":[0,"p5.Table/rows"]}]}],"isConstructor":[0,true],"path":[0,"p5/p5.Table"]}],"render":[0,null]}],"entries":[1,[[0,{"id":[0,"en/p5.Table/addColumn.mdx"],"slug":[0,"en/p5table/addcolumn"],"body":[0,"\n\n# addColumn\n"],"collection":[0,"reference"],"data":[0,{"title":[0,"addColumn()"],"module":[0,"IO"],"submodule":[0,"Table"],"file":[0,"src/io/p5.Table.js"],"description":[0,"Use addColumn() to add a new column to a Table object.\nTypically, you will want to specify a title, so the column\nmay be easily referenced later by name. (If no title is\nspecified, the new column's title will be null.)
\n"],"line":[0,631],"params":[1,[[0,{"name":[0,"title"],"description":[0,"title of the given column
\n"],"type":[0,"String"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5.Table"],"chainable":[0,false],"example":[1,[[0,"\n\n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('/assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n table.addColumn('carnivore');\n table.set(0, 'carnivore', 'no');\n table.set(1, 'carnivore', 'yes');\n table.set(2, 'carnivore', 'no');\n\n //print the results\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n\n describe('no image displayed');\n }\n
\n Use addRow() to add a new row of data to a p5.Table object. By default,\nan empty row is created. Typically, you would store a reference to\nthe new row in a TableRow object (see newRow in the example above),\nand then set individual values using set().
\nIf a p5.TableRow object is included as a parameter, then that row is\nduplicated and added to the table.
\n"],"line":[0,90],"params":[1,[[0,{"name":[0,"row"],"description":[0,"row to be added to the table
\n"],"type":[0,"p5.TableRow"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5.Table"],"chainable":[0,false],"return":[0,{"description":[0,"the row that was added"],"type":[0,"p5.TableRow"]}],"example":[1,[[0,"\n\n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('/assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n //add a row\n let newRow = table.addRow();\n newRow.setString('id', table.getRowCount() - 1);\n newRow.setString('species', 'Canis Lupus');\n newRow.setString('name', 'Wolf');\n\n //print the results\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n\n describe('no image displayed');\n }\n
\n Removes all rows from a Table. While all rows are removed,\ncolumns and column titles are maintained.
\n"],"line":[0,592],"itemtype":[0,"method"],"class":[0,"p5.Table"],"chainable":[0,false],"example":[1,[[0,"\n\n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('/assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n table.clearRows();\n print(table.getRowCount() + ' total rows in table');\n print(table.getColumnCount() + ' total columns in table');\n describe('no image displayed');\n }\n
\n An array containing the names of the columns in the table, if the \"header\" the table is\nloaded with the \"header\" parameter.
\n"],"line":[0,43],"itemtype":[0,"property"],"class":[0,"p5.Table"],"example":[1,[[0,"\n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('/assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n //print the column names\n for (let c = 0; c < table.getColumnCount(); c++) {\n print('column ' + c + ' is named ' + table.columns[c]);\n }\n}\n
\nFinds the first row in the Table that contains the value\nprovided, and returns a reference to that row. Even if\nmultiple rows are possible matches, only the first matching\nrow is returned. The column to search may be specified by\neither its ID or title.
\n"],"line":[0,289],"params":[1,[[0,{"name":[0,"value"],"description":[0,"The value to match
\n"],"type":[0,"String"]}],[0,{"name":[0,"column"],"description":[0,"ID number or title of the\n column to search
\n"],"type":[0,"Integer|String"]}]]],"itemtype":[0,"method"],"class":[0,"p5.Table"],"chainable":[0,false],"return":[0,{"description":[0,""],"type":[0,"p5.TableRow"]}],"example":[1,[[0,"\n\n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('/assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n //find the animal named zebra\n let row = table.findRow('Zebra', 'name');\n //find the corresponding species\n print(row.getString('species'));\n describe('no image displayed');\n }\n
\n Finds the rows in the Table that contain the value\nprovided, and returns references to those rows. Returns an\nArray, so for must be used to iterate through all the rows,\nas shown in the example above. The column to search may be\nspecified by either its ID or title.
\n"],"line":[0,351],"params":[1,[[0,{"name":[0,"value"],"description":[0,"The value to match
\n"],"type":[0,"String"]}],[0,{"name":[0,"column"],"description":[0,"ID number or title of the\n column to search
\n"],"type":[0,"Integer|String"]}]]],"itemtype":[0,"method"],"class":[0,"p5.Table"],"chainable":[0,false],"return":[0,{"description":[0,"An Array of TableRow objects"],"type":[0,"p5.TableRow[]"]}],"example":[1,[[0,"\n\n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('/assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n //add another goat\n let newRow = table.addRow();\n newRow.setString('id', table.getRowCount() - 1);\n newRow.setString('species', 'Scape Goat');\n newRow.setString('name', 'Goat');\n\n //find the rows containing animals named Goat\n let rows = table.findRows('Goat', 'name');\n print(rows.length + ' Goats found');\n describe('no image displayed');\n }\n
\n Retrieves a value from the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.
\n"],"line":[0,1087],"params":[1,[[0,{"name":[0,"row"],"description":[0,"row ID
\n"],"type":[0,"Integer"]}],[0,{"name":[0,"column"],"description":[0,"columnName (string) or\n ID (number)
\n"],"type":[0,"String|Integer"]}]]],"itemtype":[0,"method"],"class":[0,"p5.Table"],"chainable":[0,false],"return":[0,{"description":[0,""],"type":[0,"String|Number"]}],"example":[1,[[0,"\n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('/assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n print(table.get(0, 1));\n //Capra hircus\n print(table.get(0, 'species'));\n //Capra hircus\n describe('no image displayed');\n}\n
\nRetrieves all table data and returns it as a multidimensional array.
\n"],"line":[0,1285],"itemtype":[0,"method"],"class":[0,"p5.Table"],"chainable":[0,false],"return":[0,{"description":[0,""],"type":[0,"Array"]}],"example":[1,[[0,"\n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leoperd\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n // table is comma separated value \"CSV\"\n // and has specifiying header for column labels\n table = loadTable('/assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n let tableArray = table.getArray();\n for (let i = 0; i < tableArray.length; i++) {\n print(tableArray[i]);\n }\n describe('no image displayed');\n}\n
\nRetrieves all values in the specified column, and returns them\nas an array. The column may be specified by either its ID or title.
\n"],"line":[0,542],"params":[1,[[0,{"name":[0,"column"],"description":[0,"String or Number of the column to return
\n"],"type":[0,"String|Number"]}]]],"itemtype":[0,"method"],"class":[0,"p5.Table"],"chainable":[0,false],"return":[0,{"description":[0,"Array of column values"],"type":[0,"Array"]}],"example":[1,[[0,"\n\n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('/assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n //getColumn returns an array that can be printed directly\n print(table.getColumn('species'));\n //outputs [\"Capra hircus\", \"Panthera pardus\", \"Equus zebra\"]\n describe('no image displayed');\n }\n
\n Returns the total number of columns in a Table.
\n"],"line":[0,680],"itemtype":[0,"method"],"class":[0,"p5.Table"],"chainable":[0,false],"return":[0,{"description":[0,"Number of columns in this table"],"type":[0,"Integer"]}],"example":[1,[[0,"\n\n // given the cvs file \"blobs.csv\" in /assets directory\n // ID, Name, Flavor, Shape, Color\n // Blob1, Blobby, Sweet, Blob, Pink\n // Blob2, Saddy, Savory, Blob, Blue\n\n let table;\n\n function preload() {\n table = loadTable('/assets/blobs.csv');\n }\n\n function setup() {\n createCanvas(200, 100);\n textAlign(CENTER);\n background(255);\n }\n\n function draw() {\n let numOfColumn = table.getColumnCount();\n text('There are ' + numOfColumn + ' columns in the table.', 100, 50);\n }\n
\n Retrieves a Float value from the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.
\n"],"line":[0,1131],"params":[1,[[0,{"name":[0,"row"],"description":[0,"row ID
\n"],"type":[0,"Integer"]}],[0,{"name":[0,"column"],"description":[0,"columnName (string) or\n ID (number)
\n"],"type":[0,"String|Integer"]}]]],"itemtype":[0,"method"],"class":[0,"p5.Table"],"chainable":[0,false],"return":[0,{"description":[0,""],"type":[0,"Number"]}],"example":[1,[[0,"\n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('/assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n print(table.getNum(1, 0) + 100);\n //id 1 + 100 = 101\n describe('no image displayed');\n}\n
\nRetrieves all table data and returns as an object. If a column name is\npassed in, each row object will be stored with that attribute as its\ntitle.
\n"],"line":[0,1223],"params":[1,[[0,{"name":[0,"headerColumn"],"description":[0,"Name of the column which should be used to\n title each row object (optional)
\n"],"type":[0,"String"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5.Table"],"chainable":[0,false],"return":[0,{"description":[0,""],"type":[0,"Object"]}],"example":[1,[[0,"\n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('/assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n let tableObject = table.getObject();\n\n print(tableObject);\n //outputs an object\n\n describe('no image displayed');\n}\n
\nReturns a reference to the specified p5.TableRow. The reference\ncan then be used to get and set values of the selected row.
\n"],"line":[0,198],"params":[1,[[0,{"name":[0,"rowID"],"description":[0,"ID number of the row to get
\n"],"type":[0,"Integer"]}]]],"itemtype":[0,"method"],"class":[0,"p5.Table"],"chainable":[0,false],"return":[0,{"description":[0,"p5.TableRow object"],"type":[0,"p5.TableRow"]}],"example":[1,[[0,"\n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('/assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n let row = table.getRow(1);\n //print it column by column\n //note: a row is an object, not an array\n for (let c = 0; c < table.getColumnCount(); c++) {\n print(row.getString(c));\n }\n\n describe('no image displayed');\n}\n
\nReturns the total number of rows in a Table.
\n"],"line":[0,716],"itemtype":[0,"method"],"class":[0,"p5.Table"],"chainable":[0,false],"return":[0,{"description":[0,"Number of rows in this table"],"type":[0,"Integer"]}],"example":[1,[[0,"\n\n // given the cvs file \"blobs.csv\" in /assets directory\n //\n // ID, Name, Flavor, Shape, Color\n // Blob1, Blobby, Sweet, Blob, Pink\n // Blob2, Saddy, Savory, Blob, Blue\n\n let table;\n\n function preload() {\n table = loadTable('/assets/blobs.csv');\n }\n\n function setup() {\n createCanvas(200, 100);\n textAlign(CENTER);\n background(255);\n }\n\n function draw() {\n text('There are ' + table.getRowCount() + ' rows in the table.', 100, 50);\n }\n
\n Gets all rows from the table. Returns an array of p5.TableRows.
\n"],"line":[0,242],"itemtype":[0,"method"],"class":[0,"p5.Table"],"chainable":[0,false],"return":[0,{"description":[0,"Array of p5.TableRows"],"type":[0,"p5.TableRow[]"]}],"example":[1,[[0,"\n\n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('/assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n\n //warning: rows is an array of objects\n for (let r = 0; r < rows.length; r++) {\n rows[r].set('name', 'Unicorn');\n }\n\n //print the results\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n\n describe('no image displayed');\n }\n
\n Retrieves a String value from the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.
\n"],"line":[0,1173],"params":[1,[[0,{"name":[0,"row"],"description":[0,"row ID
\n"],"type":[0,"Integer"]}],[0,{"name":[0,"column"],"description":[0,"columnName (string) or\n ID (number)
\n"],"type":[0,"String|Integer"]}]]],"itemtype":[0,"method"],"class":[0,"p5.Table"],"chainable":[0,false],"return":[0,{"description":[0,""],"type":[0,"String"]}],"example":[1,[[0,"\n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n // table is comma separated value \"CSV\"\n // and has specifiying header for column labels\n table = loadTable('/assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n print(table.getString(0, 0)); // 0\n print(table.getString(0, 1)); // Capra hircus\n print(table.getString(0, 2)); // Goat\n print(table.getString(1, 0)); // 1\n print(table.getString(1, 1)); // Panthera pardus\n print(table.getString(1, 2)); // Leopard\n print(table.getString(2, 0)); // 2\n print(table.getString(2, 1)); // Equus zebra\n print(table.getString(2, 2)); // Zebra\n describe('no image displayed');\n}\n
\nFinds the first row in the Table that matches the regular\nexpression provided, and returns a reference to that row.\nEven if multiple rows are possible matches, only the first\nmatching row is returned. The column to search may be\nspecified by either its ID or title.
\n"],"line":[0,417],"params":[1,[[0,{"name":[0,"regexp"],"description":[0,"The regular expression to match
\n"],"type":[0,"String|RegExp"]}],[0,{"name":[0,"column"],"description":[0,"The column ID (number) or\n title (string)
\n"],"type":[0,"String|Integer"]}]]],"itemtype":[0,"method"],"class":[0,"p5.Table"],"chainable":[0,false],"return":[0,{"description":[0,"TableRow object"],"type":[0,"p5.TableRow"]}],"example":[1,[[0,"\n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('/assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n //Search using specified regex on a given column, return TableRow object\n let mammal = table.matchRow(new RegExp('ant'), 1);\n print(mammal.getString(1));\n //Output \"Panthera pardus\"\n}\n
\nFinds the rows in the Table that match the regular expression provided,\nand returns references to those rows. Returns an array, so for must be\nused to iterate through all the rows, as shown in the example. The\ncolumn to search may be specified by either its ID or title.
\n"],"line":[0,475],"params":[1,[[0,{"name":[0,"regexp"],"description":[0,"The regular expression to match
\n"],"type":[0,"String"]}],[0,{"name":[0,"column"],"description":[0,"The column ID (number) or\n title (string)
\n"],"type":[0,"String|Integer"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5.Table"],"chainable":[0,false],"return":[0,{"description":[0,"An Array of TableRow objects"],"type":[0,"p5.TableRow[]"]}],"example":[1,[[0,"\n\nlet table;\n\nfunction setup() {\n table = new p5.Table();\n\n table.addColumn('name');\n table.addColumn('type');\n\n let newRow = table.addRow();\n newRow.setString('name', 'Lion');\n newRow.setString('type', 'Mammal');\n\n newRow = table.addRow();\n newRow.setString('name', 'Snake');\n newRow.setString('type', 'Reptile');\n\n newRow = table.addRow();\n newRow.setString('name', 'Mosquito');\n newRow.setString('type', 'Insect');\n\n newRow = table.addRow();\n newRow.setString('name', 'Lizard');\n newRow.setString('type', 'Reptile');\n\n let rows = table.matchRows('R.*', 'type');\n for (let i = 0; i < rows.length; i++) {\n print(rows[i].getString('name') + ': ' + rows[i].getString('type'));\n }\n}\n// Sketch prints:\n// Snake: Reptile\n// Lizard: Reptile\n
\nUse removeColumn() to remove an existing column from a Table\nobject. The column to be removed may be identified by either\nits title (a String) or its index value (an int).\nremoveColumn(0) would remove the first column, removeColumn(1)\nwould remove the second column, and so on.
\n"],"line":[0,888],"params":[1,[[0,{"name":[0,"column"],"description":[0,"columnName (string) or ID (number)
\n"],"type":[0,"String|Integer"]}]]],"itemtype":[0,"method"],"class":[0,"p5.Table"],"chainable":[0,false],"example":[1,[[0,"\n\n // Given the CSV file \"mammals.csv\"\n // in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('/assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n table.removeColumn('id');\n print(table.getColumnCount());\n describe('no image displayed');\n }\n
\n Removes a row from the table object.
\n"],"line":[0,152],"params":[1,[[0,{"name":[0,"id"],"description":[0,"ID number of the row to remove
\n"],"type":[0,"Integer"]}]]],"itemtype":[0,"method"],"class":[0,"p5.Table"],"chainable":[0,false],"example":[1,[[0,"\n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('/assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n //remove the first row\n table.removeRow(0);\n\n //print the results\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n\n describe('no image displayed');\n}\n
\nRemoves any of the specified characters (or \"tokens\").
\nIf no column is specified, then the values in all columns and\nrows are processed. A specific column may be referenced by\neither its ID or title.
\n"],"line":[0,752],"params":[1,[[0,{"name":[0,"chars"],"description":[0,"String listing characters to be removed
\n"],"type":[0,"String"]}],[0,{"name":[0,"column"],"description":[0,"Column ID (number)\n or name (string)
\n"],"type":[0,"String|Integer"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5.Table"],"chainable":[0,false],"example":[1,[[0,"\n\n function setup() {\n let table = new p5.Table();\n\n table.addColumn('name');\n table.addColumn('type');\n\n let newRow = table.addRow();\n newRow.setString('name', ' $Lion ,');\n newRow.setString('type', ',,,Mammal');\n\n newRow = table.addRow();\n newRow.setString('name', '$Snake ');\n newRow.setString('type', ',,,Reptile');\n\n table.removeTokens(',$ ');\n print(table.getArray());\n }\n\n // prints:\n // 0 \"Lion\" \"Mamal\"\n // 1 \"Snake\" \"Reptile\"\n
An array containing the p5.TableRow objects that make up the\nrows of the table. The same result as calling getRows()
\n"],"line":[0,80],"itemtype":[0,"property"],"class":[0,"p5.Table"],"isConstructor":[0,false],"path":[0,"p5.Table/rows"]}],"render":[0,null]}],[0,{"id":[0,"en/p5.Table/set.mdx"],"slug":[0,"en/p5table/set"],"body":[0,"\n\n# set\n"],"collection":[0,"reference"],"data":[0,{"title":[0,"set()"],"module":[0,"IO"],"submodule":[0,"Table"],"file":[0,"src/io/p5.Table.js"],"description":[0,"Stores a value in the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.
\n"],"line":[0,950],"params":[1,[[0,{"name":[0,"row"],"description":[0,"row ID
\n"],"type":[0,"Integer"]}],[0,{"name":[0,"column"],"description":[0,"column ID (Number)\n or title (String)
\n"],"type":[0,"String|Integer"]}],[0,{"name":[0,"value"],"description":[0,"value to assign
\n"],"type":[0,"String|Number"]}]]],"itemtype":[0,"method"],"class":[0,"p5.Table"],"chainable":[0,false],"example":[1,[[0,"\n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('/assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n table.set(0, 'species', 'Canis Lupus');\n table.set(0, 'name', 'Wolf');\n\n //print the results\n for (let r = 0; r < table.getRowCount(); r++)\n for (let c = 0; c < table.getColumnCount(); c++)\n print(table.getString(r, c));\n\n describe('no image displayed');\n}\n
\nStores a Float value in the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.
\n"],"line":[0,998],"params":[1,[[0,{"name":[0,"row"],"description":[0,"row ID
\n"],"type":[0,"Integer"]}],[0,{"name":[0,"column"],"description":[0,"column ID (Number)\n or title (String)
\n"],"type":[0,"String|Integer"]}],[0,{"name":[0,"value"],"description":[0,"value to assign
\n"],"type":[0,"Number"]}]]],"itemtype":[0,"method"],"class":[0,"p5.Table"],"chainable":[0,false],"example":[1,[[0,"\n\n// Given the CSV file \"mammals.csv\"\n// in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('/assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n table.setNum(1, 'id', 1);\n\n print(table.getColumn(0));\n //[\"0\", 1, \"2\"]\n\n describe('no image displayed');\n}\n
\nStores a String value in the Table's specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.
\n"],"line":[0,1043],"params":[1,[[0,{"name":[0,"row"],"description":[0,"row ID
\n"],"type":[0,"Integer"]}],[0,{"name":[0,"column"],"description":[0,"column ID (Number)\n or title (String)
\n"],"type":[0,"String|Integer"]}],[0,{"name":[0,"value"],"description":[0,"value to assign
\n"],"type":[0,"String"]}]]],"itemtype":[0,"method"],"class":[0,"p5.Table"],"chainable":[0,false],"example":[1,[[0,"\n\n// Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n//\n// id,species,name\n// 0,Capra hircus,Goat\n// 1,Panthera pardus,Leopard\n// 2,Equus zebra,Zebra\n\nlet table;\n\nfunction preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('/assets/mammals.csv', 'csv', 'header');\n}\n\nfunction setup() {\n //add a row\n let newRow = table.addRow();\n newRow.setString('id', table.getRowCount() - 1);\n newRow.setString('species', 'Canis Lupus');\n newRow.setString('name', 'Wolf');\n\n print(table.getArray());\n\n describe('no image displayed');\n}\n
Trims leading and trailing whitespace, such as spaces and tabs,\nfrom String table values. If no column is specified, then the\nvalues in all columns and rows are trimmed. A specific column\nmay be referenced by either its ID or title.
\n"],"line":[0,824],"params":[1,[[0,{"name":[0,"column"],"description":[0,"Column ID (number)\n or name (string)
\n"],"type":[0,"String|Integer"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5.Table"],"chainable":[0,false],"example":[1,[[0,"\n\n function setup() {\n let table = new p5.Table();\n\n table.addColumn('name');\n table.addColumn('type');\n\n let newRow = table.addRow();\n newRow.setString('name', ' Lion ,');\n newRow.setString('type', ' Mammal ');\n\n newRow = table.addRow();\n newRow.setString('name', ' Snake ');\n newRow.setString('type', ' Reptile ');\n\n table.trim();\n print(table.getArray());\n }\n\n // prints:\n // 0 \"Lion\" \"Mamal\"\n // 1 \"Snake\" \"Reptile\"\n
A TableRow object represents a single row of data values,\nstored in columns, from a table.
\nA Table Row contains both an ordered array, and an unordered\nJSON object.
\n"],"line":[0,9],"params":[1,[[0,{"name":[0,"str"],"description":[0,"optional: populate the row with a\n string of values, separated by the\n separator
\n"],"type":[0,"String"],"optional":[0,true]}],[0,{"name":[0,"separator"],"description":[0,"comma separated values (csv) by default
\n"],"type":[0,"String"],"optional":[0,true]}]]],"chainable":[0,false],"methods":[0,{"set":[0,{"description":[0,"Stores a value in the TableRow's specified column.\nThe column may be specified by either its ID or title.
\n"],"path":[0,"p5.TableRow/set"]}],"setNum":[0,{"description":[0,"Stores a Float value in the TableRow's specified column.\nThe column may be specified by either its ID or title.
\n"],"path":[0,"p5.TableRow/setNum"]}],"setString":[0,{"description":[0,"Stores a String value in the TableRow's specified column.\nThe column may be specified by either its ID or title.
\n"],"path":[0,"p5.TableRow/setString"]}],"get":[0,{"description":[0,"Retrieves a value from the TableRow's specified column.\nThe column may be specified by either its ID or title.
\n"],"path":[0,"p5.TableRow/get"]}],"getNum":[0,{"description":[0,"Retrieves a Float value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.
\n"],"path":[0,"p5.TableRow/getNum"]}],"getString":[0,{"description":[0,"Retrieves an String value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.
\n"],"path":[0,"p5.TableRow/getString"]}]}],"isConstructor":[0,true],"path":[0,"p5/p5.TableRow"]}],"render":[0,null]}],"entries":[1,[[0,{"id":[0,"en/p5.TableRow/get.mdx"],"slug":[0,"en/p5tablerow/get"],"body":[0,"\n\n# get\n"],"collection":[0,"reference"],"data":[0,{"title":[0,"get()"],"module":[0,"IO"],"submodule":[0,"Table"],"file":[0,"src/io/p5.TableRow.js"],"description":[0,"Retrieves a value from the TableRow's specified column.\nThe column may be specified by either its ID or title.
\n"],"line":[0,184],"params":[1,[[0,{"name":[0,"column"],"description":[0,"columnName (string) or\n ID (number)
\n"],"type":[0,"String|Integer"]}]]],"itemtype":[0,"method"],"class":[0,"p5.TableRow"],"chainable":[0,false],"return":[0,{"description":[0,""],"type":[0,"String|Number"]}],"example":[1,[[0,"\n\n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('/assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let names = [];\n let rows = table.getRows();\n for (let r = 0; r < rows.length; r++) {\n names.push(rows[r].get('name'));\n }\n\n print(names);\n\n describe('no image displayed');\n }\n
Retrieves a Float value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.
\n"],"line":[0,231],"params":[1,[[0,{"name":[0,"column"],"description":[0,"columnName (string) or\n ID (number)
\n"],"type":[0,"String|Integer"]}]]],"itemtype":[0,"method"],"class":[0,"p5.TableRow"],"chainable":[0,false],"return":[0,{"description":[0,"Float Floating point number"],"type":[0,"Number"]}],"example":[1,[[0,"\n\n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('/assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n let minId = Infinity;\n let maxId = -Infinity;\n for (let r = 0; r < rows.length; r++) {\n let id = rows[r].getNum('id');\n minId = min(minId, id);\n maxId = min(maxId, id);\n }\n print('minimum id = ' + minId + ', maximum id = ' + maxId);\n describe('no image displayed');\n }\n
Retrieves an String value from the TableRow's specified\ncolumn. The column may be specified by either its ID or\ntitle.
\n"],"line":[0,285],"params":[1,[[0,{"name":[0,"column"],"description":[0,"columnName (string) or\n ID (number)
\n"],"type":[0,"String|Integer"]}]]],"itemtype":[0,"method"],"class":[0,"p5.TableRow"],"chainable":[0,false],"return":[0,{"description":[0,"String"],"type":[0,"String"]}],"example":[1,[[0,"\n\n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('/assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n let longest = '';\n for (let r = 0; r < rows.length; r++) {\n let species = rows[r].getString('species');\n if (longest.length < species.length) {\n longest = species;\n }\n }\n\n print('longest: ' + longest);\n\n describe('no image displayed');\n }\n
Stores a value in the TableRow's specified column.\nThe column may be specified by either its ID or title.
\n"],"line":[0,36],"params":[1,[[0,{"name":[0,"column"],"description":[0,"Column ID (Number)\n or Title (String)
\n"],"type":[0,"String|Integer"]}],[0,{"name":[0,"value"],"description":[0,"The value to be stored
\n"],"type":[0,"String|Number"]}]]],"itemtype":[0,"method"],"class":[0,"p5.TableRow"],"chainable":[0,false],"example":[1,[[0,"\n\n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('/assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n for (let r = 0; r < rows.length; r++) {\n rows[r].set('name', 'Unicorn');\n }\n\n //print the results\n print(table.getArray());\n\n describe('no image displayed');\n }\n
Stores a Float value in the TableRow's specified column.\nThe column may be specified by either its ID or title.
\n"],"line":[0,97],"params":[1,[[0,{"name":[0,"column"],"description":[0,"Column ID (Number)\n or Title (String)
\n"],"type":[0,"String|Integer"]}],[0,{"name":[0,"value"],"description":[0,"The value to be stored\n as a Float
\n"],"type":[0,"Number|String"]}]]],"itemtype":[0,"method"],"class":[0,"p5.TableRow"],"chainable":[0,false],"example":[1,[[0,"\n\n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('/assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n for (let r = 0; r < rows.length; r++) {\n rows[r].setNum('id', r + 10);\n }\n\n print(table.getArray());\n\n describe('no image displayed');\n }\n
Stores a String value in the TableRow's specified column.\nThe column may be specified by either its ID or title.
\n"],"line":[0,140],"params":[1,[[0,{"name":[0,"column"],"description":[0,"Column ID (Number)\n or Title (String)
\n"],"type":[0,"String|Integer"]}],[0,{"name":[0,"value"],"description":[0,"The value to be stored\n as a String
\n"],"type":[0,"String|Number|Boolean|Object"]}]]],"itemtype":[0,"method"],"class":[0,"p5.TableRow"],"chainable":[0,false],"example":[1,[[0,"\n\n // Given the CSV file \"mammals.csv\" in the project's \"assets\" folder:\n //\n // id,species,name\n // 0,Capra hircus,Goat\n // 1,Panthera pardus,Leopard\n // 2,Equus zebra,Zebra\n\n let table;\n\n function preload() {\n //my table is comma separated value \"csv\"\n //and has a header specifying the columns labels\n table = loadTable('/assets/mammals.csv', 'csv', 'header');\n }\n\n function setup() {\n let rows = table.getRows();\n for (let r = 0; r < rows.length; r++) {\n let name = rows[r].getString('name');\n rows[r].setString('name', 'A ' + name + ' named George');\n }\n\n print(table.getArray());\n\n describe('no image displayed');\n }\n
A class to describe an XML object.
\nEach p5.XML
object provides an easy way to interact with XML data.\nExtensible Markup Language\n(XML)\nis a standard format for sending data between applications. Like HTML, the\nXML format is based on tags and attributes, as in\n.
Note: Use loadXML() to load external XML files.
\n"],"line":[0,9],"chainable":[0,false],"example":[1,[[0,"\n\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('/assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get an array with all mammal tags.\n let mammals = myXML.getChildren('mammal');\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Iterate over the mammals array.\n for (let i = 0; i < mammals.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Get the mammal's common name.\n let name = mammals[i].getContent();\n\n // Display the mammal's name.\n text(name, 20, y);\n }\n\n describe(\n 'The words \"Goat\", \"Leopard\", and \"Zebra\" written on three separate lines. The text is black on a gray background.'\n );\n}\n
\nReturns the element's parent element as a new p5.XML\nobject.
\n"],"path":[0,"p5.XML/getParent"]}],"getName":[0,{"description":[0,"Returns the element's name as a String
.
An XML element's name is given by its tag. For example, the element\n
has the name language
.
Sets the element's tag name.
\nAn XML element's name is given by its tag. For example, the element\n
has the name language
.
The parameter, name
, is the element's new name as a string. For example,\ncalling myXML.setName('planet')
will make the element's new tag name\n
.
Returns true
if the element has child elements and false
if not.
Returns an array with the names of the element's child elements as\nString
s.
Returns an array with the element's child elements as new\np5.XML objects.
\nThe parameter, name
, is optional. If a string is passed, as in\nmyXML.getChildren('cat')
, then the method will only return child elements\nwith the tag
.
Returns the first matching child element as a new\np5.XML object.
\nThe parameter, name
, is optional. If a string is passed, as in\nmyXML.getChild('cat')
, then the first child element with the tag\n
will be returned. If a number is passed, as in\nmyXML.getChild(1)
, then the child element at that index will be returned.
Adds a new child element and returns a reference to it.
\nThe parameter, child
, is the p5.XML object to add\nas a child element. For example, calling myXML.addChild(otherXML)
inserts\notherXML
as a child element of myXML
.
Removes the first matching child element.
\nThe parameter, name
, is the child element to remove. If a string is\npassed, as in myXML.removeChild('cat')
, then the first child element\nwith the tag
will be removed. If a number is passed, as in\nmyXML.removeChild(1)
, then the child element at that index will be\nremoved.
Returns the number of attributes the element has.
\n"],"path":[0,"p5.XML/getAttributeCount"]}],"listAttributes":[0,{"description":[0,"Returns an Array
with the names of the element's attributes.
Note: Use\nmyXML.getString() or\nmyXML.getNum() to return an attribute's value.
\n"],"path":[0,"p5.XML/listAttributes"]}],"hasAttribute":[0,{"description":[0,"Returns true
if the element has a given attribute and false
if not.
The parameter, name
, is a string with the name of the attribute being\nchecked.
Note: Use\nmyXML.getString() or\nmyXML.getNum() to return an attribute's value.
\n"],"path":[0,"p5.XML/hasAttribute"]}],"getNum":[0,{"description":[0,"Return an attribute's value as a Number
.
The first parameter, name
, is a string with the name of the attribute\nbeing checked. For example, calling myXML.getNum('id')
returns the\nelement's id
attribute as a number.
The second parameter, defaultValue
, is optional. If a number is passed,\nas in myXML.getNum('id', -1)
, it will be returned if the attribute\ndoesn't exist or can't be converted to a number.
Note: Use\nmyXML.getString() or\nmyXML.getNum() to return an attribute's value.
\n"],"path":[0,"p5.XML/getNum"]}],"getString":[0,{"description":[0,"Return an attribute's value as a string.
\nThe first parameter, name
, is a string with the name of the attribute\nbeing checked. For example, calling myXML.getString('color')
returns the\nelement's id
attribute as a string.
The second parameter, defaultValue
, is optional. If a string is passed,\nas in myXML.getString('color', 'deeppink')
, it will be returned if the\nattribute doesn't exist.
Note: Use\nmyXML.getString() or\nmyXML.getNum() to return an attribute's value.
\n"],"path":[0,"p5.XML/getString"]}],"setAttribute":[0,{"description":[0,"Sets an attribute to a given value.
\nThe first parameter, name
, is a string with the name of the attribute\nbeing set.
The second parameter, value
, is the attribute's new value. For example,\ncalling myXML.setAttribute('id', 123)
sets the id
attribute to the\nvalue 123.
Returns the element's content as a String
.
The parameter, defaultValue
, is optional. If a string is passed, as in\nmyXML.getContent('???')
, it will be returned if the element has no\ncontent.
Sets the element's content.
\nAn element's content is the text between its tags. For example, the element\n
has the content JavaScript
.
The parameter, content
, is a string with the element's new content.
Returns the element as a String
.
myXML.serialize()
is useful for sending the element over the network or\nsaving it to a file.
Adds a new child element and returns a reference to it.
\nThe parameter, child
, is the p5.XML object to add\nas a child element. For example, calling myXML.addChild(otherXML)
inserts\notherXML
as a child element of myXML
.
child element to add.
\n"],"type":[0,"p5.XML"]}]]],"itemtype":[0,"method"],"class":[0,"p5.XML"],"chainable":[0,false],"return":[0,{"description":[0,"added child element."],"type":[0,"p5.XML"]}],"example":[1,[[0,"\n\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('/assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a new p5.XML object.\n let newAnimal = new p5.XML();\n\n // Set its properties.\n newAnimal.setName('hydrozoa');\n newAnimal.setAttribute('id', 4);\n newAnimal.setAttribute('species', 'Physalia physalis');\n newAnimal.setContent('Bluebottle');\n\n // Add the child element.\n myXML.addChild(newAnimal);\n\n // Get the first child element that is a hydrozoa.\n let blueBottle = myXML.getChild('hydrozoa');\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Get the child element's content.\n let content = blueBottle.getContent();\n\n // Display the child element's content.\n text(content, 50, 50);\n\n describe('The word \"Bluebottle\" written in black on a gray background.');\n}\n
\nReturns the number of attributes the element has.
\n"],"line":[0,723],"itemtype":[0,"method"],"class":[0,"p5.XML"],"chainable":[0,false],"return":[0,{"description":[0,"number of attributes."],"type":[0,"Integer"]}],"example":[1,[[0,"\n\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('/assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first child element.\n let first = myXML.getChild(0);\n\n // Get the number of attributes.\n let numAttributes = first.getAttributeCount();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the number of attributes.\n text(numAttributes, 50, 50);\n\n describe('The number \"2\" written in black on a gray background.');\n}\n
\nReturns the first matching child element as a new\np5.XML object.
\nThe parameter, name
, is optional. If a string is passed, as in\nmyXML.getChild('cat')
, then the first child element with the tag\n
will be returned. If a number is passed, as in\nmyXML.getChild(1)
, then the child element at that index will be returned.
element name or index.
\n"],"type":[0,"String|Integer"]}]]],"itemtype":[0,"method"],"class":[0,"p5.XML"],"chainable":[0,false],"return":[0,{"description":[0,"child element."],"type":[0,"p5.XML"]}],"example":[1,[[0,"\n\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('/assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first child element that is a mammal.\n let goat = myXML.getChild('mammal');\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Get the child element's content.\n let content = goat.getContent();\n\n // Display the child element's content.\n text(content, 50, 50);\n\n describe('The word \"Goat\" written in black on a gray background.');\n}\n
\n\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('/assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the child element at index 1.\n let leopard = myXML.getChild(1);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Get the child element's content.\n let content = leopard.getContent();\n\n // Display the child element's content.\n text(content, 50, 50);\n\n describe('The word \"Leopard\" written in black on a gray background.');\n}\n
\nReturns an array with the element's child elements as new\np5.XML objects.
\nThe parameter, name
, is optional. If a string is passed, as in\nmyXML.getChildren('cat')
, then the method will only return child elements\nwith the tag
.
name of the elements to return.
\n"],"type":[0,"String"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5.XML"],"chainable":[0,false],"return":[0,{"description":[0,"child elements."],"type":[0,"p5.XML[]"]}],"example":[1,[[0,"\n\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('/assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get an array of the child elements.\n let children = myXML.getChildren();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Iterate over the array.\n for (let i = 0; i < children.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 20;\n\n // Get the child element's content.\n let content = children[i].getContent();\n\n // Display the child element's content.\n text(content, 10, y);\n }\n\n describe(\n 'The words \"Goat\", \"Leopard\", \"Zebra\", and \"Turtle\" written on separate lines. The text is black on a gray background.'\n );\n}\n
\n\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('/assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get an array of the child elements\n // that are mammals.\n let children = myXML.getChildren('mammal');\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Iterate over the array.\n for (let i = 0; i < children.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 20;\n\n // Get the child element's content.\n let content = children[i].getContent();\n\n // Display the child element's content.\n text(content, 10, y);\n }\n\n describe(\n 'The words \"Goat\", \"Leopard\", and \"Zebra\" written on separate lines. The text is black on a gray background.'\n );\n}\n
\nReturns the element's content as a String
.
The parameter, defaultValue
, is optional. If a string is passed, as in\nmyXML.getContent('???')
, it will be returned if the element has no\ncontent.
value to return if the element has no\n content.
\n"],"type":[0,"String"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5.XML"],"chainable":[0,false],"return":[0,{"description":[0,"element's content as a string."],"type":[0,"String"]}],"example":[1,[[0,"\n\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('/assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first reptile child element.\n let reptile = myXML.getChild('reptile');\n\n // Get the reptile's content.\n let content = reptile.getContent();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the element's content.\n text(content, 5, 50, 90);\n\n describe(`The text \"${content}\" written in green on a gray background.`);\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a p5.XML object.\n let blankSpace = new p5.XML();\n\n // Get the element's content and use a default value.\n let content = blankSpace.getContent('Your name');\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the element's content.\n text(content, 5, 50, 90);\n\n describe(`The text \"${content}\" written in green on a gray background.`);\n}\n
\nReturns the element's name as a String
.
An XML element's name is given by its tag. For example, the element\n
has the name language
.
\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('/assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get an array with all mammal elements.\n let mammals = myXML.getChildren('mammal');\n\n // Get the first mammal element.\n let firstMammal = mammals[0];\n\n // Get the mammal element's name.\n let name = firstMammal.getName();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the element's name.\n text(name, 50, 50);\n\n describe('The word \"mammal\" written in black on a gray background.');\n}\n
\nReturn an attribute's value as a Number
.
The first parameter, name
, is a string with the name of the attribute\nbeing checked. For example, calling myXML.getNum('id')
returns the\nelement's id
attribute as a number.
The second parameter, defaultValue
, is optional. If a number is passed,\nas in myXML.getNum('id', -1)
, it will be returned if the attribute\ndoesn't exist or can't be converted to a number.
Note: Use\nmyXML.getString() or\nmyXML.getNum() to return an attribute's value.
\n"],"line":[0,884],"params":[1,[[0,{"name":[0,"name"],"description":[0,"name of the attribute to be checked.
\n"],"type":[0,"String"]}],[0,{"name":[0,"defaultValue"],"description":[0,"value to return if the attribute doesn't exist.
\n"],"type":[0,"Number"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5.XML"],"chainable":[0,false],"return":[0,{"description":[0,"attribute value as a number."],"type":[0,"Number"]}],"example":[1,[[0,"\n\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('/assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first reptile child element.\n let reptile = myXML.getChild('reptile');\n\n // Get the reptile's content.\n let content = reptile.getContent();\n\n // Get the reptile's ID.\n let id = reptile.getNum('id');\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the ID attribute.\n text(`${content} is ${id + 1}th`, 5, 50, 90);\n\n describe(`The text \"${content} is ${id + 1}th\" written in black on a gray background.`);\n}\n
\n\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('/assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first reptile child element.\n let reptile = myXML.getChild('reptile');\n\n // Get the reptile's content.\n let content = reptile.getContent();\n\n // Get the reptile's size.\n let weight = reptile.getNum('weight', 135);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the ID attribute.\n text(`${content} is ${weight}kg`, 5, 50, 90);\n\n describe(\n `The text \"${content} is ${weight}kg\" written in black on a gray background.`\n );\n}\n
\nReturns the element's parent element as a new p5.XML\nobject.
\n"],"line":[0,77],"itemtype":[0,"method"],"class":[0,"p5.XML"],"chainable":[0,false],"return":[0,{"description":[0,"parent element."],"type":[0,"p5.XML"]}],"example":[1,[[0,"\n\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('/assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get an array with all mammal elements.\n let mammals = myXML.getChildren('mammal');\n\n // Get the first mammal element.\n let firstMammal = mammals[0];\n\n // Get the parent element.\n let parent = firstMammal.getParent();\n\n // Get the parent element's name.\n let name = parent.getName();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the parent element's name.\n text(name, 50, 50);\n\n describe('The word \"animals\" written in black on a gray background.');\n}\n
\nReturn an attribute's value as a string.
\nThe first parameter, name
, is a string with the name of the attribute\nbeing checked. For example, calling myXML.getString('color')
returns the\nelement's id
attribute as a string.
The second parameter, defaultValue
, is optional. If a string is passed,\nas in myXML.getString('color', 'deeppink')
, it will be returned if the\nattribute doesn't exist.
Note: Use\nmyXML.getString() or\nmyXML.getNum() to return an attribute's value.
\n"],"line":[0,989],"params":[1,[[0,{"name":[0,"name"],"description":[0,"name of the attribute to be checked.
\n"],"type":[0,"String"]}],[0,{"name":[0,"defaultValue"],"description":[0,"value to return if the attribute doesn't exist.
\n"],"type":[0,"Number"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5.XML"],"chainable":[0,false],"return":[0,{"description":[0,"attribute value as a string."],"type":[0,"String"]}],"example":[1,[[0,"\n\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('/assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first reptile child element.\n let reptile = myXML.getChild('reptile');\n\n // Get the reptile's content.\n let content = reptile.getContent();\n\n // Get the reptile's species.\n let species = reptile.getString('species');\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the species attribute.\n text(`${content}: ${species}`, 5, 50, 90);\n\n describe(`The text \"${content}: ${species}\" written in black on a gray background.`);\n}\n
\n\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('/assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first reptile child element.\n let reptile = myXML.getChild('reptile');\n\n // Get the reptile's content.\n let content = reptile.getContent();\n\n // Get the reptile's color.\n let attribute = reptile.getString('color', 'green');\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n fill(attribute);\n\n // Display the element's content.\n text(content, 50, 50);\n\n describe(`The text \"${content}\" written in green on a gray background.`);\n}\n
\nReturns true
if the element has a given attribute and false
if not.
The parameter, name
, is a string with the name of the attribute being\nchecked.
Note: Use\nmyXML.getString() or\nmyXML.getNum() to return an attribute's value.
\n"],"line":[0,821],"params":[1,[[0,{"name":[0,"name"],"description":[0,"name of the attribute to be checked.
\n"],"type":[0,"String"]}]]],"itemtype":[0,"method"],"class":[0,"p5.XML"],"chainable":[0,false],"return":[0,{"description":[0,"whether the element has the attribute."],"type":[0,"Boolean"]}],"example":[1,[[0,"\n\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('/assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first mammal child element.\n let mammal = myXML.getChild('mammal');\n\n // Check whether the element has an\n // species attribute.\n let hasSpecies = mammal.hasAttribute('species');\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display whether the element has a species attribute.\n if (hasSpecies === true) {\n text('Species', 50, 50);\n } else {\n text('No species', 50, 50);\n }\n\n describe('The text \"Species\" written in black on a gray background.');\n}\n
\nReturns true
if the element has child elements and false
if not.
\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('/assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Check whether the element has child elements.\n let isParent = myXML.hasChildren();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Style the text.\n if (isParent === true) {\n text('Parent', 50, 50);\n } else {\n text('Not Parent', 50, 50);\n }\n\n describe('The word \"Parent\" written in black on a gray background.');\n}\n
\nReturns an Array
with the names of the element's attributes.
Note: Use\nmyXML.getString() or\nmyXML.getNum() to return an attribute's value.
\n"],"line":[0,767],"itemtype":[0,"method"],"class":[0,"p5.XML"],"chainable":[0,false],"return":[0,{"description":[0,"attribute names."],"type":[0,"String[]"]}],"example":[1,[[0,"\n\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('/assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first child element.\n let first = myXML.getChild(0);\n\n // Get the number of attributes.\n let attributes = first.listAttributes();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the element's attributes.\n text(attributes, 50, 50);\n\n describe('The text \"id,species\" written in black on a gray background.');\n}\n
\nReturns an array with the names of the element's child elements as\nString
s.
\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('/assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the names of the element's children as an array.\n let children = myXML.listChildren();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Iterate over the array.\n for (let i = 0; i < children.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Display the child element's name.\n text(children[i], 10, y);\n }\n\n describe(\n 'The words \"mammal\", \"mammal\", \"mammal\", and \"reptile\" written on separate lines. The text is black on a gray background.'\n );\n}\n
\nRemoves the first matching child element.
\nThe parameter, name
, is the child element to remove. If a string is\npassed, as in myXML.removeChild('cat')
, then the first child element\nwith the tag
will be removed. If a number is passed, as in\nmyXML.removeChild(1)
, then the child element at that index will be\nremoved.
name or index of the child element to remove.
\n"],"type":[0,"String|Integer"]}]]],"itemtype":[0,"method"],"class":[0,"p5.XML"],"chainable":[0,false],"example":[1,[[0,"\n\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('/assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Remove the first mammal element.\n myXML.removeChild('mammal');\n\n // Get an array of child elements.\n let children = myXML.getChildren();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Iterate over the array.\n for (let i = 0; i < children.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Get the child element's content.\n let content = children[i].getContent();\n\n // Display the child element's content.\n text(content, 10, y);\n }\n\n describe(\n 'The words \"Leopard\", \"Zebra\", and \"Turtle\" written on separate lines. The text is black on a gray background.'\n );\n}\n
\n\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('/assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Remove the element at index 2.\n myXML.removeChild(2);\n\n // Get an array of child elements.\n let children = myXML.getChildren();\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Iterate over the array.\n for (let i = 0; i < children.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Get the child element's content.\n let content = children[i].getContent();\n\n // Display the child element's content.\n text(content, 10, y);\n }\n\n describe(\n 'The words \"Goat\", \"Leopard\", and \"Turtle\" written on separate lines. The text is black on a gray background.'\n );\n}\n
\nReturns the element as a String
.
myXML.serialize()
is useful for sending the element over the network or\nsaving it to a file.
\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('/assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Display instructions.\n text('Double-click to save', 5, 50, 90);\n\n describe('The text \"Double-click to save\" written in black on a gray background.');\n}\n\n// Save the file when the user double-clicks.\nfunction doubleClicked() {\n // Create a p5.PrintWriter object.\n // Use the file format .xml.\n let myWriter = createWriter('animals', 'xml');\n\n // Serialize the XML data to a string.\n let data = myXML.serialize();\n\n // Write the data to the print stream.\n myWriter.write(data);\n\n // Save the file and close the print stream.\n myWriter.close();\n}\n
\nSets an attribute to a given value.
\nThe first parameter, name
, is a string with the name of the attribute\nbeing set.
The second parameter, value
, is the attribute's new value. For example,\ncalling myXML.setAttribute('id', 123)
sets the id
attribute to the\nvalue 123.
name of the attribute to be set.
\n"],"type":[0,"String"]}],[0,{"name":[0,"value"],"description":[0,"attribute's new value.
\n"],"type":[0,"Number|String|Boolean"]}]]],"itemtype":[0,"method"],"class":[0,"p5.XML"],"chainable":[0,false],"example":[1,[[0,"\n\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('/assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first reptile child element.\n let reptile = myXML.getChild('reptile');\n\n // Set the reptile's color.\n reptile.setAttribute('color', 'green');\n\n // Get the reptile's content.\n let content = reptile.getContent();\n\n // Get the reptile's color.\n let attribute = reptile.getString('color');\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the element's content.\n text(`${content} is ${attribute}`, 5, 50, 90);\n\n describe(\n `The text \"${content} is ${attribute}\" written in green on a gray background.`\n );\n}\n
\nSets the element's content.
\nAn element's content is the text between its tags. For example, the element\n
has the content JavaScript
.
The parameter, content
, is a string with the element's new content.
new content for the element.
\n"],"type":[0,"String"]}]]],"itemtype":[0,"method"],"class":[0,"p5.XML"],"chainable":[0,false],"example":[1,[[0,"\n\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('/assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the first reptile child element.\n let reptile = myXML.getChild('reptile');\n\n // Get the reptile's original content.\n let oldContent = reptile.getContent();\n\n // Set the reptile's content.\n reptile.setContent('Loggerhead');\n\n // Get the reptile's new content.\n let newContent = reptile.getContent();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the element's old and new content.\n text(`${oldContent}: ${newContent}`, 5, 50, 90);\n\n describe(\n `The text \"${oldContent}: ${newContent}\" written in green on a gray background.`\n );\n}\n
\nSets the element's tag name.
\nAn XML element's name is given by its tag. For example, the element\n
has the name language
.
The parameter, name
, is the element's new name as a string. For example,\ncalling myXML.setName('planet')
will make the element's new tag name\n
.
new tag name of the element.
\n"],"type":[0,"String"]}]]],"itemtype":[0,"method"],"class":[0,"p5.XML"],"chainable":[0,false],"example":[1,[[0,"\n\nlet myXML;\n\n// Load the XML and create a p5.XML object.\nfunction preload() {\n myXML = loadXML('/assets/animals.xml');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Get the element's original name.\n let oldName = myXML.getName();\n\n // Set the element's name.\n myXML.setName('monsters');\n\n // Get the element's new name.\n let newName = myXML.getName();\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(14);\n\n // Display the element's names.\n text(oldName, 50, 33);\n text(newName, 50, 67);\n\n describe(\n 'The words \"animals\" and \"monsters\" written on separate lines. The text is black on a gray background.'\n );\n}\n
The system variable accelerationX always contains the acceleration of the\ndevice along the x axis. Value is represented as meters per second squared.
\n"],"line":[0,23],"itemtype":[0,"property"],"class":[0,"p5"],"example":[1,[[0,"\n\n// Move a touchscreen device to register\n// acceleration changes.\nfunction draw() {\n background(220, 50);\n fill('magenta');\n ellipse(width / 2, height / 2, accelerationX);\n describe('Magnitude of device acceleration is displayed as ellipse size.');\n}\n
\nThe system variable accelerationY always contains the acceleration of the\ndevice along the y axis. Value is represented as meters per second squared.
\n"],"line":[0,45],"itemtype":[0,"property"],"class":[0,"p5"],"example":[1,[[0,"\n\n// Move a touchscreen device to register\n// acceleration changes.\nfunction draw() {\n background(220, 50);\n fill('magenta');\n ellipse(width / 2, height / 2, accelerationY);\n describe('Magnitude of device acceleration is displayed as ellipse size');\n}\n
\nThe system variable accelerationZ always contains the acceleration of the\ndevice along the z axis. Value is represented as meters per second squared.
\n"],"line":[0,67],"itemtype":[0,"property"],"class":[0,"p5"],"example":[1,[[0,"\n\n// Move a touchscreen device to register\n// acceleration changes.\nfunction draw() {\n background(220, 50);\n fill('magenta');\n ellipse(width / 2, height / 2, accelerationZ);\n describe('Magnitude of device acceleration is displayed as ellipse size');\n}\n
\nThe deviceMoved() function is called when the device is moved by more than\nthe threshold value along X, Y or Z axis. The default threshold is set to 0.5.\nThe threshold value can be changed using setMoveThreshold().
\n"],"line":[0,501],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\n// Run this example on a mobile device\n// Move the device around\n// to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device moves`);\n}\nfunction deviceMoved() {\n value = value + 5;\n if (value > 255) {\n value = 0;\n }\n}\n
\nThe system variable deviceOrientation always contains the orientation of\nthe device. The value of this variable will either be set 'landscape'\nor 'portrait'. If no data is available it will be set to 'undefined'.\neither LANDSCAPE or PORTRAIT.
\n"],"line":[0,11],"itemtype":[0,"property"],"class":[0,"p5"],"isConstructor":[0,false],"path":[0,"p5/deviceOrientation"]}],"render":[0,null]}],[0,{"id":[0,"en/p5/deviceShaken.mdx"],"slug":[0,"en/p5/deviceshaken"],"body":[0,"\n\n# deviceShaken\n"],"collection":[0,"reference"],"data":[0,{"title":[0,"deviceShaken()"],"module":[0,"Events"],"submodule":[0,"Acceleration"],"file":[0,"src/events/acceleration.js"],"description":[0,"The deviceShaken() function is called when the device total acceleration\nchanges of accelerationX and accelerationY values is more than\nthe threshold value. The default threshold is set to 30.\nThe threshold value can be changed using setShakeThreshold().
\n"],"line":[0,589],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\n// Run this example on a mobile device\n// Shake the device to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device shakes`);\n}\nfunction deviceShaken() {\n value = value + 5;\n if (value > 255) {\n value = 0;\n }\n}\n
\nThe deviceTurned() function is called when the device rotates by\nmore than 90 degrees continuously.
\nThe axis that triggers the deviceTurned() method is stored in the turnAxis\nvariable. The deviceTurned() method can be locked to trigger on any axis:\nX, Y or Z by comparing the turnAxis variable to 'X', 'Y' or 'Z'.
\n"],"line":[0,531],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\n// Run this example on a mobile device\n// Rotate the device by 90 degrees\n// to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device turns`);\n}\nfunction deviceTurned() {\n if (value === 0) {\n value = 255;\n } else if (value === 255) {\n value = 0;\n }\n}\n
\n\n// Run this example on a mobile device\n// Rotate the device by 90 degrees in the\n// X-axis to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when x-axis turns`);\n}\nfunction deviceTurned() {\n if (turnAxis === 'X') {\n if (value === 0) {\n value = 255;\n } else if (value === 255) {\n value = 0;\n }\n }\n}\n
\nThe system variable pAccelerationX always contains the acceleration of the\ndevice along the x axis in the frame previous to the current frame. Value\nis represented as meters per second squared.
\n"],"line":[0,90],"itemtype":[0,"property"],"class":[0,"p5"],"isConstructor":[0,false],"path":[0,"p5/pAccelerationX"]}],"render":[0,null]}],[0,{"id":[0,"en/p5/pAccelerationY.mdx"],"slug":[0,"en/p5/paccelerationy"],"body":[0,"\n\n# pAccelerationY\n"],"collection":[0,"reference"],"data":[0,{"title":[0,"pAccelerationY"],"module":[0,"Events"],"submodule":[0,"Acceleration"],"file":[0,"src/events/acceleration.js"],"description":[0,"The system variable pAccelerationY always contains the acceleration of the\ndevice along the y axis in the frame previous to the current frame. Value\nis represented as meters per second squared.
\n"],"line":[0,100],"itemtype":[0,"property"],"class":[0,"p5"],"isConstructor":[0,false],"path":[0,"p5/pAccelerationY"]}],"render":[0,null]}],[0,{"id":[0,"en/p5/pAccelerationZ.mdx"],"slug":[0,"en/p5/paccelerationz"],"body":[0,"\n\n# pAccelerationZ\n"],"collection":[0,"reference"],"data":[0,{"title":[0,"pAccelerationZ"],"module":[0,"Events"],"submodule":[0,"Acceleration"],"file":[0,"src/events/acceleration.js"],"description":[0,"The system variable pAccelerationZ always contains the acceleration of the\ndevice along the z axis in the frame previous to the current frame. Value\nis represented as meters per second squared.
\n"],"line":[0,110],"itemtype":[0,"property"],"class":[0,"p5"],"isConstructor":[0,false],"path":[0,"p5/pAccelerationZ"]}],"render":[0,null]}],[0,{"id":[0,"en/p5/pRotationX.mdx"],"slug":[0,"en/p5/protationx"],"body":[0,"\n\n# pRotationX\n"],"collection":[0,"reference"],"data":[0,{"title":[0,"pRotationX"],"module":[0,"Events"],"submodule":[0,"Acceleration"],"file":[0,"src/events/acceleration.js"],"description":[0,"The system variable pRotationX always contains the rotation of the\ndevice along the x axis in the frame previous to the current frame.\nIf the sketch angleMode() is set to DEGREES,\nthe value will be -180 to 180. If it is set to RADIANS, the value will\nbe -PI to PI.
\npRotationX can also be used with rotationX to determine the rotate\ndirection of the device along the X-axis.
\n"],"line":[0,234],"itemtype":[0,"property"],"class":[0,"p5"],"example":[1,[[0,"\n\n// A simple if statement looking at whether\n// rotationX - pRotationX < 0 is true or not will be\n// sufficient for determining the rotate direction\n// in most cases.\n\n// Some extra logic is needed to account for cases where\n// the angles wrap around.\nlet rotateDirection = 'clockwise';\n\n// Simple range conversion to make things simpler.\n// This is not absolutely necessary but the logic\n// will be different in that case.\n\nlet rX = rotationX + 180;\nlet pRX = pRotationX + 180;\n\nif ((rX - pRX > 0 && rX - pRX < 270) || rX - pRX < -270) {\n rotateDirection = 'clockwise';\n} else if (rX - pRX < 0 || rX - pRX > 270) {\n rotateDirection = 'counter-clockwise';\n}\n\nprint(rotateDirection);\ndescribe('no image to display.');\n
\nThe system variable pRotationY always contains the rotation of the\ndevice along the y axis in the frame previous to the current frame.\nIf the sketch angleMode() is set to DEGREES,\nthe value will be -90 to 90. If it is set to RADIANS, the value will\nbe -PI/2 to PI/2.
\npRotationY can also be used with rotationY to determine the rotate\ndirection of the device along the Y-axis.
\n"],"line":[0,278],"itemtype":[0,"property"],"class":[0,"p5"],"example":[1,[[0,"\n\n// A simple if statement looking at whether\n// rotationY - pRotationY < 0 is true or not will be\n// sufficient for determining the rotate direction\n// in most cases.\n\n// Some extra logic is needed to account for cases where\n// the angles wrap around.\nlet rotateDirection = 'clockwise';\n\n// Simple range conversion to make things simpler.\n// This is not absolutely necessary but the logic\n// will be different in that case.\n\nlet rY = rotationY + 180;\nlet pRY = pRotationY + 180;\n\nif ((rY - pRY > 0 && rY - pRY < 270) || rY - pRY < -270) {\n rotateDirection = 'clockwise';\n} else if (rY - pRY < 0 || rY - pRY > 270) {\n rotateDirection = 'counter-clockwise';\n}\nprint(rotateDirection);\ndescribe('no image to display.');\n
\nThe system variable pRotationZ always contains the rotation of the\ndevice along the z axis in the frame previous to the current frame.\nIf the sketch angleMode() is set to DEGREES,\nthe value will be 0 to 360. If it is set to RADIANS, the value will\nbe 0 to 2*PI.
\npRotationZ can also be used with rotationZ to determine the rotate\ndirection of the device along the Z-axis.
\n"],"line":[0,321],"itemtype":[0,"property"],"class":[0,"p5"],"example":[1,[[0,"\n\n// A simple if statement looking at whether\n// rotationZ - pRotationZ < 0 is true or not will be\n// sufficient for determining the rotate direction\n// in most cases.\n\n// Some extra logic is needed to account for cases where\n// the angles wrap around.\nlet rotateDirection = 'clockwise';\n\nif (\n (rotationZ - pRotationZ > 0 && rotationZ - pRotationZ < 270) ||\n rotationZ - pRotationZ < -270\n) {\n rotateDirection = 'clockwise';\n} else if (rotationZ - pRotationZ < 0 || rotationZ - pRotationZ > 270) {\n rotateDirection = 'counter-clockwise';\n}\nprint(rotateDirection);\ndescribe('no image to display.');\n
\nThe system variable rotationX always contains the rotation of the\ndevice along the x axis. If the sketch \nangleMode() is set to DEGREES, the value will be -180 to 180. If\nit is set to RADIANS, the value will be -PI to PI.
\nNote: The order the rotations are called is important, ie. if used\ntogether, it must be called in the order Z-X-Y or there might be\nunexpected behaviour.
\n"],"line":[0,131],"itemtype":[0,"property"],"class":[0,"p5"],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(200);\n //rotateZ(radians(rotationZ));\n rotateX(radians(rotationX));\n //rotateY(radians(rotationY));\n box(200, 200, 200);\n describe(`red horizontal line right, green vertical line bottom.\n black background.`);\n}\n
\nThe system variable rotationY always contains the rotation of the\ndevice along the y axis. If the sketch \nangleMode() is set to DEGREES, the value will be -90 to 90. If\nit is set to RADIANS, the value will be -PI/2 to PI/2.
\nNote: The order the rotations are called is important, ie. if used\ntogether, it must be called in the order Z-X-Y or there might be\nunexpected behaviour.
\n"],"line":[0,164],"itemtype":[0,"property"],"class":[0,"p5"],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(200);\n //rotateZ(radians(rotationZ));\n //rotateX(radians(rotationX));\n rotateY(radians(rotationY));\n box(200, 200, 200);\n describe(`red horizontal line right, green vertical line bottom.\n black background.`);\n}\n
\nThe system variable rotationZ always contains the rotation of the\ndevice along the z axis. If the sketch \nangleMode() is set to DEGREES, the value will be 0 to 360. If\nit is set to RADIANS, the value will be 0 to 2*PI.
\nUnlike rotationX and rotationY, this variable is available for devices\nwith a built-in compass only.
\nNote: The order the rotations are called is important, ie. if used\ntogether, it must be called in the order Z-X-Y or there might be\nunexpected behaviour.
\n"],"line":[0,197],"itemtype":[0,"property"],"class":[0,"p5"],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n}\n\nfunction draw() {\n background(200);\n rotateZ(radians(rotationZ));\n //rotateX(radians(rotationX));\n //rotateY(radians(rotationY));\n box(200, 200, 200);\n describe(`red horizontal line right, green vertical line bottom.\n black background.`);\n}\n
\nThe setMoveThreshold() function is used to set the movement threshold for\nthe deviceMoved() function. The default threshold is set to 0.5.
\n"],"line":[0,417],"params":[1,[[0,{"name":[0,"value"],"description":[0,"The threshold value
\n"],"type":[0,"Number"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\n// Run this example on a mobile device\n// You will need to move the device incrementally further\n// the closer the square's color gets to white in order to change the value.\n\nlet value = 0;\nlet threshold = 0.5;\nfunction setup() {\n setMoveThreshold(threshold);\n}\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device moves`);\n}\nfunction deviceMoved() {\n value = value + 5;\n threshold = threshold + 0.1;\n if (value > 255) {\n value = 0;\n threshold = 30;\n }\n setMoveThreshold(threshold);\n}\n
\nThe setShakeThreshold() function is used to set the movement threshold for\nthe deviceShaken() function. The default threshold is set to 30.
\n"],"line":[0,459],"params":[1,[[0,{"name":[0,"value"],"description":[0,"The threshold value
\n"],"type":[0,"Number"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\n// Run this example on a mobile device\n// You will need to shake the device more firmly\n// the closer the box's fill gets to white in order to change the value.\n\nlet value = 0;\nlet threshold = 30;\nfunction setup() {\n setShakeThreshold(threshold);\n}\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device is being shaked`);\n}\nfunction deviceMoved() {\n value = value + 5;\n threshold = threshold + 5;\n if (value > 255) {\n value = 0;\n threshold = 30;\n }\n setShakeThreshold(threshold);\n}\n
\nWhen a device is rotated, the axis that triggers the deviceTurned()\nmethod is stored in the turnAxis variable. The turnAxis variable is only defined within\nthe scope of deviceTurned().
\n"],"line":[0,378],"itemtype":[0,"property"],"class":[0,"p5"],"example":[1,[[0,"\n\n// Run this example on a mobile device\n// Rotate the device by 90 degrees in the\n// X-axis to change the value.\n\nlet value = 0;\nfunction draw() {\n fill(value);\n rect(25, 25, 50, 50);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when device turns`);\n describe(`50-by-50 black rect in center of canvas.\n turns white on mobile when x-axis turns`);\n}\nfunction deviceTurned() {\n if (turnAxis === 'X') {\n if (value === 0) {\n value = 255;\n } else if (value === 255) {\n value = 0;\n }\n }\n}\n
\nतत्व बदलने पर फ़ंक्शन को कॉल करता है।
\nmyElement.changed(false)
को कॉल करने से फ़ंक्शन अक्षम हो जाता है।
तत्व बदलने पर कॉल करने के लिए फ़ंक्शन।\n false
फ़ंक्शन को अक्षम कर देता है।
\nlet dropdown;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a dropdown menu and add a few color options.\n dropdown = createSelect();\n dropdown.position(0, 0);\n dropdown.option('red');\n dropdown.option('green');\n dropdown.option('blue');\n\n // Call paintBackground() when the color option changes.\n dropdown.changed(paintBackground);\n\n describe('A gray square with a dropdown menu at the top. The square changes color when an option is selected.');\n}\n\n// Paint the background with the selected color.\nfunction paintBackground() {\n let c = dropdown.value();\n background(c);\n}\n
\n\nlet checkbox;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a checkbox and place it beneath the canvas.\n checkbox = createCheckbox(' circle');\n checkbox.position(0, 100);\n\n // Call repaint() when the checkbox changes.\n checkbox.changed(repaint);\n\n describe('A gray square with a checkbox underneath it that says \"circle\". A white circle appears when the box is checked and disappears otherwise.');\n}\n\n// Paint the background gray and determine whether to draw a circle.\nfunction repaint() {\n background(200);\n if (checkbox.checked() === true) {\n circle(50, 50, 30);\n }\n}\n
\nएक तत्व बनाता है जो दूसरे वेब पेज से लिंक होता है।
पहला पैरामीटर, href
, एक स्ट्रिंग है जो लिंक किए गए पेज का URL सेट करता है
दूसरा पैरामीटर, html
, एक स्ट्रिंग है जो हाइपरलिंक के आंतरिक एचटीएमएल को सेट करता है। टेक्स्ट, छवियों या बटनों को लिंक के रूप में उपयोग करना आम बात है।
तीसरा पैरामीटर, target
, वैकल्पिक है। यह स्ट्रिंग निर्दिष्ट करता है कि वेब ब्राउज़र का लिंक कहाँ खोलना है। डिफ़ॉल्ट रूप से, लिंक करंट ब्राउज़र टैब में खुलते हैं | '_blank'
पास करने से लिंक नए ब्राउज़र टैब में खुल जाएगा | एमडीएन कुछ अन्य विकल्प का वर्णन करता है |
लिंक किए गए पृष्ठ का यूआरएल |
\n"],"type":[0,"स्ट्रिंग"]}],[0,{"name":[0,"html"],"description":[0,"प्रदर्शित करने के लिए लिंक तत्व का आंतरिक एचटीएमएल।
\n"],"type":[0,"स्ट्रिंग"]}],[0,{"name":[0,"target"],"description":[0,"लक्षित करें कि नया लिंक कहां खुलेगा, या तो '_blank'
, '_self'
, '_parent'
, या '_top'
|
\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an anchor element that links to p5js.org.\n let a = createA('https://p5js.org/', 'p5*js');\n a.position(25, 35);\n\n describe('The text \"p5*js\" written at the center of a gray square.');\n}\n
\n\nfunction setup() {\n background(200);\n\n // Create an anchor tag that links to p5js.org.\n // Open the link in a new tab.\n let a = createA('https://p5js.org/', 'p5*js', '_blank');\n a.position(25, 35);\n\n describe('The text \"p5*js\" written at the center of a gray square.');\n}\n
\nसरल ऑडियो प्लेबैक के लिए एक छिपा हुआ तत्व बनाता है।
createAudio()
एक नया p5.MediaElement ऑब्जेक्ट लौटाता है।
पहला पैरामीटर, src
, वीडियो का पथ है। यदि एक एकल स्ट्रिंग पारित की जाती है, जैसे '/assets/video.mp4'
, तो एक एकल वीडियो लोड होता है। एक ही वीडियो को विभिन्न प्रारूपों में लोड करने के लिए स्ट्रिंग्स की एक सरणी का उपयोग किया जा सकता है। उदाहरण के लिए, ['/assets/video.mp4', '/assets/video.ogv', '/assets/video.webm']
| यह सुनिश्चित करने के लिए उपयोगी है कि वीडियो विभिन्न ब्राउज़रों पर विभिन्न क्षमताओं के साथ चल सके। समर्थित प्रारूपों के बारे में अधिक जानकारी के लिए एमडीएन देखें।
दूसरा पैरामीटर, callback
, वैकल्पिक है। ऑडियो चलाने के लिए तैयार होने के बाद कॉल होने वाला एक फ़ंक्शन है।
किसी ऑडियो फ़ाइल का पथ, या पथों की एक सारणी विभिन्न ब्राउज़रों का समर्थन करने के लिए।
\n"],"type":[0,"स्ट्रिंग | स्ट्रिंग[]"],"optional":[0,true]}],[0,{"name":[0,"callback"],"description":[0,"ऑडियो चलने के लिए तैयार होने पर कॉल होने वाला फंक्शन।
\n"],"type":[0,"फंक्शन"],"optional":[0,true]}]]],"itemtype":[0,"तरीका"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"नया p5.MediaElement ऑब्जेक्ट।"],"type":[0,"p5.MediaElement"]}],"example":[1,[[0,"\n\nfunction setup() {\n noCanvas();\n\n // Load the audio.\n let beat = createAudio('/assets/beat.mp3');\n\n // Show the default audio controls.\n beat.showControls();\n\n describe('An audio beat plays when the user double-clicks the square.');\n}\n
\nएक तत्व बनाता है।
पहला पैरामीटर, label
, एक स्ट्रिंग है जो बटन पर प्रदर्शित लेबल सेट करता है।
दूसरा पैरामीटर, value
, वैकल्पिक है। यह एक स्ट्रिंग है जो बटन का मान निर्धारित करती है। अधिक जानकारी के लिए देखें एमडीएन।
बटन पर प्रदर्शित लेबल।
\n"],"type":[0,"स्ट्रिंग"]}],[0,{"name":[0,"value"],"description":[0,"बटन का मान |
\n"],"type":[0,"स्ट्रिंग"],"optional":[0,true]}]]],"itemtype":[0,"तरीका"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"नया p5.Element ऑब्जेक्ट।"],"type":[0,"p5.Element"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a button and place it beneath the canvas.\n let button = createButton('click me');\n button.position(0, 100);\n\n // Call repaint() when the button is pressed.\n button.mousePressed(repaint);\n\n describe('A gray square with a button that says \"click me\" beneath it. The square changes color when the button is clicked.');\n}\n\n// Change the background color.\nfunction repaint() {\n let g = random(255);\n background(g);\n}\n
\n\nlet button;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a button and set its value to 0.\n // Place the button beneath the canvas.\n button = createButton('click me', 'red');\n button.position(0, 100);\n\n // Call randomColor() when the button is pressed.\n button.mousePressed(randomColor);\n\n describe('A red square with a button that says \"click me\" beneath it. The square changes color when the button is clicked.');\n}\n\nfunction draw() {\n // Use the button's value to set the background color.\n let c = button.value();\n background(c);\n}\n\n// Set the button's value to a random color.\nfunction randomColor() {\n let c = random(['red', 'green', 'blue', 'yellow']);\n button.value(c);\n}\n
\nएक तत्व बनाता है जो वेबकैम और माइक्रोफ़ोन से ऑडियो/वीडियो स्ट्रीम \"कैप्चर\" करता है |
createCapture()
एक नया p5.MediaElement ऑब्जेक्ट देता है। वीडियो डिफ़ॉल्ट रूप से दिखाए जाते हैं। उन्हें capture.hide()
कॉल करके छिपाया जा सकता है और image() का उपयोग करके कैनवास पर उकेरा जा सकता है |
पहला पैरामीटर, type
, वैकल्पिक है। यह कैप्चर का प्रकार निर्धारित करता है | डिफ़ॉल्ट रूप से, createCapture()
ऑडियो और वीडियो दोनों को कैप्चर करता है। यदि VIDEO
पास करते है, जैसे createCapture(VIDEO)
में, केवल वीडियो कैप्चर होगा। यदि AUDIO
पास करते है, जैसे कि createCapture(AUDIO)
, में, केवल ऑडियो कैप्चर होगा। स्ट्रीम को अनुकूलित करने के लिए एक बाधा वस्तु को भी पारित किया जा सकता है।संभावित संपत्तियों के लिए W3C दस्तावेज़ देखें। अलग-अलग ब्राउज़र अलग-अलग गुणों का समर्थन करते हैं |
\"flipped\" प्रॉपर्टी एक वैकल्पिक प्रॉपर्टी है जिसे {flipped:true}
सेट किया जा सकता है वीडियो आउटपुट को मिरर करने के लिए। अगर यह सत्य है तो इसका मतलब है कि वीडियो फ़्लिप कारा हुआ होगा और यदि कुछ भी उल्लेख नहीं किया गया है तो डिफ़ॉल्ट रूप से यह false
होगा |
दूसरा पैरामीटर, callback
, वैकल्पिक है। यह फ़ंक्शन तब कॉल किया जाता है जब कैप्चर उपयोग के लिए तैयार हो | कॉलबैक फ़ंक्शन में एक पैरामीटर, stream
, होना चाहिए, जो एक MediaStream ऑब्जेक्ट है।
ध्यान दें: createCapture()
केवल स्थानीय स्तर पर स्केच चलाने पर या HTTPS
का उपयोग करने पर काम करता है | और अधिक जानकारी के लिए यहाँ और यहाँ जाए |
कैप्चर का प्रकार, ऑडियो या वीडियो, या एक बाधा वस्तु। डिफ़ॉल्ट रूप से वीडियो और ऑडियो दोनों स्ट्रीम कैप्चर की जाती हैं।
\n"],"type":[0,"स्ट्रिंग | कांस्टेंट | ऑब्जेक्ट"],"optional":[0,true]}],[0,{"name":[0,"flipped"],"description":[0,"{flipped:true}
द्वारा कैप्चरिंग वीडियो को पलटें और आउटपुट को मिरर करें।डिफ़ॉल्ट रूप से यह असत्य है |
स्ट्रीम लोड होने पर कॉल होने वाला फंक्शन।
\n"],"type":[0,"फंक्शन"],"optional":[0,true]}]]],"itemtype":[0,"तरीका"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"नया p5.MediaElement ऑब्जेक्ट।"],"type":[0,"p5.MediaElement"]}],"example":[1,[[0,"\n\nfunction setup() {\n noCanvas();\n\n // Create the video capture.\n createCapture(VIDEO);\n\n describe('A video stream from the webcam.');\n}\n
\n\nlet capture;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create the video capture and hide the element.\n capture = createCapture(VIDEO);\n capture.hide();\n\n describe('A video stream from the webcam with inverted colors.');\n}\n\nfunction draw() {\n // Draw the video capture within the canvas.\n image(capture, 0, 0, width, width * capture.height / capture.width);\n\n // Invert the colors in the stream.\n filter(INVERT);\n}\n
\n\nlet capture;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create the video capture with mirrored output.\n capture = createCapture(VIDEO,{ flipped:true });\n capture.size(100,100);\n\n describe('A video stream from the webcam with flipped or mirrored output.');\n}\n\n
\n\nfunction setup() {\n createCanvas(480, 120);\n\n // Create a constraints object.\n let constraints = {\n video: {\n mandatory: {\n minWidth: 1280,\n minHeight: 720\n },\n optional: [{ maxFrameRate: 10 }]\n },\n audio: false\n };\n\n // Create the video capture.\n createCapture(constraints);\n\n describe('A video stream from the webcam.');\n}\n
\nएक चेकबॉक्स तत्व बनाता है।
चेकबॉक्स p5.Element क्लास को checked()
विधि से विस्तारित करते हैं। यदि बॉक्स चेक किया गया है तो myBox.checked()
को कॉल करने पर true
मिलता है और यदि नहीं तो false
मिलता है।
पहला पैरामीटर, label
, वैकल्पिक है। यह एक स्ट्रिंग है जो लेबल को चेकबॉक्स के बगल में प्रदर्शित करने के लिए सेट करती है।
दूसरा पैरामीटर, value
, भी वैकल्पिक है। यह एक बूलियन है जो चेकबॉक्स का मान सेट करता है।
चेकबॉक्स के बाद प्रदर्शित लेबल।
\n"],"type":[0,"स्ट्रिंग"],"optional":[0,true]}],[0,{"name":[0,"value"],"description":[0,"चेकबॉक्स का मान | चेक किया गया true
है और अनचेक किया गया false
है |
\nlet checkbox;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a checkbox and place it beneath the canvas.\n checkbox = createCheckbox();\n checkbox.position(0, 100);\n\n describe('A black square with a checkbox beneath it. The square turns white when the box is checked.');\n}\n\nfunction draw() {\n // Use the checkbox to set the background color.\n if (checkbox.checked()) {\n background(255);\n } else {\n background(0);\n }\n}\n
\n\nlet checkbox;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a checkbox and place it beneath the canvas.\n // Label the checkbox \"white\".\n checkbox = createCheckbox(' white');\n checkbox.position(0, 100);\n\n describe('A black square with a checkbox labeled \"white\" beneath it. The square turns white when the box is checked.');\n}\n\nfunction draw() {\n // Use the checkbox to set the background color.\n if (checkbox.checked()) {\n background(255);\n } else {\n background(0);\n }\n}\n
\n\nlet checkbox;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a checkbox and place it beneath the canvas.\n // Label the checkbox \"white\" and set its value to true.\n checkbox = createCheckbox(' white', true);\n checkbox.position(0, 100);\n\n describe('A white square with a checkbox labeled \"white\" beneath it. The square turns black when the box is unchecked.');\n}\n\nfunction draw() {\n // Use the checkbox to set the background color.\n if (checkbox.checked()) {\n background(255);\n } else {\n background(0);\n }\n}\n
\nरंग चयनकर्ता तत्व बनाता है।
\nपैरामीटर, value
, वैकल्पिक है। यदि कोई रंग स्ट्रिंग या p5.Color ऑब्जेक्ट पास किया जाता है, तो यह डिफ़ॉल्ट रंग सेट कर देगा।
रंग चयनकर्ता रंगों को प्रबंधित करने के लिए कुछ उपयोगी तरीकों के साथ p5.Element वर्ग का विस्तार करते हैं:
\nmyPicker.value()
'#rrggbb'
प्रारूप में हेक्स स्ट्रिंग के रूप में वर्तमान रंग लौटाता है।myPicker.color()
वर्तमान रंग को p5.Color ऑब्जेक्ट के रूप में लौटाता है।डिफ़ॉल्ट रंग सीएसएस रंग स्ट्रिंग के रूप में |
\n"],"type":[0,"स्ट्रिंग | p5.Color"],"optional":[0,true]}]]],"itemtype":[0,"तरीका"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"नया p5.Element ऑब्जेक्ट।"],"type":[0,"p5.Element"]}],"example":[1,[[0,"\n\nlet myPicker;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a color picker and set its position.\n myPicker = createColorPicker('deeppink');\n myPicker.position(0, 100);\n\n describe('A pink square with a color picker beneath it. The square changes color when the user picks a new color.');\n}\n\nfunction draw() {\n // Use the color picker to paint the background.\n let c = myPicker.color();\n background(c);\n}\n
\n\nlet myPicker;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a color picker and set its position.\n myPicker = createColorPicker('deeppink');\n myPicker.position(0, 100);\n\n describe('A number with the format \"#rrggbb\" is displayed on a pink canvas. The background color and number change when the user picks a new color.');\n}\n\nfunction draw() {\n // Use the color picker to paint the background.\n let c = myPicker.value();\n background(c);\n\n // Display the current color as a hex string.\n text(c, 25, 55);\n}\n
\nएक तत्व बनाता है।
तत्वों का उपयोग आमतौर पर उन कंटेनरों के रूप में किया जाता है जिनमें अन्य तत्व होते हैं।
पैरामीटर html
वैकल्पिक है। यह एक स्ट्रिंग को स्वीकार करता है जो नए के आंतरिक एचटीएमएल को सेट करता है।
नए <div></div>
तत्त्व के लिए आंतरिक HTML |
\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a div element and set its position.\n let div = createDiv('p5*js');\n div.position(25, 35);\n\n describe('A gray square with the text \"p5*js\" written in its center.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an h3 element within the div.\n let div = createDiv('p5*js
');\n div.position(20, 5);\n\n describe('A gray square with the text \"p5*js\" written in its center.');\n}\n
\nएक नया p5.Element ऑब्जेक्ट बनाता है।
\nपहला पैरामीटर, tag
स्ट्रिंग एक एचटीएमएल टैग है, जैसे 'h5'
|
दूसरा पैरामीटर, content
, वैकल्पिक है। यह एक स्ट्रिंग है जो एचटीएमएल कोड को नए तत्व में डालने के लिए सेट करती है। नए तत्वों में डिफ़ॉल्ट रूप से कोई कोड नहीं होता है।
नए तत्व के लिए टैग।
\n"],"type":[0,"स्ट्रिंग"]}],[0,{"name":[0,"content"],"description":[0,"तत्व में डालने के लिए एचटीएमएल कोड।
\n"],"type":[0,"स्ट्रिंग"],"optional":[0,true]}]]],"itemtype":[0,"तरीका"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"नया p5.Element ऑब्जेक्ट।"],"type":[0,"p5.Element"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an h5 element with nothing in it.\n createElement('h5');\n\n describe('A gray square.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an h5 element with the content \"p5*js\".\n let h5 = createElement('h5', 'p5*js');\n\n // Set the element's style and position.\n h5.style('color', 'deeppink');\n h5.position(30, 15);\n\n describe('The text \"p5*js\" written in pink in the middle of a gray square.');\n}\n
\nएक 'फ़ाइल'
प्रकार का तत्व बनाता है |
createFileInput()
उपयोगकर्ताओं को स्केच में उपयोग के लिए स्थानीय फ़ाइलों का चयन करने की अनुमति देता है। यह एक p5.File ऑब्जेक्ट लौटाता है।
पहला पैरामीटर, callback
, एक फ़ंक्शन है जिसे फ़ाइल लोड होने पर कॉल किया जाता है। callback फ़ंक्शन में एक पैरामीटर होना चाहिए, file
, जो एक p5.File ऑब्जेक्ट है।
दूसरा पैरामीटर, multiple
, वैकल्पिक है। यह एक बूलियन मान है जो true
पर सेट होने पर एकाधिक फ़ाइलें लोड करने की अनुमति देता है। यदि true
है, तो callback
को प्रति फ़ाइल एक बार कॉल किया जाएगा।
फ़ाइल लोड होने पर कॉल कॉल होने वाला फंक्शन।
\n"],"type":[0,"फंक्शन"]}],[0,{"name":[0,"multiple"],"description":[0,"एकाधिक फ़ाइलों को चुनने की अनुमति |
\n"],"type":[0,"बूलियन"],"optional":[0,true]}]]],"itemtype":[0,"तरीका"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"नया p5.File ऑब्जेक्ट।"],"type":[0,"p5.File"]}],"example":[1,[[0,"\n\n// Use the file input to select an image to\n// load and display.\nlet input;\nlet img;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a file input and place it beneath\n // the canvas.\n input = createFileInput(handleImage);\n input.position(0, 100);\n\n describe('A gray square with a file input beneath it. If the user selects an image file to load, it is displayed on the square.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the image if loaded.\n if (img) {\n image(img, 0, 0, width, height);\n }\n}\n\n// Create an image if the file is an image.\nfunction handleImage(file) {\n if (file.type === 'image') {\n img = createImg(file.data, '');\n img.hide();\n } else {\n img = null;\n }\n}\n
\n\n// Use the file input to select multiple images\n// to load and display.\nlet input;\nlet images = [];\n\nfunction setup() {\n // Create a file input and place it beneath\n // the canvas. Allow it to load multiple files.\n input = createFileInput(handleImage, true);\n input.position(0, 100);\n}\n\nfunction draw() {\n background(200);\n\n // Draw the images if loaded. Each image\n // is drawn 20 pixels lower than the\n // previous image.\n for (let i = 0; i < images.length; i += 1) {\n // Calculate the y-coordinate.\n let y = i * 20;\n\n // Draw the image.\n image(img, 0, y, 100, 100);\n }\n\n describe('A gray square with a file input beneath it. If the user selects multiple image files to load, they are displayed on the square.');\n}\n\n// Create an image if the file is an image,\n// then add it to the images array.\nfunction handleImage(file) {\n if (file.type === 'image') {\n let img = createImg(file.data, '');\n img.hide();\n images.push(img);\n }\n}\n
\nएक
तत्व बनाता है जो कैनवास के बाहर दिखाई दे सकता है।
पहला पैरामीटर, src
, छवि फ़ाइल के पथ की स्ट्रिंग है। src
एक सापेक्ष पथ होना चाहिए, जैसे कि '/assets/image.png'
, या एक यूआरएल, जैसा कि 'https://example.com/image.png'
में है।
दूसरा पैरामीटर, alt
, alt एक स्ट्रिंग है जो छवि लोड होने में विफल होने पर प्रदर्शित होती है। एक खाली स्ट्रिंग ''
का उपयोग उन छवियों के लिए किया जा सकता है जो प्रदर्शित नहीं होती हैं।
तीसरा पैरामीटर, crossOrigin
, वैकल्पिक है। यह एक स्ट्रिंग है जो छवि की crossOrigin प्रॉपर्टी सेट करती है। 'anonymous'
या 'use-credentials'
का उपयोग करें क्रॉस-ऑरिजिन एक्सेस के साथ छवि लाने के लिए।
चौथा पैरामीटर, callback
, भी वैकल्पिक है। यह छवि लोड होने के बाद कॉल करने के लिए एक फ़ंक्शन सेट करता है। नई छवि कॉलबैक फ़ंक्शन को p5.Element ऑब्जेक्ट के रूप में पास की जाती है।
छवि के लिए सापेक्ष पथ या शृंखला।
\n"],"type":[0,"स्ट्रिंग"]}],[0,{"name":[0,"alt"],"description":[0,"छवि के लिए वैकल्पिक पाठ।
\n"],"type":[0,"स्ट्रिंग"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"src"],"description":[0,""],"type":[0,"स्ट्रिंग"]}],[0,{"name":[0,"alt"],"description":[0,""],"type":[0,"स्ट्रिंग"]}],[0,{"name":[0,"crossOrigin"],"description":[0,"छवि लाते समय उपयोग करने के लिए क्रॉसऑरिजिन प्रॉपर्टी।
\n"],"type":[0,"स्ट्रिंग"],"optional":[0,true]}],[0,{"name":[0,"successCallback"],"description":[0,"छवि लोड होने के बाद कॉल करने के लिए फंक्शन। नई छवि फ़ंक्शन को p5.Element ऑब्जेक्ट के रूप में पारित की जाएगी।
\n"],"type":[0,"फंक्शन"],"optional":[0,true]}]]]}]]],"itemtype":[0,"तरीका"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"नया p5.Element ऑब्जेक्ट।"],"type":[0,"p5.Element"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n let img = createImg(\n 'https://p5js.org/assets/img/asterisk-01.png',\n 'The p5.js magenta asterisk.'\n );\n img.position(0, -10);\n\n describe('A gray square with a magenta asterisk in its center.');\n}\n
\nएक टेक्स्ट तत्व बनाता है।
टेक्स्ट बॉक्स की लंबाई निर्धारित करने के लिए myInput.size()
पर कॉल करें।
पहला पैरामीटर, value
, वैकल्पिक है। यह एक स्ट्रिंग है जो इनपुट का डिफ़ॉल्ट मान सेट करती है। डिफ़ॉल्ट रूप से इनपुट रिक्त है |
दूसरा पैरामीटर, type
, भी वैकल्पिक है। यह एक स्ट्रिंग है जो इनपुट किए जाने वाले टेक्स्ट के प्रकार को निर्दिष्ट करती है। संपूर्ण विकल्पों की सूची के लिए एमडीएन देखें। डिफ़ॉल्ट 'text'
है।
इनपुट बॉक्स का डिफ़ॉल्ट मान। डिफ़ॉल्ट रूप से एक खाली स्ट्रिंग ''
।
इनपुट का प्रकार। डिफ़ॉल्ट रूप से 'text'
|
\nlet myInput;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create an input element and place it\n // beneath the canvas.\n myInput = createInput();\n myInput.position(0, 100);\n\n describe('A gray square with a text box beneath it. The text in the square changes when the user types something new in the input bar.');\n}\n\nfunction draw() {\n background(200);\n\n // Use the input to display a message.\n let msg = myInput.value();\n text(msg, 25, 55);\n}\n
\n\nlet myInput;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create an input element and place it\n // beneath the canvas. Set its default\n // text to \"hello!\".\n myInput = createInput('hello!');\n myInput.position(0, 100);\n\n describe('The text \"hello!\" written at the center of a gray square. A text box beneath the square also says \"hello!\". The text in the square changes when the user types something new in the input bar.');\n}\n\nfunction draw() {\n background(200);\n\n // Use the input to display a message.\n let msg = myInput.value();\n text(msg, 25, 55);\n}\n
\nएक तत्व बनाता है।
तत्व आमतौर पर पैराग्राफ-लंबाई वाले टेक्स्ट के लिए उपयोग किए जाते हैं।
पैरामीटर html
वैकल्पिक है। यह एक स्ट्रिंग को स्वीकार करता है जो नए के आंतरिक एचटीएमएल को सेट करता है।
नए <p></p>
तत्व के लिए आंतरिक HTML।
\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and set its position.\n let p = createP('Tell me a story.');\n p.position(5, 0);\n\n describe('A gray square displaying the text \"Tell me a story.\" written in black.');\n}\n
\nएक रेडियो बटन तत्व बनाता है।
\nपैरामीटर वैकल्पिक है| यदि एक स्ट्रिंग पास की जाती है, जैसे let myRadio = createSelect('food')
, तो प्रत्येक रेडियो विकल्प के name
पैरामीटरके रूप में \"food\"
होगा: | यदि कोई मौजूदा
या
तत्व पारित किया गया है, जैसे कि
let myRadio = createSelect(container) code>, यह रेडियो बटन का मूल तत्व बन जाएगा।
रेडियो बटन विकल्पों को प्रबंधित करने के लिए कुछ उपयोगी तरीकों के साथ p5.Element वर्ग का विस्तार करते हैं:
\nmyRadio.option(value, [label])
मेनू में एक विकल्प जोड़ता है। पहला पैरामीटर, value
, एक स्ट्रिंग है जो विकल्प का मान और लेबल सेट करता है। दूसरा पैरामीटर, label
, वैकल्पिक है। यदि प्रदान किया गया है, तो यह value
के लिए प्रदर्शित लेबल सेट करता है। यदि value
वाला कोई विकल्प पहले से मौजूद है, तो उसका लेबल बदल दिया जाता है और उसका मान लौटा दिया जाता है।myRadio.value()
वर्तमान में चयनित विकल्प का मान लौटाता है।myRadio.selected()
वर्तमान में चयनित विकल्प लौटाता है।myRadio.selected(value)
दिए गए विकल्प का चयन करता है और इसे HTMLInputElement
के रूप में लौटाता है|myRadio.disable(shouldDisable)
यदि true
पास हो जाता है तो संपूर्ण रेडियो बटन को सक्षम कर देता है और यदि false
पास हो जाता है तो इसे अक्षम कर देता है।कंटेनर HTML तत्व, या तो या
|
प्रत्येक विकल्प के तत्व के लिए नाम पैरामीटर।
\nlet myRadio;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a radio button element and place it\n // in the top-left corner.\n myRadio = createRadio();\n myRadio.position(0, 0);\n myRadio.size(60);\n\n // Add a few color options.\n myRadio.option('red');\n myRadio.option('yellow');\n myRadio.option('blue');\n\n // Choose a default option.\n myRadio.selected('yellow');\n\n describe('A yellow square with three color options listed, \"red\", \"yellow\", and \"blue\". The square changes color when the user selects a new option.');\n}\n\nfunction draw() {\n // Set the background color using the radio button.\n let g = myRadio.value();\n background(g);\n}\n
\n\nlet myRadio;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a radio button element and place it\n // in the top-left corner.\n myRadio = createRadio();\n myRadio.position(0, 0);\n myRadio.size(50);\n\n // Add a few color options.\n // Color values are labeled with\n // emotions they evoke.\n myRadio.option('red', 'love');\n myRadio.option('yellow', 'joy');\n myRadio.option('blue', 'trust');\n\n // Choose a default option.\n myRadio.selected('yellow');\n\n describe('A yellow square with three options listed, \"love\", \"joy\", and \"trust\". The square changes color when the user selects a new option.');\n}\n\nfunction draw() {\n // Set the background color using the radio button.\n let c = myRadio.value();\n background(c);\n}\n
\n\nlet myRadio;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a radio button element and place it\n // in the top-left corner.\n myRadio = createRadio();\n myRadio.position(0, 0);\n myRadio.size(50);\n\n // Add a few color options.\n myRadio.option('red');\n myRadio.option('yellow');\n myRadio.option('blue');\n\n // Choose a default option.\n myRadio.selected('yellow');\n\n // Create a button and place it beneath the canvas.\n let btn = createButton('disable');\n btn.position(0, 100);\n\n // Call disableRadio() when btn is pressed.\n btn.mousePressed(disableRadio);\n\n describe('A yellow square with three options listed, \"red\", \"yellow\", and \"blue\". The square changes color when the user selects a new option. A \"disable\" button beneath the canvas disables the color options when pressed.');\n}\n\nfunction draw() {\n // Set the background color using the radio button.\n let c = myRadio.value();\n background(c);\n}\n\n// Disable myRadio.\nfunction disableRadio() {\n myRadio.disable(true);\n}\n
\nएक ड्रॉपडाउन मेनू तत्व बनाता है।
पैरामीटर वैकल्पिक है. यदि true
पास हो जाता है, जैसे कि let mySelect = createSelect(true)
, तो ड्रॉपडाउन कई चयनों का समर्थन करेगा। यदि कोई मौजूदा तत्व पारित किया गया है, जैसा कि
let mySelect = createSelect(otherSelect)
में है, तो मौजूदा तत्व को एक नए p5.Element ऑब्जेक्ट में लपेटा जाएगा।
ड्रॉपडाउन विकल्पों को प्रबंधित करने के लिए कुछ उपयोगी तरीकों के साथ p5.Element क्लास का विस्तार करते हैं:
\nmySelect.option(name, [value])
मेनू में एक विकल्प जोड़ता है। पहला पैरामीटर, name
, एक स्ट्रिंग है जो विकल्प का नाम और मान सेट करता है। दूसरा पैरामीटर, value
, वैकल्पिक है। यदि प्रदान किया गया है, तो यह कुंजी name
से संबंधित मान सेट करता है। अगर name
वाला एक विकल्प पहले से मौजूद है, इसका मान value
में बदल दिया गया है।mySelect.value()
वर्तमान में चयनित विकल्प का मान लौटाता है।mySelect.selected()
वर्तमान में चयनित विकल्प लौटाता है।mySelect.selected(option)
डिफ़ॉल्ट रूप से दिए गए विकल्प का चयन करता है।mySelect.disable()
संपूर्ण ड्रॉपडाउन तत्व को अक्षम के रूप में चिह्नित करता है।mySelect.disable(option)
किसी दिए गए विकल्प को अक्षम के रूप में चिह्नित करता है।mySelect.enable()
संपूर्ण ड्रॉपडाउन तत्व को सक्षम के रूप में चिह्नित करता है।mySelect.enable(option)
किसी दिए गए विकल्प को सक्षम के रूप में चिह्नित करता है।एकाधिक चयन का समर्थन।
\n"],"type":[0,"बूलियन"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"existing"],"description":[0,"घेरने के लिए तत्व का चयन करें, या तो p5.Element के रूप में या एक HTMLSelectElement के रूप में |
\n"],"type":[0,"ऑब्जेक्ट"]}]]]}]]],"itemtype":[0,"तरीका"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"नया p5.Element ऑब्जेक्ट।"],"type":[0,"p5.Element"]}],"example":[1,[[0,"\n\nlet mySelect;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a dropdown and place it beneath the canvas.\n mySelect = createSelect();\n mySelect.position(0, 100);\n\n // Add color options.\n mySelect.option('red');\n mySelect.option('green');\n mySelect.option('blue');\n mySelect.option('yellow');\n\n // Set the selected option to \"red\".\n mySelect.selected('red');\n\n describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');\n}\n\nfunction draw() {\n // Use the selected value to paint the background.\n let c = mySelect.selected();\n background(c);\n}\n
\n\nlet mySelect;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a dropdown and place it beneath the canvas.\n mySelect = createSelect();\n mySelect.position(0, 100);\n\n // Add color options.\n mySelect.option('red');\n mySelect.option('green');\n mySelect.option('blue');\n mySelect.option('yellow');\n\n // Set the selected option to \"red\".\n mySelect.selected('red');\n\n // Disable the \"yellow\" option.\n mySelect.disable('yellow');\n\n describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');\n}\n\nfunction draw() {\n // Use the selected value to paint the background.\n let c = mySelect.selected();\n background(c);\n}\n
\n\nlet mySelect;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a dropdown and place it beneath the canvas.\n mySelect = createSelect();\n mySelect.position(0, 100);\n\n // Add color options with names and values.\n mySelect.option('one', 'red');\n mySelect.option('two', 'green');\n mySelect.option('three', 'blue');\n mySelect.option('four', 'yellow');\n\n // Set the selected option to \"one\".\n mySelect.selected('one');\n\n describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');\n}\n\nfunction draw() {\n // Use the selected value to paint the background.\n let c = mySelect.selected();\n background(c);\n}\n
\n\n// Hold CTRL to select multiple options on Windows and Linux.\n// Hold CMD to select multiple options on macOS.\nlet mySelect;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a dropdown and allow multiple selections.\n // Place it beneath the canvas.\n mySelect = createSelect(true);\n mySelect.position(0, 100);\n\n // Add color options.\n mySelect.option('red');\n mySelect.option('green');\n mySelect.option('blue');\n mySelect.option('yellow');\n\n describe('A gray square with a dropdown menu beneath it. Colorful circles appear when their color is selected.');\n}\n\nfunction draw() {\n background(200);\n\n // Use the selected value(s) to draw circles.\n let colors = mySelect.selected();\n for (let i = 0; i < colors.length; i += 1) {\n // Calculate the x-coordinate.\n let x = 10 + i * 20;\n\n // Access the color.\n let c = colors[i];\n\n // Draw the circle.\n fill(c);\n circle(x, 50, 20);\n }\n}\n
\nएक स्लाइडर तत्व बनाता है।
रेंज स्लाइडर किसी दी गई रेंज से संख्याओं को तुरंत चुनने के लिए उपयोगी होते हैं।
\nपहले दो पैरामीटर, min
और max
, वे संख्याएँ हैं जो स्लाइडर का न्यूनतम और अधिकतम सेट करते हैं।
तीसरा पैरामीटर, value
, वैकल्पिक है। यह एक संख्या है जो स्लाइडर का डिफ़ॉल्ट मान सेट करती है।
चौथा पैरामीटर, step
, भी वैकल्पिक है। यह एक संख्या है जो स्लाइडर की सीमा में प्रत्येक मान के बीच अंतर निर्धारित करती है। step
को 0 पर सेट करने से स्लाइडर min
से max
तक आसानी से जा सकता है।
स्लाइडर का न्यूनतम मान।
\n"],"type":[0,"संख्या"]}],[0,{"name":[0,"max"],"description":[0,"स्लाइडर का अधिकतम मान।
\n"],"type":[0,"संख्या"]}],[0,{"name":[0,"value"],"description":[0,"स्लाइडर का डिफ़ॉल्ट मान।
\n"],"type":[0,"संख्या"],"optional":[0,true]}],[0,{"name":[0,"step"],"description":[0,"स्लाइडर की सीमा में प्रत्येक चरण के लिए आकार।
\n"],"type":[0,"संख्या"],"optional":[0,true]}]]],"itemtype":[0,"तरीका"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"नया p5.Element ऑब्जेक्ट।"],"type":[0,"p5.Element"]}],"example":[1,[[0,"\n\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a slider and place it at the top of the canvas.\n slider = createSlider(0, 255);\n slider.position(10, 10);\n slider.size(80);\n\n describe('A dark gray square with a range slider at the top. The square changes color when the slider is moved.');\n}\n\nfunction draw() {\n // Use the slider as a grayscale value.\n let g = slider.value();\n background(g);\n}\n
\n\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a slider and place it at the top of the canvas.\n // Set its default value to 0.\n slider = createSlider(0, 255, 0);\n slider.position(10, 10);\n slider.size(80);\n\n describe('A black square with a range slider at the top. The square changes color when the slider is moved.');\n}\n\nfunction draw() {\n // Use the slider as a grayscale value.\n let g = slider.value();\n background(g);\n}\n
\n\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a slider and place it at the top of the canvas.\n // Set its default value to 0.\n // Set its step size to 50.\n slider = createSlider(0, 255, 0, 50);\n slider.position(10, 10);\n slider.size(80);\n\n describe('A black square with a range slider at the top. The square changes color when the slider is moved.');\n}\n\nfunction draw() {\n // Use the slider as a grayscale value.\n let g = slider.value();\n background(g);\n}\n
\n\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a slider and place it at the top of the canvas.\n // Set its default value to 0.\n // Set its step size to 0 so that it moves smoothly.\n slider = createSlider(0, 255, 0, 0);\n slider.position(10, 10);\n slider.size(80);\n\n describe('A black square with a range slider at the top. The square changes color when the slider is moved.');\n}\n\nfunction draw() {\n // Use the slider as a grayscale value.\n let g = slider.value();\n background(g);\n}\n
\nएक तत्व बनाता है।
तत्व आमतौर पर इनलाइन तत्वों के लिए कंटेनर के रूप में उपयोग किए जाते हैं। उदाहरण के लिए, एक
एक वाक्य का वह हिस्सा रख सकता है जो एक अलग शैली है।
पैरामीटर html
वैकल्पिक है। यह एक स्ट्रिंग को स्वीकार करता है जो नए के आंतरिक एचटीएमएल को सेट करता है।
नए के लिए आंतरिक एचटीएमएल तत्त्व|
\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a span element and set its position.\n let span = createSpan('p5*js');\n span.position(25, 35);\n\n describe('A gray square with the text \"p5*js\" written in its center.');\n}\n
\n\nfunction setup() {\n background(200);\n\n // Create a div element as a container.\n let div = createDiv();\n\n // Place the div at the center.\n div.position(25, 35);\n\n // Create a span element.\n let s1 = createSpan('p5');\n\n // Create a second span element.\n let s2 = createSpan('*');\n\n // Set the second span's font color.\n s2.style('color', 'deeppink');\n\n // Create a third span element.\n let s3 = createSpan('js');\n\n // Add all the spans to the container div.\n s1.parent(div);\n s2.parent(div);\n s3.parent(div);\n\n describe('A gray square with the text \"p5*js\" written in black at its center. The asterisk is pink.');\n}\n
\nसरल ऑडियो/वीडियो प्लेबैक के लिए एक तत्व बनाता है।
createVideo()
एक नया p5.MediaElement ऑब्जेक्ट लौटाता है। वीडियो डिफ़ॉल्ट रूप से दिखाये जाते हैं| उन्हें video.hide()
पर कॉल करके छिपाया जा सकता है और image() का उपयोग करके कैनवास पर खींचा जा सकता है।
पहला पैरामीटर, src
, वीडियो का पथ है। यदि एक एकल स्ट्रिंग पारित की जाती है, जैसे '/assets/topsecret.mp4'
, तो एक एकल वीडियो लोड होता है। एक ही वीडियो को विभिन्न प्रारूपों में लोड करने के लिए स्ट्रिंग्स की एक श्रृंखला का उपयोग किया जा सकता है। उदाहरण के लिए, ['/assets/topsecret.mp4', '/assets/topsecret.ogv', '/assets/topsecret.webm']
। यह सुनिश्चित करने के लिए उपयोगी है कि वीडियो विभिन्न क्षमताओं के साथ विभिन्न ब्राउज़रों पर चल सके | समर्थित प्रारूपों के बारे में अधिक जानकारी के लिए एमडीएन देखें।
दूसरा पैरामीटर, callback
, वैकल्पिक है। वीडियो चलाने के लिए तैयार होने के बाद कॉल होने वाला एक फ़ंक्शन है।
किसी वीडियो फ़ाइल का पथ, या पथों की एक सारणी विभिन्न ब्राउज़रों का समर्थन करने के लिए।
\n"],"type":[0,"स्ट्रिंग | स्ट्रिंग[]"]}],[0,{"name":[0,"callback"],"description":[0,"वीडियो चलने के लिए तैयार होने पर कॉल होने वाला फंक्शन।
\n"],"type":[0,"फंक्शन"],"optional":[0,true]}]]],"itemtype":[0,"तरीका"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"नया p5.MediaElement ऑब्जेक्ट।"],"type":[0,"p5.MediaElement"]}],"example":[1,[[0,"\n\nfunction setup() {\n noCanvas();\n\n // Load a video and add it to the page.\n // Note: this may not work in some browsers.\n let video = createVideo('/assets/small.mp4');\n\n // Show the default video controls.\n video.showControls();\n\n describe('A video of a toy robot with playback controls beneath it.');\n}\n
\n\nfunction setup() {\n noCanvas();\n\n // Load a video and add it to the page.\n // Provide an array options for different file formats.\n let video = createVideo(\n ['/assets/small.mp4', '/assets/small.ogv', '/assets/small.webm']\n );\n\n // Show the default video controls.\n video.showControls();\n\n describe('A video of a toy robot with playback controls beneath it.');\n}\n
\n\nlet video;\n\nfunction setup() {\n noCanvas();\n\n // Load a video and add it to the page.\n // Provide an array options for different file formats.\n // Call mute() once the video loads.\n video = createVideo(\n ['/assets/small.mp4', '/assets/small.ogv', '/assets/small.webm'],\n muteVideo\n );\n\n // Show the default video controls.\n video.showControls();\n\n describe('A video of a toy robot with playback controls beneath it.');\n}\n\n// Mute the video once it loads.\nfunction muteVideo() {\n video.volume(0);\n}\n
\nजब तत्व इनपुट प्राप्त करता है तो फ़ंक्शन को कॉल करता है।
\nmyElement.input()
का उपयोग अक्सर टेक्स्ट इनपुट और स्लाइडर के साथ\n किया जाता है.\n\nmyElement.input(false)
फ़ंक्शन को अक्षम कर देता है।
जब इनपुट का पता चलता है तो कॉल करने का कार्य\n तत्व।\n false
फ़ंक्शन को अक्षम कर देता है।
\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a slider and place it beneath the canvas.\n slider = createSlider(0, 255, 200);\n slider.position(0, 100);\n\n // Call repaint() when the slider changes.\n slider.input(repaint);\n\n describe('A gray square with a range slider underneath it. The background changes shades of gray when the slider is moved.');\n}\n\n// Paint the background using slider's value.\nfunction repaint() {\n let g = slider.value();\n background(g);\n}\n
\n\nlet input;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an input and place it beneath the canvas.\n input = createInput('');\n input.position(0, 100);\n\n // Call repaint() when input is detected.\n input.input(repaint);\n\n describe('A gray square with a text input bar beneath it. Any text written in the input appears in the middle of the square.');\n}\n\n// Paint the background gray and display the input's value.\nfunction repaint() {\n background(200);\n let msg = input.value();\n text(msg, 5, 50);\n}\n
\nकिसी भी ईवेंट हैंडलर सहित, p5.js द्वारा बनाए गए सभी तत्वों को हटा देता है।
\nदो अपवाद हैं: createCanvas() द्वारा बनाए गए कैनवास तत्व और p5.Render ऑब्जेक्ट|
\n"],"line":[0,255],"itemtype":[0,"तरीका"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a paragraph element and place\n // it in the middle of the canvas.\n let p = createP('p5*js');\n p.position(25, 25);\n\n describe('A gray square with the text \"p5*js\" written in its center. The text disappears when the mouse is pressed.');\n}\n\n// Remove all elements when the mouse is pressed.\nfunction mousePressed() {\n removeElements();\n}\n
\n\nlet slider;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a paragraph element and place\n // it at the top of the canvas.\n let p = createP('p5*js');\n p.position(25, 25);\n\n // Create a slider element and place it\n // beneath the canvas.\n slider = createSlider(0, 255, 200);\n slider.position(0, 100);\n\n describe('A gray square with the text \"p5*js\" written in its center and a range slider beneath it. The square changes color when the slider is moved. The text and slider disappear when the square is double-clicked.');\n}\n\nfunction draw() {\n // Use the slider value to change the background color.\n let g = slider.value();\n background(g);\n}\n\n// Remove all elements when the mouse is double-clicked.\nfunction doubleClicked() {\n removeElements();\n}\n
\nपहले तत्व के लिए पृष्ठ खोजता है जो दिए गए CSS चयनकर्ता स्ट्रिंग से मेल खाता है|
\nचयनकर्ता स्ट्रिंग एक आईडी, वर्ग, टैग नाम या एक संयोजन हो सकता है। select()
एक p5.Element ऑब्जेक्ट लौटाता है यदि उसे कोई मेल मिलता है और null
यदि उसे कोई मेल नहीं मिलता है|
दूसरा पैरामीटर, container
, वैकल्पिक है। यह भीतर खोजने के लिए एक कंटेनर निर्दिष्ट करता है। container
सीएसएस चयनकर्ता स्ट्रिंग, एक p5.Element ऑब्जेक्ट, या एक HTMLElementऑब्जेक्ट हो सकता है।
खोजने के लिए तत्व की सीएसएस चयनकर्ता स्ट्रिंग।
\n"],"type":[0,"स्ट्रिंग"]}],[0,{"name":[0,"container"],"description":[0,"सीएसएस चयनकर्ता स्ट्रिंग, p5.Element, या HTML तत्व भीतर खोजने के लिए।
\n"],"type":[0,"स्ट्रिंग | p5.Element | HTML तत्व"],"optional":[0,true]}]]],"itemtype":[0,"तरीका"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"p5.Element जिस में वो तत्व शामिल है।"],"type":[0,"p5.Element|null"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n\n // Select the canvas by its tag.\n let cnv = select('canvas');\n cnv.style('border', '5px deeppink dashed');\n\n describe('A gray square with a dashed pink border.');\n}\n
\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n // Add a class attribute to the canvas.\n cnv.class('pinkborder');\n\n background(200);\n\n // Select the canvas by its class.\n cnv = select('.pinkborder');\n\n // Style its border.\n cnv.style('border', '5px deeppink dashed');\n\n describe('A gray square with a dashed pink border.');\n}\n
\n\nfunction setup() {\n let cnv = createCanvas(100, 100);\n\n // Set the canvas' ID.\n cnv.id('mycanvas');\n\n background(200);\n\n // Select the canvas by its ID.\n cnv = select('#mycanvas');\n\n // Style its border.\n cnv.style('border', '5px deeppink dashed');\n\n describe('A gray square with a dashed pink border.');\n}\n
\nपेज पर उन सभी तत्वों को खोजता है जो दिए गए CSS चयनकर्ता स्ट्रिंग से मेल खाते हैं|
\nचयनकर्ता स्ट्रिंग एक आईडी, वर्ग, टैग नाम या एक संयोजन हो सकता है। selectAll()
यदि कोई मिलान मिलता है तो p5.Element ऑब्जेक्ट की एक सरणी लौटाता है और यदि कोई नहीं मिलता है तो एक खाली सरणी देता है|
दूसरा पैरामीटर, container
, वैकल्पिक है। यह भीतर खोजने के लिए एक कंटेनर निर्दिष्ट करता है। container
सीएसएस चयनकर्ता स्ट्रिंग, एक p5.Element ऑब्जेक्ट, या एक HTMLElement ऑब्जेक्ट हो सकता है।
खोजने के लिए तत्व की सीएसएस चयनकर्ता स्ट्रिंग।
\n"],"type":[0,"स्ट्रिंग"]}],[0,{"name":[0,"container"],"description":[0,"सीएसएस चयनकर्ता स्ट्रिंग, p5.Element, या HTMLElement भीतर खोजने के लिए।
\n"],"type":[0,"स्ट्रिंग | p5.Element | HTML तत्व"],"optional":[0,true]}]]],"itemtype":[0,"तरीका"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"p5.Element की सरणी।"],"type":[0,"p5.Element[]"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create three buttons.\n createButton('1');\n createButton('2');\n createButton('3');\n\n // Select the buttons by their tag.\n let buttons = selectAll('button');\n\n // Position the buttons.\n for (let i = 0; i < 3; i += 1) {\n buttons[i].position(0, i * 30);\n }\n\n describe('Three buttons stacked vertically. The buttons are labeled, \"1\", \"2\", and \"3\".');\n}\n
\n\nfunction setup() {\n // Create three buttons and position them.\n let b1 = createButton('1');\n b1.position(0, 0);\n let b2 = createButton('2');\n b2.position(0, 30);\n let b3 = createButton('3');\n b3.position(0, 60);\n\n // Add a class attribute to each button.\n b1.class('btn');\n b2.class('btn btn-pink');\n b3.class('btn');\n\n // Select the buttons by their class.\n let buttons = selectAll('.btn');\n let pinkButtons = selectAll('.btn-pink');\n\n // Style the selected buttons.\n buttons.forEach(setFont);\n pinkButtons.forEach(setColor);\n\n describe('Three buttons stacked vertically. The buttons are labeled, \"1\", \"2\", and \"3\". Buttons \"1\" and \"3\" are gray. Button \"2\" is pink.');\n}\n\n// Set a button's font to Comic Sans MS.\nfunction setFont(btn) {\n btn.style('font-family', 'Comic Sans MS');\n}\n\n// Set a button's background and font color.\nfunction setColor(btn) {\n btn.style('background', 'deeppink');\n btn.style('color', 'white');\n}\n
\nAdds a value to the end of an array. Extends the length of\nthe array by one. Maps to Array.push().
\n"],"line":[0,10],"params":[1,[[0,{"name":[0,"array"],"description":[0,"Array to append
\n"],"type":[0,"Array"]}],[0,{"name":[0,"value"],"description":[0,"to be added to the Array
\n"],"type":[0,"Any"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"the array that was appended to"],"type":[0,"Array"]}],"example":[1,[[0,"\n\nfunction setup() {\n let myArray = ['Mango', 'Apple', 'Papaya'];\n print(myArray); // ['Mango', 'Apple', 'Papaya']\n\n append(myArray, 'Peach');\n print(myArray); // ['Mango', 'Apple', 'Papaya', 'Peach']\n}\n
Copies an array (or part of an array) to another array. The src array is\ncopied to the dst array, beginning at the position specified by\nsrcPosition and into the position specified by dstPosition. The number of\nelements to copy is determined by length. Note that copying values\noverwrites existing values in the destination array. To append values\ninstead of overwriting them, use concat().
\nThe simplified version with only two arguments, arrayCopy(src, dst),\ncopies an entire array to another of the same size. It is equivalent to\narrayCopy(src, 0, dst, 0, src.length).
\nUsing this function is far more efficient for copying array data than\niterating through a for() loop and copying each element individually.
\n"],"line":[0,35],"overloads":[1,[[0,{"params":[1,[[0,{"name":[0,"src"],"description":[0,"the source Array
\n"],"type":[0,"Array"]}],[0,{"name":[0,"srcPosition"],"description":[0,"starting position in the source Array
\n"],"type":[0,"Integer"]}],[0,{"name":[0,"dst"],"description":[0,"the destination Array
\n"],"type":[0,"Array"]}],[0,{"name":[0,"dstPosition"],"description":[0,"starting position in the destination Array
\n"],"type":[0,"Integer"]}],[0,{"name":[0,"length"],"description":[0,"number of Array elements to be copied
\n"],"type":[0,"Integer"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"src"],"description":[0,""],"type":[0,"Array"]}],[0,{"name":[0,"dst"],"description":[0,""],"type":[0,"Array"]}],[0,{"name":[0,"length"],"description":[0,""],"type":[0,"Integer"],"optional":[0,true]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\nlet src = ['A', 'B', 'C'];\nlet dst = [1, 2, 3];\nlet srcPosition = 1;\nlet dstPosition = 0;\nlet length = 2;\n\nprint(src); // ['A', 'B', 'C']\nprint(dst); // [ 1 , 2 , 3 ]\n\narrayCopy(src, srcPosition, dst, dstPosition, length);\nprint(dst); // ['B', 'C', 3]\n
Concatenates two arrays, maps to Array.concat(). Does not modify the\ninput arrays.
\n"],"line":[0,112],"params":[1,[[0,{"name":[0,"a"],"description":[0,"first Array to concatenate
\n"],"type":[0,"Array"]}],[0,{"name":[0,"b"],"description":[0,"second Array to concatenate
\n"],"type":[0,"Array"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"concatenated array"],"type":[0,"Array"]}],"example":[1,[[0,"\n\nfunction setup() {\n let arr1 = ['A', 'B', 'C'];\n let arr2 = [1, 2, 3];\n\n print(arr1); // ['A','B','C']\n print(arr2); // [1,2,3]\n\n let arr3 = concat(arr1, arr2);\n\n print(arr1); // ['A','B','C']\n print(arr2); // [1, 2, 3]\n print(arr3); // ['A','B','C', 1, 2, 3]\n}\n
Reverses the order of an array, maps to Array.reverse()
\n"],"line":[0,141],"params":[1,[[0,{"name":[0,"list"],"description":[0,"Array to reverse
\n"],"type":[0,"Array"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"the reversed list"],"type":[0,"Array"]}],"example":[1,[[0,"\n\nfunction setup() {\n let myArray = ['A', 'B', 'C'];\n print(myArray); // ['A','B','C']\n\n reverse(myArray);\n print(myArray); // ['C','B','A']\n}\n
Decreases an array by one element and returns the shortened array,\nmaps to Array.pop().
\n"],"line":[0,161],"params":[1,[[0,{"name":[0,"list"],"description":[0,"Array to shorten
\n"],"type":[0,"Array"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"shortened Array"],"type":[0,"Array"]}],"example":[1,[[0,"\n\nfunction setup() {\n let myArray = ['A', 'B', 'C'];\n print(myArray); // ['A', 'B', 'C']\n let newArray = shorten(myArray);\n print(myArray); // ['A','B','C']\n print(newArray); // ['A','B']\n}\n
Shuffles the elements of an array.
\nThe first parameter, array
, is the array to be shuffled. For example,\ncalling shuffle(myArray)
will shuffle the elements of myArray
. By\ndefault, the original array won’t be modified. Instead, a copy will be\ncreated, shuffled, and returned.
The second parameter, modify
, is optional. If true
is passed, as in\nshuffle(myArray, true)
, then the array will be shuffled in place without\nmaking a copy.
array to shuffle.
\n"],"type":[0,"Array"]}],[0,{"name":[0,"bool"],"description":[0,"if true
, shuffle the original array in place. Defaults to false
.
\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of colors.\n let colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];\n\n // Create a shuffled copy of the array.\n let shuffledColors = shuffle(colors);\n\n // Draw a row of circles using the original array.\n for (let i = 0; i < colors.length; i += 1) {\n // Calculate the x-coordinate.\n let x = (i + 1) * 12.5;\n\n // Style the circle.\n let c = colors[i];\n fill(c);\n\n // Draw the circle.\n circle(x, 33, 10);\n }\n\n // Draw a row of circles using the original array.\n for (let i = 0; i < shuffledColors.length; i += 1) {\n // Calculate the x-coordinate.\n let x = (i + 1) * 12.5;\n\n // Style the circle.\n let c = shuffledColors[i];\n fill(c);\n\n // Draw the circle.\n circle(x, 67, 10);\n }\n\n describe(\n 'Two rows of circles on a gray background. The top row follows the color sequence ROYGBIV. The bottom row has all the same colors but they are shuffled.'\n );\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of colors.\n let colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];\n\n // Shuffle the array.\n shuffle(colors, true);\n\n // Draw a row of circles using the original array.\n for (let i = 0; i < colors.length; i += 1) {\n // Calculate the x-coordinate.\n let x = (i + 1) * 12.5;\n\n // Style the circle.\n let c = colors[i];\n fill(c);\n\n // Draw the circle.\n circle(x, 50, 10);\n }\n\n describe(\n 'A row of colorful circles on a gray background. Their sequence changes each time the sketch runs.'\n );\n}\n
\nSorts an array of numbers from smallest to largest, or puts an array of\nwords in alphabetical order. The original array is not modified; a\nre-ordered array is returned. The count parameter states the number of\nelements to sort. For example, if there are 12 elements in an array and\ncount is set to 5, only the first 5 elements in the array will be sorted.
\n"],"line":[0,300],"params":[1,[[0,{"name":[0,"list"],"description":[0,"Array to sort
\n"],"type":[0,"Array"]}],[0,{"name":[0,"count"],"description":[0,"number of elements to sort, starting from 0
\n"],"type":[0,"Integer"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"the sorted list"],"type":[0,"Array"]}],"example":[1,[[0,"\n\nfunction setup() {\n let words = ['banana', 'apple', 'pear', 'lime'];\n print(words); // ['banana', 'apple', 'pear', 'lime']\n let count = 4; // length of array\n\n words = sort(words, count);\n print(words); // ['apple', 'banana', 'lime', 'pear']\n}\n
\nfunction setup() {\n let numbers = [2, 6, 1, 5, 14, 9, 8, 12];\n print(numbers); // [2, 6, 1, 5, 14, 9, 8, 12]\n let count = 5; // Less than the length of the array\n\n numbers = sort(numbers, count);\n print(numbers); // [1,2,5,6,14,9,8,12]\n}\n
Inserts a value or an array of values into an existing array. The first\nparameter specifies the initial array to be modified, and the second\nparameter defines the data to be inserted. The third parameter is an index\nvalue which specifies the array position from which to insert data.\n(Remember that array index numbering starts at zero, so the first position\nis 0, the second position is 1, and so on.)
\n"],"line":[0,346],"params":[1,[[0,{"name":[0,"list"],"description":[0,"Array to splice into
\n"],"type":[0,"Array"]}],[0,{"name":[0,"value"],"description":[0,"value to be spliced in
\n"],"type":[0,"Any"]}],[0,{"name":[0,"position"],"description":[0,"in the array from which to insert data
\n"],"type":[0,"Integer"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"the list"],"type":[0,"Array"]}],"example":[1,[[0,"\n\nfunction setup() {\n let myArray = [0, 1, 2, 3, 4];\n let insArray = ['A', 'B', 'C'];\n print(myArray); // [0, 1, 2, 3, 4]\n print(insArray); // ['A','B','C']\n\n splice(myArray, insArray, 3);\n print(myArray); // [0,1,2,'A','B','C',3,4]\n}\n
Extracts an array of elements from an existing array. The list parameter\ndefines the array from which the elements will be copied, and the start\nand count parameters specify which elements to extract. If no count is\ngiven, elements will be extracted from the start to the end of the array.\nWhen specifying the start, remember that the first array element is 0.\nThis function does not change the source array.
\n"],"line":[0,381],"params":[1,[[0,{"name":[0,"list"],"description":[0,"Array to extract from
\n"],"type":[0,"Array"]}],[0,{"name":[0,"start"],"description":[0,"position to begin
\n"],"type":[0,"Integer"]}],[0,{"name":[0,"count"],"description":[0,"number of values to extract
\n"],"type":[0,"Integer"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"Array of extracted elements"],"type":[0,"Array"]}],"example":[1,[[0,"\n\nfunction setup() {\n let myArray = [1, 2, 3, 4, 5];\n print(myArray); // [1, 2, 3, 4, 5]\n\n let sub1 = subset(myArray, 0, 3);\n let sub2 = subset(myArray, 2, 2);\n print(sub1); // [1,2,3]\n print(sub2); // [3,4]\n}\n
किसी संख्या या स्ट्रिंग को उसके बूलियन प्रतिनिधित्व में परिवर्तित करता है। किसी संख्या के लिए, कोई भी गैर-शून्य मान (सकारात्मक या नकारात्मक) सत्य का मूल्यांकन करता है, जबकि शून्य का मूल्यांकन गलत होता है। एक स्ट्रिंग के लिए, \"सही\" मान सत्य का मूल्यांकन करता है, जबकि कोई अन्य मान गलत का मूल्यांकन करता है। जब संख्या या स्ट्रिंग मानों की एक सरणी पास की जाती है, तो समान लंबाई के बूलियन की एक सरणी वापस आ जाती है।
\n"],"line":[0,112],"params":[1,[[0,{"name":[0,"n"],"description":[0,"पार्स करने के लिए मान
\n"],"type":[0,"स्ट्रिंग|बूलियन|संख्या|सरणी"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"मूल्य का बूलियन प्रतिनिधित्व"],"type":[0,"बूलियन"]}],"example":[1,[[0,"\n\nprint(boolean(0)); // false\nprint(boolean(1)); // true\nprint(boolean('true')); // true\nprint(boolean('abcd')); // false\nprint(boolean([0, 12, 'true'])); // [false, true, true]\n
Converts a Boolean
, String
, or Number
to its byte value.
byte()
converts a value to an integer (whole number) between -128 and\n127. Values greater than 127 wrap around while negative values are\nunchanged. For example, 128 becomes -128 and -129 remains the same.
The parameter, n
, is the value to convert. If n
is a Boolean, as in\nbyte(false)
or byte(true)
, the number 0 (false
) or 1 (true
) will be\nreturned. If n
is a string or number, as in byte('256')
or byte(256)
,\nthen the byte value will be returned. Decimal values are ignored. If an\narray is passed, as in byte([true, 123, '456'])
, then an array of byte\nvalues will be returned.
Note: If a value can't be converted to a number, as in byte('giraffe')
,\nthen the value NaN
(not a number) will be returned.
value to convert.
\n"],"type":[0,"String|Boolean|Number"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"ns"],"description":[0,"values to convert.
\n"],"type":[0,"Array"]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"converted byte value."],"type":[0,"Number"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a Boolean variable.\n let original = true;\n\n // Convert the Boolean to its byte value.\n let converted = byte(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} : ${converted}`, 50, 50);\n\n describe('The text \"true : 1\" written in black on a gray background.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let original = '256';\n\n // Convert the string to its byte value.\n let converted = byte(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} : ${converted}`, 50, 50);\n\n describe('The text \"256 : 0\" written in black on a gray background.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a number variable.\n let original = 256;\n\n // Convert the number to its byte value.\n let converted = byte(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} : ${converted}`, 50, 50);\n\n describe('The text \"256 : 0\" written in black on a gray background.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of values.\n let original = [false, '64', 383];\n\n // Convert the array elements to their byte values.\n let converted = byte(original);\n\n // Iterate over the converted array elements.\n for (let i = 0; i < converted.length; i += 1) {\n\n // Style the circle.\n fill(converted[i]);\n\n // Calculate the x-coordinate.\n let x = (i + 1) * 25;\n\n // Draw the circle.\n circle(x, 50, 20);\n }\n\n describe(\n 'Three gray circles on a gray background. The circles get lighter from left to right.'\n );\n}\n
\nConverts a Number
or String
to a single-character String
.
char()
converts numbers to their single-character string representations.
The parameter, n
, is the value to convert. If a number is passed, as in\nchar(65)
, the corresponding single-character string is returned. If a\nstring is passed, as in char('65')
, the string is converted to an integer\n(whole number) and the corresponding single-character string is returned.\nIf an array is passed, as in char([65, 66, 67])
, an array of\nsingle-character strings is returned.
See MDN\nfor more information about conversions.
\n"],"line":[0,612],"overloads":[1,[[0,{"params":[1,[[0,{"name":[0,"n"],"description":[0,"value to convert.
\n"],"type":[0,"String|Number"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"ns"],"description":[0,"values to convert.
\n"],"type":[0,"Array"]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"converted single-character string."],"type":[0,"String"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a number variable.\n let original = 65;\n\n // Convert the number to a char.\n let converted = char(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} : ${converted}`, 50, 50);\n\n describe('The text \"65 : A\" written in black on a gray background.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let original = '65';\n\n // Convert the string to a char.\n let converted = char(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} : ${converted}`, 50, 50);\n\n describe('The text \"65 : A\" written in black on a gray background.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of numbers.\n let original = ['65', 66, '67'];\n\n // Convert the string to a char.\n let converted = char(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Iterate over elements of the converted array.\n for (let i = 0; i < converted.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Display the original and converted values.\n text(`${original[i]} : ${converted[i]}`, 50, y);\n }\n\n describe(\n 'The text \"65 : A\", \"66 : B\", and \"67 : C\" written on three separate lines. The text is in black on a gray background.'\n );\n}\n
\nConverts a String
to a floating point (decimal) Number
.
float()
converts strings that resemble numbers, such as '12.34'
, into\nnumbers.
The parameter, str
, is the string value to convert. For example, calling\nfloat('12.34')
returns the number 12.34
. If an array of strings is\npassed, as in float(['12.34', '56.78'])
, then an array of numbers will be\nreturned.
Note: If a string can't be converted to a number, as in float('giraffe')
,\nthen the value NaN
(not a number) will be returned.
string to convert.
\n"],"type":[0,"String"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"ns"],"description":[0,"array of strings to convert.
\n"],"type":[0,"String[]"]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"converted number."],"type":[0,"Number"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let original = '12.3';\n\n // Convert the string to a number.\n let converted = float(original);\n\n // Double the converted value.\n let twice = converted * 2;\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(12);\n\n // Display the original and converted values.\n text(`${original} × 2 = ${twice}`, 50, 50);\n\n describe('The text \"12.3 × 2 = 24.6\" written in black on a gray background.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of strings.\n let original = ['60', '30', '15'];\n\n // Convert the strings to numbers.\n let diameters = float(original);\n\n for (let d of diameters) {\n // Draw a circle.\n circle(50, 50, d);\n }\n\n describe('Three white, concentric circles on a gray background.');\n}\n
\nConverts a Number
to a String
with its hexadecimal value.
hex()
converts a number to a string with its hexadecimal number value.\nHexadecimal (hex) numbers are base-16, which means there are 16 unique\ndigits. Hex extends the numbers 0–9 with the letters A–F. For example, the\nnumber 11
(eleven) in base-10 is written as the letter B
in hex.
The first parameter, n
, is the number to convert. For example, hex(20)
,\nreturns the string '00000014'
. If an array is passed, as in\nhex([1, 10, 100])
, an array of hexadecimal strings is returned.
The second parameter, digits
, is optional. If a number is passed, as in\nhex(20, 2)
, it sets the number of hexadecimal digits to display. For\nexample, calling hex(20, 2)
returns the string '14'
.
value to convert.
\n"],"type":[0,"Number"]}],[0,{"name":[0,"digits"],"description":[0,"number of digits to include.
\n"],"type":[0,"Number"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"ns"],"description":[0,"values to convert.
\n"],"type":[0,"Number[]"]}],[0,{"name":[0,"digits"],"description":[0,""],"type":[0,"Number"],"optional":[0,true]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"converted hexadecimal value."],"type":[0,"String"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a number variable.\n let original = 20;\n\n // Convert the number to a hex string.\n let converted = hex(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Display the original and converted values.\n text(`${original} = ${converted}`, 50, 50);\n\n describe('The text \"20 = 00000014\" written in black on a gray background.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a number variable.\n let original = 20;\n\n // Convert the number to a hex string.\n // Only display two hex digits.\n let converted = hex(original, 2);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} = ${converted}`, 50, 50);\n\n describe('The text \"20 = 14\" written in black on a gray background.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of numbers.\n let original = [1, 10, 100];\n\n // Convert the numbers to hex strings.\n // Only use two hex digits.\n let converted = hex(original, 2);\n\n // Style the text.\n textAlign(RIGHT, CENTER);\n textSize(16);\n\n // Iterate over the converted values.\n for (let i = 0; i < converted.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Display the original and converted values.\n text(`${ original[i]} = ${converted[i]}`, 75, y);\n }\n\n describe(\n 'The text \"1 = 01\", \"10 = 0A\", and \"100 = 64\" written on three separate lines. The text is in black on a gray background.'\n );\n}\n
\nConverts a Boolean
, String
, or decimal Number
to an integer.
int()
converts values to integers. Integers are positive or negative\nnumbers without decimals. If the original value has decimals, as in -34.56,\nthey're removed to produce an integer such as -34.
The parameter, n
, is the value to convert. If n
is a Boolean, as in\nint(false)
or int(true)
, then the number 0 (false
) or 1 (true
) will\nbe returned. If n
is a string or number, as in int('45')
or\nint(67.89)
, then an integer will be returned. If an array is passed, as\nin int([12.34, 56.78])
, then an array of integers will be returned.
Note: If a value can't be converted to a number, as in int('giraffe')
,\nthen the value NaN
(not a number) will be returned.
value to convert.
\n"],"type":[0,"String|Boolean|Number"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"ns"],"description":[0,"values to convert.
\n"],"type":[0,"Array"]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"converted number."],"type":[0,"Number"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a Boolean variable.\n let original = false;\n\n // Convert the Boolean to an integer.\n let converted = int(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} : ${converted}`, 50, 50);\n\n describe('The text \"false : 0\" written in black on a gray background.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let original = '12.34';\n\n // Convert the string to an integer.\n let converted = int(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Display the original and converted values.\n text(`${original} ≈ ${converted}`, 50, 50);\n\n describe('The text \"12.34 ≈ 12\" written in black on a gray background.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a decimal number variable.\n let original = 12.34;\n\n // Convert the decimal number to an integer.\n let converted = int(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Display the original and converted values.\n text(`${original} ≈ ${converted}`, 50, 50);\n\n describe('The text \"12.34 ≈ 12\" written in black on a gray background.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of strings.\n let original = ['60', '30', '15'];\n\n // Convert the strings to integers.\n let diameters = int(original);\n\n for (let d of diameters) {\n // Draw a circle.\n circle(50, 50, d);\n }\n\n describe('Three white, concentric circles on a gray background.');\n}\n
\nConverts a Boolean
or Number
to String
.
str()
converts values to strings. See the\nString reference page for guidance on using\ntemplate literals instead.
The parameter, n
, is the value to convert. If n
is a Boolean, as in\nstr(false)
or str(true)
, then the value will be returned as a string,\nas in 'false'
or 'true'
. If n
is a number, as in str(123)
, then its\nvalue will be returned as a string, as in '123'
. If an array is passed,\nas in str([12.34, 56.78])
, then an array of strings will be returned.
value to convert.
\n"],"type":[0,"String|Boolean|Number"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"converted string."],"type":[0,"String"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a Boolean variable.\n let original = false;\n\n // Convert the Boolean to a string.\n let converted = str(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} : ${converted}`, 50, 50);\n\n describe('The text \"false : false\" written in black on a gray background.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a number variable.\n let original = 123;\n\n // Convert the number to a string.\n let converted = str(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} = ${converted}`, 50, 50);\n\n describe('The text \"123 = 123\" written in black on a gray background.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of numbers.\n let original = [12, 34, 56];\n\n // Convert the numbers to strings.\n let strings = str(original);\n\n // Create an empty string variable.\n let final = '';\n\n // Concatenate all the strings.\n for (let s of strings) {\n final += s;\n }\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the concatenated string.\n text(final, 50, 50);\n\n describe('The text \"123456\" written in black on a gray background.');\n}\n
\nConverts a single-character String
to a Number
.
unchar()
converts single-character strings to their corresponding\ninteger (whole number).
The parameter, n
, is the character to convert. For example,\nunchar('A')
, returns the number 65. If an array is passed, as in\nunchar(['A', 'B', 'C'])
, an array of integers is returned.
value to convert.
\n"],"type":[0,"String"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"ns"],"description":[0,"values to convert.
\n"],"type":[0,"String[]"]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"converted number."],"type":[0,"Number"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let original = 'A';\n\n // Convert the string to a number.\n let converted = unchar(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} : ${converted}`, 50, 50);\n\n describe('The text \"A : 65\" written in black on a gray background.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of characters.\n let original = ['A', 'B', 'C'];\n\n // Convert the string to a number.\n let converted = unchar(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Iterate over elements of the converted array.\n for (let i = 0; i < converted.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Display the original and converted values.\n text(`${original[i]} : ${converted[i]}`, 50, y);\n }\n\n describe(\n 'The text \"A : 65\", \"B : 66\", and \"C :67\" written on three separate lines. The text is in black on a gray background.'\n );\n}\n
\nConverts a String
with a hexadecimal value to a Number
.
unhex()
converts a string with its hexadecimal number value to a number.\nHexadecimal (hex) numbers are base-16, which means there are 16 unique\ndigits. Hex extends the numbers 0–9 with the letters A–F. For example, the\nnumber 11
(eleven) in base-10 is written as the letter B
in hex.
The first parameter, n
, is the hex string to convert. For example,\nunhex('FF')
, returns the number 255. If an array is passed, as in\nunhex(['00', '80', 'FF'])
, an array of numbers is returned.
value to convert.
\n"],"type":[0,"String"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"ns"],"description":[0,"values to convert.
\n"],"type":[0,"String[]"]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"converted number."],"type":[0,"Number"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a a hex string variable\n let original = 'FF';\n\n // Convert the hex string to a number.\n let converted = unhex(original);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the original and converted values.\n text(`${original} = ${converted}`, 50, 50);\n\n describe('The text \"FF = 255\" written in black on a gray background.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of numbers.\n let original = ['00', '80', 'FF'];\n\n // Convert the numbers to hex strings.\n // Only use two hex digits.\n let converted = unhex(original, 2);\n\n // Style the text.\n textAlign(RIGHT, CENTER);\n textSize(16);\n\n // Iterate over the converted values.\n for (let i = 0; i < converted.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Display the original and converted values.\n text(`${ original[i]} = ${converted[i]}`, 80, y);\n }\n\n describe(\n 'The text \"00 = 0\", \"80 = 128\", and \"FF = 255\" written on three separate lines. The text is in black on a gray background.'\n );\n}\n
\nCreates a new instance of p5.NumberDict using the key-value pair\n or object you provide.
\n"],"line":[0,48],"overloads":[1,[[0,{"params":[1,[[0,{"name":[0,"key"],"description":[0,""],"type":[0,"Number"]}],[0,{"name":[0,"value"],"description":[0,""],"type":[0,"Number"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"object"],"description":[0,"object
\n"],"type":[0,"Object"]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,""],"type":[0,"p5.NumberDict"]}],"example":[1,[[0,"\n\n function setup() {\n let myDictionary = createNumberDict(100, 42);\n print(myDictionary.hasKey(100)); // logs true to console\n let anotherDictionary = createNumberDict({ 200: 84 });\n print(anotherDictionary.hasKey(200)); // logs true to console\n }\n
Creates a new instance of p5.StringDict using the key-value pair\n or the object you provide.
\n"],"line":[0,14],"overloads":[1,[[0,{"params":[1,[[0,{"name":[0,"key"],"description":[0,""],"type":[0,"String"]}],[0,{"name":[0,"value"],"description":[0,""],"type":[0,"String"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"object"],"description":[0,"object
\n"],"type":[0,"Object"]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,""],"type":[0,"p5.StringDict"]}],"example":[1,[[0,"\n\n function setup() {\n let myDictionary = createStringDict('p5', 'js');\n print(myDictionary.hasKey('p5')); // logs true to console\n let anotherDictionary = createStringDict({ happy: 'coding' });\n print(anotherDictionary.hasKey('happy')); // logs true to console\n }\n
A simple Dictionary class for Strings.
\n"],"line":[0,397],"path":[0,"p5/p5.StringDict"]}],"render":[0,null]}]]]}],[0,{"name":[0,"LocalStorage"],"entry":[0],"entries":[1,[[0,{"id":[0,"en/p5/clearStorage.mdx"],"slug":[0,"en/p5/clearstorage"],"body":[0,"\n\n# clearStorage\n"],"collection":[0,"reference"],"data":[0,{"title":[0,"clearStorage()"],"module":[0,"Data"],"submodule":[0,"LocalStorage"],"file":[0,"src/data/local_storage.js"],"description":[0,"Removes all items in the web browser's local storage.
\nWeb browsers can save small amounts of data using the built-in\nlocalStorage object.\nData stored in localStorage
can be retrieved at any point, even after\nrefreshing a page or restarting the browser. Data are stored as key-value\npairs. Calling clearStorage()
removes all data from localStorage
.
Note: Sensitive data such as passwords or personal information shouldn't be\nstored in localStorage
.
\n// Double-click to clear localStorage.\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Store the player's name.\n storeItem('name', 'Feist');\n\n // Store the player's score.\n storeItem('score', 1234);\n\n describe(\n 'The text \"Feist: 1234\" written in black on a gray background. The text \"null: null\" appears when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Retrieve the name.\n let name = getItem('name');\n\n // Retrieve the score.\n let score = getItem('score');\n\n // Display the score.\n text(`${name}: ${score}`, 50, 50);\n}\n\n// Clear localStorage when the user double-clicks.\nfunction doubleClicked() {\n clearStorage();\n}\n
\nReturns a value in the web browser's local storage.
\nWeb browsers can save small amounts of data using the built-in\nlocalStorage object.\nData stored in localStorage
can be retrieved at any point, even after\nrefreshing a page or restarting the browser. Data are stored as key-value\npairs.
storeItem() makes it easy to store values in\nlocalStorage
and getItem()
makes it easy to retrieve them.
The first parameter, key
, is the name of the value to be stored as a\nstring.
The second parameter, value
, is the value to be retrieved a string. For\nexample, calling getItem('size')
retrieves the value with the key size
.
Note: Sensitive data such as passwords or personal information shouldn't be\nstored in localStorage
.
name of the value.
\n"],"type":[0,"String"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"stored item."],"type":[0,"String|Number|Boolean|Object|Array"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Store the player's name.\n storeItem('name', 'Feist');\n\n // Store the player's score.\n storeItem('score', 1234);\n\n describe('The text \"Feist: 1234\" written in black on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Retrieve the name.\n let name = getItem('name');\n\n // Retrieve the score.\n let score = getItem('score');\n\n // Display the score.\n text(`${name}: ${score}`, 50, 50);\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create an object.\n let p = { x: 50, y: 50 };\n\n // Store the object.\n storeItem('position', p);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Retrieve the object.\n let p = getItem('position');\n\n // Draw the circle.\n circle(p.x, p.y, 30);\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create a p5.Color object.\n let c = color('deeppink');\n\n // Store the object.\n storeItem('color', c);\n\n describe('A pink circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Retrieve the object.\n let c = getItem('color');\n\n // Style the circle.\n fill(c);\n\n // Draw the circle.\n circle(50, 50, 30);\n}\n
\nRemoves an item from the web browser's local storage.
\nWeb browsers can save small amounts of data using the built-in\nlocalStorage object.\nData stored in localStorage
can be retrieved at any point, even after\nrefreshing a page or restarting the browser. Data are stored as key-value\npairs.
storeItem() makes it easy to store values in\nlocalStorage
and removeItem()
makes it easy to delete them.
The parameter, key
, is the name of the value to remove as a string. For\nexample, calling removeItem('size')
removes the item with the key size
.
Note: Sensitive data such as passwords or personal information shouldn't be\nstored in localStorage
.
name of the value to remove.
\n"],"type":[0,"String"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\n// Double-click to remove an item from localStorage.\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Store the player's name.\n storeItem('name', 'Feist');\n\n // Store the player's score.\n storeItem('score', 1234);\n\n describe(\n 'The text \"Feist: 1234\" written in black on a gray background. The text \"Feist: null\" appears when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Retrieve the name.\n let name = getItem('name');\n\n // Retrieve the score.\n let score = getItem('score');\n\n // Display the score.\n text(`${name}: ${score}`, 50, 50);\n}\n\n// Remove the word from localStorage when the user double-clicks.\nfunction doubleClicked() {\n removeItem('score');\n}\n
\nStores a value in the web browser's local storage.
\nWeb browsers can save small amounts of data using the built-in\nlocalStorage object.\nData stored in localStorage
can be retrieved at any point, even after\nrefreshing a page or restarting the browser. Data are stored as key-value\npairs.
storeItem()
makes it easy to store values in localStorage
and\ngetItem() makes it easy to retrieve them.
The first parameter, key
, is the name of the value to be stored as a\nstring.
The second parameter, value
, is the value to be stored. Values can have\nany type.
Note: Sensitive data such as passwords or personal information shouldn't be\nstored in localStorage
.
name of the value.
\n"],"type":[0,"String"]}],[0,{"name":[0,"value"],"description":[0,"value to be stored.
\n"],"type":[0,"String|Number|Boolean|Object|Array"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Store the player's name.\n storeItem('name', 'Feist');\n\n // Store the player's score.\n storeItem('score', 1234);\n\n describe('The text \"Feist: 1234\" written in black on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Retrieve the name.\n let name = getItem('name');\n\n // Retrieve the score.\n let score = getItem('score');\n\n // Display the score.\n text(`${name}: ${score}`, 50, 50);\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create an object.\n let p = { x: 50, y: 50 };\n\n // Store the object.\n storeItem('position', p);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Retrieve the object.\n let p = getItem('position');\n\n // Draw the circle.\n circle(p.x, p.y, 30);\n}\n
\nCombines an array of strings into one string.
\nThe first parameter, list
, is the array of strings to join.
The second parameter, separator
, is the character(s) that should be used\nto separate the combined strings. For example, calling\njoin(myWords, ' : ')
would return a string of words each separated by a\ncolon and spaces.
array of strings to combine.
\n"],"type":[0,"Array"]}],[0,{"name":[0,"separator"],"description":[0,"character(s) to place between strings when they're combined.
\n"],"type":[0,"String"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"combined string."],"type":[0,"String"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of strings.\n let myWords = ['one', 'two', 'three'];\n\n // Create a combined string\n let combined = join(myWords, ' : ');\n\n // Style the text.\n textAlign(CENTER, CENTER);\n\n // Display the combined string.\n text(combined, 50, 50);\n\n describe('The text \"one : two : three\" written in black on a gray canvas.');\n}\n
\nApplies a regular expression to a string and returns an array with the\nfirst match.
\nmatch()
uses regular expressions (regex) to match patterns in text. For\nexample, the regex abc
can be used to search a string for the exact\nsequence of characters abc
. See\nMDN.\nfor more information about regexes.
The first parameter, str
, is the string to search.
The second parameter, regex
, is a string with the regular expression to\napply. For example, calling match('Hello, p5*js!', '[a-z][0-9]')
would\nreturn the array ['p5']
.
Note: If no matches are found, null
is returned.
string to search.
\n"],"type":[0,"String"]}],[0,{"name":[0,"regexp"],"description":[0,"regular expression to match.
\n"],"type":[0,"String"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"match if found."],"type":[0,"String[]"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let string = 'Hello, p5*js!';\n\n // Match the characters that are lowercase\n // letters followed by digits.\n let matches = match(string, '[a-z][0-9]');\n\n // Print the matches array to the console:\n // ['p5']\n print(matches);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the matches.\n text(matches, 50, 50);\n\n describe('The text \"p5\" written in black on a gray canvas.');\n}\n
\nApplies a regular expression to a string and returns an array of matches.
\nmatch()
uses regular expressions (regex) to match patterns in text. For\nexample, the regex abc
can be used to search a string for the exact\nsequence of characters abc
. See\nMDN.\nfor more information about regexes. matchAll()
is different from\nmatch() because it returns every match, not just\nthe first.
The first parameter, str
, is the string to search.
The second parameter, regex
, is a string with the regular expression to\napply. For example, calling\nmatchAll('p5*js is easier than abc123', '[a-z][0-9]')
would return the\n2D array [['p5'], ['c1']]
.
Note: If no matches are found, an empty array []
is returned.
string to search.
\n"],"type":[0,"String"]}],[0,{"name":[0,"regexp"],"description":[0,"regular expression to match.
\n"],"type":[0,"String"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"matches found."],"type":[0,"String[]"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let string = 'p5*js is easier than abc123';\n\n // Match the character sequences that are\n // lowercase letters followed by digits.\n let matches = matchAll(string, '[a-z][0-9]');\n\n // Print the matches array to the console:\n // [['p5'], ['c1']]\n print(matches);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Iterate over the matches array.\n for (let i = 0; i < matches.length; i += 1) {\n\n // Calculate the y-coordainate.\n let y = (i + 1) * 33;\n\n // Display the match.\n text(matches[i], 50, y);\n }\n\n describe(\n 'The text \"p5\" and \"c1\" written on separate lines. The text is black on a gray background.'\n );\n}\n
\nConverts a Number
into a String
with a given number of digits.
nf()
converts numbers such as 123.45
into strings formatted with a set\nnumber of digits, as in '123.4500'
.
The first parameter, num
, is the number to convert to a string. For\nexample, calling nf(123.45)
returns the string '123.45'
. If an array of\nnumbers is passed, as in nf([123.45, 67.89])
, an array of formatted\nstrings will be returned.
The second parameter, left
, is optional. If a number is passed, as in\nnf(123.45, 4)
, it sets the minimum number of digits to include to the\nleft of the decimal place. If left
is larger than the number of digits in\nnum
, then unused digits will be set to 0. For example, calling\nnf(123.45, 4)
returns the string '0123.45'
.
The third parameter, right
, is also optional. If a number is passed, as\nin nf(123.45, 4, 1)
, it sets the minimum number of digits to include to\nthe right of the decimal place. If right
is smaller than the number of\ndecimal places in num
, then num
will be rounded to the given number of\ndecimal places. For example, calling nf(123.45, 4, 1)
returns the string\n'0123.5'
. If right is larger than the number of decimal places in num
,\nthen unused decimal places will be set to 0. For example, calling\nnf(123.45, 4, 3)
returns the string '0123.450'
.
When the number is negative, for example, calling nf(-123.45, 5, 2)
\nreturns the string '-00123.45'
.
number to format.
\n"],"type":[0,"Number|String"]}],[0,{"name":[0,"left"],"description":[0,"number of digits to include to the left of\n the decimal point.
\n"],"type":[0,"Integer|String"],"optional":[0,true]}],[0,{"name":[0,"right"],"description":[0,"number of digits to include to the right\n of the decimal point.
\n"],"type":[0,"Integer|String"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"nums"],"description":[0,"numbers to format.
\n"],"type":[0,"Number[]"]}],[0,{"name":[0,"left"],"description":[0,""],"type":[0,"Integer|String"],"optional":[0,true]}],[0,{"name":[0,"right"],"description":[0,""],"type":[0,"Integer|String"],"optional":[0,true]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"formatted string."],"type":[0,"String"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(16);\n\n // Create a number variable.\n let number = 123.45;\n\n // Display the number as a string.\n let formatted = nf(number);\n text(formatted, 20, 20);\n\n let negative = nf(-number, 4, 2);\n text(negative, 20, 40);\n\n // Display the number with four digits\n // to the left of the decimal.\n let left = nf(number, 4);\n text(left, 20, 60);\n\n // Display the number with four digits\n // to the left of the decimal and one\n // to the right.\n let right = nf(number, 4, 1);\n text(right, 20, 80);\n\n describe(\n 'The numbers \"123.45\", \"-0123.45\", \"0123.45\", and \"0123.5\" written on four separate lines. The text is in black on a gray background.'\n );\n}\n
\nConverts a Number
into a String
with commas to mark units of 1,000.
nfc()
converts numbers such as 12345 into strings formatted with commas\nto mark the thousands place, as in '12,345'
.
The first parameter, num
, is the number to convert to a string. For\nexample, calling nfc(12345)
returns the string '12,345'
.
The second parameter, right
, is optional. If a number is passed, as in\nnfc(12345, 1)
, it sets the minimum number of digits to include to the\nright of the decimal place. If right
is smaller than the number of\ndecimal places in num
, then num
will be rounded to the given number of\ndecimal places. For example, calling nfc(12345.67, 1)
returns the string\n'12,345.7'
. If right
is larger than the number of decimal places in\nnum
, then unused decimal places will be set to 0. For example, calling\nnfc(12345.67, 3)
returns the string '12,345.670'
.
number to format.
\n"],"type":[0,"Number|String"]}],[0,{"name":[0,"right"],"description":[0,"number of digits to include to the right\n of the decimal point.
\n"],"type":[0,"Integer|String"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"nums"],"description":[0,"numbers to format.
\n"],"type":[0,"Number[]"]}],[0,{"name":[0,"right"],"description":[0,""],"type":[0,"Integer|String"],"optional":[0,true]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"formatted string."],"type":[0,"String"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(LEFT, CENTER);\n textSize(16);\n\n // Create a number variable.\n let number = 12345;\n\n // Display the number as a string.\n let commas = nfc(number);\n text(commas, 15, 33);\n\n // Display the number with four digits\n // to the left of the decimal.\n let decimals = nfc(number, 2);\n text(decimals, 15, 67);\n\n describe(\n 'The numbers \"12,345\" and \"12,345.00\" written on separate lines. The text is in black on a gray background.'\n );\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of numbers.\n let numbers = [12345, 6789];\n\n // Convert the numbers to formatted strings.\n let formatted = nfc(numbers);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Iterate over the array.\n for (let i = 0; i < formatted.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 33;\n\n // Display the original and formatted numbers.\n text(`${numbers[i]} : ${formatted[i]}`, 50, y);\n }\n\n describe(\n 'The text \"12345 : 12,345\" and \"6789 : 6,789\" written on two separate lines. The text is in black on a gray background.'\n );\n}\n
\nConverts a Number
into a String
with a plus or minus sign.
nfp()
converts numbers such as 123 into strings formatted with a +
or\n-
symbol to mark whether they're positive or negative, as in '+123'
.
The first parameter, num
, is the number to convert to a string. For\nexample, calling nfp(123.45)
returns the string '+123.45'
. If an array\nof numbers is passed, as in nfp([123.45, -6.78])
, an array of formatted\nstrings will be returned.
The second parameter, left
, is optional. If a number is passed, as in\nnfp(123.45, 4)
, it sets the minimum number of digits to include to the\nleft of the decimal place. If left
is larger than the number of digits in\nnum
, then unused digits will be set to 0. For example, calling\nnfp(123.45, 4)
returns the string '+0123.45'
.
The third parameter, right
, is also optional. If a number is passed, as\nin nfp(123.45, 4, 1)
, it sets the minimum number of digits to include to\nthe right of the decimal place. If right
is smaller than the number of\ndecimal places in num
, then num
will be rounded to the given number of\ndecimal places. For example, calling nfp(123.45, 4, 1)
returns the\nstring '+0123.5'
. If right
is larger than the number of decimal places\nin num
, then unused decimal places will be set to 0. For example,\ncalling nfp(123.45, 4, 3)
returns the string '+0123.450'
.
number to format.
\n"],"type":[0,"Number"]}],[0,{"name":[0,"left"],"description":[0,"number of digits to include to the left of the\n decimal point.
\n"],"type":[0,"Integer"],"optional":[0,true]}],[0,{"name":[0,"right"],"description":[0,"number of digits to include to the right of the\n decimal point.
\n"],"type":[0,"Integer"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"nums"],"description":[0,"numbers to format.
\n"],"type":[0,"Number[]"]}],[0,{"name":[0,"left"],"description":[0,""],"type":[0,"Integer"],"optional":[0,true]}],[0,{"name":[0,"right"],"description":[0,""],"type":[0,"Integer"],"optional":[0,true]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"formatted string."],"type":[0,"String"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create number variables.\n let positive = 123;\n let negative = -123;\n\n // Convert the positive number to a formatted string.\n let p = nfp(positive);\n\n // Convert the negative number to a formatted string\n // with four digits to the left of the decimal\n // and two digits to the right of the decimal.\n let n = nfp(negative, 4, 2);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Display the original and formatted numbers.\n text(`${positive} : ${p}`, 50, 33);\n text(`${negative} : ${n}`, 50, 67);\n\n describe(\n 'The text \"123 : +123\" and \"-123 : -123.00\" written on separate lines. The text is in black on a gray background.'\n );\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create number variables.\n let numbers = [123, -4.56];\n\n // Convert the numbers to formatted strings\n // with four digits to the left of the decimal\n // and one digit to the right of the decimal.\n let formatted = nfp(numbers, 4, 1);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(14);\n\n // Iterate over the array.\n for (let i = 0; i < formatted.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 33;\n\n // Display the original and formatted numbers.\n text(`${numbers[i]} : ${formatted[i]}`, 50, y);\n }\n\n describe(\n 'The text \"123 : +0123.0\" and \"-4.56 : 00-4.6\" written on separate lines. The text is in black on a gray background.'\n );\n}\n
\nConverts a positive Number
into a String
with an extra space in front.
nfs()
converts positive numbers such as 123.45 into strings formatted\nwith an extra space in front, as in ' 123.45'. Doing so can be helpful for\naligning positive and negative numbers.
The first parameter, num
, is the number to convert to a string. For\nexample, calling nfs(123.45)
returns the string ' 123.45'
.
The second parameter, left
, is optional. If a number is passed, as in\nnfs(123.45, 4)
, it sets the minimum number of digits to include to the\nleft of the decimal place. If left
is larger than the number of digits in\nnum
, then unused digits will be set to 0. For example, calling\nnfs(123.45, 4)
returns the string ' 0123.45'
.
The third parameter, right
, is also optional. If a number is passed, as\nin nfs(123.45, 4, 1)
, it sets the minimum number of digits to include to\nthe right of the decimal place. If right
is smaller than the number of\ndecimal places in num
, then num
will be rounded to the given number of\ndecimal places. For example, calling nfs(123.45, 4, 1)
returns the\nstring ' 0123.5'
. If right
is larger than the number of decimal places\nin num
, then unused decimal places will be set to 0. For example,\ncalling nfs(123.45, 4, 3)
returns the string ' 0123.450'
.
number to format.
\n"],"type":[0,"Number"]}],[0,{"name":[0,"left"],"description":[0,"number of digits to include to the left of the\n decimal point.
\n"],"type":[0,"Integer"],"optional":[0,true]}],[0,{"name":[0,"right"],"description":[0,"number of digits to include to the right of the\n decimal point.
\n"],"type":[0,"Integer"],"optional":[0,true]}]]]}],[0,{"params":[1,[[0,{"name":[0,"nums"],"description":[0,"numbers to format.
\n"],"type":[0,"Array"]}],[0,{"name":[0,"left"],"description":[0,""],"type":[0,"Integer"],"optional":[0,true]}],[0,{"name":[0,"right"],"description":[0,""],"type":[0,"Integer"],"optional":[0,true]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"formatted string."],"type":[0,"String"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create number variables.\n let positive = 123;\n let negative = -123;\n\n // Convert the positive number to a formatted string.\n let formatted = nfs(positive);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(16);\n\n // Display the negative number and the formatted positive number.\n text(negative, 50, 33);\n text(formatted, 50, 67);\n\n describe(\n 'The numbers -123 and 123 written on separate lines. The numbers align vertically. The text is in black on a gray background.'\n );\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a number variable.\n let number = 123.45;\n\n // Convert the positive number to a formatted string.\n // Use four digits to the left of the decimal and\n // one digit to the right.\n let formatted = nfs(number, 4, 1);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(16);\n\n // Display a negative version of the number and\n // the formatted positive version.\n text('-0123.5', 50, 33);\n text(formatted, 50, 67);\n\n describe(\n 'The numbers \"-0123.5\" and \"0123.5\" written on separate lines. The numbers align vertically. The text is in black on a gray background.'\n );\n}\n
\nSplits a String
into pieces and returns an array containing the pieces.
The first parameter, value
, is the string to split.
The second parameter, delim
, is the character(s) that should be used to\nsplit the string. For example, calling\nsplit('rock...paper...scissors', '...')
would return the array\n['rock', 'paper', 'scissors']
because there are three periods ...
\nbetween each word.
the String to be split
\n"],"type":[0,"String"]}],[0,{"name":[0,"delim"],"description":[0,"the String used to separate the data
\n"],"type":[0,"String"]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"Array of Strings"],"type":[0,"String[]"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let string = 'rock...paper...scissors';\n\n // Split the string at each ...\n let words = split(string, '...');\n\n // Print the array to the console:\n // [\"rock\", \"paper\", \"scissors\"]\n print(words);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(16);\n\n // Iterate over the words array.\n for (let i = 0; i < words.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 25;\n\n // Display the word.\n text(words[i], 50, y);\n }\n\n describe(\n 'The words \"rock\", \"paper\", and \"scissors\" written on separate lines. The text is black on a gray background.'\n );\n}\n
\nSplits a String
into pieces and returns an array containing the pieces.
splitTokens()
is an enhanced version of\nsplit(). It can split a string when any characters\nfrom a list are detected.
The first parameter, value
, is the string to split.
The second parameter, delim
, is optional. It sets the character(s) that\nshould be used to split the string. delim
can be a single string, as in\nsplitTokens('rock...paper...scissors...shoot', '...')
, or an array of\nstrings, as in\nsplitTokens('rock;paper,scissors...shoot, [';', ',', '...'])
. By default,\nif no delim
characters are specified, then any whitespace character is\nused to split. Whitespace characters include tab (\\t
), line feed (\\n
),\ncarriage return (\\r
), form feed (\\f
), and space.
string to split.
\n"],"type":[0,"String"]}],[0,{"name":[0,"delim"],"description":[0,"character(s) to use for splitting the string.
\n"],"type":[0,"String"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"separated strings."],"type":[0,"String[]"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let string = 'rock paper scissors shoot';\n\n // Split the string at each space.\n let words = splitTokens(string);\n\n // Print the array to the console.\n print(words);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Iterate over the words array.\n for (let i = 0; i < words.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 20;\n\n // Display the word.\n text(words[i], 50, y);\n }\n\n describe(\n 'The words \"rock\", \"paper\", \"scissors\", and \"shoot\" written on separate lines. The text is black on a gray background.'\n );\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let string = 'rock...paper...scissors...shoot';\n\n // Split the string at each ...\n let words = splitTokens(string, '...');\n\n // Print the array to the console.\n print(words);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Iterate over the words array.\n for (let i = 0; i < words.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 20;\n\n // Display the word.\n text(words[i], 50, y);\n }\n\n describe(\n 'The words \"rock\", \"paper\", \"scissors\", and \"shoot\" written on separate lines. The text is black on a gray background.'\n );\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let string = 'rock;paper,scissors...shoot';\n\n // Split the string at each semicolon, comma, or ...\n let words = splitTokens(string, [';', ',', '...']);\n\n // Print the array to the console.\n print(words);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(12);\n\n // Iterate over the words array.\n for (let i = 0; i < words.length; i += 1) {\n\n // Calculate the y-coordinate.\n let y = (i + 1) * 20;\n\n // Display the word.\n text(words[i], 50, y);\n }\n\n describe(\n 'The words \"rock\", \"paper\", \"scissors\", and \"shoot\" written on separate lines. The text is black on a gray background.'\n );\n}\n
\nRemoves whitespace from the start and end of a String
without changing the middle.
trim()
trims\nwhitespace characters\nsuch as spaces, carriage returns, tabs, Unicode \"nbsp\" character.
The parameter, str
, is the string to trim. If a single string is passed,\nas in trim(' pad ')
, a single string is returned. If an array of\nstrings is passed, as in trim([' pad ', '\\n space \\n'])
, an array of\nstrings is returned.
string to trim.
\n"],"type":[0,"String"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"strs"],"description":[0,"strings to trim.
\n"],"type":[0,"String[]"]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"return":[0,{"description":[0,"trimmed string."],"type":[0,"String"]}],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create a string variable.\n let string = ' p5*js ';\n\n // Trim the whitespace.\n let trimmed = trim(string);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(16);\n\n // Display the text.\n text(`Hello, ${trimmed}!`, 50, 50);\n\n describe('The text \"Hello, p5*js!\" written in black on a gray background.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Create an array of strings.\n let strings = [' wide ', '\\n open ', '\\n spaces '];\n\n // Trim the whitespace.\n let trimmed = trim(strings);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(10);\n\n // Display the text.\n text(`${trimmed[0]} ${trimmed[1]} ${trimmed[2]}`, 50, 50);\n\n describe('The text \"wide open spaces\" written in black on a gray background.');\n}\n
\nA simple Dictionary class for Numbers.
\n"],"line":[0,415],"chainable":[0,false],"methods":[0,{"add":[0,{"description":[0,"Add the given number to the value currently stored at the given key.\nThe sum then replaces the value previously stored in the Dictionary.
\n"],"path":[0,"p5.NumberDict/add"]}],"sub":[0,{"description":[0,"Subtract the given number from the value currently stored at the given key.\nThe difference then replaces the value previously stored in the Dictionary.
\n"],"path":[0,"p5.NumberDict/sub"]}],"mult":[0,{"description":[0,"Multiply the given number with the value currently stored at the given key.\nThe product then replaces the value previously stored in the Dictionary.
\n"],"path":[0,"p5.NumberDict/mult"]}],"div":[0,{"description":[0,"Divide the given number with the value currently stored at the given key.\nThe quotient then replaces the value previously stored in the Dictionary.
\n"],"path":[0,"p5.NumberDict/div"]}],"minValue":[0,{"description":[0,"Return the lowest number currently stored in the Dictionary.
\n"],"path":[0,"p5.NumberDict/minValue"]}],"maxValue":[0,{"description":[0,"Return the highest number currently stored in the Dictionary.
\n"],"path":[0,"p5.NumberDict/maxValue"]}],"minKey":[0,{"description":[0,"Return the lowest key currently used in the Dictionary.
\n"],"path":[0,"p5.NumberDict/minKey"]}],"maxKey":[0,{"description":[0,"Return the highest key currently used in the Dictionary.
\n"],"path":[0,"p5.NumberDict/maxKey"]}]}],"isConstructor":[0,true],"path":[0,"p5/p5.NumberDict"]}],"render":[0,null]}],"entries":[1,[[0,{"id":[0,"en/p5.NumberDict/add.mdx"],"slug":[0,"en/p5numberdict/add"],"body":[0,"\n\n# add\n"],"collection":[0,"reference"],"data":[0,{"title":[0,"add()"],"module":[0,"Data"],"submodule":[0,"Dictionary"],"file":[0,"src/data/p5.TypedDict.js"],"description":[0,"Add the given number to the value currently stored at the given key.\nThe sum then replaces the value previously stored in the Dictionary.
\n"],"line":[0,439],"params":[1,[[0,{"name":[0,"Key"],"description":[0,"for the value you wish to add to
\n"],"type":[0,"Number"]}],[0,{"name":[0,"Number"],"description":[0,"to add to the value
\n"],"type":[0,"Number"]}]]],"itemtype":[0,"method"],"class":[0,"p5.NumberDict"],"chainable":[0,false],"example":[1,[[0,"\n\nfunction setup() {\n let myDictionary = createNumberDict(2, 5);\n myDictionary.add(2, 2);\n print(myDictionary.get(2)); // logs 7 to console.\n}\n
Divide the given number with the value currently stored at the given key.\nThe quotient then replaces the value previously stored in the Dictionary.
\n"],"line":[0,516],"params":[1,[[0,{"name":[0,"Key"],"description":[0,"for value you wish to divide
\n"],"type":[0,"Number"]}],[0,{"name":[0,"Amount"],"description":[0,"to divide the value by
\n"],"type":[0,"Number"]}]]],"itemtype":[0,"method"],"class":[0,"p5.NumberDict"],"chainable":[0,false],"example":[1,[[0,"\n\nfunction setup() {\n let myDictionary = createNumberDict(2, 8);\n myDictionary.div(2, 2);\n print(myDictionary.get(2)); // logs 4 to console.\n}\n
Return the highest key currently used in the Dictionary.
\n"],"line":[0,649],"itemtype":[0,"method"],"class":[0,"p5.NumberDict"],"chainable":[0,false],"return":[0,{"description":[0,""],"type":[0,"Number"]}],"example":[1,[[0,"\n\nfunction setup() {\n let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });\n let highestKey = myDictionary.maxKey(); // value is 4\n print(highestKey);\n}\n
Return the highest number currently stored in the Dictionary.
\n"],"line":[0,587],"itemtype":[0,"method"],"class":[0,"p5.NumberDict"],"chainable":[0,false],"return":[0,{"description":[0,""],"type":[0,"Number"]}],"example":[1,[[0,"\n\nfunction setup() {\n let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });\n let highestValue = myDictionary.maxValue(); // value is 3\n print(highestValue);\n}\n
Return the lowest key currently used in the Dictionary.
\n"],"line":[0,629],"itemtype":[0,"method"],"class":[0,"p5.NumberDict"],"chainable":[0,false],"return":[0,{"description":[0,""],"type":[0,"Number"]}],"example":[1,[[0,"\n\nfunction setup() {\n let myDictionary = createNumberDict({ 2: 4, 4: 6, 1.2: 3 });\n let lowestKey = myDictionary.minKey(); // value is 1.2\n print(lowestKey);\n}\n
Return the lowest number currently stored in the Dictionary.
\n"],"line":[0,567],"itemtype":[0,"method"],"class":[0,"p5.NumberDict"],"chainable":[0,false],"return":[0,{"description":[0,""],"type":[0,"Number"]}],"example":[1,[[0,"\n\nfunction setup() {\n let myDictionary = createNumberDict({ 2: -10, 4: 0.65, 1.2: 3 });\n let lowestValue = myDictionary.minValue(); // value is -10\n print(lowestValue);\n}\n
Multiply the given number with the value currently stored at the given key.\nThe product then replaces the value previously stored in the Dictionary.
\n"],"line":[0,489],"params":[1,[[0,{"name":[0,"Key"],"description":[0,"for value you wish to multiply
\n"],"type":[0,"Number"]}],[0,{"name":[0,"Amount"],"description":[0,"to multiply the value by
\n"],"type":[0,"Number"]}]]],"itemtype":[0,"method"],"class":[0,"p5.NumberDict"],"chainable":[0,false],"example":[1,[[0,"\n\nfunction setup() {\n let myDictionary = createNumberDict(2, 4);\n myDictionary.mult(2, 2);\n print(myDictionary.get(2)); // logs 8 to console.\n}\n
Subtract the given number from the value currently stored at the given key.\nThe difference then replaces the value previously stored in the Dictionary.
\n"],"line":[0,466],"params":[1,[[0,{"name":[0,"Key"],"description":[0,"for the value you wish to subtract from
\n"],"type":[0,"Number"]}],[0,{"name":[0,"Number"],"description":[0,"to subtract from the value
\n"],"type":[0,"Number"]}]]],"itemtype":[0,"method"],"class":[0,"p5.NumberDict"],"chainable":[0,false],"example":[1,[[0,"\n\nfunction setup() {\n let myDictionary = createNumberDict(2, 5);\n myDictionary.sub(2, 2);\n print(myDictionary.get(2)); // logs 3 to console.\n}\n
Base class for all p5.Dictionary types. Specifically\n typed Dictionary classes inherit from this class.
\n"],"line":[0,82],"chainable":[0,false],"methods":[0,{"size":[0,{"description":[0,"Returns the number of key-value pairs currently stored in the Dictionary.
\n"],"path":[0,"p5.TypedDict/size"]}],"hasKey":[0,{"description":[0,"Returns true if the given key exists in the Dictionary,\notherwise returns false.
\n"],"path":[0,"p5.TypedDict/hasKey"]}],"get":[0,{"description":[0,"Returns the value stored at the given key.
\n"],"path":[0,"p5.TypedDict/get"]}],"set":[0,{"description":[0,"Updates the value associated with the given key in case it already exists\nin the Dictionary. Otherwise a new key-value pair is added.
\n"],"path":[0,"p5.TypedDict/set"]}],"create":[0,{"description":[0,"Creates a new key-value pair in the Dictionary.
\n"],"path":[0,"p5.TypedDict/create"]}],"clear":[0,{"description":[0,"Removes all previously stored key-value pairs from the Dictionary.
\n"],"path":[0,"p5.TypedDict/clear"]}],"remove":[0,{"description":[0,"Removes the key-value pair stored at the given key from the Dictionary.
\n"],"path":[0,"p5.TypedDict/remove"]}],"print":[0,{"description":[0,"Logs the set of items currently stored in the Dictionary to the console.
\n"],"path":[0,"p5.TypedDict/print"]}],"saveTable":[0,{"description":[0,"Converts the Dictionary into a CSV file for local download.
\n"],"path":[0,"p5.TypedDict/saveTable"]}],"saveJSON":[0,{"description":[0,"Converts the Dictionary into a JSON file for local download.
\n"],"path":[0,"p5.TypedDict/saveJSON"]}]}],"isConstructor":[0,true],"path":[0,"p5/p5.TypedDict"]}],"render":[0,null]}],"entries":[1,[[0,{"id":[0,"en/p5.TypedDict/clear.mdx"],"slug":[0,"en/p5typeddict/clear"],"body":[0,"\n\n# clear\n"],"collection":[0,"reference"],"data":[0,{"title":[0,"clear()"],"module":[0,"Data"],"submodule":[0,"Dictionary"],"file":[0,"src/data/p5.TypedDict.js"],"description":[0,"Removes all previously stored key-value pairs from the Dictionary.
\n"],"line":[0,245],"itemtype":[0,"method"],"class":[0,"p5.TypedDict"],"chainable":[0,false],"example":[1,[[0,"\n\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n print(myDictionary.hasKey('p5')); // prints 'true'\n myDictionary.clear();\n print(myDictionary.hasKey('p5')); // prints 'false'\n}\n
\nCreates a new key-value pair in the Dictionary.
\n"],"line":[0,209],"overloads":[1,[[0,{"params":[1,[[0,{"name":[0,"key"],"description":[0,""],"type":[0,"Number|String"]}],[0,{"name":[0,"value"],"description":[0,""],"type":[0,"Number|String"]}]]]}],[0,{"params":[1,[[0,{"name":[0,"obj"],"description":[0,"key/value pair
\n"],"type":[0,"Object"]}]]]}]]],"itemtype":[0,"method"],"class":[0,"p5.TypedDict"],"chainable":[0,false],"example":[1,[[0,"\n\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n myDictionary.create('happy', 'coding');\n myDictionary.print();\n // above logs \"key: p5 - value: js, key: happy - value: coding\" to console\n}\n
Returns the value stored at the given key.
\n"],"line":[0,145],"params":[1,[[0,{"name":[0,"the"],"description":[0,"key you want to access
\n"],"type":[0,"Number|String"]}]]],"itemtype":[0,"method"],"class":[0,"p5.TypedDict"],"chainable":[0,false],"return":[0,{"description":[0,"the value stored at that key"],"type":[0,"Number|String"]}],"example":[1,[[0,"\n\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n let myValue = myDictionary.get('p5');\n print(myValue === 'js'); // logs true to console\n}\n
Returns true if the given key exists in the Dictionary,\notherwise returns false.
\n"],"line":[0,123],"params":[1,[[0,{"name":[0,"key"],"description":[0,"that you want to look up
\n"],"type":[0,"Number|String"]}]]],"itemtype":[0,"method"],"class":[0,"p5.TypedDict"],"chainable":[0,false],"return":[0,{"description":[0,"whether that key exists in Dictionary"],"type":[0,"Boolean"]}],"example":[1,[[0,"\n\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n print(myDictionary.hasKey('p5')); // logs true to console\n}\n
Logs the set of items currently stored in the Dictionary to the console.
\n"],"line":[0,295],"itemtype":[0,"method"],"class":[0,"p5.TypedDict"],"chainable":[0,false],"example":[1,[[0,"\n\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n myDictionary.create('happy', 'coding');\n myDictionary.print();\n // above logs \"key: p5 - value: js, key: happy - value: coding\" to console\n}\n
\nRemoves the key-value pair stored at the given key from the Dictionary.
\n"],"line":[0,266],"params":[1,[[0,{"name":[0,"key"],"description":[0,"for the pair to remove
\n"],"type":[0,"Number|String"]}]]],"itemtype":[0,"method"],"class":[0,"p5.TypedDict"],"chainable":[0,false],"example":[1,[[0,"\n\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n myDictionary.create('happy', 'coding');\n myDictionary.print();\n // above logs \"key: p5 - value: js, key: happy - value: coding\" to console\n myDictionary.remove('p5');\n myDictionary.print();\n // above logs \"key: happy value: coding\" to console\n}\n
Converts the Dictionary into a JSON file for local download.
\n"],"line":[0,357],"itemtype":[0,"method"],"class":[0,"p5.TypedDict"],"chainable":[0,false],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n text('click here to save', 10, 10, 70, 80);\n}\n\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n createStringDict({\n john: 1940,\n paul: 1942,\n george: 1943,\n ringo: 1940\n }).saveJSON('beatles');\n }\n}\n
\nConverts the Dictionary into a CSV file for local download.
\n"],"line":[0,319],"itemtype":[0,"method"],"class":[0,"p5.TypedDict"],"chainable":[0,false],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n background(200);\n text('click here to save', 10, 10, 70, 80);\n}\n\nfunction mousePressed() {\n if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {\n createStringDict({\n john: 1940,\n paul: 1942,\n george: 1943,\n ringo: 1940\n }).saveTable('beatles');\n }\n}\n
\nUpdates the value associated with the given key in case it already exists\nin the Dictionary. Otherwise a new key-value pair is added.
\n"],"line":[0,171],"params":[1,[[0,{"name":[0,"key"],"description":[0,""],"type":[0,"Number|String"]}],[0,{"name":[0,"value"],"description":[0,""],"type":[0,"Number|String"]}]]],"itemtype":[0,"method"],"class":[0,"p5.TypedDict"],"chainable":[0,false],"example":[1,[[0,"\n\nfunction setup() {\n let myDictionary = createStringDict('p5', 'js');\n myDictionary.set('p5', 'JS');\n myDictionary.print(); // logs \"key: p5 - value: JS\" to console\n}\n
Returns the number of key-value pairs currently stored in the Dictionary.
\n"],"line":[0,102],"itemtype":[0,"method"],"class":[0,"p5.TypedDict"],"chainable":[0,false],"return":[0,{"description":[0,"the number of key-value pairs in the Dictionary"],"type":[0,"Integer"]}],"example":[1,[[0,"\n\nfunction setup() {\n let myDictionary = createNumberDict(1, 10);\n myDictionary.create(2, 20);\n myDictionary.create(3, 30);\n print(myDictionary.size()); // logs 3 to the console\n}\n
Turns off the parts of the Friendly Error System (FES) that impact performance.
\nThe FES\ncan cause sketches to draw slowly because it does extra work behind the\nscenes. For example, the FES checks the arguments passed to functions,\nwhich takes time to process. Disabling the FES can significantly improve\nperformance by turning off these checks.
\n"],"line":[0,877],"itemtype":[0,"property"],"class":[0,"p5"],"example":[1,[[0,"\n\n// Disable the FES.\np5.disableFriendlyErrors = true;\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // The circle() function requires three arguments. The\n // next line would normally display a friendly error that\n // points this out. Instead, nothing happens and it fails\n // silently.\n circle(50, 50);\n\n describe('A gray square.');\n}\n
\nA function that's called repeatedly while the sketch runs.
\nDeclaring the function draw()
sets a code block to run repeatedly\nonce the sketch starts. It’s used to create animations and respond to\nuser inputs:
function draw() {\n // Code to run repeatedly.\n}\n
\nThis is often called the \"draw loop\" because p5.js calls the code in\ndraw()
in a loop behind the scenes. By default, draw()
tries to run\n60 times per second. The actual rate depends on many factors. The\ndrawing rate, called the \"frame rate\", can be controlled by calling\nframeRate(). The number of times draw()
\nhas run is stored in the system variable\nframeCount().
Code placed within draw()
begins looping after\nsetup() runs. draw()
will run until the user\ncloses the sketch. draw()
can be stopped by calling the\nnoLoop() function. draw()
can be resumed by\ncalling the loop() function.
\nfunction setup() {\n createCanvas(100, 100);\n\n // Paint the background once.\n background(200);\n\n describe(\n 'A white circle on a gray background. The circle follows the mouse as the user moves, leaving a trail.'\n );\n}\n\nfunction draw() {\n // Draw circles repeatedly.\n circle(mouseX, mouseY, 40);\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white circle on a gray background. The circle follows the mouse as the user moves.'\n );\n}\n\nfunction draw() {\n // Paint the background repeatedly.\n background(200);\n\n // Draw circles repeatedly.\n circle(mouseX, mouseY, 40);\n}\n
\n\n// Double-click the canvas to change the circle's color.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white circle on a gray background. The circle follows the mouse as the user moves. The circle changes color to pink when the user double-clicks.'\n );\n}\n\nfunction draw() {\n // Paint the background repeatedly.\n background(200);\n\n // Draw circles repeatedly.\n circle(mouseX, mouseY, 40);\n}\n\n// Change the fill color when the user double-clicks.\nfunction doubleClicked() {\n fill('deeppink');\n}\n
\nReturns true
if the draw loop is running and false
if not.
By default, draw() tries to run 60 times per\nsecond. Calling noLoop() stops\ndraw() from repeating. The draw loop can be\nrestarted by calling loop().
\nThe isLooping()
function can be used to check whether a sketch is\nlooping, as in isLooping() === true
.
\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle drawn against a gray background. When the user double-clicks, the circle stops or resumes following the mouse.');\n}\n\nfunction draw() {\n background(200);\n\n // Draw the circle at the mouse's position.\n circle(mouseX, mouseY, 20);\n}\n\n// Toggle the draw loop when the user double-clicks.\nfunction doubleClicked() {\n if (isLooping() === true) {\n noLoop();\n } else {\n loop();\n }\n}\n
\nResumes the draw loop after noLoop() has been\ncalled.
\nBy default, draw() tries to run 60 times per\nsecond. Calling noLoop() stops\ndraw() from repeating. The draw loop can be\nrestarted by calling loop()
.
The isLooping() function can be used to check\nwhether a sketch is looping, as in isLooping() === true
.
\nfunction setup() {\n createCanvas(100, 100);\n\n // Turn off the draw loop.\n noLoop();\n\n describe(\n 'A white half-circle on the left edge of a gray square. The circle starts moving to the right when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the circle's x-coordinate.\n let x = frameCount;\n\n // Draw the circle.\n circle(x, 50, 20);\n}\n\n// Resume the draw loop when the user double-clicks.\nfunction doubleClicked() {\n loop();\n}\n
\n\nlet startButton;\nlet stopButton;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create the button elements and place them\n // beneath the canvas.\n startButton = createButton('▶');\n startButton.position(0, 100);\n startButton.size(50, 20);\n stopButton = createButton('◾');\n stopButton.position(50, 100);\n stopButton.size(50, 20);\n\n // Set functions to call when the buttons are pressed.\n startButton.mousePressed(loop);\n stopButton.mousePressed(noLoop);\n\n // Slow the frame rate.\n frameRate(5);\n\n describe(\n 'A white circle moves randomly on a gray background. Play and stop buttons are shown beneath the canvas. The circle stops or starts moving when the user presses a button.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the circle's coordinates.\n let x = random(0, 100);\n let y = random(0, 100);\n\n // Draw the circle.\n // Normally, the circle would move from left to right.\n circle(x, y, 20);\n}\n
\nStops the code in draw() from running repeatedly.
\nBy default, draw() tries to run 60 times per\nsecond. Calling noLoop()
stops draw() from\nrepeating. The draw loop can be restarted by calling\nloop(). draw() can be run\nonce by calling redraw().
The isLooping() function can be used to check\nwhether a sketch is looping, as in isLooping() === true
.
\nfunction setup() {\n createCanvas(100, 100);\n\n // Turn off the draw loop.\n noLoop();\n\n describe('A white half-circle on the left edge of a gray square.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the circle's x-coordinate.\n let x = frameCount;\n\n // Draw the circle.\n // Normally, the circle would move from left to right.\n circle(x, 50, 20);\n}\n
\n\n// Double-click to stop the draw loop.\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(5);\n\n describe('A white circle moves randomly on a gray background. It stops moving when the user double-clicks.');\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the circle's coordinates.\n let x = random(0, 100);\n let y = random(0, 100);\n\n // Draw the circle.\n // Normally, the circle would move from left to right.\n circle(x, y, 20);\n}\n\n// Stop the draw loop when the user double-clicks.\nfunction doubleClicked() {\n noLoop();\n}\n
\n\nlet startButton;\nlet stopButton;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Create the button elements and place them\n // beneath the canvas.\n startButton = createButton('▶');\n startButton.position(0, 100);\n startButton.size(50, 20);\n stopButton = createButton('◾');\n stopButton.position(50, 100);\n stopButton.size(50, 20);\n\n // Set functions to call when the buttons are pressed.\n startButton.mousePressed(loop);\n stopButton.mousePressed(noLoop);\n\n // Slow the frame rate.\n frameRate(5);\n\n describe(\n 'A white circle moves randomly on a gray background. Play and stop buttons are shown beneath the canvas. The circle stops or starts moving when the user presses a button.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Calculate the circle's coordinates.\n let x = random(0, 100);\n let y = random(0, 100);\n\n // Draw the circle.\n // Normally, the circle would move from left to right.\n circle(x, y, 20);\n}\n
\nEnds a drawing group that contains its own styles and transformations.
\nBy default, styles such as fill() and\ntransformations such as rotate() are applied to\nall drawing that follows. The push() and pop()
\nfunctions can limit the effect of styles and transformations to a specific\ngroup of shapes, images, and text. For example, a group of shapes could be\ntranslated to follow the mouse without affecting the rest of the sketch:
// Begin the drawing group.\npush();\n\n// Translate the origin to the mouse's position.\ntranslate(mouseX, mouseY);\n\n// Style the face.\nnoStroke();\nfill('green');\n\n// Draw the face.\ncircle(0, 0, 60);\n\n// Style the eyes.\nfill('white');\n\n// Draw the left eye.\nellipse(-20, -20, 30, 20);\n\n// Draw the right eye.\nellipse(20, -20, 30, 20);\n\n// End the drawing group.\npop();\n\n// Draw a bug.\nlet x = random(0, 100);\nlet y = random(0, 100);\ntext('🦟', x, y);\n
\nIn the code snippet above, the bug's position isn't affected by\ntranslate(mouseX, mouseY)
because that transformation is contained\nbetween push() and pop()
. The bug moves around\nthe entire canvas as expected.
Note: push() and pop()
are always called as a\npair. Both functions are required to begin and end a drawing group.
push() and pop()
can also be nested to create\nsubgroups. For example, the code snippet above could be changed to give\nmore detail to the frog’s eyes:
// Begin the drawing group.\npush();\n\n// Translate the origin to the mouse's position.\ntranslate(mouseX, mouseY);\n\n// Style the face.\nnoStroke();\nfill('green');\n\n// Draw a face.\ncircle(0, 0, 60);\n\n// Style the eyes.\nfill('white');\n\n// Draw the left eye.\npush();\ntranslate(-20, -20);\nellipse(0, 0, 30, 20);\nfill('black');\ncircle(0, 0, 8);\npop();\n\n// Draw the right eye.\npush();\ntranslate(20, -20);\nellipse(0, 0, 30, 20);\nfill('black');\ncircle(0, 0, 8);\npop();\n\n// End the drawing group.\npop();\n\n// Draw a bug.\nlet x = random(0, 100);\nlet y = random(0, 100);\ntext('🦟', x, y);\n
\nIn this version, the code to draw each eye is contained between its own\npush() and pop()
functions. Doing so makes it\neasier to add details in the correct part of a drawing.
push() and pop()
contain the effects of the\nfollowing functions:
In WebGL mode, push() and pop()
contain the\neffects of a few additional styles:
\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the left circle.\n circle(25, 50, 20);\n\n // Begin the drawing group.\n push();\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Style the circle.\n strokeWeight(5);\n stroke('royalblue');\n fill('orange');\n\n // Draw the circle.\n circle(0, 0, 20);\n\n // End the drawing group.\n pop();\n\n // Draw the right circle.\n circle(75, 50, 20);\n\n describe(\n 'Three circles drawn in a row on a gray background. The left and right circles are white with thin, black borders. The middle circle is orange with a thick, blue border.'\n );\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(24);\n\n describe('A mosquito buzzes in front of a green frog. The frog follows the mouse as the user moves.');\n}\n\nfunction draw() {\n background(200);\n\n // Begin the drawing group.\n push();\n\n // Translate the origin to the mouse's position.\n translate(mouseX, mouseY);\n\n // Style the face.\n noStroke();\n fill('green');\n\n // Draw a face.\n circle(0, 0, 60);\n\n // Style the eyes.\n fill('white');\n\n // Draw the left eye.\n push();\n translate(-20, -20);\n ellipse(0, 0, 30, 20);\n fill('black');\n circle(0, 0, 8);\n pop();\n\n // Draw the right eye.\n push();\n translate(20, -20);\n ellipse(0, 0, 30, 20);\n fill('black');\n circle(0, 0, 8);\n pop();\n\n // End the drawing group.\n pop();\n\n // Draw a bug.\n let x = random(0, 100);\n let y = random(0, 100);\n text('🦟', x, y);\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Two spheres drawn on a gray background. The sphere on the left is red and lit from the front. The sphere on the right is a blue wireframe.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the red sphere.\n push();\n translate(-25, 0, 0);\n noStroke();\n directionalLight(255, 0, 0, 0, 0, -1);\n sphere(20);\n pop();\n\n // Draw the blue sphere.\n push();\n translate(25, 0, 0);\n strokeWeight(0.3);\n stroke(0, 0, 255);\n noFill();\n sphere(20);\n pop();\n}\n
\nA function that's called once to load assets before the sketch runs.
\nDeclaring the function preload()
sets a code block to run once\nautomatically before setup() or\ndraw(). It's used to load assets including\nmultimedia files, fonts, data, and 3D models:
function preload() {\n // Code to run before the rest of the sketch.\n}\n
\nFunctions such as loadImage(),\nloadFont(),\nloadJSON(), and\nloadModel() are guaranteed to either\nfinish loading or raise an error if they're called within preload()
.\nDoing so ensures that assets are available when the sketch begins\nrunning.
\nlet img;\n\n// Load an image and create a p5.Image object.\nfunction preload() {\n img = loadImage('/assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Draw the image.\n image(img, 0, 0);\n\n describe('A red brick wall.');\n}\n
\nBegins a drawing group that contains its own styles and transformations.
\nBy default, styles such as fill() and\ntransformations such as rotate() are applied to\nall drawing that follows. The push()
and pop()\nfunctions can limit the effect of styles and transformations to a specific\ngroup of shapes, images, and text. For example, a group of shapes could be\ntranslated to follow the mouse without affecting the rest of the sketch:
// Begin the drawing group.\npush();\n\n// Translate the origin to the mouse's position.\ntranslate(mouseX, mouseY);\n\n// Style the face.\nnoStroke();\nfill('green');\n\n// Draw the face.\ncircle(0, 0, 60);\n\n// Style the eyes.\nfill('white');\n\n// Draw the left eye.\nellipse(-20, -20, 30, 20);\n\n// Draw the right eye.\nellipse(20, -20, 30, 20);\n\n// End the drawing group.\npop();\n\n// Draw a bug.\nlet x = random(0, 100);\nlet y = random(0, 100);\ntext('🦟', x, y);\n
\nIn the code snippet above, the bug's position isn't affected by\ntranslate(mouseX, mouseY)
because that transformation is contained\nbetween push()
and pop(). The bug moves around\nthe entire canvas as expected.
Note: push()
and pop() are always called as a\npair. Both functions are required to begin and end a drawing group.
push()
and pop() can also be nested to create\nsubgroups. For example, the code snippet above could be changed to give\nmore detail to the frog’s eyes:
// Begin the drawing group.\npush();\n\n// Translate the origin to the mouse's position.\ntranslate(mouseX, mouseY);\n\n// Style the face.\nnoStroke();\nfill('green');\n\n// Draw a face.\ncircle(0, 0, 60);\n\n// Style the eyes.\nfill('white');\n\n// Draw the left eye.\npush();\ntranslate(-20, -20);\nellipse(0, 0, 30, 20);\nfill('black');\ncircle(0, 0, 8);\npop();\n\n// Draw the right eye.\npush();\ntranslate(20, -20);\nellipse(0, 0, 30, 20);\nfill('black');\ncircle(0, 0, 8);\npop();\n\n// End the drawing group.\npop();\n\n// Draw a bug.\nlet x = random(0, 100);\nlet y = random(0, 100);\ntext('🦟', x, y);\n
\nIn this version, the code to draw each eye is contained between its own\npush()
and pop() functions. Doing so makes it\neasier to add details in the correct part of a drawing.
push()
and pop() contain the effects of the\nfollowing functions:
In WebGL mode, push()
and pop() contain the\neffects of a few additional styles:
\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the left circle.\n circle(25, 50, 20);\n\n // Begin the drawing group.\n push();\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Style the circle.\n strokeWeight(5);\n stroke('royalblue');\n fill('orange');\n\n // Draw the circle.\n circle(0, 0, 20);\n\n // End the drawing group.\n pop();\n\n // Draw the right circle.\n circle(75, 50, 20);\n\n describe(\n 'Three circles drawn in a row on a gray background. The left and right circles are white with thin, black borders. The middle circle is orange with a thick, blue border.'\n );\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Slow the frame rate.\n frameRate(24);\n\n describe('A mosquito buzzes in front of a green frog. The frog follows the mouse as the user moves.');\n}\n\nfunction draw() {\n background(200);\n\n // Begin the drawing group.\n push();\n\n // Translate the origin to the mouse's position.\n translate(mouseX, mouseY);\n\n // Style the face.\n noStroke();\n fill('green');\n\n // Draw a face.\n circle(0, 0, 60);\n\n // Style the eyes.\n fill('white');\n\n // Draw the left eye.\n push();\n translate(-20, -20);\n ellipse(0, 0, 30, 20);\n fill('black');\n circle(0, 0, 8);\n pop();\n\n // Draw the right eye.\n push();\n translate(20, -20);\n ellipse(0, 0, 30, 20);\n fill('black');\n circle(0, 0, 8);\n pop();\n\n // End the drawing group.\n pop();\n\n // Draw a bug.\n let x = random(0, 100);\n let y = random(0, 100);\n text('🦟', x, y);\n}\n
\n\n// Click and drag the mouse to view the scene from different angles.\n\nfunction setup() {\n createCanvas(100, 100, WEBGL);\n\n describe(\n 'Two spheres drawn on a gray background. The sphere on the left is red and lit from the front. The sphere on the right is a blue wireframe.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Enable orbiting with the mouse.\n orbitControl();\n\n // Draw the red sphere.\n push();\n translate(-25, 0, 0);\n noStroke();\n directionalLight(255, 0, 0, 0, 0, -1);\n sphere(20);\n pop();\n\n // Draw the blue sphere.\n push();\n translate(25, 0, 0);\n strokeWeight(0.3);\n stroke(0, 0, 255);\n noFill();\n sphere(20);\n pop();\n}\n
\nRuns the code in draw() once.
\nBy default, draw() tries to run 60 times per\nsecond. Calling noLoop() stops\ndraw() from repeating. Calling redraw()
will\nexecute the code in the draw() function a set\nnumber of times.
The parameter, n
, is optional. If a number is passed, as in redraw(5)
,\nthen the draw loop will run the given number of times. By default, n
is\n1.
number of times to run draw(). Defaults to 1.
\n"],"type":[0,"Integer"],"optional":[0,true]}]]],"itemtype":[0,"method"],"class":[0,"p5"],"chainable":[0,false],"example":[1,[[0,"\n\n// Double-click the canvas to move the circle.\n\nlet x = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Turn off the draw loop.\n noLoop();\n\n describe(\n 'A white half-circle on the left edge of a gray square. The circle moves a little to the right when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw the circle.\n circle(x, 50, 20);\n\n // Increment x.\n x += 5;\n}\n\n// Run the draw loop when the user double-clicks.\nfunction doubleClicked() {\n redraw();\n}\n
\n\n// Double-click the canvas to move the circle.\n\nlet x = 0;\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Turn off the draw loop.\n noLoop();\n\n describe(\n 'A white half-circle on the left edge of a gray square. The circle hops to the right when the user double-clicks.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Draw the circle.\n circle(x, 50, 20);\n\n // Increment x.\n x += 5;\n}\n\n// Run the draw loop three times when the user double-clicks.\nfunction doubleClicked() {\n redraw(3);\n}\n
\nRemoves the sketch from the web page.
\nCalling remove()
stops the draw loop and removes any HTML elements\ncreated by the sketch, including the canvas. A new sketch can be\ncreated by using the p5() constructor, as in\nnew p5()
.
\n// Double-click to remove the canvas.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A white circle on a gray background. The circle follows the mouse as the user moves. The sketch disappears when the user double-clicks.'\n );\n}\n\nfunction draw() {\n // Paint the background repeatedly.\n background(200);\n\n // Draw circles repeatedly.\n circle(mouseX, mouseY, 40);\n}\n\n// Remove the sketch when the user double-clicks.\nfunction doubleClicked() {\n remove();\n}\n
\nA function that's called once when the sketch begins running.
\nDeclaring the function setup()
sets a code block to run once\nautomatically when the sketch starts running. It's used to perform\nsetup tasks such as creating the canvas and initializing variables:
function setup() {\n // Code to run once at the start of the sketch.\n}\n
\nCode placed in setup()
will run once before code placed in\ndraw() begins looping. If the\npreload() is declared, then setup()
will\nrun immediately after preload() finishes\nloading assets.
Note: setup()
doesn’t have to be declared, but it’s common practice to do so.
\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw the circle.\n circle(50, 50, 40);\n\n describe('A white circle on a gray background.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Paint the background once.\n background(200);\n\n describe(\n 'A white circle on a gray background. The circle follows the mouse as the user moves, leaving a trail.'\n );\n}\n\nfunction draw() {\n // Draw circles repeatedly.\n circle(mouseX, mouseY, 40);\n}\n
\n\nlet img;\n\nfunction preload() {\n img = loadImage('/assets/bricks.jpg');\n}\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Draw the image.\n image(img, 0, 0);\n\n describe(\n 'A white circle on a brick wall. The circle follows the mouse as the user moves, leaving a trail.'\n );\n}\n\nfunction draw() {\n // Style the circle.\n noStroke();\n\n // Draw the circle.\n circle(mouseX, mouseY, 10);\n}\n
\nएक स्ट्रिंग
स्थिरांक जिसका उपयोग angleMode() सेट करने के लिए किया जाता है।
डिफ़ॉल्ट रूप से, rotate() और sin() जैसे फ़ंक्शन रेडियन की इकाइयों में मापे गए कोणों की अपेक्षा करें। angleMode()
को कॉल करने से यह सुनिश्चित होता है कि कोणों को डिग्री की इकाइयों में मापा जाता है।
ध्यान दें: TWO_PI
रेडियंस 360˚ के बराबर है।
\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw a red arc from 0 to HALF_PI radians.\n fill(255, 0, 0);\n arc(50, 50, 80, 80, 0, HALF_PI);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Draw a blue arc from 90˚ to 180˚.\n fill(0, 0, 255);\n arc(50, 50, 80, 80, 90, 180);\n\n describe('The bottom half of a circle drawn on a gray background. The bottom-right quarter is red. The bottom-left quarter is blue.');\n}\n
\nएक संख्या
स्थिरांक जो लगभग 1.5708 है।
HALF_PI
गणितीय स्थिरांक π का आधा मान है। यह कई कार्यों के लिए उपयोगी है जिनमें घूर्णन और दोलन शामिल हैं। उदाहरण के लिए, rotate(HALF_PI)
को कॉल करने से निर्देशांक प्रणाली HALF_PI
रेडियंस घूमती है, जो एक चौथाई मोड़ (90˚) है।
नोट: TWO_PI
रेडियन बराबर 360˚, PI
रेडियन बराबर 180˚, HALF_PI
रेडियन बराबर 90˚, और QUARTER_PI
रेडियन बराबर 45˚ .
\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw an arc from 0 to HALF_PI.\n arc(50, 50, 80, 80, 0, HALF_PI);\n\n describe('The bottom-right quarter of a circle drawn in white on a gray background.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a line.\n line(0, 0, 40, 0);\n\n // Rotate a quarter turn.\n rotate(HALF_PI);\n\n // Draw the same line, rotated.\n line(0, 0, 40, 0);\n\n describe('Two black lines on a gray background. One line extends from the center to the right. The other line extends from the center to the bottom.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A red circle and a blue circle oscillate from left to right on a gray background. The red circle appears to chase the blue circle.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Calculate the x-coordinates.\n let x1 = 40 * sin(frameCount * 0.05);\n let x2 = 40 * sin(frameCount * 0.05 + HALF_PI);\n\n // Style the oscillators.\n noStroke();\n\n // Draw the red oscillator.\n fill(255, 0, 0);\n circle(x1, 0, 20);\n\n // Draw the blue oscillator.\n fill(0, 0, 255);\n circle(x2, 0, 20);\n}\n
\nएक संख्या
स्थिरांक जो लगभग 0.7854 है।
QUARTER_PI
गणितीय स्थिरांक π का एक-चौथाई मान है। यह कई कार्यों के लिए उपयोगी है जिनमें घूर्णन और दोलन शामिल हैं। उदाहरण के लिए, rotate(QUARTER_PI)
को कॉल करने से निर्देशांक प्रणाली QUARTER_PI
रेडियन घूमती है, जो एक मोड़ (45˚) का आठवां हिस्सा है।
ध्यान दें: TWO_PI
रेडियन बराबर 360˚, PI
रेडियन बराबर 180˚, HALF_PI
रेडियन बराबर 90˚, और QUARTER_PI< /code> रेडियन 45˚ के बराबर है।
\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw an arc from 0 to QUARTER_PI.\n arc(50, 50, 80, 80, 0, QUARTER_PI);\n\n describe('A one-eighth slice of a circle drawn in white on a gray background.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a line.\n line(0, 0, 40, 0);\n\n // Rotate an eighth turn.\n rotate(QUARTER_PI);\n\n // Draw the same line, rotated.\n line(0, 0, 40, 0);\n\n describe('Two black lines that form a \"V\" opening towards the bottom-right corner of a gray square.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A red circle and a blue circle oscillate from left to right on a gray background. The red circle appears to chase the blue circle.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Calculate the x-coordinates.\n let x1 = 40 * sin(frameCount * 0.05);\n let x2 = 40 * sin(frameCount * 0.05 + QUARTER_PI);\n\n // Style the oscillators.\n noStroke();\n\n // Draw the red oscillator.\n fill(255, 0, 0);\n circle(x1, 0, 20);\n\n // Draw the blue oscillator.\n fill(0, 0, 255);\n circle(x2, 0, 20);\n}\n
\nएक स्ट्रिंग
स्थिरांक जिसका उपयोग angleMode() सेट करने के लिए किया जाता है।
डिफ़ॉल्ट रूप से, rotate() और sin() जैसे फ़ंक्शन की इकाइयों में मापे गए कोणों की अपेक्षा करें रेडियंस. angleMode(RADIANS)
को कॉल करने से यह सुनिश्चित होता है कि कोणों को रेडियन की इकाइयों में मापा जाता है। ऐसा करना उपयोगी हो सकता है यदि angleMode() को DEGREES पर सेट किया गया है।
नोट: TWO_PI
रेडियंस 360˚ के बराबर है।
\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Use degrees.\n angleMode(DEGREES);\n\n // Draw a red arc from 0˚ to 90˚.\n fill(255, 0, 0);\n arc(50, 50, 80, 80, 0, 90);\n\n // Use radians.\n angleMode(RADIANS);\n\n // Draw a blue arc from HALF_PI to PI.\n fill(0, 0, 255);\n arc(50, 50, 80, 80, HALF_PI, PI);\n\n describe('The bottom half of a circle drawn on a gray background. The bottom-right quarter is red. The bottom-left quarter is blue.');\n}\n
\nएक संख्या
स्थिरांक जो लगभग 6.2382 है।
TAU
गणितीय स्थिरांक π का मान दोगुना है। यह कई कार्यों के लिए उपयोगी है जिनमें घूर्णन और दोलन शामिल हैं। उदाहरण के लिए, rotate(TAU)
को कॉल करने से निर्देशांक प्रणाली TAU
रेडियंस घूमती है, जो एक पूर्ण मोड़ (360˚) है। TAU
और TWO_PI
बराबर हैं।
ध्यान दें: TAU
रेडियन बराबर 360˚, PI
रेडियन बराबर 180˚, HALF_PI
रेडियन बराबर 90˚, और QUARTER_PI< /code> रेडियन 45˚ के बराबर है।
\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw an arc from 0 to TAU.\n arc(50, 50, 80, 80, 0, TAU);\n\n describe('A white circle drawn on a gray background.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a line.\n line(0, 0, 40, 0);\n\n // Rotate a full turn.\n rotate(TAU);\n\n // Style the second line.\n strokeWeight(5);\n\n // Draw the same line, shorter and rotated.\n line(0, 0, 20, 0);\n\n describe(\n 'Two horizontal black lines on a gray background. A thick line extends from the center toward the right. A thin line extends from the end of the thick line.'\n );\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A red circle with a blue center oscillates from left to right on a gray background.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Calculate the x-coordinates.\n let x1 = 40 * sin(frameCount * 0.05);\n let x2 = 40 * sin(frameCount * 0.05 + TAU);\n\n // Style the oscillators.\n noStroke();\n\n // Draw the red oscillator.\n fill(255, 0, 0);\n circle(x1, 0, 20);\n\n // Draw the blue oscillator, smaller.\n fill(0, 0, 255);\n circle(x2, 0, 10);\n}\n
\nएक संख्या
स्थिरांक जो लगभग 6.2382 है।
TWO_PI
गणितीय स्थिरांक π का दोगुना है। यह कई कार्यों के लिए उपयोगी है जिनमें घूर्णन और दोलन शामिल हैं। उदाहरण के लिए, rotate(TWO_PI)
को कॉल करने से निर्देशांक प्रणाली TWO_PI
रेडियंस घूमती है, जो एक पूर्ण मोड़ (360˚) है। TWO_PI
और TAU
बराबर हैं।
ध्यान दें: TWO_PI
रेडियन बराबर 360˚, PI
रेडियन बराबर 180˚, HALF_PI
रेडियन बराबर 90˚, और QUARTER_PI
रेडियन 45˚ के बराबर है।
\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw an arc from 0 to TWO_PI.\n arc(50, 50, 80, 80, 0, TWO_PI);\n\n describe('A white circle drawn on a gray background.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Draw a line.\n line(0, 0, 40, 0);\n\n // Rotate a full turn.\n rotate(TWO_PI);\n\n // Style the second line.\n strokeWeight(5);\n\n // Draw the same line, shorter and rotated.\n line(0, 0, 20, 0);\n\n describe(\n 'Two horizontal black lines on a gray background. A thick line extends from the center toward the right. A thin line extends from the end of the thick line.'\n );\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'A red circle with a blue center oscillates from left to right on a gray background.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Translate the origin to the center.\n translate(50, 50);\n\n // Calculate the x-coordinates.\n let x1 = 40 * sin(frameCount * 0.05);\n let x2 = 40 * sin(frameCount * 0.05 + TWO_PI);\n\n // Style the oscillators.\n noStroke();\n\n // Draw the red oscillator.\n fill(255, 0, 0);\n circle(x1, 0, 20);\n\n // Draw the blue oscillator, smaller.\n fill(0, 0, 255);\n circle(x2, 0, 10);\n}\n
\nPrints a message to the web browser's console.
\nThe console\nobject is helpful for printing messages while debugging. For example, it's\ncommon to add a console.log()
statement while studying how a section of\ncode works:
if (isPlaying === true) {\n // Add a console.log() statement to make sure this block of code runs.\n console.log('Got here!');\n\n // Game logic.\n}\n
\nconsole.error()
is helpful for tracking errors because it prints\nformatted messages. For example, it's common to encounter errors when\nloading media assets:
// Logs an error message with special formatting.\nfunction handleFailure(error) {\n console.error('Oops!', error);\n}\n\n// Try to load an image and call handleError() if it fails.\nloadImage('https://example.com/cat.jpg', handleImage, handleError);\n
\n"],"line":[0,2028],"itemtype":[0,"property"],"class":[0,"p5"],"example":[1,[[0,"\n\nfunction setup() {\n noCanvas();\n\n // Prints \"Hello!\" to the console.\n console.log('Hello!');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Try to load an image from a fake URL.\n // Call handleError() if the image fails to load.\n loadImage('https://example.com/cat.jpg', handleImage, handleError);\n}\n\n// Displays the image.\nfunction handleImage(img) {\n image(img, 0, 0);\n\n describe('A cat on a gray background.');\n}\n\n// Prints the error.\nfunction handleError(error) {\n console.error('Oops!', error);\n\n describe('A gray square.');\n}\n
\nA list that keeps several pieces of data in order.
\nArrays are helpful for storing related data. They can contain data of any\ntype. For example, an array could contain a list of someone's favorite\ncolors as strings. Arrays are created as follows:
\nlet myArray = ['deeppink', 'darkorchid', 'magenta'];\n
\nEach piece of data in an array is called an element. Each element has an\naddress, or index, within its array. The variable myArray
refers to an\narray with three String elements, 'deeppink'
,\n'darkorchid'
, and 'magenta'
. Arrays are zero-indexed, which means\nthat 'deeppink'
is at index 0, 'darkorchid'
is at index 1, and\n'magenta'
is at index 2. Array elements can be accessed using their\nindices as follows:
let zeroth = myArray[0]; // 'deeppink'\nlet first = myArray[1]; // 'darkorchid'\nlet second = myArray[2]; // 'magenta'\n
\nElements can be added to the end of an array by calling the\npush()\nmethod as follows:
\nmyArray.push('lavender');\n\nlet third = myArray[3]; // 'lavender'\n
\nSee MDN\nfor more information about arrays.
\n"],"line":[0,1140],"itemtype":[0,"property"],"class":[0,"p5"],"example":[1,[[0,"\n\n// Declare the variable xCoordinates and assign it an array\n// with three numeric elements.\nlet xCoordinates = [25, 50, 75];\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'Three white circles drawn in a horizontal line on a gray background.'\n );\n}\n\nfunction draw() {\n background(200);\n\n // Access the element at index 0, which is 25.\n circle(xCoordinates[0], 50, 20);\n\n // Access the element at index 1, which is 50.\n circle(xCoordinates[1], 50, 20);\n\n // Access the element at index 2, which is 75.\n circle(xCoordinates[2], 50, 20);\n}\n
\n\n// Declare the variable xCoordinates and assign it an array with three numeric elements.\nlet xCoordinates = [20, 40, 60];\n\n// Add another element to the end of the array.\nxCoordinates.push(80);\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('Four white circles drawn in a horizontal line on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access the element at index 0, which is 20.\n circle(xCoordinates[0], 50, 20);\n\n // Access the element at index 1, which is 40.\n circle(xCoordinates[1], 50, 20);\n\n // Access the element at index 2, which is 60.\n circle(xCoordinates[2], 50, 20);\n\n // Access the element at index 3, which is 80.\n circle(xCoordinates[3], 50, 20);\n}\n
\n\n// Declare the variable xCoordinates and assign it an empty array.\nlet xCoordinates = [];\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Add elements to the array using a loop.\n for (let x = 20; x < 100; x += 20) {\n xCoordinates.push(x);\n }\n\n describe('Four white circles drawn in a horizontal line on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access the element at index i and use it to draw a circle.\n for (let i = 0; i < xCoordinates.length; i += 1) {\n circle(xCoordinates[i], 50, 20);\n }\n}\n
\n\n// Declare the variable xCoordinates and assign it an empty array.\nlet xCoordinates = [];\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Add elements to the array using a loop.\n for (let x = 20; x < 100; x += 20) {\n xCoordinates.push(x);\n }\n\n describe('Four white circles drawn in a horizontal line on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access each element of the array and use it to draw a circle.\n for (let x of xCoordinates) {\n circle(x, 50, 20);\n }\n}\n
\n\n// Declare the variable xCoordinates and assign it an empty array.\nlet xCoordinates = [];\n\nfunction setup() {\n createCanvas(100, 100);\n\n // Add elements to the array using a loop.\n for (let x = 20; x < 100; x += 20) {\n xCoordinates.push(x);\n }\n\n describe(\n 'Four white circles in a horizontal line on a gray background. The circles move randomly.'\n );\n}\n\nfunction draw() {\n background(200);\n\n for (let i = 0; i < xCoordinates.length; i += 1) {\n // Update the element at index i.\n xCoordinates[i] += random(-1, 1);\n\n // Use the element at index i to draw a circle.\n circle(xCoordinates[i], 50, 20);\n }\n}\n
\nA value that's either true
or false
.
Boolean
values help to make decisions in code. They appear any time a\nlogical condition is checked. For example, the condition\n\"Is a mouse button being pressed?\" must be either true
or\nfalse
:
// If the user presses the mouse, draw a circle at\n// the mouse's location.\nif (mouseIsPressed === true) {\n circle(mouseX, mouseY, 20);\n}\n
\nThe if
statement checks whether\nmouseIsPressed is true
and draws a\ncircle if it is. Boolean
expressions such as mouseIsPressed === true
\nevaluate to one of the two possible Boolean
values: true
or false
.
The ===
operator (EQUAL) checks whether two values are equal. If they\nare, the expression evaluates to true
. Otherwise, it evaluates to\nfalse
.
Note: There's also a ==
operator with two =
instead of three. Don't use\nit.
The mouseIsPressed system variable is\nalways true
or false
, so the code snippet above could also be written\nas follows:
if (mouseIsPressed) {\n circle(mouseX, mouseY, 20);\n}\n
\nThe !==
operator (NOT EQUAL) checks whether two values are not equal, as\nin the following example:
if (2 + 2 !== 4) {\n text('War is peace.', 50, 50);\n}\n
\nStarting from the left, the arithmetic expression 2 + 2
produces the\nvalue 4
. The Boolean
expression 4 !== 4
evaluates to false
because\n4
is equal to itself. As a result, the if
statement's body is skipped.
Note: There's also a !=
operator with one =
instead of two. Don't use\nit.
The Boolean
operator &&
(AND) checks whether two expressions are both\ntrue
:
if (keyIsPressed === true && key === 'p') {\n text('You pressed the \"p\" key!', 50, 50);\n}\n
\nIf the user is pressing a key AND that key is 'p'
, then a message will\ndisplay.
The Boolean
operator ||
(OR) checks whether at least one of two\nexpressions is true
:
if (keyIsPressed === true || mouseIsPressed === true) {\n text('You did something!', 50, 50);\n}\n
\nIf the user presses a key, or presses a mouse button, or both, then a\nmessage will display.
\nThe following truth table summarizes a few common scenarios with &&
and\n||
:
true && true // true\ntrue && false // false\nfalse && false // false\ntrue || true // true\ntrue || false // true\nfalse || false // false\n
\nThe relational operators >
, << code=\"\">,
>=
, and <=< code=\"\"> also produce
<>Boolean
\nvalues:=<>
2 > 1 // true\n2 < 1 // false\n2 >= 2 // true\n2 <= 2=\"\" true=\"\" <=\"\" code=\"\"/>
\nSee if for more information about if
statements and\nNumber for more information about Number
s.
\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square. When the user presses the mouse, a circle appears at that location.');\n}\n\nfunction draw() {\n background(200);\n\n // If the user presses the mouse, draw a circle at that location.\n if (mouseIsPressed) {\n circle(mouseX, mouseY, 20);\n }\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square. When the user presses the mouse, a circle appears at that location.');\n}\n\nfunction draw() {\n background(200);\n\n // If the user presses the mouse, draw a circle at that location.\n if (mouseIsPressed === true) {\n circle(mouseX, mouseY, 20);\n }\n}\n
\n\n// Click on the canvas to begin detecting key presses.\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A gray square that turns pink when the user presses the mouse or a key.');\n}\n\nfunction draw() {\n background(200);\n\n // If the user presses the mouse, change the background color.\n if (mouseIsPressed === true || keyIsPressed === true) {\n background('deeppink');\n }\n}\n
\n\n// Click the canvas to begin detecting key presses.\n\n// Create a Boolean variable.\nlet isPlaying = false;\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe(\n 'The message \"Begin?\\nY or N\" written in green on a black background. The message \"Good luck!\" appears when they press the \"y\" key.'\n );\n}\n\nfunction draw() {\n background(0);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textFont('Courier New');\n textSize(16);\n fill(0, 255, 0);\n\n // Display a different message when the user begins playing.\n if (isPlaying === false) {\n text('Begin?', 50, 40);\n text('Y or N', 50, 60);\n } else {\n text('Good luck!', 50, 50);\n }\n}\n\n// Start playing when the user presses the 'y' key.\nfunction keyPressed() {\n if (key === 'y') {\n isPlaying = true;\n }\n}\n
\nA number that can be positive, negative, or zero.
\nThe Number
data type is useful for describing values such as position,\nsize, and color. A number can be an integer such as 20 or a decimal number\nsuch as 12.34. For example, a circle's position and size can be described\nby three numbers:
circle(50, 50, 20);\n
\ncircle(50, 50, 12.34);\n
\nNumbers support basic arithmetic and follow the standard order of\noperations: Parentheses, Exponents, Multiplication, Division, Addition,\nand Subtraction (PEMDAS). For example, it's common to use arithmetic\noperators with p5.js' system variables that are numbers:
\n// Draw a circle at the center.\ncircle(width / 2, height / 2, 20);\n
\n// Draw a circle that moves from left to right.\ncircle(frameCount * 0.01, 50, 20);\n
\nHere's a quick overview of the arithmetic operators:
\n1 + 2 // Add\n1 - 2 // Subtract\n1 * 2 // Multiply\n1 / 2 // Divide\n1 % 2 // Remainder\n1 ** 2 // Exponentiate\n
\nIt's common to update a number variable using arithmetic. For example, an\nobject's location can be updated like so:
\nx = x + 1;\n
\nThe statement above adds 1 to a variable x
using the +
operator. The\naddition assignment operator +=
expresses the same idea:
x += 1;\n
\nHere's a quick overview of the assignment operators:
\nx += 2 // Addition assignment\nx -= 2 // Subtraction assignment\nx *= 2 // Multiplication assignment\nx /= 2 // Division assignment\nx %= 2 // Remainder assignment\n
\nNumbers can be compared using the\nrelational operators\n>
, << code=\"\">,
>=
, <=< code=\"\">,
<>===
, and !==
. For example, a sketch's\nframeCount can be used as a timer:=<>
if (frameCount > 1000) {\n text('Game over!', 50, 50);\n}\n
\nAn expression such as frameCount > 1000
evaluates to a Boolean
value\nthat's either true
or false
. The relational operators all produce\nBoolean
values:
2 > 1 // true\n2 < 1 // false\n2 >= 2 // true\n2 <= 2=\"\" true=\"\" !=\"=\" false=\"\" <=\"\" code=\"\"/>
\nSee Boolean for more information about comparisons and conditions.
\nNote: There are also ==
and !=
operators with one fewer =
. Don't use them.
Expressions with numbers can also produce special values when something\ngoes wrong:
\nsqrt(-1) // NaN\n1 / 0 // Infinity\n
\nThe value NaN
stands for\nNot-A-Number.\nNaN
appears when calculations or conversions don't work. Infinity
is a\nvalue that's larger than any number. It appears during certain\ncalculations.
\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Draw a circle at the center.\n circle(50, 50, 70);\n\n // Draw a smaller circle at the center.\n circle(width / 2, height / 2, 30);\n\n describe('Two concentric, white circles drawn on a gray background.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle travels from left to right on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n circle(frameCount * 0.05, 50, 20);\n}\n
\nA container for data that's stored as key-value pairs.
\nObjects help to organize related data of any type, including other objects.\nA value stored in an object can be accessed by name, called its key. Each\nkey-value pair is called a \"property.\" Objects are similar to dictionaries\nin Python and maps in Java and Ruby.
\nFor example, an object could contain the location, size, and appearance of\na dog:
\n// Declare the dog variable and assign it an object.\nlet dog = { x: 50, y: 50, size: 20, emoji: '🐶' };\n\n// Style the text.\ntextAlign(CENTER, CENTER);\ntextSize(dog.size);\n\n// Draw the dog.\ntext(dog.emoji, dog.x, dog.y);\n
\nThe variable dog
is assigned an object with four properties. Objects\nare declared with curly braces {}
. Values can be accessed using the dot\noperator, as in dog.size
. In the example above, the key size
\ncorresponds to the value 20
. Objects can also be empty to start:
// Declare a cat variable and assign it an empty object.\nlet cat = {};\n\n// Add properties to the object.\ncat.x = 50;\ncat.y = 50;\ncat.size = 20;\ncat.emoji = '🐱';\n\n// Style the text.\ntextAlign(CENTER, CENTER);\ntextSize(cat.size);\n\n// Draw the cat.\ntext(cat.emoji, cat.x, cat.y);\n
\nAn object's data can be updated while a sketch runs. For example, the cat
\ncould run away from the dog
by updating its location:
// Run to the right.\ncat.x += 5;\n
\nIf needed, an object's values can be accessed using square brackets []
\nand strings instead of dot notation:
// Run to the right.\ncat[\"x\"] += 5;\n
\nThis syntax can be helpful when the key's name has spaces, as in\ncat['height (m)']
.
\n// Declare the variable data and assign it an object with three properties.\nlet data = { x: 50, y: 50, d: 20 };\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access the object's values using the . operator.\n circle(data.x, data.y, data.d);\n}\n
\n\n// Declare the variable data and assign it an object with three properties.\nlet data = { x: 50, y: 50, d: 20 };\n\n// Add another property for color.\ndata.color = 'deeppink';\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A pink circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access the object's values using the . operator.\n fill(data.color);\n circle(data.x, data.y, data.d);\n}\n
\n\n// Declare the variable data and assign it an object with three properties.\nlet data = { x: 50, y: 50, d: 20 };\n\n// Add another property for color.\ndata.color = 'deeppink';\n\nfunction setup() {\n createCanvas(100, 100);\n\n describe('A white circle on a gray background.');\n}\n\nfunction draw() {\n background(200);\n\n // Access the object's values using the . operator.\n fill(data.color);\n circle(data.x, data.y, data.d);\n\n // Update the object's x and y properties.\n data.x += random(-1, 1);\n data.y += random(-1, 1);\n}\n
\nA sequence of text characters.
\nThe String
data type is helpful for working with text. For example, a\nstring could contain a welcome message:
// Use a string literal.\ntext('Hello!', 10, 10);\n
\n// Create a string variable.\nlet message = 'Hello!';\n\n// Use the string variable.\ntext(message, 10, 10);\n
\nThe most common way to create strings is to use some form of quotations as\nfollows:
\ntext(\"hi\", 50, 50);\n
\ntext('hi', 50, 50);\n
\ntext(`hi`, 50, 50);\n
\n\"hi\"
, 'hi'
, and hi
are all string literals. A \"literal\" means a\nvalue was actually written, as in text('hi', 50, 50)
. By contrast,\ntext(message, 50, 50)
uses the variable message
, so it isn't a string\nliteral.
Single quotes ''
and double quotes \"\"
mean the same thing. It's nice to\nhave the option for cases when a string contains one type of quote:
text(\"What's up?\", 50, 50);\n
\ntext('Air quotes make you look \"cool.\"', 50, 50);\n
\nBackticks ``
create template literals. Template literals have many uses.\nFor example, they can contain both single and double quotes as needed:
text(`\"Don't you forget about me\"`, 10, 10);\n
\nTemplate literals are helpful when strings are created from variables like\nso:
\nlet size = random(10, 20);\ncircle(50, 50, size);\n\ntext(`The circle's diameter is ${size} pixels.`, 10, 10);\n
\nThe size
variable's value will replace ${size}
when the string is\ncreated. ${}
is a placeholder for any value. That means an expression can\nbe used, as in ${round(PI, 3)}
. All of the following are valid template\nliterals:
text(`π is about ${round(PI, 2)} pixels.`, 10, 10);\ntext(`It's ${mouseX < width / 2} that I'm on the left half of the canvas.`, 10, 30);\n
\nTemplate literals can include several variables:
\nlet x = random(0, 100);\nlet y = random(0, 100);\nlet size = random(10, 20);\ncircle(x, y, size);\n\ntext(`The circle at (${x}, ${y}) has a diameter of ${size} pixels.`, 10, 10);\n
\nTemplate literals are also helpful for creating multi-line text like so:
\nlet poem = `My sketch doesn't run;\nit waits for me patiently\nwhile bugs point the way.`;\n\ntext(poem, 10, 10);\n
\n"],"line":[0,710],"itemtype":[0,"property"],"class":[0,"p5"],"example":[1,[[0,"\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(20);\n\n // Display a welcome message.\n text('Hello!', 50, 50);\n\n describe('The text \"Hello!\" written on a gray background.');\n}\n
\n\nfunction setup() {\n createCanvas(100, 100);\n\n background(200);\n\n // Style the text.\n textAlign(CENTER, CENTER);\n textSize(20);\n\n // Create a string variable.\n let world = '🌍';\n\n // Display a welcome message using a template string.\n text(`Hello, ${world}!`, 50, 50);\n\n describe('The text \"Hello, 🌍!\" written on a gray background.');\n}\n
\n