अपना एनवायरनमेंट सेट अप करना

By Layla Quiñones, Jaleesa Trapp, Shaikh Irtiza Nasar

p5.js और Visual Studio Code के लोगो।

परिचय

p5.js से कोड लिखना शुरू करने के लिए, आपको वह कोडिंग एनवायरनमेंट सेट अप करना होगा जिसमें आप अपने प्रोग्राम लिखेंगे और सेव करेंगे। इस गाइड में, आप:

p5.js Web Editor की मदद से वेब पर, या Visual Studio Code (VS Code) की मदद से अपने कंप्यूटर पर कोडिंग एनवायरनमेंट सेट अप करेंगे।
शेप्स और कलर का इस्तेमाल करके अपना पहला सिंपल प्रोग्राम लिखने के लिए p5.js रेफरेंस का इस्तेमाल करेंगे।
अपना कोड सेव और शेयर करेंगे।

आपको क्या चाहिए होगा

इंटरनेट एक्सेस और एक डेस्कटॉप ब्राउज़र, जैसे:
एक डेस्कटॉप कंप्यूटर, लैपटॉप, या क्रोमबुक

स्टेप 0: कोडिंग एनवायरनमेंट का प्रकार चुनें

आप अपनी p5.js कोडिंग यात्रा p5.js Web Editor या VS Code से शुरू कर सकते हैं।

p5.js Web Editor एक वेबसाइट है जहाँ प्रोग्रामर बिना किसी code editor को डाउनलोड या कॉन्फ़िगर किए, p5.js प्रोग्राम्स लिख, टेस्ट, शेयर, या रीमिक्स कर सकते हैं। एक code editor टेक्स्ट को व्यवस्थित और रंगीन करके कोड लिखना और पढ़ना आसान बनाता है, जिससे प्रोग्रामर्स को कोड के अलग-अलग हिस्से देखने में मदद मिलती है।

VS Code एक लोकप्रिय code editor है जिसे आप अपने कंप्यूटर पर इंस्टॉल करते हैं और यह एक ज़्यादा एडवांस्ड कोडिंग अनुभव देता है। अपनी ज़रूरत के हिसाब से, वह कोडिंग एनवायरनमेंट चुनें जो आपके लिए सबसे सही हो।

p5.js Web Editor हाउ-टू का लिंक
VS Code हाउ-टू का लिंक

अगर आप p5.js में नए हैं, तो p5.js Web Editor से शुरुआत करें!

p5.js Web Editor का इस्तेमाल करना

स्टेप 1: p5.js Web Editor साइन-अप पेज खोलें

अपने कंप्यूटर पर एक डेस्कटॉप ब्राउज़र खोलें और https://editor.p5js.org/ पर जाएँ।
वेब पेज के ऊपर-दाईं ओर मौजूद “Sign up” लिंक पर क्लिक करें।

p5.js Editor के ऊपरी दाएँ कोने में “Sign Up” लिंक की ओर इशारा करता एक तीर।

स्टेप 2: p5.js Web Editor पर अकाउंट बनाएँ

एक बार sign-up पेज पर पहुँचने के बाद, नीचे दिए गए ऑप्शंस में से किसी एक का इस्तेमाल करके p5.js Web Editor पर अकाउंट बनाएँ:
मैनुअल साइन-अप
- एक यूज़रनेम बनाएँ।
- अपना ईमेल एड्रेस डालें।
- एक पासवर्ड बनाएँ और उसे कन्फर्म करें।
- “Sign Up” बटन पर क्लिक करें।

Google अकाउंट का इस्तेमाल करके
- पेज के नीचे “Login with Google” लिखे बटन पर क्लिक करें।

“Login with Google” दिखाता हुआ एक Google लॉगिन बटन।

अगर ज़रूरत हो, तो अपने Google अकाउंट का ईमेल और पासवर्ड डालने के लिए दिए गए निर्देशों का पालन करें।
GitHub अकाउंट का इस्तेमाल करके
- पेज के नीचे “Login with GitHub” लिखे बटन पर क्लिक करें।

“Login with Github” दिखाता हुआ एक Github लॉगिन बटन।

अपना GitHub यूज़रनेम और पासवर्ड डालने के लिए निर्देशों का पालन करें।
“Authorize processing” बटन पर क्लिक करके p5.js Web Editor को अपनी GitHub डिटेल्स एक्सेस करने की अनुमति दें।

एक GitHub थर्ड-पार्टी ऑथराइज़ेशन विंडो, जो यूज़र्स को बताती है कि p5.js Web Editor उनके GitHub अकाउंट को एक्सेस करना चाहता है और उनके पर्सनल यूज़र डेटा से ईमेल एड्रेस पढ़ना चाहता है। यूज़र्स “Cancel” बटन पर क्लिक करके रिक्वेस्ट कैंसिल कर सकते हैं, या “Authorize processing” बटन पर क्लिक करके रिक्वेस्ट अप्रूव कर सकते हैं।

स्टेप 3: p5.js Web Editor को एक्सप्लोर करें

p5.js Web Editor एक ऑनलाइन एनवायरनमेंट है जहाँ प्रोग्रामर अपना p5.js कोड लिख और टेस्ट कर सकते हैं। p5.js Web Editor के अलग-अलग तत्व और उनके फंक्शन को एक्सप्लोर करें।

नीचे दिया गया डायग्राम एडिटर के अंतरापृष्ठ के हर तत्व को लेबल और डिस्क्राइब करता है:

p5.js Web Editor के यूज़र अंतरापृष्ठ का एक लेबल्ड डायग्राम।

स्टेप 4: अपना पहला स्केच नाम दें, सेव करें, और रन करें

टेक्स्ट एडिटर के ऊपर मौजूद पेंसिल आइकन पर क्लिक करके और अपने प्रोजेक्ट का नाम टाइप करके, अपने प्रोजेक्ट्स को नाम दें।

एक तीर स्केच को रीनेम करने के लिए पेंसिल आइकन की ओर इशारा करता है।

ऊपर की टूलबार में File पर क्लिक करके, और Save चुनकर प्रोजेक्ट्स सेव करें।
- सुनिश्चित करें कि आप अपने अकाउंट में लॉग इन हैं, वरना आप स्केच सेव नहीं कर पाएँगे।
- प्रोजेक्ट्स को बार-बार सेव करना यह सुनिश्चित करने में मदद करता है कि अगर कोडिंग करते समय आपके कंप्यूटर, ब्राउज़र, या इंटरनेट कनेक्शन में कुछ गड़बड़ी होती है, तो कोड खो न जाए।

p5.js Web Editor पर एक यूज़र एक नए प्रोजेक्ट का नाम रखता है और उसे सेव करता है।

“Sketch saved.” टेक्स्ट वाले एक अधिसूचना बॉक्स की ओर इशारा करता एक तीर।

अपने कोड का आउटपुट देखने के लिए, ऊपर बाईं ओर मौजूद Play बटन पर क्लिक करें:

p5.js Web Editor के प्रीव्यू विंडो में एक खाली कैनवस दिखाई देता है जब कोई यूज़र ऊपर दाईं ओर मौजूद “Play” बटन पर क्लिक करता है।

एक p5.js sketch एक टेक्स्ट फ़ाइल होती है जिसमें JavaScript प्रोग्रामिंग भाषा में कोड लिखा होता है। JavaScript एक प्रोग्रामिंग भाषा है जिसका इस्तेमाल वेब पेजेज़ को इंटरैक्टिव बनाने के लिए किया जाता है। p5.js JavaScript में लिखी गई एक लाइब्रेरी है – इसीलिए इसके नाम के अंत में “.js” आता है, जो JavaScript के लिए है। p5.js से आप ऐसे प्रोग्राम बना सकते हैं जो रंगीन और एनिमेटेड हों, जिनमें ऐसे फ़ीचर हों जिनसे यूज़र इंटरैक्ट कर सकें! p5.js से आप क्या-क्या कर सकते हैं, यह और जानने के लिए p5.js Welcome Video! देखें। JavaScript के बारे में और जानने के लिए, आप इस रिसोर्स पर जा सकते हैं।

एडिटर sketch.js फ़ाइल में इस कोड के साथ शुरू होता है:


  
  
    function setup() {
  createCanvas(400, 400);
}
function draw() {
  background(220);
}

ऊपर दिया गया कोड प्रीव्यू में एक कैनवस तत्व बनाता है जो 400 पिक्सल चौड़ा और 400 पिक्सल ऊँचा है। यह बैकग्राउंड को ग्रे के एक शेड पर भी सेट करता है।

`createCanvas()`

कंप्यूटर स्क्रीन्स छोटी-छोटी लाइट्स से बनी होती हैं जिन्हें pixels कहा जाता है, जो किसी भी इमेज को बनाने वाले सबसे छोटे तत्व होते हैं। प्रीव्यू विंडो में कैनवस बनाने वाली कोड की लाइन createCanvas(400, 400) है। इस लाइन ऑफ़ कोड के बिना, ड्रॉ करने के लिए कोई कैनवस नहीं होगा! 400, 400 नंबर कैनवस की चौड़ाई और ऊँचाई को पिक्सल में दर्शाते हैं। इन नंबर्स को createCanvas() फंक्शन के arguments भी कहा जाता है।

किसी फंक्शन के parentheses के अंदर रखी गई किसी भी वैल्यू को arguments कहा जाता है: यानी फंक्शंस को कस्टमाइज़ करने के लिए इस्तेमाल होने वाली कोई भी वैल्यू। createCanvas(), setup() फंक्शन के अंदर आता है ताकि एक HTML canvas तत्व बनाया जा सके जिस पर आप ड्रॉ कर सकते हैं।

और जानने के लिए, setup() और createCanvas() के p5.js रेफरेंस पेजेज़ पर जाएँ।

स्टेप 5: कैनवस का कलर बदलें

आप टेक्स्ट एडिटर में किसी भी स्केच के लिए कमांड्स टाइप कर सकते हैं, और Play पर क्लिक करके प्रीव्यू विंडो में अपने कोड का आउटपुट देख सकते हैं।
background() फंक्शन का argument बदलकर अपने कैनवस का बैकग्राउंड कलर बदलें।
- background(220); को background("aqua"); में बदलें और Play दबाएँ।


  
  
    function setup() {
  createCanvas(400, 400);
}
function draw() {
  background("aqua");
}

`background()`

background() फंक्शन बैकग्राउंड को एक स्पेसिफ़िक कलर से रंगता है। आप कैनवस के बैकग्राउंड को रंगने के लिए क्वोटेशन के अंदर शब्दों या नंबर्स का इस्तेमाल कर सकते हैं। और जानने के लिए, background() और color के p5.js रेफरेंस पेजेज़ पर जाएँ।

स्टेप 6: कैनवस पर शेप्स ड्रॉ करें

कैनवस पर एक सर्कल ड्रॉ करें।
- background() फंक्शन के नीचे यह टेक्स्ट डालें:


  
  
    //circle in the center with a width of 100
circle(200,200,100);

Play बटन पर क्लिक करें।

आपका कोड ऐसा दिखना चाहिए:


  
  
    function setup() {
  createCanvas(400, 400);
}
function draw() {
  background(220);

  // Draw a circle in the center with
  // a width of 100.
  circle(200, 200, 100);
}

`draw()`

आप function draw() के बाद वाली curly brackets {} के अंदर शेप्स के लिए स्पेसिफ़िक कमांड्स टाइप करके कैनवस पर शेप्स ड्रॉ कर सकते हैं।

ऊपर दिया गया स्केच draw() के अंदर circle() फंक्शन को कॉल करके कैनवस पर एक सर्कल ड्रॉ करता है। पहले दो arguments – 200, 200 – सर्कल को कैनवस के बीच में रखते हैं, और आखिरी argument – 100 – बताता है कि सर्कल 100 पिक्सल चौड़ा है। circle() फंक्शन के ऊपर की लाइनों में embed किए गए कमेंट्स बताते हैं कि कोड क्या करता है। और जानने के लिए, draw() और circle() के p5.js रेफरेंस पेजेज़ पर जाएँ।

स्टेप 7: बनाएँ!

p5.js में कई फंक्शंस हैं जिनका इस्तेमाल करके आप अपने कैनवस में स्टैटिक और इंटरैक्टिव, दोनों तरह के तत्व शामिल कर सकते हैं।

बैकग्राउंड और सर्कल कमांड्स को इस टेक्स्ट से बदलें:


  
  
    //when mouse button is pressed, circles turn black
if (mouseIsPressed === true) {
  fill(0);
} else {
  fill(255);
}

//white circles drawn at mouse position
circle(mouseX, mouseY, 100);

आपका कोड ऐसा दिखना चाहिए:

माउस बटन को दबाकर रखें और माउस पॉइंटर को कैनवस पर ड्रैग करें।

ऊपर दिया गया कोड माउस पॉइंटर की उसी पोज़िशन पर सफ़ेद सर्कल्स ड्रॉ करता है। जब माउस बटन दबाया जाता है, तो सर्कल का कलर बदलकर काला हो जाता है।

और p5.js फंक्शंस, जैसे 2D प्रिमिटिव शेप्स, के लिए p5.js रेफरेंस पर जाएँ।

एरर्स

फंक्शन के नाम गलत स्पेल करना या कोई कॉमा भूल जाना आसान है। Syntax rules कंप्यूटर को कोड समझने में मदद करते हैं। जब कोई “rule” टूटता है, तो कंसोल में एक एरर मैसेज दिखाई देगा (उदाहरण के लिए, अगर circle() गलत स्पेल किया गया हो)। इन एरर्स को आमतौर पर “bugs” कहा जाता है। कंसोल एडिटर से मैसेज दिखाता है जिनमें आपकी किसी भी गलती की डिटेल्स होती हैं। जब आपका कोड सही तरीके से एक्ज़िक्यूट नहीं होता, तो हो सकता है आपके कोड में कोई bug हो!

अपने कोड में एरर्स ठीक करने के बारे में और जानकारी के लिए Field Guide to Debugging पर जाएँ।

एक्सेसिबिलिटी नोट:

अगर आप स्क्रीन रीडर इस्तेमाल कर रहे हैं, तो आपको p5.js Web Editor में accessible outputs ऑन करने होंगे और अपने html में accessibility library जोड़नी होगी। और जानने के लिए, स्क्रीन रीडर के साथ p5.js Web Editor इस्तेमाल करने की हमारी गाइड पर जाएँ।

स्टेप 8: अपना प्रोजेक्ट शेयर करें

एक बार आपका प्रोजेक्ट सेव हो जाए, तो आप उसे शेयर कर सकते हैं!

ऊपर की टूलबार में File पर क्लिक करके, Share चुनकर, और दिए गए किसी एक लिंक को कॉपी करके प्रोजेक्ट्स शेयर करें। आप अपने प्रोजेक्ट्स को तीन अलग-अलग तरीकों से शेयर कर सकते हैं:
- Embed: अपने p5.js स्केच को html इस्तेमाल करने वाली किसी वेबसाइट या ब्लॉग में जोड़ें (कोड नहीं दिखाता)।
- Fullscreen: अपने प्रोजेक्ट को एक लिंक के साथ शेयर करें (कोड नहीं दिखाता)।
- Edit: p5.js एडिटर में अपने प्रोजेक्ट का कोड एक लिंक के साथ शेयर करें।

अगले स्टेप्स:

अगली ट्यूटोरियल: Get Started
कुछ p5.js examples एक्सप्लोर करें

रिसोर्सेस:

VS Code का इस्तेमाल करना

VS Code, Web Editor की तुलना में एक ज़्यादा एडवांस्ड कोड एडिटिंग अनुभव देता है। अगर आप पहले से VS Code से परिचित हैं, तो हम इस ऑप्शन की सलाह देते हैं।

स्टेप 1: VS Code डाउनलोड करें

इस लिंक का इस्तेमाल करके अपनी डिवाइस पर VS Code डाउनलोड करें।
इन रिसोर्सेस का इस्तेमाल करके VS Code के फ़ीचर्स और अलग-अलग सेटअप ऑप्शंस एक्सप्लोर करें।

स्टेप 2: p5.js लाइब्रेरी एक्सटेंशन इंस्टॉल करें

VS Code खोलें और बाईं टूलबार में extensions manager पर जाएँ।
सर्च बार में p5.js 2.x Project Generator टाइप करें, एक्सटेंशन सिलेक्ट करें, और इंस्टॉल बटन पर क्लिक करें।
इस एक्सटेंशन के बारे में यहाँ दी गई डिटेल्स से खुद को परिचित करें।

यह एक्सटेंशन ये देता है:

p5.js 2.0 के साथ क्विक प्रोजेक्ट सेटअप
p5.js फंक्शंस के लिए IntelliSense और autocomplete
ऑनलाइन/ऑफ़लाइन लाइब्रेरी ऑप्शंस
ज़्यादातर p5.js फंक्शंस के लिए Parameter hints

स्टेप 3: एक p5.js प्रोजेक्ट बनाएँ

तरीका 1 - Command Palette से:

ऊपर की टूलबार में View पर क्लिक करें और Command Palette सिलेक्ट करें, या Ctrl+Shift+P (macOS पर Cmd+Shift+P) दबाएँ
सर्च बार में Create a new p5.js 2.x Project टाइप करें और अपनी मशीन पर वह फ़ोल्डर सिलेक्ट करें जिसमें आप अपना प्रोजेक्ट बनाना चाहते हैं।
अपना प्रोजेक्ट कॉन्फ़िगर करने के लिए दिए गए प्रॉम्प्ट्स को फ़ॉलो करें
जब पूछा जाए, तो “Open Project” पर क्लिक करें ताकि नया प्रोजेक्ट आपकी मौजूदा VS Code विंडो में खुले, या अगर आप अपना मौजूदा काम खुला रखना चाहते हैं तो “Open in New Window” चुनें
शुरुआत करने वालों के लिए “Open Project” की सलाह दी जाती है

Explorer में किसी फ़ोल्डर पर राइट-क्लिक करें
“Create p5.js 2.x Project Here” सिलेक्ट करें
अपना प्रोजेक्ट कॉन्फ़िगर करने के लिए दिए गए प्रॉम्प्ट्स को फ़ॉलो करें
जब पूछा जाए, तो “Open Project” पर क्लिक करें ताकि नया प्रोजेक्ट आपकी मौजूदा VS Code विंडो में खुले, या अगर आप अपना मौजूदा काम खुला रखना चाहते हैं तो “Open in New Window” चुनें
शुरुआत करने वालों के लिए “Open Project” की सलाह दी जाती है

स्टेप 4: अपने स्केच का प्रीव्यू देखें

अपने कोड का प्रीव्यू देखने के लिए:

बाईं Explorer पैनल में VSCODE टैब में मौजूद index.html फ़ाइल पर राइट क्लिक करें।
Open Live Server सिलेक्ट करें (इससे एक लोकल डेवलपमेंट सर्वर शुरू होगा)।
आपके डिफ़ॉल्ट ब्राउज़र में आपके प्रोजेक्ट के आउटपुट के साथ एक विंडो खुलेगी।

एडिटर sketch.js फ़ाइल और प्रीव्यू में इस कोड के साथ शुरू होता है:

ऊपर दिया गया कोड प्रीव्यू में एक कैनवस तत्व बनाता है जो 800 पिक्सल चौड़ा और 600 पिक्सल ऊँचा है। यह बैकग्राउंड को ग्रे के एक शेड पर भी सेट करता है।

`createCanvas()`

कंप्यूटर स्क्रीन्स छोटी-छोटी लाइट्स से बनी होती हैं जिन्हें pixels कहा जाता है, जो किसी भी इमेज को बनाने वाले सबसे छोटे तत्व होते हैं। प्रीव्यू विंडो में कैनवस बनाने वाली कोड की लाइन createCanvas(800, 600) है। इस लाइन ऑफ़ कोड के बिना, ड्रॉ करने के लिए कोई कैनवस नहीं होगा! 800, 600 नंबर कैनवस की चौड़ाई और ऊँचाई को पिक्सल में दर्शाते हैं। इन नंबर्स को createCanvas() फंक्शन के arguments भी कहा जाता है।

और जानने के लिए, setup() और createCanvas() के p5.js रेफरेंस पेजेज़ पर जाएँ।

स्टेप 5: कैनवस का कलर बदलें

background() फंक्शन का argument बदलकर अपने कैनवस का बैकग्राउंड कलर बदलें।
- background(220); को background("yellow"); में बदलें और Play दबाएँ।

आपका कोड ऐसा दिखना चाहिए:

`background()`

स्टेप 6: कैनवस पर शेप्स ड्रॉ करें

कैनवस पर एक सर्कल ड्रॉ करें।
- background() फंक्शन के नीचे यह टेक्स्ट डालें:


  
  
    //circle in the center with a width of 100
circle(200,200,100);

प्रीव्यू विंडो अपडेट करने के लिए अपने चेंजेज़ सेव करना न भूलें।

आपका कोड ऐसा दिखना चाहिए:

`draw()`

ऊपर दिया गया स्केच draw() के अंदर circle() फंक्शन को कॉल करके कैनवस पर एक सर्कल ड्रॉ करता है। पहले दो arguments – 400, 400 – सर्कल को कैनवस के बीच में रखते हैं, और आखिरी argument – 100 – बताता है कि सर्कल 100 पिक्सल चौड़ा है। circle() फंक्शन के ऊपर की लाइनों में embed किए गए कमेंट्स बताते हैं कि कोड क्या करता है। और जानने के लिए, draw() और circle() के p5.js रेफरेंस पेजेज़ पर जाएँ।

स्टेप 7: बनाएँ!

सर्कल कमांड को इस टेक्स्ट से बदलें:


  
  
    //when mouse button is pressed, circles turn black
if (mouseIsPressed === true) {
  fill(0);
} else {
  fill(255);
}

//white circles drawn at mouse position
circle(mouseX, mouseY, 100);

आपका कोड ऐसा दिखना चाहिए:

माउस बटन को दबाकर रखें और माउस पॉइंटर को कैनवस पर ड्रैग करें।

और p5.js फंक्शंस के लिए, जैसे आप ड्रॉ कर सकने वाली अन्य शेप्स, p5.js रेफरेंस पर जाएँ।

एरर्स

फंक्शन के नाम गलत स्पेल करना या कोई कॉमा भूल जाना आसान है। Syntax rules कंप्यूटर को कोड समझने में मदद करते हैं। जब कोई “rule” टूटता है (उदाहरण के लिए, अगर circle() गलत स्पेल किया गया हो), तो ब्राउज़र के कंसोल में एक मैसेज दिखाई देगा। इन एरर्स को आमतौर पर bugs कहा जाता है; जब आपका कोड सही तरीके से एक्ज़िक्यूट नहीं होता, तो हो सकता है आपके कोड में कोई bug हो!

स्पेसिफ़िक ब्राउज़र्स में कंसोल देखने के निर्देशों के लिए इन रिसोर्सेस पर जाएँ: Chrome | Firefox | Safari | Edge
अपने कोड में एरर्स ठीक करने के बारे में और जानकारी के लिए Field Guide to Debugging पर जाएँ।

एक्सेसिबिलिटी नोट

अगर आप स्क्रीन रीडर इस्तेमाल कर रहे हैं, तो इसकी जगह p5.js Web Editor का इस्तेमाल करें! और जानने के लिए, “How to Use the p5.js Web Editor with a Screen Reader” रिसोर्स पर जाएँ।

अगले स्टेप्स:

अगली ट्यूटोरियल: Get Started
कुछ p5.js examples एक्सप्लोर करें

रिसोर्सेस:

p5.js Welcome Video
The Coding Train: 1.2: p5.js Web Editor - p5.js Tutorial
p5.js रेफरेंस पेज
Javascript - MDN रेफरेंस
Field Guide to Debugging
p5.js with VSCode (वीडियो ट्यूटोरियल)
VSCode Overview
p5.vscode रेफरेंस
p5.nvim रेफरेंस - Neovim के लिए एडिटर सपोर्ट
Browser consoles in Chrome | Firefox | Safari | Edge

अपना एनवायरनमेंट सेट अप करना

परिचय

आपको क्या चाहिए होगा

स्टेप 0: कोडिंग एनवायरनमेंट का प्रकार चुनें

p5.js Web Editor का इस्तेमाल करना

स्टेप 1: p5.js Web Editor साइन-अप पेज खोलें

स्टेप 2: p5.js Web Editor पर अकाउंट बनाएँ

स्टेप 3: p5.js Web Editor को एक्सप्लोर करें

स्टेप 4: अपना पहला स्केच नाम दें, सेव करें, और रन करें

`createCanvas()`

स्टेप 5: कैनवस का कलर बदलें

`background()`

स्टेप 6: कैनवस पर शेप्स ड्रॉ करें

`draw()`

स्टेप 7: बनाएँ!

एरर्स

एक्सेसिबिलिटी नोट:

स्टेप 8: अपना प्रोजेक्ट शेयर करें

अगले स्टेप्स:

रिसोर्सेस:

VS Code का इस्तेमाल करना

स्टेप 1: VS Code डाउनलोड करें

स्टेप 2: p5.js लाइब्रेरी एक्सटेंशन इंस्टॉल करें

स्टेप 3: एक p5.js प्रोजेक्ट बनाएँ

तरीका 1 - Command Palette से:

तरीका 2 - Explorer Context Menu से:

स्टेप 4: अपने स्केच का प्रीव्यू देखें

`createCanvas()`

स्टेप 5: कैनवस का कलर बदलें

`background()`

स्टेप 6: कैनवस पर शेप्स ड्रॉ करें

`draw()`

स्टेप 7: बनाएँ!

एरर्स

एक्सेसिबिलिटी नोट

अगले स्टेप्स:

रिसोर्सेस:

संबंधित संदर्भ