चर और बदलाव

इस ट्यूटोरियल का अनुसरण करें और एक animated landscape बनाएं, जबकि आप p5.js में चर और मोशन बनाने की मूल बातें सीखते हैं।

इस ट्यूटोरियल में आप:

• p5.js स्केच में चर को declare, initialize और update करेंगे
• कैनवास पर मोशन बनाने के लिए p5.js shape कार्य में चर, ऑपरेटर और random() का उपयोग करेंगे
• p5.js प्रोजैक्ट में linear और random दोनों प्रकार की मोशन जोड़ेंगे

आवश्यक पूर्व ज्ञान:

• Setting Up Your Environment
• Get Started
• (वैकल्पिक) Field Guide to Debugging

शुरू करने से पहले, आपको निम्नलिखित चीज़ें आनी चाहिए:

• p5.js Web Editor में लॉग इन करना और एक नया प्रोजैक्ट सेव करना
• कैनवास का आकार और background रंग बदलना
  • background(), createCanvas(), setup(), draw()
• आकृतियाँ और टेक्स्ट जोड़ना और कस्टमाइज़ करना
  • 2D प्रिमिटिव आकृतियाँ जैसे circle() और rect()
  • text(), fill(), stroke(), textSize()
• mouseX और mouseY का उपयोग करके सरल इंटरैक्टिविटी जोड़ना
• कोड में टिप्पणी लिखना
• error messages को पढ़ना और उन्हें ठीक करना

स्टेप 1: कहाँ से शुरू करें चुनें

p5.js Web Editor में लॉग इन करें और निम्नलिखित विकल्पों में से एक चुनें:

• यदि आपने हमारे पिछले Get Started Tutorial का अनुसरण किया है:
  • अपने interactive landscape को डुप्लिकेट करें और उसे एक नया नाम दें।
    • अपना interactive landscape खोलें, File पर क्लिक करें, फिर Duplicate पर।
    • इसका नाम कुछ ऐसा बदलें जैसे “Animated Landscape।”
  • स्टेप 3 पर जाएं।
• यदि आप शुरू से शुरू कर रहे हैं:
  • इस टेम्पलेट का उपयोग करें जिसमें कोड है जो कैनवास पर आकृतियों और टेक्स्ट को स्थित करने में मदद करता है:
  • टेम्पलेट को डुप्लिकेट करें और उसे एक नया नाम दें।
    • इस टेम्पलेट लिंक को खोलें, File पर क्लिक करें, फिर Duplicate पर।
    • इसका नाम कुछ ऐसा बदलें जैसे “Animated Landscape।”
  • आप टेम्पलेट के बिना भी एक नया p5.js प्रोजैक्ट खोल सकते हैं, उसे “Animated Landscape” नाम दें और सेव करें।

    • यदि आप helper कोड का उपयोग करना चाहते हैं तो निम्नलिखित लाइनों को draw() कार्य में कॉपी करें:

      //displays the x and y position of the mouse on the canvas
      fill(255) //white text
      text(`${mouseX}, ${mouseY}`, 20, 20);

यदि आपने टेम्पलेट को डुप्लिकेट किया है, तो आपका कोड इस प्रकार दिखना चाहिए:

कोड की लाइन text(`${mouseX}, ${mouseY}`, 20, 20); माउस पॉइंटर के x- और y-निर्देशांक को एक निर्देशांक जोड़ी x, y के रूप में प्रदर्शित करती है। पहली संख्या, चर mouseX में स्टोर की गई value, माउस पॉइंटर के x-निर्देशांक को दर्शाती है जब वह कैनवास पर चलता है। दूसरी संख्या, चर mouseY में स्टोर की गई value, माउस पॉइंटर के y-निर्देशांक को दर्शाती है।

टिप्पणी के बारे में अधिक जानने के लिए इस reference पर जाएं या यह वीडियो देखें।

चर

चर अपने अंदर values स्टोर करते हैं जिनका उपयोग हम अपने स्केच में कर सकते हैं। चर बहुत उपयोगी होते हैं जब आपके स्केच में ऐसे तत्व जोड़ने हों जो समय के साथ बदलें। इनका उपयोग गणनाओं, संदेशों, कार्य तर्क के रूप में, और बहुत कुछ में किया जा सकता है!

mouseX और mouseY ऐसे चर हैं जो p5.js लाइब्रेरी में पहले से बने हैं। ये माउस पॉइंटर के x- और y-निर्देशांक को स्टोर करते हैं जब उसे कैनवास पर ड्रैग किया जाता है। Get Started ट्यूटोरियल में, आपने एक interactive landscape बनाया था जहाँ mouseX और mouseY को एक ladybug या अन्य emoji के x- और y-निर्देशांक के रूप में उपयोग किया गया था। इससे emoji माउस पॉइंटर का अनुसरण करता था जब उसे कैनवास पर ड्रैग किया जाता था, जिससे आपकी कलाकृति इंटरैक्टिव बन गई!

ऊपर दिए गए टेम्पलेट में, आप mouseX और mouseY का उपयोग करके text() कार्य की मदद से माउस के x- और y-निर्देशांक को कैनवास पर प्रिंट करते हैं। चर को text() कार्य और string interpolation (उदाहरण 2) का उपयोग करके कैनवास पर टेक्स्ट के साथ प्रदर्शित किया जा सकता है।

स्ट्रिंग Interpolation

Get Started में, आपने सीखा कि स्ट्रिंग data types होते हैं जो हमेशा quotation marks ("") से घिरे होते हैं। चर और स्ट्रिंग को एक साथ उपयोग करने के लिए, हम template literals की मदद ले सकते हैं! Template literals backticks (`) से शुरू और खत्म होते हैं, quotation marks ("") की जगह। आप backticks के बीच कोई भी character टाइप करके एक स्ट्रिंग बना सकते हैं जैसे इस उदाहरण में। आप ${} placeholder का उपयोग करके और घुंघराले कोष्ठक के अंदर चर का नाम रखकर स्ट्रिंग में एक चर शामिल कर सकते हैं जैसे इस उदाहरण में।

string interpolation (उदाहरण 2), template literals, या p5.js reference पेज string पर जाकर अधिक जानें!

स्टेप 2: एक background लैंडस्केप बनाएं

• Background को रंग दें।
• लैंडस्केप आकृतियाँ जोड़ें और उन्हें रंग दें (सूरज या चंद्रमा, पहाड़, इमारतें, घर, पेड़ आदि)
• कोड के प्रत्येक सेक्शन का वर्णन करने वाली टिप्पणी जोड़ें।

कैनवास पर रंग और आकृतियों का उपयोग करने के बारे में अधिक जानकारी के लिए Get Started के स्टेप 4 - 6 देखें।

आपका कोड इस प्रकार दिख सकता है:

ऊपर दिया गया कोड लैंडस्केप में ऑब्जेक्ट बनाने के लिए circle() और triangle() आकृतियों का, और आकृतियों और outlines को रंग देने के लिए fill() और stroke() का उपयोग करता है।

• background() का उपयोग कैनवास के background का रंग बदलने के लिए किया जाता है।
• draw() कोड को बार-बार चलाता है। इससे draw() में अंत में आने वाली आकृतियाँ पहले आने वाली आकृतियों को overlap कर सकती हैं यदि वे पास-पास रखी जाएं।
  • अर्धचंद्र दो circle() आकृतियों को overlap करके बनाया गया था।
    • यह उदाहरण दो circles का उपयोग करता है जो overlap होकर अर्धचंद्र बनाते हैं।
  • पहाड़ दो overlapping triangle() आकृतियों का उपयोग करके बनाए गए (नीचे दिया गया diagram देखें)।
    • यह उदाहरण दिखाता है कि आप कैसे triangles को overlap करके अधिक विस्तृत पहाड़ बना सकते हैं।
• triangle() को कैनवास पर दिखने के लिए 3 बिंदुओं की स्थिति की आवश्यकता होती है। प्रत्येक बिंदु में एक x-निर्देशांक और एक y-निर्देशांक value होती है। पहली दो संख्याएँ पहले बिंदु के x- और y-निर्देशांक हैं (x_1, y₁), अगली दो संख्याएँ अगले बिंदु के निर्देशांक हैं (x_2, y₂), और अंतिम दो अंतिम बिंदु के निर्देशांक हैं (x_3, y₃)।

एक लेबल वाला diagram जो एक triangle को दर्शाता है जिसके तीन कोनों के निर्देशांक लेबल किए गए हैं: (x1, y1), (x2, y2), और (x3, y3)। diagram के ऊपर triangle कार्य का वाक्य - विन्यास प्रदर्शित है: "triangle(x1, y1, x2, y2, x3, y3);"

आपका लैंडस्केप ऊपर दिए गए कोड नमूने से बहुत भिन्न दिख सकता है। अपने स्केच में निम्नलिखित में से किसी भी आकृति का उपयोग करने में स्वतंत्र महसूस करें (अधिक जानने के लिए लिंक पर क्लिक करें): rect() | triangle() | ellipse() | circle() | line() | square() | quad() | point() | arc()

अपने प्रोजैक्ट में आकृतियों और रंगों का उपयोग करने के बारे में अधिक जानने के लिए निम्नलिखित resources पर जाएं: fill() | stroke() | background() | draw()

Field Guide to Debugging और The Coding Train के इस वीडियो में हाइलाइट की गई सामान्य errors से बचना सुनिश्चित करें।

स्टेप 3: Custom चर का उपयोग करके आकृतियाँ बनाएं

• ellipse() method का उपयोग करके कैनवास पर आकाश में एक सफेद बादल रखें।

  • घास के कोड के ठीक नीचे ये लाइनें जोड़ें:

    //cloud
    fill(255);
    ellipse(50, 50, 80, 40);

• cloudOneX नाम का एक custom चर बनाएं और उसमें संख्या 50 स्टोर करें – यह चर पूरे प्रोग्राम में सफेद बादल के x-निर्देशांक की value को स्टोर करेगा।

  • setup() से पहले ये लाइनें जोड़ें:

    //custom variable for x coordinate of cloud
    let cloudOneX = 50;

• ellipse(50, 50, 80, 40); में x-निर्देशांक को cloudOneX चर से बदलें।

  • कोड की यह लाइन अब इस प्रकार दिखनी चाहिए:

    ellipse(cloudOneX, 50, 80, 40);

आपका कोड इस प्रकार दिख सकता है:

ellipse() को कैनवास पर दिखने के लिए 4 numbers की आवश्यकता होती है। पहली दो संख्याएँ (x, y) केंद्र बिंदु के x- और y-निर्देशांक हैं। अंतिम दो संख्याएँ ellipse की pixel चौड़ाई और ऊँचाई बताती हैं।

चौड़ाई, ऊँचाई और (x,y) पर केंद्र बिंदु के लेबल के साथ एक ellipse का diagram। diagram के ऊपर ellipse कार्य का वाक्य - विन्यास प्रदर्शित है: "ellipse(x, y, width, height);"।

ऊपर दिए गए कोड में, बादल को ellipse() का उपयोग करके बनाया गया है, जिसमें cloudOneX (जिसमें संख्या 50 स्टोर है) इसके x-निर्देशांक के रूप में, 50 y-निर्देशांक के रूप में, 80 pixels की चौड़ाई, और 40 pixels की ऊँचाई है।

Custom चर

Custom चर ऐसी values स्टोर करते हैं, जैसे numbers या strings, जो बाद में बदल सकती हैं। चूंकि custom चर ऐसी values स्टोर करते हैं जो बदल सकती हैं, हम इनका उपयोग कैनवास पर आकृतियों के x- या y-निर्देशांक और आकार बदलने के लिए कर सकते हैं। जब किसी आकृति का x- या y-निर्देशांक बदलता है, तो वह चलती हुई दिखती है। इस स्टेप में:

• आपने ellipse() का उपयोग करके संख्या 50 को x-निर्देशांक के रूप में उपयोग करते हुए कैनवास पर एक सफेद बादल रखा;
• आपने setup(); से पहले cloudOneX नाम का एक custom चर declare किया
  • जब आप अपने प्रोग्राम में उपयोग करने के लिए custom चर बनाना चाहते हैं, तो आपको उन्हें एक नाम देना होगा और keyword let का उपयोग करके उन्हें declare करना होगा।
  • आप किसी भी नाम का उपयोग करके चर declare कर सकते हैं; हालांकि, ऐसा नाम उपयोग करना सबसे अच्छा है जो आपको याद रखने में मदद करे कि चर किसलिए उपयोग हो रहा है!
• आपने cloudOneX को संख्या 50 assign करके initialize किया।
  • assignment ऑपरेटर (=) का उपयोग करके एक value को चर में स्टोर किया जा सकता है – यह एक विशिष्ट चर को value assign करता है।
  • जब पहली बार किसी custom चर में value स्टोर की जाती है, तो इसे चर को initialize करना कहा जाता है।

JavaScript वाक्य - विन्यास के भागों को लेबल करने वाला एक diagram जिसमें चर को initialize और declare करना दिखाया गया है: "let" को "keyword that declares custom variables" के रूप में, "variable name" को "name" के रूप में, "=" को "assignment operator" के रूप में जो "assigns a value to the variable name", और "value" को "Any data type like a number or a string" के रूप में लेबल किया गया है।

अंत में, आप चर का नाम cloudOneX ellipse() में x-निर्देशांक के तर्क के रूप में उपयोग कर सकते हैं। चूंकि चर cloudOneX में संख्या 50 स्टोर है, हम cloudOneX को किसी भी कार्य में तर्क के रूप में उपयोग कर सकते हैं जिसमें number की आवश्यकता हो। यहाँ, आपने इसे सफेद बादल के x-निर्देशांक के रूप में उपयोग किया, संख्या 50 को चर नाम cloudOneX से बदलकर: ellipse(cloudOneX, 50, 80, 40);।

चर का Scope

एक चर का scope बताता है कि चर को प्रोग्राम में कहाँ-कहाँ उपयोग किया जा सकता है। Custom चर को setup() और draw() के बाहर declare करना अक्सर उपयोगी होता है क्योंकि इससे चर को global scope मिलता है। global scope वाले चर को प्रोग्राम में कहीं भी उपयोग किया जा सकता है। Global चर अक्सर कोड की सबसे पहली लाइनों में declare किए जाते हैं। इससे प्रोग्रामर्स को यह समझने में मदद मिलती है कि क्या बदल रहा है, कोड को maintain करना आसान होता है, और आगे कोड में भ्रम से बचा जा सकता है। Built-in चर जैसे mouseX, mouseY, width, और height को declare करने की आवश्यकता नहीं होती क्योंकि वे p5.js लाइब्रेरी में पहले से बने हैं, और आप उन्हें अपने कोड में कहीं भी उपयोग कर सकते हैं क्योंकि उनका global scope है!

draw() और setup() जैसे अन्य कार्य के अंदर declare किए गए चर का local scope होता है – जिसका अर्थ है कि उन्हें केवल उस block या कार्य में उपयोग किया जा सकता है जहाँ उन्हें declare किया गया है। setup() में declare किए गए चर को draw() या किसी अन्य कार्य में उपयोग नहीं किया जा सकता, और draw() में declare किए गए चर को setup() में उपयोग नहीं किया जा सकता। Global और local चर scope का यह उदाहरण देखें।

Custom चर को declare, initialize और उपयोग करने के बारे में अधिक जानने के लिए इन p5.js reference पेज पर जाएं: let, numbers, & strings।

एनीमेशन के लिए चर का उपयोग

कैनवास पर कोई आकृति तब चलती हुई दिखती है जब उसके x- या y-निर्देशांक बदलते हैं। हम कैनवास पर दिखने वाली किसी भी चीज़ के x- या y-निर्देशांक की जगह चर का उपयोग कर सकते हैं। उदाहरण में:

• cloudOneX में स्टोर की गई value को बदलें, initialize की गई value को बदलकर, और कैनवास पर सफेद बादल में होने वाले बदलावों को देखें।
  • यदि cloudOneX में value बढ़ती है, तो सफेद बादल दाईं ओर चलता हुआ दिखता है।
  • यदि cloudOneX में value घटती है, तो सफेद बादल बाईं ओर चलता हुआ दिखता है।

अगले स्टेप में, हम cloudOneX में value को बदलेंगे ताकि बादल कैनवास पर क्षैतिज रूप से चलता हुआ दिखे।

स्टेप 4: क्षैतिज मोशन जोड़ें

• सफेद बादल के नीचे की लाइन में, कोड की ये लाइनें जोड़ें:

  //sets the x coordinate to the frame count
  //resets at left edge
  cloudOneX = frameCount % width

आपका कोड इस प्रकार दिख सकता है:

ऊपर दिए गए स्टेप में, आपने cloudOneX को frameCount % width की value पर सेट किया। याद रखें कि draw() बार-बार, एक loop में चलता है:

• frameCount एक built-in चर है जो draw() के चलने की संख्या को सेव करता है। यह value तब तक बढ़ती रहती है जब तक आपका प्रोग्राम चल रहा है।
  • frameCount में स्टोर values देखने के लिए यह उदाहरण देखें।
• width एक built-in चर है जो createCanvas() में define की गई कैनवास की चौड़ाई स्टोर करता है। हम देख सकते हैं कि इस उदाहरण में, width 400 है और height 400 है।
• % remainder ऑपरेटर है (जिसे modulo भी कहा जाता है) – यह बाईं ओर की संख्या (frameCount) को दाईं ओर की संख्या (400) से विभाजित करता है, और शेषफल लौटाता है। नीचे दी गई तालिका देखें, जो दिखाती है कि प्रोग्राम चलने के दौरान frameCount और frameCount % width कैसे बदलते हैं (जब width 400 है):

• cloudOneX = frameCount % width के लिए:
  • यदि frameCount 400 से कम है, तो frameCount % width frameCount में value लौटाएगा।
    • उदाहरण के लिए: जब frameCount 40 है, तो frameCount % width 40 लौटाएगा और इसे cloudOneX में स्टोर करेगा। यह सफेद बादल को x-निर्देशांक 40 पर ले जाता है।
  • जैसे-जैसे frameCount बढ़ता है, cloudOneX में नई values स्टोर होंगी, और सफेद बादल दाईं ओर चलता हुआ दिखेगा (उच्चतर x-निर्देशांक)।
  • जब frameCount width के बराबर होता है, तो frameCount % width 0 लौटाएगा। यह बादल की स्थिति को वापस x-निर्देशांक 0 पर – कैनवास के बाएं किनारे पर – रीसेट कर देगा।
  • जब frameCount width से बड़ा होता है, तो frameCount % width फिर से frameCount की values लौटाएगा।
    • उदाहरण के लिए: जब frameCount 440 है, तो frameCount % width 40 लौटाएगा और इसे cloudOneX में स्टोर करेगा।
  • जब frameCount width के किसी भी गुणक तक पहुँचता है, frameCount % width 0 होगा और ऐसा दिखेगा जैसे बादल ने अपनी स्थिति कैनवास के बाएं किनारे (जहाँ x-निर्देशांक 0 है) पर वापस रीसेट कर ली है।

जब प्रोग्राम चलता है:

• cloudOneX को 50 की value से declare और initialize किया जाता है।
• setup() चलता है और 400 pixels की width वाला एक कैनवास बनाता है।
• पहली बार draw() चलता है:
  • background और लैंडस्केप पर सभी आकृतियाँ कैनवास पर बनाई जाती हैं;
  • बादल x-निर्देशांक cloudOneX (जिसमें संख्या 50 स्टोर है) के साथ बनाया जाता है;
  • cloudOneX ऑपरेशन frameCount % width में शेषफल स्टोर करता है।
• दूसरी बार draw() चलता है:
  • जब background और लैंडस्केप फिर से कैनवास पर बनाए जाते हैं तो सभी आकृतियाँ ढक जाती हैं;
  • cloudOneX की नई value के साथ ऊपर एक नया बादल बनाया जाता है, जिससे यह भ्रम पैदा होता है कि यह x-निर्देशांक 0 से 400 तक चला है, फिर रीसेट हो गया;
  • यह pattern तब तक जारी रहता है जब तक draw() बंद नहीं किया जाता।

यह उदाहरण देखें, जो frameCount और frameCount % width की values प्रदर्शित करता है जब आकृतियाँ कैनवास पर चलती हैं। अधिक जानने के लिए MDN पर Remainder reference पर जाएं!

एनीमेशन और draw()

draw() कार्य कोड को बार-बार चलाता है और स्थिर चित्रों की एक श्रृंखला को एनीमेट करते समय एक flipbook की तरह काम करता है।

• एक flipbook animation का उदाहरण

हर बार जब draw() background और लैंडस्केप आकृतियों के लिए कोड की लाइनें पढ़ता है, यह पिछली बार draw() द्वारा कैनवास पर बनाई गई किसी भी चीज़ को ढक देता है। इससे ऐसा दिखता है जैसे हमने अपनी flipbook में अगला पन्ना पलटा हो जब कैनवास पर चीज़ें हर बार draw() चलने पर बदलती हैं।

• यह उदाहरण एक circle के x-निर्देशांक में बदलाव दिखाता है जब वह कैनवास पर क्षैतिज रूप से चलता है।
• यह उदाहरण एक circle के y-निर्देशांक में बदलाव दिखाता है जब वह कैनवास पर ऊर्ध्वाधर रूप से चलता है।
• यह उदाहरण प्रोग्राम चलने के दौरान एक circle के आकार में बदलाव दिखाता है।
• ये उदाहरण दिखाते हैं कि हर बार draw() कार्य चलने पर नई आकृतियाँ एक नई स्थिति पर कैसे बनाई जाती हैं: horizontal motion | vertical motion | random motion
  • इन उदाहरणों में, background() को हटा दिया गया है ताकि draw() द्वारा प्रदान किए जाने वाले “flipbook” भ्रम को समाप्त किया जा सके। अब हम हर नई बनाई गई आकृति देख सकते हैं क्योंकि background उसे ढकने के लिए वहाँ नहीं है।

अधिक जानकारी के लिए draw() के p5.js reference पर जाएं।

frameRate(), frameCount और console.log()

draw() के चलने की संख्या चर frameCount में स्टोर होती है, और draw() 1 सेकंड में जितनी बार चलता है उसे frame rate कहा जाता है। डिफ़ॉल्ट रूप से, frame rate आपके कंप्यूटर द्वारा सेट की जाती है, जो अधिकांश कंप्यूटरों के लिए लगभग 60 होती है। इसका मतलब है कि draw() में दिखने वाला कोड एक सेकंड में लगभग 60 बार चलेगा।

हम frameRate() कार्य का उपयोग करके draw() की frame rate की value सेट और प्रदर्शित कर सकते हैं। हम frame rate और frameCount की value देखने के लिए console.log() का उपयोग करके कंसोल में values और messages प्रदर्शित कर सकते हैं।

• यह उदाहरण एक random circle एनीमेशन दिखाता है और कंसोल में frame rate प्रिंट करता है।
• यह उदाहरण एक random circle एनीमेशन दिखाता है, frame rate को एक नई value पर सेट करता है, और इसे कंसोल में प्रदर्शित करता है।

अधिक जानकारी के लिए, निम्नलिखित p5.js reference पेज पर जाएं: frameRate() | frameCount | console.log()

स्टेप 5: और चलते बादल जोड़ें और frame rate बदलें

• Frame rate को 15 पर सेट करके एनीमेशन को धीमा करें:
  • background() के नीचे की लाइन में यह जोड़ें: frameRate(15); //set frame rate to 15
• अपने लैंडस्केप में अलग-अलग x और y values के साथ और बादल जोड़ने के लिए स्टेप 4 दोहराएं।

  • आप पहले बादल के नीचे यह टेक्स्ट जोड़ सकते हैं:

    ellipse(cloudOneX - 40, 100, 60, 20);
    ellipse(cloudOneX + 20, 150, 40, 10);

आपका कोड इस प्रकार दिख सकता है:

ऊपर दिए गए स्टेप में, आपने जोड़ा:

• x-निर्देशांक cloudOneX - 40 और y-निर्देशांक 100 पर एक दूसरा बादल
  • यह पहले बादल से 40 pixels बाईं ओर और 20 pixels नीचे एक दूसरा बादल बनाता है।
• x-निर्देशांक cloudOneX + 20 और y-निर्देशांक 150 पर एक तीसरा बादल
  • यह पहले बादल से 20 pixels दाईं ओर और 70 pixels नीचे एक तीसरा बादल बनाता है।

यहाँ, हमने cloudOneX को एक reference point के रूप में उपयोग किया – वह बिंदु जिसका उपयोग कैनवास पर एक साथ चलने वाली आकृतियों को रखते समय एक गाइड के रूप में किया जाता है।

• यह उदाहरण दिखाता है कि कैसे एक reference point (x, y) का उपयोग एक साथ कई आकृतियों की स्थिति बदलने के लिए किया जा सकता है।

स्टेप 6: ऊर्ध्वाधर मोशन जोड़ें

लैंडस्केप में एक पेड़ (या कोई अन्य ऑब्जेक्ट) जोड़ें जो ऊर्ध्वाधर (ऊपर या नीचे) चलता हो।

• कैनवास पर एक पेड़ बनाएं।

  • बादलों के कोड और चर बढ़ाने वाले कोड के बीच यह टेक्स्ट जोड़ें:

    //growing tree
    //trunk
    fill("rgb(118,80,72)");
    rect(40, 270, 15, 50);
    //leaves
    fill("green");
    triangle(25, 270, 45, 240, 70, 270);

• पत्तियां बनाने वाले triangle के शीर्ष कोण (240) से frameCount % 290 घटाएं:

  • ऊपर के triangle में y₂ की value को frameCount % 290 से घटाकर modify करें:

    //leaves
    fill("green");
    triangle(25, 270, 45, 240 - frameCount % 290, 70, 270);

• उसी तरह बढ़ने वाले और पेड़ जोड़ें।

  • पहले पेड़ के नीचे यह टेक्स्ट जोड़ें:

    //trunk
    fill("rgb(118,80,72)");
    rect(340, 330, 15, 50);
    //leaves
    fill("green");
    triangle(325, 330, 345, 240 - frameCount % 290, 370, 330);

आपका कोड इस प्रकार दिख सकता है:

इस स्टेप में, आपने:

• एक rectangle (पेड़ का तना) और एक triangle (पत्तियां) से बना पेड़ जोड़ा;
• triangle के शीर्ष कोने के y-निर्देशांक (y2) की value को frameCount % 290 से घटाकर modify किया (see triangle() Diagram for a reminder of y2):
  • चूंकि आप चाहते हैं कि पेड़ की पत्तियां बढ़ें, triangle के शीर्ष कोने को हर बार draw() चलने पर कैनवास पर ऊपर जाना होगा। जैसा कि इस उदाहरण में दिखाया गया है, कैनवास पर ऊपर जाने वाले बिंदु का y-निर्देशांक (y2) घटता है।
  • इस मोशन को प्राप्त करने के लिए, आपने y2 की value को 240 - frameCount % 290 से modify किया। यह y2 को शेषफल से घटाता है जब frameCount को 290 से विभाजित किया जाता है।
  • जैसा कि आपने स्टेप 5 में देखा, हर बार draw() कार्य चलता है, frameCount % 290 द्वारा लौटाई गई value 1 से बढ़ती है ताकि y2 भी बदले।
    • draw() चलने से पहले, y2 240 है।
    • पहली बार draw() चलता है, frameCount % 290 से value 1 है, और y2 239 हो जाता है।
    • दूसरी बार draw() चलता है, frameCount % 290 से value 2 है, और y2 238 हो जाता है।
    • तीसरी बार draw() चलता है, frameCount % 290 में value 3 है, और y2 237 हो जाता है।
    • एक बार frameCount कोई ऐसी संख्या बन जाता है जो 290 का गुणक है, frameCount % 290 में value 0 हो जाती है, और y2 वापस अपनी मूल value 240 पर सेट हो जाता है।
    • यह pattern तब तक जारी रहता है जब तक draw() बंद नहीं किया जाता।

अधिक जानकारी के लिए निम्नलिखित p5.js reference पेज पर जाएं: frameRate() | frameCount | triangle()

स्टेप 7: Random मोशन जोड़ें

• आकाश में random स्थानों पर दिखने वाले shooting stars जोड़ें।

  • दो चर, lineXone और lineYone, declare करें और उन्हें 0 से initialize करें। setup() से पहले ये लाइनें जोड़ें:

    //custom variable for shooting stars
    let lineXone = 0;
    let lineYone = 0;

• frameRate(15) के नीचे यह टेक्स्ट जोड़कर एक shooting star दर्शाने वाली line बनाएं:

  //shooting star
  stroke("yellow");
  line(lineXone, lineYone, lineXone + 30, lineYone - 30);

• cloudOneX को frameCount % width assign करने वाली कोड लाइन के बाद यह टेक्स्ट जोड़कर lineXone और lineYone को random values पर सेट करें:

  //set shooting star to random location
  lineXone = random(0, width);
  lineYone = random(0, height/2);

• अपना अंतिम प्रोजैक्ट देखने के लिए draw() के नीचे माउस पॉइंटर के x- और y-निर्देशांक दिखाने वाली कोड की लाइनें हटा दें।

• अपने दोस्तों के साथ शेयर करें!

आपका कोड इस प्रकार दिखना चाहिए:

ऊपर दिए गए स्टेप में, आपने दो नए चर, lineXone और lineYone, बनाए, जिनका उपयोग आकाश में एक shooting star दर्शाने वाली line बनाने के लिए किया जाता है। Line line() कार्य का उपयोग करके बनाई जाती है (नीचे दिया गया diagram देखें)।

endpoints (x1,y1) और (x2, y2) वाली एक line का diagram। diagram के ऊपर line कार्य का वाक्य - विन्यास प्रदर्शित है: "line(x1, y1, x2, y2);"।

line() को कैनवास पर दिखने के लिए 4 numbers की आवश्यकता होती है। पहली दो संख्याएँ पहले बिंदु (x₁,y₁) के निर्देशांक हैं – x₁ x-निर्देशांक है और y₁ y-निर्देशांक है। अंतिम दो संख्याएँ दूसरे बिंदु (x₂,y₂) के निर्देशांक हैं, जहाँ x₂ x-निर्देशांक है और y₂ y-निर्देशांक है।

line() के बारे में अधिक जानने के लिए p5.js reference पेज पर जाएं।

इस प्रोजैक्ट में, आपने एक ऐसी line बनाई जो एक बिंदु (lineXone, lineYone) से शुरू होती है, जहाँ x₁ lineXone में स्टोर value है और y₁ lineYone में स्टोर value है। Line एक बिंदु (30, lineXone + 30) पर समाप्त होती है, जहाँ x₂ x₁ से 30 pixels दाईं ओर है और y₂ y₁ से 30 pixels ऊपर है।

x₁,y₁ का उपयोग x₂,y₂ की values को modify करने के लिए करने से, line के दोनों सिरे एक ही तरह से चल सकते हैं। इससे line lineXone और lineYone बदलने पर अपना आकार बदले बिना कैनवास पर चल सकती है।

• यह उदाहरण देखें कि x₁,y₁ बदलने पर line कैनवास पर कैसे चलती है।
• यह उदाहरण देखें कि बिंदुओं के बीच की दूरी बदलने पर line कैसे बदलती है।

random() का उपयोग एक न्यूनतम और अधिकतम value के बीच random numbers उत्पन्न करने के लिए किया जाता है। आपने इसका उपयोग lineXone और lineYone को random numbers पर reassign करने के लिए किया, उन्हें आपके लैंडस्केप के आकाश में random स्थितियों पर रखते हुए।

random() का उपयोग करने वाले उदाहरण:

• Random के साथ line की स्थिति बदलना
• Random के साथ रंग बदलना

Random numbers कैसे उत्पन्न होते हैं, इसके बारे में अधिक जानने के लिए random() के p5.js reference पेज पर जाएं।

जब draw() चलता है:

• Background सेट किया जाता है।
• Shooting star बाकी लैंडस्केप के साथ कैनवास पर रखा जाता है, और cloudOneX बदलता है।
• lineXone 0 और width के बीच एक random number में बदलता है (ताकि यह हमेशा कैनवास पर दिखे)।
• lineYone 0 और height/2 के बीच एक random number में बदलता है।
  • height/2 इंगित करता है कि shooting star केवल कैनवास के ऊपरी आधे हिस्से में दिख सकता है।

जब draw() फिर से चलता है, वही प्रक्रिया होती है, और shooting star कैनवास के ऊपरी आधे हिस्से में एक नई random स्थिति पर रखा जाता है। यह तब तक जारी रहता है जब तक draw() बंद नहीं किया जाता।

Error Messages

p5.js कंसोल का उपयोग प्रोग्रामर्स को उन कोड लाइनों के बारे में बताने के लिए करता है जो इसे समझ नहीं आते। इन्हें error messages कहा जाता है। प्रोग्रामर्स इसका उपयोग अपने कोड में “bugs” को खोजने और ठीक करने के लिए करते हैं। अधिक जानने के लिए Field Guide to Debugging पढ़ें या यह वीडियो देखें!

अगला कदम

• Conditions and Interactivity

पिछले कदम

• Get Started
• Setting Up Your Environment

संसाधन

• Coding Train Video Tutorials:
  • 1.5 - Errors
  • 1.6 - Comments
  • 2.1 - mouseX & mouseY
  • 2.2 - Variables
  • 2.4 - random()
• Grow Flipbook Video

• Guidelines for writing JavaScript code
• Template Literals
• Remainder (%)
• String Interpolation in JavaScript

Bibliography

• Introduction to Computational Media Curriculum, NYCPS Computer Science Education team
• Creative Web Curriculum, NYCPS Computer Science Education team