परिचय

इस ट्यूटोरियल में, आप सीखेंगे कि p5.js का उपयोग करके एक गतिशील और रंगीन ज्यामितीय एनीमेशन कैसे बनाया जाए। यह एनीमेशन इस विचार का प्रतीक है कि "दुनिया अद्भुत चीजें करने वाले शानदार और अविश्वसनीय लोगों से भरी है।" आकृतियाँ कैनवास पर बेतरतीब ढंग से घूमेंगी, रंग बदलेंगी और एक दृश्यमान मनोरम प्रभाव पैदा करेंगी।

चरण 1: अपना परिवेश स्थापित करना

1. p5.js डाउनलोड करें:

   • p5.js वेबसाइट पर जाएं और p5.js का नवीनतम संस्करण डाउनलोड करें।
   • वैकल्पिक रूप से, आप ऑनलाइन p5.js संपादक editor.p5js.org का उपयोग कर सकते हैं, जो आपको सीधे अपने ब्राउज़र में अपना कोड लिखने और चलाने की अनुमति देता है।

2. एक नया प्रोजेक्ट बनाएं:

   • यदि आप ऑनलाइन संपादक का उपयोग कर रहे हैं, तो ऊपरी बाएं कोने में "नया" पर क्लिक करके एक नया स्केच बनाएं।
   • यदि आप स्थानीय रूप से कोडिंग कर रहे हैं, तो एक नई HTML फ़ाइल बनाएं और p5.js लाइब्रेरी को लिंक करें।

चरण 2: मूल संरचना लिखना

आइए अपने p5.js स्केच की मूल संरचना स्थापित करके शुरुआत करें। इसमें सेटअप() और ड्रा() फ़ंक्शंस को परिभाषित करना शामिल है।

function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();  // Disable stroke for the shapes
}

function draw() {
  background(30, 30, 60, 25);  // Dark background with transparency
}

स्पष्टीकरण:

createCanvas(windowWidth, windowHeight);: यह आपके ब्राउज़र विंडो से मेल खाने के लिए कैनवास का आकार सेट करता है।
नोस्ट्रोक();: यह हमारे द्वारा बनाई गई आकृतियों से बॉर्डर हटा देता है।
पृष्ठभूमि(30, 30, 60, 25);: यह पृष्ठभूमि के रंग को कुछ पारदर्शिता के साथ गहरे नीले रंग में सेट करता है, जिससे आकृतियों के लिए अनुगामी प्रभाव पैदा होता है।

चरण 3: गतिशील ज्यामितीय आकृतियाँ जोड़ना

अब, अलग-अलग रंगों, स्थितियों और आकारों के साथ यादृच्छिक आकार बनाने के लिए कोड जोड़ें।

function draw() {
  background(30, 30, 60, 25); // Dark background with transparency

  for (let i = 0; i 



स्पष्टीकरण:

• यादृच्छिक चर:

  • x और y कैनवास पर प्रत्येक आकृति की स्थिति निर्धारित करते हैं।
  • आकार प्रत्येक आकृति के आकार को नियंत्रित करता है।
  • कलरआर, कलरजी, कलरबी भरण रंग के लाल, हरे और नीले घटकों के लिए यादृच्छिक मान उत्पन्न करते हैं।
  • fill(colorR, colorG, colorB, 150);: यह थोड़ी पारदर्शिता के साथ भरण रंग सेट करता है।

• आकार प्रकार:

  • दीर्घवृत्त(x, y, आकार, साइज़);: एक वृत्त या दीर्घवृत्त बनाता है।
  • rect(x, y, size, size);: एक वर्ग या आयत बनाता है।
  • त्रिकोण (x, y, x आकार, y, x आकार / 2, y - आकार);: एक त्रिकोण बनाता है।

चरण 4: एनिमेशन को उत्तरदायी बनाना

यह सुनिश्चित करने के लिए कि कैनवास विंडो के साथ आकार बदलता है, निम्नलिखित फ़ंक्शन जोड़ें:

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

चरण 5: अपना स्केच चलाना

• यदि आप p5.js ऑनलाइन संपादक का उपयोग कर रहे हैं, तो अपना एनीमेशन देखने के लिए बस "प्ले" बटन दबाएं।
• यदि आप स्थानीय रूप से कोडिंग कर रहे हैं, तो एनीमेशन देखने के लिए अपनी HTML फ़ाइल को वेब ब्राउज़र में खोलें।